ngx-json-render 0.9.0 → 0.9.1

package/README.md

@@ -250,6 +250,38 @@ export class Page {
 }
 ```
 
+### Defaults for the whole app
+
+A chat renders a spec in every message, and binding the same registry and handlers on each one gets old. `provideJsonRender` sets them once:
+
+```ts
+bootstrapApplication(App, {
+  providers: [
+    provideJsonRender(() => {
+      const orders = inject(OrderService); // the function form runs in an injection context
+      return {
+        registry,
+        catalog,
+        handlers: { cancelOrder: (params) => orders.cancel(params['id']) },
+      };
+    }),
+  ],
+});
+```
+
+```html
+<json-render [spec]="m.spec" />
+```
+
+Every option input can be provided: `registry`, `fallback`, `validate`, `renderLimits`, `catalog`, `handlers`, `onAction`, `navigate`, `validationFunctions`, `functions` and `directives`. Per-instance inputs (`spec`, `loading`, `state`, `store`) cannot. The rules:
+
+- An input bound on the element wins over the provided value. One left `null` or `undefined` falls through to it.
+- `handlers`, `functions`, `validationFunctions` and `directives` merge by name instead, the element's entry winning a name both define. A chat can provide app-wide handlers and still add one for a single message.
+- Everything else replaces. A `registry` belongs to its catalog, so two are never mixed behind your back; to combine them, spread them yourself (`{ ...registry, ...extraRegistry }`).
+- It works in application, route and component `providers`. A provider below another extends it by the same rules.
+
+With no registry bound and none provided, the renderer throws, naming both ways to supply one.
+
 ## Streaming a UI from an LLM
 
 Specs stream as JSONL patch lines (RFC 6902). Render partial specs as they arrive — the renderer tolerates missing elements while `loading` is true:
@@ -391,15 +423,16 @@ import { JsonRenderer, injectChatUI } from 'ngx-json-render';
     @for (m of chat.messages(); track m.id) {
       <p>{{ m.text }}</p>
       @if (m.spec) {
-        <json-render [spec]="m.spec" [registry]="registry" />
+        <json-render [spec]="m.spec" />
       }
     }
     <button (click)="chat.send('show me revenue for the quarter')">Ask</button>
   `,
 })
 export class ChatPage {
+  // The registry comes from provideJsonRender({ registry }) in the app's
+  // providers: see "Defaults for the whole app".
   readonly chat = injectChatUI({ api: '/api/chat' });
-  readonly registry = registry;
 }
 ```
 
@@ -965,7 +998,26 @@ rather than the one holding session, entitlement or billing state.
 **A spec chooses the navigation target.** `onSuccess: { navigate }` passes its
 string to the `navigate` callback you provide, verbatim. Treat it as untrusted:
 match it against known routes, and never hand it to `window.location` or
-`router.navigateByUrl` unchecked.
+`router.navigateByUrl` unchecked. `ngx-json-render/router` does the checking
+for an app on the Angular `Router`:
+
+```ts
+import { injectRouterNavigate } from 'ngx-json-render/router';
+
+provideJsonRender(() => ({
+  registry,
+  navigate: injectRouterNavigate({ allow: ['/thanks', /^\/orders\/\d+$/] }),
+}));
+```
+
+It passes a path to `router.navigateByUrl` only when `allow` lets it through
+(strings match the path exactly, before any `?` or `#`; a `RegExp` is tested
+against it; a function decides). `allow` is required, because only the app
+knows which of its routes a generated UI may open. Whatever `allow` says, a
+path that does not start with a single `/` is refused: no other origin, no
+`javascript:` or other scheme, no relative path, no backslash or control
+character. A refused path, or a navigation the router rejects, is reported
+with `console.warn` and goes nowhere.
 
 **A spec cannot render forever.** Two elements naming each other as children,
 or one naming itself, would recurse until the tab died. The renderer refuses to
