@axzydev/axzy_ui_system 1.7.2 → 1.7.4

package/dist/index.js

@@ -1205,7 +1205,13 @@ var es = {
   "jsonEditor.kindString": "texto",
   "jsonEditor.kindNumber": "n\xFAmero",
   "jsonEditor.kindBoolean": "booleano",
-  "jsonEditor.kindNull": "nulo"
+  "jsonEditor.kindNull": "nulo",
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Campo obligatorio.",
+  "jsonRenderer.form.email": "Escribe un correo v\xE1lido.",
+  "jsonRenderer.form.minLength": "Escribe al menos {min} caracteres.",
+  "jsonRenderer.form.maxLength": "Escribe como m\xE1ximo {max} caracteres.",
+  "jsonRenderer.form.submit": "Enviar"
 };
 var es_default = es;
 
@@ -1411,7 +1417,13 @@ var en = {
   "jsonEditor.kindString": "string",
   "jsonEditor.kindNumber": "number",
   "jsonEditor.kindBoolean": "boolean",
-  "jsonEditor.kindNull": "null"
+  "jsonEditor.kindNull": "null",
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Required field.",
+  "jsonRenderer.form.email": "Enter a valid email address.",
+  "jsonRenderer.form.minLength": "Enter at least {min} characters.",
+  "jsonRenderer.form.maxLength": "Enter at most {max} characters.",
+  "jsonRenderer.form.submit": "Submit"
 };
 var en_default = en;
 
