@axzydev/axzy_ui_system 1.7.2 → 1.7.4

package/src/json-renderer/form/form.test.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen as testingScreen } from "@testing-library/react";
+import { ITSchemaRenderer } from "../kernel/SchemaRenderer";
+import type { JsonEngineIssue } from "../shared/errors";
+import type { NodeSchema, ScreenSchema } from "../kernel/types";
+import { validateSchema } from "../validation/validate";
+import { readFormFields, validateField, validateForm, type FormField } from "./rules";
+
+/** Esquema mínimo con un formulario de contacto. */
+const pantalla = (fields: unknown, extra: Record<string, unknown> = {}): ScreenSchema =>
+  ({
+    version: 1,
+    id: "formulario",
+    content: {
+      type: "form",
+      id: "contacto",
+      props: { fields, onSubmit: { action: "enviar" }, ...extra },
+    } as NodeSchema,
+  }) as ScreenSchema;
+
+const CAMPOS: FormField[] = [
+  { name: "nombre", kind: "text", label: "Nombre", required: true },
+  { name: "correo", kind: "email", label: "Correo", required: true },
+];
+
+describe("readFormFields", () => {
+  const ruta = ["content", 0, "props", "fields"];
+
+  it("lee los campos con su tipo y obligatoriedad", () => {
+    const { fields, issues } = readFormFields([{ name: "correo", kind: "email", label: "Correo", required: true }], ruta);
+    expect(issues).toEqual([]);
+    expect(fields).toEqual([{ name: "correo", kind: "email", required: true, label: "Correo" }]);
+  });
+
+  it("un campo sin name se descarta con JR021 y el resto sigue", () => {
+    const { fields, issues } = readFormFields([{ kind: "text" }, { name: "ok" }], ruta);
+    expect(fields.map((campo) => campo.name)).toEqual(["ok"]);
+    expect(issues[0]).toMatchObject({ code: "JR021", severity: "error" });
+  });
+
+  it("un name repetido se descarta con JR021", () => {
+    const { fields, issues } = readFormFields([{ name: "a" }, { name: "a" }], ruta);
+    expect(fields).toHaveLength(1);
+    expect(issues[0]).toMatchObject({ code: "JR021" });
+  });
+
+  it("un tipo no admitido cae a text con aviso JR011", () => {
+    const { fields, issues } = readFormFields([{ name: "edad", kind: "number" }], ruta);
+    expect(fields[0].kind).toBe("text");
+    expect(issues[0]).toMatchObject({ code: "JR011", severity: "warning" });
+  });
+
+  it("si fields no es una lista, avisa con JR021 y no hay campos", () => {
+    const { fields, issues } = readFormFields("no-es-lista", ruta);
+    expect(fields).toEqual([]);
+    expect(issues[0]).toMatchObject({ code: "JR021" });
+  });
+});
+
+describe("reglas de valor", () => {
+  it("required rechaza vacío y solo espacios", () => {
+    expect(validateField({ kind: "text", required: true }, "")).toBe("required");
+    expect(validateField({ kind: "text", required: true }, "   ")).toBe("required");
+    expect(validateField({ kind: "text", required: true }, "Ana")).toBeUndefined();
+  });
+
+  it("un campo opcional vacío no falla", () => {
+    expect(validateField({ kind: "email", required: false }, "")).toBeUndefined();
+  });
+
+  it("email acepta una dirección y rechaza formas incompletas", () => {
+    expect(validateField({ kind: "email", required: true }, "ana@axzy.dev")).toBeUndefined();
+    expect(validateField({ kind: "email", required: true }, "ana@axzy")).toBe("email");
+    expect(validateField({ kind: "email", required: true }, "ana axzy@dev.com")).toBe("email");
+    expect(validateField({ kind: "email", required: true }, "sin-arroba")).toBe("email");
+  });
+
+  it("validateForm devuelve solo los campos con error", () => {
+    expect(validateForm(CAMPOS, { nombre: "Ana", correo: "mal" })).toEqual({ correo: "email" });
+    expect(validateForm(CAMPOS, { nombre: "Ana", correo: "ana@axzy.dev" })).toEqual({});
+  });
+});
+
+describe("validación del esquema con nodos form", () => {
+  it("un formulario bien declarado es válido", () => {
+    expect(validateSchema(pantalla([{ name: "nombre" }])).verdict).toBe("valid");
+  });
+
+  it("un formulario sin fields es inválido con JR021", () => {
+    const informe = validateSchema(pantalla(undefined));
+    expect(informe.verdict).toBe("invalid");
+    expect(informe.errors[0]).toMatchObject({ code: "JR021" });
+  });
+});
+
+describe("nodo form en pantalla", () => {
+  it("pinta un input por campo con su name", () => {
+    const { container } = render(<ITSchemaRenderer schema={pantalla(CAMPOS)} />);
+    expect(container.querySelector('input[name="nombre"]')).not.toBeNull();
+    expect(container.querySelector('input[name="correo"]')).not.toBeNull();
+  });
+
+  it("enviar vacío muestra el error traducido y no llama a la acción", () => {
+    const onSubmit = vi.fn();
+    render(<ITSchemaRenderer schema={pantalla(CAMPOS)} resolveAction={() => onSubmit} />);
+
+    fireEvent.click(testingScreen.getByRole("button", { name: "Enviar" }));
+
+    expect(testingScreen.getAllByText("Campo obligatorio.").length).toBeGreaterThan(0);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("con datos válidos llama a la acción con los valores de los campos", () => {
+    const onSubmit = vi.fn();
+    const { container } = render(<ITSchemaRenderer schema={pantalla(CAMPOS)} resolveAction={() => onSubmit} />);
+
+    fireEvent.change(container.querySelector('input[name="nombre"]')!, { target: { value: "Ana" } });
+    fireEvent.change(container.querySelector('input[name="correo"]')!, { target: { value: "ana@axzy.dev" } });
+    fireEvent.click(testingScreen.getByRole("button", { name: "Enviar" }));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit.mock.calls[0][0]).toEqual({ nombre: "Ana", correo: "ana@axzy.dev" });
+  });
+
+  it("el error de un campo desaparece al volver a escribir en él", () => {
+    const { container } = render(<ITSchemaRenderer schema={pantalla(CAMPOS)} />);
+    fireEvent.click(testingScreen.getByRole("button", { name: "Enviar" }));
+    expect(testingScreen.getAllByText("Campo obligatorio.").length).toBeGreaterThan(0);
+
+    fireEvent.change(container.querySelector('input[name="nombre"]')!, { target: { value: "A" } });
+
+    // El campo "nombre" ya no tiene error; "correo" sigue en error.
+    expect(testingScreen.getAllByText("Campo obligatorio.")).toHaveLength(1);
+  });
+
+  it("un campo con un nombre inválido no tumba el formulario y avisa", () => {
+    const issues: JsonEngineIssue[] = [];
+    const { container } = render(
+      <ITSchemaRenderer
+        schema={pantalla([{ name: "ok", label: "OK" }, { label: "sin nombre" }])}
+        onIssue={(issue) => issues.push(issue)}
+      />
+    );
+    expect(container.querySelector('input[name="ok"]')).not.toBeNull();
+    expect(issues.some((issue) => issue.code === "JR021")).toBe(true);
+  });
+});

package/src/json-renderer/form/formLength.test.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen as testingScreen } from "@testing-library/react";
+import { ITSchemaRenderer } from "../kernel/SchemaRenderer";
+import type { JsonEngineIssue } from "../shared/errors";
+import type { NodeSchema, ScreenSchema } from "../kernel/types";
+import { validateSchema } from "../validation/validate";
+import { readFormFields, validateField } from "./rules";
+
+const RUTA = ["content", 0, "props", "fields"];
+
+/** Esquema con un formulario de un único campo. */
+const pantalla = (campo: Record<string, unknown>): ScreenSchema =>
+  ({
+    version: 1,
+    id: "longitud",
+    content: { type: "form", id: "f", props: { fields: [campo], onSubmit: { action: "enviar" } } } as NodeSchema,
+  }) as ScreenSchema;
+
+describe("lectura de longitudes", () => {
+  it("lee minLength y maxLength como enteros no negativos", () => {
+    const { fields, issues } = readFormFields([{ name: "n", minLength: 2, maxLength: 10 }], RUTA);
+    expect(issues).toEqual([]);
+    expect(fields[0]).toMatchObject({ minLength: 2, maxLength: 10 });
+  });
+
+  it("una longitud que no es entero no negativo se ignora con JR011", () => {
+    for (const malo of [-1, 2.5, "3"]) {
+      const { fields, issues } = readFormFields([{ name: "n", minLength: malo }], RUTA);
+      expect(fields[0].minLength, String(malo)).toBeUndefined();
+      expect(issues[0], String(malo)).toMatchObject({ code: "JR011", severity: "warning" });
+    }
+  });
+
+  it("minLength mayor que maxLength descarta el campo con JR021", () => {
+    const { fields, issues } = readFormFields([{ name: "n", minLength: 5, maxLength: 2 }], RUTA);
+    expect(fields).toEqual([]);
+    expect(issues[0]).toMatchObject({ code: "JR021", severity: "error" });
+  });
+
+  it("un esquema con longitudes válidas no tiene errores de validación", () => {
+    expect(validateSchema(pantalla({ name: "n", minLength: 2, maxLength: 10 })).verdict).toBe("valid");
+  });
+});
+
+describe("reglas de longitud", () => {
+  it("minLength rechaza un valor más corto, contando sin espacios de los extremos", () => {
+    expect(validateField({ kind: "text", required: true, minLength: 3 }, "ab")).toBe("minLength");
+    expect(validateField({ kind: "text", required: true, minLength: 3 }, "  ab  ")).toBe("minLength");
+    expect(validateField({ kind: "text", required: true, minLength: 3 }, "abc")).toBeUndefined();
+  });
+
+  it("maxLength rechaza un valor más largo", () => {
+    expect(validateField({ kind: "text", required: false, maxLength: 3 }, "abcd")).toBe("maxLength");
+    expect(validateField({ kind: "text", required: false, maxLength: 3 }, "abc")).toBeUndefined();
+  });
+
+  it("un campo opcional vacío no se valida por longitud", () => {
+    expect(validateField({ kind: "text", required: false, minLength: 3 }, "")).toBeUndefined();
+  });
+
+  it("obligatorio gana a longitud: vacío sigue siendo required", () => {
+    expect(validateField({ kind: "text", required: true, minLength: 3 }, "")).toBe("required");
+  });
+});
+
+describe("mensajes de longitud en pantalla", () => {
+  it("muestra el mínimo con su número", () => {
+    const { container } = render(<ITSchemaRenderer schema={pantalla({ name: "nombre", label: "Nombre", required: true, minLength: 2 })} />);
+    fireEvent.change(container.querySelector('input[name="nombre"]')!, { target: { value: "A" } });
+    fireEvent.click(testingScreen.getByRole("button", { name: "Enviar" }));
+    expect(testingScreen.getByText("Escribe al menos 2 caracteres.")).toBeTruthy();
+  });
+
+  it("muestra el máximo con su número y no llama a la acción", () => {
+    const onSubmit = { called: false };
+    const { container } = render(
+      <ITSchemaRenderer
+        schema={pantalla({ name: "codigo", label: "Código", required: true, maxLength: 4 })}
+        resolveAction={() => () => {
+          onSubmit.called = true;
+        }}
+      />
+    );
+    fireEvent.change(container.querySelector('input[name="codigo"]')!, { target: { value: "abcdef" } });
+    fireEvent.click(testingScreen.getByRole("button", { name: "Enviar" }));
+    expect(testingScreen.getByText("Escribe como máximo 4 caracteres.")).toBeTruthy();
+    expect(onSubmit.called).toBe(false);
+  });
+
+  it("una longitud inválida no tumba el formulario y avisa", () => {
+    const issues: JsonEngineIssue[] = [];
+    const { container } = render(
+      <ITSchemaRenderer schema={pantalla({ name: "n", label: "N", minLength: -1 })} onIssue={(issue) => issues.push(issue)} />
+    );
+    expect(container.querySelector('input[name="n"]')).not.toBeNull();
+    expect(issues.some((issue) => issue.code === "JR011")).toBe(true);
+  });
+});

