@mcp-native/react-native 0.0.1 → 0.0.3

package/README.md

@@ -1,5 +1,90 @@
+<div align="center">
+
 # @mcp-native/react-native
 
-Part of MCP Native — a native UI runtime for Model Context Protocol applications.
+### Trusted native render plans for validated MCP surfaces
+
+[![npm](https://img.shields.io/npm/v/@mcp-native/react-native)](https://www.npmjs.com/package/@mcp-native/react-native)
+[![downloads](https://img.shields.io/npm/dm/@mcp-native/react-native)](https://www.npmjs.com/package/@mcp-native/react-native)
+[![license](https://img.shields.io/npm/l/@mcp-native/react-native)](https://github.com/pablospaniard/mcp-native/blob/main/LICENSE)
+
+[GitHub](https://github.com/pablospaniard/mcp-native) · [Architecture](https://github.com/pablospaniard/mcp-native/blob/main/docs/RFC-0001-architecture.md) · [Security](https://github.com/pablospaniard/mcp-native/blob/main/SECURITY.md)
+
+</div>
+
+> **Experimental:** this package currently produces a serializable render plan. It does not yet ship React components, hooks, or a complete React Native renderer.
+
+`@mcp-native/react-native` converts a surface already validated by `@mcp-native/a2ui` into a tree whose component names come from a fixed host-owned catalog. Servers provide data and declared actions—not JavaScript modules or arbitrary component names.
+
+## Install
+
+```bash
+npm install @mcp-native/react-native
+```
+
+`@mcp-native/a2ui` and `@mcp-native/core` are installed as dependencies. React and React Native are not dependencies yet because this preview returns data rather than mounting components.
+
+## Quick start
+
+```ts
+import { parseA2uiSurface } from "@mcp-native/a2ui";
+import { createNativeRenderPlan } from "@mcp-native/react-native";
+
+const surface = parseA2uiSurface({
+  version: "0.1",
+  root: {
+    id: "card",
+    type: "container",
+    children: [
+      { id: "title", type: "text", text: "Ready to continue?" },
+      {
+        id: "continue",
+        type: "button",
+        label: "Continue",
+        action: { type: "tool", name: "continue_flow" },
+      },
+    ],
+  },
+});
+
+const plan = createNativeRenderPlan(surface);
+```
+
+`plan` contains only the currently allowed component names:
+
+```ts
+type NativeComponentName = "Button" | "Text" | "TextInput" | "View";
+```
+
+The application host decides how each name maps to a locally bundled component and how declared button actions reach `McpNativeRuntime`.
+
+## Public API
+
+| Export                   | Purpose                                                                                         |
+| ------------------------ | ----------------------------------------------------------------------------------------------- |
+| `createNativeRenderPlan` | Converts a validated `A2uiSurface` into a `NativeElement` tree.                                 |
+| `NativeElement`          | Serializable render-plan node with a key, trusted component name, props, and optional children. |
+| `NativeComponentName`    | Union of component names currently allowed in the plan.                                         |
+
+## Current mappings
+
+| Surface node | Native component | Selected props                                |
+| ------------ | ---------------- | --------------------------------------------- |
+| `container`  | `View`           | Nested `children`                             |
+| `text`       | `Text`           | Text as `children`                            |
+| `button`     | `Button`         | `title` and validated `action`                |
+| `text-input` | `TextInput`      | `label`, optional `value`, optional `binding` |
+
+## Trust boundary
+
+- The server cannot select components outside the catalog.
+- The server cannot send executable React Native code.
+- Render plans should only be created from a successfully validated surface.
+- The host must explicitly map component names, bind events, enforce permissions, and approve sensitive tool calls.
+- Future styling and component expansion must preserve allowlists rather than spreading unchecked server props.
+
+See [`@mcp-native/a2ui`](https://www.npmjs.com/package/@mcp-native/a2ui) for parsing and [`@mcp-native/core`](https://www.npmjs.com/package/@mcp-native/core) for action dispatch. Install [`mcp-native`](https://www.npmjs.com/package/mcp-native) for every public API.
+
+## License
 
-Early development.
+[MIT](https://github.com/pablospaniard/mcp-native/blob/main/LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type { A2uiSurface } from "@mcp-native/a2ui";
+export type NativeComponentName = "Button" | "Text" | "TextInput" | "View";
+/**
+ * A serializable render plan. A React Native host maps these trusted component
+ * names to locally bundled components; the MCP server never supplies code.
+ */
+export interface NativeElement {
+    readonly key: string;
+    readonly component: NativeComponentName;
+    readonly props: Readonly<Record<string, unknown>>;
+    readonly children?: readonly NativeElement[];
+}
+export declare function createNativeRenderPlan(surface: A2uiSurface): NativeElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;AAE3E;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,SAAS,EAAE,mBAAmB,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;CAC9C;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,aAAa,CAE1E"}

package/dist/index.js

@@ -0,0 +1,37 @@
+export function createNativeRenderPlan(surface) {
+    return renderNode(surface.root);
+}
+function renderNode(node) {
+    switch (node.type) {
+        case "container":
+            return {
+                key: node.id,
+                component: "View",
+                props: {},
+                children: node.children.map(renderNode),
+            };
+        case "text":
+            return {
+                key: node.id,
+                component: "Text",
+                props: { children: node.text },
+            };
+        case "button":
+            return {
+                key: node.id,
+                component: "Button",
+                props: { title: node.label, action: node.action },
+            };
+        case "text-input":
+            return {
+                key: node.id,
+                component: "TextInput",
+                props: {
+                    label: node.label,
+                    ...(node.value === undefined ? {} : { value: node.value }),
+                    ...(node.binding === undefined ? {} : { binding: node.binding }),
+                },
+            };
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAeA,MAAM,UAAU,sBAAsB,CAAC,OAAoB;IACzD,OAAO,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAClC,CAAC;AAED,SAAS,UAAU,CAAC,IAAc;IAChC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,WAAW;YACd,OAAO;gBACL,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,SAAS,EAAE,MAAM;gBACjB,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;aACxC,CAAC;QACJ,KAAK,MAAM;YACT,OAAO;gBACL,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,SAAS,EAAE,MAAM;gBACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;aAC/B,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO;gBACL,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,SAAS,EAAE,QAAQ;gBACnB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;aAClD,CAAC;QACJ,KAAK,YAAY;YACf,OAAO;gBACL,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,SAAS,EAAE,WAAW;gBACtB,KAAK,EAAE;oBACL,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC1D,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;iBACjE;aACF,CAAC;IACN,CAAC;AACH,CAAC"}

package/package.json

@@ -1,12 +1,43 @@
 {
   "name": "@mcp-native/react-native",
-  "version": "0.0.1",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "version": "0.0.3",
+  "description": "React Native renderer primitives for MCP Native.",
+  "keywords": [
+    "a2ui",
+    "mcp",
+    "model-context-protocol",
+    "native-ui",
+    "react-native"
+  ],
+  "homepage": "https://github.com/pablospaniard/mcp-native#readme",
+  "bugs": {
+    "url": "https://github.com/pablospaniard/mcp-native/issues"
   },
-  "keywords": [],
-  "author": "",
   "license": "MIT",
-  "description": "MCP Native - react-native package"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pablospaniard/mcp-native.git",
+    "directory": "packages/react-native"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mcp-native/a2ui": "^0.0.3",
+    "@mcp-native/core": "^0.0.3"
+  }
 }

package/index.js

@@ -1 +0,0 @@
-module.exports = {};