json-ui-lite-rn 0.12.0

package/README.md

@@ -0,0 +1,230 @@
+# `json-ui-lite-rn`
+
+Lightweight JSON UI tooling for React Native + Vercel AI SDK tool calling.
+
+**This package provides:**
+
+- a component/style registry (`GEN_UI_NODE_HINTS`, `GEN_UI_STYLES`, `GEN_UI_NODE_NAMES`)
+- a ready-to-use tool set for JSON UI mutation (`createGenUITools`)
+- a reusable system prompt builder (`buildGenUISystemPrompt`)
+- a React Native renderer for specs (`GenerativeUIView`), which passes `GEN_UI_STYLES` (overridable) to the default `GenUINode` and lets you supply a custom node renderer
+
+**Why this package?** a.k.a. prior art
+
+There exists a great library for streaming interfaces: [`json-render`](https://github.com/vercel-labs/json-render). The full specification is provided in this section, but **TLDR**: this library - `json-ui-lite-rn` - is the choice for small language models (e.g. parameters in the order of magnitude of 3B), which is usually the case if you are running inference locally, on-device. If you are using a cloud provider (OpenAI or Antrophic API), then you will want to go with `json-render` instead.
+
+## Requirements
+
+- React Native app
+- Vercel AI SDK tool-calling flow (`streamText`, `generateText`, etc.)
+- model that supports tool calling
+
+## Installation
+
+```sh
+bun add json-ui-lite-rn
+```
+
+## Quick Start
+
+```ts
+import { streamText } from 'ai'
+import { buildGenUISystemPrompt, createGenUITools } from 'json-ui-lite-rn'
+
+type UISpec = {
+  root: string
+  elements: Record<
+    string,
+    { type: string; props: Record<string, unknown>; children?: string[] }
+  >
+}
+
+const tools = createGenUITools<UISpec>({
+  contextId: chatId,
+  getSpec: (id) => getSpecForChat(id),
+  updateSpec: (id, nextSpec) => setSpecForChat(id, nextSpec),
+  toolWrapper: (toolName, execute) => async (args) => {
+    console.log('[json-ui-lite-rn] Executing tool', toolName, args)
+    return execute(args)
+  },
+})
+
+const result = streamText({
+  model,
+  messages,
+  tools,
+  system: buildGenUISystemPrompt({
+    additionalInstructions:
+      'Keep responses short. Ask follow-up questions when UI intent is unclear.',
+  }),
+})
+```
+
+## API
+
+### `createGenUITools(options)`
+
+Creates a set of tool definitions:
+
+- `getUIRootNode`
+- `getUINode`
+- `getUILayout`
+- `getAvailableUINodes`
+- `setUINodeProps`
+- `deleteUINode`
+- `addUINode`
+- `reorderUINodes`
+
+`reorderUINodes` moves one sibling by index offset (with clamping):
+
+- `nodeId`: node to move
+- `offset`: integer shift among siblings (`< 0` moves earlier, `> 0` moves later)
+
+Options:
+
+- `contextId`: string key for your current conversation/context
+- `getSpec(contextId)`: return current spec (or `null`)
+- `updateSpec(contextId, spec)`: persist changes
+- `createId`: optional id factory
+- `rootId`: optional root id override (default: `"root"`)
+- `nodeHints`: optional component registry override
+- `nodeNamesThatSupportChildren`: optional parent whitelist override
+- `toolWrapper(toolName, execute)`: required wrapper used to decorate all tool executions (for logging, error handling, telemetry, etc.)
+
+Tool behavior details:
+
+- `setUINodeProps`: `{ id, props, replace? }`; defaults to merge mode, set `replace: true` to replace all props
+- `addUINode`: `{ parentId?, type, props? }`; if `parentId` is omitted it defaults to root
+- `reorderUINodes`: clamps index movement to valid sibling bounds
+
+### `buildGenUISystemPrompt(options?)`
+
+Builds the reusable, non-app-specific system instructions for JSON UI tooling.
+
+Options:
+
+- `additionalInstructions`: append app-specific guidance
+- `requireLayoutReadBeforeAddingNodes`: defaults to `true`
+- `styleHints`: override style metadata used in prompt text
+
+### Registries
+
+- `GEN_UI_NODE_NAMES`
+- `GEN_UI_NODE_HINTS`
+- `GEN_UI_NODE_NAMES_THAT_SUPPORT_CHILDREN`
+- `GEN_UI_STYLES`
+- `GEN_UI_STYLE_HINTS`
+
+### `GenerativeUIView`
+
+Renders a JSON UI spec directly in React Native. The default node renderer (`GenUINode`) receives style validators from the view; you can override styles or supply a custom renderer.
+
+```tsx
+import { GenerativeUIView } from 'json-ui-lite-rn'
+;<GenerativeUIView spec={spec} loading={isGenerating} />
+```
+
+Props:
+
+- `spec`: `{ root, elements }` object (or `null`/`undefined`)
+- `loading`: optional boolean for empty-state loading text
+- `showCollapsibleJSON`: optional boolean to render an expandable JSON debug panel
+- `styles`: optional override for style validators (merged with default `GEN_UI_STYLES`); the resulting map is passed to `GenUINode`
+- `GenUINodeComponent`: optional custom component to render the tree; receives `{ nodeId, elements, styles }`; delegate to default `GenUINode` for nodes you don’t handle
+
+#### Styles from GenerativeUIView
+
+The default `GenUINode` does not import `GEN_UI_STYLES` itself. `GenerativeUIView` merges the registry default with any `styles` prop and passes the result down as the `styles` prop to `GenUINode`. So all style validation is driven by what the view provides, and you can pass custom validators:
+
+```tsx
+import { z } from 'zod'
+import { GenerativeUIView, GEN_UI_STYLES } from 'json-ui-lite-rn'
+
+;<GenerativeUIView
+  spec={spec}
+  styles={{
+    borderRadius: z.number(),
+  }}
+/>
+```
+
+#### Custom GenUINode example
+
+You can supply your own node renderer and reuse the library’s style/prop parsing for custom component types. For one type render a custom component using `parseGenUIElementProps`; for everything else use the default `GenUINode`:
+
+```tsx
+import { View, Text, StyleSheet } from 'react-native'
+import {
+  GenerativeUIView,
+  GenUINode,
+  parseGenUIElementProps,
+  type GenUINodeProps,
+} from 'json-ui-lite-rn'
+
+const BADGE_TYPE = 'Badge'
+
+function CustomGenUINode({
+  nodeId,
+  elements,
+  styles,
+  GenUINodeComponent,
+}: GenUINodeProps) {
+  const element = elements[nodeId]
+  if (!element) return null
+  if (element.type === BADGE_TYPE) {
+    const { baseStyle, text } = parseGenUIElementProps(element, styles, {
+      nodeId,
+      type: BADGE_TYPE,
+    })
+    return (
+      <View style={[customStyles.badge, baseStyle]}>
+        <Text style={customStyles.badgeText}>{text ?? ''}</Text>
+      </View>
+    )
+  }
+  return (
+    <GenUINode
+      nodeId={nodeId}
+      elements={elements}
+      styles={styles}
+      GenUINodeComponent={GenUINodeComponent}
+    />
+  )
+}
+
+const customStyles = StyleSheet.create({
+  badge: { alignSelf: 'flex-start', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12 },
+  badgeText: { fontSize: 12, color: '#fff' },
+})
+
+// Use the custom renderer; styles still come from the view (default or overridden).
+<GenerativeUIView spec={spec} GenUINodeComponent={CustomGenUINode} />
+```
+
+## Notes
+
+- style validation is schema-based (`zod`) through `GEN_UI_STYLES`
+- tools are framework-agnostic as long as your spec matches `{ root, elements }`
+- this package is intentionally minimal and optimized for small-model tool loops
+
+## Prior art
+
+[`json-render`](https://github.com/vercel-labs/json-render) is an alternative that has existed before this library was introduced.
+It provides a package both for React and React Native integration and is also compatible with the [AI SDK](https://github.com/vercel/ai). Its design involves two primary concepts:
+
+- the LLM streams the UI directly in a predefined format and all outputs are intercepted by the stream parser
+- the library provides a (long) system prompt which well describes that format for the LLM to follow, along with examples
+
+This is good if you are running a large language model, such as the powerful models provided by cloud providers like OpenAPI or Antrophic. However, if you are running locally, for instance using Apple Foundation models, you will encounter the following problems:
+
+- context window size limit - Apple Foundation models have 4096 tokens, meaning roughly 2-3 times as much latin characters (even less multi-byte chars); if you consider the long system prompt (which is needed since the format is complex), you will soon run out of tokens in this window and need e.g. to summarize
+- model comprehension - json-render introduces complex actions and state capabilities, while just generating static UIs is a complex task for small language models; thus, json-render is an overkill that the local model may not manage to power
+
+This library solves this:
+
+- instead of a feature-rich, complex format for streaming, we use tool calling - thus, the model outputs small JSONs in parts by calling tools on smaller pieces, reducing the probability of errors
+- the feature set is more narrow, currently supporting only static UIs (which will change in the future), for models with less parameters to be able to complete the given tasks successfully
+
+## License
+
+MIT

package/lib/commonjs/GenUINode.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GenUINode = GenUINode;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _parseGenUIProps = require("./parseGenUIProps");
+var _registry = require("./registry");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function GenUINode({
+  nodeId,
+  elements,
+  styles: styleValidators,
+  GenUINodeComponent
+}) {
+  const element = elements[nodeId];
+  if (!element) return null;
+  const {
+    type,
+    props,
+    children = []
+  } = element;
+  const {
+    baseStyle,
+    text,
+    label
+  } = (0, _parseGenUIProps.parseGenUIElementProps)(element, styleValidators, {
+    nodeId,
+    type
+  });
+  const ChildRenderer = GenUINodeComponent ?? GenUINode;
+  const childProps = {
+    elements,
+    styles: styleValidators,
+    GenUINodeComponent
+  };
+  switch (type) {
+    case 'Container':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.container, baseStyle],
+        children: children.map(id => /*#__PURE__*/(0, _jsxRuntime.jsx)(ChildRenderer, {
+          ...childProps,
+          nodeId: id
+        }, id))
+      });
+    case _registry.GEN_UI_NODE_NAMES.Text:
+    case _registry.GEN_UI_NODE_NAMES.Paragraph:
+    case _registry.GEN_UI_NODE_NAMES.Label:
+    case _registry.GEN_UI_NODE_NAMES.Heading:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.text, baseStyle],
+        children: text ?? label ?? ''
+      });
+    case _registry.GEN_UI_NODE_NAMES.Button:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: [styles.button, baseStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.buttonText, baseStyle],
+          children: label ?? text ?? ''
+        })
+      });
+    case _registry.GEN_UI_NODE_NAMES.TextInput:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        placeholder: props?.placeholder,
+        style: [styles.textInput, baseStyle],
+        onChangeText: () => {}
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.container, baseStyle],
+        children: children.map(id => /*#__PURE__*/(0, _jsxRuntime.jsx)(ChildRenderer, {
+          ...childProps,
+          nodeId: id
+        }, id))
+      });
+  }
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    gap: 8,
+    flex: 1
+  },
+  text: {
+    fontSize: 16,
+    color: '#111827',
+    flex: 1
+  },
+  button: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    backgroundColor: '#3b82f6',
+    borderRadius: 8,
+    alignSelf: 'flex-start',
+    flex: 1
+  },
+  buttonText: {
+    flex: 1,
+    color: 'white'
+  },
+  textInput: {
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    borderRadius: 8,
+    padding: 8,
+    fontSize: 16,
+    color: '#111827',
+    flex: 1
+  }
+});
+//# sourceMappingURL=GenUINode.js.map

