@snowcone-app/canvas 0.1.0

package/dist/components/ArtboardDistressPanel.d.ts

@@ -0,0 +1,7 @@
+import { ArtboardDistressTexture } from '../types/index.js';
+interface ArtboardDistressPanelProps {
+    distressTexture?: ArtboardDistressTexture;
+    onChange: (distressTexture: ArtboardDistressTexture | undefined) => void;
+}
+declare const ArtboardDistressPanel: ({ distressTexture, onChange }: ArtboardDistressPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ArtboardDistressPanel;

package/dist/components/ArtboardImageMaskPanel.d.ts

@@ -0,0 +1,7 @@
+import { ArtboardImageMask } from '../types/index.js';
+interface ArtboardImageMaskPanelProps {
+    imageMask?: ArtboardImageMask;
+    onChange: (imageMask: ArtboardImageMask | undefined) => void;
+}
+declare const ArtboardImageMaskPanel: ({ imageMask, onChange }: ArtboardImageMaskPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ArtboardImageMaskPanel;

package/dist/components/ArtboardPropertiesToolbar.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ArtboardElement } from '../core/ArtboardElement';
+interface ArtboardPropertiesToolbarProps {
+    artboard: ArtboardElement;
+    artboards: ArtboardElement[];
+    onArtboardUpdate: (artboard: ArtboardElement) => void;
+    onRenameArtboard: (artboardId: string, newName: string) => void;
+    onDeleteArtboard: (artboardId: string) => void;
+    artboardScreenBounds?: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        bottom: number;
+        centerX: number;
+    };
+}
+declare const ArtboardPropertiesToolbar: React.FC<ArtboardPropertiesToolbarProps>;
+export default ArtboardPropertiesToolbar;

package/dist/components/ArtboardToolbar.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ArtboardElement } from '../core/ArtboardElement';
+interface ArtboardToolbarProps {
+    artboards: ArtboardElement[];
+    activeArtboardId: string | null;
+    onCreateArtboard: (width?: number, height?: number) => void;
+    onSelectArtboard: (artboardId: string) => void;
+}
+declare const ArtboardToolbar: React.FC<ArtboardToolbarProps>;
+export default ArtboardToolbar;

