@mks2508/mks-ui 0.5.2 → 0.5.7

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

@@ -0,0 +1,217 @@
+'use client';
+
+/**
+ * GooeyCanvas — SVG-based gooey filter with animated pill + bubble rects.
+ *
+ * Uses SVG `<rect>` elements inside a filtered container. The bubble rect
+ * animates via WAAPI for smooth cross-browser rendering.
+ *
+ * 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 { EASINGS, getResponsiveDuration } from '@/react-ui/primitives/waapi/core/animationConstants';
+import { computeBlur, GOOEY_TIMING } from './gooey-utils';
+import type { IGooeyCanvasProps } from './Gooey.types';
+
+/**
+ * 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,
+}: 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]);
+
+  // 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: `${filterUrl} ${outlineShadow}`,
+      transform: 'translateZ(0)',
+      contain: 'layout style' as const,
+    }),
+    [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 (
+    <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"
+      >
+        <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>
+  );
+}
+
+GooeyCanvas.displayName = 'GooeyCanvas';
+
+export { GooeyCanvas };

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

@@ -0,0 +1,77 @@
+'use client';
+
+/**
+ * GooeyFilter — SVG filter definition for gooey morphing effects.
+ *
+ * Renders a hidden `<svg>` with a `<filter>` that uses `feGaussianBlur` +
+ * `feColorMatrix` + `feComposite` to merge same-colored shapes organically.
+ *
+ * Apply via `filter: url(#id)` on a container. All same-colored children merge.
+ * `feComposite operator="atop"` preserves sharp text/content on top.
+ *
+ * @param id - Unique filter ID
+ * @param blur - Gaussian blur stdDeviation (default: 8)
+ * @param alphaGain - Alpha multiplier for merge threshold (default: 20)
+ * @param alphaOffset - Alpha offset for edge sharpness (default: -10)
+ *
+ * @example
+ * ```tsx
+ * <GooeyFilter id="my-goo" blur={6} />
+ * <div style={{ filter: 'url(#my-goo)' }}>
+ *   <div className="bg-card" />  // these merge
+ *   <div className="bg-card" />  // organically
+ * </div>
+ * ```
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+import { memo } from 'react';
+import { GOOEY_DEFAULTS, buildColorMatrixValues } from './gooey-utils';
+import type { IGooeyFilterProps } from './Gooey.types';
+
+const HIDDEN_SVG_STYLE = {
+  position: 'absolute' as const,
+  width: 0,
+  height: 0,
+  overflow: 'hidden' as const,
+  pointerEvents: 'none' as const,
+};
+
+/**
+ * GooeyFilter — renders an SVG filter definition for gooey morphing.
+ */
+const GooeyFilter = memo(function GooeyFilter({
+  id,
+  blur = 8,
+  alphaGain = GOOEY_DEFAULTS.ALPHA_GAIN,
+  alphaOffset = GOOEY_DEFAULTS.ALPHA_OFFSET,
+}: IGooeyFilterProps) {
+  return (
+    <svg aria-hidden="true" style={HIDDEN_SVG_STYLE}>
+      <defs>
+        <filter
+          id={id}
+          x="-20%"
+          y="-20%"
+          width="140%"
+          height="140%"
+          colorInterpolationFilters="sRGB"
+        >
+          <feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values={buildColorMatrixValues(alphaGain, alphaOffset)}
+            result="goo"
+          />
+          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+        </filter>
+      </defs>
+    </svg>
+  );
+});
+
+GooeyFilter.displayName = 'GooeyFilter';
+
+export { GooeyFilter };

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

@@ -0,0 +1,58 @@
+'use client';
+
+/**
+ * MorphPath — SVG `<path>` component with parametric pill-to-blob morphing.
+ *
+ * Generates a `<path d="...">` that transitions from a pill shape to an
+ * expanded blob based on the `progress` value (0→1). Uses quadratic Bezier
+ * curves at the junction for organic concave connections.
+ *
+ * @example
+ * ```tsx
+ * <svg width={300} height={80} style={{ position: 'absolute' }}>
+ *   <MorphPath
+ *     pillWidth={260}
+ *     bodyWidth={180}
+ *     totalHeight={80}
+ *     progress={expanded ? 1 : 0}
+ *     direction="up"
+ *     fill="var(--card)"
+ *   />
+ * </svg>
+ * ```
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+import { memo } from 'react';
+import { useMorphPath } from './useMorphPath';
+import type { IMorphPathProps } from './Gooey.types';
+import { GOOEY_DEFAULTS } from './gooey-utils';
+
+/**
+ * MorphPath — parametric SVG path for pill→blob morphing.
+ */
+const MorphPath = memo(function MorphPath({
+  pillWidth,
+  bodyWidth,
+  totalHeight,
+  progress,
+  pillHeight = GOOEY_DEFAULTS.PILL_HEIGHT,
+  direction = 'down',
+  ...pathProps
+}: IMorphPathProps) {
+  const d = useMorphPath({
+    pillWidth,
+    bodyWidth,
+    totalHeight,
+    progress,
+    pillHeight,
+    direction,
+  });
+
+  return <path d={d} {...pathProps} />;
+});
+
+MorphPath.displayName = 'MorphPath';
+
+export { MorphPath };

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

