danielgm-ui 0.1.0 → 0.2.0

package/README.md

@@ -2,11 +2,17 @@
 
 Componentes React con estilos y APIs propios. Parte de sus interacciones y comportamientos de accesibilidad se apoya en [Radix Primitives](https://www.radix-ui.com/primitives).
 
-Componentes React con TypeScript y CSS independiente. El paquete todavía no está publicado en npm.
+Componentes React con TypeScript y CSS independiente, publicados con licencia MIT.
 
-**Componentes:** Button, Badge, Typography, Input, Textarea, Checkbox, Switch, Select, CustomSelect, Modal, Tooltip, Tabs, Accordion, Card, Container, Alert, Separator, Transition, DropdownMenu, ContextMenu, RadioGroup, Toast, Skeleton y Loader. Card incluye CardHeader, CardContent y CardFooter.
+**Componentes:** Button, Badge, Typography, Input, Textarea, Checkbox, Switch, Select, CustomSelect, Modal, Tooltip, Tabs, Accordion, Card, Container, Header, Alert, Separator, Transition, DropdownMenu, ContextMenu, RadioGroup, Toast, Skeleton y Loader. Card incluye CardHeader, CardContent y CardFooter; Header incluye HeaderBrand, HeaderNav y HeaderActions.
 
-## Instalación local
+## Instalación
+
+```sh
+npm install danielgm-ui
+```
+
+Para probar una compilación local del monorepo:
 
 Desde el monorepo:
 
@@ -18,13 +24,7 @@ npm run pack:ui
 En el proyecto consumidor, instala el archivo generado (ajusta la ruta):
 
 ```sh
-npm install /ruta/danielgm-ui-0.1.0.tgz
-```
-
-Después de publicarlo en npm con este nombre:
-
-```sh
-npm install danielgm-ui
+npm install /ruta/danielgm-ui-<versión>.tgz
 ```
 
 ## Uso en Next.js
@@ -60,7 +60,30 @@ export default function Example() {
 }
 ```
 
-Badge, Card, Container, Alert, Separator, Skeleton y Loader se pueden renderizar desde Server Components. Los módulos que usan hooks o refs conservan `use client` en el paquete publicado. En React con Vite, importa el CSS en `main.tsx`. En Astro, configura `@astrojs/react` y usa una isla React con `client:load` o `client:visible` para los ejemplos interactivos.
+Badge, Card, Container, Header, Alert, Separator, Skeleton y Loader se pueden renderizar desde Server Components. Los módulos que usan hooks o refs conservan `use client` en el paquete publicado. En React con Vite, importa el CSS en `main.tsx`. En Astro, configura `@astrojs/react` y usa una isla React con `client:load` o `client:visible` para los ejemplos interactivos.
+
+La cabecera de cristal de la documentación también está disponible para otras aplicaciones:
+
+```tsx
+import { Header, HeaderActions, HeaderBrand, HeaderNav } from 'danielgm-ui';
+
+export function SiteHeader() {
+  return (
+    <Header sticky>
+      <HeaderBrand href="/">Mi proyecto</HeaderBrand>
+      <HeaderNav aria-label="Navegación principal">
+        <a href="/productos">Productos</a>
+        <a href="/ayuda">Ayuda</a>
+      </HeaderNav>
+      <HeaderActions>
+        <a href="/cuenta">Mi cuenta</a>
+      </HeaderActions>
+    </Header>
+  );
+}
+```
+
+`Header` usa `header` nativo, centra la isla y permite que el contenido crezca en pantallas estrechas. `sticky` es opcional. Personaliza el ancho, el margen lateral, la separación superior y el cristal mediante las variables `--dgm-header-*`; la página de documentación utiliza estos mismos estilos del paquete.
 
 ## Personalización
 
@@ -283,7 +306,7 @@ Importa también `danielgm-ui/styles.css` una vez en el layout. `size` admite `s
 
 ## Nuevos controles y estructuras
 
-Slider, RangeSlider, MultiSelect, NumberInput, ToggleGroup, EmptyState, NavigationMenu, AspectRatio, ResizablePanels, TreeView y Carousel. Slider y RangeSlider comparten página de documentación. Cada componente tiene ejemplos independientes en español e inglés, sus propiedades y recomendaciones de accesibilidad.
+Slider, RangeSlider, MultiSelect, NumberInput, ToggleGroup, EmptyState, NavigationMenu, AspectRatio, ResizablePanels, TreeView, Carousel y AnimatedGrid. Slider y RangeSlider comparten página de documentación. Cada componente tiene ejemplos independientes en español e inglés, sus propiedades y recomendaciones de accesibilidad.
 
 Todos se importan desde `danielgm-ui` y usan la misma hoja `danielgm-ui/styles.css`. `EmptyState` y `AspectRatio` son estáticos y compatibles con Server Components; las piezas interactivas mantienen su propia frontera `use client`.
 
@@ -292,6 +315,40 @@ Todos se importan desde `danielgm-ui` y usan la misma hoja `danielgm-ui/styles.c
 - `ResizablePanels` ajusta dos paneles con porcentajes, límites, teclado y puntero.
 - `TreeView` ofrece selección única, expansión y búsqueda por prefijo; requiere IDs únicos y datos sin ciclos. El teclado mantiene visible la fila enfocada mediante un desplazamiento mínimo, sin seleccionar automáticamente ni desplazar al pulsar con el ratón.
 - `Carousel` muestra una diapositiva por vista, sin autoplay ni bucle infinito, con botones, indicadores opcionales y gestos de scroll nativos.
+- `AnimatedGrid` gestiona internamente la presencia y el movimiento de elementos con claves estables. Usa el efecto scale de Transition para altas, bajas y cambios de fila; desliza los cambios dentro de una fila y anima la altura. Conserva montado el contenido real para mantener su estado y foco.
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { AnimatedGrid } from 'danielgm-ui';
+
+type Item = { id: string; title: string };
+
+function Projects() {
+  const [items, setItems] = useState<Item[]>([]);
+  return (
+    <>
+      <button
+        onClick={() =>
+          setItems((current) => [...current, { id: crypto.randomUUID(), title: 'Nuevo proyecto' }])
+        }
+      >
+        Añadir
+      </button>
+      <AnimatedGrid
+        items={items}
+        getKey={(item) => item.id}
+        renderItem={(item) => <article>{item.title}</article>}
+        columns={{ base: 1, sm: 2, md: 3 }}
+        gap="1rem"
+      />
+    </>
+  );
+}
+```
+
+Las columnas responden al ancho del contenedor (36, 56 y 76 rem). Usa identificadores únicos y estables; no uses el índice. El montaje inicial no se anima. Las salidas reservan su celda hasta finalizar y las copias visuales de cambios de fila son inertes y no accesibles. `duration` controla las fases (240 ms por defecto); con `duration={0}` o movimiento reducido, el resultado es inmediato.
 
 ### Iconografía y contraseñas
 

package/TABLER-LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020-2026 Paweł Kuna
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020-2026 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/animated-grid.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+/** Número de columnas según el ancho del propio contenedor (576, 896 y 1216 px). */
+export interface AnimatedGridColumns {
+    /** Columnas por debajo de 36rem. @defaultValue 1 */
+    base?: number;
+    /** Columnas desde 36rem. @defaultValue 2 */
+    sm?: number;
+    /** Columnas desde 56rem. @defaultValue 3 */
+    md?: number;
+    /** Columnas desde 76rem. @defaultValue igual que md */
+    lg?: number;
+}
+/** Colección controlada: cada clave debe ser única y estable entre cambios de orden. */
+export interface AnimatedGridProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Elementos en el orden deseado. Las salidas conservan su celda antes de aplicar el nuevo orden. */
+    items: readonly T[];
+    /** Identificador único y estable, no el índice de la lista. */
+    getKey: (item: T) => string;
+    /** Contenido de cada elemento. Conserva el tipo de sus componentes para preservar su estado. */
+    renderItem: (item: T) => ReactNode;
+    /** Columnas fijas o configuración responsive medida sobre el contenedor. @defaultValue { base: 1, sm: 2, md: 3 } */
+    columns?: number | AnimatedGridColumns;
+    /** Separación entre filas y columnas. @defaultValue '1rem' */
+    gap?: CSSProperties['gap'];
+    /** Duración de Transition, del desplazamiento y de la altura en ms. @defaultValue 240 */
+    duration?: number;
+}
+/**
+ * Cuadrícula con presencia interna. El DOM real se reordena por claves; los cambios de
+ * fila usan una copia visual efímera mientras el mismo contenido entra en su nueva celda.
+ */
+export declare function AnimatedGrid<T>({ items, getKey, renderItem, columns, gap, duration, className, style, ...props }: AnimatedGridProps<T>): ReactElement;