package/lib/commonjs/GenUINode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_parseGenUIProps","_registry","_jsxRuntime","e","__esModule","default","GenUINode","nodeId","elements","styles","styleValidators","GenUINodeComponent","element","type","props","children","baseStyle","text","label","parseGenUIElementProps","ChildRenderer","childProps","jsx","View","style","container","map","id","GEN_UI_NODE_NAMES","Text","Paragraph","Label","Heading","Button","Pressable","button","buttonText","TextInput","placeholder","textInput","onChangeText","StyleSheet","create","gap","flex","fontSize","color","paddingHorizontal","paddingVertical","backgroundColor","borderRadius","alignSelf","borderWidth","borderColor","padding"],"sourceRoot":"../../src","sources":["GenUINode.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/GenerativeUIView.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GenerativeUIView = GenerativeUIView;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _GenUINode = require("./GenUINode");
+var _registry = require("./registry");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function GenerativeUIView({
+  spec,
+  loading,
+  showCollapsibleJSON,
+  styles: stylesOverride,
+  GenUINodeComponent
+}) {
+  const [expanded, setExpanded] = _react.default.useState(false);
+  const normalized = _react.default.useMemo(() => {
+    if (!spec?.root || !spec.elements) return null;
+    const rootElement = spec.elements[spec.root];
+    if (!rootElement) return null;
+    return spec;
+  }, [spec]);
+  const styleValidators = _react.default.useMemo(() => ({
+    ..._registry.GEN_UI_STYLES,
+    ...stylesOverride
+  }), [stylesOverride]);
+  if (!normalized) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.placeholder,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.placeholderText,
+        children: loading ? 'Loading…' : 'Use tools getGenUIRootNode, addNode, etc. to build the UI.'
+      })
+    });
+  }
+  const NodeRenderer = GenUINodeComponent ?? _GenUINode.GenUINode;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.wrapper,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NodeRenderer, {
+      nodeId: normalized.root,
+      elements: normalized.elements,
+      styles: styleValidators,
+      GenUINodeComponent: GenUINodeComponent
+    }), showCollapsibleJSON ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.jsonPanel,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+        onPress: () => setExpanded(prev => !prev),
+        style: styles.jsonHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.jsonHeaderText,
+          children: "UI JSON"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.jsonHeaderIcon,
+          children: expanded ? '[-]' : '[+]'
+        })]
+      }), expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        selectable: true,
+        style: styles.jsonText,
+        children: JSON.stringify(normalized, null, 2)
+      }) : null]
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 8
+  },
+  jsonPanel: {
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: '#f9fafb'
+  },
+  jsonHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 8
+  },
+  jsonHeaderText: {
+    fontSize: 13,
+    color: '#4b5563',
+    fontWeight: '600'
+  },
+  jsonHeaderIcon: {
+    fontSize: 12,
+    color: '#9ca3af',
+    fontWeight: '600'
+  },
+  jsonText: {
+    marginTop: 8,
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#374151',
+    fontFamily: 'Menlo'
+  },
+  placeholder: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24
+  },
+  placeholderText: {
+    fontSize: 15,
+    color: '#6b7280',
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=GenerativeUIView.js.map

package/lib/commonjs/GenerativeUIView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_GenUINode","_registry","_jsxRuntime","e","__esModule","default","GenerativeUIView","spec","loading","showCollapsibleJSON","styles","stylesOverride","GenUINodeComponent","expanded","setExpanded","React","useState","normalized","useMemo","root","elements","rootElement","styleValidators","GEN_UI_STYLES","jsx","View","style","placeholder","children","Text","placeholderText","NodeRenderer","GenUINode","jsxs","wrapper","nodeId","jsonPanel","Pressable","onPress","prev","jsonHeader","jsonHeaderText","jsonHeaderIcon","selectable","jsonText","JSON","stringify","StyleSheet","create","flex","justifyContent","gap","borderWidth","borderColor","borderRadius","paddingHorizontal","paddingVertical","backgroundColor","flexDirection","alignItems","fontSize","color","fontWeight","marginTop","lineHeight","fontFamily","padding","textAlign"],"sourceRoot":"../../src","sources":["GenerativeUIView.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_GEN_UI_ROOT_ID", {
+  enumerable: true,
+  get: function () {
+    return _registry.DEFAULT_GEN_UI_ROOT_ID;
+  }
+});
+Object.defineProperty(exports, "GEN_UI_NODE_HINTS", {
+  enumerable: true,
+  get: function () {
+    return _registry.GEN_UI_NODE_HINTS;
+  }
+});
+Object.defineProperty(exports, "GEN_UI_NODE_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _registry.GEN_UI_NODE_NAMES;
+  }
+});
+Object.defineProperty(exports, "GEN_UI_NODE_NAMES_THAT_SUPPORT_CHILDREN", {
+  enumerable: true,
+  get: function () {
+    return _registry.GEN_UI_NODE_NAMES_THAT_SUPPORT_CHILDREN;
+  }
+});
+Object.defineProperty(exports, "GEN_UI_STYLES", {
+  enumerable: true,
+  get: function () {
+    return _registry.GEN_UI_STYLES;
+  }
+});
+Object.defineProperty(exports, "GEN_UI_STYLE_HINTS", {
+  enumerable: true,
+  get: function () {
+    return _registry.GEN_UI_STYLE_HINTS;
+  }
+});
+Object.defineProperty(exports, "GenUINode", {
+  enumerable: true,
+  get: function () {
+    return _GenUINode.GenUINode;
+  }
+});
+Object.defineProperty(exports, "GenerativeUIView", {
+  enumerable: true,
+  get: function () {
+    return _GenerativeUIView.GenerativeUIView;
+  }
+});
+Object.defineProperty(exports, "buildGenUISystemPrompt", {
+  enumerable: true,
+  get: function () {
+    return _prompt.buildGenUISystemPrompt;
+  }
+});
+Object.defineProperty(exports, "createGenUITools", {
+  enumerable: true,
+  get: function () {
+    return _tools.createGenUITools;
+  }
+});
+Object.defineProperty(exports, "parseGenUIElementProps", {
+  enumerable: true,
+  get: function () {
+    return _parseGenUIProps.parseGenUIElementProps;
+  }
+});
+var _GenerativeUIView = require("./GenerativeUIView");
+var _GenUINode = require("./GenUINode");
+var _parseGenUIProps = require("./parseGenUIProps");
+var _prompt = require("./prompt");
+var _registry = require("./registry");
+var _tools = require("./tools");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_GenerativeUIView","require","_GenUINode","_parseGenUIProps","_prompt","_registry","_tools"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAIA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AAMA,IAAAG,OAAA,GAAAH,OAAA;AAKA,IAAAI,SAAA,GAAAJ,OAAA;AAQA,IAAAK,MAAA,GAAAL,OAAA","ignoreList":[]}

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/commonjs/parseGenUIProps.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseGenUIElementProps = parseGenUIElementProps;
+/**
+ * Parses a JSON UI element's props into a baseStyle object (validated by style validators)
+ * and common fields (text, label). Use this in custom GenUINode implementations to reuse
+ * the same style and prop parsing as the default renderer.
+ */
+function parseGenUIElementProps(element, styleValidators, options) {
+  const {
+    nodeId = '',
+    type = ''
+  } = options ?? {};
+  const props = element.props ?? {};
+  const style = props.style;
+  const flex = props.flex;
+  const padding = props.padding;
+  const gap = props.gap;
+  const text = props.text ?? props.value ?? props.label;
+  const label = props.label ?? props.text;
+  const baseStyle = {
+    ...(flex != null ? {
+      flex
+    } : {}),
+    ...(padding != null ? {
+      padding
+    } : {}),
+    ...(gap != null ? {
+      gap
+    } : {}),
+    ...style
+  };
+  for (const key of Object.keys(props)) {
+    const validator = styleValidators[key];
+    if (validator) {
+      if (validator.safeParse(props[key]).success) {
+        baseStyle[key] = props[key];
+      } else {
+        console.warn(`[json-ui-lite-rn] Invalid style prop: ${key} for node ${nodeId} of type ${type}: ${props[key]}`);
+      }
+    }
+  }
+  return {
+    baseStyle,
+    text,
+    label,
+    props
+  };
+}
+//# sourceMappingURL=parseGenUIProps.js.map

