pixelon 0.3.77 → 0.3.79

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FieldValueProps } from './types';
+import './FieldValue.scss';
+/**
+ * SPEC-093 T2 — un dato con su nombre.
+ *
+ * Es lo que en una tabla hace la pareja cabecera + celda, pero sin tabla: cuando las columnas no
+ * caben, el nombre del dato tiene que viajar CON el dato. Sin él, «SOT093» o «En un parqueadero
+ * subterráneo» sueltos en una tarjeta no dicen de qué campo son.
+ *
+ * Tonto a propósito: recibe el valor YA pintado. Quién decide que un estado es un Badge o que una
+ * cifra lleva moneda es el mismo sitio que lo decide para la tabla (`renderFieldValue`), y este
+ * átomo no tiene por qué enterarse.
+ */
+export declare const FieldValue: React.FC<FieldValueProps>;

package/dist/components/atoms/lumi/FieldValue/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldValue, FieldValue as LumiFieldValue } from './FieldValue';
+export type { FieldValueProps } from './types';

package/dist/components/atoms/lumi/FieldValue/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface FieldValueProps {
+    /** Cómo se llama el dato. En una tabla sería la cabecera de la columna. */
+    label: string;
+    /** El valor ya pintado: texto, un Badge, una cifra con su moneda… */
+    children: ReactNode;
+    /** `inline` pone etiqueta y valor en la misma línea; `stacked` uno debajo del otro. */
+    layout?: 'inline' | 'stacked';
+    className?: string;
+}

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

@@ -37,6 +37,7 @@ export declare const LUMI_ICON_TYPES: {
     readonly MENU: "menu";
     readonly ARROW_UP: "arrow-up";
     readonly ARROW_RIGHT: "arrow-right";
+    readonly ARROW_LEFT: "arrow-left";
     readonly BUILDING: "building";
     readonly MAP_PIN: "map-pin";
     readonly USER_X: "user-x";

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ChatEventBus } from '../../../../../../core/eventBus/chatEventBus';
+export interface ChatTarget {
+    id: string;
+    label?: string;
+}
+/**
+ * SPEC-093 — un solo botón para abrir la conversación del registro.
+ *
+ * Antes se pintaba un botón por cada chat disponible (Aliado, Admin, Conductor). Con tres, la fila
+ * crecía de alto, la columna se comía el ancho de dos, y las filas quedaban desparejas según cuántos
+ * chats tuviera cada servicio.
+ *
+ * Con varios, el botón abre un menú y se elige. **Con uno solo NO hay menú**: se abre directo, que
+ * un desplegable de una sola opción es un clic de más y no informa de nada.
+ */
+export declare const ChatLinkCell: React.FC<{
+    targets: ChatTarget[];
+    eventBus?: ChatEventBus;
+}>;

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

@@ -2,4 +2,5 @@ import type { SelectOption } from '../../../../../organisms/lumi/DynamicForm/typ
 import type { ChatEventBus } from '../../../../../../core/eventBus/chatEventBus';
 import type { CrudFieldOptionsEndpoint } from './types';
 export declare function unwrap(raw: unknown): unknown;
-export declare function loadOptions(eventBus: ChatEventBus, ep: CrudFieldOptionsEndpoint): Promise<SelectOption[]>;
+export declare function resolveBody(body: Record<string, unknown> | undefined, ctx?: Record<string, unknown>): Record<string, unknown>;
+export declare function loadOptions(eventBus: ChatEventBus, ep: CrudFieldOptionsEndpoint, ctx?: Record<string, unknown>): Promise<SelectOption[]>;

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

@@ -42,6 +42,8 @@ export interface ReactiveCrudField {
         source?: string;
     };
     showInTable?: boolean;
+    /** SPEC-093 — se ve con la tarjeta plegada. Sin ninguno marcado, los tres primeros. */
+    summary?: boolean;
     showInForm?: boolean;
     showInModes?: Array<'create' | 'edit' | 'view'>;
     required?: boolean;
@@ -144,6 +146,10 @@ export interface ReactiveCrudConfig {
         x?: number | string;
         y?: number | string;
     };
+    /** SPEC-093 — `auto` (por defecto) pinta tarjetas cuando el contenedor baja de `cardsBelow`. */
+    layout?: 'auto' | 'table' | 'cards';
+    /** SPEC-093 — ancho (px) por debajo del cual `auto` pinta tarjetas. 768 por defecto. */
+    cardsBelow?: number;
     /** SPEC-087 — cuenta atrás en el panel de un registro. Ver `DeadlineConfig`. */
     deadline?: DeadlineConfig;
 }

