@squeed/flow-sdk 1.1.16 → 2.0.2

package/dist/index.d.cts

@@ -0,0 +1,1240 @@
+import { Context } from 'react';
+import { CSSProperties } from 'react';
+import { DetailedHTMLProps } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { IconButtonProps } from '@chakra-ui/react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MemoExoticComponent } from 'react';
+import { MutableRefObject } from 'react';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
+import { StyledComponent } from '@emotion/styled';
+import { Theme } from '@emotion/react';
+
+/** Add a child under `parentAddress`. Returns the new node's address. */
+export declare function addChild(json: SqueedJson, parentAddress: string, child: any, key?: string): {
+    json: SqueedJson;
+    address: string;
+};
+
+export declare function addConnection(json: SqueedJson, sourceAddress: string, connection: SqueedConnection): SqueedJson;
+
+/** "root.a.b.#" → ["a", "b"] */
+export declare function addressToPath(address: string): string[];
+
+/** `$target` cross-link (the compiler supports one per node; an existing one is replaced) */
+export declare const addTargetEdge: (json: SqueedJson, sourceAddress: string, targetAddress: string, label?: string) => SqueedJson;
+
+/**
+ * For hand-built graphs (no Squeed JSON): hide everything downstream of a node whose
+ * `data.config.collapsed` is true, plus the edges touching hidden nodes.
+ */
+export declare function applyCollapsed(nodes: FlowDiagramNode[], edges: FlowDiagramEdge[]): {
+    nodes: FlowDiagramNode[];
+    edges: FlowDiagramEdge[];
+};
+
+export declare function applyFormChange(data: SqueedJson, request: Omit<FormChange, "data" | "previousValue">, handler?: (event: FormChange) => FormEdit[] | void): SqueedJson;
+
+export declare function applyStateEdits(state: SqueedJson, edits: readonly FormEdit[]): SqueedJson;
+
+export declare type BackgroundPattern = "dot" | "steel" | "grid" | "none";
+
+export declare type BackgroundVariant = BackgroundPattern | "transparent";
+
+/**
+ * Wrap consumer callbacks so every toolbar/edit event is applied to `json`
+ * with Squeed `$` keys and delivered via `onJsonChange`. Granular callbacks
+ * still fire first (for logging/analytics) — consumers must not also mutate.
+ */
+export declare function bindSqueedCallbacks(json: SqueedJson, compiledEdges: FlowDiagramEdge[], callbacks: FlowDiagramCallbacks, onJsonChange?: (json: SqueedJson, change: SqueedChange) => void, formSchema?: FormSchema): FlowDiagramCallbacks;
+
+export declare const BottomBar: MemoExoticComponent<    {
+(): JSX_2.Element;
+displayName: string;
+}>;
+
+/** Props passed to custom bottom bar renderer */
+export declare interface BottomBarRenderProps {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    direction: FlowDirection;
+    isZoomMode: boolean;
+    setIsZoomMode: (v: boolean) => void;
+    isMultiSelectMode: boolean;
+    setIsMultiSelectMode: (v: boolean) => void;
+    isDragMode: boolean;
+    setIsDragMode: (v: boolean) => void;
+    isEdgeHandlesEnabled: boolean;
+    setIsEdgeHandlesEnabled: (v: boolean) => void;
+    isArrayNodeMode: boolean;
+    setIsArrayNodeMode: (v: boolean) => void;
+    selectedNodeIds: string[];
+    selectedNodeData: any[];
+    selectedEdgeId: string | null;
+    selectedEdgeData: any;
+    onNodeDeselect: () => void;
+    onEdgeDeselect: () => void;
+    callbacks: FlowDiagramCallbacks;
+}
+
+/** Centre + size, model units (matches cytoscape's node position/width/height) */
+declare interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    outline?: Point[];
+}
+
+export declare type BuiltInEdgeType = "straight" | "bezier" | "orthogonal" | "rounded-orthogonal";
+
+export declare function CompactPropertyLayoutToggle({ label, }?: {
+    label?: string;
+}): JSX_2.Element;
+
+export declare interface CompileOptions {
+    title?: string;
+    /** Root in the middle, children fan out both ways (direction "C") */
+    isCenter?: boolean;
+    hideDefaultObject?: boolean;
+    separateObjectKeys?: boolean;
+}
+
+/**
+ * `createFlowDiagram` + post-pass:
+ * - deterministic edge ids (`source->target[#n]`) so selection survives regeneration
+ * - honors `$isEdgeDashed` / `$edgeColor`, which the compiler doesn't read
+ * - `$label` wins over the compiler's shared-config `headerTitle` (it leaks the previous node's title)
+ */
+export declare function compileSqueed(json: SqueedJson, opts?: CompileOptions): {
+    nodes: FlowDiagramNode[];
+    edges: FlowDiagramEdge[];
+};
+
+export declare function connectionIssue(contract: WorkflowContract, edge: FlowDiagramEdge["data"]): string | undefined;
+
+export declare function ConnectionsOnlyToggle({ checked, onChange, disabled, label, }: ConnectionsOnlyToggleProps): JSX_2.Element;
+
+export declare interface ConnectionsOnlyToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+}
+
+export declare const contentObjTheme: (color: any) => {
+    background: any;
+    highlight: string;
+    border: string;
+    property: string;
+    boolean: string;
+    string: string;
+    number: string;
+};
+
+declare interface ContractPort {
+    kind: "input" | "config" | "output" | "error";
+    resourceType?: string;
+    multiple?: boolean;
+}
+
+export declare interface ContractProperty {
+    type: ContractType;
+    optional: boolean;
+}
+
+export declare type ContractType = {
+    kind: "json";
+} | {
+    kind: "string" | "number" | "integer" | "boolean" | "null";
+} | {
+    kind: "literal";
+    value: string | number | boolean | null;
+} | {
+    kind: "union";
+    types: ContractType[];
+} | {
+    kind: "array";
+    items: ContractType;
+} | {
+    kind: "object";
+    properties: Record<string, ContractProperty>;
+    additionalProperties?: ContractType;
+    ports?: Record<string, ContractPort>;
+};
+
+export declare function createFlowDiagram(jsnObjct: any, path?: string, nodes?: any[], edges?: any[], activeLabel?: string, flowConfig?: any, nodeConfig?: any): {
+    nodes: any[];
+    edges: any[];
+};
+
+export declare function createFlowDocumentActions(options: FlowDocumentActionOptions): {
+    replaceJson(value: unknown): SqueedJson;
+    replaceState(value: unknown): SqueedJson;
+};
+
+export declare function createFormNode(document: SqueedJson, source: string, schema?: FormSchema): {
+    address: string;
+    json: SqueedJson;
+};
+
+export declare function createJsonPlayback<Document>(options: JsonStreamOptions<Document> & {
+    source: string;
+    durationMs?: number;
+    tickMs?: number;
+    onChange: (state: JsonPlaybackState) => void;
+    onError: (error: unknown) => void;
+}): {
+    play(): void;
+    pause(): void;
+    seek(next: number): void;
+    dispose(): void;
+};
+
+export declare function createJsonStream<Document>(options: JsonStreamOptions<Document>): {
+    snapshot: (text: string) => void;
+    append(chunk: string): void;
+    flush: () => void;
+    finish(): Document;
+    cancel(): void;
+};
+
+export declare interface CustomEdgeContext {
+    edge: FlowDiagramEdge["data"];
+    source: Box;
+    target: Box;
+    sourcePoint: Point;
+    targetPoint: Point;
+    direction: FlowDirection;
+    sourceY?: number;
+    targetY?: number;
+    inverted: boolean;
+    defaultGeometry: CustomEdgeGeometry;
+}
+
+export declare type CustomEdgeFactory = (context: CustomEdgeContext) => CustomEdgeGeometry | null;
+
+export declare interface CustomEdgeGeometry {
+    d: string;
+    arrow?: string;
+    label: {
+        x: number;
+        y: number;
+        angle: number;
+    };
+}
+
+export declare const DEFAULT_PALETTE: string[];
+
+export declare function DiagramAppearanceControls(): JSX_2.Element;
+
+export declare function downloadSvg(canvas: HTMLElement, filename?: string): Promise<void>;
+
+export declare const DynamicIcon: ({ name, svg, ...props }: {
+    [x: string]: any;
+    name: any;
+    svg?: boolean;
+}) => JSX_2.Element;
+
+export declare type EdgeAnimationVariant = "dashed" | "traveling";
+
+export declare type EdgeMode = "auto" | "nodes" | "properties" | "workflow";
+
+/** Bottom-bar contents while an edge is selected */
+export declare function EdgeTools({ edgeId, onClose, }: {
+    edgeId: string;
+    onClose: () => void;
+}): JSX_2.Element;
+
+export declare const EditableLabel: ({ nodeId, label, color, fontWeight, fontSize, wrap, isEditing, onEditStart, onEditEnd, }: EditableLabelProps) => JSX_2.Element;
+
+declare interface EditableLabelProps {
+    nodeId: string;
+    label: string;
+    color: string;
+    fontWeight?: string;
+    fontSize?: string;
+    wrap?: boolean;
+    isEditing: boolean;
+    onEditStart: () => void;
+    onEditEnd: () => void;
+}
+
+export declare function ErrorToast({ message, onDismiss, }: {
+    message: string;
+    onDismiss: () => void;
+}): ReactPortal;
+
+export declare function exportSvg(canvas: HTMLElement): Promise<string>;
+
+export declare function FlowDiagram({ loading, loader, ...props }: FlowDiagramProps): JSX_2.Element;
+
+/** Event callbacks for the flow diagram */
+export declare interface FlowDiagramCallbacks {
+    onAllNodesIconLabelChange?: (enabled: boolean) => void;
+    onNodeCreateRequest?: (request: FlowNodeCreationRequest) => boolean;
+    onFormSchemaChange?: (schema: FormSchema | undefined) => void;
+    onFormChange?: (event: FormChange) => FormEdit[] | void;
+    resolveFormOptions?: (request: FormOptionsRequest) => Promise<FormOption[]> | FormOption[];
+    onSpacingChange?: (spacing: NodeSpacing) => void;
+    onEdgeRadiusChange?: (radius: number) => void;
+    onCompactPropertyLayoutChange?: (enabled: boolean) => void;
+    onBackgroundVariantChange?: (variant: BackgroundVariant) => void;
+    /** Fires when a node is clicked/selected */
+    onNodeSelect?: (nodeId: string, nodeData: any, modifiers?: NodeSelectionModifiers) => void;
+    onBackgroundClick?: () => void;
+    /** Fires when selection is cleared */
+    onNodeDeselect?: () => void;
+    /** Fires on double-click of a node */
+    onNodeDoubleClick?: (nodeId: string, nodeData: any) => void;
+    onNodeViewModeChange?: (nodeId: string, mode: NodeViewMode) => void;
+    onNodeViewToggle?: (nodeId: string) => void;
+    onNodeTypeViewChange?: (nodeId: string, view: NodeTypeView | undefined) => void;
+    /** Fires when a node is created via edge drawing into empty space */
+    onNodeCreate?: (params: {
+        type: string;
+        position: any;
+        sourceNodeId?: string;
+        isArrayMode?: boolean;
+    }) => void;
+    /** Fires when a node is deleted */
+    onNodeDelete?: (nodeId: string, nodeData: any) => void;
+    /** Fires when a node label is edited inline */
+    onNodeLabelChange?: (nodeId: string, newLabel: string) => void;
+    onNodeContentChange?: (nodeId: string, content: string) => void;
+    /** Fires when a node's collapse toggle is clicked */
+    onNodeCollapse?: (nodeId: string, collapsed: boolean) => void;
+    /** Fires when a node's color is changed via the toolbar */
+    onNodeColorChange?: (nodeId: string, colorType: "text" | "bg", color: string) => void;
+    /** Fires when a node's icon is changed via the toolbar */
+    onNodeIconChange?: (nodeId: string, iconName: string) => void;
+    onNodeOutlineChange?: (nodeId: string, outline: boolean) => void;
+    onNodeBorderColorChange?: (nodeId: string, color: string) => void;
+    onNodeBorderStyleChange?: (nodeId: string, style: "solid" | "dashed") => void;
+    onNodeBorderWidthChange?: (nodeId: string, width: number | undefined) => void;
+    onNodeBorderRadiusChange?: (nodeId: string, radius: number | undefined) => void;
+    onNodeAnimationChange?: (nodeId: string, animated: boolean) => void;
+    onNodeAnimationVariantChange?: (nodeId: string, variant: NodeAnimationVariant) => void;
+    onEdgeAnimationVariantChange?: (edgeId: string, variant: EdgeAnimationVariant) => void;
+    /** Fires when a hover overlay action is clicked */
+    onNodeHoverAction?: (actionId: string, nodeId: string, nodeData: any) => void;
+    /** Fires when a new edge is drawn between two nodes */
+    onEdgeCreate?: (sourceId: string, targetId: string, properties?: FlowEdgeProperties) => void;
+    /** Fires when an edge is clicked/selected */
+    onEdgeSelect?: (edgeId: string, edgeData: any) => void;
+    /** Fires when edge selection is cleared */
+    onEdgeDeselect?: () => void;
+    /** Fires when an edge is removed */
+    onEdgeRemove?: (edgeId: string, edgeData: any) => void;
+    /** Fires when the user deletes an edge from the selection toolbar */
+    onEdgeDelete?: (edgeId: string, edgeData: any) => void;
+    /** Fires when an edge's color is changed */
+    onEdgeColorChange?: (edgeId: string, color: string) => void;
+    onEdgeTypeChange?: (edgeId: string, type: string | undefined) => void;
+    onEdgeIconChange?: (edgeId: string, icon: string) => void;
+    /** Fires when an edge's label is changed */
+    onEdgeLabelChange?: (edgeId: string, newLabel: string) => void;
+    /** Fires when an edge's style is changed (solid, dashed, animated) */
+    onEdgeStyleChange?: (edgeId: string, style: "solid" | "dashed" | "animated") => void;
+    /** Fires when the viewport (pan/zoom) changes */
+    onViewportChange?: (viewport: {
+        pan: {
+            x: number;
+            y: number;
+        };
+        zoom: number;
+    }) => void;
+    /** Fires when the flow direction changes via bottom bar */
+    onDirectionChange?: (direction: FlowDirection) => void;
+    onThemeColorChange?: (color: string) => void;
+    onEdgeModeChange?: (mode: EdgeMode) => void;
+    onWorkflowContractChange?: (contract: WorkflowContract | undefined) => void;
+    /** Fires when array/set mode toggles in bottom bar */
+    onArrayModeChange?: (isArrayMode: boolean) => void;
+    /** Fires once the renderer is ready with the engine handle (zoom/pan/fit/coordinate helpers) */
+    onInit?: (engine: FlowEngine) => void;
+    /** Fires after layout and measurement settle; viewport-only changes do not trigger it. */
+    onLayoutComplete?: (engine: FlowEngine) => void;
+    /**
+     * Fires with the updated Squeed JSON after any toolbar/inline edit. The SDK applies the
+     * edit with `$` schema keys; store the result and pass it back as `json`.
+     */
+    onJsonChange?: (json: Record<string, any> | any[], change: SqueedChangeInfo) => void;
+}
+
+/** Configuration for the flow diagram appearance and behavior */
+export declare interface FlowDiagramConfig {
+    bottomBarExtra?: React.ReactNode;
+    /** Animate fit/center/focus actions for 300ms by default. Per-action flags override this; reduced motion stays instant. */
+    animateViewport?: boolean;
+    formSchema?: FormSchema;
+    spacing?: NodeSpacing;
+    edgeRadius?: number;
+    backgroundVariant?: BackgroundVariant;
+    edgeType?: BuiltInEdgeType | (string & {});
+    customEdgeTypes?: Record<string, CustomEdgeFactory>;
+    /** Layout direction: "LR", "RL", "TB", "BT" */
+    direction?: FlowDirection;
+    nodeAlignment?: NodeAlignment;
+    edgeMode?: EdgeMode;
+    compactPropertyLayout?: boolean;
+    nodeViewModes?: Record<string, NodeViewMode>;
+    workflowContract?: WorkflowContract;
+    /** Layout algorithm */
+    layout?: LayoutAlgorithm;
+    /** Theme accent color (Chakra token e.g. "blue.500") */
+    themeColor?: string;
+    /** Light or dark mode */
+    colorMode?: "light" | "dark";
+    /** Background pattern style */
+    backgroundPattern?: BackgroundPattern;
+    /** Background color override */
+    backgroundColor?: string;
+    /** Edge/line color override */
+    edgeColor?: string;
+    /** Default style for all compound/container nodes (per-node `viewProps` override it) */
+    parentNodeStyle?: ParentNodeStyle;
+    /** Min zoom level (default: 0.01) */
+    minZoom?: number;
+    /** Max zoom level (default: 1.5) */
+    maxZoom?: number;
+    /** Initial viewport position and zoom */
+    initialViewport?: {
+        pan: {
+            x: number;
+            y: number;
+        };
+        zoom: number;
+    };
+    /** Enable edge drawing handles (default: true) */
+    edgeHandles?: boolean;
+    /** Disable all interactions */
+    readOnly?: boolean;
+    /** Enable inline node label editing */
+    editable?: boolean;
+    /** Actions rendered in the node hover overlay */
+    nodeOverlayActions?: NodeOverlayAction[];
+    /** Custom render function for node hover overlay */
+    renderNodeOverlay?: (props: NodeOverlayProps) => React.ReactNode;
+    /** Custom render function for multi-select toolbar */
+    renderSelectedNodeToolbar?: (props: SelectedNodeToolbarProps) => React.ReactNode;
+    /** Custom render function for edge selection toolbar */
+    renderSelectedEdgeToolbar?: (props: SelectedEdgeToolbarProps) => React.ReactNode;
+    /** Custom render function to replace the entire built-in bottom bar */
+    renderBottomBar?: (props: BottomBarRenderProps) => React.ReactNode;
+    /** Built-in node/edge selection toolbars (bottom bar swaps to them on select). `false` disables. */
+    selectionToolbar?: SelectionToolbarConfig | false;
+    /** Custom node view components to override SDK defaults. Keys: objectView, arrayView, text, parentContainer */
+    customViews?: Record<string, React.ComponentType<any>>;
+    /** Disable built-in keyboard shortcuts (Z/M/D) when the consumer handles its own */
+    disableKeyboardShortcuts?: boolean;
+    /** Externally controlled zoom mode (overrides internal state when provided) */
+    isZoomMode?: boolean;
+    /** Externally controlled multi-select mode (overrides internal state when provided) */
+    isMultiSelectMode?: boolean;
+    /** Externally controlled edge draw mode (overrides internal state when provided) */
+    isEdgeHandlesEnabled?: boolean;
+    /** Externally controlled drag/pan mode (overrides internal state when provided) */
+    isDragMode?: boolean;
+}
+
+export declare interface FlowDiagramContextValue {
+    allNodesIconLabel: boolean;
+    setAllNodesIconLabel: (enabled: boolean) => void;
+    nodeViewModes: Record<string, NodeViewMode>;
+    setNodeViewMode: (nodeId: string, mode: NodeViewMode) => void;
+    spacing: number;
+    edgeRadius: number | undefined;
+    setEdgeRadius: (radius: number) => void;
+    setSpacing: (spacing: NodeSpacing) => void;
+    backgroundVariant: BackgroundVariant;
+    setBackgroundVariant: (variant: BackgroundVariant) => void;
+    setEdgeMode: (mode: EdgeMode) => void;
+    compactPropertyLayout: boolean;
+    setCompactPropertyLayout: (enabled: boolean) => void;
+    workflowContract?: WorkflowContract;
+    setWorkflowContract: (contract: WorkflowContract | undefined) => void;
+    themeColor: string;
+    setThemeColor: (color: string) => void;
+    backgroundSelected: boolean;
+    setBackgroundSelected: (selected: boolean) => void;
+    edgeColor: string;
+    colorMode: "light" | "dark";
+    direction: string;
+    nodeAlignment: NodeAlignment;
+    edgeMode: EdgeMode;
+    parentNodeStyle?: ParentNodeStyle;
+    selectedNodeIds: string[];
+    setSelectedNodeIds: (ids: string[]) => void;
+    selectedEdgeId: string | null;
+    setSelectedEdgeId: (id: string | null) => void;
+    isZoomMode: boolean;
+    setIsZoomMode: (v: boolean) => void;
+    isMultiSelectMode: boolean;
+    setIsMultiSelectMode: (v: boolean) => void;
+    isDragMode: boolean;
+    setIsDragMode: (v: boolean) => void;
+    isEdgeHandlesEnabled: boolean;
+    setIsEdgeHandlesEnabled: (v: boolean) => void;
+    isArrayNodeMode: boolean;
+    setIsArrayNodeMode: (v: boolean) => void;
+    isPinned: boolean;
+    setIsPinned: (v: boolean) => void;
+    isPerformanceMode: boolean;
+    setIsPerformanceMode: (v: boolean) => void;
+    engineRef: React.MutableRefObject<FlowEngine | null>;
+    callbacks: FlowDiagramCallbacks;
+    config: FlowDiagramConfig;
+    readOnly: boolean;
+}
+
+export declare interface FlowDiagramEdge {
+    data: {
+        id: string;
+        type?: BuiltInEdgeType | (string & {});
+        source: string;
+        target: string;
+        sourceProperty?: string;
+        targetProperty?: string;
+        connection?: SqueedConnectionRef;
+        collapsedEndpoints?: {
+            source: string;
+            target: string;
+        };
+        label?: string;
+        icon?: string;
+        /** Chakra token or hex; overrides the theme/edgeColor line color for this edge */
+        color?: string;
+        isInverted?: boolean;
+        isEdgeAnimated?: boolean;
+        edgeAnimationVariant?: EdgeAnimationVariant;
+        isEdgeDashed?: boolean;
+    };
+}
+
+export declare interface FlowDiagramNode {
+    data: {
+        id: string;
+        label?: string;
+        text?: string;
+        code?: string;
+        type: string;
+        parent?: string;
+        headerTitle?: string;
+        description?: Record<string, any>;
+        viewProps?: any;
+        config?: Record<string, any>;
+        isNodeAnimated?: boolean;
+        nodeAnimationVariant?: NodeAnimationVariant;
+    };
+}
+
+/** Top-level props for the FlowDiagram component */
+export declare interface FlowDiagramProps {
+    /** Show the loader while the host fetches data; initial compilation waits until false. */
+    loading?: boolean;
+    /** Custom loading content. Defaults to an accessible status message. Also shown while new JSON is prepared. */
+    loader?: React.ReactNode;
+    /** Title shown on the root node */
+    title?: string;
+    /**
+     * Squeed JSON document. When provided, nodes/edges are compiled from it and every
+     * edit is reported through `callbacks.onJsonChange`. Takes precedence over nodes/edges.
+     */
+    json?: Record<string, any> | any[];
+    forms?: StateForms;
+    /** Pre-computed nodes */
+    nodes?: FlowDiagramNode[];
+    /** Pre-computed edges */
+    edges?: FlowDiagramEdge[];
+    /** Diagram configuration */
+    config?: FlowDiagramConfig;
+    /** Event callbacks */
+    callbacks?: FlowDiagramCallbacks;
+    showBottomBar?: boolean;
+    /** Custom controls rendered inside the diagram and form providers, even when showBottomBar is false. */
+    children?: React.ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+
+export declare function FlowDiagramProvider({ config, callbacks, nodes, edges, children, }: {
+    config: FlowDiagramConfig;
+    callbacks: FlowDiagramCallbacks;
+    nodes?: FlowDiagramNode[];
+    edges?: FlowDiagramEdge[];
+    children: React.ReactNode;
+}): JSX_2.Element;
+
+/** "C" = center: root in the middle, children fan out both ways (generate with `isCntr: true`); laid out as LR */
+export declare type FlowDirection = "LR" | "RL" | "TB" | "BT" | "C";
+
+export declare interface FlowDocumentActionOptions {
+    json?: SqueedJson;
+    state?: SqueedJson;
+    readOnly?: boolean;
+    onJsonChange?: (json: SqueedJson, change: SqueedChange) => void;
+    onStateChange?: StateForms["onChange"];
+}
+
+export declare interface FlowEdgeProperties {
+    sourceProperty?: string;
+    targetProperty?: string;
+}
+
+/** Handle passed to `callbacks.onInit`. */
+export declare interface FlowEngine {
+    zoom(): number;
+    /** Set zoom keeping the current pan (like cytoscape `cy.zoom(level)`) */
+    zoom(level: number): void;
+    pan(): Point;
+    pan(p: Point): void;
+    /** Zoom keeping the model point under `renderedPoint` (container px) fixed */
+    zoomAt(level: number, renderedPoint: Point): void;
+    /** Fit all elements into the container with `padding` rendered px */
+    fit(padding?: number, animate?: boolean): void;
+    /** Explicit alias for fit: fit and centre all elements with screen-pixel padding. */
+    centerAndFit(padding?: number, animate?: boolean): void;
+    /** Centre all elements at the current zoom */
+    center(animate?: boolean): void;
+    /** Fit one currently laid-out node; padding is in screen pixels (default 50). */
+    focusNode(id: string, padding?: number, animate?: boolean): void;
+    /** Fit laid-out hierarchy descendants and outgoing reachable nodes. Does not expand collapsed nodes. Animate overrides config.animateViewport. */
+    focusBranch(id: string, padding?: number, animate?: boolean): void;
+    focusConnections(id: string, padding?: number, animate?: boolean): void;
+    isolateConnections(id: string, padding?: number, animate?: boolean): void;
+    /** Temporarily show only this branch and fit it, preserving graph data. */
+    isolateBranch(id: string, padding?: number, animate?: boolean): void;
+    /** End isolation and restore the viewport saved when isolation began. */
+    restoreView(animate?: boolean): void;
+    /** Hide/show edge paths, labels and hit targets without changing graph data. */
+    setEdgesVisible(visible: boolean): void;
+    clientToModel(clientX: number, clientY: number): Point;
+    modelToClient(p: Point): Point;
+    getNodeBox(id: string): Box | undefined;
+    setNodePosition(id: string, position: Point | undefined, options?: {
+        persist?: boolean;
+    }): boolean;
+    onViewportChange(fn: (vp: ViewportState) => void): () => void;
+}
+
+export declare interface FlowNodeCreationRequest {
+    sourceNodeId: string;
+    sourceProperty?: string;
+    reverse: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+
+export declare function FlowPort({ id, role, side, position, placement, children, style, }: FlowPortProps): JSX_2.Element;
+
+export declare interface FlowPortProps {
+    id: string;
+    role: "source" | "target";
+    side?: PortSide;
+    position?: number;
+    placement?: "config";
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+
+export declare const FlowView: MemoExoticComponent<({ nodes, edges }: FlowViewProps) => JSX_2.Element>;
+
+declare interface FlowViewProps {
+    nodes: FlowDiagramNode[];
+    edges: FlowDiagramEdge[];
+}
+
+export declare interface FormBinding {
+    $type: string;
+    $fields?: Record<string, FormFieldConfig>;
+    $create?: FormCreation;
+}
+
+export declare interface FormChange extends FormRequest {
+    previousValue: unknown;
+    value: unknown;
+}
+
+export declare type FormCondition = {
+    $address: string;
+} & ({
+    $equals: FormValue;
+} | {
+    $in: FormValue[];
+});
+
+export declare interface FormCreation {
+    $address: string;
+    $type: string;
+    $label?: string;
+    $icon?: string;
+    $edgeLabel?: string;
+    $defaults?: Record<string, unknown>;
+}
+
+export declare const FormDocumentContext: Context<    {
+setSchema?: (schema: FormSchema | undefined) => void;
+data?: SqueedJson;
+viewData?: SqueedJson;
+bindings?: StateForms["bindings"];
+editable?: boolean;
+schema?: FormSchema;
+renderForm?: StateForms["renderForm"];
+structured?: StructuredForms;
+references?: StateForms["references"];
+callbacks: FlowDiagramCallbacks;
+}>;
+
+export declare type FormEdit = {
+    op: "set";
+    address: string;
+    value: unknown;
+} | {
+    op: "remove";
+    address: string;
+};
+
+export declare interface FormFieldConfig {
+    $label?: string;
+    $section?: string;
+    $control?: "input" | "textarea" | "select" | "pills" | "checkbox";
+    $visibleWhen?: FormCondition;
+    $requiredWhen?: FormCondition;
+    $options?: {
+        $source: "callback";
+        $dependsOn?: string[];
+    };
+}
+
+export declare interface FormOption {
+    label: string;
+    value: FormValue;
+}
+
+export declare interface FormOptionsRequest extends FormRequest {
+    signal: AbortSignal;
+}
+
+export declare interface FormRequest {
+    address: string;
+    nodeAddress: string;
+    nodeId?: string;
+    data: SqueedJson;
+}
+
+export declare type FormSchema = Record<string, Extract<ContractType, {
+    kind: "object";
+}>>;
+
+export declare type FormValue = string | number | boolean | null;
+
+export declare function formValueError(type: ContractType, value: unknown, required: boolean): string | undefined;
+
+export declare const getChakraColorHex: (color?: any, opacity?: any) => any;
+
+export declare const getColorVariant: (color: string) => {
+    primary: string;
+    secondary: string;
+    light: string;
+} | {
+    secondary: string;
+    primary?: undefined;
+    light?: undefined;
+};
+
+export declare function getDarkerHexColor(hex: string, factor?: number): string;
+
+export declare function getNode(json: SqueedJson, address: string): any;
+
+export declare interface JsonPlaybackState {
+    position: number;
+    total: number;
+    playing: boolean;
+}
+
+export declare interface JsonStreamOptions<Document> {
+    parse: (source: string) => Document;
+    repair: (source: string) => string;
+    preview: (document: Document) => void;
+    commit: (document: Document) => void;
+    intervalMs?: number;
+    maxBytes?: number;
+}
+
+export declare type LayoutAlgorithm = "dagre" | "elk" | "tidytree" | "concentric" | "cose";
+
+export declare const NODE_TYPE_VIEWS: readonly ["", "icon-label", "object", "text"];
+
+export declare type NodeAlignment = "leading" | "center" | "trailing";
+
+export declare type NodeAnimationVariant = "traveling" | "pulse";
+
+export declare function NodeBorderRadiusControl({ ids, showDivider, }: {
+    ids: string[];
+    showDivider?: boolean;
+}): JSX_2.Element;
+
+export declare function NodeConfigSummary({ nodeAddress, expanded, }: {
+    nodeAddress: string;
+    expanded?: boolean;
+}): JSX_2.Element;
+
+export declare function NodeForm({ nodeAddress }: {
+    nodeAddress: string;
+}): JSX_2.Element;
+
+export declare function NodeFormPopover({ nodeAddress, active, label, open, onClose, children, filter, height, }: {
+    nodeAddress: string;
+    active: boolean;
+    label: string;
+    open?: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+    filter?: ReactNode;
+    height?: number;
+}): JSX_2.Element;
+
+export declare function NodeIconPicker({ nodeId, edgeId, value, }: {
+    nodeId?: string;
+    edgeId?: string;
+    value?: string;
+}): JSX_2.Element;
+
+/** Actions shown in the hover overlay above nodes */
+export declare interface NodeOverlayAction {
+    id: string;
+    icon: any;
+    label: string;
+}
+
+/** Props passed to custom node overlay renderer */
+export declare interface NodeOverlayProps {
+    nodeId: string;
+    nodeData: any;
+    isRoot: boolean;
+    isParent: boolean;
+    isHovered: boolean;
+    setIsHovered: (v: boolean) => void;
+}
+
+export declare interface NodeSelectionModifiers {
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+
+export declare type NodeSpacing = number | "compact" | "normal" | "spacious";
+
+/** Bottom-bar contents while one or more nodes are selected */
+export declare function NodeTools({ ids, onClose, }: {
+    ids: string[];
+    onClose: () => void;
+}): JSX_2.Element;
+
+export declare type NodeTypeView = Exclude<(typeof NODE_TYPE_VIEWS)[number], "">;
+
+export declare const NodeView: MemoExoticComponent<({ data: nodeData, children, isInverted, isParent, }: NodeViewProps) => JSX_2.Element>;
+
+declare interface NodeViewChildArgs {
+    id: string;
+    data: any;
+    isActive: boolean;
+    isLowZoom: boolean;
+    isEditing: boolean;
+    onEditStart: () => void;
+    onEditEnd: () => void;
+}
+
+declare type NodeViewMode = "default" | "properties" | "icon-label";
+
+declare interface NodeViewProps {
+    data: any;
+    isInverted?: boolean;
+    isParent?: boolean;
+    children: (args: NodeViewChildArgs) => React.ReactNode;
+}
+
+/**
+ * Style for compound (container) nodes. Set per node via `data.viewProps`,
+ * or for all containers via `config.parentNodeStyle` (per-node wins).
+ * Colors accept Chakra tokens ("purple.500") or hex.
+ */
+export declare interface ParentNodeStyle {
+    outline?: boolean;
+    /** Fill color; also the default border/label color (default: themeColor) */
+    bgColor?: string;
+    /** Fill opacity 0–1 (default 0.4) */
+    bgOpacity?: number;
+    borderColor?: string;
+    /** px (default 6) */
+    borderWidth?: number;
+    borderStyle?: "solid" | "dashed" | "dotted" | "double";
+    /** Corner radius px (default 50) */
+    borderRadius?: number;
+    /** Label color (default: bgColor) */
+    textColor?: string;
+    /** Label size px (default 70) */
+    fontSize?: number;
+    /** Inner padding px (default 120) */
+    padding?: number;
+    /** Label placement (default "top") */
+    labelPosition?: "top" | "center" | "bottom";
+}
+
+export declare function parseFlowDocument(source: string): SqueedJson;
+
+export declare function parseJsonContract(source: string, name: string): WorkflowContract;
+
+export declare function parseTypeScriptContract(source: string, name: string): Promise<WorkflowContract>;
+
+export declare function parseTypeScriptForm(source: string, name: string, typeName?: string, options?: {
+    allowJson?: boolean;
+}): Promise<Extract<ContractType, {
+    kind: "object";
+}>>;
+
+declare interface Point {
+    x: number;
+    y: number;
+}
+
+declare type PortSide = "top" | "right" | "bottom" | "left";
+
+export declare function projectJsonPlaybackPreview(partial: SqueedJson, document: SqueedJson): SqueedJson;
+
+export declare function readFormSchema(file: Pick<File, "name" | "size" | "text">, typeNames: string[]): Promise<FormSchema>;
+
+export declare function readWorkflowContract(file: File): Promise<WorkflowContract>;
+
+/** Removes explicit edges or suppresses a hierarchy edge without deleting its child. */
+export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
+    json: SqueedJson;
+    removed: boolean;
+};
+
+export declare function removeNode(json: SqueedJson, address: string): SqueedJson;
+
+export declare interface RenderedEdgeRef extends FlowEdgeProperties {
+    source: string;
+    target: string;
+    isInverted?: boolean | null;
+    connection?: SqueedConnectionRef;
+    collapsedEndpoints?: {
+        source: string;
+        target: string;
+    };
+}
+
+/**
+ * Resolve which JSON node carries an edge's keys.
+ * parent→child edges (implicit hierarchy) are configured on the child;
+ * `$target` cross-links are configured on the source node.
+ */
+export declare function resolveEdgeOwner(edge: RenderedEdgeRef): {
+    address: string;
+    kind: "hierarchy" | "target" | "connection";
+};
+
+export declare function resolveStateView(view: SqueedJson, state: SqueedJson): SqueedJson;
+
+declare interface RuntimeReference {
+    path: string;
+    label: string;
+}
+
+/** Props passed to custom edge selection toolbar renderer */
+export declare interface SelectedEdgeToolbarProps {
+    edgeId: string;
+    edgeData: any;
+    onDeselect: () => void;
+}
+
+/** Props passed to custom node selection toolbar renderer */
+export declare interface SelectedNodeToolbarProps {
+    selectedNodeIds: string[];
+    selectedNodeData: any[];
+    onDeselect: () => void;
+}
+
+/** Built-in selection toolbars (shown in the bottom bar when a node/edge is selected) */
+export declare interface SelectionToolbarConfig {
+    /** Swatches offered for node/edge colors (Chakra tokens or hex). Default: 9 Chakra 500s */
+    palette?: string[];
+    /** Hide individual controls */
+    hide?: Array<"label" | "typeView" | "color" | "textColor" | "borderColor" | "style" | "outline" | "animation" | "icon" | "collapse" | "delete">;
+}
+
+export declare const setCollapsed: (json: SqueedJson, address: string, collapsed: boolean) => SqueedJson;
+
+export declare function setEdgeProp(json: SqueedJson, edge: RenderedEdgeRef, key: SqueedEdgeKey, value: any): SqueedJson;
+
+export declare const setEdgeStyle: (json: SqueedJson, edge: RenderedEdgeRef, style: "solid" | "dashed" | "animated") => SqueedJson;
+
+export declare function setNodeProp(json: SqueedJson, address: string, key: SqueedNodeKey, value: any): SqueedJson;
+
+/** What changed in the Squeed document (delivered alongside the new JSON) */
+export declare interface SqueedChange {
+    type: "documentReplace" | "form" | "nodeLabel" | "nodeContent" | "nodeColor" | "nodeStyle" | "nodeIcon" | "nodeOutline" | "nodeAnimation" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
+    /** Node address affected (new node's address for nodeCreate) */
+    address?: string;
+    edge?: RenderedEdgeRef;
+    /** `$` key written, when a single key changed */
+    key?: string;
+    value?: unknown;
+}
+
+/** Describes the edit behind an `onJsonChange` */
+export declare interface SqueedChangeInfo {
+    type: "nodeLabel" | "nodeContent" | "nodeColor" | "nodeStyle" | "nodeIcon" | "nodeOutline" | "nodeAnimation" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
+    address?: string;
+    edge?: FlowEdgeProperties & {
+        source: string;
+        target: string;
+        isInverted?: boolean | null;
+        connection?: SqueedConnectionRef;
+    };
+    key?: string;
+    value?: unknown;
+}
+
+export declare interface SqueedConnection extends FlowEdgeProperties {
+    animationVariant?: EdgeAnimationVariant;
+    icon?: string;
+    target: string;
+    type?: string;
+    id?: string;
+    label?: string;
+    color?: string;
+    style?: "solid" | "dashed" | "animated";
+}
+
+export declare interface SqueedConnectionRef {
+    address: string;
+    key: string;
+}
+
+/** Schema keys that describe the edge *into* a node (parent → child) */
+export declare type SqueedEdgeKey = "$edgeIcon" | "$edgeType" | "$sourceLabel" | "$isEdgeAnimated" | "$edgeAnimationVariant" | "$isEdgeDashed" | "$edgeColor";
+
+/**
+ * Squeed JSON = the source document `createFlowDiagram` compiles into nodes/edges.
+ * Node ids are JSON addresses ("root.a.b"); these helpers translate toolbar edits
+ * back into `$`-prefixed schema keys at that address. All functions are immutable.
+ */
+export declare type SqueedJson = Record<string, any> | any[];
+
+/** Schema keys that live on a node */
+export declare type SqueedNodeKey = "$view" | "$label" | "$subtitle" | "$form" | "$bgColor" | "$textColor" | "$borderColor" | "$borderStyle" | "$borderWidth" | "$borderRadius" | "$fontSize" | "$icon" | "$content" | "$media" | "$collapsed" | "$parent" | "$outline" | "$isNodeAnimated" | "$nodeAnimationVariant" | "$connections" | "$ports";
+
+export declare interface StateFormBinding {
+    address: string;
+    type: string;
+    schemaType?: string;
+    portResources?: Record<string, string>;
+    resourceType?: string;
+    fields?: Record<string, FormFieldConfig>;
+}
+
+export declare interface StateForms {
+    structured?: boolean;
+    references?: RuntimeReference[];
+    /** Controlled resource data. Replace immutably to update forms, summaries and view references. */
+    state: SqueedJson;
+    bindings: Record<string, StateFormBinding>;
+    renderForm?: (nodeAddress: string) => ReactNode | undefined;
+    /** Receives user form edits after dependent edits. External state replacements do not echo here. */
+    onStateChange?: (state: SqueedJson, change: FormChange) => void;
+    /** Compatibility alias; onStateChange takes precedence when both are supplied. */
+    onChange?: (state: SqueedJson, change: FormChange) => void;
+}
+
+declare interface StructuredForms {
+    sourceSchema: FormSchema;
+    sourceBindings: Record<string, StateFormBinding>;
+    nodes: FlowDiagramNode[];
+    edges: FlowDiagramEdge[];
+    schema: FormSchema;
+    bindings: Record<string, StateFormBinding>;
+    slots: Map<string, StructuredSlot>;
+    containers: Map<string, StructuredNode>;
+}
+
+declare interface StructuredNode {
+    address: string;
+    type: ContractType;
+    declared: ContractType;
+    scalar: boolean;
+}
+
+declare interface StructuredSlot {
+    address: string;
+    owner: string;
+    field: string;
+    type: ContractType;
+    label: string;
+    nodeId: string;
+    present: boolean;
+}
+
+export declare function SvgExportButton(): JSX_2.Element;
+
+export declare function Swatches({ colors, value, label, onPick, onReset, includeTransparent, }: {
+    colors: string[];
+    value?: string;
+    label: string;
+    onPick: (c: string) => void;
+    onReset?: () => void;
+    includeTransparent?: boolean;
+}): JSX_2.Element;
+
+export declare const TEXT_PALETTE: string[];
+
+export declare const ToolbarCloseButton: ForwardRefExoticComponent<Omit<Omit<IconButtonProps & RefAttributes<HTMLButtonElement>, "children">, "ref"> & RefAttributes<HTMLButtonElement>>;
+
+export declare function ToolbarCommitInput({ value, placeholder, ariaLabel, width, type, min, onCommit, }: {
+    value: string;
+    placeholder: string;
+    ariaLabel: string;
+    width?: string;
+    type?: "text" | "number";
+    min?: number;
+    onCommit: (v: string) => void;
+}): JSX_2.Element;
+
+export declare function ToolbarDivider(): JSX_2.Element;
+
+export declare const ToolbarIconButton: ForwardRefExoticComponent<Omit<IconButtonProps & RefAttributes<HTMLButtonElement> & {
+icon: React.ReactElement;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;
+
+export declare const ToolbarRangeInput: StyledComponent<    {
+theme?: Theme;
+as?: React.ElementType;
+}, DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+
+export declare function ToolbarScrollContainer({ children, background, border, }: {
+    children: ReactNode;
+    background: string;
+    border: string;
+}): JSX_2.Element;
+
+export declare function ToolbarSelect({ children, value, onValueChange, disabled, style, title, icon, popupContent, labelCase, "aria-label": label, }: {
+    children: ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    style?: CSSProperties;
+    title?: string;
+    icon?: ReactNode;
+    popupContent?: ReactNode;
+    labelCase?: "title" | "preserve";
+    "aria-label": string;
+}): JSX_2.Element;
+
+export declare function ToolbarTooltip({ label, children, }: {
+    label: string;
+    children: React.ReactElement;
+}): JSX_2.Element;
+
+export declare const TooltipIconButton: ({ icon, label, onClick, color, boxSize, ...props }: {
+    [x: string]: any;
+    icon: any;
+    label: any;
+    onClick: any;
+    color: any;
+    boxSize?: number;
+}) => JSX_2.Element;
+
+/** Immutable update of the node at `address` (root address updates the document itself) */
+export declare function updateNode(json: SqueedJson, address: string, fn: (node: any) => any): SqueedJson;
+
+export declare function useCustomColors(theme?: any): {
+    canvas: string;
+    background: string;
+    backgroundSecondary: string;
+    darkBackgroundSecondary: string;
+    border: string;
+    darkColor: string;
+    backgroundWhiteColor: string;
+    borderSecondary: string;
+    colorActive: string;
+    colorInactive: string;
+    iconColor: string;
+    moreIconColor: string;
+    colorText: string;
+    themedColorText: string;
+    logoColor: any;
+    logoColorSecondary: any;
+    darkColorActive: string;
+    greenColor: string;
+};
+
+export declare function useFlowData(): {
+    nodeById: Map<string, FlowDiagramNode>;
+    edgeById: Map<string, FlowDiagramEdge>;
+    parentIds: Set<string>;
+};
+
+export declare function useFlowDiagramContext(): FlowDiagramContextValue;
+
+export declare function useNodeViewActions(): {
+    allNodesIconLabel: boolean;
+    setAllNodesIconLabel: (enabled: boolean) => void;
+    getNodeViewMode: (nodeId: string) => NodeViewMode;
+    showNodeProperties: (nodeId: string) => void;
+    restoreNodeView: (nodeId: string) => void;
+    toggleNodeView: (nodeId: string) => void;
+    setNodeViewMode: (nodeId: string, mode: NodeViewMode) => void;
+};
+
+/**
+ * Hook that stops all event propagation on a DOM element.
+ * Use this on any interactive element inside a node (inputs, textareas, forms)
+ * to prevent cytoscape from intercepting mouse/keyboard events.
+ *
+ * @param active - Only attach listeners when true (e.g. when editing)
+ * @returns ref to attach to the wrapper element
+ *
+ * @example
+ * const inputRef = useStopPropagation<HTMLDivElement>(isEditing);
+ * return <div ref={inputRef}><input /></div>;
+ */
+export declare function useStopPropagation<T extends HTMLElement>(active?: boolean): MutableRefObject<T>;
+
+export declare function useThemeContentColors(color: any): {
+    bgColor: any;
+    highlightColor: string;
+    borderColor: string;
+    textColor: string;
+    propertyColor: string;
+    secondary: string;
+    bgColorFaint: any;
+    highlightColorFaint: string;
+};
+
+declare interface ViewportState {
+    pan: Point;
+    zoom: number;
+}
+
+export declare interface WorkflowContract {
+    name: string;
+    nodes: Record<string, ContractProperty>;
+}
+
+export declare function WorkflowControls({ showDivider, compact, }?: {
+    showDivider?: boolean;
+    compact?: boolean;
+}): JSX_2.Element;
+
+export { }