@invect/ui 0.0.1

package/dist/stores/executionViewStore.d.ts

@@ -0,0 +1,64 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { FlowRunStatus } from '@invect/core/types';
+interface ExecutionViewState {
+    activeFlowRunId: string | null;
+    activeFlowId: string | null;
+    selectedExecutionNodeId: string | null;
+    statusFilter: FlowRunStatus | 'all';
+    flowIdFilter: string | null;
+    page: number;
+    limit: number;
+    sortBy: 'startedAt' | 'endedAt' | 'status';
+    sortOrder: 'asc' | 'desc';
+    logsExpanded: boolean;
+    selectedLogNodeId: string | null;
+}
+interface ExecutionViewActions {
+    setActiveExecution: (flowId: string, flowRunId: string) => void;
+    clearActiveExecution: () => void;
+    selectExecutionNode: (nodeId: string | null) => void;
+    setStatusFilter: (status: FlowRunStatus | 'all') => void;
+    setFlowIdFilter: (flowId: string | null) => void;
+    clearFilters: () => void;
+    setPage: (page: number) => void;
+    setLimit: (limit: number) => void;
+    setSortBy: (sortBy: ExecutionViewState['sortBy']) => void;
+    setSortOrder: (sortOrder: ExecutionViewState['sortOrder']) => void;
+    toggleLogsExpanded: () => void;
+    setLogsExpanded: (expanded: boolean) => void;
+    selectLogNode: (nodeId: string | null) => void;
+    reset: () => void;
+}
+export type ExecutionViewStore = ExecutionViewState & ExecutionViewActions;
+export declare const useExecutionViewStore: UseBoundStore<StoreApi<ExecutionViewStore>>;
+export declare const useActiveFlowRunId: () => string | null;
+export declare const useActiveFlowId: () => string | null;
+export declare const useSelectedExecutionNodeId: () => string | null;
+export declare const useStatusFilter: () => "all" | FlowRunStatus;
+export declare const useExecutionPagination: () => {
+    page: number;
+    limit: number;
+    setPage: (page: number) => void;
+    setLimit: (limit: number) => void;
+};
+export declare const useExecutionSorting: () => {
+    sortBy: "status" | "startedAt" | "endedAt";
+    sortOrder: "asc" | "desc";
+    setSortBy: (sortBy: ExecutionViewState["sortBy"]) => void;
+    setSortOrder: (sortOrder: ExecutionViewState["sortOrder"]) => void;
+};
+export declare const useLogsState: () => {
+    logsExpanded: boolean;
+    selectedLogNodeId: string | null;
+    toggleLogsExpanded: () => void;
+    setLogsExpanded: (expanded: boolean) => void;
+    selectLogNode: (nodeId: string | null) => void;
+};
+export declare const useExecutionFilters: () => {
+    statusFilter: "all" | FlowRunStatus;
+    flowIdFilter: string | null;
+    setStatusFilter: (status: FlowRunStatus | "all") => void;
+    setFlowIdFilter: (flowId: string | null) => void;
+    clearFilters: () => void;
+};
+export {};

package/dist/stores/flow-editor.store.d.ts

