@mova-ui/react 0.1.0 → 0.4.1

package/registry/reveal-text.json

@@ -0,0 +1,19 @@
+{
+  "id": "reveal-text",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "reveal-text.tsx",
+  "registryFile": "reveal-text.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './reveal-text';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// reveal-text.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-reveal\", \"label\": \"Reveal Text\", \"interactionType\": \"reveal-text\", \"description\": \"Cinematic reveal using clip-path inset.\", \"cliCommand\": \"npx @mova-ui/react add reveal-text\", \"category\": \"Reveals\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/ribbon-banner-slide.json

@@ -0,0 +1,15 @@
+{
+  "id": "ribbon-banner-slide",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "ribbon-banner-slide.tsx",
+  "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
+  "registryFile": "ribbon-banner-slide.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction RibbonBannerSlide({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes banner_slide_expand {\n          0%, 100% { width: 12px; }\n          40%, 75% { width: 95px; }\n        }\n        .ribbon-banner {\n          animation: banner_slide_expand 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative flex items-center justify-center h-[45px]\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"h-[36px] ribbon-banner bg-blue-500 rounded-xl flex items-center justify-between px-3 overflow-hidden shadow-md\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-2 h-2 rounded-full bg-white\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-10 h-1.5 rounded-full bg-white/80\" })\n        ] }) }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/ribbon-banner-slide.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(RibbonBannerSlide, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/ring-sweep.json

@@ -1,8 +1,17 @@
 {
   "id": "ring-sweep",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "ring-sweep.tsx",
+  "sourcePath": "ui/loading/ring-sweep.tsx",
+  "registryFile": "ring-sweep.json",
+  "exports": [
+    "RingSweep"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RingSweep = () => {\n  return (\n    <motion.div\n      className=\"w-10 h-10 border-[3px] border-zinc-200 dark:border-zinc-800 rounded-full border-t-zinc-800 dark:border-t-white\"\n      animate={{ rotate: 360 }}\n      transition={{ duration: 1, repeat: Infinity, ease: \"linear\" }}\n    />\n  );\n};\n"
 }

package/registry/ripple-effect.json

@@ -1,8 +1,17 @@
 {
   "id": "ripple-effect",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "ripple-effect.tsx",
+  "sourcePath": "ui/loading/ripple-effect.tsx",
+  "registryFile": "ripple-effect.json",
+  "exports": [
+    "RippleEffect"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RippleEffect = () => {\n  return (\n    <div className=\"relative w-12 h-12 flex items-center justify-center\">\n      {/* Center dot */}\n      <div className=\"absolute w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full\" />\n      {[0, 1, 2].map((i) => (\n        <motion.div\n          key={i}\n          className=\"absolute w-8 h-8 border border-zinc-850 dark:border-white rounded-full\"\n          initial={{ scale: 0.3, opacity: 0.8 }}\n          animate={{ scale: 1.6, opacity: 0 }}\n          transition={{\n            duration: 2.2,\n            repeat: Infinity,\n            ease: \"easeOut\",\n            delay: i * 0.7,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n"
 }

package/registry/rise-up-word.json

@@ -0,0 +1,19 @@
+{
+  "id": "rise-up-word",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "rise-up-word.tsx",
+  "registryFile": "rise-up-word.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './rise-up-word';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// rise-up-word.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-riseup-word\", \"label\": \"Rise Up Word\", \"interactionType\": \"rise-up-word\", \"description\": \"Words rise up gracefully with spring.\", \"cliCommand\": \"npx @mova-ui/react add rise-up-word\", \"category\": \"Slide & Drop\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/roller-blind-drop.json

@@ -0,0 +1,15 @@
+{
+  "id": "roller-blind-drop",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "roller-blind-drop.tsx",
+  "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
+  "registryFile": "roller-blind-drop.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction RollerBlindDrop({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes blind_roll_drop {\n          0%, 100% { height: 8px; }\n          40%, 75% { height: 55px; }\n        }\n        .roller-cloth {\n          animation: blind_roll_drop 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[100px] flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-2.5 rounded-full bg-neutral-600 z-10\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-[88px] roller-cloth bg-blue-600 rounded-b-xl flex items-end justify-center pb-1 shadow-md\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-10 h-1 rounded-full bg-blue-400\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/roller-blind-drop.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(RollerBlindDrop, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/rolling-tumble.json

@@ -0,0 +1,15 @@
+{
+  "id": "rolling-tumble",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "rolling-tumble.tsx",
+  "sourcePath": "components/css-animations/whimsical/YuiPhysicsExperiments.tsx",
+  "registryFile": "rolling-tumble.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/YuiPhysicsExperiments.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/YuiPhysicsExperiments.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction RollingTumble({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2600);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes rolling_box_step {\n          0% { transform: translateX(-40px) rotate(0deg); }\n          30% { transform: translateX(-10px) rotate(90deg); }\n          60% { transform: translateX(20px) rotate(180deg); }\n          85%, 100% { transform: translateX(45px) rotate(270deg); }\n        }\n        .rolling-cube {\n          transform-origin: center center;\n          animation: rolling_box_step 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-[130px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-[34px] h-[34px] rounded-xl bg-blue-500 rolling-cube shadow-md flex items-center justify-center\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-2.5 h-2.5 rounded-full bg-white/90\" }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute bottom-4 left-4 right-4 h-[2px] rounded-full bg-neutral-700/60\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/rolling-tumble.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(RollingTumble, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/rotate-in-char.json

@@ -0,0 +1,19 @@
+{
+  "id": "rotate-in-char",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "rotate-in-char.tsx",
+  "registryFile": "rotate-in-char.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './rotate-in-char';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n  const trigger = useCallback((type = \"light\") => {\n    if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n      return false;\n    }\n    try {\n      switch (type) {\n        case \"light\":\n          return window.navigator.vibrate(10);\n        case \"medium\":\n          return window.navigator.vibrate(25);\n        case \"heavy\":\n          return window.navigator.vibrate(50);\n        case \"success\":\n          return window.navigator.vibrate([15, 60, 15]);\n        case \"warning\":\n          return window.navigator.vibrate([30, 60, 30]);\n        case \"error\":\n          return window.navigator.vibrate([60, 60, 60, 60, 60]);\n        default:\n          return window.navigator.vibrate(type);\n      }\n    } catch (e) {\n      console.warn(\"Vibration API error:\", e);\n      return false;\n    }\n  }, []);\n  return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n  const [keyIndex, setKeyIndex] = useState(0);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const replay = () => {\n    triggerHaptic(\"light\");\n    setKeyIndex((prev) => prev + 1);\n  };\n  const samplePhrase = \"MOVA UI\";\n  const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      onClick: replay,\n      className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n      title: \"Click to replay animation\",\n      children: [\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n          switch (config.interactionType) {\n            /* --- FEATURED --- */\n            case \"dia-text-reveal\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n                  animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n                  transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"DIA REVEAL\"\n                }\n              ) }, keyIndex);\n            /* --- REVEALS --- */\n            case \"blur-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n                  animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"BLUR REVEAL\"\n                },\n                keyIndex\n              );\n            case \"shimmer-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n            case \"typewriter-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { width: 0 },\n                  animate: { width: \"auto\" },\n                  transition: { duration: 1.2, ease: \"easeInOut\" },\n                  className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n                  children: \"TYPEWRITER\"\n                }\n              ) }, keyIndex);\n            case \"reveal-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { clipPath: \"inset(0 100% 0 0)\" },\n                  animate: { clipPath: \"inset(0 0 0 0)\" },\n                  transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: \"CINEMATIC\"\n                }\n              ) }, keyIndex);\n            case \"fade-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.3, delay: i * 0.05 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"fade-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { opacity: 0 },\n                  animate: { opacity: 1 },\n                  transition: { duration: 0.8 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"FADE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"blur-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.5, delay: i * 0.12 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"blur-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n                  animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SLIDE & DROP --- */\n            case \"stagger-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 20, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-up-text\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { y: \"100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SLIDE UP TEXT\"\n                }\n              ) }, keyIndex);\n            case \"slide-down-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-down-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: \"-100%\" },\n                  animate: { y: 0 },\n                  transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-left-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: 40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"slide-right-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { x: -40, opacity: 0 },\n                  animate: { x: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"drop-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: -50, opacity: 0 },\n                  animate: { y: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rise-up-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { y: 30, opacity: 0, scale: 0.8 },\n                  animate: { y: 0, opacity: 1, scale: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"bounce-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0, opacity: 0 },\n                  animate: { scale: [0, 1.3, 1], opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            /* --- SCALE & ZOOM --- */\n            case \"scale-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0 },\n                  animate: { scale: 1 },\n                  transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scale: 0.4, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.12 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            case \"scale-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.5, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 25 },\n                  className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"SCALE IN TEXT\"\n                },\n                keyIndex\n              );\n            case \"zoom-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 0.2, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM IN\"\n                },\n                keyIndex\n              );\n            case \"zoom-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { scale: 1.8, opacity: 0 },\n                  animate: { scale: 1, opacity: 1 },\n                  transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n                  children: \"ZOOM OUT\"\n                },\n                keyIndex\n              );\n            /* --- 3D & ROTATE --- */\n            case \"flip-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateY: 90, opacity: 0 },\n                  animate: { rotateY: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"flip-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: 90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { duration: 0.5, delay: i * 0.05 },\n                  className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"rotate-in-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotate: -45, opacity: 0, scale: 0.5 },\n                  animate: { rotate: 0, opacity: 1, scale: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"swing-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { rotateX: -90, opacity: 0 },\n                  animate: { rotateX: 0, opacity: 1 },\n                  transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n                  className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n                  children: word\n                },\n                i\n              )) }, keyIndex);\n            /* --- DISTORTION & SPACING --- */\n            case \"stretch-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleX: 2.5, opacity: 0 },\n                  animate: { scaleX: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"stretch-y-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { scaleY: 2.5, opacity: 0 },\n                  animate: { scaleY: 1, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"skew-x-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  initial: { skewX: -30, opacity: 0 },\n                  animate: { skewX: 0, opacity: 1 },\n                  transition: { duration: 0.4, delay: i * 0.04 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) }, keyIndex);\n            case \"tracking-in-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"0.6em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.05em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING IN\"\n                },\n                keyIndex\n              );\n            case \"tracking-out-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n                  animate: { letterSpacing: \"0.1em\", opacity: 1 },\n                  transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n                  className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n                  children: \"TRACKING OUT\"\n                },\n                keyIndex\n              );\n            /* --- HOVER & INTERACTIVE --- */\n            case \"spring-text\":\n            case \"hover-lift-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n                  transition: { type: \"spring\", stiffness: 500, damping: 15 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-lift-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { y: -6, color: \"#3b82f6\" },\n                  transition: { type: \"spring\", stiffness: 400, damping: 18 },\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  children: word\n                },\n                i\n              )) });\n            case \"hover-scale-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.4 },\n                  transition: { type: \"spring\", stiffness: 500, damping: 18 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"hover-scale-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  whileHover: { scale: 1.25 },\n                  transition: { type: \"spring\", stiffness: 400, damping: 20 },\n                  className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n                  children: word\n                },\n                i\n              )) });\n            /* --- CONTINUOUS --- */\n            case \"float-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -6, 0] },\n                  transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"float-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { y: [0, -8, 0] },\n                  transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n                  className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"pulse-char\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: char === \" \" ? \"\\xA0\" : char\n                },\n                i\n              )) });\n            case \"pulse-word\":\n              return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n                motion.span,\n                {\n                  animate: { opacity: [0.3, 1, 0.3] },\n                  transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n                  className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n                  children: word\n                },\n                i\n              )) });\n            case \"glow-text\":\n              return /* @__PURE__ */ jsx(\n                motion.div,\n                {\n                  animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n                  transition: { duration: 2, repeat: Infinity },\n                  className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n                  children: \"GLOW TEXT\"\n                }\n              );\n            default:\n              return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n          }\n        })() }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n      ]\n    }\n  );\n};\n\n// rotate-in-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-rotatein-char\", \"label\": \"Rotate In Char\", \"interactionType\": \"rotate-in-char\", \"description\": \"Characters rotate slightly as they enter.\", \"cliCommand\": \"npx @mova-ui/react add rotate-in-char\", \"category\": \"3D & Rotate\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/rotating-cross.json

@@ -1,8 +1,17 @@
 {
   "id": "rotating-cross",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "rotating-cross.tsx",
+  "sourcePath": "ui/loading/rotating-cross.tsx",
+  "registryFile": "rotating-cross.json",
+  "exports": [
+    "RotatingCross"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RotatingCross = () => {\n  return (\n    <motion.div\n      className=\"relative w-8 h-8 flex items-center justify-center\"\n      animate={{ rotate: 180 }}\n      transition={{ duration: 0.8, repeat: Infinity, ease: \"easeInOut\" }}\n    >\n      <div className=\"absolute w-full h-1.5 bg-zinc-800 dark:bg-white rounded-sm\" />\n      <div className=\"absolute h-full w-1.5 bg-zinc-800 dark:bg-white rounded-sm\" />\n    </motion.div>\n  );\n};\n"
 }

package/registry/rotating-louvers.json

@@ -0,0 +1,15 @@
+{
+  "id": "rotating-louvers",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "rotating-louvers.tsx",
+  "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
+  "registryFile": "rotating-louvers.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n\"use client\";\n\n// catalog/components/css-animations/whimsical/ConceptTrios3.tsx\nimport { useState as useState2 } from \"react\";\n\n// catalog/hooks/useLoopFlg.ts\nimport { useState, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// catalog/components/css-animations/whimsical/ConceptTrios3.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction RotatingLouvers({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState2(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx(\"style\", { children: `\n        @keyframes louver_rotate {\n          0%, 100% { transform: perspective(400px) rotateX(0deg); }\n          40%, 75% { transform: perspective(400px) rotateX(75deg); }\n        }\n        .louver-slat {\n          animation: louver_rotate 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative flex flex-col gap-2\", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: \"w-[90px] h-[10px] rounded-sm bg-blue-500 louver-slat shadow-sm\",\n            style: { animationDelay: `${i * 0.08}s` }\n          },\n          i\n        )) }, activeKey)\n      ]\n    }\n  );\n}\n\n// catalog/registry-bindings/rotating-louvers.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nvar PRESET_PROPS = { \"loop\": true, \"trigger\": \"hover\", \"theme\": \"dark\" };\nfunction MovaComponentAdapter(props = {}) {\n  return /* @__PURE__ */ jsx2(RotatingLouvers, { ...PRESET_PROPS, ...props });\n}\nexport {\n  MovaComponentAdapter as default\n};\n"
+}

package/registry/rotating-triangle.json

@@ -1,8 +1,17 @@
 {
   "id": "rotating-triangle",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "rotating-triangle.tsx",
+  "sourcePath": "ui/loading/rotating-triangle.tsx",
+  "registryFile": "rotating-triangle.json",
+  "exports": [
+    "RotatingTriangle"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const RotatingTriangle = () => {\n  return (\n    <svg className=\"w-10 h-10 overflow-visible\" viewBox=\"0 0 50 50\">\n      <motion.polygon\n        points=\"25,5 45,40 5,40\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none origin-center\"\n        strokeWidth=\"4\"\n        strokeLinejoin=\"round\"\n        animate={{ rotate: 360 }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"linear\" }}\n      />\n    </svg>\n  );\n};\n"
 }

package/registry/rudder-issue-board.json

@@ -0,0 +1,24 @@
+{
+  "id": "rudder-issue-board",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "rudder-issue-board.tsx",
+  "sourcePath": "ui/ai/rudder-issue-board.tsx",
+  "registryFile": "rudder-issue-board.json",
+  "exports": [
+    "BoardIssue",
+    "BoardStatus",
+    "RudderIssueBoard",
+    "RudderIssueBoardProps"
+  ],
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "Apache-2.0",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n// SPDX-License-Identifier: Apache-2.0\n// Adapted from Rudder's KanbanBoard, StatusIcon, and PriorityIcon.\n// The bundled third-party notices retain Rudder's LICENSE and NOTICE.\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  pointerWithin,\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragCancelEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n  type KeyboardCoordinateGetter,\n} from \"@dnd-kit/core\";\nimport { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { CalendarClock, FolderKanban, Plus, Tags, UserCheck, Filter, List, Columns3, SlidersHorizontal, ArrowUpDown, ChevronDown, Check } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { Fragment, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useId, type ReactNode, type RefObject } from \"react\";\n\nexport type BoardStatus = \"backlog\" | \"todo\" | \"in_progress\" | \"in_review\" | \"blocked\" | \"done\" | \"cancelled\";\n\nexport interface BoardIssue {\n  assignee: string;\n  created: string;\n  updated?: string;\n  id: string;\n  labels: string[];\n  priority: \"critical\" | \"high\" | \"medium\" | \"low\";\n  project: string;\n  reviewer?: string;\n  status: BoardStatus;\n  title: string;\n}\n\nexport interface RudderIssueBoardProps {\n  theme?: \"dark\" | \"light\";\n  className?: string;\n  initialIssues?: readonly BoardIssue[];\n  onIssuesChange?: (issues: BoardIssue[]) => void;\n}\n\nconst BOARD_STATUSES: readonly BoardStatus[] = [\"backlog\", \"todo\", \"in_progress\", \"in_review\", \"blocked\", \"done\", \"cancelled\"];\n\nconst createBoardKeyboardCoordinates = (\n  getHorizontalTarget: () => BoardStatus | null,\n  onHorizontalTarget: (status: BoardStatus | null) => void,\n): KeyboardCoordinateGetter => (event, args) => {\n  if (event.code !== \"ArrowLeft\" && event.code !== \"ArrowRight\") {\n    onHorizontalTarget(null);\n    return sortableKeyboardCoordinates(event, args);\n  }\n\n  event.preventDefault();\n  const { context } = args;\n  const currentStatus = String(getHorizontalTarget() ?? context.active?.data.current?.status ?? \"\") as BoardStatus;\n  const lanes: Array<{ rect: NonNullable<ReturnType<typeof context.droppableRects.get>>; status: BoardStatus }> = [];\n\n  context.droppableContainers.getEnabled().forEach((container) => {\n    const data = container.data.current;\n    if (data?.type !== \"column\" && data?.type !== \"hidden-column\") return;\n    const rect = context.droppableRects.get(container.id);\n    if (rect && BOARD_STATUSES.includes(data.status as BoardStatus)) {\n      lanes.push({ rect, status: data.status as BoardStatus });\n    }\n  });\n\n  lanes.sort((a, b) => a.rect.left - b.rect.left || a.rect.top - b.rect.top);\n  const currentIndex = lanes.findIndex((lane) => lane.status === currentStatus);\n  const targetIndex = currentIndex + (event.code === \"ArrowRight\" ? 1 : -1);\n  const targetLane = lanes[targetIndex];\n  if (!targetLane) {\n    onHorizontalTarget(null);\n    return;\n  }\n  onHorizontalTarget(targetLane.status);\n\n  const currentCenterY = context.collisionRect\n    ? context.collisionRect.top + context.collisionRect.height / 2\n    : targetLane.rect.top;\n  let targetRect = targetLane.rect;\n  let nearestDistance = Number.POSITIVE_INFINITY;\n\n  context.droppableContainers.getEnabled().forEach((container) => {\n    const data = container.data.current;\n    if (data?.type !== \"issue\" || data.status !== targetLane.status) return;\n    const rect = context.droppableRects.get(container.id);\n    if (!rect) return;\n    const distance = Math.abs(rect.top + rect.height / 2 - currentCenterY);\n    if (distance < nearestDistance) {\n      nearestDistance = distance;\n      targetRect = rect;\n    }\n  });\n\n  const activeRect = context.collisionRect;\n  return {\n    x: targetRect.left + (targetRect.width - (activeRect?.width ?? 0)) / 2,\n    y: targetRect.top + (targetRect.height - (activeRect?.height ?? 0)) / 2,\n  };\n};\n\nconst STATUS_META: Record<BoardStatus, { color: string; label: string; lane: string; laneOver: string }> = {\n  backlog: { color: \"#fb923c\", label: \"Backlog\", lane: \"border-white/[0.09] bg-white/[0.025]\", laneOver: \"border-white/25 bg-white/[0.07]\" },\n  todo: { color: \"#9ca3af\", label: \"To do\", lane: \"border-blue-900/55 bg-blue-950/25\", laneOver: \"border-blue-600/75 bg-blue-900/40\" },\n  in_progress: { color: \"#facc15\", label: \"In progress\", lane: \"border-amber-900/55 bg-amber-950/25\", laneOver: \"border-amber-600/75 bg-amber-900/40\" },\n  in_review: { color: \"#a78bfa\", label: \"In review\", lane: \"border-violet-900/55 bg-violet-950/25\", laneOver: \"border-violet-600/75 bg-violet-900/40\" },\n  blocked: { color: \"#f87171\", label: \"Blocked\", lane: \"border-red-900/55 bg-red-950/25\", laneOver: \"border-red-600/75 bg-red-900/40\" },\n  done: { color: \"#4ade80\", label: \"Done\", lane: \"border-emerald-900/55 bg-emerald-950/25\", laneOver: \"border-emerald-600/75 bg-emerald-900/40\" },\n  cancelled: { color: \"#a3a3a3\", label: \"Cancelled\", lane: \"border-neutral-800/70 bg-neutral-900/30\", laneOver: \"border-neutral-600/80 bg-neutral-800/45\" },\n};\n\nconst DEFAULT_ISSUES: readonly BoardIssue[] = [\n  { id: \"R6Z-141\", title: \"Retire legacy Node backend, CLI, and MCP authorities\", status: \"backlog\", priority: \"high\", assignee: \"Noah\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 20\" },\n  { id: \"R6Z-140\", title: \"Cut over the public listener and Rust authorities\", status: \"backlog\", priority: \"high\", assignee: \"Avery\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 20\" },\n  { id: \"R6Z-170\", title: \"Proposal: add history versions and Diff view\", status: \"todo\", priority: \"medium\", assignee: \"Luca\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 27\" },\n  { id: \"R6Z-166\", title: \"Define the issue event contract for agent handoffs\", status: \"todo\", priority: \"medium\", assignee: \"Mira\", project: \"Rudder-dev\", labels: [\"Spec\"], created: \"Aug 26\" },\n  { id: \"R6Z-181\", title: \"Share 500-index issue context through MCP and CLI\", status: \"in_progress\", priority: \"high\", assignee: \"Sana\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 30\" },\n  { id: \"R6Z-210\", title: \"Re-run the Rust output spool after a capacity failure\", status: \"in_progress\", priority: \"high\", assignee: \"Noah\", reviewer: \"Mira\", project: \"Rudder-dev\", labels: [\"Bug\"], created: \"Sep 14\" },\n  { id: \"R6Z-207\", title: \"Remove the loaded Issues hint from the shell\", status: \"done\", priority: \"medium\", assignee: \"Theo\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 19\" },\n];\n\nfunction StatusIcon({ status }: { status: BoardStatus }) {\n  const common = { stroke: \"currentColor\", strokeWidth: 2, strokeLinecap: \"round\" as const };\n  return (\n    <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\" data-slot=\"issue-status-icon\" data-status={status} style={{ color: STATUS_META[status].color }} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" className=\"h-full w-full overflow-visible\" fill=\"none\">\n        {status === \"backlog\" ? <circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} strokeDasharray=\"1 3\" /> : null}\n        {status === \"todo\" ? <circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /> : null}\n        {status === \"in_progress\" ? <><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} opacity=\"0.22\" /><path d=\"M8 2.5a5.5 5.5 0 0 1 5.5 5.5\" {...common} strokeWidth=\"2.4\" /><path d=\"M13.5 8a5.5 5.5 0 0 1-5.5 5.5\" {...common} strokeWidth=\"2.4\" opacity=\"0.72\" /></> : null}\n        {status === \"in_review\" ? <><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"currentColor\" /></> : null}\n        {status === \"done\" ? <><circle cx=\"8\" cy=\"8\" r=\"6.5\" fill=\"currentColor\" /><path d=\"M4.75 8.25 7 10.5l4.25-5\" stroke=\"#131313\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></> : null}\n        {status === \"cancelled\" ? <><circle cx=\"8\" cy=\"8\" r=\"6\" fill=\"currentColor\" opacity=\"0.16\" /><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /><path d=\"m5.25 5.25 5.5 5.5m0-5.5-5.5 5.5\" {...common} /></> : null}\n        {status === \"blocked\" ? <><path d=\"M5.1 2.25h5.8l3.05 3.05v5.4l-3.05 3.05H5.1L2.05 10.7V5.3Z\" {...common} strokeLinejoin=\"round\" /><path d=\"m5.25 5.25 5.5 5.5\" {...common} /></> : null}\n      </svg>\n    </span>\n  );\n}\n\nfunction PriorityIcon({ priority }: { priority: BoardIssue[\"priority\"] }) {\n  const active = priority === \"critical\" ? 4 : priority === \"high\" ? 3 : priority === \"medium\" ? 2 : 1;\n  const tone = priority === \"critical\" || priority === \"high\"\n    ? \"text-orange-400\"\n    : priority === \"medium\"\n      ? \"text-orange-300/80\"\n      : \"text-orange-300/55\";\n  const heights = [4, 6, 10, 14];\n  return (\n    <span className={`inline-flex h-3.5 w-4 items-end gap-[2px] ${tone}`} aria-hidden=\"true\">\n      {heights.map((height, index) => <span className=\"w-[3px] rounded-[1px] bg-current\" key={height} style={{ height: `${height}px`, opacity: index < active ? 1 : 0.25 }} />)}\n    </span>\n  );\n}\n\nconst DISPLAY_FIELDS = [\"Identifier\", \"Priority\", \"Assignee\", \"Reviewer\", \"Labels\", \"Project\", \"Updated\", \"Created\"] as const;\ntype DisplayField = typeof DISPLAY_FIELDS[number];\nconst DisplayContext = createContext<readonly DisplayField[]>(DISPLAY_FIELDS.filter((field) => field !== \"Updated\"));\n\nfunction MemberAvatar({ name }: { name: string }) {\n  const palette = [\"#79a894\", \"#a18bbd\", \"#c09972\", \"#7b9ebe\", \"#bd8392\"];\n  const color = palette[Array.from(name).reduce((sum, letter) => sum + letter.charCodeAt(0), 0) % palette.length];\n  return <span aria-hidden=\"true\" className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold text-[#17201e]\" style={{ backgroundColor: color }}>{name.slice(0, 1)}</span>;\n}\n\nfunction IssueListRow({ issue }: { issue: BoardIssue }) {\n  const display = useContext(DisplayContext);\n  return <article className=\"rudder-list-row border-b border-white/[0.07] px-4 py-3\" data-testid={`issue-row-${issue.id}`}>\n    <div className=\"flex min-w-0 items-start gap-2.5\">\n      <span className=\"mt-0.5\" title={STATUS_META[issue.status].label}><span className=\"sr-only\">{STATUS_META[issue.status].label}</span><StatusIcon status={issue.status} /></span>\n      {display.includes(\"Identifier\") ? <span className=\"shrink-0 pt-0.5 font-mono text-xs text-[#8b8b8b]\">{issue.id}</span> : null}\n      <h3 className=\"min-w-0 flex-1 break-words text-sm font-medium leading-relaxed text-[#ececea]\">{issue.title}</h3>\n    </div>\n    <div className=\"rudder-list-meta flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 text-xs text-[#a5a59f]\">\n      {display.includes(\"Priority\") ? <span title={`${issue.priority} priority`}><span className=\"sr-only\">{issue.priority} priority</span><PriorityIcon priority={issue.priority} /></span> : null}\n      {display.includes(\"Labels\") ? issue.labels.map((label) => <span key={label} className=\"inline-flex max-w-full items-center gap-1.5 rounded-full border border-white/10 px-2 py-0.5\"><span className=\"h-1.5 w-1.5 shrink-0 rounded-full bg-violet-400\" /><span className=\"break-words\">{label}</span></span>) : null}\n      {display.includes(\"Assignee\") ? <span className=\"inline-flex min-w-0 items-center gap-1.5\"><MemberAvatar name={issue.assignee} /><span className=\"break-words\">{issue.assignee}</span></span> : null}\n      {display.includes(\"Reviewer\") && issue.reviewer ? <span className=\"inline-flex items-center gap-1\" title=\"Reviewer\"><UserCheck className=\"h-3 w-3 shrink-0\" />{issue.reviewer}</span> : null}\n      {display.includes(\"Project\") ? <span className=\"rudder-list-project break-words\">{issue.project}</span> : null}\n      {display.includes(\"Created\") ? <span className=\"whitespace-nowrap\">{issue.created}</span> : null}\n      {display.includes(\"Updated\") ? <span className=\"whitespace-nowrap\">Updated {issue.updated ?? issue.created}</span> : null}\n    </div>\n  </article>;\n}\n\nfunction IssueCardBody({ issue }: { issue: BoardIssue }) {\n  const display = useContext(DisplayContext);\n  return (\n    <div className=\"min-w-0\">\n      <div className=\"flex min-w-0 items-start gap-2\">\n        <span className=\"min-w-0 flex-1 font-mono text-xs text-[#8b8b8b]\">{display.includes(\"Identifier\") ? issue.id : \"\"}</span>\n        {display.includes(\"Assignee\") ? <span className=\"inline-flex min-w-0 max-w-[8.5rem] shrink items-center gap-1 overflow-hidden text-xs text-[#a1a1aa]\">\n          <MemberAvatar name={issue.assignee} />\n          <span className=\"truncate\">{issue.assignee}</span>\n        </span> : null}\n      </div>\n      <p className=\"mt-2 break-words text-sm leading-snug text-[#ececea]\">{issue.title}</p>\n      {display.includes(\"Priority\") ? <div className=\"mt-2 flex min-w-0 items-center gap-1.5 overflow-hidden text-xs text-[#8b8b8b]\">\n        <PriorityIcon priority={issue.priority} />\n        <span className=\"capitalize\">{issue.priority}</span>\n      </div> : null}\n      <div className=\"mt-2 space-y-1.5 border-t border-white/[0.07] pt-2 text-xs text-[#818181]\">\n        {display.includes(\"Project\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><FolderKanban className=\"h-3 w-3\" />Project</span><span className=\"truncate text-right\">{issue.project}</span></div> : null}\n        {display.includes(\"Reviewer\") && issue.reviewer ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><UserCheck className=\"h-3 w-3\" />Reviewer</span><span className=\"truncate text-right\">{issue.reviewer}</span></div> : null}\n        {display.includes(\"Labels\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><Tags className=\"h-3 w-3\" />Labels</span><span className=\"truncate text-right\"><span className=\"inline-flex items-center gap-1 rounded-full border border-white/[0.08] px-1.5 py-0.5 text-[10px]\"><span className=\"h-1.5 w-1.5 rounded-full bg-violet-500\" />{issue.labels[0] ?? \"None\"}</span></span></div> : null}\n        {display.includes(\"Created\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><CalendarClock className=\"h-3 w-3\" />Created</span><span className=\"truncate text-right\">{issue.created}</span></div> : null}\n        {display.includes(\"Updated\") ? <div className=\"grid grid-cols-[4.5rem_minmax(0,1fr)] gap-2\"><span>Updated</span><span className=\"truncate text-right\">{issue.updated ?? issue.created}</span></div> : null}\n      </div>\n    </div>\n  );\n}\n\nfunction SortableIssueCard({ issue }: { issue: BoardIssue }) {\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: issue.id, data: { status: issue.status, type: \"issue\" } });\n  return (\n    <article\n      ref={setNodeRef}\n      style={{ transform: CSS.Transform.toString(transform), transition }}\n      {...attributes}\n      {...listeners}\n      className={`motion-kanban-card cursor-grab touch-pan-x overflow-hidden rounded-[9px] border border-white/[0.09] bg-[#242423] p-2.5 outline-none transition-[box-shadow,opacity,border-color] motion-reduce:transition-none focus-visible:border-white/30 focus-visible:ring-2 focus-visible:ring-white/20 active:cursor-grabbing ${isDragging ? \"opacity-25\" : \"hover:border-white/[0.16] hover:shadow-sm\"}`}\n      data-dragging={isDragging ? \"true\" : \"false\"}\n      data-issue-id={issue.id}\n      data-testid={`kanban-card-${issue.id}`}\n    >\n      <IssueCardBody issue={issue} />\n    </article>\n  );\n}\n\nfunction BoardColumn({ issues, status, onCreate }: { issues: BoardIssue[]; status: BoardStatus; onCreate: (status: BoardStatus, trigger: HTMLElement) => void }) {\n  const { isOver, setNodeRef } = useDroppable({ id: status, data: { status, type: \"column\" } });\n  const meta = STATUS_META[status];\n  return (\n    <div className=\"flex min-h-0 w-[260px] min-w-[260px] shrink-0 flex-col\">\n      <div className=\"mb-1 flex items-center gap-2 px-2 py-2\">\n        <StatusIcon status={status} />\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-[#a1a1a1]\">{meta.label}</span>\n        <span className=\"ml-auto text-xs tabular-nums text-[#686868]\">{issues.length}</span>\n        <button type=\"button\" onClick={(event) => onCreate(status, event.currentTarget)} aria-label={`Create issue in ${meta.label}`} className=\"rounded p-1 hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/40\"><Plus className=\"h-3.5 w-3.5 text-[#8b8b8b]\" aria-hidden=\"true\" /></button>\n      </div>\n      <div\n        ref={setNodeRef}\n        className={`motion-kanban-lane min-h-[160px] flex-1 space-y-1.5 overflow-y-auto rounded-[9px] border p-1.5 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`}\n        data-over={isOver ? \"true\" : \"false\"}\n        data-testid={`kanban-column-${status}`}\n      >\n        <SortableContext items={issues.map((issue) => issue.id)} strategy={verticalListSortingStrategy}>\n          {issues.map((issue) => <Fragment key={issue.id}><SortableIssueCard issue={issue} /></Fragment>)}\n        </SortableContext>\n      </div>\n    </div>\n  );\n}\n\nfunction HiddenStatus({ status, onCreate }: { status: BoardStatus; onCreate: (status: BoardStatus, trigger: HTMLElement) => void }) {\n  const { isOver, setNodeRef } = useDroppable({ id: status, data: { status, type: \"hidden-column\" } });\n  const meta = STATUS_META[status];\n  return (\n    <div ref={setNodeRef} className={`motion-kanban-lane flex items-center gap-2 rounded-[9px] border px-2 py-2 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`} data-over={isOver ? \"true\" : \"false\"} data-testid={`kanban-hidden-column-${status}`}>\n      <StatusIcon status={status} />\n      <span className=\"min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-[#a1a1a1]\">{meta.label}</span>\n      <span className=\"text-xs tabular-nums text-[#686868]\">0</span>\n      <button type=\"button\" onClick={(event) => onCreate(status, event.currentTarget)} aria-label={`Create issue in ${meta.label}`} className=\"rounded p-1 hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/40\"><Plus className=\"h-3.5 w-3.5 text-[#8b8b8b]\" aria-hidden=\"true\" /></button>\n    </div>\n  );\n}\n\nfunction ToolbarPopover({ label, icon, children, triggerRef }: { label: string; icon: ReactNode; children: ReactNode; triggerRef?: RefObject<HTMLButtonElement | null> }) {\n  const reducedMotion = useReducedMotion();\n  const [open, setOpen] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const id = useId();\n  useLayoutEffect(() => {\n    if (!open) return;\n    const container = root.current;\n    const popup = panel.current;\n    const board = container?.closest<HTMLElement>('section[aria-label=\"Rudder issue board\"]');\n    if (!container || !popup || !board) return;\n    const position = () => {\n      const anchor = container.getBoundingClientRect();\n      const bounds = board.getBoundingClientRect();\n      // Convert viewport measurements back to local CSS pixels for scaled previews.\n      const scale = container.offsetWidth ? anchor.width / container.offsetWidth : 1;\n      if (!scale) return;\n      const inset = 8 * scale;\n      popup.style.maxWidth = `${Math.max(0, (bounds.width - inset * 2) / scale)}px`;\n      const width = popup.getBoundingClientRect().width;\n      const left = Math.max(bounds.left + inset, Math.min(anchor.right - width, bounds.right - inset - width));\n      popup.style.left = `${(left - anchor.left) / scale}px`;\n      popup.style.right = \"auto\";\n    };\n    position();\n    const observer = new ResizeObserver(position);\n    observer.observe(board);\n    observer.observe(container);\n    window.addEventListener(\"resize\", position);\n    return () => { observer.disconnect(); window.removeEventListener(\"resize\", position); };\n  }, [open]);\n  useEffect(() => {\n    if (!open) return;\n    panel.current?.querySelector<HTMLElement>(\"input:checked, button, input\")?.focus();\n    const dismiss = (event: PointerEvent) => {\n      if (!root.current?.contains(event.target as Node)) { setOpen(false); trigger.current?.focus(); }\n    };\n    document.addEventListener(\"pointerdown\", dismiss);\n    return () => document.removeEventListener(\"pointerdown\", dismiss);\n  }, [open]);\n  return <div ref={root} className=\"relative\" onBlur={(event) => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget as Node)) setOpen(false); }} onKeyDown={(event) => { if (event.key === \"Escape\" && open) { event.preventDefault(); event.stopPropagation(); setOpen(false); trigger.current?.focus(); } }}>\n    <button ref={(node) => { trigger.current = node; if (triggerRef) triggerRef.current = node; }} type=\"button\" aria-label={label === \"Sort\" ? \"Sort issues\" : label === \"Filter\" ? \"Filter issues by status\" : \"Display fields\"} aria-expanded={open} aria-controls={id} onClick={() => setOpen((value) => !value)} className={`flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5 ${open ? \"bg-white/10 text-white\" : \"\"}`}>{icon}{label}<ChevronDown className=\"h-3 w-3\" /></button>\n    <AnimatePresence initial={false}>{open ? <motion.div key=\"panel\" ref={panel} id={id} role=\"group\" aria-label={`${label} options`} initial={{ opacity: 0, y: reducedMotion ? 0 : -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reducedMotion ? 0 : -3 }} transition={{ duration: reducedMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] }} className=\"absolute right-0 z-30 mt-2 w-48 space-y-1 rounded-lg border border-white/10 bg-[#2c2c29] p-2 text-xs shadow-xl\">{children}</motion.div> : null}</AnimatePresence>\n  </div>;\n}\n\nfunction resolveTargetStatus(overId: string, issues: BoardIssue[]): BoardStatus | null {\n  if (BOARD_STATUSES.includes(overId as BoardStatus)) return overId as BoardStatus;\n  return issues.find((issue) => issue.id === overId)?.status ?? null;\n}\n\nexport function RudderIssueBoard({ theme = \"dark\", className = \"\", initialIssues = DEFAULT_ISSUES, onIssuesChange }: RudderIssueBoardProps) {\n  const rootRef = useRef<HTMLElement>(null);\n  const sortGroupId = useId();\n  const keyboardTargetRef = useRef<BoardStatus | null>(null);\n  const [issues, setIssues] = useState<BoardIssue[]>(() => [...initialIssues]);\n  const [statusFilter, setStatusFilter] = useState(\"all\");\n  const [sort, setSort] = useState(\"Manual\");\n  const [descending, setDescending] = useState(false);\n  const [view, setView] = useState<\"board\" | \"list\">(\"board\");\n  const [display, setDisplay] = useState<DisplayField[]>(DISPLAY_FIELDS.filter((field) => field !== \"Updated\"));\n  const [creating, setCreating] = useState<BoardStatus | null>(null);\n  const [draft, setDraft] = useState(\"\");\n  const createInputRef = useRef<HTMLInputElement>(null);\n  const createTriggerRef = useRef<HTMLElement | null>(null);\n  const listCreateRef = useRef<HTMLButtonElement>(null);\n  const statusFilterRef = useRef<HTMLButtonElement>(null);\n  const createOpen = creating !== null;\n  const restoreCreateFocus = () => requestAnimationFrame(() => {\n    const original = createTriggerRef.current;\n    (original?.isConnected ? original : listCreateRef.current ?? statusFilterRef.current)?.focus();\n  });\n  const openCreate = (status: BoardStatus, trigger: HTMLElement) => { createTriggerRef.current = trigger; setCreating(status); setDraft(\"\"); };\n  const closeCreate = () => { setCreating(null); restoreCreateFocus(); };\n  useEffect(() => { if (createOpen) createInputRef.current?.focus(); }, [createOpen]);\n  const orderedIssues = useMemo(() => {\n    const matches = issues;\n    if (sort === \"Manual\") return matches;\n    const dateValue = (value: string): string | number => { const timestamp = Date.parse(value); return Number.isNaN(timestamp) ? value : timestamp; };\n    return [...matches].sort((a, b) => {\n      const value = (issue: BoardIssue): string | number => sort === \"Status\" ? BOARD_STATUSES.indexOf(issue.status) : sort === \"Priority\" ? [\"critical\", \"high\", \"medium\", \"low\"].indexOf(issue.priority) : sort === \"Title\" ? issue.title : dateValue(sort === \"Updated\" ? issue.updated ?? issue.created : issue.created);\n      const av = value(a), bv = value(b);\n      const delta = typeof av === \"number\" && typeof bv === \"number\" ? av - bv : String(av).localeCompare(String(bv), undefined, { numeric: true });\n      return descending ? -delta : delta;\n    });\n  }, [issues, sort, descending]);\n  const filtered = useMemo(() => orderedIssues.filter((issue) => statusFilter === \"all\" || issue.status === statusFilter), [orderedIssues, statusFilter]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overStatus, setOverStatus] = useState<BoardStatus | null>(null);\n  const [announcement, setAnnouncement] = useState(\"Issue board ready. Pick up a card to move it between status columns.\");\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const keyboardCoordinates = useMemo(\n    () => createBoardKeyboardCoordinates(\n      () => keyboardTargetRef.current,\n      (status) => { keyboardTargetRef.current = status; },\n    ),\n    [],\n  );\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: keyboardCoordinates }),\n  );\n  const grouped = useMemo(() => Object.fromEntries(BOARD_STATUSES.map((status) => [status, filtered.filter((issue) => issue.status === status)])) as Record<BoardStatus, BoardIssue[]>, [filtered]);\n  const visibleStatuses = BOARD_STATUSES.filter((status) => grouped[status].length > 0);\n  const hiddenStatuses = BOARD_STATUSES.filter((status) => grouped[status].length === 0);\n  const activeIssue = activeId ? issues.find((issue) => issue.id === activeId) ?? null : null;\n\n  useEffect(() => {\n    const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const update = () => setReduceMotion(media.matches);\n    update();\n    media.addEventListener(\"change\", update);\n    return () => media.removeEventListener(\"change\", update);\n  }, []);\n\n  const collisionDetection: CollisionDetection = (args) => {\n    if (!args.pointerCoordinates && keyboardTargetRef.current) {\n      const target = args.droppableContainers.find((container) => container.id === keyboardTargetRef.current);\n      if (target) return [{ id: target.id, data: { droppableContainer: target, value: 0 } }];\n    }\n    const pointerCollisions = pointerWithin(args);\n    if (pointerCollisions.length > 0) {\n      const issueCollision = pointerCollisions.find(({ id }) =>\n        args.droppableContainers.find((container) => container.id === id)?.data.current?.type === \"issue\"\n      );\n      if (issueCollision) return [issueCollision];\n\n      const laneCollision = pointerCollisions.find(({ id }) => {\n        const type = args.droppableContainers.find((container) => container.id === id)?.data.current?.type;\n        return type === \"column\" || type === \"hidden-column\";\n      });\n      const lane = laneCollision\n        ? args.droppableContainers.find((container) => container.id === laneCollision.id)\n        : null;\n      const targetStatus = lane?.data.current?.status as BoardStatus | undefined;\n      const laneIssues = targetStatus\n        ? args.droppableContainers.filter((container) =>\n            container.id !== args.active.id\n            && container.data.current?.type === \"issue\"\n            && container.data.current?.status === targetStatus\n          )\n        : [];\n      const laneIssueBottom = Math.max(\n        ...laneIssues.map((container) => args.droppableRects.get(container.id)?.bottom ?? Number.NEGATIVE_INFINITY),\n      );\n      if (args.pointerCoordinates && args.pointerCoordinates.y <= laneIssueBottom) {\n        const nearestIssue = closestCenter({ ...args, droppableContainers: laneIssues })[0];\n        if (nearestIssue) return [nearestIssue];\n      }\n\n      return pointerCollisions;\n    }\n    return closestCenter(args);\n  };\n\n  const clearDrag = (event?: DragCancelEvent) => {\n    keyboardTargetRef.current = null;\n    setActiveId(null);\n    setOverStatus(null);\n    if (event) setAnnouncement(\"Move cancelled.\");\n  };\n\n  const handleDragStart = ({ active }: DragStartEvent) => {\n    const issue = issues.find((candidate) => candidate.id === String(active.id));\n    setActiveId(String(active.id));\n    if (issue) setAnnouncement(`Picked up ${issue.id}. Current status: ${STATUS_META[issue.status].label}.`);\n  };\n\n  const handleDragOver = ({ over }: DragOverEvent) => {\n    setOverStatus(over ? resolveTargetStatus(String(over.id), issues) : null);\n  };\n\n  const handleDragEnd = ({ active, over }: DragEndEvent) => {\n    clearDrag();\n    if (!over) {\n      setAnnouncement(\"Move cancelled.\");\n      return;\n    }\n    const activeIssueId = String(active.id);\n    const overId = String(over.id);\n    const targetStatus = resolveTargetStatus(overId, issues);\n    const movingIssue = issues.find((issue) => issue.id === activeIssueId);\n    if (!targetStatus || !movingIssue) return;\n\n    const sourceStatus = movingIssue.status;\n    const allGrouped = Object.fromEntries(BOARD_STATUSES.map((status) => [status, orderedIssues.filter((issue) => issue.status === status)])) as Record<BoardStatus, BoardIssue[]>;\n    const targetLaneBeforeMove = allGrouped[targetStatus];\n    const nextByStatus = Object.fromEntries(BOARD_STATUSES.map((status) => [status, allGrouped[status].filter((issue) => issue.id !== activeIssueId)])) as Record<BoardStatus, BoardIssue[]>;\n    const targetLane = nextByStatus[targetStatus];\n    const overIndex = targetLaneBeforeMove.findIndex((issue) => issue.id === overId);\n    const insertAt = overIndex >= 0 ? Math.min(overIndex, targetLane.length) : targetLane.length;\n    targetLane.splice(insertAt, 0, { ...movingIssue, status: targetStatus });\n    const nextIssues = BOARD_STATUSES.flatMap((status) => nextByStatus[status]);\n\n    if (sourceStatus !== targetStatus || nextIssues.map((issue) => issue.id).join(\"|\") !== issues.map((issue) => issue.id).join(\"|\")) {\n      setSort(\"Manual\");\n      setIssues(nextIssues);\n      onIssuesChange?.(nextIssues);\n      setAnnouncement(`${movingIssue.id} moved to ${STATUS_META[targetStatus].label}.`);\n      requestAnimationFrame(() => requestAnimationFrame(() => {\n        const movedCard = Array.from(rootRef.current?.querySelectorAll<HTMLElement>(\"[data-issue-id]\") ?? [])\n          .find((card) => card.dataset.issueId === activeIssueId);\n        (movedCard ?? statusFilterRef.current)?.focus({ preventScroll: true });\n      }));\n    } else {\n      setAnnouncement(`${movingIssue.id} stayed in ${STATUS_META[targetStatus].label}.`);\n    }\n  };\n\n  return (\n    <section ref={rootRef} data-theme={theme} className={`rudder-board w-full min-w-0 min-h-[620px] bg-[#22221f] text-[#ececea] ${className}`} aria-label=\"Rudder issue board\">\n      <style>{`\n        [aria-label=\"Rudder issue board\"] :is(button,input,select,summary):focus-visible { outline: 2px solid #b5d4a7; outline-offset: 2px; }\n        .rudder-board { container-type: inline-size; }\n        .rudder-list-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: start; gap: 16px; }\n        .rudder-list-meta { justify-content: flex-end; padding-top: 2px; }\n        @container (max-width: 640px) {\n          .rudder-list-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }\n          .rudder-list-meta { justify-content: flex-start; padding-left: 26px; }\n        }\n        .rudder-board[data-theme=\"light\"] { background: #f7f7f5; color: #252523; }\n        .rudder-board[data-theme=\"light\"] [class*=\"border-white\"] { border-color: #deded9; }\n        .rudder-board[data-theme=\"light\"] [class*=\"text-[#ececea]\"],\n        .rudder-board[data-theme=\"light\"] [class*=\"text-white\"] { color: #252523; }\n        .rudder-board[data-theme=\"light\"] :is([class*=\"text-[#a\"], [class*=\"text-[#8\"]) { color: #64645e; }\n        .rudder-board[data-theme=\"light\"] :is([class*=\"bg-[#242423]\"], [class*=\"bg-[#2c2c29]\"], [class*=\"bg-[#22221f]\"]) { background-color: #fff; }\n        .rudder-board[data-theme=\"light\"] .motion-kanban-lane { background-color: #efefeb; }\n        .rudder-board[data-theme=\"light\"] [data-over=\"true\"] { background-color: #e1e9de; }\n        .rudder-board[data-theme=\"light\"] [aria-pressed=\"true\"] { background-color: #e6e6e0; color: #252523; }\n        @media (prefers-reduced-motion: reduce) {\n          .motion-kanban-card,\n          .motion-kanban-lane {\n            animation: none !important;\n            transition: none !important;\n          }\n        }\n      `}</style>\n      <p className=\"sr-only\" aria-live=\"assertive\">{announcement}</p>\n      <div className=\"flex flex-wrap items-center gap-2 border-b border-white/10 px-4 py-3 text-xs text-[#a5a59f]\">\n        <h2 className=\"mr-auto text-xs font-medium uppercase tracking-[0.16em] text-[#a5a59f]\">Issues</h2>\n        <div className=\"flex flex-wrap items-center justify-end gap-1\">\n        <button type=\"button\" aria-label=\"Show working issues\" aria-pressed={statusFilter === \"in_progress\"} onClick={() => setStatusFilter((value) => value === \"in_progress\" ? \"all\" : \"in_progress\")} className={`mr-1 rounded-md border border-white/10 px-2.5 py-1.5 tabular-nums transition-colors hover:bg-white/5 ${statusFilter === \"in_progress\" ? \"bg-white/10 text-white\" : \"\"}`}>{issues.filter((issue) => issue.status === \"in_progress\").length} working</button>\n        <div className=\"mr-1 flex rounded-md border border-white/10 p-0.5\"><button type=\"button\" aria-label=\"List view\" aria-pressed={view === \"list\"} onClick={() => setView(\"list\")} className={`rounded p-1 transition-colors ${view === \"list\" ? \"bg-white/10 text-white\" : \"\"}`}><List className=\"h-3.5 w-3.5\" /></button><button type=\"button\" aria-label=\"Board view\" aria-pressed={view === \"board\"} onClick={() => setView(\"board\")} className={`rounded p-1 transition-colors ${view === \"board\" ? \"bg-white/10 text-white\" : \"\"}`}><Columns3 className=\"h-3.5 w-3.5\" /></button></div>\n        <ToolbarPopover label=\"Filter\" triggerRef={statusFilterRef} icon={<Filter className=\"h-3 w-3\" />}>\n          <div role=\"radiogroup\" aria-label=\"Issue status\">{[\"all\", ...BOARD_STATUSES].map((status) => <label key={status} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5\"><input type=\"radio\" className=\"accent-[#28cda0]\" name={`${sortGroupId}-status`} checked={statusFilter === status} onChange={() => setStatusFilter(status)} />{status === \"all\" ? \"All statuses\" : STATUS_META[status as BoardStatus].label}</label>)}</div>\n        </ToolbarPopover>\n        <ToolbarPopover label=\"Sort\" icon={<ArrowUpDown className=\"h-3 w-3\" />}>\n          <div role=\"radiogroup\" aria-label=\"Sort field\">{[\"Manual\", \"Status\", \"Priority\", \"Title\", \"Created\", \"Updated\"].map((value) => <label key={value} className={`flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5 ${sort === value ? \"bg-white/5 text-white\" : \"\"}`}><input className=\"accent-[#28cda0]\" type=\"radio\" name={sortGroupId} checked={sort === value} onChange={() => setSort(value)} />{value}{sort === value ? <Check className=\"ml-auto h-3 w-3\" /> : null}</label>)}</div>\n          <button type=\"button\" disabled={sort === \"Manual\"} onClick={() => setDescending((value) => !value)} aria-label=\"Toggle sort direction\" className=\"flex w-full items-center gap-2 border-t border-white/10 px-2 py-2 text-left disabled:opacity-40\"><ArrowUpDown className=\"h-3 w-3\" />{descending ? \"Descending\" : \"Ascending\"}</button>\n        </ToolbarPopover>\n        <ToolbarPopover label=\"Display\" icon={<SlidersHorizontal className=\"h-3 w-3\" />}>{DISPLAY_FIELDS.map((field) => <label key={field} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5\"><input className=\"accent-[#28cda0]\" type=\"checkbox\" checked={display.includes(field)} onChange={() => setDisplay((fields) => fields.includes(field) ? fields.filter((value) => value !== field) : [...fields, field])} />{field}</label>)}</ToolbarPopover>\n        </div>\n      </div>\n      {creating ? <form onKeyDown={(event) => { if (event.key === \"Escape\") { event.preventDefault(); closeCreate(); } }} className=\"flex flex-wrap items-center gap-2 border-b border-white/10 bg-white/5 p-3\" onSubmit={(event) => { event.preventDefault(); if (!draft.trim()) return; let sequence = issues.length + 1; while (issues.some((issue) => issue.id === `ISS-${sequence}`)) sequence++; const next = [...issues, { id: `ISS-${sequence}`, title: draft.trim(), status: creating, priority: \"medium\" as const, assignee: \"Unassigned\", project: \"No project\", labels: [], created: new Date().toISOString().slice(0, 10) }]; setIssues(next); onIssuesChange?.(next); setStatusFilter(\"all\"); closeCreate(); setAnnouncement(\"Issue created.\"); }}><input ref={createInputRef} required aria-label=\"New issue title\" placeholder=\"Issue title\" value={draft} onChange={(event) => setDraft(event.target.value)} className=\"min-w-0 flex-1 rounded border border-white/10 bg-black/10 px-2 py-1.5 text-sm\" /><select aria-label=\"New issue status\" value={creating} onChange={(event) => setCreating(event.target.value as BoardStatus)} className=\"rounded bg-[#22221f] p-1 text-xs\">{BOARD_STATUSES.map((status) => <option key={status} value={status}>{STATUS_META[status].label}</option>)}</select><button type=\"submit\" className=\"rounded bg-[#28cda0] px-3 py-1.5 text-xs text-[#102d23]\">Create</button><button type=\"button\" onClick={closeCreate} className=\"px-2 text-xs\">Cancel</button></form> : null}\n      <DisplayContext.Provider value={display}>\n      <AnimatePresence mode=\"wait\" initial={false}>\n      <motion.div key={view} initial={{ opacity: 0, y: reduceMotion ? 0 : 5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reduceMotion ? 0 : -3 }} transition={{ duration: reduceMotion ? 0 : 0.15, ease: [0.22, 1, 0.36, 1] }}>\n      {view === \"list\" ? <div className=\"max-h-[580px] overflow-y-auto\">{filtered.map((issue) => <IssueListRow key={issue.id} issue={issue} />)}{filtered.length === 0 ? <p className=\"py-10 text-center text-sm text-[#a5a59f]\">No issues match this filter.</p> : null}<button ref={listCreateRef} type=\"button\" onClick={(event) => openCreate(statusFilter === \"all\" ? \"backlog\" : statusFilter as BoardStatus, event.currentTarget)} className=\"flex items-center gap-2 px-4 py-3 text-xs text-[#a5a59f] transition-colors hover:text-[#ececea]\"><Plus className=\"h-3.5 w-3.5\" />Add issue</button></div> :\n      <DndContext\n        autoScroll={{ acceleration: 2, interval: 10, threshold: { x: 0.08, y: 0.2 } }}\n        collisionDetection={collisionDetection}\n        onDragCancel={clearDrag}\n        onDragEnd={handleDragEnd}\n        onDragOver={handleDragOver}\n        onDragStart={handleDragStart}\n        sensors={sensors}\n      >\n        <div className=\"overflow-x-auto overscroll-x-contain p-3 sm:p-4\">\n          <div className=\"flex min-h-[520px] min-w-max items-stretch gap-3\">\n            {visibleStatuses.map((status) => <Fragment key={status}><BoardColumn issues={grouped[status]} status={status} onCreate={openCreate} /></Fragment>)}\n            {hiddenStatuses.length > 0 ? (\n              <div className={`motion-kanban-lane flex min-h-0 w-[228px] min-w-[228px] shrink-0 flex-col rounded-[10px] border p-2 transition-colors motion-reduce:transition-none ${overStatus && hiddenStatuses.includes(overStatus) ? \"border-white/20 bg-white/[0.055]\" : \"border-white/[0.09] bg-white/[0.025]\"}`} data-testid=\"kanban-hidden-columns\">\n                <div className=\"mb-2 flex items-center gap-2 px-1\">\n                  <span className=\"text-xs font-semibold uppercase tracking-wide text-[#8b8b8b]\">Hidden columns</span>\n                  <span className=\"ml-auto text-xs tabular-nums text-[#5f5f5f]\">{hiddenStatuses.length}</span>\n                </div>\n                <div className=\"space-y-2\">{hiddenStatuses.map((status) => <Fragment key={status}><HiddenStatus status={status} onCreate={openCreate} /></Fragment>)}</div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <DragOverlay dropAnimation={reduceMotion ? null : { duration: 180, easing: \"cubic-bezier(0.22, 1, 0.36, 1)\" }}>\n          {activeIssue ? <article className=\"w-[247px] rotate-[0.4deg] scale-[1.015] overflow-hidden rounded-[9px] border border-white/20 bg-[#242423] p-2.5 shadow-[0_18px_48px_rgba(0,0,0,.48)]\"><IssueCardBody issue={activeIssue} /></article> : null}\n        </DragOverlay>\n      </DndContext>}\n      </motion.div>\n      </AnimatePresence>\n      </DisplayContext.Provider>\n    </section>\n  );\n}\n\nexport default RudderIssueBoard;\n"
+}