@mks2508/mks-ui 0.7.0 → 0.8.1

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

@@ -0,0 +1,185 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import "./dot-matrix.js";
+import { DOT_MATRIX_PATTERNS, buildDelays } from "./patterns.js";
+import { useEffect, useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/DotMatrix/index.tsx
+/**
+* DotMatrix — pattern-driven rows×cols grid with progressive-fill cycle.
+*
+*   - Cells light up one at a time in `pattern` order (`wave-lr` fills
+*     left-to-right, `spiral-cw` fills outward-in, etc.). Once lit they
+*     stay on until the cycle resets.
+*   - While `status='running'` the root runs a single CSS animation
+*     that drives `--dm-phase` from 0 → 1 (fill) → held at 1 (hold) →
+*     snapped to 0 (reset/rest). Each cell computes its opacity from
+*     `(phase − threshold) × edgeSharpness`, where `threshold` is its
+*     position in the fill sequence (0..1). One animation per matrix
+*     regardless of cell count.
+*   - Status flips to `idle / success / failed / cancelled` swap to
+*     one-shot final keyframes that force EVERY cell to the status
+*     colour (all on for success, all destructive for failed, all
+*     muted for cancelled).
+*
+* @module @mks2508/mks-ui/react/primitives/DotMatrix
+*/
+const BLOOM_SVG_ID = "dm-bloom-svg";
+const DEFAULT_BLOOM = 2;
+function ensureBloomSvg() {
+	if (typeof document === "undefined") return null;
+	let svg = document.getElementById(BLOOM_SVG_ID);
+	if (svg) return svg;
+	const ns = "http://www.w3.org/2000/svg";
+	svg = document.createElementNS(ns, "svg");
+	svg.setAttribute("id", BLOOM_SVG_ID);
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden");
+	svg.appendChild(document.createElementNS(ns, "defs"));
+	document.body.appendChild(svg);
+	return svg;
+}
+function installBloomFilter(id, amount) {
+	const svg = ensureBloomSvg();
+	if (!svg) return;
+	const defs = svg.firstChild;
+	const existing = document.getElementById(id);
+	if (existing) existing.parentNode?.removeChild(existing);
+	const ns = "http://www.w3.org/2000/svg";
+	const filter = document.createElementNS(ns, "filter");
+	filter.setAttribute("id", id);
+	filter.setAttribute("x", "-100%");
+	filter.setAttribute("y", "-100%");
+	filter.setAttribute("width", "300%");
+	filter.setAttribute("height", "300%");
+	const matrix = document.createElementNS(ns, "feColorMatrix");
+	matrix.setAttribute("in", "SourceGraphic");
+	matrix.setAttribute("type", "matrix");
+	matrix.setAttribute("values", "2 0 0 0 -0.5 0 2 0 0 -0.5 0 0 2 0 -0.5 0 0 0 1 0");
+	matrix.setAttribute("result", "bright");
+	const blur = document.createElementNS(ns, "feGaussianBlur");
+	blur.setAttribute("in", "bright");
+	blur.setAttribute("stdDeviation", String(amount));
+	blur.setAttribute("result", "glow");
+	const blend = document.createElementNS(ns, "feBlend");
+	blend.setAttribute("in", "SourceGraphic");
+	blend.setAttribute("in2", "glow");
+	blend.setAttribute("mode", "screen");
+	filter.appendChild(matrix);
+	filter.appendChild(blur);
+	filter.appendChild(blend);
+	defs.appendChild(filter);
+}
+function removeBloomFilter(id) {
+	if (typeof document === "undefined") return;
+	const el = document.getElementById(id);
+	if (el) el.parentNode?.removeChild(el);
+}
+function computeAccentSet(rows, cols, count, row, positions) {
+	const set = /* @__PURE__ */ new Set();
+	if (positions?.length) {
+		for (const [r, c] of positions) if (r >= 0 && r < rows && c >= 0 && c < cols) set.add(r * cols + c);
+		return set;
+	}
+	const n = Math.max(0, Math.min(count, cols));
+	if (n === 0) return set;
+	const startCol = Math.floor((cols - n) / 2);
+	if (row === "top" || row === "both") for (let i = 0; i < n; i++) set.add(startCol + i);
+	if (row === "bottom" || row === "both") for (let i = 0; i < n; i++) set.add((rows - 1) * cols + startCol + i);
+	return set;
+}
+function DotMatrix({ rows = 6, cols = 18, pattern = "snake", patternStep = 120, holdSteps = 6, restSteps = 4, edgeSharpness = 50, progress, status = "running", color = "foreground", bloom = true, variant = "glow", accentCount = 0, accentRow = "top", accentPositions, slots, className, "aria-label": ariaLabel }) {
+	const total = rows * cols;
+	const reactId = useId().replace(/:/g, "");
+	const bloomFilterId = `dm-bloom-${reactId}`;
+	const kfPhaseName = `dmph-${reactId}`;
+	const accentSet = useMemo(() => computeAccentSet(rows, cols, accentCount, accentRow, accentPositions), [
+		rows,
+		cols,
+		accentCount,
+		accentRow,
+		accentPositions
+	]);
+	useEffect(() => {
+		if (!bloom) {
+			removeBloomFilter(bloomFilterId);
+			return;
+		}
+		installBloomFilter(bloomFilterId, typeof bloom === "number" ? bloom : DEFAULT_BLOOM);
+		return () => removeBloomFilter(bloomFilterId);
+	}, [bloom, bloomFilterId]);
+	const ranks = useMemo(() => buildDelays(pattern, rows, cols, 1), [
+		pattern,
+		rows,
+		cols
+	]);
+	const maxRank = ranks.length > 0 ? Math.max(...ranks) : 0;
+	const fillSteps = maxRank + 1;
+	const cycleSteps = Math.max(1, fillSteps + holdSteps + restSteps);
+	const cycleTotalMs = cycleSteps * patternStep;
+	const fillEndPct = fillSteps / cycleSteps * 100;
+	const holdEndPct = (fillSteps + holdSteps) / cycleSteps * 100;
+	const resetSnapPct = Math.min(100, holdEndPct + .05);
+	const keyframesCSS = useMemo(() => {
+		return `
+@keyframes ${kfPhaseName} {
+  0% { --dm-phase: 0; }
+  ${fillEndPct.toFixed(3)}% { --dm-phase: 1; }
+  ${holdEndPct.toFixed(3)}% { --dm-phase: 1; }
+  ${resetSnapPct.toFixed(3)}% { --dm-phase: 0; }
+  100% { --dm-phase: 0; }
+}`;
+	}, [
+		kfPhaseName,
+		fillEndPct,
+		holdEndPct,
+		resetSnapPct
+	]);
+	const finalStagger = useMemo(() => {
+		if (maxRank <= 0) return new Array(ranks.length).fill(0);
+		const w = 220;
+		return ranks.map((r) => Math.round(r / maxRank * w));
+	}, [ranks, maxRank]);
+	const N = Math.max(1, maxRank + 1);
+	const isControlled = typeof progress === "number";
+	const clampedProgress = isControlled ? Math.max(0, Math.min(1, progress)) : void 0;
+	const effectiveSharpness = isControlled ? N : edgeSharpness;
+	const rootStyle = {
+		gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+		["--dm-cycle-total"]: `${cycleTotalMs}ms`,
+		["--dm-edge-sharpness"]: String(effectiveSharpness),
+		...isControlled ? { ["--dm-phase"]: String(clampedProgress) } : { ["--dm-anim-phase"]: kfPhaseName },
+		...bloom ? { filter: `url(#${bloomFilterId})` } : {}
+	};
+	const paletteClass = paletteClassFor(color);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [!isControlled && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: keyframesCSS } }), /* @__PURE__ */ jsx("div", {
+		className: cn("dm-root", paletteClass, slots?.root, className),
+		style: rootStyle,
+		role: "img",
+		"aria-label": ariaLabel,
+		"data-status": status,
+		"data-variant": variant,
+		"data-pattern": pattern,
+		children: Array.from({ length: total }).map((_, i) => {
+			const rank = ranks[i] ?? 0;
+			const threshold = isControlled ? rank / N : maxRank > 0 ? rank / maxRank : 0;
+			return /* @__PURE__ */ jsx("div", {
+				"data-accent": accentSet.has(i) ? "true" : void 0,
+				className: cn("dm-cell", slots?.cell),
+				style: {
+					"--dm-threshold": threshold.toFixed(4),
+					"--dm-stagger-delay": `${finalStagger[i] ?? 0}ms`
+				}
+			}, i);
+		})
+	})] });
+}
+/** @internal */
+function paletteClassFor(color) {
+	return `dm--${color}`;
+}
+
+//#endregion
+export { DotMatrix };

