pixedi 1.9.0 → 1.10.0

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 (8) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +1 -0
  3. package/README.npm.md +1 -0
  4. package/README.widget.md +1 -0
  5. package/dist/lib/index.js +36 -28
  6. package/dist/lib/index.umd.js +5 -2
  7. package/dist/widget/pixedi-widget.js +7 -4
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## 1.10.1
6
+
7
+ - Add `background` option to settings.
8
+
5
9
  ## 1.9.0
6
10
 
7
11
  - Add single-tool mode: with one tool in `settings.tools` the editor renders only that tool, its Close button calls `onBack` and its Save button produces the image, calls `onSave` and shows a spinner while saving.
package/README.md CHANGED
@@ -105,6 +105,7 @@ function AppBase64() {
105
105
  | `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
106
106
  | `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
107
107
  | `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
108
+ | `background` | `"circled" \| "diagonals" \| "rhombus"` | — | Apply a decorative pattern to the editor frame background. |
108
109
 
109
110
  ## Single-tool mode
110
111
 
package/README.npm.md CHANGED
@@ -105,6 +105,7 @@ function AppBase64() {
105
105
  | `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
106
106
  | `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
107
107
  | `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
108
+ | `background` | `"circled" \| "diagonals" \| "rhombus"` | — | Apply a decorative pattern to the editor frame background. |
108
109
 
109
110
  ## Single-tool mode
110
111
 
package/README.widget.md CHANGED
@@ -64,6 +64,7 @@ Creates the editor inside the element with the given `containerId`. Only one wid
64
64
  | `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
65
65
  | `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
66
66
  | `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
67
+ | `background` | `"circled" \| "diagonals" \| "rhombus"` | — | Apply a decorative pattern to the editor frame background. |
67
68
 
68
69
  ## Single-tool mode
69
70
 
package/dist/lib/index.js CHANGED
@@ -1,4 +1,4 @@
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_187c5_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_187c5_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_187c5_8 h1,._root_187c5_8 h2,._root_187c5_8 h3,._root_187c5_8 h4,._root_187c5_8 h5,._root_187c5_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_187c5_78{color:var(--color-red)}._bgRed_187c5_81{background-color:var(--color-red)}._bgGreen_187c5_84{background-color:var(--color-green)}._textGreen_187c5_87{color:var(--color-green)}._mask_187c5_90{background-color:var(--overlay-bg)}._semibold_187c5_93{letter-spacing:.4px;font-weight:600}._bold_187c5_97{letter-spacing:.4px;font-weight:700}._system_187c5_101{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_187c5_111{width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}._grid_187c5_118{background:var(--background);grid-template:"header header"48px"sidebar frame"1fr"sidebar infobar"32px/48px 1fr;height:100%;display:grid;position:relative}._grid_187c5_118._mobile_187c5_130{grid-template-columns:0 1fr}._gridNoInfobar_187c5_134{grid-template:"header header"48px"sidebar frame"1fr/48px 1fr;height:100%;display:grid;position:relative}._gridNoInfobar_187c5_134._mobile_187c5_130{grid-template-columns:0 1fr}._gridSingleTool_187c5_149{grid-template:"frame"1fr/1fr;height:100%;display:grid;position:relative}._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_1skmt_1{background-color:var(--background);border:var(--surface-border);color:var(--foreground);z-index:9;border-radius:4px;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._content_1skmt_18{display:flex}._drag_1skmt_22{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none;width:16px;height:16px;padding:0 2px}._tools_4u8qe_1{flex-direction:column}._row1_4u8qe_5{flex-direction:row;align-items:center;gap:4px;padding:4px;display:flex}._min_4u8qe_13{text-align:left;width:30px;font-size:14px}._slider_4u8qe_19{flex:1}._max_4u8qe_23{text-align:right;width:45px;font-size:14px}._row2_4u8qe_29{flex-direction:row;gap:4px;display:flex}._select_4u8qe_35{width:160px}._option_4u8qe_39{width:120px;height:32px}._option_4u8qe_39 img{object-fit:cover;width:100%;height:100%}._active_4u8qe_50{color:var(--accent-blue);background:var(--muted)}._filterInteract_4u8qe_55{max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._filterInteract_4u8qe_55>div:first-child{width:100%;max-width:100%;height:100%;max-height:100%}._compare_4u8qe_70{width:0;height:100%;position:absolute;top:0;transform:translate(-50%)}._compare_4u8qe_70:before{content:"";background:var(--accent-blue);width:1px;height:100%;position:absolute;top:0;left:-.5px}._compareThumb_4u8qe_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_4u8qe_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}._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)}._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)}})();
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_c6inw_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(95% 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_c6inw_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_c6inw_8 h1,._root_c6inw_8 h2,._root_c6inw_8 h3,._root_c6inw_8 h4,._root_c6inw_8 h5,._root_c6inw_8 h6{color:var(--foreground);margin:0;font-weight:600}._textRed_c6inw_78{color:var(--color-red)}._bgRed_c6inw_81{background-color:var(--color-red)}._bgGreen_c6inw_84{background-color:var(--color-green)}._textGreen_c6inw_87{color:var(--color-green)}._mask_c6inw_90{background-color:var(--overlay-bg)}._semibold_c6inw_93{letter-spacing:.4px;font-weight:600}._bold_c6inw_97{letter-spacing:.4px;font-weight:700}._system_c6inw_101{color:var(--muted-foreground);background-color:var(--background);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}._wrapper_c6inw_111{width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}._grid_c6inw_118{background:var(--background);grid-template:"header header"48px"sidebar frame"1fr"sidebar infobar"32px/48px 1fr;height:100%;display:grid;position:relative}._grid_c6inw_118._mobile_c6inw_130{grid-template-columns:0 1fr}._gridNoInfobar_c6inw_134{grid-template:"header header"48px"sidebar frame"1fr/48px 1fr;height:100%;display:grid;position:relative}._gridNoInfobar_c6inw_134._mobile_c6inw_130{grid-template-columns:0 1fr}._gridSingleTool_c6inw_149{grid-template:"frame"1fr/1fr;height:100%;display:grid;position:relative}._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_1skmt_1{background-color:var(--background);border:var(--surface-border);color:var(--foreground);z-index:9;border-radius:4px;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000001a}._content_1skmt_18{display:flex}._drag_1skmt_22{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none;width:16px;height:16px;padding:0 2px}._tools_4u8qe_1{flex-direction:column}._row1_4u8qe_5{flex-direction:row;align-items:center;gap:4px;padding:4px;display:flex}._min_4u8qe_13{text-align:left;width:30px;font-size:14px}._slider_4u8qe_19{flex:1}._max_4u8qe_23{text-align:right;width:45px;font-size:14px}._row2_4u8qe_29{flex-direction:row;gap:4px;display:flex}._select_4u8qe_35{width:160px}._option_4u8qe_39{width:120px;height:32px}._option_4u8qe_39 img{object-fit:cover;width:100%;height:100%}._active_4u8qe_50{color:var(--accent-blue);background:var(--muted)}._filterInteract_4u8qe_55{max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:auto;position:absolute;inset:0}._filterInteract_4u8qe_55>div:first-child{width:100%;max-width:100%;height:100%;max-height:100%}._compare_4u8qe_70{width:0;height:100%;position:absolute;top:0;transform:translate(-50%)}._compare_4u8qe_70:before{content:"";background:var(--accent-blue);width:1px;height:100%;position:absolute;top:0;left:-.5px}._compareThumb_4u8qe_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_4u8qe_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}._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)}._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_1kq0f_1{background:var(--muted);border-top:solid 1px var(--border);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_17rae_1{box-sizing:border-box;background:var(--background);grid-area:frame;width:100%;height:100%;margin:0 auto;position:relative;overflow:hidden}._bg-circled_17rae_12{background:radial-gradient(50% 50% at 100% 0, var(--background) 0% 5%, var(--muted) 6% 15%, var(--background) 16% 25%, var(--muted) 26% 35%, var(--background) 36% 45%, var(--muted) 46% 55%, var(--background) 56% 65%, var(--muted) 66% 75%, var(--background) 76% 85%, var(--muted) 86% 95%, #0000 96%), radial-gradient(50% 50% at 0 100%, var(--background) 0% 5%, var(--muted) 6% 15%, var(--background) 16% 25%, var(--muted) 26% 35%, var(--background) 36% 45%, var(--muted) 46% 55%, var(--background) 56% 65%, var(--muted) 66% 75%, var(--background) 76% 85%, var(--muted) 86% 95%, #0000 96%), radial-gradient(50% 50%, var(--background) 0% 5%, var(--muted) 6% 15%, var(--background) 16% 25%, var(--muted) 26% 35%, var(--background) 36% 45%, var(--muted) 46% 55%, var(--background) 56% 65%, var(--muted) 66% 75%, var(--background) 76% 85%, var(--muted) 86% 95%, #0000 96%), radial-gradient(50% 50%, var(--background) 0% 5%, var(--muted) 6% 15%, var(--background) 16% 25%, var(--muted) 26% 35%, var(--background) 36% 45%, var(--muted) 46% 55%, var(--background) 56% 65%, var(--muted) 66% 75%, var(--background) 76% 85%, var(--muted) 86% 95%, #0000 96%) calc(48px / 2) calc(48px / 2) var(--background);background-size:48px 48px}._bg-diagonals_17rae_74{background:linear-gradient(45deg, var(--muted) 12.5%, var(--background) 0 25%, #0000 0 75%, var(--background) 0 87.5%, var(--muted) 0) calc(55px / 2) calc(55px / 2), linear-gradient(45deg, var(--background) 12.5%, var(--muted) 0 25%, #0000 0 75%, var(--muted) 0 87.5%, var(--background) 0), repeating-linear-gradient(-45deg, var(--muted) 0 12.5%, var(--background) 0 25%, var(--muted) 0 37.5%, var(--background) 0 62.5%);background-size:55px 55px}._bg-rhombus_17rae_103{background:repeating-linear-gradient(45deg, #0000 calc(-650% / 13) calc(50% / 13), var(--muted) 0 calc(100% / 13), #0000 0 calc(150% / 13), var(--muted) 0 calc(200% / 13), #0000 0 calc(250% / 13), var(--muted) 0 calc(300% / 13)), repeating-linear-gradient(45deg, #0000 calc(-650% / 13) calc(50% / 13), var(--muted) 0 calc(100% / 13), #0000 0 calc(150% / 13), var(--muted) 0 calc(200% / 13), #0000 0 calc(250% / 13), var(--muted) 0 calc(300% / 13)) 36px 36px, repeating-linear-gradient(-45deg, #0000 calc(-650% / 13) calc(50% / 13), var(--muted) 0 calc(100% / 13), #0000 0 calc(150% / 13), var(--muted) 0 calc(200% / 13), #0000 0 calc(250% / 13), var(--muted) 0 calc(300% / 13)), repeating-linear-gradient(-45deg, #0000 calc(-650% / 13) calc(50% / 13), var(--muted) 0 calc(100% / 13), #0000 0 calc(150% / 13), var(--muted) 0 calc(200% / 13), #0000 0 calc(250% / 13), var(--muted) 0 calc(300% / 13)) 36px 36px var(--background);background-size:72px 72px}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
2
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
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) {
@@ -708,20 +708,20 @@ var I = {
708
708
  itemRight: "_itemRight_1aw0m_122",
709
709
  itemCheck: "_itemCheck_1aw0m_131"
710
710
  }, L = {
711
- root: "_root_187c5_8",
712
- textRed: "_textRed_187c5_78",
713
- bgRed: "_bgRed_187c5_81",
714
- bgGreen: "_bgGreen_187c5_84",
715
- textGreen: "_textGreen_187c5_87",
716
- mask: "_mask_187c5_90",
717
- semibold: "_semibold_187c5_93",
718
- bold: "_bold_187c5_97",
719
- system: "_system_187c5_101",
720
- wrapper: "_wrapper_187c5_111",
721
- grid: "_grid_187c5_118",
722
- mobile: "_mobile_187c5_130",
723
- gridNoInfobar: "_gridNoInfobar_187c5_134",
724
- gridSingleTool: "_gridSingleTool_187c5_149"
711
+ root: "_root_c6inw_8",
712
+ textRed: "_textRed_c6inw_78",
713
+ bgRed: "_bgRed_c6inw_81",
714
+ bgGreen: "_bgGreen_c6inw_84",
715
+ textGreen: "_textGreen_c6inw_87",
716
+ mask: "_mask_c6inw_90",
717
+ semibold: "_semibold_c6inw_93",
718
+ bold: "_bold_c6inw_97",
719
+ system: "_system_c6inw_101",
720
+ wrapper: "_wrapper_c6inw_111",
721
+ grid: "_grid_c6inw_118",
722
+ mobile: "_mobile_c6inw_130",
723
+ gridNoInfobar: "_gridNoInfobar_c6inw_134",
724
+ gridSingleTool: "_gridSingleTool_c6inw_149"
725
725
  }, ge = (e) => {
726
726
  let t = 0, n = window.innerHeight;
727
727
  for (let r = e.parentElement; r; r = r.parentElement) {
@@ -2293,7 +2293,7 @@ var dt = ({ surfaceRef: e }) => {
2293
2293
  })
2294
2294
  })
2295
2295
  });
2296
- }, Ft = { infobar: "_infobar_895qe_1" }, It = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : `${(e / 1024 / 1024).toFixed(2)} MB`, Lt = () => {
2296
+ }, Ft = { infobar: "_infobar_1kq0f_1" }, It = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(2)} KB` : `${(e / 1024 / 1024).toFixed(2)} MB`, Lt = () => {
2297
2297
  let { originalBlob: e, getLastHistoryItem: t } = W(), { width: n, height: r } = t();
2298
2298
  return /* @__PURE__ */ (0, x.jsxs)("div", {
2299
2299
  className: Ft.infobar,
@@ -2930,20 +2930,28 @@ var rn = ({ boxRef: e }) => {
2930
2930
  onClose: n,
2931
2931
  saving: r
2932
2932
  })] });
