@evolve.ui/core-components 1.0.0

package/SaveConfetti-DI0MTd63.mjs

@@ -0,0 +1,179 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/SaveConfetti/SaveConfetti.tsx
+const TARGET_FRAME_MS = 1e3 / 60;
+const PARTICLE_COUNT = 16;
+const TRAVEL_MIN = 50;
+const TRAVEL_MAX = 90;
+const GRAVITY_DROP = 18;
+const DURATION_MIN = 650;
+const DURATION_MAX = 950;
+const ANGLE_JITTER = .2;
+const OUTLINED_HEART_RATIO = .4;
+const COLOR_TOKENS = [
+	"--color-critical-500",
+	"--color-critical-300",
+	"--color-critical-200",
+	"--color-tertiary-400",
+	"--color-tertiary-200"
+];
+const FALLBACK_COLORS = [
+	"#CB3A2C",
+	"#E24B4A",
+	"#F09595",
+	"#D4537E",
+	"#EF9F27"
+];
+const resolveColors = () => {
+	const computed = getComputedStyle(document.documentElement);
+	return COLOR_TOKENS.map((token, i) => {
+		const raw = computed.getPropertyValue(token).trim();
+		if (!raw) return FALLBACK_COLORS[i];
+		const parts = raw.split(/\s+/);
+		return parts.length === 3 ? `rgb(${parts.join(", ")})` : FALLBACK_COLORS[i];
+	});
+};
+/** Draw a heart path centered at (0, 0) with the given half-size. */
+const drawHeartPath = (ctx, halfSize) => {
+	const s = halfSize;
+	ctx.beginPath();
+	ctx.moveTo(0, s * .4);
+	ctx.bezierCurveTo(-s * .1, s * .1, -s, -s * .3, -s, -s * .6);
+	ctx.bezierCurveTo(-s, -s * 1.1, 0, -s * .9, 0, -s * .5);
+	ctx.bezierCurveTo(0, -s * .9, s, -s * 1.1, s, -s * .6);
+	ctx.bezierCurveTo(s, -s * .3, s * .1, s * .1, 0, s * .4);
+	ctx.closePath();
+};
+const randomBetween = (min, max) => Math.random() * (max - min) + min;
+const createParticle = (anchorRect, angleIndex, colors) => {
+	const angle = angleIndex / PARTICLE_COUNT * Math.PI * 2 + randomBetween(-.2, ANGLE_JITTER);
+	const heartRoll = Math.random();
+	let shape;
+	if (heartRoll < OUTLINED_HEART_RATIO) shape = "heart-outlined";
+	else if (heartRoll < .7) shape = "heart-filled";
+	else shape = "circle";
+	const size = shape === "circle" ? randomBetween(2.5, 5.5) : randomBetween(11, 16) / 2;
+	return {
+		angle,
+		color: colors[Math.floor(Math.random() * colors.length)],
+		duration: randomBetween(DURATION_MIN, DURATION_MAX),
+		opacity: 1,
+		progress: 0,
+		shape,
+		size,
+		startX: anchorRect.left + anchorRect.width / 2,
+		startY: anchorRect.top + anchorRect.height / 2,
+		travel: randomBetween(TRAVEL_MIN, TRAVEL_MAX)
+	};
+};
+/**
+* Canvas-based mini confetti burst for the Save / FavoriteButton animated variant.
+*
+* Renders a fixed, pointer-events-none overlay canvas. Trigger a burst by calling
+* `ref.current.fire(buttonElement)`. The animation runs entirely outside React's
+* render cycle via requestAnimationFrame (tickRef pattern).
+*
+* Architecture mirrors `@evolve.ui/core-components/confetti` — canvas + rAF,
+* tickRef loop, frameScale normalization, createPortal, DPR scaling.
+* Physics differ: 16 heart/circle particles radiate outward from button center.
+*
+* @example
+* ```tsx
+* const confettiRef = useRef<SaveConfettiHandle>(null);
+* confettiRef.current?.fire(buttonElement);
+* return <SaveConfetti ref={confettiRef} />;
+* ```
+*/
+const SaveConfetti = forwardRef((_, ref) => {
+	const canvasRef = useRef(null);
+	const canvasContextRef = useRef(null);
+	const particlesRef = useRef([]);
+	const animationFrameRef = useRef(null);
+	const lastTimestampRef = useRef(0);
+	const colorsRef = useRef([]);
+	const [mounted, setMounted] = useState(false);
+	const tickRef = useRef(() => {});
+	tickRef.current = (timestamp) => {
+		const ctx = canvasContextRef.current;
+		if (!ctx) return;
+		const frameScale = lastTimestampRef.current === 0 ? 1 : Math.min((timestamp - lastTimestampRef.current) / TARGET_FRAME_MS, 2);
+		lastTimestampRef.current = timestamp;
+		ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+		particlesRef.current = particlesRef.current.filter((p) => p.progress < 1);
+		for (const particle of particlesRef.current) {
+			const progressDelta = frameScale * TARGET_FRAME_MS / particle.duration;
+			particle.progress = Math.min(particle.progress + progressDelta, 1);
+			const t = particle.progress;
+			const eased = 1 - Math.pow(1 - t, 3);
+			const x = particle.startX + Math.cos(particle.angle) * particle.travel * eased;
+			const y = particle.startY + Math.sin(particle.angle) * particle.travel * eased + GRAVITY_DROP * eased;
+			const scale = t < .5 ? .2 + .8 * (t / .5) : 1 - .44999999999999996 * ((t - .5) / .5);
+			const opacity = t < .7 ? 1 : 1 - (t - .7) / .3;
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.globalAlpha = Math.max(0, opacity);
+			ctx.fillStyle = particle.color;
+			ctx.strokeStyle = particle.color;
+			ctx.lineWidth = 1.5;
+			if (particle.shape === "circle") {
+				ctx.beginPath();
+				ctx.arc(0, 0, particle.size * scale, 0, Math.PI * 2);
+				ctx.fill();
+			} else {
+				ctx.scale(scale, scale);
+				drawHeartPath(ctx, particle.size);
+				if (particle.shape === "heart-outlined") ctx.stroke();
+				else ctx.fill();
+			}
+			ctx.restore();
+		}
+		if (particlesRef.current.length > 0) animationFrameRef.current = requestAnimationFrame(tickRef.current);
+		else {
+			animationFrameRef.current = null;
+			lastTimestampRef.current = 0;
+		}
+	};
+	useImperativeHandle(ref, () => ({ fire(anchor) {
+		if (!canvasRef.current) return;
+		if (colorsRef.current.length === 0) colorsRef.current = resolveColors();
+		const rect = anchor.getBoundingClientRect();
+		for (let i = 0; i < PARTICLE_COUNT; i++) particlesRef.current.push(createParticle(rect, i, colorsRef.current));
+		if (animationFrameRef.current === null) {
+			lastTimestampRef.current = 0;
+			animationFrameRef.current = requestAnimationFrame(tickRef.current);
+		}
+	} }));
+	useEffect(() => {
+		setMounted(true);
+		if (!canvasRef.current) return;
+		const setupCanvas = () => {
+			if (!canvasRef.current) return;
+			const dpr = window.devicePixelRatio ?? 1;
+			canvasRef.current.width = window.innerWidth * dpr;
+			canvasRef.current.height = window.innerHeight * dpr;
+			const ctx = canvasRef.current.getContext("2d");
+			ctx?.scale(dpr, dpr);
+			canvasContextRef.current = ctx;
+		};
+		setupCanvas();
+		window.addEventListener("resize", setupCanvas);
+		return () => {
+			window.removeEventListener("resize", setupCanvas);
+			if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+		};
+	}, [mounted]);
+	if (!mounted) return null;
+	return createPortal(/* @__PURE__ */ jsx("canvas", {
+		"aria-hidden": "true",
+		className: "pointer-events-none fixed inset-0 z-[9999] h-screen w-screen",
+		"data-hui-id": "SaveConfetti",
+		"data-testid": "save-confetti-canvas",
+		ref: canvasRef
+	}), document.body);
+});
+SaveConfetti.displayName = "SaveConfetti";
+//#endregion
+export { SaveConfetti as t };
+
+//# sourceMappingURL=SaveConfetti-DI0MTd63.mjs.map