package/dist/components/molecules/lumi/Drawer/Drawer.d.ts

@@ -16,6 +16,14 @@ export interface DrawerProps {
     fixedSize?: number;
     /** Porcentaje de la pantalla cuando size='responsive' (default: 80) */
     responsivePercentage?: number;
+    /**
+     * SPEC-093 — en móvil, HOJA por abajo con el alto de su contenido en vez de pantalla completa.
+     *
+     * Por defecto todo drawer se vuelve pantalla completa en móvil, que es lo correcto para un
+     * formulario. Para un contenido corto —una confirmación de dos líneas— no lo es: se come la
+     * pantalla entera, deja el 80% en blanco y los botones flotando a media altura.
+     */
+    mobileSheet?: boolean;
     /** Título del drawer (opcional) */
     title?: string;
     /** Contenido extra en el header (junto al botón de close) */

package/dist/components/molecules/lumi/RecordCard/RecordCard.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { RecordCardProps } from './types';
+import './RecordCard.scss';
+/**
+ * SPEC-093 T3 — un registro como tarjeta plegable.
+ *
+ * Plegada enseña lo justo para reconocerlo y decidir si interesa; abierta, todo lo demás y sus
+ * acciones. Una lista de tarjetas todas abiertas es peor que la tabla que vino a sustituir: hay
+ * que desplazarse metros para comparar dos registros.
+ *
+ * Controlada desde fuera (`open` + `onToggle`) porque quién está abierto es decisión de la LISTA
+ * —solo una a la vez—, no de cada tarjeta por su cuenta.
+ */
+export declare const RecordCard: React.FC<RecordCardProps>;

package/dist/components/molecules/lumi/RecordCard/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordCard, RecordCard as LumiRecordCard } from './RecordCard';
+export type { RecordCardProps } from './types';

package/dist/components/molecules/lumi/RecordCard/types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface RecordCardProps {
+    /** Lo que identifica al registro de un vistazo. Suele ser su número o su nombre. */
+    title: ReactNode;
+    /** Dos o tres datos que se ven SIN desplegar: el estado, el pago… */
+    summary?: ReactNode;
+    /** Todo lo demás. Solo se pinta cuando la tarjeta está abierta. */
+    children?: ReactNode;
+    /** Pie con las acciones del registro. También solo al abrir. */
+    actions?: ReactNode;
+    open?: boolean;
+    onToggle?: () => void;
+    /** Para la fila seleccionable de una lista; sin él la cabecera no es un botón. */
+    ariaLabel?: string;
+    className?: string;
+}

package/dist/components/molecules/lumi/ScrollToEnd/ScrollToEnd.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './ScrollToEnd.scss';
+export interface ScrollToEndProps {
+    /** El área de datos; dentro de ella se busca quién tiene el scroll. Si nadie coincide con
+     *  `selector`, se usa el propio host —que es el caso de una lista que se desplaza ella misma. */
+    hostRef: React.RefObject<HTMLElement | null>;
+    /** Con qué buscar al que se desplaza dentro del host. */
+    selector?: string;
+    /** Cambia cuando cambia el contenido o la forma (tabla ↔ tarjetas): obliga a volver a mirar. */
+    dep?: unknown;
+    label?: string;
+}
+/**
+ * SPEC-093 — «hay más abajo».
+ *
+ * Desde que la tabla se desplaza por dentro (para que el paginador no se vaya de la pantalla), no
+ * hay nada que avise de que la página tiene más filas de las que se ven: el borde inferior parece
+ * el final. Este botón aparece SOLO cuando queda contenido por debajo y desaparece al llegar al
+ * final, así que no es un adorno permanente: es el aviso, y de paso el atajo.
+ */
+export declare const ScrollToEnd: React.FC<ScrollToEndProps>;

package/dist/components/molecules/lumi/ScrollToEnd/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollToEnd, ScrollToEnd as LumiScrollToEnd } from './ScrollToEnd';
+export type { ScrollToEndProps } from './ScrollToEnd';

