@lexsis/storefront-components 1.0.0

package/dist/cta/UrgencyCta.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { renderText } from "../renderText";
+import { elStyle } from "../utils/elementStyles";
+export default function UrgencyCta({ content, variant, theme, elementStyles }) {
+    const message = renderText(content.message);
+    const countdownEnd = renderText(content.countdown_end);
+    const stockCount = parseInt(renderText(content.stock_count)) || 0;
+    const stockMax = parseInt(renderText(content.stock_max)) || 100;
+    const activityCount = renderText(content.activity_count);
+    const activityLabel = renderText(content.activity_label);
+    const ctaText = renderText(content.cta_text);
+    const ctaUrl = renderText(content.cta_url);
+    const accent = theme.palette.accent;
+    const surface = theme.palette.surface;
+    const textColor = theme.palette.text;
+    if (variant === "countdown_bar") {
+        const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, mins: 0, secs: 0 });
+        useEffect(() => {
+            function compute() {
+                const end = new Date(countdownEnd).getTime();
+                const now = new Date().getTime();
+                const diff = Math.max(0, end - now);
+                const days = Math.floor(diff / 86400000);
+                const hours = Math.floor((diff % 86400000) / 3600000);
+                const mins = Math.floor((diff % 3600000) / 60000);
+                const secs = Math.floor((diff % 60000) / 1000);
+                setTimeLeft({ days, hours, mins, secs });
+            }
+            compute();
+            const t = setInterval(compute, 1000);
+            return () => clearInterval(t);
+        }, [countdownEnd]);
+        const units = [
+            { label: "Days", value: timeLeft.days },
+            { label: "Hours", value: timeLeft.hours },
+            { label: "Mins", value: timeLeft.mins },
+            { label: "Secs", value: timeLeft.secs },
+        ];
+        return (_jsxs("section", { style: { backgroundColor: accent, padding: "var(--lx-urgencycta-section-padding-y, var(--lx-space-2xl)) var(--lx-urgencycta-section-padding-x, var(--lx-space-5))", textAlign: "center" }, children: [message && _jsx("p", { "data-lx-field": "message", style: { fontFamily: theme.fonts.body, color: "#fff", fontSize: "1.125rem", marginBottom: "var(--lx-urgencycta-message-margin-bottom, var(--lx-space-lg))", ...elStyle(elementStyles, "message") }, children: message }), _jsx("div", { style: { display: "flex", gap: "var(--lx-urgencycta-units-gap, var(--lx-space-md))", justifyContent: "center", flexWrap: "wrap" }, children: units.map((u) => (_jsxs("div", { style: { backgroundColor: "rgba(0,0,0,0.2)", borderRadius: "var(--lx-urgencycta-unit-radius, var(--lx-radius-lg))", padding: "var(--lx-urgencycta-unit-padding-y, var(--lx-space-md)) var(--lx-urgencycta-unit-padding-x, var(--lx-space-lg))", minWidth: "80px" }, children: [_jsx("div", { style: { fontFamily: "monospace", fontSize: "2rem", fontWeight: 700, color: "#fff" }, children: String(u.value).padStart(2, "0") }), _jsx("div", { style: { color: "rgba(255,255,255,0.7)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.1em" }, children: u.label })] }, u.label))) }), ctaText && (_jsx("a", { href: ctaUrl || "#", style: { textDecoration: "none" }, children: _jsx("button", { style: {
+                            marginTop: "28px",
+                            backgroundColor: "#fff",
+                            color: accent,
+                            border: "none",
+                            borderRadius: "var(--lx-urgencycta-cta-radius, var(--lx-radius-md))",
+                            padding: "var(--lx-urgencycta-cta-padding-y, var(--lx-space-3)) var(--lx-urgencycta-cta-padding-x, var(--lx-space-xl))",
+                            fontFamily: theme.fonts.body,
+                            fontWeight: 700,
+                            fontSize: "1rem",
+                            cursor: "pointer",
+                            ...elStyle(elementStyles, "cta_text"),
+                        }, "data-lx-field": "cta_text", children: ctaText }) }))] }));
+    }
+    if (variant === "stock_scarcity") {
+        const pct = Math.min(100, Math.max(0, (stockCount / stockMax) * 100));
+        const barColor = stockCount < 5 ? "#ef4444" : accent;
+        return (_jsxs("section", { style: { backgroundColor: surface, padding: "var(--lx-urgencycta-section-padding-y, var(--lx-space-xl)) var(--lx-urgencycta-section-padding-x, var(--lx-space-5))", textAlign: "center" }, children: [_jsxs("p", { style: { fontFamily: theme.fonts.body, fontWeight: 700, color: textColor, fontSize: "1.1rem", marginBottom: "var(--lx-urgencycta-message-margin-bottom, var(--lx-space-md))" }, children: ["Only ", _jsx("span", { style: { color: barColor }, children: stockCount }), " left in stock"] }), _jsx("div", { style: { width: "100%", maxWidth: "400px", margin: "0 auto", backgroundColor: "#e5e7eb", borderRadius: "var(--lx-urgencycta-bar-radius, var(--lx-radius-full))", height: "8px" }, children: _jsx("div", { style: { backgroundColor: barColor, height: "8px", borderRadius: "var(--lx-urgencycta-bar-radius, var(--lx-radius-full))", width: `${pct}%`, transition: "width 1s ease" } }) }), activityCount && activityLabel && (_jsxs("p", { "data-lx-field": "activity_label", style: { fontFamily: theme.fonts.body, color: textColor, opacity: 0.6, fontSize: "0.875rem", marginTop: "var(--lx-urgencycta-activity-margin-top, var(--lx-space-3))", ...elStyle(elementStyles, "activity_label") }, children: [activityCount, " ", activityLabel] })), ctaText && (_jsx("a", { href: ctaUrl || "#", style: { textDecoration: "none" }, children: _jsx("button", { "data-lx-field": "cta_text", style: { marginTop: "var(--lx-urgencycta-cta-margin-top, var(--lx-space-5))", backgroundColor: accent, color: "#fff", border: "none", borderRadius: "var(--lx-urgencycta-cta-radius, var(--lx-radius-md))", padding: "var(--lx-urgencycta-cta-padding-y, var(--lx-space-3)) var(--lx-urgencycta-cta-padding-x, var(--lx-space-xl))", fontFamily: theme.fonts.body, fontWeight: 700, fontSize: "1rem", cursor: "pointer", ...elStyle(elementStyles, "cta_text") }, children: ctaText }) }))] }));
+    }
+    if (variant === "social_urgency") {
+        const [displayCount, setDisplayCount] = useState(0);
+        const target = parseInt(activityCount) || 0;
+        useEffect(() => {
+            if (target === 0)
+                return;
+            const increment = Math.ceil(target / 30);
+            const t = setInterval(() => {
+                setDisplayCount((prev) => {
+                    const next = prev + increment;
+                    if (next >= target) {
+                        clearInterval(t);
+                        return target;
+                    }
+                    return next;
+                });
+            }, 50);
+            return () => clearInterval(t);
+        }, [target]);
+        return (_jsxs("section", { style: { backgroundColor: surface, padding: "var(--lx-urgencycta-section-padding-y, var(--lx-space-xl)) var(--lx-urgencycta-section-padding-x, var(--lx-space-5))", textAlign: "center" }, children: [_jsx("style", { children: `
+          @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        ` }), _jsxs("div", { style: { animation: "fadeInUp 0.5s ease" }, children: [_jsxs("p", { "data-lx-field": "activity_label", style: { fontFamily: theme.fonts.display, fontSize: "1.5rem", fontWeight: 700, color: textColor, ...elStyle(elementStyles, "activity_label") }, children: ["\uD83D\uDD25 ", displayCount, " ", activityLabel] }), message && _jsx("p", { "data-lx-field": "message", style: { fontFamily: theme.fonts.body, color: textColor, opacity: 0.7, marginTop: "var(--lx-urgencycta-message-margin-top, var(--lx-space-sm))", ...elStyle(elementStyles, "message") }, children: message }), ctaText && (_jsx("a", { href: ctaUrl || "#", style: { textDecoration: "none" }, children: _jsx("button", { "data-lx-field": "cta_text", style: { marginTop: "var(--lx-urgencycta-cta-margin-top, var(--lx-space-5))", backgroundColor: accent, color: "#fff", border: "none", borderRadius: "var(--lx-urgencycta-cta-radius, var(--lx-radius-md))", padding: "var(--lx-urgencycta-cta-padding-y, var(--lx-space-3)) var(--lx-urgencycta-cta-padding-x, var(--lx-space-xl))", fontFamily: theme.fonts.body, fontWeight: 700, fontSize: "1rem", cursor: "pointer", ...elStyle(elementStyles, "cta_text") }, children: ctaText }) }))] })] }));
+    }
+    // fallback
+    return (_jsx("section", { style: { backgroundColor: surface, padding: "var(--lx-urgencycta-section-padding-y, var(--lx-space-xl)) var(--lx-urgencycta-section-padding-x, var(--lx-space-5))", textAlign: "center" }, children: _jsx("p", { "data-lx-field": "message", style: { fontFamily: theme.fonts.body, color: textColor, ...elStyle(elementStyles, "message") }, children: message }) }));
+}
+//# sourceMappingURL=UrgencyCta.js.map

