js-draw 0.17.4 → 0.18.0

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

@@ -0,0 +1,35 @@
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
+import Viewport from '../../Viewport';
+import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
+export default class DummyRenderer extends AbstractRenderer {
+    clearedCount: number;
+    renderedPathCount: number;
+    lastFillStyle: RenderingStyle | null;
+    lastPoint: Point2 | null;
+    objectNestingLevel: number;
+    lastText: string | null;
+    lastImage: RenderableImage | null;
+    pointBuffer: Point2[];
+    constructor(viewport: Viewport);
+    displaySize(): Vec2;
+    clear(): void;
+    protected beginPath(startPoint: Vec3): void;
+    protected endPath(style: RenderingStyle): void;
+    protected lineTo(point: Vec3): void;
+    protected moveTo(point: Point2): void;
+    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;
+    drawImage(image: RenderableImage): void;
+    startObject(boundingBox: Rect2, _clip: boolean): void;
+    endObject(): void;
+    isTooSmallToRender(_rect: Rect2): boolean;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
+}

package/dist/{src/rendering/renderers/DummyRenderer.js → mjs/src/rendering/renderers/DummyRenderer.mjs}

@@ -1,5 +1,5 @@
-import { Vec2 } from '../../math/Vec2';
-import AbstractRenderer from './AbstractRenderer';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  AbstractRenderer  from './AbstractRenderer.mjs';
 // Renderer that outputs almost nothing. Useful for automated tests.
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {

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

@@ -0,0 +1,57 @@
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Viewport from '../../Viewport';
+import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+export declare const renderedStylesheetId = "js-draw-style-sheet";
+/**
+ * Renders onto an `SVGElement`.
+ *
+ * @see {@link Editor.toSVG}
+ */
+export default class SVGRenderer extends AbstractRenderer {
+    private elem;
+    private sanitize;
+    private lastPathStyle;
+    private lastPathString;
+    private objectElems;
+    private overwrittenAttrs;
+    /**
+     * Creates a renderer that renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+     *
+     * `viewport` is used to determine the translation/rotation/scaling/output size of the rendered
+     * data.
+     */
+    constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
+    private addStyleSheet;
+    setRootSVGAttribute(name: string, value: string | null): void;
+    displaySize(): Vec2;
+    clear(): void;
+    private addPathToSVG;
+    drawPath(pathSpec: RenderablePathSpec): void;
+    private transformFrom;
+    private textContainer;
+    private textContainerTransform;
+    private textParentStyle;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
+    startObject(boundingBox: Rect2): void;
+    endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;
+    private unimplementedMessage;
+    protected beginPath(_startPoint: Point2): void;
+    protected endPath(_style: RenderingStyle): void;
+    protected lineTo(_point: Point2): void;
+    protected moveTo(_point: Point2): void;
+    protected traceCubicBezierCurve(_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2): void;
+    protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2): void;
+    drawPoints(...points: Point2[]): void;
+    drawSVGElem(elem: SVGElement): void;
+    isTooSmallToRender(_rect: Rect2): boolean;
+    static fromViewport(viewport: Viewport, sanitize?: boolean): {
+        element: SVGSVGElement;
+        renderer: SVGRenderer;
+    };
+}

package/dist/{src/rendering/renderers/SVGRenderer.js → mjs/src/rendering/renderers/SVGRenderer.mjs}

