@jeevandev/flow-canvas 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -2,9 +2,173 @@ import { default as default_2 } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { StoreApi } from 'zustand';
+import { TemporalState } from 'zundo';
+import { UseBoundStore } from 'zustand';
 import { WritableDraft } from 'immer';
 
-export declare const Canvas: ({ children, grid, background, className, style, canvasStyle }: CanvasProps) => JSX.Element;
+/**
+ * Hidden accessibility instructions for screen readers
+ * Provides context for keyboard navigation and interactions
+ */
+export declare const AccessibilityInstructions: () => JSX.Element;
+
+export declare interface Asset {
+    id: string;
+    name: string;
+    type: 'image' | 'icon' | 'shape' | 'text' | 'component';
+    url: string;
+    thumbnail?: string;
+    category?: string;
+    tags?: string[];
+    metadata?: {
+        width?: number;
+        height?: number;
+        format?: string;
+        size?: number;
+        author?: string;
+        createdAt?: number;
+    };
+}
+
+export declare interface AssetCategory {
+    id: string;
+    name: string;
+    icon?: string;
+}
+
+declare class AssetLibrary {
+    private assets;
+    private categories;
+    private storageKey;
+    /**
+     * Load assets from localStorage
+     */
+    loadAssets(): void;
+    /**
+     * Save assets to localStorage
+     */
+    saveAssets(): void;
+    /**
+     * Add or update an asset
+     */
+    addAsset(asset: Asset): void;
+    /**
+     * Get asset by ID
+     */
+    getAsset(id: string): Asset | undefined;
+    /**
+     * Get all assets
+     */
+    getAllAssets(): Asset[];
+    /**
+     * Get assets by type
+     */
+    getAssetsByType(type: Asset['type']): Asset[];
+    /**
+     * Get assets by category
+     */
+    getAssetsByCategory(category: string): Asset[];
+    /**
+     * Search assets
+     */
+    searchAssets(query: string): Asset[];
+    /**
+     * Delete an asset
+     */
+    deleteAsset(id: string): boolean;
+    /**
+     * Add category
+     */
+    addCategory(category: AssetCategory): void;
+    /**
+     * Get all categories
+     */
+    getAllCategories(): AssetCategory[];
+    /**
+     * Delete category
+     */
+    deleteCategory(id: string): boolean;
+    /**
+     * Create asset from URL (for images)
+     */
+    createAssetFromUrl(url: string, options: {
+        name: string;
+        type: Asset['type'];
+        category?: string;
+        tags?: string[];
+    }): Promise<Asset>;
+}
+
+export declare const assetLibrary: AssetLibrary;
+
+declare interface AutoSaveOptions {
+    enabled?: boolean;
+    interval?: number;
+    storageKey?: string;
+    onSave?: (state: EditorState_2) => void | Promise<void>;
+    onError?: (error: Error) => void;
+}
+
+/**
+ * Calculate total bounds of all nodes (for scroll container sizing)
+ */
+export declare function calculateTotalBounds(nodes: EditorNode_2[]): {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+};
+
+export declare class Camera {
+    x: number;
+    y: number;
+    zoom: number;
+    constructor(x?: number, y?: number, zoom?: number);
+    /**
+     * Pan camera by delta
+     */
+    pan(dx: number, dy: number): void;
+    /**
+     * Zoom camera at point
+     */
+    zoomAt(factor: number, centerX: number, centerY: number): void;
+    /**
+     * Convert screen coordinates to world coordinates
+     */
+    screenToWorld(screenX: number, screenY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Convert world coordinates to screen coordinates
+     */
+    worldToScreen(worldX: number, worldY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get camera state
+     */
+    getState(): CameraState;
+    /**
+     * Set camera state
+     */
+    setState(state: Partial<CameraState>): void;
+}
+
+/**
+ * Camera Domain Model
+ * Represents viewport/camera state
+ */
+export declare interface CameraState {
+    x: number;
+    y: number;
+    zoom: number;
+}
+
+export declare const Canvas: ({ children, grid, background, className, style, canvasStyle, nodeTypes, }: CanvasProps) => JSX.Element;
 
 declare interface CanvasProps {
     children?: ReactNode;
@@ -13,28 +177,20 @@ declare interface CanvasProps {
     className?: string;
     style?: React.CSSProperties;
     canvasStyle?: React.CSSProperties;
+    nodeTypes?: NodeTypesRegistry;
 }
 
-export declare const DefaultNode: ({ data, ...props }: {
+export declare const DemoNodeContent: ({ data }: {
     data: any;
-} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
-
-export declare interface Edge {
-    id: string;
-    source: string;
-    target: string;
-    sourceHandle?: string;
-    targetHandle?: string;
-    type?: string;
-    data?: Record<string, any>;
-    style?: React.CSSProperties;
-    animated?: boolean;
-}
+}) => JSX.Element;
 
-export declare const Editor: ({ children, initialNodes, initialEdges, nodes, config, className, style, onChange }: EditorProps & {
-    nodes?: EditorNode[];
+export declare const Editor: ({ children, initialNodes, nodes, config, className, style, onChange, }: EditorProps & {
+    nodes?: EditorNode_2[];
 }) => JSX.Element;
 
+/**
+ * Editor Configuration
+ */
 export declare interface EditorConfig {
     width?: number;
     height?: number;
@@ -49,13 +205,42 @@ export declare interface EditorConfig {
     minZoom?: number;
     maxZoom?: number;
     viewOnly?: boolean;
-    connectionMode?: 'loose' | 'strict';
-    snapToHandle?: boolean;
+    pageWidth?: number;
+    pageHeight?: number;
+    pageGap?: number;
+}
+
+declare interface EditorConfig_2 {
+    width?: number;
+    height?: number;
+    showGrid?: boolean;
+    gridSize?: number;
+    gridColor?: string;
+    snapGuide?: boolean;
+    snapping?: boolean;
+    pan?: boolean;
+    zoom?: boolean;
+    isLimited?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    viewOnly?: boolean;
+    pageWidth?: number;
+    pageHeight?: number;
+    pageGap?: number;
     rotation?: boolean;
     rotationSnap?: number;
     rotationSpeed?: number;
+    viewportCulling?: boolean;
+    virtualization?: {
+        enabled?: boolean;
+        threshold?: number;
+        overscan?: number;
+    };
 }
 
+/**
+ * Editor Node Definition
+ */
 export declare interface EditorNode {
     id: string;
     x: number;
@@ -63,20 +248,39 @@ export declare interface EditorNode {
     width: number;
     height: number;
     rotation?: number;
+    pageId?: string;
+    draggable?: boolean;
+    resizable?: boolean;
+    rotatable?: boolean;
+    type?: string;
+    data?: Record<string, unknown>;
+    className?: string;
+    style?: default_2.CSSProperties;
+    customCss?: string;
+    showDragHandle?: boolean;
+    doubleClickToEdit?: boolean;
+    rotationSnap?: number;
+    selectable?: boolean;
+    parentId?: string;
+    locked?: boolean;
+}
+
+declare interface EditorNode_2 {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+    pageId?: string;
     draggable?: boolean;
     resizable?: boolean;
     rotatable?: boolean;
+    parentId?: string;
     type?: string;
     data?: Record<string, any>;
-    handles?: Record<string, {
-        id: string;
-        type: 'source' | 'target';
-        position: 'top' | 'right' | 'bottom' | 'left';
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }>;
+    zIndex?: number;
+    locked?: boolean;
     className?: string;
     style?: React.CSSProperties;
     customCss?: string;
@@ -84,68 +288,92 @@ export declare interface EditorNode {
 }
 
 export declare interface EditorProps {
-    children?: ReactNode;
-    initialNodes?: EditorNode[];
-    initialEdges?: Edge[];
-    config?: EditorConfig;
+    children: React.ReactNode;
+    initialNodes?: EditorNode_2[];
+    config?: EditorConfig_2;
     className?: string;
     style?: React.CSSProperties;
-    onChange?: (state: EditorState) => void;
+    onChange?: (state: EditorState_2) => void;
 }
 
+/**
+ * Editor State
+ */
 export declare interface EditorState {
     nodes: Record<string, EditorNode>;
-    edges: Record<string, Edge>;
+    pages: Record<string, Page>;
+    pageOrder: string[];
     selectedIds: string[];
-    config: EditorConfig;
+    editingGroupId: string | null;
     camera: {
         x: number;
         y: number;
         zoom: number;
     };
-    dimensions: {
-        width: number;
-        height: number;
-    };
-    connectionState: {
-        nodeId: string | null;
-        handleId: string | null;
-        handleType: 'source' | 'target' | null;
-        position: {
-            x: number;
-            y: number;
-        } | null;
-        isValid: boolean;
-    };
-    startConnection: (nodeId: string, handleId: string, handleType: 'source' | 'target', position: {
-        x: number;
-        y: number;
-    }) => void;
-    updateConnection: (position: {
-        x: number;
-        y: number;
-    }) => void;
-    endConnection: () => void;
-    setNodes: (nodes: EditorNode[]) => void;
+    config: EditorConfig;
+    dragTargetPageId: string | null;
     addNode: (node: EditorNode) => void;
-    updateNode: (id: string, node: Partial<EditorNode>) => void;
-    registerHandle: (nodeId: string, handleId: string, handle: {
-        type: 'source' | 'target';
-        position: 'top' | 'right' | 'bottom' | 'left';
+    updateNode: (id: string, updates: Partial<EditorNode>) => void;
+    deleteNode: (id: string) => void;
+    selectNode: (id: string, multi?: boolean) => void;
+    deselectNode: (id: string) => void;
+    clearSelection: () => void;
+    setCamera: (camera: Partial<EditorState["camera"]>) => void;
+    setConfig: (config: Partial<EditorConfig>) => void;
+    setDragTargetPage: (pageId: string | null) => void;
+    addPage: (page: Page) => void;
+    updatePage: (id: string, updates: Partial<Page>) => void;
+    deletePage: (id: string) => void;
+    reorderPages: (pageOrder: string[]) => void;
+    nudgeSelected: (dx: number, dy: number) => void;
+    rotateSelected: (angle: number) => void;
+    rotateSelectedBy: (deltaAngle: number) => void;
+    duplicateSelected: () => void;
+    deleteSelected: () => void;
+    moveSelectedToPage: (pageId: string) => void;
+    checkAutoReparent: () => void;
+    setDimensions: (width: number, height: number) => void;
+    panCamera: (dx: number, dy: number) => void;
+    zoomCamera: (factor: number, cx: number, cy: number) => void;
+    setActivePage: (pageId: string) => void;
+}
+
+declare interface EditorState_2 {
+    pages: Record<string, Page_2>;
+    pageOrder: string[];
+    dragTargetPageId: string | null;
+    activePageId: string | null;
+    nodes: Record<string, EditorNode_2>;
+    selectedIds: string[];
+    config: EditorConfig_2;
+    camera: {
         x: number;
         y: number;
+        zoom: number;
+    };
+    editingGroupId: string | null;
+    clipboard: {
+        nodes: EditorNode_2[];
+        copyCount: number;
+    };
+    dimensions: {
         width: number;
         height: number;
-    }) => void;
+    };
+    setNodes: (nodes: EditorNode_2[]) => void;
+    addNode: (node: EditorNode_2) => void;
+    updateNode: (id: string, node: Partial<EditorNode_2>) => void;
     removeNode: (id: string) => void;
-    setEdges: (edges: Edge[]) => void;
-    addEdge: (edge: Edge) => void;
-    removeEdge: (id: string) => void;
     selectNode: (id: string, multi?: boolean) => void;
+    selectAll: () => void;
     deselectAll: () => void;
     deleteSelected: () => void;
     duplicateSelected: () => void;
-    setConfig: (config: Partial<EditorConfig>) => void;
+    setEditingGroup: (groupId: string | null) => void;
+    copy: () => void;
+    paste: () => void;
+    cut: () => void;
+    setConfig: (config: Partial<EditorConfig_2>) => void;
     panCamera: (dx: number, dy: number) => void;
     zoomCamera: (factor: number, cx: number, cy: number) => void;
     setCamera: (x: number, y: number, zoom: number) => void;
@@ -153,33 +381,376 @@ export declare interface EditorState {
     nudgeSelected: (dx: number, dy: number) => void;
     resizeNode: (id: string, x: number, y: number, w: number, h: number) => void;
     rotateNode: (id: string, angle: number) => void;
+    rotateSelected: (angle: number) => void;
+    rotateSelectedBy: (deltaAngle: number) => void;
+    resizeSelected: (scaleX: number, scaleY: number, pivotX: number, pivotY: number, initialNodes: Record<string, {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }>) => void;
+    resizeSelectedLocal: (scaleX: number, scaleY: number, pivot: {
+        x: number;
+        y: number;
+    }, boxRotation: number, initialNodes: Record<string, {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        r: number;
+        cx: number;
+        cy: number;
+    }>, canvasOrigin: {
+        x: number;
+        y: number;
+    }) => void;
+    moveSelectedToPage: (pageId: string) => void;
+    checkAutoReparent: () => void;
+    groupSelected: () => void;
+    ungroupSelected: () => void;
+    bringForward: () => void;
+    sendBackward: () => void;
+    bringToFront: () => void;
+    sendToBack: () => void;
+    alignLeft: () => void;
+    alignRight: () => void;
+    alignTop: () => void;
+    alignBottom: () => void;
+    alignCenterH: () => void;
+    alignCenterV: () => void;
+    distributeH: () => void;
+    distributeV: () => void;
+    toggleLock: () => void;
+    lockSelected: () => void;
+    unlockSelected: () => void;
+    addPage: (page?: Partial<Page_2>) => string;
+    removePage: (id: string) => void;
+    updatePage: (id: string, updates: Partial<Page_2>) => void;
+    setDragTargetPage: (pageId: string | null) => void;
+    setActivePage: (pageId: string) => void;
+}
+
+declare class Element_2 {
+    id: string;
+    bounds: ElementBounds;
+    rotation: number;
+    pageId?: string;
+    parentId?: string;
+    type?: string;
+    data?: Record<string, any>;
+    constructor(id: string, bounds: ElementBounds, rotation?: number, pageId?: string, parentId?: string, type?: string, data?: Record<string, any>);
+    /**
+     * Get element center point
+     */
+    getCenter(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get element bounds including rotation
+     */
+    getRotatedBounds(): ElementBounds;
+    /**
+     * Check if point is inside element bounds
+     */
+    containsPoint(x: number, y: number): boolean;
+    /**
+     * Get element transform
+     */
+    getTransform(): ElementTransform;
+    /**
+     * Apply transform to element
+     */
+    applyTransform(transform: Partial<ElementTransform>): void;
+}
+export { Element_2 as Element }
+
+/**
+ * Element Domain Model
+ * Pure domain logic for canvas elements
+ */
+export declare interface ElementBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export declare interface ElementTransform {
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    rotation: number;
 }
 
 export declare const ElementWrapper: default_2.MemoExoticComponent<({ id, children, className, style, draggable, resizable, rotatable, selectable, rotationSnap, showDragHandle, doubleClickToEdit, ...props }: Props) => JSX.Element | null>;
 
-export declare const Handle: ({ type, id, position, className, style, ...props }: HandleProps) => JSX.Element;
+declare class ErrorReporter {
+    private config;
+    private initialized;
+    constructor();
+    init(config?: Partial<ErrorReportingConfig>): void;
+    private initSentry;
+    captureException(error: Error, context?: Record<string, unknown>): void;
+    captureMessage(message: string, level?: 'info' | 'warning' | 'error', context?: Record<string, unknown>): void;
+    setUser(user: {
+        id: string;
+        email?: string;
+        username?: string;
+    }): void;
+    clearUser(): void;
+}
+
+export declare const errorReporter: ErrorReporter;
 
-declare interface HandleProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    type: 'source' | 'target';
-    id?: string;
-    position?: 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Error reporting utility
+ * Supports integration with error reporting services (Sentry, etc.)
+ */
+declare interface ErrorReportingConfig {
+    enabled: boolean;
+    dsn?: string;
+    environment?: string;
+    release?: string;
 }
 
-export declare const InputNode: ({ data, ...props }: {
-    data: any;
-} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+/**
+ * Calculate spawn position for a new element
+ * Places element at the center of the specified page (or first page)
+ *
+ * @param store - Editor store instance (with getState method)
+ * @param elementSize - Size of the element to spawn (default: { width: 200, height: 150 })
+ * @param pageId - Optional specific page ID (defaults to first page)
+ * @returns Position with x, y coordinates and pageId
+ */
+export declare function getSpawnPosition(store: {
+    getState: () => EditorState_2;
+}, elementSize?: {
+    width: number;
+    height: number;
+}, pageId?: string): {
+    x: number;
+    y: number;
+    pageId: string;
+};
+
+/**
+ * Get cells that intersect with viewport
+ */
+export declare function getVisibleCells(grid: Map<string, EditorNode_2[]>, viewport: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, cellSize?: number): EditorNode_2[];
+
+/**
+ * Get visible nodes only (for rendering)
+ */
+export declare function getVisibleNodes(virtualized: VirtualizedItem[]): EditorNode_2[];
+
+export declare class GroupService {
+    /**
+     * Get all direct children of a group
+     */
+    static getChildren(groupId: string, nodes: Record<string, EditorNode>): EditorNode[];
+    /**
+     * Get all descendants of a group (recursive)
+     */
+    static getDescendants(groupId: string, nodes: Record<string, EditorNode>): EditorNode[];
+    /**
+     * Calculate bounding box from a set of nodes (children)
+     * Returns relative coordinates (min values can be negative)
+     */
+    static calculateBounds(children: EditorNode[]): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Find which group to enter when double-clicking on a nested element
+     */
+    static findTargetGroupToEnter(clickedId: string, editingGroupId: string | null, nodes: Record<string, EditorNode>): string | null;
+    /**
+     * Find the ancestor of a node that is a direct child of the editing group
+     */
+    static findAncestorInEditScope(elementId: string, editingGroupId: string, nodes: Record<string, EditorNode>): string | null;
+}
+
+declare interface LogEntry {
+    level: LogLevel;
+    message: string;
+    timestamp: number;
+    data?: unknown;
+    error?: Error;
+}
+
+declare class Logger {
+    private isDevelopment;
+    private logHistory;
+    private maxHistorySize;
+    constructor();
+    private log;
+    private reportError;
+    debug(message: string, ...args: unknown[]): void;
+    info(message: string, ...args: unknown[]): void;
+    warn(message: string, ...args: unknown[]): void;
+    error(message: string, error?: Error, ...args: unknown[]): void;
+    getHistory(): LogEntry[];
+    clearHistory(): void;
+}
+
+export declare const logger: Logger;
 
-export declare const NodeLayer: ({ nodeTypes }: NodeLayerProps) => JSX.Element;
+/**
+ * Logger utility for production-ready logging
+ * Handles different log levels and environment-based filtering
+ */
+declare type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+/**
+ * Type for node component
+ */
+export declare type NodeComponent = default_2.ComponentType<NodeComponentProps>;
+
+/**
+ * Props for custom node components
+ */
+export declare interface NodeComponentProps {
+    id: string;
+    data?: Record<string, unknown>;
+    style?: default_2.CSSProperties;
+    className?: string;
+    nodeTypes?: Record<string, default_2.ComponentType<NodeComponentProps>>;
+}
+
+export declare const NodeLayer: ({ nodeTypes, pageId }: NodeLayerProps) => JSX.Element;
 
 declare interface NodeLayerProps {
-    nodeTypes?: Record<string, default_2.ComponentType<any>>;
+    nodeTypes?: NodeTypesRegistry;
+    pageId?: string;
 }
 
-export declare const OutputNode: ({ data, ...props }: {
-    data: any;
-} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+/**
+ * Type for node types registry
+ */
+export declare type NodeTypesRegistry = Record<string, NodeComponent>;
 
-declare interface Props extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'onDrag'> {
+/**
+ * Optimize node list for virtualization
+ * Groups nearby nodes for batch processing
+ */
+export declare function optimizeForVirtualization(nodes: EditorNode_2[], cellSize?: number): Map<string, EditorNode_2[]>;
+
+export declare interface Page {
+    id: string;
+    width: number;
+    height: number;
+    backgroundColor?: string;
+    name?: string;
+}
+
+declare interface Page_2 {
+    id: string;
+    width: number;
+    height: number;
+    backgroundColor?: string;
+    name?: string;
+}
+
+/**
+ * Page Domain Model
+ * Pure domain logic for canvas pages
+ */
+export declare interface PageDimensions {
+    width: number;
+    height: number;
+}
+
+export declare class PageService {
+    /**
+     * Get the page that contains a given absolute position
+     */
+    static getPageAtPosition(absoluteY: number, pages: Record<string, Page>, pageOrder: string[], pageGap?: number): string | null;
+    /**
+     * Calculate the cumulative offset (top position) of a page
+     */
+    static calculatePageOffset(targetPageId: string, pages: Record<string, Page>, pageOrder: string[], pageGap?: number): number;
+    /**
+     * Check if an element is fully within page bounds
+     */
+    static isWithinPageBounds(element: EditorNode, page: Page): boolean;
+    /**
+     * Check if an element is partially within page bounds
+     */
+    static isPartiallyWithinPageBounds(element: EditorNode, page: Page): boolean;
+    /**
+     * Constrain element position to stay within page bounds
+     */
+    static constrainToPageBounds(position: Position, size: {
+        width: number;
+        height: number;
+    }, page: Page): Position;
+    /**
+     * Convert element position from one page to another
+     */
+    static convertPositionBetweenPages(elementPos: Position, fromPageId: string, toPageId: string, pages: Record<string, Page>, pageOrder: string[], pageGap?: number): Position;
+    /**
+     * Get total height of all pages including gaps
+     */
+    static getTotalHeight(pages: Record<string, Page>, pageOrder: string[], pageGap?: number): number;
+    /**
+     * Get the widest page width
+     */
+    static getMaxWidth(pages: Record<string, Page>): number;
+    /**
+     * Find which page an element belongs to based on its center point
+     */
+    static getPageByElementCenter(element: EditorNode, pages: Record<string, Page>, pageOrder: string[], pageGap?: number): string | null;
+}
+
+/**
+ * Performance monitoring utilities
+ * Tracks render times, operation durations, and performance metrics
+ */
+declare interface PerformanceMetric {
+    name: string;
+    duration: number;
+    timestamp: number;
+    metadata?: Record<string, unknown>;
+}
+
+declare class PerformanceMonitor {
+    private metrics;
+    private maxMetrics;
+    private enabled;
+    measure<T>(name: string, fn: () => T, metadata?: Record<string, unknown>): T;
+    measureAsync<T>(name: string, fn: () => Promise<T>, metadata?: Record<string, unknown>): Promise<T>;
+    recordMetric(name: string, duration: number, metadata?: Record<string, unknown>): void;
+    getMetrics(): PerformanceMetric[];
+    getAverageDuration(name: string): number;
+    clearMetrics(): void;
+    enable(): void;
+    disable(): void;
+}
+
+export declare const performanceMonitor: PerformanceMonitor;
+
+/**
+ * Geometric type definitions
+ */
+export declare interface Position {
+    x: number;
+    y: number;
+}
+
+declare interface Props extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "id" | "style" | "onDrag"> {
     id: string;
     children: ReactNode;
     className?: string;
@@ -193,22 +764,235 @@ declare interface Props extends Omit<default_2.HTMLAttributes<HTMLDivElement>, '
     doubleClickToEdit?: boolean;
 }
 
-declare interface Props_2 {
+export declare interface Size {
+    width: number;
+    height: number;
+}
+
+declare interface SnapLine {
     id: string;
-    children: ReactNode;
-    className?: string;
-    style?: default_2.CSSProperties;
-    draggable?: boolean;
-    selectable?: boolean;
+    type: "vertical" | "horizontal";
+    position: number;
+    pageId: string;
 }
 
-export declare const useEditor: <T>(selector: (state: EditorState) => T) => T;
+export declare class SnapService {
+    /**
+     * Find all potential snap lines for an element
+     */
+    static findSnapLines(element: EditorNode, allNodes: Record<string, EditorNode>, threshold?: number): SnapLine[];
+    /**
+     * Apply snap adjustments to a position
+     */
+    static applySnap(position: Position, size: {
+        width: number;
+        height: number;
+    }, snapLines: SnapLine[], threshold?: number): Position;
+    /**
+     * Get active snap lines that should be displayed
+     */
+    static getActiveSnapLines(element: EditorNode, allNodes: Record<string, EditorNode>, threshold?: number): SnapLine[];
+}
 
-export declare const useEditorStoreApi: () => Omit<StoreApi<EditorState>, "setState"> & {
-    setState(nextStateOrUpdater: EditorState | Partial<EditorState> | ((state: WritableDraft<EditorState>) => void), shouldReplace?: false): void;
-    setState(nextStateOrUpdater: EditorState | ((state: WritableDraft<EditorState>) => void), shouldReplace: true): void;
+/**
+ * StyleInjector component that collects and injects custom CSS from all nodes
+ * Place this inside your Editor component to enable customCss support
+ */
+export declare const StyleInjector: () => JSX.Element | null;
+
+export declare interface Template {
+    id: string;
+    name: string;
+    description?: string;
+    thumbnail?: string;
+    category?: string;
+    nodes: EditorNode_2[];
+    pages: Page_2[];
+    pageOrder: string[];
+    metadata?: {
+        author?: string;
+        version?: string;
+        tags?: string[];
+        createdAt?: number;
+        updatedAt?: number;
+    };
+}
+
+declare class TemplateManager {
+    private templates;
+    private storageKey;
+    /**
+     * Load templates from localStorage
+     */
+    loadTemplates(): void;
+    /**
+     * Save templates to localStorage
+     */
+    saveTemplates(): void;
+    /**
+     * Add or update a template
+     */
+    saveTemplate(template: Template): void;
+    /**
+     * Get a template by ID
+     */
+    getTemplate(id: string): Template | undefined;
+    /**
+     * Get all templates
+     */
+    getAllTemplates(): Template[];
+    /**
+     * Get templates by category
+     */
+    getTemplatesByCategory(category: string): Template[];
+    /**
+     * Delete a template
+     */
+    deleteTemplate(id: string): boolean;
+    /**
+     * Create template from current editor state
+     */
+    createTemplateFromState(name: string, state: {
+        nodes: Record<string, EditorNode_2>;
+        pages: Record<string, Page_2>;
+        pageOrder: string[];
+    }, options?: {
+        description?: string;
+        category?: string;
+        thumbnail?: string;
+    }): Template;
+    /**
+     * Apply template to editor state
+     */
+    applyTemplate(templateId: string): Template | null;
+}
+
+export declare const templateManager: TemplateManager;
+
+export declare class TransformService {
+    /**
+     * Calculate new position after drag movement
+     */
+    static calculateDragPosition(currentPos: Position, movement: [number, number], zoom: number, constraints?: {
+        minX?: number;
+        minY?: number;
+        maxX?: number;
+        maxY?: number;
+    }): Position;
+    /**
+     * Calculate new size after resize
+     */
+    static calculateResize(currentPos: Position, currentSize: Size, movement: [number, number], handle: string, zoom: number, rotation?: number, constraints?: {
+        minWidth?: number;
+        minHeight?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+        aspectRatio?: number;
+    }): {
+        position: Position;
+        size: Size;
+    };
+    /**
+     * Apply resize based on handle position
+     */
+    private static applyHandleResize;
+    /**
+     * Calculate new rotation angle
+     */
+    static calculateRotation(elementCenter: Position, mousePos: Position, snapAngle?: number): number;
+    /**
+     * Calculate element's center point
+     */
+    static getElementCenter(pos: Position, size: Size): Position;
+    /**
+     * Calculate bounding box for rotated element
+     */
+    static getRotatedBounds(pos: Position, size: Size, rotation: number): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+
+/**
+ * Hook for auto-saving editor state
+ * Saves state to localStorage and/or calls custom save handler
+ */
+export declare function useAutoSave(options?: AutoSaveOptions): {
+    manualSave: () => void;
+    loadSavedState: () => EditorState_2 | null;
+    clearSavedState: () => void;
+    lastSaveTime: number;
+};
+
+export declare const useEditor: <T>(selector: (state: EditorState_2) => T) => T;
+
+export declare const useEditorStoreApi: () => UseBoundStore<Omit<Omit<Omit<StoreApi<EditorState_2>, "temporal"> & {
+temporal: StoreApi<TemporalState<EditorState_2>>;
+}, "setState" | "devtools"> & {
+setState(partial: EditorState_2 | Partial<EditorState_2> | ((state: EditorState_2) => EditorState_2 | Partial<EditorState_2>), replace?: false | undefined, action?: (string | {
+[x: string]: unknown;
+[x: number]: unknown;
+[x: symbol]: unknown;
+type: string;
+}) | undefined): void;
+setState(state: EditorState_2 | ((state: EditorState_2) => EditorState_2), replace: true, action?: (string | {
+[x: string]: unknown;
+[x: number]: unknown;
+[x: symbol]: unknown;
+type: string;
+}) | undefined): void;
+devtools: {
+cleanup: () => void;
 };
+}, "setState"> & {
+setState(nextStateOrUpdater: EditorState_2 | Partial<EditorState_2> | ((state: WritableDraft<EditorState_2>) => void), shouldReplace?: false, action?: (string | {
+[x: string]: unknown;
+[x: number]: unknown;
+[x: symbol]: unknown;
+type: string;
+}) | undefined): void;
+setState(nextStateOrUpdater: EditorState_2 | ((state: WritableDraft<EditorState_2>) => void), shouldReplace: true, action?: (string | {
+[x: string]: unknown;
+[x: number]: unknown;
+[x: symbol]: unknown;
+type: string;
+}) | undefined): void;
+}>;
+
+export declare interface VirtualizationConfig {
+    enabled: boolean;
+    threshold: number;
+    overscan: number;
+    itemHeight?: number;
+}
+
+export declare interface VirtualizedItem {
+    node: EditorNode_2;
+    index: number;
+    isVisible: boolean;
+}
 
-export declare const WorkflowNodeWrapper: default_2.MemoExoticComponent<({ id, children, className, style, draggable, selectable, }: Props_2) => JSX.Element | null>;
+/**
+ * VirtualizedNodeLayer - Advanced virtualization for very large datasets
+ * Uses intersection observer and grid-based culling for optimal performance
+ */
+export declare const VirtualizedNodeLayer: ({ nodeTypes, pageId }: VirtualizedNodeLayerProps) => JSX.Element;
+
+declare interface VirtualizedNodeLayerProps {
+    nodeTypes?: NodeTypesRegistry;
+    pageId?: string;
+}
+
+/**
+ * Calculate which nodes should be rendered based on viewport
+ */
+export declare function virtualizeNodes(nodes: EditorNode_2[], viewport: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, config?: VirtualizationConfig): VirtualizedItem[];
 
 export { }