@dkluge/image-editor/index.js

A powerful React image editor component with crop, filter, annotate, and sticker features

"use strict";var s=require("react/jsx-runtime"),w=require("react");const ze={QUARTER_TURN:90,NEGATIVE_QUARTER_TURN:-90},ae={FINETUNE:{min:-100,max:100},STROKE_WIDTH:{min:1,max:20},FONT_SIZE:{min:12,max:72}},je={RENDER:10,FILTER_RESET:50},ut=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:e,strokeWidth:"2",children:[s.jsx("rect",{x:"3",y:"11",width:"18",height:"11",rx:"2",ry:"2"}),s.jsx("circle",{cx:"12",cy:"16",r:"1"}),s.jsx("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]}),gt=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:e,strokeWidth:"2",children:[s.jsx("rect",{x:"3",y:"11",width:"18",height:"11",rx:"2",ry:"2"}),s.jsx("circle",{cx:"12",cy:"16",r:"1"}),s.jsx("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]});function Ie(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsxs("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[s.jsx("path",{d:"M3 12a9 9 0 019-9 9.75 9.75 0 016.74 2.74L21 8"}),s.jsx("path",{d:"M21 3v5h-5"}),s.jsx("path",{d:"M21 12a9 9 0 01-9 9 9.75 9.75 0 01-6.74-2.74L3 16"}),s.jsx("path",{d:"M3 21v-5h5"})]})}const pt={"common.cancel":"Cancel","header.copy":"Copy","header.copy.success":"Image copied to clipboard","header.copy.failed":"Failed to copy image","header.upload":"Upload Image","header.undo":"Undo","header.redo":"Redo","header.download":"Download","header.confirm":"Confirm","header.close":"Close","header.zoom.in":"Zoom In","header.zoom.out":"Zoom Out","header.zoom.reset":"Reset Zoom","header.close.confirm":"Are you sure you want to close? Any unsaved changes will be lost.","tool.select":"Select","tool.crop":"Crop","tool.filter":"Filter","tool.annotate":"Annotate","tool.sticker":"Sticker","tool.finetune":"Finetune","tool.frame":"Frame","crop.original":"Original","crop.lock.ratio":"Lock Aspect Ratio","crop.unlock.ratio":"Unlock Aspect Ratio","crop.rotation":"Rotation","crop.scale":"Scale","crop.skew":"Skew","crop.reset":"Reset All Adjustments","finetune.brightness":"Brightness","finetune.contrast":"Contrast","finetune.saturation":"Saturation","finetune.exposure":"Exposure","finetune.gamma":"Gamma","finetune.vignette":"Vignette","finetune.reset":"Reset All Finetune Settings","annotate.sharpie":"Sharpie","annotate.draw":"Draw","annotate.line":"Line","annotate.arrow":"Arrow","annotate.rectangle":"Rectangle","annotate.ellipse":"Ellipse","annotate.text":"Text","annotate.color":"Color","annotate.stroke":"Stroke","annotate.fill":"Fill","annotate.width":"Width","annotate.size":"Size","annotate.clear.fill":"Clear Fill","filter.basic":"Basic","filter.artistic":"Artistic","filter.enhance":"Enhance","filter.reset":"Reset","sticker.faces":"Faces","sticker.hands":"Hands","sticker.hearts":"Hearts","sticker.animals":"Animals","sticker.fruits":"Fruits","sticker.food":"Food","sticker.transport":"Transport","sticker.nature":"Nature","sticker.numbers":"Numbers","sticker.stickers":"Stickers","sticker.symbols":"Symbols","sticker.upload":"Upload","toolbar.delete":"Delete Selected","toolbar.copy":"Copy Selected","toolbar.front":"Bring to Front","toolbar.back":"Send to Back","toolbar.forward":"Move Forward","toolbar.backward":"Move Backward","toolbar.bold":"Bold","toolbar.italic":"Italic","toolbar.underline":"Underline","toolbar.strikethrough":"Strikethrough","toolbar.font.smaller":"Smaller Font","toolbar.font.larger":"Larger Font","toolbar.text.color":"Text Color","toolbar.stroke.color":"Stroke Color","toolbar.fill.color":"Fill Color","toolbar.stroke.width":"Stroke Width","toolbar.clear.fill":"Clear Fill","toolbar.opacity":"Opacity","toolbar.flip.horizontal":"Flip Horizontal","toolbar.flip.vertical":"Flip Vertical","loading.image":"Loading image...","frame.none":"None","frame.solidSharp":"Solid Sharp","frame.solidRound":"Solid Round","frame.lineSingle":"Single Line","frame.lineMultiple":"Multiple Lines","frame.edgeCross":"Edge Cross","frame.edgeSeparate":"Edge Separate","frame.edgeOverlap":"Edge Overlap","frame.hook":"Hook","frame.polaroid":"Polaroid","toolbar.delete.multi":"Delete {count} selected items","toolbar.copy.multi":"Copy {count} selected items","toolbar.selected.count":"{count} items selected","common.none":"None","common.width":"Width","common.height":"Height","common.color":"Color","common.size":"Size"},mt={"common.cancel":"\u53D6\u6D88","header.copy":"\u590D\u5236","header.copy.success":"\u56FE\u7247\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F","header.copy.failed":"\u590D\u5236\u56FE\u7247\u5931\u8D25","header.upload":"\u4E0A\u4F20\u56FE\u7247","header.undo":"\u64A4\u9500","header.redo":"\u91CD\u505A","header.download":"\u4E0B\u8F7D","header.confirm":"\u786E\u8BA4","header.close":"\u5173\u95ED","header.zoom.in":"\u653E\u5927","header.zoom.out":"\u7F29\u5C0F","header.zoom.reset":"\u91CD\u7F6E\u7F29\u653E","header.close.confirm":"\u786E\u5B9A\u8981\u5173\u95ED\u5417\uFF1F\u672A\u4FDD\u5B58\u7684\u66F4\u6539\u5C06\u4E22\u5931\u3002","tool.select":"\u9009\u62E9","tool.crop":"\u88C1\u526A","tool.filter":"\u6EE4\u955C","tool.annotate":"\u6807\u6CE8","tool.sticker":"\u8D34\u7EB8","tool.finetune":"\u5FAE\u8C03","tool.frame":"\u8FB9\u6846","crop.original":"\u539F\u59CB","crop.lock.ratio":"\u9501\u5B9A\u5BBD\u9AD8\u6BD4","crop.unlock.ratio":"\u89E3\u9501\u5BBD\u9AD8\u6BD4","crop.rotation":"\u65CB\u8F6C","crop.scale":"\u7F29\u653E","crop.skew":"\u503E\u659C","crop.reset":"\u91CD\u7F6E\u6240\u6709\u8C03\u6574","finetune.brightness":"\u4EAE\u5EA6","finetune.contrast":"\u5BF9\u6BD4\u5EA6","finetune.saturation":"\u9971\u548C\u5EA6","finetune.exposure":"\u66DD\u5149","finetune.gamma":"\u4F3D\u9A6C","finetune.vignette":"\u6697\u89D2","finetune.reset":"\u91CD\u7F6E\u6240\u6709\u5FAE\u8C03\u8BBE\u7F6E","annotate.sharpie":"\u9A6C\u514B\u7B14","annotate.draw":"\u7ED8\u5236","annotate.line":"\u76F4\u7EBF","annotate.arrow":"\u7BAD\u5934","annotate.rectangle":"\u77E9\u5F62","annotate.ellipse":"\u692D\u5706","annotate.text":"\u6587\u672C","annotate.color":"\u989C\u8272","annotate.stroke":"\u63CF\u8FB9","annotate.fill":"\u586B\u5145","annotate.width":"\u5BBD\u5EA6","annotate.size":"\u5927\u5C0F","annotate.clear.fill":"\u900F\u660E\u586B\u5145","filter.basic":"\u57FA\u7840\u6EE4\u955C","filter.artistic":"\u827A\u672F\u6EE4\u955C","filter.enhance":"\u589E\u5F3A\u6EE4\u955C","filter.reset":"\u91CD\u7F6E\u6EE4\u955C","sticker.faces":"\u8868\u60C5","sticker.hands":"\u624B\u52BF","sticker.hearts":"\u7231\u5FC3","sticker.animals":"\u52A8\u7269","sticker.fruits":"\u6C34\u679C","sticker.food":"\u98DF\u7269","sticker.transport":"\u4EA4\u901A","sticker.nature":"\u690D\u7269","sticker.numbers":"\u6570\u5B57","sticker.stickers":"\u8D34\u7EB8","sticker.symbols":"\u7B26\u53F7","sticker.upload":"\u4E0A\u4F20","toolbar.delete":"\u5220\u9664\u9009\u4E2D","toolbar.copy":"\u590D\u5236\u9009\u4E2D","toolbar.front":"\u79FB\u5230\u6700\u4E0A\u5C42","toolbar.back":"\u79FB\u5230\u6700\u4E0B\u5C42","toolbar.forward":"\u4E0A\u79FB\u4E00\u5C42","toolbar.backward":"\u4E0B\u79FB\u4E00\u5C42","toolbar.bold":"\u52A0\u7C97","toolbar.italic":"\u659C\u4F53","toolbar.underline":"\u4E0B\u5212\u7EBF","toolbar.strikethrough":"\u5220\u9664\u7EBF","toolbar.font.smaller":"\u5B57\u53F7-","toolbar.font.larger":"\u5B57\u53F7+","toolbar.text.color":"\u6587\u672C\u989C\u8272","toolbar.stroke.color":"\u63CF\u8FB9\u989C\u8272","toolbar.fill.color":"\u586B\u5145\u989C\u8272","toolbar.stroke.width":"\u63CF\u8FB9\u5BBD\u5EA6","toolbar.clear.fill":"\u6E05\u9664\u586B\u5145","toolbar.opacity":"\u900F\u660E\u5EA6","toolbar.flip.horizontal":"\u6C34\u5E73\u7FFB\u8F6C","toolbar.flip.vertical":"\u5782\u76F4\u7FFB\u8F6C","loading.image":"\u52A0\u8F7D\u56FE\u7247\u4E2D...","frame.none":"\u65E0\u8FB9\u6846","frame.solidSharp":"\u5B9E\u7EBF\u65B9\u6846","frame.solidRound":"\u5B9E\u7EBF\u5706\u89D2","frame.lineSingle":"\u5355\u7EBF\u8FB9\u6846","frame.lineMultiple":"\u591A\u7EBF\u8FB9\u6846","frame.edgeCross":"\u4EA4\u53C9\u8FB9\u6846","frame.edgeSeparate":"\u5206\u79BB\u8FB9\u6846","frame.edgeOverlap":"\u91CD\u53E0\u8FB9\u6846","frame.hook":"\u94A9\u5F62\u8FB9\u6846","frame.polaroid":"\u62CD\u7ACB\u5F97","toolbar.delete.multi":"\u5220\u9664\u9009\u4E2D\u7684 {count} \u4E2A\u5143\u7D20","toolbar.copy.multi":"\u590D\u5236\u9009\u4E2D\u7684 {count} \u4E2A\u5143\u7D20","toolbar.selected.count":"\u5DF2\u9009\u4E2D {count} \u4E2A\u5143\u7D20","common.none":"\u65E0","common.width":"\u5BBD\u5EA6","common.height":"\u9AD8\u5EA6","common.color":"\u989C\u8272","common.size":"\u5927\u5C0F"},re={en:pt,zh:mt},De=w.createContext(null),Pe=({language:a="en",translations:e,children:t})=>{const i=w.useMemo(()=>{const o=e?{...re,...Object.keys(e).reduce((l,r)=>(l[r]={...re[r]||re.en||{},...e[r]},l),{})}:re,n=o[a]||o.en||re.en;return{t:(l,r)=>{let c=n&&n[l]||l;return r&&Object.entries(r).forEach(([d,h])=>{c=c.replace(`{${d}}`,String(h))}),c},language:a}},[a,e]);return w.createElement(De.Provider,{value:i},t)},D=()=>{const a=w.useContext(De);if(!a)throw new Error("useTranslation must be used within I18nProvider");return a};function be(a,e){e===void 0&&(e={});var t=e.insertAt;if(!(!a||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=a:o.appendChild(document.createTextNode(a))}}var xt=".dk-slider{align-items:center;display:flex;width:100%}.dk-slider input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#007bff 0,#007bff var(--progress,0),hsla(0,0%,100%,.2) var(--progress,0),hsla(0,0%,100%,.2) 100%);border-radius:2px;cursor:pointer;height:4px;outline:none;transition:all .2s ease;width:100%}.dk-slider input[type=range]:hover{background:linear-gradient(to right,#0056b3 0,#0056b3 var(--progress,0),hsla(0,0%,100%,.3) var(--progress,0),hsla(0,0%,100%,.3) 100%)}.dk-slider input[type=range]:disabled{cursor:not-allowed;opacity:.5}.dk-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#007bff;border:2px solid hsla(0,0%,100%,.816);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:16px;transition:all .2s ease;width:16px}.dk-slider input[type=range]::-webkit-slider-thumb:hover{background:#0056b3;transform:scale(1.1)}.dk-slider input[type=range]::-moz-range-thumb{background:#007bff;border:2px solid hsla(0,0%,100%,.816);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:16px;transition:all .2s ease;width:16px}.dk-slider input[type=range]::-moz-range-thumb:hover{background:#0056b3;transform:scale(1.1)}.dk-slider input[type=range]::-moz-range-track{background:hsla(0,0%,100%,.2);border-radius:2px;height:4px}.dk-slider input[type=range]::-moz-range-progress{background:#007bff;border-radius:2px;height:4px}.dk-slider label,.dk-slider span{flex-shrink:0;font-size:12px}";be(xt);function te({min:a,max:e,value:t,onChange:i,step:o=1,className:n="",disabled:l=!1,width:r="100%",showValue:c=!1,showLabel:d=!1,label:h}){const u=w.useRef(null),g=w.useCallback(()=>{if(u.current){const m=(t-a)/(e-a)*100;u.current.style.setProperty("--progress",`${m}%`)}},[t,a,e]),p=w.useCallback(m=>{const f=parseFloat(m.target.value);i(f)},[i]);return w.useEffect(()=>{g()},[g]),s.jsxs("div",{className:`dk-slider ${n}`,style:{width:r},children:[d&&h&&s.jsxs("label",{children:[h,"\xA0"]}),s.jsx("input",{ref:u,type:"range",min:a,max:e,step:o,value:t,onChange:p,disabled:l}),c&&s.jsxs("span",{children:["\xA0",t.toFixed(0)]})]})}const ft=({editorState:a,cropPresets:e,editorRef:t,onStateChange:i})=>{const{t:o}=D(),[n,l]=w.useState(!1),[r,c]=w.useState(""),[d,h]=w.useState("");w.useEffect(()=>{if(!a.crop||!t.current)return;const x=t.current,_=x.getImageDisplay(),b=x.getOriginalImageSize(),{crop:C}=a;if(!b.width||!_.width)return;const j=C.width/_.width,S=C.height/_.height,I=Math.round(b.width*j),M=Math.round(b.height*S);c(I.toString()),h(M.toString())},[a.crop,t.current]);const u=w.useCallback(()=>{const x=t.current;x&&x.recalculateImageDisplay&&x.recalculateImageDisplay()},[t]),g=w.useCallback(()=>{const x=t.current;x&&(i({rotation:0,flipX:!1,flipY:!1,scale:1,skewX:0,skewY:0}),setTimeout(()=>{u();const _=x.getImageDisplay();i({crop:{x:_.x,y:_.y,width:_.width,height:_.height}})},50))},[t,i,u]),p=w.useCallback(x=>{if(!x.ratio){g();return}const _=t.current;if(!_)return;const b=_.getImageDisplay(),C=_.getState(),j=(C.rotation||0)*Math.PI/180,S=C.scale||1,I=C.skewX||0,M=C.skewY||0,E=Math.abs(Math.cos(j)),T=Math.abs(Math.sin(j)),A=b.width*S,X=b.height*S,P=Math.abs(I)*X,Y=Math.abs(M)*A,ee=(A+P)*E+(X+Y)*T,oe=(X+Y)*E+(A+P)*T,se=b.x+b.width/2,R=b.y+b.height/2,K=_.canvas,he=K.width,ne=K.height,G={x:Math.max(0,Math.min(he-ee,se-ee/2)),y:Math.max(0,Math.min(ne-oe,R-oe/2)),width:Math.min(ee,he),height:Math.min(oe,ne)},{width:ue,height:ge}=G;let N,q;x.ratio>=ue/ge?(N=ue*.8,q=N/x.ratio):(q=ge*.8,N=q*x.ratio);const ve=G.x+(G.width-N)/2,we=G.y+(G.height-q)/2;i({crop:{x:ve,y:we,width:N,height:q}})},[t,i,g]),m=w.useCallback(x=>{i({rotation:(a.rotation||0)+x})},[a.rotation,i]),f=w.useCallback(x=>{const _=`flip${x}`;i({[_]:!a[_]})},[a,i]),k=w.useCallback((x,_)=>{const b=t.current,C=b.getImageDisplay(),j=b.getOriginalImageSize(),S=x/j.width*C.width,I=_/j.height*C.height;i({crop:{...a.crop,width:S,height:I}})},[a.crop,i]),y=w.useCallback(x=>{c(x);const _=parseInt(x)||0;if(_<=0)return;let b=parseInt(d)||0;n&&parseInt(r)>0&&parseInt(d)>0&&(b=Math.round(_/(parseInt(r)/parseInt(d))),h(b.toString())),k(_,b)},[r,d,n,k]),v=w.useCallback(x=>{h(x);const _=parseInt(x)||0;if(_<=0)return;let b=parseInt(r)||0;n&&parseInt(r)>0&&parseInt(d)>0&&(b=Math.round(_*(parseInt(r)/parseInt(d))),c(b.toString())),k(b,_)},[r,d,n,k]);return s.jsxs("div",{className:"dk-image-editor__crop-controls",children:[s.jsxs("div",{className:"dk-image-editor__actions",children:[s.jsx("button",{className:"dk-image-editor__preset-btn",onClick:()=>p({name:"Original"}),children:s.jsx(Ie,{size:14})}),s.jsx("select",{className:"dk-image-editor__preset-select",onChange:x=>{const _=e.find(b=>b.name===x.target.value);_&&p(_)},defaultValue:"",children:e.map(x=>s.jsx("option",{value:x.name,children:x.name},x.name))}),s.jsx("button",{onClick:()=>m(ze.NEGATIVE_QUARTER_TURN),children:"-90\xB0"}),s.jsx("button",{onClick:()=>m(ze.QUARTER_TURN),children:"+90\xB0"}),s.jsx("button",{onClick:()=>f("X"),children:"\u21C4"}),s.jsx("button",{onClick:()=>f("Y"),children:"\u21C5"}),s.jsxs("div",{className:"dk-image-editor__size-inputs desktop-only",children:[s.jsx("input",{type:"number",value:r,onChange:x=>y(x.target.value),min:"1",placeholder:"W"}),s.jsx("button",{className:`dk-image-editor__lock-btn ${n?"locked":""}`,onClick:()=>l(!n),title:o(n?"crop.unlock.ratio":"crop.lock.ratio"),children:n?s.jsx(ut,{size:14}):s.jsx(gt,{size:14})}),s.jsx("input",{type:"number",value:d,onChange:x=>v(x.target.value),min:"1",placeholder:"H"})]})]}),s.jsxs("div",{className:"dk-image-editor__rotation-controls desktop-only",children:[s.jsx(te,{min:-180,max:180,value:a.rotation||0,onChange:x=>i({rotation:x}),showValue:!0,showLabel:!0,label:o("crop.rotation")}),s.jsx(te,{min:.1,max:3,step:.1,value:a.scale||1,onChange:x=>i({scale:x}),showValue:!0,showLabel:!0,label:o("crop.scale")}),s.jsx(te,{min:0,max:360,step:5,value:(()=>{const x=a.skewX||0,_=a.skewY||0;if(x===0&&_===0)return 0;const b=Math.atan2(_,x)*180/Math.PI;return b<0?b+360:b})(),onChange:x=>{const _=x;if(_===0)i({skewX:0,skewY:0});else{const b=_*Math.PI/180,C=.5;i({skewX:Math.cos(b)*C,skewY:Math.sin(b)*C})}},showValue:!0,showLabel:!0,label:o("crop.skew")})]})]})};function kt(a,e){let t;return(...i)=>{clearTimeout(t),t=setTimeout(()=>a(...i),e)}}function bt(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsx("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:s.jsx("path",{d:"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"})})}function yt(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsxs("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[s.jsx("path",{d:"M6.13 1L6 16a2 2 0 002 2h15"}),s.jsx("path",{d:"M1 6.13L16 6a2 2 0 012 2v15"})]})}function vt(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsx("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:s.jsx("path",{d:"M18.347 9.907a6.5 6.5 0 1 0-1.872 3.306M3.26 11.574a6.5 6.5 0 1 0 2.815-1.417 M10.15 17.897A6.503 6.503 0 0 0 16.5 23a6.5 6.5 0 1 0-6.183-8.51"})})}function wt(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsxs("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[s.jsx("line",{x1:"4",y1:"21",x2:"4",y2:"14"}),s.jsx("line",{x1:"4",y1:"10",x2:"4",y2:"3"}),s.jsx("line",{x1:"12",y1:"21",x2:"12",y2:"12"}),s.jsx("line",{x1:"12",y1:"8",x2:"12",y2:"3"}),s.jsx("line",{x1:"20",y1:"21",x2:"20",y2:"16"}),s.jsx("line",{x1:"20",y1:"12",x2:"20",y2:"3"}),s.jsx("line",{x1:"1",y1:"14",x2:"7",y2:"14"}),s.jsx("line",{x1:"9",y1:"8",x2:"15",y2:"8"}),s.jsx("line",{x1:"17",y1:"16",x2:"23",y2:"16"})]})}const _t=({size:a=16,className:e=""})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:e,children:[s.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}),s.jsx("rect",{x:"7",y:"7",width:"10",height:"10"})]});function St(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsx("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:s.jsx("path",{d:"M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"})})}function Ct(a){const e=a.size||a.width||20,t=a.size||a.height||20;return s.jsxs("svg",{...a,width:e,height:t,className:a.className,style:a.style,viewBox:"0 0 1024 1024",fill:"currentColor",children:[s.jsx("path",{d:"M670.64 403.2c-5.04-18.776-14.808-34.984-27.056-45.696-12.16-10.712-27.904-16.856-43.816-12.584-15.872 4.264-26.456 17.448-31.576 32.768-5.248 15.44-5.632 34.304-0.6 53.16 5.04 18.776 14.808 34.984 27.056 45.696 12.16 10.712 27.904 16.856 43.776 12.584 15.92-4.264 26.448-17.408 31.656-32.768 5.2-15.44 5.592-34.304 0.56-53.12V403.2z m-247.384 66.264c-4.992-18.776-14.768-34.992-27.008-45.744-12.16-10.664-27.904-16.808-43.776-12.584-15.92 4.264-26.456 17.496-31.664 32.856-5.2 15.4-5.584 34.256-0.552 53.072 5.04 18.816 14.8 34.992 27.048 45.744 12.16 10.664 27.904 16.848 43.776 12.584 15.92-4.264 26.456-17.448 31.664-32.808 5.2-15.408 5.584-34.304 0.56-53.12h-0.048z"}),s.jsx("path",{d:"M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 42.024 0 78.936-19.376 105.384-45.816l328.8-328.8C972.624 590.984 992 554.024 992 512c0-265.088-214.912-480-480-480zM119.28 512a392.872 392.872 0 0 1 43.104-179.192 395.456 395.456 0 0 1 28.864-47.712 394 394 0 0 1 48.424-56.352A392.616 392.616 0 0 1 416.688 130.72a393.344 393.344 0 0 1 110.656-11.44 391.096 391.096 0 0 1 55.424 6.128 392.736 392.736 0 0 1 319.56 342.944c-91.072 0.224-150.2 2.096-200.16 19.6a350.928 350.928 0 0 0-43.248 18.48 355.96 355.96 0 0 0-20.592 11.376 352.52 352.52 0 0 0-32.464 21.968 359.096 359.096 0 0 0-18.224 14.88 354.48 354.48 0 0 0-22.664 21.68 354.992 354.992 0 0 0-20.624 23.64 352.992 352.992 0 0 0-18.416 25.384 355.52 355.52 0 0 0-12.28 20.072 310.4 310.4 0 0 1-55.176 4.544 307.424 307.424 0 0 1-39.464-2.816 308.056 308.056 0 0 1-31.12-5.872 44.656 44.656 0 0 0-8.488-1.32 44.784 44.784 0 0 0-8.584 0.368 45.48 45.48 0 0 0-6.304 1.384 43.888 43.888 0 0 0-13.408 6.688 45.064 45.064 0 0 0-4.896 4.2 44.728 44.728 0 0 0-5.464 6.632 44.032 44.032 0 0 0-5.52 11.624 45.416 45.416 0 0 0-1.408 6.288 46.728 46.728 0 0 0-0.416 4.28 43.848 43.848 0 0 0 2.536 16.912 43.48 43.48 0 0 0 15.24 20.384 43.792 43.792 0 0 0 15.504 7.216c35.352 8.856 73.096 12.648 111.84 10.816-8.768 42.896-9.992 94.472-10.12 165.56C272 880.64 119.272 714.168 119.272 512z m611.68 58.344c32.432-11.352 72.44-13.968 153.392-14.576l-328.584 328.584c0.56-80.952 3.224-120.96 14.576-153.384a261.104 261.104 0 0 1 21.616-46.544 267.28 267.28 0 0 1 11.976-18.48 268.08 268.08 0 0 1 13.488-17.4 268.664 268.664 0 0 1 14.904-16.216 266.92 266.92 0 0 1 16.208-14.904 261.096 261.096 0 0 1 48.744-32.568 268.624 268.624 0 0 1 19.968-9.28 259.544 259.544 0 0 1 13.72-5.232z"})]})}const Mt={select:{name:"Select",icon:s.jsx(St,{})},crop:{name:"Crop",icon:s.jsx(yt,{})},finetune:{name:"Finetune",icon:s.jsx(wt,{})},filter:{name:"Filter",icon:s.jsx(vt,{})},annotate:{name:"Annotate",icon:s.jsx(bt,{})},sticker:{name:"Sticker",icon:s.jsx(Ct,{})},frame:{name:"Frame",icon:s.jsx(_t,{})},"advanced-filter":{name:"Advanced",icon:"\u{1F3AD}"},image:{name:"Image",icon:"\u{1F5BC}\uFE0F"},resize:{name:"Resize",icon:"\u{1F4CF}"},fill:{name:"Fill",icon:"\u{1F3AF}"}},jt=[[void 0,"Original"],[1,"1:1"],[4/3,"4:3"],[16/9,"16:9"],[3/2,"3:2"]],It=[["sharpie","Draw"],["line","Line"],["arrow","Arrow"],["rectangle","Rectangle"],["ellipse","Ellipse"],["text","Text"]],Et=[["chrome","Chrome"],["fade","Fade"],["cold","Cold"],["warm","Warm"],["monoDefault","Mono"],["sepiaDefault","Sepia"],["blur","Blur"],["sharpen","Sharpen"],["emboss","Emboss"],["oil","Oil Paint"],["vintage","Vintage"],["dramatic","Dramatic"],["vivid","Vivid"],["noir","Noir"],["sunset","Sunset"],["ocean","Ocean"]],Tt=[["brightness","Brightness"],["contrast","Contrast"],["saturation","Saturation"],["exposure","Exposure"],["gamma","Gamma"],["vignette","Vignette"]],Ft=[["none","None"],["solidSharp","Mat"],["solidRound","Bevel"],["lineSingle","Line"],["lineMultiple","Zebra"],["edgeCross","Lumber"],["edgeSeparate","Inset"],["edgeOverlap","Plus"],["hook","Hook"],["polaroid","Polaroid"]],U={ANIMATION_DURATION:300,DEFAULT_STROKE_WIDTH:2,DEFAULT_FONT_SIZE:24,EMOJI_LIST:["\u{1F600}","\u{1F602}","\u{1F923}","\u{1F60A}","\u{1F60D}","\u{1F970}","\u{1F618}","\u{1F60B}","\u{1F914}","\u{1F60E}","\u{1F929}","\u{1F973}","\u{1F44D}","\u{1F44E}","\u{1F44C}","\u270C\uFE0F","\u{1F91E}","\u{1F91F}","\u{1F918}","\u{1F44F}","\u{1F64C}","\u{1F91D}","\u{1F4AA}","\u{1F9BE}","\u2764\uFE0F","\u{1F9E1}","\u{1F49B}","\u{1F49A}","\u{1F499}","\u{1F49C}","\u{1F5A4}","\u{1F90D}","\u{1F90E}","\u{1F495}","\u{1F496}","\u{1F497}","\u{1F436}","\u{1F415}","\u{1F9AE}","\u{1F415}\u200D\u{1F9BA}","\u{1F429}","\u{1F43A}","\u{1F98A}","\u{1F99D}","\u{1F431}","\u{1F408}","\u{1F408}\u200D\u2B1B","\u{1F981}","\u{1F525}","\u2B50","\u2728","\u{1F389}","\u{1F4AF}","\u{1F4A5}","\u26A1","\u{1F31F}","\u{1F38A}","\u{1F388}","\u{1F381}","\u{1F3C6}"],FINETUNE_SHORTCUTS:{brightness:"BR",contrast:"CO",saturation:"SA",exposure:"EX",gamma:"GA",vignette:"VI"}},Rt=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("circle",{cx:"12",cy:"12",r:"4",fill:e}),s.jsx("path",{d:"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41",stroke:e,strokeWidth:"2",strokeLinecap:"round"})]}),At=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("circle",{cx:"12",cy:"12",r:"9",stroke:e,strokeWidth:"2"}),s.jsx("path",{d:"M12 3a9 9 0 0 1 0 18z",fill:e})]}),zt=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("circle",{cx:"12",cy:"12",r:"9",stroke:e,strokeWidth:"2"}),s.jsx("path",{d:"M8 8h8M8 12h8M8 16h4",stroke:e,strokeWidth:"2",strokeLinecap:"round"}),s.jsx("path",{d:"M16 16l2-2M18 18l-2-2",stroke:e,strokeWidth:"2",strokeLinecap:"round"})]}),Dt=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("path",{d:"M3 21h18l-9-18z",stroke:e,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx("path",{d:"M12 3v18",stroke:e,strokeWidth:"2",strokeLinecap:"round"}),s.jsx("path",{d:"M7.5 15h9",stroke:e,strokeWidth:"2",strokeLinecap:"round"})]}),Pt=({size:a=16,color:e="currentColor"})=>s.jsx("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("path",{d:"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z",fill:e})}),Nt=({size:a=16,color:e="currentColor"})=>s.jsxs("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",stroke:e,strokeWidth:"2"}),s.jsx("circle",{cx:"12",cy:"12",r:"6",fill:"none",stroke:e,strokeWidth:"2",strokeDasharray:"2 2"}),s.jsx("circle",{cx:"12",cy:"12",r:"3",fill:e})]}),Bt=({editorState:a,selectedFinetuneOption:e,finetuneOptions:t,editorRef:i,onStateChange:o,setSelectedFinetuneOption:n})=>{const{t:l}=D(),{FINETUNE_SHORTCUTS:r}=U,c=w.useMemo(()=>new Map(t),[t]),d=w.useMemo(()=>kt(()=>i.current?.render(),je.RENDER),[i]),h=w.useCallback(m=>{o({[e]:m}),d()},[e,o,d]),u=w.useCallback(()=>{const m={};t.forEach(([f])=>{m[f]=0}),o(m),d()},[t,o,d]),g=a?.[e]||0,p=l(`finetune.${e}`)||c.get(e)||"Brightness";return s.jsxs("div",{className:"dk-image-editor__finetune-controls",children:[s.jsx(te,{min:ae.FINETUNE.min,max:ae.FINETUNE.max,value:g,onChange:h,showValue:!0,showLabel:!0,label:p}),s.jsxs("div",{className:"dk-image-editor__finetune-options",children:[s.jsx("button",{className:"dk-image-editor__finetune-option",onClick:u,title:l("finetune.reset"),children:s.jsx(Ie,{size:14})}),t.map(([m,f])=>{const k=()=>{switch(m){case"brightness":return s.jsx(Rt,{size:14});case"contrast":return s.jsx(At,{size:14});case"saturation":return s.jsx(Pt,{size:14});case"exposure":return s.jsx(zt,{size:14});case"gamma":return s.jsx(Dt,{size:14});case"vignette":return s.jsx(Nt,{size:14});default:return r[m]||m.substring(0,2).toUpperCase()}};return s.jsx("button",{className:`dk-image-editor__finetune-option ${e===m?"dk-image-editor__finetune-option--active":""}`,onClick:()=>n(m),title:l(`finetune.${m}`),children:k()},m)})]})]})},Lt=({size:a=16,width:e,height:t,style:i})=>s.jsxs("svg",{width:e||a,height:t||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:[s.jsx("line",{x1:"7",y1:"17",x2:"17",y2:"7"}),s.jsx("polyline",{points:"7,7 17,7 17,17"})]}),Ot=({size:a=16,width:e,height:t,style:i})=>s.jsx("svg",{width:e||a,height:t||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:s.jsx("path",{d:"M3 17c3-3 6-6 9-3s6 6 9 3"})}),Ut=({size:a=16,width:e,height:t,style:i})=>s.jsx("svg",{width:e||a,height:t||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:s.jsx("circle",{cx:"12",cy:"12",r:"10"})}),$t=({size:a=16,width:e,height:t,style:i})=>s.jsx("svg",{width:e||a,height:t||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:s.jsx("line",{x1:"7",y1:"17",x2:"17",y2:"7"})}),Wt=({size:a=16,width:e,height:t,style:i})=>s.jsx("svg",{width:e||a,height:t||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:s.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"})}),Xt=({size:a=16,width:e,height:t,style:i})=>s.jsxs("svg",{width:e||a,height:t||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:[s.jsx("polyline",{points:"4,7 4,4 20,4 20,7"}),s.jsx("line",{x1:"9",y1:"20",x2:"15",y2:"20"}),s.jsx("line",{x1:"12",y1:"4",x2:"12",y2:"20"})]}),Ee=(a,e,t,i)=>({id:"",type:a,x:0,y:0,color:e,strokeWidth:t,fontSize:a==="text"?i:void 0,fillColor:a==="rectangle"||a==="ellipse"?"transparent":void 0,strokeColor:a!=="text"?e:void 0}),le=(a,e,t,i={})=>a?{...a,[e]:t}:{...Ee("rectangle","#000000",2),...i,[e]:t},Q=w.memo(({value:a,onChange:e,title:t})=>{const i=w.useCallback(n=>{n.preventDefault(),n.currentTarget.querySelector('input[type="color"]')?.click()},[]),o=w.useCallback(n=>{n.stopPropagation(),e(n.target.value)},[e]);return s.jsx("button",{className:"dk-image-editor__color-button",onClick:i,children:s.jsx("div",{className:"dk-image-editor__color-picker",children:s.jsx("input",{type:"color",value:a,onChange:o,title:t,onClick:n=>{console.log("\u{1F3A8} Color input clicked"),n.stopPropagation()}})})})});Q.displayName="ColorPicker";const Yt=({currentAnnotation:a,lastAnnotateColor:e,annotateTools:t,setCurrentAnnotation:i,setLastAnnotateColor:o})=>{const{t:n}=D(),{DEFAULT_STROKE_WIDTH:l,DEFAULT_FONT_SIZE:r}=U;w.useEffect(()=>{a||i(Ee("sharpie",e,l,r))},[a,e,i,l,r]);const c=w.useCallback(k=>{if(o(k),a){const y=le(a,"color",k);i(le(y,"strokeColor",k))}},[a,i,o]),d=w.useCallback(k=>{i(le(a,"strokeWidth",k,{color:e}))},[a,e,i]),h=w.useCallback(k=>{i(le(a,"fontSize",k))},[a,i]),u=w.useCallback(k=>{i(le(a,"fillColor",k))},[a,i]),g=w.useCallback(k=>{i(le(a,"strokeColor",k))},[a,i]),p=w.useCallback(k=>{i(Ee(k,e,a?.strokeWidth||l,a?.fontSize||r))},[a,e,i,l,r]),m=a?.type==="text"?s.jsx(te,{min:ae.FONT_SIZE.min,max:ae.FONT_SIZE.max,value:a.fontSize||r,onChange:h,showValue:!0,showLabel:!0,label:`${n("annotate.size")}:`,width:"150px"}):null,f=a?.type==="rectangle"||a?.type==="ellipse"?s.jsx(s.Fragment,{children:s.jsxs("div",{className:"dk-image-editor__color-box",children:[s.jsxs("label",{children:[n("annotate.fill"),": "]}),s.jsx(Q,{value:a.fillColor||"#000000",onChange:u,title:"Fill Color"}),a.fillColor&&a.fillColor!=="transparent"&&s.jsx("button",{onClick:()=>u("transparent"),className:"dk-image-editor__clear-fill",title:n("annotate.clear.fill"),children:"\u2715"})]})}):null;return s.jsxs("div",{className:"dk-image-editor__annotate-controls",children:[s.jsxs("div",{className:"dk-image-editor__annotate-settings",children:[a?.type==="text"?s.jsxs("div",{className:"dk-image-editor__color-box",children:[s.jsxs("label",{children:[n("annotate.color"),": "]}),s.jsx(Q,{value:e,onChange:c,title:n("toolbar.text.color")})]}):s.jsxs("div",{className:"dk-image-editor__color-box",children:[s.jsxs("label",{children:[n("annotate.stroke"),": "]}),s.jsx(Q,{value:a?.strokeColor||e,onChange:g,title:n("toolbar.stroke.color")})]}),f,a?.type!=="text"&&s.jsx(te,{min:ae.STROKE_WIDTH.min,max:ae.STROKE_WIDTH.max,value:a?.strokeWidth||l,onChange:d,showValue:!0,showLabel:!0,label:`${n("annotate.width")}:`,width:"150px"}),m]}),s.jsx("div",{className:"dk-image-editor__toolbar dk-image-editor__annotate-toolbar",children:t.map(([k,y])=>{const v=()=>{switch(k){case"sharpie":return s.jsx(Ot,{size:16});case"line":return s.jsx($t,{size:16});case"arrow":return s.jsx(Lt,{size:16});case"rectangle":return s.jsx(Wt,{size:16});case"ellipse":return s.jsx(Ut,{size:16});case"text":return s.jsx(Xt,{size:16});default:return null}};return s.jsxs("button",{onClick:()=>p(k),className:`dk-image-editor__tool-button ${a?.type===k?"dk-image-editor__unified-button--active":""}`,children:[v(),s.jsx("span",{className:"desktop-only",children:n(`annotate.${k}`)})]},k)})})]})};function Te(...a){const e=[];for(const t of a)if(t){if(typeof t=="string"||typeof t=="number")e.push(String(t));else if(Array.isArray(t)){const i=Te(...t);i&&e.push(i)}else if(typeof t=="object")for(const i in t)t[i]&&e.push(i)}return e.join(" ")}const Gt=({editorRef:a,stickerPluginRef:e,selectionPluginRef:t,imagePluginRef:i,zoomLevel:o,setHasSelection:n,currentSticker:l,setCurrentSticker:r})=>{const{t:c}=D(),{EMOJI_LIST:d}=U,[h,u]=w.useState("faces"),[g,p]=w.useState(new Set),m=w.useMemo(()=>["https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f60d.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f602.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f60e.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f973.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f970.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f60b.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f929.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f60a.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f618.png","https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f44d.png"],[]),f=w.useMemo(()=>({faces:d.slice(0,12),hands:d.slice(12,24),hearts:d.slice(24,36),fruits:["\u{1F349}","\u{1F34A}","\u{1F34E}","\u{1F34B}","\u{1F34C}","\u{1F347}","\u{1F353}","\u{1FAD0}","\u{1F348}","\u{1F351}","\u{1F352}","\u{1F96D}"],food:["\u{1F355}","\u{1F354}","\u{1F35F}","\u{1F32D}","\u{1F96A}","\u{1F32E}","\u{1F32F}","\u{1F959}","\u{1F9C6}","\u{1F95A}","\u{1F373}","\u{1F95E}"],transport:["\u{1F697}","\u{1F695}","\u{1F699}","\u{1F68C}","\u{1F68E}","\u{1F3CE}\uFE0F","\u{1F693}","\u{1F691}","\u{1F692}","\u{1F690}","\u{1F6FB}","\u{1F69A}"],nature:["\u{1F338}","\u{1F33A}","\u{1F33B}","\u{1F337}","\u{1F339}","\u{1F940}","\u{1F33E}","\u{1F33F}","\u{1F340}","\u{1F343}","\u{1F331}","\u{1F332}"],animals:d.slice(36,48),numbers:["0\uFE0F\u20E3","1\uFE0F\u20E3","2\uFE0F\u20E3","3\uFE0F\u20E3","4\uFE0F\u20E3","5\uFE0F\u20E3","6\uFE0F\u20E3","7\uFE0F\u20E3","8\uFE0F\u20E3","9\uFE0F\u20E3","\u{1F51F}","#\uFE0F\u20E3"],stickers:m,symbols:d.slice(48)}),[d,m]);w.useEffect(()=>{if(!l){const v=f.faces[0]??"\u{1F600}";r({content:v,type:"emoji"})}},[l,r,f.faces]);const k=w.useCallback(v=>{v&&i.current&&i.current.addImageFromFile(v)},[i]),y=w.useCallback((v,x="emoji")=>{r({content:v,type:x})},[r]);return s.jsxs("div",{className:"dk-image-editor__sticker-controls",children:[s.jsx("div",{className:"d-flex align-items-center gap-2 dk-image-editor__sticker-category",children:Object.keys(f).map(v=>s.jsx("button",{className:`dk-image-editor__tool-button ${h===v?"active":""}`,onClick:()=>{u(v);const x=f[v][0];x&&r({content:x,type:v==="stickers"?"image":"emoji"})},children:(()=>{const x=f[v];if(v==="stickers"){const b=x[0];return b?s.jsx("img",{src:b,alt:"sticker",style:{width:"16px",height:"16px"}}):null}const _=x[0];return _?s.jsx("span",{style:{fontSize:"16px"},children:_}):null})()},v))}),s.jsxs("div",{className:"dk-image-editor__toolbar",children:[s.jsxs("label",{className:"dk-image-editor__upload-button",children:[s.jsx("input",{type:"file",accept:"image/*",style:{display:"none"},onChange:v=>{const x=v.target.files?.[0];x&&k(x)}}),s.jsx("span",{className:"dk-image-editor__upload-icon",children:"+"})]}),f[h].map((v,x)=>{const _=l?.content===v;return s.jsx("span",{onClick:()=>y(v,h==="stickers"?"image":"emoji"),className:Te("dk-image-editor__sticker-button",{"css-loading":g.has(v),"dk-image-editor__unified-button--active":_}),style:{height:h==="stickers"?"auto":""},children:h==="stickers"?s.jsx("img",{src:v,alt:"sticker"}):s.jsx("span",{children:v})},typeof v=="string"?v:x)})]})]})};var Vt='.dk-filter-section{margin-bottom:24px}.dk-filter-section:last-child{margin-bottom:0}.dk-filter-section-title{color:#374151;font-size:14px;font-weight:600;letter-spacing:.5px;margin:0 0 12px;padding:0 4px;text-transform:uppercase}.dk-filter-section-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}.dk-image-editor__filter-preview{align-items:center;background:transparent;border:2px solid transparent;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);cursor:pointer;display:flex;flex-direction:column;overflow:hidden;padding:8px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.dk-image-editor__filter-preview:before{background:linear-gradient(135deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0));bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .3s ease}.dk-image-editor__filter-preview:hover{transform:translateY(-2px) scale(1.02)}.dk-image-editor__filter-preview:hover:before{opacity:1}.dk-image-editor__filter-preview.dk-image-editor__unified-button--active{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-color:#6366f1;box-shadow:0 4px 12px rgba(99,102,241,.25);transform:translateY(-1px)}.dk-image-editor__filter-preview.dk-image-editor__unified-button--active:before{opacity:1}.dk-image-editor__filter-icon{border:1px solid rgba(0,0,0,.06);border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.1),inset 0 1px 0 hsla(0,0%,100%,.8);height:32px;margin-bottom:8px;overflow:hidden;padding:4px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:32px}.dk-image-editor__filter-preview:hover .dk-image-editor__filter-icon{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:scale(1.05)}.dk-image-editor__filter-icon svg{display:block;height:100%;width:100%}.dk-image-editor__filter-name{color:#475569;color:#ffffffd0;font-size:11px;font-weight:500;letter-spacing:.01em;line-height:1.3;text-align:center;transition:all .3s ease}.dk-image-editor__filter-preview:hover .dk-image-editor__filter-name{color:#6366f1;transform:translateY(-1px)}.dk-image-editor__filter-preview.dk-image-editor__unified-button--active .dk-image-editor__filter-name{color:#6366f1;font-weight:700;text-shadow:0 1px 2px rgba(99,102,241,.1)}.dk-image-editor__filter-preview--apply{.dk-image-editor__filter-icon{background:linear-gradient(135deg,#fffbeb,#fef3c7)}}.dk-image-editor__filter-preview--toggle{.dk-image-editor__filter-icon{background:linear-gradient(135deg,#f0fdf4,#dcfce7)}}.dk-filter-badge{color:#f59e0b;font-size:12px;font-weight:700;margin-left:2px}.dk-filter-count{background:#007bff;border-radius:50%;color:#ffffffd0;display:inline-block;font-size:10px;font-weight:700;height:16px;line-height:16px;margin-left:4px;text-align:center;width:16px}.dk-image-editor__spinner{animation:dk-spin 1s linear infinite;border:2px solid #f3f3f3;border-radius:50%;border-top-color:#4f46e5;height:20px;width:20px}@keyframes dk-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}';be(Vt);const Zt=a=>{const e=a.data;for(let t=0;t<e.length;t+=4){const i=e[t]??0,o=e[t+1]??0,n=e[t+2]??0,l=.393*i+.769*o+.189*n,r=.349*i+.686*o+.168*n,c=.272*i+.534*o+.131*n;e[t]=Math.min(255,l*1.2+25),e[t+1]=Math.min(255,r*1.1+15),e[t+2]=Math.min(255,c*.9+5)}return console.log("imageData",a),a},Ht=a=>{const e=a.data;for(let t=0;t<e.length;t+=4){const i=e[t]??0,o=e[t+1]??0,n=e[t+2]??0,l=2.5,r=259*(l+255)/(255*(259-l));let c=Math.max(0,Math.min(255,r*(i-128)+128)),d=Math.max(0,Math.min(255,r*(o-128)+128)),h=Math.max(0,Math.min(255,r*(n-128)+128));const u=.299*c+.587*d+.114*h,g=1.8;c=Math.max(0,Math.min(255,u+g*(c-u))),d=Math.max(0,Math.min(255,u+g*(d-u))),h=Math.max(0,Math.min(255,u+g*(h-u))),.299*c+.587*d+.114*h<128?(c*=.7,d*=.7,h*=.7):(c=Math.min(255,c*1.3),d=Math.min(255,d*1.3),h=Math.min(255,h*1.3)),e[t]=c,e[t+1]=d,e[t+2]=h}return a},Kt=a=>{const e=a.data;for(let t=0;t<e.length;t+=4){const i=e[t]??0,o=e[t+1]??0,n=e[t+2]??0,l=1.6,r=.299*i+.587*o+.114*n;e[t]=Math.max(0,Math.min(255,r+l*(i-r))),e[t+1]=Math.max(0,Math.min(255,r+l*(o-r))),e[t+2]=Math.max(0,Math.min(255,r+l*(n-r)))}return a},qt=a=>{const e=a.data;for(let t=0;t<e.length;t+=4){const i=e[t]??0,o=e[t+1]??0,n=e[t+2]??0,l=.299*i+.587*o+.114*n,r=l>128?Math.min(255,l*1.3):Math.max(0,l*.7);e[t]=r,e[t+1]=r,e[t+2]=r}return a},Qt=a=>{const e=a.data;for(let t=0;t<e.length;t+=4){const i=e[t]??0,o=e[t+1]??0,n=e[t+2]??0;e[t]=Math.min(255,i*1.3+40),e[t+1]=Math.min(255,o*1.1+25),e[t+2]=Math.max(0,n*.6)}return a},Jt=a=>{const e=a.data;for(let t=0;t<e.length;t+=4){const i=e[t]??0,o=e[t+1]??0,n=e[t+2]??0;e[t]=Math.max(0,i*.7),e[t+1]=Math.min(255,o*1.2+20),e[t+2]=Math.min(255,n*1.4+30)}return a},ei={chrome:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("rect",{width:"40",height:"40",fill:"#FFFFFF",rx:"8"}),s.jsx("rect",{x:"6",y:"8",width:"28",height:"12",fill:"#1966FF",rx:"2"}),s.jsx("rect",{x:"10",y:"16",width:"24",height:"16",fill:"#00C87F",rx:"2"}),s.jsx("text",{x:"20",y:"26",textAnchor:"middle",fill:"#FFFFFF",fontSize:"8",fontWeight:"bold",children:"HD"})]}),fade:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"fade-grad",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[s.jsx("stop",{offset:"0%",stopColor:"#333333",stopOpacity:"1"}),s.jsx("stop",{offset:"50%",stopColor:"#666666",stopOpacity:"0.6"}),s.jsx("stop",{offset:"100%",stopColor:"#cccccc",stopOpacity:"0.2"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"#f5f5f5",rx:"6"}),s.jsx("rect",{x:"5",y:"15",width:"30",height:"10",fill:"url(#fade-grad)",rx:"2"})]}),cold:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"cold-grad",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:"#e6f7ff"}),s.jsx("stop",{offset:"50%",stopColor:"#91d5ff"}),s.jsx("stop",{offset:"100%",stopColor:"#40a9ff"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#cold-grad)",rx:"4"}),s.jsx("path",{d:"M20 8 L24 16 L20 24 L16 16 Z",fill:"#fff",opacity:"0.7"}),s.jsx("path",{d:"M8 20 L16 24 L24 20 L16 16 Z",fill:"#fff",opacity:"0.5"})]}),warm:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("radialGradient",{id:"warm-grad",children:[s.jsx("stop",{offset:"0%",stopColor:"#fff7e6"}),s.jsx("stop",{offset:"50%",stopColor:"#ffd591"}),s.jsx("stop",{offset:"100%",stopColor:"#fa8c16"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#warm-grad)",rx:"4"}),s.jsx("circle",{cx:"20",cy:"15",r:"6",fill:"#ffec3d",opacity:"0.8"}),s.jsx("path",{d:"M20 21 Q15 25 10 30 Q20 28 20 21",fill:"#ff7a45",opacity:"0.6"}),s.jsx("path",{d:"M20 21 Q25 25 30 30 Q20 28 20 21",fill:"#ff7a45",opacity:"0.6"})]}),monoDefault:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("rect",{width:"40",height:"40",fill:"#f0f0f0"}),s.jsx("rect",{width:"20",height:"40",fill:"#333"}),s.jsx("rect",{x:"10",y:"10",width:"20",height:"20",fill:"#666"}),s.jsx("rect",{x:"15",y:"15",width:"10",height:"10",fill:"#999"})]}),sepiaDefault:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"sepia-grad",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:"#f4e4bc"}),s.jsx("stop",{offset:"50%",stopColor:"#d2b48c"}),s.jsx("stop",{offset:"100%",stopColor:"#8b7355"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#sepia-grad)",rx:"4"}),s.jsx("circle",{cx:"12",cy:"12",r:"4",fill:"#deb887",opacity:"0.8"}),s.jsx("circle",{cx:"28",cy:"28",r:"6",fill:"#cd853f",opacity:"0.6"})]}),blur:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsx("filter",{id:"blur-effect",children:s.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"2"})})}),s.jsx("rect",{width:"40",height:"40",fill:"#f0f8ff"}),s.jsx("circle",{cx:"15",cy:"15",r:"8",fill:"#4169e1",filter:"url(#blur-effect)",opacity:"0.7"}),s.jsx("circle",{cx:"25",cy:"25",r:"6",fill:"#1e90ff",filter:"url(#blur-effect)",opacity:"0.5"})]}),sharpen:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("rect",{width:"40",height:"40",fill:"#fafafa"}),s.jsx("polygon",{points:"20,5 30,20 20,35 10,20",fill:"#ff4d4f",stroke:"#fff",strokeWidth:"2"}),s.jsx("polygon",{points:"20,10 25,20 20,30 15,20",fill:"#fff",opacity:"0.8"})]}),emboss:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"emboss-grad",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:"#ffffff"}),s.jsx("stop",{offset:"50%",stopColor:"#cccccc"}),s.jsx("stop",{offset:"100%",stopColor:"#666666"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"#e8e8e8"}),s.jsx("rect",{x:"8",y:"8",width:"24",height:"24",fill:"url(#emboss-grad)",rx:"2"}),s.jsx("rect",{x:"10",y:"10",width:"20",height:"20",fill:"none",stroke:"#999",strokeWidth:"1"})]}),oil:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("rect",{width:"40",height:"40",fill:"#2c3e50"}),s.jsx("circle",{cx:"12",cy:"15",r:"5",fill:"#e74c3c",opacity:"0.8"}),s.jsx("circle",{cx:"28",cy:"12",r:"4",fill:"#f39c12",opacity:"0.7"}),s.jsx("circle",{cx:"25",cy:"28",r:"6",fill:"#3498db",opacity:"0.6"}),s.jsx("circle",{cx:"15",cy:"30",r:"3",fill:"#2ecc71",opacity:"0.9"}),s.jsx("path",{d:"M10 25 Q20 20 30 25 Q25 30 15 28",fill:"#9b59b6",opacity:"0.5"})]}),vintage:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("radialGradient",{id:"vintage-grad",children:[s.jsx("stop",{offset:"0%",stopColor:"#f5e6d3"}),s.jsx("stop",{offset:"70%",stopColor:"#d4a574"}),s.jsx("stop",{offset:"100%",stopColor:"#8b6914"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#vintage-grad)",rx:"6"}),s.jsx("circle",{cx:"20",cy:"20",r:"12",fill:"none",stroke:"#8b6914",strokeWidth:"2",opacity:"0.6"}),s.jsx("rect",{x:"16",y:"8",width:"8",height:"4",fill:"#8b6914",opacity:"0.8"})]}),dramatic:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"dramatic-grad",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[s.jsx("stop",{offset:"0%",stopColor:"#000000"}),s.jsx("stop",{offset:"50%",stopColor:"#666666"}),s.jsx("stop",{offset:"100%",stopColor:"#ffffff"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#dramatic-grad)"}),s.jsx("polygon",{points:"20,8 28,20 20,32 12,20",fill:"#fff",opacity:"0.3"})]}),vivid:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("radialGradient",{id:"vivid-grad",children:[s.jsx("stop",{offset:"0%",stopColor:"#ff6b6b"}),s.jsx("stop",{offset:"33%",stopColor:"#4ecdc4"}),s.jsx("stop",{offset:"66%",stopColor:"#45b7d1"}),s.jsx("stop",{offset:"100%",stopColor:"#96ceb4"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#vivid-grad)",rx:"8"}),s.jsx("circle",{cx:"15",cy:"15",r:"4",fill:"#fff",opacity:"0.4"}),s.jsx("circle",{cx:"25",cy:"25",r:"3",fill:"#fff",opacity:"0.6"})]}),noir:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("rect",{width:"40",height:"40",fill:"#1a1a1a"}),s.jsx("rect",{x:"5",y:"15",width:"30",height:"2",fill:"#ffffff"}),s.jsx("rect",{x:"5",y:"23",width:"30",height:"2",fill:"#cccccc"}),s.jsx("circle",{cx:"12",cy:"12",r:"3",fill:"#ffffff"}),s.jsx("circle",{cx:"28",cy:"28",r:"4",fill:"#888888"}),s.jsx("rect",{x:"18",y:"18",width:"4",height:"4",fill:"#ffffff"})]}),sunset:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"sunset-grad",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:"#ff9a56"}),s.jsx("stop",{offset:"50%",stopColor:"#ff6b35"}),s.jsx("stop",{offset:"100%",stopColor:"#f7931e"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#sunset-grad)",rx:"4"}),s.jsx("circle",{cx:"20",cy:"12",r:"6",fill:"#fff59d",opacity:"0.9"}),s.jsx("ellipse",{cx:"20",cy:"32",rx:"15",ry:"4",fill:"#ff5722",opacity:"0.6"}),s.jsx("path",{d:"M5 25 Q20 20 35 25",stroke:"#ffcc02",strokeWidth:"2",fill:"none",opacity:"0.8"})]}),ocean:s.jsxs("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"ocean-grad",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:"#87ceeb"}),s.jsx("stop",{offset:"50%",stopColor:"#4682b4"}),s.jsx("stop",{offset:"100%",stopColor:"#191970"})]})}),s.jsx("rect",{width:"40",height:"40",fill:"url(#ocean-grad)",rx:"4"}),s.jsx("path",{d:"M0 30 Q10 25 20 30 T40 30 V40 H0 Z",fill:"#1e88e5",opacity:"0.7"}),s.jsx("path",{d:"M0 35 Q15 32 30 35 T40 35 V40 H0 Z",fill:"#0d47a1",opacity:"0.5"}),s.jsx("circle",{cx:"30",cy:"10",r:"2",fill:"#ffffff",opacity:"0.8"})]})},ti=({filterId:a,name:e,isActive:t,onClick:i,isLoading:o=!1,filterType:n="toggle",clickCount:l})=>s.jsxs("button",{className:Te("dk-image-editor__filter-preview",`dk-image-editor__filter-preview--${n}`,{"dk-image-editor__unified-button--active":t,"dk-image-editor__filter-preview--loading":o,"css-loading":o}),onClick:i,disabled:o,children:[s.jsx("div",{className:"dk-image-editor__filter-icon",children:ei[a]||s.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontSize:"24px"},children:"\u{1F3A8}"})}),s.jsxs("span",{className:"dk-image-editor__filter-name",children:[e,n==="apply"&&l!==void 0&&l>0&&s.jsx("span",{className:"dk-filter-count",children:l})]})]}),ii=({editorState:a,filters:e,editorRef:t,filterCounts:i,onStateChange:o,setFilterCounts:n,applyAdvancedFilter:l})=>{const{t:r}=D(),[c,d]=w.useState(null),[h,u]=w.useState("basic"),g=w.useMemo(()=>({toggle:["chrome","fade","cold","warm","monoDefault","sepiaDefault","blur"],apply:["sharpen","emboss","oil","vintage","dramatic","vivid","noir","sunset","ocean"]}),[]),{toggle:p,apply:m}=g,f=w.useCallback(S=>S.name==="Original"||S.id==="original"?(o({filter:null}),setTimeout(()=>t.current?.render(),je.FILTER_RESET),!0):!1,[o,t]),k=w.useCallback((S,I)=>{switch(I){case"vintage":return Zt(S);case"dramatic":return Ht(S);case"vivid":return Kt(S);case"noir":return qt(S);case"sunset":return Qt(S);case"ocean":return Jt(S);default:return S}},[]),y=w.useCallback(async S=>{if(!t.current)return;let I=t.current.getImageData();if(I){for(const[M,E]of Object.entries(i))if(M!==S&&E>0&&m.includes(M))for(let T=0;T<E;T++)["sharpen","emboss","oil"].includes(M