js-draw 1.15.0 → 1.16.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 (24) hide show
  1. package/dist/Editor.css +14 -0
  2. package/dist/bundle.js +1 -1
  3. package/dist/bundledStyles.js +1 -1
  4. package/dist/cjs/Editor.d.ts +4 -1
  5. package/dist/cjs/Editor.js +25 -2
  6. package/dist/cjs/rendering/renderers/CanvasRenderer.js +1 -1
  7. package/dist/cjs/tools/PanZoom.d.ts +8 -2
  8. package/dist/cjs/tools/PanZoom.js +29 -10
  9. package/dist/cjs/tools/PasteHandler.js +4 -0
  10. package/dist/cjs/tools/SelectionTool/Selection.js +16 -2
  11. package/dist/cjs/version.js +1 -1
  12. package/dist/mjs/Editor.d.ts +4 -1
  13. package/dist/mjs/Editor.mjs +25 -2
  14. package/dist/mjs/rendering/renderers/CanvasRenderer.mjs +1 -1
  15. package/dist/mjs/tools/PanZoom.d.ts +8 -2
  16. package/dist/mjs/tools/PanZoom.mjs +29 -10
  17. package/dist/mjs/tools/PasteHandler.mjs +4 -0
  18. package/dist/mjs/tools/SelectionTool/Selection.mjs +16 -2
  19. package/dist/mjs/version.mjs +1 -1
  20. package/package.json +3 -3
  21. package/src/Editor.scss +10 -0
  22. package/src/toolbar/EdgeToolbar.scss +2 -0
  23. package/src/tools/SelectionTool/SelectionTool.scss +4 -0
  24. package/src/tools/SoundUITool.scss +4 -1
