@inkra/react 0.1.0 → 0.3.0

package/dist/number-ticker/model.js

@@ -0,0 +1,163 @@
+import { ExactDecimal, formatExactParts, tickerDecimal } from './precision.js';
+export { subtractTickerValues, tickerValueKey } from './precision.js';
+export const numberTickerUnits = {
+    en: ['K', 'M', 'B', 'T', 'Qa', 'Qi', 'Sx', 'Sp', 'Oc', 'No', 'Dc']
+        .map((label, index) => ({ label, factor: Number(`1e${(index + 1) * 3}`) })),
+    zh: [{ label: '千', factor: 1e3 }, ...['万', '亿', '兆', '京', '垓', '秭', '穰', '沟', '涧', '正', '载', '极', '恒河沙', '阿僧祇', '那由他', '不可思议', '无量大数']
+            .map((label, index) => ({ label, factor: Number(`1e${(index + 1) * 4}`) }))],
+};
+export function createNumberFormatter(locale = 'en-US', options) {
+    const formatter = new Intl.NumberFormat(locale, options);
+    if (options?.roundingMode && options.roundingMode !== 'halfExpand' && !('roundingMode' in formatter.resolvedOptions())) {
+        throw new RangeError('NumberTicker roundingMode requires Intl.NumberFormat rounding support');
+    }
+    return formatter;
+}
+export function createTickerFormatter(locale = 'en-US', options, compact = false, compactOptions = {}) {
+    if (!compact || options?.notation === 'scientific' || options?.notation === 'engineering') {
+        const native = createNumberFormatter(locale, options);
+        const formatToParts = (value) => formatExactParts(native, value);
+        return { formatToParts, formatDecimal: value => formatExactParts(native, value), format: value => formatToParts(value).map(part => part.value).join('') };
+    }
+    const precision = {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: Math.max(1, options?.minimumFractionDigits ?? 0),
+        ...options,
+        notation: 'standard',
+    };
+    const formatter = createNumberFormatter(locale, precision);
+    const language = compact === true
+        ? (formatter.resolvedOptions().locale.startsWith('zh') ? 'zh' : 'en')
+        : compact;
+    const multiplier = tickerDecimal(compactOptions.promotionThreshold ?? 1);
+    if (!multiplier.gt(0) || !multiplier.isFinite())
+        throw new RangeError('promotionThreshold must be positive and finite');
+    const supplied = [...(compactOptions.units ?? numberTickerUnits[language])]
+        .map(unit => ({ ...unit, factor: tickerDecimal(unit.factor), threshold: unit.threshold === undefined ? undefined : tickerDecimal(unit.threshold) }))
+        .sort((a, b) => a.factor.cmp(b.factor));
+    const labels = new Set();
+    let previousFactor = tickerDecimal(1);
+    let previousThreshold = tickerDecimal(0);
+    for (const unit of supplied) {
+        const threshold = unit.threshold ?? unit.factor.times(multiplier);
+        if (!unit.label.trim() || labels.has(unit.label) || !unit.factor.isFinite() || unit.factor.lte(previousFactor)
+            || !threshold.isFinite() || threshold.lte(previousThreshold)) {
+            throw new RangeError('Compact units need unique nonempty labels, increasing finite factors > 1 and positive increasing thresholds');
+        }
+        labels.add(unit.label);
+        previousFactor = unit.factor;
+        previousThreshold = threshold;
+    }
+    const units = [{ factor: tickerDecimal(1), label: '', threshold: undefined }, ...supplied];
+    const indexFor = (label, fallback) => {
+        if (label === undefined)
+            return fallback;
+        const index = units.findIndex(unit => unit.label === label);
+        if (index < 0)
+            throw new RangeError(`Unknown compact unit: ${label}`);
+        return index;
+    };
+    const minIndex = indexFor(compactOptions.minUnit, 0);
+    const maxIndex = indexFor(compactOptions.maxUnit, units.length - 1);
+    if (minIndex > maxIndex)
+        throw new RangeError('minUnit must not exceed maxUnit');
+    const thresholdFor = (index) => units[index].threshold ?? units[index].factor.times(multiplier);
+    const last = units[maxIndex];
+    const overflowThreshold = maxIndex + 1 < units.length ? thresholdFor(maxIndex + 1)
+        : thresholdFor(maxIndex).times(maxIndex > 0 ? last.factor.div(units[maxIndex - 1].factor) : 1000);
+    const overflow = compactOptions.overflow ?? (compactOptions.maxUnit !== undefined ? 'unit' : 'scientific');
+    const scientific = createNumberFormatter(locale, { ...precision, notation: 'scientific' });
+    const rounding = createNumberFormatter('en-US', {
+        ...precision, style: 'decimal', numberingSystem: 'latn', useGrouping: false,
+    });
+    const percentScale = options?.style === 'percent' ? 100 : 1;
+    const formatDecimal = (exact) => {
+        if (!exact.isFinite())
+            return formatExactParts(formatter, exact);
+        let index = minIndex;
+        const reaches = (threshold) => {
+            if (compactOptions.promoteAfterRounding === false)
+                return exact.abs().times(percentScale).gte(threshold);
+            const scaled = exact.div(units[index].factor).times(percentScale);
+            const rounded = formatExactParts(rounding, scaled).map(part => part.value).join('');
+            return new ExactDecimal(rounded).abs().times(units[index].factor).gte(threshold);
+        };
+        while (index < maxIndex) {
+            if (!reaches(thresholdFor(index + 1)))
+                break;
+            index++;
+        }
+        if (index === maxIndex && overflow === 'scientific' && reaches(overflowThreshold))
+            return formatExactParts(scientific, exact);
+        const { factor, label } = units[index];
+        const parts = formatExactParts(formatter, exact.div(factor));
+        if (label) {
+            let insertion = parts.length;
+            while (insertion > 0 && !['integer', 'fraction'].includes(parts[insertion - 1].type))
+                insertion--;
+            const separator = compactOptions.separator ?? ' ';
+            parts.splice(insertion, 0, ...(separator ? [{ type: 'literal', value: separator }] : []), { type: 'compact', value: label });
+        }
+        return parts;
+    };
+    const formatToParts = (value) => formatDecimal(tickerDecimal(value));
+    return { formatToParts, formatDecimal, format: value => formatToParts(value).map(part => part.value).join('') };
+}
+export function formatTickerValue(formatter, value) {
+    return formatter instanceof Intl.NumberFormat ? formatExactParts(formatter, value).map(part => part.value).join('') : formatter.format(value);
+}
+export function formatTickerDelta(formatter, delta) {
+    const exact = tickerDecimal(delta);
+    return formatDecimalDelta(formatter, exact);
+}
+// Deltas are derived from validated inputs and can legitimately exceed input bounds.
+export function formatDerivedTickerDelta(formatter, delta) {
+    return formatDecimalDelta(formatter, new ExactDecimal(String(delta)));
+}
+function formatDecimalDelta(formatter, exact) {
+    const sign = exact.gt(0) ? '+' : exact.lt(0) ? '\u2212' : '';
+    const magnitude = (formatter instanceof Intl.NumberFormat ? formatExactParts(formatter, exact) : formatter.formatDecimal(exact))
+        .filter(part => part.type !== 'plusSign' && part.type !== 'minusSign')
+        .filter(part => part.type !== 'literal' || !/^[()]$/.test(part.value))
+        .map(part => part.value)
+        .join('');
+    return `${sign}${magnitude}`;
+}
+export function interpolateTickerValue(from, to, progress) {
+    if (!tickerDecimal(from).isFinite() || !tickerDecimal(to).isFinite())
+        return to;
+    const boundedProgress = Number.isFinite(progress) ? Math.min(1, Math.max(0, progress)) : 1;
+    if (boundedProgress === 0)
+        return from;
+    if (boundedProgress === 1)
+        return to;
+    if (typeof from === 'number' && typeof to === 'number') {
+        const distance = to - from;
+        return Number.isFinite(distance) ? from + distance * boundedProgress
+            : from * (1 - boundedProgress) + to * boundedProgress;
+    }
+    const start = tickerDecimal(from);
+    const next = start.plus(tickerDecimal(to).minus(start).times(String(boundedProgress)));
+    return typeof from === 'bigint' && typeof to === 'bigint' ? BigInt(next.trunc().toFixed(0)) : next.toString();
+}
+export function tickerValueChanged(previous, next) {
+    if (Object.is(previous, next))
+        return false;
+    const before = tickerDecimal(previous);
+    const after = tickerDecimal(next);
+    return !before.eq(after) || (before.isZero() && before.isNegative() !== after.isNegative());
+}
+export function canAnimateTickerValue(from, to, duration) {
+    const start = tickerDecimal(from);
+    const end = tickerDecimal(to);
+    return start.isFinite() && end.isFinite()
+        && typeof from === typeof to
+        && (typeof to === 'number' || (Math.max(start.sd(), end.sd(), Math.abs(start.e - end.e)) <= 512))
+        && Number.isFinite(duration)
+        && duration > 0
+        && tickerValueChanged(from, to);
+}
+export function easeOutCubic(progress) {
+    const boundedProgress = Math.min(1, Math.max(0, progress));
+    return 1 - (1 - boundedProgress) ** 3;
+}

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

