@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/primitives/DotMatrix/patterns.js

@@ -0,0 +1,175 @@
+//#region src/react-ui/primitives/DotMatrix/patterns.ts
+/** Catalogue of all pattern names. Handy for UIs / debug labs. */
+const DOT_MATRIX_PATTERNS = [
+	"snake",
+	"snake-up",
+	"wave-lr",
+	"wave-rl",
+	"wave-tb",
+	"wave-bt",
+	"spiral-cw",
+	"corners-first",
+	"center-out",
+	"diagonal-tl",
+	"cross",
+	"checkerboard",
+	"rain",
+	"pinwheel",
+	"converge",
+	"zigzag"
+];
+/** Cheap deterministic hash for `rain` — stable across renders. */
+function hash(r, c, rows, cols) {
+	const x = r * 9301 + c * 49297 + rows * 233 + cols * 131;
+	return Math.abs(x * 2654435761 % 2333) / 2333;
+}
+/** Fill a rank table by walking the grid in clockwise spiral from (0,0). */
+function spiralRanks(rows, cols) {
+	const total = rows * cols;
+	const ranks = new Array(total).fill(0);
+	let top = 0;
+	let bottom = rows - 1;
+	let left = 0;
+	let right = cols - 1;
+	let idx = 0;
+	while (top <= bottom && left <= right) {
+		for (let c = left; c <= right; c++) ranks[top * cols + c] = idx++;
+		top++;
+		for (let r = top; r <= bottom; r++) ranks[r * cols + right] = idx++;
+		right--;
+		if (top <= bottom) {
+			for (let c = right; c >= left; c--) ranks[bottom * cols + c] = idx++;
+			bottom--;
+		}
+		if (left <= right) {
+			for (let r = bottom; r >= top; r--) ranks[r * cols + left] = idx++;
+			left++;
+		}
+	}
+	return ranks;
+}
+/**
+* Build the delay array for `pattern` at `rows × cols`, scaled by `step`
+* (ms between successive cells in simple sweep patterns).
+*
+* Always returns an array of exact length `rows * cols`.
+*
+* @example
+* ```ts
+* const delays = buildDelays('wave-lr', 6, 18, 60);
+* // delays[0]=0, delays[1]=60, ..., delays[17]=1020
+* // delays[18]=0, delays[19]=60, ... (all rows identical for wave-lr)
+* ```
+*/
+function buildDelays(pattern, rows, cols, step = 60) {
+	const total = rows * cols;
+	const delays = new Array(total);
+	if (pattern === "wave-lr") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = c * step;
+		return delays;
+	}
+	if (pattern === "wave-rl") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = (cols - 1 - c) * step;
+		return delays;
+	}
+	if (pattern === "wave-tb") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = r * step;
+		return delays;
+	}
+	if (pattern === "wave-bt") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = (rows - 1 - r) * step;
+		return delays;
+	}
+	if (pattern === "diagonal-tl") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = (r + c) * step;
+		return delays;
+	}
+	if (pattern === "center-out") {
+		const cr = (rows - 1) / 2;
+		const cc = (cols - 1) / 2;
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = Math.round(Math.hypot(r - cr, c - cc) * step);
+		return delays;
+	}
+	if (pattern === "converge") {
+		const cr = (rows - 1) / 2;
+		const cc = (cols - 1) / 2;
+		const maxDist = Math.hypot(cr, cc);
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = Math.round((maxDist - Math.hypot(r - cr, c - cc)) * step);
+		return delays;
+	}
+	if (pattern === "corners-first") {
+		const corners = [
+			[0, 0],
+			[0, cols - 1],
+			[rows - 1, 0],
+			[rows - 1, cols - 1]
+		];
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+			let min = Infinity;
+			for (const [cr, cc] of corners) {
+				const d = Math.hypot(r - cr, c - cc);
+				if (d < min) min = d;
+			}
+			delays[r * cols + c] = Math.round(min * step);
+		}
+		return delays;
+	}
+	if (pattern === "cross") {
+		const cr = (rows - 1) / 2;
+		const cc = (cols - 1) / 2;
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+			const d = Math.min(Math.abs(r - cr), Math.abs(c - cc));
+			delays[r * cols + c] = Math.round(d * step);
+		}
+		return delays;
+	}
+	if (pattern === "checkerboard") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = (r + c) % 2 * step * 4;
+		return delays;
+	}
+	if (pattern === "rain") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) delays[r * cols + c] = Math.round(hash(r, c, rows, cols) * step * Math.max(rows, cols));
+		return delays;
+	}
+	if (pattern === "spiral-cw") {
+		const ranks = spiralRanks(rows, cols);
+		for (let i = 0; i < total; i++) delays[i] = ranks[i] * step;
+		return delays;
+	}
+	if (pattern === "snake") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+			const rank = r % 2 === 0 ? r * cols + c : r * cols + (cols - 1 - c);
+			delays[r * cols + c] = rank * step;
+		}
+		return delays;
+	}
+	if (pattern === "snake-up") {
+		for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+			const invRow = rows - 1 - r;
+			const rank = invRow % 2 === 0 ? invRow * cols + c : invRow * cols + (cols - 1 - c);
+			delays[r * cols + c] = rank * step;
+		}
+		return delays;
+	}
+	if (pattern === "zigzag") {
+		const bands = Math.max(2, Math.floor(rows / 2));
+		for (let r = 0; r < rows; r++) {
+			const band = Math.floor(r * bands / rows);
+			for (let c = 0; c < cols; c++) {
+				const rankInBand = band % 2 === 0 ? c : cols - 1 - c;
+				delays[r * cols + c] = (band * cols + rankInBand) * step;
+			}
+		}
+		return delays;
+	}
+	const cr = (rows - 1) / 2;
+	const cc = (cols - 1) / 2;
+	for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+		const norm = (Math.atan2(r - cr, c - cc) + Math.PI) / (2 * Math.PI);
+		delays[r * cols + c] = Math.round(norm * total * step * .12);
+	}
+	return delays;
+}
+
+//#endregion
+export { DOT_MATRIX_PATTERNS, buildDelays };

