getsyntux 0.7.2 → 0.9.0-alpha

package/README.md

@@ -10,17 +10,16 @@ You give it a <code>value</code> and it designs the UI to display it.
 
 ---
 
-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.
+![](https://raw.githubusercontent.com/puffinsoft/syntux/HEAD/docs/images/features.png)
 
-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**. 
+https://github.com/user-attachments/assets/c85de55d-21f3-43ff-8bd3-d6ede2171447
 
 ### Features
 
 - ⚡ **Streamable** - display UI as you generate.
 - 🎨 **Custom Components** - use your own React components.
 - 💾 **Cacheable** - reuse generated UIs with new values.
+- 🔄 **Reactive** - update the UI programmatically.
 
 **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).
 
@@ -30,7 +29,7 @@ For instance, if you provide an array `value` with 10,000 items, it will cost yo
 
 ### API
 
-<i>syntux</i> is built for React and Next.js.
+<i>syntux</i> is built for React, supporting Next.js, React Router / Remix and Astro.
 
 One component is all you need:
 
@@ -42,52 +41,42 @@ const valueToDisplay = {
 }
 
 <GeneratedUI
-    model={anthropic('claude-sonnet-4-5')}
+    endpoint="/api/syntux"
     value={valueToDisplay}
     hint="UI should look like..."   
 />
 ```
 
-*syntux* takes the `value` into consideration and designs a UI to best display it. `value` can be anything; an object, array or primitive.
+*syntux* reads the `value` and designs the UI to best display it, taking the `hint` into consideration.
 
 > [!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://docs.getsyntux.com/advanced#skeletonize-property).
-
-### Installation
-
-In the root of your project:
-
-```
-$ npx getsyntux@latest
-```
-
-This will automatically install the required components in the `lib/getsyntux` folder.
-
-We use the [Vercel AI SDK](https://github.com/vercel/ai) to provide support for all LLM providers. To install the model providers:
-
-```
-$ npm i ai
-$ npm i @ai-sdk/anthropic (if you're using Claude)
-```
+> If you are passing in a **large array** as a value, use the `skeletonize` property. See [the explanation](https://docs.getsyntux.com/usage/advanced#skeletonize-property).
 
 ---
 
 ### Examples
 
+The following examples are meant to give you an idea of how *syntux* works.
+
+See [wiki: Installation](https://docs.getsyntux.com/installation) once you're ready to begin.
+
 #### Basic Example
 
 Generate a simple UI with a hint:
 
 ```jsx
-import { GeneratedUI } from "@/lib/getsyntux/GeneratedUI";
-import { createAnthropic } from "@ai-sdk/anthropic";
-
-/* this example uses Claude, but all models are supported! */
-const anthropic = createAnthropic({ apiKey: ... })
-
-export default function Home(){
-    const valueToDisplay = { ... };
-    return <GeneratedUI model={anthropic("claude-sonnet-4-5")} value={valueToDisplay} hint="UI should look like..." />
+import { GeneratedUI } from 'getsyntux/client';
+
+export default function Page() {
+  const value = { username: 'John', email: 'john@gmail.com', age: 22 };
+
+  return (
+    <GeneratedUI
+      endpoint="/api/syntux"
+      value={value}
+      hint="display as a profile card"
+    />
+  );
 }
 ```
 
@@ -96,13 +85,21 @@ export default function Home(){
 Cache generated UI based on a user ID:
 
 ```jsx
-const cache: Map<number, string> = new Map();
-export default function Home(){
-    const userID = 10;
-    const valueToDisplay = { ... };
-    return <GeneratedUI cached={cache.get(userID)} onGenerate={(result) => {
-        cache.set(userID, result)
-    }} model={anthropic("claude-sonnet-4-5")} value={valueToDisplay} />
+import { cache } from './api/syntux/route';
+
+export default function Page() {
+  const userId = 10;
+  const value = { username: 'John', email: 'john@gmail.com', age: 22 };
+
+  return (
+    <GeneratedUI
+      endpoint="/api/syntux"
+      value={value}
+      hint="UI should look like..."
+
+      cached={cache.get(userId)}
+    />
+  );
 }
 ```
 
@@ -111,14 +108,33 @@ export default function Home(){
 Use your own components, or someone else's (a library):
 
 ```jsx
-import { CustomOne, CustomTwo } from '@/my_components'
-export default function Home(){
-   const valueToDisplay = { ... };
-
-   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." }
-   ]} />
+import { GeneratedUI } from 'getsyntux/client';
+import { Card, Avatar } from '@/components/ui';
+
+export default function Page() {
+  const value = { username: 'John', email: 'john@gmail.com', avatar: '/john.png' };
+
+  return (
+    <GeneratedUI
+      endpoint="/api/syntux"
+      value={value}
+      hint="use custom components when possible"
+
+      components={[
+        {
+          name: 'Card',
+          props: '{ title: string, body: string }',
+          component: Card,
+        },
+        {
+          name: 'Avatar',
+          props: '{ src: string, alt: string }',
+          component: Avatar,
+          context: 'Displays a circular profile image.', /* optional */
+        },
+      ]}
+    />
+  );
 }
 ```
 
@@ -130,56 +146,75 @@ export default function Home(){
 
 Make sure components are marked with `"use client"`.
 
-#### Update value (interactivity)
+#### Reactivity
 
-Use the `useSyntux` hook to retrieve and update the `value` inside a custom component:
+To regenerate the UI dynamically, in response to user action, create a separate endpoint:
 
 ```jsx
-"use client";
+<GeneratedUI
+  endpoint="/api/syntux"
+  rerenderEndpoint="/api/syntux/rerender" /* <-- over here */
+
+  value={value}
+  hint="display as a profile card"
+/>
+```
 
-export default function CustomComponent(){
-    const { value, setValue } = useSyntux();
+Then use the `useSyntux` hook:
 
-    return <button onClick={() => {
-        const newArr = [...value];
-        newArr.push({ ... });
-        setValue(newArr);
-    }}>Add value</button>
+```jsx
+"use client";
+
+export default function CustomComponent() {
+  const { value, setValue } = useSyntux();
+
+  return (
+    <button
+      onClick={() => {
+        setValue(value, {
+            regenerate: true, // if false, treated as static
+            hint: "Change the style to be more..."
+        })
+      }}
+    >
+      Update UI!
+    </button>
+  );
 }
 ```
+<h3 align="center" margin="0"><a href="https://docs.getsyntux.com/">➡️ view documentation</a></h3>
+
 
 ---
 
 ### FAQ
 
-<details>
- <summary>How expensive is generation?</summary>
-
-*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>
  <summary>How does generation work? (Does it generate source code?)</summary>
 
-Generated UIs must be *secure*, *reusable* and *cacheable*.
+Generated interfaces must be *secure*, *reusable* and *cacheable*.
 
-As such, *syntux* does not generate source code. It generates a schema for the UI, known as a "React Interface Schema" (RIS). See the question below to get a better understanding.
+As such, syntux does not:
+- generate code (HTML/JSX), or...
+- hardcode the `value`
 
-This schema is tailored to the `value` that you provide. It is then hydrated by *syntux* and rendered.
+Instead, syntux generates a JSON-DSL representation of the UI, known as the React Interface Schema (RIS).
 
-![](https://raw.githubusercontent.com/puffinsoft/syntux/HEAD/docs/images/workflow.png)
-</details>
+The RIS **does not hardcode values**. It **binds** to properties of the `value` and has **built-in iterators**, making it reusable and token-efficient for arrays.
 
-<details>
- <summary>How does caching work?</summary>
+An example of the RIS:
 
- The generated UI is determined by the React Interface Schema (see the above question).
+```json
+{"id":"loop_1", "parentId":"root", "type":"__ForEach__", "props":{"source":"authors"}}
+{"id":"card_1", "parentId":"loop_1", "type":"div", "props":{"className":"card"}, "content": {"$bind": "$item.name"}}
+```
 
- Thus, if the same schema is provided, the same UI will be generated.
+</details>
 
- For simplicity, the schema is simply a string. It is up to you how you wish to store it; in memory, in a file, in a database etc,.
+<details>
+ <summary>How expensive is generation?</summary>
 
- Use the `onGenerate` and `cached` properties to retrieve/provide a cached schema respectively.
+*syntux* is highly optimized to save tokens. See [here](https://docs.getsyntux.com/usage/advanced#cost-estimation) for a cost estimation table and an explanation.
 </details>
 
 <details>

package/dist/GeneratedUI-DFOjlyg6.d.mts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { JSX } from 'react';
+
+type SchemaNode = {
+    id: string;
+    parentId: string | null;
+    type: string;
+    props?: Record<string, any>;
+    content?: any | {
+        "$bind": string;
+    };
+};
+type ComponentMap = Record<string, SchemaNode>;
+type ChildrenMap = Record<string, string[]>;
+type UISchema = {
+    componentMap: ComponentMap;
+    childrenMap: ChildrenMap;
+    root: SchemaNode | null;
+};
+/**
+ * for providing context on custom components
+ * used for AllowedComponents and ComponentContext
+ */
+type ComponentMetadata = {
+    name: string;
+    props: string;
+    context?: string;
+};
+type SyntuxComponent = ComponentMetadata & {
+    component: React.ComponentType<any>;
+};
+type AnimateOptions = {
+    offset: number;
+    duration: number;
+};
+/**
+ * setValue will not send a request if regenerate is false.
+ * however, the value will still be updated (statically).
+ * as opposed to a falsy options existence check, this is more robust for DX.
+ */
+type RerenderOptions = {
+    regenerate: boolean;
+    hint: string;
+};
+type RerenderContext = {
+    context: string;
+    endpoint?: string;
+};
+
+interface GeneratedUIProps {
+    value: any;
+    endpoint: string;
+    hint?: string;
+    components?: (SyntuxComponent | string)[];
+    placeholder?: JSX.Element;
+    cached?: string;
+    onGenerate?: (schema: string) => void;
+    skeletonize?: boolean;
+    errorFallback?: JSX.Element;
+    animate?: AnimateOptions;
+    rerenderEndpoint?: string;
+}
+/**
+ * Section of user interface for LLM to generate.
+ *
+ * Required:
+ * @param value The value (object, primitive, or array) to be displayed.
+ * @param endpoint The relative URL endpoint created with createSyntuxHandler.
+ *
+ * Optional:
+ * @param hint Custom instructions for the LLM.
+ * @param components List of allowed components that the LLM can use.
+ * @param placeholder Element to be displayed whilst awaiting streaming to begin.
+ * @param errorFallback Element to be displayed if an error occurs.
+ * @param animate  configuration for on-mount animation
+ * @param rerenderEndpoint The relative URL endpoint for regeneration.
+ *
+ * Caching:
+ * @param cached Pre-generated schema string (from onGenerate), skips API call.
+ * @param onGenerate Callback which accepts the generated schema, for reuse.
+ *
+ * Advanced:
+ * @param skeletonize compresses the value for large inputs (arrays) or untrusted input
+ */
+declare function GeneratedUI(props: GeneratedUIProps): react_jsx_runtime.JSX.Element;
+
+export { type AnimateOptions as A, type ComponentMetadata as C, type GeneratedUIProps as G, type RerenderContext as R, type SyntuxComponent as S, type UISchema as U, type ChildrenMap as a, type ComponentMap as b, type RerenderOptions as c, type SchemaNode as d, GeneratedUI as e };

package/dist/client.d.mts

@@ -1,19 +1,23 @@
+import { A as AnimateOptions, R as RerenderContext, b as ComponentMap, a as ChildrenMap, c as RerenderOptions } from './GeneratedUI-DFOjlyg6.mjs';
+export { e as GeneratedUI, G as GeneratedUIProps } from './GeneratedUI-DFOjlyg6.mjs';
 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 { 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.
+ * Internal client component that handles streaming, parsing, and rendering.
+ * For most use cases, use GeneratedUI instead.
  */
-declare function GeneratedClient({ value, allowedComponents, inputStream, placeholder, errorFallback, animate }: {
+declare function GeneratedClient({ value, allowedComponents, endpoint, fetchBody, placeholder, errorFallback, animate, onGenerate, rerender, }: {
     value: any;
     allowedComponents: Record<string, react__default.ComponentType<any> | string>;
-    inputStream: StreamableValue<string>;
+    endpoint: string;
+    fetchBody: object;
     placeholder?: JSX.Element;
     errorFallback?: JSX.Element;
     animate?: AnimateOptions;
+    onGenerate?: (schema: string) => void;
+    rerender: RerenderContext;
 }): react_jsx_runtime.JSX.Element;
 
 interface RendererProps {
@@ -32,7 +36,7 @@ declare function Renderer(props: RendererProps): react_jsx_runtime.JSX.Element;
 
 type SyntuxContextType = {
     value: any;
-    setValue: (arg0: any) => void;
+    setValue: (value: any, options?: RerenderOptions) => void;
 };
 declare const SyntuxContext: react.Context<SyntuxContextType>;
 declare function useSyntux(): SyntuxContextType;

package/dist/client.mjs

@@ -1,3 +1,11 @@
-"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};
+"use client";var S=class{buffer="";total="";schema={childrenMap:{},componentMap:{},root:null};addDelta(n){this.total+=n,this.buffer+=n;let e=this.buffer.split(`
+`);return e.length>1?(e.slice(0,e.length-1).forEach(r=>this.handleLine(r)),this.buffer=e[e.length-1],!0):!1}handleLine(n){try{let e=JSON.parse(n),{childrenMap:r,componentMap:a}=this.schema;a[e.id]=e,e.parentId===null?this.schema.root=e:(r[e.parentId]||(r[e.parentId]=[]),r[e.parentId].push(e.id))}catch{}}finish(){this.handleLine(this.buffer),this.buffer=""}};function j(t){return t.reduce((n,e)=>typeof e=="string"?(n[e]=e,n):(n[e.name]=e.component,n),{})}function K({value:t,skeletonize:n=!1,components:e,hint:r}){let a=(e==null?void 0:e.map(o=>typeof o=="string"?o:o.name).join(","))||"",m=e==null?void 0:e.filter(o=>typeof o!="string"),y=(m==null?void 0:m.map(o=>o.context?`${o.name} [props: ${o.props}, details: ${o.context}]`:`${o.name} [props: ${o.props}]`).join(","))||"",p=JSON.stringify(n?T(t):t);return`<AllowedComponents>${a}</AllowedComponents>
+<ComponentContext>${y}</ComponentContext>
+<UserContext>${r||""}</UserContext>
+<IsSkeleton>${n.toString()}</IsSkeleton>
+<Value>
+${p}
+</Value>`}function N(t){return K(t).split(`
+`).slice(0,2).join(`
+`)}function T(t){return t===null?"null":typeof t!="object"?typeof t:Array.isArray(t)?t.length==0?"null":[T(t[0])]:Object.entries(t).reduce((n,[e,r])=>(n[e]=T(r),n),{})}import{useCallback as oe,useEffect as ie,useMemo as ae,useReducer as se,useRef as le,useState as V}from"react";import{Fragment as Q,useEffect as Z,useState as ee}from"react";import{Fragment as _,jsx as M}from"react/jsx-runtime";import{createElement as te}from"react";var X=(t,n)=>n==="$"?t:n.split(".").reduce((e,r)=>e==null?void 0:e[r],t),U=(t,n,e)=>e.startsWith("$item.")?(e=e.slice(6),X(n,e)):e==="$item"?n:X(t,e),k=new Set(["dangerouslySetInnerHTML"]),D=t=>t.length>2&&t.startsWith("on")&&t[2]===t[2].toUpperCase(),B=(t,n,e)=>{if(!e)return e;if("$bind"in e){let r=U(t,n,e.$bind);return Object.keys(r).forEach(a=>{(k.has(a)||D(a)&&typeof r[a]!="function")&&delete r[a]}),r}return Object.keys(e).forEach(r=>{if(k.has(r)){delete e[r];return}let a=e[r];typeof a=="object"&&(e[r]=B(t,n,a),D(r)&&typeof e[r]!="function"&&delete e[r])}),e},L=(t,n,e)=>typeof e=="object"?U(t,n,e.$bind):e;function R(t){var I,P,v;let[n,e]=ee(!1);Z(()=>{let i=requestAnimationFrame(()=>e(!0));return()=>cancelAnimationFrame(i)},[]);let{id:r,componentMap:a,childrenMap:m,global:y,local:p,allowedComponents:o,animate:s}=t,l=a[r];if(l.type==="TEXT")return M(_,{children:L(y,p,l.content)});let C=(I=l.props)==null?void 0:I.source;if(l.type==="__ForEach__"&&C){let i=U(y,p,C);if(!Array.isArray(i))return null;let h=m[l.id];return M(_,{children:h==null?void 0:h.map((x,$)=>M(Q,{children:i.map((b,A)=>te(R,{...t,id:x,local:b,key:A}))},$))})}let d=o[l.type]||l.type,c={...B(y,p,l.props)};c.style={...c.style||{}};let g=((P=c.style)==null?void 0:P.opacity)??1;c.style.opacity=n?g:0,c.style.transform=n?"translateY(0)":`translateY(${(s==null?void 0:s.offset)??10}px)`,c.style.transition=`opacity ${(s==null?void 0:s.duration)??200}ms ease-out, transform ${(s==null?void 0:s.duration)??200}ms ease-out`,c.style.willChange="opacity, transform";let u=L(y,p,l.content),f=((v=m[l.id])==null?void 0:v.map((i,h)=>M(R,{...t,id:i},h)))||[],w=[u,...f].filter(i=>i!=null);return w.length>0?M(d,{...c,children:w}):M(d,{...c})}import{createContext as ne,useContext as re}from"react";var F=ne(null);function ge(){let t=re(F);if(!t)throw new Error("useSyntux must be used inside a GeneratedUI.");return t}import{Fragment as H,jsx as O}from"react/jsx-runtime";function z({value:t,allowedComponents:n,endpoint:e,fetchBody:r,placeholder:a,errorFallback:m,animate:y,onGenerate:p,rerender:o}){var v;let[s,l]=V(t),[,C]=se(i=>i+1,0),d=le(null),[E,c]=V(!1),[g,u]=V(()=>({url:e,body:r}));ie(()=>{let i=!0;return d.current=new S,c(!1),(async()=>{var x,$;try{let b=await fetch(g.url,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(g.body)});if(!b.ok||!b.body)throw new Error(`HTTP ${b.status}`);let A=b.body.getReader(),W=new TextDecoder;for(;;){let{done:Y,value:q}=await A.read();if(!i||Y)break;let J=W.decode(q);d.current&&J!==void 0&&d.current.addDelta(J)&&C()}i&&((x=d.current)==null||x.finish(),C(),p==null||p((($=d.current)==null?void 0:$.total)??""))}catch{i&&c(!0)}})(),()=>{i=!1}},[g]);let f=(v=d.current)==null?void 0:v.schema,w=oe((i,h)=>{var x;if(!h||!h.regenerate)l(i);else{if(!o.endpoint)throw new Error("No rerenderEndpoint provided. Pass rerenderEndpoint to <GeneratedUI>.");l(i),u({url:o.endpoint,body:{context:o.context,existing:((x=d.current)==null?void 0:x.total)??"",hint:h.hint}})}},[o.endpoint,o.context]),I=ae(()=>({value:s,setValue:w}),[s,w]),P=()=>E&&m?O(H,{children:m}):f!=null&&f.root?O(R,{id:f.root.id,componentMap:f.componentMap,childrenMap:f.childrenMap,allowedComponents:n,global:s,local:s,animate:y}):O(H,{children:a});return O(F.Provider,{value:I,children:P()})}import{Fragment as ce,jsx as G}from"react/jsx-runtime";function Te(t){let{endpoint:n,value:e,hint:r,components:a,skeletonize:m,placeholder:y,cached:p,onGenerate:o,errorFallback:s,animate:l,rerenderEndpoint:C}=t,d=j(a||[]);if(p){let u=new S;u.addDelta(p),u.finish();let f=u.schema;return f.root?G(R,{id:f.root.id,componentMap:f.componentMap,childrenMap:f.childrenMap,allowedComponents:d,global:e,local:e,animate:l}):G(ce,{})}let E=(a||[]).map(u=>typeof u=="string"?u:{name:u.name,props:u.props,context:u.context}),c={value:e,hint:r,components:E,skeletonize:m},g=N(t);return G(z,{value:e,allowedComponents:d,endpoint:n,fetchBody:c,placeholder:y,errorFallback:s,animate:l,onGenerate:o,rerender:{context:g,endpoint:C}})}export{z as GeneratedClient,Te as GeneratedUI,R as Renderer,F as SyntuxContext,ge as useSyntux};
 //# sourceMappingURL=client.mjs.map

package/dist/client.mjs.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/ResponseParser.ts","../src/util.ts","../src/client/GeneratedClient.tsx","../src/client/Renderer.tsx","../src/client/SyntuxContext.tsx","../src/client/GeneratedUI.tsx"],"sourcesContent":["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    total = \"\"; // accumulator\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.total += delta;\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}","import { GeneratedUIProps } from \"./client\";\r\nimport { ComponentMetadata, 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}: {\r\n    value: any;\r\n    components?: (ComponentMetadata | string)[];\r\n    hint?: string;\r\n    skeletonize?: boolean;\r\n}) {\r\n    const allowedComponents = components?.map((item: ComponentMetadata | 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 ComponentMetadata => 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 inputValue = JSON.stringify(skeletonize ? createSkeleton(value) : value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${hint || \"\"}</UserContext>\\n<IsSkeleton>${skeletonize.toString()}</IsSkeleton>\\n<Value>\\n${inputValue}\\n</Value>`\r\n}\r\n\r\n/**\r\n * Builds the AllowedComponents + ComponentContext header used as context for rerender requests.\r\n */\r\nexport function constructRerenderContext(props: GeneratedUIProps) {\r\n    return constructInput(props).split('\\n').slice(0, 2).join('\\n');\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}\r\n","\"use client\";\r\n\r\nimport React, { JSX, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';\r\nimport { AnimateOptions, RerenderContext, RerenderOptions } from '../types';\r\nimport { ResponseParser } from '../ResponseParser';\r\nimport { Renderer } from './Renderer';\r\nimport { SyntuxContext } from './SyntuxContext';\r\n\r\n// stateful, see below\r\ntype FetchConfig = {\r\n    url: string;\r\n    body: object;\r\n};\r\n\r\n/**\r\n * Internal client component that handles streaming, parsing, and rendering.\r\n * For most use cases, use GeneratedUI instead.\r\n */\r\nexport function GeneratedClient({\r\n    value,\r\n    allowedComponents,\r\n    endpoint,\r\n    fetchBody,\r\n    placeholder,\r\n    errorFallback,\r\n    animate,\r\n    onGenerate,\r\n    rerender,\r\n}: {\r\n    value: any;\r\n    allowedComponents: Record<string, React.ComponentType<any> | string>;\r\n    endpoint: string;\r\n    fetchBody: object;\r\n    placeholder?: JSX.Element;\r\n    errorFallback?: JSX.Element;\r\n    animate?: AnimateOptions;\r\n    onGenerate?: (schema: string) => void;\r\n    rerender: RerenderContext;\r\n}) {\r\n    const [statefulValue, setStatefulValue] = useState(value);\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    /**\r\n     * single source of truth for useEffect rerenders.\r\n     * body is intentionally vague, stringified very casually later.\r\n     */\r\n    const [fetchConfig, setFetchConfig] = useState<FetchConfig>(() => ({ url: endpoint, body: fetchBody }));\r\n\r\n    useEffect(() => {\r\n        /**\r\n        * flag to avoid conflicting streams from mutating UI.\r\n        */\r\n        let isActive = true;\r\n        parser.current = new ResponseParser();\r\n        setErrored(false);\r\n\r\n        const initiateStream = async () => {\r\n            try {\r\n                const response = await fetch(fetchConfig.url, {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application/json' },\r\n                    body: JSON.stringify(fetchConfig.body),\r\n                });\r\n\r\n                if (!response.ok || !response.body) throw new Error(`HTTP ${response.status}`);\r\n\r\n                const reader = response.body.getReader();\r\n                const decoder = new TextDecoder();\r\n\r\n                while (true) {\r\n                    const { done, value } = await reader.read();\r\n                    if (!isActive) break;\r\n                    if (done) break;\r\n\r\n                    const delta = decoder.decode(value);\r\n\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                if (isActive) {\r\n                    parser.current?.finish();\r\n                    forceUpdate();\r\n                    onGenerate?.(parser.current?.total ?? '');\r\n                }\r\n            } catch (err) {\r\n                if (isActive) setErrored(true);\r\n            }\r\n        };\r\n\r\n        initiateStream();\r\n        return () => { isActive = false; };\r\n    }, [fetchConfig]);\r\n\r\n    const schema = parser.current?.schema;\r\n\r\n    const modifyValue = useCallback((value: any, options?: RerenderOptions) => {\r\n        if (!options || !options.regenerate) {\r\n            setStatefulValue(value);\r\n        } else {\r\n            if (!rerender.endpoint) {\r\n                throw new Error(\"No rerenderEndpoint provided. Pass rerenderEndpoint to <GeneratedUI>.\");\r\n            }\r\n            setStatefulValue(value);\r\n            setFetchConfig({\r\n                url: rerender.endpoint,\r\n                body: {\r\n                    context: rerender.context,\r\n                    existing: parser.current?.total ?? '',\r\n                    hint: options.hint,\r\n                },\r\n            });\r\n        }\r\n    }, [rerender.endpoint, rerender.context]);\r\n\r\n    const providerValue = useMemo(() => ({\r\n        value: statefulValue,\r\n        setValue: modifyValue,\r\n    }), [statefulValue, modifyValue]);\r\n\r\n    const renderContent = () => {\r\n        if (errored && errorFallback) return <>{errorFallback}</>;\r\n        if (schema?.root) {\r\n            return <Renderer\r\n                id={schema.root.id}\r\n                componentMap={schema.componentMap}\r\n                childrenMap={schema.childrenMap}\r\n                allowedComponents={allowedComponents}\r\n                global={statefulValue}\r\n                local={statefulValue}\r\n                animate={animate}\r\n            />;\r\n        }\r\n        return <>{placeholder}</>;\r\n    };\r\n\r\n    return (\r\n        <SyntuxContext.Provider value={providerValue}>\r\n            {renderContent()}\r\n        </SyntuxContext.Provider>\r\n    );\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/**\r\n * LLM hallucinations sometimes cause erroneous event handler insertion.\r\n * light detection for camelCase and on[...]\r\n */\r\nconst isEventHandlerKey = (key: string) => key.length > 2 && key.startsWith('on') && key[2] === key[2].toUpperCase();\r\n\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) || (isEventHandlerKey(key) && typeof resolved[key] !== 'function')) {\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            if (isEventHandlerKey(key) && typeof props[key] !== 'function') {\r\n                delete props[key];\r\n            }\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\nimport { RerenderOptions } from \"src/types\";\r\n\r\nexport type SyntuxContextType = {\r\n    value: any,\r\n    setValue: (value: any, options?: RerenderOptions) => 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}","\"use client\";\n\nimport { JSX } from 'react';\nimport { ResponseParser } from '../ResponseParser';\nimport { AnimateOptions, ComponentMetadata, SyntuxComponent, UISchema } from '../types';\nimport { constructRerenderContext, generateComponentMap } from '../util';\nimport { GeneratedClient } from './GeneratedClient';\nimport { Renderer } from './Renderer';\n\nexport interface GeneratedUIProps {\n    value: any;\n    endpoint: string;\n    hint?: string;\n    components?: (SyntuxComponent | string)[];\n    placeholder?: JSX.Element;\n    cached?: string;\n    onGenerate?: (schema: string) => void;\n    skeletonize?: boolean;\n    errorFallback?: JSX.Element;\n    animate?: AnimateOptions;\n    rerenderEndpoint?: string;\n}\n\n/**\n * Section of user interface for LLM to generate.\n * \n * Required:\n * @param value The value (object, primitive, or array) to be displayed.\n * @param endpoint The relative URL endpoint created with createSyntuxHandler.\n * \n * Optional:\n * @param hint Custom instructions for the LLM.\n * @param components List of allowed components that the LLM can use.\n * @param placeholder Element to be displayed whilst awaiting streaming to begin.\n * @param errorFallback Element to be displayed if an error occurs.\n * @param animate  configuration for on-mount animation\n * @param rerenderEndpoint The relative URL endpoint for regeneration.\n * \n * Caching:\n * @param cached Pre-generated schema string (from onGenerate), skips API call.\n * @param onGenerate Callback which accepts the generated schema, for reuse.\n * \n * Advanced:\n * @param skeletonize compresses the value for large inputs (arrays) or untrusted input\n */\nexport function GeneratedUI(props: GeneratedUIProps) {\n    const {\n        endpoint,\n        value,\n        hint,\n        components,\n        skeletonize,\n        placeholder,\n        cached,\n        onGenerate,\n        errorFallback,\n        animate,\n        rerenderEndpoint,\n    } = props;\n\n    const allowedComponents = generateComponentMap(components || []);\n\n    // prerender if cached\n    if (cached) {\n        const parser = new ResponseParser();\n        parser.addDelta(cached);\n        parser.finish();\n\n        const schema: UISchema = parser.schema;\n\n        if (schema.root) {\n            return <Renderer\n                id={schema.root.id}\n                componentMap={schema.componentMap}\n                childrenMap={schema.childrenMap}\n                allowedComponents={allowedComponents}\n                global={value}\n                local={value}\n                animate={animate}\n            />;\n        }\n\n        return <></>; // probably bad schema\n    }\n\n    /**\n     * serialize generation information.\n     */\n    const componentsMetadata: (ComponentMetadata | string)[] = (components || []).map((comp: ComponentMetadata | string) => {\n        if (typeof comp === 'string') return comp;\n\n        return {\n            name: comp.name,\n            props: comp.props,\n            context: comp.context\n        }\n    })\n\n    const fetchBody = { value, hint, components: componentsMetadata, skeletonize };\n    const rerenderContext = constructRerenderContext(props);\n\n    return (\n        <GeneratedClient\n            value={value}\n            allowedComponents={allowedComponents}\n            endpoint={endpoint}\n            fetchBody={fetchBody}\n            placeholder={placeholder}\n            errorFallback={errorFallback}\n            animate={animate}\n            onGenerate={onGenerate}\n            rerender={{ context: rerenderContext, endpoint: rerenderEndpoint }}\n        />\n    );\n}\n"],"mappings":"aAKO,IAAMA,EAAN,KAAqB,CACxB,OAAS,GACT,MAAQ,GAGR,OAAmB,CACf,YAAa,CAAC,EACd,aAAc,CAAC,EACf,KAAM,IACV,EAUA,SAASC,EAAe,CACpB,KAAK,OAASA,EACd,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,ECxDO,SAASG,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,EAKG,CACC,IAAMP,GAAoBM,GAAA,YAAAA,EAAY,IAAKE,GACnC,OAAOA,GAAS,SAAiBA,EAC9BA,EAAK,MACb,KAAK,OAAQ,GAEVC,EAAmBH,GAAA,YAAAA,EAAY,OAAQE,GAAoC,OAAOA,GAAS,UAC3FE,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,EAAa,KAAK,UAAUN,EAAcO,EAAeR,CAAK,EAAIA,CAAK,EAE7E,MAAO,sBAAsBJ,CAAiB;AAAA,oBAA2CU,CAAgB;AAAA,eAAqCH,GAAQ,EAAE;AAAA,cAA+BF,EAAY,SAAS,CAAC;AAAA;AAAA,EAA2BM,CAAU;AAAA,SACtP,CAKO,SAASE,EAAyBC,EAAyB,CAC9D,OAAOX,EAAeW,CAAK,EAAE,MAAM;AAAA,CAAI,EAAE,MAAM,EAAG,CAAC,EAAE,KAAK;AAAA,CAAI,CAClE,CAQO,SAASF,EAAeG,EAAY,CACvC,OAAIA,IAAU,KAAa,OAEvB,OAAOA,GAAU,SAAiB,OAAOA,EAEzC,MAAM,QAAQA,CAAK,EACfA,EAAM,QAAU,EACT,OAEA,CAACH,EAAeG,EAAM,CAAC,CAAC,CAAC,EAGjC,OAAO,QAAQA,CAAK,EAAE,OAAO,CAACd,EAAK,CAACe,EAAKZ,CAAK,KACjDH,EAAIe,CAAG,EAAIJ,EAAeR,CAAK,EACxBH,GACR,CAAC,CAAC,CACT,CC5EA,OAAqB,eAAAgB,GAAa,aAAAC,GAAW,WAAAC,GAAS,cAAAC,GAAY,UAAAC,GAAQ,YAAAC,MAAgB,QCA1F,OAAwB,YAAAC,EAAU,aAAAC,EAAW,YAAAC,OAAgB,QAuGrB,mBAAAF,EAAA,OAAAG,MAAA,oBASkB,wBAAAC,OAAA,QA1G1D,IAAMC,EAAc,CAACC,EAAUC,IACvBA,IAAS,IAAYD,EAClBC,EAAK,MAAM,GAAG,EAAE,OAAO,CAACC,EAAKC,IAASD,GAAA,YAAAA,EAAMC,GAAOH,CAAG,EAM3DI,EAAM,CAACC,EAAaC,EAAYL,IAC9BA,EAAK,WAAW,QAAQ,GACxBA,EAAOA,EAAK,MAAM,CAAC,EACZF,EAAYO,EAAOL,CAAI,GAE1BA,IAAS,QAAgBK,EACtBP,EAAYM,EAAQJ,CAAI,EAKjCM,EAAmB,IAAI,IAAI,CAAC,yBAAyB,CAAC,EAMtDC,EAAqBC,GAAgBA,EAAI,OAAS,GAAKA,EAAI,WAAW,IAAI,GAAKA,EAAI,CAAC,IAAMA,EAAI,CAAC,EAAE,YAAY,EAK7GC,EAAe,CAACL,EAAaC,EAAYK,IAAe,CAC1D,GAAI,CAACA,EAAO,OAAOA,EAEnB,GAAI,UAAWA,EAAO,CAClB,IAAMC,EAAWR,EAAIC,EAAQC,EAAOK,EAAM,KAAK,EAC/C,cAAO,KAAKC,CAAQ,EAAE,QAASH,GAAQ,EAC/BF,EAAiB,IAAIE,CAAG,GAAMD,EAAkBC,CAAG,GAAK,OAAOG,EAASH,CAAG,GAAM,aACjF,OAAOG,EAASH,CAAG,CAE3B,CAAC,EACMG,CACX,CAEA,cAAO,KAAKD,CAAK,EAAE,QAASF,GAAQ,CAChC,GAAIF,EAAiB,IAAIE,CAAG,EAAG,CAC3B,OAAOE,EAAMF,CAAG,EAChB,MACJ,CAEA,IAAMI,EAAMF,EAAMF,CAAG,EACjB,OAAOI,GAAQ,WACfF,EAAMF,CAAG,EAAIC,EAAaL,EAAQC,EAAOO,CAAG,EACxCL,EAAkBC,CAAG,GAAK,OAAOE,EAAMF,CAAG,GAAM,YAChD,OAAOE,EAAMF,CAAG,EAG5B,CAAC,EACME,CACX,EAKMG,EAAgB,CAACT,EAAaC,EAAYS,IACxC,OAAOA,GAAY,SACZX,EAAIC,EAAQC,EAAOS,EAAQ,KAAK,EAEhCA,EAiBR,SAASC,EAASL,EAAsB,CA5F/C,IAAAM,EAAAC,EAAAC,EA6FI,GAAM,CAACC,EAAWC,CAAY,EAAIzB,GAAS,EAAK,EAEhDD,EAAU,IAAM,CACZ,IAAM2B,EAAQ,sBAAsB,IAAMD,EAAa,EAAI,CAAC,EAC5D,MAAO,IAAM,qBAAqBC,CAAK,CAC3C,EAAG,CAAC,CAAC,EAEL,GAAM,CACF,GAAAC,EAAI,aAAAC,EAAc,YAAAC,EAAa,OAAApB,EAAQ,MAAAC,EAAO,kBAAAoB,EAAmB,QAAAC,CACrE,EAAIhB,EACEiB,EAAUJ,EAAaD,CAAE,EAE/B,GAAIK,EAAQ,OAAS,OAAQ,OAAO/B,EAAAH,EAAA,CAAG,SAAAoB,EAAcT,EAAQC,EAAOsB,EAAQ,OAAO,EAAE,EAErF,IAAMC,GAAgBZ,EAAAW,EAAQ,QAAR,YAAAX,EAAe,OACrC,GAAIW,EAAQ,OAAS,eAAiBC,EAAe,CACjD,IAAMC,EAAY1B,EAAIC,EAAQC,EAAOuB,CAAa,EAClD,GAAI,CAAC,MAAM,QAAQC,CAAS,EAAG,OAAO,KAEtC,IAAMC,EAAcN,EAAYG,EAAQ,EAAE,EAC1C,OAAO/B,EAAAH,EAAA,CAAG,SAAAqC,GAAA,YAAAA,EAAa,IAAI,CAACC,EAAiBC,IAAkBpC,EAACH,EAAA,CAC3D,SAAAoC,EAAU,IAAI,CAACI,EAAWC,IAAmBrC,GAACkB,EAAA,CAAU,GAAGL,EAAO,GAAIqB,EAAS,MAAOE,EAAM,IAAKC,EAAQ,CAAE,GADlCF,CAE9E,GAAa,CACjB,CAEA,IAAMG,EAAYV,EAAkBE,EAAQ,IAAI,GAAKA,EAAQ,KAGvDS,EAAgB,CAAC,GAFA3B,EAAaL,EAAQC,EAAOsB,EAAQ,KAAK,CAExB,EACxCS,EAAc,MAAQ,CAAC,GAAIA,EAAc,OAAU,CAAC,CAAC,EAErD,IAAMC,IAAiBpB,EAAAmB,EAAc,QAAd,YAAAnB,EAAqB,UAAW,EACvDmB,EAAc,MAAM,QAAUjB,EAAYkB,EAAiB,EAC3DD,EAAc,MAAM,UAAYjB,EAAY,gBAAkB,eAAcO,GAAA,YAAAA,EAAS,SAAU,EAAE,MACjGU,EAAc,MAAM,WAAa,YAAWV,GAAA,YAAAA,EAAS,WAAY,GAAG,2BAA0BA,GAAA,YAAAA,EAAS,WAAY,GAAG,cACtHU,EAAc,MAAM,WAAa,qBAEjC,IAAME,EAAczB,EAAcT,EAAQC,EAAOsB,EAAQ,OAAO,EAC1DY,IAAarB,EAAAM,EAAYG,EAAQ,EAAE,IAAtB,YAAAT,EAAyB,IAAI,CAACa,EAAiBC,IACvDpC,EAACmB,EAAA,CAEH,GAAGL,EACJ,GAAIqB,GAFCC,CAGT,KACE,CAAC,EAEDQ,EAAgB,CAACF,EAAa,GAAGC,CAAU,EAAE,OAAOE,GAAQA,GAAS,IAA0B,EAErG,OAAID,EAAc,OAAS,EAChB5C,EAACuC,EAAA,CAAW,GAAGC,EACjB,SAAAI,EACL,EAGG5C,EAACuC,EAAA,CAAW,GAAGC,EAAc,CACxC,CCpJA,OAAS,iBAAAM,GAAe,cAAAC,OAAkB,QAQnC,IAAMC,EAAgBF,GAAwC,IAAI,EAElE,SAASG,IAAW,CACvB,IAAMC,EAAUH,GAAWC,CAAa,EACxC,GAAG,CAACE,EAAS,MAAM,IAAI,MAAM,8CAA8C,EAC3E,OAAOA,CACX,CFgH6C,mBAAAC,EAAA,OAAAC,MAAA,oBA5GtC,SAASC,EAAgB,CAC5B,MAAAC,EACA,kBAAAC,EACA,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,cAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,CACJ,EAUG,CAtCH,IAAAC,EAuCI,GAAM,CAACC,EAAeC,CAAgB,EAAIC,EAASZ,CAAK,EAClD,CAAC,CAAEa,CAAW,EAAIC,GAAWC,GAAKA,EAAI,EAAG,CAAC,EAC1CC,EAASC,GAA8B,IAAI,EAC3C,CAACC,EAASC,CAAU,EAAIP,EAAS,EAAK,EAMtC,CAACQ,EAAaC,CAAc,EAAIT,EAAsB,KAAO,CAAE,IAAKV,EAAU,KAAMC,CAAU,EAAE,EAEtGmB,GAAU,IAAM,CAIZ,IAAIC,EAAW,GACf,OAAAP,EAAO,QAAU,IAAIQ,EACrBL,EAAW,EAAK,GAEO,SAAY,CA1D3C,IAAAV,EAAAgB,EA2DY,GAAI,CACA,IAAMC,EAAW,MAAM,MAAMN,EAAY,IAAK,CAC1C,OAAQ,OACR,QAAS,CAAE,eAAgB,kBAAmB,EAC9C,KAAM,KAAK,UAAUA,EAAY,IAAI,CACzC,CAAC,EAED,GAAI,CAACM,EAAS,IAAM,CAACA,EAAS,KAAM,MAAM,IAAI,MAAM,QAAQA,EAAS,MAAM,EAAE,EAE7E,IAAMC,EAASD,EAAS,KAAK,UAAU,EACjCE,EAAU,IAAI,YAEpB,OAAa,CACT,GAAM,CAAE,KAAAC,EAAM,MAAA7B,CAAM,EAAI,MAAM2B,EAAO,KAAK,EAE1C,GADI,CAACJ,GACDM,EAAM,MAEV,IAAMC,EAAQF,EAAQ,OAAO5B,CAAK,EAE/BgB,EAAO,SAAWc,IAAU,QACxBd,EAAO,QAAQ,SAASc,CAAK,GAC5BjB,EAAY,CAGxB,CAEIU,KACAd,EAAAO,EAAO,UAAP,MAAAP,EAAgB,SAChBI,EAAY,EACZN,GAAA,MAAAA,IAAakB,EAAAT,EAAO,UAAP,YAAAS,EAAgB,QAAS,IAE9C,MAAc,CACNF,GAAUJ,EAAW,EAAI,CACjC,CACJ,GAEe,EACR,IAAM,CAAEI,EAAW,EAAO,CACrC,EAAG,CAACH,CAAW,CAAC,EAEhB,IAAMW,GAAStB,EAAAO,EAAO,UAAP,YAAAP,EAAgB,OAEzBuB,EAAcC,GAAY,CAACjC,EAAYkC,IAA8B,CArG/E,IAAAzB,EAsGQ,GAAI,CAACyB,GAAW,CAACA,EAAQ,WACrBvB,EAAiBX,CAAK,MACnB,CACH,GAAI,CAACQ,EAAS,SACV,MAAM,IAAI,MAAM,uEAAuE,EAE3FG,EAAiBX,CAAK,EACtBqB,EAAe,CACX,IAAKb,EAAS,SACd,KAAM,CACF,QAASA,EAAS,QAClB,WAAUC,EAAAO,EAAO,UAAP,YAAAP,EAAgB,QAAS,GACnC,KAAMyB,EAAQ,IAClB,CACJ,CAAC,CACL,CACJ,EAAG,CAAC1B,EAAS,SAAUA,EAAS,OAAO,CAAC,EAElC2B,EAAgBC,GAAQ,KAAO,CACjC,MAAO1B,EACP,SAAUsB,CACd,GAAI,CAACtB,EAAesB,CAAW,CAAC,EAE1BK,EAAgB,IACdnB,GAAWb,EAAsBP,EAAAD,EAAA,CAAG,SAAAQ,EAAc,EAClD0B,GAAA,MAAAA,EAAQ,KACDjC,EAACwC,EAAA,CACJ,GAAIP,EAAO,KAAK,GAChB,aAAcA,EAAO,aACrB,YAAaA,EAAO,YACpB,kBAAmB9B,EACnB,OAAQS,EACR,MAAOA,EACP,QAASJ,EACb,EAEGR,EAAAD,EAAA,CAAG,SAAAO,EAAY,EAG1B,OACIN,EAACyC,EAAc,SAAd,CAAuB,MAAOJ,EAC1B,SAAAE,EAAc,EACnB,CAER,CG3EmB,OAWJ,YAAAG,GAXI,OAAAC,MAAA,oBA1BZ,SAASC,GAAYC,EAAyB,CACjD,GAAM,CACF,SAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,cAAAC,EACA,QAAAC,EACA,iBAAAC,CACJ,EAAIX,EAEEY,EAAoBC,EAAqBT,GAAc,CAAC,CAAC,EAG/D,GAAIG,EAAQ,CACR,IAAMO,EAAS,IAAIC,EACnBD,EAAO,SAASP,CAAM,EACtBO,EAAO,OAAO,EAEd,IAAME,EAAmBF,EAAO,OAEhC,OAAIE,EAAO,KACAlB,EAACmB,EAAA,CACJ,GAAID,EAAO,KAAK,GAChB,aAAcA,EAAO,aACrB,YAAaA,EAAO,YACpB,kBAAmBJ,EACnB,OAAQV,EACR,MAAOA,EACP,QAASQ,EACb,EAGGZ,EAAAD,GAAA,EAAE,CACb,CAKA,IAAMqB,GAAsDd,GAAc,CAAC,GAAG,IAAKe,GAC3E,OAAOA,GAAS,SAAiBA,EAE9B,CACH,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,QAASA,EAAK,OAClB,CACH,EAEKC,EAAY,CAAE,MAAAlB,EAAO,KAAAC,EAAM,WAAYe,EAAoB,YAAAb,CAAY,EACvEgB,EAAkBC,EAAyBtB,CAAK,EAEtD,OACIF,EAACyB,EAAA,CACG,MAAOrB,EACP,kBAAmBU,EACnB,SAAUX,EACV,UAAWmB,EACX,YAAad,EACb,cAAeG,EACf,QAASC,EACT,WAAYF,EACZ,SAAU,CAAE,QAASa,EAAiB,SAAUV,CAAiB,EACrE,CAER","names":["ResponseParser","delta","split","line","node","childrenMap","componentMap","generateComponentMap","allowedComponents","acc","curr","constructInput","value","skeletonize","components","hint","item","customComponents","componentContext","inputValue","createSkeleton","constructRerenderContext","props","input","key","useCallback","useEffect","useMemo","useReducer","useRef","useState","Fragment","useEffect","useState","jsx","createElement","resolvePath","obj","path","acc","curr","get","global","local","blacklistedProps","isEventHandlerKey","key","resolveProps","props","resolved","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","endpoint","fetchBody","placeholder","errorFallback","animate","onGenerate","rerender","_a","statefulValue","setStatefulValue","useState","forceUpdate","useReducer","x","parser","useRef","errored","setErrored","fetchConfig","setFetchConfig","useEffect","isActive","ResponseParser","_b","response","reader","decoder","done","delta","schema","modifyValue","useCallback","options","providerValue","useMemo","renderContent","Renderer","SyntuxContext","Fragment","jsx","GeneratedUI","props","endpoint","value","hint","components","skeletonize","placeholder","cached","onGenerate","errorFallback","animate","rerenderEndpoint","allowedComponents","generateComponentMap","parser","ResponseParser","schema","Renderer","componentsMetadata","comp","fetchBody","rerenderContext","constructRerenderContext","GeneratedClient"]}

