react-flow-node-ts

# React Flow Node Create React Flow node components following established patterns with proper TypeScript types and store integration. ## Quick Start Copy templates from [assets/](assets/) and replace placeholders: - `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`) - `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`) - `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`) ## Templates - [assets/template.tsx](assets/template.tsx) - Node component - [assets/types.template.ts](assets/types.template.ts) - TypeScript definitions ## Node Component Pattern ```tsx export const MyNode = memo(function MyNode({ id, data, selected, width, height, }: MyNodeProps) { const updateNode = useAppStore((state) => state.updateNode); const canvasMode = useAppStore((state) => state.canvasMode); return ( <> <NodeResizer isVisible={selected && canvasMode === 'editing'} /> <div className="node-container"> <Handle type="target" position={Position.Top} /> {/* Node content */} <Handle type="source" position={Position.Bottom} /> </div> </> ); }); ``` ## Type Definition Pattern ```typescript export interface MyNodeData extends Record<string, unknown> { title: string; description?: string; } export type MyNode = Node<MyNodeData, 'my-node'>; ``` ## Integration Steps 1. Add type to `src/frontend/src/types/index.ts` 2. Create component in `src/frontend/src/components/nodes/` 3. Export from ...