@mks2508/mks-ui 0.11.0 → 0.11.1

package/dist/css/primitives-GooeyMorphingSurface-gooey.css

@@ -41,21 +41,22 @@
 	position: absolute;
 	top: 0;
 	left: 50%;
-	transform: translateX(-50%);
+	/* translateZ(0) keeps the filtered region on its own GPU layer so Safari
+	 * re-renders the gooey filter smoothly while the body rect's geometry is
+	 * animated via WAAPI (Sileo Safari formula). */
+	transform: translateX(-50%) translateZ(0);
+	contain: layout style;
 	display: block;
 	overflow: visible;
 	pointer-events: none;
 }
 
+/* The body rect's x/y/width/height are driven by the Web Animations API
+ * (rect.animate, see index.tsx) — NOT a CSS transition, which WebKit refuses
+ * to interpolate on SVG geometry attributes. `will-change` is the only hint
+ * left here. */
 .gms-body-rect {
 	will-change: x, y, width, height;
-	transition:
-		x var(--gms-duration) var(--gms-ease),
-		y var(--gms-duration) var(--gms-ease),
-		width var(--gms-duration) var(--gms-ease),
-		height var(--gms-duration) var(--gms-ease),
-		rx var(--gms-duration) var(--gms-ease),
-		ry var(--gms-duration) var(--gms-ease);
 }
 
 .gms-pill {

package/dist/index.css

@@ -1033,21 +1033,22 @@
 	position: absolute;
 	top: 0;
 	left: 50%;
-	transform: translateX(-50%);
+	/* translateZ(0) keeps the filtered region on its own GPU layer so Safari
+	 * re-renders the gooey filter smoothly while the body rect's geometry is
+	 * animated via WAAPI (Sileo Safari formula). */
+	transform: translateX(-50%) translateZ(0);
+	contain: layout style;
 	display: block;
 	overflow: visible;
 	pointer-events: none;
 }
 
+/* The body rect's x/y/width/height are driven by the Web Animations API
+ * (rect.animate, see index.tsx) — NOT a CSS transition, which WebKit refuses
+ * to interpolate on SVG geometry attributes. `will-change` is the only hint
+ * left here. */
 .gms-body-rect {
 	will-change: x, y, width, height;
-	transition:
-		x var(--gms-duration) var(--gms-ease),
-		y var(--gms-duration) var(--gms-ease),
-		width var(--gms-duration) var(--gms-ease),
-		height var(--gms-duration) var(--gms-ease),
-		rx var(--gms-duration) var(--gms-ease),
-		ry var(--gms-duration) var(--gms-ease);
 }
 
 .gms-pill {

package/dist/react-ui/index.js

@@ -7,9 +7,9 @@ import { useIsInView } from "./hooks/DOM/UseIsInView.js";
 import { CountingNumber } from "./primitives/CountingNumber/index.js";
 import { DOT_MATRIX_PATTERNS, buildDelays } from "./primitives/DotMatrix/patterns.js";
 import { DotMatrix } from "./primitives/DotMatrix/index.js";
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./primitives/waapi/core/animationConstants.js";
 import { DEFAULT_GOOEY_CONFIG } from "./primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.js";
 import { GooeyMorphingSurface } from "./primitives/GooeyMorphingSurface/index.js";
-import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./primitives/waapi/core/animationConstants.js";
 import { useElementRegistry } from "./primitives/waapi/core/useElementRegistry.js";
 import { usePositionCapture } from "./primitives/waapi/core/usePositionCapture.js";
 import { useFLIPAnimation } from "./primitives/waapi/core/useFLIPAnimation.js";

package/dist/react-ui/primitives/GooeyMorphingSurface/gooey-morphing.css

@@ -41,21 +41,22 @@
 	position: absolute;
 	top: 0;
 	left: 50%;
-	transform: translateX(-50%);
+	/* translateZ(0) keeps the filtered region on its own GPU layer so Safari
+	 * re-renders the gooey filter smoothly while the body rect's geometry is
+	 * animated via WAAPI (Sileo Safari formula). */
+	transform: translateX(-50%) translateZ(0);
+	contain: layout style;
 	display: block;
 	overflow: visible;
 	pointer-events: none;
 }
 
