@json-render/react-native 0.4.3

package/dist/schema.js

@@ -0,0 +1,106 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schema.ts
+var schema_exports = {};
+__export(schema_exports, {
+  elementTreeSchema: () => elementTreeSchema,
+  schema: () => schema
+});
+module.exports = __toCommonJS(schema_exports);
+var import_core = require("@json-render/core");
+var schema = (0, import_core.defineSchema)(
+  (s) => ({
+    // What the AI-generated SPEC looks like
+    spec: s.object({
+      /** Root element key */
+      root: s.string(),
+      /** Flat map of elements by key */
+      elements: s.record(
+        s.object({
+          /** Component type from catalog */
+          type: s.ref("catalog.components"),
+          /** Component props */
+          props: s.propsOf("catalog.components"),
+          /** Child element keys (flat reference) */
+          children: s.array(s.string()),
+          /** Visibility condition */
+          visible: s.any()
+        })
+      )
+    }),
+    // What the CATALOG must provide
+    catalog: s.object({
+      /** Component definitions */
+      components: s.map({
+        /** Zod schema for component props */
+        props: s.zod(),
+        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
+        slots: s.array(s.string()),
+        /** Description for AI generation hints */
+        description: s.string()
+      }),
+      /** Action definitions (optional) */
+      actions: s.map({
+        /** Zod schema for action params */
+        params: s.zod(),
+        /** Description for AI generation hints */
+        description: s.string()
+      })
+    })
+  }),
+  {
+    defaultRules: [
+      // Layout patterns
+      "FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost Column must have flex:1 so it fills the SafeArea. The scrollable content area must also have flex:1. Structure: SafeArea > Column(flex:1, gap:0) > [header, Container(flex:1) > [ScrollContainer(...)], bottom-tabs]. Both the outer Column AND the content Container need flex:1.",
+      "NEVER place a bottom tab bar or fixed footer inside a ScrollContainer. It must be a sibling AFTER the flex:1 container that holds the ScrollContainer.",
+      // Element integrity
+      "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
+      "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
+      'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the "repeat" field on the container element. Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }. Inside repeated children, use "$item/field" for per-item state paths and "$index" for the current array index. Do NOT hardcode individual elements for each array item.',
+      // Visible field placement
+      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/activeTab"},"home"]},"children":[...]}. WRONG: {"type":"Column","props":{"gap":8,"visible":{...}},"children":[...]}.',
+      // Tab navigation pattern
+      "TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use Pressable + setState action + visible conditions to make tabs functional.",
+      'Each tab button should be a Pressable wrapping its icon/label children, with action "setState" and actionParams { "path": "/activeTab", "value": "tabName" }.',
+      `Each tab's content section should have a visible condition: { "eq": [{ "path": "/activeTab" }, "tabName"] }.`,
+      "The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.",
+      // Tab active state highlighting (using dynamic props)
+      "TAB ACTIVE STYLING: Use $cond dynamic props on the Icon inside each tab Pressable so a single Icon changes appearance based on the active tab.",
+      '  - For the icon name: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "home", "$else": "home-outline" }',
+      '  - For the icon color: { "$cond": { "eq": [{ "path": "/activeTab" }, "thisTabName"] }, "$then": "#007AFF", "$else": "#8E8E93" }',
+      "  - For labels, use $cond on the color prop similarly.",
+      '  - For the FIRST/DEFAULT tab, use { "$cond": { "or": [{ "eq": [{ "path": "/activeTab" }, "thisTabName"] }, { "not": { "path": "/activeTab" } }] }, "$then": "#007AFF", "$else": "#8E8E93" } so it appears active before any tab is tapped.',
+      // Push/pop screen navigation (all screens in one spec)
+      'SCREEN NAVIGATION: Use Pressable with action "push" and actionParams { "screen": "screenName" } to navigate to a new screen. Use action "pop" to go back. All screens must be defined in the SAME spec.',
+      'Each screen section uses a visible condition on /currentScreen: { "eq": [{ "path": "/currentScreen" }, "screenName"] }. The default/home screen should also be visible when /currentScreen is not set: { "or": [{ "eq": [{ "path": "/currentScreen" }, "home"] }, { "not": { "path": "/currentScreen" } }] }.',
+      "push automatically maintains a /navStack in the state model so pop always returns to the previous screen.",
+      'Include a back button on pushed screens using action "pop". Example: Pressable(action:"pop") > Row > Icon(name:"chevron-back") + Label(text:"Back").',
+      "Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.",
+      'Example: A list screen with items that push to detail: Pressable(action:"push", actionParams:{screen:"repo-detail"}) wrapping each list item card. The detail screen section has visible:{"eq":[{"path":"/currentScreen"},"repo-detail"]} and contains a back button with action:"pop".'
+    ]
+  }
+);
+var elementTreeSchema = schema;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  elementTreeSchema,
+  schema
+});
+//# sourceMappingURL=schema.js.map

