nucleus-core-ts 0.8.108 → 0.8.110

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

@@ -1,15 +1,44 @@
 import type { ReactElement } from "react";
-interface FlowNodeData {
-    label: string;
-    description: string;
-    nodeType: string;
+import type { NotificationChannel } from "../types";
+interface StepNodeDataProps {
+    label?: string;
+    description?: string;
+    nodeType: "step";
     stepOrder: number;
-    decision: string;
-    isActive: boolean;
+    selected?: boolean;
     [key: string]: unknown;
 }
-export declare function FlowNode({ data }: {
-    data: FlowNodeData;
+interface VerifierNodeDataProps {
+    label?: string;
+    description?: string;
+    nodeType: "verifier";
+    stepOrder: number;
+    verifierType?: "user" | "role";
+    verifierRole?: string;
+    verifierUserEmail?: string;
+    requireSignature?: boolean;
+    allMustApprove?: boolean;
+    selected?: boolean;
+    [key: string]: unknown;
+}
+interface NotificationNodeDataProps {
+    label?: string;
+    description?: string;
+    nodeType: "notification";
+    stepOrder: number;
+    trigger?: string;
+    channels?: NotificationChannel[];
+    selected?: boolean;
+    [key: string]: unknown;
+}
+export declare function StepFlowNode({ data, }: {
+    data: StepNodeDataProps;
+}): ReactElement;
+export declare function VerifierFlowNode({ data, }: {
+    data: VerifierNodeDataProps;
+}): ReactElement;
+export declare function NotificationFlowNode({ data, }: {
+    data: NotificationNodeDataProps;
 }): ReactElement;
 export {};
 //# sourceMappingURL=FlowNode.d.ts.map

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

@@ -1,13 +1,14 @@
 "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";
+// ─── Shared icon components ───────────────────────────────────────
 const StepIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
         className: className,
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
+        strokeWidth: 1.5,
         children: [
             /*#__PURE__*/ _jsx("title", {
                 children: "Step"
@@ -15,8 +16,7 @@ const StepIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
             /*#__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"
+                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 2m-6 9l2 2 4-4"
             })
         ]
     });
@@ -25,6 +25,7 @@ const VerifierIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
+        strokeWidth: 1.5,
         children: [
             /*#__PURE__*/ _jsx("title", {
                 children: "Verifier"
@@ -32,8 +33,7 @@ const VerifierIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
             /*#__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"
+                d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
             })
         ]
     });
@@ -42,6 +42,7 @@ const NotificationIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
         fill: "none",
         viewBox: "0 0 24 24",
         stroke: "currentColor",
+        strokeWidth: 1.5,
         children: [
             /*#__PURE__*/ _jsx("title", {
                 children: "Notification"
@@ -49,62 +50,167 @@ const NotificationIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
             /*#__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"
+                d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
             })
         ]
     });
-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] : "";
+// ─── Step Node ────────────────────────────────────────────────────
+export function StepFlowNode({ data }) {
+    const theme = verificationFlowPageTheme.stepNode;
+    const isSelected = data.selected === true;
     return /*#__PURE__*/ _jsxs("div", {
-        className: cn(theme.node.base, colors.border, colors.bg, isActive && !decision ? theme.node.activeRing : ""),
+        className: isSelected ? theme.containerSelected : theme.container,
         children: [
             /*#__PURE__*/ _jsx(Handle, {
                 type: "target",
-                position: Position.Top,
-                className: theme.node.handle
+                position: Position.Left,
+                className: theme.handleTarget
+            }),
+            data.stepOrder > 0 && /*#__PURE__*/ _jsx("span", {
+                className: theme.orderBadge,
+                children: data.stepOrder
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-center gap-2 mb-1",
+                className: "flex items-center gap-2",
                 children: [
-                    /*#__PURE__*/ _jsx(Icon, {
-                        className: cn("w-4 h-4", colors.icon)
+                    /*#__PURE__*/ _jsx(StepIcon, {
+                        className: `w-4 h-4 ${theme.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"
+                        className: theme.typeLabel,
+                        children: "Step"
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx("p", {
-                className: theme.node.nameLabel,
+                className: theme.nameLabel,
                 children: data.label || `Step ${data.stepOrder}`
             }),
             data.description ? /*#__PURE__*/ _jsx("p", {
-                className: theme.node.description,
+                className: theme.description,
+                children: String(data.description)
+            }) : null,
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "source",
+                position: Position.Right,
+                className: theme.handleSource
+            })
+        ]
+    });
+}
+// ─── Verifier Node ────────────────────────────────────────────────
+export function VerifierFlowNode({ data }) {
+    const theme = verificationFlowPageTheme.verifierNode;
+    const isSelected = data.selected === true;
+    const assignedLabel = data.verifierType === "role" ? data.verifierRole || "No role" : data.verifierUserEmail || "No user";
+    return /*#__PURE__*/ _jsxs("div", {
+        className: isSelected ? theme.containerSelected : theme.container,
+        children: [
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "target",
+                position: Position.Left,
+                className: theme.handleTarget
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx(VerifierIcon, {
+                        className: `w-4 h-4 ${theme.icon}`
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.typeLabel,
+                        children: "Verifier"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.nameLabel,
+                children: data.label || "Verifier"
+            }),
+            data.description ? /*#__PURE__*/ _jsx("p", {
+                className: theme.description,
                 children: String(data.description)
             }) : null,
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap gap-1.5 mt-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: theme.assignedBadge,
+                        children: [
+                            data.verifierType === "role" ? "⛊" : "⚇",
+                            " ",
+                            assignedLabel
+                        ]
+                    }),
+                    data.requireSignature && /*#__PURE__*/ _jsx("span", {
+                        className: theme.signatureBadge,
+                        children: "✍ Signature"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "source",
+                position: Position.Right,
+                className: theme.handleSource
+            })
+        ]
+    });
+}
+// ─── Notification Node ────────────────────────────────────────────
+export function NotificationFlowNode({ data }) {
+    const theme = verificationFlowPageTheme.notificationNode;
+    const isSelected = data.selected === true;
+    const channels = data.channels || [];
+    const trigger = data.trigger || "on_step_reached";
+    const triggerLabel = trigger.replace(/^on_/, "").replace(/_/g, " ");
+    return /*#__PURE__*/ _jsxs("div", {
+        className: isSelected ? theme.containerSelected : theme.container,
+        children: [
+            /*#__PURE__*/ _jsx(Handle, {
+                type: "target",
+                position: Position.Left,
+                className: theme.handleTarget
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx(NotificationIcon, {
+                        className: `w-4 h-4 ${theme.icon}`
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.typeLabel,
+                        children: "Notification"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.nameLabel,
+                children: data.label || "Notification"
+            }),
+            data.description ? /*#__PURE__*/ _jsx("p", {
+                className: theme.description,
+                children: String(data.description)
+            }) : null,
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap gap-1.5 mt-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: theme.triggerBadge,
+                        children: [
+                            "⚡ ",
+                            triggerLabel
+                        ]
+                    }),
+                    channels.map((ch)=>/*#__PURE__*/ _jsx("span", {
+                            className: theme.channelBadge,
+                            children: ch
+                        }, ch))
+                ]
+            }),
             /*#__PURE__*/ _jsx(Handle, {
                 type: "source",
-                position: Position.Bottom,
-                className: theme.node.handle
+                position: Position.Right,
+                className: theme.handleSource
             })
         ]
     });

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

@@ -0,0 +1,3 @@
+import type { ReactElement } from "react";
+export declare function NodePalette(): ReactElement;
+//# sourceMappingURL=NodePropertiesPanel.d.ts.map

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

@@ -0,0 +1,131 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { verificationFlowPageTheme } from "../theme";
+const paletteItems = [
+    {
+        type: "step",
+        label: "Step",
+        description: "A verification checkpoint in the flow",
+        iconBg: "bg-blue-500/20 text-blue-400",
+        themeKey: "stepItem"
+    },
+    {
+        type: "verifier",
+        label: "Verifier",
+        description: "Assign a user or role to approve",
+        iconBg: "bg-amber-500/20 text-amber-400",
+        themeKey: "verifierItem"
+    },
+    {
+        type: "notification",
+        label: "Notification",
+        description: "Send alerts via portal, email, or webhook",
+        iconBg: "bg-violet-500/20 text-violet-400",
+        themeKey: "notificationItem"
+    }
+];
+const StepPaletteIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
+        className: "w-4.5 h-4.5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Step"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                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 2m-6 9l2 2 4-4"
+            })
+        ]
+    });
+const VerifierPaletteIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
+        className: "w-4.5 h-4.5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Verifier"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+            })
+        ]
+    });
+const NotificationPaletteIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
+        className: "w-4.5 h-4.5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx("title", {
+                children: "Notification"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
+            })
+        ]
+    });
+const iconComponents = {
+    step: StepPaletteIcon,
+    verifier: VerifierPaletteIcon,
+    notification: NotificationPaletteIcon
+};
+export function NodePalette() {
+    const theme = verificationFlowPageTheme.palette;
+    const onDragStart = (e, nodeType)=>{
+        e.dataTransfer.setData("application/reactflow-nodetype", nodeType);
+        e.dataTransfer.effectAllowed = "move";
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.container,
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.title,
+                children: "Components"
+            }),
+            paletteItems.map((item)=>{
+                const Icon = iconComponents[item.type];
+                return /*#__PURE__*/ _jsxs("div", {
+                    role: "button",
+                    tabIndex: 0,
+                    className: cn(theme.item, theme[item.themeKey]),
+                    draggable: true,
+                    onDragStart: (e)=>onDragStart(e, item.type),
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: cn(theme.itemIcon, item.iconBg),
+                            children: /*#__PURE__*/ _jsx(Icon, {})
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.itemLabel,
+                                    children: item.label
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.itemDescription,
+                                    children: item.description
+                                })
+                            ]
+                        })
+                    ]
+                }, item.type);
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.dragHint,
+                children: "Drag a component onto the canvas to add it to your flow"
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+import type { ListRolesAction, ListUsersAction, NodeType, NotificationChannel, RecipientType, VerificationTrigger } from "../types";
+interface NodeData {
+    nodeType: NodeType;
+    label?: string;
+    description?: string;
+    stepOrder: number;
+    verifierType?: "user" | "role";
+    verifierUserId?: string;
+    verifierUserEmail?: string;
+    verifierRole?: string;
+    requireSignature?: boolean;
+    allMustApprove?: boolean;
+    trigger?: VerificationTrigger;
+    channels?: NotificationChannel[];
+    recipientType?: RecipientType;
+    recipientUserId?: string;
+    recipientRole?: string;
+    titleTemplate?: string;
+    bodyTemplate?: string;
+    [key: string]: unknown;
+}
+interface PropertiesPanelProps {
+    nodeId: string;
+    nodeData: NodeData;
+    onUpdateNode: (nodeId: string, data: NodeData) => void;
+    onDeleteNode: (nodeId: string) => void;
+    onClose: () => void;
+    listUsersAction?: ListUsersAction;
+    listRolesAction?: ListRolesAction;
+}
+export declare function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, }: PropertiesPanelProps): ReactElement;
+export {};
+//# sourceMappingURL=PropertiesPanel.d.ts.map