{"_id":"@agentkitai/formbridge-form-renderer","_rev":"2-7865b45ced01fecfa1c6b9e1ffe07456","name":"@agentkitai/formbridge-form-renderer","dist-tags":{"latest":"0.3.1"},"versions":{"0.3.0":{"name":"@agentkitai/formbridge-form-renderer","version":"0.3.0","keywords":["formbridge","react","form","renderer","json-schema","validation","accessibility"],"author":{"name":"FormBridge"},"license":"MIT","_id":"@agentkitai/formbridge-form-renderer@0.3.0","maintainers":[{"name":"amit-paz","email":"amit.paz@gmail.com"}],"dist":{"shasum":"29d6f40e3f56ae965fa27c9e131c0025157f2fbe","tarball":"https://registry.npmjs.org/@agentkitai/formbridge-form-renderer/-/formbridge-form-renderer-0.3.0.tgz","fileCount":2,"integrity":"sha512-n77tZkotsY6uCOvDmwnzSoyz5Vl4DdSkEm2+u7lhzN7WOobKK55/ZjGXUrTrKzs9wqJdvmCe4EV4nuRY14S0bw==","signatures":[{"sig":"MEUCIFDfpfcSmSBINCdg33LTnk49qYb2OWJamj7genpkhPtVAiEAxoe6OYiGK6gVncYk758PInEi0HwXUts/wY/PocTW+Dw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7729},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":"./dist/style.css"},"gitHead":"2bd30b08b5f4642ec78674662f9101bbf237869a","scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.tsx","test":"vitest run","build":"vite build","test:a11y":"vitest run --config vitest.a11y.config.ts","typecheck":"tsc --noEmit","test:watch":"vitest","test:integration":"vitest run --config vitest.integration.config.ts"},"_npmUser":{"name":"amit-paz","email":"amit.paz@gmail.com"},"_npmVersion":"11.5.2","description":"FormBridge form renderer with React components and hooks","directories":{},"_nodeVersion":"24.12.0","dependencies":{"ajv":"^8.12.0","ajv-formats":"^2.1.1","@agentkitai/formbridge-shared":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.11","jsdom":"^23.2.0","react":"^18.2.0","vitest":"^1.2.0","react-dom":"^18.2.0","@types/react":"^18.2.48","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^14.1.2","@testing-library/jest-dom":"^6.2.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formbridge-form-renderer_0.3.0_1782494693958_0.400022793681468","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@agentkitai/formbridge-form-renderer","version":"0.3.1","publishConfig":{"access":"public"},"description":"FormBridge form renderer with React components and hooks","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styles":"./dist/style.css"},"scripts":{"dev":"vite build --watch","build":"vite build","test":"vitest run","test:watch":"vitest","test:integration":"vitest run --config vitest.integration.config.ts","test:a11y":"vitest run --config vitest.a11y.config.ts","lint":"eslint src --ext .ts,.tsx","typecheck":"tsc --noEmit"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@agentkitai/formbridge-shared":"*","ajv":"^8.12.0","ajv-formats":"^2.1.1"},"devDependencies":{"@testing-library/jest-dom":"^6.2.0","@testing-library/react":"^14.1.2","@testing-library/user-event":"^14.5.2","@types/react":"^18.2.48","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1","jsdom":"^23.2.0","react":"^18.2.0","react-dom":"^18.2.0","vite":"^5.0.11","vite-plugin-dts":"^4.5.4","vitest":"^1.2.0"},"keywords":["formbridge","react","form","renderer","json-schema","validation","accessibility"],"author":{"name":"FormBridge"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/agentkitai/formbridge.git","directory":"packages/form-renderer"},"gitHead":"875f2feaa2fc057e05bcf42771d124636adc88cb","_id":"@agentkitai/formbridge-form-renderer@0.3.1","bugs":{"url":"https://github.com/agentkitai/formbridge/issues"},"homepage":"https://github.com/agentkitai/formbridge#readme","_nodeVersion":"24.18.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-gfdBdeIYbV+LOIdl+jiml7NTsZgIc9KLDmHXXkP+Gxa6XVyWl6a92xVUyIcgytdnG4g2eMsMXGqhzlMkT0PUxw==","shasum":"d8e020c23b45b1071d39458c9fcb9acb448c60bb","tarball":"https://registry.npmjs.org/@agentkitai/formbridge-form-renderer/-/formbridge-form-renderer-0.3.1.tgz","fileCount":2,"unpackedSize":7632,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@agentkitai%2fformbridge-form-renderer@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCxbRzssV/W4M08MyDTi2GZz8grfAntqjl9WHoH4BkpnAIhAJgxcv6VMO6QAT08KbMQXy4efwC+k2JhpkMr0CeDdGtC"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:5383a1f8-e6ce-43e3-8048-d97b8abef2f7"}},"directories":{},"maintainers":[{"name":"amit-paz","email":"amit.paz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/formbridge-form-renderer_0.3.1_1785686905512_0.3005741465612517"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-26T17:24:53.778Z","modified":"2026-08-02T16:08:25.964Z","0.3.0":"2026-06-26T17:24:54.110Z","0.3.1":"2026-08-02T16:08:25.645Z"},"author":{"name":"FormBridge"},"license":"MIT","keywords":["formbridge","react","form","renderer","json-schema","validation","accessibility"],"description":"FormBridge form renderer with React components and hooks","maintainers":[{"name":"amit-paz","email":"amit.paz@gmail.com"}],"readme":"# @agentkitai/formbridge-form-renderer\n\n> React component library for rendering FormBridge intake schemas as interactive forms with agent-human attribution tracking\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)](https://www.typescriptlang.org/)\n\n## Overview\n\n`@agentkitai/formbridge-form-renderer` provides a complete React toolkit for the FormBridge mixed-mode form system. It renders JSON Schema-based intake definitions as interactive forms, tracks which actor (agent or human) filled each field, and supports the full submission lifecycle including agent-to-human handoff and reviewer approval workflows.\n\n## Features\n\n- **Schema-driven rendering** — Automatically generates form fields from JSON Schema definitions\n- **Field attribution** — Visual badges show which actor (agent/human) filled each field\n- **Agent-to-human handoff** — `ResumeFormPage` loads submissions by resume token for human completion\n- **Approval workflow** — `ReviewerView` and `ApprovalActions` for review/approve/reject flows\n- **Multi-step wizards** — `WizardForm` with step validation, navigation, and progress tracking\n- **7 field types** — String, Number, Boolean, Enum, Object, Array, and File fields\n- **React hooks** — `useFormState`, `useValidation`, `useFormSubmission`, `useResumeSubmission`\n- **Built-in API client** — Typed client for all FormBridge HTTP endpoints\n\n## Installation\n\n```bash\nnpm install @agentkitai/formbridge-form-renderer\n```\n\nPeer dependencies:\n\n```bash\nnpm install react react-dom\n```\n\n## Quick Start\n\n```tsx\nimport { FormBridgeForm } from '@agentkitai/formbridge-form-renderer';\nimport '@agentkitai/formbridge-form-renderer/styles.css';\n\nconst schema = {\n  type: 'object',\n  properties: {\n    companyName: { type: 'string', title: 'Company Name' },\n    email: { type: 'string', format: 'email', title: 'Email' },\n  },\n  required: ['companyName', 'email'],\n};\n\nfunction MyForm() {\n  return (\n    <FormBridgeForm\n      schema={schema}\n      fields={{}}\n      fieldAttribution={{}}\n      currentActor={{ kind: 'human', id: 'user-1' }}\n      onFieldChange={(path, value, actor) => console.log(path, value)}\n      onSubmit={(fields) => console.log('Submit:', fields)}\n    />\n  );\n}\n```\n\n### Resume Flow (Agent-to-Human Handoff)\n\n```tsx\nimport { ResumeFormPage } from '@agentkitai/formbridge-form-renderer';\n\n// Renders a full form from a resume token (typically from a URL like /resume?token=rt_xyz)\nfunction ResumePage() {\n  return (\n    <ResumeFormPage\n      endpoint=\"http://localhost:3000\"\n      onLoad={(submissionId) => console.log('Loaded:', submissionId)}\n    />\n  );\n}\n```\n\n### Approval Workflow\n\n```tsx\nimport { ReviewerView, ApprovalActions } from '@agentkitai/formbridge-form-renderer';\n\nfunction ReviewPage({ submission, schema }) {\n  const reviewer = { kind: 'human', id: 'reviewer@acme.com' };\n\n  return (\n    <ReviewerView\n      submission={submission}\n      schema={schema}\n      reviewer={reviewer}\n      approvalActions={\n        <ApprovalActions\n          submissionId={submission.id}\n          resumeToken={submission.resumeToken}\n          reviewer={reviewer}\n          onApprove={(data) => fetch('/approve', { method: 'POST', body: JSON.stringify(data) })}\n          onReject={(data) => fetch('/reject', { method: 'POST', body: JSON.stringify(data) })}\n        />\n      }\n    />\n  );\n}\n```\n\n## API Surface\n\n### Components\n\n| Component | Description |\n|-----------|-------------|\n| `FormBridgeForm` | Main form component — renders schema as interactive fields |\n| `StringField` | Text input (supports email, url, date, textarea formats) |\n| `NumberField` | Numeric input with min/max constraints |\n| `BooleanField` | Checkbox input |\n| `EnumField` | Select dropdown or radio group |\n| `ObjectField` | Nested field group |\n| `ArrayField` | List with add/remove controls |\n| `FileField` | File upload with drag-and-drop |\n| `WizardForm` | Multi-step progressive form |\n| `ResumeFormPage` | Agent-to-human handoff page |\n| `ReviewerView` | Read-only submission review |\n| `ApprovalActions` | Approve/reject/request-changes buttons |\n| `ActorBadge` | Visual actor attribution badge |\n| `FieldWrapper` | Field label, description, and error wrapper |\n| `ErrorDisplay` | Structured error display |\n| `StepIndicator` | Wizard step progress indicator |\n\n### Hooks\n\n| Hook | Description |\n|------|-------------|\n| `useFormState` | Form data management with dirty tracking |\n| `useValidation` | Schema-based validation |\n| `useFormSubmission` | Full submission lifecycle (validate → submit → track) |\n| `useResumeSubmission` | Fetch submission by resume token |\n| `useWizardNavigation` | Wizard step state and navigation |\n| `useConditions` | Conditional field visibility |\n\n### API Client\n\n| Export | Description |\n|--------|-------------|\n| `FormBridgeApiClient` | Typed HTTP client for FormBridge API |\n| `createApiClient` | Factory function |\n| `defaultApiClient` | Singleton client instance |\n\n## Styling\n\nImport the default stylesheet:\n\n```tsx\nimport '@agentkitai/formbridge-form-renderer/styles.css';\n```\n\nAll components accept a `className` prop. Default CSS classes use the `formbridge-` prefix.\n\n## Documentation\n\nFull component and hook reference: [React Form Renderer docs](../docs-site/react/)\n\n## Testing\n\n```bash\ncd packages/form-renderer\nnpx vitest run                    # Run all tests\nnpx vitest run src/components/    # Run component tests only\n```\n\nTests use `jsdom` environment for DOM simulation.\n\n## Related Packages\n\n- `@agentkitai/formbridge-schema-normalizer` — Schema parsing and normalization\n- `@agentkitai/formbridge-admin-dashboard` — Admin UI for managing submissions\n- `@agentkitai/formbridge-create-formbridge` — Project scaffolding CLI\n","readmeFilename":"README.md","homepage":"https://github.com/agentkitai/formbridge#readme","repository":{"type":"git","url":"git+https://github.com/agentkitai/formbridge.git","directory":"packages/form-renderer"},"bugs":{"url":"https://github.com/agentkitai/formbridge/issues"}}