package/dist/components/templates/lumi/Crud/CardList.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { RenderFieldConfig } from './types';
+import './CardList.scss';
+export interface CardListOption {
+    label: string;
+    onClick: () => void | Promise<void>;
+    disabled?: boolean;
+    disabledReason?: string;
+}
+export interface CardListProps<T extends Record<string, unknown>> {
+    fields: RenderFieldConfig[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    /** Las mismas acciones que el menú de la tabla; aquí se pintan como botones. */
+    buildOptions?: (row: T) => CardListOption[];
+    loading?: boolean;
+    emptyText?: string;
+}
+/** SPEC-093 — qué se ve con la tarjeta plegada: lo marcado, o los tres primeros visibles. */
+export declare function summaryFields(fields: RenderFieldConfig[]): RenderFieldConfig[];
+/**
+ * SPEC-093 T4 — los mismos registros, en tarjetas.
+ *
+ * No es «la versión móvil de la tabla»: es la misma configuración pintada de otra forma cuando las
+ * columnas no caben. Los valores los pinta `renderFieldValue`, el mismo que la celda, para que un
+ * estado o una cifra no se vean distintos según el ancho de la pantalla.
+ *
+ * Una tarjeta abierta a la vez. Con todas abiertas hay que recorrer metros para comparar dos
+ * registros, que es peor que la tabla a la que vino a sustituir.
+ */
+export declare function CardList<T extends Record<string, unknown>>({ fields, rows, rowKey, buildOptions, loading, emptyText, }: CardListProps<T>): React.ReactElement;
+export declare namespace CardList {
+    var displayName: string;
+}

package/dist/components/templates/lumi/Crud/Crud.d.ts

@@ -1,6 +1,6 @@
 import type { CrudProps } from './types';
 import './Crud.scss';
-export declare function Crud<T extends Record<string, unknown>>({ size, showActionBar, actionBarMode, autoOpenCreate, formOnly, createDefaults, onCreateClose, renderByFields, dataSource, filters, total, onCreate, onEdit, onDelete, onView, onPaginationChange, onFilterChange, validationSchema, getRowKey, labels, disabledActions, loading, filterFields, defaultFilters, tableHeight, tableScroll, hidePagination, formDrawerWidth, formColumns, showRowActions, rowActionTypes, rowActions, customActions, customDrawers, onCustomAction, className, 'data-testid': testId, }: CrudProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Crud<T extends Record<string, unknown>>({ size, showActionBar, actionBarMode, autoOpenCreate, formOnly, createDefaults, onCreateClose, renderByFields, dataSource, filters, total, onCreate, onEdit, onDelete, onView, onPaginationChange, onFilterChange, validationSchema, getRowKey, labels, disabledActions, loading, filterFields, defaultFilters, tableHeight, tableScroll, layout, cardsBelow, hidePagination, formDrawerWidth, formColumns, showRowActions, rowActionTypes, rowActions, customActions, customDrawers, onCustomAction, className, 'data-testid': testId, }: CrudProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Crud {
     var displayName: string;
 }

package/dist/components/templates/lumi/Crud/ScrollToEnd.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './ScrollToEnd.scss';
+export interface ScrollToEndProps {
+    /** El área de datos del Crud; dentro de ella se busca quién tiene el scroll. */
+    hostRef: React.RefObject<HTMLElement | null>;
+    /** Cambia cuando cambia el contenido o la forma (tabla ↔ tarjetas): obliga a volver a mirar. */
+    dep?: unknown;
+    label?: string;
+}
+/**
+ * SPEC-093 — «hay más abajo».
+ *
+ * Desde que la tabla se desplaza por dentro (para que el paginador no se vaya de la pantalla), no
+ * hay nada que avise de que la página tiene más filas de las que se ven: el borde inferior parece
+ * el final. Este botón aparece SOLO cuando queda contenido por debajo y desaparece al llegar al
+ * final, así que no es un adorno permanente: es el aviso, y de paso el atajo.
+ */
+export declare const ScrollToEnd: React.FC<ScrollToEndProps>;

package/dist/components/templates/lumi/Crud/helpers/fieldValue.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { RenderFieldConfig } from '../types';
+export interface BadgeOption {
+    value: string;
+    label: string;
+    color?: string;
+}
+export declare function fieldOptions(field: RenderFieldConfig): BadgeOption[] | undefined;
+/** El valor de `field` en `row`, ya pintado. `null` cuando no hay nada que mostrar. */
+export declare function renderFieldValue(field: RenderFieldConfig, row: Record<string, unknown>): ReactNode;
+/** ¿Hay algo que mostrar? Para no pintar una fila de tarjeta con la etiqueta y nada al lado. */
+export declare function hasFieldValue(field: RenderFieldConfig, row: Record<string, unknown>): boolean;

package/dist/components/templates/lumi/Crud/types.d.ts

@@ -11,6 +11,14 @@ export interface RenderFieldConfig {
     moleculeType: 'INPUT' | 'INPUT_NUMBER' | 'INPUT_CURRENCY' | 'TEXTAREA' | 'SELECT' | 'DATE_INPUT' | 'TIME_INPUT' | 'CHECKBOX' | 'BADGE';
     /** Mostrar en tabla (default: true) */
     showInTable?: boolean;
+    /**
+     * SPEC-093 — se ve SIN desplegar la tarjeta.
+     *
+     * Cuando la tabla no cabe (tableta, móvil, la columna del chat) cada registro se pinta como una
+     * tarjeta plegable, y hay que elegir qué dos o tres datos bastan para reconocerlo. Sin ninguno
+     * marcado se toman los tres primeros visibles, que casi siempre es lo correcto.
+     */
+    summary?: boolean;
     /** Mostrar en formulario (default: true) */
     showInForm?: boolean;
     /**
@@ -210,6 +218,23 @@ export interface CrudProps<T extends Record<string, unknown>> {
         x?: number | string;
         y?: number | string;
     };
+    /**
+     * SPEC-093 — cómo se pintan los registros.
+     *
+     * `auto` (por defecto) decide por el ANCHO DEL CONTENEDOR, no por el dispositivo: el mismo
+     * componente vive en una ruta a pantalla completa y en la columna estrecha del chat, y un móvil
+     * apaisado puede ser más ancho que ese chat en un escritorio.
+     */
+    layout?: 'auto' | 'table' | 'cards';
+    /**
+     * SPEC-093 — por debajo de este ancho (px) `auto` pinta tarjetas. 768 por defecto: tableta en
+     * vertical y hacia abajo.
+     *
+     * NO se reutiliza `tableScroll.x`, que es el ancho del CONTENIDO de la tabla (1.620 px en
+     * servicios): con ese umbral cualquier portátil se llevaría tarjetas, y en un escritorio la
+     * tabla es justo lo que se quiere para comparar muchas filas de un vistazo.
+     */
+    cardsBelow?: number;
     /** Ocultar paginación incluso si all_data es false */
     hidePagination?: boolean;
     /** Ancho del drawer de formulario */

package/dist/index.d.ts

@@ -59,6 +59,8 @@ export { Popover as LumiPopover, type PopoverProps as LumiPopoverProps } from '.
 export { QRCode as LumiQRCode, type QRCodeProps as LumiQRCodeProps } from './components/atoms/lumi/QRCode';
 export { Tooltip as LumiTooltip, type TooltipProps as LumiTooltipProps } from './components/atoms/lumi/Tooltip';
 export { Badge as LumiBadge, type BadgeProps as LumiBadgeProps, type BadgeVariant as LumiBadgeVariant, BADGE_VARIANTS as LUMI_BADGE_VARIANTS, } from './components/atoms/lumi/Badge';
+export { FieldValue as LumiFieldValue, type FieldValueProps as LumiFieldValueProps, } from './components/atoms/lumi/FieldValue';
+export { RecordCard as LumiRecordCard, type RecordCardProps as LumiRecordCardProps, } from './components/molecules/lumi/RecordCard';
 export { Loader as LumiLoader, type LoaderProps as LumiLoaderProps } from './components/atoms/lumi/Loader';
 export { TextArea as LumiTextArea, type TextAreaProps as LumiTextAreaProps, type TextAreaSize as LumiTextAreaSize, type TextAreaVariant as LumiTextAreaVariant, type TextAreaResize as LumiTextAreaResize, } from './components/atoms/lumi/TextArea';
 export { Checkbox as LumiFormCheckbox, type FormCheckboxProps, Input as LumiFormInput, type FormInputProps, Select as LumiFormSelect, type FormSelectProps, DateInput as LumiFormDateInput, type DateInputProps as LumiFormDateInputProps, TimeInput as LumiFormTimeInput, type TimeInputProps as LumiFormTimeInputProps, } from './components/molecules/lumi';