js-draw 1.2.0 → 1.2.2

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 (29) hide show
  1. package/README.md +1 -1
  2. package/dist/Editor.css +5 -0
  3. package/dist/bundle.js +2 -2
  4. package/dist/bundledStyles.js +1 -1
  5. package/dist/cjs/components/lib.d.ts +2 -2
  6. package/dist/cjs/components/lib.js +15 -2
  7. package/dist/cjs/rendering/RenderablePathSpec.d.ts +1 -0
  8. package/dist/cjs/rendering/RenderablePathSpec.js +1 -0
  9. package/dist/cjs/rendering/lib.d.ts +1 -0
  10. package/dist/cjs/rendering/lib.js +5 -1
  11. package/dist/cjs/util/ReactiveValue.js +1 -1
  12. package/dist/cjs/util/adjustEditorThemeForContrast.d.ts +3 -1
  13. package/dist/cjs/util/adjustEditorThemeForContrast.js +52 -23
  14. package/dist/cjs/util/adjustEditorThemeForContrast.test.d.ts +1 -0
  15. package/dist/cjs/version.js +1 -1
  16. package/dist/mjs/components/lib.d.ts +2 -2
  17. package/dist/mjs/components/lib.mjs +2 -2
  18. package/dist/mjs/rendering/RenderablePathSpec.d.ts +1 -0
  19. package/dist/mjs/rendering/RenderablePathSpec.mjs +1 -0
  20. package/dist/mjs/rendering/lib.d.ts +1 -0
  21. package/dist/mjs/rendering/lib.mjs +1 -0
  22. package/dist/mjs/util/ReactiveValue.mjs +1 -1
  23. package/dist/mjs/util/adjustEditorThemeForContrast.d.ts +3 -1
  24. package/dist/mjs/util/adjustEditorThemeForContrast.mjs +52 -23
  25. package/dist/mjs/util/adjustEditorThemeForContrast.test.d.ts +1 -0
  26. package/dist/mjs/version.mjs +1 -1
  27. package/package.json +3 -3
  28. package/src/toolbar/AbstractToolbar.scss +3 -0
  29. package/src/toolbar/widgets/components/makeGridSelector.scss +5 -0
