@3plate/graph-core 0.1.5 → 0.1.7

package/dist/index.d.cts

@@ -75,6 +75,8 @@ type GraphOptions = {
  * Events that can be handled by the user.
  */
 type EventsOptions<N, E> = {
+    /** Called when the API has finished initializing */
+    onInit?: () => void;
     /** Called when a node is clicked */
     nodeClick?: (node: N) => void;
     /** Called when an edge is clicked */
@@ -323,11 +325,17 @@ declare class Updater<N, E> {
     constructor();
     describe(desc: string): Updater<N, E>;
     addNode(node: any): Updater<N, E>;
+    addNodes(...nodes: any[]): Updater<N, E>;
     deleteNode(node: any): Updater<N, E>;
+    deleteNodes(...nodes: any[]): Updater<N, E>;
     updateNode(node: any): Updater<N, E>;
+    updateNodes(...nodes: any[]): Updater<N, E>;
     addEdge(edge: any): Updater<N, E>;
+    addEdges(...edges: any[]): Updater<N, E>;
     deleteEdge(edge: any): Updater<N, E>;
+    deleteEdges(...edges: any[]): Updater<N, E>;
     updateEdge(edge: any): Updater<N, E>;
+    updateEdges(...edges: any[]): Updater<N, E>;
     static add<N, E>(nodes: N[], edges: E[]): Updater<N, E>;
 }
 
@@ -362,17 +370,23 @@ declare class API<N, E> {
     private nextNodeId;
     private nextEdgeId;
     private events;
-    private root;
+    root: string;
     constructor(args: APIArguments<N, E>);
+    reset(): void;
+    /** Initialize the API */
+    init(): Promise<void>;
+    private applyHistory;
     /** Current history index (0-based) */
     getHistoryIndex(): number;
     /** Current history length */
     getHistoryLength(): number;
     /** Toggle canvas editable mode without re-creating the graph */
     setEditable(editable: boolean): void;
+    /** Replace entire history (clears prior) */
+    replaceHistory(frames: Update<N, E>[]): Promise<void>;
+    /** Rebuild from snapshot (nodes/edges) */
+    replaceSnapshot(nodes: N[], edges: E[], description?: string): Promise<void>;
     private get graph();
-    /** Initialize the API */
-    init(): Promise<void>;
     /** Navigate to a different state */
     nav(nav: Nav): void;
     private applyDiff;
@@ -424,8 +438,214 @@ declare class API<N, E> {
     handleAddEdge(data: EditEdgeProps): Promise<void>;
     handleDeleteNode(id: NodeId): Promise<void>;
     handleDeleteEdge(id: EdgeId): Promise<void>;
+    /** Update theme and type styles dynamically */
+    updateStyles(options: {
+        theme?: ThemeVars;
+        nodeTypes?: Record<string, ThemeVars>;
+        edgeTypes?: Record<string, ThemeVars>;
+    }): void;
+    /** Update color mode without recreating the canvas */
+    setColorMode(colorMode: 'light' | 'dark' | 'system'): void;
+    /** Cleanup resources when the graph is destroyed */
+    destroy(): void;
+}
+
+type SnapshotMessage<N, E> = {
+    type: 'snapshot';
+    nodes: N[];
+    edges: E[];
+    description?: string;
+};
+type UpdateMessage<N, E> = {
+    type: 'update';
+    description?: string;
+} & Update<N, E>;
+type HistoryMessage<N, E> = {
+    type: 'history';
+    frames: Update<N, E>[];
+};
+type IngestMessage<N, E> = SnapshotMessage<N, E> | UpdateMessage<N, E> | HistoryMessage<N, E>;
+/**
+ * Ingest class handles applying ingest messages to an API instance.
+ * This is the core ingestion functionality, separate from UI concerns.
+ */
+declare class Ingest<N, E> {
+    api: API<N, E>;
+    constructor(api: API<N, E>);
+    /**
+     * Apply an incoming ingest message to the API.
+     * - snapshot: rebuild state from nodes/edges (clears prior history)
+     * - update: apply incremental update
+     * - history: initialize from a set of frames (clears prior history)
+     */
+    apply(msg: IngestMessage<N, E>): Promise<void>;
+}
+
+type StatusListener$2 = (status: 'connecting' | 'connected' | 'reconnecting' | 'closed' | 'error', detail?: any) => void;
+declare class WebSocketSource<N, E> {
+    private url;
+    private ws;
+    private onMessage;
+    private onStatus?;
+    private reconnectMs;
+    private closedByUser;
+    private connectStartTime;
+    private totalTimeoutMs;
+    private totalTimeoutTimer;
+    constructor(url: string, onMessage: (msg: IngestMessage<N, E>) => void, onStatus?: StatusListener$2, reconnectMs?: number);
+    connect(): void;
+    disconnect(): void;
+    private startTotalTimeout;
+    private clearTotalTimeout;
+    private open;
+}
+
+type StatusListener$1 = (status: 'idle' | 'opened' | 'reading' | 'error' | 'closed', detail?: any) => void;
+declare class FileSystemSource<N, E> {
+    private handle;
+    private onMessage;
+    private onStatus?;
+    private timer;
+    private lastSize;
+    private filename;
+    private intervalMs;
+    constructor(onMessage: (msg: IngestMessage<N, E>) => void, onStatus?: StatusListener$1, filename?: string, intervalMs?: number);
+    openDirectory(): Promise<void>;
+    close(): void;
+    private startPolling;
+    private readNewLines;
+}
+
+type StatusListener = (status: 'idle' | 'opened' | 'reading' | 'error' | 'closed', detail?: any) => void;
+declare class FileSource<N, E> {
+    private url;
+    private onMessage;
+    private onStatus?;
+    private timer;
+    private lastETag;
+    private lastContent;
+    private intervalMs;
+    private closed;
+    constructor(url: string, onMessage: (msg: IngestMessage<N, E>) => void, onStatus?: StatusListener, intervalMs?: number);
+    connect(): Promise<void>;
+    close(): void;
+    private startPolling;
+    private poll;
+}
+
+/**
+ * Types for the Playground component
+ */
+type ExampleNode = string | {
+    id: string;
+    title?: string;
+    type?: string;
+    ports?: {
+        in?: string[];
+        out?: string[];
+    };
+};
+type ExampleEdgeEnd = string | {
+    id: string;
+    port?: string;
+    marker?: 'arrow' | 'circle' | 'diamond' | 'bar';
+};
+type ExampleEdge = string | {
+    source: ExampleEdgeEnd;
+    target: ExampleEdgeEnd;
+    type?: string;
+};
+type ExampleOptions = {
+    canvas?: {
+        colorMode?: 'light' | 'dark' | 'system';
+        nodeTypes?: Record<string, Record<string, string>>;
+        edgeTypes?: Record<string, Record<string, string>>;
+    };
+};
+type ExampleSource = {
+    type: 'file';
+    path: string;
+} | {
+    type: 'websocket';
+    url: string;
+};
+type Example = {
+    name: string;
+    description?: string;
+    nodes: ExampleNode[];
+    edges: ExampleEdge[];
+    options?: ExampleOptions;
+    source?: ExampleSource;
+};
+type PlaygroundOptions = {
+    root: string | HTMLElement;
+    examples: Record<string, Example>;
+    defaultExample?: string;
+};
+
+declare class Playground {
+    private options;
+    private rootElement;
+    private currentExample;
+    private examples;
+    private currentGraph;
+    private ingest;
+    private isEditable;
+    private wsSource;
+    private fsSource;
+    private fileSource;
+    private wsStatus;
+    private fsStatus;
+    private fileStatus;
+    private activeSourceType;
+    private wsUrl;
+    private sourceModal;
+    private helpOverlay;
+    private exampleList;
+    private graphContainerId;
+    constructor(options: PlaygroundOptions);
+    init(): Promise<void>;
+    private injectStyles;
+    private createDOM;
+    private setupEventListeners;
+    private getResolvedColorMode;
+    private getOptions;
+    private renderGraph;
+    private updateHistoryLabel;
+    private connectExampleSource;
+    private disconnectAllSources;
+    private openHelp;
+    private closeHelp;
+    private handleIngestMessage;
+    private updateSourceIcon;
+    private updateWsStatus;
+    private updateFsStatus;
+    private updateFileStatus;
+    private createSourceModal;
+    private selectSourceType;
+    private updateSourceModalContent;
+    private updateSourceModal;
+    private openSourceModal;
+    private closeSourceModal;
+    private handleConnect;
+    private handleDisconnect;
+    private handleChangeConnection;
+    private handleOpenFolder;
+    private handleCloseFolder;
+    /**
+     * Add or update an example
+     */
+    addExample(key: string, example: Example): void;
+    /**
+     * Remove an example
+     */
+    removeExample(key: string): void;
+    /**
+     * Update the example list in the DOM
+     */
+    private updateExampleList;
 }
 
 declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
 
-export { graph as default, graph };
+export { API, type APIArguments, type APIOptions, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, FileSystemSource, type HistoryMessage, Ingest, type IngestMessage, Playground, type PlaygroundOptions, type SnapshotMessage, type Update, type UpdateMessage, Updater, WebSocketSource, graph as default, graph };

package/dist/index.d.ts

@@ -75,6 +75,8 @@ type GraphOptions = {
  * Events that can be handled by the user.
  */
 type EventsOptions<N, E> = {
+    /** Called when the API has finished initializing */
+    onInit?: () => void;
     /** Called when a node is clicked */
     nodeClick?: (node: N) => void;
     /** Called when an edge is clicked */
@@ -323,11 +325,17 @@ declare class Updater<N, E> {
     constructor();
     describe(desc: string): Updater<N, E>;
     addNode(node: any): Updater<N, E>;
+    addNodes(...nodes: any[]): Updater<N, E>;
     deleteNode(node: any): Updater<N, E>;
+    deleteNodes(...nodes: any[]): Updater<N, E>;
     updateNode(node: any): Updater<N, E>;
+    updateNodes(...nodes: any[]): Updater<N, E>;
     addEdge(edge: any): Updater<N, E>;
+    addEdges(...edges: any[]): Updater<N, E>;
     deleteEdge(edge: any): Updater<N, E>;
+    deleteEdges(...edges: any[]): Updater<N, E>;
     updateEdge(edge: any): Updater<N, E>;
+    updateEdges(...edges: any[]): Updater<N, E>;
     static add<N, E>(nodes: N[], edges: E[]): Updater<N, E>;
 }
 
@@ -362,17 +370,23 @@ declare class API<N, E> {
     private nextNodeId;
     private nextEdgeId;
     private events;
-    private root;
+    root: string;
     constructor(args: APIArguments<N, E>);
+    reset(): void;
+    /** Initialize the API */
+    init(): Promise<void>;
+    private applyHistory;
     /** Current history index (0-based) */
     getHistoryIndex(): number;
     /** Current history length */
     getHistoryLength(): number;
     /** Toggle canvas editable mode without re-creating the graph */
     setEditable(editable: boolean): void;
+    /** Replace entire history (clears prior) */
+    replaceHistory(frames: Update<N, E>[]): Promise<void>;
+    /** Rebuild from snapshot (nodes/edges) */
+    replaceSnapshot(nodes: N[], edges: E[], description?: string): Promise<void>;
     private get graph();
-    /** Initialize the API */
-    init(): Promise<void>;
     /** Navigate to a different state */
     nav(nav: Nav): void;
     private applyDiff;
@@ -424,8 +438,214 @@ declare class API<N, E> {
     handleAddEdge(data: EditEdgeProps): Promise<void>;
     handleDeleteNode(id: NodeId): Promise<void>;
     handleDeleteEdge(id: EdgeId): Promise<void>;
+    /** Update theme and type styles dynamically */
+    updateStyles(options: {
+        theme?: ThemeVars;
+        nodeTypes?: Record<string, ThemeVars>;
+        edgeTypes?: Record<string, ThemeVars>;
+    }): void;
+    /** Update color mode without recreating the canvas */
+    setColorMode(colorMode: 'light' | 'dark' | 'system'): void;
+    /** Cleanup resources when the graph is destroyed */
+    destroy(): void;
+}
+
+type SnapshotMessage<N, E> = {
+    type: 'snapshot';
+    nodes: N[];
+    edges: E[];
+    description?: string;
+};
+type UpdateMessage<N, E> = {
+    type: 'update';
+    description?: string;
+} & Update<N, E>;
+type HistoryMessage<N, E> = {
+    type: 'history';
+    frames: Update<N, E>[];
+};
+type IngestMessage<N, E> = SnapshotMessage<N, E> | UpdateMessage<N, E> | HistoryMessage<N, E>;
+/**
+ * Ingest class handles applying ingest messages to an API instance.
+ * This is the core ingestion functionality, separate from UI concerns.
+ */
+declare class Ingest<N, E> {
+    api: API<N, E>;
+    constructor(api: API<N, E>);
+    /**
+     * Apply an incoming ingest message to the API.
+     * - snapshot: rebuild state from nodes/edges (clears prior history)
+     * - update: apply incremental update
+     * - history: initialize from a set of frames (clears prior history)
+     */
+    apply(msg: IngestMessage<N, E>): Promise<void>;
+}
+
+type StatusListener$2 = (status: 'connecting' | 'connected' | 'reconnecting' | 'closed' | 'error', detail?: any) => void;
+declare class WebSocketSource<N, E> {
+    private url;
+    private ws;
+    private onMessage;
+    private onStatus?;
+    private reconnectMs;
+    private closedByUser;
+    private connectStartTime;
+    private totalTimeoutMs;
+    private totalTimeoutTimer;
+    constructor(url: string, onMessage: (msg: IngestMessage<N, E>) => void, onStatus?: StatusListener$2, reconnectMs?: number);
+    connect(): void;
+    disconnect(): void;
+    private startTotalTimeout;
+    private clearTotalTimeout;
+    private open;
+}
+
+type StatusListener$1 = (status: 'idle' | 'opened' | 'reading' | 'error' | 'closed', detail?: any) => void;
+declare class FileSystemSource<N, E> {
+    private handle;
+    private onMessage;
+    private onStatus?;
+    private timer;
+    private lastSize;
+    private filename;
+    private intervalMs;
+    constructor(onMessage: (msg: IngestMessage<N, E>) => void, onStatus?: StatusListener$1, filename?: string, intervalMs?: number);
+    openDirectory(): Promise<void>;
+    close(): void;
+    private startPolling;
+    private readNewLines;
+}
+
+type StatusListener = (status: 'idle' | 'opened' | 'reading' | 'error' | 'closed', detail?: any) => void;
+declare class FileSource<N, E> {
+    private url;
+    private onMessage;
+    private onStatus?;
+    private timer;
+    private lastETag;
+    private lastContent;
+    private intervalMs;
+    private closed;
+    constructor(url: string, onMessage: (msg: IngestMessage<N, E>) => void, onStatus?: StatusListener, intervalMs?: number);
+    connect(): Promise<void>;
+    close(): void;
+    private startPolling;
+    private poll;
+}
+
+/**
+ * Types for the Playground component
+ */
+type ExampleNode = string | {
+    id: string;
+    title?: string;
+    type?: string;
+    ports?: {
+        in?: string[];
+        out?: string[];
+    };
+};
+type ExampleEdgeEnd = string | {
+    id: string;
+    port?: string;
+    marker?: 'arrow' | 'circle' | 'diamond' | 'bar';
+};
+type ExampleEdge = string | {
+    source: ExampleEdgeEnd;
+    target: ExampleEdgeEnd;
+    type?: string;
+};
+type ExampleOptions = {
+    canvas?: {
+        colorMode?: 'light' | 'dark' | 'system';
+        nodeTypes?: Record<string, Record<string, string>>;
+        edgeTypes?: Record<string, Record<string, string>>;
+    };
+};
+type ExampleSource = {
+    type: 'file';
+    path: string;
+} | {
+    type: 'websocket';
+    url: string;
+};
+type Example = {
+    name: string;
+    description?: string;
+    nodes: ExampleNode[];
+    edges: ExampleEdge[];
+    options?: ExampleOptions;
+    source?: ExampleSource;
+};
+type PlaygroundOptions = {
+    root: string | HTMLElement;
+    examples: Record<string, Example>;
+    defaultExample?: string;
+};
+
+declare class Playground {
+    private options;
+    private rootElement;
+    private currentExample;
+    private examples;
+    private currentGraph;
+    private ingest;
+    private isEditable;
+    private wsSource;
+    private fsSource;
+    private fileSource;
+    private wsStatus;
+    private fsStatus;
+    private fileStatus;
+    private activeSourceType;
+    private wsUrl;
+    private sourceModal;
+    private helpOverlay;
+    private exampleList;
+    private graphContainerId;
+    constructor(options: PlaygroundOptions);
+    init(): Promise<void>;
+    private injectStyles;
+    private createDOM;
+    private setupEventListeners;
+    private getResolvedColorMode;
+    private getOptions;
+    private renderGraph;
+    private updateHistoryLabel;
+    private connectExampleSource;
+    private disconnectAllSources;
+    private openHelp;
+    private closeHelp;
+    private handleIngestMessage;
+    private updateSourceIcon;
+    private updateWsStatus;
+    private updateFsStatus;
+    private updateFileStatus;
+    private createSourceModal;
+    private selectSourceType;
+    private updateSourceModalContent;
+    private updateSourceModal;
+    private openSourceModal;
+    private closeSourceModal;
+    private handleConnect;
+    private handleDisconnect;
+    private handleChangeConnection;
+    private handleOpenFolder;
+    private handleCloseFolder;
+    /**
+     * Add or update an example
+     */
+    addExample(key: string, example: Example): void;
+    /**
+     * Remove an example
+     */
+    removeExample(key: string): void;
+    /**
+     * Update the example list in the DOM
+     */
+    private updateExampleList;
 }
 
 declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
 
-export { graph as default, graph };
+export { API, type APIArguments, type APIOptions, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, FileSystemSource, type HistoryMessage, Ingest, type IngestMessage, Playground, type PlaygroundOptions, type SnapshotMessage, type Update, type UpdateMessage, Updater, WebSocketSource, graph as default, graph };