@snowcone-app/canvas 0.1.0

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

@@ -0,0 +1,56 @@
+import { Ref } from 'react';
+import { RichText, CharacterStyle } from '../../../types/index.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';
+/** Elements that can be selected in the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+export interface TextEditingHandle {
+    applyTextFormatting: (style: CharacterStyle) => void;
+    toggleFormattingProperty: (property: 'bold' | 'italic' | 'underline' | 'strikethrough') => void;
+    isEditingText: () => boolean;
+    getSelectionStyle: () => CharacterStyle | null;
+}
+interface UseTextEditingProps {
+    selectedElement: CanvasElement | null | undefined;
+    ref?: Ref<TextEditingHandle>;
+}
+export declare function useTextEditing({ selectedElement, ref }: UseTextEditingProps): {
+    isEditing: boolean;
+    setIsEditing: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    editText: string;
+    setEditText: import('react').Dispatch<import('react').SetStateAction<string>>;
+    editPosition: {
+        x: number;
+        y: number;
+        width: number;
+        height?: number;
+    };
+    setEditPosition: import('react').Dispatch<import('react').SetStateAction<{
+        x: number;
+        y: number;
+        width: number;
+        height?: number;
+    }>>;
+    cursorPosition: number;
+    setCursorPosition: import('react').Dispatch<import('react').SetStateAction<number>>;
+    selectionStart: number;
+    setSelectionStart: import('react').Dispatch<import('react').SetStateAction<number>>;
+    selectionEnd: number;
+    setSelectionEnd: import('react').Dispatch<import('react').SetStateAction<number>>;
+    cursorOpacityRef: import('react').RefObject<number>;
+    cursorStartTimeRef: import('react').RefObject<number>;
+    selectionAnchorRef: import('react').RefObject<number>;
+    didDragSelectRef: import('react').RefObject<boolean>;
+    editRichText: RichText | null;
+    setEditRichText: import('react').Dispatch<import('react').SetStateAction<RichText | null>>;
+    editRichTextRef: import('react').RefObject<RichText | null>;
+    currentFormattingStyle: CharacterStyle | null;
+    setCurrentFormattingStyle: import('react').Dispatch<import('react').SetStateAction<CharacterStyle | null>>;
+    applyFormattingToSelection: (style: CharacterStyle) => void;
+    getSelectionStyle: () => CharacterStyle | null;
+    toggleFormattingProperty: (property: "bold" | "italic" | "underline" | "strikethrough") => void;
+};
+export {};

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

@@ -0,0 +1,75 @@
+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 { TransformHandles } from '../../../core/TransformHandles.js';
+import { RichText, CharacterStyle } from '../../../types/index.js';
+import { PathElement } from '../../../core/PathElement.js';
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+type ChildElement = TextElement | ImageElement | ShapeElement | PathElement | GroupElement;
+export interface UseTextEditingHandlersParams {
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
+    editingChildIdRef: React.MutableRefObject<string | null>;
+    editRichTextRef: React.MutableRefObject<RichText | null>;
+    selectionAnchorRef: React.MutableRefObject<number>;
+    cursorStartTimeRef: React.MutableRefObject<number>;
+    lastMultiClickTimeRef: React.MutableRefObject<number>;
+    multiClickSelectionRef: React.MutableRefObject<{
+        start: number;
+        end: number;
+        cursor: number;
+    } | null>;
+    editPositionUpdateTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+    draggingSelectionHandleRef: React.MutableRefObject<'start' | 'end' | null>;
+    repositioningCursorRef: React.MutableRefObject<boolean>;
+    editModeEnteredAtRef: React.MutableRefObject<number>;
+    lastTouchTargetRef: React.MutableRefObject<HTMLElement | null>;
+    MULTI_CLICK_DEBOUNCE: number;
+    EDIT_MODE_BLUR_DEBOUNCE: number;
+    isEditing: boolean;
+    editText: string;
+    editRichText: RichText | null;
+    cursorPosition: number;
+    selectionStart: number;
+    selectionEnd: number;
+    selectedId: string | null;
+    selectedElement: CanvasElement | undefined;
+    activeChildElement: ChildElement | null;
+    elements: CanvasElement[];
+    zoom: number;
+    paddingOffsetX: number;
+    paddingOffsetY: number;
+    setIsEditing: (v: boolean) => void;
+    setEditText: (v: string) => void;
+    setEditRichText: (v: RichText | null) => void;
+    setCursorPosition: React.Dispatch<React.SetStateAction<number>>;
+    setSelectionStart: React.Dispatch<React.SetStateAction<number>>;
+    setSelectionEnd: React.Dispatch<React.SetStateAction<number>>;
+    setEditPosition: (pos: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    setCurrentFormattingStyle: React.Dispatch<React.SetStateAction<CharacterStyle | null>>;
+    setCursorAnimationFrame: React.Dispatch<React.SetStateAction<number>>;
+    setHandlesVersion: React.Dispatch<React.SetStateAction<number>>;
+    setElements: React.Dispatch<React.SetStateAction<CanvasElement[]>>;
+    onElementUpdate: (element: CanvasElement) => void;
+    onTextSelectionChange?: () => void;
+    transformHandles: TransformHandles;
+    updateActiveChild: (child: ChildElement | null) => void;
+}
+export interface TextEditingHandlersResult {
+    handleTextEditComplete: () => void;
+    handleTextEditBlur: () => void;
+    handleTextKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    applyFormattingToSelection: (style: CharacterStyle) => void;
+    getSelectionStyle: () => CharacterStyle | null;
+    toggleFormattingProperty: (property: 'bold' | 'italic' | 'underline' | 'strikethrough') => void;
+    enterTextEditMode: (element: TextElement, worldX: number, worldY: number) => void;
+    getWrappedTextForEditing: (element: TextElement) => string;
+}
+export declare function useTextEditingHandlers(params: UseTextEditingHandlersParams): TextEditingHandlersResult;
+export {};

package/dist/components/CanvasEditor/renderers/hoverRenderer.d.ts

@@ -0,0 +1,12 @@
+import { TextElement } from '../../../core/TextElement.js';
+import { ImageElement } from '../../../core/ImageElement.js';
+export interface RenderGroupSiblingHoverParams {
+    ctx: CanvasRenderingContext2D;
+    hoveredChild: TextElement | ImageElement;
+    zoom?: number;
+}
+/**
+ * Renders hover effect outline for a group sibling element
+ * @param params.zoom - Zoom factor (default 1.0) - line width is adjusted to maintain visual consistency
+ */
+export declare function renderGroupSiblingHover(params: RenderGroupSiblingHoverParams): void;

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

