@mks2508/mks-ui 0.5.2 → 0.5.7

package/dist/react-ui/index.js

@@ -22,6 +22,11 @@ import { useCSSGridMorph } from "./primitives/waapi/Morph/techniques/useCSSGridM
 import { useViewTransitions } from "./primitives/waapi/Morph/techniques/useViewTransitions.js";
 import { useMorph } from "./primitives/waapi/Morph/useMorph.js";
 import { Morph } from "./primitives/waapi/Morph/index.js";
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, morphPathDown, morphPathUp } from "./primitives/waapi/Gooey/gooey-utils.js";
+import { GooeyFilter } from "./primitives/waapi/Gooey/GooeyFilter.js";
+import { GooeyCanvas } from "./primitives/waapi/Gooey/GooeyCanvas.js";
+import { useMorphPath } from "./primitives/waapi/Gooey/useMorphPath.js";
+import { MorphPath } from "./primitives/waapi/Gooey/MorphPath.js";
 import "./primitives/index.js";
 import { getStrictContext } from "./lib/get-strict-context.js";
 import { useControlledState } from "./hooks/State/UseControlledState.js";
@@ -68,8 +73,8 @@ import { dataCardStyles, dataCardVariants } from "./ui/DataCard/DataCard.styles.
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./ui/DataCard/index.js";
 import { useListFormat } from "./hooks/Formatting/UseListFormat.js";
 import { TextFlow } from "./ui/TextFlow/index.js";
-import { dynamicToggleStyles } from "./ui/DynamicToggle/DynamicToggle.styles.js";
-import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption } from "./ui/DynamicToggle/index.js";
+import { dynamicToggleStyles, dynamicToggleVariants } from "./ui/DynamicToggle/DynamicToggle.styles.js";
+import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle } from "./ui/DynamicToggle/index.js";
 import "./ui/index.js";
 import { MorphingPopover, MorphingPopoverWithTarget } from "./components/MorphingPopover/index.js";
 import "./components/index.js";
@@ -110,4 +115,4 @@ import { HugeIcons } from "./icons/index.js";
 import { IconWrapper } from "./lib/icon-wrapper.js";
 import "./lib/index.js";
 
-export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, dynamicToggleStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GOOEY_DEFAULTS, Globe, GooeyCanvas, GooeyFilter, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, morphPathDown, morphPathUp, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };

package/dist/react-ui/primitives/index.js