@@ -1488,6 +1500,7 @@ function useITTranslation() {
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function ITCard({
   title,
+  headerActions,
   image,
   alt,
   children,
@@ -1547,14 +1560,24 @@ function ITCard({
           }
         ),
         /* @__PURE__ */ jsxs2("div", { className: clsx2(contentClassName), style: bodyStyle, children: [
-          title && /* @__PURE__ */ jsx4(
+          headerActions ? /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+            title && /* @__PURE__ */ jsx4(
+              ITText,
+              {
+                as: "h3",
+                className: clsx2(flat ? "text-base font-semibold" : "text-xl font-semibold", titleClassName),
+                children: title
+              }
+            ),
+            headerActions
+          ] }) : title ? /* @__PURE__ */ jsx4(
             ITText,
             {
               as: "h3",
               className: clsx2(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName),
               children: title
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsx4(ITText, { as: "div", className: "text-secondary-600", children })
         ] }),
         actions && /* @__PURE__ */ jsx4(
@@ -1574,6 +1597,7 @@ function ITCard({
 
 // src/components/atoms/flex/flex.tsx
 import clsx3 from "clsx";
+import { forwardRef } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var directionMap = {
   row: "flex-row",
@@ -1601,7 +1625,7 @@ var wrapMap = {
   wrap: "flex-wrap",
   "wrap-reverse": "flex-wrap-reverse"
 };
-function ITFlex({
+var ITFlex = forwardRef(function ITFlex2({
   children,
   direction = "row",
   align,
@@ -1614,8 +1638,9 @@ function ITFlex({
   className,
   style,
   as: Component = "div",
-  onClick
-}) {
+  onClick,
+  onScroll
+}, ref) {
   const resolvedStyle = {
     gap: gap > 0 ? `${gap * 0.25}rem` : void 0,
     flexGrow: typeof grow === "boolean" ? grow ? 1 : 0 : grow,
@@ -1626,6 +1651,7 @@ function ITFlex({
   return /* @__PURE__ */ jsx5(
     Component,
     {
+      ref,
       className: clsx3(
         "flex",
         directionMap[direction],
@@ -1636,10 +1662,13 @@ function ITFlex({
       ),
       style: resolvedStyle,
       onClick,
+      onScroll,
       children
     }
   );
-}
+});
+ITFlex.displayName = "ITFlex";
+var flex_default = ITFlex;
 
 // src/components/atoms/stack/stack.tsx
 import clsx4 from "clsx";
@@ -1854,7 +1883,7 @@ function ITJsonRenderer({
       case "card":
         return /* @__PURE__ */ jsx9(ITCard, { ...props, children: childContent });
       case "flex":
-        return /* @__PURE__ */ jsx9(ITFlex, { ...props, children: childContent });
+        return /* @__PURE__ */ jsx9(flex_default, { ...props, children: childContent });
       case "stack":
         return /* @__PURE__ */ jsx9(ITStack, { ...props, children: childContent });
       case "grid":
@@ -8935,6 +8964,9 @@ function ITStatCard({
   value,
   trend,
   trendDirection = trend && trend.startsWith("-") ? "down" : "neutral",
+  hint,
+  progress,
+  progressColor = "primary",
   icon,
   color = "bg-primary-50 dark:bg-primary-950/20",
   className,
@@ -8963,7 +8995,18 @@ function ITStatCard({
         /* @__PURE__ */ jsxs44("div", { className: "flex items-baseline gap-2", children: [
           /* @__PURE__ */ jsx63(ITText, { as: "span", className: "text-2xl font-bold text-slate-800 dark:text-white", children: value }),
           trend && /* @__PURE__ */ jsx63(ITText, { as: "span", className: clsx44("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection]), children: trend })
-        ] })
+        ] }),
+        hint && /* @__PURE__ */ jsx63(ITText, { as: "p", className: "mt-1 text-[11px] leading-snug text-slate-500 dark:text-slate-400", children: hint }),
+        progress !== void 0 && /* @__PURE__ */ jsx63(
+          ITProgress,
+          {
+            value: progress,
+            max: 100,
+            color: progressColor,
+            size: "sm",
+            className: "mt-2"
+          }
+        )
       ]
     }
   );
@@ -8979,6 +9022,8 @@ function ITLineBarChart({
   barLabel,
   lineColor = "#10b981",
   barColor = "#3b82f6",
+  showLine = true,
+  showBars = true,
   height = 240,
   formatValue,
   formatAxis,
@@ -8996,8 +9041,11 @@ function ITLineBarChart({
   const plotWidth = width - padding.left - padding.right;
   const plotHeight = height - padding.top - padding.bottom;
   const max = useMemo13(
-    () => Math.max(...data.flatMap((d) => [d.line, d.bar]), 1),
-    [data]
+    () => Math.max(
+      ...data.flatMap((d) => [showLine ? d.line : 0, showBars ? d.bar : 0]),
+      1
+    ),
+    [data, showLine, showBars]
   );
   const gridValues = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
   const step = data.length > 0 ? plotWidth / data.length : plotWidth;
@@ -9041,7 +9089,7 @@ function ITLineBarChart({
             ),
             /* @__PURE__ */ jsx64("text", { x: padding.left - 8, y: y(value) + 3, textAnchor: "end", fontSize: 10, fill: "#94a3b8", children: resolvedFormatAxis(Math.round(value)) })
           ] }, i)),
-          data.map((d, i) => /* @__PURE__ */ jsx64(
+          showBars && data.map((d, i) => /* @__PURE__ */ jsx64(
             "rect",
             {
               x: x(i) - barWidth / 2,
@@ -9054,8 +9102,8 @@ function ITLineBarChart({
             },
             `bar-${d.label}`
           )),
-          areaPath && /* @__PURE__ */ jsx64("path", { d: areaPath, fill: `url(#area-${gradientId})` }),
-          data.length > 0 && /* @__PURE__ */ jsx64(
+          showLine && areaPath && /* @__PURE__ */ jsx64("path", { d: areaPath, fill: `url(#area-${gradientId})` }),
+          showLine && data.length > 0 && /* @__PURE__ */ jsx64(
             "polyline",
             {
               points: linePoints,
@@ -9066,7 +9114,7 @@ function ITLineBarChart({
               strokeLinejoin: "round"
             }
           ),
-          data.map((d, i) => /* @__PURE__ */ jsx64(
+          showLine && data.map((d, i) => /* @__PURE__ */ jsx64(
             "circle",
             {
               cx: x(i),
@@ -9093,12 +9141,12 @@ function ITLineBarChart({
         role: "status",
         children: [
           /* @__PURE__ */ jsx64("p", { className: "text-[10px] font-semibold", style: { color: "#e2e8f0" }, children: active.label }),
-          /* @__PURE__ */ jsxs45("p", { className: "text-[11px] tabular-nums", style: { color: lineColor }, children: [
+          showLine && /* @__PURE__ */ jsxs45("p", { className: "text-[11px] tabular-nums", style: { color: lineColor }, children: [
             resolvedLineLabel,
             ": ",
             resolvedFormatValue(active.line)
           ] }),
-          /* @__PURE__ */ jsxs45("p", { className: "text-[11px] tabular-nums", style: { color: "#93c5fd" }, children: [
+          showBars && /* @__PURE__ */ jsxs45("p", { className: "text-[11px] tabular-nums", style: { color: "#93c5fd" }, children: [
             resolvedBarLabel,
             ": ",
             resolvedFormatValue(active.bar)
@@ -9107,11 +9155,11 @@ function ITLineBarChart({
       }
     ),
     /* @__PURE__ */ jsxs45("ul", { className: "flex flex-wrap items-center gap-4 text-[11px]", style: { color: "#475569" }, children: [
-      /* @__PURE__ */ jsxs45("li", { children: [
+      showLine && /* @__PURE__ */ jsxs45("li", { children: [
         /* @__PURE__ */ jsx64("span", { className: "h-2.5 w-2.5 rounded-sm", style: { background: lineColor }, "aria-hidden": true }),
         resolvedLineLabel
       ] }),
-      /* @__PURE__ */ jsxs45("li", { children: [
+      showBars && /* @__PURE__ */ jsxs45("li", { children: [
         /* @__PURE__ */ jsx64("span", { className: "h-2.5 w-2.5 rounded-sm", style: { background: barColor }, "aria-hidden": true }),
         resolvedBarLabel
       ] })
@@ -9760,6 +9808,7 @@ function ITTable({
 
 // src/components/atoms/textarea/textarea.tsx
 import clsx46 from "clsx";
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 var resizeMap = {
   none: "resize-none",
@@ -9767,7 +9816,7 @@ var resizeMap = {
   horizontal: "resize-x",
   both: "resize"
 };
-function ITTextarea({
+var ITTextarea = forwardRef2(function ITTextarea2({
   value,
   onChange,
   label,
@@ -9778,13 +9827,16 @@ function ITTextarea({
   className,
   name,
   maxLength,
-  resize = "vertical"
-}) {
+  resize = "vertical",
+  onKeyDown,
+  autoFocus = false
+}, ref) {
   return /* @__PURE__ */ jsxs47("div", { className: clsx46("flex flex-col gap-1.5", className), children: [
     label && /* @__PURE__ */ jsx66(ITText, { as: "label", className: inputLabel(!!error), htmlFor: name, children: label }),
     /* @__PURE__ */ jsx66(
       "textarea",
       {
+        ref,
         id: name,
         name,
         value,
@@ -9793,6 +9845,8 @@ function ITTextarea({
         rows,
         disabled,
         maxLength,
+        onKeyDown,
+        autoFocus,
         className: clsx46(
           "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm outline-none",
           "focus:ring-2",
@@ -9804,7 +9858,9 @@ function ITTextarea({
     ),
     error && /* @__PURE__ */ jsx66(ITText, { as: "span", className: inputError, children: error })
   ] });
-}
+});
+ITTextarea.displayName = "ITTextarea";
+var textarea_default = ITTextarea;
 
 // src/components/molecules/tabs/tabs.tsx
 import { useState as useState31 } from "react";
@@ -12171,7 +12227,7 @@ function EditorToggle({
 }
 
 // src/json-renderer/kernel/SchemaRenderer.tsx
-import { useEffect as useEffect18, useMemo as useMemo16, useRef as useRef23 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect18, useMemo as useMemo16, useRef as useRef23, useState as useState38 } from "react";
 
 // src/types/loader.types.ts
 var sizeClasses = {
@@ -12482,7 +12538,7 @@ var AXZY_CATALOG_ENTRIES = [
   },
   {
     type: "ITFlex",
-    component: ITFlex,
+    component: flex_default,
     children: true,
     summary: "Contenedor flex completo.",
     props: {
@@ -12615,6 +12671,192 @@ var AXZY_EXCLUDED_TYPES = {
 var axzyCatalog = createCatalog(AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES);
 var axzyCatalogTypes = Object.keys(axzyCatalog.entries);
 
+// src/json-renderer/shared/errors.ts
+var JsonEngineError = class extends Error {
+  constructor(code, message, path, hint) {
+    super(`${code} ${path ? `en ${path}: ` : ""}${message}`);
+    /** Código estable del catálogo de avisos. */
+    __publicField(this, "code");
+    /** Ruta del esquema donde se produjo. */
+    __publicField(this, "path");
+    /** Sugerencia accionable. */
+    __publicField(this, "hint");
+    this.name = "JsonEngineError";
+    this.code = code;
+    this.path = path;
+    this.hint = hint;
+  }
+  /** Convierte el error en el aviso que consume la interfaz y el informe. */
+  toIssue(severity = "error") {
+    return {
+      code: this.code,
+      severity,
+      message: this.message.replace(/^JR\d{3}\s?(en .*?: )?/, ""),
+      path: this.path,
+      hint: this.hint
+    };
+  }
+};
+function issue(code, message, path = "", options = {}) {
+  return {
+    code,
+    severity: options.severity ?? "error",
+    message,
+    path,
+    hint: options.hint
+  };
+}
+
+// src/json-renderer/shared/paths.ts
+function pushPath(path, segment) {
+  return [...path, segment];
+}
+function formatPath(path) {
+  let out = "";
+  for (const segment of path) {
+    if (typeof segment === "number") out += `[${segment}]`;
+    else out += out ? `.${segment}` : segment;
+  }
+  return out;
+}
+function parsePath(rendered) {
+  if (!rendered) return [];
+  return rendered.split(/\.(?![^[]*])/).flatMap((part) => {
+    const match = part.match(/^([^[\]]*)((?:\[\d+\])*)$/);
+    if (!match) return [part];
+    const [, key, indexes] = match;
+    const segments = key ? [key] : [];
+    for (const index of indexes.match(/\d+/g) ?? []) segments.push(Number(index));
+    return segments;
+  });
+}
+function readPath(source, path) {
+  let cursor = source;
+  for (const segment of path) {
+    if (cursor === null || typeof cursor !== "object") return void 0;
+    cursor = cursor[segment];
+  }
+  return cursor;
+}
+function hasPath(source, path) {
+  if (path.length === 0) return true;
+  const parent = readPath(source, path.slice(0, -1));
+  if (parent === null || typeof parent !== "object") return false;
+  return Object.prototype.hasOwnProperty.call(parent, path[path.length - 1]);
+}
+function propPath(nodePath, prop) {
+  return pushPath(pushPath(nodePath, "props"), prop);
+}
+
+// src/json-renderer/binding/resolveValue.ts
+var CLAVES_DE_RED = ["url", "endpoint", "href", "src"];
+var SUPPORTED_REFERENCES = ["$source", "$state", "$param"];
+function own(record, key) {
+  return record !== void 0 && Object.prototype.hasOwnProperty.call(record, key);
+}
+function isDollarReference(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  return Object.keys(value).some((key) => key.startsWith("$"));
+}
+function referenceIssue(message, path, hint) {
+  return issue("JR032", message, formatPath(path), { severity: "warning", hint });
+}
+function createBindingResolver(scope) {
+  const readValue = (table, kind, key, path) => {
+    if (own(table, key)) return table[key];
+    scope.report(
+      referenceIssue(
+        `La referencia \`${kind}: "${key}"\` no tiene valor.`,
+        path,
+        kind === "$state" ? "Declara el valor en `state` del esquema." : "El host debe pasar el par\xE1metro en `params`."
+      )
+    );
+    return void 0;
+  };
+  const resolveParams = (declared, path) => {
+    const resolved = {};
+    for (const [name, raw] of Object.entries(declared ?? {})) {
+      if (!isDollarReference(raw)) {
+        resolved[name] = raw;
+        continue;
+      }
+      const [key] = Object.keys(raw).filter((candidate) => candidate.startsWith("$"));
+      if (key === "$state" && typeof raw[key] === "string") {
+        const value = readValue(scope.state, "$state", raw[key], path);
+        if (value !== void 0) resolved[name] = value;
+      } else if (key === "$param" && typeof raw[key] === "string") {
+        const value = readValue(scope.params, "$param", raw[key], path);
+        if (value !== void 0) resolved[name] = value;
+      } else {
+        scope.report(
+          referenceIssue(
+            "Un par\xE1metro de fuente solo admite valores, `$state` o `$param`.",
+            path,
+            "Las fuentes no se encadenan: declara la fuente sin referencias a otras fuentes."
+          )
+        );
+      }
+    }
+    return resolved;
+  };
+  const failingLoader = (message, path, hint) => {
+    scope.report(issue("JR030", message, formatPath(path), { severity: "error", hint }));
+    return () => Promise.reject(new Error(message));
+  };
+  const sourceLoader = (name, path) => {
+    if (!own(scope.data, name)) {
+      return failingLoader(
+        `La fuente \`${name}\` no est\xE1 declarada en \`data\`.`,
+        path,
+        "Decl\xE1rala en `data` del esquema con el `handler` que registra el host."
+      );
+    }
+    const declared = scope.data[name];
+    const claveDeRed = Object.keys(declared).find((clave) => CLAVES_DE_RED.includes(clave));
+    if (claveDeRed) {
+      scope.report(
+        issue("JR031", `El esquema declara \`${claveDeRed}\` en la fuente "${name}": las fuentes no pueden pedir red.`, formatPath(path), {
+          severity: "error",
+          hint: "Una fuente solo nombra un `handler` que registra el host."
+        })
+      );
+      return () => Promise.reject(new Error(`La fuente "${name}" no puede pedir red.`));
+    }
+    const handler = own(scope.handlers, declared.handler) ? scope.handlers[declared.handler] : void 0;
+    if (typeof handler !== "function") {
+      return failingLoader(
+        `El handler \`${declared.handler}\` no est\xE1 registrado por el host.`,
+        path,
+        "El host debe registrarlo en `dataHandlers` del renderizador."
+      );
+    }
+    const params = resolveParams(declared.params, path);
+    return (query) => new Promise((resolve) => resolve(handler(query, params)));
+  };
+  const resolveReference = (ref, path) => {
+    const keys = Object.keys(ref).filter((key2) => key2.startsWith("$"));
+    const [key] = keys;
+    if (keys.length !== 1 || !SUPPORTED_REFERENCES.includes(key) || typeof ref[key] !== "string") {
+      scope.report(
+        referenceIssue(
+          `Referencia no soportada: ${keys.join(", ") || "sin operador"}.`,
+          path,
+          "Soportadas: `$source`, `$state` y `$param`. Los dem\xE1s operadores llegan con las acciones y las tablas."
+        )
+      );
+      return void 0;
+    }
+    const name = ref[key];
+    if (key === "$source") return sourceLoader(name, path);
+    if (key === "$state") return readValue(scope.state, "$state", name, path);
+    return readValue(scope.params, "$param", name, path);
+  };
+  return (value, path) => {
+    if (isDollarReference(value)) return resolveReference(value, path);
+    return scope.host ? scope.host(value, path) : value;
+  };
+}
+
 // src/json-renderer/shared/limits.ts
 var DEFAULT_LIMITS = {
   maxNodes: 5e3,
@@ -12658,46 +12900,25 @@ function createLimitTracker(limits = DEFAULT_LIMITS) {
   };
 }
 
-// src/json-renderer/kernel/NodeBoundary.tsx
-import React16 from "react";
-
-// src/json-renderer/shared/errors.ts
-var JsonEngineError = class extends Error {
-  constructor(code, message, path, hint) {
-    super(`${code} ${path ? `en ${path}: ` : ""}${message}`);
-    /** Código estable del catálogo de avisos. */
-    __publicField(this, "code");
-    /** Ruta del esquema donde se produjo. */
-    __publicField(this, "path");
-    /** Sugerencia accionable. */
-    __publicField(this, "hint");
-    this.name = "JsonEngineError";
-    this.code = code;
-    this.path = path;
-    this.hint = hint;
+// src/json-renderer/kernel/capabilities.ts
+function capacidadesRequeridas(requires) {
+  if (requires === void 0 || requires === null) return [];
+  if (typeof requires === "string") return requires === "" ? null : [requires];
+  if (Array.isArray(requires) && requires.every((item) => typeof item === "string" && item !== "")) {
+    return requires;
   }
-  /** Convierte el error en el aviso que consume la interfaz y el informe. */
-  toIssue(severity = "error") {
-    return {
-      code: this.code,
-      severity,
-      message: this.message.replace(/^JR\d{3}\s?(en .*?: )?/, ""),
-      path: this.path,
-      hint: this.hint
-    };
-  }
-};
-function issue(code, message, path = "", options = {}) {
-  return {
-    code,
-    severity: options.severity ?? "error",
-    message,
-    path,
-    hint: options.hint
-  };
+  return null;
+}
+function faltanCapacidades(requires, concedidas) {
+  const requeridas = capacidadesRequeridas(requires);
+  if (requeridas === null) return ["(requires no v\xE1lido)"];
+  if (requeridas.length === 0) return [];
+  const conjunto = new Set(concedidas ?? []);
+  return requeridas.filter((capacidad) => !conjunto.has(capacidad));
 }
 
 // src/json-renderer/kernel/NodeBoundary.tsx
+import React16 from "react";
 var NodeBoundary = class extends React16.Component {
   constructor() {
     super(...arguments);
@@ -13045,48 +13266,7 @@ function isNodePending(node) {
 }
 
 // src/json-renderer/kernel/renderNode.tsx
-import React17 from "react";
-
-// src/json-renderer/shared/paths.ts
-function pushPath(path, segment) {
-  return [...path, segment];
-}
-function formatPath(path) {
-  let out = "";
-  for (const segment of path) {
-    if (typeof segment === "number") out += `[${segment}]`;
-    else out += out ? `.${segment}` : segment;
-  }
-  return out;
-}
-function parsePath(rendered) {
-  if (!rendered) return [];
-  return rendered.split(/\.(?![^[]*])/).flatMap((part) => {
-    const match = part.match(/^([^[\]]*)((?:\[\d+\])*)$/);
-    if (!match) return [part];
-    const [, key, indexes] = match;
-    const segments = key ? [key] : [];
-    for (const index of indexes.match(/\d+/g) ?? []) segments.push(Number(index));
-    return segments;
-  });
-}
-function readPath(source, path) {
-  let cursor = source;
-  for (const segment of path) {
-    if (cursor === null || typeof cursor !== "object") return void 0;
-    cursor = cursor[segment];
-  }
-  return cursor;
-}
-function hasPath(source, path) {
-  if (path.length === 0) return true;
-  const parent = readPath(source, path.slice(0, -1));
-  if (parent === null || typeof parent !== "object") return false;
-  return Object.prototype.hasOwnProperty.call(parent, path[path.length - 1]);
-}
-function propPath(nodePath, prop) {
-  return pushPath(pushPath(nodePath, "props"), prop);
-}
+import React18 from "react";
 
 // src/json-renderer/catalog/resolve.ts
 function isSchemaReference(value) {
@@ -13227,11 +13407,457 @@ function resolveNode(node, catalog, path) {
   return { ok: true, entry, props, actions, issues };
 }
 
+// src/json-renderer/kernel/slots.ts
+var SLOT_TYPE = "slot";
+function isSlotNode(node) {
+  return node.type === SLOT_TYPE;
+}
+function slotName(node) {
+  const name = node.props?.name;
+  return typeof name === "string" && name !== "" ? name : void 0;
+}
+
+// src/json-renderer/form/FormNode.tsx
+import { useState as useState37 } from "react";
+
+// src/json-renderer/form/rules.ts
+var FORM_FIELD_KINDS = ["text", "email"];
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function longitudDeclarada(value) {
+  return typeof value === "number" && Number.isInteger(value) && value >= 0 ? value : void 0;
+}
+function readFormFields(declared, fieldsPath) {
+  const issues = [];
+  const fields = [];
+  if (!Array.isArray(declared)) {
+    issues.push(issue("JR021", "El formulario necesita `props.fields` como lista.", formatPath(fieldsPath), { severity: "error" }));
+    return { fields, issues };
+  }
+  const nombres = /* @__PURE__ */ new Set();
+  declared.forEach((raw, index) => {
+    const fieldPath = [...fieldsPath, index];
+    const campo = raw;
+    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 = "text";
+    if (campo.kind !== void 0) {
+      if (typeof campo.kind === "string" && FORM_FIELD_KINDS.includes(campo.kind)) {
+        kind = campo.kind;
+      } 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]]) {
+      if (valor !== void 0 && declarada === void 0) {
+        issues.push(issue("JR011", `\`${clave}\` debe ser un entero no negativo.`, formatPath(fieldPath), { severity: "warning", hint: "Se ignora." }));
+      }
+    }
+    if (minLength !== void 0 && maxLength !== void 0 && 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 };
+}
+function validateField(field, value) {
+  const texto = value.trim();
+  if (texto === "") return field.required ? "required" : void 0;
+  if (field.minLength !== void 0 && texto.length < field.minLength) return "minLength";
+  if (field.maxLength !== void 0 && texto.length > field.maxLength) return "maxLength";
+  if (field.kind === "email" && !EMAIL.test(texto)) return "email";
+  return void 0;
+}
+function validateForm(fields, values) {
+  const errores = {};
+  for (const field of fields) {
+    const code = validateField(field, values[field.name] ?? "");
+    if (code) errores[field.name] = code;
+  }
+  return errores;
+}
+
+// src/json-renderer/form/FormNode.tsx
+import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
+function valorDe(evento) {
+  if (typeof evento === "string") return evento;
+  return evento?.target?.value?.toString() ?? "";
+}
+function FormNode({ id, fields, submitLabel, onSubmit }) {
+  const { t } = useITTranslation();
+  const [values, setValues] = useState37({});
+  const [errors, setErrors] = useState37({});
+  const [intentado, setIntentado] = useState37(false);
+  const mensaje = (code, campo) => t(`jsonRenderer.form.${code}`, { min: String(campo.minLength ?? 0), max: String(campo.maxLength ?? 0) });
+  const enviar = () => {
+    const encontrados = validateForm(fields, values);
+    setIntentado(true);
+    setErrors(encontrados);
+    if (Object.keys(encontrados).length === 0) onSubmit?.(values);
+  };
+  return /* @__PURE__ */ jsx75("div", { id, children: /* @__PURE__ */ jsxs54(ITStack, { direction: "column", spacing: 3, alignItems: "stretch", children: [
+    fields.map((field) => /* @__PURE__ */ jsx75(
+      ITInput,
+      {
+        name: field.name,
+        label: field.label,
+        type: field.kind === "email" ? "email" : "text",
+        value: values[field.name] ?? "",
+        touched: intentado,
+        error: errors[field.name] ? mensaje(errors[field.name], field) : void 0,
+        onChange: (evento) => {
+          const valor = valorDe(evento);
+          setValues((previo) => ({ ...previo, [field.name]: valor }));
+          setErrors((previo) => {
+            if (!previo[field.name]) return previo;
+            const resto = { ...previo };
+            delete resto[field.name];
+            return resto;
+          });
+        }
+      },
+      field.name
+    )),
+    /* @__PURE__ */ jsx75(flex_default, { children: /* @__PURE__ */ jsx75(ITButton, { label: submitLabel ?? t("jsonRenderer.form.submit"), size: "sm", onClick: enviar }) })
+  ] }) });
+}
+
+// src/json-renderer/actions/effects.ts
+var MAX_EFFECT_DEPTH = 5;
+var EFFECT_KEYS = ["toast", "navigate", "refresh", "openOverlay", "closeOverlay", "set"];
+var EFFECT_KEYS_DEL_HOST = ["toast", "navigate", "refresh", "openOverlay", "closeOverlay"];
+function leerResultado(ruta, resultado) {
+  return ruta.split(".").reduce(
+    (actual, clave) => actual && typeof actual === "object" ? actual[clave] : void 0,
+    resultado
+  );
+}
+function resolverResultado(valor, resultado) {
+  if (!valor || typeof valor !== "object" || Array.isArray(valor)) return valor;
+  const objeto = valor;
+  if (typeof objeto.$result === "string") return leerResultado(objeto.$result, resultado) ?? "";
+  if (objeto.params && typeof objeto.params === "object") {
+    const params = Object.fromEntries(
+      Object.entries(objeto.params).map(([clave, valorParam]) => [
+        clave,
+        resolverResultado(valorParam, resultado)
+      ])
+    );
+    return { ...objeto, params };
+  }
+  return valor;
+}
+function plantilla(texto, resultado) {
+  return texto.replace(/\{([\w.]+)\}/g, (_, ruta) => {
+    const valor = leerResultado(ruta, resultado);
+    return valor === void 0 ? "" : String(valor);
+  });
+}
+function efectosSueltos(declarada) {
+  const sueltos = {};
+  for (const clave of EFFECT_KEYS) {
+    if (declarada[clave] !== void 0) sueltos[clave] = declarada[clave];
+  }
+  return Object.keys(sueltos).length > 0 ? sueltos : null;
+}
+function comprobarRegistro(efecto, context) {
+  for (const clave of EFFECT_KEYS_DEL_HOST) {
+    if (efecto[clave] === void 0) continue;
+    if (typeof context.effects?.[clave] !== "function") {
+      context.report(
+        issue("JR040", `El host no implementa el efecto \`${clave}\`.`, formatPath(context.path), {
+          severity: "warning",
+          hint: "Reg\xEDstralo en `effects` del renderizador o quita el efecto del esquema."
+        })
+      );
+    }
+  }
+}
+function cumplirEfecto(efecto, context, resultado) {
+  if (efecto.set && context.setState) {
+    const cambios = {};
+    for (const [clave, valor] of Object.entries(efecto.set)) {
+      const conResultado = resolverResultado(valor, resultado);
+      cambios[clave] = context.resolveRaw ? context.resolveRaw(conResultado, context.path) : conResultado;
+    }
+    context.setState(cambios);
+  }
+  const registro = context.effects;
+  if (!registro) return;
+  if (efecto.toast && registro.toast) {
+    registro.toast({
+      variant: efecto.toast.variant ?? "info",
+      message: context.resolveText(resolverResultado(efecto.toast.message, resultado), context.path)
+    });
+  }
+  if (typeof efecto.navigate === "string" && registro.navigate) {
+    registro.navigate(plantilla(efecto.navigate, resultado));
+  }
+  if (typeof efecto.refresh === "string" && registro.refresh) registro.refresh(efecto.refresh);
+  if (typeof efecto.openOverlay === "string" && registro.openOverlay) registro.openOverlay(efecto.openOverlay);
+  if (efecto.closeOverlay !== void 0 && registro.closeOverlay) {
+    registro.closeOverlay(typeof efecto.closeOverlay === "string" ? efecto.closeOverlay : void 0);
+  }
+}
+function pasosDe(efectos, context) {
+  const profundidad = context.depth ?? 0;
+  return efectos.map((efecto) => {
+    if (typeof efecto.action !== "string") {
+      comprobarRegistro(efecto, context);
+      return (resultado) => cumplirEfecto(efecto, context, resultado);
+    }
+    if (profundidad + 1 > MAX_EFFECT_DEPTH) {
+      context.report(
+        issue("JR042", `El encadenado de acciones supera ${MAX_EFFECT_DEPTH} niveles.`, formatPath(context.path), {
+          severity: "error",
+          hint: "Reduce los `then` anidados."
+        })
+      );
+      return () => void 0;
+    }
+    const handler = context.resolveChained?.(efecto.action);
+    if (!handler) {
+      context.report(
+        issue("JR040", `La acci\xF3n encadenada \`${efecto.action}\` no est\xE1 registrada por el host.`, formatPath(context.path), {
+          severity: "error",
+          hint: "Reg\xEDstrala en las acciones del renderizador o cambia el nombre en el esquema."
+        })
+      );
+      return () => void 0;
+    }
+    const encadenada = wrapAction(handler, efecto, { ...context, depth: profundidad + 1 });
+    return () => encadenada(efecto.args);
+  });
+}
+function wrapAction(handler, action, context) {
+  if (!action || typeof action !== "object") return handler;
+  const declarada = action;
+  const sueltos = efectosSueltos(declarada);
+  const alTerminar = [...sueltos ? [sueltos] : [], ...Array.isArray(declarada.then) ? declarada.then : []];
+  const alFallar = declarada.onError;
+  if (alTerminar.length === 0 && !alFallar) return handler;
+  const pasosOk = pasosDe(alTerminar, context);
+  const pasoError = alFallar ? pasosDe([alFallar], context)[0] : void 0;
+  const aplicar = (resultado) => pasosOk.forEach((paso) => paso(resultado));
+  return (...args) => {
+    let resultado;
+    try {
+      resultado = handler(...args);
+    } catch {
+      pasoError?.(void 0);
+      return void 0;
+    }
+    if (resultado && typeof resultado.then === "function") {
+      let resuelta = false;
+      const limite = context.timeoutMs;
+      const temporizador = limite !== void 0 && Number.isFinite(limite) ? setTimeout(() => {
+        if (resuelta) return;
+        resuelta = true;
+        context.reportRuntime?.(
+          issue("JR041", `La acci\xF3n excedi\xF3 ${limite} ms y se considera fallida.`, formatPath(context.path), {
+            severity: "error",
+            hint: "El host debe responder o rechazar la acci\xF3n a tiempo."
+          })
+        );
+        pasoError?.(void 0);
+      }, limite) : void 0;
+      resultado.then(
+        (valor) => {
+          if (resuelta) return;
+          resuelta = true;
+          clearTimeout(temporizador);
+          aplicar(valor);
+        },
+        () => {
+          if (resuelta) return;
+          resuelta = true;
+          clearTimeout(temporizador);
+          pasoError?.(void 0);
+        }
+      );
+      return resultado;
+    }
+    aplicar(resultado);
+    return resultado;
+  };
+}
+
 // src/json-renderer/kernel/renderNode.tsx
+function effectContext(options, path, node) {
+  return {
+    effects: options.effects,
+    path,
+    resolveText: (value, valuePath) => textoDe(options.resolveValue ? options.resolveValue(value, valuePath) : value),
+    report: (aviso) => options.issues.push(aviso),
+    // Una acción encadenada desde un efecto se resuelve con el mismo `resolveAction` del host.
+    resolveChained: (name) => options.resolveAction?.(node, "chain", { action: name }, path),
+    timeoutMs: options.actionTimeoutMs,
+    reportRuntime: options.onIssue,
+    setState: options.setState,
+    resolveRaw: (value, valuePath) => options.resolveValue ? options.resolveValue(value, valuePath) : value
+  };
+}
+function nombreDeAccion(action) {
+  const nombre = action?.action;
+  return typeof nombre === "string" ? nombre : "(sin nombre)";
+}
+function isFormNode(node) {
+  return node.type === "form";
+}
+function textoDe(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
+}
 function childList(node) {
   if (!node || node.children === void 0 || node.children === null) return [];
   return Array.isArray(node.children) ? node.children : [node.children];
 }
+function renderSlot(node, options) {
+  const { path, issues, slots, resolveValue } = options;
+  const name = slotName(node);
+  if (!name) {
+    issues.push(
+      issue("JR011", "El slot no declara `props.name`.", formatPath(propPath(path, "name")), {
+        severity: "error",
+        hint: 'Declara el nombre que el host registr\xF3, por ejemplo { "type": "slot", "props": { "name": "resumen" } }.'
+      })
+    );
+    return null;
+  }
+  const Component = slots && Object.prototype.hasOwnProperty.call(slots, name) ? slots[name] : void 0;
+  if (!Component) {
+    issues.push(
+      issue("JR010", `El slot \`${name}\` no est\xE1 registrado por el host.`, formatPath(path), {
+        severity: "error",
+        hint: "El host debe registrarlo en `slots` del renderizador."
+      })
+    );
+    return null;
+  }
+  const props = {};
+  for (const [key, raw] of Object.entries(node.props ?? {})) {
+    if (key === "name") continue;
+    props[key] = resolveValue ? resolveValue(raw, path) : raw;
+  }
+  return React18.createElement(Component, { key: node.id ?? path.join("-"), ...props });
+}
+function renderForm(node, options) {
+  const { path, issues, resolveValue, resolveAction } = options;
+  const { fields: declarados, issues: avisos } = readFormFields(node.props?.fields, [...path, "props", "fields"]);
+  issues.push(...avisos);
+  const campos = declarados.map((campo, index) => {
+    const etiqueta = resolveValue ? resolveValue(campo.label, [...path, "props", "fields", index]) : campo.label;
+    return {
+      name: campo.name,
+      kind: campo.kind,
+      required: campo.required,
+      minLength: campo.minLength,
+      maxLength: campo.maxLength,
+      label: textoDe(etiqueta) || campo.name
+    };
+  });
+  const textoEnvio = node.props?.submitLabel;
+  const submitLabel = textoDe(resolveValue ? resolveValue(textoEnvio, path) : textoEnvio) || void 0;
+  const accion = resolveAction?.(node, "onSubmit", node.props?.onSubmit, path);
+  if (node.props?.onSubmit !== void 0 && typeof accion !== "function") {
+    issues.push(
+      issue("JR040", `La acci\xF3n "${nombreDeAccion(node.props.onSubmit)}" no est\xE1 registrada por el host.`, formatPath(propPath(path, "onSubmit")), {
+        severity: "warning",
+        hint: "Reg\xEDstrala en `resolveAction` del host. Sin ella, enviar el formulario no hace nada."
+      })
+    );
+  }
+  const conEfectos = accion ? wrapAction(accion, node.props?.onSubmit, effectContext(options, path, node)) : void 0;
+  return React18.createElement(FormNode, {
+    key: node.id ?? path.join("-"),
+    id: node.id,
+    fields: campos,
+    submitLabel,
+    onSubmit: conEfectos ? (valores) => conEfectos(valores) : void 0
+  });
+}
+function prepararColumnas(columnas, node, options, path) {
+  if (!Array.isArray(columnas)) return columnas;
+  return columnas.map((columna, indice) => {
+    if (!columna || typeof columna !== "object") return columna;
+    const declarada = columna;
+    if (declarada.type !== "actions" || !Array.isArray(declarada.rowActions)) return columna;
+    const colPath = [...path, "props", "columns", indice];
+    const botones = declarada.rowActions.flatMap((raw, indiceAccion) => {
+      const accion = raw;
+      const rutaAccion = [...colPath, "rowActions", indiceAccion];
+      if (!accion || typeof accion.action !== "string" || accion.action === "") {
+        options.issues.push(issue("JR021", "Un bot\xF3n de fila no declara `action`.", formatPath(rutaAccion), { severity: "error" }));
+        return [];
+      }
+      const faltan = faltanCapacidades(accion.requires, options.capabilities);
+      if (faltan.length > 0) {
+        options.issues.push(
+          issue("JR061", `El bot\xF3n de fila "${accion.action}" exige ${faltan.join(", ")}, que no est\xE1 concedido.`, formatPath(rutaAccion), {
+            severity: "warning",
+            hint: "Concede la capacidad con la prop `capabilities` del renderizador."
+          })
+        );
+        return [];
+      }
+      const handler = options.resolveAction?.(node, `fila:${accion.action}`, accion, rutaAccion);
+      if (typeof handler !== "function") {
+        options.issues.push(
+          issue("JR040", `La acci\xF3n de fila "${accion.action}" no est\xE1 registrada por el host.`, formatPath(rutaAccion), {
+            severity: "warning",
+            hint: "Reg\xEDstrala en `resolveAction` del host, o quita el bot\xF3n del esquema."
+          })
+        );
+        return [];
+      }
+      const etiqueta = textoDe(options.resolveValue ? options.resolveValue(accion.label, rutaAccion) : accion.label);
+      return [
+        {
+          clave: String(indiceAccion),
+          etiqueta: etiqueta || accion.action,
+          color: typeof accion.color === "string" ? accion.color : "secondary",
+          variante: typeof accion.variant === "string" ? accion.variant : "outlined",
+          ejecutar: wrapAction(handler, accion, effectContext(options, rutaAccion, node))
+        }
+      ];
+    });
+    const copia = { ...declarada };
+    delete copia.rowActions;
+    const etiquetaColumna = textoDe(options.resolveValue ? options.resolveValue(copia.label, colPath) : copia.label);
+    const Boton = ITButton;
+    return {
+      ...copia,
+      label: etiquetaColumna || String(copia.key ?? ""),
+      actions: (fila) => React18.createElement(
+        React18.Fragment,
+        null,
+        botones.map(
+          (boton) => React18.createElement(Boton, {
+            key: boton.clave,
+            label: boton.etiqueta,
+            size: "sm",
+            variant: boton.variante,
+            color: boton.color,
+            onClick: () => boton.ejecutar(fila)
+          })
+        )
+      )
+    };
+  });
+}
 function renderNode(node, options) {
   const { catalog, path, issues, renderChildren } = options;
   if (!node || typeof node !== "object") {
@@ -13240,6 +13866,12 @@ function renderNode(node, options) {
   if (isNodePending(node)) {
     return options.pendingFallback ?? null;
   }
+  if (isSlotNode(node)) {
+    return renderSlot(node, options);
+  }
+  if (isFormNode(node)) {
+    return renderForm(node, options);
+  }
   const resolved = resolveNode(node, catalog, path);
   issues.push(...resolved.issues);
   if (!resolved.ok) {
@@ -13250,15 +13882,37 @@ function renderNode(node, options) {
   for (const [name, value] of Object.entries(props)) {
     finalProps[name] = options.resolveValue ? options.resolveValue(value, path) : value;
   }
+  if (node.type === "ITDataTable" && finalProps.columns !== void 0) {
+    finalProps.columns = prepararColumnas(finalProps.columns, node, options, path);
+  }
   for (const [name, action] of Object.entries(actions)) {
+    const faltan = faltanCapacidades(action?.requires, options.capabilities);
+    if (faltan.length > 0) {
+      issues.push(
+        issue("JR061", `La acci\xF3n "${nombreDeAccion(action)}" exige ${faltan.join(", ")}, que no est\xE1 concedido.`, formatPath(propPath(path, name)), {
+          severity: "warning",
+          hint: "Concede la capacidad con la prop `capabilities` del renderizador. Sin ella, la acci\xF3n no se ejecuta."
+        })
+      );
+      continue;
+    }
     const handler = options.resolveAction?.(node, name, action, path);
-    if (typeof handler === "function") finalProps[name] = handler;
+    if (typeof handler === "function") {
+      finalProps[name] = wrapAction(handler, action, effectContext(options, path, node));
+    } else {
+      issues.push(
+        issue("JR040", `La acci\xF3n "${nombreDeAccion(action)}" no est\xE1 registrada por el host.`, formatPath(propPath(path, name)), {
+          severity: "warning",
+          hint: "Reg\xEDstrala en `resolveAction` del host, o quita la prop del esquema."
+        })
+      );
+    }
   }
   const content = renderChildren ? renderChildren(node, path) : null;
   const rawText = entry.text && node.text !== void 0 ? node.text : void 0;
   const text = rawText === void 0 ? void 0 : options.resolveValue ? options.resolveValue(rawText, path) : rawText;
   const children = content ?? text;
-  const element = React17.createElement(
+  const element = React18.createElement(
     entry.component,
     { ...finalProps, key: node.id ?? path.join("-"), id: node.id },
     children
@@ -13314,7 +13968,7 @@ function countPendingNodes(schema) {
 }
 
 // src/json-renderer/kernel/SchemaRenderer.tsx
-import { Fragment as Fragment13, jsx as jsx75 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx76 } from "react/jsx-runtime";
 function renderTree(node, path, context, level) {
   if (!node || typeof node !== "object") return null;
   if (level > context.limits.maxDepth) return null;
@@ -13324,6 +13978,16 @@ function renderTree(node, path, context, level) {
     issues.push(issue2);
     context.onIssue?.(issue2);
   };
+  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, {
     catalog: context.catalog,
@@ -13332,6 +13996,12 @@ function renderTree(node, path, context, level) {
     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 void 0;
@@ -13344,7 +14014,7 @@ function renderTree(node, path, context, level) {
     context.onIssue?.(issues[index]);
   }
   const fallback = node.fallback ? renderTree(node.fallback, [...path, "fallback"], context, level + 1) : context.pendingFallback ?? null;
-  const wrapped = /* @__PURE__ */ jsx75(
+  const wrapped = /* @__PURE__ */ jsx76(
     NodeBoundary,
     {
       path: path.join("."),
@@ -13366,6 +14036,11 @@ function ITSchemaRenderer({
   schema,
   catalog = axzyCatalog,
   limits,
+  params,
+  dataHandlers,
+  slots,
+  effects,
+  capabilities,
   resolveValue,
   resolveAction,
   pendingFallback,
@@ -13373,6 +14048,21 @@ function ITSchemaRenderer({
   className
 }) {
   const resolvedLimits = useMemo16(() => resolveLimits(limits), [limits]);
+  const [escrito, setEscrito] = useState38({
+    origen: schema,
+    valores: {}
+  });
+  const valoresPantalla = useMemo16(
+    () => ({ ...schema?.state ?? {}, ...escrito.origen === schema ? escrito.valores : {} }),
+    [schema, escrito]
+  );
+  const escribirEstado = useCallback12(
+    (cambios) => setEscrito((previo) => ({
+      origen: schema,
+      valores: { ...previo.origen === schema ? previo.valores : {}, ...cambios }
+    })),
+    [schema]
+  );
   const issues = [];
   const nodeIds = /* @__PURE__ */ new Set();
   const audit = useMemo16(
@@ -13386,16 +14076,37 @@ 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,
+        params,
+        handlers: dataHandlers,
+        report: (aviso) => issues.push(aviso),
+        host: resolveValue
+      }),
       resolveAction,
-      pendingFallback
+      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 ? (Array.isArray(schema.content) ? schema.content : [schema.content]).filter(
+  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) => Boolean(node) && typeof node === "object"
   ) : [];
   const children = content.slice(0, resolvedLimits.maxNodes).map((node, index) => renderTree(node, ["content", index], context, 0)).filter(Boolean);
@@ -13421,7 +14132,159 @@ function ITSchemaRenderer({
     for (const issue2 of all) onIssue(issue2);
   }, [signature, onIssue]);
   if (!schema || children.length === 0) return null;
-  return className ? /* @__PURE__ */ jsx75("div", { className, children }) : /* @__PURE__ */ jsx75(Fragment13, { children });
+  return className ? /* @__PURE__ */ jsx76("div", { className, children }) : /* @__PURE__ */ jsx76(Fragment13, { children });
+}
+
+// src/json-renderer/routing/routes.ts
+function joinRoutePath(parent, own2) {
+  return [parent, typeof own2 === "string" ? own2 : ""].flatMap((part) => part.split("/")).filter((segment) => segment !== "").join("/");
+}
+var SEGMENT = /^(:[A-Za-z][A-Za-z0-9_]*|[A-Za-z0-9_.-]+)$/;
+function validateRoutes(input) {
+  const errors = [];
+  const document2 = input;
+  if (!document2 || typeof document2 !== "object" || Array.isArray(document2)) {
+    return [issue("JR020", "El documento de rutas debe ser un objeto.", "", { severity: "error" })];
+  }
+  if (typeof document2.version !== "number") {
+    errors.push(issue("JR020", "El documento de rutas no declara `version`.", "version", { severity: "error" }));
+  }
+  if (!Array.isArray(document2.routes)) {
+    errors.push(issue("JR020", "`routes` debe ser una lista.", "routes", { severity: "error" }));
+    return errors;
+  }
+  const seen = /* @__PURE__ */ new Map();
+  const visit = (route, path, parentPath, isRoot) => {
+    if (!route || typeof route !== "object") {
+      errors.push(issue("JR021", "La ruta no es un objeto.", path, { severity: "error" }));
+      return;
+    }
+    if (typeof route.id !== "string" || route.id === "") {
+      errors.push(issue("JR021", "La ruta no declara `id`.", path, { severity: "error" }));
+    }
+    if (route.path !== void 0 && route.path !== "") {
+      const parts = typeof route.path === "string" ? route.path.split("/").filter(Boolean) : [];
+      if (typeof route.path !== "string" || parts.some((segment) => !SEGMENT.test(segment))) {
+        errors.push(issue("JR021", `El path "${String(route.path)}" no es v\xE1lido.`, `${path}.path`, { severity: "error", hint: "Usa segmentos con letras, d\xEDgitos, guiones o `:param`." }));
+      }
+    }
+    const full = joinRoutePath(parentPath, route.path);
+    if (isRoot && full === "") {
+      errors.push(issue("JR021", "Una ruta ra\xEDz necesita `path`.", `${path}.path`, { severity: "error" }));
+    }
+    if (route.children !== void 0) {
+      if (route.page !== void 0) {
+        errors.push(issue("JR020", "Un grupo no lleva `page`: la pantalla va en sus hijos.", path, { severity: "error" }));
+      }
+      if (!Array.isArray(route.children)) {
+        errors.push(issue("JR020", "`children` debe ser una lista.", `${path}.children`, { severity: "error" }));
+      } else {
+        route.children.forEach((child, index) => visit(child, `${path}.children[${index}]`, full, false));
+      }
+    } else {
+      if (typeof route.page !== "string" || route.page === "") {
+        errors.push(issue("JR020", "La ruta no declara `page`.", path, { severity: "error" }));
+      }
+      const key = `${full}?${JSON.stringify(Object.entries(route.query ?? {}).sort())}`;
+      if (seen.has(key)) {
+        errors.push(issue("JR020", `La ruta "${full || "/"}" se repite con la misma query (ya est\xE1 en ${seen.get(key)}).`, path, { severity: "error" }));
+      } else {
+        seen.set(key, path);
+      }
+    }
+    const nav = route.nav;
+    if (nav !== void 0 && (typeof nav !== "object" || nav === null || nav.label === void 0 || nav.label === null)) {
+      errors.push(issue("JR021", "La entrada de men\xFA no declara `label`.", `${path}.nav`, { severity: "error" }));
+    }
+  };
+  document2.routes.forEach((route, index) => visit(route, `routes[${index}]`, "", true));
+  return errors;
+}
+function flattenRoutes(routes) {
+  const flat = [];
+  const visit = (route, parentPath, groups) => {
+    const full = joinRoutePath(parentPath, route.path);
+    if (route.children) {
+      route.children.forEach((child) => visit(child, full, [...groups, route.id]));
+      return;
+    }
+    if (typeof route.page !== "string") return;
+    flat.push({
+      id: route.id,
+      segments: full === "" ? [] : full.split("/"),
+      page: route.page,
+      query: route.query ?? {},
+      nav: route.nav,
+      groups
+    });
+  };
+  routes.forEach((route) => visit(route, "", []));
+  return flat;
+}
+
+// src/json-renderer/routing/match.ts
+function matchRoute(routes, segments, query = {}) {
+  let best = null;
+  let bestStatics = -1;
+  let bestConstraints = -1;
+  for (const route of routes) {
+    if (route.segments.length !== segments.length) continue;
+    const params = {};
+    let statics = 0;
+    let samePath = true;
+    route.segments.forEach((expected, index) => {
+      if (!samePath) return;
+      if (expected.startsWith(":")) {
+        params[expected.slice(1)] = segments[index];
+        return;
+      }
+      statics += 1;
+      samePath = expected === segments[index];
+    });
+    if (!samePath) continue;
+    const constraints = Object.entries(route.query);
+    if (!constraints.every(([key, value]) => query[key] === value)) continue;
+    if (statics > bestStatics || statics === bestStatics && constraints.length > bestConstraints) {
+      best = { route, params };
+      bestStatics = statics;
+      bestConstraints = constraints.length;
+    }
+  }
+  return best;
+}
+function routeHref(route, params = {}) {
+  const path = route.segments.map((segment) => segment.startsWith(":") ? params[segment.slice(1)] ?? segment : segment).join("/");
+  const queryString = Object.entries(route.query).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&");
+  return `/${path}${queryString ? `?${queryString}` : ""}`;
+}
+
+// src/json-renderer/routing/navigation.ts
+function buildNavigationTree(routes) {
+  const hrefs = new Map(flattenRoutes(routes).map((route) => [route.id, routeHref(route)]));
+  const visit = (route, parentPath) => {
+    const full = joinRoutePath(parentPath, route.path);
+    if (route.children) {
+      const children = route.children.flatMap((child) => visit(child, full));
+      if (!route.nav) return children;
+      return [toNode(route.id, route.nav, children, children.find((child) => child.href)?.href)];
+    }
+    if (!route.nav) return [];
+    return [toNode(route.id, route.nav, void 0, hrefs.get(route.id))];
+  };
+  return routes.flatMap((route) => visit(route, ""));
+}
+function toNode(id, nav, children, href) {
+  return {
+    id,
+    label: nav.label,
+    icon: nav.icon,
+    badge: nav.badge,
+    href,
+    ...children ? { children } : {}
+  };
+}
+function navContainsRoute(entry, routeId) {
+  return entry.id === routeId || (entry.children?.some((child) => navContainsRoute(child, routeId)) ?? false);
 }
 
 // src/json-renderer/validation/validate.ts
@@ -13432,6 +14295,17 @@ function validateNodes(node, path, catalog, errors, warnings) {
     return 0;
   }
   if (isNodePending(node)) return 1;
+  if (node.type === "form") {
+    const { issues: avisos } = readFormFields(node.props?.fields, [...path, "props", "fields"]);
+    for (const item of avisos) (item.severity === "error" ? errors : warnings).push(item);
+    return 0;
+  }
+  if (isSlotNode(node)) {
+    if (!slotName(node)) {
+      errors.push(issue("JR011", "El slot no declara `props.name`.", formatPath([...path, "props", "name"]), { severity: "error" }));
+    }
+    return 0;
+  }
   const resolved = resolveNode(node, catalog, path);
   for (const item of resolved.issues) {
     (item.severity === "error" ? errors : warnings).push(item);
@@ -13614,8 +14488,143 @@ function formatVocabularyForPrompt(contract) {
   return lines.join("\n");
 }
 
+// src/json-renderer/stream/useSchemaStream.ts
+import { useEffect as useEffect19, useState as useState39 } from "react";
+var VACIO = {
+  tree: null,
+  status: "complete",
+  broken: false,
+  pendingNodes: 0,
+  streaming: false,
+  text: "",
+  issues: []
+};
+var grabaciones = /* @__PURE__ */ new WeakMap();
+function esAsyncIterable(value) {
+  return value !== null && typeof value === "object" && typeof value[Symbol.asyncIterator] === "function";
+}
+async function* desdeReadable(readable) {
+  const reader = readable.getReader();
+  try {
+    for (; ; ) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    await reader.cancel().catch(() => void 0);
+  }
+}
+function mensajeDe(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function crearGrabacion(source) {
+  const iterador = typeof source === "string" ? null : esAsyncIterable(source) ? source[Symbol.asyncIterator]() : desdeReadable(source)[Symbol.asyncIterator]();
+  return {
+    texto: typeof source === "string" ? source : "",
+    iterador,
+    terminado: typeof source === "string",
+    error: null,
+    avisos: [],
+    activos: 0,
+    ultimoValido: null,
+    cerrada: false,
+    cancelada: false
+  };
+}
+function estadoDe(grab, streaming) {
+  const parcial = parsePartialSchema(grab.texto);
+  if (!parcial.broken && parcial.tree) grab.ultimoValido = parcial.tree;
+  return {
+    tree: parcial.broken ? grab.ultimoValido : parcial.tree,
+    status: parcial.status,
+    broken: parcial.broken,
+    pendingNodes: parcial.pendingNodes,
+    streaming,
+    text: grab.texto,
+    issues: [...grab.avisos]
+  };
+}
+function cerrarGrabacion(grab) {
+  if (grab.cerrada || grab.cancelada) return;
+  grab.cerrada = true;
+  if (grab.error !== null) {
+    grab.avisos.push(issue("JR080", `El stream fall\xF3: ${grab.error}. Se conserva el \xFAltimo \xE1rbol v\xE1lido.`, "", { severity: "error" }));
+    return;
+  }
+  const parcial = parsePartialSchema(grab.texto);
+  if (parcial.broken || parcial.status !== "complete") {
+    grab.avisos.push(
+      issue("JR080", "El stream termin\xF3 con el JSON sin cerrar. Se conserva el \xFAltimo \xE1rbol v\xE1lido.", "", {
+        severity: "warning",
+        hint: "Revisa que el emisor cierre todas las llaves y corchetes."
+      })
+    );
+  }
+}
+async function consumir(grab, cancelado, onTrozo) {
+  while (!grab.terminado && grab.iterador) {
+    let paso;
+    try {
+      paso = await grab.iterador.next();
+    } catch (error) {
+      grab.error = mensajeDe(error);
+      grab.terminado = true;
+      break;
+    }
+    if (paso.done) {
+      grab.terminado = true;
+      break;
+    }
+    grab.texto += String(paso.value);
+    if (!cancelado()) onTrozo();
+    if (cancelado()) return;
+  }
+  if (grab.terminado) cerrarGrabacion(grab);
+}
+function useSchemaStream(source) {
+  const [estado, setEstado] = useState39(VACIO);
+  useEffect19(() => {
+    if (source === null || source === void 0) {
+      setEstado(VACIO);
+      return;
+    }
+    let registro;
+    if (typeof source === "string") {
+      registro = crearGrabacion(source);
+    } else {
+      const existente = grabaciones.get(source);
+      registro = existente ?? crearGrabacion(source);
+      if (!existente) grabaciones.set(source, registro);
+    }
+    registro.activos += 1;
+    let cancelado = false;
+    const proceso = consumir(
+      registro,
+      () => cancelado,
+      () => setEstado(estadoDe(registro, true))
+    );
+    setEstado(estadoDe(registro, !registro.terminado));
+    void proceso.then(() => {
+      if (!cancelado) setEstado(estadoDe(registro, false));
+    });
+    return () => {
+      cancelado = true;
+      registro.activos -= 1;
+      setTimeout(() => {
+        if (registro.activos === 0 && !registro.terminado && registro.iterador) {
+          registro.terminado = true;
+          registro.cancelada = true;
+          void registro.iterador.return?.(void 0);
+        }
+      }, 0);
+    };
+  }, [source]);
+  return estado;
+}
+
 // src/components/organisms/dropfile/dropfile.tsx
-import { useState as useState37, useEffect as useEffect19 } from "react";
+import { useState as useState40, useEffect as useEffect20 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx54 from "clsx";
 
@@ -13645,11 +14654,12 @@ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
 })(UploadStatus || {});
 
 // src/components/organisms/dropfile/dropfile.tsx
-import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 var ITDropfile = ({
   onFileSelect,
   onCancel,
   onSubmit,
+  autoUpload = false,
   contentClassName,
   containerClassName,
   acceptedFileTypes = ["application/pdf" /* PDF */, "application/vnd.ms-excel" /* XLS */, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /* XLSX */, "image/jpg" /* JPG */, "image/png" /* PNG */, "image/jpeg" /* JPEG */],
@@ -13662,15 +14672,15 @@ var ITDropfile = ({
   modalTitle
 }) => {
   const { t } = useITTranslation();
-  const [isModalOpen, setIsModalOpen] = useState37(false);
-  const [selectedFile, setSelectedFile] = useState37(null);
-  const [fileType, setFileType] = useState37(null);
-  const [imagePreview, setImagePreview] = useState37(initialPreviewUrl || null);
-  const [isConfirmed, setIsConfirmed] = useState37(false);
-  const [internalUploadStatus, setInternalUploadStatus] = useState37(
+  const [isModalOpen, setIsModalOpen] = useState40(false);
+  const [selectedFile, setSelectedFile] = useState40(null);
+  const [fileType, setFileType] = useState40(null);
+  const [imagePreview, setImagePreview] = useState40(initialPreviewUrl || null);
+  const [isConfirmed, setIsConfirmed] = useState40(false);
+  const [internalUploadStatus, setInternalUploadStatus] = useState40(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (initialPreviewUrl && !selectedFile) {
       setImagePreview(initialPreviewUrl);
       if (externalStatus === void 0) setInternalUploadStatus("subido" /* UPLOADED */);
@@ -13785,11 +14795,23 @@ var ITDropfile = ({
       }
     };
     const { label, color, dotColor } = config2[status];
-    return /* @__PURE__ */ jsxs54("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
-      /* @__PURE__ */ jsx76("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
-      /* @__PURE__ */ jsx76(ITText, { as: "span", className: "text-xs font-medium flex items-center gap-1.5", children: label })
+    return /* @__PURE__ */ jsxs55("div", { className: `inline-flex items-center gap-2 px-2.5 py-1 rounded-full border ${color}`, children: [
+      /* @__PURE__ */ jsx77("div", { className: `w-2 h-2 rounded-full ${dotColor}` }),
+      /* @__PURE__ */ jsx77(ITText, { as: "span", className: "text-xs font-medium flex items-center gap-1.5", children: label })
     ] });
   };
+  const runAutoUpload = async (file) => {
+    setIsConfirmed(true);
+    setUploadStatus("subiendo" /* UPLOADING */);
+    try {
+      onFileSelect(file);
+      await onSubmit?.(file);
+      setUploadStatus("subido" /* UPLOADED */);
+    } catch (error) {
+      setUploadStatus("error" /* ERROR */);
+      console.error("Error al subir archivo:", error);
+    }
+  };
   const onDrop = (acceptedFiles) => {
     const file = acceptedFiles[0];
     if (file) {
@@ -13805,6 +14827,7 @@ var ITDropfile = ({
           const previewUrl = URL.createObjectURL(file);
           setImagePreview(previewUrl);
         }
+        if (autoUpload) void runAutoUpload(file);
       } else {
         alert(t("dropfile.fileTypeNotAllowed"));
         setSelectedFile(null);
@@ -13819,12 +14842,12 @@ var ITDropfile = ({
     accept: getAcceptedFileTypes(),
     maxFiles: 1
   });
-  useEffect19(() => {
+  useEffect20(() => {
     const renderPDF = async () => {
     };
     renderPDF();
   }, [selectedFile, fileType]);
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       if (imagePreview) {
         URL.revokeObjectURL(imagePreview);
@@ -13861,7 +14884,7 @@ var ITDropfile = ({
   const handleDelete = () => {
     handleCancel();
   };
-  useEffect19(() => {
+  useEffect20(() => {
     if (view === "button" && isConfirmed && uploadStatus === "subido" /* UPLOADED */) {
       const timeout = setTimeout(() => {
         setIsModalOpen(false);
@@ -13878,21 +14901,21 @@ var ITDropfile = ({
       return () => clearTimeout(timeout);
     }
   }, [view, isConfirmed, uploadStatus, externalStatus, onStatusChange]);
-  const headerRow = /* @__PURE__ */ jsxs54("div", { className: "flex items-center justify-between mb-2", children: [
-    /* @__PURE__ */ jsxs54("label", { className: "block text-sm font-semibold text-secondary-700", children: [
-      /* @__PURE__ */ jsxs54(ITText, { as: "span", children: [
+  const headerRow = /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between mb-2", children: [
+    /* @__PURE__ */ jsxs55("label", { className: "block text-sm font-semibold text-secondary-700", children: [
+      /* @__PURE__ */ jsxs55(ITText, { as: "span", children: [
         t("dropfile.upload"),
         " "
       ] }),
-      /* @__PURE__ */ jsxs54(ITText, { as: "span", className: "text-secondary-400 font-normal text-xs", children: [
+      /* @__PURE__ */ jsxs55(ITText, { as: "span", className: "text-secondary-400 font-normal text-xs", children: [
         "(",
         getFileExtensions(),
         ")"
       ] })
     ] }),
-    showStatusBadge && selectedFile && /* @__PURE__ */ jsx76(StatusBadge, { status: uploadStatus })
+    showStatusBadge && selectedFile && /* @__PURE__ */ jsx77(StatusBadge, { status: uploadStatus })
   ] });
-  const dropZoneOrPreview = /* @__PURE__ */ jsx76(Fragment14, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs54(
+  const dropZoneOrPreview = /* @__PURE__ */ jsx77(Fragment14, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs55(
     "div",
     {
       ...getRootProps(),
@@ -13902,41 +14925,41 @@ var ITDropfile = ({
             ${isDragActive ? "border-primary-500 bg-primary-50 scale-[1.01]" : "border-secondary-300 bg-white hover:border-primary-400 hover:bg-secondary-50"}
           `,
       children: [
-        /* @__PURE__ */ jsx76("input", { ...getInputProps() }),
-        /* @__PURE__ */ jsx76("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-secondary-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx77("input", { ...getInputProps() }),
+        /* @__PURE__ */ jsx77("div", { className: `mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? "bg-primary-100" : "bg-secondary-100 group-hover:bg-primary-50"}`, children: /* @__PURE__ */ jsx77(
           "svg",
           {
             className: `w-6 h-6 transition-colors duration-300 ${isDragActive ? "text-primary-600" : "text-secondary-400 group-hover:text-primary-500"}`,
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
+            children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" })
           }
         ) }),
-        /* @__PURE__ */ jsx76("div", { className: "text-center space-y-1", children: /* @__PURE__ */ jsx76(ITText, { as: "p", className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-secondary-700"}`, children: isDragActive ? t("dropfile.dropHere") : t("dropfile.clickOrDrag") }) })
+        /* @__PURE__ */ jsx77("div", { className: "text-center space-y-1", children: /* @__PURE__ */ jsx77(ITText, { as: "p", className: `text-sm font-medium transition-colors duration-300 ${isDragActive ? "text-primary-700" : "text-secondary-700"}`, children: isDragActive ? t("dropfile.dropHere") : t("dropfile.clickOrDrag") }) })
       ]
     }
-  ) : /* @__PURE__ */ jsxs54("div", { className: "w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
-    /* @__PURE__ */ jsx76("div", { className: "flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100", children: /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-      /* @__PURE__ */ jsx76("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx76("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ jsx76("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
-      /* @__PURE__ */ jsxs54("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx76(ITText, { as: "p", className: "text-xs font-medium text-secondary-900 truncate", title: selectedFile?.name || t("dropfile.imageLoaded"), children: selectedFile?.name || t("dropfile.imageLoaded") }),
-        /* @__PURE__ */ jsx76(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
+  ) : /* @__PURE__ */ jsxs55("div", { className: "w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in", children: [
+    /* @__PURE__ */ jsx77("div", { className: "flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100", children: /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+      /* @__PURE__ */ jsx77("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600", children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx77("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) : /* @__PURE__ */ jsx77("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
+      /* @__PURE__ */ jsxs55("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx77(ITText, { as: "p", className: "text-xs font-medium text-secondary-900 truncate", title: selectedFile?.name || t("dropfile.imageLoaded"), children: selectedFile?.name || t("dropfile.imageLoaded") }),
+        /* @__PURE__ */ jsx77(ITText, { as: "p", className: "text-[10px] text-secondary-500", children: selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : "" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx76("div", { className: clsx54("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx77("div", { className: clsx54("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName), children: selectedFile && fileType?.startsWith("image/") || !selectedFile && imagePreview ? /* @__PURE__ */ jsx77(
       "img",
       {
         src: imagePreview,
         alt: t("dropfile.previewAlt"),
         className: "w-full h-full object-contain max-h-[200px]"
       }
-    ) : /* @__PURE__ */ jsxs54("div", { className: "py-8 flex flex-col items-center text-secondary-400", children: [
-      /* @__PURE__ */ jsx76("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
-      /* @__PURE__ */ jsx76(ITText, { as: "span", className: "text-xs", children: t("dropfile.noPreview") })
+    ) : /* @__PURE__ */ jsxs55("div", { className: "py-8 flex flex-col items-center text-secondary-400", children: [
+      /* @__PURE__ */ jsx77("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
+      /* @__PURE__ */ jsx77(ITText, { as: "span", className: "text-xs", children: t("dropfile.noPreview") })
     ] }) }),
-    /* @__PURE__ */ jsx76("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs54(Fragment14, { children: [
-      /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx77("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs55(Fragment14, { children: [
+      /* @__PURE__ */ jsx77(
         ITButton,
         {
           type: "button",
@@ -13944,10 +14967,10 @@ var ITDropfile = ({
           color: "secondary",
           size: "sm",
           onClick: handleCancel,
-          children: /* @__PURE__ */ jsx76(ITText, { children: t("common.cancel") })
+          children: /* @__PURE__ */ jsx77(ITText, { children: t("common.cancel") })
         }
       ),
-      /* @__PURE__ */ jsx76(
+      /* @__PURE__ */ jsx77(
         ITButton,
         {
           type: "button",
@@ -13955,13 +14978,13 @@ var ITDropfile = ({
           color: "primary",
           size: "sm",
           onClick: handleConfirm,
-          children: /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx76(ITText, { children: t("common.confirm") }),
-            /* @__PURE__ */ jsx76("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+          children: /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx77(ITText, { children: t("common.confirm") }),
+            /* @__PURE__ */ jsx77("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
           ] })
         }
       )
-    ] }) : /* @__PURE__ */ jsxs54(
+    ] }) : /* @__PURE__ */ jsxs55(
       ITButton,
       {
         type: "button",
@@ -13970,12 +14993,12 @@ var ITDropfile = ({
         size: "sm",
         onClick: handleDelete,
         children: [
-          /* @__PURE__ */ jsx76("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-          /* @__PURE__ */ jsx76(ITText, { children: t("common.delete") })
+          /* @__PURE__ */ jsx77("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+          /* @__PURE__ */ jsx77(ITText, { children: t("common.delete") })
         ]
       }
     ) }),
-    uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ jsx76("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx76("div", { className: "w-full bg-secondary-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx76(
+    uploadStatus === "subiendo" /* UPLOADING */ && /* @__PURE__ */ jsx77("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx77("div", { className: "w-full bg-secondary-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx77(
       "div",
       {
         className: "bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out",
@@ -13988,8 +15011,8 @@ var ITDropfile = ({
   ] }) });
   if (view === "button") {
     const hasFile = Boolean(selectedFile || imagePreview);
-    return /* @__PURE__ */ jsxs54("div", { className: clsx54("inline-block", containerClassName), children: [
-      /* @__PURE__ */ jsx76(
+    return /* @__PURE__ */ jsxs55("div", { className: clsx54("inline-block", containerClassName), children: [
+      /* @__PURE__ */ jsx77(
         ITButton,
         {
           type: "button",
@@ -13997,20 +15020,20 @@ var ITDropfile = ({
           color: hasFile ? "primary" : "secondary",
           size: "sm",
           onClick: () => setIsModalOpen(true),
-          children: /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2 max-w-[220px]", children: [
-            /* @__PURE__ */ jsx76("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx76("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
-            /* @__PURE__ */ jsx76(ITText, { className: "truncate", children: selectedFile?.name || (hasFile ? t("dropfile.fileLoaded") : buttonLabel ?? t("dropfile.upload")) }),
-            showStatusBadge && hasFile && /* @__PURE__ */ jsx76(StatusBadge, { status: uploadStatus })
+          children: /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2 max-w-[220px]", children: [
+            /* @__PURE__ */ jsx77("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx77("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
+            /* @__PURE__ */ jsx77(ITText, { className: "truncate", children: selectedFile?.name || (hasFile ? t("dropfile.fileLoaded") : buttonLabel ?? t("dropfile.upload")) }),
+            showStatusBadge && hasFile && /* @__PURE__ */ jsx77(StatusBadge, { status: uploadStatus })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx76(ITDialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: modalTitle ?? buttonLabel ?? t("dropfile.upload"), children: /* @__PURE__ */ jsxs54("div", { className: "w-full transition-all duration-300", children: [
+      /* @__PURE__ */ jsx77(ITDialog, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: modalTitle ?? buttonLabel ?? t("dropfile.upload"), children: /* @__PURE__ */ jsxs55("div", { className: "w-full transition-all duration-300", children: [
         headerRow,
         dropZoneOrPreview
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs54("div", { className: clsx54("w-full transition-all duration-300", containerClassName), children: [
+  return /* @__PURE__ */ jsxs55("div", { className: clsx54("w-full transition-all duration-300", containerClassName), children: [
     headerRow,
     dropZoneOrPreview
   ] });
@@ -14018,13 +15041,13 @@ var ITDropfile = ({
 var dropfile_default = ITDropfile;
 
 // src/components/templates/layout/layout.tsx
-import { useState as useState39 } from "react";
+import { useState as useState42 } from "react";
 import clsx55 from "clsx";
 
 // src/components/organisms/topbar/topbar.tsx
 import { FaUserCircle as FaUserCircle2, FaBars } from "react-icons/fa";
-import { useRef as useRef24, useState as useState38 } from "react";
-import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
+import { useRef as useRef24, useState as useState41 } from "react";
+import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 function ITTopBar({
   logo,
   logoText,
@@ -14041,10 +15064,10 @@ function ITTopBar({
   const flat = useITFlatAppearance();
   const { t } = useITTranslation();
   const initials = (userMenu?.userName ?? "").trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState38(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState41(false);
   const userMenuRef = useRef24(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "header",
     {
       className: `sticky top-0 z-40 transition-all duration-300 ${flat ? "" : "backdrop-blur-md"}`,
@@ -14053,9 +15076,9 @@ function ITTopBar({
         borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: flat ? "none" : "var(--shadow-xs)"
       },
-      children: /* @__PURE__ */ jsxs55("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
-        /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-5", children: [
-          showMobileMenuButton && /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsxs56("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
+        /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-5", children: [
+          showMobileMenuButton && /* @__PURE__ */ jsx78(
             "button",
             {
               type: "button",
@@ -14067,12 +15090,12 @@ function ITTopBar({
               onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)",
               onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
               onClick: onToggleMobileMenu,
-              children: /* @__PURE__ */ jsx77(FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
+              children: /* @__PURE__ */ jsx78(FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
-          /* @__PURE__ */ jsxs55("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
-            logo && /* @__PURE__ */ jsx77("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
-            logoText && /* @__PURE__ */ jsx77(
+          /* @__PURE__ */ jsxs56("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
+            logo && /* @__PURE__ */ jsx78("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
+            logoText && /* @__PURE__ */ jsx78(
               ITText,
               {
                 as: "span",
@@ -14082,7 +15105,7 @@ function ITTopBar({
               }
             )
           ] }),
-          navItems && navItems.length > 0 && /* @__PURE__ */ jsx77("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }, children: navItems.map((item) => /* @__PURE__ */ jsx77(
+          navItems && navItems.length > 0 && /* @__PURE__ */ jsx78("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }, children: navItems.map((item) => /* @__PURE__ */ jsx78(
             "button",
             {
               onClick: () => onNavItemClick?.(item.id),
@@ -14096,19 +15119,19 @@ function ITTopBar({
                 e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
                 e.currentTarget.style.backgroundColor = "transparent";
               },
-              children: /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
-                item.icon && /* @__PURE__ */ jsx77("span", { className: "opacity-70", children: item.icon }),
-                /* @__PURE__ */ jsx77(ITText, { as: "span", children: item.label })
+              children: /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-2", children: [
+                item.icon && /* @__PURE__ */ jsx78("span", { className: "opacity-70", children: item.icon }),
+                /* @__PURE__ */ jsx78(ITText, { as: "span", children: item.label })
               ] })
             },
             item.id
           )) })
         ] }),
-        centerContent && /* @__PURE__ */ jsx77("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ jsx77("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
-        (children || userMenu) && /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
+        centerContent && /* @__PURE__ */ jsx78("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ jsx78("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        (children || userMenu) && /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-2", children: [
           children,
-          userMenu && /* @__PURE__ */ jsxs55("div", { className: "relative", children: [
-            /* @__PURE__ */ jsxs55(
+          userMenu && /* @__PURE__ */ jsxs56("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs56(
               "button",
               {
                 type: "button",
@@ -14124,15 +15147,15 @@ function ITTopBar({
                 },
                 onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
                 children: [
-                  /* @__PURE__ */ jsxs55("div", { className: "relative", children: [
-                    userMenu.userImage ? /* @__PURE__ */ jsx77(
+                  /* @__PURE__ */ jsxs56("div", { className: "relative", children: [
+                    userMenu.userImage ? /* @__PURE__ */ jsx78(
                       "img",
                       {
                         className: "w-9 h-9 rounded-full object-cover ring-2 ring-white shadow-sm",
                         src: userMenu.userImage,
                         alt: t("common.userAvatar")
                       }
-                    ) : flat && initials ? /* @__PURE__ */ jsx77(
+                    ) : flat && initials ? /* @__PURE__ */ jsx78(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -14143,11 +15166,11 @@ function ITTopBar({
                         },
                         children: initials
                       }
-                    ) : /* @__PURE__ */ jsx77("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx77(FaUserCircle2, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                    !flat && /* @__PURE__ */ jsx77("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                    ) : /* @__PURE__ */ jsx78("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx78(FaUserCircle2, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
+                    !flat && /* @__PURE__ */ jsx78("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                   ] }),
-                  /* @__PURE__ */ jsxs55("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
-                    /* @__PURE__ */ jsx77(
+                  /* @__PURE__ */ jsxs56("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
+                    /* @__PURE__ */ jsx78(
                       ITText,
                       {
                         as: "span",
@@ -14156,7 +15179,7 @@ function ITTopBar({
                         children: userMenu.userName
                       }
                     ),
-                    /* @__PURE__ */ jsx77(
+                    /* @__PURE__ */ jsx78(
                       ITText,
                       {
                         as: "span",
@@ -14169,7 +15192,7 @@ function ITTopBar({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs55(
+            /* @__PURE__ */ jsxs56(
               "div",
               {
                 ref: userMenuRef,
@@ -14182,15 +15205,15 @@ function ITTopBar({
                   border: "1px solid var(--it-topbar-user-dropdown-border, #f1f5f9)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs55("div", { className: "px-5 py-4 border-b", style: { borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }, children: [
-                    /* @__PURE__ */ jsx77(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
-                    /* @__PURE__ */ jsx77(ITText, { as: "span", className: "block text-xs font-medium truncate mt-0.5", style: { color: "var(--it-topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
+                  /* @__PURE__ */ jsxs56("div", { className: "px-5 py-4 border-b", style: { borderColor: "var(--it-topbar-user-dropdown-border, #f1f5f9)", backgroundColor: "var(--it-topbar-user-bg, #f8fafc)" }, children: [
+                    /* @__PURE__ */ jsx78(ITText, { as: "span", className: "block font-bold text-[0.9rem]", style: { color: "var(--it-topbar-user-text, #0f172a)" }, children: userMenu.userName }),
+                    /* @__PURE__ */ jsx78(ITText, { as: "span", className: "block text-xs font-medium truncate mt-0.5", style: { color: "var(--it-topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
                   ] }),
-                  /* @__PURE__ */ jsx77("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
+                  /* @__PURE__ */ jsx78("ul", { className: "py-2", children: userMenu.menuItems.map((m, i) => {
                     const isDestructive = m.label.toLowerCase().includes("salir") || m.label.toLowerCase().includes("cerrar") || m.label.toLowerCase().includes("logout");
-                    return /* @__PURE__ */ jsxs55("li", { className: "px-2", children: [
-                      i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ jsx77("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
-                      /* @__PURE__ */ jsx77(
+                    return /* @__PURE__ */ jsxs56("li", { className: "px-2", children: [
+                      i === userMenu.menuItems.length - 1 && isDestructive && i > 0 && /* @__PURE__ */ jsx78("div", { className: "h-px bg-slate-100 my-1 mx-2" }),
+                      /* @__PURE__ */ jsx78(
                         "button",
                         {
                           onClick: () => {
@@ -14205,7 +15228,7 @@ function ITTopBar({
                           onMouseLeave: (e) => {
                             e.currentTarget.style.backgroundColor = "transparent";
                           },
-                          children: /* @__PURE__ */ jsx77(ITText, { as: "span", children: m.label })
+                          children: /* @__PURE__ */ jsx78(ITText, { as: "span", children: m.label })
                         }
                       )
                     ] }, i);
@@ -14221,7 +15244,7 @@ function ITTopBar({
 }
 
 // src/components/templates/layout/layout.tsx
-import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
 function ITLayout({
   topBar,
   sidebar,
@@ -14230,8 +15253,8 @@ function ITLayout({
   contentClassName = "",
   sidebarFullHeight = false
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState39(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState39(false);
+  const [internalCollapsed, setInternalCollapsed] = useState42(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState42(false);
   const flat = useITFlatAppearance();
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
@@ -14245,7 +15268,7 @@ function ITLayout({
     else setMobileSidebarOpen((v) => !v);
   };
   const brand = sidebarFullHeight ? sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText } : sidebar.brand;
-  const topBarNode = /* @__PURE__ */ jsx78(
+  const topBarNode = /* @__PURE__ */ jsx79(
     ITTopBar,
     {
       ...topBar,
@@ -14258,9 +15281,9 @@ function ITLayout({
   const desktopSidebar = (
     // Full-height: the sidebar sits beside the top bar, so it needs to win the
     // stacking order when the collapsed rail expands over the content on hover.
-    /* @__PURE__ */ jsxs56("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
-      /* @__PURE__ */ jsx78("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
-      /* @__PURE__ */ jsx78("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsxs57("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
+      /* @__PURE__ */ jsx79("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
+      /* @__PURE__ */ jsx79("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx79(
         ITSidebar,
         {
           ...sidebar,
@@ -14273,17 +15296,17 @@ function ITLayout({
       ) })
     ] })
   );
-  const mobileSidebar = mobileSidebarOpen && /* @__PURE__ */ jsx78(
+  const mobileSidebar = mobileSidebarOpen && /* @__PURE__ */ jsx79(
     "div",
     {
       className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
       onClick: () => setMobileSidebarOpen(false),
-      children: /* @__PURE__ */ jsx78(
+      children: /* @__PURE__ */ jsx79(
         "div",
         {
           className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
           onClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx78(
+          children: /* @__PURE__ */ jsx79(
             ITSidebar,
             {
               ...sidebar,
@@ -14300,16 +15323,16 @@ function ITLayout({
       )
     }
   );
-  const main = /* @__PURE__ */ jsx78("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx78("div", { className: clsx55("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) });
+  const main = /* @__PURE__ */ jsx79("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx79("div", { className: clsx55("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) });
   if (sidebarFullHeight) {
-    return /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsxs57(
       "div",
       {
         className: `flex h-screen overflow-hidden w-full relative ${className}`,
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
           desktopSidebar,
-          /* @__PURE__ */ jsxs56("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs57("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
             topBarNode,
             main
           ] }),
@@ -14318,9 +15341,9 @@ function ITLayout({
       }
     );
   }
-  return /* @__PURE__ */ jsxs56("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
+  return /* @__PURE__ */ jsxs57("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
     topBarNode,
-    /* @__PURE__ */ jsxs56(
+    /* @__PURE__ */ jsxs57(
       "div",
       {
         className: "flex flex-1 overflow-hidden relative",
@@ -14337,9 +15360,9 @@ function ITLayout({
 
 // src/components/molecules/stepper/stepper.tsx
 import clsx56 from "clsx";
-import { useEffect as useEffect20, useRef as useRef25, useState as useState40 } from "react";
+import { useEffect as useEffect21, useRef as useRef25, useState as useState43 } from "react";
 import { FaChevronLeft as FaChevronLeft4, FaChevronRight as FaChevronRight7, FaCheck as FaCheck6 } from "react-icons/fa";
-import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
 function ITStepper({
   steps,
   currentStep,
@@ -14355,15 +15378,15 @@ function ITStepper({
   color = "primary"
 }) {
   const { t } = useITTranslation();
-  const [direction, setDirection] = useState40("next");
+  const [direction, setDirection] = useState43("next");
   const contentRef = useRef25(null);
   const progressRef = useRef25(null);
   const isThemeColor = color in theme.colors;
   const resolvedColor = isThemeColor ? theme.colors[color][500] : color;
-  useEffect20(() => {
+  useEffect21(() => {
     onStepChange?.(currentStep);
   }, [currentStep, onStepChange]);
-  useEffect20(() => {
+  useEffect21(() => {
     const pct = currentStep / Math.max(1, steps.length - 1) * 100;
     if (progressRef.current) {
       progressRef.current.style.width = `${pct}%`;
@@ -14407,23 +15430,23 @@ function ITStepper({
   const renderStepContent = (index, isCompleted) => {
     const step = steps[index];
     if (isCompleted) {
-      return /* @__PURE__ */ jsx79(FaCheck6, { className: "w-4 h-4" });
+      return /* @__PURE__ */ jsx80(FaCheck6, { className: "w-4 h-4" });
     }
     if (step.icon && useIcons) {
-      return /* @__PURE__ */ jsx79("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
+      return /* @__PURE__ */ jsx80("div", { className: "flex items-center justify-center w-5 h-5", children: step.icon });
     }
-    return /* @__PURE__ */ jsx79(ITText, { as: "span", className: "text-sm font-semibold", children: index + 1 });
+    return /* @__PURE__ */ jsx80(ITText, { as: "span", className: "text-sm font-semibold", children: index + 1 });
   };
-  return /* @__PURE__ */ jsxs57("div", { className: clsx56("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
-    /* @__PURE__ */ jsxs57("div", { className: "relative mb-8", children: [
-      /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsxs58("div", { className: clsx56("w-full max-w-5xl mx-auto px-4", containerClassName), children: [
+    /* @__PURE__ */ jsxs58("div", { className: "relative mb-8", children: [
+      /* @__PURE__ */ jsx80(
         "div",
         {
           className: "absolute left-6 right-6 top-5 h-1 bg-secondary-200 rounded-full z-0",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           ref: progressRef,
@@ -14431,11 +15454,11 @@ function ITStepper({
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ jsx79("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
+      /* @__PURE__ */ jsx80("div", { className: "flex items-start justify-between space-x-2 relative z-20", children: steps.map((step, idx) => {
         const isActive = idx === currentStep;
         const isCompleted = idx < currentStep;
         const hasIcon = step.icon && useIcons;
-        return /* @__PURE__ */ jsx79(
+        return /* @__PURE__ */ jsx80(
           "button",
           {
             type: "button",
@@ -14445,8 +15468,8 @@ function ITStepper({
             "aria-label": t("stepper.stepAria", { n: idx + 1, label: step.label }),
             className: "flex-1 group",
             title: step.label,
-            children: /* @__PURE__ */ jsxs57("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx79(
+            children: /* @__PURE__ */ jsxs58("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx80(
                 "div",
                 {
                   className: clsx56(
@@ -14460,7 +15483,7 @@ function ITStepper({
                   children: renderStepContent(idx, isCompleted)
                 }
               ),
-              /* @__PURE__ */ jsx79(
+              /* @__PURE__ */ jsx80(
                 ITText,
                 {
                   as: "span",
@@ -14478,7 +15501,7 @@ function ITStepper({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       "div",
       {
         ref: contentRef,
@@ -14494,32 +15517,32 @@ function ITStepper({
         children: steps[currentStep].content
       }
     ),
-    /* @__PURE__ */ jsxs57("div", { className: "flex justify-between items-center mt-6", children: [
-      /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsxs58("div", { className: "flex justify-between items-center mt-6", children: [
+      /* @__PURE__ */ jsx80(
         ITButton,
         {
           variant: "outlined",
           color: "secondary",
           disabled: currentStep === 0,
           onClick: prevStep,
-          children: /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx79(FaChevronLeft4, {}),
-            /* @__PURE__ */ jsx79(ITText, { as: "span", children: t("common.back") })
+          children: /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx80(FaChevronLeft4, {}),
+            /* @__PURE__ */ jsx80(ITText, { as: "span", children: t("common.back") })
           ] })
         }
       ),
-      /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx79(ITText, { as: "div", className: "text-sm text-secondary-500 mr-2 hidden sm:block", children: t("stepper.stepOf", { current: currentStep + 1, total: steps.length }) }),
-        /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx80(ITText, { as: "div", className: "text-sm text-secondary-500 mr-2 hidden sm:block", children: t("stepper.stepOf", { current: currentStep + 1, total: steps.length }) }),
+        /* @__PURE__ */ jsx80(
           ITButton,
           {
             variant: "solid",
             color,
             disabled: disableNext,
             onClick: nextStep,
-            children: /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx79(ITText, { as: "span", children: currentStep === steps.length - 1 ? t("common.finish") : t("common.next") }),
-              currentStep === steps.length - 1 ? /* @__PURE__ */ jsx79(FaCheck6, {}) : /* @__PURE__ */ jsx79(FaChevronRight7, {})
+            children: /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx80(ITText, { as: "span", children: currentStep === steps.length - 1 ? t("common.finish") : t("common.next") }),
+              currentStep === steps.length - 1 ? /* @__PURE__ */ jsx80(FaCheck6, {}) : /* @__PURE__ */ jsx80(FaChevronRight7, {})
             ] })
           }
         )
@@ -14529,7 +15552,7 @@ function ITStepper({
 }
 
 // src/components/theme-provider/themeProvider.tsx
-import { useState as useState41, useEffect as useEffect21, useLayoutEffect as useLayoutEffect5 } from "react";
+import { useState as useState44, useEffect as useEffect22, useLayoutEffect as useLayoutEffect5 } from "react";
 import { MdPalette, MdClose, MdRefresh } from "react-icons/md";
 
 // src/components/theme-provider/themePresets.ts
@@ -14707,7 +15730,7 @@ var PRESETS = [
 ];
 
 // src/components/theme-provider/themeProvider.tsx
-import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
 var STORAGE_KEY = "it-theme-palette";
 var SHADOW_LEVELS = {
   0: {
@@ -14810,7 +15833,7 @@ function ITThemeProvider({
   appearance = "soft"
 }) {
   const { t } = useITTranslation();
-  const [palette2, setPaletteState] = useState41(() => {
+  const [palette2, setPaletteState] = useState44(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
       ...theme2,
@@ -14836,8 +15859,8 @@ function ITThemeProvider({
     }
     return basePalette;
   });
-  const [isOpen, setIsOpen] = useState41(false);
-  const [customPresets, setCustomPresets] = useState41(() => {
+  const [isOpen, setIsOpen] = useState44(false);
+  const [customPresets, setCustomPresets] = useState44(() => {
     try {
       const saved = localStorage.getItem("it-theme-custom-presets");
       return saved ? JSON.parse(saved) : [];
@@ -14846,8 +15869,8 @@ function ITThemeProvider({
       return [];
     }
   });
-  const [newPresetName, setNewPresetName] = useState41("");
-  const [isSavingPreset, setIsSavingPreset] = useState41(false);
+  const [newPresetName, setNewPresetName] = useState44("");
+  const [isSavingPreset, setIsSavingPreset] = useState44(false);
   const handleSavePreset = () => {
     if (!newPresetName.trim()) return;
     const newPreset = {
@@ -14866,8 +15889,8 @@ function ITThemeProvider({
     setCustomPresets(updated);
     localStorage.setItem("it-theme-custom-presets", JSON.stringify(updated));
   };
-  const [resolvedTheme, setResolvedTheme] = useState41("light");
-  const [darkModeMode, setDarkModeMode] = useState41(
+  const [resolvedTheme, setResolvedTheme] = useState44("light");
+  const [darkModeMode, setDarkModeMode] = useState44(
     () => {
       const saved = localStorage.getItem("it-theme-dark-mode");
       if (saved === "light" || saved === "dark" || saved === "system") {
@@ -14876,7 +15899,7 @@ function ITThemeProvider({
       return "system";
     }
   );
-  useEffect21(() => {
+  useEffect22(() => {
     localStorage.setItem("it-theme-dark-mode", darkModeMode);
     const applyDarkMode = (isDark) => {
       if (isDark) {
@@ -14901,7 +15924,7 @@ function ITThemeProvider({
       applyDarkMode(darkModeMode === "dark");
     }
   }, [darkModeMode]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!showFab) {
       setPaletteState({
         ...DEFAULT_PALETTE,
@@ -14958,7 +15981,7 @@ function ITThemeProvider({
       surfaceStyle?.remove();
     };
   }, [radius, shadow]);
-  useEffect21(() => {
+  useEffect22(() => {
     const injectStyles = (obj, prefix = "") => {
       Object.entries(obj).forEach(([key, val]) => {
         if (typeof val === "object" && val !== null) {
@@ -16112,14 +17135,14 @@ function ITThemeProvider({
     const isNested = colorKey.includes(".");
     const label = isNested ? colorKey.split(".")[1] : colorKey;
     const value = getNestedValue3(palette2, colorKey);
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs59(
       "div",
       {
         className: "flex items-center justify-between p-3 rounded-xl border border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900/50 gap-3 hover:border-slate-200 dark:hover:border-slate-700 transition-colors",
         children: [
-          /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs58("div", { className: "relative w-10 h-10 rounded-xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden cursor-pointer flex-shrink-0 shadow-sm hover:scale-105 transition-transform", children: [
-              /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsxs59("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs59("div", { className: "relative w-10 h-10 rounded-xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden cursor-pointer flex-shrink-0 shadow-sm hover:scale-105 transition-transform", children: [
+              /* @__PURE__ */ jsx81(
                 "input",
                 {
                   type: "color",
@@ -16128,23 +17151,23 @@ function ITThemeProvider({
                   className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                 }
               ),
-              /* @__PURE__ */ jsx80("div", { className: "w-full h-full", style: { backgroundColor: value } })
+              /* @__PURE__ */ jsx81("div", { className: "w-full h-full", style: { backgroundColor: value } })
             ] }),
-            /* @__PURE__ */ jsxs58("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsx80(ITText, { as: "span", className: "text-xs font-bold text-slate-700 dark:text-slate-300 truncate capitalize", children: label.replace(/([A-Z])/g, " $1").trim() }),
-              /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-2 mt-0.5", children: [
-                /* @__PURE__ */ jsx80(
+            /* @__PURE__ */ jsxs59("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx81(ITText, { as: "span", className: "text-xs font-bold text-slate-700 dark:text-slate-300 truncate capitalize", children: label.replace(/([A-Z])/g, " $1").trim() }),
+              /* @__PURE__ */ jsxs59("div", { className: "flex items-center gap-2 mt-0.5", children: [
+                /* @__PURE__ */ jsx81(
                   "span",
                   {
                     className: "w-3 h-3 rounded-full border border-slate-200 dark:border-slate-600",
                     style: { backgroundColor: value }
                   }
                 ),
-                /* @__PURE__ */ jsx80(ITText, { as: "span", className: "font-mono text-[11px] text-slate-400", children: value })
+                /* @__PURE__ */ jsx81(ITText, { as: "span", className: "font-mono text-[11px] text-slate-400", children: value })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx81(
             "input",
             {
               type: "text",
@@ -16163,14 +17186,14 @@ function ITThemeProvider({
     isCustom
   }) => {
     const isSelected = JSON.stringify(preset.colors) === JSON.stringify(palette2);
-    return /* @__PURE__ */ jsxs58(
+    return /* @__PURE__ */ jsxs59(
       "button",
       {
         type: "button",
         onClick: () => applyPreset(preset.colors),
         className: `relative flex flex-col items-start p-2.5 rounded-xl border text-left transition-all group ${isSelected ? "border-primary-500 bg-primary-500/5 shadow-sm ring-1 ring-primary-500/20" : "border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50 hover:border-slate-300 dark:hover:border-slate-600"}`,
         children: [
-          isCustom && /* @__PURE__ */ jsx80(
+          isCustom && /* @__PURE__ */ jsx81(
             "span",
             {
               onClick: (e) => {
@@ -16179,11 +17202,11 @@ function ITThemeProvider({
               },
               className: "absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-danger-500/10 hover:text-danger-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10",
               title: t("themeProvider.designer.deletePreset"),
-              children: /* @__PURE__ */ jsx80(MdClose, { size: 12 })
+              children: /* @__PURE__ */ jsx81(MdClose, { size: 12 })
             }
           ),
-          /* @__PURE__ */ jsx80(ITText, { as: "span", className: "text-xs font-semibold truncate w-full mb-1.5 pr-4 text-slate-700 dark:text-slate-300", children: PRESET_I18N_KEY[preset.name] ? t(PRESET_I18N_KEY[preset.name]) : preset.name }),
-          /* @__PURE__ */ jsx80("div", { className: "flex gap-1", children: ["primary", "secondary", "ternary", "success"].map((c) => /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx81(ITText, { as: "span", className: "text-xs font-semibold truncate w-full mb-1.5 pr-4 text-slate-700 dark:text-slate-300", children: PRESET_I18N_KEY[preset.name] ? t(PRESET_I18N_KEY[preset.name]) : preset.name }),
+          /* @__PURE__ */ jsx81("div", { className: "flex gap-1", children: ["primary", "secondary", "ternary", "success"].map((c) => /* @__PURE__ */ jsx81(
             "span",
             {
               className: "w-3 h-3 rounded-full border border-black/10",
@@ -16195,7 +17218,7 @@ function ITThemeProvider({
       }
     );
   };
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     ITThemeContext.Provider,
     {
       value: {
@@ -16212,28 +17235,28 @@ function ITThemeProvider({
       },
       children: [
         children,
-        showFab && /* @__PURE__ */ jsx80(
+        showFab && /* @__PURE__ */ jsx81(
           "button",
           {
             onClick: () => setIsOpen((prev) => !prev),
             className: "it-theme-fab it-theme-bounce",
             style: { backgroundColor: "var(--color-primary)" },
             "aria-label": t("themeProvider.fab.ariaLabel"),
-            children: /* @__PURE__ */ jsx80(MdPalette, { size: 28 })
+            children: /* @__PURE__ */ jsx81(MdPalette, { size: 28 })
           }
         ),
-        showFab && /* @__PURE__ */ jsx80(
+        showFab && /* @__PURE__ */ jsx81(
           ITDialog,
           {
             isOpen,
             onClose: () => setIsOpen(false),
             title: t("themeProvider.designer.title"),
             useFormHeader: true,
-            children: /* @__PURE__ */ jsxs58("div", { className: "flex gap-6 h-[580px]", children: [
-              /* @__PURE__ */ jsxs58("div", { className: "w-64 flex-shrink-0 flex flex-col gap-5 overflow-y-auto pr-1", children: [
-                /* @__PURE__ */ jsxs58("div", { children: [
-                  /* @__PURE__ */ jsx80(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.appearance") }),
-                  /* @__PURE__ */ jsx80(
+            children: /* @__PURE__ */ jsxs59("div", { className: "flex gap-6 h-[580px]", children: [
+              /* @__PURE__ */ jsxs59("div", { className: "w-64 flex-shrink-0 flex flex-col gap-5 overflow-y-auto pr-1", children: [
+                /* @__PURE__ */ jsxs59("div", { children: [
+                  /* @__PURE__ */ jsx81(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.appearance") }),
+                  /* @__PURE__ */ jsx81(
                     ITSegmentedControl,
                     {
                       options: [
@@ -16247,16 +17270,16 @@ function ITThemeProvider({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs58("div", { children: [
-                  /* @__PURE__ */ jsx80("div", { className: "flex items-center justify-between mb-2.5", children: /* @__PURE__ */ jsx80(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500", children: t("themeProvider.designer.presets") }) }),
-                  /* @__PURE__ */ jsx80("div", { className: "grid grid-cols-2 gap-2", children: PRESETS.map((preset) => /* @__PURE__ */ jsx80(PresetCard, { preset }, preset.name)) })
+                /* @__PURE__ */ jsxs59("div", { children: [
+                  /* @__PURE__ */ jsx81("div", { className: "flex items-center justify-between mb-2.5", children: /* @__PURE__ */ jsx81(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500", children: t("themeProvider.designer.presets") }) }),
+                  /* @__PURE__ */ jsx81("div", { className: "grid grid-cols-2 gap-2", children: PRESETS.map((preset) => /* @__PURE__ */ jsx81(PresetCard, { preset }, preset.name)) })
                 ] }),
-                customPresets.length > 0 && /* @__PURE__ */ jsxs58("div", { children: [
-                  /* @__PURE__ */ jsx80(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.myThemes") }),
-                  /* @__PURE__ */ jsx80("div", { className: "flex flex-col gap-1.5", children: customPresets.map((preset) => /* @__PURE__ */ jsx80(PresetCard, { preset, isCustom: true }, preset.name)) })
+                customPresets.length > 0 && /* @__PURE__ */ jsxs59("div", { children: [
+                  /* @__PURE__ */ jsx81(ITText, { as: "span", className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 block", children: t("themeProvider.designer.myThemes") }),
+                  /* @__PURE__ */ jsx81("div", { className: "flex flex-col gap-1.5", children: customPresets.map((preset) => /* @__PURE__ */ jsx81(PresetCard, { preset, isCustom: true }, preset.name)) })
                 ] }),
-                isSavingPreset && /* @__PURE__ */ jsxs58("div", { className: "flex flex-col gap-2 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50", children: [
-                  /* @__PURE__ */ jsx80(
+                isSavingPreset && /* @__PURE__ */ jsxs59("div", { className: "flex flex-col gap-2 p-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50", children: [
+                  /* @__PURE__ */ jsx81(
                     ITInput,
                     {
                       name: "presetName",
@@ -16274,8 +17297,8 @@ function ITThemeProvider({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs58("div", { className: "flex gap-2", children: [
-                    /* @__PURE__ */ jsx80(
+                  /* @__PURE__ */ jsxs59("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx81(
                       ITButton,
                       {
                         label: t("themeProvider.designer.save"),
@@ -16286,7 +17309,7 @@ function ITThemeProvider({
                         className: "flex-1"
                       }
                     ),
-                    /* @__PURE__ */ jsx80(
+                    /* @__PURE__ */ jsx81(
                       ITButton,
                       {
                         label: t("themeProvider.designer.cancelSave"),
@@ -16300,31 +17323,31 @@ function ITThemeProvider({
                     )
                   ] })
                 ] }),
-                !isSavingPreset && /* @__PURE__ */ jsx80(
+                !isSavingPreset && /* @__PURE__ */ jsx81(
                   ITButton,
                   {
                     variant: "outlined",
-                    icon: /* @__PURE__ */ jsx80(MdPalette, { size: 14 }),
+                    icon: /* @__PURE__ */ jsx81(MdPalette, { size: 14 }),
                     label: t("themeProvider.designer.saveCurrent"),
                     onClick: () => setIsSavingPreset(true),
                     size: "sm"
                   }
                 ),
-                /* @__PURE__ */ jsx80(
+                /* @__PURE__ */ jsx81(
                   ITButton,
                   {
                     variant: "outlined",
                     color: "danger",
-                    icon: /* @__PURE__ */ jsx80(MdRefresh, { size: 14 }),
+                    icon: /* @__PURE__ */ jsx81(MdRefresh, { size: 14 }),
                     label: t("themeProvider.designer.reset"),
                     onClick: resetTheme,
                     size: "sm"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx80(ITDivider, { orientation: "vertical" }),
-              /* @__PURE__ */ jsxs58("div", { className: "flex-1 flex flex-col min-w-0", children: [
-                /* @__PURE__ */ jsx80(
+              /* @__PURE__ */ jsx81(ITDivider, { orientation: "vertical" }),
+              /* @__PURE__ */ jsxs59("div", { className: "flex-1 flex flex-col min-w-0", children: [
+                /* @__PURE__ */ jsx81(
                   tabs_default,
                   {
                     variant: "pill",
@@ -16332,7 +17355,7 @@ function ITThemeProvider({
                       {
                         id: "brand",
                         label: t("themeProvider.tabs.brand"),
-                        content: /* @__PURE__ */ jsx80("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
+                        content: /* @__PURE__ */ jsx81("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
                           "primary",
                           "secondary",
                           "ternary",
@@ -16341,35 +17364,35 @@ function ITThemeProvider({
                           "info",
                           "alert",
                           "warning"
-                        ].map((key) => /* @__PURE__ */ jsx80(ColorRow, { colorKey: key }, key)) })
+                        ].map((key) => /* @__PURE__ */ jsx81(ColorRow, { colorKey: key }, key)) })
                       },
                       {
                         id: "layout",
                         label: t("themeProvider.tabs.layout"),
-                        content: /* @__PURE__ */ jsx80("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
+                        content: /* @__PURE__ */ jsx81("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
                           "layout.sidebarBg",
                           "layout.sidebarText",
                           "layout.navbarBg",
                           "layout.navbarText"
-                        ].map((key) => /* @__PURE__ */ jsx80(ColorRow, { colorKey: key }, key)) })
+                        ].map((key) => /* @__PURE__ */ jsx81(ColorRow, { colorKey: key }, key)) })
                       },
                       {
                         id: "tables",
                         label: t("themeProvider.tabs.tables"),
-                        content: /* @__PURE__ */ jsx80("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
+                        content: /* @__PURE__ */ jsx81("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[480px] overflow-y-auto pr-2 mt-3", children: [
                           "table.headerBg",
                           "table.headerText",
                           "table.rowBg",
                           "table.rowText",
                           "table.rowHover"
-                        ].map((key) => /* @__PURE__ */ jsx80(ColorRow, { colorKey: key }, key)) })
+                        ].map((key) => /* @__PURE__ */ jsx81(ColorRow, { colorKey: key }, key)) })
                       }
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs58("div", { className: "flex items-center justify-end gap-3 mt-auto pt-4 border-t border-slate-100 dark:border-slate-800", children: [
-                  /* @__PURE__ */ jsx80(ITText, { as: "p", className: "text-[11px] text-slate-400 mr-auto", children: t("themeProvider.designer.autosave") }),
-                  /* @__PURE__ */ jsx80(
+                /* @__PURE__ */ jsxs59("div", { className: "flex items-center justify-end gap-3 mt-auto pt-4 border-t border-slate-100 dark:border-slate-800", children: [
+                  /* @__PURE__ */ jsx81(ITText, { as: "p", className: "text-[11px] text-slate-400 mr-auto", children: t("themeProvider.designer.autosave") }),
+                  /* @__PURE__ */ jsx81(
                     ITButton,
                     {
                       label: t("themeProvider.designer.close"),
@@ -16427,7 +17450,7 @@ export {
   dropfile_default as ITDropfile,
   ITEmptyState,
   ITField,
-  ITFlex,
+  flex_default as ITFlex,
   ITFormBuilder,
   ITFormHeader,
   ITGrid,
@@ -16464,7 +17487,7 @@ export {
   ITTable,
   tabs_default as ITTabs,
   ITText,
-  ITTextarea,
+  textarea_default as ITTextarea,
   ITThemeProvider,
   ITTimePicker,
   ITToast,
@@ -16476,13 +17499,16 @@ export {
   auditTree,
   axzyCatalog,
   axzyCatalogTypes,
+  buildNavigationTree,
   buildVocabularyContract,
   countPendingNodes,
+  createBindingResolver,
   createCatalog,
   createLimitTracker,
   createValidationSchema,
   en_default as enMessages,
   es_default as esMessages,
+  flattenRoutes,
   formatPath,
   formatVocabularyForPrompt,
   getCatalogEntry,
@@ -16493,7 +17519,10 @@ export {
   isLightColor,
   isNodePending,
   issue,
+  joinRoutePath,
+  matchRoute,
   migrateSchema,
+  navContainsRoute,
   parsePartialSchema,
   parsePath,
   propPath,
@@ -16503,6 +17532,7 @@ export {
   resolveCssColor,
   resolveLimits,
   resolveNode,
+  routeHref,
   useClickOutside_default as useClickOutside,
   useDebouncedSearch,
   useEditableRow,
@@ -16512,7 +17542,9 @@ export {
   useITThemeSafe,
   useITTranslation,
   useJsonRender_default as useJsonRender,
+  useSchemaStream,
   useTableState,
+  validateRoutes,
   validateSchema
 };
 //# sourceMappingURL=index.js.map