@sfperusacdev/sf-ui 0.3.0 → 0.3.1

package/dist/types/src/components/display/Timeline.d.ts

@@ -7,11 +7,32 @@ export type TimelineItem = {
     time?: ReactNode;
     status?: TimelineStatus;
     icon?: ReactNode;
+    /** Color propio del marcador (y del tramo de línea que sale de él). Gana sobre `status`. */
+    color?: string;
+    /** Columna intermedia a la derecha del cuerpo (ej. el impacto del evento). */
+    meta?: ReactNode;
+    /** Columna final (ej. un `Badge` de estado). */
+    aside?: ReactNode;
+    /** Con `onClick` el título es un botón que abre el detalle del elemento. */
+    onClick?: () => void;
 };
+export type TimelineOrientation = "vertical" | "horizontal";
 export type TimelineProps = {
     items: TimelineItem[];
     ariaLabel?: string;
     emptyMessage?: string;
+    /** "vertical" (por defecto) o "horizontal": la misma lista con los marcadores sobre una línea. Solo se muestra
+     * horizontal si el contenedor da al menos 8rem por elemento; si no, o si no se puede medir, queda vertical. */
+    orientation?: TimelineOrientation;
+    /** Ancho mínimo por elemento, en rem, para mostrar la horizontal. Por defecto 8. */
+    minItemWidth?: number;
+    /** Solo horizontal: "center" centra marcador y textos bajo el marcador; con ícono, el ícono va sobre la línea y un
+     * punto del mismo color marca la línea. */
+    align?: "start" | "center";
+    /** "top" pone la hora antes del título. */
+    timePosition?: "inline" | "top";
+    /** "cards": cada elemento en su propia tarjeta (solo vertical). */
+    variant?: "default" | "cards";
     className?: string;
 };
-export declare const Timeline: ({ items, ariaLabel, emptyMessage, className }: TimelineProps) => import('react').JSX.Element;
+export declare const Timeline: ({ items, ariaLabel, emptyMessage, orientation, minItemWidth, align, timePosition, variant, className, }: TimelineProps) => import('react').JSX.Element;

package/dist/types/src/components/display/Timeline.horizontal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/index.d.ts

@@ -1,9 +1,9 @@
 export { Avatar, AvatarGroup } from './Avatar';
 export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarVariant, AvatarShape } from './Avatar';
 export { AuditTimeline } from './AuditTimeline';
-export type { AuditEventType, AuditTimelineItem, AuditTimelineProps } from './AuditTimeline';
+export type { AuditEventType, AuditTimelineItem, AuditTimelineProps, AuditTimelineVariant } from './AuditTimeline';
 export { RecordList, RecordListItem } from './RecordList';
-export type { RecordListIconTone, RecordListItemProps, RecordListProps } from './RecordList';
+export type { RecordListDensity, RecordListIconTone, RecordListItemProps, RecordListProps } from './RecordList';
 export { LiveChip } from './LiveChip';
 export type { LiveChipProps } from './LiveChip';
 export { LiveStatusBar } from './LiveStatusBar';
@@ -11,8 +11,12 @@ export type { LiveStatusBarProps, LiveStatusMetric } from './LiveStatusBar';
 export { PassengerBoardCard } from './PassengerBoardCard';
 export type { PassengerBoardCardProps } from './PassengerBoardCard';
 export { Timeline } from './Timeline';
-export type { TimelineItem, TimelineProps, TimelineStatus } from './Timeline';
+export type { TimelineItem, TimelineOrientation, TimelineProps, TimelineStatus } from './Timeline';
 export { Carousel } from './Carousel';
 export type { CarouselProps } from './Carousel';
+export { CheckList } from './CheckList';
+export type { CheckListItem, CheckListProps } from './CheckList';
 export { MediaPanel } from './MediaPanel';
-export type { MediaPanelFit, MediaPanelOverlay, MediaPanelProps } from './MediaPanel';
+export type { MediaPanelContentStyle, MediaPanelFit, MediaPanelOverlay, MediaPanelProps } from './MediaPanel';
+export { MediaGallery } from './MediaGallery';
+export type { MediaGalleryItem, MediaGalleryKind, MediaGalleryProps } from './MediaGallery';

package/dist/types/src/components/display/mediaGalleryFoco.d.ts