@@ -0,0 +1,10 @@
+/**
+ * CanvasEditor Rendering Utilities
+ * Barrel export for all rendering functions
+ */
+export { renderMultiSelectionIndicators } from './multiSelectionRenderer.js';
+export type { MultiSelectionOBB, MultiSelectionGroupBounds, RenderMultiSelectionParams, RenderMultiSelectionResult, } from './multiSelectionRenderer.js';
+export { renderMarqueeSelection } from './marqueeRenderer.js';
+export type { RenderMarqueeParams } from './marqueeRenderer.js';
+export { renderGroupSiblingHover } from './hoverRenderer.js';
+export type { RenderGroupSiblingHoverParams } from './hoverRenderer.js';

package/dist/components/CanvasEditor/renderers/marqueeRenderer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Marquee Selection Renderer
+ * Handles rendering of the marquee selection box during drag
+ */
+export interface RenderMarqueeParams {
+    ctx: CanvasRenderingContext2D;
+    marqueeStart: {
+        x: number;
+        y: number;
+    };
+    marqueeEnd: {
+        x: number;
+        y: number;
+    };
+    zoom?: number;
+}
+/**
+ * Renders a marquee selection box with stroke and semi-transparent fill
+ * @param params.zoom - Zoom factor (default 1.0) - line width is adjusted to maintain visual consistency
+ */
+export declare function renderMarqueeSelection(params: RenderMarqueeParams): void;

package/dist/components/CanvasEditor/renderers/multiSelectionRenderer.d.ts

