pixedi 1.0.6 → 1.2.0

package/dist/lib/index.js

@@ -1,10 +1,33 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.btn{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding-left:8px;padding-right:8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}.btn:disabled{pointer-events:none;opacity:.5}.btn:active{transform:translateY(1px)}.btn svg{flex-shrink:0;width:16px;height:16px}.btn-default{background-color:var(--primary);color:var(--primary-foreground)}.btn-default:hover{opacity:.9}.btn-outline{border-color:var(--border);background-color:var(--background);color:var(--foreground)}.btn-outline:hover{background-color:var(--secondary)}.btn-ghost{color:var(--foreground);padding-left:8px;padding-right:8px}.btn-ghost:hover{background-color:var(--secondary)}.btn-rect{width:32px;height:32px}.btn-crop{border:1px solid var(--border);background-color:var(--background);color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;font-family:inherit;font-size:12px;transition:all .2s;display:inline-flex}.btn-crop:hover:not([aria-pressed=true]){background-color:var(--secondary)}.btn-crop[aria-pressed=true]{border-color:var(--accent-blue);background-color:var(--accent-blue-light);color:var(--foreground)}.btn-crop svg{flex-shrink:0;width:20px;height:20px}.btn-crop span{white-space:nowrap}.separator{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}.separator[data-orientation=horizontal]{width:100%;height:1px}.separator[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}.select-wrapper{box-sizing:border-box;width:100%;position:relative}.select-trigger{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding-left:10px;padding-right:8px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}.select-trigger:hover,.select-trigger:focus{border-color:var(--muted-foreground)}.select-trigger-arrow{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}.select-wrapper[data-state=open] .select-trigger-arrow{transform:rotate(180deg)}.select-content{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.select-content::-webkit-scrollbar{width:4px}.select-content::-webkit-scrollbar-track{background:0 0}.select-content::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}.select-wrapper[data-state=closed] .select-content{display:none}.select-group-label{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}.select-item{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}.select-item:hover{background-color:var(--secondary)}.select-item-left{font-size:14px;font-weight:400}.select-item-addon{align-items:center;gap:8px;display:flex}.select-item-addon>span{color:var(--muted-foreground);font-size:12px}.select-item-addon>svg{font-size:14px}.select-item-addon>b{flex-shrink:0;width:16px;height:16px}.select-item-right-container{align-items:center;gap:8px;display:flex}.select-item-right{color:var(--muted-foreground);font-size:14px}.select-item-check{width:16px;height:16px;color:var(--foreground);flex-shrink:0}.input{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding-left:8px;padding-right:8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}.input:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}.input:focus{box-shadow:0 0 0 1px var(--ring)}.input:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}.input::placeholder{color:var(--muted-foreground);opacity:1}.input-number-clean::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-number-clean::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-number-clean[type=number]{-moz-appearance:textfield}.input-pixel-container{position:relative}.input-pixel-legend{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding-left:4px;padding-right:4px;font-size:12px;position:absolute;top:-9px}.input-pixel-suffix{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}.header{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:48px;padding-left:8px;padding-right:8px;display:flex}.header-tools{gap:8px;display:flex}.header-history{align-items:center;gap:8px;display:flex}.header-history-text{color:var(--muted-foreground);font-size:14px}.crop-image{width:100%;height:100%;position:absolute;inset:0}.crop-box{cursor:move;position:absolute}.crop-tools{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;height:36px;padding-left:12px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.crop-tools-info{min-width:54px;margin-top:-2px;display:inline-block}.crop-tools-info-label{color:var(--muted-foreground);font-size:12px;line-height:12px}.crop-tools-info-value{font-size:14px;line-height:14px}.crop-b{background-color:var(--accent-blue);position:absolute}.crop-b-t{cursor:ns-resize;width:100%;height:2px;top:0;left:0}.crop-b-r{cursor:ew-resize;width:2px;height:100%;top:0;right:0}.crop-b-b{cursor:ns-resize;width:100%;height:2px;bottom:0;left:0;transform:translateY(1px)}.crop-b-l{cursor:ew-resize;width:2px;height:100%;top:0;left:-1px;transform:translate(1px)}.crop-l-box{pointer-events:none;position:absolute;inset:2px}.crop-l{border:1px dashed var(--color-white);opacity:.5;position:absolute}.crop-l-v{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}.crop-l-h{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}.crop-ps{box-sizing:border-box;border:1px solid var(--accent-blue);background-color:var(--overlay-bg-white);border-radius:50%;width:12px;height:12px;position:absolute}.crop-ps-tl{cursor:nwse-resize;top:-5px;left:-5px}.crop-ps-t{cursor:ns-resize;top:-5px;left:50%;transform:translate(-50%)}.crop-ps-tr{cursor:nesw-resize;top:-5px;right:-5px}.crop-ps-r{cursor:ew-resize;top:50%;right:-5px;transform:translateY(-50%)}.crop-ps-br{cursor:nwse-resize;bottom:-5px;right:-5px}.crop-ps-b{cursor:ns-resize;bottom:-5px;left:50%;transform:translate(-50%)}.crop-ps-bl{cursor:nesw-resize;bottom:-5px;left:-5px}.crop-ps-l{cursor:ew-resize;top:50%;left:-5px;transform:translateY(-50%)}.crop-p-b{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}.crop-p-p{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}.frame{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;min-height:0;padding:16px;display:flex;position:relative;overflow:hidden}.frame--faded{background-color:#00000080}.frame-preview{-webkit-user-select:none;user-select:none;flex-shrink:1;width:auto;min-width:0;max-width:100%;height:auto;min-height:0;max-height:100%;transition:transform .2s;display:block;position:relative}.frame-image{object-fit:contain;width:100%;height:100%}.frame-image--faded{opacity:.4}.resize{background-color:var(--background);border-radius:4px;flex-direction:column;padding:16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}.resize-text{text-align:center;color:var(--muted-foreground);font-size:14px}.resize-border{border-bottom:1px solid var(--border);width:60px;margin:12px auto 4px;display:inline-block}.resize-tools{align-items:center;gap:6px;margin-top:16px;display:flex}.resize-tools-lock{width:12px;height:12px;color:var(--muted-foreground)}.resize-tools-buttons{margin-left:4px;display:flex}.resize-tools-save{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}.resize-tools-close{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}.sidebar{z-index:10;width:0;transition:transform .15s ease-out;position:relative}@media (width>=768px){.sidebar{width:320px;transition:none}}.sidebar-settings{border-radius:50%;width:40px;height:40px;position:absolute;top:8px;right:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@media (width>=768px){.sidebar-settings{display:none}}.sidebar-container{box-sizing:border-box;border-left:1px solid var(--border);position:absolute;inset:0}.sidebar-content{background-color:var(--background);box-sizing:border-box;flex-direction:column;width:320px;height:100%;padding:16px;display:flex;position:absolute;top:0;left:0;overflow-y:auto}@media (width<=767px){.sidebar-content{padding-top:48px}}.sidebar-close-btn{position:absolute;top:8px;right:8px}.sidebar-separator{margin-top:20px;margin-bottom:12px}.sidebar-resize{justify-content:space-between;align-items:center;display:flex}.sidebar-resize-icon{align-items:center;gap:8px;display:flex}.sidebar-resize-size{color:var(--muted-foreground);font-size:14px}.sidebar-crop{flex-direction:column;gap:8px;display:flex}.sidebar-crop-ratios{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sidebar-preset{flex-direction:column;gap:8px;display:flex}.picedi{font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--color-white:#fff;--color-black:#000;--color-transparent:transparent;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--destructive:oklch(57.7% .245 27.325);--success:oklch(76.8% .188 151.716);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:4px;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent)}:host([data-theme=dark]) .picedi,[data-theme=dark] .picedi,[data-theme=dark].picedi{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}.picedi h1,.picedi h2,.picedi h3,.picedi h4,.picedi h5,.picedi h6{margin:0;font-weight:600}.text-red{color:var(--color-red)}.bg-red{background-color:var(--color-red)}.bg-green{background-color:var(--color-green)}.text-green{color:var(--color-green)}.mask{background-color:var(--overlay-bg)}.semibold{letter-spacing:.4px;font-weight:600}.bold{letter-spacing:.4px;font-weight:700}.sys{width:100%;height:100%;color:var(--muted-foreground);justify-content:center;align-items:center;display:flex;position:relative}.main{background-color:var(--background);grid-template-rows:auto 1fr;height:100%;display:grid;overflow:hidden}.grid{grid-template-columns:1fr auto;min-height:0;display:grid;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._button_snd36_1{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:8px;height:32px;padding:0 8px;font-family:inherit;font-size:14px;font-weight:500;transition:background-color .2s,border-color .2s,opacity .2s;display:inline-flex}._button_snd36_1:disabled{pointer-events:none;opacity:.5}._button_snd36_1 svg{flex-shrink:0;width:16px;height:16px}._default_snd36_32{background-color:var(--primary);color:var(--primary-foreground)}._default_snd36_32:hover{opacity:.9}._outline_snd36_39{border-color:var(--border);background-color:var(--background);color:var(--foreground)}._outline_snd36_39:hover{background-color:var(--secondary)}._ghost_snd36_47{color:var(--foreground);padding:0 8px}._ghost_snd36_47:hover{background-color:var(--secondary)}._rect_snd36_54{width:32px;height:32px}:host{height:100%;display:block}:host *{box-sizing:border-box}._root_kw2xl_8{width:100%;height:100%;font-size:16px;font-family:var(--font-sans);--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, Helvetica, Arial, sans-serif;--color-white:#fff;--color-white-fade:color-mix(in srgb, var(--color-white) 30%, transparent);--color-black:#000;--color-transparent:transparent;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(75.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--accent-blue:oklch(60.9% .221 251.687);--accent-blue-light:oklch(96% .02 250);--accent-blue-fade:color-mix(in srgb, var(--accent-blue) 60%, transparent);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 50%, transparent);--overlay-bg-white:color-mix(in srgb, var(--color-white) 80%, transparent);position:relative}._root_kw2xl_8[data-theme=dark]{--background:oklch(24.5% 0 0);--foreground:oklch(78.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(24.5% 0 0);--muted-foreground:oklch(50% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--accent-blue-light:oklch(25% .06 250);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--overlay-bg:color-mix(in srgb, var(--color-black) 75%, transparent)}._root_kw2xl_8 h1,._root_kw2xl_8 h2,._root_kw2xl_8 h3,._root_kw2xl_8 h4,._root_kw2xl_8 h5,._root_kw2xl_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_kw2xl_73{color:var(--color-red)}._bgRed_kw2xl_76{background-color:var(--color-red)}._bgGreen_kw2xl_79{background-color:var(--color-green)}._textGreen_kw2xl_82{color:var(--color-green)}._mask_kw2xl_85{background-color:var(--overlay-bg)}._semibold_kw2xl_88{letter-spacing:.4px;font-weight:600}._bold_kw2xl_92{letter-spacing:.4px;font-weight:700}._system_kw2xl_96{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_kw2xl_105{width:100%;height:100%;min-height:480px;position:relative}._main_kw2xl_111{background-color:var(--background);grid-template-rows:auto 1fr;display:grid;position:absolute;inset:0;overflow:hidden}._grid_kw2xl_119{grid-template-columns:1fr auto;min-height:0;display:grid;position:relative;overflow:hidden}._button_gf7m5_1{border:1px solid var(--border);background-color:var(--background);color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;font-family:inherit;font-size:12px;transition:all .2s;display:inline-flex}._button_gf7m5_1:hover:not([aria-pressed=true]){background-color:var(--secondary)}._button_gf7m5_1[aria-pressed=true]{border-color:var(--accent-blue);background-color:var(--accent-blue-light);color:var(--foreground)}._button_gf7m5_1 svg{flex-shrink:0;width:20px;height:20px}._button_gf7m5_1 span{white-space:nowrap}._separator_rqskq_1{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}._separator_rqskq_1[data-orientation=horizontal]{width:100%;height:1px}._separator_rqskq_1[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}._wrapper_12rgt_1{box-sizing:border-box;width:100%;position:relative}._trigger_12rgt_6{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--border);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;justify-content:space-between;align-items:center;padding:0 8px 0 10px;font-family:inherit;font-size:14px;transition:border-color .2s;display:flex}._trigger_12rgt_6:hover,._trigger_12rgt_6:focus{border-color:var(--muted-foreground)}._triggerArrow_12rgt_29{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}._wrapper_12rgt_1[data-state=open] ._triggerArrow_12rgt_29{transform:rotate(180deg)}._content_12rgt_38{background-color:var(--background);border:1px solid var(--border);z-index:50;box-sizing:border-box;border-radius:4px;width:100%;max-height:282px;padding:4px;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}._content_12rgt_38::-webkit-scrollbar{width:4px}._content_12rgt_38::-webkit-scrollbar-track{background:0 0}._content_12rgt_38::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}._wrapper_12rgt_1[data-state=closed] ._content_12rgt_38{display:none}._groupLabel_12rgt_68{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}._item_12rgt_75{width:100%;color:var(--foreground);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 10px;display:flex}._item_12rgt_75:hover{background-color:var(--secondary)}._itemLeft_12rgt_91{font-size:14px;font-weight:400}._itemAddon_12rgt_95{align-items:center;gap:8px;display:flex}._itemAddon_12rgt_95>span{color:var(--muted-foreground);font-size:12px}._itemAddon_12rgt_95>svg{font-size:14px}._itemAddon_12rgt_95>b{flex-shrink:0;width:16px;height:16px}._itemRightContainer_12rgt_112{align-items:center;gap:8px;display:flex}._itemRight_12rgt_112{color:var(--muted-foreground);font-size:14px}._itemCheck_12rgt_121{width:16px;height:16px;color:var(--foreground);flex-shrink:0}._input_j55nq_1{width:100%;height:32px;color:var(--foreground);background-color:var(--background);border:1px solid var(--input);box-sizing:border-box;border-radius:4px;outline:none;padding:0 8px;font-family:inherit;font-size:14px;line-height:normal;transition:border-color .2s,box-shadow .2s;display:block}._input_j55nq_1:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}._input_j55nq_1:focus{box-shadow:0 0 0 1px var(--ring)}._input_j55nq_1:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}._input_j55nq_1::placeholder{color:var(--muted-foreground);opacity:1}._numberClean_j55nq_34::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._numberClean_j55nq_34::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._numberClean_j55nq_34[type=number]{-moz-appearance:textfield}._container_14vsv_1{position:relative}._legend_14vsv_4{color:var(--muted-foreground);background:var(--background);margin-left:8px;padding:0 4px;font-size:12px;position:absolute;top:-9px}._suffix_14vsv_13{color:var(--muted-foreground);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:14px;position:absolute;bottom:2px;right:8px}._group_qpue1_1{margin-left:4px;display:flex}._group_qpue1_1 ._save_qpue1_6{width:36px;color:var(--color-green);border-top-right-radius:0;border-bottom-right-radius:0}._group_qpue1_1 ._close_qpue1_13{width:36px;color:var(--color-red);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._sliderContainer_1ntcm_1{cursor:pointer;touch-action:none;--slider-progress:0%;align-items:center;width:100%;height:24px;display:flex;position:relative}._sliderContainer_1ntcm_1._disabled_1ntcm_12{pointer-events:none;cursor:not-allowed;opacity:.5}._sliderTrack_1ntcm_18{background-color:color-mix(in oklch, var(--muted-foreground) 65%, transparent);border-radius:2px;width:100%;height:2px;position:relative}._sliderRange_1ntcm_30{background-color:var(--primary);height:100%;width:var(--slider-progress);border-radius:2px;position:absolute}._sliderThumb_1ntcm_38{background-color:var(--background);border:2px solid var(--primary);pointer-events:none;border-radius:50%;width:12px;height:13px;transition:transform .1s,box-shadow .1s;position:absolute;top:50%;transform:translate(-50%,-50%)}._hiddenInput_1ntcm_53{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}._sliderContainer_1ntcm_1:not(._disabled_1ntcm_12):hover ._sliderThumb_1ntcm_38{transform:translate(-50%,-50%)scale(1.1)}._header_msw8l_1{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:48px;padding:0 8px;display:flex}._tools_msw8l_11{gap:8px;display:flex}._history_msw8l_15{align-items:center;gap:8px;display:flex}._historyText_msw8l_20{color:var(--muted-foreground);font-size:14px}._resize_11cwi_1{background-color:var(--background);border-radius:4px;flex-direction:column;gap:2px;padding:8px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._slider_11cwi_14{width:80%;margin:0 auto -4px}._border_11cwi_18{border-bottom:1px solid var(--border);width:60px;margin:12px auto 4px;display:inline-block}._tools_11cwi_24{align-items:center;gap:6px;margin-top:16px;display:flex}._toolsLock_11cwi_30{width:12px;height:12px;color:var(--muted-foreground)}._preview_dvanl_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._rotate_dvanl_12{box-sizing:border-box;width:100%;height:100%;transition:all .2s linear;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}._flip_dvanl_24{box-sizing:border-box;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._image_dvanl_32{max-width:none;max-height:none;transition:all .2s linear;display:block;position:absolute}._wrapper_13nh3_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._box_13nh3_9{cursor:move;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;border:1px solid var(--color-white-fade);position:absolute}._tools_13nh3_18{background-color:var(--background);box-sizing:border-box;border:1px solid var(--border);border-radius:4px;align-items:center;padding:4px 4px 4px 8px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}._toolsInfo_13nh3_34{-webkit-user-select:none;user-select:none;min-width:54px;margin-top:-2px;display:inline-block}._toolsInfoLabel_13nh3_41{color:var(--muted-foreground);font-size:12px;line-height:12px}._toolsInfoValue_13nh3_46{color:var(--foreground);font-size:14px;line-height:14px}._linesBox_13nh3_51{pointer-events:none;position:absolute;inset:2px}._line_13nh3_51{border:1px dashed var(--color-white);opacity:.5;position:absolute}._lineV_13nh3_61{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}._lineH_13nh3_69{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}._pointer_13nh3_77{box-sizing:border-box;width:14px;height:14px;position:absolute}._pointerTopLeft_13nh3_83{border-top:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nwse-resize;top:-6px;left:-6px}._pointerTopRight_13nh3_90{border-top:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nesw-resize;top:-6px;right:-6px}._pointerBottomRight_13nh3_97{border-bottom:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nwse-resize;bottom:-6px;right:-6px}._pointerBottomLeft_13nh3_104{border-bottom:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nesw-resize;bottom:-6px;left:-6px}._mobileBorder_13nh3_111{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}._mobilePointer_13nh3_117{background-color:var(--overlay-bg-white);border:3px solid var(--accent-blue);box-sizing:border-box;border-radius:50%;width:32px;height:32px;position:absolute;bottom:-16px;right:-16px}._flip_17ic5_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._btnH_17ic5_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_17ic5_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._rotate_gkt07_1{background-color:var(--background);border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._btnH_gkt07_14{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_gkt07_20{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._frame_xffug_1{box-sizing:border-box;width:100%;height:100%;margin:0 auto;padding:16px;position:relative}._sidebar_8qtha_1{z-index:10;width:0;transition:transform .15s ease-out;position:relative}@media (width>=768px){._sidebar_8qtha_1{width:320px;transition:none}}._settings_8qtha_11{border-radius:50%;width:40px;height:40px;position:absolute;top:8px;right:8px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@media (width>=768px){._settings_8qtha_11{display:none}}._container_8qtha_25{box-sizing:border-box;border-left:1px solid var(--border);position:absolute;inset:0}._content_8qtha_31{background-color:var(--background);box-sizing:border-box;flex-direction:column;width:320px;height:100%;padding:16px;display:flex;position:absolute;top:0;left:0;overflow-y:auto}@media (width<=767px){._content_8qtha_31{padding-top:48px}}._closeBtn_8qtha_47{position:absolute;top:8px;right:8px}._separator_8qtha_52{margin-top:20px;margin-bottom:12px}._resize_8qtha_56{justify-content:space-between;align-items:center;display:flex}._resizeIcon_8qtha_61{align-items:center;gap:8px;display:flex}._resizeSize_8qtha_66{color:var(--muted-foreground);font-size:14px}._crop_8qtha_70{flex-direction:column;gap:8px;display:flex}._ratio_8qtha_75{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}._sidebarPreset_8qtha_80{flex-direction:column;gap:8px;display:flex}._flipRotate_8qtha_85{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+import { createContext as e, forwardRef as t, useContext as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 //#region \0rolldown/runtime.js
-var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+var c = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), l = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), d = /* @__PURE__ */ l(((e) => {
+}), u = {
+	quality: .85,
+	saveAsWEBP: !1,
+	exportAs: "blob"
+}, d = (e, t, n, r, i, a, o) => ({
+	history: {
+		pointer: 0,
+		items: [{
+			width: t,
+			height: n,
+			action: {
+				name: "initial",
+				args: null
+			}
+		}]
+	},
+	currentAction: null,
+	previewUrl: i,
+	originalBlob: r,
+	mimeType: e,
+	sidebar: !1,
+	settings: o,
+	isAlpha: a
+}), f = e(void 0), p = /* @__PURE__ */ c(((e) => {
 	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
 	function r(e, n, r) {
 		var i = null;
@@ -19,19 +42,19 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		};
 	}
 	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), f = /* @__PURE__ */ l(((e) => {
+})), m = /* @__PURE__ */ c(((e) => {
 	process.env.NODE_ENV !== "production" && (function() {
 		function t(e) {
 			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === O ? null : e.displayName || e.name || null;
+			if (typeof e == "function") return e.$$typeof === ne ? null : e.displayName || e.name || null;
 			if (typeof e == "string") return e;
 			switch (e) {
 				case v: return "Fragment";
 				case b: return "Profiler";
 				case y: return "StrictMode";
 				case w: return "Suspense";
-				case T: return "SuspenseList";
-				case ee: return "Activity";
+				case ee: return "SuspenseList";
+				case te: return "Activity";
 			}
 			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
 				case _: return "Portal";
@@ -40,8 +63,8 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				case C:
 					var n = e.render;
 					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
-				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
-				case D:
+				case T: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case E:
 					n = e._payload, e = e._init;
 					try {
 						return t(e(n));
@@ -67,7 +90,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function i(e) {
 			if (e === v) return "<>";
-			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			if (typeof e == "object" && e && e.$$typeof === E) return "<...>";
 			try {
 				var n = t(e);
 				return n ? "<" + n + ">" : "<...>";
@@ -76,14 +99,14 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			}
 		}
 		function a() {
-			var e = k.A;
+			var e = D.A;
 			return e === null ? null : e.getOwner();
 		}
 		function o() {
 			return Error("react-stack-top-frame");
 		}
 		function s(e) {
-			if (A.call(e, "key")) {
+			if (re.call(e, "key")) {
 				var t = Object.getOwnPropertyDescriptor(e, "key").get;
 				if (t && t.isReactWarning) return !1;
 			}
@@ -91,16 +114,16 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function c(e, t) {
 			function n() {
-				N || (N = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+				ae || (ae = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
 			}
 			n.isReactWarning = !0, Object.defineProperty(e, "key", {
 				get: n,
 				configurable: !0
 			});
 		}
-		function l() {
+		function u() {
 			var e = t(this.type);
-			return P[e] || (P[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+			return oe[e] || (oe[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
 		}
 		function d(e, t, n, r, i, a) {
 			var o = n.ref;
@@ -115,7 +138,7 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				value: null
 			}) : Object.defineProperty(e, "ref", {
 				enumerable: !1,
-				get: l
+				get: u
 			}), e._store = {}, Object.defineProperty(e._store, "validated", {
 				configurable: !1,
 				enumerable: !1,
@@ -140,103 +163,54 @@ var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		}
 		function f(e, n, i, o, l, u) {
 			var f = n.children;
-			if (f !== void 0) if (o) if (j(f)) {
+			if (f !== void 0) if (o) if (ie(f)) {
 				for (o = 0; o < f.length; o++) p(f[o]);
 				Object.freeze && Object.freeze(f);
 			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
 			else p(f);
-			if (A.call(n, "key")) {
+			if (re.call(n, "key")) {
 				f = t(e);
 				var m = Object.keys(n).filter(function(e) {
 					return e !== "key";
 				});
-				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", L[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), L[f + o] = !0);
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", k[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), k[f + o] = !0);
 			}
 			if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
 			else i = n;
 			return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), l, u);
 		}
 		function p(e) {
-			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === E && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
 		}
 		function m(e) {
 			return typeof e == "object" && !!e && e.$$typeof === g;
 		}
-		var h = u("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), O = Symbol.for("react.client.reference"), k = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, j = Array.isArray, M = console.createTask ? console.createTask : function() {
+		var h = l("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), D = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, re = Object.prototype.hasOwnProperty, ie = Array.isArray, O = console.createTask ? console.createTask : function() {
 			return null;
 		};
 		h = { react_stack_bottom_frame: function(e) {
 			return e();
 		} };
-		var N, P = {}, F = h.react_stack_bottom_frame.bind(h, o)(), I = M(i(o)), L = {};
+		var ae, oe = {}, se = h.react_stack_bottom_frame.bind(h, o)(), ce = O(i(o)), k = {};
 		e.Fragment = v, e.jsx = function(e, t, n) {
-			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : F, r ? M(i(e)) : I);
+			var r = 1e4 > D.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : se, r ? O(i(e)) : ce);
 		}, e.jsxs = function(e, t, n) {
-			var r = 1e4 > k.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : F, r ? M(i(e)) : I);
+			var r = 1e4 > D.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : se, r ? O(i(e)) : ce);
 		};
 	})();
-})), p = (/* @__PURE__ */ l(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = d() : t.exports = f();
-})))();
-function m({ size: e = 36, className: t, style: n, color: r = "currentColor" }) {
-	return /* @__PURE__ */ (0, p.jsxs)("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		x: "0px",
-		y: "0px",
-		viewBox: "0 0 80 80",
-		width: e,
-		height: e,
-		fill: r,
-		className: t,
-		style: n,
-		children: [/* @__PURE__ */ (0, p.jsx)("path", {
-			d: "M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1\n		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1\n		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1\n		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5\n		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1\n		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9\n		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9\n		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2\n		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9\n		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1\n		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7\n		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1\n		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z",
-			children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
-				attributeType: "xml",
-				attributeName: "transform",
-				type: "rotate",
-				from: "0 40 40",
-				to: "360 40 40",
-				dur: "0.8s",
-				repeatCount: "indefinite"
-			})
-		}), /* @__PURE__ */ (0, p.jsx)("path", {
-			fill: "currentColor",
-			d: "M62,40.1c0,0,0,0.2-0.1,0.7c0,0.2,0,0.5-0.1,0.8c0,0.2,0,0.3,0,0.5c0,0.2-0.1,0.4-0.1,0.7\n		c-0.1,0.5-0.2,1-0.3,1.6c-0.2,0.5-0.3,1.1-0.5,1.8c-0.2,0.6-0.5,1.3-0.7,1.9c-0.3,0.7-0.7,1.3-1,2.1c-0.4,0.7-0.9,1.4-1.4,2.1\n		c-0.5,0.7-1.1,1.4-1.7,2c-1.2,1.3-2.7,2.5-4.4,3.6c-1.7,1-3.6,1.8-5.5,2.4c-2,0.5-4,0.7-6.2,0.7c-1.9-0.1-4.1-0.4-6-1.1\n		c-1.9-0.7-3.7-1.5-5.2-2.6c-1.5-1.1-2.9-2.3-4-3.7c-0.6-0.6-1-1.4-1.5-2c-0.4-0.7-0.8-1.4-1.2-2c-0.3-0.7-0.6-1.3-0.8-2\n		c-0.2-0.6-0.4-1.2-0.6-1.8c-0.1-0.6-0.3-1.1-0.4-1.6c-0.1-0.5-0.1-1-0.2-1.4c-0.1-0.9-0.1-1.5-0.1-2c0-0.5,0-0.7,0-0.7\n		s0,0.2,0.1,0.7c0.1,0.5,0,1.1,0.2,2c0.1,0.4,0.2,0.9,0.3,1.4c0.1,0.5,0.3,1,0.5,1.6c0.2,0.6,0.4,1.1,0.7,1.8\n		c0.3,0.6,0.6,1.2,0.9,1.9c0.4,0.6,0.8,1.3,1.2,1.9c0.5,0.6,1,1.3,1.6,1.8c1.1,1.2,2.5,2.3,4,3.2c1.5,0.9,3.2,1.6,5,2.1\n		c1.8,0.5,3.6,0.6,5.6,0.6c1.8-0.1,3.7-0.4,5.4-1c1.7-0.6,3.3-1.4,4.7-2.4c1.4-1,2.6-2.1,3.6-3.3c0.5-0.6,0.9-1.2,1.3-1.8\n		c0.4-0.6,0.7-1.2,1-1.8c0.3-0.6,0.6-1.2,0.8-1.8c0.2-0.6,0.4-1.1,0.5-1.7c0.1-0.5,0.2-1,0.3-1.5c0.1-0.4,0.1-0.8,0.1-1.2\n		c0-0.2,0-0.4,0.1-0.5c0-0.2,0-0.4,0-0.5c0-0.3,0-0.6,0-0.8c0-0.5,0-0.7,0-0.7c0-1.1,0.9-2,2-2s2,0.9,2,2C62,40,62,40.1,62,40.1z",
-			children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
-				attributeType: "xml",
-				attributeName: "transform",
-				type: "rotate",
-				from: "0 40 40",
-				to: "-360 40 40",
-				dur: "0.6s",
-				repeatCount: "indefinite"
-			})
-		})]
-	});
-}
-//#endregion
-//#region src/shared/components/ImageEditor/provider/initialState.ts
-var h = (e, t, n, r) => ({
-	history: {
-		pointer: 0,
-		items: [{
-			name: "Initial",
-			base64: r,
-			width: t,
-			height: n
-		}]
-	},
-	currentAction: null,
-	extension: e,
-	sidebar: !1
-}), g = e(void 0), _ = ({ children: e, base64: t, width: n, height: r, ext: i }) => {
-	let [a, o] = c(h(i, n, r, t)), s = () => a.currentAction, l = (e) => o((t) => ({
+})), h = (/* @__PURE__ */ c(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = p() : t.exports = m();
+})))(), g = ({ children: e, mimeType: t, width: n, height: i, originalBlob: c, previewUrl: l, isAlpha: u, settings: p }) => {
+	let [m, g] = s(d(t, n, i, c, l, u, p)), _ = o(null);
+	r(() => () => {
+		_.current &&= (URL.revokeObjectURL(_.current), null);
+	}, []);
+	let v = (e) => g((t) => ({
 		...t,
 		currentAction: e
-	})), u = (e) => o((t) => {
+	})), y = (e) => g((t) => {
 		let n = t.history.pointer + 1, r = [...t.history.items.slice(0, n), e];
 		return {
 			...t,
@@ -246,195 +220,136 @@ var h = (e, t, n, r) => ({
 				pointer: n
 			}
 		};
-	}), d = () => a.history.items.at(a.history.pointer), f = () => o((e) => ({
-		...e,
-		history: h(i, n, r, t).history
-	})), m = () => o((e) => {
-		let t = e.history.items.at(e.history.pointer);
-		return {
-			...e,
-			history: {
-				items: [t],
-				pointer: 0
+	}), b = () => {
+		let { items: e, pointer: t } = m.history;
+		return e.at(t) ?? e.at(0) ?? {
+			width: 0,
+			height: 0,
+			action: {
+				name: "initial",
+				args: null
 			}
 		};
-	}), _ = () => o((e) => e.history.pointer <= 0 ? e : {
+	}, x = () => {
+		let { items: e, pointer: t } = m.history;
+		if (e.length === 0 || t < 0) return 0;
+		let n = e.slice(0, t + 1).findLast((e) => e.action.name === "rotate");
+		return n?.action.name === "rotate" ? n.action.args.degrees : 0;
+	}, S = () => g((e) => ({
+		...e,
+		history: {
+			items: [e.history.items[0]],
+			pointer: 0
+		}
+	})), C = () => g((e) => e.history.pointer <= 0 ? e : {
 		...e,
 		history: {
 			...e.history,
 			pointer: e.history.pointer - 1
 		}
-	}), v = () => o((e) => e.history.pointer >= e.history.items.length - 1 ? e : {
+	}), w = () => g((e) => e.history.pointer >= e.history.items.length - 1 ? e : {
 		...e,
 		history: {
 			...e.history,
 			pointer: e.history.pointer + 1
 		}
-	}), y = () => a.sidebar, b = (e) => o((t) => ({
+	}), ee = (e) => g((t) => ({
 		...t,
 		sidebar: e
-	}));
-	return /* @__PURE__ */ (0, p.jsx)(g, {
+	})), T = a(() => new EventTarget(), []), E = (e) => {
+		_.current && URL.revokeObjectURL(_.current), _.current = URL.createObjectURL(e.previewBlob), g(d(e.mimeType, e.width, e.height, e.newBlob, _.current, e.isAlpha, p));
+	};
+	return /* @__PURE__ */ (0, h.jsx)(f, {
 		value: {
-			...a,
-			getCurrentAction: s,
-			setCurrentAction: l,
-			addToHistory: u,
-			resetHistory: f,
-			resetHistoryAfterSave: m,
-			undo: _,
-			redo: v,
-			getLastHistoryItem: d,
-			getSidebar: y,
-			setSidebar: b
+			...m,
+			setImage: E,
+			setCurrentAction: v,
+			getLastHistoryItem: b,
+			getLastRotation: x,
+			addToHistory: y,
+			resetHistory: S,
+			undo: C,
+			redo: w,
+			setSidebar: ee,
+			eventBus: T
 		},
 		children: e
 	});
-}, v = {
-	"image/jpeg": "jpg",
-	"image/jpg": "jpg",
-	"image/png": "png",
-	"image/gif": "gif",
-	"image/webp": "webp"
-}, y = (e) => {
-	let [t, n] = c({
+}, _ = "(function(){let e=async e=>{let{width:t,height:n}=e,r=Math.min(1,1920/Math.max(t,n)),i=Math.round(t*r),a=Math.round(n*r),o=new OffscreenCanvas(i,a),s=o.getContext(`2d`);if(!s)throw Error(`Failed to get 2D context for preview canvas`);return s.drawImage(e,0,0,i,a),o.convertToBlob({type:`image/webp`,quality:.85})};function t(e){let t=new OffscreenCanvas(e.width,e.height),n=t.getContext(`2d`);if(!n)throw Error(`Failed to create 2D context for canvas.`);n.drawImage(e,0,0);try{let e=n.getImageData(0,0,t.width,t.height).data;for(let t=3;t<e.length;t+=4)if(e[t]<255)return!0;return!1}catch(e){throw Error(`Error reading pixels: ${e}`,{cause:e})}}self.onmessage=async n=>{let r=``;try{let i;if(n.data instanceof Blob)i=n.data;else{let e=n.data.trim();!e.startsWith(`http://`)&&!e.startsWith(`https://`)&&!e.startsWith(`blob:`)&&!e.startsWith(`data:`)&&(r=`image/png`,e=`data:${r};base64,${e}`);let t=await fetch(e);if(!t.ok)throw Error(`HTTP error! Status: ${t.status}`);i=await t.blob()}let a=i.type||r||`image/unknown`,o=await createImageBitmap(i),{width:s,height:c}=o,l=await e(o),u=t(o);o.close(),self.postMessage({success:!0,originalBlob:i,previewBlob:l,mimeType:a,width:s,height:c,isAlpha:u})}catch(e){self.postMessage({success:!1,error:e instanceof Error?e.message:`An error occurred during image loader worker execution.`})}}})();", v = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", _], { type: "text/javascript;charset=utf-8" });
+function y(e) {
+	let t;
+	try {
+		if (t = v && (self.URL || self.webkitURL).createObjectURL(v), !t) throw "";
+		let n = new Worker(t, { name: e?.name });
+		return n.addEventListener("error", () => {
+			(self.URL || self.webkitURL).revokeObjectURL(t);
+		}), n;
+	} catch {
+		return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(_), { name: e?.name });
+	}
+}
+//#endregion
+//#region src/shared/components/Pixedi/hooks/useImageLoader.tsx
+var b = (e) => {
+	let [t, n] = s({
 		loading: !0,
-		error: null,
+		error: "",
 		width: 0,
 		height: 0,
-		extension: null,
-		base64: null
-	});
-	return i(() => {
-		let t = !0;
-		return (async () => {
-			try {
-				let r = await fetch(e);
-				if (!r.ok) throw Error(`HTTP error! Status: ${r.status}`);
-				let i = (r.headers.get("content-type") || "").split(";")[0].toLowerCase().trim(), a = i.startsWith("image/"), o = v[i] || "unknown";
-				if (!a) {
-					t && n((e) => ({
-						...e,
-						loading: !1,
-						error: "The requested resource is not a valid image.",
-						extension: o
-					}));
-					return;
-				}
-				let s = await r.blob(), c = await new Promise((e, t) => {
-					let n = new FileReader();
-					n.onloadend = () => e(n.result), n.onerror = () => t(/* @__PURE__ */ Error("Failed to read image data stream")), n.readAsDataURL(s);
-				}), l = await new Promise((e, t) => {
-					let n = new Image();
-					n.src = c, n.onload = () => e({
-						width: n.naturalWidth,
-						height: n.naturalHeight
-					}), n.onerror = () => t(/* @__PURE__ */ Error("Failed to parse image dimensions"));
-				});
-				t && n({
-					loading: !1,
-					error: null,
-					width: l.width,
-					height: l.height,
-					extension: o,
-					base64: c
-				});
-			} catch (e) {
-				t && n((t) => ({
-					...t,
-					loading: !1,
-					error: e instanceof Error ? e.message : "An error occurred during extraction."
-				}));
-			}
-		})(), () => {
-			t = !1;
+		mimeType: "",
+		originalBlob: null,
+		previewUrl: "",
+		isAlpha: !1
+	}), i = o(null);
+	return r(() => {
+		if (!e) return;
+		let t = new y();
+		return t.postMessage(e), t.onmessage = (e) => {
+			let t = e.data;
+			t.success ? (i.current && URL.revokeObjectURL(i.current), i.current = URL.createObjectURL(t.previewBlob), n({
+				loading: !1,
+				error: "",
+				mimeType: t.mimeType,
+				width: t.width,
+				height: t.height,
+				originalBlob: t.originalBlob,
+				previewUrl: i.current,
+				isAlpha: t.isAlpha
+			})) : n((e) => ({
+				...e,
+				loading: !1,
+				error: t.error || "Error processing image."
+			}));
+		}, () => {
+			t.terminate(), i.current &&= (URL.revokeObjectURL(i.current), null);
 		};
 	}, [e]), t;
-}, b = () => {
-	let e = s(null), t = n((e) => {
-		let t = e.match(/^data:(image\/[a-zA-Z+.-]+);base64,(.+)$/);
-		if (!t) throw Error("Invalid Base64 image format");
-		let n = t[1], r = t[2];
-		return n === "image/gif" && (n = "image/png"), {
-			mimeType: n,
-			rawData: r
-		};
-	}, []), r = n(async (e) => {
-		let { mimeType: n, rawData: r } = t(e), i = atob(r), a = new Uint8Array(i.length);
-		for (let e = 0; e < i.length; e++) a[e] = i.charCodeAt(e);
-		let o = new Blob([a], { type: n });
-		return {
-			bitmap: await createImageBitmap(o),
-			mimeType: n
-		};
-	}, [t]), i = n((t) => {
-		e.current ||= document.createElement("canvas");
-		let n = e.current, r = t === "image/png" || t === "image/webp";
-		return {
-			canvas: n,
-			ctx: n.getContext("2d", { alpha: r })
-		};
-	}, []), a = n((e, t) => t === "image/jpeg" || t === "image/webp" ? e.toDataURL(t, .85) : e.toDataURL(t), []);
-	return {
-		resize: n(async (e, t, n) => {
-			let { bitmap: o, mimeType: s } = await r(e), { canvas: c, ctx: l } = i(s);
-			return c.width = t, c.height = n, l && (l.clearRect(0, 0, t, n), l.drawImage(o, 0, 0, t, n)), o.close(), a(c, s);
-		}, [
-			r,
-			i,
-			a
-		]),
-		crop: n(async (e, t, n, o, s) => {
-			let { bitmap: c, mimeType: l } = await r(e), { canvas: u, ctx: d } = i(l);
-			return u.width = o, u.height = s, d && (d.clearRect(0, 0, o, s), d.drawImage(c, t, n, o, s, 0, 0, o, s)), c.close(), a(u, l);
-		}, [
-			r,
-			i,
-			a
-		]),
-		flip: n(async (e, t, n) => {
-			let { bitmap: o, mimeType: s } = await r(e), { canvas: c, ctx: l } = i(s);
-			return c.width = o.width, c.height = o.height, l && (l.clearRect(0, 0, c.width, c.height), l.save(), l.translate(t ? o.width : 0, n ? o.height : 0), l.scale(t ? -1 : 1, n ? -1 : 1), l.drawImage(o, 0, 0), l.restore()), o.close(), a(c, s);
-		}, [
-			r,
-			i,
-			a
-		]),
-		rotate: n(async (e, t) => {
-			let { bitmap: n, mimeType: o } = await r(e), { canvas: s, ctx: c } = i(o);
-			return s.width = n.width, s.height = n.height, c && (c.clearRect(0, 0, s.width, s.height), c.save(), c.translate(n.width / 2, n.height / 2), c.rotate(t * Math.PI / 180), c.drawImage(n, -n.width / 2, -n.height / 2), c.restore()), n.close(), a(s, o);
-		}, [
-			r,
-			i,
-			a
-		]),
-		filter: n(async (e, t) => {
-			let { bitmap: n, mimeType: o } = await r(e), { canvas: s, ctx: c } = i(o);
-			return s.width = n.width, s.height = n.height, c && (c.filter = Object.entries(t).map(([e, t]) => `${e}(${t}%)`).join(" "), c.drawImage(n, 0, 0)), n.close(), a(s, o);
-		}, [
-			r,
-			i,
-			a
-		])
-	};
 }, x = () => {
 	if (typeof window > "u" || !window.navigator) return null;
 	let e = window.navigator.userAgent.toLowerCase();
 	return /android/.test(e) ? "android" : /iphone|ipad|ipod/.test(e) ? "ios" : /windows phone/.test(e) ? "windows-phone" : /blackberry|bb10/.test(e) ? "blackberry" : /opera mini/.test(e) ? "opera-mini" : /mobile/.test(e) ? "mobile" : null;
 }, S = () => {
-	let [e] = c(() => x());
+	let [e] = s(() => x());
 	return e;
 }, C = {
 	sm: 640,
 	md: 768,
 	lg: 1024,
 	xl: 1280
+}, w = {
+	INITIAL: "initial",
+	RESIZE: "resize",
+	CROP: "crop",
+	PRESET_CROP: "presetCrop",
+	FLIP: "flip",
+	ROTATE: "rotate",
+	FILTERS: "filters"
 };
 //#endregion
-//#region src/shared/components/ImageEditor/hooks/useBellow.tsx
-function w(e) {
-	let [t, n] = c(() => window.innerWidth < C[e]);
-	return i(() => {
+//#region src/shared/components/Pixedi/hooks/useBellow.tsx
+function ee(e) {
+	let [t, n] = s(() => window.innerWidth < C[e]);
+	return r(() => {
 		function t() {
 			n(window.innerWidth < C[e]);
 		}
@@ -442,7 +357,7 @@ function w(e) {
 	}, [e]), t;
 }
 //#endregion
-//#region src/shared/components/ImageEditor/assets/icons.tsx
+//#region src/shared/components/Pixedi/assets/icons.tsx
 var T = {
 	xmlns: "http://w3.org",
 	width: "24",
@@ -453,58 +368,58 @@ var T = {
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, E = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+}, E = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
 	...T,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("path", { d: "M20 6 9 17l-5-5" })
-}), D = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	children: /* @__PURE__ */ (0, h.jsx)("path", { d: "M20 6 9 17l-5-5" })
+}), te = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "m6 6 12 12" })]
-}), ee = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "m6 6 12 12" })]
+}), ne = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("rect", {
+	children: [/* @__PURE__ */ (0, h.jsx)("rect", {
 		width: "18",
 		height: "11",
 		x: "3",
 		y: "11",
 		rx: "2",
 		ry: "2"
-	}), /* @__PURE__ */ (0, p.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
-}), O = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	}), /* @__PURE__ */ (0, h.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+}), D = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M19 12H5" })]
-}), k = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M19 12H5" })]
+}), re = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
 	...T,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("path", { d: "m6 9 6 6 6-6" })
