@json-render/solid 0.18.0 → 0.20.0

package/README.md

@@ -227,6 +227,8 @@ await stream.send("Build me a dashboard");
 
 ## Differences from `@json-render/react`
 
+Nested lists can set `repeat.statePath` to `{ "$item": "field" }` to iterate an array on the enclosing repeat item.
+
 Most APIs are intentionally aligned, but there are runtime behavior differences due to Solid:
 
 - Solid components run once, then update via signals.

package/dist/{chunk-XTSB6FIM.mjs → chunk-ZTWTJIEL.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.",
@@ -84,4 +87,4 @@ export {
   schema,
   elementTreeSchema
 };
-//# sourceMappingURL=chunk-XTSB6FIM.mjs.map
+//# sourceMappingURL=chunk-ZTWTJIEL.mjs.map

package/dist/chunk-ZTWTJIEL.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/solid\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 Solid schema\n */\nexport type SolidSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type SolidSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n\n// Backward compatibility aliases\n/** @deprecated Use `schema` instead */\nexport const elementTreeSchema = schema;\n/** @deprecated Use `SolidSchema` instead */\nexport type ElementTreeSchema = SolidSchema;\n/** @deprecated Use `SolidSpec` instead */\nexport type ElementTreeSpec<T> = SolidSpec<T>;\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;AAkBO,IAAM,oBAAoB;","names":[]}

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as solid_js from 'solid-js';
 import { ParentProps, Accessor, JSX, Component } from 'solid-js';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, FlatElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, DirectiveDefinition, FlatElement } from '@json-render/core';
 export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { ElementTreeSchema, ElementTreeSpec, SolidSchema, SolidSpec, elementTreeSchema, schema } from './schema.mjs';
 
@@ -278,6 +278,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[];
     /** Callback when state changes (uncontrolled mode) */
     onStateChange?: (changes: Array<{
         path: string;
@@ -366,6 +368,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[];
     /** Whether the spec is currently loading/streaming */
     loading?: boolean;
     /** Fallback component for unknown types */

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as solid_js from 'solid-js';
 import { ParentProps, Accessor, JSX, Component } from 'solid-js';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, FlatElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, DirectiveDefinition, FlatElement } from '@json-render/core';
 export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { ElementTreeSchema, ElementTreeSpec, SolidSchema, SolidSpec, elementTreeSchema, schema } from './schema.js';
 
@@ -278,6 +278,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[];
     /** Callback when state changes (uncontrolled mode) */
     onStateChange?: (changes: Array<{
         path: string;
@@ -366,6 +368,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[];
     /** Whether the spec is currently loading/streaming */
     loading?: boolean;
     /** Fallback component for unknown types */

package/dist/index.js

@@ -598,11 +598,8 @@ function ActionProvider(props) {
               handler,
               setState: set,
               navigate: props.navigate,
-              executeAction: async (name) => {
-                const subBinding = {
-                  action: name
-                };
-                await execute(subBinding);
+              executeAction: async (binding2) => {
+                await execute(binding2);
               }
             });
           } finally {
@@ -621,11 +618,8 @@ function ActionProvider(props) {
           handler,
           setState: set,
           navigate: props.navigate,
-          executeAction: async (name) => {
-            const subBinding = {
-              action: name
-            };
-            await execute(subBinding);
+          executeAction: async (binding2) => {
+            await execute(binding2);
           }
         });
       } finally {
@@ -753,7 +747,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() }
         })
       )
     }),
@@ -802,12 +798,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.",
@@ -835,6 +832,10 @@ var FunctionsContext = (0, import_solid_js6.createContext)(EMPTY_FUNCTIONS);
 function useFunctions() {
   return (0, import_solid_js6.useContext)(FunctionsContext) ?? EMPTY_FUNCTIONS;
 }
