@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,253 +0,0 @@
-/**
- * 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

@@ -1,50 +0,0 @@
-/**
- * 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

@@ -1,48 +0,0 @@
-'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/Morph/Morph.types.ts

@@ -1,106 +0,0 @@
-import type { ReactNode, RefObject } from 'react';
-
-/**
- * Available morphing techniques.
- */
-export type MorphTechnique = 'flip-clip-path' | 'css-grid' | 'view-transitions';
-
-// =============================================================================
-// FLIP + clip-path
-// =============================================================================
-
-/** Options for the FLIP + clip-path morphing technique */
-export interface IFLIPClipPathOptions {
-  duration?: number;
-  easing?: string;
-  clipPathStart?: string;
-  clipPathEnd?: string;
-}
-
-/** API returned by useFLIPClipPath */
-export interface IFLIPClipPathAPI {
-  isMorphing: boolean;
-  morph: (fromElement: HTMLElement, toElement: HTMLElement) => Promise<void>;
-  cancel: () => void;
-}
-
-// =============================================================================
-// CSS Grid
-// =============================================================================
-
-/** Options for the CSS Grid expand/collapse technique */
-export interface ICSSGridMorphOptions {
-  duration?: number;
-  easing?: string;
-}
-
-/** API returned by useCSSGridMorph */
-export interface ICSSGridMorphAPI {
-  isExpanded: boolean;
-  expand: () => void;
-  collapse: () => void;
-  toggle: () => void;
-  containerRef: RefObject<HTMLElement | null>;
-}
-
-// =============================================================================
-// View Transitions
-// =============================================================================
-
-/** Options for the View Transitions API wrapper */
-export interface IViewTransitionsOptions {
-  name?: string;
-  types?: string[];
-}
-
-/** API returned by useViewTransitions */
-export interface IViewTransitionsAPI {
-  isSupported: boolean;
-  startTransition: (callback: () => void | Promise<void>) => Promise<void>;
-  setTypes: (types: string[]) => void;
-}
-
-// =============================================================================
-// Unified Morph
-// =============================================================================
-
-/** Configuration for useMorph hook */
-export interface IUseMorphConfig {
-  technique?: MorphTechnique;
-  duration?: number;
-  easing?: string;
-  onMorphStart?: () => void;
-  onMorphEnd?: () => void;
-}
-
-/** Return type for useMorph hook */
-export interface IUseMorphReturn {
-  isMorphing: boolean;
-  technique: MorphTechnique;
-  isViewTransitionsSupported: boolean;
-  morph: (fromElement: HTMLElement, toElement: HTMLElement) => Promise<void>;
-  cancel: () => void;
-  flipClipPath: IFLIPClipPathAPI;
-  cssGrid: ICSSGridMorphAPI;
-  viewTransitions: IViewTransitionsAPI;
-}
-
-// =============================================================================
-// Component Props
-// =============================================================================
-
-/** Props for Morph container component */
-export interface IMorphProps {
-  children: ReactNode;
-  technique?: MorphTechnique;
-  duration?: number;
-  easing?: string;
-  className?: string;
-  onMorphStart?: () => void;
-  onMorphEnd?: () => void;
-}
-
-/** Context value for Morph components */
-export interface IMorphContextValue {
-  morph: IUseMorphReturn;
-}

package/src/react-ui/primitives/waapi/Morph/MorphContext.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import React, { createContext, useContext } from 'react';
-import type { IMorphContextValue } from './Morph.types';
-
-const MorphContext = createContext<IMorphContextValue | null>(null);
-
-/**
- * Hook to access morph context
- *
- * @throws Error if used outside of Morph provider
- */
-export function useMorphContext(): IMorphContextValue {
-  const context = useContext(MorphContext);
-  if (!context) {
-    throw new Error('useMorphContext must be used within a Morph component');
-  }
-  return context;
-}
-
-export { MorphContext };

