@inkra/react 0.1.0 → 0.2.0

package/dist/hover-card/index.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useEffect, useRef, useState, } from 'react';
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, } from '../overlay/index.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const HoverCardContext = createContext(null);
+function useHoverCardContext(part) {
+    const context = useContext(HoverCardContext);
+    if (!context)
+        throw new Error(`${part} must be used inside HoverCard.Root.`);
+    return context;
+}
+export function HoverCardRoot({ children, closeDelay = 300, defaultOpen = false, onOpenChange, open, openDelay = 700, ...props }) {
+    const controlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const currentOpen = controlled ? open : uncontrolledOpen;
+    const currentOpenRef = useRef(currentOpen);
+    const openReasonRef = useRef('programmatic');
+    const timerRef = useRef(null);
+    currentOpenRef.current = currentOpen;
+    const cancelPending = () => {
+        if (timerRef.current === null)
+            return;
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    };
+    const commitOpen = (nextOpen) => {
+        cancelPending();
+        if (nextOpen === currentOpenRef.current)
+            return;
+        if (!controlled) {
+            currentOpenRef.current = nextOpen;
+            setUncontrolledOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+        if (!nextOpen)
+            openReasonRef.current = 'programmatic';
+    };
+    const schedule = (nextOpen, delay, reason) => {
+        cancelPending();
+        if (nextOpen === currentOpenRef.current)
+            return;
+        openReasonRef.current = reason;
+        const safeDelay = Number.isFinite(delay) ? Math.max(0, delay) : 0;
+        if (safeDelay === 0) {
+            commitOpen(nextOpen);
+            return;
+        }
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            commitOpen(nextOpen);
+        }, safeDelay);
+    };
+    useEffect(() => cancelPending, []);
+    return (_jsx(HoverCardContext.Provider, { value: {
+            cancelPending,
+            getOpenReason: () => openReasonRef.current,
+            markExplicitOpen: () => {
+                cancelPending();
+                openReasonRef.current = 'press';
+            },
+            scheduleClose: () => schedule(false, closeDelay, 'programmatic'),
+            scheduleOpen: reason => schedule(true, openDelay, reason),
+        }, children: _jsx(Popover.Root, { ...props, modal: false, open: currentOpen, onOpenChange: commitOpen, children: children }) }));
+}
+export const HoverCardTrigger = forwardRef(function HoverCardTrigger({ onBlur, onClick, onFocus, onPointerDown, onPointerEnter, onPointerLeave, ...props }, ref) {
+    const context = useHoverCardContext('HoverCard.Trigger');
+    return (_jsx(Popover.Trigger, { ...props, ref: ref, onBlur: event => {
+            onBlur?.(event);
+            if (!event.defaultPrevented)
+                context.scheduleClose();
+        }, onFocus: event => {
+            onFocus?.(event);
+            if (!event.defaultPrevented)
+                context.scheduleOpen('focus');
+        }, onClick: event => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                context.markExplicitOpen();
+        }, onPointerDown: event => {
+            onPointerDown?.(event);
+            if (!event.defaultPrevented)
+                context.cancelPending();
+        }, onPointerEnter: event => {
+            onPointerEnter?.(event);
+            if (!event.defaultPrevented && event.pointerType !== 'touch')
+                context.scheduleOpen('hover');
+        }, onPointerLeave: event => {
+            onPointerLeave?.(event);
+            if (!event.defaultPrevented && event.pointerType !== 'touch')
+                context.scheduleClose();
+        } }));
+});
+export const HoverCardContent = forwardRef(function HoverCardContent({ avoidCollisions = true, children, className, collisionPadding = 16, focusOnOpen = 'press', onBlurCapture, onFocusCapture, onOpenAutoFocus, onPointerDown, onPointerEnter, onPointerLeave, sideOffset = 8, ...props }, ref) {
+    const context = useHoverCardContext('HoverCard.Content');
+    return (_jsx(Popover.Portal, { children: _jsx(Popover.Content, { ...props, avoidCollisions: avoidCollisions, className: classes('inkra-hover-card__content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, onBlurCapture: event => {
+                onBlurCapture?.(event);
+                if (event.defaultPrevented)
+                    return;
+                const nextTarget = event.relatedTarget;
+                if (!(nextTarget instanceof Node) || !event.currentTarget.contains(nextTarget)) {
+                    context.scheduleClose();
+                }
+            }, onFocusCapture: event => {
+                onFocusCapture?.(event);
+                if (!event.defaultPrevented)
+                    context.cancelPending();
+            }, onOpenAutoFocus: event => {
+                onOpenAutoFocus?.(event);
+                if (event.defaultPrevented)
+                    return;
+                const reason = context.getOpenReason();
+                const shouldFocus = focusOnOpen === 'always'
+                    || focusOnOpen === 'press' && reason === 'press'
+                    || focusOnOpen === 'focus-and-press' && (reason === 'focus' || reason === 'press');
+                if (!shouldFocus)
+                    event.preventDefault();
+            }, onPointerDown: event => {
+                onPointerDown?.(event);
+                if (!event.defaultPrevented)
+                    context.cancelPending();
+            }, onPointerEnter: event => {
+                onPointerEnter?.(event);
+                if (!event.defaultPrevented && event.pointerType !== 'touch')
+                    context.cancelPending();
+            }, onPointerLeave: event => {
+                onPointerLeave?.(event);
+                if (!event.defaultPrevented && event.pointerType !== 'touch')
+                    context.scheduleClose();
+            }, children: children }) }));
+});
+export const HoverCardTitle = PopoverTitle;
+export const HoverCardDescription = PopoverDescription;
+export const HoverCardClose = PopoverClose;
+export const HoverCard = Object.freeze({
+    Root: HoverCardRoot,
+    Trigger: HoverCardTrigger,
+    Content: HoverCardContent,
+    Title: HoverCardTitle,
+    Description: HoverCardDescription,
+    Close: HoverCardClose,
+});