package/SaveConfetti-DI0MTd63.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveConfetti-DI0MTd63.mjs","names":[],"sources":["../src/SaveConfetti/SaveConfetti.tsx"],"sourcesContent":["import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\n// Physics constants authored at 60 fps; frameScale normalizes to any refresh rate.\nconst TARGET_FRAME_MS = 1000 / 60;\nconst PARTICLE_COUNT = 16;\nconst TRAVEL_MIN = 50;\nconst TRAVEL_MAX = 90;\n// Downward gravity bias added on top of radial travel (px)\nconst GRAVITY_DROP = 18;\nconst DURATION_MIN = 650;\nconst DURATION_MAX = 950;\n// ±radians of angle jitter per particle\nconst ANGLE_JITTER = 0.2;\n// Roughly 40% of hearts are outlined\nconst OUTLINED_HEART_RATIO = 0.4;\n\n// CSS custom property names from the theme system (space-separated RGB, Tailwind format).\n// Resolved at mount time via getComputedStyle so the canvas always uses the active theme values.\nconst COLOR_TOKENS = [\n    '--color-critical-500',\n    '--color-critical-300',\n    '--color-critical-200',\n    '--color-tertiary-400',\n    '--color-tertiary-200',\n] as const;\n\n// Per-token fallbacks so particles remain visually distinct if CSS variables fail to resolve.\nconst FALLBACK_COLORS = ['#CB3A2C', '#E24B4A', '#F09595', '#D4537E', '#EF9F27'] as const;\n\nconst resolveColors = (): readonly string[] => {\n    const computed = getComputedStyle(document.documentElement);\n    return COLOR_TOKENS.map((token, i) => {\n        const raw = computed.getPropertyValue(token).trim();\n        if (!raw) {\n            return FALLBACK_COLORS[i];\n        }\n        // CSS vars use space-separated RGB (\"204 47 40\"). Normalise to rgb(r, g, b) with\n        // commas so canvas fillStyle recognises it in all browsers (CSS1/2/3 compat;\n        // CSS4 space-separated syntax is silently ignored by some canvas implementations).\n        const parts = raw.split(/\\s+/);\n        return parts.length === 3 ? `rgb(${parts.join(', ')})` : FALLBACK_COLORS[i];\n    });\n};\n\ntype ParticleShape = 'circle' | 'heart-filled' | 'heart-outlined';\n\ntype Particle = {\n    angle: number;\n    color: string;\n    duration: number;\n    opacity: number;\n    /** Normalized elapsed time [0, 1] within the particle's own duration */\n    progress: number;\n    shape: ParticleShape;\n    /** px — circle radius or heart bounding half-size */\n    size: number;\n    startX: number;\n    startY: number;\n    travel: number;\n};\n\nexport type SaveConfettiHandle = {\n    /** Trigger a mini confetti burst originating from the center of `anchor`. */\n    fire: (anchor: HTMLElement) => void;\n};\n\n/** Draw a heart path centered at (0, 0) with the given half-size. */\nconst drawHeartPath = (ctx: CanvasRenderingContext2D, halfSize: number) => {\n    const s = halfSize;\n    ctx.beginPath();\n    ctx.moveTo(0, s * 0.4);\n    ctx.bezierCurveTo(-s * 0.1, s * 0.1, -s, -s * 0.3, -s, -s * 0.6);\n    ctx.bezierCurveTo(-s, -s * 1.1, 0, -s * 0.9, 0, -s * 0.5);\n    ctx.bezierCurveTo(0, -s * 0.9, s, -s * 1.1, s, -s * 0.6);\n    ctx.bezierCurveTo(s, -s * 0.3, s * 0.1, s * 0.1, 0, s * 0.4);\n    ctx.closePath();\n};\n\nconst randomBetween = (min: number, max: number) => Math.random() * (max - min) + min;\n\nconst createParticle = (anchorRect: DOMRect, angleIndex: number, colors: readonly string[]): Particle => {\n    const baseAngle = (angleIndex / PARTICLE_COUNT) * Math.PI * 2;\n    const angle = baseAngle + randomBetween(-ANGLE_JITTER, ANGLE_JITTER);\n\n    const heartRoll = Math.random();\n    let shape: ParticleShape;\n    if (heartRoll < OUTLINED_HEART_RATIO) {\n        shape = 'heart-outlined';\n    } else if (heartRoll < 0.7) {\n        shape = 'heart-filled';\n    } else {\n        shape = 'circle';\n    }\n\n    const size = shape === 'circle' ? randomBetween(2.5, 5.5) : randomBetween(11, 16) / 2;\n\n    return {\n        angle,\n        color: colors[Math.floor(Math.random() * colors.length)],\n        duration: randomBetween(DURATION_MIN, DURATION_MAX),\n        opacity: 1,\n        progress: 0,\n        shape,\n        size,\n        startX: anchorRect.left + anchorRect.width / 2,\n        startY: anchorRect.top + anchorRect.height / 2,\n        travel: randomBetween(TRAVEL_MIN, TRAVEL_MAX),\n    };\n};\n\n/**\n * Canvas-based mini confetti burst for the Save / FavoriteButton animated variant.\n *\n * Renders a fixed, pointer-events-none overlay canvas. Trigger a burst by calling\n * `ref.current.fire(buttonElement)`. The animation runs entirely outside React's\n * render cycle via requestAnimationFrame (tickRef pattern).\n *\n * Architecture mirrors `@evolve.ui/core-components/confetti` — canvas + rAF,\n * tickRef loop, frameScale normalization, createPortal, DPR scaling.\n * Physics differ: 16 heart/circle particles radiate outward from button center.\n *\n * @example\n * ```tsx\n * const confettiRef = useRef<SaveConfettiHandle>(null);\n * confettiRef.current?.fire(buttonElement);\n * return <SaveConfetti ref={confettiRef} />;\n * ```\n */\nexport const SaveConfetti = forwardRef<SaveConfettiHandle>((_, ref) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const canvasContextRef = useRef<CanvasRenderingContext2D | null>(null);\n    const particlesRef = useRef<Particle[]>([]);\n    const animationFrameRef = useRef<number | null>(null);\n    const lastTimestampRef = useRef<number>(0);\n    // Colors resolved once at first canvas setup (guarantees DOM + stylesheets are ready)\n    const colorsRef = useRef<readonly string[]>([]);\n\n    // SSR guard: returns null until client has mounted (canvas APIs unavailable server-side)\n    const [mounted, setMounted] = useState(false);\n\n    // tickRef holds the rAF loop so it can recurse without closure staleness.\n    // Assigning on every render means the loop always sees the latest refs — intentional.\n    const tickRef = useRef<(timestamp: number) => void>(() => {});\n    tickRef.current = (timestamp: number) => {\n        const ctx = canvasContextRef.current;\n        if (!ctx) {\n            return;\n        }\n\n        // Normalize physics to 60fps. Cap at 2× so a tab-switch pause doesn't teleport particles.\n        const frameScale =\n            lastTimestampRef.current === 0 ? 1 : Math.min((timestamp - lastTimestampRef.current) / TARGET_FRAME_MS, 2);\n        lastTimestampRef.current = timestamp;\n\n        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);\n\n        particlesRef.current = particlesRef.current.filter((p) => p.progress < 1);\n\n        for (const particle of particlesRef.current) {\n            const progressDelta = (frameScale * TARGET_FRAME_MS) / particle.duration;\n            particle.progress = Math.min(particle.progress + progressDelta, 1);\n            const t = particle.progress;\n\n            // Ease-out cubic approximation of cubic-bezier(0.16, 1, 0.3, 1)\n            const eased = 1 - Math.pow(1 - t, 3);\n\n            // Radial position + downward gravity component\n            const x = particle.startX + Math.cos(particle.angle) * particle.travel * eased;\n            const y = particle.startY + Math.sin(particle.angle) * particle.travel * eased + GRAVITY_DROP * eased;\n\n            // Scale curve: 0.2 → 1 (first half) → 0.55 (second half)\n            const scale = t < 0.5 ? 0.2 + (1 - 0.2) * (t / 0.5) : 1 - (1 - 0.55) * ((t - 0.5) / 0.5);\n\n            // Opacity: holds at 1 for first 70%, fades over last 30%\n            const opacity = t < 0.7 ? 1 : 1 - (t - 0.7) / 0.3;\n\n            ctx.save();\n            ctx.translate(x, y);\n            ctx.globalAlpha = Math.max(0, opacity);\n            ctx.fillStyle = particle.color;\n            ctx.strokeStyle = particle.color;\n            ctx.lineWidth = 1.5;\n\n            if (particle.shape === 'circle') {\n                ctx.beginPath();\n                ctx.arc(0, 0, particle.size * scale, 0, Math.PI * 2);\n                ctx.fill();\n            } else {\n                ctx.scale(scale, scale);\n                drawHeartPath(ctx, particle.size);\n                if (particle.shape === 'heart-outlined') {\n                    ctx.stroke();\n                } else {\n                    ctx.fill();\n                }\n            }\n\n            ctx.restore();\n        }\n\n        if (particlesRef.current.length > 0) {\n            animationFrameRef.current = requestAnimationFrame(tickRef.current);\n        } else {\n            animationFrameRef.current = null;\n            lastTimestampRef.current = 0;\n        }\n    };\n\n    useImperativeHandle(ref, () => ({\n        fire(anchor: HTMLElement) {\n            if (!canvasRef.current) {\n                return;\n            }\n            // Resolve colors on first fire (guarantees document styles are fully loaded)\n            if (colorsRef.current.length === 0) {\n                colorsRef.current = resolveColors();\n            }\n            const rect = anchor.getBoundingClientRect();\n            for (let i = 0; i < PARTICLE_COUNT; i++) {\n                particlesRef.current.push(createParticle(rect, i, colorsRef.current));\n            }\n            if (animationFrameRef.current === null) {\n                lastTimestampRef.current = 0;\n                animationFrameRef.current = requestAnimationFrame(tickRef.current);\n            }\n        },\n    }));\n\n    useEffect(() => {\n        setMounted(true);\n\n        const canvas = canvasRef.current;\n        if (!canvas) {\n            return;\n        }\n\n        const setupCanvas = () => {\n            if (!canvasRef.current) {\n                return;\n            }\n            const dpr = window.devicePixelRatio ?? 1;\n            canvasRef.current.width = window.innerWidth * dpr;\n            canvasRef.current.height = window.innerHeight * dpr;\n            const ctx = canvasRef.current.getContext('2d');\n            ctx?.scale(dpr, dpr);\n            canvasContextRef.current = ctx;\n        };\n\n        setupCanvas();\n\n        window.addEventListener('resize', setupCanvas);\n        return () => {\n            window.removeEventListener('resize', setupCanvas);\n            if (animationFrameRef.current !== null) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, [mounted]);\n\n    if (!mounted) {\n        return null;\n    }\n\n    return createPortal(\n        <canvas\n            aria-hidden=\"true\"\n            className=\"pointer-events-none fixed inset-0 z-[9999] h-screen w-screen\"\n            data-hui-id=\"SaveConfetti\"\n            data-testid=\"save-confetti-canvas\"\n            ref={canvasRef}\n        />,\n        document.body\n    );\n});\n\nSaveConfetti.displayName = 'SaveConfetti';\n"],"mappings":"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"}