package/dist/react-ui/primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Type surface for the GooeyMorphingSurface primitive.
+ *
+ * A headless render primitive: given `open` + slot content + a tuning config,
+ * it paints an SVG canvas where a pill rect (top) and a card rect (below)
+ * are fused by a gaussian-blur + alpha-threshold filter. The consumer owns
+ * open/close state — the primitive just reflects it.
+ *
+ * @module @mks2508/mks-ui/react/primitives/GooeyMorphingSurface
+ */
+import type { ReactNode } from 'react';
+/**
+ * Tuning knobs for the gooey shape + filter + timing.
+ *
+ * All values are independent; changing one does not imply re-tuning another.
+ * See `DEFAULT_GOOEY_CONFIG` for a baseline.
+ */
+export interface IGooeyMorphConfig {
+    /** Pill width in px. */
+    pillWidth: number;
+    /** Pill height in px. The pill radius is derived as pillHeight / 2. */
+    pillHeight: number;
+    /** Card width in px (open state). */
+    cardWidth: number;
+    /** Card height in px (open state). */
+    cardHeight: number;
+    /** Card corner radius in px (open state). */
+    cardRadius: number;
+    /**
+     * Vertical overlap (px) the body rect claims on top of the pill. Tunes
+     * how "tight" the metaball throat looks — too small = visible gap, too
+     * big = fat neck. Rule of thumb: merge overlap ≥ blur × 1.2.
+     */
+    mergeOverlap: number;
+    /** feGaussianBlur stdDeviation. Bigger = softer, more chicle-like throat. */
+    blur: number;
+    /** feColorMatrix alpha amplification (bottom-row 4th value). Higher = crisper silhouette. */
+    alphaAmp: number;
+    /** feColorMatrix alpha offset (bottom-row 5th value). More negative = more bite out of the halo. */
+    alphaOffset: number;
+    /**
+     * CSS color used as the fill for BOTH rects. Must be a single paint
+     * source for the alpha threshold to produce a unified silhouette.
+     * Accepts any CSS color — tokens (`var(--card)`), hex, oklch, etc.
+     */
+    fill: string;
+    /** Morph duration in ms. */
+    durationMs: number;
+    /** CSS easing used for shape morph + card content crossfade. */
+    easing: string;
+    /**
+     * Horizontal offset of the pill relative to the card's horizontal center,
+     * in pixels. `0` = centered (pill sits on the card's vertical axis).
+     * Positive values shift the pill to the right, negative to the left.
+     *
+     * Useful when the surface is placed near a viewport edge and a centered
+     * card would overflow — shift the pill sideways so the card extends into
+     * the available space. Values are not clamped; values outside
+     * `±(cardWidth - pillWidth) / 2` push the pill past the card edge and the
+     * gooey throat will visibly break.
+     */
+    pillOffsetX: number;
+}
+/** Default tuning — matches the "Default" preset in the sileo-lab workbench. */
+export declare const DEFAULT_GOOEY_CONFIG: IGooeyMorphConfig;
+/** Named slots the consumer can target with className overrides. */
+export interface IGooeyMorphSlots {
+    /** The outer host div. */
+    root?: string;
+    /** The morphing shell (SVG + HTML overlays live inside). */
+    shell?: string;
+    /** The HTML wrapper that sits on top of the pill SVG rect. */
+    pill?: string;
+    /** The HTML wrapper that sits on top of the body SVG rect. Receives
+     * `open` styling; opacity + pointer-events animate with the card. */
+    card?: string;
+}
+export interface IGooeyMorphingSurfaceProps {
+    /** Whether the card body is revealed. The consumer owns this state. */
+    open: boolean;
+    /** Content rendered on top of the pill rect. Typically a label + icon. */
+    pill: ReactNode;
+    /** Content rendered on top of the body rect (revealed when `open`). */
+    card: ReactNode;
+    /**
+     * Partial config — merged on top of `DEFAULT_GOOEY_CONFIG`. Use this
+     * to override a subset without restating the whole config.
+     */
+    config?: Partial<IGooeyMorphConfig>;
+    /** Extra className for the outer host. */
+    className?: string;
+    /** className overrides per slot. */
+    slots?: IGooeyMorphSlots;
+    /**
+     * `aria-hidden` for the decorative SVG. Defaults to true — content is
+     * the pill + card overlays, not the filter rectangles.
+     */
+    'aria-hidden'?: boolean;
+}
+//# sourceMappingURL=GooeyMorphingSurface.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyMorphingSurface.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IACjC,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,6FAA6F;IAC7F,QAAQ,EAAE,MAAM,CAAC;IACjB,oGAAoG;IACpG,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,EAAE,iBAclC,CAAC;AAMF,oEAAoE;AACpE,MAAM,WAAW,gBAAgB;IAChC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yEACqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,0BAA0B;IAC1C,uEAAuE;IACvE,IAAI,EAAE,OAAO,CAAC;IACd,0EAA0E;IAC1E,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB"}