@@ -0,0 +1,137 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { Node, Edge, NodeChange, EdgeChange, Connection } from '@xyflow/react';
+import { LayoutAlgorithm } from '../utils/layoutUtils';
+import { ReactFlowNodeData } from '@invect/core/types';
+export type LayoutDirection = 'TB' | 'LR' | 'BT' | 'RL';
+export type { LayoutAlgorithm } from '../utils/layoutUtils';
+export type FlowNode = Node<ReactFlowNodeData>;
+export declare function isFlowNode(node: Node): node is FlowNode;
+export declare function getNodeData(node: Node): ReactFlowNodeData | null;
+export interface FlowEditorState {
+    flowId: string | null;
+    flowVersion: string | null;
+    flowName: string;
+    nodes: Node[];
+    edges: Edge[];
+    edgesReady: boolean;
+    registryLoading: boolean;
+    nodesInitialized: boolean;
+    allNodesHaveDefinitions: boolean;
+    nodesReinitializedAfterRegistry: boolean;
+    definitionsLoadedTime: number | null;
+    currentSnapshot: string | null;
+    lastSavedSnapshot: string | null;
+    lastSavedVersionId: string | null;
+    initialDataLoaded: boolean;
+    selectedNodeId: string | null;
+    configPanelOpen: boolean;
+    toolSelectorOpen: boolean;
+    toolConfigOpen: boolean;
+    toolPanelNodeId: string | null;
+    selectedToolInstanceId: string | null;
+    configPanelToolInstanceId: string | null;
+    currentLayout: LayoutAlgorithm;
+    layoutDirection: LayoutDirection;
+    initialLayoutApplied: boolean;
+    isLoading: boolean;
+    error: string | null;
+    activeFlowRunId: string | null;
+}
+export interface FlowEditorActions {
+    setFlowId: (flowId: string | null, version?: string | null) => void;
+    setFlowName: (name: string) => void;
+    setNodes: (nodes: Node[]) => void;
+    applyNodeChanges: (changes: NodeChange[]) => void;
+    updateNodeData: (nodeId: string, data: Partial<ReactFlowNodeData>) => void;
+    addNode: (node: Node) => void;
+    removeNode: (nodeId: string) => void;
+    removeNodes: (nodeIds: string[]) => void;
+    pasteNodesAndEdges: (newNodes: Node[], newEdges: Edge[]) => void;
+    setEdges: (edges: Edge[]) => void;
+    applyEdgeChanges: (changes: EdgeChange[]) => void;
+    addEdge: (edge: Edge) => void;
+    onConnect: (connection: Connection) => void;
+    removeEdge: (edgeId: string) => void;
+    removeEdgesBySourceHandle: (nodeId: string, handleId: string) => void;
+    setEdgesReady: (ready: boolean) => void;
+    setRegistryLoading: (loading: boolean) => void;
+    setNodesInitialized: (initialized: boolean) => void;
+    setAllNodesHaveDefinitions: (hasDefinitions: boolean) => void;
+    checkAndUpdateEdgesReady: () => void;
+    selectNode: (nodeId: string | null) => void;
+    openConfigPanel: (nodeId: string) => void;
+    closeConfigPanel: () => void;
+    openToolSelector: (nodeId: string) => void;
+    closeToolSelector: () => void;
+    openToolConfig: (nodeId: string, instanceId: string) => void;
+    closeToolConfig: () => void;
+    setConfigPanelToolInstanceId: (id: string | null) => void;
+    syncFromServer: (nodes: Node[], edges: Edge[], versionId: string, flowName?: string) => void;
+    markSaved: (versionId: string) => void;
+    markDirty: () => void;
+    resetDirty: (savedVersionId?: string) => void;
+    setLayout: (layout: LayoutAlgorithm, direction?: LayoutDirection) => void;
+    setLayoutedNodes: (nodes: Node[]) => void;
+    markInitialLayoutApplied: () => void;
+    needsInitialLayout: () => boolean;
+    setLoading: (loading: boolean) => void;
+    setError: (error: string | null) => void;
+    setActiveFlowRunId: (flowRunId: string | null) => void;
+    updateNodeExecutionStatus: (nodeId: string, status: string, output?: unknown, error?: string) => void;
+    clearAllExecutionStatus: () => void;
+    populateFromRunData: (nodeExecutionMap: Record<string, {
+        inputs?: unknown;
+        outputs?: unknown;
+    }>) => void;
+    reset: () => void;
+}
+export type FlowEditorStore = FlowEditorState & FlowEditorActions;
+export declare const useFlowEditorStore: UseBoundStore<StoreApi<FlowEditorStore>>;
+export declare const useNodes: () => Node[];
+export declare const useEdges: () => Edge[];
+export declare const useEdgesReady: () => boolean;
+export declare const useIsDirty: () => boolean;
+export declare const useSelectedNodeId: () => string | null;
+export declare const useConfigPanelOpen: () => boolean;
+export declare const useToolSelectorOpen: () => boolean;
+export declare const useToolConfigOpen: () => boolean;
+export declare const useToolPanelNodeId: () => string | null;
+export declare const useSelectedToolInstanceId: () => string | null;
+export declare const useConfigPanelToolInstanceId: () => string | null;
+export declare const useFlowName: () => string;
+export declare const useCurrentLayout: () => LayoutAlgorithm;
+export declare const useLayoutDirection: () => LayoutDirection;
+export declare const useInitialLayoutApplied: () => boolean;
+export declare const useIsLoading: () => boolean;
+export declare const useFlowError: () => string | null;
+export declare const useFlowEditorSelection: () => {
+    selectedNodeId: string | null;
+    configPanelOpen: boolean;
+    selectNode: (nodeId: string | null) => void;
+    openConfigPanel: (nodeId: string) => void;
+    closeConfigPanel: () => void;
+};
+export declare const useFlowEditorLayout: () => {
+    currentLayout: LayoutAlgorithm;
+    layoutDirection: LayoutDirection;
+    initialLayoutApplied: boolean;
+    setLayout: (layout: LayoutAlgorithm, direction?: LayoutDirection) => void;
+    setLayoutedNodes: (nodes: Node[]) => void;
+    markInitialLayoutApplied: () => void;
+    needsInitialLayout: () => boolean;
+};
+export declare const useNode: (nodeId: string | null) => Node | null;
+export declare const useNodeMetadata: () => Record<string, {
+    name: string;
+    type?: string;
+}>;
+export declare const useIncomingEdges: (nodeId: string | null) => Edge[];
+export declare const useOutgoingEdges: (nodeId: string | null) => Edge[];
+export declare const useUpstreamNodes: (nodeId: string | null) => Node[];
+export declare const useDownstreamNodes: (nodeId: string | null) => Node[];
+export declare const useFlowStats: () => {
+    nodeCount: number;
+    edgeCount: number;
+    isDirty: boolean;
+    isLoading: boolean;
+};

