@mks2508/mks-ui 0.5.4 → 0.5.7

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.css

@@ -12,6 +12,8 @@
   --dt-dur: 0.22s;
   --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
   --dt-fade: 0.45;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* ── Track: explicit row prevents h-full items from overflowing container ── */
@@ -24,18 +26,9 @@
   grid-column: span 2;
 }
 
-/* ── Main indicator slide ── */
-[data-slot="dt-root"] [data-slot="dt-indicator"] {
-  transition: translate var(--dt-dur) var(--dt-ease);
-  translate: 100% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-  translate: 0 0;
-}
-
 /* ── Primary option text ── */
 [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
-  color: var(--card);
+  color: var(--accent-foreground);
   z-index: 2;
 }
 [data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
@@ -49,31 +42,109 @@
   overflow: hidden;
 }
 
-/* ── Group indicator: clip-path reveal ── */
-[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-  pointer-events: none;
+/* ══════════════════════════════════════════════════════════
+ * INDICATOR POSITIONING
+ *
+ * Modern: CSS Anchor Positioning — indicator follows active option
+ * Fallback: translate-based positioning for older browsers
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── Anchor-based indicator (requires full anchor API) ── */
+@supports (anchor-scope: all) {
+  /* Scope anchors per toggle instance */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) {
+    anchor-scope: --dt-active;
+  }
+
+  /* Active option becomes the anchor via native :checked */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+
+  /* Single unified indicator: morphs from full-width to half-width */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
+    position-anchor: --dt-active;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    translate: none;
+    width: auto;
+    transition:
+      top var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease),
+      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
+      left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+
+  /* Hide the group indicator — unified indicator handles everything */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
+@supports not (anchor-scope: all) {
+  /* Unified indicator: left/right transition morphs width + position */
+  [data-slot="dt-root"] [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 0;
+    width: auto;
+    translate: none;
+    transition:
+      left var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  /* Top-level checked: indicator covers left half */
+  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+    left: 0;
+    right: 50%;
+  }
+  /* Group option 1 checked: indicator at 3rd quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 25%;
+  }
+  /* Group option 2 checked: indicator at 4th quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+    left: 75%;
+    right: 0;
+  }
+  /* Hide group indicator — unified indicator handles everything */
+  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 0;
+  width: auto;
+  translate: none;
   transition:
-    translate var(--dt-dur) var(--dt-ease),
-    clip-path var(--dt-dur) var(--dt-ease),
-    background var(--dt-dur) var(--dt-ease);
-  clip-path: inset(
-    73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px)
-    round var(--dt-radius, 9999px)
-  );
-  translate: -50% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group-indicator"] {
-  background: transparent;
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
-  background: var(--card);
-  clip-path: inset(0 0 0 0 round var(--dt-radius, 9999px));
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"] {
-  translate: -100% 0;
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 25%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+  left: 75%;
+  right: 0;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
+  display: none;
 }
 
 /* ══════════════════════════════════════════════════════════
@@ -233,6 +304,8 @@
   background: var(--card);
   border: 1px solid var(--border);
   z-index: 3;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 [data-slot="dt-group-label"] > span {
   overflow: hidden;
@@ -300,4 +373,4 @@
 [data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
   position: relative;
   z-index: 1;
-}
+}

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.js

@@ -19,9 +19,9 @@ const dynamicToggleStyles = {
 	root: "relative border p-[2px] select-none",
 	track: "relative grid grid-cols-[repeat(4,1fr)] place-items-center w-full h-full",
 	option: "inline-grid place-items-center cursor-pointer font-medium z-[2] h-full w-full whitespace-nowrap",
-	indicator: "absolute w-1/2 left-0 top-0 bottom-0 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
+	indicator: "absolute w-1/2 left-0 top-0 bottom-0 bg-accent rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
 	group: "col-span-2 relative w-full h-full grid grid-cols-2",
-	groupIndicator: "absolute left-1/2 top-0 bottom-0 w-1/2 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
+	groupIndicator: "absolute left-1/2 top-0 bottom-0 w-1/2 bg-accent rounded-[var(--dt-radius,9999px)] pointer-events-none z-0",
 	groupLabel: [
 		"absolute",
 		"flex items-center justify-center",

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts

@@ -30,6 +30,12 @@ export interface IDynamicToggleConfig extends IBaseConfig {
     labelAnimation?: 'morph' | 'float' | 'none';
     /** Gooey morph mode for the pill↔groupLabel junction (default: 'none') */
     morphMode?: DynamicToggleMorphMode;
