@web-my-money/blocks 1.0.0

package/dist/fx.d.mts

@@ -0,0 +1,314 @@
+import * as React from 'react';
+
+interface AuroraBackgroundProps {
+    /** Blur radius of the aurora blobs. Default "80px". */
+    blur?: string;
+    /** Overall opacity 0–1. Default 0.6. */
+    intensity?: number;
+    /** Animation duration in seconds for one drift cycle. Default 18. */
+    speed?: number;
+    /** Render a subtle radial vignette over the blobs. Default true. */
+    vignette?: boolean;
+    className?: string;
+}
+/**
+ * Animated aurora — slowly drifting blurred color blobs. Pure CSS, GPU-only
+ * (transform/opacity), no JS in the render loop. Theme-aware: pulls --primary
+ * and --accent via color-mix so it re-skins per brand.
+ *
+ *   <div className="relative">
+ *     <AuroraBackground />
+ *     <YourContent />
+ *   </div>
+ */
+declare function AuroraBackground({ blur, intensity, speed, vignette, className, }: AuroraBackgroundProps): React.JSX.Element;
+
+interface MeshGradientProps {
+    /** Animation duration in seconds. Default 15. */
+    speed?: number;
+    /** Overall opacity 0–1. Default 0.5. */
+    intensity?: number;
+    /** Static (no animation). Default false. */
+    static?: boolean;
+    className?: string;
+}
+/**
+ * Animated mesh gradient — multiple soft radial color stops panned across the
+ * surface. Pure CSS (background-position animation). Theme-aware via tokens.
+ */
+declare function MeshGradient({ speed, intensity, static: isStatic, className, }: MeshGradientProps): React.JSX.Element;
+
+interface GridBackgroundProps {
+    /** "dot" (default) or "line" grid. */
+    variant?: "dot" | "line";
+    /** Grid cell size in px. Default 32. */
+    size?: number;
+    /** Reveal the grid under a cursor-following spotlight only. Default false (grid always visible). */
+    spotlight?: boolean;
+    /** Spotlight radius in px when spotlight=true. Default 220. */
+    spotlightRadius?: number;
+    /** Fade the grid toward the edges. Default true. */
+    fade?: boolean;
+    className?: string;
+}
+/**
+ * Dot or line grid background. Optionally only reveals near the cursor
+ * (spotlight mode). Theme-aware (uses --border / faint foreground). The
+ * spotlight handler only writes two CSS vars on rAF — cheap.
+ */
+declare function GridBackground({ variant, size, spotlight, spotlightRadius, fade, className, }: GridBackgroundProps): React.JSX.Element;
+
+interface SpotlightBackgroundProps {
+    /** Spotlight radius in px. Default 400. */
+    radius?: number;
+    /** Spotlight opacity 0–1. Default 0.15. */
+    intensity?: number;
+    /** When true, the spotlight gently floats on its own until the pointer moves. Default true. */
+    idleFloat?: boolean;
+    className?: string;
+}
+/**
+ * A large radial glow that follows the cursor across the section — the classic
+ * "spotlight" hero effect. Uses --primary, theme-aware. Pointer handler is
+ * rAF-throttled and only writes CSS vars.
+ */
+declare function SpotlightBackground({ radius, intensity, idleFloat, className, }: SpotlightBackgroundProps): React.JSX.Element;
+
+interface ParticleFieldProps {
+    /** Particle count. Auto-scaled down on small screens. Default 60. */
+    count?: number;
+    /** Draw connecting lines between nearby particles. Default true. */
+    connect?: boolean;
+    /** Max distance (px) to draw a connection. Default 130. */
+    linkDistance?: number;
+    /** Particle + line color. Defaults to the live --primary token, falls back to currentColor. */
+    color?: string;
+    /** Particle drift speed multiplier. Default 1. */
+    speed?: number;
+    /** Particles gently drift toward the cursor. Default true. */
+    interactive?: boolean;
+    className?: string;
+}
+/**
+ * Lightweight canvas "constellation" — drifting particles with proximity links.
+ * Performance guards: capped count, single rAF, pauses when off-screen or tab
+ * hidden, honors prefers-reduced-motion (renders one static frame). No deps.
+ * Color is read from the live --primary CSS var so it adapts per theme/brand.
+ */
+declare function ParticleField({ count, connect, linkDistance, color, speed, interactive, className, }: ParticleFieldProps): React.JSX.Element;
+
+interface NoiseOverlayProps {
+    /** Opacity 0–1. Default 0.04. */
+    opacity?: number;
+    /** Blend mode for the grain. Default "overlay". */
+    blend?: React.CSSProperties["mixBlendMode"];
+    className?: string;
+}
+/**
+ * Film-grain / noise overlay. Composes on top of any background to add texture
+ * and break up gradient banding. ~0 cost — a single repeating data-URI SVG.
+ */
+declare function NoiseOverlay({ opacity, blend, className }: NoiseOverlayProps): React.JSX.Element;
+
+type BackgroundVariant = "none" | "aurora" | "mesh" | "grid" | "spotlight" | "particles";
+type FxThemeName = "light" | "dark" | "wmm";
+declare const BACKGROUND_VARIANTS: BackgroundVariant[];
+interface FxPreferences {
+    background: BackgroundVariant;
+    setBackground: (b: BackgroundVariant) => void;
+    /** Selected logo option id (when a logo picker is wired into the studio). */
+    logo: string | null;
+    setLogo: (id: string | null) => void;
+    /** Theme — mirrors @web-my-money/tokens runtime (data-theme + `wmm-theme`). */
+    theme: FxThemeName;
+    setTheme: (t: FxThemeName) => void;
+}
+interface FxPreferencesProviderProps {
+    children: React.ReactNode;
+    /** Background shown before the user picks one. Default "none". */
+    defaultBackground?: BackgroundVariant;
+}
+/**
+ * Holds the user's live design choices (background + logo + theme) and persists
+ * them to localStorage. Theme is written with the SAME attribute/key as
+ * @web-my-money/tokens, so the two stay in sync without a hard dependency.
+ *
+ *   <FxPreferencesProvider>
+ *     <DynamicBackground />   // reflects the choice
+ *     <DesignStudio />        // changes the choice
+ *     {app}
+ *   </FxPreferencesProvider>
+ */
+declare function FxPreferencesProvider({ children, defaultBackground, }: FxPreferencesProviderProps): React.JSX.Element;
+/** Read + control design preferences. Must be inside <FxPreferencesProvider>. */
+declare function useFxPreferences(): FxPreferences;
+/** Internal — nullable read so uncontrolled components degrade gracefully. */
+declare function useOptionalFxPreferences(): FxPreferences | null;
+
+interface DynamicBackgroundProps {
+    /**
+     * Which background to render. If omitted, reads the current choice from
+     * <FxPreferencesProvider> (controlled by <DesignStudio>). Defaults to "none".
+     */
+    variant?: BackgroundVariant;
+    /** Overlay film grain on top of the background. Default false. */
+    noise?: boolean;
+    /** Per-variant prop overrides. */
+    aurora?: AuroraBackgroundProps;
+    mesh?: MeshGradientProps;
+    grid?: GridBackgroundProps;
+    spotlight?: SpotlightBackgroundProps;
+    particles?: ParticleFieldProps;
+    className?: string;
+}
+/**
+ * Resolver that renders whichever dynamic background is selected — either via
+ * the `variant` prop (uncontrolled) or from FxPreferences (controlled by the
+ * DesignStudio). Drop one of these behind your content.
+ */
+declare function DynamicBackground({ variant, noise, aurora, mesh, grid, spotlight, particles, className, }: DynamicBackgroundProps): React.JSX.Element | null;
+
+interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Glow radius in px. Default 320. */
+    radius?: number;
+    /** Glow strength 0–1. Default 0.12. */
+    intensity?: number;
+    /** Also brighten the border under the cursor. Default true. */
+    borderGlow?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Card with a cursor-following radial glow (Linear / Vercel style). The glow is
+ * a layer whose position is driven by two CSS vars updated on rAF — no re-render
+ * per mouse move. Theme-aware via --primary.
+ */
+declare function SpotlightCard({ radius, intensity, borderGlow, className, children, style, ...rest }: SpotlightCardProps): React.JSX.Element;
+
+interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Max tilt in degrees. Default 10. */
+    max?: number;
+    /** Lift the card toward the viewer on hover (px of translateZ). Default 0. */
+    lift?: number;
+    /** Add a glare highlight that follows the cursor. Default true. */
+    glare?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * 3D tilt-on-hover card. Pointer position maps to rotateX/rotateY with a spring
+ * for buttery motion (framer-motion, already a blocks dep). Honors reduced-motion
+ * by simply not tilting.
+ */
+declare function TiltCard({ max, lift, glare, className, children, style, ...rest }: TiltCardProps): React.JSX.Element;
+
+interface MagneticProps {
+    /** How strongly the element is pulled toward the cursor, 0–1. Default 0.35. */
+    strength?: number;
+    /** Activation radius in px around the element. Default 120. */
+    radius?: number;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Magnetic wrapper — pulls its child toward the cursor when nearby, springs back
+ * on leave. Wrap a button, icon, or logo. Spring-driven (framer-motion).
+ */
+declare function Magnetic({ strength, radius, className, children }: MagneticProps): React.JSX.Element;
+
+interface BorderBeamProps {
+    /** Border thickness in px. Default 1.5. */
+    size?: number;
+    /** Seconds for one full revolution. Default 6. */
+    speed?: number;
+    /** Corner radius to match the parent, in px. Default 16. */
+    radius?: number;
+    /** Beam color. Defaults to --primary. */
+    color?: string;
+    className?: string;
+}
+/**
+ * Animated gradient border — a light sweeps continuously around the edge
+ * (Magic UI "border beam" style). Implemented with a single rotating conic
+ * gradient clipped to a thin rim via mask compositing — no @property, works
+ * everywhere. Place inside a `position: relative` parent.
+ */
+declare function BorderBeam({ size, speed, radius, color, className, }: BorderBeamProps): React.JSX.Element;
+
+interface Logo3DProps {
+    /** The logo to render in 3D — an <svg>, <img>, or any node. */
+    children: React.ReactNode;
+    /** Max tilt in degrees. Default 18. */
+    max?: number;
+    /** Gently float + auto-rotate when the pointer is away. Default true. */
+    idle?: boolean;
+    /** Drop a soft contact shadow beneath the logo. Default true. */
+    shadow?: boolean;
+    /** Specular sheen that tracks the tilt. Default true. */
+    sheen?: boolean;
+    className?: string;
+}
+/**
+ * Real-time CSS-3D logo treatment — interactive parallax tilt with idle float,
+ * depth shadow, and a moving sheen. Works with ANY logo node (the WMM mark SVG,
+ * a client <img>, etc.). Zero WebGL, zero binary assets — light and fast.
+ * For a fully rendered 3D logo, drop a pre-rendered asset in as `children`.
+ */
+declare function Logo3D({ children, max, idle, shadow, sheen, className, }: Logo3DProps): React.JSX.Element;
+
+interface TextShimmerProps {
+    children: string;
+    className?: string;
+    /** seconds per sweep */
+    duration?: number;
+    as?: React.ElementType;
+}
+/** Shimmering gradient sweep over text (Motion-Primitives-style, pure CSS). */
+declare function TextShimmer({ children, className, duration, as }: TextShimmerProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+interface DockProps {
+    children: React.ReactNode;
+    className?: string;
+    /** max magnified size (px) */
+    maxSize?: number;
+    baseSize?: number;
+}
+/** macOS-style magnifying dock (Motion-Primitives-style). Wrap DockItem children. */
+declare function Dock({ children, className, maxSize, baseSize }: DockProps): React.JSX.Element;
+
+interface DesignStudioLogoOption {
+    id: string;
+    label: string;
+    /** Rendered live in the picker and returned via useFxPreferences().logo. */
+    node: React.ReactNode;
+}
+interface DesignStudioProps {
+    /** Panel corner. Default "bottom-right". */
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Panel title. Default "Design Studio". */
+    title?: string;
+    /** Show the theme switcher. Default true. */
+    showThemes?: boolean;
+    /** Show the background picker. Default true. */
+    showBackgrounds?: boolean;
+    /** Optional logo options — when provided, a logo picker section is shown. */
+    logos?: DesignStudioLogoOption[];
+    /** Start opened. Default false. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+/**
+ * Floating control panel that drives theme + dynamic background (+ optional
+ * logo) live across the whole app. Reads/writes <FxPreferencesProvider>, so
+ * pair it with <DynamicBackground />. Brand-agnostic — fully token-styled.
+ *
+ *   <FxPreferencesProvider>
+ *     <DynamicBackground />
+ *     <DesignStudio logos={[
+ *       { id: "2d", label: "2D", node: <WmmLogo variant="mark" size={40} /> },
+ *       { id: "3d", label: "3D", node: <Logo3D><WmmLogo variant="mark" size={40} /></Logo3D> },
+ *     ]} />
+ *     {children}
+ *   </FxPreferencesProvider>
+ */
+declare function DesignStudio({ position, title, showThemes, showBackgrounds, logos, defaultOpen, className, }: DesignStudioProps): React.JSX.Element;
+
+export { AuroraBackground, type AuroraBackgroundProps, BACKGROUND_VARIANTS, type BackgroundVariant, BorderBeam, type BorderBeamProps, DesignStudio, type DesignStudioLogoOption, type DesignStudioProps, Dock, type DockProps, DynamicBackground, type DynamicBackgroundProps, FxPreferencesProvider, type FxPreferencesProviderProps, type FxThemeName, GridBackground, type GridBackgroundProps, Logo3D, type Logo3DProps, Magnetic, type MagneticProps, MeshGradient, type MeshGradientProps, NoiseOverlay, type NoiseOverlayProps, ParticleField, type ParticleFieldProps, SpotlightBackground, type SpotlightBackgroundProps, SpotlightCard, type SpotlightCardProps, TextShimmer, type TextShimmerProps, TiltCard, type TiltCardProps, useFxPreferences, useOptionalFxPreferences };

package/dist/fx.d.ts

@@ -0,0 +1,314 @@
+import * as React from 'react';
+
+interface AuroraBackgroundProps {
+    /** Blur radius of the aurora blobs. Default "80px". */
+    blur?: string;
+    /** Overall opacity 0–1. Default 0.6. */
+    intensity?: number;
+    /** Animation duration in seconds for one drift cycle. Default 18. */
+    speed?: number;
+    /** Render a subtle radial vignette over the blobs. Default true. */
+    vignette?: boolean;
+    className?: string;
+}
+/**
+ * Animated aurora — slowly drifting blurred color blobs. Pure CSS, GPU-only
+ * (transform/opacity), no JS in the render loop. Theme-aware: pulls --primary
+ * and --accent via color-mix so it re-skins per brand.
+ *
+ *   <div className="relative">
+ *     <AuroraBackground />
+ *     <YourContent />
+ *   </div>
+ */
+declare function AuroraBackground({ blur, intensity, speed, vignette, className, }: AuroraBackgroundProps): React.JSX.Element;
+
+interface MeshGradientProps {
+    /** Animation duration in seconds. Default 15. */
+    speed?: number;
+    /** Overall opacity 0–1. Default 0.5. */
+    intensity?: number;
+    /** Static (no animation). Default false. */
+    static?: boolean;
+    className?: string;
+}
+/**
+ * Animated mesh gradient — multiple soft radial color stops panned across the
+ * surface. Pure CSS (background-position animation). Theme-aware via tokens.
+ */
+declare function MeshGradient({ speed, intensity, static: isStatic, className, }: MeshGradientProps): React.JSX.Element;
+
+interface GridBackgroundProps {
+    /** "dot" (default) or "line" grid. */
+    variant?: "dot" | "line";
+    /** Grid cell size in px. Default 32. */
+    size?: number;
+    /** Reveal the grid under a cursor-following spotlight only. Default false (grid always visible). */
+    spotlight?: boolean;
+    /** Spotlight radius in px when spotlight=true. Default 220. */
+    spotlightRadius?: number;
+    /** Fade the grid toward the edges. Default true. */
+    fade?: boolean;
+    className?: string;
+}
+/**
+ * Dot or line grid background. Optionally only reveals near the cursor
+ * (spotlight mode). Theme-aware (uses --border / faint foreground). The
+ * spotlight handler only writes two CSS vars on rAF — cheap.
+ */
+declare function GridBackground({ variant, size, spotlight, spotlightRadius, fade, className, }: GridBackgroundProps): React.JSX.Element;
+
+interface SpotlightBackgroundProps {
+    /** Spotlight radius in px. Default 400. */
+    radius?: number;
+    /** Spotlight opacity 0–1. Default 0.15. */
+    intensity?: number;
+    /** When true, the spotlight gently floats on its own until the pointer moves. Default true. */
+    idleFloat?: boolean;
+    className?: string;
+}
+/**
+ * A large radial glow that follows the cursor across the section — the classic
+ * "spotlight" hero effect. Uses --primary, theme-aware. Pointer handler is
+ * rAF-throttled and only writes CSS vars.
+ */
+declare function SpotlightBackground({ radius, intensity, idleFloat, className, }: SpotlightBackgroundProps): React.JSX.Element;
+
+interface ParticleFieldProps {
+    /** Particle count. Auto-scaled down on small screens. Default 60. */
+    count?: number;
+    /** Draw connecting lines between nearby particles. Default true. */
+    connect?: boolean;
+    /** Max distance (px) to draw a connection. Default 130. */
+    linkDistance?: number;
+    /** Particle + line color. Defaults to the live --primary token, falls back to currentColor. */
+    color?: string;
+    /** Particle drift speed multiplier. Default 1. */
+    speed?: number;
+    /** Particles gently drift toward the cursor. Default true. */
+    interactive?: boolean;
+    className?: string;
+}
+/**
+ * Lightweight canvas "constellation" — drifting particles with proximity links.
+ * Performance guards: capped count, single rAF, pauses when off-screen or tab
+ * hidden, honors prefers-reduced-motion (renders one static frame). No deps.
+ * Color is read from the live --primary CSS var so it adapts per theme/brand.
+ */
+declare function ParticleField({ count, connect, linkDistance, color, speed, interactive, className, }: ParticleFieldProps): React.JSX.Element;
+
+interface NoiseOverlayProps {
+    /** Opacity 0–1. Default 0.04. */
+    opacity?: number;
+    /** Blend mode for the grain. Default "overlay". */
+    blend?: React.CSSProperties["mixBlendMode"];
+    className?: string;
+}
+/**
+ * Film-grain / noise overlay. Composes on top of any background to add texture
+ * and break up gradient banding. ~0 cost — a single repeating data-URI SVG.
+ */
+declare function NoiseOverlay({ opacity, blend, className }: NoiseOverlayProps): React.JSX.Element;
+
+type BackgroundVariant = "none" | "aurora" | "mesh" | "grid" | "spotlight" | "particles";
+type FxThemeName = "light" | "dark" | "wmm";
+declare const BACKGROUND_VARIANTS: BackgroundVariant[];
+interface FxPreferences {
+    background: BackgroundVariant;
+    setBackground: (b: BackgroundVariant) => void;
+    /** Selected logo option id (when a logo picker is wired into the studio). */
+    logo: string | null;
+    setLogo: (id: string | null) => void;
+    /** Theme — mirrors @web-my-money/tokens runtime (data-theme + `wmm-theme`). */
+    theme: FxThemeName;
+    setTheme: (t: FxThemeName) => void;
+}
+interface FxPreferencesProviderProps {
+    children: React.ReactNode;
+    /** Background shown before the user picks one. Default "none". */
+    defaultBackground?: BackgroundVariant;
+}
+/**
+ * Holds the user's live design choices (background + logo + theme) and persists
+ * them to localStorage. Theme is written with the SAME attribute/key as
+ * @web-my-money/tokens, so the two stay in sync without a hard dependency.
+ *
+ *   <FxPreferencesProvider>
+ *     <DynamicBackground />   // reflects the choice
+ *     <DesignStudio />        // changes the choice
+ *     {app}
+ *   </FxPreferencesProvider>
+ */
+declare function FxPreferencesProvider({ children, defaultBackground, }: FxPreferencesProviderProps): React.JSX.Element;
+/** Read + control design preferences. Must be inside <FxPreferencesProvider>. */
+declare function useFxPreferences(): FxPreferences;
+/** Internal — nullable read so uncontrolled components degrade gracefully. */
+declare function useOptionalFxPreferences(): FxPreferences | null;
+
+interface DynamicBackgroundProps {
+    /**
+     * Which background to render. If omitted, reads the current choice from
+     * <FxPreferencesProvider> (controlled by <DesignStudio>). Defaults to "none".
+     */
+    variant?: BackgroundVariant;
+    /** Overlay film grain on top of the background. Default false. */
+    noise?: boolean;
+    /** Per-variant prop overrides. */
+    aurora?: AuroraBackgroundProps;
+    mesh?: MeshGradientProps;
+    grid?: GridBackgroundProps;
+    spotlight?: SpotlightBackgroundProps;
+    particles?: ParticleFieldProps;
+    className?: string;
+}
+/**
+ * Resolver that renders whichever dynamic background is selected — either via
+ * the `variant` prop (uncontrolled) or from FxPreferences (controlled by the
+ * DesignStudio). Drop one of these behind your content.
+ */
+declare function DynamicBackground({ variant, noise, aurora, mesh, grid, spotlight, particles, className, }: DynamicBackgroundProps): React.JSX.Element | null;
+
+interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Glow radius in px. Default 320. */
+    radius?: number;
+    /** Glow strength 0–1. Default 0.12. */
+    intensity?: number;
+    /** Also brighten the border under the cursor. Default true. */
+    borderGlow?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Card with a cursor-following radial glow (Linear / Vercel style). The glow is
+ * a layer whose position is driven by two CSS vars updated on rAF — no re-render
+ * per mouse move. Theme-aware via --primary.
+ */
+declare function SpotlightCard({ radius, intensity, borderGlow, className, children, style, ...rest }: SpotlightCardProps): React.JSX.Element;
+
+interface TiltCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Max tilt in degrees. Default 10. */
+    max?: number;
+    /** Lift the card toward the viewer on hover (px of translateZ). Default 0. */
+    lift?: number;
+    /** Add a glare highlight that follows the cursor. Default true. */
+    glare?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * 3D tilt-on-hover card. Pointer position maps to rotateX/rotateY with a spring
+ * for buttery motion (framer-motion, already a blocks dep). Honors reduced-motion
+ * by simply not tilting.
+ */
+declare function TiltCard({ max, lift, glare, className, children, style, ...rest }: TiltCardProps): React.JSX.Element;
+
+interface MagneticProps {
+    /** How strongly the element is pulled toward the cursor, 0–1. Default 0.35. */
+    strength?: number;
+    /** Activation radius in px around the element. Default 120. */
+    radius?: number;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Magnetic wrapper — pulls its child toward the cursor when nearby, springs back
+ * on leave. Wrap a button, icon, or logo. Spring-driven (framer-motion).
+ */
+declare function Magnetic({ strength, radius, className, children }: MagneticProps): React.JSX.Element;
+
+interface BorderBeamProps {
+    /** Border thickness in px. Default 1.5. */
+    size?: number;
+    /** Seconds for one full revolution. Default 6. */
+    speed?: number;
+    /** Corner radius to match the parent, in px. Default 16. */
+    radius?: number;
+    /** Beam color. Defaults to --primary. */
+    color?: string;
+    className?: string;
+}
+/**
+ * Animated gradient border — a light sweeps continuously around the edge
+ * (Magic UI "border beam" style). Implemented with a single rotating conic
+ * gradient clipped to a thin rim via mask compositing — no @property, works
+ * everywhere. Place inside a `position: relative` parent.
+ */
+declare function BorderBeam({ size, speed, radius, color, className, }: BorderBeamProps): React.JSX.Element;
+
+interface Logo3DProps {
+    /** The logo to render in 3D — an <svg>, <img>, or any node. */
+    children: React.ReactNode;
+    /** Max tilt in degrees. Default 18. */
+    max?: number;
+    /** Gently float + auto-rotate when the pointer is away. Default true. */
+    idle?: boolean;
+    /** Drop a soft contact shadow beneath the logo. Default true. */
+    shadow?: boolean;
+    /** Specular sheen that tracks the tilt. Default true. */
+    sheen?: boolean;
+    className?: string;
+}
+/**
+ * Real-time CSS-3D logo treatment — interactive parallax tilt with idle float,
+ * depth shadow, and a moving sheen. Works with ANY logo node (the WMM mark SVG,
+ * a client <img>, etc.). Zero WebGL, zero binary assets — light and fast.
+ * For a fully rendered 3D logo, drop a pre-rendered asset in as `children`.
+ */
+declare function Logo3D({ children, max, idle, shadow, sheen, className, }: Logo3DProps): React.JSX.Element;
+
+interface TextShimmerProps {
+    children: string;
+    className?: string;
+    /** seconds per sweep */
+    duration?: number;
+    as?: React.ElementType;
+}
+/** Shimmering gradient sweep over text (Motion-Primitives-style, pure CSS). */
+declare function TextShimmer({ children, className, duration, as }: TextShimmerProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+interface DockProps {
+    children: React.ReactNode;
+    className?: string;
+    /** max magnified size (px) */
+    maxSize?: number;
+    baseSize?: number;
+}
+/** macOS-style magnifying dock (Motion-Primitives-style). Wrap DockItem children. */
+declare function Dock({ children, className, maxSize, baseSize }: DockProps): React.JSX.Element;
+
+interface DesignStudioLogoOption {
+    id: string;
+    label: string;
+    /** Rendered live in the picker and returned via useFxPreferences().logo. */
+    node: React.ReactNode;
+}
+interface DesignStudioProps {
+    /** Panel corner. Default "bottom-right". */
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Panel title. Default "Design Studio". */
+    title?: string;
+    /** Show the theme switcher. Default true. */
+    showThemes?: boolean;
+    /** Show the background picker. Default true. */
+    showBackgrounds?: boolean;
+    /** Optional logo options — when provided, a logo picker section is shown. */
+    logos?: DesignStudioLogoOption[];
+    /** Start opened. Default false. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+/**
+ * Floating control panel that drives theme + dynamic background (+ optional
+ * logo) live across the whole app. Reads/writes <FxPreferencesProvider>, so
+ * pair it with <DynamicBackground />. Brand-agnostic — fully token-styled.
+ *
+ *   <FxPreferencesProvider>
+ *     <DynamicBackground />
+ *     <DesignStudio logos={[
+ *       { id: "2d", label: "2D", node: <WmmLogo variant="mark" size={40} /> },
+ *       { id: "3d", label: "3D", node: <Logo3D><WmmLogo variant="mark" size={40} /></Logo3D> },
+ *     ]} />
+ *     {children}
+ *   </FxPreferencesProvider>
+ */
+declare function DesignStudio({ position, title, showThemes, showBackgrounds, logos, defaultOpen, className, }: DesignStudioProps): React.JSX.Element;
+
+export { AuroraBackground, type AuroraBackgroundProps, BACKGROUND_VARIANTS, type BackgroundVariant, BorderBeam, type BorderBeamProps, DesignStudio, type DesignStudioLogoOption, type DesignStudioProps, Dock, type DockProps, DynamicBackground, type DynamicBackgroundProps, FxPreferencesProvider, type FxPreferencesProviderProps, type FxThemeName, GridBackground, type GridBackgroundProps, Logo3D, type Logo3DProps, Magnetic, type MagneticProps, MeshGradient, type MeshGradientProps, NoiseOverlay, type NoiseOverlayProps, ParticleField, type ParticleFieldProps, SpotlightBackground, type SpotlightBackgroundProps, SpotlightCard, type SpotlightCardProps, TextShimmer, type TextShimmerProps, TiltCard, type TiltCardProps, useFxPreferences, useOptionalFxPreferences };