package/src/react-ui/primitives/waapi/Morph/index.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import React, { useMemo, type ReactNode } from 'react';
-import { MorphContext } from './MorphContext';
-import { useMorph } from './useMorph';
-import type { IMorphProps, IMorphContextValue } from './Morph.types';
-import { cn } from '@/react-ui/lib/utils';
-
-/**
- * Morph - Container component for morphable elements.
- *
- * Provides morphing capabilities to child components through context.
- * Supports FLIP + clip-path, CSS Grid, and View Transitions techniques.
- *
- * @example
- * ```tsx
- * <Morph technique="flip-clip-path" duration={300}>
- *   <button onClick={() => morph(fromRef.current, toRef.current)}>
- *     Morph
- *   </button>
- * </Morph>
- * ```
- */
-export function Morph({
-  children,
-  technique = 'flip-clip-path',
-  duration,
-  easing,
-  className = '',
-  onMorphStart,
-  onMorphEnd
-}: IMorphProps): ReactNode {
-  const morph = useMorph({
-    technique,
-    duration,
-    easing,
-    onMorphStart,
-    onMorphEnd
-  });
-
-  const contextValue = useMemo<IMorphContextValue>(() => ({
-    morph
-  }), [morph]);
-
-  return (
-    <MorphContext.Provider value={contextValue}>
-      <div className={cn('morph-container', className)}>
-        {children}
-      </div>
-    </MorphContext.Provider>
-  );
-}
-
-Morph.displayName = 'Morph';
-
-export type { IMorphProps, IMorphContextValue };

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

@@ -1,12 +0,0 @@
-/**
- * Morph techniques.
- *
- * Individual morphing implementations that can be used
- * standalone or composed through useMorph.
- *
- * @module primitives/waapi/Morph/techniques
- */
-
-export { useFLIPClipPath } from './useFLIPClipPath';
-export { useCSSGridMorph } from './useCSSGridMorph';
-export { useViewTransitions } from './useViewTransitions';

package/src/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.ts

@@ -1,89 +0,0 @@
-'use client';
-import { useRef, useCallback, useState } from 'react';
-import { TIMING, EASINGS } from '../../core/animationConstants';
-import type { ICSSGridMorphOptions, ICSSGridMorphAPI } from '../Morph.types';
-
-const DEFAULT_DURATION = TIMING.FLIP_DURATION;
-const DEFAULT_EASING = EASINGS.MATERIAL_STANDARD;
-
-/**
- * Hook for CSS Grid-based expand/collapse animations.
- *
- * Uses the `grid-template-rows: 0fr/1fr` technique for smooth height
- * animations without needing to know the content height in advance.
- *
- * CSS required on container:
- * ```css
- * .morph-container {
- *   display: grid;
- *   grid-template-rows: 0fr;
- *   transition: grid-template-rows 300ms ease;
- * }
- * .morph-container.expanded {
- *   grid-template-rows: 1fr;
- * }
- * .morph-content {
- *   overflow: hidden;
- * }
- * ```
- *
- * @param options - Duration and easing overrides
- * @returns Grid morph API with expand, collapse, toggle, and container ref
- *
- * @example
- * ```tsx
- * const { isExpanded, toggle, containerRef } = useCSSGridMorph();
- *
- * return (
- *   <div ref={containerRef} className={isExpanded ? 'expanded' : ''}>
- *     <div className="morph-content">Collapsible content</div>
- *   </div>
- * );
- * ```
- */
-export function useCSSGridMorph(options?: ICSSGridMorphOptions): ICSSGridMorphAPI {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const containerRef = useRef<HTMLElement | null>(null);
-  const optionsRef = useRef(options);
-
-  const duration = optionsRef.current?.duration ?? DEFAULT_DURATION;
-  const easing = optionsRef.current?.easing ?? DEFAULT_EASING;
-
-  const applyTransition = useCallback(() => {
-    if (containerRef.current) {
-      containerRef.current.style.transition = `grid-template-rows ${duration}ms ${easing}`;
-    }
-  }, [duration, easing]);
-
-  const expand = useCallback(() => {
-    applyTransition();
-    if (containerRef.current) {
-      containerRef.current.style.gridTemplateRows = '1fr';
-    }
-    setIsExpanded(true);
-  }, [applyTransition]);
-
-  const collapse = useCallback(() => {
-    applyTransition();
-    if (containerRef.current) {
-      containerRef.current.style.gridTemplateRows = '0fr';
-    }
-    setIsExpanded(false);
-  }, [applyTransition]);
-
-  const toggle = useCallback(() => {
-    if (isExpanded) {
-      collapse();
-    } else {
-      expand();
-    }
-  }, [isExpanded, expand, collapse]);
-
-  return {
-    isExpanded,
-    expand,
-    collapse,
-    toggle,
-    containerRef
-  };
-}