pixedi 1.5.1 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +43 -3
  3. package/README.npm.md +43 -3
  4. package/dist/lib/index.js +1423 -772
  5. package/dist/lib/index.umd.js +31 -3
  6. package/dist/widget/pixedi-widget.js +34 -6
  7. package/package.json +1 -1
package/dist/lib/index.js CHANGED
@@ -1,15 +1,15 @@
1
- (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._button_1vpzl_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_1vpzl_1:disabled{pointer-events:none;opacity:.5}._button_1vpzl_1 svg{flex-shrink:0;width:16px;height:16px}._default_1vpzl_35{background-color:var(--primary);color:var(--primary-foreground)}._default_1vpzl_35:hover{opacity:.9}._outline_1vpzl_44{border-color:var(--border);background-color:var(--background);color:var(--foreground)}._outline_1vpzl_44:hover{background-color:var(--secondary)}._ghost_1vpzl_54{color:var(--foreground);padding:0 8px}._ghost_1vpzl_54:hover{background-color:var(--secondary)}._rect_1vpzl_63{width:32px;height:32px}._separator_gp8ff_1{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}._separator_gp8ff_1[data-orientation=horizontal]{width:100%;height:1px}._separator_gp8ff_1[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}._wrapper_1aw0m_1{box-sizing:border-box;width:100%;position:relative}._trigger_1aw0m_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_1aw0m_6:hover,._trigger_1aw0m_6:focus{border-color:var(--muted-foreground)}._triggerArrow_1aw0m_31{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}._wrapper_1aw0m_1[data-state=open] ._triggerArrow_1aw0m_31{transform:rotate(180deg)}._content_1aw0m_40{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_1aw0m_40::-webkit-scrollbar{width:4px}._content_1aw0m_40::-webkit-scrollbar-track{background:0 0}._content_1aw0m_40::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}._wrapper_1aw0m_1[data-state=closed] ._content_1aw0m_40{display:none}._groupLabel_1aw0m_74{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}._item_1aw0m_81{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_1aw0m_81:hover{background-color:var(--secondary)}._itemLeft_1aw0m_98{font-size:14px;font-weight:400}._itemAddon_1aw0m_102{align-items:center;gap:8px;display:flex}._itemAddon_1aw0m_102 span{color:var(--muted-foreground);font-size:12px}._itemAddon_1aw0m_102 svg{font-size:14px}._itemAddon_1aw0m_102 b{flex-shrink:0;width:16px;height:16px}._itemRightContainer_1aw0m_122{align-items:center;gap:8px;display:flex}._itemRight_1aw0m_122{color:var(--muted-foreground);font-size:14px}._itemCheck_1aw0m_131{width:16px;height:16px;color:var(--foreground);flex-shrink:0}:host{height:100%;display:block}:host *{box-sizing:border-box}._root_c6gk7_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;--font-mono:"Courier New", Courier, monospace;--color-white:#fff;--color-white-fade:color-mix(in srgb, var(--color-white) 40%, transparent);--color-black:#000;--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_c6gk7_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_c6gk7_8 h1,._root_c6gk7_8 h2,._root_c6gk7_8 h3,._root_c6gk7_8 h4,._root_c6gk7_8 h5,._root_c6gk7_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_c6gk7_73{color:var(--color-red)}._bgRed_c6gk7_76{background-color:var(--color-red)}._bgGreen_c6gk7_79{background-color:var(--color-green)}._textGreen_c6gk7_82{color:var(--color-green)}._mask_c6gk7_85{background-color:var(--overlay-bg)}._semibold_c6gk7_88{letter-spacing:.4px;font-weight:600}._bold_c6gk7_92{letter-spacing:.4px;font-weight:700}._system_c6gk7_96{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_c6gk7_106{width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}._grid_c6gk7_113{grid-template:"header header"48px"sidebar frame"minmax(0,1fr)"sidebar infobar"32px/48px 1fr;height:100%;display:grid;position:relative}._grid_c6gk7_113._mobile_c6gk7_124{grid-template-columns:0 1fr}._gridNoInfobar_c6gk7_128{grid-template:"header header"48px"sidebar frame"1fr/48px 1fr;height:100%;display:grid;position:relative}._gridNoInfobar_c6gk7_128._mobile_c6gk7_124{grid-template-columns:0 1fr}._input_kyavx_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_kyavx_1:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}._input_kyavx_1:focus{box-shadow:0 0 0 1px var(--ring)}._input_kyavx_1:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}._input_kyavx_1::placeholder{color:var(--muted-foreground);opacity:1}._numberClean_kyavx_39::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39[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_1e7jm_1{margin-left:4px;display:flex}._save_1e7jm_6{width:36px;color:var(--color-green);border-top-right-radius:0;border-bottom-right-radius:0}._close_1e7jm_13{width:36px;color:var(--color-red);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._tooltip_1dl6s_1{position:relative}._container_1dl6s_5{gap:0;display:flex}._container_1dl6s_5[data-position=left],._container_1dl6s_5[data-position=right]{flex-direction:column}._container_1dl6s_5 [data-tooltip]{pointer-events:auto}._popup_1dl6s_19{top:var(--tooltip-y,0px);left:var(--tooltip-x,0px);background-color:var(--foreground);color:var(--background);z-index:999;pointer-events:none;opacity:var(--tooltip-opacity,0);width:var(--tooltip-w,auto);height:var(--tooltip-h,auto);transition:opacity var(--tooltip-fade,.2s);border-radius:4px;font-size:14px;position:absolute;transform:translate(-50%,-100%);box-shadow:0 2px 8px #0000001a}._popup_1dl6s_19:before{content:"";background-color:inherit;width:10px;height:10px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}._popup_1dl6s_19[data-position=top]{transform:translate(-50%,-100%)}._popup_1dl6s_19[data-position=top]:before{top:auto;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}._popup_1dl6s_19[data-position=bottom]{transform:translate(-50%)}._popup_1dl6s_19[data-position=bottom]:before{top:-3px;bottom:auto;left:50%;transform:translate(-50%)rotate(45deg)}._popup_1dl6s_19[data-position=left]{transform:translate(-100%,-50%)}._popup_1dl6s_19[data-position=left]:before{top:50%;left:auto;right:-3px;transform:translateY(-50%)rotate(45deg)}._popup_1dl6s_19[data-position=right]{transform:translateY(-50%)}._popup_1dl6s_19[data-position=right]:before{top:50%;left:-3px;right:auto;transform:translateY(-50%)rotate(45deg)}._popup_1dl6s_19._animated_1dl6s_92{transition:left var(--tooltip-slide,.4s), top var(--tooltip-slide,.4s), width var(--tooltip-slide,.4s), height var(--tooltip-slide,.4s), opacity var(--tooltip-fade,.2s)}._mask_1dl6s_101{border-radius:inherit;width:100%;height:100%;overflow:hidden}._track_1dl6s_108{width:max-content;height:max-content;transform:translateX(calc(-1 * var(--tooltip-offset,0px)));display:flex}._track_1dl6s_108[data-position=left],._track_1dl6s_108[data-position=right]{transform:translateY(calc(-1 * var(--tooltip-offset,0px)));flex-direction:column}._animated_1dl6s_92 ._track_1dl6s_108{transition:transform var(--tooltip-slide,.4s)}._title_1dl6s_125{min-width:var(--tooltip-item-w,auto);max-width:var(--tooltip-item-w,none);min-height:var(--tooltip-item-h,32px);max-height:var(--tooltip-item-h,none);white-space:nowrap;box-sizing:border-box;flex:none;justify-content:center;align-items:center;padding:0 10px;display:flex}._surfaceTool_h38e6_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}._header_1yueu_1{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);grid-area:header;justify-content:space-between;align-items:center;height:48px;padding:0 8px;display:flex}._left_1yueu_12{align-items:center;gap:0;display:flex}._sidebarToggle_1yueu_17{border-right:solid 1px var(--border);cursor:pointer;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:none;position:relative;left:-8px}._sidebarToggle_1yueu_17._mobile_1yueu_29{display:flex}._sidebarIcon_1yueu_33{stroke-width:1.6px;width:18px;height:18px}._tools_1yueu_38{gap:8px;display:flex}._history_1yueu_42{align-items:center;gap:6px;display:flex}._historyText_1yueu_47{color:var(--muted-foreground);font-size:14px;font-family:var(--font-mono)}._sidebar_1j9gh_1{background:var(--background);border-right:1px solid var(--border);z-index:10;grid-area:sidebar;width:48px;position:relative}._sidebar_1j9gh_1._mobile_1j9gh_9{transition:transform .2s ease-out;transform:translate(-110%);box-shadow:0 2px 8px #0000001a}._sidebar_1j9gh_1._mobile_1j9gh_9._open_1j9gh_14{transform:translate(0%)}._wrapper_1j9gh_19{flex-direction:column;display:flex}._item_1j9gh_23{cursor:pointer;justify-content:center;align-items:center;height:48px;transition:all .2s;display:flex;position:relative}._item_1j9gh_23 svg{width:16px;height:16px}._item_1j9gh_23:hover{background-color:var(--accent)}._item_1j9gh_23._selected_1j9gh_41{color:var(--accent-blue);background-color:var(--accent)}._item_1j9gh_23._selected_1j9gh_41:before{content:"";background-color:var(--accent-blue);width:2px;position:absolute;top:0;bottom:0;left:0}._infobar_ofe91_1{background:var(--muted);font-family:var(--font-mono);grid-area:infobar;justify-content:space-between;align-items:center;padding:0 16px;font-size:14px;display:flex}._resize_1sbig_1{align-items:center;padding-top:16px}._toolsLock_1sbig_5{width:12px;height:12px;color:var(--muted-foreground)}._indicatorWrapper_1sbig_10{justify-content:center;width:100%;height:2px;display:flex;position:absolute;top:0;left:0}._indicator_1sbig_10{background:var(--accent-blue);opacity:.6;border-radius:2px;width:30%;height:100%;transition:width .2s}._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_1co2u_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._box_1co2u_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}._toolsInfo_1co2u_18{-webkit-user-select:none;user-select:none;min-width:54px;margin-top:-2px;display:inline-block}._toolsInfoLabel_1co2u_25{color:var(--muted-foreground);font-size:12px;line-height:12px}._toolsInfoValue_1co2u_30{color:var(--foreground);font-size:14px;line-height:14px}._linesBox_1co2u_35{pointer-events:none;position:absolute;inset:1px}._line_1co2u_35{border:1px dashed var(--color-white);opacity:.5;position:absolute}._lineV_1co2u_45{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}._lineH_1co2u_53{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}._pointer_1co2u_61{box-sizing:border-box;width:14px;height:14px;position:absolute}._pointerTopLeft_1co2u_67{border-top:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nwse-resize;top:-6px;left:-6px}._pointerTopRight_1co2u_74{border-top:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nesw-resize;top:-6px;right:-6px}._pointerBottomRight_1co2u_81{border-bottom:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nwse-resize;bottom:-6px;right:-6px}._pointerBottomLeft_1co2u_88{border-bottom:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nesw-resize;bottom:-6px;left:-6px}._mobileBorder_1co2u_95{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}._mobilePointer_1co2u_101{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}._info_1co2u_112{height:16px;font-family:var(--font-mono);color:#000;background-color:var(--color-white-fade);box-sizing:border-box;align-items:center;padding:0 6px;font-size:12px;display:flex;position:absolute}._info_1co2u_112 b{font-weight:600;transform:translateY(1px)}._infoX_1co2u_129{border-left:solid 2px var(--accent-blue);top:-12px;left:16px}._infoY_1co2u_134{transform-origin:100%;border-right:solid 2px var(--accent-blue);top:8px;right:calc(100% + 4px);transform:rotate(-90deg)}._infoW_1co2u_141{border-right:solid 2px var(--accent-blue);bottom:-12px;right:16px}._infoH_1co2u_146{transform-origin:0%;border-left:solid 2px var(--accent-blue);bottom:8px;left:calc(100% + 4px);transform:rotate(-90deg)}._group_1co2u_153{flex-shrink:0;width:max-content;display:flex}._group_1co2u_153 button{color:var(--foreground);border-radius:0}._group_1co2u_153 button._active_1co2u_162{color:var(--accent-blue);background:var(--muted)}._group_1co2u_153 button:not(:first-child){margin-left:-1px}._group_1co2u_153 button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}._group_1co2u_153 button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}._select_1ip4k_1{width:210px}._btnH_15adi_1{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_15adi_7{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._frame_15mog_1{box-sizing:border-box;grid-area:frame;width:100%;height:100%;margin:0 auto;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
- import { Children as e, createContext as t, forwardRef as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
1
+ (function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`._button_1vpzl_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_1vpzl_1:disabled{pointer-events:none;opacity:.5}._button_1vpzl_1 svg{flex-shrink:0;width:16px;height:16px}._default_1vpzl_35{background-color:var(--primary);color:var(--primary-foreground)}._default_1vpzl_35:hover{opacity:.9}._outline_1vpzl_44{border-color:var(--border);background-color:var(--background);color:var(--foreground)}._outline_1vpzl_44:hover{background-color:var(--secondary)}._ghost_1vpzl_54{color:var(--foreground);padding:0 8px}._ghost_1vpzl_54:hover{background-color:var(--secondary)}._rect_1vpzl_63{width:32px;height:32px}._separator_gp8ff_1{background-color:var(--border);box-sizing:border-box;border:none;flex-shrink:0;display:block}._separator_gp8ff_1[data-orientation=horizontal]{width:100%;height:1px}._separator_gp8ff_1[data-orientation=vertical]{align-self:stretch;width:1px;height:100%;margin:0}._wrapper_1aw0m_1{box-sizing:border-box;width:100%;position:relative}._trigger_1aw0m_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_1aw0m_6:hover,._trigger_1aw0m_6:focus{border-color:var(--muted-foreground)}._triggerArrow_1aw0m_31{width:16px;height:16px;color:var(--muted-foreground);transition:transform .2s}._wrapper_1aw0m_1[data-state=open] ._triggerArrow_1aw0m_31{transform:rotate(180deg)}._content_1aw0m_40{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_1aw0m_40::-webkit-scrollbar{width:4px}._content_1aw0m_40::-webkit-scrollbar-track{background:0 0}._content_1aw0m_40::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:10px}._wrapper_1aw0m_1[data-state=closed] ._content_1aw0m_40{display:none}._groupLabel_1aw0m_74{color:var(--muted-foreground);-webkit-user-select:none;user-select:none;padding:8px 10px;font-size:12px;font-weight:500}._item_1aw0m_81{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_1aw0m_81:hover{background-color:var(--secondary)}._itemLeft_1aw0m_98{font-size:14px;font-weight:400}._itemAddon_1aw0m_102{align-items:center;gap:8px;display:flex}._itemAddon_1aw0m_102 span{color:var(--muted-foreground);font-size:12px}._itemAddon_1aw0m_102 svg{font-size:14px}._itemAddon_1aw0m_102 b{flex-shrink:0;width:16px;height:16px}._itemRightContainer_1aw0m_122{align-items:center;gap:8px;display:flex}._itemRight_1aw0m_122{color:var(--muted-foreground);font-size:14px}._itemCheck_1aw0m_131{width:16px;height:16px;color:var(--foreground);flex-shrink:0}:host{height:100%;display:block}:host *{box-sizing:border-box}._root_1qifp_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;--font-mono:"Courier New", Courier, monospace;--color-white:#fff;--color-white-fade:color-mix(in srgb, var(--color-white) 65%, transparent);--color-black:#000;--color-red:oklch(63.7% .237 25.331);--color-green:oklch(76.8% .188 151.716);--background:oklch(100% 0 0);--background-fade:color-mix(in srgb, var(--background) 65%, transparent);--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);--surface-border:solid 1px transparent;position:relative}._root_1qifp_8[data-theme=dark]{--color-white-fade:color-mix(in srgb, var(--color-white) 45%, transparent);--background:oklch(24.5% 0 0);--background-fade:color-mix(in srgb, var(--background) 70%, transparent);--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(29.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);--surface-border:solid 1px var(--border)}._root_1qifp_8 h1,._root_1qifp_8 h2,._root_1qifp_8 h3,._root_1qifp_8 h4,._root_1qifp_8 h5,._root_1qifp_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_1qifp_78{color:var(--color-red)}._bgRed_1qifp_81{background-color:var(--color-red)}._bgGreen_1qifp_84{background-color:var(--color-green)}._textGreen_1qifp_87{color:var(--color-green)}._mask_1qifp_90{background-color:var(--overlay-bg)}._semibold_1qifp_93{letter-spacing:.4px;font-weight:600}._bold_1qifp_97{letter-spacing:.4px;font-weight:700}._system_1qifp_101{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_1qifp_111{width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}._grid_1qifp_118{background:var(--background);grid-template:"header header"48px"sidebar frame"1fr"sidebar infobar"32px/48px 1fr;height:100%;display:grid;position:relative}._grid_1qifp_118._mobile_1qifp_130{grid-template-columns:0 1fr}._gridNoInfobar_1qifp_134{grid-template:"header header"48px"sidebar frame"1fr/48px 1fr;height:100%;display:grid;position:relative}._gridNoInfobar_1qifp_134._mobile_1qifp_130{grid-template-columns:0 1fr}._input_kyavx_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_kyavx_1:hover:not(:disabled):not(:focus){border-color:var(--muted-foreground)}._input_kyavx_1:focus{box-shadow:0 0 0 1px var(--ring)}._input_kyavx_1:disabled{cursor:not-allowed;opacity:.5;background-color:var(--secondary)}._input_kyavx_1::placeholder{color:var(--muted-foreground);opacity:1}._numberClean_kyavx_39::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._numberClean_kyavx_39[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_1e7jm_1{margin-left:4px;display:flex}._save_1e7jm_6{width:36px;color:var(--color-green);border-top-right-radius:0;border-bottom-right-radius:0}._close_1e7jm_13{width:36px;color:var(--color-red);border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._sliderContainer_1unyb_1{cursor:pointer;touch-action:none;--slider-progress:0%;align-items:center;width:100%;height:24px;display:flex;position:relative}._sliderContainer_1unyb_1._disabled_1unyb_11{pointer-events:none;cursor:not-allowed;opacity:.5}._sliderContainer_1unyb_1:not(._disabled_1unyb_11):hover ._sliderThumb_1unyb_17{transform:translate(-50%,-50%)scale(1.1)}._sliderTrack_1unyb_22{background-color:color-mix(in oklch, var(--muted-foreground) 65%, transparent);border-radius:2px;width:100%;height:2px;position:relative}._sliderRange_1unyb_34{background-color:var(--primary);height:100%;width:var(--slider-progress);border-radius:2px;position:absolute}._sliderThumb_1unyb_17{top:50%;left:var(--slider-progress);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;transform:translate(-50%,-50%)}._sliderTooltip_1unyb_58{top:-40px;left:var(--slider-progress);background-color:var(--foreground);color:var(--background,#000);white-space:nowrap;pointer-events:none;z-index:2;border-radius:4px;padding:7px 10px 8px;font-size:12px;line-height:1;position:absolute;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._sliderTooltip_1unyb_58:after{content:"";background-color:var(--foreground);width:6px;height:6px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)rotate(45deg)}._hiddenInput_1unyb_86{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}._tooltip_1rdl9_1{position:relative}._container_1rdl9_5{gap:0;display:flex}._container_1rdl9_5[data-position=left],._container_1rdl9_5[data-position=right]{flex-direction:column}._container_1rdl9_5 [data-tooltip]{pointer-events:auto}._popup_1rdl9_19{top:var(--tooltip-y,0px);left:var(--tooltip-x,0px);background-color:var(--foreground);color:var(--background);z-index:999;pointer-events:none;opacity:var(--tooltip-opacity,0);width:var(--tooltip-w,auto);height:var(--tooltip-h,auto);transition:opacity var(--tooltip-fade,.2s);border-radius:4px;font-size:14px;position:absolute;transform:translate(-50%,-100%);box-shadow:0 2px 8px #0000001a}._popup_1rdl9_19:before{content:"";background-color:inherit;width:10px;height:10px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}._popup_1rdl9_19[data-position=top]{transform:translate(-50%,-100%)}._popup_1rdl9_19[data-position=top]:before{top:auto;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}._popup_1rdl9_19[data-position=bottom]{transform:translate(-50%)}._popup_1rdl9_19[data-position=bottom]:before{top:-3px;bottom:auto;left:50%;transform:translate(-50%)rotate(45deg)}._popup_1rdl9_19[data-position=left]{transform:translate(-100%,-50%)}._popup_1rdl9_19[data-position=left]:before{top:50%;left:auto;right:-3px;transform:translateY(-50%)rotate(45deg)}._popup_1rdl9_19[data-position=right]{transform:translateY(-50%)}._popup_1rdl9_19[data-position=right]:before{top:50%;left:-3px;right:auto;transform:translateY(-50%)rotate(45deg)}._popup_1rdl9_19._animated_1rdl9_92{transition:left var(--tooltip-slide,.4s), top var(--tooltip-slide,.4s), width var(--tooltip-slide,.4s), height var(--tooltip-slide,.4s), opacity var(--tooltip-fade,.2s)}._mask_1rdl9_101{border-radius:inherit;width:100%;height:100%;overflow:hidden}._track_1rdl9_108{width:max-content;height:max-content;transform:translateX(calc(-1 * var(--tooltip-offset,0px)));display:flex}._track_1rdl9_108[data-position=left],._track_1rdl9_108[data-position=right]{transform:translateY(calc(-1 * var(--tooltip-offset,0px)));flex-direction:column}._animated_1rdl9_92 ._track_1rdl9_108{transition:transform var(--tooltip-slide,.4s)}._title_1rdl9_125{min-width:var(--tooltip-item-w,auto);max-width:var(--tooltip-item-w,none);min-height:var(--tooltip-item-h,32px);max-height:var(--tooltip-item-h,none);white-space:nowrap;box-sizing:border-box;flex:none;justify-content:center;align-items:center;padding:0 10px;display:flex}._surfaceTool_e739m_1{background-color:var(--background);border:var(--surface-border);color:var(--foreground);z-index:9;border-radius:4px;gap:4px;padding:4px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._header_m05h6_1{box-sizing:border-box;background-color:var(--background);border-bottom:1px solid var(--border);grid-area:header;justify-content:space-between;align-items:center;height:48px;padding:0 8px;display:flex}._left_m05h6_12{align-items:center;gap:0;display:flex}._sidebarToggle_m05h6_17{border-right:solid 1px var(--border);width:48px;height:48px;color:var(--foreground);cursor:pointer;justify-content:center;align-items:center;transition:all .2s;display:none;position:relative;left:-8px}._sidebarToggle_m05h6_17._mobile_m05h6_30{display:flex}._sidebarIcon_m05h6_34{stroke-width:1.6px;width:18px;height:18px}._tools_m05h6_39{gap:8px;display:flex}._history_m05h6_43{align-items:center;gap:6px;display:flex}._historyText_m05h6_48{color:var(--muted-foreground);font-size:14px;font-family:var(--font-mono)}._tools_5caap_1{flex-direction:column}._row1_5caap_5{flex-direction:row;align-items:center;gap:4px;padding:4px;display:flex}._min_5caap_13{text-align:left;width:30px;font-size:14px}._slider_5caap_19{flex:1}._max_5caap_23{text-align:right;width:45px;font-size:14px}._row2_5caap_29{flex-direction:row;gap:4px;display:flex}._select_5caap_35{width:180px}._option_5caap_39{width:120px;height:32px}._option_5caap_39 img{object-fit:cover;width:100%;height:100%}._active_5caap_50{color:var(--accent-blue);background:var(--muted)}._filterInteract_5caap_55{max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._filterInteract_5caap_55>div:first-child{width:100%;max-width:100%;height:100%;max-height:100%}._compare_5caap_70{width:0;height:100%;position:absolute;top:0;transform:translate(-50%)}._compare_5caap_70:before{content:"";background:var(--accent-blue);width:1px;height:100%;position:absolute;top:0;left:-.5px}._compareThumb_5caap_88{background:var(--color-white);border:solid 1px var(--accent-blue);width:32px;height:32px;color:var(--accent-blue);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._compareThumb_5caap_88 svg{width:20px;height:20px}._preview_t77n1_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;transition:all .2s linear,clip-path;position:absolute;inset:0;overflow:hidden}._preview_t77n1_1._faded_t77n1_13{opacity:.5;filter:blur(2px)}._rotate_t77n1_19{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_t77n1_31{box-sizing:border-box;transition:all .2s linear;position:absolute;inset:0;overflow:hidden}._image_t77n1_39{max-width:none;max-height:none;transition:all .2s linear,filter;display:block;position:absolute}._label_t77n1_49{background:var(--color-white-fade);box-sizing:border-box;text-transform:uppercase;letter-spacing:1px;width:80px;height:28px;color:var(--color-black);z-index:3;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:flex;position:absolute;top:8px}._before_t77n1_67{left:8px}._after_t77n1_71{right:8px}._sidebar_1lx29_1{background:var(--background-fade);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-right:1px solid var(--border);z-index:10;grid-area:sidebar;width:48px;position:relative}._sidebar_1lx29_1._mobile_1lx29_10{transition:transform .2s ease-out;transform:translate(-110%);box-shadow:0 2px 8px #0000001a}._sidebar_1lx29_1._mobile_1lx29_10._open_1lx29_15{transform:translate(0%)}._wrapper_1lx29_20{flex-direction:column;display:flex}._item_1lx29_24{cursor:pointer;height:48px;color:var(--foreground);justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}._item_1lx29_24 svg{width:16px;height:16px}._item_1lx29_24:hover{background-color:var(--accent)}._item_1lx29_24._selected_1lx29_43{color:var(--accent-blue);background-color:var(--accent)}._item_1lx29_24._selected_1lx29_43:before{content:"";background-color:var(--accent-blue);width:2px;position:absolute;top:0;bottom:0;left:0}._infobar_895qe_1{background:var(--muted);font-family:var(--font-mono);color:var(--foreground);grid-area:infobar;justify-content:space-between;align-items:center;padding:0 16px;font-size:14px;display:flex}._resize_1sbig_1{align-items:center;padding-top:16px}._toolsLock_1sbig_5{width:12px;height:12px;color:var(--muted-foreground)}._indicatorWrapper_1sbig_10{justify-content:center;width:100%;height:2px;display:flex;position:absolute;top:0;left:0}._indicator_1sbig_10{background:var(--accent-blue);opacity:.6;border-radius:2px;width:30%;height:100%;transition:width .2s}._wrapper_1co2u_1{box-sizing:border-box;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._box_1co2u_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}._toolsInfo_1co2u_18{-webkit-user-select:none;user-select:none;min-width:54px;margin-top:-2px;display:inline-block}._toolsInfoLabel_1co2u_25{color:var(--muted-foreground);font-size:12px;line-height:12px}._toolsInfoValue_1co2u_30{color:var(--foreground);font-size:14px;line-height:14px}._linesBox_1co2u_35{pointer-events:none;position:absolute;inset:1px}._line_1co2u_35{border:1px dashed var(--color-white);opacity:.5;position:absolute}._lineV_1co2u_45{border-top:0;border-bottom:0;width:33%;height:100%;top:0;left:33%}._lineH_1co2u_53{border-left:0;border-right:0;width:100%;height:33%;top:33%;left:0}._pointer_1co2u_61{box-sizing:border-box;width:14px;height:14px;position:absolute}._pointerTopLeft_1co2u_67{border-top:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nwse-resize;top:-6px;left:-6px}._pointerTopRight_1co2u_74{border-top:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nesw-resize;top:-6px;right:-6px}._pointerBottomRight_1co2u_81{border-bottom:3px solid var(--accent-blue);border-right:3px solid var(--accent-blue);cursor:nwse-resize;bottom:-6px;right:-6px}._pointerBottomLeft_1co2u_88{border-bottom:3px solid var(--accent-blue);border-left:3px solid var(--accent-blue);cursor:nesw-resize;bottom:-6px;left:-6px}._mobileBorder_1co2u_95{box-sizing:border-box;border:2px solid var(--accent-blue);position:absolute;inset:0}._mobilePointer_1co2u_101{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}._info_1co2u_112{height:16px;font-family:var(--font-mono);color:#000;background-color:var(--color-white-fade);box-sizing:border-box;align-items:center;padding:0 6px;font-size:12px;display:flex;position:absolute}._info_1co2u_112 b{font-weight:600;transform:translateY(1px)}._infoX_1co2u_129{border-left:solid 2px var(--accent-blue);top:-12px;left:16px}._infoY_1co2u_134{transform-origin:100%;border-right:solid 2px var(--accent-blue);top:8px;right:calc(100% + 4px);transform:rotate(-90deg)}._infoW_1co2u_141{border-right:solid 2px var(--accent-blue);bottom:-12px;right:16px}._infoH_1co2u_146{transform-origin:0%;border-left:solid 2px var(--accent-blue);bottom:8px;left:calc(100% + 4px);transform:rotate(-90deg)}._group_1co2u_153{flex-shrink:0;width:max-content;display:flex}._group_1co2u_153 button{color:var(--foreground);border-radius:0}._group_1co2u_153 button._active_1co2u_162{color:var(--accent-blue);background:var(--muted)}._group_1co2u_153 button:not(:first-child){margin-left:-1px}._group_1co2u_153 button:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}._group_1co2u_153 button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}._select_1ieak_1{width:220px}._btnH_15adi_1{border-top-right-radius:0;border-bottom-right-radius:0;width:36px}._btnV_15adi_7{border-top-left-radius:0;border-bottom-left-radius:0;width:36px;margin-left:-1px}._frame_1p6kh_1{box-sizing:border-box;background:var(--background);grid-area:frame;width:100%;height:100%;margin:0 auto;position:relative;overflow:hidden}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
+ import { Children as e, createContext as t, forwardRef as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
3
3
  //#region \0rolldown/runtime.js
4
- var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), f = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
4
+ var f = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), p = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
5
5
  if (typeof require < "u") return require.apply(this, arguments);
6
6
  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.");
7
- }), p = {
7
+ }), m = {
8
8
  sm: 480,
9
9
  md: 768,
10
10
  lg: 1024,
11
11
  xl: 1280
12
- }, m = {
12
+ }, h = {
13
13
  INITIAL: "initial",
14
14
  RESIZE: "resize",
15
15
  CROP: "crop",
@@ -17,7 +17,7 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
17
17
  FLIP: "flip",
18
18
  ROTATE: "rotate",
19
19
  FILTERS: "filters"
20
- }, h = {
20
+ }, g = {
21
21
  tools: [
22
22
  "resize",
23
23
  "crop",
@@ -30,14 +30,14 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
30
30
  quality: .85,
31
31
  saveAsWEBP: !1,
32
32
  exportAs: "blob"
33
- }, g = (e, t, n, r, i, a, o) => ({
33
+ }, _ = (e, t, n, r, i, a, o) => ({
34
34
  history: {
35
35
  pointer: 0,
36
36
  items: [{
37
37
  width: t,
38
38
  height: n,
39
39
  action: {
40
- name: m.INITIAL,
40
+ name: h.INITIAL,
41
41
  args: null
42
42
  }
43
43
  }]
@@ -48,8 +48,9 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
48
48
  mimeType: e,
49
49
  sidebar: !1,
50
50
  settings: o,
51
- isAlpha: a
52
- }), _ = t(void 0), v = /* @__PURE__ */ d(((e) => {
51
+ isAlpha: a,
52
+ showCompare: !1
53
+ }), v = t(void 0), y = /* @__PURE__ */ f(((e) => {
53
54
  var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
54
55
  function r(e, n, r) {
55
56
  var i = null;
@@ -64,7 +65,7 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
64
65
  };
65
66
  }
66
67
  e.Fragment = n, e.jsx = r, e.jsxs = r;
67
- })), y = /* @__PURE__ */ d(((e) => {
68
+ })), b = /* @__PURE__ */ f(((e) => {
68
69
  process.env.NODE_ENV !== "production" && (function() {
69
70
  function t(e) {
70
71
  if (e == null) return null;
@@ -128,7 +129,7 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
128
129
  return Error("react-stack-top-frame");
129
130
  }
130
131
  function s(e) {
131
- if (ee.call(e, "key")) {
132
+ if (j.call(e, "key")) {
132
133
  var t = Object.getOwnPropertyDescriptor(e, "key").get;
133
134
  if (t && t.isReactWarning) return !1;
134
135
  }
@@ -136,7 +137,7 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
136
137
  }
137
138
  function c(e, t) {
138
139
  function n() {
139
- ne || (ne = !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));
140
+ te || (te = !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));
140
141
  }
141
142
  n.isReactWarning = !0, Object.defineProperty(e, "key", {
142
143
  get: n,
@@ -145,7 +146,7 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
145
146
  }
146
147
  function l() {
147
148
  var e = t(this.type);
148
- return re[e] || (re[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;
149
+ return ne[e] || (ne[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;
149
150
  }
150
151
  function u(e, t, n, r, i, a) {
151
152
  var o = n.ref;
@@ -184,52 +185,52 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
184
185
  }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
185
186
  }
186
187
  function d(e, n, i, o, l, d) {
187
- var f = n.children;
188
- if (f !== void 0) if (o) if (te(f)) {
189
- for (o = 0; o < f.length; o++) p(f[o]);
190
- Object.freeze && Object.freeze(f);
188
+ var p = n.children;
189
+ if (p !== void 0) if (o) if (ee(p)) {
190
+ for (o = 0; o < p.length; o++) f(p[o]);
191
+ Object.freeze && Object.freeze(p);
191
192
  } 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.");
192
- else p(f);
193
- if (ee.call(n, "key")) {
194
- f = t(e);
193
+ else f(p);
194
+ if (j.call(n, "key")) {
195
+ p = t(e);
195
196
  var m = Object.keys(n).filter(function(e) {
196
197
  return e !== "key";
197
198
  });
198
- o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", ae[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), ae[f + o] = !0);
199
+ o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", N[p + 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, p, m, p), N[p + o] = !0);
199
200
  }
200
- 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]);
201
+ if (p = null, i !== void 0 && (r(i), p = "" + i), s(n) && (r(n.key), p = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
201
202
  else i = n;
202
- return f && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, f, i, a(), l, d);
203
+ return p && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, p, i, a(), l, d);
203
204
  }
204
- function p(e) {
205
+ function f(e) {
205
206
  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));
206
207
  }
207
208
  function m(e) {
208
209
  return typeof e == "object" && !!e && e.$$typeof === g;
209
210
  }
210
- var h = f("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"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, te = Array.isArray, j = console.createTask ? console.createTask : function() {
211
+ var h = p("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"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, ee = Array.isArray, M = console.createTask ? console.createTask : function() {
211
212
  return null;
212
213
  };
213
214
  h = { react_stack_bottom_frame: function(e) {
214
215
  return e();
215
216
  } };
216
- var ne, re = {}, ie = h.react_stack_bottom_frame.bind(h, o)(), M = j(i(o)), ae = {};
217
+ var te, ne = {}, re = h.react_stack_bottom_frame.bind(h, o)(), ie = M(i(o)), N = {};
217
218
  e.Fragment = v, e.jsx = function(e, t, n) {
218
219
  var r = 1e4 > A.recentlyCreatedOwnerStacks++;
219
- return d(e, t, n, !1, r ? Error("react-stack-top-frame") : ie, r ? j(i(e)) : M);
220
+ return d(e, t, n, !1, r ? Error("react-stack-top-frame") : re, r ? M(i(e)) : ie);
220
221
  }, e.jsxs = function(e, t, n) {
221
222
  var r = 1e4 > A.recentlyCreatedOwnerStacks++;
222
- return d(e, t, n, !0, r ? Error("react-stack-top-frame") : ie, r ? j(i(e)) : M);
223
+ return d(e, t, n, !0, r ? Error("react-stack-top-frame") : re, r ? M(i(e)) : ie);
223
224
  };
224
225
  })();
225
- })), b = (/* @__PURE__ */ d(((e, t) => {
226
- process.env.NODE_ENV === "production" ? t.exports = v() : t.exports = y();
227
- })))(), x = ({ children: e, mimeType: t, width: n, height: r, originalBlob: i, previewUrl: a, isAlpha: s, settings: d }) => {
228
- let [f, p] = u(g(t, n, r, i, a, s, d)), h = l(null);
226
+ })), x = (/* @__PURE__ */ f(((e, t) => {
227
+ process.env.NODE_ENV === "production" ? t.exports = y() : t.exports = b();
228
+ })))(), S = ({ children: e, mimeType: t, width: n, height: r, originalBlob: i, previewUrl: a, isAlpha: s, settings: c }) => {
229
+ let [f, p] = d(_(t, n, r, i, a, s, c)), m = u(null);
229
230
  o(() => () => {
230
- h.current &&= (URL.revokeObjectURL(h.current), null);
231
+ m.current &&= (URL.revokeObjectURL(m.current), null);
231
232
  }, []);
232
- let v = (e) => p((t) => ({
233
+ let g = (e) => p((t) => ({
233
234
  ...t,
234
235
  currentAction: e
235
236
  })), y = (e) => p((t) => {
@@ -242,78 +243,86 @@ var d = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
242
243
  pointer: n
243
244
  }
244
245
  };
245
- }), x = () => {
246
+ }), b = () => p((e) => ({
247
+ ...e,
248
+ showCompare: !e.showCompare
249
+ })), S = () => {
246
250
  let { items: e, pointer: t } = f.history;
247
251
  return e.at(t) ?? e.at(0) ?? {
248
252
  width: 0,
249
253
  height: 0,
250
254
  action: {
251
- name: m.INITIAL,
255
+ name: h.INITIAL,
252
256
  args: null
253
257
  }
254
258
  };
255
- }, S = () => {
259
+ }, C = () => {
260
+ let { items: e, pointer: t } = f.history;
261
+ return e.filter((e, n) => n <= t && e.action.name === h.FILTERS).at(-1) ?? null;
262
+ }, w = () => {
256
263
  let { items: e, pointer: t } = f.history;
257
264
  if (e.length === 0 || t < 0) return 0;
258
- let n = e.slice(0, t + 1).findLast((e) => e.action.name === m.ROTATE);
259
- return n?.action.name === m.ROTATE ? n.action.args.degrees : 0;
260
- }, C = () => p((e) => ({
265
+ let n = e.slice(0, t + 1).findLast((e) => e.action.name === h.ROTATE);
266
+ return n?.action.name === h.ROTATE ? n.action.args.degrees : 0;
267
+ }, T = () => p((e) => ({
261
268
  ...e,
262
269
  history: {
263
270
  items: [e.history.items[0]],
264
271
  pointer: 0
265
272
  }
266
- })), w = () => p((e) => e.history.pointer <= 0 ? e : {
273
+ })), E = () => p((e) => e.history.pointer <= 0 ? e : {
267
274
  ...e,
268
275
  history: {
269
276
  ...e.history,
270
277
  pointer: e.history.pointer - 1
271
278
  }
272
- }), T = () => p((e) => e.history.pointer >= e.history.items.length - 1 ? e : {
279
+ }), D = () => p((e) => e.history.pointer >= e.history.items.length - 1 ? e : {
273
280
  ...e,
274
281
  history: {
275
282
  ...e.history,
276
283
  pointer: e.history.pointer + 1
277
284
  }
278
- }), E = (e) => p((t) => ({
285
+ }), O = (e) => p((t) => ({
279
286
  ...t,
280
287
  sidebar: e
281
- })), D = c(() => new EventTarget(), []), O = (e) => {
282
- h.current && URL.revokeObjectURL(h.current), h.current = URL.createObjectURL(e.previewBlob), p(g(e.mimeType, e.width, e.height, e.newBlob, h.current, e.isAlpha, d));
288
+ })), k = l(() => new EventTarget(), []), A = (e) => {
289
+ m.current && URL.revokeObjectURL(m.current), m.current = URL.createObjectURL(e.previewBlob), p(_(e.mimeType, e.width, e.height, e.newBlob, m.current, e.isAlpha, c));
283
290
  };
284
- return /* @__PURE__ */ (0, b.jsx)(_, {
291
+ return /* @__PURE__ */ (0, x.jsx)(v, {
285
292
  value: {
286
293
  ...f,
287
- setImage: O,
288
- setCurrentAction: v,
289
- getLastHistoryItem: x,
290
- getLastRotation: S,
294
+ setImage: A,
295
+ setCurrentAction: g,
296
+ toggleCompare: b,
297
+ getLastHistoryItem: S,
298
+ getLastRotation: w,
299
+ getLastFilter: C,
291
300
  addToHistory: y,
292
- resetHistory: C,
293
- undo: w,
294
- redo: T,
295
- setSidebar: E,
296
- eventBus: D
301
+ resetHistory: T,
302
+ undo: E,
303
+ redo: D,
304
+ setSidebar: O,
305
+ eventBus: k
297
306
  },
298
307
  children: e
299
308
  });
300
- }, S = "(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.`})}}})();", C = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", S], { type: "text/javascript;charset=utf-8" });
301
- function w(e) {
309
+ }, 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.`})}}})();", w = typeof self < "u" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", C], { type: "text/javascript;charset=utf-8" });
310
+ function T(e) {
302
311
  let t;
303
312
  try {
304
- if (t = C && (self.URL || self.webkitURL).createObjectURL(C), !t) throw "";
313
+ if (t = w && (self.URL || self.webkitURL).createObjectURL(w), !t) throw "";
305
314
  let n = new Worker(t, { name: e?.name });
306
315
  return n.addEventListener("error", () => {
307
316
  (self.URL || self.webkitURL).revokeObjectURL(t);
308
317
  }), n;
309
318
  } catch {
310
- return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(S), { name: e?.name });
319
+ return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(C), { name: e?.name });
311
320
  }
312
321
  }
313
322
  //#endregion
314
323
  //#region src/shared/components/Pixedi/hooks/useImageLoader.tsx
315
- var T = ({ src: e, skip: t = !1 }) => {
316
- let [n, r] = u({
324
+ var E = ({ src: e, skip: t = !1 }) => {
325
+ let [n, r] = d({
317
326
  loading: !t,
318
327
  error: "",
319
328
  width: 0,
@@ -322,10 +331,10 @@ var T = ({ src: e, skip: t = !1 }) => {
322
331
  originalBlob: null,
323
332
  previewUrl: "",
324
333
  isAlpha: !1
325
- }), i = l(null);
334
+ }), i = u(null);
326
335
  return o(() => {
327
336
  if (!e || t) return;
328
- let n = new w();
337
+ let n = new T();
329
338
  return n.postMessage(e), n.onmessage = (e) => {
330
339
  let t = e.data;
331
340
  t.success ? (i.current && URL.revokeObjectURL(i.current), i.current = URL.createObjectURL(t.previewBlob), r({
@@ -346,29 +355,29 @@ var T = ({ src: e, skip: t = !1 }) => {
346
355
  n.terminate(), i.current &&= (URL.revokeObjectURL(i.current), null);
347
356
  };
348
357
  }, [t, e]), n;
349
- }, E = () => {
358
+ }, D = () => {
350
359
  if (typeof window > "u" || !window.navigator) return null;
351
360
  let e = window.navigator.userAgent.toLowerCase();
352
361
  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;
353
- }, D = () => {
354
- let [e] = u(() => E());
362
+ }, O = () => {
363
+ let [e] = d(() => D());
355
364
  return e;
356
365
  };
357
366
  //#endregion
358
367
  //#region src/shared/components/Pixedi/hooks/useBellow.tsx
359
- function O(e, t) {
360
- let [n, r] = u(!0);
368
+ function k(e, t) {
369
+ let [n, r] = d(!0);
361
370
  return o(() => {
362
371
  if (!t) return;
363
372
  let n = new ResizeObserver(([t]) => {
364
- t && r(t.contentRect.width < p[e]);
373
+ t && r(t.contentRect.width < m[e]);
365
374
  });
366
375
  return n.observe(t), () => n.disconnect();
367
376
  }, [e, t]), n;
368
377
  }
369
378
  //#endregion
370
379
  //#region src/shared/components/Pixedi/assets/icons.tsx
371
- var k = {
380
+ var A = {
372
381
  xmlns: "http://w3.org",
373
382
  width: "24",
374
383
  height: "24",
@@ -378,50 +387,50 @@ var k = {
378
387
  strokeWidth: "2",
379
388
  strokeLinecap: "round",
380
389
  strokeLinejoin: "round"
381
- }, A = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
382
- ...k,
390
+ }, j = (e) => /* @__PURE__ */ (0, x.jsx)("svg", {
391
+ ...A,
383
392
  ...e,
384
- children: /* @__PURE__ */ (0, b.jsx)("path", { d: "M20 6 9 17l-5-5" })
385
- }), ee = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
386
- ...k,
393
+ children: /* @__PURE__ */ (0, x.jsx)("path", { d: "M20 6 9 17l-5-5" })
394
+ }), ee = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
395
+ ...A,
387
396
  ...e,
388
- children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "m6 6 12 12" })]
389
- }), te = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
390
- ...k,
397
+ children: [/* @__PURE__ */ (0, x.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, x.jsx)("path", { d: "m6 6 12 12" })]
398
+ }), M = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
399
+ ...A,
391
400
  ...e,
392
- children: [/* @__PURE__ */ (0, b.jsx)("rect", {
401
+ children: [/* @__PURE__ */ (0, x.jsx)("rect", {
393
402
  width: "18",
394
403
  height: "11",
395
404
  x: "3",
396
405
  y: "11",
397
406
  rx: "2",
398
407
  ry: "2"
399
- }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
400
- }), j = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
401
- ...k,
408
+ }), /* @__PURE__ */ (0, x.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
409
+ }), te = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
410
+ ...A,
402
411
  ...e,
403
- children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M19 12H5" })]
404
- }), ne = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
405
- ...k,
412
+ children: [/* @__PURE__ */ (0, x.jsx)("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ (0, x.jsx)("path", { d: "M19 12H5" })]
413
+ }), ne = (e) => /* @__PURE__ */ (0, x.jsx)("svg", {
414
+ ...A,
406
415
  ...e,
407
- children: /* @__PURE__ */ (0, b.jsx)("path", { d: "m6 9 6 6 6-6" })
408
- }), re = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
409
- ...k,
416
+ children: /* @__PURE__ */ (0, x.jsx)("path", { d: "m6 9 6 6 6-6" })
417
+ }), re = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
418
+ ...A,
410
419
  ...e,
411
- children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
412
- }), ie = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
413
- ...k,
420
+ children: [/* @__PURE__ */ (0, x.jsx)("path", { d: "M3 7v6h6" }), /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })]
421
+ }), ie = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
422
+ ...A,
414
423
  ...e,
415
- children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
416
- }), M = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
417
- ...k,
424
+ children: [/* @__PURE__ */ (0, x.jsx)("path", { d: "M21 7v6h-6" }), /* @__PURE__ */ (0, x.jsx)("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })]
425
+ }), N = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
426
+ ...A,
418
427
  ...e,
419
- children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
420
- }), ae = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
421
- ...k,
428
+ children: [/* @__PURE__ */ (0, x.jsx)("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }), /* @__PURE__ */ (0, x.jsx)("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })]
429
+ }), ae = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
430
+ ...A,
422
431
  ...e,
423
432
  children: [
424
- /* @__PURE__ */ (0, b.jsx)("rect", {
433
+ /* @__PURE__ */ (0, x.jsx)("rect", {
425
434
  width: "18",
426
435
  height: "18",
427
436
  x: "3",
@@ -429,52 +438,52 @@ var k = {
429
438
  rx: "2",
430
439
  ry: "2"
431
440
  }),
432
- /* @__PURE__ */ (0, b.jsx)("circle", {
441
+ /* @__PURE__ */ (0, x.jsx)("circle", {
433
442
  cx: "9",
434
443
  cy: "9",
435
444
  r: "2"
436
445
  }),
437
- /* @__PURE__ */ (0, b.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
446
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
438
447
  ]
439
- }), oe = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
440
- ...k,
448
+ }), oe = (e) => /* @__PURE__ */ (0, x.jsx)("svg", {
449
+ ...A,
441
450
  ...e,
442
- children: /* @__PURE__ */ (0, b.jsx)("rect", {
451
+ children: /* @__PURE__ */ (0, x.jsx)("rect", {
443
452
  width: "18",
444
453
  height: "18",
445
454
  x: "3",
446
455
  y: "3",
447
456
  rx: "2"
448
457
  })
449
- }), se = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
450
- ...k,
458
+ }), se = (e) => /* @__PURE__ */ (0, x.jsx)("svg", {
459
+ ...A,
451
460
  ...e,
452
- children: /* @__PURE__ */ (0, b.jsx)("rect", {
461
+ children: /* @__PURE__ */ (0, x.jsx)("rect", {
453
462
  width: "20",
454
463
  height: "12",
455
464
  x: "2",
456
465
  y: "6",
457
466
  rx: "2"
458
467
  })
459
- }), ce = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
460
- ...k,
468
+ }), ce = (e) => /* @__PURE__ */ (0, x.jsx)("svg", {
469
+ ...A,
461
470
  ...e,
462
- children: /* @__PURE__ */ (0, b.jsx)("rect", {
471
+ children: /* @__PURE__ */ (0, x.jsx)("rect", {
463
472
  width: "20",
464
473
  height: "15",
465
474
  x: "2",
466
475
  y: "4.5",
467
476
  rx: "2"
468
477
  })
469
- }), le = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
470
- ...k,
478
+ }), le = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
479
+ ...A,
471
480
  ...e,
472
481
  children: [
473
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
474
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
475
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
476
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
477
- /* @__PURE__ */ (0, b.jsx)("rect", {
482
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
483
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
484
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
485
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
486
+ /* @__PURE__ */ (0, x.jsx)("rect", {
478
487
  width: "10",
479
488
  height: "8",
480
489
  x: "7",
@@ -482,93 +491,129 @@ var k = {
482
491
  rx: "1"
483
492
  })
484
493
  ]
485
- }), ue = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
486
- ...k,
494
+ }), ue = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
495
+ ...A,
487
496
  ...e,
488
497
  children: [
489
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
490
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
491
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M12 20v2" }),
492
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M12 14v2" }),
493
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M12 8v2" }),
494
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M12 2v2" })
498
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
499
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
500
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12 20v2" }),
501
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12 14v2" }),
502
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12 8v2" }),
503
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12 2v2" })
495
504
  ]
496
- }), de = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
497
- ...k,
505
+ }), de = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
506
+ ...A,
498
507
  ...e,
499
508
  children: [
500
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" }),
501
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" }),
502
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M4 12H2" }),
503
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M10 12H8" }),
504
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M16 12h-2" }),
505
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M22 12h-2" })
509
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3" }),
510
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" }),
511
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M4 12H2" }),
512
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M10 12H8" }),
513
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M16 12h-2" }),
514
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M22 12h-2" })
506
515
  ]
507
- }), fe = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
508
- ...k,
516
+ }), fe = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
517
+ ...A,
509
518
  ...e,
510
- children: [/* @__PURE__ */ (0, b.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), /* @__PURE__ */ (0, b.jsx)("path", { d: "M21 3v5h-5" })]
511
- }), pe = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
512
- ...k,
519
+ children: [/* @__PURE__ */ (0, x.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 3v5h-5" })]
520
+ }), pe = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
521
+ ...A,
513
522
  ...e,
514
- children: [/* @__PURE__ */ (0, b.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, b.jsx)("path", { d: "M3 3v5h5" })]
515
- }), me = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
516
- ...k,
523
+ children: [/* @__PURE__ */ (0, x.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, x.jsx)("path", { d: "M3 3v5h5" })]
524
+ }), me = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
525
+ ...A,
517
526
  ...e,
518
527
  children: [
519
- /* @__PURE__ */ (0, b.jsx)("rect", {
528
+ /* @__PURE__ */ (0, x.jsx)("rect", {
520
529
  width: "7",
521
530
  height: "7",
522
531
  x: "3",
523
532
  y: "3",
524
533
  rx: "1"
525
534
  }),
526
- /* @__PURE__ */ (0, b.jsx)("rect", {
535
+ /* @__PURE__ */ (0, x.jsx)("rect", {
527
536
  width: "7",
528
537
  height: "7",
529
538
  x: "3",
530
539
  y: "14",
531
540
  rx: "1"
532
541
  }),
533
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M14 4h7" }),
534
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M14 9h7" }),
535
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M14 15h7" }),
536
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M14 20h7" })
542
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M14 4h7" }),
543
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M14 9h7" }),
544
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M14 15h7" }),
545
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M14 20h7" })
537
546
  ]
538
- }), he = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
539
- ...k,
547
+ }), he = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
548
+ ...A,
540
549
  ...e,
541
550
  children: [
542
- /* @__PURE__ */ (0, b.jsx)("rect", {
551
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M10 5H3" }),
552
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12 19H3" }),
553
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M14 3v4" }),
554
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M16 17v4" }),
555
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 12h-9" }),
556
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 19h-5" }),
557
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M21 5h-7" }),
558
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M8 10v4" }),
559
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M8 12H3" })
560
+ ]
561
+ }), ge = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
562
+ ...A,
563
+ ...e,
564
+ children: [
565
+ /* @__PURE__ */ (0, x.jsx)("rect", {
543
566
  width: "18",
544
567
  height: "18",
545
568
  x: "3",
546
569
  y: "3",
547
570
  rx: "2"
548
571
  }),
549
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M9 3v18" }),
550
- /* @__PURE__ */ (0, b.jsx)("path", { d: "m14 9 3 3-3 3" })
572
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M9 3v18" }),
573
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "m14 9 3 3-3 3" })
551
574
  ]
552
- }), ge = (e) => /* @__PURE__ */ (0, b.jsxs)("svg", {
553
- ...k,
575
+ }), _e = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
576
+ ...A,
554
577
  ...e,
555
578
  children: [
556
- /* @__PURE__ */ (0, b.jsx)("rect", {
579
+ /* @__PURE__ */ (0, x.jsx)("rect", {
557
580
  width: "18",
558
581
  height: "18",
559
582
  x: "3",
560
583
  y: "3",
561
584
  rx: "2"
562
585
  }),
563
- /* @__PURE__ */ (0, b.jsx)("path", { d: "M9 3v18" }),
564
- /* @__PURE__ */ (0, b.jsx)("path", { d: "m16 15-3-3 3-3" })
586
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M9 3v18" }),
587
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "m16 15-3-3 3-3" })
588
+ ]
589
+ }), ve = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
590
+ ...A,
591
+ ...e,
592
+ children: [
593
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M15 4V2" }),
594
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M15 16v-2" }),
595
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M8 9h2" }),
596
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M20 9h2" }),
597
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M17.8 11.8 19 13" }),
598
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M15 9h.01" }),
599
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M17.8 6.2 19 5" }),
600
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "m3 21 9-9" }),
601
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12.2 6.2 11 5" })
565
602
  ]
566
- }), _e = (e) => /* @__PURE__ */ (0, b.jsx)("svg", {
567
- ...k,
603
+ }), ye = (e) => /* @__PURE__ */ (0, x.jsxs)("svg", {
604
+ ...A,
568
605
  ...e,
569
- children: /* @__PURE__ */ (0, b.jsx)("path", {
606
+ children: [
607
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "M12 3v18" }),
608
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "m16 16 4-4-4-4" }),
609
+ /* @__PURE__ */ (0, x.jsx)("path", { d: "m8 8-4 4 4 4" })
610
+ ]
611
+ }), be = (e) => /* @__PURE__ */ (0, x.jsx)("svg", {
612
+ ...A,
613
+ ...e,
614
+ children: /* @__PURE__ */ (0, x.jsx)("path", {
570
615
  d: "M21 12a9 9 0 1 1-6.219-8.56",
571
- children: /* @__PURE__ */ (0, b.jsx)("animateTransform", {
616
+ children: /* @__PURE__ */ (0, x.jsx)("animateTransform", {
572
617
  attributeType: "xml",
573
618
  attributeName: "transform",
574
619
  type: "rotate",
@@ -578,31 +623,31 @@ var k = {
578
623
  repeatCount: "indefinite"
579
624
  })
580
625
  })
581
- }), N = () => {
582
- let e = a(_);
626
+ }), P = () => {
627
+ let e = a(v);
583
628
  if (!e) throw Error("usePixediContext must be used within an PixediProvider");
584
629
  return e;
585
- }, P = {
630
+ }, F = {
586
631
  button: "_button_1vpzl_1",
587
632
  default: "_default_1vpzl_35",
588
633
  outline: "_outline_1vpzl_44",
589
634
  ghost: "_ghost_1vpzl_54",
590
635
  rect: "_rect_1vpzl_63"
591
- }, F = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, b.jsx)("button", {
636
+ }, I = ({ className: e = "", variant: t = "default", children: n, ref: r, ...i }) => /* @__PURE__ */ (0, x.jsx)("button", {
592
637
  ref: r,
593
- className: `${P.button} ${P[t]} ${e}`.trim(),
638
+ className: `${F.button} ${F[t]} ${e}`.trim(),
594
639
  ...i,
595
640
  children: n
596
- }), ve = { separator: "_separator_gp8ff_1" }, ye = n(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, b.jsx)("hr", {
641
+ }), xe = { separator: "_separator_gp8ff_1" }, Se = n(({ className: e = "", orientation: t = "horizontal", ...n }, r) => /* @__PURE__ */ (0, x.jsx)("hr", {
597
642
  ref: r,
598
643
  role: "separator",
599
644
  "aria-orientation": t,
600
645
  "data-orientation": t,
601
- className: `${ve.separator} ${e}`.trim(),
646
+ className: `${xe.separator} ${e}`.trim(),
602
647
  ...n
603
648
  }));
604
- ye.displayName = "Separator";
605
- var I = {
649
+ Se.displayName = "Separator";
650
+ var L = {
606
651
  wrapper: "_wrapper_1aw0m_1",
607
652
  trigger: "_trigger_1aw0m_6",
608
653
  triggerArrow: "_triggerArrow_1aw0m_31",
@@ -614,21 +659,21 @@ var I = {
614
659
  itemRightContainer: "_itemRightContainer_1aw0m_122",
615
660
  itemRight: "_itemRight_1aw0m_122",
616
661
  itemCheck: "_itemCheck_1aw0m_131"
617
- }, L = {
618
- root: "_root_c6gk7_8",
619
- textRed: "_textRed_c6gk7_73",
620
- bgRed: "_bgRed_c6gk7_76",
621
- bgGreen: "_bgGreen_c6gk7_79",
622
- textGreen: "_textGreen_c6gk7_82",
623
- mask: "_mask_c6gk7_85",
624
- semibold: "_semibold_c6gk7_88",
625
- bold: "_bold_c6gk7_92",
626
- system: "_system_c6gk7_96",
627
- wrapper: "_wrapper_c6gk7_106",
628
- grid: "_grid_c6gk7_113",
629
- mobile: "_mobile_c6gk7_124",
630
- gridNoInfobar: "_gridNoInfobar_c6gk7_128"
631
- }, be = (e) => {
662
+ }, R = {
663
+ root: "_root_1qifp_8",
664
+ textRed: "_textRed_1qifp_78",
665
+ bgRed: "_bgRed_1qifp_81",
666
+ bgGreen: "_bgGreen_1qifp_84",
667
+ textGreen: "_textGreen_1qifp_87",
668
+ mask: "_mask_1qifp_90",
669
+ semibold: "_semibold_1qifp_93",
670
+ bold: "_bold_1qifp_97",
671
+ system: "_system_1qifp_101",
672
+ wrapper: "_wrapper_1qifp_111",
673
+ grid: "_grid_1qifp_118",
674
+ mobile: "_mobile_1qifp_130",
675
+ gridNoInfobar: "_gridNoInfobar_1qifp_134"
676
+ }, Ce = (e) => {
632
677
  let t = 0, n = window.innerHeight;
633
678
  for (let r = e.parentElement; r; r = r.parentElement) {
634
679
  let { overflow: e, overflowY: i } = getComputedStyle(r);
@@ -640,133 +685,229 @@ var I = {
640
685
  top: t,
641
686
  bottom: n
642
687
  };
643
- }, xe = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: i = "", renderOption: a }) => {
644
- let [d, f] = u(!1), p = l(null), m = l(null), h = l(null), g = c(() => {
688
+ }, we = ({ items: e, value: t, onChange: n }) => {
689
+ let [r, i] = d(!1), a = u(null), s = u(null), f = u(null), p = l(() => {
645
690
  let t = (e) => e.reduce((e, n) => n.options ? [...e, ...t(n.options.map((e) => ({
646
691
  ...e,
647
692
  fullName: `${n.label} ${e.label}`
648
693
  })))] : [...e, n], []);
649
694
  return t(e);
650
- }, [e]).find((e) => e.value === t);
651
- o(() => {
695
+ }, [e]).find((e) => e.value === t), m = p?.fullName ?? p?.label;
696
+ return o(() => {
652
697
  let e = (e) => {
653
- p.current && !e.composedPath().includes(p.current) && f(!1);
698
+ a.current && !e.composedPath().includes(a.current) && i(!1);
654
699
  };
655
700
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
656
- }, []), s(() => {
657
- let e = p.current, t = m.current, n = h.current;
658
- if (!d || !e || !t || !n) return;
701
+ }, []), c(() => {
702
+ let e = a.current, t = s.current, n = f.current;
703
+ if (!r || !e || !t || !n) return;
659
704
  n.style.removeProperty("top"), n.style.removeProperty("max-height");
660
- let { top: r, bottom: i } = be(e), a = e.getBoundingClientRect().top, o = t.getBoundingClientRect(), s = n.offsetHeight, c = i - 8 - o.bottom - 4, l = o.top - 4 - r - 8, u = o.bottom + 4, f = 0;
661
- s > c && (s <= l ? u = o.top - 4 - s : l > c ? (f = Math.max(l, 0), u = o.top - 4 - f) : f = Math.max(c, 0)), f && (n.style.maxHeight = `${f}px`), n.style.top = `${u - a}px`;
662
- }, [d, e]);
663
- let _ = (e) => {
664
- n(e), f(!1);
705
+ let { top: i, bottom: o } = Ce(e), c = e.getBoundingClientRect().top, l = t.getBoundingClientRect(), u = n.offsetHeight, d = o - 8 - l.bottom - 4, p = l.top - 4 - i - 8, m = l.bottom + 4, h = 0;
706
+ u > d && (u <= p ? m = l.top - 4 - u : p > d ? (h = Math.max(p, 0), m = l.top - 4 - h) : h = Math.max(d, 0)), h && (n.style.maxHeight = `${h}px`), n.style.top = `${m - c}px`;
707
+ }, [r, e]), {
708
+ isOpen: r,
709
+ selectedLabel: m,
710
+ containerRef: a,
711
+ triggerRef: s,
712
+ contentRef: f,
713
+ handleSelectItem: (e) => {
714
+ n(e), i(!1);
715
+ },
716
+ toggleOpen: () => i((e) => !e)
665
717
  };
666
- return /* @__PURE__ */ (0, b.jsxs)("div", {
667
- ref: p,
668
- className: `${I.wrapper} ${i}`.trim(),
669
- "data-state": d ? "open" : "closed",
670
- children: [/* @__PURE__ */ (0, b.jsxs)("button", {
671
- ref: m,
718
+ }, Te = ({ items: e, value: t, onChange: n, placeholder: r = "Select an option", className: i = "", renderOption: a }) => {
719
+ let { isOpen: o, selectedLabel: s, containerRef: c, triggerRef: l, contentRef: u, handleSelectItem: d, toggleOpen: f } = we({
720
+ items: e,
721
+ value: t,
722
+ onChange: n
723
+ });
724
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
725
+ ref: c,
726
+ className: `${L.wrapper} ${i}`.trim(),
727
+ "data-state": o ? "open" : "closed",
728
+ children: [/* @__PURE__ */ (0, x.jsxs)("button", {
729
+ ref: l,
672
730
  type: "button",
673
- className: I.trigger,
674
- onClick: () => f(!d),
675
- children: [/* @__PURE__ */ (0, b.jsx)("span", { children: g ? g.fullName : r }), /* @__PURE__ */ (0, b.jsx)(ne, { className: I.triggerArrow })]
676
- }), /* @__PURE__ */ (0, b.jsx)("div", {
677
- ref: h,
678
- className: I.content,
679
- children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, b.jsxs)("div", { children: [/* @__PURE__ */ (0, b.jsx)("div", {
680
- className: `${I.groupLabel} ${L.semibold}`,
731
+ className: L.trigger,
732
+ onClick: f,
733
+ children: [/* @__PURE__ */ (0, x.jsx)("span", { children: s ?? r }), /* @__PURE__ */ (0, x.jsx)(ne, { className: L.triggerArrow })]
734
+ }), /* @__PURE__ */ (0, x.jsx)("div", {
735
+ ref: u,
736
+ className: L.content,
737
+ children: e.map((e, n) => e.options ? /* @__PURE__ */ (0, x.jsxs)("div", { children: [/* @__PURE__ */ (0, x.jsx)("div", {
738
+ className: `${L.groupLabel} ${R.semibold}`,
681
739
  children: e.label
682
- }), e.options.map((e) => /* @__PURE__ */ (0, b.jsxs)("div", {
683
- className: I.item,
684
- onClick: () => _(e.value),
685
- children: [a ? a(e) : /* @__PURE__ */ (0, b.jsx)("span", {
686
- className: I.itemLeft,
740
+ }), e.options.map((e) => /* @__PURE__ */ (0, x.jsxs)("div", {
741
+ className: L.item,
742
+ onClick: () => d(e.value),
743
+ children: [a ? a(e) : /* @__PURE__ */ (0, x.jsx)("span", {
744
+ className: L.itemLeft,
687
745
  children: e.label
688
- }), /* @__PURE__ */ (0, b.jsxs)("div", {
689
- className: I.itemAddon,
746
+ }), /* @__PURE__ */ (0, x.jsxs)("div", {
747
+ className: L.itemAddon,
690
748
  children: [
691
- e.rightLabel && /* @__PURE__ */ (0, b.jsx)("span", { children: e.rightLabel }),
692
- t === e.value && /* @__PURE__ */ (0, b.jsx)(A, { className: I.itemCheck }),
693
- t !== e.value && /* @__PURE__ */ (0, b.jsx)("b", {})
749
+ e.rightLabel && /* @__PURE__ */ (0, x.jsx)("span", { children: e.rightLabel }),
750
+ t === e.value && /* @__PURE__ */ (0, x.jsx)(j, { className: L.itemCheck }),
751
+ t !== e.value && /* @__PURE__ */ (0, x.jsx)("b", {})
694
752
  ]
695
753
  })]
696
- }, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, b.jsxs)("div", {
697
- className: I.item,
698
- onClick: () => _(e.value),
699
- children: [a ? a(e) : /* @__PURE__ */ (0, b.jsx)("span", {
700
- className: I.itemLeft,
754
+ }, e.value))] }, `group-${n}`) : /* @__PURE__ */ (0, x.jsxs)("div", {
755
+ className: L.item,
756
+ onClick: () => d(e.value),
757
+ children: [a ? a(e) : /* @__PURE__ */ (0, x.jsx)("span", {
758
+ className: L.itemLeft,
701
759
  children: e.label
702
- }), t === e.value && /* @__PURE__ */ (0, b.jsx)(A, { className: I.itemCheck })]
760
+ }), /* @__PURE__ */ (0, x.jsxs)("div", {
761
+ className: L.itemAddon,
762
+ children: [
763
+ e.rightLabel && /* @__PURE__ */ (0, x.jsx)("span", { children: e.rightLabel }),
764
+ t === e.value && /* @__PURE__ */ (0, x.jsx)(j, { className: L.itemCheck }),
765
+ t !== e.value && /* @__PURE__ */ (0, x.jsx)("b", {})
766
+ ]
767
+ })]
703
768
  }, e.value))
704
769
  })]
705
770
  });
706
- }, Se = {
771
+ }, Ee = {
707
772
  input: "_input_kyavx_1",
708
773
  numberClean: "_numberClean_kyavx_39"
709
- }, Ce = ({ className: e = "", type: t = "text", hideArrows: n = !0, ref: r, ...i }) => {
710
- let a = t === "number" && n ? Se.numberClean : "";
711
- return /* @__PURE__ */ (0, b.jsx)("input", {
774
+ }, De = ({ className: e = "", type: t = "text", hideArrows: n = !0, ref: r, ...i }) => {
775
+ let a = t === "number" && n ? Ee.numberClean : "";
776
+ return /* @__PURE__ */ (0, x.jsx)("input", {
712
777
  ref: r,
713
778
  type: t,
714
- className: `${Se.input} ${a} ${e}`.trim(),
779
+ className: `${Ee.input} ${a} ${e}`.trim(),
715
780
  ...i
716
781
  });
717
- }, we = {
782
+ }, Oe = {
718
783
  container: "_container_14vsv_1",
719
784
  legend: "_legend_14vsv_4",
720
785
  suffix: "_suffix_14vsv_13"
721
- }, Te = ({ label: e, className: t = "", style: n, ref: r, ...i }) => /* @__PURE__ */ (0, b.jsxs)("div", {
722
- className: `${we.container} ${t}`.trim(),
786
+ }, ke = ({ label: e, className: t = "", style: n, ref: r, ...i }) => /* @__PURE__ */ (0, x.jsxs)("div", {
787
+ className: `${Oe.container} ${t}`.trim(),
723
788
  style: n,
724
789
  children: [
725
- /* @__PURE__ */ (0, b.jsx)("span", {
726
- className: we.legend,
790
+ /* @__PURE__ */ (0, x.jsx)("span", {
791
+ className: Oe.legend,
727
792
  children: e
728
793
  }),
729
- /* @__PURE__ */ (0, b.jsx)(Ce, {
794
+ /* @__PURE__ */ (0, x.jsx)(De, {
730
795
  ref: r,
731
796
  type: "number",
732
797
  ...i
733
798
  }),
734
- /* @__PURE__ */ (0, b.jsx)("span", {
735
- className: we.suffix,
799
+ /* @__PURE__ */ (0, x.jsx)("span", {
800
+ className: Oe.suffix,
736
801
  children: "px"
737
802
  })
738
803
  ]
739
- }), Ee = {
804
+ }), Ae = {
740
805
  group: "_group_1e7jm_1",
741
806
  save: "_save_1e7jm_6",
742
807
  close: "_close_1e7jm_13"
743
- }, R = ({ onSave: e, onClose: t, saving: n = !1, disabled: r = !1 }) => /* @__PURE__ */ (0, b.jsxs)("div", {
744
- className: Ee.group,
745
- children: [/* @__PURE__ */ (0, b.jsx)(F, {
808
+ }, z = ({ onSave: e, onClose: t, saving: n = !1, disabled: r = !1 }) => /* @__PURE__ */ (0, x.jsxs)("div", {
809
+ className: Ae.group,
810
+ children: [/* @__PURE__ */ (0, x.jsx)(I, {
746
811
  variant: "outline",
747
- className: Ee.save,
812
+ className: Ae.save,
748
813
  "aria-label": "Save",
749
814
  disabled: r || n,
750
815
  onClick: e,
751
- children: n ? /* @__PURE__ */ (0, b.jsx)(_e, {}) : /* @__PURE__ */ (0, b.jsx)(A, {})
752
- }), /* @__PURE__ */ (0, b.jsx)(F, {
816
+ children: n ? /* @__PURE__ */ (0, x.jsx)(be, {}) : /* @__PURE__ */ (0, x.jsx)(j, {})
817
+ }), /* @__PURE__ */ (0, x.jsx)(I, {
753
818
  variant: "outline",
754
- className: Ee.close,
819
+ className: Ae.close,
755
820
  "aria-label": "Close",
756
821
  disabled: n,
757
822
  onClick: t,
758
- children: /* @__PURE__ */ (0, b.jsx)(ee, {})
823
+ children: /* @__PURE__ */ (0, x.jsx)(ee, {})
759
824
  })]
760
- }), z = {
761
- tooltip: "_tooltip_1dl6s_1",
762
- container: "_container_1dl6s_5",
763
- popup: "_popup_1dl6s_19",
764
- animated: "_animated_1dl6s_92",
765
- mask: "_mask_1dl6s_101",
766
- track: "_track_1dl6s_108",
767
- title: "_title_1dl6s_125"
768
- }, De = (t, n = "top") => {
769
- let [i, a] = u(null), [d, f] = u(null), [p, m] = u(!1), [h, g] = u(!1), [_, v] = u([]), y = l(null), b = l(null), x = l([]), S = n === "left" || n === "right", C = c(() => {
825
+ }), B = {
826
+ sliderContainer: "_sliderContainer_1unyb_1",
827
+ disabled: "_disabled_1unyb_11",
828
+ sliderThumb: "_sliderThumb_1unyb_17",
829
+ sliderTrack: "_sliderTrack_1unyb_22",
830
+ sliderRange: "_sliderRange_1unyb_34",
831
+ sliderTooltip: "_sliderTooltip_1unyb_58",
832
+ hiddenInput: "_hiddenInput_1unyb_86"
833
+ }, je = (e, t, n) => {
834
+ let r = n - t;
835
+ return r <= 0 ? 0 : (e - t) / r * 100;
836
+ }, Me = /* @__PURE__ */ new Set([
837
+ "ArrowDown",
838
+ "ArrowLeft",
839
+ "ArrowRight",
840
+ "ArrowUp",
841
+ "End",
842
+ "Home",
843
+ "PageDown",
844
+ "PageUp"
845
+ ]), Ne = ({ min: e, max: t, value: n, step: r = 1, disabled: i = !1, isTooltip: a = !1, unit: o = "", className: l, onChange: f, onInput: p, ref: m }) => {
846
+ let h = u(null), g = u(null), _ = n ?? e, [v, y] = d(_);
847
+ s(m, () => ({ getValue: () => v }), [v]);
848
+ let b = (n) => {
849
+ y(n);
850
+ let r = je(n, e, t);
851
+ h.current?.style.setProperty("--slider-progress", `${r}%`);
852
+ }, S = () => {
853
+ !i && g.current && f?.(Number(g.current.value));
854
+ };
855
+ return c(() => {
856
+ if (!g.current) return;
857
+ n !== void 0 && (g.current.value = String(n));
858
+ let r = Number(g.current.value);
859
+ y(r);
860
+ let i = je(r, e, t);
861
+ h.current?.style.setProperty("--slider-progress", `${i}%`);
862
+ }, [
863
+ n,
864
+ e,
865
+ t
866
+ ]), /* @__PURE__ */ (0, x.jsxs)("div", {
867
+ ref: h,
868
+ className: `${B.sliderContainer} ${i ? B.disabled : ""} ${l || ""}`,
869
+ style: { "--slider-progress": `${je(_, e, t)}%` },
870
+ children: [/* @__PURE__ */ (0, x.jsxs)("div", {
871
+ className: B.sliderTrack,
872
+ children: [
873
+ /* @__PURE__ */ (0, x.jsx)("div", { className: B.sliderRange }),
874
+ /* @__PURE__ */ (0, x.jsx)("div", { className: B.sliderThumb }),
875
+ a && /* @__PURE__ */ (0, x.jsx)("div", {
876
+ className: B.sliderTooltip,
877
+ children: `${v}${o}`
878
+ })
879
+ ]
880
+ }), /* @__PURE__ */ (0, x.jsx)("input", {
881
+ ref: g,
882
+ type: "range",
883
+ min: e,
884
+ max: t,
885
+ step: r,
886
+ defaultValue: _,
887
+ disabled: i,
888
+ onInput: (e) => {
889
+ let t = Number(e.currentTarget.value);
890
+ b(t), p?.(t);
891
+ },
892
+ onPointerUp: () => {
893
+ S();
894
+ },
895
+ onKeyUp: (e) => {
896
+ Me.has(e.key) && S();
897
+ },
898
+ className: B.hiddenInput
899
+ })]
900
+ });
901
+ }, V = {
902
+ tooltip: "_tooltip_1rdl9_1",
903
+ container: "_container_1rdl9_5",
904
+ popup: "_popup_1rdl9_19",
905
+ animated: "_animated_1rdl9_92",
906
+ mask: "_mask_1rdl9_101",
907
+ track: "_track_1rdl9_108",
908
+ title: "_title_1rdl9_125"
909
+ }, Pe = (t, n = "top") => {
910
+ let [i, a] = d(null), [s, f] = d(null), [p, m] = d(!1), [h, g] = d(!1), [_, v] = d([]), y = u(null), b = u(null), x = u([]), S = n === "left" || n === "right", C = l(() => {
770
911
  let n = [];
771
912
  return e.forEach(t, (e) => {
772
913
  if (r(e)) {
@@ -775,7 +916,7 @@ var I = {
775
916
  }
776
917
  }), n;
777
918
  }, [t]), w = C.join("\0"), T = C.length;
778
- s(() => {
919
+ c(() => {
779
920
  let e = () => {
780
921
  let e = x.current.slice(0, T).map((e) => ({
781
922
  w: e?.offsetWidth ?? 0,
@@ -827,8 +968,8 @@ var I = {
827
968
  isVisible: p,
828
969
  isAnimated: h,
829
970
  cssVars: {
830
- "--tooltip-x": d ? `${d.x}px` : "0px",
831
- "--tooltip-y": d ? `${d.y}px` : "0px",
971
+ "--tooltip-x": s ? `${s.x}px` : "0px",
972
+ "--tooltip-y": s ? `${s.y}px` : "0px",
832
973
  "--tooltip-opacity": p ? "1" : "0",
833
974
  "--tooltip-w": k?.w ? `${k.w}px` : "auto",
834
975
  "--tooltip-h": k?.h ? `${k.h}px` : "auto",
@@ -837,45 +978,48 @@ var I = {
837
978
  handleMouseMove: E,
838
979
  handleMouseLeave: D
839
980
  };
840
- }, B = ({ children: e, position: t = "top", className: n = "", classNameTitle: r = "" }) => {
841
- let { containerRef: i, trackRef: a, titleRefs: o, titles: s, isAnimated: c, cssVars: l, handleMouseMove: u, handleMouseLeave: d } = De(e, t);
842
- return /* @__PURE__ */ (0, b.jsxs)("div", {
843
- ref: i,
844
- onMouseMove: u,
845
- onMouseLeave: d,
846
- onBlur: d,
847
- className: z.tooltip,
848
- style: l,
849
- children: [/* @__PURE__ */ (0, b.jsx)("div", {
981
+ }, H = ({ children: e, position: t = "top", className: n = "", classNameTitle: r = "", style: i }) => {
982
+ let { containerRef: a, trackRef: o, titleRefs: s, titles: c, isAnimated: l, cssVars: u, handleMouseMove: d, handleMouseLeave: f } = Pe(e, t);
983
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
984
+ ref: a,
985
+ onMouseMove: d,
986
+ onMouseLeave: f,
987
+ onBlur: f,
988
+ className: V.tooltip,
989
+ style: {
990
+ ...u,
991
+ ...i
992
+ },
993
+ children: [/* @__PURE__ */ (0, x.jsx)("div", {
850
994
  "data-position": t,
851
- className: z.container,
995
+ className: `${V.container} ${n}`,
852
996
  children: e
853
- }), /* @__PURE__ */ (0, b.jsx)("div", {
997
+ }), /* @__PURE__ */ (0, x.jsx)("div", {
854
998
  "aria-hidden": "true",
855
999
  "data-position": t,
856
- className: `${z.popup} ${c ? z.animated : ""} ${n}`,
857
- children: /* @__PURE__ */ (0, b.jsx)("div", {
858
- className: z.mask,
859
- children: /* @__PURE__ */ (0, b.jsx)("div", {
860
- ref: a,
1000
+ className: `${V.popup} ${l ? V.animated : ""}`,
1001
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
1002
+ className: V.mask,
1003
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
1004
+ ref: o,
861
1005
  "data-position": t,
862
- className: z.track,
863
- children: s.map((e, t) => /* @__PURE__ */ (0, b.jsx)("div", {
1006
+ className: V.track,
1007
+ children: c.map((e, t) => /* @__PURE__ */ (0, x.jsx)("div", {
864
1008
  ref: (e) => {
865
- o.current[t] = e;
1009
+ s.current[t] = e;
866
1010
  },
867
- className: `${z.title} ${r}`,
1011
+ className: `${V.title} ${r}`,
868
1012
  children: e
869
1013
  }, t))
870
1014
  })
871
1015
  })
872
1016
  })]
873
1017
  });
874
- }, Oe = { surfaceTool: "_surfaceTool_h38e6_1" }, V = ({ children: e, className: t = "", ref: n }) => /* @__PURE__ */ (0, b.jsx)("div", {
1018
+ }, Fe = { surfaceTool: "_surfaceTool_e739m_1" }, U = ({ children: e, className: t = "", ref: n }) => /* @__PURE__ */ (0, x.jsx)("div", {
875
1019
  ref: n,
876
- className: `${Oe.surfaceTool} ${t}`,
1020
+ className: `${Fe.surfaceTool} ${t}`,
877
1021
  children: e
878
- }), ke = 1920, Ae = .85, je = [
1022
+ }), Ie = 1920, Le = .85, Re = [
879
1023
  {
880
1024
  label: "Facebook",
881
1025
  value: "facebook",
@@ -978,13 +1122,125 @@ var I = {
978
1122
  }
979
1123
  ]
980
1124
  }
981
- ], H = 32, Me = (e, t, n, r, i, a, o, s, c, l) => {
1125
+ ], ze = [
1126
+ {
1127
+ value: "saturate",
1128
+ label: "Saturate",
1129
+ min: 0,
1130
+ max: 200,
1131
+ step: 1,
1132
+ unit: "%",
1133
+ sliderValue: 100,
1134
+ rightLabel: "100%"
1135
+ },
1136
+ {
1137
+ value: "grayscale",
1138
+ label: "Grayscale",
1139
+ min: 0,
1140
+ max: 100,
1141
+ step: 1,
1142
+ unit: "%",
1143
+ sliderValue: 0,
1144
+ rightLabel: "0%"
1145
+ },
1146
+ {
1147
+ value: "sepia",
1148
+ label: "Sepia",
1149
+ min: 0,
1150
+ max: 100,
1151
+ step: 1,
1152
+ unit: "%",
1153
+ sliderValue: 0,
1154
+ rightLabel: "0%"
1155
+ },
1156
+ {
1157
+ value: "invert",
1158
+ label: "Invert",
1159
+ min: 0,
1160
+ max: 100,
1161
+ step: 1,
1162
+ unit: "%",
1163
+ sliderValue: 0,
1164
+ rightLabel: "0%"
1165
+ },
1166
+ {
1167
+ value: "hueRotate",
1168
+ label: "Hue Rotate",
1169
+ min: 0,
1170
+ max: 360,
1171
+ step: 1,
1172
+ unit: "°",
1173
+ sliderValue: 0,
1174
+ rightLabel: "0°"
1175
+ },
1176
+ {
1177
+ value: "brightness",
1178
+ label: "Brightness",
1179
+ min: 0,
1180
+ max: 200,
1181
+ step: 1,
1182
+ unit: "%",
1183
+ sliderValue: 100,
1184
+ rightLabel: "100%"
1185
+ },
1186
+ {
1187
+ value: "contrast",
1188
+ label: "Contrast",
1189
+ min: 0,
1190
+ max: 200,
1191
+ step: 1,
1192
+ unit: "%",
1193
+ sliderValue: 100,
1194
+ rightLabel: "100%"
1195
+ }
1196
+ ], Be = [
1197
+ {
1198
+ value: "vintage",
1199
+ label: "Vintage"
1200
+ },
1201
+ {
1202
+ value: "olive-army",
1203
+ label: "Olive Army"
1204
+ },
1205
+ {
1206
+ value: "warm-sunset",
1207
+ label: "Warm Sunset"
1208
+ },
1209
+ {
1210
+ value: "sin-city-red",
1211
+ label: "Sin City Red"
1212
+ },
1213
+ {
1214
+ value: "plastic-wrap",
1215
+ label: "Plastic Wrap"
1216
+ },
1217
+ {
1218
+ value: "cross-process",
1219
+ label: "Cross-Processing"
1220
+ },
1221
+ {
1222
+ value: "crt-lines",
1223
+ label: "CRT Monitor"
1224
+ },
1225
+ {
1226
+ value: "grain",
1227
+ label: "Grain / Noise"
1228
+ },
1229
+ {
1230
+ value: "emboss",
1231
+ label: "Emboss Effect"
1232
+ },
1233
+ {
1234
+ value: "x-ray",
1235
+ label: "X-Ray"
1236
+ }
1237
+ ], W = 32, Ve = (e, t, n, r, i, a, o, s, c, l) => {
982
1238
  let { x: u, y: d, w: f, h: p } = c;
983
1239
  if (e) {
984
1240
  let e = o - c.w - c.x;
985
- u += i - n, u < 0 && (u = 0), f = o - u - e, f < H && (f = H, u = o - e - H);
1241
+ u += i - n, u < 0 && (u = 0), f = o - u - e, f < W && (f = W, u = o - e - W);
986
1242
  let t = s - p - d;
987
- d += a - r, d < 0 && (d = 0), p = s - d - t, p < H && (p = H, d = s - t - H);
1243
+ d += a - r, d < 0 && (d = 0), p = s - d - t, p < W && (p = W, d = s - t - W);
988
1244
  } else {
989
1245
  if (t >= 1) {
990
1246
  let e = i - n, r = Math.round(e / t);
@@ -993,7 +1249,7 @@ var I = {
993
1249
  let e = a - r, n = Math.round(e * t);
994
1250
  f -= n, p -= e, u += n, d += e;
995
1251
  }
996
- if (u < 0 || d < 0 || f < H || p < H) return l;
1252
+ if (u < 0 || d < 0 || f < W || p < W) return l;
997
1253
  }
998
1254
  return {
999
1255
  x: u,
@@ -1001,12 +1257,12 @@ var I = {
1001
1257
  w: f,
1002
1258
  h: p
1003
1259
  };
1004
- }, Ne = (e, t, n, r, i, a, o, s, c, l) => {
1260
+ }, He = (e, t, n, r, i, a, o, s, c, l) => {
1005
1261
  let { x: u } = c, { y: d, w: f, h: p } = c;
1006
1262
  if (e) {
1007
- f += i - n, f + u > o && (f = o - u), f < H && (f = H);
1263
+ f += i - n, f + u > o && (f = o - u), f < W && (f = W);
1008
1264
  let e = s - p - d;
1009
- d += a - r, d < 0 && (d = 0), p = s - d - e, p < H && (p = H, d = s - e - H);
1265
+ d += a - r, d < 0 && (d = 0), p = s - d - e, p < W && (p = W, d = s - e - W);
1010
1266
  } else {
1011
1267
  if (t > 1) {
1012
1268
  let e = i - n, r = Math.round(e / t);
@@ -1015,7 +1271,7 @@ var I = {
1015
1271
  let e = a - r, n = Math.round(e * t);
1016
1272
  f -= n, p -= e, d += e;
1017
1273
  }
1018
- if (f + u > o || d < 0 || f < H || p < H) return l;
1274
+ if (f + u > o || d < 0 || f < W || p < W) return l;
1019
1275
  }
1020
1276
  return {
1021
1277
  x: u,
@@ -1023,12 +1279,12 @@ var I = {
1023
1279
  w: f,
1024
1280
  h: p
1025
1281
  };
1026
- }, Pe = (e, t, n, r, i, a, o, s, c, l) => {
1282
+ }, Ue = (e, t, n, r, i, a, o, s, c, l) => {
1027
1283
  let { y: u } = c, { x: d, w: f, h: p } = c;
1028
1284
  if (e) {
1029
- p += a - r, p + u > s && (p = s - u), p < H && (p = H);
1285
+ p += a - r, p + u > s && (p = s - u), p < W && (p = W);
1030
1286
  let e = o - c.w - c.x;
1031
- d += i - n, d < 0 && (d = 0), f = o - d - e, f < H && (f = H, d = o - e - H);
1287
+ d += i - n, d < 0 && (d = 0), f = o - d - e, f < W && (f = W, d = o - e - W);
1032
1288
  } else {
1033
1289
  if (t >= 1) {
1034
1290
  let e = i - n, r = Math.round(e / t);
@@ -1037,7 +1293,7 @@ var I = {
1037
1293
  let e = a - r, n = Math.round(e * t);
1038
1294
  f += n, p += e, d -= n;
1039
1295
  }
1040
- if (p + u > s || d < 0 || f < H || p < H) return l;
1296
+ if (p + u > s || d < 0 || f < W || p < W) return l;
1041
1297
  }
1042
1298
  return {
1043
1299
  x: d,
@@ -1045,9 +1301,9 @@ var I = {
1045
1301
  w: f,
1046
1302
  h: p
1047
1303
  };
1048
- }, Fe = (e, t, n, r, i, a, o, s, c, l) => {
1304
+ }, We = (e, t, n, r, i, a, o, s, c, l) => {
1049
1305
  let { x: u, y: d } = c, { w: f, h: p } = c;
1050
- if (e) f += i - n, f + u > o && (f = o - u), f < H && (f = H), p += a - r, p + d > s && (p = s - d), p < H && (p = H);
1306
+ if (e) f += i - n, f + u > o && (f = o - u), f < W && (f = W), p += a - r, p + d > s && (p = s - d), p < W && (p = W);
1051
1307
  else {
1052
1308
  if (t >= 1) {
1053
1309
  let e = i - n, r = Math.round(e / t);
@@ -1056,7 +1312,7 @@ var I = {
1056
1312
  let e = a - r, n = Math.round(e * t);
1057
1313
  f += n, p += e;
1058
1314
  }
1059
- if (p + d > s || f + u > o || f < H || p < H) return l;
1315
+ if (p + d > s || f + u > o || f < W || p < W) return l;
1060
1316
  }
1061
1317
  return {
1062
1318
  x: u,
@@ -1064,20 +1320,20 @@ var I = {
1064
1320
  w: f,
1065
1321
  h: p
1066
1322
  };
1067
- }, Ie = (e, t, n, r, i, a, o, s, c) => {
1068
- let l = e === "tl" || e === "bl", u = e === "tl" || e === "tr", d = c.x + c.w, f = c.y + c.h, p = i - n, m = a - r, h = t >= 1 ? c.w + (l ? -p : p) : (c.h + (u ? -m : m)) * t, g = l ? d : o - c.x, _ = u ? f : s - c.y, v = Math.min(g, _ * t), y = Math.max(H, H * t), b = Math.min(Math.max(h, y), v), x = b / t;
1323
+ }, Ge = (e, t, n, r, i, a, o, s, c) => {
1324
+ let l = e === "tl" || e === "bl", u = e === "tl" || e === "tr", d = c.x + c.w, f = c.y + c.h, p = i - n, m = a - r, h = t >= 1 ? c.w + (l ? -p : p) : (c.h + (u ? -m : m)) * t, g = l ? d : o - c.x, _ = u ? f : s - c.y, v = Math.min(g, _ * t), y = Math.max(W, W * t), b = Math.min(Math.max(h, y), v), x = b / t;
1069
1325
  return {
1070
1326
  x: l ? d - b : c.x,
1071
1327
  y: u ? f - x : c.y,
1072
1328
  w: b,
1073
1329
  h: x
1074
1330
  };
1075
- }, Le = (e, t, n, r, i, a, o, s, c, l, u) => t ? e === "tl" ? Me(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? Ne(t, n, r, i, a, o, s, c, l, u) : e === "bl" ? Pe(t, n, r, i, a, o, s, c, l, u) : e === "br" ? Fe(t, n, r, i, a, o, s, c, l, u) : {
1331
+ }, Ke = (e, t, n, r, i, a, o, s, c, l, u) => t ? e === "tl" ? Ve(t, n, r, i, a, o, s, c, l, u) : e === "tr" ? He(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" ? We(t, n, r, i, a, o, s, c, l, u) : {
1076
1332
  x: 0,
1077
1333
  y: 0,
1078
1334
  w: 0,
1079
1335
  h: 0
1080
- } : Ie(e, n, r, i, a, o, s, c, l), U = (e, t, n) => {
1336
+ } : Ge(e, n, r, i, a, o, s, c, l), G = (e, t, n) => {
1081
1337
  let r = .12, i = t / n, a = 0, o = 0;
1082
1338
  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));
1083
1339
  let s = a / t * 100, c = o / n * 100, l = (t - a) / 2 / t * 100, u = (n - o) / 2 / n * 100;
@@ -1091,7 +1347,7 @@ var I = {
1091
1347
  wP: Math.round(s / 100 * t),
1092
1348
  hP: Math.round(c / 100 * n)
1093
1349
  };
1094
- }, Re = (e, t, n, r) => {
1350
+ }, qe = (e, t, n, r) => {
1095
1351
  let i = e.w / 100 * n, a = e.h / 100 * r;
1096
1352
  t >= 1 ? a = i / t : i = a * t;
1097
1353
  let o = i / n * 100, s = a / r * 100, c = Math.max(o / (100 - e.x), s / (100 - e.y), 1);
@@ -1100,21 +1356,21 @@ var I = {
1100
1356
  w: o,
1101
1357
  h: s
1102
1358
  };
1103
- }, W = (e) => Math.abs(Math.round(e / 90)) % 2 == 1, ze = (e, t, n, r) => W(n) === W(r) ? {
1359
+ }, K = (e) => Math.abs(Math.round(e / 90)) % 2 == 1, Je = (e, t, n, r) => K(n) === K(r) ? {
1104
1360
  width: e,
1105
1361
  height: t
1106
1362
  } : {
1107
1363
  width: t,
1108
1364
  height: e
1109
- }, Be = async (e) => {
1110
- let { width: t, height: n } = e, r = Math.min(1, ke / Math.max(t, n)), i = Math.round(t * r), a = Math.round(n * r), o = new OffscreenCanvas(i, a), s = o.getContext("2d");
1365
+ }, Ye = async (e) => {
1366
+ let { width: t, height: n } = e, r = Math.min(1, Ie / Math.max(t, n)), i = Math.round(t * r), a = Math.round(n * r), o = new OffscreenCanvas(i, a), s = o.getContext("2d");
1111
1367
  if (!s) throw Error("Failed to get 2D context for preview canvas");
1112
1368
  return s.drawImage(e, 0, 0, i, a), o.convertToBlob({
1113
1369
  type: "image/webp",
1114
- quality: Ae
1370
+ quality: Le
1115
1371
  });
1116
1372
  };
1117
- function Ve(e) {
1373
+ function Xe(e) {
1118
1374
  let t = new OffscreenCanvas(e.width, e.height), n = t.getContext("2d");
1119
1375
  if (!n) throw Error("Failed to create 2D context for canvas.");
1120
1376
  n.drawImage(e, 0, 0);
@@ -1128,14 +1384,14 @@ function Ve(e) {
1128
1384
  }
1129
1385
  //#endregion
1130
1386
  //#region src/shared/components/Pixedi/utils/imageProcessor.ts
1131
- var He = (e) => new Promise((t, n) => {
1387
+ var Ze = (e) => new Promise((t, n) => {
1132
1388
  let r = new FileReader();
1133
1389
  r.onloadend = () => {
1134
1390
  let e = r.result;
1135
1391
  typeof e == "string" ? t(e) : n(/* @__PURE__ */ Error("Failed to read blob as base64"));
1136
1392
  }, r.onerror = () => n(r.error ?? /* @__PURE__ */ Error("FileReader error")), r.readAsDataURL(e);
1137
1393
  });
1138
- async function Ue(e) {
1394
+ async function Qe(e) {
1139
1395
  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 });
1140
1396
  i.width = t.width, i.height = t.height, a?.drawImage(t, 0, 0), t.close();
1141
1397
  let o = () => {
@@ -1163,6 +1419,11 @@ async function Ue(e) {
1163
1419
  let n = o();
1164
1420
  i.width = e, i.height = t, a.clearRect(0, 0, e, t), a.drawImage(n, 0, 0, e, t);
1165
1421
  },
1422
+ filters: (e) => {
1423
+ if (!a) return;
1424
+ let t = o(), n = "url" in e ? `url(#${e.url})` : Object.entries(e).map(([e, t]) => e === "hueRotate" ? `hue-rotate(${t}deg)` : `${e}(${t}%)`).join(" ");
1425
+ a.clearRect(0, 0, i.width, i.height), a.filter = n, a.drawImage(t, 0, 0), a.filter = "none";
1426
+ },
1166
1427
  get: async (e) => {
1167
1428
  let { quality: t = .85, saveAsWEBP: n = !1 } = e, a = n ? "image/webp" : r, o = await new Promise((e, o) => {
1168
1429
  r === "image/jpeg" || r === "image/webp" || n ? i.toBlob((t) => {
@@ -1170,7 +1431,7 @@ async function Ue(e) {
1170
1431
  }, a, t) : i.toBlob((t) => {
1171
1432
  t ? e(t) : o(/* @__PURE__ */ Error("Failed to encode image as image/png"));
1172
1433
  }, "image/png");
1173
- }), s = await createImageBitmap(o), c = await Be(s), { width: l, height: u } = s, d = Ve(s);
1434
+ }), s = await createImageBitmap(o), c = await Ye(s), { width: l, height: u } = s, d = Xe(s);
1174
1435
  return s.close(), {
1175
1436
  newBlob: o,
1176
1437
  previewBlob: c,
@@ -1184,17 +1445,17 @@ async function Ue(e) {
1184
1445
  }
1185
1446
  //#endregion
1186
1447
  //#region src/shared/components/Pixedi/utils/preview.ts
1187
- var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (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]]], Ge = (e) => (Math.round(e / 90) % 4 + 4) % 4 * 90, Ke = (e) => {
1188
- switch (Ge(e)) {
1448
+ var q = (e, t, n) => Math.max(t, Math.min(n, e)), $e = (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]]], et = (e) => (Math.round(e / 90) % 4 + 4) % 4 * 90, tt = (e) => {
1449
+ switch (et(e)) {
1189
1450
  case 90: return [[0, -1], [1, 0]];
1190
1451
  case 180: return [[-1, 0], [0, -1]];
1191
1452
  case 270: return [[0, 1], [-1, 0]];
1192
1453
  default: return [[1, 0], [0, 1]];
1193
1454
  }
1194
- }, qe = (e, t) => [[e ? -1 : 1, 0], [0, t ? -1 : 1]], Je = (e, t, n) => We(qe(t, n), Ke(-e)), Ye = (e) => [+(e[0][0] < 0 || e[0][1] < 0), +(e[1][0] < 0 || e[1][1] < 0)], K = (e, t, n) => {
1195
- let r = Ye(e);
1455
+ }, nt = (e, t) => [[e ? -1 : 1, 0], [0, t ? -1 : 1]], rt = (e, t, n) => $e(nt(t, n), tt(-e)), it = (e) => [+(e[0][0] < 0 || e[0][1] < 0), +(e[1][0] < 0 || e[1][1] < 0)], at = (e, t, n) => {
1456
+ let r = it(e);
1196
1457
  return [e[0][0] * t + e[0][1] * n + r[0], e[1][0] * t + e[1][1] * n + r[1]];
1197
- }, Xe = (e) => {
1458
+ }, ot = (e) => {
1198
1459
  let t = 1, n = 1, r = {
1199
1460
  x: 0,
1200
1461
  y: 0,
@@ -1203,18 +1464,18 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1203
1464
  }, i = 0, a = !1, o = !1;
1204
1465
  for (let s = 0; s < e.length; s++) {
1205
1466
  let c = e[s];
1206
- if (c.action.name === m.INITIAL) t = c.width, n = c.height, r = {
1467
+ if (c.action.name === h.INITIAL) t = c.width, n = c.height, r = {
1207
1468
  x: 0,
1208
1469
  y: 0,
1209
1470
  w: 1,
1210
1471
  h: 1
1211
1472
  }, i = 0, a = !1, o = !1;
1212
- else if (c.action.name === m.CROP) {
1213
- 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 = Je(i, a, o), u = [
1214
- K(l, e, t),
1215
- K(l, e + n, t),
1216
- K(l, e, t + s),
1217
- K(l, e + n, t + s)
1473
+ else if (c.action.name === h.CROP) {
1474
+ 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 = rt(i, a, o), u = [
1475
+ at(l, e, t),
1476
+ at(l, e + n, t),
1477
+ at(l, e, t + s),
1478
+ at(l, e + n, t + s)
1218
1479
  ], 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]));
1219
1480
  r = {
1220
1481
  x: r.x + d * r.w,
@@ -1222,12 +1483,12 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1222
1483
  w: r.w * (f - d),
1223
1484
  h: r.h * (m - p)
1224
1485
  };
1225
- } else if (c.action.name === "flip") {
1226
- let e = W(i), t = e ? c.action.args.vertical : c.action.args.horizontal, n = e ? c.action.args.horizontal : c.action.args.vertical;
1486
+ } else if (c.action.name === h.FLIP) {
1487
+ let e = K(i), t = e ? c.action.args.vertical : c.action.args.horizontal, n = e ? c.action.args.horizontal : c.action.args.vertical;
1227
1488
  t && (a = !a), n && (o = !o);
1228
- } else c.action.name === "rotate" && (i = c.action.args.degrees);
1489
+ } else c.action.name === h.ROTATE && (i = c.action.args.degrees);
1229
1490
  }