package/src/json-renderer/form/rules.ts

@@ -0,0 +1,162 @@
+/**
+ * Reglas del nodo `form`: lectura de los campos del esquema y validación de valores.
+ *
+ * Son funciones puras, sin React. Las usan a la vez el renderizador (para pintar) y el
+ * validador (para avisar antes de pintar), así que una forma inválida se trata igual
+ * en los dos sitios. Las validaciones devuelven el **código** del error, no el texto:
+ * el texto lo pone `FormNode` con `jsonRenderer.form.*`.
+ *
+ * Deliberadamente no hay reglas con expresiones regulares declaradas en el JSON: una
+ * regex que llega del esquema puede bloquear la pestaña (retrocesos catastróficos).
+ */
+
+import { issue, type JsonEngineIssue } from "../shared/errors";
+import { formatPath, type SchemaPath } from "../shared/paths";
+
+/** Tipos de campo que admite el nodo `form`. */
+export const FORM_FIELD_KINDS = ["text", "email"] as const;
+
+/** Tipo de campo. */
+export type FormFieldKind = (typeof FORM_FIELD_KINDS)[number];
+
+/** Código de error de un campo. */
+export type FormRuleCode = "required" | "email" | "minLength" | "maxLength";
+
+/** Campo ya validado en forma, con la etiqueta aún sin traducir. */
+export interface DeclaredField {
+  /** Nombre del campo: clave del valor enviado. */
+  name: string;
+  /** Tipo de campo. */
+  kind: FormFieldKind;
+  /** Si el campo es obligatorio. */
+  required: boolean;
+  /** Mínimo de caracteres (sin contar espacios de los extremos). */
+  minLength?: number;
+  /** Máximo de caracteres (sin contar espacios de los extremos). */
+  maxLength?: number;
+  /** Etiqueta tal cual la declaró el esquema (puede ser `{ i18n }`). */
+  label: unknown;
+}
+
+/** Campo listo para pintar: la etiqueta ya es texto. */
+export interface FormField {
+  /** Nombre del campo. */
+  name: string;
+  /** Tipo de campo. */
+  kind: FormFieldKind;
+  /** Etiqueta visible. */
+  label: string;
+  /** Si el campo es obligatorio. */
+  required: boolean;
+  /** Mínimo de caracteres. */
+  minLength?: number;
+  /** Máximo de caracteres. */
+  maxLength?: number;
+}
+
+/** Forma razonable de un correo: algo@algo.dominio, sin espacios. */
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** Longitud declarada: entero no negativo, o `undefined` si no hay o no es válida. */
+function longitudDeclarada(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isInteger(value) && value >= 0 ? value : undefined;
+}
+
+/**
+ * Lee los campos declarados. Un campo sin `name` o repetido se descarta con `JR021`;
+ * un tipo no admitido cae a `text` con `JR011`; una longitud inválida se ignora con
+ * `JR011`. Si el mínimo supera al máximo, se descarta el campo con `JR021`.
+ *
+ * @example
+ * readFormFields([{ name: "correo", kind: "email" }], ["content", 0, "props", "fields"]).fields[0].kind; // "email"
+ */
+export function readFormFields(declared: unknown, fieldsPath: SchemaPath): { fields: DeclaredField[]; issues: JsonEngineIssue[] } {
+  const issues: JsonEngineIssue[] = [];
+  const fields: DeclaredField[] = [];
+
+  if (!Array.isArray(declared)) {
+    issues.push(issue("JR021", "El formulario necesita `props.fields` como lista.", formatPath(fieldsPath), { severity: "error" }));
+    return { fields, issues };
+  }
+
+  const nombres = new Set<string>();
+  declared.forEach((raw, index) => {
+    const fieldPath = [...fieldsPath, index];
+    const campo = raw as Record<string, unknown> | null;
+    if (!campo || typeof campo !== "object" || typeof campo.name !== "string" || campo.name === "") {
+      issues.push(issue("JR021", "Un campo del formulario no declara `name`.", formatPath(fieldPath), { severity: "error" }));
+      return;
+    }
+    if (nombres.has(campo.name)) {
+      issues.push(issue("JR021", `El campo "${campo.name}" se repite.`, formatPath(fieldPath), { severity: "error" }));
+      return;
+    }
+
+    let kind: FormFieldKind = "text";
+    if (campo.kind !== undefined) {
+      if (typeof campo.kind === "string" && (FORM_FIELD_KINDS as readonly string[]).includes(campo.kind)) {
+        kind = campo.kind as FormFieldKind;
+      } else {
+        issues.push(
+          issue("JR011", `Tipo de campo "${String(campo.kind)}" no admitido.`, formatPath(fieldPath), {
+            severity: "warning",
+            hint: `Admitidos: ${FORM_FIELD_KINDS.join(", ")}. Se usa "text".`,
+          })
+        );
+      }
+    }
+
+    const minLength = longitudDeclarada(campo.minLength);
+    const maxLength = longitudDeclarada(campo.maxLength);
+    for (const [clave, valor, declarada] of [["minLength", campo.minLength, minLength], ["maxLength", campo.maxLength, maxLength]] as const) {
+      if (valor !== undefined && declarada === undefined) {
+        issues.push(issue("JR011", `\`${clave}\` debe ser un entero no negativo.`, formatPath(fieldPath), { severity: "warning", hint: "Se ignora." }));
+      }
+    }
+    if (minLength !== undefined && maxLength !== undefined && minLength > maxLength) {
+      issues.push(issue("JR021", `El campo "${campo.name}" tiene minLength mayor que maxLength.`, formatPath(fieldPath), { severity: "error" }));
+      return;
+    }
+
+    nombres.add(campo.name);
+    fields.push({ name: campo.name, kind, required: campo.required === true, minLength, maxLength, label: campo.label });
+  });
+
+  return { fields, issues };
+}
+
+/**
+ * Valida un valor contra las reglas de su campo. Devuelve el código del primer error o `undefined`.
+ *
+ * El orden importa para el mensaje: obligatorio, longitud, correo. Un campo opcional vacío
+ * no tiene más reglas que cumplir.
+ */
+export function validateField(
+  field: Pick<FormField, "kind" | "required" | "minLength" | "maxLength">,
+  value: string
+): FormRuleCode | undefined {
+  const texto = value.trim();
+  if (texto === "") return field.required ? "required" : undefined;
+  if (field.minLength !== undefined && texto.length < field.minLength) return "minLength";
+  if (field.maxLength !== undefined && texto.length > field.maxLength) return "maxLength";
+  if (field.kind === "email" && !EMAIL.test(texto)) return "email";
+  return undefined;
+}
+
+/**
+ * Valida todos los campos. Devuelve solo los que tienen error, por nombre de campo.
+ *
+ * @example
+ * validateForm(campos, { nombre: "" }); // { nombre: "required" }
+ */
+export function validateForm(
+  fields: Pick<FormField, "name" | "kind" | "required" | "minLength" | "maxLength">[],
+  values: Record<string, string>
+): Record<string, FormRuleCode> {
+  const errores: Record<string, FormRuleCode> = {};
+  for (const field of fields) {
+    const code = validateField(field, values[field.name] ?? "");
+    if (code) errores[field.name] = code;
+  }
+  return errores;
+}

