pixelon 0.3.79 → 0.3.81

package/dist/components/atoms/lumi/Icon/Icon.d.ts

@@ -42,6 +42,7 @@ export declare const LUMI_ICON_TYPES: {
     readonly MAP_PIN: "map-pin";
     readonly USER_X: "user-x";
     readonly REFRESH: "refresh";
+    readonly TRUCK: "truck";
     readonly MESSAGE_SQUARE: "message-square";
     readonly MESSAGE_CIRCLE: "message-circle";
     readonly MAP: "map";

package/dist/components/atoms/lumi/Select/Select.d.ts

@@ -5,6 +5,12 @@ export interface SelectOption {
     label: string;
     disabled?: boolean;
     icon?: ReactNode;
+    /** SPEC-104: segunda línea, en gris y más pequeña. Para el PORQUÉ de la opción —quién la lleva,
+     *  a qué distancia, si hay algún aviso— sin que compita con su nombre. */
+    sublabel?: string;
+    /** SPEC-104: icono por nombre del set de lumi. Existe además de `icon` porque las opciones que
+     *  llegan de un endpoint son JSON y no pueden traer un nodo de React. */
+    iconName?: string;
 }
 /** Tipo de valor según el modo */
 export type SelectValue = string | number | (string | number)[];

package/dist/components/molecules/chat/StructuredContent/components/ChatNavigator/types.d.ts

@@ -69,6 +69,27 @@ export interface ChatNavigatorConfig {
         label: string;
         color?: string;
     }>;
+    /** SPEC-098 — agrupa varios chats en UNA tarjeta con varias puertas.
+     *
+     *  Genérico a propósito: este componente no sabe qué agrupa el consumidor ni por qué. Lo único
+     *  que exige es que la lista llegue con los items de un grupo JUNTOS y COMPLETOS —el que pagina
+     *  es quien sabe qué forma un grupo, y partir un grupo entre dos páginas lo rompería—. La
+     *  etiqueta de cada puerta sale de `tagField`/`tagOptions`, el mismo catálogo que sin agrupar
+     *  pinta un pill.
+     *
+     *  Un item sin valor en `field` se pinta como una fila normal. */
+    group?: {
+        /** Campo cuyo valor comparten los items de una tarjeta (items CONSECUTIVOS). */
+        field: string;
+        /** Campo con el título de la tarjeta; sin él se usa el título del primer chat. */
+        titleField?: string;
+        /** Campos que, unidos por «·», forman el subtítulo. Los vacíos se omiten. */
+        subtitleFields?: string[];
+        /** Campo de estado de la tarjeta (se pinta con `serviceStatusOptions`). */
+        statusField?: string;
+    };
+    /** SPEC-098 — `agent_name` es el nombre técnico del agente; en un producto no se enseña. */
+    showAgent?: boolean;
 }
 export interface ChatNavigatorItem {
     id: string;

package/dist/components/molecules/chat/StructuredContent/components/ReactiveCrud/types.d.ts

@@ -89,7 +89,13 @@ export interface RowActionDef {
     label: string;
     icon?: string;
     intent?: 'primary' | 'secondary' | 'danger';
-    visibleWhen?: RowActionVisibleWhen;
+    /** SPEC-103: una condición, o VARIAS unidas por «y». */
+    visibleWhen?: RowActionVisibleWhen | RowActionVisibleWhen[];
+    /** SPEC-103: la excepción. Si se cumplen TODAS, la acción no se muestra aunque `visibleWhen` dé
+     * por buena la fila. Es para las reglas con forma de «se ve en estos estados, salvo este caso»
+     * —p.ej. asignar grúa en PENDING_APPROVAL, salvo si quien pide es un invitado que todavía no ha
+     * aceptado el precio—, que con condiciones unidas por «y» no se pueden escribir. */
+    hiddenWhen?: RowActionVisibleWhen | RowActionVisibleWhen[];
     /** SPEC-007: la acción se muestra pero queda DESHABILITADA cuando `String(row[field])` está en
      * `in` (ej. "Iniciar" deshabilitado hasta que `has_inspection` sea true). */
     disabledWhen?: RowActionVisibleWhen;

package/dist/components/organisms/lumi/DynamicForm/types.d.ts

@@ -10,6 +10,10 @@ export interface SelectOption {
     value: string | number;
     label: string;
     disabled?: boolean;
+    /** SPEC-104: segunda línea en gris — el porqué de la opción, sin competir con su nombre. */
+    sublabel?: string;
+    /** SPEC-104: nombre de icono del set de lumi (no un nodo: esto viaja como JSON desde el backend). */
+    iconName?: string;
 }
 /**
  * Configuración de un campo del formulario

package/dist/index.esm.js

@@ -5739,6 +5739,9 @@ const LUMI_ICON_TYPES = {
   // Iconos para Agenda
   USER_X: "user-x",
   REFRESH: "refresh",
+  // SPEC-104 — grúas: el selector de despacho necesitaba distinguir de un vistazo qué es cada
+  // opción, y no había ningún icono de vehículo en el set.
+  TRUCK: "truck",
   // Iconos para Chat
   MESSAGE_SQUARE: "message-square",
   MESSAGE_CIRCLE: "message-circle",
@@ -6449,6 +6452,27 @@ const BuildingIcon = (props) => /* @__PURE__ */ jsxs(
     ]
   }
 );
