@inkra/react 0.10.0 → 0.11.0

package/README.md

@@ -487,16 +487,37 @@ shrinking values and sign changes expand or collapse the affected columns.
 Grouping, signs, currency and compact units remain formatted text, not digit
 reels. `rollDirection="auto"` rolls up for increasing values and down for
 decreasing values; `up` or `down` fixes the direction. `duration` and `easing`
-apply to both modes. The default `animation="count"` retains value interpolation.
+apply to all modes. The default `animation="count"` retains value interpolation.
 `renderValue` takes precedence over the built-in reels. Changing the formatting
 or animation mode settles immediately, as do disabled/reduced motion, invalid
 durations, and transitions with more than 128 formatted tokens. Exact strings
-and bigint values retain their original precision in either mode.
+and bigint values retain their original precision in every mode.
 
 ```tsx
 <NumberTicker value={amount} animation="roll" rollDirection="auto" duration={650} />
 ```
 
+Use `animation="morph"` to preserve digit identities during exact nonzero,
+same-sign multiplication or division by a power of ten. For example, `1 → 100`
+moves the existing `1` left and reveals `00` from the right; `12.34 → 123.4`
+preserves all four digits while the decimal moves. The displayed significand and
+decimal shift must agree with the exact values after formatting. Other changes,
+including carries, sign changes, unit changes and exponent notation, use
+place-aligned vertical rolling. This mode does not search for arbitrary matching
+digits or reorder repeated glyphs.
+
+Glyph widths stay fixed: motion uses position, clipping and a smooth opacity
+fade rather than stretching text. Rapid updates continue from visible positions
+and opacity. Keep the caller's container right-aligned to hold the numeric right
+edge fixed as its width changes, and allow enough space for the formatted value;
+the animation is clipped within its number area. The default duration is 420ms.
+
+```tsx
+<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+  <NumberTicker value={amount} animation="morph" duration={420} />
+</div>
+```
+
 Set `compact` to follow `locale` (Chinese units for `zh`, English units otherwise),
 or use `compact="en"` / `compact="zh"` to select a unit table explicitly.
 English uses this library's short-scale suffix convention: K, M, B, T, Qa, Qi,
@@ -570,7 +591,10 @@ technology; decorative affixes are not announced twice.
 
 `Log` renders caller-ordered records with stable ids, optional level filters and
 pause/follow controls. It follows only append updates while the viewport remains
-near the bottom. The named scroll region supports Home/End and intentionally is
+near the bottom. When scrolled away or paused, a localized icon button floats
+at the viewport's bottom end corner without adding a footer row. Clicking it
+returns focus to the scroll region and resumes following or jumps to the latest
+record. The named scroll region supports Home/End and intentionally is
 not a live region, so a long stream is not repeatedly announced. Log does not
 provide persistence, virtualization or transport.
 

package/dist/log/index.js

@@ -159,10 +159,11 @@ export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className,
                                 return _jsxs("li", { className: "inkra-log__item", "data-has-icon": item.icon != null || undefined, "data-level": item.level, "data-tone": tone, children: [index > 0 ? _jsx(PencilLine, { className: "inkra-log__item-divider", seed: `inkra-log-item-${item.id}-divider` }) : null, item.icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-log__icon", children: item.icon }), _jsxs("div", { className: "inkra-log__record", children: [item.time == null && item.level == null ? null : _jsxs("div", { className: "inkra-log__meta", children: [item.time == null ? null : item.dateTime
                                                             ? _jsx("time", { dateTime: item.dateTime, children: renderText(item.time) })
                                                             : _jsx("span", { children: renderText(item.time) }), item.level == null ? null : _jsx("span", { className: "inkra-log__level", children: renderText(definition?.label ?? item.level) })] }), _jsx("div", { className: "inkra-log__content", children: renderText(item.content) })] })] }, item.id);