+/* The body rect's x/y/width/height are driven by the Web Animations API
+ * (rect.animate, see index.tsx) — NOT a CSS transition, which WebKit refuses
+ * to interpolate on SVG geometry attributes. `will-change` is the only hint
+ * left here. */
 .gms-body-rect {
 	will-change: x, y, width, height;
-	transition:
-		x var(--gms-duration) var(--gms-ease),
-		y var(--gms-duration) var(--gms-ease),
-		width var(--gms-duration) var(--gms-ease),
-		height var(--gms-duration) var(--gms-ease),
-		rx var(--gms-duration) var(--gms-ease),
-		ry var(--gms-duration) var(--gms-ease);
 }
 
 .gms-pill {

package/dist/react-ui/primitives/GooeyMorphingSurface/index.d.ts

@@ -1,21 +1,3 @@
-/**
- * GooeyMorphingSurface — headless pill→card gooey morph primitive.
- *
- * Paints an SVG canvas where a pill-shaped rect sits on top and a card-
- * shaped rect sits below (body). Both rects share a gaussian-blur +
- * alpha-threshold filter that fuses them into a single silhouette with a
- * soft metaball throat wherever they overlap. When `open` is false, the
- * body rect is a geometric clone of the pill (same x/y/w/h/rx) — no extra
- * halo, no pop. When `open` flips to true, all six SVG presentation attrs
- * (x, y, width, height, rx, ry) interpolate in lock-step, producing a
- * continuous morph from pill to card.
- *
- * The primitive is purely presentational: it does not own open state, does
- * not bind click handlers, does not trap focus. Use `<GooeyButton>` for
- * the ergonomic wrapper that adds those behaviours.
- *
- * @module @mks2508/mks-ui/react/primitives/GooeyMorphingSurface
- */
 import './gooey-morphing-surface.css';
 import { type IGooeyMorphingSurfaceProps } from './GooeyMorphingSurface.types';
 export * from './GooeyMorphingSurface.types';

package/dist/react-ui/primitives/GooeyMorphingSurface/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/GooeyMorphingSurface/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAMH,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAEN,KAAK,0BAA0B,EAC/B,MAAM,8BAA8B,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAiB,GAChC,EAAE,0BAA0B,2CAkH5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/GooeyMorphingSurface/index.tsx"],"names":[],"mappings":"AAuCA,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAEN,KAAK,0BAA0B,EAC/B,MAAM,8BAA8B,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAoB7C;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAiB,GAChC,EAAE,0BAA0B,2CAsL5B"}

package/dist/react-ui/primitives/GooeyMorphingSurface/index.js

@@ -1,7 +1,10 @@
+'use client';
+
 import { cn } from "../../lib/utils.js";
+import { getResponsiveDuration } from "../waapi/core/animationConstants.js";
 import "./gooey-morphing-surface.js";
 import { DEFAULT_GOOEY_CONFIG } from "./GooeyMorphingSurface.types.js";
-import { useId } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/primitives/GooeyMorphingSurface/index.tsx
@@ -12,10 +15,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * shaped rect sits below (body). Both rects share a gaussian-blur +
 * alpha-threshold filter that fuses them into a single silhouette with a
 * soft metaball throat wherever they overlap. When `open` is false, the
-* body rect is a geometric clone of the pill (same x/y/w/h/rx) — no extra
-* halo, no pop. When `open` flips to true, all six SVG presentation attrs
-* (x, y, width, height, rx, ry) interpolate in lock-step, producing a
-* continuous morph from pill to card.
+* body rect is a geometric clone of the pill (same x/y/w/h) — no extra
+* halo, no pop. When `open` flips to true, the body rect's geometry
+* (x, y, width, height) interpolates to the card, producing a continuous
+* morph from pill to card.
+*
+* ── Cross-browser note (the reason this primitive is WAAPI-driven) ──
+* The body rect morphs via the **Web Animations API** (`rect.animate(...)`),
+* NOT a CSS `transition` on the SVG geometry attributes. WebKit/Safari does
+* not interpolate `x/y/width/height` of an `<rect>` through a CSS transition
+* (the morph hard-SNAPS), whereas it DOES animate them through WAAPI. This is
+* the same "Sileo Safari formula" the `GooeyCanvas` primitive uses:
+*   - geometry animated via `rect.animate([from], [to], { fill: 'forwards' })`
+*     with explicit `px` units (Chrome WAAPI requires units on SVG geom props),
+*   - a 1-rAF readiness gate before the first animation,
+*   - `lastValues` ref so mid-flight reversals start from the live target,
+*   - `transform: translateZ(0)` + a static filter id so Safari keeps the
+*     filtered region on its own layer and re-renders it smoothly.
 *
 * The primitive is purely presentational: it does not own open state, does
 * not bind click handlers, does not trap focus. Use `<GooeyButton>` for
@@ -23,6 +39,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * @module @mks2508/mks-ui/react/primitives/GooeyMorphingSurface
 */
+/** Build a WAAPI keyframe from a geometry, with the `px` units Chrome needs. */
+function geomKeyframe(g) {
+	return {
+		x: `${g.x}px`,
+		y: `${g.y}px`,
+		width: `${g.width}px`,
+		height: `${g.height}px`
+	};
+}
 /**
 * Headless gooey pill→card morph surface.
 *
@@ -45,11 +70,67 @@ function GooeyMorphingSurface({ open, pill, card, config: userConfig, className,
 	const pillRadius = pillHeight / 2;
 	const svgHeight = pillHeight + cardHeight + mergeOverlap;
 	const pillX = (cardWidth - pillWidth) / 2 + pillOffsetX;
-	const bodyX = open ? 0 : pillX;
-	const bodyY = open ? pillHeight - mergeOverlap : 0;
-	const bodyW = open ? cardWidth : pillWidth;
-	const bodyH = open ? cardHeight + mergeOverlap : pillHeight;
-	const bodyR = open ? cardRadius : pillRadius;
+	const closedGeom = {
+		x: pillX,
+		y: 0,
+		width: pillWidth,
+		height: pillHeight
+	};
+	const openGeom = {
+		x: 0,
+		y: pillHeight - mergeOverlap,
+		width: cardWidth,
+		height: cardHeight + mergeOverlap
+	};
+	const bodyRectRef = useRef(null);
+	const animRef = useRef(null);
+	const lastValues = useRef(open ? openGeom : closedGeom);
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		const rect = bodyRectRef.current;
+		if (!rect) return;
+		if (open) {
+			lastValues.current = openGeom;
+			rect.animate([geomKeyframe(openGeom)], {
+				duration: 0,
+				fill: "forwards"
+			});
+		}
+		const raf = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(raf);
+	}, []);
+	useEffect(() => {
+		const rect = bodyRectRef.current;
+		if (!rect || !ready) return;
+		const to = open ? openGeom : closedGeom;
+		const from = lastValues.current;
+		lastValues.current = to;
+		const duration = getResponsiveDuration(durationMs);
+		if (animRef.current) animRef.current.cancel();
+		if (duration === 0) {
+			rect.animate([geomKeyframe(to)], {
+				duration: 0,
+				fill: "forwards"
+			});
+			return;
+		}
+		animRef.current = rect.animate([geomKeyframe(from), geomKeyframe(to)], {
+			duration,
+			easing,
+			fill: "forwards"
+		});
+	}, [
+		ready,
+		open,
+		durationMs,
+		easing,
+		pillWidth,
+		pillHeight,
+		cardWidth,
+		cardHeight,
+		mergeOverlap,
+		pillOffsetX
+	]);
 	const rootStyle = {
 		"--gms-pill-w": `${pillWidth}px`,
 		"--gms-pill-h": `${pillHeight}px`,
@@ -111,16 +192,15 @@ function GooeyMorphingSurface({ open, pill, card, config: userConfig, className,
 							ry: pillRadius,
 							fill
 						}), /* @__PURE__ */ jsx("rect", {
+							ref: bodyRectRef,
 							className: "gms-body-rect",
-							fill,
-							style: {
-								x: bodyX,
-								y: bodyY,
-								width: bodyW,
-								height: bodyH,
-								rx: bodyR,
-								ry: bodyR
-							}
+							x: closedGeom.x,
+							y: closedGeom.y,
+							width: closedGeom.width,
+							height: closedGeom.height,
+							rx: cardRadius,
+							ry: cardRadius,
+							fill
 						})]
 					})]
 				}),

package/dist/react-ui/primitives/index.js

@@ -4,9 +4,9 @@ import { AutoHeight } from "./AutoHeight/index.js";
 import { CountingNumber } from "./CountingNumber/index.js";
 import { DOT_MATRIX_PATTERNS, buildDelays } from "./DotMatrix/patterns.js";
 import { DotMatrix } from "./DotMatrix/index.js";
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./waapi/core/animationConstants.js";
 import { DEFAULT_GOOEY_CONFIG } from "./GooeyMorphingSurface/GooeyMorphingSurface.types.js";
 import { GooeyMorphingSurface } from "./GooeyMorphingSurface/index.js";
-import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./waapi/core/animationConstants.js";
 import { useElementRegistry } from "./waapi/core/useElementRegistry.js";
 import { usePositionCapture } from "./waapi/core/usePositionCapture.js";
 import { useFLIPAnimation } from "./waapi/core/useFLIPAnimation.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",