@@ -0,0 +1 @@
+export { esEnfocableValido, siguienteEnContencion, tabulables } from '../../utils/foco';

package/dist/types/src/components/display/mediaGalleryFoco.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/layout/AppShell.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/layout/AppShell.d.ts

@@ -15,6 +15,8 @@ export type AppShellNavItem = {
      * detrás de bandera o permiso, donde la definición del menú es estática.
      */
     hidden?: boolean;
+    /** 1 = subopción del ítem anterior: va con sangría y en letra menor. */
+    level?: 0 | 1;
 };
 export type AppShellCategory = {
     id: string;
@@ -75,6 +77,7 @@ export type AppShellExitToModulesAction = {
     ariaLabel?: string;
     icon?: ReactNode;
 };
+export type AppShellLayout = "rail" | "sidebar";
 export type AppShellProps = {
     categories: AppShellCategory[];
     activeItemId: string;
@@ -82,6 +85,9 @@ export type AppShellProps = {
     brand?: ReactNode;
     topBar?: ReactNode;
     children: ReactNode;
+    /** "rail" (por defecto): riel de categorías y submenú de la categoría activa. "sidebar": una sola columna con
+     * `brand` arriba y los ítems de todas las categorías; con más de una categoría, cada grupo lleva su título. */
+    layout?: AppShellLayout;
     submenuCollapsed?: boolean;
     onSubmenuCollapsedChange?: (collapsed: boolean) => void;
     submenuFooter?: ReactNode;
@@ -101,12 +107,12 @@ export type AppShellProps = {
     className?: string;
     contentClassName?: string;
 };
-export declare const AppShell: ({ categories, activeItemId, onChange, brand, topBar, children, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
+export declare const AppShell: ({ categories, activeItemId, onChange, brand, topBar, children, layout, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
 /**
  * @deprecated Use `AppShell` instead. `AppBarContainer` remains as temporary
  * compatibility alias and is scheduled for removal in the next major release.
  */
-export declare const AppBarContainer: ({ categories, activeItemId, onChange, brand, topBar, children, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
+export declare const AppBarContainer: ({ categories, activeItemId, onChange, brand, topBar, children, layout, submenuCollapsed, onSubmenuCollapsedChange, submenuFooter, showSubmenuHeader, showDefaultTopBar, topBarContext, branchSelector, themeToggle, notifications, moduleLauncher, userMenu, helpAction, exitToModulesAction, className, contentClassName, }: AppShellProps) => import('react').JSX.Element;
 /**
  * @deprecated Use `AppShellProps` instead.
  */

package/dist/types/src/components/layout/Tabs.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/layout/Tabs.d.ts

@@ -11,7 +11,10 @@ type TabsProps = {
     value: string;
     onChange: (id: string) => void;
     className?: string;
-    variant?: "underline" | "segmented" | "accentUnderline";
+    /** "pills": cada pestaña en su propia píldora con borde; la activa, rellena. */
+    variant?: "underline" | "segmented" | "accentUnderline" | "pills";
+    /** "sm": pestañas bajas para la cabecera de una tarjeta. */
+    size?: "md" | "sm";
 };
-export declare const Tabs: ({ tabs, value, onChange, className, variant }: TabsProps) => import('react').JSX.Element;
+export declare const Tabs: ({ tabs, value, onChange, className, variant, size }: TabsProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/layout/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/layout/ThemePicker.d.ts

@@ -0,0 +1,23 @@
+export type ThemePickerOption = {
+    id: string;
+    label: string;
+    /** Dos colores de muestra (fondo y acento) para reconocer el tema. */
+    swatch: [string, string];
+};
+export type ThemePickerMode = "light" | "dark";
+export type ThemePickerProps = {
+    themes: ThemePickerOption[];
+    value: string;
+    onChange: (id: string) => void;
+    mode: ThemePickerMode;
+    onModeChange: (mode: ThemePickerMode) => void;
+    /** false: solo las muestras de color; el nombre queda como texto accesible y en el `title`. */
+    showLabels?: boolean;
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * Selector de tema de color (radio) y de modo claro u oscuro (interruptor). Solo informa la elección: quien lo usa
+ * aplica `data-skin` y `data-theme` en el <html> (ver theme/temas.css).
+ */
+export declare const ThemePicker: ({ themes, value, onChange, mode, onModeChange, showLabels, ariaLabel, className, }: ThemePickerProps) => import('react').JSX.Element;

package/dist/types/src/components/layout/ThemePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/layout/WorkspaceHeader.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { NotificationItem } from '../overlays';
+import { BreadcrumbItem } from './Breadcrumb';
+export type WorkspaceHeaderSearch = {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    ariaLabel?: string;
+};
+export type WorkspaceHeaderUser = {
+    name: string;
+    role?: string;
+    avatarSrc?: string;
+    initials?: string;
+};
+export type WorkspaceHeaderProps = {
+    title: string;
+    subtitle?: string;
+    breadcrumb?: BreadcrumbItem[];
+    search?: WorkspaceHeaderSearch;
+    notifications?: {
+        items: NotificationItem[];
+        onItemClick?: (item: NotificationItem) => void;
+    };
+    user?: WorkspaceHeaderUser;
+    /** Botones bajo la zona de herramientas, alineados a la derecha. */
+    actions?: ReactNode;
+    className?: string;
+};
+export declare const WorkspaceHeader: ({ title, subtitle, breadcrumb, search, notifications, user, actions, className, }: WorkspaceHeaderProps) => import('react').JSX.Element;

package/dist/types/src/components/layout/WorkspaceHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/layout/index.d.ts

@@ -14,6 +14,10 @@ export type { VisibilityProps } from './Visibility';
 export { Separator } from './Separator';
 export type { SeparatorOrientation, SeparatorProps } from './Separator';
 export { Breadcrumb } from './Breadcrumb';
+export { WorkspaceHeader } from './WorkspaceHeader';
+export { ThemePicker } from './ThemePicker';
+export type { ThemePickerMode, ThemePickerOption, ThemePickerProps } from './ThemePicker';
+export type { WorkspaceHeaderProps, WorkspaceHeaderSearch, WorkspaceHeaderUser } from './WorkspaceHeader';
 export type { BreadcrumbItem, BreadcrumbProps } from './Breadcrumb';
 export { Accordion } from './Accordion';
 export type { AccordionItemDef, AccordionProps, AccordionType } from './Accordion';
@@ -39,4 +43,4 @@ export { WeekdayToggleStrip } from './WeekdayToggleStrip';
 export type { WeekdayToggleStripProps, WeekdayOption } from './WeekdayToggleStrip';
 export type { UnitSelectorOption, UnitSelectorProps } from './UnitSelector';
 export { AppShell, AppBarContainer } from './AppShell';
-export type { AppShellCategory, AppShellNavItem, AppShellProps, AppShellBranchSelector, AppShellExitToModulesAction, AppShellHelpAction, AppShellModuleLauncher, AppShellModuleLauncherItem, AppShellThemeToggle, AppShellTopBarContext, AppShellUserMenu, AppBarContainerProps, } from './AppShell';
+export type { AppShellCategory, AppShellNavItem, AppShellProps, AppShellBranchSelector, AppShellExitToModulesAction, AppShellHelpAction, AppShellLayout, AppShellModuleLauncher, AppShellModuleLauncherItem, AppShellThemeToggle, AppShellTopBarContext, AppShellUserMenu, AppBarContainerProps, } from './AppShell';

package/dist/types/src/components/overlays/Drawer.d.ts

@@ -15,9 +15,12 @@ export type DrawerProps = {
     height?: CSSProperties["height"];
     headerVariant?: OverlayHeaderVariant;
     closeOnOverlay?: boolean;
+    /** Al cerrar, devuelve el foco al control que lo tenía al abrir si quedó perdido. `false` si quien lo usa decide
+     * adónde vuelve el foco. */
+    restoreFocus?: boolean;
     className?: string;
 };
-export declare const Drawer: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, className, }: DrawerProps) => import('react').ReactPortal | null;
+export declare const Drawer: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, restoreFocus, className, }: DrawerProps) => import('react').ReactPortal | null;
 /** Alias de `Drawer` — patrón shadcn Sheet (panel lateral o inferior). */
-export declare const Sheet: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, className, }: DrawerProps) => import('react').ReactPortal | null;
+export declare const Sheet: ({ open, onClose, side, title, subtitle, icon, children, footer, subheader, width, height, headerVariant, closeOnOverlay, restoreFocus, className, }: DrawerProps) => import('react').ReactPortal | null;
 export type SheetProps = DrawerProps;

package/dist/types/src/components/overlays/Foco.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/overlays/Modal.d.ts

@@ -22,9 +22,12 @@ export type ModalProps = {
     /** Oculta cabecera estándar (título, subtítulo, icono y cerrar) cuando el consumidor renderiza cabecera propia en el body. */
     hideHeader?: boolean;
     closeOnOverlay?: boolean;
+    /** Al cerrar, devuelve el foco al control que lo tenía al abrir si quedó perdido. `false` si quien lo usa decide
+     * adónde vuelve el foco. */
+    restoreFocus?: boolean;
     className?: string;
 };
-export declare const Modal: ({ open, onClose, title, subtitle, icon, children, footer, subheader, size, maxWidth, width, headerVariant, hideHeader, closeOnOverlay, className, }: ModalProps) => import('react').ReactPortal | null;
+export declare const Modal: ({ open, onClose, title, subtitle, icon, children, footer, subheader, size, maxWidth, width, headerVariant, hideHeader, closeOnOverlay, restoreFocus, className, }: ModalProps) => import('react').ReactPortal | null;
 type UseModalOptions = {
     onOpen?: () => void;
     onClose?: () => void;

package/dist/types/src/components/overlays/colorTexto.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/overlays/useFocoDeCapa.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Foco de un diálogo de la pila (Modal, Drawer). Al abrir, enfoca el primer control del panel salvo que un hijo ya haya
+ * movido el foco dentro (el visor de MediaGallery enfoca su «Cerrar»). Mientras es la capa superior, Tab no sale del
+ * panel; si otro manejador ya atendió el Tab (preventDefault), no interviene. Al cerrar, si el foco quedó perdido,
+ * vuelve al control que tenía el foco al abrir.
+ */
+export declare const useFocoDeCapa: (abierto: boolean, idCapa: string, panel: RefObject<HTMLElement | null>, devolver?: boolean) => void;

package/dist/types/src/components/overlays/useOverlayStack.consulta.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/overlays/useOverlayStack.d.ts

@@ -1,3 +1,13 @@
 import { RefObject } from 'react';
 export declare const OverlayParentContext: import('react').Context<string | null>;
 export declare const useOverlayStack: (abierto: boolean, onClose: () => void, raiz: RefObject<HTMLDivElement | null>) => string;
+/** Capa superior registrada en la pila del documento, o `null`. Lectura pura: uso interno de sf-ui. */
+export declare const overlaySuperior: (documento: Document) => {
+    id: string;
+    raiz: HTMLElement;
+} | null;
+/**
+ * Avisa después de cada alta y baja en la pila del documento. Devuelve la baja (idempotente). Cada suscripción es
+ * propia aunque se repita la función. Uso interno de sf-ui.
+ */
+export declare const suscribirPilaOverlays: (documento: Document, oyente: () => void) => () => void;

package/dist/types/src/components/table/CustomTable.d.ts

@@ -12,6 +12,8 @@ import { ExportTableColumn } from '../../utils/exportTableCsv';
  * Todos se apoyan en tokens `--sf-*` para reaccionar al tema activo.
  */
 export type TableHeaderVariant = "default" | "brand" | "soft" | "neon" | "premium" | "matrix";
+export type CustomTableDensity = "default" | "compact";
+export type CustomTableRowActionsDisplay = "menu" | "inline";
 /** Estado de una paginación que resuelve el backend (limit/offset). `page` es 1-based. */
 export type CustomTableServerPagination = {
     totalItems: number;
@@ -261,6 +263,17 @@ type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Rec
     searchPlaceholder?: string;
     /** Oculta título, toolbar y chrome exterior — para uso dentro de ExpandableTableSection u otros contenedores. */
     embedded?: boolean;
+    /**
+     * "compact": filas y cabecera bajas, letra menor y sin borde exterior del área de scroll; la tabla puede medir menos
+     * que su contenido máximo para caber en tarjetas angostas. Con `embedded` no hay título ni barra. Por defecto
+     * "default" (acabado publicado).
+     */
+    density?: CustomTableDensity;
+    /**
+     * "inline": las acciones de `getRowActions` se muestran como botones de ícono visibles en la fila (nombre accesible
+     * = `label`), en vez del menú ⋮. Por defecto "menu" (acabado publicado).
+     */
+    rowActionsDisplay?: CustomTableRowActionsDisplay;
     /**
      * Filas de detalle expandibles (master-detail). Agrega una columna de chevron al inicio
      * y, al expandir, inserta una fila con el detalle debajo de la fila padre.
@@ -280,5 +293,5 @@ type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Rec
     /** Búsqueda y orden resueltos por el host (ver `CustomTableRemote`). */
     remote?: CustomTableRemote;
 };
-export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, paginationVariant, pageSizeOptions, paginationPosition, exportOptions, serverPagination, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, onRowDoubleClick, defaultHiddenColumns, getRowContextMenu, footerSlot, showRowNumbers, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, searchPlaceholder, embedded, detail, controller, getRowId, selectionAcrossPages, remote, }: CustomTableProps<TData, TDetail>): import('react').JSX.Element;
+export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, paginationVariant, pageSizeOptions, paginationPosition, exportOptions, serverPagination, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, onRowDoubleClick, defaultHiddenColumns, getRowContextMenu, footerSlot, showRowNumbers, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, searchPlaceholder, embedded, density, rowActionsDisplay, detail, controller, getRowId, selectionAcrossPages, remote, }: CustomTableProps<TData, TDetail>): import('react').JSX.Element;
 export type { CustomColumn, CustomTableDetail, CustomTableProps, TableAggregation };

package/dist/types/src/components/table/CustomTable.densidad.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/table/CustomTable.densidad.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/table/index.d.ts

@@ -1,5 +1,5 @@
 export { CustomTable } from './CustomTable';
-export type { CustomColumn, CustomTableDetail, CustomTableExport, CustomTableExportCriteria, CustomTableExportRequest, CustomTableExportScope, CustomTableFooterContext, CustomTableProps, CustomTableRemote, CustomTableRowMenuItem, CustomTableServerPagination, CustomTableSort, TableHeaderVariant, } from './CustomTable';
+export type { CustomColumn, CustomTableDensity, CustomTableDetail, CustomTableExport, CustomTableExportCriteria, CustomTableExportRequest, CustomTableExportScope, CustomTableFooterContext, CustomTableProps, CustomTableRemote, CustomTableRowActionsDisplay, CustomTableRowMenuItem, CustomTableServerPagination, CustomTableSort, TableHeaderVariant, } from './CustomTable';
 export { AsyncCustomTable } from './AsyncCustomTable';
 export type { AsyncCustomTableProps } from './AsyncCustomTable';
 export { PaginationRangeInput } from './PaginationRangeInput';

package/dist/types/src/components/visualization/IntegrationFlow.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/IntegrationFlow.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { BadgeVariant } from '../cards/types';
+export type IntegrationFlowNode = {
+    /** Única dentro de su colección (`sources` o `targets`). */
+    key: string;
+    label: string;
+    sublabel?: string;
+    icon?: ReactNode;
+    /** Color de categoría del nodo (identifica, no indica estado). Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    /** Estado con el texto del host (ej. "Activo"); se pinta con `Badge`. */
+    status?: {
+        label: string;
+        variant?: BadgeVariant;
+    };
+};
+export type IntegrationFlowStep = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type IntegrationFlowHub = {
+    title: string;
+    icon?: ReactNode;
+    /** Imagen o ilustración grande del centro (decorativa), bajo el título. */
+    media?: ReactNode;
+    /** Texto bajo `media` (ej. el nombre del modelo de datos). */
+    subtitle?: string;
+    steps?: IntegrationFlowStep[];
+};
+/** `compact`: tres columnas desde 560px y espaciado menor. */
+export type IntegrationFlowDensity = "default" | "compact";
+/** `neutral`: líneas grises de CSS (publicado). `per-node`: una curva por nodo con su color, medida sobre el DOM. */
+export type IntegrationFlowLinks = "neutral" | "per-node";
+/** `panels`: cada columna en su propio panel con el título dentro, destinos sin tarjeta y estados rellenos. */
+export type IntegrationFlowAppearance = "default" | "panels";
+export type IntegrationFlowProps = {
+    sources: IntegrationFlowNode[];
+    hub: IntegrationFlowHub;
+    targets: IntegrationFlowNode[];
+    /** Títulos de las columnas de los extremos. Por defecto «Origen» y «Destino». */
+    labels?: {
+        sources?: string;
+        targets?: string;
+    };
+    ariaLabel?: string;
+    emptySourcesMessage?: string;
+    emptyTargetsMessage?: string;
+    density?: IntegrationFlowDensity;
+    links?: IntegrationFlowLinks;
+    appearance?: IntegrationFlowAppearance;
+    /** Con `onNodeClick` cada origen y destino es pulsable (botón superpuesto con el nombre del nodo). */
+    onNodeClick?: (collection: "sources" | "targets", key: string) => void;
+    className?: string;
+};
+/**
+ * Visualización estática de una integración: todos los orígenes van a un centro y el centro a todos los destinos. Las
+ * líneas son decorativas (CSS) y de color neutro; la información está en los tres grupos. No hay enlaces individuales,
+ * estados por enlace ni interacción. Tres columnas si el contenedor tiene al menos 720px; si no, bloques apilados.
+ */
+export declare const IntegrationFlow: ({ sources, hub, targets, labels, ariaLabel, emptySourcesMessage, emptyTargetsMessage, density, links, appearance, onNodeClick, className, }: IntegrationFlowProps) => import('react').JSX.Element;

package/dist/types/src/components/visualization/IntegrationFlow.paneles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/IntegrationFlow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/RelationGraph.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/RelationGraph.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+export type RelationGraphItem = {
+    /** Única dentro de su grupo. */
+    key: string;
+    label: string;
+    sublabel?: string;
+    /** Decorativo, antes del nombre. Se monta dos veces (una en el medidor oculto): sin efectos ni `id`. */
+    icon?: ReactNode;
+};
+export type RelationGraphGroup = {
+    /** Única en `groups`. Es la que reciben `onSelect` y `onShowMore`. */
+    key: string;
+    label: string;
+    /** Verbo de la relación del centro con el grupo (ej. "trabaja con", "opera"). Se lee como texto. */
+    relation: string;
+    /** Decorativo. Se monta dos veces (una en el medidor oculto): sin efectos ni `id`. */
+    icon?: ReactNode;
+    /** Color de categoría del grupo (borde, ícono y línea). Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    items: RelationGraphItem[];
+    /** Total real del grupo si el host no entregó todos los elementos. */
+    total?: number;
+};
+/**
+ * `auto` elige radial o lista según el espacio. `list` pinta siempre la lista: es la salida segura cuando el host sabe
+ * que la radial no le conviene, o en los casos que el freno de `auto` no cubre (CHANGELOG, «Conocido»).
+ */
+export type RelationGraphLayout = "auto" | "list";
+/**
+ * `default`: grupos en tarjetas alrededor del centro (radial desde 720px). `orbit`: retrato grande en el centro, cada
+ * grupo como un círculo con su lista al costado y el verbo sobre la línea; cabe desde unos 600px. Con `layout="list"`,
+ * o si no cabe, las dos se pintan como lista.
+ */
+export type RelationGraphVariant = "default" | "orbit";
+export type RelationGraphProps = {
+    /** `media` es decorativo y se monta dos veces (una en el medidor oculto): sin efectos ni `id`. */
+    center: {
+        label: string;
+        sublabel?: string;
+        media?: ReactNode;
+    };
+    groups: RelationGraphGroup[];
+    /** Grupo seleccionado, controlado por el host. Una clave que no existe no marca nada. */
+    selectedKey?: string;
+    /** Pide seleccionar un grupo (no significa abrirlo). Sin él no hay botones de selección. */
+    onSelect?: (groupKey: string) => void;
+    /** Elementos visibles por grupo en la disposición radial; el resto se despliega con «+N más». Por defecto 3. */
+    maxItemsPerGroup?: number;
+    /** Pide al host los elementos que no entregó (`total` mayor que `items`). Sin él, se informa como texto. */
+    onShowMore?: (groupKey: string) => void;
+    /** Por defecto `auto`. */
+    layout?: RelationGraphLayout;
+    /** Por defecto `default`. */
+    variant?: RelationGraphVariant;
+    ariaLabel?: string;
+    emptyMessage?: string;
+    className?: string;
+};
+/**
+ * Una entidad central y sus grupos de relaciones (no un grafo arbitrario: sin enlaces entre grupos). Primero se pinta como
+ * lista, que siempre cabe; con `layout="auto"` (por defecto) pasa a radial solo si el contenedor tiene al menos 720px,
+ * hay hasta 8 grupos y las cajas medidas no se solapan; con `layout="list"` se queda en lista. Distinto de `OrgTree`
+ * (jerarquía) y de `NetworkMap` (geográfico).
+ */
+export declare const RelationGraph: ({ center, groups, selectedKey, onSelect, maxItemsPerGroup, onShowMore, layout, variant, ariaLabel, emptyMessage, className, }: RelationGraphProps) => import('react').JSX.Element;

package/dist/types/src/components/visualization/RelationGraph.orbita.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/RelationGraph.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/SeleccionNodos.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/visualization/disponerOrbita.d.ts

@@ -0,0 +1,29 @@
+import { Punto } from './disponerRadial';
+export type LadoOrbita = "arriba" | "derecha" | "abajo" | "izquierda";
+export type NodoOrbita = Punto & {
+    /** Hacia dónde va la lista del grupo, fuera del nodo. */
+    lado: LadoOrbita;
+    /** Ancho máximo de la lista sin salirse del lienzo. */
+    anchoLista: number;
+    /** Borde superior de la lista respecto del centro del nodo. */
+    listaY: number;
+    /** Dónde va el verbo: un punto de la línea y la normal (unitaria) hacia la que se aparta de ella. */
+    verbo: Punto & {
+        nx: number;
+        ny: number;
+    };
+};
+export type DisposicionOrbita = {
+    alto: number;
+    centro: Punto;
+    grupos: NodoOrbita[];
+};
+export declare const RADIO_NODO_ORBITA = 38;
+export declare const RADIO_CENTRO_ORBITA = 50;
+/**
+ * Centros del retrato y de los grupos en órbita (sentido horario desde arriba) dentro de `ancho`. Solo depende del
+ * ancho y del número de grupos, no del contenido. Lo horizontal se encoge para dejar a las listas laterales al menos
+ * 108px si se puede. Devuelve `null` sin grupos, con más de 8, con menos de 600px o si alguna lista lateral quedaría
+ * con menos de 90px: entonces el componente usa la lista.
+ */
+export declare const disponerOrbita: (cantidad: number, ancho: number) => DisposicionOrbita | null;

package/dist/types/src/components/visualization/disponerRadial.d.ts

@@ -0,0 +1,19 @@
+export type CajaMedida = {
+    ancho: number;
+    alto: number;
+};
+export type Punto = {
+    x: number;
+    y: number;
+};
+export type DisposicionRadial = {
+    alto: number;
+    centro: Punto;
+    grupos: Punto[];
+};
+/**
+ * Posiciones (esquina superior izquierda) del centro y de los grupos alrededor, en sentido horario desde arriba, dentro
+ * de `ancho`. Devuelve `null` si no hay grupos, si son más de 8 o si con estos tamaños alguna caja se solaparía o se
+ * saldría: entonces el componente usa la lista.
+ */
+export declare const disponerRadial: (centro: CajaMedida, grupos: CajaMedida[], ancho: number, separacion?: number) => DisposicionRadial | null;

package/dist/types/src/components/visualization/index.d.ts

@@ -9,3 +9,7 @@ export type { NetworkLegendProps } from './NetworkLegend';
 export { ORG_TREE_DEFAULT_THEMES, buildOrgTreeRows, resolveOrgTreeTheme, countOrgTreeNodes, orgTreeRootNodes, } from './orgTreeUtils';
 export { NETWORK_STATUS_COLORS, NETWORK_STATUS_LABELS, NETWORK_EDGE_STYLES, NETWORK_BASEMAPS, NETWORK_KIND_LABELS, NETWORK_KIND_COLORS, normalizeNetworkNodes, normalizeNetworkEdges, countNetworkStatus, networkMapBounds, networkNodePositions, networkEdgeLines, } from './networkMapUtils';
 export type { OrgTreeNode, OrgTreeNodeRow, OrgTreeTheme, NetworkNode, NetworkEdge, NetworkNodeStatus, NetworkNodeKind, NetworkBasemap, NetworkEdgeType, } from './types';
+export { RelationGraph } from './RelationGraph';
+export type { RelationGraphGroup, RelationGraphItem, RelationGraphLayout, RelationGraphProps, RelationGraphVariant } from './RelationGraph';
+export { IntegrationFlow } from './IntegrationFlow';
+export type { IntegrationFlowAppearance, IntegrationFlowDensity, IntegrationFlowHub, IntegrationFlowLinks, IntegrationFlowNode, IntegrationFlowProps, IntegrationFlowStep, } from './IntegrationFlow';

package/dist/types/src/theme/temas.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/devWarning.d.ts

@@ -0,0 +1,2 @@
+export declare const avisarEnDesarrollo: (componente: string, mensaje: string) => void;
+export declare const reiniciarAvisosEnDesarrollo: () => void;

package/dist/types/src/utils/devWarning.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/foco.d.ts

@@ -0,0 +1,9 @@
+/** Puede tener el foco: tabulable o con `tabindex` (incluido -1), conectado, habilitado, visible y fuera de `inert`. */
+export declare const esEnfocableValido: (elemento: Element | null) => elemento is HTMLElement;
+export declare const tabulables: (contenedor: Element) => HTMLElement[];
+/**
+ * Destino de Tab dentro de `contenedor`: el primero o el último si el foco está fuera, la vuelta en los extremos y
+ * `null` cuando el navegador puede seguir solo. Desde un elemento de dentro que no es tabulable (un `tabindex="-1"`),
+ * el siguiente o el anterior en el orden del documento. `"vacio"` si no hay nada tabulable.
+ */
+export declare const siguienteEnContencion: (contenedor: Element, activo: Element | null, atras: boolean) => HTMLElement | "vacio" | null;

package/dist/types/src/utils/identidadColeccion.d.ts

@@ -0,0 +1,11 @@
+export type ElementoIdentificado<T> = {
+    elemento: T;
+    /** Clave del host, tal como llegó: es la que reciben los callbacks. */
+    clave: string;
+    /** Clave de React. Las válidas van en el espacio "k:" y las repetidas en "d:<n>:", sin índice, para que
+     * reordenar datos válidos no remonte nodos y ninguna clave del host colisione con una generada. */
+    claveReact: string;
+    /** Solo la primera aparición de una clave tiene identidad e interacción. */
+    esPrimera: boolean;
+};
+export declare const identificarColeccion: <T>(elementos: readonly T[], obtenerClave: (elemento: T) => string, componente: string, coleccion: string) => ElementoIdentificado<T>[];

package/dist/types/src/utils/identidadColeccion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/useAnchoContenedor.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Suma de las barras de desplazamiento verticales de los ancestros con desbordamiento propio (incluido `body` cuando
+ * desplaza él y no la ventana) y de la ventana, en píxeles. Si un elemento pierde ancho y esta suma crece en al menos
+ * lo perdido, lo explica una barra; si pierde más, alguien redimensionó.
+ */
+export declare const barrasVerticalesDeAncestros: (nodo: Element) => number;
+export declare const BARRA_MINIMA = 3;
+export declare const TOLERANCIA_BARRA = 2;
+/**
+ * ¿Una barra que apareció (o desapareció) explica un cambio de ancho? Sí si la barra mide al menos BARRA_MINIMA y el
+ * ancho cambió en sentido contrario y como mucho lo que ella mide, más TOLERANCIA_BARRA por el redondeo del zoom
+ * fraccionario. Una barra no le quita a un elemento más que su grosor, aunque reparta el resto en columnas.
+ */
+export declare const explicadoPorBarra: (anchoCambiado: number, barra: number) => boolean;
+/**
+ * Ancho del contenedor en píxeles, o `null` si no se puede medir (sin `ResizeObserver`: jsdom, SSR) o todavía no se
+ * midió. Quien lo usa pinta su disposición estrecha con `null`: es la que nunca desborda. Con `conBarras`, el tercer
+ * valor son las barras verticales de los ancestros medidas en el mismo aviso (`barrasVerticalesDeAncestros`).
+ */
+export declare const useAnchoContenedor: <T extends HTMLElement>(conBarras?: boolean) => [(nodo: T | null) => void, number | null, number | null];
+/** Píxeles de un tamaño en rem, con la fuente raíz real del documento (respeta el zoom de texto del usuario). */
+export declare const remAPixeles: (rem: number, documento?: Document | undefined) => number;

package/dist/types/src/utils/useAnchoContenedor.test.d.ts

@@ -0,0 +1 @@
+export {};