package/dist/animated-grid.js

@@ -0,0 +1,346 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { readGridPositions, reconcileGridSlots, } from './internal/animated-grid-layout.js';
+import { Transition } from './transition.js';
+import { cx } from './utils.js';
+function sameKeys(left, right) {
+    return left.length === right.length && left.every((key, index) => key === right[index]);
+}
+function columnCount(value, fallback) {
+    return value !== undefined && Number.isFinite(value) ? Math.max(1, Math.floor(value)) : fallback;
+}
+function translation(node) {
+    const transform = getComputedStyle(node).transform;
+    if (transform === 'none' || typeof DOMMatrixReadOnly === 'undefined')
+        return { x: 0, y: 0 };
+    const matrix = new DOMMatrixReadOnly(transform);
+    return { x: matrix.m41, y: matrix.m42 };
+}
+/**
+ * La copia solo representa el pasado visual. Nunca recibe eventos, foco, nombres de
+ * formulario ni identificadores duplicados; el árbol React original sigue montado.
+ */
+function inertVisualCopy(node) {
+    const copy = node.cloneNode(true);
+    copy.setAttribute('aria-hidden', 'true');
+    copy.setAttribute('inert', '');
+    copy.style.pointerEvents = 'none';
+    for (const element of copy.querySelectorAll('[id], [name], [tabindex], [for], a[href], button, input, select, textarea, [contenteditable]')) {
+        element.removeAttribute('id');
+        element.removeAttribute('name');
+        element.removeAttribute('for');
+        element.removeAttribute('href');
+        element.removeAttribute('contenteditable');
+        element.tabIndex = -1;
+    }
+    for (const element of copy.querySelectorAll('iframe, object, embed, audio, video'))
+        element.remove();
+    return copy;
+}
+/**
+ * Cuadrícula con presencia interna. El DOM real se reordena por claves; los cambios de
+ * fila usan una copia visual efímera mientras el mismo contenido entra en su nueva celda.
+ */
+export function AnimatedGrid({ items, getKey, renderItem, columns = { base: 1, sm: 2, md: 3 }, gap = '1rem', duration = 240, className, style, ...props }) {
+    const desiredKeys = items.map(getKey);
+    const desiredItems = new Map(items.map((item, index) => [desiredKeys[index], item]));
+    if (desiredItems.size !== items.length)
+        throw new Error('AnimatedGrid requires unique item keys.');
+    const rootRef = useRef(null);
+    const gridRef = useRef(null);
+    const ghostLayerRef = useRef(null);
+    const nodesRef = useRef(new Map());
+    const observedRef = useRef(new Set());
+    const observerRef = useRef(null);
+    const positionsRef = useRef(null);
+    const heightRef = useRef(null);
+    const rootWidthRef = useRef(null);
+    const heightAnimationRef = useRef(null);
+    const slidesRef = useRef(new Map());
+    const ghostsRef = useRef(new Map());
+    const reentriesRef = useRef(new Map());
+    const frameRef = useRef(null);
+    const reducedRef = useRef(false);
+    const lastItemsRef = useRef(desiredItems);
+    const desiredRef = useRef({ keys: desiredKeys, items: desiredItems });
+    const liveKeysRef = useRef(new Set(desiredKeys));
+    const milliseconds = Number.isFinite(duration) ? Math.max(0, duration) : 240;
+    const durationRef = useRef(milliseconds);
+    durationRef.current = milliseconds;
+    desiredRef.current = { keys: desiredKeys, items: desiredItems };
+    const [presence, setPresence] = useState(() => ({
+        requested: desiredKeys,
+        slots: desiredKeys.map((key) => ({
+            key,
+            item: desiredItems.get(key),
+            exiting: false,
+            exited: false,
+            appear: false,
+            exitHeight: 0,
+        })),
+    }));
+    if (!sameKeys(presence.requested, desiredKeys)) {
+        const heights = new Map([...(positionsRef.current ?? [])].map(([key, value]) => [key, value.height]));
+        setPresence({
+            requested: desiredKeys,
+            slots: reconcileGridSlots(presence.slots, desiredKeys, desiredItems, lastItemsRef.current, heights),
+        });
+    }
+    lastItemsRef.current = desiredItems;
+    liveKeysRef.current = new Set(presence.slots.filter((slot) => !slot.exiting).map((slot) => slot.key));
+    const stopMotion = useCallback(() => {
+        heightAnimationRef.current?.cancel();
+        heightAnimationRef.current = null;
+        for (const animation of slidesRef.current.values())
+            animation.cancel();
+        slidesRef.current.clear();
+        for (const release of ghostsRef.current.values())
+            release();
+        ghostsRef.current.clear();
+        for (const release of reentriesRef.current.values())
+            release();
+        reentriesRef.current.clear();
+    }, []);
+    const makeGhost = useCallback((key, node, from, x, y) => {
+        ghostsRef.current.get(key)?.();
+        const layer = ghostLayerRef.current;
+        if (!layer)
+            return;
+        const copy = inertVisualCopy(node);
+        copy.style.position = 'absolute';
+        copy.style.left = `${x}px`;
+        copy.style.top = `${y}px`;
+        copy.style.width = `${from.width}px`;
+        copy.style.height = `${from.height}px`;
+        copy.style.margin = '0';
+        const visual = copy.querySelector('.dgm-transition');
+        if (!visual)
+            return;
+        visual.removeAttribute('data-enter');
+        visual.removeAttribute('data-grid-reenter');
+        visual.dataset.state = 'closed';
+        visual.dataset.variant = 'scale';
+        visual.style.setProperty('--dgm-transition-duration', `${durationRef.current}ms`);
+        let timeout = 0;
+        const release = () => {
+            window.clearTimeout(timeout);
+            visual.removeEventListener('animationend', finished);
+            visual.removeEventListener('animationcancel', finished);
+            copy.remove();
+            if (ghostsRef.current.get(key) === release)
+                ghostsRef.current.delete(key);
+        };
+        const finished = (event) => {
+            if (event.target === visual && event.animationName === 'dgm-transition-scale-out')
+                release();
+        };
+        layer.append(copy);
+        ghostsRef.current.set(key, release);
+        visual.addEventListener('animationend', finished);
+        visual.addEventListener('animationcancel', finished);
+        timeout = window.setTimeout(release, durationRef.current + 80);
+    }, []);
+    const replayScale = useCallback((key, node) => {
+        const visual = node.querySelector(':scope > .dgm-transition');
+        if (!visual || visual.hasAttribute('data-enter'))
+            return;
+        reentriesRef.current.get(key)?.();
+        visual.removeAttribute('data-grid-reenter');
+        visual.getBoundingClientRect();
+        let timeout = 0;
+        const release = () => {
+            window.clearTimeout(timeout);
+            visual.removeEventListener('animationend', finished);
+            visual.removeEventListener('animationcancel', finished);
+            visual.removeAttribute('data-grid-reenter');
+            if (reentriesRef.current.get(key) === release)
+                reentriesRef.current.delete(key);
+        };
+        const finished = (event) => {
+            if (event.target === visual && event.animationName === 'dgm-transition-scale-in')
+                release();
+        };
+        visual.setAttribute('data-grid-reenter', '');
+        reentriesRef.current.set(key, release);
+        visual.addEventListener('animationend', finished);
+        visual.addEventListener('animationcancel', finished);
+        timeout = window.setTimeout(release, durationRef.current + 80);
+    }, []);
+    const measure = useCallback(() => {
+        const root = rootRef.current;
+        const grid = gridRef.current;
+        if (!root || !grid)
+            return;
+        const next = readGridPositions(nodesRef.current);
+        const previous = positionsRef.current;
+        const nextHeight = grid.offsetHeight;
+        const oldHeight = heightRef.current;
+        const motion = !reducedRef.current && durationRef.current > 0;
+        for (const key of ghostsRef.current.keys()) {
+            if (!liveKeysRef.current.has(key) || !next.has(key))
+                ghostsRef.current.get(key)?.();
+        }
+        if (previous && motion) {
+            for (const [key, target] of next) {
+                const from = previous.get(key);
+                const node = nodesRef.current.get(key);
+                if (!from || !node || !liveKeysRef.current.has(key))
+                    continue;
+                if (Math.abs(from.left - target.left) < 0.5 &&
+                    Math.abs(from.top - target.top) < 0.5 &&
+                    from.row === target.row)
+                    continue;
+                const active = slidesRef.current.get(key);
+                const offset = active ? translation(node) : { x: 0, y: 0 };
+                const oldX = from.left + offset.x;
+                const oldY = from.top + offset.y;
+                active?.cancel();
+                slidesRef.current.delete(key);
+                if (from.row !== target.row) {
+                    makeGhost(key, node, from, oldX, oldY);
+                    replayScale(key, node);
+                }
+                else if (typeof node.animate === 'function') {
+                    const dx = oldX - target.left;
+                    const dy = oldY - target.top;
+                    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                        continue;
+                    const animation = node.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0, 0)' }], { duration: durationRef.current, easing: 'ease', fill: 'both' });
+                    slidesRef.current.set(key, animation);
+                    animation.onfinish = () => {
+                        if (slidesRef.current.get(key) === animation) {
+                            slidesRef.current.delete(key);
+                            animation.cancel();
+                        }
+                    };
+                }
+            }
+            if (oldHeight !== null &&
+                Math.abs(oldHeight - nextHeight) > 0.5 &&
+                typeof root.animate === 'function') {
+                const fromHeight = heightAnimationRef.current
+                    ? parseFloat(getComputedStyle(root).height)
+                    : oldHeight;
+                heightAnimationRef.current?.cancel();
+                const animation = root.animate([{ height: `${fromHeight}px` }, { height: `${nextHeight}px` }], { duration: durationRef.current, easing: 'ease', fill: 'both' });
+                heightAnimationRef.current = animation;
+                animation.onfinish = () => {
+                    if (heightAnimationRef.current === animation) {
+                        heightAnimationRef.current = null;
+                        animation.cancel();
+                    }
+                };
+            }
+        }
+        positionsRef.current = next;
+        heightRef.current = nextHeight;
+    }, [makeGhost, replayScale]);
+    const measureRef = useRef(measure);
+    measureRef.current = measure;
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const grid = gridRef.current;
+        if (!root || !grid)
+            return;
+        const preference = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+        reducedRef.current = Boolean(preference?.matches);
+        const onPreference = () => {
+            reducedRef.current = Boolean(preference?.matches);
+            if (reducedRef.current)
+                stopMotion();
+        };
+        preference?.addEventListener('change', onPreference);
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver((entries) => {
+                let changed = false;
+                for (const entry of entries) {
+                    if (entry.target !== root) {
+                        changed = true;
+                        continue;
+                    }
+                    const width = entry.contentRect.width;
+                    if (rootWidthRef.current === null || Math.abs(rootWidthRef.current - width) > 0.5) {
+                        rootWidthRef.current = width;
+                        changed = true;
+                    }
+                }
+                if (changed && frameRef.current === null) {
+                    frameRef.current = requestAnimationFrame(() => {
+                        frameRef.current = null;
+                        measureRef.current();
+                    });
+                }
+            });
+            observer.observe(root);
+            observer.observe(grid);
+            observerRef.current = observer;
+        }
+        return () => {
+            if (frameRef.current !== null)
+                cancelAnimationFrame(frameRef.current);
+            observerRef.current?.disconnect();
+            observerRef.current = null;
+            observedRef.current.clear();
+            preference?.removeEventListener('change', onPreference);
+            stopMotion();
+        };
+    }, [stopMotion]);
+    useLayoutEffect(() => {
+        if (milliseconds === 0)
+            stopMotion();
+    }, [milliseconds, stopMotion]);
+    useLayoutEffect(() => {
+        const observer = observerRef.current;
+        if (observer) {
+            const current = new Set(nodesRef.current.values());
+            for (const node of observedRef.current)
+                if (!current.has(node))
+                    observer.unobserve(node);
+            for (const node of current)
+                if (!observedRef.current.has(node))
+                    observer.observe(node);
+            observedRef.current = current;
+        }
+        measure();
+    });
+    const onExited = useCallback((key) => {
+        setPresence((current) => {
+            if (desiredRef.current.items.has(key))
+                return current;
+            const slot = current.slots.find((candidate) => candidate.key === key);
+            if (!slot?.exiting || slot.exited)
+                return current;
+            const completed = current.slots.map((candidate) => candidate.key === key ? { ...candidate, exited: true } : candidate);
+            if (completed.some((candidate) => candidate.exiting && !candidate.exited)) {
+                return { ...current, slots: completed };
+            }
+            const desired = desiredRef.current;
+            const survivors = completed.filter((candidate) => !candidate.exiting);
+            return {
+                requested: desired.keys,
+                slots: reconcileGridSlots(survivors, desired.keys, desired.items, lastItemsRef.current, new Map()),
+            };
+        });
+    }, []);
+    const responsive = typeof columns === 'number'
+        ? { base: columns, sm: columns, md: columns, lg: columns }
+        : columns;
+    const base = columnCount(responsive.base, 1);
+    const sm = columnCount(responsive.sm, base);
+    const md = columnCount(responsive.md, sm);
+    const lg = columnCount(responsive.lg, md);
+    const gridStyle = {
+        '--dgm-grid-columns-base': base,
+        '--dgm-grid-columns-sm': sm,
+        '--dgm-grid-columns-md': md,
+        '--dgm-grid-columns-lg': lg,
+        gap,
+    };
+    return (_jsxs("div", { ...props, ref: rootRef, className: cx('dgm-animated-grid', className), style: style, children: [_jsx("div", { ref: gridRef, className: "dgm-animated-grid-layout", style: gridStyle, children: presence.slots.map((slot) => (_jsx("div", { ref: (node) => {
+                        if (node)
+                            nodesRef.current.set(slot.key, node);
+                        else
+                            nodesRef.current.delete(slot.key);
+                    }, className: "dgm-animated-grid-item", style: slot.exiting ? { minBlockSize: slot.exitHeight } : undefined, children: _jsx(Transition, { show: !slot.exiting, appear: slot.appear, variant: "scale", duration: milliseconds, onExited: () => onExited(slot.key), children: renderItem(desiredItems.has(slot.key) ? desiredItems.get(slot.key) : slot.item) }) }, slot.key))) }), _jsx("div", { ref: ghostLayerRef, className: "dgm-animated-grid-ghosts", "aria-hidden": "true", inert: true })] }));
+}

