danielgm-ui 0.1.1 → 0.3.0

package/dist/image-cropper.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Recorte local: el navegador decodifica la imagen y exporta el área visible a un Blob. */
+import { useEffect, useId, useRef, useState, } from 'react';
+import { Button } from './button.js';
+import { Slider } from './slider.js';
+import { clampCropOffset, getCropGeometry } from './internal/image-crop.js';
+import { cx } from './utils.js';
+/** Visor con arrastre, zoom, desplazamiento por teclado y exportación al confirmar. */
+export function ImageCropper({ src, onCrop, aspectRatio = 1, outputWidth = 512, outputType = 'image/png', quality = 0.92, maxZoom = 4, locale = 'en', disabled = false, className, style, ...props }) {
+    const [imageUrl, setImageUrl] = useState();
+    const [imageSize, setImageSize] = useState();
+    const [viewport, setViewport] = useState({ width: 0, height: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [dragging, setDragging] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [message, setMessage] = useState();
+    const stage = useRef(null);
+    const image = useRef(null);
+    const drag = useRef(undefined);
+    const id = useId();
+    const es = locale === 'es';
+    const ratio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;
+    const zoomLimit = Number.isFinite(maxZoom) ? Math.max(1, maxZoom) : 4;
+    const width = Number.isFinite(outputWidth) ? Math.max(1, Math.round(outputWidth)) : 512;
+    const geometry = imageSize && viewport.width > 0 && viewport.height > 0
+        ? getCropGeometry(imageSize.width, imageSize.height, viewport.width, viewport.height, zoom, offset)
+        : undefined;
+    useEffect(() => {
+        if (!geometry)
+            return;
+        setOffset((current) => {
+            const next = clampCropOffset(current, geometry);
+            return next.x === current.x && next.y === current.y ? current : next;
+        });
+        // La posición se ajusta solo cuando cambian las medidas o el zoom.
+    }, [imageSize?.width, imageSize?.height, viewport.width, viewport.height, zoom]);
+    useEffect(() => {
+        drag.current = undefined;
+        setDragging(false);
+        setImageSize(undefined);
+        setOffset({ x: 0, y: 0 });
+        setZoom(1);
+        setMessage(undefined);
+        if (!src) {
+            setImageUrl(undefined);
+            return;
+        }
+        const url = typeof src === 'string' ? src : URL.createObjectURL(src);
+        setImageUrl(url);
+        return () => {
+            if (typeof src !== 'string')
+                URL.revokeObjectURL(url);
+        };
+    }, [src]);
+    useEffect(() => {
+        if (!disabled)
+            return;
+        drag.current = undefined;
+        setDragging(false);
+    }, [disabled]);
+    useEffect(() => {
+        if (!stage.current)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            setViewport({ width: entry.contentRect.width, height: entry.contentRect.height });
+        });
+        observer.observe(stage.current);
+        return () => observer.disconnect();
+    }, []);
+    function move(next) {
+        if (!geometry)
+            return;
+        setOffset(clampCropOffset(next, geometry));
+    }
+    async function crop() {
+        if (!geometry || !image.current || saving || disabled)
+            return;
+        setSaving(true);
+        setMessage(undefined);
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = Math.max(1, Math.round(width / ratio));
+            const context = canvas.getContext('2d');
+            if (!context)
+                throw new Error('Canvas unavailable');
+            context.drawImage(image.current, geometry.x, geometry.y, geometry.width, geometry.height, 0, 0, canvas.width, canvas.height);
+            const blob = await new Promise((resolve, reject) => {
+                canvas.toBlob((result) => (result ? resolve(result) : reject(new Error('Image export failed'))), outputType, Math.max(0, Math.min(1, quality)));
+            });
+            await onCrop(blob);
+        }
+        catch {
+            setMessage(es
+                ? 'No se pudo recortar la imagen. Comprueba que la URL permita CORS.'
+                : 'Could not crop the image. Check that the URL allows CORS.');
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    const labels = es
+        ? {
+            region: 'Área de recorte',
+            hint: 'Arrastra la imagen o usa las flechas para encuadrarla.',
+            zoom: 'Zoom',
+            crop: 'Recortar imagen',
+            empty: 'Selecciona una imagen para recortar.',
+            invalid: 'No se pudo abrir la imagen.',
+        }
+        : {
+            region: 'Crop area',
+            hint: 'Drag the image or use the arrow keys to position it.',
+            zoom: 'Zoom',
+            crop: 'Crop image',
+            empty: 'Choose an image to crop.',
+            invalid: 'Could not open the image.',
+        };
+    return (_jsxs("div", { ...props, className: cx('dgm-image-cropper', className), style: style, "data-disabled": disabled || undefined, children: [_jsxs("div", { ref: stage, className: "dgm-image-cropper-stage", style: { '--dgm-crop-ratio': ratio }, role: "group", "aria-label": labels.region, "aria-describedby": `${id}-hint`, tabIndex: imageSize && !disabled ? 0 : -1, "data-dragging": dragging || undefined, onPointerDown: (event) => {
+                    if (!geometry || disabled || event.button !== 0)
+                        return;
+                    event.currentTarget.focus();
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    drag.current = {
+                        pointerId: event.pointerId,
+                        x: event.clientX,
+                        y: event.clientY,
+                        offsetX: offset.x,
+                        offsetY: offset.y,
+                    };
+                    setDragging(true);
+                }, onPointerMove: (event) => {
+                    if (disabled || !drag.current || drag.current.pointerId !== event.pointerId)
+                        return;
+                    move({
+                        x: drag.current.offsetX + event.clientX - drag.current.x,
+                        y: drag.current.offsetY + event.clientY - drag.current.y,
+                    });
+                }, onPointerUp: (event) => {
+                    if (drag.current?.pointerId !== event.pointerId)
+                        return;
+                    drag.current = undefined;
+                    setDragging(false);
+                    event.currentTarget.releasePointerCapture(event.pointerId);
+                }, onPointerCancel: () => {
+                    drag.current = undefined;
+                    setDragging(false);
+                }, onKeyDown: (event) => {
+                    if (!geometry || disabled)
+                        return;
+                    const step = event.shiftKey ? 1 : 10;
+                    const delta = {
+                        ArrowLeft: { x: -step, y: 0 },
+                        ArrowRight: { x: step, y: 0 },
+                        ArrowUp: { x: 0, y: -step },
+                        ArrowDown: { x: 0, y: step },
+                    }[event.key];
+                    if (!delta)
+                        return;
+                    event.preventDefault();
+                    move({ x: offset.x + delta.x, y: offset.y + delta.y });
+                }, children: [imageUrl ? (_jsx("img", { ref: image, alt: "", crossOrigin: typeof src === 'string' && !src.startsWith('data:') && !src.startsWith('blob:')
+                            ? 'anonymous'
+                            : undefined, src: imageUrl, draggable: false, onLoad: (event) => {
+                            const current = event.currentTarget;
+                            setImageSize({ width: current.naturalWidth, height: current.naturalHeight });
+                            setMessage(undefined);
+                        }, onError: () => {
+                            setImageSize(undefined);
+                            setMessage(labels.invalid);
+                        }, style: geometry
+                            ? {
+                                width: imageSize?.width,
+                                height: imageSize?.height,
+                                transform: `translate(-50%, -50%) translate(${Math.max(-geometry.maxOffsetX, Math.min(geometry.maxOffsetX, offset.x))}px, ${Math.max(-geometry.maxOffsetY, Math.min(geometry.maxOffsetY, offset.y))}px) scale(${geometry.scale})`,
+                            }
+                            : { visibility: 'hidden' } })) : (_jsx("span", { className: "dgm-image-cropper-empty", children: labels.empty })), imageSize && _jsx("span", { className: "dgm-image-cropper-guides", "aria-hidden": "true" })] }), _jsx("p", { id: `${id}-hint`, className: "dgm-description", children: labels.hint }), _jsxs("div", { className: "dgm-image-cropper-controls", children: [_jsx(Slider, { label: labels.zoom, min: 1, max: Math.max(1.01, zoomLimit), step: 0.01, value: zoom, onValueChange: setZoom, formatValue: (value) => `${Math.round(value * 100)}%`, disabled: disabled || !imageSize || zoomLimit === 1 }), _jsx(Button, { onClick: crop, disabled: disabled || !geometry, loading: saving, children: labels.crop })] }), message && (_jsx("p", { className: "dgm-error", role: "alert", children: message }))] }));
+}

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';
@@ -29,6 +30,7 @@ export { CheckboxGroup, SwitchGroup, type CheckboxGroupProps, type SwitchGroupPr
 export { DatePicker, DateRangePicker, type DatePickerProps, type DateRangePickerProps, type DateRangeValue, type DatePickerBaseProps, } from './date-picker.js';
 export { DataTable, type DataTableProps, type DataColumn, type DataTableSort, } from './data-table.js';
 export { FileUpload, type FileUploadProps, type FileRejection } from './file-upload.js';
+export { ImageCropper, type ImageCropperProps } from './image-cropper.js';
 export { CommandPalette, type CommandPaletteProps, type CommandAction } from './command-palette.js';
 export { Stepper, type StepperProps, type StepItem } from './stepper.js';
 export { DropdownMenu, type DropdownMenuProps, type DropdownMenuItem } from './dropdown-menu.js';
@@ -41,6 +43,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';
@@ -29,6 +30,7 @@ export { CheckboxGroup, SwitchGroup, } from './choice-group.js';
 export { DatePicker, DateRangePicker, } from './date-picker.js';
 export { DataTable, } from './data-table.js';
 export { FileUpload } from './file-upload.js';
+export { ImageCropper } from './image-cropper.js';
 export { CommandPalette } from './command-palette.js';
 export { Stepper } from './stepper.js';
 export { DropdownMenu } from './dropdown-menu.js';
@@ -41,6 +43,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/internal/image-crop.d.ts

@@ -0,0 +1,25 @@
+/** Geometría compartida entre el visor y la exportación al canvas. */
+export interface CropGeometry {
+    scale: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    maxOffsetX: number;
+    maxOffsetY: number;
+}
+export declare function clampCropOffset(offset: {
+    x: number;
+    y: number;
+}, bounds: {
+    maxOffsetX: number;
+    maxOffsetY: number;
+}): {
+    x: number;
+    y: number;
+};
+/** El mismo rectángulo gobierna la posición visible y los píxeles exportados. */
+export declare function getCropGeometry(imageWidth: number, imageHeight: number, viewportWidth: number, viewportHeight: number, zoom: number, offset: {
+    x: number;
+    y: number;
+}): CropGeometry;

package/dist/internal/image-crop.js

@@ -0,0 +1,22 @@
+export function clampCropOffset(offset, bounds) {
+    return {
+        x: Math.max(-bounds.maxOffsetX, Math.min(bounds.maxOffsetX, offset.x)),
+        y: Math.max(-bounds.maxOffsetY, Math.min(bounds.maxOffsetY, offset.y)),
+    };
+}
+/** El mismo rectángulo gobierna la posición visible y los píxeles exportados. */
+export function getCropGeometry(imageWidth, imageHeight, viewportWidth, viewportHeight, zoom, offset) {
+    const scale = Math.max(viewportWidth / imageWidth, viewportHeight / imageHeight) * zoom;
+    const maxOffsetX = Math.max(0, (imageWidth * scale - viewportWidth) / 2);
+    const maxOffsetY = Math.max(0, (imageHeight * scale - viewportHeight) / 2);
+    const limited = clampCropOffset(offset, { maxOffsetX, maxOffsetY });
+    return {
+        scale,
+        x: (imageWidth * scale - viewportWidth) / (2 * scale) - limited.x / scale,
+        y: (imageHeight * scale - viewportHeight) / (2 * scale) - limited.y / scale,
+        width: viewportWidth / scale,
+        height: viewportHeight / scale,
+        maxOffsetX,
+        maxOffsetY,
+    };
+}