+var DirectivesContext = (0, import_solid_js6.createContext)(void 0);
+function useDirectives() {
+  return (0, import_solid_js6.useContext)(DirectivesContext);
+}
 function useDevtoolsActive() {
   const [active, setActive] = (0, import_solid_js6.createSignal)((0, import_core6.isDevtoolsActive)());
   const unsub = (0, import_core6.subscribeDevtoolsActive)(() => setActive((0, import_core6.isDevtoolsActive)()));
@@ -852,6 +853,7 @@ function ElementRenderer(props) {
   const stateStore = useStateStore();
   const getSnapshot = () => stateStore.getSnapshot();
   const functions = useFunctions();
+  const directives = useDirectives();
   const fullCtx = (0, import_solid_js6.createMemo)(() => {
     const repeatItem = repeatScope?.item;
     const repeatIndex = repeatScope?.index;
@@ -869,7 +871,8 @@ function ElementRenderer(props) {
       ...repeatBasePath !== void 0 ? {
         repeatBasePath
       } : {},
-      functions
+      functions,
+      directives
     };
   });
   const isVisible = (0, import_solid_js6.createMemo)(() => props.element.visible === void 0 ? true : (0, import_core6.evaluateVisibility)(props.element.visible, fullCtx()));
@@ -1111,8 +1114,15 @@ function ElementRendererContent(props) {
 function RepeatChildren(props) {
   const stateStore = useStateStore();
   const repeat = () => props.element.repeat;
-  const statePath = () => repeat().statePath;
-  const items = () => (0, import_core6.getByPath)(stateStore.state, statePath()) ?? [];
+  const parentScope = useRepeatScope();
+  const statePath = () => {
+    const resolved = (0, import_core6.resolveRepeatStatePath)(repeat().statePath, parentScope?.basePath);
+    if (resolved === void 0) {
+      console.warn("[json-render/solid] $item in repeat.statePath used outside of a repeat scope");
+    }
+    return resolved;
+  };
+  const items = () => statePath() === void 0 ? [] : (0, import_core6.getByPath)(stateStore.state, statePath()) ?? [];
   return (0, import_web18.createComponent)(import_solid_js6.For, {
     get each() {
       return items();
@@ -1128,7 +1138,7 @@ function RepeatChildren(props) {
           return index();
         },
         get basePath() {
-          return `${statePath()}/${index()}`;
+          return (0, import_core6.resolveRepeatItemStatePath)(statePath(), index());
         },
         get children() {
           return (0, import_web18.createComponent)(import_solid_js6.For, {
@@ -1205,6 +1215,7 @@ function Renderer(props) {
   });
 }
 function JSONUIProvider(props) {
+  const directiveRegistry = (0, import_solid_js6.createMemo)(() => props.directives ? (0, import_core6.createDirectiveRegistry)(props.directives) : void 0);
   return (0, import_web18.createComponent)(StateProvider, {
     get store() {
       return props.store;
@@ -1236,7 +1247,14 @@ function JSONUIProvider(props) {
                       return props.functions ?? EMPTY_FUNCTIONS;
                     },
                     get children() {
-                      return [(0, import_web17.memo)(() => props.children), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                      return (0, import_web18.createComponent)(DirectivesContext.Provider, {
+                        get value() {
+                          return directiveRegistry();
+                        },
+                        get children() {
+                          return [(0, import_web17.memo)(() => props.children), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                        }
+                      });
                     }
                   });
                 }
@@ -1322,6 +1340,7 @@ function defineRegistry(_catalog, options) {
 function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer(props) {
+    const directiveRegistry = (0, import_solid_js6.createMemo)(() => props.directives ? (0, import_core6.createDirectiveRegistry)(props.directives) : void 0);
     const actionHandlers = () => props.onAction ? new Proxy({}, {
       get: (_target, prop) => {
         return (params) => props.onAction(prop, params);
@@ -1353,18 +1372,25 @@ function createRenderer(catalog, components) {
                         return props.functions ?? EMPTY_FUNCTIONS;
                       },
                       get children() {
-                        return [(0, import_web18.createComponent)(Renderer, {
-                          get spec() {
-                            return props.spec;
-                          },
-                          registry,
-                          get loading() {
-                            return props.loading;
+                        return (0, import_web18.createComponent)(DirectivesContext.Provider, {
+                          get value() {
+                            return directiveRegistry();
                           },
-                          get fallback() {
-                            return props.fallback;
+                          get children() {
+                            return [(0, import_web18.createComponent)(Renderer, {
+                              get spec() {
+                                return props.spec;
+                              },
+                              registry,
+                              get loading() {
+                                return props.loading;
+                              },
+                              get fallback() {
+                                return props.fallback;
+                              }
+                            }), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
                           }
-                        }), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                        });
                       }
                     });
                   }