getsyntux 0.2.0 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@
 
 ---
 
-https://github.com/user-attachments/assets/f968d2c3-3b1e-4fc8-8e72-628f4361359b
+https://github.com/user-attachments/assets/a930d35d-92ab-45f4-9f71-f7bc0380c4f1
 
 - ⚡ **Streamable** - display UI as you generate.
 - 🎨 **Custom Components** - maintain aesthetics and reusability.
@@ -18,6 +18,47 @@ https://github.com/user-attachments/assets/f968d2c3-3b1e-4fc8-8e72-628f4361359b
 
 ---
 
+### API
+
+<i>syntux</i> is built for React and Next.js.
+
+One component is all you need:
+
+```jsx
+const valueToDisplay = {
+    "username": "John",
+    "email": "john@gmail.com",
+    "age": 22
+}
+
+<GeneratedUI
+    model={anthropic('claude-sonnet-4-5')}
+    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.
+
+### 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)
+```
+
+---
+
 ### Examples
 
 Generate a UI based on `valueToDisplay` (can be anything, including arrays):
@@ -48,64 +89,77 @@ export default function Home(){
 }
 ```
 
-<sup>Note: <i>syntux</i> is built for Next.js. It likely works on other React frameworks, but isn't guaranteed.</sup>
-
----
+Use custom React components:
 
-### Installation
-
-In the root of your project:
+```jsx
+import { CustomOne, CustomTwo } from '@/my_components'
+export default function Home(){
+   const valueToDisplay = { ... };
 
-```
-$ npx getsyntux@latest
+   <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." }
+   ]} />
+}
 ```
 
-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)
-```
+See the [documentation](https://github.com/puffinsoft/syntux/wiki) for an in-depth explanation.
 
 ---
 
 ### FAQ
 
-**How does generation work?**
+<details>
+ <summary>How does generation work? (Does it generate source code?)</summary>
+
+Generated UIs 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.
+
+This schema is tailored to the `value` that you provide. It is then hydrated by *syntux* and rendered.
 
 ![](https://raw.githubusercontent.com/puffinsoft/syntux/HEAD/docs/images/workflow.png)
+</details>
 
+<details>
+ <summary>How does caching work?</summary>
 
- Generated designs are designed to be *reusable* and *cacheable*.
+ The generated UI is determined by the React Interface Schema (see the above question).
 
- To do this, *syntux* generates a "React Interface Schema" (RIS). It's essentially an Abstract Syntax Tree tailored to the `value` that you pass in. This schema is then hydrated by *syntux* and rendered.
+ Thus, if the same schema is provided, the same UI will be generated.
 
- The RIS has built-in support for arrays, and thus can handle inputs of arbitrary lengths, making it cacheable. To get a better understanding, see the [LLM prompt itself](src/templates/spec.md).
+ 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,.
 
-\-
+ Use the `onGenerate` and `cached` properties to retrieve/provide a cached schema respectively.
+</details>
 
 <details>
  <summary>What about state? Can state be generated?</summary>
  
- Non-stateful components should be wrapped in stateful components, then passed to *syntux* to generate.
+ Generating state is an anti-pattern and leads to poorly performing, insecure applications.
 
- Dynamic state generation violates the semi-deterministic paradigm of <i>syntux</i>, and is thus not supported by design.
+ If you need to handle state, wrap non-stateful components in stateful ones, then pass those as custom components to *syntux*.
 </details>
 
 <details>
- <summary>How do generated components share information?</summary>
+ <summary>What does the React Interface Schema look like?</summary>
+ 
+ It's a list of JSON objects, each delimited by a newline. Each object contains information about the element/component, props, and an `id` and `parentId`.
 
-  Use contexts.
+ The RIS **does not hardcode values**. It **binds** to properties of the `value` and has **built-in iterators** (with the `type` field), making it reusable and token-efficient (for arrays).
 
- ```jsx
- <GeneratedPage schema={
-    <Context.Provider>
-        <GeneratedContent components={[ MyComponent ]} />
-    </Context.Provider>
-} />
-```
+ Originally (pre-v0.2.x), the schema was a deep JSON tree. However, post-v0.2.x it was switched to a flat JSON list, as this allows for the UI to be built progressively (streamed).
+
+ As such, the `id` and `parentId` fields are used to construct the tree as-you-go.
+
+ Below is an example:
+
+ ```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"}}
+ ```
+
+ To get a better understanding, or to implement your own parser, see the [spec](https://raw.githubusercontent.com/puffinsoft/syntux/refs/heads/master/src/templates/spec.md).
 </details>
 
 ---

package/dist/bin/cli.d.mts

@@ -1,99 +1,205 @@
 #!/usr/bin/env node
+import { Command } from 'commander';
 import fs from 'fs-extra';
 import path, { dirname } from 'path';
 import { execSync } from 'child_process';
 import prompts from 'prompts';
 import chalk from 'chalk';
 import { fileURLToPath } from 'url';
+import { withCustomConfig } from 'react-docgen-typescript';
 
-const __filename$1 = fileURLToPath(import.meta.url);
-const __dirname$1 = dirname(__filename$1);
-
-function getPackageManager(root) {
-    if (fs.existsSync(path.join(root, 'yarn.lock'))) return 'yarn';
-    if (fs.existsSync(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';
-    return 'npm';
-}
-
-function getInstallCommand(manager) {
-    if (manager === "yarn") return "yarn add getsyntux";
-    if (manager === "pnpm") return "pnpm add getsyntux";
-    return "npm install getsyntux";
-}
-
-const userRoot = process.cwd();
-const packageJsonPath = path.join(userRoot, 'package.json');
-
-if (!fs.existsSync(packageJsonPath)) {
-    console.log(chalk.magenta('getsyntux') + ': ' + chalk.red('Failed to find package.json. Run this command from your project root.'));
-    process.exit(1);
-}
-
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-const allDeps = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies
-};
-
-if (allDeps['getsyntux']) {
-    console.log(chalk.magenta('getsyntux') + `: library has already been installed. Continuing...`);
-} else {
-    console.log(chalk.magenta('getsyntux') + `: library not detected in package.json. Please install to continue...`);
-    const packageManager = getPackageManager(userRoot);
-    const command = getInstallCommand(packageManager);
-    const response = await prompts({
-        type: 'select',
-        name: 'install',
-        message: `Run ${command}?`,
-        choices: [{ title: 'Yes' }, { title: 'No' }],
-    });
+function log(msg){
+    console.log(chalk.magenta('getsyntux') + ': '+ msg);
+}
+
+/**
+ * initialization command
+ */
+
+
+const initCommand = new Command("init").description("Initialize the project").action(async () => {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
 
-    if (response.install !== 0) {
-        console.log(chalk.magenta('getsyntux') + ': installation cancelled.');
-        process.exit(0);
+    function getPackageManager(root) {
+        if (fs.existsSync(path.join(root, 'yarn.lock'))) return 'yarn';
+        if (fs.existsSync(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';
+        return 'npm';
     }
 
-    try {
-        execSync(command, { stdio: 'inherit' });
-        console.log(chalk.magenta('getsyntux') + ': installed from ' + chalk.green(packageManager) + ' successfully.');
-    } catch (error) {
-        console.log(chalk.magenta('getsyntux') + ': installation ' + chalk.red('failed') + ' from ' + packageManager + '.');
-        process.exit(1);
+    function getInstallCommand(manager) {
+        if (manager === "yarn") return "yarn add getsyntux";
+        if (manager === "pnpm") return "pnpm add getsyntux";
+        return "npm install getsyntux";
     }
-}
 
-const templateDir = path.resolve(__dirname$1, '../templates');
-const targetDir = path.resolve(process.cwd(), 'lib/getsyntux');
+    /**
+     * verifying
+     */
 
-if (!fs.existsSync(templateDir)) {
-    console.log(chalk.magenta('getsyntux') + ': ' + chalk.red("failed to find template directory. This is not your fault."));
-    process.exit(1);
-}
+    const userRoot = process.cwd();
+    const packageJsonPath = path.join(userRoot, 'package.json');
 
-console.log(chalk.magenta('getsyntux') + ': generating files...');
+    if (!fs.existsSync(packageJsonPath)) {
+        log(chalk.red('Failed to find package.json. Run this command from your project root.'));
+        process.exit(1);
+    }
 
-if(fs.existsSync(targetDir)){
-    const files = fs.readdirSync(targetDir);
-    if(files.length > 0){
-        console.log(chalk.magenta('getsyntux') + `: target directory lib/getsyntux already contains files.`);
+    /**
+     * installing
+     */
+
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    const allDeps = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies
+    };
+
+    if (allDeps['getsyntux']) {
+        log('library has already been installed. Continuing...');
+    } else {
+        log('library not detected in package.json. Please install to continue...');
+        const packageManager = getPackageManager(userRoot);
+        const command = getInstallCommand(packageManager);
         const response = await prompts({
             type: 'select',
-            name: 'copy',
-            message: `Empty directory?`,
+            name: 'install',
+            message: `Run ${command}?`,
             choices: [{ title: 'Yes' }, { title: 'No' }],
         });
-    
-        if (response.copy !== 0) {
-            console.log(chalk.magenta('getsyntux') + ': installation cancelled.');
+
+        if (response.install !== 0) {
+            log('installation cancelled.');
             process.exit(0);
         }
 
-        fs.emptyDirSync(targetDir);
+        try {
+            execSync(command, { stdio: 'inherit' });
+            log('installed from ' + chalk.green(packageManager) + ' successfully.');
+        } catch (error) {
+            log('installation ' + chalk.red('failed') + ' from ' + packageManager + '.');
+            process.exit(1);
+        }
     }
-}
 
-fs.copySync(templateDir, targetDir, {
-    overwrite: true,
-    errorOnExist: false
-});
-console.log(chalk.magenta('getsyntux') + ': ' + chalk.green('installation complete.'));
+    /**
+     * copying
+     */
+
+    const templateDir = path.resolve(__dirname, '../templates');
+    const targetDir = path.resolve(process.cwd(), 'lib/getsyntux');
+
+    if (!fs.existsSync(templateDir)) {
+        log(chalk.red("failed to find template directory. This is not your fault."));
+        process.exit(1);
+    }
+
+    log('generating files...');
+
+    if (fs.existsSync(targetDir)) {
+        const files = fs.readdirSync(targetDir);
+        if (files.length > 0) {
+            log('target directory lib/getsyntux already contains files.');
+            const response = await prompts({
+                type: 'select',
+                name: 'copy',
+                message: `Empty directory?`,
+                choices: [{ title: 'Yes' }, { title: 'No' }],
+            });
+
+            if (response.copy !== 0) {
+                log('installation cancelled.');
+                process.exit(0);
+            }
+
+            fs.emptyDirSync(targetDir);
+        }
+    }
+
+    fs.copySync(templateDir, targetDir, {
+        overwrite: true,
+        errorOnExist: false
+    });
+    log(chalk.green('installation complete.'));
+});
+
+/**
+ * schema generation command
+*/
+
+const generateDefsCommand = new Command("generate-defs").description("Generate a definition for a component")
+    .argument('<path>', 'path to component file')
+    .action(async (rawPath) => {
+        const userRoot = process.cwd();
+        const tsConfigPath = path.join(userRoot, "tsconfig.json");
+
+        const parser = withCustomConfig(tsConfigPath, {
+            shouldExtractLiteralValuesFromEnum: true,
+        });
+
+        const filePath = path.resolve(rawPath);
+
+        if (!fs.existsSync(filePath)) {
+            log('file [' + filePath + '] ' + chalk.red('not found.'));
+            process.exit(1);
+        }
+
+        log('parsing file...');
+        const docs = parser.parse(filePath);
+
+        if (docs.length == 0) {
+            log('there are no components with props in that file. Stopping now.');
+            process.exit(0);
+        }
+
+        log(`found ${docs.length} component(s) with prop definitions [${docs.map(e => e.displayName).join(', ')}]`);
+
+        function generatePropSignature(props) {
+            const signature = Object.entries(props).map(([key, value]) => {
+                return `${key}${value.required ? '' : '?'}: ${value.type.name}`
+            }).join(', ');
+
+            if (!signature) return '{}' // usually for class components
+            return '{ ' + signature + ' }';
+        }
+
+        const userContexts = [];
+
+        let index = 0;
+        for (const component of docs) {
+            log(chalk.bold(`component #${index + 1}`) + ": " + component.displayName);
+            const response = await prompts({
+                type: 'text',
+                name: 'userContext',
+                message: 'What does this component do? (optional)'
+            });
+
+            userContexts.push(response.userContext.replaceAll('"', '\\"'));
+            index++;
+        }
+
+        function generateSignature(component, props, userContext) {
+            if (!userContext) {
+                return `{ name: "${component.displayName}", props: "${props}", component: ${component.displayName} }`;
+            } else {
+                return `{ name: "${component.displayName}", props: "${props}", component: ${component.displayName}, context: "${userContext}" }`;
+            }
+        }
+
+        console.log();
+        log('generated definitions (safe to copy & paste directly):');
+        docs.forEach((component, index) => {
+            const props = generatePropSignature(component.props);
+            console.log(generateSignature(component, props, userContexts[index]) + ", ");
+        });
+    });
+
+const program = new Command();
+program.name("getsyntux").description("The declarative generative-UI library.");
+program.addCommand(initCommand);
+program.addCommand(generateDefsCommand);
+
+const args = process.argv.slice(2);
+if(args.length === 0) process.argv.splice(2, 0, "init");
+
+program.parse(process.argv);

