@inkra/react 0.2.0 → 0.4.3

package/dist/number-ticker/model.js

@@ -1,29 +1,158 @@
+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) {
-    return new Intl.NumberFormat(locale, 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.format(value);
+    return formatter instanceof Intl.NumberFormat ? formatExactParts(formatter, value).map(part => part.value).join('') : formatter.format(value);
 }
 export function formatTickerDelta(formatter, delta) {
-    const sign = delta > 0 ? '+' : delta < 0 ? '\u2212' : '';
-    const magnitude = formatter.formatToParts(Math.abs(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 (!Number.isFinite(from) || !Number.isFinite(to))
+    if (!tickerDecimal(from).isFinite() || !tickerDecimal(to).isFinite())
         return to;
-    const boundedProgress = Math.min(1, Math.max(0, progress));
-    return from + (to - from) * boundedProgress;
+    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) {
-    return !Object.is(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) {
-    return Number.isFinite(from)
-        && Number.isFinite(to)
+    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);

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,141 @@
+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 };
+}
+let exactDecimalStringsSupported;
+function supportsExactDecimalStrings() {
+    if (exactDecimalStringsSupported === undefined) {
+        const probe = new Intl.NumberFormat('en-US', { useGrouping: false });
+        exactDecimalStringsSupported = probe.format('9007199254740993') === '9007199254740993';
+    }
+    return exactDecimalStringsSupported;
+}
+// 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;
+        if (!supportsExactDecimalStrings()) {
+            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.js

@@ -157,6 +157,9 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
         widthCache.current.clear();
         setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true });
     }, [allKeys, layout.signature, signature]);
+    // Keep observer targets in sync when a resize reveals or hides items without
+    // changing whether an overflow trigger is needed. Memoized visibleEntries
+    // leaves the observer intact during unrelated parent updates.
     useEffect(() => {
         const root = rootRef.current;
         if (!root)
@@ -177,7 +180,7 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
                 frameRef.current = null;
             }
         };