@@ -0,0 +1,52 @@
+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';
+/** Elements that can be on the canvas */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+export interface MultiSelectionOBB {
+    centerX: number;
+    centerY: number;
+    width: number;
+    height: number;
+    rotation: number;
+}
+export interface MultiSelectionGroupBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    centerX: number;
+    centerY: number;
+    rotationHandleX: number;
+    rotationHandleY: number;
+    rotation: number;
+}
+export interface RenderMultiSelectionParams {
+    ctx: CanvasRenderingContext2D;
+    displaySelection: string[];
+    elements: CanvasElement[];
+    activeArtboardElementIds: Set<string>;
+    stateMachine: InteractionStateMachine;
+    multiSelectionOBB: MultiSelectionOBB | null;
+    isRotating: boolean;
+    currentRotation: number;
+    isMarqueeSelecting: boolean;
+    zoom?: number;
+}
+export interface RenderMultiSelectionResult {
+    updatedOBB: MultiSelectionOBB | null;
+    groupBounds: MultiSelectionGroupBounds | null;
+}
+/**
+ * Renders multi-selection indicators including:
+ * - Individual element borders
+ * - Group bounding box with dotted border
+ * - Corner resize handles
+ * - Rotation handle
+ * - Dimension label during resize
+ */
+export declare function renderMultiSelectionIndicators(params: RenderMultiSelectionParams): RenderMultiSelectionResult;
+export {};