-}), A = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	children: /* @__PURE__ */ (0, h.jsx)("path", { d: "m6 9 6 6 6-6" })
+}), ie = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
-}), j = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
+}), O = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
-}), M = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
+}), ae = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), /* @__PURE__ */ (0, p.jsx)("circle", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), /* @__PURE__ */ (0, h.jsx)("circle", {
 		cx: "12",
 		cy: "12",
 		r: "3"
 	})]
-}), N = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+}), oe = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: [/* @__PURE__ */ (0, p.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, p.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
-}), P = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
+}), se = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [
-		/* @__PURE__ */ (0, p.jsx)("rect", {
+		/* @__PURE__ */ (0, h.jsx)("rect", {
 			width: "18",
 			height: "18",
 			x: "3",
@@ -512,32 +427,32 @@ var T = {
 			rx: "2",
 			ry: "2"
 		}),
-		/* @__PURE__ */ (0, p.jsx)("circle", {
+		/* @__PURE__ */ (0, h.jsx)("circle", {
 			cx: "9",
 			cy: "9",
 			r: "2"
 		}),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 	]
-}), F = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+}), ce = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
 	...T,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("rect", {
+	children: /* @__PURE__ */ (0, h.jsx)("rect", {
 		width: "18",
 		height: "18",
 		x: "3",
 		y: "3",
 		rx: "2"
 	})
-}), I = (e) => /* @__PURE__ */ (0, p.jsxs)("svg", {
+}), k = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
 	children: [
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-		/* @__PURE__ */ (0, p.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
-		/* @__PURE__ */ (0, p.jsx)("rect", {
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
+		/* @__PURE__ */ (0, h.jsx)("rect", {
 			width: "10",
 			height: "8",
 			x: "7",
@@ -545,12 +460,42 @@ var T = {
 			rx: "1"
 		})
 	]
-}), L = (e) => /* @__PURE__ */ (0, p.jsx)("svg", {
+}), le = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+	...T,
+	...e,
+	children: [
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M12 20v2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M12 14v2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M12 8v2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M12 2v2" })
+	]
+}), ue = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+	...T,
+	...e,
+	children: [
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M4 12H2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M10 12H8" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M16 12h-2" }),
+		/* @__PURE__ */ (0, h.jsx)("path", { d: "M22 12h-2" })
+	]
+}), de = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
+	...T,
+	...e,
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M21 3v5h-5" })]
+}), fe = (e) => /* @__PURE__ */ (0, h.jsxs)("svg", {
 	...T,
 	...e,
-	children: /* @__PURE__ */ (0, p.jsx)("path", {
+	children: [/* @__PURE__ */ (0, h.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ (0, h.jsx)("path", { d: "M3 3v5h5" })]
+}), A = (e) => /* @__PURE__ */ (0, h.jsx)("svg", {
+	...T,
+	...e,
+	children: /* @__PURE__ */ (0, h.jsx)("path", {
 		d: "M21 12a9 9 0 1 1-6.219-8.56",
-		children: /* @__PURE__ */ (0, p.jsx)("animateTransform", {
+		children: /* @__PURE__ */ (0, h.jsx)("animateTransform", {
 			attributeType: "xml",
 			attributeName: "transform",
 			type: "rotate",
@@ -560,256 +505,327 @@ var T = {
 			repeatCount: "indefinite"
 		})
 	})
-}), R = () => {
-	let e = r(g);
-	if (!e) throw Error("useImageEditorContext must be used within an ImageEditorProvider");
+}), j = () => {
+	let e = n(f);
+	if (!e) throw Error("usePixediContext must be used within an PixediProvider");
 	return e;
-}, z = t(({ className: e = "", variant: t = "default", children: n, ...r }, i) => /* @__PURE__ */ (0, p.jsx)("button", {
-	ref: i,
-	className: `btn ${`btn-${t}`} ${e}`.trim(),
-	...r,
+}, M = {
+	button: "_button_snd36_1",
+	default: "_default_snd36_32",
+	outline: "_outline_snd36_39",
+	ghost: "_ghost_snd36_47",
+	rect: "_rect_snd36_54"
+}, N = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, h.jsx)("button", {
+	ref: r,
+	className: `${M.button} ${M[t]} ${e}`.trim(),
+	...i,
 	children: n
-})), B = t(({ className: e = "", active: t = !1, icon: n, label: r, ...i }, a) => /* @__PURE__ */ (0, p.jsxs)("button", {
-	ref: a,
+}), P = {
+	root: "_root_kw2xl_8",
+	textRed: "_textRed_kw2xl_73",
+	bgRed: "_bgRed_kw2xl_76",
+	bgGreen: "_bgGreen_kw2xl_79",
+	textGreen: "_textGreen_kw2xl_82",
+	mask: "_mask_kw2xl_85",
+	semibold: "_semibold_kw2xl_88",
+	bold: "_bold_kw2xl_92",
+	system: "_system_kw2xl_96",
+	wrapper: "_wrapper_kw2xl_105",
+	main: "_main_kw2xl_111",
+	grid: "_grid_kw2xl_119"
+}, pe = { button: "_button_gf7m5_1" }, me = ({ className: e = "", active: t = !1, icon: n, label: r, ref: i, ...a }) => /* @__PURE__ */ (0, h.jsxs)("button", {
+	ref: i,
 	type: "button",
 	"aria-pressed": t,
-	className: `btn-crop ${e}`.trim(),
-	...i,
-	children: [n, /* @__PURE__ */ (0, p.jsx)("span", {
-		className: "semibold",
+	className: `${pe.button} ${e}`.trim(),
+	...a,
+	children: [n, /* @__PURE__ */ (0, h.jsx)("span", {
+		className: P.semibold,
 		children: r
 	})]
-}));
-B.displayName = "ButtonCrop";
-//#endregion
-//#region src/shared/components/ImageEditor/ui/separator/Separator.tsx
-var V = t(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, p.jsx)("hr", {
+}), he = { separator: "_separator_rqskq_1" }, F = t(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, h.jsx)("hr", {
 	ref: r,
 	role: "separator",
 	"aria-orientation": t,
 	"data-orientation": t,
-	className: `separator ${e}`.trim(),
+	className: `${he.separator} ${e}`.trim(),
 	...n
 }));
-V.displayName = "Separator";
-//#endregion
-//#region src/shared/components/ImageEditor/ui/select/Select.tsx
-var te = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: l = "", renderOption: u }) => {
-	let [d, f] = c(!1), m = s(null), h = s(null), g = s(null), _ = o(() => {
+F.displayName = "Separator";
+var I = {
+	wrapper: "_wrapper_12rgt_1",
+	trigger: "_trigger_12rgt_6",
+	triggerArrow: "_triggerArrow_12rgt_29",
+	content: "_content_12rgt_38",
+	groupLabel: "_groupLabel_12rgt_68",
+	item: "_item_12rgt_75",
+	itemLeft: "_itemLeft_12rgt_91",
+	itemAddon: "_itemAddon_12rgt_95",
+	itemRightContainer: "_itemRightContainer_12rgt_112",
+	itemRight: "_itemRight_12rgt_112",
+	itemCheck: "_itemCheck_12rgt_121"
+}, ge = ({ items: e, value: t, onChange: n, placeholder: c = "Select an option", className: l = "", renderOption: u }) => {
+	let [d, f] = s(!1), p = o(null), m = o(null), g = o(null), _ = a(() => {
 		let t = (e) => e.reduce((e, n) => n.options ? [...e, ...t(n.options.map((e) => ({
 			...e,
 			fullName: `${n.label} ${e.label}`
 		})))] : [...e, n], []);
 		return t(e);
 	}, [e]).find((e) => e.value === t);
-	i(() => {
+	r(() => {
 		let e = (e) => {
-			m.current && !m.current.contains(e.target) && f(!1);
+			p.current && !e.composedPath().includes(p.current) && f(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), a(() => {
-		if (!d || !h.current || !g.current) return;
-		let e = m.current?.closest(".picedi.main")?.getBoundingClientRect(), t = h.current.getBoundingClientRect(), n = g.current.getBoundingClientRect(), r = (e?.bottom ?? window.innerHeight) - 16, i = t.bottom + n.height + 4, a = "calc(100% + 4px)";
+	}, []), i(() => {
+		if (!d || !m.current || !g.current) return;
+		let e = p.current?.closest(`.${P.main}`)?.getBoundingClientRect(), t = m.current.getBoundingClientRect(), n = g.current.getBoundingClientRect(), r = (e?.bottom ?? window.innerHeight) - 16, i = t.bottom + n.height + 4, a = "calc(100% + 4px)";
 		i > r && (a = `calc(100% + 4px - ${i - r}px)`), g.current.style.top = a;
 	}, [d, e]);
 	let v = (e) => {
 		n(e), f(!1);
 	};
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		ref: m,
-		className: `select-wrapper ${l}`.trim(),
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		ref: p,
+		className: `${I.wrapper} ${l}`.trim(),
 		"data-state": d ? "open" : "closed",
-		children: [/* @__PURE__ */ (0, p.jsxs)("button", {
-			ref: h,
+		children: [/* @__PURE__ */ (0, h.jsxs)("button", {
+			ref: m,
 			type: "button",
-			className: "select-trigger",
+			className: I.trigger,
 			onClick: () => f(!d),
-			children: [/* @__PURE__ */ (0, p.jsx)("span", { children: _ ? _.fullName : r }), /* @__PURE__ */ (0, p.jsx)(k, { className: "select-trigger-arrow" })]
-		}), /* @__PURE__ */ (0, p.jsx)("div", {
+			children: [/* @__PURE__ */ (0, h.jsx)("span", { children: _ ? _.fullName : c }), /* @__PURE__ */ (0, h.jsx)(re, { className: I.triggerArrow })]
+		}), /* @__PURE__ */ (0, h.jsx)("div", {
 			ref: g,
-			className: "select-content",
-			children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, p.jsxs)("div", { children: [/* @__PURE__ */ (0, p.jsx)("div", {
-				className: "select-group-label semibold",
+			className: I.content,
+			children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, h.jsxs)("div", { children: [/* @__PURE__ */ (0, h.jsx)("div", {
+				className: `${I.groupLabel} ${P.semibold}`,
 				children: e.label
-			}), e.options.map((e) => /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "select-item",
+			}), e.options.map((e) => /* @__PURE__ */ (0, h.jsxs)("div", {
+				className: I.item,
 				onClick: () => v(e.value),
-				children: [u ? u(e) : /* @__PURE__ */ (0, p.jsx)("span", {
-					className: "select-item-left",
+				children: [u ? u(e) : /* @__PURE__ */ (0, h.jsx)("span", {
+					className: I.itemLeft,
 					children: e.label
-				}), /* @__PURE__ */ (0, p.jsxs)("div", {
-					className: "select-item-addon",
+				}), /* @__PURE__ */ (0, h.jsxs)("div", {
+					className: I.itemAddon,
 					children: [
-						e.rightLabel && /* @__PURE__ */ (0, p.jsx)("span", { children: e.rightLabel }),
-						t === e.value && /* @__PURE__ */ (0, p.jsx)(E, { className: "select-item-check" }),
-						t !== e.value && /* @__PURE__ */ (0, p.jsx)("b", {})
+						e.rightLabel && /* @__PURE__ */ (0, h.jsx)("span", { children: e.rightLabel }),
+						t === e.value && /* @__PURE__ */ (0, h.jsx)(E, { className: I.itemCheck }),
+						t !== e.value && /* @__PURE__ */ (0, h.jsx)("b", {})
 					]
 				})]
-			}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "select-item",
+			}, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, h.jsxs)("div", {
+				className: I.item,
 				onClick: () => v(e.value),
-				children: [u ? u(e) : /* @__PURE__ */ (0, p.jsxs)("span", {
-					className: "select-item-left",
-					children: [e.label, "1"]
-				}), t === e.value && /* @__PURE__ */ (0, p.jsx)(E, { className: "select-item-check" })]
+				children: [u ? u(e) : /* @__PURE__ */ (0, h.jsx)("span", {
+					className: I.itemLeft,
+					children: e.label
+				}), t === e.value && /* @__PURE__ */ (0, h.jsx)(E, { className: I.itemCheck })]
 			}, e.value))
 		})]
 	});
-}, ne = t(({ className: e = "", type: t = "text", hideArrows: n = !0, ...r }, i) => /* @__PURE__ */ (0, p.jsx)("input", {
-	ref: i,
-	type: t,
-	className: `input ${t === "number" && n ? "input-number-clean" : ""} ${e}`.trim(),
-	...r
-}));
-ne.displayName = "Input";
-//#endregion
-//#region src/shared/components/ImageEditor/ui/input-pixel/InputPixel.tsx
-var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ */ (0, p.jsxs)("div", {
-	className: `input-pixel-container ${t}`.trim(),
+}, _e = {
+	input: "_input_j55nq_1",
+	numberClean: "_numberClean_j55nq_34"
+}, ve = ({ className: e = "", type: t = "text", hideArrows: n = !0, ref: r, ...i }) => {
+	let a = t === "number" && n ? _e.numberClean : "";
+	return /* @__PURE__ */ (0, h.jsx)("input", {
+		ref: r,
+		type: t,
+		className: `${_e.input} ${a} ${e}`.trim(),
+		...i
+	});
+}, ye = {
+	container: "_container_14vsv_1",
+	legend: "_legend_14vsv_4",
+	suffix: "_suffix_14vsv_13"
+}, be = ({ label: e, className: t = "", style: n, ref: r, ...i }) => /* @__PURE__ */ (0, h.jsxs)("div", {
+	className: `${ye.container} ${t}`.trim(),
 	style: n,
 	children: [
-		/* @__PURE__ */ (0, p.jsx)("span", {
-			className: "input-pixel-legend",
+		/* @__PURE__ */ (0, h.jsx)("span", {
+			className: ye.legend,
 			children: e
 		}),
-		/* @__PURE__ */ (0, p.jsx)(ne, {
-			ref: i,
+		/* @__PURE__ */ (0, h.jsx)(ve, {
+			ref: r,
 			type: "number",
-			...r
+			...i
 		}),
-		/* @__PURE__ */ (0, p.jsx)("span", {
-			className: "input-pixel-suffix",
+		/* @__PURE__ */ (0, h.jsx)("span", {
+			className: ye.suffix,
 			children: "px"
 		})
 	]
-})), re = ({ onBack: e, onSave: t }) => {
-	let [n, r] = c(!1), { history: i, undo: a, redo: o, resetHistory: s, resetHistoryAfterSave: l, getLastHistoryItem: u } = R(), { base64: d } = u(), f = i.items.length > 1 && !n, m = i.pointer === 0, h = i.pointer === i.items.length - 1, g = i.items.length < 2 || n;
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "header",
-		children: [/* @__PURE__ */ (0, p.jsx)(z, {
-			variant: "ghost",
-			className: "btn-rect",
-			onClick: e,
-			children: /* @__PURE__ */ (0, p.jsx)(O, {})
-		}), /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "header-tools",
-			children: [
-				f && /* @__PURE__ */ (0, p.jsxs)("div", {
-					className: "header-history",
-					children: [
-						/* @__PURE__ */ (0, p.jsx)(z, {
-							variant: "outline",
-							disabled: m,
-							className: "btn-rect",
-							onClick: a,
-							children: /* @__PURE__ */ (0, p.jsx)(A, {})
-						}),
-						/* @__PURE__ */ (0, p.jsxs)("div", {
-							className: "header-history-text",
-							children: [
-								i.pointer + 1,
-								"/",
-								i.items.length
-							]
-						}),
-						/* @__PURE__ */ (0, p.jsx)(z, {
-							variant: "outline",
-							disabled: h,
-							className: "btn-rect",
-							onClick: o,
-							children: /* @__PURE__ */ (0, p.jsx)(j, {})
-						})
-					]
-				}),
-				/* @__PURE__ */ (0, p.jsx)(z, {
-					variant: "outline",
-					disabled: n,
-					onClick: s,
-					children: "Reset"
-				}),
-				/* @__PURE__ */ (0, p.jsxs)(z, {
-					disabled: g,
-					onClick: async () => {
-						if (d) {
-							r(!0);
-							try {
-								await t(d), l();
-							} finally {
-								r(!1);
-							}
-						}
-					},
-					children: [n ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {}), "Save"]
-				})
-			]
+}), xe = {
+	group: "_group_qpue1_1",
+	save: "_save_qpue1_6",
+	close: "_close_qpue1_13"
+}, L = ({ onSave: e, onClose: t, saving: n = !1, disabled: r = !1 }) => /* @__PURE__ */ (0, h.jsxs)("div", {
+	className: xe.group,
+	children: [/* @__PURE__ */ (0, h.jsx)(N, {
+		variant: "outline",
+		className: xe.save,
+		disabled: r || n,
+		onClick: e,
+		children: n ? /* @__PURE__ */ (0, h.jsx)(A, {}) : /* @__PURE__ */ (0, h.jsx)(E, {})
+	}), /* @__PURE__ */ (0, h.jsx)(N, {
+		variant: "outline",
+		className: xe.close,
+		disabled: n,
+		onClick: t,
+		children: /* @__PURE__ */ (0, h.jsx)(te, {})
+	})]
+}), R = {
+	sliderContainer: "_sliderContainer_1ntcm_1",
+	disabled: "_disabled_1ntcm_12",
+	sliderTrack: "_sliderTrack_1ntcm_18",
+	sliderRange: "_sliderRange_1ntcm_30",
+	sliderThumb: "_sliderThumb_1ntcm_38",
+	hiddenInput: "_hiddenInput_1ntcm_53"
+}, Se = ({ min: e, max: t, value: n, step: r = 1, disabled: i = !1, onChange: o, className: s, ...c }) => {
+	let l = a(() => {
+		let r = t - e;
+		return r <= 0 ? 0 : (n - e) / r * 100;
+	}, [
+		n,
+		e,
+		t
+	]);
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: `${R.sliderContainer} ${i ? R.disabled : ""} ${s || ""}`,
+		style: { "--slider-progress": `${l}%` },
+		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+			className: R.sliderTrack,
+			children: [/* @__PURE__ */ (0, h.jsx)("div", { className: R.sliderRange }), /* @__PURE__ */ (0, h.jsx)("div", {
+				className: R.sliderThumb,
+				style: { left: `${l}%` }
+			})]
+		}), /* @__PURE__ */ (0, h.jsx)("input", {
+			type: "range",
+			min: e,
+			max: t,
+			step: r,
+			value: n,
+			disabled: i,
+			onChange: (e) => {
+				i || o(Number(e.target.value));
+			},
+			className: R.hiddenInput,
+			...c
 		})]
 	});
-}, U = 32, W = (e) => ({
-	x: e.offsetLeft,
-	y: e.offsetTop,
-	w: e.offsetWidth,
-	h: e.offsetHeight
-}), ie = (e, t, n, r, i, a, o, s) => {
-	let { x: c } = o, { y: l, w: u, h: d } = o;
-	if (e) u += r - n, u + c > i && (u = i - c), u < U && (u = U);
-	else {
-		let e = r - n, o = Math.round(e / t);
-		if (u += e, d += o, l -= o / 2, l < 0 || d + l > a || u + c > i || u < U || d < U) return W(s);
-	}
-	return {
-		x: c,
-		y: l,
-		w: u,
-		h: d
-	};
-}, ae = (e, t, n, r, i, a, o, s) => {
-	let { x: c, y: l, w: u, h: d } = o;
-	if (e) {
-		let e = i - o.w - o.x;
-		c += r - n, c < 0 && (c = 0), u = i - c - e, u < U && (u = U, c = i - e - U);
-	} else {
-		let e = r - n, i = Math.round(e / t);
-		if (u -= e, d -= i, c += e, l += i / 2, l < 0 || c < 0 || d + l > a || u < U || d < U) return W(s);
-	}
-	return {
-		x: c,
-		y: l,
-		w: u,
-		h: d
-	};
-}, oe = (e, t, n, r, i, a, o, s) => {
-	let { x: c, y: l, w: u, h: d } = o, f = a - d - l;
-	if (e) l += r - n, l < 0 && (l = 0), d = a - l - f, d < U && (d = U, l = a - f - U);
-	else {
-		let e = r - n, a = Math.round(e * t);
-		if (d -= e, u -= a, c += a / 2, l += e, l < 0 || c < 0 || u + c > i || u < U || d < U) return W(s);
-	}
-	return {
-		x: c,
-		y: l,
-		w: u,
-		h: d
-	};
-}, se = (e, t, n, r, i, a, o, s) => {
-	let { y: c } = o, { x: l, w: u, h: d } = o;
-	if (e) d += r - n, d + c > a && (d = a - c), d < U && (d = U);
-	else {
-		let e = r - n, o = Math.round(e * t);
-		if (d += e, u += o, l -= o / 2, d + c > a || l < 0 || u + l > i || u < U || d < U) return W(s);
+}, Ce = 1920, we = .85, Te = [
+	{
+		label: "Facebook",
+		value: "facebook",
+		options: [
+			{
+				value: "facebook-post",
+				label: "Post",
+				w: 1200,
+				h: 630,
+				rightLabel: "1200 x 630"
+			},
+			{
+				value: "facebook-cover",
+				label: "Cover",
+				w: 851,
+				h: 315,
+				rightLabel: "851 x 315"
+			},
+			{
+				value: "facebook-profile",
+				label: "Profile",
+				w: 170,
+				h: 170,
+				rightLabel: "170 x 170"
+			},
+			{
+				value: "facebook-story",
+				label: "Story",
+				w: 1080,
+				h: 1920,
+				rightLabel: "1080 x 1920"
+			}
+		]
+	},
+	{
+		label: "Instagram",
+		value: "instagram",
+		options: [
+			{
+				value: "instagram-landscape",
+				label: "Landscape",
+				w: 1080,
+				h: 566,
+				rightLabel: "1080 x 566"
+			},
+			{
+				value: "instagram-portait",
+				label: "Portait",
+				w: 1080,
+				h: 1350,
+				rightLabel: "1080 x 1350"
+			},
+			{
+				value: "instagram-square",
+				label: "Square",
+				w: 1080,
+				h: 1080,
+				rightLabel: "1080 x 1080"
+			},
+			{
+				value: "instagram-story",
+				label: "Story",
+				w: 1080,
+				h: 1920,
+				rightLabel: "1080 x 1920"
+			},
+			{
+				value: "instagram-thumbnail",
+				label: "Thumbnail",
+				w: 161,
+				h: 161,
+				rightLabel: "161 x 161"
+			}
+		]
+	},
+	{
+		label: "LinkedIn",
+		value: "linkedin",
+		options: [
+			{
+				value: "linkedin-blog-post",
+				label: "Blog Post",
+				w: 1200,
+				h: 627,
+				rightLabel: "1200 x 627"
+			},
+			{
+				value: "linkedin-cover",
+				label: "Cover",
+				w: 1128,
+				h: 191,
+				rightLabel: "1128 x 191"
+			},
+			{
+				value: "linkedin-profile",
+				label: "Profile",
+				w: 400,
+				h: 400,
+				rightLabel: "400 x 400"
+			}
+		]
 	}
-	return {
-		x: l,
-		y: c,
-		w: u,
-		h: d
-	};
-}, ce = (e, t, n, r, i, a, o, s, c, l) => {
+], z = 32, Ee = (e, t, n, r, i, a, o, s, c, l) => {
 	let { x: u, y: d, w: f, h: p } = c;
 	if (e) {
 		let e = o - c.w - c.x;
-		u += i - n, u < 0 && (u = 0), f = o - u - e, f < U && (f = U, u = o - e - U);
+		u += i - n, u < 0 && (u = 0), f = o - u - e, f < z && (f = z, u = o - e - z);
 		let t = s - p - d;
-		d += a - r, d < 0 && (d = 0), p = s - d - t, p < U && (p = U, d = s - t - U);
+		d += a - r, d < 0 && (d = 0), p = s - d - t, p < z && (p = z, d = s - t - z);
 	} else {
 		if (t >= 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -818,7 +834,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f -= n, p -= e, u += n, d += e;
 		}
-		if (u < 0 || d < 0 || f < U || p < U) return W(l);
+		if (u < 0 || d < 0 || f < z || p < z) return l;
 	}
 	return {
 		x: u,
@@ -826,12 +842,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, le = (e, t, n, r, i, a, o, s, c, l) => {
+}, De = (e, t, n, r, i, a, o, s, c, l) => {
 	let { x: u } = c, { y: d, w: f, h: p } = c;
 	if (e) {
-		f += i - n, f + u > o && (f = o - u), f < U && (f = U);
+		f += i - n, f + u > o && (f = o - u), f < z && (f = z);
 		let e = s - p - d;
-		d += a - r, d < 0 && (d = 0), p = s - d - e, p < U && (p = U, d = s - e - U);
+		d += a - r, d < 0 && (d = 0), p = s - d - e, p < z && (p = z, d = s - e - z);
 	} else {
 		if (t > 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -840,7 +856,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f -= n, p -= e, d += e;
 		}
-		if (f + u > o || d < 0 || f < U || p < U) return W(l);
+		if (f + u > o || d < 0 || f < z || p < z) return l;
 	}
 	return {
 		x: u,
@@ -848,12 +864,12 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, ue = (e, t, n, r, i, a, o, s, c, l) => {
+}, Oe = (e, t, n, r, i, a, o, s, c, l) => {
 	let { y: u } = c, { x: d, w: f, h: p } = c;
 	if (e) {
-		p += a - r, p + u > s && (p = s - u), p < U && (p = U);
+		p += a - r, p + u > s && (p = s - u), p < z && (p = z);
 		let e = o - c.w - c.x;
-		d += i - n, d < 0 && (d = 0), f = o - d - e, f < U && (f = U, d = o - e - U);
+		d += i - n, d < 0 && (d = 0), f = o - d - e, f < z && (f = z, d = o - e - z);
 	} else {
 		if (t >= 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -862,7 +878,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f += n, p += e, d -= n;
 		}
-		if (p + u > s || d < 0 || f < U || p < U) return W(l);
+		if (p + u > s || d < 0 || f < z || p < z) return l;
 	}
 	return {
 		x: d,
@@ -870,9 +886,9 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, de = (e, t, n, r, i, a, o, s, c, l) => {
+}, ke = (e, t, n, r, i, a, o, s, c, l) => {
 	let { x: u, y: d } = c, { w: f, h: p } = c;
-	if (e) f += i - n, f + u > o && (f = o - u), f < U && (f = U), p += a - r, p + d > s && (p = s - d), p < U && (p = U);
+	if (e) f += i - n, f + u > o && (f = o - u), f < z && (f = z), p += a - r, p + d > s && (p = s - d), p < z && (p = z);
 	else {
 		if (t >= 1) {
 			let e = i - n, r = Math.round(e / t);
@@ -881,7 +897,7 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 			let e = a - r, n = Math.round(e * t);
 			f += n, p += e;
 		}
-		if (p + d > s || f + u > o || f < U || p < U) return W(l);
+		if (p + d > s || f + u > o || f < z || p < z) return l;
 	}
 	return {
 		x: u,
@@ -889,474 +905,857 @@ var H = t(({ label: e, className: t = "", style: n, ...r }, i) => /* @__PURE__ *
 		w: f,
 		h: p
 	};
-}, fe = (e, t, n, r, i, a, o, s, c, l, u) => e === "r" ? ie(t, n, r, a, s, c, l, u) : e === "l" ? ae(t, n, r, a, s, c, l, u) : e === "t" ? oe(t, n, i, o, s, c, l, u) : e === "b" ? se(t, n, i, o, s, c, l, u) : e === "tl" ? ce(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? le(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? ue(t, n, r, i, a, o, s, c, l, u) : e === "br" ? de(t, n, r, i, a, o, s, c, l, u) : {
+}, Ae = (e, t, n, r, i, a, o, s, c, l, u) => e === "tl" ? Ee(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? De(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? Oe(t, n, r, i, a, o, s, c, l, u) : e === "br" ? ke(t, n, r, i, a, o, s, c, l, u) : {
 	x: 0,
 	y: 0,
 	w: 0,
 	h: 0
-}, G = (e, t, n) => {
-	let r = .1, i = t / n, a = 0, o = 0;
+}, je = (e, t, n) => {
+	let r = .12, i = t / n, a = 0, o = 0;
 	e === 1 && (a = (i > 1 ? n : t) * (1 - r * 2), o = a), e > 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e)), e < 1 && (i > e ? (o = n * (1 - r * 2), a = o * e) : (a = t * (1 - r * 2), o = a / e));
 	let s = a / t * 100, c = o / n * 100;
 	return {
 		x: (t - a) / 2 / t * 100,
 		y: (n - o) / 2 / n * 100,
 		w: s,
-		h: c,
-		xPx: Math.round((t - a) / 2),
-		yPx: Math.round((n - o) / 2),
-		wPx: a,
-		hPx: o
+		h: c
+	};
+}, Me = (e, t, n, r) => {
+	let i = e.w / 100 * n, a = e.h / 100 * r;
+	t >= 1 ? a = i / t : i = a * t;
+	let o = i / n * 100, s = a / r * 100, c = Math.max(o / (100 - e.x), s / (100 - e.y), 1);
+	return o /= c, s /= c, {
+		...e,
+		w: o,
+		h: s
 	};
-}, pe = () => {
-	let { getCurrentAction: e, getLastHistoryItem: t } = R(), n = e(), r = S(), i = s(null), a = s(null), { handleCropStart: o } = be({
-		imgRef: i,
-		cropRef: a
+}, B = (e) => Math.abs(Math.round(e / 90)) % 2 == 1, Ne = (e, t, n, r) => B(n) === B(r) ? {
+	width: e,
+	height: t
+} : {
+	width: t,
+	height: e
+}, Pe = async (e) => {
+	let { width: t, height: n } = e, r = Math.min(1, Ce / Math.max(t, n)), i = Math.round(t * r), a = Math.round(n * r), o = new OffscreenCanvas(i, a), s = o.getContext("2d");
+	if (!s) throw Error("Failed to get 2D context for preview canvas");
+	return s.drawImage(e, 0, 0, i, a), o.convertToBlob({
+		type: "image/webp",
+		quality: we
 	});
-	if (!n || n.name !== "crop") return null;
-	let { width: c, height: l, base64: u } = t(), { x: d, y: f, w: m, h } = G(n.args.ratio, c, l);
-	return /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)("img", {
-		ref: i,
-		src: u,
-		alt: "Image",
-		className: "crop-image",
-		style: { clipPath: `xywh(${d}% ${f}% ${m}% ${h}%)` }
-	}), /* @__PURE__ */ (0, p.jsxs)("div", {
-		ref: a,
-		className: "crop-box",
-		style: {
-			width: `${m}%`,
-			height: `${h}%`,
-			top: `${f}%`,
-			left: `${d}%`
+};
+function Fe(e) {
+	let t = new OffscreenCanvas(e.width, e.height), n = t.getContext("2d");
+	if (!n) throw Error("Failed to create 2D context for canvas.");
+	n.drawImage(e, 0, 0);
+	try {
+		let e = n.getImageData(0, 0, t.width, t.height).data;
+		for (let t = 3; t < e.length; t += 4) if (e[t] < 255) return !0;
+		return !1;
+	} catch (e) {
+		throw Error(`Error reading pixels: ${e}`, { cause: e });
+	}
+}
+//#endregion
+//#region src/shared/components/Pixedi/utils/imageProcessor.ts
+var Ie = (e) => new Promise((t, n) => {
+	let r = new FileReader();
+	r.onloadend = () => {
+		let e = r.result;
+		typeof e == "string" ? t(e) : n(/* @__PURE__ */ Error("Failed to read blob as base64"));
+	}, r.onerror = () => n(r.error ?? /* @__PURE__ */ Error("FileReader error")), r.readAsDataURL(e);
+});
+async function Le(e) {
+	let t = await createImageBitmap(e), n = e.type || "image/png", r = n === "image/gif" ? "image/png" : n, i = document.createElement("canvas"), a = i.getContext("2d", { alpha: !0 });
+	i.width = t.width, i.height = t.height, a?.drawImage(t, 0, 0), t.close();
+	let o = () => {
+		let e = document.createElement("canvas");
+		return e.width = i.width, e.height = i.height, e.getContext("2d", { alpha: !0 })?.drawImage(i, 0, 0), e;
+	};
+	return {
+		crop: (e, t, n, r) => {
+			if (!a) return;
+			let s = o();
+			i.width = n, i.height = r, a.clearRect(0, 0, n, r), a.drawImage(s, e, t, n, r, 0, 0, n, r);
 		},
-		children: [/* @__PURE__ */ (0, p.jsx)(ge, {}), r ? /* @__PURE__ */ (0, p.jsx)(xe, { onMouseDown: o }) : /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)(he, { onMouseDown: o }), /* @__PURE__ */ (0, p.jsx)(_e, { onMouseDown: o })] })]
-	})] });
-}, K = new EventTarget(), q = (e) => {
-	let t = new CustomEvent("crop-update", { detail: e });
-	K.dispatchEvent(t);
-}, me = () => {
-	let { setCurrentAction: e, getCurrentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: a } = R(), { crop: o, resize: l } = b(), [u, d] = c(!1), f = t(), { base64: m, width: h, height: g } = n(), _ = s(null), v = s(null), y = s(null), x = s(null), S = s(null);
-	return i(() => {
-		if (f?.name !== "crop") return;
-		let { x: e, y: t, w: n, h: r } = G(f.args.ratio, h, g), i = Math.round(e / 100 * h), a = Math.round(t / 100 * g), o = Math.round(n / 100 * h), s = Math.round(r / 100 * g);
-		_.current && (_.current.textContent = i.toString()), v.current && (v.current.textContent = a.toString()), y.current && (y.current.textContent = o.toString()), x.current && (x.current.textContent = s.toString()), S.current = {
-			x: i,
-			y: a,
-			w: o,
-			h: s
-		};
-		let c = (e) => {
-			let t = e, { x: n, y: r, w: i, h: a } = t.detail;
-			S.current = t.detail, _.current && (_.current.textContent = n.toString()), v.current && (v.current.textContent = r.toString()), y.current && (y.current.textContent = i.toString()), x.current && (x.current.textContent = a.toString());
-		};
-		return K.addEventListener("crop-update", c), () => {
-			K.removeEventListener("crop-update", c);
-		};
-	}, [
-		f,
-		h,
-		g
-	]), /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "crop-tools",
-		children: [
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
-					children: "left"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
-					ref: _
-				})]
-			}),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
-					children: "top"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
-					ref: v
-				})]
-			}),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
-					children: "width"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
-					ref: y
-				})]
-			}),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "crop-tools-info",
-				children: [/* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-label",
-					children: "height"
-				}), /* @__PURE__ */ (0, p.jsx)("div", {
-					className: "crop-tools-info-value semibold",
-					ref: x
-				})]
-			}),
-			/* @__PURE__ */ (0, p.jsx)(V, { orientation: "vertical" }),
-			/* @__PURE__ */ (0, p.jsx)(z, {
-				variant: "ghost",
-				className: "text-green",
-				style: {
-					height: "36px",
-					width: "36px"
-				},
-				disabled: u,
-				onClick: async () => {
-					if (!(!f || f.name !== "crop")) try {
-						if (d(!0), !S.current) return;
-						let { x: e, y: t, w: n, h: i } = S.current, { preset: s } = f.args, c = await o(m, e, t, n, i);
-						if (s) {
-							let { w: e, h: t } = s;
-							c = await l(c, e, t);
-						}
-						r({
-							name: "Crop",
-							base64: c,
-							width: s ? s.w : S.current.w,
-							height: s ? s.h : S.current.h
-						}), a(!0);
-					} catch (e) {
-						console.error("Failed to process image:", e);
-					} finally {
-						d(!1);
-					}
-				},
-				children: u ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {})
-			}),
-			/* @__PURE__ */ (0, p.jsx)(V, { orientation: "vertical" }),
-			/* @__PURE__ */ (0, p.jsx)(z, {
-				variant: "ghost",
-				style: {
-					height: "36px",
-					width: "36px"
-				},
-				disabled: u,
-				onClick: () => {
-					e(null), a(!0);
+		flip: (e, t) => {
+			if (!a) return;
+			let n = o();
+			a.clearRect(0, 0, i.width, i.height), a.save(), a.translate(e ? i.width : 0, t ? i.height : 0), a.scale(e ? -1 : 1, t ? -1 : 1), a.drawImage(n, 0, 0), a.restore();
+		},
+		rotate: (e) => {
+			if (!a) return;
+			let t = o(), n = e * Math.PI / 180, r = Math.abs(Math.sin(n)), s = Math.abs(Math.cos(n));
+			i.width = Math.round(t.width * s + t.height * r), i.height = Math.round(t.width * r + t.height * s), a.clearRect(0, 0, i.width, i.height), a.save(), a.translate(i.width / 2, i.height / 2), a.rotate(n), a.drawImage(t, -t.width / 2, -t.height / 2), a.restore();
+		},
+		resize: (e, t) => {
+			if (!a) return;
+			let n = o();
+			i.width = e, i.height = t, a.clearRect(0, 0, e, t), a.drawImage(n, 0, 0, e, t);
+		},
+		get: async (e) => {
+			let { quality: t = .85, saveAsWEBP: n = !1 } = e, a = n ? "image/webp" : r, o = await new Promise((e, o) => {
+				r === "image/jpeg" || r === "image/webp" || n ? i.toBlob((t) => {
+					t ? e(t) : o(/* @__PURE__ */ Error(`Failed to encode image as ${a}`));
+				}, a, t) : i.toBlob((t) => {
+					t ? e(t) : o(/* @__PURE__ */ Error("Failed to encode image as image/png"));
+				}, "image/png");
+			}), s = await createImageBitmap(o), c = await Pe(s), { width: l, height: u } = s, d = Fe(s);
+			return s.close(), {
+				newBlob: o,
+				previewBlob: c,
+				mimeType: a,
+				width: l,
+				height: u,
+				isAlpha: d
+			};
+		}
+	};
+}
+//#endregion
+//#region src/shared/components/Pixedi/utils/preview.ts
+var V = (e, t, n) => Math.max(t, Math.min(n, e)), Re = (e, t) => [[e[0][0] * t[0][0] + e[0][1] * t[1][0], e[0][0] * t[0][1] + e[0][1] * t[1][1]], [e[1][0] * t[0][0] + e[1][1] * t[1][0], e[1][0] * t[0][1] + e[1][1] * t[1][1]]], ze = (e) => (Math.round(e / 90) % 4 + 4) % 4 * 90, Be = (e) => {
+	switch (ze(e)) {
+		case 90: return [[0, -1], [1, 0]];
+		case 180: return [[-1, 0], [0, -1]];
+		case 270: return [[0, 1], [-1, 0]];
+		default: return [[1, 0], [0, 1]];
+	}
+}, Ve = (e, t) => [[e ? -1 : 1, 0], [0, t ? -1 : 1]], He = (e, t, n) => Re(Ve(t, n), Be(-e)), Ue = (e) => [+(e[0][0] < 0 || e[0][1] < 0), +(e[1][0] < 0 || e[1][1] < 0)], H = (e, t, n) => {
+	let r = Ue(e);
+	return [e[0][0] * t + e[0][1] * n + r[0], e[1][0] * t + e[1][1] * n + r[1]];
+}, We = (e) => {
+	let t = 1, n = 1, r = {
+		x: 0,
+		y: 0,
+		w: 1,
+		h: 1
+	}, i = 0, a = !1, o = !1;
+	for (let s = 0; s < e.length; s++) {
+		let c = e[s];
+		if (c.action.name === "initial") t = c.width, n = c.height, r = {
+			x: 0,
+			y: 0,
+			w: 1,
+			h: 1
+		}, i = 0, a = !1, o = !1;
+		else if (c.action.name === "crop") {
+			let e = (c.action.args.x ?? 0) / 100, t = (c.action.args.y ?? 0) / 100, n = (c.action.args.w ?? 100) / 100, s = (c.action.args.h ?? 100) / 100, l = He(i, a, o), u = [
+				H(l, e, t),
+				H(l, e + n, t),
+				H(l, e, t + s),
+				H(l, e + n, t + s)
+			], d = Math.min(...u.map((e) => e[0])), f = Math.max(...u.map((e) => e[0])), p = Math.min(...u.map((e) => e[1])), m = Math.max(...u.map((e) => e[1]));
+			r = {
+				x: r.x + d * r.w,
+				y: r.y + p * r.h,
+				w: r.w * (f - d),
+				h: r.h * (m - p)
+			};
+		} else if (c.action.name === "flip") {
+			let e = B(i), t = e ? c.action.args.vertical : c.action.args.horizontal, n = e ? c.action.args.horizontal : c.action.args.vertical;
+			t && (a = !a), n && (o = !o);
+		} else c.action.name === "rotate" && (i = c.action.args.degrees);
+	}
+	let s = r.w * t, c = r.h * n, l = B(i), u = l ? c : s, d = l ? s : c, f = e.at(-1)?.width || 0, p = e.at(-1)?.height || 0;
+	return {
+		box: r,
+		boxWidth: s,
+		boxHeight: c,
+		newWidth: f,
+		newHeight: p,
+		initWidth: t,
+		initHeight: n,
+		viewWidth: u,
+		viewHeight: d,
+		rotation: i,
+		flipH: a,
+		flipV: o
+	};
+}, Ge = (e) => {
+	let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } = We(e), d = V(t.x, 0, 1), f = V(t.y, 0, 1), p = {
+		x: d,
+		y: f,
+		w: V(t.w, 0, 1 - d),
+		h: V(t.h, 0, 1 - f)
+	}, m = ze(i);
+	return {
+		...p.x === 0 && p.y === 0 && p.w === 1 && p.h === 1 ? {} : { crop: {
+			x: Math.round(s * t.x),
+			y: Math.round(c * t.y),
+			w: Math.round(s * t.w),
+			h: Math.round(c * t.h)
+		} },
+		...m === 0 ? {} : { rotate: { degrees: m } },
+		...n || r ? { flip: {
+			horizontal: n,
+			vertical: r
+		} } : {},
+		...Math.round(l) !== a || Math.round(u) !== o ? { resize: {
+			width: a,
+			height: o
+		} } : {}
+	};
+}, Ke = (e) => {
+	let [t, n] = s(!1), { setImage: r, settings: i, history: a, originalBlob: o, setCurrentAction: c, resetHistory: l } = j();
+	return {
+		save: async () => {
+			if (!o) return;
+			n(!0);
+			let t = Ge(a.items.slice(0, a.pointer + 1));
+			try {
+				let n = await Le(o);
+				t.crop && n.crop(t.crop.x, t.crop.y, t.crop.w, t.crop.h), t.flip && n.flip(t.flip.horizontal, t.flip.vertical), t.rotate && n.rotate(t.rotate.degrees), t.resize && n.resize(t.resize.width, t.resize.height);
+				let { newBlob: a, previewBlob: s, mimeType: c, width: l, height: u, isAlpha: d } = await n.get(i), f = "";
+				i.exportAs === "base64" && (f = await Ie(a)), await e(f || a), r({
+					newBlob: a,
+					previewBlob: s,
+					mimeType: c,
+					width: l,
+					height: u,
+					isAlpha: d
+				});
+			} catch (e) {
+				throw Error(`Error saving image: ${e}`, { cause: e });
+			} finally {
+				n(!1);
+			}
+		},
+		reset: () => {
+			c(null), l();
+		},
+		isSaving: t
+	};
+}, U = {
+	header: "_header_msw8l_1",
+	tools: "_tools_msw8l_11",
+	history: "_history_msw8l_15",
+	historyText: "_historyText_msw8l_20"
+}, qe = ({ onBack: e, onSave: t }) => {
+	let { save: n, reset: r, isSaving: i } = Ke(t), { history: a, undo: o, redo: s } = j(), c = a.items.length > 1 && !i, l = a.pointer === 0, u = a.pointer === a.items.length - 1, d = a.items.length < 2 || i, f = d || a.pointer === 0;
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: U.header,
+		children: [/* @__PURE__ */ (0, h.jsx)(N, {
+			variant: "ghost",
+			className: M.rect,
+			onClick: e,
+			children: /* @__PURE__ */ (0, h.jsx)(D, {})
+		}), /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: U.tools,
+			children: [
+				c && /* @__PURE__ */ (0, h.jsxs)("div", {
+					className: U.history,
+					children: [
+						/* @__PURE__ */ (0, h.jsx)(N, {
+							variant: "outline",
+							disabled: l,
+							className: M.rect,
+							onClick: o,
+							children: /* @__PURE__ */ (0, h.jsx)(ie, {})
+						}),
+						/* @__PURE__ */ (0, h.jsxs)("div", {
+							className: U.historyText,
+							children: [
+								a.pointer + 1,
+								"/",
+								a.items.length
+							]
+						}),
+						/* @__PURE__ */ (0, h.jsx)(N, {
+							variant: "outline",
+							disabled: u,
+							className: M.rect,
+							onClick: s,
+							children: /* @__PURE__ */ (0, h.jsx)(O, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, h.jsx)(N, {
+					variant: "outline",
+					disabled: d,
+					onClick: r,
+					children: "Reset"
+				}),
+				/* @__PURE__ */ (0, h.jsxs)(N, {
+					disabled: f,
+					onClick: n,
+					children: [i ? /* @__PURE__ */ (0, h.jsx)(A, {}) : /* @__PURE__ */ (0, h.jsx)(E, {}), "Save"]
+				})
+			]
+		})]
+	});
+}, Je = (e, t) => {
+	let n = new CustomEvent("crop-update", { detail: t });
+	e.dispatchEvent(n);
+}, Ye = (e, t) => {
+	let n = new CustomEvent("clip-path-update", { detail: t });
+	e.dispatchEvent(n);
+}, W = (e, t) => {
+	let n = new CustomEvent("resize-update", { detail: t });
+	e.dispatchEvent(n);
+}, G = {
+	resize: "_resize_11cwi_1",
+	slider: "_slider_11cwi_14",
+	border: "_border_11cwi_18",
+	tools: "_tools_11cwi_24",
+	toolsLock: "_toolsLock_11cwi_30"
+}, K = 10, q = 200, J = (e, t, n) => (e < K && (e = K), e > q && (e = q), {
+	updatedScale: e,
+	updatedWidth: Math.round(e / 100 * t),
+	updatedHeight: Math.round(e / 100 * n)
+}), Xe = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: i, eventBus: a } = j(), { width: c, height: l } = e(), [u, d] = s(c), [f, p] = s(l), [m, g] = s(100), _ = o(0), v = S(), y = (e) => {
+		let { updatedScale: t, updatedWidth: n, updatedHeight: r } = J(e, c, l);
+		d(n), p(r), g(t), W(a, t);
+	}, b = (e) => {
+		let { updatedScale: t, updatedWidth: n, updatedHeight: r } = J(parseInt(e.target?.value ?? "1") / c * 100, c, l);
+		d(n), p(r), g(t), W(a, t);
+	}, x = (e) => {
+		let { updatedScale: t, updatedWidth: n, updatedHeight: r } = J(parseInt(e.target.value) / l * 100, c, l);
+		p(r), d(n), g(t), W(a, t);
+	}, C = () => {
+		W(a, 100), t(null), i(!0);
+	}, w = () => {
+		n({
+			width: u,
+			height: f,
+			action: {
+				name: "resize",
+				args: {
+					width: u,
+					height: f
+				}
+			}
+		}), W(a, 100), i(!0);
+	};
+	return r(() => {
+		let e = Math.round(u / c * 100), t = (e) => {
+			let { updatedHeight: t, updatedWidth: n } = J(e, c, l);
+			p(t), d(n), g(e), W(a, e);
+		}, n = (n) => {
+			let r = Math.sign(n.deltaY);
+			e -= r * 2, e <= K && (e = K), e >= q && (e = q), t(e);
+		}, r = (e) => {
+			_.current = e.touches[0].clientY;
+		}, i = (n) => {
+			let r = n.touches[0].clientY, i = _.current - r;
+			Math.abs(i) < 10 || (e += Math.sign(i) * 2, e <= K && (e = K), e >= q && (e = q), t(e), _.current = r);
+		}, o = new AbortController(), { signal: s } = o;
+		return window.addEventListener("wheel", n, { signal: s }), window.addEventListener("touchstart", r, { signal: s }), window.addEventListener("touchmove", i, { signal: s }), () => o.abort();
+	}, [
+		l,
+		c,
+		v,
+		u,
+		a
+	]), /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: G.resize,
+		children: [/* @__PURE__ */ (0, h.jsx)(Se, {
+			min: K,
+			max: q,
+			value: m,
+			className: G.slider,
+			onChange: y
+		}), /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: G.tools,
+			children: [
+				/* @__PURE__ */ (0, h.jsx)(be, {
+					value: u,
+					name: "width",
+					label: "Width",
+					style: { width: "88px" },
+					onChange: (e) => d(Number(e.target.value)),
+					onBlur: b
+				}),
+				/* @__PURE__ */ (0, h.jsx)(ne, { className: G.toolsLock }),
+				/* @__PURE__ */ (0, h.jsx)(be, {
+					value: f,
+					name: "height",
+					label: "Height",
+					style: { width: "88px" },
+					onChange: (e) => p(Number(e.target.value)),
+					onBlur: x
+				}),
+				/* @__PURE__ */ (0, h.jsx)(L, {
+					onSave: () => w(),
+					onClose: C,
+					disabled: u === c
+				})
+			]
+		})]
+	});
+}, Y = {
+	preview: "_preview_dvanl_1",
+	rotate: "_rotate_dvanl_12",
+	flip: "_flip_dvanl_24",
+	image: "_image_dvanl_32"
+}, Ze = ({ isClipped: e, style: t = {} }) => {
+	let { history: n, previewUrl: i, currentAction: a, getLastRotation: s, eventBus: c } = j(), l = o(null), u = [];
+	if (a) {
+		let { width: e, height: t } = n.items.at(n.pointer);
+		u.push({
+			...a.name === w.ROTATE ? Ne(e, t, s(), a.args.degrees) : {
+				width: e,
+				height: t
+			},
+			action: a
+		});
+	}
+	let { box: d, boxWidth: f, boxHeight: p, viewWidth: m, viewHeight: g, rotation: _, flipH: v, flipV: y } = We([...n.items.slice(0, n.pointer + 1), ...u]);
+	return r(() => {
+		e && l.current && (l.current.style.transition = "none");
+		let t = (e) => {
+			let t = e.detail;
+			l.current && (l.current.style.transform = `scale(${t / 100})`);
+		}, n = (t) => {
+			if (!e) return;
+			let { x: n, y: r, w: i, h: a } = t.detail;
+			l.current && (l.current.style.clipPath = `xywh(${n}% ${r}% ${i}% ${a}%)`);
+		};
+		return c.addEventListener("resize-update", t), c.addEventListener("clip-path-update", n), () => {
+			c.removeEventListener("resize-update", t), c.removeEventListener("clip-path-update", n);
+		};
+	}, [e, c]), /* @__PURE__ */ (0, h.jsx)("div", {
+		ref: l,
+		className: Y.preview,
+		style: {
+			aspectRatio: `${m} / ${g}`,
+			...t
+		},
+		children: /* @__PURE__ */ (0, h.jsx)("div", {
+			className: Y.rotate,
+			style: {
+				width: `${f / m * 100}%`,
+				height: `${p / g * 100}%`,
+				transform: `translate(-50%, -50%) rotate(${_}deg)`
+			},
+			children: /* @__PURE__ */ (0, h.jsx)("div", {
+				className: Y.flip,
+				style: { transform: `scale(${v ? -1 : 1}, ${y ? -1 : 1})` },
+				children: /* @__PURE__ */ (0, h.jsx)("img", {
+					className: Y.image,
+					src: i,
+					alt: "Preview Image",
+					style: {
+						width: `${1 / d.w * 100}%`,
+						height: `${1 / d.h * 100}%`,
+						left: `${-(d.x / d.w) * 100}%`,
+						top: `${-(d.y / d.h) * 100}%`
+					}
+				})
+			})
+		})
+	});
+}, X = {
+	wrapper: "_wrapper_13nh3_1",
+	box: "_box_13nh3_9",
+	tools: "_tools_13nh3_18",
+	toolsInfo: "_toolsInfo_13nh3_34",
+	toolsInfoLabel: "_toolsInfoLabel_13nh3_41",
+	toolsInfoValue: "_toolsInfoValue_13nh3_46",
+	linesBox: "_linesBox_13nh3_51",
+	line: "_line_13nh3_51",
+	lineV: "_lineV_13nh3_61",
+	lineH: "_lineH_13nh3_69",
+	pointer: "_pointer_13nh3_77",
+	pointerTopLeft: "_pointerTopLeft_13nh3_83",
+	pointerTopRight: "_pointerTopRight_13nh3_90",
+	pointerBottomRight: "_pointerBottomRight_13nh3_97",
+	pointerBottomLeft: "_pointerBottomLeft_13nh3_104",
+	mobileBorder: "_mobileBorder_13nh3_111",
+	mobilePointer: "_mobilePointer_13nh3_117"
+}, Qe = () => {
+	let { getLastHistoryItem: e } = j(), t = S(), n = o(null), { handleCropStart: r, initialCrop: i } = st({ boxRef: n }), { width: a, height: s } = e(), { x: c, y: l, w: u, h: d } = i;
+	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(Ze, {
+		isClipped: !0,
+		style: { clipPath: `xywh(${c}% ${l}% ${u}% ${d}%)` }
+	}), /* @__PURE__ */ (0, h.jsx)("div", {
+		className: X.wrapper,
+		style: { aspectRatio: `${a} / ${s}` },
+		children: /* @__PURE__ */ (0, h.jsxs)("div", {
+			ref: n,
+			className: X.box,
+			style: {
+				width: `${u}%`,
+				height: `${d}%`,
+				top: `${l}%`,
+				left: `${c}%`
+			},
+			children: [/* @__PURE__ */ (0, h.jsx)(et, {}), t ? /* @__PURE__ */ (0, h.jsx)(ct, { onMouseDown: r }) : /* @__PURE__ */ (0, h.jsx)(tt, { onMouseDown: r })]
+		})
+	})] });
+}, $e = () => {
+	let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: i, setSidebar: a, eventBus: s } = j(), { width: c, height: l } = n(), u = o(null), d = o(null), f = o(null), p = o(null), m = o({
+		x: 0,
+		y: 0,
+		w: 0,
+		h: 0
+	});
+	return r(() => {
+		if (t?.name !== "crop") return;
+		let e = je(t.args.ratio, c, l), { x: n, y: r, w: i, h: a } = e, o = Math.round(n / 100 * c), h = Math.round(r / 100 * l), g = Math.round(i / 100 * c), _ = Math.round(a / 100 * l);
+		m.current = e, u.current && (u.current.textContent = o.toString()), d.current && (d.current.textContent = h.toString()), f.current && (f.current.textContent = g.toString()), p.current && (p.current.textContent = _.toString());
+		let v = (e) => {
+			let { x: t, y: n, w: r, h: i } = e.detail;
+			u.current && (u.current.textContent = t.toString()), d.current && (d.current.textContent = n.toString()), f.current && (f.current.textContent = r.toString()), p.current && (p.current.textContent = i.toString());
+		}, y = (e) => {
+			m.current = e.detail;
+		};
+		return s.addEventListener("crop-update", v), s.addEventListener("clip-path-update", y), () => {
+			s.removeEventListener("crop-update", v), s.removeEventListener("clip-path-update", y);
+		};
+	}, [
+		t,
+		c,
+		l,
+		s
+	]), /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: X.tools,
+		children: [
+			/* @__PURE__ */ (0, h.jsxs)("div", {
+				className: X.toolsInfo,
+				children: [/* @__PURE__ */ (0, h.jsx)("div", {
+					className: X.toolsInfoLabel,
+					children: "left"
+				}), /* @__PURE__ */ (0, h.jsx)("div", {
+					className: `${X.toolsInfoValue} ${P.semibold}`,
+					ref: u
+				})]
+			}),
+			/* @__PURE__ */ (0, h.jsxs)("div", {
+				className: X.toolsInfo,
+				children: [/* @__PURE__ */ (0, h.jsx)("div", {
+					className: X.toolsInfoLabel,
+					children: "top"
+				}), /* @__PURE__ */ (0, h.jsx)("div", {
+					className: `${X.toolsInfoValue} ${P.semibold}`,
+					ref: d
+				})]
+			}),
+			/* @__PURE__ */ (0, h.jsxs)("div", {
+				className: X.toolsInfo,
+				children: [/* @__PURE__ */ (0, h.jsx)("div", {
+					className: X.toolsInfoLabel,
+					children: "width"
+				}), /* @__PURE__ */ (0, h.jsx)("div", {
+					className: `${X.toolsInfoValue} ${P.semibold}`,
+					ref: f
+				})]
+			}),
+			/* @__PURE__ */ (0, h.jsxs)("div", {
+				className: X.toolsInfo,
+				children: [/* @__PURE__ */ (0, h.jsx)("div", {
+					className: X.toolsInfoLabel,
+					children: "height"
+				}), /* @__PURE__ */ (0, h.jsx)("div", {
+					className: `${X.toolsInfoValue} ${P.semibold}`,
+					ref: p
+				})]
+			}),
+			/* @__PURE__ */ (0, h.jsx)(L, {
+				onSave: async () => {
+					if (!t || t.name !== w.CROP) return;
+					let e = t.args?.preset?.width || Math.round(c * m.current.w / 100), n = t.args?.preset?.height || Math.round(l * m.current.h / 100);
+					i({
+						width: e,
+						height: n,
+						action: {
+							name: "crop",
+							args: {
+								...t.args,
+								...m.current
+							}
+						}
+					}), a(!0);
 				},
-				children: /* @__PURE__ */ (0, p.jsx)(D, { className: "text-red" })
+				onClose: () => {
+					e(null), a(!0);
+				}
 			})
 		]
 	});