package/dist/index.d.mts

@@ -1,33 +1,26 @@
-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 { C as ComponentMetadata, G as GeneratedUIProps, S as SyntuxComponent, U as UISchema } from './GeneratedUI-DFOjlyg6.mjs';
+export { A as AnimateOptions, a as ChildrenMap, b as ComponentMap, R as RerenderContext, c as RerenderOptions, d as SchemaNode } from './GeneratedUI-DFOjlyg6.mjs';
 import * as react from 'react';
-import { JSX } from 'react';
-import { LanguageModel } from 'ai';
-import { SyntuxComponent, AnimateOptions } from 'getsyntux';
-
-interface GeneratedContentProps {
-    value: any;
-    model: LanguageModel;
-    components?: (SyntuxComponent | string)[];
-    hint?: string;
-    placeholder?: JSX.Element;
-    cached?: string;
-    onGenerate?: (arg0: string) => void;
-    skeletonize?: boolean;
-    onError?: (arg0: any) => void;
-    errorFallback?: JSX.Element;
-    animate?: AnimateOptions;
-}
+import 'react/jsx-runtime';
 
 /**
  * Converts a list of components into a dictionary for fast-retrieval
  * during rendering.
  */
-declare function generateComponentMap(allowedComponents: (SyntuxComponent$1 | string)[]): Record<string, string | react.ComponentType<any>>;
+declare function generateComponentMap(allowedComponents: (SyntuxComponent | string)[]): Record<string, string | react.ComponentType<any>>;
+/**
+ * Creates LLM input in accordance to the spec.
+ */
+declare function constructInput({ value, skeletonize, components, hint }: {
+    value: any;
+    components?: (ComponentMetadata | string)[];
+    hint?: string;
+    skeletonize?: boolean;
+}): string;
 /**
- * Creates LLM input in accordance to the spec
+ * Builds the AllowedComponents + ComponentContext header used as context for rerender requests.
  */