package/dist/header.d.ts

@@ -0,0 +1,24 @@
+/** Cabecera de página estática; los enlaces y acciones mantienen su semántica nativa. */
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
+/** Atributos del header y posición opcional mientras se desplaza la página. */
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    /** Fija la isla al borde superior durante el scroll. @defaultValue false */
+    sticky?: boolean;
+}
+/** Isla de cristal adaptable que admite marca, navegación y acciones como hijos. */
+export declare function Header({ sticky, className, ...props }: HeaderProps): ReactElement;
+/** Enlace de marca; proporciona un destino reconocible y conserva los atributos nativos. */
+export interface HeaderBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+/** La marca enlaza normalmente con la portada de la aplicación. */
+export declare function HeaderBrand({ className, ...props }: HeaderBrandProps): ReactElement;
+/** Atributos de la navegación; facilita un nombre accesible con aria-label. */
+export interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
+}
+/** Navegación principal para enlaces; usa aria-label si hay otra navegación en la página. */
+export declare function HeaderNav({ className, ...props }: HeaderNavProps): ReactElement;
+/** Atributos del grupo de acciones de la cabecera. */
+export interface HeaderActionsProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Agrupa controles sin añadir roles o estados interactivos propios. */
+export declare function HeaderActions({ className, ...props }: HeaderActionsProps): ReactElement;

