js-draw 0.20.0 → 0.22.0

package/dist/bundledStyles.js

@@ -1 +1 @@
-(()=>{"use strict";var r={786:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,'.clr-picker {\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  position: absolute;\r\n  width: 200px;\r\n  z-index: 1000;\r\n  border-radius: 10px;\r\n  background-color: #fff;\r\n  justify-content: flex-end;\r\n  direction: ltr;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  -moz-user-select: none;\r\n  -webkit-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.clr-picker.clr-open,\r\n.clr-picker[data-inline="true"] {\r\n  display: flex;\r\n}\r\n\r\n.clr-picker[data-inline="true"] {\r\n  position: relative;\r\n}\r\n\r\n.clr-gradient {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100px;\r\n  margin-bottom: 15px;\r\n  border-radius: 3px 3px 0 0;\r\n  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker {\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  margin: -6px 0 0 -6px;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  height: 8px;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-track {\r\n  width: 100%;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-hue {\r\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%);\r\n}\r\n\r\n.clr-hue,\r\n.clr-alpha {\r\n  position: relative;\r\n  width: calc(100% - 40px);\r\n  height: 8px;\r\n  margin: 5px 20px;\r\n  border-radius: 4px;\r\n}\r\n\r\n.clr-alpha span {\r\n  display: block;\r\n  height: 100%;\r\n  width: 100%;\r\n  border-radius: inherit;\r\n  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\r\n}\r\n\r\n.clr-hue input,\r\n.clr-alpha input {\r\n  position: absolute;\r\n  width: calc(100% + 16px);\r\n  height: 16px;\r\n  left: -8px;\r\n  top: -4px;\r\n  margin: 0;\r\n  background-color: transparent;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-hue div,\r\n.clr-alpha div {\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 16px;\r\n  left: 0;\r\n  top: 50%;\r\n  margin-left: -8px;\r\n  transform: translateY(-50%);\r\n  border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  box-shadow: 0 0 1px #888;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-alpha div:before {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n}\r\n\r\n.clr-format {\r\n  display: none;\r\n  order: 1;\r\n  width: calc(100% - 40px);\r\n  margin: 0 20px 20px;\r\n}\r\n\r\n.clr-segmented {\r\n  display: flex;\r\n  position: relative;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 1px solid #ddd;\r\n  border-radius: 15px;\r\n  box-sizing: border-box;\r\n  color: #999;\r\n  font-size: 12px;\r\n}\r\n\r\n.clr-segmented input,\r\n.clr-segmented legend {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  left: 0;\r\n  top: 0;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-segmented label {\r\n  flex-grow: 1;\r\n  margin: 0;\r\n  padding: 4px 0;\r\n  font-size: inherit;\r\n  font-weight: normal;\r\n  line-height: initial;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-segmented label:first-of-type {\r\n  border-radius: 10px 0 0 10px;\r\n}\r\n\r\n.clr-segmented label:last-of-type {\r\n  border-radius: 0 10px 10px 0;\r\n}\r\n\r\n.clr-segmented input:checked + label {\r\n  color: #fff;\r\n  background-color: #666;\r\n}\r\n\r\n.clr-swatches {\r\n  order: 2;\r\n  width: calc(100% - 32px);\r\n  margin: 0 16px;\r\n}\r\n\r\n.clr-swatches div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  padding-bottom: 12px;\r\n  justify-content: center;\r\n}\r\n\r\n.clr-swatches button {\r\n  position: relative;\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 0 4px 6px 4px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-swatches button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\ninput.clr-color {\r\n  order: 1;\r\n  width: calc(100% - 80px);\r\n  height: 32px;\r\n  margin: 15px 20px 20px auto;\r\n  padding: 0 10px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 16px;\r\n  color: #444;\r\n  background-color: #fff;\r\n  font-family: sans-serif;\r\n  font-size: 14px;\r\n  text-align: center;\r\n  box-shadow: none;\r\n}\r\n\r\ninput.clr-color:focus {\r\n  outline: none;\r\n  border: 1px solid #1e90ff;\r\n}\r\n\r\n.clr-close,\r\n.clr-clear {\r\n  display: none;\r\n  order: 2;\r\n  height: 24px;\r\n  margin: 0 20px 20px;\r\n  padding: 0 20px;\r\n  border: 0;\r\n  border-radius: 12px;\r\n  color: #fff;\r\n  background-color: #666;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-close {\r\n  display: block;\r\n  margin: 0 20px 20px auto;\r\n}\r\n\r\n.clr-preview {\r\n  position: relative;\r\n  width: 32px;\r\n  height: 32px;\r\n  margin: 15px 0 20px 20px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\n.clr-preview:before,\r\n.clr-preview:after {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n}\r\n\r\n.clr-preview:after {\r\n  border: 0;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\n.clr-preview button {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background-color: transparent;\r\n  text-indent: -9999px;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker,\r\n.clr-hue div,\r\n.clr-alpha div,\r\n.clr-color {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-field {\r\n  display: inline-block;\r\n  position: relative;\r\n  color: transparent;\r\n}\r\n\r\n.clr-field input {\r\n  margin: 0;\r\n  direction: ltr;\r\n}\r\n\r\n.clr-field.clr-rtl input {\r\n  text-align: right;\r\n}\r\n\r\n.clr-field button {\r\n  position: absolute;\r\n  width: 30px;\r\n  height: 100%;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-field.clr-rtl button {\r\n  right: auto;\r\n  left: 0;\r\n}\r\n\r\n.clr-field button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 1px rgba(0,0,0,.5);\r\n}\r\n\r\n.clr-alpha,\r\n.clr-alpha div,\r\n.clr-swatches button,\r\n.clr-preview:before,\r\n.clr-field button {\r\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);\r\n  background-position: 0 0, 4px 4px;\r\n  background-size: 8px 8px;\r\n}\r\n\r\n.clr-marker:focus {\r\n  outline: none;\r\n}\r\n\r\n.clr-keyboard-nav .clr-marker:focus,\r\n.clr-keyboard-nav .clr-hue input:focus + div,\r\n.clr-keyboard-nav .clr-alpha input:focus + div,\r\n.clr-keyboard-nav .clr-segmented input:focus + label {\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\r\n}\r\n\r\n.clr-picker[data-alpha="false"] .clr-alpha {\r\n  display: none;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] {\r\n  padding-top: 16px;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] .clr-gradient,\r\n.clr-picker[data-minimal="true"] .clr-hue,\r\n.clr-picker[data-minimal="true"] .clr-alpha,\r\n.clr-picker[data-minimal="true"] .clr-color,\r\n.clr-picker[data-minimal="true"] .clr-preview {\r\n  display: none;\r\n}\r\n\r\n/** Dark theme **/\r\n\r\n.clr-dark {\r\n  background-color: #444;\r\n}\r\n\r\n.clr-dark .clr-segmented {\r\n  border-color: #777;\r\n}\r\n\r\n.clr-dark .clr-swatches button:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\r\n}\r\n\r\n.clr-dark input.clr-color {\r\n  color: #fff;\r\n  border-color: #777;\r\n  background-color: #555;\r\n}\r\n\r\n.clr-dark input.clr-color:focus {\r\n  border-color: #1e90ff;\r\n}\r\n\r\n.clr-dark .clr-preview:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\r\n}\r\n\r\n.clr-dark .clr-alpha,\r\n.clr-dark .clr-alpha div,\r\n.clr-dark .clr-swatches button,\r\n.clr-dark .clr-preview:before {\r\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);\r\n}\r\n\r\n/** Polaroid theme **/\r\n\r\n.clr-picker.clr-polaroid {\r\n  border-radius: 6px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-picker.clr-polaroid:before {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 10px;\r\n  left: 20px;\r\n  top: -10px;\r\n  border: solid transparent;\r\n  border-width: 0 8px 10px 8px;\r\n  border-bottom-color: currentColor;\r\n  box-sizing: border-box;\r\n  color: #fff;\r\n  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-dark:before {\r\n  color: #444;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-left:before {\r\n  left: auto;\r\n  right: 20px;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-top:before {\r\n  top: auto;\r\n  bottom: -10px;\r\n  transform: rotateZ(180deg);\r\n}\r\n\r\n.clr-polaroid .clr-gradient {\r\n  width: calc(100% - 20px);\r\n  height: 120px;\r\n  margin: 10px;\r\n  border-radius: 3px;\r\n}\r\n\r\n.clr-polaroid .clr-hue,\r\n.clr-polaroid .clr-alpha {\r\n  width: calc(100% - 30px);\r\n  height: 10px;\r\n  margin: 6px 15px;\r\n  border-radius: 5px;\r\n}\r\n\r\n.clr-polaroid .clr-hue div,\r\n.clr-polaroid .clr-alpha div {\r\n  box-shadow: 0 0 5px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-polaroid .clr-format {\r\n  width: calc(100% - 20px);\r\n  margin: 0 10px 15px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches {\r\n  width: calc(100% - 12px);\r\n  margin: 0 6px;\r\n}\r\n.clr-polaroid .clr-swatches div {\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n.clr-polaroid input.clr-color {\r\n  width: calc(100% - 60px);\r\n  margin: 10px 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-clear {\r\n  margin: 0 10px 15px 10px;\r\n}\r\n\r\n.clr-polaroid .clr-close {\r\n  margin: 0 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-preview {\r\n  margin: 10px 0 15px 10px;\r\n}\r\n\r\n/** Large theme **/\r\n\r\n.clr-picker.clr-large {\r\n  width: 275px;\r\n}\r\n\r\n.clr-large .clr-gradient {\r\n  height: 150px;\r\n}\r\n\r\n.clr-large .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n/** Pill (horizontal) theme **/\r\n\r\n.clr-picker.clr-pill {\r\n  width: 380px;\r\n  padding-left: 180px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-pill .clr-gradient {\r\n  position: absolute;\r\n  width: 180px;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  margin-bottom: 0;\r\n  border-radius: 3px 0 0 3px;\r\n}\r\n\r\n.clr-pill .clr-hue {\r\n  margin-top: 20px;\r\n}',""]);const l=a},59:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(771),d=o(443),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([r.id,"\n.imageEditorContainer {\n\t/* Deafult colors for the editor */\n    --primary-background-color: white;\n    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);\n    --secondary-background-color: #faf;\n    --primary-foreground-color: black;\n    --secondary-foreground-color: black;\n\t--primary-shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.imageEditorContainer {\n\t\t--primary-background-color: #151515;\n\t\t--primary-background-color-transparent: rgba(50, 50, 50, 0.5);\n\t\t--secondary-background-color: #607;\n\t\t--primary-foreground-color: white;\n\t\t--secondary-foreground-color: white;\n\t\t--primary-shadow-color: rgba(250, 250, 250, 0.5);\n\t}\n}\n\n.imageEditorContainer {\n\tcolor: var(--primary-foreground-color);\n\tfont-family: system-ui, -apple-system, sans-serif;\n\tbackground-color: var(--primary-background-color);\n\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n}\n\n.imageEditorContainer .imageEditorRenderArea {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr;\n\tflex-grow: 2;\n\tflex-shrink: 1;\n\tmin-height: 100px;\n}\n\n.imageEditorContainer .imageEditorRenderArea canvas {\n\t/* Stack all canvases on top of each other */\n\tgrid-row: 1 / 1;\n\tgrid-column: 1 / 1;\n\ttouch-action: none;\n\n\t/* Fill the container */\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Allow the canvas to shrink (needed in Chrome) */\n\tmin-height: 0px;\n\tmax-height: inherit;\n}\n\n.imageEditorContainer .loadingMessage {\n\tposition: fixed;\n\ttext-align: center;\n\tfont-size: 2em;\n\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n}\n\n.imageEditorContainer .accessibilityAnnouncement {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.imageEditorContainer .textRendererOutputContainer {\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n}\n\n.imageEditorContainer .textRendererOutputContainer:focus-within {\n\toverflow: visible;\n\tz-index: 5;\n}\n",""]);const p=c},771:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(350),d=o(519),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([r.id,".toolbar-root {\n\tbackground-color: var(--primary-background-color);\n\t--icon-color: var(--primary-foreground-color);\n\n\n\tborder: 1px solid var(--secondary-background-color);\n\tborder-radius: 2px;\n\tflex-wrap: wrap;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\n\t--toolbar-button-height: min(20vh, 60px);\n\n\t/* Display above selection dialogs, etc. */\n\tz-index: 2;\n\n\tfont-family: system-ui, -apple-system, sans-serif;\n}\n\n.toolbar-root > .toolbar-toolContainer > .toolbar-button,\n.toolbar-root > .toolbar-toolContainer > * > button,\n.toolbar-root > .toolbar-buttonGroup > button,\n.toolbar-root > .toolbar-button {\n\twidth: min-content;\n\twhite-space: pre;\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-dropdown .toolbar-button > .toolbar-icon {\n\tmax-width: 50px;\n\twidth: 100%;\n}\n\n.toolbar-button.disabled {\n\tfilter: opacity(0.5) sepia(0.2);\n\tcursor: unset;\n}\n\n.toolbar-button, .toolbar-root button {\n\tcursor: pointer;\n\ttext-align: center;\n\tborder-radius: 6px;\n\n\t--icon-color: var(--primary-foreground-color);\n\tbackground-color: var(--primary-background-color);\n\tcolor: var(--primary-foreground-color);\n\tborder: none;\n\tbox-shadow: 0px 0px 2px var(--primary-shadow-color);\n\n\ttransition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;\n}\n\n.toolbar-button,\n.toolbar-buttonGroup > button,\n.toolbar-toolContainer > * > button,\n.toolbar-root > button {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding-left: 3px;\n\tpadding-right: 3px;\n\tmargin-left: 3px;\n\tmargin-right: 3px;\n\n\tmin-width: 40px;\n\twidth: min-content;\n\tfont-size: 1em;\n}\n\n.toolbar-button > label {\n\tcursor: inherit;\n}\n\n.toolbar-dropdown > .toolbar-toolContainer > button,\n.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {\n\twidth: 6em;\n}\n\n.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {\n\tbox-shadow: 0px 2px 4px var(--primary-shadow-color);\n}\n\n.toolbar-root button:disabled {\n\tcursor: inherit;\n\tfilter: opacity(0.5);\n}\n\n.toolbar-root .toolbar-icon {\n\tflex-shrink: 1;\n\n\twidth: 100%;\n\tmin-width: 30px;\n\tmin-height: 30px;\n}\n\n.toolbar-toolContainer.selected > .toolbar-button {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {\n\tdisplay: none;\n}\n\n.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\theight: 10px;\n\ttransition: transform 0.5s ease;\n}\n\n.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {\n\ttransform: rotate(180deg);\n}\n\n.toolbar-dropdown.hidden,\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {\n\tdisplay: none;\n}\n\n.toolbar-dropdown {\n\tposition: absolute;\n\tpadding: 15px;\n\tpadding-top: 5px;\n\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmax-height: 80vh;\n\n\tmax-width: fit-content;\n\n\t/* Prevent overlap/being displayed under the undo/redo buttons */\n\tz-index: 2;\n\tbackground-color: var(--primary-background-color);\n\tbox-shadow: 0px 3px 3px var(--primary-shadow-color);\n}\n\n.toolbar-buttonGroup {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n}\n\n.toolbar-closeColorPickerOverlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\tbackground-color: var(--primary-background-color);\n\topacity: 0.3;\n}\n\n/* Make color selection buttons fill their containing label */\n.toolbar-dropdown .clr-field button {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 2px;\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor {\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {\n\tflex-grow: 1;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor button {\n\tmin-width: 48px;\n}\n\n.color-input-container {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n}\n\n.color-input-container .pipetteButton {\n\twidth: 30px;\n\theight: 30px;\n\tpadding: 0;\n\tdisplay: inline-flex;\n}\n\n.color-input-container .pipetteButton > svg {\n\twidth: 100%;\n}\n\n.color-input-container .pipetteButton.active {\n\tbackground-color: var(--secondary-background-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-spacedList > * {\n\tpadding-bottom: 5px;\n\tpadding-top: 5px;\n}",""]);const p=c},350:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-image-selection-overlay {\n\tposition: absolute;\n\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 10;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.toolbar-image-selection-overlay > div {\n\tbackground: var(--primary-background-color);\n\tbox-shadow: 1px 1px 3px var(--primary-shadow-color);\n\n\tpadding: 18px;\n\tborder-radius: 3px;\n}\n\n.toolbar-image-selection-overlay > div > div {\n\tpadding: 5px;\n}\n\n.toolbar-image-selection-overlay img {\n\tmax-width: min(50vw, 75%);\n\tmax-height: 50vh;\n\n\t/* Center */\n\tdisplay: block;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.toolbar-image-selection-overlay .action-button-row {\n\tmargin-top: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-image-selection-overlay .action-button-row > button {\n\tflex-grow: 1;\n}",""]);const l=a},519:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-overflow-widget-overflow-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n}\n\n.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {\n\tflex-direction: row;\n}\n\n.toolbar-overflow-widget.horizontal > .toolbar-dropdown {\n\tmax-width: 100%;\n\tleft: 15px;\n\tright: 15px;\n\n\t/* Override the default transform and margin-left */\n\tmargin-left: 0 !important;\n\ttransform: none !important;\n\n\tpadding: 4px;\n}",""]);const l=a},324:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.find-tool-overlay {\n    /* Show at the bottom of the screen. */\n    order: -1;\n\n    position: absolute;\n}",""]);const l=a},611:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.selection-tool-selection-background {\n    background-color: var(--secondary-background-color);\n    opacity: 0.5;\n    overflow: visible;\n    position: absolute;\n}\n\n.selection-tool-handle {\n    border: 1px solid var(--primary-foreground-color);\n    background: var(--primary-background-color);\n    position: absolute;\n    cursor: grab;\n}\n\n.selection-tool-handle.selection-tool-circle {\n    border-radius: 100%;\n}\n\n.overlay.handleOverlay {\n    height: 0;\n    overflow: visible;\n}",""]);const l=a},34:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.js-draw-sound-ui-toggle {\n\twidth: 0px;\n\theight: 0px;\n\toverflow: hidden;    \n}\n\n.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {\n\topacity: 0.5;\n}\n",""]);const l=a},443:(r,n,o)=>{o.d(n,{Z:()=>s});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(611),d=o(324),c=o(34),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([r.id,"",""]);const s=p},645:r=>{r.exports=function(r){var n=[];return n.toString=function(){return this.map((function(n){var o="",t=void 0!==n[5];return n[4]&&(o+="@supports (".concat(n[4],") {")),n[2]&&(o+="@media ".concat(n[2]," {")),t&&(o+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),o+=r(n),t&&(o+="}"),n[2]&&(o+="}"),n[4]&&(o+="}"),o})).join("")},n.i=function(r,o,t,e,i){"string"==typeof r&&(r=[[null,r,void 0]]);var a={};if(t)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(a[d]=!0)}for(var c=0;c<r.length;c++){var p=[].concat(r[c]);t&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),n.push(p))}},n}},81:r=>{r.exports=function(r){return r[1]}},379:r=>{var n=[];function o(r){for(var o=-1,t=0;t<n.length;t++)if(n[t].identifier===r){o=t;break}return o}function t(r,t){for(var i={},a=[],l=0;l<r.length;l++){var d=r[l],c=t.base?d[0]+t.base:d[0],p=i[c]||0,s="".concat(c," ").concat(p);i[c]=p+1;var u=o(s),b={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==u)n[u].references++,n[u].updater(b);else{var h=e(b,t);t.byIndex=l,n.splice(l,0,{identifier:s,updater:h,references:1})}a.push(s)}return a}function e(r,n){var o=n.domAPI(n);o.update(r);return function(n){if(n){if(n.css===r.css&&n.media===r.media&&n.sourceMap===r.sourceMap&&n.supports===r.supports&&n.layer===r.layer)return;o.update(r=n)}else o.remove()}}r.exports=function(r,e){var i=t(r=r||[],e=e||{});return function(r){r=r||[];for(var a=0;a<i.length;a++){var l=o(i[a]);n[l].references--}for(var d=t(r,e),c=0;c<i.length;c++){var p=o(i[c]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}i=d}}},569:r=>{var n={};r.exports=function(r,o){var t=function(r){if(void 0===n[r]){var o=document.querySelector(r);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(r){o=null}n[r]=o}return n[r]}(r);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}},216:r=>{r.exports=function(r){var n=document.createElement("style");return r.setAttributes(n,r.attributes),r.insert(n,r.options),n}},565:(r,n,o)=>{r.exports=function(r){var n=o.nc;n&&r.setAttribute("nonce",n)}},795:r=>{r.exports=function(r){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=r.insertStyleElement(r);return{update:function(o){!function(r,n,o){var t="";o.supports&&(t+="@supports (".concat(o.supports,") {")),o.media&&(t+="@media ".concat(o.media," {"));var e=void 0!==o.layer;e&&(t+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),t+=o.css,e&&(t+="}"),o.media&&(t+="}"),o.supports&&(t+="}");var i=o.sourceMap;i&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(t,r,n.options)}(n,r,o)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(n)}}}},589:r=>{r.exports=function(r,n){if(n.styleSheet)n.styleSheet.cssText=r;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(r))}}}},n={};function o(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={id:t,exports:{}};return r[t](i,i.exports,o),i.exports}o.n=r=>{var n=r&&r.__esModule?()=>r.default:()=>r;return o.d(n,{a:n}),n},o.d=(r,n)=>{for(var t in n)o.o(n,t)&&!o.o(r,t)&&Object.defineProperty(r,t,{enumerable:!0,get:n[t]})},o.o=(r,n)=>Object.prototype.hasOwnProperty.call(r,n),o.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.nc=void 0;var t={};(()=>{o.r(t);var r=o(379),n=o.n(r),e=o(795),i=o.n(e),a=o(569),l=o.n(a),d=o(565),c=o.n(d),p=o(216),s=o.n(p),u=o(589),b=o.n(u),h=o(59),g={};g.styleTagTransform=b(),g.setAttributes=c(),g.insert=l().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=s();n()(h.Z,g);h.Z&&h.Z.locals&&h.Z.locals;var f=o(786),x={};x.styleTagTransform=b(),x.setAttributes=c(),x.insert=l().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=s();n()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=t})();
+(()=>{"use strict";var r={786:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,'.clr-picker {\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  position: absolute;\r\n  width: 200px;\r\n  z-index: 1000;\r\n  border-radius: 10px;\r\n  background-color: #fff;\r\n  justify-content: flex-end;\r\n  direction: ltr;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  -moz-user-select: none;\r\n  -webkit-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.clr-picker.clr-open,\r\n.clr-picker[data-inline="true"] {\r\n  display: flex;\r\n}\r\n\r\n.clr-picker[data-inline="true"] {\r\n  position: relative;\r\n}\r\n\r\n.clr-gradient {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100px;\r\n  margin-bottom: 15px;\r\n  border-radius: 3px 3px 0 0;\r\n  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker {\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  margin: -6px 0 0 -6px;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  height: 8px;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-track {\r\n  width: 100%;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-hue {\r\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%);\r\n}\r\n\r\n.clr-hue,\r\n.clr-alpha {\r\n  position: relative;\r\n  width: calc(100% - 40px);\r\n  height: 8px;\r\n  margin: 5px 20px;\r\n  border-radius: 4px;\r\n}\r\n\r\n.clr-alpha span {\r\n  display: block;\r\n  height: 100%;\r\n  width: 100%;\r\n  border-radius: inherit;\r\n  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\r\n}\r\n\r\n.clr-hue input,\r\n.clr-alpha input {\r\n  position: absolute;\r\n  width: calc(100% + 16px);\r\n  height: 16px;\r\n  left: -8px;\r\n  top: -4px;\r\n  margin: 0;\r\n  background-color: transparent;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-hue div,\r\n.clr-alpha div {\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 16px;\r\n  left: 0;\r\n  top: 50%;\r\n  margin-left: -8px;\r\n  transform: translateY(-50%);\r\n  border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  box-shadow: 0 0 1px #888;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-alpha div:before {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n}\r\n\r\n.clr-format {\r\n  display: none;\r\n  order: 1;\r\n  width: calc(100% - 40px);\r\n  margin: 0 20px 20px;\r\n}\r\n\r\n.clr-segmented {\r\n  display: flex;\r\n  position: relative;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 1px solid #ddd;\r\n  border-radius: 15px;\r\n  box-sizing: border-box;\r\n  color: #999;\r\n  font-size: 12px;\r\n}\r\n\r\n.clr-segmented input,\r\n.clr-segmented legend {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  left: 0;\r\n  top: 0;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-segmented label {\r\n  flex-grow: 1;\r\n  margin: 0;\r\n  padding: 4px 0;\r\n  font-size: inherit;\r\n  font-weight: normal;\r\n  line-height: initial;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-segmented label:first-of-type {\r\n  border-radius: 10px 0 0 10px;\r\n}\r\n\r\n.clr-segmented label:last-of-type {\r\n  border-radius: 0 10px 10px 0;\r\n}\r\n\r\n.clr-segmented input:checked + label {\r\n  color: #fff;\r\n  background-color: #666;\r\n}\r\n\r\n.clr-swatches {\r\n  order: 2;\r\n  width: calc(100% - 32px);\r\n  margin: 0 16px;\r\n}\r\n\r\n.clr-swatches div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  padding-bottom: 12px;\r\n  justify-content: center;\r\n}\r\n\r\n.clr-swatches button {\r\n  position: relative;\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 0 4px 6px 4px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-swatches button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\ninput.clr-color {\r\n  order: 1;\r\n  width: calc(100% - 80px);\r\n  height: 32px;\r\n  margin: 15px 20px 20px auto;\r\n  padding: 0 10px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 16px;\r\n  color: #444;\r\n  background-color: #fff;\r\n  font-family: sans-serif;\r\n  font-size: 14px;\r\n  text-align: center;\r\n  box-shadow: none;\r\n}\r\n\r\ninput.clr-color:focus {\r\n  outline: none;\r\n  border: 1px solid #1e90ff;\r\n}\r\n\r\n.clr-close,\r\n.clr-clear {\r\n  display: none;\r\n  order: 2;\r\n  height: 24px;\r\n  margin: 0 20px 20px;\r\n  padding: 0 20px;\r\n  border: 0;\r\n  border-radius: 12px;\r\n  color: #fff;\r\n  background-color: #666;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-close {\r\n  display: block;\r\n  margin: 0 20px 20px auto;\r\n}\r\n\r\n.clr-preview {\r\n  position: relative;\r\n  width: 32px;\r\n  height: 32px;\r\n  margin: 15px 0 20px 20px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\n.clr-preview:before,\r\n.clr-preview:after {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n}\r\n\r\n.clr-preview:after {\r\n  border: 0;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\n.clr-preview button {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background-color: transparent;\r\n  text-indent: -9999px;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker,\r\n.clr-hue div,\r\n.clr-alpha div,\r\n.clr-color {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-field {\r\n  display: inline-block;\r\n  position: relative;\r\n  color: transparent;\r\n}\r\n\r\n.clr-field input {\r\n  margin: 0;\r\n  direction: ltr;\r\n}\r\n\r\n.clr-field.clr-rtl input {\r\n  text-align: right;\r\n}\r\n\r\n.clr-field button {\r\n  position: absolute;\r\n  width: 30px;\r\n  height: 100%;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-field.clr-rtl button {\r\n  right: auto;\r\n  left: 0;\r\n}\r\n\r\n.clr-field button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 1px rgba(0,0,0,.5);\r\n}\r\n\r\n.clr-alpha,\r\n.clr-alpha div,\r\n.clr-swatches button,\r\n.clr-preview:before,\r\n.clr-field button {\r\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);\r\n  background-position: 0 0, 4px 4px;\r\n  background-size: 8px 8px;\r\n}\r\n\r\n.clr-marker:focus {\r\n  outline: none;\r\n}\r\n\r\n.clr-keyboard-nav .clr-marker:focus,\r\n.clr-keyboard-nav .clr-hue input:focus + div,\r\n.clr-keyboard-nav .clr-alpha input:focus + div,\r\n.clr-keyboard-nav .clr-segmented input:focus + label {\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\r\n}\r\n\r\n.clr-picker[data-alpha="false"] .clr-alpha {\r\n  display: none;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] {\r\n  padding-top: 16px;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] .clr-gradient,\r\n.clr-picker[data-minimal="true"] .clr-hue,\r\n.clr-picker[data-minimal="true"] .clr-alpha,\r\n.clr-picker[data-minimal="true"] .clr-color,\r\n.clr-picker[data-minimal="true"] .clr-preview {\r\n  display: none;\r\n}\r\n\r\n/** Dark theme **/\r\n\r\n.clr-dark {\r\n  background-color: #444;\r\n}\r\n\r\n.clr-dark .clr-segmented {\r\n  border-color: #777;\r\n}\r\n\r\n.clr-dark .clr-swatches button:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\r\n}\r\n\r\n.clr-dark input.clr-color {\r\n  color: #fff;\r\n  border-color: #777;\r\n  background-color: #555;\r\n}\r\n\r\n.clr-dark input.clr-color:focus {\r\n  border-color: #1e90ff;\r\n}\r\n\r\n.clr-dark .clr-preview:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\r\n}\r\n\r\n.clr-dark .clr-alpha,\r\n.clr-dark .clr-alpha div,\r\n.clr-dark .clr-swatches button,\r\n.clr-dark .clr-preview:before {\r\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);\r\n}\r\n\r\n/** Polaroid theme **/\r\n\r\n.clr-picker.clr-polaroid {\r\n  border-radius: 6px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-picker.clr-polaroid:before {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 10px;\r\n  left: 20px;\r\n  top: -10px;\r\n  border: solid transparent;\r\n  border-width: 0 8px 10px 8px;\r\n  border-bottom-color: currentColor;\r\n  box-sizing: border-box;\r\n  color: #fff;\r\n  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-dark:before {\r\n  color: #444;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-left:before {\r\n  left: auto;\r\n  right: 20px;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-top:before {\r\n  top: auto;\r\n  bottom: -10px;\r\n  transform: rotateZ(180deg);\r\n}\r\n\r\n.clr-polaroid .clr-gradient {\r\n  width: calc(100% - 20px);\r\n  height: 120px;\r\n  margin: 10px;\r\n  border-radius: 3px;\r\n}\r\n\r\n.clr-polaroid .clr-hue,\r\n.clr-polaroid .clr-alpha {\r\n  width: calc(100% - 30px);\r\n  height: 10px;\r\n  margin: 6px 15px;\r\n  border-radius: 5px;\r\n}\r\n\r\n.clr-polaroid .clr-hue div,\r\n.clr-polaroid .clr-alpha div {\r\n  box-shadow: 0 0 5px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-polaroid .clr-format {\r\n  width: calc(100% - 20px);\r\n  margin: 0 10px 15px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches {\r\n  width: calc(100% - 12px);\r\n  margin: 0 6px;\r\n}\r\n.clr-polaroid .clr-swatches div {\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n.clr-polaroid input.clr-color {\r\n  width: calc(100% - 60px);\r\n  margin: 10px 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-clear {\r\n  margin: 0 10px 15px 10px;\r\n}\r\n\r\n.clr-polaroid .clr-close {\r\n  margin: 0 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-preview {\r\n  margin: 10px 0 15px 10px;\r\n}\r\n\r\n/** Large theme **/\r\n\r\n.clr-picker.clr-large {\r\n  width: 275px;\r\n}\r\n\r\n.clr-large .clr-gradient {\r\n  height: 150px;\r\n}\r\n\r\n.clr-large .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n/** Pill (horizontal) theme **/\r\n\r\n.clr-picker.clr-pill {\r\n  width: 380px;\r\n  padding-left: 180px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-pill .clr-gradient {\r\n  position: absolute;\r\n  width: 180px;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  margin-bottom: 0;\r\n  border-radius: 3px 0 0 3px;\r\n}\r\n\r\n.clr-pill .clr-hue {\r\n  margin-top: 20px;\r\n}',""]);const l=a},521:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,'\n/* Imports Coloris\' CSS and makes additional changes to the color picker */\n\n#clr-picker {\n    --clr-slider-size: 30px;\n}\n\n/* Coloris: Try to avoid scrolling instead of updating the color input. */\n#clr-picker #clr-color-area, #clr-picker .clr_hue {\n\ttouch-action: none;\n}\n\n/* Increase space between inputs */\n#clr-picker .clr-alpha {\n\tmargin-top: 15px;\n\tmargin-bottom: 15px;\n}\n\n/* Increase size of input thumb to make it easier to select colors. */\n#clr-picker.clr-picker input[type="range"]::-moz-range-thumb {\n\twidth: var(--clr-slider-size);\n\theight: var(--clr-slider-size);\n}\n\n/* Also apply to Chrome/iOS */\n#clr-picker.clr-picker input[type="range"]::-webkit-slider-thumb {\n    /*\n     Note: This doesn\'t seem to take effect in iOS if it\'s combined with the\n           ::-moz-range-thumb rule above\n     */\n\twidth: var(--clr-slider-size);\n\theight: var(--clr-slider-size);\n}\n\n#clr-picker.clr-picker input[type="range"]::-webkit-slider-runnable-track {\n\theight: var(--clr-slider-size);\n}\n\n#clr-picker.clr-picker input[type="range"]::-moz-range-track {\n\theight: var(--clr-slider-size);\n}\n\n/*\nDebugging: Uncommenting this rule makes Coloris\' sliders more\nvisible.\n\n#clr-picker.clr-picker input[type="range"] {\n    opacity: 0.5;\n    -webkit-appearance: auto;\n    appearance: auto;\n}\n*/\n',""]);const l=a},59:(r,n,o)=>{o.d(n,{Z:()=>s});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(771),c=o(443),d=o(521),p=a()(e());p.i(l.Z),p.i(c.Z),p.i(d.Z),p.push([r.id,"\n.imageEditorContainer {\n\t/* Deafult colors for the editor */\n    --primary-background-color: white;\n    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);\n    --secondary-background-color: #faf;\n    --primary-foreground-color: black;\n    --secondary-foreground-color: black;\n\t--primary-shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.imageEditorContainer {\n\t\t--primary-background-color: #151515;\n\t\t--primary-background-color-transparent: rgba(50, 50, 50, 0.5);\n\t\t--secondary-background-color: #607;\n\t\t--primary-foreground-color: white;\n\t\t--secondary-foreground-color: white;\n\t\t--primary-shadow-color: rgba(250, 250, 250, 0.5);\n\t}\n}\n\n.imageEditorContainer {\n\tcolor: var(--primary-foreground-color);\n\tfont-family: system-ui, -apple-system, sans-serif;\n\tbackground-color: var(--primary-background-color);\n\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n}\n\n.imageEditorContainer .imageEditorRenderArea {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr;\n\tflex-grow: 2;\n\tflex-shrink: 1;\n\tmin-height: 100px;\n}\n\n.imageEditorContainer .imageEditorRenderArea canvas {\n\t/* Stack all canvases on top of each other */\n\tgrid-row: 1 / 1;\n\tgrid-column: 1 / 1;\n\ttouch-action: none;\n\n\t/* Fill the container */\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Allow the canvas to shrink (needed in Chrome) */\n\tmin-height: 0px;\n\tmax-height: inherit;\n}\n\n.imageEditorContainer .loadingMessage {\n\tposition: fixed;\n\ttext-align: center;\n\tfont-size: 2em;\n\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n}\n\n.imageEditorContainer .accessibilityAnnouncement {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.imageEditorContainer .textRendererOutputContainer {\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n}\n\n.imageEditorContainer .textRendererOutputContainer:focus-within {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n@media print {\n\t.imageEditorContainer .loadingMessage {\n\t\tdisplay: none;\n\t}\n\n\t.imageEditorContainer .imageEditorRenderArea canvas {\n\t\twidth: 100%;\n\t\theight: initial;\n\t}\n}",""]);const s=p},771:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(350),c=o(519),d=a()(e());d.i(l.Z),d.i(c.Z),d.push([r.id,".toolbar-root {\n\tbackground-color: var(--primary-background-color);\n\t--icon-color: var(--primary-foreground-color);\n\n\n\tborder: 1px solid var(--secondary-background-color);\n\tborder-radius: 2px;\n\tflex-wrap: wrap;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\n\t--toolbar-button-height: min(20vh, 60px);\n\n\t/* Display above selection dialogs, etc. */\n\tz-index: 2;\n\n\tfont-family: system-ui, -apple-system, sans-serif;\n}\n\n.toolbar-root > .toolbar-toolContainer > .toolbar-button,\n.toolbar-root > .toolbar-toolContainer > * > button,\n.toolbar-root > .toolbar-buttonGroup > button,\n.toolbar-root > .toolbar-button {\n\twidth: min-content;\n\twhite-space: pre;\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-dropdown .toolbar-button > .toolbar-icon {\n\tmax-width: 50px;\n\twidth: 100%;\n}\n\n.toolbar-button.disabled {\n\tfilter: opacity(0.5) sepia(0.2);\n\tcursor: unset;\n}\n\n.toolbar-button, .toolbar-root button {\n\tcursor: pointer;\n\ttext-align: center;\n\tborder-radius: 6px;\n\n\t--icon-color: var(--primary-foreground-color);\n\tbackground-color: var(--primary-background-color);\n\tcolor: var(--primary-foreground-color);\n\tborder: none;\n\tbox-shadow: 0px 0px 2px var(--primary-shadow-color);\n\n\ttransition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;\n}\n\n.toolbar-button,\n.toolbar-buttonGroup > button,\n.toolbar-toolContainer > * > button,\n.toolbar-root > button {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding-left: 3px;\n\tpadding-right: 3px;\n\tmargin-left: 3px;\n\tmargin-right: 3px;\n\n\tmin-width: 40px;\n\tmax-width: 105px;\n\twidth: min-content;\n\tfont-size: 1em;\n}\n\n.toolbar-button > label {\n\tcursor: inherit;\n}\n\n/* Decrease the font size of labels in the main toolbar if they're long. */\n:not(.toolbar-dropdown) > .toolbar-toolContainer >\n\t\t.toolbar-button > label.long-label {\n\tfont-size: 0.75em;\n}\n\n.toolbar-dropdown > .toolbar-toolContainer > button,\n.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {\n\twidth: 6em;\n}\n\n.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {\n\tbox-shadow: 0px 2px 4px var(--primary-shadow-color);\n}\n\n.toolbar-root button:disabled {\n\tcursor: inherit;\n\tfilter: opacity(0.5);\n}\n\n.toolbar-root .toolbar-icon {\n\tflex-shrink: 1;\n\n\twidth: 100%;\n\tmin-width: 30px;\n\tmin-height: 30px;\n}\n\n.toolbar-toolContainer.selected > .toolbar-button {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {\n\tdisplay: none;\n}\n\n.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\theight: 10px;\n\ttransition: transform 0.5s ease;\n}\n\n.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {\n\ttransform: rotate(180deg);\n}\n\n.toolbar-dropdown.hidden,\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {\n\tdisplay: none;\n}\n\n.toolbar-dropdown {\n\tposition: absolute;\n\tpadding: 15px;\n\tpadding-top: 5px;\n\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmax-height: 80vh;\n\n\tmax-width: fit-content;\n\n\t/* Prevent overlap/being displayed under the undo/redo buttons */\n\tz-index: 2;\n\tbackground-color: var(--primary-background-color);\n\tbox-shadow: 0px 3px 3px var(--primary-shadow-color);\n}\n\n.toolbar-buttonGroup {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n}\n\n.toolbar-closeColorPickerOverlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\ttouch-action: none;\n\n\tbackground-color: var(--primary-background-color);\n\topacity: 0.3;\n}\n\n/* Make color selection buttons fill their containing label */\n.toolbar-dropdown .clr-field button {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 2px;\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor {\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {\n\tflex-grow: 1;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor button {\n\tmin-width: 48px;\n}\n\n.color-input-container {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n}\n\n.color-input-container .pipetteButton {\n\twidth: 30px;\n\theight: 30px;\n\tpadding: 0;\n\tdisplay: inline-flex;\n}\n\n.color-input-container .pipetteButton > svg {\n\twidth: 100%;\n}\n\n.color-input-container .pipetteButton.active {\n\tbackground-color: var(--secondary-background-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-spacedList > * {\n\tpadding-bottom: 5px;\n\tpadding-top: 5px;\n}\n\n@media print {\n\t/* Hide the toolbar on print. */\n\t.toolbar-root {\n\t\tdisplay: none;\n\t}\n}",""]);const p=d},350:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-image-selection-overlay {\n\tposition: absolute;\n\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 10;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.toolbar-image-selection-overlay > div {\n\tbackground: var(--primary-background-color);\n\tbox-shadow: 1px 1px 3px var(--primary-shadow-color);\n\n\tpadding: 18px;\n\tborder-radius: 3px;\n}\n\n.toolbar-image-selection-overlay > div > div {\n\tpadding: 5px;\n}\n\n.toolbar-image-selection-overlay img {\n\tmax-width: min(50vw, 75%);\n\tmax-height: 50vh;\n\n\t/* Center */\n\tdisplay: block;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.toolbar-image-selection-overlay .action-button-row {\n\tmargin-top: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-image-selection-overlay .action-button-row > button {\n\tflex-grow: 1;\n}",""]);const l=a},519:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-overflow-widget-overflow-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n}\n\n.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {\n\tflex-direction: row;\n}\n\n.toolbar-overflow-widget.horizontal > .toolbar-dropdown {\n\tmax-width: 100%;\n\tleft: 15px;\n\tright: 15px;\n\n\t/* Override the default transform and margin-left */\n\tmargin-left: 0 !important;\n\ttransform: none !important;\n\n\tpadding: 4px;\n}",""]);const l=a},324:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.find-tool-overlay {\n    /* Show at the bottom of the screen. */\n    order: -1;\n\n    position: absolute;\n}",""]);const l=a},611:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.selection-tool-selection-background {\n    background-color: var(--secondary-background-color);\n    opacity: 0.5;\n    overflow: visible;\n    position: absolute;\n}\n\n.selection-tool-handle {\n    border: 1px solid var(--primary-foreground-color);\n    background: var(--primary-background-color);\n    position: absolute;\n    cursor: grab;\n}\n\n.selection-tool-handle.selection-tool-circle {\n    border-radius: 100%;\n}\n\n.overlay.handleOverlay {\n    height: 0;\n    overflow: visible;\n}",""]);const l=a},34:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.js-draw-sound-ui-toggle {\n\twidth: 0px;\n\theight: 0px;\n\toverflow: hidden;    \n}\n\n.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {\n\topacity: 0.5;\n}\n",""]);const l=a},443:(r,n,o)=>{o.d(n,{Z:()=>s});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(611),c=o(324),d=o(34),p=a()(e());p.i(l.Z),p.i(c.Z),p.i(d.Z),p.push([r.id,"",""]);const s=p},645:r=>{r.exports=function(r){var n=[];return n.toString=function(){return this.map((function(n){var o="",t=void 0!==n[5];return n[4]&&(o+="@supports (".concat(n[4],") {")),n[2]&&(o+="@media ".concat(n[2]," {")),t&&(o+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),o+=r(n),t&&(o+="}"),n[2]&&(o+="}"),n[4]&&(o+="}"),o})).join("")},n.i=function(r,o,t,e,i){"string"==typeof r&&(r=[[null,r,void 0]]);var a={};if(t)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(a[c]=!0)}for(var d=0;d<r.length;d++){var p=[].concat(r[d]);t&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),n.push(p))}},n}},81:r=>{r.exports=function(r){return r[1]}},379:r=>{var n=[];function o(r){for(var o=-1,t=0;t<n.length;t++)if(n[t].identifier===r){o=t;break}return o}function t(r,t){for(var i={},a=[],l=0;l<r.length;l++){var c=r[l],d=t.base?c[0]+t.base:c[0],p=i[d]||0,s="".concat(d," ").concat(p);i[d]=p+1;var u=o(s),b={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==u)n[u].references++,n[u].updater(b);else{var h=e(b,t);t.byIndex=l,n.splice(l,0,{identifier:s,updater:h,references:1})}a.push(s)}return a}function e(r,n){var o=n.domAPI(n);o.update(r);return function(n){if(n){if(n.css===r.css&&n.media===r.media&&n.sourceMap===r.sourceMap&&n.supports===r.supports&&n.layer===r.layer)return;o.update(r=n)}else o.remove()}}r.exports=function(r,e){var i=t(r=r||[],e=e||{});return function(r){r=r||[];for(var a=0;a<i.length;a++){var l=o(i[a]);n[l].references--}for(var c=t(r,e),d=0;d<i.length;d++){var p=o(i[d]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}i=c}}},569:r=>{var n={};r.exports=function(r,o){var t=function(r){if(void 0===n[r]){var o=document.querySelector(r);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(r){o=null}n[r]=o}return n[r]}(r);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}},216:r=>{r.exports=function(r){var n=document.createElement("style");return r.setAttributes(n,r.attributes),r.insert(n,r.options),n}},565:(r,n,o)=>{r.exports=function(r){var n=o.nc;n&&r.setAttribute("nonce",n)}},795:r=>{r.exports=function(r){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=r.insertStyleElement(r);return{update:function(o){!function(r,n,o){var t="";o.supports&&(t+="@supports (".concat(o.supports,") {")),o.media&&(t+="@media ".concat(o.media," {"));var e=void 0!==o.layer;e&&(t+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),t+=o.css,e&&(t+="}"),o.media&&(t+="}"),o.supports&&(t+="}");var i=o.sourceMap;i&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(t,r,n.options)}(n,r,o)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(n)}}}},589:r=>{r.exports=function(r,n){if(n.styleSheet)n.styleSheet.cssText=r;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(r))}}}},n={};function o(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={id:t,exports:{}};return r[t](i,i.exports,o),i.exports}o.n=r=>{var n=r&&r.__esModule?()=>r.default:()=>r;return o.d(n,{a:n}),n},o.d=(r,n)=>{for(var t in n)o.o(n,t)&&!o.o(r,t)&&Object.defineProperty(r,t,{enumerable:!0,get:n[t]})},o.o=(r,n)=>Object.prototype.hasOwnProperty.call(r,n),o.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.nc=void 0;var t={};(()=>{o.r(t);var r=o(379),n=o.n(r),e=o(795),i=o.n(e),a=o(569),l=o.n(a),c=o(565),d=o.n(c),p=o(216),s=o.n(p),u=o(589),b=o.n(u),h=o(59),g={};g.styleTagTransform=b(),g.setAttributes=d(),g.insert=l().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=s();n()(h.Z,g);h.Z&&h.Z.locals&&h.Z.locals;var f=o(786),x={};x.styleTagTransform=b(),x.setAttributes=d(),x.insert=l().bind(null,"head"),x.domAPI=i(),x.insertStyleElement=s();n()(f.Z,x);f.Z&&f.Z.locals&&f.Z.locals})(),window.jsdrawStyles=t})();

