61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T5839,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type NodeKind = "trigger" | "action" | "condition" | "wait"; export interface FlowNode { id: string; kind: NodeKind; title: string; detail: string; icon: IconName; } export interface WorkflowBuilderProps { name?: string; trigger?: FlowNode; /** Steps before the condition. */ steps?: FlowNode[]; condition?: FlowNode; yes?: FlowNode[]; no?: FlowNode[]; onPublish?: (live: boolean) => void; theme?: "dark" | "light"; className?: string; } type IconName = "form" | "sparkle" | "split" | "deal" | "chat" | "mail" | "clock" | "webhook" | "tag" | "user"; const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", node: "#171717", border: "rgba(255,255,255,0.1)", line: "rgba(255,255,255,0.16)", chip: "rgba(255,255,255,0.06)", dots: "rgba(255,255,255,0.07)", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", accent: "#FB923C", ring: "rgba(245,244,241,0.6)", input: "#0D0D0D", shadow: "0 18px 40px -18px rgba(0,0,0,0.8)" }, light: { bg: "#F6F6F3", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", node: "#FFFFFF", border: "rgba(10,10,10,0.1)", line: "rgba(10,10,10,0.18)", chip: "rgba(10,10,10,0.05)", dots: "rgba(10,10,10,0.08)", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", amber: "#B45309", accent: "#EA580C", ring: "rgba(10,10,10,0.5)", input: "#FAFAF8", shadow: "0 18px 40px -22px rgba(0,0,0,0.25)" }, }; const KIND_COLOR: Record = { trigger: "#FB923C", action: "#60A5FA", condition: "#A78BFA", wait: "#FBBF24" }; const ICONS: Record = { form: "M6 3h12v18H6zM9 8h6M9 12h6M9 16h3", sparkle: "M12 3c.4 4.6 2.4 7.6 7 8-4.6.4-6.6 3.4-7 8-.4-4.6-2.4-7.6-7-8 4.6-.4 6.6-3.4 7-8Z", split: "M6 3v6a4 4 0 0 0 4 4h4a4 4 0 0 1 4 4v4M6 21v-8M18 3v4", deal: "M3 12h4l3-6 4 12 3-6h4", chat: "M4 5h16v11H8l-4 4V5Z", mail: "M3 7l9 6 9-6M4 5h16v14H4z", clock: "M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", webhook: "M10 14a3 3 0 1 1 4 0l3 5M7 18a3 3 0 1 1 1-5l4-6M17 18h-5", tag: "M3 12V4h8l10 10-8 8L3 12Zm5-4h.01", user: "M4 20a8 8 0 0 1 16 0M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z", }; const LIBRARY: { title: string; detail: string; icon: IconName; kind: NodeKind }[] = [ { title: "Send email", detail: "Template: Welcome", icon: "mail", kind: "action" }, { title: "Wait", detail: "1 day", icon: "clock", kind: "wait" }, { title: "Call webhook", detail: "POST /hooks/leads", icon: "webhook", kind: "action" }, { title: "Add tag", detail: "hot-lead", icon: "tag", kind: "action" }, { title: "Assign owner", detail: "Round robin · Sales", icon: "user", kind: "action" }, ]; const DEFAULT_TRIGGER: FlowNode = { id: "t", kind: "trigger", title: "Form submitted", detail: "Demo request form", icon: "form" }; const DEFAULT_STEPS: FlowNode[] = [{ id: "s1", kind: "action", title: "Enrich contact", detail: "Company, size and role", icon: "sparkle" }]; const DEFAULT_CONDITION: FlowNode = { id: "c", kind: "condition", title: "Company size over 50", detail: "If employees > 50", icon: "split" }; const DEFAULT_YES: FlowNode[] = [ { id: "y1", kind: "action", title: "Create deal", detail: "Pipeline: Enterprise", icon: "deal" }, { id: "y2", kind: "action", title: "Notify #sales", detail: "Message the sales channel", icon: "chat" }, ]; const DEFAULT_NO: FlowNode[] = [{ id: "n1", kind: "action", title: "Add to nurture", detail: "Sequence: Small teams", icon: "mail" }]; type Branch = "main" | "yes" | "no"; type RunState = Record; export function WorkflowBuilder({ name = "Route new demo requests", trigger = DEFAULT_TRIGGER, steps = DEFAULT_STEPS, condition = DEFAULT_CONDITION, yes = DEFAULT_YES, no = DEFAULT_NO, onPublish, theme = "dark", className }: WorkflowBuilderProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const [flow, setFlow] = React.useState<{ main: FlowNode[]; yes: FlowNode[]; no: FlowNode[] }>({ main: steps, yes, no }); const [selected, setSelected] = React.useState(null); const [adding, setAdding] = React.useState<{ branch: Branch; index: number } | null>(null); const [run, setRun] = React.useState({}); const [pulse, setPulse] = React.useState(null); const [log, setLog] = React.useState(null); const [running, setRunning] = React.useState(false); const [live, setLive] = React.useState(false); const [runCount, setRunCount] = React.useState(41); const seq = React.useRef(0); const focusMenu = React.useCallback((el: HTMLButtonElement | null) => el?.focus({ preventScroll: true }), []); const timers = React.useRef[]>([]); React.useEffect(() => () => timers.current.forEach(clearTimeout), []); const all = [trigger, ...flow.main, condition, ...flow.yes, ...flow.no]; const sel = all.find((n) => n.id === selected) ?? null; const branchOf = (id: string): Branch | null => (flow.main.some((n) => n.id === id) ? "main" : flow.yes.some((n) => n.id === id) ? "yes" : flow.no.some((n) => n.id === id) ? "no" : null); const insert = (branch: Branch, index: number, item: (typeof LIBRARY)[number]) => { seq.current += 1; const node: FlowNode = { id: `new-${seq.current}`, ...item }; setFlow((f) => ({ ...f, [branch]: [...f[branch].slice(0, index), node, ...f[branch].slice(index)] })); setAdding(null); setSelected(node.id); }; const remove = (id: string) => { const b = branchOf(id); if (!b) return; setFlow((f) => ({ ...f, [b]: f[b].filter((n) => n.id !== id) })); setSelected(null); }; const update = (id: string, patch: Partial) => { const b = branchOf(id); if (!b) return; setFlow((f) => ({ ...f, [b]: f[b].map((n) => (n.id === id ? { ...n, ...patch } : n)) })); }; const test = () => { if (running) return; timers.current.forEach(clearTimeout); timers.current = []; setRunning(true); setLog(null); setSelected(null); setAdding(null); const order = [trigger, ...flow.main, condition, ...flow.yes]; const step = reduce ? 80 : 520; const state: RunState = {}; flow.no.forEach((n) => (state[n.id] = "skipped")); setRun({}); order.forEach((n, i) => { timers.current.push( setTimeout(() => { setPulse(n.id); setRun((r) => ({ ...r, [n.id]: "running" })); }, i * step), ); timers.current.push(setTimeout(() => setRun((r) => ({ ...r, [n.id]: "done", ...(n.id === condition.id ? state : {}) })), i * step + step * 0.7)); }); timers.current.push( setTimeout( () => { setRunning(false); setPulse(null); setRunCount((c) => c + 1); setLog(`Run #${runCount + 1} succeeded in ${((order.length * step) / 1000).toFixed(1)}s · took the Yes branch`); }, order.length * step + 200, ), ); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const glyph = (i: IconName, size = 15) => ( ); const nodeCard = (n: FlowNode) => { const st = run[n.id]; const isSel = selected === n.id; const c = KIND_COLOR[n.kind]; return ( {st === "running" && !reduce && } ); }; const connector = (branch: Branch, index: number, toId: string | null, short = false) => { const isAdding = adding?.branch === branch && adding.index === index; return (