package/dist/image-cropper/index.d.ts

@@ -0,0 +1,82 @@
+import type { HTMLAttributeReferrerPolicy, HTMLAttributes } from 'react';
+import { ImageCropperExportError } from './model.js';
+import type { ImageCropperArea, ImageCropperExportOptions, ImageCropperExportType, ImageCropperPoint, ImageCropperSize } from './model.js';
+export type ImageCropperAspect = number | 'free';
+export type ImageCropperLoadState = 'loading' | 'ready' | 'error';
+export type ImageCropperInteractionSource = 'mouse' | 'touch' | 'wheel' | 'keyboard';
+export type ImageCropperChangeReason = ImageCropperInteractionSource | 'control' | 'reset' | 'source-change';
+export interface ImageCropperChangeDetails {
+    reason: ImageCropperChangeReason;
+}
+export interface ImageCropperSelection {
+    /** Percentage coordinates relative to the original image. */
+    percentages: ImageCropperArea;
+    /** Integer coordinates in the original image's natural pixel space. */
+    pixels: ImageCropperArea;
+    naturalSize: ImageCropperSize;
+}
+export interface ImageCropperExportResult {
+    blob: Blob;
+    width: number;
+    height: number;
+    type: ImageCropperExportType;
+    selection: ImageCropperSelection;
+}
+export interface ImageCropperLabels {
+    cropper: string;
+    instructions: string;
+    loading: string;
+    failedTitle: string;
+    failedDescription: string;
+    retry: string;
+    zoom: string;
+    cropWidth: string;
+    cropHeight: string;
+    reset: string;
+    export: string;
+    exporting: string;
+}
+export interface ImageCropperHandle {
+    exportCrop(options?: ImageCropperExportOptions): Promise<ImageCropperExportResult>;
+    getSelection(): ImageCropperSelection | null;
+    reset(): void;
+}
+export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onError'> {
+    source: string | Blob;
+    alt: string;
+    aspect?: ImageCropperAspect;
+    crop?: ImageCropperPoint;
+    defaultCrop?: ImageCropperPoint;
+    onCropChange?: (crop: ImageCropperPoint, details: ImageCropperChangeDetails) => void;
+    zoom?: number;
+    defaultZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    zoomStep?: number;
+    onZoomChange?: (zoom: number, details: ImageCropperChangeDetails) => void;
+    cropAreaSize?: ImageCropperSize;
+    defaultCropAreaSize?: ImageCropperSize;
+    onCropAreaSizeChange?: (size: ImageCropperSize, details: ImageCropperChangeDetails) => void;
+    onSelectionChange?: (selection: ImageCropperSelection) => void;
+    onSelectionCommit?: (selection: ImageCropperSelection) => void;
+    onLoadStateChange?: (state: ImageCropperLoadState) => void;
+    onMediaLoaded?: (naturalSize: ImageCropperSize) => void;
+    onLoadError?: (error: Error) => void;
+    onExport?: (result: ImageCropperExportResult) => void;
+    onExportError?: (error: ImageCropperExportError) => void;
+    exportOptions?: ImageCropperExportOptions;
+    showControls?: boolean;
+    showExport?: boolean;
+    showGrid?: boolean;
+    zoomWithScroll?: boolean;
+    resetOnSourceChange?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: HTMLAttributeReferrerPolicy;
+    labels?: Partial<ImageCropperLabels>;
+    nonce?: string;
+}
+export declare const ImageCropper: import("react").ForwardRefExoticComponent<ImageCropperProps & import("react").RefAttributes<ImageCropperHandle>>;
+export { IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS, IMAGE_CROPPER_MAX_OUTPUT_EDGE, IMAGE_CROPPER_MAX_OUTPUT_PIXELS, ImageCropperExportError, clampImageCropperArea, exportImageCrop, resolveImageCropperOutputSize, } from './model.js';
+export type { ImageCropperArea, ImageCropperExportErrorCode, ImageCropperExportOptions, ImageCropperExportType, ImageCropperPoint, ImageCropperSize, } from './model.js';

