js-draw - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+# 0.21.0
+ * Color picker (Note: uses the [Coloris library](https://github.com/melloware/coloris-npm))
+   * Allow the user to start drawing without an extra click when closing the color picker.
+   * Increase the size of sliders' touch targets for easier selection.
+ * Adjust stroke smoothing: Strokes should now be closer to user input.
+ * Erasing and selecting: Use the edge rather than the center of strokes to determine eraser/selection intersection.
+   * This was previously only the case for filled strokes (as produced by the flat-tip pen).
+
 # 0.20.0
@@ -2,0 +10,0 @@ * Added option for grid-patterned background.

dist/bundledStyles.js

@@ -1,1 +0,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\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\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})();

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

@@ -35,4 +35,11 @@ import SerializableCommand from '../commands/SerializableCommand';
     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. */
@@ -47,2 +54,7 @@ onAddToImage(_image: EditorImage): void;
      *  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.
      */
@@ -49,0 +61,0 @@ intersectsRect(rect: Rect2): boolean;

dist/cjs/src/components/AbstractComponent.js

@@ -63,6 +63,15 @@ "use strict";
     }
-    /** @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. */
@@ -74,16 +83,17 @@ onAddToImage(_image) { }
      *  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));
@@ -90,0 +100,0 @@ }

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

@@ -56,2 +56,3 @@ import SerializableCommand from '../commands/SerializableCommand';
     private bboxForPart;
+    getExactBBox(): Rect2;
     protected applyTransformation(affineTransfm: Mat33): void;
@@ -58,0 +59,0 @@ /**

dist/cjs/src/components/Stroke.js

@@ -117,4 +117,7 @@ "use strict";
     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;
@@ -153,2 +156,12 @@ }
     }
+    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) {
@@ -155,0 +168,0 @@ this.contentBBox = Rect2_1.default.empty;

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

@@ -155,3 +155,3 @@ "use strict";
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.2;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
@@ -194,19 +194,17 @@ const segmentEnd = newPoint.pos;
         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;
-                }
             }
@@ -213,0 +211,0 @@ return true;

dist/cjs/src/Editor.d.ts

@@ -194,3 +194,6 @@ import EditorImage from './EditorImage';
      */
-    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. */
@@ -197,0 +200,0 @@ handleKeyEventsFrom(elem: HTMLElement): void;

dist/cjs/src/Editor.js

@@ -487,16 +487,34 @@ "use strict";
         // 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]);
+                }
+            },
+        };
     }
@@ -503,0 +521,0 @@ /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */

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

@@ -21,2 +21,4 @@ import Mat33 from './Mat33';
     closestPointTo(target: Point2): import("./Vec3").default;
+    /** Returns the distance from this line segment to `target`. */
+    distance(target: Point2): number;
     transformedBy(affineTransfm: Mat33): LineSegment2;
@@ -23,0 +25,0 @@ toString(): string;

dist/cjs/src/math/LineSegment2.js

@@ -124,2 +124,6 @@ "use strict";
     }
+    /** Returns the distance from this line segment to `target`. */
+    distance(target) {
+        return this.closestPointTo(target).minus(target).magnitude();
+    }
     transformedBy(affineTransfm) {
@@ -126,0 +130,0 @@ return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));

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

@@ -35,17 +35,38 @@ import { Bezier } from 'bezier-js';
 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;
@@ -52,0 +73,0 @@ mapPoints(mapping: (point: Point2) => Point2): Path;

dist/cjs/src/math/Path.js

@@ -13,2 +13,3 @@ "use strict";
 const Vec2_1 = require("./Vec2");
+const Vec3_1 = __importDefault(require("./Vec3"));
 var PathCommandType;
@@ -21,2 +22,19 @@ (function (PathCommandType) {
 })(PathCommandType = exports.PathCommandType || (exports.PathCommandType = {}));
