ngx-json-render 0.8.2 → 0.9.0

package/fesm2022/ngx-json-render.mjs

@@ -23,6 +23,11 @@ class JsonRenderRootContext {
      * they apply whatever `validate` is set to.
      */
     limits = EMPTY;
+    /**
+     * The catalog the spec was generated for. While loading, an element whose
+     * props do not pass its component's schema waits for them.
+     */
+    catalog = EMPTY;
     /** External store (controlled mode). */
     store = EMPTY;
     /** Initial state (uncontrolled mode); falls back to `spec.state`. */
@@ -1106,1211 +1111,1271 @@ function injectDevtoolsActive() {
 }
 
 /**
- * The state paths an element's expressions can read, or `null` when that
- * can't be known from the spec.
+ * A hostile spec can fail the catalog's schema in as many places as it has
+ * properties. Report enough to act on and stop; the spec is refused either
+ * way, and a console full of them helps nobody.
+ */
+const MAX_REPORTED_PROP_ISSUES = 20;
+/**
+ * Whether this element's `repeat` descends into the item it is already inside,
+ * rather than re-reading a fixed path in state.
  *
- * Worked out from the spec alone, before anything resolves, so that an element
- * can depend on those paths rather than on the whole state. The answer may
- * name more paths than a given resolution reads — both branches of a `$cond`,
- * say — but never fewer: a path left out would be a write the element misses,
- * and it would keep showing the old value with nothing in the console.
+ * A relative statePath — `{"$item": "children"}` — resolves against the
+ * enclosing item, so each pass reads one level further into the data and the
+ * recursion ends where the data does. A plain string is absolute: every pass
+ * reads the same array, and a spec that re-enters itself through one never
+ * terminates.
+ */
+function descendsIntoItems(element) {
+    const repeat = element.repeat;
+    return repeat !== undefined && typeof repeat.statePath !== 'string';
+}
+/** Every key an element renders below itself: `children` plus every slot. */
+function childKeysOf(element) {
+    const slots = element.slots;
+    if (!slots)
+        return element.children ?? [];
+    const fromSlots = Object.values(slots).flat();
+    return element.children ? [...element.children, ...fromSlots] : fromSlots;
+}
+/**
+ * Walk the element graph once for depth and cycles.
  *
- * `null` is the safe answer, and it is given whenever the spec holds something
- * this reader does not model:
+ * Iterative on purpose. A recursive walk would blow the stack on exactly the
+ * specs this exists to catch, which would make the guard a second way to
+ * crash rather than the fix for the first.
  *
- * - a registered directive, whose `resolve` receives the whole context and may
- *   read any path at all;
- * - a `$`-prefixed key it doesn't recognise, which is what an expression added
- *   to core after this was written would look like;
- * - a read of the whole state (`''` or `'/'`), and a condition it can't parse.
+ * Depth is measured from `spec.root`, because that is what renders. Cycles
+ * are swept for across every element, including the ones no parent reaches:
+ * an unreachable cycle is still a defect, and one edit away from a reachable
+ * one.
  *
- * The walk mirrors core's `resolvePropValue` and `evaluateVisibility`, in the
- * same order, because the order decides which expression an object is.
+ * Not every element that reaches itself is a defect, though. Drawing a tree —
+ * a comment thread, a file browser, a nested menu — means an element that
+ * repeats over a relative path and renders itself for each item, and that ends
+ * when the data does. A back edge is only reported when nothing along it
+ * descends into the data, which is the case that cannot end.
+ *
+ * `depthBelow` is memoised per element, so a shared subtree costs one visit
+ * instead of one per path into it — without that, a spec whose elements each
+ * name the next two is exponential to check. The memo makes the reported
+ * depth a lower bound once a cycle has been cut, since which edge closes the
+ * cycle depends on the order the walk reached it. The cycle is reported as an
+ * error of its own, which is the finding worth acting on.
  */
-function collectStateReads(element, directives, repeatBasePath) {
-    const reader = new StateReader(directives, repeatBasePath);
-    const understood = reader.condition(element.visible) &&
-        Object.values(element.props ?? {}).every((value) => reader.value(value));
-    return understood ? reader.paths : null;
+function analyseSpecGraph(spec) {
+    const elements = spec.elements ?? {};
+    const cycles = new Set();
+    const depthBelow = new Map();
+    const onPath = new Set();
+    const walkFrom = (start) => {
+        const first = elements[start];
+        if (!first || depthBelow.has(start))
+            return;
+        const stack = [
+            { key: start, kids: childKeysOf(first), next: 0, deepest: 0 },
+        ];
+        onPath.add(start);
+        while (stack.length > 0) {
+            const frame = stack[stack.length - 1];
+            if (frame.next < frame.kids.length) {
+                const childKey = frame.kids[frame.next++];
+                const memo = depthBelow.get(childKey);
+                if (memo !== undefined) {
+                    frame.deepest = Math.max(frame.deepest, memo);
+                    continue;
+                }
+                // A child that closes the cycle is not followed — that is what keeps
+                // this walk finite — and not counted towards depth either.
+                if (onPath.has(childKey)) {
+                    const from = stack.findIndex((frame) => frame.key === childKey);
+                    const descends = stack
+                        .slice(from)
+                        .some((frame) => descendsIntoItems(elements[frame.key]));
+                    if (!descends)
+                        cycles.add(childKey);
+                    continue;
+                }
+                const child = elements[childKey];
+                // A child the spec never defined is validateSpec's finding, not ours.
+                if (!child)
+                    continue;
+                onPath.add(childKey);
+                stack.push({
+                    key: childKey,
+                    kids: childKeysOf(child),
+                    next: 0,
+                    deepest: 0,
+                });
+                continue;
+            }
+            stack.pop();
+            onPath.delete(frame.key);
+            const depth = frame.deepest + 1;
+            depthBelow.set(frame.key, depth);
+            const parent = stack[stack.length - 1];
+            if (parent)
+                parent.deepest = Math.max(parent.deepest, depth);
+        }
+    };
+    if (spec.root)
+        walkFrom(spec.root);
+    const depth = (spec.root ? depthBelow.get(spec.root) : undefined) ?? 0;
+    for (const key of Object.keys(elements))
+        walkFrom(key);
+    return { depth, cycles: [...cycles] };
 }
-function isObject(value) {
-    return typeof value === 'object' && value !== null;
+/** Report a cycle, naming the element that is its own descendant. */
+function cycleIssue(key) {
+    return {
+        severity: 'error',
+        code: 'cycle',
+        elementKey: key,
+        message: `Element "${key}" renders itself against the same data, which never terminates. The cycle is broken where it closes — the repeated element does not render a second time — but the spec cannot be drawn as written. A tree that recurses needs a repeat with a relative statePath, like {"$item": "children"}.`,
+    };
 }
-/** Comparison operators a single condition may carry, as core reads them. */
-const COMPARISONS = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'];
-class StateReader {
-    directives;
-    repeatBasePath;
-    paths = new Set();
-    constructor(directives, repeatBasePath) {
-        this.directives = directives;
-        this.repeatBasePath = repeatBasePath;
+/** Report a breached element-count cap. */
+function elementCountIssue(count, limit) {
+    return {
+        severity: 'error',
+        code: 'too_many_elements',
+        message: `Spec has ${count} elements, over the limit of ${limit}. Nothing is rendered: renderLimits.maxElements is a cap on the whole spec.`,
+    };
+}
+/** Report a breached depth cap. */
+function depthIssue(depth, limit) {
+    return {
+        severity: 'error',
+        code: 'too_deep',
+        message: `Spec nests ${depth} levels deep, over the limit of ${limit}. Elements below level ${limit} do not render.`,
+    };
+}
+/**
+ * Check a spec against a catalog: the component types it names, then the
+ * catalog's spec schema, then each element's props against its own
+ * component's schema.
+ *
+ * The props need that pass of their own. Core builds one schema for the whole
+ * spec, and it gives an element's props a component's schema only when the
+ * catalog has exactly one component; with more, every element's props are an
+ * open record, whatever its `type`. So `catalog.validate` holds an element to
+ * its shape — `children`, a `type` from the catalog — and not to its props.
+ *
+ * Whatever that schema did say about the props of an element checked here is
+ * dropped: with a one-component catalog it would be reported twice, and it
+ * judges expressions this pass knows to leave alone.
+ *
+ * The schema passes are skipped while a type is unknown. That is an error on
+ * its own, and the spec schema would only restate it as a `type` outside the
+ * ones it accepts.
+ */
+function catalogIssues(spec, catalog) {
+    const elements = Object.entries(spec.elements ?? {});
+    const known = new Set(catalog.componentNames);
+    const unknown = [];
+    for (const [key, element] of elements) {
+        if (known.has(element.type))
+            continue;
+        unknown.push({
+            severity: 'error',
+            code: 'unknown_component',
+            elementKey: key,
+            message: `Element "${key}" has type "${element.type}", which this catalog does not define. Nothing renders for it.`,
+        });
     }
-    /** A prop value. Returns false when it can read state this can't name. */
-    value(value) {
-        if (!isObject(value))
-            return true;
-        if (typeof value['$state'] === 'string')
-            return this.state(value['$state']);
-        if (typeof value['$item'] === 'string')
-            return this.item(value['$item']);
-        if ('$index' in value && value['$index'] === true)
-            return true;
-        // A two-way binding reads the path it writes back to.
-        if (typeof value['$bindState'] === 'string') {
-            return this.state(value['$bindState']);
-        }
-        if (typeof value['$bindItem'] === 'string') {
-            return this.boundItem(value['$bindItem']);
-        }
-        if ('$cond' in value && '$then' in value && '$else' in value) {
-            return (this.condition(value['$cond']) &&
-                this.value(value['$then']) &&
-                this.value(value['$else']));
-        }
-        if (typeof value['$computed'] === 'string') {
-            // The function is handed its resolved arguments and nothing else.
-            const args = value['args'];
-            return (!args || Object.values(Object(args)).every((arg) => this.value(arg)));
-        }
-        if (typeof value['$template'] === 'string') {
-            return this.template(value['$template']);
-        }
-        if (Array.isArray(value))
-            return value.every((item) => this.value(item));
-        if (this.directives) {
-            for (const name of this.directives.keys()) {
-                if (name in value)
-                    return false;
-            }
-        }
-        for (const [key, entry] of Object.entries(value)) {
-            if (key.startsWith('$') || !this.value(entry))
-                return false;
-        }
-        return true;
+    if (unknown.length > 0)
+        return unknown;
+    const schemas = new Map();
+    for (const [key, element] of elements) {
+        const schema = propsSchemaOf(catalog.data, element.type);
+        if (schema)
+            schemas.set(key, schema);
     }
-    /** A `visible` condition, or the condition of a `$cond`. */
-    condition(condition) {
-        if (condition === undefined || typeof condition === 'boolean')
-            return true;
-        if (Array.isArray(condition)) {
-            return condition.every((single) => this.singleCondition(single));
-        }
-        if (!isObject(condition))
-            return false;
-        for (const group of ['$and', '$or']) {
-            if (group in condition) {
-                const children = condition[group];
-                return (Array.isArray(children) &&
-                    children.every((child) => this.condition(child)));
-            }
-        }
-        return this.singleCondition(condition);
-    }
-    singleCondition(condition) {
-        if (!isObject(condition))
-            return false;
-        let understood;
-        if ('$index' in condition) {
-            understood = true;
-        }
-        else if ('$item' in condition) {
-            const item = condition['$item'];
-            understood = typeof item === 'string' && this.item(item);
-        }
-        else {
-            // Core reads `$state` here without checking it: anything but a string
-            // path reads the whole state.
-            const path = condition['$state'];
-            understood = typeof path === 'string' && this.state(path);
-        }
-        // Core looks only at the first operator present. Reading all of them is
-        // a superset of that.
-        for (const operator of COMPARISONS) {
-            const operand = condition[operator];
-            if (isObject(operand) && typeof operand['$state'] === 'string') {
-                understood = this.state(operand['$state']) && understood;
-            }
-        }
-        return understood;
+    const found = specSchemaIssues(spec, catalog).filter(({ path }) => !(path[0] === 'elements' &&
+        typeof path[1] === 'string' &&
+        schemas.has(path[1]) &&
+        path[2] === 'props'));
+    for (const [key, element] of elements) {
+        const room = MAX_REPORTED_PROP_ISSUES - found.length;
+        if (room <= 0)
+            break;
+        const schema = schemas.get(key);
+        if (schema)
+            found.push(...propsIssues(key, element, schema, room));
     }
-    template(template) {
-        for (const [, placeholder] of template.matchAll(/\$\{([^}]+)\}/g)) {
-            if (placeholder.startsWith('/')) {
-                if (!this.state(placeholder))
-                    return false;
-                continue;
-            }
-            // Core tries the repeat item first and falls back to a state path of
-            // the same name when the item has nothing there.
-            if (!this.item(placeholder) || !this.state(`/${placeholder}`)) {
-                return false;
-            }
-        }
+    return found.slice(0, MAX_REPORTED_PROP_ISSUES).map(toSpecCheckIssue);
+}
+/**
+ * Whether an element's props have arrived: they pass its component's schema,
+ * leaving out what the schema says about expressions, the same way
+ * {@link catalogIssues} judges them. The renderer holds an element back on
+ * this while the spec streams.
+ *
+ * The props are taken as written in the spec, not as resolved. What a stream
+ * leaves out is spec, and an expression that is there has arrived, whatever
+ * it resolves to; checking the spec also keeps state writes from re-running
+ * the schema.
+ *
+ * True when the catalog declares no schema that can be called for the type:
+ * there is nothing to wait for. False when the schema throws, or fails
+ * without saying where — the element mounts once loading ends either way.
+ */
+function propsArrived(element, catalog) {
+    const schema = propsSchemaOf(catalog.data, element.type);
+    if (!schema)
         return true;
+    const props = element.props ?? {};
+    let result;
+    try {
+        result = schema.safeParse(props);
     }
-    state(path) {
-        if (path === '' || path === '/')
-            return false;
-        this.paths.add(path);
+    catch {
+        return false;
+    }
+    if (result.success)
         return true;
+    const issues = readIssues(result.error);
+    return (issues.length > 0 &&
+        issues.every(({ path }) => reachesExpression(props, path)));
+}
+/**
+ * The props schema a catalog declares for a component type, if it declares
+ * one that can be called.
+ */
+function propsSchemaOf(data, type) {
+    const components = data
+        ?.components;
+    if (typeof components !== 'object' ||
+        components === null ||
+        !Object.hasOwn(components, type)) {
+        return undefined;
     }
-    /**
-     * A `$bindItem`, joined the way core joins it — which is not quite how it
-     * joins an `$item` read. Outside a repeat it resolves to nothing.
-     */
-    boundItem(itemPath) {
-        if (this.repeatBasePath === undefined)
-            return true;
-        return this.state(itemPath === ''
-            ? this.repeatBasePath
-            : `${this.repeatBasePath}/${itemPath}`);
+    const props = components[type]?.props;
+    return typeof props
+        ?.safeParse === 'function'
+        ? props
+        : undefined;
+}
+/** What the catalog's spec schema reported, with paths rooted at the spec. */
+function specSchemaIssues(spec, catalog) {
+    try {
+        const result = catalog.validate(spec);
+        return result.success ? [] : readIssues(result.error);
     }
-    /**
-     * A read of the repeat item, as the state path it sits at. The item value
-     * reaches the element on its own, but only as the same object when an
-     * external store edits it in place, so the path is what notices the edit.
-     */
-    item(itemPath) {
-        if (this.repeatBasePath === undefined)
-            return true;
-        const path = resolveRepeatStatePath({ $item: itemPath }, this.repeatBasePath);
-        return path !== undefined && this.state(path);
+    catch (error) {
+        return [{ path: [], message: threwMessage('the catalog schema', error) }];
     }
 }
-
-/**
- * The render context of the element currently being rendered.
- * Provided by the renderer for every catalog component instance.
- */
-const RENDER_CONTEXT = new InjectionToken('ngx-json-render RENDER_CONTEXT');
-/**
- * The spec key of the element currently being rendered. Provided alongside
- * {@link RENDER_CONTEXT} for every catalog component instance.
- */
-const ELEMENT_KEY = new InjectionToken('ngx-json-render ELEMENT_KEY');
-/**
- * The current repeat scope. Present only for elements rendered inside a
- * `repeat` block.
- */
-const REPEAT_SCOPE = new InjectionToken('ngx-json-render REPEAT_SCOPE');
-/**
- * This element's position in the render tree. Provided by `<jr-element>` for
- * everything it renders below itself, so each element can see its own depth
- * and its own ancestry.
- *
- * @internal Not part of the public API: it exists so the renderer can refuse
- * to draw an element that is its own ancestor, and to enforce
- * `renderLimits.maxDepth`.
- */
-const RENDER_PATH = new InjectionToken('ngx-json-render RENDER_PATH');
-/**
- * Whether an element that skipped a state write checks that it was right to:
- * that resolving it against the whole state would not give anything else.
- * On in dev mode, off in production.
- *
- * @internal Not part of the public API. The check calls `$computed`
- * functions again, so tests that count those calls turn it off.
- */
-const CHECK_SKIPPED_WRITES = new InjectionToken('ngx-json-render CHECK_SKIPPED_WRITES', { providedIn: 'root', factory: () => isDevMode() });
 /**
- * Inject the render context inside a catalog component.
+ * What an element's component schema says about its props, leaving out what
+ * it says about expressions, with paths rooted at the spec.
  *
- * @example
- * ```ts
- * @Component({
- *   selector: 'app-button',
- *   template: `<button (click)="ctx.emit('press')">{{ ctx.props().label }}</button>`,
- * })
- * export class ButtonComponent {
- *   readonly ctx = injectRenderContext<{ label: string }>();
- * }
- * ```
+ * A schema that throws counts as a rejection, not a crash. Real ones do:
+ * `ValidationConfigSchema`, which every Material input's `validation` prop
+ * uses, recurses through `enabled` and overflows the stack a thousand
+ * `$and`s deep.
  */
-function injectRenderContext() {
-    const ctx = inject(RENDER_CONTEXT, { optional: true });
-    if (!ctx) {
-        throw new Error('injectRenderContext() must be used inside a component rendered by <json-render>');
+function propsIssues(key, element, schema, room) {
+    const at = ['elements', key, 'props'];
+    let result;
+    try {
+        result = schema.safeParse(element.props);
     }
-    return ctx;
+    catch (error) {
+        return [
+            {
+                path: at,
+                message: threwMessage(`the "${element.type}" schema`, error),
+            },
+        ];
+    }
+    if (result.success)
+        return [];
+    const issues = [];
+    for (const { path, message } of readIssues(result.error)) {
+        if (issues.length >= room)
+            break;
+        if (reachesExpression(element.props, path))
+            continue;
+        issues.push({ path: [...at, ...path], message });
+    }
+    return issues;
 }
 /**
- * Inject the spec key of the element this component renders.
+ * Whether a props issue is about an expression: it sits on one, inside one,
+ * or on a value holding one.
  *
- * Catalog components that collect their children — a tab group discovering
- * its tabs, for instance — need it to order registrations by the spec's
- * `children` array rather than by the order the children happened to
- * announce themselves in.
+ * `{"$state": "/title"}` where the schema wants a string is not a defect.
+ * Core resolves every such value before the component sees it, so the schema
+ * would be judging something that never renders. Any `$`-prefixed key counts
+ * — directive names must start with `$`, and so would an expression added to
+ * core later. A value merely holding one is left alone too, since a union or
+ * a refinement over it ran on the unresolved value.
  *
- * @example
- * ```ts
- * const key = injectElementKey();
- * const index = computed(() => parent.element().children?.indexOf(key()) ?? -1);
- * ```
+ * The props object itself is not an expression: core resolves the values
+ * inside it, never the object.
  */
-function injectElementKey() {
-    const key = inject(ELEMENT_KEY, { optional: true });
-    if (!key) {
-        throw new Error('injectElementKey() must be used inside a component rendered by <json-render>');
+function reachesExpression(props, path) {
+    let value = props;
+    for (const segment of path) {
+        if (typeof value !== 'object' || value === null)
+            return false;
+        value = value[segment];
+        if (isExpression(value))
+            return true;
     }
-    return key;
+    return holdsExpression(value);
 }
-/**
- * Inject the current repeat scope, or `null` when the component is not
- * rendered inside a `repeat` block.
- */
-function injectRepeatScope() {
-    return inject(REPEAT_SCOPE, { optional: true });
+/** A value core resolves at render time — or will, once it knows the key. */
+function isExpression(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.keys(value).some((key) => key.startsWith('$')));
 }
-
-const warnedSlots = new Set();
 /**
- * Report a failure from a fire-and-forget action dispatch. Cancelling a
- * confirmation dialog is a normal outcome, not an error, so it stays silent.
- */
-function reportActionError(error) {
-    if (isActionCancelled(error))
-        return;
-    console.error(error);
-}
-/**
- * Whether `inner` reads strictly deeper into state than `outer` — the state
- * path of one repeat item nested inside another's.
- *
- * `null` is the world outside any repeat, so stepping into one is always
- * progress. Below that it is a prefix test on the resolved path, and the
- * trailing separator is what keeps `/tree/10` from counting as a step inside
- * `/tree/1`.
- */
-function descendsInto(outer, inner) {
-    if (inner === null)
-        return false;
-    if (outer === null)
-        return true;
-    return inner.startsWith(`${outer}/`);
-}
-/**
- * Whether this element renders itself again without getting anywhere — the
- * one arrangement that cannot terminate.
- *
- * An element reaching itself is not by itself a defect. It is how a tree gets
- * drawn — a comment thread, a file browser, a nested menu — where each pass
- * repeats over a path relative to the item it is already inside and so reads
- * one level further into the data. That ends when the data does.
+ * Whether anything nested inside `value` is an expression.
  *
- * What separates the two is whether the repeat descended. Compare against the
- * nearest occurrence above: `/tree/0` then `/tree/0/children/1` is a tree
- * walking down, while `/items/0` then `/items/1` is a spec repeating over a
- * fixed array inside itself, and `/items/0` twice is one with no repeat
- * between the passes at all. Only the first can run out.
+ * Iterative, and it remembers what it has seen, for the same reason as
+ * {@link analyseSpecGraph}: props are as attacker-shaped as the rest of the
+ * spec, and a check that overflowed or looped on them would be a second way
+ * to crash.
  */
-function repeatsItself(path) {
-    for (let step = path.parent; step !== null; step = step.parent) {
-        if (step.key !== path.key)
+function holdsExpression(value) {
+    const pending = [value];
+    const seen = new Set();
+    while (pending.length > 0) {
+        const current = pending.pop();
+        if (typeof current !== 'object' || current === null)
             continue;
-        return !descendsInto(step.scopePath, path.scopePath);
+        if (seen.has(current))
+            continue;
+        seen.add(current);
+        for (const child of Object.values(current)) {
+            if (isExpression(child))
+                return true;
+            pending.push(child);
+        }
     }
     return false;
 }
 /**
- * Whether two objects hold the same values under the same keys.
+ * Read what a schema reported.
  *
- * `objectsByIdentity` decides what the same object or array reference means.
- * The internal store copies every path it writes and never touches a snapshot
- * it has handed out, so there the same reference is the same content. An
- * external store may write into its snapshot in place, so there only
- * primitives can be trusted to compare equal, and any object value counts as
- * changed.
+ * Read defensively rather than typed against the schema library: the shape
+ * below (`issues`, each with `path` and `message`) is what every version of
+ * it has produced, and a renderer that threw while explaining a bad spec
+ * would be the worse failure.
  */
-function sameValues(a, b, objectsByIdentity) {
-    const keys = Object.keys(a);
-    if (keys.length !== Object.keys(b).length)
-        return false;
-    for (const key of keys) {
-        if (!Object.hasOwn(b, key))
-            return false;
-        const value = a[key];
-        if (!Object.is(value, b[key]))
-            return false;
-        if (!objectsByIdentity && typeof value === 'object' && value !== null) {
-            return false;
-        }
-    }
-    return true;
+function readIssues(error) {
+    const raw = error?.issues;
+    if (!Array.isArray(raw))
+        return [];
+    return raw.map((entry) => {
+        const item = entry;
+        const path = item?.path;
+        const message = item?.message;
+        return {
+            path: Array.isArray(path) ? path : [],
+            message: typeof message === 'string' ? message : 'is not valid',
+        };
+    });
+}
+function threwMessage(schema, error) {
+    const reason = error instanceof Error ? ` (${error.name}: ${error.message})` : '';
+    return `${schema} threw instead of answering${reason}, so this counts as rejected`;
+}
+function toSpecCheckIssue({ path, message }) {
+    // Paths are rooted at the spec, so `elements.<key>.props.<prop>` names the
+    // element in its second segment.
+    const elementKey = path[0] === 'elements' && typeof path[1] === 'string' ? path[1] : undefined;
+    const where = path.length > 0 ? path.map(String).join('.') : 'spec';
+    return {
+        severity: 'error',
+        code: 'invalid_props',
+        ...(elementKey === undefined ? {} : { elementKey }),
+        message: `${where}: ${message}`,
+    };
 }
+
 /**
- * Whether two resolved values hold the same content, however they are built.
+ * The state paths an element's expressions can read, or `null` when that
+ * can't be known from the spec.
  *
- * For the dev-mode check on skipped writes, which compares a fresh resolution
- * with an old one: a `$computed` function returns a new object every time,
- * so identity says nothing there. What it can't see into — functions, a `Map`,
- * a class instance — it counts as the same, because a check that warns about
- * a correct element is worse than one that misses a case.
+ * Worked out from the spec alone, before anything resolves, so that an element
+ * can depend on those paths rather than on the whole state. The answer may
+ * name more paths than a given resolution reads — both branches of a `$cond`,
+ * say — but never fewer: a path left out would be a write the element misses,
+ * and it would keep showing the old value with nothing in the console.
+ *
+ * `null` is the safe answer, and it is given whenever the spec holds something
+ * this reader does not model:
+ *
+ * - a registered directive, whose `resolve` receives the whole context and may
+ *   read any path at all;
+ * - a `$`-prefixed key it doesn't recognise, which is what an expression added
+ *   to core after this was written would look like;
+ * - a read of the whole state (`''` or `'/'`), and a condition it can't parse.
+ *
+ * The walk mirrors core's `resolvePropValue` and `evaluateVisibility`, in the
+ * same order, because the order decides which expression an object is.
  */
-function sameContent(a, b, seen = new Set()) {
-    if (Object.is(a, b))
-        return true;
-    if (typeof a === 'function' && typeof b === 'function')
-        return true;
-    if (typeof a !== 'object' || typeof b !== 'object' || !a || !b)
-        return false;
-    if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b))
-        return false;
-    if (a instanceof Date)
-        return a.getTime() === b.getTime();
-    const plain = Array.isArray(a) || Object.getPrototypeOf(a) === Object.prototype;
-    if (!plain || seen.has(a))
-        return true;
-    seen.add(a);
-    const keys = Object.keys(a);
-    if (keys.length !== Object.keys(b).length)
-        return false;
-    return keys.every((key) => Object.hasOwn(b, key) &&
-        sameContent(a[key], b[key], seen));
+function collectStateReads(element, directives, repeatBasePath) {
+    const reader = new StateReader(directives, repeatBasePath);
+    const understood = reader.condition(element.visible) &&
+        Object.values(element.props ?? {}).every((value) => reader.value(value));
+    return understood ? reader.paths : null;
 }
-/**
- * Whether a state write at `written` can change the value at `bound`: the
- * same path, a container above it, or a path inside it.
- */
-function touches(written, bound) {
-    return (written === bound ||
-        bound.startsWith(`${written}/`) ||
-        written.startsWith(`${bound}/`));
+function isObject(value) {
+    return typeof value === 'object' && value !== null;
 }
-/** Element keys already warned about by the check on skipped writes. */
-const warnedSkippedWrites = new Set();
-const EMPTY_READS = new Set();
-function sameReads(a, b) {
-    if (a === b)
+/** Comparison operators a single condition may carry, as core reads them. */
+const COMPARISONS = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte'];
+class StateReader {
+    directives;
+    repeatBasePath;
+    paths = new Set();
+    constructor(directives, repeatBasePath) {
+        this.directives = directives;
+        this.repeatBasePath = repeatBasePath;
+    }
+    /** A prop value. Returns false when it can read state this can't name. */
+    value(value) {
+        if (!isObject(value))
+            return true;
+        if (typeof value['$state'] === 'string')
+            return this.state(value['$state']);
+        if (typeof value['$item'] === 'string')
+            return this.item(value['$item']);
+        if ('$index' in value && value['$index'] === true)
+            return true;
+        // A two-way binding reads the path it writes back to.
+        if (typeof value['$bindState'] === 'string') {
+            return this.state(value['$bindState']);
+        }
+        if (typeof value['$bindItem'] === 'string') {
+            return this.boundItem(value['$bindItem']);
+        }
+        if ('$cond' in value && '$then' in value && '$else' in value) {
+            return (this.condition(value['$cond']) &&
+                this.value(value['$then']) &&
+                this.value(value['$else']));
+        }
+        if (typeof value['$computed'] === 'string') {
+            // The function is handed its resolved arguments and nothing else.
+            const args = value['args'];
+            return (!args || Object.values(Object(args)).every((arg) => this.value(arg)));
+        }
+        if (typeof value['$template'] === 'string') {
+            return this.template(value['$template']);
+        }
+        if (Array.isArray(value))
+            return value.every((item) => this.value(item));
+        if (this.directives) {
+            for (const name of this.directives.keys()) {
+                if (name in value)
+                    return false;
+            }
+        }
+        for (const [key, entry] of Object.entries(value)) {
+            if (key.startsWith('$') || !this.value(entry))
+                return false;
+        }
         return true;
-    if (!a || !b || a.size !== b.size)
-        return false;
-    for (const path of a)
-        if (!b.has(path))
+    }
+    /** A `visible` condition, or the condition of a `$cond`. */
+    condition(condition) {
+        if (condition === undefined || typeof condition === 'boolean')
+            return true;
+        if (Array.isArray(condition)) {
+            return condition.every((single) => this.singleCondition(single));
+        }
+        if (!isObject(condition))
             return false;
-    return true;
-}
-/** The chain from the root down to `path`, as a line a human can follow. */
-function describePath(path) {
-    const keys = [];
-    for (let step = path; step !== null; step = step.parent) {
-        keys.push(step.key);
+        for (const group of ['$and', '$or']) {
+            if (group in condition) {
+                const children = condition[group];
+                return (Array.isArray(children) &&
+                    children.every((child) => this.condition(child)));
+            }
+        }
+        return this.singleCondition(condition);
     }
-    return keys.reverse().join(' \u2192 ');
-}
-/**
- * Renders a single spec element: evaluates visibility, resolves prop
- * expressions against the state model, wires event/watch bindings, and
- * instantiates the catalog component with a {@link RenderContext} injector.
- *
- * @internal Used by `<json-render>` and `<jr-children>`.
- */
-class JrElement {
-    elementKey = input.required(...(ngDevMode ? [{ debugName: "elementKey" }] : /* istanbul ignore next */ []));
-    root = inject(JsonRenderRootContext);
-    state = inject(JsonRenderStateService);
-    actions = inject(JsonRenderActionsService);
-    repeatScope = inject(REPEAT_SCOPE, { optional: true });
-    parentPath = inject(RENDER_PATH, { optional: true });
-    devtoolsActive = injectDevtoolsActive();
-    /**
-     * The raw (unresolved) element from the spec.
-     *
-     * Compared by content, not identity. A streamed patch shares every element
-     * it did not touch, and the identity check settles those at once; but a
-     * spec can also arrive as all-new objects — a whole-spec part, a host that
-     * fetches it again, `buildSpecFromParts` replaying a message — and then an
-     * element whose content is unchanged would resolve, and every container
-     * with a fresh `children` array re-render, for nothing.
-     */
-    rawElement = computed(() => this.root.spec()?.elements?.[this.elementKey()], { ...(ngDevMode ? { debugName: "rawElement" } : /* istanbul ignore next */ {}), equal: (a, b) => sameJson(a, b) });
-    /**
-     * The state paths this element's expressions can read, or null when the
-     * spec doesn't say — see {@link collectStateReads} for when that is.
-     */
-    stateReads = computed(() => {
-        const el = this.rawElement();
-        if (!el)
-            return EMPTY_READS;
-        return collectStateReads(el, this.root.directiveRegistry(), this.repeatScope?.basePath());
-    }, { ...(ngDevMode ? { debugName: "stateReads" } : /* istanbul ignore next */ {}), equal: sameReads });
-    /**
-     * One signal per path this element reads, each holding the value at that
-     * path. They are rebuilt only when the paths change, and a cell that stays
-     * keeps its last value, so a path that didn't change is not a change.
-     *
-     * A cell compares like a resolved prop does: primitives by value, objects
-     * by reference with the internal store (which copies every path it writes)
-     * and never equal with an external `store`, which may write into its
-     * snapshot in place.
-     */
-    stateCells = (() => {
-        let cells = new Map();
-        return computed(() => {
-            const reads = this.stateReads();
-            if (reads === null)
-                return null;
-            const next = new Map();
-            for (const path of reads) {
-                next.set(path, cells.get(path) ??
-                    computed(() => getByPath(this.state.state(), path), {
-                        equal: (a, b) => Object.is(a, b) &&
-                            (typeof a !== 'object' ||
-                                a === null ||
-                                !untracked(this.root.store)),
-                    }));
+    singleCondition(condition) {
+        if (!isObject(condition))
+            return false;
+        let understood;
+        if ('$index' in condition) {
+            understood = true;
+        }
+        else if ('$item' in condition) {
+            const item = condition['$item'];
+            understood = typeof item === 'string' && this.item(item);
+        }
+        else {
+            // Core reads `$state` here without checking it: anything but a string
+            // path reads the whole state.
+            const path = condition['$state'];
+            understood = typeof path === 'string' && this.state(path);
+        }
+        // Core looks only at the first operator present. Reading all of them is
+        // a superset of that.
+        for (const operator of COMPARISONS) {
+            const operand = condition[operator];
+            if (isObject(operand) && typeof operand['$state'] === 'string') {
+                understood = this.state(operand['$state']) && understood;
             }
-            cells = next;
-            return next;
-        });
-    })();
-    /**
-     * How many times {@link readableState} has taken a snapshot. The dev-mode
-     * check compares it between state writes to tell which ones were skipped.
-     */
-    snapshotsTaken = 0;
-    /**
-     * The state to resolve against: the whole snapshot, but only as fresh as
-     * the paths this element reads. A write elsewhere doesn't reach it, so the
-     * element doesn't resolve anything for it. An element whose reads are
-     * unknown follows every write, as all elements did before.
-     */
-    readableState = computed(() => {
-        this.snapshotsTaken++;
-        const cells = this.stateCells();
-        if (cells === null)
-            return this.state.state();
-        for (const cell of cells.values())
-            cell();
-        return untracked(this.state.state);
-    }, { ...(ngDevMode ? { debugName: "readableState" } : /* istanbul ignore next */ {}), equal: () => false });
-    /** Prop/visibility resolution context (state + repeat scope + extensions). */
-    resolutionCtx = computed(() => {
-        const scope = this.repeatScope;
-        return {
-            stateModel: this.readableState(),
-            ...(scope
-                ? {
-                    repeatItem: scope.item(),
-                    repeatIndex: scope.index(),
-                    repeatBasePath: scope.basePath(),
-                }
-                : {}),
-            functions: this.root.functions() ?? {},
-            directives: this.root.directiveRegistry(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "resolutionCtx" }] : /* istanbul ignore next */ []));
-    visible = computed(() => {
-        const el = this.rawElement();
-        if (!el || el.visible === undefined)
-            return true;
-        return evaluateVisibility(el.visible, this.resolutionCtx());
-    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    /**
-     * How many state writes have touched a path this element is two-way bound
-     * to. See {@link resolution} for why those writes count on their own.
-     */
-    boundWrites = signal(0, ...(ngDevMode ? [{ debugName: "boundWrites" }] : /* istanbul ignore next */ []));
-    /**
-     * The element with all prop expressions resolved, and the bound writes it
-     * was resolved after.
-     *
-     * Resolving builds a new props object every time, so a result that holds
-     * the same values as the last one counts as unchanged and keeps the old
-     * object; otherwise one keystroke would re-run every catalog template that
-     * happened to resolve.
-     *
-     * A write to a path the element is bound to always counts, though. Its
-     * component writes the user's input into the DOM before it reaches state,
-     * so the DOM can differ from a prop whose value never did: typing and a
-     * `clearStatePath` in the same turn take the prop from '' through 'milk'
-     * back to '' with nobody reading 'milk'. The README tells catalog authors
-     * to sync such inputs with an effect on props, and that effect only gets to
-     * put the DOM right if it runs. Writes anywhere else compare by value, like
-     * any element's.
-     */
-    resolution = computed(() => {
-        const boundWrites = this.boundWrites();
-        const el = this.rawElement();
-        if (!el)
-            return { element: undefined, boundWrites };
-        return {
-            element: {
-                ...el,
-                props: resolveElementProps(el.props ?? {}, this.resolutionCtx()),
-            },
-            boundWrites,
-        };
-    }, { ...(ngDevMode ? { debugName: "resolution" } : /* istanbul ignore next */ {}), equal: (a, b) => {
-            if (a.boundWrites !== b.boundWrites)
-                return false;
-            if (a.element === b.element)
-                return true;
-            if (!a.element || !b.element)
+        }
+        return understood;
+    }
+    template(template) {
+        for (const [, placeholder] of template.matchAll(/\$\{([^}]+)\}/g)) {
+            if (placeholder.startsWith('/')) {
+                if (!this.state(placeholder))
+                    return false;
+                continue;
+            }
+            // Core tries the repeat item first and falls back to a state path of
+            // the same name when the item has nothing there.
+            if (!this.item(placeholder) || !this.state(`/${placeholder}`)) {
                 return false;
-            const { props: aProps, ...aRest } = a.element;
-            const { props: bProps, ...bRest } = b.element;
-            // Everything but props is the spec element itself, never state.
-            return (sameValues(aRest, bRest, true) &&
-                sameValues(aProps, bProps, !untracked(this.root.store)));
-        } });
-    /** The element with all prop expressions resolved. */
-    resolvedElement = computed(() => this.resolution().element, ...(ngDevMode ? [{ debugName: "resolvedElement" }] : /* istanbul ignore next */ []));
-    /** Two-way binding paths ($bindState / $bindItem) by prop name. */
-    bindings = computed(() => {
-        const el = this.rawElement();
-        return el
-            ? resolveBindings(el.props ?? {}, this.resolutionCtx())
-            : undefined;
-    }, { ...(ngDevMode ? { debugName: "bindings" } : /* istanbul ignore next */ {}), equal: (a, b) => a === b || (!!a && !!b && sameValues(a, b, true)) });
-    entry = computed(() => {
-        const el = this.rawElement();
-        return el ? this.root.resolveEntry(el.type) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
-    component = computed(() => this.entry()?.component ?? null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
-    devtoolsKey = computed(() => this.devtoolsActive() ? this.elementKey() : null, ...(ngDevMode ? [{ debugName: "devtoolsKey" }] : /* istanbul ignore next */ []));
+            }
+        }
+        return true;
+    }
+    state(path) {
+        if (path === '' || path === '/')
+            return false;
+        this.paths.add(path);
+        return true;
+    }
     /**
-     * Where this element sits in the tree. Passed down to everything it renders
-     * below itself, which is what lets each element see its own ancestry
-     * without the renderer holding a registry of who is drawing what.
+     * A `$bindItem`, joined the way core joins it — which is not quite how it
+     * joins an `$item` read. Outside a repeat it resolves to nothing.
      */
-    path = computed(() => {
-        const parent = this.parentPath?.() ?? null;
-        return {
-            key: this.elementKey(),
-            depth: (parent?.depth ?? 0) + 1,
-            scopePath: this.repeatScope?.basePath() ?? null,
-            parent,
-        };
-    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    boundItem(itemPath) {
+        if (this.repeatBasePath === undefined)
+            return true;
+        return this.state(itemPath === ''
+            ? this.repeatBasePath
+            : `${this.repeatBasePath}/${itemPath}`);
+    }
     /**
-     * Why this element is not drawn, or null when it is.
-     *
-     * The cycle half is unconditional — not something `validate` turns on. An
-     * element that renders itself without reading any deeper renders forever,
-     * and a spec that never stops rendering takes the tab with it; refusing to
-     * draw the repetition is the only outcome that leaves anything on screen.
-     * It costs one walk up a chain of parents, bounded by `maxDepth` where one
-     * is set and by the spec's own nesting where it is not.
+     * A read of the repeat item, as the state path it sits at. The item value
+     * reaches the element on its own, but only as the same object when an
+     * external store edits it in place, so the path is what notices the edit.
      */
-    refusal = computed(() => {
-        const path = this.path();
-        if (repeatsItself(path))
-            return 'cycle';
-        const maxDepth = this.root.limits()?.maxDepth;
-        if (maxDepth !== undefined && path.depth > maxDepth)
-            return 'depth';
-        return null;
-    }, ...(ngDevMode ? [{ debugName: "refusal" }] : /* istanbul ignore next */ []));
-    renderCtx = {
-        element: this.resolvedElement,
-        props: computed(() => this.resolvedElement()?.props ?? {}),
-        emit: (event) => this.fireEvent(event),
-        on: (event) => this.eventHandle(event),
-        bindings: this.bindings,
-        loading: computed(() => this.root.loading()),
-        setBound: (prop, value) => {
-            const path = untracked(this.bindings)?.[prop];
-            if (path) {
-                this.state.set(path, value);
-            }
-            else if (isDevMode()) {
-                console.warn(`[ngx-json-render] setBound("${prop}"): prop has no $bindState/$bindItem binding`);
-            }
-        },
-    };
-    // Typed as Injector for the peer range: see `confirmInjector` in
-    // renderer.component.ts.
-    outletInjector = Injector.create({
-        providers: [
-            { provide: RENDER_CONTEXT, useValue: this.renderCtx },
-            { provide: ELEMENT_KEY, useValue: this.elementKey },
-            { provide: RENDER_PATH, useValue: this.path },
-        ],
-        parent: inject(Injector),
-    });
-    constructor() {
-        // Warn (once) when this element is refused. Both reasons are silent
-        // failures on screen — something the spec asked for is missing — so
-        // neither should be silent in the console.
-        let warnedRefusal = false;
-        effect(() => {
-            const reason = this.refusal();
-            if (!reason || warnedRefusal)
-                return;
-            warnedRefusal = true;
-            const path = untracked(this.path);
-            if (reason === 'cycle') {
-                console.warn(`[ngx-json-render] Cycle in the spec: ${describePath(path)}. "${path.key}" renders itself again without reading any deeper into state${path.scopePath === null ? '' : ` (still at "${path.scopePath}")`}, so it never ends. It is not rendered again; everything above it still is. A tree that recurses needs a repeat with a relative statePath, like {"$item": "children"}.`);
-            }
-            else {
-                console.warn(`[ngx-json-render] renderLimits.maxDepth (${untracked(this.root.limits)?.maxDepth}) reached at ${describePath(path)}. "${path.key}" and anything below it do not render.`);
-            }
-        });
-        // Dev mode: after a state write this element skipped, check that it was
-        // right to. Resolving against the whole state has to give what the element
-        // already shows; anything else is a read the spec analysis didn't name.
-        if (inject(CHECK_SKIPPED_WRITES)) {
-            let snapshotsSeen = -1;
-            effect(() => {
-                this.state.state();
-                const shown = this.resolvedElement();
-                const shownVisible = this.visible();
-                const reads = this.stateReads();
-                untracked(() => {
-                    const skipped = this.snapshotsTaken === snapshotsSeen;
-                    snapshotsSeen = this.snapshotsTaken;
-                    if (skipped && shown && reads !== null) {
-                        this.checkSkippedWrite(shown, shownVisible, reads);
-                    }
-                });
-            });
+    item(itemPath) {
+        if (this.repeatBasePath === undefined)
+            return true;
+        const path = resolveRepeatStatePath({ $item: itemPath }, this.repeatBasePath);
+        return path !== undefined && this.state(path);
+    }
+}
+
+/**
+ * The render context of the element currently being rendered.
+ * Provided by the renderer for every catalog component instance.
+ */
+const RENDER_CONTEXT = new InjectionToken('ngx-json-render RENDER_CONTEXT');
+/**
+ * The spec key of the element currently being rendered. Provided alongside
+ * {@link RENDER_CONTEXT} for every catalog component instance.
+ */
+const ELEMENT_KEY = new InjectionToken('ngx-json-render ELEMENT_KEY');
+/**
+ * The current repeat scope. Present only for elements rendered inside a
+ * `repeat` block.
+ */
+const REPEAT_SCOPE = new InjectionToken('ngx-json-render REPEAT_SCOPE');
+/**
+ * This element's position in the render tree. Provided by `<jr-element>` for
+ * everything it renders below itself, so each element can see its own depth
+ * and its own ancestry.
+ *
+ * @internal Not part of the public API: it exists so the renderer can refuse
+ * to draw an element that is its own ancestor, and to enforce
+ * `renderLimits.maxDepth`.
+ */
+const RENDER_PATH = new InjectionToken('ngx-json-render RENDER_PATH');
+/**
+ * Whether an element that skipped a state write checks that it was right to:
+ * that resolving it against the whole state would not give anything else.
+ * On in dev mode, off in production.
+ *
+ * @internal Not part of the public API. The check calls `$computed`
+ * functions again, so tests that count those calls turn it off.
+ */
+const CHECK_SKIPPED_WRITES = new InjectionToken('ngx-json-render CHECK_SKIPPED_WRITES', { providedIn: 'root', factory: () => isDevMode() });
+/**
+ * Inject the render context inside a catalog component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'app-button',
+ *   template: `<button (click)="ctx.emit('press')">{{ ctx.props().label }}</button>`,
+ * })
+ * export class ButtonComponent {
+ *   readonly ctx = injectRenderContext<{ label: string }>();
+ * }
+ * ```
+ */
+function injectRenderContext() {
+    const ctx = inject(RENDER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error('injectRenderContext() must be used inside a component rendered by <json-render>');
+    }
+    return ctx;
+}
+/**
+ * Inject the spec key of the element this component renders.
+ *
+ * Catalog components that collect their children — a tab group discovering
+ * its tabs, for instance — need it to order registrations by the spec's
+ * `children` array rather than by the order the children happened to
+ * announce themselves in.
+ *
+ * @example
+ * ```ts
+ * const key = injectElementKey();
+ * const index = computed(() => parent.element().children?.indexOf(key()) ?? -1);
+ * ```
+ */
+function injectElementKey() {
+    const key = inject(ELEMENT_KEY, { optional: true });
+    if (!key) {
+        throw new Error('injectElementKey() must be used inside a component rendered by <json-render>');
+    }
+    return key;
+}
+/**
+ * Inject the current repeat scope, or `null` when the component is not
+ * rendered inside a `repeat` block.
+ */
+function injectRepeatScope() {
+    return inject(REPEAT_SCOPE, { optional: true });
+}
+
+const warnedSlots = new Set();
+/**
+ * Report a failure from a fire-and-forget action dispatch. Cancelling a
+ * confirmation dialog is a normal outcome, not an error, so it stays silent.
+ */
+function reportActionError(error) {
+    if (isActionCancelled(error))
+        return;
+    console.error(error);
+}
+/**
+ * Whether `inner` reads strictly deeper into state than `outer` — the state
+ * path of one repeat item nested inside another's.
+ *
+ * `null` is the world outside any repeat, so stepping into one is always
+ * progress. Below that it is a prefix test on the resolved path, and the
+ * trailing separator is what keeps `/tree/10` from counting as a step inside
+ * `/tree/1`.
+ */
+function descendsInto(outer, inner) {
+    if (inner === null)
+        return false;
+    if (outer === null)
+        return true;
+    return inner.startsWith(`${outer}/`);
+}
+/**
+ * Whether this element renders itself again without getting anywhere — the
+ * one arrangement that cannot terminate.
+ *
+ * An element reaching itself is not by itself a defect. It is how a tree gets
+ * drawn — a comment thread, a file browser, a nested menu — where each pass
+ * repeats over a path relative to the item it is already inside and so reads
+ * one level further into the data. That ends when the data does.
+ *
+ * What separates the two is whether the repeat descended. Compare against the
+ * nearest occurrence above: `/tree/0` then `/tree/0/children/1` is a tree
+ * walking down, while `/items/0` then `/items/1` is a spec repeating over a
+ * fixed array inside itself, and `/items/0` twice is one with no repeat
+ * between the passes at all. Only the first can run out.
+ */
+function repeatsItself(path) {
+    for (let step = path.parent; step !== null; step = step.parent) {
+        if (step.key !== path.key)
+            continue;
+        return !descendsInto(step.scopePath, path.scopePath);
+    }
+    return false;
+}
+/**
+ * Whether two objects hold the same values under the same keys.
+ *
+ * `objectsByIdentity` decides what the same object or array reference means.
+ * The internal store copies every path it writes and never touches a snapshot
+ * it has handed out, so there the same reference is the same content. An
+ * external store may write into its snapshot in place, so there only
+ * primitives can be trusted to compare equal, and any object value counts as
+ * changed.
+ */
+function sameValues(a, b, objectsByIdentity) {
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    for (const key of keys) {
+        if (!Object.hasOwn(b, key))
+            return false;
+        const value = a[key];
+        if (!Object.is(value, b[key]))
+            return false;
+        if (!objectsByIdentity && typeof value === 'object' && value !== null) {
+            return false;
         }
-        // Count the writes that touch a path this element is bound to. Only an
-        // element with bindings listens, and it reads them when a write arrives,
-        // so a binding that moves (a repeat item that shifts) is followed without
-        // subscribing again.
-        effect((onCleanup) => {
-            if (!this.bindings())
-                return;
-            const unsubscribe = this.state.subscribeChanges((changes) => {
-                const paths = Object.values(untracked(this.bindings) ?? {});
-                if (changes.some((change) => paths.some((path) => touches(change.path, path)))) {
-                    this.boundWrites.update((count) => count + 1);
-                }
-            });
-            onCleanup(unsubscribe);
-        });
-        // Warn (once per type) about unknown component types.
-        const warnedTypes = new Set();
-        effect(() => {
-            const el = this.rawElement();
-            if (!el || this.entry() || warnedTypes.has(el.type))
-                return;
-            warnedTypes.add(el.type);
-            console.warn(`No renderer for component type: ${el.type}`);
-        });
-        // Warn about unknown / default slots when the registry carries metadata.
-        effect(() => {
-            const el = this.rawElement();
-            const meta = this.entry();
-            if (!el?.slots || !meta?.slots)
-                return;
-            const available = new Set(meta.slots);
-            for (const slotName of Object.keys(el.slots)) {
-                const warnKey = `${el.type}:${slotName}`;
-                if (warnedSlots.has(warnKey))
-                    continue;
-                if (slotName === 'default') {
-                    warnedSlots.add(warnKey);
-                    console.warn(`[json-render] Component "${el.type}" uses slots.default. Use "children" for default slot content.`);
-                }
-                else if (!available.has(slotName)) {
-                    warnedSlots.add(warnKey);
-                    console.warn(`[json-render] Unknown slot "${slotName}" on component "${el.type}". Available slots: ${meta.slots.join(', ')}`);
-                }
+    }
+    return true;
+}
+/**
+ * Whether two resolved values hold the same content, however they are built.
+ *
+ * For the dev-mode check on skipped writes, which compares a fresh resolution
+ * with an old one: a `$computed` function returns a new object every time,
+ * so identity says nothing there. What it can't see into — functions, a `Map`,
+ * a class instance — it counts as the same, because a check that warns about
+ * a correct element is worse than one that misses a case.
+ */
+function sameContent(a, b, seen = new Set()) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a === 'function' && typeof b === 'function')
+        return true;
+    if (typeof a !== 'object' || typeof b !== 'object' || !a || !b)
+        return false;
+    if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b))
+        return false;
+    if (a instanceof Date)
+        return a.getTime() === b.getTime();
+    const plain = Array.isArray(a) || Object.getPrototypeOf(a) === Object.prototype;
+    if (!plain || seen.has(a))
+        return true;
+    seen.add(a);
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length)
+        return false;
+    return keys.every((key) => Object.hasOwn(b, key) &&
+        sameContent(a[key], b[key], seen));
+}
+/**
+ * Whether a state write at `written` can change the value at `bound`: the
+ * same path, a container above it, or a path inside it.
+ */
+function touches(written, bound) {
+    return (written === bound ||
+        bound.startsWith(`${written}/`) ||
+        written.startsWith(`${bound}/`));
+}
+/** Element keys already warned about by the check on skipped writes. */
+const warnedSkippedWrites = new Set();
+const EMPTY_READS = new Set();
+function sameReads(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || a.size !== b.size)
+        return false;
+    for (const path of a)
+        if (!b.has(path))
+            return false;
+    return true;
+}
+/** The chain from the root down to `path`, as a line a human can follow. */
+function describePath(path) {
+    const keys = [];
+    for (let step = path; step !== null; step = step.parent) {
+        keys.push(step.key);
+    }
+    return keys.reverse().join(' \u2192 ');
+}
+/**
+ * Renders a single spec element: evaluates visibility, resolves prop
+ * expressions against the state model, wires event/watch bindings, and
+ * instantiates the catalog component with a {@link RenderContext} injector.
+ *
+ * @internal Used by `<json-render>` and `<jr-children>`.
+ */
+class JrElement {
+    elementKey = input.required(...(ngDevMode ? [{ debugName: "elementKey" }] : /* istanbul ignore next */ []));
+    root = inject(JsonRenderRootContext);
+    state = inject(JsonRenderStateService);
+    actions = inject(JsonRenderActionsService);
+    repeatScope = inject(REPEAT_SCOPE, { optional: true });
+    parentPath = inject(RENDER_PATH, { optional: true });
+    devtoolsActive = injectDevtoolsActive();
+    /**
+     * The raw (unresolved) element from the spec.
+     *
+     * Compared by content, not identity. A streamed patch shares every element
+     * it did not touch, and the identity check settles those at once; but a
+     * spec can also arrive as all-new objects — a whole-spec part, a host that
+     * fetches it again, `buildSpecFromParts` replaying a message — and then an
+     * element whose content is unchanged would resolve, and every container
+     * with a fresh `children` array re-render, for nothing.
+     */
+    rawElement = computed(() => this.root.spec()?.elements?.[this.elementKey()], { ...(ngDevMode ? { debugName: "rawElement" } : /* istanbul ignore next */ {}), equal: (a, b) => sameJson(a, b) });
+    /**
+     * The state paths this element's expressions can read, or null when the
+     * spec doesn't say — see {@link collectStateReads} for when that is.
+     */
+    stateReads = computed(() => {
+        const el = this.rawElement();
+        if (!el)
+            return EMPTY_READS;
+        return collectStateReads(el, this.root.directiveRegistry(), this.repeatScope?.basePath());
+    }, { ...(ngDevMode ? { debugName: "stateReads" } : /* istanbul ignore next */ {}), equal: sameReads });
+    /**
+     * One signal per path this element reads, each holding the value at that
+     * path. They are rebuilt only when the paths change, and a cell that stays
+     * keeps its last value, so a path that didn't change is not a change.
+     *
+     * A cell compares like a resolved prop does: primitives by value, objects
+     * by reference with the internal store (which copies every path it writes)
+     * and never equal with an external `store`, which may write into its
+     * snapshot in place.
+     */
+    stateCells = (() => {
+        let cells = new Map();
+        return computed(() => {
+            const reads = this.stateReads();
+            if (reads === null)
+                return null;
+            const next = new Map();
+            for (const path of reads) {
+                next.set(path, cells.get(path) ??
+                    computed(() => getByPath(this.state.state(), path), {
+                        equal: (a, b) => Object.is(a, b) &&
+                            (typeof a !== 'object' ||
+                                a === null ||
+                                !untracked(this.root.store)),
+                    }));
             }
+            cells = next;
+            return next;
         });
-        // Watch effect: fire actions when watched state paths change.
-        effect((onCleanup) => {
-            // A refused element does not act, not just draw nothing. `watch` is the
-            // one thing an element does without being on screen, so leaving it wired
-            // would let the element past `maxDepth` — or the one that closes a cycle
-            // — keep dispatching actions from behind a cap that was supposed to have
-            // stopped it. Reading the signal here also unwires it if the refusal
-            // arrives later, when the limits change.
-            if (this.refusal())
-                return;
-            const watchConfig = this.rawElement()?.watch;
-            if (!watchConfig)
-                return;
-            const paths = Object.keys(watchConfig);
-            if (paths.length === 0)
-                return;
-            const unsubscribe = this.state.subscribeChanges((changes) => {
-                const changedPaths = new Set(changes.map((change) => change.path));
-                void (async () => {
-                    for (const path of paths) {
-                        if (!changedPaths.has(path))
-                            continue;
-                        const binding = watchConfig[path];
-                        if (binding)
-                            await this.dispatch(binding);
-                    }
-                })().catch(reportActionError);
-            });
-            onCleanup(unsubscribe);
-        });
-    }
+    })();
+    /**
+     * How many times {@link readableState} has taken a snapshot. The dev-mode
+     * check compares it between state writes to tell which ones were skipped.
+     */
+    snapshotsTaken = 0;
+    /**
+     * The state to resolve against: the whole snapshot, but only as fresh as
+     * the paths this element reads. A write elsewhere doesn't reach it, so the
+     * element doesn't resolve anything for it. An element whose reads are
+     * unknown follows every write, as all elements did before.
+     */
+    readableState = computed(() => {
+        this.snapshotsTaken++;
+        const cells = this.stateCells();
+        if (cells === null)
+            return this.state.state();
+        for (const cell of cells.values())
+            cell();
+        return untracked(this.state.state);
+    }, { ...(ngDevMode ? { debugName: "readableState" } : /* istanbul ignore next */ {}), equal: () => false });
+    /** Prop/visibility resolution context (state + repeat scope + extensions). */
+    resolutionCtx = computed(() => {
+        const scope = this.repeatScope;
+        return {
+            stateModel: this.readableState(),
+            ...(scope
+                ? {
+                    repeatItem: scope.item(),
+                    repeatIndex: scope.index(),
+                    repeatBasePath: scope.basePath(),
+                }
+                : {}),
+            functions: this.root.functions() ?? {},
+            directives: this.root.directiveRegistry(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolutionCtx" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        const el = this.rawElement();
+        if (!el || el.visible === undefined)
+            return true;
+        return evaluateVisibility(el.visible, this.resolutionCtx());
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * How many state writes have touched a path this element is two-way bound
+     * to. See {@link resolution} for why those writes count on their own.
+     */
+    boundWrites = signal(0, ...(ngDevMode ? [{ debugName: "boundWrites" }] : /* istanbul ignore next */ []));
     /**
-     * Resolve this element against the whole current state and warn, once per
-     * element key, when that differs from what it shows after skipping a write.
+     * The element with all prop expressions resolved, and the bound writes it
+     * was resolved after.
      *
-     * It only reports, and leaves the element as it is: correcting it here would
-     * make dev mode render what production doesn't.
+     * Resolving builds a new props object every time, so a result that holds
+     * the same values as the last one counts as unchanged and keeps the old
+     * object; otherwise one keystroke would re-run every catalog template that
+     * happened to resolve.
+     *
+     * A write to a path the element is bound to always counts, though. Its
+     * component writes the user's input into the DOM before it reaches state,
+     * so the DOM can differ from a prop whose value never did: typing and a
+     * `clearStatePath` in the same turn take the prop from '' through 'milk'
+     * back to '' with nobody reading 'milk'. The README tells catalog authors
+     * to sync such inputs with an effect on props, and that effect only gets to
+     * put the DOM right if it runs. Writes anywhere else compare by value, like
+     * any element's.
      */
-    checkSkippedWrite(shown, shownVisible, reads) {
-        const key = this.elementKey();
+    resolution = computed(() => {
+        const boundWrites = this.boundWrites();
         const el = this.rawElement();
-        if (!el || warnedSkippedWrites.has(key))
-            return;
-        const ctx = this.liveResolutionCtx();
-        let props;
-        let visible;
-        try {
-            props = resolveElementProps(el.props ?? {}, ctx);
-            visible = el.visible === undefined || evaluateVisibility(el.visible, ctx);
-        }
-        catch {
-            return;
-        }
-        const differs = Object.keys({ ...props, ...shown.props }).filter((prop) => !sameContent(props[prop], shown.props[prop]));
-        if (visible !== shownVisible)
-            differs.push('visible');
-        if (differs.length === 0)
-            return;
-        warnedSkippedWrites.add(key);
-        const paths = reads.size > 0 ? [...reads].join(', ') : 'no state paths';
-        console.warn(`[ngx-json-render] "${key}" did not resolve again after a state write, but resolving it now changes ${differs.join(', ')}. It resolves only when a state path it reads changes, and it reads ${paths}. Either a $computed function in it depends on something besides its args, or the renderer missed a read — please report the spec at https://github.com/shteynu/ngx-json-render/issues. This check runs in dev mode only.`);
-    }
-    /**
-     * Resolution context with a live state snapshot, so `$state` references in
-     * later actions of a chain see mutations from earlier ones.
-     */
-    liveResolutionCtx() {
+        if (!el)
+            return { element: undefined, boundWrites };
         return {
-            ...untracked(this.resolutionCtx),
-            stateModel: this.state.getSnapshot(),
+            element: {
+                ...el,
+                props: resolveElementProps(el.props ?? {}, this.resolutionCtx()),
+            },
+            boundWrites,
         };
-    }
+    }, { ...(ngDevMode ? { debugName: "resolution" } : /* istanbul ignore next */ {}), equal: (a, b) => {
+            if (a.boundWrites !== b.boundWrites)
+                return false;
+            if (a.element === b.element)
+                return true;
+            if (!a.element || !b.element)
+                return false;
+            const { props: aProps, ...aRest } = a.element;
+            const { props: bProps, ...bRest } = b.element;
+            // Everything but props is the spec element itself, never state.
+            return (sameValues(aRest, bRest, true) &&
+                sameValues(aProps, bProps, !untracked(this.root.store)));
+        } });
+    /** The element with all prop expressions resolved. */
+    resolvedElement = computed(() => this.resolution().element, ...(ngDevMode ? [{ debugName: "resolvedElement" }] : /* istanbul ignore next */ []));
+    /** Two-way binding paths ($bindState / $bindItem) by prop name. */
+    bindings = computed(() => {
+        const el = this.rawElement();
+        return el
+            ? resolveBindings(el.props ?? {}, this.resolutionCtx())
+            : undefined;
+    }, { ...(ngDevMode ? { debugName: "bindings" } : /* istanbul ignore next */ {}), equal: (a, b) => a === b || (!!a && !!b && sameValues(a, b, true)) });
+    entry = computed(() => {
+        const el = this.rawElement();
+        return el ? this.root.resolveEntry(el.type) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
+    /** Set once the real component has been shown; see {@link held}. */
+    mounted = false;
     /**
-     * Fire-and-forget entry point for event emission: dispatching is async, but
-     * a template listener has nowhere to await it, so the failure must be
-     * handled here rather than escaping as an unhandled rejection.
+     * Whether the component waits for its props: the spec is still loading, a
+     * catalog was given, and the props written so far do not pass the
+     * component's schema (see {@link propsArrived}).
+     *
+     * One-way. Once the component has been shown it is never swapped back for
+     * the fallback, even if a later patch takes a prop away again: a component
+     * flickering out mid-stream is worse than one showing a gap. Once latched
+     * this reads no signals, so a mounted element pays nothing for the gate on
+     * later patches — and neither does any element when nothing is loading.
      */
-    fireEvent(eventName) {
-        this.emitEvent(eventName).catch(reportActionError);
-    }
-    async emitEvent(eventName) {
-        const binding = untracked(this.rawElement)?.on?.[eventName];
-        if (binding)
-            await this.dispatch(binding);
-    }
+    held = computed(() => {
+        if (this.mounted)
+            return false;
+        const el = this.rawElement();
+        const catalog = this.root.catalog();
+        const held = !!el && !!catalog && this.root.loading() && !propsArrived(el, catalog);
+        if (!held && this.entry() && this.visible() && !this.refusal()) {
+            this.mounted = true;
+        }
+        return held;
+    }, ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    /** What the outlet shows: the component, or its fallback while held. */
+    component = computed(() => this.held()
+        ? (this.entry()?.fallback ?? null)
+        : (this.entry()?.component ?? null), ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    devtoolsKey = computed(() => this.devtoolsActive() ? this.elementKey() : null, ...(ngDevMode ? [{ debugName: "devtoolsKey" }] : /* istanbul ignore next */ []));
     /**
-     * Run an `on` or `watch` binding's actions in order. Params are resolved
-     * per action, just before it runs, so a `$state` read in a later action of
-     * the chain sees what an earlier one wrote.
+     * Where this element sits in the tree. Passed down to everything it renders
+     * below itself, which is what lets each element see its own ancestry
+     * without the renderer holding a registry of who is drawing what.
      */
-    async dispatch(binding) {
-        for (const b of Array.isArray(binding) ? binding : [binding]) {
-            if (!b.params) {
-                await this.actions.execute(b);
-                continue;
-            }
-            const liveCtx = this.liveResolutionCtx();
-            const resolved = {};
-            for (const [key, val] of Object.entries(b.params)) {
-                resolved[key] = resolveActionParam(val, liveCtx);
-            }
-            await this.actions.execute({ ...b, params: resolved });
-        }
-    }
-    eventHandle(eventName) {
-        const el = this.rawElement();
-        const binding = el?.on?.[eventName];
-        if (!binding) {
-            return { emit: () => { }, shouldPreventDefault: false, bound: false };
-        }
-        const actionBindings = Array.isArray(binding) ? binding : [binding];
+    path = computed(() => {
+        const parent = this.parentPath?.() ?? null;
         return {
-            emit: () => this.fireEvent(eventName),
-            shouldPreventDefault: actionBindings.some((b) => b.preventDefault),
-            bound: true,
+            key: this.elementKey(),
+            depth: (parent?.depth ?? 0) + 1,
+            scopePath: this.repeatScope?.basePath() ?? null,
+            parent,
         };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JrElement, isStandalone: true, selector: "jr-element", inputs: { elementKey: { classPropertyName: "elementKey", publicName: "elementKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (!refusal() && rawElement() && visible() && component()) {
-      @if (devtoolsKey(); as dk) {
-        <span [attr.data-jr-key]="dk" style="display: contents">
-          <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
-        </span>
-      } @else {
-        <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
-      }
-    }
-  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, decorators: [{
-            type: Component,
-            args: [{ selector: 'jr-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], template: `
-    @if (!refusal() && rawElement() && visible() && component()) {
-      @if (devtoolsKey(); as dk) {
-        <span [attr.data-jr-key]="dk" style="display: contents">
-          <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
-        </span>
-      } @else {
-        <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
-      }
-    }
-  `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { elementKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementKey", required: true }] }] } });
-
-/**
- * A hostile spec can fail the catalog's schema in as many places as it has
- * properties. Report enough to act on and stop; the spec is refused either
- * way, and a console full of them helps nobody.
- */
-const MAX_REPORTED_PROP_ISSUES = 20;
-/**
- * Whether this element's `repeat` descends into the item it is already inside,
- * rather than re-reading a fixed path in state.
- *
- * A relative statePath — `{"$item": "children"}` — resolves against the
- * enclosing item, so each pass reads one level further into the data and the
- * recursion ends where the data does. A plain string is absolute: every pass
- * reads the same array, and a spec that re-enters itself through one never
- * terminates.
- */
-function descendsIntoItems(element) {
-    const repeat = element.repeat;
-    return repeat !== undefined && typeof repeat.statePath !== 'string';
-}
-/** Every key an element renders below itself: `children` plus every slot. */
-function childKeysOf(element) {
-    const slots = element.slots;
-    if (!slots)
-        return element.children ?? [];
-    const fromSlots = Object.values(slots).flat();
-    return element.children ? [...element.children, ...fromSlots] : fromSlots;
-}
-/**
- * Walk the element graph once for depth and cycles.
- *
- * Iterative on purpose. A recursive walk would blow the stack on exactly the
- * specs this exists to catch, which would make the guard a second way to
- * crash rather than the fix for the first.
- *
- * Depth is measured from `spec.root`, because that is what renders. Cycles
- * are swept for across every element, including the ones no parent reaches:
- * an unreachable cycle is still a defect, and one edit away from a reachable
- * one.
- *
- * Not every element that reaches itself is a defect, though. Drawing a tree —
- * a comment thread, a file browser, a nested menu — means an element that
- * repeats over a relative path and renders itself for each item, and that ends
- * when the data does. A back edge is only reported when nothing along it
- * descends into the data, which is the case that cannot end.
- *
- * `depthBelow` is memoised per element, so a shared subtree costs one visit
- * instead of one per path into it — without that, a spec whose elements each
- * name the next two is exponential to check. The memo makes the reported
- * depth a lower bound once a cycle has been cut, since which edge closes the
- * cycle depends on the order the walk reached it. The cycle is reported as an
- * error of its own, which is the finding worth acting on.
- */
-function analyseSpecGraph(spec) {
-    const elements = spec.elements ?? {};
-    const cycles = new Set();
-    const depthBelow = new Map();
-    const onPath = new Set();
-    const walkFrom = (start) => {
-        const first = elements[start];
-        if (!first || depthBelow.has(start))
-            return;
-        const stack = [
-            { key: start, kids: childKeysOf(first), next: 0, deepest: 0 },
-        ];
-        onPath.add(start);
-        while (stack.length > 0) {
-            const frame = stack[stack.length - 1];
-            if (frame.next < frame.kids.length) {
-                const childKey = frame.kids[frame.next++];
-                const memo = depthBelow.get(childKey);
-                if (memo !== undefined) {
-                    frame.deepest = Math.max(frame.deepest, memo);
-                    continue;
+    }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /**
+     * Why this element is not drawn, or null when it is.
+     *
+     * The cycle half is unconditional — not something `validate` turns on. An
+     * element that renders itself without reading any deeper renders forever,
+     * and a spec that never stops rendering takes the tab with it; refusing to
+     * draw the repetition is the only outcome that leaves anything on screen.
+     * It costs one walk up a chain of parents, bounded by `maxDepth` where one
+     * is set and by the spec's own nesting where it is not.
+     */
+    refusal = computed(() => {
+        const path = this.path();
+        if (repeatsItself(path))
+            return 'cycle';
+        const maxDepth = this.root.limits()?.maxDepth;
+        if (maxDepth !== undefined && path.depth > maxDepth)
+            return 'depth';
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "refusal" }] : /* istanbul ignore next */ []));
+    renderCtx = {
+        element: this.resolvedElement,
+        props: computed(() => this.resolvedElement()?.props ?? {}),
+        emit: (event) => this.fireEvent(event),
+        on: (event) => this.eventHandle(event),
+        bindings: this.bindings,
+        loading: computed(() => this.root.loading()),
+        setBound: (prop, value) => {
+            const path = untracked(this.bindings)?.[prop];
+            if (path) {
+                this.state.set(path, value);
+            }
+            else if (isDevMode()) {
+                console.warn(`[ngx-json-render] setBound("${prop}"): prop has no $bindState/$bindItem binding`);
+            }
+        },
+    };
+    // Typed as Injector for the peer range: see `confirmInjector` in
+    // renderer.component.ts.
+    outletInjector = Injector.create({
+        providers: [
+            { provide: RENDER_CONTEXT, useValue: this.renderCtx },
+            { provide: ELEMENT_KEY, useValue: this.elementKey },
+            { provide: RENDER_PATH, useValue: this.path },
+        ],
+        parent: inject(Injector),
+    });
+    constructor() {
+        // Warn (once) when this element is refused. Both reasons are silent
+        // failures on screen — something the spec asked for is missing — so
+        // neither should be silent in the console.
+        let warnedRefusal = false;
+        effect(() => {
+            const reason = this.refusal();
+            if (!reason || warnedRefusal)
+                return;
+            warnedRefusal = true;
+            const path = untracked(this.path);
+            if (reason === 'cycle') {
+                console.warn(`[ngx-json-render] Cycle in the spec: ${describePath(path)}. "${path.key}" renders itself again without reading any deeper into state${path.scopePath === null ? '' : ` (still at "${path.scopePath}")`}, so it never ends. It is not rendered again; everything above it still is. A tree that recurses needs a repeat with a relative statePath, like {"$item": "children"}.`);
+            }
+            else {
+                console.warn(`[ngx-json-render] renderLimits.maxDepth (${untracked(this.root.limits)?.maxDepth}) reached at ${describePath(path)}. "${path.key}" and anything below it do not render.`);
+            }
+        });
+        // Dev mode: after a state write this element skipped, check that it was
+        // right to. Resolving against the whole state has to give what the element
+        // already shows; anything else is a read the spec analysis didn't name.
+        if (inject(CHECK_SKIPPED_WRITES)) {
+            let snapshotsSeen = -1;
+            effect(() => {
+                this.state.state();
+                const shown = this.resolvedElement();
+                const shownVisible = this.visible();
+                const reads = this.stateReads();
+                untracked(() => {
+                    const skipped = this.snapshotsTaken === snapshotsSeen;
+                    snapshotsSeen = this.snapshotsTaken;
+                    if (skipped && shown && reads !== null) {
+                        this.checkSkippedWrite(shown, shownVisible, reads);
+                    }
+                });
+            });
+        }
+        // Count the writes that touch a path this element is bound to. Only an
+        // element with bindings listens, and it reads them when a write arrives,
+        // so a binding that moves (a repeat item that shifts) is followed without
+        // subscribing again.
+        effect((onCleanup) => {
+            if (!this.bindings())
+                return;
+            const unsubscribe = this.state.subscribeChanges((changes) => {
+                const paths = Object.values(untracked(this.bindings) ?? {});
+                if (changes.some((change) => paths.some((path) => touches(change.path, path)))) {
+                    this.boundWrites.update((count) => count + 1);
                 }
-                // A child that closes the cycle is not followed — that is what keeps
-                // this walk finite — and not counted towards depth either.
-                if (onPath.has(childKey)) {
-                    const from = stack.findIndex((frame) => frame.key === childKey);
-                    const descends = stack
-                        .slice(from)
-                        .some((frame) => descendsIntoItems(elements[frame.key]));
-                    if (!descends)
-                        cycles.add(childKey);
+            });
+            onCleanup(unsubscribe);
+        });
+        // Warn (once per type) about unknown component types.
+        const warnedTypes = new Set();
+        effect(() => {
+            const el = this.rawElement();
+            if (!el || this.entry() || warnedTypes.has(el.type))
+                return;
+            warnedTypes.add(el.type);
+            console.warn(`No renderer for component type: ${el.type}`);
+        });
+        // Warn about unknown / default slots when the registry carries metadata.
+        effect(() => {
+            const el = this.rawElement();
+            const meta = this.entry();
+            if (!el?.slots || !meta?.slots)
+                return;
+            const available = new Set(meta.slots);
+            for (const slotName of Object.keys(el.slots)) {
+                const warnKey = `${el.type}:${slotName}`;
+                if (warnedSlots.has(warnKey))
                     continue;
+                if (slotName === 'default') {
+                    warnedSlots.add(warnKey);
+                    console.warn(`[json-render] Component "${el.type}" uses slots.default. Use "children" for default slot content.`);
+                }
+                else if (!available.has(slotName)) {
+                    warnedSlots.add(warnKey);
+                    console.warn(`[json-render] Unknown slot "${slotName}" on component "${el.type}". Available slots: ${meta.slots.join(', ')}`);
                 }
-                const child = elements[childKey];
-                // A child the spec never defined is validateSpec's finding, not ours.
-                if (!child)
-                    continue;
-                onPath.add(childKey);
-                stack.push({
-                    key: childKey,
-                    kids: childKeysOf(child),
-                    next: 0,
-                    deepest: 0,
-                });
-                continue;
             }
-            stack.pop();
-            onPath.delete(frame.key);
-            const depth = frame.deepest + 1;
-            depthBelow.set(frame.key, depth);
-            const parent = stack[stack.length - 1];
-            if (parent)
-                parent.deepest = Math.max(parent.deepest, depth);
-        }
-    };
-    if (spec.root)
-        walkFrom(spec.root);
-    const depth = (spec.root ? depthBelow.get(spec.root) : undefined) ?? 0;
-    for (const key of Object.keys(elements))
-        walkFrom(key);
-    return { depth, cycles: [...cycles] };
-}
-/** Report a cycle, naming the element that is its own descendant. */
-function cycleIssue(key) {
-    return {
-        severity: 'error',
-        code: 'cycle',
-        elementKey: key,
-        message: `Element "${key}" renders itself against the same data, which never terminates. The cycle is broken where it closes — the repeated element does not render a second time — but the spec cannot be drawn as written. A tree that recurses needs a repeat with a relative statePath, like {"$item": "children"}.`,
-    };
-}
-/** Report a breached element-count cap. */
-function elementCountIssue(count, limit) {
-    return {
-        severity: 'error',
-        code: 'too_many_elements',
-        message: `Spec has ${count} elements, over the limit of ${limit}. Nothing is rendered: renderLimits.maxElements is a cap on the whole spec.`,
-    };
-}
-/** Report a breached depth cap. */
-function depthIssue(depth, limit) {
-    return {
-        severity: 'error',
-        code: 'too_deep',
-        message: `Spec nests ${depth} levels deep, over the limit of ${limit}. Elements below level ${limit} do not render.`,
-    };
-}
-/**
- * Check a spec against a catalog: the component types it names, then the
- * catalog's spec schema, then each element's props against its own
- * component's schema.
- *
- * The props need that pass of their own. Core builds one schema for the whole
- * spec, and it gives an element's props a component's schema only when the
- * catalog has exactly one component; with more, every element's props are an
- * open record, whatever its `type`. So `catalog.validate` holds an element to
- * its shape — `children`, a `type` from the catalog — and not to its props.
- *
- * Whatever that schema did say about the props of an element checked here is
- * dropped: with a one-component catalog it would be reported twice, and it
- * judges expressions this pass knows to leave alone.
- *
- * The schema passes are skipped while a type is unknown. That is an error on
- * its own, and the spec schema would only restate it as a `type` outside the
- * ones it accepts.
- */
-function catalogIssues(spec, catalog) {
-    const elements = Object.entries(spec.elements ?? {});
-    const known = new Set(catalog.componentNames);
-    const unknown = [];
-    for (const [key, element] of elements) {
-        if (known.has(element.type))
-            continue;
-        unknown.push({
-            severity: 'error',
-            code: 'unknown_component',
-            elementKey: key,
-            message: `Element "${key}" has type "${element.type}", which this catalog does not define. Nothing renders for it.`,
+        });
+        // Watch effect: fire actions when watched state paths change.
+        effect((onCleanup) => {
+            // A refused element does not act, not just draw nothing. `watch` is the
+            // one thing an element does without being on screen, so leaving it wired
+            // would let the element past `maxDepth` — or the one that closes a cycle
+            // — keep dispatching actions from behind a cap that was supposed to have
+            // stopped it. Reading the signal here also unwires it if the refusal
+            // arrives later, when the limits change.
+            if (this.refusal())
+                return;
+            const watchConfig = this.rawElement()?.watch;
+            if (!watchConfig)
+                return;
+            const paths = Object.keys(watchConfig);
+            if (paths.length === 0)
+                return;
+            const unsubscribe = this.state.subscribeChanges((changes) => {
+                const changedPaths = new Set(changes.map((change) => change.path));
+                void (async () => {
+                    for (const path of paths) {
+                        if (!changedPaths.has(path))
+                            continue;
+                        const binding = watchConfig[path];
+                        if (binding)
+                            await this.dispatch(binding);
+                    }
+                })().catch(reportActionError);
+            });
+            onCleanup(unsubscribe);
         });
     }
-    if (unknown.length > 0)
-        return unknown;
-    const schemas = new Map();
-    for (const [key, element] of elements) {
-        const schema = propsSchemaOf(catalog.data, element.type);
-        if (schema)
-            schemas.set(key, schema);
-    }
-    const found = specSchemaIssues(spec, catalog).filter(({ path }) => !(path[0] === 'elements' &&
-        typeof path[1] === 'string' &&
-        schemas.has(path[1]) &&
-        path[2] === 'props'));
-    for (const [key, element] of elements) {
-        const room = MAX_REPORTED_PROP_ISSUES - found.length;
-        if (room <= 0)
-            break;
-        const schema = schemas.get(key);
-        if (schema)
-            found.push(...propsIssues(key, element, schema, room));
-    }
-    return found.slice(0, MAX_REPORTED_PROP_ISSUES).map(toSpecCheckIssue);
-}
-/**
- * The props schema a catalog declares for a component type, if it declares
- * one that can be called.
- */
-function propsSchemaOf(data, type) {
-    const components = data
-        ?.components;
-    if (typeof components !== 'object' ||
-        components === null ||
-        !Object.hasOwn(components, type)) {
-        return undefined;
-    }
-    const props = components[type]?.props;
-    return typeof props
-        ?.safeParse === 'function'
-        ? props
-        : undefined;
-}
-/** What the catalog's spec schema reported, with paths rooted at the spec. */
-function specSchemaIssues(spec, catalog) {
-    try {
-        const result = catalog.validate(spec);
-        return result.success ? [] : readIssues(result.error);
-    }
-    catch (error) {
-        return [{ path: [], message: threwMessage('the catalog schema', error) }];
-    }
-}
-/**
- * What an element's component schema says about its props, leaving out what
- * it says about expressions, with paths rooted at the spec.
- *
- * A schema that throws counts as a rejection, not a crash. Real ones do:
- * `ValidationConfigSchema`, which every Material input's `validation` prop
- * uses, recurses through `enabled` and overflows the stack a thousand
- * `$and`s deep.
- */
-function propsIssues(key, element, schema, room) {
-    const at = ['elements', key, 'props'];
-    let result;
-    try {
-        result = schema.safeParse(element.props);
+    /**
+     * Resolve this element against the whole current state and warn, once per
+     * element key, when that differs from what it shows after skipping a write.
+     *
+     * It only reports, and leaves the element as it is: correcting it here would
+     * make dev mode render what production doesn't.
+     */
+    checkSkippedWrite(shown, shownVisible, reads) {
+        const key = this.elementKey();
+        const el = this.rawElement();
+        if (!el || warnedSkippedWrites.has(key))
+            return;
+        const ctx = this.liveResolutionCtx();
+        let props;
+        let visible;
+        try {
+            props = resolveElementProps(el.props ?? {}, ctx);
+            visible = el.visible === undefined || evaluateVisibility(el.visible, ctx);
+        }
+        catch {
+            return;
+        }
+        const differs = Object.keys({ ...props, ...shown.props }).filter((prop) => !sameContent(props[prop], shown.props[prop]));
+        if (visible !== shownVisible)
+            differs.push('visible');
+        if (differs.length === 0)
+            return;
+        warnedSkippedWrites.add(key);
+        const paths = reads.size > 0 ? [...reads].join(', ') : 'no state paths';
+        console.warn(`[ngx-json-render] "${key}" did not resolve again after a state write, but resolving it now changes ${differs.join(', ')}. It resolves only when a state path it reads changes, and it reads ${paths}. Either a $computed function in it depends on something besides its args, or the renderer missed a read — please report the spec at https://github.com/shteynu/ngx-json-render/issues. This check runs in dev mode only.`);
     }
-    catch (error) {
-        return [
-            {
-                path: at,
-                message: threwMessage(`the "${element.type}" schema`, error),
-            },
-        ];
+    /**
+     * Resolution context with a live state snapshot, so `$state` references in
+     * later actions of a chain see mutations from earlier ones.
+     */
+    liveResolutionCtx() {
+        return {
+            ...untracked(this.resolutionCtx),
+            stateModel: this.state.getSnapshot(),
+        };
     }
-    if (result.success)
-        return [];
-    const issues = [];
-    for (const { path, message } of readIssues(result.error)) {
-        if (issues.length >= room)
-            break;
-        if (reachesExpression(element.props, path))
-            continue;
-        issues.push({ path: [...at, ...path], message });
+    /**
+     * Fire-and-forget entry point for event emission: dispatching is async, but
+     * a template listener has nowhere to await it, so the failure must be
+     * handled here rather than escaping as an unhandled rejection.
+     */
+    fireEvent(eventName) {
+        this.emitEvent(eventName).catch(reportActionError);
     }
-    return issues;
-}
-/**
- * Whether a props issue is about an expression: it sits on one, inside one,
- * or on a value holding one.
- *
- * `{"$state": "/title"}` where the schema wants a string is not a defect.
- * Core resolves every such value before the component sees it, so the schema
- * would be judging something that never renders. Any `$`-prefixed key counts
- * — directive names must start with `$`, and so would an expression added to
- * core later. A value merely holding one is left alone too, since a union or
- * a refinement over it ran on the unresolved value.
- *
- * The props object itself is not an expression: core resolves the values
- * inside it, never the object.
- */
-function reachesExpression(props, path) {
-    let value = props;
-    for (const segment of path) {
-        if (typeof value !== 'object' || value === null)
-            return false;
-        value = value[segment];
-        if (isExpression(value))
-            return true;
+    async emitEvent(eventName) {
+        const binding = untracked(this.rawElement)?.on?.[eventName];
+        if (binding)
+            await this.dispatch(binding);
     }
-    return holdsExpression(value);
-}
-/** A value core resolves at render time — or will, once it knows the key. */
-function isExpression(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        !Array.isArray(value) &&
-        Object.keys(value).some((key) => key.startsWith('$')));
-}
-/**
- * Whether anything nested inside `value` is an expression.
- *
- * Iterative, and it remembers what it has seen, for the same reason as
- * {@link analyseSpecGraph}: props are as attacker-shaped as the rest of the
- * spec, and a check that overflowed or looped on them would be a second way
- * to crash.
- */
-function holdsExpression(value) {
-    const pending = [value];
-    const seen = new Set();
-    while (pending.length > 0) {
-        const current = pending.pop();
-        if (typeof current !== 'object' || current === null)
-            continue;
-        if (seen.has(current))
-            continue;
-        seen.add(current);
-        for (const child of Object.values(current)) {
-            if (isExpression(child))
-                return true;
-            pending.push(child);
+    /**
+     * Run an `on` or `watch` binding's actions in order. Params are resolved
+     * per action, just before it runs, so a `$state` read in a later action of
+     * the chain sees what an earlier one wrote.
+     */
+    async dispatch(binding) {
+        for (const b of Array.isArray(binding) ? binding : [binding]) {
+            if (!b.params) {
+                await this.actions.execute(b);
+                continue;
+            }
+            const liveCtx = this.liveResolutionCtx();
+            const resolved = {};
+            for (const [key, val] of Object.entries(b.params)) {
+                resolved[key] = resolveActionParam(val, liveCtx);
+            }
+            await this.actions.execute({ ...b, params: resolved });
         }
     }
-    return false;
-}
-/**
- * Read what a schema reported.
- *
- * Read defensively rather than typed against the schema library: the shape
- * below (`issues`, each with `path` and `message`) is what every version of
- * it has produced, and a renderer that threw while explaining a bad spec
- * would be the worse failure.
- */
-function readIssues(error) {
-    const raw = error?.issues;
-    if (!Array.isArray(raw))
-        return [];
-    return raw.map((entry) => {
-        const item = entry;
-        const path = item?.path;
-        const message = item?.message;
+    eventHandle(eventName) {
+        const el = this.rawElement();
+        const binding = el?.on?.[eventName];
+        if (!binding) {
+            return { emit: () => { }, shouldPreventDefault: false, bound: false };
+        }
+        const actionBindings = Array.isArray(binding) ? binding : [binding];
         return {
-            path: Array.isArray(path) ? path : [],
-            message: typeof message === 'string' ? message : 'is not valid',
+            emit: () => this.fireEvent(eventName),
+            shouldPreventDefault: actionBindings.some((b) => b.preventDefault),
+            bound: true,
         };
-    });
-}
-function threwMessage(schema, error) {
-    const reason = error instanceof Error ? ` (${error.name}: ${error.message})` : '';
-    return `${schema} threw instead of answering${reason}, so this counts as rejected`;
-}
-function toSpecCheckIssue({ path, message }) {
-    // Paths are rooted at the spec, so `elements.<key>.props.<prop>` names the
-    // element in its second segment.
-    const elementKey = path[0] === 'elements' && typeof path[1] === 'string' ? path[1] : undefined;
-    const where = path.length > 0 ? path.map(String).join('.') : 'spec';
-    return {
-        severity: 'error',
-        code: 'invalid_props',
-        ...(elementKey === undefined ? {} : { elementKey }),
-        message: `${where}: ${message}`,
-    };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JrElement, isStandalone: true, selector: "jr-element", inputs: { elementKey: { classPropertyName: "elementKey", publicName: "elementKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (!refusal() && rawElement() && visible() && component()) {
+      @if (devtoolsKey(); as dk) {
+        <span [attr.data-jr-key]="dk" style="display: contents">
+          <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+        </span>
+      } @else {
+        <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+      }
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrElement, decorators: [{
+            type: Component,
+            args: [{ selector: 'jr-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], template: `
+    @if (!refusal() && rawElement() && visible() && component()) {
+      @if (devtoolsKey(); as dk) {
+        <span [attr.data-jr-key]="dk" style="display: contents">
+          <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+        </span>
+      } @else {
+        <ng-container *ngComponentOutlet="component(); injector: outletInjector" />
+      }
+    }
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { elementKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementKey", required: true }] }] } });
 
 const CLEAN = {
     spec: null,
@@ -2501,8 +2566,14 @@ class JsonRenderer {
      * `$bindState`, `$template`, a directive — has no value until render time,
      * so it is not checked.
      *
-     * Only read when `validate` is on, and — like the rest of the check —
-     * skipped while `loading`.
+     * The check is read only when `validate` is on, and — like the rest of
+     * it — skipped while `loading`.
+     *
+     * While `loading`, the catalog also gates mounting, whatever `validate` is:
+     * an element whose props do not yet pass its component's schema shows its
+     * registry entry's `fallback`, or nothing, instead of a component with half
+     * its props. Once an element has mounted it stays mounted, and when
+     * `loading` ends every element mounts.
      */
     catalog = input(null, ...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore next */ []));
     /**
@@ -2548,6 +2619,7 @@ class JsonRenderer {
         root.loading = this.loading;
         root.fallback = this.fallback;
         root.limits = this.renderLimits;
+        root.catalog = this.catalog;
         root.store = this.store;
         root.initialState = computed(() => this.state() ?? this.spec()?.state ?? {}, ...(ngDevMode ? [{ debugName: "initialState" }] : /* istanbul ignore next */ []));
         root.handlers = this.handlers;
@@ -2878,8 +2950,13 @@ function defineRegistry(catalog, options) {
     // Build the component registry, attaching slot metadata from the catalog.
     const registry = {};
     if (options.components) {
-        for (const [name, component] of Object.entries(options.components)) {
-            const entry = { component };
+        for (const [name, value] of Object.entries(options.components)) {
+            const entry = typeof value === 'function'
+                ? { component: value }
+                : {
+                    component: value.component,
+                    ...(value.fallback ? { fallback: value.fallback } : {}),
+                };
             const slots = catalogComponents?.[name]?.slots;
             if (slots)
                 entry.slots = slots;