@axzydev/axzy_ui_system 1.7.3 → 1.8.0

package/dist/index.js

@@ -703,7 +703,7 @@ var components = {
   input: {
     backgroundColor: "var(--it-input-bg, #ffffff)",
     borderColor: `var(--it-input-border, ${semanticColors.gray[300]})`,
-    borderRadius: "var(--radius-md)",
+    borderRadius: "var(--it-input-radius, var(--radius-md))",
     focus: {
       borderColor: `var(--it-input-focus-border, ${semanticColors.primary[500]})`,
       ring: `var(--it-input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`
@@ -872,6 +872,26 @@ function ITText({
   );
 }
 
+// src/theme/theme-context.ts
+import { createContext, useContext } from "react";
+var ITThemeContext = createContext(void 0);
+var useITTheme = () => {
+  const context = useContext(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var useITThemeSafe = () => {
+  return useContext(ITThemeContext);
+};
+var useITAppearance = () => {
+  return useContext(ITThemeContext)?.appearance ?? "soft";
+};
+var useITFlatAppearance = () => {
+  return useITAppearance() === "flat";
+};
+
 // src/components/atoms/button/button.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ITButton({
@@ -890,6 +910,7 @@ function ITButton({
 }) {
   const [isHovered, setIsHovered] = useState5(false);
   const [isFocused, setIsFocused] = useState5(false);
+  const bento = useITAppearance() === "bento";
   const isIconOnly = variant === "icon-only";
   const isIconOnlyContent = isIconOnly && Boolean(icon) && !children;
   const themeBtn = theme.button;
@@ -909,6 +930,9 @@ function ITButton({
       // Default from theme
       transition: themeConfig.transition || "all 0.2s"
     };
+    if (bento) {
+      style.borderRadius = `var(--it-bento-pill-radius, ${themeConfig.borderRadius})`;
+    }
     if (variant === "rounded") {
       style.borderRadius = "9999px";
     }
@@ -977,23 +1001,6 @@ function ITButton({
 import clsx2 from "clsx";
 import { useState as useState6 } from "react";
 
-// src/theme/theme-context.ts
-import { createContext, useContext } from "react";
-var ITThemeContext = createContext(void 0);
-var useITTheme = () => {
-  const context = useContext(ITThemeContext);
-  if (!context) {
-    throw new Error("useITTheme must be used within an ITThemeProvider");
-  }
-  return context;
-};
-var useITThemeSafe = () => {
-  return useContext(ITThemeContext);
-};
-var useITFlatAppearance = () => {
-  return useContext(ITThemeContext)?.appearance === "flat";
-};
-
 // src/i18n/provider.tsx
 import { useMemo as useMemo3 } from "react";
 
@@ -1205,7 +1212,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 +1424,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 +1507,8 @@ function useITTranslation() {
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function ITCard({
   title,
+  tone,
+  headerActions,
   image,
   alt,
   children,
@@ -1501,26 +1522,35 @@ function ITCard({
 }) {
   const { t } = useITTranslation();
   const [isHovered, setIsHovered] = useState6(false);
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   const resolvedAlt = alt ?? t("card.imageAlt");
   const containerStyle = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
-    borderWidth: "1px",
+    borderColor: bento ? "transparent" : flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderWidth: bento ? "0px" : "1px",
     borderStyle: "solid",
-    borderRadius: flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
+    borderRadius: bento ? "var(--it-card-radius, var(--it-bento-card-radius, var(--radius-2xl)))" : flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
     // Flat appearance: the hairline border carries the surface, so a card
     // only gets a shadow as hover feedback when it is clickable.
-    boxShadow: flat ? onClick && isHovered ? "var(--shadow-sm)" : "none" : onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
+    // Bento: borderless, a diffuse shadow at rest and a stronger one on hover.
+    boxShadow: bento ? onClick && isHovered ? "var(--it-bento-card-shadow-hover, var(--shadow-lg))" : "var(--it-bento-card-shadow, var(--shadow-sm))" : flat ? onClick && isHovered ? "var(--shadow-sm)" : "none" : onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
     transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
-    transform: onClick && isHovered && !flat ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat && !bento ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default"
   };
+  if (tone) {
+    const soft = `var(--color-${tone}-soft)`;
+    containerStyle.backgroundImage = `linear-gradient(${soft}, ${soft})`;
+    if (!bento) containerStyle.borderColor = `var(--color-${tone}-soft-border)`;
+  }
   const bodyStyle = {
-    padding: "1.25rem"
+    padding: bento ? "var(--it-bento-card-padding, 1.5rem)" : "1.25rem"
   };
+  const titleTypography = bento ? "text-lg font-bold" : flat ? "text-base font-semibold" : "text-xl font-semibold";
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -1547,14 +1577,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(titleTypography, 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),
+              className: clsx2(titleTypography, flat ? "mb-3" : bento ? "mb-4" : "mb-2", titleClassName),
               children: title
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsx4(ITText, { as: "div", className: "text-secondary-600", children })
         ] }),
         actions && /* @__PURE__ */ jsx4(
@@ -1574,6 +1614,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 +1642,7 @@ var wrapMap = {
   wrap: "flex-wrap",
   "wrap-reverse": "flex-wrap-reverse"
 };
-function ITFlex({
+var ITFlex = forwardRef(function ITFlex2({
   children,
   direction = "row",
   align,
@@ -1614,8 +1655,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 +1668,7 @@ function ITFlex({
   return /* @__PURE__ */ jsx5(
     Component,
     {
+      ref,
       className: clsx3(
         "flex",
         directionMap[direction],
@@ -1636,10 +1679,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 +1900,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":
@@ -3005,6 +3051,7 @@ function ITChipInput({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -3401,6 +3448,9 @@ function ITInput({
   const inputTheme = theme.input || {};
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size);
+    if (isTextArea) {
+      style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
+    }
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -4083,6 +4133,7 @@ function ITMultiSelect({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -7304,7 +7355,9 @@ function ITPageHeader({
 }) {
   const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   return /* @__PURE__ */ jsxs30("div", { className: `${className} space-y-3`, children: [
     showTopRow && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -7312,7 +7365,8 @@ function ITPageHeader({
           "button",
           {
             onClick: backAction,
-            className: "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
+            className: bento ? "flex items-center justify-center w-10 h-10 rounded-full hover:opacity-80 transition-opacity duration-200 flex-shrink-0" : "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
+            style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", color: "var(--it-bento-control-text, #475569)" } : void 0,
             "aria-label": t("pageHeader.back"),
             children: /* @__PURE__ */ jsx42(FaChevronLeft3, { size: 14 })
           }
@@ -7323,7 +7377,7 @@ function ITPageHeader({
     ] }),
     /* @__PURE__ */ jsxs30("div", { className: "flex items-start justify-between gap-6", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-4 min-w-0", children: [
-        icon && !flat && /* @__PURE__ */ jsx42(
+        icon && !flat && !bento && /* @__PURE__ */ jsx42(
           "div",
           {
             className: "flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm",
@@ -7336,7 +7390,7 @@ function ITPageHeader({
             ITText,
             {
               as: "h1",
-              className: flat ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight" : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              className: bento ? "text-3xl font-bold text-slate-900 dark:text-white tracking-tighter leading-tight" : flat ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight" : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
               children: title
             }
           ),
@@ -7344,7 +7398,7 @@ function ITPageHeader({
             ITText,
             {
               as: "p",
-              className: flat ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed" : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
+              className: bento ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed" : flat ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed" : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
               children: description
             }
           )
@@ -8256,16 +8310,19 @@ function ITSegmentedControl({
   disabled = false
 }) {
   const { button, container } = sizeMap3[size];
+  const bento = useITAppearance() === "bento";
   return /* @__PURE__ */ jsx59(
     "div",
     {
       role: "group",
       className: clsx40(
-        "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
+        "inline-flex",
+        bento ? "rounded-full" : "rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
+      style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)" } : void 0,
       children: options.map((opt) => {
         const isActive = opt.value === value;
         return /* @__PURE__ */ jsxs41(
@@ -8277,10 +8334,14 @@ function ITSegmentedControl({
             disabled,
             className: clsx40(
               button,
-              "rounded-lg font-semibold transition-all flex items-center gap-1.5",
-              isActive ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
+              "font-semibold transition-all flex items-center gap-1.5",
+              bento ? "rounded-full border border-transparent" : isActive ? "rounded-lg bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600" : "rounded-lg text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
               disabled && "pointer-events-none"
             ),
+            style: bento ? {
+              backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+              color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+            } : void 0,
             children: [
               opt.icon && /* @__PURE__ */ jsx59("span", { children: opt.icon }),
               /* @__PURE__ */ jsx59(ITText, { as: "span", children: opt.label })
@@ -8333,7 +8394,9 @@ function ITSidebar({
   onToggleCollapse,
   expandOnHover = true
 }) {
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = useState27(false);
@@ -8425,7 +8488,7 @@ function ITSidebar({
         color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
         backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
         fontSize: flat ? "0.84rem" : "0.78rem",
-        fontWeight: subitem.isActive ? 600 : 500,
+        fontWeight: subitem.isActive ? bento ? 700 : 600 : 500,
         letterSpacing: "0.01em",
         marginLeft: subitemConnector === "|" ? "-1px" : "0"
       },
@@ -8582,7 +8645,7 @@ function ITSidebar({
       style: {
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
+        borderRight: bento ? "none" : "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         ...flat ? {} : { WebkitBackdropFilter: "blur(12px)", backdropFilter: "blur(12px)" }
       },
       children: [
@@ -8676,7 +8739,7 @@ function ITSidebar({
                         style: {
                           color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
                           fontSize: flat ? "0.875rem" : "0.8rem",
-                          fontWeight: active ? "600" : "500"
+                          fontWeight: active ? bento ? "700" : "600" : "500"
                         },
                         children: item.label
                       }
@@ -8993,6 +9056,8 @@ function ITLineBarChart({
   barLabel,
   lineColor = "#10b981",
   barColor = "#3b82f6",
+  showLine = true,
+  showBars = true,
   height = 240,
   formatValue,
   formatAxis,
@@ -9010,8 +9075,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;
@@ -9055,7 +9123,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,
@@ -9068,8 +9136,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,
@@ -9080,7 +9148,7 @@ function ITLineBarChart({
               strokeLinejoin: "round"
             }
           ),
-          data.map((d, i) => /* @__PURE__ */ jsx64(
+          showLine && data.map((d, i) => /* @__PURE__ */ jsx64(
             "circle",
             {
               cx: x(i),
@@ -9107,12 +9175,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)
@@ -9121,11 +9189,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
       ] })
@@ -9774,6 +9842,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",
@@ -9781,7 +9850,7 @@ var resizeMap = {
   horizontal: "resize-x",
   both: "resize"
 };
-function ITTextarea({
+var ITTextarea = forwardRef2(function ITTextarea2({
   value,
   onChange,
   label,
@@ -9792,13 +9861,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,
@@ -9807,6 +9879,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",
@@ -9818,7 +9892,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";
@@ -9832,6 +9908,7 @@ var ITTabs = ({
   className = "",
   containerClassName = ""
 }) => {
+  const bento = useITAppearance() === "bento" && variant === "pill";
   const [activeId, setActiveId] = useState31(defaultActiveId || items[0]?.id);
   const handleTabClick = (id, disabled) => {
     if (disabled) return;
@@ -9840,39 +9917,50 @@ var ITTabs = ({
   };
   const activeContent = items.find((item) => item.id === activeId)?.content;
   return /* @__PURE__ */ jsxs48("div", { className: clsx47("w-full", containerClassName), children: [
-    /* @__PURE__ */ jsx67("div", { className: clsx47(
-      "flex border-secondary-200 mb-4",
-      variant === "line" ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
-      className
-    ), children: items.map((item) => {
-      const isActive = item.id === activeId;
-      return /* @__PURE__ */ jsxs48(
-        "button",
-        {
-          onClick: () => handleTabClick(item.id, item.disabled),
-          disabled: item.disabled,
-          className: clsx47(
-            "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
-            // LINE VARIANT
-            variant === "line" && [
-              "border-b-2 -mb-[2px]",
-              isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
-            ],
-            // PILL VARIANT
-            variant === "pill" && [
-              "rounded-md",
-              isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
-            ],
-            item.disabled && "opacity-50 cursor-not-allowed"
-          ),
-          children: [
-            item.icon && /* @__PURE__ */ jsx67("span", { className: "w-4 h-4", children: item.icon }),
-            /* @__PURE__ */ jsx67(ITText, { as: "span", children: item.label })
-          ]
-        },
-        item.id
-      );
-    }) }),
+    /* @__PURE__ */ jsx67(
+      "div",
+      {
+        className: clsx47(
+          "flex border-secondary-200 mb-4",
+          variant === "line" ? "border-b" : bento ? "gap-2 p-1 rounded-full w-fit" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
+          className
+        ),
+        style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", borderColor: "transparent" } : void 0,
+        children: items.map((item) => {
+          const isActive = item.id === activeId;
+          return /* @__PURE__ */ jsxs48(
+            "button",
+            {
+              onClick: () => handleTabClick(item.id, item.disabled),
+              disabled: item.disabled,
+              className: clsx47(
+                "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
+                // LINE VARIANT
+                variant === "line" && [
+                  "border-b-2 -mb-[2px]",
+                  isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
+                ],
+                // PILL VARIANT
+                variant === "pill" && (bento ? "rounded-full" : [
+                  "rounded-md",
+                  isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
+                ]),
+                item.disabled && "opacity-50 cursor-not-allowed"
+              ),
+              style: bento ? {
+                backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+              } : void 0,
+              children: [
+                item.icon && /* @__PURE__ */ jsx67("span", { className: "w-4 h-4", children: item.icon }),
+                /* @__PURE__ */ jsx67(ITText, { as: "span", children: item.label })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsx67("div", { className: "tab-content animate-fadeIn", children: activeContent })
   ] });
 };
@@ -12185,7 +12273,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 = {
@@ -12366,6 +12454,11 @@ var AXZY_CATALOG_ENTRIES = [
     summary: "Tarjeta con t\xEDtulo, imagen y contenido.",
     props: {
       title: { kind: "string" },
+      tone: {
+        kind: "enum",
+        values: ["primary", "secondary", "ternary", "success", "info", "warning", "danger"],
+        doc: "Tinte pastel de la tarjeta (token --color-<tone>-soft)."
+      },
       image: { kind: "string", doc: "URL de la imagen de cabecera." },
       alt: { kind: "string" },
       onClick: { kind: "action" },
@@ -12496,7 +12589,7 @@ var AXZY_CATALOG_ENTRIES = [
   },
   {
     type: "ITFlex",
-    component: ITFlex,
+    component: flex_default,
     children: true,
     summary: "Contenedor flex completo.",
     props: {
@@ -12629,6 +12722,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,
@@ -12672,46 +12951,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;
-  }
-  /** 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
-    };
+// 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;
   }
-};
-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);
@@ -13059,55 +13317,14 @@ function isNodePending(node) {
 }
 
 // src/json-renderer/kernel/renderNode.tsx
-import React17 from "react";
+import React18 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);
-}
-
-// src/json-renderer/catalog/resolve.ts
-function isSchemaReference(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
-  const keys = Object.keys(value);
-  if (keys.length === 0) return false;
-  return keys.some((key) => key === "i18n" || key.startsWith("$"));
+// src/json-renderer/catalog/resolve.ts
+function isSchemaReference(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const keys = Object.keys(value);
+  if (keys.length === 0) return false;
+  return keys.some((key) => key === "i18n" || key.startsWith("$"));
 }
 function coerce(value, spec) {
   switch (spec.kind) {
@@ -13241,11 +13458,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") {
@@ -13254,6 +13917,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) {
@@ -13264,15 +13933,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
@@ -13328,7 +14019,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;
@@ -13338,6 +14029,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,
@@ -13346,6 +14047,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;
@@ -13358,7 +14065,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("."),
@@ -13380,6 +14087,11 @@ function ITSchemaRenderer({
   schema,
   catalog = axzyCatalog,
   limits,
+  params,
+  dataHandlers,
+  slots,
+  effects,
+  capabilities,
   resolveValue,
   resolveAction,
   pendingFallback,
@@ -13387,6 +14099,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(
@@ -13400,16 +14127,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);
@@ -13435,7 +14183,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
@@ -13446,6 +14346,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);
@@ -13628,8 +14539,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";
 
@@ -13659,11 +14705,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 */],
@@ -13676,15 +14723,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 */);
@@ -13799,11 +14846,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) {
@@ -13819,6 +14878,7 @@ var ITDropfile = ({
           const previewUrl = URL.createObjectURL(file);
           setImagePreview(previewUrl);
         }
+        if (autoUpload) void runAutoUpload(file);
       } else {
         alert(t("dropfile.fileTypeNotAllowed"));
         setSelectedFile(null);
@@ -13833,12 +14893,12 @@ var ITDropfile = ({
     accept: getAcceptedFileTypes(),
     maxFiles: 1
   });
-  useEffect19(() => {
+  useEffect20(() => {
     const renderPDF = async () => {
     };
     renderPDF();
   }, [selectedFile, fileType]);
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       if (imagePreview) {
         URL.revokeObjectURL(imagePreview);
@@ -13875,7 +14935,7 @@ var ITDropfile = ({
   const handleDelete = () => {
     handleCancel();
   };
-  useEffect19(() => {
+  useEffect20(() => {
     if (view === "button" && isConfirmed && uploadStatus === "subido" /* UPLOADED */) {
       const timeout = setTimeout(() => {
         setIsModalOpen(false);
@@ -13892,21 +14952,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(),
@@ -13916,41 +14976,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",
@@ -13958,10 +15018,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",
@@ -13969,13 +15029,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",
@@ -13984,12 +15044,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",
@@ -14002,8 +15062,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",
@@ -14011,20 +15071,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
   ] });
@@ -14032,13 +15092,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,
@@ -14052,41 +15112,46 @@ function ITTopBar({
   hideBrandOnDesktop = false,
   showDesktopMenuButton = false
 }) {
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   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 userRestBg = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent";
+  const userHoverBg = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+  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"}`,
       style: {
-        backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
+        backgroundColor: bento ? "var(--it-layout-bg, #f4f4f6)" : "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: bento ? "none" : "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",
               "aria-label": t("common.menu"),
-              className: `${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`,
+              className: `${showDesktopMenuButton ? "" : "lg:hidden"} ${bento ? "w-10 h-10 flex items-center justify-center rounded-full" : "p-2.5 -ml-2.5 rounded-xl"} transition-colors duration-200`,
               style: {
-                color: "var(--it-topbar-icon, #64748b)"
+                color: bento ? "var(--it-bento-control-text, #475569)" : "var(--it-topbar-icon, #64748b)",
+                backgroundColor: bento ? "var(--it-bento-control-bg, #f1f5f9)" : void 0
               },
-              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)",
-              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)",
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "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",
@@ -14096,57 +15161,70 @@ 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(
-            "button",
+          navItems && navItems.length > 0 && /* @__PURE__ */ jsx78(
+            "nav",
             {
-              onClick: () => onNavItemClick?.(item.id),
-              className: "px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
-              style: { color: "var(--it-topbar-text, #475569)" },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
-                e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
-              },
-              onMouseLeave: (e) => {
-                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 })
-              ] })
-            },
-            item.id
-          )) })
+              className: bento ? "hidden md:flex ml-4 gap-2" : "hidden md:flex ml-8 space-x-1 border-l pl-8",
+              style: bento ? void 0 : { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" },
+              children: navItems.map((item) => {
+                const restBg = bento ? item.isActive ? "var(--it-bento-ink-bg, #0f172a)" : "var(--it-bento-control-bg, #f1f5f9)" : item.isActive ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent";
+                const restColor = bento ? item.isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)" : "var(--it-topbar-text, #475569)";
+                return /* @__PURE__ */ jsx78(
+                  "button",
+                  {
+                    onClick: () => onNavItemClick?.(item.id),
+                    "aria-current": item.isActive ? "page" : void 0,
+                    className: `px-4 py-2 ${bento ? "rounded-full" : "rounded-lg"} font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]`,
+                    style: { color: restColor, backgroundColor: restBg },
+                    onMouseEnter: (e) => {
+                      if (bento && item.isActive) return;
+                      e.currentTarget.style.color = bento ? "var(--it-bento-control-text, #0f172a)" : "var(--it-topbar-text, #0f172a)";
+                      e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.color = restColor;
+                      e.currentTarget.style.backgroundColor = restBg;
+                    },
+                    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",
-                className: `flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200 ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`,
+                className: `flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent ${bento ? "" : "hover:border-secondary-200"} ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`,
                 style: {
-                  backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent"
+                  backgroundColor: isUserMenuOpen ? userHoverBg : userRestBg
                 },
                 onMouseEnter: (e) => {
-                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userHoverBg;
                 },
                 onMouseLeave: (e) => {
-                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userRestBg;
                 },
                 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",
@@ -14157,11 +15235,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",
@@ -14170,7 +15248,7 @@ function ITTopBar({
                         children: userMenu.userName
                       }
                     ),
-                    /* @__PURE__ */ jsx77(
+                    /* @__PURE__ */ jsx78(
                       ITText,
                       {
                         as: "span",
@@ -14183,7 +15261,7 @@ function ITTopBar({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs55(
+            /* @__PURE__ */ jsxs56(
               "div",
               {
                 ref: userMenuRef,
@@ -14196,15 +15274,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: () => {
@@ -14219,7 +15297,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);
@@ -14235,7 +15313,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,
@@ -14244,9 +15322,9 @@ function ITLayout({
   contentClassName = "",
   sidebarFullHeight = false
 }) {
-  const [internalCollapsed, setInternalCollapsed] = useState39(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState39(false);
-  const flat = useITFlatAppearance();
+  const [internalCollapsed, setInternalCollapsed] = useState42(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState42(false);
+  const flat = useITAppearance() !== "soft";
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
@@ -14259,7 +15337,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,
@@ -14272,9 +15350,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,
@@ -14287,17 +15365,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,
@@ -14314,16 +15392,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
           ] }),
@@ -14332,9 +15410,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",
@@ -14351,9 +15429,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,
@@ -14369,15 +15447,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}%`;
@@ -14421,23 +15499,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,
@@ -14445,11 +15523,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",
@@ -14459,8 +15537,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(
@@ -14474,7 +15552,7 @@ function ITStepper({
                   children: renderStepContent(idx, isCompleted)
                 }
               ),
-              /* @__PURE__ */ jsx79(
+              /* @__PURE__ */ jsx80(
                 ITText,
                 {
                   as: "span",
@@ -14492,7 +15570,7 @@ function ITStepper({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80(
       "div",
       {
         ref: contentRef,
@@ -14508,32 +15586,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, {})
             ] })
           }
         )
@@ -14543,7 +15621,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
@@ -14721,7 +15799,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: {
@@ -14824,7 +15902,7 @@ function ITThemeProvider({
   appearance = "soft"
 }) {
   const { t } = useITTranslation();
-  const [palette2, setPaletteState] = useState41(() => {
+  const [palette2, setPaletteState] = useState44(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
       ...theme2,
@@ -14850,8 +15928,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) : [];
@@ -14860,8 +15938,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 = {
@@ -14880,8 +15958,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") {
@@ -14890,7 +15968,7 @@ function ITThemeProvider({
       return "system";
     }
   );
-  useEffect21(() => {
+  useEffect22(() => {
     localStorage.setItem("it-theme-dark-mode", darkModeMode);
     const applyDarkMode = (isDark) => {
       if (isDark) {
@@ -14915,7 +15993,7 @@ function ITThemeProvider({
       applyDarkMode(darkModeMode === "dark");
     }
   }, [darkModeMode]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!showFab) {
       setPaletteState({
         ...DEFAULT_PALETTE,
@@ -14972,7 +16050,33 @@ function ITThemeProvider({
       surfaceStyle?.remove();
     };
   }, [radius, shadow]);
-  useEffect21(() => {
+  useLayoutEffect5(() => {
+    const STYLE_ID = "it-theme-bento-tokens";
+    let tag = document.getElementById(STYLE_ID);
+    if (appearance !== "bento") {
+      tag?.remove();
+      return;
+    }
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = STYLE_ID;
+      document.head.appendChild(tag);
+    }
+    const hasRadius = typeof radius === "number" && isFinite(radius);
+    const hasShadow = shadowLevel(shadow) !== null;
+    const shapeLight = hasRadius ? "" : "--it-bento-card-radius:24px;--it-bento-pill-radius:9999px;--it-bento-field-radius:1rem;--it-input-radius:var(--it-bento-pill-radius);";
+    const shadowLight = hasShadow ? "" : "--it-bento-card-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -16px rgba(16,24,40,.10);--it-bento-card-shadow-hover:0 1px 2px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.18);";
+    const shadowDark = hasShadow ? "" : "--it-bento-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.55);--it-bento-card-shadow-hover:0 1px 2px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.7);";
+    const navTokens = "--it-sidebar-active-bg:var(--it-bento-nav-active-bg);--it-sidebar-active-color:var(--it-bento-nav-active-text);--it-sidebar-active-icon:var(--it-bento-nav-active-text);";
+    const light = "--it-layout-bg:#f4f4f6;--it-card-bg:#ffffff;--it-bento-card-padding:1.5rem;--it-input-bg:#f1f5f9;--it-input-border:transparent;--it-input-focus-ring:0 0 0 2px color-mix(in srgb,var(--color-primary) 50%,transparent);--it-bento-control-bg:#f1f5f9;--it-bento-control-bg-hover:#e2e8f0;--it-bento-control-text:#475569;--it-bento-ink-bg:#0f172a;--it-bento-ink-text:#ffffff;--it-bento-nav-active-bg:#f1f5f9;--it-bento-nav-active-text:#0f172a;" + navTokens;
+    const dark = "--it-layout-bg:#020617;--it-card-bg:#0f172a;--it-input-bg:#1e293b;--it-input-border:transparent;--it-bento-control-bg:#1e293b;--it-bento-control-bg-hover:#334155;--it-bento-control-text:#cbd5e1;--it-bento-ink-bg:#ffffff;--it-bento-ink-text:#0f172a;--it-bento-nav-active-bg:#1e293b;--it-bento-nav-active-text:#ffffff;" + navTokens;
+    const A = '[data-it-appearance="bento"]';
+    tag.textContent = `:root${A}{${light}${shapeLight}${shadowLight}}:root${A}.dark,:root${A} .dark,:root${A} [data-theme="dark"]{${dark}${shadowDark}}:root${A} [data-theme="light"]{${light}${shadowLight}}`;
+    return () => {
+      tag?.remove();
+    };
+  }, [appearance, radius, shadow]);
+  useEffect22(() => {
     const injectStyles = (obj, prefix = "") => {
       Object.entries(obj).forEach(([key, val]) => {
         if (typeof val === "object" && val !== null) {
@@ -16126,14 +17230,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",
@@ -16142,23 +17246,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",
@@ -16177,14 +17281,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) => {
@@ -16193,11 +17297,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",
@@ -16209,7 +17313,7 @@ function ITThemeProvider({
       }
     );
   };
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(
     ITThemeContext.Provider,
     {
       value: {
@@ -16226,28 +17330,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: [
@@ -16261,16 +17365,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",
@@ -16288,8 +17392,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"),
@@ -16300,7 +17404,7 @@ function ITThemeProvider({
                         className: "flex-1"
                       }
                     ),
-                    /* @__PURE__ */ jsx80(
+                    /* @__PURE__ */ jsx81(
                       ITButton,
                       {
                         label: t("themeProvider.designer.cancelSave"),
@@ -16314,31 +17418,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",
@@ -16346,7 +17450,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",
@@ -16355,35 +17459,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"),
@@ -16441,7 +17545,7 @@ export {
   dropfile_default as ITDropfile,
   ITEmptyState,
   ITField,
-  ITFlex,
+  flex_default as ITFlex,
   ITFormBuilder,
   ITFormHeader,
   ITGrid,
@@ -16478,7 +17582,7 @@ export {
   ITTable,
   tabs_default as ITTabs,
   ITText,
-  ITTextarea,
+  textarea_default as ITTextarea,
   ITThemeProvider,
   ITTimePicker,
   ITToast,
@@ -16490,13 +17594,16 @@ export {
   auditTree,
   axzyCatalog,
   axzyCatalogTypes,
+  buildNavigationTree,
   buildVocabularyContract,
   countPendingNodes,
+  createBindingResolver,
   createCatalog,
   createLimitTracker,
   createValidationSchema,
   en_default as enMessages,
   es_default as esMessages,
+  flattenRoutes,
   formatPath,
   formatVocabularyForPrompt,
   getCatalogEntry,
@@ -16507,7 +17614,10 @@ export {
   isLightColor,
   isNodePending,
   issue,
+  joinRoutePath,
+  matchRoute,
   migrateSchema,
+  navContainsRoute,
   parsePartialSchema,
   parsePath,
   propPath,
@@ -16517,16 +17627,20 @@ export {
   resolveCssColor,
   resolveLimits,
   resolveNode,
+  routeHref,
   useClickOutside_default as useClickOutside,
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITAppearance,
   useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useITTranslation,
   useJsonRender_default as useJsonRender,
+  useSchemaStream,
   useTableState,
+  validateRoutes,
   validateSchema
 };
 //# sourceMappingURL=index.js.map