package/dist/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/schema.ts"],"sourcesContent":["import { defineSchema } from \"@json-render/core\";\n\n/**\n * The schema for @json-render/react-native\n *\n * Defines:\n * - Spec: A flat tree of elements with keys, types, props, and children references\n * - Catalog: Components with props schemas, and optional actions\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like\n    spec: s.object({\n      /** Root element key */\n      root: s.string(),\n      /** Flat map of elements by key */\n      elements: s.record(\n        s.object({\n          /** Component type from catalog */\n          type: s.ref(\"catalog.components\"),\n          /** Component props */\n          props: s.propsOf(\"catalog.components\"),\n          /** Child element keys (flat reference) */\n          children: s.array(s.string()),\n          /** Visibility condition */\n          visible: s.any(),\n        }),\n      ),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Component definitions */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */\n        slots: s.array(s.string()),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n      /** Action definitions (optional) */\n      actions: s.map({\n        /** Zod schema for action params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    defaultRules: [\n      // Layout patterns\n      \"FIXED BOTTOM BAR PATTERN: When building a screen with a fixed header and/or fixed bottom tab bar, the outermost Column must have flex:1 so it fills the SafeArea. The scrollable content area must also have flex:1. Structure: SafeArea > Column(flex:1, gap:0) > [header, Container(flex:1) > [ScrollContainer(...)], bottom-tabs]. Both the outer Column AND the content Container need flex:1.\",\n      \"NEVER place a bottom tab bar or fixed footer inside a ScrollContainer. It must be a sibling AFTER the flex:1 container that holds the ScrollContainer.\",\n\n      // Element integrity\n      \"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.\",\n      \"SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.\",\n      'When building repeating content backed by a state array (e.g. todos, posts, cart items), use the \"repeat\" field on the container element. Example: { \"type\": \"Column\", \"props\": { \"gap\": 8 }, \"repeat\": { \"path\": \"/todos\", \"key\": \"id\" }, \"children\": [\"todo-item\"] }. Inside repeated children, use \"$item/field\" for per-item state paths and \"$index\" for the current array index. Do NOT hardcode individual elements for each array item.',\n\n      // Visible field placement\n      'CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"Column\",\"props\":{\"gap\":8},\"visible\":{\"eq\":[{\"path\":\"/activeTab\"},\"home\"]},\"children\":[...]}. WRONG: {\"type\":\"Column\",\"props\":{\"gap\":8,\"visible\":{...}},\"children\":[...]}.',\n\n      // Tab navigation pattern\n      \"TAB NAVIGATION PATTERN: When building a UI with multiple tabs, use Pressable + setState action + visible conditions to make tabs functional.\",\n      'Each tab button should be a Pressable wrapping its icon/label children, with action \"setState\" and actionParams { \"path\": \"/activeTab\", \"value\": \"tabName\" }.',\n      'Each tab\\'s content section should have a visible condition: { \"eq\": [{ \"path\": \"/activeTab\" }, \"tabName\"] }.',\n      \"The first tab's content should NOT have a visible condition (so it shows by default when no tab is selected yet). All other tabs MUST have a visible condition.\",\n\n      // Tab active state highlighting (using dynamic props)\n      \"TAB ACTIVE STYLING: Use $cond dynamic props on the Icon inside each tab Pressable so a single Icon changes appearance based on the active tab.\",\n      '  - For the icon name: { \"$cond\": { \"eq\": [{ \"path\": \"/activeTab\" }, \"thisTabName\"] }, \"$then\": \"home\", \"$else\": \"home-outline\" }',\n      '  - For the icon color: { \"$cond\": { \"eq\": [{ \"path\": \"/activeTab\" }, \"thisTabName\"] }, \"$then\": \"#007AFF\", \"$else\": \"#8E8E93\" }',\n      \"  - For labels, use $cond on the color prop similarly.\",\n      '  - For the FIRST/DEFAULT tab, use { \"$cond\": { \"or\": [{ \"eq\": [{ \"path\": \"/activeTab\" }, \"thisTabName\"] }, { \"not\": { \"path\": \"/activeTab\" } }] }, \"$then\": \"#007AFF\", \"$else\": \"#8E8E93\" } so it appears active before any tab is tapped.',\n\n      // Push/pop screen navigation (all screens in one spec)\n      'SCREEN NAVIGATION: Use Pressable with action \"push\" and actionParams { \"screen\": \"screenName\" } to navigate to a new screen. Use action \"pop\" to go back. All screens must be defined in the SAME spec.',\n      'Each screen section uses a visible condition on /currentScreen: { \"eq\": [{ \"path\": \"/currentScreen\" }, \"screenName\"] }. The default/home screen should also be visible when /currentScreen is not set: { \"or\": [{ \"eq\": [{ \"path\": \"/currentScreen\" }, \"home\"] }, { \"not\": { \"path\": \"/currentScreen\" } }] }.',\n      \"push automatically maintains a /navStack in the state model so pop always returns to the previous screen.\",\n      'Include a back button on pushed screens using action \"pop\". Example: Pressable(action:\"pop\") > Row > Icon(name:\"chevron-back\") + Label(text:\"Back\").',\n      \"Use push/pop for drill-down flows: tapping a list item to see details, opening a profile, etc. Use setState + visible conditions for tab switching within a screen.\",\n      'Example: A list screen with items that push to detail: Pressable(action:\"push\", actionParams:{screen:\"repo-detail\"}) wrapping each list item card. The detail screen section has visible:{\"eq\":[{\"path\":\"/currentScreen\"},\"repo-detail\"]} and contains a back button with action:\"pop\".',\n    ],\n  },\n);\n\n/**\n * Type for the React Native schema\n */\nexport type ReactNativeSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type ReactNativeSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n\n// Backward compatibility aliases\n/** @deprecated Use `schema` instead */\nexport const elementTreeSchema = schema;\n/** @deprecated Use `ReactNativeSchema` instead */\nexport type ElementTreeSchema = ReactNativeSchema;\n/** @deprecated Use `ReactNativeSpec` instead */\nexport type ElementTreeSpec<T> = ReactNativeSpec<T>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAStB,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO;AAAA;AAAA,IAEN,MAAM,EAAE,OAAO;AAAA;AAAA,MAEb,MAAM,EAAE,OAAO;AAAA;AAAA,MAEf,UAAU,EAAE;AAAA,QACV,EAAE,OAAO;AAAA;AAAA,UAEP,MAAM,EAAE,IAAI,oBAAoB;AAAA;AAAA,UAEhC,OAAO,EAAE,QAAQ,oBAAoB;AAAA;AAAA,UAErC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,UAE5B,SAAS,EAAE,IAAI;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAAA,IAGD,SAAS,EAAE,OAAO;AAAA;AAAA,MAEhB,YAAY,EAAE,IAAI;AAAA;AAAA,QAEhB,OAAO,EAAE,IAAI;AAAA;AAAA,QAEb,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,QAEzB,aAAa,EAAE,OAAO;AAAA,MACxB,CAAC;AAAA;AAAA,MAED,SAAS,EAAE,IAAI;AAAA;AAAA,QAEb,QAAQ,EAAE,IAAI;AAAA;AAAA,QAEd,aAAa,EAAE,OAAO;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,cAAc;AAAA;AAAA,MAEZ;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAkBO,IAAM,oBAAoB;","names":[]}

