kritzel-stencil 0.0.131 → 0.0.132

package/dist/types/classes/tools/eraser-tool.class.d.ts

@@ -1,8 +1,8 @@
-import { KritzelStore } from '../store.class';
 import { KritzelBaseTool } from './base-tool.class';
+import { KritzelCore } from '../core/core.class';
 export declare class KritzelEraserTool extends KritzelBaseTool {
     touchStartTimeout: any;
-    constructor(store: KritzelStore);
+    constructor(core: KritzelCore);
     handlePointerDown(event: PointerEvent): void;
     handlePointerMove(event: PointerEvent): void;
     handlePointerUp(event: PointerEvent): void;

package/dist/types/classes/tools/image-tool.class.d.ts

@@ -1,9 +1,9 @@
-import { KritzelStore } from '../store.class';
 import { KritzelBaseTool } from './base-tool.class';
+import { KritzelCore } from '../core/core.class';
 export declare class KritzelImageTool extends KritzelBaseTool {
     fileInput: HTMLInputElement | null;
     maxCompressionSize: number;
-    constructor(store: KritzelStore);
+    constructor(core: KritzelCore);
     onActivate(): void;
     private openFilePicker;
     private setupFileInput;

package/dist/types/classes/tools/selection-tool.class.d.ts

@@ -1,17 +1,17 @@
-import { KritzelStore } from '../store.class';
 import { KritzelMoveHandler } from '../handlers/move.handler';
 import { KritzelResizeHandler } from '../handlers/resize.handler';
 import { KritzelRotationHandler } from '../handlers/rotation.handler';
 import { KritzelSelectionHandler } from '../handlers/selection.handler';
 import { KritzelBaseTool } from './base-tool.class';
 import { KritzelHoverHandler } from '../handlers/hover.handler';
+import { KritzelCore } from '../core/core.class';
 export declare class KritzelSelectionTool extends KritzelBaseTool {
     selectionHandler: KritzelSelectionHandler;
     moveHandler: KritzelMoveHandler;
     hoverHandler: KritzelHoverHandler;
     resizeHandler: KritzelResizeHandler;
     rotationHandler: KritzelRotationHandler;
-    constructor(store: KritzelStore);
+    constructor(core: KritzelCore);
     handlePointerDown(event: PointerEvent): void;
     handlePointerMove(event: PointerEvent): void;
     handlePointerUp(event: PointerEvent): void;

package/dist/types/classes/tools/text-tool.class.d.ts

@@ -1,11 +1,11 @@
-import { KritzelStore } from '../store.class';
 import { KritzelBaseTool } from './base-tool.class';
+import { KritzelCore } from '../core/core.class';
 export declare class KritzelTextTool extends KritzelBaseTool {
     fontFamily: string;
     fontSize: number;
     fontColor: string;
     palette: string[];
-    constructor(store: KritzelStore);
+    constructor(core: KritzelCore);
     handlePointerDown(event: PointerEvent): void;
     handlePointerUp(event: PointerEvent): void;
 }

package/dist/types/components/core/kritzel-cursor-trail/kritzel-cursor-trail.d.ts

@@ -1,19 +1,19 @@
-import { KritzelStore } from '../../../classes/store.class';
+import { KritzelCore } from '../../../classes/core/core.class';
 export declare class KritzelCursorTrail {
-    store: KritzelStore;
+    core: KritzelCore;
     cursorTrailPoints: Array<{
         x: number;
         y: number;
         timestamp: number;
     }>;
     isLeftButtonDown: boolean;
+    handleMouseDown(ev: PointerEvent): void;
+    handlePointerMove(ev: PointerEvent): void;
+    handlePointerUp(ev: PointerEvent): void;
     private trailCleanupIntervalId;
     private readonly TRAIL_DURATION_MS;
     private readonly MAX_TRAIL_POINTS;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    handleMouseDown(ev: PointerEvent): void;
-    handlePointerMove(ev: PointerEvent): void;
-    handlePointerUp(ev: PointerEvent): void;
     render(): any;
 }

package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts

@@ -3,8 +3,9 @@ import { KritzelToolbarControl } from '../../../interfaces/toolbar-control.inter
 import { KritzelBaseObject } from '../../../classes/objects/base-object.class';
 import { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';
 import { KritzelEngineState } from '../../../interfaces/engine-state.interface';
-import { KritzelWorkspace } from '../../../classes/workspace.class';
+import { KritzelWorkspace } from '../../../classes/core/workspace.class';
 export declare class KritzelEditor {
+    host: HTMLElement;
     scaleMax: number;
     scaleMin: number;
     controls: KritzelToolbarControl[];
@@ -14,7 +15,6 @@ export declare class KritzelEditor {
     isControlsVisible: boolean;
     isUtilityPanelVisible: boolean;
     isReady: EventEmitter<HTMLElement>;
-    host: HTMLElement;
     isEngineReady: boolean;
     isControlsReady: boolean;
     isWorkspaceManagerReady: boolean;
@@ -23,6 +23,7 @@ export declare class KritzelEditor {
     isVirtualKeyboardOpen: boolean;
     onIsEngineReady(newValue: boolean): void;
     onIsControlsReady(newValue: boolean): void;
+    handleTouchStart(event: MouseEvent): void;
     getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null>;
     addObject<T extends KritzelBaseObject>(object: T): Promise<T | null>;
     updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null>;
@@ -32,7 +33,15 @@ export declare class KritzelEditor {
     selectAllObjectsInViewport(): Promise<void>;
     clearSelection(): Promise<void>;
     centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
-    handleTouchStart(event: MouseEvent): void;
+    createWorkspace(name: string, viewport?: {
+        translateX: number;
+        translateY: number;
+        scale: number;
+    }): Promise<KritzelWorkspace | null>;
+    updateWorkspace(workspace: KritzelWorkspace): Promise<void>;
+    deleteWorkspace(workspace: KritzelWorkspace): Promise<void>;
+    getWorkspaces(): Promise<KritzelWorkspace[]>;
+    getActiveWorkspace(): Promise<KritzelWorkspace>;
     engineRef: HTMLKritzelEngineElement;
     controlsRef: HTMLKritzelControlsElement;
     splitButtonRef: HTMLKritzelSplitButtonElement;
@@ -41,5 +50,6 @@ export declare class KritzelEditor {
     onEngineReady(event: CustomEvent<KritzelEngineState>): void;
     private registerCustomSvgIcons;
     private listenForMobileKeyboard;
+    private setOsSpecificCssVariables;
     render(): any;
 }

package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts

@@ -1,54 +1,43 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { KritzelTool } from '../../../interfaces/tool.interface';
-import { KritzelViewport } from '../../../classes/viewport.class';
-import { KritzelStore } from '../../../classes/store.class';
+import { KritzelViewport } from '../../../classes/core/viewport.class';
 import { KritzelKeyHandler } from '../../../classes/handlers/key.handler';
 import { KritzelBaseTool } from '../../../classes/tools/base-tool.class';
 import { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';
 import { KritzelBrushToolConfig, KritzelTextToolConfig } from '../../../interfaces/toolbar-control.interface';
 import { KritzelContextMenuHandler } from '../../../classes/handlers/context-menu.handler';
 import { KritzelBaseObject } from '../../../classes/objects/base-object.class';
-import { KritzelWorkspace } from '../../../classes/workspace.class';
+import { KritzelWorkspace } from '../../../classes/core/workspace.class';
 import { KritzelEngineState } from '../../../interfaces/engine-state.interface';
+import { KritzelCore } from '../../../classes/core/core.class';
 export declare class KritzelEngine {
+    host: HTMLElement;
     workspace?: KritzelWorkspace;
+    onWorkspaceChange(newWorkspace: KritzelWorkspace | null): void;
     activeTool: KritzelTool;
     globalContextMenuItems: ContextMenuItem[];
     objectContextMenuItems: ContextMenuItem[];
     scaleMax: number;
+    validateScaleMax(newValue: number): void;
     scaleMin: number;
+    validateScaleMin(newValue: number): void;
     isEngineReady: EventEmitter<KritzelEngineState>;
     activeToolChange: EventEmitter<KritzelBaseTool>;
     workspacesChange: EventEmitter<KritzelWorkspace[]>;
-    host: HTMLElement;
+    longpress: EventEmitter<PointerEvent>;
     forceUpdate: number;
-    onWorkspaceChange(newWorkspace: KritzelWorkspace | null): void;
-    validateScaleMax(newValue: number): void;
-    validateScaleMin(newValue: number): void;
-    store: KritzelStore;
-    viewport: KritzelViewport;
-    contextMenuHandler: KritzelContextMenuHandler;
-    keyHandler: KritzelKeyHandler;
-    contextMenuElement: HTMLKritzelContextMenuElement | null;
-    get isSelecting(): boolean;
-    get isSelectionActive(): boolean;
-    constructor();
-    componentWillLoad(): void;
-    componentDidLoad(): Promise<void>;
     handleWheel(ev: any): void;
     handlePointerDown(ev: PointerEvent): void;
     handlePointerMove(ev: PointerEvent): void;
     handlePointerUp(ev: PointerEvent): void;
     handlePointerCancel(ev: PointerEvent): void;
+    handleLongPress(ev: CustomEvent<PointerEvent>): void;
     handleContextMenu(ev: PointerEvent): void;
     handleResize(): void;
     handleKeyDown(ev: any): void;
     handleKeyUp(ev: any): void;
-    updateFocus(ev: any): void;
-    handleClick(): void;
     registerTool(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig): Promise<KritzelBaseTool>;
     changeActiveTool(tool: KritzelBaseTool): Promise<void>;
-    setFocus(): Promise<void>;
     disable(): Promise<void>;
     enable(): Promise<void>;
     delete(): Promise<void>;
@@ -71,12 +60,22 @@ export declare class KritzelEngine {
     clearSelection(): Promise<void>;
     centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
     getCopiedObjects(): Promise<KritzelBaseObject[]>;
-    createWorkspace(workspace: KritzelWorkspace): Promise<void>;
+    createWorkspace(workspace: KritzelWorkspace): Promise<KritzelWorkspace | null>;
     updateWorkspace(workspace: KritzelWorkspace): Promise<void>;
     deleteWorkspace(workspace: KritzelWorkspace): Promise<void>;
     getWorkspaces(): Promise<KritzelWorkspace[]>;
+    getActiveWorkspace(): Promise<KritzelWorkspace>;
+    core: KritzelCore;
+    viewport: KritzelViewport;
+    contextMenuHandler: KritzelContextMenuHandler;
+    keyHandler: KritzelKeyHandler;
+    contextMenuElement: HTMLKritzelContextMenuElement | null;
+    get isSelecting(): boolean;
+    get isSelectionActive(): boolean;
+    constructor();
+    componentWillLoad(): void;
+    componentDidLoad(): Promise<void>;
     private _registerStateChangeListeners;
     private _handleActiveToolChange;
-    private _handleIsFocusedChange;
     render(): any;
 }

package/dist/types/components/shared/kritzel-dropdown/kritzel-dropdown.d.ts

@@ -6,7 +6,9 @@ export interface DropdownOption {
 }
 export declare class KritzelDropdown {
     options: DropdownOption[];
+    optionsChanged(): void;
     value: string;
+    externalValueChanged(newValue: string): void;
     width?: string;
     selectStyles?: any;
     internalValue: string;
@@ -16,8 +18,6 @@ export declare class KritzelDropdown {
     private suffixSlotElement?;
     private prefixSlotElement?;
     componentWillLoad(): void;
-    externalValueChanged(newValue: string): void;
-    optionsChanged(): void;
     private updateInternalValue;
     private handleSelectChange;
     private evaluateSuffixContent;

package/dist/types/components/shared/kritzel-menu-item/kritzel-menu-item.d.ts

@@ -12,8 +12,10 @@ export declare class KritzelMenuItem {
     itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
     isDirty: boolean;
     private inputRef;
+    private focusInput;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    private setDeviceSpecificStyles;
     private handleItemSelect;
     private handleInputChange;
     private handleSave;

package/dist/types/components/shared/kritzel-portal/kritzel-portal.d.ts

@@ -17,7 +17,6 @@ export declare class KritzelPortal {
     private focusFirstElement;
     private getDeepActiveElement;
     private trapFocus;
-    private getFocusableElements;
     private get firstFocusableElement();
     private get lastAddedPortal();
     private calculateLeft;

package/dist/types/components/shared/kritzel-split-button/kritzel-split-button.d.ts

@@ -7,19 +7,21 @@ export declare class KritzelSplitButton {
     items: IKritzelMenuItem[];
     mainButtonDisabled: boolean;
     menuButtonDisabled: boolean;
-    buttonClick: EventEmitter<void>;
+    mainButtonClick: EventEmitter<void>;
     itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;
     itemSave: EventEmitter<IKritzelMenuItem>;
     itemCancel: EventEmitter<IKritzelMenuItem>;
     itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;
     itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
-    close: EventEmitter<void>;
+    menuOpen: EventEmitter<void>;
+    menuClose: EventEmitter<void>;
     isMenuOpen: boolean;
     isTouchDevice: boolean;
     anchorElement: HTMLElement;
     splitMenuButtonRef: HTMLButtonElement;
     menuRef: HTMLKritzelMenuElement;
     open(): Promise<void>;
+    focusMenu(): Promise<void>;
     private handleButtonClick;
     private toggleMenu;
     private openMenu;

package/dist/types/components/shared/kritzel-tooltip/kritzel-tooltip.d.ts

@@ -1,15 +1,21 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class KritzelTooltip {
+    host: HTMLElement;
     isVisible: boolean;
     anchorElement: HTMLElement;
     arrowSize: number;
     offsetY: number;
-    el: HTMLElement;
+    tooltipClosed: EventEmitter<void>;
     positionX: number;
     arrowOffset: string;
-    private isMobileView;
+    isMobileView: boolean;
+    handleOutsideClick(event: MouseEvent): void;
     handleWindowResize(): void;
+    focusContent(): Promise<void>;
+    componentDidLoad(): void;
     componentWillLoad(): void;
     componentWillUpdate(): void;
+    private focusSlottedContent;
     private calculateAdjustedPosition;
     render(): any;
 }

package/dist/types/components/ui/kritzel-context-menu/kritzel-context-menu.d.ts

@@ -2,15 +2,17 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';
 import { KritzelBaseObject } from '../../../classes/objects/base-object.class';
 export declare class KritzelContextMenu {
+    host: HTMLElement;
     items: ContextMenuItem[];
+    onItemsChanged(): void;
     objects: KritzelBaseObject[];
     actionSelected: EventEmitter<ContextMenuItem>;
-    hostElement: HTMLElement;
+    close: EventEmitter<void>;
     private processedItems;
+    handleOutsideClick(event: MouseEvent): void;
     componentWillLoad(): void;
-    onItemsChanged(): void;
     private handleItemClick;
-    private evaluateProperty;
     private updateMenuItems;
+    private evaluateProperty;
     render(): any;
 }

package/dist/types/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.d.ts

@@ -2,10 +2,10 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';
 export declare class KritzelControlBrushConfig {
     tool: KritzelBrushTool;
+    handleToolChange(newTool: KritzelBrushTool): void;
     isExpanded: boolean;
     toolChange: EventEmitter<KritzelBrushTool>;
     palette: string[];
-    handleToolChange(newTool: KritzelBrushTool): void;
     componentWillLoad(): void;
     handleToggleExpand(): void;
     handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>): void;

package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts

@@ -4,6 +4,7 @@ import { KritzelTextTool } from '../../../classes/tools/text-tool.class';
 import { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';
 type ToolConfig = Record<string, any>;
 export declare class KritzelControls {
+    host: HTMLElement;
     controls: KritzelToolbarControl[];
     activeControl: KritzelToolbarControl | null;
     isUtilityPanelVisible: boolean;
@@ -11,12 +12,12 @@ export declare class KritzelControls {
     firstConfig: ToolConfig | null;
     isTooltipVisible: boolean;
     isTouchDevice: boolean;
-    host: HTMLElement;
     handleDocumentClick(event: MouseEvent): void;
     handleKeyDown(event: any): void;
     handleActiveToolChange(event: CustomEvent): Promise<void>;
     closeTooltip(): Promise<void>;
     kritzelEngine: HTMLKritzelEngineElement | null;
+    tooltipRef: HTMLKritzelTooltipElement | null;
     get activeToolAsTextTool(): KritzelTextTool;
     get activeToolAsBrushTool(): KritzelBrushTool;
     componentWillLoad(): Promise<void>;
@@ -25,6 +26,7 @@ export declare class KritzelControls {
     private handleControlClick;
     private handleConfigClick;
     private handleToolChange;
+    private handleTooltipClosed;
     render(): any;
 }
 export {};

package/dist/types/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.d.ts

@@ -1,4 +1,4 @@
-import { KritzelWorkspace } from '../../../classes/workspace.class';
+import { KritzelWorkspace } from '../../../classes/core/workspace.class';
 import { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class KritzelWorkspaceManager {
@@ -24,6 +24,7 @@ export declare class KritzelWorkspaceManager {
     private delete;
     private toggleChildMenu;
     private closeChildMenu;
-    private closeMenu;
+    private handleMenuOpen;
+    private handleMenuClose;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -11,9 +11,9 @@ import { KritzelBaseObject } from "./classes/objects/base-object.class";
 import { KritzelBrushTool } from "./classes/tools/brush-tool.class";
 import { KritzelTextTool } from "./classes/tools/text-tool.class";
 import { KritzelBrushToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
-import { KritzelStore } from "./classes/store.class";
+import { KritzelCore } from "./classes/core/core.class";
 import { DropdownOption } from "./components/shared/kritzel-dropdown/kritzel-dropdown";
-import { KritzelWorkspace } from "./classes/workspace.class";
+import { KritzelWorkspace } from "./classes/core/workspace.class";
 import { KritzelTool } from "./interfaces/tool.interface";
 import { KritzelEngineState } from "./interfaces/engine-state.interface";
 import { KritzelBaseTool } from "./classes/tools/base-tool.class";
@@ -25,9 +25,9 @@ export { KritzelBaseObject } from "./classes/objects/base-object.class";
 export { KritzelBrushTool } from "./classes/tools/brush-tool.class";
 export { KritzelTextTool } from "./classes/tools/text-tool.class";
 export { KritzelBrushToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
-export { KritzelStore } from "./classes/store.class";
+export { KritzelCore } from "./classes/core/core.class";
 export { DropdownOption } from "./components/shared/kritzel-dropdown/kritzel-dropdown";
-export { KritzelWorkspace } from "./classes/workspace.class";
+export { KritzelWorkspace } from "./classes/core/workspace.class";
 export { KritzelTool } from "./interfaces/tool.interface";
 export { KritzelEngineState } from "./interfaces/engine-state.interface";
 export { KritzelBaseTool } from "./classes/tools/base-tool.class";
@@ -103,7 +103,7 @@ export namespace Components {
         "isUtilityPanelVisible": boolean;
     }
     interface KritzelCursorTrail {
-        "store": KritzelStore;
+        "core": KritzelCore;
     }
     interface KritzelDropdown {
         /**
@@ -125,12 +125,16 @@ export namespace Components {
           * @default [     {       name: 'selection',       type: 'tool',       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       isDefault: true,       config: DEFAULT_BRUSH_CONFIG,     },     {       name: 'eraser',       type: 'tool',       tool: KritzelEraserTool,       icon: 'eraser',     },     {       name: 'text',       type: 'tool',       tool: KritzelTextTool,       icon: 'type',       config: DEFAULT_TEXT_CONFIG,     },     {       name: 'image',       type: 'tool',       tool: KritzelImageTool,       icon: 'image',     },     {       name: 'divider',       type: 'divider',     },     {       name: 'config',       type: 'config',     },   ]
          */
         "controls": KritzelToolbarControl[];
+        "createWorkspace": (name: string, viewport?: { translateX: number; translateY: number; scale: number; }) => Promise<KritzelWorkspace | null>;
         /**
           * @default {}
          */
         "customSvgIcons": Record<string, string>;
+        "deleteWorkspace": (workspace: KritzelWorkspace) => Promise<void>;
+        "getActiveWorkspace": () => Promise<KritzelWorkspace>;
         "getObjectById": <T extends KritzelBaseObject>(id: string) => Promise<T | null>;
         "getSelectedObjects": () => Promise<KritzelBaseObject[]>;
+        "getWorkspaces": () => Promise<KritzelWorkspace[]>;
         /**
           * @default [     {       label: 'Paste',       icon: 'paste',       disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,       action: menu => this.engineRef.paste(menu.x, menu.y),     },     { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },   ]
          */
@@ -159,6 +163,7 @@ export namespace Components {
         "selectAllObjectsInViewport": () => Promise<void>;
         "selectObjects": (objects: KritzelBaseObject[]) => Promise<void>;
         "updateObject": <T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>;
+        "updateWorkspace": (workspace: KritzelWorkspace) => Promise<void>;
     }
     interface KritzelEngine {
         "activeTool": KritzelTool;
@@ -169,11 +174,12 @@ export namespace Components {
         "changeActiveTool": (tool: KritzelBaseTool) => Promise<void>;
         "clearSelection": () => Promise<void>;
         "copy": () => Promise<void>;
-        "createWorkspace": (workspace: KritzelWorkspace) => Promise<void>;
+        "createWorkspace": (workspace: KritzelWorkspace) => Promise<KritzelWorkspace | null>;
         "delete": () => Promise<void>;
         "deleteWorkspace": (workspace: KritzelWorkspace) => Promise<void>;
         "disable": () => Promise<void>;
         "enable": () => Promise<void>;
+        "getActiveWorkspace": () => Promise<KritzelWorkspace>;
         "getCopiedObjects": () => Promise<KritzelBaseObject[]>;
         "getObjectById": <T extends KritzelBaseObject>(id: string) => Promise<T | null>;
         "getSelectedObjects": () => Promise<KritzelBaseObject<any>[]>;
@@ -197,7 +203,6 @@ export namespace Components {
         "selectObjects": (objects: KritzelBaseObject[]) => Promise<void>;
         "sendBackward": (object?: KritzelBaseObject<any>) => Promise<void>;
         "sendToBack": (object?: KritzelBaseObject<any>) => Promise<void>;
-        "setFocus": () => Promise<void>;
         "undo": () => Promise<void>;
         "updateObject": <T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>;
         "updateWorkspace": (workspace: KritzelWorkspace) => Promise<void>;
@@ -279,6 +284,7 @@ export namespace Components {
           * @default 'chevron-down'
          */
         "dropdownIcon": string;
+        "focusMenu": () => Promise<void>;
         /**
           * @default []
          */
@@ -309,6 +315,7 @@ export namespace Components {
           * @default 8
          */
         "arrowSize": number;
+        "focusContent": () => Promise<void>;
         /**
           * @default false
          */
@@ -392,6 +399,10 @@ export interface KritzelStrokeSizeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKritzelStrokeSizeElement;
 }
+export interface KritzelTooltipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKritzelTooltipElement;
+}
 export interface KritzelUtilityPanelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKritzelUtilityPanelElement;
@@ -443,6 +454,7 @@ declare global {
     };
     interface HTMLKritzelContextMenuElementEventMap {
         "actionSelected": ContextMenuItem;
+        "close": void;
     }
     interface HTMLKritzelContextMenuElement extends Components.KritzelContextMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKritzelContextMenuElementEventMap>(type: K, listener: (this: HTMLKritzelContextMenuElement, ev: KritzelContextMenuCustomEvent<HTMLKritzelContextMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -553,6 +565,7 @@ declare global {
         "isEngineReady": KritzelEngineState;
         "activeToolChange": KritzelBaseTool;
         "workspacesChange": KritzelWorkspace[];
+        "longpress": PointerEvent;
     }
     interface HTMLKritzelEngineElement extends Components.KritzelEngine, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKritzelEngineElementEventMap>(type: K, listener: (this: HTMLKritzelEngineElement, ev: KritzelEngineCustomEvent<HTMLKritzelEngineElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -675,13 +688,14 @@ declare global {
         new (): HTMLKritzelPortalElement;
     };
     interface HTMLKritzelSplitButtonElementEventMap {
-        "buttonClick": void;
+        "mainButtonClick": void;
         "itemSelect": IKritzelMenuItemSelectEvent;
         "itemSave": IKritzelMenuItem;
         "itemCancel": IKritzelMenuItem;
         "itemToggleChildMenu": IKritzelMenuItemToggleChildMenuEvent;
         "itemCloseChildMenu": IKritzelMenuItem;
-        "close": void;
+        "menuOpen": void;
+        "menuClose": void;
     }
     interface HTMLKritzelSplitButtonElement extends Components.KritzelSplitButton, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKritzelSplitButtonElementEventMap>(type: K, listener: (this: HTMLKritzelSplitButtonElement, ev: KritzelSplitButtonCustomEvent<HTMLKritzelSplitButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -714,7 +728,18 @@ declare global {
         prototype: HTMLKritzelStrokeSizeElement;
         new (): HTMLKritzelStrokeSizeElement;
     };
+    interface HTMLKritzelTooltipElementEventMap {
+        "tooltipClosed": void;
+    }
     interface HTMLKritzelTooltipElement extends Components.KritzelTooltip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLKritzelTooltipElementEventMap>(type: K, listener: (this: HTMLKritzelTooltipElement, ev: KritzelTooltipCustomEvent<HTMLKritzelTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLKritzelTooltipElementEventMap>(type: K, listener: (this: HTMLKritzelTooltipElement, ev: KritzelTooltipCustomEvent<HTMLKritzelTooltipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLKritzelTooltipElement: {
         prototype: HTMLKritzelTooltipElement;
@@ -825,6 +850,7 @@ declare namespace LocalJSX {
         "items"?: ContextMenuItem[];
         "objects"?: KritzelBaseObject[];
         "onActionSelected"?: (event: KritzelContextMenuCustomEvent<ContextMenuItem>) => void;
+        "onClose"?: (event: KritzelContextMenuCustomEvent<void>) => void;
     }
     interface KritzelControlBrushConfig {
         /**
@@ -858,7 +884,7 @@ declare namespace LocalJSX {
         "onIsControlsReady"?: (event: KritzelControlsCustomEvent<void>) => void;
     }
     interface KritzelCursorTrail {
-        "store"?: KritzelStore;
+        "core"?: KritzelCore;
     }
     interface KritzelDropdown {
         "onValueChanged"?: (event: KritzelDropdownCustomEvent<string>) => void;
@@ -914,6 +940,7 @@ declare namespace LocalJSX {
         "objectContextMenuItems"?: ContextMenuItem[];
         "onActiveToolChange"?: (event: KritzelEngineCustomEvent<KritzelBaseTool>) => void;
         "onIsEngineReady"?: (event: KritzelEngineCustomEvent<KritzelEngineState>) => void;
+        "onLongpress"?: (event: KritzelEngineCustomEvent<PointerEvent>) => void;
         "onWorkspacesChange"?: (event: KritzelEngineCustomEvent<KritzelWorkspace[]>) => void;
         /**
           * @default ABSOLUTE_SCALE_MAX
@@ -1026,13 +1053,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "menuButtonDisabled"?: boolean;
-        "onButtonClick"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
-        "onClose"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
         "onItemCancel"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItem>) => void;
         "onItemCloseChildMenu"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItem>) => void;
         "onItemSave"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItem>) => void;
         "onItemSelect"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItemSelectEvent>) => void;
         "onItemToggleChildMenu"?: (event: KritzelSplitButtonCustomEvent<IKritzelMenuItemToggleChildMenuEvent>) => void;
+        "onMainButtonClick"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
+        "onMenuClose"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
+        "onMenuOpen"?: (event: KritzelSplitButtonCustomEvent<void>) => void;
     }
     interface KritzelStrokeSize {
         "onSizeChange"?: (event: KritzelStrokeSizeCustomEvent<number>) => void;
@@ -1059,6 +1087,7 @@ declare namespace LocalJSX {
           * @default 24
          */
         "offsetY"?: number;
+        "onTooltipClosed"?: (event: KritzelTooltipCustomEvent<void>) => void;
     }
     interface KritzelUtilityPanel {
         "onDelete"?: (event: KritzelUtilityPanelCustomEvent<void>) => void;

package/dist/types/helpers/devices.helper.d.ts

@@ -1,3 +1,7 @@
 export declare class KritzelDevicesHelper {
     static isTouchDevice(): boolean;
+    static isAndroid(): boolean;
+    static isIOS(): boolean;
+    static detectOS(): 'iOS' | 'Android' | 'Other';
+    static isFirefox(): boolean;
 }

package/dist/types/helpers/event.helper.d.ts

@@ -3,5 +3,5 @@ export declare class KritzelEventHelper {
     static isLeftClick(ev: MouseEvent): boolean;
     static isMainMouseWheel(event: WheelEvent): boolean;
     static isPointerEventOnContextMenu(event: PointerEvent): boolean;
-    static onLongTouchPress(event: PointerEvent, onSuccess: (event: PointerEvent) => void, onCancel?: () => void): () => void;
+    static onLongPress(event: PointerEvent, onSuccess: (event: PointerEvent) => void, onCancel?: () => void): () => void;
 }

package/dist/types/helpers/html.helper.d.ts

@@ -2,4 +2,5 @@ export declare class KritzelHTMLHelper {
     static getNumericValueFromStyle(element: HTMLElement, property: string): number;
     static getScrollableParent(element: HTMLElement): HTMLElement | Window;
     static isElementInViewport(element: HTMLElement): boolean;
+    static getFocusableElements(root: HTMLElement): HTMLElement[];
 }

package/dist/types/index.d.ts

@@ -20,4 +20,4 @@ export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';
-export * from './classes/workspace.class';
+export * from './classes/core/workspace.class';