+// Returns the bounding box of one path segment.
+const getPartBBox = (part) => {
+    let partBBox;
+    if (part instanceof LineSegment2_1.default) {
+        partBBox = part.bbox;
+    }
+    else if (part instanceof bezier_js_1.Bezier) {
+        const bbox = part.bbox();
+        const width = bbox.x.max - bbox.x.min;
+        const height = bbox.y.max - bbox.y.min;
+        partBBox = new Rect2_1.default(bbox.x.min, bbox.y.min, width, height);
+    }
+    else {
+        partBBox = new Rect2_1.default(part.x, part.y, 0, 0);
+    }
+    return partBBox;
+};
 class Path {
@@ -37,2 +55,9 @@ constructor(startPoint, parts) {
     }
+    getExactBBox() {
+        const bboxes = [];
+        for (const part of this.geometry) {
+            bboxes.push(getPartBBox(part));
+        }
+        return Rect2_1.default.union(...bboxes);
+    }
     // Lazy-loads and returns this path's geometry
@@ -60,2 +85,3 @@ get geometry() {
                 case PathCommandType.MoveTo:
+                    geometry.push(part.point);
                     startPoint = part.point;
@@ -116,7 +142,193 @@ break;
     }
-    intersection(line) {
-        if (!line.bbox.intersects(this.bbox)) {
+    /**
+     * 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`.
+     */
+    raymarchIntersectionWith(line, strokeRadius, additionalRaymarchStartPoints = []) {
+        var _a, _b;
+        // No intersection between bounding boxes: No possible intersection
+        // of the interior.
+        if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius))) {
             return [];
         }
+        const lineLength = line.length;
+        const partDistFunctionRecords = [];
+        // Determine distance functions for all parts that the given line could possibly intersect with
+        for (const part of this.geometry) {
+            const bbox = getPartBBox(part).grownBy(strokeRadius);
+            if (!bbox.intersects(line.bbox)) {
+                continue;
+            }
+            // Signed distance function
+            let partDist;
+            if (part instanceof LineSegment2_1.default) {
+                partDist = (point) => part.distance(point);
+            }
+            else if (part instanceof Vec3_1.default) {
+                partDist = (point) => part.minus(point).magnitude();
+            }
+            else {
+                partDist = (point) => {
+                    return part.project(point).d;
+                };
+            }
+            // Part signed distance function (negative result implies `point` is
+            // inside the shape).
+            const partSdf = (point) => partDist(point) - strokeRadius;
+            // If the line can't possibly intersect the part,
+            if (partSdf(line.p1) > lineLength && partSdf(line.p2) > lineLength) {
+                continue;
+            }
+            partDistFunctionRecords.push({
+                part,
+                distFn: partDist,
+                bbox,
+            });
+        }
+        // If no distance functions, there are no intersections.
+        if (partDistFunctionRecords.length === 0) {
+            return [];
+        }
+        // Returns the minimum distance to a part in this stroke, where only parts that the given
+        // line could intersect are considered.
+        const sdf = (point) => {
+            let minDist = Infinity;
+            let minDistPart = null;
+            const uncheckedDistFunctions = [];
+            // First pass: only curves for which the current point is inside
+            // the bounding box.
+            for (const distFnRecord of partDistFunctionRecords) {
+                const { part, distFn, bbox } = distFnRecord;
+                // Check later if the current point isn't in the bounding box.
+                if (!bbox.containsPoint(point)) {
+                    uncheckedDistFunctions.push(distFnRecord);
+                    continue;
+                }
+                const currentDist = distFn(point);
+                if (currentDist <= minDist) {
+                    minDist = currentDist;
+                    minDistPart = part;
+                }
+            }
+            // Second pass: Everything else
+            for (const { part, distFn, bbox } of uncheckedDistFunctions) {
+                // Skip if impossible for the distance to the target to be lesser than
+                // the current minimum.
+                if (!bbox.grownBy(minDist).containsPoint(point)) {
+                    continue;
+                }
+                const currentDist = distFn(point);
+                if (currentDist <= minDist) {
+                    minDist = currentDist;
+                    minDistPart = part;
+                }
+            }
+            return [minDistPart, minDist - strokeRadius];
+        };
+        // Raymarch:
+        const maxRaymarchSteps = 7;
+        // Start raymarching from each of these points. This allows detection of multiple
+        // intersections.
+        const startPoints = [
+            line.p1, ...additionalRaymarchStartPoints, line.p2
+        ];
+        // Converts a point ON THE LINE to a parameter
+        const pointToParameter = (point) => {
+            // Because line.direction is a unit vector, this computes the length
+            // of the projection of the vector(line.p1->point) onto line.direction.
+            //
+            // Note that this can be negative if the given point is outside of the given
+            // line segment.
+            return point.minus(line.p1).dot(line.direction);
+        };
+        // Sort start points by parameter on the line.
+        // This allows us to determine whether the current value of a parameter
+        // drops down to a value already tested.
+        startPoints.sort((a, b) => {
+            const t_a = pointToParameter(a);
+            const t_b = pointToParameter(b);
+            // Sort in increasing order
+            return t_a - t_b;
+        });
         const result = [];
+        const stoppingThreshold = strokeRadius / 1000;
+        // Returns the maximum x value explored
+        const raymarchFrom = (startPoint, 
+        // Direction to march in (multiplies line.direction)
+        directionMultiplier, 
+        // Terminate if the current point corresponds to a parameter
+        // below this.
+        minimumLineParameter) => {
+            let currentPoint = startPoint;
+            let [lastPart, lastDist] = sdf(currentPoint);
+            let lastParameter = pointToParameter(currentPoint);
+            if (lastDist > lineLength) {
+                return lastParameter;
+            }
+            const direction = line.direction.times(directionMultiplier);
+            for (let i = 0; i < maxRaymarchSteps; i++) {
+                // Step in the direction of the edge of the shape.
+                const step = lastDist;
+                currentPoint = currentPoint.plus(direction.times(step));
+                lastParameter = pointToParameter(currentPoint);
+                // If we're below the minimum parameter, stop. We've already tried
+                // this.
+                if (lastParameter <= minimumLineParameter) {
+                    return lastParameter;
+                }
+                const [currentPart, signedDist] = sdf(currentPoint);
+                // Ensure we're stepping in the correct direction.
+                // Note that because we could start with a negative distance and work towards a
+                // positive distance, we need absolute values here.
+                if (Math.abs(signedDist) > Math.abs(lastDist)) {
+                    // If not, stop.
+                    return null;
+                }
+                lastDist = signedDist;
+                lastPart = currentPart;
+                // Is the distance close enough that we can stop early?
+                if (Math.abs(lastDist) < stoppingThreshold) {
+                    break;
+                }
+            }
+            // Ensure that the point we ended with is on the line.
+            const isOnLineSegment = lastParameter >= 0 && lastParameter <= lineLength;
+            if (lastPart && isOnLineSegment && Math.abs(lastDist) < stoppingThreshold) {
+                result.push({
+                    point: currentPoint,
+                    parameterValue: NaN,
+                    curve: lastPart,
+                });
+            }
+            return lastParameter;
+        };
+        // The maximum value of the line's parameter explored so far (0 corresponds to
+        // line.p1)
+        let maxLineT = 0;
+        // Raymarch for each start point.
+        //
+        // Use a for (i from 0 to length) loop because startPoints may be added
+        // during iteration.
+        for (let i = 0; i < startPoints.length; i++) {
+            const startPoint = startPoints[i];
+            // Try raymarching in both directions.
+            maxLineT = Math.max(maxLineT, (_a = raymarchFrom(startPoint, 1, maxLineT)) !== null && _a !== void 0 ? _a : maxLineT);
+            maxLineT = Math.max(maxLineT, (_b = raymarchFrom(startPoint, -1, maxLineT)) !== null && _b !== void 0 ? _b : maxLineT);
+        }
+        return result;
+    }
+    /**
+     * 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, strokeRadius) {
+        let result = [];
+        // Is any intersection between shapes within the bounding boxes impossible?
+        if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius !== null && strokeRadius !== void 0 ? strokeRadius : 0))) {
+            return [];
+        }
         for (const part of this.geometry) {
@@ -133,3 +345,3 @@ if (part instanceof LineSegment2_1.default) {
             }
-            else {
+            else if (part instanceof bezier_js_1.Bezier) {
                 const intersectionPoints = part.intersects(line).map(t => {
@@ -157,2 +369,11 @@ // We're using the .intersects(line) function, which is documented
         }
+        // If given a non-zero strokeWidth, attempt to raymarch.
+        // Even if raymarching, we need to collect starting points.
+        // We use the above-calculated intersections for this.
+        const doRaymarching = strokeRadius && strokeRadius > 1e-8;
+        if (doRaymarching) {
+            // Starting points for raymarching (in addition to the end points of the line).
+            const startPoints = result.map(intersection => intersection.point);
+            result = this.raymarchIntersectionWith(line, strokeRadius, startPoints);
+        }
         return result;
@@ -159,0 +380,0 @@ }

dist/cjs/src/math/polynomial/QuadraticBezier.d.ts

@@ -24,3 +24,3 @@ import { Point2, Vec2 } from '../Vec2';
     /**
-     * @returns the exact distance from `point` to this.
+     * @returns the (more) exact distance from `point` to this.
      */