-                            }) }) : _jsx("div", { className: "inkra-log__empty", children: renderText(isEmpty ? (empty ?? labels.empty) : (noMatches ?? labels.noMatches)) }) })] }), showLatest ? _jsxs("div", { className: "inkra-log__latest", children: [_jsx(PencilLine, { className: "inkra-log__latest-divider", seed: "inkra-log-latest-divider" }), _jsx(Button, { size: "sm", startIcon: _jsx(PencilIcon, { paths: followPaths, size: 18, sourceSize: 24 }), variant: "secondary", onClick: () => {
-                            if (resolvedPaused)
-                                changePaused(false);
-                            else
-                                scrollToLatest();
-                        }, children: resolvedPaused ? labels.resume : labels.latest })] }) : null] }));
+                            }) }) : _jsx("div", { className: "inkra-log__empty", children: renderText(isEmpty ? (empty ?? labels.empty) : (noMatches ?? labels.noMatches)) }) }), showLatest ? _jsx("div", { className: "inkra-log__latest", children: _jsx(Button, { "aria-label": resolvedPaused ? labels.resume : labels.latest, "data-tooltip": resolvedPaused ? labels.resume : labels.latest, title: resolvedPaused ? labels.resume : labels.latest, size: "icon-sm", variant: "secondary", onClick: () => {
+                                viewportRef.current?.focus({ preventScroll: true });
+                                if (resolvedPaused)
+                                    changePaused(false);
+                                else
+                                    scrollToLatest();
+                            }, children: _jsx(PencilIcon, { paths: followPaths, size: 20, sourceSize: 24 }) }) }) : null] })] }));
 });

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

@@ -0,0 +1,7 @@
+import type { MorphMotion } from './morph-motion.js';
+import type { RollingToken } from './rolling.js';
+export declare function MorphValue({ tokens, motion, progress }: {
+    tokens: RollingToken[];
+    motion: MorphMotion | null;
+    progress: number;
+}): import("react").JSX.Element;