package/SaveConfetti-DSJtuE3b.cjs

@@ -0,0 +1,184 @@
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region src/SaveConfetti/SaveConfetti.tsx
+const TARGET_FRAME_MS = 1e3 / 60;
+const PARTICLE_COUNT = 16;
+const TRAVEL_MIN = 50;
+const TRAVEL_MAX = 90;
+const GRAVITY_DROP = 18;
+const DURATION_MIN = 650;
+const DURATION_MAX = 950;
+const ANGLE_JITTER = .2;
+const OUTLINED_HEART_RATIO = .4;
+const COLOR_TOKENS = [
+	"--color-critical-500",
+	"--color-critical-300",
+	"--color-critical-200",
+	"--color-tertiary-400",
+	"--color-tertiary-200"
+];
+const FALLBACK_COLORS = [
+	"#CB3A2C",
+	"#E24B4A",
+	"#F09595",
+	"#D4537E",
+	"#EF9F27"
+];
+const resolveColors = () => {
+	const computed = getComputedStyle(document.documentElement);
+	return COLOR_TOKENS.map((token, i) => {
+		const raw = computed.getPropertyValue(token).trim();
+		if (!raw) return FALLBACK_COLORS[i];
+		const parts = raw.split(/\s+/);
+		return parts.length === 3 ? `rgb(${parts.join(", ")})` : FALLBACK_COLORS[i];
+	});
+};
+/** Draw a heart path centered at (0, 0) with the given half-size. */
+const drawHeartPath = (ctx, halfSize) => {
+	const s = halfSize;
+	ctx.beginPath();
+	ctx.moveTo(0, s * .4);
+	ctx.bezierCurveTo(-s * .1, s * .1, -s, -s * .3, -s, -s * .6);
+	ctx.bezierCurveTo(-s, -s * 1.1, 0, -s * .9, 0, -s * .5);
+	ctx.bezierCurveTo(0, -s * .9, s, -s * 1.1, s, -s * .6);
+	ctx.bezierCurveTo(s, -s * .3, s * .1, s * .1, 0, s * .4);
+	ctx.closePath();
+};
+const randomBetween = (min, max) => Math.random() * (max - min) + min;
+const createParticle = (anchorRect, angleIndex, colors) => {
+	const angle = angleIndex / PARTICLE_COUNT * Math.PI * 2 + randomBetween(-.2, ANGLE_JITTER);
+	const heartRoll = Math.random();
+	let shape;
+	if (heartRoll < OUTLINED_HEART_RATIO) shape = "heart-outlined";
+	else if (heartRoll < .7) shape = "heart-filled";
+	else shape = "circle";
+	const size = shape === "circle" ? randomBetween(2.5, 5.5) : randomBetween(11, 16) / 2;
+	return {
+		angle,
+		color: colors[Math.floor(Math.random() * colors.length)],
+		duration: randomBetween(DURATION_MIN, DURATION_MAX),
+		opacity: 1,
+		progress: 0,
+		shape,
+		size,
+		startX: anchorRect.left + anchorRect.width / 2,
+		startY: anchorRect.top + anchorRect.height / 2,
+		travel: randomBetween(TRAVEL_MIN, TRAVEL_MAX)
+	};
+};
+/**
+* Canvas-based mini confetti burst for the Save / FavoriteButton animated variant.
+*
+* Renders a fixed, pointer-events-none overlay canvas. Trigger a burst by calling
+* `ref.current.fire(buttonElement)`. The animation runs entirely outside React's
+* render cycle via requestAnimationFrame (tickRef pattern).
+*
+* Architecture mirrors `@evolve.ui/core-components/confetti` — canvas + rAF,
+* tickRef loop, frameScale normalization, createPortal, DPR scaling.
+* Physics differ: 16 heart/circle particles radiate outward from button center.
+*
+* @example
+* ```tsx
+* const confettiRef = useRef<SaveConfettiHandle>(null);
+* confettiRef.current?.fire(buttonElement);
+* return <SaveConfetti ref={confettiRef} />;
+* ```
+*/
+const SaveConfetti = (0, react.forwardRef)((_, ref) => {
+	const canvasRef = (0, react.useRef)(null);
+	const canvasContextRef = (0, react.useRef)(null);
+	const particlesRef = (0, react.useRef)([]);
+	const animationFrameRef = (0, react.useRef)(null);
+	const lastTimestampRef = (0, react.useRef)(0);
+	const colorsRef = (0, react.useRef)([]);
+	const [mounted, setMounted] = (0, react.useState)(false);
+	const tickRef = (0, react.useRef)(() => {});
+	tickRef.current = (timestamp) => {
+		const ctx = canvasContextRef.current;
+		if (!ctx) return;
+		const frameScale = lastTimestampRef.current === 0 ? 1 : Math.min((timestamp - lastTimestampRef.current) / TARGET_FRAME_MS, 2);
+		lastTimestampRef.current = timestamp;
+		ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+		particlesRef.current = particlesRef.current.filter((p) => p.progress < 1);
+		for (const particle of particlesRef.current) {
+			const progressDelta = frameScale * TARGET_FRAME_MS / particle.duration;
+			particle.progress = Math.min(particle.progress + progressDelta, 1);
+			const t = particle.progress;
+			const eased = 1 - Math.pow(1 - t, 3);
+			const x = particle.startX + Math.cos(particle.angle) * particle.travel * eased;
+			const y = particle.startY + Math.sin(particle.angle) * particle.travel * eased + GRAVITY_DROP * eased;
+			const scale = t < .5 ? .2 + .8 * (t / .5) : 1 - .44999999999999996 * ((t - .5) / .5);
+			const opacity = t < .7 ? 1 : 1 - (t - .7) / .3;
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.globalAlpha = Math.max(0, opacity);
+			ctx.fillStyle = particle.color;
+			ctx.strokeStyle = particle.color;
+			ctx.lineWidth = 1.5;
+			if (particle.shape === "circle") {
+				ctx.beginPath();
+				ctx.arc(0, 0, particle.size * scale, 0, Math.PI * 2);
+				ctx.fill();
+			} else {
+				ctx.scale(scale, scale);
+				drawHeartPath(ctx, particle.size);
+				if (particle.shape === "heart-outlined") ctx.stroke();
+				else ctx.fill();
+			}
+			ctx.restore();
+		}
+		if (particlesRef.current.length > 0) animationFrameRef.current = requestAnimationFrame(tickRef.current);
+		else {
+			animationFrameRef.current = null;
+			lastTimestampRef.current = 0;
+		}
+	};
+	(0, react.useImperativeHandle)(ref, () => ({ fire(anchor) {
+		if (!canvasRef.current) return;
+		if (colorsRef.current.length === 0) colorsRef.current = resolveColors();
+		const rect = anchor.getBoundingClientRect();
+		for (let i = 0; i < PARTICLE_COUNT; i++) particlesRef.current.push(createParticle(rect, i, colorsRef.current));
+		if (animationFrameRef.current === null) {
+			lastTimestampRef.current = 0;
+			animationFrameRef.current = requestAnimationFrame(tickRef.current);
+		}
+	} }));
+	(0, react.useEffect)(() => {
+		setMounted(true);
+		if (!canvasRef.current) return;
+		const setupCanvas = () => {
+			if (!canvasRef.current) return;
+			const dpr = window.devicePixelRatio ?? 1;
+			canvasRef.current.width = window.innerWidth * dpr;
+			canvasRef.current.height = window.innerHeight * dpr;
+			const ctx = canvasRef.current.getContext("2d");
+			ctx?.scale(dpr, dpr);
+			canvasContextRef.current = ctx;
+		};
+		setupCanvas();
+		window.addEventListener("resize", setupCanvas);
+		return () => {
+			window.removeEventListener("resize", setupCanvas);
+			if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);
+		};
+	}, [mounted]);
+	if (!mounted) return null;
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		"aria-hidden": "true",
+		className: "pointer-events-none fixed inset-0 z-[9999] h-screen w-screen",
+		"data-hui-id": "SaveConfetti",
+		"data-testid": "save-confetti-canvas",
+		ref: canvasRef
+	}), document.body);
+});
+SaveConfetti.displayName = "SaveConfetti";
+//#endregion
+Object.defineProperty(exports, "SaveConfetti", {
+	enumerable: true,
+	get: function() {
+		return SaveConfetti;
+	}
+});
+
+//# sourceMappingURL=SaveConfetti-DSJtuE3b.cjs.map

