@inkra/react 0.10.0 → 0.12.0

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/dependency-graph.css

@@ -0,0 +1,176 @@
+.inkra-node-graph {
+  position: relative;
+  isolation: isolate;
+  inline-size: 100%;
+  min-inline-size: 0;
+  block-size: min(68vh, 620px);
+  min-block-size: 320px;
+  overflow: hidden;
+  color: var(--inkra-ink);
+  background: color-mix(in srgb, var(--inkra-paper) 92%, transparent);
+  border-radius: var(--inkra-radius-lg);
+}
+
+.inkra-node-graph .react-flow {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  direction: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  background: transparent;
+  --xy-edge-stroke: var(--inkra-ink-muted);
+  --xy-edge-stroke-selected: var(--inkra-accent-strong);
+  --xy-connectionline-stroke: var(--inkra-accent-strong);
+  --xy-selection-background-color: color-mix(in srgb, var(--inkra-selection-pigment) 13%, transparent);
+  --xy-selection-border: 0;
+}
+
+.inkra-node-graph .react-flow__container { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
+.inkra-node-graph .react-flow__pane { z-index: 1; touch-action: none; }
+.inkra-node-graph .react-flow__pane.draggable { cursor: grab; }
+.inkra-node-graph .react-flow__pane.dragging { cursor: grabbing; }
+.inkra-node-graph .react-flow__pane.selection { cursor: pointer; }
+.inkra-node-graph .react-flow__viewport { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; }
+.inkra-node-graph .react-flow__renderer { z-index: 4; }
+.inkra-node-graph .react-flow__edges { position: absolute; }
+.inkra-node-graph .react-flow__edges svg { position: absolute; overflow: visible; pointer-events: none; }
+.inkra-node-graph .react-flow__edge { pointer-events: visibleStroke; }
+.inkra-node-graph .react-flow__edge.selectable { cursor: pointer; }
+.inkra-node-graph .react-flow__edge.inactive { pointer-events: none; }
+.inkra-node-graph .react-flow__edge:focus,
+.inkra-node-graph .react-flow__edge:focus-visible { outline: none; }
+.inkra-node-graph svg.react-flow__connectionline { position: absolute; z-index: 8; overflow: visible; pointer-events: none; }
+.inkra-node-graph .react-flow__nodes { pointer-events: none; transform-origin: 0 0; }
+.inkra-node-graph .react-flow__node { position: absolute; box-sizing: border-box; transform-origin: 0 0; pointer-events: all; user-select: none; }
+.inkra-node-graph .react-flow__node.selectable { cursor: pointer; }
+.inkra-node-graph .react-flow__node.draggable { cursor: grab; }
+.inkra-node-graph .react-flow__node.draggable.dragging { cursor: grabbing; }
+.inkra-node-graph .react-flow__node:focus { outline: none; }
+.inkra-node-graph .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; }
+.inkra-node-graph .react-flow__nodesselection-rect { position: absolute; pointer-events: all; cursor: grab; }
+.inkra-node-graph .react-flow__nodesselection-rect:focus,
+.inkra-node-graph .react-flow__nodesselection-rect:focus-visible { outline: none; }
+.inkra-node-graph .react-flow__selection { z-index: 6; }
+.inkra-node-graph .react-flow__panel { position: absolute; z-index: 7; margin: var(--inkra-space-3); }
+.inkra-node-graph .react-flow__panel.top { inset-block-start: 0; }
+.inkra-node-graph .react-flow__panel.bottom { inset-block-end: 0; }
+.inkra-node-graph .react-flow__panel.left { inset-inline-start: 0; }
+.inkra-node-graph .react-flow__panel.right { inset-inline-end: 0; }
+.inkra-node-graph .react-flow__pane.selection .react-flow__panel { pointer-events: none; }
+.inkra-node-graph .react-flow__selection-rect,
+.inkra-node-graph .react-flow__nodesselection-rect { border: 0; background: color-mix(in srgb, var(--inkra-selection-pigment) 13%, transparent); }
+.inkra-node-graph .react-flow__viewport-portal { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; user-select: none; }
+.inkra-node-graph .react-flow__attribution { color: var(--inkra-ink-muted); font-size: 10px; line-height: 1.2; }
+.inkra-node-graph .react-flow__attribution a { color: inherit; }
+
+.inkra-node-graph__node-shell { position: relative; min-inline-size: 168px; max-inline-size: min(280px, 72vw); }
+.inkra-node-graph__node-paper { position: relative; min-inline-size: inherit; color: var(--inkra-ink); }
+.inkra-node-graph__node-selection { position: absolute; z-index: -1; inset: 2px; pointer-events: none; }
+.inkra-node-graph__node-content { position: relative; z-index: 1; display: grid; gap: var(--inkra-space-2); padding: var(--inkra-space-4); min-inline-size: 0; }
+.inkra-node-graph__node-label { color: var(--inkra-ink); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); overflow-wrap: anywhere; }
+.inkra-node-graph__node-description { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); overflow-wrap: anywhere; }
+.inkra-node-graph__node-body { min-inline-size: 0; }
+.inkra-node-graph__node-focus { position: absolute; z-index: 3; inset: -4px; opacity: 0; pointer-events: none; }
+.inkra-node-graph .react-flow__node:focus-visible .inkra-node-graph__node-focus { opacity: 1; }
+
+.inkra-node-graph__port.react-flow__handle {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  inline-size: var(--inkra-touch-target);
+  block-size: var(--inkra-touch-target);
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(var(--inkra-node-graph-port-scale, 1));
+  z-index: 4;
+}
+.inkra-node-graph__port.react-flow__handle.connectionindicator { pointer-events: all; cursor: crosshair; }
+.inkra-node-graph__port.react-flow__handle-left { inset-inline-start: 0; inset-block-start: 50%; }
+.inkra-node-graph__port.react-flow__handle-right { inset-inline-start: 100%; inset-block-start: 50%; }
+.inkra-node-graph__port.react-flow__handle-top { inset-inline-start: 50%; inset-block-start: 0; }
+.inkra-node-graph__port.react-flow__handle-bottom { inset-inline-start: 50%; inset-block-start: 100%; }
+.inkra-node-graph__port-visual { position: relative; display: grid; place-items: center; inline-size: 18px; block-size: 18px; pointer-events: none; }
+.inkra-node-graph__port-mark,
+.inkra-node-graph__port-feedback { position: absolute; inset: 0; pointer-events: none; }
+.inkra-node-graph__port-feedback { opacity: 0; }
+.inkra-node-graph__port:hover .inkra-node-graph__port-feedback,
+.inkra-node-graph__port.connectingfrom .inkra-node-graph__port-feedback,
+.inkra-node-graph__port.valid .inkra-node-graph__port-feedback { opacity: 1; }
+
+.inkra-node-graph__edge-hit { pointer-events: stroke; }
+.inkra-node-graph__edge-pencil { color: var(--inkra-ink-muted); pointer-events: none; }
+.inkra-node-graph__edge-pencil[data-selected] { color: var(--inkra-accent-strong); }
+.inkra-node-graph__edge-measure { stroke: transparent; stroke-width: 1; pointer-events: none; }
+.inkra-node-graph__edge-fallback { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
+.inkra-node-graph__edge-pencil[data-pencil-ready] .inkra-node-graph__edge-fallback { visibility: hidden; }
+.inkra-node-graph__edge-foreign-object { overflow: visible; pointer-events: none; }
+.inkra-node-graph__edge-canvas { display: block; color: inherit; overflow: visible; pointer-events: none; }
+.inkra-node-graph__edge-label { position: absolute; z-index: 5; max-inline-size: 180px; padding: 4px 8px; color: var(--inkra-ink); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-ui); pointer-events: all; overflow-wrap: anywhere; }
+.inkra-node-graph .react-flow__edgelabel-renderer { position: absolute; inset: 0; z-index: 5; inline-size: 100%; block-size: 100%; pointer-events: none; user-select: none; }
+
+.inkra-node-graph__controls { display: flex; gap: var(--inkra-space-1); }
+.inkra-node-graph__control { appearance: none; position: relative; display: inline-grid; place-items: center; inline-size: var(--inkra-touch-target); block-size: var(--inkra-touch-target); padding: 0; border: 0; color: var(--inkra-ink); cursor: pointer; }
+.inkra-node-graph__control:focus { outline: none; }
+.inkra-node-graph__control-focus { position: absolute; inset: 2px; opacity: 0; pointer-events: none; }
+.inkra-node-graph__control:focus-visible .inkra-node-graph__control-focus { opacity: 1; }
+
+.inkra-node-graph__empty { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: var(--inkra-space-6); color: var(--inkra-ink-muted); text-align: center; pointer-events: none; }
+.inkra-node-graph__ssr { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--inkra-space-5); color: var(--inkra-ink); }
+.inkra-node-graph__ssr ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inkra-space-3); margin: 0; padding: 0; list-style: none; }
+.inkra-node-graph__ssr li { padding: var(--inkra-space-3) var(--inkra-space-4); }
+
+@media (max-width: 390px) {
+  .inkra-node-graph { block-size: 440px; min-block-size: 360px; }
+  .inkra-node-graph__node-shell { min-inline-size: 144px; max-inline-size: 68vw; }
+  .inkra-node-graph__node-content { padding: var(--inkra-space-3); }
+  .inkra-node-graph .react-flow__panel { margin: var(--inkra-space-2); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .inkra-node-graph * { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
+}
+
+@media print, (forced-colors: active) {
+  .inkra-node-graph { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
+  .inkra-node-graph__edge-canvas { visibility: hidden; }
+  .inkra-node-graph__edge-fallback { visibility: visible !important; stroke: CanvasText; }
+  .inkra-node-graph__port-mark { outline: 1px solid CanvasText; outline-offset: -6px; }
+  .inkra-node-graph .react-flow__node:focus-visible .inkra-node-graph__node-shell,
+  .inkra-node-graph__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+}
+
+.inkra-dependency-graph__node { position: relative; width: 100%; height: 100%; }
+.inkra-dependency-graph__anchor.react-flow__handle { position: absolute; width: 0; height: 0; min-width: 0; min-height: 0; border: 0; opacity: 0; pointer-events: none; }
+.inkra-dependency-graph__card, .inkra-dependency-graph__icon-button { box-sizing: border-box; width: 100%; height: 100%; padding: 14px 16px; border: 0; font: inherit; color: var(--inkra-ink); text-align: start; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
+.inkra-dependency-graph__card--custom { padding: 0; }
+.inkra-dependency-graph__header { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.inkra-dependency-graph__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
+.inkra-dependency-graph__title { appearance: none; background: none; border: 0; padding: 0; margin: 0; min-width: 0; flex: 1; font: inherit; color: inherit; text-align: start; font-weight: 600; cursor: pointer; }
+.inkra-dependency-graph__title > * { max-width: 100%; }
+.inkra-dependency-graph__actions { display: flex; align-items: center; flex: 0 0 auto; gap: 4px; margin-inline-start: auto; }
+.inkra-dependency-graph__body { min-height: 0; overflow: auto; font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__footer { display: flex; align-items: center; gap: 8px; margin-top: auto; }
+.inkra-dependency-graph__icon-button { align-items: center; justify-content: center; padding: 10px; cursor: pointer; }
+.inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: 0; }
+.inkra-dependency-graph__focus { --inkra-accent-strong: var(--inkra-focus); position: absolute !important; inset: -5px; pointer-events: none; opacity: 0; }
+.inkra-dependency-graph__card:focus-visible > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card--custom:focus-visible .inkra-dependency-graph__focus,
+.inkra-dependency-graph__card:has(.inkra-dependency-graph__title:focus-visible) > .inkra-dependency-graph__focus,
+.inkra-dependency-graph__icon-button:focus-visible > .inkra-dependency-graph__focus { opacity: 1; }
+.inkra-dependency-graph__node[data-disabled] { opacity: .55; }
+.inkra-dependency-graph__title:disabled, .inkra-dependency-graph__icon-button:disabled { cursor: not-allowed; }
+.inkra-dependency-graph__status { font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__node[data-status="completed"] .inkra-dependency-graph__status { color: var(--inkra-success); }
+.inkra-dependency-graph__node[data-status="available"] .inkra-dependency-graph__status,
+.inkra-dependency-graph__node[data-status="active"] .inkra-dependency-graph__status { color: var(--inkra-accent-strong); }
+.inkra-dependency-graph__highlight { position: absolute !important; inset: -3px; pointer-events: none; }
+.inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: .5; }
+.inkra-dependency-graph__edge { color: var(--inkra-ink-muted); }
+.inkra-dependency-graph__edge[data-highlighted], .inkra-dependency-graph__edge--highlighted { color: var(--inkra-accent-strong); }
+@media (forced-colors: active) {
+  .inkra-dependency-graph__card:focus-visible, .inkra-dependency-graph__title:focus-visible, .inkra-dependency-graph__icon-button:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 4px; }
+  .inkra-dependency-graph__focus { display: none !important; }
+  .inkra-dependency-graph__node[data-dimmed], .inkra-dependency-graph__edge[data-dimmed] { opacity: 1; }
+}

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) {