package/dist/image-cropper/index.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __iconData as downloadIcon } from 'lucide-react/dist/esm/icons/download.mjs';
+import { __iconData as imageOffIcon } from 'lucide-react/dist/esm/icons/image-off.mjs';
+import { __iconData as rotateCcwIcon } from 'lucide-react/dist/esm/icons/rotate-ccw.mjs';
+import Cropper from 'react-easy-crop';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useId, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Slider } from '../slider/index.js';
+import { ImageCropperExportError, exportImageCrop, } from './model.js';
+const downloadPaths = downloadIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const imageOffPaths = imageOffIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const resetPaths = rotateCcwIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+// Lucide LoaderCircle geometry, rendered through the shared PencilIcon engine.
+const loadingPaths = [{ d: 'M21 12a9 9 0 1 1-6.219-8.56' }];
+const DEFAULT_CROP = Object.freeze({ x: 0, y: 0 });
+const MIN_FREE_CROP_SIZE = 48;
+const defaultLabels = {
+    cropper: 'Image crop area',
+    instructions: 'Use pointer gestures or arrow keys to move the image. Use the zoom control. In free aspect mode, use the size controls or Alt plus arrow keys to resize the crop area.',
+    loading: 'Loading image',
+    failedTitle: 'Image unavailable',
+    failedDescription: 'The image could not be loaded. Check the source and try again.',
+    retry: 'Retry image',
+    zoom: 'Zoom',
+    cropWidth: 'Crop width',
+    cropHeight: 'Crop height',
+    reset: 'Reset crop',
+    export: 'Export crop',
+    exporting: 'Exporting crop',
+};
+function samePoint(left, right) {
+    return left.x === right.x && left.y === right.y;
+}
+function sameSize(left, right) {
+    return left === right || Boolean(left && right && left.width === right.width && left.height === right.height);
+}
+function validAspect(aspect) {
+    return aspect === 'free' || !Number.isFinite(aspect) || aspect <= 0 ? 1 : aspect;
+}
+function exportFailure(error) {
+    return error instanceof ImageCropperExportError
+        ? error
+        : new ImageCropperExportError('canvas', 'The crop could not be exported.', { cause: error });
+}
+export const ImageCropper = forwardRef(function ImageCropper({ alt, aspect = 1, className, crop: cropProp, cropAreaSize: cropAreaSizeProp, crossOrigin, defaultCrop = DEFAULT_CROP, defaultCropAreaSize, defaultZoom = 1, disabled = false, exportOptions, labels: labelOverrides, maxZoom = 3, minZoom = 1, nonce, onCropAreaSizeChange, onCropChange, onExport, onExportError, onLoadError, onLoadStateChange, onMediaLoaded, onSelectionChange, onSelectionCommit, onZoomChange, readOnly = false, referrerPolicy, resetOnSourceChange = true, showControls = true, showExport = Boolean(onExport), showGrid = true, source, zoom: zoomProp, zoomStep = 0.1, zoomWithScroll = true, ...props }, forwardedRef) {
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const generatedId = useId();
+    const resolvedId = props.id ?? `inkra-image-cropper-${generatedId}`;
+    const stageRef = useRef(null);
+    const imageRef = useRef(null);
+    const selectionRef = useRef(null);
+    const interactionSourceRef = useRef('mouse');
+    const initialSourceRef = useRef(source);
+    const [blobUrl, setBlobUrl] = useState(null);
+    const [attempt, setAttempt] = useState(0);
+    const [loadState, setLoadState] = useState('loading');
+    const [internalCrop, setInternalCrop] = useState(defaultCrop);
+    const [internalZoom, setInternalZoom] = useState(defaultZoom);
+    const [internalCropAreaSize, setInternalCropAreaSize] = useState(defaultCropAreaSize ?? null);
+    const [naturalSize, setNaturalSize] = useState(null);
+    const [stageSize, setStageSize] = useState({ width: 640, height: 400 });
+    const [exporting, setExporting] = useState(false);
+    const crop = cropProp ?? internalCrop;
+    const zoom = zoomProp ?? internalZoom;
+    const cropAreaSize = cropAreaSizeProp ?? internalCropAreaSize;
+    const freeCropAreaSize = cropAreaSize ?? (aspect === 'free'
+        ? { width: Math.min(stageSize.width, stageSize.height), height: Math.min(stageSize.width, stageSize.height) }
+        : null);
+    const sourceUrl = typeof source === 'string' ? source : blobUrl;
+    const interactionDisabled = disabled || readOnly || loadState !== 'ready';
+    const announceLoadState = useCallback((state) => {
+        setLoadState(state);
+        onLoadStateChange?.(state);
+    }, [onLoadStateChange]);
+    const commitCrop = useCallback((next, reason) => {
+        if (cropProp === undefined)
+            setInternalCrop(next);
+        onCropChange?.(next, { reason });
+    }, [cropProp, onCropChange]);
+    const commitZoom = useCallback((next, reason) => {
+        const bounded = Math.min(maxZoom, Math.max(minZoom, next));
+        if (zoomProp === undefined)
+            setInternalZoom(bounded);
+        onZoomChange?.(bounded, { reason });
+    }, [maxZoom, minZoom, onZoomChange, zoomProp]);
+    const commitCropAreaSize = useCallback((next, reason) => {
+        const bounded = {
+            width: Math.round(Math.min(Math.max(MIN_FREE_CROP_SIZE, next.width), Math.max(MIN_FREE_CROP_SIZE, stageSize.width))),
+            height: Math.round(Math.min(Math.max(MIN_FREE_CROP_SIZE, next.height), Math.max(MIN_FREE_CROP_SIZE, stageSize.height))),
+        };
+        if (cropAreaSizeProp === undefined)
+            setInternalCropAreaSize(bounded);
+        onCropAreaSizeChange?.(bounded, { reason });
+    }, [cropAreaSizeProp, onCropAreaSizeChange, stageSize.height, stageSize.width]);
+    const reset = useCallback((reason = 'reset') => {
+        if (!samePoint(crop, defaultCrop))
+            commitCrop(defaultCrop, reason);
+        if (zoom !== defaultZoom)
+            commitZoom(defaultZoom, reason);
+        const nextSize = defaultCropAreaSize ?? null;
+        if (!sameSize(cropAreaSize, nextSize)) {
+            if (nextSize)
+                commitCropAreaSize(nextSize, reason);
+            else if (cropAreaSizeProp === undefined)
+                setInternalCropAreaSize(null);
+        }
+        selectionRef.current = null;
+    }, [commitCrop, commitCropAreaSize, commitZoom, crop, cropAreaSize, cropAreaSizeProp, defaultCrop, defaultCropAreaSize, defaultZoom, zoom]);
+    useEffect(() => {
+        if (typeof source === 'string') {
+            setBlobUrl(null);
+            return undefined;
+        }
+        const nextUrl = URL.createObjectURL(source);
+        setBlobUrl(nextUrl);
+        return () => URL.revokeObjectURL(nextUrl);
+    }, [source]);
+    useEffect(() => {
+        const stage = stageRef.current;
+        if (!stage || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const update = () => {
+            const rect = stage.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0)
+                setStageSize({ width: rect.width, height: rect.height });
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(stage);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (initialSourceRef.current === source)
+            return;
+        initialSourceRef.current = source;
+        setAttempt(0);
+        setNaturalSize(null);
+        selectionRef.current = null;
+        announceLoadState('loading');
+        if (resetOnSourceChange)
+            reset('source-change');
+    }, [announceLoadState, reset, resetOnSourceChange, source]);
+    const makeSelection = useCallback((percentages, pixels) => {
+        if (!naturalSize)
+            return null;
+        return {
+            percentages: { ...percentages },
+            pixels: { ...pixels },
+            naturalSize,
+        };
+    }, [naturalSize]);
+    const exportCurrent = useCallback(async (options = exportOptions ?? {}) => {
+        const image = imageRef.current;
+        const selection = selectionRef.current;
+        if (!selection)
+            throw new ImageCropperExportError('invalid-selection', 'No completed crop selection is available.');
+        if (!image)
+            throw new ImageCropperExportError('image-not-ready', 'The image element is not available.');
+        const result = await exportImageCrop(image, selection.pixels, options);
+        return { ...result, selection };
+    }, [exportOptions]);
+    useImperativeHandle(forwardedRef, () => ({
+        exportCrop: exportCurrent,
+        getSelection: () => selectionRef.current,
+        reset: () => reset(),
+    }), [exportCurrent, reset]);
+    const handleExport = async () => {
+        setExporting(true);
+        try {
+            onExport?.(await exportCurrent());
+        }
+        catch (error) {
+            onExportError?.(exportFailure(error));
+        }
+        finally {
+            setExporting(false);
+        }
+    };
+    const resizeFreeCrop = (axis, delta) => {
+        if (aspect !== 'free' || interactionDisabled)
+            return;
+        const base = cropAreaSize ?? {
+            width: Math.min(stageSize.width, stageSize.height),
+            height: Math.min(stageSize.width, stageSize.height),
+        };
+        commitCropAreaSize({ ...base, [axis]: base[axis] + delta }, 'control');
+    };
+    const handleRootKeyDown = (event) => {
+        props.onKeyDown?.(event);
+        if (event.defaultPrevented || !event.altKey || aspect !== 'free')
+            return;
+        if (!stageRef.current?.contains(event.target))
+            return;
+        const step = event.shiftKey ? 24 : 8;
+        if (event.key === 'ArrowLeft')
+            resizeFreeCrop('width', -step);
+        else if (event.key === 'ArrowRight')
+            resizeFreeCrop('width', step);
+        else if (event.key === 'ArrowUp')
+            resizeFreeCrop('height', -step);
+        else if (event.key === 'ArrowDown')
+            resizeFreeCrop('height', step);
+        else
+            return;
+        event.preventDefault();
+    };
+    const engineAspect = validAspect(aspect);
+    const engineCropSize = aspect === 'free' && freeCropAreaSize ? freeCropAreaSize : undefined;
+    const rootProps = { ...props };
+    delete rootProps.onKeyDown;
+    return _jsxs("div", { ...rootProps, className: ['inkra-image-cropper', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-read-only": readOnly || undefined, "data-state": loadState, onKeyDown: handleRootKeyDown, children: [_jsxs("div", { "aria-busy": loadState === 'loading' || undefined, "aria-describedby": `${resolvedId}-instructions`, "aria-disabled": disabled || undefined, "aria-label": labels.cropper, className: "inkra-image-cropper__stage", ref: stageRef, children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-image-cropper__stage-surface", radius: 8, variant: "outline" }), sourceUrl ? _jsx(Cropper, { aspect: engineAspect, classes: {
+                            containerClassName: 'inkra-image-cropper__engine',
+                            mediaClassName: 'inkra-image-cropper__media',
+                            cropAreaClassName: 'inkra-image-cropper__area',
+                        }, crop: crop, cropSize: engineCropSize, image: sourceUrl, keyboardStep: 1, maxZoom: maxZoom, mediaProps: { alt, crossOrigin, referrerPolicy }, minZoom: minZoom, nonce: nonce, onCropAreaChange: (percentages, pixels) => {
+                            const selection = makeSelection(percentages, pixels);
+                            if (!selection)
+                                return;
+                            selectionRef.current = selection;
+                            onSelectionChange?.(selection);
+                        }, onCropChange: next => {
+                            if (!interactionDisabled)
+                                commitCrop(next, interactionSourceRef.current);
+                        }, onCropComplete: (percentages, pixels) => {
+                            const selection = makeSelection(percentages, pixels);
+                            if (!selection)
+                                return;
+                            selectionRef.current = selection;
+                            onSelectionCommit?.(selection);
+                        }, onCropSizeChange: next => {
+                            if (aspect === 'free' && !cropAreaSize)
+                                commitCropAreaSize(next, 'control');
+                        }, onInteractionStart: ({ source: interactionSource }) => {
+                            interactionSourceRef.current = interactionSource;
+                        }, onMediaLoaded: (media) => {
+                            const nextNaturalSize = { width: media.naturalWidth, height: media.naturalHeight };
+                            setNaturalSize(nextNaturalSize);
+                            announceLoadState('ready');
+                            onMediaLoaded?.(nextNaturalSize);
+                        }, onZoomChange: next => {
+                            if (!interactionDisabled)
+                                commitZoom(next, interactionSourceRef.current);
+                        }, disableAutomaticStylesInjection: true, restrictPosition: true, roundCropAreaPixels: true, setImageRef: (ref) => {
+                            imageRef.current = ref.current;
+                        }, showGrid: showGrid, zoom: zoom, zoomWithScroll: zoomWithScroll && !interactionDisabled }, `${sourceUrl}:${attempt}`) : null, loadState === 'loading' ? _jsxs("div", { className: "inkra-image-cropper__state", role: "status", children: [_jsx(PencilIcon, { "aria-hidden": "true", className: "inkra-image-cropper__spinner", paths: loadingPaths, seed: `${resolvedId}-loading`, size: 40, sourceSize: 24 }), _jsx(PencilText, { children: labels.loading })] }) : null, loadState === 'error' ? _jsxs("div", { className: "inkra-image-cropper__state", role: "alert", children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.failedTitle }), _jsx(PencilText, { as: "p", children: labels.failedDescription }), _jsx(Button, { variant: "outline", onClick: () => {
+                                    setAttempt(current => current + 1);
+                                    announceLoadState('loading');
+                                }, children: labels.retry })] }) : null, sourceUrl && loadState !== 'error' ? _jsx("img", { alt: "", "aria-hidden": "true", className: "inkra-image-cropper__load-probe", crossOrigin: crossOrigin, onError: () => {
+                            const error = new Error('The crop image could not be loaded.');
+                            announceLoadState('error');
+                            onLoadError?.(error);
+                        }, referrerPolicy: referrerPolicy, src: sourceUrl }, `probe:${sourceUrl}:${attempt}`) : null] }), _jsx("span", { className: "inkra-image-cropper__instructions", id: `${resolvedId}-instructions`, children: labels.instructions }), showControls ? _jsxs("div", { className: "inkra-image-cropper__controls", children: [_jsxs("label", { className: "inkra-image-cropper__control", children: [_jsxs("span", { className: "inkra-image-cropper__control-label", children: [_jsx(PencilText, { children: labels.zoom }), _jsxs("output", { children: [Math.round(zoom * 100), "%"] })] }), _jsx(Slider, { "aria-label": labels.zoom, disabled: interactionDisabled, getValueLabel: value => `${Math.round(value * 100)}%`, max: maxZoom, min: minZoom, onValueChange: values => commitZoom(values[0], 'control'), step: zoomStep, value: [zoom] })] }), aspect === 'free' && freeCropAreaSize ? _jsx("div", { className: "inkra-image-cropper__free-controls", children: ['width', 'height'].map(axis => {
+                            const label = axis === 'width' ? labels.cropWidth : labels.cropHeight;
+                            const maximum = Math.max(MIN_FREE_CROP_SIZE, axis === 'width' ? stageSize.width : stageSize.height);
+                            return _jsxs("label", { className: "inkra-image-cropper__control", children: [_jsxs("span", { className: "inkra-image-cropper__control-label", children: [_jsx(PencilText, { children: label }), _jsxs("output", { children: [Math.round(freeCropAreaSize[axis]), "px"] })] }), _jsx(Slider, { "aria-label": label, disabled: interactionDisabled, max: maximum, min: MIN_FREE_CROP_SIZE, onValueChange: values => commitCropAreaSize({ ...freeCropAreaSize, [axis]: values[0] }, 'control'), step: 4, value: [Math.min(maximum, freeCropAreaSize[axis])] })] }, axis);
+                        }) }) : null, _jsxs("div", { className: "inkra-image-cropper__actions", children: [_jsx(Button, { "aria-label": labels.reset, disabled: interactionDisabled, onClick: () => reset(), size: "icon-sm", title: labels.reset, variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: resetPaths, size: 22, sourceSize: 24 }) }), showExport ? _jsx(Button, { "aria-label": labels.export, disabled: interactionDisabled || selectionRef.current === null, loading: exporting, onClick: () => void handleExport(), startIcon: _jsx(PencilIcon, { decorative: true, paths: downloadPaths, size: 22, sourceSize: 24 }), variant: "primary", children: exporting ? labels.exporting : labels.export }) : null] })] }) : null] });
+});
+export { IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS, IMAGE_CROPPER_MAX_OUTPUT_EDGE, IMAGE_CROPPER_MAX_OUTPUT_PIXELS, ImageCropperExportError, clampImageCropperArea, exportImageCrop, resolveImageCropperOutputSize, } from './model.js';