@@ -0,0 +1,7 @@
+import { Decimal } from 'decimal.js';
+export type NumberTickerValue = number | bigint | string;
+export declare const ExactDecimal: typeof Decimal;
+export declare function tickerDecimal(value: NumberTickerValue): Decimal;
+export declare function tickerValueKey(value: unknown): string;
+export declare function formatExactParts(formatter: Intl.NumberFormat, value: NumberTickerValue | Decimal): Intl.NumberFormatPart[];
+export declare function subtractTickerValues(next: NumberTickerValue, previous: NumberTickerValue): NumberTickerValue | null;

package/dist/number-ticker/precision.js

@@ -0,0 +1,134 @@
+import { Decimal } from 'decimal.js';
+// Isolated arithmetic context; never change the application's Decimal defaults.
+// Covers the full span of the bounded input exponents and significant digits.
+export const ExactDecimal = Decimal.clone({ precision: 30050, toExpNeg: -7, toExpPos: 21 });
+const decimalPattern = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
+const maxDigits = 10000;
+export function tickerDecimal(value) {
+    const source = typeof value === 'number' && Object.is(value, -0) ? '-0' : String(value).trim();
+    if (typeof value !== 'number') {
+        const [coefficient, exponent = '0'] = source.split(/[eE]/);
+        if (!decimalPattern.test(source) || coefficient.replace(/\D/g, '').length > maxDigits
+            || exponent.length > 7 || Math.abs(Number(exponent)) > maxDigits) {
+            throw new RangeError('NumberTicker requires a decimal value with at most 10000 digits and an exponent between -10000 and 10000');
+        }
+    }
+    const decimal = new ExactDecimal(source);
+    if (decimal.isFinite() && Math.abs(decimal.e) > maxDigits) {
+        throw new RangeError('NumberTicker decimal magnitude exceeds the supported exponent range');
+    }
+    return decimal;
+}
+export function tickerValueKey(value) {
+    return JSON.stringify(value, (_key, item) => typeof item === 'bigint' ? { $bigint: String(item) } : item);
+}
+const roundingModes = {
+    ceil: Decimal.ROUND_CEIL, floor: Decimal.ROUND_FLOOR,
+    expand: Decimal.ROUND_UP, trunc: Decimal.ROUND_DOWN,
+    halfCeil: Decimal.ROUND_HALF_CEIL, halfFloor: Decimal.ROUND_HALF_FLOOR,
+    halfExpand: Decimal.ROUND_HALF_UP, halfTrunc: Decimal.ROUND_HALF_DOWN,
+    halfEven: Decimal.ROUND_HALF_EVEN,
+};
+function roundedDecimal(value, options) {
+    const extra = options;
+    const mode = roundingModes[extra.roundingMode ?? 'halfExpand'];
+    const maxFraction = options.maximumFractionDigits ?? 0;
+    const increment = new ExactDecimal(extra.roundingIncrement ?? 1).times(new ExactDecimal(10).pow(-maxFraction));
+    const fraction = value.div(increment).toDecimalPlaces(0, mode).times(increment);
+    const significant = options.maximumSignificantDigits === undefined ? null : value.toSignificantDigits(options.maximumSignificantDigits, mode);
+    const significantPlace = value.e - (options.maximumSignificantDigits ?? 1) + 1;
+    const useSignificant = significant !== null && (extra.roundingPriority === 'morePrecision'
+        ? significantPlace < -maxFraction : extra.roundingPriority === 'lessPrecision'
+        ? significantPlace >= -maxFraction : true);
+    const rounded = useSignificant ? significant : fraction;
+    const decimals = extra.trailingZeroDisplay === 'stripIfInteger' && rounded.isInteger() ? 0
+        : useSignificant ? Math.max(0, (options.minimumSignificantDigits ?? 1) - rounded.e - 1)
+            : options.minimumFractionDigits ?? 0;
+    return { value: rounded, decimals };
+}
+// Intl accepts exact decimal strings in modern engines, but some engines still
+// turn strings beyond Number.MAX_VALUE into Infinity. BigInt bypasses that path.
+export function formatExactParts(formatter, value) {
+    if (typeof value === 'number')
+        return formatter.formatToParts(value);
+    const decimal = Decimal.isDecimal(value) ? value : tickerDecimal(value);
+    if (!decimal.isFinite())
+        return formatter.formatToParts(decimal.toNumber());
+    if (decimal.isZero())
+        return formatter.formatToParts(decimal.isNegative() ? -0 : 0);
+    if (decimal.isInteger())
+        return formatter.formatToParts(BigInt(decimal.toFixed(0)));
+    if (decimal.e < 308) {
+        const exactFormat = formatter.formatToParts;
+        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
+        if (probe.format('9007199254740993') !== '9007199254740993') {
+            throw new RangeError('NumberTicker decimal strings require exact Intl.NumberFormat string support');
+        }
+        return exactFormat.call(formatter, decimal.toString());
+    }
+    const options = formatter.resolvedOptions();
+    // Directed rounding still observes tiny tails at huge magnitudes. Round the
+    // mantissa before converting to BigInt, then let Intl supply locale notation.
+    if (options.notation === 'scientific' || options.notation === 'engineering') {
+        const display = options.style === 'percent' ? decimal.times(100) : decimal;
+        const exponent = options.notation === 'engineering' ? Math.floor(display.e / 3) * 3 : display.e;
+        const factor = new ExactDecimal(10).pow(exponent);
+        const rounded = roundedDecimal(display.div(factor), options).value.times(factor);
+        const originalScale = options.style === 'percent' ? rounded.div(100) : rounded;
+        return formatter.formatToParts(BigInt(originalScale.toFixed(0)));
+    }
+    let scaled = options.style === 'percent' ? decimal.times(100) : decimal;
+    if (options.notation === 'compact') {
+        const probe = new Intl.NumberFormat(options.locale, { ...options, style: 'decimal', useGrouping: false });
+        const digits = probe.formatToParts(BigInt(new ExactDecimal(10).pow(scaled.e).toFixed(0)))
+            .filter(part => part.type === 'integer').map(part => Array.from(part.value).length).reduce((sum, length) => sum + length, 0);
+        scaled = scaled.div(new ExactDecimal(10).pow(scaled.e - digits + 1));
+    }
+    const rounded = roundedDecimal(scaled, options);
+    const [integer, fraction = ''] = rounded.value.abs().toFixed().split('.');
+    const fractionalDigits = fraction.padEnd(rounded.decimals, '0');
+    const plain = new Intl.NumberFormat(options.locale, {
+        numberingSystem: options.numberingSystem, minimumIntegerDigits: options.minimumIntegerDigits,
+        useGrouping: options.useGrouping, maximumFractionDigits: 0,
+    });
+    const numericParts = plain.formatToParts(BigInt(integer));
+    if (fractionalDigits) {
+        const digits = new Intl.NumberFormat(options.locale, { numberingSystem: options.numberingSystem, useGrouping: false });
+        const symbols = Array.from({ length: 10 }, (_, digit) => digits.format(digit));
+        numericParts.push({ type: 'decimal', value: digits.formatToParts(1.1).find(part => part.type === 'decimal').value }, { type: 'fraction', value: fractionalDigits.replace(/\d/g, digit => symbols[Number(digit)]) });
+    }
+    const pattern = formatter.formatToParts(BigInt(decimal.trunc().toFixed(0)));
+    // Long unit/currency names depend on the displayed fraction as well as the
+    // integer ending. Preserve plural operands without passing an overflowing
+    // decimal string to Intl (CLDR cardinal rules inspect at most six end digits).
+    const pluralParts = options.style === 'unit' || (options.style === 'currency' && options.currencyDisplay === 'name')
+        ? formatExactParts(new Intl.NumberFormat(options.locale, {
+            numberingSystem: options.numberingSystem, style: options.style,
+            unit: options.unit, unitDisplay: options.unitDisplay,
+            currency: options.currency, currencyDisplay: options.currencyDisplay,
+            minimumFractionDigits: fractionalDigits.length, maximumFractionDigits: fractionalDigits.length,
+        }), `${BigInt(integer) > 1000000n ? 1000000n + BigInt(integer) % 1000000n : BigInt(integer)}${fractionalDigits ? `.${fractionalDigits}` : ''}`)
+        : undefined;
+    let inserted = false;
+    return pattern.flatMap(part => {
+        if (part.type === 'unit' || part.type === 'currency') {
+            return [pluralParts?.find(candidate => candidate.type === part.type) ?? part];
+        }
+        if (!['integer', 'group', 'decimal', 'fraction'].includes(part.type))
+            return [part];
+        if (inserted)
+            return [];
+        inserted = true;
+        return numericParts;
+    });
+}
+export function subtractTickerValues(next, previous) {
+    const to = tickerDecimal(next);
+    const from = tickerDecimal(previous);
+    if (!to.isFinite() || !from.isFinite())
+        return null;
+    if (typeof next === 'number' && typeof previous === 'number')
+        return next - previous;
+    const difference = to.minus(from);
+    return typeof next === 'bigint' && typeof previous === 'bigint' ? BigInt(difference.toFixed(0)) : difference.toString();
+}