package/lib/commonjs/parseGenUIProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseGenUIElementProps","element","styleValidators","options","nodeId","type","props","style","flex","padding","gap","text","value","label","baseStyle","key","Object","keys","validator","safeParse","success","console","warn"],"sourceRoot":"../../src","sources":["parseGenUIProps.ts"],"mappings":";;;;;;AAkBA;AACA;AACA;AACA;AACA;AACO,SAASA,sBAAsBA,CACpCC,OAAsB,EACtBC,eAAkC,EAClCC,OAAuC,EACrB;EAClB,MAAM;IAAEC,MAAM,GAAG,EAAE;IAAEC,IAAI,GAAG;EAAG,CAAC,GAAGF,OAAO,IAAI,CAAC,CAAC;EAChD,MAAMG,KAAK,GAAGL,OAAO,CAACK,KAAK,IAAI,CAAC,CAAC;EACjC,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAA4C;EAChE,MAAMC,IAAI,GAAGF,KAAK,CAACE,IAA0B;EAC7C,MAAMC,OAAO,GAAGH,KAAK,CAACG,OAA6B;EACnD,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAyB;EAC3C,MAAMC,IAAI,GAAIL,KAAK,CAACK,IAAI,IAAIL,KAAK,CAACM,KAAK,IAAIN,KAAK,CAACO,KAA4B;EAC7E,MAAMA,KAAK,GAAIP,KAAK,CAACO,KAAK,IAAIP,KAAK,CAACK,IAA2B;EAE/D,MAAMG,SAAS,GAAG;IAChB,IAAIN,IAAI,IAAI,IAAI,GAAG;MAAEA;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACjC,IAAIC,OAAO,IAAI,IAAI,GAAG;MAAEA;IAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,IAAIC,GAAG,IAAI,IAAI,GAAG;MAAEA;IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,GAAGH;EACL,CAA4B;EAE5B,KAAK,MAAMQ,GAAG,IAAIC,MAAM,CAACC,IAAI,CAACX,KAAK,CAAC,EAAE;IACpC,MAAMY,SAAS,GAAGhB,eAAe,CAACa,GAAG,CAAC;IACtC,IAAIG,SAAS,EAAE;MACb,IAAIA,SAAS,CAACC,SAAS,CAACb,KAAK,CAACS,GAAG,CAAC,CAAC,CAACK,OAAO,EAAE;QAC3CN,SAAS,CAACC,GAAG,CAAC,GAAGT,KAAK,CAACS,GAAG,CAAC;MAC7B,CAAC,MAAM;QACLM,OAAO,CAACC,IAAI,CACV,yCAAyCP,GAAG,aAAaX,MAAM,YAAYC,IAAI,KAAKC,KAAK,CAACS,GAAG,CAAC,EAChG,CAAC;MACH;IACF;EACF;EAEA,OAAO;IAAED,SAAS;IAAEH,IAAI;IAAEE,KAAK;IAAEP;EAAM,CAAC;AAC1C","ignoreList":[]}