package/dist/image-cropper/model.d.ts

@@ -0,0 +1,42 @@
+export interface ImageCropperPoint {
+    x: number;
+    y: number;
+}
+export interface ImageCropperSize {
+    width: number;
+    height: number;
+}
+export interface ImageCropperArea extends ImageCropperPoint, ImageCropperSize {
+}
+export type ImageCropperExportType = 'image/png' | 'image/jpeg' | 'image/webp';
+export interface ImageCropperExportOptions {
+    /** Maximum output width. The crop aspect ratio is always preserved. */
+    maxWidth?: number;
+    /** Maximum output height. The crop aspect ratio is always preserved. */
+    maxHeight?: number;
+    /** Maximum output pixel count. Defaults to 16,777,216 and never exceeds the hard 33,554,432 limit. */
+    maxPixels?: number;
+    /** Permit enlarging beyond the selected original pixels. Defaults to false. */
+    allowUpscale?: boolean;
+    type?: ImageCropperExportType;
+    quality?: number;
+}
+export type ImageCropperExportErrorCode = 'canvas' | 'cors' | 'image-not-ready' | 'invalid-selection' | 'unsupported-format';
+export declare class ImageCropperExportError extends Error {
+    readonly code: ImageCropperExportErrorCode;
+    readonly cause?: unknown;
+    constructor(code: ImageCropperExportErrorCode, message: string, options?: {
+        cause?: unknown;
+    });
+}
+export declare const IMAGE_CROPPER_MAX_OUTPUT_EDGE = 8192;
+export declare const IMAGE_CROPPER_MAX_OUTPUT_PIXELS = 33554432;
+export declare const IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS = 16777216;
+export declare function clampImageCropperArea(area: ImageCropperArea, naturalSize: ImageCropperSize): ImageCropperArea;
+export declare function resolveImageCropperOutputSize(area: ImageCropperSize, options?: ImageCropperExportOptions): ImageCropperSize;
+export declare function exportImageCrop(image: HTMLImageElement, area: ImageCropperArea, options?: ImageCropperExportOptions): Promise<{
+    blob: Blob;
+    width: number;
+    height: number;
+    type: ImageCropperExportType;
+}>;