package/dist/bin/cli.mjs

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import n from"fs-extra";import s,{dirname as m}from"path";import{execSync as p}from"child_process";import r from"prompts";import e from"chalk";import{fileURLToPath as y}from"url";var d=y(import.meta.url),u=m(d);function f(t){return n.existsSync(s.join(t,"yarn.lock"))?"yarn":n.existsSync(s.join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function x(t){return t==="yarn"?"yarn add getsyntux":t==="pnpm"?"pnpm add getsyntux":"npm install getsyntux"}var l=process.cwd(),c=s.join(l,"package.json");n.existsSync(c)||(console.log(e.magenta("getsyntux")+": "+e.red("Failed to find package.json. Run this command from your project root.")),process.exit(1));var i=JSON.parse(n.readFileSync(c,"utf8")),h={...i.dependencies,...i.devDependencies};if(h.getsyntux)console.log(e.magenta("getsyntux")+": library has already been installed. Continuing...");else{console.log(e.magenta("getsyntux")+": library not detected in package.json. Please install to continue...");let t=f(l),a=x(t);(await r({type:"select",name:"install",message:`Run ${a}?`,choices:[{title:"Yes"},{title:"No"}]})).install!==0&&(console.log(e.magenta("getsyntux")+": installation cancelled."),process.exit(0));try{p(a,{stdio:"inherit"}),console.log(e.magenta("getsyntux")+": installed from "+e.green(t)+" successfully.")}catch{console.log(e.magenta("getsyntux")+": installation "+e.red("failed")+" from "+t+"."),process.exit(1)}}var g=s.resolve(u,"../templates"),o=s.resolve(process.cwd(),"lib/getsyntux");n.existsSync(g)||(console.log(e.magenta("getsyntux")+": "+e.red("failed to find template directory. This is not your fault.")),process.exit(1));console.log(e.magenta("getsyntux")+": generating files...");n.existsSync(o)&&n.readdirSync(o).length>0&&(console.log(e.magenta("getsyntux")+": target directory lib/getsyntux already contains files."),(await r({type:"select",name:"copy",message:"Empty directory?",choices:[{title:"Yes"},{title:"No"}]})).copy!==0&&(console.log(e.magenta("getsyntux")+": installation cancelled."),process.exit(0)),n.emptyDirSync(o));n.copySync(g,o,{overwrite:!0,errorOnExist:!1});console.log(e.magenta("getsyntux")+": "+e.green("installation complete."));
+import{Command as J}from"commander";import{Command as v}from"commander";import o from"fs-extra";import l,{dirname as b}from"path";import{execSync as N}from"child_process";import C from"prompts";import m from"chalk";import k from"chalk";function t(c){console.log(k.magenta("getsyntux")+": "+c)}import{fileURLToPath as D}from"url";var P=new v("init").description("Initialize the project").action(async()=>{let c=D(import.meta.url),g=b(c);function u(e){return o.existsSync(l.join(e,"yarn.lock"))?"yarn":o.existsSync(l.join(e,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(e){return e==="yarn"?"yarn add getsyntux":e==="pnpm"?"pnpm add getsyntux":"npm install getsyntux"}let i=process.cwd(),r=l.join(i,"package.json");o.existsSync(r)||(t(m.red("Failed to find package.json. Run this command from your project root.")),process.exit(1));let f=JSON.parse(o.readFileSync(r,"utf8"));if({...f.dependencies,...f.devDependencies}.getsyntux)t("library has already been installed. Continuing...");else{t("library not detected in package.json. Please install to continue...");let e=u(i),n=y(e);(await C({type:"select",name:"install",message:`Run ${n}?`,choices:[{title:"Yes"},{title:"No"}]})).install!==0&&(t("installation cancelled."),process.exit(0));try{N(n,{stdio:"inherit"}),t("installed from "+m.green(e)+" successfully.")}catch{t("installation "+m.red("failed")+" from "+e+"."),process.exit(1)}}let p=l.resolve(g,"../templates"),a=l.resolve(process.cwd(),"lib/getsyntux");o.existsSync(p)||(t(m.red("failed to find template directory. This is not your fault.")),process.exit(1)),t("generating files..."),o.existsSync(a)&&o.readdirSync(a).length>0&&(t("target directory lib/getsyntux already contains files."),(await C({type:"select",name:"copy",message:"Empty directory?",choices:[{title:"Yes"},{title:"No"}]})).copy!==0&&(t("installation cancelled."),process.exit(0)),o.emptyDirSync(a)),o.copySync(p,a,{overwrite:!0,errorOnExist:!1}),t(m.green("installation complete."))}),S=P;import{Command as E}from"commander";import w from"path";import{withCustomConfig as R}from"react-docgen-typescript";import _ from"prompts";import $ from"chalk";import F from"fs-extra";var I=new E("generate-defs").description("Generate a definition for a component").argument("<path>","path to component file").action(async c=>{let g=process.cwd(),u=w.join(g,"tsconfig.json"),y=R(u,{shouldExtractLiteralValuesFromEnum:!0}),i=w.resolve(c);F.existsSync(i)||(t("file ["+i+"] "+$.red("not found.")),process.exit(1)),t("parsing file...");let r=y.parse(i);r.length==0&&(t("there are no components with props in that file. Stopping now."),process.exit(0)),t(`found ${r.length} component(s) with prop definitions [${r.map(e=>e.displayName).join(", ")}]`);function f(e){let n=Object.entries(e).map(([s,x])=>`${s}${x.required?"":"?"}: ${x.type.name}`).join(", ");return n?"{ "+n+" }":"{}"}let h=[],p=0;for(let e of r){t($.bold(`component #${p+1}`)+": "+e.displayName);let n=await _({type:"text",name:"userContext",message:"What does this component do? (optional)"});h.push(n.userContext.replaceAll('"','\\"')),p++}function a(e,n,s){return s?`{ name: "${e.displayName}", props: "${n}", component: ${e.displayName}, context: "${s}" }`:`{ name: "${e.displayName}", props: "${n}", component: ${e.displayName} }`}console.log(),t("generated definitions (safe to copy & paste directly):"),r.forEach((e,n)=>{let s=f(e.props);console.log(a(e,s,h[n])+", ")})}),j=I;var d=new J;d.name("getsyntux").description("The declarative generative-UI library.");d.addCommand(S);d.addCommand(j);var O=process.argv.slice(2);O.length===0&&process.argv.splice(2,0,"init");d.parse(process.argv);
 //# sourceMappingURL=cli.mjs.map

package/dist/bin/cli.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bin/cli.mjs"],"sourcesContent":["#!/usr/bin/env node\r\n\r\nimport fs from 'fs-extra';\r\nimport path, { dirname } from 'path';\r\nimport { execSync } from 'child_process';\r\nimport prompts from 'prompts';\r\nimport chalk from 'chalk';\r\n\r\nimport { fileURLToPath } from 'url';\r\n\r\nconst __filename = fileURLToPath(import.meta.url);\r\nconst __dirname = dirname(__filename);\r\n\r\nfunction getPackageManager(root) {\r\n    if (fs.existsSync(path.join(root, 'yarn.lock'))) return 'yarn';\r\n    if (fs.existsSync(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';\r\n    return 'npm';\r\n}\r\n\r\nfunction getInstallCommand(manager) {\r\n    if (manager === \"yarn\") return \"yarn add getsyntux\";\r\n    if (manager === \"pnpm\") return \"pnpm add getsyntux\";\r\n    return \"npm install getsyntux\";\r\n}\r\n\r\nconst userRoot = process.cwd();\r\nconst packageJsonPath = path.join(userRoot, 'package.json');\r\n\r\nif (!fs.existsSync(packageJsonPath)) {\r\n    console.log(chalk.magenta('getsyntux') + ': ' + chalk.red('Failed to find package.json. Run this command from your project root.'));\r\n    process.exit(1);\r\n}\r\n\r\nconst packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\r\nconst allDeps = {\r\n    ...packageJson.dependencies,\r\n    ...packageJson.devDependencies\r\n};\r\n\r\nif (allDeps['getsyntux']) {\r\n    console.log(chalk.magenta('getsyntux') + `: library has already been installed. Continuing...`);\r\n} else {\r\n    console.log(chalk.magenta('getsyntux') + `: library not detected in package.json. Please install to continue...`);\r\n    const packageManager = getPackageManager(userRoot);\r\n    const command = getInstallCommand(packageManager);\r\n    const response = await prompts({\r\n        type: 'select',\r\n        name: 'install',\r\n        message: `Run ${command}?`,\r\n        choices: [{ title: 'Yes' }, { title: 'No' }],\r\n    })\r\n\r\n    if (response.install !== 0) {\r\n        console.log(chalk.magenta('getsyntux') + ': installation cancelled.');\r\n        process.exit(0);\r\n    }\r\n\r\n    try {\r\n        execSync(command, { stdio: 'inherit' });\r\n        console.log(chalk.magenta('getsyntux') + ': installed from ' + chalk.green(packageManager) + ' successfully.');\r\n    } catch (error) {\r\n        console.log(chalk.magenta('getsyntux') + ': installation ' + chalk.red('failed') + ' from ' + packageManager + '.');\r\n        process.exit(1);\r\n    }\r\n}\r\n\r\nconst templateDir = path.resolve(__dirname, '../templates')\r\nconst targetDir = path.resolve(process.cwd(), 'lib/getsyntux');\r\n\r\nif (!fs.existsSync(templateDir)) {\r\n    console.log(chalk.magenta('getsyntux') + ': ' + chalk.red(\"failed to find template directory. This is not your fault.\"));\r\n    process.exit(1);\r\n}\r\n\r\nconsole.log(chalk.magenta('getsyntux') + ': generating files...');\r\n\r\nif(fs.existsSync(targetDir)){\r\n    const files = fs.readdirSync(targetDir);\r\n    if(files.length > 0){\r\n        console.log(chalk.magenta('getsyntux') + `: target directory lib/getsyntux already contains files.`);\r\n        const response = await prompts({\r\n            type: 'select',\r\n            name: 'copy',\r\n            message: `Empty directory?`,\r\n            choices: [{ title: 'Yes' }, { title: 'No' }],\r\n        })\r\n    \r\n        if (response.copy !== 0) {\r\n            console.log(chalk.magenta('getsyntux') + ': installation cancelled.');\r\n            process.exit(0);\r\n        }\r\n\r\n        fs.emptyDirSync(targetDir);\r\n    }\r\n}\r\n\r\nfs.copySync(templateDir, targetDir, {\r\n    overwrite: true,\r\n    errorOnExist: false\r\n})\r\nconsole.log(chalk.magenta('getsyntux') + ': ' + chalk.green('installation complete.'));"],"mappings":";AAEA,OAAOA,MAAQ,WACf,OAAOC,GAAQ,WAAAC,MAAe,OAC9B,OAAS,YAAAC,MAAgB,gBACzB,OAAOC,MAAa,UACpB,OAAOC,MAAW,QAElB,OAAS,iBAAAC,MAAqB,MAE9B,IAAMC,EAAaD,EAAc,YAAY,GAAG,EAC1CE,EAAYN,EAAQK,CAAU,EAEpC,SAASE,EAAkBC,EAAM,CAC7B,OAAIV,EAAG,WAAWC,EAAK,KAAKS,EAAM,WAAW,CAAC,EAAU,OACpDV,EAAG,WAAWC,EAAK,KAAKS,EAAM,gBAAgB,CAAC,EAAU,OACtD,KACX,CAEA,SAASC,EAAkBC,EAAS,CAChC,OAAIA,IAAY,OAAe,qBAC3BA,IAAY,OAAe,qBACxB,uBACX,CAEA,IAAMC,EAAW,QAAQ,IAAI,EACvBC,EAAkBb,EAAK,KAAKY,EAAU,cAAc,EAErDb,EAAG,WAAWc,CAAe,IAC9B,QAAQ,IAAIT,EAAM,QAAQ,WAAW,EAAI,KAAOA,EAAM,IAAI,uEAAuE,CAAC,EAClI,QAAQ,KAAK,CAAC,GAGlB,IAAMU,EAAc,KAAK,MAAMf,EAAG,aAAac,EAAiB,MAAM,CAAC,EACjEE,EAAU,CACZ,GAAGD,EAAY,aACf,GAAGA,EAAY,eACnB,EAEA,GAAIC,EAAQ,UACR,QAAQ,IAAIX,EAAM,QAAQ,WAAW,EAAI,qDAAqD,MAC3F,CACH,QAAQ,IAAIA,EAAM,QAAQ,WAAW,EAAI,uEAAuE,EAChH,IAAMY,EAAiBR,EAAkBI,CAAQ,EAC3CK,EAAUP,EAAkBM,CAAc,GAC/B,MAAMb,EAAQ,CAC3B,KAAM,SACN,KAAM,UACN,QAAS,OAAOc,CAAO,IACvB,QAAS,CAAC,CAAE,MAAO,KAAM,EAAG,CAAE,MAAO,IAAK,CAAC,CAC/C,CAAC,GAEY,UAAY,IACrB,QAAQ,IAAIb,EAAM,QAAQ,WAAW,EAAI,2BAA2B,EACpE,QAAQ,KAAK,CAAC,GAGlB,GAAI,CACAF,EAASe,EAAS,CAAE,MAAO,SAAU,CAAC,EACtC,QAAQ,IAAIb,EAAM,QAAQ,WAAW,EAAI,oBAAsBA,EAAM,MAAMY,CAAc,EAAI,gBAAgB,CACjH,MAAgB,CACZ,QAAQ,IAAIZ,EAAM,QAAQ,WAAW,EAAI,kBAAoBA,EAAM,IAAI,QAAQ,EAAI,SAAWY,EAAiB,GAAG,EAClH,QAAQ,KAAK,CAAC,CAClB,CACJ,CAEA,IAAME,EAAclB,EAAK,QAAQO,EAAW,cAAc,EACpDY,EAAYnB,EAAK,QAAQ,QAAQ,IAAI,EAAG,eAAe,EAExDD,EAAG,WAAWmB,CAAW,IAC1B,QAAQ,IAAId,EAAM,QAAQ,WAAW,EAAI,KAAOA,EAAM,IAAI,4DAA4D,CAAC,EACvH,QAAQ,KAAK,CAAC,GAGlB,QAAQ,IAAIA,EAAM,QAAQ,WAAW,EAAI,uBAAuB,EAE7DL,EAAG,WAAWoB,CAAS,GACRpB,EAAG,YAAYoB,CAAS,EAC7B,OAAS,IACd,QAAQ,IAAIf,EAAM,QAAQ,WAAW,EAAI,0DAA0D,GAClF,MAAMD,EAAQ,CAC3B,KAAM,SACN,KAAM,OACN,QAAS,mBACT,QAAS,CAAC,CAAE,MAAO,KAAM,EAAG,CAAE,MAAO,IAAK,CAAC,CAC/C,CAAC,GAEY,OAAS,IAClB,QAAQ,IAAIC,EAAM,QAAQ,WAAW,EAAI,2BAA2B,EACpE,QAAQ,KAAK,CAAC,GAGlBL,EAAG,aAAaoB,CAAS,GAIjCpB,EAAG,SAASmB,EAAaC,EAAW,CAChC,UAAW,GACX,aAAc,EAClB,CAAC,EACD,QAAQ,IAAIf,EAAM,QAAQ,WAAW,EAAI,KAAOA,EAAM,MAAM,wBAAwB,CAAC","names":["fs","path","dirname","execSync","prompts","chalk","fileURLToPath","__filename","__dirname","getPackageManager","root","getInstallCommand","manager","userRoot","packageJsonPath","packageJson","allDeps","packageManager","command","templateDir","targetDir"]}
+{"version":3,"sources":["../../src/bin/cli.mjs","../../src/bin/commands/init.mjs","../../src/bin/cli_util.mjs","../../src/bin/commands/generate.mjs"],"sourcesContent":["#!/usr/bin/env node\r\n\r\nimport { Command } from \"commander\";\r\nimport initCommand from \"./commands/init.mjs\";\r\nimport generateDefsCommand from \"./commands/generate.mjs\";\r\n\r\nconst program = new Command();\r\nprogram.name(\"getsyntux\").description(\"The declarative generative-UI library.\")\r\nprogram.addCommand(initCommand)\r\nprogram.addCommand(generateDefsCommand)\r\n\r\nconst args = process.argv.slice(2)\r\nif(args.length === 0) process.argv.splice(2, 0, \"init\")\r\n\r\nprogram.parse(process.argv)","/**\r\n * initialization command\r\n */\r\n\r\nimport { Command } from \"commander\";\r\n\r\nimport fs from 'fs-extra';\r\nimport path, { dirname } from 'path';\r\nimport { execSync } from 'child_process';\r\nimport prompts from 'prompts';\r\nimport chalk from 'chalk';\r\n\r\nimport { log } from \"../cli_util.mjs\";\r\n\r\nimport { fileURLToPath } from 'url';\r\n\r\nconst initCommand = new Command(\"init\").description(\"Initialize the project\").action(async () => {\r\n    const __filename = fileURLToPath(import.meta.url);\r\n    const __dirname = dirname(__filename);\r\n\r\n    function getPackageManager(root) {\r\n        if (fs.existsSync(path.join(root, 'yarn.lock'))) return 'yarn';\r\n        if (fs.existsSync(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';\r\n        return 'npm';\r\n    }\r\n\r\n    function getInstallCommand(manager) {\r\n        if (manager === \"yarn\") return \"yarn add getsyntux\";\r\n        if (manager === \"pnpm\") return \"pnpm add getsyntux\";\r\n        return \"npm install getsyntux\";\r\n    }\r\n\r\n    /**\r\n     * verifying\r\n     */\r\n\r\n    const userRoot = process.cwd();\r\n    const packageJsonPath = path.join(userRoot, 'package.json');\r\n\r\n    if (!fs.existsSync(packageJsonPath)) {\r\n        log(chalk.red('Failed to find package.json. Run this command from your project root.'));\r\n        process.exit(1);\r\n    }\r\n\r\n    /**\r\n     * installing\r\n     */\r\n\r\n    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));\r\n    const allDeps = {\r\n        ...packageJson.dependencies,\r\n        ...packageJson.devDependencies\r\n    };\r\n\r\n    if (allDeps['getsyntux']) {\r\n        log('library has already been installed. Continuing...');\r\n    } else {\r\n        log('library not detected in package.json. Please install to continue...');\r\n        const packageManager = getPackageManager(userRoot);\r\n        const command = getInstallCommand(packageManager);\r\n        const response = await prompts({\r\n            type: 'select',\r\n            name: 'install',\r\n            message: `Run ${command}?`,\r\n            choices: [{ title: 'Yes' }, { title: 'No' }],\r\n        })\r\n\r\n        if (response.install !== 0) {\r\n            log('installation cancelled.');\r\n            process.exit(0);\r\n        }\r\n\r\n        try {\r\n            execSync(command, { stdio: 'inherit' });\r\n            log('installed from ' + chalk.green(packageManager) + ' successfully.');\r\n        } catch (error) {\r\n            log('installation ' + chalk.red('failed') + ' from ' + packageManager + '.');\r\n            process.exit(1);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * copying\r\n     */\r\n\r\n    const templateDir = path.resolve(__dirname, '../templates')\r\n    const targetDir = path.resolve(process.cwd(), 'lib/getsyntux');\r\n\r\n    if (!fs.existsSync(templateDir)) {\r\n        log(chalk.red(\"failed to find template directory. This is not your fault.\"));\r\n        process.exit(1);\r\n    }\r\n\r\n    log('generating files...');\r\n\r\n    if (fs.existsSync(targetDir)) {\r\n        const files = fs.readdirSync(targetDir);\r\n        if (files.length > 0) {\r\n            log('target directory lib/getsyntux already contains files.');\r\n            const response = await prompts({\r\n                type: 'select',\r\n                name: 'copy',\r\n                message: `Empty directory?`,\r\n                choices: [{ title: 'Yes' }, { title: 'No' }],\r\n            })\r\n\r\n            if (response.copy !== 0) {\r\n                log('installation cancelled.');\r\n                process.exit(0);\r\n            }\r\n\r\n            fs.emptyDirSync(targetDir);\r\n        }\r\n    }\r\n\r\n    fs.copySync(templateDir, targetDir, {\r\n        overwrite: true,\r\n        errorOnExist: false\r\n    })\r\n    log(chalk.green('installation complete.'));\r\n})\r\n\r\nexport default initCommand;","import chalk from \"chalk\";\r\n\r\nexport function log(msg){\r\n    console.log(chalk.magenta('getsyntux') + ': '+ msg)\r\n}","/**\r\n * schema generation command\r\n*/\r\nimport { Command } from \"commander\";\r\n\r\nimport path from \"path\";\r\nimport { withCustomConfig } from \"react-docgen-typescript\";\r\n\r\nimport prompts from 'prompts';\r\nimport chalk from 'chalk';\r\nimport fs from 'fs-extra';\r\n\r\nimport { log } from \"../cli_util.mjs\";\r\n\r\nconst generateDefsCommand = new Command(\"generate-defs\").description(\"Generate a definition for a component\")\r\n    .argument('<path>', 'path to component file')\r\n    .action(async (rawPath) => {\r\n        const userRoot = process.cwd()\r\n        const tsConfigPath = path.join(userRoot, \"tsconfig.json\")\r\n\r\n        const parser = withCustomConfig(tsConfigPath, {\r\n            shouldExtractLiteralValuesFromEnum: true,\r\n        })\r\n\r\n        const filePath = path.resolve(rawPath);\r\n\r\n        if (!fs.existsSync(filePath)) {\r\n            log('file [' + filePath + '] ' + chalk.red('not found.'))\r\n            process.exit(1)\r\n        }\r\n\r\n        log('parsing file...')\r\n        const docs = parser.parse(filePath);\r\n\r\n        if (docs.length == 0) {\r\n            log('there are no components with props in that file. Stopping now.')\r\n            process.exit(0)\r\n        }\r\n\r\n        log(`found ${docs.length} component(s) with prop definitions [${docs.map(e => e.displayName).join(', ')}]`)\r\n\r\n        function generatePropSignature(props) {\r\n            const signature = Object.entries(props).map(([key, value]) => {\r\n                return `${key}${value.required ? '' : '?'}: ${value.type.name}`\r\n            }).join(', ')\r\n\r\n            if (!signature) return '{}' // usually for class components\r\n            return '{ ' + signature + ' }';\r\n        }\r\n\r\n        const userContexts = []\r\n\r\n        let index = 0;\r\n        for (const component of docs) {\r\n            log(chalk.bold(`component #${index + 1}`) + \": \" + component.displayName)\r\n            const response = await prompts({\r\n                type: 'text',\r\n                name: 'userContext',\r\n                message: 'What does this component do? (optional)'\r\n            })\r\n\r\n            userContexts.push(response.userContext.replaceAll('\"', '\\\\\"'))\r\n            index++;\r\n        }\r\n\r\n        function generateSignature(component, props, userContext) {\r\n            if (!userContext) {\r\n                return `{ name: \"${component.displayName}\", props: \"${props}\", component: ${component.displayName} }`;\r\n            } else {\r\n                return `{ name: \"${component.displayName}\", props: \"${props}\", component: ${component.displayName}, context: \"${userContext}\" }`;\r\n            }\r\n        }\r\n\r\n        console.log()\r\n        log('generated definitions (safe to copy & paste directly):')\r\n        docs.forEach((component, index) => {\r\n            const props = generatePropSignature(component.props);\r\n            console.log(generateSignature(component, props, userContexts[index]) + \", \");\r\n        })\r\n    })\r\n\r\nexport default generateDefsCommand;"],"mappings":"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","names":["Command","Command","fs","path","dirname","execSync","prompts","chalk","chalk","log","msg","fileURLToPath","initCommand","Command","__filename","__dirname","dirname","getPackageManager","root","fs","path","getInstallCommand","manager","userRoot","packageJsonPath","log","chalk","packageJson","packageManager","command","prompts","execSync","templateDir","targetDir","init_default","Command","path","withCustomConfig","prompts","chalk","fs","generateDefsCommand","Command","rawPath","userRoot","tsConfigPath","path","parser","withCustomConfig","filePath","fs","log","chalk","docs","generatePropSignature","props","signature","key","value","userContexts","index","component","response","prompts","generateSignature","userContext","generate_default","program","Command","init_default","generate_default","args"]}

package/dist/client.d.mts

@@ -1,12 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StreamableValue } from '@ai-sdk/rsc';
-import react__default, { ComponentType } from 'react';
+import react__default, { JSX, ComponentType } from 'react';
 import { C as ComponentMap, b as ChildrenMap } from './types-DejIW5JZ.mjs';
 
-declare function GeneratedClient({ value, allowedComponents, inputStream }: {
+/**
+ * Client wrapper for Renderer that handles streaming and parsing with server.
+ */
+declare function GeneratedClient({ value, allowedComponents, inputStream, placeholder }: {
     value: any;
     allowedComponents: Record<string, react__default.ComponentType<any> | string>;
     inputStream: StreamableValue<string>;
+    placeholder?: JSX.Element;
 }): react_jsx_runtime.JSX.Element;
 
 interface RendererProps {
@@ -17,6 +21,9 @@ interface RendererProps {
     global: any;
     local: any;
 }
+/**
+ * Renders a UISchema recursively, in accordance to the spec.
+ */
 declare function Renderer(props: RendererProps): react_jsx_runtime.JSX.Element;
 
 export { GeneratedClient, Renderer, type RendererProps };

package/dist/client.mjs

@@ -1,3 +1,3 @@
-"use client";import{readStreamableValue as x}from"@ai-sdk/rsc";import{useEffect as N,useRef as _,useState as R}from"react";import{Fragment as k}from"react";import{Fragment as S,jsx as l,jsxs as v}from"react/jsx-runtime";import{createElement as U}from"react";var b=(t,n)=>n==="$"?t:n.split(".").reduce((e,o)=>e==null?void 0:e[o],t),y=(t,n,e)=>e.startsWith("$item.")?(e=e.slice(6),b(n,e)):e==="$item"?n:b(t,e),C=(t,n,e)=>e&&("$bind"in e?y(t,n,e.$bind):(Object.keys(e).forEach(o=>{let a=e[o];typeof a=="object"&&(e[o]=C(t,n,a))}),e)),M=(t,n,e)=>typeof e=="object"?y(t,n,e.$bind):e,T=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);function d(t){var g;let{id:n,componentMap:e,childrenMap:o,global:a,local:i,allowedComponents:f}=t,r=e[n];if(r.type==="TEXT")return l(S,{children:M(a,i,r.content)});let h=(g=r.props)==null?void 0:g.source;if(r.type==="__ForEach__"&&h){let p=y(a,i,h);if(!Array.isArray(p))return null;let c=o[r.id];return l(S,{children:c==null?void 0:c.map((w,P)=>l(k,{children:p.map((E,$)=>U(d,{...t,id:w,local:E,key:$}))},P))})}let s=f[r.type]||r.type,m=C(a,i,r.props);return typeof s=="string"&&T.has(s)?l(s,{...m}):v(s,{...m,children:[M(a,i,r.content),o[r.id]&&o[r.id].map((p,c)=>l(d,{...t,id:p},c))]})}var u=class{buffer="";schema={childrenMap:{},componentMap:{},root:null};addDelta(n){this.buffer+=n;let e=this.buffer.split(`
-`);e.length>1&&(e.slice(0,e.length-1).forEach(o=>this.handleLine(o)),this.buffer=e[e.length-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=""}};import{Fragment as A,jsx as I}from"react/jsx-runtime";function B({value:t,allowedComponents:n,inputStream:e}){let[o,a]=R(""),[i,f]=R(),r=_(null);return N(()=>{r.current||(r.current=new u),(async()=>{for await(let s of x(e))a(m=>m+s),r.current&&s!==void 0&&(r.current.addDelta(s),f(r.current.schema))})()},[e]),I(A,{children:(i==null?void 0:i.root)&&I(d,{id:i.root.id,componentMap:i.componentMap,childrenMap:i.childrenMap,allowedComponents:n,global:t,local:t})})}export{B as GeneratedClient,d as Renderer};
+"use client";import{readStreamableValue as N}from"@ai-sdk/rsc";import{useEffect as _,useRef as A,useState as I}from"react";import{Fragment as T}from"react";import{Fragment as C,jsx as d,jsxs as x}from"react/jsx-runtime";import{createElement as v}from"react";var S=(t,n)=>n==="$"?t:n.split(".").reduce((e,r)=>e==null?void 0:e[r],t),g=(t,n,e)=>e.startsWith("$item.")?(e=e.slice(6),S(n,e)):e==="$item"?n:S(t,e),R=(t,n,e)=>e&&("$bind"in e?g(t,n,e.$bind):(Object.keys(e).forEach(r=>{let a=e[r];typeof a=="object"&&(e[r]=R(t,n,a))}),e)),M=(t,n,e)=>typeof e=="object"?g(t,n,e.$bind):e,U=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);function h(t){var u;let{id:n,componentMap:e,childrenMap:r,global:a,local:l,allowedComponents:i}=t,o=e[n];if(o.type==="TEXT")return d(C,{children:M(a,l,o.content)});let s=(u=o.props)==null?void 0:u.source;if(o.type==="__ForEach__"&&s){let f=g(a,l,s);if(!Array.isArray(f))return null;let p=r[o.id];return d(C,{children:p==null?void 0:p.map((E,P)=>d(T,{children:f.map(($,k)=>v(h,{...t,id:E,local:$,key:k}))},P))})}let m=i[o.type]||o.type,c=R(a,l,o.props);return typeof m=="string"&&U.has(m)?d(m,{...c}):x(m,{...c,children:[M(a,l,o.content),r[o.id]&&r[o.id].map((f,p)=>d(h,{...t,id:f},p))]})}var y=class{buffer="";schema={childrenMap:{},componentMap:{},root:null};addDelta(n){this.buffer+=n;let e=this.buffer.split(`
+`);e.length>1&&(e.slice(0,e.length-1).forEach(r=>this.handleLine(r)),this.buffer=e[e.length-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=""}};import{Fragment as w,jsx as b}from"react/jsx-runtime";function H({value:t,allowedComponents:n,inputStream:e,placeholder:r}){let[a,l]=I(""),[i,o]=I(),s=A(null);return _(()=>{s.current||(s.current=new y),(async()=>{for await(let c of N(e))l(u=>u+c),s.current&&c!==void 0&&(s.current.addDelta(c),o(s.current.schema))})()},[e]),b(w,{children:i!=null&&i.root?b(h,{id:i.root.id,componentMap:i.componentMap,childrenMap:i.childrenMap,allowedComponents:n,global:t,local:t}):b(w,{children:r})})}export{H as GeneratedClient,h as Renderer};
 //# sourceMappingURL=client.mjs.map

package/dist/client.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client/GeneratedClient.tsx","../src/client/Renderer.tsx","../src/ResponseParser.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { StreamableValue, readStreamableValue } from '@ai-sdk/rsc';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { Renderer } from './Renderer';\r\nimport { ResponseParser } from '../ResponseParser';\r\nimport { UISchema } from '../types';\r\n\r\nexport function GeneratedClient({\r\n  value,\r\n  allowedComponents,\r\n  inputStream\r\n}: {\r\n  value: any,\r\n  allowedComponents: Record<string, React.ComponentType<any> | string>,\r\n  inputStream: StreamableValue<string>\r\n}) {\r\n  const [message, setMessage] = useState('');\r\n  const [schema, setUISchema] = useState<UISchema | null>();\r\n  const parser = useRef<ResponseParser | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (!parser.current) {\r\n      parser.current = new ResponseParser();\r\n    }\r\n\r\n    const parseStream = async () => {\r\n      for await (const delta of readStreamableValue(inputStream)) {\r\n        setMessage((prev) => prev + delta);\r\n        if (parser.current && delta !== undefined) {\r\n          parser.current.addDelta(delta);\r\n          setUISchema(parser.current.schema);\r\n        }\r\n      }\r\n    };\r\n\r\n    parseStream();\r\n  }, [inputStream]);\r\n\r\n  return (\r\n    <>\r\n      {schema?.root && <Renderer id={schema.root.id} componentMap={schema.componentMap} childrenMap={schema.childrenMap} allowedComponents={allowedComponents} global={value} local={value} />}\r\n    </>\r\n  )\r\n}\r\n","\"use client\";\r\n\r\nimport { ComponentType, Fragment } from 'react'\r\nimport { ChildrenMap, ComponentMap, SchemaNode } from '../types';\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\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\nconst resolveProps = (global: any, local: any, props: any) => {\r\n    if (!props) return props;\r\n    if (\"$bind\" in props) return get(global, local, props.$bind); // $bind may be falsy value\r\n    Object.keys(props).forEach((key) => {\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\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}\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\nconst voidElements = new Set([\r\n    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',\r\n    'link', 'meta', 'param', 'source', 'track', 'wbr'\r\n])\r\n\r\nexport function Renderer(props: RendererProps) {\r\n    const {\r\n        id, componentMap, childrenMap, global, local, allowedComponents\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    if(typeof Component === \"string\" && voidElements.has(Component)){\r\n        return <Component  {...componentProps} />\r\n    }\r\n\r\n    return <Component {...componentProps}>\r\n        {renderContent(global, local, element.content)}\r\n        {childrenMap[element.id] && 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    </Component>\r\n}\r\n","import { SchemaNode, UISchema } from \"./types\";\r\n\r\nexport class ResponseParser {\r\n    buffer = \"\";\r\n    schema: UISchema = {\r\n        childrenMap: {},\r\n        componentMap: {},\r\n        root: null\r\n    }\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        }\r\n    }\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    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}"],"mappings":"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","names":["readStreamableValue","useEffect","useRef","useState","Fragment","jsx","jsxs","createElement","resolvePath","obj","path","acc","curr","get","global","local","resolveProps","props","key","val","renderContent","content","voidElements","Renderer","_a","id","componentMap","childrenMap","allowedComponents","element","sourceArrPath","sourceArr","childrenArr","childId","index","item","index1","Component","componentProps","ResponseParser","delta","split","line","node","childrenMap","componentMap","Fragment","jsx","GeneratedClient","value","allowedComponents","inputStream","message","setMessage","useState","schema","setUISchema","parser","useRef","useEffect","ResponseParser","delta","readStreamableValue","prev","Renderer"]}
+{"version":3,"sources":["../src/client/GeneratedClient.tsx","../src/client/Renderer.tsx","../src/ResponseParser.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { StreamableValue, readStreamableValue } from '@ai-sdk/rsc';\r\nimport React, { JSX, useEffect, useRef, useState } from 'react';\r\nimport { Renderer } from './Renderer';\r\nimport { ResponseParser } from '../ResponseParser';\r\nimport { UISchema } from '../types';\r\n\r\n/**\r\n * Client wrapper for Renderer that handles streaming and parsing with server.\r\n */\r\nexport function GeneratedClient({\r\n  value,\r\n  allowedComponents,\r\n  inputStream,\r\n  placeholder\r\n}: {\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}) {\r\n  const [message, setMessage] = useState('');\r\n  const [schema, setUISchema] = useState<UISchema | null>();\r\n  const parser = useRef<ResponseParser | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (!parser.current) {\r\n      parser.current = new ResponseParser();\r\n    }\r\n\r\n    const parseStream = async () => {\r\n      for await (const delta of readStreamableValue(inputStream)) {\r\n        setMessage((prev) => prev + delta);\r\n        if (parser.current && delta !== undefined) {\r\n          parser.current.addDelta(delta);\r\n          setUISchema(parser.current.schema);\r\n        }\r\n      }\r\n    };\r\n\r\n    parseStream();\r\n  }, [inputStream]);\r\n\r\n  return (\r\n    <>\r\n      {schema?.root ?\r\n        <Renderer id={schema.root.id} componentMap={schema.componentMap} childrenMap={schema.childrenMap} allowedComponents={allowedComponents} global={value} local={value} />\r\n        : <>{placeholder}</>}\r\n    </>\r\n  )\r\n}\r\n","\"use client\";\r\n\r\nimport { ComponentType, Fragment } from 'react'\r\nimport { ChildrenMap, ComponentMap, SchemaNode } from '../types';\r\n\r\n/**\r\n * lightweight implementation of lodash.get\r\n */\r\nconst resolvePath = (obj: any, path: string) => {\r\n    if (path === '$') return obj;\r\n    return path.split('.').reduce((acc, curr) => acc?.[curr], obj)\r\n}\r\n\r\n/**\r\n * parses binding protocol and performs property lookup w/ scope resolution\r\n */\r\nconst get = (global: any, local: any, path: string) => {\r\n    if (path.startsWith(\"$item.\")) {\r\n        path = path.slice(6)\r\n        return resolvePath(local, path);\r\n    } else {\r\n        if (path === \"$item\") return local;\r\n        return resolvePath(global, path);\r\n    }\r\n}\r\n\r\n/**\r\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    if (\"$bind\" in props) return get(global, local, props.$bind); // $bind may be falsy value\r\n    Object.keys(props).forEach((key) => {\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\nconst voidElements = new Set([\r\n    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',\r\n    'link', 'meta', 'param', 'source', 'track', 'wbr'\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}\r\n\r\n/**\r\n * Renders a UISchema recursively, in accordance to the spec.\r\n */\r\nexport function Renderer(props: RendererProps) {\r\n    const {\r\n        id, componentMap, childrenMap, global, local, allowedComponents\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    if(typeof Component === \"string\" && voidElements.has(Component)){\r\n        return <Component  {...componentProps} />\r\n    }\r\n\r\n    return <Component {...componentProps}>\r\n        {renderContent(global, local, element.content)}\r\n        {childrenMap[element.id] && 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    </Component>\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     * @param delta delta from stream.\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        }\r\n    }\r\n\r\n    /**\r\n     * Parses a single line (full JSON object) and updates schema.\r\n     * Generally should not be used when streaming data.\r\n     */\r\n    handleLine(line: string) {\r\n        try {\r\n            const node: SchemaNode = JSON.parse(line);\r\n\r\n            const { childrenMap, componentMap } = this.schema;\r\n\r\n            componentMap[node.id] = node;\r\n            if (node.parentId === null) {\r\n                this.schema.root = node;\r\n            } else {\r\n                if (!childrenMap[node.parentId]) childrenMap[node.parentId] = []\r\n                childrenMap[node.parentId].push(node.id)\r\n            }\r\n        } catch (err) { /* probably markdown or generation inconsistency */ }\r\n    }\r\n\r\n    /**\r\n     * Clears the buffer and handles any remaining information within.\r\n     */\r\n    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}"],"mappings":"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","names":["readStreamableValue","useEffect","useRef","useState","Fragment","jsx","jsxs","createElement","resolvePath","obj","path","acc","curr","get","global","local","resolveProps","props","key","val","renderContent","content","voidElements","Renderer","_a","id","componentMap","childrenMap","allowedComponents","element","sourceArrPath","sourceArr","childrenArr","childId","index","item","index1","Component","componentProps","ResponseParser","delta","split","line","node","childrenMap","componentMap","Fragment","jsx","GeneratedClient","value","allowedComponents","inputStream","placeholder","message","setMessage","useState","schema","setUISchema","parser","useRef","useEffect","ResponseParser","delta","readStreamableValue","prev","Renderer"]}

package/dist/index.d.mts

@@ -25,11 +25,27 @@ declare function generateComponentMap(allowedComponents: (SyntuxComponent$1 | st
  */
 declare function constructInput({ value, components, hint }: GeneratedContentProps): string;
 
+/**
+ * Utility class for parsing UISchema from stream.
+ */
 declare class ResponseParser {
     buffer: string;
     schema: UISchema;
+    /**
+     * Update schema with latest data chunk.
+     *
+     * Handles multiline input gracefully; can be used to load entire schemas from cache.
+     * @param delta delta from stream.
+     */
     addDelta(delta: string): void;
+    /**
+     * Parses a single line (full JSON object) and updates schema.
+     * Generally should not be used when streaming data.
+     */
     handleLine(line: string): void;
+    /**
+     * Clears the buffer and handles any remaining information within.
+     */
     finish(): void;
 }
 

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, 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    const inputValue = JSON.stringify(value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${userContext || \"\"}</UserContext>\\n<Value>\\n${inputValue}</Value>`\r\n}","import { SchemaNode, UISchema } from \"./types\";\r\n\r\nexport class ResponseParser {\r\n    buffer = \"\";\r\n    schema: UISchema = {\r\n        childrenMap: {},\r\n        componentMap: {},\r\n        root: null\r\n    }\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        }\r\n    }\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    finish(){\r\n        this.handleLine(this.buffer);\r\n        this.buffer = \"\";\r\n    }\r\n}"],"mappings":"AAOO,SAASA,EAAqBC,EAAgD,CACjF,OAAOA,EAAkB,OAAO,CAACC,EAAwDC,IAClF,OAAOA,GAAS,UACfD,EAAIC,CAAI,EAAIA,EACLD,IAGXA,EAAIC,EAAK,IAAI,EAAIA,EAAK,UACfD,GACR,CAAC,CAAC,CACT,CAKO,SAASE,EAAe,CAC3B,MAAAC,EAAO,WAAAC,EAAY,KAAAC,CACvB,EAA0B,CACtB,IAAMN,GAAoBK,GAAA,YAAAA,EAAY,IAAKE,GACpC,OAAOA,GAAS,SAAiBA,EAC7BA,EAAK,MACb,KAAK,OAAQ,GAEVC,EAAmBH,GAAA,YAAAA,EAAY,OAAQE,GAAkC,OAAOA,GAAS,UACzFE,GAAmBD,GAAA,YAAAA,EAAkB,IAAKD,GACxCA,EAAK,QAGG,GAAGA,EAAK,IAAI,YAAYA,EAAK,KAAK,cAAcA,EAAK,OAAO,IAF5D,GAAGA,EAAK,IAAI,YAAYA,EAAK,KAAK,KAI/C,KAAK,OAAQ,GAEVG,EAAcJ,EACdK,EAAa,KAAK,UAAUP,CAAK,EAEvC,MAAO,sBAAsBJ,CAAiB;AAAA,oBAA2CS,CAAgB;AAAA,eAAqCC,GAAe,EAAE;AAAA;AAAA,EAA4BC,CAAU,UACzM,CCzCO,IAAMC,EAAN,KAAqB,CACxB,OAAS,GACT,OAAmB,CACf,YAAa,CAAC,EACd,aAAc,CAAC,EACf,KAAM,IACV,EAEA,SAASC,EAAe,CACpB,KAAK,QAAUA,EACf,IAAMC,EAAQ,KAAK,OAAO,MAAM;AAAA,CAAI,EAChCA,EAAM,OAAS,IACfA,EAAM,MAAM,EAAGA,EAAM,OAAS,CAAC,EAAE,QAASC,GAAS,KAAK,WAAWA,CAAI,CAAC,EACxE,KAAK,OAASD,EAAMA,EAAM,OAAS,CAAC,EAE5C,CAEA,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,CAEA,QAAQ,CACJ,KAAK,WAAW,KAAK,MAAM,EAC3B,KAAK,OAAS,EAClB,CACJ","names":["generateComponentMap","allowedComponents","acc","curr","constructInput","value","components","hint","item","customComponents","componentContext","userContext","inputValue","ResponseParser","delta","split","line","node","childrenMap","componentMap"]}
+{"version":3,"sources":["../src/util.ts","../src/ResponseParser.ts"],"sourcesContent":["import { GeneratedContentProps } from \"./templates/GeneratedUI\";\r\nimport { SyntuxComponent } from \"./types\";\r\n\r\n/**\r\n * Converts a list of components into a dictionary for fast-retrieval\r\n * during rendering.\r\n */\r\nexport function generateComponentMap(allowedComponents: (SyntuxComponent | string)[]){\r\n    return allowedComponents.reduce((acc: Record<string, React.ComponentType<any> | string>, curr: SyntuxComponent | string) => {\r\n        if(typeof curr === \"string\"){\r\n            acc[curr] = curr;\r\n            return acc;\r\n        }\r\n\r\n        acc[curr.name] = curr.component;\r\n        return acc;\r\n    }, {})\r\n}\r\n\r\n/**\r\n * Creates LLM input in accordance to the spec\r\n */\r\nexport function constructInput({\r\n    value, 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    const inputValue = JSON.stringify(value)\r\n\r\n    return `<AllowedComponents>${allowedComponents}</AllowedComponents>\\n<ComponentContext>${componentContext}</ComponentContext>\\n<UserContext>${userContext || \"\"}</UserContext>\\n<Value>\\n${inputValue}</Value>`\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     * @param delta delta from stream.\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        }\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,EAAgD,CACjF,OAAOA,EAAkB,OAAO,CAACC,EAAwDC,IAClF,OAAOA,GAAS,UACfD,EAAIC,CAAI,EAAIA,EACLD,IAGXA,EAAIC,EAAK,IAAI,EAAIA,EAAK,UACfD,GACR,CAAC,CAAC,CACT,CAKO,SAASE,EAAe,CAC3B,MAAAC,EAAO,WAAAC,EAAY,KAAAC,CACvB,EAA0B,CACtB,IAAMN,GAAoBK,GAAA,YAAAA,EAAY,IAAKE,GACpC,OAAOA,GAAS,SAAiBA,EAC7BA,EAAK,MACb,KAAK,OAAQ,GAEVC,EAAmBH,GAAA,YAAAA,EAAY,OAAQE,GAAkC,OAAOA,GAAS,UACzFE,GAAmBD,GAAA,YAAAA,EAAkB,IAAKD,GACxCA,EAAK,QAGG,GAAGA,EAAK,IAAI,YAAYA,EAAK,KAAK,cAAcA,EAAK,OAAO,IAF5D,GAAGA,EAAK,IAAI,YAAYA,EAAK,KAAK,KAI/C,KAAK,OAAQ,GAEVG,EAAcJ,EACdK,EAAa,KAAK,UAAUP,CAAK,EAEvC,MAAO,sBAAsBJ,CAAiB;AAAA,oBAA2CS,CAAgB;AAAA,eAAqCC,GAAe,EAAE;AAAA;AAAA,EAA4BC,CAAU,UACzM,CCtCO,IAAMC,EAAN,KAAqB,CACxB,OAAS,GAGT,OAAmB,CACf,YAAa,CAAC,EACd,aAAc,CAAC,EACf,KAAM,IACV,EAQA,SAASC,EAAe,CACpB,KAAK,QAAUA,EACf,IAAMC,EAAQ,KAAK,OAAO,MAAM;AAAA,CAAI,EAChCA,EAAM,OAAS,IACfA,EAAM,MAAM,EAAGA,EAAM,OAAS,CAAC,EAAE,QAASC,GAAS,KAAK,WAAWA,CAAI,CAAC,EACxE,KAAK,OAASD,EAAMA,EAAM,OAAS,CAAC,EAE5C,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","components","hint","item","customComponents","componentContext","userContext","inputValue","ResponseParser","delta","split","line","node","childrenMap","componentMap"]}

package/dist/metafile-esm.json

@@ -1 +1 @@
-{"inputs":{"src/types.ts":{"bytes":583,"imports":[],"format":"esm"},"src/util.ts":{"bytes":1656,"imports":[{"path":"./templates/GeneratedUI","kind":"import-statement","external":true},{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/ResponseParser.ts":{"bytes":1163,"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":3047,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"../types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/client/GeneratedClient.tsx":{"bytes":1373,"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./Renderer"},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"../ResponseParser"},{"path":"../types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/client.ts":{"bytes":92,"imports":[{"path":"src/client/GeneratedClient.tsx","kind":"import-statement","original":"./client/GeneratedClient"},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./client/Renderer"}],"format":"esm"},"src/bin/cli.mjs":{"bytes":3494,"imports":[{"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":"url","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":4734},"dist/index.mjs":{"imports":[],"exports":["ResponseParser","constructInput","generateComponentMap"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/util.ts":{"bytesInOutput":578},"src/ResponseParser.ts":{"bytesInOutput":473}},"bytes":1126},"dist/client.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10085},"dist/client.mjs":{"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["GeneratedClient","Renderer"],"entryPoint":"src/client.ts","inputs":{"src/client/GeneratedClient.tsx":{"bytesInOutput":572},"src/client/Renderer.tsx":{"bytesInOutput":1153},"src/ResponseParser.ts":{"bytesInOutput":473},"src/client.ts":{"bytesInOutput":0}},"bytes":2255},"dist/bin/cli.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":6062},"dist/bin/cli.mjs":{"imports":[{"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":"url","kind":"import-statement","external":true}],"exports":[],"entryPoint":"src/bin/cli.mjs","inputs":{"src/bin/cli.mjs":{"bytesInOutput":2132}},"bytes":2153}}}
+{"inputs":{"src/types.ts":{"bytes":583,"imports":[],"format":"esm"},"src/util.ts":{"bytes":1656,"imports":[{"path":"./templates/GeneratedUI","kind":"import-statement","external":true},{"path":"./types","kind":"import-statement","external":true}],"format":"esm"},"src/ResponseParser.ts":{"bytes":1744,"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":3397,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"../types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/client/GeneratedClient.tsx":{"bytes":1552,"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./Renderer"},{"path":"src/ResponseParser.ts","kind":"import-statement","original":"../ResponseParser"},{"path":"../types","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"format":"esm"},"src/client.ts":{"bytes":92,"imports":[{"path":"src/client/GeneratedClient.tsx","kind":"import-statement","original":"./client/GeneratedClient"},{"path":"src/client/Renderer.tsx","kind":"import-statement","original":"./client/Renderer"}],"format":"esm"},"src/bin/cli_util.mjs":{"bytes":115,"imports":[{"path":"chalk","kind":"import-statement","external":true}],"format":"esm"},"src/bin/commands/init.mjs":{"bytes":3700,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"child_process","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"src/bin/cli_util.mjs","kind":"import-statement","original":"../cli_util.mjs"},{"path":"url","kind":"import-statement","external":true}],"format":"esm"},"src/bin/commands/generate.mjs":{"bytes":2933,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"react-docgen-typescript","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"src/bin/cli_util.mjs","kind":"import-statement","original":"../cli_util.mjs"}],"format":"esm"},"src/bin/cli.mjs":{"bytes":482,"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"src/bin/commands/init.mjs","kind":"import-statement","original":"./commands/init.mjs"},{"path":"src/bin/commands/generate.mjs","kind":"import-statement","original":"./commands/generate.mjs"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":5351},"dist/index.mjs":{"imports":[],"exports":["ResponseParser","constructInput","generateComponentMap"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0},"src/util.ts":{"bytesInOutput":578},"src/ResponseParser.ts":{"bytesInOutput":473}},"bytes":1126},"dist/client.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11337},"dist/client.mjs":{"imports":[{"path":"@ai-sdk/rsc","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react/jsx-runtime","kind":"import-statement","external":true}],"exports":["GeneratedClient","Renderer"],"entryPoint":"src/client.ts","inputs":{"src/client/GeneratedClient.tsx":{"bytesInOutput":595},"src/client/Renderer.tsx":{"bytesInOutput":1153},"src/ResponseParser.ts":{"bytesInOutput":473},"src/client.ts":{"bytesInOutput":0}},"bytes":2278},"dist/bin/cli.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12417},"dist/bin/cli.mjs":{"imports":[{"path":"commander","kind":"import-statement","external":true},{"path":"commander","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"child_process","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"url","kind":"import-statement","external":true},{"path":"commander","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"react-docgen-typescript","kind":"import-statement","external":true},{"path":"prompts","kind":"import-statement","external":true},{"path":"chalk","kind":"import-statement","external":true},{"path":"fs-extra","kind":"import-statement","external":true}],"exports":[],"entryPoint":"src/bin/cli.mjs","inputs":{"src/bin/cli.mjs":{"bytesInOutput":250},"src/bin/commands/init.mjs":{"bytesInOutput":1851},"src/bin/cli_util.mjs":{"bytesInOutput":78},"src/bin/commands/generate.mjs":{"bytesInOutput":1443}},"bytes":3643}}}

package/dist/templates/GeneratedUI.tsx

@@ -31,7 +31,7 @@ export interface GeneratedContentProps {
 export async function GeneratedUI(props: GeneratedContentProps) {
   const input = constructInput(props);
 
-  const { value, model, components, cached, onGenerate } = props;
+  const { value, model, components, placeholder, cached, onGenerate } = props;
   
   const allowedComponents = generateComponentMap(components || []);
 
@@ -72,5 +72,5 @@ export async function GeneratedUI(props: GeneratedContentProps) {
     if(onGenerate) onGenerate(total);
   })()
 
-  return <GeneratedClient value={value} allowedComponents={allowedComponents} inputStream={stream.value} />
+  return <GeneratedClient value={value} allowedComponents={allowedComponents} inputStream={stream.value} placeholder={placeholder} />
 }

package/dist/templates/spec.md

@@ -19,7 +19,7 @@ type UINode = {
   content?: string | { "$bind": string }; // Optional text content or data binding
 }
 
-Output visualy (depth first). Children will be added in the order to their parents which you output them.
+Output visually (depth first). Children will be added in the order to their parents which you output them.
 Example: Output the Container, then the Header, then the Header's text, then the Footer.
 
 To display a raw text node, set type = "TEXT".
@@ -48,7 +48,7 @@ In the example above, card_1 is the template that repeats for every author. It s
 <input_processing_rules>
 1. Parse Specs: Read `AllowedComponents` and `ComponentContext` (props definitions).
  * `AllowedComponents` is a comma-separated list, lowercase for Native HTML tags, Uppercase for Custom React Components. If none are provided, you can use any HTML tag. If they are, only use them to the best of your ability.
- * `ComponentContext` defines the Typescript interface for custom components. Components are separated by a comma, in the format `ComponentName [props: { ... }, details: "..."]`.  The `props` indicate what `props` it must accept, in Typescript format. The `details` is an optional field, and describes what the component does. DO NOT hallucinate props. Use the details to better your understand of how to generate the UI.
+ * `ComponentContext` defines the Typescript interface for custom components. Components are separated by a comma, in the format `ComponentName [props: { ... }, details: "..."]`.  The `props` indicate what `props` it must accept, in Typescript format. The `details` is an optional field, and describes what the component does. DO NOT hallucinate props. Use the details to better your understanding of how to generate the UI.
 2. Parse Context: Read `UserContext` for specific design requests.
 3. Parse Data: Analyze `Value` to determine structure.
 </input_processing_rules>

package/dist/templates/spec.ts

@@ -1,3 +1,9 @@
+/**
+ * IMPORTANT:
+ * Edit *this file* to change the default system prompt.
+ * spec.md is provided for ease of reading; editing it will not affect the prompt.
+ */
+
 const spec = `<system_persona>
 You are the UI Stream Engine. You convert data into React UIs by emitting a linear stream of atomic component definitions.
 </system_persona>
@@ -19,7 +25,7 @@ type UINode = {
   content?: string | { "$bind": string }; // Optional text content or data binding
 }
 
-Output visualy (depth first). Children will be added in the order to their parents which you output them.
+Output visually (depth first). Children will be added in the order to their parents which you output them.
 Example: Output the Container, then the Header, then the Header's text, then the Footer.
 
 To display a raw text node, set type = "TEXT".
@@ -48,7 +54,7 @@ In the example above, card_1 is the template that repeats for every author. It s
 <input_processing_rules>
 1. Parse Specs: Read \`AllowedComponents\` and \`ComponentContext\` (props definitions).
  * \`AllowedComponents\` is a comma-separated list, lowercase for Native HTML tags, Uppercase for Custom React Components. If none are provided, you can use any HTML tag. If they are, only use them to the best of your ability.
- * \`ComponentContext\` defines the Typescript interface for custom components. Components are separated by a comma, in the format \`ComponentName [props: { ... }, details: "..."]\`.  The \`props\` indicate what \`props\` it must accept, in Typescript format. The \`details\` is an optional field, and describes what the component does. DO NOT hallucinate props. Use the details to better your understand of how to generate the UI.
+ * \`ComponentContext\` defines the Typescript interface for custom components. Components are separated by a comma, in the format \`ComponentName [props: { ... }, details: "..."]\`.  The \`props\` indicate what \`props\` it must accept, in Typescript format. The \`details\` is an optional field, and describes what the component does. DO NOT hallucinate props. Use the details to better your understanding of how to generate the UI.
 2. Parse Context: Read \`UserContext\` for specific design requests.
 3. Parse Data: Analyze \`Value\` to determine structure.
 </input_processing_rules>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "getsyntux",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The declarative generative-UI library.",
   "exports": {
     ".": {
@@ -33,8 +33,10 @@
     "@types/react": "^19.2.7",
     "ai": "^6.0.3",
     "chalk": "^5.6.2",
+    "commander": "^14.0.2",
     "fs-extra": "^11.3.3",
     "prompts": "^2.4.2",
+    "react-docgen-typescript": "^2.4.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
@@ -48,7 +50,7 @@
   ],
   "devDependencies": {
     "@ai-sdk/anthropic": "^3.0.1",
-    "esbuild-plugin-preserve-directives": "^0.0.11",
+    "esbuild-plugin-preserve-directives": "^0.0.7",
     "tsx": "^4.21.0"
   }
 }