-}, he = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-t",
-		onMouseDown: (t) => e(t, "t", "ns")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-r",
-		onMouseDown: (t) => e(t, "r", "ew")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-b",
-		onMouseDown: (t) => e(t, "b", "ns")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-b crop-b-l",
-		onMouseDown: (t) => e(t, "l", "ew")
-	})
-] }), ge = () => /* @__PURE__ */ (0, p.jsxs)("div", {
-	className: "crop-l-box",
-	children: [/* @__PURE__ */ (0, p.jsx)("span", { className: "crop-l crop-l-v" }), /* @__PURE__ */ (0, p.jsx)("span", { className: "crop-l crop-l-h" })]
-}), _e = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-tl",
+}, et = () => /* @__PURE__ */ (0, h.jsxs)("div", {
+	className: X.linesBox,
+	children: [/* @__PURE__ */ (0, h.jsx)("span", { className: `${X.line} ${X.lineV}` }), /* @__PURE__ */ (0, h.jsx)("span", { className: `${X.line} ${X.lineH}` })]
+}), tt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [
+	/* @__PURE__ */ (0, h.jsx)("div", {
+		className: `${X.pointer} ${X.pointerTopLeft}`,
 		onMouseDown: (t) => e(t, "tl", "nwse")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-t",
-		onMouseDown: (t) => e(t, "t", "ns")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-tr",
+	/* @__PURE__ */ (0, h.jsx)("div", {
+		className: `${X.pointer} ${X.pointerTopRight}`,
 		onMouseDown: (t) => e(t, "tr", "nesw")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-r",
-		onMouseDown: (t) => e(t, "r", "ew")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-br",
+	/* @__PURE__ */ (0, h.jsx)("div", {
+		className: `${X.pointer} ${X.pointerBottomRight}`,
 		onMouseDown: (t) => e(t, "br", "nwse")
 	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-b",
-		onMouseDown: (t) => e(t, "b", "ns")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-bl",
+	/* @__PURE__ */ (0, h.jsx)("div", {
+		className: `${X.pointer} ${X.pointerBottomLeft}`,
 		onMouseDown: (t) => e(t, "bl", "nesw")
-	}),
-	/* @__PURE__ */ (0, p.jsx)("span", {
-		className: "crop-ps crop-ps-l",
-		onMouseDown: (t) => e(t, "l", "ew")
 	})
 ] });
 //#endregion
-//#region src/shared/components/ImageEditor/crop/useCropInteraction.ts
-function J(e, t, n) {
+//#region src/shared/components/Pixedi/crop/useCropInteraction.ts
+function nt(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
-function Y(e, t) {
-	return e / t * 100;
-}
-function ve(e, t, n, r, i) {
+function rt(e, { x: t, y: n, w: r, h: i }) {
 	e.style.left = `${t}%`, e.style.top = `${n}%`, e.style.width = `${r}%`, e.style.height = `${i}%`;
 }
-function ye(e, t, n, r, i) {
-	e.style.clipPath = `xywh(${t}% ${n}% ${r}% ${i}%)`;
+function it(e) {
+	let { width: t, height: n } = e.getBoundingClientRect();
+	return {
+		frameW: t,
+		frameH: n
+	};
 }
-var be = ({ imgRef: e, cropRef: t }) => {
-	let { getCurrentAction: n, getLastHistoryItem: r } = R(), a = S(), o = s(null), c = s(""), l = s({
-		xPct: 0,
-		yPct: 0
-	}), u = s({
-		x: 0,
-		y: 0,
-		w: 0,
-		h: 0
-	});
-	return i(() => {
-		let i = (e) => {
-			if (t.current) {
-				let e = t.current.parentElement;
-				e && (l.current = {
-					xPct: Y(t.current.offsetLeft, e.offsetWidth),
-					yPct: Y(t.current.offsetTop, e.offsetHeight)
-				});
-			}
-			let n = "clientX" in e ? e.clientX : e.touches[0].clientX, r = "clientY" in e ? e.clientY : e.touches[0].clientY;
-			o.current = {
-				x: n,
-				y: r
+function at({ x: e, y: t, w: n, h: r }, i, a) {
+	return {
+		x: e / 100 * i,
+		y: t / 100 * a,
+		w: n / 100 * i,
+		h: r / 100 * a
+	};
+}
+function ot({ x: e, y: t, w: n, h: r }, i, a) {
+	return {
+		x: e / i * 100,
+		y: t / a * 100,
+		w: n / i * 100,
+		h: r / a * 100
+	};
+}
+var st = ({ boxRef: e }) => {
+	let { currentAction: t, getLastHistoryItem: n, eventBus: i } = j(), s = S(), { width: c, height: l } = n(), u = t?.name === w.CROP, d = u ? t.args.ratio : 1, f = !u || t.args.isFree, p = a(() => je(d, c, l), [
+		d,
+		c,
+		l
+	]), m = o(null), h = o(""), g = o(p), _ = o(p);
+	return r(() => {
+		g.current = p, Ye(i, p);
+	}, [p, i]), r(() => {
+		let t = (e, t) => {
+			g.current = t, rt(e, t), Je(i, {
+				x: Math.round(t.x / 100 * c),
+				y: Math.round(t.y / 100 * l),
+				w: Math.round(t.w / 100 * c),
+				h: Math.round(t.h / 100 * l)
+			}), Ye(i, t);
+		}, n = (e) => {
+			e.preventDefault(), _.current = g.current;
+			let t = "clientX" in e ? e.clientX : e.touches[0].clientX, n = "clientY" in e ? e.clientY : e.touches[0].clientY;
+			m.current = {
+				x: t,
+				y: n
 			}, document.body.style.cursor = "move";
-		}, a = (n) => {
-			if (!e.current || !t.current || !o.current) return;
-			let r = t.current, i = e.current, a = r.parentElement;
-			if (!a) return;
-			let l = a.offsetWidth, u = a.offsetHeight;
-			if (c.current) {
-				s(n, r, i, l, u);
+		}, r = (t) => {
+			if (!e.current || !m.current) return;
+			t.preventDefault();
+			let n = e.current, r = n.parentElement;
+			if (!r) return;
+			let { frameW: i, frameH: s } = it(r);
+			if (h.current) {
+				a(t, n, i, s);
 				return;
 			}
-			d(n, r, i, l, u);
-		}, s = (e, t, i, a, s) => {
-			let l = n();
-			if (!l || l.name !== "crop" || !o.current) return;
-			let { isFree: d, ratio: f } = l.args, p = "clientX" in e ? e.clientX : e.touches[0].clientX, m = "clientY" in e ? e.clientY : e.touches[0].clientY, { x: h, y: g, w: _, h: v } = fe(c.current, d, f, o.current.x, o.current.y, p, m, a, s, u.current, t), y = Y(h, a), b = Y(g, s), x = Y(_, a), S = Y(v, s);
-			ve(t, y, b, x, S), ye(i, y, b, x, S);
-			let C = r();
-			if (!C) return;
-			let { width: w, height: T } = C;
-			q({
-				x: Math.round(y / 100 * w),
-				y: Math.round(b / 100 * T),
-				w: Math.round(x / 100 * w),
-				h: Math.round(S / 100 * T)
-			});
-		}, d = (e, t, n, i, a) => {
-			if (!o.current) return;
-			console.log("HandleDrag");
-			let s = t.offsetWidth, c = t.offsetHeight, u = "clientX" in e ? e.clientX : e.touches[0].clientX, d = "clientY" in e ? e.clientY : e.touches[0].clientY, f = Y(u - o.current.x, i), p = Y(d - o.current.y, a);
-			o.current = {
-				x: u,
-				y: d
-			};
-			let m = Y(i - s, i), h = Y(a - c, a), g = J(l.current.xPct + f, 0, m), _ = J(l.current.yPct + p, 0, h), v = Y(s, i), y = Y(c, a);
-			l.current = {
-				xPct: g,
-				yPct: _
-			}, ve(t, g, _, v, y), ye(n, g, _, v, y);
-			let { width: b, height: x } = r();
-			q({
-				x: Math.round(g / 100 * b),
-				y: Math.round(_ / 100 * x),
-				w: Math.round(v / 100 * b),
-				h: Math.round(y / 100 * x)
+			o(t, n, i, s);
+		}, a = (e, n, r, i) => {
+			if (!m.current) return;
+			let a = "clientX" in e ? e.clientX : e.touches[0].clientX, o = "clientY" in e ? e.clientY : e.touches[0].clientY, s = ot(Ae(h.current, f, d, m.current.x, m.current.y, a, o, r, i, at(_.current, r, i), at(g.current, r, i)), r, i);
+			t(n, f ? s : Me(s, d, c, l));
+		}, o = (e, n, r, i) => {
+			if (!m.current) return;
+			let { x: a, y: o, w: s, h: c } = _.current, l = "clientX" in e ? e.clientX : e.touches[0].clientX, u = "clientY" in e ? e.clientY : e.touches[0].clientY, d = (l - m.current.x) / r * 100, f = (u - m.current.y) / i * 100;
+			t(n, {
+				x: nt(a + d, 0, Math.max(0, 100 - s)),
+				y: nt(o + f, 0, Math.max(0, 100 - c)),
+				w: s,
+				h: c
 			});
-		}, f = () => {
-			t.current && (o.current = null, c.current = "", t.current.style.cursor = "move", document.body.style.cursor = "auto");
+		}, s = () => {
+			e.current && (m.current = null, h.current = "", e.current.style.cursor = "move", document.body.style.cursor = "auto");
 		};
-		if (!t.current) return;
-		let p = new AbortController(), { signal: m } = p;
-		return t.current.addEventListener("mousedown", i, { signal: m }), t.current.addEventListener("touchstart", i, { signal: m }), document.addEventListener("mousemove", a, { signal: m }), document.addEventListener("touchmove", a, { signal: m }), document.addEventListener("mouseup", f, { signal: m }), document.addEventListener("touchend", f, { signal: m }), () => p.abort();
+		if (!e.current) return;
+		let u = new AbortController(), { signal: p } = u;
+		return e.current.addEventListener("mousedown", n, { signal: p }), e.current.addEventListener("touchstart", n, {
+			signal: p,
+			passive: !1
+		}), document.addEventListener("mousemove", r, { signal: p }), document.addEventListener("touchmove", r, {
+			signal: p,
+			passive: !1
+		}), document.addEventListener("mouseup", s, { signal: p }), document.addEventListener("touchend", s, { signal: p }), () => u.abort();
 	}, [
-		n,
-		r,
+		f,
+		d,
+		c,
+		l,
 		e,
-		t
-	]), { handleCropStart: (e, n, r) => {
-		if (!t.current) return;
-		e.stopPropagation(), u.current = {
-			x: t.current.offsetLeft,
-			y: t.current.offsetTop,
-			w: t.current.offsetWidth,
-			h: t.current.offsetHeight
-		};
-		let i = "clientX" in e ? e.clientX : e.touches[0].clientX, s = "clientY" in e ? e.clientY : e.touches[0].clientY;
-		o.current = {
-			x: i,
-			y: s
-		}, c.current = n, a || (t.current.style.cursor = `${r}-resize`, document.body.style.cursor = `${r}-resize`);
-	} };
-}, xe = ({ onMouseDown: e }) => /* @__PURE__ */ (0, p.jsx)("div", {
-	className: "crop-p-b",
-	children: /* @__PURE__ */ (0, p.jsx)("div", {
-		className: "crop-p-p",
+		i
+	]), {
+		handleCropStart: (t, n, r) => {
+			if (!e.current) return;
+			t.stopPropagation(), t.preventDefault(), _.current = g.current;
+			let i = "clientX" in t ? t.clientX : t.touches[0].clientX, a = "clientY" in t ? t.clientY : t.touches[0].clientY;
+			m.current = {
+				x: i,
+				y: a
+			}, h.current = n, s || (e.current.style.cursor = `${r}-resize`, document.body.style.cursor = `${r}-resize`);
+		},
+		initialCrop: p
+	};
+}, ct = ({ onMouseDown: e }) => /* @__PURE__ */ (0, h.jsx)("div", {
+	className: X.mobileBorder,
+	children: /* @__PURE__ */ (0, h.jsx)("div", {
+		className: X.mobilePointer,
 		onTouchStart: (t) => e(t, "br", "nwse")
 	})
-}), X = 10, Z = 200, Q = (e, t, n) => (e < X && (e = X), e > Z && (e = Z), {
-	updatedScale: e,
-	updatedWidth: Math.round(e / 100 * t),
-	updatedHeight: Math.round(e / 100 * n)
-}), Se = ({ onResizing: e }) => {
-	let { getLastHistoryItem: t, setCurrentAction: n, addToHistory: r, setSidebar: a } = R(), { width: o, height: l, base64: u } = t(), [d, f] = c(!1), [m, h] = c(o), [g, _] = c(l), v = s(0), { resize: y } = b(), x = S(), C = (t) => {
-		let { updatedScale: n, updatedWidth: r, updatedHeight: i } = Q(parseInt(t.target.value) / o * 100, o, l);
-		h(r), _(i), e(n);
-	}, w = (t) => {
-		let { updatedScale: n, updatedWidth: r, updatedHeight: i } = Q(parseInt(t.target.value) / l * 100, o, l);
-		_(i), h(r), e(n);
-	}, T = () => {
-		e(100), n(null), a(!0);
-	}, O = async () => {
-		try {
-			f(!0);
-			let t = await y(u, m, g);
-			r({
-				name: "Resize",
-				base64: t,
-				width: m,
-				height: g
-			}), e(100), a(!0);
-		} catch (e) {
-			console.error("Failed to process image:", e);
-		} finally {
-			f(!1);
-		}
+}), Z = {
+	flip: "_flip_17ic5_1",
+	btnH: "_btnH_17ic5_14",
+	btnV: "_btnV_17ic5_20"
+}, lt = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } = j(), [i, a] = s(!1), [o, c] = s(!1), { width: l, height: u } = e();
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: Z.flip,
+		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+			className: Z.scGroup,
+			children: [/* @__PURE__ */ (0, h.jsx)(N, {
+				variant: "outline",
+				className: `${Z.btnH}`,
+				onClick: () => {
+					a((e) => !e), t({
+						name: w.FLIP,
+						args: {
+							horizontal: !i,
+							vertical: o
+						}
+					});
+				},
+				children: /* @__PURE__ */ (0, h.jsx)(le, { style: { color: i ? "var(--accent-blue)" : "var(--foreground)" } })
+			}), /* @__PURE__ */ (0, h.jsx)(N, {
+				variant: "outline",
+				className: `${Z.btnV} `,
+				onClick: () => {
+					c((e) => !e), t({
+						name: w.FLIP,
+						args: {
+							horizontal: i,
+							vertical: !o
+						}
+					});
+				},
+				children: /* @__PURE__ */ (0, h.jsx)(ue, { style: { color: o ? "var(--accent-blue)" : "var(--foreground)" } })
+			})]
+		}), /* @__PURE__ */ (0, h.jsx)(L, {
+			disabled: !i && !o,
+			onSave: () => {
+				n({
+					width: l,
+					height: u,
+					action: {
+						name: w.FLIP,
+						args: {
+							horizontal: i,
+							vertical: o
+						}
+					}
+				}), r(!0);
+			},
+			onClose: () => {
+				t(null), r(!0);
+			}
+		})]
+	});
+}, Q = {
+	rotate: "_rotate_gkt07_1",
+	btnH: "_btnH_gkt07_14",
+	btnV: "_btnV_gkt07_20"
+}, ut = () => {
+	let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } = j(), { width: a, height: s } = t(), c = e(), l = o(c), u = o(c), d = (e) => {
+		u.current += e, i({
+			name: "rotate",
+			args: { degrees: u.current }
+		});
 	};
-	return i(() => {
-		let t = Math.round(m / o * 100), n = (t) => {
-			let { updatedHeight: n, updatedWidth: r } = Q(t, o, l);
-			_(n), h(r), e(t);
-		}, r = (e) => {
-			if (d) return;
-			let r = Math.sign(e.deltaY);
-			t -= r * 2, t <= X && (t = X), t >= Z && (t = Z), n(t);
-		}, i = (e) => {
-			v.current = e.touches[0].clientY;
-		}, a = (e) => {
-			if (d) return;
-			let r = e.touches[0].clientY, i = v.current - r;
-			Math.abs(i) < 10 || (t += Math.sign(i) * 2, t <= X && (t = X), t >= Z && (t = Z), n(t), v.current = r);
-		}, s = new AbortController(), { signal: c } = s;
-		return window.addEventListener("wheel", r, { signal: c }), window.addEventListener("touchstart", i, { signal: c }), window.addEventListener("touchmove", a, { signal: c }), () => s.abort();
-	}, [
-		l,
-		o,
-		d,
-		x,
-		e,
-		m
-	]), /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "resize",
-		children: [
-			/* @__PURE__ */ (0, p.jsx)("div", {
-				className: "resize-text",
-				children: x ? "Slide UP/Down to Resize" : "Scroll UP/Down to Resize"
-			}),
-			/* @__PURE__ */ (0, p.jsx)("div", { className: "resize-border" }),
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "resize-tools",
-				children: [
-					/* @__PURE__ */ (0, p.jsx)(H, {
-						value: m,
-						name: "width",
-						label: "Width",
-						disabled: d,
-						style: { width: "88px" },
-						onChange: C
-					}),
-					/* @__PURE__ */ (0, p.jsx)(ee, { className: "resize-tools-lock" }),
-					/* @__PURE__ */ (0, p.jsx)(H, {
-						value: g,
-						name: "height",
-						label: "Height",
-						disabled: d,
-						style: { width: "88px" },
-						onChange: w
-					}),
-					/* @__PURE__ */ (0, p.jsxs)("div", {
-						className: "resize-tools-buttons",
-						children: [/* @__PURE__ */ (0, p.jsx)(z, {
-							variant: "outline",
-							className: "resize-tools-save text-green",
-							disabled: m === o || d,
-							onClick: () => O(),
-							children: d ? /* @__PURE__ */ (0, p.jsx)(L, {}) : /* @__PURE__ */ (0, p.jsx)(E, {})
-						}), /* @__PURE__ */ (0, p.jsx)(z, {
-							variant: "outline",
-							className: "resize-tools-close text-red",
-							disabled: d,
-							onClick: T,
-							children: /* @__PURE__ */ (0, p.jsx)(D, {})
-						})]
-					})
-				]
-			})
-		]
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: Q.rotate,
+		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+			className: Q.scGroup,
+			children: [/* @__PURE__ */ (0, h.jsx)(N, {
+				variant: "outline",
+				className: `${Q.btnH}`,
+				onClick: () => d(90),
+				children: /* @__PURE__ */ (0, h.jsx)(de, {})
+			}), /* @__PURE__ */ (0, h.jsx)(N, {
+				variant: "outline",
+				className: `${Q.btnV} `,
+				onClick: () => d(-90),
+				children: /* @__PURE__ */ (0, h.jsx)(fe, {})
+			})]
+		}), /* @__PURE__ */ (0, h.jsx)(L, {
+			onSave: async () => {
+				n({
+					...Ne(a, s, l.current, u.current),
+					action: {
+						name: "rotate",
+						args: { degrees: u.current }
+					}
+				}), r(!0);
+			},
+			onClose: () => {
+				i(null), r(!0);
+			}
+		})]
 	});
-}, Ce = () => {
-	let { getLastHistoryItem: e, currentAction: t } = R(), n = s(null), r = s(null), { width: i, height: a, base64: o } = e(), c = t?.name === "crop", l = t?.name === "resize", u = c || l, d = (e) => {
-		n.current && (n.current.style.transform = `scale(${e / 100})`);
-	}, f = `frame ${u ? "mask" : ""}`, m = `frame-image ${u ? "frame-image--faded" : ""}`;
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: f,
+}, dt = { frame: "_frame_xffug_1" }, ft = () => {
+	let { currentAction: e } = j(), t = e?.name === w.CROP, n = e?.name === w.RESIZE, r = e?.name === w.FLIP, i = e?.name === w.ROTATE, a = t;
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: `${dt.frame} ${a ? P.mask : ""}`,
 		children: [
-			/* @__PURE__ */ (0, p.jsxs)("div", {
-				ref: n,
-				style: { aspectRatio: `${i} / ${a}` },
-				className: "frame-preview",
-				children: [/* @__PURE__ */ (0, p.jsx)("img", {
-					ref: r,
-					src: o,
-					alt: "Image",
-					className: m
-				}), c && /* @__PURE__ */ (0, p.jsx)(pe, {}, t?.args?.id)]
-			}),
-			l && /* @__PURE__ */ (0, p.jsx)(Se, { onResizing: d }),
-			c && /* @__PURE__ */ (0, p.jsx)(me, {})
+			/* @__PURE__ */ (0, h.jsx)(Ze, { style: t ? { opacity: .4 } : {} }),
+			t && /* @__PURE__ */ (0, h.jsx)(Qe, {}, e?.args?.id),
+			n && /* @__PURE__ */ (0, h.jsx)(Xe, {}),
+			t && /* @__PURE__ */ (0, h.jsx)($e, {}),
+			r && /* @__PURE__ */ (0, h.jsx)(lt, {}),
+			i && /* @__PURE__ */ (0, h.jsx)(ut, {})
 		]
 	});
-}, we = () => {
-	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = R(), { width: r, height: i } = e() ?? {
+}, $ = {
+	sidebar: "_sidebar_8qtha_1",
+	settings: "_settings_8qtha_11",
+	container: "_container_8qtha_25",
+	content: "_content_8qtha_31",
+	closeBtn: "_closeBtn_8qtha_47",
+	separator: "_separator_8qtha_52",
+	resize: "_resize_8qtha_56",
+	resizeIcon: "_resizeIcon_8qtha_61",
+	resizeSize: "_resizeSize_8qtha_66",
+	crop: "_crop_8qtha_70",
+	ratio: "_ratio_8qtha_75",
+	sidebarPreset: "_sidebarPreset_8qtha_80",
+	flipRotate: "_flipRotate_8qtha_85"
+}, pt = () => {
+	let { getLastHistoryItem: e, setCurrentAction: t, setSidebar: n } = j(), { width: r, height: i } = e() ?? {
 		width: 0,
 		height: 0
 	};
-	return /* @__PURE__ */ (0, p.jsxs)(z, {
+	return /* @__PURE__ */ (0, h.jsxs)(N, {
 		variant: "outline",
-		className: "sidebar-resize",
+		className: $.resize,
 		onClick: () => {
 			t({
-				name: "resize",
+				name: w.RESIZE,
 				args: {
 					width: r,
 					height: i
 				}
 			}), n(!1);
 		},
-		children: [/* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "sidebar-resize-icon",
-			children: [/* @__PURE__ */ (0, p.jsx)(I, {}), "Resize"]
-		}), /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "sidebar-resize-size",
+		children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+			className: $.resizeIcon,
+			children: [/* @__PURE__ */ (0, h.jsx)(k, {}), "Resize"]
+		}), /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: $.resizeSize,
 			children: [
 				r,
 				" x ",
@@ -1364,239 +1763,189 @@ var be = ({ imgRef: e, cropRef: t }) => {
 			]
 		})]
 	});
