feat(flow-builder): add reusable field components for form customization

- Introduced various field components (text, editor, picker, array, file/grid, choice, async options, tabs) to support flexible form input rendering in Flow Builder.
- Added `FieldWrapper` for consistent layout and labeling across fields.
- Implemented custom `BuilderEdge` and `BuilderConnectionLine` for enhanced edge handling on the canvas.

Author: CoderYellow

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+    root: true,
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:prettier/recommended'],
+    settings: {
+        react: {
+            version: 'detect'
+        }
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaFeatures: { jsx: true }
+    },
+    env: {
+        browser: true,
+        node: true,
+        es2020: true,
+        jest: true
+    },
+    ignorePatterns: ['**/node_modules', '**/dist', '**/build', '**/coverage', '**/package-lock.json'],
+    plugins: ['unused-imports'],
+    rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        'no-unused-vars': 'off',
+        'unused-imports/no-unused-imports': 'warn',
+        'unused-imports/no-unused-vars': ['warn', { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' }],
+        'no-undef': 'off',
+        'no-console': [process.env.CI ? 'error' : 'warn', { allow: ['warn', 'error', 'info'] }],
+        'prettier/prettier': 'error',
+        'react/prop-types': 'off'
+    }
+}

.gitignore

@@ -0,0 +1,29 @@
+# editor
+.idea
+.vscode
+
+# dependencies
+**/node_modules
+**/package-lock.json
+**/yarn.lock
+
+## logs
+**/logs
+**/*.log
+
+## pnpm
+.pnpm-store/
+
+## build
+**/dist
+**/build
+
+## temp
+**/tmp
+**/temp
+
+## test
+**/coverage
+
+# misc
+.DS_Store

.npmrc

@@ -0,0 +1,7 @@
+auto-install-peers = true
+strict-peer-dependencies = false
+prefer-workspace-packages = true
+link-workspace-packages = deep
+hoist = true
+shamefully-hoist = true
+engine-strict = false

.nvmrc

@@ -0,0 +1 @@
+v24.15.0

README.md

