pixelon 0.3.77 → 0.3.78

package/dist/index.js

@@ -4008,13 +4008,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;
   }
@@ -4064,7 +4064,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) => {
@@ -4518,7 +4518,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) {
@@ -4793,7 +4793,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(
@@ -10886,6 +10886,7 @@ const Drawer = ({
   size = DRAWER_SIZES.RESPONSIVE,
   fixedSize = 400,
   responsivePercentage = 80,
+  mobileSheet = false,
   title,
   headerExtra,
   showCloseButton = true,
@@ -10968,11 +10969,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) {
@@ -13079,36 +13082,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 React.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 React.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 React.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 React.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,
@@ -13139,10 +13151,201 @@ function mapFieldsToFormFields(fields, mode) {
   }));
 }
 
+const CLASS$e = `${COMPONENT_PREFIX}field-value`;
+const FieldValue = ({
+  label,
+  children,
+  layout = "inline",
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [CLASS$e, `${CLASS$e}--${layout}`, className].filter(Boolean).join(" "), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${CLASS$e}__label`, children: label }),
+  /* @__PURE__ */ jsxRuntime.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 = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [CLASS$d, open ? `${CLASS$d}--open` : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `${CLASS$d}__header`,
+        "aria-expanded": open,
+        "aria-controls": cuerpoId,
+        "aria-label": ariaLabel,
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${CLASS$d}__heading`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${CLASS$d}__title`, children: title }),
+            summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${CLASS$d}__summary`, children: summary })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icon,
+            {
+              type: open ? "chevron-up" : "chevron-down",
+              width: 18,
+              height: 18,
+              className: `${CLASS$d}__chevron`,
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS$d}__body`, id: cuerpoId, children: [
+      children,
+      actions && /* @__PURE__ */ jsxRuntime.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] = React.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__ */ jsxRuntime.jsx("div", { className: `${CLASS$c}__estado`, children: "Cargando..." });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS$c}__estado`, children: emptyText });
+  }
+  const [principal, ...secundarios] = resumen;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: secundarios.map((f) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderFieldValue(f, row) }, f.key)) }) : void 0,
+        actions: opciones.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: opciones.map((o) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: o.label }),
+              o.disabled && o.disabledReason && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${CLASS$c}__motivo`, children: o.disabledReason })
+            ]
+          },
+          o.label
+        )) }) : void 0,
+        children: cuerpo.map(
+          (f) => hasFieldValue(f, row) ? /* @__PURE__ */ jsxRuntime.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] = React.useState(false);
+  const scrollerRef = React.useRef(null);
+  React.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 = React.useCallback(() => {
+    const s = scrollerRef.current;
+    if (!s) return;
+    s.scrollTo({ top: s.scrollHeight, behavior: "smooth" });
+  }, []);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: CLASS$b, onClick: alFinal, "aria-label": label, title: label, children: /* @__PURE__ */ jsxRuntime.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 = React.useRef(null);
+  const [ancho, setAncho] = React.useState(null);
+  React.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] = React.useState(false);
   React.useEffect(() => {
@@ -13182,6 +13385,8 @@ function Crud({
   defaultFilters,
   tableHeight,
   tableScroll,
+  layout = "auto",
+  cardsBelow = 768,
   hidePagination = false,
   formDrawerWidth = "80%",
   formColumns = 2,
@@ -13286,6 +13491,69 @@ function Crud({
     }
     return columns;
   }, [renderByFields, isMobile, tableScroll?.x]);
+  const buildRowOptions = React.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 = React.useMemo(() => {
     if (!showRowActions) return baseTableColumns;
     const actionsColumn = {
@@ -13297,55 +13565,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,
-              // SPEC-090 T3 — una acción apagada sin motivo es indistinguible de una rota.
-              disabledReason: action.disabledReason?.(row)
-            });
-          });
+          const menuOptions = buildRowOptions(row);
           if (menuOptions.length === 0) return null;
           return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             DropdownMenu,
@@ -13368,20 +13588,7 @@ function Crud({
       }
     };
     return [...baseTableColumns, actionsColumn];
-  }, [
-    baseTableColumns,
-    showRowActions,
-    rowActionTypes,
-    disabledActions,
-    labels,
-    onEdit,
-    onDelete,
-    onView,
-    rowActions,
-    openFormDrawer,
-    openConfirmDrawer,
-    openCustomDrawer
-  ]);
+  }, [baseTableColumns, showRowActions, buildRowOptions]);
   const formFields = React.useMemo(() => {
     return mapFieldsToFormFields(renderByFields, formMode);
   }, [renderByFields, formMode]);
@@ -13578,6 +13785,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`,
@@ -13594,24 +13805,43 @@ function Crud({
         showLabels: false
       }
     ) }),
