{"_id":"@codeflow-team/react","_rev":"3-b511969c8a3ebbe1c71c713ba95a81d9","name":"@codeflow-team/react","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@codeflow-team/react","version":"0.1.0","keywords":["codeflow","react","react-flow","xyflow","elkjs","monaco-editor","workflow","graph","visual-programming","agent"],"author":{"name":"Lucas"},"license":"AGPL-3.0-or-later","_id":"@codeflow-team/react@0.1.0","maintainers":[{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"}],"homepage":"https://github.com/codeflow-team/codeflow/tree/main/packages/react#readme","bugs":{"url":"https://github.com/codeflow-team/codeflow/issues"},"dist":{"shasum":"70fa7285097c9d1e520d311a5063fd731f6c9de2","tarball":"https://registry.npmjs.org/@codeflow-team/react/-/react-0.1.0.tgz","fileCount":297,"integrity":"sha512-gMjiKcjYIhR3b9JNNmmV7Zq4LePLGwQ+k0y0x+rGl2PwhnDm3RrKM1czUqcGY9cMe3A2nP/0DFqjPlA26Gs3qQ==","signatures":[{"sig":"MEYCIQDZq7Y72co42HVT601w938MZdqGAuZVw2qLRBs8491rLAIhAOyexM6Q06lo6PsIgNMx8vBf3oAmoHhlzcblJBkHrn2e","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@codeflow-team%2freact@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1302034},"main":"./dist/index.js","type":"module","_from":"file:/home/runner/work/_temp/dist/codeflow-team-react-0.1.0.tgz","types":"./dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"scripts":{"dev":"tsc -p tsconfig.build.json --watch --preserveWatchOutput","test":"vitest run","build":"tsc -p tsconfig.build.json && tailwindcss -i ./src/styles.css -o ./dist/styles.css && node ./scripts/copy-assets.mjs","build:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css","typecheck":"tsc --noEmit"},"_npmUser":{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"},"_resolved":"/home/runner/work/_temp/dist/codeflow-team-react-0.1.0.tgz","_integrity":"sha512-gMjiKcjYIhR3b9JNNmmV7Zq4LePLGwQ+k0y0x+rGl2PwhnDm3RrKM1czUqcGY9cMe3A2nP/0DFqjPlA26Gs3qQ==","repository":{"url":"git+https://github.com/codeflow-team/codeflow.git","type":"git","directory":"packages/react"},"_npmVersion":"12.0.2","description":"React canvas for CodeFlow graphs — React Flow nodes with ELK hierarchical layout, node inspector, Monaco code panel and diagnostics, wired to the core patch engine.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.19.0","dependencies":{"clsx":"^2.1.1","elkjs":"^0.11.0","lucide-react":"^1.33.0","@xyflow/react":"^12.8.6","tailwind-merge":"^3.6.0","@codeflow-team/core":"^0.1.0","@monaco-editor/react":"^4.7.0","class-variance-authority":"^0.7.1","@base-ui-components/react":"1.0.0-rc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.0","vitest":"^2.1.8","react-dom":"^19.2.0","typescript":"^5.7.2","tailwindcss":"^4.3.3","@types/react":"^19.2.2","@tailwindcss/cli":"^4.3.3","@types/react-dom":"^19.2.2"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1788193860313_0.2819768019434674","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@codeflow-team/react","version":"0.2.0","keywords":["codeflow","react","react-flow","xyflow","elkjs","monaco-editor","workflow","graph","visual-programming","agent"],"author":{"name":"Lucas"},"license":"AGPL-3.0-or-later","_id":"@codeflow-team/react@0.2.0","maintainers":[{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"}],"homepage":"https://github.com/codeflow-team/codeflow/tree/main/packages/react#readme","bugs":{"url":"https://github.com/codeflow-team/codeflow/issues"},"dist":{"shasum":"e5ce2afa280f95cbc9f5cf9f8bd56b3c796ee6ba","tarball":"https://registry.npmjs.org/@codeflow-team/react/-/react-0.2.0.tgz","fileCount":302,"integrity":"sha512-gyAyNah+W3wSaNXO1f5SEOjppE1JOZ53y7ffDspacz9h1LKhVdlS1T8d47NmD1zlELm85TQV3jNIWcXcIJERZw==","signatures":[{"sig":"MEYCIQCEZDmJO7nzUj/+LDqNkv88wT/Tn9ZMLFHp5QkwBICMDAIhAI9yVg+mOuWkMPn2UhR2kktPHJ/BwBLGnixlWlQUzmAq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@codeflow-team%2freact@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":1386357},"main":"./dist/index.js","type":"module","_from":"file:/home/runner/work/_temp/dist/codeflow-team-react-0.2.0.tgz","types":"./dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"scripts":{"dev":"tsc -p tsconfig.build.json --watch --preserveWatchOutput","test":"vitest run","build":"tsc -p tsconfig.build.json && tailwindcss -i ./src/styles.css -o ./dist/styles.css && node ./scripts/copy-assets.mjs","build:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css","typecheck":"tsc --noEmit"},"_npmUser":{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"},"_resolved":"/home/runner/work/_temp/dist/codeflow-team-react-0.2.0.tgz","_integrity":"sha512-gyAyNah+W3wSaNXO1f5SEOjppE1JOZ53y7ffDspacz9h1LKhVdlS1T8d47NmD1zlELm85TQV3jNIWcXcIJERZw==","repository":{"url":"git+https://github.com/codeflow-team/codeflow.git","type":"git","directory":"packages/react"},"_npmVersion":"12.0.2","description":"React canvas for CodeFlow graphs — React Flow nodes with ELK hierarchical layout, node inspector, Monaco code panel and diagnostics, wired to the core patch engine.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.19.0","dependencies":{"clsx":"^2.1.1","elkjs":"^0.11.0","lucide-react":"^1.33.0","@xyflow/react":"^12.8.6","tailwind-merge":"^3.6.0","@codeflow-team/core":"^0.2.0","@monaco-editor/react":"^4.7.0","class-variance-authority":"^0.7.1","@base-ui-components/react":"1.0.0-rc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.0","vitest":"^2.1.8","react-dom":"^19.2.0","typescript":"^5.7.2","tailwindcss":"^4.3.3","@types/react":"^19.2.2","@tailwindcss/cli":"^4.3.3","@types/react-dom":"^19.2.2"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.0_1788201243338_0.0011254876267490221","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@codeflow-team/react","version":"0.3.0","description":"React canvas for CodeFlow graphs — React Flow nodes with ELK hierarchical layout, node inspector, Monaco code panel and diagnostics, wired to the core patch engine.","keywords":["codeflow","react","react-flow","xyflow","elkjs","monaco-editor","workflow","graph","visual-programming","agent"],"license":"AGPL-3.0-or-later","author":{"name":"Lucas"},"homepage":"https://github.com/codeflow-team/codeflow/tree/main/packages/react#readme","repository":{"type":"git","url":"git+https://github.com/codeflow-team/codeflow.git","directory":"packages/react"},"bugs":{"url":"https://github.com/codeflow-team/codeflow/issues"},"type":"module","sideEffects":["**/*.css"],"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"engines":{"node":">=20"},"publishConfig":{"access":"public"},"dependencies":{"@base-ui-components/react":"1.0.0-rc.0","@monaco-editor/react":"^4.7.0","@xyflow/react":"^12.8.6","class-variance-authority":"^0.7.1","clsx":"^2.1.1","elkjs":"^0.11.0","lucide-react":"^1.33.0","tailwind-merge":"^3.6.0","@codeflow-team/core":"^0.3.0"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"devDependencies":{"@tailwindcss/cli":"^4.3.3","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","react":"^19.2.0","react-dom":"^19.2.0","tailwindcss":"^4.3.3","typescript":"^5.7.2","vitest":"^2.1.8"},"scripts":{"build":"tsc -p tsconfig.build.json && tailwindcss -i ./src/styles.css -o ./dist/styles.css && node ./scripts/copy-assets.mjs","dev":"tsc -p tsconfig.build.json --watch --preserveWatchOutput","typecheck":"tsc --noEmit","test":"vitest run","build:css":"tailwindcss -i ./src/styles.css -o ./dist/styles.css"},"_id":"@codeflow-team/react@0.3.0","_integrity":"sha512-0swAqinRO8g3ZXIA0ztWeZDUrqAcQ7LSw6TDNgQ/WL0CAKqQw7cM2ot27OUAhG66JNfYYAYn1X9Iw9ZmXd4DAg==","_resolved":"/home/runner/work/_temp/dist/codeflow-team-react-0.3.0.tgz","_from":"file:/home/runner/work/_temp/dist/codeflow-team-react-0.3.0.tgz","_nodeVersion":"24.19.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-0swAqinRO8g3ZXIA0ztWeZDUrqAcQ7LSw6TDNgQ/WL0CAKqQw7cM2ot27OUAhG66JNfYYAYn1X9Iw9ZmXd4DAg==","shasum":"1aad5e006120a99d3ecc1d7ad96944b4d5799089","tarball":"https://registry.npmjs.org/@codeflow-team/react/-/react-0.3.0.tgz","fileCount":302,"unpackedSize":1386357,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@codeflow-team%2freact@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB2vtn0YGANXwhNBxAdTZx+O4WS5fnie/cyQqOTzM1cfAiAo8YjU0FL2tZgEN7+DByBRN1OSGAUUeyUoctm0V4Okig=="}]},"_npmUser":{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"},"directories":{},"maintainers":[{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.3.0_1788356162765_0.7302319666288022"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-31T16:31:00.082Z","modified":"2026-09-02T13:36:03.314Z","0.1.0":"2026-08-31T16:31:00.466Z","0.2.0":"2026-08-31T18:34:03.526Z","0.3.0":"2026-09-02T13:36:02.902Z"},"bugs":{"url":"https://github.com/codeflow-team/codeflow/issues"},"author":{"name":"Lucas"},"license":"AGPL-3.0-or-later","homepage":"https://github.com/codeflow-team/codeflow/tree/main/packages/react#readme","keywords":["codeflow","react","react-flow","xyflow","elkjs","monaco-editor","workflow","graph","visual-programming","agent"],"repository":{"type":"git","url":"git+https://github.com/codeflow-team/codeflow.git","directory":"packages/react"},"description":"React canvas for CodeFlow graphs — React Flow nodes with ELK hierarchical layout, node inspector, Monaco code panel and diagnostics, wired to the core patch engine.","maintainers":[{"name":"lucas.pmd","email":"phanminhduong2212@gmail.com"}],"readme":"# `@codeflow-team/react`\n\nThe UI layer. A React Flow canvas with hierarchical ELK layout (loops and `try` blocks are real containers, not decorations), an inspector that edits through the patch engine, a Monaco panel with two-way selection sync, a diff preview, a diagnostics panel, three progressive-disclosure levels and a light/dark design system.\n\nEverything the MVP cannot do renders as a disabled control with the reason next to it. The UI is not allowed to fail silently or approximate.\n\nSee the [root README](../../README.md) for screenshots and the wider picture.\n\n## Install\n\nPrepared for npm as v0.1.0; until the first release lands, use the workspace copy:\n\n```jsonc\n// package.json\n\"dependencies\": { \"@codeflow-team/react\": \"workspace:*\" }\n```\n\nReact 18 or 19 is a peer dependency. Two stylesheets must be imported by the host app:\n\n```ts\nimport \"@xyflow/react/dist/style.css\";\nimport \"@codeflow-team/react/styles.css\";\n```\n\n## The shape of a host app\n\nThe host owns the source text and the graph; the provider owns everything else. This type-checks against the workspace as written:\n\n```tsx\nimport { useEffect, useState } from \"react\";\nimport { createCodeFlow, createRegistry, type WorkflowGraph } from \"@codeflow-team/core\";\nimport { CodeFlowProvider, WorkflowCanvas, NodeInspector } from \"@codeflow-team/react\";\n\nconst session = createCodeFlow({ registry: createRegistry({ tools: [] }) });\n\nexport function Editor({ file }: { file: string }): React.ReactNode {\n  const [source, setSource] = useState(file);\n  const [graph, setGraph] = useState<WorkflowGraph | null>(null);\n\n  useEffect(() => {\n    void session.analyze(source, { file: \"flow.ts\" }).then(setGraph);\n  }, [source]);\n\n  return (\n    <CodeFlowProvider\n      session={session}\n      graph={graph}\n      source={source}\n      onPatched={(result) => {\n        setSource(result.source);   // the patched file — this is the source of truth\n        setGraph(result.graph);\n      }}\n      onGraphSync={setGraph}\n    >\n      <WorkflowCanvas />\n      <NodeInspector />\n    </CodeFlowProvider>\n  );\n}\n```\n\n## The components that matter\n\n| Export | What it is |\n|---|---|\n| `CodeFlowProvider` | Holds the session, the graph, the selection and the editing state. Also takes `source` (so patch conflicts can be detected when the editor is ahead of the graph), `mode` / `defaultMode` for the disclosure level, `run` for live execution state, and `editable={false}` to switch editing off entirely. |\n| `WorkflowCanvas` | The diagram. ELK hierarchical layout, resizable containers, coloured branch labels, folding, minimap, and a select-to-reveal rule for data edges. |\n| `NodeInspector` | The edit surface: fields, condition, iterable, tool swap, delete with its dependency check, code region, and a diff preview before Apply. Renders as a right-hand dock, or as a sheet on a narrow screen. |\n| `CodePanel` / `CodeDialog` | Monaco, synced both ways — select a node and the code highlights; move the cursor and the node selects. `CodeDialog` is the \"Edit Code\" modal for an opaque region. |\n| `DiagnosticsPanel` | Everything the analyzer could not fully understand, each entry linked to its node. |\n\nPlus the controls a host needs to build its own chrome: `DisclosureToggle`, `DataLinksToggle`, `ThemeToggle`, `applyTheme` / `useTheme`, and a shadcn-shaped design system over Base UI primitives (`Button`, `Badge`, `Select`, `Modal`, `Sheet`, `Popover`, `Segmented`, `Notice`, `ToastHost`, `useToast`, `TooltipProvider`) — exported so an app builds its top bar out of the same parts the library uses instead of approximating them.\n\n## Hooks and pure helpers\n\n`useCodeFlow`, `useOptionalCodeFlow`, `useSelectedNode`, `useNodeDiagnostics` read the provider. Below them, the adapters are exported as plain functions and are the unit-test surface: `toReactFlow`, `toElkGraph` / `runLayout` / `useElkLayout`, `autoCollapse` / `buildCollapseView`, `buildDataLinks`, `resolveInspectorFields`, `encodeFieldValue`, `nodeSummaryRows`. None of them need React to run.\n\n## Note for library development\n\n`context/provider.tsx` exports exactly one component, and the context object is cached on `globalThis` by `context/context.ts`. Both are load-bearing: a module that creates a context at module scope *and* exports non-components is not a valid Fast Refresh boundary, so a rebuild produced a second context object, the provider and its consumers stopped meeting, and the app went white. Three regression tests hold that shut.\n\n## Tests\n\n```bash\npnpm --filter @codeflow-team/react test   # 155 tests\n```\n\n## License\n\n[GNU AGPL v3 or later](LICENSE).\n","readmeFilename":"README.md"}