package/dist/components/BackButton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * BackButton - Reusable back button for toolbar menus
+ */
+export declare function BackButton({ onClick }: {
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export default BackButton;

package/dist/components/BackgroundPickerDropdown.d.ts

@@ -0,0 +1,11 @@
+import { ArtboardBackgroundType } from '../types/index';
+export interface BackgroundPickerDropdownProps {
+    backgroundType: ArtboardBackgroundType;
+    backgroundColor: string;
+    backgroundTexture?: string;
+    onBackgroundTypeChange: (type: ArtboardBackgroundType) => void;
+    onColorChange: (color: string) => void;
+    onTextureChange: (textureId: string) => void;
+}
+declare const BackgroundPickerDropdown: import('react').MemoExoticComponent<({ backgroundType, backgroundColor, backgroundTexture, onBackgroundTypeChange, onColorChange, onTextureChange, }: BackgroundPickerDropdownProps) => import("react/jsx-runtime").JSX.Element>;
+export default BackgroundPickerDropdown;

package/dist/components/BackgroundSwitcher.d.ts

@@ -0,0 +1,7 @@
+import { TShirtColor } from '../presets/tshirt-presets.js';
+interface BackgroundSwitcherProps {
+    selectedColorId: string | null;
+    onColorChange: (color: TShirtColor | null) => void;
+}
+declare const BackgroundSwitcher: ({ selectedColorId, onColorChange }: BackgroundSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export default BackgroundSwitcher;

package/dist/components/CanvasA11yFallback.d.ts

@@ -0,0 +1,62 @@
+/**
+ * ADR-0064 §7 — canvas accessibility fallback DOM (v1 stub).
+ *
+ * A `<canvas>` element is opaque to assistive technology. The WAI's
+ * "Accessibility of <canvas>" guidance has three patterns: fallback
+ * DOM, keyboard model, live region. v1 ships the **fallback DOM** and
+ * **live region** patterns; the keyboard manipulation model is deferred
+ * to a P2 follow-up (per ADR §6 + §7 deferral note).
+ *
+ * Usage — mount alongside or inside the canvas region:
+ *
+ *   <CanvasA11yFallback
+ *     artworks={artworks.map(a => ({
+ *       id: a.id,
+ *       label: `${a.title} design`,
+ *       position: a.position,
+ *       rotation: a.rotation,
+ *       width: a.width,
+ *     }))}
+ *     announcement={lastChange}
+ *   />
+ *
+ * The component renders a visually-hidden DOM so AT users perceive
+ * what's on the canvas. `prefers-reduced-motion` is honored by hiding
+ * the live region during high-frequency interactions (caller decides
+ * when to update `announcement`).
+ *
+ * Why this is a stub: AT users can *perceive* the canvas state but
+ * cannot *manipulate* it. The customer who can browse the marketplace
+ * and reorder a pre-made design has a viable path through the product;
+ * the customer who needs to manipulate the canvas itself is served in
+ * the P2 follow-up. The accessibility statement (ADR-0065 §6.5) is
+ * required to disclose this gap honestly.
+ */
+export interface CanvasA11yArtwork {
+    id: string;
+    /** Short human description: "Sun design", "Custom photo", etc. */
+    label: string;
+    /** "upper-left" | "centered" | { x, y } in canvas coords. */
+    position?: string | {
+        x: number;
+        y: number;
+    };
+    /** Degrees, clockwise positive. */
+    rotation?: number;
+    /** Canvas pixels. */
+    width?: number;
+}
+export interface CanvasA11yFallbackProps {
+    artworks: CanvasA11yArtwork[];
+    /**
+     * Most-recent state change to announce. Caller debounces; the
+     * component throttles further to prevent screen-reader flooding
+     * (1 announcement per 1.5s).
+     */
+    announcement?: string;
+    /**
+     * Optional landmark heading. Default = "Design canvas".
+     */
+    heading?: string;
+}
+export declare function CanvasA11yFallback({ artworks, announcement, heading, }: CanvasA11yFallbackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CanvasEditor/CanvasRendererComponent.d.ts

@@ -0,0 +1,51 @@
+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 { ArtboardElement } from '../../core/ArtboardElement.js';
+import { ArtboardManager } from '../../core/ArtboardManager.js';
+export interface CanvasRendererComponentProps {
+    /** Elements to render */
+    elements: (TextElement | ImageElement | GroupElement)[];
+    /** Artboards in the canvas */
+    artboards: ArtboardElement[];
+    /** Artboard manager instance */
+    artboardManager: ArtboardManager;
+    /** Canvas width (defaults to artboard width or 1000) */
+    width?: number;
+    /** Canvas height (defaults to artboard height or 1000) */
+    height?: number;
+    /** Zoom level (defaults to 1.0) */
+    zoom?: number;
+    /** X offset for canvas positioning (defaults to 0) */
+    offsetX?: number;
+    /** Y offset for canvas positioning (defaults to 0) */
+    offsetY?: number;
+    /** Canvas background color (CSS custom property, defaults to --color-canvas-bg) */
+    canvasBgColor?: string;
+    /** Whether to show the canvas background or render transparent (defaults to true) */
+    showBackground?: boolean;
+    /** Optional callback when render completes */
+    onRender?: () => void;
+    /** Optional ref to the canvas element */
+    canvasRef?: React.RefObject<HTMLCanvasElement | null>;
+}
+export interface CanvasRendererComponentHandle {
+    /** Get the canvas element */
+    getCanvas: () => HTMLCanvasElement | null;
+    /** Force a re-render */
+    forceRender: () => void;
+    /** Get current zoom level */
+    getZoom: () => number;
+}
+/**
+ * CanvasRendererComponent - Pure rendering component
+ *
+ * Renders artboards and elements to a canvas with no interaction or UI chrome.
+ * Perfect for:
+ * - Embedded views
+ * - Read-only previews
+ * - Export rendering
+ * - Custom layouts
+ */
+export declare const CanvasRendererComponent: React.ForwardRefExoticComponent<CanvasRendererComponentProps & React.RefAttributes<CanvasRendererComponentHandle>>;

package/dist/components/CanvasEditor/handlers/cropModeHandlers.d.ts

@@ -0,0 +1,114 @@
+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 { InteractionStateMachine } from '../../../core/InteractionStateMachine.js';
+import { TransformHandles } from '../../../core/TransformHandles.js';
+import { HandleInfo } from '../../../types/index.js';
+/** Return type from ImageElement.hitTestCropHandle() */
+interface CropHandleHitResult {
+    type: 'corner' | 'edge';
+    anchor: string;
+    worldX: number;
+    worldY: number;
+}
+/** Elements that can be on the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+/** Elements that can be children of a group (including nested groups) */
+type ChildElement = TextElement | ImageElement | ShapeElement | PathElement | GroupElement;
+export interface CropModeContext {
+    croppingImage: ImageElement;
+    croppingChild: ImageElement | null;
+    croppingChildIndex: number;
+    isChildInGroup: boolean;
+}
+export interface FindCroppingImageParams {
+    selectedElement: CanvasElement | null;
+    activeChildElement: ChildElement | null;
+}
+/**
+ * Finds the image currently in crop mode (either standalone or child in group)
+ */
+export declare function findCroppingImage(params: FindCroppingImageParams): CropModeContext | null;
+export type CropModeHitResult = {
+    type: 'crop-handle';
+    handle: CropHandleHitResult;
+} | {
+    type: 'image-handle';
+    handle: HandleInfo;
+} | {
+    type: 'image-drag';
+} | {
+    type: 'exit-crop';
+} | {
+    type: 'none';
+};
+export interface CropModeHitTestParams {
+    x: number;
+    y: number;
+    cropContext: CropModeContext;
+    transformHandles: TransformHandles;
+    zoom?: number;
+}
+/**
+ * Hit test for crop mode interactions
+ * Priority: crop handles > image handles > image drag > exit crop mode
+ */
+export declare function hitTestCropMode(params: CropModeHitTestParams): CropModeHitResult;
+export interface HandleCropHandleClickParams {
+    cropContext: CropModeContext;
+    cropHandle: CropHandleHitResult;
+    x: number;
+    y: number;
+    selectedElement: CanvasElement | null;
+    activeChildElement: ChildElement | null;
+    stateMachine: InteractionStateMachine;
+}
+/**
+ * Handles clicking on a crop box handle (resize crop area)
+ */
+export declare function handleCropHandleClick(params: HandleCropHandleClickParams): void;
+export interface HandleImageHandleClickParams {
+    cropContext: CropModeContext;
+    imageHandle: HandleInfo;
+    x: number;
+    y: number;
+    selectedElement: CanvasElement | null;
+    activeChildElement: ChildElement | null;
+    stateMachine: InteractionStateMachine;
+}
+/**
+ * Handles clicking on an image corner handle (scale image)
+ */
+export declare function handleImageHandleClick(params: HandleImageHandleClickParams): void;
+export interface HandleImageDragClickParams {
+    cropContext: CropModeContext;
+    x: number;
+    y: number;
+    selectedElement: CanvasElement | null;
+    activeChildElement: ChildElement | null;
+    stateMachine: InteractionStateMachine;
+    dragOriginalElementsRef: React.MutableRefObject<Map<string, CanvasElement> | null>;
+    setHoverState: (state: {
+        type: null;
+        data: null;
+    }) => void;
+}
+/**
+ * Handles clicking inside the image (drag image within crop)
+ */
+export declare function handleImageDragClick(params: HandleImageDragClickParams): void;
+export interface ExitCropModeParams {
+    cropContext: CropModeContext;
+    selectedElement: CanvasElement | null;
+    onElementUpdate: (element: CanvasElement) => void;
+    transformHandles: TransformHandles;
+    updateActiveChild: (child: ChildElement | null) => void;
+    zoom: number;
+}
+/**
+ * Exits crop mode when clicking outside the image
+ */
+export declare function exitCropMode(params: ExitCropModeParams): void;
+export {};

package/dist/components/CanvasEditor/handlers/groupChildHandlers.d.ts

@@ -0,0 +1,65 @@
+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 { InteractionStateMachine } from '../../../core/InteractionStateMachine.js';
+import { TransformHandles } from '../../../core/TransformHandles.js';
+import { LocalHoverState } from '../types/index.js';
+/** Elements that can be on the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+/** Elements that can be children of a group (including nested groups) */
+type ChildElement = TextElement | ImageElement | ShapeElement | PathElement | GroupElement;
+export interface HandleSiblingClickParams {
+    x: number;
+    y: number;
+    activeChildElement: ChildElement;
+    selectedElement: GroupElement;
+    updateActiveChild: (child: ChildElement | null) => void;
+    transformHandles: TransformHandles;
+    setHandlesVersion: React.Dispatch<React.SetStateAction<number>>;
+    stateMachine: InteractionStateMachine;
+    dragOriginalElementsRef: React.MutableRefObject<Map<string, CanvasElement> | null>;
+    setHoverState: (state: Omit<LocalHoverState, 'startTime'>) => void;
+    forceUpdate: (value: Record<string, unknown>) => void;
+    zoom: number;
+}
+/**
+ * Handles clicking on a sibling element when in active child mode
+ * Selects the sibling and starts drag if clicked
+ * Returns true if a sibling was clicked, false otherwise
+ */
+export declare function handleSiblingClick(params: HandleSiblingClickParams): boolean;
+export interface ExitActiveChildModeParams {
+    updateActiveChild: (child: ChildElement | null) => void;
+    selectedElement: CanvasElement | null;
+    transformHandles: TransformHandles;
+    setHandlesVersion: React.Dispatch<React.SetStateAction<number>>;
+    zoom: number;
+}
+/**
+ * Exits active child editing mode
+ * Called when clicking outside all children in a group
+ */
+export declare function exitActiveChildMode(params: ExitActiveChildModeParams): void;
+export interface HandleElementSelectionParams {
+    x: number;
+    y: number;
+    shiftKey: boolean;
+    activeArtboardElements: CanvasElement[];
+    selectedElement: CanvasElement | null;
+    multiSelection: string[];
+    onSelectionChange: (id: string | null) => void;
+    onMultiSelectionChange: (ids: string[]) => void;
+    stateMachine: InteractionStateMachine;
+    dragOriginalElementsRef: React.MutableRefObject<Map<string, CanvasElement> | null>;
+    setHoverState: (state: Omit<LocalHoverState, 'startTime'>) => void;
+    forceUpdate: (value: Record<string, unknown>) => void;
+}
+/**
+ * Handles clicking on elements in the canvas for selection
+ * Supports shift-click multi-selection and normal selection
+ * Returns true if an element was clicked, false otherwise
+ */
+export declare function handleElementSelection(params: HandleElementSelectionParams): boolean;
+export {};

package/dist/components/CanvasEditor/handlers/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CanvasEditor Interaction Handlers
+ * Barrel export for all handler utilities
+ */
+export { hitTestMultiSelection, startMultiSelectionResize, startMultiSelectionRotate, startMultiSelectionDrag, } from './multiSelectionHandlers.js';
+export type { MultiSelectionHitResult, MultiSelectionHitTestParams, StartMultiSelectionResizeParams, StartMultiSelectionRotateParams, StartMultiSelectionDragParams, } from './multiSelectionHandlers.js';
+export { findCroppingImage, hitTestCropMode, handleCropHandleClick, handleImageHandleClick, handleImageDragClick, exitCropMode, } from './cropModeHandlers.js';
+export type { CropModeContext, CropModeHitResult, FindCroppingImageParams, CropModeHitTestParams, HandleCropHandleClickParams, HandleImageHandleClickParams, HandleImageDragClickParams, ExitCropModeParams, } from './cropModeHandlers.js';
+export { handleSiblingClick, exitActiveChildMode, handleElementSelection, } from './groupChildHandlers.js';
+export type { HandleSiblingClickParams, ExitActiveChildModeParams, HandleElementSelectionParams, } from './groupChildHandlers.js';

package/dist/components/CanvasEditor/handlers/multiSelectionHandlers.d.ts

@@ -0,0 +1,86 @@
+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 { InteractionStateMachine } from '../../../core/InteractionStateMachine.js';
+import { MultiSelectionGroupBounds } from '../renderers/index.js';
+import { LocalHoverState } from '../types/index.js';
+/** Elements that can be on the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+export type MultiSelectionHitResult = {
+    type: 'corner-handle';
+    anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    corner: {
+        x: number;
+        y: number;
+    };
+} | {
+    type: 'rotation-handle';
+} | {
+    type: 'bounds-drag';
+} | {
+    type: 'none';
+};
+export interface MultiSelectionHitTestParams {
+    x: number;
+    y: number;
+    bounds: MultiSelectionGroupBounds;
+    multiSelection: string[];
+    elements: CanvasElement[];
+    zoom?: number;
+}
+/**
+ * Hit test for multi-selection interactions
+ * Returns what was clicked: corner handle, rotation handle, bounds drag area, or nothing
+ */
+export declare function hitTestMultiSelection(params: MultiSelectionHitTestParams): MultiSelectionHitResult;
+export interface StartMultiSelectionResizeParams {
+    multiSelection: string[];
+    elements: CanvasElement[];
+    bounds: MultiSelectionGroupBounds;
+    anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    corner: {
+        x: number;
+        y: number;
+    };
+    x: number;
+    y: number;
+    stateMachine: InteractionStateMachine;
+}
+/**
+ * Starts a resize operation on multi-selection
+ * Sets up state machine context for multi-selection resize
+ */
+export declare function startMultiSelectionResize(params: StartMultiSelectionResizeParams): boolean;
+export interface StartMultiSelectionRotateParams {
+    multiSelection: string[];
+    elements: CanvasElement[];
+    bounds: MultiSelectionGroupBounds;
+    x: number;
+    y: number;
+    stateMachine: InteractionStateMachine;
+    setIsRotating: (value: boolean) => void;
+    setRotationStartAngle: (angle: number) => void;
+    setCurrentRotation: (rotation: number) => void;
+}
+/**
+ * Starts a rotation operation on multi-selection
+ * Sets up state machine context for multi-selection rotation
+ */
+export declare function startMultiSelectionRotate(params: StartMultiSelectionRotateParams): boolean;
+export interface StartMultiSelectionDragParams {
+    multiSelection: string[];
+    elements: CanvasElement[];
+    x: number;
+    y: number;
+    stateMachine: InteractionStateMachine;
+    dragOriginalElementsRef: React.MutableRefObject<Map<string, CanvasElement> | null>;
+    setHoverState: (state: Omit<LocalHoverState, 'startTime'>) => void;
+}
+/**
+ * Starts a drag operation on multi-selection
+ * Sets up state machine context for multi-selection group drag
+ */
+export declare function startMultiSelectionDrag(params: StartMultiSelectionDragParams): boolean;
+export {};

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

@@ -0,0 +1,20 @@
+import { ClipShape } from '../../../types/index.js';
+import { OverlayPiece, PieceGuide } from '../../VisualGuideOverlay.js';
+/**
+ * Build the artboard's `composite-path` clip shape from a piece-guide
+ * bundle. Returns `undefined` when the bundle isn't fully path-kind —
+ * the renderer falls back to its rectangular / rounded-rect path then.
+ *
+ * - When `focusedPieceId` is set and matches one of the pieces, the clip
+ *   narrows to just that piece's silhouette. Other pieces are excluded
+ *   so element rendering, the Pass-1 overflow-dim cutout, and Pass-2
+ *   per-element clipping all align on the same shape — only the focused
+ *   piece gets artwork painted into it. (Companion behaviour in
+ *   `PieceGuideRenderer` skips non-focused pieces' chrome too.)
+ * - When `focusedPieceId` is null, the clip is the union of every
+ *   piece (spread mode).
+ *
+ * Pure function — extracted from `useCanvasRenderLoop.ts` to make the
+ * filtering + rotation/swap math directly unit-testable.
+ */
+export declare function buildSpreadClipShape(pieces: OverlayPiece[], guides: Record<string, PieceGuide> | undefined, focusedPieceId: string | null | undefined): ClipShape | undefined;

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

@@ -0,0 +1,24 @@
+/**
+ * Barrel export for CanvasEditor hooks
+ */
+export { useKeyboardHandlers } from './useKeyboardHandlers.js';
+export { useMarqueeSelection } from './useMarqueeSelection.js';
+export { useSnapAndSpacing } from './useSnapAndSpacing.js';
+export { usePenTool } from './usePenTool.jsx';
+export { useActiveChild } from './useActiveChild.js';
+export { useHoverState } from './useHoverState.js';
+export { useCropMode } from './useCropMode.js';
+export { useMultiSelection } from './useMultiSelection.js';
+export { useTextEditing, type TextEditingHandle } from './useTextEditing.js';
+export { useCanvasLayout } from './useCanvasLayout.js';
+export type { UseCanvasLayoutParams, UseCanvasLayoutReturn } from './useCanvasLayout.js';
+export { useInteractionState } from './useInteractionState.js';
+export type { UseInteractionStateReturn } from './useInteractionState.js';
+export { useRenderState } from './useRenderState.js';
+export type { UseRenderStateParams, UseRenderStateReturn } from './useRenderState.js';
+export { useCanvasRenderLoop } from './useCanvasRenderLoop.js';
+export type { UseCanvasRenderLoopParams } from './useCanvasRenderLoop.js';
+export { useCanvasInteraction } from './useCanvasInteraction.js';
+export type { UseCanvasInteractionParams, CanvasInteractionResult } from './useCanvasInteraction.js';
+export { useTextEditingHandlers } from './useTextEditingHandlers.js';
+export type { UseTextEditingHandlersParams, TextEditingHandlersResult } from './useTextEditingHandlers.js';

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

@@ -0,0 +1,23 @@
+import { GroupElement } from '../../../core/GroupElement.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 { TransformHandles } from '../../../core/TransformHandles.js';
+/** Elements that can be on the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+/** Elements that can be children of a group (including nested groups) */
+type ChildElement = TextElement | ImageElement | ShapeElement | PathElement | GroupElement;
+interface UseActiveChildProps {
+    elements: CanvasElement[];
+    selectedElement: CanvasElement | null | undefined;
+    transformHandles: TransformHandles;
+    onActiveChildChange?: (child: CanvasElement | null) => void;
+}
+export declare function useActiveChild({ elements, selectedElement, transformHandles, onActiveChildChange, }: UseActiveChildProps): {
+    activeChildElement: ChildElement | null;
+    setActiveChildElement: import('react').Dispatch<import('react').SetStateAction<ChildElement | null>>;
+    updateActiveChild: (child: ChildElement | null) => void;
+    editingChildIdRef: import('react').RefObject<string | null>;
+};
+export {};

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

@@ -0,0 +1,17 @@
+/**
+ * useAnimatedFocusRect — smoothly interpolates a focus rect when the
+ * target changes. Used by ADR-0060 multi-piece focus to "dolly"
+ * between pieces (Back ↔ Spine ↔ Front) instead of snapping.
+ *
+ * Snaps (no animation) on first mount and when target becomes null,
+ * since there's no meaningful "from" value in those cases. Cancels
+ * the in-flight tween on every target change so rapid switches feel
+ * responsive instead of queueing.
+ */
+export interface FocusRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function useAnimatedFocusRect(target: FocusRect | null, durationMs?: number): FocusRect | null;