package/dist/components/CanvasEditor/renderers/renderingConstants.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared rendering constants for canvas UI elements
+ * Provides DRY (Don't Repeat Yourself) constants for consistent rendering
+ * All values should be divided by zoom to maintain visual consistency at different zoom levels
+ */
+/**
+ * Line width for selection borders, handles, and UI elements
+ * Should be divided by zoom: lineWidth = SELECTION_LINE_WIDTH / zoom
+ */
+export declare const SELECTION_LINE_WIDTH = 2;
+/**
+ * Corner resize handle radius
+ * Should be divided by zoom: radius = HANDLE_RADIUS / zoom
+ */
+export declare const HANDLE_RADIUS = 6;
+/**
+ * Rotation handle radius (larger than corner handles)
+ * Should be divided by zoom: radius = ROTATION_HANDLE_RADIUS / zoom
+ */
+export declare const ROTATION_HANDLE_RADIUS = 16;
+/**
+ * Dash pattern for dotted lines (multi-selection group bounds)
+ * Should be divided by zoom: setLineDash([DASH_SIZE / zoom, DASH_GAP / zoom])
+ */
+export declare const DASH_SIZE = 5;
+export declare const DASH_GAP = 5;
+/**
+ * Rotation handle icon scale factor
+ */
+export declare const ROTATION_ICON_SCALE = 0.5;
+/**
+ * Helper function to get zoom-adjusted line width
+ */
+export declare function getLineWidth(zoom: number): number;
+/**
+ * Helper function to get zoom-adjusted handle radius
+ */
+export declare function getHandleRadius(zoom: number): number;
+/**
+ * Helper function to get zoom-adjusted rotation handle radius
+ */
+export declare function getRotationHandleRadius(zoom: number): number;
+/**
+ * Helper function to get zoom-adjusted dash pattern
+ */
+export declare function getDashPattern(zoom: number): number[];
+/**
+ * Renders complete rotation handle (circle background + icon)
+ * Provides consistent rotation handle rendering across single and multi-selection
+ * Works in world coordinate space with zoom compensation for UI elements
+ *
+ * @param ctx - Canvas rendering context
+ * @param x - X position in world coordinates
+ * @param y - Y position in world coordinates
+ * @param zoom - Current zoom level (default 1.0)
+ * @param accentColor - Border color (default from theme)
+ * @param isHovering - Whether handle is being hovered (increases border width)
+ */
+export declare function renderRotationHandle(ctx: CanvasRenderingContext2D, x: number, y: number, zoom?: number, accentColor?: string, isHovering?: boolean): void;

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

@@ -0,0 +1,11 @@
+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';
+export interface LocalHoverState {
+    type: 'element' | 'resize-handle' | 'rotation-handle' | 'crop-handle' | 'multi-selection-handle' | 'multi-selection-rotation-handle' | 'multi-selection-bounds' | 'group-sibling' | null;
+    data: unknown;
+    startTime: number | null;
+}
+export type AnyElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;

package/dist/components/CanvasEditor.d.ts

@@ -0,0 +1,102 @@
+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 { PathElement } from '../core/PathElement.js';
+import { ShapeElement } from '../core/ShapeElement.js';
+import { ArtboardElement } from '../core/ArtboardElement.js';
+import { ArtboardManager } from '../core/ArtboardManager.js';
+import { CharacterStyle } from '../types/index.js';
+/** Union type for all canvas element types */
+type CanvasElement = TextElement | ImageElement | GroupElement | ShapeElement | PathElement;
+interface CanvasEditorProps {
+    elements: CanvasElement[];
+    artboards: ArtboardElement[];
+    artboardManager: ArtboardManager;
+    selectedId: string | null;
+    multiSelection: string[];
+    onElementUpdate: (element: CanvasElement) => void;
+    setElements: React.Dispatch<React.SetStateAction<CanvasElement[]>>;
+    executeElementUpdate: (oldElement: CanvasElement | undefined, newElement: CanvasElement) => void;
+    onSelectionChange: (id: string | null) => void;
+    onMultiSelectionChange: (ids: string[]) => void;
+    onActiveChildChange?: (child: CanvasElement | null) => void;
+    onTextSelectionChange?: () => void;
+    onHoverChange?: (elementId: string | null) => void;
+    onRotationStateChange?: (isRotating: boolean) => void;
+    onCropModeEnter?: () => void;
+    hideHandles?: boolean;
+    canvasRef?: React.RefObject<HTMLCanvasElement | null>;
+    width?: number;
+    height?: number;
+    zoom?: number;
+    offsetX?: number;
+    offsetY?: number;
+    viewPadding?: number;
+    artboardBorderRadius?: number;
+    fixedMargin?: number;
+    fixedMarginX?: number;
+    fixedMarginY?: number;
+    showRotationHandle?: boolean;
+    /** ADR-0054 Phase 4: cutout shapes (artboard px) punched through the
+     *  `<canvas>` as truly transparent holes. Translated internally to a
+     *  CSS `clip-path: path(evenodd, ...)` that accounts for padding +
+     *  zoom, so consumers can think purely in artboard coordinates. */
+    canvasCutouts?: import('./embed/SnowconeCanvas').CanvasCutoutShape[];
+    /** ADR-0054: piece-guide overlays drawn inside the canvas render loop. */
+    pieceGuides?: import('./embed/SnowconeCanvas').PieceGuidesConfig;
+    /**
+     * ADR-0060: which piece (if any) the editor is focused on inside a
+     * multi-piece spread. `'spread'` (or undefined) shows every piece in
+     * the layout at full size — the historical behaviour. `{ pieceId }`
+     * fits the viewport to that piece (with a peek margin so neighbouring
+     * pieces remain visible at reduced opacity for overflow feedback).
+     * The pieces themselves come from `pieceGuides.pieces`.
+     *
+     * Spread-mode is derived from `pieces.length`: layouts with a single
+     * piece are unaffected by this prop (the toggle is a no-op for them).
+     */
+    pieceFocus?: 'spread' | {
+        pieceId: string;
+    };
+    /**
+     * ADR-0060: optional override for the focused-piece rect, used by
+     * the parent (`Canvas.tsx`) to feed in an animated rect when
+     * switching pieces. When provided, it replaces the rect that would
+     * otherwise be derived from `pieceFocus` + `pieceGuides`. Lets the
+     * zoom-fit math (lives in `Canvas.tsx`) and the layout/render-loop
+     * (lives here) share one interpolating value during the dolly.
+     */
+    focusedPieceRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export interface CanvasEditorHandle {
+    applyTextFormatting: (style: CharacterStyle) => void;
+    toggleFormattingProperty: (property: 'bold' | 'italic' | 'underline' | 'strikethrough') => void;
+    isEditingText: () => boolean;
+    isRotating: () => boolean;
+    getSelectionStyle: () => CharacterStyle | null;
+    getZoom: () => number;
+    forceRender: () => void;
+    getEditingState: () => {
+        isEditing: boolean;
+        editText: string;
+        cursorPosition: number;
+        selectionStart: number;
+        selectionEnd: number;
+    };
+    getCropState: () => {
+        isCropping: boolean;
+        elementId: string | null;
+    };
+    getPaddingOffset: () => {
+        x: number;
+        y: number;
+    };
+}
+declare const CanvasEditor: React.ForwardRefExoticComponent<CanvasEditorProps & React.RefAttributes<CanvasEditorHandle>>;
+export default CanvasEditor;

package/dist/components/ColorPickerDropdown.d.ts

@@ -0,0 +1,29 @@
+/**
+ * ColorPickerDropdown - Custom color picker with dropdown
+ * Uses react-colorful for a better UX than native browser picker
+ */
+export interface ColorPickerDropdownProps {
+    value: string;
+    onChange: (event: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    /** Colours already in use elsewhere in the design (text, shapes,
+     * paths, strokes, artboard background). Surfaced as the
+     * "Document colors" row. */
+    documentColors?: string[];
+    /** Dominant colours sampled from image elements in the design.
+     * Surfaced as a separate "Image colors" row so users can match
+     * a colour from their artwork. Empty / omitted hides the row. */
+    imageColors?: string[];
+    icon?: React.ReactNode;
+    showSquare?: boolean;
+    allowTransparent?: boolean;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** When true, renders the color picker content directly without a popover trigger button */
+    embedded?: boolean;
+}
+declare const ColorPickerDropdown: import('react').MemoExoticComponent<({ value, onChange, documentColors, imageColors, icon, showSquare, allowTransparent, isOpen: controlledIsOpen, onOpenChange: controlledOnOpenChange, embedded, }: ColorPickerDropdownProps) => import("react/jsx-runtime").JSX.Element>;
+export default ColorPickerDropdown;

package/dist/components/CompositingPanel.d.ts

@@ -0,0 +1,8 @@
+import { BlendMode, KnockoutConfig } from '../types/index.js';
+interface CompositingPanelProps {
+    blendMode?: BlendMode;
+    knockoutParts?: KnockoutConfig;
+    onChange: (blendMode: BlendMode, knockoutParts?: KnockoutConfig) => void;
+}
+declare const CompositingPanel: ({ blendMode, knockoutParts, onChange }: CompositingPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default CompositingPanel;

package/dist/components/ContextualToolbars.d.ts

@@ -0,0 +1,150 @@
+import { default as React } from 'react';
+export interface ContextualToolbarsProps {
+    /**
+     * Positioning mode for the toolbar
+     * - 'floating': Positioned relative to selected element (default)
+     * - 'embedded': Static positioning for embedding in a container
+     */
+    mode?: 'floating' | 'embedded';
+    /**
+     * @deprecated Effects panel drawer has been replaced by inline secondary panels.
+     * Stroke, masks, distress, and knockout are now accessible directly from the toolbar.
+     */
+    onOpenEffectsPanel?: () => void;
+    /**
+     * Callback when glyph browser should be opened
+     */
+    onOpenGlyphBrowser?: () => void;
+    /**
+     * Callback when image should be changed
+     */
+    onChangeImage?: () => void;
+    /**
+     * Callback when shape type drawer should be opened
+     */
+    onOpenShapeTypeDrawer?: () => void;
+    /**
+     * Document colors for color picker
+     */
+    documentColors?: Set<string>;
+    /**
+     * Current viewport width for responsive behavior
+     */
+    viewportWidth?: number;
+    /**
+     * Responsive breakpoints for layout
+     * - full: All controls visible (default: 1024)
+     * - compact: Some controls in overflow menu (default: 768)
+     * - minimal: Only essential controls, rest in overflow (default: 480)
+     */
+    breakpoints?: {
+        full?: number;
+        compact?: number;
+        minimal?: number;
+    };
+    /**
+     * Whether element has glyphs available
+     */
+    hasGlyphs?: boolean;
+    /**
+     * Callback to get more menu items for text elements
+     */
+    getMoreMenuItems?: () => Array<{
+        label: string;
+        onClick: () => void;
+        icon: React.ReactNode;
+        active?: boolean;
+    }>;
+    /**
+     * Callback when artboard is updated
+     */
+    onArtboardUpdate?: (artboardId: string, oldProps: Record<string, unknown>, newProps: Record<string, unknown>) => void;
+    /**
+     * Artboard screen bounds for positioning toolbars
+     */
+    artboardScreenBounds?: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        bottom: number;
+        centerX: number;
+    };
+    /**
+     * Maximum width for the toolbar. When set, enables flex-wrap for multi-row layout.
+     * Can be a number (pixels) or a CSS string (e.g., '100%', '400px').
+     */
+    maxWidth?: number | string;
+    /**
+     * When true, removes the toolbar background, border, and shadow for a transparent look.
+     * Useful when embedding in a custom UI where you want only the controls visible.
+     */
+    transparent?: boolean;
+    /**
+     * Callback when a secondary panel is expanded or collapsed.
+     * Useful for styling the container as a bottom drawer when panels are visible.
+     */
+    onPanelExpandChange?: (expanded: boolean) => void;
+    /**
+     * Default expanded panel type. Used to open a specific panel on mount.
+     * Useful when rendering in a drawer that needs to show a specific panel.
+     */
+    defaultExpandedPanel?: 'cornerRadius' | 'effects' | 'crop' | 'rotation' | null;
+    /**
+     * Callback when expanded panel changes, passing the panel type.
+     * Useful for tracking which specific panel is expanded.
+     */
+    onExpandedPanelTypeChange?: (panelType: 'cornerRadius' | 'effects' | 'crop' | 'rotation' | null) => void;
+    /**
+     * Callback when crop drawer should be opened.
+     * When provided, clicking the crop button will call this instead of showing inline panel.
+     * Use this to render the crop controls in a drawer in the parent component.
+     */
+    onOpenCropDrawer?: () => void;
+    /**
+     * Callback when corner radius drawer should be opened.
+     * When provided, clicking the corner radius button will call this instead of showing inline panel.
+     * Use this to render the corner radius controls in a drawer in the parent component.
+     */
+    onOpenCornerRadiusDrawer?: () => void;
+    /**
+     * Style for the close button in expanded panel headers.
+     * - 'icon': Shows X icon (default)
+     * - 'done': Shows "Done" text button
+     */
+    closeButtonStyle?: 'icon' | 'done';
+    /**
+     * Message to display when no element is selected (embedded mode only).
+     * Set to null to hide the empty state completely.
+     * Default: "Tap an element to select and edit"
+     */
+    emptyStateMessage?: string | null;
+    /**
+     * Custom content to render when no element is selected (embedded mode only).
+     * Replaces the default emptyStateMessage text. Use for live mockup previews, etc.
+     */
+    emptyStateRender?: React.ReactNode;
+    /**
+     * When true and no element is selected, shows artboard distress panel
+     * in the empty state slot (embedded mode only).
+     */
+    editArtboardMode?: boolean;
+    /**
+     * Called when artboard edit mode should change (e.g. dismissed by selecting
+     * an element or clicking the "Done" button).
+     */
+    onEditArtboardModeChange?: (active: boolean) => void;
+    /**
+     * Called when the leading layer thumbnail in the toolbar is clicked.
+     * Typical wiring: open the host app's "Manage Layers" drawer with
+     * the currently-selected layer focused. The selected layer is
+     * already tracked by EditorContext so the drawer's `LayersPanel`
+     * will highlight the right row automatically.
+     *
+     * When omitted, the thumbnail is non-interactive (just a visual
+     * indicator of the selection).
+     */
+    onLayerThumbnailClick?: () => void;
+}
+export declare const ContextualToolbars: React.FC<ContextualToolbarsProps>;
+export default ContextualToolbars;

package/dist/components/CropPanel.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { ImageElement } from '../core/ImageElement.js';
+export interface CropPanelProps {
+    /** The image element to crop */
+    element: ImageElement;
+    /** Callback when element is updated */
+    onElementUpdate: (element: ImageElement) => void;
+    /** Optional class name for the container */
+    className?: string;
+}
+/**
+ * CropPanel - Controls for cropping image elements
+ *
+ * Provides:
+ * - 3x3 anchor grid for selecting resize origin
+ * - Width slider (10-100%)
+ * - Height slider (10-100%)
+ */
+export declare const CropPanel: React.FC<CropPanelProps>;
+export default CropPanel;

package/dist/components/DistressPanel.d.ts

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

package/dist/components/DocsPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * DocsPage - Interactive documentation for component primitives
+ * Showcases all reusable primitives with live examples
+ */
+declare const DocsPage: () => import("react/jsx-runtime").JSX.Element;
+export default DocsPage;