package/dist/stores/flowEditorStore.d.ts

@@ -0,0 +1 @@
+export * from '../components/flow-editor/flow-editor.store';

package/dist/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from './uiStore';
+export * from './executionViewStore';

package/dist/stores/uiStore.d.ts

@@ -0,0 +1,45 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+export type ModalType = 'createFlow' | 'createCredential' | 'editCredential' | 'confirm' | 'executeFlow' | 'deleteConfirm' | null;
+export type SidebarTab = 'nodes' | 'settings' | 'history';
+interface UIState {
+    sidebarCollapsed: boolean;
+    activeSidebarTab: SidebarTab;
+    activeModal: ModalType;
+    modalData: Record<string, unknown>;
+    validationPanelOpen: boolean;
+    logsPanelOpen: boolean;
+    nodeSidebarOpen: boolean;
+    toolbarCollapsed: boolean;
+}
+interface UIActions {
+    toggleSidebar: () => void;
+    setSidebarCollapsed: (collapsed: boolean) => void;
+    setSidebarTab: (tab: SidebarTab) => void;
+    openModal: (modal: NonNullable<ModalType>, data?: Record<string, unknown>) => void;
+    closeModal: () => void;
+    setModalData: (data: Record<string, unknown>) => void;
+    toggleValidationPanel: () => void;
+    setValidationPanelOpen: (open: boolean) => void;
+    toggleLogsPanel: () => void;
+    setLogsPanelOpen: (open: boolean) => void;
+    toggleNodeSidebar: () => void;
+    setNodeSidebarOpen: (open: boolean) => void;
+    toggleToolbarCollapsed: () => void;
+    reset: () => void;
+}
+export type UIStore = UIState & UIActions;
+export declare const useUIStore: UseBoundStore<StoreApi<UIStore>>;
+export declare const useSidebarCollapsed: () => boolean;
+export declare const useActiveSidebarTab: () => SidebarTab;
+export declare const useActiveModal: () => ModalType;
+export declare const useModalData: () => Record<string, unknown>;
+export declare const useValidationPanelOpen: () => boolean;
+export declare const useLogsPanelOpen: () => boolean;
+export declare const useNodeSidebarOpen: () => boolean;
+export declare const useModals: () => {
+    activeModal: ModalType;
+    modalData: Record<string, unknown>;
+    openModal: (modal: NonNullable<ModalType>, data?: Record<string, unknown>) => void;
+    closeModal: () => void;
+};
+export {};

package/dist/types/agent-tools.types.d.ts