package/dist/header.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './utils.js';
+/** Isla de cristal adaptable que admite marca, navegación y acciones como hijos. */
+export function Header({ sticky = false, className, ...props }) {
+    return (_jsx("header", { ...props, className: cx('dgm-header', sticky && 'dgm-header--sticky', className) }));
+}
+/** La marca enlaza normalmente con la portada de la aplicación. */
+export function HeaderBrand({ className, ...props }) {
+    return _jsx("a", { ...props, className: cx('dgm-header-brand', className) });
+}
+/** Navegación principal para enlaces; usa aria-label si hay otra navegación en la página. */
+export function HeaderNav({ className, ...props }) {
+    return _jsx("nav", { ...props, className: cx('dgm-header-nav', className) });
+}
+/** Agrupa controles sin añadir roles o estados interactivos propios. */
+export function HeaderActions({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('dgm-header-actions', className) });
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@
  * El CSS se importa por separado desde `danielgm-ui/styles.css`.
  */
 export { Button, type ButtonProps } from './button.js';
+export { Header, HeaderBrand, HeaderNav, HeaderActions, type HeaderProps, type HeaderBrandProps, type HeaderNavProps, type HeaderActionsProps, } from './header.js';
 export { Typography, type TypographyProps, type TypographyVariant, type TypographyElement, type TypographyTone, } from './typography.js';
 export { Slider, RangeSlider, type SliderProps, type RangeSliderProps, type SliderBaseProps, } from './slider.js';
 export { MultiSelect, type MultiSelectProps } from './multi-select.js';