package/SaveConfetti-DSJtuE3b.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveConfetti-DSJtuE3b.cjs","names":[],"sources":["../src/SaveConfetti/SaveConfetti.tsx"],"sourcesContent":["import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\n// Physics constants authored at 60 fps; frameScale normalizes to any refresh rate.\nconst TARGET_FRAME_MS = 1000 / 60;\nconst PARTICLE_COUNT = 16;\nconst TRAVEL_MIN = 50;\nconst TRAVEL_MAX = 90;\n// Downward gravity bias added on top of radial travel (px)\nconst GRAVITY_DROP = 18;\nconst DURATION_MIN = 650;\nconst DURATION_MAX = 950;\n// ±radians of angle jitter per particle\nconst ANGLE_JITTER = 0.2;\n// Roughly 40% of hearts are outlined\nconst OUTLINED_HEART_RATIO = 0.4;\n\n// CSS custom property names from the theme system (space-separated RGB, Tailwind format).\n// Resolved at mount time via getComputedStyle so the canvas always uses the active theme values.\nconst COLOR_TOKENS = [\n    '--color-critical-500',\n    '--color-critical-300',\n    '--color-critical-200',\n    '--color-tertiary-400',\n    '--color-tertiary-200',\n] as const;\n\n// Per-token fallbacks so particles remain visually distinct if CSS variables fail to resolve.\nconst FALLBACK_COLORS = ['#CB3A2C', '#E24B4A', '#F09595', '#D4537E', '#EF9F27'] as const;\n\nconst resolveColors = (): readonly string[] => {\n    const computed = getComputedStyle(document.documentElement);\n    return COLOR_TOKENS.map((token, i) => {\n        const raw = computed.getPropertyValue(token).trim();\n        if (!raw) {\n            return FALLBACK_COLORS[i];\n        }\n        // CSS vars use space-separated RGB (\"204 47 40\"). Normalise to rgb(r, g, b) with\n        // commas so canvas fillStyle recognises it in all browsers (CSS1/2/3 compat;\n        // CSS4 space-separated syntax is silently ignored by some canvas implementations).\n        const parts = raw.split(/\\s+/);\n        return parts.length === 3 ? `rgb(${parts.join(', ')})` : FALLBACK_COLORS[i];\n    });\n};\n\ntype ParticleShape = 'circle' | 'heart-filled' | 'heart-outlined';\n\ntype Particle = {\n    angle: number;\n    color: string;\n    duration: number;\n    opacity: number;\n    /** Normalized elapsed time [0, 1] within the particle's own duration */\n    progress: number;\n    shape: ParticleShape;\n    /** px — circle radius or heart bounding half-size */\n    size: number;\n    startX: number;\n    startY: number;\n    travel: number;\n};\n\nexport type SaveConfettiHandle = {\n    /** Trigger a mini confetti burst originating from the center of `anchor`. */\n    fire: (anchor: HTMLElement) => void;\n};\n\n/** Draw a heart path centered at (0, 0) with the given half-size. */\nconst drawHeartPath = (ctx: CanvasRenderingContext2D, halfSize: number) => {\n    const s = halfSize;\n    ctx.beginPath();\n    ctx.moveTo(0, s * 0.4);\n    ctx.bezierCurveTo(-s * 0.1, s * 0.1, -s, -s * 0.3, -s, -s * 0.6);\n    ctx.bezierCurveTo(-s, -s * 1.1, 0, -s * 0.9, 0, -s * 0.5);\n    ctx.bezierCurveTo(0, -s * 0.9, s, -s * 1.1, s, -s * 0.6);\n    ctx.bezierCurveTo(s, -s * 0.3, s * 0.1, s * 0.1, 0, s * 0.4);\n    ctx.closePath();\n};\n\nconst randomBetween = (min: number, max: number) => Math.random() * (max - min) + min;\n\nconst createParticle = (anchorRect: DOMRect, angleIndex: number, colors: readonly string[]): Particle => {\n    const baseAngle = (angleIndex / PARTICLE_COUNT) * Math.PI * 2;\n    const angle = baseAngle + randomBetween(-ANGLE_JITTER, ANGLE_JITTER);\n\n    const heartRoll = Math.random();\n    let shape: ParticleShape;\n    if (heartRoll < OUTLINED_HEART_RATIO) {\n        shape = 'heart-outlined';\n    } else if (heartRoll < 0.7) {\n        shape = 'heart-filled';\n    } else {\n        shape = 'circle';\n    }\n\n    const size = shape === 'circle' ? randomBetween(2.5, 5.5) : randomBetween(11, 16) / 2;\n\n    return {\n        angle,\n        color: colors[Math.floor(Math.random() * colors.length)],\n        duration: randomBetween(DURATION_MIN, DURATION_MAX),\n        opacity: 1,\n        progress: 0,\n        shape,\n        size,\n        startX: anchorRect.left + anchorRect.width / 2,\n        startY: anchorRect.top + anchorRect.height / 2,\n        travel: randomBetween(TRAVEL_MIN, TRAVEL_MAX),\n    };\n};\n\n/**\n * Canvas-based mini confetti burst for the Save / FavoriteButton animated variant.\n *\n * Renders a fixed, pointer-events-none overlay canvas. Trigger a burst by calling\n * `ref.current.fire(buttonElement)`. The animation runs entirely outside React's\n * render cycle via requestAnimationFrame (tickRef pattern).\n *\n * Architecture mirrors `@evolve.ui/core-components/confetti` — canvas + rAF,\n * tickRef loop, frameScale normalization, createPortal, DPR scaling.\n * Physics differ: 16 heart/circle particles radiate outward from button center.\n *\n * @example\n * ```tsx\n * const confettiRef = useRef<SaveConfettiHandle>(null);\n * confettiRef.current?.fire(buttonElement);\n * return <SaveConfetti ref={confettiRef} />;\n * ```\n */\nexport const SaveConfetti = forwardRef<SaveConfettiHandle>((_, ref) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const canvasContextRef = useRef<CanvasRenderingContext2D | null>(null);\n    const particlesRef = useRef<Particle[]>([]);\n    const animationFrameRef = useRef<number | null>(null);\n    const lastTimestampRef = useRef<number>(0);\n    // Colors resolved once at first canvas setup (guarantees DOM + stylesheets are ready)\n    const colorsRef = useRef<readonly string[]>([]);\n\n    // SSR guard: returns null until client has mounted (canvas APIs unavailable server-side)\n    const [mounted, setMounted] = useState(false);\n\n    // tickRef holds the rAF loop so it can recurse without closure staleness.\n    // Assigning on every render means the loop always sees the latest refs — intentional.\n    const tickRef = useRef<(timestamp: number) => void>(() => {});\n    tickRef.current = (timestamp: number) => {\n        const ctx = canvasContextRef.current;\n        if (!ctx) {\n            return;\n        }\n\n        // Normalize physics to 60fps. Cap at 2× so a tab-switch pause doesn't teleport particles.\n        const frameScale =\n            lastTimestampRef.current === 0 ? 1 : Math.min((timestamp - lastTimestampRef.current) / TARGET_FRAME_MS, 2);\n        lastTimestampRef.current = timestamp;\n\n        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);\n\n        particlesRef.current = particlesRef.current.filter((p) => p.progress < 1);\n\n        for (const particle of particlesRef.current) {\n            const progressDelta = (frameScale * TARGET_FRAME_MS) / particle.duration;\n            particle.progress = Math.min(particle.progress + progressDelta, 1);\n            const t = particle.progress;\n\n            // Ease-out cubic approximation of cubic-bezier(0.16, 1, 0.3, 1)\n            const eased = 1 - Math.pow(1 - t, 3);\n\n            // Radial position + downward gravity component\n            const x = particle.startX + Math.cos(particle.angle) * particle.travel * eased;\n            const y = particle.startY + Math.sin(particle.angle) * particle.travel * eased + GRAVITY_DROP * eased;\n\n            // Scale curve: 0.2 → 1 (first half) → 0.55 (second half)\n            const scale = t < 0.5 ? 0.2 + (1 - 0.2) * (t / 0.5) : 1 - (1 - 0.55) * ((t - 0.5) / 0.5);\n\n            // Opacity: holds at 1 for first 70%, fades over last 30%\n            const opacity = t < 0.7 ? 1 : 1 - (t - 0.7) / 0.3;\n\n            ctx.save();\n            ctx.translate(x, y);\n            ctx.globalAlpha = Math.max(0, opacity);\n            ctx.fillStyle = particle.color;\n            ctx.strokeStyle = particle.color;\n            ctx.lineWidth = 1.5;\n\n            if (particle.shape === 'circle') {\n                ctx.beginPath();\n                ctx.arc(0, 0, particle.size * scale, 0, Math.PI * 2);\n                ctx.fill();\n            } else {\n                ctx.scale(scale, scale);\n                drawHeartPath(ctx, particle.size);\n                if (particle.shape === 'heart-outlined') {\n                    ctx.stroke();\n                } else {\n                    ctx.fill();\n                }\n            }\n\n            ctx.restore();\n        }\n\n        if (particlesRef.current.length > 0) {\n            animationFrameRef.current = requestAnimationFrame(tickRef.current);\n        } else {\n            animationFrameRef.current = null;\n            lastTimestampRef.current = 0;\n        }\n    };\n\n    useImperativeHandle(ref, () => ({\n        fire(anchor: HTMLElement) {\n            if (!canvasRef.current) {\n                return;\n            }\n            // Resolve colors on first fire (guarantees document styles are fully loaded)\n            if (colorsRef.current.length === 0) {\n                colorsRef.current = resolveColors();\n            }\n            const rect = anchor.getBoundingClientRect();\n            for (let i = 0; i < PARTICLE_COUNT; i++) {\n                particlesRef.current.push(createParticle(rect, i, colorsRef.current));\n            }\n            if (animationFrameRef.current === null) {\n                lastTimestampRef.current = 0;\n                animationFrameRef.current = requestAnimationFrame(tickRef.current);\n            }\n        },\n    }));\n\n    useEffect(() => {\n        setMounted(true);\n\n        const canvas = canvasRef.current;\n        if (!canvas) {\n            return;\n        }\n\n        const setupCanvas = () => {\n            if (!canvasRef.current) {\n                return;\n            }\n            const dpr = window.devicePixelRatio ?? 1;\n            canvasRef.current.width = window.innerWidth * dpr;\n            canvasRef.current.height = window.innerHeight * dpr;\n            const ctx = canvasRef.current.getContext('2d');\n            ctx?.scale(dpr, dpr);\n            canvasContextRef.current = ctx;\n        };\n\n        setupCanvas();\n\n        window.addEventListener('resize', setupCanvas);\n        return () => {\n            window.removeEventListener('resize', setupCanvas);\n            if (animationFrameRef.current !== null) {\n                cancelAnimationFrame(animationFrameRef.current);\n            }\n        };\n    }, [mounted]);\n\n    if (!mounted) {\n        return null;\n    }\n\n    return createPortal(\n        <canvas\n            aria-hidden=\"true\"\n            className=\"pointer-events-none fixed inset-0 z-[9999] h-screen w-screen\"\n            data-hui-id=\"SaveConfetti\"\n            data-testid=\"save-confetti-canvas\"\n            ref={canvasRef}\n        />,\n        document.body\n    );\n});\n\nSaveConfetti.displayName = 'SaveConfetti';\n"],"mappings":"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"}