@@ -0,0 +1,53 @@
+import { AppendixPosition } from '../components/nodes/NodeAppendix';
+/**
+ * Tool category for organization in UI
+ * Matches AgentToolCategory from @invect/core
+ */
+export type ToolCategory = 'data' | 'web' | 'code' | 'utility' | 'custom';
+/**
+ * Simplified tool definition for display in the UI
+ * Matches the essential fields from AgentToolDefinition in core
+ */
+export interface AgentToolDisplay {
+    /** Unique tool identifier (snake_case) */
+    id: string;
+    /** Human-readable name */
+    name: string;
+    /** Tool category for organization and styling */
+    category: ToolCategory;
+    /** Description (optional for display, shown in tooltips) */
+    description?: string;
+}
+/**
+ * Convert from backend AgentToolDefinition to frontend display format
+ * This is a utility type - the actual conversion is done in components
+ */
+export type AgentToolDefinitionToDisplay<T extends {
+    id: string;
+    name: string;
+    category: ToolCategory;
+    description?: string;
+}> = Pick<T, 'id' | 'name' | 'category' | 'description'>;
+/**
+ * Agent node data extensions for tools
+ */
+export interface AgentNodeToolsData {
+    /** Resolved tools for display (populated by frontend from API) */
+    tools?: AgentToolDisplay[];
+    /** Position of the tools appendix */
+    toolsPosition?: AppendixPosition;
+}
+/**
+ * Event handlers for agent tool interactions
+ */
+export interface AgentToolHandlers {
+    /** Called when user clicks "Add Tool" button */
+    onAddTool?: () => void;
+    /** Called when user clicks on a tool (to configure it) */
+    onToolClick?: (tool: AgentToolDisplay) => void;
+    /** Called when user clicks remove button on a tool */
+    onRemoveTool?: (toolId: string) => void;
+    /** Called when user changes the tools appendix position */
+    onToolsPositionChange?: (position: AppendixPosition) => void;
+}
+export type { AppendixPosition };

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './node-definition.types';
+export * from './agent-tools.types';

package/dist/types/node-definition.types.d.ts

@@ -0,0 +1,85 @@
+export interface NodeHandleDefinition {
+    id: string;
+    label: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+}
+export interface NodeParamField {
+    name: string;
+    label: string;
+    type: 'text' | 'textarea' | 'select' | 'number' | 'boolean' | 'json' | 'code' | 'credential' | 'switch-cases';
+    description?: string;
+    placeholder?: string;
+    defaultValue?: unknown;
+    options?: {
+        label: string;
+        value: string | number;
+        description?: string;
+    }[];
+    required?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
+    extended?: boolean;
+    credentialTypes?: ('oauth2' | 'api_key' | 'basic_auth' | 'database' | 'llm')[];
+    oauth2Providers?: string[];
+    requiredScopes?: string[];
+    /** When present, this field's options should be loaded from the server. */
+    loadOptions?: {
+        /** Sibling field names that trigger a reload when they change. */
+        dependsOn: string[];
+    };
+}
+export interface NodeDefinition {
+    /**
+     * Node type identifier. Can be a GraphNodeType enum value (e.g. "MODEL")
+     * or a provider action ID (e.g. "gmail.list_messages").
+     */
+    type: string;
+    label: string;
+    description: string;
+    icon?: string;
+    /**
+     * Provider info for grouping in the node palette.
+     * Actions populate this from their ProviderDef; legacy nodes may leave it undefined.
+     */
+    provider?: {
+        id: string;
+        name: string;
+        icon?: string;
+        /** Raw SVG markup for custom provider branding. Takes precedence over `icon`. */
+        svgIcon?: string;
+    };
+    /**
+     * Single unified input handle definition. Undefined when the node does not accept inbound edges (e.g. Flow Input node).
+     */
+    input?: NodeHandleDefinition;
+    /**
+     * Fixed output handles.
+     * For nodes with `dynamicOutputs`, these are placeholders —
+     * the frontend derives actual handles from the node's params.
+     */
+    outputs: NodeHandleDefinition[];
+    /**
+     * When true, output handles are derived from the node's params at render
+     * time (e.g. switch node cases) instead of using the static `outputs` array.
+     */
+    dynamicOutputs?: boolean;
+    /**
+     * Configuration fields for the node (displayed in the sidebar/form).
+     */
+    paramFields: NodeParamField[];
+    /**
+     * Default values for parameters.
+     */
+    defaultParams?: Record<string, unknown>;
+    /**
+     * Maximum number of instances of this node type allowed per flow.
+     * Undefined = unlimited.
+     */
+    maxInstances?: number;
+    /**
+     * When true, hide this node from the palette (deprecated but still executable).
+     */
+    hidden?: boolean;
+}