@@ -0,0 +1,125 @@
+# flowkit
+
+A **common, abstract, portable, configurable visual-builder UI kit** for React —
+the canvas UX extracted from [Flowise](https://github.com/FlowiseAI/Flowise)'s
+Agentflow builder and generalized so other products (BPMN builders, data-pipeline
+studios, automation designers, …) can stand up the same polished node-editor
+experience with a single config object.
+
+## Layers
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ Your app — supplies ONE config object:                        │
+│ registry, rules, renderers, persistence, slots                │
+├──────────────────────────────────────────────────────────────┤
+│ @flowkit/flow-builder — the canvas kit                        │
+│ FlowBuilderCanvas · NodePalette · SchemaFields                │
+│ PropertyInspectorDialog · BuilderNode/Edge · GroupNode        │
+│ FlowBuilderProvider (graph CRUD, dirty state, selection)      │
+├──────────────────────────────────────────────────────────────┤
+│ @flowkit/ui-foundation — the design system                    │
+│ theme factory (light/dark) · MainCard · buttons · inputs      │
+│ Dropdown/AsyncDropdown · CodeEditor · JsonEditor · DataGrid   │
+│ ConfirmDialog · Loader · hooks · utils                        │
+└──────────────────────────────────────────────────────────────┘
+```
+
+The kit never imports an API client, a store, or a domain constant — everything
+domain-specific is injected through `FlowBuilderConfig`.
+
+## Quick start
+
+```tsx
+import { FlowBuilderProvider, FlowBuilderCanvas, typedPortsIsValidConnection } from '@flowkit/flow-builder'
+import { FlowkitThemeProvider } from '@flowkit/ui-foundation'
+import '@flowkit/flow-builder/styles.css'
+
+const operators = [
+    {
+        name: 'httpSource',
+        label: 'HTTP Source',
+        category: 'Sources',
+        color: '#7C3AED',
+        baseClasses: ['Record[]'],
+        inputs: [{ label: 'URL', name: 'url', type: 'string' }]
+    }
+    // …transforms and sinks
+]
+
+const config = {
+    registry: { list: async () => operators },
+    isValidConnection: typedPortsIsValidConnection, // typed ports
+    outputStrategy: 'standard',
+    onSave: (doc) => localStorage.setItem('my-flow', JSON.stringify(doc))
+}
+
+export const Studio = () => (
+    <FlowkitThemeProvider>
+        <FlowBuilderProvider config={config}>
+            <FlowBuilderCanvas />
+        </FlowBuilderProvider>
+    </FlowkitThemeProvider>
+)
+```
+
+A complete data-pipeline studio (typed ports, schema-driven property forms,
+palette search, minimap, dark mode, save/load) is ~100 lines of config.
+
+## What's configurable
+
+| Area | Config hook | Default |
+| --- | --- | --- |
+| Node source | `registry: NodeRegistryAdapter` | — (required) |
+| Form fields | `fieldRenderers` (by type or `node:param`) | 17 built-in renderers |
+| Node/edge look | `nodeRenderers`, `edgeRenderers` | v2-Agentflow-style cards & gradient edges |
+| Connection rules | `isValidConnection` | no self-loops, no cycles |
+| Typed ports | — | compose `typedPortsIsValidConnection` |
+| Drop rules | `validateDrop` (singletons, group rules) | allow all |
+| On-connect side effects | `onConnectInput` (e.g. Flowise `{{ref}}`) | none |
+| Serialization | `serialize` / `deserialize` | React Flow `toObject()` |
+| Persistence | `onSave`, `initialFlow` | — |
+| Colors | `resolveNodeColor`, `connectionLineColor` | `data.color`, theme primary |
+| Node extras | `renderNodeSummary`, `onNodeInfo`, `resolveNodeWarning`, `canDuplicateNode` | off |
+| Features | `features.{minimap,stickyNote,groupNodes,snapping,backgroundDots,palette,readOnly}` | on |
+| Slots | `slots.{header,floatingActions}` | — |
+
+## Documentation
+
+Full technical docs in [`docs/`](docs) (AsciiDoc):
+
+- [Architecture & mental model](docs/architecture.adoc) — layers, data flow, state ownership, the three core conventions
+- [Graph node model spec](docs/node-model.adoc) — schemas, params, anchors, handle-id grammar, visibility engine, edges, FlowDocument
+- [Backend API spec](docs/backend-api-spec.adoc) — node registry, icons, async options, persistence, concurrency
+- [Configuration reference](docs/configuration.adoc) — `FlowBuilderConfig`, features, slots, theming, context API
+- [Extending flowkit](docs/extending.adoc) — registries, field/node/edge renderers, connection rules, serializers, walkthroughs
+
+## Repo layout
+
+```
+packages/
+  ui-foundation/   @flowkit/ui-foundation — theme, generic components, hooks, utils
+  flow-builder/    @flowkit/flow-builder  — the visual builder kit
+examples/
+  playground/      two demos on one kit: data-pipeline studio + BPMN builder
+```
+
+## Develop
+
+```bash
+pnpm install
+pnpm -r build          # build packages (topological order)
+pnpm -r test           # unit tests (utils, search, visibility, graph, handles)
+pnpm --filter flowkit-playground dev   # run the demos on :5174
+```
+
+## Status & roadmap
+
+- [x] ui-foundation: theme factory + controlled/uncontrolled dark mode
+- [x] flow-builder: canvas, palette, schema-driven forms, group nodes, sticky notes
+- [x] playground demos (data-pipeline, BPMN)
+- [ ] Flowise v2 Agentflow canvas running on the kit (adapter in the Flowise repo)
+- [ ] v1 chatflow-style inline params on node bodies (`nodeEditMode: 'inline'`)
+- [ ] Undo/redo, multi-select sub-graph copy/paste, alignment guides
+
+License: Apache-2.0. Extracted with care from Flowise (Apache-2.0).