kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/themes/light-theme.js

@@ -0,0 +1,199 @@
+/**
+ * Light theme preset - the default theme
+ */
+export const lightTheme = {
+    name: 'light',
+    global: {
+        borderColor: '#ebebeb',
+        dividerColor: '#e0e0e0',
+        focusColor: '#333333',
+        focusRingColor: '#333333',
+        hoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
+        iconColor: 'currentColor',
+        scrollbarThumbColor: '#ebebeb',
+        textPrimary: '#000000',
+        textSecondary: '#333333',
+    },
+    selection: {
+        borderColor: '#007AFF',
+        handleColor: '#ffffff',
+    },
+    checkerboard: {
+        colorDark: '#cccccc',
+        colorLight: '#ffffff',
+    },
+    backToContent: {
+        activeBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        color: '#000000',
+        hoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+    },
+    colorPalette: {
+        circleBorderColor: '#dddcdc',
+        hoverBackgroundColor: '#ebebeb',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    contextMenu: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
+        itemActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        itemColor: '#333333',
+        itemDisabledColor: '#aaaaaa',
+        itemHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+    },
+    controls: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        controlActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        controlColor: '#000000',
+        controlHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        controlSelectedBackgroundColor: '#007AFF',
+        controlSelectedColor: '#ffffff',
+    },
+    dialog: {
+        backdropColor: 'rgba(0, 0, 0, 0.4)',
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 4px 24px rgba(0, 0, 0, 0.15)',
+        closeButtonActiveBackground: 'hsl(0, 0%, 0%, 8.6%)',
+        closeButtonBackground: 'transparent',
+        closeButtonColor: '#333333',
+        closeButtonHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
+        closeButtonHoverColor: '#000000',
+        fontFamily: 'inherit',
+        footerBorder: '1px solid #ebebeb',
+        headerBorder: '1px solid #ebebeb',
+        titleColor: '#000000',
+    },
+    dropdown: {
+        accentColor: '#007bff',
+        hoverBackgroundColor: '#f0f0f0',
+        selectedBackgroundColor: '#007bff1a',
+        textColor: '#333333',
+    },
+    engine: {
+        backgroundColor: '#ffffff',
+    },
+    fontSize: {
+        hoverBackgroundColor: '#ebebeb',
+        selectedBackgroundColor: '#ebebeb',
+        textColor: '#333333',
+    },
+    lineEndings: {
+        hoverBackgroundColor: '#ebebeb',
+        labelColor: '#666666',
+        optionBackground: '#ffffff',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    masterDetail: {
+        backButtonColor: '#333333',
+        backgroundColor: '#ffffff',
+        detailBackgroundColor: '#ffffff',
+        detailFocusOutline: '2px solid #333333',
+        menuBackgroundColor: '#ffffff',
+        menuBorderRight: '1px solid #ebebeb',
+        menuItemActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        menuItemBackgroundColor: 'transparent',
+        menuItemChevronColor: '#aaaaaa',
+        menuItemColor: '#333333',
+        menuItemDisabledColor: '#aaaaaa',
+        menuItemFocusOutline: '2px solid #333333',
+        menuItemHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        menuItemSelectedBackgroundColor: '#007AFF',
+        menuItemSelectedColor: '#ffffff',
+        menuItemSelectedHoverBackgroundColor: '#007AFF',
+    },
+    menu: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        itemButtonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        itemChildOpenBackgroundColor: 'hsl(0, 0%, 0%, 3%)',
+        itemColor: '#333333',
+        itemEditingBackgroundColor: '#f0f0f0',
+        itemInputBorder: '1px solid #333333',
+        itemInputBorderColorOnSelected: '#ffffff',
+        itemInputCaretColor: '#333333',
+        itemInputCaretColorOnSelected: '#ffffff',
+        itemInputSelectionColor: '#007aff',
+        itemInputSelectionColorOnSelected: 'rgba(255, 255, 255, 0.55)',
+        itemInputSelectionTextColor: '#ffffff',
+        itemInputSelectionTextColorOnSelected: '#ffffff',
+        itemOverlayBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        itemSelectedBackgroundColor: '#007aff',
+        itemSelectedColor: '#ffffff',
+    },
+    moreMenu: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        borderRadius: '12px',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        buttonActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
+        buttonColor: '#000000',
+        buttonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        innerBorderRadius: '12px',
+    },
+    numericInput: {
+        borderColor: '#ebebeb',
+        focusBorderColor: '#333333',
+        hoverBorderColor: '#ccc',
+        inputBackground: '#ffffff',
+        labelColor: '#666666',
+        spinnerActiveBackground: 'hsl(0, 0%, 0%, 8.6%)',
+        spinnerBackground: 'transparent',
+        spinnerColor: '#333333',
+        spinnerHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
+        textColor: '#333333',
+    },
+    opacitySlider: {
+        activeColor: '#007AFF',
+        thumbBorderColor: '#007AFF',
+        thumbColor: '#ffffff',
+        trackColor: '#e0e0e0',
+    },
+    settings: {
+        contentHeadingColor: '#000000',
+        contentTextColor: '#333333',
+        descriptionColor: '#666666',
+        labelColor: '#333333',
+    },
+    shapeFill: {
+        hoverBackgroundColor: '#ebebeb',
+        optionBackground: '#ffffff',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    slideToggle: {
+        thumbColor: '#fff',
+        thumbSize: '18px',
+        trackCheckedColor: '#007AFF',
+        trackColor: '#ccc',
+    },
+    splitButton: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
+        color: '#000000',
+        dividerBackgroundColor: '#ebebeb',
+        hoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+    },
+    strokeSize: {
+        hoverBackgroundColor: '#ebebeb',
+        selectedBackgroundColor: '#ebebeb',
+    },
+    tooltip: {
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
+        color: '#000000',
+    },
+    utilityPanel: {
+        backgroundColor: '#e2e2e2',
+        buttonColor: '#333333',
+        buttonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
+        separatorColor: 'hsl(0, 0%, 0%, 8%)',
+    },
+};