package/dist/number-ticker/MorphValue.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PencilText } from '../PencilText.js';
+import { sampleMorphGlyph } from './morph-motion.js';
+export function MorphValue({ tokens, motion, progress }) {
+    return _jsx("span", { className: "inkra-number-ticker__morph", dir: "ltr", "data-transition": motion?.kind ?? 'idle', style: motion ? { width: `${progress >= 1 ? motion.targetWidth : motion.width}ch` } : undefined, children: motion ? motion.glyphs.filter(glyph => progress < 1 || glyph.target).map(glyph => {
+            const state = sampleMorphGlyph(glyph, progress);
+            return _jsx("span", { className: "inkra-number-ticker__morph-glyph", "data-token-id": glyph.id, "data-place": glyph.referenceKey, "data-digit": glyph.digit || undefined, "data-face": glyph.target ? 'to' : 'from', style: { position: 'absolute', left: '100%', width: `${glyph.width}ch`,
+                    transform: `translate(${state.x / glyph.width * 100}%, ${state.y * 100}%)`, opacity: state.opacity }, children: _jsx(PencilText, { seed: `ticker-${glyph.id}-${glyph.text}`, children: glyph.text }) }, glyph.id);
+        }) : tokens.map(token => _jsx("span", { className: "inkra-number-ticker__morph-glyph", "data-token-id": `settled-${token.key}`, "data-place": token.key, "data-digit": token.digit || undefined, "data-face": "to", style: token.digit ? { width: '1ch' } : undefined, children: _jsx(PencilText, { seed: `ticker-settled-${token.key}-${token.text}`, children: token.text }) }, `settled-${token.key}`)) });
+}

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

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { NumberTickerCompact, NumberTickerCompactOptions, NumberTickerFormatOptions, NumberTickerLocale, NumberTickerValue } from './model.js';
-export type NumberTickerAnimation = 'count' | 'roll';
+export type NumberTickerAnimation = 'count' | 'roll' | 'morph';
 export type NumberTickerRollDirection = 'auto' | 'up' | 'down';
 export interface NumberTickerRenderDetails {
     animating: boolean;

package/dist/number-ticker/index.js

@@ -7,6 +7,9 @@ import { canAnimateTickerValue, createNumberFormatter, createTickerFormatter, ea
 import { ExactDecimal } from './precision.js';
 import { RollingValue } from './RollingValue.js';
 import { createRollingMotion, rollingTokens, sameRollingTokens } from './rolling.js';
+import { MorphValue } from './MorphValue.js';
+import { morphTokenMapping } from './morph.js';
+import { createMorphMotion, measureMorphWidths } from './morph-motion.js';
 function usePrefersReducedMotion() {
     const [reduced, setReduced] = useState(false);
     useBrowserLayoutEffect(() => {
@@ -41,6 +44,8 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
     const [roll, setRoll] = useState(null);
     const [rollProgress, setRollProgress] = useState(1);
     const rollFrameRef = useRef(null);
+    const [morph, setMorph] = useState(null);
+    const morphFrameRef = useRef(null);
     const reducedMotion = usePrefersReducedMotion();
     const localeKey = Array.isArray(locale) ? locale.join('\u0000') : locale;
     const formatOptionsKey = JSON.stringify(formatOptions ?? {});
@@ -51,12 +56,18 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
     const announcementFormatter = useMemo(() => createNumberFormatter(locale, compact ? { ...formatOptions, notation: 'standard' } : formatOptions), [localeKey, formatOptionsKey, compact]);
     useImperativeHandle(forwardedRef, () => rootRef.current);
     const rollRequested = animation === 'roll' && !renderValue;
-    const finalTokens = useMemo(() => rollRequested ? rollingTokens(formatter.formatToParts(value)) : [], [formatter, value, rollRequested]);
+    const morphRequested = animation === 'morph' && !renderValue;
+    const finalParts = useMemo(() => rollRequested || morphRequested ? formatter.formatToParts(value) : [], [formatter, value, rollRequested, morphRequested]);
+    const finalTokens = useMemo(() => rollingTokens(finalParts), [finalParts]);
     // Keep exact large values readable without creating thousands of painted reels.
     const useRoll = rollRequested && finalTokens.length <= 128;
+    const useMorph = morphRequested && finalTokens.length <= 128;
+    const useTokens = useRoll || useMorph;
     const settledTokensRef = useRef(finalTokens);
+    const morphPartsRef = useRef(finalParts);
     const previousFormatterRef = useRef(formatter);
     const previousUseRollRef = useRef(useRoll);
+    const previousAnimationRef = useRef(animation);
     const columns = useMemo(() => roll?.columns ?? createRollingMotion(finalTokens, finalTokens, 'up'), [roll, finalTokens]);
     useBrowserLayoutEffect(() => {
         const previousTarget = targetRef.current;
@@ -87,12 +98,13 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
         const from = displayedRef.current;
         const formatChanged = previousFormatterRef.current !== formatter;
         previousFormatterRef.current = formatter;
-        const modeChanged = previousUseRollRef.current !== useRoll;
+        const modeChanged = previousUseRollRef.current !== useRoll || previousAnimationRef.current !== animation;
         previousUseRollRef.current = useRoll;
+        previousAnimationRef.current = animation;
         if (!animate || reduceImmediately || formatChanged || modeChanged
-            || (useRoll && !rollFrameRef.current && sameRollingTokens(settledTokensRef.current, finalTokens))
-            || (rollRequested && (!useRoll || settledTokensRef.current.length > 128))
-            || !canAnimateTickerValue(from, value, duration)) {
+            || (useTokens && !rollFrameRef.current && (!morphFrameRef.current || morphFrameRef.current.progress >= 1) && sameRollingTokens(settledTokensRef.current, finalTokens))
+            || ((rollRequested || morphRequested) && (!useTokens || settledTokensRef.current.length > 128))
+            || (!canAnimateTickerValue(from, value, duration) && !(useMorph && canAnimateTickerValue(previousTarget, value, duration)))) {
             displayedRef.current = value;
             setDisplayedValue(value);
             setAnnouncedValue(value);
@@ -101,9 +113,44 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
             setRollProgress(1);
             settledTokensRef.current = finalTokens;
             rollFrameRef.current = null;
+            setMorph(null);
+            morphFrameRef.current = null;
+            morphPartsRef.current = finalParts;
             return undefined;
         }
-        if (useRoll) {
+        if (useMorph) {
+            const direction = rollDirection === 'auto'
+                ? (new ExactDecimal(String(value)).gt(String(previousTarget)) ? 'up' : 'down') : rollDirection;
+            const previousTokens = morphFrameRef.current?.motion.tokens ?? settledTokensRef.current;
+            const zeroPart = formatter.formatToParts(0).find(part => part.type === 'integer')?.value ?? '0';
+            const zero = Array.from(zeroPart).slice(-1)[0] ?? '0';
+            const mapping = morphTokenMapping(morphPartsRef.current, finalParts, previousTarget, value, zero);
+            const motion = createMorphMotion(previousTokens, finalTokens, mapping, direction, measureMorphWidths(rootRef.current, [...previousTokens, ...finalTokens]), morphFrameRef.current ?? undefined);
+            // Bound interrupted layers as well as formatted target token counts.
+            if (motion.glyphs.length > 512) {
+                displayedRef.current = value;
+                setDisplayedValue(value);
+                setAnnouncedValue(value);
+                setAnimating(false);
+                setMorph(null);
+                morphFrameRef.current = null;
+                morphPartsRef.current = finalParts;
+                settledTokensRef.current = finalTokens;
+                setRoll(null);
+                rollFrameRef.current = null;
+                setRollProgress(1);
+                return undefined;
+            }
+            setMorph(motion);
+            morphFrameRef.current = { motion, progress: 0 };
+            morphPartsRef.current = finalParts;
+            setRoll(null);
+            rollFrameRef.current = null;
+            setRollProgress(0);
+        }
+        else if (useRoll) {
+            setMorph(null);
+            morphFrameRef.current = null;
             const direction = rollDirection === 'auto'
                 ? (new ExactDecimal(String(value)).gt(String(from)) ? 'up' : 'down') : rollDirection;
             const nextColumns = createRollingMotion(settledTokensRef.current, finalTokens, direction, rollFrameRef.current ?? undefined);
@@ -114,6 +161,8 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
         else {
             setRoll(null);
             rollFrameRef.current = null;
+            setMorph(null);
+            morphFrameRef.current = null;
         }
         let startTime = null;
         setAnimating(true);
@@ -125,10 +174,12 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
             const bounded = Number.isFinite(eased) ? Math.min(1, Math.max(0, eased)) : progress;
             const next = interpolateTickerValue(from, value, bounded);
             displayedRef.current = next;
-            if (useRoll) {
+            if (useTokens) {
                 setRollProgress(bounded);
                 if (rollFrameRef.current)
                     rollFrameRef.current.progress = bounded;
+                if (morphFrameRef.current)
+                    morphFrameRef.current.progress = bounded;
             }
             else
                 setDisplayedValue(next);
@@ -145,6 +196,8 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
                 setRollProgress(1);
                 settledTokensRef.current = finalTokens;
                 rollFrameRef.current = null;
+                if (morphFrameRef.current)
+                    morphFrameRef.current.progress = 1;
             }
         };
         frameRef.current = requestAnimationFrame(tick);
@@ -154,7 +207,7 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
                 frameRef.current = null;
             }
         };
-    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value, useRoll, rollRequested, rollDirection, formatter]);
+    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value, useRoll, useMorph, useTokens, rollRequested, morphRequested, rollDirection, formatter, animation]);
     useEffect(() => () => {
         if (frameRef.current !== null)
             cancelAnimationFrame(frameRef.current);
@@ -168,9 +221,10 @@ export const NumberTicker = forwardRef(function NumberTicker({ animate = true, a
         .filter(Boolean).join(' ');
     const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
     const valueContent = renderValue?.(displayedValue, { animating, formattedValue })
-        ?? (useRoll ? _jsx(RollingValue, { columns: columns, progress: roll ? rollProgress : 1, direction: roll?.direction ?? 'up' }) : animating
-            ? _jsx("span", { className: "inkra-number-ticker__native-value", children: formattedValue })
-            : _jsx(PencilText, { seed: `number-ticker-${finalFormattedValue}`, children: finalFormattedValue }));
+        ?? (useMorph ? _jsx(MorphValue, { tokens: finalTokens, motion: morph, progress: morph ? rollProgress : 1 })
+            : useRoll ? _jsx(RollingValue, { columns: columns, progress: roll ? rollProgress : 1, direction: roll?.direction ?? 'up' }) : animating
+                ? _jsx("span", { className: "inkra-number-ticker__native-value", children: formattedValue })
+                : _jsx(PencilText, { seed: `number-ticker-${finalFormattedValue}`, children: finalFormattedValue }));
     const deltaContent = delta === null ? null : (() => {
         const formattedDelta = formatDerivedTickerDelta(deltaFormatter, delta);
         const details = {

package/dist/number-ticker/morph-motion.d.ts

@@ -0,0 +1,46 @@
+import type { RollingToken } from './rolling.js';
+export interface MorphGlyph {
+    id: string;
+    referenceKey: string;
+    text: string;
+    digit: boolean;
+    width: number;
+    target: boolean;
+    fromX: number;
+    toX: number;
+    fromY: number;
+    toY: number;
+    fromOpacity: number;
+    toOpacity: number;
+}
+export interface MorphMotion {
+    glyphs: MorphGlyph[];
+    tokens: RollingToken[];
+    width: number;
+    targetWidth: number;
+    kind: 'shift' | 'roll';
+}
+export interface MorphFrame {
+    motion: MorphMotion;
+    progress: number;
+}
+export type MorphWidths = (token: RollingToken) => number;
+export declare function measureMorphWidths(root: HTMLElement | null, tokens: RollingToken[]): MorphWidths;
+export declare function sampleMorphGlyph(glyph: MorphGlyph, progress: number): {
+    x: number;
+    y: number;
+    opacity: number;
+    id: string;
+    referenceKey: string;
+    text: string;
+    digit: boolean;
+    width: number;
+    target: boolean;
+    fromX: number;
+    toX: number;
+    fromY: number;
+    toY: number;
+    fromOpacity: number;
+    toOpacity: number;
+};
+export declare function createMorphMotion(from: RollingToken[], to: RollingToken[], mapping: Array<[number, number]> | null, direction: 'up' | 'down', widths: MorphWidths, previous?: MorphFrame): MorphMotion;

package/dist/number-ticker/morph-motion.js

@@ -0,0 +1,121 @@
+import { rollMix } from './rolling.js';
+let nextGlyph = 0;
+export function measureMorphWidths(root, tokens) {
+    if (!root || typeof document === 'undefined')
+        return token => token.digit ? 1 : Math.max(.25, Array.from(token.text).length);
+    const style = getComputedStyle(root);
+    const probe = document.createElement('span');
+    Object.assign(probe.style, { position: 'fixed', visibility: 'hidden', pointerEvents: 'none',
+        font: style.font, fontVariantNumeric: 'tabular-nums lining-nums', fontKerning: 'none',
+        fontVariantLigatures: 'none', letterSpacing: '0', whiteSpace: 'pre', width: '1ch', display: 'inline-block' });
+    document.body.append(probe);
+    const ch = probe.getBoundingClientRect().width || 1;
+    probe.style.width = 'auto';
+    const widths = new Map();
+    // Measurement happens once when a target changes, never in the frame loop.
+    const measure = (token) => {
+        if (token.digit)
+            return 1;
+        if (!widths.has(token.text)) {
+            probe.textContent = token.text;
+            widths.set(token.text, Math.max(.05, probe.getBoundingClientRect().width / ch));
+        }
+        return widths.get(token.text);
+    };
+    // The returned callback cannot retain a live measuring node.
+    tokens.forEach(measure);
+    const result = token => token.digit ? 1 : widths.get(token.text) ?? Math.max(.25, Array.from(token.text).length);
+    probe.remove();
+    return result;
+}
+function layout(tokens, widths) {
+    const total = tokens.reduce((sum, token) => sum + widths(token), 0);
+    let x = -total;
+    return { width: total, items: tokens.map(token => {
+            const width = widths(token);
+            const item = { ...token, x, width };
+            x += width;
+            return item;
+        }) };
+}
+export function sampleMorphGlyph(glyph, progress) {
+    const fade = progress * progress * (3 - 2 * progress);
+    return { ...glyph, x: rollMix(glyph.fromX, glyph.toX, progress), y: rollMix(glyph.fromY, glyph.toY, progress),
+        opacity: rollMix(glyph.fromOpacity, glyph.toOpacity, fade) };
+}
+export function createMorphMotion(from, to, mapping, direction, widths, previous) {
+    const before = layout(from, widths), after = layout(to, widths);
+    const source = previous ? previous.motion.glyphs.map(glyph => sampleMorphGlyph(glyph, previous.progress))
+        .filter(glyph => glyph.opacity > .001 && Math.abs(glyph.y) < 1.001)
+        : before.items.map(token => ({ id: `settled-${token.key}`, referenceKey: token.key, text: token.text,
+            digit: token.digit, width: token.width, target: true, x: token.x, y: 0, opacity: 1 }));
+    const used = new Set();
+    const glyphs = [];
+    const sign = direction === 'up' ? -1 : 1;
+    const pairs = mapping ?? from.flatMap((token, index) => {
+        const next = to.findIndex(item => item.key === token.key);
+        return next < 0 ? [] : [[index, next]];
+    });
+    const oldIndexes = new Map(pairs.map(([left, right]) => [right, left]));
+    const findSource = (index) => source.filter(item => item.referenceKey === from[index]?.key)
+        .sort((left, right) => right.opacity - left.opacity);
+    const decimalEnd = (items) => {
+        const integers = items.filter(item => item.key.startsWith('integer-'));
+        const integer = integers[integers.length - 1];
+        return integer ? integer.x + integer.width : 0;
+    };
+    for (let index = 0; index < to.length; index++) {
+        const token = to[index], target = after.items[index];
+        const oldIndex = oldIndexes.get(index);
+        const candidates = oldIndex === undefined ? [] : findSource(oldIndex);
+        const existing = candidates.find(item => item.text === token.text && !used.has(item.id));
+        if (existing) {
+            used.add(existing.id);
+            glyphs.push({ id: existing.id, referenceKey: token.key, text: token.text, digit: token.digit,
+                width: existing.width, target: true, fromX: existing.x, toX: target.x,
+                fromY: existing.y, toY: 0, fromOpacity: existing.opacity, toOpacity: 1 });
+            continue;
+        }
+        let x = candidates[0]?.x ?? before.items[oldIndex ?? -1]?.x ?? target.x;
+        let y = token.digit && !mapping ? -sign : 0;
+        if (mapping) {
+            if (token.key.startsWith('decimal-'))
+                x = decimalEnd(before.items);
+            else if (token.digit) {
+                const anchor = pairs.filter(([left, right]) => right < index && from[left].digit)
+                    .sort((left, right) => right[1] - left[1])[0];
+                if (anchor) {
+                    const visible = findSource(anchor[0])[0];
+                    x = (visible?.x ?? before.items[anchor[0]].x) + target.x - after.items[anchor[1]].x;
+                }
+            }
+        }
+        glyphs.push({ id: `morph-${nextGlyph++}`, referenceKey: token.key, text: token.text,
+            digit: token.digit, width: target.width, target: true, fromX: x, toX: target.x,
+            fromY: y, toY: 0, fromOpacity: mapping || !token.digit ? 0 : 1, toOpacity: 1 });
+    }
+    for (const item of source) {
+        if (used.has(item.id))
+            continue;
+        let x = item.x;
+        let y = item.digit && !mapping ? sign : 0;
+        if (mapping) {
+            if (item.referenceKey.startsWith('decimal-'))
+                x = decimalEnd(after.items);
+            else {
+                const oldIndex = from.findIndex(token => token.key === item.referenceKey);
+                const anchor = pairs.filter(([left]) => left < oldIndex && from[left].digit)
+                    .sort((left, right) => right[0] - left[0])[0];
+                if (anchor) {
+                    const visible = findSource(anchor[0])[0];
+                    x += after.items[anchor[1]].x - (visible?.x ?? before.items[anchor[0]].x);
+                }
+            }
+        }
+        glyphs.push({ id: item.id, referenceKey: item.referenceKey, text: item.text, digit: item.digit,
+            width: item.width, target: false, fromX: item.x, toX: x, fromY: item.y, toY: y,
+            fromOpacity: item.opacity, toOpacity: mapping || !item.digit ? 0 : 1 });
+    }
+    return { glyphs, tokens: to, width: Math.max(before.width, after.width, previous && previous.progress < 1 ? previous.motion.width : 0),
+        targetWidth: after.width, kind: mapping ? 'shift' : 'roll' };
+}

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

@@ -0,0 +1,7 @@
+import type { NumberTickerValue } from './precision.js';
+/**
+ * Match an exact decimal shift, rather than guessing identity from equal glyphs.
+ * Pair indexes address rollingTokens(parts), including unchanged typed symbols.
+ * A null result leaves the transition to the existing place-aligned reels.
+ */
+export declare function morphTokenMapping(fromParts: Intl.NumberFormatPart[], toParts: Intl.NumberFormatPart[], fromValue: NumberTickerValue, toValue: NumberTickerValue, zeroGlyph?: string): Array<[number, number]> | null;

package/dist/number-ticker/morph.js

@@ -0,0 +1,78 @@
+import { ExactDecimal, tickerDecimal } from './precision.js';
+import { rollingTokens } from './rolling.js';
+const numericParts = new Set(['integer', 'fraction', 'decimal', 'group']);
+const exponentParts = new Set(['exponentSeparator', 'exponentMinusSign', 'exponentInteger']);
+function displayDigits(parts, zeroGlyph) {
+    const tokens = rollingTokens(parts);
+    const indexes = tokens.flatMap((token, index) => token.digit ? [index] : []);
+    const text = indexes.map(index => tokens[index].text);
+    const first = text.findIndex(digit => digit !== zeroGlyph);
+    if (first < 0)
+        return null;
+    let last = text.length - 1;
+    while (text[last] === zeroGlyph)
+        last--;
+    const integerLength = parts.filter(part => part.type === 'integer')
+        .reduce((length, part) => length + Array.from(part.value).length, 0);
+    return { indexes, text, first, last, exponent: integerLength - first - 1 };
+}
+/**
+ * Match an exact decimal shift, rather than guessing identity from equal glyphs.
+ * Pair indexes address rollingTokens(parts), including unchanged typed symbols.
+ * A null result leaves the transition to the existing place-aligned reels.
+ */
+export function morphTokenMapping(fromParts, toParts, fromValue, toValue, zeroGlyph = '0') {
+    const from = tickerDecimal(fromValue);
+    const to = tickerDecimal(toValue);
+    if (!from.isFinite() || !to.isFinite() || from.isZero() || to.isZero()
+        || from.isNegative() !== to.isNegative())
+        return null;
+    const shift = to.e - from.e;
+    if (shift === 0 || !from.times(new ExactDecimal(10).pow(shift)).eq(to))
+        return null;
+    // Unit/sign/literal changes are separate semantic transitions. Exponents have
+    // their own digit domain and must never be mistaken for mantissa digits.
+    if ([...fromParts, ...toParts].some(part => exponentParts.has(part.type)))
+        return null;
+    const symbols = (parts) => parts.filter(part => !numericParts.has(part.type));
+    const fromSymbols = symbols(fromParts);
+    const toSymbols = symbols(toParts);
+    if (fromSymbols.length !== toSymbols.length || fromSymbols.some((part, index) => {
+        const next = toSymbols[index];
+        return part.type !== next.type || part.value !== next.value;
+    }))
+        return null;
+    const before = displayDigits(fromParts, zeroGlyph);
+    const after = displayDigits(toParts, zeroGlyph);
+    if (!before || !after || after.exponent - before.exponent !== shift)
+        return null;
+    const core = before.text.slice(before.first, before.last + 1);
+    const nextCore = after.text.slice(after.first, after.last + 1);
+    // Rounding may change the visible significand even for an exact raw shift.
+    if (core.length !== nextCore.length || core.some((digit, index) => digit !== nextCore[index]))
+        return null;
+    const mapping = [];
+    for (let index = 0; index < core.length; index++) {
+        mapping.push([before.indexes[before.first + index], after.indexes[after.first + index]]);
+    }
+    // Edge zeros retain their ordinal distance from the significant core. This
+    // preserves 10 as the first 10 in 1000 without matching arbitrary repeats.
+    for (let offset = 1; offset <= Math.min(before.first, after.first); offset++) {
+        mapping.push([before.indexes[before.first - offset], after.indexes[after.first - offset]]);
+    }
+    const trailing = Math.min(before.text.length - before.last - 1, after.text.length - after.last - 1);
+    for (let offset = 1; offset <= trailing; offset++) {
+        mapping.push([before.indexes[before.last + offset], after.indexes[after.last + offset]]);
+    }
+    const fromTokens = rollingTokens(fromParts);
+    const toTokens = rollingTokens(toParts);
+    const targetSymbols = new Map(toTokens.flatMap((token, index) => token.digit ? [] : [[token.key, { token, index }]]));
+    fromTokens.forEach((token, index) => {
+        if (token.digit)
+            return;
+        const next = targetSymbols.get(token.key);
+        if (next && next.token.text === token.text)
+            mapping.push([index, next.index]);
+    });
+    return mapping.sort((left, right) => left[0] - right[0]);
+}

package/dist/styles/log.css

@@ -13,8 +13,6 @@
 }
 
 .inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr); }
-.inkra-log:has(> .inkra-log__latest) { grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto; }
-.inkra-log[data-toolbar="true"]:has(> .inkra-log__latest) { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr) auto; }
 
 .inkra-log__toolbar {
   align-items: center;
@@ -158,21 +156,15 @@
 }
 
 .inkra-log__latest {
-  align-items: center;
   display: flex;
-  justify-content: flex-end;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  padding: var(--inkra-space-2) var(--inkra-space-3);
-  position: relative;
+  inset-block-end: clamp(0px, calc(100% - var(--inkra-touch-target)), var(--inkra-space-2));
+  inset-inline-end: var(--inkra-space-3);
+  position: absolute;
   z-index: 2;
 }
 
-.inkra-log__latest-divider {
-  color: var(--inkra-border);
-  inset-block-start: -4px;
-  inset-inline: 0;
-  position: absolute;
+.inkra-log__latest .inkra-button__surface {
+  background: var(--inkra-paper);
 }
 
 @container (max-width: 36rem) {
@@ -188,11 +180,6 @@
   .inkra-log__follow-control .inkra-button__content,
   .inkra-log__follow-control .inkra-button__label,
   .inkra-log__follow-control .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
-  .inkra-log__latest .inkra-button { inline-size: 100%; }
-  .inkra-log__latest .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
-  .inkra-log__latest .inkra-button__content,
-  .inkra-log__latest .inkra-button__label,
-  .inkra-log__latest .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
 }
 
 @media (forced-colors: active) {

package/dist/styles/number-ticker.css

@@ -66,7 +66,48 @@
   flex: none;
 }
 
+.inkra-number-ticker[data-animation="morph"] { min-inline-size: 0; }
+
+.inkra-number-ticker[data-animation="morph"] .inkra-number-ticker__value {
+  display: block;
+  max-inline-size: 100%;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__morph {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: baseline;
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  height: 1lh;
+  line-height: var(--inkra-line-ui, 1.45);
+  overflow: hidden;
+  contain: paint;
+  unicode-bidi: isolate;
+}
+
+.inkra-number-ticker__morph-glyph {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__morph-glyph > .inkra-pencil-text { flex: none; }
+
 @media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__morph { width: auto !important; }
+  .inkra-number-ticker__morph-glyph[data-face="from"] { display: none; }
+  .inkra-number-ticker__morph-glyph[data-face="to"] {
+    position: relative !important;
+    left: auto !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
   .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
   .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
   .inkra-number-ticker__column[data-departing] { display: none; }

package/dist/styles.css

@@ -4445,8 +4445,6 @@
 }
 
 .inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr); }
-.inkra-log:has(> .inkra-log__latest) { grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto; }
-.inkra-log[data-toolbar="true"]:has(> .inkra-log__latest) { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr) auto; }
 
 .inkra-log__toolbar {
   align-items: center;
@@ -4590,21 +4588,15 @@
 }
 
 .inkra-log__latest {
-  align-items: center;
   display: flex;
-  justify-content: flex-end;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  padding: var(--inkra-space-2) var(--inkra-space-3);
-  position: relative;
+  inset-block-end: clamp(0px, calc(100% - var(--inkra-touch-target)), var(--inkra-space-2));
+  inset-inline-end: var(--inkra-space-3);
+  position: absolute;
   z-index: 2;
 }
 
-.inkra-log__latest-divider {
-  color: var(--inkra-border);
-  inset-block-start: -4px;
-  inset-inline: 0;
-  position: absolute;
+.inkra-log__latest .inkra-button__surface {
+  background: var(--inkra-paper);
 }
 
 @container (max-width: 36rem) {
@@ -4620,11 +4612,6 @@
   .inkra-log__follow-control .inkra-button__content,
   .inkra-log__follow-control .inkra-button__label,
   .inkra-log__follow-control .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
-  .inkra-log__latest .inkra-button { inline-size: 100%; }
-  .inkra-log__latest .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
-  .inkra-log__latest .inkra-button__content,
-  .inkra-log__latest .inkra-button__label,
-  .inkra-log__latest .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
 }
 
 @media (forced-colors: active) {
@@ -4892,7 +4879,48 @@
   flex: none;
 }
 
+.inkra-number-ticker[data-animation="morph"] { min-inline-size: 0; }
+
+.inkra-number-ticker[data-animation="morph"] .inkra-number-ticker__value {
+  display: block;
+  max-inline-size: 100%;
+  overflow: hidden;
+}
+
+.inkra-number-ticker__morph {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: baseline;
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  height: 1lh;
+  line-height: var(--inkra-line-ui, 1.45);
+  overflow: hidden;
+  contain: paint;
+  unicode-bidi: isolate;
+}
+
+.inkra-number-ticker__morph-glyph {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  height: 1lh;
+  white-space: pre;
+}
+
+.inkra-number-ticker__morph-glyph > .inkra-pencil-text { flex: none; }
+
 @media (prefers-reduced-motion: reduce), print {
+  .inkra-number-ticker__morph { width: auto !important; }
+  .inkra-number-ticker__morph-glyph[data-face="from"] { display: none; }
+  .inkra-number-ticker__morph-glyph[data-face="to"] {
+    position: relative !important;
+    left: auto !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
   .inkra-number-ticker__column { grid-template-columns: 1fr !important; }
   .inkra-number-ticker__column[data-digit] { width: 1ch !important; }
   .inkra-number-ticker__column[data-departing] { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",