package/dist/react-ui/primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.js

@@ -0,0 +1,20 @@
+//#region src/react-ui/primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.ts
+/** Default tuning — matches the "Default" preset in the sileo-lab workbench. */
+const DEFAULT_GOOEY_CONFIG = {
+	pillWidth: 192,
+	pillHeight: 36,
+	cardWidth: 560,
+	cardHeight: 360,
+	cardRadius: 22,
+	mergeOverlap: 10,
+	blur: 8,
+	alphaAmp: 20,
+	alphaOffset: -10,
+	fill: "var(--card)",
+	durationMs: 360,
+	easing: "cubic-bezier(0.32, 0.72, 0, 1)",
+	pillOffsetX: 0
+};
+
+//#endregion
+export { DEFAULT_GOOEY_CONFIG };

package/dist/react-ui/primitives/GooeyMorphingSurface/gooey-morphing.css

@@ -0,0 +1,112 @@
+/* =============================================================================
+ *  GooeyMorphingSurface — CSS layer for the SVG rect morph + HTML overlays.
+ *
+ *  Classes are prefixed `.gms-*` so they act as a manual scope (mks-ui's
+ *  rolldown build produces empty default-exports for CSS modules, so we use
+ *  plain CSS with explicit classnames referenced as string literals from
+ *  the component).
+ *
+ *  Every tunable value comes from inline CSS custom props set by the React
+ *  component at the root element. No hard-coded dimensions or timings here.
+ *
+ *  Technique recap: two <rect>s inside a <g filter="url(#gooey)">. Body rect
+ *  is a geometric CLONE of the pill when closed, and morphs into the card
+ *  geometry (x, y, width, height, rx, ry all interpolate) when open. The
+ *  gaussian-blur + alpha-threshold filter bends the overlapping silhouettes
+ *  into a single shape with a soft metaball throat.
+ * ============================================================================= */
+
+.gms-root {
+	position: relative;
+	display: inline-block;
+}
+
+.gms-shell {
+	position: relative;
+	width: var(--gms-card-w);
+	height: var(--gms-pill-h);
+	color: var(--gms-fill);
+	transition: height var(--gms-duration) var(--gms-ease);
+	/* Drop-shadow follows the fused silhouette. Chained filters = additive
+	 * shadow layers for depth without a hard box-shadow. */
+	filter: drop-shadow(0 16px 38px rgb(0 0 0 / 0.35))
+		drop-shadow(0 4px 10px rgb(0 0 0 / 0.18));
+}
+
+.gms-shell[data-open='true'] {
+	height: calc(var(--gms-pill-h) + var(--gms-card-h));
+}
+
+.gms-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	display: block;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.gms-body-rect {
+	will-change: x, y, width, height;
+	transition:
+		x var(--gms-duration) var(--gms-ease),
+		y var(--gms-duration) var(--gms-ease),
+		width var(--gms-duration) var(--gms-ease),
+		height var(--gms-duration) var(--gms-ease),
+		rx var(--gms-duration) var(--gms-ease),
+		ry var(--gms-duration) var(--gms-ease);
+}
+
+.gms-pill {
+	position: absolute;
+	top: 0;
+	left: var(--gms-pill-x);
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	color: var(--card-foreground);
+	pointer-events: none;
+	z-index: 2;
+}
+
+.gms-card {
+	position: absolute;
+	top: calc(var(--gms-pill-h) - var(--gms-overlap));
+	left: 0;
+	width: var(--gms-card-w);
+	height: var(--gms-card-h);
+	color: var(--card-foreground);
+	opacity: 0;
+	transform: translateY(4px);
+	pointer-events: none;
+	z-index: 2;
+	overflow: hidden;
+	border-radius: var(--gms-card-r);
+	transition:
+		opacity calc(var(--gms-duration) * 0.35) var(--gms-ease),
+		transform calc(var(--gms-duration) * 0.35) var(--gms-ease);
+}
+
+.gms-shell[data-open='true'] .gms-card {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
+	transition:
+		opacity calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45),
+		transform calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.gms-shell,
+	.gms-body-rect,
+	.gms-card {
+		transition-duration: 0.01ms !important;
+	}
+}
+