+const TruckIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M2 17V8h10v9" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 11h4l3 3v3" }),
+      /* @__PURE__ */ jsx("circle", { cx: "7", cy: "18", r: "2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "17", cy: "18", r: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 18h6" })
+    ]
+  }
+);
 const MapPinIcon = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -6567,6 +6591,7 @@ const lumiIconMap = {
   // Iconos para Servicios
   [LUMI_ICON_TYPES.BUILDING]: BuildingIcon,
   [LUMI_ICON_TYPES.MAP_PIN]: MapPinIcon,
+  [LUMI_ICON_TYPES.TRUCK]: TruckIcon,
   // Iconos para Agenda
   [LUMI_ICON_TYPES.USER_X]: UserXIcon,
   [LUMI_ICON_TYPES.REFRESH]: RefreshIcon,
@@ -7738,8 +7763,11 @@ const Select$1 = forwardRef(
                                 `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__checkbox`,
                                 isSelected && `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__checkbox--checked`
                               ].filter(Boolean).join(" "), children: isSelected && /* @__PURE__ */ jsx(Icon, { type: LUMI_ICON_TYPES.CHECK, size: "small" }) }) }),
-                              option.icon && /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-icon`, children: option.icon }),
-                              /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-label`, children: option.label }),
+                              (option.icon || option.iconName) && /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-icon`, children: option.icon ?? /* @__PURE__ */ jsx(Icon, { type: option.iconName }) }),
+                              /* @__PURE__ */ jsxs("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-texts`, children: [
+                                /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-label`, children: option.label }),
+                                option.sublabel && /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-sublabel`, children: option.sublabel })
+                              ] }),
                               mode === "single" && isSelected && /* @__PURE__ */ jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-check`, children: /* @__PURE__ */ jsx(Icon, { type: LUMI_ICON_TYPES.CHECK, size: "small" }) })
                             ]
                           },
@@ -14111,7 +14139,9 @@ async function loadOptions(eventBus, ep, ctx) {
   const arr = Array.isArray(data) ? data : [];
   return arr.map((item) => ({
     value: String(item[ep.value_field] ?? ""),
-    label: String(item[ep.label_field] ?? "")
+    label: String(item[ep.label_field] ?? ""),
+    ...item.sublabel ? { sublabel: String(item.sublabel) } : {},
+    ...item.icon ? { iconName: String(item.icon) } : {}
   }));
 }
 
@@ -15938,9 +15968,12 @@ function toRenderField(f, loaded, eventBus, mapsApiKey) {
     formatValue
   };
 }
+const cumpleCondicion = (c, row) => c.in.includes(String(row[c.field]));
+const cumplenTodas = (c, row) => (Array.isArray(c) ? c : [c]).every((x) => cumpleCondicion(x, row));
 function matchesVisibleWhen(a, row) {
+  if (a.hiddenWhen && cumplenTodas(a.hiddenWhen, row)) return false;
   if (!a.visibleWhen) return true;
-  return a.visibleWhen.in.includes(String(row[a.visibleWhen.field]));
+  return cumplenTodas(a.visibleWhen, row);
 }
 function matchesDisabledWhen(a, row) {
   if (!a.disabledWhen) return false;
@@ -16297,12 +16330,27 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
     () => crud.rows.find((r) => String(r[config.idField]) === recordId),
     [crud.rows, config.idField, recordId]
   );
+  const raiz = useRef(null);
+  const [esUltima, setEsUltima] = useState(true);
+  useEffect(() => {
+    const calcular = () => {
+      const el = raiz.current;
+      if (!el) return;
+      const hermanas = document.querySelectorAll(`[data-panel-record="${recordId}"]`);
+      setEsUltima(hermanas.length === 0 || hermanas[hermanas.length - 1] === el);
+    };
+    calcular();
+    const observador = new MutationObserver(calcular);
+    observador.observe(document.body, { childList: true, subtree: true });
+    return () => observador.disconnect();
+  }, [recordId]);
+  const gastada = !esUltima;
   const actions = useMemo(() => {
-    if (!row) return [];
+    if (!row || gastada) return [];
     return (config.rowActions ?? []).filter((a) => !allowed || allowed.includes(a.key)).filter((a) => matchesVisibleWhen(a, row));
-  }, [config.rowActions, row, allowed]);
+  }, [config.rowActions, row, allowed, gastada]);
   const title = recordLabel ?? config.title ?? "Servicio";
-  return /* @__PURE__ */ jsxs("div", { className: "px-chat-crud-item", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "px-chat-crud-item", ref: raiz, "data-panel-record": recordId, children: [
     /* @__PURE__ */ jsx("div", { className: "px-chat-crud-item__header", children: title }),
     crud.actionError && /* @__PURE__ */ jsxs("div", { className: "px-chat-crud-item__error", role: "alert", children: [
       /* @__PURE__ */ jsx("span", { children: crud.actionError }),
@@ -16310,6 +16358,7 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
     ] }),
     crud.loading && !row && /* @__PURE__ */ jsx("div", { className: "px-chat-crud-item__hint", children: "Cargando\u2026" }),
     !crud.loading && !row && /* @__PURE__ */ jsx("div", { className: "px-chat-crud-item__hint", children: "No se encontr\xF3 el servicio." }),
+    gastada && /* @__PURE__ */ jsx("div", { className: "px-chat-crud-item__hint", children: "Este paso ya se gestion\xF3. Contin\xFAa en el mensaje m\xE1s reciente." }),
     row && config.deadline && typeof row[config.deadline.field] === "string" && /* @__PURE__ */ jsx(
       DeadlineCountdown,
       {
@@ -16878,6 +16927,11 @@ function fallbackTitle(item) {
   if (Number.isNaN(d.getTime())) return "Chat";
   return `Chat del ${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
 }
