nucleus-core-ts 0.8.106 → 0.8.108

package/dist/fe/components/LoginPage/components/LoginForm.js

@@ -140,7 +140,7 @@ export function LoginForm({ loginAction, captchaGenerateAction, captchaConfig, s
                         generateAction: captchaGenerateAction,
                         config: captchaConfig,
                         onChallengeLoad: (challenge)=>{
-                            store.setCaptchaId(challenge.challengeId);
+                            store.setCaptchaId(challenge.data?.challengeId ?? "");
                             store.setCaptchaAnswer("");
                         },
                         onAnswerChange: (_, answer)=>{

package/dist/fe/components/VerificationFlowPage/components/FlowNode.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+interface FlowNodeData {
+    label: string;
+    description: string;
+    nodeType: string;
+    stepOrder: number;
+    decision: string;
+    isActive: boolean;
+    [key: string]: unknown;
+}
+export declare function FlowNode({ data }: {
+    data: FlowNodeData;
+}): ReactElement;
+export {};
+//# sourceMappingURL=FlowNode.d.ts.map

package/dist/fe/components/VerificationFlowPage/components/FlowNode.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { cn } from "../../../utils/cn";
+import { verificationFlowPageTheme } from "../theme";
+const StepIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
+        className: className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Step"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+            })
+        ]
+    });
+const VerifierIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
+        className: className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Verifier"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            })
+        ]
+    });
+const NotificationIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
+        className: className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Notification"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+            })
+        ]
+    });
+const iconMap = {
+    step: StepIcon,
+    verifier: VerifierIcon,
+    notification: NotificationIcon
+};
+export function FlowNode({ data }) {
+    const theme = verificationFlowPageTheme;
+    const nodeType = data.nodeType || "step";
+    const colorKey = nodeType;
+    const colors = colorKey in theme.node ? theme.node[colorKey] : theme.node.step;
+    const decision = data.decision;
+    const isActive = data.isActive;
+    const Icon = iconMap[nodeType] || StepIcon;
+    const badgeKey = decision || (isActive ? "active" : "");
+    const badgeClass = badgeKey in theme.node.badge ? theme.node.badge[badgeKey] : "";
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.node.base, colors.border, colors.bg, isActive && !decision ? theme.node.activeRing : ""),
+        children: [
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "target",
+                position: Position.Top,
+                className: theme.node.handle
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2 mb-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        className: cn("w-4 h-4", colors.icon)
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.node.typeLabel,
+                        children: nodeType
+                    }),
+                    badgeClass && /*#__PURE__*/ _jsx("span", {
+                        className: cn("ml-auto text-[10px] font-bold px-1.5 py-0.5 rounded-full", badgeClass),
+                        children: decision || "active"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.node.nameLabel,
+                children: data.label || `Step ${data.stepOrder}`
+            }),
+            data.description ? /*#__PURE__*/ _jsx("p", {
+                className: theme.node.description,
+                children: String(data.description)
+            }) : null,
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "source",
+                position: Position.Bottom,
+                className: theme.node.handle
+            })
+        ]
+    });
+}

package/dist/fe/components/VerificationFlowPage/components/PendingTab.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { VerificationDecideAction, VerificationPendingAction } from "../types";
+interface PendingTabProps {
+    pendingAction: VerificationPendingAction;
+    decideAction: VerificationDecideAction;
+    onDecisionMade?: (entityName: string, entityId: string) => void;
+}
+export declare function PendingTab({ pendingAction, decideAction, onDecisionMade, }: PendingTabProps): ReactElement;
+export {};
+//# sourceMappingURL=PendingTab.d.ts.map