-}, Te = () => {
-	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = R(), { name: i, args: a } = e || {}, o = i === "crop" ? a?.id : "", { width: s, height: c } = n(), l = s / c, u = (e) => {
+}, mt = () => {
+	let { currentAction: e, setCurrentAction: t, getLastHistoryItem: n, setSidebar: r } = j(), { name: i, args: a } = e || {}, o = i === "crop" ? a?.id : "", { width: s, height: c } = n(), l = s / c, u = (e) => {
 		e !== o && (t({
 			name: "crop",
 			args: {
 				id: e,
 				ratio: e === "1:1" ? 1 : l,
-				isFree: e === "freeform",
-				preset: null
+				isFree: e === "freeform"
 			}
 		}), r(!1));
 	};
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "sidebar-crop",
-		children: [/* @__PURE__ */ (0, p.jsx)("h4", { children: "Crop" }), /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "sidebar-crop-ratios",
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: $.crop,
+		children: [/* @__PURE__ */ (0, h.jsx)("h4", { children: "Crop" }), /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: $.ratio,
 			children: [
-				/* @__PURE__ */ (0, p.jsx)(B, {
+				/* @__PURE__ */ (0, h.jsx)(me, {
 					label: "Freeform",
-					icon: /* @__PURE__ */ (0, p.jsx)(N, {}),
+					icon: /* @__PURE__ */ (0, h.jsx)(oe, {}),
 					active: o === "freeform",
 					onClick: () => u("freeform")
 				}),
-				/* @__PURE__ */ (0, p.jsx)(B, {
+				/* @__PURE__ */ (0, h.jsx)(me, {
 					label: "Original",
-					icon: /* @__PURE__ */ (0, p.jsx)(P, {}),
+					icon: /* @__PURE__ */ (0, h.jsx)(se, {}),
 					active: o === "original",
 					onClick: () => u("original")
 				}),
-				/* @__PURE__ */ (0, p.jsx)(B, {
+				/* @__PURE__ */ (0, h.jsx)(me, {
 					label: "1:1",
-					icon: /* @__PURE__ */ (0, p.jsx)(F, {}),
+					icon: /* @__PURE__ */ (0, h.jsx)(ce, {}),
 					active: o === "1:1",
 					onClick: () => u("1:1")
 				})
 			]
 		})]
 	});
-}, $ = [
-	{
-		label: "Facebook",
-		value: "facebook",
-		options: [
-			{
-				value: "facebook-post",
-				label: "Post",
-				w: 1200,
-				h: 630,
-				rightLabel: "1200 x 630"
-			},
-			{
-				value: "facebook-cover",
-				label: "Cover",
-				w: 851,
-				h: 315,
-				rightLabel: "851 x 315"
-			},
-			{
-				value: "facebook-profile",
-				label: "Profile",
-				w: 170,
-				h: 170,
-				rightLabel: "170 x 170"
-			},
-			{
-				value: "facebook-story",
-				label: "Story",
-				w: 1080,
-				h: 1920,
-				rightLabel: "1080 x 1920"
-			}
-		]
-	},
-	{
-		label: "Instagram",
-		value: "instagram",
-		options: [
-			{
-				value: "instagram-landscape",
-				label: "Landscape",
-				w: 1080,
-				h: 566,
-				rightLabel: "1080 x 566"
-			},
-			{
-				value: "instagram-portait",
-				label: "Portait",
-				w: 1080,
-				h: 1350,
-				rightLabel: "1080 x 1350"
-			},
-			{
-				value: "instagram-square",
-				label: "Square",
-				w: 1080,
-				h: 1080,
-				rightLabel: "1080 x 1080"
-			},
-			{
-				value: "instagram-story",
-				label: "Story",
-				w: 1080,
-				h: 1920,
-				rightLabel: "1080 x 1920"
-			},
-			{
-				value: "instagram-thumbnail",
-				label: "Thumbnail",
-				w: 161,
-				h: 161,
-				rightLabel: "161 x 161"
-			}
-		]
-	},
-	{
-		label: "LinkedIn",
-		value: "linkedin",
-		options: [
-			{
-				value: "linkedin-blog-post",
-				label: "Blog Post",
-				w: 1200,
-				h: 627,
-				rightLabel: "1200 x 627"
-			},
-			{
-				value: "linkedin-cover",
-				label: "Cover",
-				w: 1128,
-				h: 191,
-				rightLabel: "1128 x 191"
+}, ht = Te.map((e) => e.options).flat(), gt = () => {
+	let { setCurrentAction: e, currentAction: t, setSidebar: n } = j(), r = t?.name === "crop" && ht.some((e) => e.value === t.args.id) ? t.args.id : "";
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: $.sidebarPreset,
+		children: [/* @__PURE__ */ (0, h.jsx)("h4", { children: "Presets" }), /* @__PURE__ */ (0, h.jsx)("div", { children: /* @__PURE__ */ (0, h.jsx)(ge, {
+			value: r,
+			placeholder: "Select a preset",
+			onChange: (t) => {
+				if (!t) return;
+				let r = Te.map((e) => e.options).flat().find((e) => e.value === t);
+				if (!r) return;
+				let i = {
+					id: t,
+					ratio: r.w / r.h,
+					isFree: !1,
+					preset: {
+						width: r.w,
+						height: r.h
+					}
+				};
+				e({
+					name: "crop",
+					args: i
+				}), n(!1);
 			},
-			{
-				value: "linkedin-profile",
-				label: "Profile",
-				w: 400,
-				h: 400,
-				rightLabel: "400 x 400"
-			}
-		]
-	}
-], Ee = $.map((e) => e.options).flat(), De = () => {
-	let { setCurrentAction: e, currentAction: t, setSidebar: n } = R(), r = t?.name === "crop" && Ee.some((e) => e.value === t.args.id) ? t.args.id : "";
-	return /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "sidebar-preset",
-		children: [/* @__PURE__ */ (0, p.jsx)("h4", { children: "Presets" }), /* @__PURE__ */ (0, p.jsx)("div", {
-			className: "relative",
-			children: /* @__PURE__ */ (0, p.jsx)(te, {
-				value: r,
-				placeholder: "Select a preset",
-				onChange: (t) => {
-					if (!t) return;
-					let r = $.map((e) => e.options).flat().find((e) => e.value === t);
-					if (!r) return;
-					let i = {
-						id: t,
-						ratio: r.w / r.h,
-						isFree: !1,
-						preset: {
-							w: r.w,
-							h: r.h
-						}
-					};
-					e({
-						name: "crop",
-						args: i
-					}), n(!1);
-				},
-				items: $
-			})
-		})]
+			items: Te
+		}) })]
+	});
+}, _t = () => {
+	let { setCurrentAction: e, setSidebar: t } = j();
+	return /* @__PURE__ */ (0, h.jsx)(N, {
+		variant: "outline",
+		className: $.resize,
+		onClick: () => {
+			e({
+				name: w.FLIP,
+				args: {
+					horizontal: !1,
+					vertical: !1
+				}
+			}), t(!1);
+		},
+		children: /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: $.resizeIcon,
+			children: [/* @__PURE__ */ (0, h.jsx)(le, {}), "Flip"]
+		})
 	});
-}, Oe = () => {
-	let { getSidebar: e, setSidebar: t } = R(), n = e(), r = w("md");
-	return /* @__PURE__ */ (0, p.jsxs)(p.Fragment, { children: [/* @__PURE__ */ (0, p.jsx)(z, {
+}, vt = () => {
+	let { getLastRotation: e, setCurrentAction: t, setSidebar: n } = j();
+	return /* @__PURE__ */ (0, h.jsx)(N, {
 		variant: "outline",
-		className: "sidebar-settings",
+		className: $.resize,
+		onClick: () => {
+			t({
+				name: "rotate",
+				args: { degrees: e() }
+			}), n(!1);
+		},
+		children: /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: $.resizeIcon,
+			children: [/* @__PURE__ */ (0, h.jsx)(de, {}), "Rotate"]
+		})
+	});
+}, yt = () => {
+	let { sidebar: e, setSidebar: t } = j(), n = ee("md");
+	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(N, {
+		variant: "outline",
+		className: $.settings,
 		onClick: () => t(!0),
-		children: /* @__PURE__ */ (0, p.jsx)(M, {})
-	}), /* @__PURE__ */ (0, p.jsx)("div", {
-		className: "sidebar",
-		style: { transform: r && n ? "translateX(-320px)" : "translateX(0%)" },
-		children: /* @__PURE__ */ (0, p.jsx)("div", {
-			className: "sidebar-container",
-			children: /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "sidebar-content",
+		children: /* @__PURE__ */ (0, h.jsx)(ae, {})
+	}), /* @__PURE__ */ (0, h.jsx)("div", {
+		className: $.sidebar,
+		style: { transform: n && e ? "translateX(-320px)" : "translateX(0%)" },
+		children: /* @__PURE__ */ (0, h.jsx)("div", {
+			className: $.container,
+			children: /* @__PURE__ */ (0, h.jsxs)("div", {
+				className: $.content,
 				children: [
-					r && /* @__PURE__ */ (0, p.jsx)(z, {
+					n && /* @__PURE__ */ (0, h.jsx)(N, {
 						variant: "ghost",
-						className: "sidebar-close-btn btn-rect",
+						className: `${$.closeBtn} ${M.rect}`,
 						onClick: () => t(!1),
-						children: /* @__PURE__ */ (0, p.jsx)(D, {})
+						children: /* @__PURE__ */ (0, h.jsx)(te, {})
 					}),
-					/* @__PURE__ */ (0, p.jsx)(we, {}),
-					/* @__PURE__ */ (0, p.jsx)(V, { className: "sidebar-separator" }),
-					/* @__PURE__ */ (0, p.jsx)(Te, {}),
-					/* @__PURE__ */ (0, p.jsx)(V, { className: "sidebar-separator" }),
-					/* @__PURE__ */ (0, p.jsx)(De, {})
+					/* @__PURE__ */ (0, h.jsx)(pt, {}),
+					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
+					/* @__PURE__ */ (0, h.jsx)(mt, {}),
+					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
+					/* @__PURE__ */ (0, h.jsx)(gt, {}),
+					/* @__PURE__ */ (0, h.jsx)(F, { className: $.separator }),
+					/* @__PURE__ */ (0, h.jsxs)("div", {
+						className: $.flipRotate,
+						children: [/* @__PURE__ */ (0, h.jsx)(_t, {}), /* @__PURE__ */ (0, h.jsx)(vt, {})]
+					})
 				]
 			})
 		})
 	})] });
-}, ke = ({ image: e, onSave: t, onBack: n }) => {
-	let { loading: r, error: i, width: a, height: o, base64: s, extension: c } = y(e);
-	return r || i || !s || !c ? /* @__PURE__ */ (0, p.jsxs)("div", {
-		className: "picedi sys",
-		children: [
-			r && /* @__PURE__ */ (0, p.jsx)(m, { size: 48 }),
-			i && /* @__PURE__ */ (0, p.jsx)("div", {
-				className: "text-red",
-				children: i
-			}),
-			!r && !i && (!s || !c) && /* @__PURE__ */ (0, p.jsx)("div", {
-				className: "text-red",
-				children: "Failed to load image."
+}, bt = ({ image: e, onSave: t, onBack: n, theme: r = "light", settings: i = u }) => {
+	let { loading: a, error: o, mimeType: s, width: c, height: l, originalBlob: d, previewUrl: f, isAlpha: p } = b(e);
+	return a || o || !d || !s ? /* @__PURE__ */ (0, h.jsx)("div", {
+		className: `${P.root} ${P.wrapper}`,
+		"data-theme": r,
+		children: /* @__PURE__ */ (0, h.jsxs)("div", {
+			className: P.system,
+			children: [
+				a && /* @__PURE__ */ (0, h.jsx)(A, { style: {
+					width: 48,
+					height: 48
+				} }),
+				o && /* @__PURE__ */ (0, h.jsx)("div", {
+					className: P.textRed,
+					children: o
+				}),
+				!a && !o && (!d || !s) && /* @__PURE__ */ (0, h.jsx)("div", {
+					className: P.textRed,
+					children: "Failed to load image."
+				})
+			]
+		})
+	}) : /* @__PURE__ */ (0, h.jsx)(g, {
+		mimeType: s,
+		width: c,
+		height: l,
+		originalBlob: d,
+		previewUrl: f,
+		isAlpha: p,
+		settings: {
+			...u,
+			...i
+		},
+		children: /* @__PURE__ */ (0, h.jsx)("div", {
+			className: `${P.root} ${P.wrapper}`,
+			"data-theme": r,
+			children: /* @__PURE__ */ (0, h.jsxs)("div", {
+				className: P.main,
+				children: [/* @__PURE__ */ (0, h.jsx)(qe, {
+					onSave: t,
+					onBack: n
+				}), /* @__PURE__ */ (0, h.jsxs)("div", {
+					className: P.grid,
+					children: [/* @__PURE__ */ (0, h.jsx)(ft, {}), /* @__PURE__ */ (0, h.jsx)(yt, {})]
+				})]
 			})
-		]
-	}) : /* @__PURE__ */ (0, p.jsx)(_, {
-		base64: s,
-		width: a,
-		height: o,
-		ext: c,
-		children: /* @__PURE__ */ (0, p.jsxs)("div", {
-			className: "picedi main",
-			children: [/* @__PURE__ */ (0, p.jsx)(re, {
-				onSave: t,
-				onBack: n
-			}), /* @__PURE__ */ (0, p.jsxs)("div", {
-				className: "grid",
-				children: [/* @__PURE__ */ (0, p.jsx)(Ce, {}), /* @__PURE__ */ (0, p.jsx)(Oe, {})]
-			})]
 		})
 	});
 };
 //#endregion
-export { ke as ImageEditor };
+export { bt as Pixedi };