+function campo(item, field) {
+  if (!field) return "";
+  const v = item[field];
+  return v == null || v === "" ? "" : String(v);
+}
 function relativeTime(raw) {
   if (!raw) return "";
   const d = new Date(raw);
@@ -16976,6 +17030,25 @@ function ChatNavigator({ config, eventBus }) {
   const listaRef = useRef(null);
   const loadRef = useRef(load);
   loadRef.current = load;
+  useEffect(() => {
+    const host = listaRef.current;
+    const scroller = host?.querySelector(".px-chat-chat-navigator__list");
+    if (!scroller) return;
+    const MARGEN = 8;
+    const revisar = () => {
+      scroller.dataset.desvaneceArriba = scroller.scrollTop > MARGEN ? "1" : "";
+      const abajo = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+      scroller.dataset.desvaneceAbajo = abajo > MARGEN ? "1" : "";
+    };
+    revisar();
+    scroller.addEventListener("scroll", revisar, { passive: true });
+    const ro = new ResizeObserver(revisar);
+    ro.observe(scroller);
+    return () => {
+      scroller.removeEventListener("scroll", revisar);
+      ro.disconnect();
+    };
+  }, [items, loading]);
   useEffect(() => {
     if (!eventBus) return;
     let t = null;
@@ -17021,6 +17094,82 @@ function ChatNavigator({ config, eventBus }) {
   };
   const page = Math.floor(skip / pageSize) + 1;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const bloques = useMemo(() => {
+    const field = config.group?.field;
+    const out = [];
+    items.forEach((item) => {
+      const clave = campo(item, field);
+      const ultimo = out[out.length - 1];
+      if (clave && ultimo && ultimo.agrupado && ultimo.clave === clave) {
+        ultimo.chats.push(item);
+        return;
+      }
+      out.push({ clave: clave || item.id, agrupado: !!clave, chats: [item] });
+    });
+    return out;
+  }, [items, config.group?.field]);
+  const insigniaEstado = (valor) => {
+    if (!valor) return null;
+    const opt = (config.serviceStatusOptions ?? []).find((o) => o.value === valor);
+    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 ?? valor
+      }
+    );
+  };
+  const contador = (item) => 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;
+  const tarjeta = (bloque) => {
+    const g = config.group;
+    const primero = bloque.chats[0];
+    const titulo = campo(primero, g.titleField) || primero.title?.trim() || fallbackTitle(primero);
+    const subtitulo = (g.subtitleFields ?? []).map((f) => campo(primero, f)).filter(Boolean).join(" \xB7 ");
+    const reciente = bloque.chats.reduce(
+      (max, c) => !max || c.updated_date && c.updated_date > max ? c.updated_date : max,
+      null
+    );
+    return /* @__PURE__ */ jsxs("li", { className: "px-chat-chat-navigator__item px-chat-chat-navigator__item--card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__card-head", children: [
+        /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__title", children: titulo }),
+        insigniaEstado(campo(primero, g.statusField))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "px-chat-chat-navigator__card-sub", children: [
+        subtitulo ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__card-detail", children: subtitulo }) : null,
+        /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(reciente) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-chat-chat-navigator__doors", children: bloque.chats.map((chat) => {
+        const opt = (config.tagOptions ?? []).find(
+          (o) => o.value === campo(chat, config.tagField)
+        );
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "px-chat-chat-navigator__door",
+            style: opt?.color ? { "--px-door-color": opt.color } : void 0,
+            onClick: () => open(chat),
+            children: [
+              opt?.label ?? chat.title?.trim() ?? "Abrir",
+              contador(chat),
+              chat.closed ? /* @__PURE__ */ jsx("span", { className: "px-chat-chat-navigator__door-closed", "aria-hidden": "true" }) : null
+            ]
+          },
+          chat.id
+        );
+      }) })
+    ] }, bloque.clave);
+  };
   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: [
@@ -17101,7 +17250,9 @@ function ChatNavigator({ config, eventBus }) {
     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__ */ 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) => {
+      /* @__PURE__ */ jsx("ul", { className: "px-chat-chat-navigator__list", children: bloques.map((bloque) => {
+        if (bloque.agrupado) return tarjeta(bloque);
+        const item = bloque.chats[0];
         const isRenaming = renamingId === item.id;
         const displayTitle = item.title?.trim() || fallbackTitle(item);
         return /* @__PURE__ */ jsxs("li", { className: "px-chat-chat-navigator__item", children: [
@@ -17128,18 +17279,10 @@ function ChatNavigator({ config, eventBus }) {
           ) : /* @__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
+              contador(item)
             ] }),
             /* @__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,
+              item.agent_name && config.showAgent !== false ? /* @__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;

package/dist/index.js

@@ -5760,6 +5760,9 @@ const LUMI_ICON_TYPES = {
   // Iconos para Agenda
   USER_X: "user-x",
   REFRESH: "refresh",
+  // SPEC-104 — grúas: el selector de despacho necesitaba distinguir de un vistazo qué es cada
+  // opción, y no había ningún icono de vehículo en el set.
+  TRUCK: "truck",
   // Iconos para Chat
   MESSAGE_SQUARE: "message-square",
   MESSAGE_CIRCLE: "message-circle",
@@ -6470,6 +6473,27 @@ const BuildingIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     ]
   }
 );
+const TruckIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 17V8h10v9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11h4l3 3v3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "18", r: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "17", cy: "18", r: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18h6" })
+    ]
+  }
+);
 const MapPinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -6588,6 +6612,7 @@ const lumiIconMap = {
   // Iconos para Servicios
   [LUMI_ICON_TYPES.BUILDING]: BuildingIcon,
   [LUMI_ICON_TYPES.MAP_PIN]: MapPinIcon,
+  [LUMI_ICON_TYPES.TRUCK]: TruckIcon,
   // Iconos para Agenda
   [LUMI_ICON_TYPES.USER_X]: UserXIcon,
   [LUMI_ICON_TYPES.REFRESH]: RefreshIcon,
@@ -7759,8 +7784,11 @@ const Select$1 = React.forwardRef(
                                 `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__checkbox`,
                                 isSelected && `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__checkbox--checked`
                               ].filter(Boolean).join(" "), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: LUMI_ICON_TYPES.CHECK, size: "small" }) }) }),
-                              option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-icon`, children: option.icon }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-label`, children: option.label }),
+                              (option.icon || option.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-icon`, children: option.icon ?? /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: option.iconName }) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-texts`, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-label`, children: option.label }),
+                                option.sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-sublabel`, children: option.sublabel })
+                              ] }),
                               mode === "single" && isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${COMPONENT_PREFIX}${COMPONENT_TYPES.SELECT}__option-check`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: LUMI_ICON_TYPES.CHECK, size: "small" }) })
                             ]
                           },
@@ -14132,7 +14160,9 @@ async function loadOptions(eventBus, ep, ctx) {
   const arr = Array.isArray(data) ? data : [];
   return arr.map((item) => ({
     value: String(item[ep.value_field] ?? ""),
-    label: String(item[ep.label_field] ?? "")
+    label: String(item[ep.label_field] ?? ""),
+    ...item.sublabel ? { sublabel: String(item.sublabel) } : {},
+    ...item.icon ? { iconName: String(item.icon) } : {}
   }));
 }
 
@@ -15959,9 +15989,12 @@ function toRenderField(f, loaded, eventBus, mapsApiKey) {
     formatValue
   };
 }
+const cumpleCondicion = (c, row) => c.in.includes(String(row[c.field]));
+const cumplenTodas = (c, row) => (Array.isArray(c) ? c : [c]).every((x) => cumpleCondicion(x, row));
 function matchesVisibleWhen(a, row) {
+  if (a.hiddenWhen && cumplenTodas(a.hiddenWhen, row)) return false;
   if (!a.visibleWhen) return true;
-  return a.visibleWhen.in.includes(String(row[a.visibleWhen.field]));
+  return cumplenTodas(a.visibleWhen, row);
 }
 function matchesDisabledWhen(a, row) {
   if (!a.disabledWhen) return false;
@@ -16318,12 +16351,27 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
     () => crud.rows.find((r) => String(r[config.idField]) === recordId),
     [crud.rows, config.idField, recordId]
   );
+  const raiz = React.useRef(null);
+  const [esUltima, setEsUltima] = React.useState(true);
+  React.useEffect(() => {
+    const calcular = () => {
+      const el = raiz.current;
+      if (!el) return;
+      const hermanas = document.querySelectorAll(`[data-panel-record="${recordId}"]`);
+      setEsUltima(hermanas.length === 0 || hermanas[hermanas.length - 1] === el);
+    };
+    calcular();
+    const observador = new MutationObserver(calcular);
+    observador.observe(document.body, { childList: true, subtree: true });
+    return () => observador.disconnect();
+  }, [recordId]);
+  const gastada = !esUltima;
   const actions = React.useMemo(() => {
-    if (!row) return [];
+    if (!row || gastada) return [];
     return (config.rowActions ?? []).filter((a) => !allowed || allowed.includes(a.key)).filter((a) => matchesVisibleWhen(a, row));
-  }, [config.rowActions, row, allowed]);
+  }, [config.rowActions, row, allowed, gastada]);
   const title = recordLabel ?? config.title ?? "Servicio";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-crud-item", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-crud-item", ref: raiz, "data-panel-record": recordId, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-crud-item__header", children: title }),
     crud.actionError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-crud-item__error", role: "alert", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: crud.actionError }),
@@ -16331,6 +16379,7 @@ function ServiceActionsPanel({ config, recordId, recordLabel, allowed, eventBus
     ] }),
     crud.loading && !row && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-crud-item__hint", children: "Cargando\u2026" }),
     !crud.loading && !row && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-crud-item__hint", children: "No se encontr\xF3 el servicio." }),
+    gastada && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-crud-item__hint", children: "Este paso ya se gestion\xF3. Contin\xFAa en el mensaje m\xE1s reciente." }),
     row && config.deadline && typeof row[config.deadline.field] === "string" && /* @__PURE__ */ jsxRuntime.jsx(
       DeadlineCountdown,
       {
@@ -16899,6 +16948,11 @@ function fallbackTitle(item) {
   if (Number.isNaN(d.getTime())) return "Chat";
   return `Chat del ${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}`;
 }
+function campo(item, field) {
+  if (!field) return "";
+  const v = item[field];
+  return v == null || v === "" ? "" : String(v);
+}
 function relativeTime(raw) {
   if (!raw) return "";
   const d = new Date(raw);
@@ -16997,6 +17051,25 @@ function ChatNavigator({ config, eventBus }) {
   const listaRef = React.useRef(null);
   const loadRef = React.useRef(load);
   loadRef.current = load;
+  React.useEffect(() => {
+    const host = listaRef.current;
+    const scroller = host?.querySelector(".px-chat-chat-navigator__list");
+    if (!scroller) return;
+    const MARGEN = 8;
+    const revisar = () => {
+      scroller.dataset.desvaneceArriba = scroller.scrollTop > MARGEN ? "1" : "";
+      const abajo = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+      scroller.dataset.desvaneceAbajo = abajo > MARGEN ? "1" : "";
+    };
+    revisar();
+    scroller.addEventListener("scroll", revisar, { passive: true });
+    const ro = new ResizeObserver(revisar);
+    ro.observe(scroller);
+    return () => {
+      scroller.removeEventListener("scroll", revisar);
+      ro.disconnect();
+    };
+  }, [items, loading]);
   React.useEffect(() => {
     if (!eventBus) return;
     let t = null;
@@ -17042,6 +17115,82 @@ function ChatNavigator({ config, eventBus }) {
   };
   const page = Math.floor(skip / pageSize) + 1;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const bloques = React.useMemo(() => {
+    const field = config.group?.field;
+    const out = [];
+    items.forEach((item) => {
+      const clave = campo(item, field);
+      const ultimo = out[out.length - 1];
+      if (clave && ultimo && ultimo.agrupado && ultimo.clave === clave) {
+        ultimo.chats.push(item);
+        return;
+      }
+      out.push({ clave: clave || item.id, agrupado: !!clave, chats: [item] });
+    });
+    return out;
+  }, [items, config.group?.field]);
+  const insigniaEstado = (valor) => {
+    if (!valor) return null;
+    const opt = (config.serviceStatusOptions ?? []).find((o) => o.value === valor);
+    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 ?? valor
+      }
+    );
+  };
+  const contador = (item) => 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;
+  const tarjeta = (bloque) => {
+    const g = config.group;
+    const primero = bloque.chats[0];
+    const titulo = campo(primero, g.titleField) || primero.title?.trim() || fallbackTitle(primero);
+    const subtitulo = (g.subtitleFields ?? []).map((f) => campo(primero, f)).filter(Boolean).join(" \xB7 ");
+    const reciente = bloque.chats.reduce(
+      (max, c) => !max || c.updated_date && c.updated_date > max ? c.updated_date : max,
+      null
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-chat-chat-navigator__item px-chat-chat-navigator__item--card", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__card-head", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__title", children: titulo }),
+        insigniaEstado(campo(primero, g.statusField))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-chat-chat-navigator__card-sub", children: [
+        subtitulo ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__card-detail", children: subtitulo }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__time", children: relativeTime(reciente) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-chat-chat-navigator__doors", children: bloque.chats.map((chat) => {
+        const opt = (config.tagOptions ?? []).find(
+          (o) => o.value === campo(chat, config.tagField)
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "px-chat-chat-navigator__door",
+            style: opt?.color ? { "--px-door-color": opt.color } : void 0,
+            onClick: () => open(chat),
+            children: [
+              opt?.label ?? chat.title?.trim() ?? "Abrir",
+              contador(chat),
+              chat.closed ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-chat-chat-navigator__door-closed", "aria-hidden": "true" }) : null
+            ]
+          },
+          chat.id
+        );
+      }) })
+    ] }, bloque.clave);
+  };
   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: [
@@ -17122,7 +17271,9 @@ function ChatNavigator({ config, eventBus }) {
     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.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) => {
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "px-chat-chat-navigator__list", children: bloques.map((bloque) => {
+        if (bloque.agrupado) return tarjeta(bloque);
+        const item = bloque.chats[0];
         const isRenaming = renamingId === item.id;
         const displayTitle = item.title?.trim() || fallbackTitle(item);
         return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-chat-chat-navigator__item", children: [
@@ -17149,18 +17300,10 @@ function ChatNavigator({ config, eventBus }) {
           ) : /* @__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
+              contador(item)
             ] }),
             /* @__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,
+              item.agent_name && config.showAgent !== false ? /* @__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;