kritzel-stencil 0.0.161 → 0.0.163

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-6d9756d9",[[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)}));
+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-9d43b708",[[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],selectedSubOptions:[32],openSubMenuControl:[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>;
@@ -57,11 +63,24 @@ export declare class KritzelCore {
     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/classes/core/store.class.d.ts

@@ -2,7 +2,9 @@ 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 {
@@ -16,7 +18,9 @@ export declare class KritzelStore {
     get selectionBox(): KritzelSelectionBox | null;
     get selectionGroup(): KritzelSelectionGroup | null;
     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;

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

@@ -8,6 +8,12 @@ export declare class KritzelViewport {
     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;

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,180 @@
+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;
+    /**
+     * Finds the exit point for a curved line going to a Path object.
+     * Uses distance-to-stroke sampling instead of polygon containment.
+     */
+    private findCurveExitPointForPath;
+    private refineCurveExitParameterForPath;
+    private getPathAdjustedPoints;
+    private computePathAdjustedPoints;
+    private isPointInPathStroke;
+    private pointToSegmentDistance;
+    private refineCurveExitParameter;
+    private approximateParameterForWorldPoint;
+    private evaluateLineAtT;
+    private evaluateDerivativeSpeedAtT;
+    private extractQuadraticSegment;
+    private splitQuadraticSegment;
+    private lerpPoint;
+    private buildAnchorPath;
+    private buildWorldQuadraticPath;
+    private getPolygonPoints;
+    /**
+     * Gets the custom clip polygon for an object if it has one.
+     * Returns null for objects that should use the default rotatedPolygon.
+     */
+    private getClipPolygonForObject;
+    /**
+     * Gets the clip point for a Path object (stroke edge intersection).
+     * Returns null if the object is not a Path or no intersection found.
+     */
+    private getPathClipPoint;
+    /**
+     * 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/objects/path.class.d.ts

@@ -1,6 +1,7 @@
 import { KritzelPathOptions } from '../../interfaces/path-options.interface';
 import { KritzelBaseObject } from './base-object.class';
 import { KritzelPolygon } from '../../interfaces/polygon.interface';
+import { KritzelPoint } from '../../interfaces/point.interface';
 import { KritzelCore } from '../core/core.class';
 export declare class KritzelPath extends KritzelBaseObject<SVGElement> {
     __class__: string;
@@ -44,4 +45,10 @@ export declare class KritzelPath extends KritzelBaseObject<SVGElement> {
     private getStrokeFromPoints;
     private getSvgPathFromStroke;
     isLowRes(): boolean;
+    /**
+     * Finds the point where a line from outsidePoint to the path's center
+     * intersects the stroke edge. Returns null if no intersection found.
+     * This is used for arrow clipping at the actual stroke edge.
+     */
+    getClipPoint(outsidePoint: KritzelPoint): KritzelPoint | null;
 }

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

@@ -0,0 +1,116 @@
+import { KritzelBaseObject } from './base-object.class';
+import { KritzelCore } from '../core/core.class';
+import { ShapeType } from '../../enums/shape-type.enum';
+import { KritzelPoint } from '../../interfaces/point.interface';
+import { EditorView } from 'prosemirror-view';
+export declare class KritzelShape extends KritzelBaseObject<HTMLDivElement> {
+    __class__: string;
+    shapeType: ShapeType;
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    fontFamily: string;
+    fontSize: number;
+    fontColor: string;
+    /** Screen-space x coordinate of the shape's top-left corner (like Path.x) */
+    x: number;
+    /** Screen-space y coordinate of the shape's top-left corner (like Path.y) */
+    y: number;
+    scale: number;
+    scaleFactor: number;
+    isDebugInfoVisible: boolean;
+    isEditable: boolean;
+    isEditing: boolean;
+    editor: EditorView | null;
+    content: any;
+    private readonly _schema;
+    uneditedObject: KritzelShape | null;
+    /**
+     * Returns the viewBox for the shape's SVG, using screen-space coordinates.
+     * This follows the same pattern as KritzelPath.viewBox.
+     */
+    get viewBox(): string;
+    constructor(config?: {
+        x?: number;
+        y?: number;
+        translateX?: number;
+        translateY?: number;
+        width?: number;
+        height?: number;
+        shapeType?: ShapeType;
+        fillColor?: string;
+        strokeColor?: string;
+        strokeWidth?: number;
+        fontSize?: number;
+        fontFamily?: string;
+        fontColor?: string;
+        scale?: number;
+        scaleX?: number;
+        scaleY?: number;
+    });
+    /**
+     * Creates a new KritzelShape with screen-space coordinates.
+     * Following the same pattern as KritzelPath.create():
+     * - x, y are screen-space coordinates of the shape's top-left corner
+     * - translateX, translateY should be set to -viewportTranslateX, -viewportTranslateY
+     * - width, height are in screen-space
+     * - scale is the viewport scale at creation time
+     */
+    static create(core: KritzelCore, config?: {
+        x?: number;
+        y?: number;
+        translateX?: number;
+        translateY?: number;
+        width?: number;
+        height?: number;
+        shapeType?: ShapeType;
+        fillColor?: string;
+        strokeColor?: string;
+        strokeWidth?: number;
+        fontSize?: number;
+        fontFamily?: string;
+        fontColor?: string;
+    }): KritzelShape;
+    /**
+     * Updates the translateX/Y to world coordinates based on screen-space x, y.
+     * This follows the same pattern as KritzelPath.updateDimensions().
+     *
+     * The formula: translateX = (x + initialTranslateX) / scale
+     * where initialTranslateX was -viewportTranslateX
+     *
+     * This converts screen-space position to world coordinates.
+     */
+    updateDimensions(): void;
+    mount(element: HTMLDivElement): void;
+    mountTextEditor(element: HTMLDivElement): void;
+    private createEditor;
+    setContent(content: any): void;
+    resize(x: number, y: number, width: number, height: number): void;
+    focus(coords?: {
+        x: number;
+        y: number;
+    }): void;
+    private scrollIntoViewOnIOS;
+    edit(event?: PointerEvent): void;
+    save(): void;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+    copy(): KritzelShape;
+    serialize(): any;
+    deserialize<KritzelShape>(object: any): KritzelShape;
+    /**
+     * Returns the clipping polygon for arrow intersection.
+     * For ellipse: returns a many-sided polygon approximation
+     * For triangle: returns the 3 corners
+     * For rectangle: returns null (uses default rotatedPolygon)
+     *
+     * Includes padding for half the stroke width so arrow heads don't overlap the stroke.
+     */
+    getClipPolygon(): KritzelPoint[] | null;
+    /**
+     * Returns the SVG path for rendering the shape.
+     * The path uses screen-space coordinates relative to (x, y).
+     */
+    getSvgPath(): string;
+}

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;
 }