@json-render/vue 0.20.0 → 0.21.1

package/dist/schema.d.mts

@@ -19,6 +19,12 @@ declare const schema: _json_render_core.Schema<{
             props: _json_render_core.SchemaType<"propsOf", string>;
             /** Child element keys (flat reference) */
             children: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>>;
+            /** Named slots mapped to child element keys */
+            slots: {
+                optional: true;
+                kind: "record";
+                inner?: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>> | undefined;
+            };
             /** Visibility condition */
             visible: {
                 optional: true;

package/dist/schema.d.ts

@@ -19,6 +19,12 @@ declare const schema: _json_render_core.Schema<{
             props: _json_render_core.SchemaType<"propsOf", string>;
             /** Child element keys (flat reference) */
             children: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>>;
+            /** Named slots mapped to child element keys */
+            slots: {
+                optional: true;
+                kind: "record";
+                inner?: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"string", unknown>> | undefined;
+            };
             /** Visibility condition */
             visible: {
                 optional: true;

package/dist/schema.js

@@ -39,6 +39,8 @@ var schema = (0, import_core.defineSchema)(
           props: s.propsOf("catalog.components"),
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
+          /** Named slots mapped to child element keys */
+          slots: { ...s.record(s.array(s.string())), ...s.optional() },
           /** Visibility condition */
           visible: { ...s.any(), ...s.optional() },
           /** Repeat children from a state array */
@@ -92,6 +94,7 @@ var schema = (0, import_core.defineSchema)(
       "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
       "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
       'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
+      'NAMED SLOTS: Use "children" for the default slot. For other slots declared by the component, use a top-level "slots" object that maps each slot name to child element keys, for example {"slots":{"header":["heading"],"footer":["actions"]}}. Never use "slots.default". Every referenced key must exist.',
       // Field placement
       'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"home"},"children":[...]}.',
       'CRITICAL: The "on" field goes on the ELEMENT object, NOT inside "props". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',

package/dist/schema.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/schema.ts"],"sourcesContent":["import { defineSchema } from \"@json-render/core\";\n\n/**\n * The schema for @json-render/vue\n *\n * Defines:\n * - Spec: A flat tree of elements with keys, types, props, and children references\n * - Catalog: Components with props schemas, and optional actions\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like\n    spec: s.object({\n      /** Root element key */\n      root: s.string(),\n      /** Flat map of elements by key */\n      elements: s.record(\n        s.object({\n          /** Component type from catalog */\n          type: s.ref(\"catalog.components\"),\n          /** Component props */\n          props: s.propsOf(\"catalog.components\"),\n          /** Child element keys (flat reference) */\n          children: s.array(s.string()),\n          /** Visibility condition */\n          visible: { ...s.any(), ...s.optional() },\n          /** Repeat children from a state array */\n          repeat: { ...s.any(), ...s.optional() },\n        }),\n      ),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Component definitions */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */\n        slots: s.array(s.string()),\n        /** Description for AI generation hints */\n        description: s.string(),\n        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */\n        example: s.any(),\n      }),\n      /** Action definitions (optional) */\n      actions: s.map({\n        /** Zod schema for action params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    builtInActions: [\n      {\n        name: \"setState\",\n        description:\n          \"Update a value in the state model at the given statePath. Params: { statePath: string, value: any }\",\n      },\n      {\n        name: \"pushState\",\n        description:\n          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {\"$state\":\"/path\"} refs and \"$id\" for auto IDs.',\n      },\n      {\n        name: \"removeState\",\n        description:\n          \"Remove an item from an array in state by index. Params: { statePath: string, index: number }\",\n      },\n      {\n        name: \"validateForm\",\n        description:\n          \"Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.\",\n      },\n    ],\n    defaultRules: [\n      // Element integrity\n      \"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.\",\n      \"SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.\",\n      'REQUIRED FIELDS: Every element MUST include a \"children\" array. Leaf elements (text, badges, inputs, images) use an empty array: \"children\": []. Omitting \"children\" fails validation.',\n\n      // Field placement\n      'CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{\"$state\":\"/tab\",\"eq\":\"home\"},\"children\":[...]}.',\n      'CRITICAL: The \"on\" field goes on the ELEMENT object, NOT inside \"props\". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',\n\n      // State and data\n      \"When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).\",\n      'When building repeating content backed by a state array (e.g. posts, products, items), use the \"repeat\" field on a container element. Example: { \"type\": \"<ContainerComponent>\", \"props\": {}, \"repeat\": { \"statePath\": \"/posts\", \"key\": \"id\" }, \"children\": [\"post-card\"] }. For a nested list stored on the enclosing item, use \"repeat\": { \"statePath\": { \"$item\": \"comments\" }, \"key\": \"id\" }. The $item statePath form is valid only inside another repeat. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { \"$item\": \"field\" } to read a field from the current item, and { \"$index\": true } for the current array index. For two-way binding to an item field use { \"$bindItem\": \"completed\" }. Do NOT hardcode individual elements for each array item.',\n\n      // Design quality\n      \"Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.\",\n      \"For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.\",\n      \"Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty.\",\n    ],\n  },\n);\n\n/**\n * Type for the Vue schema\n */\nexport type VueSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type VueSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAStB,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO;AAAA;AAAA,IAEN,MAAM,EAAE,OAAO;AAAA;AAAA,MAEb,MAAM,EAAE,OAAO;AAAA;AAAA,MAEf,UAAU,EAAE;AAAA,QACV,EAAE,OAAO;AAAA;AAAA,UAEP,MAAM,EAAE,IAAI,oBAAoB;AAAA;AAAA,UAEhC,OAAO,EAAE,QAAQ,oBAAoB;AAAA;AAAA,UAErC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,UAE5B,SAAS,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA;AAAA,UAEvC,QAAQ,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA,QACxC,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAAA,IAGD,SAAS,EAAE,OAAO;AAAA;AAAA,MAEhB,YAAY,EAAE,IAAI;AAAA;AAAA,QAEhB,OAAO,EAAE,IAAI;AAAA;AAAA,QAEb,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,QAEzB,aAAa,EAAE,OAAO;AAAA;AAAA,QAEtB,SAAS,EAAE,IAAI;AAAA,MACjB,CAAC;AAAA;AAAA,MAED,SAAS,EAAE,IAAI;AAAA;AAAA,QAEb,QAAQ,EAAE,IAAI;AAAA;AAAA,QAEd,aAAa,EAAE,OAAO;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,gBAAgB;AAAA,MACd;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,cAAc;AAAA;AAAA,MAEZ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/schema.ts"],"sourcesContent":["import { defineSchema } from \"@json-render/core\";\n\n/**\n * The schema for @json-render/vue\n *\n * Defines:\n * - Spec: A flat tree of elements with keys, types, props, and children references\n * - Catalog: Components with props schemas, and optional actions\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like\n    spec: s.object({\n      /** Root element key */\n      root: s.string(),\n      /** Flat map of elements by key */\n      elements: s.record(\n        s.object({\n          /** Component type from catalog */\n          type: s.ref(\"catalog.components\"),\n          /** Component props */\n          props: s.propsOf(\"catalog.components\"),\n          /** Child element keys (flat reference) */\n          children: s.array(s.string()),\n          /** Named slots mapped to child element keys */\n          slots: { ...s.record(s.array(s.string())), ...s.optional() },\n          /** Visibility condition */\n          visible: { ...s.any(), ...s.optional() },\n          /** Repeat children from a state array */\n          repeat: { ...s.any(), ...s.optional() },\n        }),\n      ),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Component definitions */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */\n        slots: s.array(s.string()),\n        /** Description for AI generation hints */\n        description: s.string(),\n        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */\n        example: s.any(),\n      }),\n      /** Action definitions (optional) */\n      actions: s.map({\n        /** Zod schema for action params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    builtInActions: [\n      {\n        name: \"setState\",\n        description:\n          \"Update a value in the state model at the given statePath. Params: { statePath: string, value: any }\",\n      },\n      {\n        name: \"pushState\",\n        description:\n          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {\"$state\":\"/path\"} refs and \"$id\" for auto IDs.',\n      },\n      {\n        name: \"removeState\",\n        description:\n          \"Remove an item from an array in state by index. Params: { statePath: string, index: number }\",\n      },\n      {\n        name: \"validateForm\",\n        description:\n          \"Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.\",\n      },\n    ],\n    defaultRules: [\n      // Element integrity\n      \"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.\",\n      \"SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.\",\n      'REQUIRED FIELDS: Every element MUST include a \"children\" array. Leaf elements (text, badges, inputs, images) use an empty array: \"children\": []. Omitting \"children\" fails validation.',\n      'NAMED SLOTS: Use \"children\" for the default slot. For other slots declared by the component, use a top-level \"slots\" object that maps each slot name to child element keys, for example {\"slots\":{\"header\":[\"heading\"],\"footer\":[\"actions\"]}}. Never use \"slots.default\". Every referenced key must exist.',\n\n      // Field placement\n      'CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{\"$state\":\"/tab\",\"eq\":\"home\"},\"children\":[...]}.',\n      'CRITICAL: The \"on\" field goes on the ELEMENT object, NOT inside \"props\". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',\n\n      // State and data\n      \"When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).\",\n      'When building repeating content backed by a state array (e.g. posts, products, items), use the \"repeat\" field on a container element. Example: { \"type\": \"<ContainerComponent>\", \"props\": {}, \"repeat\": { \"statePath\": \"/posts\", \"key\": \"id\" }, \"children\": [\"post-card\"] }. For a nested list stored on the enclosing item, use \"repeat\": { \"statePath\": { \"$item\": \"comments\" }, \"key\": \"id\" }. The $item statePath form is valid only inside another repeat. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { \"$item\": \"field\" } to read a field from the current item, and { \"$index\": true } for the current array index. For two-way binding to an item field use { \"$bindItem\": \"completed\" }. Do NOT hardcode individual elements for each array item.',\n\n      // Design quality\n      \"Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.\",\n      \"For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.\",\n      \"Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty.\",\n    ],\n  },\n);\n\n/**\n * Type for the Vue schema\n */\nexport type VueSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type VueSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAStB,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO;AAAA;AAAA,IAEN,MAAM,EAAE,OAAO;AAAA;AAAA,MAEb,MAAM,EAAE,OAAO;AAAA;AAAA,MAEf,UAAU,EAAE;AAAA,QACV,EAAE,OAAO;AAAA;AAAA,UAEP,MAAM,EAAE,IAAI,oBAAoB;AAAA;AAAA,UAEhC,OAAO,EAAE,QAAQ,oBAAoB;AAAA;AAAA,UAErC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,UAE5B,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA;AAAA,UAE3D,SAAS,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA;AAAA,UAEvC,QAAQ,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA,QACxC,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAAA,IAGD,SAAS,EAAE,OAAO;AAAA;AAAA,MAEhB,YAAY,EAAE,IAAI;AAAA;AAAA,QAEhB,OAAO,EAAE,IAAI;AAAA;AAAA,QAEb,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,QAEzB,aAAa,EAAE,OAAO;AAAA;AAAA,QAEtB,SAAS,EAAE,IAAI;AAAA,MACjB,CAAC;AAAA;AAAA,MAED,SAAS,EAAE,IAAI;AAAA;AAAA,QAEb,QAAQ,EAAE,IAAI;AAAA;AAAA,QAEd,aAAa,EAAE,OAAO;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,gBAAgB;AAAA,MACd;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,cAAc;AAAA;AAAA,MAEZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/schema.mjs

@@ -1,6 +1,6 @@
 import {
   schema
-} from "./chunk-F4CKBTOP.mjs";
+} from "./chunk-34A2QV2X.mjs";
 export {
   schema
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/vue",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "license": "Apache-2.0",
   "description": "Vue renderer for @json-render/core. JSON becomes Vue components.",
   "keywords": [
@@ -45,7 +45,7 @@
     "dist"
   ],
   "dependencies": {
-    "@json-render/core": "0.20.0"
+    "@json-render/core": "0.21.1"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",

package/dist/chunk-F4CKBTOP.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/schema.ts"],"sourcesContent":["import { defineSchema } from \"@json-render/core\";\n\n/**\n * The schema for @json-render/vue\n *\n * Defines:\n * - Spec: A flat tree of elements with keys, types, props, and children references\n * - Catalog: Components with props schemas, and optional actions\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like\n    spec: s.object({\n      /** Root element key */\n      root: s.string(),\n      /** Flat map of elements by key */\n      elements: s.record(\n        s.object({\n          /** Component type from catalog */\n          type: s.ref(\"catalog.components\"),\n          /** Component props */\n          props: s.propsOf(\"catalog.components\"),\n          /** Child element keys (flat reference) */\n          children: s.array(s.string()),\n          /** Visibility condition */\n          visible: { ...s.any(), ...s.optional() },\n          /** Repeat children from a state array */\n          repeat: { ...s.any(), ...s.optional() },\n        }),\n      ),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Component definitions */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */\n        slots: s.array(s.string()),\n        /** Description for AI generation hints */\n        description: s.string(),\n        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */\n        example: s.any(),\n      }),\n      /** Action definitions (optional) */\n      actions: s.map({\n        /** Zod schema for action params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    builtInActions: [\n      {\n        name: \"setState\",\n        description:\n          \"Update a value in the state model at the given statePath. Params: { statePath: string, value: any }\",\n      },\n      {\n        name: \"pushState\",\n        description:\n          'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {\"$state\":\"/path\"} refs and \"$id\" for auto IDs.',\n      },\n      {\n        name: \"removeState\",\n        description:\n          \"Remove an item from an array in state by index. Params: { statePath: string, index: number }\",\n      },\n      {\n        name: \"validateForm\",\n        description:\n          \"Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }.\",\n      },\n    ],\n    defaultRules: [\n      // Element integrity\n      \"CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.\",\n      \"SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.\",\n      'REQUIRED FIELDS: Every element MUST include a \"children\" array. Leaf elements (text, badges, inputs, images) use an empty array: \"children\": []. Omitting \"children\" fails validation.',\n\n      // Field placement\n      'CRITICAL: The \"visible\" field goes on the ELEMENT object, NOT inside \"props\". Correct: {\"type\":\"<ComponentName>\",\"props\":{},\"visible\":{\"$state\":\"/tab\",\"eq\":\"home\"},\"children\":[...]}.',\n      'CRITICAL: The \"on\" field goes on the ELEMENT object, NOT inside \"props\". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',\n\n      // State and data\n      \"When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).\",\n      'When building repeating content backed by a state array (e.g. posts, products, items), use the \"repeat\" field on a container element. Example: { \"type\": \"<ContainerComponent>\", \"props\": {}, \"repeat\": { \"statePath\": \"/posts\", \"key\": \"id\" }, \"children\": [\"post-card\"] }. For a nested list stored on the enclosing item, use \"repeat\": { \"statePath\": { \"$item\": \"comments\" }, \"key\": \"id\" }. The $item statePath form is valid only inside another repeat. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { \"$item\": \"field\" } to read a field from the current item, and { \"$index\": true } for the current array index. For two-way binding to an item field use { \"$bindItem\": \"completed\" }. Do NOT hardcode individual elements for each array item.',\n\n      // Design quality\n      \"Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.\",\n      \"For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.\",\n      \"Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty.\",\n    ],\n  },\n);\n\n/**\n * Type for the Vue schema\n */\nexport type VueSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type VueSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n"],"mappings":";AAAA,SAAS,oBAAoB;AAStB,IAAM,SAAS;AAAA,EACpB,CAAC,OAAO;AAAA;AAAA,IAEN,MAAM,EAAE,OAAO;AAAA;AAAA,MAEb,MAAM,EAAE,OAAO;AAAA;AAAA,MAEf,UAAU,EAAE;AAAA,QACV,EAAE,OAAO;AAAA;AAAA,UAEP,MAAM,EAAE,IAAI,oBAAoB;AAAA;AAAA,UAEhC,OAAO,EAAE,QAAQ,oBAAoB;AAAA;AAAA,UAErC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,UAE5B,SAAS,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA;AAAA,UAEvC,QAAQ,EAAE,GAAG,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE;AAAA,QACxC,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAAA,IAGD,SAAS,EAAE,OAAO;AAAA;AAAA,MAEhB,YAAY,EAAE,IAAI;AAAA;AAAA,QAEhB,OAAO,EAAE,IAAI;AAAA;AAAA,QAEb,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;AAAA;AAAA,QAEzB,aAAa,EAAE,OAAO;AAAA;AAAA,QAEtB,SAAS,EAAE,IAAI;AAAA,MACjB,CAAC;AAAA;AAAA,MAED,SAAS,EAAE,IAAI;AAAA;AAAA,QAEb,QAAQ,EAAE,IAAI;AAAA;AAAA,QAEd,aAAa,EAAE,OAAO;AAAA,MACxB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EACA;AAAA,IACE,gBAAgB;AAAA,MACd;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,cAAc;AAAA;AAAA,MAEZ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}