From fa545c2e6c8127ba21cd175d35881b232731fac5 Mon Sep 17 00:00:00 2001
From: Steven <sarmiento.steven@gmail.com>
Date: Thu, 18 Dec 2025 00:39:25 -0800
Subject: [PATCH 1/4] chore: chore: working react nodes builder poc

---
 examples/next-js/app/builder/page.tsx         |  96 +++++
 .../components/builder/builder-canvas.tsx     | 152 ++++++++
 .../components/builder/builder-toolbar.tsx    | 334 ++++++++++++++++++
 .../components/builder/feedback-panel.tsx     | 123 +++++++
 examples/next-js/components/builder/index.ts  |  12 +
 .../components/builder/node-inspector.tsx     | 292 +++++++++++++++
 .../components/builder/node-palette.tsx       | 140 ++++++++
 .../components/builder/nodes/base-node.tsx    | 210 +++++++++++
 .../next-js/components/builder/nodes/index.ts |  25 ++
 .../next-js/components/navigation/app-nav.tsx |   1 +
 examples/next-js/lib/builder/compiler.ts      | 250 +++++++++++++
 examples/next-js/lib/builder/index.ts         |  36 ++
 .../next-js/lib/builder/node-definitions.ts   | 265 ++++++++++++++
 examples/next-js/lib/builder/store.ts         | 252 +++++++++++++
 examples/next-js/lib/builder/types.ts         | 247 +++++++++++++
 .../lib/builder/use-builder-feedback.ts       | 149 ++++++++
 examples/next-js/package.json                 |  15 +-
 pnpm-lock.yaml                                | 211 +++++++++++
 18 files changed, 2804 insertions(+), 6 deletions(-)
 create mode 100644 examples/next-js/app/builder/page.tsx
 create mode 100644 examples/next-js/components/builder/builder-canvas.tsx
 create mode 100644 examples/next-js/components/builder/builder-toolbar.tsx
 create mode 100644 examples/next-js/components/builder/feedback-panel.tsx
 create mode 100644 examples/next-js/components/builder/index.ts
 create mode 100644 examples/next-js/components/builder/node-inspector.tsx
 create mode 100644 examples/next-js/components/builder/node-palette.tsx
 create mode 100644 examples/next-js/components/builder/nodes/base-node.tsx
 create mode 100644 examples/next-js/components/builder/nodes/index.ts
 create mode 100644 examples/next-js/lib/builder/compiler.ts
 create mode 100644 examples/next-js/lib/builder/index.ts
 create mode 100644 examples/next-js/lib/builder/node-definitions.ts
 create mode 100644 examples/next-js/lib/builder/store.ts
 create mode 100644 examples/next-js/lib/builder/types.ts
 create mode 100644 examples/next-js/lib/builder/use-builder-feedback.ts

