@dkluge/image-editor
Version:
A powerful React image editor component with crop, filter, annotate, and sticker features
1 lines • 183 kB
JavaScript
import{jsxs as v,jsx as c,Fragment as W}from"react/jsx-runtime";import ye,{createContext as Ut,useMemo as P,useContext as $t,useRef as L,useCallback as A,useEffect as Y,useState as j,memo as ve,useReducer as we}from"react";const Wt={QUARTER_TURN:90,NEGATIVE_QUARTER_TURN:-90},ut={FINETUNE:{min:-100,max:100},STROKE_WIDTH:{min:1,max:20},FONT_SIZE:{min:12,max:72}},Rt={RENDER:10,FILTER_RESET:50},_e=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:"2",children:[c("rect",{x:"3",y:"11",width:"18",height:"11",rx:"2",ry:"2"}),c("circle",{cx:"12",cy:"16",r:"1"}),c("path",{d:"M7 11V7a5 5 0 0 1 10 0v4"})]}),Se=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:"2",children:[c("rect",{x:"3",y:"11",width:"18",height:"11",rx:"2",ry:"2"}),c("circle",{cx:"12",cy:"16",r:"1"}),c("path",{d:"M7 11V7a5 5 0 0 1 9.9-1"})]});function Dt(a){const t=a.size||a.width||20,e=a.size||a.height||20;return v("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[c("path",{d:"M3 12a9 9 0 019-9 9.75 9.75 0 016.74 2.74L21 8"}),c("path",{d:"M21 3v5h-5"}),c("path",{d:"M21 12a9 9 0 01-9 9 9.75 9.75 0 01-6.74-2.74L3 16"}),c("path",{d:"M3 21v-5h5"})]})}const Me={"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"},Ce={"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"},gt={en:Me,zh:Ce},jt=Ut(null),Xt=({language:a="en",translations:t,children:e})=>{const i=P(()=>{const o=t?{...gt,...Object.keys(t).reduce((s,r)=>(s[r]={...gt[r]||gt.en||{},...t[r]},s),{})}:gt,n=o[a]||o.en||gt.en;return{t:(s,r)=>{let l=n&&n[s]||s;return r&&Object.entries(r).forEach(([d,h])=>{l=l.replace(`{${d}}`,String(h))}),l},language:a}},[a,t]);return ye.createElement(jt.Provider,{value:i},e)},B=()=>{const a=$t(jt);if(!a)throw new Error("useTranslation must be used within I18nProvider");return a};function Mt(a,t){t===void 0&&(t={});var e=t.insertAt;if(!(!a||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",e==="top"&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=a:o.appendChild(document.createTextNode(a))}}var Ie=".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}";Mt(Ie);function st({min:a,max:t,value:e,onChange:i,step:o=1,className:n="",disabled:s=!1,width:r="100%",showValue:l=!1,showLabel:d=!1,label:h}){const u=L(null),g=A(()=>{if(u.current){const m=(e-a)/(t-a)*100;u.current.style.setProperty("--progress",`${m}%`)}},[e,a,t]),p=A(m=>{const x=parseFloat(m.target.value);i(x)},[i]);return Y(()=>{g()},[g]),v("div",{className:`dk-slider ${n}`,style:{width:r},children:[d&&h&&v("label",{children:[h,"\xA0"]}),c("input",{ref:u,type:"range",min:a,max:t,step:o,value:e,onChange:p,disabled:s}),l&&v("span",{children:["\xA0",e.toFixed(0)]})]})}const Ee=({editorState:a,cropPresets:t,editorRef:e,onStateChange:i})=>{const{t:o}=B(),[n,s]=j(!1),[r,l]=j(""),[d,h]=j("");Y(()=>{if(!a.crop||!e.current)return;const f=e.current,_=f.getImageDisplay(),b=f.getOriginalImageSize(),{crop:M}=a;if(!b.width||!_.width)return;const I=M.width/_.width,S=M.height/_.height,E=Math.round(b.width*I),C=Math.round(b.height*S);l(E.toString()),h(C.toString())},[a.crop,e.current]);const u=A(()=>{const f=e.current;f&&f.recalculateImageDisplay&&f.recalculateImageDisplay()},[e]),g=A(()=>{const f=e.current;f&&(i({rotation:0,flipX:!1,flipY:!1,scale:1,skewX:0,skewY:0}),setTimeout(()=>{u();const _=f.getImageDisplay();i({crop:{x:_.x,y:_.y,width:_.width,height:_.height}})},50))},[e,i,u]),p=A(f=>{if(!f.ratio){g();return}const _=e.current;if(!_)return;const b=_.getImageDisplay(),M=_.getState(),I=(M.rotation||0)*Math.PI/180,S=M.scale||1,E=M.skewX||0,C=M.skewY||0,T=Math.abs(Math.cos(I)),F=Math.abs(Math.sin(I)),D=b.width*S,K=b.height*S,O=Math.abs(E)*K,q=Math.abs(C)*D,rt=(D+O)*T+(K+q)*F,ct=(K+q)*T+(D+O)*F,dt=b.x+b.width/2,R=b.y+b.height/2,it=_.canvas,xt=it.width,ht=it.height,Q={x:Math.max(0,Math.min(xt-rt,dt-rt/2)),y:Math.max(0,Math.min(ht-ct,R-ct/2)),width:Math.min(rt,xt),height:Math.min(ct,ht)},{width:kt,height:bt}=Q;let U,ot;f.ratio>=kt/bt?(U=kt*.8,ot=U/f.ratio):(ot=bt*.8,U=ot*f.ratio);const It=Q.x+(Q.width-U)/2,Et=Q.y+(Q.height-ot)/2;i({crop:{x:It,y:Et,width:U,height:ot}})},[e,i,g]),m=A(f=>{i({rotation:(a.rotation||0)+f})},[a.rotation,i]),x=A(f=>{const _=`flip${f}`;i({[_]:!a[_]})},[a,i]),k=A((f,_)=>{const b=e.current,M=b.getImageDisplay(),I=b.getOriginalImageSize(),S=f/I.width*M.width,E=_/I.height*M.height;i({crop:{...a.crop,width:S,height:E}})},[a.crop,i]),y=A(f=>{l(f);const _=parseInt(f)||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]),w=A(f=>{h(f);const _=parseInt(f)||0;if(_<=0)return;let b=parseInt(r)||0;n&&parseInt(r)>0&&parseInt(d)>0&&(b=Math.round(_*(parseInt(r)/parseInt(d))),l(b.toString())),k(b,_)},[r,d,n,k]);return v("div",{className:"dk-image-editor__crop-controls",children:[v("div",{className:"dk-image-editor__actions",children:[c("button",{className:"dk-image-editor__preset-btn",onClick:()=>p({name:"Original"}),children:c(Dt,{size:14})}),c("select",{className:"dk-image-editor__preset-select",onChange:f=>{const _=t.find(b=>b.name===f.target.value);_&&p(_)},defaultValue:"",children:t.map(f=>c("option",{value:f.name,children:f.name},f.name))}),c("button",{onClick:()=>m(Wt.NEGATIVE_QUARTER_TURN),children:"-90\xB0"}),c("button",{onClick:()=>m(Wt.QUARTER_TURN),children:"+90\xB0"}),c("button",{onClick:()=>x("X"),children:"\u21C4"}),c("button",{onClick:()=>x("Y"),children:"\u21C5"}),v("div",{className:"dk-image-editor__size-inputs desktop-only",children:[c("input",{type:"number",value:r,onChange:f=>y(f.target.value),min:"1",placeholder:"W"}),c("button",{className:`dk-image-editor__lock-btn ${n?"locked":""}`,onClick:()=>s(!n),title:o(n?"crop.unlock.ratio":"crop.lock.ratio"),children:n?c(_e,{size:14}):c(Se,{size:14})}),c("input",{type:"number",value:d,onChange:f=>w(f.target.value),min:"1",placeholder:"H"})]})]}),v("div",{className:"dk-image-editor__rotation-controls desktop-only",children:[c(st,{min:-180,max:180,value:a.rotation||0,onChange:f=>i({rotation:f}),showValue:!0,showLabel:!0,label:o("crop.rotation")}),c(st,{min:.1,max:3,step:.1,value:a.scale||1,onChange:f=>i({scale:f}),showValue:!0,showLabel:!0,label:o("crop.scale")}),c(st,{min:0,max:360,step:5,value:(()=>{const f=a.skewX||0,_=a.skewY||0;if(f===0&&_===0)return 0;const b=Math.atan2(_,f)*180/Math.PI;return b<0?b+360:b})(),onChange:f=>{const _=f;if(_===0)i({skewX:0,skewY:0});else{const b=_*Math.PI/180,M=.5;i({skewX:Math.cos(b)*M,skewY:Math.sin(b)*M})}},showValue:!0,showLabel:!0,label:o("crop.skew")})]})]})};function Te(a,t){let e;return(...i)=>{clearTimeout(e),e=setTimeout(()=>a(...i),t)}}function Fe(a){const t=a.size||a.width||20,e=a.size||a.height||20;return c("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c("path",{d:"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"})})}function Ae(a){const t=a.size||a.width||20,e=a.size||a.height||20;return v("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[c("path",{d:"M6.13 1L6 16a2 2 0 002 2h15"}),c("path",{d:"M1 6.13L16 6a2 2 0 012 2v15"})]})}function ze(a){const t=a.size||a.width||20,e=a.size||a.height||20;return c("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c("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 Re(a){const t=a.size||a.width||20,e=a.size||a.height||20;return v("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[c("line",{x1:"4",y1:"21",x2:"4",y2:"14"}),c("line",{x1:"4",y1:"10",x2:"4",y2:"3"}),c("line",{x1:"12",y1:"21",x2:"12",y2:"12"}),c("line",{x1:"12",y1:"8",x2:"12",y2:"3"}),c("line",{x1:"20",y1:"21",x2:"20",y2:"16"}),c("line",{x1:"20",y1:"12",x2:"20",y2:"3"}),c("line",{x1:"1",y1:"14",x2:"7",y2:"14"}),c("line",{x1:"9",y1:"8",x2:"15",y2:"8"}),c("line",{x1:"17",y1:"16",x2:"23",y2:"16"})]})}const De=({size:a=16,className:t=""})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[c("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}),c("rect",{x:"7",y:"7",width:"10",height:"10"})]});function Ne(a){const t=a.size||a.width||20,e=a.size||a.height||20;return c("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c("path",{d:"M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"})})}function Pe(a){const t=a.size||a.width||20,e=a.size||a.height||20;return v("svg",{...a,width:t,height:e,className:a.className,style:a.style,viewBox:"0 0 1024 1024",fill:"currentColor",children:[c("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"}),c("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 Be={select:{name:"Select",icon:c(Ne,{})},crop:{name:"Crop",icon:c(Ae,{})},finetune:{name:"Finetune",icon:c(Re,{})},filter:{name:"Filter",icon:c(ze,{})},annotate:{name:"Annotate",icon:c(Fe,{})},sticker:{name:"Sticker",icon:c(Pe,{})},frame:{name:"Frame",icon:c(De,{})},"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}"}},Le=[[void 0,"Original"],[1,"1:1"],[4/3,"4:3"],[16/9,"16:9"],[3/2,"3:2"]],Oe=[["sharpie","Draw"],["line","Line"],["arrow","Arrow"],["rectangle","Rectangle"],["ellipse","Ellipse"],["text","Text"]],Ue=[["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"]],$e=[["brightness","Brightness"],["contrast","Contrast"],["saturation","Saturation"],["exposure","Exposure"],["gamma","Gamma"],["vignette","Vignette"]],We=[["none","None"],["solidSharp","Mat"],["solidRound","Bevel"],["lineSingle","Line"],["lineMultiple","Zebra"],["edgeCross","Lumber"],["edgeSeparate","Inset"],["edgeOverlap","Plus"],["hook","Hook"],["polaroid","Polaroid"]],V={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"}},je=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[c("circle",{cx:"12",cy:"12",r:"4",fill:t}),c("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:t,strokeWidth:"2",strokeLinecap:"round"})]}),Xe=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[c("circle",{cx:"12",cy:"12",r:"9",stroke:t,strokeWidth:"2"}),c("path",{d:"M12 3a9 9 0 0 1 0 18z",fill:t})]}),Ye=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[c("circle",{cx:"12",cy:"12",r:"9",stroke:t,strokeWidth:"2"}),c("path",{d:"M8 8h8M8 12h8M8 16h4",stroke:t,strokeWidth:"2",strokeLinecap:"round"}),c("path",{d:"M16 16l2-2M18 18l-2-2",stroke:t,strokeWidth:"2",strokeLinecap:"round"})]}),Ge=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[c("path",{d:"M3 21h18l-9-18z",stroke:t,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),c("path",{d:"M12 3v18",stroke:t,strokeWidth:"2",strokeLinecap:"round"}),c("path",{d:"M7.5 15h9",stroke:t,strokeWidth:"2",strokeLinecap:"round"})]}),Ve=({size:a=16,color:t="currentColor"})=>c("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:c("path",{d:"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z",fill:t})}),Ze=({size:a=16,color:t="currentColor"})=>v("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[c("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",stroke:t,strokeWidth:"2"}),c("circle",{cx:"12",cy:"12",r:"6",fill:"none",stroke:t,strokeWidth:"2",strokeDasharray:"2 2"}),c("circle",{cx:"12",cy:"12",r:"3",fill:t})]}),He=({editorState:a,selectedFinetuneOption:t,finetuneOptions:e,editorRef:i,onStateChange:o,setSelectedFinetuneOption:n})=>{const{t:s}=B(),{FINETUNE_SHORTCUTS:r}=V,l=P(()=>new Map(e),[e]),d=P(()=>Te(()=>i.current?.render(),Rt.RENDER),[i]),h=A(m=>{o({[t]:m}),d()},[t,o,d]),u=A(()=>{const m={};e.forEach(([x])=>{m[x]=0}),o(m),d()},[e,o,d]),g=a?.[t]||0,p=s(`finetune.${t}`)||l.get(t)||"Brightness";return v("div",{className:"dk-image-editor__finetune-controls",children:[c(st,{min:ut.FINETUNE.min,max:ut.FINETUNE.max,value:g,onChange:h,showValue:!0,showLabel:!0,label:p}),v("div",{className:"dk-image-editor__finetune-options",children:[c("button",{className:"dk-image-editor__finetune-option",onClick:u,title:s("finetune.reset"),children:c(Dt,{size:14})}),e.map(([m,x])=>{const k=()=>{switch(m){case"brightness":return c(je,{size:14});case"contrast":return c(Xe,{size:14});case"saturation":return c(Ve,{size:14});case"exposure":return c(Ye,{size:14});case"gamma":return c(Ge,{size:14});case"vignette":return c(Ze,{size:14});default:return r[m]||m.substring(0,2).toUpperCase()}};return c("button",{className:`dk-image-editor__finetune-option ${t===m?"dk-image-editor__finetune-option--active":""}`,onClick:()=>n(m),title:s(`finetune.${m}`),children:k()},m)})]})]})},Ke=({size:a=16,width:t,height:e,style:i})=>v("svg",{width:t||a,height:e||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:[c("line",{x1:"7",y1:"17",x2:"17",y2:"7"}),c("polyline",{points:"7,7 17,7 17,17"})]}),qe=({size:a=16,width:t,height:e,style:i})=>c("svg",{width:t||a,height:e||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:c("path",{d:"M3 17c3-3 6-6 9-3s6 6 9 3"})}),Qe=({size:a=16,width:t,height:e,style:i})=>c("svg",{width:t||a,height:e||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:c("circle",{cx:"12",cy:"12",r:"10"})}),Je=({size:a=16,width:t,height:e,style:i})=>c("svg",{width:t||a,height:e||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:c("line",{x1:"7",y1:"17",x2:"17",y2:"7"})}),ti=({size:a=16,width:t,height:e,style:i})=>c("svg",{width:t||a,height:e||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:c("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"})}),ei=({size:a=16,width:t,height:e,style:i})=>v("svg",{width:t||a,height:e||a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:i,children:[c("polyline",{points:"4,7 4,4 20,4 20,7"}),c("line",{x1:"9",y1:"20",x2:"15",y2:"20"}),c("line",{x1:"12",y1:"4",x2:"12",y2:"20"})]}),Nt=(a,t,e,i)=>({id:"",type:a,x:0,y:0,color:t,strokeWidth:e,fontSize:a==="text"?i:void 0,fillColor:a==="rectangle"||a==="ellipse"?"transparent":void 0,strokeColor:a!=="text"?t:void 0}),pt=(a,t,e,i={})=>a?{...a,[t]:e}:{...Nt("rectangle","#000000",2),...i,[t]:e},nt=ve(({value:a,onChange:t,title:e})=>{const i=A(n=>{n.preventDefault(),n.currentTarget.querySelector('input[type="color"]')?.click()},[]),o=A(n=>{n.stopPropagation(),t(n.target.value)},[t]);return c("button",{className:"dk-image-editor__color-button",onClick:i,children:c("div",{className:"dk-image-editor__color-picker",children:c("input",{type:"color",value:a,onChange:o,title:e,onClick:n=>{console.log("\u{1F3A8} Color input clicked"),n.stopPropagation()}})})})});nt.displayName="ColorPicker";const ii=({currentAnnotation:a,lastAnnotateColor:t,annotateTools:e,setCurrentAnnotation:i,setLastAnnotateColor:o})=>{const{t:n}=B(),{DEFAULT_STROKE_WIDTH:s,DEFAULT_FONT_SIZE:r}=V;Y(()=>{a||i(Nt("sharpie",t,s,r))},[a,t,i,s,r]);const l=A(k=>{if(o(k),a){const y=pt(a,"color",k);i(pt(y,"strokeColor",k))}},[a,i,o]),d=A(k=>{i(pt(a,"strokeWidth",k,{color:t}))},[a,t,i]),h=A(k=>{i(pt(a,"fontSize",k))},[a,i]),u=A(k=>{i(pt(a,"fillColor",k))},[a,i]),g=A(k=>{i(pt(a,"strokeColor",k))},[a,i]),p=A(k=>{i(Nt(k,t,a?.strokeWidth||s,a?.fontSize||r))},[a,t,i,s,r]),m=a?.type==="text"?c(st,{min:ut.FONT_SIZE.min,max:ut.FONT_SIZE.max,value:a.fontSize||r,onChange:h,showValue:!0,showLabel:!0,label:`${n("annotate.size")}:`,width:"150px"}):null,x=a?.type==="rectangle"||a?.type==="ellipse"?c(W,{children:v("div",{className:"dk-image-editor__color-box",children:[v("label",{children:[n("annotate.fill"),": "]}),c(nt,{value:a.fillColor||"#000000",onChange:u,title:"Fill Color"}),a.fillColor&&a.fillColor!=="transparent"&&c("button",{onClick:()=>u("transparent"),className:"dk-image-editor__clear-fill",title:n("annotate.clear.fill"),children:"\u2715"})]})}):null;return v("div",{className:"dk-image-editor__annotate-controls",children:[v("div",{className:"dk-image-editor__annotate-settings",children:[a?.type==="text"?v("div",{className:"dk-image-editor__color-box",children:[v("label",{children:[n("annotate.color"),": "]}),c(nt,{value:t,onChange:l,title:n("toolbar.text.color")})]}):v("div",{className:"dk-image-editor__color-box",children:[v("label",{children:[n("annotate.stroke"),": "]}),c(nt,{value:a?.strokeColor||t,onChange:g,title:n("toolbar.stroke.color")})]}),x,a?.type!=="text"&&c(st,{min:ut.STROKE_WIDTH.min,max:ut.STROKE_WIDTH.max,value:a?.strokeWidth||s,onChange:d,showValue:!0,showLabel:!0,label:`${n("annotate.width")}:`,width:"150px"}),m]}),c("div",{className:"dk-image-editor__toolbar dk-image-editor__annotate-toolbar",children:e.map(([k,y])=>{const w=()=>{switch(k){case"sharpie":return c(qe,{size:16});case"line":return c(Je,{size:16});case"arrow":return c(Ke,{size:16});case"rectangle":return c(ti,{size:16});case"ellipse":return c(Qe,{size:16});case"text":return c(ei,{size:16});default:return null}};return v("button",{onClick:()=>p(k),className:`dk-image-editor__tool-button ${a?.type===k?"dk-image-editor__unified-button--active":""}`,children:[w(),c("span",{className:"desktop-only",children:n(`annotate.${k}`)})]},k)})})]})};function Pt(...a){const t=[];for(const e of a)if(e){if(typeof e=="string"||typeof e=="number")t.push(String(e));else if(Array.isArray(e)){const i=Pt(...e);i&&t.push(i)}else if(typeof e=="object")for(const i in e)e[i]&&t.push(i)}return t.join(" ")}const oi=({editorRef:a,stickerPluginRef:t,selectionPluginRef:e,imagePluginRef:i,zoomLevel:o,setHasSelection:n,currentSticker:s,setCurrentSticker:r})=>{const{t:l}=B(),{EMOJI_LIST:d}=V,[h,u]=j("faces"),[g,p]=j(new Set),m=P(()=>["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"],[]),x=P(()=>({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]);Y(()=>{if(!s){const w=x.faces[0]??"\u{1F600}";r({content:w,type:"emoji"})}},[s,r,x.faces]);const k=A(w=>{w&&i.current&&i.current.addImageFromFile(w)},[i]),y=A((w,f="emoji")=>{r({content:w,type:f})},[r]);return v("div",{className:"dk-image-editor__sticker-controls",children:[c("div",{className:"d-flex align-items-center gap-2 dk-image-editor__sticker-category",children:Object.keys(x).map(w=>c("button",{className:`dk-image-editor__tool-button ${h===w?"active":""}`,onClick:()=>{u(w);const f=x[w][0];f&&r({content:f,type:w==="stickers"?"image":"emoji"})},children:(()=>{const f=x[w];if(w==="stickers"){const b=f[0];return b?c("img",{src:b,alt:"sticker",style:{width:"16px",height:"16px"}}):null}const _=f[0];return _?c("span",{style:{fontSize:"16px"},children:_}):null})()},w))}),v("div",{className:"dk-image-editor__toolbar",children:[v("label",{className:"dk-image-editor__upload-button",children:[c("input",{type:"file",accept:"image/*",style:{display:"none"},onChange:w=>{const f=w.target.files?.[0];f&&k(f)}}),c("span",{className:"dk-image-editor__upload-icon",children:"+"})]}),x[h].map((w,f)=>{const _=s?.content===w;return c("span",{onClick:()=>y(w,h==="stickers"?"image":"emoji"),className:Pt("dk-image-editor__sticker-button",{"css-loading":g.has(w),"dk-image-editor__unified-button--active":_}),style:{height:h==="stickers"?"auto":""},children:h==="stickers"?c("img",{src:w,alt:"sticker"}):c("span",{children:w})},typeof w=="string"?w:f)})]})]})};var ni='.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)}}';Mt(ni);const ai=a=>{const t=a.data;for(let e=0;e<t.length;e+=4){const i=t[e]??0,o=t[e+1]??0,n=t[e+2]??0,s=.393*i+.769*o+.189*n,r=.349*i+.686*o+.168*n,l=.272*i+.534*o+.131*n;t[e]=Math.min(255,s*1.2+25),t[e+1]=Math.min(255,r*1.1+15),t[e+2]=Math.min(255,l*.9+5)}return console.log("imageData",a),a},ri=a=>{const t=a.data;for(let e=0;e<t.length;e+=4){const i=t[e]??0,o=t[e+1]??0,n=t[e+2]??0,s=2.5,r=259*(s+255)/(255*(259-s));let l=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*l+.587*d+.114*h,g=1.8;l=Math.max(0,Math.min(255,u+g*(l-u))),d=Math.max(0,Math.min(255,u+g*(d-u))),h=Math.max(0,Math.min(255,u+g*(h-u))),.299*l+.587*d+.114*h<128?(l*=.7,d*=.7,h*=.7):(l=Math.min(255,l*1.3),d=Math.min(255,d*1.3),h=Math.min(255,h*1.3)),t[e]=l,t[e+1]=d,t[e+2]=h}return a},si=a=>{const t=a.data;for(let e=0;e<t.length;e+=4){const i=t[e]??0,o=t[e+1]??0,n=t[e+2]??0,s=1.6,r=.299*i+.587*o+.114*n;t[e]=Math.max(0,Math.min(255,r+s*(i-r))),t[e+1]=Math.max(0,Math.min(255,r+s*(o-r))),t[e+2]=Math.max(0,Math.min(255,r+s*(n-r)))}return a},li=a=>{const t=a.data;for(let e=0;e<t.length;e+=4){const i=t[e]??0,o=t[e+1]??0,n=t[e+2]??0,s=.299*i+.587*o+.114*n,r=s>128?Math.min(255,s*1.3):Math.max(0,s*.7);t[e]=r,t[e+1]=r,t[e+2]=r}return a},ci=a=>{const t=a.data;for(let e=0;e<t.length;e+=4){const i=t[e]??0,o=t[e+1]??0,n=t[e+2]??0;t[e]=Math.min(255,i*1.3+40),t[e+1]=Math.min(255,o*1.1+25),t[e+2]=Math.max(0,n*.6)}return a},di=a=>{const t=a.data;for(let e=0;e<t.length;e+=4){const i=t[e]??0,o=t[e+1]??0,n=t[e+2]??0;t[e]=Math.max(0,i*.7),t[e+1]=Math.min(255,o*1.2+20),t[e+2]=Math.min(255,n*1.4+30)}return a},hi={chrome:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("rect",{width:"40",height:"40",fill:"#FFFFFF",rx:"8"}),c("rect",{x:"6",y:"8",width:"28",height:"12",fill:"#1966FF",rx:"2"}),c("rect",{x:"10",y:"16",width:"24",height:"16",fill:"#00C87F",rx:"2"}),c("text",{x:"20",y:"26",textAnchor:"middle",fill:"#FFFFFF",fontSize:"8",fontWeight:"bold",children:"HD"})]}),fade:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"fade-grad",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[c("stop",{offset:"0%",stopColor:"#333333",stopOpacity:"1"}),c("stop",{offset:"50%",stopColor:"#666666",stopOpacity:"0.6"}),c("stop",{offset:"100%",stopColor:"#cccccc",stopOpacity:"0.2"})]})}),c("rect",{width:"40",height:"40",fill:"#f5f5f5",rx:"6"}),c("rect",{x:"5",y:"15",width:"30",height:"10",fill:"url(#fade-grad)",rx:"2"})]}),cold:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"cold-grad",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[c("stop",{offset:"0%",stopColor:"#e6f7ff"}),c("stop",{offset:"50%",stopColor:"#91d5ff"}),c("stop",{offset:"100%",stopColor:"#40a9ff"})]})}),c("rect",{width:"40",height:"40",fill:"url(#cold-grad)",rx:"4"}),c("path",{d:"M20 8 L24 16 L20 24 L16 16 Z",fill:"#fff",opacity:"0.7"}),c("path",{d:"M8 20 L16 24 L24 20 L16 16 Z",fill:"#fff",opacity:"0.5"})]}),warm:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("radialGradient",{id:"warm-grad",children:[c("stop",{offset:"0%",stopColor:"#fff7e6"}),c("stop",{offset:"50%",stopColor:"#ffd591"}),c("stop",{offset:"100%",stopColor:"#fa8c16"})]})}),c("rect",{width:"40",height:"40",fill:"url(#warm-grad)",rx:"4"}),c("circle",{cx:"20",cy:"15",r:"6",fill:"#ffec3d",opacity:"0.8"}),c("path",{d:"M20 21 Q15 25 10 30 Q20 28 20 21",fill:"#ff7a45",opacity:"0.6"}),c("path",{d:"M20 21 Q25 25 30 30 Q20 28 20 21",fill:"#ff7a45",opacity:"0.6"})]}),monoDefault:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("rect",{width:"40",height:"40",fill:"#f0f0f0"}),c("rect",{width:"20",height:"40",fill:"#333"}),c("rect",{x:"10",y:"10",width:"20",height:"20",fill:"#666"}),c("rect",{x:"15",y:"15",width:"10",height:"10",fill:"#999"})]}),sepiaDefault:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"sepia-grad",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[c("stop",{offset:"0%",stopColor:"#f4e4bc"}),c("stop",{offset:"50%",stopColor:"#d2b48c"}),c("stop",{offset:"100%",stopColor:"#8b7355"})]})}),c("rect",{width:"40",height:"40",fill:"url(#sepia-grad)",rx:"4"}),c("circle",{cx:"12",cy:"12",r:"4",fill:"#deb887",opacity:"0.8"}),c("circle",{cx:"28",cy:"28",r:"6",fill:"#cd853f",opacity:"0.6"})]}),blur:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:c("filter",{id:"blur-effect",children:c("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"2"})})}),c("rect",{width:"40",height:"40",fill:"#f0f8ff"}),c("circle",{cx:"15",cy:"15",r:"8",fill:"#4169e1",filter:"url(#blur-effect)",opacity:"0.7"}),c("circle",{cx:"25",cy:"25",r:"6",fill:"#1e90ff",filter:"url(#blur-effect)",opacity:"0.5"})]}),sharpen:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("rect",{width:"40",height:"40",fill:"#fafafa"}),c("polygon",{points:"20,5 30,20 20,35 10,20",fill:"#ff4d4f",stroke:"#fff",strokeWidth:"2"}),c("polygon",{points:"20,10 25,20 20,30 15,20",fill:"#fff",opacity:"0.8"})]}),emboss:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"emboss-grad",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[c("stop",{offset:"0%",stopColor:"#ffffff"}),c("stop",{offset:"50%",stopColor:"#cccccc"}),c("stop",{offset:"100%",stopColor:"#666666"})]})}),c("rect",{width:"40",height:"40",fill:"#e8e8e8"}),c("rect",{x:"8",y:"8",width:"24",height:"24",fill:"url(#emboss-grad)",rx:"2"}),c("rect",{x:"10",y:"10",width:"20",height:"20",fill:"none",stroke:"#999",strokeWidth:"1"})]}),oil:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("rect",{width:"40",height:"40",fill:"#2c3e50"}),c("circle",{cx:"12",cy:"15",r:"5",fill:"#e74c3c",opacity:"0.8"}),c("circle",{cx:"28",cy:"12",r:"4",fill:"#f39c12",opacity:"0.7"}),c("circle",{cx:"25",cy:"28",r:"6",fill:"#3498db",opacity:"0.6"}),c("circle",{cx:"15",cy:"30",r:"3",fill:"#2ecc71",opacity:"0.9"}),c("path",{d:"M10 25 Q20 20 30 25 Q25 30 15 28",fill:"#9b59b6",opacity:"0.5"})]}),vintage:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("radialGradient",{id:"vintage-grad",children:[c("stop",{offset:"0%",stopColor:"#f5e6d3"}),c("stop",{offset:"70%",stopColor:"#d4a574"}),c("stop",{offset:"100%",stopColor:"#8b6914"})]})}),c("rect",{width:"40",height:"40",fill:"url(#vintage-grad)",rx:"6"}),c("circle",{cx:"20",cy:"20",r:"12",fill:"none",stroke:"#8b6914",strokeWidth:"2",opacity:"0.6"}),c("rect",{x:"16",y:"8",width:"8",height:"4",fill:"#8b6914",opacity:"0.8"})]}),dramatic:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"dramatic-grad",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[c("stop",{offset:"0%",stopColor:"#000000"}),c("stop",{offset:"50%",stopColor:"#666666"}),c("stop",{offset:"100%",stopColor:"#ffffff"})]})}),c("rect",{width:"40",height:"40",fill:"url(#dramatic-grad)"}),c("polygon",{points:"20,8 28,20 20,32 12,20",fill:"#fff",opacity:"0.3"})]}),vivid:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("radialGradient",{id:"vivid-grad",children:[c("stop",{offset:"0%",stopColor:"#ff6b6b"}),c("stop",{offset:"33%",stopColor:"#4ecdc4"}),c("stop",{offset:"66%",stopColor:"#45b7d1"}),c("stop",{offset:"100%",stopColor:"#96ceb4"})]})}),c("rect",{width:"40",height:"40",fill:"url(#vivid-grad)",rx:"8"}),c("circle",{cx:"15",cy:"15",r:"4",fill:"#fff",opacity:"0.4"}),c("circle",{cx:"25",cy:"25",r:"3",fill:"#fff",opacity:"0.6"})]}),noir:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("rect",{width:"40",height:"40",fill:"#1a1a1a"}),c("rect",{x:"5",y:"15",width:"30",height:"2",fill:"#ffffff"}),c("rect",{x:"5",y:"23",width:"30",height:"2",fill:"#cccccc"}),c("circle",{cx:"12",cy:"12",r:"3",fill:"#ffffff"}),c("circle",{cx:"28",cy:"28",r:"4",fill:"#888888"}),c("rect",{x:"18",y:"18",width:"4",height:"4",fill:"#ffffff"})]}),sunset:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"sunset-grad",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[c("stop",{offset:"0%",stopColor:"#ff9a56"}),c("stop",{offset:"50%",stopColor:"#ff6b35"}),c("stop",{offset:"100%",stopColor:"#f7931e"})]})}),c("rect",{width:"40",height:"40",fill:"url(#sunset-grad)",rx:"4"}),c("circle",{cx:"20",cy:"12",r:"6",fill:"#fff59d",opacity:"0.9"}),c("ellipse",{cx:"20",cy:"32",rx:"15",ry:"4",fill:"#ff5722",opacity:"0.6"}),c("path",{d:"M5 25 Q20 20 35 25",stroke:"#ffcc02",strokeWidth:"2",fill:"none",opacity:"0.8"})]}),ocean:v("svg",{width:"40",height:"40",viewBox:"0 0 40 40",children:[c("defs",{children:v("linearGradient",{id:"ocean-grad",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[c("stop",{offset:"0%",stopColor:"#87ceeb"}),c("stop",{offset:"50%",stopColor:"#4682b4"}),c("stop",{offset:"100%",stopColor:"#191970"})]})}),c("rect",{width:"40",height:"40",fill:"url(#ocean-grad)",rx:"4"}),c("path",{d:"M0 30 Q10 25 20 30 T40 30 V40 H0 Z",fill:"#1e88e5",opacity:"0.7"}),c("path",{d:"M0 35 Q15 32 30 35 T40 35 V40 H0 Z",fill:"#0d47a1",opacity:"0.5"}),c("circle",{cx:"30",cy:"10",r:"2",fill:"#ffffff",opacity:"0.8"})]})},ui=({filterId:a,name:t,isActive:e,onClick:i,isLoading:o=!1,filterType:n="toggle",clickCount:s})=>v("button",{className:Pt("dk-image-editor__filter-preview",`dk-image-editor__filter-preview--${n}`,{"dk-image-editor__unified-button--active":e,"dk-image-editor__filter-preview--loading":o,"css-loading":o}),onClick:i,disabled:o,children:[c("div",{className:"dk-image-editor__filter-icon",children:hi[a]||c("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",fontSize:"24px"},children:"\u{1F3A8}"})}),v("span",{className:"dk-image-editor__filter-name",children:[t,n==="apply"&&s!==void 0&&s>0&&c("span",{className:"dk-filter-count",children:s})]})]}),gi=({editorState:a,filters:t,editorRef:e,filterCounts:i,onStateChange:o,setFilterCounts:n,applyAdvancedFilter:s})=>{const{t:r}=B(),[l,d]=j(null),[h,u]=j("basic"),g=P(()=>({toggle:["chrome","fade","cold","warm","monoDefault","sepiaDefault","blur"],apply:["sharpen","emboss","oil","vintage","dramatic","vivid","noir","sunset","ocean"]}),[]),{toggle:p,apply:m}=g,x=A(S=>S.name==="Original"||S.id==="original"?(o({filter:null}),setTimeout(()=>e.current?.render(),Rt.FILTER_RESET),!0):!1,[o,e]),k=A((S,E)=>{switch(E){case"vintage":return ai(S);case"dramatic":return ri(S);case"vivid":return si(S);case"noir":return li(S);case"sunset":return ci(S);case"ocean":return di(S);default:return S}},[]),y=A(async S=>{if(!e.current)return;let E=e.current.getImageData();if(E){for(const[C,T]of Object.entries(i))if(C!==S&&T>0&&m.includes(C))for(let F=0;F<T;F++)["sharpen","emboss","oil"].includes(C)?E=await s(E,C):E=k(E,C);e.current.setImageData(E)}},[i,n,m,s,k,e]),w=A(S=>{const E=a?.filter===S;o({filter:E?null:S}),setTimeout(()=>e.current?.render(),Rt.FILTER_RESET)},[a?.filter,o,e]),f=A(async S=>{const E=i[S.id]||0,C=E>=3?0:E+1,T={...i,[S.id]:C};if(n(T),E>=3){const F=(a?.appliedFilters||[]).filter(D=>D.type!==S.id);o({appliedFilters:F}),e.current&&(e.current.resetToOriginal(),await y(S.id));return}d(S.id);try{if(!e.current)return;const F=e.current.getImageData();if(!F)return;let D;if(["sharpen","emboss","oil"].includes(S.id))try{await new Promise(O=>setTimeout(O,100)),D=await s(F,S.id)}catch(O){console.error(`Failed to apply ${S.id} filter:`,O);return}else D=k(F,S.id);e.current.setImageData(D);const K=[...a?.appliedFilters||[],{type:S.id,value:1}];o({appliedFilters:K})}finally{d(null)}},[i,n,a?.appliedFilters,o,e,s,k,y]),_=A(async S=>{x(S)||(p.includes(S.id)?w(S.id):m.includes(S.id)&&await f(S))},[x,p,m,w,f]),b=P(()=>{const S=t.filter(T=>p.includes(T.id)),E=t.filter(T=>["vintage","dramatic","vivid","noir","sunset","ocean"].includes(T.id)),C=t.filter(T=>["sharpen","emboss","oil"].includes(T.id));return{reset:[],all:t.filter(T=>T.name!=="Original"&&T.id!=="original"),basic:S,artistic:E,enhance:C}},[t,p]),M=A(()=>{o({filter:null,appliedFilters:[]}),n({}),e.current&&e.current.resetToOriginal?.()},[o,n,e]),I=A(()=>b[h]||[],[b,h]);return v("div",{className:"dk-image-editor__filter-controls",children:[v("div",{className:"d-flex align-items-center gap-2 mb-2",children:[(a?.filter||Object.values(i).some(S=>S>0