@@ -41,6 +42,7 @@ export { CustomSelect, type CustomSelectProps, type SelectOption } from './custo
 export { Modal, type ModalProps } from './modal.js';
 export { Tooltip, type TooltipProps } from './tooltip.js';
 export { Transition, type TransitionProps } from './transition.js';
+export { AnimatedGrid, type AnimatedGridProps, type AnimatedGridColumns } from './animated-grid.js';
 export { Tabs, type TabsProps, type TabItem } from './tabs.js';
 export { Accordion, type AccordionProps, type AccordionItem, type AccordionSingleProps, type AccordionMultipleProps, } from './accordion.js';
 export { Input, Textarea, Select, type InputProps, type TextareaProps, type SelectProps, } from './fields.js';

package/dist/index.js

@@ -6,6 +6,7 @@
  * El CSS se importa por separado desde `danielgm-ui/styles.css`.
  */
 export { Button } from './button.js';
+export { Header, HeaderBrand, HeaderNav, HeaderActions, } from './header.js';
 export { Typography, } from './typography.js';
 export { Slider, RangeSlider, } from './slider.js';
 export { MultiSelect } from './multi-select.js';
@@ -41,6 +42,7 @@ export { CustomSelect } from './custom-select.js';
 export { Modal } from './modal.js';
 export { Tooltip } from './tooltip.js';
 export { Transition } from './transition.js';