package/dist/schema.mjs

@@ -0,0 +1,9 @@
+import {
+  elementTreeSchema,
+  schema
+} from "./chunk-VBNJFRLI.mjs";
+export {
+  elementTreeSchema,
+  schema
+};
+//# sourceMappingURL=schema.mjs.map

package/dist/schema.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@json-render/react-native",
+  "version": "0.4.3",
+  "license": "Apache-2.0",
+  "description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
+  "keywords": [
+    "json",
+    "ui",
+    "react-native",
+    "ai",
+    "generative-ui",
+    "llm",
+    "renderer",
+    "streaming",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vercel-labs/json-render.git",
+    "directory": "packages/react-native"
+  },
+  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "bugs": {
+    "url": "https://github.com/vercel-labs/json-render/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./schema": {
+      "types": "./dist/schema.d.ts",
+      "import": "./dist/schema.mjs",
+      "require": "./dist/schema.js"
+    },
+    "./catalog": {
+      "types": "./dist/catalog.d.ts",
+      "import": "./dist/catalog.mjs",
+      "require": "./dist/catalog.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@json-render/core": "0.4.4"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.3",
+    "react-native": "0.83.1",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "zod": "^4.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-native": ">=0.71.0",
+    "zod": "^4.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit",
+    "typecheck": "tsc --noEmit"
+  }
+}