@@ -1013,6 +1065,8 @@ Components: `JsonRenderer` (`<json-render>`), `JrChildren`, `JrConfirmDialog`, `
 
 Injectables/helpers: `injectRenderContext`, `injectElementKey`, `injectRepeatScope`, `injectStateStore`, `injectStateValue`, `injectStateBinding`, `injectBoundProp`, `injectActions`, `injectAction`, `injectValidation`, `injectFieldValidation`, `injectUIStream`, `injectChatUI`, `injectDevtoolsActive`, `injectConfirmContext`, `jsonRenderMessage`, `isActionCancelled`, `checkSpec`.
 
+App-wide defaults: `provideJsonRender`, the `JSON_RENDER_CONFIG` token it fills, and the type `JsonRenderConfig`.
+
 Tokens: `JR_CONFIRM_DIALOG` (replace the confirmation dialog), `JR_CONFIRM_LABELS` (its two words), `CONFIRM_CONTEXT`, `RENDER_CONTEXT`, `REPEAT_SCOPE`.
 
 Spec checking: `checkSpec`, `formatSpecCheckIssues`, and the types
@@ -1031,6 +1085,8 @@ Schema alone (`ngx-json-render/schema`): `schema`, `AngularSchema`, `AngularSpec
 
 MCP Apps (`ngx-json-render/mcp`): `injectJsonRenderApp`, `parseSpecFromToolResult`, `messageText`, and the types `JsonRenderApp`, `JsonRenderAppOptions`. Needs the optional peers `@modelcontextprotocol/ext-apps` and `@modelcontextprotocol/sdk`.
 
+Router (`ngx-json-render/router`): `injectRouterNavigate`, and the type `RouterNavigateOptions`. Needs the optional peer `@angular/router`, which an Angular app on the router already has.
+
 Devtools (`ngx-json-render/devtools`): `JsonRenderDevtools` (`<json-render-devtools>`), and the types `DevtoolsEvent`, `PanelPosition`. Needs the optional peer `@json-render/devtools`.
 
 Testing (`ngx-json-render/testing`): `renderSpec`, `renderComponent`, `recordedTransport`, `specStream`, `usageLine`.