-    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature]);
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature, visibleEntries]);
     useEffect(() => {
         const fonts = typeof document === 'undefined' ? undefined : document.fonts;
         if (!fonts?.addEventListener)
@@ -198,7 +201,7 @@ function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflo
     useEffect(() => {
         if (effectiveLayout.measuring)
             return;
-        const changeKey = `${signature}:${visibleEntries.map(entry => entry.key).join('|')}`;
+        const changeKey = JSON.stringify([signature, visibleEntries.map(entry => entry.key)]);
         if (lastChangeRef.current === changeKey)
             return;
         lastChangeRef.current = changeKey;

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 {

package/dist/overlay/Overlay.js

@@ -8,7 +8,7 @@ import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from './themeBridge.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
@@ -20,13 +20,15 @@ export const OverlayTrigger = forwardRef(function OverlayTrigger(props, forwarde
     return _jsx(DialogPrimitive.Trigger, { ...props, ref: ref });
 });
 export function OverlayPortal({ children, ...props }) {
-    return (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
 }
 export const OverlayBackdrop = forwardRef(function OverlayBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-overlay__backdrop', className), ref: ref }));
 });
 export const OverlayContent = forwardRef(function OverlayContent({ children, className, layout = 'plain', seed, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-overlay__content', className), "data-layout": layout, ref: ref, children: _jsx(PencilSurface, { className: classes('inkra-overlay__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-overlay-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-overlay__content-body", children: children }) }) }));
 });
 export const OverlayTitle = forwardRef(function OverlayTitle({ children, className, seed, ...props }, ref) {
@@ -61,7 +63,7 @@ export const OverlayFooter = forwardRef(function OverlayFooter({ children, class
     const id = useId();
     return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__footer', className), "data-divided": divided || undefined, "data-align": align, children: [divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-footer-${id}` }), children] });
 });
-export const Overlay = Object.freeze({
+export const Overlay = /* @__PURE__ */ Object.freeze({
     Root: OverlayRoot,
     Trigger: OverlayTrigger,
     Portal: OverlayPortal,

package/dist/overlay/Popover.d.ts

@@ -8,7 +8,7 @@ export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<Po
 export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopoverPortalProps = PopoverPrimitive.PopoverPortalProps;
-export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").JSX.Element;
+export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").ReactNode;
 export interface PopoverContentProps extends PopoverPrimitive.PopoverContentProps {
     arrowProps?: PopoverArrowProps;
     seed?: string | number;

package/dist/overlay/Popover.js

@@ -3,7 +3,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { forwardRef, useId } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from './themeBridge.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
@@ -16,11 +16,12 @@ export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwarde
     return _jsx(PopoverPrimitive.Trigger, { ...props, ref: ref });
 });
 export function PopoverPortal({ children, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(PopoverPrimitive.Portal, { ...props, children: child }));
 }
-export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, collisionPadding = 12, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
-    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
+    props = usePortalThemeProps(props);
+    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), collisionPadding: collisionPadding, ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
 });
 export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {
     const id = useId();
@@ -33,7 +34,7 @@ export const PopoverDescription = forwardRef(function PopoverDescription({ child
 export const PopoverClose = forwardRef(function PopoverClose(props, ref) {
     return _jsx(PopoverPrimitive.Close, { ...props, ref: ref });
 });
-export const Popover = Object.freeze({
+export const Popover = /* @__PURE__ */ Object.freeze({
     Root: PopoverRoot,
     Anchor: PopoverAnchor,
     Trigger: PopoverTrigger,

package/dist/overlay/themeBridge.d.ts

@@ -1,8 +1,19 @@
-import type { ForwardedRef, ReactNode } from 'react';
+import type { CSSProperties, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+type InkraStyle = CSSProperties & Record<`--inkra-${string}`, string>;
 export declare function PortalThemeProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function usePortalTriggerRef<Element extends HTMLElement>(forwardedRef: ForwardedRef<Element>): (node: Element | null) => void;
+export declare function mapPortalChildren(children: ReactNode, render: (child: ReactNode) => ReactNode): ReactNode;
+export declare function usePortalThemeProps<Props extends HTMLAttributes<HTMLElement>>(props: Props): {
+    'data-inkra-theme': string | undefined;
+    'data-theme': string | undefined;
+    dir: "ltr" | "rtl";
+    lang: string | undefined;
+} & Props & {
+    style: InkraStyle;
+};
 export declare const PortalThemeBridge: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/overlay/themeBridge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { Children, Fragment, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 const emptySnapshot = {
     direction: 'ltr',
     style: {},
@@ -45,6 +45,14 @@ function readThemeSnapshot(node, forcedColors = isForcedColorsActive()) {
         style,
     };
 }
+function sameThemeSnapshot(left, right) {
+    if (left.theme !== right.theme || left.inkraTheme !== right.inkraTheme
+        || left.direction !== right.direction || left.language !== right.language)
+        return false;
+    const entries = Object.entries(left.style);
+    return entries.length === Object.keys(right.style).length
+        && entries.every(([property, value]) => right.style[property] === value);
+}
 export function PortalThemeProvider({ children }) {
     const parentDepth = useContext(PortalLayerDepthContext);
     const depth = parentDepth + 1;
@@ -52,12 +60,16 @@ export function PortalThemeProvider({ children }) {
     const [snapshot, setSnapshot] = useState(emptySnapshot);
     const captureTrigger = useCallback((node) => {
         setTrigger(node);
-        setSnapshot(readThemeSnapshot(node));
+        const next = readThemeSnapshot(node);
+        setSnapshot(current => sameThemeSnapshot(current, next) ? current : next);
     }, []);
     useEffect(() => {
         if (!trigger || typeof MutationObserver === 'undefined')
             return undefined;
-        const refresh = () => setSnapshot(readThemeSnapshot(trigger));
+        const refresh = () => {
+            const next = readThemeSnapshot(trigger);
+            setSnapshot(current => sameThemeSnapshot(current, next) ? current : next);
+        };
         const observer = new MutationObserver(refresh);
         for (let target = trigger; target; target = target.parentElement) {
             observer.observe(target, {
@@ -86,6 +98,32 @@ export function usePortalTriggerRef(forwardedRef) {
         captureTrigger?.(node);
     }, [captureTrigger, forwardedRef]);
 }
+// Presence must receive each animated DOM node, not a display:contents wrapper.
+export function mapPortalChildren(children, render) {
+    return Children.map(children, child => {
+        if (isValidElement(child) && child.type === Fragment) {
+            return mapPortalChildren(child.props.children, render);
+        }
+        return child == null ? null : render(child);
+    });
+}
+export function usePortalThemeProps(props) {
+    const context = useContext(PortalThemeContext);
+    const depth = context?.depth ?? 0;
+    const snapshot = context?.snapshot ?? emptySnapshot;
+    return {
+        'data-inkra-theme': snapshot.inkraTheme,
+        'data-theme': snapshot.theme,
+        dir: snapshot.direction,
+        lang: snapshot.language,
+        ...props,
+        style: {
+            ...snapshot.style,
+            '--inkra-floating-layer-offset': `${depth * 20}`,
+            ...props.style,
+        },
+    };
+}
 export const PortalThemeBridge = forwardRef(function PortalThemeBridge({ children }, ref) {
     const context = useContext(PortalThemeContext);
     const depth = context?.depth ?? 0;

package/dist/pagination/index.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export interface PaginationLabels {
     nav: string;
     first: string;
@@ -16,6 +16,15 @@ export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     siblingCount?: number;
     boundaryCount?: number;
     showFirstLast?: boolean;
+    showPreviousNext?: boolean;
+    hideOnSinglePage?: boolean;
+    simple?: boolean;
+    /** Non-interactive content inside each numbered page button. */
+    renderPage?: (page: number, state: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** Non-interactive current/total content in simple mode. */
+    renderSummary?: (page: number, totalPages: number) => ReactNode;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     labels?: Partial<PaginationLabels>;

package/dist/pagination/index.js

@@ -9,7 +9,7 @@ const defaultLabels = {
     nav: 'Pagination', first: 'First page', previous: 'Previous page', next: 'Next page', last: 'Last page',
     page: page => `Page ${page}`, ellipsis: 'More pages',
 };
-export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, disabled = false, size = 'md', labels, className, ...props }, ref) {
+export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, showPreviousNext = true, hideOnSinglePage = false, simple = false, renderPage, renderSummary, disabled = false, size = 'md', labels, className, ...props }, ref) {
     const total = normalizeTotal(totalPages);
     const [internalPage, setInternalPage] = useState(() => clampPage(defaultPage, total));
     const current = clampPage(page ?? internalPage, total);
@@ -35,7 +35,9 @@ export const Pagination = forwardRef(function Pagination({ totalPages, page, def
             paths.push({ d: 'M19 6v12' });
         return _jsx("li", { children: _jsx(Button, { variant: "ghost", size: size === 'md' ? 'icon' : `icon-${size}`, "aria-label": text[kind], title: text[kind], disabled: disabled || unavailable, onClick: () => select(target), children: _jsx(PencilIcon, { className: "inkra-pagination__arrow", paths: paths, size: 20, sourceSize: 24 }) }) }, kind);
     };
-    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), arrow('previous', current - 1, current <= 1), getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
-                    ? _jsx("li", { children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), _jsx(PencilText, { children: String(entry) })] }) }, entry)
-                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
+    if (hideOnSinglePage && total <= 1)
+        return null;
+    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, "data-simple": simple || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), showPreviousNext && arrow('previous', current - 1, current <= 1), simple ? _jsx("li", { className: "inkra-pagination__summary", "aria-live": "polite", "aria-atomic": "true", children: renderSummary ? renderSummary(current, total) : _jsx(PencilText, { children: `${current} / ${total}` }) }) : getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
+                    ? _jsx("li", { className: "inkra-pagination__page-item", children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), renderPage ? renderPage(entry, { isCurrent: entry === current }) : _jsx(PencilText, { children: String(entry) })] }) }, entry)
+                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), showPreviousNext && arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
 });

package/dist/pan-zoom/index.d.ts

@@ -48,6 +48,8 @@ export interface PanZoomProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     minScale?: number;
     maxScale?: number;
     wheel?: PanZoomWheelMode;
+    /** Scale increment per wheel delta unit. Must be finite and positive. */
+    wheelStep?: number;
     pinch?: boolean;
     pan?: boolean;
     keyboard?: boolean;