{toId && pulse === toId && !reduce && } {isAdding && ( )}

); }; const branchCol = (branch: "yes" | "no", nodes: FlowNode[]) => (

{branch === "yes" ? "Yes" : "No"} {connector(branch, 0, nodes[0]?.id ?? null, true)} {nodes.map((n, i) => ( {nodeCard(n)} {connector(branch, i + 1, nodes[i + 1]?.id ?? null, true)} ))}

); return (

{/* Toolbar */}

{name}

{all.length} steps · {runCount} runs

{/* Canvas */}

{nodeCard(trigger)} {connector("main", 0, flow.main[0]?.id ?? condition.id)} {flow.main.map((n, i) => ( {nodeCard(n)} {connector("main", i + 1, flow.main[i + 1]?.id ?? condition.id)} ))} {nodeCard(condition)}

{/* Inspector */}

{sel ? (

{glyph(sel.icon)}

{sel.kind} settings

Name update(sel.id, { title: e.target.value })} className={cn("h-9 rounded-lg border px-3 text-[13px] disabled:opacity-60", focus)} style={{ borderColor: p.border, background: p.input, color: p.text, ...ring }} /> {sel.kind === "wait" ? "Duration" : sel.kind === "condition" ? "Rule" : sel.kind === "trigger" ? "Source" : "Details"} update(sel.id, { detail: e.target.value })} className={cn("h-9 rounded-lg border px-3 text-[13px] disabled:opacity-60", focus)} style={{ borderColor: p.border, background: p.input, color: p.text, ...ring }} /> {!branchOf(sel.id) ? (

The trigger and the condition are part of this template and cannot be removed.

) : ( )} ) : (

Build the flow

Click a step to edit it, or press + on any line to add an email, a wait, a webhook and more.

)}

); } export default WorkflowBuilder; 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/workflow-builder/workflow-builder.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]