+export { AnimatedGrid } from './animated-grid.js';
 export { Tabs } from './tabs.js';
 export { Accordion, } from './accordion.js';
 export { Input, Textarea, Select, } from './fields.js';

package/dist/internal/animated-grid-layout.d.ts

@@ -0,0 +1,24 @@
+/** Datos de presencia independientes de React: una salida conserva su celda hasta completarse. */
+export interface GridSlot<T> {
+    key: string;
+    item: T;
+    exiting: boolean;
+    exited: boolean;
+    appear: boolean;
+    exitHeight: number;
+}
+/** Reconciliación de claves: las altas y el nuevo orden esperan mientras exista una salida. */
+export declare function reconcileGridSlots<T>(previous: readonly GridSlot<T>[], desiredKeys: readonly string[], desiredItems: ReadonlyMap<string, T>, lastItems: ReadonlyMap<string, T>, heights: ReadonlyMap<string, number>): GridSlot<T>[];
+/** Coordenadas de layout, ajenas a transformaciones visuales que aún estén animándose. */
+export interface GridPosition {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    row: number;
+}
+/**
+ * Las celdas de una fila comparten offsetTop aunque su contenido tenga alturas distintas.
+ * Agrupar esos valores evita confundir el cambio de altura de una fila con un salto de fila.
+ */
+export declare function readGridPositions(nodes: ReadonlyMap<string, HTMLDivElement>): Map<string, GridPosition>;

