@json-render/vue 0.18.0 → 0.20.0

package/README.md

@@ -488,6 +488,8 @@ const spec = {
 
 ## Differences from `@json-render/react`
 
+Nested lists can set `repeat.statePath` to `{ "$item": "field" }` to iterate an array on the enclosing repeat item.
+
 | API | React | Vue | Note |
 |-----|-------|-----|------|
 | `useStateStore().state` | `StateModel` | `ShallowRef<StateModel>` | Vue reactivity; use `state.value` |

package/dist/{chunk-WIPZLAF7.mjs → chunk-F4CKBTOP.mjs}

@@ -16,7 +16,9 @@ var schema = defineSchema(
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
           /** Visibility condition */
-          visible: s.any()
+          visible: { ...s.any(), ...s.optional() },
+          /** Repeat children from a state array */
+          repeat: { ...s.any(), ...s.optional() }
         })
       )
     }),
@@ -65,12 +67,13 @@ var schema = defineSchema(
       // Element integrity
       "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.',
       // 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.',
       // State and data
       "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).",
-      '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"] }. 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.',
+      '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.',
       // Design quality
       "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.",
       "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.",
@@ -82,4 +85,4 @@ var schema = defineSchema(
 export {
   schema
 };
-//# sourceMappingURL=chunk-WIPZLAF7.mjs.map
+//# sourceMappingURL=chunk-F4CKBTOP.mjs.map

package/dist/chunk-F4CKBTOP.mjs.map

@@ -0,0 +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,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":[]}

package/dist/index.d.mts

@@ -1,8 +1,10 @@
 import * as vue from 'vue';
 import { PropType, ShallowRef, ComputedRef, VNode, Ref, Component } from 'vue';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, UIElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, DirectiveDefinition, UIElement } from '@json-render/core';
 export { ComputedFunction, Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { VueSchema, VueSpec, schema } from './schema.mjs';
+import * as zod from 'zod';
+import * as zod_v4_core from 'zod/v4/core';
 
 /**
  * State context value
@@ -708,6 +710,8 @@ interface JSONUIProviderProps {
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     onStateChange?: (changes: Array<{
         path: string;
         value: unknown;
@@ -745,6 +749,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -783,6 +791,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -800,6 +812,7 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     handlers: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
     navigate: (path: string) => void;
     functions: Record<string, ComputedFunction>;
+    directives: DirectiveDefinition<zod.ZodType<unknown, unknown, zod_v4_core.$ZodTypeInternals<unknown, unknown>>>[];
     validationFunctions: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 /**
@@ -851,6 +864,8 @@ interface CreateRendererProps {
     }>) => void;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     loading?: boolean;
     fallback?: Component;
 }

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import * as vue from 'vue';
 import { PropType, ShallowRef, ComputedRef, VNode, Ref, Component } from 'vue';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, UIElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, Spec, FlatElement, SchemaDefinition, ComputedFunction, DirectiveDefinition, UIElement } from '@json-render/core';
 export { ComputedFunction, Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { VueSchema, VueSpec, schema } from './schema.js';
+import * as zod from 'zod';
+import * as zod_v4_core from 'zod/v4/core';
 
 /**
  * State context value
@@ -708,6 +710,8 @@ interface JSONUIProviderProps {
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     onStateChange?: (changes: Array<{
         path: string;
         value: unknown;
@@ -745,6 +749,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -783,6 +791,10 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<Record<string, ComputedFunction>>;
         default: undefined;
     };
+    directives: {
+        type: PropType<DirectiveDefinition[]>;
+        default: undefined;
+    };
     onStateChange: {
         type: PropType<(changes: Array<{
             path: string;
@@ -800,6 +812,7 @@ declare const JSONUIProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     handlers: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
     navigate: (path: string) => void;
     functions: Record<string, ComputedFunction>;
+    directives: DirectiveDefinition<zod.ZodType<unknown, unknown, zod_v4_core.$ZodTypeInternals<unknown, unknown>>>[];
     validationFunctions: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 /**
@@ -851,6 +864,8 @@ interface CreateRendererProps {
     }>) => void;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     loading?: boolean;
     fallback?: Component;
 }

package/dist/index.js

@@ -542,9 +542,8 @@ var ActionProvider = (0, import_vue4.defineComponent)({
               handler,
               setState: set,
               navigate: props.navigate,
-              executeAction: async (name) => {
-                const subBinding = { action: name };
-                await execute(subBinding);
+              executeAction: async (binding2) => {
+                await execute(binding2);
               }
             });
           } finally {
@@ -563,9 +562,8 @@ var ActionProvider = (0, import_vue4.defineComponent)({
             handler,
             setState: set,
             navigate: props.navigate,
-            executeAction: async (name) => {
-              const subBinding = { action: name };
-              await execute(subBinding);
+            executeAction: async (binding2) => {
+              await execute(binding2);
             }
           });
         } finally {
@@ -786,7 +784,9 @@ var schema = (0, import_core5.defineSchema)(
           /** Child element keys (flat reference) */
           children: s.array(s.string()),
           /** Visibility condition */
-          visible: s.any()
+          visible: { ...s.any(), ...s.optional() },
+          /** Repeat children from a state array */
+          repeat: { ...s.any(), ...s.optional() }
         })
       )
     }),
