@inkra/react 0.8.0 → 0.9.0

package/dist/loading/index.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FocusScope } from 'react-aria/FocusScope';
+import { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside';
+import { usePreventScroll } from 'react-aria/usePreventScroll';
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../Button.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Progress, Skeleton } from '../display/index.js';
+import { useInkraLocale } from '../i18n/index.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+import { formatLoadingLabel, resolveLoadingLabels } from './locales.js';
+import { finiteDuration, nextTipIndex, normalizeLoadingMax, normalizeLoadingProgress, normalizeTipIndex, } from './model.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function useTimedPresence(active, delay, minDuration) {
+    const startsVisible = active && delay === 0;
+    const [present, setPresent] = useState(startsVisible);
+    const visibleAt = useRef(startsVisible ? Date.now() : null);
+    useEffect(() => {
+        let timer;
+        if (active) {
+            if (present)
+                return undefined;
+            timer = setTimeout(() => {
+                visibleAt.current = Date.now();
+                setPresent(true);
+            }, delay);
+        }
+        else if (present) {
+            const elapsed = visibleAt.current == null ? minDuration : Date.now() - visibleAt.current;
+            timer = setTimeout(() => {
+                visibleAt.current = null;
+                setPresent(false);
+            }, Math.max(0, minDuration - elapsed));
+        }
+        return () => clearTimeout(timer);
+    }, [active, delay, minDuration, present]);
+    return present;
+}
+function useControllableTipIndex(controlledIndex, defaultIndex, length, onChange) {
+    const [uncontrolledIndex, setUncontrolledIndex] = useState(() => normalizeTipIndex(defaultIndex, length));
+    const controlled = controlledIndex !== undefined;
+    const index = normalizeTipIndex(controlled ? controlledIndex : uncontrolledIndex, length);
+    const setIndex = useCallback((next) => {
+        const normalized = normalizeTipIndex(next, length);
+        if (!controlled)
+            setUncontrolledIndex(normalized);
+        if (normalized !== index)
+            onChange?.(normalized);
+    }, [controlled, index, length, onChange]);
+    return [index, setIndex];
+}
+function useControllableBoolean(value, defaultValue, onChange) {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const controlled = value !== undefined;
+    const current = controlled ? value : uncontrolledValue;
+    const setCurrent = useCallback((next) => {
+        if (!controlled)
+            setUncontrolledValue(next);
+        if (next !== current)
+            onChange?.(next);
+    }, [controlled, current, onChange]);
+    return [current, setCurrent];
+}
+function DefaultSkeleton() {
+    return _jsxs("div", { className: "inkra-loading__skeleton", "aria-hidden": "true", children: [_jsx(Skeleton, { height: 28, width: "42%" }), _jsx(Skeleton, { height: 16, width: "88%" }), _jsx(Skeleton, { height: 16, width: "76%" }), _jsxs("div", { className: "inkra-loading__skeleton-grid", children: [_jsx(Skeleton, { height: 96 }), _jsx(Skeleton, { height: 96 }), _jsx(Skeleton, { height: 96 })] })] });
+}
+function LoadingAnimationVisual({ animation, seed }) {
+    const marks = [0, 1, 2];
+    return _jsx("span", { className: "inkra-loading__animation-visual", "data-kind": animation, "aria-hidden": "true", children: animation === 'trail'
+            ? marks.map(index => _jsx(PencilLine, { className: "inkra-loading__animation-mark", seed: `${seed}-trail-${index}` }, index))
+            : marks.map(index => _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-loading__animation-mark", radius: 8, seed: `${seed}-${animation}-${index}`, variant: animation === 'pulse' ? 'outline' : 'quiet' }, index)) });
+}
+function stageState(stage, activeStage) {
+    if (stage.state)
+        return stage.state;
+    return stage.id === activeStage ? 'active' : 'pending';
+}
+function LoadingLayer({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, activeStage, animation = 'progress', background, blocking, children, className, defaultTipIndex, defaultTipPaused = false, description, forwardedRef, labelsResolved, lockScroll, logo, max, mode = 'inline', onCancel, onContinue, onRetry, onTipIndexChange, onTipPausedChange, preset = 'brand-center', present, progress, progressLabel, showTipControls = false, skeleton, slots, stages = [], status = 'loading', style, tipAutoPlay = true, tipIndex, tipInterval, tipOrder = 'sequence', tipPaused, tips = [], tipTransition = 'fade', title, ...props }) {
+    const id = useId();
+    const rootRef = useRef(null);
+    const titleId = `${id}-title`;
+    const resolvedMax = normalizeLoadingMax(max);
+    const resolvedProgress = normalizeLoadingProgress(progress, resolvedMax);
+    const showCustomAnimation = animation !== 'progress'
+        && status === 'loading'
+        && (progress === undefined || progress === null);
+    const showProgress = progress !== undefined
+        && (animation === 'progress' || progress !== null);
+    const interval = Math.max(1000, finiteDuration(tipInterval, 5000));
+    const [currentTip, setCurrentTip] = useControllableTipIndex(tipIndex, defaultTipIndex, tips.length, onTipIndexChange);
+    const [tipsPaused, setTipsPaused] = useControllableBoolean(tipPaused, defaultTipPaused, onTipPausedChange);
+    const activeStageIndex = stages.findIndex(stage => stage.id === activeStage || stageState(stage, activeStage) === 'active');
+    const stageAnnouncement = stages.length > 0 && activeStageIndex >= 0
+        ? formatLoadingLabel(labelsResolved.stageProgress, { current: activeStageIndex + 1, total: stages.length })
+        : undefined;
+    const defaultStatus = labelsResolved[status];
+    const effectiveBlocking = mode === 'fullscreen' && (blocking ?? preset !== 'edge');
+    const effectiveLockScroll = mode === 'fullscreen' && (lockScroll ?? effectiveBlocking);
+    usePreventScroll({ isDisabled: !(effectiveLockScroll && present) });
+    useEffect(() => {
+        if (!effectiveBlocking || !present || !rootRef.current)
+            return undefined;
+        return ariaHideOutside([rootRef.current], { shouldUseInert: true });
+    }, [effectiveBlocking, present]);
+    useEffect(() => {
+        if (!present || tips.length <= 1 || !tipAutoPlay || tipsPaused || status !== 'loading')
+            return undefined;
+        const timer = setInterval(() => setCurrentTip(nextTipIndex(currentTip, tips.length, tipOrder)), interval);
+        return () => clearInterval(timer);
+    }, [currentTip, interval, present, setCurrentTip, status, tipAutoPlay, tipOrder, tips.length, tipsPaused]);
+    const renderedTitle = title ?? defaultStatus;
+    const showActions = Boolean(onCancel || status === 'error' && onRetry || status === 'complete' && onContinue);
+    const hasInteractiveContent = showActions || showTipControls || children != null
+        || Object.values(slots ?? {}).some(node => node != null);
+    const semanticRole = effectiveBlocking ? 'dialog' : hasInteractiveContent ? 'region' : 'status';
+    const content = _jsxs("div", { ...props, "aria-busy": status === 'loading' || undefined, "aria-label": ariaLabel ?? (ariaLabelledBy || typeof renderedTitle === 'string' ? undefined : defaultStatus), "aria-labelledby": ariaLabelledBy ?? (typeof renderedTitle === 'string' ? titleId : undefined), "aria-live": semanticRole === 'status' ? 'polite' : undefined, "aria-modal": effectiveBlocking || undefined, className: classes('inkra-loading', className), "data-animation": animation, "data-blocking": effectiveBlocking || undefined, "data-mode": mode, "data-preset": preset, "data-status": status, ref: node => {
+            rootRef.current = node;
+            assignRef(forwardedRef, node);
+        }, role: semanticRole, style: style, tabIndex: effectiveBlocking ? -1 : undefined, children: [background == null ? null : _jsx("div", { className: "inkra-loading__background", "aria-hidden": "true", children: background }), _jsx("div", { className: "inkra-loading__veil", "aria-hidden": "true" }), semanticRole === 'region' ? _jsx("span", { className: "inkra-loading__sr-status", role: "status", children: defaultStatus }) : null, _jsx("div", { className: "inkra-loading__layout", children: _jsxs("div", { className: "inkra-loading__main", children: [logo == null ? null : _jsx("div", { className: "inkra-loading__logo", children: logo }), _jsxs("div", { className: "inkra-loading__copy", children: [typeof renderedTitle === 'string'
+                                    ? _jsx(PencilText, { as: "div", className: "inkra-loading__title", id: titleId, seed: `${id}-title`, children: renderedTitle })
+                                    : _jsx("div", { className: "inkra-loading__title", id: titleId, children: renderedTitle }), description == null ? null : typeof description === 'string'
+                                    ? _jsx(PencilText, { as: "div", className: "inkra-loading__description", seed: `${id}-description`, children: description })
+                                    : _jsx("div", { className: "inkra-loading__description", children: description })] }), showCustomAnimation ? _jsxs("div", { className: "inkra-loading__animation-progress", children: [progressLabel == null ? null : typeof progressLabel === 'string'
+                                    ? _jsx(PencilText, { as: "div", className: "inkra-loading__animation-label", children: progressLabel })
+                                    : _jsx("div", { className: "inkra-loading__animation-label", children: progressLabel }), _jsx("div", { "aria-label": typeof progressLabel === 'string' ? progressLabel : defaultStatus, className: "inkra-loading__animation", role: "progressbar", children: _jsx(LoadingAnimationVisual, { animation: animation, seed: `${id}-animation` }) })] }) : null, preset === 'skeleton' ? (skeleton ?? _jsx(DefaultSkeleton, {})) : null, stages.length > 0 ? _jsx("div", { className: "inkra-loading__stages", "aria-label": stageAnnouncement, children: stages.map((stage, index) => {
+                                const state = stageState(stage, activeStage);
+                                return _jsxs("div", { className: "inkra-loading__stage", "data-state": state, children: [_jsx(PencilSurface, { className: "inkra-loading__stage-marker", variant: state === 'active' ? 'selection' : state === 'error' ? 'danger' : 'outline', radius: 8, children: _jsx(PencilText, { children: state === 'complete' ? '✓' : state === 'error' ? '!' : String(index + 1) }) }), _jsxs("div", { className: "inkra-loading__stage-copy", children: [typeof stage.label === 'string' ? _jsx(PencilText, { children: stage.label }) : stage.label, stage.description == null ? null : _jsx("span", { className: "inkra-loading__stage-description", children: stage.description })] })] }, stage.id);
+                            }) }) : null, showProgress ? _jsx(Progress, { "aria-label": typeof progressLabel === 'string' ? progressLabel : defaultStatus, className: "inkra-loading__progress", label: progressLabel, max: resolvedMax, shape: preset === 'brand-center' ? 'circular' : 'linear', size: preset === 'brand-center' ? 'sm' : 'md', value: resolvedProgress ?? null, children: resolvedProgress == null || preset === 'brand-center' ? null : `${Math.round(resolvedProgress / resolvedMax * 100)}%` }) : null, tips.length > 0 ? _jsxs("div", { className: "inkra-loading__tips", "data-transition": tipTransition, children: [_jsx("div", { className: "inkra-loading__tip", children: tips[currentTip] }, `${currentTip}-${tipTransition}`), showTipControls && tips.length > 1 ? _jsxs("div", { className: "inkra-loading__tip-controls", children: [_jsx(Button, { "aria-label": labelsResolved.previousTip, size: "icon-sm", variant: "ghost", onClick: () => setCurrentTip(currentTip - 1), children: "\u2190" }), _jsxs("span", { className: "inkra-loading__tip-position", "aria-live": "off", children: [currentTip + 1, " / ", tips.length] }), tipAutoPlay ? _jsx(Button, { "aria-label": tipsPaused ? labelsResolved.resumeTips : labelsResolved.pauseTips, size: "icon-sm", variant: "ghost", onClick: () => setTipsPaused(!tipsPaused), children: tipsPaused ? '▶' : 'Ⅱ' }) : null, _jsx(Button, { "aria-label": labelsResolved.nextTip, size: "icon-sm", variant: "ghost", onClick: () => setCurrentTip(currentTip + 1), children: "\u2192" })] }) : null] }) : null, children == null ? null : _jsx("div", { className: "inkra-loading__content-layer", children: children }), showActions ? _jsxs("div", { className: "inkra-loading__actions", children: [onCancel ? _jsx(Button, { variant: "ghost", onClick: onCancel, children: labelsResolved.cancel }) : null, status === 'error' && onRetry ? _jsx(Button, { onClick: onRetry, children: labelsResolved.retry }) : null, status === 'complete' && onContinue ? _jsx(Button, { onClick: onContinue, children: labelsResolved.continue }) : null] }) : null] }) }), Object.entries(slots ?? {}).map(([slot, node]) => node == null ? null :
+                _jsx("div", { className: "inkra-loading__slot", "data-slot": slot, children: node }, slot)), preset === 'edge' ? _jsx(PencilLine, { className: "inkra-loading__edge-line", seed: `${id}-edge` }) : null] });
+    return effectiveBlocking
+        ? _jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: content })
+        : content;
+}
+function FullscreenPortal(props) {
+    const [mounted, setMounted] = useState(false);
+    const anchorRef = usePortalTriggerRef(null);
+    const restoreFocusRef = useRef(typeof document !== 'undefined' && document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null);
+    const restoreGenerationRef = useRef(0);
+    useEffect(() => setMounted(true), []);
+    useEffect(() => {
+        const generation = ++restoreGenerationRef.current;
+        return () => {
+            const target = restoreFocusRef.current;
+            if (!target?.isConnected || typeof requestAnimationFrame !== 'function')
+                return;
+            requestAnimationFrame(() => {
+                if (restoreGenerationRef.current !== generation || !target.isConnected)
+                    return;
+                if (document.activeElement === document.body)
+                    target.focus({ preventScroll: true });
+            });
+        };
+    }, []);
+    const layer = _jsx(PortalThemeBridge, { children: _jsx(LoadingLayer, { ...props }) });
+    return _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "inkra-loading__theme-anchor", ref: anchorRef }), mounted && typeof document !== 'undefined' ? createPortal(layer, document.body) : layer] });
+}
+export const Loading = forwardRef(function Loading({ active = true, delay, labels, minDuration, mode = 'inline', ...props }, ref) {
+    const { locale } = useInkraLocale();
+    const resolvedDelay = finiteDuration(delay, 0);
+    const resolvedMinDuration = finiteDuration(minDuration, 0);
+    const present = useTimedPresence(active, resolvedDelay, resolvedMinDuration);
+    const labelsResolved = useMemo(() => resolveLoadingLabels(locale, labels), [labels, locale]);
+    if (!present)
+        return null;
+    const layerProps = {
+        ...props,
+        forwardedRef: ref,
+        labelsResolved,
+        mode,
+        present,
+    };
+    return mode === 'fullscreen'
+        ? _jsx(PortalThemeProvider, { children: _jsx(FullscreenPortal, { ...layerProps }) })
+        : _jsx(LoadingLayer, { ...layerProps });
+});

