danielgm-ui 0.1.1 → 0.3.0

package/README.md

@@ -4,7 +4,7 @@ Componentes React con estilos y APIs propios. Parte de sus interacciones y compo
 
 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
 
@@ -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/image-cropper.d.ts

@@ -0,0 +1,24 @@
+/** Recorte local: el navegador decodifica la imagen y exporta el área visible a un Blob. */
+import { type HTMLAttributes, type ReactElement } from 'react';
+/** Opciones del recortador. Las URLs externas requieren CORS para poder exportarse. */
+export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /** Archivo local, Blob o URL de la imagen; null muestra el estado vacío. */
+    src: string | Blob | null;
+    /** Recibe el archivo recortado, sin realizar ninguna subida. */
+    onCrop: (blob: Blob) => void | Promise<void>;
+    /** Relación anchura/altura del recorte. @defaultValue 1 */
+    aspectRatio?: number;
+    /** Anchura de salida en píxeles. @defaultValue 512 */
+    outputWidth?: number;
+    /** Formato de salida del canvas. @defaultValue 'image/png' */
+    outputType?: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Calidad JPEG/WebP entre 0 y 1. @defaultValue 0.92 */
+    quality?: number;
+    /** Límite superior del zoom respecto al encuadre inicial. @defaultValue 4 */
+    maxZoom?: number;
+    /** Idioma de los controles integrados. @defaultValue 'en' */
+    locale?: 'es' | 'en';
+    disabled?: boolean;
+}
+/** Visor con arrastre, zoom, desplazamiento por teclado y exportación al confirmar. */
+export declare function ImageCropper({ src, onCrop, aspectRatio, outputWidth, outputType, quality, maxZoom, locale, disabled, className, style, ...props }: ImageCropperProps): ReactElement;