@inkra/react 0.0.0-stage → 0.2.0

package/dist/hotkey/model.js

@@ -0,0 +1,97 @@
+const modifierKeys = new Set([
+    'Alt', 'AltGraph', 'Control', 'Fn', 'FnLock', 'Hyper', 'Meta', 'OS', 'Shift', 'Super', 'Symbol', 'SymbolLock',
+]);
+const ignoredKeys = new Set(['Dead', 'Process', 'Unidentified']);
+const modifierOrder = ['control', 'alt', 'shift', 'meta'];
+const keyLabels = {
+    ' ': 'Space',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑',
+    Backspace: 'Backspace',
+    CapsLock: 'Caps Lock',
+    Delete: 'Delete',
+    End: 'End',
+    Enter: 'Enter',
+    Escape: 'Esc',
+    Home: 'Home',
+    PageDown: 'Page Down',
+    PageUp: 'Page Up',
+    Tab: 'Tab',
+};
+const macKeyLabels = {
+    Backspace: '⌫',
+    CapsLock: '⇪',
+    Delete: '⌦',
+    End: '↘',
+    Enter: '↩',
+    Escape: 'Esc',
+    Home: '↖',
+    PageDown: '⇟',
+    PageUp: '⇞',
+    Tab: '⇥',
+};
+const modifierLabels = {
+    mac: { control: '⌃', alt: '⌥', shift: '⇧', meta: '⌘' },
+    windows: { control: 'Ctrl', alt: 'Alt', shift: 'Shift', meta: 'Win' },
+};
+export function detectHotkeyPlatform(platform) {
+    return /mac|iphone|ipad|ipod/i.test(platform ?? '') ? 'mac' : 'windows';
+}
+export function normalizeHotkey(value) {
+    const modifiers = modifierOrder.filter(modifier => value.modifiers?.includes(modifier));
+    return {
+        key: normalizeHotkeyKey(value.key),
+        ...(value.code ? { code: value.code } : {}),
+        ...(modifiers.length ? { modifiers } : {}),
+    };
+}
+export function normalizeHotkeyKey(key) {
+    if (key === 'Spacebar')
+        return ' ';
+    if (key === 'Esc')
+        return 'Escape';
+    if (key.length === 1 && /[a-z]/i.test(key))
+        return key.toUpperCase();
+    return key;
+}
+export function hotkeyFromKeyboardEvent(event) {
+    if (event.isComposing || event.keyCode === 229 || modifierKeys.has(event.key) || ignoredKeys.has(event.key))
+        return null;
+    const modifiers = modifierOrder.filter(modifier => {
+        if (modifier === 'control')
+            return Boolean(event.ctrlKey);
+        if (modifier === 'alt')
+            return Boolean(event.altKey);
+        if (modifier === 'shift')
+            return Boolean(event.shiftKey);
+        return Boolean(event.metaKey);
+    });
+    return normalizeHotkey({ key: event.key, code: event.code, modifiers });
+}
+export function hotkeySignature(value) {
+    if (!value)
+        return '';
+    const normalized = normalizeHotkey(value);
+    return `${normalized.modifiers?.join('+') ?? ''}|${normalized.code ?? ''}|${normalized.key}`;
+}
+export function getHotkeyTokens(value, platform) {
+    const normalized = normalizeHotkey(value);
+    const modifiers = normalized.modifiers?.map(modifier => modifierLabels[platform][modifier]) ?? [];
+    const key = (platform === 'mac' ? macKeyLabels[normalized.key] : undefined)
+        ?? keyLabels[normalized.key]
+        ?? normalized.key;
+    return [...modifiers, key];
+}
+export function formatHotkey(value, platform) {
+    const tokens = getHotkeyTokens(value, platform);
+    return platform === 'mac' ? tokens.join('') : tokens.join(' + ');
+}
+export function isHotkeyEscape(event) {
+    return !event.isComposing && event.keyCode !== 229 && normalizeHotkeyKey(event.key) === 'Escape';
+}
+export function isHotkeyClear(event) {
+    return !event.isComposing && event.keyCode !== 229 && !event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey
+        && (event.key === 'Backspace' || event.key === 'Delete');
+}

package/dist/hover-card/index.d.ts

@@ -0,0 +1,33 @@
+import type { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps } from '../overlay/index.js';
+export interface HoverCardRootProps extends Omit<PopoverRootProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'> {
+    /** Delay in milliseconds before hover or focus opens the card. */
+    openDelay?: number;
+    /** Delay in milliseconds before pointer or focus departure closes the card. */
+    closeDelay?: number;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+}
+export declare function HoverCardRoot({ children, closeDelay, defaultOpen, onOpenChange, open, openDelay, ...props }: HoverCardRootProps): import("react").JSX.Element;
+export type HoverCardTriggerProps = PopoverTriggerProps;
+export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type HoverCardFocusOnOpen = 'always' | 'focus-and-press' | 'never' | 'press';
+export interface HoverCardContentProps extends PopoverContentProps {
+    /** Controls which activation reasons may move focus into the card. */
+    focusOnOpen?: HoverCardFocusOnOpen;
+}
+export declare const HoverCardContent: import("react").ForwardRefExoticComponent<HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export type HoverCardTitleProps = PopoverTitleProps;
+export declare const HoverCardTitle: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export type HoverCardDescriptionProps = PopoverDescriptionProps;
+export declare const HoverCardDescription: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export type HoverCardCloseProps = PopoverCloseProps;
+export declare const HoverCardClose: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const HoverCard: Readonly<{
+    Root: typeof HoverCardRoot;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

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;
+}>;