@squeed/flow-sdk 1.1.16 → 2.0.2

package/dist/index.d.ts

@@ -1,5 +1,17 @@
+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): {
@@ -7,6 +19,8 @@ export declare function addChild(json: SqueedJson, parentAddress: string, child:
     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[];
 
@@ -22,14 +36,25 @@ export declare function applyCollapsed(nodes: FlowDiagramNode[], edges: FlowDiag
     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): FlowDiagramCallbacks;
+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 {
@@ -56,6 +81,21 @@ export declare interface BottomBarRenderProps {
     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") */
@@ -75,6 +115,17 @@ export declare function compileSqueed(json: SqueedJson, opts?: CompileOptions):
     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;
@@ -85,28 +136,164 @@ export declare const contentObjTheme: (color: any) => {
     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 const DynamicIcon: ({ name, ...props }: {
+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 function FlowDiagram({ title, json, nodes, edges, config, callbacks, className, style, showBottomBar, }: FlowDiagramProps & {
-    showBottomBar?: boolean;
+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) => void;
+    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;
@@ -118,16 +305,25 @@ export declare interface FlowDiagramCallbacks {
     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) => void;
+    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 */
@@ -138,6 +334,8 @@ export declare interface FlowDiagramCallbacks {
     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) */
@@ -152,10 +350,15 @@ export declare interface FlowDiagramCallbacks {
     }) => 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 when Cytoscape instance is initialized (for advanced use) */
-    onCyInit?: (cy: any) => 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`.
@@ -165,8 +368,22 @@ export declare interface FlowDiagramCallbacks {
 
 /** 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") */
@@ -225,16 +442,76 @@ export declare interface FlowDiagramConfig {
     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;
     };
 }
@@ -251,11 +528,17 @@ export declare interface FlowDiagramNode {
         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;
     /**
@@ -263,6 +546,7 @@ export declare interface FlowDiagramProps {
      * 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 */
@@ -271,33 +555,260 @@ export declare interface FlowDiagramProps {
     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) => {
-    secondary: string;
-    primary?: undefined;
-    light?: undefined;
-} | {
     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;
@@ -315,12 +826,51 @@ export declare interface NodeOverlayProps {
     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) */
@@ -341,7 +891,32 @@ export declare interface ParentNodeStyle {
     labelPosition?: "top" | "center" | "bottom";
 }
 
-/** Removes a `$target` edge; hierarchy edges cannot be removed without removing the child (returns json unchanged). */
+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;
@@ -349,10 +924,15 @@ export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
 
 export declare function removeNode(json: SqueedJson, address: string): SqueedJson;
 
-export declare interface RenderedEdgeRef {
+export declare interface RenderedEdgeRef extends FlowEdgeProperties {
     source: string;
     target: string;
     isInverted?: boolean | null;
+    connection?: SqueedConnectionRef;
+    collapsedEndpoints?: {
+        source: string;
+        target: string;
+    };
 }
 
 /**
@@ -362,9 +942,16 @@ export declare interface RenderedEdgeRef {
  */
 export declare function resolveEdgeOwner(edge: RenderedEdgeRef): {
     address: string;
-    kind: "hierarchy" | "target";
+    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;
@@ -384,7 +971,7 @@ 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" | "color" | "textColor" | "style" | "icon" | "collapse" | "delete">;
+    hide?: Array<"label" | "typeView" | "color" | "textColor" | "borderColor" | "style" | "outline" | "animation" | "icon" | "collapse" | "delete">;
 }
 
 export declare const setCollapsed: (json: SqueedJson, address: string, collapsed: boolean) => SqueedJson;
@@ -397,7 +984,7 @@ export declare function setNodeProp(json: SqueedJson, address: string, key: Sque
 
 /** What changed in the Squeed document (delivered alongside the new JSON) */
 export declare interface SqueedChange {
-    type: "nodeLabel" | "nodeColor" | "nodeIcon" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
+    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;
@@ -408,19 +995,36 @@ export declare interface SqueedChange {
 
 /** Describes the edit behind an `onJsonChange` */
 export declare interface SqueedChangeInfo {
-    type: "nodeLabel" | "nodeColor" | "nodeIcon" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
+    type: "nodeLabel" | "nodeContent" | "nodeColor" | "nodeStyle" | "nodeIcon" | "nodeOutline" | "nodeAnimation" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
     address?: string;
-    edge?: {
+    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 = "$sourceLabel" | "$isEdgeAnimated" | "$isEdgeDashed" | "$edgeColor";
+export declare type SqueedEdgeKey = "$edgeIcon" | "$edgeType" | "$sourceLabel" | "$isEdgeAnimated" | "$edgeAnimationVariant" | "$isEdgeDashed" | "$edgeColor";
 
 /**
  * Squeed JSON = the source document `createFlowDiagram` compiles into nodes/edges.
@@ -430,7 +1034,126 @@ export declare type SqueedEdgeKey = "$sourceLabel" | "$isEdgeAnimated" | "$isEdg
 export declare type SqueedJson = Record<string, any> | any[];
 
 /** Schema keys that live on a node */
-export declare type SqueedNodeKey = "$label" | "$bgColor" | "$textColor" | "$borderColor" | "$borderRadius" | "$fontSize" | "$icon" | "$content" | "$media" | "$collapsed" | "$parent";
+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;
@@ -456,6 +1179,24 @@ export declare function useCustomColors(theme?: any): {
     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)
@@ -481,4 +1222,19 @@ export declare function useThemeContentColors(color: 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 { }