@@ -835,12 +835,13 @@ var schema = (0, import_core5.defineSchema)(
       // Element integrity
       "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.',
       // 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.',
       // State and data
       "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).",
-      '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"] }. 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.',
+      '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.',
       // Design quality
       "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.",
       "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.",
@@ -1354,6 +1355,29 @@ function useFunctions() {
     (0, import_vue7.computed)(() => EMPTY_FUNCTIONS)
   );
 }
+var DIRECTIVES_KEY = /* @__PURE__ */ Symbol("json-render:directives");
+var DirectivesProvider = (0, import_vue7.defineComponent)({
+  name: "DirectivesProvider",
+  props: {
+    directives: {
+      type: Array,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const registry = (0, import_vue7.computed)(
+      () => props.directives ? (0, import_core7.createDirectiveRegistry)(props.directives) : void 0
+    );
+    (0, import_vue7.provide)(DIRECTIVES_KEY, registry);
+    return () => slots.default?.();
+  }
+});
+function useDirectives() {
+  return (0, import_vue7.inject)(
+    DIRECTIVES_KEY,
+    (0, import_vue7.computed)(() => void 0)
+  );
+}
 var ElementErrorBoundary = (0, import_vue7.defineComponent)({
   name: "ElementErrorBoundary",
   props: {
@@ -1441,6 +1465,7 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
     const { execute } = useActions();
     const { getSnapshot, state: watchState } = useStateStore();
     const functions = useFunctions();
+    const directives = useDirectives();
     const fullCtx = (0, import_vue7.computed)(() => {
       const base = repeatScope ? {
         ...visibilityCtx.value,
@@ -1449,6 +1474,7 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
         repeatBasePath: repeatScope.basePath
       } : { ...visibilityCtx.value };
       base.functions = functions.value;
+      base.directives = directives.value;
       return base;
     });
     const emitEvent = async (eventName) => {
@@ -1607,10 +1633,20 @@ var RepeatChildren = (0, import_vue7.defineComponent)({
   },
   setup(props) {
     const { state } = useStateStore();
+    const parentScope = useRepeatScope();
     return () => {
       const repeat = props.element.repeat;
       if (!repeat?.statePath) return null;
-      const statePath = repeat.statePath;
+      const statePath = (0, import_core7.resolveRepeatStatePath)(
+        repeat.statePath,
+        parentScope?.basePath
+      );
+      if (statePath === void 0) {
+        console.warn(
+          "[json-render/vue] $item in repeat.statePath used outside of a repeat scope"
+        );
+        return null;
+      }
       const raw = (0, import_core7.getByPath)(state.value, statePath);
       const items = Array.isArray(raw) ? raw : [];
       return items.map((itemValue, index) => {
@@ -1619,7 +1655,12 @@ var RepeatChildren = (0, import_vue7.defineComponent)({
         ) : String(index);
         return (0, import_vue7.h)(
           RepeatScopeProvider,
-          { key, item: itemValue, index, basePath: `${statePath}/${index}` },
+          {
+            key,
+            item: itemValue,
+            index,
+            basePath: (0, import_core7.resolveRepeatItemStatePath)(statePath, index)
+          },
           {
             default: () => props.element.children?.map((childKey) => {
               const childElement = props.spec.elements[childKey];
@@ -1728,6 +1769,10 @@ var JSONUIProvider = (0, import_vue7.defineComponent)({
       type: Object,
       default: void 0
     },
+    directives: {
+      type: Array,
+      default: void 0
+    },
     onStateChange: {
       type: Function,
       default: void 0
@@ -1755,10 +1800,16 @@ var JSONUIProvider = (0, import_vue7.defineComponent)({
                     FunctionsProvider,
                     { functions: props.functions },
                     {
-                      default: () => [
-                        slots.default?.(),
-                        (0, import_vue7.h)(ConfirmationDialogManager)
-                      ]
+                      default: () => (0, import_vue7.h)(
+                        DirectivesProvider,
+                        { directives: props.directives },
+                        {
+                          default: () => [
+                            slots.default?.(),
+                            (0, import_vue7.h)(ConfirmationDialogManager)
+                          ]
+                        }
+                      )
                     }
                   )
                 }
@@ -1864,6 +1915,10 @@ function createRenderer(catalog, components) {
         type: Object,
         default: void 0
       },
+      directives: {
+        type: Array,
+        default: void 0
+      },
       loading: {
         type: Boolean,
         default: void 0
@@ -1902,15 +1957,21 @@ function createRenderer(catalog, components) {
                       FunctionsProvider,
                       { functions: rendererProps.functions },
                       {
-                        default: () => [
-                          (0, import_vue7.h)(Renderer, {
-                            spec: rendererProps.spec,
-                            registry,
-                            loading: rendererProps.loading,
-                            fallback: rendererProps.fallback
-                          }),
-                          (0, import_vue7.h)(ConfirmationDialogManager)
-                        ]
+                        default: () => (0, import_vue7.h)(
+                          DirectivesProvider,
+                          { directives: rendererProps.directives },
+                          {
+                            default: () => [
+                              (0, import_vue7.h)(Renderer, {
+                                spec: rendererProps.spec,
+                                registry,
+                                loading: rendererProps.loading,
+                                fallback: rendererProps.fallback
+                              }),
+                              (0, import_vue7.h)(ConfirmationDialogManager)
+                            ]
+                          }
+                        )
                       }
                     )
                   }