-declare function constructInput({ value, skeletonize, components, hint }: GeneratedContentProps): string;
+declare function constructRerenderContext(props: GeneratedUIProps): 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.
@@ -41,6 +34,7 @@ declare function createSkeleton(input: any): any;
  */
 declare class ResponseParser {
     buffer: string;
+    total: string;
     schema: UISchema;
     /**
      * Update schema with latest data chunk.
@@ -62,4 +56,4 @@ declare class ResponseParser {
     finish(): void;
 }
 
-export { ResponseParser, SyntuxComponent$1 as SyntuxComponent, UISchema, constructInput, createSkeleton, generateComponentMap };
+export { ComponentMetadata, ResponseParser, SyntuxComponent, UISchema, constructInput, constructRerenderContext, createSkeleton, generateComponentMap };

package/dist/index.mjs

@@ -1,9 +1,11 @@
-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>
+function h(t){return t.reduce((n,e)=>typeof e=="string"?(n[e]=e,n):(n[e.name]=e.component,n),{})}function u({value:t,skeletonize:n=!1,components:e,hint:o}){let a=(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"),p=(i==null?void 0:i.map(r=>r.context?`${r.name} [props: ${r.props}, details: ${r.context}]`:`${r.name} [props: ${r.props}]`).join(","))||"",f=JSON.stringify(n?s(t):t);return`<AllowedComponents>${a}</AllowedComponents>
+<ComponentContext>${p}</ComponentContext>
+<UserContext>${o||""}</UserContext>
+<IsSkeleton>${n.toString()}</IsSkeleton>
 <Value>
-${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};
+${f}
+</Value>`}function d(t){return u(t).split(`
+`).slice(0,2).join(`
+`)}function s(t){return t===null?"null":typeof t!="object"?typeof t:Array.isArray(t)?t.length==0?"null":[s(t[0])]:Object.entries(t).reduce((n,[e,o])=>(n[e]=s(o),n),{})}var l=class{buffer="";total="";schema={childrenMap:{},componentMap:{},root:null};addDelta(n){this.total+=n,this.buffer+=n;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(n){try{let e=JSON.parse(n),{childrenMap:o,componentMap:a}=this.schema;a[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{l as ResponseParser,u as constructInput,d as constructRerenderContext,s 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 { 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"]}
+{"version":3,"sources":["../src/util.ts","../src/ResponseParser.ts"],"sourcesContent":["import { GeneratedUIProps } from \"./client\";\r\nimport { ComponentMetadata, 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}: {\r\n    value: any;\r\n    components?: (ComponentMetadata | string)[];\r\n    hint?: string;\r\n    skeletonize?: boolean;\r\n}) {\r\n    const allowedComponents = components?.map((item: ComponentMetadata | 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 ComponentMetadata => 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 inputValue = JSON.stringify(skeletonize ? createSkeleton(value) : value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${hint || \"\"}</UserContext>\\n<IsSkeleton>${skeletonize.toString()}</IsSkeleton>\\n<Value>\\n${inputValue}\\n</Value>`\r\n}\r\n\r\n/**\r\n * Builds the AllowedComponents + ComponentContext header used as context for rerender requests.\r\n */\r\nexport function constructRerenderContext(props: GeneratedUIProps) {\r\n    return constructInput(props).split('\\n').slice(0, 2).join('\\n');\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}\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    total = \"\"; // accumulator\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.total += delta;\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,EAKG,CACC,IAAMP,GAAoBM,GAAA,YAAAA,EAAY,IAAKE,GACnC,OAAOA,GAAS,SAAiBA,EAC9BA,EAAK,MACb,KAAK,OAAQ,GAEVC,EAAmBH,GAAA,YAAAA,EAAY,OAAQE,GAAoC,OAAOA,GAAS,UAC3FE,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,EAAa,KAAK,UAAUN,EAAcO,EAAeR,CAAK,EAAIA,CAAK,EAE7E,MAAO,sBAAsBJ,CAAiB;AAAA,oBAA2CU,CAAgB;AAAA,eAAqCH,GAAQ,EAAE;AAAA,cAA+BF,EAAY,SAAS,CAAC;AAAA;AAAA,EAA2BM,CAAU;AAAA,SACtP,CAKO,SAASE,EAAyBC,EAAyB,CAC9D,OAAOX,EAAeW,CAAK,EAAE,MAAM;AAAA,CAAI,EAAE,MAAM,EAAG,CAAC,EAAE,KAAK;AAAA,CAAI,CAClE,CAQO,SAASF,EAAeG,EAAY,CACvC,OAAIA,IAAU,KAAa,OAEvB,OAAOA,GAAU,SAAiB,OAAOA,EAEzC,MAAM,QAAQA,CAAK,EACfA,EAAM,QAAU,EACT,OAEA,CAACH,EAAeG,EAAM,CAAC,CAAC,CAAC,EAGjC,OAAO,QAAQA,CAAK,EAAE,OAAO,CAACd,EAAK,CAACe,EAAKZ,CAAK,KACjDH,EAAIe,CAAG,EAAIJ,EAAeR,CAAK,EACxBH,GACR,CAAC,CAAC,CACT,CCzEO,IAAMgB,EAAN,KAAqB,CACxB,OAAS,GACT,MAAQ,GAGR,OAAmB,CACf,YAAa,CAAC,EACd,aAAc,CAAC,EACf,KAAM,IACV,EAUA,SAASC,EAAe,CACpB,KAAK,OAASA,EACd,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","inputValue","createSkeleton","constructRerenderContext","props","input","key","ResponseParser","delta","split","line","node","childrenMap","componentMap"]}