+    /** Indicator slide duration in seconds (default: 0.3) */
+    indicatorDuration?: number;
+    /** Indicator slide easing (default: material standard cubic-bezier) */
+    indicatorEasing?: string;
+    /** Force translate-based indicator instead of CSS Anchor (debug/compat) */
+    forceTranslateIndicator?: boolean;
 }
 /**
  * Context shared between DynamicToggle root and its children.

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAM3F,uEAAuE;AACvE,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;AAEzE,wDAAwD;AACxD,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAMhE;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5C,0EAA0E;IAC1E,SAAS,CAAC,EAAE,sBAAsB,CAAC;CACpC;AAMD;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,aAAa,EAAE,CACb,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EAAE,EAChB,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,EACrC,aAAa,EAAE,0BAA0B,KACtC,IAAI,CAAC;CACX,CAAC;AAMF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,mBAAoB,SAAQ,yBAAyB;IACpE,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,uCAAuC;IACvC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,wBAAwB;IACvC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,8DAA8D;IAC9D,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"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"}

package/dist/react-ui/ui/DynamicToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAExB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAuBrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAuFrB;kBAlGQ,aAAa;;;AAwGtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAhDQ,kBAAkB;;;AA2D3B,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAExB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAmCrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiGrB;kBA5GQ,aAAa;;;AAkHtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAhDQ,kBAAkB;;;AA2D3B,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -39,6 +39,16 @@ const SIZE_HEIGHT_PX = {
 	default: 38,
 	lg: 44
 };
+const SIZE_WIDTH_PX = {
+	sm: 210,
+	default: 260,
+	lg: 320
+};
+const SHAPE_RADIUS = {
+	pill: 9999,
+	rounded: 12,
+	square: 6
+};
 /**
 * Root container — pill-shaped toggle with expanding sub-options and group label.
 */
