@mks2508/mks-ui 0.5.4 → 0.5.8

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts

@@ -3,7 +3,6 @@
  *
  * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
  */
-import type { ReactNode } from 'react';
 /**
  * Props for the GooeyFilter SVG filter definition.
  *
@@ -39,8 +38,22 @@ export interface IGooeyFilterProps {
 export interface IGooeyCanvasProps {
     /** Blur radius override. If omitted, auto-calculated from `height`. */
     blur?: number;
-    /** Element height — used to auto-calculate blur (default: 32) */
+    /** Pill height in px (default: 32) */
     height?: number;
+    /** Pill width in px (default: 260) */
+    width?: number;
+    /** Border radius in px (default: 9999) */
+    radius?: number;
+    /** Fill color (default: 'var(--card)') */
+    fillColor?: string;
+    /** Bubble height in px when expanded (default: 40% of height) */
+    bubbleHeight?: number;
+    /** Bubble inset from edges as fraction 0-1 (default: 0.2) */
+    bubbleInset?: number;
+    /** Bubble position relative to the pill (default: 'top') */
+    bubblePosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Whether the bubble is expanded */
+    expanded?: boolean;
     /** Drop-shadow outline blur in px (default: 0.5) */
     outlineBlur?: number;
     /** Drop-shadow outline color (default: 'var(--border)') */
@@ -51,10 +64,16 @@ export interface IGooeyCanvasProps {
     alphaGain?: number;
     /** Alpha offset override */
     alphaOffset?: number;
+    /** Expand animation duration in ms (default: 550) */
+    expandDuration?: number;
+    /** Collapse animation duration in ms (default: 400) */
+    collapseDuration?: number;
+    /** Expand easing override (default: SPRING_GENTLE) */
+    expandEasing?: string;
+    /** Collapse easing override (default: EASE_OUT_CUBIC) */
+    collapseEasing?: string;
     /** Extra className on the filter container */
     className?: string;
-    /** Content to merge with the gooey filter */
-    children: ReactNode;
 }
 /**
  * Props for the MorphPath SVG path component.

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACrD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts

@@ -1,8 +1,8 @@
 import type { IGooeyCanvasProps } from './Gooey.types';
 /**
- * GooeyCanvas — container with gooey SVG filter applied.
+ * GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
  */