package/dist/loading/locales.d.ts

@@ -0,0 +1,15 @@
+export interface LoadingLabels {
+    loading: string;
+    error: string;
+    complete: string;
+    cancel: string;
+    retry: string;
+    continue: string;
+    previousTip: string;
+    nextTip: string;
+    pauseTips: string;
+    resumeTips: string;
+    stageProgress: string;
+}
+export declare function resolveLoadingLabels(locale: string, overrides?: Partial<LoadingLabels>): LoadingLabels;
+export declare function formatLoadingLabel(template: string, values: Record<string, string | number>): string;

package/dist/loading/locales.js

@@ -0,0 +1,34 @@
+import { resolveInkraLocale } from '../i18n/index.js';
+const loadingLabels = {
+    en: {
+        loading: 'Loading', error: 'Unable to continue', complete: 'Ready', cancel: 'Cancel', retry: 'Retry',
+        continue: 'Continue', previousTip: 'Previous tip', nextTip: 'Next tip', pauseTips: 'Pause tips',
+        resumeTips: 'Resume tips', stageProgress: 'Step {current} of {total}',
+    },
+    'zh-CN': {
+        loading: '正在加载', error: '暂时无法继续', complete: '准备就绪', cancel: '取消', retry: '重试',
+        continue: '继续', previousTip: '上一条提示', nextTip: '下一条提示', pauseTips: '暂停提示',
+        resumeTips: '继续提示', stageProgress: '第 {current} 步，共 {total} 步',
+    },
+    ja: {
+        loading: '読み込み中', error: '続行できません', complete: '準備完了', cancel: 'キャンセル', retry: '再試行',
+        continue: '続ける', previousTip: '前のヒント', nextTip: '次のヒント', pauseTips: 'ヒントを一時停止',
+        resumeTips: 'ヒントを再開', stageProgress: '{total} ステップ中 {current}',
+    },
+    ko: {
+        loading: '불러오는 중', error: '계속할 수 없습니다', complete: '준비 완료', cancel: '취소', retry: '다시 시도',
+        continue: '계속', previousTip: '이전 도움말', nextTip: '다음 도움말', pauseTips: '도움말 일시 정지',
+        resumeTips: '도움말 계속', stageProgress: '{total}단계 중 {current}단계',
+    },
+    fr: {
+        loading: 'Chargement', error: 'Impossible de continuer', complete: 'Prêt', cancel: 'Annuler', retry: 'Réessayer',
+        continue: 'Continuer', previousTip: 'Conseil précédent', nextTip: 'Conseil suivant', pauseTips: 'Suspendre les conseils',
+        resumeTips: 'Reprendre les conseils', stageProgress: 'Étape {current} sur {total}',
+    },
+};
+export function resolveLoadingLabels(locale, overrides) {
+    return { ...loadingLabels[resolveInkraLocale(locale)], ...overrides };
+}
+export function formatLoadingLabel(template, values) {
+    return template.replace(/\{([A-Za-z][A-Za-z0-9]*)\}/g, (match, name) => Object.prototype.hasOwnProperty.call(values, name) ? String(values[name]) : match);
+}

package/dist/loading/model.d.ts

@@ -0,0 +1,6 @@
+export type LoadingTipOrder = 'sequence' | 'random';
+export declare function finiteDuration(value: number | undefined, fallback: number): number;
+export declare function normalizeLoadingMax(max: number | undefined): number;
+export declare function normalizeLoadingProgress(value: number | null | undefined, max: number): number | null | undefined;
+export declare function normalizeTipIndex(index: number | undefined, length: number): number;
+export declare function nextTipIndex(current: number, length: number, order: LoadingTipOrder, random?: () => number): number;

package/dist/loading/model.js

@@ -0,0 +1,29 @@
+export function finiteDuration(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+export function normalizeLoadingMax(max) {
+    return typeof max === 'number' && Number.isFinite(max) && max > 0 ? max : 100;
+}
+export function normalizeLoadingProgress(value, max) {
+    if (value == null)
+        return value;
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(max, value));
+}
+export function normalizeTipIndex(index, length) {
+    if (length <= 0)
+        return 0;
+    if (typeof index !== 'number' || !Number.isFinite(index))
+        return 0;
+    return ((Math.trunc(index) % length) + length) % length;
+}
+export function nextTipIndex(current, length, order, random = Math.random) {
+    if (length <= 1)
+        return 0;
+    const normalized = normalizeTipIndex(current, length);
+    if (order === 'sequence')
+        return (normalized + 1) % length;
+    const offset = Math.min(length - 2, Math.max(0, Math.floor(random() * (length - 1))));
+    return (normalized + 1 + offset) % length;
+}

package/dist/masonry/index.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import { type MasonryDirection, type MasonryStrategy } from './layout.js';
+export type MasonryKey = string | number | bigint;
+export interface MasonryRenderState<Item> {
+    item: Item;
+    index: number;
+    key: MasonryKey;
+}
+export type MasonryItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'>;
+export interface MasonryProps<Item> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: readonly Item[];
+    getItemKey: (item: Item, index: number) => MasonryKey;
+    renderItem: (state: MasonryRenderState<Item>) => ReactNode;
+    getItemProps?: (state: MasonryRenderState<Item>) => MasonryItemProps;
+    columns?: number | 'auto';
+    minColumnWidth?: number;
+    maxColumns?: number;
+    columnGap?: number;
+    rowGap?: number;
+    strategy?: MasonryStrategy;
+    dir?: MasonryDirection;
+    animated?: boolean;
+}
+export declare const Masonry: <Item>(props: MasonryProps<Item> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export type { MasonryDirection, MasonryStrategy } from './layout.js';

package/dist/masonry/index.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { calculateMasonryLayout, normalizeMasonryColumnCount, normalizeMasonrySpacing, } from './layout.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function internalItemKey(key) {
+    return `${typeof key}:${String(key)}`;
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function cssPixels(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function samePositions(current, next) {
+    if (current.size !== next.length)
+        return false;
+    return next.every(position => {
+        const existing = current.get(position.key);
+        return existing !== undefined
+            && existing.column === position.column
+            && Math.abs(existing.x - position.x) < 0.25
+            && Math.abs(existing.y - position.y) < 0.25
+            && Math.abs(existing.width - position.width) < 0.25
+            && Math.abs(existing.height - position.height) < 0.25;
+    });
+}
+function emptyLayout(signature) {
+    return { signature, columnCount: 1, height: 0, positions: new Map(), ready: false };
+}
+function MasonryInner({ animated = true, className, columnGap = 16, columns = 'auto', dir, getItemKey, getItemProps, items, maxColumns, minColumnWidth = 240, renderItem, role, rowGap = 16, strategy = 'shortest', style, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const frameRef = useRef(null);
+    const safeColumnGap = normalizeMasonrySpacing(columnGap, 16);
+    const safeRowGap = normalizeMasonrySpacing(rowGap, 16);
+    const safeMinColumnWidth = Number.isFinite(minColumnWidth) && minColumnWidth > 0
+        ? minColumnWidth
+        : 240;
+    const safeMaxColumns = maxColumns === undefined
+        ? undefined
+        : Number.isFinite(maxColumns)
+            ? normalizeMasonryColumnCount(maxColumns)
+            : undefined;
+    const fixedColumns = columns === 'auto' ? undefined : normalizeMasonryColumnCount(columns);
+    const entries = useMemo(() => {
+        const next = items.map((item, index) => {
+            const key = getItemKey(item, index);
+            return { item, index, key, internalKey: internalItemKey(key) };
+        });
+        const keys = new Set();
+        for (const entry of next) {
+            if (keys.has(entry.internalKey)) {
+                throw new Error(`Masonry item keys must be unique. Received duplicate key: ${String(entry.key)}`);
+            }
+            keys.add(entry.internalKey);
+        }
+        return next;
+    }, [getItemKey, items]);
+    const signature = useMemo(() => JSON.stringify([
+        fixedColumns ?? 'auto',
+        safeMinColumnWidth,
+        safeMaxColumns ?? null,
+        safeColumnGap,
+        safeRowGap,
+        strategy,
+        dir ?? null,
+    ]), [
+        dir,
+        fixedColumns,
+        safeColumnGap,
+        safeMaxColumns,
+        safeMinColumnWidth,
+        safeRowGap,
+        strategy,
+    ]);
+    const [layout, setLayout] = useState(() => emptyLayout(signature));
+    const effectiveLayout = layout.signature === signature ? layout : emptyLayout(signature);
+    const ready = effectiveLayout.ready && entries.every(entry => effectiveLayout.positions.has(entry.internalKey));
+    const setRootRef = useCallback((node) => {
+        rootRef.current = node;
+        assignRef(forwardedRef, node);
+    }, [forwardedRef]);
+    const setItemRef = useCallback((key, node) => {
+        if (node)
+            itemRefs.current.set(key, node);
+        else
+            itemRefs.current.delete(key);
+    }, []);
+    const updateLayout = useCallback(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const rootStyle = getComputedStyle(root);
+        const paddingLeft = cssPixels(rootStyle.paddingLeft);
+        const paddingRight = cssPixels(rootStyle.paddingRight);
+        const paddingTop = cssPixels(rootStyle.paddingTop);
+        const paddingBottom = cssPixels(rootStyle.paddingBottom);
+        const borderTop = cssPixels(rootStyle.borderTopWidth);
+        const borderBottom = cssPixels(rootStyle.borderBottomWidth);
+        const containerWidth = root.clientWidth - paddingLeft - paddingRight;
+        if (!Number.isFinite(containerWidth) || containerWidth <= 0)
+            return;
+        const measuredItems = [];
+        for (const entry of entries) {
+            const node = itemRefs.current.get(entry.internalKey);
+            if (!node)
+                return;
+            measuredItems.push({
+                key: entry.internalKey,
+                height: node.offsetHeight,
+            });
+        }
+        const resolvedDirection = dir
+            ?? (rootStyle.direction === 'rtl' ? 'rtl' : 'ltr');
+        const next = calculateMasonryLayout({
+            containerWidth,
+            items: measuredItems,
+            columns: fixedColumns,
+            minColumnWidth: safeMinColumnWidth,
+            maxColumns: safeMaxColumns,
+            columnGap: safeColumnGap,
+            rowGap: safeRowGap,
+            strategy,
+            direction: resolvedDirection,
+        });
+        const positions = next.positions.map(position => ({
+            ...position,
+            x: position.x + paddingLeft,
+            y: position.y + paddingTop,
+        }));
+        const contentBlockSize = next.height;
+        const blockSize = rootStyle.boxSizing === 'border-box'
+            ? borderTop + paddingTop + contentBlockSize + paddingBottom + borderBottom
+            : contentBlockSize;
+        setLayout(current => current.signature === signature
+            && current.ready
+            && current.columnCount === next.columnCount
+            && Math.abs(current.height - blockSize) < 0.25
+            && samePositions(current.positions, positions)
+            ? current
+            : {
+                signature,
+                columnCount: next.columnCount,
+                height: blockSize,
+                positions: new Map(positions.map(position => [position.key, position])),
+                ready: true,
+            });
+    }, [
+        dir,
+        entries,
+        fixedColumns,
+        safeColumnGap,
+        safeMaxColumns,
+        safeMinColumnWidth,
+        safeRowGap,
+        signature,
+        strategy,
+    ]);
+    const scheduleLayout = useCallback(() => {
+        if (frameRef.current !== null || typeof window === 'undefined')
+            return;
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            updateLayout();
+        });
+    }, [updateLayout]);
+    useBrowserLayoutEffect(() => {
+        if (layout.signature === signature)
+            return;
+        setLayout(emptyLayout(signature));
+    }, [layout.signature, signature]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return undefined;
+        const observer = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(scheduleLayout);
+        observer?.observe(root);
+        itemRefs.current.forEach(node => observer?.observe(node));
+        if (!observer)
+            window.addEventListener('resize', scheduleLayout);
+        scheduleLayout();
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', scheduleLayout);
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+        };
+    }, [entries, scheduleLayout, signature]);
+    useEffect(() => {
+        const fonts = typeof document === 'undefined' ? undefined : document.fonts;
+        if (!fonts?.addEventListener)
+            return undefined;
+        fonts.addEventListener('loadingdone', scheduleLayout);
+        return () => fonts.removeEventListener('loadingdone', scheduleLayout);
+    }, [scheduleLayout]);
+    const rootStyle = {
+        ...style,
+        '--inkra-masonry-column-gap': `${safeColumnGap}px`,
+        '--inkra-masonry-columns': fixedColumns ?? 1,
+        '--inkra-masonry-min-column-width': `${safeMinColumnWidth}px`,
+        '--inkra-masonry-row-gap': `${safeRowGap}px`,
+        blockSize: ready ? `${effectiveLayout.height}px` : style?.blockSize,
+    };
+    return _jsx("div", { ...props, className: classes('inkra-masonry', className), "data-animated": animated || undefined, "data-columns": ready ? effectiveLayout.columnCount : undefined, "data-layout": ready ? 'ready' : 'fallback', "data-mode": fixedColumns === undefined ? 'adaptive' : 'fixed', "data-strategy": strategy, dir: dir, ref: setRootRef, role: role, style: rootStyle, children: entries.map(entry => {
+            const state = entry;
+            const itemProps = getItemProps?.(state) ?? {};
+            const { className: itemClassName, role: itemRole, ...nativeItemProps } = itemProps;
+            const position = ready ? effectiveLayout.positions.get(entry.internalKey) : undefined;
+            return _createElement("div", { ...nativeItemProps, "aria-posinset": role === 'list' ? entry.index + 1 : undefined, "aria-setsize": role === 'list' ? entries.length : undefined, className: classes('inkra-masonry__item', itemClassName), "data-column": position?.column, "data-index": entry.index, "data-masonry-key": String(entry.key), "data-positioned": position ? '' : undefined, key: entry.internalKey, ref: node => setItemRef(entry.internalKey, node), role: itemRole ?? (role === 'list' ? 'listitem' : undefined), style: position ? {
+                    inlineSize: `${position.width}px`,
+                    transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
+                } : undefined }, renderItem(state));
+        }) });
+}
+export const Masonry = forwardRef(MasonryInner);