package/dist/cjs/src/Color4.js

@@ -250,8 +250,6 @@ class Color4 {
         return this.toHexString();
     }
 }
-exports.default = Color4;
-exports.Color4 = Color4;
 Color4.transparent = Color4.ofRGBA(0, 0, 0, 0);
 Color4.red = Color4.ofRGB(1.0, 0.0, 0.0);
 Color4.green = Color4.ofRGB(0.0, 1.0, 0.0);
@@ -262,3 +260,5 @@ Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
 Color4.black = Color4.ofRGB(0, 0, 0);
 Color4.gray = Color4.ofRGB(0.5, 0.5, 0.5);
 Color4.white = Color4.ofRGB(1, 1, 1);
+exports.default = Color4;
+exports.Color4 = Color4;

package/dist/cjs/src/Editor.d.ts

@@ -1,6 +1,6 @@
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
-import { InputEvtType, EditorNotifier, ImageLoader } from './types';
+import { InputEvtType, EditorNotifier, ImageLoader, HTMLPointerEventFilter } from './types';
 import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
@@ -14,8 +14,6 @@ import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
 import AbstractComponent from './components/AbstractComponent';
-type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -191,7 +189,10 @@ export declare class Editor {
      * });
      * ```
      */
-    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): void;
+    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): {
+        /** Remove all event listeners registered by this function. */
+        remove: () => void;
+    };
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */

package/dist/cjs/src/Editor.js

@@ -484,20 +484,38 @@ class Editor {
     handlePointerEventsFrom(elem, filter) {
         // May be required to prevent text selection on iOS/Safari:
         // See https://stackoverflow.com/a/70992717/17055750
-        elem.addEventListener('touchstart', evt => evt.preventDefault());
-        elem.addEventListener('contextmenu', evt => {
+        const touchstartListener = (evt) => evt.preventDefault();
+        const contextmenuListener = (evt) => {
             // Don't show a context menu
             evt.preventDefault();
-        });
+        };
+        const listeners = {
+            'touchstart': touchstartListener,
+            'contextmenu': contextmenuListener,
+        };
         const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
         for (const eventName of eventNames) {
-            elem.addEventListener(eventName, evt => {
-                if (filter && !filter(eventName, evt)) {
+            listeners[eventName] = (evt) => {
+                // This listener will only be called in the context of PointerEvents.
+                const event = evt;
+                if (filter && !filter(eventName, event)) {
                     return true;
                 }
-                return this.handleHTMLPointerEvent(eventName, evt);
-            });
+                return this.handleHTMLPointerEvent(eventName, event);
+            };
         }
+        // Add all listeners.
+        for (const eventName in listeners) {
+            elem.addEventListener(eventName, listeners[eventName]);
+        }
+        return {
+            /** Remove all event listeners registered by this function. */
+            remove: () => {
+                for (const eventName in listeners) {
+                    elem.removeEventListener(eventName, listeners[eventName]);
+                }
+            },
+        };
     }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {

package/dist/cjs/src/EditorImage.js

@@ -1,4 +1,8 @@
 "use strict";
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -156,7 +160,6 @@ class EditorImage {
         return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
     }
 }
-exports.default = EditorImage;
 _a = EditorImage;
 // A Command that can access private [EditorImage] functionality
 EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.default {
@@ -202,6 +205,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.defaul
             };
         }
     },
+    __setFunctionName(_b, "AddElementCommand"),
     (() => {
         SerializableCommand_1.default.register('add-element', (json, editor) => {
             const id = json.elemData.id;
@@ -249,6 +253,7 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
             };
         }
     },
+    __setFunctionName(_c, "SetImportExportRectCommand"),
     _c.commandId = 'set-import-export-rect',
     (() => {
         const commandId = _c.commandId;
@@ -269,6 +274,7 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
         });
     })(),
     _c);
+exports.default = EditorImage;
 /** Part of the Editor's image. @internal */
 class ImageNode {
     constructor(parent = null) {
@@ -482,5 +488,5 @@ class ImageNode {
         }
     }
 }
-exports.ImageNode = ImageNode;
 ImageNode.idCounter = 0;
+exports.ImageNode = ImageNode;

package/dist/cjs/src/Viewport.js

@@ -209,7 +209,6 @@ class Viewport {
         return new Viewport.ViewportTransform(transform);
     }
 }
-exports.Viewport = Viewport;
 // Command that translates/scales the viewport.
 Viewport.ViewportTransform = (_a = class extends ViewportTransform {
         constructor(transform) {
@@ -265,4 +264,5 @@ Viewport.ViewportTransform = (_a = class extends ViewportTransform {
     },
     _inverseTransform = new WeakMap(),
     _a);
+exports.Viewport = Viewport;
 exports.default = Viewport;

package/dist/cjs/src/commands/Command.js

@@ -25,10 +25,10 @@ class Command {
         };
     }
 }
-exports.Command = Command;
 Command.empty = new class extends Command {
     description(_editor, _localizationTable) { return ''; }
     apply(_editor) { }
     unapply(_editor) { }
 };
+exports.Command = Command;
 exports.default = Command;

package/dist/cjs/src/commands/SerializableCommand.js

@@ -38,5 +38,5 @@ class SerializableCommand extends Command_1.default {
         SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
     }
 }
-exports.default = SerializableCommand;
 SerializableCommand.deserializationCallbacks = {};
+exports.default = SerializableCommand;

package/dist/cjs/src/components/AbstractComponent.d.ts

@@ -32,8 +32,15 @@ export default abstract class AbstractComponent {
     /** See {@link attachLoadSaveData} */
     getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
-    /** @returns the bounding box of this. */
+    /**
+     * @returns the bounding box of this. This can be a slight overestimate if doing so
+     * 			significantly improves performance.
+     */
     getBBox(): Rect2;
+    /**
+     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
+     */
+    getExactBBox(): Rect2;
     /** Called when this component is added to the given image. */
     onAddToImage(_image: EditorImage): void;
     onRemoveFromImage(): void;
@@ -43,6 +50,11 @@ export default abstract class AbstractComponent {
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.
+     *
+     * The default implementation assumes that `this.getExactBBox()` returns a tight bounding box
+     * -- that any horiziontal/vertical line that intersects this' boounding box also
+     * intersects a point in this component. If this is not the case, components must override
+     * this function.
      */
     intersectsRect(rect: Rect2): boolean;
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;

package/dist/cjs/src/components/AbstractComponent.js

@@ -1,4 +1,8 @@
 "use strict";
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -60,30 +64,40 @@ class AbstractComponent {
     getZIndex() {
         return this.zIndex;
     }
-    /** @returns the bounding box of this. */
+    /**
+     * @returns the bounding box of this. This can be a slight overestimate if doing so
+     * 			significantly improves performance.
+     */
     getBBox() {
         return this.contentBBox;
     }
+    /**
+     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
+     */
+    getExactBBox() {
+        return this.getBBox();
+    }
     /** Called when this component is added to the given image. */
     onAddToImage(_image) { }
     onRemoveFromImage() { }
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.
+     *
+     * The default implementation assumes that `this.getExactBBox()` returns a tight bounding box
+     * -- that any horiziontal/vertical line that intersects this' boounding box also
+     * intersects a point in this component. If this is not the case, components must override
+     * this function.
      */
     intersectsRect(rect) {
-        // If this component intersects rect,
+        // If this component intersects the given rectangle,
         // it is either contained entirely within rect or intersects one of rect's edges.
         // If contained within,
-        if (rect.containsRect(this.getBBox())) {
+        if (rect.containsRect(this.getExactBBox())) {
             return true;
         }
-        // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-        // As such, test with more lines than just the rect's edges.
-        const testLines = [];
-        for (const subregion of rect.divideIntoGrid(2, 2)) {
-            testLines.push(...subregion.getEdges());
-        }
+        // Otherwise check if it intersects one of the rectangle's edges.
+        const testLines = rect.getEdges();
         return testLines.some(edge => this.intersects(edge));
     }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
@@ -173,7 +187,6 @@ class AbstractComponent {
         return instance;
     }
 }
-exports.default = AbstractComponent;
 // Topmost z-index
 AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
@@ -245,6 +258,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
             };
         }
     },
+    __setFunctionName(_a, "TransformElementCommand"),
     (() => {
         SerializableCommand_1.default.register(AbstractComponent.transformElementCommandId, (json, editor) => {
             var _a, _b;
@@ -256,3 +270,4 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedComman
         });
     })(),
     _a);
+exports.default = AbstractComponent;

package/dist/cjs/src/components/Stroke.d.ts

@@ -53,6 +53,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     private bboxForPart;
+    getExactBBox(): Rect2;
     protected applyTransformation(affineTransfm: Mat33): void;
     /**
      * @returns the {@link Path.union} of all paths that make up this stroke.

package/dist/cjs/src/components/Stroke.js

@@ -114,8 +114,11 @@ class Stroke extends AbstractComponent_1.default {
         }
     }
     intersects(line) {
+        var _a;
         for (const part of this.parts) {
-            if (part.path.intersection(line).length > 0) {
+            const strokeWidth = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width;
+            const strokeRadius = strokeWidth ? strokeWidth / 2 : undefined;
+            if (part.path.intersection(line, strokeRadius).length > 0) {
                 return true;
             }
         }
@@ -149,6 +152,16 @@ class Stroke extends AbstractComponent_1.default {
         }
         return origBBox.grownBy(style.stroke.width / 2);
     }
+    getExactBBox() {
+        let bbox = null;
+        for (const { path, style } of this.parts) {
+            // Paths' default .bbox can be
+            const partBBox = this.bboxForPart(path.getExactBBox(), style);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = partBBox);
+            bbox = bbox.union(partBBox);
+        }
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2_1.default.empty;
+    }
     applyTransformation(affineTransfm) {
         this.contentBBox = Rect2_1.default.empty;
         let isFirstPart = true;

package/dist/cjs/src/components/TextComponent.js

@@ -275,6 +275,6 @@ class TextComponent extends AbstractComponent_1.default {
         return new TextComponent(components, transform, style);
     }
 }
-exports.default = TextComponent;
 TextComponent.textMeasuringCtx = null;
+exports.default = TextComponent;
 AbstractComponent_1.default.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

package/dist/cjs/src/components/util/StrokeSmoother.js

@@ -152,7 +152,7 @@ class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.2;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -190,22 +190,20 @@ class StrokeSmoother {
         // Should we start making a new curve? Check whether all buffer points are within
         // ±strokeWidth of the curve.
         const curveMatchesPoints = (curve) => {
-            let nonMatching = 0;
-            const maxNonMatching = 2;
-            const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
+            const minFit = Math.min(Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 4, this.minFitAllowed), this.maxFitAllowed);
+            // The sum of distances greater than minFit must not exceed this:
+            const maxNonMatchingDistSum = minFit;
+            // Sum of distances greater than minFit.
+            let nonMatchingDistSum = 0;
             for (const point of this.buffer) {
                 let dist = curve.approximateDistance(point);
-                if (dist > minFit || dist > this.maxFitAllowed) {
-                    // Avoid using the slower .distance
-                    if (nonMatching >= maxNonMatching - 1) {
-                        dist = curve.distance(point);
+                if (dist > minFit) {
+                    // Use the more accurate distance function
+                    dist = curve.distance(point);
+                    nonMatchingDistSum += Math.max(0, dist - minFit);
+                    if (nonMatchingDistSum > maxNonMatchingDistSum) {
+                        return false; // false: Curve doesn't match points well enough.
                     }
-                    if (dist > minFit || dist > this.maxFitAllowed) {
-                        nonMatching++;
-                    }
-                }
-                if (nonMatching >= maxNonMatching) {
-                    return false;
                 }
             }
             return true;

package/dist/cjs/src/localizations/de.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const localization_1 = require("../localization");
 // German localization
-const localization = Object.assign(Object.assign({}, localization_1.defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
+const localization = Object.assign(Object.assign({}, localization_1.defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', pressureSensitiveFreehandPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: (toolName) => `Dropdown-Menü für ${toolName} angezeigt`, dropdownHidden: (toolName) => `Dropdown-Menü für ${toolName} versteckt`, zoomLevel: (zoomPercent) => `Vergößerung: ${zoomPercent}%`, colorChangedAnnouncement: (color) => `Farbe zu ${color} geändert`, imageSize: (size, units) => `Bild-Größe: ${size} ${units}`, imageLoadError: (message) => `Fehler beim Laden des Bildes: ${message}`, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: (penNumber) => `Stift ${penNumber}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: (matchIdx, totalMatches) => `Sieh Treffer ${matchIdx} von ${totalMatches} an`, toolEnabledAnnouncement: (toolName) => `${toolName} aktiviert`, toolDisabledAnnouncement: (toolName) => `${toolName} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: (elemCount) => `${elemCount} Element${1 === elemCount ? '' : 'e'} transformiert`, resizeOutputCommand: (newSize) => `Bildgröße auf ${newSize.w}x${newSize.h} geändert`, addElementAction: (componentDescription) => `${componentDescription} hinzugefügt`, eraseAction: (elemDescription, countErased) => `${countErased} ${elemDescription} gelöscht`, duplicateAction: (elemDescription, countErased) => `${countErased} ${elemDescription} dupliziert`, inverseOf: (actionDescription) => `${actionDescription} umgekehrt`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: (degrees) => `${Math.abs(degrees)} Grad ${degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: (count) => `${count} Element${1 === count ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: (text) => `Text-Objekt: ${text}`, pathNodeCount: (count) => `Es gibt ${count} sichtbare Pfad-Objekte.`, textNodeCount: (count) => `Es gibt ${count} sichtbare Text-Knotenpunkte.`, textNode: (content) => `Text: ${content}`, imageNodeCount: (nodeCount) => `Es gibt ${nodeCount} sichtbare Bild-Knoten.`, imageNode: label => `Bild: ${label}`, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: percentage => `Laden ${percentage}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: (commandDescription) => `${commandDescription} rückgängig gemacht`, redoAnnouncement: (commandDescription) => `${commandDescription} wiederholt`, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: (count, description) => `${count} ${description} kopiert`, pasted: (count, description) => `${count} ${description} eingefügt`, unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`, restyledElement: (elementDescription) => `${elementDescription} umgestaltet` });
 exports.default = localization;

package/dist/cjs/src/math/LineSegment2.d.ts

@@ -18,6 +18,8 @@ export default class LineSegment2 {
     intersection(other: LineSegment2): IntersectionResult | null;
     intersects(other: LineSegment2): boolean;
     closestPointTo(target: Point2): import("./Vec3").default;
+    /** Returns the distance from this line segment to `target`. */
+    distance(target: Point2): number;
     transformedBy(affineTransfm: Mat33): LineSegment2;
     toString(): string;
 }

package/dist/cjs/src/math/LineSegment2.js

@@ -121,6 +121,10 @@ class LineSegment2 {
             return this.p1;
         }
     }
+    /** Returns the distance from this line segment to `target`. */
+    distance(target) {
+        return this.closestPointTo(target).minus(target).magnitude();
+    }
     transformedBy(affineTransfm) {
         return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));
     }

package/dist/cjs/src/math/Mat33.js

@@ -328,5 +328,5 @@ class Mat33 {
         return transform;
     }
 }
-exports.default = Mat33;
 Mat33.identity = new Mat33(1, 0, 0, 0, 1, 0, 0, 0, 1);
+exports.default = Mat33;

package/dist/cjs/src/math/Path.d.ts

@@ -32,21 +32,42 @@ export interface MoveToPathCommand {
 }
 export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
-    curve: LineSegment2 | Bezier;
+    curve: LineSegment2 | Bezier | Point2;
     parameterValue: number;
     point: Point2;
 }
+type GeometryType = LineSegment2 | Bezier | Point2;
+type GeometryArrayType = Array<GeometryType>;
 export default class Path {
     readonly startPoint: Point2;
     readonly parts: PathCommand[];
+    /**
+     * A rough estimate of the bounding box of the path.
+     * A slight overestimate.
+     * See {@link getExactBBox}
+     */
     readonly bbox: Rect2;
     constructor(startPoint: Point2, parts: PathCommand[]);
+    getExactBBox(): Rect2;
     private cachedGeometry;
-    get geometry(): Array<LineSegment2 | Bezier>;
+    get geometry(): GeometryArrayType;
     private cachedPolylineApproximation;
     polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
-    intersection(line: LineSegment2): IntersectionResult[];
+    /**
+     * Let `S` be a closed path a distance `strokeRadius` from this path.
+     *
+     * @returns Approximate intersections of `line` with `S` using ray marching, starting from
+     * 	        both end points of `line` and each point in `additionalRaymarchStartPoints`.
+     */
+    private raymarchIntersectionWith;
+    /**
+     * Returns a list of intersections with this path. If `strokeRadius` is given,
+     * intersections are approximated with the surface `strokeRadius` away from this.
+     *
+     * If `strokeRadius > 0`, the resultant `parameterValue` has no defined value.
+     */
+    intersection(line: LineSegment2, strokeRadius?: number): IntersectionResult[];
     private static mapPathCommand;
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;