package/dist/image-cropper/model.js

@@ -0,0 +1,94 @@
+export class ImageCropperExportError extends Error {
+    constructor(code, message, options) {
+        super(message);
+        this.name = 'ImageCropperExportError';
+        this.code = code;
+        this.cause = options?.cause;
+    }
+}
+export const IMAGE_CROPPER_MAX_OUTPUT_EDGE = 8192;
+export const IMAGE_CROPPER_MAX_OUTPUT_PIXELS = 33554432;
+export const IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS = 16777216;
+const EXPORT_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp']);
+function finitePositive(value, fallback, maximum) {
+    if (value === undefined)
+        return fallback;
+    if (!Number.isFinite(value) || value <= 0)
+        return fallback;
+    return Math.min(maximum, value);
+}
+export function clampImageCropperArea(area, naturalSize) {
+    const naturalWidth = Math.max(0, Math.floor(naturalSize.width));
+    const naturalHeight = Math.max(0, Math.floor(naturalSize.height));
+    const x = Math.min(naturalWidth, Math.max(0, Math.round(area.x)));
+    const y = Math.min(naturalHeight, Math.max(0, Math.round(area.y)));
+    const width = Math.min(naturalWidth - x, Math.max(0, Math.round(area.width)));
+    const height = Math.min(naturalHeight - y, Math.max(0, Math.round(area.height)));
+    return { x, y, width, height };
+}
+export function resolveImageCropperOutputSize(area, options = {}) {
+    const sourceWidth = Math.floor(area.width);
+    const sourceHeight = Math.floor(area.height);
+    if (sourceWidth < 1 || sourceHeight < 1) {
+        throw new ImageCropperExportError('invalid-selection', 'The crop selection has no exportable pixels.');
+    }
+    const maxWidth = finitePositive(options.maxWidth, IMAGE_CROPPER_MAX_OUTPUT_EDGE, IMAGE_CROPPER_MAX_OUTPUT_EDGE);
+    const maxHeight = finitePositive(options.maxHeight, IMAGE_CROPPER_MAX_OUTPUT_EDGE, IMAGE_CROPPER_MAX_OUTPUT_EDGE);
+    const maxPixels = finitePositive(options.maxPixels, IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS, IMAGE_CROPPER_MAX_OUTPUT_PIXELS);
+    const upscaleLimit = options.allowUpscale ? Number.POSITIVE_INFINITY : 1;
+    const scale = Math.min(upscaleLimit, maxWidth / sourceWidth, maxHeight / sourceHeight, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
+    return {
+        width: Math.max(1, Math.floor(sourceWidth * scale)),
+        height: Math.max(1, Math.floor(sourceHeight * scale)),
+    };
+}
+function exportError(error) {
+    if (error instanceof ImageCropperExportError)
+        return error;
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+        return new ImageCropperExportError('cors', 'The image can be displayed, but its server did not permit canvas export. Configure CORS or use a same-origin Blob.', { cause: error });
+    }
+    return new ImageCropperExportError('canvas', 'The browser could not render the crop to a canvas.', { cause: error });
+}
+export async function exportImageCrop(image, area, options = {}) {
+    if (!image.complete || image.naturalWidth < 1 || image.naturalHeight < 1) {
+        throw new ImageCropperExportError('image-not-ready', 'The image has not finished loading.');
+    }
+    const type = options.type ?? 'image/png';
+    if (!EXPORT_TYPES.has(type)) {
+        throw new ImageCropperExportError('unsupported-format', `Unsupported crop export format: ${String(type)}`);
+    }
+    const selection = clampImageCropperArea(area, {
+        width: image.naturalWidth,
+        height: image.naturalHeight,
+    });
+    const output = resolveImageCropperOutputSize(selection, options);
+    const canvas = document.createElement('canvas');
+    canvas.width = output.width;
+    canvas.height = output.height;
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new ImageCropperExportError('canvas', 'The browser did not provide a 2D canvas context.');
+    try {
+        context.drawImage(image, selection.x, selection.y, selection.width, selection.height, 0, 0, output.width, output.height);
+        const quality = options.quality === undefined
+            ? undefined
+            : Math.min(1, Math.max(0, options.quality));
+        const blob = await new Promise((resolve, reject) => {
+            try {
+                canvas.toBlob(value => value ? resolve(value) : reject(new ImageCropperExportError('canvas', 'Canvas export returned no image data.')), type, quality);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+        return { blob, width: output.width, height: output.height, type };
+    }
+    catch (error) {
+        throw exportError(error);
+    }
+    finally {
+        canvas.width = 0;
+        canvas.height = 0;
+    }
+}