package/dist/masonry/layout.d.ts

@@ -0,0 +1,35 @@
+export type MasonryStrategy = 'shortest' | 'sequential';
+export type MasonryDirection = 'ltr' | 'rtl';
+export interface MasonryLayoutItem {
+    key: string;
+    height: number;
+}
+export interface MasonryLayoutOptions {
+    containerWidth: number;
+    items: readonly MasonryLayoutItem[];
+    columns?: number;
+    minColumnWidth?: number;
+    maxColumns?: number;
+    columnGap?: number;
+    rowGap?: number;
+    strategy?: MasonryStrategy;
+    direction?: MasonryDirection;
+}
+export interface MasonryLayoutPosition {
+    key: string;
+    column: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MasonryLayoutResult {
+    columnCount: number;
+    columnWidth: number;
+    height: number;
+    positions: readonly MasonryLayoutPosition[];
+}
+export declare function normalizeMasonrySpacing(value: number | undefined, fallback?: number): number;
+export declare function normalizeMasonryColumnCount(value: number | undefined, fallback?: number): number;
+export declare function resolveMasonryColumnCount({ columns, containerWidth, columnGap, maxColumns, minColumnWidth, }: Pick<MasonryLayoutOptions, 'columns' | 'containerWidth' | 'columnGap' | 'maxColumns' | 'minColumnWidth'>): number;
+export declare function calculateMasonryLayout(options: MasonryLayoutOptions): MasonryLayoutResult;

package/dist/masonry/layout.js

@@ -0,0 +1,67 @@
+const DEFAULT_MIN_COLUMN_WIDTH = 240;
+const MAX_COLUMN_COUNT = 100;
+export function normalizeMasonrySpacing(value, fallback = 0) {
+    return Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+export function normalizeMasonryColumnCount(value, fallback = 1) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.min(MAX_COLUMN_COUNT, Math.max(1, Math.floor(value)));
+}
+export function resolveMasonryColumnCount({ columns, containerWidth, columnGap = 0, maxColumns, minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH, }) {
+    if (columns !== undefined)
+        return normalizeMasonryColumnCount(columns);
+    const width = Number.isFinite(containerWidth) ? Math.max(0, containerWidth) : 0;
+    const gap = normalizeMasonrySpacing(columnGap);
+    const minimum = Number.isFinite(minColumnWidth) && minColumnWidth > 0
+        ? minColumnWidth
+        : DEFAULT_MIN_COLUMN_WIDTH;
+    const available = Math.max(0, width + gap);
+    const adaptive = Math.max(1, Math.floor(available / (minimum + gap)));
+    return Math.min(adaptive, normalizeMasonryColumnCount(maxColumns, MAX_COLUMN_COUNT));
+}
+export function calculateMasonryLayout(options) {
+    const containerWidth = Number.isFinite(options.containerWidth)
+        ? Math.max(0, options.containerWidth)
+        : 0;
+    const columnGap = normalizeMasonrySpacing(options.columnGap);
+    const rowGap = normalizeMasonrySpacing(options.rowGap);
+    const requestedColumnCount = resolveMasonryColumnCount({
+        columns: options.columns,
+        containerWidth,
+        columnGap,
+        maxColumns: options.maxColumns,
+        minColumnWidth: options.minColumnWidth,
+    });
+    const columnCount = options.columns === undefined && options.items.length > 0
+        ? Math.min(requestedColumnCount, options.items.length)
+        : requestedColumnCount;
+    const effectiveColumnGap = columnCount > 1
+        ? Math.min(columnGap, containerWidth / (columnCount - 1))
+        : 0;
+    const columnWidth = Math.max(0, (containerWidth - effectiveColumnGap * (columnCount - 1)) / columnCount);
+    const columnHeights = Array.from({ length: columnCount }, () => 0);
+    const strategy = options.strategy ?? 'shortest';
+    const direction = options.direction ?? 'ltr';
+    const positions = options.items.map((item, index) => {
+        let column = strategy === 'shortest' ? 0 : index % columnCount;
+        if (strategy === 'shortest') {
+            for (let candidate = 1; candidate < columnCount; candidate += 1) {
+                if (columnHeights[candidate] < columnHeights[column])
+                    column = candidate;
+            }
+        }
+        const height = Number.isFinite(item.height) ? Math.max(0, item.height) : 0;
+        const y = columnHeights[column] === 0 ? 0 : columnHeights[column] + rowGap;
+        const logicalX = column * (columnWidth + effectiveColumnGap);
+        const x = direction === 'rtl' ? containerWidth - columnWidth - logicalX : logicalX;
+        columnHeights[column] = y + height;
+        return { key: item.key, column, x, y, width: columnWidth, height };
+    });
+    return {
+        columnCount,
+        columnWidth,
+        height: Math.max(0, ...columnHeights),
+        positions,
+    };
+}

package/dist/number-ticker/RollingValue.d.ts

@@ -0,0 +1,6 @@
+import type { RollingMotionColumn } from './rolling.js';
+export declare function RollingValue({ columns, progress, direction }: {
+    columns: RollingMotionColumn[];
+    progress: number;
+    direction: 'up' | 'down';
+}): import("react").JSX.Element;