@octanejs/motion 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/motion",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -39,18 +39,32 @@
     "./react-m": "./src/react-m.ts"
   },
   "dependencies": {
-    "motion": "^12.42.2"
+    "motion": "^12.42.2",
+    "motion-dom": "^12.0.0"
   },
   "peerDependencies": {
-    "octane": "0.1.34"
+    "octane": "0.1.36"
   },
   "devDependencies": {
+    "@swc/core": "1.15.41",
+    "@swc/jest": "0.2.39",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@tsrx/react": "^0.2.56",
     "esbuild": "^0.28.1",
+    "jest": "30.4.2",
+    "jest-environment-jsdom": "30.4.1",
+    "jest-fixed-jsdom": "0.0.10",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.34"
+    "octane": "0.1.36"
   },
   "scripts": {
     "test": "vitest run --root ../.. --project motion",
-    "typecheck": "tsgo --noEmit -p tsconfig.json"
+    "typecheck": "tsgo --noEmit -p tsconfig.json",
+    "test:upstream": "jest --config tests/upstream-jest.config.cjs --rootDir upstream --runInBand --no-watchman",
+    "upstream:verify": "node ./scripts/verify-upstream.mjs"
   }
 }

package/src/index.ts

@@ -27,7 +27,12 @@ import {
 	resolveVariant,
 	splitVariant,
 } from './context';
