@timo9378/flow2code 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/cli.js +606 -101687
- package/dist/server.js +342 -101423
- package/out/404.html +1 -1
- package/out/__next.__PAGE__.txt +1 -1
- package/out/__next._full.txt +1 -1
- package/out/__next._head.txt +1 -1
- package/out/__next._index.txt +1 -1
- package/out/__next._tree.txt +1 -1
- package/out/_not-found/__next._full.txt +1 -1
- package/out/_not-found/__next._head.txt +1 -1
- package/out/_not-found/__next._index.txt +1 -1
- package/out/_not-found/__next._not-found/__PAGE__.txt +1 -1
- package/out/_not-found/__next._not-found.txt +1 -1
- package/out/_not-found/__next._tree.txt +1 -1
- package/out/_not-found.html +1 -1
- package/out/_not-found.txt +1 -1
- package/out/index.html +2 -2
- package/out/index.txt +1 -1
- package/package.json +1 -1
- /package/out/_next/static/{hNOHolNViTvQRpVwfaIx- → dSp6-CaehEDKVU9OSJABu}/_buildManifest.js +0 -0
- /package/out/_next/static/{hNOHolNViTvQRpVwfaIx- → dSp6-CaehEDKVU9OSJABu}/_clientMiddlewareManifest.json +0 -0
- /package/out/_next/static/{hNOHolNViTvQRpVwfaIx- → dSp6-CaehEDKVU9OSJABu}/_ssgManifest.js +0 -0
package/out/index.html
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<!DOCTYPE html><!--hNOHolNViTvQRpVwfaIx_--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/favicon-32x32.png"/><link rel="stylesheet" href="/_next/static/chunks/6167fccccde2e675.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/8a5bd6fe3abc8091.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/b3419ee3e3a616d9.js"/><script src="/_next/static/chunks/98d53aae29c36c6b.js" async=""></script><script src="/_next/static/chunks/1570e9ba5f1b44ed.js" async=""></script><script src="/_next/static/chunks/turbopack-9da9810f42c97265.js" async=""></script><script src="/_next/static/chunks/be40d79540010a0d.js" async=""></script><script src="/_next/static/chunks/b05daf00cdc6058f.js" async=""></script><script src="/_next/static/chunks/8091c1216a95d294.js" async=""></script><script src="/_next/static/chunks/7cd04052abfadac1.js" async=""></script><script src="/_next/static/chunks/05328cd26bdc795c.js" async=""></script><script src="/_next/static/chunks/1011f174944c0ca2.js" async=""></script><title>Flow2Code | Visual AST Compiler</title><meta name="description" content="Visual backend logic generator: compile canvas nodes directly into native TypeScript code"/><link rel="manifest" href="/site.webmanifest"/><link rel="icon" href="/favicon.ico" sizes="any"/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script></head><body class="antialiased overflow-hidden"><div hidden=""><!--$--><!--/$--></div><div class="flex flex-col h-screen w-screen bg-background"><header class="h-12 bg-card border-b border-border flex items-center px-4 gap-1.5 shrink-0"><div class="flex items-center gap-2 mr-3"><img src="/favicon-32x32.png" alt="Flow2Code" class="w-6 h-6"/><span class="text-sm font-bold tracking-tight text-foreground">Flow2Code</span></div><div data-orientation="vertical" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px h-5 mx-1"></div><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-primary hover:text-primary hover:bg-primary/10" data-state="closed">🚀 Compile</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" data-state="closed">✅ Validate</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" data-state="closed">📊 Analyze</button><div data-orientation="vertical" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px h-5 mx-1"></div><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10" data-state="closed">✨ AI Generate</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10" data-state="closed">📝 Code→Flow</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10" data-state="closed">🔄 Refactor</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10 px-1.5" data-state="closed">⚙️</button><div data-orientation="vertical" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px h-5 mx-1"></div><button data-slot="dropdown-menu-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" type="button" id="radix-_R_o5avb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">📁 File</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10" data-state="closed">🧪 Test</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" data-state="closed">📜 History</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-cyan-400 hover:text-cyan-300 hover:bg-cyan-500/10" data-state="closed">🔀 Diff</button><div class="flex-1"></div><span data-slot="badge" data-variant="secondary" class="inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 text-[10px] font-mono">0<!-- --> nodes</span><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-destructive hover:text-destructive hover:bg-destructive/10" data-state="closed">🗑️ Reset</button></header><div class="flex flex-1 overflow-hidden"><div class="bg-card border-r border-border flex flex-col shrink-0 transition-all duration-300 ease-in-out overflow-hidden w-56"><div class="flex flex-col items-center py-3 gap-2 transition-opacity duration-200 opacity-0 hidden"><button data-slot="tooltip-trigger" data-variant="ghost" data-size="icon" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 w-8 h-8 text-lg" data-state="closed">»</button><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px w-6"></div><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">⚡</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">🔧</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">🔀</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">📦</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">📤</span></div><div class="flex flex-col flex-1 min-w-0 transition-opacity duration-200 opacity-100"><div class="flex items-center justify-between px-3 py-2.5 border-b border-border"><span class="text-xs font-semibold text-foreground uppercase tracking-wider whitespace-nowrap">Node Library</span><button data-slot="button" data-variant="ghost" data-size="icon" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent dark:hover:bg-accent/50 size-9 w-6 h-6 text-muted-foreground hover:text-foreground">«</button></div><div class="px-2 py-1.5"><input type="text" placeholder="Search nodes..." class="w-full bg-secondary text-foreground text-[11px] rounded-md px-2 py-1 border border-border placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" value=""/></div><div dir="ltr" data-slot="scroll-area" class="relative flex-1" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" data-slot="scroll-area-viewport" class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><div class="p-2 flex flex-col gap-1"><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_mf6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>⚡</span><span class="text-emerald-400">Triggers</span></button><div data-state="open" id="radix-_R_mf6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🌐</span><span>HTTP Webhook</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">⏰</span><span>Cron Job</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">👤</span><span>Manual Trigger</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_16f6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>🔧</span><span class="text-blue-400">Actions</span></button><div data-state="open" id="radix-_R_16f6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">📡</span><span>Fetch API</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🗄️</span><span>SQL Query</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">💾</span><span>Redis Cache</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">💻</span><span>Custom Code</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔗</span><span>Call Subflow</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_1mf6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>🔀</span><span class="text-amber-400">Logic Control</span></button><div data-state="open" id="radix-_R_1mf6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔀</span><span>If / Else</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔁</span><span>For Loop</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🛡️</span><span>Try / Catch</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">⚡</span><span>Promise.all</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_26f6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>📦</span><span class="text-purple-400">Variables</span></button><div data-state="open" id="radix-_R_26f6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">📦</span><span>Declare Variable</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔄</span><span>Transform</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_2mf6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>📤</span><span class="text-rose-400">Output</span></button><div data-state="open" id="radix-_R_2mf6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">📤</span><span>Return Response</span></button></div></div></div><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-1"></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_ef6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>⭐</span><span class="text-orange-400">Custom</span></button><div data-state="open" id="radix-_R_ef6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><p class="text-[10px] text-muted-foreground px-2 py-1">No custom templates yet</p><div class="flex flex-wrap gap-1 px-1 py-1"><button class="text-[10px] text-primary hover:text-primary/80 cursor-pointer px-1" data-state="closed" data-slot="tooltip-trigger">+ Save</button><button class="text-[10px] text-muted-foreground hover:text-foreground cursor-pointer px-1" data-state="closed" data-slot="tooltip-trigger">↓ Export</button><button class="text-[10px] text-muted-foreground hover:text-foreground cursor-pointer px-1" data-state="closed" data-slot="tooltip-trigger">↑ Import</button></div><input type="file" accept=".json" class="hidden"/></div></div></div></div></div></div></div></div></div><div class="flex-1 min-w-0 relative"><div data-testid="rf__wrapper" style="background:transparent;width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow light" role="application"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane selection" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><div class="react-flow__panel react-flow__controls vertical bg-card! border-border! shadow-lg! [&>button]:bg-card! [&>button]:border-border! [&>button]:text-foreground! [&>button:hover]:bg-accent! bottom left" style="margin-left:1rem;margin-bottom:1rem" data-testid="rf__controls" aria-label="Control Panel"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="Zoom In" aria-label="Zoom In"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="Zoom Out" aria-label="Zoom Out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-fitview" title="Fit View" aria-label="Fit View"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-interactive" title="Toggle Interactivity" aria-label="Toggle Interactivity"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"></path></svg></button></div><div class="react-flow__panel react-flow__minimap bg-card! border! border-border! rounded-lg! shadow-lg! bottom right" style="margin-right:1rem;margin-bottom:1rem;--xy-minimap-mask-background-color-props:rgba(0, 0, 0, 0.6)" data-testid="rf__minimap"><svg width="200" height="150" viewBox="0 0 0 0" class="react-flow__minimap-svg" role="img" aria-labelledby="react-flow__minimap-desc-1"><title id="react-flow__minimap-desc-1">Mini Map</title><path class="react-flow__minimap-mask" d="M0,0h0v0h0z
|
|
2
|
-
M0,0h0v0h0z" fill-rule="evenodd" pointer-events="none"></path></svg></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0;--xy-background-pattern-color-props:oklch(0.3 0 0)" data-testid="rf__background"><pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(-11,-11)"><circle cx="0.5" cy="0.5" r="0.5" class="react-flow__background-pattern dots"></circle></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect></svg><div class="react-flow__panel react-flow__attribution bottom right" data-message="Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev"><a href="https://reactflow.dev" target="_blank" rel="noopener noreferrer" aria-label="React Flow attribution">React Flow</a></div><div id="react-flow__node-desc-1" style="display:none">Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.</div><div id="react-flow__edge-desc-1" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-1" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div><div class="absolute inset-0 z-20 flex items-center justify-center pointer-events-none"><div class="pointer-events-auto max-w-lg w-full mx-4"><div class="bg-[oklch(0.15_0_0)] border border-[oklch(0.25_0_0)] rounded-xl overflow-hidden"><div class="px-8 pt-8 pb-4"><div class="flex items-center gap-3 mb-1"><span class="text-2xl font-bold text-[oklch(0.95_0_0)] tracking-tight">Flow2Code</span><span class="text-[10px] font-mono bg-[oklch(0.22_0_0)] text-[oklch(0.6_0_0)] px-2 py-0.5 rounded">v0.1.4</span></div><p class="text-sm text-[oklch(0.55_0_0)] leading-relaxed mt-2">Build API handlers visually, compile to native TypeScript.<br/>Drag nodes from the left panel, connect ports, then hit Compile.</p></div><div class="px-8 pb-4"><div class="grid grid-cols-2 gap-2 text-[11px]"><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">1</span><span>Drag a Trigger node to start</span></div><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">2</span><span>Add Actions for your logic</span></div><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">3</span><span>Connect ports with edges</span></div><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">4</span><span>Click Compile to generate TS</span></div></div></div><div class="px-8 pb-5"><div class="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-[oklch(0.45_0_0)]"><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Ctrl+Z</kbd> Undo</span><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Ctrl+Shift+Z</kbd> Redo</span><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Delete</kbd> Remove selected</span><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Click edge</kbd> Select → Delete</span></div></div><div class="border-t border-[oklch(0.22_0_0)] px-8 py-4 flex items-center gap-3"><button data-slot="button" data-variant="default" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive py-2 has-[>svg]:px-3 bg-[oklch(0.65_0.2_260)] hover:bg-[oklch(0.6_0.2_260)] text-white text-sm h-9 px-4">Load example flow</button><button data-slot="button" data-variant="ghost" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent dark:hover:bg-accent/50 py-2 has-[>svg]:px-3 text-sm text-[oklch(0.55_0_0)] hover:text-[oklch(0.8_0_0)] h-9 px-4">Start from scratch</button></div></div></div></div></div></div></div><!--$--><!--/$--><script src="/_next/static/chunks/b3419ee3e3a616d9.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[46798,[\"/_next/static/chunks/be40d79540010a0d.js\"],\"TooltipProvider\"]\n3:I[94482,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"default\"]\n4:I[58298,[\"/_next/static/chunks/be40d79540010a0d.js\",\"/_next/static/chunks/7cd04052abfadac1.js\"],\"default\"]\n5:I[22544,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"default\"]\n6:I[39308,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"ClientPageRoot\"]\n7:I[52683,[\"/_next/static/chunks/be40d79540010a0d.js\",\"/_next/static/chunks/05328cd26bdc795c.js\",\"/_next/static/chunks/1011f174944c0ca2.js\"],\"default\"]\na:I[61686,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[61686,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"ViewportBoundary\"]\nf:I[61686,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"MetadataBoundary\"]\n11:I[63491,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"default\"]\n:HL[\"/_next/static/chunks/6167fccccde2e675.css\",\"style\"]\n:HL[\"/_next/static/chunks/8a5bd6fe3abc8091.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"hNOHolNViTvQRpVwfaIx-\",\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/6167fccccde2e675.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/be40d79540010a0d.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"antialiased overflow-hidden\",\"children\":[\"$\",\"$L2\",null,{\"delayDuration\":200,\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$4\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/7cd04052abfadac1.js\",\"async\":true}]],\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L6\",null,{\"Component\":\"$7\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@8\",\"$@9\"]}}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/8a5bd6fe3abc8091.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/05328cd26bdc795c.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/1011f174944c0ca2.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":true}\n"])</script><script>self.__next_f.push([1,"8:{}\n9:\"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[67671,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"IconMark\"]\nc:null\n10:[[\"$\",\"title\",\"0\",{\"children\":\"Flow2Code | Visual AST Compiler\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Visual backend logic generator: compile canvas nodes directly into native TypeScript code\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"sizes\":\"any\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"5\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"6\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"7\",{}]]\n"])</script></body></html>
|
|
1
|
+
<!DOCTYPE html><!--dSp6_CaehEDKVU9OSJABu--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/favicon-32x32.png"/><link rel="stylesheet" href="/_next/static/chunks/6167fccccde2e675.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/8a5bd6fe3abc8091.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/b3419ee3e3a616d9.js"/><script src="/_next/static/chunks/98d53aae29c36c6b.js" async=""></script><script src="/_next/static/chunks/1570e9ba5f1b44ed.js" async=""></script><script src="/_next/static/chunks/turbopack-9da9810f42c97265.js" async=""></script><script src="/_next/static/chunks/be40d79540010a0d.js" async=""></script><script src="/_next/static/chunks/b05daf00cdc6058f.js" async=""></script><script src="/_next/static/chunks/8091c1216a95d294.js" async=""></script><script src="/_next/static/chunks/7cd04052abfadac1.js" async=""></script><script src="/_next/static/chunks/05328cd26bdc795c.js" async=""></script><script src="/_next/static/chunks/1011f174944c0ca2.js" async=""></script><title>Flow2Code | Visual AST Compiler</title><meta name="description" content="Visual backend logic generator: compile canvas nodes directly into native TypeScript code"/><link rel="manifest" href="/site.webmanifest"/><link rel="icon" href="/favicon.ico" sizes="any"/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script></head><body class="antialiased overflow-hidden"><div hidden=""><!--$--><!--/$--></div><div class="flex flex-col h-screen w-screen bg-background"><header class="h-12 bg-card border-b border-border flex items-center px-4 gap-1.5 shrink-0"><div class="flex items-center gap-2 mr-3"><img src="/favicon-32x32.png" alt="Flow2Code" class="w-6 h-6"/><span class="text-sm font-bold tracking-tight text-foreground">Flow2Code</span></div><div data-orientation="vertical" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px h-5 mx-1"></div><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-primary hover:text-primary hover:bg-primary/10" data-state="closed">🚀 Compile</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" data-state="closed">✅ Validate</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" data-state="closed">📊 Analyze</button><div data-orientation="vertical" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px h-5 mx-1"></div><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10" data-state="closed">✨ AI Generate</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10" data-state="closed">📝 Code→Flow</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10" data-state="closed">🔄 Refactor</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 has-[>svg]:px-2.5 text-purple-400 hover:text-purple-300 hover:bg-purple-500/10 px-1.5" data-state="closed">⚙️</button><div data-orientation="vertical" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px h-5 mx-1"></div><button data-slot="dropdown-menu-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" type="button" id="radix-_R_o5avb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">📁 File</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10" data-state="closed">🧪 Test</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5" data-state="closed">📜 History</button><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-cyan-400 hover:text-cyan-300 hover:bg-cyan-500/10" data-state="closed">🔀 Diff</button><div class="flex-1"></div><span data-slot="badge" data-variant="secondary" class="inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 text-[10px] font-mono">0<!-- --> nodes</span><button data-slot="tooltip-trigger" data-variant="ghost" data-size="sm" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-accent/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-destructive hover:text-destructive hover:bg-destructive/10" data-state="closed">🗑️ Reset</button></header><div class="flex flex-1 overflow-hidden"><div class="bg-card border-r border-border flex flex-col shrink-0 transition-all duration-300 ease-in-out overflow-hidden w-56"><div class="flex flex-col items-center py-3 gap-2 transition-opacity duration-200 opacity-0 hidden"><button data-slot="tooltip-trigger" data-variant="ghost" data-size="icon" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 w-8 h-8 text-lg" data-state="closed">»</button><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px w-6"></div><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">⚡</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">🔧</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">🔀</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">📦</span><span class="text-sm cursor-default" data-state="closed" data-slot="tooltip-trigger">📤</span></div><div class="flex flex-col flex-1 min-w-0 transition-opacity duration-200 opacity-100"><div class="flex items-center justify-between px-3 py-2.5 border-b border-border"><span class="text-xs font-semibold text-foreground uppercase tracking-wider whitespace-nowrap">Node Library</span><button data-slot="button" data-variant="ghost" data-size="icon" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent dark:hover:bg-accent/50 size-9 w-6 h-6 text-muted-foreground hover:text-foreground">«</button></div><div class="px-2 py-1.5"><input type="text" placeholder="Search nodes..." class="w-full bg-secondary text-foreground text-[11px] rounded-md px-2 py-1 border border-border placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" value=""/></div><div dir="ltr" data-slot="scroll-area" class="relative flex-1" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" data-slot="scroll-area-viewport" class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><div class="p-2 flex flex-col gap-1"><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_mf6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>⚡</span><span class="text-emerald-400">Triggers</span></button><div data-state="open" id="radix-_R_mf6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🌐</span><span>HTTP Webhook</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">⏰</span><span>Cron Job</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">👤</span><span>Manual Trigger</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_16f6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>🔧</span><span class="text-blue-400">Actions</span></button><div data-state="open" id="radix-_R_16f6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">📡</span><span>Fetch API</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🗄️</span><span>SQL Query</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">💾</span><span>Redis Cache</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">💻</span><span>Custom Code</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔗</span><span>Call Subflow</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_1mf6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>🔀</span><span class="text-amber-400">Logic Control</span></button><div data-state="open" id="radix-_R_1mf6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔀</span><span>If / Else</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔁</span><span>For Loop</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🛡️</span><span>Try / Catch</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">⚡</span><span>Promise.all</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_26f6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>📦</span><span class="text-purple-400">Variables</span></button><div data-state="open" id="radix-_R_26f6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">📦</span><span>Declare Variable</span></button><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">🔄</span><span>Transform</span></button></div></div></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_2mf6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>📤</span><span class="text-rose-400">Output</span></button><div data-state="open" id="radix-_R_2mf6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><button class="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors cursor-pointer text-left group"><span class="text-sm group-hover:scale-110 transition-transform">📤</span><span>Return Response</span></button></div></div></div><div data-orientation="horizontal" role="none" data-slot="separator" class="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-1"></div><div data-state="open" data-slot="collapsible"><button type="button" aria-controls="radix-_R_ef6avb_" aria-expanded="true" data-state="open" data-slot="collapsible-trigger" class="flex items-center gap-1.5 px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground w-full rounded-md hover:bg-accent transition-colors cursor-pointer"><span>⭐</span><span class="text-orange-400">Custom</span></button><div data-state="open" id="radix-_R_ef6avb_" data-slot="collapsible-content"><div class="flex flex-col gap-0.5 py-0.5 pl-2"><p class="text-[10px] text-muted-foreground px-2 py-1">No custom templates yet</p><div class="flex flex-wrap gap-1 px-1 py-1"><button class="text-[10px] text-primary hover:text-primary/80 cursor-pointer px-1" data-state="closed" data-slot="tooltip-trigger">+ Save</button><button class="text-[10px] text-muted-foreground hover:text-foreground cursor-pointer px-1" data-state="closed" data-slot="tooltip-trigger">↓ Export</button><button class="text-[10px] text-muted-foreground hover:text-foreground cursor-pointer px-1" data-state="closed" data-slot="tooltip-trigger">↑ Import</button></div><input type="file" accept=".json" class="hidden"/></div></div></div></div></div></div></div></div></div><div class="flex-1 min-w-0 relative"><div data-testid="rf__wrapper" style="background:transparent;width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow light" role="application"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane selection" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><div class="react-flow__panel react-flow__controls vertical bg-card! border-border! shadow-lg! [&>button]:bg-card! [&>button]:border-border! [&>button]:text-foreground! [&>button:hover]:bg-accent! bottom left" style="margin-left:1rem;margin-bottom:1rem" data-testid="rf__controls" aria-label="Control Panel"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="Zoom In" aria-label="Zoom In"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="Zoom Out" aria-label="Zoom Out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-fitview" title="Fit View" aria-label="Fit View"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-interactive" title="Toggle Interactivity" aria-label="Toggle Interactivity"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"></path></svg></button></div><div class="react-flow__panel react-flow__minimap bg-card! border! border-border! rounded-lg! shadow-lg! bottom right" style="margin-right:1rem;margin-bottom:1rem;--xy-minimap-mask-background-color-props:rgba(0, 0, 0, 0.6)" data-testid="rf__minimap"><svg width="200" height="150" viewBox="0 0 0 0" class="react-flow__minimap-svg" role="img" aria-labelledby="react-flow__minimap-desc-1"><title id="react-flow__minimap-desc-1">Mini Map</title><path class="react-flow__minimap-mask" d="M0,0h0v0h0z
|
|
2
|
+
M0,0h0v0h0z" fill-rule="evenodd" pointer-events="none"></path></svg></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0;--xy-background-pattern-color-props:oklch(0.3 0 0)" data-testid="rf__background"><pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(-11,-11)"><circle cx="0.5" cy="0.5" r="0.5" class="react-flow__background-pattern dots"></circle></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect></svg><div class="react-flow__panel react-flow__attribution bottom right" data-message="Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev"><a href="https://reactflow.dev" target="_blank" rel="noopener noreferrer" aria-label="React Flow attribution">React Flow</a></div><div id="react-flow__node-desc-1" style="display:none">Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.</div><div id="react-flow__edge-desc-1" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-1" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div><div class="absolute inset-0 z-20 flex items-center justify-center pointer-events-none"><div class="pointer-events-auto max-w-lg w-full mx-4"><div class="bg-[oklch(0.15_0_0)] border border-[oklch(0.25_0_0)] rounded-xl overflow-hidden"><div class="px-8 pt-8 pb-4"><div class="flex items-center gap-3 mb-1"><span class="text-2xl font-bold text-[oklch(0.95_0_0)] tracking-tight">Flow2Code</span><span class="text-[10px] font-mono bg-[oklch(0.22_0_0)] text-[oklch(0.6_0_0)] px-2 py-0.5 rounded">v0.1.4</span></div><p class="text-sm text-[oklch(0.55_0_0)] leading-relaxed mt-2">Build API handlers visually, compile to native TypeScript.<br/>Drag nodes from the left panel, connect ports, then hit Compile.</p></div><div class="px-8 pb-4"><div class="grid grid-cols-2 gap-2 text-[11px]"><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">1</span><span>Drag a Trigger node to start</span></div><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">2</span><span>Add Actions for your logic</span></div><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">3</span><span>Connect ports with edges</span></div><div class="flex items-center gap-2 text-[oklch(0.6_0_0)]"><span class="w-4 h-4 rounded bg-[oklch(0.22_0_0)] text-[oklch(0.5_0_0)] flex items-center justify-center text-[10px] font-mono shrink-0">4</span><span>Click Compile to generate TS</span></div></div></div><div class="px-8 pb-5"><div class="flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-[oklch(0.45_0_0)]"><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Ctrl+Z</kbd> Undo</span><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Ctrl+Shift+Z</kbd> Redo</span><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Delete</kbd> Remove selected</span><span><kbd class="inline-block px-1 py-0.5 rounded bg-[oklch(0.2_0_0)] border border-[oklch(0.28_0_0)] text-[oklch(0.6_0_0)] font-mono text-[9px] mx-0.5">Click edge</kbd> Select → Delete</span></div></div><div class="border-t border-[oklch(0.22_0_0)] px-8 py-4 flex items-center gap-3"><button data-slot="button" data-variant="default" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive py-2 has-[>svg]:px-3 bg-[oklch(0.65_0.2_260)] hover:bg-[oklch(0.6_0.2_260)] text-white text-sm h-9 px-4">Load example flow</button><button data-slot="button" data-variant="ghost" data-size="default" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent dark:hover:bg-accent/50 py-2 has-[>svg]:px-3 text-sm text-[oklch(0.55_0_0)] hover:text-[oklch(0.8_0_0)] h-9 px-4">Start from scratch</button></div></div></div></div></div></div></div><!--$--><!--/$--><script src="/_next/static/chunks/b3419ee3e3a616d9.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[46798,[\"/_next/static/chunks/be40d79540010a0d.js\"],\"TooltipProvider\"]\n3:I[94482,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"default\"]\n4:I[58298,[\"/_next/static/chunks/be40d79540010a0d.js\",\"/_next/static/chunks/7cd04052abfadac1.js\"],\"default\"]\n5:I[22544,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"default\"]\n6:I[39308,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"ClientPageRoot\"]\n7:I[52683,[\"/_next/static/chunks/be40d79540010a0d.js\",\"/_next/static/chunks/05328cd26bdc795c.js\",\"/_next/static/chunks/1011f174944c0ca2.js\"],\"default\"]\na:I[61686,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[61686,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"ViewportBoundary\"]\nf:I[61686,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"MetadataBoundary\"]\n11:I[63491,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"default\"]\n:HL[\"/_next/static/chunks/6167fccccde2e675.css\",\"style\"]\n:HL[\"/_next/static/chunks/8a5bd6fe3abc8091.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"dSp6-CaehEDKVU9OSJABu\",\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/6167fccccde2e675.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/be40d79540010a0d.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"antialiased overflow-hidden\",\"children\":[\"$\",\"$L2\",null,{\"delayDuration\":200,\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$4\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/7cd04052abfadac1.js\",\"async\":true}]],\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L6\",null,{\"Component\":\"$7\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@8\",\"$@9\"]}}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/8a5bd6fe3abc8091.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/05328cd26bdc795c.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/1011f174944c0ca2.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":true}\n"])</script><script>self.__next_f.push([1,"8:{}\n9:\"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[67671,[\"/_next/static/chunks/b05daf00cdc6058f.js\",\"/_next/static/chunks/8091c1216a95d294.js\"],\"IconMark\"]\nc:null\n10:[[\"$\",\"title\",\"0\",{\"children\":\"Flow2Code | Visual AST Compiler\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Visual backend logic generator: compile canvas nodes directly into native TypeScript code\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"sizes\":\"any\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"5\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"6\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"7\",{}]]\n"])</script></body></html>
|
package/out/index.txt
CHANGED
|
@@ -12,7 +12,7 @@ f:I[61686,["/_next/static/chunks/b05daf00cdc6058f.js","/_next/static/chunks/8091
|
|
|
12
12
|
11:I[63491,["/_next/static/chunks/b05daf00cdc6058f.js","/_next/static/chunks/8091c1216a95d294.js"],"default"]
|
|
13
13
|
:HL["/_next/static/chunks/6167fccccde2e675.css","style"]
|
|
14
14
|
:HL["/_next/static/chunks/8a5bd6fe3abc8091.css","style"]
|
|
15
|
-
0:{"P":null,"b":"
|
|
15
|
+
0:{"P":null,"b":"dSp6-CaehEDKVU9OSJABu","c":["",""],"q":"","i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/6167fccccde2e675.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/be40d79540010a0d.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"antialiased overflow-hidden","children":["$","$L2",null,{"delayDuration":200,"children":["$","$L3",null,{"parallelRouterKey":"children","error":"$4","errorStyles":[],"errorScripts":[["$","script","script-0",{"src":"/_next/static/chunks/7cd04052abfadac1.js","async":true}]],"template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]}]]}],{"children":[["$","$1","c",{"children":[["$","$L6",null,{"Component":"$7","serverProvidedParams":{"searchParams":{},"params":{},"promises":["$@8","$@9"]}}],[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/8a5bd6fe3abc8091.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/05328cd26bdc795c.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/1011f174944c0ca2.js","async":true,"nonce":"$undefined"}]],["$","$La",null,{"children":["$","$b",null,{"name":"Next.MetadataOutlet","children":"$@c"}]}]]}],{},null,false,false]},null,false,false],["$","$1","h",{"children":[null,["$","$Ld",null,{"children":"$Le"}],["$","div",null,{"hidden":true,"children":["$","$Lf",null,{"children":["$","$b",null,{"name":"Next.Metadata","children":"$L10"}]}]}],null]}],false]],"m":"$undefined","G":["$11",[]],"S":true}
|
|
16
16
|
8:{}
|
|
17
17
|
9:"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params"
|
|
18
18
|
e:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|