package/lib/commonjs/prompt.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildGenUISystemPrompt = buildGenUISystemPrompt;
+var _registry = require("./registry");
+function buildGenUISystemPrompt({
+  additionalInstructions,
+  requireLayoutReadBeforeAddingNodes = true,
+  styleHints = _registry.GEN_UI_STYLE_HINTS
+} = {}) {
+  const styleKeysText = Object.entries(styleHints).map(([key, entry]) => {
+    let text = `${key} [${entry.type}]`;
+    if (entry.description) text += ` (${entry.description})`;
+    return text;
+  }).join(', ');
+  const parts = ['You are a helpful assistant.', 'You have tools to create and update UI nodes. Before any tool calls for UI, ALWAYS CALL getUILayout before and after.', 'Remember this is React Native, not web, and use simple props.', `If you set the "style" prop on a UI node, the possible keys are: ${styleKeysText}.`, 'Remember NEVER use web values.'];
+  if (requireLayoutReadBeforeAddingNodes) {
+    parts.push('BEFORE ADDING ANY UI ELEMENTS, GET THE WHOLE UI TREE with getGenUILayout.');
+  }
+  if (additionalInstructions?.trim()) {
+    parts.push(additionalInstructions.trim());
+  }
+  return parts.join(' ');
+}
+//# sourceMappingURL=prompt.js.map