package/src/json-renderer/index.ts

@@ -22,6 +22,25 @@ export { NodeBoundary } from "./kernel/NodeBoundary";
 export { renderNode, childList, hasChildren } from "./kernel/renderNode";
 export { auditTree, countPendingNodes } from "./kernel/partial";
 export type { ITJsonRenderEngineProps } from "./kernel/schemaRenderer.props";
+
+/* ── Rutas y navegación ────────────────────────────────────────────────── */
+export { validateRoutes, flattenRoutes, joinRoutePath } from "./routing/routes";
+export type { RoutesSchema, RouteSchema, RouteNavSchema, FlatRoute } from "./routing/routes";
+export { matchRoute, routeHref } from "./routing/match";
+export type { RouteMatch } from "./routing/match";
+export { buildNavigationTree, navContainsRoute } from "./routing/navigation";
+export type { NavNode } from "./routing/navigation";
+
+/* ── Efectos de acción (lo que el host cumple tras una acción) ─────────── */
+export { wrapAction } from "./actions/effects";
+export type { EffectRegistry, EffectContext, ToastVariant } from "./actions/effects";
+
+/* ── Slots (bloques JSX que registra el host) ──────────────────────────── */
+export type { SlotComponent, SlotRegistry } from "./kernel/slots";
+
+/* ── Binding ───────────────────────────────────────────────────────────── */
+export { createBindingResolver } from "./binding/resolveValue";
+export type { DataHandler, DataLoader, BindingScope, BindingResolver } from "./binding/resolveValue";
 export type {
   ScreenSchema,
   NodeSchema,
@@ -60,6 +79,8 @@ export type { VocabularyContract, ComponentContract, PropContract } from "./voca
 /* ── Streaming ─────────────────────────────────────────────────────────── */
 export { parsePartialSchema, isNodePending } from "./stream/tolerantParse";
 export type { PartialParseResult, StreamState } from "./stream/tolerantParse";
+export { useSchemaStream } from "./stream/useSchemaStream";
+export type { StreamSource } from "./stream/useSchemaStream";
 
 /* ── Compartido ────────────────────────────────────────────────────────── */
 export { JsonEngineError, issue } from "./shared/errors";

package/src/json-renderer/kernel/SchemaRenderer.tsx

@@ -1,14 +1,18 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Catalog } from "../catalog/catalog.props";
 import { axzyCatalog } from "../catalog/axzyCatalog";