@@ -65,7 +75,12 @@ function DynamicToggle({ variant, size, shape, slots, config, disabled = false,
 	const effectiveMorphMode = resolvedVariant === "ghost" || resolvedVariant === "outline" ? "none" : morphMode;
 	const showGroupLabel = (config?.labelAnimation ?? "morph") !== "none" && groupPosition !== "hidden" && groupLabel;
 	const heightPx = SIZE_HEIGHT_PX[size ?? "default"] ?? 32;
-	const style = config?.duration ? { "--dt-dur": `${config.duration}s` } : void 0;
+	const style = {
+		...config?.duration && { "--dt-dur": `${config.duration}s` },
+		...config?.indicatorDuration && { "--dt-indicator-dur": `${config.indicatorDuration}s` },
+		...config?.indicatorEasing && { "--dt-indicator-ease": config.indicatorEasing }
+	};
+	const hasStyle = Object.keys(style).length > 0;
 	const groupLabelElement = showGroupLabel ? /* @__PURE__ */ jsx("div", {
 		"data-slot": "dt-group-label",
 		"data-position": groupPosition,
@@ -84,21 +99,24 @@ function DynamicToggle({ variant, size, shape, slots, config, disabled = false,
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-slot": "dt-root",
 			"data-morph": effectiveMorphMode !== "none" ? effectiveMorphMode : void 0,
+			"data-indicator": config?.forceTranslateIndicator ? "translate" : void 0,
 			"data-group-active": groupActive || void 0,
 			"data-disabled": disabled || void 0,
 			role: "radiogroup",
 			"aria-label": ariaLabel,
-			style,
+			style: hasStyle ? style : void 0,
 			className: cn(dynamicToggleVariants({
 				variant,
 				size,
 				shape
 			}), slots?.root, className),
 			children: [
-				effectiveMorphMode === "filter" && /* @__PURE__ */ jsxs(GooeyCanvas, {
+				effectiveMorphMode === "filter" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GooeyCanvas, {
 					height: heightPx,
-					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[inherit] bg-card" }), groupLabelElement]
-				}),
+					width: SIZE_WIDTH_PX[size ?? "default"] ?? 260,
+					radius: SHAPE_RADIUS[shape ?? "pill"] ?? 9999,
+					expanded: groupActive
+				}), groupLabelElement] }),
 				effectiveMorphMode === "path" && groupLabelElement,
 				/* @__PURE__ */ jsxs("div", {
 					"data-slot": "dt-track",

package/package.json

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

package/src/react-ui/primitives/waapi/Gooey/Gooey.types.ts

@@ -50,8 +50,20 @@ 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;
+  /** 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)') */
@@ -62,10 +74,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;
 }
 
 // ---------------------------------------------------------------------------

package/src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx

@@ -1,77 +1,214 @@
 'use client';
 
 /**
- * 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)`.
- *
- * @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
  */
 
 import * as React from 'react';
 import { cn } from '@/react-ui/lib/utils';
-import { GooeyFilter } from './GooeyFilter';
-import { computeBlur, buildFilterString, GOOEY_DEFAULTS } from './gooey-utils';
+import { EASINGS, getResponsiveDuration } from '@/react-ui/primitives/waapi/core/animationConstants';
+import { computeBlur, GOOEY_TIMING } from './gooey-utils';
 import type { IGooeyCanvasProps } from './Gooey.types';
 
 /**
- * GooeyCanvas — container with gooey SVG filter applied.
+ * GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
  */
 function GooeyCanvas({
   blur,
   height = 32,
+  width = 260,
+  radius = 9999,
+  fillColor = 'var(--card)',
+  bubbleHeight: bubbleHeightProp,
+  bubbleInset = 0.2,
+  expanded = false,
   outlineBlur = 0.5,
   outlineColor = 'var(--border)',
   outlineLayers = 2,
   alphaGain,
   alphaOffset,
+  expandDuration,
+  collapseDuration,
+  expandEasing,
+  collapseEasing,
   className,
-  children,
 }: IGooeyCanvasProps) {
   const filterId = React.useId().replace(/:/g, '') + '-goo';
   const computedBlur = blur ?? computeBlur(height);
+  const bubbleRectRef = React.useRef<SVGRectElement>(null);
+  const animRef = React.useRef<Animation | null>(null);
+  const [ready, setReady] = React.useState(false);
+  const lastValues = React.useRef({ y: -1, h: -1 });
+
+  // Computed geometry
+  const pad = 2;
+  const effectiveR = Math.min(radius, height / 2);
+  const bubbleH = bubbleHeightProp ?? Math.round(height * 0.4);
+  const insetPx = width * bubbleInset;
+  const bubbleW = width - 2 * insetPx;
+  const bubbleR = Math.min(effectiveR * 0.6, bubbleH * 0.45, 12);
+  const totalH = height + bubbleH;
+
+  // Static filter string — never changes after mount (critical for Safari)
+  const filterUrl = React.useMemo(() => `url(#${filterId})`, [filterId]);
 
-  const filterStyle = React.useMemo(
+  // Drop-shadow outline — separate from SVG filter for cleaner compositing
+  const outlineShadow = React.useMemo(() => {
+    const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+    return Array(outlineLayers).fill(shadow).join(' ');
+  }, [outlineBlur, outlineColor, outlineLayers]);
+
+  // Canvas style — Sileo pattern: translateZ(0) + contain + static filter
+  const canvasStyle = React.useMemo(
     () => ({
-      filter: buildFilterString(filterId, outlineBlur, outlineColor, outlineLayers),
+      filter: `${filterUrl} ${outlineShadow}`,
+      transform: 'translateZ(0)',
+      contain: 'layout style' as const,
     }),
-    [filterId, outlineBlur, outlineColor, outlineLayers],
+    [filterUrl, outlineShadow],
   );
 
+  // Readiness gate — Sileo pattern: defer first animation by 1 rAF frame.
+  // Ensures the initial DOM state is painted before any animation starts.
+  React.useEffect(() => {
+    const rect = bubbleRectRef.current;
+    if (!rect) return;
+
+    // Set initial visual state
+    const initY = expanded ? 0 : bubbleH;
+    const initH = expanded ? bubbleH : 0;
+    lastValues.current = { y: initY, h: initH };
+    if (expanded) {
+      rect.animate([{ y: '0px', height: `${bubbleH}px` }], { duration: 0, fill: 'forwards' });
+    }
+
+    // After 1 painted frame, mark as ready — triggers re-render so animation
+    // effect can pick up any expanded changes that arrived during the wait.
+    const raf = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // WAAPI animation — tracks values in ref for smooth mid-animation reversals.
+  React.useEffect(() => {
+    const rect = bubbleRectRef.current;
+    if (!rect || !ready) return;
+
+    const isExpanding = expanded;
+
+    // Direction-aware timing
+    const baseDuration = isExpanding
+      ? (expandDuration ?? GOOEY_TIMING.EXPAND_DURATION)
+      : (collapseDuration ?? GOOEY_TIMING.COLLAPSE_DURATION);
+    const duration = getResponsiveDuration(baseDuration);
+    const easing = isExpanding
+      ? (expandEasing ?? EASINGS.SPRING_GENTLE)
+      : (collapseEasing ?? EASINGS.EASE_OUT_CUBIC);
+
+    // Target state
+    const toY = isExpanding ? 0 : bubbleH;
+    const toH = isExpanding ? bubbleH : 0;
+
+    // From state: use tracked values (survives animation cancel)
+    const fromY = lastValues.current.y;
+    const fromH = lastValues.current.h;
+
+    // Update tracked values to target
+    lastValues.current = { y: toY, h: toH };
+
+    // Reduced motion: instant
+    if (duration === 0) {
+      if (animRef.current) animRef.current.cancel();
+      rect.animate([{ y: `${toY}px`, height: `${toH}px` }], { duration: 0, fill: 'forwards' });
+      return;
+    }
+
+    // Cancel previous animation (visual state maintained by lastValues tracking)
+    if (animRef.current) animRef.current.cancel();
+
+    // 2-keyframe animation — fill:forwards, no DOM mutation.
+    // CRITICAL: Chrome WAAPI requires "px" units for SVG geometry props.
+    animRef.current = rect.animate(
+      [
+        { y: `${fromY}px`, height: `${fromH}px` },
+        { y: `${toY}px`, height: `${toH}px` },
+      ],
+      { duration, easing, fill: 'forwards' },
+    );
+  }, [ready, expanded, bubbleH, expandDuration, collapseDuration, expandEasing, collapseEasing]);
+
   return (
-    <>
-      <GooeyFilter
-        id={filterId}
-        blur={computedBlur}
-        alphaGain={alphaGain}
-        alphaOffset={alphaOffset}
-      />
-      <div
-        data-slot="gooey-canvas"
-        style={filterStyle}
-        className={cn(
-          'absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible',
-          className,
-        )}
+    <div
+      data-slot="gooey-canvas"
+      style={canvasStyle}
+      className={cn(
+        'absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible',
+        className,
+      )}
+    >
+      <svg
+        data-slot="gooey-svg"
+        width={width}
+        height={totalH}
+        viewBox={`0 0 ${width} ${totalH}`}
+        style={{ position: 'absolute', top: -bubbleH, left: 0, overflow: 'visible' }}
+        aria-hidden="true"
       >
-        {children}
-      </div>
-    </>
+        <defs>
+          <filter
+            id={filterId}
+            x="-20%"
+            y="-20%"
+            width="140%"
+            height="140%"
+            colorInterpolationFilters="sRGB"
+          >
+            <feGaussianBlur in="SourceGraphic" stdDeviation={computedBlur} result="blur" />
+            <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"
+            />
+            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+          </filter>
+        </defs>
+
+        {/* Pill rect — static background */}
+        <rect
+          x={pad}
+          y={bubbleH}
+          width={width - pad * 2}
+          height={height - pad * 2}
+          rx={effectiveR}
+          ry={effectiveR}
+          fill={fillColor}
+        />
+
+        {/* Bubble rect — always collapsed in DOM, WAAPI controls visual state */}
+        <rect
+          ref={bubbleRectRef}
+          x={insetPx}
+          y={bubbleH}
+          width={bubbleW}
+          height={0}
+          rx={bubbleR}
+          ry={bubbleR}
+          fill={fillColor}
+        />
+      </svg>
+    </div>
   );
 }
 

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

@@ -8,6 +8,14 @@
 // Constants
 // ---------------------------------------------------------------------------
 
+/** Gooey animation timing constants. */
+export const GOOEY_TIMING = {
+  /** Expand duration in ms — spring-like with room for overshoot */
+  EXPAND_DURATION: 550,
+  /** Collapse duration in ms — snappier settle, no overshoot */
+  COLLAPSE_DURATION: 400,
+} as const;
+
 /** Default gooey filter parameters. */
 export const GOOEY_DEFAULTS = {
   /** Blur = height * BLUR_RATIO */
@@ -242,3 +250,4 @@ export function morphPathUp(
 /** Memoized versions for animation performance. */
 export const morphPathDownMemo = memoizePath(morphPathDown);
 export const morphPathUpMemo = memoizePath(morphPathUp);
+