@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,141 +0,0 @@
-/**
- * Gooey morphing primitive types.
- *
- * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
- */
-
-import type { ReactNode } from 'react';
-
-// ---------------------------------------------------------------------------
-// GooeyFilter
-// ---------------------------------------------------------------------------
-
-/**
- * Props for the GooeyFilter SVG filter definition.
- *
- * @example
- * ```tsx
- * <GooeyFilter id="my-goo" blur={8} />
- * ```
- */
-export interface IGooeyFilterProps {
-  /** Unique filter ID — referenced via `filter: url(#id)` */
-  id: string;
-  /** Gaussian blur stdDeviation (default: 8) */
-  blur?: number;
-  /** Alpha channel multiplier in feColorMatrix (default: 20) */
-  alphaGain?: number;
-  /** Alpha channel offset in feColorMatrix (default: -10) */
-  alphaOffset?: number;
-}
-
-// ---------------------------------------------------------------------------
-// GooeyCanvas
-// ---------------------------------------------------------------------------
-
-/**
- * Props for the GooeyCanvas container.
- *
- * Wraps children with an SVG gooey filter. All same-colored children
- * inside automatically merge visually into an organic blob.
- *
- * @example
- * ```tsx
- * <GooeyCanvas height={40}>
- *   <div className="bg-card rounded-full h-10 w-64" />
- *   <div className="bg-card absolute bottom-full w-32 h-6" />
- * </GooeyCanvas>
- * ```
- */
-export interface IGooeyCanvasProps {
-  /** Blur radius override. If omitted, auto-calculated from `height`. */
-  blur?: number;
-  /** 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)') */
-  outlineColor?: string;
-  /** Number of stacked drop-shadows for outline thickness (default: 2) */
-  outlineLayers?: number;
-  /** Alpha gain override */
-  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;
-}
-
-// ---------------------------------------------------------------------------
-// MorphPath
-// ---------------------------------------------------------------------------
-
-/**
- * Props for the MorphPath SVG path component.
- *
- * Renders a parametric `<path>` that morphs from a pill shape to a
- * pill+body blob based on the `progress` value.
- *
- * @example
- * ```tsx
- * <svg>
- *   <MorphPath pillWidth={260} bodyWidth={180} totalHeight={60} progress={0.5} fill="var(--card)" />
- * </svg>
- * ```
- */
-export interface IMorphPathProps extends React.SVGProps<SVGPathElement> {
-  /** Pill width in px */
-  pillWidth: number;
-  /** Body (expanded area) width in px */
-  bodyWidth: number;
-  /** Total height (pill + body) in px */
-  totalHeight: number;
-  /** Morph progress: 0 = pill only, 1 = fully expanded */
-  progress: number;
-  /** Pill height (default: 34) */
-  pillHeight?: number;
-  /** Body expansion direction relative to pill */
-  direction?: 'down' | 'up';
-}
-
-// ---------------------------------------------------------------------------
-// useMorphPath
-// ---------------------------------------------------------------------------
-
-/**
- * Options for the useMorphPath hook.
- */
-export interface IUseMorphPathOptions {
-  /** Pill width in px */
-  pillWidth: number;
-  /** Body width in px */
-  bodyWidth: number;
-  /** Total height in px */
-  totalHeight: number;
-  /** Morph progress 0→1 */
-  progress: number;
-  /** Pill height (default: 34) */
-  pillHeight?: number;
-  /** Body direction */
-  direction?: 'down' | 'up';
-}

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

@@ -1,217 +0,0 @@
-'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

@@ -1,77 +0,0 @@
-'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

@@ -1,58 +0,0 @@
-'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 };