package/dist/kritzel-stencil/src/types/shortcut.type.js

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

package/dist/kritzel-stencil/src/types/state.types.js

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

package/dist/types/kritzel-react/lib/components/stencil-generated/components.d.ts

@@ -0,0 +1,74 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type IKritzelDialogCloseEvent, type IKritzelMasterDetailSelectEvent, type IKritzelMenuItem, type KritzelBackToContentCustomEvent, type KritzelBaseObject, type KritzelDialogCustomEvent, type KritzelEditorCustomEvent, type KritzelExportCustomEvent, type KritzelLineEndingsCustomEvent, type KritzelMasterDetailCustomEvent, type KritzelMoreMenuCustomEvent, type KritzelNumericInputCustomEvent, type KritzelOpacitySliderCustomEvent, type KritzelSettingsConfig, type KritzelSettingsCustomEvent, type KritzelShapeFillCustomEvent, type KritzelSlideToggleCustomEvent, type KritzelUndoState, type LineArrowConfig, type ShapeFillType, type ThemeName } from "../../../../kritzel-stencil";
+import { KritzelBackToContent as KritzelBackToContentElement } from "../../../../kritzel-stencil/dist/components/kritzel-back-to-content.js";
+import { KritzelDialog as KritzelDialogElement } from "../../../../kritzel-stencil/dist/components/kritzel-dialog.js";
+import { KritzelEditor as KritzelEditorElement } from "../../../../kritzel-stencil/dist/components/kritzel-editor.js";
+import { KritzelExport as KritzelExportElement } from "../../../../kritzel-stencil/dist/components/kritzel-export.js";
+import { KritzelLineEndings as KritzelLineEndingsElement } from "../../../../kritzel-stencil/dist/components/kritzel-line-endings.js";
+import { KritzelMasterDetail as KritzelMasterDetailElement } from "../../../../kritzel-stencil/dist/components/kritzel-master-detail.js";
+import { KritzelMoreMenu as KritzelMoreMenuElement } from "../../../../kritzel-stencil/dist/components/kritzel-more-menu.js";
+import { KritzelNumericInput as KritzelNumericInputElement } from "../../../../kritzel-stencil/dist/components/kritzel-numeric-input.js";
+import { KritzelOpacitySlider as KritzelOpacitySliderElement } from "../../../../kritzel-stencil/dist/components/kritzel-opacity-slider.js";
+import { KritzelSettings as KritzelSettingsElement } from "../../../../kritzel-stencil/dist/components/kritzel-settings.js";
+import { KritzelShapeFill as KritzelShapeFillElement } from "../../../../kritzel-stencil/dist/components/kritzel-shape-fill.js";
+import { KritzelSlideToggle as KritzelSlideToggleElement } from "../../../../kritzel-stencil/dist/components/kritzel-slide-toggle.js";
+export type KritzelBackToContentEvents = {
+    onBackToContent: EventName<KritzelBackToContentCustomEvent<void>>;
+};
+export declare const KritzelBackToContent: StencilReactComponent<KritzelBackToContentElement, KritzelBackToContentEvents>;
+export type KritzelDialogEvents = {
+    onDialogOpen: EventName<KritzelDialogCustomEvent<void>>;
+    onDialogClose: EventName<KritzelDialogCustomEvent<IKritzelDialogCloseEvent>>;
+};
+export declare const KritzelDialog: StencilReactComponent<KritzelDialogElement, KritzelDialogEvents>;
+export type KritzelEditorEvents = {
+    onIsReady: EventName<KritzelEditorCustomEvent<HTMLElement>>;
+    onObjectsChange: EventName<KritzelEditorCustomEvent<KritzelBaseObject[]>>;
+    onUndoStateChange: EventName<KritzelEditorCustomEvent<KritzelUndoState>>;
+    onThemeChange: EventName<KritzelEditorCustomEvent<ThemeName>>;
+};
+export declare const KritzelEditor: StencilReactComponent<KritzelEditorElement, KritzelEditorEvents>;
+export type KritzelExportEvents = {
+    onExportPng: EventName<KritzelExportCustomEvent<void>>;
+    onExportSvg: EventName<KritzelExportCustomEvent<void>>;
+};
+export declare const KritzelExport: StencilReactComponent<KritzelExportElement, KritzelExportEvents>;
+export type KritzelLineEndingsEvents = {
+    onValueChange: EventName<KritzelLineEndingsCustomEvent<LineArrowConfig>>;
+};
+export declare const KritzelLineEndings: StencilReactComponent<KritzelLineEndingsElement, KritzelLineEndingsEvents>;
+export type KritzelMasterDetailEvents = {
+    onItemSelect: EventName<KritzelMasterDetailCustomEvent<IKritzelMasterDetailSelectEvent>>;
+};
+export declare const KritzelMasterDetail: StencilReactComponent<KritzelMasterDetailElement, KritzelMasterDetailEvents>;
+export type KritzelMoreMenuEvents = {
+    onItemSelect: EventName<KritzelMoreMenuCustomEvent<{
+        item: IKritzelMenuItem;
+        parent: IKritzelMenuItem;
+    }>>;
+};
+export declare const KritzelMoreMenu: StencilReactComponent<KritzelMoreMenuElement, KritzelMoreMenuEvents>;
+export type KritzelNumericInputEvents = {
+    onValueChange: EventName<KritzelNumericInputCustomEvent<number>>;
+};
+export declare const KritzelNumericInput: StencilReactComponent<KritzelNumericInputElement, KritzelNumericInputEvents>;
+export type KritzelOpacitySliderEvents = {
+    onValueChange: EventName<KritzelOpacitySliderCustomEvent<number>>;
+};
+export declare const KritzelOpacitySlider: StencilReactComponent<KritzelOpacitySliderElement, KritzelOpacitySliderEvents>;
+export type KritzelSettingsEvents = {
+    onSettingsChange: EventName<KritzelSettingsCustomEvent<KritzelSettingsConfig>>;
+};
+export declare const KritzelSettings: StencilReactComponent<KritzelSettingsElement, KritzelSettingsEvents>;
+export type KritzelShapeFillEvents = {
+    onValueChange: EventName<KritzelShapeFillCustomEvent<ShapeFillType>>;
+};
+export declare const KritzelShapeFill: StencilReactComponent<KritzelShapeFillElement, KritzelShapeFillEvents>;
+export type KritzelSlideToggleEvents = {
+    onCheckedChange: EventName<KritzelSlideToggleCustomEvent<boolean>>;
+};
+export declare const KritzelSlideToggle: StencilReactComponent<KritzelSlideToggleElement, KritzelSlideToggleEvents>;

