canvas/dist/nodes/index.d.mts

import * as react_jsx_runtime from 'react/jsx-runtime';
import React from 'react';

/**
 * Core types for @blinksgg/canvas
 */
/**
 * JSON type compatible with Supabase's generated types.
 * This allows the package to work with database JSONB fields.
 */
type Json = string | number | boolean | null | {
    [key: string]: Json | undefined;
} | Json[];
type NodeId = string;
interface NodePosition {
    x: number;
    y: number;
}
/**
 * Database node record - the shape of node data from your database.
 * Uses Json type for JSONB fields to be compatible with Supabase's generated types.
 */
interface DBGraphNode {
    id: string;
    graph_id: string;
    label: string | null;
    node_type: string | null;
    configuration: Json | null;
    ui_properties: Json | null;
    /** App-specific customization data */
    data?: Json | null;
    created_at: string;
    updated_at: string;
}
/**
 * Graph node attributes stored in Graphology
 */
interface GraphNodeAttributes {
    x: number;
    y: number;
    size: number;
    width: number;
    height: number;
    color: string;
    label?: string;
    zIndex: number;
    dbData: DBGraphNode;
    /** Parent group node ID (for nested grouping) */
    parentId?: string;
}
/**
 * Complete UI node state for rendering
 */
interface UINodeState extends GraphNodeAttributes {
    id: NodeId;
    position: NodePosition;
    isDragging: boolean;
}

/**
 * Node Type Registry
 *
 * Maps node types to their UI components.
 * Apps register their custom node components here.
 */

/**
 * Props passed to node type components.
 */
interface NodeTypeComponentProps {
    /** Full node state */
    nodeData: UINodeState;
    /** Whether the node is being resized */
    isResizing?: boolean;
}
/**
 * A component that renders a specific node type.
 */
type NodeTypeComponent = React.ComponentType<NodeTypeComponentProps>;

/**
 * NoteNode Types
 *
 * Storage adapter interface for the NoteNode component.
 * This allows the NoteNode to work with any storage backend
 * (Jazz, Supabase, local state, etc.)
 */

/**
 * Storage adapter interface for NoteNode.
 *
 * Implement this interface to connect NoteNode to your storage backend.
 *
 * @example
 * ```tsx
 * // Jazz implementation
 * function useJazzNoteStorage(nodeId: string): NoteNodeStorage {
 *   const coRichText = useJazzRichText(nodeId);
 *   return {
 *     content: coRichText?.toString() ?? '',
 *     onChange: (html) => coRichText?.$jazz.applyDiff(html),
 *     subscribe: (callback) => coRichText?.$jazz.subscribe(callback),
 *   };
 * }
 *
 * // Local state implementation
 * function useLocalNoteStorage(nodeId: string): NoteNodeStorage {
 *   const [content, setContent] = useState('');
 *   return { content, onChange: setContent };
 * }
 * ```
 */
interface NoteNodeStorage {
    /** Current HTML content of the note */
    content: string;
    /** Called when the editor content changes */
    onChange: (html: string) => void;
    /**
     * Optional: Subscribe to external content changes (for real-time sync).
     * Return an unsubscribe function.
     */
    subscribe?: (callback: (html: string) => void) => () => void;
    /** Optional: Whether storage is ready/loaded */
    isLoading?: boolean;
}
/**
 * Props for the NoteNode component.
 */
interface NoteNodeProps extends NodeTypeComponentProps {
    /** Storage adapter for persisting note content */
    storage: NoteNodeStorage;
    /** Optional: Theme for BlockNote editor */
    theme?: 'light' | 'dark';
    /** Optional: Placeholder text for empty document */
    placeholder?: string;
}
/**
 * Configuration stored in node's dbData.configuration for NoteNode
 */
interface NoteNodeConfiguration {
    /** Optional title for the note */
    title?: string;
    /** Theme preference for this note */
    theme?: 'light' | 'dark';
}

/**
 * NoteNode - A rich text editor node for canvas.
 *
 * Uses BlockNote for the editor and accepts a storage adapter
 * for persistence. This allows it to work with any backend:
 * Jazz, Supabase, local state, etc.
 *
 * @example
 * ```tsx
 * // With Jazz storage
 * <NoteNode
 *   nodeData={nodeData}
 *   storage={useJazzNoteStorage(nodeData.id)}
 * />
 *
 * // With local state
 * const [content, setContent] = useState('');
 * <NoteNode
 *   nodeData={nodeData}
 *   storage={{ content, onChange: setContent }}
 * />
 * ```
 */
declare function NoteNode({ nodeData, storage, theme, placeholder, isResizing, }: NoteNodeProps): react_jsx_runtime.JSX.Element;

export { type NodeTypeComponent, type NodeTypeComponentProps, NoteNode, type NoteNodeConfiguration, type NoteNodeProps, type NoteNodeStorage };