@mks2508/mks-ui 0.5.4 → 0.5.8

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

@@ -1,123 +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;
-  /** Element height — used to auto-calculate blur (default: 32) */
-  height?: number;
-  /** 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;
-  /** Extra className on the filter container */
-  className?: string;
-  /** Content to merge with the gooey filter */
-  children: ReactNode;
-}
-
-// ---------------------------------------------------------------------------
-// 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,80 +0,0 @@
-'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

@@ -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 };

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

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

@@ -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 };