js-draw 0.18.2 → 0.19.0

package/dist/bundledStyles.js

@@ -0,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){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 x=o(786),f={};f.styleTagTransform=b(),f.setAttributes=c(),f.insert=l().bind(null,"head"),f.domAPI=i(),f.insertStyleElement=s();n()(x.Z,f);x.Z&&x.Z.locals&&x.Z.locals})(),window.jsdrawStyles=t})();

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

@@ -1,3 +1,4 @@
+import Vec3 from './math/Vec3';
 export default class Color4 {
     /** Red component. Should be in the range [0, 1]. */
     readonly r: number;
@@ -36,6 +37,13 @@ export default class Color4 {
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
     static average(colors: Color4[]): Color4;
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV(): Vec3;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/cjs/src/Color4.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Color4 = void 0;
+const Vec3_1 = __importDefault(require("./math/Vec3"));
 class Color4 {
     constructor(
     /** Red component. Should be in the range [0, 1]. */
@@ -150,6 +154,69 @@ class Color4 {
         }
         return new Color4(averageR, averageG, averageB, averageA);
     }
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV() {
+        // Ref: https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        //
+        // HUE:
+        // First, consider the unit cube. Rotate it such that one vertex is at the origin
+        // of a plane and its three neighboring vertices are equidistant from that plane:
+        //
+        //         /\
+        //       /  | \
+        //   2 /    3   \ 1
+        //     \    |   /
+        //       \  | /
+        //   .     \/      .
+        //                 
+        //        .        
+        //
+        // Let z be up and (x, y, 0) be in the plane.
+        //
+        // Label vectors 1,2,3 with R, G, and B, respectively. Let R's projection into the plane
+        // lie along the x axis.
+        //
+        // Because R is a unit vector and R, G, B are equidistant from the plane, they must
+        // form 30-60-90 triangles, which have side lengths proportional to (1, √3, 2)
+        //
+        //       /|
+        //    1/  | (√3)/2
+        //    /   |
+        //      1/2   
+        //
+        const minComponent = Math.min(this.r, this.g, this.b);
+        const maxComponent = Math.max(this.r, this.g, this.b);
+        const chroma = maxComponent - minComponent;
+        let hue;
+        // See https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        if (chroma === 0) {
+            hue = 0;
+        }
+        else if (this.r >= this.g && this.r >= this.b) {
+            hue = ((this.g - this.b) / chroma) % 6;
+        }
+        else if (this.g >= this.r && this.g >= this.b) {
+            hue = (this.b - this.r) / chroma + 2;
+        }
+        else {
+            hue = (this.r - this.g) / chroma + 4;
+        }
+        // Convert to degree representation, then to radians.
+        hue *= 60;
+        hue *= Math.PI / 180;
+        // Ensure positivity.
+        if (hue < 0) {
+            hue += Math.PI * 2;
+        }
+        const value = maxComponent;
+        const saturation = value > 0 ? chroma / value : 0;
+        return Vec3_1.default.of(hue, saturation, value);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

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

@@ -53,7 +53,7 @@ export interface EditorSettings {
 export declare class Editor {
     private container;
     private renderingRegion;
-    /** Manages drawing surfaces/{@link lib!AbstractRenderer}s. */
+    /** Manages drawing surfaces/{@link AbstractRenderer}s. */
     display: Display;
     /**
      * Handles undo/redo.
@@ -95,7 +95,7 @@ export declare class Editor {
     readonly viewport: Viewport;
     /** @internal */
     readonly localization: EditorLocalization;
-    /** {@link lib!EditorSettings.iconProvider} */
+    /** {@link EditorSettings.iconProvider} */
     readonly icons: IconProvider;
     /**
      * Controls the list of tools. See

package/dist/cjs/src/Editor.js

@@ -258,8 +258,8 @@ class Editor {
             if (evt.ctrlKey || evt.metaKey) {
                 delta = Vec3_1.default.of(0, 0, evt.deltaY);
             }
-            // Ensure that `pos` is relative to `this.container`
-            const bbox = this.container.getBoundingClientRect();
+            // Ensure that `pos` is relative to `this.renderingRegion`
+            const bbox = this.renderingRegion.getBoundingClientRect();
             const pos = Vec2_1.Vec2.of(evt.clientX, evt.clientY).minus(Vec2_1.Vec2.of(bbox.left, bbox.top));
             if (this.toolController.dispatchInputEvent({
                 kind: types_1.InputEvtType.WheelEvt,

package/dist/cjs/src/SVGLoader.js

@@ -68,14 +68,13 @@ class SVGLoader {
     // If [computedStyles] is given, it is preferred to directly accessing node's style object.
     getStyle(node, computedStyles) {
         var _a, _b, _c, _d, _f, _g;
-        const style = {
-            fill: Color4_1.default.transparent,
-        };
+        let fill = Color4_1.default.transparent;
+        let stroke;
         // If possible, use computedStyles (allows property inheritance).
         const fillAttribute = (_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.fill) !== null && _b !== void 0 ? _b : node.style.fill;
         if (fillAttribute) {
             try {
-                style.fill = Color4_1.default.fromString(fillAttribute);
+                fill = Color4_1.default.fromString(fillAttribute);
             }
             catch (e) {
                 console.error('Unknown fill color,', fillAttribute);
@@ -91,7 +90,7 @@ class SVGLoader {
                 }
                 const strokeColor = Color4_1.default.fromString(strokeAttribute);
                 if (strokeColor.a > 0) {
-                    style.stroke = {
+                    stroke = {
                         width,
                         color: strokeColor,
                     };
@@ -101,6 +100,10 @@ class SVGLoader {
                 console.error('Error parsing stroke data:', e);
             }
         }
+        const style = {
+            fill,
+            stroke,
+        };
         return style;
     }
     strokeDataFromElem(node) {

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

@@ -26,13 +26,13 @@ export default abstract class AbstractComponent {
     /**
      * Attach data that can be used while exporting the component (e.g. to SVG).
      *
-     * This is intended for use by a {@link ImageLoader}.
+     * This is intended for use by an {@link ImageLoader}.
      */
     attachLoadSaveData(key: string, data: LoadSaveData): void;
     /** See {@link attachLoadSaveData} */
     getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
-    /** @returns the bounding box of  */
+    /** @returns the bounding box of this. */
     getBBox(): Rect2;
     /** Called when this component is added to the given image. */
     onAddToImage(_image: EditorImage): void;

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

@@ -32,7 +32,7 @@ class AbstractComponent {
         }
     }
     // Returns a unique ID for this element.
-    // @see { @link lib!EditorImage.lookupElement }
+    // @see { @link EditorImage.lookupElement }
     getId() {
         return this.id;
     }
@@ -45,7 +45,7 @@ class AbstractComponent {
     /**
      * Attach data that can be used while exporting the component (e.g. to SVG).
      *
-     * This is intended for use by a {@link ImageLoader}.
+     * This is intended for use by an {@link ImageLoader}.
      */
     attachLoadSaveData(key, data) {
         if (!this.loadSaveData[key]) {
@@ -60,7 +60,7 @@ class AbstractComponent {
     getZIndex() {
         return this.zIndex;
     }
-    /** @returns the bounding box of  */
+    /** @returns the bounding box of this. */
     getBBox() {
         return this.contentBBox;
     }

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

@@ -15,7 +15,7 @@ var BackgroundType;
     BackgroundType[BackgroundType["None"] = 1] = "None";
 })(BackgroundType = exports.BackgroundType || (exports.BackgroundType = {}));
 exports.imageBackgroundCSSClassName = 'js-draw-image-background';
-// Represents the background of an image in the editor.
+// Represents the background of the editor's canvas.
 class ImageBackground extends AbstractComponent_1.default {
     constructor(backgroundType, mainColor) {
         super('image-background', 0);

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

@@ -1,16 +1,35 @@
 import Color4 from '../Color4';
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
-import TextStyle from '../rendering/TextRenderingStyle';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 export interface ComponentStyle {
     color?: Color4;
-    textStyle?: TextStyle;
+    textStyle?: TextRenderingStyle;
 }
 export declare const createRestyleComponentCommand: (initialStyle: ComponentStyle, newStyle: ComponentStyle, component: RestyleableComponent) => SerializableCommand;
 export declare const isRestylableComponent: (component: AbstractComponent) => component is RestyleableComponent;
+/**
+ * An interface to be implemented by components with a changable color or {@link TextRenderingStyle}.
+ *
+ * All such classes must have a member variable, `isRestylableComponent` that is set to `true`
+ * to allow testing whether the class is a `RestylableComponent` (see {@link isRestylableComponent}).
+ */
 export interface RestyleableComponent extends AbstractComponent {
+    /**
+     * @returns a partial representation of this component's style.
+     */
     getStyle(): ComponentStyle;
+    /**
+     * Returns a {@link Command} that updates portions of this component's style
+     * to the given `style`.
+     *
+     * @example
+     * For some component and editor,
+     * ```ts
+     * editor.dispatch(component.updateStyle({ color: Color4.red }));
+     * ```
+     */
     updateStyle(style: ComponentStyle): SerializableCommand;
     /**
      * Set the style of this component in a way that can't be undone/redone

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

@@ -8,11 +8,43 @@ import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/Abs
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
 export default class Stroke extends AbstractComponent implements RestyleableComponent {
     private parts;
     protected contentBBox: Rect2;
     readonly isRestylableComponent: true;
     private approximateRenderingTime;
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
     constructor(parts: RenderablePathSpec[]);
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
@@ -22,6 +54,9 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     getProportionalRenderingTime(): number;
     private bboxForPart;
     protected applyTransformation(affineTransfm: Mat33): void;
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
     getPath(): Path;
     description(localization: ImageComponentLocalization): string;
     protected createClone(): AbstractComponent;

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

@@ -8,12 +8,43 @@ const Rect2_1 = __importDefault(require("../math/Rect2"));
 const RenderingStyle_1 = require("../rendering/RenderingStyle");
 const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
 const RestylableComponent_1 = require("./RestylableComponent");
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
 class Stroke extends AbstractComponent_1.default {
-    // Creates a `Stroke` from the given `parts`. All parts should have the
-    // same color.
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
     constructor(parts) {
         var _a;
         super('stroke');
+        // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
         this.approximateRenderingTime = 0;
@@ -146,6 +177,9 @@ class Stroke extends AbstractComponent_1.default {
             };
         });
     }
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
     getPath() {
         let result = null;
         for (const part of this.parts) {

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

@@ -4,18 +4,26 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import Editor from '../Editor';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import { TextStyle } from '../rendering/TextRenderingStyle';
+import { TextRenderingStyle } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Displays text.
+ */
 export default class TextComponent extends AbstractComponent implements RestyleableComponent {
     protected readonly textObjects: Array<string | TextComponent>;
     private transform;
     private style;
     protected contentBBox: Rect2;
     readonly isRestylableComponent: true;
-    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextStyle);
-    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
+    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextRenderingStyle);
+    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
     private static textMeasuringCtx;
     private static estimateTextDimens;
     private static getTextDimens;
@@ -49,5 +57,19 @@ export default class TextComponent extends AbstractComponent implements Restylea
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
     static deserializeFromString(json: any): TextComponent;
-    static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent;
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
+    static fromLines(lines: string[], transform: Mat33, style: TextRenderingStyle): AbstractComponent;
 }

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

@@ -11,7 +11,15 @@ const TextRenderingStyle_1 = require("../rendering/TextRenderingStyle");
 const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
 const RestylableComponent_1 = require("./RestylableComponent");
 const componentTypeId = 'text';
+/**
+ * Displays text.
+ */
 class TextComponent extends AbstractComponent_1.default {
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
     constructor(textObjects, transform, style) {
         super(componentTypeId);
         this.textObjects = textObjects;
@@ -237,6 +245,20 @@ class TextComponent extends AbstractComponent_1.default {
         const transform = new Mat33_1.default(...transformData);
         return new TextComponent(textObjects, transform, style);
     }
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
     static fromLines(lines, transform, style) {
         let lastComponent = null;
         const components = [];

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

@@ -7,6 +7,7 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
+import RestyleableComponent from './RestylableComponent';
+import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
 import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

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

@@ -5,10 +5,40 @@
  * @example
  * ```
  * import { Editor, Vec3, Mat33 } from 'js-draw';
+ *
+ * // Apply js-draw CSS
+ * import 'js-draw/styles';
+ * // If your bundler doesn't support the above, try
+ * // import 'js-draw/bundledStyles';
+ *
+ * (async () => {
+ *   const editor = new Editor(document.body);
+ *   const toolbar = editor.addToolbar();
+ *   editor.getRootElement().style.height = '600px';
+ *
+ *   await editor.loadFromSVG(`
+ *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+ *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *       </svg>
+ *   `);
+ *
+ *   toolbar.addActionButton({
+ *      label: 'Save',
+ *      icon: editor.icons.makeSaveIcon(),
+ *   }, () => {
+ *       const saveData = editor.toSVG().outerHTML;
+ *
+ *       // Do something with saveData
+ *   });
+ * })();
  * ```
  *
  * @see
  * {@link Editor}
+ * {@link Editor.loadFromSVG}
+ * {@link HTMLToolbar.addActionButton }
  *
  * @packageDocumentation
  */

package/dist/cjs/src/lib.js

@@ -6,10 +6,40 @@
  * @example
  * ```
  * import { Editor, Vec3, Mat33 } from 'js-draw';
+ *
+ * // Apply js-draw CSS
+ * import 'js-draw/styles';
+ * // If your bundler doesn't support the above, try
+ * // import 'js-draw/bundledStyles';
+ *
+ * (async () => {
+ *   const editor = new Editor(document.body);
+ *   const toolbar = editor.addToolbar();
+ *   editor.getRootElement().style.height = '600px';
+ *
+ *   await editor.loadFromSVG(`
+ *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+ *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *       </svg>
+ *   `);
+ *
+ *   toolbar.addActionButton({
+ *      label: 'Save',
+ *      icon: editor.icons.makeSaveIcon(),
+ *   }, () => {
+ *       const saveData = editor.toSVG().outerHTML;
+ *
+ *       // Do something with saveData
+ *   });
+ * })();
  * ```
  *
  * @see
  * {@link Editor}
+ * {@link Editor.loadFromSVG}
+ * {@link HTMLToolbar.addActionButton }
  *
  * @packageDocumentation
  */

package/dist/cjs/src/rendering/RenderingStyle.d.ts

@@ -1,9 +1,9 @@
 import Color4 from '../Color4';
 interface RenderingStyle {
-    fill: Color4;
-    stroke?: {
-        color: Color4;
-        width: number;
+    readonly fill: Color4;
+    readonly stroke?: {
+        readonly color: Color4;
+        readonly width: number;
     };
 }
 export default RenderingStyle;