package/dist/types/plugin.types.d.ts

@@ -0,0 +1,100 @@
+import { ComponentType, ReactNode } from 'react';
+/**
+ * A frontend plugin that contributes UI to the Invect application.
+ * Plugins are registered via `<Invect plugins={[myPlugin]} />`.
+ */
+export interface InvectFrontendPlugin {
+    /** Unique plugin ID — should match backend plugin ID for manifest resolution */
+    id: string;
+    /** Display name */
+    name?: string;
+    /** Add items to the sidebar navigation */
+    sidebar?: PluginSidebarContribution[];
+    /**
+     * Component rendered at the very bottom of the sidebar.
+     * Receives `collapsed` and `basePath` props to adapt layout and build links.
+     * Typically used for user avatar / profile link.
+     * Only the first plugin that provides this wins.
+     */
+    sidebarFooter?: ComponentType<{
+        collapsed: boolean;
+        basePath: string;
+    }>;
+    /** Add top-level routes (pages) */
+    routes?: PluginRouteContribution[];
+    /** Add tabs to contextual panels (flow editor right panel, etc.) */
+    panelTabs?: PluginPanelTabContribution[];
+    /** Add action buttons/components to contextual headers */
+    headerActions?: PluginHeaderActionContribution[];
+    /**
+     * Named component implementations — resolved from backend componentIds.
+     * Key = componentId (e.g. 'rbac.FlowAccessPanel'), value = React component.
+     */
+    components?: Record<string, ComponentType<Record<string, unknown>>>;
+    /** Wrap the React tree with additional providers (auth context, etc.) */
+    providers?: ComponentType<{
+        children: ReactNode;
+    }>[];
+    /**
+     * Inject headers into every API request.
+     * Called before each request. Return headers to merge.
+     */
+    apiHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+    /**
+     * Check if the current user has a specific permission.
+     * Returns true/false to override, or undefined to defer to default.
+     */
+    checkPermission?: (permission: string, context?: PermissionContext) => boolean | undefined;
+}
+export interface PluginSidebarContribution {
+    label: string;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    path: string;
+    /** Badge text or function returning badge text */
+    badge?: string | (() => string | undefined);
+    /** Position hint: 'top' (after defaults), 'bottom' (before theme toggle) */
+    position?: 'top' | 'bottom';
+    /** Required permission — item hidden if check fails */
+    permission?: string;
+}
+export interface PluginRouteContribution {
+    path: string;
+    component: ComponentType<{
+        basePath: string;
+    }>;
+    /** If true, route is nested under the flow layout */
+    flowScoped?: boolean;
+}
+export interface PluginPanelTabContribution {
+    /** Where the tab appears */
+    context: 'flowEditor' | 'nodeConfig';
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    component: ComponentType<PanelTabProps>;
+    /** Required permission — tab hidden if check fails */
+    permission?: string;
+}
+export interface PluginHeaderActionContribution {
+    /** Where the action appears */
+    context: 'flowHeader' | 'flowList';
+    component: ComponentType<HeaderActionProps>;
+    /** Required permission — action hidden if check fails */
+    permission?: string;
+}
+export interface PanelTabProps {
+    flowId: string;
+    basePath: string;
+}
+export interface HeaderActionProps {
+    flowId?: string;
+    basePath: string;
+}
+export interface PermissionContext {
+    resourceType?: string;
+    resourceId?: string;
+    flowId?: string;
+}

package/dist/utils/credentialBranding.d.ts

@@ -0,0 +1,8 @@
+import { Credential } from '../api/types';
+export interface CredentialBranding {
+    providerId?: string;
+    icon: string;
+    providerLabel: string | null;
+}
+export declare function getCredentialBranding(credential: Credential): CredentialBranding;
+export declare function getCredentialProviderLabel(credential: Credential): string | null;

package/dist/utils/credentialFiltering.d.ts