package/dist/fe/components/VerificationFlowPage/components/PendingTab.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent } from "react";
+import { useVerificationFlowStore } from "../store";
+import { verificationFlowPageTheme } from "../theme";
+export function PendingTab({ pendingAction, decideAction, onDecisionMade }) {
+    const theme = verificationFlowPageTheme;
+    const store = useVerificationFlowStore();
+    const loadPending = useEffectEvent(()=>{
+        store.setLoadingPending(true);
+        pendingAction.start({
+            payload: undefined,
+            onAfterHandle: (res)=>{
+                const data = res.data;
+                store.setPendingItems(data ?? []);
+                store.setLoadingPending(false);
+            },
+            onErrorHandle: ()=>{
+                store.setLoadingPending(false);
+            }
+        });
+    });
+    useEffect(()=>{
+        loadPending();
+    }, []);
+    const handleDecide = useEffectEvent((item, decision)=>{
+        decideAction.start({
+            payload: {
+                entity_name: item.entity_name,
+                entity_id: item.entity_id,
+                decision,
+                reason: store.decisionReason || undefined
+            },
+            onAfterHandle: ()=>{
+                store.setDecidingId(null);
+                store.setDecisionReason("");
+                onDecisionMade?.(item.entity_name, item.entity_id);
+                loadPending();
+            }
+        });
+    });
+    if (store.isLoadingPending) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center py-20",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: theme.loading.spinner
+            })
+        });
+    }
+    if (store.pendingItems.length === 0) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: theme.pending.empty.container,
+            children: [
+                /*#__PURE__*/ _jsxs("svg", {
+                    className: theme.pending.empty.icon,
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: [
+                        /*#__PURE__*/ _jsx("title", {
+                            children: "No pending items"
+                        }),
+                        /*#__PURE__*/ _jsx("path", {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 1,
+                            d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: theme.pending.empty.text,
+                    children: "No pending verifications"
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.pending.container,
+        children: [
+            /*#__PURE__*/ _jsxs("h2", {
+                className: theme.pending.title,
+                children: [
+                    "Pending Approvals (",
+                    store.pendingItems.length,
+                    ")"
+                ]
+            }),
+            store.pendingItems.map((item)=>/*#__PURE__*/ _jsx("div", {
+                    className: theme.pending.card.container,
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsxs("p", {
+                                        className: theme.pending.card.title,
+                                        children: [
+                                            item.flow_name,
+                                            " — Step ",
+                                            item.step_order
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("p", {
+                                        className: theme.pending.card.subtitle,
+                                        children: [
+                                            item.entity_name,
+                                            "/",
+                                            item.entity_id
+                                        ]
+                                    })
+                                ]
+                            }),
+                            store.decidingId === item.instance_id ? /*#__PURE__*/ _jsxs("div", {
+                                className: theme.pending.card.actions,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "text",
+                                        placeholder: "Reason (optional)",
+                                        value: store.decisionReason,
+                                        onChange: (e)=>store.setDecisionReason(e.target.value),
+                                        className: theme.pending.input
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleDecide(item, "approved"),
+                                        className: theme.pending.approveButton,
+                                        children: "Approve"
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleDecide(item, "rejected"),
+                                        className: theme.pending.rejectButton,
+                                        children: "Reject"
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>{
+                                            store.setDecidingId(null);
+                                            store.setDecisionReason("");
+                                        },
+                                        className: theme.pending.cancelButton,
+                                        children: "Cancel"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: ()=>store.setDecidingId(item.instance_id),
+                                className: theme.pending.reviewButton,
+                                children: "Review"
+                            })
+                        ]
+                    })
+                }, `${item.instance_id}-${item.step_order}`))
+        ]
+    });
+}

package/dist/fe/components/VerificationFlowPage/components/VerificationFlowPage.d.ts

@@ -0,0 +1,5 @@
+import "@xyflow/react/dist/style.css";
+import type { ReactElement } from "react";
+import type { VerificationFlowPageProps } from "../types";
+export declare function VerificationFlowPage({ entityName, title, subtitle, flowListAction, flowGetAction, pendingAction, decideAction, onFlowSelected, onDecisionMade, showPending, className, }: VerificationFlowPageProps): ReactElement;
+//# sourceMappingURL=VerificationFlowPage.d.ts.map

package/dist/fe/components/VerificationFlowPage/components/VerificationFlowPage.js