package/lib/commonjs/prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_registry","require","buildGenUISystemPrompt","additionalInstructions","requireLayoutReadBeforeAddingNodes","styleHints","GEN_UI_STYLE_HINTS","styleKeysText","Object","entries","map","key","entry","text","type","description","join","parts","push","trim"],"sourceRoot":"../../src","sources":["prompt.ts"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAgBO,SAASC,sBAAsBA,CAAC;EACrCC,sBAAsB;EACtBC,kCAAkC,GAAG,IAAI;EACzCC,UAAU,GAAGC;AACgB,CAAC,GAAG,CAAC,CAAC,EAAE;EACrC,MAAMC,aAAa,GAAGC,MAAM,CAACC,OAAO,CAACJ,UAAU,CAAC,CAC7CK,GAAG,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;IACrB,IAAIC,IAAI,GAAG,GAAGF,GAAG,KAAKC,KAAK,CAACE,IAAI,GAAG;IACnC,IAAIF,KAAK,CAACG,WAAW,EAAEF,IAAI,IAAI,KAAKD,KAAK,CAACG,WAAW,GAAG;IACxD,OAAOF,IAAI;EACb,CAAC,CAAC,CACDG,IAAI,CAAC,IAAI,CAAC;EAEb,MAAMC,KAAK,GAAG,CACZ,8BAA8B,EAC9B,uHAAuH,EACvH,+DAA+D,EAC/D,oEAAoEV,aAAa,GAAG,EACpF,gCAAgC,CACjC;EAED,IAAIH,kCAAkC,EAAE;IACtCa,KAAK,CAACC,IAAI,CACR,2EACF,CAAC;EACH;EAEA,IAAIf,sBAAsB,EAAEgB,IAAI,CAAC,CAAC,EAAE;IAClCF,KAAK,CAACC,IAAI,CAACf,sBAAsB,CAACgB,IAAI,CAAC,CAAC,CAAC;EAC3C;EAEA,OAAOF,KAAK,CAACD,IAAI,CAAC,GAAG,CAAC;AACxB","ignoreList":[]}