@snowcone-app/canvas 0.1.0

package/dist/components/CanvasEditor/hooks/useCanvasInteraction.d.ts

@@ -0,0 +1,284 @@
+import { default as React } from 'react';
+import { TextElement } from '../../../core/TextElement.js';
+import { ImageElement } from '../../../core/ImageElement.js';
+import { GroupElement } from '../../../core/GroupElement.js';
+import { ShapeElement } from '../../../core/ShapeElement.js';
+import { PathElement } from '../../../core/PathElement.js';
+import { BaseElement } from '../../../core/BaseElement.js';
+import { TransformHandles } from '../../../core/TransformHandles.js';
+import { InteractionStateMachine } from '../../../core/InteractionStateMachine.js';
+import { AlignmentSnapSystem } from '../../../core/AlignmentSnapSystem.js';
+import { SpacingSystem } from '../../../core/SpacingSystem.js';
+import { SnapGuide, SpacingIndicator, RichText, CharacterStyle, ImageTransformData } from '../../../types/index.js';
+import { LocalHoverState } from '../types/index.js';
+import { MultiSelectionOBB, MultiSelectionGroupBounds } from '../renderers/index.js';
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+type ChildElement = TextElement | ImageElement | ShapeElement | PathElement | GroupElement;
+/** Context attached when the user clicks a group child (pending selection on pointerUp) */
+type PendingChildSelection = ChildElement;
+/** Context for pending text edit mode entry (set on pointerDown, consumed on pointerUp) */
+interface PendingTextEditMode {
+    elementId: string;
+    originalX: number;
+    originalY: number;
+    clickX: number;
+    clickY: number;
+}
+/** Per-element start data stored in multi-selection drag/resize/rotation contexts */
+interface MultiElementStartData {
+    element: CanvasElement;
+    startData: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        rotation: number;
+        transformData: ImageTransformData | Record<string, unknown>;
+        [key: string]: unknown;
+    };
+}
+/**
+ * Gate element hit-tests by clipped-zone overlap.
+ *
+ * If an element has at least `HIT_FILTER_MIN_VISIBLE_AREA` square
+ * world-pixels INSIDE the clipped rect, we treat it as "primarily
+ * visible inside" — taps outside the rect won't select it, so a
+ * user can't grab an element from the dim overflow next to it.
+ * Below that threshold the overlap is too small to count as
+ * "visibly present in the clipped area" and we let tap-anywhere
+ * behaviour stand (covers neighbour-piece elements that just
+ * graze the clipped area).
+ *
+ * Absolute area instead of a percentage handles the case where the
+ * element is huge but the clipped area is small — the percentage
+ * rule was missing those because the element's total area dwarfed
+ * the overlap.
+ *
+ * No-op when `focusedPieceRect` is null (no clipped area defined).
+ *
+ * @internal — exposed for tests; not part of the public canvas API.
+ */
+export declare function isHitAllowedInFocus(element: BaseElement, pointX: number, pointY: number, focusedPieceRect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null | undefined): boolean;
+/** Multi-selection drag context */
+interface MultiSelectionDragContext {
+    startX: number;
+    startY: number;
+    elementsStartData: MultiElementStartData[];
+    currentElements?: Map<string, CanvasElement>;
+    currentDelta?: {
+        dx: number;
+        dy: number;
+    };
+    startOBB?: MultiSelectionOBB;
+}
+/** Multi-selection resize context */
+interface MultiSelectionResizeContext {
+    startBounds: {
+        minX: number;
+        maxX: number;
+        minY: number;
+        maxY: number;
+    };
+    anchor: string;
+    elementsStartData: MultiElementStartData[];
+}
+/** Multi-selection rotation context */
+interface MultiSelectionRotationContext {
+    startBounds: {
+        centerX: number;
+        centerY: number;
+    };
+    elementsStartData: MultiElementStartData[];
+    currentRotation: number;
+}
+/**
+ * Augmented InteractionStateMachine type that includes the temporary ad-hoc
+ * properties used during interactions. This avoids `as any` throughout the file.
+ */
+type AugmentedStateMachine = InteractionStateMachine & {
+    _pendingChildSelection?: PendingChildSelection;
+    _pendingTextEditMode?: PendingTextEditMode;
+    _groupDragOriginalElement?: CanvasElement;
+    _multiSelectionDragContext?: MultiSelectionDragContext;
+    _multiSelectionResizeContext?: MultiSelectionResizeContext;
+    _multiSelectionRotationContext?: MultiSelectionRotationContext;
+};
+/** PenTool interface - only the methods needed by interaction handlers */
+interface PenToolLike {
+    isActive(): boolean;
+    canClosePath(x: number, y: number, threshold: number): boolean;
+    startClosing(x: number, y: number): void;
+    startDraggingHandle(): void;
+    addPoint(x: number, y: number): void;
+    isDraggingHandle(): boolean;
+    updateHandle(x: number, y: number): void;
+    setPreviewPoint(x: number, y: number): void;
+    finishDraggingHandle(): void;
+    isClosingPath(): boolean;
+    editPath(element: PathElement): void;
+    finishPath(): void;
+    deleteLastPoint(): void;
+}
+/** CropController interface - mirrors CropModeController methods */
+interface CropControllerLike {
+    handleCropImageDrag(image: BaseElement, context: any, x: number, y: number): {
+        x: number;
+        y: number;
+        cropX: number;
+        cropY: number;
+        cropWidth: number;
+        cropHeight: number;
+    };
+    handleCropBoxResize(image: BaseElement, anchor: string, resizeContext: any, context: any, x: number, y: number): {
+        x: number;
+        y: number;
+        rotation: number;
+        width: number;
+        height: number;
+        cropX: number;
+        cropY: number;
+        cropWidth: number;
+        cropHeight: number;
+        cursor: string;
+    };
+}
+export interface UseCanvasInteractionParams {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
+    repositioningCursorRef: React.MutableRefObject<boolean>;
+    lastClickTimeRef: React.MutableRefObject<number>;
+    clickCountRef: React.MutableRefObject<number>;
+    lastProcessedClickTimeRef: React.MutableRefObject<number>;
+    lastMultiClickTimeRef: React.MutableRefObject<number>;
+    multiClickSelectionRef: React.MutableRefObject<{
+        start: number;
+        end: number;
+        cursor: number;
+    } | null>;
+    skipDragSelectionRef: React.MutableRefObject<boolean>;
+    draggingSelectionHandleRef: React.MutableRefObject<'start' | 'end' | null>;
+    selectionHandlePositionsRef: React.MutableRefObject<{
+        start: {
+            center: {
+                x: number;
+                y: number;
+            };
+            textEdge: {
+                x: number;
+                y: number;
+            };
+        } | null;
+        end: {
+            center: {
+                x: number;
+                y: number;
+            };
+            textEdge: {
+                x: number;
+                y: number;
+            };
+        } | null;
+    }>;
+    lastMousePosRef: React.MutableRefObject<{
+        x: number;
+        y: number;
+    } | null>;
+    dragOriginalElementsRef: React.MutableRefObject<Map<string, CanvasElement> | null>;
+    rotatingElementRef: React.MutableRefObject<CanvasElement | null>;
+    editingChildIdRef: React.MutableRefObject<string | null>;
+    editRichTextRef: React.MutableRefObject<RichText | null>;
+    editModeEnteredAtRef: React.MutableRefObject<number>;
+    multiSelectionGroupBoundsRef: React.MutableRefObject<MultiSelectionGroupBounds | null>;
+    elementsRef: React.MutableRefObject<CanvasElement[]>;
+    MULTI_CLICK_THRESHOLD: number;
+    MULTI_CLICK_DEBOUNCE: number;
+    CLICK_DEDUP_THRESHOLD: number;
+    isEditing: boolean;
+    editText: string;
+    isTouchDevice: boolean;
+    selectionStart: number;
+    selectionEnd: number;
+    isRotating: boolean;
+    isMarqueeSelecting: boolean;
+    isAltKeyPressed: boolean;
+    selectedId: string | null;
+    selectedElement: CanvasElement | undefined;
+    activeChildElement: ChildElement | null;
+    elements: CanvasElement[];
+    multiSelection: string[];
+    multiSelectionOBBRef: React.MutableRefObject<MultiSelectionOBB | null>;
+    zoom: number;
+    paddingOffsetX: number;
+    paddingOffsetY: number;
+    spacingIndicators: SpacingIndicator[];
+    /**
+     * ADR-0060 focused-piece rect (in artboard coords). When set,
+     * elements whose visible-bbox sits primarily inside this rect can
+     * only be hit-tested by pointer positions also inside the rect —
+     * a tap on the dim overflow next to a "focused" element no longer
+     * selects it. Lets users tap dim regions without accidentally
+     * grabbing elements that happen to extend into them.
+     */
+    focusedPieceRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    setCursorPosition: React.Dispatch<React.SetStateAction<number>>;
+    setSelectionStart: React.Dispatch<React.SetStateAction<number>>;
+    setSelectionEnd: React.Dispatch<React.SetStateAction<number>>;
+    setIsRotating: (v: boolean) => void;
+    setRotationStartAngle: (v: number) => void;
+    setCurrentRotation: (v: number) => void;
+    setRotatingElementVersion: React.Dispatch<React.SetStateAction<number>>;
+    setIsAltKeyPressed: (v: boolean) => void;
+    setSnapGuides: (v: SnapGuide[]) => void;
+    setSpacingIndicators: (v: SpacingIndicator[]) => void;
+    setHandlesVersion: React.Dispatch<React.SetStateAction<number>>;
+    setHoverState: (v: Omit<LocalHoverState, 'startTime'>) => void;
+    setElements: React.Dispatch<React.SetStateAction<CanvasElement[]>>;
+    forceUpdate: (v: object) => void;
+    stateMachine: AugmentedStateMachine;
+    transformHandles: TransformHandles;
+    snapSystem: AlignmentSnapSystem;
+    spacingSystem: SpacingSystem;
+    penTool: PenToolLike;
+    cropController: CropControllerLike;
+    onElementUpdate: (element: CanvasElement) => void;
+    executeElementUpdate: (oldElement: CanvasElement | undefined, newElement: CanvasElement) => void;
+    onSelectionChange: (id: string | null) => void;
+    onMultiSelectionChange: (ids: string[]) => void;
+    onRotationStateChange?: (isRotating: boolean) => void;
+    onCropModeEnter?: () => void;
+    updateActiveChild: (child: ChildElement | null) => void;
+    getActiveArtboardElements: () => CanvasElement[];
+    startMarqueeSelection: (x: number, y: number) => void;
+    updateMarqueeSelection: (x: number, y: number, elements: CanvasElement[]) => void;
+    finishMarqueeSelection: (onMultiSelectionChange: (ids: string[]) => void) => void;
+    enterTextEditMode: (element: TextElement, worldX: number, worldY: number) => void;
+    setEditPosition: (pos: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    setEditText: (v: string) => void;
+    setEditRichText: (v: RichText | null) => void;
+    setIsEditing: (v: boolean) => void;
+    setCurrentFormattingStyle: React.Dispatch<React.SetStateAction<CharacterStyle | null>>;
+    getWrappedTextForEditing: (element: TextElement) => string;
+}
+export interface CanvasInteractionResult {
+    handlePointerDown: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handlePointerMove: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handlePointerUp: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handleDoubleClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+}
+export declare function useCanvasInteraction(params: UseCanvasInteractionParams): CanvasInteractionResult;
+export {};

package/dist/components/CanvasEditor/hooks/useCanvasLayout.d.ts

@@ -0,0 +1,50 @@
+import { ArtboardElement } from '../../../core/ArtboardElement.js';
+import { ArtboardManager } from '../../../core/ArtboardManager.js';
+export interface UseCanvasLayoutParams {
+    width: number | undefined;
+    height: number | undefined;
+    zoom: number;
+    viewPadding: number;
+    artboardBorderRadius: number;
+    fixedMargin: number | undefined;
+    fixedMarginX: number | undefined;
+    fixedMarginY: number | undefined;
+    artboards: ArtboardElement[];
+    artboardManager: ArtboardManager;
+    /**
+     * ADR-0060: when present, fit the viewport to this piece (in artboard
+     * / spread coordinates) plus a peek margin so neighbouring pieces
+     * stay visible at the edges. When `null` / `undefined`, the viewport
+     * fits the active artboard (historical behaviour).
+     */
+    focusedPieceRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export interface UseCanvasLayoutReturn {
+    /** Whether the device supports touch input */
+    isTouchDevice: boolean;
+    /** Current canvas dimensions */
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+    /** Ref tracking the last touch/pointer target for iOS Safari blur handling */
+    lastTouchTargetRef: React.RefObject<HTMLElement | null>;
+    /** View padding clamped to [0.1, 1.0] */
+    effectiveViewPadding: number;
+    /** Canvas width including padding/margins, in world space */
+    paddedCanvasWidth: number;
+    /** Canvas height including padding/margins, in world space */
+    paddedCanvasHeight: number;
+    /** Horizontal padding offset in world space */
+    paddingOffsetX: number;
+    /** Vertical padding offset in world space */
+    paddingOffsetY: number;
+    /** Border radius adjusted for current zoom level */
+    zoomInvariantBorderRadius: number;
+}
+export declare function useCanvasLayout({ width, height, zoom, viewPadding, artboardBorderRadius, fixedMargin, fixedMarginX, fixedMarginY, artboards, artboardManager, focusedPieceRect, }: UseCanvasLayoutParams): UseCanvasLayoutReturn;

package/dist/components/CanvasEditor/hooks/useCanvasRenderLoop.d.ts

@@ -0,0 +1,140 @@
+import { default as React } from 'react';
+import { PieceGuidesConfig } from '../../embed/SnowconeCanvas.js';
+import { ArtboardRenderer } from '../../../core/ArtboardRenderer.js';
+import { ArtboardElement } from '../../../core/ArtboardElement.js';
+import { ArtboardManager } from '../../../core/ArtboardManager.js';
+import { TransformHandles } from '../../../core/TransformHandles.js';
+import { InteractionStateMachine } from '../../../core/InteractionStateMachine.js';
+import { TextElement } from '../../../core/TextElement.js';
+import { ImageElement } from '../../../core/ImageElement.js';
+import { GroupElement } from '../../../core/GroupElement.js';
+import { ShapeElement } from '../../../core/ShapeElement.js';
+import { PathElement } from '../../../core/PathElement.js';
+import { SnapGuide, SpacingIndicator, RichText } from '../../../types/index.js';
+import { LocalHoverState } from '../types/index.js';
+import { MultiSelectionOBB, MultiSelectionGroupBounds } from '../renderers/index.js';
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+type ChildElement = TextElement | ImageElement | ShapeElement | PathElement | GroupElement;
+/** PenTool interface - only the methods used by the render loop */
+interface PenToolLike {
+    isActive(): boolean;
+    renderPreview(ctx: CanvasRenderingContext2D, element: PathElement): void;
+}
+export interface UseCanvasRenderLoopParams {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    elements: CanvasElement[];
+    elementsByArtboard: Map<string | null, CanvasElement[]>;
+    artboards: ArtboardElement[];
+    artboardManager: ArtboardManager;
+    artboardRenderer: ArtboardRenderer;
+    selectedId: string | null;
+    selectedElement: CanvasElement | undefined;
+    activeChildElement: ChildElement | null;
+    editingChildIdRef: React.MutableRefObject<string | null>;
+    transformHandles: TransformHandles;
+    stateMachine: InteractionStateMachine;
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+    paddedCanvasWidth: number;
+    paddedCanvasHeight: number;
+    paddingOffsetX: number;
+    paddingOffsetY: number;
+    zoom: number;
+    zoomInvariantBorderRadius: number;
+    effectiveViewPadding: number;
+    showRotationHandle: boolean;
+    isRotating: boolean;
+    currentRotation: number;
+    hoverState: LocalHoverState;
+    isEditing: boolean;
+    editText: string;
+    editRichText: RichText | null;
+    cursorPosition: number;
+    selectionStart: number;
+    selectionEnd: number;
+    cursorOpacityRef: React.MutableRefObject<number>;
+    cursorStartTimeRef: React.MutableRefObject<number>;
+    isTouchDevice: boolean;
+    selectionHandlePositionsRef: React.MutableRefObject<{
+        start: {
+            center: {
+                x: number;
+                y: number;
+            };
+            textEdge: {
+                x: number;
+                y: number;
+            };
+        } | null;
+        end: {
+            center: {
+                x: number;
+                y: number;
+            };
+            textEdge: {
+                x: number;
+                y: number;
+            };
+        } | null;
+    }>;
+    multiClickSelectionRef: React.MutableRefObject<{
+        start: number;
+        end: number;
+        cursor: number;
+    } | null>;
+    lastMultiClickTimeRef: React.MutableRefObject<number>;
+    MULTI_CLICK_DEBOUNCE: number;
+    snapGuides: SnapGuide[];
+    spacingIndicators: SpacingIndicator[];
+    isAltKeyPressed: boolean;
+    multiSelection: string[];
+    multiSelectionOBBRef: React.MutableRefObject<MultiSelectionOBB | null>;
+    multiSelectionGroupBoundsRef: React.MutableRefObject<MultiSelectionGroupBounds | null>;
+    isMarqueeSelecting: boolean;
+    marqueeStart: {
+        x: number;
+        y: number;
+    };
+    marqueeEnd: {
+        x: number;
+        y: number;
+    };
+    marqueePreviewSelection: string[];
+    penTool: PenToolLike;
+    handlesVersion: number;
+    hideHandles: boolean;
+    resolvedTheme: string;
+    cursorAnimationFrame: number;
+    renderVersion: number;
+    /** ADR-0054: piece-guide overlays drawn after elements, before
+     *  selection UI. Coordinates are in artboard-local px. */
+    pieceGuides?: PieceGuidesConfig;
+    /** ADR-0060: id of the currently focused piece (or null for spread
+     *  / single-piece). Forwarded to `renderPieceGuides` so non-focused
+     *  pieces' guide chrome dims to keep visual focus on the active
+     *  piece without losing the structural context of neighbours. */
+    focusedPieceId?: string | null;
+    /** ADR-0060: animated rect of the focused piece (in artboard
+     *  coords). Drives the post-pass that dims artwork outside the
+     *  focused piece. Decoupled from `focusedPieceId` so the parent
+     *  can interpolate the rect during piece switches without
+     *  changing which piece is "logically" focused. Falls back to
+     *  the static rect of `focusedPieceId` when not provided. */
+    focusedPieceRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+/**
+ * Hook that manages the main canvas render loop.
+ *
+ * Uses a dirty flag + requestAnimationFrame pattern to prevent double-renders
+ * when multiple state updates happen in the same frame. Dependencies mark the
+ * render as dirty, and a single RAF loop performs the actual render only when needed.
+ */
+export declare function useCanvasRenderLoop(params: UseCanvasRenderLoopParams): void;
+export {};

package/dist/components/CanvasEditor/hooks/useCropMode.d.ts

@@ -0,0 +1,4 @@
+import { CropModeController } from '../../../core/CropModeController.js';
+export declare function useCropMode(): {
+    cropController: CropModeController;
+};

package/dist/components/CanvasEditor/hooks/useHoverState.d.ts

@@ -0,0 +1,9 @@
+import { LocalHoverState } from '../types/index.js';
+interface UseHoverStateProps {
+    onHoverChange?: (elementId: string | null) => void;
+}
+export declare function useHoverState({ onHoverChange }: UseHoverStateProps): {
+    hoverState: LocalHoverState;
+    setHoverState: (newState: Omit<LocalHoverState, "startTime">) => void;
+};
+export {};

package/dist/components/CanvasEditor/hooks/useInteractionState.d.ts

@@ -0,0 +1,23 @@
+import { SnapGuide, SpacingIndicator } from '../../../types/index.js';
+export interface UseInteractionStateReturn {
+    /** Active snap guide lines */
+    snapGuides: SnapGuide[];
+    setSnapGuides: React.Dispatch<React.SetStateAction<SnapGuide[]>>;
+    /** Spacing measurement indicators (shown with Alt key) */
+    spacingIndicators: SpacingIndicator[];
+    setSpacingIndicators: React.Dispatch<React.SetStateAction<SpacingIndicator[]>>;
+    /** Whether the Alt key is currently pressed */
+    isAltKeyPressed: boolean;
+    setIsAltKeyPressed: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Whether the user is currently rotating an element */
+    isRotating: boolean;
+    setIsRotating: React.Dispatch<React.SetStateAction<boolean>>;
+    /** The angle at which rotation started */
+    setRotationStartAngle: React.Dispatch<React.SetStateAction<number>>;
+    /** Current rotation angle during a rotation gesture */
+    currentRotation: number;
+    setCurrentRotation: React.Dispatch<React.SetStateAction<number>>;
+    /** Version counter to trigger re-renders when rotating element updates */
+    setRotatingElementVersion: React.Dispatch<React.SetStateAction<number>>;
+}
+export declare function useInteractionState(): UseInteractionStateReturn;

package/dist/components/CanvasEditor/hooks/useKeyboardHandlers.d.ts

@@ -0,0 +1,16 @@
+import { PenToolManager } from '../../../core/PenToolManager.js';
+import { TextElement } from '../../../core/TextElement.js';
+import { ImageElement } from '../../../core/ImageElement.js';
+import { GroupElement } from '../../../core/GroupElement.js';
+interface UseKeyboardHandlersProps {
+    penTool: PenToolManager;
+    selectedElement: TextElement | ImageElement | GroupElement | null | undefined;
+    executeElementUpdate: (oldElement: TextElement | ImageElement | GroupElement | undefined, newElement: TextElement | ImageElement | GroupElement) => void;
+    setHandlesVersion: React.Dispatch<React.SetStateAction<number>>;
+    isEditing: boolean;
+}
+export declare function useKeyboardHandlers({ penTool, selectedElement, executeElementUpdate, setHandlesVersion, isEditing, }: UseKeyboardHandlersProps): {
+    isAltKeyPressed: boolean;
+    setIsAltKeyPressed: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+};
+export {};

package/dist/components/CanvasEditor/hooks/useMarqueeSelection.d.ts

@@ -0,0 +1,22 @@
+import { TextElement } from '../../../core/TextElement.js';
+import { ImageElement } from '../../../core/ImageElement.js';
+import { GroupElement } from '../../../core/GroupElement.js';
+import { ShapeElement } from '../../../core/ShapeElement.js';
+import { PathElement } from '../../../core/PathElement.js';
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+export declare function useMarqueeSelection(): {
+    isMarqueeSelecting: boolean;
+    marqueeStart: {
+        x: number;
+        y: number;
+    };
+    marqueeEnd: {
+        x: number;
+        y: number;
+    };
+    marqueePreviewSelection: string[];
+    startMarqueeSelection: (x: number, y: number) => void;
+    updateMarqueeSelection: (x: number, y: number, elements: CanvasElement[]) => void;
+    finishMarqueeSelection: (onMultiSelectionChange: (ids: string[]) => void) => void;
+};
+export {};

package/dist/components/CanvasEditor/hooks/useMultiSelection.d.ts

@@ -0,0 +1,5 @@
+import { MultiSelectionOBB, MultiSelectionGroupBounds } from '../renderers/index.js';
+export declare function useMultiSelection(multiSelection: string[]): {
+    multiSelectionGroupBoundsRef: import('react').RefObject<MultiSelectionGroupBounds | null>;
+    multiSelectionOBBRef: import('react').RefObject<MultiSelectionOBB | null>;
+};

package/dist/components/CanvasEditor/hooks/usePenTool.d.ts

@@ -0,0 +1,10 @@
+import { PenToolManager } from '../../../core/PenToolManager.js';
+import { BaseElement } from '../../../core/BaseElement.js';
+interface UsePenToolProps {
+    selectedElement: BaseElement | null | undefined;
+}
+export declare function usePenTool({ selectedElement }: UsePenToolProps): {
+    penTool: PenToolManager;
+    penCursor: string;
+};
+export {};

package/dist/components/CanvasEditor/hooks/useRenderState.d.ts

@@ -0,0 +1,31 @@
+/**
+ * useRenderState - Composite hook for render versioning and triggers
+ *
+ * Groups state that controls when the canvas re-renders:
+ * - renderVersion: incremented when external events (image loads) require a re-render
+ * - handlesVersion: incremented when transform handles need recalculation
+ * - forceUpdate: generic trigger for component re-render
+ * - cursorAnimationFrame: drives text cursor blink animation
+ * - Image load subscription: listens for async image loads to trigger re-renders
+ */
+export interface UseRenderStateParams {
+    /** Current elements array, used to check if loaded image belongs to an active element */
+    elements: Array<{
+        id: string;
+    }>;
+}
+export interface UseRenderStateReturn {
+    /** Version counter for render-triggering events */
+    renderVersion: number;
+    /** Force a render by incrementing the render version */
+    forceRender: () => void;
+    /** Version counter for transform handle recalculation */
+    handlesVersion: number;
+    setHandlesVersion: React.Dispatch<React.SetStateAction<number>>;
+    /** Generic force re-render trigger */
+    forceUpdate: React.Dispatch<React.SetStateAction<object>>;
+    /** Frame counter for cursor blink animation */
+    cursorAnimationFrame: number;
+    setCursorAnimationFrame: React.Dispatch<React.SetStateAction<number>>;
+}
+export declare function useRenderState({ elements }: UseRenderStateParams): UseRenderStateReturn;

package/dist/components/CanvasEditor/hooks/useSnapAndSpacing.d.ts

@@ -0,0 +1,42 @@
+import { AlignmentSnapSystem } from '../../../core/AlignmentSnapSystem.js';
+import { SpacingSystem } from '../../../core/SpacingSystem.js';
+import { GroupElement } from '../../../core/GroupElement.js';
+import { SnapGuide, SpacingIndicator } from '../../../types/index.js';
+import { TextElement } from '../../../core/TextElement.js';
+import { ImageElement } from '../../../core/ImageElement.js';
+import { ShapeElement } from '../../../core/ShapeElement.js';
+import { PathElement } from '../../../core/PathElement.js';
+import { InteractionStateMachine } from '../../../core/InteractionStateMachine.js';
+/** Elements that can be on the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+interface UseSnapAndSpacingProps {
+    isAltKeyPressed: boolean;
+    stateMachine: InteractionStateMachine;
+    getActiveArtboardElements: () => CanvasElement[];
+    /**
+     * ADR-0060: focused piece rect in spread mode. When set, the snap
+     * system also offers the piece's corners / edges / center as snap
+     * targets, so dragging an element to the *focused piece* feels like
+     * centering inside the visible area instead of the full spread.
+     */
+    focusedPieceRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export declare function useSnapAndSpacing({ isAltKeyPressed, stateMachine, getActiveArtboardElements, focusedPieceRect, }: UseSnapAndSpacingProps): {
+    snapSystem: AlignmentSnapSystem;
+    spacingSystem: SpacingSystem;
+    snapGuides: SnapGuide[];
+    setSnapGuides: import('react').Dispatch<import('react').SetStateAction<SnapGuide[]>>;
+    spacingIndicators: SpacingIndicator[];
+    setSpacingIndicators: import('react').Dispatch<import('react').SetStateAction<SpacingIndicator[]>>;
+    lastMousePosRef: import('react').RefObject<{
+        x: number;
+        y: number;
+    } | null>;
+    clearSnapAndSpacing: () => void;
+};
+export {};