@@ -19,4 +19,9 @@ import { useCSSGridMorph } from "./waapi/Morph/techniques/useCSSGridMorph.js";
 import { useViewTransitions } from "./waapi/Morph/techniques/useViewTransitions.js";
 import { useMorph } from "./waapi/Morph/useMorph.js";
 import { Morph } from "./waapi/Morph/index.js";
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, morphPathDown, morphPathUp } from "./waapi/Gooey/gooey-utils.js";
+import { GooeyFilter } from "./waapi/Gooey/GooeyFilter.js";
+import { GooeyCanvas } from "./waapi/Gooey/GooeyCanvas.js";
+import { useMorphPath } from "./waapi/Gooey/useMorphPath.js";
+import { MorphPath } from "./waapi/Gooey/MorphPath.js";
 import "./waapi/index.js";

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Gooey morphing primitive types.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+/**
+ * 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;
+}
+/**
+ * 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;
+}
+/**
+ * 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';
+}
+/**
+ * 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';
+}
+//# sourceMappingURL=Gooey.types.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts

@@ -0,0 +1,10 @@
+import type { IGooeyCanvasProps } from './Gooey.types';
+/**
+ * GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
+ */
+declare function GooeyCanvas({ blur, height, width, radius, fillColor, bubbleHeight: bubbleHeightProp, bubbleInset, expanded, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GooeyCanvas {
+    var displayName: string;
+}
+export { GooeyCanvas };
+//# sourceMappingURL=GooeyCanvas.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,KAAW,EACX,MAAa,EACb,SAAyB,EACzB,YAAY,EAAE,gBAAgB,EAC9B,WAAiB,EACjB,QAAgB,EAChB,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CAuKnB;kBA1LQ,WAAW;;;AA8LpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js

@@ -0,0 +1,190 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { EASINGS, getResponsiveDuration } from "../core/animationConstants.js";
+import { GOOEY_TIMING, computeBlur } from "./gooey-utils.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx
+/**
+* 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
+*/
+/**
+* GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
+*/
+function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor = "var(--card)", bubbleHeight: bubbleHeightProp, bubbleInset = .2, expanded = false, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className }) {
+	const filterId = React$1.useId().replace(/:/g, "") + "-goo";
+	const computedBlur = blur ?? computeBlur(height);
+	const bubbleRectRef = React$1.useRef(null);
+	const animRef = React$1.useRef(null);
+	const [ready, setReady] = React$1.useState(false);
+	const lastValues = React$1.useRef({
+		y: -1,
+		h: -1
+	});
+	const pad = 2;
+	const effectiveR = Math.min(radius, height / 2);
+	const bubbleH = bubbleHeightProp ?? Math.round(height * .4);
+	const insetPx = width * bubbleInset;
+	const bubbleW = width - 2 * insetPx;
+	const bubbleR = Math.min(effectiveR * .6, bubbleH * .45, 12);
+	const totalH = height + bubbleH;
+	const filterUrl = React$1.useMemo(() => `url(#${filterId})`, [filterId]);
+	const outlineShadow = React$1.useMemo(() => {
+		const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+		return Array(outlineLayers).fill(shadow).join(" ");
+	}, [
+		outlineBlur,
+		outlineColor,
+		outlineLayers
+	]);
+	const canvasStyle = React$1.useMemo(() => ({
+		filter: `${filterUrl} ${outlineShadow}`,
+		transform: "translateZ(0)",
+		contain: "layout style"
+	}), [filterUrl, outlineShadow]);
+	React$1.useEffect(() => {
+		const rect = bubbleRectRef.current;
+		if (!rect) return;
+		lastValues.current = {
+			y: expanded ? 0 : bubbleH,
+			h: expanded ? bubbleH : 0
+		};
+		if (expanded) rect.animate([{
+			y: "0px",
+			height: `${bubbleH}px`
+		}], {
+			duration: 0,
+			fill: "forwards"
+		});
+		const raf = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(raf);
+	}, []);
+	React$1.useEffect(() => {
+		const rect = bubbleRectRef.current;
+		if (!rect || !ready) return;
+		const isExpanding = expanded;
+		const duration = getResponsiveDuration(isExpanding ? expandDuration ?? GOOEY_TIMING.EXPAND_DURATION : collapseDuration ?? GOOEY_TIMING.COLLAPSE_DURATION);
+		const easing = isExpanding ? expandEasing ?? EASINGS.SPRING_GENTLE : collapseEasing ?? EASINGS.EASE_OUT_CUBIC;
+		const toY = isExpanding ? 0 : bubbleH;
+		const toH = isExpanding ? bubbleH : 0;
+		const fromY = lastValues.current.y;
+		const fromH = lastValues.current.h;
+		lastValues.current = {
+			y: toY,
+			h: toH
+		};
+		if (duration === 0) {
+			if (animRef.current) animRef.current.cancel();
+			rect.animate([{
+				y: `${toY}px`,
+				height: `${toH}px`
+			}], {
+				duration: 0,
+				fill: "forwards"
+			});
+			return;
+		}
+		if (animRef.current) animRef.current.cancel();
+		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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "gooey-canvas",
+		style: canvasStyle,
+		className: cn("absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible", className),
+		children: /* @__PURE__ */ jsxs("svg", {
+			"data-slot": "gooey-svg",
+			width,
+			height: totalH,
+			viewBox: `0 0 ${width} ${totalH}`,
+			style: {
+				position: "absolute",
+				top: -bubbleH,
+				left: 0,
+				overflow: "visible"
+			},
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					x: "-20%",
+					y: "-20%",
+					width: "140%",
+					height: "140%",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: computedBlur,
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("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"
+						}),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							in2: "goo",
+							operator: "atop"
+						})
+					]
+				}) }),
+				/* @__PURE__ */ jsx("rect", {
+					x: pad,
+					y: bubbleH,
+					width: width - pad * 2,
+					height: height - pad * 2,
+					rx: effectiveR,
+					ry: effectiveR,
+					fill: fillColor
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					ref: bubbleRectRef,
+					x: insetPx,
+					y: bubbleH,
+					width: bubbleW,
+					height: 0,
+					rx: bubbleR,
+					ry: bubbleR,
+					fill: fillColor
+				})
+			]
+		})
+	});
+}
+GooeyCanvas.displayName = "GooeyCanvas";
+
+//#endregion
+export { GooeyCanvas };