@@ -1,9 +1,9 @@
-import Mat33 from '../../math/Mat33';
-import Path from '../../math/Path';
-import { toRoundedString } from '../../math/rounding';
-import { Vec2 } from '../../math/Vec2';
-import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
-import AbstractRenderer from './AbstractRenderer';
+import  Mat33  from '../../math/Mat33.mjs';
+import  Path  from '../../math/Path.mjs';
+import  { toRoundedString }  from '../../math/rounding.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  { svgAttributesDataKey, svgStyleAttributesDataKey }  from '../../SVGLoader.mjs';
+import  AbstractRenderer  from './AbstractRenderer.mjs';
 export const renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 /**

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

@@ -0,0 +1,29 @@
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import Vec3 from '../../math/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
+export default class TextOnlyRenderer extends AbstractRenderer {
+    private localizationTable;
+    private descriptionBuilder;
+    private pathCount;
+    private textNodeCount;
+    private imageNodeCount;
+    constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
+    displaySize(): Vec3;
+    clear(): void;
+    getDescription(): string;
+    protected beginPath(_startPoint: Vec3): void;
+    protected endPath(_style: RenderingStyle): void;
+    protected lineTo(_point: Vec3): void;
+    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;
+    drawImage(image: RenderableImage): void;
+    isTooSmallToRender(rect: Rect2): boolean;
+    drawPoints(..._points: Vec3[]): void;
+}

package/dist/{src/rendering/renderers/TextOnlyRenderer.js → mjs/src/rendering/renderers/TextOnlyRenderer.mjs}

@@ -1,5 +1,5 @@
-import { Vec2 } from '../../math/Vec2';
-import AbstractRenderer from './AbstractRenderer';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  AbstractRenderer  from './AbstractRenderer.mjs';
 // Outputs a description of what was rendered.
 export default class TextOnlyRenderer extends AbstractRenderer {
     constructor(viewport, localizationTable) {

package/dist/mjs/src/testing/beforeEachFile.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{src/testing/beforeEachFile.js → mjs/src/testing/beforeEachFile.mjs}

@@ -1,4 +1,4 @@
-import loadExpectExtensions from './loadExpectExtensions';
+import  loadExpectExtensions  from './loadExpectExtensions.mjs';
 loadExpectExtensions();
 jest.useFakeTimers();
 // jsdom doesn't support HTMLCanvasElement#getContext — it logs an error

package/dist/mjs/src/testing/createEditor.d.ts

@@ -0,0 +1,4 @@
+import Editor from '../Editor';
+/** Creates an editor. Should only be used in test files. */
+declare const _default: () => Editor;
+export default _default;

package/dist/{src/testing/createEditor.js → mjs/src/testing/createEditor.mjs}