package/dist/react-ui/primitives/DotMatrix/patterns.d.ts

@@ -0,0 +1,32 @@
+/**
+ * DotMatrix patterns — delay-field generators that scale any 3x3
+ * pattern from 3-pixel-grid (MetaHeavies) to arbitrary `rows × cols`.
+ *
+ * Each generator returns a flat array of length `rows × cols` indexed
+ * by physical position (`r * cols + c`). Values are delays in ms that
+ * tell the cycle engine *when* each cell flips on/off relative to the
+ * start of a phase.
+ *
+ * Reference: https://github.com/MetaHeavies/3-pixel-grid
+ *
+ * @module @mks2508/mks-ui/react/primitives/DotMatrix
+ */
+/** Available built-in patterns. */
+export type DotMatrixPattern = 'wave-lr' | 'wave-rl' | 'wave-tb' | 'wave-bt' | 'spiral-cw' | 'corners-first' | 'center-out' | 'diagonal-tl' | 'snake' | 'snake-up' | 'cross' | 'checkerboard' | 'rain' | 'pinwheel' | 'converge' | 'zigzag';
+/** Catalogue of all pattern names. Handy for UIs / debug labs. */
+export declare const DOT_MATRIX_PATTERNS: readonly DotMatrixPattern[];
+/**
+ * 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)
+ * ```
+ */
+export declare function buildDelays(pattern: DotMatrixPattern, rows: number, cols: number, step?: number): number[];
+//# sourceMappingURL=patterns.d.ts.map

package/dist/react-ui/primitives/DotMatrix/patterns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patterns.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/DotMatrix/patterns.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,mCAAmC;AACnC,MAAM,MAAM,gBAAgB,GACzB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,WAAW,GACX,eAAe,GACf,YAAY,GACZ,aAAa,GACb,OAAO,GACP,UAAU,GACV,OAAO,GACP,cAAc,GACd,MAAM,GACN,UAAU,GACV,UAAU,GACV,QAAQ,CAAC;AAEZ,kEAAkE;AAClE,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EAiBjD,CAAC;AA0CX;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAC1B,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,SAAK,GACP,MAAM,EAAE,CAgJV"}

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-surface-DfdjAg5U.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"}