package/dist/bundledStyles.js CHANGED
@@ -1 +1 @@
1
- (()=>{"use strict";var o={489:(o,n,e)=>{e.d(n,{Z:()=>l});var r=e(601),t=e.n(r),a=e(609),i=e.n(a)()(t());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,n,e)=>{e.d(n,{Z:()=>l});var r=e(601),t=e.n(r),a=e(609),i=e.n(a)()(t());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: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 .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}.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-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.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 .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;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button:focus-within{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}.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)}.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:opacity(0.5) sepia(0.2);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);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;filter:opacity(0.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-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 toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@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: 610px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw}}@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 label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}}@media screen and (max-width: 700px)and (hover: hover){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline .toolbar-button:hover>label{opacity:.8;animation:1s ease show-label}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline .toolbar-button:active>label{opacity:.8;animation:.5s ease show-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);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s 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}}.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:10px;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:10px;margin-left:0}.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)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover>label{opacity:.8;animation:1s ease show-label}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active>label{opacity:.8;animation:.5s ease show-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);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s 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>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:none}}.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)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover>label>.button-label-text{opacity:.8;animation:1s ease show-label}}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active>label>.button-label-text{opacity:.8;animation:.5s ease show-label}.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);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s 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-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}.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>label{padding-right:35px;min-width:105px;flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px}.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}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible;position:absolute}.selection-tool-handle{border:1px solid var(--foreground-color-1);background:var(--background-color-1);position:absolute;cursor:grab}.selection-tool-handle.selection-tool-circle{border-radius:100%}.overlay.handleOverlay{height:0;overflow:visible}@keyframes selection-duplicated-animation{0%{transform:scale(1, 1)}50%{transform:scale(1.02, 1.02)}100%{transform: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: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{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{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{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;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;bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.imageEditorContainer .textRendererOutputContainer{width:1px;height:1px;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 n=[];return n.toString=function(){return this.map((function(n){var e="",r=void 0!==n[5];return n[4]&&(e+="@supports (".concat(n[4],") {")),n[2]&&(e+="@media ".concat(n[2]," {")),r&&(e+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),e+=o(n),r&&(e+="}"),n[2]&&(e+="}"),n[4]&&(e+="}"),e})).join("")},n.i=function(o,e,r,t,a){"string"==typeof o&&(o=[[null,o,void 0]]);var i={};if(r)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]);r&&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),e&&(b[2]?(b[1]="@media ".concat(b[2]," {").concat(b[1],"}"),b[2]=e):b[2]=e),t&&(b[4]?(b[1]="@supports (".concat(b[4],") {").concat(b[1],"}"),b[4]=t):b[4]="".concat(t)),n.push(b))}},n}},601:o=>{o.exports=function(o){return o[1]}},62:o=>{var n=[];function e(o){for(var e=-1,r=0;r<n.length;r++)if(n[r].identifier===o){e=r;break}return e}function r(o,r){for(var a={},i=[],l=0;l<o.length;l++){var d=o[l],c=r.base?d[0]+r.base:d[0],b=a[c]||0,p="".concat(c," ").concat(b);a[c]=b+1;var s=e(p),u={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==s)n[s].references++,n[s].updater(u);else{var g=t(u,r);r.byIndex=l,n.splice(l,0,{identifier:p,updater:g,references:1})}i.push(p)}return i}function t(o,n){var e=n.domAPI(n);e.update(o);return function(n){if(n){if(n.css===o.css&&n.media===o.media&&n.sourceMap===o.sourceMap&&n.supports===o.supports&&n.layer===o.layer)return;e.update(o=n)}else e.remove()}}o.exports=function(o,t){var a=r(o=o||[],t=t||{});return function(o){o=o||[];for(var i=0;i<a.length;i++){var l=e(a[i]);n[l].references--}for(var d=r(o,t),c=0;c<a.length;c++){var b=e(a[c]);0===n[b].references&&(n[b].updater(),n.splice(b,1))}a=d}}},793:o=>{var n={};o.exports=function(o,e){var r=function(o){if(void 0===n[o]){var e=document.querySelector(o);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(o){e=null}n[o]=e}return n[o]}(o);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(e)}},173:o=>{o.exports=function(o){var n=document.createElement("style");return o.setAttributes(n,o.attributes),o.insert(n,o.options),n}},892:(o,n,e)=>{o.exports=function(o){var n=e.nc;n&&o.setAttribute("nonce",n)}},36:o=>{o.exports=function(o){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=o.insertStyleElement(o);return{update:function(e){!function(o,n,e){var r="";e.supports&&(r+="@supports (".concat(e.supports,") {")),e.media&&(r+="@media ".concat(e.media," {"));var t=void 0!==e.layer;t&&(r+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),r+=e.css,t&&(r+="}"),e.media&&(r+="}"),e.supports&&(r+="}");var a=e.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(r,o,n.options)}(n,o,e)},remove:function(){!function(o){if(null===o.parentNode)return!1;o.parentNode.removeChild(o)}(n)}}}},464:o=>{o.exports=function(o,n){if(n.styleSheet)n.styleSheet.cssText=o;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(o))}}}},n={};function e(r){var t=n[r];if(void 0!==t)return t.exports;var a=n[r]={id:r,exports:{}};return o[r](a,a.exports,e),a.exports}e.n=o=>{var n=o&&o.__esModule?()=>o.default:()=>o;return e.d(n,{a:n}),n},e.d=(o,n)=>{for(var r in n)e.o(n,r)&&!e.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:n[r]})},e.o=(o,n)=>Object.prototype.hasOwnProperty.call(o,n),e.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})},e.nc=void 0;var r={};(()=>{e.r(r);var o=e(62),n=e.n(o),t=e(36),a=e.n(t),i=e(793),l=e.n(i),d=e(892),c=e.n(d),b=e(173),p=e.n(b),s=e(464),u=e.n(s),g=e(245),h={};h.styleTagTransform=u(),h.setAttributes=c(),h.insert=l().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=p();n()(g.Z,h);g.Z&&g.Z.locals&&g.Z.locals;var f=e(489),x={};x.styleTagTransform=u(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=a(),x.insertStyleElement=p();n()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=r})();
1
+ (()=>{"use strict";var o={489:(o,e,n)=>{n.d(e,{Z:()=>l});var r=n(601),t=n.n(r),a=n(609),i=n.n(a)()(t());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 r=n(601),t=n.n(r),a=n(609),i=n.n(a)()(t());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: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 .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}.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-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.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 .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;flex-shrink:1;margin:2px}.toolbar-grid-selector .choice-button:focus-within{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:opacity(0.5) sepia(0.2);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;filter:opacity(0.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-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 toolbar--edgemenu-transition-in{from{transform:translate(0, 100%)}to{transform:translate(0, 0)}}@keyframes toolbar--edgemenu-transition-out{to{transform:translate(0, 100%)}}@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: 610px){.toolbar-edge-toolbar{flex-wrap:nowrap}.toolbar-edge-toolbar>.toolbar-action-row{max-width:50vw}}@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 label{opacity:0;animation:.2s linear hide-initially}@keyframes hide-initially{from{opacity:0}to{opacity:0}}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}}@media screen and (max-width: 700px)and (hover: hover){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline .toolbar-button:hover>label{opacity:.8;animation:1s ease show-label}}@media screen and (max-width: 700px){.toolbar-edge-toolbar.one-row>*>.toolbar-toolContainer.label-inline .toolbar-button:active>label{opacity:.8;animation:.5s ease show-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);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s 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}}.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:10px;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:10px;margin-left:0}.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)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover>label{opacity:.8;animation:1s ease show-label}}.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active>label{opacity:.8;animation:.5s ease show-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);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s 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>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:none}}.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)}@keyframes rehide-label{0%{opacity:.8}80%{opacity:.8}100%{opacity:.1}}@keyframes show-label{0%{opacity:0}80%{opacity:0}100%{opacity:.8}}@keyframes keep-label-hidden{0%{opacity:0}100%{opacity:0}}@media(hover: hover){.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover>label>.button-label-text{opacity:.8;animation:1s ease show-label}}.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active>label>.button-label-text{opacity:.8;animation:.5s ease show-label}.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);pointer-events:none;background-color:var(--background-color-1);color:var(--foreground-color-1);border-radius:25px;padding:10px;transition:.2s 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-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}.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>label{padding-right:35px;min-width:105px;flex-shrink:1;box-sizing:border-box}.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList>div>input[type=checkbox]{width:20px;height:20px}.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}.selection-tool-selection-background{background-color:var(--selection-background-color);opacity:.5;overflow:visible;position:absolute}.selection-tool-handle{border:1px solid var(--foreground-color-1);background:var(--background-color-1);position:absolute;cursor:grab}.selection-tool-handle.selection-tool-circle{border-radius:100%}.overlay.handleOverlay{height:0;overflow:visible}@keyframes selection-duplicated-animation{0%{transform:scale(1, 1)}50%{transform:scale(1.02, 1.02)}100%{transform: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: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{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{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{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;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;bottom:0;left:0;right:0}.imageEditorContainer .accessibilityAnnouncement{opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.imageEditorContainer .textRendererOutputContainer{width:1px;height:1px;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="",r=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),r&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=o(e),r&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(o,n,r,t,a){"string"==typeof o&&(o=[[null,o,void 0]]);var i={};if(r)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]);r&&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),t&&(b[4]?(b[1]="@supports (".concat(b[4],") {").concat(b[1],"}"),b[4]=t):b[4]="".concat(t)),e.push(b))}},e}},601:o=>{o.exports=function(o){return o[1]}},62:o=>{var e=[];function n(o){for(var n=-1,r=0;r<e.length;r++)if(e[r].identifier===o){n=r;break}return n}function r(o,r){for(var a={},i=[],l=0;l<o.length;l++){var d=o[l],c=r.base?d[0]+r.base:d[0],b=a[c]||0,p="".concat(c," ").concat(b);a[c]=b+1;var s=n(p),u={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==s)e[s].references++,e[s].updater(u);else{var g=t(u,r);r.byIndex=l,e.splice(l,0,{identifier:p,updater:g,references:1})}i.push(p)}return i}function t(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,t){var a=r(o=o||[],t=t||{});return function(o){o=o||[];for(var i=0;i<a.length;i++){var l=n(a[i]);e[l].references--}for(var d=r(o,t),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 r=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(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.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 r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var t=void 0!==n.layer;t&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,t&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(r,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(r){var t=e[r];if(void 0!==t)return t.exports;var a=e[r]={id:r,exports:{}};return o[r](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 r in e)n.o(e,r)&&!n.o(o,r)&&Object.defineProperty(o,r,{enumerable:!0,get:e[r]})},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 r={};(()=>{n.r(r);var o=n(62),e=n.n(o),t=n(36),a=n.n(t),i=n(793),l=n.n(i),d=n(892),c=n.n(d),b=n(173),p=n.n(b),s=n(464),u=n.n(s),g=n(245),h={};h.styleTagTransform=u(),h.setAttributes=c(),h.insert=l().bind(null,"head"),h.domAPI=a(),h.insertStyleElement=p();e()(g.Z,h);g.Z&&g.Z.locals&&g.Z.locals;var f=n(489),x={};x.styleTagTransform=u(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=a(),x.insertStyleElement=p();e()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=r})();
package/dist/cjs/components/lib.d.ts CHANGED
@@ -10,7 +10,7 @@ import TextComponent from './TextComponent';
10
10
  import ImageComponent from './ImageComponent';
11
11
  import RestyleableComponent from './RestylableComponent';
12
12
  import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
13
- import BackgroundComponent from './BackgroundComponent';
13
+ import BackgroundComponent, { BackgroundType } from './BackgroundComponent';
14
14
  export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent,
15
15
  /** @deprecated use {@link TextComponent} */
16
- TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
16
+ TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, BackgroundType as BackgroundComponentBackgroundType, ImageComponent, };
package/dist/cjs/components/lib.js CHANGED
@@ -10,14 +10,26 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
10
10
  if (k2 === undefined) k2 = k;
11
11
  o[k2] = m[k];
12
12
  }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
13
18
  var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
19
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
20
  };
21
+ var __importStar = (this && this.__importStar) || function (mod) {
22
+ if (mod && mod.__esModule) return mod;
23
+ var result = {};
24
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
25
+ __setModuleDefault(result, mod);
26
+ return result;
27
+ };
16
28
  var __importDefault = (this && this.__importDefault) || function (mod) {
17
29
  return (mod && mod.__esModule) ? mod : { "default": mod };
18
30
  };
19
31
  Object.defineProperty(exports, "__esModule", { value: true });
20
- exports.ImageComponent = exports.BackgroundComponent = exports.StrokeComponent = exports.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makeFreehandLineBuilder = void 0;
32
+ exports.ImageComponent = exports.BackgroundComponentBackgroundType = exports.BackgroundComponent = exports.StrokeComponent = exports.Text = exports.TextComponent = exports.isRestylableComponent = exports.createRestyleComponentCommand = exports.Stroke = exports.AbstractComponent = exports.StrokeSmoother = exports.makeOutlinedCircleBuilder = exports.makePressureSensitiveFreehandLineBuilder = exports.makeFreehandLineBuilder = void 0;
21
33
  __exportStar(require("./builders/types"), exports);
22
34
  var FreehandLineBuilder_1 = require("./builders/FreehandLineBuilder");
23
35
  Object.defineProperty(exports, "makeFreehandLineBuilder", { enumerable: true, get: function () { return FreehandLineBuilder_1.makeFreehandLineBuilder; } });
@@ -41,5 +53,6 @@ exports.ImageComponent = ImageComponent_1.default;
41
53
  const RestylableComponent_1 = require("./RestylableComponent");
42
54
  Object.defineProperty(exports, "createRestyleComponentCommand", { enumerable: true, get: function () { return RestylableComponent_1.createRestyleComponentCommand; } });
43
55
  Object.defineProperty(exports, "isRestylableComponent", { enumerable: true, get: function () { return RestylableComponent_1.isRestylableComponent; } });
44
- const BackgroundComponent_1 = __importDefault(require("./BackgroundComponent"));
56
+ const BackgroundComponent_1 = __importStar(require("./BackgroundComponent"));
45
57
  exports.BackgroundComponent = BackgroundComponent_1.default;
58
+ Object.defineProperty(exports, "BackgroundComponentBackgroundType", { enumerable: true, get: function () { return BackgroundComponent_1.BackgroundType; } });
package/dist/cjs/rendering/RenderablePathSpec.d.ts CHANGED
@@ -6,6 +6,7 @@ interface RenderablePathSpec {
6
6
  style: RenderingStyle;
7
7
  path?: Path;
8
8
  }
9
+ /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
9
10
  export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
10
11
  export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpec;
11
12
  /**
package/dist/cjs/rendering/RenderablePathSpec.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.visualEquivalent = exports.pathToRenderable = exports.pathFromRenderable = void 0;
4
4
  const math_1 = require("@js-draw/math");
5
+ /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
5
6
  const pathFromRenderable = (renderable) => {
6
7
  if (renderable.path) {
7
8
  return renderable.path;
package/dist/cjs/rendering/lib.d.ts CHANGED
@@ -5,3 +5,4 @@ export { default as CanvasRenderer } from './renderers/CanvasRenderer';
5
5
  export { default as Display, RenderingMode } from './Display';
6
6
  export { default as TextRenderingStyle } from './TextRenderingStyle';
7
7
  export { default as RenderingStyle } from './RenderingStyle';
8
+ export { pathToRenderable, pathFromRenderable, visualEquivalent as pathVisualEquivalent, default as RenderablePathSpec, } from './RenderablePathSpec';
package/dist/cjs/rendering/lib.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.RenderingMode = exports.Display = exports.CanvasRenderer = exports.SVGRenderer = exports.DummyRenderer = exports.AbstractRenderer = void 0;
6
+ exports.pathVisualEquivalent = exports.pathFromRenderable = exports.pathToRenderable = exports.RenderingMode = exports.Display = exports.CanvasRenderer = exports.SVGRenderer = exports.DummyRenderer = exports.AbstractRenderer = void 0;
7
7
  var AbstractRenderer_1 = require("./renderers/AbstractRenderer");
8
8
  Object.defineProperty(exports, "AbstractRenderer", { enumerable: true, get: function () { return __importDefault(AbstractRenderer_1).default; } });
9
9
  var DummyRenderer_1 = require("./renderers/DummyRenderer");
@@ -15,3 +15,7 @@ Object.defineProperty(exports, "CanvasRenderer", { enumerable: true, get: functi
15
15
  var Display_1 = require("./Display");
16
16
  Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return __importDefault(Display_1).default; } });
17
17
  Object.defineProperty(exports, "RenderingMode", { enumerable: true, get: function () { return Display_1.RenderingMode; } });
18
+ var RenderablePathSpec_1 = require("./RenderablePathSpec");
19
+ Object.defineProperty(exports, "pathToRenderable", { enumerable: true, get: function () { return RenderablePathSpec_1.pathToRenderable; } });
20
+ Object.defineProperty(exports, "pathFromRenderable", { enumerable: true, get: function () { return RenderablePathSpec_1.pathFromRenderable; } });
21
+ Object.defineProperty(exports, "pathVisualEquivalent", { enumerable: true, get: function () { return RenderablePathSpec_1.visualEquivalent; } });
package/dist/cjs/util/ReactiveValue.js CHANGED
@@ -98,7 +98,7 @@ exports.ReactiveValue = ReactiveValue;
98
98
  class MutableReactiveValue extends ReactiveValue {
99
99
  static fromProperty(sourceValue, propertyName) {
100
100
  const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
101
- const childRef = new WeakRef(child);
101
+ const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
102
102
  // When the source is updated...
103
103
  const sourceListener = sourceValue.onUpdate(newValue => {
104
104
  const childValue = childRef.deref();
package/dist/cjs/util/adjustEditorThemeForContrast.d.ts CHANGED
@@ -49,5 +49,7 @@ import Editor from '../Editor';
49
49
  * });
50
50
  * ```
51
51
  */
52
- declare const adjustEditorThemeForContrast: (editor: Editor) => void;
52
+ declare const adjustEditorThemeForContrast: (editor: Editor, options?: {
53
+ dontClearOverrides: boolean;
54
+ }) => void;
53
55
  export default adjustEditorThemeForContrast;
package/dist/cjs/util/adjustEditorThemeForContrast.js CHANGED
@@ -51,50 +51,79 @@ const math_1 = require("@js-draw/math");
51
51
  * });
52
52
  * ```
53
53
  */
54
- const adjustEditorThemeForContrast = (editor) => {
54
+ const adjustEditorThemeForContrast = (editor, options) => {
55
55
  const editorElem = editor.getRootElement();
56
56
  // Each set of entries in colorPairs should resolve to colors with sufficient
57
57
  // contrast.
58
58
  const colorPairs = [
59
- ['--background-color-1', '--foreground-color-1'],
60
- ['--background-color-2', '--foreground-color-2'],
61
- ['--background-color-3', '--foreground-color-3'],
62
- ['--selection-background-color', '--selection-foreground-color'],
59
+ ['--background-color-1', '--foreground-color-1', true, true],
60
+ ['--background-color-2', '--foreground-color-2', true, true],
61
+ ['--background-color-3', '--foreground-color-3', true, true],
62
+ ['--background-color-2', '--primary-action-foreground-color', false, true],
63
+ ['--selection-background-color', '--selection-foreground-color', false, true],
63
64
  ];
64
- // Clear any overrides
65
- for (const [backgroundVar, foregroundVar] of colorPairs) {
66
- editorElem.style.setProperty(backgroundVar, null);
67
- editorElem.style.setProperty(foregroundVar, null);
65
+ if (!options?.dontClearOverrides) {
66
+ // Clear any overrides
67
+ for (const [backgroundVar, foregroundVar] of colorPairs) {
68
+ editorElem.style.setProperty(backgroundVar, null);
69
+ editorElem.style.setProperty(foregroundVar, null);
70
+ }
68
71
  }
69
72
  const styles = getComputedStyle(editorElem);
70
- const minContrast = 3;
71
- for (const [backgroundVar, foregroundVar] of colorPairs) {
72
- let color1 = math_1.Color4.fromString(styles.getPropertyValue(backgroundVar));
73
- let color2 = math_1.Color4.fromString(styles.getPropertyValue(foregroundVar));
74
- let swappedColors = false;
73
+ const updatedColors = Object.create(null);
74
+ const adjustVariablesForContrast = (var1, var2, minContrast,
75
+ // true if the variable can be updated
76
+ updateVar1, updateVar2) => {
77
+ // Fetch from updatedColors if available -- styles isn't updated dynamically.
78
+ let color1 = updatedColors[var1] ? updatedColors[var1] : math_1.Color4.fromString(styles.getPropertyValue(var1));
79
+ let color2 = updatedColors[var2] ? updatedColors[var2] : math_1.Color4.fromString(styles.getPropertyValue(var2));
75
80
  // Ensure that color1 has the lesser luminance
76
81
  if (color1.relativeLuminance() < color2.relativeLuminance()) {
77
82
  const tmp = color1;
78
83
  color1 = color2;
79
84
  color2 = tmp;
80
- swappedColors = true;
85
+ const oldVar2 = var2;
86
+ var2 = var1;
87
+ var1 = oldVar2;
88
+ const oldUpdateVar1 = updateVar1;
89
+ updateVar1 = updateVar2;
90
+ updateVar2 = oldUpdateVar1;
81
91
  }
82
92
  let colorsUpdated = false;
83
93
  let currentContrast = math_1.Color4.contrastRatio(color1, color2);
84
- const iterations = 0;
85
- while (currentContrast < minContrast && iterations < 5) {
94
+ let iterations = 0;
95
+ // Step the brightness of color1 and color2 in different directions while necessary
96
+ while (currentContrast < minContrast && iterations < 8) {
86
97
  const step = math_1.Vec3.of(0.1, 0.1, 0.1);
87
- color1 = math_1.Color4.fromRGBVector(color1.rgb.plus(step));
88
- color2 = math_1.Color4.fromRGBVector(color2.rgb.minus(step));
98
+ if (updateVar1) {
99
+ if (color2.eq(math_1.Color4.white) && !updateVar2) {
100
+ color2 = math_1.Color4.black;
101
+ }
102
+ color1 = math_1.Color4.fromRGBVector(color1.rgb.plus(step));
103
+ }
104
+ if (updateVar2) {
105
+ if (color2.eq(math_1.Color4.black) && !updateVar1) {
106
+ color2 = math_1.Color4.white;
107
+ }
108
+ color2 = math_1.Color4.fromRGBVector(color2.rgb.minus(step));
109
+ }
89
110
  currentContrast = math_1.Color4.contrastRatio(color1, color2);
90
111
  colorsUpdated = true;
112
+ iterations++;
91
113
  }
114
+ // Update the CSS variables if necessary
92
115
  if (colorsUpdated) {
93
- const newBackground = swappedColors ? color2 : color1;
94
- const newForeground = swappedColors ? color1 : color2;
95
- editorElem.style.setProperty(foregroundVar, newForeground.toHexString());
96
- editorElem.style.setProperty(backgroundVar, newBackground.toHexString());
116
+ editorElem.style.setProperty(var1, color1.toHexString());
117
+ editorElem.style.setProperty(var2, color2.toHexString());
118
+ updatedColors[var1] = color1;
119
+ updatedColors[var2] = color2;
97
120
  }
121
+ };
122
+ // Also adjust the selection background
123
+ adjustVariablesForContrast('--selection-background-color', '--background-color-2', 1.29, true, false);
124
+ for (const [backgroundVar, foregroundVar, updateBackground, updateForeground] of colorPairs) {
125
+ const minContrast = 4.5;
126
+ adjustVariablesForContrast(backgroundVar, foregroundVar, minContrast, updateBackground, updateForeground);
98
127
  }
99
128
  };
100
129
  exports.default = adjustEditorThemeForContrast;
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.2.0',
4
+ number: '1.2.2',
5
5
  };
package/dist/mjs/components/lib.d.ts CHANGED
@@ -10,7 +10,7 @@ import TextComponent from './TextComponent';
10
10
  import ImageComponent from './ImageComponent';
11
11
  import RestyleableComponent from './RestylableComponent';
12
12
  import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
13
- import BackgroundComponent from './BackgroundComponent';
13
+ import BackgroundComponent, { BackgroundType } from './BackgroundComponent';
14
14
  export { Stroke, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent,
15
15
  /** @deprecated use {@link TextComponent} */
16
- TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
16
+ TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, BackgroundType as BackgroundComponentBackgroundType, ImageComponent, };
package/dist/mjs/components/lib.mjs CHANGED
@@ -9,7 +9,7 @@ import Stroke from './Stroke.mjs';
9
9
  import TextComponent from './TextComponent.mjs';
10
10
  import ImageComponent from './ImageComponent.mjs';
11
11
  import { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent.mjs';
12
- import BackgroundComponent from './BackgroundComponent.mjs';
12
+ import BackgroundComponent, { BackgroundType } from './BackgroundComponent.mjs';
13
13
  export { Stroke, createRestyleComponentCommand, isRestylableComponent, TextComponent,
14
14
  /** @deprecated use {@link TextComponent} */
15
- TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };
15
+ TextComponent as Text, Stroke as StrokeComponent, BackgroundComponent, BackgroundType as BackgroundComponentBackgroundType, ImageComponent, };
package/dist/mjs/rendering/RenderablePathSpec.d.ts CHANGED
@@ -6,6 +6,7 @@ interface RenderablePathSpec {
6
6
  style: RenderingStyle;
7
7
  path?: Path;
8
8
  }
9
+ /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
9
10
  export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
10
11
  export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpec;
11
12
  /**
package/dist/mjs/rendering/RenderablePathSpec.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Mat33, Path, PathCommandType } from '@js-draw/math';
2
+ /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
2
3
  export const pathFromRenderable = (renderable) => {
3
4
  if (renderable.path) {
4
5
  return renderable.path;
package/dist/mjs/rendering/lib.d.ts CHANGED
@@ -5,3 +5,4 @@ export { default as CanvasRenderer } from './renderers/CanvasRenderer';
5
5
  export { default as Display, RenderingMode } from './Display';
6
6
  export { default as TextRenderingStyle } from './TextRenderingStyle';
7
7
  export { default as RenderingStyle } from './RenderingStyle';
8
+ export { pathToRenderable, pathFromRenderable, visualEquivalent as pathVisualEquivalent, default as RenderablePathSpec, } from './RenderablePathSpec';
package/dist/mjs/rendering/lib.mjs CHANGED
@@ -3,3 +3,4 @@ export { default as DummyRenderer } from './renderers/DummyRenderer.mjs';
3
3
  export { default as SVGRenderer } from './renderers/SVGRenderer.mjs';
4
4
  export { default as CanvasRenderer } from './renderers/CanvasRenderer.mjs';
5
5
  export { default as Display, RenderingMode } from './Display.mjs';
6
+ export { pathToRenderable, pathFromRenderable, visualEquivalent as pathVisualEquivalent, } from './RenderablePathSpec.mjs';
package/dist/mjs/util/ReactiveValue.mjs CHANGED
@@ -94,7 +94,7 @@ export class ReactiveValue {
94
94
  export class MutableReactiveValue extends ReactiveValue {
95
95
  static fromProperty(sourceValue, propertyName) {
96
96
  const child = ReactiveValue.fromInitialValue(sourceValue.get()[propertyName]);
97
- const childRef = new WeakRef(child);
97
+ const childRef = window.WeakRef ? new WeakRef(child) : { deref: () => child };
98
98
  // When the source is updated...
99
99
  const sourceListener = sourceValue.onUpdate(newValue => {
100
100
  const childValue = childRef.deref();
package/dist/mjs/util/adjustEditorThemeForContrast.d.ts CHANGED
@@ -49,5 +49,7 @@ import Editor from '../Editor';
49
49
  * });
50
50
  * ```
51
51
  */
52
- declare const adjustEditorThemeForContrast: (editor: Editor) => void;
52
+ declare const adjustEditorThemeForContrast: (editor: Editor, options?: {
53
+ dontClearOverrides: boolean;
54
+ }) => void;
53
55
  export default adjustEditorThemeForContrast;
package/dist/mjs/util/adjustEditorThemeForContrast.mjs CHANGED
@@ -49,50 +49,79 @@ import { Color4, Vec3 } from '@js-draw/math';
49
49
  * });