package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.d.ts

@@ -0,0 +1,7 @@
+import type { IGooeyFilterProps } from './Gooey.types';
+/**
+ * GooeyFilter — renders an SVG filter definition for gooey morphing.
+ */
+declare const GooeyFilter: import("react").MemoExoticComponent<({ id, blur, alphaGain, alphaOffset, }: IGooeyFilterProps) => import("react/jsx-runtime").JSX.Element>;
+export { GooeyFilter };
+//# sourceMappingURL=GooeyFilter.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyFilter.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyFilter.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUvD;;GAEG;AACH,QAAA,MAAM,WAAW,8EAKd,iBAAiB,6CAwBlB,CAAC;AAIH,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.js

@@ -0,0 +1,78 @@
+'use client';
+
+import { GOOEY_DEFAULTS, buildColorMatrixValues } from "./gooey-utils.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Gooey/GooeyFilter.tsx
+/**
+* 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
+*/
+const HIDDEN_SVG_STYLE = {
+	position: "absolute",
+	width: 0,
+	height: 0,
+	overflow: "hidden",
+	pointerEvents: "none"
+};
+/**
+* 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 }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		style: HIDDEN_SVG_STYLE,
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+			id,
+			x: "-20%",
+			y: "-20%",
+			width: "140%",
+			height: "140%",
+			colorInterpolationFilters: "sRGB",
+			children: [
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: blur,
+					result: "blur"
+				}),
+				/* @__PURE__ */ jsx("feColorMatrix", {
+					in: "blur",
+					mode: "matrix",
+					values: buildColorMatrixValues(alphaGain, alphaOffset),
+					result: "goo"
+				}),
+				/* @__PURE__ */ jsx("feComposite", {
+					in: "SourceGraphic",
+					in2: "goo",
+					operator: "atop"
+				})
+			]
+		}) })
+	});
+});
+GooeyFilter.displayName = "GooeyFilter";
+
+//#endregion
+export { GooeyFilter };

package/dist/react-ui/primitives/waapi/Gooey/MorphPath.d.ts

@@ -0,0 +1,7 @@
+import type { IMorphPathProps } from './Gooey.types';
+/**
+ * MorphPath — parametric SVG path for pill→blob morphing.
+ */
+declare const MorphPath: import("react").MemoExoticComponent<({ pillWidth, bodyWidth, totalHeight, progress, pillHeight, direction, ...pathProps }: IMorphPathProps) => import("react/jsx-runtime").JSX.Element>;
+export { MorphPath };
+//# sourceMappingURL=MorphPath.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/MorphPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MorphPath.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/MorphPath.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD;;GAEG;AACH,QAAA,MAAM,SAAS,6HAQZ,eAAe,6CAWhB,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/MorphPath.js