-import type { JsonEngineIssue } from "../shared/errors";
+import { createBindingResolver } from "../binding/resolveValue";
+import { issue, type JsonEngineIssue } from "../shared/errors";
 import { resolveLimits, type EngineLimits } from "../shared/limits";
-import type { SchemaPath } from "../shared/paths";
+import { formatPath, type SchemaPath } from "../shared/paths";
+import { faltanCapacidades } from "./capabilities";
 import { NodeBoundary } from "./NodeBoundary";
 import { auditTree } from "./partial";
 import { childList, renderNode } from "./renderNode";
 import type { ITJsonRenderEngineProps } from "./schemaRenderer.props";
-import type { NodeSchema } from "./types";
+import type { SlotRegistry } from "./slots";
+import type { EffectRegistry } from "../actions/effects";
+import type { NodeSchema, SchemaValue } from "./types";
 
 /** Contexto que comparten los nodos durante un render. */
 interface RenderContext {
@@ -21,6 +25,12 @@ interface RenderContext {
   resolveValue?: ITJsonRenderEngineProps["resolveValue"];
   resolveAction?: ITJsonRenderEngineProps["resolveAction"];
   pendingFallback?: React.ReactNode;
+  slots?: SlotRegistry;
+  effects?: EffectRegistry;
+  /** Capacidades que concede el host. Un `requires` sin concesión no se pinta. */
+  capabilities?: readonly string[];
+  /** Escribe en el estado de la pantalla (efecto `set`). */
+  setState?: (cambios: Record<string, unknown>) => void;
 }
 
 /**
@@ -44,6 +54,19 @@ function renderTree(node: NodeSchema, path: SchemaPath, context: RenderContext,
     context.onIssue?.(issue);
   };
 
+  // Capacidades: un nodo que exige algo que el host no concede no se pinta. Si tiene
+  // `fallback`, se pinta el fallback en su lugar; si no, el nodo desaparece con aviso.
+  const faltan = faltanCapacidades(node.requires, context.capabilities);
+  if (faltan.length > 0) {
+    reportIssue(
+      issue("JR060", `Falta la capacidad ${faltan.join(", ")} para pintar \`${node.type}\`.`, formatPath(path), {
+        severity: "warning",
+        hint: "El host debe conceder la capacidad con la prop `capabilities`, o el nodo debe declarar un `fallback`.",
+      })
+    );
+    return node.fallback ? renderTree(node.fallback, [...path, "fallback"], context, level + 1) : null;
+  }
+
   const issuesBefore = issues.length;
 
   const element = renderNode(node, {
@@ -53,6 +76,12 @@ function renderTree(node: NodeSchema, path: SchemaPath, context: RenderContext,
     resolveValue: context.resolveValue,
     resolveAction: context.resolveAction,
     pendingFallback: context.pendingFallback,
+    slots: context.slots,
+    effects: context.effects,
+    actionTimeoutMs: context.limits.actionTimeoutMs,
+    onIssue: context.onIssue,
+    setState: context.setState,
+    capabilities: context.capabilities,
     renderChildren: (current, currentPath) => {
       const children = childList(current);
       if (children.length === 0) return undefined;
@@ -111,6 +140,11 @@ export function ITSchemaRenderer({
   schema,
   catalog = axzyCatalog,
   limits,
+  params,
+  dataHandlers,
+  slots,
+  effects,
+  capabilities,
   resolveValue,
   resolveAction,
   pendingFallback,
@@ -118,6 +152,25 @@ export function ITSchemaRenderer({
   className,
 }: ITJsonRenderEngineProps) {
   const resolvedLimits = useMemo(() => resolveLimits(limits), [limits]);
+
+  // Estado de la pantalla: el inicial del esquema más lo que escriben las acciones (efecto
+  // `set`). Va ligado a la identidad del esquema: una pantalla nueva empieza limpia.
+  const [escrito, setEscrito] = useState<{ origen: unknown; valores: Record<string, unknown> }>({
+    origen: schema,
+    valores: {},
+  });
+  const valoresPantalla = useMemo<Record<string, unknown>>(
+    () => ({ ...(schema?.state ?? {}), ...(escrito.origen === schema ? escrito.valores : {}) }),
+    [schema, escrito]
+  );
+  const escribirEstado = useCallback(
+    (cambios: Record<string, unknown>) =>
+      setEscrito((previo) => ({
+        origen: schema,
+        valores: { ...(previo.origen === schema ? previo.valores : {}), ...cambios },
+      })),
+    [schema]
+  );
   // Un único array de avisos por render: el resolutor y los boundaries escriben
   // en él, así que no se pierde ninguno por el camino.
   const issues: JsonEngineIssue[] = [];
@@ -137,17 +190,40 @@ export function ITSchemaRenderer({
       limits: resolvedLimits,
       issues,
       onIssue,
-      resolveValue,
+      // El binding escribe sus avisos (JR030, JR032) en el mismo array que el resto del render.
+      resolveValue: createBindingResolver({
+        data: schema?.data,
+        state: valoresPantalla as Record<string, SchemaValue>,
+        params,
+        handlers: dataHandlers,
+        report: (aviso) => issues.push(aviso),
+        host: resolveValue,
+      }),
       resolveAction,
       pendingFallback,
+      slots,
+      effects,
+      capabilities,
+      setState: escribirEstado,
     }),
     // `issues` es un array nuevo en cada render a propósito: acumular avisos
     // entre renders duplicaría los avisos de esquemas que no han cambiado.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [catalog, resolvedLimits, onIssue, resolveValue, resolveAction, pendingFallback]
+    [schema, params, valoresPantalla, escribirEstado, dataHandlers, slots, effects, capabilities, catalog, resolvedLimits, onIssue, resolveValue, resolveAction, pendingFallback]
   );
 
-  const content = schema
+  // Una pantalla que exige una capacidad no concedida no se pinta en absoluto.
+  const faltanRaiz = schema ? faltanCapacidades(schema.requires, capabilities) : [];
+  if (faltanRaiz.length > 0) {
+    issues.push(
+      issue("JR060", `Falta la capacidad ${faltanRaiz.join(", ")} para esta pantalla.`, "requires", {
+        severity: "error",
+        hint: "Concede la capacidad con la prop `capabilities` del renderizador.",
+      })
+    );
+  }
+
+  const content = schema && faltanRaiz.length === 0
     ? (Array.isArray(schema.content) ? schema.content : [schema.content]).filter(
         (node): node is NodeSchema => Boolean(node) && typeof node === "object"
       )

package/src/json-renderer/kernel/capabilities.ts

@@ -0,0 +1,30 @@
+/**
+ * Capacidades: lo que el host concede y lo que un nodo o una pantalla exige (`requires`).
+ *
+ * Denegado por defecto: si un nodo exige una capacidad y el host no la concede (o no
+ * pasa ninguna), el nodo no se pinta. Si tiene `fallback`, se pinta el fallback.
+ * El esquema nunca decide permisos: solo los nombra.
+ */
+
+/**
+ * Normaliza `requires` (texto o lista de textos) a una lista de capacidades.
+ * Sin `requires`, la lista es vacía. Un valor que no se entiende devuelve `null`: el
+ * motor lo trata como denegado (falla cerrado), nunca como «no hay requisito».
+ */
+export function capacidadesRequeridas(requires: unknown): string[] | null {
+  if (requires === undefined || requires === null) return [];
+  if (typeof requires === "string") return requires === "" ? null : [requires];
+  if (Array.isArray(requires) && requires.every((item) => typeof item === "string" && item !== "")) {
+    return requires as string[];
+  }
+  return null;
+}
+
+/** Capacidades que exige `requires` y que el host no concede. Lista vacía = todo concedido. */
+export function faltanCapacidades(requires: unknown, concedidas: readonly string[] | undefined): string[] {
+  const requeridas = capacidadesRequeridas(requires);
+  if (requeridas === null) return ["(requires no válido)"];
+  if (requeridas.length === 0) return [];
+  const conjunto = new Set(concedidas ?? []);
+  return requeridas.filter((capacidad) => !conjunto.has(capacidad));
+}