{"_id":"@baguette-studios/kernl-react-native-ui","name":"@baguette-studios/kernl-react-native-ui","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@baguette-studios/kernl-react-native-ui","version":"0.2.0","type":"module","private":false,"description":"Native React Native UI components for Kernl agent experiences.","license":"ISC","repository":{"type":"git","url":"git+https://github.com/Jules-Astier/agent-context.git","directory":"packages/react-native-ui"},"homepage":"https://github.com/Jules-Astier/agent-context#readme","bugs":{"url":"https://github.com/Jules-Astier/agent-context/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"sideEffects":false,"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./theme":{"types":"./dist/theme.d.ts","import":"./dist/theme.js","default":"./dist/theme.js"}},"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc -p tsconfig.json --noEmit","test":"vitest run --root ../.. --config packages/react-native-ui/vitest.config.ts packages/react-native-ui"},"dependencies":{"@baguette-studios/kernl-core":"0.2.0","@baguette-studios/kernl-react-native":"0.2.0","@baguette-studios/kernl-ui-core":"0.2.0"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-native":">=0.76.0 <0.87.0","react-native-safe-area-context":">=4.10.0 <6.0.0","react-native-svg":">=15.0.0 <16.0.0"},"devDependencies":{"@types/react":"^19.2.3","@types/react-test-renderer":"^19.1.0","react":"19.2.3","react-test-renderer":"19.2.3","typescript":"^5.8.3","vitest":"^4.1.9"},"_id":"@baguette-studios/kernl-react-native-ui@0.2.0","gitHead":"9af8d0156c9d7ee9a8038da7bc30000db9ce3871","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-qVggedBoN4/YBGQ0QDMy3C9aAZ20oe/VSdcTM960YUaODRXQCcAWGdDQhNDm+CffvBhLH3QZoME24gV6pnmsHQ==","shasum":"f9550fa649dd9615e8254cdc709d706a7f66dd5d","tarball":"https://registry.npmjs.org/@baguette-studios/kernl-react-native-ui/-/kernl-react-native-ui-0.2.0.tgz","fileCount":18,"unpackedSize":116459,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCd2O475luUERM+jFsW/Lmu9NjsRHrvLCBWJ1qb0J7/HQIgZ8ZN/wChOazGQKkrqNbOMZjGGSLnDIiCWvgEfqhmQWk="}]},"_npmUser":{"name":"baguette-studios","email":"astier.jules@gmail.com"},"directories":{},"maintainers":[{"name":"baguette-studios","email":"astier.jules@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kernl-react-native-ui_0.2.0_1784802683119_0.7598980861862241"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-23T10:31:22.946Z","0.2.0":"2026-07-23T10:31:23.252Z","modified":"2026-07-23T10:31:23.498Z"},"maintainers":[{"name":"baguette-studios","email":"astier.jules@gmail.com"}],"description":"Native React Native UI components for Kernl agent experiences.","homepage":"https://github.com/Jules-Astier/agent-context#readme","repository":{"type":"git","url":"git+https://github.com/Jules-Astier/agent-context.git","directory":"packages/react-native-ui"},"bugs":{"url":"https://github.com/Jules-Astier/agent-context/issues"},"license":"ISC","readme":"# @baguette-studios/kernl-react-native-ui\n\nNative, composable React Native UI for Kernl. It renders the semantic product\nstate from `@baguette-studios/kernl-ui-core` and consumes the headless hooks in\n`@baguette-studios/kernl-react-native`. It does not import the DOM UI package,\nCSS, browser storage, a WebView, or a navigation library.\n\n```bash\nnpm install @baguette-studios/kernl-core \\\n  @baguette-studios/kernl-react-native \\\n  @baguette-studios/kernl-react-native-ui \\\n  react-native-safe-area-context \\\n  react-native-svg\n```\n\n`react-native-safe-area-context` is a peer dependency so the host owns its\nsingle native installation. `react-native-svg` renders the same portable Kernl\nicon definitions used by the web UI packages. Expo projects should install the\nSDK-compatible versions of both native peers with `npx expo install`.\n\n```tsx\nimport {\n  AgentProvider,\n  AgentBoundary,\n} from \"@baguette-studios/kernl-react-native\";\nimport {\n  AgentLauncher,\n  AgentNativeThemeRoot,\n  AgentNativeUiProvider,\n} from \"@baguette-studios/kernl-react-native-ui\";\nimport { SafeAreaProvider } from \"react-native-safe-area-context\";\n\nexport function App() {\n  return (\n    <SafeAreaProvider>\n      <AgentProvider adapter={adapter} user={{ id: \"user-1\" }}>\n        <AgentBoundary id=\"invoice\" title=\"Invoice\" type=\"page\" tools={tools}>\n          <AgentNativeThemeRoot colorScheme=\"system\" theme=\"comfortable\">\n            <AgentNativeUiProvider title=\"Invoice assistant\">\n              <YourInvoiceScreen />\n              <AgentLauncher />\n            </AgentNativeUiProvider>\n          </AgentNativeThemeRoot>\n        </AgentBoundary>\n      </AgentProvider>\n    </SafeAreaProvider>\n  );\n}\n```\n\nThe stock launcher is optional. A host can own its mascot and open state:\n\n```tsx\n<AgentLauncher\n  open={open}\n  onOpenChange={setOpen}\n  showDefaultTrigger={false}\n  renderTrigger={({ toggle }) => <MascotButton onPress={toggle} />}\n/>\n```\n\nThe stock trigger follows the same launcher contract as the browser UI packages.\nUse `launcherLabel` and `launcherIcon` to customize its shared label and icon\nwithout replacing the component.\n\n`AgentNativeUiProvider` uses the shared `createAgentUiController` internally for\noptimistic sends, queue/steer selection, exact-once approval and form commands,\nconversation history, and screen transitions. `useAgentNativeUi` exposes a\nnarrow native state and command interface; the broad controller command union\nis intentionally not re-exported.\n\nWhen both `queue` and `steer` are enabled through the headless provider's\n`submitWhileRunning` option, `AgentComposer` renders their selector as part of\nthe Send control. Configuring only one mode keeps the Send button unsplit and\nuses that mode automatically for in-flight submissions.\n\n## Theme\n\n`createAgentNativeTheme` accepts the shared `AgentThemeInput` preset and object\nshapes, resolves the canonical `kernl-ui-core` variables to concrete native\ncolors and numbers, and preserves the shared density, typography, radius,\nmessage, quick-action, composer, status, and risk language. The theme root\nsupports system dark mode and reduced motion. Ruled and grid conversation\npresets are drawn with native views; soft gradients use a lightweight native\naccent wash. Every stock interactive control has a minimum 44-point target.\n\n## Components\n\n- `AgentLauncher`, `AgentConversationScreen`, `AgentComposer`, `AgentMessageList`\n- `AgentHistoryScreen`, `AgentSettingsScreen`, `AgentPromptSuggestions`\n- `AgentActionReview`, `AgentFormRequestCard`, `AgentStatusPill`\n- `AgentErrorState`, `AgentLoadingState`, `AgentEmptyState`\n- `AgentIcon`, plus `AgentBubbleLauncher` and `AgentThemeRoot` compatibility\n  names matching the other Kernl UI packages\n\nAll components may be composed independently under `AgentNativeUiProvider`.\nApplications may also skip this package entirely and build a custom interface\nfrom the headless native hooks.\n\n## Native deviations\n\n- Message content is rendered as selectable native text. Use `renderMessage`\n  for a custom structured renderer; HTML/GFM is never rendered in a WebView.\n- Browser focus targets, hover, draggable launchers, CSS backgrounds, and\n  global browser shortcuts do not apply. Router navigation and hardware\n  keyboard commands remain host-owned.\n- Select and multiselect form controls render as accessible native option lists\n  to avoid imposing a picker library.\n- Settings expose backdrop-dismiss behavior and clearly label browser-style\n  shortcuts as host-managed.\n","readmeFilename":"README.md","_rev":"1-0cacf8526aa0eb175007081063609cc8"}