@@ -0,0 +1,20 @@
+import { Credential } from '../api/types';
+interface CredentialFieldHints {
+    /** OAuth2 provider IDs to match (e.g., ["google"]) */
+    oauth2Providers?: string[];
+    /** Credential types to match (e.g., ["oauth2", "api_key"]) */
+    credentialTypes?: string[];
+}
+/**
+ * Filter a list of credentials to those relevant for a specific credential field.
+ *
+ * Matching rules:
+ * 1. If the field specifies `oauth2Providers`, show credentials whose
+ *    `metadata.oauth2Provider` matches **plus** any non-OAuth2 credentials
+ *    (apiKey, bearer, etc.) that could serve as manual API key fallbacks.
+ * 2. If the field specifies `credentialTypes` (without oauth2Providers),
+ *    filter by `authType`.
+ * 3. If neither is specified, return all credentials (no filtering).
+ */
+export declare function filterCredentialsForField(credentials: Credential[], field: CredentialFieldHints): Credential[];
+export {};

package/dist/utils/flowTransformations.d.ts

@@ -0,0 +1,16 @@
+import { Node, Edge } from '@xyflow/react';
+import { InvectDefinition } from '@invect/core/types';
+/**
+ * Transform ReactFlow nodes and edges back to InvectDefinition format for saving
+ */
+export declare function transformToInvectDefinition(nodes: Node[], edges: Edge[]): InvectDefinition;
+/**
+ * Compute a serialized snapshot of the flow definition for dirty-checking.
+ * Uses `transformToInvectDefinition` to strip ReactFlow-internal state
+ * (selected, measured, executionStatus, etc.), then JSON.stringify for
+ * cheap string equality comparison.
+ *
+ * This is only called inside Zustand store actions (on structural mutations
+ * and saves), NOT inside selectors — so it doesn't run on every render.
+ */
+export declare function computeSnapshot(nodes: Node[], edges: Edge[]): string;

package/dist/utils/layoutUtils.d.ts

@@ -0,0 +1,23 @@
+import { Node, Edge } from '@xyflow/react';
+export interface Position {
+    x: number;
+    y: number;
+}
+export type LayoutAlgorithm = 'dagre' | 'elkjs';
+export interface LayoutOptions {
+    algorithm: LayoutAlgorithm;
+    direction?: 'TB' | 'BT' | 'LR' | 'RL';
+    nodeSpacing?: number;
+    rankSpacing?: number;
+    /** Maximum width before wrapping to a new row (only applies to LR/RL layouts, 0 = no wrapping) */
+    maxWidth?: number;
+    /** Vertical spacing between wrapped rows */
+    rowSpacing?: number;
+}
+/**
+ * Main layout function that applies the selected algorithm
+ */
+export declare const applyLayout: (nodes: Node[], edges: Edge[], algorithm: LayoutAlgorithm, direction?: "TB" | "BT" | "LR" | "RL", options?: LayoutOptions) => Promise<{
+    nodes: Node[];
+    edges: Edge[];
+}>;

package/dist/utils/nodeReferenceUtils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Utilities for generating and managing node reference IDs
+ */
+/**
+ * Convert a display name to a snake_case reference ID
+ * Only allows alphanumeric characters and underscores
+ * Truncates to MAX_REFERENCE_ID_LENGTH chars
+ */
+export declare function toReferenceId(displayName: string): string;
+/**
+ * Generate a unique display name for a new node, avoiding conflicts
+ * Returns names like "AI Model", "AI Model 2", "AI Model 3", etc.
+ */
+export declare function generateUniqueDisplayName(baseDisplayName: string, existingNodes: {
+    data?: {
+        display_name?: string;
+    };
+}[]): string;
+/**
+ * Generate a unique reference ID for a new node, avoiding conflicts
+ * Truncates to MAX_REFERENCE_ID_LENGTH while preserving the increment suffix
+ */
+export declare function generateUniqueReferenceId(displayName: string, existingNodes: {
+    data?: {
+        reference_id?: string;
+    };
+}[]): string;
+/**
+ * Update reference ID when display name changes
+ * Ensures uniqueness among existing nodes
+ */
+export declare function updateReferenceIdForDisplayName(newDisplayName: string, currentNodeId: string, existingNodes: {
+    id: string;
+    data?: {
+        reference_id?: string;
+    };
+}[]): string;

package/dist/vendor.d.ts

@@ -0,0 +1,5 @@
+declare module 'react' {
+  interface CSSProperties {
+    WebkitTextSecurity?: 'none' | 'circle' | 'disc' | 'square';
+  }
+}