@@ -0,0 +1,51 @@
+'use client';
+
+import { GOOEY_DEFAULTS } from "./gooey-utils.js";
+import { useMorphPath } from "./useMorphPath.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Gooey/MorphPath.tsx
+/**
+* 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
+*/
+/**
+* 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 }) {
+	return /* @__PURE__ */ jsx("path", {
+		d: useMorphPath({
+			pillWidth,
+			bodyWidth,
+			totalHeight,
+			progress,
+			pillHeight,
+			direction
+		}),
+		...pathProps
+	});
+});
+MorphPath.displayName = "MorphPath";
+
+//#endregion
+export { MorphPath };

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

@@ -0,0 +1,94 @@
+/**
+ * Gooey morphing utilities — pure functions for SVG filter and path generation.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+/** Gooey animation timing constants. */
+export declare const GOOEY_TIMING: {
+    /** Expand duration in ms — spring-like with room for overshoot */
+    readonly EXPAND_DURATION: 550;
+    /** Collapse duration in ms — snappier settle, no overshoot */
+    readonly COLLAPSE_DURATION: 400;
+};
+/** Default gooey filter parameters. */
+export declare const GOOEY_DEFAULTS: {
+    /** Blur = height * BLUR_RATIO */
+    readonly BLUR_RATIO: 0.15;
+    /** feColorMatrix alpha channel multiplier */
+    readonly ALPHA_GAIN: 20;
+    /** feColorMatrix alpha channel offset */
+    readonly ALPHA_OFFSET: -10;
+    /** Default pill height (px) */
+    readonly PILL_HEIGHT: 34;
+    /** Quadratic bezier curve factor at full expansion */
+    readonly CURVE_FACTOR: 14;
+    /** Max body corner radius (px) */
+    readonly MAX_CORNER_RADIUS: 16;
+    /** Corner radius to body-height ratio */
+    readonly CORNER_RATIO: 0.45;
+    /** Minimum body height delta to show rounded corners */
+    readonly MIN_BODY_DELTA: 8;
+};
+/**
+ * Compute the optimal Gaussian blur for a gooey filter based on element height.
+ *
+ * @param height - Element height in pixels
+ * @returns Blur stdDeviation value
+ */
+export declare function computeBlur(height: number): number;
+/**
+ * Build the feColorMatrix `values` string.
+ *
+ * @param gain - Alpha multiplier (default: 20)
+ * @param offset - Alpha offset (default: -10)
+ * @returns Matrix values string for feColorMatrix
+ */
+export declare function buildColorMatrixValues(gain?: number, offset?: number): string;
+/**
+ * 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 declare function buildFilterString(filterId: string, outlineBlur?: number, outlineColor?: string, outlineLayers?: number): string;
+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 declare function memoizePath(fn: PathFn): PathFn;
+/**
+ * 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 declare function morphPathDown(pw: number, bw: number, th: number, t: number, ph?: number): string;
+/**
+ * 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 declare function morphPathUp(pw: number, bw: number, th: number, t: number, ph?: number): string;
+/** Memoized versions for animation performance. */
+export declare const morphPathDownMemo: PathFn;
+export declare const morphPathUpMemo: PathFn;
+export {};
+//# sourceMappingURL=gooey-utils.d.ts.map

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gooey-utils.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/gooey-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,wCAAwC;AACxC,eAAO,MAAM,YAAY;IACvB,kEAAkE;;IAElE,8DAA8D;;CAEtD,CAAC;AAEX,uCAAuC;AACvC,eAAO,MAAM,cAAc;IACzB,iCAAiC;;IAEjC,6CAA6C;;IAE7C,yCAAyC;;IAEzC,+BAA+B;;IAE/B,sDAAsD;;IAEtD,kCAAkC;;IAElC,yCAAyC;;IAEzC,wDAAwD;;CAEhD,CAAC;AAMX;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,GAAE,MAAkC,EACxC,MAAM,GAAE,MAAoC,GAC3C,MAAM,CAER;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,MAAY,EACzB,YAAY,GAAE,MAAwB,EACtC,aAAa,GAAE,MAAU,GACxB,MAAM,CAKR;AAMD,KAAK,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAW9C;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAwCR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAsDR;AAED,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,QAA2B,CAAC"}