@@ -27,0 +27,0 @@ distance(point: Point2): number;

dist/cjs/src/math/polynomial/QuadraticBezier.js

@@ -100,3 +100,3 @@ "use strict";
     /**
-     * @returns the exact distance from `point` to this.
+     * @returns the (more) exact distance from `point` to this.
      */
@@ -107,5 +107,4 @@ distance(point) {
         }
-        const proj = Vec2_1.Vec2.ofXY(this.bezierJs.project(point.xy));
-        const dist = proj.minus(point).magnitude();
-        return dist;
+        // .d: Distance
+        return this.bezierJs.project(point.xy).d;
     }
@@ -112,0 +111,0 @@ normal(t) {

dist/cjs/src/math/Rect2.js

@@ -76,5 +76,3 @@ "use strict";
     union(other) {
-        const topLeft = this.topLeft.zip(other.topLeft, Math.min);
-        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.max);
-        return Rect2.fromCorners(topLeft, bottomRight);
+        return Rect2.union(this, other);
     }
@@ -117,2 +115,5 @@ // Returns a the subdivision of this into [columns] columns
     grownBy(margin) {
+        if (margin === 0) {
+            return this;
+        }
         return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
@@ -119,0 +120,0 @@ }

dist/cjs/src/toolbar/HTMLToolbar.js