-declare function GooeyCanvas({ blur, height, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, className, children, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
+declare function GooeyCanvas({ blur, height, width, radius, fillColor, bubbleHeight: bubbleHeightProp, bubbleInset, bubblePosition, expanded, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GooeyCanvas {
     var displayName: string;
 }

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,iBAAiB,2CA+BnB;kBAzCQ,WAAW;;;AA6CpB,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAOvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,KAAW,EACX,MAAa,EACb,SAAyB,EACzB,YAAY,EAAE,gBAAgB,EAC9B,WAAiB,EACjB,cAAsB,EACtB,QAAgB,EAChB,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CAwPnB;kBA5QQ,WAAW;;;AAgRpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js

@@ -1,57 +1,318 @@
 'use client';
 
 import { cn } from "../../../lib/utils.js";
-import { buildFilterString, computeBlur } from "./gooey-utils.js";
-import { GooeyFilter } from "./GooeyFilter.js";
+import { EASINGS, getResponsiveDuration } from "../core/animationConstants.js";
+import { GOOEY_TIMING, computeBlur } from "./gooey-utils.js";
 import * as React$1 from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx
 /**
-* GooeyCanvas — container that applies gooey SVG filter to children.
+* GooeyCanvas — SVG-based gooey filter with animated pill + bubble rects.
 *
-* Renders a GooeyFilter + a wrapper div with `filter: url(#id)`.
-* All same-colored children inside merge organically. Optional drop-shadow
-* outline traces the merged shape's edge.
+* Uses SVG `<rect>` elements inside a filtered container. The bubble rect
+* animates via WAAPI for smooth cross-browser rendering.
 *
-* Blur auto-scales with height: `blur = Math.round(height * 0.15)`.
+* Supports four bubble positions: top (default), bottom, left, right.
+* For vertical positions (top/bottom), animates y/height.
+* For horizontal positions (left/right), animates x/width.
 *
-* @example
-* ```tsx
-* <div style={{ position: 'relative' }}>
-*   <GooeyCanvas height={40}>
-*     <div className="absolute inset-0 bg-card rounded-full" />
-*     <div className="absolute bottom-full bg-card w-32 h-6 rounded-lg" />
-*   </GooeyCanvas>
-*   <div className="relative z-10">Content on top (not filtered)</div>
-* </div>
-* ```
+* Key patterns (derived from Sileo):
+* - Filter applied to canvas div, SVG content inside (not HTML children)
+* - `transform: translateZ(0)` + `contain: layout style` on canvas
+* - No DOM mutation during/after animation — `fill: 'forwards'` only
+* - Readiness gate: 1-frame rAF delay before first animation (Sileo pattern)
 *
 * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
 */
+/** Whether a bubble position is horizontal (left/right). */
+function isHorizontal(pos) {
+	return pos === "left" || pos === "right";
+}
 /**
-* GooeyCanvas — container with gooey SVG filter applied.
+* GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
 */
-function GooeyCanvas({ blur, height = 32, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, className, children }) {
+function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor = "var(--card)", bubbleHeight: bubbleHeightProp, bubbleInset = .2, bubblePosition = "top", expanded = false, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className }) {
 	const filterId = React$1.useId().replace(/:/g, "") + "-goo";
 	const computedBlur = blur ?? computeBlur(height);
-	const filterStyle = React$1.useMemo(() => ({ filter: buildFilterString(filterId, outlineBlur, outlineColor, outlineLayers) }), [
-		filterId,
+	const bubbleRectRef = React$1.useRef(null);
+	const animRef = React$1.useRef(null);
+	const [ready, setReady] = React$1.useState(false);
+	const lastValues = React$1.useRef({
+		a: -1,
+		b: -1
+	});
+	const pad = 2;
+	const effectiveR = Math.min(radius, height / 2);
+	const horiz = isHorizontal(bubblePosition);
+	const bubbleH = bubbleHeightProp ?? Math.round(height * .4);
+	const bubbleR = Math.min(effectiveR * .6, bubbleH * .45, 12);
+	const spanDim = horiz ? height : width;
+	const insetPx = spanDim * bubbleInset;
+	const bubbleSpan = spanDim - 2 * insetPx;
+	const svgW = horiz ? width + bubbleH : width;
+	const svgH = horiz ? height : height + bubbleH;
+	const pillX = bubblePosition === "left" ? bubbleH + pad : pad;
+	const pillY = bubblePosition === "top" ? bubbleH : 0;
+	const bubbleInitial = React$1.useMemo(() => {
+		switch (bubblePosition) {
+			case "top": return {
+				x: insetPx,
+				y: bubbleH,
+				w: bubbleSpan,
+				h: 0
+			};
+			case "bottom": return {
+				x: insetPx,
+				y: height,
+				w: bubbleSpan,
+				h: 0
+			};
+			case "left": return {
+				x: bubbleH,
+				y: insetPx,
+				w: 0,
+				h: bubbleSpan
+			};
+			case "right": return {
+				x: width - pad,
+				y: insetPx,
+				w: 0,
+				h: bubbleSpan
+			};
+		}
+	}, [
+		bubblePosition,
+		insetPx,
+		bubbleH,
+		bubbleSpan,
+		height,
+		width,
+		pad
+	]);
+	const animTargets = React$1.useMemo(() => {
+		switch (bubblePosition) {
+			case "top": return {
+				attrs: ["y", "height"],
+				collapsed: {
+					a: bubbleH,
+					b: 0
+				},
+				expanded: {
+					a: 0,
+					b: bubbleH
+				}
+			};
+			case "bottom": return {
+				attrs: ["y", "height"],
+				collapsed: {
+					a: height,
+					b: 0
+				},
+				expanded: {
+					a: height,
+					b: bubbleH
+				}
+			};
+			case "left": return {
+				attrs: ["x", "width"],
+				collapsed: {
+					a: bubbleH,
+					b: 0
+				},
+				expanded: {
+					a: 0,
+					b: bubbleH
+				}
+			};
+			case "right": return {
+				attrs: ["x", "width"],
+				collapsed: {
+					a: width - pad,
+					b: 0
+				},
+				expanded: {
+					a: width - pad,
+					b: bubbleH
+				}
+			};
+		}
+	}, [
+		bubblePosition,
+		bubbleH,
+		height,
+		width,
+		pad
+	]);
+	const svgStyle = React$1.useMemo(() => {
+		const base = {
+			position: "absolute",
+			overflow: "visible"
+		};
+		switch (bubblePosition) {
+			case "top": return {
+				...base,
+				top: -bubbleH,
+				left: 0
+			};
+			case "bottom": return {
+				...base,
+				top: 0,
+				left: 0
+			};
+			case "left": return {
+				...base,
+				top: 0,
+				left: -bubbleH
+			};
+			case "right": return {
+				...base,
+				top: 0,
+				left: 0
+			};
+		}
+	}, [bubblePosition, bubbleH]);
+	const filterUrl = React$1.useMemo(() => `url(#${filterId})`, [filterId]);
+	const outlineShadow = React$1.useMemo(() => {
+		const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+		return Array(outlineLayers).fill(shadow).join(" ");
+	}, [
 		outlineBlur,
 		outlineColor,
 		outlineLayers
 	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GooeyFilter, {
-		id: filterId,
-		blur: computedBlur,
-		alphaGain,
-		alphaOffset
-	}), /* @__PURE__ */ jsx("div", {
+	const canvasStyle = React$1.useMemo(() => ({
+		filter: `${filterUrl} ${outlineShadow}`,
+		transform: "translateZ(0)",
+		contain: "layout style"
+	}), [filterUrl, outlineShadow]);
+	React$1.useEffect(() => {
+		const rect = bubbleRectRef.current;
+		if (!rect) return;
+		const init = expanded ? animTargets.expanded : animTargets.collapsed;
+		lastValues.current = {
+			a: init.a,
+			b: init.b
+		};
+		if (expanded) {
+			const [attrA, attrB] = animTargets.attrs;
+			rect.animate([{
+				[attrA]: `${init.a}px`,
+				[attrB]: `${init.b}px`
+			}], {
+				duration: 0,
+				fill: "forwards"
+			});
+		}
+		const raf = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(raf);
+	}, []);
+	React$1.useEffect(() => {
+		const rect = bubbleRectRef.current;
+		if (!rect || !ready) return;
+		const isExpanding = expanded;
+		const [attrA, attrB] = animTargets.attrs;
+		const duration = getResponsiveDuration(isExpanding ? expandDuration ?? GOOEY_TIMING.EXPAND_DURATION : collapseDuration ?? GOOEY_TIMING.COLLAPSE_DURATION);
+		const easing = isExpanding ? expandEasing ?? EASINGS.SPRING_GENTLE : collapseEasing ?? EASINGS.EASE_OUT_CUBIC;
+		const to = isExpanding ? animTargets.expanded : animTargets.collapsed;
+		const fromA = lastValues.current.a;
+		const fromB = lastValues.current.b;
+		lastValues.current = {
+			a: to.a,
+			b: to.b
+		};
+		if (duration === 0) {
+			if (animRef.current) animRef.current.cancel();
+			rect.animate([{
+				[attrA]: `${to.a}px`,
+				[attrB]: `${to.b}px`
+			}], {
+				duration: 0,
+				fill: "forwards"
+			});
+			return;
+		}
+		if (animRef.current) animRef.current.cancel();
+		animRef.current = rect.animate([{
+			[attrA]: `${fromA}px`,
+			[attrB]: `${fromB}px`
+		}, {
+			[attrA]: `${to.a}px`,
+			[attrB]: `${to.b}px`
+		}], {
+			duration,
+			easing,
+			fill: "forwards"
+		});
+	}, [
+		ready,
+		expanded,
+		animTargets,
+		expandDuration,
+		collapseDuration,
+		expandEasing,
+		collapseEasing
+	]);
+	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "gooey-canvas",
-		style: filterStyle,
+		style: canvasStyle,
 		className: cn("absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible", className),
-		children
-	})] });
+		children: /* @__PURE__ */ jsxs("svg", {
+			"data-slot": "gooey-svg",
+			width: svgW,
+			height: svgH,
+			viewBox: `0 0 ${svgW} ${svgH}`,
+			style: svgStyle,
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					x: "-20%",
+					y: "-20%",
+					width: "140%",
+					height: "140%",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: computedBlur,
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", {
+							in: "blur",
+							mode: "matrix",
+							values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${alphaGain ?? 20} ${alphaOffset ?? -10}`,
+							result: "goo"
+						}),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							in2: "goo",
+							operator: "atop"
+						})
+					]
+				}) }),
+				/* @__PURE__ */ jsx("rect", {
+					x: pillX,
+					y: pillY,
+					width: width - pad * 2,
+					height: height - pad * 2,
+					rx: effectiveR,
+					ry: effectiveR,
+					fill: fillColor
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					ref: bubbleRectRef,
+					x: bubbleInitial.x,
+					y: bubbleInitial.y,
+					width: bubbleInitial.w,
+					height: bubbleInitial.h,
+					rx: bubbleR,
+					ry: bubbleR,
+					fill: fillColor
+				})
+			]
+		})
+	});
 }
 GooeyCanvas.displayName = "GooeyCanvas";
 

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts

@@ -3,6 +3,13 @@
  *
  * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
  */
+/** Gooey animation timing constants. */
+export declare const GOOEY_TIMING: {
+    /** Expand duration in ms — spring-like with room for overshoot */
+    readonly EXPAND_DURATION: 550;
+    /** Collapse duration in ms — snappier settle, no overshoot */
+    readonly COLLAPSE_DURATION: 400;
+};
 /** Default gooey filter parameters. */
 export declare const GOOEY_DEFAULTS: {
     /** Blur = height * BLUR_RATIO */

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gooey-utils.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/gooey-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,uCAAuC;AACvC,eAAO,MAAM,cAAc;IACzB,iCAAiC;;IAEjC,6CAA6C;;IAE7C,yCAAyC;;IAEzC,+BAA+B;;IAE/B,sDAAsD;;IAEtD,kCAAkC;;IAElC,yCAAyC;;IAEzC,wDAAwD;;CAEhD,CAAC;AAMX;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,GAAE,MAAkC,EACxC,MAAM,GAAE,MAAoC,GAC3C,MAAM,CAER;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,MAAY,EACzB,YAAY,GAAE,MAAwB,EACtC,aAAa,GAAE,MAAU,GACxB,MAAM,CAKR;AAMD,KAAK,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAW9C;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAwCR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAsDR;AAED,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,QAA2B,CAAC"}
+{"version":3,"file":"gooey-utils.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/gooey-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,wCAAwC;AACxC,eAAO,MAAM,YAAY;IACvB,kEAAkE;;IAElE,8DAA8D;;CAEtD,CAAC;AAEX,uCAAuC;AACvC,eAAO,MAAM,cAAc;IACzB,iCAAiC;;IAEjC,6CAA6C;;IAE7C,yCAAyC;;IAEzC,+BAA+B;;IAE/B,sDAAsD;;IAEtD,kCAAkC;;IAElC,yCAAyC;;IAEzC,wDAAwD;;CAEhD,CAAC;AAMX;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,GAAE,MAAkC,EACxC,MAAM,GAAE,MAAoC,GAC3C,MAAM,CAER;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,MAAY,EACzB,YAAY,GAAE,MAAwB,EACtC,aAAa,GAAE,MAAU,GACxB,MAAM,CAKR;AAMD,KAAK,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAW9C;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAwCR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAsDR;AAED,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,QAA2B,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.js

@@ -4,6 +4,11 @@
 *
 * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
 */
+/** Gooey animation timing constants. */
+const GOOEY_TIMING = {
+	EXPAND_DURATION: 550,
+	COLLAPSE_DURATION: 400
+};
 /** Default gooey filter parameters. */
 const GOOEY_DEFAULTS = {
 	BLUR_RATIO: .15,
@@ -174,4 +179,4 @@ const morphPathDownMemo = memoizePath(morphPathDown);
 const morphPathUpMemo = memoizePath(morphPathUp);
 
 //#endregion
-export { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp };
+export { GOOEY_DEFAULTS, GOOEY_TIMING, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp };