@ozdemircibaris/react-image-editor
Version:
Professional React image editor component with blur, crop, shapes, drawing, and undo/redo functionality. Built with Fabric.js and modern React patterns.
1 lines • 60.8 kB
JavaScript
"use strict";var n=require("react/jsx-runtime"),e=require("react"),t=require("@radix-ui/react-popover"),o=require("fabric");function a(n){var e=Object.create(null);return n&&Object.keys(n).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:function(){return n[t]}})}}),e.default=n,Object.freeze(e)}var r=a(t),i=function(){return i=Object.assign||function(n){for(var e,t=1,o=arguments.length;t<o;t++)for(var a in e=arguments[t])Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},i.apply(this,arguments)};function c(n,e,t){if(t||2===arguments.length)for(var o,a=0,r=e.length;a<r;a++)!o&&a in e||(o||(o=Array.prototype.slice.call(e,0,a)),o[a]=e[a]);return n.concat(o||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var l={blur:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgMTFDMy40NSAxMSAzIDExLjQ1IDMgMTJDMyAxMi41NSAzLjQ1IDEzIDQgMTNDNC41NSAxMyA1IDEyLjU1IDUgMTJDNSAxMS40NSA0LjU1IDExIDQgMTFaTTQgMTVDMy40NSAxNSAzIDE1LjQ1IDMgMTZDMyAxNi41NSAzLjQ1IDE3IDQgMTdDNC41NSAxNyA1IDE2LjU1IDUgMTZDNSAxNS40NSA0LjU1IDE1IDQgMTVaTTQgN0MzLjQ1IDcgMyA3LjQ1IDMgOEMzIDguNTUgMy40NSA5IDQgOUM0LjU1IDkgNSA4LjU1IDUgOEM1IDcuNDUgNC41NSA3IDQgN1pNMSA3LjVDMC43MiA3LjUgMC41IDcuNzIgMC41IDhDMC41IDguMjggMC43MiA4LjUgMSA4LjVDMS4yOCA4LjUgMS41IDguMjggMS41IDhDMS41IDcuNzIgMS4yOCA3LjUgMSA3LjVaTTQgM0MzLjQ1IDMgMyAzLjQ1IDMgNEMzIDQuNTUgMy40NSA1IDQgNUM0LjU1IDUgNSA0LjU1IDUgNEM1IDMuNDUgNC41NSAzIDQgM1pNMTkgOC41QzE5LjI4IDguNSAxOS41IDguMjggMTkuNSA4QzE5LjUgNy43MiAxOS4yOCA3LjUgMTkgNy41QzE4LjcyIDcuNSAxOC41IDcuNzIgMTguNSA4QzE4LjUgOC4yOCAxOC43MiA4LjUgMTkgOC41Wk0xMiA1QzEyLjU1IDUgMTMgNC41NSAxMyA0QzEzIDMuNDUgMTIuNTUgMyAxMiAzQzExLjQ1IDMgMTEgMy40NSAxMSA0QzExIDQuNTUgMTEuNDUgNSAxMiA1Wk0xMiAxLjVDMTIuMjggMS41IDEyLjUgMS4yOCAxMi41IDFDMTIuNSAwLjcyIDEyLjI4IDAuNSAxMiAwLjVDMTEuNzIgMC41IDExLjUgMC43MiAxMS41IDFDMTEuNSAxLjI4IDExLjcyIDEuNSAxMiAxLjVaTTEgMTEuNUMwLjcyIDExLjUgMC41IDExLjcyIDAuNSAxMkMwLjUgMTIuMjggMC43MiAxMi41IDEgMTIuNUMxLjI4IDEyLjUgMS41IDEyLjI4IDEuNSAxMkMxLjUgMTEuNzIgMS4yOCAxMS41IDEgMTEuNVpNOCAxOC41QzcuNzIgMTguNSA3LjUgMTguNzIgNy41IDE5QzcuNSAxOS4yOCA3LjcyIDE5LjUgOCAxOS41QzguMjggMTkuNSA4LjUgMTkuMjggOC41IDE5QzguNSAxOC43MiA4LjI4IDE4LjUgOCAxOC41Wk04IDEuNUM4LjI4IDEuNSA4LjUgMS4yOCA4LjUgMUM4LjUgMC43MiA4LjI4IDAuNSA4IDAuNUM3LjcyIDAuNSA3LjUgMC43MiA3LjUgMUM3LjUgMS4yOCA3LjcyIDEuNSA4IDEuNVpNOCA1QzguNTUgNSA5IDQuNTUgOSA0QzkgMy40NSA4LjU1IDMgOCAzQzcuNDUgMyA3IDMuNDUgNyA0QzcgNC41NSA3LjQ1IDUgOCA1Wk04IDEwLjVDNy4xNyAxMC41IDYuNSAxMS4xNyA2LjUgMTJDNi41IDEyLjgzIDcuMTcgMTMuNSA4IDEzLjVDOC44MyAxMy41IDkuNSAxMi44MyA5LjUgMTJDOS41IDExLjE3IDguODMgMTAuNSA4IDEwLjVaTTE2IDExQzE1LjQ1IDExIDE1IDExLjQ1IDE1IDEyQzE1IDEyLjU1IDE1LjQ1IDEzIDE2IDEzQzE2LjU1IDEzIDE3IDEyLjU1IDE3IDEyQzE3IDExLjQ1IDE2LjU1IDExIDE2IDExWk0xNiAxNUMxNS40NSAxNSAxNSAxNS40NSAxNSAxNkMxNSAxNi41NSAxNS40NSAxNyAxNiAxN0MxNi41NSAxNyAxNyAxNi41NSAxNyAxNkMxNyAxNS40NSAxNi41NSAxNSAxNiAxNVpNMTYgN0MxNS40NSA3IDE1IDcuNDUgMTUgOEMxNSA4LjU1IDE1LjQ1IDkgMTYgOUMxNi41NSA5IDE3IDguNTUgMTcgOEMxNyA3LjQ1IDE2LjU1IDcgMTYgN1pNMTYgM0MxNS40NSAzIDE1IDMuNDUgMTUgNEMxNSA0LjU1IDE1LjQ1IDUgMTYgNUMxNi41NSA1IDE3IDQuNTUgMTcgNEMxNyAzLjQ1IDE2LjU1IDMgMTYgM1pNMTkgMTEuNUMxOC43MiAxMS41IDE4LjUgMTEuNzIgMTguNSAxMkMxOC41IDEyLjI4IDE4LjcyIDEyLjUgMTkgMTIuNUMxOS4yOCAxMi41IDE5LjUgMTIuMjggMTkuNSAxMkMxOS41IDExLjcyIDE5LjI4IDExLjUgMTkgMTEuNVpNMTIgMTVDMTEuNDUgMTUgMTEgMTUuNDUgMTEgMTZDMTEgMTYuNTUgMTEuNDUgMTcgMTIgMTdDMTIuNTUgMTcgMTMgMTYuNTUgMTMgMTZDMTMgMTUuNDUgMTIuNTUgMTUgMTIgMTVaTTEyIDE4LjVDMTEuNzIgMTguNSAxMS41IDE4LjcyIDExLjUgMTlDMTEuNSAxOS4yOCAxMS43MiAxOS41IDEyIDE5LjVDMTIuMjggMTkuNSAxMi41IDE5LjI4IDEyLjUgMTlDMTIuNSAxOC43MiAxMi4yOCAxOC41IDEyIDE4LjVaTTggNi41QzcuMTcgNi41IDYuNSA3LjE3IDYuNSA4QzYuNSA4LjgzIDcuMTcgOS41IDggOS41QzguODMgOS41IDkuNSA4LjgzIDkuNSA4QzkuNSA3LjE3IDguODMgNi41IDggNi41Wk04IDE1QzcuNDUgMTUgNyAxNS40NSA3IDE2QzcgMTYuNTUgNy40NSAxNyA4IDE3QzguNTUgMTcgOSAxNi41NSA5IDE2QzkgMTUuNDUgOC41NSAxNSA4IDE1Wk0xMiAxMC41QzExLjE3IDEwLjUgMTAuNSAxMS4xNyAxMC41IDEyQzEwLjUgMTIuODMgMTEuMTcgMTMuNSAxMiAxMy41QzEyLjgzIDEzLjUgMTMuNSAxMi44MyAxMy41IDEyQzEzLjUgMTEuMTcgMTIuODMgMTAuNSAxMiAxMC41Wk0xMiA2LjVDMTEuMTcgNi41IDEwLjUgNy4xNyAxMC41IDhDMTAuNSA4LjgzIDExLjE3IDkuNSAxMiA5LjVDMTIuODMgOS41IDEzLjUgOC44MyAxMy41IDhDMTMuNSA3LjE3IDEyLjgzIDYuNSAxMiA2LjVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=",circle:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=",crop:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTMgMUw2IDE2YTIgMiAwIDAgMCAyIDJoMTUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMSA2LjEzTDE2IDZhMiAyIDAgMCAxIDIgMnYxNSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==",cursor:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwyMSAxMUwxNC4zMzMzIDE0LjMzMzNMMTEgMjFMNiA2WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+",pencil:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjUgNi41TDE3LjUgMTAuNU00IDIwLjAwMDNIOEwxOC41IDkuNTAwM0MxOC43NjI2IDkuMjM3NjYgMTguOTcxIDguOTI1ODUgMTkuMTEzMSA4LjU4MjY5QzE5LjI1NTMgOC4yMzk1MyAxOS4zMjg0IDcuODcxNzQgMTkuMzI4NCA3LjUwMDNDMTkuMzI4NCA3LjEyODg3IDE5LjI1NTMgNi43NjEwNyAxOS4xMTMxIDYuNDE3OTFDMTguOTcxIDYuMDc0NzUgMTguNzYyNiA1Ljc2Mjk1IDE4LjUgNS41MDAzQzE4LjIzNzQgNS4yMzc2NiAxNy45MjU2IDUuMDI5MzIgMTcuNTgyNCA0Ljg4NzE4QzE3LjIzOTIgNC43NDUwMyAxNi44NzE0IDQuNjcxODcgMTYuNSA0LjY3MTg4QzE2LjEyODYgNC42NzE4OCAxNS43NjA4IDQuNzQ1MDMgMTUuNDE3NiA0Ljg4NzE4QzE1LjA3NDQgNS4wMjkzMiAxNC43NjI2IDUuMjM3NjYgMTQuNSA1LjUwMDNMNCAxNi4wMDAzVjIwLjAwMDNaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=",redo:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxIDd2NmgtNiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zIDE3YTkgOSAwIDAgMSA5LTkgOSA5IDAgMCAxIDYgMi4zTDIxIDEzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+",square:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNUMzIDQuNDY5NTcgMy4yMTA3MSAzLjk2MDg2IDMuNTg1NzkgMy41ODU3OUMzLjk2MDg2IDMuMjEwNzEgNC40Njk1NyAzIDUgM0gxOUMxOS41MzA0IDMgMjAuMDM5MSAzLjIxMDcxIDIwLjQxNDIgMy41ODU3OUMyMC43ODkzIDMuOTYwODYgMjEgNC40Njk1NyAyMSA1VjE5QzIxIDE5LjUzMDQgMjAuNzg5MyAyMC4wMzkxIDIwLjQxNDIgMjAuNDE0MkMyMC4wMzkxIDIwLjc4OTMgMTkuNTMwNCAyMSAxOSAyMUg1QzQuNDY5NTcgMjEgMy45NjA4NiAyMC43ODkzIDMuNTg1NzkgMjAuNDE0MkMzLjIxMDcxIDIwLjAzOTEgMyAxOS41MzA0IDMgMTlWNVoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==",undo:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgN3Y2aDYiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEgMTdhOSA5IDAgMCAwLTktOSA5IDkgMCAwIDAtNiAyLjNMMyAxMyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==",trash:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgN0gyME0xMCAxMVYxN00xNCAxMVYxN001IDdMNiAxOUM2IDE5LjUzMDQgNi4yMTA3MSAyMC4wMzkxIDYuNTg1NzkgMjAuNDE0MkM2Ljk2MDg2IDIwLjc4OTMgNy40Njk1NyAyMSA4IDIxSDE2QzE2LjUzMDQgMjEgMTcuMDM5MSAyMC43ODkzIDE3LjQxNDIgMjAuNDE0MkMxNy43ODkzIDIwLjAzOTEgMTggMTkuNTMwNCAxOCAxOUwxOSA3TTkgN1Y0QzkgMy43MzQ3OCA5LjEwNTM2IDMuNDgwNDMgOS4yOTI4OSAzLjI5Mjg5QzkuNDgwNDMgMy4xMDUzNiA5LjczNDc4IDMgMTAgM0gxNEMxNC4yNjUyIDMgMTQuNTE5NiAzLjEwNTM2IDE0LjcwNzEgMy4yOTI4OUMxNC44OTQ2IDMuNDgwNDMgMTUgMy43MzQ3OCAxNSA0VjciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg=="},d=function(e){var t=e.name,o=e.width,a=void 0===o?20:o,r=e.height,c=void 0===r?20:r,d=e.className,s=e.title,g=l[t];if(!g)return console.warn('Icon "'.concat(t,'" not found in iconMap')),null;var u=g.replace(/^data:image\/svg\+xml;base64,/,""),b=atob(u),m=b.match(/viewBox=["']([^"']+)["']/),h=m?m[1]:"0 0 20 20",f=b.match(/<svg[^>]*>([\s\S]*?)<\/svg>/),M=f?f[1]:b;return n.jsxs("svg",i({width:a,height:c,viewBox:h,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"inline-block ".concat(d||""),role:"img","aria-hidden":!s},s&&{"aria-label":s},{children:[s&&n.jsx("title",{children:s}),n.jsx("g",{dangerouslySetInnerHTML:{__html:M}})]}))},s=function(e){var t=e.trigger,o=e.content;e.className;var a=e.contentClassName,i=e.placement,c=void 0===i?"bottom":i,l=e.offset,d=void 0===l?20:l;return n.jsxs(r.Root,{children:[n.jsx(r.Trigger,{asChild:!0,children:n.jsx("div",{onClick:function(n){return n.stopPropagation()},className:"cursor-pointer",children:t})}),n.jsx(r.Portal,{children:n.jsxs(r.Content,{className:"z-50 w-72 rounded-lg bg-gray-900/90 backdrop-blur-md p-4 shadow-2xl outline-none border border-white/0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ".concat(a||""),sideOffset:d,side:c,align:"center",onOpenAutoFocus:function(n){return n.preventDefault()},children:[o,n.jsx(r.Arrow,{className:"fill-gray-900/90"})]})})]})},g=function(e){var t=e.children,o=e.onClick,a=e.onPress,r=e.disabled,i=void 0!==r&&r,c=e.color,l=void 0===c?"default":c,d=e.size,s=void 0===d?"md":d,g=e.className,u=void 0===g?"":g,b=e.type,m=void 0===b?"button":b,h=["inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",{sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-sm",lg:"px-6 py-3 text-base"}[s],{primary:"bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white shadow-lg hover:shadow-xl",secondary:"bg-gray-600 hover:bg-gray-700 text-white",default:"bg-gray-500 hover:bg-gray-600 text-white"}[l],{primary:"focus:ring-blue-500",secondary:"focus:ring-gray-500",default:"focus:ring-gray-500"}[l],u].join(" ");return n.jsx("button",{type:m,className:h,onClick:function(){i||(null==o||o(),null==a||a())},disabled:i,children:t})},u=function(t){var o=t.value,a=t.onChange,r=t.min,i=void 0===r?0:r,c=t.max,l=void 0===c?100:c,d=t.step,s=void 0===d?1:d,g=t.size,u=void 0===g?"md":g,b=t.className,m=void 0===b?"":b,h=t.disabled,f=void 0!==h&&h,M=e.useState(!1),p=M[0],x=M[1],v=e.useRef(null),I=(o-i)/(l-i)*100,N=function(n){if(p&&!f&&v.current){var e=v.current.getBoundingClientRect(),t=n.clientX-e.left,o=e.width,r=Math.max(0,Math.min(100,t/o*100)),c=Math.round(r/100*(l-i)+i),d=Math.round(c/s)*s;a(d)}},D=function(){x(!1)};e.useEffect(function(){if(p)return document.addEventListener("mousemove",N),document.addEventListener("mouseup",D),function(){document.removeEventListener("mousemove",N),document.removeEventListener("mouseup",D)}},[p]);var y={sm:4,md:6,lg:8}[u],j={sm:12,md:14,lg:16}[u];return n.jsxs("div",{ref:v,className:"relative flex items-center select-none no-focus-ring ".concat(m),onMouseDown:function(n){f||(x(!0),N(n))},role:"slider","aria-valuemin":i,"aria-valuemax":l,"aria-valuenow":o,tabIndex:f?-1:0,onKeyDown:function(n){if(!f){var e=o,t=l-i;switch(n.key){case"ArrowLeft":case"ArrowDown":e=Math.max(i,o-s);break;case"ArrowRight":case"ArrowUp":e=Math.min(l,o+s);break;case"PageDown":e=Math.max(i,o-Math.max(1,Math.round(.1*t)));break;case"PageUp":e=Math.min(l,o+Math.max(1,Math.round(.1*t)));break;case"Home":e=i;break;case"End":e=l;break;default:return}n.preventDefault(),a(Math.round(e/s)*s)}},"aria-disabled":f,style:{height:Math.max(j,y)+8,cursor:f?"not-allowed":"pointer",width:"100%",outline:"none"},children:[n.jsx("div",{style:{width:"100%",height:y,background:"#374151",borderRadius:9999},children:n.jsx("div",{style:{width:"".concat(I,"%"),height:"100%",background:"linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)",borderRadius:9999,transition:"width 120ms ease"}})}),n.jsx("div",{style:{position:"absolute",top:"50%",left:"".concat(I,"%"),width:j,height:j,borderRadius:"9999px",background:"linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)",border:"2px solid #1f2937",boxShadow:"0 0 0 2px rgba(59,130,246,0.25)",transform:"translate(-50%, -50%)",transition:"transform 120ms ease, box-shadow 120ms ease",pointerEvents:"none"}})]})},b=function(t){var a=t.canvas,r=t.onCanvasReady,i=t.className,c=void 0===i?"":i,l=t.zoomButtonClassName,d=void 0===l?"":l,s=t.background,g=t.canvasWrapperClassName,u=void 0===g?"":g,b=e.useRef(null),m=e.useState(!1),h=m[0],f=m[1],M=e.useState(!1),p=M[0],x=M[1],v=e.useCallback(function(){var n=window.innerWidth<=768,e=window.innerWidth>768&&window.innerWidth<=1024;if(n){(c=(i=Math.max(0,window.innerWidth-8))/(r=1))>(a=Math.max(0,window.innerHeight-80))&&(i=(c=a)*r);var t=200,o=120;return i=Math.max(i,t),c=Math.max(c,o),{width:Math.floor(i),height:Math.floor(c)}}if(e){var a,r,i,c;(c=(i=Math.max(0,window.innerWidth-100))/(r=16/9))>(a=Math.max(0,window.innerHeight-180))&&(i=(c=a)*r);t=600,o=338;return i=Math.max(i,t),c=Math.max(c,o),{width:Math.floor(i),height:Math.floor(c)}}(c=(i=Math.max(0,window.innerWidth-200))/(r=16/9))>(a=Math.max(0,window.innerHeight-200))&&(i=(c=a)*r);t=800,o=450;return i=Math.max(i,t),c=Math.max(c,o),{width:Math.floor(i),height:Math.floor(c)}},[]);e.useEffect(function(){if(b.current&&!a){var n=setTimeout(function(){var n=v(),e=n.width,t=n.height,a=new o.fabric.Canvas(b.current);a.setWidth(e),a.setHeight(t);var i=s||"transparent";a.setBackgroundColor(i,function(){a.renderAll()}),r(a),f(!0)},0);return function(){var e,t;if(clearTimeout(n),a)try{null===(t=(e=a).dispose)||void 0===t||t.call(e)}catch(n){console.warn("Canvas dispose method not available")}}}},[a,r,v,s]),e.useEffect(function(){var n=function(){if(a){var n=v(),e=n.width,t=n.height;a.setWidth(e),a.setHeight(t),a.renderAll()}};return window.addEventListener("resize",n),function(){window.removeEventListener("resize",n)}},[a,v]);var I=e.useCallback(function(n,e){if(void 0===e&&(e=220),a){var t,r=(t=n,Math.max(.2,Math.min(4,t))),i=a.getZoom(),c=performance.now(),l=new o.fabric.Point(a.getWidth()/2,a.getHeight()/2),d=function(n){var t=n-c,o=Math.min(1,t/e),s=function(n){return 1-Math.pow(1-n,3)}(o),g=i+(r-i)*s;a.zoomToPoint(l,g),a.requestRenderAll(),o<1&&requestAnimationFrame(d)};requestAnimationFrame(d)}},[a]),N=e.useCallback(function(){if(a){var n=a.getZoom();I(1.2*n)}},[a,I]),D=e.useCallback(function(){if(a){var n=a.getZoom();I(n/1.2)}},[a,I]);return e.useEffect(function(){if(a){var n=!1,e=!1,t=function(n){"Space"===n.code&&(n.preventDefault(),e=!0,x(!0),a.setCursor("grab"))},o=function(n){"Space"===n.code&&n.preventDefault()},r=function(n){"Space"===n.code&&(n.preventDefault(),e=!1,x(!1),a.setCursor("default"))},i=function(t){0===t.e.button&&e&&(n=!0,a.setCursor("grabbing"))},c=function(e){if(n){var t=e.e,o=a.viewportTransform;o[4]+=t.movementX,o[5]+=t.movementY,a.requestRenderAll()}},l=function(){n=!1,a.setCursor(e?"grab":"default")};return window.addEventListener("keydown",t,{capture:!0}),window.addEventListener("keypress",o,{capture:!0}),window.addEventListener("keyup",r),a.on("mouse:down",i),a.on("mouse:move",c),a.on("mouse:up",l),function(){window.removeEventListener("keydown",t,{capture:!0}),window.removeEventListener("keypress",o,{capture:!0}),window.removeEventListener("keyup",r),a.off("mouse:down",i),a.off("mouse:move",c),a.off("mouse:up",l)}}},[a]),n.jsx("div",{className:"canvas-container ".concat(c),children:n.jsxs("div",{className:"canvas-wrapper ".concat(u),children:[n.jsx("canvas",{ref:b,className:"canvas-element"}),h&&n.jsxs("div",{style:{position:"absolute",right:16,bottom:16,display:"flex",gap:8,background:"rgba(17,24,39,0.75)",border:"1px solid rgba(255,255,255,0.08)",borderRadius:12,padding:6,backdropFilter:"blur(8px)",boxShadow:"0 10px 20px rgba(0,0,0,0.35)"},children:[n.jsx("button",{type:"button",title:"Zoom out",onClick:D,className:"zoom-button zoom-out ".concat(d),style:d?{}:{background:"#1f2937",color:"#d1d5db",borderColor:"rgba(255,255,255,0.08)"},children:"−"}),n.jsx("button",{type:"button",title:"Zoom in",onClick:N,className:"zoom-button zoom-in ".concat(d),style:d?{}:{background:"#3b82f6",color:"white",borderColor:"rgba(59,130,246,0.35)"},children:"+"})]}),h&&!p&&window.innerWidth>768&&n.jsxs("div",{style:{position:"absolute",left:16,bottom:16,display:"flex",alignItems:"center",gap:8,color:"#9ca3af",fontSize:12,background:"rgba(17,24,39,0.35)",border:"1px solid rgba(255,255,255,0.06)",borderRadius:10,padding:"6px 10px",backdropFilter:"blur(6px)"},children:[n.jsx("div",{style:{width:28,height:18,borderRadius:4,border:"1px solid #4b5563",background:"transparent",color:"#d1d5db",display:"flex",alignItems:"center",justifyContent:"center",fontSize:10},children:"Space"}),n.jsx("span",{style:{opacity:.75},children:"Press and drag to pan"})]})]})})},m=["#ff7000","#D64045","#2D3748","#E53E3E","#38A169","#3182CE","#D69E2E","#805AD5","#DD6B20","#319795","#F56565","#48BB78","#4299E1","#ECC94B","#9F7AEA","#ED8936"],h=function(e){var t=e.iconName,o=e.onClick,a=e.title,r=e.isActive,i=void 0!==r&&r,c=e.disabled,l=void 0!==c&&c,s=e.className,g=void 0===s?"":s;return n.jsx("button",{onClick:o,disabled:l,className:"toolbar-button ".concat(i?"active":""," ").concat(l?"disabled":""," ").concat(g),title:a,children:n.jsx(d,{name:t,width:20,height:20,className:"text-white"})})},f=function(e){var t=e.currentColor,o=e.onColorChange;return n.jsx("div",{className:"color-palette",children:n.jsx("div",{className:"color-palette-grid",children:m.map(function(e){return n.jsx("button",{onClick:function(){return o(e)},className:"color-button ".concat(t===e?"active":""),style:{backgroundColor:e},title:e},e)})})})},M=function(e){var t=e.currentWidth,o=e.onWidthChange;return n.jsx("div",{className:"width-slider",children:n.jsxs("div",{className:"width-slider-content",children:[n.jsx("label",{className:"width-slider-label",children:"Stroke Width:"}),n.jsx(u,{size:"sm",step:1,min:1,max:20,value:t,onChange:o,className:"width-slider-input"}),n.jsxs("span",{className:"width-slider-value",children:[t,"px"]})]})})},p=function(e){var t=e.onAddShape,o=e.onCropStart,a=e.onAddBlur,r=e.onToggleDraw,i=e.onToggleSelectMode,c=e.hasImage,l=e.isCropping,d=e.isDrawing,g=e.isSelectMode,u=e.activeShape,b=e.isBlurActive,m=void 0!==b&&b,p=e.selectedObject,x=e.currentColor,v=void 0===x?"#D64045":x,I=e.currentStrokeWidth,N=void 0===I?2:I,D=e.onColorChange,y=e.onStrokeWidthChange,j=e.onUndo,w=e.onRedo,A=e.canUndo,k=void 0!==A&&A,S=e.canRedo,C=void 0!==S&&S,E=e.onDeleteObject;e.showCancelButton,e.onCancel;var T=e.className,z=void 0===T?"":T,L=e.buttonClassName,U=void 0===L?"":L;return e.saveButtonClassName,e.cancelButtonClassName,e.saveButtonTitle,e.cancelButtonTitle,n.jsx("div",{className:"toolbar ".concat(z),children:c&&n.jsxs(n.Fragment,{children:[n.jsx(h,{iconName:"cursor",onClick:i,title:"Select",isActive:g,disabled:!1,className:U}),n.jsx(h,{iconName:"pencil",onClick:r,title:"Draw",isActive:d,disabled:l,className:U}),n.jsx(h,{iconName:"crop",onClick:o,title:"Crop",disabled:l||d,className:U}),n.jsx(h,{iconName:"blur",onClick:a,title:"Blur",isActive:m,disabled:l||d,className:U}),n.jsx(h,{iconName:"square",onClick:function(){return t("rectangle")},title:"Rectangle",isActive:"rectangle"===u,disabled:l||d,className:U}),n.jsx(h,{iconName:"circle",onClick:function(){return t("circle")},title:"Circle",isActive:"circle"===u,disabled:l||d,className:U}),n.jsx("div",{className:"toolbar-divider"}),n.jsx(s,{trigger:n.jsx("div",{className:"toolbar-button ".concat(p||d?"":"disabled"," ").concat(U),children:n.jsx("div",{className:"w-6 h-6 rounded border-2 border-gray-700",style:{backgroundColor:v}})}),content:n.jsx(f,{currentColor:v,onColorChange:D||function(){}}),contentClassName:"glass-effect-strong",placement:"bottom"}),n.jsx(s,{trigger:n.jsx("div",{className:"toolbar-button ".concat(p||d?"":"disabled"," ").concat(U),children:n.jsx("div",{style:{display:"flex",alignItems:"center",gap:6},children:n.jsx("div",{style:{width:18,height:2,background:"#9ca3af",borderRadius:9999,position:"relative"},children:n.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translate(0,-50%)",width:Math.max(2,Math.min(12,N))+2,height:Math.max(2,Math.min(12,N)),borderRadius:9999,background:"linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)",boxShadow:"0 0 0 1px rgba(0,0,0,0.4)"}})})})}),content:n.jsx(M,{currentWidth:N,onWidthChange:y||function(){}}),placement:"bottom",contentClassName:"glass-effect-strong"}),n.jsx("div",{className:"toolbar-divider"}),n.jsx(h,{iconName:"undo",onClick:j||function(){},title:"Undo (Ctrl+Z)",disabled:!k,className:U}),n.jsx(h,{iconName:"redo",onClick:w||function(){},title:"Redo (Ctrl+Y)",disabled:!C,className:U}),p&&n.jsxs(n.Fragment,{children:[n.jsx("div",{className:"toolbar-divider"}),n.jsx(h,{iconName:"trash",onClick:E||function(){},title:"Delete (Backspace)",disabled:!1,className:"delete-button ".concat(U)})]})]})})};exports.ImageEditor=function(t){var a=t.imageUrl,r=t.onSave,i=t.onCancel,l=t.showCancelButton,d=void 0!==l&&l,s=t.className,u=void 0===s?"":s,m=t.headerClassName,h=void 0===m?"":m,f=t.toolbarClassName,M=void 0===f?"":f,x=t.buttonClassName,v=void 0===x?"":x,I=t.saveButtonClassName,N=void 0===I?"":I,D=t.cancelButtonClassName,y=void 0===D?"":D,j=t.canvasClassName,w=void 0===j?"":j,A=t.canvasWrapperClassName,k=void 0===A?"":A,S=t.zoomButtonClassName,C=void 0===S?"":S,E=t.background,T=t.saveButtonTitle,z=void 0===T?"Save":T,L=t.cancelButtonTitle,U=void 0===L?"Cancel":L,O=e.useState(!1),Z=O[0],W=O[1],Q=e.useState(!0),B=Q[0],R=Q[1],H=e.useState(null),Y=H[0],P=H[1],J=e.useState("#ff7000"),V=J[0],G=J[1],X=e.useState(2),F=X[0],q=X[1],K=e.useCallback(function(n){if(n){var e=n.getObjects().find(function(n){return"originalImage"===n.id});e&&(e.set({selectable:!1,evented:!1,hasControls:!1,hasBorders:!1,lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0}),n.renderAll())}},[]),_=function(n,t,o){var a=e.useState([]),r=a[0],i=a[1],l=e.useState(-1),d=l[0],s=l[1],g=e.useRef(!1),u=e.useRef(0),b=e.useRef(n),m=e.useCallback(function(n){b.current=n},[]);return{saveState:e.useCallback(function(){var n=b.current;if(n&&!g.current){var e=Date.now();if(!(e-u.current<300)){u.current=e;var o={json:JSON.stringify(n.toJSON(["id","isBlurPatch","blurRectId","isDrawing","selectable","evented","hasControls","hasBorders","lockMovementX","lockMovementY","lockRotation","lockScalingX","lockScalingY","lockUniScaling"])),timestamp:e};i(function(n){s(function(e){var a=c(c([],n.slice(0,e+1),!0),[o],!1);return a.length>t?a.slice(-t).length-1:a.length-1});var e=c(c([],n.slice(0,d+1),!0),[o],!1);return e.length>t?e.slice(-t):e})}}},[d,t]),undo:e.useCallback(function(){var n=b.current;if(n&&!(d<=0)){g.current=!0;var e=d-1,t=r[e];t?n.loadFromJSON(t.json,function(){n.renderAll(),s(e),g.current=!1,o&&o()}):g.current=!1}},[d,r,o]),redo:e.useCallback(function(){var n=b.current;if(n&&!(d>=r.length-1)){g.current=!0;var e=d+1,t=r[e];t?n.loadFromJSON(t.json,function(){n.renderAll(),s(e),g.current=!1,o&&o()}):g.current=!1}},[d,r,o]),initializeHistory:e.useCallback(function(){var n=b.current;if(n){var e={json:JSON.stringify(n.toJSON(["id","isBlurPatch","blurRectId","isDrawing","selectable","evented","hasControls","hasBorders","lockMovementX","lockMovementY","lockRotation","lockScalingX","lockScalingY","lockUniScaling"])),timestamp:Date.now()};i([e]),s(0)}},[]),canUndo:d>0,canRedo:d<r.length-1,updateCanvas:m}}(null,50,function(){return K(ln)}),$=_.saveState,nn=_.undo,en=_.redo,tn=_.initializeHistory,on=_.canUndo,an=_.canRedo,rn=_.updateCanvas,cn=function(n,t,a,r){var i=e.useState(null),c=i[0],l=i[1],d=e.useState(!1),s=d[0],g=d[1],u=e.useState(null),b=u[0],m=u[1],h=e.useCallback(function(n){l(n),n.selection=!0,n.hoverCursor="move",o.fabric&&o.fabric.PencilBrush&&(n.freeDrawingBrush=new o.fabric.PencilBrush(n),n.freeDrawingBrush.color=t,n.freeDrawingBrush.width=a)},[t,a]);return e.useEffect(function(){c&&n&&o.fabric.Image.fromURL(n,function(n){if(n){c.getObjects().forEach(function(n){return c.remove(n)}),c.renderAll();var e=c.getWidth(),t=c.getHeight(),o=n.getElement(),a=o.width,i=o.height,l=Math.min((e-48)/a,(t-48)/i,1);n.set({originX:"left",originY:"top",scaleX:l,scaleY:l,selectable:!1,evented:!1,hasControls:!1,hasBorders:!1,lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0}),n.id="originalImage",c.setZoom(1),c.setViewportTransform([1,0,0,1,0,0]),c.add(n);var d=(e-n.getScaledWidth())/2,s=(t-n.getScaledHeight())/2;n.set({left:d,top:s}),n.setCoords(),c.renderAll(),g(!0),m(n),setTimeout(function(){r()},100)}})},[c,n,r]),{canvas:c,hasImage:s,originalImage:b,setOriginalImage:m,handleCanvasReady:h}}(a,V,F,tn),ln=cn.canvas,dn=cn.hasImage,sn=cn.originalImage,gn=cn.setOriginalImage,un=cn.handleCanvasReady;e.useEffect(function(){ln&&rn(ln)},[ln,rn]);var bn=function(n,t,a,r){var i=e.useState([]),l=i[0],d=i[1],s=e.useCallback(function(e){if(n&&t){var a=n;if(!a.isUpdatingBlur){a.isUpdatingBlur=!0,n.getObjects().forEach(function(t){var o=t,a=e;o.isBlurPatch&&o.blurRectId===a.id&&n.remove(t)});var r=e.left||0,i=e.top||0,c=e.getScaledWidth(),l=e.getScaledHeight(),d=t.left||0,s=t.top||0,g=t.getScaledWidth(),u=t.getScaledHeight(),b=new o.fabric.Point(d,s),m=new o.fabric.Point(d+g,s+u),h=r+c,f=i+l,M=Math.max(b.x,r),p=Math.max(b.y,i),x=Math.min(m.x,h),v=Math.min(m.y,f),I=Math.max(0,x-M),N=Math.max(0,v-p);if(I<=0||N<=0)return e.set({visible:!0}),n.requestRenderAll(),void(a.isUpdatingBlur=!1);var D=t.scaleX||1,y=t.scaleY||1,j=Math.round((M-b.x)/D),w=Math.round((p-b.y)/y),A=Math.round(I/D),k=Math.round(N/y),S=t.getElement();requestAnimationFrame(function(){var t=document.createElement("canvas"),r=t.getContext("2d");if(r){t.width=Math.max(1,A),t.height=Math.max(1,k),r.drawImage(S,j,w,A,k,0,0,A,k);var i=document.createElement("canvas"),c=i.getContext("2d");c&&(i.width=A,i.height=k,c.filter="blur(20px)",c.drawImage(t,0,0),o.fabric.Image.fromURL(i.toDataURL(),function(t){t.set({left:M,top:p,originX:"left",originY:"top",scaleX:D,scaleY:y,selectable:!1,evented:!1,isBlurPatch:!0,blurRectId:e.id,opacity:1}),n.add(t),e.set({visible:!0}),n.bringToFront(e),n.requestRenderAll(),a.isUpdatingBlur=!1}))}})}}},[n,t]),g=e.useCallback(function(){if(n&&t&&!a){r(!1);var e=n.getWidth(),i=n.getHeight(),l=t.getScaledWidth(),g=t.getScaledHeight(),u=t.left||0,b=t.top||0,m=l,h=g,f=n.viewportTransform||[1,0,0,1,0,0],M=o.fabric.util.invertTransform(f),p=new o.fabric.Point(e/2,i/2),x=o.fabric.util.transformPoint(p,M),v=x.x-75,I=x.y-50;v=Math.max(u+20,Math.min(v,u+m-150-20)),I=Math.max(b+20,Math.min(I,b+h-100-20));var N=new o.fabric.Rect({id:Date.now(),left:v,top:I,width:150,height:100,originX:"left",originY:"top",fill:"transparent",stroke:"#8b5cf6",strokeWidth:2,strokeUniform:!0,strokeDashArray:[5,5],opacity:.9,cornerColor:"#8b5cf6",cornerSize:10,transparentCorners:!1,hasControls:!0,hasBorders:!0,lockRotation:!0,lockSkewingX:!0,lockSkewingY:!0,lockScalingFlip:!0,centeredScaling:!1,objectCaching:!1,selectable:!0,evented:!0,borderColor:"#8b5cf6",cornerStyle:"rect"});n.add(N),n.setActiveObject(N),s(N);var D=null,y=!1,j=function(){y||(y=!0,D&&clearTimeout(D),D=setTimeout(function(){s(N),y=!1},50))};N.on("modified",j),N.on("moving",j),N.on("scaling",j),d(function(n){return c(c([],n,!0),[N],!1)}),n.renderAll()}},[n,t,a,s,r]);return{activeBlurRects:l,setActiveBlurRects:d,handleAddBlur:g,updateBlurEffect:s}}(ln,sn,Z,R),mn=bn.activeBlurRects,hn=bn.setActiveBlurRects,fn=bn.handleAddBlur,Mn=function(n,t,a,r,i,l,d){var s=e.useState(!1),g=s[0],u=s[1],b=e.useState(null),m=b[0],h=b[1],f=e.useState(null),M=f[0],p=f[1],x=e.useState([]),v=x[0],I=x[1],N=e.useCallback(function(){if(n&&t&&!a){u(!0),l(!1),n.getObjects().slice().forEach(function(e){e!==t&&e.isBlurPatch&&r.includes(e)&&n.remove(e)}),i([]);var e=n.getWidth(),c=n.getHeight(),d={left:t.left||0,top:t.top||0,width:t.getScaledWidth(),height:t.getScaledHeight()},s=new o.fabric.Rect({left:0,top:0,width:e,height:d.top,fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),g=new o.fabric.Rect({left:0,top:d.top+d.height,width:e,height:c-(d.top+d.height),fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),b=new o.fabric.Rect({left:0,top:d.top,width:d.left,height:d.height,fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),m=new o.fabric.Rect({left:d.left+d.width,top:d.top,width:e-(d.left+d.width),height:d.height,fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),f=Math.min(200,.8*d.width),M=Math.min(150,.8*d.height),x=new o.fabric.Rect({left:d.left+(d.width-f)/2,top:d.top+(d.height-M)/2,width:f,height:M,originX:"left",originY:"top",fill:"rgba(255,255,255,0.02)",stroke:"#60a5fa",strokeWidth:2,strokeUniform:!0,strokeDashArray:[6,4],selectable:!0,hasControls:!0,hasBorders:!0,lockRotation:!0,lockScalingFlip:!0,centeredScaling:!1,objectCaching:!1,minScaleLimit:.1,cornerStyle:"rect",cornerColor:"#ffffff",cornerStrokeColor:"#1f2937",borderColor:"#60a5fa",transparentCorners:!1,cornerSize:12,padding:2});n.add(s,g,b,m),n.add(x);var v=new o.fabric.Textbox("".concat(Math.round(f)," × ").concat(Math.round(M)),{left:x.left||0,top:(x.top||0)-28,fontSize:12,fill:"#e5e7eb",backgroundColor:"rgba(17,24,39,0.6)",padding:6,textAlign:"center",selectable:!1,evented:!1});v.excludeFromExport=!0,n.add(v),n.setActiveObject(x),h(x),p(v),I([s,g,b,m]),n.renderAll()}},[n,t,r,a,i,l]),D=e.useCallback(function(){if(n&&t&&m){var e=n.viewportTransform||[1,0,0,1,0,0],a=o.fabric.util.invertTransform(e),r=m.getBoundingRect(),i=new o.fabric.Point(r.left,r.top),c=new o.fabric.Point(r.left+r.width,r.top+r.height),s=o.fabric.util.transformPoint(i,a),g=o.fabric.util.transformPoint(c,a),b=t.left||0,f=t.top||0;t.width,t.scaleX,t.height,t.scaleY;var p=new o.fabric.Point(b,f),x=t.scaleX||1,v=t.scaleY||1,I=(s.x-p.x)/x,N=(s.y-p.y)/v,D=(g.x-s.x)/x,y=(g.y-s.y)/v,j=t.width||0,w=t.height||0;I=Math.max(0,Math.min(I,j)),N=Math.max(0,Math.min(N,w)),D=Math.max(1,Math.min(D,j-I)),y=Math.max(1,Math.min(y,w-N));var A=t.getElement(),k=document.createElement("canvas"),S=k.getContext("2d");k.width=Math.round(D),k.height=Math.round(y),null==S||S.drawImage(A,Math.round(I),Math.round(N),Math.round(D),Math.round(y),0,0,Math.round(D),Math.round(y));var C=k.toDataURL();o.fabric.Image.fromURL(C,function(e){n.clear();var t=n.getWidth(),o=n.getHeight(),a=.9*t,r=.9*o,i=Math.min(a/k.width,r/k.height,1);e.set({originX:"left",originY:"top",scaleX:i,scaleY:i,selectable:!1,evented:!1,hasControls:!1,hasBorders:!1,lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0}),e.id="originalImage";var c=(t-e.getScaledWidth())/2,s=(o-e.getScaledHeight())/2;e.set({left:c,top:s}),n.add(e),e.setCoords(),d(e),u(!1),l(!0),h(null),M&&n.remove(M),n.renderAll()})}},[n,t,m,M,d,l]),y=e.useCallback(function(){n&&m&&(c(c([m],v,!0),M?[M]:[],!0).filter(Boolean).forEach(function(e){return n.remove(e)}),h(null),p(null),I([]),u(!1),l(!0),n.discardActiveObject(),n.renderAll())},[n,m,M,v,l]),j=e.useCallback(function(){if(n&&m&&t){var e={left:t.left||0,top:t.top||0,width:t.getScaledWidth(),height:t.getScaledHeight()},o=function(){if(m&&M){var n=Math.round(m.getScaledWidth()),e=Math.round(m.getScaledHeight());M.set({text:"".concat(n," × ").concat(e),left:m.left||0,top:(m.top||0)-28})}},a=function(){var n=m.getScaledWidth(),t=m.getScaledHeight(),o=m.left||0,a=m.top||0;o=Math.max(e.left,Math.min(o,e.left+e.width-n)),a=Math.max(e.top,Math.min(a,e.top+e.height-t)),m.set({left:o,top:a})},r=function(){a(),o(),n.requestRenderAll()},i=function(){a(),o();var t=e.left+e.width-(m.left||0),r=e.top+e.height-(m.top||0),i=Math.max(1,m.width||1),c=Math.max(1,m.height||1),l=Math.max(.1,t/i),d=Math.max(.1,r/c),s=24/i,g=24/c,u=m.scaleX||1,b=m.scaleY||1,h=Math.min(Math.max(u,s),l),f=Math.min(Math.max(b,g),d);h===u&&f===b||m.set({scaleX:h,scaleY:f}),a(),n.requestRenderAll()};return m.on("moving",r),m.on("scaling",i),function(){m.off("moving",r),m.off("scaling",i)}}},[n,m,M,t]);return e.useEffect(function(){var n=j();return function(){"function"==typeof n&&n()}},[j]),{isCropping:g,setIsCropping:u,cropRect:m,handleCropStart:N,handleCropApply:D,handleCropCancel:y}}(ln,sn,Z,mn,hn,R,gn),pn=Mn.isCropping,xn=Mn.setIsCropping,vn=Mn.handleCropStart,In=Mn.handleCropApply,Nn=Mn.handleCropCancel,Dn=function(n,t,a,r,i,c,l,d){return{handleAddShape:e.useCallback(function(e){if(n&&!t&&!a){c(!1);var s,g=n.getWidth(),u=n.getHeight();if("rectangle"===e)s=new o.fabric.Rect({left:g/2,top:u/2,width:100,height:60,fill:"transparent",stroke:r,strokeWidth:i,originX:"center",originY:"center",selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,cornerStyle:"circle",cornerColor:r,cornerSize:8,transparentCorners:!1,borderColor:r,isShape:!0,shapeType:"rectangle"});else{if("circle"!==e)return;s=new o.fabric.Circle({left:g/2,top:u/2,radius:40,fill:"transparent",stroke:r,strokeWidth:i,originX:"center",originY:"center",selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,cornerStyle:"circle",cornerColor:r,cornerSize:8,transparentCorners:!1,borderColor:r,isShape:!0,shapeType:"circle"})}n.add(s),n.setActiveObject(s),l(s),d(),n.renderAll()}},[n,t,a,r,i,c,l,d])}}(ln,pn,Z,V,F,R,P,$).handleAddShape,yn=function(n,t,o,a,r){return{handleToggleDraw:e.useCallback(function(){if(n){var e=!t;o(e),a(!1),n.isDrawingMode=e,e?(n.getObjects().forEach(function(n){n===r||n.isDrawing||n.set({selectable:!1,evented:!1})}),n.discardActiveObject()):(n.getObjects().forEach(function(n){n===r||n.isBlurPatch||n.isDrawing||n.set({selectable:!0,evented:!0})}),a(!0)),n.renderAll()}},[n,t,r,a])}}(ln,Z,W,R,sn).handleToggleDraw,jn=function(n,t,o,a,r,i){return{handleToggleSelectMode:e.useCallback(function(){if(n){var e=!t;o(e),e&&(a(!1),r(!1),n.isDrawingMode=!1,n.getObjects().forEach(function(n){n===i||n.isBlurPatch||n.set({selectable:!0,evented:!0})})),n.renderAll()}},[n,t,o,a,r,i])}}(ln,B,R,W,xn,sn).handleToggleSelectMode,wn=function(n,t,o,a,r,i,c){return{handleObjectSelection:e.useCallback(function(n){var e,t=null===(e=n.selected)||void 0===e?void 0:e[0];if(t){o(t);var i=t.stroke||"#D64045",c=t.strokeWidth||2;a(i),r(c)}},[o,a,r]),handleObjectDeselection:e.useCallback(function(){o(null)},[o]),handleDeleteObject:e.useCallback(function(){if(n&&t&&t!==i){var e=t;e.id&&n.getObjects().forEach(function(t){var o=t;o.isBlurPatch&&o.blurRectId===e.id&&n.remove(t)}),n.remove(t),n.discardActiveObject(),o(null),n.renderAll(),c()}},[n,t,i,o,c]),handleColorChange:e.useCallback(function(e){a(e),t&&(t.set({stroke:e,cornerColor:e,borderColor:e}),null==n||n.renderAll()),n&&n.freeDrawingBrush&&(n.freeDrawingBrush.color=e)},[t,n,a]),handleStrokeWidthChange:e.useCallback(function(e){r(e),t&&(t.set({strokeWidth:e}),null==n||n.renderAll()),n&&n.freeDrawingBrush&&(n.freeDrawingBrush.width=e)},[t,n,r])}}(ln,Y,P,G,q,sn,$),An=wn.handleObjectSelection,kn=wn.handleObjectDeselection,Sn=wn.handleDeleteObject,Cn=wn.handleColorChange,En=wn.handleStrokeWidthChange;!function(n,t,o,a,r,i,c,l){e.useEffect(function(){if(n){var e=function(n){var e=n.path;e&&(e.isDrawing=!0,e.set({selectable:!t,evented:!t}))};return n.on("path:created",e),function(){n.off("path:created",e)}}},[n,t]),e.useEffect(function(){if(n)return n.on("selection:created",o),n.on("selection:updated",o),n.on("selection:cleared",a),function(){n.off("selection:created",o),n.off("selection:updated",o),n.off("selection:cleared",a)}},[n,o,a]),e.useEffect(function(){if(n){var e=function(){r()};n.on("object:modified",e),n.on("object:added",e),n.on("object:removed",e),n.on("path:created",e);var t=function(e){var t=e.target;t&&t.isShape&&(n.setActiveObject(t),r())};return n.on("object:added",t),function(){n.off("object:modified",e),n.off("object:added",t),n.off("object:removed",e),n.off("path:created",e)}}},[n,r]),e.useEffect(function(){var n=function(n){!n.ctrlKey&&!n.metaKey||"z"!==n.key||n.shiftKey?(n.ctrlKey||n.metaKey)&&"y"===n.key||(n.ctrlKey||n.metaKey)&&n.shiftKey&&"Z"===n.key?(n.preventDefault(),c()):"Backspace"!==n.key&&"Delete"!==n.key||(n.preventDefault(),l()):(n.preventDefault(),i())};return window.addEventListener("keydown",n),function(){window.removeEventListener("keydown",n)}},[i,c,l])}(ln,Z,An,kn,$,nn,en,Sn),e.useEffect(function(){return function(){ln&&ln.dispose()}},[ln]),e.useEffect(function(){!function(){if("undefined"!=typeof document){var n="react-image-editor-styles";if(!document.getElementById(n)){var e=document.createElement("style");e.id=n,e.textContent='\n/* Image Editor Styles - Dark Mode Theme */\n.image-editor-container {\n width: 100%;\n height: 100vh;\n display: flex;\n flex-direction: column;\n background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #000000 100%);\n color: white;\n overflow: hidden; /* Scroll bar\'ı engelle */\n}\n\n/* Ensure custom background classes can override the default gradient */\n.image-editor-container[class*="bg-"] {\n background: inherit !important;\n}\n\n.image-editor-container[class*="bg-red-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-container[class*="bg-blue-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-container[class*="bg-green-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-container[class*="bg-yellow-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-container[class*="bg-purple-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-container[class*="bg-pink-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-container[class*="bg-gray-"] {\n background-color: inherit !important;\n background-image: none !important;\n}\n\n.image-editor-header {\n background: rgba(17, 24, 39, 0.5);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid #374151;\n padding: 1rem 1.5rem;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.image-editor-header-left {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n}\n\n.image-editor-header-button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #d1d5db;\n transition: all 0.2s ease;\n}\n\n.image-editor-header-button:hover {\n color: #3b82f6;\n transform: scale(1.05);\n}\n\n.image-editor-title {\n color: white;\n font-size: 0.875rem;\n font-weight: 600;\n background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.image-editor-actions {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.image-editor-button {\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n font-weight: 500;\n transition: all 0.2s ease;\n border: none;\n cursor: pointer;\n transform: translateY(0);\n}\n\n.image-editor-button-primary {\n background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n color: white;\n box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.25);\n}\n\n.image-editor-button-primary:hover {\n background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);\n transform: translateY(-1px);\n box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.35);\n}\n\n.image-editor-button-secondary {\n background: rgba(75, 85, 99, 0.5);\n color: white;\n border: 1px solid #374151;\n}\n\n.image-editor-button-secondary:hover {\n background: rgba(75, 85, 99, 0.7);\n border-color: #4b5563;\n}\n\n.image-editor-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Toolbar Styles */\n.toolbar {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 0;\n}\n\n.toolbar-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n color: #d1d5db;\n border: 1px solid transparent;\n cursor: pointer;\n background: rgba(31, 41, 55, 0.5);\n backdrop-filter: blur(4px);\n}\n\n.toolbar-button:hover {\n background: rgba(59, 130, 246, 0.1);\n border-color: #3b82f6;\n color: #3b82f6;\n transform: scale(1.05);\n}\n\n.toolbar-button.active {\n background: rgba(59, 130, 246, 0.2);\n border-color: #3b82f6;\n color: #3b82f6;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\n}\n\n.toolbar-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n transform: none;\n}\n\n.toolbar-button.delete-button {\n background: rgba(220, 38, 38, 0.1);\n border-color: rgba(220, 38, 38, 0.3);\n color: #ef4444;\n}\n\n.toolbar-button.delete-button:hover {\n background: rgba(220, 38, 38, 0.2);\n border-color: #ef4444;\n color: #fca5a5;\n transform: scale(1.05);\n}\n\n.toolbar-divider {\n width: 1px;\n height: 2rem;\n background: linear-gradient(180deg, transparent 0%, #374151 50%, transparent 100%);\n margin: 0 0.5rem;\n}\n\n/* Color Palette */\n.color-palette {\n padding: 0.75rem;\n background: rgba(31, 41, 55, 0.8);\n backdrop-filter: blur(8px);\n border-radius: 0.75rem;\n border: 1px solid #374151;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);\n}\n\n.color-palette-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n max-width: 12rem;\n}\n\n.color-button {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 0.375rem;\n border: 2px solid;\n transition: all 0.2s ease;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n}\n\n.color-button::before {\n content: \'\';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.color-button:hover::before {\n opacity: 1;\n}\n\n.color-button.active {\n border-color: #3b82f6;\n transform: scale(1.15);\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);\n}\n\n.color-button:not(.active) {\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n/* Width Slider */\n.width-slider {\n padding: 0.75rem;\n background: rgba(31, 41, 55, 0.8);\n backdrop-filter: blur(8px);\n border-radius: 0.75rem;\n border: 1px solid #374151;\n min-width: 24rem;\n}\n\n.width-slider-content {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n\n.width-slider-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: #d1d5db;\n}\n\n.width-slider-input {\n flex: 1;\n}\n\n.width-slider-value {\n font-size: 0.875rem;\n color: #9ca3af;\n width: 2rem;\n text-align: center;\n}\n\n/* Canvas Container */\n.canvas-container {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(31, 41, 55, 0.3);\n padding: 1rem;\n position: relative;\n}\n\n.canvas-container::before {\n content: \'\';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05) 0%, transparent 70%);\n pointer-events: none;\n}\n\n.canvas-wrapper {\n background: rgba(17, 24, 39, 0.5);\n backdrop-filter: blur(8px);\n border-radius: 1rem;\n border: 1px solid #374151;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n max-width: calc(100vw - 200px);\n max-height: calc(100vh - 200px);\n position: relative;\n}\n\n.canvas-wrapper::before {\n content: \'\';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);\n pointer-events: none;\n border-radius: 1rem;\n}\n\n.canvas-element {\n display: block;\n border-radius: 1rem;\n width: 100%;\n height: 100%;\n background: transparent;\n}\n\n/* Crop Mode */\n.crop-mode {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 1rem;\n background: rgba(17, 24, 39, 0.8);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid #374151;\n border-top: 1px solid #374151;\n}\n\n.crop-mode-text {\n color: #d1d5db;\n font-weight: 500;\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.crop-mode-actions {\n display: flex;\n gap: 0.5rem;\n margin-left: auto;\n}\n\n.crop-button {\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n font-weight: 500;\n transition: all 0.2s ease;\n border: none;\n cursor: pointer;\n transform: translateY(0);\n}\n\n.crop-button-apply {\n background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n color: white;\n box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.25);\n}\n\n.crop-button-apply:hover {\n background: linear-gradient(135deg, #059669 0%, #047857 100%);\n transform: translateY(-1px);\n box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.35);\n}\n\n.crop-button-cancel {\n background: rgba(75, 85, 99, 0.5);\n color: white;\n border: 1px solid #374151;\n}\n\n.crop-button-cancel:hover {\n background: rgba(75, 85, 99, 0.7);\n border-color: #4b5563;\n}\n\n/* Utility Classes */\n.text-white {\n color: white;\n}\n\n.text-gray-300 {\n color: #d1d5db;\n}\n\n.text-gray-400 {\n color: #9ca3af;\n}\n\n.text-blue-400 {\n color: #60a5fa;\n}\n\n.text-yellow-400 {\n color: #fbbf24;\n}\n\n.bg-transparent {\n background-color: transparent;\n}\n\n.bg-gray-800/50 {\n background-color: rgba(31, 41, 55, 0.5);\n}\n\n.bg-gray-900/50 {\n background-color: rgba(17, 24, 39, 0.5);\n}\n\n.rounded-3xl {\n border-radius: 1.5rem;\n}\n\n.shadow-lg {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\n}\n\n.shadow-2xl {\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.backdrop-blur-sm {\n backdrop-filter: blur(4px);\n}\n\n.backdrop-blur-md {\n backdrop-filter: blur(8px);\n}\n\n.flex {\n display: flex;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.gap-3 {\n gap: 0.75rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.h-screen {\n height: 100vh;\n}\n\n.min-w-96 {\n min-width: 24rem;\n}\n\n.max-w-48 {\n max-width: 12rem;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.h-10 {\n height: 2.5rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.w-px {\n width: 1px;\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.rounded-lg {\n border-radius: 0.5rem;\n}\n\n.transition-colors {\n transition: color 0.2s ease, background-color 0.2s ease;\n}\n\n.transition-all {\n transition: all 0.2s ease;\n}\n\n.opacity-50 {\n opacity: 0.5;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.text-sm {\n font-size: 0.875rem;\n}\n\n.font-medium {\n font-weight: 500;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.border-2 {\n border-width: 2px;\n}\n\n.border-gray-700 {\n border-color: #374151;\n}\n\n.border-white\\/10 {\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n.border-white\\/20 {\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.scale-110 {\n transform: scale(1.1);\n}\n\n.scale-105 {\n transform: scale(1.05);\n}\n\n/* HeroUI Overrides for Dark Mode */\n.heroui-slider {\n flex: 1;\n}\n\n.heroui-slider-track {\n background-color: #374151;\n}\n\n.heroui-slider-filler {\n background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n}\n\n.heroui-slider-thumb {\n background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n border-color: #3b82f6;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\n}\n\n/* Glassmorphism Effects */\n.glass-effect {\n background: rgba(31, 41, 55, 0.5);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.glass-effect-strong {\n background: rgba(17, 24, 39, 0.9);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(55, 65, 81, 0.7);\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);\n}\n\n/* Utility: remove default focus outlines where undesired */\n.no-focus-ring:focus {\n outline: none !important;\n box-shadow: none !important;\n}\n.no-focus-ring:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n}\n\n/* Gradient Text Effects */\n.gradient-text-blue {\n background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n -webkit-background-clip: text;\n -webkit-text-