package/dist/overflow-list/index.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import type { ButtonProps } from '../Button.js';
+import type { OverflowListStrategy } from './layout.js';
+export type { OverflowListStrategy } from './layout.js';
+export interface OverflowListItem {
+    id: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+    priority?: number;
+    measureKey?: string | number;
+}
+export interface OverflowListRenderContext {
+    id: string | number;
+    index: number;
+}
+export interface OverflowListOverflowContext<Item extends OverflowListItem> {
+    count: number;
+    items: readonly Item[];
+}
+export interface OverflowListChange<Item extends OverflowListItem> {
+    visibleItems: readonly Item[];
+    overflowItems: readonly Item[];
+}
+type OverflowButtonProps = Omit<ButtonProps, 'aria-label' | 'children' | 'ref'>;
+export interface OverflowListProps<Item extends OverflowListItem = OverflowListItem> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    items: readonly Item[];
+    strategy?: OverflowListStrategy;
+    measurementKey?: string | number;
+    gap?: CSSProperties['gap'];
+    renderItem?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    renderOverflowItem?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    renderOverflow?: (context: OverflowListOverflowContext<Item>) => ReactNode;
+    getOverflowItemIcon?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    overflowLabel?: string | ((count: number) => string);
+    overflowButtonProps?: OverflowButtonProps;
+    onOverflowItemSelect?: (item: Item, event: Event) => void;
+    onOverflowChange?: (change: OverflowListChange<Item>) => void;
+}
+export declare const OverflowList: <Item extends OverflowListItem = OverflowListItem>(props: OverflowListProps<Item> & RefAttributes<HTMLDivElement>) => ReactElement;