2933
- }, vn = { frame: "_frame_1p6kh_1" }, yn = () => {
2934
- let { currentAction: e } = W(), t = e?.name === U.RESIZE, n = e?.name === U.CROP, r = e?.name === U.PRESET_CROP, i = e?.name === U.FLIP, a = e?.name === U.ROTATE, o = e?.name === U.FILTERS, s = n || r;
2933
+ }, vn = {
2934
+ frame: "_frame_17rae_1",
2935
+ "bg-circled": "_bg-circled_17rae_12",
2936
+ "bg-diagonals": "_bg-diagonals_17rae_74",
2937
+ "bg-rhombus": "_bg-rhombus_17rae_103"
2938
+ }, yn = () => {
2939
+ let { settings: e, currentAction: t } = W(), n = t?.name === U.RESIZE, r = t?.name === U.CROP, i = t?.name === U.PRESET_CROP, a = t?.name === U.FLIP, o = t?.name === U.ROTATE, s = t?.name === U.FILTERS, c = r || i;
2935
2940
  return /* @__PURE__ */ (0, x.jsxs)("div", {
2936
- className: `${vn.frame} ${s ? L.mask : ""}`,
2941
+ className: `
2942
+ ${vn.frame}
2943
+ ${e?.background ? vn[`bg-${e.background}`] : ""}
2944
+ `,
2937
2945
  children: [
2938
- /* @__PURE__ */ (0, x.jsx)(xt, { faded: s }),
2939
- t && /* @__PURE__ */ (0, x.jsx)(Wt, {}),
2940
- n && /* @__PURE__ */ (0, x.jsx)(Yt, {}),
2941
- r && /* @__PURE__ */ (0, x.jsx)(dn, {}),
2942
- i && /* @__PURE__ */ (0, x.jsx)(mn, {}),
2943
- a && /* @__PURE__ */ (0, x.jsx)(_n, {}),
2944
- o && /* @__PURE__ */ (0, x.jsx)(yt, {}),
2945
- (n || r) && /* @__PURE__ */ (0, x.jsx)(Gt, {}, e?.args?.id),
2946
- o && /* @__PURE__ */ (0, x.jsx)(Ct, {})
2946
+ /* @__PURE__ */ (0, x.jsx)(xt, { faded: c }),
2947
+ n && /* @__PURE__ */ (0, x.jsx)(Wt, {}),
2948
+ r && /* @__PURE__ */ (0, x.jsx)(Yt, {}),
2949
+ i && /* @__PURE__ */ (0, x.jsx)(dn, {}),
2950
+ a && /* @__PURE__ */ (0, x.jsx)(mn, {}),
2951
+ o && /* @__PURE__ */ (0, x.jsx)(_n, {}),
2952
+ s && /* @__PURE__ */ (0, x.jsx)(yt, {}),
2953
+ (r || i) && /* @__PURE__ */ (0, x.jsx)(Gt, {}, t?.args?.id),
2954
+ s && /* @__PURE__ */ (0, x.jsx)(Ct, {})
2947
2955
  ]
2948
2956
  });
2949
2957
  }, bn = () => /* @__PURE__ */ (0, x.jsx)("svg", {