@burdenoff/fluidgrids-fe-sdk 2026.1105.1 → 2026.1105.3

package/dist/workflow-preview.d.ts

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Node, Edge } from '@xyflow/react';
+
+/**
+ * Pure handle-spec resolution for node cards — split from the rendering in
+ * output-handles.tsx so non-UI code (attach helpers, tests) can use it
+ * without dragging React/fe-libs into the import graph.
+ */
+/**
+ * Connection handle spec — mirrors IInternalNodeManifest.outputHandles in
+ * wspace-workflow-svc (seeded into node_endpoint_configs.operations and
+ * surfaced by the nodeManifest resolver).
+ */
+interface NodeHandleSpec {
+    /** Handle id — MUST match the activeHandle values the executor returns */
+    id: string;
+    /** Short label rendered next to the handle (n8n-style) */
+    label: string;
+    /** Visual tone for the handle/label */
+    tone?: "success" | "error" | "warning" | "info" | "neutral";
+}
+
+/**
+ * Pure model behind `WorkflowPreviewCanvas` (BOFF-9806): what each node card
+ * of a read-only workflow preview shows, read from a stored `definitionJson`
+ * with no node registry, store, config or network.
+ *
+ * The derivations mirror the builder's node component (`blocks/nodes/node/
+ * node.tsx`) so a preview card reads like the builder card for the same node:
+ * the same trigger / logic / action role accent, the same compact logic card
+ * for internal control-flow nodes, the same labelled output handles. Where the
+ * builder reads the node registry (manifest name, icon, description), the
+ * preview asks an optional resolver, then the node's own saved manifest
+ * snapshot (`data.nodeData`), then a fallback derived from the node type.
+ */
+
+/** What a host knows about a node type (typically from the node registry). */
+interface WorkflowPreviewNodeMeta {
+    /** Display name of the node type ("Gmail", "Schedule"). */
+    title?: string;
+    /** Iconify name ("logos:slack-icon") or an image URL / data URI. */
+    icon?: string;
+    description?: string;
+}
+/**
+ * Optional lookup of node-type metadata. Return `undefined` for a type the
+ * host does not know; the preview then uses the node's saved manifest snapshot
+ * and, failing that, a name and icon derived from the type.
+ */
+type WorkflowPreviewNodeMetaResolver = (nodeType: string) => WorkflowPreviewNodeMeta | undefined;
+/** Everything one preview card draws. */
+interface PreviewCardModel {
+    /** `app`: the rich card (header + operation); `logic`: the compact card. */
+    variant: "app" | "logic";
+    nodeType: string;
+    /** Header text: the node's own label, else the node type's name (`""`
+     *  when neither is known; the card then shows its translated fallback). */
+    title: string;
+    /** The node type's name (the rename placeholder in the builder). */
+    appName: string;
+    icon: string;
+    /** Operation shown in the card body; `null` shows the description only. */
+    operation: string | null;
+    description: string;
+    /** Logic card: short config summary under the title. */
+    subtitle?: string;
+    trigger: boolean;
+    disabled: boolean;
+    /** Role accent (trigger / logic / action node-category token). */
+    accent: string;
+    /** Key that picks the header's icon-square accent (`nodeAccent`). */
+    accentKey: string;
+    inputHandles: NodeHandleSpec[];
+    outputHandles: NodeHandleSpec[];
+    /** Extra body height so many-output cards do not crowd. */
+    handleSpacer: number;
+}
+/** A canvas node the preview renders (`type` is always the preview card). */
+type PreviewFlowNode = Node<{
+    card: PreviewCardModel;
+}, "preview">;
+interface PreviewCanvasModel {
+    nodes: PreviewFlowNode[];
+    edges: Edge[];
+}
+/** "store/gmail_reader" → "Gmail Reader"; "internal:http-request" → "Http Request". */
+declare function humanizeNodeType(nodeType: string): string;
+/** Icon for a node type with no manifest at hand. */
+declare function fallbackNodeIcon(nodeType: string): string;
+/** The card model of one stored node (sticky notes are not cards). */
+declare function previewCardModel(raw: Node, resolveMeta?: WorkflowPreviewNodeMetaResolver): PreviewCardModel;
+/**
+ * The preview canvas of a stored definition, or `null` when it carries no
+ * canvas. Sticky notes are annotations, not steps, so they are left out; an
+ * edge to a node the preview does not draw is dropped, and a target handle
+ * the target card does not have falls back to its first input.
+ */
+declare function previewCanvasFromDefinition(definitionJson: unknown, resolveMeta?: WorkflowPreviewNodeMetaResolver): PreviewCanvasModel | null;
+/**
+ * The order a sequenced reveal shows nodes in: along the flow (left to right),
+ * then top to bottom. Ids in `shown` are already on screen and are skipped.
+ */
+declare function previewRevealOrder(nodes: ReadonlyArray<Pick<Node, "id" | "position">>, shown?: ReadonlySet<string>): string[];
+/** An edge is drawn once both of its ends are on screen. */
+declare function edgesBetweenVisible<E extends Pick<Edge, "source" | "target">>(edges: readonly E[], visible: ReadonlySet<string>): E[];
+/**
+ * The node that just appeared: the last id of `next` (in `order`) that was not
+ * in `previous`. Keeps the current newest when nothing was added, and drops it
+ * when it left the canvas.
+ */
+declare function newestNodeId(previous: ReadonlySet<string>, next: ReadonlySet<string>, order: readonly string[], current: string | null): string | null;
+
+interface WorkflowPreviewCanvasProps {
+    /**
+     * The stored `definitionJson` (object or JSON string): `{ data: { nodes,
+     * edges } }` or a flat `{ nodes, edges }`, read the way the builder loads
+     * it. A definition with no `nodes` array renders `emptyState`.
+     */
+    definition: unknown;
+    /**
+     * Ids of the nodes on screen. Omit to show every node. Ids the definition
+     * does not have are ignored.
+     */
+    visibleNodeIds?: Iterable<string>;
+    /** Ids of nodes that just appeared: drawn with a highlight ring. */
+    freshNodeIds?: Iterable<string>;
+    /** The build is in progress: flow runs along the edges and the newest node pulses. */
+    running?: boolean;
+    /**
+     * Node-type metadata (name, icon, description), e.g. from a loaded node
+     * registry. Without it, cards use each node's saved manifest snapshot, then
+     * a name and icon derived from the node type. Keep the function stable.
+     */
+    resolveNodeMeta?: WorkflowPreviewNodeMetaResolver;
+    /** Upper zoom bound for the camera and the viewer. Default 1.5. */
+    maxZoom?: number;
+    /** Padding the camera keeps around the visible nodes. Default 0.25. */
+    fitPadding?: number;
+    /** Rendered instead of the canvas when the definition has no canvas. */
+    emptyState?: ReactNode;
+    /** Accessible name of the canvas region. */
+    ariaLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function WorkflowPreviewCanvasComponent({ definition, visibleNodeIds, freshNodeIds, running, resolveNodeMeta, maxZoom, fitPadding, emptyState, ariaLabel, className, style, }: WorkflowPreviewCanvasProps): react_jsx_runtime.JSX.Element;
+declare const WorkflowPreviewCanvas: React.MemoExoticComponent<typeof WorkflowPreviewCanvasComponent>;
+
+/** Node enter: fade + pop. */
+declare const NODE_ENTER_MS = 260;
+/** Edge enter: the path draws from source to target. */
+declare const EDGE_DRAW_MS = 360;
+/** Camera move to take in a new node. */
+declare const CAMERA_MS = 350;
+
+export { type PreviewCanvasModel, type PreviewCardModel, type PreviewFlowNode, CAMERA_MS as WORKFLOW_PREVIEW_CAMERA_MS, EDGE_DRAW_MS as WORKFLOW_PREVIEW_EDGE_DRAW_MS, NODE_ENTER_MS as WORKFLOW_PREVIEW_NODE_ENTER_MS, WorkflowPreviewCanvas, type WorkflowPreviewCanvasProps, type WorkflowPreviewNodeMeta, type WorkflowPreviewNodeMetaResolver, edgesBetweenVisible, fallbackNodeIcon, humanizeNodeType, newestNodeId, previewCanvasFromDefinition, previewCardModel, previewRevealOrder };