@@ -1,5 +1,5 @@
-import { RenderingMode } from '../rendering/Display';
-import Editor from '../Editor';
+import  { RenderingMode }  from '../rendering/Display.mjs';
+import  Editor  from '../Editor.mjs';
 /** Creates an editor. Should only be used in test files. */
 export default () => {
     if (jest === undefined) {

package/dist/mjs/src/testing/lib.mjs

@@ -0,0 +1,2 @@
+export  { default as sendPenEvent }  from './sendPenEvent.mjs';
+export  { default as sendTouchEvent }  from './sendTouchEvent.mjs';

package/dist/mjs/src/testing/loadExpectExtensions.d.ts

@@ -0,0 +1,2 @@
+export declare const loadExpectExtensions: () => void;
+export default loadExpectExtensions;

package/dist/mjs/src/testing/sendPenEvent.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { Point2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+/**
+ * Dispatch a pen event to the currently selected tool.
+ * Intended for unit tests.
+ *
+ * @see {@link sendTouchEvent}
+ */
+declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => void;
+export default sendPenEvent;

package/dist/{src/testing/sendPenEvent.js → mjs/src/testing/sendPenEvent.mjs}

@@ -1,5 +1,5 @@
-import Pointer from '../Pointer';
-import { InputEvtType } from '../types';
+import  Pointer  from '../Pointer.mjs';
+import  { InputEvtType }  from '../types.mjs';
 /**
  * Dispatch a pen event to the currently selected tool.
  * Intended for unit tests.

package/dist/mjs/src/testing/sendTouchEvent.d.ts

@@ -0,0 +1,42 @@
+import Editor from '../Editor';
+import { Vec2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ *
+ * @see {@link sendPenEvent}
+ *
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ *
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ *
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ *
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ *
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
+declare const sendTouchEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
+export default sendTouchEvent;

package/dist/{src/testing/sendTouchEvent.js → mjs/src/testing/sendTouchEvent.mjs}

@@ -1,5 +1,5 @@
-import Pointer, { PointerDevice } from '../Pointer';
-import { InputEvtType } from '../types';
+import  Pointer, { PointerDevice }  from '../Pointer.mjs';
+import  { InputEvtType }  from '../types.mjs';
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
  *

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

@@ -0,0 +1,103 @@
+import Editor from '../Editor';
+import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
+import BaseWidget from './widgets/BaseWidget';
+export declare const toolbarCSSPrefix = "toolbar-";
+interface SpacerOptions {
+    grow: number;
+    minSize: string;
+    maxSize: string;
+}
+export default class HTMLToolbar {
+    private editor;
+    private localizationTable;
+    private container;
+    private resizeObserver;
+    private listeners;
+    private widgetOrderCounter;
+    private widgetsById;
+    private widgetList;
+    private overflowWidget;
+    private static colorisStarted;
+    private updateColoris;
+    /** @internal */
+    constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    setupColorPickers(): void;
+    private reLayoutQueued;
+    private queueReLayout;
+    private reLayout;
+    /**
+     * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+     * (i.e. its `addTo` method should not have been called).
+     *
+     * @example
+     * ```ts
+     * const toolbar = editor.addToolbar();
+     * const insertImageWidget = new InsertImageWidget(editor);
+     * toolbar.addWidget(insertImageWidget);
+     * ```
+     */
+    addWidget(widget: BaseWidget): void;
+    /**
+     * Adds a spacer.
+     *
+     * @example
+     * Adding a save button that moves to the very right edge of the toolbar
+     * while keeping the other buttons centered:
+     * ```ts
+     * const toolbar = editor.addToolbar(false);
+     *
+     * toolbar.addSpacer({ grow: 1 });
+     * toolbar.addDefaults();
+     * toolbar.addSpacer({ grow: 1 });
+     *
+     * toolbar.addActionButton({
+     * 	label: 'Save',
+     * 	icon: editor.icons.makeSaveIcon(),
+     * }, () => {
+     * 	  saveCallback();
+     * });
+     * ```
+     */
+    addSpacer(options?: Partial<SpacerOptions>): void;
+    serializeState(): string;
+    /**
+     * Deserialize toolbar widgets from the given state.
+     * Assumes that toolbar widgets are in the same order as when state was serialized.
+     */
+    deserializeState(state: string): void;
+    /**
+     * Adds an action button with `title` to this toolbar (or to the given `parent` element).
+     *
+     * @return The added button.
+     */
+    addActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    addUndoRedoButtons(): void;
+    addDefaultToolWidgets(): void;
+    addDefaultActionButtons(): void;
+    /**
+     * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
+     * that this widget is in the correct space (if shown).
+     *
+     * @example
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     * shows the overflow widget between the default tool widgets and the default action buttons,
+     * if shown.
+     */
+    addOverflowWidget(): void;
+    /**
+     * Adds both the default tool widgets and action buttons. Equivalent to
+     * ```ts
+     * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
+     * toolbar.addDefaultActionButtons();
+     * ```
+     */
+    addDefaults(): void;
+    remove(): void;
+}
+export {};

package/dist/{src/toolbar/HTMLToolbar.js → mjs/src/toolbar/HTMLToolbar.mjs}

@@ -1,21 +1,21 @@
-import { EditorEventType } from '../types';
+import  { EditorEventType }  from '../types.mjs';
 import { coloris, init as colorisInit } from '@melloware/coloris';
-import Color4 from '../Color4';
-import { defaultToolbarLocalization } from './localization';
-import SelectionTool from '../tools/SelectionTool/SelectionTool';
-import PanZoomTool from '../tools/PanZoom';
-import TextTool from '../tools/TextTool';
-import EraserTool from '../tools/Eraser';
-import PenTool from '../tools/Pen';
-import PenToolWidget from './widgets/PenToolWidget';
-import EraserWidget from './widgets/EraserToolWidget';
-import SelectionToolWidget from './widgets/SelectionToolWidget';
-import TextToolWidget from './widgets/TextToolWidget';
-import HandToolWidget from './widgets/HandToolWidget';
-import ActionButtonWidget from './widgets/ActionButtonWidget';
-import InsertImageWidget from './widgets/InsertImageWidget';
-import DocumentPropertiesWidget from './widgets/DocumentPropertiesWidget';
-import OverflowWidget from './widgets/OverflowWidget';
+import  Color4  from '../Color4.mjs';
+import  { defaultToolbarLocalization }  from './localization.mjs';
+import  SelectionTool  from '../tools/SelectionTool/SelectionTool.mjs';
+import  PanZoomTool  from '../tools/PanZoom.mjs';
+import  TextTool  from '../tools/TextTool.mjs';
+import  EraserTool  from '../tools/Eraser.mjs';
+import  PenTool  from '../tools/Pen.mjs';
+import  PenToolWidget  from './widgets/PenToolWidget.mjs';
+import  EraserWidget  from './widgets/EraserToolWidget.mjs';
+import  SelectionToolWidget  from './widgets/SelectionToolWidget.mjs';
+import  TextToolWidget  from './widgets/TextToolWidget.mjs';
+import  HandToolWidget  from './widgets/HandToolWidget.mjs';
+import  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
+import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
+import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
+import  OverflowWidget  from './widgets/OverflowWidget.mjs';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */

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

@@ -0,0 +1,62 @@
+import Color4 from '../Color4';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import TextStyle from '../rendering/TextRenderingStyle';
+import Pen from '../tools/Pen';
+export type IconType = HTMLImageElement | SVGElement;
+/**
+ * Provides icons that can be used in the toolbar, etc.
+ * Extend this class and override methods to customize icons.
+ *
+ * @example
+ * ```ts
+ * class CustomIconProvider extends jsdraw.IconProvider {
+ *     // Use '☺' instead of the default dropdown symbol.
+ *     public makeDropdownIcon() {
+ *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ *         icon.innerHTML = `
+ *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
+ *         `;
+ *         icon.setAttribute('viewBox', '0 0 100 100');
+ *         return icon;
+ *     }
+ * }
+ *
+ * const icons = new CustomIconProvider();
+ * const editor = new jsdraw.Editor(document.body, {
+ *     iconProvider: icons,
+ * });
+ *
+ * // Add a toolbar that uses these icons
+ * editor.addToolbar();
+ * ```
+ */
+export default class IconProvider {
+    makeUndoIcon(): IconType;
+    makeRedoIcon(mirror?: boolean): IconType;
+    makeDropdownIcon(): IconType;
+    makeEraserIcon(eraserSize?: number): IconType;
+    makeSelectionIcon(): IconType;
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
+    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconType;
+    makeHandToolIcon(): IconType;
+    makeTouchPanningIcon(): IconType;
+    makeAllDevicePanningIcon(): IconType;
+    makeZoomIcon(): IconType;
+    makeRotationLockIcon(): IconType;
+    makeInsertImageIcon(): IconType;
+    makeTextIcon(textStyle: TextStyle): IconType;
+    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
+    makePipetteIcon(color?: Color4): IconType;
+    makeFormatSelectionIcon(): IconType;
+    makeResizeViewportIcon(): IconType;
+    makeDuplicateSelectionIcon(): IconType;
+    makePasteIcon(): IconType;
+    makeDeleteSelectionIcon(): IconType;
+    makeSaveIcon(): IconType;
+    makeConfigureDocumentIcon(): IconType;
+    makeOverflowIcon(): IconType;
+}

package/dist/{src/toolbar/IconProvider.js → mjs/src/toolbar/IconProvider.mjs}

@@ -1,7 +1,7 @@
-import Color4 from '../Color4';
-import { Vec2 } from '../math/Vec2';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import Viewport from '../Viewport';
+import  Color4  from '../Color4.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
+import  Viewport  from '../Viewport.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
 	style='fill: var(--icon-color);'

package/dist/mjs/src/toolbar/lib.mjs

@@ -0,0 +1,3 @@
+export  *  from './widgets/lib.mjs';
+export  *  from './makeColorInput.mjs';
+export  { default as IconProvider }  from './IconProvider.mjs';

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

@@ -0,0 +1,49 @@
+export interface ToolbarLocalization {
+    fontLabel: string;
+    textSize: string;
+    touchPanning: string;
+    lockRotation: string;
+    outlinedRectanglePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    image: string;
+    inputAltText: string;
+    chooseFile: string;
+    cancel: string;
+    submit: string;
+    freehandPen: string;
+    pressureSensitiveFreehandPen: string;
+    selectObjectType: string;
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    handTool: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    deleteSelection: string;
+    duplicateSelection: string;
+    pickColorFromScreen: string;
+    clickToPickColorAnnouncement: string;
+    reformatSelection: string;
+    undo: string;
+    redo: string;
+    zoom: string;
+    resetView: string;
+    selectionToolKeyboardShortcuts: string;
+    paste: string;
+    documentProperties: string;
+    backgroundColor: string;
+    imageWidthOption: string;
+    imageHeightOption: string;
+    toggleOverflow: string;
+    errorImageHasZeroSize: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+    zoomLevel: (zoomPercentage: number) => string;
+    colorChangedAnnouncement: (color: string) => string;
+    imageSize: (size: number, units: string) => string;
+    imageLoadError: (message: string) => string;
+}
+export declare const defaultToolbarLocalization: ToolbarLocalization;

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

@@ -0,0 +1,6 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+type OnColorChangeListener = (color: Color4) => void;
+type SetColorCallback = (color: Color4 | string) => void;
+export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
+export default makeColorInput;

package/dist/{src/toolbar/makeColorInput.js → mjs/src/toolbar/makeColorInput.mjs}

@@ -1,6 +1,6 @@
-import Color4 from '../Color4';
-import PipetteTool from '../tools/PipetteTool';
-import { EditorEventType } from '../types';
+import  Color4  from '../Color4.mjs';
+import  PipetteTool  from '../tools/PipetteTool.mjs';
+import  { EditorEventType }  from '../types.mjs';
 // Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
     const colorInputContainer = document.createElement('span');

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

@@ -0,0 +1,4 @@
+export interface ActionButtonIcon {
+    icon: Element;
+    label: string;
+}

package/dist/mjs/src/toolbar/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/mjs/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -0,0 +1,15 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    protected makeIcon: () => Element | null;
+    protected title: string;
+    protected clickAction: () => void;
+    protected mustBeToplevel: boolean;
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean);
+    protected handleClick(): void;
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected fillDropdown(_dropdown: HTMLElement): boolean;
+    canBeInOverflowMenu(): boolean;
+}

package/dist/{src/toolbar/widgets/ActionButtonWidget.js → mjs/src/toolbar/widgets/ActionButtonWidget.mjs}

@@ -1,4 +1,4 @@
-import BaseWidget from './BaseWidget';
+import  BaseWidget  from './BaseWidget.mjs';
 export default class ActionButtonWidget extends BaseWidget {
     constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
         super(editor, id, localizationTable);

package/dist/mjs/src/toolbar/widgets/BaseToolWidget.d.ts

@@ -0,0 +1,11 @@
+import Editor from '../../Editor';
+import BaseTool from '../../tools/BaseTool';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default abstract class BaseToolWidget extends BaseWidget {
+    protected editor: Editor;
+    protected targetTool: BaseTool;
+    constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
+    protected handleClick(): void;
+    addTo(parent: HTMLElement): HTMLElement;
+}

package/dist/{src/toolbar/widgets/BaseToolWidget.js → mjs/src/toolbar/widgets/BaseToolWidget.mjs}

@@ -1,5 +1,5 @@
-import { EditorEventType } from '../../types';
-import BaseWidget from './BaseWidget';
+import  { EditorEventType }  from '../../types.mjs';
+import  BaseWidget  from './BaseWidget.mjs';
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);