package/dist/cta/UrgencyCta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrgencyCta.js","sourceRoot":"","sources":["../../src/cta/UrgencyCta.tsx"],"names":[],"mappings":"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"}

package/dist/cta/WaitlistCta.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "../types";
+export default function WaitlistCta({ content, variant, theme, elementStyles }: ComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WaitlistCta.d.ts.map

package/dist/cta/WaitlistCta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitlistCta.d.ts","sourceRoot":"","sources":["../../src/cta/WaitlistCta.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI/C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,cAAc,2CA2I7F"}

package/dist/cta/WaitlistCta.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { renderText } from "../renderText";
+import { elStyle } from "../utils/elementStyles";
+export default function WaitlistCta({ content, variant, theme, elementStyles }) {
+    const heading = renderText(content.heading);
+    const subhead = renderText(content.subhead);
+    const placeholder = renderText(content.placeholder) || "Enter your email";
+    const ctaText = renderText(content.cta_text) || "Join Waitlist";
+    const positionNumber = renderText(content.position_number) || "1,247";
+    const accent = theme.palette.accent;
+    const surface = theme.palette.surface;
+    const textColor = theme.palette.text;
+    const border = theme.palette.border ?? "#e5e7eb";
+    const [email, setEmail] = useState("");
+    const [submitted, setSubmitted] = useState(false);
+    function handleSubmit(e) {
+        e.preventDefault();
+        setSubmitted(true);
+    }
+    if (variant === "simple") {
+        return (_jsxs("section", { style: { backgroundColor: theme.palette.bg, padding: "var(--lx-waitlistcta-padding-y, var(--lx-space-2xl)) var(--lx-waitlistcta-padding-x, var(--lx-space-5))", textAlign: "center" }, children: [_jsx("style", { children: `
+          @keyframes popIn {
+            from { opacity: 0; transform: scale(0.8); }
+            to { opacity: 1; transform: scale(1); }
+          }
+        ` }), heading && _jsx("h2", { "data-lx-field": "heading", style: { fontFamily: theme.fonts.display, color: textColor, fontSize: "2rem", fontWeight: 700, marginBottom: "var(--lx-waitlistcta-heading-margin-bottom, var(--lx-space-3))", ...elStyle(elementStyles, "heading") }, children: heading }), subhead && _jsx("p", { "data-lx-field": "subhead", style: { fontFamily: theme.fonts.body, color: textColor, opacity: 0.7, fontSize: "1.1rem", marginBottom: "28px", ...elStyle(elementStyles, "subhead") }, children: subhead }), submitted ? (_jsx("div", { style: { animation: "popIn 0.4s ease", display: "inline-block", backgroundColor: surface, border: `1px solid ${border}`, borderRadius: "var(--lx-waitlistcta-card-radius, var(--lx-radius-lg))", padding: "var(--lx-waitlistcta-card-padding-y, var(--lx-space-5)) var(--lx-waitlistcta-card-padding-x, var(--lx-space-xl))" }, children: _jsx("p", { style: { fontFamily: theme.fonts.body, color: textColor, fontSize: "1.1rem" }, children: "You're on the list! \u2713 We'll let you know when we're ready." }) })) : (_jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", gap: "var(--lx-waitlistcta-form-gap, var(--lx-space-3))", justifyContent: "center", flexWrap: "wrap", maxWidth: "480px", margin: "0 auto" }, children: [_jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, style: {
+                                flex: 1,
+                                minWidth: "220px",
+                                padding: "var(--lx-waitlistcta-input-padding-y, var(--lx-space-3)) var(--lx-waitlistcta-input-padding-x, var(--lx-space-md))",
+                                border: `1px solid ${border}`,
+                                borderRadius: "var(--lx-waitlistcta-input-radius, var(--lx-radius-md))",
+                                fontFamily: theme.fonts.body,
+                                fontSize: "1rem",
+                                backgroundColor: surface,
+                                color: textColor,
+                                outline: "none",
+                            } }), _jsx("button", { "data-lx-field": "cta_text", type: "submit", style: { backgroundColor: accent, color: "#fff", border: "none", borderRadius: "var(--lx-waitlistcta-cta-radius, var(--lx-radius-md))", padding: "var(--lx-waitlistcta-cta-padding-y, var(--lx-space-3)) var(--lx-waitlistcta-cta-padding-x, var(--lx-space-lg))", fontFamily: theme.fonts.body, fontWeight: 700, fontSize: "1rem", cursor: "pointer", ...elStyle(elementStyles, "cta_text") }, children: ctaText })] }))] }));
+    }
+    if (variant === "with_position") {
+        return (_jsxs("section", { style: { backgroundColor: theme.palette.bg, padding: "var(--lx-waitlistcta-padding-y, var(--lx-space-2xl)) var(--lx-waitlistcta-padding-x, var(--lx-space-5))", textAlign: "center" }, children: [_jsx("style", { children: `
+          @keyframes popIn {
+            from { opacity: 0; transform: scale(0.8); }
+            to { opacity: 1; transform: scale(1); }
+          }
+        ` }), heading && _jsx("h2", { "data-lx-field": "heading", style: { fontFamily: theme.fonts.display, color: textColor, fontSize: "2rem", fontWeight: 700, marginBottom: "var(--lx-waitlistcta-heading-margin-bottom, var(--lx-space-3))", ...elStyle(elementStyles, "heading") }, children: heading }), subhead && _jsx("p", { "data-lx-field": "subhead", style: { fontFamily: theme.fonts.body, color: textColor, opacity: 0.7, fontSize: "1.1rem", marginBottom: "28px", ...elStyle(elementStyles, "subhead") }, children: subhead }), submitted ? (_jsxs("div", { style: { animation: "popIn 0.4s ease", display: "inline-block", maxWidth: "480px" }, children: [_jsxs("p", { style: { fontFamily: theme.fonts.body, color: textColor, fontSize: "1.25rem", fontWeight: 700, marginBottom: "var(--lx-waitlistcta-position-margin-bottom, var(--lx-space-md))" }, children: ["You're #", positionNumber, " on the waitlist \uD83C\uDF89"] }), _jsx("div", { style: { width: "100%", backgroundColor: surface, border: `1px solid ${border}`, borderRadius: "var(--lx-waitlistcta-bar-radius, var(--lx-radius-full))", height: "var(--lx-space-sm)" }, children: _jsx("div", { style: { backgroundColor: accent, height: "var(--lx-space-sm)", borderRadius: "var(--lx-waitlistcta-bar-radius, var(--lx-radius-full))", width: "8%", transition: "width 1s ease" } }) }), _jsx("p", { style: { fontFamily: theme.fonts.body, color: textColor, opacity: 0.5, fontSize: "0.8rem", marginTop: "var(--lx-waitlistcta-hint-margin-top, var(--lx-space-sm))" }, children: "Almost there \u2014 we're opening spots soon" })] })) : (_jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", gap: "var(--lx-waitlistcta-form-gap, var(--lx-space-3))", justifyContent: "center", flexWrap: "wrap", maxWidth: "480px", margin: "0 auto" }, children: [_jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, style: {
+                                flex: 1,
+                                minWidth: "220px",
+                                padding: "var(--lx-waitlistcta-input-padding-y, var(--lx-space-3)) var(--lx-waitlistcta-input-padding-x, var(--lx-space-md))",
+                                border: `1px solid ${border}`,
+                                borderRadius: "var(--lx-waitlistcta-input-radius, var(--lx-radius-md))",
+                                fontFamily: theme.fonts.body,
+                                fontSize: "1rem",
+                                backgroundColor: surface,
+                                color: textColor,
+                                outline: "none",
+                            } }), _jsx("button", { "data-lx-field": "cta_text", type: "submit", style: { backgroundColor: accent, color: "#fff", border: "none", borderRadius: "var(--lx-waitlistcta-cta-radius, var(--lx-radius-md))", padding: "var(--lx-waitlistcta-cta-padding-y, var(--lx-space-3)) var(--lx-waitlistcta-cta-padding-x, var(--lx-space-lg))", fontFamily: theme.fonts.body, fontWeight: 700, fontSize: "1rem", cursor: "pointer", ...elStyle(elementStyles, "cta_text") }, children: ctaText })] }))] }));
+    }
+    // fallback: simple
+    return (_jsxs("section", { style: { backgroundColor: theme.palette.bg, padding: "var(--lx-waitlistcta-padding-y, var(--lx-space-2xl)) var(--lx-waitlistcta-padding-x, var(--lx-space-5))", textAlign: "center" }, children: [heading && _jsx("h2", { "data-lx-field": "heading", style: { fontFamily: theme.fonts.display, color: textColor, fontSize: "2rem", fontWeight: 700, marginBottom: "28px", ...elStyle(elementStyles, "heading") }, children: heading }), _jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", gap: "var(--lx-waitlistcta-form-gap, var(--lx-space-3))", justifyContent: "center", flexWrap: "wrap", maxWidth: "480px", margin: "0 auto" }, children: [_jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, style: { flex: 1, minWidth: "220px", padding: "var(--lx-waitlistcta-input-padding-y, var(--lx-space-3)) var(--lx-waitlistcta-input-padding-x, var(--lx-space-md))", border: `1px solid ${border}`, borderRadius: "var(--lx-waitlistcta-input-radius, var(--lx-radius-md))", fontFamily: theme.fonts.body, fontSize: "1rem", backgroundColor: surface, color: textColor, outline: "none" } }), _jsx("button", { "data-lx-field": "cta_text", type: "submit", style: { backgroundColor: accent, color: "#fff", border: "none", borderRadius: "var(--lx-waitlistcta-cta-radius, var(--lx-radius-md))", padding: "var(--lx-waitlistcta-cta-padding-y, var(--lx-space-3)) var(--lx-waitlistcta-cta-padding-x, var(--lx-space-lg))", fontFamily: theme.fonts.body, fontWeight: 700, fontSize: "1rem", cursor: "pointer", ...elStyle(elementStyles, "cta_text") }, children: ctaText })] })] }));
+}
+//# sourceMappingURL=WaitlistCta.js.map

package/dist/cta/WaitlistCta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitlistCta.js","sourceRoot":"","sources":["../../src/cta/WaitlistCta.tsx"],"names":[],"mappings":"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"}

package/dist/cta/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CtaFullWidth } from "./CtaFullWidth";
+export { default as CtaStickyBottom } from "./CtaStickyBottom";
+//# sourceMappingURL=index.d.ts.map

package/dist/cta/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cta/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/cta/index.js

@@ -0,0 +1,3 @@
+export { default as CtaFullWidth } from "./CtaFullWidth";
+export { default as CtaStickyBottom } from "./CtaStickyBottom";
+//# sourceMappingURL=index.js.map

package/dist/cta/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cta/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/effects/AnimatedBackground.d.ts

@@ -0,0 +1,22 @@
+export interface AnimatedBackgroundParams {
+    amplitude?: number;
+    layerCount?: number;
+    density?: number;
+    minRadius?: number;
+    maxRadius?: number;
+    filled?: boolean;
+    blur?: number;
+    stepCount?: number;
+    opacity?: number;
+    motion?: "bounce" | "drift" | "breathe" | "equalizer";
+}
+export interface AnimatedBackgroundProps {
+    type: string;
+    colors?: string[];
+    opacity?: number;
+    speed?: "slow" | "normal" | "fast";
+    position?: "top" | "bottom" | "full" | "left" | "right" | "diagonal-tl" | "diagonal-tr" | "diagonal-bl" | "diagonal-br";
+    params?: AnimatedBackgroundParams;
+}
+export declare function AnimatedBackground({ type, colors, opacity, speed, position, params, }: AnimatedBackgroundProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AnimatedBackground.d.ts.map

package/dist/effects/AnimatedBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedBackground.d.ts","sourceRoot":"","sources":["../../src/effects/AnimatedBackground.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;CACvD;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CAAC;IACxH,MAAM,CAAC,EAAE,wBAAwB,CAAC;CACnC;AA8YD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,MAAW,EACX,OAAW,EACX,KAAgB,EAChB,QAAmB,EACnB,MAAW,GACZ,EAAE,uBAAuB,2CAmFzB"}

package/dist/effects/AnimatedBackground.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPEED_MS = { slow: 18000, normal: 10000, fast: 5000 };
+// ─── Smooth Wave — SMIL path morph (only d= morphing, no child animate issues) ─
+function SmoothWave({ colors, speedMs, position, params }) {
+    const c0 = colors[0] ?? "#6366f1";
+    const c1 = colors[1] ?? c0;
+    const gid = `sw-g-${speedMs}`;
+    const amp = Math.round(80 * (params.amplitude ?? 1));
+    const isTop = position === "top";
+    const H = 320;
+    // Wider viewBox so wave can scroll without gaps — 3x width
+    const W = 4320;
+    const uid = `sw${speedMs}`;
+    // Build one repeating wave tile (3 cycles across W)
+    const makeD = (a, phase) => {
+        const seg = 480; // one wave cycle width
+        const cycles = W / seg;
+        let d = isTop ? `M0,0 ` : `M0,${H} `;
+        for (let i = 0; i <= cycles; i++) {
+            const x0 = i * seg;
+            const x1 = x0 + seg / 2;
+            const x2 = x0 + seg;
+            const yPeak = isTop ? a * (1 + Math.sin(i * 0.7 + phase) * 0.3) : H - a * (1 + Math.sin(i * 0.7 + phase) * 0.3);
+            const yTrough = isTop ? a * 0.2 : H - a * 0.2;
+            d += `C${x0 + seg * 0.25},${yPeak} ${x0 + seg * 0.75},${yTrough} ${x2},${(yPeak + yTrough) / 2} `;
+        }
+        d += isTop ? `L${W},0 L0,0 Z` : `L${W},${H} L0,${H} Z`;
+        return d;
+    };
+    const d1 = makeD(amp, 0);
+    const d2 = makeD(amp * 1.15, 0.4);
+    const d3 = makeD(amp * 0.9, 0.8);
+    // Layer 2 — slightly different amplitude, offset start
+    const d1b = makeD(amp * 0.7, 1.2);
+    const d2b = makeD(amp * 0.85, 1.6);
+    const css = `
+    @keyframes ${uid}-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-${W / 3}px); } }
+    @keyframes ${uid}-scroll2 { 0% { transform: translateX(-${W / 6}px); } 100% { transform: translateX(-${W / 3 + W / 6}px); } }
+    .${uid}-l1 { animation: ${uid}-scroll ${speedMs}ms linear infinite; }
+    .${uid}-l2 { animation: ${uid}-scroll2 ${speedMs * 1.4}ms linear infinite; }
+  `;
+    return (_jsxs("svg", { viewBox: `0 0 1440 ${H}`, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", style: { width: "100%", height: "100%", display: "block", overflow: "hidden" }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: gid, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: c0 }), _jsx("stop", { offset: "100%", stopColor: c1 })] }), _jsxs("linearGradient", { id: `${gid}b`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: c1, stopOpacity: "0.5" }), _jsx("stop", { offset: "100%", stopColor: c0, stopOpacity: "0.5" })] }), _jsx("style", { children: css })] }), _jsx("g", { className: `${uid}-l2`, style: { transformBox: "fill-box" }, children: _jsx("path", { d: d1b, fill: `url(#${gid}b)`, vectorEffect: "non-scaling-stroke", children: _jsx("animate", { attributeName: "d", values: `${d1b};${d2b};${d1b}`, dur: `${speedMs * 2}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1" }) }) }), _jsx("g", { className: `${uid}-l1`, style: { transformBox: "fill-box" }, children: _jsx("path", { d: d1, fill: `url(#${gid})`, vectorEffect: "non-scaling-stroke", children: _jsx("animate", { attributeName: "d", values: `${d1};${d2};${d3};${d1}`, dur: `${speedMs * 1.5}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1" }) }) })] }));
+}
+// ─── Stepped Wave — CSS keyframes per bar, staggered ─────────────────────────
+function SteppedWave({ colors, speedMs, position, params }) {
+    const c0 = colors[0] ?? "#3b82f6";
+    const c1 = colors[1] ?? c0;
+    const gid = `stw-g-${speedMs}`;
+    const isTop = position === "top";
+    const W = 1440;
+    const H = 320;
+    const count = Math.max(4, Math.min(32, params.stepCount ?? 16));
+    const amp = Math.round(160 * (params.amplitude ?? 1));
+    const motion = params.motion ?? "equalizer";
+    const segW = Math.ceil(W / count);
+    const uid = `stw${speedMs}`;
+    const bars = Array.from({ length: count }, (_, i) => {
+        const h = Math.round(amp * (0.3 + 0.7 * Math.abs(Math.sin(i * 2.3 + 1))));
+        const hAlt = Math.round(amp * (0.3 + 0.7 * Math.abs(Math.sin(i * 2.3 + 1 + Math.PI * 0.6))));
+        return { x: i * segW, h, hAlt, delay: (i / count) * (speedMs * 0.5) };
+    });
+    const css = (motion === "equalizer" || motion === "bounce")
+        ? bars.map((b, i) => {
+            const fromH = b.h;
+            const toH = b.hAlt;
+            const fromY = isTop ? 0 : H - fromH;
+            const toY = isTop ? 0 : H - toH;
+            return `
+        @keyframes ${uid}-b${i} {
+          0%, 100% { height: ${fromH}px; y: ${fromY}px; }
+          50% { height: ${toH}px; y: ${toY}px; }
+        }
+        .${uid}-b${i} { animation: ${uid}-b${i} ${speedMs * 0.6}ms ease-in-out infinite; animation-delay: ${b.delay}ms; }`;
+        }).join("")
+        : "";
+    return (_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", style: { width: "100%", height: "100%", display: "block" }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: gid, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: c0 }), _jsx("stop", { offset: "100%", stopColor: c1 })] }), css && _jsx("style", { children: css })] }), bars.map((b, i) => (_jsx("rect", { className: (motion === "equalizer" || motion === "bounce") ? `${uid}-b${i}` : undefined, x: b.x, y: isTop ? 0 : H - b.h, width: segW + 1, height: b.h, fill: `url(#${gid})` }, i)))] }));
+}
+// ─── Layered Peaks — SMIL path morph per layer ────────────────────────────────
+function LayeredPeaks({ colors, speedMs, params }) {
+    const count = Math.max(2, Math.min(5, params.layerCount ?? 3));
+    const amp = Math.round(80 * (params.amplitude ?? 1));
+    const baseOp = params.opacity ?? 1;
+    const uid = `lp${speedMs}`;
+    const W = 4320; // 3x wide for seamless scroll
+    const layerColors = [...colors, "#7c3aed", "#c026d3", "#db2777", "#e11d48", "#9333ea"].slice(0, count);
+    const makePeakD = (yBase, a, phase) => {
+        const seg = 480;
+        const cycles = W / seg;
+        let d = `M0,${yBase} `;
+        for (let i = 0; i < cycles; i++) {
+            const x0 = i * seg;
+            const x2 = x0 + seg;
+            const yUp = yBase - a * (1 + Math.sin(i * 0.9 + phase) * 0.25);
+            const yDown = yBase + a * 0.3;
+            d += `C${x0 + seg * 0.3},${yUp} ${x0 + seg * 0.7},${yDown} ${x2},${yBase} `;
+        }
+        d += `L${W},320 L0,320 Z`;
+        return d;
+    };
+    const layers = Array.from({ length: count }, (_, i) => {
+        const t = i / (count - 1 || 1);
+        const yBase = 160 + t * 100;
+        const a = amp * (1 - t * 0.25);
+        const d1 = makePeakD(yBase, a, i * 0.5);
+        const d2 = makePeakD(yBase, a * 1.2, i * 0.5 + 0.6);
+        // Each layer scrolls at slightly different speed — depth parallax
+        const scrollSpeed = speedMs * (0.8 + i * 0.3);
+        const scrollOffset = W / 3;
+        return {
+            color: layerColors[count - 1 - i],
+            op: baseOp * (1 - i * 0.1),
+            d1, d2,
+            morphDur: speedMs * (1.2 + i * 0.3),
+            scrollDur: scrollSpeed,
+            delay: i * (speedMs / count / 4),
+            scrollOffset,
+        };
+    });
+    const css = layers.map((l, i) => `@keyframes ${uid}-s${i} { 0%{transform:translateX(0)} 100%{transform:translateX(-${l.scrollOffset}px)} }
+     .${uid}-g${i} { animation: ${uid}-s${i} ${l.scrollDur}ms linear infinite; }`).join("");
+    return (_jsxs("svg", { viewBox: "0 0 1440 320", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", style: { width: "100%", height: "100%", display: "block", overflow: "hidden" }, children: [_jsx("defs", { children: _jsx("style", { children: css }) }), layers.map((l, i) => (_jsx("g", { className: `${uid}-g${i}`, children: _jsx("path", { d: l.d1, fill: l.color, opacity: l.op, children: _jsx("animate", { attributeName: "d", values: `${l.d1};${l.d2};${l.d1}`, dur: `${l.morphDur}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1", begin: `${l.delay}ms` }) }) }, i)))] }));
+}
+// ─── Stacked Peaks — SMIL path morph ─────────────────────────────────────────
+function StackedPeaks({ colors, speedMs, params }) {
+    const count = Math.max(2, Math.min(5, params.layerCount ?? 4));
+    const amp = Math.round(80 * (params.amplitude ?? 1));
+    const layerColors = [...colors, "#be185d", "#9d174d", "#7c3aed", "#5b21b6", "#4c1d95"].slice(0, count);
+    const layers = Array.from({ length: count }, (_, i) => {
+        const t = i / count;
+        const y = 320 - t * (320 - amp);
+        const a = amp * (0.8 + t * 0.4);
+        const d1 = `M0,${y} C160,${y - a} 380,${y + a * .7} 640,${y - a * .8} C900,${y - a * 1.2} 1180,${y + a * .5} 1440,${y - a * .6} L1440,320 L0,320 Z`;
+        const d2 = `M0,${y} C200,${y + a * .4} 440,${y - a} 700,${y + a * .2} C940,${y - a * .9} 1200,${y + a * .6} 1440,${y - a * .3} L1440,320 L0,320 Z`;
+        return { color: layerColors[count - 1 - i], d1, d2, dur: speedMs * (1 + i * 0.25), delay: i * (speedMs / count / 4) };
+    });
+    return (_jsx("svg", { viewBox: "0 0 1440 320", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", style: { width: "100%", height: "100%", display: "block" }, children: layers.map((l, i) => (_jsx("path", { d: l.d1, fill: l.color, children: _jsx("animate", { attributeName: "d", values: `${l.d1};${l.d2};${l.d1}`, dur: `${l.dur}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1", begin: `${l.delay}ms` }) }, i))) }));
+}
+// ─── Layered Waves — SMIL path morph ─────────────────────────────────────────
+function LayeredWaves({ colors, speedMs, position, params }) {
+    const count = Math.max(2, Math.min(5, params.layerCount ?? 3));
+    const amp = Math.round(30 * (params.amplitude ?? 1));
+    const isBottom = position === "bottom" || position === "full";
+    const baseOp = params.opacity ?? 1;
+    const layerColors = [...colors, "#6366f1", "#8b5cf6", "#ec4899", "#f43f5e", "#0ea5e9"].slice(0, count);
+    const layers = Array.from({ length: count }, (_, i) => {
+        const t = i / count;
+        const yBase = isBottom ? 200 + t * 80 : 120 - t * 80;
+        const a = amp * (1 - t * 0.2);
+        const d1 = `M-100,${yBase} C160,${yBase - a} 400,${yBase + a} 640,${yBase} C880,${yBase - a} 1120,${yBase + a} 1360,${yBase} C1500,${yBase - a / 2} 1540,${yBase} 1540,${yBase} L1540,320 L-100,320 Z`;
+        const d2 = `M-100,${yBase} C140,${yBase + a * .8} 380,${yBase - a * 1.2} 620,${yBase + a * .4} C860,${yBase - a * .9} 1100,${yBase + a * 1.1} 1360,${yBase - a * .5} C1500,${yBase + a * .3} 1540,${yBase} 1540,${yBase} L1540,320 L-100,320 Z`;
+        return { color: layerColors[count - 1 - i], op: baseOp * (0.5 + t * 0.5), d1, d2, dur: speedMs * (0.8 + i * 0.2), delay: i * (speedMs / count / 3) };
+    });
+    return (_jsx("svg", { viewBox: "0 0 1440 320", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", style: { width: "100%", height: "100%", display: "block" }, children: layers.map((l, i) => (_jsx("path", { d: l.d1, fill: l.color, opacity: l.op, children: _jsx("animate", { attributeName: "d", values: `${l.d1};${l.d2};${l.d1}`, dur: `${l.dur}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1", begin: `${l.delay}ms` }) }, i))) }));
+}
+// ─── Blob Scene — SMIL path morph ────────────────────────────────────────────
+function BlobScene({ colors, speedMs, params }) {
+    const c0 = colors[0] ?? "#6366f1";
+    const c1 = colors[1] ?? "#ec4899";
+    const baseOp = params.opacity ?? 0.7;
+    const s = Math.round(200 * (params.amplitude ?? 1));
+    const b1 = [
+        `M${s},${s * .5} C${s * 1.4},${s * .2} ${s * 1.9},${s * .3} ${s * 2.1},${s * .7} C${s * 2.3},${s * 1.1} ${s * 2},${s * 1.5} ${s * 1.6},${s * 1.6} C${s * 1.2},${s * 1.7} ${s * .7},${s * 1.5} ${s * .5},${s * 1.1} C${s * .3},${s * .7} ${s * .6},${s * .8} ${s},${s * .5}Z`,
+        `M${s * 1.1},${s * .35} C${s * 1.6},${s * .1} ${s * 2.1},${s * .4} ${s * 2.2},${s * .85} C${s * 2.35},${s * 1.3} ${s * 1.85},${s * 1.7} ${s * 1.4},${s * 1.65} C${s * .95},${s * 1.6} ${s * .55},${s * 1.35} ${s * .4},${s * .95} C${s * .25},${s * .55} ${s * .6},${s * .6} ${s * 1.1},${s * .35}Z`,
+        `M${s * .9},${s * .6} C${s * 1.3},${s * .25} ${s * 1.85},${s * .2} ${s * 2.05},${s * .65} C${s * 2.25},${s * 1.1} ${s * 2.1},${s * 1.6} ${s * 1.55},${s * 1.7} C${s},${s * 1.8} ${s * .6},${s * 1.6} ${s * .45},${s * 1.2} C${s * .3},${s * .8} ${s * .5},${s * .95} ${s * .9},${s * .6}Z`,
+    ];
+    const rx = 1440 - s * 2.5;
+    const b2 = [
+        `M${rx + s},${s * .9} C${rx + s * 1.3},${s * .6} ${rx + s * 2},${s * .7} ${rx + s * 2.1},${s * 1.1} C${rx + s * 2.2},${s * 1.5} ${rx + s * 1.8},${s * 1.8} ${rx + s * 1.3},${s * 1.8} C${rx + s * .8},${s * 1.8} ${rx + s * .5},${s * 1.5} ${rx + s * .6},${s * 1.1} C${rx + s * .65},${s * .9} ${rx + s * .8},${s * 1.1} ${rx + s},${s * .9}Z`,
+        `M${rx + s * .85},${s * .75} C${rx + s * 1.4},${s * .45} ${rx + s * 2.15},${s * .6} ${rx + s * 2.2},${s * 1.05} C${rx + s * 2.25},${s * 1.5} ${rx + s * 1.75},${s * 1.85} ${rx + s * 1.2},${s * 1.75} C${rx + s * .65},${s * 1.65} ${rx + s * .35},${s * 1.35} ${rx + s * .5},${s * .95} C${rx + s * .6},${s * .7} ${rx + s * .7},${s * .95} ${rx + s * .85},${s * .75}Z`,
+        `M${rx + s * 1.05},${s * .8} C${rx + s * 1.5},${s * .5} ${rx + s * 2.1},${s * .75} ${rx + s * 2.15},${s * 1.15} C${rx + s * 2.2},${s * 1.55} ${rx + s * 1.7},${s * 1.9} ${rx + s * 1.25},${s * 1.8} C${rx + s * .8},${s * 1.7} ${rx + s * .4},${s * 1.4} ${rx + s * .55},${s} C${rx + s * .62},${s * .75} ${rx + s * .78},${s * .92} ${rx + s * 1.05},${s * .8}Z`,
+    ];
+    return (_jsxs("svg", { viewBox: "0 0 1440 400", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid slice", style: { width: "100%", height: "100%", display: "block" }, children: [_jsx("path", { d: b1[0], fill: c0, opacity: baseOp, children: _jsx("animate", { attributeName: "d", values: `${b1[0]};${b1[1]};${b1[2]};${b1[0]}`, dur: `${speedMs}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1" }) }), _jsx("path", { d: b2[0], fill: c1, opacity: baseOp, children: _jsx("animate", { attributeName: "d", values: `${b2[0]};${b2[1]};${b2[2]};${b2[0]}`, dur: `${speedMs * 1.3}ms`, repeatCount: "indefinite", calcMode: "spline", keySplines: "0.45 0 0.55 1; 0.45 0 0.55 1; 0.45 0 0.55 1", begin: `${speedMs * 0.4}ms` }) })] }));
+}
+// ─── Circle Scatter — CSS keyframes, each circle drifts independently ─────────
+function CircleScatter({ colors, speedMs, params }) {
+    const c0 = colors[0] ?? "#f43f5e";
+    const c1 = colors[1] ?? "#6366f1";
+    const count = Math.max(5, Math.min(30, params.density ?? 10));
+    const rMin = params.minRadius ?? 15;
+    const rMax = params.maxRadius ?? 90;
+    const allFilled = params.filled ?? false;
+    const baseOp = params.opacity ?? 0.7;
+    const amp = Math.round(30 * (params.amplitude ?? 1));
+    const motion = params.motion ?? "drift";
+    const uid = `cs${speedMs}`;
+    const circles = Array.from({ length: count }, (_, i) => {
+        const t = i / count;
+        const cx = Math.round(80 + t * 1280 + Math.sin(i * 2.3) * 60);
+        const cy = Math.round(60 + (i % 4) * 90 + Math.cos(i * 1.7) * 40);
+        const r = Math.round(rMin + (rMax - rMin) * Math.abs(Math.sin(i * 1.4)));
+        const color = i % 2 === 0 ? c0 : c1;
+        const filled = allFilled || i % 3 === 0;
+        const dx = Math.round(Math.sin(i * 0.9) * amp);
+        const dy = Math.round(Math.cos(i * 1.3) * amp);
+        const dur = speedMs * (0.6 + (i % 5) * 0.15);
+        const delay = Math.round((i / count) * speedMs * 0.5);
+        return { cx, cy, r, color, filled, dx, dy, dur, delay };
+    });
+    const css = circles.map((c, i) => {
+        if (motion === "breathe") {
+            return `@keyframes ${uid}-c${i} { 0%,100%{r:${c.r};opacity:${baseOp}} 50%{r:${c.r * 1.15};opacity:${baseOp * .6}} }
+      .${uid}-c${i}{animation:${uid}-c${i} ${c.dur}ms ease-in-out infinite;animation-delay:${c.delay}ms}`;
+        }
+        return `@keyframes ${uid}-c${i} { 0%,100%{transform:translate(0,0)} 50%{transform:translate(${c.dx}px,${c.dy}px)} }
+    .${uid}-c${i}{animation:${uid}-c${i} ${c.dur}ms ease-in-out infinite;animation-delay:${c.delay}ms;transform-origin:${c.cx}px ${c.cy}px}`;
+    }).join("");
+    return (_jsxs("svg", { viewBox: "0 0 1440 400", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid slice", style: { width: "100%", height: "100%", display: "block" }, children: [_jsx("defs", { children: _jsx("style", { children: css }) }), circles.map((c, i) => c.filled
+                ? _jsx("circle", { className: `${uid}-c${i}`, cx: c.cx, cy: c.cy, r: c.r, fill: c.color, opacity: baseOp * 0.6 }, i)
+                : _jsx("circle", { className: `${uid}-c${i}`, cx: c.cx, cy: c.cy, r: c.r, stroke: c.color, strokeWidth: "2", fill: "none", opacity: baseOp }, i))] }));
+}
+// ─── Blurry Gradient — CSS keyframes drift ───────────────────────────────────
+function BlurryGradient({ colors, speedMs, params }) {
+    const blurAmt = params.blur ?? 60;
+    const count = Math.max(2, Math.min(5, params.density ?? 3));
+    const baseOp = params.opacity ?? 0.7;
+    const amp = Math.round(80 * (params.amplitude ?? 1));
+    const uid = `bg${speedMs}`;
+    const ellipseColors = [...colors, "#6366f1", "#ec4899", "#f59e0b", "#10b981", "#8b5cf6"].slice(0, count);
+    const ellipses = Array.from({ length: count }, (_, i) => {
+        const t = i / count;
+        const cx = Math.round(200 + t * 1040);
+        const dx = Math.round(Math.sin(i * 1.2) * amp);
+        const dy = Math.round(Math.cos(i * 0.9) * amp * 0.6);
+        const dur = speedMs * (0.9 + i * 0.2);
+        const delay = i * (speedMs / count / 3);
+        return { cx, cy: 200, rx: 280 - i * 20, ry: 220 - i * 15, fill: ellipseColors[i], dx, dy, dur, delay };
+    });
+    const css = ellipses.map((e, i) => `@keyframes ${uid}-e${i} { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(${e.dx}px,${e.dy}px) scale(1.1)} }
+    .${uid}-e${i}{animation:${uid}-e${i} ${e.dur}ms ease-in-out infinite;animation-delay:${e.delay}ms;transform-origin:${e.cx}px ${e.cy}px}`).join("");
+    return (_jsxs("svg", { viewBox: "0 0 1440 400", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid slice", style: { width: "100%", height: "100%", display: "block" }, children: [_jsxs("defs", { children: [_jsx("filter", { id: `${uid}-blur`, children: _jsx("feGaussianBlur", { stdDeviation: blurAmt }) }), _jsx("style", { children: css })] }), _jsx("g", { filter: `url(#${uid}-blur)`, children: ellipses.map((e, i) => (_jsx("ellipse", { className: `${uid}-e${i}`, cx: e.cx, cy: e.cy, rx: e.rx, ry: e.ry, fill: e.fill, opacity: baseOp }, i))) })] }));
+}
+// ─── Main export ──────────────────────────────────────────────────────────────
+export function AnimatedBackground({ type, colors = [], opacity = 1, speed = "normal", position = "bottom", params = {}, }) {
+    const speedMs = SPEED_MS[speed] ?? SPEED_MS.normal;
+    const containerStyle = {
+        position: "absolute",
+        top: 0, left: 0, right: 0, bottom: 0,
+        overflow: "hidden",
+        opacity,
+        pointerEvents: "none",
+        zIndex: 0,
+    };
+    const isWaveType = ["smooth_wave", "stepped_wave", "layered_peaks", "stacked_peaks", "layered_waves"].includes(type);
+    // Map extended positions to base position + rotation
+    const ROTATION_MAP = {
+        "top": { base: "top", rotate: "0deg", origin: "center top" },
+        "bottom": { base: "bottom", rotate: "0deg", origin: "center bottom" },
+        "full": { base: "full", rotate: "0deg", origin: "center" },
+        "left": { base: "bottom", rotate: "90deg", origin: "center" },
+        "right": { base: "bottom", rotate: "-90deg", origin: "center" },
+        "diagonal-tl": { base: "bottom", rotate: "135deg", origin: "center" },
+        "diagonal-tr": { base: "bottom", rotate: "-135deg", origin: "center" },
+        "diagonal-bl": { base: "bottom", rotate: "45deg", origin: "center" },
+        "diagonal-br": { base: "bottom", rotate: "-45deg", origin: "center" },
+    };
+    const posConfig = ROTATION_MAP[position] ?? ROTATION_MAP["bottom"];
+    const basePosition = posConfig.base;
+    const rotation = posConfig.rotate;
+    const needsRotation = rotation !== "0deg";
+    // Edge-wrap (bottom/top): wave sits at one edge, 60% height
+    // Rotated positions (left/right/diagonal): fill full 100% — rotation handles directionality
+    // After 90° rotation a 60%-height wave becomes 60%-width = tiny strip, so use 100%
+    const useEdgeWrap = isWaveType && basePosition !== "full" && !needsRotation;
+    const innerStyle = useEdgeWrap
+        ? { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, display: "flex", flexDirection: "column", justifyContent: basePosition === "top" ? "flex-start" : "flex-end" }
+        : { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 };
+    const heightPct = (params.amplitude ?? 1) > 1.5 ? "75%" : "60%";
+    const svgStyle = useEdgeWrap
+        ? { width: "100%", height: heightPct, flexShrink: 0 }
+        : { width: "100%", height: "100%" };
+    // Diagonal needs √2 ≈ 1.42 scale to cover corners; left/right fits at 1.0
+    const rotationScale = ["diagonal-tl", "diagonal-tr", "diagonal-bl", "diagonal-br"].includes(position) ? "1.45" : "1";
+    const rotationStyle = needsRotation ? {
+        position: "absolute",
+        top: "50%", left: "50%",
+        width: "100%", height: "100%",
+        transform: `translate(-50%, -50%) rotate(${rotation}) scale(${rotationScale})`,
+        transformOrigin: "center center",
+    } : {};
+    let bg = null;
+    switch (type) {
+        case "smooth_wave":
+            bg = _jsx(SmoothWave, { colors: colors, speedMs: speedMs, position: position, params: params });
+            break;
+        case "stepped_wave":
+            bg = _jsx(SteppedWave, { colors: colors, speedMs: speedMs, position: position, params: params });
+            break;
+        case "layered_peaks":
+            bg = _jsx(LayeredPeaks, { colors: colors, speedMs: speedMs, params: params });
+            break;
+        case "stacked_peaks":
+            bg = _jsx(StackedPeaks, { colors: colors, speedMs: speedMs, params: params });
+            break;
+        case "layered_waves":
+            bg = _jsx(LayeredWaves, { colors: colors, speedMs: speedMs, position: position, params: params });
+            break;
+        case "blob_scene":
+            bg = _jsx(BlobScene, { colors: colors, speedMs: speedMs, params: params });
+            break;
+        case "circle_scatter":
+            bg = _jsx(CircleScatter, { colors: colors, speedMs: speedMs, params: params });
+            break;
+        case "blurry_gradient":
+            bg = _jsx(BlurryGradient, { colors: colors, speedMs: speedMs, params: params });
+            break;
+        default: bg = _jsx(SmoothWave, { colors: colors, speedMs: speedMs, position: position, params: params });
+    }
+    const svgContent = (_jsx("div", { style: innerStyle, children: _jsx("div", { style: svgStyle, children: bg }) }));
+    return (_jsx("div", { style: containerStyle, "aria-hidden": "true", children: needsRotation
+            ? _jsx("div", { style: rotationStyle, children: svgContent })
+            : svgContent }));
+}
+//# sourceMappingURL=AnimatedBackground.js.map