getsyntux 0.6.0 → 0.7.2

package/README.md

@@ -10,7 +10,13 @@ You give it a <code>value</code> and it designs the UI to display it.
 
 ---
 
-https://github.com/user-attachments/assets/694d4646-c36d-4c19-a111-86e546484101
+https://github.com/user-attachments/assets/c85de55d-21f3-43ff-8bd3-d6ede2171447
+
+*syntux* is designed to **display data**. Do not let this fact intimidate you - that is simply a testament to how token-efficient it is.
+
+For instance, if you provide an array `value` with 10,000 items, it will cost you the same as one with 10 items. **That is how efficient syntux is**. 
+
+### Features
 
 - ⚡ **Streamable** - display UI as you generate.
 - 🎨 **Custom Components** - use your own React components.
@@ -18,7 +24,7 @@ https://github.com/user-attachments/assets/694d4646-c36d-4c19-a111-86e546484101
 
 **How does it work?** *syntux* generates a JSON-DSL to represent the UI, known as the React Interface Schema. The specifics are in the FAQ [below](#faq).
 
-<h3 align="center" margin="0"><a href="https://github.com/puffinsoft/syntux/wiki">➡️ view documentation</a></h3>
+<h3 align="center" margin="0"><a href="https://docs.getsyntux.com/">➡️ view documentation</a></h3>
 
 ---
 
@@ -45,7 +51,7 @@ const valueToDisplay = {
 *syntux* takes the `value` into consideration and designs a UI to best display it. `value` can be anything; an object, array or primitive.
 
 > [!TIP]
-> If you are passing in a **large array** as a value, or an object with untrusted input, use the `skeletonize` property. See [the explanation](https://github.com/puffinsoft/syntux/wiki/FAQ#handling-untrusted-input--large-arrays).
+> If you are passing in a **large array** as a value, or an object with untrusted input, use the `skeletonize` property. See [the explanation](https://docs.getsyntux.com/advanced#skeletonize-property).
 
 ### Installation
 
@@ -109,7 +115,7 @@ import { CustomOne, CustomTwo } from '@/my_components'
 export default function Home(){
    const valueToDisplay = { ... };
 
-   <GeneratedUI components={[
+   return <GeneratedUI components={[
     { name: 'Button', props: "{ color: string, text: string }", component: CustomOne },
     { name: 'Input', props: "{ initial: string, disabled: boolean }", component: CustomTwo, context: "Creates an input field with an (initial) value. Can be disabled." }
    ]} />
@@ -118,33 +124,29 @@ export default function Home(){
 
 <sup>
 
-**Note**: the `components` array above can be generated automatically with `npx getsyntux generate-defs <component.tsx>`. See the [documentation](https://github.com/puffinsoft/syntux/wiki).
+**Note**: the `components` array above can be generated automatically with `npx getsyntux generate-defs <component.tsx>`. See the [documentation](https://docs.getsyntux.com/api#generate-defs).
 
 </sup>
 
 Make sure components are marked with `"use client"`.
 
-#### Custom actions
+#### Update value (interactivity)
 
-Perform server actions, attached automatically to component events:
+Use the `useSyntux` hook to retrieve and update the `value` inside a custom component:
 
 ```jsx
-import { defineTool } from "getsyntux";
+"use client";
 
-export default function Home(){
-   const valueToDisplay = { ... };
+export default function CustomComponent(){
+    const { value, setValue } = useSyntux();
 
-   <GeneratedUI actions = {{
-    "delete": defineTool(async (id: string) => { "use server"; /* ... */ }, "id: string", "deletes post with id"),
-    "refresh": defineTool(async () => { "use server"; /* ... */})
-   }} />
+    return <button onClick={() => {
+        const newArr = [...value];
+        newArr.push({ ... });
+        setValue(newArr);
+    }}>Add value</button>
 }
 ```
-<sup>
-
-**Note**: The name of the action should specify its purpose (it is seen by the LLM). Use `defineTool` to add further context to actions. See the [documentation](https://github.com/puffinsoft/syntux/wiki).
-
-</sup>
 
 ---
 
@@ -153,7 +155,7 @@ export default function Home(){
 <details>
  <summary>How expensive is generation?</summary>
 
-*syntux* is highly optimized to save tokens. See [here](https://github.com/puffinsoft/syntux/wiki/FAQ#how-expensive-is-this) for a cost estimation table and an explanation.
+*syntux* is highly optimized to save tokens. See [here](https://docs.getsyntux.com/advanced#cost-estimation) for a cost estimation table and an explanation.
 </details>
 
 <details>

package/dist/client.d.mts

@@ -1,17 +1,19 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StreamableValue } from '@ai-sdk/rsc';
+import * as react from 'react';
 import react__default, { JSX, ComponentType } from 'react';
-import { C as ContextfulAction, b as ComponentMap, c as ChildrenMap } from './types-CtXPasY-.mjs';
+import { A as AnimateOptions, a as ComponentMap, C as ChildrenMap } from './types-C9N85B_g.mjs';
 
 /**
  * Client wrapper for Renderer that handles streaming and parsing with server.
  */
-declare function GeneratedClient({ value, allowedComponents, inputStream, placeholder, actions }: {
+declare function GeneratedClient({ value, allowedComponents, inputStream, placeholder, errorFallback, animate }: {
     value: any;
     allowedComponents: Record<string, react__default.ComponentType<any> | string>;
     inputStream: StreamableValue<string>;
     placeholder?: JSX.Element;
-    actions?: Record<string, ContextfulAction>;
+    errorFallback?: JSX.Element;
+    animate?: AnimateOptions;
 }): react_jsx_runtime.JSX.Element;
 
 interface RendererProps {
@@ -21,11 +23,18 @@ interface RendererProps {
     allowedComponents: Record<string, ComponentType<any> | string>;
     global: any;
     local: any;
-    actions: Record<string, ContextfulAction>;
+    animate?: AnimateOptions;
 }
 /**
  * Renders a UISchema recursively, in accordance to the spec.
  */
 declare function Renderer(props: RendererProps): react_jsx_runtime.JSX.Element;
 
-export { GeneratedClient, Renderer, type RendererProps };
+type SyntuxContextType = {
+    value: any;
+    setValue: (arg0: any) => void;
+};
+declare const SyntuxContext: react.Context<SyntuxContextType>;
+declare function useSyntux(): SyntuxContextType;
+
+export { GeneratedClient, Renderer, type RendererProps, SyntuxContext, type SyntuxContextType, useSyntux };

package/dist/client.mjs

@@ -1,3 +1,3 @@
-"use client";import{readStreamableValue as J}from"@ai-sdk/rsc";import{useEffect as O,useReducer as U,useRef as V}from"react";import{Fragment as _}from"react";import{Fragment as A,jsx as d}from"react/jsx-runtime";import{createElement as F}from"react";var R=(r,t)=>t==="$"?r:t.split(".").reduce((e,i)=>e==null?void 0:e[i],r),p=(r,t,e)=>e.startsWith("$item.")?(e=e.slice(6),R(t,e)):e==="$item"?t:R(r,e),$=new Set(["dangerouslySetInnerHTML"]),P=(r,t,e,i)=>{if(!e)return e;if("$action"in e){let n=i[e.$action];if(!n)return()=>{};let s=e.args.map(o=>o&&typeof o=="object"&&"$bind"in o?p(r,t,o.$bind):o);return o=>{n.fn(...s)}}if("$bind"in e){let n=p(r,t,e.$bind);return Object.keys(n).forEach(s=>{$.has(s)&&delete n[s]}),n}return Object.keys(e).forEach(n=>{if($.has(n)){delete e[n];return}let s=e[n];typeof s=="object"&&(e[n]=P(r,t,s,i))}),e},x=(r,t,e)=>typeof e=="object"?p(r,t,e.$bind):e;function h(r){var M,S;let{id:t,componentMap:e,childrenMap:i,global:n,local:s,allowedComponents:o,actions:c}=r,a=e[t];if(a.type==="TEXT")return d(A,{children:x(n,s,a.content)});let f=(M=a.props)==null?void 0:M.source;if(a.type==="__ForEach__"&&f){let l=p(n,s,f);if(!Array.isArray(l))return null;let m=i[a.id];return d(A,{children:m==null?void 0:m.map((T,N)=>d(_,{children:l.map((v,L)=>F(h,{...r,id:T,local:v,key:L}))},N))})}let u=o[a.type]||a.type,g=P(n,s,a.props,c),E=x(n,s,a.content),I=((S=i[a.id])==null?void 0:S.map((l,m)=>d(h,{...r,id:l},m)))||[],C=[E,...I].filter(l=>l!=null);return C.length>0?d(u,{...g,children:C}):d(u,{...g})}var y=class{buffer="";schema={childrenMap:{},componentMap:{},root:null};addDelta(t){this.buffer+=t;let e=this.buffer.split(`
-`);return e.length>1?(e.slice(0,e.length-1).forEach(i=>this.handleLine(i)),this.buffer=e[e.length-1],!0):!1}handleLine(t){try{let e=JSON.parse(t),{childrenMap:i,componentMap:n}=this.schema;n[e.id]=e,e.parentId===null?this.schema.root=e:(i[e.parentId]||(i[e.parentId]=[]),i[e.parentId].push(e.id))}catch{}}finish(){this.handleLine(this.buffer),this.buffer=""}};import{Fragment as w,jsx as b}from"react/jsx-runtime";function ee({value:r,allowedComponents:t,inputStream:e,placeholder:i,actions:n}){var a;let[,s]=U(f=>f+1,0),o=V(null);O(()=>{o.current=new y,(async()=>{for await(let u of J(e))o.current&&u!==void 0&&o.current.addDelta(u)&&s()})().then(()=>{o.current.finish(),s()})},[e]);let c=(a=o==null?void 0:o.current)==null?void 0:a.schema;return b(w,{children:c!=null&&c.root?b(h,{id:c.root.id,componentMap:c.componentMap,childrenMap:c.childrenMap,allowedComponents:t,global:r,local:r,actions:n||{}}):b(w,{children:i})})}export{ee as GeneratedClient,h as Renderer};
+"use client";import{readStreamableValue as H}from"@ai-sdk/rsc";import{useEffect as W,useMemo as z,useReducer as B,useRef as K,useState as J}from"react";var x=class{buffer="";schema={childrenMap:{},componentMap:{},root:null};addDelta(r){this.buffer+=r;let e=this.buffer.split(`
+`);return e.length>1?(e.slice(0,e.length-1).forEach(t=>this.handleLine(t)),this.buffer=e[e.length-1],!0):!1}handleLine(r){try{let e=JSON.parse(r),{childrenMap:t,componentMap:s}=this.schema;s[e.id]=e,e.parentId===null?this.schema.root=e:(t[e.parentId]||(t[e.parentId]=[]),t[e.parentId].push(e.id))}catch{}}finish(){this.handleLine(this.buffer),this.buffer=""}};import{Fragment as k,useEffect as D,useState as G}from"react";import{Fragment as F,jsx as f}from"react/jsx-runtime";import{createElement as Y}from"react";var T=(n,r)=>r==="$"?n:r.split(".").reduce((e,t)=>e==null?void 0:e[t],n),v=(n,r,e)=>e.startsWith("$item.")?(e=e.slice(6),T(r,e)):e==="$item"?r:T(n,e),$=new Set(["dangerouslySetInnerHTML"]),N=(n,r,e)=>{if(!e)return e;if("$bind"in e){let t=v(n,r,e.$bind);return Object.keys(t).forEach(s=>{$.has(s)&&delete t[s]}),t}return Object.keys(e).forEach(t=>{if($.has(t)){delete e[t];return}let s=e[t];typeof s=="object"&&(e[t]=N(n,r,s))}),e},O=(n,r,e)=>typeof e=="object"?v(n,r,e.$bind):e;function C(n){var V,A,I;let[r,e]=G(!1);D(()=>{let c=requestAnimationFrame(()=>e(!0));return()=>cancelAnimationFrame(c)},[]);let{id:t,componentMap:s,childrenMap:M,global:l,local:m,allowedComponents:y,animate:o}=n,a=s[t];if(a.type==="TEXT")return f(F,{children:O(l,m,a.content)});let h=(V=a.props)==null?void 0:V.source;if(a.type==="__ForEach__"&&h){let c=v(l,m,h);if(!Array.isArray(c))return null;let p=M[a.id];return f(F,{children:p==null?void 0:p.map((L,U)=>f(k,{children:c.map((X,_)=>Y(C,{...n,id:L,local:X,key:_}))},U))})}let u=y[a.type]||a.type,i={...N(l,m,a.props)};i.style={...i.style||{}};let S=((A=i.style)==null?void 0:A.opacity)??1;i.style.opacity=r?S:0,i.style.transform=r?"translateY(0)":`translateY(${(o==null?void 0:o.offset)??10}px)`,i.style.transition=`opacity ${(o==null?void 0:o.duration)??200}ms ease-out, transform ${(o==null?void 0:o.duration)??200}ms ease-out`,i.style.willChange="opacity, transform";let b=O(l,m,a.content),g=((I=M[a.id])==null?void 0:I.map((c,p)=>f(C,{...n,id:c},p)))||[],w=[b,...g].filter(c=>c!=null);return w.length>0?f(u,{...i,children:w}):f(u,{...i})}import{createContext as j,useContext as q}from"react";var P=j(null);function se(){let n=q(P);if(!n)throw new Error("useSyntux must be used inside a GeneratedUI.");return n}import{Fragment as R,jsx as d}from"react/jsx-runtime";function ye({value:n,allowedComponents:r,inputStream:e,placeholder:t,errorFallback:s,animate:M}){var S;let[l,m]=J(n),[,y]=B(b=>b+1,0),o=K(null),[a,h]=J(!1);W(()=>{o.current=new x,(async()=>{for await(let g of H(e))o.current&&g!==void 0&&o.current.addDelta(g)&&y()})().then(()=>{o.current.finish(),y()}).catch(()=>{h(!0)})},[e]);let u=(S=o==null?void 0:o.current)==null?void 0:S.schema,E=z(()=>({value:l,setValue:m}),[l]),i=()=>a&&s?d(R,{children:s}):u!=null&&u.root?d(C,{id:u.root.id,componentMap:u.componentMap,childrenMap:u.childrenMap,allowedComponents:r,global:l,local:l}):d(R,{children:t});return d(R,{children:d(P.Provider,{value:E,children:i()})})}export{ye as GeneratedClient,C as Renderer,P as SyntuxContext,se as useSyntux};
 //# sourceMappingURL=client.mjs.map

package/dist/client.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client/GeneratedClient.tsx","../src/client/Renderer.tsx","../src/ResponseParser.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { StreamableValue, readStreamableValue } from '@ai-sdk/rsc';\r\nimport React, { JSX, useEffect, useReducer, useRef, useState } from 'react';\r\nimport { Renderer } from './Renderer';\r\nimport { ResponseParser } from '../ResponseParser';\r\nimport { ContextfulAction } from 'src/types';\r\n\r\n/**\r\n * Client wrapper for Renderer that handles streaming and parsing with server.\r\n */\r\nexport function GeneratedClient({\r\n  value,\r\n  allowedComponents,\r\n  inputStream,\r\n  placeholder,\r\n  actions\r\n}: {\r\n  value: any,\r\n  allowedComponents: Record<string, React.ComponentType<any> | string>,\r\n  inputStream: StreamableValue<string>,\r\n  placeholder?: JSX.Element,\r\n  actions?: Record<string, ContextfulAction>\r\n}) {\r\n  const [, forceUpdate] = useReducer(x => x + 1, 0);\r\n  const parser = useRef<ResponseParser | null>(null);\r\n\r\n  useEffect(() => {\r\n    // forcibly create a new one for HMR\r\n    parser.current = new ResponseParser();\r\n\r\n    const parseStream = async () => {\r\n      for await (const delta of readStreamableValue(inputStream)) {\r\n        if (parser.current && delta !== undefined) {\r\n          if (parser.current.addDelta(delta)) {\r\n            forceUpdate();\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    parseStream().then(() => {\r\n      parser.current.finish();\r\n      forceUpdate();\r\n    });\r\n  }, [inputStream]);\r\n\r\n  const schema = parser?.current?.schema;\r\n\r\n  return (\r\n    <>\r\n      {schema?.root ?\r\n        <Renderer id={schema.root.id} componentMap={schema.componentMap} childrenMap={schema.childrenMap} allowedComponents={allowedComponents} global={value} local={value} actions={actions || {}} />\r\n        : <>{placeholder}</>}\r\n    </>\r\n  )\r\n}\r\n","\"use client\";\r\n\r\nimport { ComponentType, Fragment } from 'react'\r\nimport { ChildrenMap, ComponentMap, ContextfulAction, SchemaNode } from '../types';\r\n\r\n/**\r\n * lightweight implementation of lodash.get\r\n */\r\nconst resolvePath = (obj: any, path: string) => {\r\n    if (path === '$') return obj;\r\n    return path.split('.').reduce((acc, curr) => acc?.[curr], obj)\r\n}\r\n\r\n/**\r\n * parses binding protocol and performs property lookup w/ scope resolution\r\n */\r\nconst get = (global: any, local: any, path: string) => {\r\n    if (path.startsWith(\"$item.\")) {\r\n        path = path.slice(6)\r\n        return resolvePath(local, path);\r\n    } else {\r\n        if (path === \"$item\") return local;\r\n        return resolvePath(global, path);\r\n    }\r\n}\r\n\r\n\r\nconst blacklistedProps = new Set([\"dangerouslySetInnerHTML\"])\r\n/**\r\n * recursively parses props for bindings, replacing with true values\r\n */\r\nconst resolveProps = (global: any, local: any, props: any, actions: Record<string, ContextfulAction>) => {\r\n    if (!props) return props;\r\n    if (\"$action\" in props) {\r\n        const action = actions[props.$action];\r\n        if (!action) return () => { };\r\n\r\n        const resolvedArgs = props.args.map((arg: any) => {\r\n            if (arg && typeof arg === \"object\" && \"$bind\" in arg) {\r\n                return get(global, local, arg.$bind);\r\n            } else {\r\n                return arg;\r\n            }\r\n        })\r\n\r\n        return (e: any) => {\r\n            action.fn(...resolvedArgs)\r\n        }\r\n    }\r\n\r\n    if (\"$bind\" in props) { // $bind may be falsy value\r\n        const resolved = get(global, local, props.$bind);\r\n        Object.keys(resolved).forEach((key) => {\r\n            if(blacklistedProps.has(key)){\r\n                delete resolved[key];\r\n            }\r\n        })\r\n        return resolved;\r\n    }\r\n\r\n    Object.keys(props).forEach((key) => {\r\n        if (blacklistedProps.has(key)) {\r\n            delete props[key];\r\n            return;\r\n        }\r\n\r\n        const val = props[key];\r\n        if (typeof val === \"object\") {\r\n            props[key] = resolveProps(global, local, val, actions);\r\n        }\r\n    })\r\n    return props;\r\n}\r\n\r\n/**\r\n * output node.content, with check for $bind\r\n*/\r\nconst renderContent = (global: any, local: any, content: any) => {\r\n    if (typeof content === \"object\") {\r\n        return get(global, local, content.$bind);\r\n    } else {\r\n        return content;\r\n    }\r\n}\r\n\r\nexport interface RendererProps {\r\n    id: string;\r\n    componentMap: ComponentMap;\r\n    childrenMap: ChildrenMap;\r\n    allowedComponents: Record<string, ComponentType<any> | string>;\r\n    global: any;\r\n    local: any;\r\n    actions: Record<string, ContextfulAction>;\r\n}\r\n\r\n/**\r\n * Renders a UISchema recursively, in accordance to the spec.\r\n */\r\nexport function Renderer(props: RendererProps) {\r\n    const {\r\n        id, componentMap, childrenMap, global, local, allowedComponents, actions\r\n    } = props;\r\n    const element = componentMap[id];\r\n\r\n    if (element.type === \"TEXT\") return <>{renderContent(global, local, element.content)}</>\r\n\r\n    const sourceArrPath = element.props?.source;\r\n    if (element.type === '__ForEach__' && sourceArrPath) {\r\n        const sourceArr = get(global, local, sourceArrPath)\r\n        if (!Array.isArray(sourceArr)) return null;\r\n\r\n        const childrenArr = childrenMap[element.id];\r\n        return <>{childrenArr?.map((childId: string, index: number) => <Fragment key={index}>\r\n            {sourceArr.map((item: any, index1: number) => <Renderer {...props} id={childId} local={item} key={index1} />)}\r\n        </Fragment>)}</>\r\n    }\r\n\r\n    const Component = allowedComponents[element.type] || element.type;\r\n    const componentProps = resolveProps(global, local, element.props, actions);\r\n\r\n    const contentNode = renderContent(global, local, element.content);\r\n    const childNodes = childrenMap[element.id]?.map((childId: string, index: number) => {\r\n        return <Renderer\r\n            key={index}\r\n            {...props}\r\n            id={childId}\r\n        />\r\n    }) || []\r\n\r\n    const nodesToRender = [contentNode, ...childNodes].filter(node => node !== null && node !== undefined) // 0 is falsy\r\n\r\n    if (nodesToRender.length > 0) {\r\n        return <Component {...componentProps}>\r\n            {nodesToRender}\r\n        </Component>\r\n    }\r\n\r\n    return <Component {...componentProps} />\r\n}\r\n","import { SchemaNode, UISchema } from \"./types\";\r\n\r\n/**\r\n * Utility class for parsing UISchema from stream.\r\n */\r\nexport class ResponseParser {\r\n    buffer = \"\"; // unflushed existing deltas w/o newline\r\n    \r\n    // schema assembled thus far\r\n    schema: UISchema = {\r\n        childrenMap: {},\r\n        componentMap: {},\r\n        root: null\r\n    }\r\n\r\n    /**\r\n     * Update schema with latest data chunk.\r\n     * \r\n     * Handles multiline input gracefully; can be used to load entire schemas from cache.\r\n     * \r\n     * @param delta delta from stream.\r\n     * @returns true if update is warranted, false otherwise.\r\n     */\r\n    addDelta(delta: string) {\r\n        this.buffer += delta;\r\n        const split = this.buffer.split(\"\\n\")\r\n        if (split.length > 1) {\r\n            split.slice(0, split.length - 1).forEach((line) => this.handleLine(line));\r\n            this.buffer = split[split.length - 1];\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * Parses a single line (full JSON object) and updates schema.\r\n     * Generally should not be used when streaming data.\r\n     */\r\n    handleLine(line: string) {\r\n        try {\r\n            const node: SchemaNode = JSON.parse(line);\r\n\r\n            const { childrenMap, componentMap } = this.schema;\r\n\r\n            componentMap[node.id] = node;\r\n            if (node.parentId === null) {\r\n                this.schema.root = node;\r\n            } else {\r\n                if (!childrenMap[node.parentId]) childrenMap[node.parentId] = []\r\n                childrenMap[node.parentId].push(node.id)\r\n            }\r\n        } catch (err) { /* probably markdown or generation inconsistency */ }\r\n    }\r\n\r\n    /**\r\n     * Clears the buffer and handles any remaining information within.\r\n     */\r\n    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}"],"mappings":"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","names":["readStreamableValue","useEffect","useReducer","useRef","Fragment","jsx","createElement","resolvePath","obj","path","acc","curr","get","global","local","blacklistedProps","resolveProps","props","actions","action","resolvedArgs","arg","e","resolved","key","val","renderContent","content","Renderer","_a","_b","id","componentMap","childrenMap","allowedComponents","element","sourceArrPath","sourceArr","childrenArr","childId","index","item","index1","Component","componentProps","contentNode","childNodes","nodesToRender","node","ResponseParser","delta","split","line","node","childrenMap","componentMap","Fragment","jsx","GeneratedClient","value","allowedComponents","inputStream","placeholder","actions","_a","forceUpdate","useReducer","x","parser","useRef","useEffect","ResponseParser","delta","readStreamableValue","schema","Renderer"]}
+{"version":3,"sources":["../src/client/GeneratedClient.tsx","../src/ResponseParser.ts","../src/client/Renderer.tsx","../src/client/SyntuxContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { StreamableValue, readStreamableValue } from '@ai-sdk/rsc';\r\nimport React, { JSX, useEffect, useMemo, useReducer, useRef, useState } from 'react';\r\nimport { AnimateOptions } from 'src/types';\r\nimport { ResponseParser } from '../ResponseParser';\r\nimport { Renderer } from './Renderer';\r\nimport { SyntuxContext } from './SyntuxContext';\r\n\r\n/**\r\n * Client wrapper for Renderer that handles streaming and parsing with server.\r\n */\r\nexport function GeneratedClient({\r\n  value,\r\n  allowedComponents,\r\n  inputStream,\r\n  placeholder,\r\n  errorFallback,\r\n  animate\r\n}: {\r\n  value: any,\r\n  allowedComponents: Record<string, React.ComponentType<any> | string>,\r\n  inputStream: StreamableValue<string>,\r\n  placeholder?: JSX.Element,\r\n  errorFallback?: JSX.Element,\r\n  animate?: AnimateOptions\r\n}) {\r\n  const [statefulValue, setStatefulValue] = useState(value); // stateful because changeable through context\r\n  const [, forceUpdate] = useReducer(x => x + 1, 0);\r\n  const parser = useRef<ResponseParser | null>(null);\r\n  const [errored, setErrored] = useState(false)\r\n\r\n  useEffect(() => {\r\n    // forcibly create a new one for HMR\r\n    parser.current = new ResponseParser();\r\n\r\n    const parseStream = async () => {\r\n      for await (const delta of readStreamableValue(inputStream)) {\r\n        if (parser.current && delta !== undefined) {\r\n          if (parser.current.addDelta(delta)) {\r\n            forceUpdate();\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    parseStream().then(() => {\r\n      parser.current.finish();\r\n      forceUpdate();\r\n    }).catch(() => {\r\n      setErrored(true)\r\n    });\r\n  }, [inputStream]);\r\n\r\n  const schema = parser?.current?.schema;\r\n\r\n  const providerValue = useMemo(() => ({ value: statefulValue, setValue: setStatefulValue }), [statefulValue]);\r\n\r\n  const renderContent = () => {\r\n    if(errored && errorFallback) return <>{errorFallback}</>\r\n\r\n    if(schema?.root){\r\n      return <Renderer id={schema.root.id} componentMap={schema.componentMap} childrenMap={schema.childrenMap} allowedComponents={allowedComponents} global={statefulValue} local={statefulValue} /> \r\n    } else {\r\n      return <>{placeholder}</>\r\n    }\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <SyntuxContext.Provider value={providerValue}>\r\n        {renderContent()}\r\n      </SyntuxContext.Provider >\r\n    </>\r\n  )\r\n}\r\n","import { SchemaNode, UISchema } from \"./types\";\r\n\r\n/**\r\n * Utility class for parsing UISchema from stream.\r\n */\r\nexport class ResponseParser {\r\n    buffer = \"\"; // unflushed existing deltas w/o newline\r\n    \r\n    // schema assembled thus far\r\n    schema: UISchema = {\r\n        childrenMap: {},\r\n        componentMap: {},\r\n        root: null\r\n    }\r\n\r\n    /**\r\n     * Update schema with latest data chunk.\r\n     * \r\n     * Handles multiline input gracefully; can be used to load entire schemas from cache.\r\n     * \r\n     * @param delta delta from stream.\r\n     * @returns true if update is warranted, false otherwise.\r\n     */\r\n    addDelta(delta: string) {\r\n        this.buffer += delta;\r\n        const split = this.buffer.split(\"\\n\")\r\n        if (split.length > 1) {\r\n            split.slice(0, split.length - 1).forEach((line) => this.handleLine(line));\r\n            this.buffer = split[split.length - 1];\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * Parses a single line (full JSON object) and updates schema.\r\n     * Generally should not be used when streaming data.\r\n     */\r\n    handleLine(line: string) {\r\n        try {\r\n            const node: SchemaNode = JSON.parse(line);\r\n\r\n            const { childrenMap, componentMap } = this.schema;\r\n\r\n            componentMap[node.id] = node;\r\n            if (node.parentId === null) {\r\n                this.schema.root = node;\r\n            } else {\r\n                if (!childrenMap[node.parentId]) childrenMap[node.parentId] = []\r\n                childrenMap[node.parentId].push(node.id)\r\n            }\r\n        } catch (err) { /* probably markdown or generation inconsistency */ }\r\n    }\r\n\r\n    /**\r\n     * Clears the buffer and handles any remaining information within.\r\n     */\r\n    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}","\"use client\";\r\n\r\nimport { ComponentType, Fragment, useEffect, useState } from 'react';\r\nimport { AnimateOptions, ChildrenMap, ComponentMap } from '../types';\r\n\r\n/**\r\n * lightweight implementation of lodash.get\r\n */\r\nconst resolvePath = (obj: any, path: string) => {\r\n    if (path === '$') return obj;\r\n    return path.split('.').reduce((acc, curr) => acc?.[curr], obj)\r\n}\r\n\r\n/**\r\n * parses binding protocol and performs property lookup w/ scope resolution\r\n */\r\nconst get = (global: any, local: any, path: string) => {\r\n    if (path.startsWith(\"$item.\")) {\r\n        path = path.slice(6)\r\n        return resolvePath(local, path);\r\n    } else {\r\n        if (path === \"$item\") return local;\r\n        return resolvePath(global, path);\r\n    }\r\n}\r\n\r\n\r\nconst blacklistedProps = new Set([\"dangerouslySetInnerHTML\"])\r\n/**\r\n * recursively parses props for bindings, replacing with true values\r\n */\r\nconst resolveProps = (global: any, local: any, props: any) => {\r\n    if (!props) return props;\r\n\r\n    if (\"$bind\" in props) { // $bind may be falsy value\r\n        const resolved = get(global, local, props.$bind);\r\n        Object.keys(resolved).forEach((key) => {\r\n            if (blacklistedProps.has(key)) {\r\n                delete resolved[key];\r\n            }\r\n        })\r\n        return resolved;\r\n    }\r\n\r\n    Object.keys(props).forEach((key) => {\r\n        if (blacklistedProps.has(key)) {\r\n            delete props[key];\r\n            return;\r\n        }\r\n\r\n        const val = props[key];\r\n        if (typeof val === \"object\") {\r\n            props[key] = resolveProps(global, local, val);\r\n        }\r\n    })\r\n    return props;\r\n}\r\n\r\n/**\r\n * output node.content, with check for $bind\r\n*/\r\nconst renderContent = (global: any, local: any, content: any) => {\r\n    if (typeof content === \"object\") {\r\n        return get(global, local, content.$bind);\r\n    } else {\r\n        return content;\r\n    }\r\n}\r\n\r\nexport interface RendererProps {\r\n    id: string;\r\n    componentMap: ComponentMap;\r\n    childrenMap: ChildrenMap;\r\n    allowedComponents: Record<string, ComponentType<any> | string>;\r\n    global: any;\r\n    local: any;\r\n    animate?: AnimateOptions;\r\n}\r\n\r\n/**\r\n * Renders a UISchema recursively, in accordance to the spec.\r\n */\r\nexport function Renderer(props: RendererProps) {\r\n    const [isVisible, setIsVisible] = useState(false);\r\n\r\n    useEffect(() => {\r\n        const frame = requestAnimationFrame(() => setIsVisible(true));\r\n        return () => cancelAnimationFrame(frame)\r\n    }, [])\r\n\r\n    const {\r\n        id, componentMap, childrenMap, global, local, allowedComponents, animate\r\n    } = props;\r\n    const element = componentMap[id];\r\n\r\n    if (element.type === \"TEXT\") return <>{renderContent(global, local, element.content)}</>\r\n\r\n    const sourceArrPath = element.props?.source;\r\n    if (element.type === '__ForEach__' && sourceArrPath) {\r\n        const sourceArr = get(global, local, sourceArrPath)\r\n        if (!Array.isArray(sourceArr)) return null;\r\n\r\n        const childrenArr = childrenMap[element.id];\r\n        return <>{childrenArr?.map((childId: string, index: number) => <Fragment key={index}>\r\n            {sourceArr.map((item: any, index1: number) => <Renderer {...props} id={childId} local={item} key={index1} />)}\r\n        </Fragment>)}</>\r\n    }\r\n\r\n    const Component = allowedComponents[element.type] || element.type;\r\n    const componentProps = resolveProps(global, local, element.props);\r\n\r\n    const animatedProps = {...componentProps}\r\n    animatedProps.style = {...(animatedProps.style) || {}}\r\n\r\n    const initialOpacity = animatedProps.style?.opacity ?? 1;\r\n    animatedProps.style.opacity = isVisible ? initialOpacity : 0;\r\n    animatedProps.style.transform = isVisible ? 'translateY(0)' : `translateY(${animate?.offset ?? 10}px)`;\r\n    animatedProps.style.transition = `opacity ${animate?.duration ?? 200}ms ease-out, transform ${animate?.duration ?? 200}ms ease-out`;\r\n    animatedProps.style.willChange = 'opacity, transform';\r\n\r\n    const contentNode = renderContent(global, local, element.content);\r\n    const childNodes = childrenMap[element.id]?.map((childId: string, index: number) => {\r\n        return <Renderer\r\n            key={index}\r\n            {...props}\r\n            id={childId}\r\n        />\r\n    }) || []\r\n\r\n    const nodesToRender = [contentNode, ...childNodes].filter(node => node !== null && node !== undefined) // 0 is falsy\r\n\r\n    if (nodesToRender.length > 0) {\r\n        return <Component {...animatedProps}>\r\n            {nodesToRender}\r\n        </Component>\r\n    }\r\n\r\n    return <Component {...animatedProps}/>\r\n}\r\n","import { createContext, useContext } from \"react\";\r\n\r\nexport type SyntuxContextType = {\r\n    value: any,\r\n    setValue: (arg0: any) => void\r\n}\r\n\r\nexport const SyntuxContext = createContext<SyntuxContextType | null>(null)\r\n\r\nexport function useSyntux(){\r\n    const context = useContext(SyntuxContext);\r\n    if(!context) throw new Error(\"useSyntux must be used inside a GeneratedUI.\");\r\n    return context;\r\n}"],"mappings":"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","names":["readStreamableValue","useEffect","useMemo","useReducer","useRef","useState","ResponseParser","delta","split","line","node","childrenMap","componentMap","Fragment","useEffect","useState","jsx","createElement","resolvePath","obj","path","acc","curr","get","global","local","blacklistedProps","resolveProps","props","resolved","key","val","renderContent","content","Renderer","_a","_b","_c","isVisible","setIsVisible","frame","id","componentMap","childrenMap","allowedComponents","animate","element","sourceArrPath","sourceArr","childrenArr","childId","index","item","index1","Component","animatedProps","initialOpacity","contentNode","childNodes","nodesToRender","node","createContext","useContext","SyntuxContext","useSyntux","context","Fragment","jsx","GeneratedClient","value","allowedComponents","inputStream","placeholder","errorFallback","animate","_a","statefulValue","setStatefulValue","useState","forceUpdate","useReducer","x","parser","useRef","errored","setErrored","useEffect","ResponseParser","delta","readStreamableValue","schema","providerValue","useMemo","renderContent","Renderer","SyntuxContext"]}

package/dist/index.d.mts

@@ -1,20 +1,22 @@
-import { S as SyntuxComponent$1, C as ContextfulAction$1, U as UISchema } from './types-CtXPasY-.mjs';
-export { c as ChildrenMap, b as ComponentMap, a as SchemaNode } from './types-CtXPasY-.mjs';
+import { S as SyntuxComponent$1, U as UISchema } from './types-C9N85B_g.mjs';
+export { A as AnimateOptions, C as ChildrenMap, a as ComponentMap, b as SchemaNode } from './types-C9N85B_g.mjs';
 import * as react from 'react';
 import { JSX } from 'react';
 import { LanguageModel } from 'ai';
-import { SyntuxComponent, ContextfulAction } from 'getsyntux';
+import { SyntuxComponent, AnimateOptions } from 'getsyntux';
 
 interface GeneratedContentProps {
     value: any;
     model: LanguageModel;
     components?: (SyntuxComponent | string)[];
-    actions?: Record<string, ContextfulAction>;
     hint?: string;
     placeholder?: JSX.Element;
     cached?: string;
     onGenerate?: (arg0: string) => void;
     skeletonize?: boolean;
+    onError?: (arg0: any) => void;
+    errorFallback?: JSX.Element;
+    animate?: AnimateOptions;
 }
 
 /**
@@ -25,21 +27,14 @@ declare function generateComponentMap(allowedComponents: (SyntuxComponent$1 | st
 /**
  * Creates LLM input in accordance to the spec
  */
-declare function constructInput({ value, skeletonize, components, hint, actions }: GeneratedContentProps): string;
+declare function constructInput({ value, skeletonize, components, hint }: GeneratedContentProps): string;
 /**
  * generates a skeleton of the input value, ideal for large arrays or untrusted input.
  * see the FAQ for more information: https://github.com/puffinsoft/syntux/wiki/FAQ#handling-untrusted-input--large-arrays.
  *
  * *important*: assumes arrays are non-polymorphic
  */
-declare function create_skeleton(input: any): any;
-/**
- * attaches metadata to callback to allow LLM understanding
- * @param fn the action to be binded to an event on the UI
- * @param params the parameters the function accepts, in Typescript format (e.g., "id: number, name: string")
- * @param context a description of what the function does, for better LLM context
- */
-declare function defineTool(fn: Function, params?: string, context?: string): ContextfulAction$1;
+declare function createSkeleton(input: any): any;
 
 /**
  * Utility class for parsing UISchema from stream.
@@ -67,4 +62,4 @@ declare class ResponseParser {
     finish(): void;
 }
 
-export { ContextfulAction$1 as ContextfulAction, ResponseParser, SyntuxComponent$1 as SyntuxComponent, UISchema, constructInput, create_skeleton, defineTool, generateComponentMap };
+export { ResponseParser, SyntuxComponent$1 as SyntuxComponent, UISchema, constructInput, createSkeleton, generateComponentMap };

package/dist/index.mjs

@@ -1,13 +1,9 @@
-function x(e){return e.reduce((n,t)=>typeof t=="string"?(n[t]=t,n):(n[t.name]=t.component,n),{})}function m({value:e,skeletonize:n=!1,components:t,hint:o,actions:i}){let u=(t==null?void 0:t.map(r=>typeof r=="string"?r:r.name).join(","))||"",s=t==null?void 0:t.filter(r=>typeof r!="string"),c=(s==null?void 0:s.map(r=>r.context?`${r.name} [props: ${r.props}, details: ${r.context}]`:`${r.name} [props: ${r.props}]`).join(","))||"",h=o,l="";i&&(l=`
-`+Object.keys(i).map(r=>{let f=i[r];return`- ${r}(${f.params}): ${f.context}`}).join(`
-`)+`
-`);let d=JSON.stringify(n?a(e):e);return`<AllowedComponents>${u}</AllowedComponents>
-<ComponentContext>${c}</ComponentContext>
-<UserContext>${h||""}</UserContext>
-<AvailableActions>${l}</AvailableActions>
-<IsSkeleton>${n.toString()}</IsSkeleton>
+function h(n){return n.reduce((t,e)=>typeof e=="string"?(t[e]=e,t):(t[e.name]=e.component,t),{})}function d({value:n,skeletonize:t=!1,components:e,hint:o}){let s=(e==null?void 0:e.map(r=>typeof r=="string"?r:r.name).join(","))||"",i=e==null?void 0:e.filter(r=>typeof r!="string"),a=(i==null?void 0:i.map(r=>r.context?`${r.name} [props: ${r.props}, details: ${r.context}]`:`${r.name} [props: ${r.props}]`).join(","))||"",l=o,u=JSON.stringify(t?f(n):n);return`<AllowedComponents>${s}</AllowedComponents>
+<ComponentContext>${a}</ComponentContext>
+<UserContext>${l||""}</UserContext>
+<IsSkeleton>${t.toString()}</IsSkeleton>
 <Value>
-${d}
-</Value>`}function a(e){return e===null?"null":typeof e!="object"?typeof e:Array.isArray(e)?e.length==0?"null":[a(e[0])]:Object.entries(e).reduce((n,[t,o])=>(n[t]=a(o),n),{})}function C(e,n,t){return{fn:e,params:n||"",context:t||"no context provided"}}var p=class{buffer="";schema={childrenMap:{},componentMap:{},root:null};addDelta(n){this.buffer+=n;let t=this.buffer.split(`
-`);return t.length>1?(t.slice(0,t.length-1).forEach(o=>this.handleLine(o)),this.buffer=t[t.length-1],!0):!1}handleLine(n){try{let t=JSON.parse(n),{childrenMap:o,componentMap:i}=this.schema;i[t.id]=t,t.parentId===null?this.schema.root=t:(o[t.parentId]||(o[t.parentId]=[]),o[t.parentId].push(t.id))}catch{}}finish(){this.handleLine(this.buffer),this.buffer=""}};export{p as ResponseParser,m as constructInput,a as create_skeleton,C as defineTool,x as generateComponentMap};
+${u}
+</Value>`}function f(n){return n===null?"null":typeof n!="object"?typeof n:Array.isArray(n)?n.length==0?"null":[f(n[0])]:Object.entries(n).reduce((t,[e,o])=>(t[e]=f(o),t),{})}var p=class{buffer="";schema={childrenMap:{},componentMap:{},root:null};addDelta(t){this.buffer+=t;let e=this.buffer.split(`
+`);return e.length>1?(e.slice(0,e.length-1).forEach(o=>this.handleLine(o)),this.buffer=e[e.length-1],!0):!1}handleLine(t){try{let e=JSON.parse(t),{childrenMap:o,componentMap:s}=this.schema;s[e.id]=e,e.parentId===null?this.schema.root=e:(o[e.parentId]||(o[e.parentId]=[]),o[e.parentId].push(e.id))}catch{}}finish(){this.handleLine(this.buffer),this.buffer=""}};export{p as ResponseParser,d as constructInput,f as createSkeleton,h as generateComponentMap};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/util.ts","../src/ResponseParser.ts"],"sourcesContent":["import { GeneratedContentProps } from \"./templates/GeneratedUI\";\r\nimport { ContextfulAction, SyntuxComponent } from \"./types\";\r\n\r\n/**\r\n * Converts a list of components into a dictionary for fast-retrieval\r\n * during rendering.\r\n */\r\nexport function generateComponentMap(allowedComponents: (SyntuxComponent | string)[]) {\r\n    return allowedComponents.reduce((acc: Record<string, React.ComponentType<any> | string>, curr: SyntuxComponent | string) => {\r\n        if (typeof curr === \"string\") {\r\n            acc[curr] = curr;\r\n            return acc;\r\n        }\r\n\r\n        acc[curr.name] = curr.component;\r\n        return acc;\r\n    }, {})\r\n}\r\n\r\n/**\r\n * Creates LLM input in accordance to the spec\r\n */\r\nexport function constructInput({\r\n    value, skeletonize = false, components, hint, actions\r\n}: GeneratedContentProps) {\r\n    const allowedComponents = components?.map((item: SyntuxComponent | string) => {\r\n        if (typeof item === \"string\") return item;\r\n        return item.name;\r\n    }).join(',') || \"\"\r\n\r\n    const customComponents = components?.filter((item): item is SyntuxComponent => typeof item !== \"string\");\r\n    const componentContext = customComponents?.map((item) => {\r\n        if (!item.context) {\r\n            return `${item.name} [props: ${item.props}]`\r\n        } else {\r\n            return `${item.name} [props: ${item.props}, details: ${item.context}]`\r\n        }\r\n    }).join(',') || \"\"\r\n\r\n    const userContext = hint;\r\n\r\n    let availableActions = \"\";\r\n    if(actions){\r\n        availableActions = \"\\n\" + Object.keys(actions).map((key: string) => {\r\n            const action: ContextfulAction = actions[key];\r\n            return `- ${key}(${action.params}): ${action.context}`\r\n        }).join('\\n') + \"\\n\"\r\n    }\r\n\r\n    const inputValue = JSON.stringify(skeletonize ? create_skeleton(value) : value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${userContext || \"\"}</UserContext>\\n<AvailableActions>${availableActions}</AvailableActions>\\n<IsSkeleton>${skeletonize.toString()}</IsSkeleton>\\n<Value>\\n${inputValue}\\n</Value>`\r\n}\r\n\r\n/**\r\n * generates a skeleton of the input value, ideal for large arrays or untrusted input.\r\n * see the FAQ for more information: https://github.com/puffinsoft/syntux/wiki/FAQ#handling-untrusted-input--large-arrays.\r\n * \r\n * *important*: assumes arrays are non-polymorphic\r\n */\r\nexport function create_skeleton(input: any) {\r\n    if (input === null) return \"null\";\r\n\r\n    if (typeof input !== \"object\") return typeof input;\r\n\r\n    if (Array.isArray(input)) {\r\n        if (input.length == 0) {\r\n            return \"null\"; // ignore this field completely\r\n        } else {\r\n            return [create_skeleton(input[0])]\r\n        }\r\n    }\r\n    return Object.entries(input).reduce((acc, [key, value]) => {\r\n        acc[key] = create_skeleton(value);\r\n        return acc;\r\n    }, {})\r\n}\r\n\r\n/**\r\n * attaches metadata to callback to allow LLM understanding\r\n * @param fn the action to be binded to an event on the UI\r\n * @param params the parameters the function accepts, in Typescript format (e.g., \"id: number, name: string\")\r\n * @param context a description of what the function does, for better LLM context\r\n */\r\nexport function defineTool(fn: Function, params?: string, context?: string): ContextfulAction {\r\n    return {\r\n        fn, \r\n        params: params || \"\",\r\n        context: context || \"no context provided\"\r\n    }\r\n}","import { SchemaNode, UISchema } from \"./types\";\r\n\r\n/**\r\n * Utility class for parsing UISchema from stream.\r\n */\r\nexport class ResponseParser {\r\n    buffer = \"\"; // unflushed existing deltas w/o newline\r\n    \r\n    // schema assembled thus far\r\n    schema: UISchema = {\r\n        childrenMap: {},\r\n        componentMap: {},\r\n        root: null\r\n    }\r\n\r\n    /**\r\n     * Update schema with latest data chunk.\r\n     * \r\n     * Handles multiline input gracefully; can be used to load entire schemas from cache.\r\n     * \r\n     * @param delta delta from stream.\r\n     * @returns true if update is warranted, false otherwise.\r\n     */\r\n    addDelta(delta: string) {\r\n        this.buffer += delta;\r\n        const split = this.buffer.split(\"\\n\")\r\n        if (split.length > 1) {\r\n            split.slice(0, split.length - 1).forEach((line) => this.handleLine(line));\r\n            this.buffer = split[split.length - 1];\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * Parses a single line (full JSON object) and updates schema.\r\n     * Generally should not be used when streaming data.\r\n     */\r\n    handleLine(line: string) {\r\n        try {\r\n            const node: SchemaNode = JSON.parse(line);\r\n\r\n            const { childrenMap, componentMap } = this.schema;\r\n\r\n            componentMap[node.id] = node;\r\n            if (node.parentId === null) {\r\n                this.schema.root = node;\r\n            } else {\r\n                if (!childrenMap[node.parentId]) childrenMap[node.parentId] = []\r\n                childrenMap[node.parentId].push(node.id)\r\n            }\r\n        } catch (err) { /* probably markdown or generation inconsistency */ }\r\n    }\r\n\r\n    /**\r\n     * Clears the buffer and handles any remaining information within.\r\n     */\r\n    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}"],"mappings":"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","names":["generateComponentMap","allowedComponents","acc","curr","constructInput","value","skeletonize","components","hint","actions","item","customComponents","componentContext","userContext","availableActions","key","action","inputValue","create_skeleton","input","defineTool","fn","params","context","ResponseParser","delta","split","line","node","childrenMap","componentMap"]}
+{"version":3,"sources":["../src/util.ts","../src/ResponseParser.ts"],"sourcesContent":["import { GeneratedContentProps } from \"./templates/GeneratedUI\";\r\nimport { SyntuxComponent } from \"./types\";\r\n\r\n/**\r\n * Converts a list of components into a dictionary for fast-retrieval\r\n * during rendering.\r\n */\r\nexport function generateComponentMap(allowedComponents: (SyntuxComponent | string)[]) {\r\n    return allowedComponents.reduce((acc: Record<string, React.ComponentType<any> | string>, curr: SyntuxComponent | string) => {\r\n        if (typeof curr === \"string\") {\r\n            acc[curr] = curr;\r\n            return acc;\r\n        }\r\n\r\n        acc[curr.name] = curr.component;\r\n        return acc;\r\n    }, {})\r\n}\r\n\r\n/**\r\n * Creates LLM input in accordance to the spec\r\n */\r\nexport function constructInput({\r\n    value, skeletonize = false, components, hint\r\n}: GeneratedContentProps) {\r\n    const allowedComponents = components?.map((item: SyntuxComponent | string) => {\r\n        if (typeof item === \"string\") return item;\r\n        return item.name;\r\n    }).join(',') || \"\"\r\n\r\n    const customComponents = components?.filter((item): item is SyntuxComponent => typeof item !== \"string\");\r\n    const componentContext = customComponents?.map((item) => {\r\n        if (!item.context) {\r\n            return `${item.name} [props: ${item.props}]`\r\n        } else {\r\n            return `${item.name} [props: ${item.props}, details: ${item.context}]`\r\n        }\r\n    }).join(',') || \"\"\r\n\r\n    const userContext = hint;\r\n\r\n    const inputValue = JSON.stringify(skeletonize ? createSkeleton(value) : value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${userContext || \"\"}</UserContext>\\n<IsSkeleton>${skeletonize.toString()}</IsSkeleton>\\n<Value>\\n${inputValue}\\n</Value>`\r\n}\r\n\r\n/**\r\n * generates a skeleton of the input value, ideal for large arrays or untrusted input.\r\n * see the FAQ for more information: https://github.com/puffinsoft/syntux/wiki/FAQ#handling-untrusted-input--large-arrays.\r\n * \r\n * *important*: assumes arrays are non-polymorphic\r\n */\r\nexport function createSkeleton(input: any) {\r\n    if (input === null) return \"null\";\r\n\r\n    if (typeof input !== \"object\") return typeof input;\r\n\r\n    if (Array.isArray(input)) {\r\n        if (input.length == 0) {\r\n            return \"null\"; // ignore this field completely\r\n        } else {\r\n            return [createSkeleton(input[0])]\r\n        }\r\n    }\r\n    return Object.entries(input).reduce((acc, [key, value]) => {\r\n        acc[key] = createSkeleton(value);\r\n        return acc;\r\n    }, {})\r\n}","import { SchemaNode, UISchema } from \"./types\";\r\n\r\n/**\r\n * Utility class for parsing UISchema from stream.\r\n */\r\nexport class ResponseParser {\r\n    buffer = \"\"; // unflushed existing deltas w/o newline\r\n    \r\n    // schema assembled thus far\r\n    schema: UISchema = {\r\n        childrenMap: {},\r\n        componentMap: {},\r\n        root: null\r\n    }\r\n\r\n    /**\r\n     * Update schema with latest data chunk.\r\n     * \r\n     * Handles multiline input gracefully; can be used to load entire schemas from cache.\r\n     * \r\n     * @param delta delta from stream.\r\n     * @returns true if update is warranted, false otherwise.\r\n     */\r\n    addDelta(delta: string) {\r\n        this.buffer += delta;\r\n        const split = this.buffer.split(\"\\n\")\r\n        if (split.length > 1) {\r\n            split.slice(0, split.length - 1).forEach((line) => this.handleLine(line));\r\n            this.buffer = split[split.length - 1];\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * Parses a single line (full JSON object) and updates schema.\r\n     * Generally should not be used when streaming data.\r\n     */\r\n    handleLine(line: string) {\r\n        try {\r\n            const node: SchemaNode = JSON.parse(line);\r\n\r\n            const { childrenMap, componentMap } = this.schema;\r\n\r\n            componentMap[node.id] = node;\r\n            if (node.parentId === null) {\r\n                this.schema.root = node;\r\n            } else {\r\n                if (!childrenMap[node.parentId]) childrenMap[node.parentId] = []\r\n                childrenMap[node.parentId].push(node.id)\r\n            }\r\n        } catch (err) { /* probably markdown or generation inconsistency */ }\r\n    }\r\n\r\n    /**\r\n     * Clears the buffer and handles any remaining information within.\r\n     */\r\n    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}"],"mappings":"AAOO,SAASA,EAAqBC,EAAiD,CAClF,OAAOA,EAAkB,OAAO,CAACC,EAAwDC,IACjF,OAAOA,GAAS,UAChBD,EAAIC,CAAI,EAAIA,EACLD,IAGXA,EAAIC,EAAK,IAAI,EAAIA,EAAK,UACfD,GACR,CAAC,CAAC,CACT,CAKO,SAASE,EAAe,CAC3B,MAAAC,EAAO,YAAAC,EAAc,GAAO,WAAAC,EAAY,KAAAC,CAC5C,EAA0B,CACtB,IAAMP,GAAoBM,GAAA,YAAAA,EAAY,IAAKE,GACnC,OAAOA,GAAS,SAAiBA,EAC9BA,EAAK,MACb,KAAK,OAAQ,GAEVC,EAAmBH,GAAA,YAAAA,EAAY,OAAQE,GAAkC,OAAOA,GAAS,UACzFE,GAAmBD,GAAA,YAAAA,EAAkB,IAAKD,GACvCA,EAAK,QAGC,GAAGA,EAAK,IAAI,YAAYA,EAAK,KAAK,cAAcA,EAAK,OAAO,IAF5D,GAAGA,EAAK,IAAI,YAAYA,EAAK,KAAK,KAI9C,KAAK,OAAQ,GAEVG,EAAcJ,EAEdK,EAAa,KAAK,UAAUP,EAAcQ,EAAeT,CAAK,EAAIA,CAAK,EAE7E,MAAO,sBAAsBJ,CAAiB;AAAA,oBAA2CU,CAAgB;AAAA,eAAqCC,GAAe,EAAE;AAAA,cAA+BN,EAAY,SAAS,CAAC;AAAA;AAAA,EAA2BO,CAAU;AAAA,SAC7P,CAQO,SAASC,EAAeC,EAAY,CACvC,OAAIA,IAAU,KAAa,OAEvB,OAAOA,GAAU,SAAiB,OAAOA,EAEzC,MAAM,QAAQA,CAAK,EACfA,EAAM,QAAU,EACT,OAEA,CAACD,EAAeC,EAAM,CAAC,CAAC,CAAC,EAGjC,OAAO,QAAQA,CAAK,EAAE,OAAO,CAACb,EAAK,CAACc,EAAKX,CAAK,KACjDH,EAAIc,CAAG,EAAIF,EAAeT,CAAK,EACxBH,GACR,CAAC,CAAC,CACT,CC/DO,IAAMe,EAAN,KAAqB,CACxB,OAAS,GAGT,OAAmB,CACf,YAAa,CAAC,EACd,aAAc,CAAC,EACf,KAAM,IACV,EAUA,SAASC,EAAe,CACpB,KAAK,QAAUA,EACf,IAAMC,EAAQ,KAAK,OAAO,MAAM;AAAA,CAAI,EACpC,OAAIA,EAAM,OAAS,GACfA,EAAM,MAAM,EAAGA,EAAM,OAAS,CAAC,EAAE,QAASC,GAAS,KAAK,WAAWA,CAAI,CAAC,EACxE,KAAK,OAASD,EAAMA,EAAM,OAAS,CAAC,EAC7B,IAEJ,EACX,CAMA,WAAWC,EAAc,CACrB,GAAI,CACA,IAAMC,EAAmB,KAAK,MAAMD,CAAI,EAElC,CAAE,YAAAE,EAAa,aAAAC,CAAa,EAAI,KAAK,OAE3CA,EAAaF,EAAK,EAAE,EAAIA,EACpBA,EAAK,WAAa,KAClB,KAAK,OAAO,KAAOA,GAEdC,EAAYD,EAAK,QAAQ,IAAGC,EAAYD,EAAK,QAAQ,EAAI,CAAC,GAC/DC,EAAYD,EAAK,QAAQ,EAAE,KAAKA,EAAK,EAAE,EAE/C,MAAc,CAAsD,CACxE,CAKA,QAAQ,CACJ,KAAK,WAAW,KAAK,MAAM,EAC3B,KAAK,OAAS,EAClB,CACJ","names":["generateComponentMap","allowedComponents","acc","curr","constructInput","value","skeletonize","components","hint","item","customComponents","componentContext","userContext","inputValue","createSkeleton","input","key","ResponseParser","delta","split","line","node","childrenMap","componentMap"]}

package/dist/metafile-esm.json

@@ -1 +1 @@
-{"inputs":{"src/types.ts":{"bytes":683,"imports":[],"format":"esm"},"src/util.ts":{"bytes":3487,"imports":[{"path":"./templates/GeneratedUI","kind":"import-statement","external":true},{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/ResponseParser.ts":{"bytes":1865,"imports":[{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":84,"imports":[{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util.ts","kind":"import-statement","original":"./util"},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"./ResponseParser"}],"format":"esm"},"src/client/Renderer.tsx":{"bytes":4350,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"../types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/client/GeneratedClient.tsx":{"bytes":1681,"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./Renderer"},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"../ResponseParser"},{"path":"src/types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/client.ts":{"bytes":92,"imports":[{"path":"src/client/GeneratedClient.tsx","kind":"import-statement","original":"./client/GeneratedClient"},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./client/Renderer"}],"format":"esm"},"src/bin/cli_util.mjs":{"bytes":115,"imports":[{"path":"chalk","kind":"import-statement","external":true}],"format":"esm"},"src/bin/commands/init.mjs":{"bytes":3700,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"child_process","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"src/bin/cli_util.mjs","kind":"import-statement","original":"../cli_util.mjs"},{"path":"url","kind":"import-statement","external":true}],"format":"esm"},"src/bin/commands/generate.mjs":{"bytes":2933,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"react-docgen-typescript","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"src/bin/cli_util.mjs","kind":"import-statement","original":"../cli_util.mjs"}],"format":"esm"},"src/bin/cli.mjs":{"bytes":482,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"src/bin/commands/init.mjs","kind":"import-statement","original":"./commands/init.mjs"},{"path":"src/bin/commands/generate.mjs","kind":"import-statement","original":"./commands/generate.mjs"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8268},"dist/index.mjs":{"imports":[],"exports":["ResponseParser","constructInput","create_skeleton","defineTool","generateComponentMap"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/util.ts":{"bytesInOutput":1050},"src/ResponseParser.ts":{"bytesInOutput":485}},"bytes":1647},"dist/client.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":13364},"dist/client.mjs":{"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["GeneratedClient","Renderer"],"entryPoint":"src/client.ts","inputs":{"src/client/GeneratedClient.tsx":{"bytesInOutput":675},"src/client/Renderer.tsx":{"bytesInOutput":1393},"src/ResponseParser.ts":{"bytesInOutput":485},"src/client.ts":{"bytesInOutput":0}},"bytes":2611},"dist/bin/cli.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12417},"dist/bin/cli.mjs":{"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"commander","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"child_process","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"url","kind":"import-statement","external":true},{"path":"commander","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"react-docgen-typescript","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true}],"exports":[],"entryPoint":"src/bin/cli.mjs","inputs":{"src/bin/cli.mjs":{"bytesInOutput":250},"src/bin/commands/init.mjs":{"bytesInOutput":1851},"src/bin/cli_util.mjs":{"bytesInOutput":78},"src/bin/commands/generate.mjs":{"bytesInOutput":1443}},"bytes":3643}}}
+{"inputs":{"src/types.ts":{"bytes":692,"imports":[],"format":"esm"},"src/util.ts":{"bytes":2558,"imports":[{"path":"./templates/GeneratedUI","kind":"import-statement","external":true},{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/ResponseParser.ts":{"bytes":1865,"imports":[{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":84,"imports":[{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util.ts","kind":"import-statement","original":"./util"},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"./ResponseParser"}],"format":"esm"},"src/client/Renderer.tsx":{"bytes":4570,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"../types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/client/SyntuxContext.tsx":{"bytes":407,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/client/GeneratedClient.tsx":{"bytes":2329,"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/types","kind":"import-statement","external":true},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"../ResponseParser"},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./Renderer"},{"path":"src/client/SyntuxContext.tsx","kind":"import-statement","original":"./SyntuxContext"},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/client.ts":{"bytes":133,"imports":[{"path":"src/client/GeneratedClient.tsx","kind":"import-statement","original":"./client/GeneratedClient"},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./client/Renderer"},{"path":"src/client/SyntuxContext.tsx","kind":"import-statement","original":"./client/SyntuxContext"}],"format":"esm"},"src/bin/cli_util.mjs":{"bytes":115,"imports":[{"path":"chalk","kind":"import-statement","external":true}],"format":"esm"},"src/bin/commands/init.mjs":{"bytes":3700,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"child_process","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"src/bin/cli_util.mjs","kind":"import-statement","original":"../cli_util.mjs"},{"path":"url","kind":"import-statement","external":true}],"format":"esm"},"src/bin/commands/generate.mjs":{"bytes":2933,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"react-docgen-typescript","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"src/bin/cli_util.mjs","kind":"import-statement","original":"../cli_util.mjs"}],"format":"esm"},"src/bin/cli.mjs":{"bytes":482,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"src/bin/commands/init.mjs","kind":"import-statement","original":"./commands/init.mjs"},{"path":"src/bin/commands/generate.mjs","kind":"import-statement","original":"./commands/generate.mjs"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6851},"dist/index.mjs":{"imports":[],"exports":["ResponseParser","constructInput","createSkeleton","generateComponentMap"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/util.ts":{"bytesInOutput":809},"src/ResponseParser.ts":{"bytesInOutput":485}},"bytes":1389},"dist/client.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15781},"dist/client.mjs":{"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["GeneratedClient","Renderer","SyntuxContext","useSyntux"],"entryPoint":"src/client.ts","inputs":{"src/client/GeneratedClient.tsx":{"bytesInOutput":848},"src/ResponseParser.ts":{"bytesInOutput":485},"src/client/Renderer.tsx":{"bytesInOutput":1727},"src/client/SyntuxContext.tsx":{"bytesInOutput":172},"src/client.ts":{"bytesInOutput":0}},"bytes":3325},"dist/bin/cli.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12417},"dist/bin/cli.mjs":{"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"commander","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"child_process","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"url","kind":"import-statement","external":true},{"path":"commander","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"react-docgen-typescript","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true}],"exports":[],"entryPoint":"src/bin/cli.mjs","inputs":{"src/bin/cli.mjs":{"bytesInOutput":250},"src/bin/commands/init.mjs":{"bytesInOutput":1851},"src/bin/cli_util.mjs":{"bytesInOutput":78},"src/bin/commands/generate.mjs":{"bytesInOutput":1443}},"bytes":3643}}}

package/dist/templates/GeneratedUI.tsx

@@ -3,26 +3,29 @@ import { JSX } from 'react';
 import { createStreamableValue } from '@ai-sdk/rsc';
 import { LanguageModel, streamText } from 'ai';
 
+import { AnimateOptions, ResponseParser, SyntuxComponent, UISchema, constructInput, generateComponentMap } from "getsyntux";
 import { GeneratedClient, Renderer } from 'getsyntux/client';
-import { ContextfulAction, ResponseParser, SyntuxComponent, UISchema, constructInput, generateComponentMap } from "getsyntux";
 
 import spec from './spec';
 
 export interface GeneratedContentProps {
-    value: any;
-    model: LanguageModel;
-    components?: (SyntuxComponent | string)[];
-    actions?: Record<string, ContextfulAction>;
-    hint?: string;
-    placeholder?: JSX.Element;
-    cached?: string;
-    /*
-    * ^ this is a string for two reasons:
-    * - it is easier to store
-    * - it is parsed then mutated at runtime. This avoids unintended side effects.
-    */
-   onGenerate?: (arg0: string) => void;
-   skeletonize?: boolean;
+  value: any;
+  model: LanguageModel;
+  components?: (SyntuxComponent | string)[];
+  hint?: string;
+  placeholder?: JSX.Element;
+  cached?: string;
+  /*
+  * ^ this is a string for two reasons:
+  * - it is easier to store
+  * - it is parsed then mutated at runtime. This avoids unintended side effects.
+  */
+  onGenerate?: (arg0: string) => void;
+  skeletonize?: boolean;
+
+  onError?: (arg0: any) => void;
+  errorFallback?: JSX.Element;
+  animate?: AnimateOptions
 }
 
 /**
@@ -30,56 +33,71 @@ export interface GeneratedContentProps {
  * @param values The values (object, primitive, or array) to be displayed.
  * @param model The LanguageModel (as provided from AI SDK) to use. Must support streaming
  * @param components List of allowed components that LLM can use.
- * @param actions Map of callbacks that can be attached to events (e.g., onClick, onMouseOver) by LLM.
  * @param hint Additional custom instructions for the LLM.
  * @param placeholder A placeholder to show while awaiting streaming (NOT during streaming)
  * @param cached Schema returned from onGenerate, used for caching UI
  * @param onGenerate Callback which accepts a string, to be passed to `cached` to reuse same UI
  * @param skeletonize Compresses value for large inputs (arrays) or untrusted input
+ * @param onError Callback which accepts an error, invoked when necessary. If not provided, runtime error occurs.
+ * @param errorFallback An element fallback to show if an error occurs during generation.
 */
 export async function GeneratedUI(props: GeneratedContentProps) {
   const input = constructInput(props);
 
-  const { value, model, components, placeholder, cached, onGenerate, actions } = props;
-  
+  const { value, model, components, placeholder, cached, onGenerate, onError, errorFallback, animate } = props;
+
   const allowedComponents = generateComponentMap(components || []);
 
   // prerender if cached
-  if(cached){
+  if (cached) {
     const parser = new ResponseParser();
     parser.addDelta(cached);
     parser.finish();
 
     const schema: UISchema = parser.schema;
 
-    if(schema.root){
+    if (schema.root) {
       return <Renderer id={schema.root.id} componentMap={schema.componentMap} childrenMap={schema.childrenMap}
-        allowedComponents={allowedComponents} global={value} local={value} actions={actions || {}}/>
+        allowedComponents={allowedComponents} global={value} local={value} animate={animate} />
     } else {
       return <></>;
     }
   }
 
   const stream = createStreamableValue('');
-
   (async () => {
     let total = "";
+    let errored = false;
 
     const { textStream } = await streamText({
       model,
       system: spec,
-      prompt: input
+      prompt: input,
+      onError: (err) => {
+        stream.error(err)
+        errored = true;
+
+        if (!onError) {
+          if (!errorFallback) {
+            throw err;
+          }
+        } else {
+          onError(err)
+        }
+      }
     })
 
-    for await(const delta of textStream){
+    for await (const delta of textStream) {
       stream.update(delta);
       total += delta;
     }
 
-    stream.done();
+    if (!errored) {
+      stream.done();
+    }
 
-    if(onGenerate) onGenerate(total);
+    if (onGenerate) onGenerate(total);
   })()
 
-  return <GeneratedClient value={value} allowedComponents={allowedComponents} inputStream={stream.value} placeholder={placeholder} actions={actions} />
+  return <GeneratedClient value={value} allowedComponents={allowedComponents} inputStream={stream.value} placeholder={placeholder} errorFallback={errorFallback} animate={animate} />
 }

package/dist/templates/RerenderHandler.tsx

@@ -0,0 +1,8 @@
+/**
+ * Rerender Server Action!
+ * This is UNSECURED! Please modify it to perform authencation checks etc,.
+ */
+
+export async function rerenderAction(model: string, context: string, hint: string){
+
+}

package/dist/templates/spec.md

@@ -32,24 +32,6 @@ Use "$bind" in `content` or `props` to link data.
 Use "$bind": "$" to reference the global object itself, useful when the value itself is an array and you need to loop through it.
 </binding_rules>
 
-<action_rules>
-In the props, to attach event handlers (like onClick), use the "$action" schema.
-Format: { "$action": "actionName", "args": [arg1, arg2, ...] }
-
-Argument Rules:
-- Hardcoded value: Pass the literal value directly (e.g., "dark_mode", 15, true).
-- Dynamic value: Use a binding object (e.g., { "$bind": "$item.id" }).
-
-Example:
-"props": {
-  "onClick": { 
-    "$action": "addToCart", 
-    "args": [ { "$bind": "$item.id" }, 1 ] 
-  }
-}
-This calls the `addToCart` action with the item's ID and the number 1.
-</action_rules>
-
 <iteration>
 To render arrays, use the `__ForEach__` component.
 To define a loop:
@@ -68,13 +50,13 @@ In the example above, card_1 is the template that repeats for every author. It s
  * `AllowedComponents` is a comma-separated list, lowercase for Native HTML tags, Uppercase for Custom React Components. If none are provided, you can use any HTML tag. If they are, only use them to the best of your ability.
  * `ComponentContext` defines the Typescript interface for custom components. Components are separated by a comma, in the format `ComponentName [props: { ... }, details: "..."]`.  The `props` indicate what `props` it must accept, in Typescript format. The `details` is an optional field, and describes what the component does. DO NOT hallucinate props. Use the details to better your understanding of how to generate the UI.
 2. Parse Context: Read `UserContext` for specific design requests.
-3. Parse Actions: Read `AvailableActions`.
-   - This list contains functions you can attach to events (onClick, onHover, etc.).
-   - The format is `actionName(params): description`.
-   - ONLY use actions listed here. Do not invent function names.
-   - Pay close attention to the `params` signature to ensure you pass the correct data types in the `args` array.
-4. Parse Data: Analyze `Value` to determine structure.
-5. Check Skeleton: Read `IsSkeleton`. If it is `true`, that means all the property values have been replaced by the *type* of the value. If it is `false`, then you are seeing the raw values of each property.
+3. Parse Data: Analyze `Value` to determine structure.
+4. Check Skeleton: Read `IsSkeleton`. If it is `true`, that means all the property values have been replaced by the *type* of the value. If it is `false`, then you are seeing the raw values of each property.
+5. Check Existing: If `Existing` exists, then your job is to update the existing UI.
+ * Existing is the schema for the existing UI
+ * Read UserContext: it contains a request to update the UI
+ * Output the same, full UI, updated with the request. For instance, if UserContext says to remove something, generate the same UI, but with the thing removed.
+ * Ensure the new UI is semantically valid.
 </input_processing_rules>
 
 <output_formatting>
@@ -84,7 +66,6 @@ Input:
 <AllowedComponents>...</AllowedComponents>
 <ComponentContext>...</ComponentContext>
 <UserContext>...</UserContext>
-<AvailableActions>...</AvailableActions>
 <IsSkeleton>...</IsSkeleton>
 <Value>...</Value>
 

package/dist/templates/spec.ts

@@ -38,24 +38,6 @@ Use "$bind" in \`content\` or \`props\` to link data.
 Use "$bind": "$" to reference the global object itself, useful when the value itself is an array and you need to loop through it.
 </binding_rules>
 
-<action_rules>
-In the props, to attach event handlers (like onClick), use the "$action" schema.
-Format: { "$action": "actionName", "args": [arg1, arg2, ...] }
-
-Argument Rules:
-- Hardcoded value: Pass the literal value directly (e.g., "dark_mode", 15, true).
-- Dynamic value: Use a binding object (e.g., { "$bind": "$item.id" }).
-
-Example:
-"props": {
-  "onClick": { 
-    "$action": "addToCart", 
-    "args": [ { "$bind": "$item.id" }, 1 ] 
-  }
-}
-This calls the \`addToCart\` action with the item's ID and the number 1.
-</action_rules>
-
 <iteration>
 To render arrays, use the \`__ForEach__\` component.
 To define a loop:
@@ -74,13 +56,13 @@ In the example above, card_1 is the template that repeats for every author. It s
  * \`AllowedComponents\` is a comma-separated list, lowercase for Native HTML tags, Uppercase for Custom React Components. If none are provided, you can use any HTML tag. If they are, only use them to the best of your ability.
  * \`ComponentContext\` defines the Typescript interface for custom components. Components are separated by a comma, in the format \`ComponentName [props: { ... }, details: "..."]\`.  The \`props\` indicate what \`props\` it must accept, in Typescript format. The \`details\` is an optional field, and describes what the component does. DO NOT hallucinate props. Use the details to better your understanding of how to generate the UI.
 2. Parse Context: Read \`UserContext\` for specific design requests.
-3. Parse Actions: Read \`AvailableActions\`.
-   - This list contains functions you can attach to events (onClick, onHover, etc.).
-   - The format is \`actionName(params): description\`.
-   - ONLY use actions listed here. Do not invent function names.
-   - Pay close attention to the \`params\` signature to ensure you pass the correct data types in the \`args\` array.
-4. Parse Data: Analyze \`Value\` to determine structure.
-5. Check Skeleton: Read \`IsSkeleton\`. If it is \`true\`, that means all the property values have been replaced by the *type* of the value. If it is \`false\`, then you are seeing the raw values of each property.
+3. Parse Data: Analyze \`Value\` to determine structure.
+4. Check Skeleton: Read \`IsSkeleton\`. If it is \`true\`, that means all the property values have been replaced by the *type* of the value. If it is \`false\`, then you are seeing the raw values of each property.
+5. Check Existing: If \`Existing\` exists, then your job is to update the existing UI.
+ * Existing is the schema for the existing UI
+ * Read UserContext: it contains a request to update the UI
+ * Output the same, full UI, updated with the request. For instance, if UserContext says to remove something, generate the same UI, but with the thing removed.
+ * Ensure the new UI is semantically valid.
 </input_processing_rules>
 
 <output_formatting>
@@ -90,7 +72,6 @@ Input:
 <AllowedComponents>...</AllowedComponents>
 <ComponentContext>...</ComponentContext>
 <UserContext>...</UserContext>
-<AvailableActions>...</AvailableActions>
 <IsSkeleton>...</IsSkeleton>
 <Value>...</Value>
 

package/dist/{types-CtXPasY-.d.mts → types-C9N85B_g.d.mts}

@@ -20,10 +20,9 @@ type SyntuxComponent = {
     component: React.ComponentType<any>;
     context?: string;
 };
-type ContextfulAction = {
-    fn: Function;
-    params: string;
-    context: string;
+type AnimateOptions = {
+    offset: number;
+    duration: number;
 };
 
-export type { ContextfulAction as C, SyntuxComponent as S, UISchema as U, SchemaNode as a, ComponentMap as b, ChildrenMap as c };
+export type { AnimateOptions as A, ChildrenMap as C, SyntuxComponent as S, UISchema as U, ComponentMap as a, SchemaNode as b };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "getsyntux",
-  "version": "0.6.0",
-  "description": "The declarative generative-UI library.",
+  "version": "0.7.2",
+  "description": "Build generative UIs for the web.",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",