js-draw 0.18.2 → 0.19.0

package/dist/mjs/src/components/AbstractComponent.mjs

@@ -27,7 +27,7 @@ export default class AbstractComponent {
         }
     }
     // Returns a unique ID for this element.
-    // @see { @link lib!EditorImage.lookupElement }
+    // @see { @link EditorImage.lookupElement }
     getId() {
         return this.id;
     }
@@ -40,7 +40,7 @@ export default 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]) {
@@ -55,7 +55,7 @@ export default class AbstractComponent {
     getZIndex() {
         return this.zIndex;
     }
-    /** @returns the bounding box of  */
+    /** @returns the bounding box of this. */
     getBBox() {
         return this.contentBBox;
     }

package/dist/mjs/src/components/ImageBackground.mjs

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

package/dist/mjs/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/mjs/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/mjs/src/components/Stroke.mjs

@@ -3,12 +3,43 @@ import  Rect2  from '../math/Rect2.mjs';
 import  { styleFromJSON, styleToJSON }  from '../rendering/RenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+/**
+ * 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 {
-    // 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;
@@ -141,6 +172,9 @@ export default class Stroke extends AbstractComponent {
             };
         });
     }
+    /**
+     * @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/mjs/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/mjs/src/components/TextComponent.mjs

@@ -6,7 +6,15 @@ import  { cloneTextStyle, textStyleFromJSON, textStyleToJSON }  from '../renderi
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
 const componentTypeId = 'text';
+/**
+ * Displays text.
+ */
 export default class TextComponent extends AbstractComponent {
+    /**
+     * 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;
@@ -232,6 +240,20 @@ export default class TextComponent extends AbstractComponent {
         const transform = new Mat33(...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/mjs/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/mjs/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/mjs/src/lib.mjs

@@ -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/mjs/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;

package/dist/mjs/src/rendering/TextRenderingStyle.d.ts

@@ -1,13 +1,13 @@
 import RenderingStyle from './RenderingStyle';
-export interface TextStyle {
-    size: number;
-    fontFamily: string;
-    fontWeight?: string;
-    fontVariant?: string;
-    renderingStyle: RenderingStyle;
+export interface TextRenderingStyle {
+    readonly size: number;
+    readonly fontFamily: string;
+    readonly fontWeight?: string;
+    readonly fontVariant?: string;
+    readonly renderingStyle: RenderingStyle;
 }
-export default TextStyle;
-export declare const cloneTextStyle: (style: TextStyle) => {
+export default TextRenderingStyle;
+export declare const cloneTextStyle: (style: TextRenderingStyle) => {
     renderingStyle: {
         fill: import("../Color4").default;
         stroke: {
@@ -20,8 +20,8 @@ export declare const cloneTextStyle: (style: TextStyle) => {
     fontWeight?: string | undefined;
     fontVariant?: string | undefined;
 };
-export declare const textStyleFromJSON: (json: any) => TextStyle;
-export declare const textStyleToJSON: (style: TextStyle) => {
+export declare const textStyleFromJSON: (json: any) => TextRenderingStyle;
+export declare const textStyleToJSON: (style: TextRenderingStyle) => {
     renderingStyle: {
         fill: string;
         stroke: {

package/dist/mjs/src/rendering/lib.d.ts

@@ -3,3 +3,5 @@ export { default as DummyRenderer } from './renderers/DummyRenderer';
 export { default as SVGRenderer } from './renderers/SVGRenderer';
 export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display, RenderingMode } from './Display';
+export { default as TextRenderingStyle } from './TextRenderingStyle';
+export { default as RenderingStyle } from './RenderingStyle';

package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts

@@ -6,7 +6,7 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];
@@ -33,7 +33,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
-    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+    abstract drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     abstract drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;

package/dist/mjs/src/rendering/renderers/CanvasRenderer.d.ts

@@ -4,7 +4,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
@@ -53,7 +53,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
-    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip?: boolean): void;

package/dist/mjs/src/rendering/renderers/DummyRenderer.d.ts

@@ -4,7 +4,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
@@ -25,7 +25,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
-    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;

package/dist/mjs/src/rendering/renderers/SVGRenderer.d.ts

@@ -4,7 +4,7 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
 /**
@@ -36,7 +36,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private textContainer;
     private textContainerTransform;
     private textParentStyle;
-    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;

package/dist/mjs/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -4,7 +4,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
@@ -22,7 +22,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     protected moveTo(_point: Vec3): void;
     protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
     protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
-    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     isTooSmallToRender(rect: Rect2): boolean;
     drawPoints(..._points: Vec3[]): void;

package/dist/mjs/src/toolbar/IconProvider.d.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import TextStyle from '../rendering/TextRenderingStyle';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import Pen from '../tools/Pen';
 export type IconType = HTMLImageElement | SVGElement;
 /**
@@ -47,7 +47,7 @@ export default class IconProvider {
     makeZoomIcon(): IconType;
     makeRotationLockIcon(): IconType;
     makeInsertImageIcon(): IconType;
-    makeTextIcon(textStyle: TextStyle): IconType;
+    makeTextIcon(textStyle: TextRenderingStyle): IconType;
     makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;

package/dist/mjs/src/toolbar/localization.mjs

@@ -24,7 +24,7 @@ export const defaultToolbarLocalization = {
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
-    documentProperties: 'Document',
+    documentProperties: 'Page',
     backgroundColor: 'Background Color: ',
     imageWidthOption: 'Width: ',
     imageHeightOption: 'Height: ',

package/dist/mjs/src/toolbar/widgets/BaseWidget.mjs

@@ -122,7 +122,7 @@ export default class BaseWidget {
     }
     // Add a listener that is triggered when a key is pressed.
     // Listeners will fire regardless of whether this widget is selected and require that
-    // {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+    // {@link Editor.toolController} to have an enabled {@link ToolbarShortcutHandler} tool.
     onKeyPress(_event) {
         return false;
     }

package/dist/mjs/src/tools/SoundUITool.d.ts

@@ -0,0 +1,24 @@
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, plays a sound representing the color of the portion of the display
+ * currently under the cursor. This tool adds a button that can be navigated to with the tab key
+ * that enables/disables the tool.
+ *
+ * This allows the user to explore the content of the display without a working screen.
+ */
+export default class SoundUITool extends BaseTool {
+    private editor;
+    private soundFeedback;
+    private toggleButton;
+    private toggleButtonContainer;
+    constructor(editor: Editor, description: string);
+    private updateToggleButtonText;
+    setEnabled(enabled: boolean): void;
+    private lastPointerPos;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
+}