package/dist/overflow-list/index.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { DropdownMenu } from '../dropdown-menu/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { calculateOverflowListLayout } from './layout.js';
+const ellipsisPaths = [{ d: 'M5 12h.01M12 12h.01M19 12h.01' }];
+function itemKey(id) {
+    return `${typeof id}:${String(id)}`;
+}
+function finitePriority(value) {
+    if (value === Number.POSITIVE_INFINITY)
+        return Number.MAX_SAFE_INTEGER;
+    if (value === Number.NEGATIVE_INFINITY)
+        return Number.MIN_SAFE_INTEGER;
+    return Number.isFinite(value) ? value : 0;
+}
+function sameKeys(current, next) {
+    if (current.size !== next.length)
+        return false;
+    return next.every(key => current.has(key));
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function defaultOverflowLabel(count) {
+    return `More items (${count})`;
+}
+function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel = defaultOverflowLabel, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const widthCache = useRef(new Map());
+    const frameRef = useRef(null);
+    const focusOverflowRef = useRef(false);
+    const lastChangeRef = useRef('');
+    const onOverflowChangeRef = useRef(onOverflowChange);
+    onOverflowChangeRef.current = onOverflowChange;
+    const entries = useMemo(() => {
+        const nextEntries = items.map((item, index) => ({
+            item,
+            index,
+            key: itemKey(item.id),
+            priority: finitePriority(item.priority),
+        }));
+        const duplicateCheck = new Set();
+        for (const entry of nextEntries) {
+            if (duplicateCheck.has(entry.key)) {
+                throw new Error(`OverflowList item ids must be unique. Received duplicate id: ${String(entry.item.id)}`);
+            }
+            duplicateCheck.add(entry.key);
+        }
+        return nextEntries;
+    }, [items]);
+    const signature = useMemo(() => JSON.stringify([
+        measurementKey,
+        strategy,
+        entries.map(entry => [entry.key, entry.item.measureKey ?? entry.key, entry.priority]),
+    ]), [entries, measurementKey, strategy]);
+    const allKeys = useMemo(() => entries.map(entry => entry.key), [entries]);
+    const [layout, setLayout] = useState(() => ({
+        signature,
+        visibleKeys: new Set(allKeys),
+        needsOverflow: false,
+        measuring: true,
+    }));
+    const effectiveLayout = layout.signature === signature
+        ? layout
+        : { signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true };
+    const visibleEntries = useMemo(() => effectiveLayout.measuring
+        ? entries
+        : entries.filter(entry => effectiveLayout.visibleKeys.has(entry.key)), [effectiveLayout.measuring, effectiveLayout.visibleKeys, entries]);
+    const overflowEntries = useMemo(() => effectiveLayout.measuring
+        ? []
+        : entries.filter(entry => !effectiveLayout.visibleKeys.has(entry.key)), [effectiveLayout.measuring, effectiveLayout.visibleKeys, entries]);
+    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 containerWidth = root.getBoundingClientRect().width;
+        if (containerWidth <= 0)
+            return;
+        const computedGap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+        for (const entry of entries) {
+            const node = itemRefs.current.get(entry.key);
+            if (!node)
+                continue;
+            const width = node.getBoundingClientRect().width;
+            if (width > 0)
+                widthCache.current.set(entry.key, width);
+        }
+        if (entries.some(entry => !widthCache.current.has(entry.key)))
+            return;
+        const triggerWidth = triggerRef.current?.getBoundingClientRect().width;
+        const result = calculateOverflowListLayout({
+            containerWidth,
+            gap: computedGap,
+            items: entries.map(entry => ({
+                key: entry.key,
+                priority: entry.priority,
+                width: widthCache.current.get(entry.key) ?? 0,
+            })),
+            strategy,
+            triggerWidth,
+        });
+        if (result.needsTriggerMeasurement) {
+            setLayout(current => current.signature === signature
+                && current.needsOverflow
+                && current.measuring
+                && sameKeys(current.visibleKeys, allKeys)
+                ? current
+                : { signature, visibleKeys: new Set(allKeys), needsOverflow: true, measuring: true });
+            return;
+        }
+        const activeElement = typeof document === 'undefined' ? null : document.activeElement;
+        if (activeElement && result.overflowKeys.some(key => itemRefs.current.get(key)?.contains(activeElement))) {
+            focusOverflowRef.current = true;
+        }
+        setLayout(current => current.signature === signature
+            && !current.measuring
+            && current.needsOverflow === (result.overflowKeys.length > 0)
+            && sameKeys(current.visibleKeys, result.visibleKeys)
+            ? current
+            : {
+                signature,
+                visibleKeys: new Set(result.visibleKeys),
+                needsOverflow: result.overflowKeys.length > 0,
+                measuring: false,
+            });
+    }, [allKeys, entries, 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;
+        widthCache.current.clear();
+        setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true });
+    }, [allKeys, 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 (triggerRef.current)
+            observer?.observe(triggerRef.current);
+        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;
+            }
+        };
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature]);
+    useEffect(() => {
+        const fonts = typeof document === 'undefined' ? undefined : document.fonts;
+        if (!fonts?.addEventListener)
+            return undefined;
+        const remeasure = () => {
+            widthCache.current.clear();
+            setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: effectiveLayout.needsOverflow, measuring: true });
+        };
+        fonts.addEventListener('loadingdone', remeasure);
+        return () => fonts.removeEventListener('loadingdone', remeasure);
+    }, [allKeys, effectiveLayout.needsOverflow, signature]);
+    useBrowserLayoutEffect(() => {
+        if (!focusOverflowRef.current || !effectiveLayout.needsOverflow || effectiveLayout.measuring)
+            return;
+        focusOverflowRef.current = false;
+        triggerRef.current?.focus();
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, effectiveLayout.visibleKeys]);
+    useEffect(() => {
+        if (effectiveLayout.measuring)
+            return;
+        const changeKey = `${signature}:${visibleEntries.map(entry => entry.key).join('|')}`;
+        if (lastChangeRef.current === changeKey)
+            return;
+        lastChangeRef.current = changeKey;
+        onOverflowChangeRef.current?.({
+            visibleItems: visibleEntries.map(entry => entry.item),
+            overflowItems: overflowEntries.map(entry => entry.item),
+        });
+    }, [effectiveLayout.measuring, overflowEntries, signature, visibleEntries]);
+    const resolvedLabel = typeof overflowLabel === 'function'
+        ? overflowLabel(overflowEntries.length)
+        : overflowLabel;
+    const overflowContext = useMemo(() => ({
+        count: overflowEntries.length,
+        items: overflowEntries.map(entry => entry.item),
+    }), [overflowEntries]);
+    const { className: overflowButtonClassName, size: overflowButtonSize, title: overflowButtonTitle, variant: overflowButtonVariant, ...overflowButtonRest } = overflowButtonProps ?? {};
+    const resolvedStyle = {
+        ...style,
+        ...(gap !== undefined ? { '--inkra-overflow-list-gap': typeof gap === 'number' ? `${gap}px` : String(gap) } : {}),
+    };
+    return _jsxs("div", { ...props, "aria-label": ariaLabel, className: ['inkra-overflow-list', className].filter(Boolean).join(' '), "data-measuring": effectiveLayout.measuring || undefined, ref: setRootRef, role: role, style: resolvedStyle, children: [visibleEntries.map(({ item, index, key }) => _jsx("div", { className: "inkra-overflow-list__item", "data-overflow-list-item": String(item.id), ref: node => setItemRef(key, node), children: renderItem
+                    ? renderItem(item, { id: item.id, index })
+                    : _jsx("span", { className: "inkra-overflow-list__default-item", children: item.label }) }, key)), effectiveLayout.needsOverflow ? _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx(Button, { ...overflowButtonRest, "aria-label": resolvedLabel, className: ['inkra-overflow-list__trigger', overflowButtonClassName].filter(Boolean).join(' '), ref: triggerRef, size: overflowButtonSize ?? (renderOverflow ? 'sm' : 'icon-sm'), title: overflowButtonTitle ?? resolvedLabel, variant: overflowButtonVariant ?? 'outline', children: renderOverflow
+                                ? renderOverflow(overflowContext)
+                                : _jsx(PencilIcon, { paths: ellipsisPaths, seed: `${generatedId}-overflow`, size: 16, sourceSize: 24 }) }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { align: "end", "aria-label": resolvedLabel, children: overflowEntries.map(({ item, index, key }) => _jsx(DropdownMenu.Item, { disabled: item.disabled, icon: getOverflowItemIcon?.(item, { id: item.id, index }), onSelect: event => onOverflowItemSelect?.(item, event), children: renderOverflowItem
+                                    ? renderOverflowItem(item, { id: item.id, index })
+                                    : item.label }, key)) }) })] }) : null] });
+}
+export const OverflowList = forwardRef(OverflowListInner);