-import { isMotionValue, isTransformKey, applyStyleValue } from './useMotionValue';
+import {
+	isMotionValue,
+	isTransformKey,
+	applyStyleValue,
+	removeTransformFn,
+} from './useMotionValue';
 import { useReducedMotionAtSlot } from './useReducedMotion';
 import {
 	layoutAnimationMode,
@@ -58,6 +63,10 @@ const LAYOUT_GROUP_STATE = Symbol.for('octane-motion:layout-group-state');
 const LAZY_STATE = Symbol.for('octane-motion:lazy-state');
 const LAZY_EFFECT = Symbol.for('octane-motion:lazy-effect');
 
+// Tracks MotionValue / transform shorthand keys last applied to a host so a
+// rebind can clear stale inline styles without wiping them on unmount (exit
+// clones still need the live visual state).
+const motionStyleKeys = new WeakMap<HTMLElement, string[]>();
 const boxOf = (n: HTMLElement): LayoutBox => {
 	const r = n.getBoundingClientRect();
 	return { left: r.left, top: r.top, width: r.width, height: r.height };
@@ -303,6 +312,7 @@ function createMotionComponent(tag: string, preloadedFeatures: boolean): MotionC
 		latest.layoutMode = layoutAnimationMode(props.layout);
 
 		// `initial`: apply instantly on mount (before the animate effect runs).
+		// OCTANE DIVERGENCE[motion-initial-only-no-style-materialization][conformance:initial-only-no-style-materialization]
 		useLayoutEffect(
 			() => {
 				if (animationEnabled && resolvedInitial) {
@@ -359,25 +369,64 @@ function createMotionComponent(tag: string, preloadedFeatures: boolean): MotionC
 
 		// Motion values + static transform shorthands in `style`. MotionValues are
 		// subscribed (and update the element without a re-render); shorthands apply once.
+		// Re-bind when the style bag's MotionValue identities or shorthand values change
+		// so callers can swap `style={{ x }}` across updates (upstream useMotionValue).
+		const styleMvDeps: any[] = [];
+		if (props.style && typeof props.style === 'object') {
+			for (const key in props.style) {
+				const v = props.style[key];
+				if (isMotionValue(v) || isTransformKey(key)) styleMvDeps.push(key, v);
+			}
+		}
 		useLayoutEffect(
 			() => {
+				// Clear only keys this effect previously managed that are absent from the
+				// new style bag. Patch transform functions in place so animate/layout/drag
+				// values on `style.transform` survive a MotionValue rebind.
+				// Do not clear in cleanup: on unmount the exit effect clones this node
+				// after layout-effect cleanups, and still needs the live transforms.
 				const style = props.style;
+				const prevKeys = motionStyleKeys.get(node);
+				if (prevKeys) {
+					for (const key of prevKeys) {
+						const next = style && typeof style === 'object' ? style[key] : undefined;
+						const stillManaged = next !== undefined && (isMotionValue(next) || isTransformKey(key));
+						if (stillManaged) continue;
+						// Plain static values stay in the style bag for host/domProps — do not blank
+						// them after a MotionValue→static switch (domProps already applied them).
+						if (next !== undefined) continue;
+						if (isTransformKey(key)) removeTransformFn(node, key);
+						else (node.style as any)[key] = '';
+					}
+					motionStyleKeys.delete(node);
+				}
+
 				if (!style || typeof style !== 'object') return;
-				const transformState: Record<string, any> = {};
+				const appliedKeys: string[] = [];
 				const cleanups: Array<() => void> = [];
+				// Shared bag of currently bound transform shorthands so a compound
+				// FLIP patch can keep sibling axes owned by other style MotionValues.
+				const transformState: Record<string, any> = {};
 				for (const key in style) {
 					const v = style[key];
 					if (isMotionValue(v)) {
-						const apply = (val: any) => applyStyleValue(node, key, val, transformState);
+						function apply(val: any) {
+							applyStyleValue(node, key, val, transformState);
+						}
 						apply(v.get());
+						appliedKeys.push(key);
 						cleanups.push(v.on('change', apply));
 					} else if (isTransformKey(key)) {
 						applyStyleValue(node, key, v, transformState);
+						appliedKeys.push(key);
 					}
 				}
-				return () => cleanups.forEach((c) => c());
+				if (appliedKeys.length) motionStyleKeys.set(node, appliedKeys);
+				return function unsubscribeMotionStyles() {
+					for (const cleanup of cleanups) cleanup();
+				};
 			},
-			[],
+			styleMvDeps,
 			MV,
 		);
 
@@ -518,6 +567,7 @@ function createMotionComponent(tag: string, preloadedFeatures: boolean): MotionC
 		// moved/resized vs the previous commit, apply the inverse transform instantly
 		// then animate it back to identity. (A single-element FLIP; the full projection
 		// tree — nested/shared layout, scale correction — is out of scope.)
+		// OCTANE DIVERGENCE[motion-bounded-layout-flip][conformance:bounded-layout-flip]
 		useLayoutEffect(
 			() => {
 				if (!layoutEnabled || !props.layout) {
@@ -552,6 +602,7 @@ function createMotionComponent(tag: string, preloadedFeatures: boolean): MotionC
 
 		// `layoutId`: shared-element crossfade. On mount, if a same-id element recently
 		// unmounted, FLIP from its recorded box to ours.
+		// OCTANE DIVERGENCE[motion-bounded-layoutId][conformance:bounded-layoutId]
 		useLayoutEffect(
 			() => {
 				if (!layoutEnabled) return;
@@ -580,6 +631,7 @@ function createMotionComponent(tag: string, preloadedFeatures: boolean): MotionC
 		// Unmount: this cleanup runs while the node is still in the DOM. Record shared
 		// layout state here—not in the keyed claim effect, whose cleanup also runs on
 		// dependency changes—then clone any exiting node outside the block's range.
+		// OCTANE DIVERGENCE[motion-exit-cleanup-before-detach][conformance:exit-cleanup-before-detach]
 		useLayoutEffect(
 			() => () => {
 				const n: HTMLElement | null = latest.node;

package/src/useMotionValue.ts

@@ -47,29 +47,235 @@ const PX_KEYS = new Set(['x', 'y', 'z']);
 const DEG_KEYS = new Set(['rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY']);
 const NO_UNIT = new Set(['opacity', 'zIndex', 'scale', 'scaleX', 'scaleY']);
 
+// Motion-style CSS transform function order: translate before scale/rotate so
+// offsets are not scaled when both are present.
+const TRANSFORM_ORDER = [
+	'translateX',
+	'translateY',
+	'translateZ',
+	'scale',
+	'scaleX',
+	'scaleY',
+	'rotate',
+	'rotateX',
+	'rotateY',
+	'rotateZ',
+	'skewX',
+	'skewY',
+];
+
 export function isTransformKey(k: string): boolean {
 	return k in TRANSFORM_FN;
 }
 
-// Apply one style/transform value to the element, rebuilding the transform string
-// from the accumulated transform-key state.
-export function applyStyleValue(
+function unitizeTransformValue(key: string, val: any): string {
+	if (typeof val !== 'number') return String(val);
+	if (PX_KEYS.has(key)) return `${val}px`;
+	if (DEG_KEYS.has(key)) return `${val}deg`;
+	return `${val}`;
+}
+
+/** Locate `fn(...)` with balanced parentheses so nested `calc(...)` survives. */
+function findTransformFnRange(
+	transform: string,
+	fn: string,
+): { start: number; end: number } | null {
+	const needle = fn + '(';
+	let from = 0;
+	while (from < transform.length) {
+		const idx = transform.indexOf(needle, from);
+		if (idx === -1) return null;
+		// Prefer a token boundary so `scale(` does not match inside `scaleX(`.
+		if (idx > 0 && /\S/.test(transform.charAt(idx - 1))) {
+			from = idx + 1;
+			continue;
+		}
+		let depth = 0;
+		for (let i = idx + fn.length; i < transform.length; i++) {
+			const ch = transform.charAt(i);
+			if (ch === '(') depth++;
+			else if (ch === ')') {
+				depth--;
+				if (depth === 0) return { start: idx, end: i + 1 };
+			}
+		}
+		return null;
+	}
+	return null;
+}
+
+function insertTransformFn(current: string, next: string, fn: string): string {
+	const orderIdx = TRANSFORM_ORDER.indexOf(fn);
+	if (orderIdx === -1) return `${current} ${next}`.trim();
+	for (let i = orderIdx + 1; i < TRANSFORM_ORDER.length; i++) {
+		const later = findTransformFnRange(current, TRANSFORM_ORDER[i]);
+		if (later) {
+			const before = current.slice(0, later.start).trimEnd();
+			const after = current.slice(later.start).trimStart();
+			return before ? `${before} ${next} ${after}` : `${next} ${after}`;
+		}
+	}
+	return `${current} ${next}`.trim();
+}
+
+/** Split `fn(a, b)` args at depth-0 commas so nested `calc(...)` survives. */
+function splitTransformArgs(inner: string): string[] {
+	const parts: string[] = [];
+	let start = 0;
+	let depth = 0;
+	for (let i = 0; i < inner.length; i++) {
+		const ch = inner.charAt(i);
+		if (ch === '(') depth++;
+		else if (ch === ')') depth--;
+		else if (ch === ',' && depth === 0) {
+			const part = inner.slice(start, i).trim();
+			if (part) parts.push(part);
+			start = i + 1;
+		}
+	}
+	const tail = inner.slice(start).trim();
+	if (tail) parts.push(tail);
+	return parts;
+}
+
+function replaceTransformRange(
+	current: string,
+	range: { start: number; end: number },
+	next: string,
+): string {
+	return (current.slice(0, range.start) + next + current.slice(range.end)).trim();
+}
+
+/**
+ * Layout FLIP writes compound `translate(x, y)` / `scale(sx, sy)`. Decompose those
+ * into shorthands when a style MotionValue binds so unbind can remove only that
+ * shorthand without corrupting or orphaning the layout contribution.
+ *
+ * When `transformState` already holds a sibling axis (another bound style
+ * MotionValue/static shorthand), prefer that over the FLIP compound value so a
+ * single-axis patch does not clobber the sibling until it emits again.
+ */
+function patchCompoundTransform(
+	current: string,
+	key: string,
+	val: any,
+	transformState?: Record<string, any>,
+): string | null {
+	const unitized = unitizeTransformValue(key, val);
+	if (key === 'x' || key === 'y') {
+		const range = findTransformFnRange(current, 'translate');
+		if (!range) return null;
+		const inner = current.slice(range.start + 'translate('.length, range.end - 1);
+		const args = splitTransformArgs(inner);
+		let x =
+			transformState && transformState.x !== undefined
+				? unitizeTransformValue('x', transformState.x)
+				: args[0] || '0px';
+		let y =
+			transformState && transformState.y !== undefined
+				? unitizeTransformValue('y', transformState.y)
+				: args[1] || '0px';
+		if (key === 'x') x = unitized;
+		else y = unitized;
+		return replaceTransformRange(current, range, `translateX(${x}) translateY(${y})`);
+	}
+	if (key === 'scaleX' || key === 'scaleY') {
+		const range = findTransformFnRange(current, 'scale');
+		if (!range) return null;
+		const inner = current.slice(range.start + 'scale('.length, range.end - 1);
+		const args = splitTransformArgs(inner);
+		let sx =
+			transformState && transformState.scaleX !== undefined
+				? unitizeTransformValue('scaleX', transformState.scaleX)
+				: args[0] || '1';
+		let sy =
+			transformState && transformState.scaleY !== undefined
+				? unitizeTransformValue('scaleY', transformState.scaleY)
+				: args[1] !== undefined
+					? args[1]
+					: args[0] || '1';
+		if (key === 'scaleX') sx = unitized;
+		else sy = unitized;
+		return replaceTransformRange(current, range, `scaleX(${sx}) scaleY(${sy})`);
+	}
+	return null;
+}
+
+/** Patch one transform function into the live CSS string without wiping others. */
+export function patchTransformFn(
 	node: HTMLElement,
 	key: string,
 	val: any,
-	transformState: Record<string, any>,
+	transformState?: Record<string, any>,
 ): void {
 	const fn = TRANSFORM_FN[key];
-	if (fn) {
-		transformState[key] = val;
-		let t = '';
-		for (const k in transformState) {
-			let v = transformState[k];
-			if (typeof v === 'number')
-				v = PX_KEYS.has(k) ? `${v}px` : DEG_KEYS.has(k) ? `${v}deg` : `${v}`;
-			t += `${TRANSFORM_FN[k]}(${v}) `;
+	if (!fn) return;
+	const next = `${fn}(${unitizeTransformValue(key, val)})`;
+	const current = node.style.transform || '';
+	if (!current || current === 'none') {
+		node.style.transform = next;
+		return;
+	}
+	const range = findTransformFnRange(current, fn);
+	if (range) {
+		// Layout FLIP writes asymmetric `scale(sx, sy)`. A style `scale` MotionValue
+		// shares the `scale(` token, but replacing that compound with uniform
+		// `scale(n)` drops an axis mid-FLIP. Leave asymmetric compounds alone —
+		// `scaleX`/`scaleY` still decompose via patchCompoundTransform below.
+		if (key === 'scale') {
+			const inner = current.slice(range.start + 'scale('.length, range.end - 1);
+			const args = splitTransformArgs(inner);
+			if (args.length >= 2 && args[0] !== args[1]) {
+				return;
+			}
 		}
-		node.style.transform = t.trim();
+		node.style.transform = replaceTransformRange(current, range, next);
+		return;
+	}
+	const compound = patchCompoundTransform(current, key, val, transformState);
+	if (compound !== null) {
+		node.style.transform = compound;
+		return;
+	}
+	node.style.transform = insertTransformFn(current, next, fn);
+}
+
+/**
+ * Remove one shorthand transform function from the live CSS string.
+ * Do not mutate compound layout FLIP `translate(...)` / `scale(...)` forms —
+ * those are owned by layout, not by style MotionValue unbind.
+ */
+export function removeTransformFn(node: HTMLElement, key: string): void {
+	const fn = TRANSFORM_FN[key];
+	if (!fn) return;
+	const current = node.style.transform || '';
+	if (!current || current === 'none') return;
+	const range = findTransformFnRange(current, fn);
+	if (!range) return;
+	// Style `scale` shares the `scale(` token with layout FLIP's compound
+	// `scale(sx, sy)`. Only remove single-arg style-owned forms; leave compounds
+	// for layout (mirrors patchTransformFn's asymmetric-scale guard on bind).
+	if (key === 'scale') {
+		const inner = current.slice(range.start + 'scale('.length, range.end - 1);
+		const args = splitTransformArgs(inner);
+		if (args.length >= 2) return;
+	}
+	const before = current.slice(0, range.start).trimEnd();
+	const after = current.slice(range.end).trimStart();
+	node.style.transform = before && after ? `${before} ${after}` : before || after;
+}
+
+// Apply one style/transform value to the element. Transform shorthands patch the
+// live `transform` string in place so animate/layout/drag values survive rebinds.
+export function applyStyleValue(
+	node: HTMLElement,
+	key: string,
+	val: any,
+	transformState?: Record<string, any>,
+): void {
+	if (TRANSFORM_FN[key]) {
+		if (transformState) transformState[key] = val;
+		patchTransformFn(node, key, val, transformState);
 	} else {
 		(node.style as any)[key] = typeof val === 'number' && !NO_UNIT.has(key) ? `${val}px` : val;
 	}