1230
- let s = r.w * t, c = r.h * n, l = W(i), u = l ? c : s, d = l ? s : c, f = e.at(-1)?.width || 0, p = e.at(-1)?.height || 0;
1491
+ let s = r.w * t, c = r.h * n, l = K(i), u = l ? c : s, d = l ? s : c, f = e.at(-1)?.width || 0, p = e.at(-1)?.height || 0, m = e.filter((e) => e.action.name === h.FILTERS).at(-1), g = Object.entries(m?.action.args || {}).map(([e, t]) => e === "url" ? `url(#${t})` : e === "hueRotate" ? `hue-rotate(${t}deg)` : `${e}(${t}%)`);
1231
1492
  return {
1232
1493
  box: r,
1233
1494
  boxWidth: s,
@@ -1240,23 +1501,24 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1240
1501
  viewHeight: d,
1241
1502
  rotation: i,
1242
1503
  flipH: a,
1243
- flipV: o
1504
+ flipV: o,
1505
+ filters: g
1244
1506
  };
1245
- }, Ze = (e) => {
1246
- let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } = Xe(e), d = G(t.x, 0, 1), f = G(t.y, 0, 1), p = {
1247
- x: d,
1248
- y: f,
1249
- w: G(t.w, 0, 1 - d),
1250
- h: G(t.h, 0, 1 - f)
1251
- }, m = Ge(i);
1507
+ }, st = (e) => {
1508
+ let { box: t, flipH: n, flipV: r, rotation: i, newWidth: a, newHeight: o, initWidth: s, initHeight: c, viewWidth: l, viewHeight: u } = ot(e), d = e.filter((e) => e.action.name === h.FILTERS).at(-1)?.action.args, f = q(t.x, 0, 1), p = q(t.y, 0, 1), m = {
1509
+ x: f,
1510
+ y: p,
1511
+ w: q(t.w, 0, 1 - f),
1512
+ h: q(t.h, 0, 1 - p)
1513
+ }, g = et(i);
1252
1514
  return {
1253
- ...p.x === 0 && p.y === 0 && p.w === 1 && p.h === 1 ? {} : { crop: {
1515
+ ...m.x === 0 && m.y === 0 && m.w === 1 && m.h === 1 ? {} : { crop: {
1254
1516
  x: Math.round(s * t.x),
1255
1517
  y: Math.round(c * t.y),
1256
1518
  w: Math.round(s * t.w),
1257
1519
  h: Math.round(c * t.h)
1258
1520
  } },
1259
- ...m === 0 ? {} : { rotate: { degrees: m } },
1521
+ ...g === 0 ? {} : { rotate: { degrees: g } },
1260
1522
  ...n || r ? { flip: {
1261
1523
  horizontal: n,
1262
1524
  vertical: r
@@ -1264,20 +1526,21 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1264
1526
  ...Math.round(l) !== a || Math.round(u) !== o ? { resize: {
1265
1527
  width: a,
1266
1528
  height: o
1267
- } } : {}
1529
+ } } : {},
1530
+ ...d ? { filters: d } : {}
1268
1531
  };
1269
- }, Qe = (e) => {
1270
- let [t, n] = u(!1), { setImage: r, settings: i, history: a, originalBlob: o, setCurrentAction: s, resetHistory: c } = N();
1532
+ }, ct = (e) => {
1533
+ let [t, n] = d(!1), { setImage: r, settings: i, history: a, originalBlob: o, setCurrentAction: s, resetHistory: c } = P();
1271
1534
  return {
1272
1535
  save: async () => {
1273
1536
  if (!o) return;
1274
1537
  n(!0);
1275
- let t = Ze(a.items.slice(0, a.pointer + 1));
1538
+ let t = st(a.items.slice(0, a.pointer + 1));
1276
1539
  try {
1277
- let n = await Ue(o);
1278
- 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);
1540
+ let n = await Qe(o);
1541
+ 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), t.filters && n.filters(t.filters);
1279
1542
  let { newBlob: a, previewBlob: s, mimeType: c, width: l, height: u, isAlpha: d } = await n.get(i), f = "";
1280
- i.exportAs === "base64" && (f = await He(a)), await e(f || a), r({
1543
+ i.exportAs === "base64" && (f = await Ze(a)), await e(f || a), r({
1281
1544
  newBlob: a,
1282
1545
  previewBlob: s,
1283
1546
  mimeType: c,
@@ -1296,132 +1559,474 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1296
1559
  },
1297
1560
  isSaving: t
1298
1561
  };
1299
- }, q = {
1300
- header: "_header_1yueu_1",
1301
- left: "_left_1yueu_12",
1302
- sidebarToggle: "_sidebarToggle_1yueu_17",
1303
- mobile: "_mobile_1yueu_29",
1304
- sidebarIcon: "_sidebarIcon_1yueu_33",
1305
- tools: "_tools_1yueu_38",
1306
- history: "_history_1yueu_42",
1307
- historyText: "_historyText_1yueu_47"
1308
- }, $e = ({ onBack: e, onSave: t, isMobile: n }) => {
1309
- let { save: r, reset: i, isSaving: a } = Qe(t), { sidebar: o, history: s, undo: c, redo: l, setSidebar: u, setCurrentAction: d } = N(), f = s.items.length > 1 && !a, p = s.pointer === 0, m = s.pointer === s.items.length - 1, h = s.items.length < 2 || a, g = h || s.pointer === 0;
1310
- return /* @__PURE__ */ (0, b.jsxs)("div", {
1311
- className: q.header,
1312
- children: [/* @__PURE__ */ (0, b.jsxs)("div", {
1313
- className: q.left,
1314
- children: [/* @__PURE__ */ (0, b.jsx)("div", {
1315
- className: `${q.sidebarToggle} ${n ? q.mobile : ""}`,
1562
+ }, J = {
1563
+ header: "_header_m05h6_1",
1564
+ left: "_left_m05h6_12",
1565
+ sidebarToggle: "_sidebarToggle_m05h6_17",
1566
+ mobile: "_mobile_m05h6_30",
1567
+ sidebarIcon: "_sidebarIcon_m05h6_34",
1568
+ tools: "_tools_m05h6_39",
1569
+ history: "_history_m05h6_43",
1570
+ historyText: "_historyText_m05h6_48"
1571
+ }, lt = ({ onBack: e, onSave: t, isMobile: n }) => {
1572
+ let { save: r, reset: i, isSaving: a } = ct(t), { sidebar: o, history: s, undo: c, redo: l, setSidebar: u, setCurrentAction: d } = P(), f = s.items.length > 1 && !a, p = s.pointer === 0, m = s.pointer === s.items.length - 1, h = s.items.length < 2 || a, g = h || s.pointer === 0;
1573
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
1574
+ className: J.header,
1575
+ children: [/* @__PURE__ */ (0, x.jsxs)("div", {
1576
+ className: J.left,
1577
+ children: [/* @__PURE__ */ (0, x.jsx)("div", {
1578
+ className: `${J.sidebarToggle} ${n ? J.mobile : ""}`,
1316
1579
  onClick: () => {
1317
1580
  u(!o);
1318
1581
  },
1319
- children: o ? /* @__PURE__ */ (0, b.jsx)(ge, { className: q.sidebarIcon }) : /* @__PURE__ */ (0, b.jsx)(he, { className: q.sidebarIcon })
1320
- }), /* @__PURE__ */ (0, b.jsx)(F, {
1582
+ children: o ? /* @__PURE__ */ (0, x.jsx)(_e, { className: J.sidebarIcon }) : /* @__PURE__ */ (0, x.jsx)(ge, { className: J.sidebarIcon })
1583
+ }), /* @__PURE__ */ (0, x.jsx)(I, {
1321
1584
  variant: "ghost",
1322
- className: P.rect,
1585
+ className: F.rect,
1323
1586
  onClick: e,
1324
- children: /* @__PURE__ */ (0, b.jsx)(j, {})
1587
+ children: /* @__PURE__ */ (0, x.jsx)(te, {})
1325
1588
  })]
1326
- }), /* @__PURE__ */ (0, b.jsxs)("div", {
1327
- className: q.tools,
1589
+ }), /* @__PURE__ */ (0, x.jsxs)("div", {
1590
+ className: J.tools,
1328
1591
  children: [
1329
- f && /* @__PURE__ */ (0, b.jsxs)("div", {
1330
- className: q.history,
1592
+ f && /* @__PURE__ */ (0, x.jsxs)("div", {
1593
+ className: J.history,
1331
1594
  children: [
1332
- /* @__PURE__ */ (0, b.jsx)(F, {
1595
+ /* @__PURE__ */ (0, x.jsx)(I, {
1333
1596
  variant: "outline",
1334
1597
  disabled: p,
1335
- className: P.rect,
1598
+ className: F.rect,
1336
1599
  onClick: () => {
1337
1600
  c(), d(null);
1338
1601
  },
1339
- children: /* @__PURE__ */ (0, b.jsx)(re, {})
1602
+ children: /* @__PURE__ */ (0, x.jsx)(re, {})
1340
1603
  }),
1341
- /* @__PURE__ */ (0, b.jsxs)("div", {
1342
- className: q.historyText,
1604
+ /* @__PURE__ */ (0, x.jsxs)("div", {
1605
+ className: J.historyText,
1343
1606
  children: [
1344
1607
  s.pointer + 1,
1345
1608
  "/",
1346
1609
  s.items.length
1347
1610
  ]
1348
1611
  }),
1349
- /* @__PURE__ */ (0, b.jsx)(F, {
1612
+ /* @__PURE__ */ (0, x.jsx)(I, {
1350
1613
  variant: "outline",
1351
1614
  disabled: m,
1352
- className: P.rect,
1615
+ className: F.rect,
1353
1616
  onClick: () => {
1354
1617
  l(), d(null);
1355
1618
  },
1356
- children: /* @__PURE__ */ (0, b.jsx)(ie, {})
1619
+ children: /* @__PURE__ */ (0, x.jsx)(ie, {})
1357
1620
  })
1358
1621
  ]
1359
1622
  }),
1360
- /* @__PURE__ */ (0, b.jsx)(F, {
1623
+ /* @__PURE__ */ (0, x.jsx)(I, {
1361
1624
  variant: "outline",
1362
1625
  disabled: h,
1363
1626
  onClick: i,
1364
1627
  children: "Reset"
1365
1628
  }),
1366
- /* @__PURE__ */ (0, b.jsxs)(F, {
1629
+ /* @__PURE__ */ (0, x.jsxs)(I, {
1367
1630
  disabled: g,
1368
1631
  onClick: r,
1369
- children: [a ? /* @__PURE__ */ (0, b.jsx)(_e, {}) : /* @__PURE__ */ (0, b.jsx)(A, {}), "Save"]
1632
+ children: [a ? /* @__PURE__ */ (0, x.jsx)(be, {}) : /* @__PURE__ */ (0, x.jsx)(j, {}), "Save"]
1370
1633
  })
1371
1634
  ]
1372
1635
  })]
1373
1636
  });
1374
- }, et = {
1375
- [m.RESIZE]: {
1376
- icon: /* @__PURE__ */ (0, b.jsx)(le, {}),
1637
+ }, ut = (e, t) => {
1638
+ let n = new CustomEvent("crop-update", { detail: t });
1639
+ e.dispatchEvent(n);
1640
+ }, dt = (e, t) => {
1641
+ let n = new CustomEvent("clip-path-update", { detail: t });
1642
+ e.dispatchEvent(n);
1643
+ }, ft = (e, t) => {
1644
+ let n = new CustomEvent("resize-update", { detail: t });
1645
+ e.dispatchEvent(n);
1646
+ }, pt = (e, t) => {
1647
+ let n = new CustomEvent("filter-update", { detail: t });
1648
+ e.dispatchEvent(n);
1649
+ }, mt = (e, t) => {
1650
+ let n = new CustomEvent("compare-update", { detail: t });
1651
+ e.dispatchEvent(n);
1652
+ }, ht = () => {
1653
+ let { showCompare: e, previewUrl: t, getLastFilter: n, getLastHistoryItem: r, setCurrentAction: i, setSidebar: a, toggleCompare: s, addToHistory: c, eventBus: u } = P(), { width: f, height: p } = r(), { action: m } = n() || {}, g = m?.args || {}, _ = g?.url, v = ze.map((e) => ({
1654
+ ...e,
1655
+ sliderValue: g[e.value] ?? e.sliderValue,
1656
+ rightLabel: `${g[e.value] ?? e.sliderValue}${e.unit}`
1657
+ })), y = v.find((e) => e.value === "saturate")?.sliderValue, [b, x] = d("saturate"), [S, C] = d(_ ?? "vintage"), [w, T] = d(v), [E, D] = d(y ?? 0), [O, k] = d(!!_), A = l(() => Object.fromEntries(w.map((e) => [e.value, e.sliderValue])), [w]), j = () => {
1658
+ s(), mt(u, 50);
1659
+ }, ee = (e) => {
1660
+ pt(u, {
1661
+ ...A,
1662
+ [b]: e
1663
+ });
1664
+ }, M = w.find((e) => e.value === b);
1665
+ return o(() => {
1666
+ O ? pt(u, { url: S }) : pt(u, {
1667
+ ...A,
1668
+ [b]: E
1669
+ });
1670
+ }, [
1671
+ O,
1672
+ S,
1673
+ E,
1674
+ A,
1675
+ b,
1676
+ u
1677
+ ]), {
1678
+ showCompare: e,
1679
+ previewUrl: t,
1680
+ isUrl: O,
1681
+ toggleIsUrl: () => k(!O),
1682
+ filters: w,
1683
+ selectedFilter: b,
1684
+ selectedFilterItem: M,
1685
+ selectedUrl: S,
1686
+ sliderValue: E,
1687
+ handleToggleCompare: j,
1688
+ handleSliderInput: ee,
1689
+ handleSliderChange: (e) => {
1690
+ D(e), T((t) => t.map((t) => t.value === b ? {
1691
+ ...t,
1692
+ sliderValue: e,
1693
+ rightLabel: `${e}${t.unit}`
1694
+ } : t));
1695
+ },
1696
+ handleChange: (e) => {
1697
+ x(e), D(w.find((t) => t.value === e)?.sliderValue || 0);
1698
+ },
1699
+ handleChangeWhenUrl: (e) => {
1700
+ C(e), pt(u, { url: e });
1701
+ },
1702
+ handleSave: () => {
1703
+ c({
1704
+ width: f,
1705
+ height: p,
1706
+ action: {
1707
+ name: h.FILTERS,
1708
+ args: { ...O ? { url: S } : Object.fromEntries(w.map((e) => [e.value, e.sliderValue])) }
1709
+ }
1710
+ }), e && s(), a(!0);
1711
+ },
1712
+ handleClose: () => {
1713
+ e && s(), i(null), a(!0);
1714
+ }
1715
+ };
1716
+ }, Y = {
1717
+ tools: "_tools_5caap_1",
1718
+ row1: "_row1_5caap_5",
1719
+ min: "_min_5caap_13",
1720
+ slider: "_slider_5caap_19",
1721
+ max: "_max_5caap_23",
1722
+ row2: "_row2_5caap_29",
1723
+ select: "_select_5caap_35",
1724
+ option: "_option_5caap_39",
1725
+ active: "_active_5caap_50",
1726
+ filterInteract: "_filterInteract_5caap_55",
1727
+ compare: "_compare_5caap_70",
1728
+ compareThumb: "_compareThumb_5caap_88"
1729
+ }, gt = () => {
1730
+ let { showCompare: e, previewUrl: t, isUrl: n, toggleIsUrl: r, filters: i, selectedFilter: a, selectedFilterItem: o, selectedUrl: s, sliderValue: c, handleToggleCompare: l, handleSliderInput: u, handleSliderChange: d, handleChange: f, handleChangeWhenUrl: p, handleSave: m, handleClose: h } = ht();
1731
+ return /* @__PURE__ */ (0, x.jsxs)(U, {
1732
+ className: Y.tools,
1733
+ children: [!n && o && /* @__PURE__ */ (0, x.jsxs)("div", {
1734
+ className: Y.row1,
1735
+ children: [
1736
+ /* @__PURE__ */ (0, x.jsxs)("div", {
1737
+ className: Y.min,
1738
+ children: [o.min, o.unit]
1739
+ }),
1740
+ /* @__PURE__ */ (0, x.jsx)(Ne, {
1741
+ className: Y.slider,
1742
+ min: o.min,
1743
+ max: o.max,
1744
+ step: o.step,
1745
+ value: c,
1746
+ isTooltip: !0,
1747
+ unit: o.unit,
1748
+ onInput: u,
1749
+ onChange: d
1750
+ }),
1751
+ /* @__PURE__ */ (0, x.jsxs)("div", {
1752
+ className: Y.max,
1753
+ children: [o.max, o.unit]
1754
+ })
1755
+ ]
1756
+ }), /* @__PURE__ */ (0, x.jsxs)("div", {
1757
+ className: Y.row2,
1758
+ children: [
1759
+ /* @__PURE__ */ (0, x.jsx)(H, {
1760
+ position: "top",
1761
+ children: /* @__PURE__ */ (0, x.jsx)(I, {
1762
+ variant: "outline",
1763
+ "aria-label": "Compare",
1764
+ "data-tooltip": "Compare",
1765
+ onClick: l,
1766
+ className: e ? Y.active : "",
1767
+ children: /* @__PURE__ */ (0, x.jsx)(ye, {})
1768
+ })
1769
+ }),
1770
+ /* @__PURE__ */ (0, x.jsx)(H, {
1771
+ position: "top",
1772
+ children: /* @__PURE__ */ (0, x.jsx)(I, {
1773
+ variant: "outline",
1774
+ "aria-label": n ? "Filters" : "Predefined Filters",
1775
+ "data-tooltip": n ? "Filters" : "Predefined Filters",
1776
+ onClick: r,
1777
+ children: n ? /* @__PURE__ */ (0, x.jsx)(he, {}) : /* @__PURE__ */ (0, x.jsx)(ve, {})
1778
+ })
1779
+ }),
1780
+ /* @__PURE__ */ (0, x.jsx)(Te, {
1781
+ items: n ? Be : i,
1782
+ value: n ? s : a,
1783
+ placeholder: "Select filter",
1784
+ className: Y.select,
1785
+ renderOption: n ? (e) => /* @__PURE__ */ (0, x.jsx)("div", {
1786
+ className: Y.option,
1787
+ children: /* @__PURE__ */ (0, x.jsx)("img", {
1788
+ src: t,
1789
+ alt: e.label,
1790
+ style: { filter: `url(#${e.value})` }
1791
+ })
1792
+ }) : void 0,
1793
+ onChange: n ? p : f
1794
+ }),
1795
+ /* @__PURE__ */ (0, x.jsx)(z, {
1796
+ onSave: m,
1797
+ onClose: h
1798
+ })
1799
+ ]
1800
+ })]
1801
+ });
1802
+ }, _t = ({ isClipped: e, isFilter: t }) => {
1803
+ let { history: n, previewUrl: r, currentAction: i, getLastRotation: a, eventBus: s } = P(), l = u(null), d = u(null), f = u(i?.name), p = u(r);
1804
+ c(() => {
1805
+ let e = f.current, t = i?.name, n = p.current !== r;
1806
+ if (f.current = t, p.current = r, !(e && t && e !== t) && !n) return;
1807
+ let a = l.current;
1808
+ if (!a) return;
1809
+ let o = [a, ...a.querySelectorAll("*")];
1810
+ o.forEach((e) => {
1811
+ e.style.transition = "none";
1812
+ }), a.getBoundingClientRect();
1813
+ let s = () => {
1814
+ o.forEach((e) => {
1815
+ e.style.removeProperty("transition");
1816
+ });
1817
+ }, c = requestAnimationFrame(s);
1818
+ return () => {
1819
+ cancelAnimationFrame(c), s();
1820
+ };
1821
+ }, [i?.name, r]);
1822
+ let m = n.items.slice(0, n.pointer + 1);
1823
+ if (i) {
1824
+ let { width: e, height: t } = n.items.at(n.pointer);
1825
+ m.push({
1826
+ ...i.name === h.ROTATE ? Je(e, t, a(), i.args.degrees) : {
1827
+ width: e,
1828
+ height: t
1829
+ },
1830
+ action: i
1831
+ });
1832
+ }
1833
+ let g = ot(m);
1834
+ return o(() => {
1835
+ e && l.current && (l.current.style.transition = "none"), i?.name !== h.RESIZE && l.current && (l.current.style.transform = "scale(1)");
1836
+ let n = (e) => {
1837
+ let t = e.detail;
1838
+ l.current && (l.current.style.transform = `scale(${t / 100})`);
1839
+ }, r = (t) => {
1840
+ if (!e) return;
1841
+ let { x: n, y: r, w: i, h: a } = t.detail;
1842
+ l.current && (l.current.style.clipPath = `xywh(${n}% ${r}% ${i}% ${a}%)`);
1843
+ }, a = (e) => {
1844
+ if (!t) return;
1845
+ let n = e.detail;
1846
+ if (d.current) if (n.url) d.current.style.filter = `url(#${n.url})`;
1847
+ else {
1848
+ let e = Object.entries(n).map(([e, t]) => e === "hueRotate" ? `hue-rotate(${t}deg)` : `${e}(${t}%)`).join(" ");
1849
+ d.current.style.filter = e;
1850
+ }
1851
+ }, o = (e) => {
1852
+ if (!t) return;
1853
+ let n = e.detail;
1854
+ l.current && (l.current.style.clipPath = `xywh(${n}% 0% ${100 - n}% 100%)`);
1855
+ }, c = new AbortController(), { signal: u } = c;
1856
+ return s.addEventListener("resize-update", n, { signal: u }), s.addEventListener("clip-path-update", r, { signal: u }), s.addEventListener("filter-update", a, { signal: u }), s.addEventListener("compare-update", o, { signal: u }), () => c.abort();
1857
+ }, [
1858
+ e,
1859
+ t,
1860
+ i?.name,
1861
+ s
1862
+ ]), {
1863
+ previewRef: l,
1864
+ imageRef: d,
1865
+ previewUrl: r,
1866
+ ...g
1867
+ };
1868
+ }, X = {
1869
+ preview: "_preview_t77n1_1",
1870
+ faded: "_faded_t77n1_13",
1871
+ rotate: "_rotate_t77n1_19",
1872
+ flip: "_flip_t77n1_31",
1873
+ image: "_image_t77n1_39",
1874
+ label: "_label_t77n1_49",
1875
+ before: "_before_t77n1_67",
1876
+ after: "_after_t77n1_71"
1877
+ }, vt = ({ isClipped: e, isFilter: t, faded: n, style: r = {} }) => {
1878
+ let { showCompare: i } = P(), { previewRef: a, imageRef: o, previewUrl: s, box: c, boxWidth: l, boxHeight: u, viewWidth: d, viewHeight: f, rotation: p, flipH: m, flipV: h, filters: g } = _t({
1879
+ isClipped: e,
1880
+ isFilter: t
1881
+ });
1882
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
1883
+ ref: a,
1884
+ className: `${X.preview} ${n ? X.faded : ""}`,
1885
+ style: {
1886
+ aspectRatio: `${d} / ${f}`,
1887
+ ...r
1888
+ },
1889
+ children: [
1890
+ i && !t && /* @__PURE__ */ (0, x.jsx)("div", {
1891
+ className: `${X.label} ${X.before}`,
1892
+ children: "Before"
1893
+ }),
1894
+ i && t && /* @__PURE__ */ (0, x.jsx)("div", {
1895
+ className: `${X.label} ${X.after}`,
1896
+ children: "After"
1897
+ }),
1898
+ /* @__PURE__ */ (0, x.jsx)("div", {
1899
+ className: X.rotate,
1900
+ style: {
1901
+ width: `${l / d * 100}%`,
1902
+ height: `${u / f * 100}%`,
1903
+ transform: `translate(-50%, -50%) rotate(${p}deg)`
1904
+ },
1905
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
1906
+ className: X.flip,
1907
+ style: { transform: `scale(${m ? -1 : 1}, ${h ? -1 : 1})` },
1908
+ children: /* @__PURE__ */ (0, x.jsx)("img", {
1909
+ ref: o,
1910
+ className: X.image,
1911
+ src: s,
1912
+ alt: "Preview Image",
1913
+ style: {
1914
+ width: `${1 / c.w * 100}%`,
1915
+ height: `${1 / c.h * 100}%`,
1916
+ left: `${-(c.x / c.w) * 100}%`,
1917
+ top: `${-(c.y / c.h) * 100}%`,
1918
+ filter: g.join(" ")
1919
+ }
1920
+ })
1921
+ })
1922
+ })
1923
+ ]
1924
+ });
1925
+ }, yt = ({ compareRef: e }) => {
1926
+ let { eventBus: t } = P(), n = O(), r = u(null), i = u(null);
1927
+ return o(() => {
1928
+ i.current = 0, mt(t, 0);
1929
+ }, [t]), o(() => {
1930
+ let n = (n) => {
1931
+ if (!e.current || !r.current) return;
1932
+ n.preventDefault();
1933
+ let a = e.current.parentElement;
1934
+ if (!a) return;
1935
+ let o = "clientX" in n ? n.clientX : n.touches[0].clientX, { width: s, left: c } = a.getBoundingClientRect(), l = Math.min(Math.max(o - c, 0), s) / s * 100;
1936
+ i.current = l, e.current.style.left = `${l}%`, mt(t, l);
1937
+ }, a = () => {
1938
+ e.current && (r.current = null, document.body.style.cursor = "auto");
1939
+ }, o = new AbortController(), { signal: s } = o;
1940
+ return document.addEventListener("mousemove", n, { signal: s }), document.addEventListener("touchmove", n, {
1941
+ signal: s,
1942
+ passive: !1
1943
+ }), document.addEventListener("mouseup", a, { signal: s }), document.addEventListener("touchend", a, { signal: s }), () => o.abort();
1944
+ }, [e, t]), { handleDragStart: (t) => {
1945
+ if (!e.current) return;
1946
+ t.stopPropagation(), t.preventDefault(), r.current = i.current;
1947
+ let a = "clientX" in t ? t.clientX : t.touches[0].clientX;
1948
+ r.current = a, n || (document.body.style.cursor = "pointer");
1949
+ } };
1950
+ }, bt = () => {
1951
+ let { showCompare: e, getLastHistoryItem: t } = P(), { width: n, height: r } = t(), i = u(null), { handleDragStart: a } = yt({ compareRef: i });
1952
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
1953
+ className: Y.filterInteract,
1954
+ style: { aspectRatio: `${n} / ${r}` },
1955
+ children: [/* @__PURE__ */ (0, x.jsx)(vt, { isFilter: !0 }), e && /* @__PURE__ */ (0, x.jsx)(x.Fragment, { children: /* @__PURE__ */ (0, x.jsx)("div", {
1956
+ ref: i,
1957
+ className: Y.compare,
1958
+ style: { left: "50%" },
1959
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
1960
+ className: Y.compareThumb,
1961
+ onMouseDown: a,
1962
+ onTouchStart: a,
1963
+ children: /* @__PURE__ */ (0, x.jsx)(ye, {})
1964
+ })
1965
+ }) })]
1966
+ });
1967
+ }, xt = () => ({
1968
+ saturate: 100,
1969
+ grayscale: 0,
1970
+ sepia: 0,
1971
+ invert: 0,
1972
+ hueRotate: 0,
1973
+ brightness: 100,
1974
+ contrast: 100
1975
+ }), St = {
1976
+ [h.RESIZE]: {
1977
+ icon: /* @__PURE__ */ (0, x.jsx)(le, {}),
1377
1978
  label: "Resize"
1378
1979
  },
1379
- [m.CROP]: {
1380
- icon: /* @__PURE__ */ (0, b.jsx)(M, {}),
1980
+ [h.CROP]: {
1981
+ icon: /* @__PURE__ */ (0, x.jsx)(N, {}),
1381
1982
  label: "Crop"
1382
1983
  },
1383
- [m.PRESET_CROP]: {
1384
- icon: /* @__PURE__ */ (0, b.jsx)(me, {}),
1984
+ [h.PRESET_CROP]: {
1985
+ icon: /* @__PURE__ */ (0, x.jsx)(me, {}),
1385
1986
  label: "Presets"
1386
1987
  },
1387
- [m.FLIP]: {
1388
- icon: /* @__PURE__ */ (0, b.jsx)(ue, {}),
1988
+ [h.FLIP]: {
1989
+ icon: /* @__PURE__ */ (0, x.jsx)(ue, {}),
1389
1990
  label: "Flip"
1390
1991
  },
1391
- [m.ROTATE]: {
1392
- icon: /* @__PURE__ */ (0, b.jsx)(fe, {}),
1992
+ [h.ROTATE]: {
1993
+ icon: /* @__PURE__ */ (0, x.jsx)(fe, {}),
1393
1994
  label: "Rotate"
1995
+ },
1996
+ [h.FILTERS]: {
1997
+ icon: /* @__PURE__ */ (0, x.jsx)(he, {}),
1998
+ label: "Filters"
1394
1999
  }
1395
- }, tt = (e) => et[e] ?? null, nt = () => {
1396
- let { settings: e, currentAction: t, getLastRotation: n, getLastHistoryItem: r, setCurrentAction: i, setSidebar: a } = N(), o = e?.tools || [], s = t?.name, { width: c, height: l } = r();
2000
+ }, Ct = (e) => St[e] ?? null, wt = () => {
2001
+ let { settings: e, currentAction: t, showCompare: n, toggleCompare: r, getLastRotation: i, getLastHistoryItem: a, setCurrentAction: o, setSidebar: s } = P(), c = e?.tools || [], l = t?.name, { width: u, height: d } = a();
1397
2002
  return { click: (e) => {
1398
- if (o.includes(e) && s === e) {
1399
- i(null);
2003
+ if (c.includes(e) && l === e) {
2004
+ o(null);
1400
2005
  return;
1401
2006
  }
1402
2007
  switch (e) {
1403
- case m.RESIZE:
1404
- i({
1405
- name: m.RESIZE,
2008
+ case h.RESIZE:
2009
+ o({
2010
+ name: h.RESIZE,
1406
2011
  args: {
1407
- width: c,
1408
- height: l
2012
+ width: u,
2013
+ height: d
1409
2014
  }
1410
2015
  });
1411
2016
  break;
1412
- case m.CROP:
1413
- i({
1414
- name: m.CROP,
2017
+ case h.CROP:
2018
+ o({
2019
+ name: h.CROP,
1415
2020
  args: {
1416
2021
  id: "freeform",
1417
- ratio: c / l,
2022
+ ratio: u / d,
1418
2023
  isFree: !0
1419
2024
  }
1420
2025
  });
1421
2026
  break;
1422
- case m.PRESET_CROP:
1423
- i({
1424
- name: m.PRESET_CROP,
2027
+ case h.PRESET_CROP:
2028
+ o({
2029
+ name: h.PRESET_CROP,
1425
2030
  args: {
1426
2031
  id: "facebook-post",
1427
2032
  ratio: 1200 / 630,
@@ -1433,44 +2038,50 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1433
2038
  }
1434
2039
  });
1435
2040
  break;
1436
- case m.FLIP:
1437
- i({
1438
- name: m.FLIP,
2041
+ case h.FLIP:
2042
+ o({
2043
+ name: h.FLIP,
1439
2044
  args: {
1440
2045
  horizontal: !1,
1441
2046
  vertical: !1
1442
2047
  }
1443
2048
  });
1444
2049
  break;
1445
- case m.ROTATE:
1446
- i({
1447
- name: m.ROTATE,
1448
- args: { degrees: n() }
2050
+ case h.ROTATE:
2051
+ o({
2052
+ name: h.ROTATE,
2053
+ args: { degrees: i() }
2054
+ });
2055
+ break;
2056
+ case h.FILTERS:
2057
+ o({
2058
+ name: h.FILTERS,
2059
+ args: xt()
1449
2060
  });
1450
2061
  break;
1451
2062
  }
1452
- a(!1);
2063
+ n && r(), s(!1);
1453
2064
  } };
1454
- }, J = {
1455
- sidebar: "_sidebar_1j9gh_1",
1456
- mobile: "_mobile_1j9gh_9",
1457
- open: "_open_1j9gh_14",
1458
- wrapper: "_wrapper_1j9gh_19",
1459
- item: "_item_1j9gh_23",
1460
- selected: "_selected_1j9gh_41"
1461
- }, rt = ({ isMobile: e }) => {
1462
- let { settings: t, sidebar: n, currentAction: r } = N(), i = t?.tools || [], a = r?.name, { click: o } = nt();
1463
- return /* @__PURE__ */ (0, b.jsx)("nav", {
1464
- className: `${J.sidebar} ${e ? J.mobile : ""} ${e && n ? J.open : ""}`,
1465
- children: /* @__PURE__ */ (0, b.jsx)(B, {
2065
+ }, Z = {
2066
+ sidebar: "_sidebar_1lx29_1",
2067
+ mobile: "_mobile_1lx29_10",
2068
+ open: "_open_1lx29_15",
2069
+ wrapper: "_wrapper_1lx29_20",
2070
+ item: "_item_1lx29_24",
2071
+ selected: "_selected_1lx29_43"
2072
+ }, Tt = ({ isMobile: e }) => {
2073
+ let { settings: t, sidebar: n, currentAction: r } = P(), i = t?.tools || [], a = r?.name, { click: o } = wt();
2074
+ return /* @__PURE__ */ (0, x.jsx)("nav", {
2075
+ className: `${Z.sidebar} ${e ? Z.mobile : ""} ${e && n ? Z.open : ""}`,
2076
+ children: /* @__PURE__ */ (0, x.jsx)(H, {
1466
2077
  position: "right",
1467
- className: J.tooltip,
2078
+ className: Z.tooltip,
1468
2079
  children: i.map((e) => {
1469
- let t = tt(e);
2080
+ let t = Ct(e);
1470
2081
  if (!t) return null;
1471
2082
  let { icon: n, label: r } = t;
1472
- return /* @__PURE__ */ (0, b.jsx)("div", {
1473
- className: `${J.item} ${a === e ? J.selected : ""}`,
2083
+ return /* @__PURE__ */ (0, x.jsx)("div", {
2084
+ className: `${Z.item} ${a === e ? Z.selected : ""}`,
1474
2085
  onClick: () => o(e),
1475
2086
  "data-tooltip": r,
1476
2087
  "aria-label": r,
@@ -1479,15 +2090,15 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1479
2090
  })
1480
2091
  })
1481
2092
  });
1482
- }, it = { infobar: "_infobar_ofe91_1" }, at = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : `${(e / 1024 / 1024).toFixed(2)} MB`, ot = () => {
1483
- let { originalBlob: e, getLastHistoryItem: t } = N(), { width: n, height: r } = t();
1484
- return /* @__PURE__ */ (0, b.jsxs)("div", {
1485
- className: it.infobar,
1486
- children: [/* @__PURE__ */ (0, b.jsx)("div", {
1487
- className: it.filesize,
1488
- children: e ? at(e.size) : "0 B"
1489
- }), /* @__PURE__ */ (0, b.jsxs)("div", {
1490
- className: it.sizes,
2093
+ }, Et = { infobar: "_infobar_895qe_1" }, Dt = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : `${(e / 1024 / 1024).toFixed(2)} MB`, Ot = () => {
2094
+ let { originalBlob: e, getLastHistoryItem: t } = P(), { width: n, height: r } = t();
2095
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
2096
+ className: Et.infobar,
2097
+ children: [/* @__PURE__ */ (0, x.jsx)("div", {
2098
+ className: Et.filesize,
2099
+ children: e ? Dt(e.size) : "0 B"
2100
+ }), /* @__PURE__ */ (0, x.jsxs)("div", {
2101
+ className: Et.sizes,
1491
2102
  children: [
1492
2103
  n,
1493
2104
  " / ",
@@ -1495,26 +2106,17 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1495
2106
  ]
1496
2107
  })]
1497
2108
  });
1498
- }, st = (e, t) => {
1499
- let n = new CustomEvent("crop-update", { detail: t });
1500
- e.dispatchEvent(n);
1501
- }, ct = (e, t) => {
1502
- let n = new CustomEvent("clip-path-update", { detail: t });
1503
- e.dispatchEvent(n);
1504
- }, lt = (e, t) => {
1505
- let n = new CustomEvent("resize-update", { detail: t });
1506
- e.dispatchEvent(n);
1507
- }, ut = 15, dt = 200, ft = 2, pt = (e, t, n) => {
1508
- let r = Math.min(dt, Math.max(ut, e));
2109
+ }, kt = 15, At = 200, jt = 2, Mt = (e, t, n) => {
2110
+ let r = Math.min(At, Math.max(kt, e));
1509
2111
  return {
1510
2112
  scale: r,
1511
2113
  width: Math.round(r / 100 * t),
1512
2114
  height: Math.round(r / 100 * n)
1513
2115
  };
1514
- }, mt = () => {
1515
- let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r, eventBus: a } = N(), { width: s, height: c } = e(), [d, f] = u(s), [p, h] = u(c), [g, _] = u(100), v = l(g), y = l(0), b = l(null), x = i((e) => {
1516
- let t = pt(e, s, c);
1517
- f(t.width), h(t.height), _(t.scale), v.current = t.scale, lt(a, t.scale);
2116
+ }, Nt = () => {
2117
+ let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r, eventBus: a } = P(), { width: s, height: c } = e(), [l, f] = d(s), [p, m] = d(c), [g, _] = d(100), v = u(g), y = u(0), b = u(null), x = i((e) => {
2118
+ let t = Mt(e, s, c);
2119
+ f(t.width), m(t.height), _(t.scale), v.current = t.scale, ft(a, t.scale);
1518
2120
  }, [
1519
2121
  c,
1520
2122
  s,
@@ -1532,24 +2134,24 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1532
2134
  let t = b.current?.parentElement;
1533
2135
  return e.target instanceof Node && !!t?.contains(e.target);
1534
2136
  }, t = (t) => {
1535
- e(t) && x(v.current - Math.sign(t.deltaY) * ft);
2137
+ e(t) && x(v.current - Math.sign(t.deltaY) * jt);
1536
2138
  }, n = (t) => {
1537
2139
  e(t) && (y.current = t.touches[0].clientY);
1538
2140
  }, r = (t) => {
1539
2141
  if (!e(t)) return;
1540
2142
  let n = t.touches[0].clientY, r = y.current - n;
1541
- Math.abs(r) < 10 || (x(v.current + Math.sign(r) * ft), y.current = n);
2143
+ Math.abs(r) < 10 || (x(v.current + Math.sign(r) * jt), y.current = n);
1542
2144
  }, i = new AbortController(), { signal: a } = i;
1543
2145
  return window.addEventListener("wheel", t, { signal: a }), window.addEventListener("touchstart", n, { signal: a }), window.addEventListener("touchmove", r, { signal: a }), () => i.abort();
1544
2146
  }, [x]), {
1545
2147
  resizeRef: b,
1546
- width: d,
2148
+ width: l,
1547
2149
  height: p,
1548
2150
  scale: g,
1549
2151
  currentWidth: s,
1550
2152
  currentHeight: c,
1551
2153
  setWidth: f,
1552
- setHeight: h,
2154
+ setHeight: m,
1553
2155
  handleWidthBlur: (e) => {
1554
2156
  S(e.target.value, s);
1555
2157
  },
@@ -1558,40 +2160,40 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1558
2160
  },
1559
2161
  save: () => {
1560
2162
  n({
1561
- width: d,
2163
+ width: l,
1562
2164
  height: p,
1563
2165
  action: {
1564
- name: m.RESIZE,
2166
+ name: h.RESIZE,
1565
2167
  args: {
1566
- width: d,
2168
+ width: l,
1567
2169
  height: p
1568
2170
  }
1569
2171
  }
1570
- }), lt(a, 100), r(!0);
2172
+ }), ft(a, 100), r(!0);
1571
2173
  },
1572
2174
  close: () => {
1573
- lt(a, 100), t(null), r(!0);
2175
+ ft(a, 100), t(null), r(!0);
1574
2176
  }
1575
2177
  };
1576
- }, Y = {
2178
+ }, Q = {
1577
2179
  resize: "_resize_1sbig_1",
1578
2180
  toolsLock: "_toolsLock_1sbig_5",
1579
2181
  indicatorWrapper: "_indicatorWrapper_1sbig_10",
1580
2182
  indicator: "_indicator_1sbig_10"
1581
- }, ht = () => {
1582
- let { resizeRef: e, width: t, height: n, scale: r, currentWidth: i, currentHeight: a, setWidth: o, setHeight: s, handleWidthBlur: c, handleHeightBlur: l, save: u, close: d } = mt();
1583
- return /* @__PURE__ */ (0, b.jsxs)(V, {
2183
+ }, Pt = () => {
2184
+ let { resizeRef: e, width: t, height: n, scale: r, currentWidth: i, currentHeight: a, setWidth: o, setHeight: s, handleWidthBlur: c, handleHeightBlur: l, save: u, close: d } = Nt();
2185
+ return /* @__PURE__ */ (0, x.jsxs)(U, {
1584
2186
  ref: e,
1585
- className: Y.resize,
2187
+ className: Q.resize,
1586
2188
  children: [
1587
- /* @__PURE__ */ (0, b.jsx)("div", {
1588
- className: Y.indicatorWrapper,
1589
- children: /* @__PURE__ */ (0, b.jsx)("div", {
1590
- className: Y.indicator,
2189
+ /* @__PURE__ */ (0, x.jsx)("div", {
2190
+ className: Q.indicatorWrapper,
2191
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
2192
+ className: Q.indicator,
1591
2193
  style: { width: `${r / 2}%` }
1592
2194
  })
1593
2195
  }),
1594
- /* @__PURE__ */ (0, b.jsx)(Te, {
2196
+ /* @__PURE__ */ (0, x.jsx)(ke, {
1595
2197
  value: t,
1596
2198
  name: "width",
1597
2199
  label: "Width",
@@ -1599,8 +2201,8 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1599
2201
  onChange: (e) => o(Number(e.target.value)),
1600
2202
  onBlur: c
1601
2203
  }),
1602
- /* @__PURE__ */ (0, b.jsx)(te, { className: Y.toolsLock }),
1603
- /* @__PURE__ */ (0, b.jsx)(Te, {
2204
+ /* @__PURE__ */ (0, x.jsx)(M, { className: Q.toolsLock }),
2205
+ /* @__PURE__ */ (0, x.jsx)(ke, {
1604
2206
  value: n,
1605
2207
  name: "height",
1606
2208
  label: "Height",
@@ -1608,106 +2210,14 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1608
2210
  onChange: (e) => s(Number(e.target.value)),
1609
2211
  onBlur: l
1610
2212
  }),
1611
- /* @__PURE__ */ (0, b.jsx)(R, {
2213
+ /* @__PURE__ */ (0, x.jsx)(z, {
1612
2214
  onSave: u,
1613
2215
  onClose: d,
1614
2216
  disabled: t === i && n === a
1615
2217
  })
1616
2218
  ]
1617
2219
  });
1618
- }, gt = ({ isClipped: e }) => {
1619
- let { history: t, previewUrl: n, currentAction: r, getLastRotation: i, eventBus: a } = N(), c = l(null), u = l(r?.name), d = l(n);
1620
- s(() => {
1621
- let e = u.current, t = r?.name, i = d.current !== n;
1622
- if (u.current = t, d.current = n, !(e && t && e !== t) && !i) return;
1623
- let a = c.current;
1624
- if (!a) return;
1625
- let o = [a, ...a.querySelectorAll("*")];
1626
- o.forEach((e) => {
1627
- e.style.transition = "none";
1628
- }), a.getBoundingClientRect();
1629
- let s = () => {
1630
- o.forEach((e) => {
1631
- e.style.removeProperty("transition");
1632
- });
1633
- }, l = requestAnimationFrame(s);
1634
- return () => {
1635
- cancelAnimationFrame(l), s();
1636
- };
1637
- }, [r?.name, n]);
1638
- let f = t.items.slice(0, t.pointer + 1);
1639
- if (r) {
1640
- let { width: e, height: n } = t.items.at(t.pointer);
1641
- f.push({
1642
- ...r.name === m.ROTATE ? ze(e, n, i(), r.args.degrees) : {
1643
- width: e,
1644
- height: n
1645
- },
1646
- action: r
1647
- });
1648
- }
1649
- let p = Xe(f);
1650
- return o(() => {
1651
- e && c.current && (c.current.style.transition = "none"), r?.name !== m.RESIZE && c.current && (c.current.style.transform = "scale(1)");
1652
- let t = (e) => {
1653
- let t = e.detail;
1654
- c.current && (c.current.style.transform = `scale(${t / 100})`);
1655
- }, n = (t) => {
1656
- if (!e) return;
1657
- let { x: n, y: r, w: i, h: a } = t.detail;
1658
- c.current && (c.current.style.clipPath = `xywh(${n}% ${r}% ${i}% ${a}%)`);
1659
- };
1660
- return a.addEventListener("resize-update", t), a.addEventListener("clip-path-update", n), () => {
1661
- a.removeEventListener("resize-update", t), a.removeEventListener("clip-path-update", n);
1662
- };
1663
- }, [
1664
- e,
1665
- r?.name,
1666
- a
1667
- ]), {
1668
- previewRef: c,
1669
- previewUrl: n,
1670
- ...p
1671
- };
1672
- }, X = {
1673
- preview: "_preview_dvanl_1",
1674
- rotate: "_rotate_dvanl_12",
1675
- flip: "_flip_dvanl_24",
1676
- image: "_image_dvanl_32"
1677
- }, _t = ({ isClipped: e, style: t = {} }) => {
1678
- let { previewRef: n, previewUrl: r, box: i, boxWidth: a, boxHeight: o, viewWidth: s, viewHeight: c, rotation: l, flipH: u, flipV: d } = gt({ isClipped: e });
1679
- return /* @__PURE__ */ (0, b.jsx)("div", {
1680
- ref: n,
1681
- className: X.preview,
1682
- style: {
1683
- aspectRatio: `${s} / ${c}`,
1684
- ...t
1685
- },
1686
- children: /* @__PURE__ */ (0, b.jsx)("div", {
1687
- className: X.rotate,
1688
- style: {
1689
- width: `${a / s * 100}%`,
1690
- height: `${o / c * 100}%`,
1691
- transform: `translate(-50%, -50%) rotate(${l}deg)`
1692
- },
1693
- children: /* @__PURE__ */ (0, b.jsx)("div", {
1694
- className: X.flip,
1695
- style: { transform: `scale(${u ? -1 : 1}, ${d ? -1 : 1})` },
1696
- children: /* @__PURE__ */ (0, b.jsx)("img", {
1697
- className: X.image,
1698
- src: r,
1699
- alt: "Preview Image",
1700
- style: {
1701
- width: `${1 / i.w * 100}%`,
1702
- height: `${1 / i.h * 100}%`,
1703
- left: `${-(i.x / i.w) * 100}%`,
1704
- top: `${-(i.y / i.h) * 100}%`
1705
- }
1706
- })
1707
- })
1708
- })
1709
- });
1710
- }, Z = {
2220
+ }, $ = {
1711
2221
  wrapper: "_wrapper_1co2u_1",
1712
2222
  box: "_box_1co2u_9",
1713
2223
  toolsInfo: "_toolsInfo_1co2u_18",
@@ -1731,79 +2241,78 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1731
2241
  infoH: "_infoH_1co2u_146",
1732
2242
  group: "_group_1co2u_153",
1733
2243
  active: "_active_1co2u_162"
1734
- }, vt = () => {
1735
- let { getLastHistoryItem: e } = N(), t = D(), n = l(null), { handleCropStart: r, initialCrop: i } = At({ boxRef: n }), { width: a, height: o } = e(), { x: s, y: c, w: u, h: d } = i;
1736
- return /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [/* @__PURE__ */ (0, b.jsx)(_t, {
2244
+ }, Ft = () => {
2245
+ let { getLastHistoryItem: e } = P(), t = O(), n = u(null), { handleCropStart: r, initialCrop: i } = qt({ boxRef: n }), { width: a, height: o } = e(), { x: s, y: c, w: l, h: d } = i;
2246
+ return /* @__PURE__ */ (0, x.jsxs)(x.Fragment, { children: [/* @__PURE__ */ (0, x.jsx)(vt, {
1737
2247
  isClipped: !0,
1738
- style: { clipPath: `xywh(${s}% ${c}% ${u}% ${d}%)` }
1739
- }), /* @__PURE__ */ (0, b.jsx)("div", {
1740
- className: Z.wrapper,
2248
+ style: { clipPath: `xywh(${s}% ${c}% ${l}% ${d}%)` }
2249
+ }), /* @__PURE__ */ (0, x.jsx)("div", {
2250
+ className: $.wrapper,
1741
2251
  style: { aspectRatio: `${a} / ${o}` },
1742
- children: /* @__PURE__ */ (0, b.jsxs)("div", {
2252
+ children: /* @__PURE__ */ (0, x.jsxs)("div", {
1743
2253
  ref: n,
1744
- className: Z.box,
2254
+ className: $.box,
1745
2255
  style: {
1746
- width: `${u}%`,
2256
+ width: `${l}%`,
1747
2257
  height: `${d}%`,
1748
2258
  top: `${c}%`,
1749
2259
  left: `${s}%`
1750
2260
  },
1751
- children: [/* @__PURE__ */ (0, b.jsx)(Ct, {}), t ? /* @__PURE__ */ (0, b.jsx)(jt, { onMouseDown: r }) : /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [/* @__PURE__ */ (0, b.jsx)(wt, { onMouseDown: r }), /* @__PURE__ */ (0, b.jsx)(Mt, {})] })]
2261
+ children: [/* @__PURE__ */ (0, x.jsx)(Bt, {}), t ? /* @__PURE__ */ (0, x.jsx)(Jt, { onMouseDown: r }) : /* @__PURE__ */ (0, x.jsxs)(x.Fragment, { children: [/* @__PURE__ */ (0, x.jsx)(Vt, { onMouseDown: r }), /* @__PURE__ */ (0, x.jsx)(Yt, {})] })]
1752
2262
  })
1753
2263
  })] });
1754
- }, yt = [
2264
+ }, It = [
1755
2265
  {
1756
2266
  id: "freeform",
1757
- icon: /* @__PURE__ */ (0, b.jsx)(M, {}),
2267
+ icon: /* @__PURE__ */ (0, x.jsx)(N, {}),
1758
2268
  label: "Freeform"
1759
2269
  },
1760
2270
  {
1761
2271
  id: "origin",
1762
- icon: /* @__PURE__ */ (0, b.jsx)(ae, {}),
2272
+ icon: /* @__PURE__ */ (0, x.jsx)(ae, {}),
1763
2273
  label: "Original"
1764
2274
  },
1765
2275
  {
1766
2276
  id: "1:1",
1767
- icon: /* @__PURE__ */ (0, b.jsx)(oe, {}),
2277
+ icon: /* @__PURE__ */ (0, x.jsx)(oe, {}),
1768
2278
  label: "1 : 1"
1769
2279
  },
1770
2280
  {
1771
2281
  id: "4:3",
1772
- icon: /* @__PURE__ */ (0, b.jsx)(ce, {}),
2282
+ icon: /* @__PURE__ */ (0, x.jsx)(ce, {}),
1773
2283
  label: "4 : 3"
1774
2284
  },
1775
2285
  {
1776
2286
  id: "16:9",
1777
- icon: /* @__PURE__ */ (0, b.jsx)(se, {}),
2287
+ icon: /* @__PURE__ */ (0, x.jsx)(se, {}),
1778
2288
  label: "16 : 9"
1779
2289
  }
1780
- ], bt = ({ value: e, onChange: t }) => /* @__PURE__ */ (0, b.jsx)("div", {
1781
- className: Z.group,
1782
- children: /* @__PURE__ */ (0, b.jsx)(B, {
2290
+ ], Lt = ({ value: e, onChange: t }) => /* @__PURE__ */ (0, x.jsx)("div", {
2291
+ className: $.group,
2292
+ children: /* @__PURE__ */ (0, x.jsx)(H, {
1783
2293
  position: "top",
1784
- className: Z.tooltip,
1785
- children: yt.map((n) => /* @__PURE__ */ (0, b.jsx)(F, {
2294
+ children: It.map((n) => /* @__PURE__ */ (0, x.jsx)(I, {
1786
2295
  variant: "outline",
1787
- className: `${Z.groupBtn} ${e === n.id ? Z.active : ""}`,
2296
+ className: `${$.groupBtn} ${e === n.id ? $.active : ""}`,
1788
2297
  onClick: () => t(n.id),
1789
2298
  "aria-label": n.label,
1790
2299
  "data-tooltip": n.label,
1791
2300
  children: n.icon
1792
2301
  }, n.id))
1793
2302
  })
1794
- }), xt = () => {
1795
- let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: i, eventBus: a } = N(), { width: s, height: c } = n(), { name: u, args: d } = t || {}, f = u === m.CROP ? d?.id : "", p = s / c, h = l({
2303
+ }), Rt = () => {
2304
+ let { setCurrentAction: e, currentAction: t, getLastHistoryItem: n, addToHistory: r, setSidebar: i, eventBus: a } = P(), { width: s, height: c } = n(), { name: l, args: d } = t || {}, f = l === h.CROP ? d?.id : "", p = s / c, m = u({
1796
2305
  x: 0,
1797
2306
  y: 0,
1798
2307
  w: 0,
1799
2308
  h: 0
1800
2309
  });
1801
2310
  return o(() => {
1802
- if (t?.name !== m.CROP) return;
1803
- let e = U(t.args.ratio, s, c);
1804
- h.current = e;
2311
+ if (t?.name !== h.CROP) return;
2312
+ let e = G(t.args.ratio, s, c);
2313
+ m.current = e;
1805
2314
  let n = (e) => {
1806
- h.current = e.detail;
2315
+ m.current = e.detail;
1807
2316
  };
1808
2317
  return a.addEventListener("clip-path-update", n), () => {
1809
2318
  a.removeEventListener("clip-path-update", n);
@@ -1816,26 +2325,26 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1816
2325
  ]), {
1817
2326
  currentValue: f,
1818
2327
  handleChange: (t) => {
1819
- t !== f && (e({
1820
- name: m.CROP,
2328
+ t !== f && e({
2329
+ name: h.CROP,
1821
2330
  args: {
1822
2331
  id: t,
1823
2332
  ratio: /^\d+:\d+$/.test(t) ? t.split(":").map(Number).reduce((e, t) => e / t) : p,
1824
2333
  isFree: t === "freeform"
1825
2334
  }
1826
- }), i(!0));
2335
+ });
1827
2336
  },
1828
2337
  handleSave: () => {
1829
- if (!t || t.name !== m.CROP) return;
1830
- let e = t.args?.preset?.width || Math.round(s * h.current.w / 100), n = t.args?.preset?.height || Math.round(c * h.current.h / 100);
2338
+ if (!t || t.name !== h.CROP) return;
2339
+ let e = t.args?.preset?.width || Math.round(s * m.current.w / 100), n = t.args?.preset?.height || Math.round(c * m.current.h / 100);
1831
2340
  r({
1832
2341
  width: e,
1833
2342
  height: n,
1834
2343
  action: {
1835
- name: m.CROP,
2344
+ name: h.CROP,
1836
2345
  args: {
1837
2346
  ...t.args,
1838
- ...h.current
2347
+ ...m.current
1839
2348
  }
1840
2349
  }
1841
2350
  }), i(!0);
@@ -1844,52 +2353,52 @@ var G = (e, t, n) => Math.max(t, Math.min(n, e)), We = (e, t) => [[e[0][0] * t[0
1844
2353
  e(null), i(!0);
1845
2354
  }
1846
2355
  };
1847
- }, St = () => {
1848
- let { currentValue: e, handleChange: t, handleSave: n, handleClose: r } = xt();
1849
- return /* @__PURE__ */ (0, b.jsxs)(V, { children: [/* @__PURE__ */ (0, b.jsx)(bt, {
2356
+ }, zt = () => {
2357
+ let { currentValue: e, handleChange: t, handleSave: n, handleClose: r } = Rt();
2358
+ return /* @__PURE__ */ (0, x.jsxs)(U, { children: [/* @__PURE__ */ (0, x.jsx)(Lt, {
1850
2359
  value: e,
1851
2360
  onChange: t
1852
- }), /* @__PURE__ */ (0, b.jsx)(R, {
2361
+ }), /* @__PURE__ */ (0, x.jsx)(z, {
1853
2362
  onSave: n,
1854
2363
  onClose: r
1855
2364
  })] });
1856
- }, Ct = () => /* @__PURE__ */ (0, b.jsxs)("div", {
1857
- className: Z.linesBox,
1858
- children: [/* @__PURE__ */ (0, b.jsx)("span", { className: `${Z.line} ${Z.lineV}` }), /* @__PURE__ */ (0, b.jsx)("span", { className: `${Z.line} ${Z.lineH}` })]
1859
- }), wt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [
1860
- /* @__PURE__ */ (0, b.jsx)("div", {
1861
- className: `${Z.pointer} ${Z.pointerTopLeft}`,
2365
+ }, Bt = () => /* @__PURE__ */ (0, x.jsxs)("div", {
2366
+ className: $.linesBox,
2367
+ children: [/* @__PURE__ */ (0, x.jsx)("span", { className: `${$.line} ${$.lineV}` }), /* @__PURE__ */ (0, x.jsx)("span", { className: `${$.line} ${$.lineH}` })]
2368
+ }), Vt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, x.jsxs)(x.Fragment, { children: [
2369
+ /* @__PURE__ */ (0, x.jsx)("div", {
2370
+ className: `${$.pointer} ${$.pointerTopLeft}`,
1862
2371
  onMouseDown: (t) => e(t, "tl", "nwse")
1863
2372
  }),
1864
- /* @__PURE__ */ (0, b.jsx)("div", {
1865
- className: `${Z.pointer} ${Z.pointerTopRight}`,
2373
+ /* @__PURE__ */ (0, x.jsx)("div", {
2374
+ className: `${$.pointer} ${$.pointerTopRight}`,
1866
2375
  onMouseDown: (t) => e(t, "tr", "nesw")
1867
2376
  }),
1868
- /* @__PURE__ */ (0, b.jsx)("div", {
1869
- className: `${Z.pointer} ${Z.pointerBottomRight}`,
2377
+ /* @__PURE__ */ (0, x.jsx)("div", {
2378
+ className: `${$.pointer} ${$.pointerBottomRight}`,
1870
2379
  onMouseDown: (t) => e(t, "br", "nwse")
1871
2380
  }),
1872
- /* @__PURE__ */ (0, b.jsx)("div", {
1873
- className: `${Z.pointer} ${Z.pointerBottomLeft}`,
2381
+ /* @__PURE__ */ (0, x.jsx)("div", {
2382
+ className: `${$.pointer} ${$.pointerBottomLeft}`,
1874
2383
  onMouseDown: (t) => e(t, "bl", "nesw")
1875
2384
  })
1876
2385
  ] });
1877
2386
  //#endregion
1878
2387
  //#region src/shared/components/Pixedi/crop/useCropInteraction.ts
1879
- function Tt(e, t, n) {
2388
+ function Ht(e, t, n) {
1880
2389
  return Math.min(Math.max(e, t), n);
1881
2390
  }
1882
- function Et(e, { x: t, y: n, w: r, h: i }) {
2391
+ function Ut(e, { x: t, y: n, w: r, h: i }) {
1883
2392
  e.style.left = `${t}%`, e.style.top = `${n}%`, e.style.width = `${r}%`, e.style.height = `${i}%`;
1884
2393
  }
1885
- function Dt(e) {
2394
+ function Wt(e) {
1886
2395
  let { width: t, height: n } = e.getBoundingClientRect();
1887
2396
  return {
1888
2397
  frameW: t,
1889
2398
  frameH: n
1890
2399
  };
1891
2400
  }
1892
- function Ot({ x: e, y: t, w: n, h: r }, i, a) {
2401
+ function Gt({ x: e, y: t, w: n, h: r }, i, a) {
1893
2402
  return {
1894
2403
  x: e / 100 * i,
1895
2404
  y: t / 100 * a,
@@ -1897,7 +2406,7 @@ function Ot({ x: e, y: t, w: n, h: r }, i, a) {
1897
2406
  h: r / 100 * a
1898
2407
  };
1899
2408
  }
1900
- function kt({ x: e, y: t, w: n, h: r }, i, a) {
2409
+ function Kt({ x: e, y: t, w: n, h: r }, i, a) {
1901
2410
  return {
1902
2411
  x: e / i * 100,
1903
2412
  y: t / a * 100,
@@ -1905,55 +2414,55 @@ function kt({ x: e, y: t, w: n, h: r }, i, a) {
1905
2414
  h: r / a * 100
1906
2415
  };
1907
2416
  }
1908
- var At = ({ boxRef: e }) => {
1909
- let { currentAction: t, getLastHistoryItem: n, eventBus: r } = N(), i = D(), { width: a, height: s } = n(), u = t?.name === m.CROP || t?.name === m.PRESET_CROP, d = u ? t.args.ratio : 1, f = !u || t.args.isFree, p = c(() => U(d, a, s), [
2417
+ var qt = ({ boxRef: e }) => {
2418
+ let { currentAction: t, getLastHistoryItem: n, eventBus: r } = P(), i = O(), { width: a, height: s } = n(), c = t?.name === h.CROP || t?.name === h.PRESET_CROP, d = c ? t.args.ratio : 1, f = !c || t.args.isFree, p = l(() => G(d, a, s), [
1910
2419
  d,
1911
2420
  a,
1912
2421
  s
1913
- ]), h = l(null), g = l(""), _ = l(p), v = l(p);
2422
+ ]), m = u(null), g = u(""), _ = u(p), v = u(p);
1914
2423
  return o(() => {
1915
- _.current = p, ct(r, p);
2424
+ _.current = p, dt(r, p);
1916
2425
  }, [p, r]), o(() => {
1917
2426
  let t = (e, t) => {
1918
- _.current = t, Et(e, t), st(r, {
2427
+ _.current = t, Ut(e, t), ut(r, {
1919
2428
  x: Math.round(t.x / 100 * a),
1920
2429
  y: Math.round(t.y / 100 * s),
1921
2430
  w: Math.round(t.w / 100 * a),
1922
2431
  h: Math.round(t.h / 100 * s)
1923
- }), ct(r, t);
2432
+ }), dt(r, t);
1924
2433
  }, n = (e) => {
1925
2434
  e.preventDefault(), v.current = _.current;
1926
2435
  let t = "clientX" in e ? e.clientX : e.touches[0].clientX, n = "clientY" in e ? e.clientY : e.touches[0].clientY;
1927
- h.current = {
2436
+ m.current = {
1928
2437
  x: t,
1929
2438
  y: n
1930
2439
  }, document.body.style.cursor = "move";
1931
2440
  }, i = (t) => {
1932
- if (!e.current || !h.current) return;
2441
+ if (!e.current || !m.current) return;
1933
2442
  t.preventDefault();
1934
2443
  let n = e.current, r = n.parentElement;
1935
2444
  if (!r) return;
1936
- let { frameW: i, frameH: a } = Dt(r);
2445
+ let { frameW: i, frameH: a } = Wt(r);
1937
2446
  if (g.current) {
1938
2447
  o(t, n, i, a);
1939
2448
  return;
1940
2449
  }
1941
2450
  c(t, n, i, a);
1942
2451
  }, o = (e, n, r, i) => {
1943
- if (!h.current) return;
1944
- let o = "clientX" in e ? e.clientX : e.touches[0].clientX, c = "clientY" in e ? e.clientY : e.touches[0].clientY, l = kt(Le(g.current, f, d, h.current.x, h.current.y, o, c, r, i, Ot(v.current, r, i), Ot(_.current, r, i)), r, i);
1945
- t(n, f ? l : Re(l, d, a, s));
2452
+ if (!m.current) return;
2453
+ let o = "clientX" in e ? e.clientX : e.touches[0].clientX, c = "clientY" in e ? e.clientY : e.touches[0].clientY, l = Kt(Ke(g.current, f, d, m.current.x, m.current.y, o, c, r, i, Gt(v.current, r, i), Gt(_.current, r, i)), r, i);
2454
+ t(n, f ? l : qe(l, d, a, s));
1946
2455
  }, c = (e, n, r, i) => {
1947
- if (!h.current) return;
1948
- let { x: a, y: o, w: s, h: c } = v.current, l = "clientX" in e ? e.clientX : e.touches[0].clientX, u = "clientY" in e ? e.clientY : e.touches[0].clientY, d = (l - h.current.x) / r * 100, f = (u - h.current.y) / i * 100;
2456
+ if (!m.current) return;
2457
+ let { x: a, y: o, w: s, h: c } = v.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;
1949
2458
  t(n, {
1950
- x: Tt(a + d, 0, Math.max(0, 100 - s)),
1951
- y: Tt(o + f, 0, Math.max(0, 100 - c)),
2459
+ x: Ht(a + d, 0, Math.max(0, 100 - s)),
2460
+ y: Ht(o + f, 0, Math.max(0, 100 - c)),
1952
2461
  w: s,
1953
2462
  h: c
1954
2463
  });
1955
2464
  }, l = () => {
1956
- e.current && (h.current = null, g.current = "", e.current.style.cursor = "move", document.body.style.cursor = "auto");
2465
+ e.current && (m.current = null, g.current = "", e.current.style.cursor = "move", document.body.style.cursor = "auto");
1957
2466
  };
1958
2467
  if (!e.current) return;
1959
2468
  let u = new AbortController(), { signal: p } = u;
@@ -1976,25 +2485,25 @@ var At = ({ boxRef: e }) => {
1976
2485
  if (!e.current) return;
1977
2486
  t.stopPropagation(), t.preventDefault(), v.current = _.current;
1978
2487
  let a = "clientX" in t ? t.clientX : t.touches[0].clientX, o = "clientY" in t ? t.clientY : t.touches[0].clientY;
1979
- h.current = {
2488
+ m.current = {
1980
2489
  x: a,
1981
2490
  y: o
1982
2491
  }, g.current = n, i || (e.current.style.cursor = `${r}-resize`, document.body.style.cursor = `${r}-resize`);
1983
2492
  },
1984
2493
  initialCrop: p
1985
2494
  };
1986
- }, jt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, b.jsx)("div", {
1987
- className: Z.mobileBorder,
1988
- children: /* @__PURE__ */ (0, b.jsx)("div", {
1989
- className: Z.mobilePointer,
2495
+ }, Jt = ({ onMouseDown: e }) => /* @__PURE__ */ (0, x.jsx)("div", {
2496
+ className: $.mobileBorder,
2497
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
2498
+ className: $.mobilePointer,
1990
2499
  onTouchStart: (t) => e(t, "br", "nwse")
1991
2500
  })
1992
- }), Mt = () => {
1993
- let e = l(null), t = l(null), n = l(null), r = l(null), { currentAction: i, getLastHistoryItem: a, eventBus: s } = N(), { width: c, height: u } = a();
2501
+ }), Yt = () => {
2502
+ let e = u(null), t = u(null), n = u(null), r = u(null), { currentAction: i, getLastHistoryItem: a, eventBus: s } = P(), { width: c, height: l } = a();
1994
2503
  return o(() => {
1995
- if (!(i?.name === m.CROP || i?.name === m.PRESET_CROP)) return;
1996
- let { xP: a, yP: o, wP: l, hP: d } = U(i.args.ratio, c, u);
1997
- e.current && (e.current.textContent = a.toString()), t.current && (t.current.textContent = o.toString()), n.current && (n.current.textContent = l.toString()), r.current && (r.current.textContent = d.toString());
2504
+ if (!(i?.name === h.CROP || i?.name === h.PRESET_CROP)) return;
2505
+ let { xP: a, yP: o, wP: u, hP: d } = G(i.args.ratio, c, l);
2506
+ e.current && (e.current.textContent = a.toString()), t.current && (t.current.textContent = o.toString()), n.current && (n.current.textContent = u.toString()), r.current && (r.current.textContent = d.toString());
1998
2507
  let f = (i) => {
1999
2508
  let { x: a, y: o, w: s, h: c } = i.detail;
2000
2509
  e.current && (e.current.textContent = a.toString()), t.current && (t.current.textContent = o.toString()), n.current && (n.current.textContent = s.toString()), r.current && (r.current.textContent = c.toString());
@@ -2004,37 +2513,37 @@ var At = ({ boxRef: e }) => {
2004
2513
  };
2005
2514
  }, [
2006
2515
  i,
2007
- u,
2516
+ l,
2008
2517
  c,
2009
2518
  s
2010
- ]), /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [
2011
- /* @__PURE__ */ (0, b.jsx)("div", {
2012
- className: `${Z.info} ${Z.infoX}`,
2013
- children: /* @__PURE__ */ (0, b.jsx)("b", { ref: e })
2519
+ ]), /* @__PURE__ */ (0, x.jsxs)(x.Fragment, { children: [
2520
+ /* @__PURE__ */ (0, x.jsx)("div", {
2521
+ className: `${$.info} ${$.infoX}`,
2522
+ children: /* @__PURE__ */ (0, x.jsx)("b", { ref: e })
2014
2523
  }),
2015
- /* @__PURE__ */ (0, b.jsx)("div", {
2016
- className: `${Z.info} ${Z.infoY}`,
2017
- children: /* @__PURE__ */ (0, b.jsx)("b", { ref: t })
2524
+ /* @__PURE__ */ (0, x.jsx)("div", {
2525
+ className: `${$.info} ${$.infoY}`,
2526
+ children: /* @__PURE__ */ (0, x.jsx)("b", { ref: t })
2018
2527
  }),
2019
- /* @__PURE__ */ (0, b.jsx)("div", {
2020
- className: `${Z.info} ${Z.infoW}`,
2021
- children: /* @__PURE__ */ (0, b.jsx)("b", { ref: n })
2528
+ /* @__PURE__ */ (0, x.jsx)("div", {
2529
+ className: `${$.info} ${$.infoW}`,
2530
+ children: /* @__PURE__ */ (0, x.jsx)("b", { ref: n })
2022
2531
  }),
2023
- /* @__PURE__ */ (0, b.jsx)("div", {
2024
- className: `${Z.info} ${Z.infoH}`,
2025
- children: /* @__PURE__ */ (0, b.jsx)("b", { ref: r })
2532
+ /* @__PURE__ */ (0, x.jsx)("div", {
2533
+ className: `${$.info} ${$.infoH}`,
2534
+ children: /* @__PURE__ */ (0, x.jsx)("b", { ref: r })
2026
2535
  })
2027
2536
  ] });
2028
- }, Nt = je.map((e) => e.options).flat(), Pt = () => Nt, Ft = () => {
2029
- let { currentAction: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i, eventBus: a } = N(), { width: s, height: c } = t(), u = e?.name === m.PRESET_CROP && Nt.some((t) => t.value === e.args.id) ? e.args.id : "", d = l({
2537
+ }, Xt = Re.map((e) => e.options).flat(), Zt = () => Xt, Qt = () => {
2538
+ let { currentAction: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i, eventBus: a } = P(), { width: s, height: c } = t(), l = e?.name === h.PRESET_CROP && Xt.some((t) => t.value === e.args.id) ? e.args.id : "", d = u({
2030
2539
  x: 0,
2031
2540
  y: 0,
2032
2541
  w: 0,
2033
2542
  h: 0
2034
2543
  });
2035
2544
  return o(() => {
2036
- if (e?.name !== m.PRESET_CROP) return;
2037
- let t = U(e.args.ratio, s, c);
2545
+ if (e?.name !== h.PRESET_CROP) return;
2546
+ let t = G(e.args.ratio, s, c);
2038
2547
  d.current = t;
2039
2548
  let n = (e) => {
2040
2549
  d.current = e.detail;
@@ -2048,11 +2557,11 @@ var At = ({ boxRef: e }) => {
2048
2557
  c,
2049
2558
  a
2050
2559
  ]), {
2051
- currentValue: u,
2052
- presetsData: je,
2560
+ currentValue: l,
2561
+ presetsData: Re,
2053
2562
  handleChange: (e) => {
2054
2563
  if (!e) return;
2055
- let t = Pt().find((t) => t.value === e);
2564
+ let t = Zt().find((t) => t.value === e);
2056
2565
  if (!t) return;
2057
2566
  let n = {
2058
2567
  id: e,
@@ -2064,16 +2573,16 @@ var At = ({ boxRef: e }) => {
2064
2573
  }
2065
2574
  };
2066
2575
  i({
2067
- name: m.PRESET_CROP,
2576
+ name: h.PRESET_CROP,
2068
2577
  args: n
2069
2578
  });
2070
2579
  },
2071
2580
  handleSave: () => {
2072
- !e || e.name !== m.PRESET_CROP || (n({
2581
+ !e || e.name !== h.PRESET_CROP || (n({
2073
2582
  width: e.args?.preset?.width || 0,
2074
2583
  height: e.args?.preset?.height || 0,
2075
2584
  action: {
2076
- name: m.CROP,
2585
+ name: h.CROP,
2077
2586
  args: {
2078
2587
  ...e.args,
2079
2588
  ...d.current
@@ -2085,22 +2594,22 @@ var At = ({ boxRef: e }) => {
2085
2594
  i(null), r(!0);
2086
2595
  }
2087
2596
  };
2088
- }, It = { select: "_select_1ip4k_1" }, Lt = () => {
2089
- let { currentValue: e, presetsData: t, handleChange: n, handleSave: r, handleClose: i } = Ft();
2090
- return /* @__PURE__ */ (0, b.jsxs)(V, { children: [/* @__PURE__ */ (0, b.jsx)(xe, {
2597
+ }, $t = { select: "_select_1ieak_1" }, en = () => {
2598
+ let { currentValue: e, presetsData: t, handleChange: n, handleSave: r, handleClose: i } = Qt();
2599
+ return /* @__PURE__ */ (0, x.jsxs)(U, { children: [/* @__PURE__ */ (0, x.jsx)(Te, {
2091
2600
  value: e,
2092
- placeholder: "Select a preset",
2601
+ placeholder: "Select preset",
2093
2602
  onChange: n,
2094
2603
  items: t,
2095
- className: It.select
2096
- }), /* @__PURE__ */ (0, b.jsx)(R, {
2604
+ className: $t.select
2605
+ }), /* @__PURE__ */ (0, x.jsx)(z, {
2097
2606
  onSave: r,
2098
2607
  onClose: i
2099
2608
  })] });
2100
- }, Rt = () => {
2101
- let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } = N(), { width: i, height: a } = e(), [o, s] = u(!1), [c, l] = u(!1), d = (e, n) => {
2609
+ }, tn = () => {
2610
+ let { getLastHistoryItem: e, setCurrentAction: t, addToHistory: n, setSidebar: r } = P(), { width: i, height: a } = e(), [o, s] = d(!1), [c, l] = d(!1), u = (e, n) => {
2102
2611
  t({
2103
- name: m.FLIP,
2612
+ name: h.FLIP,
2104
2613
  args: {
2105
2614
  horizontal: e,
2106
2615
  vertical: n
@@ -2112,18 +2621,18 @@ var At = ({ boxRef: e }) => {
2112
2621
  flipVertical: c,
2113
2622
  handleFlipHorizontal: () => {
2114
2623
  let e = !o;
2115
- s(e), d(e, c);
2624
+ s(e), u(e, c);
2116
2625
  },
2117
2626
  handleFlipVertical: () => {
2118
2627
  let e = !c;
2119
- l(e), d(o, e);
2628
+ l(e), u(o, e);
2120
2629
  },
2121
2630
  handleSave: () => {
2122
2631
  n({
2123
2632
  width: i,
2124
2633
  height: a,
2125
2634
  action: {
2126
- name: m.FLIP,
2635
+ name: h.FLIP,
2127
2636
  args: {
2128
2637
  horizontal: o,
2129
2638
  vertical: c
@@ -2135,52 +2644,51 @@ var At = ({ boxRef: e }) => {
2135
2644
  t(null), r(!0);
2136
2645
  }
2137
2646
  };
2138
- }, Q = {
2647
+ }, nn = {
2139
2648
  btnH: "_btnH_15adi_1",
2140
2649
  btnV: "_btnV_15adi_7"
2141
- }, zt = () => {
2142
- let { flipHorizontal: e, flipVertical: t, handleFlipHorizontal: n, handleFlipVertical: r, handleSave: i, handleClose: a } = Rt();
2143
- return /* @__PURE__ */ (0, b.jsxs)(V, { children: [/* @__PURE__ */ (0, b.jsx)("div", {
2144
- className: Q.scGroup,
2145
- children: /* @__PURE__ */ (0, b.jsxs)(B, {
2650
+ }, rn = () => {
2651
+ let { flipHorizontal: e, flipVertical: t, handleFlipHorizontal: n, handleFlipVertical: r, handleSave: i, handleClose: a } = tn();
2652
+ return /* @__PURE__ */ (0, x.jsxs)(U, { children: [/* @__PURE__ */ (0, x.jsx)("div", {
2653
+ className: nn.scGroup,
2654
+ children: /* @__PURE__ */ (0, x.jsxs)(H, {
2146
2655
  position: "top",
2147
- className: Q.tooltip,
2148
- children: [/* @__PURE__ */ (0, b.jsx)(F, {
2656
+ children: [/* @__PURE__ */ (0, x.jsx)(I, {
2149
2657
  variant: "outline",
2150
- className: Q.btnH,
2658
+ className: nn.btnH,
2151
2659
  onClick: n,
2152
2660
  "aria-label": "Horizontal",
2153
2661
  "data-tooltip": "Horizontal",
2154
- children: /* @__PURE__ */ (0, b.jsx)(ue, { style: { color: e ? "var(--accent-blue)" : "var(--foreground)" } })
2155
- }), /* @__PURE__ */ (0, b.jsx)(F, {
2662
+ children: /* @__PURE__ */ (0, x.jsx)(ue, { style: { color: e ? "var(--accent-blue)" : "var(--foreground)" } })
2663
+ }), /* @__PURE__ */ (0, x.jsx)(I, {
2156
2664
  variant: "outline",
2157
- className: Q.btnV,
2665
+ className: nn.btnV,
2158
2666
  onClick: r,
2159
2667
  "aria-label": "Vertical",
2160
2668
  "data-tooltip": "Vertical",
2161
- children: /* @__PURE__ */ (0, b.jsx)(de, { style: { color: t ? "var(--accent-blue)" : "var(--foreground)" } })
2669
+ children: /* @__PURE__ */ (0, x.jsx)(de, { style: { color: t ? "var(--accent-blue)" : "var(--foreground)" } })
2162
2670
  })]
2163
2671
  })
2164
- }), /* @__PURE__ */ (0, b.jsx)(R, {
2672
+ }), /* @__PURE__ */ (0, x.jsx)(z, {
2165
2673
  disabled: !e && !t,
2166
2674
  onSave: i,
2167
2675
  onClose: a
2168
2676
  })] });
2169
- }, Bt = () => {
2170
- let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } = N(), { width: a, height: o } = t(), s = e(), c = l(s), u = l(s);
2677
+ }, an = () => {
2678
+ let { getLastRotation: e, getLastHistoryItem: t, addToHistory: n, setSidebar: r, setCurrentAction: i } = P(), { width: a, height: o } = t(), s = e(), c = u(s), l = u(s);
2171
2679
  return {
2172
2680
  handleRotate: (e) => {
2173
- u.current += e, i({
2174
- name: m.ROTATE,
2175
- args: { degrees: u.current }
2681
+ l.current += e, i({
2682
+ name: h.ROTATE,
2683
+ args: { degrees: l.current }
2176
2684
  });
2177
2685
  },
2178
2686
  handleSave: () => {
2179
2687
  n({
2180
- ...ze(a, o, c.current, u.current),
2688
+ ...Je(a, o, c.current, l.current),
2181
2689
  action: {
2182
- name: m.ROTATE,
2183
- args: { degrees: u.current }
2690
+ name: h.ROTATE,
2691
+ args: { degrees: l.current }
2184
2692
  }
2185
2693
  }), r(!0);
2186
2694
  },
@@ -2188,115 +2696,258 @@ var At = ({ boxRef: e }) => {
2188
2696
  i(null), r(!0);
2189
2697
  }
2190
2698
  };
2191
- }, $ = {
2699
+ }, on = {
2192
2700
  btnH: "_btnH_15adi_1",
2193
2701
  btnV: "_btnV_15adi_7"
2194
- }, Vt = () => {
2195
- let { handleRotate: e, handleSave: t, handleClose: n } = Bt();
2196
- return /* @__PURE__ */ (0, b.jsxs)(V, { children: [/* @__PURE__ */ (0, b.jsx)("div", {
2197
- className: $.scGroup,
2198
- children: /* @__PURE__ */ (0, b.jsxs)(B, {
2702
+ }, sn = () => {
2703
+ let { handleRotate: e, handleSave: t, handleClose: n } = an();
2704
+ return /* @__PURE__ */ (0, x.jsxs)(U, { children: [/* @__PURE__ */ (0, x.jsx)("div", {
2705
+ className: on.scGroup,
2706
+ children: /* @__PURE__ */ (0, x.jsxs)(H, {
2199
2707
  position: "top",
2200
- className: $.tooltip,
2201
- children: [/* @__PURE__ */ (0, b.jsx)(F, {
2708
+ children: [/* @__PURE__ */ (0, x.jsx)(I, {
2202
2709
  variant: "outline",
2203
- className: $.btnH,
2710
+ className: on.btnH,
2204
2711
  onClick: () => e(90),
2205
2712
  "aria-label": "+90°",
2206
2713
  "data-tooltip": "+90°",
2207
- children: /* @__PURE__ */ (0, b.jsx)(fe, {})
2208
- }), /* @__PURE__ */ (0, b.jsx)(F, {
2714
+ children: /* @__PURE__ */ (0, x.jsx)(fe, {})
2715
+ }), /* @__PURE__ */ (0, x.jsx)(I, {
2209
2716
  variant: "outline",
2210
- className: $.btnV,
2717
+ className: on.btnV,
2211
2718
  onClick: () => e(-90),
2212
2719
  "aria-label": "-90°",
2213
2720
  "data-tooltip": "-90°",
2214
- children: /* @__PURE__ */ (0, b.jsx)(pe, {})
2721
+ children: /* @__PURE__ */ (0, x.jsx)(pe, {})
2215
2722
  })]
2216
2723
  })
2217
- }), /* @__PURE__ */ (0, b.jsx)(R, {
2724
+ }), /* @__PURE__ */ (0, x.jsx)(z, {
2218
2725
  onSave: t,
2219
2726
  onClose: n
2220
2727
  })] });
2221
- }, Ht = { frame: "_frame_15mog_1" }, Ut = () => {
2222
- let { currentAction: e } = N(), t = e?.name === m.RESIZE, n = e?.name === m.CROP, r = e?.name === m.PRESET_CROP, i = e?.name === m.FLIP, a = e?.name === m.ROTATE, o = n || r;
2223
- return /* @__PURE__ */ (0, b.jsxs)("div", {
2224
- className: `${Ht.frame} ${o ? L.mask : ""}`,
2728
+ }, cn = { frame: "_frame_1p6kh_1" }, ln = () => {
2729
+ let { currentAction: e } = P(), t = e?.name === h.RESIZE, n = e?.name === h.CROP, r = e?.name === h.PRESET_CROP, i = e?.name === h.FLIP, a = e?.name === h.ROTATE, o = e?.name === h.FILTERS, s = n || r;
2730
+ return /* @__PURE__ */ (0, x.jsxs)("div", {
2731
+ className: `${cn.frame} ${s ? R.mask : ""}`,
2225
2732
  children: [
2226
- /* @__PURE__ */ (0, b.jsx)(_t, { style: o ? { opacity: .4 } : {} }),
2227
- t && /* @__PURE__ */ (0, b.jsx)(ht, {}),
2228
- (n || r) && /* @__PURE__ */ (0, b.jsx)(vt, {}, e?.args?.id),
2229
- n && /* @__PURE__ */ (0, b.jsx)(St, {}),
2230
- r && /* @__PURE__ */ (0, b.jsx)(Lt, {}),
2231
- i && /* @__PURE__ */ (0, b.jsx)(zt, {}),
2232
- a && /* @__PURE__ */ (0, b.jsx)(Vt, {})
2733
+ /* @__PURE__ */ (0, x.jsx)(vt, { faded: s }),
2734
+ t && /* @__PURE__ */ (0, x.jsx)(Pt, {}),
2735
+ n && /* @__PURE__ */ (0, x.jsx)(zt, {}),
2736
+ r && /* @__PURE__ */ (0, x.jsx)(en, {}),
2737
+ i && /* @__PURE__ */ (0, x.jsx)(rn, {}),
2738
+ a && /* @__PURE__ */ (0, x.jsx)(sn, {}),
2739
+ o && /* @__PURE__ */ (0, x.jsx)(gt, {}),
2740
+ (n || r) && /* @__PURE__ */ (0, x.jsx)(Ft, {}, e?.args?.id),
2741
+ o && /* @__PURE__ */ (0, x.jsx)(bt, {})
2233
2742
  ]
2234
2743
  });
2235
- }, Wt = ({ image: e, onSave: t, onBack: n, theme: r = "light", settings: i = h }) => {
2236
- let [a, o] = u(null), s = O("sm", a), c = {
2237
- ...h,
2744
+ }, un = () => /* @__PURE__ */ (0, x.jsx)("svg", {
2745
+ style: {
2746
+ position: "absolute",
2747
+ width: 0,
2748
+ height: 0,
2749
+ overflow: "hidden"
2750
+ },
2751
+ xmlns: "http://www.w3.org/2000/svg",
2752
+ children: /* @__PURE__ */ (0, x.jsxs)("defs", { children: [
2753
+ /* @__PURE__ */ (0, x.jsx)("filter", {
2754
+ id: "vintage",
2755
+ children: /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2756
+ type: "matrix",
2757
+ values: "\n 1.2 0 0 0 0.1\n 0 1.0 0 0 0.0\n 0 0 0.8 0 0.1\n 0 0 0 1 0"
2758
+ })
2759
+ }),
2760
+ /* @__PURE__ */ (0, x.jsx)("filter", {
2761
+ id: "olive-army",
2762
+ children: /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2763
+ type: "matrix",
2764
+ values: "\n 0.35 0.35 0.35 0 0\n 0.45 0.45 0.45 0 0\n 0.20 0.20 0.20 0 0\n 0 0 0 1 0"
2765
+ })
2766
+ }),
2767
+ /* @__PURE__ */ (0, x.jsx)("filter", {
2768
+ id: "warm-sunset",
2769
+ children: /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2770
+ type: "matrix",
2771
+ values: "\n 1.3 0 0 0 0.1\n 0 1.1 0 0 0.05\n 0 0 0.7 0 -0.05\n 0 0 0 1 0"
2772
+ })
2773
+ }),
2774
+ /* @__PURE__ */ (0, x.jsx)("filter", {
2775
+ id: "sin-city-red",
2776
+ children: /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2777
+ type: "matrix",
2778
+ values: "\n 1.5 0 0 0 0\n 0.3 0.3 0.3 0 0\n 0.3 0.3 0.3 0 0\n 0 0 0 1 0"
2779
+ })
2780
+ }),
2781
+ /* @__PURE__ */ (0, x.jsxs)("filter", {
2782
+ id: "emboss",
2783
+ children: [/* @__PURE__ */ (0, x.jsx)("feConvolveMatrix", {
2784
+ order: "3",
2785
+ kernelMatrix: "-2 -1 0 -1 1 1 0 1 2"
2786
+ }), /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2787
+ type: "matrix",
2788
+ values: "\n 0.33 0.33 0.33 0 0.5\n 0.33 0.33 0.33 0 0.5\n 0.33 0.33 0.33 0 0.5\n 0 0 0 1 0"
2789
+ })]
2790
+ }),
2791
+ /* @__PURE__ */ (0, x.jsxs)("filter", {
2792
+ id: "crt-lines",
2793
+ children: [
2794
+ /* @__PURE__ */ (0, x.jsx)("feTurbulence", {
2795
+ type: "fractalNoise",
2796
+ baseFrequency: "0 0.9",
2797
+ numOctaves: "1",
2798
+ result: "lines"
2799
+ }),
2800
+ /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2801
+ type: "matrix",
2802
+ values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 15 -7",
2803
+ result: "sharpLines"
2804
+ }),
2805
+ /* @__PURE__ */ (0, x.jsx)("feComposite", {
2806
+ operator: "in",
2807
+ in: "SourceGraphic",
2808
+ in2: "sharpLines",
2809
+ result: "pattern"
2810
+ }),
2811
+ /* @__PURE__ */ (0, x.jsx)("feBlend", {
2812
+ mode: "overlay",
2813
+ in: "SourceGraphic",
2814
+ in2: "pattern"
2815
+ })
2816
+ ]
2817
+ }),
2818
+ /* @__PURE__ */ (0, x.jsxs)("filter", {
2819
+ id: "grain",
2820
+ x: "0%",
2821
+ y: "0%",
2822
+ width: "100%",
2823
+ height: "100%",
2824
+ children: [/* @__PURE__ */ (0, x.jsx)("feTurbulence", {
2825
+ type: "fractalNoise",
2826
+ baseFrequency: "0.8",
2827
+ numOctaves: "3",
2828
+ result: "noise"
2829
+ }), /* @__PURE__ */ (0, x.jsx)("feBlend", {
2830
+ mode: "multiply",
2831
+ in: "SourceGraphic",
2832
+ in2: "noise"
2833
+ })]
2834
+ }),
2835
+ /* @__PURE__ */ (0, x.jsxs)("filter", {
2836
+ id: "cross-process",
2837
+ children: [/* @__PURE__ */ (0, x.jsxs)("feComponentTransfer", { children: [
2838
+ /* @__PURE__ */ (0, x.jsx)("feFuncR", {
2839
+ type: "table",
2840
+ tableValues: "0 0.05 0.2 0.5 0.8 0.95 1"
2841
+ }),
2842
+ /* @__PURE__ */ (0, x.jsx)("feFuncG", {
2843
+ type: "table",
2844
+ tableValues: "0 0.1 0.3 0.6 0.85 1 1"
2845
+ }),
2846
+ /* @__PURE__ */ (0, x.jsx)("feFuncB", {
2847
+ type: "table",
2848
+ tableValues: "0.05 0.15 0.4 0.5 0.7 0.8 0.9"
2849
+ })
2850
+ ] }), /* @__PURE__ */ (0, x.jsxs)("feComponentTransfer", { children: [/* @__PURE__ */ (0, x.jsx)("feFuncR", {
2851
+ type: "linear",
2852
+ slope: "1.2",
2853
+ intercept: "-0.1"
2854
+ }), /* @__PURE__ */ (0, x.jsx)("feFuncG", {
2855
+ type: "linear",
2856
+ slope: "1.1",
2857
+ intercept: "-0.05"
2858
+ })] })]
2859
+ }),
2860
+ /* @__PURE__ */ (0, x.jsx)("filter", {
2861
+ id: "x-ray",
2862
+ children: /* @__PURE__ */ (0, x.jsx)("feColorMatrix", {
2863
+ type: "matrix",
2864
+ values: "\n -0.33 -0.33 -0.33 0 1\n -0.2 -0.2 -0.2 0 0.6\n -0.1 -0.1 -0.1 0 0.9\n 0 0 0 1 0"
2865
+ })
2866
+ }),
2867
+ /* @__PURE__ */ (0, x.jsxs)("filter", {
2868
+ id: "plastic-wrap",
2869
+ children: [/* @__PURE__ */ (0, x.jsx)("feSpecularLighting", {
2870
+ surfaceScale: "5",
2871
+ specularConstant: "1",
2872
+ specularExponent: "20",
2873
+ lightingColor: "#fff",
2874
+ result: "light",
2875
+ children: /* @__PURE__ */ (0, x.jsx)("feDistantLight", {
2876
+ azimuth: "225",
2877
+ elevation: "45"
2878
+ })
2879
+ }), /* @__PURE__ */ (0, x.jsx)("feBlend", {
2880
+ mode: "overlay",
2881
+ in: "SourceGraphic",
2882
+ in2: "light"
2883
+ })]
2884
+ })
2885
+ ] })
2886
+ }), dn = ({ image: e, onSave: t, onBack: n, theme: r = "light", settings: i = g }) => {
2887
+ let [a, o] = d(null), s = k("sm", a), c = {
2888
+ ...g,
2238
2889
  ...i
2239
- }, { loading: l, error: d, mimeType: f, width: p, height: m, originalBlob: g, previewUrl: _, isAlpha: v } = T({
2890
+ }, { loading: l, error: u, mimeType: f, width: p, height: m, originalBlob: h, previewUrl: _, isAlpha: v } = E({
2240
2891
  src: e,
2241
2892
  skip: c?.tools?.length === 0
2242
2893
  });
2243
- return c?.tools?.length === 0 ? /* @__PURE__ */ (0, b.jsx)("div", {
2244
- className: `${L.root} ${L.wrapper}`,
2894
+ return c?.tools?.length === 0 ? /* @__PURE__ */ (0, x.jsx)("div", {
2895
+ className: `${R.root} ${R.wrapper}`,
2245
2896
  "data-theme": r,
2246
- children: /* @__PURE__ */ (0, b.jsx)("div", {
2247
- className: L.system,
2248
- children: /* @__PURE__ */ (0, b.jsx)("div", {
2249
- className: L.textRed,
2897
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
2898
+ className: R.system,
2899
+ children: /* @__PURE__ */ (0, x.jsx)("div", {
2900
+ className: R.textRed,
2250
2901
  children: "No tools selected."
2251
2902
  })
2252
2903
  })
2253
- }) : l || d || !g || !f ? /* @__PURE__ */ (0, b.jsx)("div", {
2254
- className: `${L.root} ${L.wrapper}`,
2904
+ }) : l || u || !h || !f ? /* @__PURE__ */ (0, x.jsx)("div", {
2905
+ className: `${R.root} ${R.wrapper}`,
2255
2906
  "data-theme": r,
2256
- children: /* @__PURE__ */ (0, b.jsxs)("div", {
2257
- className: L.system,
2907
+ children: /* @__PURE__ */ (0, x.jsxs)("div", {
2908
+ className: R.system,
2258
2909
  children: [
2259
- l && /* @__PURE__ */ (0, b.jsx)(_e, { style: {
2910
+ l && /* @__PURE__ */ (0, x.jsx)(be, { style: {
2260
2911
  width: 48,
2261
2912
  height: 48
2262
2913
  } }),
2263
- d && /* @__PURE__ */ (0, b.jsx)("div", {
2264
- className: L.textRed,
2265
- children: d
2914
+ u && /* @__PURE__ */ (0, x.jsx)("div", {
2915
+ className: R.textRed,
2916
+ children: u
2266
2917
  }),
2267
- !l && !d && (!g || !f) && /* @__PURE__ */ (0, b.jsx)("div", {
2268
- className: L.textRed,
2918
+ !l && !u && (!h || !f) && /* @__PURE__ */ (0, x.jsx)("div", {
2919
+ className: R.textRed,
2269
2920
  children: "Failed to load image."
2270
2921
  })
2271
2922
  ]
2272
2923
  })
2273
- }) : /* @__PURE__ */ (0, b.jsx)(x, {
2924
+ }) : /* @__PURE__ */ (0, x.jsx)(S, {
2274
2925
  mimeType: f,
2275
2926
  width: p,
2276
2927
  height: m,
2277
- originalBlob: g,
2928
+ originalBlob: h,
2278
2929
  previewUrl: _,
2279
2930
  isAlpha: v,
2280
2931
  settings: c,
2281
- children: /* @__PURE__ */ (0, b.jsx)("div", {
2932
+ children: /* @__PURE__ */ (0, x.jsxs)("div", {
2282
2933
  ref: o,
2283
- className: `${L.root} ${L.wrapper}`,
2934
+ className: `${R.root} ${R.wrapper}`,
2284
2935
  "data-theme": r,
2285
- children: /* @__PURE__ */ (0, b.jsxs)("div", {
2286
- className: `${c?.infobar ? L.grid : L.gridNoInfobar} ${s ? L.mobile : ""}`,
2936
+ children: [/* @__PURE__ */ (0, x.jsx)(un, {}), /* @__PURE__ */ (0, x.jsxs)("div", {
2937
+ className: `${c?.infobar ? R.grid : R.gridNoInfobar} ${s ? R.mobile : ""}`,
2287
2938
  children: [
2288
- /* @__PURE__ */ (0, b.jsx)($e, {
2939
+ /* @__PURE__ */ (0, x.jsx)(lt, {
2289
2940
  onSave: t,
2290
2941
  onBack: n,
2291
2942
  isMobile: s
2292
2943
  }),
2293
- /* @__PURE__ */ (0, b.jsx)(rt, { isMobile: s }),
2294
- c?.infobar && /* @__PURE__ */ (0, b.jsx)(ot, {}),
2295
- /* @__PURE__ */ (0, b.jsx)(Ut, {})
2944
+ /* @__PURE__ */ (0, x.jsx)(Tt, { isMobile: s }),
2945
+ /* @__PURE__ */ (0, x.jsx)(ln, {}),
2946
+ c?.infobar && /* @__PURE__ */ (0, x.jsx)(Ot, {})
2296
2947
  ]
2297
- })
2948
+ })]
2298
2949
  })
2299
2950
  });
2300
2951
  };
2301
2952
  //#endregion
2302
- export { Wt as Pixedi };
2953
+ export { dn as Pixedi };