diff --git a/examples/next-js/app/builder/page.tsx b/examples/next-js/app/builder/page.tsx
new file mode 100644
index 0000000..943fb5c
--- /dev/null
+++ b/examples/next-js/app/builder/page.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { useMemo } from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { useGillTransactionSigner, useConnectorClient } from '@solana/connector';
+import { createSolanaRpc, createSolanaRpcSubscriptions, address } from '@solana/kit';
+
+import {
+    BuilderCanvas,
+    BuilderToolbar,
+    NodePalette,
+    NodeInspector,
+    FeedbackPanel,
+} from '@/components/builder';
+import { useBuilderFeedback } from '@/lib/builder';
+import type { CompileContext } from '@/lib/builder/types';
+import { ConnectButton } from '@/components/connector';
+
+// =============================================================================
+// Builder Page Content
+// =============================================================================
+
+function BuilderContent() {
+    const { signer, ready } = useGillTransactionSigner();
+    const client = useConnectorClient();
+
+    // Create compile context from wallet connection
+    const compileContext = useMemo<CompileContext | null>(() => {
+        if (!ready || !signer || !client) return null;
+
+        const rpcUrl = client.getRpcUrl();
+        if (!rpcUrl) return null;
+
+        const rpc = createSolanaRpc(rpcUrl);
+        const rpcSubscriptions = createSolanaRpcSubscriptions(
+            rpcUrl.replace('https', 'wss').replace('http', 'ws')
+        );
+
+        return {
+            signer,
+            rpc,
+            rpcSubscriptions,
+            walletAddress: address(signer.address),
+        };
+    }, [ready, signer, client]);
+
+    // Get feedback for the current graph
+    const feedback = useBuilderFeedback(compileContext);
+
+    return (
+        <div className="h-screen flex flex-col bg-white">
+            {/* Toolbar */}
+            <BuilderToolbar compileContext={compileContext} />
+
+            {/* Main content */}
+            <div className="flex-1 flex overflow-hidden">
+                {/* Node palette */}
+                <NodePalette />
+
+                {/* Canvas */}
+                <div className="flex-1 flex flex-col">
+                    {/* Connection status banner */}
+                    {!ready && (
+                        <div className="bg-yellow-50 border-b border-yellow-200 px-4 py-2 flex items-center justify-between">
+                            <span className="text-sm text-yellow-800">
+                                Connect your wallet to simulate and execute transactions
+                            </span>
+                            <ConnectButton />
+                        </div>
+                    )}
+
+                    {/* React Flow canvas */}
+                    <BuilderCanvas />
+
+                    {/* Feedback panel */}
+                    <FeedbackPanel feedback={feedback} />
+                </div>
+
+                {/* Inspector panel */}
+                <NodeInspector />
+            </div>
+        </div>
+    );
+}
+
+// =============================================================================
+// Builder Page
+// =============================================================================
+
+export default function BuilderPage() {
+    return (
+        <ReactFlowProvider>
+            <BuilderContent />
+        </ReactFlowProvider>
+    );
+}
diff --git a/examples/next-js/components/builder/builder-canvas.tsx b/examples/next-js/components/builder/builder-canvas.tsx
new file mode 100644
index 0000000..9f12341
--- /dev/null
+++ b/examples/next-js/components/builder/builder-canvas.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { useCallback, useRef } from 'react';
+import {
+    ReactFlow,
+    Background,
+    Controls,
+    MiniMap,
+    addEdge,
+    type Connection,
+    type ReactFlowInstance,
+    BackgroundVariant,
+    ConnectionLineType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { useBuilderStore } from '@/lib/builder/store';
+import { nodeTypes } from './nodes';
+import type { NodeType } from '@/lib/builder/types';
+
+// =============================================================================
+// Builder Canvas Component
+// =============================================================================
+
+export function BuilderCanvas() {
+    const reactFlowWrapper = useRef<HTMLDivElement>(null);
+    const reactFlowInstance = useRef<ReactFlowInstance<any, any> | null>(null);
+
+    // Store state and actions
+    const nodes = useBuilderStore(state => state.nodes);
+    const edges = useBuilderStore(state => state.edges);
+    const addNode = useBuilderStore(state => state.addNode);
+    const setEdges = useBuilderStore(state => state.setEdges);
+    const onNodesChange = useBuilderStore(state => state.onNodesChange);
+    const onEdgesChange = useBuilderStore(state => state.onEdgesChange);
+    const selectNode = useBuilderStore(state => state.selectNode);
+
+    // Handle new connections
+    const onConnect = useCallback(
+        (connection: Connection) => {
+            setEdges(addEdge(connection, edges));
+        },
+        [edges, setEdges]
+    );
+
+    // Handle node selection
+    const onNodeClick = useCallback(
+        (_: React.MouseEvent, node: any) => {
+            selectNode(node.id);
+        },
+        [selectNode]
+    );
+
+    // Handle canvas click (deselect)
+    const onPaneClick = useCallback(() => {
+        selectNode(null);
+    }, [selectNode]);
+
+    // Handle drag over (for palette drag-drop)
+    const onDragOver = useCallback((event: React.DragEvent) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+    }, []);
+
+    // Handle drop from palette
+    const onDrop = useCallback(
+        (event: React.DragEvent) => {
+            event.preventDefault();
+
+            const type = event.dataTransfer.getData('application/reactflow') as NodeType;
+            if (!type) return;
+
+            // Get position relative to the canvas
+            const reactFlowBounds = reactFlowWrapper.current?.getBoundingClientRect();
+            if (!reactFlowBounds || !reactFlowInstance.current) return;
+
+            const position = reactFlowInstance.current.screenToFlowPosition({
+                x: event.clientX - reactFlowBounds.left,
+                y: event.clientY - reactFlowBounds.top,
+            });
+
+            addNode(type, position);
+        },
+        [addNode]
+    );
+
+    // Store React Flow instance
+    const onInit = useCallback((instance: ReactFlowInstance<any, any>) => {
+        reactFlowInstance.current = instance;
+    }, []);
+
+    return (
+        <div ref={reactFlowWrapper} className="flex-1 h-full">
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                onNodeClick={onNodeClick}
+                onPaneClick={onPaneClick}
+                onDragOver={onDragOver}
+                onDrop={onDrop}
+                onInit={onInit}
+                nodeTypes={nodeTypes}
+                fitView
+                snapToGrid
+                snapGrid={[15, 15]}
+                defaultEdgeOptions={{
+                    type: 'smoothstep',
+                    animated: true,
+                }}
+                connectionLineStyle={{ stroke: '#94a3b8', strokeWidth: 2 }}
+                connectionLineType={ConnectionLineType.SmoothStep}
+            >
+                <Background
+                    variant={BackgroundVariant.Dots}
+                    gap={20}
+                    size={1}
+                    color="#e2e8f0"
+                />
+                <Controls
+                    showZoom
+                    showFitView
+                    showInteractive={false}
+                    position="bottom-left"
+                />
+                <MiniMap
+                    position="bottom-right"
+                    nodeColor={(node) => {
+                        switch (node.type) {
+                            case 'wallet':
+                                return '#9333ea';
+                            case 'transfer-sol':
+                            case 'transfer-token':
+                                return '#2563eb';
+                            case 'create-ata':
+                                return '#16a34a';
+                            case 'memo':
+                                return '#ea580c';
+                            default:
+                                return '#64748b';
+                        }
+                    }}
+                    maskColor="rgba(0, 0, 0, 0.1)"
+                    pannable
+                    zoomable
+                />
+            </ReactFlow>
+        </div>
+    );
+}
diff --git a/examples/next-js/components/builder/builder-toolbar.tsx b/examples/next-js/components/builder/builder-toolbar.tsx
new file mode 100644
index 0000000..0d4a9e1
--- /dev/null
+++ b/examples/next-js/components/builder/builder-toolbar.tsx
@@ -0,0 +1,334 @@
+'use client';
+
+import { useCallback, useState, useMemo } from 'react';
+import { useCluster } from '@solana/connector';
+import { useBuilderStore, useExecutionState } from '@/lib/builder/store';
+import { compileGraph } from '@/lib/builder/compiler';
+import { TransactionBuilder } from '@pipeit/core';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import {
+    Play,
+    FlaskConical,
+    Trash2,
+    CheckCircle,
+    XCircle,
+    Loader2,
+    AlertCircle,
+} from 'lucide-react';
+import type { CompileContext } from '@/lib/builder/types';
+
+// =============================================================================
+// Props
+// =============================================================================
+
+interface BuilderToolbarProps {
+    compileContext: CompileContext | null;
+    onSimulate?: () => void;
+}
+
+// =============================================================================
+// Toolbar Component
+// =============================================================================
+
+export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarProps) {
+    const nodes = useBuilderStore(state => state.nodes);
+    const edges = useBuilderStore(state => state.edges);
+    const config = useBuilderStore(state => state.config);
+    const executionState = useExecutionState();
+    const setExecutionState = useBuilderStore(state => state.setExecutionState);
+    const reset = useBuilderStore(state => state.reset);
+    const { cluster } = useCluster();
+
+    const [isSimulating, setIsSimulating] = useState(false);
+    const [simulationResult, setSimulationResult] = useState<{
+        success: boolean;
+        computeUnits?: number;
+        error?: string;
+    } | null>(null);
+
+    const canExecute = nodes.length > 0 && compileContext !== null;
+    const isExecuting = executionState.status !== 'idle' &&
+        executionState.status !== 'success' &&
+        executionState.status !== 'error';
+
+    // Build explorer URL based on cluster
+    const getExplorerUrl = useMemo(() => {
+        return (signature: string) => {
+            const clusterId = cluster?.id || 'solana:mainnet';
+            // Solscan uses different URL patterns
+            if (clusterId === 'solana:mainnet' || clusterId.includes('mainnet')) {
+                return `https://solscan.io/tx/${signature}`;
+            } else if (clusterId === 'solana:devnet' || clusterId.includes('devnet')) {
+                return `https://solscan.io/tx/${signature}?cluster=devnet`;
+            } else if (clusterId === 'solana:testnet' || clusterId.includes('testnet')) {
+                return `https://solscan.io/tx/${signature}?cluster=testnet`;
+            }
+            // Fallback to Solana Explorer for other clusters
+            return `https://explorer.solana.com/tx/${signature}?cluster=${clusterId.replace('solana:', '')}`;
+        };
+    }, [cluster]);
+
+    // Handle simulation
+    const handleSimulate = useCallback(async () => {
+        if (!compileContext) {
+            console.log('[Builder] No compile context - wallet not connected');
+            return;
+        }
+
+        console.log('[Builder] Starting simulation with', nodes.length, 'nodes');
+        setIsSimulating(true);
+        setSimulationResult(null);
+
+        try {
+            const compiled = await compileGraph(nodes, edges, compileContext);
+            console.log('[Builder] Compiled', compiled.instructions.length, 'instructions');
+
+            if (compiled.instructions.length === 0) {
+                setSimulationResult({
+                    success: false,
+                    error: 'No instructions to simulate. Fill in the node configuration fields.',
+                });
+                setIsSimulating(false);
+                return;
+            }
+
+            const builder = new TransactionBuilder({
+                rpc: compileContext.rpc,
+                priorityFee: config.priorityFee,
+                computeUnits: config.computeUnits === 'auto' ? undefined : config.computeUnits,
+            })
+                .setFeePayerSigner(compileContext.signer)
+                .addInstructions(compiled.instructions);
+
+            console.log('[Builder] Running simulation (will prompt wallet for signature)...');
+            const result = await builder.simulate();
+            console.log('[Builder] Simulation result:', result);
+
+            setSimulationResult({
+                success: result.err === null,
+                computeUnits: result.unitsConsumed ? Number(result.unitsConsumed) : undefined,
+                error: result.err ? JSON.stringify(result.err) : undefined,
+            });
+        } catch (error) {
+            console.error('[Builder] Simulation error:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            
+            // Provide more helpful error messages
+            let displayError = errorMessage;
+            if (errorMessage.includes('Failed to sign')) {
+                displayError = 'Simulation requires wallet approval. Please approve in your wallet, or click Execute to run directly.';
+            } else if (errorMessage.includes('User rejected')) {
+                displayError = 'Wallet signature rejected. Simulation cancelled.';
+            }
+            
+            setSimulationResult({
+                success: false,
+                error: displayError,
+            });
+        } finally {
+            setIsSimulating(false);
+        }
+    }, [nodes, edges, compileContext, config]);
+
+    // Handle execution
+    const handleExecute = useCallback(async () => {
+        if (!compileContext) {
+            console.log('[Builder] No compile context - wallet not connected');
+            return;
+        }
+
+        console.log('[Builder] Starting execution with', nodes.length, 'nodes');
+        setExecutionState({ status: 'compiling' });
+        setSimulationResult(null);
+
+        try {
+            const compiled = await compileGraph(nodes, edges, compileContext);
+            console.log('[Builder] Compiled', compiled.instructions.length, 'instructions');
+
+            if (compiled.instructions.length === 0) {
+                setExecutionState({
+                    status: 'error',
+                    error: new Error('No instructions to execute. Fill in the node configuration fields.'),
+                });
+                return;
+            }
+
+            setExecutionState({ status: 'signing' });
+            console.log('[Builder] Building and signing transaction...');
+
+            const signature = await new TransactionBuilder({
+                rpc: compileContext.rpc,
+                priorityFee: config.priorityFee,
+                computeUnits: config.computeUnits === 'auto' ? 200_000 : config.computeUnits,
+                autoRetry: { maxAttempts: 3, backoff: 'exponential' },
+                logLevel: 'verbose',
+            })
+                .setFeePayerSigner(compileContext.signer)
+                .addInstructions(compiled.instructions)
+                .execute({
+                    rpcSubscriptions: compileContext.rpcSubscriptions,
+                    commitment: 'confirmed',
+                    skipPreflight: false,
+                });
+
+            console.log('[Builder] Transaction successful:', signature);
+            setExecutionState({ status: 'success', signature });
+        } catch (error) {
+            console.error('[Builder] Execution error:', error);
+            
+            // Provide more helpful error messages
+            let displayError = error instanceof Error ? error : new Error('Unknown error');
+            const errorMsg = displayError.message;
+            
+            if (errorMsg.includes('block') && errorMsg.includes('progressed')) {
+                displayError = new Error('Transaction expired. Please try again - the network was slow to confirm.');
+            } else if (errorMsg.includes('User rejected')) {
+                displayError = new Error('Transaction rejected by wallet.');
+            } else if (errorMsg.includes('insufficient funds') || errorMsg.includes('Insufficient')) {
+                displayError = new Error('Insufficient funds in wallet for this transaction.');
+            }
+            
+            setExecutionState({
+                status: 'error',
+                error: displayError,
+            });
+        }
+    }, [nodes, edges, compileContext, config, setExecutionState]);
+
+    // Handle clear
+    const handleClear = useCallback(() => {
+        reset();
+        setSimulationResult(null);
+    }, [reset]);
+
+    return (
+        <div className="h-14 px-4 border-b border-gray-200 bg-white flex items-center justify-between">
+            {/* Left side - title */}
+            <div className="flex items-center gap-4">
+                <h1 className="text-lg font-semibold text-gray-900">
+                    Transaction Builder
+                </h1>
+                <span className="text-sm text-gray-500">
+                    {nodes.length} node{nodes.length !== 1 ? 's' : ''}
+                </span>
+                {cluster && (
+                    <span className={cn(
+                        'px-2 py-0.5 rounded text-xs font-medium',
+                        cluster.id?.includes('mainnet') 
+                            ? 'bg-green-100 text-green-700'
+                            : cluster.id?.includes('devnet')
+                                ? 'bg-purple-100 text-purple-700'
+                                : 'bg-gray-100 text-gray-700'
+                    )}>
+                        {cluster.label || cluster.id?.replace('solana:', '')}
+                    </span>
+                )}
+            </div>
+
+            {/* Right side - actions */}
+            <div className="flex items-center gap-3">
+                {/* Simulation result indicator */}
+                {simulationResult && (
+                    <div 
+                        className={cn(
+                            'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium max-w-sm',
+                            simulationResult.success
+                                ? 'bg-green-100 text-green-700'
+                                : 'bg-amber-100 text-amber-700'
+                        )}
+                        title={simulationResult.error}
+                    >
+                        {simulationResult.success ? (
+                            <>
+                                <CheckCircle className="w-3.5 h-3.5 flex-shrink-0" />
+                                <span>
+                                    {simulationResult.computeUnits
+                                        ? `${simulationResult.computeUnits.toLocaleString()} CU`
+                                        : 'Valid'}
+                                </span>
+                            </>
+                        ) : (
+                            <>
+                                <AlertCircle className="w-3.5 h-3.5 flex-shrink-0" />
+                                <span className="truncate">{simulationResult.error?.slice(0, 50)}{(simulationResult.error?.length ?? 0) > 50 ? '...' : ''}</span>
+                            </>
+                        )}
+                    </div>
+                )}
+
+                {/* Execution state indicator */}
+                {executionState.status === 'success' && (
+                    <a
+                        href={getExplorerUrl(executionState.signature)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 hover:bg-green-200 transition-colors"
+                    >
+                        <CheckCircle className="w-3.5 h-3.5" />
+                        <span>{executionState.signature.slice(0, 8)}...</span>
+                    </a>
+                )}
+
+                {executionState.status === 'error' && (
+                    <div 
+                        className="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-red-100 text-red-700 max-w-xs cursor-help"
+                        title={executionState.error.message}
+                    >
+                        <XCircle className="w-3.5 h-3.5 flex-shrink-0" />
+                        <span className="truncate">{executionState.error.message.slice(0, 40)}{executionState.error.message.length > 40 ? '...' : ''}</span>
+                    </div>
+                )}
+
+                {/* Clear button */}
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleClear}
+                    disabled={nodes.length === 0}
+                >
+                    <Trash2 className="w-4 h-4 mr-1.5" />
+                    Clear
+                </Button>
+
+                {/* Simulate button */}
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSimulate}
+                    disabled={!canExecute || isSimulating || isExecuting}
+                >
+                    {isSimulating ? (
+                        <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                    ) : (
+                        <FlaskConical className="w-4 h-4 mr-1.5" />
+                    )}
+                    Simulate
+                </Button>
+
+                {/* Execute button */}
+                <Button
+                    size="sm"
+                    onClick={handleExecute}
+                    disabled={!canExecute || isExecuting}
+                    className="bg-blue-600 hover:bg-blue-700"
+                >
+                    {isExecuting ? (
+                        <>
+                            <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
+                            {executionState.status === 'compiling' && 'Compiling...'}
+                            {executionState.status === 'signing' && 'Signing...'}
+                            {executionState.status === 'sending' && 'Sending...'}
+                            {executionState.status === 'confirming' && 'Confirming...'}
+                        </>
+                    ) : (
+                        <>
+                            <Play className="w-4 h-4 mr-1.5" />
+                            Execute
+                        </>
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/examples/next-js/components/builder/feedback-panel.tsx b/examples/next-js/components/builder/feedback-panel.tsx
new file mode 100644
index 0000000..b5de03c
--- /dev/null
+++ b/examples/next-js/components/builder/feedback-panel.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { BuilderFeedback } from '@/lib/builder/types';
+import { AlertCircle, CheckCircle, Loader2 } from 'lucide-react';
+
+// =============================================================================
+// Props
+// =============================================================================
+
+interface FeedbackPanelProps {
+    feedback: BuilderFeedback;
+}
+
+// =============================================================================
+// Size Meter Component
+// =============================================================================
+
+interface SizeMeterProps {
+    size: number;
+    limit: number;
+    percentUsed: number;
+}
+
+function SizeMeter({ size, limit, percentUsed }: SizeMeterProps) {
+    const isWarning = percentUsed > 80;
+    const isDanger = percentUsed > 95;
+
+    return (
+        <div className="flex items-center gap-3">
+            <span className="text-xs text-gray-500 w-8">Size</span>
+            <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                    className={cn(
+                        'h-full transition-all duration-300',
+                        isDanger
+                            ? 'bg-red-500'
+                            : isWarning
+                                ? 'bg-yellow-500'
+                                : 'bg-green-500'
+                    )}
+                    style={{ width: `${Math.min(percentUsed, 100)}%` }}
+                />
+            </div>
+            <span className={cn(
+                'text-xs font-mono w-24 text-right',
+                isDanger
+                    ? 'text-red-600'
+                    : isWarning
+                        ? 'text-yellow-600'
+                        : 'text-gray-600'
+            )}>
+                {size} / {limit}
+            </span>
+        </div>
+    );
+}
+
+// =============================================================================
+// Feedback Panel Component
+// =============================================================================
+
+export function FeedbackPanel({ feedback }: FeedbackPanelProps) {
+    const { isCompiling, sizeInfo, error } = feedback;
+
+    return (
+        <div className="h-10 px-4 border-t border-gray-200 bg-gray-50 flex items-center gap-6">
+            {/* Loading state */}
+            {isCompiling && (
+                <div className="flex items-center gap-2 text-gray-500">
+                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    <span className="text-xs">Analyzing transaction...</span>
+                </div>
+            )}
+
+            {/* Size info */}
+            {!isCompiling && sizeInfo && (
+                <div className="flex-1 max-w-md">
+                    <SizeMeter
+                        size={sizeInfo.size}
+                        limit={sizeInfo.limit}
+                        percentUsed={sizeInfo.percentUsed}
+                    />
+                </div>
+            )}
+
+            {/* Status indicator */}
+            {!isCompiling && sizeInfo && (
+                <div className={cn(
+                    'flex items-center gap-1.5 text-xs',
+                    sizeInfo.canFitMore ? 'text-green-600' : 'text-red-600'
+                )}>
+                    {sizeInfo.canFitMore ? (
+                        <>
+                            <CheckCircle className="w-3.5 h-3.5" />
+                            <span>Ready to simulate</span>
+                        </>
+                    ) : (
+                        <>
+                            <AlertCircle className="w-3.5 h-3.5" />
+                            <span>Transaction too large</span>
+                        </>
+                    )}
+                </div>
+            )}
+
+            {/* Error/info state */}
+            {!isCompiling && error && (
+                <div className="flex items-center gap-2 text-amber-600">
+                    <AlertCircle className="w-3.5 h-3.5 flex-shrink-0" />
+                    <span className="text-xs truncate max-w-lg">{error}</span>
+                </div>
+            )}
+
+            {/* Empty state */}
+            {!isCompiling && !sizeInfo && !error && (
+                <span className="text-xs text-gray-400">
+                    Add nodes and configure them to see transaction details
+                </span>
+            )}
+        </div>
+    );
+}
diff --git a/examples/next-js/components/builder/index.ts b/examples/next-js/components/builder/index.ts
new file mode 100644
index 0000000..eeb017c
--- /dev/null
+++ b/examples/next-js/components/builder/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Visual Transaction Builder components.
+ *
+ * @packageDocumentation
+ */
+
+export { BuilderCanvas } from './builder-canvas';
+export { BuilderToolbar } from './builder-toolbar';
+export { NodePalette } from './node-palette';
+export { NodeInspector } from './node-inspector';
+export { FeedbackPanel } from './feedback-panel';
+export { nodeTypes } from './nodes';
diff --git a/examples/next-js/components/builder/node-inspector.tsx b/examples/next-js/components/builder/node-inspector.tsx
new file mode 100644
index 0000000..cd5c488
--- /dev/null
+++ b/examples/next-js/components/builder/node-inspector.tsx
@@ -0,0 +1,292 @@
+'use client';
+
+import { useCallback } from 'react';
+import { cn } from '@/lib/utils';
+import { useBuilderStore } from '@/lib/builder/store';
+import { getNodeDefinition } from '@/lib/builder/node-definitions';
+import type { NodeType, BuilderNodeData } from '@/lib/builder/types';
+import { Trash2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+// =============================================================================
+// Form Field Components
+// =============================================================================
+
+interface TextFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type?: 'text' | 'number';
+}
+
+function TextField({ label, value, onChange, placeholder, type = 'text' }: TextFieldProps) {
+    return (
+        <div className="space-y-1.5">
+            <label className="text-xs font-medium text-gray-700">{label}</label>
+            <input
+                type={type}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
+                className={cn(
+                    'w-full px-3 py-2 text-sm rounded-md border border-gray-300',
+                    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+                    'placeholder:text-gray-400'
+                )}
+            />
+        </div>
+    );
+}
+
+interface TextAreaFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+}
+
+function TextAreaField({ label, value, onChange, placeholder, rows = 3 }: TextAreaFieldProps) {
+    return (
+        <div className="space-y-1.5">
+            <label className="text-xs font-medium text-gray-700">{label}</label>
+            <textarea
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={placeholder}
+                rows={rows}
+                className={cn(
+                    'w-full px-3 py-2 text-sm rounded-md border border-gray-300',
+                    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+                    'placeholder:text-gray-400 resize-none'
+                )}
+            />
+        </div>
+    );
+}
+
+// =============================================================================
+// Node-Specific Forms
+// =============================================================================
+
+interface FormProps {
+    data: BuilderNodeData;
+    onUpdate: (data: Partial<BuilderNodeData>) => void;
+}
+
+function WalletForm({ data }: FormProps) {
+    // Wallet node has no configurable fields
+    return (
+        <div className="text-sm text-gray-500">
+            This node represents your connected wallet. No configuration needed.
+        </div>
+    );
+}
+
+function TransferSolForm({ data, onUpdate }: FormProps) {
+    const solData = data as { amount?: string; destination?: string };
+
+    return (
+        <div className="space-y-4">
+            <TextField
+                label="Amount (SOL)"
+                value={solData.amount ?? ''}
+                onChange={(value) => onUpdate({ amount: value })}
+                placeholder="0.1"
+                type="number"
+            />
+            <TextField
+                label="Destination Address"
+                value={solData.destination ?? ''}
+                onChange={(value) => onUpdate({ destination: value })}
+                placeholder="Enter Solana address..."
+            />
+        </div>
+    );
+}
+
+function TransferTokenForm({ data, onUpdate }: FormProps) {
+    const tokenData = data as {
+        mint?: string;
+        amount?: string;
+        destination?: string;
+        decimals?: number;
+    };
+
+    return (
+        <div className="space-y-4">
+            <TextField
+                label="Token Mint Address"
+                value={tokenData.mint ?? ''}
+                onChange={(value) => onUpdate({ mint: value })}
+                placeholder="Enter token mint..."
+            />
+            <TextField
+                label="Amount"
+                value={tokenData.amount ?? ''}
+                onChange={(value) => onUpdate({ amount: value })}
+                placeholder="100"
+                type="number"
+            />
+            <TextField
+                label="Decimals"
+                value={String(tokenData.decimals ?? 9)}
+                onChange={(value) => onUpdate({ decimals: parseInt(value) || 9 })}
+                placeholder="9"
+                type="number"
+            />
+            <TextField
+                label="Destination Address"
+                value={tokenData.destination ?? ''}
+                onChange={(value) => onUpdate({ destination: value })}
+                placeholder="Enter recipient address..."
+            />
+        </div>
+    );
+}
+
+function CreateAtaForm({ data, onUpdate }: FormProps) {
+    const ataData = data as { mint?: string; owner?: string };
+
+    return (
+        <div className="space-y-4">
+            <TextField
+                label="Token Mint Address"
+                value={ataData.mint ?? ''}
+                onChange={(value) => onUpdate({ mint: value })}
+                placeholder="Enter token mint..."
+            />
+            <TextField
+                label="Owner Address (optional)"
+                value={ataData.owner ?? ''}
+                onChange={(value) => onUpdate({ owner: value })}
+                placeholder="Defaults to your wallet..."
+            />
+        </div>
+    );
+}
+
+function MemoForm({ data, onUpdate }: FormProps) {
+    const memoData = data as { message?: string };
+
+    return (
+        <div className="space-y-4">
+            <TextAreaField
+                label="Memo Message"
+                value={memoData.message ?? ''}
+                onChange={(value) => onUpdate({ message: value })}
+                placeholder="Enter memo text..."
+                rows={4}
+            />
+            <p className="text-xs text-gray-500">
+                This message will be stored on-chain with your transaction.
+            </p>
+        </div>
+    );
+}
+
+// =============================================================================
+// Form Registry
+// =============================================================================
+
+const formComponents: Record<NodeType, React.ComponentType<FormProps>> = {
+    'wallet': WalletForm,
+    'transfer-sol': TransferSolForm,
+    'transfer-token': TransferTokenForm,
+    'create-ata': CreateAtaForm,
+    'memo': MemoForm,
+};
+
+// =============================================================================
+// Node Inspector Component
+// =============================================================================
+
+export function NodeInspector() {
+    // Use separate selectors for reactivity
+    const nodes = useBuilderStore(state => state.nodes);
+    const selectedNodeId = useBuilderStore(state => state.selectedNodeId);
+    const selectNode = useBuilderStore(state => state.selectNode);
+    const updateNodeData = useBuilderStore(state => state.updateNodeData);
+    const removeNode = useBuilderStore(state => state.removeNode);
+    
+    // Find selected node from nodes array
+    const selectedNode = selectedNodeId ? nodes.find(n => n.id === selectedNodeId) ?? null : null;
+
+    const handleUpdate = useCallback((data: Partial<BuilderNodeData>) => {
+        if (selectedNode) {
+            updateNodeData(selectedNode.id, data);
+        }
+    }, [selectedNode, updateNodeData]);
+
+    const handleDelete = useCallback(() => {
+        if (selectedNode) {
+            removeNode(selectedNode.id);
+        }
+    }, [selectedNode, removeNode]);
+
+    const handleClose = useCallback(() => {
+        selectNode(null);
+    }, [selectNode]);
+
+    // Empty state
+    if (!selectedNode) {
+        return (
+            <div className="w-72 h-full bg-gray-50 border-l border-gray-200 flex flex-col">
+                <div className="px-4 py-3 border-b border-gray-200">
+                    <h2 className="text-sm font-semibold text-gray-900">Inspector</h2>
+                </div>
+                <div className="flex-1 flex items-center justify-center p-4">
+                    <p className="text-sm text-gray-500 text-center">
+                        Select a node to view and edit its properties
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    const nodeType = selectedNode.type as NodeType;
+    const def = getNodeDefinition(nodeType);
+    const FormComponent = formComponents[nodeType];
+
+    return (
+        <div className="w-72 h-full bg-gray-50 border-l border-gray-200 flex flex-col">
+            {/* Header */}
+            <div className="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+                <div>
+                    <h2 className="text-sm font-semibold text-gray-900">{def.label}</h2>
+                    <p className="text-xs text-gray-500">{def.description}</p>
+                </div>
+                <button
+                    onClick={handleClose}
+                    className="p-1 rounded hover:bg-gray-200 transition-colors"
+                >
+                    <X className="w-4 h-4 text-gray-500" />
+                </button>
+            </div>
+
+            {/* Form */}
+            <div className="flex-1 overflow-y-auto p-4">
+                {FormComponent && (
+                    <FormComponent
+                        data={selectedNode.data}
+                        onUpdate={handleUpdate}
+                    />
+                )}
+            </div>
+
+            {/* Actions */}
+            <div className="px-4 py-3 border-t border-gray-200">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full text-red-600 hover:text-red-700 hover:bg-red-50"
+                    onClick={handleDelete}
+                >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    Delete Node
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/examples/next-js/components/builder/node-palette.tsx b/examples/next-js/components/builder/node-palette.tsx
new file mode 100644
index 0000000..4afa57a
--- /dev/null
+++ b/examples/next-js/components/builder/node-palette.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import { useCallback } from 'react';
+import { cn } from '@/lib/utils';
+import { getAllNodeDefinitions } from '@/lib/builder/node-definitions';
+import type { NodeCategory, NodeType } from '@/lib/builder/types';
+import {
+    Wallet,
+    Send,
+    Coins,
+    PlusCircle,
+    MessageSquare,
+    GripVertical,
+} from 'lucide-react';
+
+// =============================================================================
+// Icon Mapping
+// =============================================================================
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+    'wallet': Wallet,
+    'send': Send,
+    'coins': Coins,
+    'plus-circle': PlusCircle,
+    'message-square': MessageSquare,
+};
+
+// =============================================================================
+// Category Labels
+// =============================================================================
+
+const categoryLabels: Record<NodeCategory, string> = {
+    source: 'Sources',
+    transfer: 'Transfers',
+    token: 'Token Operations',
+    utility: 'Utilities',
+};
+
+const categoryOrder: NodeCategory[] = ['source', 'transfer', 'token', 'utility'];
+
+// =============================================================================
+// Palette Item Component
+// =============================================================================
+
+interface PaletteItemProps {
+    type: NodeType;
+    label: string;
+    description: string;
+    icon: string;
+    onDragStart: (event: React.DragEvent, nodeType: NodeType) => void;
+}
+
+function PaletteItem({ type, label, description, icon, onDragStart }: PaletteItemProps) {
+    const IconComponent = iconMap[icon] ?? MessageSquare;
+
+    return (
+        <div
+            className={cn(
+                'flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white',
+                'cursor-grab hover:border-gray-300 hover:shadow-sm transition-all',
+                'active:cursor-grabbing'
+            )}
+            draggable
+            onDragStart={(e) => onDragStart(e, type)}
+        >
+            <GripVertical className="w-4 h-4 text-gray-400 flex-shrink-0" />
+            <IconComponent className="w-5 h-5 text-gray-600 flex-shrink-0" />
+            <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-gray-900">{label}</div>
+                <div className="text-xs text-gray-500 truncate">{description}</div>
+            </div>
+        </div>
+    );
+}
+
+// =============================================================================
+// Node Palette Component
+// =============================================================================
+
+export function NodePalette() {
+    const nodeDefinitions = getAllNodeDefinitions();
+
+    // Group definitions by category
+    const groupedNodes = categoryOrder.reduce((acc, category) => {
+        acc[category] = nodeDefinitions.filter(def => def.category === category);
+        return acc;
+    }, {} as Record<NodeCategory, typeof nodeDefinitions>);
+
+    const onDragStart = useCallback((event: React.DragEvent, nodeType: NodeType) => {
+        event.dataTransfer.setData('application/reactflow', nodeType);
+        event.dataTransfer.effectAllowed = 'move';
+    }, []);
+
+    return (
+        <div className="w-64 h-full bg-gray-50 border-r border-gray-200 flex flex-col">
+            {/* Header */}
+            <div className="px-4 py-3 border-b border-gray-200">
+                <h2 className="text-sm font-semibold text-gray-900">Node Palette</h2>
+                <p className="text-xs text-gray-500 mt-0.5">
+                    Drag nodes onto the canvas
+                </p>
+            </div>
+
+            {/* Node categories */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-6">
+                {categoryOrder.map(category => {
+                    const nodes = groupedNodes[category];
+                    if (!nodes || nodes.length === 0) return null;
+
+                    return (
+                        <div key={category}>
+                            <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
+                                {categoryLabels[category]}
+                            </h3>
+                            <div className="space-y-2">
+                                {nodes.map(def => (
+                                    <PaletteItem
+                                        key={def.type}
+                                        type={def.type}
+                                        label={def.label}
+                                        description={def.description}
+                                        icon={def.icon}
+                                        onDragStart={onDragStart}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+
+            {/* Footer hint */}
+            <div className="px-4 py-3 border-t border-gray-200 bg-gray-100">
+                <p className="text-xs text-gray-500 text-center">
+                    Connect nodes with edges to define execution order
+                </p>
+            </div>
+        </div>
+    );
+}
diff --git a/examples/next-js/components/builder/nodes/base-node.tsx b/examples/next-js/components/builder/nodes/base-node.tsx
new file mode 100644
index 0000000..ee6253b
--- /dev/null
+++ b/examples/next-js/components/builder/nodes/base-node.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { cn } from '@/lib/utils';
+import { useBuilderStore } from '@/lib/builder/store';
+import type { BuilderNodeData, NodeType, BuilderNode } from '@/lib/builder/types';
+import { getNodeDefinition } from '@/lib/builder/node-definitions';
+import {
+    Wallet,
+    Send,
+    Coins,
+    PlusCircle,
+    MessageSquare,
+} from 'lucide-react';
+
+// =============================================================================
+// Icon Mapping
+// =============================================================================
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+    'wallet': Wallet,
+    'send': Send,
+    'coins': Coins,
+    'plus-circle': PlusCircle,
+    'message-square': MessageSquare,
+};
+
+// =============================================================================
+// Category Colors
+// =============================================================================
+
+const categoryColors: Record<string, { bg: string; border: string; icon: string }> = {
+    source: {
+        bg: 'bg-purple-50',
+        border: 'border-purple-300',
+        icon: 'text-purple-600',
+    },
+    transfer: {
+        bg: 'bg-blue-50',
+        border: 'border-blue-300',
+        icon: 'text-blue-600',
+    },
+    token: {
+        bg: 'bg-green-50',
+        border: 'border-green-300',
+        icon: 'text-green-600',
+    },
+    utility: {
+        bg: 'bg-orange-50',
+        border: 'border-orange-300',
+        icon: 'text-orange-600',
+    },
+};
+
+// =============================================================================
+// Base Node Component
+// =============================================================================
+
+interface BaseNodeProps {
+    id: string;
+    data: BuilderNodeData;
+    type: NodeType;
+    selected?: boolean;
+}
+
+function BaseNodeComponent({ id, data, type, selected }: BaseNodeProps) {
+    const selectNode = useBuilderStore(state => state.selectNode);
+    const def = getNodeDefinition(type);
+    const colors = categoryColors[def.category] ?? categoryColors.utility;
+    const IconComponent = iconMap[def.icon] ?? MessageSquare;
+
+    const hasInputs = Object.keys(def.inputs).length > 0;
+    const hasOutputs = Object.keys(def.outputs).length > 0;
+
+    return (
+        <div
+            className={cn(
+                'relative min-w-[140px] rounded-lg border-2 shadow-sm transition-all',
+                colors.bg,
+                colors.border,
+                selected && 'ring-2 ring-offset-2 ring-blue-500 shadow-md'
+            )}
+            onClick={() => selectNode(id)}
+        >
+            {/* Input handles */}
+            {hasInputs && (
+                <Handle
+                    type="target"
+                    position={Position.Left}
+                    className="!w-3 !h-3 !bg-gray-400 !border-2 !border-white"
+                />
+            )}
+
+            {/* Node content */}
+            <div className="px-3 py-2">
+                {/* Header */}
+                <div className="flex items-center gap-2 mb-1">
+                    <IconComponent className={cn('w-4 h-4', colors.icon)} />
+                    <span className="text-xs font-semibold text-gray-700">
+                        {def.label}
+                    </span>
+                </div>
+
+                {/* Preview of key data */}
+                <NodePreview type={type} data={data} />
+            </div>
+
+            {/* Output handles */}
+            {hasOutputs && (
+                <Handle
+                    type="source"
+                    position={Position.Right}
+                    className="!w-3 !h-3 !bg-gray-400 !border-2 !border-white"
+                />
+            )}
+        </div>
+    );
+}
+
+// =============================================================================
+// Node Preview (shows key data in the node)
+// =============================================================================
+
+interface NodePreviewProps {
+    type: NodeType;
+    data: BuilderNodeData;
+}
+
+function NodePreview({ type, data }: NodePreviewProps) {
+    switch (type) {
+        case 'wallet':
+            return (
+                <div className="text-[10px] text-gray-500 truncate max-w-[120px]">
+                    Connected
+                </div>
+            );
+
+        case 'transfer-sol': {
+            const solData = data as { amount?: string; destination?: string };
+            return (
+                <div className="text-[10px] text-gray-500 space-y-0.5">
+                    {solData.amount && (
+                        <div>{solData.amount} SOL</div>
+                    )}
+                    {solData.destination && (
+                        <div className="truncate max-w-[120px]">
+                            → {solData.destination.slice(0, 8)}...
+                        </div>
+                    )}
+                    {!solData.amount && !solData.destination && (
+                        <div className="italic">Configure...</div>
+                    )}
+                </div>
+            );
+        }
+
+        case 'transfer-token': {
+            const tokenData = data as { amount?: string; mint?: string };
+            return (
+                <div className="text-[10px] text-gray-500 space-y-0.5">
+                    {tokenData.amount && (
+                        <div>{tokenData.amount} tokens</div>
+                    )}
+                    {tokenData.mint && (
+                        <div className="truncate max-w-[120px]">
+                            {tokenData.mint.slice(0, 8)}...
+                        </div>
+                    )}
+                    {!tokenData.amount && !tokenData.mint && (
+                        <div className="italic">Configure...</div>
+                    )}
+                </div>
+            );
+        }
+
+        case 'create-ata': {
+            const ataData = data as { mint?: string };
+            return (
+                <div className="text-[10px] text-gray-500">
+                    {ataData.mint ? (
+                        <div className="truncate max-w-[120px]">
+                            {ataData.mint.slice(0, 8)}...
+                        </div>
+                    ) : (
+                        <div className="italic">Configure...</div>
+                    )}
+                </div>
+            );
+        }
+
+        case 'memo': {
+            const memoData = data as { message?: string };
+            return (
+                <div className="text-[10px] text-gray-500 truncate max-w-[120px]">
+                    {memoData.message ? (
+                        `"${memoData.message.slice(0, 20)}${memoData.message.length > 20 ? '...' : ''}"`
+                    ) : (
+                        <span className="italic">Configure...</span>
+                    )}
+                </div>
+            );
+        }
+
+        default:
+            return null;
+    }
+}
+
+export const BaseNode = memo(BaseNodeComponent);
diff --git a/examples/next-js/components/builder/nodes/index.ts b/examples/next-js/components/builder/nodes/index.ts
new file mode 100644
index 0000000..17db767
--- /dev/null
+++ b/examples/next-js/components/builder/nodes/index.ts
@@ -0,0 +1,25 @@
+/**
+ * Node components for the visual transaction builder.
+ *
+ * All node types use the same BaseNode component with different
+ * configurations defined in node-definitions.ts.
+ *
+ * @packageDocumentation
+ */
+
+import { BaseNode } from './base-node';
+import type { NodeTypes } from '@xyflow/react';
+
+/**
+ * Node type registry for React Flow.
+ * Maps node type strings to their React components.
+ */
+export const nodeTypes: NodeTypes = {
+    'wallet': BaseNode,
+    'transfer-sol': BaseNode,
+    'transfer-token': BaseNode,
+    'create-ata': BaseNode,
+    'memo': BaseNode,
+};
+
+export { BaseNode } from './base-node';
diff --git a/examples/next-js/components/navigation/app-nav.tsx b/examples/next-js/components/navigation/app-nav.tsx
index c201a58..c35a2db 100644
--- a/examples/next-js/components/navigation/app-nav.tsx
+++ b/examples/next-js/components/navigation/app-nav.tsx
@@ -13,6 +13,7 @@ const navItems = [
     { href: '/', label: 'Home' },
     // { href: '/transactions', label: 'Transactions' },
     { href: '/playground', label: 'Playground' },
+    { href: '/builder', label: 'Builder' },
 ];
 
 export const AppNav = React.memo(() => {
diff --git a/examples/next-js/lib/builder/compiler.ts b/examples/next-js/lib/builder/compiler.ts
new file mode 100644
index 0000000..09ee0f7
--- /dev/null
+++ b/examples/next-js/lib/builder/compiler.ts
@@ -0,0 +1,250 @@
+/**
+ * Graph compiler - converts a builder graph to Solana instructions.
+ *
+ * The compiler:
+ * 1. Topologically sorts nodes by edges (respecting dependencies)
+ * 2. Resolves input values for each node
+ * 3. Calls each node's compile function
+ * 4. Collects all instructions into a single array
+ *
+ * @packageDocumentation
+ */
+
+import type { Instruction } from '@solana/kit';
+import type {
+    BuilderNode,
+    BuilderEdge,
+    CompileContext,
+    GraphCompileResult,
+    NodeCompileResult,
+    Address,
+    NodeType,
+} from './types';
+import { getNodeDefinition } from './node-definitions';
+
+// =============================================================================
+// Topological Sort
+// =============================================================================
+
+/**
+ * Topologically sort nodes based on edge dependencies.
+ * Nodes with no incoming edges come first.
+ */
+function topoSort(nodes: BuilderNode[], edges: BuilderEdge[]): BuilderNode[] {
+    // Build adjacency list and in-degree count
+    const inDegree = new Map<string, number>();
+    const adjacency = new Map<string, string[]>();
+
+    for (const node of nodes) {
+        inDegree.set(node.id, 0);
+        adjacency.set(node.id, []);
+    }
+
+    for (const edge of edges) {
+        const current = inDegree.get(edge.target) ?? 0;
+        inDegree.set(edge.target, current + 1);
+        adjacency.get(edge.source)?.push(edge.target);
+    }
+
+    // Kahn's algorithm
+    const queue: string[] = [];
+    for (const [id, degree] of inDegree) {
+        if (degree === 0) {
+            queue.push(id);
+        }
+    }
+
+    const sorted: BuilderNode[] = [];
+    while (queue.length > 0) {
+        const nodeId = queue.shift()!;
+        const node = nodes.find(n => n.id === nodeId);
+        if (node) {
+            sorted.push(node);
+        }
+
+        for (const neighbor of adjacency.get(nodeId) ?? []) {
+            const degree = inDegree.get(neighbor) ?? 0;
+            inDegree.set(neighbor, degree - 1);
+            if (degree - 1 === 0) {
+                queue.push(neighbor);
+            }
+        }
+    }
+
+    // If sorted length !== nodes length, there's a cycle
+    if (sorted.length !== nodes.length) {
+        console.warn('[Compiler] Graph contains cycles, some nodes may be skipped');
+    }
+
+    return sorted;
+}
+
+// =============================================================================
+// Input Resolution
+// =============================================================================
+
+/**
+ * Resolve input values for a node from edges and previous node outputs.
+ */
+function resolveInputs(
+    node: BuilderNode,
+    edges: BuilderEdge[],
+    nodeOutputs: Map<string, Record<string, unknown>>,
+    ctx: CompileContext
+): Record<string, unknown> {
+    const def = getNodeDefinition(node.type);
+    const inputs: Record<string, unknown> = {};
+
+    for (const [inputName, inputDef] of Object.entries(def.inputs)) {
+        // Check if there's an edge providing this input
+        const incomingEdge = edges.find(
+            e => e.target === node.id && e.targetHandle === inputName
+        );
+
+        if (incomingEdge) {
+            // Get value from source node's outputs
+            const sourceOutputs = nodeOutputs.get(incomingEdge.source);
+            const sourceHandle = incomingEdge.sourceHandle ?? 'default';
+            inputs[inputName] = sourceOutputs?.[sourceHandle];
+        } else if (inputDef.defaultFromWallet) {
+            // Use wallet address as default
+            inputs[inputName] = ctx.walletAddress;
+        }
+    }
+
+    return inputs;
+}
+
+// =============================================================================
+// Main Compiler
+// =============================================================================
+
+/**
+ * Compile a builder graph into Solana instructions.
+ */
+export async function compileGraph(
+    nodes: BuilderNode[],
+    edges: BuilderEdge[],
+    ctx: CompileContext
+): Promise<GraphCompileResult> {
+    console.log('[Compiler] compileGraph called with', nodes.length, 'nodes');
+
+    // Skip if no nodes
+    if (nodes.length === 0) {
+        console.log('[Compiler] No nodes to compile');
+        return {
+            instructions: [],
+        };
+    }
+
+    // Sort nodes topologically
+    const sortedNodes = topoSort(nodes, edges);
+    console.log('[Compiler] Sorted nodes:', sortedNodes.map(n => ({ id: n.id, type: n.type })));
+
+    // Track outputs from each node
+    const nodeOutputs = new Map<string, Record<string, unknown>>();
+
+    // Collect all instructions
+    const allInstructions: Instruction[] = [];
+    const allALTs: Address[] = [];
+    let totalComputeUnits = 0;
+
+    // Compile each node in order
+    for (const node of sortedNodes) {
+        try {
+            console.log('[Compiler] Compiling node:', node.id, 'type:', node.type, 'data:', JSON.stringify(node.data));
+            
+            if (!node.type) {
+                console.error('[Compiler] Node has no type:', node);
+                continue;
+            }
+            
+            const def = getNodeDefinition(node.type as NodeType);
+            const inputs = resolveInputs(node, edges, nodeOutputs, ctx);
+            console.log('[Compiler] Resolved inputs:', inputs);
+
+            const result: NodeCompileResult = await def.compile(
+                node.data,
+                inputs,
+                ctx
+            );
+            console.log('[Compiler] Node result:', result.instructions.length, 'instructions');
+
+            // Store outputs for downstream nodes
+            nodeOutputs.set(node.id, result.outputs);
+
+            // Collect instructions
+            allInstructions.push(...result.instructions);
+
+            // Collect ALTs
+            if (result.addressLookupTables) {
+                allALTs.push(...result.addressLookupTables);
+            }
+
+            // Track compute units
+            if (result.computeUnits) {
+                totalComputeUnits += result.computeUnits;
+            }
+        } catch (error) {
+            console.error(`[Compiler] Error compiling node ${node.id}:`, error);
+            throw new Error(
+                `Failed to compile node "${node.type}": ${error instanceof Error ? error.message : 'Unknown error'}`
+            );
+        }
+    }
+
+    console.log('[Compiler] Total instructions:', allInstructions.length);
+    return {
+        instructions: allInstructions,
+        computeUnits: totalComputeUnits > 0 ? totalComputeUnits : undefined,
+        addressLookupTables: allALTs.length > 0 ? allALTs : undefined,
+    };
+}
+
+// =============================================================================
+// Validation
+// =============================================================================
+
+/**
+ * Validate that a graph can be compiled.
+ * Returns an array of validation errors (empty if valid).
+ */
+export function validateGraph(
+    nodes: BuilderNode[],
+    edges: BuilderEdge[]
+): string[] {
+    const errors: string[] = [];
+
+    // Check for empty graph
+    if (nodes.length === 0) {
+        errors.push('Graph is empty - add at least one node');
+        return errors;
+    }
+
+    // Check each node has required data
+    for (const node of nodes) {
+        const def = getNodeDefinition(node.type);
+
+        // Check required inputs have sources
+        for (const [inputName, inputDef] of Object.entries(def.inputs)) {
+            const hasEdge = edges.some(
+                e => e.target === node.id && e.targetHandle === inputName
+            );
+            const hasDefault = inputDef.defaultFromWallet;
+
+            if (!hasEdge && !hasDefault) {
+                errors.push(
+                    `Node "${node.id}" (${def.label}) is missing required input: ${inputDef.label}`
+                );
+            }
+        }
+    }
+
+    // Check for cycles (topoSort will handle, but we can warn)
+    const sortedLength = topoSort(nodes, edges).length;
+    if (sortedLength !== nodes.length) {
+        errors.push('Graph contains cycles - remove circular dependencies');
+    }
+
+    return errors;
+}
diff --git a/examples/next-js/lib/builder/index.ts b/examples/next-js/lib/builder/index.ts
new file mode 100644
index 0000000..b845fff
--- /dev/null
+++ b/examples/next-js/lib/builder/index.ts
@@ -0,0 +1,36 @@
+/**
+ * Visual Transaction Builder library.
+ *
+ * @packageDocumentation
+ */
+
+// Types
+export type {
+    NodeType,
+    NodeCategory,
+    BuilderNode,
+    BuilderEdge,
+    BuilderNodeData,
+    BuilderConfig,
+    BuilderGraph,
+    CompileContext,
+    NodeCompileResult,
+    GraphCompileResult,
+    NodeDefinition,
+    SizeInfo,
+    SimulationFeedback,
+    BuilderFeedback,
+    ExecutionState,
+} from './types';
+
+// Store
+export { useBuilderStore, useNodes, useEdges, useSelectedNodeId, useConfig, useExecutionState } from './store';
+
+// Node definitions
+export { nodeDefinitions, getNodeDefinition, getAllNodeDefinitions, getNodeDefinitionsByCategory } from './node-definitions';
+
+// Compiler
+export { compileGraph, validateGraph } from './compiler';
+
+// Hooks
+export { useBuilderFeedback } from './use-builder-feedback';
diff --git a/examples/next-js/lib/builder/node-definitions.ts b/examples/next-js/lib/builder/node-definitions.ts
new file mode 100644
index 0000000..73b16eb
--- /dev/null
+++ b/examples/next-js/lib/builder/node-definitions.ts
@@ -0,0 +1,265 @@
+/**
+ * Node type definitions and registry for the visual transaction builder.
+ *
+ * Each node type defines:
+ * - Metadata (label, icon, category)
+ * - Default data
+ * - Input/output handles
+ * - Compile function to produce Solana instructions
+ *
+ * @packageDocumentation
+ */
+
+import { address, lamports } from '@solana/kit';
+import { getTransferSolInstruction } from '@solana-program/system';
+import type {
+    NodeDefinition,
+    NodeType,
+    WalletNodeData,
+    TransferSolNodeData,
+    TransferTokenNodeData,
+    CreateAtaNodeData,
+    MemoNodeData,
+    CompileContext,
+    NodeCompileResult,
+} from './types';
+
+// =============================================================================
+// Wallet Node
+// =============================================================================
+
+export const walletNodeDef: NodeDefinition<WalletNodeData> = {
+    type: 'wallet',
+    label: 'Wallet',
+    category: 'source',
+    description: 'Connected wallet address',
+    icon: 'wallet',
+    defaultData: {
+        label: 'My Wallet',
+    },
+    inputs: {},
+    outputs: {
+        address: { type: 'address', label: 'Address' },
+    },
+    compile: async (_data, _inputs, ctx): Promise<NodeCompileResult> => {
+        // Wallet node doesn't produce instructions, just provides address
+        return {
+            instructions: [],
+            outputs: {
+                address: ctx.walletAddress,
+            },
+        };
+    },
+};
+
+// =============================================================================
+// Transfer SOL Node
+// =============================================================================
+
+export const transferSolNodeDef: NodeDefinition<TransferSolNodeData> = {
+    type: 'transfer-sol',
+    label: 'Transfer SOL',
+    category: 'transfer',
+    description: 'Send SOL to another address',
+    icon: 'send',
+    defaultData: {
+        amount: '',
+        destination: '',
+    },
+    inputs: {
+        source: { type: 'address', label: 'From', defaultFromWallet: true },
+    },
+    outputs: {},
+    compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
+        if (!data.amount || !data.destination) {
+            return { instructions: [], outputs: {} };
+        }
+
+        // Convert amount to lamports (assuming input is in SOL)
+        const amountLamports = BigInt(Math.floor(parseFloat(data.amount) * 1_000_000_000));
+
+        const instruction = getTransferSolInstruction({
+            source: ctx.signer,
+            destination: address(data.destination),
+            amount: lamports(amountLamports),
+        });
+
+        return {
+            instructions: [instruction],
+            outputs: {},
+        };
+    },
+};
+
+// =============================================================================
+// Transfer Token Node
+// =============================================================================
+
+export const transferTokenNodeDef: NodeDefinition<TransferTokenNodeData> = {
+    type: 'transfer-token',
+    label: 'Transfer Token',
+    category: 'transfer',
+    description: 'Send SPL tokens to another address',
+    icon: 'coins',
+    defaultData: {
+        mint: '',
+        amount: '',
+        destination: '',
+        decimals: 9,
+    },
+    inputs: {
+        source: { type: 'address', label: 'From', defaultFromWallet: true },
+    },
+    outputs: {},
+    compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
+        if (!data.mint || !data.amount || !data.destination) {
+            return { instructions: [], outputs: {} };
+        }
+
+        // For now, return empty - full SPL token transfer requires:
+        // 1. Getting/creating source ATA
+        // 2. Getting/creating destination ATA
+        // 3. Transfer instruction
+        // This will be enhanced in a future iteration
+        console.log('[TransferToken] Would transfer:', {
+            mint: data.mint,
+            amount: data.amount,
+            destination: data.destination,
+            from: ctx.walletAddress,
+        });
+
+        return {
+            instructions: [],
+            outputs: {},
+            computeUnits: 50_000, // Estimate for token transfer
+        };
+    },
+};
+
+// =============================================================================
+// Create ATA Node
+// =============================================================================
+
+export const createAtaNodeDef: NodeDefinition<CreateAtaNodeData> = {
+    type: 'create-ata',
+    label: 'Create ATA',
+    category: 'token',
+    description: 'Create an Associated Token Account',
+    icon: 'plus-circle',
+    defaultData: {
+        mint: '',
+        owner: '',
+    },
+    inputs: {
+        payer: { type: 'address', label: 'Payer', defaultFromWallet: true },
+    },
+    outputs: {
+        ata: { type: 'address', label: 'ATA Address' },
+    },
+    compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
+        if (!data.mint) {
+            return { instructions: [], outputs: {} };
+        }
+
+        // For now, return empty - full ATA creation requires:
+        // 1. Deriving ATA address
+        // 2. Creating ATA instruction
+        // This will be enhanced in a future iteration
+        const owner = data.owner || String(ctx.walletAddress);
+        console.log('[CreateATA] Would create ATA:', {
+            mint: data.mint,
+            owner,
+            payer: ctx.walletAddress,
+        });
+
+        return {
+            instructions: [],
+            outputs: {
+                // Would compute the ATA address here
+                ata: null,
+            },
+            computeUnits: 30_000, // Estimate for ATA creation
+        };
+    },
+};
+
+// =============================================================================
+// Memo Node
+// =============================================================================
+
+const MEMO_PROGRAM_ID = 'MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr';
+
+export const memoNodeDef: NodeDefinition<MemoNodeData> = {
+    type: 'memo',
+    label: 'Memo',
+    category: 'utility',
+    description: 'Add a memo to the transaction',
+    icon: 'message-square',
+    defaultData: {
+        message: '',
+    },
+    inputs: {},
+    outputs: {},
+    compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
+        if (!data.message) {
+            return { instructions: [], outputs: {} };
+        }
+
+        // Create memo instruction
+        const instruction = {
+            programAddress: address(MEMO_PROGRAM_ID),
+            accounts: [
+                {
+                    address: address(ctx.walletAddress as string),
+                    role: 2 as const, // READONLY_SIGNER
+                },
+            ],
+            data: new TextEncoder().encode(data.message),
+        } as any; // Type assertion needed due to complex instruction typing
+
+        return {
+            instructions: [instruction],
+            outputs: {},
+        };
+    },
+};
+
+// =============================================================================
+// Node Registry
+// =============================================================================
+
+/**
+ * Registry of all available node definitions.
+ */
+export const nodeDefinitions: Record<NodeType, NodeDefinition<any>> = {
+    'wallet': walletNodeDef,
+    'transfer-sol': transferSolNodeDef,
+    'transfer-token': transferTokenNodeDef,
+    'create-ata': createAtaNodeDef,
+    'memo': memoNodeDef,
+};
+
+/**
+ * Get a node definition by type.
+ */
+export function getNodeDefinition(type: NodeType): NodeDefinition<any> {
+    const def = nodeDefinitions[type];
+    if (!def) {
+        throw new Error(`Unknown node type: ${type}`);
+    }
+    return def;
+}
+
+/**
+ * Get all node definitions as an array.
+ */
+export function getAllNodeDefinitions(): NodeDefinition<any>[] {
+    return Object.values(nodeDefinitions);
+}
+
+/**
+ * Get node definitions by category.
+ */
+export function getNodeDefinitionsByCategory(category: string): NodeDefinition<any>[] {
+    return getAllNodeDefinitions().filter(def => def.category === category);
+}
diff --git a/examples/next-js/lib/builder/store.ts b/examples/next-js/lib/builder/store.ts
new file mode 100644
index 0000000..3bf6427
--- /dev/null
+++ b/examples/next-js/lib/builder/store.ts
@@ -0,0 +1,252 @@
+/**
+ * Zustand store for the visual transaction builder.
+ *
+ * Manages:
+ * - Nodes and edges (React Flow state)
+ * - Selected node for inspector
+ * - Builder configuration
+ * - Execution state
+ *
+ * @packageDocumentation
+ */
+
+import { create } from 'zustand';
+
+// Simple ID generator (avoid external dependency)
+function generateId(): string {
+    return Math.random().toString(36).substring(2, 10);
+}
+import type {
+    BuilderNode,
+    BuilderEdge,
+    BuilderConfig,
+    NodeType,
+    BuilderNodeData,
+    ExecutionState,
+} from './types';
+import { getNodeDefinition } from './node-definitions';
+
+// =============================================================================
+// Store Interface
+// =============================================================================
+
+interface BuilderStore {
+    // Graph state
+    nodes: BuilderNode[];
+    edges: BuilderEdge[];
+    selectedNodeId: string | null;
+
+    // Configuration
+    config: BuilderConfig;
+
+    // Execution state
+    executionState: ExecutionState;
+
+    // Node actions
+    addNode: (type: NodeType, position: { x: number; y: number }) => string;
+    updateNodeData: (id: string, data: Partial<BuilderNodeData>) => void;
+    updateNodePosition: (id: string, position: { x: number; y: number }) => void;
+    removeNode: (id: string) => void;
+    selectNode: (id: string | null) => void;
+
+    // Edge actions
+    setEdges: (edges: BuilderEdge[]) => void;
+    addEdge: (edge: Omit<BuilderEdge, 'id'>) => void;
+    removeEdge: (id: string) => void;
+
+    // Bulk update (for React Flow callbacks)
+    setNodes: (nodes: BuilderNode[]) => void;
+    onNodesChange: (changes: any[]) => void;
+    onEdgesChange: (changes: any[]) => void;
+
+    // Config actions
+    updateConfig: (config: Partial<BuilderConfig>) => void;
+
+    // Execution actions
+    setExecutionState: (state: ExecutionState) => void;
+
+    // Utility
+    getSelectedNode: () => BuilderNode | null;
+    reset: () => void;
+}
+
+// =============================================================================
+// Initial State
+// =============================================================================
+
+const initialConfig: BuilderConfig = {
+    priorityFee: 'medium',
+    computeUnits: 'auto',
+};
+
+const initialExecutionState: ExecutionState = { status: 'idle' };
+
+// =============================================================================
+// Store Implementation
+// =============================================================================
+
+export const useBuilderStore = create<BuilderStore>((set, get) => ({
+    // Initial state
+    nodes: [],
+    edges: [],
+    selectedNodeId: null,
+    config: initialConfig,
+    executionState: initialExecutionState,
+
+    // Node actions
+    addNode: (type, position) => {
+        const def = getNodeDefinition(type);
+        const id = generateId();
+
+        const newNode: BuilderNode = {
+            id,
+            type,
+            position,
+            data: { ...def.defaultData } as BuilderNodeData,
+        };
+
+        set(state => ({
+            nodes: [...state.nodes, newNode],
+            selectedNodeId: id,
+        }));
+
+        return id;
+    },
+
+    updateNodeData: (id, data) => {
+        set(state => ({
+            nodes: state.nodes.map(node =>
+                node.id === id
+                    ? { ...node, data: { ...node.data, ...data } }
+                    : node
+            ),
+        }));
+    },
+
+    updateNodePosition: (id, position) => {
+        set(state => ({
+            nodes: state.nodes.map(node =>
+                node.id === id ? { ...node, position } : node
+            ),
+        }));
+    },
+
+    removeNode: (id) => {
+        set(state => ({
+            nodes: state.nodes.filter(node => node.id !== id),
+            edges: state.edges.filter(
+                edge => edge.source !== id && edge.target !== id
+            ),
+            selectedNodeId: state.selectedNodeId === id ? null : state.selectedNodeId,
+        }));
+    },
+
+    selectNode: (id) => {
+        set({ selectedNodeId: id });
+    },
+
+    // Edge actions
+    setEdges: (edges) => {
+        set({ edges });
+    },
+
+    addEdge: (edge) => {
+        const id = generateId();
+        set(state => ({
+            edges: [...state.edges, { ...edge, id }],
+        }));
+    },
+
+    removeEdge: (id) => {
+        set(state => ({
+            edges: state.edges.filter(edge => edge.id !== id),
+        }));
+    },
+
+    // Bulk updates for React Flow
+    setNodes: (nodes) => {
+        set({ nodes });
+    },
+
+    onNodesChange: (changes) => {
+        set(state => {
+            let nodes = [...state.nodes];
+            let selectedNodeId = state.selectedNodeId;
+
+            for (const change of changes) {
+                if (change.type === 'position' && change.position) {
+                    const idx = nodes.findIndex(n => n.id === change.id);
+                    if (idx !== -1) {
+                        nodes[idx] = {
+                            ...nodes[idx],
+                            position: change.position,
+                        };
+                    }
+                } else if (change.type === 'remove') {
+                    nodes = nodes.filter(n => n.id !== change.id);
+                    if (selectedNodeId === change.id) {
+                        selectedNodeId = null;
+                    }
+                } else if (change.type === 'select') {
+                    if (change.selected) {
+                        selectedNodeId = change.id;
+                    }
+                }
+            }
+
+            return { nodes, selectedNodeId };
+        });
+    },
+
+    onEdgesChange: (changes) => {
+        set(state => {
+            let edges = [...state.edges];
+
+            for (const change of changes) {
+                if (change.type === 'remove') {
+                    edges = edges.filter(e => e.id !== change.id);
+                }
+            }
+
+            return { edges };
+        });
+    },
+
+    // Config actions
+    updateConfig: (config) => {
+        set(state => ({
+            config: { ...state.config, ...config },
+        }));
+    },
+
+    // Execution actions
+    setExecutionState: (executionState) => {
+        set({ executionState });
+    },
+
+    // Utility
+    getSelectedNode: () => {
+        const { nodes, selectedNodeId } = get();
+        return nodes.find(n => n.id === selectedNodeId) ?? null;
+    },
+
+    reset: () => {
+        set({
+            nodes: [],
+            edges: [],
+            selectedNodeId: null,
+            config: initialConfig,
+            executionState: initialExecutionState,
+        });
+    },
+}));
+
+// =============================================================================
+// Selector Hooks
+// =============================================================================
+
+export const useNodes = () => useBuilderStore(state => state.nodes);
+export const useEdges = () => useBuilderStore(state => state.edges);
+export const useSelectedNodeId = () => useBuilderStore(state => state.selectedNodeId);
+export const useConfig = () => useBuilderStore(state => state.config);
+export const useExecutionState = () => useBuilderStore(state => state.executionState);
diff --git a/examples/next-js/lib/builder/types.ts b/examples/next-js/lib/builder/types.ts
new file mode 100644
index 0000000..08e7ed3
--- /dev/null
+++ b/examples/next-js/lib/builder/types.ts
@@ -0,0 +1,247 @@
+/**
+ * Types for the visual transaction builder.
+ *
+ * @packageDocumentation
+ */
+
+import type { Node, Edge } from '@xyflow/react';
+import type { Instruction, TransactionSigner, Rpc, RpcSubscriptions } from '@solana/kit';
+import type { PriorityFeeLevel } from '@pipeit/core';
+
+/**
+ * Address type alias for Solana addresses.
+ */
+export type Address = string;
+
+// =============================================================================
+// Node Types
+// =============================================================================
+
+/**
+ * Available node types in the builder.
+ */
+export type NodeType =
+    | 'wallet'
+    | 'transfer-sol'
+    | 'transfer-token'
+    | 'create-ata'
+    | 'memo';
+
+/**
+ * Node categories for the palette.
+ */
+export type NodeCategory = 'source' | 'transfer' | 'token' | 'utility';
+
+/**
+ * Base type for all node data with index signature for React Flow compatibility.
+ */
+export interface BaseNodeData {
+    [key: string]: unknown;
+}
+
+/**
+ * Data structure for wallet node.
+ */
+export interface WalletNodeData extends BaseNodeData {
+    label: string;
+}
+
+/**
+ * Data structure for transfer SOL node.
+ */
+export interface TransferSolNodeData extends BaseNodeData {
+    amount: string;
+    destination: string;
+}
+
+/**
+ * Data structure for transfer token node.
+ */
+export interface TransferTokenNodeData extends BaseNodeData {
+    mint: string;
+    amount: string;
+    destination: string;
+    decimals: number;
+}
+
+/**
+ * Data structure for create ATA node.
+ */
+export interface CreateAtaNodeData extends BaseNodeData {
+    mint: string;
+    owner: string;
+}
+
+/**
+ * Data structure for memo node.
+ */
+export interface MemoNodeData extends BaseNodeData {
+    message: string;
+}
+
+/**
+ * Union of all node data types.
+ */
+export type BuilderNodeData =
+    | WalletNodeData
+    | TransferSolNodeData
+    | TransferTokenNodeData
+    | CreateAtaNodeData
+    | MemoNodeData;
+
+/**
+ * A builder node extending React Flow's Node type.
+ */
+export type BuilderNode = Node<BuilderNodeData, NodeType>;
+
+/**
+ * A builder edge extending React Flow's Edge type.
+ */
+export type BuilderEdge = Edge;
+
+// =============================================================================
+// Handle Types
+// =============================================================================
+
+/**
+ * Handle value types for data flow.
+ */
+export type HandleValueType = 'address' | 'amount' | 'any';
+
+/**
+ * Handle definition for node inputs/outputs.
+ */
+export interface HandleDef {
+    type: HandleValueType;
+    label: string;
+    defaultFromWallet?: boolean;
+}
+
+// =============================================================================
+// Graph Configuration
+// =============================================================================
+
+/**
+ * Builder graph configuration.
+ */
+export interface BuilderConfig {
+    priorityFee: PriorityFeeLevel;
+    computeUnits: 'auto' | number;
+}
+
+/**
+ * Complete builder graph state.
+ */
+export interface BuilderGraph {
+    nodes: BuilderNode[];
+    edges: BuilderEdge[];
+    config: BuilderConfig;
+}
+
+// =============================================================================
+// Compilation Types
+// =============================================================================
+
+/**
+ * Context passed to node compile functions.
+ */
+export interface CompileContext {
+    signer: TransactionSigner;
+    rpc: Rpc<any>;
+    rpcSubscriptions: RpcSubscriptions<any>;
+    walletAddress: Address;
+}
+
+/**
+ * Result from compiling a single node.
+ */
+export interface NodeCompileResult {
+    instructions: Instruction[];
+    outputs: Record<string, unknown>;
+    computeUnits?: number;
+    addressLookupTables?: Address[];
+}
+
+/**
+ * Result from compiling the entire graph.
+ */
+export interface GraphCompileResult {
+    instructions: Instruction[];
+    computeUnits?: number;
+    addressLookupTables?: Address[];
+}
+
+// =============================================================================
+// Node Definition Types
+// =============================================================================
+
+/**
+ * Definition for a node type, including metadata and compile function.
+ */
+export interface NodeDefinition<TData extends BuilderNodeData = BuilderNodeData> {
+    type: NodeType;
+    label: string;
+    category: NodeCategory;
+    description: string;
+    icon: string;
+    defaultData: TData;
+    inputs: Record<string, HandleDef>;
+    outputs: Record<string, HandleDef>;
+    compile: (
+        data: TData,
+        inputs: Record<string, unknown>,
+        ctx: CompileContext
+    ) => Promise<NodeCompileResult>;
+}
+
+// =============================================================================
+// Feedback Types
+// =============================================================================
+
+/**
+ * Transaction size information.
+ */
+export interface SizeInfo {
+    size: number;
+    limit: number;
+    remaining: number;
+    percentUsed: number;
+    canFitMore: boolean;
+}
+
+/**
+ * Simulation result for feedback.
+ */
+export interface SimulationFeedback {
+    success: boolean;
+    computeUnits?: number;
+    error?: string;
+    logs?: string[];
+}
+
+/**
+ * Complete feedback state.
+ */
+export interface BuilderFeedback {
+    isCompiling: boolean;
+    isSimulating: boolean;
+    sizeInfo: SizeInfo | null;
+    simulation: SimulationFeedback | null;
+    error: string | null;
+}
+
+// =============================================================================
+// Execution Types
+// =============================================================================
+
+/**
+ * Execution state for the builder.
+ */
+export type ExecutionState =
+    | { status: 'idle' }
+    | { status: 'compiling' }
+    | { status: 'signing' }
+    | { status: 'sending' }
+    | { status: 'confirming' }
+    | { status: 'success'; signature: string }
+    | { status: 'error'; error: Error };
diff --git a/examples/next-js/lib/builder/use-builder-feedback.ts b/examples/next-js/lib/builder/use-builder-feedback.ts
new file mode 100644
index 0000000..8f00df4
--- /dev/null
+++ b/examples/next-js/lib/builder/use-builder-feedback.ts
@@ -0,0 +1,149 @@
+/**
+ * Hook for providing real-time feedback on transaction size and validity.
+ *
+ * Debounces graph changes and runs:
+ * - Size estimation via TransactionBuilder.getSizeInfo()
+ * - Validation via validateGraph()
+ *
+ * @packageDocumentation
+ */
+
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { TransactionBuilder } from '@pipeit/core';
+import { useBuilderStore } from './store';
+import { compileGraph, validateGraph } from './compiler';
+import type { CompileContext, SizeInfo, BuilderFeedback } from './types';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const DEBOUNCE_MS = 500;
+const TRANSACTION_SIZE_LIMIT = 1232;
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+export function useBuilderFeedback(
+    compileContext: CompileContext | null
+): BuilderFeedback {
+    const nodes = useBuilderStore(state => state.nodes);
+    const edges = useBuilderStore(state => state.edges);
+    const config = useBuilderStore(state => state.config);
+
+    const [feedback, setFeedback] = useState<BuilderFeedback>({
+        isCompiling: false,
+        isSimulating: false,
+        sizeInfo: null,
+        simulation: null,
+        error: null,
+    });
+
+    const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Compute feedback on graph changes
+    const computeFeedback = useCallback(async () => {
+        console.log('[Feedback] computeFeedback called, nodes:', nodes.length, 'context:', !!compileContext);
+        
+        if (!compileContext || nodes.length === 0) {
+            setFeedback({
+                isCompiling: false,
+                isSimulating: false,
+                sizeInfo: null,
+                simulation: null,
+                error: null,
+            });
+            return;
+        }
+
+        // First, validate the graph
+        const validationErrors = validateGraph(nodes, edges);
+        console.log('[Feedback] Validation errors:', validationErrors);
+        if (validationErrors.length > 0) {
+            setFeedback({
+                isCompiling: false,
+                isSimulating: false,
+                sizeInfo: null,
+                simulation: null,
+                error: validationErrors[0],
+            });
+            return;
+        }
+
+        setFeedback(prev => ({ ...prev, isCompiling: true, error: null }));
+
+        try {
+            // Compile the graph
+            const compiled = await compileGraph(nodes, edges, compileContext);
+            console.log('[Feedback] Compiled instructions:', compiled.instructions.length);
+
+            if (compiled.instructions.length === 0) {
+                setFeedback({
+                    isCompiling: false,
+                    isSimulating: false,
+                    sizeInfo: null,
+                    simulation: null,
+                    error: 'No instructions generated. Fill in the configuration fields for your nodes.',
+                });
+                return;
+            }
+
+            // Build transaction to get size info
+            const builder = new TransactionBuilder({
+                rpc: compileContext.rpc,
+                priorityFee: config.priorityFee,
+                computeUnits: config.computeUnits === 'auto' ? undefined : config.computeUnits,
+            })
+                .setFeePayerSigner(compileContext.signer)
+                .addInstructions(compiled.instructions);
+
+            // Get size info
+            console.log('[Feedback] Getting size info...');
+            const sizeInfo = await builder.getSizeInfo();
+            console.log('[Feedback] Size info:', sizeInfo);
+
+            setFeedback({
+                isCompiling: false,
+                isSimulating: false,
+                sizeInfo: {
+                    size: sizeInfo.size,
+                    limit: sizeInfo.limit,
+                    remaining: sizeInfo.remaining,
+                    percentUsed: sizeInfo.percentUsed,
+                    canFitMore: sizeInfo.canFitMore,
+                },
+                simulation: null,
+                error: null,
+            });
+        } catch (error) {
+            console.error('[Feedback] Error:', error);
+            setFeedback({
+                isCompiling: false,
+                isSimulating: false,
+                sizeInfo: null,
+                simulation: null,
+                error: error instanceof Error ? error.message : 'Unknown error',
+            });
+        }
+    }, [nodes, edges, compileContext, config]);
+
+    // Debounced effect
+    useEffect(() => {
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+
+        debounceRef.current = setTimeout(() => {
+            computeFeedback();
+        }, DEBOUNCE_MS);
+
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, [computeFeedback]);
+
+    return feedback;
+}
diff --git a/examples/next-js/package.json b/examples/next-js/package.json
index 46ddba4..bd7d36e 100644
--- a/examples/next-js/package.json
+++ b/examples/next-js/package.json
@@ -20,18 +20,19 @@
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
+        "@solana-program/system": "^0.9.0",
         "@solana/connector": "0.1.4",
         "@solana/connector-debugger": "0.1.1",
-        "@tanstack/react-query": "^5.90.5",
-        "@wallet-standard/app": "^1.1.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
         "@solana/instruction-plans": "^5.0.0",
         "@solana/instructions": "^5.0.0",
         "@solana/kit": "^5.0.0",
         "@solana/rpc": "^5.0.0",
         "@solana/web3.js": "^1.98.4",
-        "@solana-program/system": "^0.9.0",
+        "@tanstack/react-query": "^5.90.5",
+        "@wallet-standard/app": "^1.1.0",
+        "@xyflow/react": "^12.10.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "lucide-react": "^0.546.0",
         "motion": "^12.23.24",
         "next": "15.5.7",
@@ -39,7 +40,9 @@
         "react-dom": "19.2.1",
         "react-syntax-highlighter": "^15.6.1",
         "symbols-react": "^1.2.7",
-        "tailwind-merge": "^3.3.1"
+        "tailwind-merge": "^3.3.1",
+        "zod": "^4.2.1",
+        "zustand": "^5.0.9"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65e2047..210bb12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       '@wallet-standard/app':
         specifier: ^1.1.0
         version: 1.1.0
+      '@xyflow/react':
+        specifier: ^12.10.0
+        version: 12.10.0(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -122,6 +125,12 @@ importers:
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
+      zod:
+        specifier: ^4.2.1
+        version: 4.2.1
+      zustand:
+        specifier: ^5.0.9
+        version: 5.0.9(@types/react@19.2.2)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1))
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.1
@@ -2310,6 +2319,24 @@ packages:
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -2603,6 +2630,15 @@ packages:
     peerDependencies:
       '@solana/kit': ^5.0.0
 
+  '@xyflow/react@12.10.0':
+    resolution: {integrity: sha512-eOtz3whDMWrB4KWVatIBrKuxECHqip6PfA8fTpaS2RUGVpiEAe+nqDKsLqkViVWxDGreq0lWX71Xth/SPAzXiw==}
+    peerDependencies:
+      react: '>=17'
+      react-dom: '>=17'
+
+  '@xyflow/system@0.0.74':
+    resolution: {integrity: sha512-7v7B/PkiVrkdZzSbL+inGAo6tkR/WQHHG0/jhSvLQToCsfa8YubOGmBYd1s08tpKpihdHDZFwzQZeR69QSBb4Q==}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -2905,6 +2941,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -2972,6 +3011,44 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
@@ -4169,6 +4246,7 @@ packages:
   next@15.5.7:
     resolution: {integrity: sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -5307,6 +5385,42 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod@4.2.1:
+    resolution: {integrity: sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==}
+
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
+  zustand@5.0.9:
+    resolution: {integrity: sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -7506,6 +7620,27 @@ snapshots:
     dependencies:
       '@types/node': 24.10.0
 
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/estree@1.0.8': {}
@@ -7819,6 +7954,29 @@ snapshots:
       '@solana/kit': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       nanostores: 1.0.1
 
+  '@xyflow/react@12.10.0(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@xyflow/system': 0.0.74
+      classcat: 5.0.5
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      zustand: 4.5.7(@types/react@19.2.2)(react@19.2.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+
+  '@xyflow/system@0.0.74':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -8176,6 +8334,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  classcat@5.0.5: {}
+
   client-only@0.0.1: {}
 
   cliui@6.0.0:
@@ -8235,6 +8395,42 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   damerau-levenshtein@1.0.8: {}
 
   data-view-buffer@1.0.2:
@@ -11001,3 +11197,18 @@ snapshots:
       yargs-parser: 21.1.1
 
   yocto-queue@0.1.0: {}
+
+  zod@4.2.1: {}
+
+  zustand@4.5.7(@types/react@19.2.2)(react@19.2.1):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      react: 19.2.1
+
+  zustand@5.0.9(@types/react@19.2.2)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1)):
+    optionalDependencies:
+      '@types/react': 19.2.2
+      react: 19.2.1
+      use-sync-external-store: 1.6.0(react@19.2.1)

From 4ac6d54516b7fbcd32bcf4c51a1f057bd0422c0c Mon Sep 17 00:00:00 2001
From: Steven <sarmiento.steven@gmail.com>
Date: Thu, 18 Dec 2025 02:57:37 -0800
Subject: [PATCH 2/4] feat: add end to end workign implementation of
 transfering, execution, and wallet params, plus batching and connection
 states

---
 examples/next-js/app/builder/layout.tsx       |   7 +
 .../components/builder/builder-canvas.tsx     | 144 +++++++-
 .../components/builder/builder-toolbar.tsx    | 197 ++++++++++-
 .../components/builder/feedback-panel.tsx     |  51 ++-
 .../components/builder/node-inspector.tsx     | 151 ++++++++-
 .../components/builder/node-palette.tsx       |   5 +-
 .../components/builder/nodes/base-node.tsx    |  75 ++++-
 .../next-js/components/builder/nodes/index.ts |   1 +
 .../next-js/components/navigation/app-nav.tsx |   5 +
 examples/next-js/lib/builder/compiler.ts      | 308 ++++++++++++++----
 examples/next-js/lib/builder/index.ts         |  36 +-
 .../next-js/lib/builder/node-definitions.ts   | 103 +++++-
 examples/next-js/lib/builder/store.ts         | 221 ++++++++++++-
 examples/next-js/lib/builder/types.ts         | 144 +++++++-
 .../lib/builder/use-builder-feedback.ts       |  21 +-
 .../next-js/scripts/benchmark-strategies.ts   |   2 +-
 16 files changed, 1335 insertions(+), 136 deletions(-)
 create mode 100644 examples/next-js/app/builder/layout.tsx

diff --git a/examples/next-js/app/builder/layout.tsx b/examples/next-js/app/builder/layout.tsx
new file mode 100644
index 0000000..72784d1
--- /dev/null
+++ b/examples/next-js/app/builder/layout.tsx
@@ -0,0 +1,7 @@
+export default function BuilderLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return <>{children}</>;
+}
diff --git a/examples/next-js/components/builder/builder-canvas.tsx b/examples/next-js/components/builder/builder-canvas.tsx
index 9f12341..bc209c5 100644
--- a/examples/next-js/components/builder/builder-canvas.tsx
+++ b/examples/next-js/components/builder/builder-canvas.tsx
@@ -1,12 +1,16 @@
 'use client';
 
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useMemo } from 'react';
 import {
     ReactFlow,
+    ReactFlowProvider,
     Background,
     Controls,
     MiniMap,
+    Panel,
     addEdge,
+    useReactFlow,
+    useViewport,
     type Connection,
     type ReactFlowInstance,
     BackgroundVariant,
@@ -14,9 +18,92 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
-import { useBuilderStore } from '@/lib/builder/store';
+import { useBuilderStore, useBatchGroups } from '@/lib/builder/store';
 import { nodeTypes } from './nodes';
-import type { NodeType } from '@/lib/builder/types';
+import type { NodeType, BuilderNode } from '@/lib/builder/types';
+import { Plus } from 'lucide-react';
+
+// =============================================================================
+// Batch Group Overlay Component
+// =============================================================================
+
+interface BatchGroupOverlayProps {
+    nodes: BuilderNode[];
+}
+
+/**
+ * Renders dotted-border overlays around batch groups.
+ * Must be rendered inside ReactFlow context to access viewport.
+ */
+function BatchGroupOverlay({ nodes }: BatchGroupOverlayProps) {
+    const batchGroups = useBatchGroups();
+    const viewport = useViewport();
+    
+    if (batchGroups.length === 0) {
+        return null;
+    }
+    
+    return (
+        <Panel position="top-left" className="!m-0 !p-0 pointer-events-none">
+            <div className="absolute inset-0" style={{ width: '100vw', height: '100vh' }}>
+                {batchGroups.map(group => {
+                    // Find all nodes in this batch group
+                    const groupNodes = nodes.filter(n => group.nodeIds.includes(n.id));
+                    if (groupNodes.length < 2) return null;
+                    
+                    // Calculate bounding box with padding
+                    const padding = 12;
+                    const nodeWidth = 140; // Approximate node width
+                    const nodeHeight = 70; // Approximate node height
+                    
+                    let minX = Infinity, minY = Infinity;
+                    let maxX = -Infinity, maxY = -Infinity;
+                    
+                    for (const node of groupNodes) {
+                        minX = Math.min(minX, node.position.x);
+                        minY = Math.min(minY, node.position.y);
+                        maxX = Math.max(maxX, node.position.x + nodeWidth);
+                        maxY = Math.max(maxY, node.position.y + nodeHeight);
+                    }
+                    
+                    // Transform to screen coordinates
+                    const screenX = (minX - padding) * viewport.zoom + viewport.x;
+                    const screenY = (minY - padding) * viewport.zoom + viewport.y;
+                    const screenWidth = (maxX - minX + padding * 2) * viewport.zoom;
+                    const screenHeight = (maxY - minY + padding * 2) * viewport.zoom;
+                    
+                    return (
+                        <div
+                            key={group.id}
+                            className="absolute pointer-events-none"
+                            style={{
+                                left: screenX,
+                                top: screenY,
+                                width: screenWidth,
+                                height: screenHeight,
+                                border: '2px dashed #f59e0b',
+                                borderRadius: Math.max(8, 12 * viewport.zoom),
+                                backgroundColor: 'rgba(245, 158, 11, 0.05)',
+                            }}
+                        >
+                            {/* Batch label */}
+                            <div
+                                className="absolute px-2 py-0.5 font-medium text-amber-600 bg-amber-50 rounded-full border border-amber-200 whitespace-nowrap"
+                                style={{
+                                    top: Math.max(-12, -10 * viewport.zoom),
+                                    left: Math.max(8, 12 * viewport.zoom),
+                                    fontSize: Math.max(9, 10 * viewport.zoom),
+                                }}
+                            >
+                                Batch
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </Panel>
+    );
+}
 
 // =============================================================================
 // Builder Canvas Component
@@ -35,10 +122,31 @@ export function BuilderCanvas() {
     const onEdgesChange = useBuilderStore(state => state.onEdgesChange);
     const selectNode = useBuilderStore(state => state.selectNode);
 
-    // Handle new connections
+    // Handle new connections - style based on handle type
     const onConnect = useCallback(
         (connection: Connection) => {
-            setEdges(addEdge(connection, edges));
+            // Determine if this is a horizontal (batch) connection
+            const isBatchConnection = 
+                connection.sourceHandle?.includes('batch') ||
+                connection.targetHandle?.includes('batch');
+            
+            // Add appropriate styling based on connection type
+            const styledConnection = {
+                ...connection,
+                ...(isBatchConnection ? {
+                    // Horizontal batch edge styling
+                    style: { stroke: '#f59e0b', strokeWidth: 2, strokeDasharray: '5,5' },
+                    animated: true,
+                    type: 'smoothstep',
+                } : {
+                    // Vertical sequential edge styling
+                    style: { stroke: '#94a3b8', strokeWidth: 2 },
+                    animated: true,
+                    type: 'smoothstep',
+                }),
+            };
+            
+            setEdges(addEdge(styledConnection, edges));
         },
         [edges, setEdges]
     );
@@ -89,8 +197,16 @@ export function BuilderCanvas() {
         reactFlowInstance.current = instance;
     }, []);
 
+    // Check if only default nodes exist (wallet + execute, no instruction nodes)
+    const onlyDefaultNodes = useMemo(() => {
+        const instructionNodes = nodes.filter(
+            n => n.type !== 'wallet' && n.type !== 'execute'
+        );
+        return instructionNodes.length === 0;
+    }, [nodes]);
+
     return (
-        <div ref={reactFlowWrapper} className="flex-1 h-full">
+        <div ref={reactFlowWrapper} className="flex-1 h-full relative">
             <ReactFlow
                 nodes={nodes}
                 edges={edges}
@@ -138,6 +254,8 @@ export function BuilderCanvas() {
                                 return '#16a34a';
                             case 'memo':
                                 return '#ea580c';
+                            case 'execute':
+                                return '#6366f1';
                             default:
                                 return '#64748b';
                         }
@@ -146,7 +264,21 @@ export function BuilderCanvas() {
                     pannable
                     zoomable
                 />
+                
+                {/* Batch group overlays */}
+                <BatchGroupOverlay nodes={nodes} />
             </ReactFlow>
+
+            {/* Empty state hint - shown when only default nodes exist */}
+            {onlyDefaultNodes && (
+                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                    <div className="text-center text-gray-400 bg-white/80 backdrop-blur-sm rounded-lg px-6 py-4 border border-dashed border-gray-300">
+                        <Plus className="w-8 h-8 mx-auto mb-2 text-gray-300" />
+                        <p className="text-sm font-medium text-gray-500">Drag instruction nodes here</p>
+                        <p className="text-xs text-gray-400 mt-1">e.g. Transfer SOL, Memo, Token Transfer</p>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/examples/next-js/components/builder/builder-toolbar.tsx b/examples/next-js/components/builder/builder-toolbar.tsx
index 0d4a9e1..7ae2022 100644
--- a/examples/next-js/components/builder/builder-toolbar.tsx
+++ b/examples/next-js/components/builder/builder-toolbar.tsx
@@ -3,8 +3,8 @@
 import { useCallback, useState, useMemo } from 'react';
 import { useCluster } from '@solana/connector';
 import { useBuilderStore, useExecutionState } from '@/lib/builder/store';
-import { compileGraph } from '@/lib/builder/compiler';
-import { TransactionBuilder } from '@pipeit/core';
+import { compileGraph, extractExecutionConfig } from '@/lib/builder/compiler';
+import { TransactionBuilder, JITO_BLOCK_ENGINES } from '@pipeit/core';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import {
@@ -15,8 +15,13 @@ import {
     XCircle,
     Loader2,
     AlertCircle,
+    Rocket,
+    Zap,
+    Shield,
+    ChevronLeft,
 } from 'lucide-react';
-import type { CompileContext } from '@/lib/builder/types';
+import Link from 'next/link';
+import type { CompileContext, JitoRegion } from '@/lib/builder/types';
 
 // =============================================================================
 // Props
@@ -44,14 +49,23 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
     const [simulationResult, setSimulationResult] = useState<{
         success: boolean;
         computeUnits?: number;
+        solTransfer?: string; // SOL amount as formatted string
         error?: string;
     } | null>(null);
 
-    const canExecute = nodes.length > 0 && compileContext !== null;
+    // Count instruction nodes (not wallet or execute - those are structural)
+    const instructionNodeCount = nodes.filter(
+        n => n.type !== 'wallet' && n.type !== 'execute'
+    ).length;
+
+    const canExecute = instructionNodeCount > 0 && compileContext !== null;
     const isExecuting = executionState.status !== 'idle' &&
         executionState.status !== 'success' &&
         executionState.status !== 'error';
 
+    // Extract execution config from Execute node (if present)
+    const executionConfig = useMemo(() => extractExecutionConfig(nodes), [nodes]);
+
     // Build explorer URL based on cluster
     const getExplorerUrl = useMemo(() => {
         return (signature: string) => {
@@ -105,9 +119,20 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
             const result = await builder.simulate();
             console.log('[Builder] Simulation result:', result);
 
+            // Format SOL transfer amount if present
+            let solTransfer: string | undefined;
+            if (compiled.totalSolTransferLamports) {
+                const solAmount = Number(compiled.totalSolTransferLamports) / 1_000_000_000;
+                solTransfer = solAmount.toLocaleString(undefined, { 
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 9 
+                }) + ' SOL';
+            }
+
             setSimulationResult({
                 success: result.err === null,
                 computeUnits: result.unitsConsumed ? Number(result.unitsConsumed) : undefined,
+                solTransfer,
                 error: result.err ? JSON.stringify(result.err) : undefined,
             });
         } catch (error) {
@@ -131,6 +156,25 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
         }
     }, [nodes, edges, compileContext, config]);
 
+    // Submit transaction via TPU API route
+    const submitViaTpu = async (base64Tx: string): Promise<{ delivered: boolean; latencyMs: number }> => {
+        console.log('[Builder] Submitting via TPU API...');
+        const response = await fetch('/api/tpu', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ transaction: base64Tx }),
+        });
+        
+        const result = await response.json();
+        console.log('[Builder] TPU result:', result);
+        
+        if (!response.ok || result.error) {
+            throw new Error(result.error || 'TPU submission failed');
+        }
+        
+        return result;
+    };
+
     // Handle execution
     const handleExecute = useCallback(async () => {
         if (!compileContext) {
@@ -139,6 +183,7 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
         }
 
         console.log('[Builder] Starting execution with', nodes.length, 'nodes');
+        console.log('[Builder] Execution strategy:', executionConfig.strategy);
         setExecutionState({ status: 'compiling' });
         setSimulationResult(null);
 
@@ -157,20 +202,108 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
             setExecutionState({ status: 'signing' });
             console.log('[Builder] Building and signing transaction...');
 
-            const signature = await new TransactionBuilder({
+            // Build execution config based on Execute node settings
+            const builderConfig = {
                 rpc: compileContext.rpc,
                 priorityFee: config.priorityFee,
                 computeUnits: config.computeUnits === 'auto' ? 200_000 : config.computeUnits,
                 autoRetry: { maxAttempts: 3, backoff: 'exponential' },
                 logLevel: 'verbose',
-            })
+            };
+
+            const builder = new TransactionBuilder(builderConfig)
                 .setFeePayerSigner(compileContext.signer)
-                .addInstructions(compiled.instructions)
-                .execute({
-                    rpcSubscriptions: compileContext.rpcSubscriptions,
-                    commitment: 'confirmed',
-                    skipPreflight: false,
-                });
+                .addInstructions(compiled.instructions);
+
+            // For ultra strategy: use TPU direct submission via native QUIC
+            if (executionConfig.strategy === 'ultra' && executionConfig.tpu?.enabled) {
+                console.log('[Builder] Using ULTRA strategy with TPU direct (native QUIC)');
+                
+                // Export signed transaction as base64
+                const exported = await builder.export('base64');
+                const base64Tx = exported?.data as string;
+                if (!base64Tx) {
+                    throw new Error('Failed to export transaction');
+                }
+                console.log('[Builder] Transaction exported, size:', base64Tx.length, 'chars');
+                
+                setExecutionState({ status: 'sending' });
+                
+                // Race TPU submission against standard RPC
+                // TPU sends to validators directly, RPC confirms and returns signature
+                const racePromises: Promise<{ signature: string; via: string }>[] = [];
+                
+                // TPU submission (fast delivery to validators)
+                racePromises.push(
+                    submitViaTpu(base64Tx).then(result => {
+                        console.log('[Builder] TPU delivered:', result.delivered, 'latency:', result.latencyMs, 'ms');
+                        if (!result.delivered) {
+                            throw new Error('TPU delivery failed');
+                        }
+                        // TPU doesn't return signature, will get it from RPC
+                        return { signature: 'tpu-delivered', via: 'tpu' };
+                    })
+                );
+                
+                // Standard RPC submission (to get signature confirmation)
+                racePromises.push(
+                    builder.execute({
+                        rpcSubscriptions: compileContext.rpcSubscriptions,
+                        commitment: 'confirmed',
+                        skipPreflight: true,
+                    }).then(sig => ({ signature: sig, via: 'rpc' }))
+                );
+                
+                // Wait for RPC to confirm (TPU helps it land faster)
+                // We need the signature from RPC
+                const results = await Promise.allSettled(racePromises);
+                const rpcResult = results.find(r => 
+                    r.status === 'fulfilled' && r.value.via === 'rpc'
+                );
+                
+                if (rpcResult && rpcResult.status === 'fulfilled') {
+                    console.log('[Builder] Transaction confirmed via:', rpcResult.value.via);
+                    setExecutionState({ status: 'success', signature: rpcResult.value.signature });
+                } else {
+                    // Fallback: if RPC failed, check if TPU succeeded
+                    const tpuResult = results.find(r => 
+                        r.status === 'fulfilled' && r.value.via === 'tpu'
+                    );
+                    if (tpuResult) {
+                        throw new Error('TPU delivered but RPC confirmation failed. Check explorer.');
+                    }
+                    throw new Error('Both TPU and RPC submission failed');
+                }
+                return;
+            }
+
+            // For other strategies: use TransactionBuilder.execute() directly
+            let executeExecution: {
+                jito?: { enabled: boolean; tipLamports: bigint; blockEngineUrl: string; mevProtection: boolean };
+            } | undefined = undefined;
+
+            // Add Jito config if enabled (economical or fast strategies)
+            if (executionConfig.jito?.enabled) {
+                const region = executionConfig.jito.region as JitoRegion;
+                executeExecution = {
+                    jito: {
+                        enabled: true,
+                        tipLamports: executionConfig.jito.tipLamports,
+                        blockEngineUrl: JITO_BLOCK_ENGINES[region] || JITO_BLOCK_ENGINES.mainnet,
+                        mevProtection: true,
+                    },
+                };
+                console.log('[Builder] Jito enabled with tip:', executionConfig.jito.tipLamports.toString(), 'lamports');
+            }
+
+            setExecutionState({ status: 'sending' });
+
+            const signature = await builder.execute({
+                rpcSubscriptions: compileContext.rpcSubscriptions,
+                commitment: 'confirmed',
+                skipPreflight: false,
+                execution: executeExecution,
+            });
 
             console.log('[Builder] Transaction successful:', signature);
             setExecutionState({ status: 'success', signature });
@@ -194,7 +327,7 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                 error: displayError,
             });
         }
-    }, [nodes, edges, compileContext, config, setExecutionState]);
+    }, [nodes, edges, compileContext, config, executionConfig, setExecutionState]);
 
     // Handle clear
     const handleClear = useCallback(() => {
@@ -206,11 +339,19 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
         <div className="h-14 px-4 border-b border-gray-200 bg-white flex items-center justify-between">
             {/* Left side - title */}
             <div className="flex items-center gap-4">
-                <h1 className="text-lg font-semibold text-gray-900">
-                    Transaction Builder
-                </h1>
+                <div className="flex items-center gap-1">
+                    <Link 
+                        href="/" 
+                        className="p-1 -ml-1 rounded-md hover:bg-gray-100 transition-colors text-gray-500 hover:text-gray-900"
+                    >
+                        <ChevronLeft className="w-5 h-5" />
+                    </Link>
+                    <h1 className="text-lg font-semibold text-gray-900">
+                        Transaction Builder
+                    </h1>
+                </div>
                 <span className="text-sm text-gray-500">
-                    {nodes.length} node{nodes.length !== 1 ? 's' : ''}
+                    {instructionNodeCount} instruction{instructionNodeCount !== 1 ? 's' : ''}
                 </span>
                 {cluster && (
                     <span className={cn(
@@ -224,6 +365,22 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                         {cluster.label || cluster.id?.replace('solana:', '')}
                     </span>
                 )}
+                {/* Execution mode badge */}
+                {executionConfig.strategy !== 'standard' && (
+                    <span className={cn(
+                        'px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1',
+                        executionConfig.strategy === 'economical' && 'bg-blue-100 text-blue-700',
+                        executionConfig.strategy === 'fast' && 'bg-amber-100 text-amber-700',
+                        executionConfig.strategy === 'ultra' && 'bg-purple-100 text-purple-700'
+                    )}>
+                        {executionConfig.strategy === 'economical' && <Shield className="w-3 h-3" />}
+                        {executionConfig.strategy === 'fast' && <Zap className="w-3 h-3" />}
+                        {executionConfig.strategy === 'ultra' && <Rocket className="w-3 h-3" />}
+                        {executionConfig.strategy === 'economical' && 'Jito'}
+                        {executionConfig.strategy === 'fast' && 'Fast'}
+                        {executionConfig.strategy === 'ultra' && 'TPU'}
+                    </span>
+                )}
             </div>
 
             {/* Right side - actions */}
@@ -243,9 +400,13 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                             <>
                                 <CheckCircle className="w-3.5 h-3.5 flex-shrink-0" />
                                 <span>
+                                    {simulationResult.solTransfer && (
+                                        <span className="font-semibold">{simulationResult.solTransfer}</span>
+                                    )}
+                                    {simulationResult.solTransfer && simulationResult.computeUnits && ' · '}
                                     {simulationResult.computeUnits
                                         ? `${simulationResult.computeUnits.toLocaleString()} CU`
-                                        : 'Valid'}
+                                        : !simulationResult.solTransfer ? 'Valid' : ''}
                                 </span>
                             </>
                         ) : (
diff --git a/examples/next-js/components/builder/feedback-panel.tsx b/examples/next-js/components/builder/feedback-panel.tsx
index b5de03c..ca31068 100644
--- a/examples/next-js/components/builder/feedback-panel.tsx
+++ b/examples/next-js/components/builder/feedback-panel.tsx
@@ -13,23 +13,29 @@ interface FeedbackPanelProps {
 }
 
 // =============================================================================
-// Size Meter Component
+// Meter Component
 // =============================================================================
 
-interface SizeMeterProps {
-    size: number;
+interface MeterProps {
+    label: string;
+    labelWidth?: string;
+    value: number;
     limit: number;
     percentUsed: number;
+    suffix?: string;
+    formatValue?: (value: number) => string;
 }
 
-function SizeMeter({ size, limit, percentUsed }: SizeMeterProps) {
+function Meter({ label, labelWidth = 'w-8', value, limit, percentUsed, suffix, formatValue }: MeterProps) {
     const isWarning = percentUsed > 80;
     const isDanger = percentUsed > 95;
+    const formattedValue = formatValue ? formatValue(value) : value.toLocaleString();
+    const formattedLimit = formatValue ? formatValue(limit) : limit.toLocaleString();
 
     return (
         <div className="flex items-center gap-3">
-            <span className="text-xs text-gray-500 w-8">Size</span>
-            <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+            <span className={cn('text-xs text-gray-500', labelWidth)}>{label}</span>
+            <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden min-w-16">
                 <div
                     className={cn(
                         'h-full transition-all duration-300',
@@ -43,14 +49,14 @@ function SizeMeter({ size, limit, percentUsed }: SizeMeterProps) {
                 />
             </div>
             <span className={cn(
-                'text-xs font-mono w-24 text-right',
+                'text-xs font-mono text-right whitespace-nowrap',
                 isDanger
                     ? 'text-red-600'
                     : isWarning
                         ? 'text-yellow-600'
                         : 'text-gray-600'
             )}>
-                {size} / {limit}
+                {formattedValue} / {formattedLimit}{suffix ? ` ${suffix}` : ''}
             </span>
         </div>
     );
@@ -61,7 +67,7 @@ function SizeMeter({ size, limit, percentUsed }: SizeMeterProps) {
 // =============================================================================
 
 export function FeedbackPanel({ feedback }: FeedbackPanelProps) {
-    const { isCompiling, sizeInfo, error } = feedback;
+    const { isCompiling, sizeInfo, computeUnitInfo, error } = feedback;
 
     return (
         <div className="h-10 px-4 border-t border-gray-200 bg-gray-50 flex items-center gap-6">
@@ -73,13 +79,28 @@ export function FeedbackPanel({ feedback }: FeedbackPanelProps) {
                 </div>
             )}
 
-            {/* Size info */}
+            {/* Size meter */}
             {!isCompiling && sizeInfo && (
-                <div className="flex-1 max-w-md">
-                    <SizeMeter
-                        size={sizeInfo.size}
+                <div className="flex-1 max-w-xs">
+                    <Meter
+                        label="Size"
+                        value={sizeInfo.size}
                         limit={sizeInfo.limit}
                         percentUsed={sizeInfo.percentUsed}
+                        suffix="B"
+                    />
+                </div>
+            )}
+
+            {/* CU meter */}
+            {!isCompiling && computeUnitInfo && (
+                <div className="flex-1 max-w-xs">
+                    <Meter
+                        label="CU"
+                        value={computeUnitInfo.estimated}
+                        limit={computeUnitInfo.limit}
+                        percentUsed={computeUnitInfo.percentUsed}
+                        formatValue={(v) => `~${(v / 1000).toFixed(0)}k`}
                     />
                 </div>
             )}
@@ -93,12 +114,12 @@ export function FeedbackPanel({ feedback }: FeedbackPanelProps) {
                     {sizeInfo.canFitMore ? (
                         <>
                             <CheckCircle className="w-3.5 h-3.5" />
-                            <span>Ready to simulate</span>
+                            <span>Ready</span>
                         </>
                     ) : (
                         <>
                             <AlertCircle className="w-3.5 h-3.5" />
-                            <span>Transaction too large</span>
+                            <span>Too large</span>
                         </>
                     )}
                 </div>
diff --git a/examples/next-js/components/builder/node-inspector.tsx b/examples/next-js/components/builder/node-inspector.tsx
index cd5c488..9020cf0 100644
--- a/examples/next-js/components/builder/node-inspector.tsx
+++ b/examples/next-js/components/builder/node-inspector.tsx
@@ -3,9 +3,9 @@
 import { useCallback } from 'react';
 import { cn } from '@/lib/utils';
 import { useBuilderStore } from '@/lib/builder/store';
-import { getNodeDefinition } from '@/lib/builder/node-definitions';
-import type { NodeType, BuilderNodeData } from '@/lib/builder/types';
-import { Trash2, X } from 'lucide-react';
+import { getNodeDefinition, STRATEGY_INFO } from '@/lib/builder/node-definitions';
+import type { NodeType, BuilderNodeData, ExecutionStrategy, JitoRegion } from '@/lib/builder/types';
+import { Trash2, X, Info, Zap, Shield, Rocket } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 // =============================================================================
@@ -66,6 +66,36 @@ function TextAreaField({ label, value, onChange, placeholder, rows = 3 }: TextAr
     );
 }
 
+interface SelectFieldProps<T extends string> {
+    label: string;
+    value: T;
+    onChange: (value: T) => void;
+    options: { value: T; label: string }[];
+}
+
+function SelectField<T extends string>({ label, value, onChange, options }: SelectFieldProps<T>) {
+    return (
+        <div className="space-y-1.5">
+            <label className="text-xs font-medium text-gray-700">{label}</label>
+            <select
+                value={value}
+                onChange={(e) => onChange(e.target.value as T)}
+                className={cn(
+                    'w-full px-3 py-2 text-sm rounded-md border border-gray-300',
+                    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+                    'bg-white'
+                )}
+            >
+                {options.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+}
+
 // =============================================================================
 // Node-Specific Forms
 // =============================================================================
@@ -186,6 +216,120 @@ function MemoForm({ data, onUpdate }: FormProps) {
     );
 }
 
+function ExecuteForm({ data, onUpdate }: FormProps) {
+    const execData = data as {
+        strategy?: ExecutionStrategy;
+        jitoTipLamports?: string;
+        jitoRegion?: JitoRegion;
+        tpuEnabled?: boolean;
+    };
+
+    const strategy = execData.strategy ?? 'standard';
+    // Only show Jito settings for economical and fast (NOT ultra - that's TPU only)
+    const showJitoSettings = strategy === 'economical' || strategy === 'fast';
+    const showTpuSettings = strategy === 'ultra';
+    const strategyInfo = STRATEGY_INFO[strategy];
+
+    const strategyOptions: { value: ExecutionStrategy; label: string }[] = [
+        { value: 'standard', label: 'Standard RPC' },
+        { value: 'economical', label: 'Jito Bundle' },
+        { value: 'fast', label: 'Fast (Jito + RPC)' },
+        { value: 'ultra', label: 'Ultra (TPU Direct)' },
+    ];
+
+    const regionOptions: { value: JitoRegion; label: string }[] = [
+        { value: 'mainnet', label: 'Auto (Load Balanced)' },
+        { value: 'ny', label: 'New York' },
+        { value: 'amsterdam', label: 'Amsterdam' },
+        { value: 'frankfurt', label: 'Frankfurt' },
+        { value: 'tokyo', label: 'Tokyo' },
+        { value: 'singapore', label: 'Singapore' },
+        { value: 'slc', label: 'Salt Lake City' },
+    ];
+
+    // Get icon based on strategy
+    const StrategyIcon = strategy === 'ultra' ? Rocket : strategy === 'fast' ? Zap : strategy === 'economical' ? Shield : Info;
+
+    return (
+        <div className="space-y-4">
+            <SelectField
+                label="Execution Strategy"
+                value={strategy}
+                onChange={(value) => onUpdate({ strategy: value })}
+                options={strategyOptions}
+            />
+
+            {/* Strategy info card */}
+            <div className={cn(
+                'p-3 rounded-lg border',
+                strategy === 'standard' && 'bg-gray-50 border-gray-200',
+                strategy === 'economical' && 'bg-blue-50 border-blue-200',
+                strategy === 'fast' && 'bg-amber-50 border-amber-200',
+                strategy === 'ultra' && 'bg-purple-50 border-purple-200'
+            )}>
+                <div className="flex items-start gap-2">
+                    <StrategyIcon className={cn(
+                        'w-4 h-4 mt-0.5',
+                        strategy === 'standard' && 'text-gray-500',
+                        strategy === 'economical' && 'text-blue-500',
+                        strategy === 'fast' && 'text-amber-500',
+                        strategy === 'ultra' && 'text-purple-500'
+                    )} />
+                    <div className="flex-1">
+                        <p className="text-xs font-medium text-gray-700">
+                            {strategyInfo?.description}
+                        </p>
+                        <ul className="mt-1.5 space-y-0.5">
+                            {strategyInfo?.features.map((feature, i) => (
+                                <li key={i} className="text-xs text-gray-500 flex items-center gap-1">
+                                    <span className="w-1 h-1 rounded-full bg-gray-400" />
+                                    {feature}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* Jito settings */}
+            {showJitoSettings && (
+                <div className="space-y-3 pt-2 border-t border-gray-200">
+                    <p className="text-xs font-medium text-gray-700">Jito Settings</p>
+                    
+                    <TextField
+                        label="Tip Amount (lamports)"
+                        value={execData.jitoTipLamports ?? '10000'}
+                        onChange={(value) => onUpdate({ jitoTipLamports: value })}
+                        placeholder="10000"
+                        type="number"
+                    />
+                    <p className="text-xs text-gray-500">
+                        1 SOL = 1,000,000,000 lamports. Default: 10,000 (0.00001 SOL)
+                    </p>
+
+                    <SelectField
+                        label="Block Engine Region"
+                        value={execData.jitoRegion ?? 'mainnet'}
+                        onChange={(value) => onUpdate({ jitoRegion: value })}
+                        options={regionOptions}
+                    />
+                </div>
+            )}
+
+            {/* TPU info */}
+            {showTpuSettings && (
+                <div className="space-y-2 pt-2 border-t border-gray-200">
+                    <p className="text-xs font-medium text-gray-700">TPU Direct</p>
+                    <p className="text-xs text-gray-500">
+                        Ultra mode sends transactions directly to validator TPU ports for lowest latency.
+                        Requires <code className="px-1 py-0.5 bg-gray-100 rounded text-xs">@pipeit/fastlane</code> package.
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}
+
 // =============================================================================
 // Form Registry
 // =============================================================================
@@ -196,6 +340,7 @@ const formComponents: Record<NodeType, React.ComponentType<FormProps>> = {
     'transfer-token': TransferTokenForm,
     'create-ata': CreateAtaForm,
     'memo': MemoForm,
+    'execute': ExecuteForm,
 };
 
 // =============================================================================
diff --git a/examples/next-js/components/builder/node-palette.tsx b/examples/next-js/components/builder/node-palette.tsx
index 4afa57a..2a937b0 100644
--- a/examples/next-js/components/builder/node-palette.tsx
+++ b/examples/next-js/components/builder/node-palette.tsx
@@ -11,6 +11,7 @@ import {
     PlusCircle,
     MessageSquare,
     GripVertical,
+    Rocket,
 } from 'lucide-react';
 
 // =============================================================================
@@ -23,6 +24,7 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
     'coins': Coins,
     'plus-circle': PlusCircle,
     'message-square': MessageSquare,
+    'rocket': Rocket,
 };
 
 // =============================================================================
@@ -34,9 +36,10 @@ const categoryLabels: Record<NodeCategory, string> = {
     transfer: 'Transfers',
     token: 'Token Operations',
     utility: 'Utilities',
+    execution: 'Execution',
 };
 
-const categoryOrder: NodeCategory[] = ['source', 'transfer', 'token', 'utility'];
+const categoryOrder: NodeCategory[] = ['source', 'transfer', 'token', 'utility', 'execution'];
 
 // =============================================================================
 // Palette Item Component
diff --git a/examples/next-js/components/builder/nodes/base-node.tsx b/examples/next-js/components/builder/nodes/base-node.tsx
index ee6253b..2d1cc63 100644
--- a/examples/next-js/components/builder/nodes/base-node.tsx
+++ b/examples/next-js/components/builder/nodes/base-node.tsx
@@ -3,8 +3,9 @@
 import { memo } from 'react';
 import { Handle, Position } from '@xyflow/react';
 import { cn } from '@/lib/utils';
-import { useBuilderStore } from '@/lib/builder/store';
-import type { BuilderNodeData, NodeType, BuilderNode } from '@/lib/builder/types';
+import { useBuilderStore, useHasAnySequence } from '@/lib/builder/store';
+import type { BuilderNodeData, NodeType } from '@/lib/builder/types';
+import { HANDLE_NAMES } from '@/lib/builder/types';
 import { getNodeDefinition } from '@/lib/builder/node-definitions';
 import {
     Wallet,
@@ -12,6 +13,7 @@ import {
     Coins,
     PlusCircle,
     MessageSquare,
+    Rocket,
 } from 'lucide-react';
 
 // =============================================================================
@@ -24,6 +26,7 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
     'coins': Coins,
     'plus-circle': PlusCircle,
     'message-square': MessageSquare,
+    'rocket': Rocket,
 };
 
 // =============================================================================
@@ -51,6 +54,11 @@ const categoryColors: Record<string, { bg: string; border: string; icon: string
         border: 'border-orange-300',
         icon: 'text-orange-600',
     },
+    execution: {
+        bg: 'bg-gradient-to-r from-indigo-50 to-purple-50',
+        border: 'border-indigo-400',
+        icon: 'text-indigo-600',
+    },
 };
 
 // =============================================================================
@@ -66,12 +74,24 @@ interface BaseNodeProps {
 
 function BaseNodeComponent({ id, data, type, selected }: BaseNodeProps) {
     const selectNode = useBuilderStore(state => state.selectNode);
+    const hasAnySequence = useHasAnySequence();
     const def = getNodeDefinition(type);
     const colors = categoryColors[def.category] ?? categoryColors.utility;
     const IconComponent = iconMap[def.icon] ?? MessageSquare;
 
-    const hasInputs = Object.keys(def.inputs).length > 0;
-    const hasOutputs = Object.keys(def.outputs).length > 0;
+    // Determine if this node type has flow handles
+    const hasFlowIn = HANDLE_NAMES.FLOW_IN in def.inputs;
+    const hasFlowOut = HANDLE_NAMES.FLOW_OUT in def.outputs;
+    
+    // Check if this is an instruction node (not wallet or execute)
+    const isInstructionNode = type !== 'wallet' && type !== 'execute';
+    
+    // Batch handles are shown on ALL instruction nodes if:
+    // 1. The node definition includes them
+    // 2. ANY vertical sequence exists in the graph (progressive disclosure)
+    // Once user builds any flow, all instruction nodes get batch handles
+    const hasBatchHandles = HANDLE_NAMES.BATCH_IN in def.inputs;
+    const showBatchHandles = hasBatchHandles && isInstructionNode && hasAnySequence;
 
     return (
         <div
@@ -83,15 +103,26 @@ function BaseNodeComponent({ id, data, type, selected }: BaseNodeProps) {
             )}
             onClick={() => selectNode(id)}
         >
-            {/* Input handles */}
-            {hasInputs && (
+            {/* Flow Input Handle - TOP (vertical sequential) */}
+            {hasFlowIn && (
                 <Handle
+                    id={HANDLE_NAMES.FLOW_IN}
                     type="target"
-                    position={Position.Left}
+                    position={Position.Top}
                     className="!w-3 !h-3 !bg-gray-400 !border-2 !border-white"
                 />
             )}
 
+            {/* Batch Input Handle - LEFT (horizontal batch) - only visible when in sequence */}
+            {showBatchHandles && (
+                <Handle
+                    id={HANDLE_NAMES.BATCH_IN}
+                    type="target"
+                    position={Position.Left}
+                    className="!w-2.5 !h-2.5 !bg-amber-400 !border-2 !border-white !top-1/2 !-translate-y-1/2"
+                />
+            )}
+
             {/* Node content */}
             <div className="px-3 py-2">
                 {/* Header */}
@@ -106,11 +137,22 @@ function BaseNodeComponent({ id, data, type, selected }: BaseNodeProps) {
                 <NodePreview type={type} data={data} />
             </div>
 
-            {/* Output handles */}
-            {hasOutputs && (
+            {/* Batch Output Handle - RIGHT (horizontal batch) - only visible when in sequence */}
+            {showBatchHandles && (
                 <Handle
+                    id={HANDLE_NAMES.BATCH_OUT}
                     type="source"
                     position={Position.Right}
+                    className="!w-2.5 !h-2.5 !bg-amber-400 !border-2 !border-white !top-1/2 !-translate-y-1/2"
+                />
+            )}
+
+            {/* Flow Output Handle - BOTTOM (vertical sequential) */}
+            {hasFlowOut && (
+                <Handle
+                    id={HANDLE_NAMES.FLOW_OUT}
+                    type="source"
+                    position={Position.Bottom}
                     className="!w-3 !h-3 !bg-gray-400 !border-2 !border-white"
                 />
             )}
@@ -202,6 +244,21 @@ function NodePreview({ type, data }: NodePreviewProps) {
             );
         }
 
+        case 'execute': {
+            const execData = data as { strategy?: string };
+            const strategyLabels: Record<string, string> = {
+                standard: 'Standard RPC',
+                economical: 'Jito Bundle',
+                fast: 'Fast (Jito + RPC)',
+                ultra: 'TPU Direct',
+            };
+            return (
+                <div className="text-[10px] text-gray-500 font-medium">
+                    {strategyLabels[execData.strategy ?? 'standard'] ?? 'Standard'}
+                </div>
+            );
+        }
+
         default:
             return null;
     }
diff --git a/examples/next-js/components/builder/nodes/index.ts b/examples/next-js/components/builder/nodes/index.ts
index 17db767..5abf6cd 100644
--- a/examples/next-js/components/builder/nodes/index.ts
+++ b/examples/next-js/components/builder/nodes/index.ts
@@ -20,6 +20,7 @@ export const nodeTypes: NodeTypes = {
     'transfer-token': BaseNode,
     'create-ata': BaseNode,
     'memo': BaseNode,
+    'execute': BaseNode,
 };
 
 export { BaseNode } from './base-node';
diff --git a/examples/next-js/components/navigation/app-nav.tsx b/examples/next-js/components/navigation/app-nav.tsx
index c35a2db..938cc54 100644
--- a/examples/next-js/components/navigation/app-nav.tsx
+++ b/examples/next-js/components/navigation/app-nav.tsx
@@ -21,6 +21,11 @@ export const AppNav = React.memo(() => {
     const pathname = usePathname();
     const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
 
+    // Hide nav on builder page (it has its own toolbar)
+    if (pathname?.startsWith('/builder')) {
+        return null;
+    }
+
     const toggleMobileMenu = () => {
         setIsMobileMenuOpen(!isMobileMenuOpen);
     };
diff --git a/examples/next-js/lib/builder/compiler.ts b/examples/next-js/lib/builder/compiler.ts
index 09ee0f7..cbaa2d7 100644
--- a/examples/next-js/lib/builder/compiler.ts
+++ b/examples/next-js/lib/builder/compiler.ts
@@ -19,8 +19,65 @@ import type {
     NodeCompileResult,
     Address,
     NodeType,
+    ExecuteNodeData,
+    ExtractedExecutionConfig,
+    BatchGroup,
 } from './types';
+import { isVerticalEdge, isHorizontalEdge, HANDLE_NAMES } from './types';
 import { getNodeDefinition } from './node-definitions';
+import { getBatchGroups } from './store';
+
+// =============================================================================
+// Execution Config Extraction
+// =============================================================================
+
+/**
+ * Extract execution configuration from an Execute node in the graph.
+ * Returns default config if no Execute node is found.
+ */
+export function extractExecutionConfig(nodes: BuilderNode[]): ExtractedExecutionConfig {
+    // Find the execute node
+    const executeNode = nodes.find(node => node.type === 'execute');
+    
+    if (!executeNode) {
+        // Default to standard strategy
+        return {
+            strategy: 'standard',
+        };
+    }
+
+    const data = executeNode.data as ExecuteNodeData;
+    const strategy = data.strategy || 'standard';
+    
+    // Parse Jito tip amount
+    const tipLamports = data.jitoTipLamports 
+        ? BigInt(data.jitoTipLamports) 
+        : BigInt(10_000);
+
+    // Build config based on strategy
+    const config: ExtractedExecutionConfig = {
+        strategy,
+    };
+
+    // Jito is enabled for economical and fast strategies (NOT ultra - that's TPU only)
+    if (strategy === 'economical' || strategy === 'fast') {
+        config.jito = {
+            enabled: true,
+            tipLamports,
+            region: data.jitoRegion || 'mainnet',
+        };
+    }
+
+    // TPU is enabled for ultra strategy (standalone, no Jito)
+    if (strategy === 'ultra') {
+        config.tpu = {
+            enabled: true,
+        };
+    }
+
+    console.log('[Compiler] Extracted execution config:', config);
+    return config;
+}
 
 // =============================================================================
 // Topological Sort
@@ -115,12 +172,91 @@ function resolveInputs(
     return inputs;
 }
 
+// =============================================================================
+// Batch-Aware Compilation
+// =============================================================================
+
+/**
+ * Represents a compilation unit - either a single node or a batch of nodes.
+ * All nodes in a batch are compiled together (same transaction).
+ */
+interface CompilationUnit {
+    type: 'single' | 'batch';
+    nodeIds: string[];
+}
+
+/**
+ * Build compilation units from nodes and edges.
+ * Groups horizontally-connected nodes into batches.
+ */
+function buildCompilationUnits(nodes: BuilderNode[], edges: BuilderEdge[]): CompilationUnit[] {
+    const batchGroups = getBatchGroups(nodes, edges);
+    const nodesInBatch = new Set<string>();
+    
+    // Mark all nodes that are part of a batch
+    for (const group of batchGroups) {
+        for (const nodeId of group.nodeIds) {
+            nodesInBatch.add(nodeId);
+        }
+    }
+    
+    // Get instruction nodes (not wallet or execute)
+    const instructionNodes = nodes.filter(n => n.type !== 'execute' && n.type !== 'wallet');
+    const instructionNodeIds = new Set(instructionNodes.map(n => n.id));
+    
+    // Get vertical edges ONLY between instruction nodes
+    // This is critical: edges from wallet→instruction or instruction→execute
+    // should NOT be included because wallet/execute are not in instructionNodes,
+    // which would cause topoSort to never process them and never decrement inDegree
+    const verticalEdges = edges.filter(isVerticalEdge);
+    const relevantEdges = verticalEdges.filter(
+        e => instructionNodeIds.has(e.source) && instructionNodeIds.has(e.target)
+    );
+    
+    // Build units: batches and single nodes
+    const units: CompilationUnit[] = [];
+    const processedBatches = new Set<string>();
+    
+    // Topologically sort instruction nodes using only inter-instruction edges
+    // If there are no relevant edges (single node connected to wallet/execute),
+    // topoSort will still return all nodes with inDegree=0 (which is all of them)
+    const sortedNodes = topoSort(instructionNodes, relevantEdges);
+    
+    console.log('[Compiler] buildCompilationUnits:', {
+        instructionNodes: instructionNodes.map(n => n.id),
+        relevantEdges: relevantEdges.length,
+        sortedNodes: sortedNodes.map(n => n.id),
+    });
+    
+    for (const node of sortedNodes) {
+        if (nodesInBatch.has(node.id)) {
+            // Find which batch this node belongs to
+            const batch = batchGroups.find(g => g.nodeIds.includes(node.id));
+            if (batch && !processedBatches.has(batch.id)) {
+                processedBatches.add(batch.id);
+                units.push({
+                    type: 'batch',
+                    nodeIds: batch.nodeIds,
+                });
+            }
+        } else {
+            units.push({
+                type: 'single',
+                nodeIds: [node.id],
+            });
+        }
+    }
+    
+    return units;
+}
+
 // =============================================================================
 // Main Compiler
 // =============================================================================
 
 /**
  * Compile a builder graph into Solana instructions.
+ * Handles both sequential (vertical) and batched (horizontal) node arrangements.
  */
 export async function compileGraph(
     nodes: BuilderNode[],
@@ -129,75 +265,112 @@ export async function compileGraph(
 ): Promise<GraphCompileResult> {
     console.log('[Compiler] compileGraph called with', nodes.length, 'nodes');
 
-    // Skip if no nodes
-    if (nodes.length === 0) {
-        console.log('[Compiler] No nodes to compile');
+    // Filter out execute nodes - they're config nodes, not instruction nodes
+    const instructionNodes = nodes.filter(node => node.type !== 'execute');
+    
+    // Skip if no instruction nodes (wallet-only is okay)
+    const actionNodes = instructionNodes.filter(n => n.type !== 'wallet');
+    if (actionNodes.length === 0) {
+        console.log('[Compiler] No action nodes to compile');
         return {
             instructions: [],
         };
     }
 
-    // Sort nodes topologically
-    const sortedNodes = topoSort(nodes, edges);
-    console.log('[Compiler] Sorted nodes:', sortedNodes.map(n => ({ id: n.id, type: n.type })));
+    // Build compilation units (respecting batch groups)
+    const units = buildCompilationUnits(nodes, edges);
+    console.log('[Compiler] Compilation units:', units.map(u => ({
+        type: u.type,
+        nodes: u.nodeIds,
+    })));
 
     // Track outputs from each node
     const nodeOutputs = new Map<string, Record<string, unknown>>();
+    
+    // First, compile the wallet node to get its output
+    const walletNode = nodes.find(n => n.type === 'wallet');
+    if (walletNode) {
+        const walletDef = getNodeDefinition('wallet');
+        const walletResult = await walletDef.compile(walletNode.data, {}, ctx);
+        nodeOutputs.set(walletNode.id, walletResult.outputs);
+    }
 
     // Collect all instructions
     const allInstructions: Instruction[] = [];
     const allALTs: Address[] = [];
     let totalComputeUnits = 0;
-
-    // Compile each node in order
-    for (const node of sortedNodes) {
-        try {
-            console.log('[Compiler] Compiling node:', node.id, 'type:', node.type, 'data:', JSON.stringify(node.data));
-            
-            if (!node.type) {
-                console.error('[Compiler] Node has no type:', node);
-                continue;
-            }
-            
-            const def = getNodeDefinition(node.type as NodeType);
-            const inputs = resolveInputs(node, edges, nodeOutputs, ctx);
-            console.log('[Compiler] Resolved inputs:', inputs);
-
-            const result: NodeCompileResult = await def.compile(
-                node.data,
-                inputs,
-                ctx
-            );
-            console.log('[Compiler] Node result:', result.instructions.length, 'instructions');
-
-            // Store outputs for downstream nodes
-            nodeOutputs.set(node.id, result.outputs);
-
-            // Collect instructions
-            allInstructions.push(...result.instructions);
-
-            // Collect ALTs
-            if (result.addressLookupTables) {
-                allALTs.push(...result.addressLookupTables);
-            }
-
-            // Track compute units
-            if (result.computeUnits) {
-                totalComputeUnits += result.computeUnits;
+    let totalSolTransferLamports = BigInt(0);
+
+    // Compile each unit
+    for (const unit of units) {
+        const unitNodes = unit.nodeIds
+            .map(id => nodes.find(n => n.id === id))
+            .filter((n): n is BuilderNode => n !== undefined);
+        
+        console.log(`[Compiler] Compiling ${unit.type} unit with ${unitNodes.length} nodes`);
+        
+        // Compile all nodes in this unit
+        for (const node of unitNodes) {
+            try {
+                console.log('[Compiler] Compiling node:', node.id, 'type:', node.type);
+                
+                if (!node.type) {
+                    console.error('[Compiler] Node has no type:', node);
+                    continue;
+                }
+                
+                const def = getNodeDefinition(node.type as NodeType);
+                const inputs = resolveInputs(node, edges, nodeOutputs, ctx);
+                console.log('[Compiler] Resolved inputs:', inputs);
+
+                const result: NodeCompileResult = await def.compile(
+                    node.data,
+                    inputs,
+                    ctx
+                );
+                console.log('[Compiler] Node result:', result.instructions.length, 'instructions');
+
+                // Store outputs for downstream nodes
+                nodeOutputs.set(node.id, result.outputs);
+
+                // Collect instructions
+                allInstructions.push(...result.instructions);
+
+                // Collect ALTs
+                if (result.addressLookupTables) {
+                    allALTs.push(...result.addressLookupTables);
+                }
+
+                // Track compute units
+                if (result.computeUnits) {
+                    totalComputeUnits += result.computeUnits;
+                }
+
+                // Track SOL transfers
+                if (result.solTransferLamports) {
+                    totalSolTransferLamports += result.solTransferLamports;
+                }
+            } catch (error) {
+                console.error(`[Compiler] Error compiling node ${node.id}:`, error);
+                throw new Error(
+                    `Failed to compile node "${node.type}": ${error instanceof Error ? error.message : 'Unknown error'}`
+                );
             }
-        } catch (error) {
-            console.error(`[Compiler] Error compiling node ${node.id}:`, error);
-            throw new Error(
-                `Failed to compile node "${node.type}": ${error instanceof Error ? error.message : 'Unknown error'}`
-            );
+        }
+        
+        // Log batch boundaries for debugging
+        if (unit.type === 'batch') {
+            console.log(`[Compiler] Batch compiled: ${unit.nodeIds.length} nodes together`);
         }
     }
 
     console.log('[Compiler] Total instructions:', allInstructions.length);
+    console.log('[Compiler] Total SOL transfer:', Number(totalSolTransferLamports) / 1_000_000_000, 'SOL');
     return {
         instructions: allInstructions,
         computeUnits: totalComputeUnits > 0 ? totalComputeUnits : undefined,
         addressLookupTables: allALTs.length > 0 ? allALTs : undefined,
+        totalSolTransferLamports: totalSolTransferLamports > 0 ? totalSolTransferLamports : undefined,
     };
 }
 
@@ -214,24 +387,39 @@ export function validateGraph(
     edges: BuilderEdge[]
 ): string[] {
     const errors: string[] = [];
+    
+    // Filter out execute nodes for instruction validation
+    const instructionNodes = nodes.filter(node => node.type !== 'execute' && node.type !== 'wallet');
 
-    // Check for empty graph
-    if (nodes.length === 0) {
-        errors.push('Graph is empty - add at least one node');
+    // Check for empty graph (execute-only graph is not useful)
+    if (instructionNodes.length === 0) {
+        errors.push('Graph is empty - add at least one instruction node');
         return errors;
     }
 
-    // Check each node has required data
-    for (const node of nodes) {
+    // Check each instruction node has required data
+    for (const node of instructionNodes) {
         const def = getNodeDefinition(node.type);
 
-        // Check required inputs have sources
+        // Check required inputs have sources (skip flow/batch handles)
         for (const [inputName, inputDef] of Object.entries(def.inputs)) {
+            // Skip flow/batch handles - they're for visual connectivity, not data
+            if (
+                inputName === HANDLE_NAMES.FLOW_IN ||
+                inputName === HANDLE_NAMES.BATCH_IN ||
+                inputName === HANDLE_NAMES.FLOW_OUT ||
+                inputName === HANDLE_NAMES.BATCH_OUT
+            ) {
+                continue;
+            }
+
             const hasEdge = edges.some(
                 e => e.target === node.id && e.targetHandle === inputName
             );
             const hasDefault = inputDef.defaultFromWallet;
 
+            console.log('[Validate] Checking input:', inputName, 'hasEdge:', hasEdge, 'hasDefault:', hasDefault);
+
             if (!hasEdge && !hasDefault) {
                 errors.push(
                     `Node "${node.id}" (${def.label}) is missing required input: ${inputDef.label}`
@@ -239,10 +427,16 @@ export function validateGraph(
             }
         }
     }
-
-    // Check for cycles (topoSort will handle, but we can warn)
-    const sortedLength = topoSort(nodes, edges).length;
-    if (sortedLength !== nodes.length) {
+    
+    console.log('[Validate] Total errors:', errors.length, errors);
+
+    // Check for cycles using only edges between instruction nodes
+    const instructionNodeIds = new Set(instructionNodes.map(n => n.id));
+    const relevantEdges = edges.filter(
+        e => instructionNodeIds.has(e.source) && instructionNodeIds.has(e.target)
+    );
+    const sortedLength = topoSort(instructionNodes, relevantEdges).length;
+    if (sortedLength !== instructionNodes.length) {
         errors.push('Graph contains cycles - remove circular dependencies');
     }
 
diff --git a/examples/next-js/lib/builder/index.ts b/examples/next-js/lib/builder/index.ts
index b845fff..78de572 100644
--- a/examples/next-js/lib/builder/index.ts
+++ b/examples/next-js/lib/builder/index.ts
@@ -18,19 +18,49 @@ export type {
     GraphCompileResult,
     NodeDefinition,
     SizeInfo,
+    ComputeUnitInfo,
     SimulationFeedback,
     BuilderFeedback,
     ExecutionState,
+    ExecutionStrategy,
+    JitoRegion,
+    ExecuteNodeData,
+    ExtractedExecutionConfig,
+    // Batch-related types
+    EdgeDirection,
+    BatchGroup,
+} from './types';
+
+// Type utilities
+export {
+    HANDLE_NAMES,
+    getEdgeDirection,
+    isVerticalEdge,
+    isHorizontalEdge,
 } from './types';
 
 // Store
-export { useBuilderStore, useNodes, useEdges, useSelectedNodeId, useConfig, useExecutionState } from './store';
+export {
+    useBuilderStore,
+    useNodes,
+    useEdges,
+    useSelectedNodeId,
+    useConfig,
+    useExecutionState,
+    // Batch-related selectors
+    useNodesInSequence,
+    useBatchGroups,
+    useHasAnySequence,
+    getNodesInSequence,
+    getBatchGroups,
+    hasAnySequence,
+} from './store';
 
 // Node definitions
-export { nodeDefinitions, getNodeDefinition, getAllNodeDefinitions, getNodeDefinitionsByCategory } from './node-definitions';
+export { nodeDefinitions, getNodeDefinition, getAllNodeDefinitions, getNodeDefinitionsByCategory, STRATEGY_INFO } from './node-definitions';
 
 // Compiler
-export { compileGraph, validateGraph } from './compiler';
+export { compileGraph, validateGraph, extractExecutionConfig } from './compiler';
 
 // Hooks
 export { useBuilderFeedback } from './use-builder-feedback';
diff --git a/examples/next-js/lib/builder/node-definitions.ts b/examples/next-js/lib/builder/node-definitions.ts
index 73b16eb..48a058c 100644
--- a/examples/next-js/lib/builder/node-definitions.ts
+++ b/examples/next-js/lib/builder/node-definitions.ts
@@ -20,9 +20,11 @@ import type {
     TransferTokenNodeData,
     CreateAtaNodeData,
     MemoNodeData,
+    ExecuteNodeData,
     CompileContext,
     NodeCompileResult,
 } from './types';
+import { HANDLE_NAMES } from './types';
 
 // =============================================================================
 // Wallet Node
@@ -39,14 +41,14 @@ export const walletNodeDef: NodeDefinition<WalletNodeData> = {
     },
     inputs: {},
     outputs: {
-        address: { type: 'address', label: 'Address' },
+        [HANDLE_NAMES.FLOW_OUT]: { type: 'any', label: 'Output' },
     },
     compile: async (_data, _inputs, ctx): Promise<NodeCompileResult> => {
         // Wallet node doesn't produce instructions, just provides address
         return {
             instructions: [],
             outputs: {
-                address: ctx.walletAddress,
+                [HANDLE_NAMES.FLOW_OUT]: ctx.walletAddress,
             },
         };
     },
@@ -67,9 +69,13 @@ export const transferSolNodeDef: NodeDefinition<TransferSolNodeData> = {
         destination: '',
     },
     inputs: {
-        source: { type: 'address', label: 'From', defaultFromWallet: true },
+        [HANDLE_NAMES.FLOW_IN]: { type: 'any', label: 'Input' },
+        [HANDLE_NAMES.BATCH_IN]: { type: 'any', label: 'Batch In' },
+    },
+    outputs: {
+        [HANDLE_NAMES.FLOW_OUT]: { type: 'any', label: 'Output' },
+        [HANDLE_NAMES.BATCH_OUT]: { type: 'any', label: 'Batch Out' },
     },
-    outputs: {},
     compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
         if (!data.amount || !data.destination) {
             return { instructions: [], outputs: {} };
@@ -87,6 +93,8 @@ export const transferSolNodeDef: NodeDefinition<TransferSolNodeData> = {
         return {
             instructions: [instruction],
             outputs: {},
+            computeUnits: 300, // SOL transfer is very cheap
+            solTransferLamports: amountLamports,
         };
     },
 };
@@ -108,9 +116,13 @@ export const transferTokenNodeDef: NodeDefinition<TransferTokenNodeData> = {
         decimals: 9,
     },
     inputs: {
-        source: { type: 'address', label: 'From', defaultFromWallet: true },
+        [HANDLE_NAMES.FLOW_IN]: { type: 'any', label: 'Input' },
+        [HANDLE_NAMES.BATCH_IN]: { type: 'any', label: 'Batch In' },
+    },
+    outputs: {
+        [HANDLE_NAMES.FLOW_OUT]: { type: 'any', label: 'Output' },
+        [HANDLE_NAMES.BATCH_OUT]: { type: 'any', label: 'Batch Out' },
     },
-    outputs: {},
     compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
         if (!data.mint || !data.amount || !data.destination) {
             return { instructions: [], outputs: {} };
@@ -151,9 +163,12 @@ export const createAtaNodeDef: NodeDefinition<CreateAtaNodeData> = {
         owner: '',
     },
     inputs: {
-        payer: { type: 'address', label: 'Payer', defaultFromWallet: true },
+        [HANDLE_NAMES.FLOW_IN]: { type: 'any', label: 'Input' },
+        [HANDLE_NAMES.BATCH_IN]: { type: 'any', label: 'Batch In' },
     },
     outputs: {
+        [HANDLE_NAMES.FLOW_OUT]: { type: 'any', label: 'Output' },
+        [HANDLE_NAMES.BATCH_OUT]: { type: 'any', label: 'Batch Out' },
         ata: { type: 'address', label: 'ATA Address' },
     },
     compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
@@ -198,8 +213,14 @@ export const memoNodeDef: NodeDefinition<MemoNodeData> = {
     defaultData: {
         message: '',
     },
-    inputs: {},
-    outputs: {},
+    inputs: {
+        [HANDLE_NAMES.FLOW_IN]: { type: 'any', label: 'Input' },
+        [HANDLE_NAMES.BATCH_IN]: { type: 'any', label: 'Batch In' },
+    },
+    outputs: {
+        [HANDLE_NAMES.FLOW_OUT]: { type: 'any', label: 'Output' },
+        [HANDLE_NAMES.BATCH_OUT]: { type: 'any', label: 'Batch Out' },
+    },
     compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
         if (!data.message) {
             return { instructions: [], outputs: {} };
@@ -220,6 +241,69 @@ export const memoNodeDef: NodeDefinition<MemoNodeData> = {
         return {
             instructions: [instruction],
             outputs: {},
+            computeUnits: 200, // Memo is very cheap
+        };
+    },
+};
+
+// =============================================================================
+// Execute Node
+// =============================================================================
+
+/**
+ * Strategy descriptions for UI display.
+ */
+export const STRATEGY_INFO: Record<string, { label: string; description: string; features: string[] }> = {
+    standard: {
+        label: 'Standard RPC',
+        description: 'Default RPC submission. Simple and reliable.',
+        features: ['No extra cost', 'Works on all clusters', 'Standard confirmation'],
+    },
+    economical: {
+        label: 'Jito Bundle',
+        description: 'MEV-protected bundle submission via Jito.',
+        features: ['MEV protection', 'Configurable tip', 'Mainnet only'],
+    },
+    fast: {
+        label: 'Fast (Jito + RPC)',
+        description: 'Race Jito bundle against parallel RPC submissions.',
+        features: ['Maximum landing probability', 'Jito + RPC race', 'Higher cost'],
+    },
+    ultra: {
+        label: 'Ultra (TPU Direct)',
+        description: 'Direct TPU submission via native QUIC. Fastest possible.',
+        features: ['Lowest latency', 'Native QUIC protocol', 'Requires @pipeit/fastlane'],
+    },
+};
+
+export const executeNodeDef: NodeDefinition<ExecuteNodeData> = {
+    type: 'execute',
+    label: 'Execute',
+    category: 'execution',
+    description: 'Configure how the transaction is submitted',
+    icon: 'rocket',
+    defaultData: {
+        strategy: 'standard',
+        jitoTipLamports: '10000',
+        jitoRegion: 'mainnet',
+        tpuEnabled: false,
+    },
+    inputs: {
+        [HANDLE_NAMES.FLOW_IN]: { type: 'any', label: 'Input' },
+    },
+    outputs: {},
+    compile: async (data, _inputs, _ctx): Promise<NodeCompileResult> => {
+        // Execute node doesn't produce instructions
+        // It's a configuration node that the toolbar reads
+        console.log('[Execute] Strategy configured:', data.strategy);
+        return {
+            instructions: [],
+            outputs: {
+                strategy: data.strategy,
+                jitoTipLamports: data.jitoTipLamports,
+                jitoRegion: data.jitoRegion,
+                tpuEnabled: data.tpuEnabled,
+            },
         };
     },
 };
@@ -237,6 +321,7 @@ export const nodeDefinitions: Record<NodeType, NodeDefinition<any>> = {
     'transfer-token': transferTokenNodeDef,
     'create-ata': createAtaNodeDef,
     'memo': memoNodeDef,
+    'execute': executeNodeDef,
 };
 
 /**
diff --git a/examples/next-js/lib/builder/store.ts b/examples/next-js/lib/builder/store.ts
index 3bf6427..c26306d 100644
--- a/examples/next-js/lib/builder/store.ts
+++ b/examples/next-js/lib/builder/store.ts
@@ -23,7 +23,9 @@ import type {
     NodeType,
     BuilderNodeData,
     ExecutionState,
+    BatchGroup,
 } from './types';
+import { isVerticalEdge, isHorizontalEdge, HANDLE_NAMES } from './types';
 import { getNodeDefinition } from './node-definitions';
 
 // =============================================================================
@@ -81,14 +83,56 @@ const initialConfig: BuilderConfig = {
 
 const initialExecutionState: ExecutionState = { status: 'idle' };
 
+/**
+ * Create the default nodes for a new builder canvas.
+ * Places Wallet at top and Execute at bottom to establish vertical flow.
+ */
+function createDefaultNodes(): BuilderNode[] {
+    const walletDef = getNodeDefinition('wallet');
+    const executeDef = getNodeDefinition('execute');
+
+    return [
+        {
+            id: 'default-wallet',
+            type: 'wallet' as const,
+            position: { x: 300, y: 50 },  // Top center
+            data: { ...walletDef.defaultData } as BuilderNodeData,
+        },
+        {
+            id: 'default-execute',
+            type: 'execute' as const,
+            position: { x: 300, y: 400 }, // Bottom center
+            data: { ...executeDef.defaultData } as BuilderNodeData,
+        },
+    ];
+}
+
+/**
+ * Create the default edge connecting Wallet to Execute.
+ * Shows a dotted animated line to indicate the flow path.
+ */
+function createDefaultEdges(): BuilderEdge[] {
+    return [
+        {
+            id: 'default-edge',
+            source: 'default-wallet',
+            target: 'default-execute',
+            sourceHandle: HANDLE_NAMES.FLOW_OUT,
+            targetHandle: HANDLE_NAMES.FLOW_IN,
+            animated: true,
+            style: { strokeDasharray: '5,5', stroke: '#9ca3af' },
+        },
+    ];
+}
+
 // =============================================================================
 // Store Implementation
 // =============================================================================
 
 export const useBuilderStore = create<BuilderStore>((set, get) => ({
-    // Initial state
-    nodes: [],
-    edges: [],
+    // Initial state - start with Wallet and Execute nodes connected
+    nodes: createDefaultNodes(),
+    edges: createDefaultEdges(),
     selectedNodeId: null,
     config: initialConfig,
     executionState: initialExecutionState,
@@ -105,10 +149,20 @@ export const useBuilderStore = create<BuilderStore>((set, get) => ({
             data: { ...def.defaultData } as BuilderNodeData,
         };
 
-        set(state => ({
-            nodes: [...state.nodes, newNode],
-            selectedNodeId: id,
-        }));
+        set(state => {
+            // Remove the default placeholder edge when adding instruction nodes
+            // (keeps the canvas clean once user starts building)
+            const isInstructionNode = type !== 'wallet' && type !== 'execute';
+            const edges = isInstructionNode 
+                ? state.edges.filter(e => e.id !== 'default-edge')
+                : state.edges;
+
+            return {
+                nodes: [...state.nodes, newNode],
+                edges,
+                selectedNodeId: id,
+            };
+        });
 
         return id;
     },
@@ -232,8 +286,8 @@ export const useBuilderStore = create<BuilderStore>((set, get) => ({
 
     reset: () => {
         set({
-            nodes: [],
-            edges: [],
+            nodes: createDefaultNodes(),
+            edges: createDefaultEdges(),
             selectedNodeId: null,
             config: initialConfig,
             executionState: initialExecutionState,
@@ -250,3 +304,152 @@ export const useEdges = () => useBuilderStore(state => state.edges);
 export const useSelectedNodeId = () => useBuilderStore(state => state.selectedNodeId);
 export const useConfig = () => useBuilderStore(state => state.config);
 export const useExecutionState = () => useBuilderStore(state => state.executionState);
+
+// =============================================================================
+// Batching Selectors
+// =============================================================================
+
+/**
+ * Get the set of node IDs that are part of a vertical sequence.
+ * A node is "in sequence" if it has at least one vertical edge connection.
+ * Only instruction nodes (not wallet/execute) can show batch handles.
+ */
+export function getNodesInSequence(nodes: BuilderNode[], edges: BuilderEdge[]): Set<string> {
+    const inSequence = new Set<string>();
+    
+    // Find all vertical edges
+    const verticalEdges = edges.filter(isVerticalEdge);
+    
+    for (const edge of verticalEdges) {
+        // Check if source or target is an instruction node (not wallet or execute)
+        const sourceNode = nodes.find(n => n.id === edge.source);
+        const targetNode = nodes.find(n => n.id === edge.target);
+        
+        // Only mark instruction nodes as "in sequence"
+        if (sourceNode && sourceNode.type !== 'wallet' && sourceNode.type !== 'execute') {
+            inSequence.add(edge.source);
+        }
+        if (targetNode && targetNode.type !== 'wallet' && targetNode.type !== 'execute') {
+            inSequence.add(edge.target);
+        }
+    }
+    
+    return inSequence;
+}
+
+/**
+ * Hook to get nodes in sequence.
+ */
+export function useNodesInSequence(): Set<string> {
+    const nodes = useBuilderStore(state => state.nodes);
+    const edges = useBuilderStore(state => state.edges);
+    return getNodesInSequence(nodes, edges);
+}
+
+/**
+ * Check if ANY instruction nodes are connected in the graph.
+ * Used to determine if batch handles should be shown on ALL instruction nodes.
+ * Once a user has built any flow, all instruction nodes should show batch handles.
+ */
+export function hasAnySequence(nodes: BuilderNode[], edges: BuilderEdge[]): boolean {
+    const nodesInSequence = getNodesInSequence(nodes, edges);
+    return nodesInSequence.size > 0;
+}
+
+/**
+ * Hook to check if any sequence exists.
+ * When true, ALL instruction nodes should show batch handles.
+ */
+export function useHasAnySequence(): boolean {
+    const nodes = useBuilderStore(state => state.nodes);
+    const edges = useBuilderStore(state => state.edges);
+    return hasAnySequence(nodes, edges);
+}
+
+/**
+ * Compute batch groups from horizontal edges.
+ * Nodes connected horizontally are batched into the same transaction.
+ */
+export function getBatchGroups(nodes: BuilderNode[], edges: BuilderEdge[]): BatchGroup[] {
+    const horizontalEdges = edges.filter(isHorizontalEdge);
+    
+    if (horizontalEdges.length === 0) {
+        return [];
+    }
+    
+    // Use Union-Find to group connected nodes
+    const parent = new Map<string, string>();
+    
+    function find(id: string): string {
+        if (!parent.has(id)) {
+            parent.set(id, id);
+        }
+        if (parent.get(id) !== id) {
+            parent.set(id, find(parent.get(id)!));
+        }
+        return parent.get(id)!;
+    }
+    
+    function union(a: string, b: string) {
+        const rootA = find(a);
+        const rootB = find(b);
+        if (rootA !== rootB) {
+            parent.set(rootB, rootA);
+        }
+    }
+    
+    // Group nodes by horizontal connections
+    for (const edge of horizontalEdges) {
+        union(edge.source, edge.target);
+    }
+    
+    // Collect groups
+    const groups = new Map<string, string[]>();
+    for (const edge of horizontalEdges) {
+        const nodeIds = [edge.source, edge.target];
+        for (const nodeId of nodeIds) {
+            const root = find(nodeId);
+            if (!groups.has(root)) {
+                groups.set(root, []);
+            }
+            const group = groups.get(root)!;
+            if (!group.includes(nodeId)) {
+                group.push(nodeId);
+            }
+        }
+    }
+    
+    // Find anchor node for each group (the one connected to vertical flow)
+    const verticalEdges = edges.filter(isVerticalEdge);
+    const nodesWithVerticalConnection = new Set<string>();
+    for (const edge of verticalEdges) {
+        nodesWithVerticalConnection.add(edge.source);
+        nodesWithVerticalConnection.add(edge.target);
+    }
+    
+    // Convert to BatchGroup array
+    const batchGroups: BatchGroup[] = [];
+    let groupIndex = 0;
+    
+    for (const [_, nodeIds] of groups) {
+        // Find the anchor (node with vertical connection)
+        const anchorNodeId = nodeIds.find(id => nodesWithVerticalConnection.has(id)) ?? nodeIds[0];
+        
+        batchGroups.push({
+            id: `batch-${groupIndex++}`,
+            nodeIds,
+            anchorNodeId,
+        });
+    }
+    
+    return batchGroups;
+}
+
+/**
+ * Hook to get batch groups.
+ */
+export function useBatchGroups(): BatchGroup[] {
+    const nodes = useBuilderStore(state => state.nodes);
+    const edges = useBuilderStore(state => state.edges);
+    return getBatchGroups(nodes, edges);
+}
diff --git a/examples/next-js/lib/builder/types.ts b/examples/next-js/lib/builder/types.ts
index 08e7ed3..678c177 100644
--- a/examples/next-js/lib/builder/types.ts
+++ b/examples/next-js/lib/builder/types.ts
@@ -6,7 +6,12 @@
 
 import type { Node, Edge } from '@xyflow/react';
 import type { Instruction, TransactionSigner, Rpc, RpcSubscriptions } from '@solana/kit';
-import type { PriorityFeeLevel } from '@pipeit/core';
+
+/**
+ * Priority fee level for transaction configuration.
+ * Matches the levels from @pipeit/core.
+ */
+export type PriorityFeeLevel = 'low' | 'medium' | 'high' | 'veryHigh' | 'unsafeMax';
 
 /**
  * Address type alias for Solana addresses.
@@ -25,12 +30,23 @@ export type NodeType =
     | 'transfer-sol'
     | 'transfer-token'
     | 'create-ata'
-    | 'memo';
+    | 'memo'
+    | 'execute';
 
 /**
  * Node categories for the palette.
  */
-export type NodeCategory = 'source' | 'transfer' | 'token' | 'utility';
+export type NodeCategory = 'source' | 'transfer' | 'token' | 'utility' | 'execution';
+
+/**
+ * Execution strategy presets matching @pipeit/core.
+ */
+export type ExecutionStrategy = 'standard' | 'economical' | 'fast' | 'ultra';
+
+/**
+ * Jito block engine regions.
+ */
+export type JitoRegion = 'mainnet' | 'ny' | 'amsterdam' | 'frankfurt' | 'tokyo' | 'singapore' | 'slc';
 
 /**
  * Base type for all node data with index signature for React Flow compatibility.
@@ -79,6 +95,21 @@ export interface MemoNodeData extends BaseNodeData {
     message: string;
 }
 
+/**
+ * Data structure for execute node.
+ * Configures how the transaction should be submitted.
+ */
+export interface ExecuteNodeData extends BaseNodeData {
+    /** Execution strategy preset */
+    strategy: ExecutionStrategy;
+    /** Jito tip amount in lamports (as string for UI input) */
+    jitoTipLamports: string;
+    /** Jito block engine region */
+    jitoRegion: JitoRegion;
+    /** Whether TPU direct submission is enabled (for ultra strategy) */
+    tpuEnabled: boolean;
+}
+
 /**
  * Union of all node data types.
  */
@@ -87,7 +118,8 @@ export type BuilderNodeData =
     | TransferSolNodeData
     | TransferTokenNodeData
     | CreateAtaNodeData
-    | MemoNodeData;
+    | MemoNodeData
+    | ExecuteNodeData;
 
 /**
  * A builder node extending React Flow's Node type.
@@ -160,6 +192,8 @@ export interface NodeCompileResult {
     outputs: Record<string, unknown>;
     computeUnits?: number;
     addressLookupTables?: Address[];
+    /** SOL amount transferred by this node (in lamports) */
+    solTransferLamports?: bigint;
 }
 
 /**
@@ -169,6 +203,8 @@ export interface GraphCompileResult {
     instructions: Instruction[];
     computeUnits?: number;
     addressLookupTables?: Address[];
+    /** Total SOL being transferred across all instructions (in lamports) */
+    totalSolTransferLamports?: bigint;
 }
 
 // =============================================================================
@@ -219,6 +255,18 @@ export interface SimulationFeedback {
     logs?: string[];
 }
 
+/**
+ * Compute unit estimation info.
+ */
+export interface ComputeUnitInfo {
+    /** Estimated compute units from node definitions */
+    estimated: number;
+    /** Max compute units (default limit) */
+    limit: number;
+    /** Percentage of limit used */
+    percentUsed: number;
+}
+
 /**
  * Complete feedback state.
  */
@@ -226,6 +274,7 @@ export interface BuilderFeedback {
     isCompiling: boolean;
     isSimulating: boolean;
     sizeInfo: SizeInfo | null;
+    computeUnitInfo: ComputeUnitInfo | null;
     simulation: SimulationFeedback | null;
     error: string | null;
 }
@@ -234,6 +283,22 @@ export interface BuilderFeedback {
 // Execution Types
 // =============================================================================
 
+/**
+ * Extracted execution configuration from Execute node.
+ * Used by the toolbar to configure TransactionBuilder.
+ */
+export interface ExtractedExecutionConfig {
+    strategy: ExecutionStrategy;
+    jito?: {
+        enabled: boolean;
+        tipLamports: bigint;
+        region: JitoRegion;
+    };
+    tpu?: {
+        enabled: boolean;
+    };
+}
+
 /**
  * Execution state for the builder.
  */
@@ -245,3 +310,74 @@ export type ExecutionState =
     | { status: 'confirming' }
     | { status: 'success'; signature: string }
     | { status: 'error'; error: Error };
+
+// =============================================================================
+// Batching Types
+// =============================================================================
+
+/**
+ * Edge direction for determining sequential vs batched execution.
+ * - vertical: Sequential execution (separate transactions)
+ * - horizontal: Batched execution (same transaction)
+ */
+export type EdgeDirection = 'vertical' | 'horizontal';
+
+/**
+ * Handle types for different connection directions.
+ */
+export const HANDLE_NAMES = {
+    // Vertical flow handles (sequential)
+    FLOW_IN: 'flow-in',
+    FLOW_OUT: 'flow-out',
+    // Horizontal batch handles
+    BATCH_IN: 'batch-in',
+    BATCH_OUT: 'batch-out',
+} as const;
+
+/**
+ * A group of nodes that should be batched into a single transaction.
+ * All nodes in a batch group are connected horizontally.
+ */
+export interface BatchGroup {
+    /** Unique identifier for the batch group */
+    id: string;
+    /** Node IDs in this batch (all executed in same transaction) */
+    nodeIds: string[];
+    /** The "anchor" node - the one connected to the main vertical flow */
+    anchorNodeId: string;
+}
+
+/**
+ * Classify an edge as vertical or horizontal based on handle names.
+ */
+export function getEdgeDirection(edge: BuilderEdge): EdgeDirection {
+    const sourceHandle = edge.sourceHandle ?? '';
+    const targetHandle = edge.targetHandle ?? '';
+    
+    // Horizontal connections use batch handles
+    if (
+        sourceHandle.includes('batch') || 
+        targetHandle.includes('batch') ||
+        sourceHandle === HANDLE_NAMES.BATCH_OUT ||
+        targetHandle === HANDLE_NAMES.BATCH_IN
+    ) {
+        return 'horizontal';
+    }
+    
+    // Default to vertical (flow handles)
+    return 'vertical';
+}
+
+/**
+ * Check if an edge is a vertical (sequential) connection.
+ */
+export function isVerticalEdge(edge: BuilderEdge): boolean {
+    return getEdgeDirection(edge) === 'vertical';
+}
+
+/**
+ * Check if an edge is a horizontal (batch) connection.
+ */
+export function isHorizontalEdge(edge: BuilderEdge): boolean {
+    return getEdgeDirection(edge) === 'horizontal';
+}
diff --git a/examples/next-js/lib/builder/use-builder-feedback.ts b/examples/next-js/lib/builder/use-builder-feedback.ts
index 8f00df4..d8fa957 100644
--- a/examples/next-js/lib/builder/use-builder-feedback.ts
+++ b/examples/next-js/lib/builder/use-builder-feedback.ts
@@ -12,7 +12,7 @@ import { useEffect, useState, useRef, useCallback } from 'react';
 import { TransactionBuilder } from '@pipeit/core';
 import { useBuilderStore } from './store';
 import { compileGraph, validateGraph } from './compiler';
-import type { CompileContext, SizeInfo, BuilderFeedback } from './types';
+import type { CompileContext, SizeInfo, BuilderFeedback, ComputeUnitInfo } from './types';
 
 // =============================================================================
 // Constants
@@ -36,6 +36,7 @@ export function useBuilderFeedback(
         isCompiling: false,
         isSimulating: false,
         sizeInfo: null,
+        computeUnitInfo: null,
         simulation: null,
         error: null,
     });
@@ -51,6 +52,7 @@ export function useBuilderFeedback(
                 isCompiling: false,
                 isSimulating: false,
                 sizeInfo: null,
+                computeUnitInfo: null,
                 simulation: null,
                 error: null,
             });
@@ -65,6 +67,7 @@ export function useBuilderFeedback(
                 isCompiling: false,
                 isSimulating: false,
                 sizeInfo: null,
+                computeUnitInfo: null,
                 simulation: null,
                 error: validationErrors[0],
             });
@@ -83,6 +86,7 @@ export function useBuilderFeedback(
                     isCompiling: false,
                     isSimulating: false,
                     sizeInfo: null,
+                    computeUnitInfo: null,
                     simulation: null,
                     error: 'No instructions generated. Fill in the configuration fields for your nodes.',
                 });
@@ -103,6 +107,19 @@ export function useBuilderFeedback(
             const sizeInfo = await builder.getSizeInfo();
             console.log('[Feedback] Size info:', sizeInfo);
 
+            // Build CU info from compiled estimates
+            const DEFAULT_CU_LIMIT = 200_000;
+            const estimatedCU = compiled.computeUnits ?? 0;
+            const computeUnitInfo: ComputeUnitInfo | null = estimatedCU > 0
+                ? {
+                    estimated: estimatedCU,
+                    limit: DEFAULT_CU_LIMIT,
+                    percentUsed: Math.round((estimatedCU / DEFAULT_CU_LIMIT) * 100),
+                }
+                : null;
+
+            console.log('[Feedback] CU info:', computeUnitInfo);
+
             setFeedback({
                 isCompiling: false,
                 isSimulating: false,
@@ -113,6 +130,7 @@ export function useBuilderFeedback(
                     percentUsed: sizeInfo.percentUsed,
                     canFitMore: sizeInfo.canFitMore,
                 },
+                computeUnitInfo,
                 simulation: null,
                 error: null,
             });
@@ -122,6 +140,7 @@ export function useBuilderFeedback(
                 isCompiling: false,
                 isSimulating: false,
                 sizeInfo: null,
+                computeUnitInfo: null,
                 simulation: null,
                 error: error instanceof Error ? error.message : 'Unknown error',
             });
diff --git a/examples/next-js/scripts/benchmark-strategies.ts b/examples/next-js/scripts/benchmark-strategies.ts
index 1868e81..7404bfb 100644
--- a/examples/next-js/scripts/benchmark-strategies.ts
+++ b/examples/next-js/scripts/benchmark-strategies.ts
@@ -71,7 +71,7 @@ interface BenchmarkResult {
 // Configuration
 // ============================================================================
 
-const TX_COUNT = Number(process.env.TX_COUNT) || 5; // Number of transactions per strategy
+const TX_COUNT = Number(process.env.TX_COUNT) || 40; // Number of transactions per strategy
 const TRANSFER_AMOUNT = BigInt(1000); // 0.000001 SOL - minimal amount for self-transfer
 const BASE_TX_FEE = 0.000005; // Base transaction fee in SOL
 const JITO_TIP_SOL = Number(JITO_DEFAULT_TIP_LAMPORTS) / 1e9;

From b9f6063d20ffd538d458ec21aea2bd994f211529 Mon Sep 17 00:00:00 2001
From: Steven <sarmiento.steven@gmail.com>
Date: Fri, 19 Dec 2025 10:59:45 -0800
Subject: [PATCH 3/4] feat: working tranfer token, swap nodes

---
 .github/workflows/publish.yml                 |    1 +
 .npmrc                                        |    1 +
 examples/next-js/app/builder/layout.tsx       |    1 +
 examples/next-js/app/builder/page.tsx         |    1 +
 .../components/builder/builder-canvas.tsx     |   26 +-
 .../components/builder/builder-toolbar.tsx    |   90 +-
 .../components/builder/feedback-panel.tsx     |    1 +
 examples/next-js/components/builder/index.ts  |    1 +
 .../components/builder/node-inspector.tsx     |  640 +++++++--
 .../components/builder/node-palette.tsx       |    1 +
 .../components/builder/nodes/base-node.tsx    |   56 +-
 .../next-js/components/builder/nodes/index.ts |    2 +
 examples/next-js/components/ui/input.tsx      |   26 +
 examples/next-js/components/ui/label.tsx      |   18 +
 examples/next-js/components/ui/link.tsx       |  158 +++
 examples/next-js/components/ui/popover.tsx    |   42 +
 examples/next-js/components/ui/select.tsx     |  160 +++
 examples/next-js/lib/builder/compiler.ts      |   12 +
 examples/next-js/lib/builder/index.ts         |    1 +
 .../next-js/lib/builder/node-definitions.ts   |  307 ++++-
 examples/next-js/lib/builder/store.ts         |    1 +
 examples/next-js/lib/builder/types.ts         |   55 +-
 .../lib/builder/use-builder-feedback.ts       |    1 +
 examples/next-js/package.json                 |   15 +-
 .../next-js/scripts/benchmark-strategies.ts   |   48 +-
 examples/next-js/tsconfig.json                |   68 +-
 .../core/src/execution/__tests__/jito.test.ts |    1 +
 .../src/execution/__tests__/parallel.test.ts  |    1 +
 .../execution/__tests__/strategies.test.ts    |    1 +
 packages/core/src/execution/index.ts          |    1 +
 packages/core/src/execution/jito.ts           |    1 +
 packages/core/src/execution/parallel.ts       |    1 +
 pnpm-lock.yaml                                | 1167 ++++++++++-------
 33 files changed, 2161 insertions(+), 745 deletions(-)
 create mode 100644 examples/next-js/components/ui/input.tsx
 create mode 100644 examples/next-js/components/ui/label.tsx
 create mode 100644 examples/next-js/components/ui/link.tsx
 create mode 100644 examples/next-js/components/ui/popover.tsx
 create mode 100644 examples/next-js/components/ui/select.tsx

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index b5acf7c..c4bb976 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -71,3 +71,4 @@ jobs:
 
 
 
+
diff --git a/.npmrc b/.npmrc
index 28824a4..a5feec6 100644
--- a/.npmrc
+++ b/.npmrc
@@ -14,3 +14,4 @@
 
 
 
+
diff --git a/examples/next-js/app/builder/layout.tsx b/examples/next-js/app/builder/layout.tsx
index 72784d1..c48eec7 100644
--- a/examples/next-js/app/builder/layout.tsx
+++ b/examples/next-js/app/builder/layout.tsx
@@ -5,3 +5,4 @@ export default function BuilderLayout({
 }) {
     return <>{children}</>;
 }
+
diff --git a/examples/next-js/app/builder/page.tsx b/examples/next-js/app/builder/page.tsx
index 943fb5c..a174d11 100644
--- a/examples/next-js/app/builder/page.tsx
+++ b/examples/next-js/app/builder/page.tsx
@@ -94,3 +94,4 @@ export default function BuilderPage() {
         </ReactFlowProvider>
     );
 }
+
diff --git a/examples/next-js/components/builder/builder-canvas.tsx b/examples/next-js/components/builder/builder-canvas.tsx
index bc209c5..67ad083 100644
--- a/examples/next-js/components/builder/builder-canvas.tsx
+++ b/examples/next-js/components/builder/builder-canvas.tsx
@@ -6,7 +6,6 @@ import {
     ReactFlowProvider,
     Background,
     Controls,
-    MiniMap,
     Panel,
     addEdge,
     useReactFlow,
@@ -228,6 +227,7 @@ export function BuilderCanvas() {
                 }}
                 connectionLineStyle={{ stroke: '#94a3b8', strokeWidth: 2 }}
                 connectionLineType={ConnectionLineType.SmoothStep}
+                proOptions={{ hideAttribution: true }}
             >
                 <Background
                     variant={BackgroundVariant.Dots}
@@ -241,29 +241,6 @@ export function BuilderCanvas() {
                     showInteractive={false}
                     position="bottom-left"
                 />
-                <MiniMap
-                    position="bottom-right"
-                    nodeColor={(node) => {
-                        switch (node.type) {
-                            case 'wallet':
-                                return '#9333ea';
-                            case 'transfer-sol':
-                            case 'transfer-token':
-                                return '#2563eb';
-                            case 'create-ata':
-                                return '#16a34a';
-                            case 'memo':
-                                return '#ea580c';
-                            case 'execute':
-                                return '#6366f1';
-                            default:
-                                return '#64748b';
-                        }
-                    }}
-                    maskColor="rgba(0, 0, 0, 0.1)"
-                    pannable
-                    zoomable
-                />
                 
                 {/* Batch group overlays */}
                 <BatchGroupOverlay nodes={nodes} />
@@ -282,3 +259,4 @@ export function BuilderCanvas() {
         </div>
     );
 }
+
diff --git a/examples/next-js/components/builder/builder-toolbar.tsx b/examples/next-js/components/builder/builder-toolbar.tsx
index 7ae2022..4a1955b 100644
--- a/examples/next-js/components/builder/builder-toolbar.tsx
+++ b/examples/next-js/components/builder/builder-toolbar.tsx
@@ -6,6 +6,7 @@ import { useBuilderStore, useExecutionState } from '@/lib/builder/store';
 import { compileGraph, extractExecutionConfig } from '@/lib/builder/compiler';
 import { TransactionBuilder, JITO_BLOCK_ENGINES } from '@pipeit/core';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
 import {
     Play,
@@ -50,6 +51,7 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
         success: boolean;
         computeUnits?: number;
         solTransfer?: string; // SOL amount as formatted string
+        tokenTransfers?: Array<{ amount: string; symbol: string }>; // Token transfers
         error?: string;
     } | null>(null);
 
@@ -129,10 +131,38 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                 }) + ' SOL';
             }
 
+            // Format token transfers if present
+            let tokenTransfers: Array<{ amount: string; symbol: string }> | undefined;
+            if (compiled.tokenTransfers && compiled.tokenTransfers.length > 0) {
+                // Known token symbols
+                const KNOWN_TOKENS: Record<string, string> = {
+                    'So11111111111111111111111111111111111111112': 'SOL',
+                    'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v': 'USDC',
+                    'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB': 'USDT',
+                };
+                
+                tokenTransfers = compiled.tokenTransfers.map(transfer => {
+                    const displayAmount = Number(transfer.amount) / Math.pow(10, transfer.decimals);
+                    // Use known symbol or truncate mint for display
+                    const symbol = KNOWN_TOKENS[transfer.mint] 
+                        ?? (transfer.mint.length > 10 
+                            ? `${transfer.mint.slice(0, 4)}...${transfer.mint.slice(-4)}`
+                            : transfer.mint);
+                    return {
+                        amount: displayAmount.toLocaleString(undefined, {
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: Math.min(transfer.decimals, 6), // Cap at 6 decimals for readability
+                        }),
+                        symbol,
+                    };
+                });
+            }
+
             setSimulationResult({
                 success: result.err === null,
                 computeUnits: result.unitsConsumed ? Number(result.unitsConsumed) : undefined,
                 solTransfer,
+                tokenTransfers,
                 error: result.err ? JSON.stringify(result.err) : undefined,
             });
         } catch (error) {
@@ -354,32 +384,37 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                     {instructionNodeCount} instruction{instructionNodeCount !== 1 ? 's' : ''}
                 </span>
                 {cluster && (
-                    <span className={cn(
-                        'px-2 py-0.5 rounded text-xs font-medium',
-                        cluster.id?.includes('mainnet') 
-                            ? 'bg-green-100 text-green-700'
-                            : cluster.id?.includes('devnet')
-                                ? 'bg-purple-100 text-purple-700'
-                                : 'bg-gray-100 text-gray-700'
-                    )}>
+                    <Badge 
+                        variant="secondary"
+                        className={cn(
+                            cluster.id?.includes('mainnet') 
+                                ? 'bg-green-100 text-green-700 border-green-200'
+                                : cluster.id?.includes('devnet')
+                                    ? 'bg-purple-100 text-purple-700 border-purple-200'
+                                    : 'bg-gray-100 text-gray-700 border-gray-200'
+                        )}
+                    >
                         {cluster.label || cluster.id?.replace('solana:', '')}
-                    </span>
+                    </Badge>
                 )}
                 {/* Execution mode badge */}
                 {executionConfig.strategy !== 'standard' && (
-                    <span className={cn(
-                        'px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1',
-                        executionConfig.strategy === 'economical' && 'bg-blue-100 text-blue-700',
-                        executionConfig.strategy === 'fast' && 'bg-amber-100 text-amber-700',
-                        executionConfig.strategy === 'ultra' && 'bg-purple-100 text-purple-700'
-                    )}>
+                    <Badge 
+                        variant="secondary"
+                        className={cn(
+                            'flex items-center gap-1',
+                            executionConfig.strategy === 'economical' && 'bg-blue-100 text-blue-700 border-blue-200',
+                            executionConfig.strategy === 'fast' && 'bg-amber-100 text-amber-700 border-amber-200',
+                            executionConfig.strategy === 'ultra' && 'bg-purple-100 text-purple-700 border-purple-200'
+                        )}
+                    >
                         {executionConfig.strategy === 'economical' && <Shield className="w-3 h-3" />}
                         {executionConfig.strategy === 'fast' && <Zap className="w-3 h-3" />}
                         {executionConfig.strategy === 'ultra' && <Rocket className="w-3 h-3" />}
                         {executionConfig.strategy === 'economical' && 'Jito'}
                         {executionConfig.strategy === 'fast' && 'Fast'}
                         {executionConfig.strategy === 'ultra' && 'TPU'}
-                    </span>
+                    </Badge>
                 )}
             </div>
 
@@ -389,7 +424,7 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                 {simulationResult && (
                     <div 
                         className={cn(
-                            'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium max-w-sm',
+                            'flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium max-w-md',
                             simulationResult.success
                                 ? 'bg-green-100 text-green-700'
                                 : 'bg-amber-100 text-amber-700'
@@ -400,13 +435,29 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                             <>
                                 <CheckCircle className="w-3.5 h-3.5 flex-shrink-0" />
                                 <span>
+                                    {/* SOL transfers */}
                                     {simulationResult.solTransfer && (
                                         <span className="font-semibold">{simulationResult.solTransfer}</span>
                                     )}
-                                    {simulationResult.solTransfer && simulationResult.computeUnits && ' · '}
+                                    {/* Token transfers */}
+                                    {simulationResult.tokenTransfers && simulationResult.tokenTransfers.length > 0 && (
+                                        <>
+                                            {simulationResult.solTransfer && ' + '}
+                                            {simulationResult.tokenTransfers.map((t, i) => (
+                                                <span key={i}>
+                                                    {i > 0 && ', '}
+                                                    <span className="font-semibold">{t.amount}</span>
+                                                    <span className="opacity-75 ml-0.5">{t.symbol}</span>
+                                                </span>
+                                            ))}
+                                        </>
+                                    )}
+                                    {/* Separator before CU */}
+                                    {(simulationResult.solTransfer || simulationResult.tokenTransfers) && simulationResult.computeUnits && ' · '}
+                                    {/* Compute units */}
                                     {simulationResult.computeUnits
                                         ? `${simulationResult.computeUnits.toLocaleString()} CU`
-                                        : !simulationResult.solTransfer ? 'Valid' : ''}
+                                        : (!simulationResult.solTransfer && !simulationResult.tokenTransfers) ? 'Valid' : ''}
                                 </span>
                             </>
                         ) : (
@@ -493,3 +544,4 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
         </div>
     );
 }
+
diff --git a/examples/next-js/components/builder/feedback-panel.tsx b/examples/next-js/components/builder/feedback-panel.tsx
index ca31068..5014781 100644
--- a/examples/next-js/components/builder/feedback-panel.tsx
+++ b/examples/next-js/components/builder/feedback-panel.tsx
@@ -142,3 +142,4 @@ export function FeedbackPanel({ feedback }: FeedbackPanelProps) {
         </div>
     );
 }
+
diff --git a/examples/next-js/components/builder/index.ts b/examples/next-js/components/builder/index.ts
index eeb017c..aac200b 100644
--- a/examples/next-js/components/builder/index.ts
+++ b/examples/next-js/components/builder/index.ts
@@ -10,3 +10,4 @@ export { NodePalette } from './node-palette';
 export { NodeInspector } from './node-inspector';
 export { FeedbackPanel } from './feedback-panel';
 export { nodeTypes } from './nodes';
+
diff --git a/examples/next-js/components/builder/node-inspector.tsx b/examples/next-js/components/builder/node-inspector.tsx
index 9020cf0..9fd3a00 100644
--- a/examples/next-js/components/builder/node-inspector.tsx
+++ b/examples/next-js/components/builder/node-inspector.tsx
@@ -3,10 +3,22 @@
 import { useCallback } from 'react';
 import { cn } from '@/lib/utils';
 import { useBuilderStore } from '@/lib/builder/store';
-import { getNodeDefinition, STRATEGY_INFO } from '@/lib/builder/node-definitions';
+import { getNodeDefinition, STRATEGY_INFO, COMMON_TOKENS } from '@/lib/builder/node-definitions';
 import type { NodeType, BuilderNodeData, ExecutionStrategy, JitoRegion } from '@/lib/builder/types';
-import { Trash2, X, Info, Zap, Shield, Rocket } from 'lucide-react';
+import { Trash2, X, Info, Zap, Shield, Rocket, Coins } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TokenListElement } from '@solana/connector/react';
+import { ChevronDown, Check } from 'lucide-react';
 
 // =============================================================================
 // Form Field Components
@@ -23,17 +35,12 @@ interface TextFieldProps {
 function TextField({ label, value, onChange, placeholder, type = 'text' }: TextFieldProps) {
     return (
         <div className="space-y-1.5">
-            <label className="text-xs font-medium text-gray-700">{label}</label>
-            <input
+            <Label className="text-xs">{label}</Label>
+            <Input
                 type={type}
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
                 placeholder={placeholder}
-                className={cn(
-                    'w-full px-3 py-2 text-sm rounded-md border border-gray-300',
-                    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-                    'placeholder:text-gray-400'
-                )}
             />
         </div>
     );
@@ -50,16 +57,18 @@ interface TextAreaFieldProps {
 function TextAreaField({ label, value, onChange, placeholder, rows = 3 }: TextAreaFieldProps) {
     return (
         <div className="space-y-1.5">
-            <label className="text-xs font-medium text-gray-700">{label}</label>
+            <Label className="text-xs">{label}</Label>
             <textarea
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
                 placeholder={placeholder}
                 rows={rows}
                 className={cn(
-                    'w-full px-3 py-2 text-sm rounded-md border border-gray-300',
-                    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-                    'placeholder:text-gray-400 resize-none'
+                    'flex w-full rounded-[12px] border border-input bg-muted px-3 py-2 text-sm shadow-xs',
+                    'placeholder:text-muted-foreground',
+                    'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px]',
+                    'disabled:cursor-not-allowed disabled:opacity-50',
+                    'resize-none'
                 )}
             />
         </div>
@@ -76,22 +85,19 @@ interface SelectFieldProps<T extends string> {
 function SelectField<T extends string>({ label, value, onChange, options }: SelectFieldProps<T>) {
     return (
         <div className="space-y-1.5">
-            <label className="text-xs font-medium text-gray-700">{label}</label>
-            <select
-                value={value}
-                onChange={(e) => onChange(e.target.value as T)}
-                className={cn(
-                    'w-full px-3 py-2 text-sm rounded-md border border-gray-300',
-                    'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
-                    'bg-white'
-                )}
-            >
-                {options.map((opt) => (
-                    <option key={opt.value} value={opt.value}>
-                        {opt.label}
-                    </option>
-                ))}
-            </select>
+            <Label className="text-xs">{label}</Label>
+            <Select value={value} onValueChange={(val: string) => onChange(val as T)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select an option..." />
+                </SelectTrigger>
+                <SelectContent>
+                    {options.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
         </div>
     );
 }
@@ -142,23 +148,163 @@ function TransferTokenForm({ data, onUpdate }: FormProps) {
         amount?: string;
         destination?: string;
         decimals?: number;
+        tokenSymbol?: string;
+        tokenLogo?: string;
+        tokenBalance?: string;
+    };
+
+    // Calculate amount from percentage of balance
+    const setAmountFromPercent = (percent: number) => {
+        const balance = parseFloat(tokenData.tokenBalance ?? '0');
+        if (balance > 0) {
+            const amount = (balance * percent / 100).toString();
+            onUpdate({ amount });
+        }
     };
 
+    const percentPresets = [25, 50, 75, 100] as const;
+
     return (
         <div className="space-y-4">
-            <TextField
-                label="Token Mint Address"
-                value={tokenData.mint ?? ''}
-                onChange={(value) => onUpdate({ mint: value })}
-                placeholder="Enter token mint..."
-            />
-            <TextField
-                label="Amount"
-                value={tokenData.amount ?? ''}
-                onChange={(value) => onUpdate({ amount: value })}
-                placeholder="100"
-                type="number"
-            />
+            {/* Token Selector using TokenListElement */}
+            <div className="space-y-1.5">
+                <Label className="text-xs">Select Token</Label>
+                <TokenListElement
+                    render={({ tokens, isLoading }) => {
+                        if (isLoading) {
+                            return (
+                                <div className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base text-muted-foreground md:text-sm">
+                                    Loading tokens...
+                                </div>
+                            );
+                        }
+
+                        if (tokens.length === 0) {
+                            return (
+                                <div className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base text-muted-foreground md:text-sm">
+                                    No tokens found
+                                </div>
+                            );
+                        }
+
+                        const selectedToken = tokenData.mint ? tokens.find(t => t.mint === tokenData.mint) : null;
+                        const displayLogo = selectedToken?.logo || tokenData.tokenLogo;
+                        const displaySymbol = selectedToken?.symbol || tokenData.tokenSymbol;
+
+                        return (
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <button className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none hover:border-border-medium focus:border-ring focus:ring-ring/30 focus:ring-[3px] transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 md:text-sm">
+                                        <span className="flex items-center gap-2">
+                                            {displayLogo ? (
+                                                <img
+                                                    src={displayLogo}
+                                                    alt={displaySymbol || 'Token'}
+                                                    className="w-5 h-5 rounded-full flex-shrink-0"
+                                                />
+                                            ) : tokenData.mint ? (
+                                                <Coins className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                                            ) : null}
+                                            <span>{displaySymbol || 'Select a token...'}</span>
+                                        </span>
+                                        <ChevronDown className="h-4 w-4 opacity-50" />
+                                    </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent className="w-[280px]" align="start">
+                                    {tokens.map(token => (
+                                        <DropdownMenuItem
+                                            key={token.mint}
+                                            className="py-2 cursor-pointer"
+                                            onClick={() => {
+                                                onUpdate({
+                                                    mint: token.mint,
+                                                    decimals: token.decimals,
+                                                    tokenSymbol: token.symbol,
+                                                    tokenLogo: token.logo,
+                                                    tokenBalance: token.formatted,
+                                                });
+                                            }}
+                                        >
+                                            <div className="flex items-center gap-2 w-full">
+                                                {token.logo ? (
+                                                    <img
+                                                        src={token.logo}
+                                                        alt={token.symbol}
+                                                        className="w-5 h-5 rounded-full flex-shrink-0"
+                                                    />
+                                                ) : (
+                                                    <Coins className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                                                )}
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="font-medium text-sm">{token.symbol}</div>
+                                                    <div className="text-xs text-gray-500 truncate">{token.name}</div>
+                                                </div>
+                                                <div className="text-right ml-2 flex-shrink-0">
+                                                    <div className="text-sm font-mono">{token.formatted}</div>
+                                                </div>
+                                                {tokenData.mint === token.mint && (
+                                                    <Check className="h-4 w-4 text-primary flex-shrink-0" />
+                                                )}
+                                            </div>
+                                        </DropdownMenuItem>
+                                    ))}
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        );
+                    }}
+                />
+            </div>
+
+            {/* Manual mint input as fallback */}
+            <div className="space-y-1.5">
+                <Label className="text-xs">
+                    Or enter mint address manually
+                </Label>
+                <Input
+                    type="text"
+                    value={tokenData.mint ?? ''}
+                    onChange={(e) => onUpdate({ mint: e.target.value, tokenSymbol: undefined, tokenLogo: undefined, tokenBalance: undefined })}
+                    placeholder="Enter token mint..."
+                />
+            </div>
+
+            {/* Amount with percentage presets */}
+            <div className="space-y-1.5">
+                <div className="flex items-center justify-between">
+                    <Label className="text-xs">Amount</Label>
+                    {tokenData.tokenBalance && (
+                        <span className="text-xs text-gray-500">
+                            Balance: {tokenData.tokenBalance}
+                        </span>
+                    )}
+                </div>
+                
+                {/* Percentage presets */}
+                {tokenData.tokenBalance && parseFloat(tokenData.tokenBalance) > 0 && (
+                    <div className="flex gap-1">
+                        {percentPresets.map(percent => (
+                            <Button
+                                key={percent}
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setAmountFromPercent(percent)}
+                                className="flex-1"
+                            >
+                                {percent}%
+                            </Button>
+                        ))}
+                    </div>
+                )}
+
+                <Input
+                    type="number"
+                    value={tokenData.amount ?? ''}
+                    onChange={(e) => onUpdate({ amount: e.target.value })}
+                    placeholder="100"
+                />
+            </div>
+
             <TextField
                 label="Decimals"
                 value={String(tokenData.decimals ?? 9)}
@@ -166,6 +312,7 @@ function TransferTokenForm({ data, onUpdate }: FormProps) {
                 placeholder="9"
                 type="number"
             />
+
             <TextField
                 label="Destination Address"
                 value={tokenData.destination ?? ''}
@@ -176,23 +323,347 @@ function TransferTokenForm({ data, onUpdate }: FormProps) {
     );
 }
 
-function CreateAtaForm({ data, onUpdate }: FormProps) {
-    const ataData = data as { mint?: string; owner?: string };
+/**
+ * Common token options for swap form dropdowns.
+ */
+const TOKEN_OPTIONS = [
+    { value: COMMON_TOKENS.SOL, label: 'SOL' },
+    { value: COMMON_TOKENS.USDC, label: 'USDC' },
+    { value: COMMON_TOKENS.USDT, label: 'USDT' },
+    { value: 'custom', label: 'Custom...' },
+] as const;
+
+/**
+ * Token select field with custom mint input option.
+ */
+function TokenSelectField({
+    label,
+    value,
+    onChange,
+    placeholder,
+}: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}) {
+    // Check if the current value matches a known token
+    const isKnownToken = TOKEN_OPTIONS.some(
+        (opt) => opt.value !== 'custom' && opt.value === value
+    );
+    const showCustomInput = !isKnownToken && value !== '';
+
+    return (
+        <div className="space-y-1.5">
+            <Label className="text-xs">{label}</Label>
+            <Select
+                value={isKnownToken ? value : 'custom'}
+                onValueChange={(selectedValue: string) => {
+                    if (selectedValue === 'custom') {
+                        onChange('');
+                    } else {
+                        onChange(selectedValue);
+                    }
+                }}
+            >
+                <SelectTrigger>
+                    <SelectValue placeholder="Select token..." />
+                </SelectTrigger>
+                <SelectContent>
+                    {TOKEN_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {(showCustomInput || (!isKnownToken && value === '')) && (
+                <Input
+                    type="text"
+                    value={value}
+                    onChange={(e) => onChange(e.target.value)}
+                    placeholder={placeholder ?? 'Enter token mint address...'}
+                    className="mt-1.5"
+                />
+            )}
+        </div>
+    );
+}
+
+function SwapForm({ data, onUpdate }: FormProps) {
+    const swapData = data as {
+        inputMint?: string;
+        outputMint?: string;
+        amount?: string;
+        slippageBps?: number;
+        inputTokenSymbol?: string;
+        inputTokenLogo?: string;
+        inputTokenBalance?: string;
+        inputTokenDecimals?: number;
+        outputTokenSymbol?: string;
+        outputTokenLogo?: string;
+    };
+
+    // Calculate amount from percentage of balance
+    const setAmountFromPercent = (percent: number) => {
+        const balance = parseFloat(swapData.inputTokenBalance ?? '0');
+        if (balance > 0) {
+            const amount = (balance * percent / 100).toString();
+            onUpdate({ amount });
+        }
+    };
+
+    const percentPresets = [25, 50, 75, 100] as const;
 
     return (
         <div className="space-y-4">
-            <TextField
-                label="Token Mint Address"
-                value={ataData.mint ?? ''}
-                onChange={(value) => onUpdate({ mint: value })}
-                placeholder="Enter token mint..."
-            />
-            <TextField
-                label="Owner Address (optional)"
-                value={ataData.owner ?? ''}
-                onChange={(value) => onUpdate({ owner: value })}
-                placeholder="Defaults to your wallet..."
-            />
+            {/* Input Token Selector using TokenListElement */}
+            <div className="space-y-1.5">
+                <Label className="text-xs">From Token</Label>
+                <TokenListElement
+                    render={({ tokens, isLoading }) => {
+                        if (isLoading) {
+                            return (
+                                <div className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base text-muted-foreground md:text-sm">
+                                    Loading tokens...
+                                </div>
+                            );
+                        }
+
+                        if (tokens.length === 0) {
+                            return (
+                                <div className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base text-muted-foreground md:text-sm">
+                                    No tokens found
+                                </div>
+                            );
+                        }
+
+                        const selectedToken = swapData.inputMint ? tokens.find(t => t.mint === swapData.inputMint) : null;
+                        const displayLogo = selectedToken?.logo || swapData.inputTokenLogo;
+                        const displaySymbol = selectedToken?.symbol || swapData.inputTokenSymbol;
+
+                        return (
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <button className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none hover:border-border-medium focus:border-ring focus:ring-ring/30 focus:ring-[3px] transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 md:text-sm">
+                                        <span className="flex items-center gap-2">
+                                            {displayLogo ? (
+                                                <img
+                                                    src={displayLogo}
+                                                    alt={displaySymbol || 'Token'}
+                                                    className="w-5 h-5 rounded-full flex-shrink-0"
+                                                />
+                                            ) : swapData.inputMint ? (
+                                                <Coins className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                                            ) : null}
+                                            <span>{displaySymbol || 'Select input token...'}</span>
+                                        </span>
+                                        <ChevronDown className="h-4 w-4 opacity-50" />
+                                    </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent className="w-[280px]" align="start">
+                                    {tokens.map(token => (
+                                        <DropdownMenuItem
+                                            key={token.mint}
+                                            className="py-2 cursor-pointer"
+                                            onClick={() => {
+                                                onUpdate({
+                                                    inputMint: token.mint,
+                                                    inputTokenSymbol: token.symbol,
+                                                    inputTokenLogo: token.logo,
+                                                    inputTokenBalance: token.formatted,
+                                                    inputTokenDecimals: token.decimals,
+                                                });
+                                            }}
+                                        >
+                                            <div className="flex items-center gap-2 w-full">
+                                                {token.logo ? (
+                                                    <img
+                                                        src={token.logo}
+                                                        alt={token.symbol}
+                                                        className="w-5 h-5 rounded-full flex-shrink-0"
+                                                    />
+                                                ) : (
+                                                    <Coins className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                                                )}
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="font-medium text-sm">{token.symbol}</div>
+                                                    <div className="text-xs text-gray-500 truncate">{token.name}</div>
+                                                </div>
+                                                <div className="text-right ml-2 flex-shrink-0">
+                                                    <div className="text-sm font-mono">{token.formatted}</div>
+                                                </div>
+                                                {swapData.inputMint === token.mint && (
+                                                    <Check className="h-4 w-4 text-primary flex-shrink-0" />
+                                                )}
+                                            </div>
+                                        </DropdownMenuItem>
+                                    ))}
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        );
+                    }}
+                />
+            </div>
+
+            {/* Output Token Selector using TokenListElement */}
+            <div className="space-y-1.5">
+                <Label className="text-xs">To Token</Label>
+                <TokenListElement
+                    render={({ tokens, isLoading }) => {
+                        if (isLoading) {
+                            return (
+                                <div className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base text-muted-foreground md:text-sm">
+                                    Loading tokens...
+                                </div>
+                            );
+                        }
+
+                        if (tokens.length === 0) {
+                            return (
+                                <div className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base text-muted-foreground md:text-sm">
+                                    No tokens found
+                                </div>
+                            );
+                        }
+
+                        const selectedToken = swapData.outputMint ? tokens.find(t => t.mint === swapData.outputMint) : null;
+                        const displayLogo = selectedToken?.logo || swapData.outputTokenLogo;
+                        const displaySymbol = selectedToken?.symbol || swapData.outputTokenSymbol;
+
+                        return (
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <button className="flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none hover:border-border-medium focus:border-ring focus:ring-ring/30 focus:ring-[3px] transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 md:text-sm">
+                                        <span className="flex items-center gap-2">
+                                            {displayLogo ? (
+                                                <img
+                                                    src={displayLogo}
+                                                    alt={displaySymbol || 'Token'}
+                                                    className="w-5 h-5 rounded-full flex-shrink-0"
+                                                />
+                                            ) : swapData.outputMint ? (
+                                                <Coins className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                                            ) : null}
+                                            <span>{displaySymbol || 'Select output token...'}</span>
+                                        </span>
+                                        <ChevronDown className="h-4 w-4 opacity-50" />
+                                    </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent className="w-[280px]" align="start">
+                                    {tokens.map(token => (
+                                        <DropdownMenuItem
+                                            key={token.mint}
+                                            className="py-2 cursor-pointer"
+                                            onClick={() => {
+                                                onUpdate({
+                                                    outputMint: token.mint,
+                                                    outputTokenSymbol: token.symbol,
+                                                    outputTokenLogo: token.logo,
+                                                });
+                                            }}
+                                        >
+                                            <div className="flex items-center gap-2 w-full">
+                                                {token.logo ? (
+                                                    <img
+                                                        src={token.logo}
+                                                        alt={token.symbol}
+                                                        className="w-5 h-5 rounded-full flex-shrink-0"
+                                                    />
+                                                ) : (
+                                                    <Coins className="w-5 h-5 text-gray-500 flex-shrink-0" />
+                                                )}
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="font-medium text-sm">{token.symbol}</div>
+                                                    <div className="text-xs text-gray-500 truncate">{token.name}</div>
+                                                </div>
+                                                <div className="text-right ml-2 flex-shrink-0">
+                                                    <div className="text-sm font-mono">{token.formatted}</div>
+                                                </div>
+                                                {swapData.outputMint === token.mint && (
+                                                    <Check className="h-4 w-4 text-primary flex-shrink-0" />
+                                                )}
+                                            </div>
+                                        </DropdownMenuItem>
+                                    ))}
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        );
+                    }}
+                />
+            </div>
+
+            {/* Amount with percentage presets */}
+            <div className="space-y-1.5">
+                <div className="flex items-center justify-between">
+                    <Label className="text-xs">Amount</Label>
+                    {swapData.inputTokenBalance && (
+                        <span className="text-xs text-gray-500">
+                            Balance: {swapData.inputTokenBalance}
+                        </span>
+                    )}
+                </div>
+                
+                {/* Percentage presets */}
+                {swapData.inputTokenBalance && parseFloat(swapData.inputTokenBalance) > 0 && (
+                    <div className="flex gap-1">
+                        {percentPresets.map(percent => (
+                            <Button
+                                key={percent}
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setAmountFromPercent(percent)}
+                                className="flex-1"
+                            >
+                                {percent}%
+                            </Button>
+                        ))}
+                    </div>
+                )}
+
+                <Input
+                    type="number"
+                    value={swapData.amount ?? ''}
+                    onChange={(e) => onUpdate({ amount: e.target.value })}
+                    placeholder="1.0"
+                />
+            </div>
+
+            <div className="space-y-1.5">
+                <Label className="text-xs">
+                    Slippage Tolerance
+                </Label>
+                <div className="flex items-center gap-2">
+                    <Input
+                        type="number"
+                        value={((swapData.slippageBps ?? 50) / 100).toFixed(2)}
+                        onChange={(e) => {
+                            const percent = parseFloat(e.target.value);
+                            if (!isNaN(percent)) {
+                                onUpdate({ slippageBps: Math.round(percent * 100) });
+                            }
+                        }}
+                        step="0.1"
+                        min="0"
+                        max="50"
+                        className="w-20"
+                    />
+                    <span className="text-sm text-gray-500">%</span>
+                </div>
+                <p className="text-xs text-gray-500">
+                    Default: 0.5%. Higher slippage may result in worse rates.
+                </p>
+            </div>
+
+            {/* Info card */}
+            <Card className="bg-blue-50 border-blue-200">
+                <CardContent className="p-3">
+                    <p className="text-xs text-blue-700">
+                        Swaps are powered by Jupiter. Quote will be fetched at execution time for best rates.
+                    </p>
+                </CardContent>
+            </Card>
         </div>
     );
 }
@@ -260,41 +731,43 @@ function ExecuteForm({ data, onUpdate }: FormProps) {
             />
 
             {/* Strategy info card */}
-            <div className={cn(
-                'p-3 rounded-lg border',
+            <Card className={cn(
+                'rounded-lg',
                 strategy === 'standard' && 'bg-gray-50 border-gray-200',
                 strategy === 'economical' && 'bg-blue-50 border-blue-200',
                 strategy === 'fast' && 'bg-amber-50 border-amber-200',
                 strategy === 'ultra' && 'bg-purple-50 border-purple-200'
             )}>
-                <div className="flex items-start gap-2">
-                    <StrategyIcon className={cn(
-                        'w-4 h-4 mt-0.5',
-                        strategy === 'standard' && 'text-gray-500',
-                        strategy === 'economical' && 'text-blue-500',
-                        strategy === 'fast' && 'text-amber-500',
-                        strategy === 'ultra' && 'text-purple-500'
-                    )} />
-                    <div className="flex-1">
-                        <p className="text-xs font-medium text-gray-700">
-                            {strategyInfo?.description}
-                        </p>
-                        <ul className="mt-1.5 space-y-0.5">
-                            {strategyInfo?.features.map((feature, i) => (
-                                <li key={i} className="text-xs text-gray-500 flex items-center gap-1">
-                                    <span className="w-1 h-1 rounded-full bg-gray-400" />
-                                    {feature}
-                                </li>
-                            ))}
-                        </ul>
+                <CardContent className="p-3">
+                    <div className="flex items-start gap-2">
+                        <StrategyIcon className={cn(
+                            'w-4 h-4 mt-0.5',
+                            strategy === 'standard' && 'text-gray-500',
+                            strategy === 'economical' && 'text-blue-500',
+                            strategy === 'fast' && 'text-amber-500',
+                            strategy === 'ultra' && 'text-purple-500'
+                        )} />
+                        <div className="flex-1">
+                            <p className="text-xs font-medium text-gray-700">
+                                {strategyInfo?.description}
+                            </p>
+                            <ul className="mt-1.5 space-y-0.5">
+                                {strategyInfo?.features.map((feature, i) => (
+                                    <li key={i} className="text-xs text-gray-500 flex items-center gap-1">
+                                        <span className="w-1 h-1 rounded-full bg-gray-400" />
+                                        {feature}
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
                     </div>
-                </div>
-            </div>
+                </CardContent>
+            </Card>
 
             {/* Jito settings */}
             {showJitoSettings && (
                 <div className="space-y-3 pt-2 border-t border-gray-200">
-                    <p className="text-xs font-medium text-gray-700">Jito Settings</p>
+                    <Label className="text-xs">Jito Settings</Label>
                     
                     <TextField
                         label="Tip Amount (lamports)"
@@ -319,7 +792,7 @@ function ExecuteForm({ data, onUpdate }: FormProps) {
             {/* TPU info */}
             {showTpuSettings && (
                 <div className="space-y-2 pt-2 border-t border-gray-200">
-                    <p className="text-xs font-medium text-gray-700">TPU Direct</p>
+                    <Label className="text-xs">TPU Direct</Label>
                     <p className="text-xs text-gray-500">
                         Ultra mode sends transactions directly to validator TPU ports for lowest latency.
                         Requires <code className="px-1 py-0.5 bg-gray-100 rounded text-xs">@pipeit/fastlane</code> package.
@@ -338,7 +811,7 @@ const formComponents: Record<NodeType, React.ComponentType<FormProps>> = {
     'wallet': WalletForm,
     'transfer-sol': TransferSolForm,
     'transfer-token': TransferTokenForm,
-    'create-ata': CreateAtaForm,
+    'swap': SwapForm,
     'memo': MemoForm,
     'execute': ExecuteForm,
 };
@@ -435,3 +908,4 @@ export function NodeInspector() {
         </div>
     );
 }
+
diff --git a/examples/next-js/components/builder/node-palette.tsx b/examples/next-js/components/builder/node-palette.tsx
index 2a937b0..7a92285 100644
--- a/examples/next-js/components/builder/node-palette.tsx
+++ b/examples/next-js/components/builder/node-palette.tsx
@@ -141,3 +141,4 @@ export function NodePalette() {
         </div>
     );
 }
+
diff --git a/examples/next-js/components/builder/nodes/base-node.tsx b/examples/next-js/components/builder/nodes/base-node.tsx
index 2d1cc63..bce5071 100644
--- a/examples/next-js/components/builder/nodes/base-node.tsx
+++ b/examples/next-js/components/builder/nodes/base-node.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 import { useBuilderStore, useHasAnySequence } from '@/lib/builder/store';
 import type { BuilderNodeData, NodeType } from '@/lib/builder/types';
 import { HANDLE_NAMES } from '@/lib/builder/types';
-import { getNodeDefinition } from '@/lib/builder/node-definitions';
+import { getNodeDefinition, COMMON_TOKENS } from '@/lib/builder/node-definitions';
 import {
     Wallet,
     Send,
@@ -160,6 +160,19 @@ function BaseNodeComponent({ id, data, type, selected }: BaseNodeProps) {
     );
 }
 
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+function getDisplaySymbol(mint: string | undefined, tokenSymbol: string | undefined): string | null {
+    if (tokenSymbol) return tokenSymbol;
+    if (!mint) return null;
+    if (mint === COMMON_TOKENS.SOL) return 'SOL';
+    if (mint === COMMON_TOKENS.USDC) return 'USDC';
+    if (mint === COMMON_TOKENS.USDT) return 'USDT';
+    return mint.slice(0, 4) + '...';
+}
+
 // =============================================================================
 // Node Preview (shows key data in the node)
 // =============================================================================
@@ -198,13 +211,19 @@ function NodePreview({ type, data }: NodePreviewProps) {
         }
 
         case 'transfer-token': {
-            const tokenData = data as { amount?: string; mint?: string };
+            const tokenData = data as { amount?: string; mint?: string; tokenSymbol?: string };
             return (
                 <div className="text-[10px] text-gray-500 space-y-0.5">
-                    {tokenData.amount && (
+                    {tokenData.amount && tokenData.tokenSymbol && (
+                        <div>{tokenData.amount} {tokenData.tokenSymbol}</div>
+                    )}
+                    {tokenData.amount && !tokenData.tokenSymbol && (
                         <div>{tokenData.amount} tokens</div>
                     )}
-                    {tokenData.mint && (
+                    {!tokenData.amount && tokenData.tokenSymbol && (
+                        <div>{tokenData.tokenSymbol}</div>
+                    )}
+                    {!tokenData.amount && !tokenData.tokenSymbol && tokenData.mint && (
                         <div className="truncate max-w-[120px]">
                             {tokenData.mint.slice(0, 8)}...
                         </div>
@@ -216,6 +235,34 @@ function NodePreview({ type, data }: NodePreviewProps) {
             );
         }
 
+        case 'swap': {
+            const swapData = data as { 
+                amount?: string; 
+                inputMint?: string; 
+                outputMint?: string;
+                inputTokenSymbol?: string;
+                outputTokenSymbol?: string;
+            };
+            const fromSymbol = getDisplaySymbol(swapData.inputMint, swapData.inputTokenSymbol);
+            const toSymbol = getDisplaySymbol(swapData.outputMint, swapData.outputTokenSymbol);
+            return (
+                <div className="text-[10px] text-gray-500 space-y-0.5">
+                    {swapData.amount && fromSymbol && toSymbol && (
+                        <div>{swapData.amount} {fromSymbol} → {toSymbol}</div>
+                    )}
+                    {swapData.amount && fromSymbol && !toSymbol && (
+                        <div>{swapData.amount} {fromSymbol}</div>
+                    )}
+                    {!swapData.amount && fromSymbol && toSymbol && (
+                        <div>{fromSymbol} → {toSymbol}</div>
+                    )}
+                    {!swapData.amount && !fromSymbol && !toSymbol && (
+                        <div className="italic">Configure...</div>
+                    )}
+                </div>
+            );
+        }
+
         case 'create-ata': {
             const ataData = data as { mint?: string };
             return (
@@ -265,3 +312,4 @@ function NodePreview({ type, data }: NodePreviewProps) {
 }
 
 export const BaseNode = memo(BaseNodeComponent);
+
diff --git a/examples/next-js/components/builder/nodes/index.ts b/examples/next-js/components/builder/nodes/index.ts
index 5abf6cd..ed06515 100644
--- a/examples/next-js/components/builder/nodes/index.ts
+++ b/examples/next-js/components/builder/nodes/index.ts
@@ -18,9 +18,11 @@ export const nodeTypes: NodeTypes = {
     'wallet': BaseNode,
     'transfer-sol': BaseNode,
     'transfer-token': BaseNode,
+    'swap': BaseNode,
     'create-ata': BaseNode,
     'memo': BaseNode,
     'execute': BaseNode,
 };
 
 export { BaseNode } from './base-node';
+
diff --git a/examples/next-js/components/ui/input.tsx b/examples/next-js/components/ui/input.tsx
new file mode 100644
index 0000000..9bf38ef
--- /dev/null
+++ b/examples/next-js/components/ui/input.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithRef<'input'>>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                ref={ref}
+                type={type}
+                data-slot="input"
+                className={cn(
+                    'file:text-foreground placeholder:text-muted-foreground selection:bg-muted selection:text-foreground border-input hover:border-border-medium flex max-h-11 h-11 w-full min-w-0 rounded-[12px] border bg-muted px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                    'focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px] transition-all duration-200 ease-in-out',
+                    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+                    className,
+                )}
+                {...props}
+            />
+        );
+    },
+);
+
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/examples/next-js/components/ui/label.tsx b/examples/next-js/components/ui/label.tsx
new file mode 100644
index 0000000..a7d5767
--- /dev/null
+++ b/examples/next-js/components/ui/label.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+function Label({
+    className,
+    ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>) {
+    return <LabelPrimitive.Root data-slot="label" className={cn(labelVariants(), className)} {...props} />;
+}
+
+export { Label };
diff --git a/examples/next-js/components/ui/link.tsx b/examples/next-js/components/ui/link.tsx
new file mode 100644
index 0000000..18b90dc
--- /dev/null
+++ b/examples/next-js/components/ui/link.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import NextLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+type PrefetchImage = {
+    srcset: string;
+    sizes: string;
+    src: string;
+    alt: string;
+    loading: string;
+};
+
+function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function prefetchImages(href: string) {
+    if (!href.startsWith('/') || href.startsWith('/order') || href === '/') {
+        return [];
+    }
+    try {
+        // Ensure the pathname is properly encoded
+        const url = new URL(href, window.location.href);
+        const encodedPath = url.pathname
+            .split('/')
+            .map(segment => encodeURIComponent(segment))
+            .join('/');
+
+        const response = await fetch(`/api/prefetch-images${encodedPath}`, {
+            priority: 'low',
+        });
+
+        if (!response.ok) {
+            return [];
+        }
+
+        const { images } = await response.json();
+        return images as PrefetchImage[];
+    } catch {
+        return [];
+    }
+}
+
+const seen = new Set<string>();
+
+export const Link: typeof NextLink = (({ children, ...props }) => {
+    const [images, setImages] = useState<PrefetchImage[]>([]);
+    const [preloading, setPreloading] = useState<(() => void)[]>([]);
+    const linkRef = useRef<HTMLAnchorElement>(null);
+    const prefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (props.prefetch === false) {
+            return;
+        }
+
+        const linkElement = linkRef.current;
+        if (!linkElement) return;
+
+        const observer = new IntersectionObserver(
+            entries => {
+                const entry = entries[0];
+                if (entry.isIntersecting) {
+                    // Set a timeout to trigger prefetch after 300ms
+                    prefetchTimeoutRef.current = setTimeout(async () => {
+                        router.prefetch(String(props.href));
+                        await sleep(0); // We want the doc prefetches to happen first.
+                        void prefetchImages(String(props.href)).then(images => {
+                            setImages(images);
+                        });
+                        // Stop observing once images are prefetched
+                        observer.unobserve(entry.target);
+                    }, 300); // 300ms delay
+                } else if (prefetchTimeoutRef.current) {
+                    // If the element leaves the viewport before 300ms, cancel the prefetch
+                    clearTimeout(prefetchTimeoutRef.current);
+                    prefetchTimeoutRef.current = null;
+                }
+            },
+            { rootMargin: '0px', threshold: 0.1 }, // Trigger when at least 10% is visible
+        );
+
+        observer.observe(linkElement);
+
+        return () => {
+            observer.disconnect(); // Cleanup the observer when the component unmounts
+            if (prefetchTimeoutRef.current) {
+                clearTimeout(prefetchTimeoutRef.current); // Clear any pending timeouts when component unmounts
+            }
+        };
+    }, [props.href, props.prefetch, router]);
+
+    return (
+        <NextLink
+            ref={linkRef}
+            prefetch={false}
+            onMouseEnter={() => {
+                router.prefetch(String(props.href));
+                if (preloading.length) return;
+                const p: (() => void)[] = [];
+                for (const image of images) {
+                    const remove = prefetchImage(image);
+                    if (remove) p.push(remove);
+                }
+                setPreloading(p);
+            }}
+            onMouseLeave={() => {
+                for (const remove of preloading) {
+                    remove();
+                }
+                setPreloading([]);
+            }}
+            onMouseDown={e => {
+                const url = new URL(String(props.href), window.location.href);
+                if (
+                    url.origin === window.location.origin &&
+                    e.button === 0 &&
+                    !e.altKey &&
+                    !e.ctrlKey &&
+                    !e.metaKey &&
+                    !e.shiftKey
+                ) {
+                    e.preventDefault();
+                    router.push(String(props.href));
+                }
+            }}
+            {...props}
+        >
+            {children}
+        </NextLink>
+    );
+}) as typeof NextLink;
+
+function prefetchImage(image: PrefetchImage) {
+    if (image.loading === 'lazy' || seen.has(image.srcset)) {
+        return;
+    }
+    const img = new Image();
+    img.decoding = 'async';
+    img.fetchPriority = 'low';
+    img.sizes = image.sizes;
+    seen.add(image.srcset);
+    img.srcset = image.srcset;
+    img.src = image.src;
+    img.alt = image.alt;
+    let done = false;
+    img.onload = img.onerror = () => {
+        done = true;
+    };
+    return () => {
+        if (done) return;
+        img.src = img.srcset = '';
+        seen.delete(image.srcset);
+    };
+}
diff --git a/examples/next-js/components/ui/popover.tsx b/examples/next-js/components/ui/popover.tsx
new file mode 100644
index 0000000..ba17359
--- /dev/null
+++ b/examples/next-js/components/ui/popover.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+    className,
+    align = 'center',
+    sideOffset = 4,
+    ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+    return (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                data-slot="popover-content"
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    'bg-white text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-black/20 p-4 shadow-md outline-none',
+                    className,
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+    return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/examples/next-js/components/ui/select.tsx b/examples/next-js/components/ui/select.tsx
new file mode 100644
index 0000000..04224af
--- /dev/null
+++ b/examples/next-js/components/ui/select.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Value>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Value
+        ref={ref}
+        className={cn(
+            '[&_img]:hidden [&_svg]:hidden',
+            '[&[data-select-visual]]:hidden',
+            '[&>div[data-select-visual]]:hidden',
+            className
+        )}
+        {...props}
+    />
+));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
+
+const SelectTrigger = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            'flex h-11 w-full items-center justify-between rounded-[12px] border border-input bg-muted px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none hover:border-border-medium focus:border-ring focus:ring-ring/30 focus:ring-[3px] transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1',
+            className,
+        )}
+        {...props}
+    >
+        {children}
+        <SelectPrimitive.Icon asChild>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+    >
+        <ChevronUp className="h-4 w-4" />
+    </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+    >
+        <ChevronDown className="h-4 w-4" />
+    </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+                'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                position === 'popper' &&
+                    'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                className,
+            )}
+            position={position}
+            {...props}
+        >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+                className={cn(
+                    'p-1',
+                    position === 'popper' &&
+                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+                )}
+            >
+                {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className,
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <SelectPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </SelectPrimitive.ItemIndicator>
+        </span>
+
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+};
diff --git a/examples/next-js/lib/builder/compiler.ts b/examples/next-js/lib/builder/compiler.ts
index cbaa2d7..84f7035 100644
--- a/examples/next-js/lib/builder/compiler.ts
+++ b/examples/next-js/lib/builder/compiler.ts
@@ -22,6 +22,7 @@ import type {
     ExecuteNodeData,
     ExtractedExecutionConfig,
     BatchGroup,
+    TokenTransferInfo,
 } from './types';
 import { isVerticalEdge, isHorizontalEdge, HANDLE_NAMES } from './types';
 import { getNodeDefinition } from './node-definitions';
@@ -298,6 +299,7 @@ export async function compileGraph(
     // Collect all instructions
     const allInstructions: Instruction[] = [];
     const allALTs: Address[] = [];
+    const allTokenTransfers: TokenTransferInfo[] = [];
     let totalComputeUnits = 0;
     let totalSolTransferLamports = BigInt(0);
 
@@ -350,6 +352,11 @@ export async function compileGraph(
                 if (result.solTransferLamports) {
                     totalSolTransferLamports += result.solTransferLamports;
                 }
+
+                // Track token transfers
+                if (result.tokenTransfer) {
+                    allTokenTransfers.push(result.tokenTransfer);
+                }
             } catch (error) {
                 console.error(`[Compiler] Error compiling node ${node.id}:`, error);
                 throw new Error(
@@ -366,11 +373,15 @@ export async function compileGraph(
 
     console.log('[Compiler] Total instructions:', allInstructions.length);
     console.log('[Compiler] Total SOL transfer:', Number(totalSolTransferLamports) / 1_000_000_000, 'SOL');
+    if (allTokenTransfers.length > 0) {
+        console.log('[Compiler] Token transfers:', allTokenTransfers.length);
+    }
     return {
         instructions: allInstructions,
         computeUnits: totalComputeUnits > 0 ? totalComputeUnits : undefined,
         addressLookupTables: allALTs.length > 0 ? allALTs : undefined,
         totalSolTransferLamports: totalSolTransferLamports > 0 ? totalSolTransferLamports : undefined,
+        tokenTransfers: allTokenTransfers.length > 0 ? allTokenTransfers : undefined,
     };
 }
 
@@ -442,3 +453,4 @@ export function validateGraph(
 
     return errors;
 }
+
diff --git a/examples/next-js/lib/builder/index.ts b/examples/next-js/lib/builder/index.ts
index 78de572..b84bb32 100644
--- a/examples/next-js/lib/builder/index.ts
+++ b/examples/next-js/lib/builder/index.ts
@@ -64,3 +64,4 @@ export { compileGraph, validateGraph, extractExecutionConfig } from './compiler'
 
 // Hooks
 export { useBuilderFeedback } from './use-builder-feedback';
+
diff --git a/examples/next-js/lib/builder/node-definitions.ts b/examples/next-js/lib/builder/node-definitions.ts
index 48a058c..1d41b64 100644
--- a/examples/next-js/lib/builder/node-definitions.ts
+++ b/examples/next-js/lib/builder/node-definitions.ts
@@ -10,15 +10,16 @@
  * @packageDocumentation
  */
 
-import { address, lamports } from '@solana/kit';
+import { address, lamports, getProgramDerivedAddress, getAddressEncoder } from '@solana/kit';
 import { getTransferSolInstruction } from '@solana-program/system';
+import { getTransferInstruction, TOKEN_PROGRAM_ADDRESS } from '@solana-program/token';
 import type {
     NodeDefinition,
     NodeType,
     WalletNodeData,
     TransferSolNodeData,
     TransferTokenNodeData,
-    CreateAtaNodeData,
+    SwapNodeData,
     MemoNodeData,
     ExecuteNodeData,
     CompileContext,
@@ -103,6 +104,28 @@ export const transferSolNodeDef: NodeDefinition<TransferSolNodeData> = {
 // Transfer Token Node
 // =============================================================================
 
+/**
+ * Associated Token Account Program address.
+ */
+const ASSOCIATED_TOKEN_PROGRAM_ADDRESS = 'ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL';
+
+/**
+ * Derives the Associated Token Address (ATA) for a given owner and mint.
+ * ATAs are PDAs derived from: [owner, token_program, mint]
+ */
+async function getAssociatedTokenAddress(owner: string, mint: string): Promise<string> {
+    const addressEncoder = getAddressEncoder();
+    const [ata] = await getProgramDerivedAddress({
+        programAddress: address(ASSOCIATED_TOKEN_PROGRAM_ADDRESS),
+        seeds: [
+            addressEncoder.encode(address(owner)),
+            addressEncoder.encode(address(TOKEN_PROGRAM_ADDRESS)),
+            addressEncoder.encode(address(mint)),
+        ],
+    });
+    return ata;
+}
+
 export const transferTokenNodeDef: NodeDefinition<TransferTokenNodeData> = {
     type: 'transfer-token',
     label: 'Transfer Token',
@@ -128,39 +151,116 @@ export const transferTokenNodeDef: NodeDefinition<TransferTokenNodeData> = {
             return { instructions: [], outputs: {} };
         }
 
-        // For now, return empty - full SPL token transfer requires:
-        // 1. Getting/creating source ATA
-        // 2. Getting/creating destination ATA
-        // 3. Transfer instruction
-        // This will be enhanced in a future iteration
-        console.log('[TransferToken] Would transfer:', {
-            mint: data.mint,
-            amount: data.amount,
-            destination: data.destination,
-            from: ctx.walletAddress,
-        });
+        const amount = parseFloat(data.amount);
+        if (isNaN(amount) || amount <= 0) {
+            return { instructions: [], outputs: {} };
+        }
 
-        return {
-            instructions: [],
-            outputs: {},
-            computeUnits: 50_000, // Estimate for token transfer
-        };
+        try {
+            // Derive source and destination ATAs
+            const [sourceAta, destinationAta] = await Promise.all([
+                getAssociatedTokenAddress(ctx.walletAddress, data.mint),
+                getAssociatedTokenAddress(data.destination, data.mint),
+            ]);
+
+            console.log('[TransferToken] Derived ATAs:', {
+                source: sourceAta,
+                destination: destinationAta,
+            });
+
+            // Convert amount to smallest units using decimals
+            const amountInSmallestUnits = BigInt(
+                Math.floor(amount * Math.pow(10, data.decimals))
+            );
+
+            // Create transfer instruction
+            const instruction = getTransferInstruction({
+                source: address(sourceAta),
+                destination: address(destinationAta),
+                authority: ctx.signer,
+                amount: amountInSmallestUnits,
+            });
+
+            console.log('[TransferToken] Transfer instruction created:', {
+                mint: data.mint,
+                amount: amountInSmallestUnits.toString(),
+                from: ctx.walletAddress,
+                to: data.destination,
+            });
+
+            return {
+                instructions: [instruction],
+                outputs: {
+                    amount: amountInSmallestUnits,
+                    mint: data.mint,
+                    destination: data.destination,
+                },
+                computeUnits: 30_000, // Token transfer typically uses ~20-30k CU
+                tokenTransfer: {
+                    mint: data.mint,
+                    amount: amountInSmallestUnits,
+                    decimals: data.decimals,
+                    destination: data.destination,
+                },
+            };
+        } catch (error) {
+            console.error('[TransferToken] Error creating transfer instruction:', error);
+            return { instructions: [], outputs: {} };
+        }
     },
 };
 
 // =============================================================================
-// Create ATA Node
+// Swap Node (Jupiter)
 // =============================================================================
 
-export const createAtaNodeDef: NodeDefinition<CreateAtaNodeData> = {
-    type: 'create-ata',
-    label: 'Create ATA',
-    category: 'token',
-    description: 'Create an Associated Token Account',
-    icon: 'plus-circle',
+/**
+ * Common token mints for convenience.
+ */
+export const COMMON_TOKENS = {
+    SOL: 'So11111111111111111111111111111111111111112',
+    USDC: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+    USDT: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB',
+} as const;
+
+/**
+ * Known token decimals for display formatting.
+ */
+const TOKEN_DECIMALS: Record<string, number> = {
+    [COMMON_TOKENS.SOL]: 9,
+    [COMMON_TOKENS.USDC]: 6,
+    [COMMON_TOKENS.USDT]: 6,
+};
+
+/**
+ * Get token symbol for known tokens.
+ */
+function getTokenSymbol(mint: string): string {
+    if (mint === COMMON_TOKENS.SOL) return 'SOL';
+    if (mint === COMMON_TOKENS.USDC) return 'USDC';
+    if (mint === COMMON_TOKENS.USDT) return 'USDT';
+    // Truncate unknown mints
+    return mint.length > 10 ? `${mint.slice(0, 4)}...${mint.slice(-4)}` : mint;
+}
+
+/**
+ * Get decimals for a token (defaults to 9 for unknown tokens).
+ */
+function getTokenDecimals(mint: string): number {
+    return TOKEN_DECIMALS[mint] ?? 9;
+}
+
+export const swapNodeDef: NodeDefinition<SwapNodeData> = {
+    type: 'swap',
+    label: 'Swap',
+    category: 'transfer',
+    description: 'Swap tokens via Jupiter',
+    icon: 'arrow-left-right',
     defaultData: {
-        mint: '',
-        owner: '',
+        inputMint: COMMON_TOKENS.SOL,
+        outputMint: COMMON_TOKENS.USDC,
+        amount: '',
+        slippageBps: 50,
     },
     inputs: {
         [HANDLE_NAMES.FLOW_IN]: { type: 'any', label: 'Input' },
@@ -169,35 +269,145 @@ export const createAtaNodeDef: NodeDefinition<CreateAtaNodeData> = {
     outputs: {
         [HANDLE_NAMES.FLOW_OUT]: { type: 'any', label: 'Output' },
         [HANDLE_NAMES.BATCH_OUT]: { type: 'any', label: 'Batch Out' },
-        ata: { type: 'address', label: 'ATA Address' },
     },
     compile: async (data, _inputs, ctx): Promise<NodeCompileResult> => {
-        if (!data.mint) {
+        if (!data.inputMint || !data.outputMint || !data.amount) {
             return { instructions: [], outputs: {} };
         }
 
-        // For now, return empty - full ATA creation requires:
-        // 1. Deriving ATA address
-        // 2. Creating ATA instruction
-        // This will be enhanced in a future iteration
-        const owner = data.owner || String(ctx.walletAddress);
-        console.log('[CreateATA] Would create ATA:', {
-            mint: data.mint,
-            owner,
-            payer: ctx.walletAddress,
-        });
+        const amount = parseFloat(data.amount);
+        if (isNaN(amount) || amount <= 0) {
+            return { instructions: [], outputs: {} };
+        }
 
-        return {
-            instructions: [],
-            outputs: {
-                // Would compute the ATA address here
-                ata: null,
-            },
-            computeUnits: 30_000, // Estimate for ATA creation
-        };
+        // Convert to lamports/smallest units (assuming 9 decimals for input)
+        // For SOL, 1 SOL = 1e9 lamports
+        const amountInSmallestUnits = Math.floor(amount * 1_000_000_000).toString();
+
+        try {
+            // 1. Get quote from Jupiter API (via Next.js proxy)
+            const quoteParams = new URLSearchParams({
+                inputMint: data.inputMint,
+                outputMint: data.outputMint,
+                amount: amountInSmallestUnits,
+                slippageBps: data.slippageBps.toString(),
+            });
+
+            console.log('[Swap] Fetching quote:', quoteParams.toString());
+            const quoteRes = await fetch(`/api/jupiter/quote?${quoteParams}`);
+            
+            if (!quoteRes.ok) {
+                const errorText = await quoteRes.text();
+                console.error('[Swap] Quote error:', errorText);
+                throw new Error(`Failed to get swap quote: ${errorText}`);
+            }
+
+            const quote = await quoteRes.json();
+            console.log('[Swap] Quote received:', {
+                inAmount: quote.inAmount,
+                outAmount: quote.outAmount,
+                priceImpactPct: quote.priceImpactPct,
+            });
+
+            // 2. Get swap instructions from Jupiter API
+            const swapRes = await fetch('/api/jupiter/swap-instructions', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    quoteResponse: quote,
+                    userPublicKey: ctx.walletAddress,
+                    wrapAndUnwrapSol: true,
+                    dynamicComputeUnitLimit: true,
+                }),
+            });
+
+            if (!swapRes.ok) {
+                const errorText = await swapRes.text();
+                console.error('[Swap] Swap instructions error:', errorText);
+                throw new Error(`Failed to get swap instructions: ${errorText}`);
+            }
+
+            const swapData = await swapRes.json();
+            console.log('[Swap] Got swap instructions');
+
+            // 3. Convert Jupiter instructions to Solana Kit format
+            const instructions: any[] = [];
+
+            // Add setup instructions (ATA creation, wSOL wrapping, etc.)
+            if (swapData.setupInstructions?.length > 0) {
+                for (const ix of swapData.setupInstructions) {
+                    instructions.push(convertJupiterInstruction(ix));
+                }
+            }
+
+            // Add main swap instruction
+            instructions.push(convertJupiterInstruction(swapData.swapInstruction));
+
+            // Add cleanup instruction (unwrap wSOL, etc.)
+            if (swapData.cleanupInstruction) {
+                instructions.push(convertJupiterInstruction(swapData.cleanupInstruction));
+            }
+
+            console.log('[Swap] Total instructions:', instructions.length);
+
+            // Get decimals for formatting
+            const inputDecimals = getTokenDecimals(data.inputMint);
+            const outputDecimals = getTokenDecimals(data.outputMint);
+            const inputSymbol = getTokenSymbol(data.inputMint);
+            const outputSymbol = getTokenSymbol(data.outputMint);
+
+            console.log('[Swap] Amounts:', {
+                input: `${Number(quote.inAmount) / Math.pow(10, inputDecimals)} ${inputSymbol}`,
+                output: `${Number(quote.outAmount) / Math.pow(10, outputDecimals)} ${outputSymbol}`,
+            });
+
+            return {
+                instructions,
+                outputs: {
+                    inputAmount: BigInt(quote.inAmount),
+                    outputAmount: BigInt(quote.outAmount),
+                    inputMint: data.inputMint,
+                    outputMint: data.outputMint,
+                },
+                computeUnits: swapData.computeUnitLimit || 300_000,
+                addressLookupTables: swapData.addressLookupTableAddresses || [],
+                // Show the input token being sold as the "transfer"
+                tokenTransfer: {
+                    mint: data.inputMint,
+                    amount: BigInt(quote.inAmount),
+                    decimals: inputDecimals,
+                    destination: data.outputMint, // Use output mint as a reference
+                },
+            };
+        } catch (error) {
+            console.error('[Swap] Error:', error);
+            // Return empty on error - the feedback panel will show validation errors
+            return { instructions: [], outputs: {} };
+        }
     },
 };
 
+/**
+ * Convert Jupiter instruction format to Solana Kit Instruction format.
+ */
+function convertJupiterInstruction(ix: {
+    programId: string;
+    accounts: Array<{ pubkey: string; isSigner: boolean; isWritable: boolean }>;
+    data: string;
+}): any {
+    return {
+        programAddress: address(ix.programId),
+        accounts: ix.accounts.map(acc => ({
+            address: address(acc.pubkey),
+            role: acc.isSigner && acc.isWritable ? 3 // WRITABLE_SIGNER
+                : acc.isSigner ? 2 // READONLY_SIGNER
+                : acc.isWritable ? 1 // WRITABLE
+                : 0, // READONLY
+        })),
+        data: Buffer.from(ix.data, 'base64'),
+    };
+}
+
 // =============================================================================
 // Memo Node
 // =============================================================================
@@ -319,7 +529,7 @@ export const nodeDefinitions: Record<NodeType, NodeDefinition<any>> = {
     'wallet': walletNodeDef,
     'transfer-sol': transferSolNodeDef,
     'transfer-token': transferTokenNodeDef,
-    'create-ata': createAtaNodeDef,
+    'swap': swapNodeDef,
     'memo': memoNodeDef,
     'execute': executeNodeDef,
 };
@@ -348,3 +558,4 @@ export function getAllNodeDefinitions(): NodeDefinition<any>[] {
 export function getNodeDefinitionsByCategory(category: string): NodeDefinition<any>[] {
     return getAllNodeDefinitions().filter(def => def.category === category);
 }
+
diff --git a/examples/next-js/lib/builder/store.ts b/examples/next-js/lib/builder/store.ts
index c26306d..14d5147 100644
--- a/examples/next-js/lib/builder/store.ts
+++ b/examples/next-js/lib/builder/store.ts
@@ -453,3 +453,4 @@ export function useBatchGroups(): BatchGroup[] {
     const edges = useBuilderStore(state => state.edges);
     return getBatchGroups(nodes, edges);
 }
+
diff --git a/examples/next-js/lib/builder/types.ts b/examples/next-js/lib/builder/types.ts
index 678c177..9c23261 100644
--- a/examples/next-js/lib/builder/types.ts
+++ b/examples/next-js/lib/builder/types.ts
@@ -29,7 +29,7 @@ export type NodeType =
     | 'wallet'
     | 'transfer-sol'
     | 'transfer-token'
-    | 'create-ata'
+    | 'swap'
     | 'memo'
     | 'execute';
 
@@ -78,14 +78,38 @@ export interface TransferTokenNodeData extends BaseNodeData {
     amount: string;
     destination: string;
     decimals: number;
+    /** Token symbol for display (populated from TokenListElement) */
+    tokenSymbol?: string;
+    /** Token logo URL for display (populated from TokenListElement) */
+    tokenLogo?: string;
+    /** Token balance in UI units (populated from TokenListElement) */
+    tokenBalance?: string;
 }
 
 /**
- * Data structure for create ATA node.
+ * Data structure for swap node (Jupiter).
  */
-export interface CreateAtaNodeData extends BaseNodeData {
-    mint: string;
-    owner: string;
+export interface SwapNodeData extends BaseNodeData {
+    /** Token mint to swap from */
+    inputMint: string;
+    /** Token mint to swap to */
+    outputMint: string;
+    /** Amount to swap (in UI units, e.g., "1.5" for 1.5 SOL) */
+    amount: string;
+    /** Slippage tolerance in basis points (default 50 = 0.5%) */
+    slippageBps: number;
+    /** Input token symbol for display (populated from TokenListElement) */
+    inputTokenSymbol?: string;
+    /** Input token logo URL for display (populated from TokenListElement) */
+    inputTokenLogo?: string;
+    /** Input token balance in UI units (populated from TokenListElement) */
+    inputTokenBalance?: string;
+    /** Input token decimals (populated from TokenListElement) */
+    inputTokenDecimals?: number;
+    /** Output token symbol for display */
+    outputTokenSymbol?: string;
+    /** Output token logo URL for display */
+    outputTokenLogo?: string;
 }
 
 /**
@@ -117,7 +141,7 @@ export type BuilderNodeData =
     | WalletNodeData
     | TransferSolNodeData
     | TransferTokenNodeData
-    | CreateAtaNodeData
+    | SwapNodeData
     | MemoNodeData
     | ExecuteNodeData;
 
@@ -184,6 +208,20 @@ export interface CompileContext {
     walletAddress: Address;
 }
 
+/**
+ * Token transfer information for display purposes.
+ */
+export interface TokenTransferInfo {
+    /** Token mint address */
+    mint: Address;
+    /** Amount in smallest units */
+    amount: bigint;
+    /** Token decimals for formatting */
+    decimals: number;
+    /** Destination address */
+    destination: Address;
+}
+
 /**
  * Result from compiling a single node.
  */
@@ -194,6 +232,8 @@ export interface NodeCompileResult {
     addressLookupTables?: Address[];
     /** SOL amount transferred by this node (in lamports) */
     solTransferLamports?: bigint;
+    /** Token transfer info for this node */
+    tokenTransfer?: TokenTransferInfo;
 }
 
 /**
@@ -205,6 +245,8 @@ export interface GraphCompileResult {
     addressLookupTables?: Address[];
     /** Total SOL being transferred across all instructions (in lamports) */
     totalSolTransferLamports?: bigint;
+    /** All token transfers in this transaction */
+    tokenTransfers?: TokenTransferInfo[];
 }
 
 // =============================================================================
@@ -381,3 +423,4 @@ export function isVerticalEdge(edge: BuilderEdge): boolean {
 export function isHorizontalEdge(edge: BuilderEdge): boolean {
     return getEdgeDirection(edge) === 'horizontal';
 }
+
diff --git a/examples/next-js/lib/builder/use-builder-feedback.ts b/examples/next-js/lib/builder/use-builder-feedback.ts
index d8fa957..56edc6e 100644
--- a/examples/next-js/lib/builder/use-builder-feedback.ts
+++ b/examples/next-js/lib/builder/use-builder-feedback.ts
@@ -166,3 +166,4 @@ export function useBuilderFeedback(
 
     return feedback;
 }
+
diff --git a/examples/next-js/package.json b/examples/next-js/package.json
index bd7d36e..30736c9 100644
--- a/examples/next-js/package.json
+++ b/examples/next-js/package.json
@@ -17,10 +17,13 @@
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
         "@solana-program/system": "^0.9.0",
+        "@solana-program/token": "^0.9.0",
         "@solana/connector": "0.1.4",
         "@solana/connector-debugger": "0.1.1",
         "@solana/instruction-plans": "^5.0.0",
@@ -35,9 +38,9 @@
         "clsx": "^2.1.1",
         "lucide-react": "^0.546.0",
         "motion": "^12.23.24",
-        "next": "15.5.7",
-        "react": "19.2.1",
-        "react-dom": "19.2.1",
+        "next": "16.1.0",
+        "react": "19.2.3",
+        "react-dom": "19.2.3",
         "react-syntax-highlighter": "^15.6.1",
         "symbols-react": "^1.2.7",
         "tailwind-merge": "^3.3.1",
@@ -49,11 +52,11 @@
         "@solana/codecs-strings": "^5.0.0",
         "@tailwindcss/postcss": "^4.1.14",
         "@types/node": "^24.8.1",
-        "@types/react": "^19.2.2",
-        "@types/react-dom": "^19.2.2",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
         "@types/react-syntax-highlighter": "^15.5.13",
         "eslint": "^9.38.0",
-        "eslint-config-next": "15.5.7",
+        "eslint-config-next": "16.1.0",
         "tailwindcss": "^4.1.14",
         "tsx": "^4.19.0",
         "tw-animate-css": "^1.4.0",
diff --git a/examples/next-js/scripts/benchmark-strategies.ts b/examples/next-js/scripts/benchmark-strategies.ts
index 7404bfb..d0b459d 100644
--- a/examples/next-js/scripts/benchmark-strategies.ts
+++ b/examples/next-js/scripts/benchmark-strategies.ts
@@ -37,7 +37,7 @@ import {
     lamports,
     createSolanaRpc,
     createSolanaRpcSubscriptions,
-    getBase58Encoder,
+    getBase58Codec,
     type KeyPairSigner,
 } from '@solana/kit';
 
@@ -71,7 +71,7 @@ interface BenchmarkResult {
 // Configuration
 // ============================================================================
 
-const TX_COUNT = Number(process.env.TX_COUNT) || 40; // Number of transactions per strategy
+const TX_COUNT = Number(process.env.TX_COUNT) || 50; // Number of transactions per strategy
 const TRANSFER_AMOUNT = BigInt(1000); // 0.000001 SOL - minimal amount for self-transfer
 const BASE_TX_FEE = 0.000005; // Base transaction fee in SOL
 const JITO_TIP_SOL = Number(JITO_DEFAULT_TIP_LAMPORTS) / 1e9;
@@ -80,41 +80,8 @@ const JITO_TIP_SOL = Number(JITO_DEFAULT_TIP_LAMPORTS) / 1e9;
 // Helpers
 // ============================================================================
 
-function formatSignature(sig: string): string {
-    if (!sig || sig === '-') return '-';
-    return sig;
-}
-
-// Base58 alphabet for encoding signatures
-const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
-
-function encodeBase58(bytes: Uint8Array | Buffer): string {
-    const byteArray = Array.from(bytes);
-    const digits = [0];
-    for (let j = 0; j < byteArray.length; j++) {
-        let carry = byteArray[j];
-        for (let i = 0; i < digits.length; i++) {
-            carry += digits[i] << 8;
-            digits[i] = carry % 58;
-            carry = Math.floor(carry / 58);
-        }
-        while (carry > 0) {
-            digits.push(carry % 58);
-            carry = Math.floor(carry / 58);
-        }
-    }
-    // Handle leading zeros
-    let str = '';
-    for (let j = 0; j < byteArray.length; j++) {
-        if (byteArray[j] === 0) str += BASE58_ALPHABET[0];
-        else break;
-    }
-    // Convert digits to string (reverse order)
-    for (let i = digits.length - 1; i >= 0; i--) {
-        str += BASE58_ALPHABET[digits[i]];
-    }
-    return str;
-}
+// Use @solana/kit codec for base58 encoding
+const base58Codec = getBase58Codec();
 
 function deriveWsUrl(rpcUrl: string): string {
     const url = new URL(rpcUrl);
@@ -136,9 +103,8 @@ async function loadSigner(): Promise<KeyPairSigner> {
         const bytes = JSON.parse(privateKey) as number[];
         keyBytes = new Uint8Array(bytes);
     } else {
-        // Base58 encoded string
-        const encoder = getBase58Encoder();
-        keyBytes = encoder.encode(privateKey) as Uint8Array;
+        // Base58 encoded string - use codec to decode base58 → bytes
+        keyBytes = Uint8Array.from(base58Codec.encode(privateKey));
     }
 
     return createKeyPairSignerFromBytes(keyBytes);
@@ -387,7 +353,7 @@ async function runTpuDirect(
 
             // Extract signature from the signed transaction bytes
             const signatureBytes = txBytes.slice(1, 65);
-            const sigBase58 = encodeBase58(signatureBytes);
+            const sigBase58 = base58Codec.decode(signatureBytes);
 
             attempts.push({
                 status: result.delivered ? 'success' : 'failed',
diff --git a/examples/next-js/tsconfig.json b/examples/next-js/tsconfig.json
index 1406401..1a64ca2 100644
--- a/examples/next-js/tsconfig.json
+++ b/examples/next-js/tsconfig.json
@@ -1,28 +1,44 @@
 {
-    "compilerOptions": {
-        "target": "ES2020",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "preserve",
-        "incremental": true,
-        "plugins": [
-            {
-                "name": "next"
-            }
-        ],
-        "paths": {
-            "@/*": ["./*"],
-            "@pipeit/core": ["../../packages/core/dist"]
-        }
-    },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-    "exclude": ["node_modules"]
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "@pipeit/core": [
+        "../../packages/core/dist"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
diff --git a/packages/core/src/execution/__tests__/jito.test.ts b/packages/core/src/execution/__tests__/jito.test.ts
index eeb5a83..4888bd3 100644
--- a/packages/core/src/execution/__tests__/jito.test.ts
+++ b/packages/core/src/execution/__tests__/jito.test.ts
@@ -297,3 +297,4 @@ describe('JitoBundleError', () => {
 
 
 
+
diff --git a/packages/core/src/execution/__tests__/parallel.test.ts b/packages/core/src/execution/__tests__/parallel.test.ts
index 42f9354..f31efaf 100644
--- a/packages/core/src/execution/__tests__/parallel.test.ts
+++ b/packages/core/src/execution/__tests__/parallel.test.ts
@@ -268,3 +268,4 @@ describe('ParallelSubmitError', () => {
 
 
 
+
diff --git a/packages/core/src/execution/__tests__/strategies.test.ts b/packages/core/src/execution/__tests__/strategies.test.ts
index b97a7cd..ba2fee1 100644
--- a/packages/core/src/execution/__tests__/strategies.test.ts
+++ b/packages/core/src/execution/__tests__/strategies.test.ts
@@ -224,3 +224,4 @@ describe('utility functions', () => {
 
 
 
+
diff --git a/packages/core/src/execution/index.ts b/packages/core/src/execution/index.ts
index 8ad46fe..c740649 100644
--- a/packages/core/src/execution/index.ts
+++ b/packages/core/src/execution/index.ts
@@ -56,3 +56,4 @@ export {
 
 
 
+
diff --git a/packages/core/src/execution/jito.ts b/packages/core/src/execution/jito.ts
index 94b25bb..45472e3 100644
--- a/packages/core/src/execution/jito.ts
+++ b/packages/core/src/execution/jito.ts
@@ -379,3 +379,4 @@ export async function sendTransactionViaJito(transaction: string, options: SendB
 
 
 
+
diff --git a/packages/core/src/execution/parallel.ts b/packages/core/src/execution/parallel.ts
index 7404dfc..97826f5 100644
--- a/packages/core/src/execution/parallel.ts
+++ b/packages/core/src/execution/parallel.ts
@@ -367,3 +367,4 @@ export async function submitToRpc(
 
 
 
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 210bb12..359fa75 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,7 +34,7 @@ importers:
     dependencies:
       '@phosphor-icons/react':
         specifier: ^2.1.10
-        version: 2.1.10(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@pipeit/actions':
         specifier: workspace:*
         version: link:../../packages/actions
@@ -46,31 +46,40 @@ importers:
         version: link:../../packages/fastlane
       '@radix-ui/react-avatar':
         specifier: ^1.1.10
-        version: 1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.16
-        version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-label':
+        specifier: ^2.0.2
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-select':
+        specifier: ^2.1.2
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-separator':
         specifier: ^1.1.7
-        version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-slot':
         specifier: ^1.2.3
-        version: 1.2.3(@types/react@19.2.2)(react@19.2.1)
+        version: 1.2.3(@types/react@19.2.7)(react@19.2.3)
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
-        version: 1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@solana-program/system':
         specifier: ^0.9.0
         version: 0.9.1(@solana/kit@5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10)))
+      '@solana-program/token':
+        specifier: ^0.9.0
+        version: 0.9.0(@solana/kit@5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10)))
       '@solana/connector':
         specifier: 0.1.4
-        version: 0.1.4(@solana/connector-debugger@0.1.1)(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(nanostores@1.0.1)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
+        version: 0.1.4(@solana/connector-debugger@0.1.1)(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(nanostores@1.0.1)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       '@solana/connector-debugger':
         specifier: 0.1.1
-        version: 0.1.1(@solana/connector@0.1.4)(fastestsmallesttextencoderdecoder@1.0.22)(react@19.2.1)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
+        version: 0.1.1(@solana/connector@0.1.4)(fastestsmallesttextencoderdecoder@1.0.22)(react@19.2.3)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       '@solana/instruction-plans':
         specifier: ^5.0.0
         version: 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)
@@ -88,13 +97,13 @@ importers:
         version: 1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)
       '@tanstack/react-query':
         specifier: ^5.90.5
-        version: 5.90.6(react@19.2.1)
+        version: 5.90.6(react@19.2.3)
       '@wallet-standard/app':
         specifier: ^1.1.0
         version: 1.1.0
       '@xyflow/react':
         specifier: ^12.10.0
-        version: 12.10.0(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 12.10.0(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -103,25 +112,25 @@ importers:
         version: 2.1.1
       lucide-react:
         specifier: ^0.546.0
-        version: 0.546.0(react@19.2.1)
+        version: 0.546.0(react@19.2.3)
       motion:
         specifier: ^12.23.24
-        version: 12.23.24(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 12.23.24(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next:
-        specifier: 15.5.7
-        version: 15.5.7(@babel/core@7.28.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        specifier: 16.1.0
+        version: 16.1.0(@babel/core@7.28.5)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react:
-        specifier: 19.2.1
-        version: 19.2.1
+        specifier: 19.2.3
+        version: 19.2.3
       react-dom:
-        specifier: 19.2.1
-        version: 19.2.1(react@19.2.1)
+        specifier: 19.2.3
+        version: 19.2.3(react@19.2.3)
       react-syntax-highlighter:
         specifier: ^15.6.1
-        version: 15.6.6(react@19.2.1)
+        version: 15.6.6(react@19.2.3)
       symbols-react:
         specifier: ^1.2.7
-        version: 1.2.7(react@19.2.1)
+        version: 1.2.7(react@19.2.3)
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
@@ -130,7 +139,7 @@ importers:
         version: 4.2.1
       zustand:
         specifier: ^5.0.9
-        version: 5.0.9(@types/react@19.2.2)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1))
+        version: 5.0.9(@types/react@19.2.7)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.1
@@ -145,11 +154,11 @@ importers:
         specifier: ^24.8.1
         version: 24.10.0
       '@types/react':
-        specifier: ^19.2.2
-        version: 19.2.2
+        specifier: ^19.2.7
+        version: 19.2.7
       '@types/react-dom':
-        specifier: ^19.2.2
-        version: 19.2.2(@types/react@19.2.2)
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.7)
       '@types/react-syntax-highlighter':
         specifier: ^15.5.13
         version: 15.5.13
@@ -157,8 +166,8 @@ importers:
         specifier: ^9.38.0
         version: 9.39.1(jiti@2.6.1)
       eslint-config-next:
-        specifier: 15.5.7
-        version: 15.5.7(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+        specifier: 16.1.0
+        version: 16.1.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       tailwindcss:
         specifier: ^4.1.14
         version: 4.1.16
@@ -1029,56 +1038,56 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@next/env@15.5.7':
-    resolution: {integrity: sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==}
+  '@next/env@16.1.0':
+    resolution: {integrity: sha512-Dd23XQeFHmhf3KBW76leYVkejHlCdB7erakC2At2apL1N08Bm+dLYNP+nNHh0tzUXfPQcNcXiQyacw0PG4Fcpw==}
 
-  '@next/eslint-plugin-next@15.5.7':
-    resolution: {integrity: sha512-DtRU2N7BkGr8r+pExfuWHwMEPX5SD57FeA6pxdgCHODo+b/UgIgjE+rgWKtJAbEbGhVZ2jtHn4g3wNhWFoNBQQ==}
+  '@next/eslint-plugin-next@16.1.0':
+    resolution: {integrity: sha512-sooC/k0LCF4/jLXYHpgfzJot04lZQqsttn8XJpTguP8N3GhqXN3wSkh68no2OcZzS/qeGwKDFTqhZ8WofdXmmQ==}
 
-  '@next/swc-darwin-arm64@15.5.7':
-    resolution: {integrity: sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==}
+  '@next/swc-darwin-arm64@16.1.0':
+    resolution: {integrity: sha512-onHq8dl8KjDb8taANQdzs3XmIqQWV3fYdslkGENuvVInFQzZnuBYYOG2HGHqqtvgmEU7xWzhgndXXxnhk4Z3fQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@15.5.7':
-    resolution: {integrity: sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==}
+  '@next/swc-darwin-x64@16.1.0':
+    resolution: {integrity: sha512-Am6VJTp8KhLuAH13tPrAoVIXzuComlZlMwGr++o2KDjWiKPe3VwpxYhgV6I4gKls2EnsIMggL4y7GdXyDdJcFA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@15.5.7':
-    resolution: {integrity: sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==}
+  '@next/swc-linux-arm64-gnu@16.1.0':
+    resolution: {integrity: sha512-fVicfaJT6QfghNyg8JErZ+EMNQ812IS0lmKfbmC01LF1nFBcKfcs4Q75Yy8IqnsCqH/hZwGhqzj3IGVfWV6vpA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@15.5.7':
-    resolution: {integrity: sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==}
+  '@next/swc-linux-arm64-musl@16.1.0':
+    resolution: {integrity: sha512-TojQnDRoX7wJWXEEwdfuJtakMDW64Q7NrxQPviUnfYJvAx5/5wcGE+1vZzQ9F17m+SdpFeeXuOr6v3jbyusYMQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@15.5.7':
-    resolution: {integrity: sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==}
+  '@next/swc-linux-x64-gnu@16.1.0':
+    resolution: {integrity: sha512-quhNFVySW4QwXiZkZ34SbfzNBm27vLrxZ2HwTfFFO1BBP0OY1+pI0nbyewKeq1FriqU+LZrob/cm26lwsiAi8Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@15.5.7':
-    resolution: {integrity: sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==}
+  '@next/swc-linux-x64-musl@16.1.0':
+    resolution: {integrity: sha512-6JW0z2FZUK5iOVhUIWqE4RblAhUj1EwhZ/MwteGb//SpFTOHydnhbp3868gxalwea+mbOLWO6xgxj9wA9wNvNw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@15.5.7':
-    resolution: {integrity: sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==}
+  '@next/swc-win32-arm64-msvc@16.1.0':
+    resolution: {integrity: sha512-+DK/akkAvvXn5RdYN84IOmLkSy87SCmpofJPdB8vbLmf01BzntPBSYXnMvnEEv/Vcf3HYJwt24QZ/s6sWAwOMQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@15.5.7':
-    resolution: {integrity: sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==}
+  '@next/swc-win32-x64-msvc@16.1.0':
+    resolution: {integrity: sha512-Tr0j94MphimCCks+1rtYPzQFK+faJuhHWCegU9S9gDlgyOk8Y3kPmO64UcjyzZAlligeBtYZ/2bEyrKq0d2wqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1124,6 +1133,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
@@ -1263,6 +1275,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-menu@2.1.16':
     resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
@@ -1328,6 +1353,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.11':
     resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
@@ -1341,6 +1379,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-separator@1.1.7':
     resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
     peerDependencies:
@@ -1363,6 +1414,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-tabs@1.1.13':
     resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
     peerDependencies:
@@ -1430,6 +1490,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -1448,6 +1517,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
@@ -1620,9 +1702,6 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@rushstack/eslint-patch@1.14.1':
-    resolution: {integrity: sha512-jGTk8UD/RdjsNZW8qq10r0RBvxL8OWtoT+kImlzPDFilmozzM+9QmIJsmze9UiSBrFU45ZxhTYBypn9q9z/VfQ==}
-
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -1645,6 +1724,11 @@ packages:
     peerDependencies:
       '@solana/kit': ^5.0
 
+  '@solana-program/token@0.9.0':
+    resolution: {integrity: sha512-vnZxndd4ED4Fc56sw93cWZ2djEeeOFxtaPS8SPf5+a+JZjKA/EnKqzbE1y04FuMhIVrLERQ8uR8H2h72eZzlsA==}
+    peerDependencies:
+      '@solana/kit': ^5.0
+
   '@solana/accounts@4.0.0':
     resolution: {integrity: sha512-fxTtTk7PCJrigdzqhkc0eZYACVZpONKJZy4MkGvZzx5tCC7rUeDJvzau3IYACUCRaaAGPpkINHwYtp8weKsn8w==}
     engines: {node: '>=20.18.0'}
@@ -2373,16 +2457,16 @@ packages:
   '@types/node@24.10.0':
     resolution: {integrity: sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==}
 
-  '@types/react-dom@19.2.2':
-    resolution: {integrity: sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==}
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
       '@types/react': ^19.2.0
 
   '@types/react-syntax-highlighter@15.5.13':
     resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
 
-  '@types/react@19.2.2':
-    resolution: {integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==}
+  '@types/react@19.2.7':
+    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
 
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
@@ -2408,63 +2492,63 @@ packages:
   '@types/yargs@17.0.34':
     resolution: {integrity: sha512-KExbHVa92aJpw9WDQvzBaGVE2/Pz+pLZQloT2hjL8IqsZnV62rlPOYvNnLmf/L2dyllfVUOVBj64M0z/46eR2A==}
 
-  '@typescript-eslint/eslint-plugin@8.46.3':
-    resolution: {integrity: sha512-sbaQ27XBUopBkRiuY/P9sWGOWUW4rl8fDoHIUmLpZd8uldsTyB4/Zg6bWTegPoTLnKj9Hqgn3QD6cjPNB32Odw==}
+  '@typescript-eslint/eslint-plugin@8.50.0':
+    resolution: {integrity: sha512-O7QnmOXYKVtPrfYzMolrCTfkezCJS9+ljLdKW/+DCvRsc3UAz+sbH6Xcsv7p30+0OwUbeWfUDAQE0vpabZ3QLg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.46.3
+      '@typescript-eslint/parser': ^8.50.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.46.3':
-    resolution: {integrity: sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==}
+  '@typescript-eslint/parser@8.50.0':
+    resolution: {integrity: sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.46.3':
-    resolution: {integrity: sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==}
+  '@typescript-eslint/project-service@8.50.0':
+    resolution: {integrity: sha512-Cg/nQcL1BcoTijEWyx4mkVC56r8dj44bFDvBdygifuS20f3OZCHmFbjF34DPSi07kwlFvqfv/xOLnJ5DquxSGQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.46.3':
-    resolution: {integrity: sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==}
+  '@typescript-eslint/scope-manager@8.50.0':
+    resolution: {integrity: sha512-xCwfuCZjhIqy7+HKxBLrDVT5q/iq7XBVBXLn57RTIIpelLtEIZHXAF/Upa3+gaCpeV1NNS5Z9A+ID6jn50VD4A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.46.3':
-    resolution: {integrity: sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==}
+  '@typescript-eslint/tsconfig-utils@8.50.0':
+    resolution: {integrity: sha512-vxd3G/ybKTSlm31MOA96gqvrRGv9RJ7LGtZCn2Vrc5htA0zCDvcMqUkifcjrWNNKXHUU3WCkYOzzVSFBd0wa2w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.46.3':
-    resolution: {integrity: sha512-ZPCADbr+qfz3aiTTYNNkCbUt+cjNwI/5McyANNrFBpVxPt7GqpEYz5ZfdwuFyGUnJ9FdDXbGODUu6iRCI6XRXw==}
+  '@typescript-eslint/type-utils@8.50.0':
+    resolution: {integrity: sha512-7OciHT2lKCewR0mFoBrvZJ4AXTMe/sYOe87289WAViOocEmDjjv8MvIOT2XESuKj9jp8u3SZYUSh89QA4S1kQw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.46.3':
-    resolution: {integrity: sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==}
+  '@typescript-eslint/types@8.50.0':
+    resolution: {integrity: sha512-iX1mgmGrXdANhhITbpp2QQM2fGehBse9LbTf0sidWK6yg/NE+uhV5dfU1g6EYPlcReYmkE9QLPq/2irKAmtS9w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.46.3':
-    resolution: {integrity: sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==}
+  '@typescript-eslint/typescript-estree@8.50.0':
+    resolution: {integrity: sha512-W7SVAGBR/IX7zm1t70Yujpbk+zdPq/u4soeFSknWFdXIFuWsBGBOUu/Tn/I6KHSKvSh91OiMuaSnYp3mtPt5IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.46.3':
-    resolution: {integrity: sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==}
+  '@typescript-eslint/utils@8.50.0':
+    resolution: {integrity: sha512-87KgUXET09CRjGCi2Ejxy3PULXna63/bMYv72tCAlDJC3Yqwln0HiFJ3VJMst2+mEtNtZu5oFvX4qJGjKsnAgg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.46.3':
-    resolution: {integrity: sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==}
+  '@typescript-eslint/visitor-keys@8.50.0':
+    resolution: {integrity: sha512-Xzmnb58+Db78gT/CCj/PVCvK+zxbnsw6F+O1oheYszJbBSdEjVhQi3C/Xttzxgi/GLmpvOggRs1RFpiJ8+c34Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/global-this@0.4.4':
@@ -3008,8 +3092,8 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
   d3-color@3.1.0:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
@@ -3234,10 +3318,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-config-next@15.5.7:
-    resolution: {integrity: sha512-nU/TRGHHeG81NeLW5DeQT5t6BDUqbpsNQTvef1ld/tqHT+/zTx60/TIhKnmPISTTe++DVo+DLxDmk4rnwHaZVw==}
+  eslint-config-next@16.1.0:
+    resolution: {integrity: sha512-RlPb8E2uO/Ix/w3kizxz6+6ogw99WqtNzTG0ArRZ5NEkIYcsfRb8U0j7aTG7NjRvcrsak5QtUSuxGNN2UcA58g==}
     peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
+      eslint: '>=9.0.0'
       typescript: '>=3.3.1'
     peerDependenciesMeta:
       typescript:
@@ -3296,9 +3380,9 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
-  eslint-plugin-react-hooks@5.2.0:
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
+  eslint-plugin-react-hooks@7.0.1:
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
@@ -3387,10 +3471,6 @@ packages:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -3565,6 +3645,10 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3572,9 +3656,6 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
   happy-dom@20.0.10:
     resolution: {integrity: sha512-6umCCHcjQrhP5oXhrHQQvLB0bwb1UzHAHdsXy+FjtKoYjUhmNZsQL8NivwM1vDvNEChJabVrUYxUnp/ZdYmy2g==}
     engines: {node: '>=20.0.0'}
@@ -3615,9 +3696,15 @@ packages:
   hermes-compiler@0.0.0:
     resolution: {integrity: sha512-boVFutx6ME/Km2mB6vvsQcdnazEYYI/jV1pomx1wcFUG/EVqTkr5CU0CW9bKipOA/8Hyu3NYwW3THg2Q1kNCfA==}
 
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
   hermes-estree@0.32.0:
     resolution: {integrity: sha512-KWn3BqnlDOl97Xe1Yviur6NbgIZ+IP+UVSpshlZWkq+EtoHg6/cwiDj/osP9PCEgFE15KBm1O55JRwbMEm5ejQ==}
 
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
   hermes-parser@0.32.0:
     resolution: {integrity: sha512-g4nBOWFpuiTqjR3LZdRxKUkij9iyveWeuks7INEsMX741f3r9xxrOe8TeQfUxtda0eXmiIFiMQzoeSQEno33Hw==}
 
@@ -4243,10 +4330,9 @@ packages:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
 
-  next@15.5.7:
-    resolution: {integrity: sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==}
-    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
-    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
+  next@16.1.0:
+    resolution: {integrity: sha512-Y+KbmDbefYtHDDQKLNrmzE/YYzG2msqo2VXhzh5yrJ54tx/6TmGdkR5+kP9ma7i7LwZpZMfoY3m/AoPPPKxtVw==}
+    engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -4514,10 +4600,10 @@ packages:
   react-devtools-core@6.1.5:
     resolution: {integrity: sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==}
 
-  react-dom@19.2.1:
-    resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
-      react: ^19.2.1
+      react: ^19.2.3
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -4575,8 +4661,8 @@ packages:
     peerDependencies:
       react: '>= 0.14.0'
 
-  react@19.2.1:
-    resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
   readdirp@4.1.2:
@@ -5090,6 +5176,13 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
+  typescript-eslint@8.50.0:
+    resolution: {integrity: sha512-Q1/6yNUmCpH94fbgMUMg2/BSAr/6U7GBk61kZTv1/asghQOWOjTlp9K8mixS5NcJmm2creY+UFfGeW/+OcA64A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -5385,6 +5478,12 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
   zod@4.2.1:
     resolution: {integrity: sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==}
 
@@ -5831,11 +5930,11 @@ snapshots:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/react-dom@2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@floating-ui/utils@0.2.10': {}
 
@@ -6054,34 +6153,34 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@next/env@15.5.7': {}
+  '@next/env@16.1.0': {}
 
-  '@next/eslint-plugin-next@15.5.7':
+  '@next/eslint-plugin-next@16.1.0':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@15.5.7':
+  '@next/swc-darwin-arm64@16.1.0':
     optional: true
 
-  '@next/swc-darwin-x64@15.5.7':
+  '@next/swc-darwin-x64@16.1.0':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@15.5.7':
+  '@next/swc-linux-arm64-gnu@16.1.0':
     optional: true
 
-  '@next/swc-linux-arm64-musl@15.5.7':
+  '@next/swc-linux-arm64-musl@16.1.0':
     optional: true
 
-  '@next/swc-linux-x64-gnu@15.5.7':
+  '@next/swc-linux-x64-gnu@16.1.0':
     optional: true
 
-  '@next/swc-linux-x64-musl@15.5.7':
+  '@next/swc-linux-x64-musl@16.1.0':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@15.5.7':
+  '@next/swc-win32-arm64-msvc@16.1.0':
     optional: true
 
-  '@next/swc-win32-x64-msvc@15.5.7':
+  '@next/swc-win32-x64-msvc@16.1.0':
     optional: true
 
   '@noble/curves@1.9.7':
@@ -6106,10 +6205,10 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@phosphor-icons/react@2.1.10(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@phosphor-icons/react@2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   '@pkgjs/parseargs@0.11.0':
     optional: true
@@ -6117,310 +6216,381 @@ snapshots:
   '@polka/url@1.0.0-next.29':
     optional: true
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
       aria-hidden: 1.2.6
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
       aria-hidden: 1.2.6
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.1)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
       '@radix-ui/rect': 1.1.1
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
+      '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.2)(react@19.2.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 19.2.1
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.2)(react@19.2.1)':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.1)
-      react: 19.2.1
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
   '@radix-ui/rect@1.1.1': {}
 
@@ -6482,14 +6652,14 @@ snapshots:
 
   '@react-native/normalize-colors@0.82.1': {}
 
-  '@react-native/virtualized-lists@0.82.1(@types/react@19.2.2)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)':
+  '@react-native/virtualized-lists@0.82.1(@types/react@19.2.7)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)':
     dependencies:
       invariant: 2.2.4
       nullthrows: 1.1.1
-      react: 19.2.1
-      react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10)
+      react: 19.2.3
+      react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10)
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
   '@rollup/rollup-android-arm-eabi@4.52.5':
     optional: true
@@ -6559,8 +6729,6 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
-  '@rushstack/eslint-patch@1.14.1': {}
-
   '@sinclair/typebox@0.27.8': {}
 
   '@sinonjs/commons@3.0.1':
@@ -6571,14 +6739,14 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@solana-mobile/mobile-wallet-adapter-protocol@2.2.5(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)':
+  '@solana-mobile/mobile-wallet-adapter-protocol@2.2.5(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)':
     dependencies:
       '@solana/codecs-strings': 4.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)
-      '@solana/wallet-standard': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.1)
+      '@solana/wallet-standard': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.3)
       '@solana/wallet-standard-util': 1.1.2
       '@wallet-standard/core': 1.1.1
       js-base64: 3.7.8
-      react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10)
+      react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10)
     transitivePeerDependencies:
       - '@solana/wallet-adapter-base'
       - '@solana/web3.js'
@@ -6587,9 +6755,9 @@ snapshots:
       - react
       - typescript
 
-  '@solana-mobile/wallet-standard-mobile@0.4.3(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)':
+  '@solana-mobile/wallet-standard-mobile@0.4.3(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)':
     dependencies:
-      '@solana-mobile/mobile-wallet-adapter-protocol': 2.2.5(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)
+      '@solana-mobile/mobile-wallet-adapter-protocol': 2.2.5(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)
       '@solana/wallet-standard-chains': 1.1.1
       '@solana/wallet-standard-features': 1.3.0
       '@wallet-standard/base': 1.1.0
@@ -6609,6 +6777,10 @@ snapshots:
     dependencies:
       '@solana/kit': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
 
+  '@solana-program/token@0.9.0(@solana/kit@5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10)))':
+    dependencies:
+      '@solana/kit': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
+
   '@solana/accounts@4.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)':
     dependencies:
       '@solana/addresses': 4.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)
@@ -6754,20 +6926,20 @@ snapshots:
     transitivePeerDependencies:
       - fastestsmallesttextencoderdecoder
 
-  '@solana/connector-debugger@0.1.1(@solana/connector@0.1.4)(fastestsmallesttextencoderdecoder@1.0.22)(react@19.2.1)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))':
+  '@solana/connector-debugger@0.1.1(@solana/connector@0.1.4)(fastestsmallesttextencoderdecoder@1.0.22)(react@19.2.3)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))':
     dependencies:
-      '@solana/connector': 0.1.4(@solana/connector-debugger@0.1.1)(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(nanostores@1.0.1)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
+      '@solana/connector': 0.1.4(@solana/connector-debugger@0.1.1)(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(nanostores@1.0.1)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       '@solana/kit': 4.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
-      react: 19.2.1
+      react: 19.2.3
     transitivePeerDependencies:
       - fastestsmallesttextencoderdecoder
       - typescript
       - ws
 
-  '@solana/connector@0.1.4(@solana/connector-debugger@0.1.1)(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(nanostores@1.0.1)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))':
+  '@solana/connector@0.1.4(@solana/connector-debugger@0.1.1)(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(nanostores@1.0.1)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))':
     dependencies:
       '@nanostores/persistent': 1.2.0(nanostores@1.0.1)
-      '@solana-mobile/wallet-standard-mobile': 0.4.3(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)(typescript@5.9.3)
+      '@solana-mobile/wallet-standard-mobile': 0.4.3(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(fastestsmallesttextencoderdecoder@1.0.22)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)(typescript@5.9.3)
       '@solana/addresses': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)
       '@solana/codecs': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)
       '@solana/keys': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)
@@ -6781,9 +6953,9 @@ snapshots:
       '@wallet-standard/features': 1.1.0
       '@wallet-ui/core': 2.1.0(@solana/kit@5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10)))
     optionalDependencies:
-      '@solana/connector-debugger': 0.1.1(@solana/connector@0.1.4)(fastestsmallesttextencoderdecoder@1.0.22)(react@19.2.1)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
+      '@solana/connector-debugger': 0.1.1(@solana/connector@0.1.4)(fastestsmallesttextencoderdecoder@1.0.22)(react@19.2.3)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       '@solana/web3.js': 1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)
-      react: 19.2.1
+      react: 19.2.3
     transitivePeerDependencies:
       - '@solana/wallet-adapter-base'
       - fastestsmallesttextencoderdecoder
@@ -7442,31 +7614,31 @@ snapshots:
       '@wallet-standard/wallet': 1.1.0
       bs58: 5.0.0
 
-  '@solana/wallet-standard-wallet-adapter-react@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.1)':
+  '@solana/wallet-standard-wallet-adapter-react@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.3)':
     dependencies:
       '@solana/wallet-adapter-base': 0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))
       '@solana/wallet-standard-wallet-adapter-base': 1.1.4(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)
       '@wallet-standard/app': 1.1.0
       '@wallet-standard/base': 1.1.0
-      react: 19.2.1
+      react: 19.2.3
     transitivePeerDependencies:
       - '@solana/web3.js'
       - bs58
 
-  '@solana/wallet-standard-wallet-adapter@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.1)':
+  '@solana/wallet-standard-wallet-adapter@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.3)':
     dependencies:
       '@solana/wallet-standard-wallet-adapter-base': 1.1.4(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)
-      '@solana/wallet-standard-wallet-adapter-react': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.1)
+      '@solana/wallet-standard-wallet-adapter-react': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@solana/wallet-adapter-base'
       - '@solana/web3.js'
       - bs58
       - react
 
-  '@solana/wallet-standard@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.1)':
+  '@solana/wallet-standard@1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.3)':
     dependencies:
       '@solana/wallet-standard-core': 1.1.2
-      '@solana/wallet-standard-wallet-adapter': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.1)
+      '@solana/wallet-standard-wallet-adapter': 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.0.9)(typescript@5.9.3)(utf-8-validate@5.0.10))(bs58@5.0.0)(react@19.2.3)
     transitivePeerDependencies:
       - '@solana/wallet-adapter-base'
       - '@solana/web3.js'
@@ -7580,10 +7752,10 @@ snapshots:
 
   '@tanstack/query-core@5.90.6': {}
 
-  '@tanstack/react-query@5.90.6(react@19.2.1)':
+  '@tanstack/react-query@5.90.6(react@19.2.3)':
     dependencies:
       '@tanstack/query-core': 5.90.6
-      react: 19.2.1
+      react: 19.2.3
 
   '@tybys/wasm-util@0.10.1':
     dependencies:
@@ -7678,17 +7850,17 @@ snapshots:
     dependencies:
       undici-types: 7.16.0
 
-  '@types/react-dom@19.2.2(@types/react@19.2.2)':
+  '@types/react-dom@19.2.3(@types/react@19.2.7)':
     dependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
   '@types/react-syntax-highlighter@15.5.13':
     dependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  '@types/react@19.2.2':
+  '@types/react@19.2.7':
     dependencies:
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   '@types/stack-utils@2.0.3': {}
 
@@ -7713,16 +7885,15 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.3
-      '@typescript-eslint/type-utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.3
+      '@typescript-eslint/parser': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.50.0
+      '@typescript-eslint/type-utils': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.50.0
       eslint: 9.39.1(jiti@2.6.1)
-      graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
       ts-api-utils: 2.1.0(typescript@5.9.3)
@@ -7730,41 +7901,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.46.3
-      '@typescript-eslint/types': 8.46.3
-      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.3
+      '@typescript-eslint/scope-manager': 8.50.0
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.50.0
       debug: 4.4.3
       eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.46.3(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.50.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.0
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.46.3':
+  '@typescript-eslint/scope-manager@8.50.0':
     dependencies:
-      '@typescript-eslint/types': 8.46.3
-      '@typescript-eslint/visitor-keys': 8.46.3
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/visitor-keys': 8.50.0
 
-  '@typescript-eslint/tsconfig-utils@8.46.3(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.50.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.46.3
-      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.39.1(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.9.3)
@@ -7772,38 +7943,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.46.3': {}
+  '@typescript-eslint/types@8.50.0': {}
 
-  '@typescript-eslint/typescript-estree@8.46.3(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.50.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.46.3(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.3
-      '@typescript-eslint/visitor-keys': 8.46.3
+      '@typescript-eslint/project-service': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/visitor-keys': 8.50.0
       debug: 4.4.3
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.3
+      tinyglobby: 0.2.15
       ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.46.3
-      '@typescript-eslint/types': 8.46.3
-      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.50.0
+      '@typescript-eslint/types': 8.50.0
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
       eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.46.3':
+  '@typescript-eslint/visitor-keys@8.50.0':
     dependencies:
-      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/types': 8.50.0
       eslint-visitor-keys: 4.2.1
 
   '@ungap/global-this@0.4.4': {}
@@ -7954,13 +8124,13 @@ snapshots:
       '@solana/kit': 5.0.0(fastestsmallesttextencoderdecoder@1.0.22)(typescript@5.9.3)(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       nanostores: 1.0.1
 
-  '@xyflow/react@12.10.0(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@xyflow/react@12.10.0(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@xyflow/system': 0.0.74
       classcat: 5.0.5
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      zustand: 4.5.7(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      zustand: 4.5.7(@types/react@19.2.7)(react@19.2.3)
     transitivePeerDependencies:
       - '@types/react'
       - immer
@@ -8393,7 +8563,7 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  csstype@3.1.3: {}
+  csstype@3.2.3: {}
 
   d3-color@3.1.0: {}
 
@@ -8701,22 +8871,22 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@15.5.7(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
+  eslint-config-next@16.1.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@next/eslint-plugin-next': 15.5.7
-      '@rushstack/eslint-patch': 1.14.1
-      '@typescript-eslint/eslint-plugin': 8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@next/eslint-plugin-next': 16.1.0
       eslint: 9.39.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@9.39.1(jiti@2.6.1))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-react-hooks: 7.0.1(eslint@9.39.1(jiti@2.6.1))
+      globals: 16.4.0
+      typescript-eslint: 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
+      - '@typescript-eslint/parser'
       - eslint-import-resolver-webpack
       - eslint-plugin-import-x
       - supports-color
@@ -8740,22 +8910,22 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -8766,7 +8936,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -8778,7 +8948,7 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -8803,9 +8973,16 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.39.1(jiti@2.6.1)):
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
+      '@babel/core': 7.28.5
+      '@babel/parser': 7.28.5
       eslint: 9.39.1(jiti@2.6.1)
+      hermes-parser: 0.25.1
+      zod: 4.2.1
+      zod-validation-error: 4.0.2(zod@4.2.1)
+    transitivePeerDependencies:
+      - supports-color
 
   eslint-plugin-react@7.37.5(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
@@ -8925,14 +9102,6 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  fast-glob@3.3.3:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -9018,14 +9187,14 @@ snapshots:
 
   format@0.2.2: {}
 
-  framer-motion@12.23.24(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  framer-motion@12.23.24(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       motion-dom: 12.23.23
       motion-utils: 12.23.6
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   fresh@0.5.2: {}
 
@@ -9113,12 +9282,12 @@ snapshots:
 
   globals@14.0.0: {}
 
+  globals@16.4.0: {}
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
-
   happy-dom@20.0.10:
     dependencies:
       '@types/node': 20.19.24
@@ -9160,8 +9329,14 @@ snapshots:
 
   hermes-compiler@0.0.0: {}
 
+  hermes-estree@0.25.1: {}
+
   hermes-estree@0.32.0: {}
 
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
   hermes-parser@0.32.0:
     dependencies:
       hermes-estree: 0.32.0
@@ -9633,9 +9808,9 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.546.0(react@19.2.1):
+  lucide-react@0.546.0(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
   magic-string@0.30.21:
     dependencies:
@@ -9870,13 +10045,13 @@ snapshots:
 
   motion-utils@12.23.6: {}
 
-  motion@12.23.24(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  motion@12.23.24(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      framer-motion: 12.23.24(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      framer-motion: 12.23.24(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
   mrmime@2.0.1:
     optional: true
@@ -9901,24 +10076,25 @@ snapshots:
 
   negotiator@0.6.3: {}
 
-  next@15.5.7(@babel/core@7.28.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next@16.1.0(@babel/core@7.28.5)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@next/env': 15.5.7
+      '@next/env': 16.1.0
       '@swc/helpers': 0.5.15
+      baseline-browser-mapping: 2.8.25
       caniuse-lite: 1.0.30001753
       postcss: 8.4.31
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.1)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.3)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 15.5.7
-      '@next/swc-darwin-x64': 15.5.7
-      '@next/swc-linux-arm64-gnu': 15.5.7
-      '@next/swc-linux-arm64-musl': 15.5.7
-      '@next/swc-linux-x64-gnu': 15.5.7
-      '@next/swc-linux-x64-musl': 15.5.7
-      '@next/swc-win32-arm64-msvc': 15.5.7
-      '@next/swc-win32-x64-msvc': 15.5.7
+      '@next/swc-darwin-arm64': 16.1.0
+      '@next/swc-darwin-x64': 16.1.0
+      '@next/swc-linux-arm64-gnu': 16.1.0
+      '@next/swc-linux-arm64-musl': 16.1.0
+      '@next/swc-linux-x64-gnu': 16.1.0
+      '@next/swc-linux-x64-musl': 16.1.0
+      '@next/swc-win32-arm64-msvc': 16.1.0
+      '@next/swc-win32-x64-msvc': 16.1.0
       sharp: 0.34.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -10160,16 +10336,16 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  react-dom@19.2.1(react@19.2.1):
+  react-dom@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
       scheduler: 0.27.0
 
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}
 
-  react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10):
+  react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10):
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
       '@react-native/assets-registry': 0.82.1
@@ -10178,7 +10354,7 @@ snapshots:
       '@react-native/gradle-plugin': 0.82.1
       '@react-native/js-polyfills': 0.82.1
       '@react-native/normalize-colors': 0.82.1
-      '@react-native/virtualized-lists': 0.82.1(@types/react@19.2.2)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.2)(bufferutil@4.0.9)(react@19.2.1)(utf-8-validate@5.0.10))(react@19.2.1)
+      '@react-native/virtualized-lists': 0.82.1(@types/react@19.2.7)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.2.7)(bufferutil@4.0.9)(react@19.2.3)(utf-8-validate@5.0.10))(react@19.2.3)
       abort-controller: 3.0.0
       anser: 1.4.10
       ansi-regex: 5.0.1
@@ -10197,7 +10373,7 @@ snapshots:
       nullthrows: 1.1.1
       pretty-format: 29.7.0
       promise: 8.3.0
-      react: 19.2.1
+      react: 19.2.3
       react-devtools-core: 6.1.5(bufferutil@4.0.9)(utf-8-validate@5.0.10)
       react-refresh: 0.14.2
       regenerator-runtime: 0.13.11
@@ -10208,7 +10384,7 @@ snapshots:
       ws: 6.2.3(bufferutil@4.0.9)(utf-8-validate@5.0.10)
       yargs: 17.7.2
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
     transitivePeerDependencies:
       - '@babel/core'
       - '@react-native-community/cli'
@@ -10219,44 +10395,44 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.2)(react@19.2.1):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.3
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  react-remove-scroll@2.7.1(@types/react@19.2.2)(react@19.2.1):
+  react-remove-scroll@2.7.1(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.2)(react@19.2.1)
-      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.1)
+      react: 19.2.3
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.3)
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.2)(react@19.2.1)
-      use-sidecar: 1.1.3(@types/react@19.2.2)(react@19.2.1)
+      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.3)
+      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  react-style-singleton@2.2.3(@types/react@19.2.2)(react@19.2.1):
+  react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.2.1
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  react-syntax-highlighter@15.6.6(react@19.2.1):
+  react-syntax-highlighter@15.6.6(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
       highlight.js: 10.7.3
       highlightjs-vue: 1.0.0
       lowlight: 1.20.0
       prismjs: 1.30.0
-      react: 19.2.1
+      react: 19.2.3
       refractor: 3.6.0
 
-  react@19.2.1: {}
+  react@19.2.3: {}
 
   readdirp@4.1.2: {}
 
@@ -10654,10 +10830,10 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
-  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.1):
+  styled-jsx@5.1.6(@babel/core@7.28.5)(react@19.2.3):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.1
+      react: 19.2.3
     optionalDependencies:
       '@babel/core': 7.28.5
 
@@ -10683,9 +10859,9 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  symbols-react@1.2.7(react@19.2.1):
+  symbols-react@1.2.7(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
   tailwind-merge@3.3.1: {}
 
@@ -10872,6 +11048,17 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
+  typescript-eslint@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   typescript@5.9.3: {}
 
   ufo@1.6.1: {}
@@ -10924,24 +11111,24 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-callback-ref@1.3.3(@types/react@19.2.2)(react@19.2.1):
+  use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  use-sidecar@1.1.3(@types/react@19.2.2)(react@19.2.1):
+  use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.3):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.2.1
+      react: 19.2.3
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.2
+      '@types/react': 19.2.7
 
-  use-sync-external-store@1.6.0(react@19.2.1):
+  use-sync-external-store@1.6.0(react@19.2.3):
     dependencies:
-      react: 19.2.1
+      react: 19.2.3
 
   utf-8-validate@5.0.10:
     dependencies:
@@ -11198,17 +11385,21 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  zod-validation-error@4.0.2(zod@4.2.1):
+    dependencies:
+      zod: 4.2.1
+
   zod@4.2.1: {}
 
-  zustand@4.5.7(@types/react@19.2.2)(react@19.2.1):
+  zustand@4.5.7(@types/react@19.2.7)(react@19.2.3):
     dependencies:
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.2.2
-      react: 19.2.1
+      '@types/react': 19.2.7
+      react: 19.2.3
 
-  zustand@5.0.9(@types/react@19.2.2)(react@19.2.1)(use-sync-external-store@1.6.0(react@19.2.1)):
+  zustand@5.0.9(@types/react@19.2.7)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
     optionalDependencies:
-      '@types/react': 19.2.2
-      react: 19.2.1
-      use-sync-external-store: 1.6.0(react@19.2.1)
+      '@types/react': 19.2.7
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)

From 8cfd5fa56e386740b6c77c20cd65280ffea222e8 Mon Sep 17 00:00:00 2001
From: Steven <sarmiento.steven@gmail.com>
Date: Fri, 19 Dec 2025 11:03:20 -0800
Subject: [PATCH 4/4] chore: Add 'none' to PriorityFeeLevel and fix type
 assertions

---
 examples/next-js/components/builder/builder-toolbar.tsx | 4 ++--
 examples/next-js/lib/builder/types.ts                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/next-js/components/builder/builder-toolbar.tsx b/examples/next-js/components/builder/builder-toolbar.tsx
index 4a1955b..b31b42a 100644
--- a/examples/next-js/components/builder/builder-toolbar.tsx
+++ b/examples/next-js/components/builder/builder-toolbar.tsx
@@ -237,8 +237,8 @@ export function BuilderToolbar({ compileContext, onSimulate }: BuilderToolbarPro
                 rpc: compileContext.rpc,
                 priorityFee: config.priorityFee,
                 computeUnits: config.computeUnits === 'auto' ? 200_000 : config.computeUnits,
-                autoRetry: { maxAttempts: 3, backoff: 'exponential' },
-                logLevel: 'verbose',
+                autoRetry: { maxAttempts: 3, backoff: 'exponential' as const },
+                logLevel: 'verbose' as const,
             };
 
             const builder = new TransactionBuilder(builderConfig)
diff --git a/examples/next-js/lib/builder/types.ts b/examples/next-js/lib/builder/types.ts
index 9c23261..bdedaf1 100644
--- a/examples/next-js/lib/builder/types.ts
+++ b/examples/next-js/lib/builder/types.ts
@@ -11,7 +11,7 @@ import type { Instruction, TransactionSigner, Rpc, RpcSubscriptions } from '@sol
  * Priority fee level for transaction configuration.
  * Matches the levels from @pipeit/core.
  */
-export type PriorityFeeLevel = 'low' | 'medium' | 'high' | 'veryHigh' | 'unsafeMax';
+export type PriorityFeeLevel = 'none' | 'low' | 'medium' | 'high' | 'veryHigh';
 
 /**
  * Address type alias for Solana addresses.