@mks2508/mks-ui 0.5.1 → 0.5.4

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

@@ -0,0 +1,80 @@
+'use client';
+
+/**
+ * GooeyCanvas — container that applies gooey SVG filter to children.
+ *
+ * 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.
+ *
+ * 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>
+ * ```
+ *
+ * @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 type { IGooeyCanvasProps } from './Gooey.types';
+
+/**
+ * GooeyCanvas — container with gooey SVG filter applied.
+ */
+function GooeyCanvas({
+  blur,
+  height = 32,
+  outlineBlur = 0.5,
+  outlineColor = 'var(--border)',
+  outlineLayers = 2,
+  alphaGain,
+  alphaOffset,
+  className,
+  children,
+}: IGooeyCanvasProps) {
+  const filterId = React.useId().replace(/:/g, '') + '-goo';
+  const computedBlur = blur ?? computeBlur(height);
+
+  const filterStyle = React.useMemo(
+    () => ({
+      filter: buildFilterString(filterId, outlineBlur, outlineColor, outlineLayers),
+    }),
+    [filterId, outlineBlur, outlineColor, outlineLayers],
+  );
+
+  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,
+        )}
+      >
+        {children}
+      </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,244 @@
+/**
+ * Gooey morphing utilities — pure functions for SVG filter and path generation.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/** 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 };

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

@@ -114,3 +114,26 @@ export { useMorphContext } from './Morph/MorphContext';
 export { useFLIPClipPath } from './Morph/techniques/useFLIPClipPath';
 export { useCSSGridMorph } from './Morph/techniques/useCSSGridMorph';
 export { useViewTransitions } from './Morph/techniques/useViewTransitions';
+
+// ============================================================
+// Gooey — SVG-based shape morphing (filter + parametric path)
+// ============================================================
+
+export {
+  GooeyFilter,
+  GooeyCanvas,
+  MorphPath,
+  useMorphPath,
+  GOOEY_DEFAULTS,
+  computeBlur,
+  buildColorMatrixValues,
+  buildFilterString,
+  morphPathDown,
+  morphPathUp,
+} from './Gooey';
+export type {
+  IGooeyFilterProps,
+  IGooeyCanvasProps,
+  IMorphPathProps,
+  IUseMorphPathOptions,
+} from './Gooey';