kritzel-stencil 0.0.160 → 0.0.162

package/dist/stencil/stencil.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-SGde3HXB.js";export{s as setNonce}from"./p-SGde3HXB.js";import{g as o}from"./p-DQuL1Twl.js";var n=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};n().then((async e=>{await o();return t([["p-5475442e",[[768,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"],workspaces:["onWorkspacesChange"]}],[769,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{workspace:[16],syncConfig:[16],activeTool:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],undo:[64],redo:[64],hideContextMenu:[64],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],getCopiedObjects:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"]}],[769,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[769,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],menuScrollTop:[32],open:[64],focusMenu:[64]}],[769,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:["onItemsChanged"]}],[769,"kritzel-utility-panel",{undoState:[16]}],[769,"kritzel-cursor-trail",{core:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],arrowSize:[2,"arrow-size"],offsetY:[2,"offset-y"],positionX:[32],arrowOffset:[32],isMobileView:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}],[769,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[769,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[769,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[769,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[769,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}],[769,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},null,{item:["onItemChange"]}],[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[8,"select-styles"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32]},null,{options:["optionsChanged"],value:["externalValueChanged"]}],[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:["anchorChanged"]}],[769,"kritzel-color",{value:[1],size:[2]}],[769,"kritzel-icon",{name:[1],label:[1],size:[2]}]]],["p-d702c5af",[[769,"kritzel-brush-style",{type:[1],brushOptions:[16]}]]]],e)}));
+import{p as e,b as t}from"./p-SGde3HXB.js";export{s as setNonce}from"./p-SGde3HXB.js";import{g as o}from"./p-DQuL1Twl.js";var n=()=>{const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};n().then((async e=>{await o();return t([["p-d142ef46",[[768,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:["onIsEngineReady"],isControlsReady:["onIsControlsReady"],workspaces:["onWorkspacesChange"]}],[769,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[769,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]],[769,"kritzel-engine",{workspace:[16],syncConfig:[16],activeTool:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],cursorTarget:[16],forceUpdate:[32],registerTool:[64],changeActiveTool:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],undo:[64],redo:[64],hideContextMenu:[64],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],getCopiedObjects:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{workspace:["onWorkspaceChange"],scaleMax:["validateScaleMax"],scaleMin:["validateScaleMin"],cursorTarget:["onCursorTargetChange"]}],[769,"kritzel-control-text-config",{tool:[1040],isExpanded:[1028,"is-expanded"]}],[769,"kritzel-control-brush-config",{tool:[1040],isExpanded:[1028,"is-expanded"],palette:[32]},null,{tool:["handleToolChange"]}],[769,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],menuScrollTop:[32],open:[64],focusMenu:[64]}],[769,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:["onItemsChanged"]}],[769,"kritzel-utility-panel",{undoState:[16]}],[769,"kritzel-cursor-trail",{core:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],arrowSize:[2,"arrow-size"],offsetY:[2,"offset-y"],positionX:[32],arrowOffset:[32],isMobileView:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[769,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}],[769,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[769,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[769,"kritzel-color-palette",{colors:[16],selectedColor:[1025,"selected-color"],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"]}],[769,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[769,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}],[769,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},null,{item:["onItemChange"]}],[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[8,"select-styles"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32]},null,{options:["optionsChanged"],value:["externalValueChanged"]}],[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:["anchorChanged"]}],[769,"kritzel-color",{value:[1],size:[2]}],[769,"kritzel-icon",{name:[1],label:[1],size:[2]}]]],["p-385bab97",[[769,"kritzel-brush-style",{type:[1],brushOptions:[16]}]]]],e)}));
 //# sourceMappingURL=stencil.esm.js.map

package/dist/types/classes/core/core.class.d.ts

@@ -5,14 +5,20 @@ 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';
 export declare class KritzelCore {
     private readonly _kritzelEngine;
     private readonly _store;
     private _syncConfig?;
     private readonly _appStateMap;
+    private readonly _anchorManager;
+    private readonly _cursorManager;
     get engine(): KritzelEngine;
     get store(): KritzelStore;
     get appStateMap(): KritzelAppStateMap;
+    get anchorManager(): KritzelAnchorManager;
+    get cursorManager(): KritzelCursorManager;
     constructor(kritzelEngine: KritzelEngine);
     setSyncConfig(config?: KritzelSyncConfig): void;
     initializeYjs(): Promise<void>;
@@ -59,9 +65,21 @@ export declare class KritzelCore {
     resetActiveText(): 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/classes/core/store.class.d.ts

@@ -3,6 +3,7 @@ import { KritzelEngineState } from '../../interfaces/engine-state.interface';
 import { KritzelSelectionBox } from '../objects/selection-box.class';
 import { KritzelText } from '../objects/text.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 {
@@ -17,9 +18,11 @@ export declare class KritzelStore {
     get selectionGroup(): KritzelSelectionGroup | null;
     get activeText(): KritzelText | 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]>;

package/dist/types/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/classes/managers/anchor.manager.d.ts

@@ -0,0 +1,160 @@
+import { AnchorIndexEntry, AnchorLinesRenderData, AnchorVisualization, LineAnchor, SnapCandidate, SnapIndicatorRenderData, SnapTarget } from '../../interfaces/anchor.interface';
+import { KritzelCore } from '../core/core.class';
+import { KritzelLine } from '../objects/line.class';
+import { KritzelBaseObject } from '../objects/base-object.class';
+type AnchorClipInfo = {
+    localX: number;
+    localY: number;
+    worldX: number;
+    worldY: number;
+    t?: number;
+};
+/**
+ * Manages anchor connections between line endpoints and other objects.
+ * Maintains a runtime index for efficient reverse lookups and handles
+ * snap detection during line endpoint dragging.
+ */
+export declare class KritzelAnchorManager {
+    private readonly _core;
+    /**
+     * Runtime index mapping objectId to the lines anchored to it.
+     * This is derived from the anchor properties on lines and rebuilt as needed.
+     */
+    private readonly _anchorIndex;
+    constructor(core: KritzelCore);
+    /**
+     * Sets an anchor from a line endpoint to a target object's center.
+     * Updates both the line's anchor property and the internal index.
+     */
+    setAnchor(lineId: string, endpoint: 'start' | 'end', targetObjectId: string): void;
+    /**
+     * Removes an anchor from a line endpoint.
+     * Updates both the line's anchor property and the internal index.
+     */
+    removeAnchor(lineId: string, endpoint: 'start' | 'end'): void;
+    /**
+     * Gets the anchor for a specific line endpoint.
+     */
+    getAnchor(lineId: string, endpoint: 'start' | 'end'): LineAnchor | null;
+    /**
+     * Gets all lines that have an endpoint anchored to the specified object.
+     */
+    getLinesAnchoredTo(objectId: string): AnchorIndexEntry[];
+    /**
+     * Updates all line endpoints that are anchored to the specified object.
+     * Should be called when an object moves.
+     */
+    updateAnchorsForObject(objectId: string): void;
+    /**
+     * Snaps a line endpoint to an object's center.
+     */
+    private snapEndpointToObject;
+    /**
+     * Converts world coordinates to a line's local coordinate system.
+     */
+    private worldToLineLocal;
+    /**
+     * Finds the nearest object that can be snapped to within the snap threshold.
+     * Returns null if no suitable snap target is found.
+     *
+     * @param worldX - X coordinate in world space
+     * @param worldY - Y coordinate in world space
+     * @param excludeLineId - ID of the line being edited (to exclude from snap targets)
+     * @param otherEndpointAnchorId - ID of object anchored to the other endpoint (to prevent same-object anchoring)
+     */
+    findSnapTarget(worldX: number, worldY: number, excludeLineId: string, otherEndpointAnchorId?: string): SnapTarget | null;
+    /**
+     * Sets the current snap candidate for visual feedback.
+     */
+    setSnapCandidate(candidate: SnapCandidate | null): void;
+    /**
+     * Gets the current snap candidate.
+     */
+    getSnapCandidate(): SnapCandidate | null;
+    /**
+     * Clears the snap candidate.
+     */
+    clearSnapCandidate(): void;
+    /**
+     * Gets render data for anchor lines visualization.
+     * Returns null if there's no selected line with anchors or if snap is in progress.
+     */
+    getAnchorLinesRenderData(): AnchorLinesRenderData | null;
+    /**
+     * Gets render data for snap indicator visualization.
+     * Returns null if there's no snap candidate.
+     */
+    getSnapIndicatorRenderData(): SnapIndicatorRenderData | null;
+    /**
+     * Handles cleanup when an object is deleted.
+     * Detaches all lines that were anchored to the deleted object.
+     */
+    handleObjectDeleted(objectId: string): void;
+    /**
+     * Handles cleanup when a line is deleted.
+     * Removes all anchor index entries for the line.
+     */
+    handleLineDeleted(lineId: string): void;
+    /**
+     * Rebuilds the anchor index from all lines in the object map.
+     * Should be called after loading/deserializing objects.
+     */
+    rebuildIndex(): void;
+    /**
+     * Adds an entry to the anchor index.
+     */
+    private addToIndex;
+    /**
+     * Removes an entry from the anchor index.
+     */
+    private removeFromIndex;
+    /**
+     * Gets a line by its ID.
+     */
+    private getLineById;
+    /**
+     * Gets an object by its ID.
+     */
+    private getObjectById;
+    private findAnchorTarget;
+    /**
+     * Computes anchor visualization data for a line with anchors.
+     * Returns edge intersection points for rendering dashed lines from edge to center.
+     */
+    computeAnchorVisualization(line: KritzelLine, endpoint: 'start' | 'end'): AnchorVisualization | null;
+    /**
+     * Computes a clipped line path that stops at anchor edges instead of going to anchor centers.
+     * When arrows are present on anchored ends, the line is shortened so the arrow tip appears at the edge.
+     * Returns the SVG path 'd' attribute string, or the original path if no clipping is needed.
+     * @param line The line object
+     * @param offsetByViewBox If true, subtracts line.x and line.y from coordinates (for selection UI)
+     */
+    computeClippedLinePath(line: KritzelLine, offsetByViewBox?: boolean): string;
+    computeAnchorClipInfo(line: KritzelLine, endpoint: 'start' | 'end', targetObject: KritzelBaseObject<Element>): AnchorClipInfo | null;
+    private computeStraightClipInfo;
+    private computeCurvedClipInfo;
+    private findCurveExitPoint;
+    private refineCurveExitParameter;
+    private approximateParameterForWorldPoint;
+    private evaluateLineAtT;
+    private evaluateDerivativeSpeedAtT;
+    private extractQuadraticSegment;
+    private splitQuadraticSegment;
+    private lerpPoint;
+    private buildAnchorPath;
+    private buildWorldQuadraticPath;
+    private getPolygonPoints;
+    /**
+     * Converts local line coordinates to world coordinates.
+     */
+    private lineLocalToWorld;
+    /**
+     * Converts world coordinates to line's local SVG coordinates.
+     */
+    private lineWorldToLocal;
+    /**
+     * Checks if an object can be used as an anchor target.
+     */
+    private isAnchorable;
+}
+export {};

package/dist/types/classes/managers/cursor.manager.d.ts

@@ -0,0 +1,43 @@
+import { KritzelCore } from '../core/core.class';
+/**
+ * Manages cursor state and updates across the application.
+ * Handles cursor changes based on handle hovers, tool states, and interactions.
+ */
+export declare class KritzelCursorManager {
+    private readonly _core;
+    private _targetElement;
+    private _shadowRoot;
+    constructor(core: KritzelCore);
+    /**
+     * Sets the target element where cursor styles will be applied.
+     * Also sets the pointer cursor CSS variable for child components.
+     */
+    setTargetElement(element: HTMLElement | null): void;
+    /**
+     * Gets the current cursor target element.
+     */
+    getTargetElement(): HTMLElement | null;
+    /**
+     * Sets the shadow root for element detection.
+     */
+    setShadowRoot(shadowRoot: ShadowRoot): void;
+    /**
+     * Resets cursor to default state.
+     * Should be called when all pointers are released.
+     */
+    resetToDefault(): void;
+    /**
+     * Detects handle hover states using elementsFromPoint() to work with overlapped elements.
+     * This approach finds all elements at the pointer position instead of relying on pointerenter/pointerleave.
+     */
+    updateHoverState(ev: PointerEvent): void;
+    /**
+     * Applies the current cursor state to the target element.
+     * Should be called in the render loop.
+     */
+    applyCursor(): void;
+    /**
+     * Cleans up cursor state when the component is disconnected.
+     */
+    cleanup(): void;
+}

package/dist/types/classes/objects/line.class.d.ts

@@ -0,0 +1,98 @@
+import { KritzelLineOptions } from '../../interfaces/line-options.interface';
+import { KritzelBaseObject } from './base-object.class';
+import { KritzelPolygon } from '../../interfaces/polygon.interface';
+import { KritzelCore } from '../core/core.class';
+import { LineAnchor } from '../../interfaces/anchor.interface';
+import { ArrowHeadStyle, LineArrowConfig } from '../../interfaces/arrow-head.interface';
+export declare class KritzelLine extends KritzelBaseObject<SVGElement> {
+    __class__: string;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    controlX?: number;
+    controlY?: number;
+    stroke: string;
+    strokeWidth: number;
+    scale: number;
+    options: KritzelLineOptions | undefined;
+    /** Anchor connection for the start point of the line */
+    startAnchor?: LineAnchor;
+    /** Anchor connection for the end point of the line */
+    endAnchor?: LineAnchor;
+    /** Arrow head configuration for start and end of line */
+    arrows?: LineArrowConfig;
+    isVisible: boolean;
+    isDebugInfoVisible: boolean;
+    isCompleted: boolean;
+    private _adjustedPoints?;
+    get d(): string;
+    get viewBox(): string;
+    constructor(config?: KritzelLineOptions);
+    static create(core: KritzelCore, options?: KritzelLineOptions): KritzelLine;
+    resize(x: number | null, y: number | null, width: number, height: number): void;
+    rotate(value: number): void;
+    move(startX: number, startY: number, endX: number, endY: number): void;
+    hitTest(x: number, y: number): boolean;
+    hitTestPolygon(polygon: KritzelPolygon): boolean;
+    updatePosition(x: number, y: number): void;
+    /**
+     * Updates a specific endpoint of the line (start or end).
+     * The coordinates are in viewBox-local space (relative to x, y origin).
+     * This method recalculates the bounding box dimensions.
+     *
+     * @param handleType - Which endpoint to update: 'start' or 'end'
+     * @param newX - New X coordinate in viewBox-local space
+     * @param newY - New Y coordinate in viewBox-local space
+     */
+    updateEndpoint(handleType: 'start' | 'end', newX: number, newY: number): void;
+    updateControlPoint(newX: number | undefined, newY: number | undefined): void;
+    private computeAdjustedPoints;
+    private pointToLineSegmentDistance;
+    /**
+     * Calculates the minimum distance from a point to a quadratic Bezier curve.
+     * Uses sampling along the curve to find the closest point.
+     */
+    private pointToBezierDistance;
+    /**
+     * Computes the adjusted control point in world coordinates, accounting for rotation and translation.
+     */
+    private computeAdjustedControlPoint;
+    get rotatedPolygon(): KritzelPolygon;
+    /**
+     * Calculates the tight bounding box for a quadratic Bezier curve or straight line.
+     * For curves, it finds the extrema points where the derivative equals zero.
+     */
+    static calculateBoundingBox(startX: number, startY: number, endX: number, endY: number, controlX: number | undefined, controlY: number | undefined, strokeWidth: number): {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
+    calculateBoundingBox(): {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
+    private updateDimensions;
+    /** Get unique marker ID for SVG defs at the start of the line */
+    get startMarkerId(): string;
+    /** Get unique marker ID for SVG defs at the end of the line */
+    get endMarkerId(): string;
+    /** Get the arrow size for start or end, defaulting to strokeWidth * 3 */
+    getArrowSize(end: 'start' | 'end'): number;
+    /** Get the arrow fill color for start or end, defaulting to stroke color */
+    getArrowFill(end: 'start' | 'end'): string;
+    /**
+     * Generate SVG path data for an arrow head based on the given style.
+     * The path is designed to fit in a 10x10 viewBox with the tip at (10, 5).
+     * @param style The arrow head style
+     * @returns SVG path data string
+     */
+    getArrowPath(style?: ArrowHeadStyle): string;
+    /** Check if start arrow is enabled */
+    get hasStartArrow(): boolean;
+    /** Check if end arrow is enabled */
+    get hasEndArrow(): boolean;
+}

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

@@ -0,0 +1,17 @@
+import { KritzelBaseTool } from './base-tool.class';
+import { KritzelCore } from '../core/core.class';
+import { LineArrowConfig } from '../../interfaces/arrow-head.interface';
+export declare class KritzelLineTool extends KritzelBaseTool {
+    color: string;
+    size: number;
+    palettes: string[];
+    /** Arrow head configuration for lines created with this tool */
+    arrows?: LineArrowConfig;
+    private _startX;
+    private _startY;
+    constructor(core: KritzelCore);
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+    private selectLineAndSwitchTool;
+}

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

@@ -5,12 +5,14 @@ import { KritzelSelectionHandler } from '../handlers/selection.handler';
 import { KritzelBaseTool } from './base-tool.class';
 import { KritzelHoverHandler } from '../handlers/hover.handler';
 import { KritzelCore } from '../core/core.class';
+import { KritzelLineHandleHandler } from '../handlers/line-handle.handler';
 export declare class KritzelSelectionTool extends KritzelBaseTool {
     selectionHandler: KritzelSelectionHandler;
     moveHandler: KritzelMoveHandler;
     hoverHandler: KritzelHoverHandler;
     resizeHandler: KritzelResizeHandler;
     rotationHandler: KritzelRotationHandler;
+    lineHandleHandler: KritzelLineHandleHandler;
     constructor(core: KritzelCore);
     handlePointerDown(event: PointerEvent): void;
     handlePointerMove(event: PointerEvent): void;
@@ -19,4 +21,6 @@ export declare class KritzelSelectionTool extends KritzelBaseTool {
     private getHandleType;
     private isHandleSelected;
     private isRotationHandleSelected;
+    private isLineHandleSelected;
+    private getLineHandleType;
 }

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

@@ -4,7 +4,7 @@ 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 { KritzelBrushToolConfig, KritzelLineToolConfig, 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/core/workspace.class';
@@ -24,6 +24,8 @@ export declare class KritzelEngine {
     validateScaleMax(newValue: number): void;
     scaleMin: number;
     validateScaleMin(newValue: number): void;
+    cursorTarget?: HTMLElement;
+    onCursorTargetChange(newValue: HTMLElement | undefined): void;
     isEngineReady: EventEmitter<KritzelEngineState>;
     activeToolChange: EventEmitter<KritzelBaseTool>;
     workspacesChange: EventEmitter<KritzelWorkspace[]>;
@@ -44,7 +46,7 @@ export declare class KritzelEngine {
     handleKeyDown(ev: any): void;
     handleKeyUp(ev: any): void;
     preventDoubleTapZoomOnTouchDevices(ev: MouseEvent): void;
-    registerTool(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig): Promise<KritzelBaseTool>;
+    registerTool(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig): Promise<KritzelBaseTool>;
     changeActiveTool(tool: KritzelBaseTool): Promise<void>;
     disable(): Promise<void>;
     enable(): Promise<void>;

package/dist/types/components.d.ts

@@ -10,7 +10,7 @@ import { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 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 { KritzelBrushToolConfig, KritzelLineToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
 import { KritzelUndoState } from "./interfaces/undo-state.interface";
 import { KritzelCore } from "./classes/core/core.class";
 import { DropdownOption } from "./components/shared/kritzel-dropdown/kritzel-dropdown";
@@ -27,7 +27,7 @@ export { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 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 { KritzelBrushToolConfig, KritzelLineToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
 export { KritzelUndoState } from "./interfaces/undo-state.interface";
 export { KritzelCore } from "./classes/core/core.class";
 export { DropdownOption } from "./components/shared/kritzel-dropdown/kritzel-dropdown";
@@ -132,7 +132,7 @@ export namespace Components {
         "centerObjectInViewport": (object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
         "clearSelection": () => Promise<void>;
         /**
-          * @default [     {       name: 'selection',       type: 'tool',       isDefault: true,       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       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',     },   ]
+          * @default [     {       name: 'selection',       type: 'tool',       isDefault: true,       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       config: DEFAULT_BRUSH_CONFIG,     },     {       name: 'line',       type: 'tool',       tool: KritzelLineTool,       icon: 'arrow',       config: DEFAULT_LINE_TOOL_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>;
@@ -186,6 +186,7 @@ export namespace Components {
         "clearSelection": () => Promise<void>;
         "copy": () => Promise<void>;
         "createWorkspace": (workspace: KritzelWorkspace) => Promise<KritzelWorkspace | null>;
+        "cursorTarget"?: HTMLElement;
         "delete": () => Promise<void>;
         "deleteWorkspace": (workspace: KritzelWorkspace) => Promise<void>;
         "disable": () => Promise<void>;
@@ -200,7 +201,7 @@ export namespace Components {
         "objectContextMenuItems": ContextMenuItem[];
         "paste": (x: number, y: number) => Promise<void>;
         "redo": () => Promise<void>;
-        "registerTool": (toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig) => Promise<KritzelBaseTool>;
+        "registerTool": (toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig) => Promise<KritzelBaseTool>;
         "removeObject": <T extends KritzelBaseObject>(object: T) => Promise<T | null>;
         /**
           * @default ABSOLUTE_SCALE_MAX
@@ -926,7 +927,7 @@ declare namespace LocalJSX {
     }
     interface KritzelEditor {
         /**
-          * @default [     {       name: 'selection',       type: 'tool',       isDefault: true,       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       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',     },   ]
+          * @default [     {       name: 'selection',       type: 'tool',       isDefault: true,       tool: KritzelSelectionTool,       icon: 'cursor',     },     {       name: 'brush',       type: 'tool',       tool: KritzelBrushTool,       icon: 'pen',       config: DEFAULT_BRUSH_CONFIG,     },     {       name: 'line',       type: 'tool',       tool: KritzelLineTool,       icon: 'arrow',       config: DEFAULT_LINE_TOOL_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[];
         /**
@@ -964,6 +965,7 @@ declare namespace LocalJSX {
     }
     interface KritzelEngine {
         "activeTool"?: KritzelTool;
+        "cursorTarget"?: HTMLElement;
         "globalContextMenuItems"?: ContextMenuItem[];
         "objectContextMenuItems"?: ContextMenuItem[];
         "onActiveToolChange"?: (event: KritzelEngineCustomEvent<KritzelBaseTool>) => void;

package/dist/types/configs/default-line-tool.config.d.ts

@@ -0,0 +1,2 @@
+import { KritzelLineToolConfig } from '../interfaces/toolbar-control.interface';
+export declare const DEFAULT_LINE_TOOL_CONFIG: KritzelLineToolConfig;

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

@@ -0,0 +1,22 @@
+export declare class KritzelCursorHelper {
+    private static _pointerCursor;
+    /**
+     * Returns the custom pointer cursor CSS value.
+     * This can be used instead of `cursor: pointer` for consistent styling.
+     */
+    static getPointerCursor(): string;
+    /**
+     * Returns a custom cursor CSS value with support for rotation.
+     * The icon is retrieved from the KritzelIconRegistry.
+     */
+    static getCursor(options: {
+        iconName: string;
+        rotation?: number;
+        color?: string;
+        size?: number;
+        hotspot?: {
+            x: number;
+            y: number;
+        };
+    }): string;
+}

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

@@ -4,4 +4,14 @@ export declare class KritzelGeometryHelper {
     static doPolygonsIntersect(polygon1: KritzelPolygon, polygon2: KritzelPolygon): boolean;
     static isPointInPolygon(point: KritzelPoint, polygon: KritzelPoint[]): boolean;
     static intersectLines(p1a: KritzelPoint, p1b: KritzelPoint, p2a: KritzelPoint, p2b: KritzelPoint): boolean;
+    /**
+     * Finds the intersection point between a line segment and a line segment.
+     * Returns the intersection point or null if no intersection.
+     */
+    static getLineIntersectionPoint(p1a: KritzelPoint, p1b: KritzelPoint, p2a: KritzelPoint, p2b: KritzelPoint): KritzelPoint | null;
+    /**
+     * Finds the closest intersection point between a line segment (from lineStart to lineEnd)
+     * and a polygon. Returns the intersection point closest to lineStart, or null if no intersection.
+     */
+    static getLinePolygonIntersection(lineStart: KritzelPoint, lineEnd: KritzelPoint, polygon: KritzelPolygon): KritzelPoint | null;
 }

package/dist/types/index.d.ts

@@ -11,10 +11,13 @@ export type * from './components';
 export * from './classes/objects/text.class';
 export * from './classes/objects/path.class';
 export * from './classes/objects/image.class';
+export * from './classes/objects/line.class';
 export * from './classes/tools/brush-tool.class';
+export * from './classes/tools/line-tool.class';
 export * from './classes/tools/eraser-tool.class';
 export * from './classes/tools/image-tool.class';
 export * from './classes/tools/text-tool.class';
+export * from './helpers/cursor.helper';
 export * from './classes/tools/selection-tool.class';
 export * from './classes/providers/broadcast-sync-provider.class';
 export * from './classes/providers/indexeddb-sync-provider.class';
@@ -22,9 +25,12 @@ export * from './classes/providers/websocket-sync-provider.class';
 export * from './classes/providers/hocuspocus-sync-provider.class';
 export * from './classes/structures/app-state-map.structure';
 export * from './classes/core/workspace.class';
+export * from './classes/managers/anchor.manager';
 export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
 export * from './interfaces/sync-provider.interface';
 export * from './interfaces/sync-config.interface';
+export * from './interfaces/anchor.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';
+export * from './configs/default-line-tool.config';