@@ -1042,7 +1098,7 @@ Everything from `@json-render/core` (types, `createStateStore`, `nestedToFlat`,
 | Input                 | Type                                 | Purpose                                                 |
 | --------------------- | ------------------------------------ | ------------------------------------------------------- |
 | `spec`                | `Spec \| null`                       | The UI spec (may be partial while streaming)            |
-| `registry`            | `ComponentRegistry`                  | Catalog type → Angular component                        |
+| `registry`            | `ComponentRegistry`                  | Catalog type → component; required unless provided      |
 | `loading`             | `boolean`                            | Suppress missing-element warnings while streaming       |
 | `fallback`            | `Type<unknown>`                      | Component for unknown types                             |
 | `validate`            | `'off' \| 'warn' \| 'strict'`        | Check the settled spec's structure (default `'off'`)    |
@@ -1059,6 +1115,8 @@ Everything from `@json-render/core` (types, `createStateStore`, `nestedToFlat`,
 
 Output: `(stateChange)` — batched `{ path, value }[]` in uncontrolled mode.
 
+Every input but `spec`, `loading`, `state` and `store` can come from `provideJsonRender` instead; see [Defaults for the whole app](#defaults-for-the-whole-app).
+
 ## License
 
 Apache-2.0

package/fesm2022/ngx-json-render-router.mjs

@@ -0,0 +1,71 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+/**
+ * A `navigate` for `<json-render>` that hands a spec's
+ * `onSuccess: { navigate }` path to the Angular `Router`, but only a path
+ * inside the app that `allow` lets through. Anything else is refused with a
+ * warning and goes nowhere.
+ *
+ * Call it in an injection context — in the function form of
+ * `provideJsonRender`, or in a field initializer:
+ *
+ * ```ts
+ * provideJsonRender(() => ({
+ *   registry,
+ *   navigate: injectRouterNavigate({ allow: ['/thanks', /^\/orders\/\d+$/] }),
+ * }));
+ * ```
+ *
+ * Whatever `allow` says, a path is refused unless it starts with a single
+ * `/`: no other origin (`https://…`, `//host`), no scheme (`javascript:…`),
+ * no path relative to wherever the user happens to be. A backslash or a
+ * control character refuses it too, since browsers read `/\host` as
+ * `//host`.
+ */
+function injectRouterNavigate(options) {
+    const router = inject(Router);
+    const allowed = toPredicate(options.allow);
+    return (path) => {
+        if (!isAppPath(path)) {
+            console.warn(`[ngx-json-render] Refused to navigate to ${JSON.stringify(path)}: a spec may only navigate to a path inside the app, starting with a single "/".`);
+            return;
+        }
+        const pathname = path.split(/[?#]/, 1)[0];
+        if (!allowed(pathname)) {
+            console.warn(`[ngx-json-render] Refused to navigate to "${path}": "${pathname}" is not in the allow list given to injectRouterNavigate.`);
+            return;
+        }
+        router.navigateByUrl(path).catch((error) => {
+            console.warn(`[ngx-json-render] Navigation to "${path}" failed.`, error);
+        });
+    };
+}
+function isAppPath(path) {
+    return (typeof path === 'string' &&
+        /^\/(?![/\\])/.test(path) &&
+        !/[\\\u0000-\u001f\u007f]/.test(path));
+}
+function toPredicate(allow) {
+    if (typeof allow === 'function')
+        return allow;
+    return (path) => allow.some((rule) => {
+        if (typeof rule === 'string')
+            return rule === path;
+        // A global or sticky RegExp keeps `lastIndex` between calls; reset it so
+        // one rule answers the same way for the same path every time.
+        rule.lastIndex = 0;
+        return rule.test(path);
+    });
+}
+
+/*
+ * Public API Surface of ngx-json-render/router
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { injectRouterNavigate };
+//# sourceMappingURL=ngx-json-render-router.mjs.map

package/fesm2022/ngx-json-render-router.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-json-render-router.mjs","sources":["../../../projects/ngx-json-render/router/src/router-navigate.ts","../../../projects/ngx-json-render/router/src/public-api.ts","../../../projects/ngx-json-render/router/src/ngx-json-render-router.ts"],"sourcesContent":["import { inject } from '@angular/core';\nimport { Router } from '@angular/router';\n\n/** Which paths a spec may send the app to. */\nexport interface RouterNavigateOptions {\n  /**\n   * The paths a spec may navigate to. A string must equal the path exactly; a\n   * `RegExp` is tested against it; a function decides on its own. The path is\n   * what comes before any `?` or `#`, so a query string or fragment neither\n   * helps nor hurts a match, and is passed on to the router as written.\n   *\n   * Required: a spec is model output, and the app is what knows which of its\n   * routes a generated UI has any business opening.\n   */\n  readonly allow: readonly (string | RegExp)[] | ((path: string) => boolean);\n}\n\n/**\n * A `navigate` for `<json-render>` that hands a spec's\n * `onSuccess: { navigate }` path to the Angular `Router`, but only a path\n * inside the app that `allow` lets through. Anything else is refused with a\n * warning and goes nowhere.\n *\n * Call it in an injection context — in the function form of\n * `provideJsonRender`, or in a field initializer:\n *\n * ```ts\n * provideJsonRender(() => ({\n *   registry,\n *   navigate: injectRouterNavigate({ allow: ['/thanks', /^\\/orders\\/\\d+$/] }),\n * }));\n * ```\n *\n * Whatever `allow` says, a path is refused unless it starts with a single\n * `/`: no other origin (`https://…`, `//host`), no scheme (`javascript:…`),\n * no path relative to wherever the user happens to be. A backslash or a\n * control character refuses it too, since browsers read `/\\host` as\n * `//host`.\n */\nexport function injectRouterNavigate(\n  options: RouterNavigateOptions,\n): (path: string) => void {\n  const router = inject(Router);\n  const allowed = toPredicate(options.allow);\n  return (path) => {\n    if (!isAppPath(path)) {\n      console.warn(\n        `[ngx-json-render] Refused to navigate to ${JSON.stringify(path)}: a spec may only navigate to a path inside the app, starting with a single \"/\".`,\n      );\n      return;\n    }\n    const pathname = path.split(/[?#]/, 1)[0];\n    if (!allowed(pathname)) {\n      console.warn(\n        `[ngx-json-render] Refused to navigate to \"${path}\": \"${pathname}\" is not in the allow list given to injectRouterNavigate.`,\n      );\n      return;\n    }\n    router.navigateByUrl(path).catch((error: unknown) => {\n      console.warn(`[ngx-json-render] Navigation to \"${path}\" failed.`, error);\n    });\n  };\n}\n\nfunction isAppPath(path: unknown): path is string {\n  return (\n    typeof path === 'string' &&\n    /^\\/(?![/\\\\])/.test(path) &&\n    !/[\\\\\\u0000-\\u001f\\u007f]/.test(path)\n  );\n}\n\nfunction toPredicate(\n  allow: RouterNavigateOptions['allow'],\n): (path: string) => boolean {\n  if (typeof allow === 'function') return allow;\n  return (path) =>\n    allow.some((rule) => {\n      if (typeof rule === 'string') return rule === path;\n      // A global or sticky RegExp keeps `lastIndex` between calls; reset it so\n      // one rule answers the same way for the same path every time.\n      rule.lastIndex = 0;\n      return rule.test(path);\n    });\n}\n","/*\n * Public API Surface of ngx-json-render/router\n */\n\nexport {\n  injectRouterNavigate,\n  type RouterNavigateOptions,\n} from './router-navigate';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAiBA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,SAAU,oBAAoB,CAClC,OAA8B,EAAA;AAE9B,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7B,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC;IAC1C,OAAO,CAAC,IAAI,KAAI;AACd,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;AACpB,YAAA,OAAO,CAAC,IAAI,CACV,CAAA,yCAAA,EAA4C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA,gFAAA,CAAkF,CACnJ;YACD;QACF;AACA,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACzC,QAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YACtB,OAAO,CAAC,IAAI,CACV,CAAA,0CAAA,EAA6C,IAAI,CAAA,IAAA,EAAO,QAAQ,CAAA,yDAAA,CAA2D,CAC5H;YACD;QACF;QACA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAc,KAAI;YAClD,OAAO,CAAC,IAAI,CAAC,CAAA,iCAAA,EAAoC,IAAI,CAAA,SAAA,CAAW,EAAE,KAAK,CAAC;AAC1E,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC;AACH;AAEA,SAAS,SAAS,CAAC,IAAa,EAAA;AAC9B,IAAA,QACE,OAAO,IAAI,KAAK,QAAQ;AACxB,QAAA,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AACzB,QAAA,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC;AAEzC;AAEA,SAAS,WAAW,CAClB,KAAqC,EAAA;IAErC,IAAI,OAAO,KAAK,KAAK,UAAU;AAAE,QAAA,OAAO,KAAK;AAC7C,IAAA,OAAO,CAAC,IAAI,KACV,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAI;QAClB,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE,OAAO,IAAI,KAAK,IAAI;;;AAGlD,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC;AAClB,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,IAAA,CAAC,CAAC;AACN;;ACpFA;;AAEG;;ACFH;;AAEG;;"}

package/fesm2022/ngx-json-render.mjs

@@ -2377,6 +2377,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
   `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { elementKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementKey", required: true }] }] } });
 
+/**
+ * The defaults the nearest {@link provideJsonRender} supplies, already merged
+ * with any provider above it.
+ */
+const JSON_RENDER_CONFIG = new InjectionToken('JSON_RENDER_CONFIG');
+/**
+ * Set renderer defaults once instead of on every `<json-render>`:
+ *
+ * ```ts
+ * bootstrapApplication(App, { providers: [provideJsonRender({ registry })] });
+ * ```
+ *
+ * ```html
+ * <json-render [spec]="m.spec" />
+ * ```
+ *
+ * Pass a function to build the defaults with `inject()`, for handlers that
+ * call your services:
+ *
+ * ```ts
+ * provideJsonRender(() => {
+ *   const orders = inject(OrderService);
+ *   return { registry, handlers: { cancelOrder: (p) => orders.cancel(p['id']) } };
+ * });
+ * ```
+ *
+ * Works in application, route and component `providers`. A provider below
+ * another extends it with the same rules an element input does: its own
+ * values replace, its named vocabularies merge.
+ */
+function provideJsonRender(config) {
+    return [
+        {
+            provide: JSON_RENDER_CONFIG,
+            useFactory: () => {
+                const outer = inject(JSON_RENDER_CONFIG, {
+                    optional: true,
+                    skipSelf: true,
+                });
+                const own = typeof config === 'function' ? config() : config;
+                return outer ? mergeJsonRenderConfig(outer, own) : own;
+            },
+        },
+    ];
+}
+/** `inner` over `outer`, by the rules {@link JsonRenderConfig} describes. */
+function mergeJsonRenderConfig(outer, inner) {
+    const merged = { ...outer };
+    for (const [key, value] of Object.entries(inner)) {
+        if (value !== undefined && value !== null) {
+            merged[key] = value;
+        }
+    }
+    merged.handlers = mergeByName(outer.handlers, inner.handlers);
+    merged.functions = mergeByName(outer.functions, inner.functions);
+    merged.validationFunctions = mergeByName(outer.validationFunctions, inner.validationFunctions);
+    merged.directives = mergeDirectives(outer.directives, inner.directives);
+    return merged;
+}
+/**
+ * Two name → value maps as one, `inner` winning a name both define. Returns
+ * whichever is given when only one is, so an unmerged map keeps its identity.
+ *
+ * @internal
+ */
+function mergeByName(outer, inner) {
+    if (!outer)
+        return inner ?? undefined;
+    if (!inner)
+        return outer;
+    return { ...outer, ...inner };
+}
+/**
+ * Two directive lists as one, `inner` winning a name both define — the
+ * directive registry keeps the last definition of a name.
+ *
+ * @internal
+ */
+function mergeDirectives(outer, inner) {
+    if (!outer)
+        return inner ?? undefined;
+    if (!inner)
+        return outer;
+    return [...outer, ...inner];
+}
+
 const CLEAN = {
     spec: null,
     issues: [],
@@ -2526,8 +2612,11 @@ function reportSpecCheck(check, mode) {
 class JsonRenderer {
     /** The UI spec to render (may be partial while streaming). */
     spec = input.required(...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
-    /** Component registry mapping catalog type names to Angular components. */
-    registry = input.required(...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    /**
+     * Component registry mapping catalog type names to Angular components.
+     * Required unless a {@link provideJsonRender} above supplies one.
+     */
+    registry = input(undefined, ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
     /** Whether the spec is currently loading/streaming. */
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** Fallback component for unknown types. */
@@ -2544,7 +2633,7 @@ class JsonRenderer {
      * The check is skipped while `loading` is true: a spec that is still
      * arriving is expected to reference children that have not streamed in yet.
      */
-    validate = input('off', ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
+    validate = input(undefined, ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
     /**
      * Caps on what the spec may cost the browser: `maxElements`, `maxDepth` and
      * `maxRepeatItems`. Unset by default, and each field is independently
@@ -2601,34 +2690,52 @@ class JsonRenderer {
     stateStore;
     /** The action dispatcher of this renderer. */
     actions;
+    /**
+     * The nearest {@link provideJsonRender}'s defaults. Every option input
+     * falls through to these when left `null` or `undefined`; see
+     * {@link JsonRenderConfig} for the merge rules.
+     */
+    config = inject(JSON_RENDER_CONFIG, { optional: true }) ?? {};
+    mode = computed(() => this.validate() ?? this.config.validate ?? 'off', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    limits = computed(() => this.renderLimits() ?? this.config.renderLimits ?? null, ...(ngDevMode ? [{ debugName: "limits" }] : /* istanbul ignore next */ []));
+    specCatalog = computed(() => this.catalog() ?? this.config.catalog ?? null, ...(ngDevMode ? [{ debugName: "specCatalog" }] : /* istanbul ignore next */ []));
     /**
      * The spec as checked, and what the check found. While `loading`, the mode
      * is forced off: the spec is still arriving, and the missing children it
      * refers to are the normal state of a stream, not a defect.
      */
-    checked = computed(() => checkSpec(this.spec(), this.loading() ? 'off' : this.validate(), {
-        limits: this.renderLimits(),
-        catalog: this.catalog(),
+    checked = computed(() => checkSpec(this.spec(), this.loading() ? 'off' : this.mode(), {
+        limits: this.limits(),
+        catalog: this.specCatalog(),
     }), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     constructor() {
         const root = inject(JsonRenderRootContext);
         // The fixed spec, not the input: a `visible` the check moved out of
         // `props` has to be the one the tree renders, or the fix is cosmetic.
         root.spec = computed(() => this.checked().spec, ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
-        root.registry = this.registry;
+        const config = this.config;
+        // Read only once an element needs a component, like a required input:
+        // a renderer with no spec yet has no use for one.
+        root.registry = computed(() => {
+            const registry = this.registry() ?? config.registry;
+            if (!registry) {
+                throw new Error('[ngx-json-render] <json-render> has no registry. Bind [registry], or supply one for the whole app with provideJsonRender({ registry }).');
+            }
+            return registry;
+        }, ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
         root.loading = this.loading;
-        root.fallback = this.fallback;
-        root.limits = this.renderLimits;
-        root.catalog = this.catalog;
+        root.fallback = computed(() => this.fallback() ?? config.fallback ?? null, ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        root.limits = this.limits;
+        root.catalog = this.specCatalog;
         root.store = this.store;
         root.initialState = computed(() => this.state() ?? this.spec()?.state ?? {}, ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
-        root.handlers = this.handlers;
-        root.onAction = this.onAction;
-        root.navigate = this.navigate;
-        root.validationFunctions = this.validationFunctions;
-        root.functions = this.functions;
+        root.handlers = computed(() => mergeByName(config.handlers, this.handlers()), ...(ngDevMode ? [{ debugName: "handlers" }] : /* istanbul ignore next */ []));
+        root.onAction = computed(() => this.onAction() ?? config.onAction ?? null, ...(ngDevMode ? [{ debugName: "onAction" }] : /* istanbul ignore next */ []));
+        root.navigate = computed(() => this.navigate() ?? config.navigate ?? null, ...(ngDevMode ? [{ debugName: "navigate" }] : /* istanbul ignore next */ []));
+        root.validationFunctions = computed(() => mergeByName(config.validationFunctions, this.validationFunctions()), ...(ngDevMode ? [{ debugName: "validationFunctions" }] : /* istanbul ignore next */ []));
+        root.functions = computed(() => mergeByName(config.functions, this.functions()), ...(ngDevMode ? [{ debugName: "functions" }] : /* istanbul ignore next */ []));
         root.directiveRegistry = computed(() => {
-            const definitions = this.directives();
+            const definitions = mergeDirectives(config.directives, this.directives());
             return definitions ? createDirectiveRegistry(definitions) : undefined;
         }, ...(ngDevMode ? [{ debugName: "directiveRegistry" }] : /* istanbul ignore next */ []));
         root.emitStateChange = (changes) => this.stateChange.emit(changes);
@@ -2644,7 +2751,25 @@ class JsonRenderer {
         effect(() => {
             if (this.loading())
                 return;
-            reportSpecCheck(this.checked(), this.validate());
+            reportSpecCheck(this.checked(), this.mode());
+        });
+        // With validation off, a `root` that names no element renders nothing and
+        // nothing says why — the first mistake a hand-written spec tends to have.
+        // Skipped while loading (a stream sends `/root` before its element) and
+        // under `warn`/`strict`, where the check already reports `root_not_found`.
+        // Once per root key, not once per change detection run.
+        const warnedRoots = new Set();
+        effect(() => {
+            if (this.loading() || this.mode() !== 'off')
+                return;
+            const spec = this.checked().spec;
+            if (!spec?.root)
+                return;
+            const root = spec.root;
+            if (spec.elements?.[root] || warnedRoots.has(root))
+                return;
+            warnedRoots.add(root);
+            console.warn(`[ngx-json-render] root "${root}" is not in elements; nothing is rendered.`);
         });
     }
     rootKey = computed(() => {
@@ -2657,7 +2782,7 @@ class JsonRenderer {
         // A spec whose errors survived the fixes does not render under `strict`.
         // Reporting it and drawing half of it anyway is the behaviour the mode
         // exists to refuse.
-        if (this.validate() === 'strict' && checked.hasErrors)
+        if (this.mode() === 'strict' && checked.hasErrors)
             return null;
         const spec = checked.spec;
         return spec?.root && spec.elements?.[spec.root] ? spec.root : null;
@@ -2696,7 +2821,7 @@ class JsonRenderer {
         });
     }, ...(ngDevMode ? [{ debugName: "confirmInjector" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JsonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JsonRenderer, isStandalone: true, selector: "json-render", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, renderLimits: { classPropertyName: "renderLimits", publicName: "renderLimits", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, onAction: { classPropertyName: "onAction", publicName: "onAction", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, validationFunctions: { classPropertyName: "validationFunctions", publicName: "validationFunctions", isSignal: true, isRequired: false, transformFunction: null }, functions: { classPropertyName: "functions", publicName: "functions", isSignal: true, isRequired: false, transformFunction: null }, directives: { classPropertyName: "directives", publicName: "directives", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JsonRenderer, isStandalone: true, selector: "json-render", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, renderLimits: { classPropertyName: "renderLimits", publicName: "renderLimits", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, onAction: { classPropertyName: "onAction", publicName: "onAction", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, validationFunctions: { classPropertyName: "validationFunctions", publicName: "validationFunctions", isSignal: true, isRequired: false, transformFunction: null }, functions: { classPropertyName: "functions", publicName: "functions", isSignal: true, isRequired: false, transformFunction: null }, directives: { classPropertyName: "directives", publicName: "directives", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, providers: [
             JsonRenderRootContext,
             JsonRenderStateService,
             JsonRenderValidationService,
@@ -2745,7 +2870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       }
     }
   `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], renderLimits: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderLimits", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], onAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "onAction", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], validationFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationFunctions", required: false }] }], functions: [{ type: i0.Input, args: [{ isSignal: true, alias: "functions", required: false }] }], directives: [{ type: i0.Input, args: [{ isSignal: true, alias: "directives", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { spec: [{ type: i0.Input, args: [{ isSignal: true, alias: "spec", required: true }] }], registry: [{ type: i0.Input, args: [{ isSignal: true, alias: "registry", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], renderLimits: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderLimits", required: false }] }], catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], handlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlers", required: false }] }], onAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "onAction", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], validationFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationFunctions", required: false }] }], functions: [{ type: i0.Input, args: [{ isSignal: true, alias: "functions", required: false }] }], directives: [{ type: i0.Input, args: [{ isSignal: true, alias: "directives", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }] } });
 
 /**
  * Provides the repeat scope (item, index, absolute base path) to the elements
@@ -3886,5 +4011,5 @@ function injectChatUI(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, formatSpecCheckIssues, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage, ɵregisterStreamObserver };
+export { CONFIRM_CONTEXT, ELEMENT_KEY, JR_CONFIRM_DIALOG, JR_CONFIRM_LABELS, JSON_RENDER_CONFIG, JrChildren, JrConfirmDialog, JrElement, JrRepeatScope, JsonRenderActionsService, JsonRenderRootContext, JsonRenderStateService, JsonRenderValidationService, JsonRenderer, RENDER_CONTEXT, REPEAT_SCOPE, applyPatch, buildSpecFromParts, checkSpec, createStoreSetState, defineRegistry, flatToTree, formatSpecCheckIssues, getTextFromParts, injectAction, injectActions, injectBoundProp, injectChatUI, injectConfirmContext, injectDevtoolsActive, injectElementKey, injectFieldValidation, injectRenderContext, injectRepeatScope, injectStateBinding, injectStateStore, injectStateValue, injectUIStream, injectValidation, isActionCancelled, jsonRenderMessage, provideJsonRender, ɵregisterStreamObserver };
 //# sourceMappingURL=ngx-json-render.mjs.map