pixelon 0.3.76 → 0.3.78

package/dist/index.esm.js

@@ -3987,13 +3987,13 @@ function resolveVariable(template, formValues, fieldStates) {
   }
   return "";
 }
-function resolveBody(obj, formValues, fieldStates) {
+function resolveBody$1(obj, formValues, fieldStates) {
   if (typeof obj === "string") return resolveVariable(obj, formValues, fieldStates);
-  if (Array.isArray(obj)) return obj.map((item) => resolveBody(item, formValues, fieldStates));
+  if (Array.isArray(obj)) return obj.map((item) => resolveBody$1(item, formValues, fieldStates));
   if (obj !== null && typeof obj === "object") {
     const resolved = {};
     for (const [key, value] of Object.entries(obj)) {
-      resolved[key] = resolveBody(value, formValues, fieldStates);
+      resolved[key] = resolveBody$1(value, formValues, fieldStates);
     }
     return resolved;
   }
@@ -4043,7 +4043,7 @@ const CostSummaryField = ({
       return;
     }
     fetchedRef.current = true;
-    const body = resolveBody(field.endpoint.body || {}, values, fieldStates);
+    const body = resolveBody$1(field.endpoint.body || {}, values, fieldStates);
     setLoading(true);
     setError("");
     fetchViaEventBus(eventBus, field.endpoint.service, field.endpoint.url, field.endpoint.method, body).then((data) => {
@@ -4497,7 +4497,7 @@ function useReactiveEndpoints({ fields, fieldStates, setFieldState, eventBus, ti
       setFieldState(field.name, { loading: true, error: null });
       const startTime = Date.now();
       try {
-        const resolvedBody = field.endpoint.body ? resolveBody(field.endpoint.body, formValues, fieldStates) : void 0;
+        const resolvedBody = field.endpoint.body ? resolveBody$1(field.endpoint.body, formValues, fieldStates) : void 0;
         const params = field.endpoint.params ? resolveParams(field.endpoint.params, formValues, fieldStates) : {};
         const requestBody = resolvedBody ?? (Object.keys(params).length > 0 ? params : void 0);
         if (eventBus) {
@@ -4772,7 +4772,7 @@ function useReactiveForm(props) {
   const handleSubmit = async () => {
     if (isSubmitting) return;
     setIsSubmitting(true);
-    const resolvedPayload = resolveBody(submit.payload_map, values, fieldStates);
+    const resolvedPayload = resolveBody$1(submit.payload_map, values, fieldStates);
     if (eventBus) {
       try {
         const data = await fetchViaEventBus(
@@ -10865,6 +10865,7 @@ const Drawer = ({
   size = DRAWER_SIZES.RESPONSIVE,
   fixedSize = 400,
   responsivePercentage = 80,
+  mobileSheet = false,
   title,
   headerExtra,
   showCloseButton = true,
@@ -10947,11 +10948,13 @@ const Drawer = ({
     `${COMPONENT_PREFIX}drawer--${size}`,
     isOpen && `${COMPONENT_PREFIX}drawer--open`,
     isMobile && `${COMPONENT_PREFIX}drawer--mobile`,
+    mobileSheet && `${COMPONENT_PREFIX}drawer--sheet`,
     className
   ].filter(Boolean).join(" ");
   const overlayClasses = [
     `${COMPONENT_PREFIX}drawer-overlay`,
-    isOpen && showOverlay && `${COMPONENT_PREFIX}drawer-overlay--visible`
+    isOpen && showOverlay && `${COMPONENT_PREFIX}drawer-overlay--visible`,
+    mobileSheet && `${COMPONENT_PREFIX}drawer-overlay--sheet`
   ].filter(Boolean).join(" ");
   const getDrawerStyles = () => {
     if (isMobile) {
@@ -11686,11 +11689,12 @@ const DropdownMenu = ({
         children: options.map((option, index) => /* @__PURE__ */ jsxs(
           "button",
           {
-            className: `${baseClass}__option ${option.disabled ? `${baseClass}__option--disabled` : ""}`,
+            className: `${baseClass}__option ${option.disabled ? `${baseClass}__option--disabled` : ""} ${option.disabled && option.disabledReason ? `${baseClass}__option--con-motivo` : ""}`,
             onClick: () => !option.disabled && handleOptionClick(option.onClick),
             disabled: option.disabled,
             role: "menuitem",
             type: "button",
+            title: option.disabled && option.disabledReason ? option.disabledReason : void 0,
             children: [
               option.icon && /* @__PURE__ */ jsx(
                 Icon,
@@ -11700,7 +11704,10 @@ const DropdownMenu = ({
                   className: `${baseClass}__option-icon`
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-label`, children: option.label })
+              option.disabled && option.disabledReason ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__option-texts`, children: [
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-label`, children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-reason`, children: option.disabledReason })
+              ] }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-label`, children: option.label })
             ]
           },
           index
@@ -13054,36 +13061,45 @@ const Badge = ({
 };
 Badge.displayName = "LumiBadge";
 
+function fieldOptions(field) {
+  return field.uiProps?.options;
+}
+function renderFieldValue(field, row) {
+  const value = row[field.key];
+  const options = fieldOptions(field);
+  const opt = options?.find((o) => String(o.value) === String(value));
+  if (field.moleculeType === "BADGE") {
+    if (value == null || value === "") return null;
+    return createElement(Badge, { color: opt?.color, children: opt?.label ?? String(value) });
+  }
+  if (field.moleculeType === "INPUT_CURRENCY") {
+    if (value == null || value === "") return null;
+    const cp = field.uiProps ?? {};
+    return createElement(CurrencyDisplay, {
+      value,
+      showCode: cp.showCode ?? true,
+      showSymbol: cp.showSymbol ?? true,
+      currency: cp.currency ?? { decimalPlaces: 0 },
+      align: field.align ?? "right",
+      size: cp.size ?? "md"
+    });
+  }
+  if (field.formatValue) return field.formatValue(value, row);
+  if (opt) return opt.label;
+  return value;
+}
+function hasFieldValue(field, row) {
+  const value = row[field.key];
+  return value != null && value !== "";
+}
+
 function mapFieldsToTableColumns(fields) {
   return fields.filter((field) => field.showInTable !== false).map((field) => {
     let width = field.columnWidth;
     if (field.fixed && typeof field.columnWidth === "number") {
       width = `${field.columnWidth}px`;
     }
-    const options = field.uiProps?.options;
-    const build = (row) => {
-      const value = row[field.key];
-      const opt = options?.find((o) => String(o.value) === String(value));
-      if (field.moleculeType === "BADGE") {
-        if (value == null || value === "") return null;
-        return createElement(Badge, { color: opt?.color, children: opt?.label ?? String(value) });
-      }
-      if (field.moleculeType === "INPUT_CURRENCY") {
-        if (value == null || value === "") return null;
-        const cp = field.uiProps ?? {};
-        return createElement(CurrencyDisplay, {
-          value,
-          showCode: cp.showCode ?? true,
-          showSymbol: cp.showSymbol ?? true,
-          currency: cp.currency ?? { decimalPlaces: 0 },
-          align: field.align ?? "right",
-          size: cp.size ?? "md"
-        });
-      }
-      if (field.formatValue) return field.formatValue(value, row);
-      if (opt) return opt.label;
-      return value;
-    };
+    const build = (row) => renderFieldValue(field, row);
     return {
       key: field.key,
       title: field.label,
@@ -13114,10 +13130,201 @@ function mapFieldsToFormFields(fields, mode) {
   }));
 }
 
+const CLASS$e = `${COMPONENT_PREFIX}field-value`;
+const FieldValue = ({
+  label,
+  children,
+  layout = "inline",
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: [CLASS$e, `${CLASS$e}--${layout}`, className].filter(Boolean).join(" "), children: [
+  /* @__PURE__ */ jsx("span", { className: `${CLASS$e}__label`, children: label }),
+  /* @__PURE__ */ jsx("span", { className: `${CLASS$e}__value`, children })
+] });
+FieldValue.displayName = "FieldValue";
+
+const CLASS$d = `${COMPONENT_PREFIX}record-card`;
+const RecordCard = ({
+  title,
+  summary,
+  children,
+  actions,
+  open = false,
+  onToggle,
+  ariaLabel,
+  className
+}) => {
+  const cuerpoId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: [CLASS$d, open ? `${CLASS$d}--open` : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${CLASS$d}__header`,
+        "aria-expanded": open,
+        "aria-controls": cuerpoId,
+        "aria-label": ariaLabel,
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: `${CLASS$d}__heading`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${CLASS$d}__title`, children: title }),
+            summary && /* @__PURE__ */ jsx("span", { className: `${CLASS$d}__summary`, children: summary })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              type: open ? "chevron-up" : "chevron-down",
+              width: 18,
+              height: 18,
+              className: `${CLASS$d}__chevron`,
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: `${CLASS$d}__body`, id: cuerpoId, children: [
+      children,
+      actions && /* @__PURE__ */ jsx("div", { className: `${CLASS$d}__actions`, children: actions })
+    ] })
+  ] });
+};
+RecordCard.displayName = "RecordCard";
+
+const CLASS$c = `${COMPONENT_PREFIX}crud-cards`;
+function summaryFields(fields) {
+  const visibles = fields.filter((f) => f.showInTable !== false);
+  const marcados = visibles.filter((f) => f.summary);
+  return marcados.length > 0 ? marcados : visibles.slice(0, 3);
+}
+function CardList({
+  fields,
+  rows,
+  rowKey,
+  buildOptions,
+  loading = false,
+  emptyText = "No hay registros"
+}) {
+  const [abierta, setAbierta] = useState(null);
+  const resumen = summaryFields(fields);
+  const claveResumen = new Set(resumen.map((f) => f.key));
+  const cuerpo = fields.filter((f) => f.showInTable !== false && !claveResumen.has(f.key));
+  if (loading && rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: `${CLASS$c}__estado`, children: "Cargando..." });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: `${CLASS$c}__estado`, children: emptyText });
+  }
+  const [principal, ...secundarios] = resumen;
+  return /* @__PURE__ */ jsx("div", { className: CLASS$c, children: rows.map((row) => {
+    const key = rowKey(row);
+    const opciones = buildOptions?.(row) ?? [];
+    const titulo = principal ? renderFieldValue(principal, row) : key;
+    return /* @__PURE__ */ jsx(
+      RecordCard,
+      {
+        open: abierta === key,
+        onToggle: () => setAbierta((actual) => actual === key ? null : key),
+        ariaLabel: principal ? `${principal.label}: ${String(row[principal.key] ?? "")}` : void 0,
+        title: titulo,
+        summary: secundarios.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: secundarios.map((f) => /* @__PURE__ */ jsx(React.Fragment, { children: renderFieldValue(f, row) }, f.key)) }) : void 0,
+        actions: opciones.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: opciones.map((o) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: [
+              `${CLASS$c}__accion`,
+              o.disabled && o.disabledReason ? "is-con-motivo" : ""
+            ].filter(Boolean).join(" "),
+            disabled: o.disabled,
+            onClick: () => void o.onClick(),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: o.label }),
+              o.disabled && o.disabledReason && /* @__PURE__ */ jsx("span", { className: `${CLASS$c}__motivo`, children: o.disabledReason })
+            ]
+          },
+          o.label
+        )) }) : void 0,
+        children: cuerpo.map(
+          (f) => hasFieldValue(f, row) ? /* @__PURE__ */ jsx(FieldValue, { label: f.label, children: renderFieldValue(f, row) }, f.key) : null
+        )
+      },
+      key
+    );
+  }) });
+}
+CardList.displayName = "CardList";
+
+const CLASS$b = `${COMPONENT_PREFIX}crud-scroll-end`;
+const MARGEN = 24;
+const SELECTOR_CRUD = `.${COMPONENT_PREFIX}table-container, .${COMPONENT_PREFIX}crud-cards`;
+const ScrollToEnd = ({
+  hostRef,
+  selector = SELECTOR_CRUD,
+  dep,
+  label = "Ir al final de la lista"
+}) => {
+  const [visible, setVisible] = useState(false);
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const scroller = host.querySelector(selector) ?? host;
+    scrollerRef.current = scroller;
+    if (!scroller) {
+      setVisible(false);
+      return;
+    }
+    const revisar = () => {
+      const s = scrollerRef.current;
+      if (!s) return;
+      setVisible(s.scrollHeight - s.clientHeight - s.scrollTop > MARGEN);
+    };
+    revisar();
+    scroller.addEventListener("scroll", revisar, { passive: true });
+    let observador;
+    if (typeof ResizeObserver !== "undefined") {
+      observador = new ResizeObserver(revisar);
+      observador.observe(scroller);
+      if (scroller.firstElementChild) observador.observe(scroller.firstElementChild);
+    }
+    return () => {
+      scroller.removeEventListener("scroll", revisar);
+      observador?.disconnect();
+    };
+  }, [hostRef, selector, dep]);
+  const alFinal = useCallback(() => {
+    const s = scrollerRef.current;
+    if (!s) return;
+    s.scrollTo({ top: s.scrollHeight, behavior: "smooth" });
+  }, []);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx("button", { type: "button", className: CLASS$b, onClick: alFinal, "aria-label": label, title: label, children: /* @__PURE__ */ jsx(Icon, { type: "chevron-down", width: 18, height: 18, "aria-hidden": true }) });
+};
+ScrollToEnd.displayName = "ScrollToEnd";
+
 function calculateTotalPages(totalRecords, limit) {
   return Math.ceil(totalRecords / limit);
 }
 
+const useAnchoPropio = () => {
+  const ref = useRef(null);
+  const [ancho, setAncho] = useState(null);
+  useEffect(() => {
+    const nodo = ref.current;
+    if (!nodo) return;
+    if (typeof ResizeObserver === "undefined") {
+      setAncho(nodo.getBoundingClientRect().width);
+      return;
+    }
+    const observador = new ResizeObserver((entradas) => {
+      const w = entradas[0]?.contentRect.width;
+      if (typeof w === "number") setAncho(w);
+    });
+    observador.observe(nodo);
+    return () => observador.disconnect();
+  }, []);
+  return [ref, ancho];
+};
 const useIsMobile = () => {
   const [isMobile, setIsMobile] = useState(false);
   useEffect(() => {
@@ -13157,6 +13364,8 @@ function Crud({
   defaultFilters,
   tableHeight,
   tableScroll,
+  layout = "auto",
+  cardsBelow = 768,
   hidePagination = false,
   formDrawerWidth = "80%",
   formColumns = 2,
@@ -13261,6 +13470,69 @@ function Crud({
     }
     return columns;
   }, [renderByFields, isMobile, tableScroll?.x]);
+  const buildRowOptions = useCallback((row) => {
+    const menuOptions = [];
+    if (rowActionTypes.includes("edit") && !disabledActions?.edit && onEdit) {
+      menuOptions.push({
+        label: labels?.editButton || "Editar",
+        icon: "edit",
+        onClick: () => {
+          openFormDrawer("edit", row);
+        }
+      });
+    }
+    if (rowActionTypes.includes("delete") && !disabledActions?.delete && onDelete) {
+      menuOptions.push({
+        label: labels?.deleteButton || "Eliminar",
+        icon: "trash",
+        onClick: () => {
+          openConfirmDrawer("delete", void 0, [row]);
+        }
+      });
+    }
+    if (rowActionTypes.includes("view") && !disabledActions?.view) {
+      menuOptions.push({
+        label: labels?.viewButton || "Ver",
+        icon: "eye",
+        onClick: async () => {
+          if (onView) {
+            await onView([row]);
+          }
+          openFormDrawer("view", row);
+        }
+      });
+    }
+    rowActions?.forEach((action) => {
+      if (action.show && !action.show(row)) return;
+      menuOptions.push({
+        label: action.label,
+        icon: action.icon,
+        onClick: () => {
+          if (action.drawerId) {
+            openCustomDrawer(action.drawerId, row);
+          }
+          if (action.onClick) {
+            action.onClick(row);
+          }
+        },
+        disabled: action.disabled ? action.disabled(row) : false,
+        // SPEC-090 T3 — una acción apagada sin motivo es indistinguible de una rota.
+        disabledReason: action.disabledReason?.(row)
+      });
+    });
+    return menuOptions;
+  }, [
+    rowActionTypes,
+    disabledActions,
+    onEdit,
+    onDelete,
+    onView,
+    labels,
+    openFormDrawer,
+    openConfirmDrawer,
+    openCustomDrawer,
+    rowActions
+  ]);
   const tableColumns = useMemo(() => {
     if (!showRowActions) return baseTableColumns;
     const actionsColumn = {
@@ -13272,53 +13544,7 @@ function Crud({
       cellType: "CHILDREN",
       dataSource: {
         build: (row) => {
-          const menuOptions = [];
-          if (rowActionTypes.includes("edit") && !disabledActions?.edit && onEdit) {
-            menuOptions.push({
-              label: labels?.editButton || "Editar",
-              icon: "edit",
-              onClick: () => {
-                openFormDrawer("edit", row);
-              }
-            });
-          }
-          if (rowActionTypes.includes("delete") && !disabledActions?.delete && onDelete) {
-            menuOptions.push({
-              label: labels?.deleteButton || "Eliminar",
-              icon: "trash",
-              onClick: () => {
-                openConfirmDrawer("delete", void 0, [row]);
-              }
-            });
-          }
-          if (rowActionTypes.includes("view") && !disabledActions?.view) {
-            menuOptions.push({
-              label: labels?.viewButton || "Ver",
-              icon: "eye",
-              onClick: async () => {
-                if (onView) {
-                  await onView([row]);
-                }
-                openFormDrawer("view", row);
-              }
-            });
-          }
-          rowActions?.forEach((action) => {
-            if (action.show && !action.show(row)) return;
-            menuOptions.push({
-              label: action.label,
-              icon: action.icon,
-              onClick: () => {
-                if (action.drawerId) {
-                  openCustomDrawer(action.drawerId, row);
-                }
-                if (action.onClick) {
-                  action.onClick(row);
-                }
-              },
-              disabled: action.disabled ? action.disabled(row) : false
-            });
-          });
+          const menuOptions = buildRowOptions(row);
           if (menuOptions.length === 0) return null;
           return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ jsx(
             DropdownMenu,
@@ -13341,20 +13567,7 @@ function Crud({
       }
     };
     return [...baseTableColumns, actionsColumn];
-  }, [
-    baseTableColumns,
-    showRowActions,
-    rowActionTypes,
-    disabledActions,
-    labels,
-    onEdit,
-    onDelete,
-    onView,
-    rowActions,
-    openFormDrawer,
-    openConfirmDrawer,
-    openCustomDrawer
-  ]);
+  }, [baseTableColumns, showRowActions, buildRowOptions]);
   const formFields = useMemo(() => {
     return mapFieldsToFormFields(renderByFields, formMode);
   }, [renderByFields, formMode]);
@@ -13551,6 +13764,10 @@ function Crud({
         return "\xBFEst\xE1 seguro que desea realizar esta acci\xF3n?";
     }
   };
+  const [refContenedor, anchoPropio] = useAnchoPropio();
+  const enTarjetas = layout === "cards" || // Mientras no se ha medido (`null`) se mantiene la tabla: pintar tarjetas y saltar a tabla un
+  // instante después es el parpadeo que se acaba de quitar en otro sitio.
+  layout === "auto" && anchoPropio !== null && anchoPropio < cardsBelow;
   const crudClasses = [
     `${COMPONENT_PREFIX}crud`,
     loading && `${COMPONENT_PREFIX}crud--loading`,
@@ -13567,24 +13784,43 @@ function Crud({
         showLabels: false
       }
     ) }),
-    !formOnly && /* @__PURE__ */ jsx("div", { className: `${COMPONENT_PREFIX}crud__table`, children: /* @__PURE__ */ jsx(
-      Table,
+    !formOnly && /* @__PURE__ */ jsxs(
+      "div",
       {
-        dataSource,
-        columns: tableColumns,
-        selectable: showActionBar && actionBarMode === "full",
-        selectedRowKeys: selectedKeys,
-        onSelectionChange: handleSelectionChange,
-        rowKey: getRowKey,
-        loading,
-        height: tableHeight,
-        scroll: tableScroll,
-        compact: size === "small",
-        bordered: true,
-        hoverable: true,
-        emptyText: labels?.emptyText
+        className: `${COMPONENT_PREFIX}crud__data${enTarjetas ? ` ${COMPONENT_PREFIX}crud__data--cards` : ""}`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${COMPONENT_PREFIX}crud__table`, ref: refContenedor, children: enTarjetas ? /* @__PURE__ */ jsx(
+            CardList,
+            {
+              fields: renderByFields,
+              rows: dataSource,
+              rowKey: getRowKey,
+              buildOptions: showRowActions ? buildRowOptions : void 0,
+              loading,
+              emptyText: labels?.emptyText
+            }
+          ) : /* @__PURE__ */ jsx(
+            Table,
+            {
+              dataSource,
+              columns: tableColumns,
+              selectable: showActionBar && actionBarMode === "full",
+              selectedRowKeys: selectedKeys,
+              onSelectionChange: handleSelectionChange,
+              rowKey: getRowKey,
+              loading,
+              height: tableHeight,
+              scroll: tableScroll,
+              compact: size === "small",
+              bordered: true,
+              hoverable: true,
+              emptyText: labels?.emptyText
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ScrollToEnd, { hostRef: refContenedor, dep: `${enTarjetas}:${dataSource.length}:${loading}` })
+        ]
       }
-    ) }),
+    ),
     !formOnly && !filters.all_data && !hidePagination && /* @__PURE__ */ jsx("div", { className: `${COMPONENT_PREFIX}crud__pagination`, children: /* @__PURE__ */ jsx(
       Pagination,
       {
@@ -13649,6 +13885,7 @@ function Crud({
         position: "right",
         size: "responsive",
         responsivePercentage: 30,
+        mobileSheet: true,
         className: `${COMPONENT_PREFIX}crud__confirm-drawer`,
         children: /* @__PURE__ */ jsxs("div", { className: `${COMPONENT_PREFIX}crud__confirm-content`, children: [
           /* @__PURE__ */ jsx("p", { className: `${COMPONENT_PREFIX}crud__confirm-message`, children: getConfirmMessage() }),
@@ -13697,6 +13934,60 @@ function Crud({
 }
 Crud.displayName = "Crud";
 
+const CLASS$a = "px-chat-reactive-crud__chat-link";
+function Burbuja() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 18,
+      height: 18,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    }
+  );
+}
+const ChatLinkCell = ({
+  targets,
+  eventBus
+}) => {
+  if (targets.length === 0) return null;
+  const abrir = (id) => eventBus?.emit(CHAT_EVENT.OPEN_CHAT, { chatId: id, closed: false });
+  if (targets.length === 1) {
+    const t = targets[0];
+    const texto = t.label ? `Abrir chat ${t.label}` : "Abrir chat";
+    return /* @__PURE__ */ jsx("button", { type: "button", className: CLASS$a, "aria-label": texto, title: texto, onClick: () => abrir(t.id), children: /* @__PURE__ */ jsx(Burbuja, {}) });
+  }
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      options: targets.map((t) => ({
+        label: t.label ?? "Chat",
+        icon: "message-square",
+        onClick: () => abrir(t.id)
+      })),
+      trigger: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: CLASS$a,
+          "aria-label": `Abrir chat (${targets.length} conversaciones)`,
+          title: "Abrir chat",
+          children: /* @__PURE__ */ jsx(Burbuja, {})
+        }
+      ),
+      position: "bottom-left",
+      usePortal: true
+    }
+  );
+};
+ChatLinkCell.displayName = "ChatLinkCell";
+
 function buildCrudYupSchema(fields) {
   const shape = {};
   for (const f of fields) {
@@ -13777,8 +14068,21 @@ function unwrap$3(raw) {
   }
   return raw;
 }
-async function loadOptions(eventBus, ep) {
-  const raw = await fetchViaEventBus(eventBus, ep.service, ep.url, ep.method, ep.body ?? {});
+function resolveBody(body, ctx) {
+  if (!body) return {};
+  if (!ctx) return body;
+  return Object.fromEntries(
+    Object.entries(body).map(([k, v]) => {
+      if (typeof v === "string" && v.startsWith("$")) {
+        const key = v.slice(1);
+        return [k, key in ctx ? ctx[key] : v];
+      }
+      return [k, v];
+    })
+  );
+}
+async function loadOptions(eventBus, ep, ctx) {
+  const raw = await fetchViaEventBus(eventBus, ep.service, ep.url, ep.method, resolveBody(ep.body, ctx));
   let data = unwrap$3(raw);
   if (ep.response_path && data && typeof data === "object" && !Array.isArray(data)) {
     data = data[ep.response_path];
@@ -13790,6 +14094,30 @@ async function loadOptions(eventBus, ep) {
   }));
 }
 
+const esTextoUtil = (v) => typeof v === "string" && v.trim().length > 0;
+const buscarEnCuerpo = (cuerpo) => {
+  if (!cuerpo || typeof cuerpo !== "object") return null;
+  const c = cuerpo;
+  const detalle = c.detail;
+  if (esTextoUtil(detalle)) return detalle;
+  if (detalle && typeof detalle === "object") {
+    const d = detalle;
+    if (esTextoUtil(d.message)) return d.message;
+  }
+  if (esTextoUtil(c.message)) return c.message;
+  return null;
+};
+const ES_JERGA_HTTP = /^Request failed with status code \d+$/i;
+const mensajeDeError = (e, respaldo) => {
+  const err = e;
+  const delServidor = buscarEnCuerpo(err?.response?.data);
+  if (delServidor) return delServidor;
+  if (esTextoUtil(err?.message) && !ES_JERGA_HTTP.test(err.message.trim())) {
+    return err.message;
+  }
+  return respaldo;
+};
+
 const REFRESH_INTERVAL_MS = 2e4;
 function unwrap$2(raw) {
   if (raw && typeof raw === "object" && "response" in raw) {
@@ -13830,7 +14158,7 @@ function useReactiveCrud(config, eventBus) {
   const loadList = useCallback(async () => {
     if (!eventBus) return;
     const myReq = ++reqIdRef.current;
-    setState((s) => ({ ...s, loading: true, error: null }));
+    setState((s) => s.rows.length === 0 ? { ...s, loading: true, error: null } : { ...s, error: null });
     try {
       const { service, url, method } = config.data.list;
       const raw = await fetchViaEventBus(eventBus, service, url, method, {
@@ -13854,7 +14182,7 @@ function useReactiveCrud(config, eventBus) {
       if (myReq === reqIdRef.current) setState({ rows, total, loading: false, error: null });
     } catch (e) {
       if (myReq === reqIdRef.current) {
-        setState((s) => ({ ...s, loading: false, error: e instanceof Error ? e.message : "Error al cargar" }));
+        setState((s) => ({ ...s, loading: false, error: mensajeDeError(e, "Error al cargar") }));
       }
     }
   }, [eventBus, config.data.list, skip, pageSize, filters]);
@@ -13898,7 +14226,7 @@ function useReactiveCrud(config, eventBus) {
         }
         await loadList();
       } catch (e) {
-        setActionError(e instanceof Error ? e.message : "La acci\xF3n no se pudo completar");
+        setActionError(mensajeDeError(e, "La acci\xF3n no se pudo completar"));
         throw e;
       }
     },
@@ -14081,7 +14409,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
     void Promise.all(
       toLoad.map(async (f) => {
         try {
-          const opts = await loadOptions(eventBus, f.optionsEndpoint);
+          const opts = await loadOptions(eventBus, f.optionsEndpoint, { ...row, id: row[idField] });
           return [f.name, opts];
         } catch {
           return [f.name, []];
@@ -14159,7 +14487,7 @@ function ActionFormDrawer({ action, row, idField, eventBus, onExecute, onClose }
       await onExecute(ctx);
       onClose();
     } catch (e) {
-      setFormError(e instanceof Error ? e.message : "La acci\xF3n no se pudo completar");
+      setFormError(mensajeDeError(e, "La acci\xF3n no se pudo completar"));
     } finally {
       setSubmitting(false);
     }
@@ -14770,6 +15098,7 @@ function unwrap$1(raw) {
   }
   return raw;
 }
+const DETALLE_OCULTOS = /* @__PURE__ */ new Set(["LOCATION", "CHAT_LINK", "FILE"]);
 function DetailDrawer({ row, config, eventBus, onClose, loadedOptions }) {
   const detail = config.detail;
   const [files, setFiles] = useState([]);
@@ -14868,7 +15197,7 @@ function DetailDrawer({ row, config, eventBus, onClose, loadedOptions }) {
     }
   };
   return /* @__PURE__ */ jsx(Drawer$1, { isOpen: true, onClose, title, placement: "right", children: /* @__PURE__ */ jsxs("div", { className: "px-chat-reactive-crud-detail", children: [
-    /* @__PURE__ */ jsx("dl", { className: "px-chat-reactive-crud-detail__fields", children: config.fields.map((f) => {
+    /* @__PURE__ */ jsx("dl", { className: "px-chat-reactive-crud-detail__fields", children: config.fields.filter((f) => !DETALLE_OCULTOS.has(f.moleculeType)).map((f) => {
       const { node, copyText } = renderField(f);
       return /* @__PURE__ */ jsxs("div", { className: "px-chat-reactive-crud-detail__row", children: [
         /* @__PURE__ */ jsx("dt", { className: "px-chat-reactive-crud-detail__label", children: f.label }),
@@ -15530,35 +15859,13 @@ const LocationField = ({
 };
 LocationField.displayName = "LocationField";
 
-function chatLinkButton(id, eventBus, label) {
-  return createElement(
-    "button",
-    {
-      key: label ?? id,
-      type: "button",
-      className: "px-chat-reactive-crud__chat-link",
-      "aria-label": label ? `Abrir chat ${label}` : "Abrir chat",
-      title: label ?? "Abrir chat",
-      onClick: () => eventBus?.emit(CHAT_EVENT.OPEN_CHAT, { chatId: id, closed: false })
-    },
-    createElement(
-      "svg",
-      { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
-      createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-    ),
-    label ? createElement("span", { className: "px-chat-reactive-crud__chat-link-label" }, label) : null
-  );
-}
 function chatLinkFormatter(field, eventBus) {
   const sources = field.chats;
   return (value, row) => {
     const r = row;
-    if (sources && sources.length) {
-      const btns = sources.map((s) => ({ id: r ? r[s.field] : void 0, label: s.label })).filter((s) => s.id != null && s.id !== "").map((s) => chatLinkButton(String(s.id), eventBus, s.label));
-      return btns.length ? createElement("div", { className: "px-chat-reactive-crud__chat-links" }, btns) : null;
-    }
-    const id = value != null && value !== "" ? String(value) : "";
-    return id ? chatLinkButton(id, eventBus) : null;
+    const targets = sources?.length ? sources.map((s) => ({ id: r ? r[s.field] : void 0, label: s.label })).filter((s) => s.id != null && s.id !== "").map((s) => ({ id: String(s.id), label: s.label })) : value != null && value !== "" ? [{ id: String(value) }] : [];
+    if (!targets.length) return null;
+    return createElement(ChatLinkCell, { targets, eventBus });
   };
 }
 function toRenderField(f, loaded, eventBus, mapsApiKey) {
@@ -15597,6 +15904,8 @@ function toRenderField(f, loaded, eventBus, mapsApiKey) {
     // FILE/CHAT_LINK solo son columnas → INPUT (el render lo define formatValue/build).
     moleculeType: f.moleculeType === "FILE" || isChatLink ? "INPUT" : f.moleculeType,
     showInTable: f.showInTable,
+    summary: f.summary,
+    // SPEC-093
     showInForm: f.showInForm,
     showInModes: f.showInModes,
     required: f.required,
@@ -15681,6 +15990,10 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
       icon: a.icon,
       show: (row) => matchesVisibleWhen(a, row),
       disabled: (row) => matchesDisabledWhen(a, row),
+      // SPEC-090 T3 — el `disabledReason` de la config ya existía, pero solo lo pintaba el panel
+      // del chat; en la tabla el botón se apagaba mudo. Afecta también al de la inspección
+      // («Falta el comprobante de pago del cliente», SPEC-066 T7), que tampoco se veía aquí.
+      disabledReason: (row) => matchesDisabledWhen(a, row) ? a.disabledReason : void 0,
       onClick: (row) => a.form ? setActiveAction({ action: a, row }) : crud.runEndpoints(a.endpoints ?? [a.endpoint], { ...row, id: row[config.idField] })
     }));
     if (config.detail) {
@@ -15689,6 +16002,7 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
         icon: "eye",
         show: () => true,
         disabled: () => false,
+        disabledReason: () => void 0,
         onClick: (row) => setDetailRow(row)
       });
     }
@@ -15721,6 +16035,8 @@ function ReactiveCrud({ config, eventBus, autoOpenCreate, prefill, onCreated, on
         loading: crud.loading,
         filters: { skip: crud.skip, limit: crud.pageSize, all_data: false, filters: crud.filters },
         tableScroll: config.tableScroll,
+        layout: config.layout,
+        cardsBelow: config.cardsBelow,
         validationSchema,
         getRowKey: (row) => String(row[config.idField]),
         onCreate: config.data.create ? async (rows) => {
@@ -15990,12 +16306,18 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
           "button",
           {
             type: "button",
-            className: `px-chat-crud-item__action${a.intent === "danger" ? " is-danger" : ""}`,
+            className: [
+              "px-chat-crud-item__action",
+              a.intent === "danger" ? "is-danger" : "",
+              disabled && a.disabledReason ? "is-con-motivo" : ""
+            ].filter(Boolean).join(" "),
             disabled,
-            title: disabled ? a.disabledReason : void 0,
             onClick: () => a.form ? setActiveAction({ action: a, row }) : crud.runEndpoints(a.endpoints ?? [a.endpoint], { ...row, id: row[config.idField] }),
             children: [
-              /* @__PURE__ */ jsx("span", { children: a.label }),
+              /* @__PURE__ */ jsxs("span", { className: "px-chat-crud-item__action-texts", children: [
+                /* @__PURE__ */ jsx("span", { children: a.label }),
+                disabled && a.disabledReason && /* @__PURE__ */ jsx("span", { className: "px-chat-crud-item__action-reason", children: a.disabledReason })
+              ] }),
               done && /* @__PURE__ */ jsx(Icon$1, { type: "check-circle", width: 18, height: 18, className: "px-chat-crud-item__done", "aria-label": "Hecho" })
             ]
           },
@@ -16630,6 +16952,7 @@ function ChatNavigator({ config, eventBus }) {
   useEffect(() => {
     void load();
   }, [load]);
+  const listaRef = useRef(null);
   const loadRef = useRef(load);
   loadRef.current = load;
   useEffect(() => {
@@ -16677,8 +17000,6 @@ function ChatNavigator({ config, eventBus }) {
   };
   const page = Math.floor(skip / pageSize) + 1;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const canPrev = skip > 0;
-  const canNext = skip + pageSize < total;
   return /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator", children: [
     config.search && /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__search", children: [
       /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "px-chat-chat-navigator__search-icon", children: [
@@ -16758,143 +17079,126 @@ function ChatNavigator({ config, eventBus }) {
     loading && /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__state", children: "Cargando conversaciones\u2026" }),
     error && !loading && /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__state px-chat-chat-navigator__state--error", children: error }),
     !loading && !error && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__state", children: labels.emptyText ?? "Sin conversaciones" }),
-    /* @__PURE__ */ jsx("ul", { className: "px-chat-chat-navigator__list", children: items.map((item) => {
-      const isRenaming = renamingId === item.id;
-      const displayTitle = item.title?.trim() || fallbackTitle(item);
-      return /* @__PURE__ */ jsxs("li", { className: "px-chat-chat-navigator__item", children: [
-        isRenaming ? /* @__PURE__ */ jsx(
-          "form",
-          {
-            className: "px-chat-chat-navigator__rename",
-            onSubmit: (e) => {
-              e.preventDefault();
-              void submitRename(item.id);
-            },
-            children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                autoFocus: true,
-                className: "px-chat-chat-navigator__rename-input",
-                value: renameValue,
-                onChange: (e) => setRenameValue(e.target.value),
-                onBlur: () => void submitRename(item.id),
-                "aria-label": labels.renameTitle ?? "Nuevo t\xEDtulo"
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsxs("button", { type: "button", className: "px-chat-chat-navigator__open", onClick: () => open(item), children: [
-          /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__title", children: [
-            displayTitle,
-            item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "px-chat-chat-navigator__badge-count",
-                "aria-label": `${item.unread_proactive_count} mensajes nuevos sin leer`,
-                title: `${item.unread_proactive_count} sin leer`,
-                children: item.unread_proactive_count >= 100 ? "100+" : item.unread_proactive_count
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__meta", children: [
-            item.agent_name ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
-            /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(item.updated_date) }),
-            (() => {
-              const opt = item.rol_code ? (config.originActorOptions ?? []).find((o) => o.value === item.rol_code) : void 0;
-              if (!opt) return null;
-              const c = opt.color;
-              const nameField = config.originActorNameField;
-              const allyName = nameField ? item[nameField] : void 0;
-              const label = allyName ? String(allyName) : opt.label;
-              return /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "px-chat-chat-navigator__origin-badge",
-                  style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
-                  title: label,
-                  children: label
-                }
-              );
-            })(),
-            (() => {
-              const field = config.tagField;
-              if (!field) return null;
-              const value = item[field];
-              if (!value) return null;
-              const opt = (config.tagOptions ?? []).find((o) => o.value === String(value));
-              if (!opt) return null;
-              const c = opt.color;
-              return /* @__PURE__ */ jsx(
-                "span",
+    /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__list-wrap", ref: listaRef, children: [
+      /* @__PURE__ */ jsx("ul", { className: "px-chat-chat-navigator__list", children: items.map((item) => {
+        const isRenaming = renamingId === item.id;
+        const displayTitle = item.title?.trim() || fallbackTitle(item);
+        return /* @__PURE__ */ jsxs("li", { className: "px-chat-chat-navigator__item", children: [
+          isRenaming ? /* @__PURE__ */ jsx(
+            "form",
+            {
+              className: "px-chat-chat-navigator__rename",
+              onSubmit: (e) => {
+                e.preventDefault();
+                void submitRename(item.id);
+              },
+              children: /* @__PURE__ */ jsx(
+                "input",
                 {
-                  className: "px-chat-chat-navigator__origin-badge",
-                  style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
-                  title: opt.label,
-                  children: opt.label
+                  autoFocus: true,
+                  className: "px-chat-chat-navigator__rename-input",
+                  value: renameValue,
+                  onChange: (e) => setRenameValue(e.target.value),
+                  onBlur: () => void submitRename(item.id),
+                  "aria-label": labels.renameTitle ?? "Nuevo t\xEDtulo"
                 }
-              );
-            })(),
-            item.service_status ? (() => {
-              const opt = (config.serviceStatusOptions ?? []).find(
-                (o) => o.value === item.service_status
-              );
-              const c = opt?.color;
-              return /* @__PURE__ */ jsx(
+              )
+            }
+          ) : /* @__PURE__ */ jsxs("button", { type: "button", className: "px-chat-chat-navigator__open", onClick: () => open(item), children: [
+            /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__title", children: [
+              displayTitle,
+              item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: "px-chat-chat-navigator__service-badge",
-                  style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
-                  children: opt?.label ?? item.service_status
+                  className: "px-chat-chat-navigator__badge-count",
+                  "aria-label": `${item.unread_proactive_count} mensajes nuevos sin leer`,
+                  title: `${item.unread_proactive_count} sin leer`,
+                  children: item.unread_proactive_count >= 100 ? "100+" : item.unread_proactive_count
                 }
-              );
-            })() : null,
-            item.closed ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__badge", children: labels.closedBadge ?? "Cerrado" }) : null
-          ] })
-        ] }),
-        config.data.rename && !isRenaming && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "px-chat-chat-navigator__rename-btn",
-            "aria-label": "Renombrar",
-            title: "Renombrar",
-            onClick: () => startRename(item),
-            children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("path", { d: "M12 20h9" }),
-              /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" })
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__meta", children: [
+              item.agent_name ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
+              /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(item.updated_date) }),
+              (() => {
+                const opt = item.rol_code ? (config.originActorOptions ?? []).find((o) => o.value === item.rol_code) : void 0;
+                if (!opt) return null;
+                const c = opt.color;
+                const nameField = config.originActorNameField;
+                const allyName = nameField ? item[nameField] : void 0;
+                const label = allyName ? String(allyName) : opt.label;
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "px-chat-chat-navigator__origin-badge",
+                    style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
+                    title: label,
+                    children: label
+                  }
+                );
+              })(),
+              (() => {
+                const field = config.tagField;
+                if (!field) return null;
+                const value = item[field];
+                if (!value) return null;
+                const opt = (config.tagOptions ?? []).find((o) => o.value === String(value));
+                if (!opt) return null;
+                const c = opt.color;
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "px-chat-chat-navigator__origin-badge",
+                    style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
+                    title: opt.label,
+                    children: opt.label
+                  }
+                );
+              })(),
+              item.service_status ? (() => {
+                const opt = (config.serviceStatusOptions ?? []).find(
+                  (o) => o.value === item.service_status
+                );
+                const c = opt?.color;
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "px-chat-chat-navigator__service-badge",
+                    style: c ? { color: c, background: `${c}22`, borderColor: `${c}55` } : void 0,
+                    children: opt?.label ?? item.service_status
+                  }
+                );
+              })() : null,
+              item.closed ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__badge", children: labels.closedBadge ?? "Cerrado" }) : null
             ] })
-          }
-        )
-      ] }, item.id);
-    }) }),
-    total > pageSize && /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__pager", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "px-chat-chat-navigator__pager-btn",
-          disabled: !canPrev,
-          onClick: () => setSkip(Math.max(0, skip - pageSize)),
-          "aria-label": "P\xE1gina anterior",
-          children: "\u2039"
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "px-chat-chat-navigator__pager-info", children: [
-        page,
-        " / ",
-        totalPages
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "px-chat-chat-navigator__pager-btn",
-          disabled: !canNext,
-          onClick: () => setSkip(skip + pageSize),
-          "aria-label": "P\xE1gina siguiente",
-          children: "\u203A"
-        }
-      )
+          ] }),
+          config.data.rename && !isRenaming && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "px-chat-chat-navigator__rename-btn",
+              "aria-label": "Renombrar",
+              title: "Renombrar",
+              onClick: () => startRename(item),
+              children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M12 20h9" }),
+                /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" })
+              ] })
+            }
+          )
+        ] }, item.id);
+      }) }),
+      /* @__PURE__ */ jsx(ScrollToEnd, { hostRef: listaRef, selector: ".px-chat-chat-navigator__list", dep: `${items.length}:${loading}` })
     ] }),
+    total > pageSize && /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__pager", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        current: page,
+        total: totalPages,
+        onChange: (p) => setSkip((p - 1) * pageSize),
+        showTotal: false
+      }
+    ) }),
     config.advancedFilters?.length ? /* @__PURE__ */ jsx(Drawer$1, { isOpen: advOpen, onClose: () => setAdvOpen(false), title: "Filtros avanzados", children: /* @__PURE__ */ jsx(
       Filter,
       {
@@ -24237,4 +24541,4 @@ function buildBreadcrumbPath(items, targetKey, currentPath = []) {
   return [];
 }
 
-export { BottomSheet, CHAT_CONFIG_DEFAULTS, CHAT_EVENT, ICON_TYPES as CHAT_ICON_TYPES, Chat, AssistantMessage as ChatAssistantMessage, AssistantThinkingIndicator as ChatAssistantThinkingIndicator, AttachmentPreview as ChatAttachmentPreview, Avatar as ChatAvatar, Button$1 as ChatButton, ChatConfigProvider, DateDivider as ChatDateDivider, FileViewer as ChatFileViewer, ChatFloatingActions, FullscreenViewer as ChatFullscreenViewer, ChatHeader as ChatHeaderComponent, Icon$1 as ChatIcon, Input$2 as ChatInput, ChatInput as ChatInputComponent, Link as ChatLink, Loader$1 as ChatLoader, Logo as ChatLogo, MessageStatus as ChatMessageStatus, Modal as ChatModal, ChatNavigator, Select$2 as ChatSelect, SelectMenu as ChatSelectMenu, StructuredContent as ChatStructuredContent, Text as ChatText, Textarea as ChatTextarea, UserAttachments as ChatUserAttachments, UserMessage as ChatUserMessage, ChatWidget, FileField, BADGE_VARIANTS as LUMI_BADGE_VARIANTS, DEFAULT_TITLES as LUMI_DEFAULT_TITLES, LUMI_ICON_TYPES, LiveIndicator, LocationField, ActionBar as LumiActionBar, Badge as LumiBadge, Base as LumiBase, BaseNavbar as LumiBaseNavbar, BaseWorkspace as LumiBaseWorkspace, Breadcrumb as LumiBreadcrumb, BreadcrumbItem as LumiBreadcrumbItem, BreadcrumbSeparator as LumiBreadcrumbSeparator, Button as LumiButton, Calendar as LumiCalendar, Card as LumiCard, Checkbox$1 as LumiCheckbox, Crud as LumiCrud, CurrencyDisplay as LumiCurrencyDisplay, Dashboard as LumiDashboard, DashboardNavbar as LumiDashboardNavbar, DashboardSidebar as LumiDashboardSidebar, DashboardWorkspace as LumiDashboardWorkspace, DateDisplay as LumiDateDisplay, DateInput$1 as LumiDateInput, Drawer as LumiDrawer, DropdownMenu as LumiDropdownMenu, DynamicForm as LumiDynamicForm, Filter as LumiFilter, FilterRow as LumiFilterRow, Checkbox as LumiFormCheckbox, DateInput as LumiFormDateInput, FormDrawer as LumiFormDrawer, Input as LumiFormInput, Select as LumiFormSelect, TimeInput as LumiFormTimeInput, Icon as LumiIcon, Input$1 as LumiInput, Loader as LumiLoader, Menu as LumiMenu, MenuItem as LumiMenuItem, MenuItemGroup as LumiMenuItemGroup, Notification as LumiNotification, Pagination as LumiPagination, Popover as LumiPopover, QRCode as LumiQRCode, Select$1 as LumiSelect, StepIndicator as LumiStepIndicator, Stepper as LumiStepper, SubMenu as LumiSubMenu, Table as LumiTable, Tabs as LumiTabs, TextArea as LumiTextArea, TimeInput$1 as LumiTimeInput, Tooltip as LumiTooltip, MapView, ReactiveCrud, ServiceShortcuts, ServicesMap, SessionExpiryPrompt, UserTools, chatEventBus, createDeepPropertySubscriber, createEventBus, createStore, createStoreMerger, deepMerge, getLastFleetSnapshot, setLastFleetSnapshot, useChatConfig };
+export { BottomSheet, CHAT_CONFIG_DEFAULTS, CHAT_EVENT, ICON_TYPES as CHAT_ICON_TYPES, Chat, AssistantMessage as ChatAssistantMessage, AssistantThinkingIndicator as ChatAssistantThinkingIndicator, AttachmentPreview as ChatAttachmentPreview, Avatar as ChatAvatar, Button$1 as ChatButton, ChatConfigProvider, DateDivider as ChatDateDivider, FileViewer as ChatFileViewer, ChatFloatingActions, FullscreenViewer as ChatFullscreenViewer, ChatHeader as ChatHeaderComponent, Icon$1 as ChatIcon, Input$2 as ChatInput, ChatInput as ChatInputComponent, Link as ChatLink, Loader$1 as ChatLoader, Logo as ChatLogo, MessageStatus as ChatMessageStatus, Modal as ChatModal, ChatNavigator, Select$2 as ChatSelect, SelectMenu as ChatSelectMenu, StructuredContent as ChatStructuredContent, Text as ChatText, Textarea as ChatTextarea, UserAttachments as ChatUserAttachments, UserMessage as ChatUserMessage, ChatWidget, FileField, BADGE_VARIANTS as LUMI_BADGE_VARIANTS, DEFAULT_TITLES as LUMI_DEFAULT_TITLES, LUMI_ICON_TYPES, LiveIndicator, LocationField, ActionBar as LumiActionBar, Badge as LumiBadge, Base as LumiBase, BaseNavbar as LumiBaseNavbar, BaseWorkspace as LumiBaseWorkspace, Breadcrumb as LumiBreadcrumb, BreadcrumbItem as LumiBreadcrumbItem, BreadcrumbSeparator as LumiBreadcrumbSeparator, Button as LumiButton, Calendar as LumiCalendar, Card as LumiCard, Checkbox$1 as LumiCheckbox, Crud as LumiCrud, CurrencyDisplay as LumiCurrencyDisplay, Dashboard as LumiDashboard, DashboardNavbar as LumiDashboardNavbar, DashboardSidebar as LumiDashboardSidebar, DashboardWorkspace as LumiDashboardWorkspace, DateDisplay as LumiDateDisplay, DateInput$1 as LumiDateInput, Drawer as LumiDrawer, DropdownMenu as LumiDropdownMenu, DynamicForm as LumiDynamicForm, FieldValue as LumiFieldValue, Filter as LumiFilter, FilterRow as LumiFilterRow, Checkbox as LumiFormCheckbox, DateInput as LumiFormDateInput, FormDrawer as LumiFormDrawer, Input as LumiFormInput, Select as LumiFormSelect, TimeInput as LumiFormTimeInput, Icon as LumiIcon, Input$1 as LumiInput, Loader as LumiLoader, Menu as LumiMenu, MenuItem as LumiMenuItem, MenuItemGroup as LumiMenuItemGroup, Notification as LumiNotification, Pagination as LumiPagination, Popover as LumiPopover, QRCode as LumiQRCode, RecordCard as LumiRecordCard, Select$1 as LumiSelect, StepIndicator as LumiStepIndicator, Stepper as LumiStepper, SubMenu as LumiSubMenu, Table as LumiTable, Tabs as LumiTabs, TextArea as LumiTextArea, TimeInput$1 as LumiTimeInput, Tooltip as LumiTooltip, MapView, ReactiveCrud, ServiceShortcuts, ServicesMap, SessionExpiryPrompt, UserTools, chatEventBus, createDeepPropertySubscriber, createEventBus, createStore, createStoreMerger, deepMerge, getLastFleetSnapshot, setLastFleetSnapshot, useChatConfig };