package/dist/internal/animated-grid-layout.js

@@ -0,0 +1,55 @@
+/** Reconciliación de claves: las altas y el nuevo orden esperan mientras exista una salida. */
+export function reconcileGridSlots(previous, desiredKeys, desiredItems, lastItems, heights) {
+    const desired = new Set(desiredKeys);
+    const retained = previous.map((slot) => {
+        if (desired.has(slot.key)) {
+            return slot.exiting ? { ...slot, exiting: false, exited: false } : slot;
+        }
+        if (slot.exiting)
+            return slot;
+        return {
+            ...slot,
+            item: lastItems.has(slot.key) ? lastItems.get(slot.key) : slot.item,
+            exiting: true,
+            exited: false,
+            exitHeight: heights.get(slot.key) ?? 0,
+        };
+    });
+    if (retained.some((slot) => slot.exiting))
+        return retained;
+    const existing = new Map(retained.map((slot) => [slot.key, slot]));
+    return desiredKeys.map((key) => existing.get(key) ?? {
+        key,
+        item: desiredItems.get(key),
+        exiting: false,
+        exited: false,
+        appear: true,
+        exitHeight: 0,
+    });
+}
+/**
+ * Las celdas de una fila comparten offsetTop aunque su contenido tenga alturas distintas.
+ * Agrupar esos valores evita confundir el cambio de altura de una fila con un salto de fila.
+ */
+export function readGridPositions(nodes) {
+    const measured = [...nodes]
+        .filter(([, node]) => node.isConnected)
+        .map(([key, node]) => ({
+        key,
+        left: node.offsetLeft,
+        top: node.offsetTop,
+        width: node.offsetWidth,
+        height: node.offsetHeight,
+    }));
+    const rows = new Map();
+    let row = -1;
+    let rowTop = Number.NEGATIVE_INFINITY;
+    for (const { key, top } of [...measured].sort((a, b) => a.top - b.top)) {
+        if (row < 0 || Math.abs(rowTop - top) > 2) {
+            row++;
+            rowTop = top;
+        }
+        rows.set(key, row);
+    }
+    return new Map(measured.map(({ key, ...position }) => [key, { ...position, row: rows.get(key) }]));
+}

package/dist/styles.css

@@ -20,6 +20,15 @@
   --dgm-danger-hover: #912018;
   --dgm-on-danger: #fff;
   --dgm-radius: 0.625rem;
+  /* Isla de cristal: los tokens permiten igualar la cabecera con el tema anfitrión. */
+  --dgm-header-max-width: 85rem;
+  --dgm-header-gutter: 1.5rem;
+  --dgm-header-offset: 1rem;
+  --dgm-header-height: 4rem;
+  --dgm-header-glass: color-mix(in srgb, var(--dgm-surface) 76%, transparent);
+  --dgm-header-border: color-mix(in srgb, var(--dgm-border) 65%, transparent);
+  --dgm-header-shadow: rgb(0 0 0 / 18%);
+  --dgm-header-highlight: rgb(255 255 255 / 8%);
   /* Escala pública y roles: la aplicación puede adaptar toda la tipografía desde la raíz. */
   --dgm-font: inherit;
   --dgm-font-mono: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
@@ -199,7 +208,9 @@
   .dgm-multi-select,
   .dgm-resizable,
   .dgm-tree,