@@ -0,0 +1,474 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactFlow, Background, Controls, MiniMap, MarkerType } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useEffect, useEffectEvent, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { useVerificationFlowStore } from "../store";
+import { verificationFlowPageTheme } from "../theme";
+import { FlowNode } from "./FlowNode";
+import { PendingTab } from "./PendingTab";
+const nodeTypes = {
+    step: FlowNode,
+    verifier: FlowNode,
+    notification: FlowNode
+};
+function stepsToNodes(steps) {
+    return steps.map((s)=>({
+            id: s.node_id,
+            type: s.node_type,
+            position: {
+                x: s.position_x,
+                y: s.position_y
+            },
+            ...s.width && s.height ? {
+                width: s.width,
+                height: s.height
+            } : {},
+            data: {
+                label: s.name || `Step ${s.step_order}`,
+                description: s.description || "",
+                nodeType: s.node_type,
+                stepOrder: s.step_order,
+                decision: "",
+                isActive: false
+            }
+        }));
+}
+function edgesToFlow(flowEdges) {
+    return flowEdges.map((e)=>({
+            id: e.edge_id,
+            source: e.source_node_id,
+            target: e.target_node_id,
+            sourceHandle: e.source_handle || undefined,
+            targetHandle: e.target_handle || undefined,
+            type: "smoothstep",
+            animated: e.animated ?? true,
+            label: e.label || undefined,
+            markerEnd: {
+                type: MarkerType.ArrowClosed,
+                width: 16,
+                height: 16
+            },
+            style: {
+                stroke: "#94a3b8",
+                strokeWidth: 2
+            }
+        }));
+}
+function generateDemoFlow() {
+    const nodes = [
+        {
+            id: "start",
+            type: "step",
+            position: {
+                x: 250,
+                y: 0
+            },
+            data: {
+                label: "Entity Created",
+                nodeType: "step",
+                stepOrder: 0,
+                description: "Trigger: on create",
+                decision: "",
+                isActive: false
+            }
+        },
+        {
+            id: "review",
+            type: "step",
+            position: {
+                x: 250,
+                y: 120
+            },
+            data: {
+                label: "Initial Review",
+                nodeType: "step",
+                stepOrder: 1,
+                description: "First review step",
+                decision: "",
+                isActive: false
+            }
+        },
+        {
+            id: "reviewer1",
+            type: "verifier",
+            position: {
+                x: 50,
+                y: 260
+            },
+            data: {
+                label: "Manager Approval",
+                nodeType: "verifier",
+                stepOrder: 1,
+                description: "Role: manager",
+                decision: "",
+                isActive: false
+            }
+        },
+        {
+            id: "reviewer2",
+            type: "verifier",
+            position: {
+                x: 450,
+                y: 260
+            },
+            data: {
+                label: "QA Check",
+                nodeType: "verifier",
+                stepOrder: 2,
+                description: "Role: qa_team",
+                decision: "",
+                isActive: false
+            }
+        },
+        {
+            id: "notify",
+            type: "notification",
+            position: {
+                x: 250,
+                y: 400
+            },
+            data: {
+                label: "Notify Stakeholders",
+                nodeType: "notification",
+                stepOrder: 3,
+                description: "Email + Portal",
+                decision: "",
+                isActive: false
+            }
+        },
+        {
+            id: "complete",
+            type: "step",
+            position: {
+                x: 250,
+                y: 520
+            },
+            data: {
+                label: "Verified",
+                nodeType: "step",
+                stepOrder: 4,
+                description: "Entity verified",
+                decision: "",
+                isActive: false
+            }
+        }
+    ];
+    const edgeStyle = {
+        type: "smoothstep",
+        animated: true,
+        markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 16,
+            height: 16
+        },
+        style: {
+            stroke: "#94a3b8",
+            strokeWidth: 2
+        }
+    };
+    const edges = [
+        {
+            id: "e1",
+            source: "start",
+            target: "review",
+            ...edgeStyle
+        },
+        {
+            id: "e2",
+            source: "review",
+            target: "reviewer1",
+            label: "Assign",
+            ...edgeStyle
+        },
+        {
+            id: "e3",
+            source: "review",
+            target: "reviewer2",
+            label: "Assign",
+            ...edgeStyle
+        },
+        {
+            id: "e4",
+            source: "reviewer1",
+            target: "notify",
+            ...edgeStyle
+        },
+        {
+            id: "e5",
+            source: "reviewer2",
+            target: "notify",
+            ...edgeStyle
+        },
+        {
+            id: "e6",
+            source: "notify",
+            target: "complete",
+            ...edgeStyle
+        }
+    ];
+    return {
+        nodes,
+        edges
+    };
+}
+export function VerificationFlowPage({ entityName, title, subtitle, flowListAction, flowGetAction, pendingAction, decideAction, onFlowSelected, onDecisionMade, showPending = true, className }) {
+    const theme = verificationFlowPageTheme;
+    const store = useVerificationFlowStore();
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
+    const resolvedTitle = title || `${entityName} Verification Flow`;
+    const resolvedSubtitle = subtitle || `Verification workflow for the ${entityName} entity`;
+    const loadFlows = useEffectEvent(()=>{
+        store.setLoadingFlows(true);
+        const fallback = ()=>{
+            const demo = generateDemoFlow();
+            setNodes(demo.nodes);
+            setEdges(demo.edges);
+            store.setLoadingFlows(false);
+        };
+        flowListAction.start({
+            payload: {
+                entity_name: entityName
+            },
+            onAfterHandle: (res)=>{
+                const resObj = res;
+                const flowData = resObj.data;
+                const firstFlow = flowData?.[0];
+                if (flowData && firstFlow) {
+                    store.setFlows(flowData);
+                    store.setSelectedFlowId(firstFlow.id);
+                    onFlowSelected?.(firstFlow.id);
+                } else {
+                    fallback();
+                }
+                store.setLoadingFlows(false);
+            },
+            onErrorHandle: ()=>{
+                fallback();
+            }
+        });
+    });
+    const loadFlowDetail = useEffectEvent((flowId)=>{
+        store.setLoadingGraph(true);
+        flowGetAction.start({
+            payload: {
+                flow_id: flowId
+            },
+            onAfterHandle: (res)=>{
+                const resObj = res;
+                const graph = resObj.data?.graph;
+                if (graph?.steps && graph.steps.length > 0) {
+                    setNodes(stepsToNodes(graph.steps));
+                    setEdges(edgesToFlow(graph.edges));
+                } else {
+                    const demo = generateDemoFlow();
+                    setNodes(demo.nodes);
+                    setEdges(demo.edges);
+                }
+                store.setLoadingGraph(false);
+            },
+            onErrorHandle: ()=>{
+                store.setLoadingGraph(false);
+            }
+        });
+    });
+    useEffect(()=>{
+        loadFlows();
+    }, []);
+    useEffect(()=>{
+        if (store.selectedFlowId) {
+            loadFlowDetail(store.selectedFlowId);
+        }
+    }, [
+        store.selectedFlowId
+    ]);
+    const selectedFlow = store.flows.find((f)=>f.id === store.selectedFlowId);
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(theme.container.base, className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: theme.container.wrapper,
+            children: [
+                /*#__PURE__*/ _jsx("header", {
+                    className: theme.header.container,
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("h1", {
+                                        className: theme.header.title,
+                                        children: resolvedTitle
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: theme.header.subtitle,
+                                        children: resolvedSubtitle
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: theme.header.actions,
+                                children: [
+                                    showPending && /*#__PURE__*/ _jsxs("nav", {
+                                        className: theme.tabs.container,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                className: store.activeTab === "flow" ? theme.tabs.tabActive : theme.tabs.tab,
+                                                onClick: ()=>store.setActiveTab("flow"),
+                                                children: "Flow Designer"
+                                            }),
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                className: store.activeTab === "pending" ? theme.tabs.tabActive : theme.tabs.tab,
+                                                onClick: ()=>store.setActiveTab("pending"),
+                                                children: "Pending"
+                                            })
+                                        ]
+                                    }),
+                                    store.flows.length > 0 && /*#__PURE__*/ _jsx("select", {
+                                        className: theme.flowSelector.select,
+                                        value: store.selectedFlowId || "",
+                                        onChange: (e)=>{
+                                            store.setSelectedFlowId(e.target.value);
+                                            onFlowSelected?.(e.target.value);
+                                        },
+                                        children: store.flows.map((f)=>/*#__PURE__*/ _jsxs("option", {
+                                                value: f.id,
+                                                children: [
+                                                    f.name,
+                                                    " ",
+                                                    f.is_draft ? "(Draft)" : ""
+                                                ]
+                                            }, f.id))
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                store.activeTab === "flow" && /*#__PURE__*/ _jsxs("div", {
+                    className: theme.canvas.container,
+                    children: [
+                        (store.isLoadingFlows || store.isLoadingGraph) && /*#__PURE__*/ _jsx("div", {
+                            className: theme.loading.container,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: theme.loading.spinner
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(ReactFlow, {
+                            nodes: nodes,
+                            edges: edges,
+                            nodeTypes: nodeTypes,
+                            fitView: true,
+                            minZoom: 0.3,
+                            maxZoom: 2,
+                            proOptions: {
+                                hideAttribution: true
+                            },
+                            className: theme.canvas.background,
+                            children: [
+                                /*#__PURE__*/ _jsx(Background, {
+                                    color: "#d4d4d8",
+                                    gap: 20,
+                                    size: 1
+                                }),
+                                /*#__PURE__*/ _jsx(Controls, {}),
+                                /*#__PURE__*/ _jsx(MiniMap, {
+                                    nodeColor: (node)=>{
+                                        const nt = String(node.data?.nodeType || "step");
+                                        if (nt === "verifier") return "#f59e0b";
+                                        if (nt === "notification") return "#a855f7";
+                                        return "#3b82f6";
+                                    }
+                                })
+                            ]
+                        }),
+                        selectedFlow && /*#__PURE__*/ _jsxs("div", {
+                            className: theme.overlay.info,
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: theme.overlay.infoTitle,
+                                    children: selectedFlow.name
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.overlay.infoDescription,
+                                    children: selectedFlow.description || "No description"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-2 mt-2",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            className: cn(theme.overlay.badge, "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"),
+                                            children: [
+                                                "Trigger: ",
+                                                selectedFlow.trigger_on
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: cn(theme.overlay.badge, selectedFlow.is_draft ? theme.overlay.badgeDraft : theme.overlay.badgePublished),
+                                            children: selectedFlow.is_draft ? "Draft" : "Published"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: theme.legend.container,
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-4 text-xs",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.legend.item,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: theme.legend.dot.step
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: theme.legend.label,
+                                                children: "Step"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.legend.item,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: theme.legend.dot.verifier
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: theme.legend.label,
+                                                children: "Verifier"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.legend.item,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: theme.legend.dot.notification
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: theme.legend.label,
+                                                children: "Notification"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                store.activeTab === "pending" && showPending && /*#__PURE__*/ _jsx("div", {
+                    className: "flex-1 overflow-auto p-6",
+                    children: /*#__PURE__*/ _jsx(PendingTab, {
+                        pendingAction: pendingAction,
+                        decideAction: decideAction,
+                        onDecisionMade: onDecisionMade
+                    })
+                })
+            ]
+        })
+    });
+}

package/dist/fe/components/VerificationFlowPage/index.d.ts

@@ -0,0 +1,8 @@
+export { VerificationFlowPage } from "./components/VerificationFlowPage";
+export { PendingTab } from "./components/PendingTab";
+export { FlowNode } from "./components/FlowNode";
+export { useVerificationFlowStore } from "./store";
+export type { VerificationFlowPageTheme } from "./theme";
+export { verificationFlowPageTheme, extendVerificationFlowPageTheme, } from "./theme";
+export type { FlowDeleteAction, FlowEdgeData, FlowGetAction, FlowItemData, FlowListAction, FlowPublishAction, FlowSaveAction, GenericAction as VerificationFlowGenericAction, PendingItem as VerificationFlowPendingItem, StepNodeData, VerificationDecideAction as VerificationFlowDecideAction, VerificationFlowPageConfig, VerificationFlowPageProps, VerificationFlowPageState, VerificationFlowPageVariant, VerificationPendingAction as VerificationFlowPendingAction, VerificationStartAction as VerificationFlowStartAction, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/VerificationFlowPage/index.js

@@ -0,0 +1,5 @@
+export { VerificationFlowPage } from "./components/VerificationFlowPage";
+export { PendingTab } from "./components/PendingTab";
+export { FlowNode } from "./components/FlowNode";
+export { useVerificationFlowStore } from "./store";
+export { verificationFlowPageTheme, extendVerificationFlowPageTheme } from "./theme";

package/dist/fe/components/VerificationFlowPage/store/index.d.ts

@@ -0,0 +1,23 @@
+import type { FlowEdgeData, FlowItemData, PendingItem, StepNodeData, VerificationFlowPageState } from "../types";
+type VerificationFlowMethods = {
+    [key: string]: unknown;
+    setFlows: (flows: FlowItemData[]) => void;
+    setSelectedFlowId: (id: string | null) => void;
+    setGraphNodes: (nodes: StepNodeData[]) => void;
+    setGraphEdges: (edges: FlowEdgeData[]) => void;
+    setPendingItems: (items: PendingItem[]) => void;
+    setActiveTab: (tab: "flow" | "pending") => void;
+    setLoadingFlows: (value: boolean) => void;
+    setLoadingGraph: (value: boolean) => void;
+    setLoadingPending: (value: boolean) => void;
+    setDecidingId: (id: string | null) => void;
+    setDecisionReason: (reason: string) => void;
+    setError: (error: string | null) => void;
+    reset: () => void;
+};
+type StoreState = VerificationFlowPageState & {
+    [key: string]: unknown;
+};
+export declare const useVerificationFlowStore: () => import("h-state").StoreType<StoreState, VerificationFlowMethods>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/VerificationFlowPage/store/index.js

@@ -0,0 +1,70 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    flows: [],
+    selectedFlowId: null,
+    graphNodes: [],
+    graphEdges: [],
+    pendingItems: [],
+    activeTab: "flow",
+    isLoadingFlows: false,
+    isLoadingGraph: false,
+    isLoadingPending: false,
+    decidingId: null,
+    decisionReason: "",
+    error: null
+};
+export const { useStore: useVerificationFlowStore } = createStore(initialState, {
+    setFlows: (store)=>(flows)=>{
+            store.flows = flows;
+        },
+    setSelectedFlowId: (store)=>(id)=>{
+            store.selectedFlowId = id;
+        },
+    setGraphNodes: (store)=>(nodes)=>{
+            store.graphNodes = nodes;
+        },
+    setGraphEdges: (store)=>(edges)=>{
+            store.graphEdges = edges;
+        },
+    setPendingItems: (store)=>(items)=>{
+            store.pendingItems = items;
+        },
+    setActiveTab: (store)=>(tab)=>{
+            store.activeTab = tab;
+        },
+    setLoadingFlows: (store)=>(value)=>{
+            store.isLoadingFlows = value;
+        },
+    setLoadingGraph: (store)=>(value)=>{
+            store.isLoadingGraph = value;
+        },
+    setLoadingPending: (store)=>(value)=>{
+            store.isLoadingPending = value;
+        },
+    setDecidingId: (store)=>(id)=>{
+            store.decidingId = id;
+        },
+    setDecisionReason: (store)=>(reason)=>{
+            store.decisionReason = reason;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.flows = [];
+                store.selectedFlowId = null;
+                store.graphNodes = [];
+                store.graphEdges = [];
+                store.pendingItems = [];
+                store.activeTab = "flow";
+                store.isLoadingFlows = false;
+                store.isLoadingGraph = false;
+                store.isLoadingPending = false;
+                store.decidingId = null;
+                store.decisionReason = "";
+                store.error = null;
+            });
+        }
+});

package/dist/fe/components/VerificationFlowPage/theme/index.d.ts

@@ -0,0 +1,99 @@
+export type VerificationFlowPageTheme = {
+    container: {
+        base: string;
+        wrapper: string;
+    };
+    header: {
+        container: string;
+        titleWrapper: string;
+        title: string;
+        subtitle: string;
+        actions: string;
+    };
+    tabs: {
+        container: string;
+        tab: string;
+        tabActive: string;
+    };
+    flowSelector: {
+        select: string;
+    };
+    canvas: {
+        container: string;
+        background: string;
+    };
+    overlay: {
+        info: string;
+        infoTitle: string;
+        infoDescription: string;
+        badge: string;
+        badgeDraft: string;
+        badgePublished: string;
+    };
+    legend: {
+        container: string;
+        item: string;
+        dot: {
+            step: string;
+            verifier: string;
+            notification: string;
+        };
+        label: string;
+    };
+    node: {
+        step: {
+            bg: string;
+            border: string;
+            icon: string;
+        };
+        verifier: {
+            bg: string;
+            border: string;
+            icon: string;
+        };
+        notification: {
+            bg: string;
+            border: string;
+            icon: string;
+        };
+        base: string;
+        activeRing: string;
+        typeLabel: string;
+        nameLabel: string;
+        description: string;
+        badge: {
+            approved: string;
+            rejected: string;
+            pending: string;
+            active: string;
+        };
+        handle: string;
+    };
+    pending: {
+        container: string;
+        title: string;
+        empty: {
+            container: string;
+            icon: string;
+            text: string;
+        };
+        card: {
+            container: string;
+            title: string;
+            subtitle: string;
+            actions: string;
+        };
+        input: string;
+        approveButton: string;
+        rejectButton: string;
+        cancelButton: string;
+        reviewButton: string;
+    };
+    loading: {
+        container: string;
+        spinner: string;
+    };
+};
+export declare const verificationFlowPageTheme: VerificationFlowPageTheme;
+export declare function extendVerificationFlowPageTheme(overrides: Partial<VerificationFlowPageTheme>): VerificationFlowPageTheme;
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/VerificationFlowPage/theme/index.js

@@ -0,0 +1,138 @@
+export const verificationFlowPageTheme = {
+    container: {
+        base: "min-h-screen bg-zinc-50 dark:bg-black",
+        wrapper: "flex flex-col h-screen"
+    },
+    header: {
+        container: "flex-shrink-0 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-4",
+        titleWrapper: "",
+        title: "text-xl font-bold text-zinc-900 dark:text-white tracking-tight",
+        subtitle: "text-sm text-zinc-500 dark:text-zinc-400",
+        actions: "flex items-center gap-3"
+    },
+    tabs: {
+        container: "flex gap-1 p-1 bg-zinc-100 dark:bg-zinc-800/50 rounded-lg",
+        tab: "px-3 py-1.5 rounded-md text-xs font-medium transition-all text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white",
+        tabActive: "px-3 py-1.5 rounded-md text-xs font-medium transition-all bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm"
+    },
+    flowSelector: {
+        select: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-1.5 text-xs text-zinc-900 dark:text-white"
+    },
+    canvas: {
+        container: "flex-1 relative",
+        background: "bg-zinc-50 dark:bg-zinc-950"
+    },
+    overlay: {
+        info: "absolute top-4 left-4 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-lg max-w-xs",
+        infoTitle: "text-sm font-semibold text-zinc-900 dark:text-white",
+        infoDescription: "text-xs text-zinc-500 dark:text-zinc-400 mt-1",
+        badge: "text-[10px] font-medium px-2 py-0.5 rounded-full",
+        badgeDraft: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
+        badgePublished: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300"
+    },
+    legend: {
+        container: "absolute bottom-4 left-4 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-xl border border-zinc-200 dark:border-zinc-800 p-3 shadow-lg",
+        item: "flex items-center gap-1.5",
+        dot: {
+            step: "w-3 h-3 rounded bg-blue-500",
+            verifier: "w-3 h-3 rounded bg-amber-500",
+            notification: "w-3 h-3 rounded bg-purple-500"
+        },
+        label: "text-zinc-600 dark:text-zinc-400"
+    },
+    node: {
+        step: {
+            bg: "bg-blue-50 dark:bg-blue-950/40",
+            border: "border-blue-300 dark:border-blue-700",
+            icon: "text-blue-600 dark:text-blue-400"
+        },
+        verifier: {
+            bg: "bg-amber-50 dark:bg-amber-950/40",
+            border: "border-amber-300 dark:border-amber-700",
+            icon: "text-amber-600 dark:text-amber-400"
+        },
+        notification: {
+            bg: "bg-purple-50 dark:bg-purple-950/40",
+            border: "border-purple-300 dark:border-purple-700",
+            icon: "text-purple-600 dark:text-purple-400"
+        },
+        base: "rounded-xl border-2 px-4 py-3 min-w-[180px] shadow-lg transition-all",
+        activeRing: "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-black",
+        typeLabel: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400",
+        nameLabel: "text-sm font-medium text-zinc-900 dark:text-white truncate",
+        description: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 truncate",
+        badge: {
+            approved: "bg-emerald-500 text-white",
+            rejected: "bg-red-500 text-white",
+            pending: "bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300",
+            active: "bg-blue-500 text-white animate-pulse"
+        },
+        handle: "!w-3 !h-3 !bg-zinc-400 dark:!bg-zinc-500 !border-2 !border-white dark:!border-zinc-900"
+    },
+    pending: {
+        container: "max-w-3xl mx-auto space-y-3",
+        title: "text-lg font-semibold text-zinc-900 dark:text-white mb-4",
+        empty: {
+            container: "text-center py-20",
+            icon: "w-16 h-16 text-zinc-300 dark:text-zinc-600 mx-auto mb-4",
+            text: "text-zinc-500 dark:text-zinc-400"
+        },
+        card: {
+            container: "rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 shadow-sm",
+            title: "text-sm font-medium text-zinc-900 dark:text-white",
+            subtitle: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5",
+            actions: "flex items-center gap-2"
+        },
+        input: "rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-3 py-1.5 text-xs text-zinc-900 dark:text-white w-40",
+        approveButton: "rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 transition-colors",
+        rejectButton: "rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700 transition-colors",
+        cancelButton: "rounded-lg bg-zinc-200 dark:bg-zinc-700 px-3 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors",
+        reviewButton: "rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 transition-colors"
+    },
+    loading: {
+        container: "absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-black/50 z-10",
+        spinner: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"
+    }
+};
+export function extendVerificationFlowPageTheme(overrides) {
+    return {
+        ...verificationFlowPageTheme,
+        ...overrides,
+        container: {
+            ...verificationFlowPageTheme.container,
+            ...overrides.container
+        },
+        header: {
+            ...verificationFlowPageTheme.header,
+            ...overrides.header
+        },
+        tabs: {
+            ...verificationFlowPageTheme.tabs,
+            ...overrides.tabs
+        },
+        canvas: {
+            ...verificationFlowPageTheme.canvas,
+            ...overrides.canvas
+        },
+        overlay: {
+            ...verificationFlowPageTheme.overlay,
+            ...overrides.overlay
+        },
+        legend: {
+            ...verificationFlowPageTheme.legend,
+            ...overrides.legend
+        },
+        node: {
+            ...verificationFlowPageTheme.node,
+            ...overrides.node
+        },
+        pending: {
+            ...verificationFlowPageTheme.pending,
+            ...overrides.pending
+        },
+        loading: {
+            ...verificationFlowPageTheme.loading,
+            ...overrides.loading
+        }
+    };
+}

package/dist/fe/components/VerificationFlowPage/types/index.d.ts

@@ -0,0 +1,111 @@
+import type { FlowListResponse, FlowDetailResponse, VerificationDecidePayload, VerificationDecideResponse, VerificationPendingResponse, VerificationStartPayload, VerificationStartResponse, FlowSavePayload, FlowSaveResponse, FlowPublishResponse, FlowDeleteResponse } from "../../../../src/Client/ApiCaller/types";
+export type VerificationFlowPageVariant = "default" | "compact";
+export type GenericAction<TPayload = unknown, TData = unknown, TError = unknown> = {
+    start: (config: {
+        payload: TPayload;
+        onAfterHandle?: (data: TData) => void;
+        onErrorHandle?: (error: TError, code?: number | null) => void;
+    }) => void;
+    state: {
+        isPending: boolean;
+        data: TData | null;
+        error: TError | null;
+    };
+};
+export type FlowListAction = GenericAction<{
+    entity_name?: string;
+}, FlowListResponse>;
+export type FlowGetAction = GenericAction<{
+    flow_id: string;
+}, FlowDetailResponse>;
+export type FlowSaveAction = GenericAction<FlowSavePayload, FlowSaveResponse>;
+export type FlowPublishAction = GenericAction<{
+    flow_id: string;
+}, FlowPublishResponse>;
+export type FlowDeleteAction = GenericAction<{
+    flow_id: string;
+}, FlowDeleteResponse>;
+export type VerificationDecideAction = GenericAction<VerificationDecidePayload & {
+    entity_name: string;
+    entity_id: string;
+}, VerificationDecideResponse>;
+export type VerificationPendingAction = GenericAction<undefined, VerificationPendingResponse>;
+export type VerificationStartAction = GenericAction<VerificationStartPayload, VerificationStartResponse>;
+export type FlowItemData = {
+    id: string;
+    entity_name: string;
+    name: string;
+    description?: string;
+    trigger_on: string;
+    trigger_fields?: string[];
+    is_draft: boolean;
+    published_at?: string;
+    created_at: string;
+    updated_at: string;
+};
+export type StepNodeData = {
+    node_id: string;
+    node_type: "step" | "verifier" | "notification";
+    step_order: number;
+    name?: string;
+    description?: string;
+    position_x: number;
+    position_y: number;
+    width?: number;
+    height?: number;
+    data?: Record<string, unknown>;
+};
+export type FlowEdgeData = {
+    edge_id: string;
+    source_node_id: string;
+    target_node_id: string;
+    source_handle?: string;
+    target_handle?: string;
+    edge_type?: string;
+    label?: string;
+    animated?: boolean;
+};
+export type PendingItem = {
+    instance_id: string;
+    entity_name: string;
+    entity_id: string;
+    flow_name: string;
+    step_order: number;
+    step_name?: string;
+    require_signature: boolean;
+    created_at: string;
+};
+export type VerificationFlowPageConfig = {
+    variant?: VerificationFlowPageVariant;
+    entityName: string;
+    title?: string;
+    subtitle?: string;
+    flowListAction: FlowListAction;
+    flowGetAction: FlowGetAction;
+    flowSaveAction?: FlowSaveAction;
+    flowPublishAction?: FlowPublishAction;
+    flowDeleteAction?: FlowDeleteAction;
+    pendingAction: VerificationPendingAction;
+    decideAction: VerificationDecideAction;
+    startAction?: VerificationStartAction;
+    onFlowSelected?: (flowId: string) => void;
+    onDecisionMade?: (entityName: string, entityId: string) => void;
+    showPending?: boolean;
+    className?: string;
+};
+export type VerificationFlowPageProps = VerificationFlowPageConfig;
+export type VerificationFlowPageState = {
+    flows: FlowItemData[];
+    selectedFlowId: string | null;
+    graphNodes: StepNodeData[];
+    graphEdges: FlowEdgeData[];
+    pendingItems: PendingItem[];
+    activeTab: "flow" | "pending";
+    isLoadingFlows: boolean;
+    isLoadingGraph: boolean;
+    isLoadingPending: boolean;
+    decidingId: string | null;
+    decisionReason: string;
+    error: string | null;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/fe/components/VerificationFlowPage/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/index.d.ts

@@ -38,6 +38,8 @@ export type { NotificationBellConfig, NotificationBellProps, NotificationCenterC
 export { NotificationBell, NotificationCenter, notificationCenterTheme, extendNotificationCenterTheme, useNotificationCenterStore, } from "./components/NotificationCenter";
 export type { PendingItem, PendingRequirement, PendingVerificationsConfig, PendingVerificationsProps, PendingVerificationsState, VerificationDecideAction, VerificationFlow, VerificationInstance, VerificationPanelConfig, VerificationPanelProps, VerificationPanelState, VerificationPanelVariant, VerificationPendingAction, VerificationRecord, VerificationStartAction, VerificationStatusAction, } from "./components/VerificationPanel";
 export { PendingVerifications, VerificationPanel, verificationPanelTheme, extendVerificationPanelTheme, useVerificationPanelStore, usePendingVerificationsStore, } from "./components/VerificationPanel";
+export type { FlowDeleteAction, FlowEdgeData, FlowGetAction, FlowItemData, FlowListAction, FlowPublishAction, FlowSaveAction, StepNodeData, VerificationFlowDecideAction, VerificationFlowGenericAction, VerificationFlowPageConfig, VerificationFlowPageProps, VerificationFlowPageState, VerificationFlowPageVariant, VerificationFlowPendingAction, VerificationFlowPendingItem, VerificationFlowStartAction, } from "./components/VerificationFlowPage";
+export { FlowNode, PendingTab, VerificationFlowPage, verificationFlowPageTheme, extendVerificationFlowPageTheme, useVerificationFlowStore, } from "./components/VerificationFlowPage";
 export { useNucleusEntity } from "./hooks/useNucleusEntity";
 export type { BulkDeleteResponse, ColumnConfig, ColumnEnum, ColumnReference, ColumnType, ColumnValidation, DeleteResponse, FieldConfig, FilterCondition, ListResponse, MutationResponse, NucleusColumn, NucleusEntity, NucleusEntityShowcaseProps, PaginationMeta, QueryParams, SingleResponse, SortCondition, SortDirection, UseNucleusEntityOptions, UseNucleusEntityReturn, } from "./types";
 export { cn } from "./utils/cn";

package/dist/fe/index.js

@@ -24,6 +24,7 @@ export { UsersPage, useUsersStore } from "./components/UsersPage";
 export { useVerifyEmailStore, VerifyEmailPage } from "./components/VerifyEmailPage";
 export { NotificationBell, NotificationCenter, notificationCenterTheme, extendNotificationCenterTheme, useNotificationCenterStore } from "./components/NotificationCenter";
 export { PendingVerifications, VerificationPanel, verificationPanelTheme, extendVerificationPanelTheme, useVerificationPanelStore, usePendingVerificationsStore } from "./components/VerificationPanel";
+export { FlowNode, PendingTab, VerificationFlowPage, verificationFlowPageTheme, extendVerificationFlowPageTheme, useVerificationFlowStore } from "./components/VerificationFlowPage";
 export { useNucleusEntity } from "./hooks/useNucleusEntity";
 export { cn } from "./utils/cn";
 export { formatLabel, getColumnType, getDefaultValue, isArrayColumn, isJsonColumn, isReferenceColumn, shouldExcludeColumn, shouldExcludeFromForm } from "./utils/columnUtils";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nucleus-core-ts",
-	"version": "0.8.106",
+	"version": "0.8.108",
 	"description": "Production-ready, enterprise-grade TypeScript framework for building multi-tenant APIs",
 	"author": "Hidayet Can Özcan <hidayetcan@gmail.com>",
 	"license": "SEE LICENSE IN LICENSE",
@@ -43,7 +43,7 @@
 	"scripts": {
 		"build": "bun run scripts/build.ts",
 		"build:quick": "bun run build:js && bun run build:types",
-		"build:js": "bun build ./index.ts ./client.ts ./fe/index.ts ./src/Client/Proxy/index.ts --outdir=dist --target=bun --format=esm --splitting --minify --external react --external react-dom --external gsap --external @gsap/react --external h-state --external three --external @react-three/fiber --external elysia --external drizzle-orm --external drizzle-kit --external ioredis --external googleapis --external @dapr/dapr --external pg",
+		"build:js": "bun build ./index.ts ./client.ts ./fe/index.ts ./src/Client/Proxy/index.ts --outdir=dist --target=bun --format=esm --splitting --minify --external react --external react-dom --external gsap --external @gsap/react --external h-state --external three --external @react-three/fiber --external elysia --external drizzle-orm --external drizzle-kit --external ioredis --external googleapis --external @dapr/dapr --external pg --external @xyflow/react --external @xyflow/system",
 		"build:types": "tsc --declaration --emitDeclarationOnly --outDir dist --skipLibCheck",
 		"version:patch": "bun run scripts/version.ts patch",
 		"version:minor": "bun run scripts/version.ts minor",
@@ -88,6 +88,7 @@
 		"@elysiajs/static": "latest",
 		"@elysiajs/swagger": "latest",
 		"@gsap/react": "latest",
+		"@xyflow/react": "^12.10.1",
 		"drizzle-orm": "latest",
 		"googleapis": "latest",
 		"gsap": "latest",