package/dist/metafile-esm.json

@@ -1 +1 @@
-{"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}}}
+{"inputs":{"src/types.ts":{"bytes":1308,"imports":[],"format":"esm"},"src/util.ts":{"bytes":2873,"imports":[{"path":"./client","kind":"import-statement","external":true},{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/ResponseParser.ts":{"bytes":1923,"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":5020,"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":481,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/types","kind":"import-statement","external":true}],"format":"esm"},"src/client/GeneratedClient.tsx":{"bytes":4814,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"../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/GeneratedUI.tsx":{"bytes":3547,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"../ResponseParser"},{"path":"../types","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"},{"path":"src/client/GeneratedClient.tsx","kind":"import-statement","original":"./GeneratedClient"},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./Renderer"},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/client.ts":{"bytes":172,"imports":[{"path":"src/client/GeneratedUI.tsx","kind":"import-statement","original":"./client/GeneratedUI"},{"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/server/index.ts":{"bytes":2077,"imports":[{"path":"ai","kind":"import-statement","external":true},{"path":"src/util.ts","kind":"import-statement","original":"../util"}],"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":7402},"dist/index.mjs":{"imports":[],"exports":["ResponseParser","constructInput","constructRerenderContext","createSkeleton","generateComponentMap"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/util.ts":{"bytesInOutput":863},"src/ResponseParser.ts":{"bytesInOutput":508}},"bytes":1496},"dist/client.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":29788},"dist/client.mjs":{"imports":[{"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},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["GeneratedClient","GeneratedUI","Renderer","SyntuxContext","useSyntux"],"entryPoint":"src/client.ts","inputs":{"src/ResponseParser.ts":{"bytesInOutput":508},"src/util.ts":{"bytesInOutput":863},"src/client/GeneratedClient.tsx":{"bytesInOutput":1522},"src/client/Renderer.tsx":{"bytesInOutput":1870},"src/client/SyntuxContext.tsx":{"bytesInOutput":176},"src/client/GeneratedUI.tsx":{"bytesInOutput":716},"src/client.ts":{"bytesInOutput":0}},"bytes":5765},"dist/server.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":7351},"dist/server.mjs":{"imports":[{"path":"ai","kind":"import-statement","external":true}],"exports":["createSyntuxHandler","createSyntuxRerenderHandler"],"entryPoint":"src/server/index.ts","inputs":{"src/server/index.ts":{"bytesInOutput":524},"src/util.ts":{"bytesInOutput":708}},"bytes":1299},"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/server.d.mts

@@ -0,0 +1,27 @@
+import { LanguageModel } from 'ai';
+
+interface SyntuxHandlerOptions {
+    model: LanguageModel;
+    spec: string;
+    onGenerate?: (schema: string) => void;
+}
+/**
+ * HTTP handler for UI generation requests. Framework-agnostic.
+ *
+ * Important: does not support rerendering. Use `createSyntuxRerenderHandler`.
+ *
+ * @param model The LanguageModel (as provided from AI SDK) to use. Must support streaming.
+ * @param spec The model specification to use.
+ * @param onGenerate Schema generation callback, used for caching.
+ */
+declare function createSyntuxHandler(options: SyntuxHandlerOptions): (request: Request) => Promise<Response>;
+/**
+ * HTTP handler for UI rerender requests. Framework-agnostic.
+ *
+ * @param model The LanguageModel (as provided from AI SDK) to use. Must support streaming.
+ * @param spec The model specification to use.
+ * @param onGenerate Schema generation callback, used for caching.
+ */
+declare function createSyntuxRerenderHandler(options: SyntuxHandlerOptions): (request: Request) => Promise<Response>;
+
+export { type SyntuxHandlerOptions, createSyntuxHandler, createSyntuxRerenderHandler };

package/dist/server.mjs

@@ -0,0 +1,10 @@
+import{streamText as d}from"ai";function u({value:e,skeletonize:r=!1,components:n,hint:o}){let a=(n==null?void 0:n.map(t=>typeof t=="string"?t:t.name).join(","))||"",s=n==null?void 0:n.filter(t=>typeof t!="string"),i=(s==null?void 0:s.map(t=>t.context?`${t.name} [props: ${t.props}, details: ${t.context}]`:`${t.name} [props: ${t.props}]`).join(","))||"",x=JSON.stringify(r?p(e):e);return`<AllowedComponents>${a}</AllowedComponents>
+<ComponentContext>${i}</ComponentContext>
+<UserContext>${o||""}</UserContext>
+<IsSkeleton>${r.toString()}</IsSkeleton>
+<Value>
+${x}
+</Value>`}function p(e){return e===null?"null":typeof e!="object"?typeof e:Array.isArray(e)?e.length==0?"null":[p(e[0])]:Object.entries(e).reduce((r,[n,o])=>(r[n]=p(o),r),{})}function y(e){return async r=>{let{value:n,hint:o,components:a,skeletonize:s}=await r.json(),i=u({value:n,hint:o,components:a,skeletonize:s});return l(e.model,e.spec,i,e.onGenerate)}}function C(e){return async r=>{let{context:n,existing:o,hint:a}=await r.json(),s=`${n}
+<Existing>${o}</Existing>
+<UserContext>${a}</UserContext>`;return l(e.model,e.spec,s,e.onGenerate)}}function l(e,r,n,o){return d({model:e,system:r,prompt:n,onFinish:({text:s})=>o==null?void 0:o(s)}).toTextStreamResponse()}export{y as createSyntuxHandler,C as createSyntuxRerenderHandler};
+//# sourceMappingURL=server.mjs.map

package/dist/server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server/index.ts","../src/util.ts"],"sourcesContent":["import { LanguageModel, streamText } from 'ai';\nimport { constructInput } from '../util';\nexport interface SyntuxHandlerOptions {\n    model: LanguageModel;\n    spec: string;\n    onGenerate?: (schema: string) => void;\n}\n\n/**\n * HTTP handler for UI generation requests. Framework-agnostic.\n * \n * Important: does not support rerendering. Use `createSyntuxRerenderHandler`.\n * \n * @param model The LanguageModel (as provided from AI SDK) to use. Must support streaming.\n * @param spec The model specification to use.\n * @param onGenerate Schema generation callback, used for caching.\n */\nexport function createSyntuxHandler(options: SyntuxHandlerOptions) {\n    return async (request: Request): Promise<Response> => {\n        const { value, hint, components, skeletonize } = await request.json();\n        const prompt = constructInput({ value, hint, components, skeletonize });\n\n        return makeStreamResponse(options.model, options.spec, prompt, options.onGenerate);\n    };\n}\n\n/**\n * HTTP handler for UI rerender requests. Framework-agnostic.\n *\n * @param model The LanguageModel (as provided from AI SDK) to use. Must support streaming.\n * @param spec The model specification to use.\n * @param onGenerate Schema generation callback, used for caching.\n */\nexport function createSyntuxRerenderHandler(options: SyntuxHandlerOptions) {\n    return async (request: Request): Promise<Response> => {\n        const { context, existing, hint } = await request.json();\n        const prompt = `${context}\\n<Existing>${existing}</Existing>\\n<UserContext>${hint}</UserContext>`;\n        return makeStreamResponse(options.model, options.spec, prompt, options.onGenerate);\n    };\n}\n\n\n/**\n * utility function for creating responses using the Stream API.\n */\nfunction makeStreamResponse(\n    model: LanguageModel,\n    spec: string,\n    prompt: string,\n    onGenerate?: (s: string) => void,\n): Response {\n    const result = streamText({\n        model,\n        system: spec,\n        prompt,\n        onFinish: ({ text }) => onGenerate?.(text),\n    });\n    return result.toTextStreamResponse();\n}\n\n","import { GeneratedUIProps } from \"./client\";\r\nimport { ComponentMetadata, 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}: {\r\n    value: any;\r\n    components?: (ComponentMetadata | string)[];\r\n    hint?: string;\r\n    skeletonize?: boolean;\r\n}) {\r\n    const allowedComponents = components?.map((item: ComponentMetadata | 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 ComponentMetadata => 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 inputValue = JSON.stringify(skeletonize ? createSkeleton(value) : value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${hint || \"\"}</UserContext>\\n<IsSkeleton>${skeletonize.toString()}</IsSkeleton>\\n<Value>\\n${inputValue}\\n</Value>`\r\n}\r\n\r\n/**\r\n * Builds the AllowedComponents + ComponentContext header used as context for rerender requests.\r\n */\r\nexport function constructRerenderContext(props: GeneratedUIProps) {\r\n    return constructInput(props).split('\\n').slice(0, 2).join('\\n');\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}\r\n"],"mappings":"AAAA,OAAwB,cAAAA,MAAkB,KCsBnC,SAASC,EAAe,CAC3B,MAAAC,EAAO,YAAAC,EAAc,GAAO,WAAAC,EAAY,KAAAC,CAC5C,EAKG,CACC,IAAMC,GAAoBF,GAAA,YAAAA,EAAY,IAAKG,GACnC,OAAOA,GAAS,SAAiBA,EAC9BA,EAAK,MACb,KAAK,OAAQ,GAEVC,EAAmBJ,GAAA,YAAAA,EAAY,OAAQG,GAAoC,OAAOA,GAAS,UAC3FE,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,EAAa,KAAK,UAAUP,EAAcQ,EAAeT,CAAK,EAAIA,CAAK,EAE7E,MAAO,sBAAsBI,CAAiB;AAAA,oBAA2CG,CAAgB;AAAA,eAAqCJ,GAAQ,EAAE;AAAA,cAA+BF,EAAY,SAAS,CAAC;AAAA;AAAA,EAA2BO,CAAU;AAAA,SACtP,CAeO,SAASE,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,CAACC,EAAK,CAACC,EAAKC,CAAK,KACjDF,EAAIC,CAAG,EAAIH,EAAeI,CAAK,EACxBF,GACR,CAAC,CAAC,CACT,CD7DO,SAASG,EAAoBC,EAA+B,CAC/D,MAAO,OAAOC,GAAwC,CAClD,GAAM,CAAE,MAAAC,EAAO,KAAAC,EAAM,WAAAC,EAAY,YAAAC,CAAY,EAAI,MAAMJ,EAAQ,KAAK,EAC9DK,EAASC,EAAe,CAAE,MAAAL,EAAO,KAAAC,EAAM,WAAAC,EAAY,YAAAC,CAAY,CAAC,EAEtE,OAAOG,EAAmBR,EAAQ,MAAOA,EAAQ,KAAMM,EAAQN,EAAQ,UAAU,CACrF,CACJ,CASO,SAASS,EAA4BT,EAA+B,CACvE,MAAO,OAAOC,GAAwC,CAClD,GAAM,CAAE,QAAAS,EAAS,SAAAC,EAAU,KAAAR,CAAK,EAAI,MAAMF,EAAQ,KAAK,EACjDK,EAAS,GAAGI,CAAO;AAAA,YAAeC,CAAQ;AAAA,eAA6BR,CAAI,iBACjF,OAAOK,EAAmBR,EAAQ,MAAOA,EAAQ,KAAMM,EAAQN,EAAQ,UAAU,CACrF,CACJ,CAMA,SAASQ,EACLI,EACAC,EACAP,EACAQ,EACQ,CAOR,OANeC,EAAW,CACtB,MAAAH,EACA,OAAQC,EACR,OAAAP,EACA,SAAU,CAAC,CAAE,KAAAU,CAAK,IAAMF,GAAA,YAAAA,EAAaE,EACzC,CAAC,EACa,qBAAqB,CACvC","names":["streamText","constructInput","value","skeletonize","components","hint","allowedComponents","item","customComponents","componentContext","inputValue","createSkeleton","createSkeleton","input","acc","key","value","createSyntuxHandler","options","request","value","hint","components","skeletonize","prompt","constructInput","makeStreamResponse","createSyntuxRerenderHandler","context","existing","model","spec","onGenerate","streamText","text"]}

package/dist/templates/spec.md

@@ -82,4 +82,5 @@ Output:
 
 <IMPORTANT>
 Do NOT output anything EXCEPT the list of JSON.
+Do NOT add event listeners.
 </IMPORTANT>

package/dist/templates/spec.ts

@@ -78,6 +78,17 @@ Input:
 Output:
 { ... }
 ... more lines
+
+Or for an existing UI:
+
+<AllowedComponents>...</AllowedComponents>
+<ComponentContext>...</ComponentContext>
+<UserContext>...</UserContext>
+<Existing>...</Existing>
+
+Output:
+{ ... }
+ ... more lines
 </output_formatting>
 
 <reasoning_requirements>
@@ -88,6 +99,7 @@ Output:
 
 <IMPORTANT>
 Do NOT output anything EXCEPT the list of JSON.
+Do NOT add event listeners.
 </IMPORTANT>`;
 
 export default spec;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "getsyntux",
-  "version": "0.7.2",
+  "version": "0.9.0-alpha",
   "description": "Build generative UIs for the web.",
+  "keywords": ["generative-ui"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -12,6 +13,11 @@
       "types": "./dist/client.d.ts",
       "import": "./dist/client.mjs",
       "require": "./dist/client.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.js"
     }
   },
   "bin": {
@@ -28,7 +34,6 @@
   },
   "homepage": "https://github.com/puffinsoft/syntux#readme",
   "dependencies": {
-    "@ai-sdk/rsc": "^2.0.3",
     "@types/node": "^25.0.2",
     "@types/react": "^19.2.7",
     "commander": "^14.0.2",

package/dist/templates/GeneratedUI.tsx

@@ -1,103 +0,0 @@
-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 spec from './spec';
-
-export interface GeneratedContentProps {
-  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
-}
-
-/**
- * Section of user interface for LLM to generate.
- * @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 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, onError, errorFallback, animate } = props;
-
-  const allowedComponents = generateComponentMap(components || []);
-
-  // prerender if cached
-  if (cached) {
-    const parser = new ResponseParser();
-    parser.addDelta(cached);
-    parser.finish();
-
-    const schema: UISchema = parser.schema;
-
-    if (schema.root) {
-      return <Renderer id={schema.root.id} componentMap={schema.componentMap} childrenMap={schema.childrenMap}
-        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,
-      onError: (err) => {
-        stream.error(err)
-        errored = true;
-
-        if (!onError) {
-          if (!errorFallback) {
-            throw err;
-          }
-        } else {
-          onError(err)
-        }
-      }
-    })
-
-    for await (const delta of textStream) {
-      stream.update(delta);
-      total += delta;
-    }
-
-    if (!errored) {
-      stream.done();
-    }
-
-    if (onGenerate) onGenerate(total);
-  })()
-
-  return <GeneratedClient value={value} allowedComponents={allowedComponents} inputStream={stream.value} placeholder={placeholder} errorFallback={errorFallback} animate={animate} />
-}

package/dist/templates/RerenderHandler.tsx

@@ -1,8 +0,0 @@
-/**
- * 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/types-C9N85B_g.d.mts

@@ -1,28 +0,0 @@
-type SchemaNode = {
-    id: string;
-    parentId: string | null;
-    type: string;
-    props?: Record<string, any>;
-    content?: any | {
-        "$bind": string;
-    };
-};
-type ComponentMap = Record<string, SchemaNode>;
-type ChildrenMap = Record<string, string[]>;
-type UISchema = {
-    componentMap: ComponentMap;
-    childrenMap: ChildrenMap;
-    root: SchemaNode | null;
-};
-type SyntuxComponent = {
-    name: string;
-    props: string;
-    component: React.ComponentType<any>;
-    context?: string;
-};
-type AnimateOptions = {
-    offset: number;
-    duration: number;
-};
-
-export type { AnimateOptions as A, ChildrenMap as C, SyntuxComponent as S, UISchema as U, ComponentMap as a, SchemaNode as b };