@@ -69,2 +69,9 @@ "use strict";
         this.editor.createHTMLOverlay(closePickerOverlay);
+        // Hide the color picker when attempting to draw on the overlay.
+        this.listeners.push(this.editor.handlePointerEventsFrom(closePickerOverlay, (eventName) => {
+            if (eventName === 'pointerdown') {
+                (0, coloris_1.close)();
+            }
+            return true;
+        }));
         const maxSwatchLen = 12;
@@ -71,0 +78,0 @@ const swatches = [

dist/mjs/src/components/AbstractComponent.d.ts

@@ -35,4 +35,11 @@ import SerializableCommand from '../commands/SerializableCommand';
     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. */
@@ -47,2 +54,7 @@ onAddToImage(_image: EditorImage): void;
      *  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.
      */
@@ -49,0 +61,0 @@ intersectsRect(rect: Rect2): boolean;

dist/mjs/src/components/Stroke.d.ts

@@ -56,2 +56,3 @@ import SerializableCommand from '../commands/SerializableCommand';
     private bboxForPart;
+    getExactBBox(): Rect2;
     protected applyTransformation(affineTransfm: Mat33): void;
@@ -58,0 +59,0 @@ /**

dist/mjs/src/Editor.d.ts

@@ -194,3 +194,6 @@ import EditorImage from './EditorImage';
      */
-    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. */
@@ -197,0 +200,0 @@ handleKeyEventsFrom(elem: HTMLElement): void;

dist/mjs/src/math/LineSegment2.d.ts

@@ -21,2 +21,4 @@ import Mat33 from './Mat33';
     closestPointTo(target: Point2): import("./Vec3").default;
+    /** Returns the distance from this line segment to `target`. */
+    distance(target: Point2): number;
     transformedBy(affineTransfm: Mat33): LineSegment2;
@@ -23,0 +25,0 @@ toString(): string;

dist/mjs/src/math/Path.d.ts

@@ -35,17 +35,38 @@ import { Bezier } from 'bezier-js';
 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;
@@ -52,0 +73,0 @@ mapPoints(mapping: (point: Point2) => Point2): Path;

dist/mjs/src/math/polynomial/QuadraticBezier.d.ts

@@ -24,3 +24,3 @@ import { Point2, Vec2 } from '../Vec2';
     /**
-     * @returns the exact distance from `point` to this.
+     * @returns the (more) exact distance from `point` to this.
      */
@@ -27,0 +27,0 @@ distance(point: Point2): number;

package.json

 {
 	"name": "js-draw",
-	"version": "0.20.0",
+	"version": "0.21.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
@@ -5,0 +5,0 @@ "types": "./dist/mjs/src/lib.d.ts",

README.md

@@ -32,7 +32,7 @@ # js-draw
 import Editor from 'js-draw';
-import 'js-draw/bundle';
+import 'js-draw/bundledStyles';
 
 const editor = new Editor(document.body);
 ```
-`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing or including it with a `<script src="..."></script>` tag applies editor-specific CSS to the document.
+`js-draw/bundledStyles` is a version of the editor's stylesheets pre-processed by `Webpack`. As such, `import`ing or including it with a `<script src="..."></script>` tag applies editor-specific CSS to the document.
 
@@ -43,4 +43,4 @@ ### Without a bundler
 ```html
-<!-- Replace 0.17.3 with the latest version of js-draw -->
-<script src="https://cdn.jsdelivr.net/npm/js-draw@0.17.3/dist/bundle.js"></script>
+<!-- Replace 0.20.0 with the latest version of js-draw -->
+<script src="https://cdn.jsdelivr.net/npm/js-draw@0.20.0/dist/bundle.js"></script>
 <script>
@@ -47,0 +47,0 @@ const editor = new jsdraw.Editor(document.body);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2006264

increased by1.8%

Number of package files

507

increased by0.2%

Lines of code

39969

increased by1.76%

No dependency changes