@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 • 59.5 kB
JavaScript
import{jsxs as n,jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as a,useCallback as i}from"react";import*as c from"@radix-ui/react-popover";import{fabric as l}from"fabric";var d=function(){return d=Object.assign||function(n){for(var e,t=1,o=arguments.length;t<o;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},d.apply(this,arguments)};function s(n,e,t){if(t||2===arguments.length)for(var o,r=0,a=e.length;r<a;r++)!o&&r in e||(o||(o=Array.prototype.slice.call(e,0,r)),o[r]=e[r]);return n.concat(o||Array.prototype.slice.call(e))}"function"==typeof SuppressedError&&SuppressedError;var g={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=="},u=function(t){var o=t.name,r=t.width,a=void 0===r?20:r,i=t.height,c=void 0===i?20:i,l=t.className,s=t.title,u=g[o];if(!u)return console.warn('Icon "'.concat(o,'" not found in iconMap')),null;var m=u.replace(/^data:image\/svg\+xml;base64,/,""),b=atob(m),h=b.match(/viewBox=["']([^"']+)["']/),M=h?h[1]:"0 0 20 20",p=b.match(/<svg[^>]*>([\s\S]*?)<\/svg>/),f=p?p[1]:b;return n("svg",d({width:a,height:c,viewBox:M,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"inline-block ".concat(l||""),role:"img","aria-hidden":!s},s&&{"aria-label":s},{children:[s&&e("title",{children:s}),e("g",{dangerouslySetInnerHTML:{__html:f}})]}))},m=function(t){var o=t.trigger,r=t.content;t.className;var a=t.contentClassName,i=t.placement,l=void 0===i?"bottom":i,d=t.offset,s=void 0===d?20:d;return n(c.Root,{children:[e(c.Trigger,{asChild:!0,children:e("div",{onClick:function(n){return n.stopPropagation()},className:"cursor-pointer",children:o})}),e(c.Portal,{children:n(c.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:s,side:l,align:"center",onOpenAutoFocus:function(n){return n.preventDefault()},children:[r,e(c.Arrow,{className:"fill-gray-900/90"})]})})]})},b=function(n){var t=n.children,o=n.onClick,r=n.onPress,a=n.disabled,i=void 0!==a&&a,c=n.color,l=void 0===c?"default":c,d=n.size,s=void 0===d?"md":d,g=n.className,u=void 0===g?"":g,m=n.type,b=void 0===m?"button":m,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 e("button",{type:b,className:h,onClick:function(){i||(null==o||o(),null==r||r())},disabled:i,children:t})},h=function(t){var i=t.value,c=t.onChange,l=t.min,d=void 0===l?0:l,s=t.max,g=void 0===s?100:s,u=t.step,m=void 0===u?1:u,b=t.size,h=void 0===b?"md":b,M=t.className,p=void 0===M?"":M,f=t.disabled,x=void 0!==f&&f,v=o(!1),N=v[0],I=v[1],D=r(null),y=(i-d)/(g-d)*100,w=function(n){if(N&&!x&&D.current){var e=D.current.getBoundingClientRect(),t=n.clientX-e.left,o=e.width,r=Math.max(0,Math.min(100,t/o*100)),a=Math.round(r/100*(g-d)+d),i=Math.round(a/m)*m;c(i)}},A=function(){I(!1)};a(function(){if(N)return document.addEventListener("mousemove",w),document.addEventListener("mouseup",A),function(){document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",A)}},[N]);var k={sm:4,md:6,lg:8}[h],S={sm:12,md:14,lg:16}[h];return n("div",{ref:D,className:"relative flex items-center select-none no-focus-ring ".concat(p),onMouseDown:function(n){x||(I(!0),w(n))},role:"slider","aria-valuemin":d,"aria-valuemax":g,"aria-valuenow":i,tabIndex:x?-1:0,onKeyDown:function(n){if(!x){var e=i,t=g-d;switch(n.key){case"ArrowLeft":case"ArrowDown":e=Math.max(d,i-m);break;case"ArrowRight":case"ArrowUp":e=Math.min(g,i+m);break;case"PageDown":e=Math.max(d,i-Math.max(1,Math.round(.1*t)));break;case"PageUp":e=Math.min(g,i+Math.max(1,Math.round(.1*t)));break;case"Home":e=d;break;case"End":e=g;break;default:return}n.preventDefault(),c(Math.round(e/m)*m)}},"aria-disabled":x,style:{height:Math.max(S,k)+8,cursor:x?"not-allowed":"pointer",width:"100%",outline:"none"},children:[e("div",{style:{width:"100%",height:k,background:"#374151",borderRadius:9999},children:e("div",{style:{width:"".concat(y,"%"),height:"100%",background:"linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)",borderRadius:9999,transition:"width 120ms ease"}})}),e("div",{style:{position:"absolute",top:"50%",left:"".concat(y,"%"),width:S,height:S,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"}})]})},M=function(t){var c=t.canvas,d=t.onCanvasReady,s=t.className,g=void 0===s?"":s,u=t.zoomButtonClassName,m=void 0===u?"":u,b=t.background,h=t.canvasWrapperClassName,M=void 0===h?"":h,p=r(null),f=o(!1),x=f[0],v=f[1],N=o(!1),I=N[0],D=N[1],y=i(function(){var n=window.innerWidth<=768,e=window.innerWidth>768&&window.innerWidth<=1024;if(n){(c=(i=Math.max(0,window.innerWidth-8))/(a=1))>(r=Math.max(0,window.innerHeight-80))&&(i=(c=r)*a);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 r,a,i,c;(c=(i=Math.max(0,window.innerWidth-100))/(a=16/9))>(r=Math.max(0,window.innerHeight-180))&&(i=(c=r)*a);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))/(a=16/9))>(r=Math.max(0,window.innerHeight-200))&&(i=(c=r)*a);t=800,o=450;return i=Math.max(i,t),c=Math.max(c,o),{width:Math.floor(i),height:Math.floor(c)}},[]);a(function(){if(p.current&&!c){var n=setTimeout(function(){var n=y(),e=n.width,t=n.height,o=new l.Canvas(p.current);o.setWidth(e),o.setHeight(t);var r=b||"transparent";o.setBackgroundColor(r,function(){o.renderAll()}),d(o),v(!0)},0);return function(){var e,t;if(clearTimeout(n),c)try{null===(t=(e=c).dispose)||void 0===t||t.call(e)}catch(n){console.warn("Canvas dispose method not available")}}}},[c,d,y,b]),a(function(){var n=function(){if(c){var n=y(),e=n.width,t=n.height;c.setWidth(e),c.setHeight(t),c.renderAll()}};return window.addEventListener("resize",n),function(){window.removeEventListener("resize",n)}},[c,y]);var w=i(function(n,e){if(void 0===e&&(e=220),c){var t,o=(t=n,Math.max(.2,Math.min(4,t))),r=c.getZoom(),a=performance.now(),i=new l.Point(c.getWidth()/2,c.getHeight()/2),d=function(n){var t=n-a,l=Math.min(1,t/e),s=function(n){return 1-Math.pow(1-n,3)}(l),g=r+(o-r)*s;c.zoomToPoint(i,g),c.requestRenderAll(),l<1&&requestAnimationFrame(d)};requestAnimationFrame(d)}},[c]),A=i(function(){if(c){var n=c.getZoom();w(1.2*n)}},[c,w]),k=i(function(){if(c){var n=c.getZoom();w(n/1.2)}},[c,w]);return a(function(){if(c){var n=!1,e=!1,t=function(n){"Space"===n.code&&(n.preventDefault(),e=!0,D(!0),c.setCursor("grab"))},o=function(n){"Space"===n.code&&n.preventDefault()},r=function(n){"Space"===n.code&&(n.preventDefault(),e=!1,D(!1),c.setCursor("default"))},a=function(t){0===t.e.button&&e&&(n=!0,c.setCursor("grabbing"))},i=function(e){if(n){var t=e.e,o=c.viewportTransform;o[4]+=t.movementX,o[5]+=t.movementY,c.requestRenderAll()}},l=function(){n=!1,c.setCursor(e?"grab":"default")};return window.addEventListener("keydown",t,{capture:!0}),window.addEventListener("keypress",o,{capture:!0}),window.addEventListener("keyup",r),c.on("mouse:down",a),c.on("mouse:move",i),c.on("mouse:up",l),function(){window.removeEventListener("keydown",t,{capture:!0}),window.removeEventListener("keypress",o,{capture:!0}),window.removeEventListener("keyup",r),c.off("mouse:down",a),c.off("mouse:move",i),c.off("mouse:up",l)}}},[c]),e("div",{className:"canvas-container ".concat(g),children:n("div",{className:"canvas-wrapper ".concat(M),children:[e("canvas",{ref:p,className:"canvas-element"}),x&&n("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:[e("button",{type:"button",title:"Zoom out",onClick:k,className:"zoom-button zoom-out ".concat(m),style:m?{}:{background:"#1f2937",color:"#d1d5db",borderColor:"rgba(255,255,255,0.08)"},children:"−"}),e("button",{type:"button",title:"Zoom in",onClick:A,className:"zoom-button zoom-in ".concat(m),style:m?{}:{background:"#3b82f6",color:"white",borderColor:"rgba(59,130,246,0.35)"},children:"+"})]}),x&&!I&&window.innerWidth>768&&n("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:[e("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"}),e("span",{style:{opacity:.75},children:"Press and drag to pan"})]})]})})},p=["#ff7000","#D64045","#2D3748","#E53E3E","#38A169","#3182CE","#D69E2E","#805AD5","#DD6B20","#319795","#F56565","#48BB78","#4299E1","#ECC94B","#9F7AEA","#ED8936"],f=function(n){var t=n.iconName,o=n.onClick,r=n.title,a=n.isActive,i=void 0!==a&&a,c=n.disabled,l=void 0!==c&&c,d=n.className,s=void 0===d?"":d;return e("button",{onClick:o,disabled:l,className:"toolbar-button ".concat(i?"active":""," ").concat(l?"disabled":""," ").concat(s),title:r,children:e(u,{name:t,width:20,height:20,className:"text-white"})})},x=function(n){var t=n.currentColor,o=n.onColorChange;return e("div",{className:"color-palette",children:e("div",{className:"color-palette-grid",children:p.map(function(n){return e("button",{onClick:function(){return o(n)},className:"color-button ".concat(t===n?"active":""),style:{backgroundColor:n},title:n},n)})})})},v=function(t){var o=t.currentWidth,r=t.onWidthChange;return e("div",{className:"width-slider",children:n("div",{className:"width-slider-content",children:[e("label",{className:"width-slider-label",children:"Stroke Width:"}),e(h,{size:"sm",step:1,min:1,max:20,value:o,onChange:r,className:"width-slider-input"}),n("span",{className:"width-slider-value",children:[o,"px"]})]})})},N=function(o){var r=o.onAddShape,a=o.onCropStart,i=o.onAddBlur,c=o.onToggleDraw,l=o.onToggleSelectMode,d=o.hasImage,s=o.isCropping,g=o.isDrawing,u=o.isSelectMode,b=o.activeShape,h=o.isBlurActive,M=void 0!==h&&h,p=o.selectedObject,N=o.currentColor,I=void 0===N?"#D64045":N,D=o.currentStrokeWidth,y=void 0===D?2:D,w=o.onColorChange,A=o.onStrokeWidthChange,k=o.onUndo,S=o.onRedo,j=o.canUndo,C=void 0!==j&&j,T=o.canRedo,E=void 0!==T&&T,z=o.onDeleteObject;o.showCancelButton,o.onCancel;var L=o.className,U=void 0===L?"":L,O=o.buttonClassName,Z=void 0===O?"":O;return o.saveButtonClassName,o.cancelButtonClassName,o.saveButtonTitle,o.cancelButtonTitle,e("div",{className:"toolbar ".concat(U),children:d&&n(t,{children:[e(f,{iconName:"cursor",onClick:l,title:"Select",isActive:u,disabled:!1,className:Z}),e(f,{iconName:"pencil",onClick:c,title:"Draw",isActive:g,disabled:s,className:Z}),e(f,{iconName:"crop",onClick:a,title:"Crop",disabled:s||g,className:Z}),e(f,{iconName:"blur",onClick:i,title:"Blur",isActive:M,disabled:s||g,className:Z}),e(f,{iconName:"square",onClick:function(){return r("rectangle")},title:"Rectangle",isActive:"rectangle"===b,disabled:s||g,className:Z}),e(f,{iconName:"circle",onClick:function(){return r("circle")},title:"Circle",isActive:"circle"===b,disabled:s||g,className:Z}),e("div",{className:"toolbar-divider"}),e(m,{trigger:e("div",{className:"toolbar-button ".concat(p||g?"":"disabled"," ").concat(Z),children:e("div",{className:"w-6 h-6 rounded border-2 border-gray-700",style:{backgroundColor:I}})}),content:e(x,{currentColor:I,onColorChange:w||function(){}}),contentClassName:"glass-effect-strong",placement:"bottom"}),e(m,{trigger:e("div",{className:"toolbar-button ".concat(p||g?"":"disabled"," ").concat(Z),children:e("div",{style:{display:"flex",alignItems:"center",gap:6},children:e("div",{style:{width:18,height:2,background:"#9ca3af",borderRadius:9999,position:"relative"},children:e("div",{style:{position:"absolute",left:0,top:"50%",transform:"translate(0,-50%)",width:Math.max(2,Math.min(12,y))+2,height:Math.max(2,Math.min(12,y)),borderRadius:9999,background:"linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)",boxShadow:"0 0 0 1px rgba(0,0,0,0.4)"}})})})}),content:e(v,{currentWidth:y,onWidthChange:A||function(){}}),placement:"bottom",contentClassName:"glass-effect-strong"}),e("div",{className:"toolbar-divider"}),e(f,{iconName:"undo",onClick:k||function(){},title:"Undo (Ctrl+Z)",disabled:!C,className:Z}),e(f,{iconName:"redo",onClick:S||function(){},title:"Redo (Ctrl+Y)",disabled:!E,className:Z}),p&&n(t,{children:[e("div",{className:"toolbar-divider"}),e(f,{iconName:"trash",onClick:z||function(){},title:"Delete (Backspace)",disabled:!1,className:"delete-button ".concat(Z)})]})]})})},I=function(t){var c=t.imageUrl,d=t.onSave,g=t.onCancel,u=t.showCancelButton,m=void 0!==u&&u,h=t.className,p=void 0===h?"":h,f=t.headerClassName,x=void 0===f?"":f,v=t.toolbarClassName,I=void 0===v?"":v,D=t.buttonClassName,y=void 0===D?"":D,w=t.saveButtonClassName,A=void 0===w?"":w,k=t.cancelButtonClassName,S=void 0===k?"":k,j=t.canvasClassName,C=void 0===j?"":j,T=t.canvasWrapperClassName,E=void 0===T?"":T,z=t.zoomButtonClassName,L=void 0===z?"":z,U=t.background,O=t.saveButtonTitle,Z=void 0===O?"Save":O,W=t.cancelButtonTitle,Q=void 0===W?"Cancel":W,B=o(!1),R=B[0],H=B[1],Y=o(!0),P=Y[0],J=Y[1],V=o(null),G=V[0],X=V[1],F=o("#ff7000"),K=F[0],q=F[1],_=o(2),$=_[0],nn=_[1],en=i(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())}},[]),tn=function(n,e,t){var a=o([]),c=a[0],l=a[1],d=o(-1),g=d[0],u=d[1],m=r(!1),b=r(0),h=r(n),M=i(function(n){h.current=n},[]);return{saveState:i(function(){var n=h.current;if(n&&!m.current){var t=Date.now();if(!(t-b.current<300)){b.current=t;var o={json:JSON.stringify(n.toJSON(["id","isBlurPatch","blurRectId","isDrawing","selectable","evented","hasControls","hasBorders","lockMovementX","lockMovementY","lockRotation","lockScalingX","lockScalingY","lockUniScaling"])),timestamp:t};l(function(n){u(function(t){var r=s(s([],n.slice(0,t+1),!0),[o],!1);return r.length>e?r.slice(-e).length-1:r.length-1});var t=s(s([],n.slice(0,g+1),!0),[o],!1);return t.length>e?t.slice(-e):t})}}},[g,e]),undo:i(function(){var n=h.current;if(n&&!(g<=0)){m.current=!0;var e=g-1,o=c[e];o?n.loadFromJSON(o.json,function(){n.renderAll(),u(e),m.current=!1,t&&t()}):m.current=!1}},[g,c,t]),redo:i(function(){var n=h.current;if(n&&!(g>=c.length-1)){m.current=!0;var e=g+1,o=c[e];o?n.loadFromJSON(o.json,function(){n.renderAll(),u(e),m.current=!1,t&&t()}):m.current=!1}},[g,c,t]),initializeHistory:i(function(){var n=h.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()};l([e]),u(0)}},[]),canUndo:g>0,canRedo:g<c.length-1,updateCanvas:M}}(null,50,function(){return en(un)}),on=tn.saveState,rn=tn.undo,an=tn.redo,cn=tn.initializeHistory,ln=tn.canUndo,dn=tn.canRedo,sn=tn.updateCanvas,gn=function(n,e,t,r){var c=o(null),d=c[0],s=c[1],g=o(!1),u=g[0],m=g[1],b=o(null),h=b[0],M=b[1],p=i(function(n){s(n),n.selection=!0,n.hoverCursor="move",l&&l.PencilBrush&&(n.freeDrawingBrush=new l.PencilBrush(n),n.freeDrawingBrush.color=e,n.freeDrawingBrush.width=t)},[e,t]);return a(function(){d&&n&&l.Image.fromURL(n,function(n){if(n){d.getObjects().forEach(function(n){return d.remove(n)}),d.renderAll();var e=d.getWidth(),t=d.getHeight(),o=n.getElement(),a=o.width,i=o.height,c=Math.min((e-48)/a,(t-48)/i,1);n.set({originX:"left",originY:"top",scaleX:c,scaleY:c,selectable:!1,evented:!1,hasControls:!1,hasBorders:!1,lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0}),n.id="originalImage",d.setZoom(1),d.setViewportTransform([1,0,0,1,0,0]),d.add(n);var l=(e-n.getScaledWidth())/2,s=(t-n.getScaledHeight())/2;n.set({left:l,top:s}),n.setCoords(),d.renderAll(),m(!0),M(n),setTimeout(function(){r()},100)}})},[d,n,r]),{canvas:d,hasImage:u,originalImage:h,setOriginalImage:M,handleCanvasReady:p}}(c,K,$,cn),un=gn.canvas,mn=gn.hasImage,bn=gn.originalImage,hn=gn.setOriginalImage,Mn=gn.handleCanvasReady;a(function(){un&&sn(un)},[un,sn]);var pn=function(n,e,t,r){var a=o([]),c=a[0],d=a[1],g=i(function(t){if(n&&e){var o=n;if(!o.isUpdatingBlur){o.isUpdatingBlur=!0,n.getObjects().forEach(function(e){var o=e,r=t;o.isBlurPatch&&o.blurRectId===r.id&&n.remove(e)});var r=t.left||0,a=t.top||0,i=t.getScaledWidth(),c=t.getScaledHeight(),d=e.left||0,s=e.top||0,g=e.getScaledWidth(),u=e.getScaledHeight(),m=new l.Point(d,s),b=new l.Point(d+g,s+u),h=r+i,M=a+c,p=Math.max(m.x,r),f=Math.max(m.y,a),x=Math.min(b.x,h),v=Math.min(b.y,M),N=Math.max(0,x-p),I=Math.max(0,v-f);if(N<=0||I<=0)return t.set({visible:!0}),n.requestRenderAll(),void(o.isUpdatingBlur=!1);var D=e.scaleX||1,y=e.scaleY||1,w=Math.round((p-m.x)/D),A=Math.round((f-m.y)/y),k=Math.round(N/D),S=Math.round(I/y),j=e.getElement();requestAnimationFrame(function(){var e=document.createElement("canvas"),r=e.getContext("2d");if(r){e.width=Math.max(1,k),e.height=Math.max(1,S),r.drawImage(j,w,A,k,S,0,0,k,S);var a=document.createElement("canvas"),i=a.getContext("2d");i&&(a.width=k,a.height=S,i.filter="blur(20px)",i.drawImage(e,0,0),l.Image.fromURL(a.toDataURL(),function(e){e.set({left:p,top:f,originX:"left",originY:"top",scaleX:D,scaleY:y,selectable:!1,evented:!1,isBlurPatch:!0,blurRectId:t.id,opacity:1}),n.add(e),t.set({visible:!0}),n.bringToFront(t),n.requestRenderAll(),o.isUpdatingBlur=!1}))}})}}},[n,e]),u=i(function(){if(n&&e&&!t){r(!1);var o=n.getWidth(),a=n.getHeight(),i=e.getScaledWidth(),c=e.getScaledHeight(),u=e.left||0,m=e.top||0,b=i,h=c,M=n.viewportTransform||[1,0,0,1,0,0],p=l.util.invertTransform(M),f=new l.Point(o/2,a/2),x=l.util.transformPoint(f,p),v=x.x-75,N=x.y-50;v=Math.max(u+20,Math.min(v,u+b-150-20)),N=Math.max(m+20,Math.min(N,m+h-100-20));var I=new l.Rect({id:Date.now(),left:v,top:N,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(I),n.setActiveObject(I),g(I);var D=null,y=!1,w=function(){y||(y=!0,D&&clearTimeout(D),D=setTimeout(function(){g(I),y=!1},50))};I.on("modified",w),I.on("moving",w),I.on("scaling",w),d(function(n){return s(s([],n,!0),[I],!1)}),n.renderAll()}},[n,e,t,g,r]);return{activeBlurRects:c,setActiveBlurRects:d,handleAddBlur:u,updateBlurEffect:g}}(un,bn,R,J),fn=pn.activeBlurRects,xn=pn.setActiveBlurRects,vn=pn.handleAddBlur,Nn=function(n,e,t,r,c,d,g){var u=o(!1),m=u[0],b=u[1],h=o(null),M=h[0],p=h[1],f=o(null),x=f[0],v=f[1],N=o([]),I=N[0],D=N[1],y=i(function(){if(n&&e&&!t){b(!0),d(!1),n.getObjects().slice().forEach(function(t){t!==e&&t.isBlurPatch&&r.includes(t)&&n.remove(t)}),c([]);var o=n.getWidth(),a=n.getHeight(),i={left:e.left||0,top:e.top||0,width:e.getScaledWidth(),height:e.getScaledHeight()},s=new l.Rect({left:0,top:0,width:o,height:i.top,fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),g=new l.Rect({left:0,top:i.top+i.height,width:o,height:a-(i.top+i.height),fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),u=new l.Rect({left:0,top:i.top,width:i.left,height:i.height,fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),m=new l.Rect({left:i.left+i.width,top:i.top,width:o-(i.left+i.width),height:i.height,fill:"rgba(0, 0, 0, 0.5)",selectable:!1,evented:!1,excludeFromExport:!0}),h=Math.min(200,.8*i.width),M=Math.min(150,.8*i.height),f=new l.Rect({left:i.left+(i.width-h)/2,top:i.top+(i.height-M)/2,width:h,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,u,m),n.add(f);var x=new l.Textbox("".concat(Math.round(h)," × ").concat(Math.round(M)),{left:f.left||0,top:(f.top||0)-28,fontSize:12,fill:"#e5e7eb",backgroundColor:"rgba(17,24,39,0.6)",padding:6,textAlign:"center",selectable:!1,evented:!1});x.excludeFromExport=!0,n.add(x),n.setActiveObject(f),p(f),v(x),D([s,g,u,m]),n.renderAll()}},[n,e,r,t,c,d]),w=i(function(){if(n&&e&&M){var t=n.viewportTransform||[1,0,0,1,0,0],o=l.util.invertTransform(t),r=M.getBoundingRect(),a=new l.Point(r.left,r.top),i=new l.Point(r.left+r.width,r.top+r.height),c=l.util.transformPoint(a,o),s=l.util.transformPoint(i,o),u=e.left||0,m=e.top||0;e.width,e.scaleX,e.height,e.scaleY;var h=new l.Point(u,m),f=e.scaleX||1,v=e.scaleY||1,N=(c.x-h.x)/f,I=(c.y-h.y)/v,D=(s.x-c.x)/f,y=(s.y-c.y)/v,w=e.width||0,A=e.height||0;N=Math.max(0,Math.min(N,w)),I=Math.max(0,Math.min(I,A)),D=Math.max(1,Math.min(D,w-N)),y=Math.max(1,Math.min(y,A-I));var k=e.getElement(),S=document.createElement("canvas"),j=S.getContext("2d");S.width=Math.round(D),S.height=Math.round(y),null==j||j.drawImage(k,Math.round(N),Math.round(I),Math.round(D),Math.round(y),0,0,Math.round(D),Math.round(y));var C=S.toDataURL();l.Image.fromURL(C,function(e){n.clear();var t=n.getWidth(),o=n.getHeight(),r=.9*t,a=.9*o,i=Math.min(r/S.width,a/S.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,l=(o-e.getScaledHeight())/2;e.set({left:c,top:l}),n.add(e),e.setCoords(),g(e),b(!1),d(!0),p(null),x&&n.remove(x),n.renderAll()})}},[n,e,M,x,g,d]),A=i(function(){n&&M&&(s(s([M],I,!0),x?[x]:[],!0).filter(Boolean).forEach(function(e){return n.remove(e)}),p(null),v(null),D([]),b(!1),d(!0),n.discardActiveObject(),n.renderAll())},[n,M,x,I,d]),k=i(function(){if(n&&M&&e){var t={left:e.left||0,top:e.top||0,width:e.getScaledWidth(),height:e.getScaledHeight()},o=function(){if(M&&x){var n=Math.round(M.getScaledWidth()),e=Math.round(M.getScaledHeight());x.set({text:"".concat(n," × ").concat(e),left:M.left||0,top:(M.top||0)-28})}},r=function(){var n=M.getScaledWidth(),e=M.getScaledHeight(),o=M.left||0,r=M.top||0;o=Math.max(t.left,Math.min(o,t.left+t.width-n)),r=Math.max(t.top,Math.min(r,t.top+t.height-e)),M.set({left:o,top:r})},a=function(){r(),o(),n.requestRenderAll()},i=function(){r(),o();var e=t.left+t.width-(M.left||0),a=t.top+t.height-(M.top||0),i=Math.max(1,M.width||1),c=Math.max(1,M.height||1),l=Math.max(.1,e/i),d=Math.max(.1,a/c),s=24/i,g=24/c,u=M.scaleX||1,m=M.scaleY||1,b=Math.min(Math.max(u,s),l),h=Math.min(Math.max(m,g),d);b===u&&h===m||M.set({scaleX:b,scaleY:h}),r(),n.requestRenderAll()};return M.on("moving",a),M.on("scaling",i),function(){M.off("moving",a),M.off("scaling",i)}}},[n,M,x,e]);return a(function(){var n=k();return function(){"function"==typeof n&&n()}},[k]),{isCropping:m,setIsCropping:b,cropRect:M,handleCropStart:y,handleCropApply:w,handleCropCancel:A}}(un,bn,R,fn,xn,J,hn),In=Nn.isCropping,Dn=Nn.setIsCropping,yn=Nn.handleCropStart,wn=Nn.handleCropApply,An=Nn.handleCropCancel,kn=function(n,e,t,o,r,a,c,d){return{handleAddShape:i(function(i){if(n&&!e&&!t){a(!1);var s,g=n.getWidth(),u=n.getHeight();if("rectangle"===i)s=new l.Rect({left:g/2,top:u/2,width:100,height:60,fill:"transparent",stroke:o,strokeWidth:r,originX:"center",originY:"center",selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,cornerStyle:"circle",cornerColor:o,cornerSize:8,transparentCorners:!1,borderColor:o,isShape:!0,shapeType:"rectangle"});else{if("circle"!==i)return;s=new l.Circle({left:g/2,top:u/2,radius:40,fill:"transparent",stroke:o,strokeWidth:r,originX:"center",originY:"center",selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,cornerStyle:"circle",cornerColor:o,cornerSize:8,transparentCorners:!1,borderColor:o,isShape:!0,shapeType:"circle"})}n.add(s),n.setActiveObject(s),c(s),d(),n.renderAll()}},[n,e,t,o,r,a,c,d])}}(un,In,R,K,$,J,X,on).handleAddShape,Sn=function(n,e,t,o,r){return{handleToggleDraw:i(function(){if(n){var a=!e;t(a),o(!1),n.isDrawingMode=a,a?(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})}),o(!0)),n.renderAll()}},[n,e,r,o])}}(un,R,H,J,bn).handleToggleDraw,jn=function(n,e,t,o,r,a){return{handleToggleSelectMode:i(function(){if(n){var i=!e;t(i),i&&(o(!1),r(!1),n.isDrawingMode=!1,n.getObjects().forEach(function(n){n===a||n.isBlurPatch||n.set({selectable:!0,evented:!0})})),n.renderAll()}},[n,e,t,o,r,a])}}(un,P,J,H,Dn,bn).handleToggleSelectMode,Cn=function(n,e,t,o,r,a,c){return{handleObjectSelection:i(function(n){var e,a=null===(e=n.selected)||void 0===e?void 0:e[0];if(a){t(a);var i=a.stroke||"#D64045",c=a.strokeWidth||2;o(i),r(c)}},[t,o,r]),handleObjectDeselection:i(function(){t(null)},[t]),handleDeleteObject:i(function(){if(n&&e&&e!==a){var o=e;o.id&&n.getObjects().forEach(function(e){var t=e;t.isBlurPatch&&t.blurRectId===o.id&&n.remove(e)}),n.remove(e),n.discardActiveObject(),t(null),n.renderAll(),c()}},[n,e,a,t,c]),handleColorChange:i(function(t){o(t),e&&(e.set({stroke:t,cornerColor:t,borderColor:t}),null==n||n.renderAll()),n&&n.freeDrawingBrush&&(n.freeDrawingBrush.color=t)},[e,n,o]),handleStrokeWidthChange:i(function(t){r(t),e&&(e.set({strokeWidth:t}),null==n||n.renderAll()),n&&n.freeDrawingBrush&&(n.freeDrawingBrush.width=t)},[e,n,r])}}(un,G,X,q,nn,bn,on),Tn=Cn.handleObjectSelection,En=Cn.handleObjectDeselection,zn=Cn.handleDeleteObject,Ln=Cn.handleColorChange,Un=Cn.handleStrokeWidthChange;!function(n,e,t,o,r,i,c,l){a(function(){if(n){var t=function(n){var t=n.path;t&&(t.isDrawing=!0,t.set({selectable:!e,evented:!e}))};return n.on("path:created",t),function(){n.off("path:created",t)}}},[n,e]),a(function(){if(n)return n.on("selection:created",t),n.on("selection:updated",t),n.on("selection:cleared",o),function(){n.off("selection:created",t),n.off("selection:updated",t),n.off("selection:cleared",o)}},[n,t,o]),a(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]),a(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])}(un,R,Tn,En,on,rn,an,zn),a(function(){return function(){un&&un.dispose()}},[un]),a(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-fill-color: transparent;\n background-clip: text;\n}\n\n.gradient-text-green {\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/* Hover Effects */\n.hover-lift {\n transition: all 0.2s ease;\n}\n\n.hover-lift:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);\n}\n\n/* Focus States */\n.focus-ring {\n outline: none;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);\n}\n\n/* Animation Classes */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.animate-fade-in {\n animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n}\n\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Zoom Button Styles */\n.zoom-button {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n border: 1px solid rgba(255, 255, 255, 0.08);\n cursor: pointer;\n transition: all 0.2s ease;\n font-weight: 600;\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.zoom-button:hover {\n transf