package/dist/overflow-list/layout.d.ts

@@ -0,0 +1,19 @@
+export type OverflowListStrategy = 'end' | 'start' | 'priority';
+export interface OverflowListLayoutItem {
+    key: string;
+    priority: number;
+    width: number;
+}
+export interface OverflowListLayoutInput {
+    items: readonly OverflowListLayoutItem[];
+    containerWidth: number;
+    gap: number;
+    strategy: OverflowListStrategy;
+    triggerWidth?: number;
+}
+export interface OverflowListLayoutResult {
+    visibleKeys: string[];
+    overflowKeys: string[];
+    needsTriggerMeasurement: boolean;
+}
+export declare function calculateOverflowListLayout({ containerWidth, gap, items, strategy, triggerWidth, }: OverflowListLayoutInput): OverflowListLayoutResult;

package/dist/overflow-list/layout.js

@@ -0,0 +1,44 @@
+const finiteSize = (value) => Number.isFinite(value) ? Math.max(0, value) : 0;
+function itemsWidth(items, gap) {
+    if (items.length === 0)
+        return 0;
+    return items.reduce((total, item) => total + finiteSize(item.width), 0)
+        + finiteSize(gap) * (items.length - 1);
+}
+function candidateOrder(items, strategy) {
+    const indexed = items.map((item, index) => ({ item, index }));
+    if (strategy === 'start')
+        return indexed.reverse();
+    if (strategy === 'priority') {
+        return indexed.sort((left, right) => right.item.priority - left.item.priority || left.index - right.index);
+    }
+    return indexed;
+}
+export function calculateOverflowListLayout({ containerWidth, gap, items, strategy, triggerWidth, }) {
+    const availableWidth = finiteSize(containerWidth);
+    const resolvedGap = finiteSize(gap);
+    const allKeys = items.map(item => item.key);
+    if (itemsWidth(items, resolvedGap) <= availableWidth + 0.5) {
+        return { visibleKeys: allKeys, overflowKeys: [], needsTriggerMeasurement: false };
+    }
+    if (triggerWidth === undefined || !Number.isFinite(triggerWidth) || triggerWidth <= 0) {
+        return { visibleKeys: allKeys, overflowKeys: [], needsTriggerMeasurement: true };
+    }
+    const visible = new Set();
+    let occupied = finiteSize(triggerWidth);
+    for (const { item } of candidateOrder(items, strategy)) {
+        const nextWidth = occupied + resolvedGap + finiteSize(item.width);
+        if (nextWidth > availableWidth + 0.5) {
+            if (strategy === 'priority')
+                continue;
+            break;
+        }
+        visible.add(item.key);
+        occupied = nextWidth;
+    }
+    return {
+        visibleKeys: allKeys.filter(key => visible.has(key)),
+        overflowKeys: allKeys.filter(key => !visible.has(key)),
+        needsTriggerMeasurement: false,
+    };
+}

package/dist/overlay/Overlay.d.ts

@@ -7,7 +7,7 @@ export declare function OverlayRoot(props: OverlayRootProps): import("react").JS
 export type OverlayTriggerProps = DialogPrimitive.DialogTriggerProps;
 export declare const OverlayTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type OverlayPortalProps = DialogPrimitive.DialogPortalProps;
-export declare function OverlayPortal({ children, ...props }: OverlayPortalProps): import("react").JSX.Element;
+export declare function OverlayPortal({ children, ...props }: OverlayPortalProps): ReactNode;
 export type OverlayBackdropProps = DialogPrimitive.DialogOverlayProps;
 export declare const OverlayBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface OverlayContentProps extends DialogPrimitive.DialogContentProps {