@tobiasoberpaul/mdk 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TOberpaul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,28 @@
-# Temporary Holding Version
+# MDK · UI Motion Library
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+MDK is a framework-independent TypeScript library for reversible UI transitions. It uses the Web Animations API and CSS custom properties.
+
+## Install
+
+```sh
+npm install @tobiasoberpaul/mdk
+```
+
+## Use
+
+```js
+import { createGrowTransition } from '@tobiasoberpaul/mdk';
+import '@tobiasoberpaul/mdk/motion.css';
+
+const panel = document.querySelector('#panel');
+const toggle = document.querySelector('#toggle');
+const motion = createGrowTransition({ content: panel });
+
+toggle.addEventListener('click', () => motion.toggle());
+```
+
+Your component manages layout, visibility, focus and accessibility. MDK handles the visual transition, including reversal and the system's reduced-motion preference.
+
+The library includes Grow, Extract, Morph, Slide and Content transitions. See the [library guide](https://github.com/TOberpaul/animations/blob/main/docs/LIBRARY.md) for the API, CSS tokens and integration patterns.
+
+Licensed under [MIT](LICENSE).

package/dist/behaviors.d.ts

@@ -0,0 +1,25 @@
+export declare const motionBehaviors: {
+    readonly grow: {
+        readonly replacesTrigger: false;
+        readonly contentEffect: "fade-blur";
+    };
+    readonly extract: {
+        readonly replacesTrigger: false;
+        readonly contentEffect: "fade-blur";
+    };
+    readonly morph: {
+        readonly replacesTrigger: true;
+        readonly contentEffect: "fade-blur";
+    };
+    readonly slide: {
+        readonly replacesTrigger: false;
+        readonly contentEffect: "fade-blur";
+    };
+    readonly fade: {
+        readonly replacesTrigger: false;
+        readonly contentEffect: "slide-blur-fade";
+    };
+};
+export type MotionKind = keyof typeof motionBehaviors;
+/** Canonical naming shared by declarative integration and consuming components. */
+export declare function getMotionKind(content: HTMLElement): MotionKind;

package/dist/behaviors.js

@@ -0,0 +1,20 @@
+export const motionBehaviors = {
+    grow: { replacesTrigger: false, contentEffect: 'fade-blur' },
+    extract: { replacesTrigger: false, contentEffect: 'fade-blur' },
+    morph: { replacesTrigger: true, contentEffect: 'fade-blur' },
+    slide: { replacesTrigger: false, contentEffect: 'fade-blur' },
+    fade: { replacesTrigger: false, contentEffect: 'slide-blur-fade' },
+};
+/** Canonical naming shared by declarative integration and consuming components. */
+export function getMotionKind(content) {
+    const names = [...Object.keys(motionBehaviors), 'liquid', 'content'];
+    const classes = names.filter(name => content.classList.contains(`motion-${name}`));
+    const raw = content.dataset.motion ?? (classes.length === 1 ? classes[0] : undefined);
+    if (raw === 'content')
+        return 'fade';
+    if (raw === 'liquid')
+        return content.hasAttribute('data-motion-replace-trigger') ? 'morph' : 'extract';
+    if (!raw || !Object.prototype.hasOwnProperty.call(motionBehaviors, raw))
+        throw new Error('Set data-motion to grow, extract, morph, slide or fade, or use one matching motion-* class.');
+    return raw;
+}

package/dist/core/animation.d.ts

@@ -0,0 +1,16 @@
+import type { Options, Transition } from './lifecycle.js';
+export interface Track {
+    element: Element;
+    frames: Keyframe[];
+    easing?: string;
+    pseudoElement?: string;
+    composite?: CompositeOperation;
+}
+export declare function createTransition(options: Options, pattern: string, tracks: () => Track[], behavior?: {
+    keepVisibleWhenClosed?: boolean;
+    durationScale?: () => number;
+    revealTiming?: (count: number, index: number) => {
+        start: number;
+        end: number;
+    };
+}): Transition;

package/dist/core/animation.js

@@ -0,0 +1,150 @@
+import { motionBehaviors } from '../behaviors.js';
+import { contentTimeline } from './content-timing.js';
+import { contentTracks } from './content-frames.js';
+import { revealGroups, hasSurfaceSequence, sequenceTiming } from './content-groups.js';
+import { duration, numberToken, token } from './tokens.js';
+export function createTransition(options, pattern, tracks, behavior = {}) {
+    const { content } = options;
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+    let target = options.initiallyOpen ?? false;
+    let state = target ? 'open' : 'closed';
+    let animations = [];
+    let generation = 0;
+    const opacity = content.style.getPropertyValue('opacity');
+    const priority = content.style.getPropertyPriority('opacity');
+    function restore() {
+        if (opacity)
+            content.style.setProperty('opacity', opacity, priority);
+        else
+            content.style.removeProperty('opacity');
+    }
+    function endpoint() { restore(); if (!target && !behavior.keepVisibleWhenClosed)
+        content.style.opacity = '0'; }
+    function notify(next) { state = next; options.onStateChange?.(next); }
+    function cancel() { generation++; animations.forEach(a => a.cancel()); animations = []; }
+    function settle() {
+        cancel();
+        endpoint();
+        notify(target ? 'open' : 'closed');
+    }
+    endpoint();
+    function set(next) {
+        if (state === 'destroyed' || next === target)
+            return;
+        target = next;
+        // Let adapters settle native effects before the visual-state snapshot.
+        if (!animations.length)
+            restore();
+        // Notify before measurement so the component can unhide and position itself.
+        notify(target ? 'opening' : 'closing');
+        if (state === 'destroyed')
+            return;
+        if (reduced.matches || typeof content.animate !== 'function') {
+            settle();
+            return;
+        }
+        if (!animations.length) {
+            try {
+                let time = duration(content, pattern);
+                if (!time) {
+                    settle();
+                    return;
+                }
+                const requestedEasing = token(content, `easing-${pattern}`);
+                const easing = CSS.supports('animation-timing-function', requestedEasing) ? requestedEasing : token(content, 'easing-standard');
+                const recipe = motionBehaviors[(pattern === 'scale' ? 'grow' : pattern === 'liquid' ? 'extract' : pattern === 'content' ? 'fade' : pattern)];
+                const descriptions = tracks();
+                time *= behavior.durationScale?.() ?? 1;
+                const reveal = options.reveal ? (Array.isArray(options.reveal) ? options.reveal : [options.reveal]) : [];
+                const progressive = numberToken(content, 'content-progressive') > 0;
+                const surfaceSequence = progressive && hasSurfaceSequence(content);
+                const { targets: revealTargets, orders } = revealGroups(content, reveal, options.revealPseudoElements ?? [], progressive);
+                if (revealTargets.length) {
+                    const start = numberToken(content, progressive ? 'component-content-offset' : `${pattern}-reveal-offset`);
+                    const end = numberToken(content, progressive ? 'component-content-end' : `${pattern}-reveal-end`);
+                    const blur = token(content, `${pattern}-reveal-blur`);
+                    const plan = contentTimeline(content, orders.length, { start, end, stepToken: 'component-content-stagger', capToken: 'component-content-stagger-span' });
+                    for (const { element, pseudoElement, order } of revealTargets) {
+                        const index = orders.indexOf(order);
+                        const sequence = surfaceSequence ? (behavior.revealTiming ?? ((count, index) => sequenceTiming(content, count, index)))(orders.length + 1, index + 1) : undefined;
+                        const range = sequence ?? plan.at(index);
+                        if (!pseudoElement && (element === content || !content.contains(element)))
+                            throw new Error('Reveal targets must be inner elements, separate from the surface.');
+                        descriptions.push(...contentTracks({ element, pseudoElement, ...range, blur, easing: token(content, 'easing-reveal'),
+                            distance: recipe?.contentEffect === 'slide-blur-fade' ? token(content, 'reveal-distance') : undefined }));
+                    }
+                }
+                for (const track of descriptions) {
+                    const timing = { duration: time, easing: track.easing ?? easing, fill: 'both', composite: track.composite ?? 'replace' };
+                    const a = track.pseudoElement
+                        ? new Animation(new KeyframeEffect(track.element, track.frames, { ...timing, pseudoElement: track.pseudoElement }), document.timeline)
+                        : track.element.animate(track.frames, timing);
+                    a.pause();
+                    a.currentTime = target ? 0 : time;
+                    animations.push(a);
+                }
+            }
+            catch (error) {
+                settle();
+                throw error;
+            }
+        }
+        // Reversing at an exact endpoint must settle, rather than letting play()
+        // auto-rewind the effect to the opposite end of the timeline.
+        if (animations.every(a => target ? Number(a.currentTime) >= Number(a.effect.getTiming().duration) : Number(a.currentTime) <= 0)) {
+            settle();
+            return;
+        }
+        const version = ++generation;
+        animations.forEach(a => { a.playbackRate = target ? 1 : -1; a.play(); });
+        Promise.all(animations.map(a => a.finished)).then(() => {
+            if (version === generation && state !== 'destroyed')
+                settle();
+        }).catch(() => { });
+    }
+    function seek(progress) {
+        if (!Number.isFinite(progress))
+            throw new Error('Motion progress must be finite.');
+        if (state === 'destroyed')
+            return;
+        const p = Math.max(0, Math.min(1, progress));
+        if (reduced.matches) {
+            const next = p >= .5;
+            if (next !== target)
+                set(next);
+            else if (animations.length)
+                settle();
+            return;
+        }
+        if (!animations.length) {
+            if ((p === 0 && state === 'closed') || (p === 1 && state === 'open'))
+                return;
+            set(state !== 'open');
+        }
+        if (!animations.length)
+            return;
+        generation++;
+        target = p > 0;
+        animations.forEach(a => { a.pause(); a.currentTime = p * Number(a.effect.getTiming().duration); });
+        if (p === 0 || p === 1)
+            settle();
+        else if (state !== 'opening')
+            notify('opening');
+    }
+    function preferenceChanged() { if (reduced.matches && animations.length)
+        settle(); }
+    reduced.addEventListener('change', preferenceChanged);
+    return {
+        get state() { return state; }, get isOpen() { return target; },
+        seek,
+        open: () => set(true), close: () => set(false), toggle: () => set(!target),
+        destroy() {
+            if (state === 'destroyed')
+                return;
+            cancel();
+            restore();
+            reduced.removeEventListener('change', preferenceChanged);
+            notify('destroyed');
+        }
+    };
+}

package/dist/core/content-frames.d.ts

@@ -0,0 +1,13 @@
+import type { Track } from './animation.js';
+export interface ContentTrackOptions {
+    element: HTMLElement;
+    pseudoElement?: string;
+    start: number;
+    end: number;
+    blur: string;
+    easing: string;
+    distance?: string;
+    blurEnd?: number;
+}
+/** The single fade/blur recipe; Content adds an additive vertical translation. */
+export declare function contentTracks(options: ContentTrackOptions): Track[];

package/dist/core/content-frames.js

@@ -0,0 +1,27 @@
+/** The single fade/blur recipe; Content adds an additive vertical translation. */
+export function contentTracks(options) {
+    const { element, pseudoElement, start, end, blur, easing, distance, blurEnd } = options;
+    if (!CSS.supports('filter', `blur(${blur})`))
+        throw new Error('Content blur must be a CSS length.');
+    const style = getComputedStyle(element, pseudoElement), filter = style.filter, opacity = style.opacity;
+    const blurred = `${filter === 'none' ? '' : `${filter} `}blur(${blur})`;
+    const display = style.display === 'inline' ? { display: 'inline-block' } : {};
+    const from = { ...display, opacity: 0, ...(blurEnd === undefined ? { filter: blurred } : {}) };
+    const to = { ...display, opacity, ...(blurEnd === undefined ? { filter } : {}) };
+    const tracks = [{ element, pseudoElement, easing: 'linear', frames: [
+                { ...from, offset: 0 }, { ...from, offset: start, easing }, { ...to, offset: end }, { ...to, offset: 1 }
+            ] }];
+    if (distance) {
+        if (!CSS.supports('translate', `0 ${distance}`))
+            throw new Error('Content distance must be a CSS length.');
+        tracks.push({ element, pseudoElement, easing: 'linear', composite: 'add', frames: [
+                { translate: `0 ${distance}`, offset: 0 }, { translate: `0 ${distance}`, offset: start, easing },
+                { translate: '0 0', offset: end }, { translate: '0 0', offset: 1 }
+            ] });
+    }
+    if (blurEnd !== undefined)
+        tracks.push({ element, pseudoElement, easing: 'linear', frames: [
+                { filter: blurred, offset: 0, easing }, { filter, offset: blurEnd }, { filter, offset: 1 }
+            ] });
+    return tracks;
+}

package/dist/core/content-groups.d.ts

@@ -0,0 +1,18 @@
+/** Keep icon/label pairs and semantic sections together; never reveal nested groups twice. */
+export declare function contentGroups(roots: HTMLElement[]): HTMLElement[];
+/** Bound the stagger so any number of groups still finishes inside the same timeline. */
+export declare function contentStagger(content: HTMLElement, count: number, span?: number): number;
+/** Opt in to a shared overlapping sequence: surface first, then its groups. */
+export declare function hasSurfaceSequence(content: HTMLElement): boolean;
+export declare function sequenceTiming(content: HTMLElement, count: number, index: number): {
+    start: number;
+    end: number;
+};
+export declare function revealGroups(content: HTMLElement, roots: HTMLElement[], pseudos: string[], progressive: boolean): {
+    targets: {
+        element: HTMLElement;
+        pseudoElement: string | undefined;
+        order: number;
+    }[];
+    orders: number[];
+};

package/dist/core/content-groups.js

@@ -0,0 +1,34 @@
+import { contentTimeline } from './content-timing.js';
+/** Keep icon/label pairs and semantic sections together; never reveal nested groups twice. */
+export function contentGroups(roots) {
+    const selector = '[data-motion-order],[data-motion-content-group],header,footer,[role="menuitem"],button,h1,h2,h3,h4,h5,h6,p,small,figure,figcaption,label,input,textarea,select';
+    const groups = roots.flatMap(root => {
+        if (root.matches(selector))
+            return [root];
+        const candidates = Array.from(root.querySelectorAll(selector));
+        return candidates.length ? candidates.filter(item => !candidates.some(other => other !== item && other.contains(item))) : [root];
+    });
+    return Array.from(new Set(groups)).filter(item => !groups.some(other => other !== item && other.contains(item))).map((element, index) => ({ element, index, order: Number(element.dataset.motionOrder ?? index) })).sort((a, b) => a.order - b.order || a.index - b.index).map(item => item.element);
+}
+/** Bound the stagger so any number of groups still finishes inside the same timeline. */
+export function contentStagger(content, count, span = 1) {
+    return contentTimeline(content, count, { end: span }).step;
+}
+/** Opt in to a shared overlapping sequence: surface first, then its groups. */
+export function hasSurfaceSequence(content) {
+    return content.matches('[data-motion-sequence="surface-first"],.motion-sequence');
+}
+export function sequenceTiming(content, count, index) {
+    return contentTimeline(content, count).at(index);
+}
+export function revealGroups(content, roots, pseudos, progressive) {
+    const grouped = progressive ? contentGroups(roots) : roots;
+    const generated = Array.from(new Set(pseudos));
+    const targets = [
+        ...Array.from(new Set(grouped)).map((element, index) => ({ element, pseudoElement: undefined, order: Number(element.dataset.motionOrder ?? (index + generated.length)) })),
+        ...generated.map((pseudoElement, index) => ({ element: content, pseudoElement, order: Number(content.getAttribute(pseudoElement === '::before' ? 'data-motion-before-order' : 'data-motion-after-order') ?? index) })),
+    ].sort((a, b) => a.order - b.order);
+    if (targets.some(target => !Number.isFinite(target.order)))
+        throw new Error('Motion content order must be numeric.');
+    return { targets, orders: Array.from(new Set(targets.map(target => target.order))) };
+}

package/dist/core/content-layout.d.ts

@@ -0,0 +1,4 @@
+import type { Track } from './animation.js';
+/** Hold the existing inner layout in its final position while the surface
+ * resizes around it. Measurements happen once; reversal reuses native tracks. */
+export declare function fixedContentTracks(content: HTMLElement, frames: Keyframe[], pseudoElements?: ReadonlyArray<'::before' | '::after'>): Track[];

package/dist/core/content-layout.js

@@ -0,0 +1,84 @@
+/** Hold the existing inner layout in its final position while the surface
+ * resizes around it. Measurements happen once; reversal reuses native tracks. */
+export function fixedContentTracks(content, frames, pseudoElements = []) {
+    const px = (value) => parseFloat(value) || 0;
+    const borderBox = (style, axis) => px(style[axis]) + (style.boxSizing === 'border-box' ? 0 : axis === 'width'
+        ? px(style.paddingLeft) + px(style.paddingRight) + px(style.borderLeftWidth) + px(style.borderRightWidth)
+        : px(style.paddingTop) + px(style.paddingBottom) + px(style.borderTopWidth) + px(style.borderBottomWidth));
+    const final = content.getBoundingClientRect(), style = getComputedStyle(content);
+    const sx = final.width / borderBox(style, 'width'), sy = final.height / borderBox(style, 'height');
+    const borderLeft = px(style.borderLeftWidth), borderTop = px(style.borderTopWidth);
+    const children = Array.from(content.children).filter((node) => node instanceof HTMLElement || node instanceof SVGSVGElement);
+    const snapshots = children.flatMap(element => {
+        const css = getComputedStyle(element);
+        if (css.display === 'none' || css.position === 'fixed')
+            return [];
+        const rect = element.getBoundingClientRect(), width = borderBox(css, 'width'), height = borderBox(css, 'height');
+        if (!width || !height)
+            return [];
+        // Preserve a child's existing transform while converting its visual rect
+        // back to its layout origin (including translated/scaled/rotated icons).
+        const matrix = new DOMMatrixReadOnly(css.transform === 'none' ? undefined : css.transform);
+        const [ox, oy] = css.transformOrigin.split(' ').map(px);
+        const points = [[0, 0], [width, 0], [0, height], [width, height]].map(([x, y]) => ({
+            x: matrix.a * (x - ox) + matrix.c * (y - oy) + matrix.e + ox,
+            y: matrix.b * (x - ox) + matrix.d * (y - oy) + matrix.f + oy,
+        }));
+        return [{ element, width, height,
+                left: (rect.left - final.left) / sx - Math.min(...points.map(p => p.x)) - borderLeft,
+                top: (rect.top - final.top) / sy - Math.min(...points.map(p => p.y)) - borderTop }];
+    });
+    const pseudos = Array.from(new Set(pseudoElements)).flatMap(pseudoElement => {
+        const css = getComputedStyle(content, pseudoElement);
+        if (css.display === 'none' || css.content === 'none' || css.content === 'normal')
+            return [];
+        return [{ pseudoElement, transform: css.transform === 'none' ? '' : css.transform }];
+    });
+    if (!snapshots.length && !pseudos.length)
+        return [];
+    // A positioned surface provides the containing block for its existing nodes.
+    if (style.position === 'static')
+        frames.forEach(frame => { frame.position = 'relative'; });
+    const properties = ['width', 'height', 'transform', 'min-width', 'min-height', 'max-width', 'max-height', 'overflow', 'position',
+        'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'border-top-width', 'border-bottom-width', 'border-left-width', 'border-right-width'];
+    const saved = properties.map(name => [name, content.style.getPropertyValue(name), content.style.getPropertyPriority(name)]);
+    const positions = [];
+    try {
+        // Snapshot the small, finite set of poses once. An overshoot is not a
+        // linear extrapolation of the collapsed pose on both axes.
+        for (const frame of frames) {
+            for (const name of properties) {
+                const key = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                if (frame[key] !== undefined)
+                    content.style.setProperty(name, String(frame[key]));
+            }
+            const rect = content.getBoundingClientRect();
+            positions.push({ dx: (final.left - rect.left) / sx, dy: (final.top - rect.top) / sy });
+        }
+    }
+    finally {
+        for (const [name, value, priority] of saved) {
+            if (value)
+                content.style.setProperty(name, value, priority);
+            else
+                content.style.removeProperty(name);
+        }
+    }
+    const tracks = snapshots.map(snapshot => ({ element: snapshot.element, easing: 'linear', frames: frames.map((frame, index) => {
+            const { dx, dy } = positions[index];
+            // An absolutely positioned grid item otherwise uses its named grid area
+            // as the containing block, adding that area's offset a second time.
+            return { offset: frame.offset, easing: frame.easing, position: 'absolute', gridArea: 'auto', margin: '0px',
+                right: 'auto', bottom: 'auto', boxSizing: 'border-box', minWidth: '0px', minHeight: '0px', maxWidth: 'none', maxHeight: 'none',
+                width: `${snapshot.width}px`, height: `${snapshot.height}px`,
+                left: `${snapshot.left + dx + borderLeft - (frame.borderLeftWidth === undefined ? borderLeft : px(String(frame.borderLeftWidth)))}px`,
+                top: `${snapshot.top + dy + borderTop - (frame.borderTopWidth === undefined ? borderTop : px(String(frame.borderTopWidth)))}px` };
+        }) }));
+    // Generated icons are content too. Counter only the changing surface origin,
+    // leaving their component-owned grid placement and the slide itself intact.
+    for (const { pseudoElement, transform } of pseudos)
+        tracks.push({ element: content, pseudoElement, easing: 'linear', frames: frames.map((frame, index) => ({
+                offset: frame.offset, easing: frame.easing, transform: `${transform} translate(${positions[index].dx}px,${positions[index].dy}px)`
+            })) });
+    return tracks;
+}

package/dist/core/content-timing.d.ts

@@ -0,0 +1,16 @@
+export interface ContentTimelineOptions {
+    perItem?: boolean;
+    start?: number;
+    end?: number;
+    stepToken?: string;
+    capToken?: string;
+}
+/** One timing model: fixed component window or full-duration content items. */
+export declare function contentTimeline(content: HTMLElement, count: number, options?: ContentTimelineOptions): {
+    durationScale: number;
+    step: number;
+    at(index: number): {
+        start: number;
+        end: number;
+    };
+};

package/dist/core/content-timing.js

@@ -0,0 +1,20 @@
+import { numberToken } from './tokens.js';
+/** One timing model: fixed component window or full-duration content items. */
+export function contentTimeline(content, count, options = {}) {
+    const start = options.start ?? 0, end = options.end ?? 1, intervals = Math.max(0, count - 1);
+    if (start < 0 || start >= end || end > 1)
+        throw new Error('Content timing must satisfy 0 <= start < end <= 1.');
+    const requested = numberToken(content, 'content-progressive') && intervals ? numberToken(content, options.stepToken ?? 'content-stagger') : 0;
+    if (requested < 0)
+        throw new Error('Content stagger must be non-negative.');
+    const cap = options.capToken ? numberToken(content, options.capToken) : Infinity;
+    if (cap < 0)
+        throw new Error('Content stagger cap must be non-negative.');
+    const step = options.perItem ? requested : intervals ? Math.min(requested, cap / intervals, (end - start) / (2 * intervals)) : 0;
+    const durationScale = options.perItem ? 1 + step * intervals : 1;
+    return { durationScale, step, at(index) {
+            return options.perItem
+                ? { start: index * step / durationScale, end: (index * step + 1) / durationScale }
+                : { start: start + index * step, end: end - (intervals - index) * step };
+        } };
+}

package/dist/core/geometry.d.ts

@@ -0,0 +1,69 @@
+/** Read only at the start of a new trip; reversal reuses the same geometry. */
+export declare function morphGeometry(trigger: HTMLElement, content: HTMLElement): {
+    side: string;
+    origin: string;
+    anchor: {
+        x: number;
+        y: number;
+    };
+    dx: number;
+    dy: number;
+    from: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    sx: number;
+    sy: number;
+};
+export declare function localScale(content: HTMLElement, to: DOMRectReadOnly): {
+    xScale: number;
+    yScale: number;
+    width: number;
+    height: number;
+};
+type Rectangle = Pick<DOMRectReadOnly, 'left' | 'top' | 'width' | 'height'>;
+export declare const motionAnchors: Record<string, {
+    x: number;
+    y: number;
+}>;
+export declare function explicitMotionAnchor(content: HTMLElement): {
+    x: number;
+    y: number;
+} | undefined;
+/** Read the component's growth anchor from its existing alignment/placement.
+ * Matching centers stay centered; matching edges stay fixed during growth. */
+export declare function growthAnchor(source: Rectangle, target: Rectangle): {
+    x: number;
+    y: number;
+};
+/** Grow away from the anchor: a top-right anchor expands left and down. */
+export declare function growthInsets(anchor: {
+    x: number;
+    y: number;
+}, pad: number): {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/** Measure a resized box once, including its component-owned centering/insets.
+ * Temporary preparation styles are restored synchronously, before any paint. */
+export declare function resizeGeometry(content: HTMLElement, source: Rectangle | ((to: DOMRectReadOnly, ax: number, ay: number) => Rectangle), origin?: string, collapseAxis?: 'width' | 'height' | 'both'): {
+    anchor: {
+        x: number;
+        y: number;
+    };
+    width: {
+        from: number;
+        to: number;
+    };
+    height: {
+        from: number;
+        to: number;
+    };
+    dx: number;
+    dy: number;
+};
+export {};