{"_id":"@asyncflowstate/react","_rev":"5-64b66e7945bd2b2b403e9b6db018a662","name":"@asyncflowstate/react","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.1":{"name":"@asyncflowstate/react","version":"1.0.1","keywords":["react","hooks","async","state","loading","error-handling","ux","useFlow","react-hooks","nextjs","typescript","api-client","frontend","declarative-ui","component-logic","data-fetching"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/react@1.0.1","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://github.com/devhimanshuu/asyncflowstate#readme","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"9369c4a05c5cf54e8e340a140d55fdbec76b194d","tarball":"https://registry.npmjs.org/@asyncflowstate/react/-/react-1.0.1.tgz","fileCount":9,"integrity":"sha512-gXwrY2xX3CmTr8GLZTP5mNSVrQmtt76lFtcstm5P1YP1A1Xdlcia4el8VeneakdiEErnKyx98xv5yij4BeZP3Q==","signatures":[{"sig":"MEUCIQC2mcY7AsxN/W8orefUT06Oq5Jv38XrVhy1ALGIXAsL9AIgOoWw5lyIbk1WkmYLeTVLTUFbygWyzLgsdHpJbF8972I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":539448},"main":"./dist/index.js","_from":"file:asyncflowstate-react-1.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=16.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"C:\\Users\\pc\\AppData\\Local\\Temp\\89f4281e5958ae4059767850be13d963\\asyncflowstate-react-1.0.1.tgz","_integrity":"sha512-gXwrY2xX3CmTr8GLZTP5mNSVrQmtt76lFtcstm5P1YP1A1Xdlcia4el8VeneakdiEErnKyx98xv5yij4BeZP3Q==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/react"},"_npmVersion":"11.4.2","description":"Official React bindings for AsyncFlowState. Declarative hooks (useFlow, useFlowParallel) for managing async loading, error, and success states effortlessly.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.1","dependencies":{"@asyncflowstate/core":"1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.27","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_1.0.1_1774805191306_0.2591867057485928","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@asyncflowstate/react","version":"2.0.0","keywords":["react","hooks","async","state","loading","error-handling","ux","useFlow","react-hooks","nextjs","typescript","api-client","frontend","declarative-ui","component-logic","data-fetching"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/react@2.0.0","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://github.com/devhimanshuu/asyncflowstate#readme","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"09cd3f18b32a8f1d2648e144fdb6077169aca34a","tarball":"https://registry.npmjs.org/@asyncflowstate/react/-/react-2.0.0.tgz","fileCount":9,"integrity":"sha512-iUn1ZnGu1Kolfp3bdmor4EOUWx488MSkozRs388+Uetv8GrI8pWWaZglIO9hoQfF3Q0DwnooPoYLMUte/C08zA==","signatures":[{"sig":"MEUCIQDNh472ExceNUGEQay68fUVny6JzAVIDJZq24lY7GS/CQIgINvjdRRyLRc9BbM4OWYuR8RpYuEWjxIfmT1cPRt/TjA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":640470},"main":"./dist/index.js","_from":"file:asyncflowstate-react-2.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=16.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"/tmp/6667d64d7d45b0b16c215396e21603a3/asyncflowstate-react-2.0.0.tgz","_integrity":"sha512-iUn1ZnGu1Kolfp3bdmor4EOUWx488MSkozRs388+Uetv8GrI8pWWaZglIO9hoQfF3Q0DwnooPoYLMUte/C08zA==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"Official React bindings for AsyncFlowState. Declarative hooks (useFlow, useFlowParallel) for managing async loading, error, and success states effortlessly.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@asyncflowstate/core":"2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.27","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_2.0.0_1775766038114_0.2051205663472231","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@asyncflowstate/react","version":"2.0.1","keywords":["react","hooks","async","state","loading","error-handling","ux","useFlow","react-hooks","nextjs","typescript","api-client","frontend","declarative-ui","component-logic","data-fetching"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/react@2.0.1","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://asyncflowstate-js.pages.dev/frameworks/react","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"fa131b4d6b439986a70f964f3663545aa6bdb67a","tarball":"https://registry.npmjs.org/@asyncflowstate/react/-/react-2.0.1.tgz","fileCount":9,"integrity":"sha512-LmX2GuGg1FoxQsj13qwUuHEnEComUlv/zHdmdQlfgkhnIP/bBne3M3305dXMU/RMf/Y24heFb9NYsCSc8DHdQw==","signatures":[{"sig":"MEYCIQCJOWwG7oX+iS+QQQAfHV9RGDHvWdE3CgYnldsthB4/UAIhAMNAM6/9pC8NQEHR4GPA8Rp0Di8eXevXjvMKtTZHSCFb","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":639992},"main":"./dist/index.js","_from":"file:asyncflowstate-react-2.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=16.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"/tmp/5e04e902a24b4964efecbd89ba137fe6/asyncflowstate-react-2.0.1.tgz","_integrity":"sha512-LmX2GuGg1FoxQsj13qwUuHEnEComUlv/zHdmdQlfgkhnIP/bBne3M3305dXMU/RMf/Y24heFb9NYsCSc8DHdQw==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"Official React bindings for AsyncFlowState. Declarative hooks (useFlow, useFlowParallel) for managing async loading, error, and success states effortlessly.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@asyncflowstate/core":"2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.27","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_2.0.1_1775772479958_0.44753807169304305","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@asyncflowstate/react","version":"2.0.2","keywords":["react","hooks","async","state","loading","error-handling","ux","useFlow","react-hooks","nextjs","typescript","api-client","frontend","declarative-ui","component-logic","data-fetching"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/react@2.0.2","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://asyncflowstate-js.pages.dev/frameworks/react","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"898402a637cb8808f2b4b6ce9198c1eb7eeb1c4c","tarball":"https://registry.npmjs.org/@asyncflowstate/react/-/react-2.0.2.tgz","fileCount":9,"integrity":"sha512-sNUWtI3uBQzObSDX4U92UJzoOJ33f+03c07lvt6afFJT6OJGge4rr3dy7HlnaathYZUzypuz2vpaf61ImRMZfA==","signatures":[{"sig":"MEUCIEtMhV53cqNNQIscfMjSX8G1DHfGyF+GkhsdZ2ll57CmAiEAxQqjz+CkhFs1DmtUWITEqgYaCR6zWccQB31RuugHVbo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":639992},"main":"./dist/index.js","_from":"file:asyncflowstate-react-2.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=16.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"/tmp/3f9081ebb25f64d10bbdfb9b0c5c4368/asyncflowstate-react-2.0.2.tgz","_integrity":"sha512-sNUWtI3uBQzObSDX4U92UJzoOJ33f+03c07lvt6afFJT6OJGge4rr3dy7HlnaathYZUzypuz2vpaf61ImRMZfA==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"Official React bindings for AsyncFlowState. Declarative hooks (useFlow, useFlowParallel) for managing async loading, error, and success states effortlessly.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@asyncflowstate/core":"2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","@types/react":"^18.3.27","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_2.0.2_1775774293495_0.19973690446521863","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@asyncflowstate/react","version":"3.0.0","private":false,"description":"Official React bindings for AsyncFlowState. Declarative hooks (useFlow, useFlowParallel) for managing async loading, error, and success states effortlessly.","keywords":["react","hooks","async","state","loading","error-handling","ux","useFlow","react-hooks","nextjs","typescript","api-client","frontend","declarative-ui","component-logic","data-fetching"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/devhimanshuu/asyncflowstate.git","directory":"packages/react"},"bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"homepage":"https://asyncflowstate-js.pages.dev/frameworks/react","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"sideEffects":false,"engines":{"node":">=16.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@asyncflowstate/core":"3.0.0"},"devDependencies":{"@types/react":"^18.3.27","@types/react-dom":"^18.3.7","react":"^18.3.1","react-dom":"^18.3.1"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"_id":"@asyncflowstate/react@3.0.0","_integrity":"sha512-24yEZVlyslvEHStKnHG6b4vYqgoKRXUA3PhF8bc+sKwhM2bE1/g7/3pG0089y7ju8hoORL9ZMXaKrEVXEC1SXw==","_resolved":"C:\\Users\\pc\\AppData\\Local\\Temp\\f8ee3a53831a5689e0a6dab292a96cc5\\asyncflowstate-react-3.0.0.tgz","_from":"file:asyncflowstate-react-3.0.0.tgz","_nodeVersion":"22.17.1","_npmVersion":"11.13.0","dist":{"integrity":"sha512-24yEZVlyslvEHStKnHG6b4vYqgoKRXUA3PhF8bc+sKwhM2bE1/g7/3pG0089y7ju8hoORL9ZMXaKrEVXEC1SXw==","shasum":"d17a19719750d5514a13cbba4ac29d9c9923a77e","tarball":"https://registry.npmjs.org/@asyncflowstate/react/-/react-3.0.0.tgz","fileCount":9,"unpackedSize":644560,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCy5DDWxF1mKWlGqDcfmYo/lH+Lk5OXeb2qtSgBvgUP/wIgP0xccT03w9y9tfRK7VNnSSS+dyFvNIrIPdR+ERcKTHU="}]},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"directories":{},"maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_3.0.0_1777546157893_0.1162835398960782"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-29T17:26:31.178Z","modified":"2026-04-30T10:49:18.146Z","1.0.1":"2026-03-29T17:26:31.463Z","2.0.0":"2026-04-09T20:20:38.325Z","2.0.1":"2026-04-09T22:08:00.152Z","2.0.2":"2026-04-09T22:38:13.649Z","3.0.0":"2026-04-30T10:49:18.036Z"},"bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","homepage":"https://asyncflowstate-js.pages.dev/frameworks/react","keywords":["react","hooks","async","state","loading","error-handling","ux","useFlow","react-hooks","nextjs","typescript","api-client","frontend","declarative-ui","component-logic","data-fetching"],"repository":{"type":"git","url":"git+https://github.com/devhimanshuu/asyncflowstate.git","directory":"packages/react"},"description":"Official React bindings for AsyncFlowState. Declarative hooks (useFlow, useFlowParallel) for managing async loading, error, and success states effortlessly.","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"readme":"<div align=\"center\">\n  <a href=\"https://github.com/devhimanshuu/asyncflowstate\">\n    <img src=\"https://raw.githubusercontent.com/devhimanshuu/asyncflowstate/main/assets/AsyncFlowState_logo.png\" width=\"120\" height=\"120\" alt=\"AsyncFlowState Logo\" />\n  </a>\n  <h1>@asyncflowstate/react <span style=\"font-size: 14px; background: #6366f122; color: #6366f1; padding: 4px 10px; border-radius: 20px; vertical-align: middle; margin-left: 10px;\">v3.0.0 Stable</span></h1>\n  <p><b>React hooks and helpers for elegant, accessible async UI behavior management.</b></p>\n\n  <p>\n    <a href=\"https://asyncflowstate-js.pages.dev/frameworks/react\"><img src=\"https://img.shields.io/badge/Documentation-Link-blue.svg\" alt=\"Documentation\" /></a>\n    <a href=\"https://opensource.org/licenses/MIT\"><img src=\"https://img.shields.io/badge/License-MIT-emerald.svg\" alt=\"License: MIT\" /></a>\n    <a href=\"https://www.npmjs.com/package/@asyncflowstate/react\"><img src=\"https://img.shields.io/npm/v/@asyncflowstate/react?color=indigo\" alt=\"NPM Version\" /></a>\n  </p>\n</div>\n\n---\n\n## Installation\n\n```bash\nnpm install @asyncflowstate/react\n# or\npnpm add @asyncflowstate/react\n```\n\nThis package depends on `@asyncflowstate/core` which will be installed automatically.\n\n## Quick Start\n\n```tsx\nimport { useFlow } from \"@asyncflowstate/react\";\n\nfunction SaveButton() {\n  const flow = useFlow(async (data) => {\n    return await api.save(data);\n  });\n\n  return (\n    <button {...flow.button()}>\n      {flow.loading ? \"Saving...\" : \"Save Changes\"}\n    </button>\n  );\n}\n```\n\n## Global Configuration with FlowProvider\n\nUse `FlowProvider` to set default options for all flows in your application. This is perfect for global error handling, retry policies, and UX settings.\n\n```tsx\nimport { FlowProvider, useFlow } from \"@asyncflowstate/react\";\n\nfunction App() {\n  return (\n    <FlowProvider\n      config={{\n        onError: (err) => toast.error(err.message),\n        retry: { maxAttempts: 3, backoff: \"exponential\" },\n        loading: { minDuration: 300 },\n      }}\n    >\n      <YourApp />\n    </FlowProvider>\n  );\n}\n\n// All flows inside will inherit the global config\nfunction YourApp() {\n  const flow = useFlow(saveData); // Automatically has retry + error handling\n\n  return <button {...flow.button()}>Save</button>;\n}\n```\n\n### Benefits of FlowProvider\n\n- **DRY Principle**: Define error handlers, retry logic, and UX settings once\n- **Consistency**: Ensure all async actions behave the same way\n- **Flexibility**: Local options can override global settings\n- **Nested Providers**: Different sections can have different configurations\n\n```tsx\n<FlowProvider config={{ retry: { maxAttempts: 2 } }}>\n  <MainApp />\n\n  {/* Admin section needs more retries */}\n  <FlowProvider config={{ retry: { maxAttempts: 5 } }}>\n    <AdminPanel />\n  </FlowProvider>\n</FlowProvider>\n```\n\nSee [FlowProvider examples](../../examples/react/flow-provider-examples.tsx) for more patterns.\n\n## Comprehensive Examples\n\n### 1. The Classic: Optimistic UI with Deep-Diff Rollback\n\nUpdate your UI instantly and trust AsyncFlowState to revert to the exact previous state if the network fails.\n\n```tsx\nimport { useFlow } from \"@asyncflowstate/react\";\n\nfunction LikeButton({ post }) {\n  const flow = useFlow(api.likePost, {\n    // 1. Update state immediately\n    optimisticResult: (prev) => ({\n      ...prev,\n      likes: prev.likes + 1,\n      isLiked: true,\n    }),\n    // 2. Automatically revert on failure\n    rollbackOnError: true,\n    onSuccess: () => toast.success(\"Liked!\"),\n    onError: () => toast.error(\"Connection failed. Reverting...\"),\n  });\n\n  return (\n    <button {...flow.button({ onClick: () => flow.execute(post.id) })}>\n      {flow.data.isLiked ? \"❤️\" : \"🤍\"} {flow.data.likes}\n    </button>\n  );\n}\n```\n\n### 2. Enterprise Forms: Zod Validation & Auto-Extraction\n\nStop manually mapping `e.target.value`. Use built-in schema validation and automatic focus management.\n\n```tsx\nimport { z } from \"zod\";\nimport { useFlow } from \"@asyncflowstate/react\";\n\nconst schema = z.object({\n  email: z.string().email(\"Invalid email address\"),\n  password: z.string().min(8, \"Password too short\"),\n});\n\nfunction LoginForm() {\n  const flow = useFlow(auth.login, {\n    onSuccess: () => navigate(\"/dashboard\"),\n  });\n\n  return (\n    <form\n      {...flow.form({ schema, extractFormData: true, resetOnSuccess: true })}\n    >\n      <input name=\"email\" placeholder=\"Email\" />\n      {flow.fieldErrors.email && (\n        <p className=\"error\">{flow.fieldErrors.email}</p>\n      )}\n\n      <input name=\"password\" type=\"password\" placeholder=\"Password\" />\n      {flow.fieldErrors.password && (\n        <p className=\"error\">{flow.fieldErrors.password}</p>\n      )}\n\n      <button type=\"submit\" disabled={flow.loading}>\n        {flow.loading ? \"Logging in...\" : \"Login\"}\n      </button>\n\n      {/* Auto-focuses on error */}\n      {flow.error && <div ref={flow.errorRef}>{flow.error.message}</div>}\n    </form>\n  );\n}\n```\n\n### 3. AI-Powered: Predictive Intent & Flow DNA\n\nPre-warm your flows before the user even clicks. AsyncFlowState learns from hover patterns to eliminate perceived latency.\n\n```tsx\nimport { useFlow } from \"@asyncflowstate/react\";\n\nfunction ProductCard({ productId }) {\n  const flow = useFlow(api.getDetails, {\n    predictive: {\n      prefetchOnHover: true, // Learns and pre-warms the flow\n      threshold: 0.8, // Confidence threshold\n    },\n  });\n\n  return (\n    <div onMouseEnter={flow.button().onMouseEnter} className=\"card\">\n      <h3>Product {productId}</h3>\n      <button onClick={() => flow.execute(productId)}>\n        {flow.status === \"prewarmed\" ? \"Instant View\" : \"View Details\"}\n      </button>\n    </div>\n  );\n}\n```\n\n### 4. Cross-Tab Sync: Real-Time Coordination\n\nKeep your application state consistent across every open tab without a backend websocket.\n\n```tsx\nconst flow = useFlow(api.updateSettings, {\n  // Syncs loading status and data across all tabs automatically\n  crossTab: {\n    sync: true,\n    channel: \"user-settings\",\n  },\n});\n```\n\n### 5. Multi-Step Workflows: `useFlowSequence`\n\nManage complex, interdependent async steps with a single source of truth for progress and errors.\n\n```tsx\nimport { useFlowSequence } from \"@asyncflowstate/react\";\n\nfunction SetupWizard() {\n  const sequence = useFlowSequence([\n    { name: \"Create Account\", flow: accountFlow },\n    { name: \"Verify Email\", flow: emailFlow, mapInput: (acc) => acc.email },\n    { name: \"Sync Data\", flow: syncFlow },\n  ]);\n\n  return (\n    <div>\n      <progress value={sequence.progress} max=\"100\" />\n      <p>Current Step: {sequence.currentStep?.name}</p>\n      <button onClick={() => sequence.execute()}>Start Setup</button>\n    </div>\n  );\n}\n```\n\n## <i class=\"fa-solid fa-sparkles text-amber-500\"></i> New in v3.0\n\n- **Flow DNA:** AI-driven state that optimizes behavior based on user patterns.\n- **Ambient Intelligence:** Background orchestration that pre-empts async failures.\n- **Speculative Execution:** Predicted user intent for zero-latency interactions.\n- **Emotional UX Components:** Skeleton states and transitions that adapt to app load.\n- **Collaborative Hooks:** Real-time multi-user state synchronization.\n- **Edge-First Fetching:** Native support for edge-optimized data flows.\n- **Temporal Debugging:** Replay any async sequence with full state fidelity.\n- **Telemetry Dashboard:** Live monitoring of all application flows.\n\n## Monitoring & Debugging\n\n### `FlowDebugger` (Timeline View)\n\nA powerful drop-in component to visualize all async activity. Features a **Timeline/Gantt** view to identify bottlenecks and parallel execution order.\n\n```tsx\nimport { FlowDebugger } from \"@asyncflowstate/react\";\n\n// Add it once at the root\n<FlowDebugger />;\n```\n\n### `FlowNotificationProvider`\n\nCatch success or error events from ANY flow globally.\n\n```tsx\nimport { FlowNotificationProvider } from \"@asyncflowstate/react\";\n\n<FlowNotificationProvider\n  onSuccess={(e) => toast.success(`${e.flowName} completed!`)}\n  onError={(e) => toast.error(`${e.flowName} failed: ${e.state.error.message}`)}\n>\n  <App />\n</FlowNotificationProvider>;\n```\n\n## API Reference\n\n### `useFlow<TData, TError, TArgs>(action, options?)`\n\n#### Returns\n\n```typescript\n{\n  // State\n  status: 'idle' | 'loading' | 'success' | 'error';\n  data: TData | null;\n  error: TError | null;\n  loading: boolean;      // Respects loading.delay\n  progress: number;      // 0-100\n  fieldErrors: Record<string, string>;\n\n  // Actions\n  execute: (...args: TArgs) => Promise<TData | undefined>;\n  reset: () => void;\n  cancel: () => void;\n  setProgress: (val: number) => void;\n\n  // Helpers & Components\n  button: (props?) => ButtonHTMLAttributes;\n  form: (props?) => FormHTMLAttributes;\n  LiveRegion: React.ComponentType;\n  errorRef: React.RefObject<any>;\n}\n```\n\n## License\n\nMIT © [AsyncFlowState Contributors](https://github.com/devhimanshuu/asyncflowstate)\n","readmeFilename":"README.md"}