package/dist/types/kritzel-react/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/stencil-generated/components';
+export { KritzelText, KritzelPath, KritzelImage, KritzelBrushTool, KritzelTextTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelToolbarControl, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';

package/dist/types/kritzel-stencil/src/classes/core/core.class.d.ts

@@ -0,0 +1,101 @@
+import { KritzelEngine } from '../../components/core/kritzel-engine/kritzel-engine';
+import { KritzelBaseObject } from '../objects/base-object.class';
+import { KritzelSelectionGroup } from '../objects/selection-group.class';
+import { KritzelStore } from './store.class';
+import { KritzelWorkspace } from './workspace.class';
+import { KritzelSyncConfig } from '../../interfaces/sync-config.interface';
+import { KritzelAppStateMap } from '../structures/app-state-map.structure';
+import { KritzelAnchorManager } from '../managers/anchor.manager';
+import { KritzelCursorManager } from '../managers/cursor.manager';
+import { KritzelThemeManager } from '../managers/theme.manager';
+export declare class KritzelCore {
+    private readonly _kritzelEngine;
+    private readonly _store;
+    private _syncConfig?;
+    private readonly _appStateMap;
+    private readonly _anchorManager;
+    private readonly _cursorManager;
+    private readonly _themeManager;
+    get engine(): KritzelEngine;
+    get store(): KritzelStore;
+    get appStateMap(): KritzelAppStateMap;
+    get anchorManager(): KritzelAnchorManager;
+    get cursorManager(): KritzelCursorManager;
+    get themeManager(): KritzelThemeManager;
+    constructor(kritzelEngine: KritzelEngine);
+    setSyncConfig(config?: KritzelSyncConfig): void;
+    initializeYjs(): Promise<void>;
+    /**
+     * Load all workspaces from app state map
+     */
+    private loadWorkspacesFromAppState;
+    /**
+     * Save a workspace to app state map
+     */
+    private saveWorkspaceToAppState;
+    /**
+     * Delete a workspace from app state map
+     */
+    private deleteWorkspaceFromAppState;
+    initializeWorkspace(workspace?: KritzelWorkspace): Promise<void>;
+    getObjectsInViewport(): KritzelBaseObject<any>[];
+    rerender(): void;
+    findObjectById(id: string): KritzelBaseObject<any> | null;
+    getWorkspaces(): KritzelWorkspace[];
+    createWorkspace(workspace: KritzelWorkspace): void;
+    updateWorkspace(workspace: KritzelWorkspace): void;
+    deleteWorkspace(workspace: KritzelWorkspace): void;
+    updateWorkspaceViewport(translateX: number, translateY: number, scale: number): void;
+    addObject(object: KritzelBaseObject<any>): void;
+    removeObject(object: KritzelBaseObject<any>, preserveChildren?: boolean): void;
+    updateObject<T extends KritzelBaseObject<any>>(object: T, updatedProperties: Partial<T>): void;
+    addSelectionGroup(selectionGroup: KritzelSelectionGroup): void;
+    removeSelectionGroup(): void;
+    removeSelectionBox(): void;
+    deselectAllObjects(): void;
+    delete(): void;
+    undo(): void;
+    redo(): void;
+    deleteObject(id: string): void;
+    copy(): void;
+    paste(x?: number, y?: number): void;
+    bringForward(object?: KritzelBaseObject<any>): void;
+    sendBackward(object?: KritzelBaseObject<any>): void;
+    bringToFront(object?: KritzelBaseObject<any>): void;
+    sendToBack(object?: KritzelBaseObject<any>): void;
+    /**
+     * Groups the currently selected objects into a KritzelGroup.
+     * Requires at least 2 objects to be selected.
+     */
+    group(): void;
+    /**
+     * Ungroups any KritzelGroup objects in the current selection.
+     * Children are extracted and become top-level objects.
+     */
+    ungroup(): void;
+    selectObjects(objects: KritzelBaseObject<any>[]): void;
+    selectAllObjects(): void;
+    selectAllObjectsInViewport(): void;
+    clearSelection(): void;
+    resetActiveText(): void;
+    resetActiveShape(): void;
+    getObjectFromPointerEvent(event: PointerEvent, selector?: string): KritzelBaseObject<any> | null;
+    getObjectsFromPointerEvent(event: PointerEvent, selector?: string): KritzelBaseObject<any>[];
+    /**
+     * Get all elements at a pointer position that match a given selector.
+     * Uses elementsFromPoint to find overlapped elements.
+     */
+    getElementsAtPoint(event: PointerEvent, selector: string): Element[];
+    /**
+     * Check if any element at the pointer position matches the given selector.
+     * Useful for detecting hover states on overlapped elements.
+     */
+    isPointerOverElement(event: PointerEvent, selector: string): boolean;
+    getCanvasPoint(event: PointerEvent): {
+        x: number;
+        y: number;
+    };
+    beforeWorkspaceChange(): void;
+    displaySelectionGroupUI(object: KritzelBaseObject<any>): boolean;
+    displaySelectionLineUI(object: KritzelBaseObject<any>): boolean;
+}

package/dist/types/kritzel-stencil/src/classes/core/reviver.class.d.ts

@@ -0,0 +1,6 @@
+import { KritzelCore } from "./core.class";
+export declare class KritzelReviver {
+    private readonly _core;
+    constructor(core: KritzelCore);
+    revive<T>(obj: any): T;
+}

package/dist/types/kritzel-stencil/src/classes/core/store.class.d.ts

@@ -0,0 +1,53 @@
+import { KritzelSelectionGroup } from '../objects/selection-group.class';
+import { KritzelEngineState } from '../../interfaces/engine-state.interface';
+import { KritzelSelectionBox } from '../objects/selection-box.class';
+import { KritzelText } from '../objects/text.class';
+import { KritzelShape } from '../objects/shape.class';
+import { KritzelPath } from '../objects/path.class';
+import { KritzelLine } from '../objects/line.class';
+import { StateChangeListener, StatePropertyKey } from '../../types/state.types';
+import { KritzelBaseObject } from '../..';
+export declare class KritzelStore {
+    private readonly _state;
+    private readonly _listeners;
+    private _cachedSelectionBox;
+    private _cachedSelectionGroup;
+    private _selectionBoxCacheValid;
+    private _selectionGroupCacheValid;
+    get state(): KritzelEngineState;
+    get currentZIndex(): number;
+    get totalObjectCount(): number;
+    get allObjects(): KritzelBaseObject<Element>[];
+    get objectsInViewport(): KritzelBaseObject<Element>[];
+    get objectsToRender(): KritzelBaseObject<Element>[];
+    get allNonSelectionObjects(): KritzelBaseObject<Element>[];
+    get selectedObjects(): KritzelBaseObject<Element>[];
+    get selectionBox(): KritzelSelectionBox | null;
+    get selectionGroup(): KritzelSelectionGroup | null;
+    /**
+     * Invalidate cached selection objects. Call this when selection objects are inserted or removed.
+     */
+    invalidateSelectionCache(): void;
+    /**
+     * Directly set the cached selection box reference for O(1) access.
+     * Use this when creating the selection box to avoid a filter lookup.
+     */
+    setSelectionBox(box: KritzelSelectionBox | null): void;
+    /**
+     * Directly set the cached selection group reference for O(1) access.
+     * Use this when creating the selection group to avoid a filter lookup.
+     */
+    setSelectionGroup(group: KritzelSelectionGroup | null): void;
+    get activeText(): KritzelText | null;
+    get activeShape(): KritzelShape | null;
+    get currentPath(): KritzelPath | null;
+    get currentLine(): KritzelLine | null;
+    get offsetX(): number;
+    get offsetY(): number;
+    get isDisabled(): boolean;
+    get isPointerDown(): boolean;
+    constructor(state: KritzelEngineState);
+    onStateChange<K extends StatePropertyKey>(property: K, listener: StateChangeListener<KritzelEngineState[K]>): void;
+    getState<K extends StatePropertyKey>(property: K): Readonly<KritzelEngineState[K]>;
+    setState<K extends StatePropertyKey>(property: K, value: KritzelEngineState[K]): void;
+}

package/dist/types/kritzel-stencil/src/classes/core/viewport.class.d.ts

@@ -0,0 +1,48 @@
+import { KritzelBaseObject } from '../..';
+import { KritzelCore } from './core.class';
+export declare class KritzelViewport {
+    private readonly _core;
+    private readonly _debounceUpdate;
+    private readonly _debounceEndScaling;
+    private _animationFrameId;
+    initialTouchDistance: number;
+    startX: number;
+    startY: number;
+    constructor(core: KritzelCore, host: HTMLElement);
+    /**
+     * Cancels any pending debounced viewport updates.
+     * Should be called before switching workspaces to prevent the old workspace's
+     * viewport state from being saved to the new workspace.
+     */
+    cancelPendingUpdates(): void;
+    handleResize(): void;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+    handleWheel(event: WheelEvent): void;
+    centerInViewport(object: KritzelBaseObject): void;
+    centerFitInViewport(object: KritzelBaseObject): void;
+    private handleZoom;
+    private handlePan;
+    /**
+     * Cancels any ongoing viewport animation.
+     * Called when user interacts with the canvas during animation.
+     */
+    cancelViewportAnimation(): void;
+    /**
+     * Animates the viewport to the specified position and scale.
+     * @param targetTranslateX - Target X translation
+     * @param targetTranslateY - Target Y translation
+     * @param targetScale - Target scale
+     * @param duration - Animation duration in milliseconds (default 150)
+     */
+    animateViewportTo(targetTranslateX: number, targetTranslateY: number, targetScale: number, duration?: number): void;
+    /**
+     * Centers and fits the nearest content objects in the viewport.
+     * Finds up to maxObjects closest objects to the current viewport center
+     * and animates the viewport to show them.
+     * @param maxObjects - Maximum number of objects to consider (default 20)
+     * @returns true if content was found and viewport is animating, false if no content exists
+     */
+    centerFitNearestContent(maxObjects?: number): boolean;
+}

package/dist/types/kritzel-stencil/src/classes/core/workspace.class.d.ts

@@ -0,0 +1,24 @@
+import { KritzelCore } from "../..";
+import { KritzelSerializable } from "../../interfaces/serializable.interface";
+export declare class KritzelWorkspace implements KritzelSerializable {
+    __class__: string;
+    id: string;
+    name: string;
+    createdAt: Date;
+    updatedAt: Date;
+    viewport: {
+        translateX: number;
+        translateY: number;
+        scale: number;
+    };
+    _core: KritzelCore;
+    constructor(id: string, name: string, viewport?: {
+        translateX: number;
+        translateY: number;
+        scale: number;
+    });
+    static create(core: KritzelCore, obj: any): KritzelWorkspace;
+    addObject(obj: any): void;
+    serialize(): any;
+    deserialize(object: any): KritzelSerializable;
+}

package/dist/types/kritzel-stencil/src/classes/handlers/base.handler.d.ts

@@ -0,0 +1,5 @@
+import { KritzelCore } from '../core/core.class';
+export declare class KritzelBaseHandler {
+    protected readonly _core: KritzelCore;
+    constructor(core: KritzelCore);
+}

package/dist/types/kritzel-stencil/src/classes/handlers/context-menu.handler.d.ts

@@ -0,0 +1,8 @@
+import { KritzelBaseHandler } from './base.handler';
+import { KritzelCore } from '../core/core.class';
+export declare class KritzelContextMenuHandler extends KritzelBaseHandler {
+    globalContextMenuItems: never[];
+    objectContextMenuItems: never[];
+    constructor(core: KritzelCore, globalContextMenuItems: any[], objectContextMenuItems: any[]);
+    handleContextMenu(event: PointerEvent): void;
+}

package/dist/types/kritzel-stencil/src/classes/handlers/hover.handler.d.ts

@@ -0,0 +1,6 @@
+import { KritzelCore } from '../core/core.class';
+import { KritzelBaseHandler } from './base.handler';
+export declare class KritzelHoverHandler extends KritzelBaseHandler {
+    constructor(core: KritzelCore);
+    handlePointerMove(event: PointerEvent): void;
+}

package/dist/types/kritzel-stencil/src/classes/handlers/key.handler.d.ts

@@ -0,0 +1,11 @@
+import { KritzelBaseHandler } from './base.handler';
+import { KritzelCore } from '../core/core.class';
+import { KritzelShortcut } from '../../interfaces/shortcut.interface';
+export declare class KritzelKeyHandler extends KritzelBaseHandler {
+    private shortcuts;
+    constructor(core: KritzelCore);
+    private switchToolByIndex;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(event: KeyboardEvent): void;
+    getDisplayableShortcuts(): Omit<KritzelShortcut, 'action' | 'condition'>[];
+}

package/dist/types/kritzel-stencil/src/classes/handlers/line-handle.handler.d.ts

@@ -0,0 +1,34 @@
+import { KritzelCore } from '../core/core.class';
+import { KritzelBaseHandler } from './base.handler';
+export type LineHandleType = 'start' | 'end' | 'center';
+export declare class KritzelLineHandleHandler extends KritzelBaseHandler {
+    initialMouseX: number;
+    initialMouseY: number;
+    initialStartX: number;
+    initialStartY: number;
+    initialEndX: number;
+    initialEndY: number;
+    initialControlX: number | undefined;
+    initialControlY: number | undefined;
+    initialTranslateX: number;
+    initialTranslateY: number;
+    hasMoved: boolean;
+    /** Current snap target during drag, if any */
+    private currentSnapTarget;
+    constructor(core: KritzelCore);
+    private reset;
+    handlePointerDown(event: PointerEvent): void;
+    private startHandleDrag;
+    handlePointerMove(event: PointerEvent): void;
+    /**
+     * Converts world coordinates to a line's local coordinate system.
+     */
+    private worldToLineLocal;
+    /**
+     * Converts a line's local coordinate system to world coordinates.
+     */
+    private lineLocalToWorld;
+    private updateLineEndpoint;
+    handlePointerUp(_event: PointerEvent): void;
+    private getSelectedLine;
+}

package/dist/types/kritzel-stencil/src/classes/handlers/move.handler.d.ts

@@ -0,0 +1,29 @@
+import { KritzelBaseHandler } from './base.handler';
+import { KritzelCore } from '../core/core.class';
+export declare class KritzelMoveHandler extends KritzelBaseHandler {
+    dragStartX: number;
+    dragStartY: number;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    /** Initial position when drag started (for calculating total accumulated distance) */
+    private initialDragX;
+    private initialDragY;
+    /** Set of line IDs that have been disconnected from anchors during this drag */
+    private disconnectedLineIds;
+    hasMoved: boolean;
+    private trackedPointerId;
+    constructor(core: KritzelCore);
+    private reset;
+    cancelPendingDrag(): void;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+    /**
+     * Checks if the total accumulated drag distance exceeds the anchor disconnect threshold.
+     * If so, disconnects all anchors from any KritzelLine objects in the selection group.
+     * This allows anchored lines to be freely moved after dragging beyond the threshold.
+     */
+    private checkAndDisconnectAnchors;
+}

package/dist/types/kritzel-stencil/src/classes/handlers/resize.handler.d.ts

@@ -0,0 +1,24 @@
+import { KritzelCore } from '../core/core.class';
+import { KritzelBaseHandler } from './base.handler';
+export declare class KritzelResizeHandler extends KritzelBaseHandler {
+    initialMouseX: number;
+    initialMouseY: number;
+    initialSize: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    newSize: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    hasResized: boolean;
+    constructor(core: KritzelCore);
+    private reset;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+}

package/dist/types/kritzel-stencil/src/classes/handlers/rotation.handler.d.ts

@@ -0,0 +1,12 @@
+import { KritzelBaseHandler } from './base.handler';
+import { KritzelCore } from '../core/core.class';
+export declare class KritzelRotationHandler extends KritzelBaseHandler {
+    initialRotation: number;
+    rotation: number;
+    initialSelectionGroupRotation: number;
+    constructor(core: KritzelCore);
+    private reset;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+}