package/dist/bundledStyles.js CHANGED
@@ -1 +1 @@
1
- (()=>{"use strict";var o={489:(o,e,n)=>{n.d(e,{Z:()=>l});var t=n(601),r=n.n(t),a=n(609),i=n.n(a)()(r());i.push([o.id,'.clr-picker {\n display: none;\n flex-wrap: wrap;\n position: absolute;\n width: 200px;\n z-index: 1000;\n border-radius: 10px;\n background-color: #fff;\n justify-content: flex-end;\n direction: ltr;\n box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\n -moz-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.clr-picker.clr-open,\n.clr-picker[data-inline="true"] {\n display: flex;\n}\n\n.clr-picker[data-inline="true"] {\n position: relative;\n}\n\n.clr-gradient {\n position: relative;\n width: 100%;\n height: 100px;\n margin-bottom: 15px;\n border-radius: 3px 3px 0 0;\n background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\n cursor: pointer;\n}\n\n.clr-marker {\n position: absolute;\n width: 12px;\n height: 12px;\n margin: -6px 0 0 -6px;\n border: 1px solid #fff;\n border-radius: 50%;\n background-color: currentColor;\n cursor: pointer;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n width: 100%;\n height: 16px;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-thumb {\n width: 16px;\n height: 16px;\n -webkit-appearance: none;\n}\n\n.clr-picker input[type="range"]::-moz-range-track {\n width: 100%;\n height: 16px;\n border: 0;\n}\n\n.clr-picker input[type="range"]::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border: 0;\n}\n\n.clr-hue {\n background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\n}\n\n.clr-hue,\n.clr-alpha {\n position: relative;\n width: calc(100% - 40px);\n height: 8px;\n margin: 5px 20px;\n border-radius: 4px;\n}\n\n.clr-alpha span {\n display: block;\n height: 100%;\n width: 100%;\n border-radius: inherit;\n background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\n}\n\n.clr-hue input,\n.clr-alpha input {\n position: absolute;\n width: calc(100% + 32px);\n height: 16px;\n left: -16px;\n top: -4px;\n margin: 0;\n background-color: transparent;\n opacity: 0;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n}\n\n.clr-hue div,\n.clr-alpha div {\n position: absolute;\n width: 16px;\n height: 16px;\n left: 0;\n top: 50%;\n margin-left: -8px;\n transform: translateY(-50%);\n border: 2px solid #fff;\n border-radius: 50%;\n background-color: currentColor;\n box-shadow: 0 0 1px #888;\n pointer-events: none;\n}\n\n.clr-alpha div:before {\n content: \'\';\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n border-radius: 50%;\n background-color: currentColor;\n}\n\n.clr-format {\n display: none;\n order: 1;\n width: calc(100% - 40px);\n margin: 0 20px 20px;\n}\n\n.clr-segmented {\n display: flex;\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n border: 1px solid #ddd;\n border-radius: 15px;\n box-sizing: border-box;\n color: #999;\n font-size: 12px;\n}\n\n.clr-segmented input,\n.clr-segmented legend {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n left: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n.clr-segmented label {\n flex-grow: 1;\n margin: 0;\n padding: 4px 0;\n font-size: inherit;\n font-weight: normal;\n line-height: initial;\n text-align: center;\n cursor: pointer;\n}\n\n.clr-segmented label:first-of-type {\n border-radius: 10px 0 0 10px;\n}\n\n.clr-segmented label:last-of-type {\n border-radius: 0 10px 10px 0;\n}\n\n.clr-segmented input:checked + label {\n color: #fff;\n background-color: #666;\n}\n\n.clr-swatches {\n order: 2;\n width: calc(100% - 32px);\n margin: 0 16px;\n}\n\n.clr-swatches div {\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 12px;\n justify-content: center;\n}\n\n.clr-swatches button {\n position: relative;\n width: 20px;\n height: 20px;\n margin: 0 4px 6px 4px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n color: inherit;\n text-indent: -1000px;\n white-space: nowrap;\n overflow: hidden;\n cursor: pointer;\n}\n\n.clr-swatches button:after {\n content: \'\';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n border-radius: inherit;\n background-color: currentColor;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\ninput.clr-color {\n order: 1;\n width: calc(100% - 80px);\n height: 32px;\n margin: 15px 20px 20px auto;\n padding: 0 10px;\n border: 1px solid #ddd;\n border-radius: 16px;\n color: #444;\n background-color: #fff;\n font-family: sans-serif;\n font-size: 14px;\n text-align: center;\n box-shadow: none;\n}\n\ninput.clr-color:focus {\n outline: none;\n border: 1px solid #1e90ff;\n}\n\n.clr-close,\n.clr-clear {\n display: none;\n order: 2;\n height: 24px;\n margin: 0 20px 20px;\n padding: 0 20px;\n border: 0;\n border-radius: 12px;\n color: #fff;\n background-color: #666;\n font-family: inherit;\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n}\n\n.clr-close {\n display: block;\n margin: 0 20px 20px auto;\n}\n\n.clr-preview {\n position: relative;\n width: 32px;\n height: 32px;\n margin: 15px 0 20px 20px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.clr-preview:before,\n.clr-preview:after {\n content: \'\';\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n border: 1px solid #fff;\n border-radius: 50%;\n}\n\n.clr-preview:after {\n border: 0;\n background-color: currentColor;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\n.clr-preview button {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 50%;\n outline-offset: -2px;\n background-color: transparent;\n text-indent: -9999px;\n cursor: pointer;\n overflow: hidden;\n}\n\n.clr-marker,\n.clr-hue div,\n.clr-alpha div,\n.clr-color {\n box-sizing: border-box;\n}\n\n.clr-field {\n display: inline-block;\n position: relative;\n color: transparent;\n}\n\n.clr-field input {\n margin: 0;\n direction: ltr;\n}\n\n.clr-field.clr-rtl input {\n text-align: right;\n}\n\n.clr-field button {\n position: absolute;\n width: 30px;\n height: 100%;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n padding: 0;\n border: 0;\n color: inherit;\n text-indent: -1000px;\n white-space: nowrap;\n overflow: hidden;\n pointer-events: none;\n}\n\n.clr-field.clr-rtl button {\n right: auto;\n left: 0;\n}\n\n.clr-field button:after {\n content: \'\';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n border-radius: inherit;\n background-color: currentColor;\n box-shadow: inset 0 0 1px rgba(0,0,0,.5);\n}\n\n.clr-alpha,\n.clr-alpha div,\n.clr-swatches button,\n.clr-preview:before,\n.clr-field button {\n background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n background-position: 0 0, 4px 4px;\n background-size: 8px 8px;\n}\n\n.clr-marker:focus {\n outline: none;\n}\n\n.clr-keyboard-nav .clr-marker:focus,\n.clr-keyboard-nav .clr-hue input:focus + div,\n.clr-keyboard-nav .clr-alpha input:focus + div,\n.clr-keyboard-nav .clr-segmented input:focus + label {\n outline: none;\n box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\n}\n\n.clr-picker[data-alpha="false"] .clr-alpha {\n display: none;\n}\n\n.clr-picker[data-minimal="true"] {\n padding-top: 16px;\n}\n\n.clr-picker[data-minimal="true"] .clr-gradient,\n.clr-picker[data-minimal="true"] .clr-hue,\n.clr-picker[data-minimal="true"] .clr-alpha,\n.clr-picker[data-minimal="true"] .clr-color,\n.clr-picker[data-minimal="true"] .clr-preview {\n display: none;\n}\n\n/** Dark theme **/\n\n.clr-dark {\n background-color: #444;\n}\n\n.clr-dark .clr-segmented {\n border-color: #777;\n}\n\n.clr-dark .clr-swatches button:after {\n box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\n}\n\n.clr-dark input.clr-color {\n color: #fff;\n border-color: #777;\n background-color: #555;\n}\n\n.clr-dark input.clr-color:focus {\n border-color: #1e90ff;\n}\n\n.clr-dark .clr-preview:after {\n box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\n}\n\n.clr-dark .clr-alpha,\n.clr-dark .clr-alpha div,\n.clr-dark .clr-swatches button,\n.clr-dark .clr-preview:before {\n background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);\n}\n\n/** Polaroid theme **/\n\n.clr-picker.clr-polaroid {\n border-radius: 6px;\n box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\n}\n\n.clr-picker.clr-polaroid:before {\n content: \'\';\n display: block;\n position: absolute;\n width: 16px;\n height: 10px;\n left: 20px;\n top: -10px;\n border: solid transparent;\n border-width: 0 8px 10px 8px;\n border-bottom-color: currentColor;\n box-sizing: border-box;\n color: #fff;\n filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\n pointer-events: none;\n}\n\n.clr-picker.clr-polaroid.clr-dark:before {\n color: #444;\n}\n\n.clr-picker.clr-polaroid.clr-left:before {\n left: auto;\n right: 20px;\n}\n\n.clr-picker.clr-polaroid.clr-top:before {\n top: auto;\n bottom: -10px;\n transform: rotateZ(180deg);\n}\n\n.clr-polaroid .clr-gradient {\n width: calc(100% - 20px);\n height: 120px;\n margin: 10px;\n border-radius: 3px;\n}\n\n.clr-polaroid .clr-hue,\n.clr-polaroid .clr-alpha {\n width: calc(100% - 30px);\n height: 10px;\n margin: 6px 15px;\n border-radius: 5px;\n}\n\n.clr-polaroid .clr-hue div,\n.clr-polaroid .clr-alpha div {\n box-shadow: 0 0 5px rgba(0,0,0,.2);\n}\n\n.clr-polaroid .clr-format {\n width: calc(100% - 20px);\n margin: 0 10px 15px;\n}\n\n.clr-polaroid .clr-swatches {\n width: calc(100% - 12px);\n margin: 0 6px;\n}\n.clr-polaroid .clr-swatches div {\n padding-bottom: 10px;\n}\n\n.clr-polaroid .clr-swatches button {\n width: 22px;\n height: 22px;\n}\n\n.clr-polaroid input.clr-color {\n width: calc(100% - 60px);\n margin: 10px 10px 15px auto;\n}\n\n.clr-polaroid .clr-clear {\n margin: 0 10px 15px 10px;\n}\n\n.clr-polaroid .clr-close {\n margin: 0 10px 15px auto;\n}\n\n.clr-polaroid .clr-preview {\n margin: 10px 0 15px 10px;\n}\n\n/** Large theme **/\n\n.clr-picker.clr-large {\n width: 275px;\n}\n\n.clr-large .clr-gradient {\n height: 150px;\n}\n\n.clr-large .clr-swatches button {\n width: 22px;\n height: 22px;\n}\n\n/** Pill (horizontal) theme **/\n\n.clr-picker.clr-pill {\n width: 380px;\n padding-left: 180px;\n box-sizing: border-box;\n}\n\n.clr-pill .clr-gradient {\n position: absolute;\n width: 180px;\n height: 100%;\n left: 0;\n top: 0;\n margin-bottom: 0;\n border-radius: 3px 0 0 3px;\n}\n\n.clr-pill .clr-hue {\n margin-top: 20px;\n}',""]);const l=i},245:(o,e,n)=>{n.d(e,{Z:()=>l});var t=n(601),r=n.n(t),a=n(609),i=n.n(a)()(r());i.push([o.id,':root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div>div{padding:5px}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div{min-height:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img{max-width:min(50vw,75%);max-height:min(300px,50vh);display:block;margin-left:auto;margin-right:auto}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .insert-image-image-status-view{display:flex;justify-content:space-between}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row{margin-top:4px;display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:0;margin-bottom:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row>button{flex-grow:1;text-align:end;max-width:50%;min-width:min(100%,40px)}.toolbar-overflow-widget-overflow-list{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.toolbar-overflow-widget-overflow-list>.toolbar-toolContainer>.toolbar-button{height:var(--toolbar-button-height)}.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list{flex-direction:row}.toolbar-overflow-widget.horizontal>.toolbar-dropdown{max-width:100%;left:15px;right:15px;margin-left:0 !important;translate:none !important;padding:4px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons{display:flex;justify-content:stretch;padding-top:0;padding-bottom:5px;direction:ltr}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>*{flex-grow:1;text-align:start;margin-inline-end:5px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>* .icon{margin:0;margin-inline-start:4px;margin-inline-end:10px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>:nth-child(1){direction:ltr}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>:last-child{direction:rtl}.toolbar-zoomLevelEditor{display:flex;flex-direction:row;align-items:center}.toolbar-zoomLevelEditor .zoomDisplay{flex-grow:1}.toolbar-zoomLevelEditor button{min-width:48px}.selection-format-menu.disabled{opacity:.5}.toolbar-document-properties-widget button.about-button{width:100%;text-align:end}.toolbar-document-properties-widget>*{--align-items-to-x: 120px}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row{display:flex}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size{display:none}.toolbar-thicknessSliderContainer{display:flex;flex-direction:row}.toolbar-thicknessSliderContainer input{flex-grow:1}.toolbar-element .clr-field *{cursor:pointer}.toolbar-element .clr-field button{width:1.2em;height:1.2em;top:50%;left:0;border-radius:50%;margin-left:0;margin-right:0}.toolbar-element .clr-field input{opacity:0}.color-input-container{display:inline-flex;flex-direction:row}.color-input-container .coloris_input{height:calc(100% - 6px)}.color-input-container.picker-open .clr-field{pointer-events:none}:root .color-input-container>button.pipetteButton{width:30px;height:30px;padding:0;display:inline-flex}.color-input-container>.color-input-wrapper{display:flex;justify-content:stretch}.color-input-container .pipetteButton>svg{width:100%}.color-input-container .pipetteButton .pickColorInstructions{display:none;font-size:1em;position:absolute;margin-left:30px;background-color:var(--background-color-1);border-radius:30px;padding:4px;opacity:0;transition:.2s ease opacity}@media(prefers-reduced-motion: reduce){.color-input-container .pipetteButton .pickColorInstructions{transition:none}}.color-input-container .pipetteButton.active{background-color:var(--selection-background-color);--icon-color: var(--selection-foreground-color)}.color-input-container .pipetteButton.active .pickColorInstructions{display:block;opacity:.8}.tool-dropdown-separator{--border-color: rgba(100, 100, 100, 0.2);--border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);border-top:1px solid var(--border-color);padding-left:2px;margin-top:10px;margin-bottom:10px}.toolbar-element .toolbar--file-input-container{display:flex}.toolbar-element .toolbar--file-input-container>input[type=file]{opacity:0;width:0;min-width:0 !important;max-width:0;height:0}.toolbar-element .toolbar--file-input-container>label{display:block;flex-grow:1;padding:0 !important;padding-bottom:5px;--active-border-color: rgba(100, 100, 100, 0.5);--active-border-color: color-mix( in srgb, var(--foreground-color-1), transparent )}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description{background-color:var(--background-color-3);color:var(--foreground-color-3);border:1px dashed var(--active-border-color);padding:10px;margin-top:10px;display:flex;flex-direction:column;align-items:center;text-align:center;--action-color: var(--primary-action-foreground-color);--icon-color: var(--action-color)}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span{white-space:pre-wrap}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span>b{color:var(--action-color);cursor:pointer}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>.icon{width:min(50vw,42px);height:min(50vw,42px);margin-bottom:8px;display:block}.toolbar-element .toolbar--file-input-container>label:active,.toolbar-element .toolbar--file-input-container>label:hover,.toolbar-element .toolbar--file-input-container>label.drag-target{--active-border-color: var(--foreground-color-1)}.toolbar-element .toolbar--file-input-container>label.drag-target>.toolbar--file-input-description{border-width:2px}.toolbar-grid-selector{position:relative}.toolbar-grid-selector>div{display:flex;flex-direction:row;max-width:350px;flex-wrap:wrap;--button-size: 48px}.toolbar-grid-selector .choice-button{display:flex;flex-direction:column-reverse;box-sizing:border-box;cursor:pointer;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button.focus-visible{outline:2px solid var(--foreground-color-1)}.toolbar-grid-selector .choice-button input{opacity:0;height:0}.toolbar-grid-selector .choice-button label{display:flex;flex-direction:column;box-sizing:border-box;width:var(--button-size);height:var(--button-size);font-size:.7rem;align-items:center;justify-content:center;padding:4px;user-select:none;-webkit-user-select:none}.toolbar-grid-selector .choice-button .icon{flex-grow:1;flex-shrink:1;width:100%}.toolbar-grid-selector .choice-button.checked{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-root{background-color:var(--background-color-1);--icon-color: var(--foreground-color-1);--toolbar-button-height: min(20vh, 60px);flex-wrap:wrap;box-sizing:border-box;width:100%;display:flex;flex-direction:row;justify-content:center}.toolbar-element{z-index:1;font-family:system-ui,-apple-system,sans-serif}.toolbar-element details>summary{cursor:pointer}.toolbar-element>.toolbar-toolContainer>.toolbar-button,.toolbar-element>.toolbar-toolContainer>*>button,.toolbar-element>.toolbar-buttonGroup>button,.toolbar-element>.toolbar-button{white-space:pre;height:var(--toolbar-button-height)}.toolbar-dropdown .toolbar-button>.toolbar-icon{max-width:50px;width:100%}.toolbar-button.disabled{filter:sepia(0.2);opacity:.45;cursor:unset}.toolbar-button,.toolbar-element button{cursor:pointer;text-align:center;border-radius:6px;border:none;box-shadow:0px 0px 2px var(--shadow-color);user-select:none;-webkit-user-select:none;transition:background-color .15s ease,box-shadow .25s ease,opacity .2s ease}.toolbar-button,.toolbar-buttonGroup>button,.toolbar-toolContainer>*>button,.toolbar-root>button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-left:3px;padding-right:3px;min-width:40px;max-width:105px;width:min-content;font-size:1em}.toolbar-button>label{cursor:inherit;user-select:none;-webkit-user-select:none}.toolbar-root>.toolbar-toolContainer>.toolbar-button>label.long-label{font-size:.75em}.toolbar-dropdown>.toolbar-toolContainer>button,.toolbar-dropdown>.toolbar-toolContainer>.toolbar-button{width:6em}.toolbar-button:not(.disabled):hover,.toolbar-root button:not(:disabled):hover{box-shadow:0px 2px 4px var(--shadow-color)}.toolbar-root button:disabled{cursor:inherit;opacity:.5}.toolbar-root .toolbar-icon{flex-shrink:1;user-select:none;width:100%;min-width:20px;min-height:20px}.toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{height:15px;transition:transform .25s ease}.toolbar-toolContainer.dropdownVisible>.toolbar-button>.toolbar-showHideDropdownIcon{transform:rotate(180deg)}.toolbar-dropdown.hidden,.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-dropdown:not(.hiding){display:none}.toolbar-dropdown{position:absolute;padding:15px;padding-top:5px;display:flex;flex-wrap:wrap;flex-direction:column;max-height:80vh;max-width:fit-content;z-index:2;background-color:var(--background-color-1);box-shadow:0px 3px 3px var(--shadow-color)}@keyframes dropdown-transition-in{0%{opacity:0;transform:scale(1, 0)}100%{opacity:1;transform:scale(1, 1)}}@keyframes dropdown-transition-out{0%{opacity:1;transform:scale(1, 1)}100%{opacity:0;transform:scale(1, 0)}}.toolbar-dropdown{transform-origin:top left;--dropdown-show-animation: dropdown-transition-in;--dropdown-hide-animation: dropdown-transition-out}@media(prefers-reduced-motion: reduce){.toolbar-dropdown{--dropdown-show-animation: none;--dropdown-hide-animation: none}.toolbar-dropdown.hiding{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{transition:none}:root .toolbar-button,.toolbar-root button{transition:none}}.toolbar-buttonGroup{display:flex;flex-direction:row;justify-content:center}.toolbar-element .toolbar--toggle-button{color:var(--foreground-color-1);font-weight:normal}.toolbar-element .toolbar--toggle-button[aria-checked=true]{background:var(--selection-background-color);color:var(--selection-foreground-color)}.toolbar-element .toolbar--toggle-button>.icon{width:25px;height:25px;margin:0 5px}.toolbar-element .toolbar--toggle-button>*{vertical-align:middle}.toolbar-closeColorPickerOverlay{display:none;position:fixed;top:0;left:0;bottom:0;right:0;touch-action:none;background-color:var(--background-color-1);opacity:.3;z-index:2}.toolbar-spacedList>*{padding-bottom:5px;padding-top:5px}.toolbar-indentedList{padding-left:10px}@media print{.toolbar-element{display:none}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label-delayed{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes show-label-now{0%{opacity:0}5%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@keyframes toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-in-reduce-motion{from{opacity:0}to{opacity:1}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@keyframes toolbar--edgemenu-transition-out-reduce-motion{from{opacity:1}to{opacity:0}}@keyframes toolbar--edgemenu-container-transition-in{from{overflow-y:hidden}to{overflow-y:hidden}}@keyframes toolbar--edgemenu-container-transition-out{from{overflow-y:hidden}to{overflow-y:hidden}}.toolbar-edge-toolbar{--toolbar-button-height: min(20vh, 48px);--toolbar-button-size: var(--toolbar-button-height);--label-hover-offset-size: calc(14px + var(--toolbar-button-height));box-sizing:border-box;flex-direction:row;justify-content:space-around;--button-label-hover-offset-y: var(--label-hover-offset-size);--button-label-hover-offset-x: 0}@media screen and (min-width: 540px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw;flex-grow:0;flex-shrink:0}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline{font-size:.9em}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button{width:var(--toolbar-button-size)}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button.has-long-press-or-hover>label{opacity:.8}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:focus-visible>label,.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}}@media screen and (max-width: 700px)and (prefers-reduced-motion: reduce){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{transition:none}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon.toolbar-icon{margin-left:0;margin-right:0}}.toolbar-edge-toolbar>div.toolbar-element{flex-direction:row;display:flex;flex-grow:1;justify-content:center;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);--extra-left-right-padding: 0px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar{width:3px;height:3px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar-thumb{background-color:var(--shadow-color)}.toolbar-edge-toolbar>div.toolbar-element.toolbar-tool-row{overflow-x:auto;overflow-y:hidden;flex-grow:100}.toolbar-edge-toolbar>div.toolbar-element.toolbar-action-row{z-index:2;background-color:var(--background-color-3);color:var(--foreground-color-3);--icon-color: var(--foreground-color-3)}.toolbar-edge-toolbar>div.toolbar-element.has-scroll{justify-content:start;position:relative;--button-label-hover-offset-y: 0;--button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size))}.toolbar-edge-toolbar>div.toolbar-element.has-scroll>:nth-child(1){--button-label-hover-offset-x: var(--label-hover-offset-size)}.toolbar-edge-toolbar .toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-edge-toolbar .toolbar-button{box-sizing:border-box;background-color:rgba(0,0,0,0)}.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon{flex-shrink:.01;height:12px}.toolbar-edge-toolbar .toolbar-toolContainer{order:1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline{flex-grow:1;display:flex;--button-flex-direction: row}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left{justify-content:end;--button-flex-direction: row-reverse;order:100}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left>.toolbar-button>.toolbar-icon{margin-left:7px;margin-right:0}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right{order:-1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button{width:auto;flex-direction:var(--button-flex-direction)}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon{height:100%;margin-right:7px;margin-left:0;width:22px}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button{width:calc(var(--toolbar-button-size) + var(--extra-left-right-padding));height:var(--toolbar-button-size)}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.has-long-press-or-hover>label{opacity:.8}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible>label,.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{transition:none}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline).dropdownVisible>.toolbar-button>label{opacity:.8;animation:1.5s ease rehide-label .3s,1s ease keep-label-hidden 1.8s infinite}.toolbar-edge-toolbar>div>.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:block;visibility:hidden}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button{margin:0;border-radius:0;padding:8px;box-shadow:none}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button.has-dropdown{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:0px}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container{height:0;background-color:rgba(0,0,0,0);opacity:.9}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu{position:absolute}.toolbar-edgemenu-container{background-color:var(--background-color-transparent);transition:.15s ease-in-out height,.15s ease-in-out background-color,.2s ease-in-out opacity;position:absolute;width:var(--editor-current-width-px);height:var(--editor-current-height-px);box-sizing:border-box;display:flex;flex-direction:column-reverse;align-items:center;z-index:2}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container{transition:.15s ease-in-out background-color,.2s ease-in-out opacity}}.toolbar-edgemenu-container.dropdown-below-edge{overflow-y:hidden}.toolbar-edgemenu-container button{font-size:1.2em;box-shadow:none;border:none;padding:10px;color:var(--foreground-color-1);transition:.2s ease box-shadow;font-weight:bold;color:var(--primary-action-foreground-color)}.toolbar-edgemenu-container button:hover{box-shadow:0 1px 2px var(--shadow-color)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button{--button-label-hover-offset-y: var(--button-size)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label>.button-label-text,.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label>.button-label-text{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button.has-long-press-or-hover>label>.button-label-text{opacity:.8}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible>label>.button-label-text,.toolbar-edgemenu-container .toolbar-grid-selector .choice-button.focus-visible>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible)>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{transition:none}}.toolbar-edgemenu-container .toolbar-help-overlay-button{align-items:last baseline}.toolbar-edgemenu-container .toolbar-edgemenu{--toolbar-button-height: 48px;touch-action:none;user-select:none;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);box-shadow:0px 0px 1px var(--shadow-color);padding-left:10px;padding-right:10px;width:min(400px,100vw);box-sizing:border-box;border-top-left-radius:30px;border-top-right-radius:30px;transition:transform .1s ease,padding-bottom .1s ease}.toolbar-edgemenu-container .toolbar-edgemenu input,.toolbar-edgemenu-container .toolbar-edgemenu textarea{user-select:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:inline-block}.toolbar-edgemenu-container .toolbar-edgemenu button{background-color:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem{height:40px;display:block;cursor:ns-resize;position:relative;margin-top:-15px;margin-bottom:10px;width:100%;border:none;box-shadow:none;background:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem::before{content:"";background-color:var(--icon-color);opacity:.2;display:block;position:relative;top:10px;height:5px;border-radius:5px;width:min(80%,40px);margin-left:auto;margin-right:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:block}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button{flex-direction:row;max-width:unset;width:100%;box-sizing:border-box;justify-content:flex-start;box-shadow:none;padding:2px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>.toolbar-icon{width:25px;height:25px;padding:13px;margin-right:15px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label,.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>label.long-label{font-size:1em}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list{padding-left:10px;padding-right:10px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList{box-sizing:border-box;--align-items-to-x: 105px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div{display:flex;align-items:center;margin-top:5px;min-height:35px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div:first-child{margin-top:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>label{padding-right:35px;min-width:var(--align-items-to-x);flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px;margin-left:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input:not([type=checkbox]){flex-grow:1;min-width:48px;flex-shrink:1}.toolbar-dropdown-toolbar button,.toolbar-dropdown-toolbar .toolbar-button{background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2)}.toolbar-dropdown-toolbar,.toolbar-dropdown-toolbar .toolbar-dropdown{background-color:var(--background-color-3);color:var(--foreground-color-3)}.toolbar-dropdown-toolbar .toolbar-spacedList>div>label{padding-right:10px;min-width:50px}.toolbar-dropdown-toolbar .clr-field button{width:100%;height:100%;top:50%;left:0;border-radius:5px}.toolbar-dropdown-toolbar .toolbar-grid-selector>div{--button-size: 57px}.toolbar-dropdown-toolbar .toolbar-dropdown>div>.toolbar-toolContainer{display:inline-block}.toolbar-help-overlay{width:100%;height:100%;max-width:none;max-height:none;border:none;margin:0;padding:0;z-index:5;touch-action:none;overflow:hidden;color:#fff;--icon-color: white;background-color:rgba(0,0,0,0);display:flex;flex-direction:column;transition:.3s ease transform}.toolbar-help-overlay::backdrop{background-color:rgba(0,0,0,.8);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}.toolbar-help-overlay,.toolbar-help-overlay::backdrop{animation:.25s ease transition-in}@keyframes transition-in{0%{opacity:0}100%{opacity:1}}@keyframes transition-out{0%{opacity:1}100%{opacity:0}}.toolbar-help-overlay.-hiding,.toolbar-help-overlay.-hiding::backdrop{animation:.25s ease transition-out;opacity:0}.toolbar-help-overlay.-dragging{transition:none}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay{transition:none}}@media screen and (min-width: 800px){.toolbar-help-overlay>.navigation-buttons{order:1;margin-top:auto}}.toolbar-help-overlay .with-text-shadow,.toolbar-help-overlay .help-page-container>.label,.toolbar-help-overlay button{text-shadow:0 0 3px rgba(20,20,20,.9);filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5))}.toolbar-help-overlay button:not(:disabled){cursor:pointer}.toolbar-help-overlay button{background:rgba(0,0,0,0);border:none;color:var(--help-overlay-foreground);border-radius:15px}.toolbar-help-overlay .close-button{align-self:flex-start;width:48px;height:48px;z-index:1}.toolbar-help-overlay .close-button>svg{width:100%}.toolbar-help-overlay .navigation-content{flex-grow:1;display:flex}.toolbar-help-overlay .help-page-container{display:flex;align-items:center;flex-grow:1;touch-action:none}.toolbar-help-overlay .help-page-container>.label{flex-grow:1;text-align:center;font-size:18.5pt;margin-left:15px;margin-right:15px;margin-top:0px;z-index:1;transition:.5s ease margin-top}.toolbar-help-overlay .help-page-container>.label.-large-space-below{margin-top:0;margin-bottom:auto}.toolbar-help-overlay .help-page-container>.label.-small-space-above{margin-top:40px;margin-bottom:auto}.toolbar-help-overlay .help-page-container>.label.-large-space-above{margin-top:auto;margin-bottom:10px}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .help-page-container>.label{transition:none}}.toolbar-help-overlay .help-page-container>.cloned-element-container{position:absolute;z-index:0;user-select:none;-webkit-user-select:none;border-radius:10px;opacity:.01;background-color:rgba(100,100,100,.01);box-shadow:none;transition:.5s ease opacity,.5s ease background-color}.toolbar-help-overlay .help-page-container>.cloned-element-container *{pointer-events:none !important}.toolbar-help-overlay .help-page-container>.cloned-element-container>*{margin:0;opacity:.01 !important;transition:.3s ease opacity !important}.toolbar-help-overlay .help-page-container>.cloned-element-container:not(.-clickable) *{cursor:unset !important}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable,.toolbar-help-overlay .help-page-container>.cloned-element-container.-background{z-index:1;touch-action:none}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable{cursor:pointer;z-index:2}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable.has-long-press-or-hover{opacity:.5 !important}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable.has-long-press-or-hover,.toolbar-help-overlay .help-page-container>.cloned-element-container.-active{background-color:var(--background-color-1)}.toolbar-help-overlay .help-page-container>.cloned-element-container.-active{opacity:1;background-color:var(--background-color-1);box-shadow:0 0 3px rgba(100,100,100,.5)}.toolbar-help-overlay .help-page-container>.cloned-element-container.-active>*{opacity:1 !important}.toolbar-help-overlay .navigation-buttons{display:flex;flex-direction:row;justify-content:space-between;direction:ltr}.toolbar-help-overlay .navigation-buttons>button:disabled{opacity:.5}.toolbar-help-overlay .navigation-buttons>.next,.toolbar-help-overlay .navigation-buttons>.previous{font-size:1em;padding:10px;transition:.2s ease font-size;z-index:3}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .navigation-buttons>.next,.toolbar-help-overlay .navigation-buttons>.previous{transition:none}}.toolbar-help-overlay .navigation-buttons:not(.-has-previous)>.next:not(:disabled){animation:.5s ease highlight-button .5s}@keyframes highlight-button{0%{transform:scale(1)}50%{transform:scale(1.2)}55%{transform:scale(1.2) rotate(2deg)}65%{transform:scale(1.2) rotate(-2deg)}100%{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .navigation-buttons:not(.-has-previous)>.next:not(:disabled){animation:none}}.toolbar-help-overlay .navigation-buttons>.next::after{content:"❯";margin-left:3px}.toolbar-help-overlay .navigation-buttons>.previous::before{content:"❮";margin-right:3px}.toolbar-help-overlay .navigation-buttons.-has-next>.next{font-size:1.4em}.toolbar-help-overlay .navigation-buttons.-has-previous>.previous{font-size:1.4em}.toolbar-help-overlay .navigation-buttons.-highlight-next>.next,.toolbar-help-overlay .navigation-buttons.-highlight-previous>.previous{font-weight:bold;background-color:rgba(200,200,200,.1);font-size:1.4em}.toolbar-help-overlay .navigation-help{margin-top:1em;font-size:.7em}.toolbar-element .toolbar-help-overlay-button{height:0;position:relative;display:flex;justify-content:end}.toolbar-element .toolbar-help-overlay-button>.button{margin:0;padding:5px;padding-top:0;padding-bottom:0;box-shadow:none;text-align:center;opacity:.5}.toolbar-element .toolbar-help-overlay-button>.button>.icon{width:1.18em;height:1.18em;transition:.2s ease filter}.toolbar-element .toolbar-help-overlay-button>.button:focus-visible>.icon,.toolbar-element .toolbar-help-overlay-button>.button:hover>.icon{filter:drop-shadow(0px 0px 1px var(--shadow-color))}.ScrollbarTool-overlay{width:0;height:0;overflow:visible;opacity:.2;pointer-events:none;--fade-out-animation: 1s ease 0s fade-out;--scrollbar-size: 3px}@media(prefers-reduced-motion: reduce){.ScrollbarTool-overlay{--fade-out-animation: none !important}}@keyframes fade-out{from{opacity:.2}to{opacity:0}}.ScrollbarTool-overlay:not(.just-updated){animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay .vertical-scrollbar,.ScrollbarTool-overlay .horizontal-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size);min-width:var(--scrollbar-size);min-height:var(--scrollbar-size);background-color:var(--foreground-color-1);border-radius:var(--scrollbar-size);position:absolute}.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll{animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar{margin-left:calc(var(--editor-current-display-width-px) - var(--scrollbar-size))}.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar{margin-top:calc(var(--editor-current-display-height-px) - var(--scrollbar-size))}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible}.selection-tool-handle{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;--max-size: 17px}.selection-tool-handle .selection-tool-content{border:1px solid var(--foreground-color-1);background:var(--background-color-1);box-sizing:border-box;max-width:var(--max-size);max-height:var(--max-size);width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:3px}.selection-tool-handle .selection-tool-content .icon{width:100%;height:100%}.selection-tool-handle.selection-tool-circle .selection-tool-content{border-radius:100%}.selection-tool-handle.selection-tool-rotate{--max-size: 28px;cursor:grab}.selection-tool-handle.selection-tool-resize-x{cursor:ew-resize}.selection-tool-handle.selection-tool-resize-y{cursor:ns-resize}.selection-tool-handle.selection-tool-resize-xy{cursor:nwse-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x{cursor:ns-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y{cursor:ew-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy{cursor:nesw-resize}.overlay.handleOverlay{touch-action:none;direction:ltr}.overlay.handleOverlay,.overlay.handleOverlay .selection-tool-selection-outer-container{height:0;overflow:visible}.overlay.handleOverlay .selection-tool-selection-inner-container{width:var(--editor-current-display-width-px);height:var(--editor-current-display-height-px);overflow:hidden;pointer-events:none}.overlay.handleOverlay .selection-tool-selection-inner-container>*{pointer-events:all}@keyframes selection-duplicated-animation{0%{scale:1 1}50%{scale:1.02 1.02}100%{scale:1 1}}@media(prefers-reduced-motion: reduce){@keyframes selection-duplicated-animation{}}.find-tool-overlay{order:-1;position:absolute}.js-draw-sound-ui-toggle{width:0px;height:0px;overflow:hidden}.js-draw-sound-ui-toggle button{margin-top:1px}.js-draw-sound-ui-toggle:focus-within,.js-draw-sound-ui-toggle.sound-ui-tool-enabled{overflow:visible;z-index:5}.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled{opacity:.5}.about-dialog-container dialog{display:flex;flex-direction:column}.about-dialog-container dialog .close-button{display:block;margin-left:auto;margin-right:auto}.about-dialog-container dialog .about-entry-container{flex-grow:1;flex-shrink:1;overflow-y:auto;margin-left:20px;margin-right:20px;padding-bottom:20px;white-space:pre-wrap;font-family:monospace}.about-dialog-container dialog .about-entry-container>h2,.about-dialog-container dialog .about-entry-container>details>summary{cursor:pointer;margin-top:15px;font-size:1.2em;font-weight:bold}.about-dialog-container dialog .about-entry-container>h2 a,.about-dialog-container dialog .about-entry-container>details>summary a{color:var(--foreground-color-1);text-decoration:underline}.dialog-container.dialog-container{background-color:var(--background-color-transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);position:absolute;z-index:3;width:var(--editor-current-width-px);height:var(--editor-current-height-px);display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}.dialog-container.dialog-container dialog{background-color:var(--background-color-1);color:var(--foreground-color-1);border:none;outline:none;box-shadow:0 0 2px var(--shadow-color);border-radius:8px;max-height:90vh;width:min(100%,500px);box-sizing:border-box}#clr-picker{--clr-slider-size: 30px}#clr-picker #clr-color-area,#clr-picker .clr_hue{touch-action:none}#clr-picker .clr-alpha{margin-top:15px;margin-bottom:15px}#clr-picker.clr-picker input[type=range]::-moz-range-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track{height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-moz-range-track{height:var(--clr-slider-size)}.imageEditorContainer{--background-color-1: white;--foreground-color-1: black;--background-color-2: #f5f5f5;--foreground-color-2: #2c303a;--background-color-3: #e5e5e5;--foreground-color-3: #1c202a;--selection-background-color: #cbdaf1;--selection-foreground-color: #2c303a;--background-color-transparent: rgba(105, 100, 100, 0.5);--shadow-color: rgba(0, 0, 0, 0.5);--primary-action-foreground-color: #15b}@media(prefers-color-scheme: dark){.imageEditorContainer{--background-color-1: #151515;--foreground-color-1: white;--background-color-2: #222;--foreground-color-2: #efefef;--background-color-3: #272627;--foreground-color-3: #eee;--selection-background-color: #607;--selection-foreground-color: white;--shadow-color: rgba(250, 250, 250, 0.5);--background-color-transparent: rgba(50, 50, 50, 0.5);--primary-action-foreground-color: #7ae}}.imageEditorContainer{--icon-color: var(--foreground-color-1)}.imageEditorContainer{color:var(--foreground-color-1);font-family:system-ui,-apple-system,sans-serif;background-color:var(--background-color-1);width:100%;height:400px;min-height:220px;min-width:100px;writing-mode:horizontal-tb;box-sizing:border-box;display:flex;flex-direction:column-reverse}.imageEditorContainer input{accent-color:var(--primary-action-foreground-color)}.imageEditorContainer .imageEditorRenderArea{display:grid;grid-template-columns:1fr;flex-grow:2;flex-shrink:1;min-height:100px;min-width:0;width:100%;height:100%}.imageEditorContainer .imageEditorRenderArea canvas{grid-row:1/1;grid-column:1/1;touch-action:none;box-sizing:border-box;width:100%;height:100%;min-width:0;max-width:inherit;min-height:0px;max-height:inherit}.imageEditorContainer .loadingMessage{position:fixed;text-align:center;font-size:2em;text-shadow:0px 0px 1px var(--background-color-1);bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.imageEditorContainer .textRendererOutputContainer{width:.001px;height:.001px;overflow:hidden}.imageEditorContainer .textRendererOutputContainer:focus-within{overflow:visible;z-index:5}@media print{.imageEditorContainer .loadingMessage{display:none}.imageEditorContainer .imageEditorRenderArea canvas{width:100%;height:initial}}',""]);const l=i},609:o=>{o.exports=function(o){var e=[];return e.toString=function(){return this.map((function(e){var n="",t=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),t&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=o(e),t&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(o,n,t,r,a){"string"==typeof o&&(o=[[null,o,void 0]]);var i={};if(t)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(i[d]=!0)}for(var c=0;c<o.length;c++){var b=[].concat(o[c]);t&&i[b[0]]||(void 0!==a&&(void 0===b[5]||(b[1]="@layer".concat(b[5].length>0?" ".concat(b[5]):""," {").concat(b[1],"}")),b[5]=a),n&&(b[2]?(b[1]="@media ".concat(b[2]," {").concat(b[1],"}"),b[2]=n):b[2]=n),r&&(b[4]?(b[1]="@supports (".concat(b[4],") {").concat(b[1],"}"),b[4]=r):b[4]="".concat(r)),e.push(b))}},e}},601:o=>{o.exports=function(o){return o[1]}},62:o=>{var e=[];function n(o){for(var n=-1,t=0;t<e.length;t++)if(e[t].identifier===o){n=t;break}return n}function t(o,t){for(var a={},i=[],l=0;l<o.length;l++){var d=o[l],c=t.base?d[0]+t.base:d[0],b=a[c]||0,p="".concat(c," ").concat(b);a[c]=b+1;var s=n(p),g={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==s)e[s].references++,e[s].updater(g);else{var u=r(g,t);t.byIndex=l,e.splice(l,0,{identifier:p,updater:u,references:1})}i.push(p)}return i}function r(o,e){var n=e.domAPI(e);n.update(o);return function(e){if(e){if(e.css===o.css&&e.media===o.media&&e.sourceMap===o.sourceMap&&e.supports===o.supports&&e.layer===o.layer)return;n.update(o=e)}else n.remove()}}o.exports=function(o,r){var a=t(o=o||[],r=r||{});return function(o){o=o||[];for(var i=0;i<a.length;i++){var l=n(a[i]);e[l].references--}for(var d=t(o,r),c=0;c<a.length;c++){var b=n(a[c]);0===e[b].references&&(e[b].updater(),e.splice(b,1))}a=d}}},793:o=>{var e={};o.exports=function(o,n){var t=function(o){if(void 0===e[o]){var n=document.querySelector(o);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(o){n=null}e[o]=n}return e[o]}(o);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(n)}},173:o=>{o.exports=function(o){var e=document.createElement("style");return o.setAttributes(e,o.attributes),o.insert(e,o.options),e}},892:(o,e,n)=>{o.exports=function(o){var e=n.nc;e&&o.setAttribute("nonce",e)}},36:o=>{o.exports=function(o){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=o.insertStyleElement(o);return{update:function(n){!function(o,e,n){var t="";n.supports&&(t+="@supports (".concat(n.supports,") {")),n.media&&(t+="@media ".concat(n.media," {"));var r=void 0!==n.layer;r&&(t+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),t+=n.css,r&&(t+="}"),n.media&&(t+="}"),n.supports&&(t+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(t,o,e.options)}(e,o,n)},remove:function(){!function(o){if(null===o.parentNode)return!1;o.parentNode.removeChild(o)}(e)}}}},464:o=>{o.exports=function(o,e){if(e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}}},e={};function n(t){var r=e[t];if(void 0!==r)return r.exports;var a=e[t]={id:t,exports:{}};return o[t](a,a.exports,n),a.exports}n.n=o=>{var e=o&&o.__esModule?()=>o.default:()=>o;return n.d(e,{a:e}),e},n.d=(o,e)=>{for(var t in e)n.o(e,t)&&!n.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},n.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),n.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},n.nc=void 0;var t={};(()=>{n.r(t);var o=n(62),e=n.n(o),r=n(36),a=n.n(r),i=n(793),l=n.n(i),d=n(892),c=n.n(d),b=n(173),p=n.n(b),s=n(464),g=n.n(s),u=n(245),h={};h.styleTagTransform=g(),h.setAttributes=c(),h.insert=l().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=p();e()(u.Z,h);u.Z&&u.Z.locals&&u.Z.locals;var m=n(489),x={};x.styleTagTransform=g(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=a(),x.insertStyleElement=p();e()(m.Z,x);m.Z&&m.Z.locals&&m.Z.locals})(),window.jsdrawStyles=t})();
1
+ (()=>{"use strict";var o={489:(o,e,n)=>{n.d(e,{Z:()=>l});var t=n(601),r=n.n(t),a=n(609),i=n.n(a)()(r());i.push([o.id,'.clr-picker {\n display: none;\n flex-wrap: wrap;\n position: absolute;\n width: 200px;\n z-index: 1000;\n border-radius: 10px;\n background-color: #fff;\n justify-content: flex-end;\n direction: ltr;\n box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\n -moz-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.clr-picker.clr-open,\n.clr-picker[data-inline="true"] {\n display: flex;\n}\n\n.clr-picker[data-inline="true"] {\n position: relative;\n}\n\n.clr-gradient {\n position: relative;\n width: 100%;\n height: 100px;\n margin-bottom: 15px;\n border-radius: 3px 3px 0 0;\n background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\n cursor: pointer;\n}\n\n.clr-marker {\n position: absolute;\n width: 12px;\n height: 12px;\n margin: -6px 0 0 -6px;\n border: 1px solid #fff;\n border-radius: 50%;\n background-color: currentColor;\n cursor: pointer;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n width: 100%;\n height: 16px;\n}\n\n.clr-picker input[type="range"]::-webkit-slider-thumb {\n width: 16px;\n height: 16px;\n -webkit-appearance: none;\n}\n\n.clr-picker input[type="range"]::-moz-range-track {\n width: 100%;\n height: 16px;\n border: 0;\n}\n\n.clr-picker input[type="range"]::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border: 0;\n}\n\n.clr-hue {\n background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\n}\n\n.clr-hue,\n.clr-alpha {\n position: relative;\n width: calc(100% - 40px);\n height: 8px;\n margin: 5px 20px;\n border-radius: 4px;\n}\n\n.clr-alpha span {\n display: block;\n height: 100%;\n width: 100%;\n border-radius: inherit;\n background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\n}\n\n.clr-hue input,\n.clr-alpha input {\n position: absolute;\n width: calc(100% + 32px);\n height: 16px;\n left: -16px;\n top: -4px;\n margin: 0;\n background-color: transparent;\n opacity: 0;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n}\n\n.clr-hue div,\n.clr-alpha div {\n position: absolute;\n width: 16px;\n height: 16px;\n left: 0;\n top: 50%;\n margin-left: -8px;\n transform: translateY(-50%);\n border: 2px solid #fff;\n border-radius: 50%;\n background-color: currentColor;\n box-shadow: 0 0 1px #888;\n pointer-events: none;\n}\n\n.clr-alpha div:before {\n content: \'\';\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n border-radius: 50%;\n background-color: currentColor;\n}\n\n.clr-format {\n display: none;\n order: 1;\n width: calc(100% - 40px);\n margin: 0 20px 20px;\n}\n\n.clr-segmented {\n display: flex;\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n border: 1px solid #ddd;\n border-radius: 15px;\n box-sizing: border-box;\n color: #999;\n font-size: 12px;\n}\n\n.clr-segmented input,\n.clr-segmented legend {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n left: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n.clr-segmented label {\n flex-grow: 1;\n margin: 0;\n padding: 4px 0;\n font-size: inherit;\n font-weight: normal;\n line-height: initial;\n text-align: center;\n cursor: pointer;\n}\n\n.clr-segmented label:first-of-type {\n border-radius: 10px 0 0 10px;\n}\n\n.clr-segmented label:last-of-type {\n border-radius: 0 10px 10px 0;\n}\n\n.clr-segmented input:checked + label {\n color: #fff;\n background-color: #666;\n}\n\n.clr-swatches {\n order: 2;\n width: calc(100% - 32px);\n margin: 0 16px;\n}\n\n.clr-swatches div {\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 12px;\n justify-content: center;\n}\n\n.clr-swatches button {\n position: relative;\n width: 20px;\n height: 20px;\n margin: 0 4px 6px 4px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n color: inherit;\n text-indent: -1000px;\n white-space: nowrap;\n overflow: hidden;\n cursor: pointer;\n}\n\n.clr-swatches button:after {\n content: \'\';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n border-radius: inherit;\n background-color: currentColor;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\ninput.clr-color {\n order: 1;\n width: calc(100% - 80px);\n height: 32px;\n margin: 15px 20px 20px auto;\n padding: 0 10px;\n border: 1px solid #ddd;\n border-radius: 16px;\n color: #444;\n background-color: #fff;\n font-family: sans-serif;\n font-size: 14px;\n text-align: center;\n box-shadow: none;\n}\n\ninput.clr-color:focus {\n outline: none;\n border: 1px solid #1e90ff;\n}\n\n.clr-close,\n.clr-clear {\n display: none;\n order: 2;\n height: 24px;\n margin: 0 20px 20px;\n padding: 0 20px;\n border: 0;\n border-radius: 12px;\n color: #fff;\n background-color: #666;\n font-family: inherit;\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n}\n\n.clr-close {\n display: block;\n margin: 0 20px 20px auto;\n}\n\n.clr-preview {\n position: relative;\n width: 32px;\n height: 32px;\n margin: 15px 0 20px 20px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.clr-preview:before,\n.clr-preview:after {\n content: \'\';\n position: absolute;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n border: 1px solid #fff;\n border-radius: 50%;\n}\n\n.clr-preview:after {\n border: 0;\n background-color: currentColor;\n box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\n}\n\n.clr-preview button {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 50%;\n outline-offset: -2px;\n background-color: transparent;\n text-indent: -9999px;\n cursor: pointer;\n overflow: hidden;\n}\n\n.clr-marker,\n.clr-hue div,\n.clr-alpha div,\n.clr-color {\n box-sizing: border-box;\n}\n\n.clr-field {\n display: inline-block;\n position: relative;\n color: transparent;\n}\n\n.clr-field input {\n margin: 0;\n direction: ltr;\n}\n\n.clr-field.clr-rtl input {\n text-align: right;\n}\n\n.clr-field button {\n position: absolute;\n width: 30px;\n height: 100%;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n padding: 0;\n border: 0;\n color: inherit;\n text-indent: -1000px;\n white-space: nowrap;\n overflow: hidden;\n pointer-events: none;\n}\n\n.clr-field.clr-rtl button {\n right: auto;\n left: 0;\n}\n\n.clr-field button:after {\n content: \'\';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n border-radius: inherit;\n background-color: currentColor;\n box-shadow: inset 0 0 1px rgba(0,0,0,.5);\n}\n\n.clr-alpha,\n.clr-alpha div,\n.clr-swatches button,\n.clr-preview:before,\n.clr-field button {\n background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\n background-position: 0 0, 4px 4px;\n background-size: 8px 8px;\n}\n\n.clr-marker:focus {\n outline: none;\n}\n\n.clr-keyboard-nav .clr-marker:focus,\n.clr-keyboard-nav .clr-hue input:focus + div,\n.clr-keyboard-nav .clr-alpha input:focus + div,\n.clr-keyboard-nav .clr-segmented input:focus + label {\n outline: none;\n box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\n}\n\n.clr-picker[data-alpha="false"] .clr-alpha {\n display: none;\n}\n\n.clr-picker[data-minimal="true"] {\n padding-top: 16px;\n}\n\n.clr-picker[data-minimal="true"] .clr-gradient,\n.clr-picker[data-minimal="true"] .clr-hue,\n.clr-picker[data-minimal="true"] .clr-alpha,\n.clr-picker[data-minimal="true"] .clr-color,\n.clr-picker[data-minimal="true"] .clr-preview {\n display: none;\n}\n\n/** Dark theme **/\n\n.clr-dark {\n background-color: #444;\n}\n\n.clr-dark .clr-segmented {\n border-color: #777;\n}\n\n.clr-dark .clr-swatches button:after {\n box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\n}\n\n.clr-dark input.clr-color {\n color: #fff;\n border-color: #777;\n background-color: #555;\n}\n\n.clr-dark input.clr-color:focus {\n border-color: #1e90ff;\n}\n\n.clr-dark .clr-preview:after {\n box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\n}\n\n.clr-dark .clr-alpha,\n.clr-dark .clr-alpha div,\n.clr-dark .clr-swatches button,\n.clr-dark .clr-preview:before {\n background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);\n}\n\n/** Polaroid theme **/\n\n.clr-picker.clr-polaroid {\n border-radius: 6px;\n box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\n}\n\n.clr-picker.clr-polaroid:before {\n content: \'\';\n display: block;\n position: absolute;\n width: 16px;\n height: 10px;\n left: 20px;\n top: -10px;\n border: solid transparent;\n border-width: 0 8px 10px 8px;\n border-bottom-color: currentColor;\n box-sizing: border-box;\n color: #fff;\n filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\n pointer-events: none;\n}\n\n.clr-picker.clr-polaroid.clr-dark:before {\n color: #444;\n}\n\n.clr-picker.clr-polaroid.clr-left:before {\n left: auto;\n right: 20px;\n}\n\n.clr-picker.clr-polaroid.clr-top:before {\n top: auto;\n bottom: -10px;\n transform: rotateZ(180deg);\n}\n\n.clr-polaroid .clr-gradient {\n width: calc(100% - 20px);\n height: 120px;\n margin: 10px;\n border-radius: 3px;\n}\n\n.clr-polaroid .clr-hue,\n.clr-polaroid .clr-alpha {\n width: calc(100% - 30px);\n height: 10px;\n margin: 6px 15px;\n border-radius: 5px;\n}\n\n.clr-polaroid .clr-hue div,\n.clr-polaroid .clr-alpha div {\n box-shadow: 0 0 5px rgba(0,0,0,.2);\n}\n\n.clr-polaroid .clr-format {\n width: calc(100% - 20px);\n margin: 0 10px 15px;\n}\n\n.clr-polaroid .clr-swatches {\n width: calc(100% - 12px);\n margin: 0 6px;\n}\n.clr-polaroid .clr-swatches div {\n padding-bottom: 10px;\n}\n\n.clr-polaroid .clr-swatches button {\n width: 22px;\n height: 22px;\n}\n\n.clr-polaroid input.clr-color {\n width: calc(100% - 60px);\n margin: 10px 10px 15px auto;\n}\n\n.clr-polaroid .clr-clear {\n margin: 0 10px 15px 10px;\n}\n\n.clr-polaroid .clr-close {\n margin: 0 10px 15px auto;\n}\n\n.clr-polaroid .clr-preview {\n margin: 10px 0 15px 10px;\n}\n\n/** Large theme **/\n\n.clr-picker.clr-large {\n width: 275px;\n}\n\n.clr-large .clr-gradient {\n height: 150px;\n}\n\n.clr-large .clr-swatches button {\n width: 22px;\n height: 22px;\n}\n\n/** Pill (horizontal) theme **/\n\n.clr-picker.clr-pill {\n width: 380px;\n padding-left: 180px;\n box-sizing: border-box;\n}\n\n.clr-pill .clr-gradient {\n position: absolute;\n width: 180px;\n height: 100%;\n left: 0;\n top: 0;\n margin-bottom: 0;\n border-radius: 3px 0 0 3px;\n}\n\n.clr-pill .clr-hue {\n margin-top: 20px;\n}',""]);const l=i},245:(o,e,n)=>{n.d(e,{Z:()=>l});var t=n(601),r=n.n(t),a=n(609),i=n.n(a)()(r());i.push([o.id,':root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div>div{padding:5px}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content>div{min-height:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img{max-width:min(50vw,75%);max-height:min(300px,50vh);display:block;margin-left:auto;margin-right:auto}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .insert-image-image-status-view{display:flex;justify-content:space-between}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row{margin-top:4px;display:flex;flex-direction:row;justify-content:flex-end;padding-bottom:0;margin-bottom:0}:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row>button{flex-grow:1;text-align:end;max-width:50%;min-width:min(100%,40px)}.toolbar-overflow-widget-overflow-list{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.toolbar-overflow-widget-overflow-list>.toolbar-toolContainer>.toolbar-button{height:var(--toolbar-button-height)}.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list{flex-direction:row}.toolbar-overflow-widget.horizontal>.toolbar-dropdown{max-width:100%;left:15px;right:15px;margin-left:0 !important;translate:none !important;padding:4px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons{display:flex;justify-content:stretch;padding-top:0;padding-bottom:5px;direction:ltr}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>*{flex-grow:1;text-align:start;margin-inline-end:5px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>* .icon{margin:0;margin-inline-start:4px;margin-inline-end:10px}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>:nth-child(1){direction:ltr}:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons>:last-child{direction:rtl}.toolbar-zoomLevelEditor{display:flex;flex-direction:row;align-items:center}.toolbar-zoomLevelEditor .zoomDisplay{flex-grow:1}.toolbar-zoomLevelEditor button{min-width:48px}.selection-format-menu.disabled{opacity:.5}.toolbar-document-properties-widget button.about-button{width:100%;text-align:end}.toolbar-document-properties-widget>*{--align-items-to-x: 120px}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row{display:flex}.toolbar-document-properties-widget .js-draw-size-input-row.js-draw-size-input-row.size-input-row--automatic-size{display:none}.toolbar-thicknessSliderContainer{display:flex;flex-direction:row}.toolbar-thicknessSliderContainer input{flex-grow:1}.toolbar-element .clr-field *{cursor:pointer}.toolbar-element .clr-field button{width:1.2em;height:1.2em;top:50%;left:0;border-radius:50%;margin-left:0;margin-right:0}.toolbar-element .clr-field input{opacity:0}.color-input-container{display:inline-flex;flex-direction:row}.color-input-container .coloris_input{height:calc(100% - 6px)}.color-input-container.picker-open .clr-field{pointer-events:none}:root .color-input-container>button.pipetteButton{width:30px;height:30px;padding:0;display:inline-flex}.color-input-container>.color-input-wrapper{display:flex;justify-content:stretch}.color-input-container .pipetteButton>svg{width:100%}.color-input-container .pipetteButton .pickColorInstructions{display:none;font-size:1em;position:absolute;margin-left:30px;background-color:var(--background-color-1);border-radius:30px;padding:4px;opacity:0;transition:.2s ease opacity}@media(prefers-reduced-motion: reduce){.color-input-container .pipetteButton .pickColorInstructions{transition:none}}.color-input-container .pipetteButton.active{background-color:var(--selection-background-color);--icon-color: var(--selection-foreground-color)}.color-input-container .pipetteButton.active .pickColorInstructions{display:block;opacity:.8}.tool-dropdown-separator{--border-color: rgba(100, 100, 100, 0.2);--border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);border-top:1px solid var(--border-color);padding-left:2px;margin-top:10px;margin-bottom:10px}.toolbar-element .toolbar--file-input-container{display:flex}.toolbar-element .toolbar--file-input-container>input[type=file]{opacity:0;width:0;min-width:0 !important;max-width:0;height:0}.toolbar-element .toolbar--file-input-container>label{display:block;flex-grow:1;padding:0 !important;padding-bottom:5px;--active-border-color: rgba(100, 100, 100, 0.5);--active-border-color: color-mix( in srgb, var(--foreground-color-1), transparent )}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description{background-color:var(--background-color-3);color:var(--foreground-color-3);border:1px dashed var(--active-border-color);padding:10px;margin-top:10px;display:flex;flex-direction:column;align-items:center;text-align:center;--action-color: var(--primary-action-foreground-color);--icon-color: var(--action-color)}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span{white-space:pre-wrap}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>span>b{color:var(--action-color);cursor:pointer}.toolbar-element .toolbar--file-input-container>label>.toolbar--file-input-description>.icon{width:min(50vw,42px);height:min(50vw,42px);margin-bottom:8px;display:block}.toolbar-element .toolbar--file-input-container>label:active,.toolbar-element .toolbar--file-input-container>label:hover,.toolbar-element .toolbar--file-input-container>label.drag-target{--active-border-color: var(--foreground-color-1)}.toolbar-element .toolbar--file-input-container>label.drag-target>.toolbar--file-input-description{border-width:2px}.toolbar-grid-selector{position:relative}.toolbar-grid-selector>div{display:flex;flex-direction:row;max-width:350px;flex-wrap:wrap;--button-size: 48px}.toolbar-grid-selector .choice-button{display:flex;flex-direction:column-reverse;box-sizing:border-box;cursor:pointer;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button.focus-visible{outline:2px solid var(--foreground-color-1)}.toolbar-grid-selector .choice-button input{opacity:0;height:0}.toolbar-grid-selector .choice-button label{display:flex;flex-direction:column;box-sizing:border-box;width:var(--button-size);height:var(--button-size);font-size:.7rem;align-items:center;justify-content:center;padding:4px;user-select:none;-webkit-user-select:none}.toolbar-grid-selector .choice-button .icon{flex-grow:1;flex-shrink:1;width:100%}.toolbar-grid-selector .choice-button.checked{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-root{background-color:var(--background-color-1);--icon-color: var(--foreground-color-1);--toolbar-button-height: min(20vh, 60px);flex-wrap:wrap;box-sizing:border-box;width:100%;display:flex;flex-direction:row;justify-content:center}.toolbar-element{z-index:1;font-family:system-ui,-apple-system,sans-serif}.toolbar-element details>summary{cursor:pointer}.toolbar-element>.toolbar-toolContainer>.toolbar-button,.toolbar-element>.toolbar-toolContainer>*>button,.toolbar-element>.toolbar-buttonGroup>button,.toolbar-element>.toolbar-button{white-space:pre;height:var(--toolbar-button-height)}.toolbar-dropdown .toolbar-button>.toolbar-icon{max-width:50px;width:100%}.toolbar-button.disabled{filter:sepia(0.2);opacity:.45;cursor:unset}.toolbar-button,.toolbar-element button{cursor:pointer;text-align:center;border-radius:6px;border:none;box-shadow:0px 0px 2px var(--shadow-color);user-select:none;-webkit-user-select:none;transition:background-color .15s ease,box-shadow .25s ease,opacity .2s ease}.toolbar-button,.toolbar-buttonGroup>button,.toolbar-toolContainer>*>button,.toolbar-root>button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-left:3px;padding-right:3px;min-width:40px;max-width:105px;width:min-content;font-size:1em}.toolbar-button>label{cursor:inherit;user-select:none;-webkit-user-select:none}.toolbar-root>.toolbar-toolContainer>.toolbar-button>label.long-label{font-size:.75em}.toolbar-dropdown>.toolbar-toolContainer>button,.toolbar-dropdown>.toolbar-toolContainer>.toolbar-button{width:6em}.toolbar-button:not(.disabled):hover,.toolbar-root button:not(:disabled):hover{box-shadow:0px 2px 4px var(--shadow-color)}.toolbar-root button:disabled{cursor:inherit;opacity:.5}.toolbar-root .toolbar-icon{flex-shrink:1;user-select:none;width:100%;min-width:20px;min-height:20px}.toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{height:15px;transition:transform .25s ease}.toolbar-toolContainer.dropdownVisible>.toolbar-button>.toolbar-showHideDropdownIcon{transform:rotate(180deg)}.toolbar-dropdown.hidden,.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-dropdown:not(.hiding){display:none}.toolbar-dropdown{position:absolute;padding:15px;padding-top:5px;display:flex;flex-wrap:wrap;flex-direction:column;max-height:80vh;max-width:fit-content;z-index:2;background-color:var(--background-color-1);box-shadow:0px 3px 3px var(--shadow-color)}@keyframes dropdown-transition-in{0%{opacity:0;transform:scale(1, 0)}100%{opacity:1;transform:scale(1, 1)}}@keyframes dropdown-transition-out{0%{opacity:1;transform:scale(1, 1)}100%{opacity:0;transform:scale(1, 0)}}.toolbar-dropdown{transform-origin:top left;--dropdown-show-animation: dropdown-transition-in;--dropdown-hide-animation: dropdown-transition-out}@media(prefers-reduced-motion: reduce){.toolbar-dropdown{--dropdown-show-animation: none;--dropdown-hide-animation: none}.toolbar-dropdown.hiding{display:none}.toolbar-toolContainer>.toolbar-button>.toolbar-showHideDropdownIcon{transition:none}:root .toolbar-button,.toolbar-root button{transition:none}}.toolbar-buttonGroup{display:flex;flex-direction:row;justify-content:center}.toolbar-element .toolbar--toggle-button{color:var(--foreground-color-1);font-weight:normal}.toolbar-element .toolbar--toggle-button[aria-checked=true]{background:var(--selection-background-color);color:var(--selection-foreground-color)}.toolbar-element .toolbar--toggle-button>.icon{width:25px;height:25px;margin:0 5px}.toolbar-element .toolbar--toggle-button>*{vertical-align:middle}.toolbar-closeColorPickerOverlay{display:none;position:fixed;top:0;left:0;bottom:0;right:0;touch-action:none;background-color:var(--background-color-1);opacity:.3;z-index:2}.toolbar-spacedList>*{padding-bottom:5px;padding-top:5px}.toolbar-indentedList{padding-left:10px}@media print{.toolbar-element{display:none}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label-delayed{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes show-label-now{0%{opacity:0}5%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@keyframes toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-in-reduce-motion{from{opacity:0}to{opacity:1}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@keyframes toolbar--edgemenu-transition-out-reduce-motion{from{opacity:1}to{opacity:0}}@keyframes toolbar--edgemenu-container-transition-in{from{overflow-y:hidden}to{overflow-y:hidden}}@keyframes toolbar--edgemenu-container-transition-out{from{overflow-y:hidden}to{overflow-y:hidden}}.toolbar-edge-toolbar{--toolbar-button-height: min(20vh, 48px);--toolbar-button-size: var(--toolbar-button-height);--label-hover-offset-size: calc(14px + var(--toolbar-button-height));box-sizing:border-box;flex-direction:row;justify-content:space-around;--button-label-hover-offset-y: var(--label-hover-offset-size);--button-label-hover-offset-x: 0}@media screen and (min-width: 540px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw;flex-grow:0;flex-shrink:0}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline{font-size:.9em}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button{width:var(--toolbar-button-size)}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button.has-long-press-or-hover>label{opacity:.8}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:focus-visible>label,.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}}@media screen and (max-width: 700px)and (prefers-reduced-motion: reduce){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>label{transition:none}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon.toolbar-icon{margin-left:0;margin-right:0}}.toolbar-edge-toolbar>div.toolbar-element{flex-direction:row;display:flex;flex-grow:1;justify-content:center;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);--extra-left-right-padding: 0px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar{width:3px;height:3px}.toolbar-edge-toolbar>div.toolbar-element::-webkit-scrollbar-thumb{background-color:var(--shadow-color)}.toolbar-edge-toolbar>div.toolbar-element.toolbar-tool-row{overflow-x:auto;overflow-y:hidden;flex-grow:100}.toolbar-edge-toolbar>div.toolbar-element.toolbar-action-row{z-index:2;background-color:var(--background-color-3);color:var(--foreground-color-3);--icon-color: var(--foreground-color-3)}.toolbar-edge-toolbar>div.toolbar-element.has-scroll{justify-content:start;position:relative;--button-label-hover-offset-y: 0;--button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size))}.toolbar-edge-toolbar>div.toolbar-element.has-scroll>:nth-child(1){--button-label-hover-offset-x: var(--label-hover-offset-size)}.toolbar-edge-toolbar .toolbar-toolContainer.selected>.toolbar-button{background-color:var(--selection-background-color);color:var(--selection-foreground-color);--icon-color: var(--selection-foreground-color)}.toolbar-edge-toolbar .toolbar-button{box-sizing:border-box;background-color:rgba(0,0,0,0)}.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon{flex-shrink:.01;height:12px}.toolbar-edge-toolbar .toolbar-toolContainer{order:1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline{flex-grow:1;display:flex;--button-flex-direction: row}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left{justify-content:end;--button-flex-direction: row-reverse;order:100}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left>.toolbar-button>.toolbar-icon{margin-left:7px;margin-right:0}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right{order:-1}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button{width:auto;flex-direction:var(--button-flex-direction)}.toolbar-edge-toolbar .toolbar-toolContainer.label-inline>.toolbar-button>.toolbar-icon{height:100%;margin-right:7px;margin-left:0;width:22px}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button{width:calc(var(--toolbar-button-size) + var(--extra-left-right-padding));height:var(--toolbar-button-size)}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label,.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.has-long-press-or-hover>label{opacity:.8}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible>label,.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.focus-visible>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible)>label{animation:1.5s ease rehide-label;opacity:0}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button>label{transition:none}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline).dropdownVisible>.toolbar-button>label{opacity:.8;animation:1.5s ease rehide-label .3s,1s ease keep-label-hidden 1.8s infinite}.toolbar-edge-toolbar>div>.toolbar-toolContainer:not(.selected):not(.dropdownShowable)>.toolbar-button>.toolbar-showHideDropdownIcon{display:block;visibility:hidden}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button{margin:0;border-radius:0;padding:8px;box-shadow:none}.toolbar-edge-toolbar .toolbar-toolContainer>.toolbar-button.has-dropdown{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:0px}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container{height:0;background-color:rgba(0,0,0,0);opacity:.9}.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu{position:absolute}.toolbar-edgemenu-container{background-color:var(--background-color-transparent);transition:.15s ease-in-out height,.15s ease-in-out background-color,.2s ease-in-out opacity;position:absolute;width:var(--editor-current-width-px);height:var(--editor-current-height-px);box-sizing:border-box;display:flex;flex-direction:column-reverse;align-items:center;z-index:2}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container{transition:.15s ease-in-out background-color,.2s ease-in-out opacity}}.toolbar-edgemenu-container.dropdown-below-edge{overflow-y:hidden}.toolbar-edgemenu-container button{font-size:1.2em;box-shadow:none;border:none;padding:10px;color:var(--foreground-color-1);transition:.2s ease box-shadow;font-weight:bold;color:var(--primary-action-foreground-color)}.toolbar-edgemenu-container button:hover{box-shadow:0 1px 2px var(--shadow-color)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button{--button-label-hover-offset-y: var(--button-size)}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible)>label>.button-label-text,.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active>label>.button-label-text{opacity:.8;animation:1s ease show-label-delayed}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button.has-long-press-or-hover>label>.button-label-text{opacity:.8}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible>label>.button-label-text,.toolbar-edgemenu-container .toolbar-grid-selector .choice-button.focus-visible>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible)>label>.button-label-text{animation:1.5s ease rehide-label;opacity:0}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{opacity:0;position:absolute;margin-top:var(--button-label-hover-offset-y);margin-left:var(--button-label-hover-offset-x);z-index:1;pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.3s ease opacity,.2s ease margin-top}@media(prefers-reduced-motion: reduce){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button>label>.button-label-text{transition:none}}.toolbar-edgemenu-container .toolbar-help-overlay-button{align-items:last baseline}.toolbar-edgemenu-container .toolbar-edgemenu{--toolbar-button-height: 48px;touch-action:none;user-select:none;-webkit-user-select:none;background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2);box-shadow:0px 0px 1px var(--shadow-color);padding-left:10px;padding-right:10px;width:min(400px,100vw);box-sizing:border-box;border-top-left-radius:30px;border-top-right-radius:30px;transition:transform .1s ease,padding-bottom .1s ease}.toolbar-edgemenu-container .toolbar-edgemenu input,.toolbar-edgemenu-container .toolbar-edgemenu textarea{user-select:auto;-webkit-user-select:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:inline-block}.toolbar-edgemenu-container .toolbar-edgemenu button{background-color:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem{height:40px;display:block;cursor:ns-resize;position:relative;margin-top:-15px;margin-bottom:10px;width:100%;border:none;box-shadow:none;background:rgba(0,0,0,0)}.toolbar-edgemenu-container .toolbar-edgemenu>button.drag-elem::before{content:"";background-color:var(--icon-color);opacity:.2;display:block;position:relative;top:10px;height:5px;border-radius:5px;width:min(80%,40px);margin-left:auto;margin-right:auto}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer{display:block}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button{flex-direction:row;max-width:unset;width:100%;box-sizing:border-box;justify-content:flex-start;box-shadow:none;padding:2px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>.toolbar-icon{width:25px;height:25px;padding:13px;margin-right:15px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label,.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button>label.long-label{font-size:1em}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list{padding-left:10px;padding-right:10px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList{box-sizing:border-box;--align-items-to-x: 105px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div{display:flex;align-items:center;margin-top:5px;min-height:35px}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div:first-child{margin-top:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>label{padding-right:35px;min-width:var(--align-items-to-x);flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px;margin-left:0}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input:not([type=checkbox]){flex-grow:1;min-width:48px;flex-shrink:1}.toolbar-dropdown-toolbar button,.toolbar-dropdown-toolbar .toolbar-button{background-color:var(--background-color-2);color:var(--foreground-color-2);--icon-color: var(--foreground-color-2)}.toolbar-dropdown-toolbar,.toolbar-dropdown-toolbar .toolbar-dropdown{background-color:var(--background-color-3);color:var(--foreground-color-3)}.toolbar-dropdown-toolbar .toolbar-spacedList>div>label{padding-right:10px;min-width:50px}.toolbar-dropdown-toolbar .clr-field button{width:100%;height:100%;top:50%;left:0;border-radius:5px}.toolbar-dropdown-toolbar .toolbar-grid-selector>div{--button-size: 57px}.toolbar-dropdown-toolbar .toolbar-dropdown>div>.toolbar-toolContainer{display:inline-block}.toolbar-help-overlay{width:100%;height:100%;max-width:none;max-height:none;border:none;margin:0;padding:0;z-index:5;touch-action:none;overflow:hidden;color:#fff;--icon-color: white;background-color:rgba(0,0,0,0);display:flex;flex-direction:column;transition:.3s ease transform}.toolbar-help-overlay::backdrop{background-color:rgba(0,0,0,.8);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}.toolbar-help-overlay,.toolbar-help-overlay::backdrop{animation:.25s ease transition-in}@keyframes transition-in{0%{opacity:0}100%{opacity:1}}@keyframes transition-out{0%{opacity:1}100%{opacity:0}}.toolbar-help-overlay.-hiding,.toolbar-help-overlay.-hiding::backdrop{animation:.25s ease transition-out;opacity:0}.toolbar-help-overlay.-dragging{transition:none}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay{transition:none}}@media screen and (min-width: 800px){.toolbar-help-overlay>.navigation-buttons{order:1;margin-top:auto}}.toolbar-help-overlay .with-text-shadow,.toolbar-help-overlay .help-page-container>.label,.toolbar-help-overlay button{text-shadow:0 0 3px rgba(20,20,20,.9);filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5))}.toolbar-help-overlay button:not(:disabled){cursor:pointer}.toolbar-help-overlay button{background:rgba(0,0,0,0);border:none;color:var(--help-overlay-foreground);border-radius:15px}.toolbar-help-overlay .close-button{align-self:flex-start;width:48px;height:48px;z-index:1}.toolbar-help-overlay .close-button>svg{width:100%}.toolbar-help-overlay .navigation-content{flex-grow:1;display:flex}.toolbar-help-overlay .help-page-container{display:flex;align-items:center;flex-grow:1;touch-action:none}.toolbar-help-overlay .help-page-container>.label{flex-grow:1;text-align:center;font-size:18.5pt;margin-left:15px;margin-right:15px;margin-top:0px;z-index:1;transition:.5s ease margin-top}.toolbar-help-overlay .help-page-container>.label.-large-space-below{margin-top:0;margin-bottom:auto}.toolbar-help-overlay .help-page-container>.label.-small-space-above{margin-top:40px;margin-bottom:auto}.toolbar-help-overlay .help-page-container>.label.-large-space-above{margin-top:auto;margin-bottom:10px}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .help-page-container>.label{transition:none}}.toolbar-help-overlay .help-page-container>.cloned-element-container{position:absolute;z-index:0;user-select:none;-webkit-user-select:none;border-radius:10px;opacity:.01;background-color:rgba(100,100,100,.01);box-shadow:none;transition:.5s ease opacity,.5s ease background-color}.toolbar-help-overlay .help-page-container>.cloned-element-container *{pointer-events:none !important}.toolbar-help-overlay .help-page-container>.cloned-element-container>*{margin:0;opacity:.01 !important;transition:.3s ease opacity !important}.toolbar-help-overlay .help-page-container>.cloned-element-container:not(.-clickable) *{cursor:unset !important}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable,.toolbar-help-overlay .help-page-container>.cloned-element-container.-background{z-index:1;touch-action:none}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable{cursor:pointer;z-index:2}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable.has-long-press-or-hover{opacity:.5 !important}.toolbar-help-overlay .help-page-container>.cloned-element-container.-clickable.has-long-press-or-hover,.toolbar-help-overlay .help-page-container>.cloned-element-container.-active{background-color:var(--background-color-1)}.toolbar-help-overlay .help-page-container>.cloned-element-container.-active{opacity:1;background-color:var(--background-color-1);box-shadow:0 0 3px rgba(100,100,100,.5)}.toolbar-help-overlay .help-page-container>.cloned-element-container.-active>*{opacity:1 !important}.toolbar-help-overlay .navigation-buttons{display:flex;flex-direction:row;justify-content:space-between;direction:ltr}.toolbar-help-overlay .navigation-buttons>button:disabled{opacity:.5}.toolbar-help-overlay .navigation-buttons>.next,.toolbar-help-overlay .navigation-buttons>.previous{font-size:1em;padding:10px;transition:.2s ease font-size;z-index:3}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .navigation-buttons>.next,.toolbar-help-overlay .navigation-buttons>.previous{transition:none}}.toolbar-help-overlay .navigation-buttons:not(.-has-previous)>.next:not(:disabled){animation:.5s ease highlight-button .5s}@keyframes highlight-button{0%{transform:scale(1)}50%{transform:scale(1.2)}55%{transform:scale(1.2) rotate(2deg)}65%{transform:scale(1.2) rotate(-2deg)}100%{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.toolbar-help-overlay .navigation-buttons:not(.-has-previous)>.next:not(:disabled){animation:none}}.toolbar-help-overlay .navigation-buttons>.next::after{content:"❯";margin-left:3px}.toolbar-help-overlay .navigation-buttons>.previous::before{content:"❮";margin-right:3px}.toolbar-help-overlay .navigation-buttons.-has-next>.next{font-size:1.4em}.toolbar-help-overlay .navigation-buttons.-has-previous>.previous{font-size:1.4em}.toolbar-help-overlay .navigation-buttons.-highlight-next>.next,.toolbar-help-overlay .navigation-buttons.-highlight-previous>.previous{font-weight:bold;background-color:rgba(200,200,200,.1);font-size:1.4em}.toolbar-help-overlay .navigation-help{margin-top:1em;font-size:.7em}.toolbar-element .toolbar-help-overlay-button{height:0;position:relative;display:flex;justify-content:end}.toolbar-element .toolbar-help-overlay-button>.button{margin:0;padding:5px;padding-top:0;padding-bottom:0;box-shadow:none;text-align:center;opacity:.5}.toolbar-element .toolbar-help-overlay-button>.button>.icon{width:1.18em;height:1.18em;transition:.2s ease filter}.toolbar-element .toolbar-help-overlay-button>.button:focus-visible>.icon,.toolbar-element .toolbar-help-overlay-button>.button:hover>.icon{filter:drop-shadow(0px 0px 1px var(--shadow-color))}.ScrollbarTool-overlay{width:0;height:0;overflow:visible;opacity:.2;pointer-events:none;--fade-out-animation: 1s ease 0s fade-out;--scrollbar-size: 3px}@media(prefers-reduced-motion: reduce){.ScrollbarTool-overlay{--fade-out-animation: none !important}}@keyframes fade-out{from{opacity:.2}to{opacity:0}}.ScrollbarTool-overlay:not(.just-updated){animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay .vertical-scrollbar,.ScrollbarTool-overlay .horizontal-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size);min-width:var(--scrollbar-size);min-height:var(--scrollbar-size);background-color:var(--foreground-color-1);border-radius:var(--scrollbar-size);position:absolute}.ScrollbarTool-overlay .vertical-scrollbar.represents-no-scroll,.ScrollbarTool-overlay .horizontal-scrollbar.represents-no-scroll{animation:var(--fade-out-animation);opacity:0}.ScrollbarTool-overlay:not(.scrollbar-left) .vertical-scrollbar{margin-left:calc(var(--editor-current-display-width-px) - var(--scrollbar-size))}.ScrollbarTool-overlay:not(.scrollbar-top) .horizontal-scrollbar{margin-top:calc(var(--editor-current-display-height-px) - var(--scrollbar-size))}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible}.selection-tool-handle{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;--max-size: 17px}.selection-tool-handle .selection-tool-content{border:1px solid var(--foreground-color-1);background:var(--background-color-1);box-sizing:border-box;max-width:var(--max-size);max-height:var(--max-size);width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:3px}.selection-tool-handle .selection-tool-content .icon{width:100%;height:100%}.selection-tool-handle.selection-tool-circle .selection-tool-content{border-radius:100%}.selection-tool-handle.selection-tool-rotate{--max-size: 28px;cursor:grab}.selection-tool-handle.selection-tool-resize-x{cursor:ew-resize}.selection-tool-handle.selection-tool-resize-y{cursor:ns-resize}.selection-tool-handle.selection-tool-resize-xy{cursor:nwse-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x{cursor:ns-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-y{cursor:ew-resize}.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy{cursor:nesw-resize}.overlay.handleOverlay{touch-action:none;direction:ltr}.overlay.handleOverlay,.overlay.handleOverlay .selection-tool-selection-outer-container{height:0;overflow:visible}.overlay.handleOverlay .selection-tool-selection-inner-container{width:var(--editor-current-display-width-px);height:var(--editor-current-display-height-px);overflow:hidden;pointer-events:none}.overlay.handleOverlay .selection-tool-selection-inner-container>*{pointer-events:all}.overlay.handleOverlay .selection-tool-selection-inner-container.-empty{opacity:0}@keyframes selection-duplicated-animation{0%{scale:1 1}50%{scale:1.02 1.02}100%{scale:1 1}}@media(prefers-reduced-motion: reduce){@keyframes selection-duplicated-animation{}}.find-tool-overlay{order:-1;position:absolute}.js-draw-sound-ui-toggle{width:0px;height:0px;overflow:hidden;user-select:none;-webkit-user-select:none}.js-draw-sound-ui-toggle button{margin-top:1px}.js-draw-sound-ui-toggle:focus-within,.js-draw-sound-ui-toggle.sound-ui-tool-enabled{overflow:visible;z-index:5}.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled{opacity:.5}.about-dialog-container dialog{display:flex;flex-direction:column}.about-dialog-container dialog .close-button{display:block;margin-left:auto;margin-right:auto}.about-dialog-container dialog .about-entry-container{flex-grow:1;flex-shrink:1;overflow-y:auto;margin-left:20px;margin-right:20px;padding-bottom:20px;white-space:pre-wrap;font-family:monospace}.about-dialog-container dialog .about-entry-container>h2,.about-dialog-container dialog .about-entry-container>details>summary{cursor:pointer;margin-top:15px;font-size:1.2em;font-weight:bold}.about-dialog-container dialog .about-entry-container>h2 a,.about-dialog-container dialog .about-entry-container>details>summary a{color:var(--foreground-color-1);text-decoration:underline}.dialog-container.dialog-container{background-color:var(--background-color-transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);position:absolute;z-index:3;width:var(--editor-current-width-px);height:var(--editor-current-height-px);display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}.dialog-container.dialog-container dialog{background-color:var(--background-color-1);color:var(--foreground-color-1);border:none;outline:none;box-shadow:0 0 2px var(--shadow-color);border-radius:8px;max-height:90vh;width:min(100%,500px);box-sizing:border-box}#clr-picker{--clr-slider-size: 30px}#clr-picker #clr-color-area,#clr-picker .clr_hue{touch-action:none}#clr-picker .clr-alpha{margin-top:15px;margin-bottom:15px}#clr-picker.clr-picker input[type=range]::-moz-range-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-thumb{width:var(--clr-slider-size);height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track{height:var(--clr-slider-size)}#clr-picker.clr-picker input[type=range]::-moz-range-track{height:var(--clr-slider-size)}.imageEditorContainer{--background-color-1: white;--foreground-color-1: black;--background-color-2: #f5f5f5;--foreground-color-2: #2c303a;--background-color-3: #e5e5e5;--foreground-color-3: #1c202a;--selection-background-color: #cbdaf1;--selection-foreground-color: #2c303a;--background-color-transparent: rgba(105, 100, 100, 0.5);--shadow-color: rgba(0, 0, 0, 0.5);--primary-action-foreground-color: #15b}@media(prefers-color-scheme: dark){.imageEditorContainer{--background-color-1: #151515;--foreground-color-1: white;--background-color-2: #222;--foreground-color-2: #efefef;--background-color-3: #272627;--foreground-color-3: #eee;--selection-background-color: #607;--selection-foreground-color: white;--shadow-color: rgba(250, 250, 250, 0.5);--background-color-transparent: rgba(50, 50, 50, 0.5);--primary-action-foreground-color: #7ae}}.imageEditorContainer{--icon-color: var(--foreground-color-1)}.imageEditorContainer{color:var(--foreground-color-1);font-family:system-ui,-apple-system,sans-serif;background-color:var(--background-color-1);width:100%;height:400px;min-height:220px;min-width:100px;writing-mode:horizontal-tb;box-sizing:border-box;display:flex;flex-direction:column-reverse}.imageEditorContainer input{accent-color:var(--primary-action-foreground-color)}.imageEditorContainer .imageEditorRenderArea{display:grid;grid-template-columns:1fr;flex-grow:2;flex-shrink:1;min-height:100px;min-width:0;width:100%;height:100%}.imageEditorContainer .imageEditorRenderArea canvas{grid-row:1/1;grid-column:1/1;touch-action:none;box-sizing:border-box;width:100%;height:100%;min-width:0;max-width:inherit;min-height:0px;max-height:inherit;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.imageEditorContainer .loadingMessage{position:fixed;text-align:center;font-size:2em;text-shadow:0px 0px 1px var(--background-color-1);bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}.imageEditorContainer .textRendererOutputContainer{width:.001px;height:.001px;overflow:hidden;-webkit-user-select:none;user-select:none}.imageEditorContainer .textRendererOutputContainer:focus-within{overflow:visible;z-index:5}@media print{.imageEditorContainer .loadingMessage{display:none}.imageEditorContainer .imageEditorRenderArea canvas{width:100%;height:initial}}',""]);const l=i},609:o=>{o.exports=function(o){var e=[];return e.toString=function(){return this.map((function(e){var n="",t=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),t&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=o(e),t&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(o,n,t,r,a){"string"==typeof o&&(o=[[null,o,void 0]]);var i={};if(t)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(i[d]=!0)}for(var c=0;c<o.length;c++){var b=[].concat(o[c]);t&&i[b[0]]||(void 0!==a&&(void 0===b[5]||(b[1]="@layer".concat(b[5].length>0?" ".concat(b[5]):""," {").concat(b[1],"}")),b[5]=a),n&&(b[2]?(b[1]="@media ".concat(b[2]," {").concat(b[1],"}"),b[2]=n):b[2]=n),r&&(b[4]?(b[1]="@supports (".concat(b[4],") {").concat(b[1],"}"),b[4]=r):b[4]="".concat(r)),e.push(b))}},e}},601:o=>{o.exports=function(o){return o[1]}},62:o=>{var e=[];function n(o){for(var n=-1,t=0;t<e.length;t++)if(e[t].identifier===o){n=t;break}return n}function t(o,t){for(var a={},i=[],l=0;l<o.length;l++){var d=o[l],c=t.base?d[0]+t.base:d[0],b=a[c]||0,s="".concat(c," ").concat(b);a[c]=b+1;var p=n(s),g={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==p)e[p].references++,e[p].updater(g);else{var u=r(g,t);t.byIndex=l,e.splice(l,0,{identifier:s,updater:u,references:1})}i.push(s)}return i}function r(o,e){var n=e.domAPI(e);n.update(o);return function(e){if(e){if(e.css===o.css&&e.media===o.media&&e.sourceMap===o.sourceMap&&e.supports===o.supports&&e.layer===o.layer)return;n.update(o=e)}else n.remove()}}o.exports=function(o,r){var a=t(o=o||[],r=r||{});return function(o){o=o||[];for(var i=0;i<a.length;i++){var l=n(a[i]);e[l].references--}for(var d=t(o,r),c=0;c<a.length;c++){var b=n(a[c]);0===e[b].references&&(e[b].updater(),e.splice(b,1))}a=d}}},793:o=>{var e={};o.exports=function(o,n){var t=function(o){if(void 0===e[o]){var n=document.querySelector(o);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(o){n=null}e[o]=n}return e[o]}(o);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(n)}},173:o=>{o.exports=function(o){var e=document.createElement("style");return o.setAttributes(e,o.attributes),o.insert(e,o.options),e}},892:(o,e,n)=>{o.exports=function(o){var e=n.nc;e&&o.setAttribute("nonce",e)}},36:o=>{o.exports=function(o){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=o.insertStyleElement(o);return{update:function(n){!function(o,e,n){var t="";n.supports&&(t+="@supports (".concat(n.supports,") {")),n.media&&(t+="@media ".concat(n.media," {"));var r=void 0!==n.layer;r&&(t+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),t+=n.css,r&&(t+="}"),n.media&&(t+="}"),n.supports&&(t+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(t,o,e.options)}(e,o,n)},remove:function(){!function(o){if(null===o.parentNode)return!1;o.parentNode.removeChild(o)}(e)}}}},464:o=>{o.exports=function(o,e){if(e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}}},e={};function n(t){var r=e[t];if(void 0!==r)return r.exports;var a=e[t]={id:t,exports:{}};return o[t](a,a.exports,n),a.exports}n.n=o=>{var e=o&&o.__esModule?()=>o.default:()=>o;return n.d(e,{a:e}),e},n.d=(o,e)=>{for(var t in e)n.o(e,t)&&!n.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},n.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),n.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},n.nc=void 0;var t={};(()=>{n.r(t);var o=n(62),e=n.n(o),r=n(36),a=n.n(r),i=n(793),l=n.n(i),d=n(892),c=n.n(d),b=n(173),s=n.n(b),p=n(464),g=n.n(p),u=n(245),h={};h.styleTagTransform=g(),h.setAttributes=c(),h.insert=l().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=s();e()(u.Z,h);u.Z&&u.Z.locals&&u.Z.locals;var m=n(489),x={};x.styleTagTransform=g(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=a(),x.insertStyleElement=s();e()(m.Z,x);m.Z&&m.Z.locals&&m.Z.locals})(),window.jsdrawStyles=t})();
package/dist/cjs/Editor.d.ts CHANGED
@@ -270,7 +270,10 @@ export declare class Editor {
270
270
  */
271
271
  handleHTMLPointerEvent(eventType: 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel', evt: PointerEvent): boolean;
272
272
  private isEventSink;
273
- private handlePaste;
273
+ /** @internal */
274
+ protected handleDrop(evt: DragEvent | ClipboardEvent): Promise<void>;
275
+ /** @internal */
276
+ protected handlePaste(evt: DragEvent | ClipboardEvent): Promise<void>;
274
277
  /**
275
278
  * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
276
279
  * events are also forwarded, `elem`'s contextmenu is disabled.
package/dist/cjs/Editor.js CHANGED
@@ -267,6 +267,24 @@ class Editor {
267
267
  this.handlePointerEventsFrom(this.renderingRegion);
268
268
  this.handleKeyEventsFrom(this.renderingRegion);
269
269
  this.handlePointerEventsFrom(this.accessibilityAnnounceArea);
270
+ // Prevent selected text from control areas from being dragged.
271
+ // See https://github.com/personalizedrefrigerator/joplin-plugin-freehand-drawing/issues/8
272
+ const preventSelectionOf = [
273
+ this.renderingRegion,
274
+ this.accessibilityAnnounceArea,
275
+ this.accessibilityControlArea,
276
+ this.loadingWarning,
277
+ ];
278
+ for (const element of preventSelectionOf) {
279
+ element.addEventListener('drag', event => {
280
+ event.preventDefault();
281
+ return false;
282
+ });
283
+ element.addEventListener('dragstart', event => {
284
+ event.preventDefault();
285
+ return false;
286
+ });
287
+ }
270
288
  this.container.addEventListener('wheel', evt => {
271
289
  this.handleHTMLWheelEvent(evt);
272
290
  });
@@ -444,6 +462,12 @@ class Editor {
444
462
  }
445
463
  return false;
446
464
  }
465
+ /** @internal */
466
+ async handleDrop(evt) {
467
+ evt.preventDefault();
468
+ this.handlePaste(evt);
469
+ }
470
+ /** @internal */
447
471
  async handlePaste(evt) {
448
472
  const target = document.querySelector(':focus') ?? evt.target;
449
473
  if (!this.isEventSink(target)) {
@@ -706,8 +730,7 @@ class Editor {
706
730
  evt.preventDefault();
707
731
  };
708
732
  elem.ondrop = evt => {
709
- evt.preventDefault();
710
- this.handlePaste(evt);
733
+ this.handleDrop(evt);
711
734
  };
712
735
  this.eventListenerTargets.push(elem);
713
736
  }
package/dist/cjs/rendering/renderers/CanvasRenderer.js CHANGED
@@ -243,7 +243,7 @@ class CanvasRenderer extends AbstractRenderer_1.default {
243
243
  // @internal
244
244
  isTooSmallToRender(rect) {
245
245
  // Should we ignore all objects within this object's bbox?
246
- const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
246
+ const diagonal = rect.size.times(this.getCanvasToScreenTransform().getScaleFactor());
247
247
  const bothDimenMinSize = this.minRenderSizeBothDimens;
248
248
  const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
249
249
  const anyDimenMinSize = this.minRenderSizeAnyDimen;
package/dist/cjs/tools/PanZoom.d.ts CHANGED
@@ -24,13 +24,14 @@ export default class PanZoom extends BaseTool {
24
24
  private readonly initialRotationSnapAngle;
25
25
  private readonly afterRotationStartSnapAngle;
26
26
  private readonly pinchZoomStartThreshold;
27
- private startDist;
28
- private lastDist;
27
+ private startTouchDist;
28
+ private lastTouchDist;
29
29
  private lastScreenCenter;
30
30
  private lastTimestamp;
31
31
  private lastPointerDownTimestamp;
32
32
  private initialTouchAngle;
33
33
  private initialViewportRotation;
34
+ private initialViewportScale;
34
35
  private isScaling;
35
36
  private isRotating;
36
37
  private inertialScroller;
@@ -43,6 +44,11 @@ export default class PanZoom extends BaseTool {
43
44
  private updateVelocity;
44
45
  private getCenterDelta;
45
46
  private toSnappedRotationDelta;
47
+ /**
48
+ * Given a scale update, `scaleFactor`, returns a new scale factor snapped
49
+ * to a power of two (if within some tolerance of that scale).
50
+ */
51
+ private toSnappedScaleFactor;
46
52
  private handleTwoFingerMove;
47
53
  private handleOneFingerMove;
48
54
  onPointerMove({ allPointers }: PointerEvt): void;
package/dist/cjs/tools/PanZoom.js CHANGED
@@ -77,9 +77,11 @@ class PanZoom extends BaseTool_1.default {
77
77
  this.initialRotationSnapAngle = 0.22; // radians
78
78
  this.afterRotationStartSnapAngle = 0.07; // radians
79
79
  this.pinchZoomStartThreshold = 1.08; // scale factor
80
+ // Last timestamp at which a pointerdown event was received
80
81
  this.lastPointerDownTimestamp = 0;
81
82
  this.initialTouchAngle = 0;
82
83
  this.initialViewportRotation = 0;
84
+ this.initialViewportScale = 0;
83
85
  // Set to `true` only when scaling has started (if two fingers are down and have moved
84
86
  // far enough).
85
87
  this.isScaling = false;
@@ -119,11 +121,12 @@ class PanZoom extends BaseTool_1.default {
119
121
  const isRightClick = this.allPointersAreOfType(pointers, Pointer_1.PointerDevice.RightButtonMouse);
120
122
  if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
121
123
  const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
122
- this.lastDist = dist;
123
- this.startDist = dist;
124
+ this.lastTouchDist = dist;
125
+ this.startTouchDist = dist;
124
126
  this.lastScreenCenter = screenCenter;
125
127
  this.initialTouchAngle = angle;
126
128
  this.initialViewportRotation = this.editor.viewport.getRotationAngle();
129
+ this.initialViewportScale = this.editor.viewport.getScaleFactor();
127
130
  this.isScaling = false;
128
131
  // We're initially rotated if `initialViewportRotation` isn't near a multiple of pi/2.
129
132
  // In other words, if sin(2 initialViewportRotation) is near zero.
@@ -199,6 +202,22 @@ class PanZoom extends BaseTool_1.default {
199
202
  }
200
203
  return fullRotation - this.editor.viewport.getRotationAngle();
201
204
  }
205
+ /**
206
+ * Given a scale update, `scaleFactor`, returns a new scale factor snapped
207
+ * to a power of two (if within some tolerance of that scale).
208
+ */
209
+ toSnappedScaleFactor(touchDist) {
210
+ // scaleFactor is applied to the current transformation of the viewport.
211
+ const newScale = this.initialViewportScale * touchDist / this.startTouchDist;
212
+ const currentScale = this.editor.viewport.getScaleFactor();
213
+ const logNewScale = Math.log(newScale) / Math.log(10);
214
+ const roundedLogNewScale = Math.round(logNewScale);
215
+ const logTolerance = 0.04;
216
+ if (Math.abs(roundedLogNewScale - logNewScale) < logTolerance) {
217
+ return Math.pow(10, roundedLogNewScale) / currentScale;
218
+ }
219
+ return touchDist / this.lastTouchDist;
220
+ }
202
221
  handleTwoFingerMove(allPointers) {
203
222
  const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
204
223
  const delta = this.getCenterDelta(screenCenter);
@@ -215,25 +234,25 @@ class PanZoom extends BaseTool_1.default {
215
234
  this.isRotating = true;
216
235
  }
217
236
  this.updateVelocity(screenCenter);
218
- let scaleFactor = 1;
219
- if (this.isScaling) {
220
- scaleFactor = dist / this.lastDist;
221
- }
222
- else {
223
- const initialScaleFactor = dist / this.startDist;
237
+ if (!this.isScaling) {
238
+ const initialScaleFactor = dist / this.startTouchDist;
224
239
  // Only start scaling if scaling done so far exceeds some threshold.
225
240
  const upperBound = this.pinchZoomStartThreshold;
226
241
  const lowerBound = 1 / this.pinchZoomStartThreshold;
227
242
  if (initialScaleFactor > upperBound || initialScaleFactor < lowerBound) {
228
- scaleFactor = initialScaleFactor;
229
243
  this.isScaling = true;
230
244
  }
231
245
  }
246
+ let scaleFactor = 1;
247
+ if (this.isScaling) {
248
+ scaleFactor = this.toSnappedScaleFactor(dist);
249
+ // Don't set lastDist until we start scaling --
250
+ this.lastTouchDist = dist;
251
+ }
232
252
  const transformUpdate = math_1.Mat33.translation(delta)
233
253
  .rightMul(math_1.Mat33.scaling2D(scaleFactor, canvasCenter))
234
254
  .rightMul(math_1.Mat33.zRotation(deltaRotation, canvasCenter));
235
255
  this.lastScreenCenter = screenCenter;
236
- this.lastDist = dist;
237
256
  this.transform = Viewport_1.Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
238
257
  return transformUpdate;
239
258
  }
package/dist/cjs/tools/PasteHandler.js CHANGED
@@ -67,6 +67,10 @@ class PasteHandler extends BaseTool_1.default {
67
67
  });
68
68
  const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: math_1.Color4.red } };
69
69
  const pastedTextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
70
+ // Don't paste text that would be invisible.
71
+ if (text.trim() === '') {
72
+ return;
73
+ }
70
74
  const lines = text.split('\n');
71
75
  await this.addComponentsFromPaste([TextComponent_1.default.fromLines(lines, math_1.Mat33.identity, pastedTextStyle)]);
72
76
  }
package/dist/cjs/tools/SelectionTool/Selection.js CHANGED
@@ -108,6 +108,7 @@ class Selection {
108
108
  for (const handle of this.handles) {
109
109
  handle.addTo(this.backgroundElem);
110
110
  }
111
+ this.updateUI();
111
112
  }
112
113
  // @internal Intended for unit tests
113
114
  getBackgroundElem() {
@@ -313,6 +314,13 @@ class Selection {
313
314
  else {
314
315
  this.innerContainer.classList.remove(perpendicularClassName);
315
316
  }
317
+ // Hide handles when empty
318
+ if (screenRegion.width === 0 && screenRegion.height === 0) {
319
+ this.innerContainer.classList.add('-empty');
320
+ }
321
+ else {
322
+ this.innerContainer.classList.remove('-empty');
323
+ }
316
324
  for (const handle of this.handles) {
317
325
  handle.updatePosition();
318
326
  }
@@ -561,7 +569,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
561
569
  this.transformCommands = this.selectedElemIds.map(id => {
562
570
  const elem = editor.image.lookupElement(id);
563
571
  if (!elem) {
564
- throw new Error(`Unable to find element with ID, ${id}.`);
572
+ // There may be valid reasons for an element lookup to fail:
573
+ // For example, if the element was deleted remotely and the remote deletion
574
+ // hasn't been undone.
575
+ console.warn(`Unable to find element with ID, ${id}.`);
576
+ return null;
565
577
  }
566
578
  let originalZIndex = elem.getZIndex();
567
579
  let targetZIndex = elem.getZIndex() + this.deltaZIndex;
@@ -572,7 +584,9 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
572
584
  originalZIndex = elem.getZIndex() - this.deltaZIndex;
573
585
  }
574
586
  return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
575
- });
587
+ }).filter(// Remove all null commands
588
+ // Remove all null commands
589
+ command => command !== null);
576
590
  }
577
591
  async apply(editor) {
578
592
  this.resolveToElems(editor, false);
package/dist/cjs/version.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = {
4
- number: '1.15.0',
4
+ number: '1.16.1',
5
5
  };
package/dist/mjs/Editor.d.ts CHANGED
@@ -270,7 +270,10 @@ export declare class Editor {
270
270
  */
271
271
  handleHTMLPointerEvent(eventType: 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel', evt: PointerEvent): boolean;
272
272
  private isEventSink;
273
- private handlePaste;
273
+ /** @internal */
274
+ protected handleDrop(evt: DragEvent | ClipboardEvent): Promise<void>;
275
+ /** @internal */
276
+ protected handlePaste(evt: DragEvent | ClipboardEvent): Promise<void>;
274
277
  /**
275
278
  * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
276
279
  * events are also forwarded, `elem`'s contextmenu is disabled.
package/dist/mjs/Editor.mjs CHANGED
@@ -238,6 +238,24 @@ export class Editor {
238
238
  this.handlePointerEventsFrom(this.renderingRegion);
239
239
  this.handleKeyEventsFrom(this.renderingRegion);
240
240
  this.handlePointerEventsFrom(this.accessibilityAnnounceArea);
241
+ // Prevent selected text from control areas from being dragged.
242
+ // See https://github.com/personalizedrefrigerator/joplin-plugin-freehand-drawing/issues/8
243
+ const preventSelectionOf = [
244
+ this.renderingRegion,
245
+ this.accessibilityAnnounceArea,
246
+ this.accessibilityControlArea,
247
+ this.loadingWarning,
248
+ ];
249
+ for (const element of preventSelectionOf) {
250
+ element.addEventListener('drag', event => {
251
+ event.preventDefault();
252
+ return false;
253
+ });
254
+ element.addEventListener('dragstart', event => {
255
+ event.preventDefault();
256
+ return false;
257
+ });
258
+ }
241
259
  this.container.addEventListener('wheel', evt => {
242
260
  this.handleHTMLWheelEvent(evt);
243
261
  });
@@ -415,6 +433,12 @@ export class Editor {
415
433
  }
416
434
  return false;
417
435
  }
436
+ /** @internal */
437
+ async handleDrop(evt) {
438
+ evt.preventDefault();
439
+ this.handlePaste(evt);
440
+ }
441
+ /** @internal */
418
442
  async handlePaste(evt) {
419
443
  const target = document.querySelector(':focus') ?? evt.target;
420
444
  if (!this.isEventSink(target)) {
@@ -677,8 +701,7 @@ export class Editor {
677
701
  evt.preventDefault();
678
702
  };
679
703
  elem.ondrop = evt => {
680
- evt.preventDefault();
681
- this.handlePaste(evt);
704
+ this.handleDrop(evt);
682
705
  };
683
706
  this.eventListenerTargets.push(elem);
684
707
  }
package/dist/mjs/rendering/renderers/CanvasRenderer.mjs CHANGED
@@ -238,7 +238,7 @@ export default class CanvasRenderer extends AbstractRenderer {
238
238
  // @internal
239
239
  isTooSmallToRender(rect) {
240
240
  // Should we ignore all objects within this object's bbox?
241
- const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
241
+ const diagonal = rect.size.times(this.getCanvasToScreenTransform().getScaleFactor());
242
242
  const bothDimenMinSize = this.minRenderSizeBothDimens;
243
243
  const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
244
244
  const anyDimenMinSize = this.minRenderSizeAnyDimen;
package/dist/mjs/tools/PanZoom.d.ts CHANGED
@@ -24,13 +24,14 @@ export default class PanZoom extends BaseTool {
24
24
  private readonly initialRotationSnapAngle;
25
25
  private readonly afterRotationStartSnapAngle;
26
26
  private readonly pinchZoomStartThreshold;
27
- private startDist;
28
- private lastDist;
27
+ private startTouchDist;
28
+ private lastTouchDist;
29
29
  private lastScreenCenter;
30
30
  private lastTimestamp;
31
31
  private lastPointerDownTimestamp;
32
32
  private initialTouchAngle;
33
33
  private initialViewportRotation;
34
+ private initialViewportScale;
34
35
  private isScaling;
35
36
  private isRotating;
36
37
  private inertialScroller;
@@ -43,6 +44,11 @@ export default class PanZoom extends BaseTool {
43
44
  private updateVelocity;
44
45
  private getCenterDelta;
45
46
  private toSnappedRotationDelta;
47
+ /**
48
+ * Given a scale update, `scaleFactor`, returns a new scale factor snapped
49
+ * to a power of two (if within some tolerance of that scale).
50
+ */
51
+ private toSnappedScaleFactor;
46
52
  private handleTwoFingerMove;
47
53
  private handleOneFingerMove;
48
54
  onPointerMove({ allPointers }: PointerEvt): void;