@json-render/core 0.5.0 → 0.5.2

package/dist/index.d.mts

@@ -1012,6 +1012,8 @@ interface ComponentDefinition<TProps extends ComponentSchema = ComponentSchema>
     hasChildren?: boolean;
     /** Description for AI generation */
     description?: string;
+    /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
+    example?: Record<string, unknown>;
 }
 /**
  * Catalog configuration

package/dist/index.d.ts

@@ -1012,6 +1012,8 @@ interface ComponentDefinition<TProps extends ComponentSchema = ComponentSchema>
     hasChildren?: boolean;
     /** Description for AI generation */
     description?: string;
+    /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
+    example?: Record<string, unknown>;
 }
 /**
  * Catalog configuration

package/dist/index.js

@@ -1244,27 +1244,72 @@ function generatePrompt(catalog, options) {
   const lines = [];
   lines.push(system);
   lines.push("");
-  lines.push("OUTPUT FORMAT:");
+  lines.push("OUTPUT FORMAT (JSONL, RFC 6902 JSON Patch):");
   lines.push(
-    "Output JSONL (one JSON object per line) with patches to build a UI tree."
+    "Output JSONL (one JSON object per line) using RFC 6902 JSON Patch operations to build a UI tree."
   );
   lines.push(
-    "Each line is a JSON patch operation. Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams."
+    "Each line is a JSON patch operation (add, remove, replace). Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams."
   );
   lines.push("");
   lines.push("Example output (each line is a separate JSON object):");
   lines.push("");
-  lines.push(`{"op":"add","path":"/root","value":"blog"}
-{"op":"add","path":"/elements/blog","value":{"type":"Stack","props":{"direction":"vertical","gap":"md"},"children":["heading","posts-grid"]}}
-{"op":"add","path":"/elements/heading","value":{"type":"Heading","props":{"text":"Blog","level":"h1"},"children":[]}}
-{"op":"add","path":"/elements/posts-grid","value":{"type":"Grid","props":{"columns":2,"gap":"md"},"repeat":{"path":"/posts","key":"id"},"children":["post-card"]}}
-{"op":"add","path":"/elements/post-card","value":{"type":"Card","props":{"title":{"$path":"$item/title"}},"children":["post-meta"]}}
-{"op":"add","path":"/elements/post-meta","value":{"type":"Text","props":{"text":{"$path":"$item/author"},"variant":"muted"},"children":[]}}
-{"op":"add","path":"/state/posts","value":[]}
-{"op":"add","path":"/state/posts/0","value":{"id":"1","title":"Getting Started","author":"Jane","date":"Jan 15"}}
-{"op":"add","path":"/state/posts/1","value":{"id":"2","title":"Advanced Tips","author":"Bob","date":"Feb 3"}}
+  const allComponents = catalog.data.components;
+  const cn = catalog.componentNames;
+  const comp1 = cn[0] || "Component";
+  const comp2 = cn.length > 1 ? cn[1] : comp1;
+  const comp1Def = allComponents?.[comp1];
+  const comp2Def = allComponents?.[comp2];
+  const comp1Props = comp1Def ? getExampleProps(comp1Def) : {};
+  const comp2Props = comp2Def ? getExampleProps(comp2Def) : {};
+  const dynamicPropName = comp2Def?.props ? findFirstStringProp(comp2Def.props) : null;
+  const dynamicProps = dynamicPropName ? { ...comp2Props, [dynamicPropName]: { $path: "$item/title" } } : comp2Props;
+  const exampleOutput = [
+    JSON.stringify({ op: "add", path: "/root", value: "main" }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/main",
+      value: {
+        type: comp1,
+        props: comp1Props,
+        children: ["child-1", "list"]
+      }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/child-1",
+      value: { type: comp2, props: comp2Props, children: [] }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/list",
+      value: {
+        type: comp1,
+        props: comp1Props,
+        repeat: { path: "/items", key: "id" },
+        children: ["item"]
+      }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/item",
+      value: { type: comp2, props: dynamicProps, children: [] }
+    }),
+    JSON.stringify({ op: "add", path: "/state/items", value: [] }),
+    JSON.stringify({
+      op: "add",
+      path: "/state/items/0",
+      value: { id: "1", title: "First Item" }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/state/items/1",
+      value: { id: "2", title: "Second Item" }
+    })
+  ].join("\n");
+  lines.push(`${exampleOutput}
 
-Note: state patches appear right after the elements that use them, so the UI fills in as it streams.`);
+Note: state patches appear right after the elements that use them, so the UI fills in as it streams. ONLY use component types from the AVAILABLE COMPONENTS list below.`);
   lines.push("");
   lines.push("INITIAL STATE:");
   lines.push(
@@ -1303,7 +1348,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     'The element itself renders once (as the container), and its children are expanded once per array item. "path" is the state array path. "key" is an optional field name on each item for stable React keys.'
   );
   lines.push(
-    'Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }'
+    `Example: ${JSON.stringify({ type: comp1, props: comp1Props, repeat: { path: "/todos", key: "id" }, children: ["todo-item"] })}`
   );
   lines.push(
     'Inside children of a repeated element, use "$item/field" for per-item paths: statePath:"$item/completed", { "$path": "$item/title" }. Use "$index" for the current array index.'
@@ -1339,7 +1384,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     'IMPORTANT: State paths use RFC 6901 JSON Pointer syntax (e.g. "/todos/0/title"). Do NOT use JavaScript-style dot notation (e.g. "/todos.length" is WRONG). To generate unique IDs for new items, use "$id" instead of trying to read array length.'
   );
   lines.push("");
-  const components = catalog.data.components;
+  const components = allComponents;
   if (components) {
     lines.push(`AVAILABLE COMPONENTS (${catalog.componentNames.length}):`);
     lines.push("");
@@ -1372,7 +1417,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("");
   lines.push("Example:");
   lines.push(
-    '  {"type":"Button","props":{"label":"Save"},"on":{"press":{"action":"setState","params":{"path":"/saved","value":true}}},"children":[]}'
+    `  ${JSON.stringify({ type: comp1, props: comp1Props, on: { press: { action: "setState", params: { path: "/saved", value: true } } }, children: [] })}`
   );
   lines.push("");
   lines.push(
@@ -1387,7 +1432,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     "Elements can have an optional `visible` field to conditionally show/hide based on data state. IMPORTANT: `visible` is a top-level field on the element object (sibling of type/props/children), NOT inside props."
   );
   lines.push(
-    'Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/tab"},"home"]},"children":[...]}'
+    `Correct: ${JSON.stringify({ type: comp1, props: comp1Props, visible: { eq: [{ path: "/tab" }, "home"] }, children: ["..."] })}`
   );
   lines.push(
     '- `{ "eq": [{ "path": "/statePath" }, "value"] }` - visible when state at path equals value'
@@ -1402,10 +1447,10 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("- `true` / `false` - always visible/hidden");
   lines.push("");
   lines.push(
-    "Use the Pressable component with on.press bound to setState to update state and drive visibility."
+    "Use a component with on.press bound to setState to update state and drive visibility."
   );
   lines.push(
-    'Example: A Pressable with on: { "press": { "action": "setState", "params": { "path": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "eq": [{ "path": "/activeTab" }, "home"] } shows only when that tab is active.'
+    `Example: A ${comp1} with on: { "press": { "action": "setState", "params": { "path": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "eq": [{ "path": "/activeTab" }, "home"] } shows only when that tab is active.`
   );
   lines.push("");
   lines.push("DYNAMIC PROPS:");
@@ -1451,6 +1496,101 @@ Note: state patches appear right after the elements that use them, so the UI fil
   });
   return lines.join("\n");
 }
+function getExampleProps(def) {
+  if (def.example && Object.keys(def.example).length > 0) {
+    return def.example;
+  }
+  if (def.props) {
+    return generateExamplePropsFromZod(def.props);
+  }
+  return {};
+}
+function generateExamplePropsFromZod(schema) {
+  if (!schema || !schema._def) return {};
+  const def = schema._def;
+  const typeName = getZodTypeName(schema);
+  if (typeName !== "ZodObject" && typeName !== "object") return {};
+  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+  if (!shape) return {};
+  const result = {};
+  for (const [key, value] of Object.entries(shape)) {
+    const innerTypeName = getZodTypeName(value);
+    if (innerTypeName === "ZodOptional" || innerTypeName === "optional" || innerTypeName === "ZodNullable" || innerTypeName === "nullable") {
+      continue;
+    }
+    result[key] = generateExampleValue(value);
+  }
+  return result;
+}
+function generateExampleValue(schema) {
+  if (!schema || !schema._def) return "...";
+  const def = schema._def;
+  const typeName = getZodTypeName(schema);
+  switch (typeName) {
+    case "ZodString":
+    case "string":
+      return "example";
+    case "ZodNumber":
+    case "number":
+      return 0;
+    case "ZodBoolean":
+    case "boolean":
+      return true;
+    case "ZodLiteral":
+    case "literal":
+      return def.value;
+    case "ZodEnum":
+    case "enum": {
+      if (Array.isArray(def.values) && def.values.length > 0)
+        return def.values[0];
+      if (def.entries && typeof def.entries === "object") {
+        const values = Object.values(def.entries);
+        return values.length > 0 ? values[0] : "example";
+      }
+      return "example";
+    }
+    case "ZodOptional":
+    case "optional":
+    case "ZodNullable":
+    case "nullable":
+    case "ZodDefault":
+    case "default": {
+      const inner = def.innerType ?? def.wrapped;
+      return inner ? generateExampleValue(inner) : null;
+    }
+    case "ZodArray":
+    case "array":
+      return [];
+    case "ZodObject":
+    case "object":
+      return generateExamplePropsFromZod(schema);
+    case "ZodUnion":
+    case "union": {
+      const options = def.options;
+      return options && options.length > 0 ? generateExampleValue(options[0]) : "...";
+    }
+    default:
+      return "...";
+  }
+}
+function findFirstStringProp(schema) {
+  if (!schema || !schema._def) return null;
+  const def = schema._def;
+  const typeName = getZodTypeName(schema);
+  if (typeName !== "ZodObject" && typeName !== "object") return null;
+  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+  if (!shape) return null;
+  for (const [key, value] of Object.entries(shape)) {
+    const innerTypeName = getZodTypeName(value);
+    if (innerTypeName === "ZodOptional" || innerTypeName === "optional" || innerTypeName === "ZodNullable" || innerTypeName === "nullable") {
+      continue;
+    }
+    if (innerTypeName === "ZodString" || innerTypeName === "string") {
+      return key;
+    }
+  }
+  return null;
+}
 function getZodTypeName(schema) {
   if (!schema || !schema._def) return "";
   const def = schema._def;