@web-my-money/blocks 1.0.0

package/dist/fx.js

@@ -0,0 +1,1142 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/fx.ts
+var fx_exports = {};
+__export(fx_exports, {
+  AuroraBackground: () => AuroraBackground,
+  BACKGROUND_VARIANTS: () => BACKGROUND_VARIANTS,
+  BorderBeam: () => BorderBeam,
+  DesignStudio: () => DesignStudio,
+  Dock: () => Dock,
+  DynamicBackground: () => DynamicBackground,
+  FxPreferencesProvider: () => FxPreferencesProvider,
+  GridBackground: () => GridBackground,
+  Logo3D: () => Logo3D,
+  Magnetic: () => Magnetic,
+  MeshGradient: () => MeshGradient,
+  NoiseOverlay: () => NoiseOverlay,
+  ParticleField: () => ParticleField,
+  SpotlightBackground: () => SpotlightBackground,
+  SpotlightCard: () => SpotlightCard,
+  TextShimmer: () => TextShimmer,
+  TiltCard: () => TiltCard,
+  useFxPreferences: () => useFxPreferences,
+  useOptionalFxPreferences: () => useOptionalFxPreferences
+});
+module.exports = __toCommonJS(fx_exports);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/fx/aurora-background.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AuroraBackground({
+  blur = "80px",
+  intensity = 0.6,
+  speed = 18,
+  vignette = true,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      style: { opacity: intensity },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-wmm-fx": true,
+            className: "absolute -left-[10%] -top-[20%] h-[70%] w-[60%] rounded-full",
+            style: {
+              background: "radial-gradient(circle at center, color-mix(in srgb, var(--primary) 70%, transparent), transparent 70%)",
+              filter: `blur(${blur})`,
+              animation: `wmm-aurora-drift ${speed}s var(--ease-in-out, ease-in-out) infinite`
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-wmm-fx": true,
+            className: "absolute -right-[10%] top-[5%] h-[65%] w-[55%] rounded-full",
+            style: {
+              background: "radial-gradient(circle at center, color-mix(in srgb, var(--accent, var(--primary)) 65%, transparent), transparent 70%)",
+              filter: `blur(${blur})`,
+              animation: `wmm-aurora-drift-2 ${speed * 1.3}s var(--ease-in-out, ease-in-out) infinite`
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-wmm-fx": true,
+            className: "absolute bottom-[-15%] left-[25%] h-[55%] w-[50%] rounded-full",
+            style: {
+              background: "radial-gradient(circle at center, color-mix(in srgb, var(--primary) 50%, transparent), transparent 70%)",
+              filter: `blur(${blur})`,
+              animation: `wmm-aurora-drift ${speed * 0.85}s var(--ease-in-out, ease-in-out) infinite reverse`
+            }
+          }
+        ),
+        vignette && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: { background: "radial-gradient(ellipse at center, transparent 40%, var(--background) 100%)" }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/fx/mesh-gradient.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MeshGradient({
+  speed = 15,
+  intensity = 0.5,
+  static: isStatic = false,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      "data-wmm-fx": true,
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: {
+        opacity: intensity,
+        backgroundImage: [
+          "radial-gradient(at 20% 30%, color-mix(in srgb, var(--primary) 55%, transparent) 0px, transparent 50%)",
+          "radial-gradient(at 80% 20%, color-mix(in srgb, var(--accent, var(--primary)) 45%, transparent) 0px, transparent 50%)",
+          "radial-gradient(at 70% 80%, color-mix(in srgb, var(--primary) 40%, transparent) 0px, transparent 50%)",
+          "radial-gradient(at 25% 75%, color-mix(in srgb, var(--accent, var(--primary)) 35%, transparent) 0px, transparent 50%)"
+        ].join(", "),
+        backgroundSize: "150% 150%",
+        animation: isStatic ? void 0 : `wmm-mesh-pan ${speed}s var(--ease-in-out, ease-in-out) infinite`
+      }
+    }
+  );
+}
+
+// src/fx/grid-background.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function GridBackground({
+  variant = "dot",
+  size = 32,
+  spotlight = false,
+  spotlightRadius = 220,
+  fade = true,
+  className
+}) {
+  const ref = React.useRef(null);
+  const frame = React.useRef(null);
+  React.useEffect(() => {
+    if (!spotlight) return;
+    const el = ref.current;
+    if (!el) return;
+    const onMove = (e) => {
+      if (frame.current != null) return;
+      frame.current = requestAnimationFrame(() => {
+        frame.current = null;
+        const rect = el.getBoundingClientRect();
+        el.style.setProperty("--wmm-x", `${e.clientX - rect.left}px`);
+        el.style.setProperty("--wmm-y", `${e.clientY - rect.top}px`);
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      if (frame.current != null) cancelAnimationFrame(frame.current);
+    };
+  }, [spotlight]);
+  const lineColor = "color-mix(in srgb, var(--foreground) 10%, transparent)";
+  const gridImage = variant === "dot" ? `radial-gradient(${lineColor} 1px, transparent 1px)` : `linear-gradient(${lineColor} 1px, transparent 1px), linear-gradient(90deg, ${lineColor} 1px, transparent 1px)`;
+  const maskParts = [];
+  if (spotlight) {
+    maskParts.push(
+      `radial-gradient(${spotlightRadius}px circle at var(--wmm-x, -100%) var(--wmm-y, -100%), black 0%, transparent 100%)`
+    );
+  } else if (fade) {
+    maskParts.push("radial-gradient(ellipse at center, black 50%, transparent 100%)");
+  }
+  const maskStyle = maskParts.length > 0 ? { WebkitMaskImage: maskParts.join(", "), maskImage: maskParts.join(", ") } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      "aria-hidden": true,
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: {
+        backgroundImage: gridImage,
+        backgroundSize: `${size}px ${size}px`,
+        ...maskStyle
+      }
+    }
+  );
+}
+
+// src/fx/spotlight-background.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SpotlightBackground({
+  radius = 400,
+  intensity = 0.15,
+  idleFloat = true,
+  className
+}) {
+  const ref = React2.useRef(null);
+  const frame = React2.useRef(null);
+  const [active, setActive] = React2.useState(false);
+  React2.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onMove = (e) => {
+      if (frame.current != null) return;
+      frame.current = requestAnimationFrame(() => {
+        frame.current = null;
+        const rect = el.getBoundingClientRect();
+        el.style.setProperty("--wmm-x", `${e.clientX - rect.left}px`);
+        el.style.setProperty("--wmm-y", `${e.clientY - rect.top}px`);
+        if (!active) setActive(true);
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      if (frame.current != null) cancelAnimationFrame(frame.current);
+    };
+  }, [active]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      "aria-hidden": true,
+      "data-wmm-fx": idleFloat && !active ? "" : void 0,
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: {
+        background: `radial-gradient(${radius}px circle at var(--wmm-x, 50%) var(--wmm-y, 30%), color-mix(in srgb, var(--primary) ${Math.round(
+          intensity * 100
+        )}%, transparent), transparent 80%)`,
+        animation: idleFloat && !active ? "wmm-float 7s var(--ease-in-out, ease-in-out) infinite" : void 0,
+        transition: "background 120ms linear"
+      }
+    }
+  );
+}
+
+// src/fx/particle-field.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ParticleField({
+  count = 60,
+  connect = true,
+  linkDistance = 130,
+  color,
+  speed = 1,
+  interactive = true,
+  className
+}) {
+  const canvasRef = React3.useRef(null);
+  React3.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const resolvedColor = color || getComputedStyle(canvas).getPropertyValue("--primary").trim() || "currentColor";
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    let particles = [];
+    const mouse = { x: -9999, y: -9999 };
+    const isSmall = typeof window !== "undefined" && window.innerWidth < 768;
+    const n = Math.max(8, Math.round(isSmall ? count * 0.5 : count));
+    const resize = () => {
+      const parent = canvas.parentElement;
+      if (!parent) return;
+      dpr = Math.min(window.devicePixelRatio || 1, 1.5);
+      width = parent.clientWidth;
+      height = parent.clientHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+    const seed = () => {
+      particles = Array.from({ length: n }, () => ({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        vx: (Math.random() - 0.5) * 0.4 * speed,
+        vy: (Math.random() - 0.5) * 0.4 * speed
+      }));
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, width, height);
+      for (const p of particles) {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, 1.6, 0, Math.PI * 2);
+        ctx.fillStyle = resolvedColor;
+        ctx.globalAlpha = 0.7;
+        ctx.fill();
+      }
+      if (connect) {
+        for (let i = 0; i < particles.length; i++) {
+          for (let j = i + 1; j < particles.length; j++) {
+            const a = particles[i];
+            const b = particles[j];
+            const dx = a.x - b.x;
+            const dy = a.y - b.y;
+            const dist = Math.hypot(dx, dy);
+            if (dist < linkDistance) {
+              ctx.beginPath();
+              ctx.moveTo(a.x, a.y);
+              ctx.lineTo(b.x, b.y);
+              ctx.strokeStyle = resolvedColor;
+              ctx.globalAlpha = (1 - dist / linkDistance) * 0.25;
+              ctx.lineWidth = 1;
+              ctx.stroke();
+            }
+          }
+        }
+      }
+      ctx.globalAlpha = 1;
+    };
+    const step = () => {
+      for (const p of particles) {
+        p.x += p.vx;
+        p.y += p.vy;
+        if (interactive) {
+          const dx = mouse.x - p.x;
+          const dy = mouse.y - p.y;
+          const d = Math.hypot(dx, dy);
+          if (d < 120 && d > 0.1) {
+            p.x += dx / d * 0.4;
+            p.y += dy / d * 0.4;
+          }
+        }
+        if (p.x < 0 || p.x > width) p.vx *= -1;
+        if (p.y < 0 || p.y > height) p.vy *= -1;
+        p.x = Math.max(0, Math.min(width, p.x));
+        p.y = Math.max(0, Math.min(height, p.y));
+      }
+      draw();
+    };
+    let raf = 0;
+    let running = false;
+    const loop = () => {
+      step();
+      raf = requestAnimationFrame(loop);
+    };
+    const start = () => {
+      if (running || reduced) return;
+      running = true;
+      raf = requestAnimationFrame(loop);
+    };
+    const stop = () => {
+      running = false;
+      cancelAnimationFrame(raf);
+    };
+    resize();
+    seed();
+    draw();
+    const io = new IntersectionObserver(
+      ([entry]) => entry.isIntersecting ? start() : stop(),
+      { threshold: 0.01 }
+    );
+    io.observe(canvas);
+    const onVisibility = () => document.hidden ? stop() : start();
+    const onResize = () => {
+      resize();
+      seed();
+    };
+    const onMove = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      mouse.x = e.clientX - rect.left;
+      mouse.y = e.clientY - rect.top;
+    };
+    const onLeave = () => {
+      mouse.x = -9999;
+      mouse.y = -9999;
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    window.addEventListener("resize", onResize);
+    if (interactive) {
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerleave", onLeave);
+    }
+    return () => {
+      stop();
+      io.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerleave", onLeave);
+    };
+  }, [count, connect, linkDistance, color, speed, interactive]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      "aria-hidden": true,
+      className: cn("pointer-events-none absolute inset-0 h-full w-full", className)
+    }
+  );
+}
+
+// src/fx/noise-overlay.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NOISE_SVG = encodeURIComponent(
+  `<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>`
+).replace(/%23/g, "%23");
+function NoiseOverlay({ opacity = 0.04, blend = "overlay", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: {
+        opacity,
+        mixBlendMode: blend,
+        backgroundImage: `url("data:image/svg+xml,${NOISE_SVG}")`,
+        backgroundSize: "120px 120px"
+      }
+    }
+  );
+}
+
+// src/fx/preferences.tsx
+var React4 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BACKGROUND_VARIANTS = [
+  "none",
+  "aurora",
+  "mesh",
+  "grid",
+  "spotlight",
+  "particles"
+];
+var Ctx = React4.createContext(null);
+var PREFS_KEY = "wmm-fx-prefs";
+var THEME_KEY = "wmm-theme";
+function readStored() {
+  if (typeof window === "undefined") return {};
+  try {
+    return JSON.parse(window.localStorage.getItem(PREFS_KEY) || "{}");
+  } catch {
+    return {};
+  }
+}
+function FxPreferencesProvider({
+  children,
+  defaultBackground = "none"
+}) {
+  const [background, setBackgroundState] = React4.useState(defaultBackground);
+  const [logo, setLogoState] = React4.useState(null);
+  const [theme, setThemeState] = React4.useState("dark");
+  React4.useEffect(() => {
+    const stored = readStored();
+    if (stored.background) setBackgroundState(stored.background);
+    if (stored.logo !== void 0) setLogoState(stored.logo ?? null);
+    const domTheme = document.documentElement.dataset.theme || void 0;
+    const lsTheme = window.localStorage.getItem(THEME_KEY) || void 0;
+    if (domTheme || lsTheme) setThemeState(domTheme || lsTheme || "dark");
+  }, []);
+  const persist = React4.useCallback((next) => {
+    if (typeof window === "undefined") return;
+    const merged = { ...readStored(), ...next };
+    window.localStorage.setItem(PREFS_KEY, JSON.stringify(merged));
+  }, []);
+  const setBackground = React4.useCallback(
+    (b) => {
+      setBackgroundState(b);
+      persist({ background: b });
+    },
+    [persist]
+  );
+  const setLogo = React4.useCallback(
+    (id) => {
+      setLogoState(id);
+      persist({ logo: id });
+    },
+    [persist]
+  );
+  const setTheme = React4.useCallback((t) => {
+    setThemeState(t);
+    if (typeof document !== "undefined") {
+      document.documentElement.dataset.theme = t;
+      try {
+        window.localStorage.setItem(THEME_KEY, t);
+      } catch {
+      }
+    }
+  }, []);
+  const value = React4.useMemo(
+    () => ({ background, setBackground, logo, setLogo, theme, setTheme }),
+    [background, setBackground, logo, setLogo, theme, setTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Ctx.Provider, { value, children });
+}
+function useFxPreferences() {
+  const ctx = React4.useContext(Ctx);
+  if (!ctx) throw new Error("useFxPreferences must be used within <FxPreferencesProvider>");
+  return ctx;
+}
+function useOptionalFxPreferences() {
+  return React4.useContext(Ctx);
+}
+
+// src/fx/dynamic-background.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DynamicBackground({
+  variant,
+  noise = false,
+  aurora,
+  mesh,
+  grid,
+  spotlight,
+  particles,
+  className
+}) {
+  const prefs = useOptionalFxPreferences();
+  const active = variant ?? prefs?.background ?? "none";
+  let bg = null;
+  switch (active) {
+    case "aurora":
+      bg = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AuroraBackground, { ...aurora });
+      break;
+    case "mesh":
+      bg = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MeshGradient, { ...mesh });
+      break;
+    case "grid":
+      bg = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GridBackground, { ...grid });
+      break;
+    case "spotlight":
+      bg = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpotlightBackground, { ...spotlight });
+      break;
+    case "particles":
+      bg = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ParticleField, { ...particles });
+      break;
+    case "none":
+    default:
+      bg = null;
+  }
+  if (!bg && !noise) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "aria-hidden": true, className: className ?? "pointer-events-none absolute inset-0 overflow-hidden", children: [
+    bg,
+    noise && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoiseOverlay, {})
+  ] });
+}
+
+// src/fx/spotlight-card.tsx
+var React5 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function SpotlightCard({
+  radius = 320,
+  intensity = 0.12,
+  borderGlow = true,
+  className,
+  children,
+  style,
+  ...rest
+}) {
+  const ref = React5.useRef(null);
+  const frame = React5.useRef(null);
+  const onMove = React5.useCallback((e) => {
+    const el = ref.current;
+    if (!el || frame.current != null) return;
+    const cx = e.clientX;
+    const cy = e.clientY;
+    frame.current = requestAnimationFrame(() => {
+      frame.current = null;
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--wmm-x", `${cx - rect.left}px`);
+      el.style.setProperty("--wmm-y", `${cy - rect.top}px`);
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      ref,
+      onPointerMove: onMove,
+      className: cn(
+        "group/spot relative overflow-hidden rounded-2xl border border-border bg-card",
+        className
+      ),
+      style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover/spot:opacity-100",
+            style: {
+              background: `radial-gradient(${radius}px circle at var(--wmm-x, 50%) var(--wmm-y, 50%), color-mix(in srgb, var(--primary) ${Math.round(
+                intensity * 100
+              )}%, transparent), transparent 70%)`
+            }
+          }
+        ),
+        borderGlow && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover/spot:opacity-100",
+            style: {
+              background: `radial-gradient(${radius}px circle at var(--wmm-x, 50%) var(--wmm-y, 50%), color-mix(in srgb, var(--primary) 40%, transparent), transparent 60%)`,
+              WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+              WebkitMaskComposite: "xor",
+              maskComposite: "exclude",
+              padding: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative", children })
+      ]
+    }
+  );
+}
+
+// src/fx/tilt-card.tsx
+var React6 = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function TiltCard({
+  max = 10,
+  lift = 0,
+  glare = true,
+  className,
+  children,
+  style,
+  ...rest
+}) {
+  const ref = React6.useRef(null);
+  const px = (0, import_framer_motion.useMotionValue)(0.5);
+  const py = (0, import_framer_motion.useMotionValue)(0.5);
+  const sx = (0, import_framer_motion.useSpring)(px, { stiffness: 220, damping: 18 });
+  const sy = (0, import_framer_motion.useSpring)(py, { stiffness: 220, damping: 18 });
+  const rotateX = (0, import_framer_motion.useTransform)(sy, [0, 1], [max, -max]);
+  const rotateY = (0, import_framer_motion.useTransform)(sx, [0, 1], [-max, max]);
+  const glareX = (0, import_framer_motion.useTransform)(sx, [0, 1], ["0%", "100%"]);
+  const glareY = (0, import_framer_motion.useTransform)(sy, [0, 1], ["0%", "100%"]);
+  const glareBg = import_framer_motion.useMotionTemplate`radial-gradient(circle at ${glareX} ${glareY}, color-mix(in srgb, var(--foreground) 18%, transparent), transparent 60%)`;
+  const onMove = (e) => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    px.set((e.clientX - rect.left) / rect.width);
+    py.set((e.clientY - rect.top) / rect.height);
+  };
+  const onLeave = () => {
+    px.set(0.5);
+    py.set(0.5);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_framer_motion.motion.div,
+    {
+      ref,
+      onPointerMove: onMove,
+      onPointerLeave: onLeave,
+      style: { perspective: 900, ...style },
+      className: cn("relative", className),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        import_framer_motion.motion.div,
+        {
+          style: { rotateX, rotateY, transformStyle: "preserve-3d", translateZ: lift },
+          className: "relative h-full w-full rounded-2xl",
+          children: [
+            children,
+            glare && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_framer_motion.motion.div,
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-0 rounded-2xl",
+                style: { background: glareBg }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/fx/magnetic.tsx
+var React7 = __toESM(require("react"));
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Magnetic({ strength = 0.35, radius = 120, className, children }) {
+  const ref = React7.useRef(null);
+  const x = (0, import_framer_motion2.useMotionValue)(0);
+  const y = (0, import_framer_motion2.useMotionValue)(0);
+  const sx = (0, import_framer_motion2.useSpring)(x, { stiffness: 260, damping: 16, mass: 0.4 });
+  const sy = (0, import_framer_motion2.useSpring)(y, { stiffness: 260, damping: 16, mass: 0.4 });
+  React7.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onMove = (e) => {
+      const rect = el.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = e.clientX - cx;
+      const dy = e.clientY - cy;
+      const dist = Math.hypot(dx, dy);
+      if (dist < radius) {
+        x.set(dx * strength);
+        y.set(dy * strength);
+      } else {
+        x.set(0);
+        y.set(0);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    return () => window.removeEventListener("pointermove", onMove);
+  }, [strength, radius, x, y]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_framer_motion2.motion.div, { ref, style: { x: sx, y: sy }, className: cn("inline-flex", className), children });
+}
+
+// src/fx/border-beam.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function BorderBeam({
+  size = 1.5,
+  speed = 6,
+  radius = 16,
+  color = "var(--primary)",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      style: { borderRadius: radius },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            "data-wmm-fx": true,
+            className: "absolute left-1/2 top-1/2 aspect-square w-[140%]",
+            style: {
+              background: `conic-gradient(from 0deg, transparent 0deg, ${color} 60deg, transparent 120deg)`,
+              animation: `wmm-border-spin ${speed}s linear infinite`,
+              transform: "translate(-50%, -50%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: "absolute bg-card",
+            style: { inset: size, borderRadius: Math.max(0, radius - size) }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/fx/logo-3d.tsx
+var React8 = __toESM(require("react"));
+var import_framer_motion3 = require("framer-motion");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Logo3D({
+  children,
+  max = 18,
+  idle = true,
+  shadow = true,
+  sheen = true,
+  className
+}) {
+  const ref = React8.useRef(null);
+  const px = (0, import_framer_motion3.useMotionValue)(0.5);
+  const py = (0, import_framer_motion3.useMotionValue)(0.5);
+  const sx = (0, import_framer_motion3.useSpring)(px, { stiffness: 150, damping: 15 });
+  const sy = (0, import_framer_motion3.useSpring)(py, { stiffness: 150, damping: 15 });
+  const [hovering, setHovering] = React8.useState(false);
+  const rotateX = (0, import_framer_motion3.useTransform)(sy, [0, 1], [max, -max]);
+  const rotateY = (0, import_framer_motion3.useTransform)(sx, [0, 1], [-max, max]);
+  const sheenX = (0, import_framer_motion3.useTransform)(sx, [0, 1], ["0%", "100%"]);
+  const sheenY = (0, import_framer_motion3.useTransform)(sy, [0, 1], ["0%", "100%"]);
+  const sheenBg = import_framer_motion3.useMotionTemplate`radial-gradient(circle at ${sheenX} ${sheenY}, color-mix(in srgb, var(--foreground) 35%, transparent), transparent 55%)`;
+  const onMove = (e) => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    px.set((e.clientX - rect.left) / rect.width);
+    py.set((e.clientY - rect.top) / rect.height);
+  };
+  const onLeave = () => {
+    setHovering(false);
+    px.set(0.5);
+    py.set(0.5);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      ref,
+      onPointerMove: onMove,
+      onPointerEnter: () => setHovering(true),
+      onPointerLeave: onLeave,
+      className: cn("relative inline-flex select-none", className),
+      style: { perspective: 800 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_framer_motion3.motion.div,
+          {
+            "data-wmm-fx": idle && !hovering ? "" : void 0,
+            style: { rotateX, rotateY, transformStyle: "preserve-3d" },
+            className: "relative",
+            animate: idle && !hovering ? { y: [0, -8, 0] } : { y: 0 },
+            transition: idle && !hovering ? { duration: 5, repeat: Infinity, ease: "easeInOut" } : { duration: 0.3 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { transform: "translateZ(40px)" }, children }),
+              sheen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                import_framer_motion3.motion.div,
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0 mix-blend-overlay",
+                  style: { background: sheenBg, transform: "translateZ(41px)" }
+                }
+              )
+            ]
+          }
+        ),
+        shadow && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute -bottom-4 left-1/2 h-4 w-2/3 -translate-x-1/2 rounded-[50%]",
+            style: { background: "color-mix(in srgb, var(--foreground) 30%, transparent)", filter: "blur(12px)" }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/fx/text-shimmer.tsx
+var React9 = __toESM(require("react"));
+function TextShimmer({ children, className, duration = 2.5, as = "span" }) {
+  return React9.createElement(
+    as,
+    {
+      "data-wmm-fx": true,
+      className: cn("inline-block bg-clip-text text-transparent", className),
+      style: {
+        backgroundImage: "linear-gradient(90deg, var(--muted-foreground) 0%, var(--foreground) 50%, var(--muted-foreground) 100%)",
+        backgroundSize: "200% 100%",
+        animation: `wmm-shimmer ${duration}s linear infinite`
+      }
+    },
+    children
+  );
+}
+
+// src/fx/dock.tsx
+var React10 = __toESM(require("react"));
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var MouseCtx = React10.createContext(null);
+function Dock({ children, className, maxSize = 64, baseSize = 44 }) {
+  const mouseX = (0, import_framer_motion4.useMotionValue)(Infinity);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MouseCtx.Provider, { value: mouseX, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      "data-wmm-fx": true,
+      onMouseMove: (e) => mouseX.set(e.pageX),
+      onMouseLeave: () => mouseX.set(Infinity),
+      className: cn(
+        "mx-auto flex items-end gap-3 rounded-2xl border border-border bg-card/80 px-3 pb-2 pt-2 backdrop-blur",
+        className
+      ),
+      style: { height: maxSize + 16 },
+      children: React10.Children.map(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DockSlot, { maxSize, baseSize, children: child }))
+    }
+  ) });
+}
+function DockSlot({ children, maxSize, baseSize }) {
+  const ref = React10.useRef(null);
+  const mouseX = React10.useContext(MouseCtx);
+  const distance = (0, import_framer_motion4.useTransform)(mouseX, (val) => {
+    const b = ref.current?.getBoundingClientRect() ?? { x: 0, width: baseSize };
+    return val - b.x - b.width / 2;
+  });
+  const sizeRaw = (0, import_framer_motion4.useTransform)(distance, [-150, 0, 150], [baseSize, maxSize, baseSize]);
+  const size = (0, import_framer_motion4.useSpring)(sizeRaw, { mass: 0.1, stiffness: 150, damping: 12 });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_framer_motion4.motion.div,
+    {
+      ref,
+      style: { width: size, height: size },
+      className: "flex items-center justify-center rounded-xl bg-muted text-foreground",
+      children
+    }
+  );
+}
+
+// src/fx/design-studio.tsx
+var React11 = __toESM(require("react"));
+var import_framer_motion5 = require("framer-motion");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var THEMES = [
+  { id: "light", label: "Light" },
+  { id: "dark", label: "Dark" },
+  { id: "wmm", label: "WMM" }
+];
+var BG_LABEL = {
+  none: "None",
+  aurora: "Aurora",
+  mesh: "Mesh",
+  grid: "Grid",
+  spotlight: "Spotlight",
+  particles: "Particles"
+};
+var POSITION = {
+  "bottom-right": "bottom-5 right-5 origin-bottom-right",
+  "bottom-left": "bottom-5 left-5 origin-bottom-left",
+  "top-right": "top-5 right-5 origin-top-right",
+  "top-left": "top-5 left-5 origin-top-left"
+};
+function SparkleIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "path",
+      {
+        d: "M12 3l1.8 4.9L18.7 9 13.8 10.8 12 15.6 10.2 10.8 5.3 9l4.9-1.1L12 3z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M18.5 14.5l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7.7-1.9z", fill: "currentColor" })
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function BgSwatch({ variant }) {
+  const common = "absolute inset-0";
+  switch (variant) {
+    case "aurora":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          className: common,
+          style: {
+            background: "radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 80%, transparent), transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent, var(--primary)) 70%, transparent), transparent 60%)",
+            filter: "blur(4px)"
+          }
+        }
+      );
+    case "mesh":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          className: common,
+          style: {
+            background: "radial-gradient(at 20% 30%, color-mix(in srgb, var(--primary) 70%, transparent), transparent 50%), radial-gradient(at 80% 70%, color-mix(in srgb, var(--accent, var(--primary)) 60%, transparent), transparent 50%)"
+          }
+        }
+      );
+    case "grid":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          className: common,
+          style: {
+            backgroundImage: "radial-gradient(color-mix(in srgb, var(--foreground) 35%, transparent) 1px, transparent 1px)",
+            backgroundSize: "8px 8px"
+          }
+        }
+      );
+    case "spotlight":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "div",
+        {
+          className: common,
+          style: {
+            background: "radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--primary) 60%, transparent), transparent 70%)"
+          }
+        }
+      );
+    case "particles":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: common, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-1/4 top-1/3 h-1 w-1 rounded-full bg-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-2/3 top-1/4 h-1 w-1 rounded-full bg-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-1/2 top-2/3 h-1 w-1 rounded-full bg-primary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-1/3 top-3/4 h-px w-1/3 rotate-12 bg-primary/40" })
+      ] });
+    case "none":
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(common, "bg-muted/40") });
+  }
+}
+function DesignStudio({
+  position = "bottom-right",
+  title = "Design Studio",
+  showThemes = true,
+  showBackgrounds = true,
+  logos,
+  defaultOpen = false,
+  className
+}) {
+  const { background, setBackground, theme, setTheme, logo, setLogo } = useFxPreferences();
+  const [open, setOpen] = React11.useState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("fixed z-[1400]", POSITION[position], className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_framer_motion5.AnimatePresence, { mode: "popLayout", children: open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_framer_motion5.motion.div,
+    {
+      initial: { opacity: 0, scale: 0.9, y: 8 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.9, y: 8 },
+      transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] },
+      className: "w-72 rounded-2xl border border-border bg-card/95 p-4 text-foreground shadow-2xl backdrop-blur-xl",
+      style: { boxShadow: "var(--shadow-dialog, 0 20px 60px rgba(0,0,0,0.4))" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SparkleIcon, {}) }),
+            title
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: () => setOpen(false),
+              "aria-label": "Close design studio",
+              className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseIcon, {})
+            }
+          )
+        ] }),
+        showThemes && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "mb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Theme" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: THEMES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: () => setTheme(t.id),
+              className: cn(
+                "rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors",
+                theme === t.id ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground"
+              ),
+              children: t.label
+            },
+            t.id
+          )) })
+        ] }),
+        showBackgrounds && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "mb-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Background" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: BACKGROUND_VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "button",
+            {
+              onClick: () => setBackground(v),
+              className: cn(
+                "group relative flex h-14 flex-col overflow-hidden rounded-lg border text-left transition-colors",
+                background === v ? "border-primary ring-1 ring-primary" : "border-border hover:border-primary/40"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "relative flex-1 overflow-hidden bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BgSwatch, { variant: v }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 text-[10px] font-medium",
+                      background === v ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground"
+                    ),
+                    children: BG_LABEL[v]
+                  }
+                )
+              ]
+            },
+            v
+          )) })
+        ] }),
+        logos && logos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "mt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Logo" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-wrap gap-2", children: logos.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: () => setLogo(opt.id),
+              title: opt.label,
+              className: cn(
+                "flex h-16 w-16 items-center justify-center overflow-hidden rounded-lg border bg-background p-2 transition-colors",
+                logo === opt.id ? "border-primary ring-1 ring-primary" : "border-border hover:border-primary/40"
+              ),
+              children: opt.node
+            },
+            opt.id
+          )) })
+        ] })
+      ]
+    },
+    "panel"
+  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_framer_motion5.motion.button,
+    {
+      initial: { opacity: 0, scale: 0.8 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.8 },
+      onClick: () => setOpen(true),
+      "aria-label": "Open design studio",
+      className: "flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card text-primary shadow-xl backdrop-blur-xl transition-transform hover:scale-105",
+      style: { boxShadow: "var(--glow-primary, 0 0 40px rgba(0,0,0,0.2))" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SparkleIcon, {})
+    },
+    "fab"
+  ) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuroraBackground,
+  BACKGROUND_VARIANTS,
+  BorderBeam,
+  DesignStudio,
+  Dock,
+  DynamicBackground,
+  FxPreferencesProvider,
+  GridBackground,
+  Logo3D,
+  Magnetic,
+  MeshGradient,
+  NoiseOverlay,
+  ParticleField,
+  SpotlightBackground,
+  SpotlightCard,
+  TextShimmer,
+  TiltCard,
+  useFxPreferences,
+  useOptionalFxPreferences
+});