{"_id":"@aigentive/wire-react","_rev":"2-e857450a79865d4cea7668337e9da84e","name":"@aigentive/wire-react","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.4":{"name":"@aigentive/wire-react","version":"1.0.4","license":"Apache-2.0","_id":"@aigentive/wire-react@1.0.4","maintainers":[{"name":"lazabogdan","email":"laza.bogdan@macro-net.ro"},{"name":"themefy","email":"adrian@themefy.io"}],"homepage":"https://github.com/aigentive/wirediagram#readme","bugs":{"url":"https://github.com/aigentive/wirediagram/issues"},"dist":{"shasum":"386961d94e7f6df4aaf4443313277433791e064f","tarball":"https://registry.npmjs.org/@aigentive/wire-react/-/wire-react-1.0.4.tgz","fileCount":150,"integrity":"sha512-YJWGdHk75JGyDmjen2+kIHNNwWWVqjx6jtklyEQ8QOVdrZQ2rZTdqLa6+v/Re9loVTziynsv7EPH8bSESqgE9Q==","signatures":[{"sig":"MEUCIQCYN+wQKR45CNO6CSslbPFtRPV7hq3sKfO3M4bBrKT/XwIgD9fvW6l+wojaRxj8kz7TULWUdyx+UkAipNx6gshUe1I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aigentive%2fwire-react@1.0.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":377276},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./compile":{"types":"./dist/compile.d.ts","default":"./dist/compile.js"}},"gitHead":"12594c6937561cfc522c5692fa236a1882d51c5e","scripts":{"test":"vitest run --root ../.. packages/wire-react/src","build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json","test:coverage":"vitest run --root ../.. packages/wire-react/src --coverage --coverage.include='packages/wire-react/src/**/*.{ts,tsx}' --coverage.exclude='packages/wire-react/src/**/*.test.{ts,tsx}' --coverage.exclude='packages/wire-react/src/index.ts' --coverage.exclude='packages/wire-react/src/primitives/index.ts' --coverage.exclude='packages/wire-react/src/provider/types.ts' --coverage.thresholds.lines=80 --coverage.thresholds.functions=80 --coverage.thresholds.branches=80 --coverage.thresholds.statements=80"},"_npmUser":{"name":"themefy","email":"adrian@themefy.io"},"repository":{"url":"git+https://github.com/aigentive/wirediagram.git","type":"git","directory":"packages/wire-react"},"_npmVersion":"10.8.2","description":"Wire — JSX facade. Author diagrams as React components; compile to canonical Wire JSON.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"@aigentive/wire-core":"^1.0.4"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.12","@types/react-dom":"^18.3.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/wire-react_1.0.4_1783027536357_0.9103182132955805","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@aigentive/wire-react","version":"1.1.0","description":"Wire — JSX facade. Author diagrams as React components; compile to canonical Wire JSON.","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/aigentive/wirediagram.git","directory":"packages/wire-react"},"type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./compile":{"types":"./dist/compile.d.ts","default":"./dist/compile.js"},"./styles.css":"./dist/styles.css"},"sideEffects":["./src/styles.css","./dist/styles.css"],"scripts":{"clean":"node scripts/build.mjs --clean","build":"node scripts/build.mjs","test":"vitest run --root ../.. packages/wire-react/src","test:coverage":"vitest run --root ../.. packages/wire-react/src --coverage --coverage.include='packages/wire-react/src/**/*.{ts,tsx}' --coverage.exclude='packages/wire-react/src/**/*.test.{ts,tsx}' --coverage.exclude='packages/wire-react/src/index.ts' --coverage.exclude='packages/wire-react/src/primitives/index.ts' --coverage.exclude='packages/wire-react/src/provider/types.ts' --coverage.thresholds.lines=80 --coverage.thresholds.functions=80 --coverage.thresholds.branches=80 --coverage.thresholds.statements=80","typecheck":"tsc --noEmit -p tsconfig.json"},"dependencies":{"@aigentive/wire-core":"^1.0.4"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","react":"^18.3.1","react-dom":"^18.3.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@aigentive/wire-react@1.1.0","gitHead":"aef222aff0a038686f1bf8422a388553a677e3c3","bugs":{"url":"https://github.com/aigentive/wirediagram/issues"},"homepage":"https://github.com/aigentive/wirediagram#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-tmHAuQiiXaLg56newcvhJQrrFtFf5Lfi2XJbrYmUQXT3zfTesYsvj9txxr7AltVJ9IfVq6R8f6rKJ69Kry3+FQ==","shasum":"6fef1dabe26dad5a78912f61b9f0e1dd1740c58c","tarball":"https://registry.npmjs.org/@aigentive/wire-react/-/wire-react-1.1.0.tgz","fileCount":171,"unpackedSize":625941,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aigentive%2fwire-react@1.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDQmYkT2mWnJBD9DkLIeVHDtAfleoaKJPKordKbpjU46AIhAL1LZJ5/7VcTDqxmQ9gYi4AzZKkiqCnfQ5Twh97IffC6"}]},"_npmUser":{"name":"themefy","email":"adrian@themefy.io"},"directories":{},"maintainers":[{"name":"lazabogdan","email":"laza.bogdan@macro-net.ro"},{"name":"themefy","email":"adrian@themefy.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wire-react_1.1.0_1783100600285_0.61852595128655"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T21:25:36.175Z","modified":"2026-07-03T17:43:20.699Z","1.0.4":"2026-07-02T21:25:36.568Z","1.1.0":"2026-07-03T17:43:20.422Z"},"bugs":{"url":"https://github.com/aigentive/wirediagram/issues"},"license":"Apache-2.0","homepage":"https://github.com/aigentive/wirediagram#readme","repository":{"type":"git","url":"git+https://github.com/aigentive/wirediagram.git","directory":"packages/wire-react"},"description":"Wire — JSX facade. Author diagrams as React components; compile to canonical Wire JSON.","maintainers":[{"name":"lazabogdan","email":"laza.bogdan@macro-net.ro"},{"name":"themefy","email":"adrian@themefy.io"}],"readme":"# @aigentive/wire-react\n\nJSX facade for Wire diagrams. Author diagrams as React components, compile to canonical Wire JSON.\n\n## Install\n\n```bash\nnpm install @aigentive/wire-react react react-dom\n```\n\nImport the package stylesheet once in your app entry:\n\n```tsx\nimport \"@aigentive/wire-react/styles.css\";\n```\n\n`<Flow>` renders as inline SVG by default. `<WireCanvas>` provides the native interactive canvas; no separate canvas-engine package is required and no utility-class source scan is required.\n\n## Use\n\n```tsx\nimport {\n  Flow,\n  TriggerNode,\n  AINode,\n  ConditionNode,\n  ActionNode,\n  Note\n} from \"@aigentive/wire-react\";\n\nexport function Example() {\n  return (\n    <Flow layout=\"LR\">\n      <TriggerNode id=\"webhook\" title=\"Webhook fires\" />\n      <AINode id=\"classify\" title=\"Classify intent\" from=\"webhook\" model=\"gpt-4.1\" />\n      <ConditionNode\n        id=\"route\"\n        title=\"Route request\"\n        from=\"classify\"\n        branches={[\"sales\", \"support\", \"other\"]}\n      />\n      <ActionNode id=\"notify-sales\" title=\"Notify sales\" from=\"route.sales\" tone=\"success\" />\n      <ActionNode id=\"open-ticket\" title=\"Open ticket\" from=\"route.support\" tone=\"warning\" />\n      <Note id=\"risk-note\" title=\"Routing risk\" attachedTo=\"classify\">\n        Check confidence before routing.\n      </Note>\n    </Flow>\n  );\n}\n```\n\n## Components\n\n| Component | Wire kind |\n|---|---|\n| `<TriggerNode>` | trigger |\n| `<ActionNode>` | action |\n| `<AINode>` | ai (props: `model`, `prompt`, `tools`) |\n| `<ToolNode>` | tool (`ref`) |\n| `<ConditionNode>` | condition (`branches: string[]` required) |\n| `<HumanNode>` | human |\n| `<MemoryNode>` | memory |\n| `<RetrievalNode>` | retrieval |\n| `<GuardrailNode>` | guardrail |\n| `<EndNode>` | end |\n| `<Note>` | note (`body` or `children`, `attachedTo`) |\n| `<Group>` | group (children become group members; `parent` auto-set) |\n\nAll components accept the common base props: `id`, `title`, `description`, `tone`, `from`, `attachedTo`, `parent`, `data`, `position`, `size`.\n\n## `<Flow>` modes\n\n- `mode=\"svg\"` (default) — server-renderable inline SVG. Works in any React tree (server components, RSC, plain SPA, static export).\n- `mode=\"json\"` — invisible. Use with `onCompile` to capture the JSON.\n\n```tsx\n<Flow mode=\"json\" onCompile={(d) => console.log(JSON.stringify(d, null, 2))}>\n  <TriggerNode id=\"t\" title=\"Tick\" />\n</Flow>\n```\n\n## Native pan/zoom canvas\n\nFor interactive canvases, compile JSX to a Wire diagram and render it through the built-in provider and canvas.\n\n```tsx\n\"use client\";\nimport \"@aigentive/wire-react/styles.css\";\nimport {\n  Flow,\n  TriggerNode,\n  AINode,\n  useWireDiagram,\n  WireProvider,\n  WireCanvas\n} from \"@aigentive/wire-react\";\n\nexport function MyDiagram() {\n  const diagram = useWireDiagram(\n    <Flow layout=\"LR\">\n      <TriggerNode id=\"t\" title=\"Tick\" />\n      <AINode id=\"plan\" title=\"Plan\" from=\"t\" model=\"gpt-4.1\" />\n    </Flow>\n  );\n  return (\n    <div className=\"h-[600px]\">\n      <WireProvider diagram={diagram}>\n        <WireCanvas mode=\"edit\" />\n      </WireProvider>\n    </div>\n  );\n}\n```\n\n## LLM-friendly editor extensions\n\nMost apps should extend the built-in canvas with Wire-level props and keep\n`WireDiagram` plus reducer actions as the app contract:\n\n```tsx\nimport {\n  WireWorkspace,\n  type WireOptionCatalog\n} from \"@aigentive/wire-react\";\nimport \"@aigentive/wire-react/styles.css\";\n\nconst options: WireOptionCatalog = {\n  ai: [\n    { key: \"model\", storage: \"node\", type: \"select\", options: [\"gpt-4.1\", \"gpt-4.1-mini\"] },\n    { key: \"temperature\", type: \"number\", min: 0, max: 2, step: 0.1 }\n  ]\n};\n\nexport function AgentEditor({ diagram, onChange }) {\n  return (\n    <WireWorkspace\n      diagram={diagram}\n      onChange={onChange}\n      optionCatalog={options}\n      title=\"Agent workflow\"\n      subtitle={`${diagram.nodes.length} nodes`}\n    />\n  );\n}\n```\n\nOption values are serializable Wire data. Runtime render callbacks are React-only\nand are never stored in canonical JSON.\n\nCards, node lists, and canvas clicks emit Wire events such as `node.inspect` and\n`edge.click`. `WireInspector` can follow selection or receive explicit `nodeId`\nand `edgeId` values, and `WireOptionPanel` can follow selection or receive a\ncontrolled `nodeId`. This keeps card rendering decoupled from sidebars.\n\n## Production component patterns\n\nControlled editor with the packaged shell:\n\n```tsx\nimport \"@aigentive/wire-react/styles.css\";\nimport { useState } from \"react\";\nimport { WireWorkspace, type WireDiagram } from \"@aigentive/wire-react\";\n\nexport function ProductEditor({ initial }: { initial: WireDiagram }) {\n  const [diagram, setDiagram] = useState(initial);\n  return <WireWorkspace diagram={diagram} onChange={setDiagram} fitView />;\n}\n```\n\nCustom shell with current components:\n\n```tsx\nimport \"@aigentive/wire-react/styles.css\";\nimport {\n  WireCanvas,\n  WireInspector,\n  WirePalette,\n  WireProvider,\n  WireToolbar,\n  WireValidationPanel\n} from \"@aigentive/wire-react\";\n\nexport function CustomEditor({ diagram, onChange }) {\n  return (\n    <WireProvider diagram={diagram} onChange={onChange}>\n      <WireToolbar />\n      <WirePalette />\n      <WireCanvas mode=\"edit\" fitView keyboardA11y />\n      <WireInspector />\n      <WireValidationPanel />\n    </WireProvider>\n  );\n}\n```\n\nRead-only viewer:\n\n```tsx\nimport \"@aigentive/wire-react/styles.css\";\nimport { WireViewer } from \"@aigentive/wire-react\";\n\nexport function Preview({ diagram }) {\n  return <WireViewer diagram={diagram} fitView colorMode=\"system\" />;\n}\n```\n\nTheming and design-system integration use current props: `colorMode`,\n`unstyled`, `className`, `classNames`, `style`, and CSS variables. Keyboard\nnavigation, search, connection picking, fit selection, and large-diagram mode are\nowned by `WireCanvas`; disable package keyboard handling only with\n`keyboardA11y={false}` when your host shell fully replaces it.\n\nSee the root docs for the full component prop surface:\n[`docs/REACT_COMPONENTS.md`](../../docs/REACT_COMPONENTS.md). The playground\nroutes `/docs` and `/samples/agent-chain` showcase the reusable component\nsystem, docs, and full app sample.\n\n## Manual compilation\n\n```ts\nimport { compile } from \"@aigentive/wire-react\";\nconst diagram = compile(<Flow>...</Flow>);\n```\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md"}