-  .dgm-carousel
+  .dgm-carousel,
+  .dgm-header,
+  .dgm-animated-grid
 ) {
   font-family: var(--dgm-font, inherit);
   font-size: var(--dgm-text-body);
@@ -294,6 +305,84 @@
   padding-inline: 0;
 }
 
+/* Header: el desenfoque pertenece a la isla, sin transformar ni recortar los portales. */
+.dgm-header {
+  box-sizing: border-box;
+  inline-size: min(var(--dgm-header-max-width), calc(100% - 2 * var(--dgm-header-gutter)));
+  min-block-size: var(--dgm-header-height);
+  margin-inline: auto;
+  padding: 0.5rem 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  border: 1px solid var(--dgm-header-border);
+  border-radius: 1.25rem;
+  background: var(--dgm-header-glass);
+  -webkit-backdrop-filter: blur(24px) saturate(125%);
+  backdrop-filter: blur(24px) saturate(125%);
+  box-shadow:
+    0 10px 32px var(--dgm-header-shadow),
+    inset 0 1px 0 var(--dgm-header-highlight);
+  color: var(--dgm-text);
+}
+.dgm-header--sticky {
+  position: sticky;
+  inset-block-start: var(--dgm-header-offset);
+  z-index: 30;
+}
+.dgm-header-brand,
+.dgm-header-nav,
+.dgm-header-actions {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+}
+.dgm-header-brand {
+  gap: 0.75rem;
+  color: inherit;
+  font-weight: var(--dgm-font-weight-bold);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.dgm-header-nav,
+.dgm-header-actions {
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.dgm-header-nav a,
+.dgm-header-actions a {
+  border-radius: var(--dgm-radius);
+  padding: 0.4rem 0.6rem;
+  color: inherit;
+  text-decoration: none;
+  transition: var(--dgm-hover-transition);
+}
+.dgm-header-nav a:hover,
+.dgm-header-actions a:hover {
+  background: var(--dgm-hover);
+  color: var(--dgm-on-hover);
+}
+.dgm-header-brand:focus-visible,
+.dgm-header-nav a:focus-visible,
+.dgm-header-actions a:focus-visible {
+  outline: 3px solid var(--dgm-primary);
+  outline-offset: 3px;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .dgm-header {
+    background: var(--dgm-surface);
+  }
+}
+@media (forced-colors: active) {
+  .dgm-header {
+    border-color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+  }
+}
+
 /* 3. Botones: jerarquías, tamaños y ancho. Se conserva el texto durante la carga. */
 /* Los controles internos (cierre, calendario, contraseña, etc.) comparten el hover
  * aunque no usen Button. La baja especificidad preserva sus transiciones propias. */
@@ -1415,7 +1504,51 @@ button.dgm-step:hover:not(:disabled),
     transform: translateY(8px);
   }
 }
+
+/* AnimatedGrid usa las mismas fases scale de Transition y desplaza solo las celdas afectadas. */
+.dgm-animated-grid {
+  position: relative;
+  min-inline-size: 0;
+  container: dgm-animated-grid / inline-size;
+}
+.dgm-animated-grid-layout {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--dgm-grid-columns-base), minmax(0, 1fr));
+  align-items: start;
+  min-inline-size: 0;
+}
+.dgm-animated-grid-item {
+  min-inline-size: 0;
+}
+.dgm-animated-grid-ghosts {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+.dgm-animated-grid .dgm-transition[data-grid-reenter] {
+  animation-name: dgm-transition-scale-in;
+}
+@container dgm-animated-grid (min-width: 36rem) {
+  .dgm-animated-grid-layout {
+    grid-template-columns: repeat(var(--dgm-grid-columns-sm), minmax(0, 1fr));
+  }
+}
+@container dgm-animated-grid (min-width: 56rem) {
+  .dgm-animated-grid-layout {
+    grid-template-columns: repeat(var(--dgm-grid-columns-md), minmax(0, 1fr));
+  }
+}
+@container dgm-animated-grid (min-width: 76rem) {
+  .dgm-animated-grid-layout {
+    grid-template-columns: repeat(var(--dgm-grid-columns-lg), minmax(0, 1fr));
+  }
+}
 @media (prefers-reduced-motion: reduce) {
+  .dgm-animated-grid .dgm-transition[data-grid-reenter] {
+    animation: none;
+  }
   .dgm-transition-collapse {
     transition: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danielgm-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Accessible React components for Next.js and the web.",
   "type": "module",
   "main": "./dist/index.js",
@@ -40,6 +40,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "homepage": "https://components.danielgm.dev",
   "license": "MIT",
   "keywords": [
     "react",