@tobiasoberpaul/mdk 0.3.0 → 0.4.0

package/README.md

@@ -25,7 +25,7 @@ Your component manages layout, visibility, focus and accessibility. MDK handles
 
 For an existing popover or menu, use `createPresenceMotion` to connect its open and close signals. Use `resize: 'transform'` with `createGrowTransition` for local growth on a surface positioned by the host. [Integration guide](https://github.com/TOberpaul/animations/blob/main/docs/LIBRARY.md#animate-an-existing-component)
 
-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.
+The library includes Grow, Extract, Morph, Slide and Fade. See the [library guide](https://github.com/TOberpaul/animations/blob/main/docs/LIBRARY.md) for the API, CSS tokens and integration patterns.
 
 Coding assistants can access the MDK reference and integration examples through the public MCP server. See the [MCP setup](https://github.com/TOberpaul/animations/blob/main/docs/AI_INTEGRATION.md#hosted-mcp).
 

package/dist/behaviors.js

@@ -7,13 +7,11 @@ export const motionBehaviors = {
 };
 /** Canonical naming shared by declarative integration and consuming components. */
 export function getMotionKind(content) {
-    const names = [...Object.keys(motionBehaviors), 'liquid', 'content'];
+    const names = [...Object.keys(motionBehaviors), '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.js

@@ -52,7 +52,7 @@ export function createTransition(options, pattern, tracks, behavior = {}) {
                 }
                 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 recipe = motionBehaviors[(pattern === 'scale' ? 'grow' : pattern === 'transfer' ? 'extract' : pattern === 'content' ? 'fade' : pattern)];
                 const descriptions = tracks();
                 time *= behavior.durationScale?.() ?? 1;
                 const reveal = options.reveal ? (Array.isArray(options.reveal) ? options.reveal : [options.reveal]) : [];

package/dist/core/resize.js

@@ -152,32 +152,50 @@ function scaleOrigin(content) {
     const block = horizontal ? ['top', 'bottom'] : writingMode.endsWith('-rl') ? ['right', 'left'] : ['left', 'right'];
     return origin.replace(/\b(inline|block)-(start|end)\b/g, (_, axis, edge) => (axis === 'inline' ? inline : block)[edge === 'start' ? 0 : 1]);
 }
+function measureScaleOrigin(content, style, origin, width, height) {
+    const probe = content.ownerDocument.createElement('span');
+    probe.style.cssText = 'all:initial;position:fixed;visibility:hidden;pointer-events:none;transition:none!important;animation:none!important';
+    for (const name of ['font-size', 'font-family', 'line-height']) {
+        probe.style.setProperty(name, style.getPropertyValue(name));
+    }
+    const contentBox = style.transformBox === 'content-box' || style.transformBox === 'fill-box';
+    const inset = (side) => contentBox
+        ? parseFloat(style.getPropertyValue('padding-' + side)) + parseFloat(style.getPropertyValue('border-' + side + '-width'))
+        : 0;
+    const left = inset('left'), top = inset('top');
+    probe.style.width = `${Math.max(0, width - left - inset('right'))}px`;
+    probe.style.height = `${Math.max(0, height - top - inset('bottom'))}px`;
+    const read = () => getComputedStyle(probe).transformOrigin.split(' ').map(parseFloat);
+    let hostOrigin = style.transformOrigin.split(' ').map(parseFloat);
+    const parent = contentBox ? content : content.ownerDocument.body;
+    // Resolve keywords and percentages without starting a CSS transition on the host surface.
+    parent.appendChild(probe);
+    try {
+        // Resolved host styles can report percentages in border-box pixels even
+        // when transforms use the content box. Inherit onto the sized probe.
+        if (contentBox) {
+            probe.style.setProperty('transform-origin', 'inherit', 'important');
+            hostOrigin = read();
+        }
+        probe.style.setProperty('transform-origin', origin, 'important');
+        const [x, y] = read();
+        return { x: x + left, y: y + top, dx: x - hostOrigin[0], dy: y - hostOrigin[1] };
+    }
+    finally {
+        probe.remove();
+    }
+}
 function transformGrowTracks(options) {
     const { content, axis } = options;
     const style = getComputedStyle(content);
-    const hostOrigin = style.transformOrigin.split(' ').map(parseFloat);
     const opacity = style.opacity;
-    const property = 'transform-origin';
-    const inlineOrigin = content.style.getPropertyValue(property);
-    const priority = content.style.getPropertyPriority(property);
     const origin = scaleOrigin(content);
-    if (!CSS.supports(property, origin))
+    if (!CSS.supports('transform-origin', origin))
         throw new Error('Invalid --motion-scale-origin.');
-    let x, y;
-    try {
-        content.style.setProperty(property, origin, 'important');
-        [x, y] = style.transformOrigin.split(' ').map(parseFloat);
-    }
-    finally {
-        if (inlineOrigin)
-            content.style.setProperty(property, inlineOrigin, priority);
-        else
-            content.style.removeProperty(property);
-    }
     const { width, height } = localScale(content, content.getBoundingClientRect());
     if (!width || !height)
         throw new Error('Grow content must be measurable before animation.');
-    const dx = x - hostOrigin[0], dy = y - hostOrigin[1];
+    const { x, y, dx, dy } = measureScaleOrigin(content, style, origin, width, height);
     const end = numberToken(content, 'scale-geometry-end');
     if (end <= 0 || end > 1)
         throw new Error('Scale geometry end must satisfy 0 < end <= 1.');

package/dist/index.d.ts

@@ -1,6 +1,4 @@
 export { createMorphTransition } from './transitions/morph.js';
-export { createLiquidMorphTransition } from './transitions/liquid.js';
-export type { LiquidMorphOptions, LiquidMorphTransition } from './transitions/liquid.js';
 export type { MorphOptions } from './transitions/morph.js';
 export { createSlideTransition } from './transitions/slide.js';
 export type { SlideOptions } from './transitions/slide.js';

package/dist/index.js

@@ -1,5 +1,4 @@
 export { createMorphTransition } from './transitions/morph.js';
-export { createLiquidMorphTransition } from './transitions/liquid.js';
 export { createSlideTransition } from './transitions/slide.js';
 export { createScaleTransition } from './transitions/scale.js';
 export { createContentTransition } from './transitions/content.js';

package/dist/styles/motion.css

@@ -58,19 +58,19 @@
   --motion-scale-origin: center center;
   --motion-slide-distance: 100%;
   --motion-slide-peak-offset: .8;
-  --motion-duration-liquid: var(--motion-duration);
-  --motion-easing-liquid: var(--motion-easing-standard);
-  --motion-liquid-geometry-end: .8;
-  --motion-liquid-reveal-offset: .3;
-  --motion-liquid-reveal-end: var(--motion-liquid-geometry-end);
-  --motion-liquid-reveal-blur: var(--motion-reveal-blur);
-  --motion-liquid-volume-offset: .18;
-  --motion-liquid-source-hide-start: var(--motion-liquid-reveal-offset);
-  --motion-liquid-source-hide-end: var(--motion-liquid-reveal-end);
-  --motion-liquid-source-blur: var(--motion-liquid-reveal-blur);
-  --motion-liquid-peak-offset: .5;
+  --motion-duration-transfer: var(--motion-duration);
+  --motion-easing-transfer: var(--motion-easing-standard);
+  --motion-transfer-geometry-end: .8;
+  --motion-transfer-reveal-offset: .3;
+  --motion-transfer-reveal-end: var(--motion-transfer-geometry-end);
+  --motion-transfer-reveal-blur: var(--motion-reveal-blur);
+  --motion-transfer-volume-offset: .18;
+  --motion-transfer-source-hide-start: var(--motion-transfer-reveal-offset);
+  --motion-transfer-source-hide-end: var(--motion-transfer-reveal-end);
+  --motion-transfer-source-blur: var(--motion-transfer-reveal-blur);
+  --motion-transfer-peak-offset: .5;
   --motion-overshoot-max: .75rem;
 }
 @media (prefers-reduced-motion: reduce) {
-  :root { --motion-duration-morph: 0ms; --motion-duration-slide: 0ms; --motion-duration-scale: 0ms; --motion-duration-backdrop: 0ms; --motion-duration-content: 0ms; --motion-duration-liquid: 0ms; }
+  :root { --motion-duration-morph: 0ms; --motion-duration-slide: 0ms; --motion-duration-scale: 0ms; --motion-duration-backdrop: 0ms; --motion-duration-content: 0ms; --motion-duration-transfer: 0ms; }
 }

package/dist/transitions/extract.d.ts

@@ -1,5 +1,5 @@
-import { type LiquidMorphOptions } from './liquid.js';
+import { type SurfaceTransferOptions } from './surface-transfer.js';
 import type { Transition } from '../core/lifecycle.js';
-export type ExtractOptions = Omit<LiquidMorphOptions, 'replaceTrigger'>;
+export type ExtractOptions = Omit<SurfaceTransferOptions, 'replaceTrigger'>;
 /** Extract a new surface while retaining the original trigger. */
 export declare function createExtractTransition(options: ExtractOptions): Transition;

package/dist/transitions/extract.js

@@ -1,5 +1,5 @@
-import { createLiquidMorphTransition } from './liquid.js';
+import { createSurfaceTransfer } from './surface-transfer.js';
 /** Extract a new surface while retaining the original trigger. */
 export function createExtractTransition(options) {
-    return createLiquidMorphTransition({ ...options, replaceTrigger: false });
+    return createSurfaceTransfer({ ...options, replaceTrigger: false });
 }

package/dist/transitions/morph.d.ts

@@ -1,5 +1,5 @@
-import { type LiquidMorphOptions } from './liquid.js';
+import { type SurfaceTransferOptions } from './surface-transfer.js';
 import type { Transition } from '../core/lifecycle.js';
-export type MorphOptions = Omit<LiquidMorphOptions, 'replaceTrigger'>;
+export type MorphOptions = Omit<SurfaceTransferOptions, 'replaceTrigger'>;
 /** The source becomes the target; the integration manages original-trigger visibility. */
 export declare function createMorphTransition(options: MorphOptions): Transition;

package/dist/transitions/morph.js

@@ -1,5 +1,5 @@
-import { createLiquidMorphTransition } from './liquid.js';
+import { createSurfaceTransfer } from './surface-transfer.js';
 /** The source becomes the target; the integration manages original-trigger visibility. */
 export function createMorphTransition(options) {
-    return createLiquidMorphTransition({ ...options, replaceTrigger: true });
+    return createSurfaceTransfer({ ...options, replaceTrigger: true });
 }

package/dist/transitions/{liquid.d.ts → surface-transfer.d.ts}

@@ -1,5 +1,5 @@
 import type { Options, Transition } from '../core/lifecycle.js';
-export interface LiquidMorphOptions extends Options {
+export interface SurfaceTransferOptions extends Options {
     /** Distinct node: retain the source. Same node as content: become the target.
      * For the same node, prepare the expanded layout synchronously on opening
      * and restore its compact layout only on closed. Initialize closed. */
@@ -8,6 +8,5 @@ export interface LiquidMorphOptions extends Options {
      * trigger. The component hides/shows that trigger in onStateChange. */
     replaceTrigger?: boolean;
 }
-export type LiquidMorphTransition = Transition;
-/** One liquid behavior for separate surfaces and a trigger becoming the target. */
-export declare function createLiquidMorphTransition(options: LiquidMorphOptions): LiquidMorphTransition;
+/** Shared surface and foreground animation for Extract and Morph. */
+export declare function createSurfaceTransfer(options: SurfaceTransferOptions): Transition;

package/dist/transitions/{liquid.js → surface-transfer.js}

@@ -38,12 +38,12 @@ function visibleBackground(element) {
     const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
     return `rgb(${r},${g},${b})`;
 }
-/** One liquid behavior for separate surfaces and a trigger becoming the target. */
-export function createLiquidMorphTransition(options) {
+/** Shared surface and foreground animation for Extract and Morph. */
+export function createSurfaceTransfer(options) {
     const sameElement = options.trigger === options.content;
     const replacesTrigger = sameElement || options.replaceTrigger;
     if (replacesTrigger && options.initiallyOpen)
-        throw new Error('A replacing liquid morph must initialize in its closed layout.');
+        throw new Error('A replacing transfer morph must initialize in its closed layout.');
     let previous = options.initiallyOpen ? 'open' : 'closed';
     let closed;
     let overlay;
@@ -78,7 +78,7 @@ export function createLiquidMorphTransition(options) {
                 remove();
             }
             options.onStateChange?.(state);
-        } }, 'liquid', () => {
+        } }, 'transfer', () => {
         remove();
         const { content, trigger } = options;
         const box = content.getBoundingClientRect(), source = replacesTrigger ? closed.rect : trigger.getBoundingClientRect();
@@ -88,7 +88,7 @@ export function createLiquidMorphTransition(options) {
         const width = px(style.width) + (style.boxSizing === 'border-box' ? 0 : extraX);
         const height = px(style.height) + (style.boxSizing === 'border-box' ? 0 : extraY);
         if (!width || !height || !source.width || !source.height)
-            throw new Error('Liquid morph elements must be measurable.');
+            throw new Error('Surface transfer elements must be measurable.');
         const scaleX = box.width / width, scaleY = box.height / height;
         const left = (source.left - box.left) / scaleX, top = (source.top - box.top) / scaleY;
         const sw = source.width / scaleX, sh = source.height / scaleY;
@@ -102,10 +102,10 @@ export function createLiquidMorphTransition(options) {
         const borderFrom = replacesTrigger ? closed.border : triggerStyle.borderTopColor, borderTo = style.borderTopColor;
         const swell = overshootToken(content, 'overshoot-max', sw, sh);
         const overshoot = overshootToken(content, 'overshoot-max', width, height);
-        const volume = numberToken(content, 'liquid-volume-offset'), peak = numberToken(content, 'liquid-peak-offset');
-        const end = numberToken(content, 'liquid-geometry-end');
+        const volume = numberToken(content, 'transfer-volume-offset'), peak = numberToken(content, 'transfer-peak-offset');
+        const end = numberToken(content, 'transfer-geometry-end');
         if (!(swell >= 0 && overshoot >= 0 && volume > 0 && volume < peak && peak < end && end < 1))
-            throw new Error('Invalid liquid geometry tokens.');
+            throw new Error('Invalid transfer geometry tokens.');
         // The initial volume phase swells the trigger symmetrically. Only the target
         // grows away from its component-owned anchor; preserve their envelope.
         const anchor = explicitMotionAnchor(content) ?? growthAnchor(source, box);
@@ -140,9 +140,9 @@ export function createLiquidMorphTransition(options) {
         triggerCopy = replacesTrigger ? closed.copy.cloneNode(true) : copyTrigger(trigger);
         Object.assign(triggerCopy.style, { position: 'absolute', left: (left - px(style.borderLeftWidth)) + 'px', top: (top - px(style.borderTopWidth)) + 'px', width: sw + 'px', height: sh + 'px', boxSizing: 'border-box', margin: '0', transform: 'none', transition: 'none', animation: 'none', background: 'transparent', borderColor: 'transparent', boxShadow: 'none', pointerEvents: 'none', zIndex: '0' });
         content.append(triggerCopy);
-        const revealStart = numberToken(content, 'liquid-reveal-offset'), revealEnd = numberToken(content, 'liquid-reveal-end');
+        const revealStart = numberToken(content, 'transfer-reveal-offset'), revealEnd = numberToken(content, 'transfer-reveal-end');
         if (revealStart < 0 || revealStart >= revealEnd || revealEnd > 1)
-            throw new Error('Invalid liquid reveal offsets.');
+            throw new Error('Invalid transfer reveal offsets.');
         const clipFrames = [];
         // Include the exact volume/peak poses, so frame inspection
         // reach the configured percentage without resampling error.
@@ -186,13 +186,13 @@ export function createLiquidMorphTransition(options) {
         ];
         const overlapsTarget = source.left < box.right && source.right > box.left && source.top < box.bottom && source.bottom > box.top;
         if (replacesTrigger || overlapsTarget) {
-            const hideStart = numberToken(content, 'liquid-source-hide-start');
-            const hideEnd = numberToken(content, 'liquid-source-hide-end');
-            const blur = token(content, 'liquid-source-blur');
+            const hideStart = numberToken(content, 'transfer-source-hide-start');
+            const hideEnd = numberToken(content, 'transfer-source-hide-end');
+            const blur = token(content, 'transfer-source-blur');
             if (hideStart < 0 || hideStart >= hideEnd || hideEnd > 1)
-                throw new Error('Liquid source hide offsets must satisfy 0 <= start < end <= 1.');
+                throw new Error('Transfer source hide offsets must satisfy 0 <= start < end <= 1.');
             if (!CSS.supports('filter', `blur(${blur})`))
-                throw new Error('Liquid source blur must be a valid non-negative CSS length.');
+                throw new Error('Transfer source blur must be a valid non-negative CSS length.');
             const sourceStyle = getComputedStyle(triggerCopy), filter = sourceStyle.filter;
             const blurred = `${filter === 'none' ? '' : `${filter} `}blur(${blur})`;
             // Crossfade both contents over the same interval, without moving the

package/docs/LIBRARY.md

@@ -134,6 +134,10 @@ Pass `trigger` only to grow from the trigger's edge. Use
 host transform and leaves layout dimensions and insets alone. The whole surface
 scales visually, including its border and content. Set `--motion-overshoot-max: 0`
 to turn off overshoot. This mode works with `createPresenceMotion`.
+MDK resolves the motion origin without changing the surface's own
+`transform-origin`, so host CSS transitions on that property stay independent.
+The anchor follows the surface's `transform-box`, including `content-box`.
+Origin and dimensions are measured at the start of each animation.
 
 The default `resize: 'metrics'` still resizes the actual surface. Grow with a
 `trigger` continues to use trigger-edge geometry. The local transform mode
@@ -147,7 +151,6 @@ supports HTML surfaces without an SVG overlay.
 | `createScaleTransition` | Deprecated alias for local Grow | Optional `axis`, `backdrop` |
 | `createExtractTransition` | Extract a new surface while retaining the trigger | `trigger` |
 | `createMorphTransition` | Transform the trigger into the target surface | `trigger` |
-| `createLiquidMorphTransition` | Source volume → encompassing surface → target | `trigger`; optional `replaceTrigger` |
 | `createSlideTransition` | Bounded translate3d entry or two-pane shift | Optional `side`, `mode`, `outgoing`, `backdrop` |
 | `createContentTransition` | Fixed slide + blur + fade | Optional `items`, `reveal`, `timing` |
 | `createMotion` | Selects a factory from markup | See declarative integration below |
@@ -187,16 +190,17 @@ Public factories, declarative markup and example titles use the same meanings:
 
 Migration: the earlier `createMorphTransition` name referred to trigger-edge Grow.
 Use `createGrowTransition` for that old behavior. `createMorphTransition` now
-means replacing Morph, consistent with the examples. The lower-level
-`createLiquidMorphTransition` remains available with an explicit
-`replaceTrigger` flag, and `createScaleTransition` remains an origin-Grow alias.
+means replacing Morph, consistent with the examples. To migrate from the former
+Liquid API or markup, use Extract when the source stays visible and Morph when
+the source becomes the target. Use the `--motion-transfer-*` and
+`--motion-duration-transfer` tokens for the shared animation settings.
 
 Extract retains the original trigger. Replacing Morph snapshots its foreground,
 then crossfades that foreground into target content while one material surface
 moves between the geometries. The integration hides/inerts the real trigger
 until closed and restores it afterward. This avoids nested interactive controls.
 
-Liquid animates a temporary HTML surface with CSS dimensions, corners, background and borders. It removes the temporary surface and foreground
+Extract and Morph animate a temporary HTML surface with CSS dimensions, corners, background and borders. They remove the temporary surface and foreground
 copy at rest. The resting UI is the real HTML component. Trigger swelling is a
 phase of the click animation; there is no press/hold feature or press/release API.
 
@@ -207,7 +211,7 @@ the right edge. Both buttons remain visible and the main action is independent.
 
 ### Material source and composite inputs
 
-Liquid reads material values from `content`. If a component wrapper is
+Extract and Morph read material values from `content`. If a component wrapper is
 transparent/borderless but a nested input paints the real material, explicitly
 prepare a surface with the input's background, border and radius before the
 motion snapshot. During travel, prevent the inner control from painting a second
@@ -263,12 +267,10 @@ const transition = createMotion({
 | `data-motion-axis` | Grow axis: `width` or `height` |
 | `data-motion-side` | Slide entry side |
 | `data-motion-timing` | Content: `per-item` (default) or `total` |
-| `data-motion-replace-trigger` | Presence enables replacing Liquid |
 
 An explicit `data-motion` takes precedence over classes. Without it, use exactly
 one matching class. Declarative `morph` selects the replacing Morph factory directly.
-The deprecated `liquid` / `motion-liquid` spelling remains a compatibility path; its
-`data-motion-replace-trigger` flag retains its original meaning. Recreate the controller to change behavior after
+Recreate the controller to change behavior after
 initialization. Change CSS tokens for per-trip visual parameters.
 
 ## Content progression and ordering
@@ -362,7 +364,7 @@ can be overridden locally on a surface or globally.
 
 | Token | Library default / meaning |
 | --- | --- |
-| `--motion-duration` | `300ms`; aliases for morph, scale, liquid, slide, content, backdrop |
+| `--motion-duration` | `300ms`; aliases for morph, scale, transfer, slide, content, backdrop |
 | `--motion-easing-standard` | `cubic-bezier(.42, 0, .58, 1)`; symmetric open/close |
 | `--motion-overshoot-ratio` | `15%` of the surface's shorter side by default. When unset, reads the legacy `--motion-overshoot-min` token. |
 | `--motion-overshoot-max` | `.75rem` cap shared by trigger and target; morph/scale alias this |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tobiasoberpaul/mdk",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
     "./motion.css": "./dist/styles/motion.css"
   },
   "scripts": {
-    "build": "tsc && node scripts/copy-css.mjs",
+    "build": "node scripts/clean-dist.mjs && tsc && node scripts/copy-css.mjs",
     "build:examples": "node scripts/build-db-react.mjs && node scripts/build-shadcn.mjs",
     "build:shadcn": "node scripts/build-shadcn.mjs",
     "analytics": "node context-starter/analytics/serve.mjs . --codex-history",