-    !formOnly && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX}crud__table`, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Table$1,
+    !formOnly && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX}crud__table`, ref: refContenedor, children: enTarjetas ? /* @__PURE__ */ jsxRuntime.jsx(
+            CardList,
+            {
+              fields: renderByFields,
+              rows: dataSource,
+              rowKey: getRowKey,
+              buildOptions: showRowActions ? buildRowOptions : void 0,
+              loading,
+              emptyText: labels?.emptyText
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            Table$1,
+            {
+              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__ */ jsxRuntime.jsx(ScrollToEnd, { hostRef: refContenedor, dep: `${enTarjetas}:${dataSource.length}:${loading}` })
+        ]
       }
-    ) }),
+    ),
     !formOnly && !filters.all_data && !hidePagination && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${COMPONENT_PREFIX}crud__pagination`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Pagination,
       {
@@ -13676,6 +13906,7 @@ function Crud({
         position: "right",
         size: "responsive",
         responsivePercentage: 30,
+        mobileSheet: true,
         className: `${COMPONENT_PREFIX}crud__confirm-drawer`,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${COMPONENT_PREFIX}crud__confirm-content`, children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${COMPONENT_PREFIX}crud__confirm-message`, children: getConfirmMessage() }),
@@ -13724,6 +13955,60 @@ function Crud({
 }
 Crud.displayName = "Crud";
 
+const CLASS$a = "px-chat-reactive-crud__chat-link";
+function Burbuja() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { type: "button", className: CLASS$a, "aria-label": texto, title: texto, onClick: () => abrir(t.id), children: /* @__PURE__ */ jsxRuntime.jsx(Burbuja, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu,
+    {
+      options: targets.map((t) => ({
+        label: t.label ?? "Chat",
+        icon: "message-square",
+        onClick: () => abrir(t.id)
+      })),
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: CLASS$a,
+          "aria-label": `Abrir chat (${targets.length} conversaciones)`,
+          title: "Abrir chat",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Burbuja, {})
+        }
+      ),
+      position: "bottom-left",
+      usePortal: true
+    }
+  );
+};
+ChatLinkCell.displayName = "ChatLinkCell";
+
 function buildCrudYupSchema(fields) {
   const shape = {};
   for (const f of fields) {
@@ -13804,8 +14089,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];
@@ -13881,7 +14179,7 @@ function useReactiveCrud(config, eventBus) {
   const loadList = React.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, {
@@ -14132,7 +14430,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, []];
@@ -14821,6 +15119,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] = React.useState([]);
@@ -14919,7 +15218,7 @@ function DetailDrawer({ row, config, eventBus, onClose, loadedOptions }) {
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { isOpen: true, onClose, title, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-reactive-crud-detail", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "px-chat-reactive-crud-detail__fields", children: config.fields.map((f) => {
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-chat-reactive-crud-detail__row", children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "px-chat-reactive-crud-detail__label", children: f.label }),
@@ -15581,35 +15880,13 @@ const LocationField = ({
 };
 LocationField.displayName = "LocationField";
 
-function chatLinkButton(id, eventBus, label) {
-  return React.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 })
-    },
-    React.createElement(
-      "svg",
-      { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" },
-      React.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 ? React.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 ? React.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 React.createElement(ChatLinkCell, { targets, eventBus });
   };
 }
 function toRenderField(f, loaded, eventBus, mapsApiKey) {
@@ -15648,6 +15925,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,
@@ -15777,6 +16056,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) => {
@@ -16046,12 +16327,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__ */ jsxRuntime.jsx("span", { children: a.label }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-crud-item__action-texts", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: a.label }),
+                disabled && a.disabledReason && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-crud-item__action-reason", children: a.disabledReason })
+              ] }),
               done && /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { type: "check-circle", width: 18, height: 18, className: "px-chat-crud-item__done", "aria-label": "Hecho" })
             ]
           },
@@ -16686,6 +16973,7 @@ function ChatNavigator({ config, eventBus }) {
   React.useEffect(() => {
     void load();
   }, [load]);
+  const listaRef = React.useRef(null);
   const loadRef = React.useRef(load);
   loadRef.current = load;
   React.useEffect(() => {
@@ -16733,8 +17021,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__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator", children: [
     config.search && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__search", children: [
       /* @__PURE__ */ jsxRuntime.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: [
@@ -16814,143 +17100,126 @@ function ChatNavigator({ config, eventBus }) {
     loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__state", children: "Cargando conversaciones\u2026" }),
     error && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__state px-chat-chat-navigator__state--error", children: error }),
     !loading && !error && items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__state", children: labels.emptyText ?? "Sin conversaciones" }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: "px-chat-chat-navigator__item", children: [
-        isRenaming ? /* @__PURE__ */ jsxRuntime.jsx(
-          "form",
-          {
-            className: "px-chat-chat-navigator__rename",
-            onSubmit: (e) => {
-              e.preventDefault();
-              void submitRename(item.id);
-            },
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("button", { type: "button", className: "px-chat-chat-navigator__open", onClick: () => open(item), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__title", children: [
-            displayTitle,
-            item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__meta", children: [
-            item.agent_name ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "span",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__list-wrap", ref: listaRef, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: "px-chat-chat-navigator__item", children: [
+          isRenaming ? /* @__PURE__ */ jsxRuntime.jsx(
+            "form",
+            {
+              className: "px-chat-chat-navigator__rename",
+              onSubmit: (e) => {
+                e.preventDefault();
+                void submitRename(item.id);
+              },
+              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "px-chat-chat-navigator__open", onClick: () => open(item), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__title", children: [
+              displayTitle,
+              item.unread_proactive_count && item.unread_proactive_count >= 1 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__badge", children: labels.closedBadge ?? "Cerrado" }) : null
-          ] })
-        ] }),
-        config.data.rename && !isRenaming && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "px-chat-chat-navigator__rename-btn",
-            "aria-label": "Renombrar",
-            title: "Renombrar",
-            onClick: () => startRename(item),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20h9" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" })
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__meta", children: [
+              item.agent_name ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__agent", children: item.agent_name }) : null,
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__badge", children: labels.closedBadge ?? "Cerrado" }) : null
             ] })
-          }
-        )
-      ] }, item.id);
-    }) }),
-    total > pageSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__pager", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "px-chat-chat-navigator__pager-info", children: [
-        page,
-        " / ",
-        totalPages
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "px-chat-chat-navigator__rename-btn",
+              "aria-label": "Renombrar",
+              title: "Renombrar",
+              onClick: () => startRename(item),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20h9" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" })
+              ] })
+            }
+          )
+        ] }, item.id);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollToEnd, { hostRef: listaRef, selector: ".px-chat-chat-navigator__list", dep: `${items.length}:${loading}` })
     ] }),
+    total > pageSize && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__pager", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Pagination,
+      {
+        current: page,
+        total: totalPages,
+        onChange: (p) => setSkip((p - 1) * pageSize),
+        showTotal: false
+      }
+    ) }),
     config.advancedFilters?.length ? /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { isOpen: advOpen, onClose: () => setAdvOpen(false), title: "Filtros avanzados", children: /* @__PURE__ */ jsxRuntime.jsx(
       Filter,
       {
@@ -24355,6 +24624,7 @@ exports.LumiDateInput = DateInput$1;
 exports.LumiDrawer = Drawer;
 exports.LumiDropdownMenu = DropdownMenu;
 exports.LumiDynamicForm = DynamicForm;
+exports.LumiFieldValue = FieldValue;
 exports.LumiFilter = Filter;
 exports.LumiFilterRow = FilterRow;
 exports.LumiFormCheckbox = Checkbox;
@@ -24373,6 +24643,7 @@ exports.LumiNotification = Notification;
 exports.LumiPagination = Pagination;
 exports.LumiPopover = Popover;
 exports.LumiQRCode = QRCode;
+exports.LumiRecordCard = RecordCard;
 exports.LumiSelect = Select$1;
 exports.LumiStepIndicator = StepIndicator;
 exports.LumiStepper = Stepper;