50
50
  * ```
51
51
  */
52
- const adjustEditorThemeForContrast = (editor) => {
52
+ const adjustEditorThemeForContrast = (editor, options) => {
53
53
  const editorElem = editor.getRootElement();
54
54
  // Each set of entries in colorPairs should resolve to colors with sufficient
55
55
  // contrast.
56
56
  const colorPairs = [
57
- ['--background-color-1', '--foreground-color-1'],
58
- ['--background-color-2', '--foreground-color-2'],
59
- ['--background-color-3', '--foreground-color-3'],
60
- ['--selection-background-color', '--selection-foreground-color'],
57
+ ['--background-color-1', '--foreground-color-1', true, true],
58
+ ['--background-color-2', '--foreground-color-2', true, true],
59
+ ['--background-color-3', '--foreground-color-3', true, true],
60
+ ['--background-color-2', '--primary-action-foreground-color', false, true],
61
+ ['--selection-background-color', '--selection-foreground-color', false, true],
61
62
  ];
62
- // Clear any overrides
63
- for (const [backgroundVar, foregroundVar] of colorPairs) {
64
- editorElem.style.setProperty(backgroundVar, null);
65
- editorElem.style.setProperty(foregroundVar, null);
63
+ if (!options?.dontClearOverrides) {
64
+ // Clear any overrides
65
+ for (const [backgroundVar, foregroundVar] of colorPairs) {
66
+ editorElem.style.setProperty(backgroundVar, null);
67
+ editorElem.style.setProperty(foregroundVar, null);
68
+ }
66
69
  }
67
70
  const styles = getComputedStyle(editorElem);
68
- const minContrast = 3;
69
- for (const [backgroundVar, foregroundVar] of colorPairs) {
70
- let color1 = Color4.fromString(styles.getPropertyValue(backgroundVar));
71
- let color2 = Color4.fromString(styles.getPropertyValue(foregroundVar));
72
- let swappedColors = false;
71
+ const updatedColors = Object.create(null);
72
+ const adjustVariablesForContrast = (var1, var2, minContrast,
73
+ // true if the variable can be updated
74
+ updateVar1, updateVar2) => {
75
+ // Fetch from updatedColors if available -- styles isn't updated dynamically.
76
+ let color1 = updatedColors[var1] ? updatedColors[var1] : Color4.fromString(styles.getPropertyValue(var1));
77
+ let color2 = updatedColors[var2] ? updatedColors[var2] : Color4.fromString(styles.getPropertyValue(var2));
73
78
  // Ensure that color1 has the lesser luminance
74
79
  if (color1.relativeLuminance() < color2.relativeLuminance()) {
75
80
  const tmp = color1;
76
81
  color1 = color2;
77
82
  color2 = tmp;
78
- swappedColors = true;
83
+ const oldVar2 = var2;
84
+ var2 = var1;
85
+ var1 = oldVar2;
86
+ const oldUpdateVar1 = updateVar1;
87
+ updateVar1 = updateVar2;
88
+ updateVar2 = oldUpdateVar1;
79
89
  }
80
90
  let colorsUpdated = false;
81
91
  let currentContrast = Color4.contrastRatio(color1, color2);
82
- const iterations = 0;
83
- while (currentContrast < minContrast && iterations < 5) {
92
+ let iterations = 0;
93
+ // Step the brightness of color1 and color2 in different directions while necessary
94
+ while (currentContrast < minContrast && iterations < 8) {
84
95
  const step = Vec3.of(0.1, 0.1, 0.1);
85
- color1 = Color4.fromRGBVector(color1.rgb.plus(step));
86
- color2 = Color4.fromRGBVector(color2.rgb.minus(step));
96
+ if (updateVar1) {
97
+ if (color2.eq(Color4.white) && !updateVar2) {
98
+ color2 = Color4.black;
99
+ }
100
+ color1 = Color4.fromRGBVector(color1.rgb.plus(step));
101
+ }
102
+ if (updateVar2) {
103
+ if (color2.eq(Color4.black) && !updateVar1) {
104
+ color2 = Color4.white;
105
+ }
106
+ color2 = Color4.fromRGBVector(color2.rgb.minus(step));
107
+ }
87
108
  currentContrast = Color4.contrastRatio(color1, color2);
88
109
  colorsUpdated = true;
110
+ iterations++;
89
111
  }
112
+ // Update the CSS variables if necessary
90
113
  if (colorsUpdated) {
91
- const newBackground = swappedColors ? color2 : color1;
92
- const newForeground = swappedColors ? color1 : color2;
93
- editorElem.style.setProperty(foregroundVar, newForeground.toHexString());
94
- editorElem.style.setProperty(backgroundVar, newBackground.toHexString());
114
+ editorElem.style.setProperty(var1, color1.toHexString());
115
+ editorElem.style.setProperty(var2, color2.toHexString());
116
+ updatedColors[var1] = color1;
117
+ updatedColors[var2] = color2;
95
118
  }
119
+ };
120
+ // Also adjust the selection background
121
+ adjustVariablesForContrast('--selection-background-color', '--background-color-2', 1.29, true, false);
122
+ for (const [backgroundVar, foregroundVar, updateBackground, updateForeground] of colorPairs) {
123
+ const minContrast = 4.5;
124
+ adjustVariablesForContrast(backgroundVar, foregroundVar, minContrast, updateBackground, updateForeground);
96
125
  }
97
126
  };
98
127
  export default adjustEditorThemeForContrast;