@@ -0,0 +1,253 @@
+/**
+ * Gooey morphing utilities — pure functions for SVG filter and path generation.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+// ---------------------------------------------------------------------------
+// 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 */
+  BLUR_RATIO: 0.15,
+  /** feColorMatrix alpha channel multiplier */
+  ALPHA_GAIN: 20,
+  /** feColorMatrix alpha channel offset */
+  ALPHA_OFFSET: -10,
+  /** Default pill height (px) */
+  PILL_HEIGHT: 34,
+  /** Quadratic bezier curve factor at full expansion */
+  CURVE_FACTOR: 14,
+  /** Max body corner radius (px) */
+  MAX_CORNER_RADIUS: 16,
+  /** Corner radius to body-height ratio */
+  CORNER_RATIO: 0.45,
+  /** Minimum body height delta to show rounded corners */
+  MIN_BODY_DELTA: 8,
+} as const;
+
+// ---------------------------------------------------------------------------
+// Blur computation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute the optimal Gaussian blur for a gooey filter based on element height.
+ *
+ * @param height - Element height in pixels
+ * @returns Blur stdDeviation value
+ */
+export function computeBlur(height: number): number {
+  return Math.round(height * GOOEY_DEFAULTS.BLUR_RATIO);
+}
+
+/**
+ * Build the feColorMatrix `values` string.
+ *
+ * @param gain - Alpha multiplier (default: 20)
+ * @param offset - Alpha offset (default: -10)
+ * @returns Matrix values string for feColorMatrix
+ */
+export function buildColorMatrixValues(
+  gain: number = GOOEY_DEFAULTS.ALPHA_GAIN,
+  offset: number = GOOEY_DEFAULTS.ALPHA_OFFSET,
+): string {
+  return `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${gain} ${offset}`;
+}
+
+/**
+ * Build the CSS filter string with gooey + optional drop-shadow outline.
+ *
+ * @param filterId - SVG filter ID to reference
+ * @param outlineBlur - Drop-shadow blur (px)
+ * @param outlineColor - Drop-shadow color
+ * @param outlineLayers - Number of stacked drop-shadows for thickness
+ * @returns CSS filter property value
+ */
+export function buildFilterString(
+  filterId: string,
+  outlineBlur: number = 0.5,
+  outlineColor: string = 'var(--border)',
+  outlineLayers: number = 2,
+): string {
+  const goo = `url(#${filterId})`;
+  const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+  const shadows = Array(outlineLayers).fill(shadow).join(' ');
+  return `${goo} ${shadows}`;
+}
+
+// ---------------------------------------------------------------------------
+// Path memoization
+// ---------------------------------------------------------------------------
+
+type PathFn = (pw: number, bw: number, th: number, t: number, ph: number) => string;
+
+/**
+ * Memoize a path generation function — caches last result to avoid
+ * recomputing identical paths on consecutive animation frames.
+ *
+ * @param fn - Path generation function
+ * @returns Memoized function
+ */
+export function memoizePath(fn: PathFn): PathFn {
+  let lastArgs: [number, number, number, number, number] | null = null;
+  let lastResult = '';
+  return (pw, bw, th, t, ph) => {
+    if (lastArgs && lastArgs[0] === pw && lastArgs[1] === bw && lastArgs[2] === th && lastArgs[3] === t && lastArgs[4] === ph) {
+      return lastResult;
+    }
+    lastResult = fn(pw, bw, th, t, ph);
+    lastArgs = [pw, bw, th, t, ph];
+    return lastResult;
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Parametric SVG path generation
+// ---------------------------------------------------------------------------
+
+/**
+ * Generate an SVG path for a pill that morphs downward into a body blob.
+ * Adapted from goey-toast's morphPathRaw.
+ *
+ * @param pw - Pill width
+ * @param bw - Body width (expanded)
+ * @param th - Total height (pill + body)
+ * @param t - Transition progress 0 (pill only) → 1 (full blob)
+ * @param ph - Pill height (default: PILL_HEIGHT)
+ * @returns SVG path d-string
+ */
+export function morphPathDown(
+  pw: number,
+  bw: number,
+  th: number,
+  t: number,
+  ph: number = GOOEY_DEFAULTS.PILL_HEIGHT,
+): string {
+  const pr = ph / 2;
+  const pillW = Math.min(pw, bw);
+  const bodyH = ph + (th - ph) * t;
+
+  // Pure pill when t ≤ 0 or body too small
+  if (t <= 0 || bodyH - ph < GOOEY_DEFAULTS.MIN_BODY_DELTA) {
+    return [
+      `M 0,${pr}`,
+      `A ${pr},${pr} 0 0 1 ${pr},0`,
+      `H ${pillW - pr}`,
+      `A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+      `A ${pr},${pr} 0 0 1 ${pillW - pr},${ph}`,
+      `H ${pr}`,
+      `A ${pr},${pr} 0 0 1 0,${pr}`,
+      `Z`,
+    ].join(' ');
+  }
+
+  const curve = GOOEY_DEFAULTS.CURVE_FACTOR * t;
+  const cr = Math.min(GOOEY_DEFAULTS.MAX_CORNER_RADIUS, (bodyH - ph) * GOOEY_DEFAULTS.CORNER_RATIO);
+  const bodyW = pillW + (bw - pillW) * t;
+  const bodyTop = ph - curve;
+  const qEndX = Math.min(pillW + curve, bodyW - cr);
+
+  return [
+    `M 0,${pr}`,
+    `A ${pr},${pr} 0 0 1 ${pr},0`,
+    `H ${pillW - pr}`,
+    `A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+    `L ${pillW},${bodyTop}`,
+    `Q ${pillW},${bodyTop + curve} ${qEndX},${bodyTop + curve}`,
+    `H ${bodyW - cr}`,
+    `A ${cr},${cr} 0 0 1 ${bodyW},${bodyTop + curve + cr}`,
+    `L ${bodyW},${bodyH - cr}`,
+    `A ${cr},${cr} 0 0 1 ${bodyW - cr},${bodyH}`,
+    `H ${cr}`,
+    `A ${cr},${cr} 0 0 1 0,${bodyH - cr}`,
+    `Z`,
+  ].join(' ');
+}
+
+/**
+ * Generate an SVG path for a pill that morphs UPWARD into a body blob.
+ * Used for DynamicToggle's bubble-above-pill layout.
+ *
+ * @param pw - Pill width
+ * @param bw - Body (bubble) width
+ * @param th - Total height (bubble + pill)
+ * @param t - Transition progress 0 (pill only) → 1 (full blob with bubble)
+ * @param ph - Pill height
+ * @returns SVG path d-string
+ */
+export function morphPathUp(
+  pw: number,
+  bw: number,
+  th: number,
+  t: number,
+  ph: number = GOOEY_DEFAULTS.PILL_HEIGHT,
+): string {
+  const pr = ph / 2;
+  const pillW = Math.min(pw, bw);
+  const bubbleH = (th - ph) * t;
+
+  // Pure pill when t ≤ 0 or bubble too small
+  if (t <= 0 || bubbleH < GOOEY_DEFAULTS.MIN_BODY_DELTA) {
+    const y0 = th - ph;
+    return [
+      `M 0,${y0 + pr}`,
+      `A ${pr},${pr} 0 0 1 ${pr},${y0}`,
+      `H ${pillW - pr}`,
+      `A ${pr},${pr} 0 0 1 ${pillW},${y0 + pr}`,
+      `A ${pr},${pr} 0 0 1 ${pillW - pr},${y0 + ph}`,
+      `H ${pr}`,
+      `A ${pr},${pr} 0 0 1 0,${y0 + pr}`,
+      `Z`,
+    ].join(' ');
+  }
+
+  const curve = GOOEY_DEFAULTS.CURVE_FACTOR * t;
+  const cr = Math.min(GOOEY_DEFAULTS.MAX_CORNER_RADIUS, bubbleH * GOOEY_DEFAULTS.CORNER_RATIO);
+  const bubbleW = pillW + (bw - pillW) * t;
+  const pillTop = th - ph;
+  const bubbleBottom = pillTop + curve;
+  const bubbleTop = pillTop - bubbleH + curve;
+  const qEndX = Math.min(pillW + curve, bubbleW - cr);
+
+  return [
+    // Pill bottom-left
+    `M 0,${pillTop + pr}`,
+    `A ${pr},${pr} 0 0 1 0,${pillTop + ph - pr}`,
+    // Pill bottom
+    `A ${pr},${pr} 0 0 1 ${pr},${pillTop + ph}`,
+    `H ${pillW - pr}`,
+    `A ${pr},${pr} 0 0 1 ${pillW},${pillTop + ph - pr}`,
+    // Pill right up to junction
+    `L ${pillW},${bubbleBottom}`,
+    // Right organic curve: pill to bubble
+    `Q ${pillW},${bubbleBottom - curve} ${qEndX},${bubbleBottom - curve}`,
+    // Bubble right side
+    `H ${bubbleW - cr}`,
+    `A ${cr},${cr} 0 0 0 ${bubbleW},${bubbleBottom - curve - cr}`,
+    // Bubble right edge up
+    `L ${bubbleW},${bubbleTop + cr}`,
+    // Bubble top-right corner
+    `A ${cr},${cr} 0 0 0 ${bubbleW - cr},${bubbleTop}`,
+    // Bubble top
+    `H ${cr}`,
+    // Bubble top-left corner
+    `A ${cr},${cr} 0 0 0 0,${bubbleTop + cr}`,
+    // Left edge down to pill
+    `Z`,
+  ].join(' ');
+}
+
+/** Memoized versions for animation performance. */
+export const morphPathDownMemo = memoizePath(morphPathDown);
+export const morphPathUpMemo = memoizePath(morphPathUp);
+

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

@@ -0,0 +1,50 @@
+/**
+ * Gooey — SVG-based morphing primitives for organic shape merging.
+ *
+ * Two techniques:
+ * - **Filter**: `GooeyCanvas` / `GooeyFilter` — SVG filter merges same-colored shapes
+ * - **Path**: `MorphPath` / `useMorphPath` — parametric SVG path with Bezier junctions
+ *
+ * @example
+ * ```tsx
+ * // Filter approach — automatic merge
+ * <GooeyCanvas height={40}>
+ *   <div className="bg-card rounded-full h-10 w-64" />
+ *   <div className="bg-card absolute bottom-full rounded-lg h-6 w-32" />
+ * </GooeyCanvas>
+ *
+ * // Path approach — precise control
+ * <svg><MorphPath pillWidth={260} bodyWidth={180} totalHeight={60} progress={0.5} fill="var(--card)" /></svg>
+ * ```
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+// Components
+export { GooeyFilter } from './GooeyFilter';
+export { GooeyCanvas } from './GooeyCanvas';
+export { MorphPath } from './MorphPath';
+
+// Hooks
+export { useMorphPath } from './useMorphPath';
+
+// Utilities
+export {
+  GOOEY_DEFAULTS,
+  computeBlur,
+  buildColorMatrixValues,
+  buildFilterString,
+  memoizePath,
+  morphPathDown,
+  morphPathUp,
+  morphPathDownMemo,
+  morphPathUpMemo,
+} from './gooey-utils';
+
+// Types
+export type {
+  IGooeyFilterProps,
+  IGooeyCanvasProps,
+  IMorphPathProps,
+  IUseMorphPathOptions,
+} from './Gooey.types';

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

@@ -0,0 +1,48 @@
+'use client';
+
+/**
+ * useMorphPath — hook that generates a parametric SVG path d-string.
+ *
+ * Returns a memoized path for a pill shape morphing into a blob.
+ * Use with `<path d={path} />` in an SVG element.
+ *
+ * @param opts - Dimensions and progress
+ * @returns SVG path d-string
+ *
+ * @example
+ * ```tsx
+ * const path = useMorphPath({
+ *   pillWidth: 260,
+ *   bodyWidth: 180,
+ *   totalHeight: 60,
+ *   progress: expanded ? 1 : 0,
+ *   direction: 'up',
+ * });
+ * return <svg><path d={path} fill="var(--card)" /></svg>;
+ * ```
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+import { useMemo } from 'react';
+import { morphPathDown, morphPathUp, GOOEY_DEFAULTS } from './gooey-utils';
+import type { IUseMorphPathOptions } from './Gooey.types';
+
+/**
+ * Generate a parametric SVG morph path from dimensions and progress.
+ */
+function useMorphPath({
+  pillWidth,
+  bodyWidth,
+  totalHeight,
+  progress,
+  pillHeight = GOOEY_DEFAULTS.PILL_HEIGHT,
+  direction = 'down',
+}: IUseMorphPathOptions): string {
+  return useMemo(() => {
+    const fn = direction === 'up' ? morphPathUp : morphPathDown;
+    return fn(pillWidth, bodyWidth, totalHeight, progress, pillHeight);
+  }, [pillWidth, bodyWidth, totalHeight, progress, pillHeight, direction]);
+}
+
+export { useMorphPath };