package/dist/react-ui/primitives/GooeyMorphingSurface/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * GooeyMorphingSurface — headless pill→card gooey morph primitive.
+ *
+ * Paints an SVG canvas where a pill-shaped rect sits on top and a card-
+ * shaped rect sits below (body). Both rects share a gaussian-blur +
+ * alpha-threshold filter that fuses them into a single silhouette with a
+ * soft metaball throat wherever they overlap. When `open` is false, the
+ * body rect is a geometric clone of the pill (same x/y/w/h/rx) — no extra
+ * halo, no pop. When `open` flips to true, all six SVG presentation attrs
+ * (x, y, width, height, rx, ry) interpolate in lock-step, producing a
+ * continuous morph from pill to card.
+ *
+ * The primitive is purely presentational: it does not own open state, does
+ * not bind click handlers, does not trap focus. Use `<GooeyButton>` for
+ * the ergonomic wrapper that adds those behaviours.
+ *
+ * @module @mks2508/mks-ui/react/primitives/GooeyMorphingSurface
+ */
+import './gooey-morphing-surface.css';
+import { type IGooeyMorphingSurfaceProps } from './GooeyMorphingSurface.types';
+export * from './GooeyMorphingSurface.types';
+/**
+ * Headless gooey pill→card morph surface.
+ *
+ * @example
+ * ```tsx
+ * <GooeyMorphingSurface
+ *   open={open}
+ *   pill={<span>Pull origin</span>}
+ *   card={<ProgressCard transfer={transfer} />}
+ *   config={{ blur: 12, mergeOverlap: 14 }}
+ * />
+ * ```
+ */
+export declare function GooeyMorphingSurface({ open, pill, card, config: userConfig, className, slots, 'aria-hidden': ariaHidden, }: IGooeyMorphingSurfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/GooeyMorphingSurface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/GooeyMorphingSurface/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAMH,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAEN,KAAK,0BAA0B,EAC/B,MAAM,8BAA8B,CAAC;AAEtC,cAAc,8BAA8B,CAAC;AAE7C;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,EACpC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAiB,GAChC,EAAE,0BAA0B,2CAkH5B"}

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

@@ -0,0 +1,141 @@
+import { cn } from "../../lib/utils.js";
+import "./gooey-morphing-surface.js";
+import { DEFAULT_GOOEY_CONFIG } from "./GooeyMorphingSurface.types.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/GooeyMorphingSurface/index.tsx
+/**
+* GooeyMorphingSurface — headless pill→card gooey morph primitive.
+*
+* Paints an SVG canvas where a pill-shaped rect sits on top and a card-
+* shaped rect sits below (body). Both rects share a gaussian-blur +
+* alpha-threshold filter that fuses them into a single silhouette with a
+* soft metaball throat wherever they overlap. When `open` is false, the
+* body rect is a geometric clone of the pill (same x/y/w/h/rx) — no extra
+* halo, no pop. When `open` flips to true, all six SVG presentation attrs
+* (x, y, width, height, rx, ry) interpolate in lock-step, producing a
+* continuous morph from pill to card.
+*
+* The primitive is purely presentational: it does not own open state, does
+* not bind click handlers, does not trap focus. Use `<GooeyButton>` for
+* the ergonomic wrapper that adds those behaviours.
+*
+* @module @mks2508/mks-ui/react/primitives/GooeyMorphingSurface
+*/
+/**
+* Headless gooey pill→card morph surface.
+*
+* @example
+* ```tsx
+* <GooeyMorphingSurface
+*   open={open}
+*   pill={<span>Pull origin</span>}
+*   card={<ProgressCard transfer={transfer} />}
+*   config={{ blur: 12, mergeOverlap: 14 }}
+* />
+* ```
+*/
+function GooeyMorphingSurface({ open, pill, card, config: userConfig, className, slots, "aria-hidden": ariaHidden = true }) {
+	const filterId = `gms-filter-${useId().replace(/:/g, "")}`;
+	const { pillWidth, pillHeight, cardWidth, cardHeight, cardRadius, mergeOverlap, blur, alphaAmp, alphaOffset, fill, durationMs, easing, pillOffsetX } = {
+		...DEFAULT_GOOEY_CONFIG,
+		...userConfig
+	};
+	const pillRadius = pillHeight / 2;
+	const svgHeight = pillHeight + cardHeight + mergeOverlap;
+	const pillX = (cardWidth - pillWidth) / 2 + pillOffsetX;
+	const bodyX = open ? 0 : pillX;
+	const bodyY = open ? pillHeight - mergeOverlap : 0;
+	const bodyW = open ? cardWidth : pillWidth;
+	const bodyH = open ? cardHeight + mergeOverlap : pillHeight;
+	const bodyR = open ? cardRadius : pillRadius;
+	const rootStyle = {
+		"--gms-pill-w": `${pillWidth}px`,
+		"--gms-pill-h": `${pillHeight}px`,
+		"--gms-card-w": `${cardWidth}px`,
+		"--gms-card-h": `${cardHeight}px`,
+		"--gms-card-r": `${cardRadius}px`,
+		"--gms-overlap": `${mergeOverlap}px`,
+		"--gms-pill-x": `${pillX}px`,
+		"--gms-fill": fill,
+		"--gms-duration": `${durationMs}ms`,
+		"--gms-ease": easing
+	};
+	const alphaMatrix = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${alphaAmp} ${alphaOffset}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("gms-root", slots?.root, className),
+		style: rootStyle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("gms-shell", slots?.shell),
+			"data-open": open,
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					className: "gms-svg",
+					width: cardWidth,
+					height: svgHeight,
+					"aria-hidden": ariaHidden,
+					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: blur,
+								result: "blur"
+							}),
+							/* @__PURE__ */ jsx("feColorMatrix", {
+								in: "blur",
+								mode: "matrix",
+								values: alphaMatrix,
+								result: "goo"
+							}),
+							/* @__PURE__ */ jsx("feComposite", {
+								in: "SourceGraphic",
+								in2: "goo",
+								operator: "atop"
+							})
+						]
+					}) }), /* @__PURE__ */ jsxs("g", {
+						filter: `url(#${filterId})`,
+						children: [/* @__PURE__ */ jsx("rect", {
+							x: pillX,
+							y: 0,
+							width: pillWidth,
+							height: pillHeight,
+							rx: pillRadius,
+							ry: pillRadius,
+							fill
+						}), /* @__PURE__ */ jsx("rect", {
+							className: "gms-body-rect",
+							fill,
+							style: {
+								x: bodyX,
+								y: bodyY,
+								width: bodyW,
+								height: bodyH,
+								rx: bodyR,
+								ry: bodyR
+							}
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("gms-pill", slots?.pill),
+					children: pill
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("gms-card", slots?.card),
+					children: card
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { GooeyMorphingSurface };

package/dist/react-ui/primitives/index.d.ts

@@ -9,5 +9,7 @@ export * from './Slot';
 export * from './Highlight';
 export * from './AutoHeight';
 export * from './CountingNumber';
+export * from './DotMatrix';
+export * from './GooeyMorphingSurface';
 export * from './waapi';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AAGvC,cAAc,SAAS,CAAC"}

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

@@ -2,6 +2,10 @@ import { Slot } from "./Slot/index.js";
 import { Highlight, HighlightItem, useHighlight } from "./Highlight/index.js";
 import { AutoHeight } from "./AutoHeight/index.js";
 import { CountingNumber } from "./CountingNumber/index.js";
+import { DOT_MATRIX_PATTERNS, buildDelays } from "./DotMatrix/patterns.js";
+import { DotMatrix } from "./DotMatrix/index.js";
+import { DEFAULT_GOOEY_CONFIG } from "./GooeyMorphingSurface/GooeyMorphingSurface.types.js";
+import { GooeyMorphingSurface } from "./GooeyMorphingSurface/index.js";
 import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./waapi/core/animationConstants.js";
 import { useElementRegistry } from "./waapi/core/useElementRegistry.js";
 import { usePositionCapture } from "./waapi/core/usePositionCapture.js";

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.module.css

@@ -0,0 +1,20 @@
+/**
+ * View Transitions API - Default transition styles.
+ *
+ * These styles apply to all view-transition pseudo-elements by default,
+ * eliminating the need for dynamic style injection based on transition names.
+ *
+ * Usage: Apply `view-transition-name` via inline style or CSS variable:
+ *   <div style={{ viewTransitionName: 'hero' }}>...</div>
+ *
+ * Or via CSS:
+ *   .my-element { view-transition-name: hero; }
+ */
+
+/* Default animation for all view transitions */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
+}
+

package/dist/react-ui/ui/Badge/Badge.styles.d.ts

@@ -8,7 +8,7 @@ declare const badgeStyles: StyleSlots<BadgeSlot>;
  * @see {@link https://cva.style/docs/getting-started/variants}
  */
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export { badgeStyles, badgeVariants };

package/dist/react-ui/ui/Button/Button.styles.d.ts

@@ -8,8 +8,8 @@ declare const buttonStyles: StyleSlots<ButtonSlot>;
  * @see {@link https://cva.style/docs/getting-started/variants}
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "ghost" | "secondary" | "destructive" | "success" | "warning" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    variant?: "link" | "default" | "outline" | "success" | "destructive" | "warning" | "ghost" | "secondary" | "bare" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** State-specific style classes for Button. */
 declare const buttonStateStyles: {

package/dist/react-ui/ui/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/Button.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,+CAA+C;AAC/C,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,QAAA,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAExC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;8EAgCnB,CAAC;AAEF,+CAA+C;AAC/C,QAAA,MAAM,iBAAiB;;;CAGtB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAC3D,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/Button.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,+CAA+C;AAC/C,KAAK,UAAU,GAAG,MAAM,CAAC;AAEzB,QAAA,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAExC,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;8EAoCnB,CAAC;AAEF,+CAA+C;AAC/C,QAAA,MAAM,iBAAiB;;;CAGtB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAC3D,YAAY,EAAE,UAAU,EAAE,CAAC"}