package/SearchInput-DYIPC8Cd.d.cts

@@ -0,0 +1,126 @@
+import { i as IconWeight } from "./IconBase-C_Lx9rDx.cjs";
+import { ReactNode, RefObject } from "react";
+
+//#region src/SearchInput/SearchInput.d.ts
+type Props = {
+  /**
+   * Changes the aria label for the `<button>` element
+   *
+   * @default 'Search button'
+   */
+  'button-aria-label'?: string;
+  className?: string;
+  /**
+   * Allows you to add a data-testid to the component
+   */
+  ['data-testid']?: string;
+  /**
+   * If true, the search input will be disabled
+   */
+  disabled?: boolean;
+  /**
+   * Input emphasis. Currently supports subtle and bold. Defaults to subtle.
+   */
+  emphasis?: 'subtle' | 'bold';
+  /**
+   * Custom content rendered inside the input on the right, before the search button
+   * (e.g. an extra action icon).
+   */
+  endAdornment?: ReactNode;
+  /**
+   * Style variant for the icon. Can be either 'regular' (default), 'bold', 'fill', or 'duotone'.
+   */
+  iconStyle?: IconWeight;
+  /**
+   * Allows you to edit the input id
+   *
+   * @default 'search-input'
+   */
+  id?: string;
+  /**
+   * Set an initial value to pass through
+   *
+   * @default ''
+   */
+  initialValue?: string;
+  /**
+   * Changes the aria label for the `<input>` element
+   *
+   * @default 'Search input'
+   */
+  'input-aria-label'?: string;
+  /**
+   * Ref for the input element
+   */
+  inputRef?: RefObject<HTMLInputElement>;
+  /**
+   * Maximum number of characters allowed in the input.
+   * Uses the native HTML maxLength attribute.
+   */
+  maxLength?: number;
+  /**
+   * Callback that triggers when the input loses focus
+   */
+  onBlur?: () => void;
+  /**
+   * Callback that triggers when you press the clear button
+   */
+  onClear?: () => void;
+  /**
+   * Callback that triggers when the input gains focus
+   */
+  onFocus?: () => void;
+  /**
+   * Callback that triggers when you submit (press enter or button)
+   */
+  onSubmit?: (searchString: string) => void;
+  /**
+   * Callback that triggers when you type
+   */
+  onTextChange?: (searchString: string) => void;
+  /**
+   * Allows you to edit the placeholder text
+   *
+   * @default 'Search'
+   */
+  placeholder?: string;
+  /**
+   * Show in the small size vs the medium one
+   */
+  small?: boolean;
+  /**
+   * Style variant for the input. Can be either 'neutral' (default) or 'inverse' for dark backgrounds.
+   */
+  style?: 'neutral' | 'inverse';
+  /**
+   * Controlled value for the input
+   * If provided, initialValue will be ignored
+   */
+  value?: string;
+};
+declare const SearchInput: ({
+  "button-aria-label": buttonAriaLabel,
+  className,
+  "data-testid": testId,
+  disabled,
+  emphasis,
+  endAdornment,
+  iconStyle,
+  id,
+  initialValue,
+  "input-aria-label": inputAriaLabel,
+  inputRef,
+  maxLength,
+  onBlur,
+  onClear: onClearProp,
+  onFocus,
+  onSubmit: onSubmitProp,
+  onTextChange,
+  placeholder,
+  small,
+  style,
+  value
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SearchInput as t };
+//# sourceMappingURL=SearchInput-DYIPC8Cd.d.cts.map

package/SearchInput-DYIPC8Cd.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput-DYIPC8Cd.d.cts","names":[],"sources":["../src/SearchInput/SearchInput.tsx"],"mappings":";;;;KAQK,KAAA;;AAH0C;;;;EAS3C,mBAAA;EACA,SAAA;EA2CW;;;EAAA,CAvCV,aAAA;EAJD;;;EAQA,QAAA;EASA;;;EALA,QAAA;EAeA;;;;EAVA,YAAA,GAAe,SAAA;EA0BM;;;EAtBrB,SAAA,GAAY,UAAA;EAuCZ;;;;;EAjCA,EAAA;EAmDA;;;;AAUK;EAvDL,YAAA;EA2LH;;;;;EArLG,kBAAA;EAoDwB;;;EAhDxB,QAAA,GAAW,SAAA,CAAU,gBAAA;EAgDG;;;;EA3CxB,SAAA;EA2CwB;;;EAvCxB,MAAA;EAuCwB;;;EAnCxB,OAAA;EAyDD;;;EArDC,OAAA;EA+BwB;;;EA3BxB,QAAA,IAAY,YAAA;EA2BY;;;EAvBxB,YAAA,IAAgB,YAAA;EAuBQ;;;;;EAjBxB,WAAA;EAiBwB;;;EAbxB,KAAA;EAawB;;;EATxB,KAAA;EASwB;;;;EAHxB,KAAA;AAAA;AAAA,cAGS,WAAA;EAAA,qBAAe,eAAA;EAAA,SAAA;EAAA,eAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,EAAA;EAAA,YAAA;EAAA,oBAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA,OAAA,EAAA,WAAA;EAAA,OAAA;EAAA,QAAA,EAAA,YAAA;EAAA,YAAA;EAAA,WAAA;EAAA,KAAA;EAAA,KAAA;EAAA;AAAA,GAsBzB,KAAA,iCAAK,GAAA,CAAA,OAAA"}