@mova-ui/react 0.1.0 → 0.4.1

package/registry/btn-9.json

@@ -0,0 +1,19 @@
+{
+  "id": "btn-9",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "btn-9.tsx",
+  "registryFile": "btn-9.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './btn-9';\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/AnimatedButton.tsx\nimport React2, { useState as useState2 } from \"react\";\nimport { AnimatePresence as AnimatePresence2, motion as motion2 } from \"framer-motion\";\n\n// src/components/cards/FocusBlur.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FocusBlur({\n  items = [\n    { label: \"@Twitter\", href: \"#\" },\n    { label: \"@Threads\", href: \"#\" },\n    { label: \"@Instagram\", href: \"#\" },\n    { label: \"@GitHub\", href: \"#\" }\n  ],\n  blurAmount = 4,\n  opacityAmount = 0.4,\n  showBrackets = true,\n  className = \"\"\n}) {\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {\n    const isHovered = hoveredIndex === index;\n    const isAnyHovered = hoveredIndex !== null;\n    const isInactive = isAnyHovered && !isHovered;\n    return /* @__PURE__ */ jsxs(\n      \"a\",\n      {\n        href: item.href || \"#\",\n        onMouseEnter: () => setHoveredIndex(index),\n        onMouseLeave: () => setHoveredIndex(null),\n        className: \"relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none\",\n        style: {\n          filter: isInactive ? `blur(${blurAmount}px)` : \"none\",\n          opacity: isInactive ? opacityAmount : 1,\n          color: isHovered ? \"var(--color-blue-500, #3b82f6)\" : \"inherit\"\n        },\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10\", children: item.label }),\n          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 1.3 },\n              animate: { opacity: 1, scale: 1.1 },\n              exit: { opacity: 0, scale: 1.3 },\n              transition: { type: \"spring\", stiffness: 350, damping: 20 },\n              className: \"absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0\",\n              style: { margin: \"-4px -8px\" }\n            }\n          ) })\n        ]\n      },\n      index\n    );\n  }) });\n}\n\n// registry/ui/hover/inset-button.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar insetButtonStyles = `\n.mova-inset-button {\n  --surface-elevated: oklch(0.996 0.001 95);\n  --surface-shell: oklch(0.963 0.003 95);\n  --ink-strong: oklch(0.205 0.004 95);\n  --ink-base: oklch(0.315 0.004 92);\n  --border-soft: oklch(0.9 0.003 95);\n  --border-base: oklch(0.84 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 94%, white);\n  --sidebar-foreground: var(--ink-base);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 92%, white);\n  --control-hover-core: var(--surface-elevated);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), 0 2px 7px color-mix(in oklab, var(--ink-strong) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--border-soft) 52%, transparent);\n  position: relative; isolation: isolate; display: inline-flex;\n  align-items: center; justify-content: center; flex-shrink: 0;\n  box-sizing: border-box; height: 2.5rem; padding: 0 .95rem;\n  border: 1px solid var(--border-base); border-radius: 999px;\n  background: var(--surface-elevated); color: var(--ink-strong);\n  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;\n  white-space: nowrap; cursor: pointer; outline: none;\n  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;\n  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mova-inset-button[data-theme=\"dark\"] {\n  --surface-elevated: oklch(0.282 0.004 95);\n  --surface-shell: oklch(0.225 0.003 95);\n  --ink-strong: oklch(0.955 0.001 95);\n  --ink-base: oklch(0.88 0.002 95);\n  --border-soft: oklch(0.35 0.004 95);\n  --border-base: oklch(0.44 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 96%, black);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 94%, black);\n  --control-hover-core: color-mix(in oklab, var(--surface-elevated) 84%, white);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);\n}\n.mova-inset-button::before {\n  content: \"\"; position: absolute; z-index: -1; inset: 4px; border-radius: inherit;\n  background: var(--control-hover-core); box-shadow: var(--control-hover-core-shadow);\n  backdrop-filter: blur(16px) saturate(118%); opacity: 0; pointer-events: none;\n  transform: scale(0.82);\n  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mova-inset-button:is(:hover, :focus-visible, :active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"])::before { opacity: 1; transform: scale(1); }\n.mova-inset-button:active:not(:disabled):not([aria-disabled=\"true\"])::before { transform: scale(0.95); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]::before { content: none; }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:hover, :focus-visible, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 94%, black); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 89%, black); }\n.mova-inset-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--ink-base) 25%, transparent); outline-offset: 1px; }\n.mova-inset-button[data-variant=\"create\"] {\n  width: 36px; height: 36px; padding: 0; overflow: hidden; backdrop-filter: blur(22px);\n  --control-hover-core: color-mix(in oklab, white 88%, transparent);\n  --control-hover-core-shadow: 0 2px 6px color-mix(in oklab, var(--sidebar-foreground) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--sidebar-foreground) 4%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 76%, white);\n  background: color-mix(in oklab, var(--sidebar-foreground) 8%, var(--sidebar));\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--sidebar));\n  box-shadow: 0 6px 18px -16px rgb(15 23 42 / 0.55);\n}\n.mova-inset-button[data-theme=\"dark\"][data-variant=\"create\"] {\n  --control-hover-core: color-mix(in oklab, var(--sidebar-foreground) 20%, var(--sidebar));\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 78%, white 22%);\n  background: color-mix(in oklab, var(--sidebar) 90%, white 10%);\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, white 12%);\n  box-shadow: 0 7px 18px -16px rgb(0 0 0 / 0.72);\n}\n.mova-inset-button:disabled, .mova-inset-button[aria-disabled=\"true\"] { pointer-events: none; opacity: .5; }\n@media (prefers-reduced-motion: reduce) {\n  .mova-inset-button { transition: none !important; }\n  .mova-inset-button::before { transform: scale(1) !important; transition: none !important; }\n}\n`;\nfunction InsetButton({ variant = \"text\", theme = \"dark\", children, className = \"\", type = \"button\", ...props }) {\n  return /* @__PURE__ */ jsxs2(Fragment, { children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: insetButtonStyles }),\n    /* @__PURE__ */ jsx2(\n      \"button\",\n      {\n        type,\n        \"aria-label\": variant === \"create\" ? \"Create\" : void 0,\n        ...props,\n        \"data-theme\": theme,\n        \"data-variant\": variant,\n        className: `mova-inset-button ${className}`,\n        children: variant === \"create\" ? /* @__PURE__ */ jsx2(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\", strokeLinecap: \"round\", strokeLinejoin: \"round\", \"aria-hidden\": \"true\", children: /* @__PURE__ */ jsx2(\"path\", { d: \"M12 5v14M5 12h14\" }) }) : children\n      }\n    )\n  ] });\n}\n\n// src/components/AnimatedButton.tsx\nimport { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nvar AnimatedButton = React2.memo(function AnimatedButton2({ config, layoutMode, theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState2(false);\n  const [hasInteracted, setHasInteracted] = useState2(false);\n  const [mouseCoords, setMouseCoords] = useState2({ x: 0, y: 0 });\n  if (config.interactionType === \"inset-text\" || config.interactionType === \"circle-create\") {\n    return /* @__PURE__ */ jsx3(\n      InsetButton,\n      {\n        theme,\n        variant: config.interactionType === \"circle-create\" ? \"create\" : \"text\",\n        \"aria-label\": config.label,\n        style: layoutMode === \"matrix\" && config.interactionType === \"inset-text\" ? { zoom: 0.55 } : void 0,\n        children: config.label\n      }\n    );\n  }\n  if (config.interactionType === \"focus-blur\") {\n    return /* @__PURE__ */ jsx3(\n      FocusBlur,\n      {\n        items: [\n          { label: \"@X\", href: \"#\" },\n          { label: \"@Threads\", href: \"#\" },\n          { label: \"@GitHub\", href: \"#\" }\n        ],\n        showBrackets: true,\n        className: layoutMode === \"matrix\" ? \"scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1\" : \"text-sm gap-4\"\n      }\n    );\n  }\n  const Icon1 = config.icon1;\n  const Icon2 = config.icon2;\n  const isMatrix = layoutMode === \"matrix\";\n  const isLightTheme = theme === \"light\";\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleMouseMove = (e) => {\n    if (config.interactionType === \"magnetic\") {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left - rect.width / 2;\n      const y = e.clientY - rect.top - rect.height / 2;\n      setMouseCoords({ x: x * 0.35, y: y * 0.35 });\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    if (config.interactionType === \"magnetic\") {\n      setMouseCoords({ x: 0, y: 0 });\n    }\n    if (hasInteracted) {\n      setTimeout(() => setHasInteracted(false), 500);\n    }\n  };\n  const handleTouchStart = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleTouchEnd = () => {\n    setTimeout(() => {\n      setIsHovered(false);\n      if (hasInteracted) {\n        setTimeout(() => setHasInteracted(false), 500);\n      }\n    }, 500);\n  };\n  const showIcon2 = hasInteracted || isHovered;\n  const renderIconContent = () => {\n    switch (config.interactionType) {\n      case \"slide-arrow\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: !isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: -10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"mr-2.5\" : \"\"}`,\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: 10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"ml-2.5\" : \"\"}`,\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon2\"\n          ) })\n        ] });\n      case \"sparkle\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { y: -15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: -15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { y: 15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: 15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.05 },\n                    className: \"absolute -top-3 -right-2\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-2.5 h-2.5 text-yellow-200\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                ),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.1 },\n                    className: \"absolute -top-1 -left-3\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-1.5 h-1.5 text-yellow-400\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"morph\":\n      case \"color-morph\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` })\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.id === \"4\" && showIcon2 ? \"Copied\" : config.label })\n        ] });\n      case \"pulse\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },\n              transition: { duration: 0.4, ease: \"easeInOut\" },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"rotate\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"shake\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: {\n                y: isHovered ? [0, -2, 0, -2, 0] : 0,\n                rotate: isHovered ? [0, -10, 10, -10, 0] : 0\n              },\n              transition: { duration: 0.4 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: `font-medium tracking-tight text-[13px] whitespace-nowrap transition-colors duration-300 ml-2.5 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n        ] });\n      case \"ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { scale: 0 },\n                    animate: { scale: 1 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 15, delay: 0.1 },\n                    className: \"absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent\"\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"glare\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { x: isHovered ? [\"-150%\", \"150%\"] : \"-150%\" },\n              transition: { duration: 0.85, ease: \"easeInOut\", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },\n              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,\n              style: {\n                background: isLightTheme ? \"linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)\" : \"linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)\"\n              }\n            }\n          )\n        ] });\n      case \"text-reveal\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"div\", { className: \"relative h-[18px] overflow-hidden\", children: /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              animate: { y: isHovered ? -18 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"flex flex-col\",\n              children: [\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label }),\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n              ]\n            }\n          ) })\n        ] });\n      case \"magnetic\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label })\n        ] });\n      case \"expand-ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? 1.1 : 1 },\n              transition: { type: \"spring\", stiffness: 400, damping: 20 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { opacity: 1, scale: 1 },\n              animate: { opacity: 0, scale: 1.15 },\n              exit: { opacity: 0 },\n              transition: { duration: 0.6, ease: \"easeOut\" },\n              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? \"border-black/25\" : \"border-white/25\"}`\n            },\n            \"expand-ring-div\"\n          ) })\n        ] });\n      default:\n        return null;\n    }\n  };\n  return /* @__PURE__ */ jsx3(\n    motion2.button,\n    {\n      layout: true,\n      transition: { type: \"spring\", stiffness: 500, damping: 25 },\n      onMouseEnter: handleMouseEnter,\n      onMouseMove: handleMouseMove,\n      onMouseLeave: handleMouseLeave,\n      onPointerEnter: handleMouseEnter,\n      onPointerLeave: handleMouseLeave,\n      onPointerMove: handleMouseMove,\n      onFocus: handleMouseEnter,\n      onBlur: handleMouseLeave,\n      onTouchStart: handleTouchStart,\n      onTouchEnd: handleTouchEnd,\n      animate: {\n        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,\n        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,\n        x: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.x : 0,\n        y: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.y : 0,\n        backgroundColor: isLightTheme ? hasInteracted && config.id === \"4\" ? \"rgba(0,0,0,0.08)\" : isHovered ? \"rgba(0,0,0,0.06)\" : \"rgba(0,0,0,0.04)\" : hasInteracted && config.id === \"4\" ? \"rgba(255,255,255,0.08)\" : isHovered ? \"rgba(255,255,255,0.06)\" : \"rgba(255,255,255,0.04)\"\n      },\n      whileHover: { scale: 1.02 },\n      whileTap: { scale: 0.96 },\n      className: `relative flex items-center justify-center rounded-[40px] border-0 cursor-pointer shadow-none transition-colors duration-150 ${isMatrix ? \"w-[36px] h-[36px] sm:w-[42px] sm:h-[42px] px-0\" : \"h-[36px] min-w-[75px]\"} ${config.interactionType === \"glare\" ? \"overflow-hidden\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`,\n      children: /* @__PURE__ */ jsx3(motion2.div, { layout: true, transition: { type: \"spring\", stiffness: 500, damping: 25 }, className: `flex items-center justify-center w-full ${isMatrix ? \"scale-100 sm:scale-[1.15] origin-center\" : \"\"}`, children: renderIconContent() })\n    }\n  );\n});\n\n// src/data/buttons.tsx\nimport {\n  ArrowRight,\n  Github,\n  Star,\n  Cloud,\n  CloudUpload,\n  Copy,\n  Check,\n  Heart,\n  Link,\n  Send,\n  Play,\n  Pause,\n  Settings,\n  Trash2,\n  Bell,\n  BellRing,\n  Search,\n  X,\n  Moon,\n  Sun,\n  Mic,\n  MicOff,\n  Video,\n  VideoOff,\n  Volume2,\n  VolumeX,\n  Lock,\n  Unlock,\n  Folder,\n  FolderOpen,\n  Eye,\n  EyeOff,\n  Bookmark,\n  ThumbsUp,\n  Download,\n  Upload,\n  User,\n  UserCheck,\n  Pen,\n  Wifi,\n  WifiOff,\n  Battery,\n  BatteryCharging,\n  Maximize,\n  Minimize,\n  RefreshCw,\n  Plus\n} from \"lucide-react\";\nimport { jsx as jsx4 } from \"react/jsx-runtime\";\nvar AppleIcon = (props) => /* @__PURE__ */ jsx4(\"svg\", { viewBox: \"0 0 384 512\", fill: \"currentColor\", ...props, children: /* @__PURE__ */ jsx4(\"path\", { d: \"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\" }) });\nvar buttonsData = [\n  { id: \"36\", label: \"Open Run Details\", icon1: ArrowRight, interactionType: \"inset-text\" },\n  { id: \"37\", label: \"Create\", icon1: Plus, interactionType: \"circle-create\" },\n  { id: \"1\", label: \"Download for Mac\", icon1: AppleIcon, icon2: ArrowRight, interactionType: \"slide-arrow\", hoverBg: \"#0a0a0a\" },\n  { id: \"2\", label: \"Star on GitHub\", icon1: Github, icon2: Star, interactionType: \"sparkle\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"3\", label: \"Deploy App\", icon1: Cloud, icon2: CloudUpload, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"4\", label: \"Copy Hash\", icon1: Copy, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"5\", label: \"Sponsor\", icon1: Heart, interactionType: \"pulse\", hoverBg: \"#1f1f1f\", icon1Color: \"text-pink-500\" },\n  { id: \"6\", label: \"Share\", icon1: Link, icon2: Send, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"7\", label: \"Preview\", icon1: Play, icon2: Pause, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-green-400\" },\n  { id: \"8\", label: \"Settings\", icon1: Settings, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"9\", label: \"Delete\", icon1: Trash2, interactionType: \"shake\", hoverBg: \"#1f1f1f\", icon1Color: \"text-red-400\" },\n  { id: \"10\", label: \"Subscribe\", icon1: Bell, icon2: BellRing, interactionType: \"ring\", hoverBg: \"#1f1f1f\", icon2Color: \"text-orange-400\" },\n  { id: \"11\", label: \"Search\", icon1: Search, icon2: X, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"12\", label: \"Theme\", icon1: Moon, icon2: Sun, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"13\", label: \"Microphone\", icon1: Mic, icon2: MicOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"14\", label: \"Camera\", icon1: Video, icon2: VideoOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"15\", label: \"Volume\", icon1: Volume2, icon2: VolumeX, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"16\", label: \"Lock\", icon1: Lock, icon2: Unlock, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"17\", label: \"Directory\", icon1: Folder, icon2: FolderOpen, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"18\", label: \"Visibility\", icon1: Eye, icon2: EyeOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"19\", label: \"Save Later\", icon1: Bookmark, icon2: Bookmark, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400 fill-blue-400\" },\n  { id: \"20\", label: \"Like\", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-500 fill-blue-500\" },\n  { id: \"21\", label: \"Download\", icon1: Download, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"22\", label: \"Upload\", icon1: Upload, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"23\", label: \"Account\", icon1: User, icon2: UserCheck, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"24\", label: \"Submit\", icon1: Send, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"25\", label: \"Edit\", icon1: Pen, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"26\", label: \"Network\", icon1: Wifi, icon2: WifiOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"27\", label: \"Power\", icon1: Battery, icon2: BatteryCharging, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"28\", label: \"Expand\", icon1: Maximize, icon2: Minimize, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"29\", label: \"Reload\", icon1: RefreshCw, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"30\", label: \"Favorite\", icon1: Star, icon2: Star, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400 fill-yellow-400\" },\n  { id: \"31\", label: \"Glare Shine\", icon1: Star, interactionType: \"glare\", hoverBg: \"#1f1f1f\" },\n  { id: \"32\", label: \"Text Reveal\", icon1: ArrowRight, interactionType: \"text-reveal\", hoverBg: \"#1f1f1f\" },\n  { id: \"33\", label: \"Magnetic Field\", icon1: Github, interactionType: \"magnetic\", hoverBg: \"#1f1f1f\" },\n  { id: \"34\", label: \"Expand Ring\", icon1: Link, interactionType: \"expand-ring\", hoverBg: \"#1f1f1f\" },\n  { id: \"35\", label: \"Focus Blur Links\", icon1: Link, interactionType: \"focus-blur\", hoverBg: \"#1f1f1f\" }\n];\n\n// btn-9.tsx\nimport { jsx as jsx5 } from \"react/jsx-runtime\";\nfunction Demo() {\n  const config = buttonsData.find((button) => button.id === \"9\");\n  if (!config) return null;\n  return /* @__PURE__ */ jsx5(AnimatedButton, { config, layoutMode: \"grid\", theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/button-slide-arrow.json

@@ -0,0 +1,19 @@
+{
+  "id": "button-slide-arrow",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "button-slide-arrow.tsx",
+  "registryFile": "button-slide-arrow.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './button-slide-arrow';\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/AnimatedButton.tsx\nimport React2, { useState as useState2 } from \"react\";\nimport { AnimatePresence as AnimatePresence2, motion as motion2 } from \"framer-motion\";\n\n// src/components/cards/FocusBlur.tsx\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nfunction FocusBlur({\n  items = [\n    { label: \"@Twitter\", href: \"#\" },\n    { label: \"@Threads\", href: \"#\" },\n    { label: \"@Instagram\", href: \"#\" },\n    { label: \"@GitHub\", href: \"#\" }\n  ],\n  blurAmount = 4,\n  opacityAmount = 0.4,\n  showBrackets = true,\n  className = \"\"\n}) {\n  const [hoveredIndex, setHoveredIndex] = useState(null);\n  return /* @__PURE__ */ jsx(\"div\", { className: `flex flex-wrap justify-center items-center gap-6 py-6 px-10 cursor-default ${className}`, children: items.map((item, index) => {\n    const isHovered = hoveredIndex === index;\n    const isAnyHovered = hoveredIndex !== null;\n    const isInactive = isAnyHovered && !isHovered;\n    return /* @__PURE__ */ jsxs(\n      \"a\",\n      {\n        href: item.href || \"#\",\n        onMouseEnter: () => setHoveredIndex(index),\n        onMouseLeave: () => setHoveredIndex(null),\n        className: \"relative font-semibold text-lg sm:text-2xl no-underline transition-all duration-300 select-none outline-none\",\n        style: {\n          filter: isInactive ? `blur(${blurAmount}px)` : \"none\",\n          opacity: isInactive ? opacityAmount : 1,\n          color: isHovered ? \"var(--color-blue-500, #3b82f6)\" : \"inherit\"\n        },\n        children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10\", children: item.label }),\n          showBrackets && /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(\n            motion.div,\n            {\n              initial: { opacity: 0, scale: 1.3 },\n              animate: { opacity: 1, scale: 1.1 },\n              exit: { opacity: 0, scale: 1.3 },\n              transition: { type: \"spring\", stiffness: 350, damping: 20 },\n              className: \"absolute inset-0 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg pointer-events-none z-0\",\n              style: { margin: \"-4px -8px\" }\n            }\n          ) })\n        ]\n      },\n      index\n    );\n  }) });\n}\n\n// registry/ui/hover/inset-button.tsx\nimport { Fragment, jsx as jsx2, jsxs as jsxs2 } from \"react/jsx-runtime\";\nvar insetButtonStyles = `\n.mova-inset-button {\n  --surface-elevated: oklch(0.996 0.001 95);\n  --surface-shell: oklch(0.963 0.003 95);\n  --ink-strong: oklch(0.205 0.004 95);\n  --ink-base: oklch(0.315 0.004 92);\n  --border-soft: oklch(0.9 0.003 95);\n  --border-base: oklch(0.84 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 94%, white);\n  --sidebar-foreground: var(--ink-base);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 92%, white);\n  --control-hover-core: var(--surface-elevated);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), 0 2px 7px color-mix(in oklab, var(--ink-strong) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--border-soft) 52%, transparent);\n  position: relative; isolation: isolate; display: inline-flex;\n  align-items: center; justify-content: center; flex-shrink: 0;\n  box-sizing: border-box; height: 2.5rem; padding: 0 .95rem;\n  border: 1px solid var(--border-base); border-radius: 999px;\n  background: var(--surface-elevated); color: var(--ink-strong);\n  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.25rem;\n  white-space: nowrap; cursor: pointer; outline: none;\n  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;\n  transition-duration: 150ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mova-inset-button[data-theme=\"dark\"] {\n  --surface-elevated: oklch(0.282 0.004 95);\n  --surface-shell: oklch(0.225 0.003 95);\n  --ink-strong: oklch(0.955 0.001 95);\n  --ink-base: oklch(0.88 0.002 95);\n  --border-soft: oklch(0.35 0.004 95);\n  --border-base: oklch(0.44 0.004 95);\n  --sidebar: color-mix(in oklab, var(--surface-shell) 96%, black);\n  --sidebar-border: color-mix(in oklab, var(--border-soft) 94%, black);\n  --control-hover-core: color-mix(in oklab, var(--surface-elevated) 84%, white);\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 9%, transparent);\n}\n.mova-inset-button::before {\n  content: \"\"; position: absolute; z-index: -1; inset: 4px; border-radius: inherit;\n  background: var(--control-hover-core); box-shadow: var(--control-hover-core-shadow);\n  backdrop-filter: blur(16px) saturate(118%); opacity: 0; pointer-events: none;\n  transform: scale(0.82);\n  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.mova-inset-button:is(:hover, :focus-visible, :active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"])::before { opacity: 1; transform: scale(1); }\n.mova-inset-button:active:not(:disabled):not([aria-disabled=\"true\"])::before { transform: scale(0.95); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]::before { content: none; }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:hover, :focus-visible, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 94%, black); }\n.mova-inset-button[data-theme=\"light\"][data-variant=\"text\"]:is(:active, [data-state=\"open\"]):not(:disabled):not([aria-disabled=\"true\"]) { background: color-mix(in oklab, var(--surface-elevated) 89%, black); }\n.mova-inset-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--ink-base) 25%, transparent); outline-offset: 1px; }\n.mova-inset-button[data-variant=\"create\"] {\n  width: 36px; height: 36px; padding: 0; overflow: hidden; backdrop-filter: blur(22px);\n  --control-hover-core: color-mix(in oklab, white 88%, transparent);\n  --control-hover-core-shadow: 0 2px 6px color-mix(in oklab, var(--sidebar-foreground) 12%, transparent), 0 0 0 1px color-mix(in oklab, var(--sidebar-foreground) 4%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 76%, white);\n  background: color-mix(in oklab, var(--sidebar-foreground) 8%, var(--sidebar));\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--sidebar));\n  box-shadow: 0 6px 18px -16px rgb(15 23 42 / 0.55);\n}\n.mova-inset-button[data-theme=\"dark\"][data-variant=\"create\"] {\n  --control-hover-core: color-mix(in oklab, var(--sidebar-foreground) 20%, var(--sidebar));\n  --control-hover-core-shadow: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);\n  border-color: color-mix(in oklab, var(--sidebar-border) 78%, white 22%);\n  background: color-mix(in oklab, var(--sidebar) 90%, white 10%);\n  color: color-mix(in oklab, var(--sidebar-foreground) 88%, white 12%);\n  box-shadow: 0 7px 18px -16px rgb(0 0 0 / 0.72);\n}\n.mova-inset-button:disabled, .mova-inset-button[aria-disabled=\"true\"] { pointer-events: none; opacity: .5; }\n@media (prefers-reduced-motion: reduce) {\n  .mova-inset-button { transition: none !important; }\n  .mova-inset-button::before { transform: scale(1) !important; transition: none !important; }\n}\n`;\nfunction InsetButton({ variant = \"text\", theme = \"dark\", children, className = \"\", type = \"button\", ...props }) {\n  return /* @__PURE__ */ jsxs2(Fragment, { children: [\n    /* @__PURE__ */ jsx2(\"style\", { children: insetButtonStyles }),\n    /* @__PURE__ */ jsx2(\n      \"button\",\n      {\n        type,\n        \"aria-label\": variant === \"create\" ? \"Create\" : void 0,\n        ...props,\n        \"data-theme\": theme,\n        \"data-variant\": variant,\n        className: `mova-inset-button ${className}`,\n        children: variant === \"create\" ? /* @__PURE__ */ jsx2(\"svg\", { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\", strokeLinecap: \"round\", strokeLinejoin: \"round\", \"aria-hidden\": \"true\", children: /* @__PURE__ */ jsx2(\"path\", { d: \"M12 5v14M5 12h14\" }) }) : children\n      }\n    )\n  ] });\n}\n\n// src/components/AnimatedButton.tsx\nimport { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from \"react/jsx-runtime\";\nvar AnimatedButton = React2.memo(function AnimatedButton2({ config, layoutMode, theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState2(false);\n  const [hasInteracted, setHasInteracted] = useState2(false);\n  const [mouseCoords, setMouseCoords] = useState2({ x: 0, y: 0 });\n  if (config.interactionType === \"inset-text\" || config.interactionType === \"circle-create\") {\n    return /* @__PURE__ */ jsx3(\n      InsetButton,\n      {\n        theme,\n        variant: config.interactionType === \"circle-create\" ? \"create\" : \"text\",\n        \"aria-label\": config.label,\n        style: layoutMode === \"matrix\" && config.interactionType === \"inset-text\" ? { zoom: 0.55 } : void 0,\n        children: config.label\n      }\n    );\n  }\n  if (config.interactionType === \"focus-blur\") {\n    return /* @__PURE__ */ jsx3(\n      FocusBlur,\n      {\n        items: [\n          { label: \"@X\", href: \"#\" },\n          { label: \"@Threads\", href: \"#\" },\n          { label: \"@GitHub\", href: \"#\" }\n        ],\n        showBrackets: true,\n        className: layoutMode === \"matrix\" ? \"scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1\" : \"text-sm gap-4\"\n      }\n    );\n  }\n  const Icon1 = config.icon1;\n  const Icon2 = config.icon2;\n  const isMatrix = layoutMode === \"matrix\";\n  const isLightTheme = theme === \"light\";\n  const handleMouseEnter = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleMouseMove = (e) => {\n    if (config.interactionType === \"magnetic\") {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left - rect.width / 2;\n      const y = e.clientY - rect.top - rect.height / 2;\n      setMouseCoords({ x: x * 0.35, y: y * 0.35 });\n    }\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n    if (config.interactionType === \"magnetic\") {\n      setMouseCoords({ x: 0, y: 0 });\n    }\n    if (hasInteracted) {\n      setTimeout(() => setHasInteracted(false), 500);\n    }\n  };\n  const handleTouchStart = () => {\n    setIsHovered(true);\n    if (config.interactionType === \"morph\" && (config.id === \"4\" || config.id === \"21\" || config.id === \"22\" || config.id === \"24\" || config.id === \"25\")) {\n      setHasInteracted(true);\n    }\n  };\n  const handleTouchEnd = () => {\n    setTimeout(() => {\n      setIsHovered(false);\n      if (hasInteracted) {\n        setTimeout(() => setHasInteracted(false), 500);\n      }\n    }, 500);\n  };\n  const showIcon2 = hasInteracted || isHovered;\n  const renderIconContent = () => {\n    switch (config.interactionType) {\n      case \"slide-arrow\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: !isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: -10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: -10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"mr-2.5\" : \"\"}`,\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              layout: true,\n              initial: { opacity: 0, x: 10 },\n              animate: { opacity: 1, x: 0 },\n              exit: { opacity: 0, x: 10 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: `flex items-center shrink-0 ${!isMatrix ? \"ml-2.5\" : \"\"}`,\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon2\"\n          ) })\n        ] });\n      case \"sparkle\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { y: -15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: -15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { y: 15, opacity: 0, scale: 0.8 },\n              animate: { y: 0, opacity: 1, scale: 1 },\n              exit: { y: 15, opacity: 0, scale: 0.8 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.05 },\n                    className: \"absolute -top-3 -right-2\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-2.5 h-2.5 text-yellow-200\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                ),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },\n                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },\n                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 25, delay: 0.1 },\n                    className: \"absolute -top-1 -left-3\",\n                    children: /* @__PURE__ */ jsx3(\"svg\", { className: \"w-1.5 h-1.5 text-yellow-400\", viewBox: \"0 0 24 24\", fill: \"currentColor\", children: /* @__PURE__ */ jsx3(\"path\", { d: \"M12 2l2.4 7.6H22l-6.2 4.5 2.4 7.6-6.2-4.5-6.2 4.5 2.4-7.6L2 9.6h7.6z\" }) })\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"morph\":\n      case \"color-morph\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { scale: 0.5, opacity: 0 },\n              animate: { scale: 1, opacity: 1 },\n              exit: { scale: 0.5, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` })\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.id === \"4\" && showIcon2 ? \"Copied\" : config.label })\n        ] });\n      case \"pulse\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },\n              transition: { duration: 0.4, ease: \"easeInOut\" },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"rotate\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"shake\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: {\n                y: isHovered ? [0, -2, 0, -2, 0] : 0,\n                rotate: isHovered ? [0, -10, 10, -10, 0] : 0\n              },\n              transition: { duration: 0.4 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: `font-medium tracking-tight text-[13px] whitespace-nowrap transition-colors duration-300 ml-2.5 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n        ] });\n      case \"ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: \"popLayout\", initial: false, children: !isHovered ? /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            },\n            \"icon1\"\n          ) : /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              initial: { rotate: -15, scale: 0.8, opacity: 0 },\n              animate: { rotate: 0, scale: 1, opacity: 1 },\n              exit: { rotate: 15, scale: 0.8, opacity: 0 },\n              transition: { type: \"spring\", stiffness: 600, damping: 25 },\n              className: \"absolute inset-0 flex items-center justify-center\",\n              children: [\n                Icon2 && /* @__PURE__ */ jsx3(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\")}` }),\n                /* @__PURE__ */ jsx3(\n                  motion2.div,\n                  {\n                    initial: { scale: 0 },\n                    animate: { scale: 1 },\n                    transition: { type: \"spring\", stiffness: 600, damping: 15, delay: 0.1 },\n                    className: \"absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent\"\n                  }\n                )\n              ]\n            },\n            \"icon2\"\n          ) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(motion2.span, { layout: true, className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label })\n        ] });\n      case \"glare\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label }),\n          /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { x: isHovered ? [\"-150%\", \"150%\"] : \"-150%\" },\n              transition: { duration: 0.85, ease: \"easeInOut\", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },\n              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,\n              style: {\n                background: isLightTheme ? \"linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)\" : \"linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)\"\n              }\n            }\n          )\n        ] });\n      case \"text-reveal\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5\", children: /* @__PURE__ */ jsx3(motion2.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: \"spring\", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }) }) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"div\", { className: \"relative h-[18px] overflow-hidden\", children: /* @__PURE__ */ jsxs3(\n            motion2.div,\n            {\n              animate: { y: isHovered ? -18 : 0 },\n              transition: { type: \"spring\", stiffness: 400, damping: 25 },\n              className: \"flex flex-col\",\n              children: [\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label }),\n                /* @__PURE__ */ jsx3(\"span\", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`, children: config.label })\n              ]\n            }\n          ) })\n        ] });\n      case \"magnetic\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? \"mr-2.5\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap\", children: config.label })\n        ] });\n      case \"expand-ring\":\n        return /* @__PURE__ */ jsxs3(Fragment2, { children: [\n          /* @__PURE__ */ jsx3(\"div\", { className: \"relative w-[16px] h-[16px] flex items-center justify-center shrink-0\", children: /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              animate: { scale: isHovered ? 1.1 : 1 },\n              transition: { type: \"spring\", stiffness: 400, damping: 20 },\n              children: /* @__PURE__ */ jsx3(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}` })\n            }\n          ) }),\n          !isMatrix && /* @__PURE__ */ jsx3(\"span\", { className: \"font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5\", children: config.label }),\n          /* @__PURE__ */ jsx3(AnimatePresence2, { children: isHovered && /* @__PURE__ */ jsx3(\n            motion2.div,\n            {\n              initial: { opacity: 1, scale: 1 },\n              animate: { opacity: 0, scale: 1.15 },\n              exit: { opacity: 0 },\n              transition: { duration: 0.6, ease: \"easeOut\" },\n              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? \"border-black/25\" : \"border-white/25\"}`\n            },\n            \"expand-ring-div\"\n          ) })\n        ] });\n      default:\n        return null;\n    }\n  };\n  return /* @__PURE__ */ jsx3(\n    motion2.button,\n    {\n      layout: true,\n      transition: { type: \"spring\", stiffness: 500, damping: 25 },\n      onMouseEnter: handleMouseEnter,\n      onMouseMove: handleMouseMove,\n      onMouseLeave: handleMouseLeave,\n      onPointerEnter: handleMouseEnter,\n      onPointerLeave: handleMouseLeave,\n      onPointerMove: handleMouseMove,\n      onFocus: handleMouseEnter,\n      onBlur: handleMouseLeave,\n      onTouchStart: handleTouchStart,\n      onTouchEnd: handleTouchEnd,\n      animate: {\n        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,\n        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,\n        x: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.x : 0,\n        y: isHovered && config.interactionType === \"magnetic\" ? mouseCoords.y : 0,\n        backgroundColor: isLightTheme ? hasInteracted && config.id === \"4\" ? \"rgba(0,0,0,0.08)\" : isHovered ? \"rgba(0,0,0,0.06)\" : \"rgba(0,0,0,0.04)\" : hasInteracted && config.id === \"4\" ? \"rgba(255,255,255,0.08)\" : isHovered ? \"rgba(255,255,255,0.06)\" : \"rgba(255,255,255,0.04)\"\n      },\n      whileHover: { scale: 1.02 },\n      whileTap: { scale: 0.96 },\n      className: `relative flex items-center justify-center rounded-[40px] border-0 cursor-pointer shadow-none transition-colors duration-150 ${isMatrix ? \"w-[36px] h-[36px] sm:w-[42px] sm:h-[42px] px-0\" : \"h-[36px] min-w-[75px]\"} ${config.interactionType === \"glare\" ? \"overflow-hidden\" : \"\"} ${isLightTheme ? \"text-black\" : \"text-[#e3e3e3]\"}`,\n      children: /* @__PURE__ */ jsx3(motion2.div, { layout: true, transition: { type: \"spring\", stiffness: 500, damping: 25 }, className: `flex items-center justify-center w-full ${isMatrix ? \"scale-100 sm:scale-[1.15] origin-center\" : \"\"}`, children: renderIconContent() })\n    }\n  );\n});\n\n// src/data/buttons.tsx\nimport {\n  ArrowRight,\n  Github,\n  Star,\n  Cloud,\n  CloudUpload,\n  Copy,\n  Check,\n  Heart,\n  Link,\n  Send,\n  Play,\n  Pause,\n  Settings,\n  Trash2,\n  Bell,\n  BellRing,\n  Search,\n  X,\n  Moon,\n  Sun,\n  Mic,\n  MicOff,\n  Video,\n  VideoOff,\n  Volume2,\n  VolumeX,\n  Lock,\n  Unlock,\n  Folder,\n  FolderOpen,\n  Eye,\n  EyeOff,\n  Bookmark,\n  ThumbsUp,\n  Download,\n  Upload,\n  User,\n  UserCheck,\n  Pen,\n  Wifi,\n  WifiOff,\n  Battery,\n  BatteryCharging,\n  Maximize,\n  Minimize,\n  RefreshCw,\n  Plus\n} from \"lucide-react\";\nimport { jsx as jsx4 } from \"react/jsx-runtime\";\nvar AppleIcon = (props) => /* @__PURE__ */ jsx4(\"svg\", { viewBox: \"0 0 384 512\", fill: \"currentColor\", ...props, children: /* @__PURE__ */ jsx4(\"path\", { d: \"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\" }) });\nvar buttonsData = [\n  { id: \"36\", label: \"Open Run Details\", icon1: ArrowRight, interactionType: \"inset-text\" },\n  { id: \"37\", label: \"Create\", icon1: Plus, interactionType: \"circle-create\" },\n  { id: \"1\", label: \"Download for Mac\", icon1: AppleIcon, icon2: ArrowRight, interactionType: \"slide-arrow\", hoverBg: \"#0a0a0a\" },\n  { id: \"2\", label: \"Star on GitHub\", icon1: Github, icon2: Star, interactionType: \"sparkle\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"3\", label: \"Deploy App\", icon1: Cloud, icon2: CloudUpload, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"4\", label: \"Copy Hash\", icon1: Copy, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"5\", label: \"Sponsor\", icon1: Heart, interactionType: \"pulse\", hoverBg: \"#1f1f1f\", icon1Color: \"text-pink-500\" },\n  { id: \"6\", label: \"Share\", icon1: Link, icon2: Send, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"7\", label: \"Preview\", icon1: Play, icon2: Pause, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-green-400\" },\n  { id: \"8\", label: \"Settings\", icon1: Settings, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"9\", label: \"Delete\", icon1: Trash2, interactionType: \"shake\", hoverBg: \"#1f1f1f\", icon1Color: \"text-red-400\" },\n  { id: \"10\", label: \"Subscribe\", icon1: Bell, icon2: BellRing, interactionType: \"ring\", hoverBg: \"#1f1f1f\", icon2Color: \"text-orange-400\" },\n  { id: \"11\", label: \"Search\", icon1: Search, icon2: X, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"12\", label: \"Theme\", icon1: Moon, icon2: Sun, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400\" },\n  { id: \"13\", label: \"Microphone\", icon1: Mic, icon2: MicOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"14\", label: \"Camera\", icon1: Video, icon2: VideoOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"15\", label: \"Volume\", icon1: Volume2, icon2: VolumeX, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"16\", label: \"Lock\", icon1: Lock, icon2: Unlock, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"17\", label: \"Directory\", icon1: Folder, icon2: FolderOpen, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"18\", label: \"Visibility\", icon1: Eye, icon2: EyeOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-neutral-500\" },\n  { id: \"19\", label: \"Save Later\", icon1: Bookmark, icon2: Bookmark, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400 fill-blue-400\" },\n  { id: \"20\", label: \"Like\", icon1: ThumbsUp, icon2: ThumbsUp, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-500 fill-blue-500\" },\n  { id: \"21\", label: \"Download\", icon1: Download, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"22\", label: \"Upload\", icon1: Upload, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-blue-400\" },\n  { id: \"23\", label: \"Account\", icon1: User, icon2: UserCheck, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"24\", label: \"Submit\", icon1: Send, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"25\", label: \"Edit\", icon1: Pen, icon2: Check, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"26\", label: \"Network\", icon1: Wifi, icon2: WifiOff, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-red-400\" },\n  { id: \"27\", label: \"Power\", icon1: Battery, icon2: BatteryCharging, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-emerald-400\" },\n  { id: \"28\", label: \"Expand\", icon1: Maximize, icon2: Minimize, interactionType: \"morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-white\" },\n  { id: \"29\", label: \"Reload\", icon1: RefreshCw, interactionType: \"rotate\", hoverBg: \"#1f1f1f\" },\n  { id: \"30\", label: \"Favorite\", icon1: Star, icon2: Star, interactionType: \"color-morph\", hoverBg: \"#1f1f1f\", icon2Color: \"text-yellow-400 fill-yellow-400\" },\n  { id: \"31\", label: \"Glare Shine\", icon1: Star, interactionType: \"glare\", hoverBg: \"#1f1f1f\" },\n  { id: \"32\", label: \"Text Reveal\", icon1: ArrowRight, interactionType: \"text-reveal\", hoverBg: \"#1f1f1f\" },\n  { id: \"33\", label: \"Magnetic Field\", icon1: Github, interactionType: \"magnetic\", hoverBg: \"#1f1f1f\" },\n  { id: \"34\", label: \"Expand Ring\", icon1: Link, interactionType: \"expand-ring\", hoverBg: \"#1f1f1f\" },\n  { id: \"35\", label: \"Focus Blur Links\", icon1: Link, interactionType: \"focus-blur\", hoverBg: \"#1f1f1f\" }\n];\n\n// button-slide-arrow.tsx\nimport { jsx as jsx5 } from \"react/jsx-runtime\";\nfunction Demo() {\n  const config = buttonsData.find((button) => button.id === \"1\");\n  if (!config) return null;\n  return /* @__PURE__ */ jsx5(AnimatedButton, { config, layoutMode: \"grid\", theme: \"dark\" });\n}\nexport {\n  Demo as default\n};\n"
+}

package/registry/cacheable-bandwidth-cost.json

@@ -0,0 +1,19 @@
+{
+  "id": "cacheable-bandwidth-cost",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "cacheable-bandwidth-cost.tsx",
+  "registryFile": "cacheable-bandwidth-cost.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './cacheable-bandwidth-cost';\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/metrics/AnimatedMetricCard.tsx\nimport { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { TrendingUp, Zap, Check, ArrowUpRight, Share2, MoreHorizontal, ChevronDown, Star, Crown, HelpCircle } 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/metrics/AnimatedMetricCard.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedMetricCard = ({ config, theme }) => {\n  const [stockRange, setStockRange] = useState(\"1W\");\n  const [viewsRange, setViewsRange] = useState(\"Day\");\n  const [salesAnalyticsRange, setSalesAnalyticsRange] = useState(\"Weekly\");\n  const [salesTargetRange, setSalesTargetRange] = useState(\"Yearly\");\n  const [timerActive, setTimerActive] = useState(false);\n  const [decibelLevel, setDecibelLevel] = useState(40);\n  const { trigger: triggerHaptic } = useWebHaptics();\n  const isDark = theme === \"dark\";\n  const containerClasses = `w-full h-full p-4 flex flex-col justify-between select-none font-sans transition-colors duration-300 ${isDark ? \"text-white\" : \"text-black\"}`;\n  switch (config.interactionType) {\n    // --- CACHEABLE BANDWIDTH COST CARD ---\n    case \"cacheable-bandwidth-cost\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1.5\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"90.5 GB\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold text-neutral-400 font-normal\", children: \"(69.8%)\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between text-xs font-semibold mt-1\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5 text-neutral-500 dark:text-neutral-400\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#A855F7]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Cacheable Bandwidth\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1 text-neutral-600 dark:text-neutral-300 font-bold\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-3.5 h-3.5 rounded-full bg-neutral-200 dark:bg-white/15 text-[10px] flex items-center justify-center font-black\", children: \"$\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"$9.50\" }),\n              /* @__PURE__ */ jsx(HelpCircle, { className: \"w-3.5 h-3.5 text-neutral-400 cursor-pointer\" })\n            ] })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"my-2\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-4 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center p-0.5 overflow-hidden gap-0.5\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"h-full w-[25%] bg-[#1E1B4B] dark:bg-[#312E81] rounded-l-full\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"h-full w-[20%] bg-[#A855F7]\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"h-full flex-1 rounded-r-full bg-[#F3E8FF] dark:bg-[#2E1065] relative overflow-hidden\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-40\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n            /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: \"bandwidth-stripes\", width: \"8\", height: \"8\", patternTransform: \"rotate(90 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"8\", stroke: \"#A855F7\", strokeWidth: \"4\" }) }) }),\n            /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: \"url(#bandwidth-stripes)\" })\n          ] }) })\n        ] }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1.5 text-xs font-semibold\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between text-neutral-600 dark:text-neutral-300\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#A855F7]\" }),\n            /* @__PURE__ */ jsxs(\"span\", { children: [\n              \"Cached \",\n              /* @__PURE__ */ jsx(\"strong\", { className: \"text-black dark:text-white font-bold\", children: \"12.8 GB\" }),\n              \" \",\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal\", children: \"(9.8%)\" })\n            ] })\n          ] }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between text-neutral-600 dark:text-neutral-300\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#1E1B4B] dark:bg-white\" }),\n            /* @__PURE__ */ jsxs(\"span\", { children: [\n              \"Non-Cacheable \",\n              /* @__PURE__ */ jsx(\"strong\", { className: \"text-black dark:text-white font-bold\", children: \"26.3 GB\" }),\n              \" \",\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal\", children: \"(20.3%)\" })\n            ] })\n          ] }) }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"pt-1 border-t border-neutral-100 dark:border-white/10 text-neutral-500 font-medium\", children: [\n            \"Total \",\n            /* @__PURE__ */ jsx(\"strong\", { className: \"text-black dark:text-white font-bold\", children: \"129.6 GB\" })\n          ] })\n        ] })\n      ] });\n    // --- OTHER IMAGE COMPONENTS ---\n    case \"sales-analytics-dual-bars\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#F9FAFB] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-bold tracking-tight\", children: \"Sales analytics\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[11px] text-neutral-400 font-medium mt-1\", children: \"Total units sold\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black tracking-tight\", children: \"345\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-bold text-neutral-400\", children: \"/500\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-full border ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"Monthly\", \"Weekly\"].map((r) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setSalesAnalyticsRange(r);\n              },\n              className: `px-3 py-1 text-[10px] font-bold rounded-full transition-colors cursor-pointer border-0 ${salesAnalyticsRange === r ? isDark ? \"bg-white text-black\" : \"bg-white text-black shadow-xs\" : \"text-neutral-400 hover:text-white\"}`,\n              children: r\n            },\n            r\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: `p-3 rounded-2xl border flex flex-col justify-between h-36 mt-1 ${isDark ? \"bg-[#121214] border-white/5\" : \"bg-white border-neutral-100 shadow-xs\"}`, children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-3 text-[10px] font-bold\", children: [\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-xs bg-[#EA580C]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Total Sales\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-xs bg-[#FDBA74]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Total Earnings\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-end justify-between px-2 h-20\", children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[40%]\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-end gap-1 h-full\", children: [\n              /* @__PURE__ */ jsx(motion.div, { initial: { height: 0 }, animate: { height: \"75%\" }, transition: { duration: 0.6 }, className: \"w-6 bg-[#EA580C] rounded-lg shadow-sm\" }),\n              /* @__PURE__ */ jsx(motion.div, { initial: { height: 0 }, animate: { height: \"90%\" }, transition: { duration: 0.6, delay: 0.1 }, className: \"w-6 bg-[#FDBA74] rounded-lg shadow-sm\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[55%]\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-6 bg-neutral-200/50 dark:bg-neutral-800/40 rounded-lg h-[45%]\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between px-2 text-[9px] font-bold text-neutral-400 uppercase\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Sep\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-black dark:text-white font-black\", children: \"Oct\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Nov\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Dec\" })\n          ] })\n        ] })\n      ] });\n    case \"sales-target-segmented-arc\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#F9FAFB] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold tracking-tight\", children: \"Sales target\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-full border ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"Monthly\", \"Yearly\"].map((r) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setSalesTargetRange(r);\n              },\n              className: `px-3 py-1 text-[10px] font-bold rounded-full transition-colors cursor-pointer border-0 ${salesTargetRange === r ? isDark ? \"bg-white text-black\" : \"bg-white text-black shadow-xs\" : \"text-neutral-400 hover:text-white\"}`,\n              children: r\n            },\n            r\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: `p-3 rounded-2xl border flex flex-col items-center justify-between h-44 mt-1 relative overflow-hidden ${isDark ? \"bg-[#121214] border-white/5\" : \"bg-white border-neutral-100 shadow-xs\"}`, children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-3 text-[10px] font-bold w-full justify-start\", children: [\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#FDBA74]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Property listed\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"span\", { className: \"flex items-center gap-1.5 text-neutral-600 dark:text-neutral-300\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-2 h-2 rounded-full bg-[#EA580C]\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Property delivered\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-52 h-28 flex items-center justify-center mt-2\", children: [\n            /* @__PURE__ */ jsx(\"svg\", { viewBox: \"0 0 200 110\", className: \"w-full h-full overflow-visible\", children: Array.from({ length: 16 }).map((_, i) => {\n              const angle = -180 + i * (180 / 15);\n              const isListed = i < 5;\n              const isDelivered = i >= 5 && i < 12;\n              return /* @__PURE__ */ jsx(\"g\", { transform: `rotate(${angle} 100 100)`, children: /* @__PURE__ */ jsx(\n                \"rect\",\n                {\n                  x: \"93\",\n                  y: \"10\",\n                  width: \"14\",\n                  height: \"28\",\n                  rx: \"4\",\n                  fill: isListed ? \"#FDBA74\" : isDelivered ? \"#EA580C\" : isDark ? \"#26262B\" : \"#E5E7EB\"\n                }\n              ) }, i);\n            }) }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"absolute bottom-1 flex flex-col items-center\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"70%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-semibold text-neutral-400\", children: \"Achieved\" })\n            ] })\n          ] })\n        ] })\n      ] });\n    case \"sales-overview-radial-dashboard\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold tracking-tight\", children: \"Sales Overview\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-7 h-7 rounded-full bg-neutral-100 dark:bg-white/10 flex items-center justify-center cursor-pointer\", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: \"w-4 h-4 text-neutral-500 dark:text-neutral-300\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"bg-[#F3F0FF] dark:bg-[#2E1A47] text-[#6D28D9] dark:text-[#DDD6FE] px-3 py-1.5 rounded-xl text-xs font-bold flex items-center gap-2 my-1\", children: [\n          /* @__PURE__ */ jsx(Crown, { className: \"w-4 h-4 fill-[#6D28D9] dark:fill-[#DDD6FE]\" }),\n          /* @__PURE__ */ jsxs(\"span\", { children: [\n            \"You're the top \",\n            /* @__PURE__ */ jsx(\"strong\", { className: \"text-[#4C1D95] dark:text-white\", children: \"17%\" }),\n            \" of performers\"\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-48 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsx(\"svg\", { viewBox: \"0 0 200 110\", className: \"w-full h-full overflow-visible\", children: Array.from({ length: 14 }).map((_, i) => {\n            const angle = -180 + i * (180 / 13);\n            const isActive = i < 9;\n            return /* @__PURE__ */ jsx(\"g\", { transform: `rotate(${angle} 100 100)`, children: /* @__PURE__ */ jsx(\n              \"rect\",\n              {\n                x: \"93\",\n                y: \"10\",\n                width: \"14\",\n                height: \"28\",\n                rx: \"4\",\n                fill: isActive ? \"#6366F1\" : isDark ? \"#26262B\" : \"#E5E7EB\"\n              }\n            ) }, i);\n          }) }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute bottom-0 flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black tracking-tight\", children: \"67.2%\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-semibold text-neutral-400\", children: \"sales goals\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"grid grid-cols-2 gap-2 mt-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2.5 rounded-xl border flex flex-col justify-between ${isDark ? \"bg-white/5 border-white/5\" : \"bg-white border-neutral-200/80 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-semibold text-neutral-500\", children: \"Number of Sales\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"px-1.5 py-0.5 rounded-md bg-[#6366F1]/15 text-[#6366F1] text-[9px] font-bold\", children: \"3.5% \\u2197\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-xl font-black tracking-tight mt-1\", children: \"1,304\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2.5 rounded-xl border flex flex-col justify-between ${isDark ? \"bg-white/5 border-white/5\" : \"bg-white border-neutral-200/80 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-semibold text-neutral-500\", children: \"Total Revenue\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"px-1.5 py-0.5 rounded-md bg-neutral-900 text-white text-[9px] font-bold\", children: \"4.5% \\u2198\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-xl font-black tracking-tight mt-1\", children: \"$21.1K\" })\n          ] })\n        ] })\n      ] });\n    case \"users-growth-pill-progress\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n            /* @__PURE__ */ jsx(Star, { className: \"w-5 h-5 fill-white text-white\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-bold tracking-tight\", children: \"Users growth\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-7 h-7 rounded-full bg-neutral-700 overflow-hidden border border-white/20\", children: /* @__PURE__ */ jsx(\"img\", { src: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80\", alt: \"Avatar\", className: \"w-full h-full object-cover\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-1\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-bold text-[#818CF8]\", children: \"\\u2197\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-4xl font-black tracking-tight\", children: \"+88.3%\" }),\n          /* @__PURE__ */ jsxs(\"span\", { className: \"text-[10px] font-bold text-neutral-400 flex items-center gap-0.5\", children: [\n            \"+1.78% \",\n            /* @__PURE__ */ jsx(TrendingUp, { className: \"w-3 h-3\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-2 my-1\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-9 bg-[#1A1A1E] rounded-full flex items-center p-1\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-[45%] h-full bg-white text-black rounded-full flex items-center px-3 text-xs font-bold\", children: \"12.01\" }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-9 bg-[#1A1A1E] rounded-full flex items-center p-1\", children: /* @__PURE__ */ jsx(\"div\", { className: \"w-[78%] h-full bg-white text-black rounded-full flex items-center px-3 text-xs font-bold\", children: \"13.01\" }) }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-9 bg-gradient-to-r from-[#2E284A] to-[#A5B4FC] rounded-full flex items-center px-3 text-xs font-bold text-white shadow-md\", children: \"14.01\" })\n        ] })\n      ] });\n    case \"overview-bar-scrubber-card\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold tracking-tight\", children: \"Overview\" }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `px-3 py-1 rounded-xl text-xs font-semibold flex items-center gap-1 border cursor-pointer ${isDark ? \"bg-white/10 border-white/15 text-white\" : \"bg-white border-neutral-200 text-neutral-700 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Last Month\" }),\n            /* @__PURE__ */ jsx(ChevronDown, { className: \"w-3 h-3 text-neutral-400\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-0.5\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] text-neutral-400 font-semibold uppercase\", children: \"Avg Per month\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"text-2xl font-black tracking-tight\", children: [\n              \"1,860\",\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal text-base\", children: \"/3K\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"px-2 py-0.5 rounded-md bg-[#22C55E]/15 text-[#22C55E] text-[10px] font-bold flex items-center gap-0.5\", children: \"50,2% \\u25B2\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-28 my-1 flex items-end justify-between px-1\", children: [\n          { month: \"Apr\", h: \"45%\" },\n          { month: \"May\", h: \"30%\" },\n          { month: \"Jun\", h: \"75%\" },\n          { month: \"Jul\", h: \"50%\" },\n          { month: \"Aug\", h: \"85%\", active: true },\n          { month: \"Sep\", h: \"40%\" },\n          { month: \"Oct\", h: \"60%\" },\n          { month: \"Nov\", h: \"70%\" }\n        ].map((item, i) => /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col items-center gap-1 flex-1 relative\", children: [\n          item.active && /* @__PURE__ */ jsxs(\"div\", { className: \"absolute -top-11 z-20 flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"bg-[#1E1E22] text-white text-[10px] font-bold px-2.5 py-1 rounded-xl shadow-xl border border-white/10 text-center\", children: [\n              /* @__PURE__ */ jsx(\"div\", { children: \"August 2025\" }),\n              /* @__PURE__ */ jsx(\"div\", { className: \"text-neutral-300\", children: \"120 pcs\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[4px] border-t-[#1E1E22]\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\n            \"div\",\n            {\n              className: `w-7 rounded-2xl relative overflow-hidden flex items-start justify-center ${item.active ? \"bg-[#27272A] border-2 border-white/20 shadow-md\" : \"bg-neutral-200/60 dark:bg-neutral-800/40\"}`,\n              style: { height: item.h },\n              children: [\n                /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-20\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n                  /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: `stripe-${i}`, width: \"16\", height: \"16\", patternTransform: \"rotate(45 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"16\", stroke: \"#FFFFFF\", strokeWidth: \"8\" }) }) }),\n                  /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: `url(#stripe-${i})` })\n                ] }),\n                item.active && /* @__PURE__ */ jsx(\"div\", { className: \"w-2.5 h-2.5 rounded-full bg-white border-2 border-[#27272A] mt-1 z-10\" })\n              ]\n            }\n          ),\n          /* @__PURE__ */ jsx(\"span\", { className: `text-[9px] font-bold ${item.active ? \"text-black dark:text-white font-black\" : \"text-neutral-400\"}`, children: item.month })\n        ] }, i)) })\n      ] });\n    case \"network-telemetry-matrix\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-mono bg-[#0B0D0E] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-sans font-bold tracking-tight\", children: \"Network Telemetry\" }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2 text-neutral-500\", children: [\n            /* @__PURE__ */ jsx(Share2, { className: \"w-3.5 h-3.5 hover:text-white transition-colors cursor-pointer\" }),\n            /* @__PURE__ */ jsx(MoreHorizontal, { className: \"w-3.5 h-3.5 hover:text-white transition-colors cursor-pointer\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"grid grid-cols-2 gap-3 my-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[8px] font-bold text-neutral-500 uppercase tracking-widest\", children: \"Average Finality\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black font-sans\", children: \"1.8s\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-bold text-[#22C55E] flex items-center gap-0.5\", children: \"\\u2191 14.6%\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[8px] font-bold text-neutral-500 uppercase tracking-widest\", children: \"Intents Finalized\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-2xl font-black font-sans\", children: \"312,134\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-bold text-[#22C55E] flex items-center gap-0.5\", children: \"\\u2191 11.5%\" })\n            ] })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[8px] font-bold text-neutral-500 tracking-wider\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"AUGUST / TESTNET V0\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"12,430 INTENTS\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"grid grid-cols-16 gap-0.5 h-6\", children: Array.from({ length: 48 }).map((_, i) => /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: `w-full h-full rounded-[1px] ${[3, 7, 12, 18, 22, 29, 34, 41, 45].includes(i) ? \"bg-[#22C55E]\" : \"bg-[#142319]\"}`\n            },\n            i\n          )) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"space-y-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[8px] font-bold text-neutral-500 tracking-wider\", children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"SEPTEMBER / V1 SEQUENCER\" }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"18,916 INTENTS\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"grid grid-cols-16 gap-0.5 h-6\", children: Array.from({ length: 48 }).map((_, i) => /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: `w-full h-full rounded-[1px] ${[2, 6, 11, 15, 24, 31, 38, 43, 47].includes(i) ? \"bg-[#22C55E]\" : \"bg-[#142319]\"}`\n            },\n            i\n          )) })\n        ] })\n      ] });\n    case \"progress-indicator-piano\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-semibold text-neutral-300\", children: \"Progress Indicator\" }),\n          /* @__PURE__ */ jsx(MoreHorizontal, { className: \"w-4 h-4 text-neutral-500 cursor-pointer\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[11px] text-neutral-400 font-medium my-0.5\", children: \"You are on track to finish the goal three days early\" }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-px bg-white/10 my-1\" }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-1\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"66%\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"px-2 py-0.5 rounded-full bg-white/10 text-white text-[10px] font-bold border border-white/15 flex items-center gap-1\", children: /* @__PURE__ */ jsx(\"span\", { children: \"\\u2197 71 avg\" }) }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] text-neutral-500 font-medium\", children: \"vs. the last period\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center gap-1 h-12 w-full mt-2\", children: Array.from({ length: 28 }).map((_, i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: `flex-1 h-full rounded-xs transition-colors ${i < 18 ? \"bg-white shadow-[0_0_8px_rgba(255,255,255,0.4)]\" : \"bg-[#26262B]\"}`\n          },\n          i\n        )) })\n      ] });\n    case \"server-performance-step-bars\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#0E0E10] text-white rounded-[24px] border border-white/10\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-semibold text-neutral-400\", children: \"Server Performance Metrics\" }),\n          /* @__PURE__ */ jsx(ArrowUpRight, { className: \"w-4 h-4 text-neutral-400\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-4xl font-black tracking-tight my-1\", children: \"+45%\" }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-end justify-between gap-1.5 h-20 mt-2 px-1\", children: [15, 22, 30, 45, 58, 72, 90].map((h, i) => /* @__PURE__ */ jsx(\"div\", { className: \"flex-1 bg-[#222226] rounded-t-sm relative overflow-hidden flex flex-col justify-end\", style: { height: `${h}%` }, children: /* @__PURE__ */ jsx(\"div\", { className: \"w-full h-1 bg-white\" }) }, i)) })\n      ] });\n    case \"credit-score-barcode-meter\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-[#FAFAFA] text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-bold tracking-tight\", children: \"Credit Score\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[11px] text-neutral-400 font-medium\", children: \"Your current credit rating.\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `px-3 py-1 rounded-xl text-xs font-semibold flex items-center gap-1 border cursor-pointer ${isDark ? \"bg-white/10 border-white/15 text-white\" : \"bg-white border-neutral-200 text-neutral-700 shadow-xs\"}`, children: [\n            /* @__PURE__ */ jsx(\"span\", { children: \"Weekly\" }),\n            /* @__PURE__ */ jsx(ChevronDown, { className: \"w-3 h-3 text-neutral-400\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-2 my-1\", children: [\n          /* @__PURE__ */ jsxs(\"span\", { className: \"text-4xl font-black tracking-tight\", children: [\n            \"88\",\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-neutral-400 font-normal text-2xl\", children: \"/100\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[11px] font-bold text-[#22C55E]\", children: \"\\u25B2 13.6%\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[11px] text-neutral-400 font-medium\", children: \"vs last month\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-between gap-1 h-9 w-full mt-2\", children: Array.from({ length: 42 }).map((_, i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: `w-1 h-full rounded-full ${i < 36 ? \"bg-[#22C55E]\" : isDark ? \"bg-white/10\" : \"bg-neutral-200\"}`\n          },\n          i\n        )) })\n      ] });\n    case \"views-hourly-wave-chart\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] border transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border-white/10\" : \"bg-white text-neutral-900 border-neutral-200 shadow-sm\"}`, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-bold tracking-tight\", children: \"Views\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1.5 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-3xl font-black tracking-tight\", children: \"12.7K\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-bold text-[#22C55E]\", children: \"\\u2197 2.6%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] text-neutral-400 font-bold uppercase\", children: \"VS PREV. DAY\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-xl border ${isDark ? \"bg-white/5 border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"Day\", \"Week\", \"Month\"].map((p) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setViewsRange(p);\n              },\n              className: `px-2.5 py-1 text-[10px] font-bold rounded-lg transition-colors cursor-pointer border-0 ${viewsRange === p ? isDark ? \"bg-white text-black\" : \"bg-white text-black shadow-xs\" : \"text-neutral-400 hover:text-white\"}`,\n              children: p\n            },\n            p\n          )) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-20 my-1\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 40\", children: [\n          /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"20\", x2: \"100\", y2: \"20\", stroke: \"#F59E0B\", strokeWidth: \"1\", strokeDasharray: \"3 3\" }),\n          /* @__PURE__ */ jsx(\"text\", { x: \"92\", y: \"18\", fill: \"#F59E0B\", fontSize: \"4\", fontWeight: \"bold\", children: \"AVG\" }),\n          /* @__PURE__ */ jsx(\"path\", { d: \"M0,25 Q15,30 25,12 T50,15 T75,18 T100,28 L100,40 L0,40 Z\", fill: \"url(#blue-wave-grad)\", opacity: \"0.25\" }),\n          /* @__PURE__ */ jsx(\n            motion.path,\n            {\n              d: \"M0,25 Q15,30 25,12 T50,15 T75,18 T100,28\",\n              fill: \"none\",\n              stroke: \"#3B82F6\",\n              strokeWidth: \"2.5\",\n              strokeLinecap: \"round\",\n              initial: { pathLength: 0 },\n              animate: { pathLength: 1 },\n              transition: { duration: 0.8 }\n            }\n          ),\n          /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsxs(\"linearGradient\", { id: \"blue-wave-grad\", x1: \"0\", y1: \"0\", x2: \"0\", y2: \"1\", children: [\n            /* @__PURE__ */ jsx(\"stop\", { offset: \"0%\", stopColor: \"#3B82F6\", stopOpacity: \"0.6\" }),\n            /* @__PURE__ */ jsx(\"stop\", { offset: \"100%\", stopColor: \"#3B82F6\", stopOpacity: \"0.0\" })\n          ] }) })\n        ] }) }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[9px] font-bold text-neutral-400 uppercase px-1\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"12 AM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"4 AM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"8 AM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"12 PM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"4 PM\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"8 PM\" })\n        ] })\n      ] });\n    case \"timer-preparation-segmented\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col justify-between select-none font-sans bg-[#12141A] text-white rounded-[24px]\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-4xl font-black tracking-tight leading-none font-sans\", children: \"25:04\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-xs font-semibold text-neutral-400 mt-1\", children: \"Left for preparation\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"w-8 h-8 rounded-full bg-[#1A3660] text-[#3B82F6] flex items-center justify-center border border-[#2563EB]/30\", children: /* @__PURE__ */ jsx(Check, { className: \"w-4 h-4 stroke-[3]\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative pt-6\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute top-0 right-3 transform -translate-y-full flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"bg-[#2563EB] text-white text-[11px] font-bold px-3 py-1 rounded-full shadow-lg flex items-center gap-1\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-3.5 h-3.5 rounded-full bg-white text-[#2563EB] text-[9px] font-black flex items-center justify-center\", children: \"1\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"Preparation\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"w-0 h-0 border-l-[5px] border-l-transparent border-r-[5px] border-r-transparent border-t-[5px] border-t-[#2563EB]\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full h-11 bg-[#1A2333] rounded-xl p-1 flex items-center justify-between gap-1 overflow-hidden\", children: [\n            [1, 2, 3].map((seg) => /* @__PURE__ */ jsx(\"div\", { className: \"flex-1 h-full bg-[#121B2B] rounded-lg\" }, seg)),\n            /* @__PURE__ */ jsx(\"div\", { className: \"relative flex-1 h-full bg-[#2563EB] rounded-lg overflow-hidden flex items-center justify-center\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-30\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n              /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: \"stripes\", width: \"20\", height: \"20\", patternTransform: \"rotate(45 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"20\", stroke: \"#FFFFFF\", strokeWidth: \"10\" }) }) }),\n              /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: \"url(#stripes)\" })\n            ] }) }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-0 bottom-0 right-10 w-0.5 bg-white shadow-[0_0_8px_rgba(255,255,255,0.8)] z-10\" })\n          ] })\n        ] })\n      ] });\n    case \"noise-decibel-level\":\n      return /* @__PURE__ */ jsxs(\n        \"div\",\n        {\n          onClick: (e) => {\n            e.stopPropagation();\n            triggerHaptic(\"light\");\n            setDecibelLevel(decibelLevel === 40 ? 60 : 40);\n          },\n          className: `w-full h-full p-4 flex flex-col justify-between select-none font-sans rounded-[24px] cursor-pointer transition-colors duration-300 ${isDark ? \"bg-[#18181A] text-white border border-white/10\" : \"bg-[#EAEBED] text-neutral-900\"}`,\n          children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-semibold text-neutral-400\", children: \"Current noise level\" }),\n              /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-end gap-1 h-4\", children: [\n                /* @__PURE__ */ jsx(\"div\", { className: `w-1 rounded-full ${decibelLevel === 40 ? \"h-2 bg-[#22C55E]\" : \"h-2 bg-[#EAB308]\"}` }),\n                /* @__PURE__ */ jsx(\"div\", { className: `w-1 rounded-full ${decibelLevel === 40 ? \"h-3 bg-[#22C55E]\" : \"h-3 bg-[#EAB308]\"}` }),\n                /* @__PURE__ */ jsx(\"div\", { className: `w-1 rounded-full ${decibelLevel === 40 ? \"h-4 bg-[#22C55E]\" : \"h-4 bg-[#EAB308]\"}` })\n              ] })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-baseline gap-1 my-1\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-5xl font-black tracking-tight leading-none font-sans\", children: decibelLevel }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-base font-bold text-neutral-400\", children: \"dB\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[11px] font-semibold text-neutral-400 px-0.5 mb-1\", children: [\n              /* @__PURE__ */ jsx(\"span\", { children: \"Low\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"High\" })\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-2\", children: [\n              /* @__PURE__ */ jsxs(\"div\", { className: `relative flex-1 h-12 rounded-2xl flex items-center justify-start px-4 overflow-hidden ${decibelLevel === 40 ? \"bg-[#22C55E] text-white shadow-md\" : \"bg-[#EAB308] text-white shadow-md\"}`, children: [\n                /* @__PURE__ */ jsxs(\"svg\", { className: \"absolute inset-0 w-full h-full opacity-25\", viewBox: \"0 0 100 100\", preserveAspectRatio: \"none\", children: [\n                  /* @__PURE__ */ jsx(\"defs\", { children: /* @__PURE__ */ jsx(\"pattern\", { id: \"db-stripes\", width: \"16\", height: \"16\", patternTransform: \"rotate(45 0 0)\", patternUnits: \"userSpaceOnUse\", children: /* @__PURE__ */ jsx(\"line\", { x1: \"0\", y1: \"0\", x2: \"0\", y2: \"16\", stroke: \"#FFFFFF\", strokeWidth: \"8\" }) }) }),\n                  /* @__PURE__ */ jsx(\"rect\", { width: \"100%\", height: \"100%\", fill: \"url(#db-stripes)\" })\n                ] }),\n                /* @__PURE__ */ jsx(\"span\", { className: \"relative z-10 text-base font-black font-sans\", children: decibelLevel })\n              ] }),\n              /* @__PURE__ */ jsx(\"div\", { className: \"w-1 h-8 bg-neutral-400/40 rounded-full\" }),\n              /* @__PURE__ */ jsx(\"div\", { className: `flex-1 h-12 rounded-2xl flex items-center justify-end px-4 font-black text-base font-sans ${isDark ? \"bg-white/10 text-neutral-400\" : \"bg-neutral-300/80 text-neutral-500\"}`, children: \"120\" })\n            ] })\n          ]\n        }\n      );\n    // --- MONOCHROMATIC COMPONENTS ---\n    case \"mono-stock\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-start justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1.5 font-bold text-[10px] tracking-wider uppercase opacity-60\", children: [\n              /* @__PURE__ */ jsx(\"span\", { children: \"AAPL\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"w-1.5 h-1.5 rounded-full bg-white animate-pulse\" })\n            ] }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-2xl font-black tracking-tight mt-0.5\", children: \"$182.40\" }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1 text-[10px] font-bold opacity-80 mt-0.5\", children: [\n              /* @__PURE__ */ jsx(TrendingUp, { className: \"w-3 h-3\" }),\n              /* @__PURE__ */ jsx(\"span\", { children: \"+$4.15 (+2.33%)\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `flex items-center p-0.5 rounded-full border ${isDark ? \"bg-neutral-900 border-white/10\" : \"bg-neutral-100 border-black/10\"}`, children: [\"1D\", \"1W\", \"1M\", \"1Y\"].map((r) => /* @__PURE__ */ jsx(\n            \"button\",\n            {\n              onClick: (e) => {\n                e.stopPropagation();\n                triggerHaptic(\"light\");\n                setStockRange(r);\n              },\n              className: `px-2 py-0.5 text-[9px] font-bold rounded-full transition-colors cursor-pointer border-0 ${stockRange === r ? isDark ? \"bg-white text-black\" : \"bg-black text-white\" : isDark ? \"text-neutral-400 hover:text-white\" : \"text-neutral-600 hover:text-black\"}`,\n              children: r\n            },\n            r\n          )) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-16 mt-2\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 40\", children: [\n          /* @__PURE__ */ jsx(\"path\", { d: \"M0,30 Q15,10 30,25 T60,15 T90,5 L100,2 L100,40 L0,40 Z\", fill: isDark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.04)\" }),\n          /* @__PURE__ */ jsx(\n            motion.path,\n            {\n              d: \"M0,30 Q15,10 30,25 T60,15 T90,5 L100,2\",\n              fill: \"none\",\n              stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n              strokeWidth: \"2.5\",\n              strokeLinecap: \"round\",\n              initial: { pathLength: 0 },\n              animate: { pathLength: 1 },\n              transition: { duration: 0.8 }\n            }\n          ),\n          /* @__PURE__ */ jsx(\"circle\", { cx: \"100\", cy: \"2\", r: \"3\", fill: isDark ? \"#FFFFFF\" : \"#000000\" })\n        ] }) })\n      ] });\n    case \"mono-revenue\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] font-bold opacity-50 uppercase tracking-wider\", children: \"Revenue Stream\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-2xl font-black mt-0.5\", children: \"$94,820.00\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: `p-2 rounded-xl border ${isDark ? \"bg-white/5 border-white/10 text-white\" : \"bg-black/5 border-black/10 text-black\"}`, children: /* @__PURE__ */ jsx(Zap, { className: \"w-4 h-4\" }) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"relative w-full h-16 mt-2\", children: /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 40\", children: [\n          /* @__PURE__ */ jsx(\"path\", { d: \"M0,35 Q20,10 40,20 T80,5 L100,12 L100,40 L0,40 Z\", fill: isDark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.04)\" }),\n          /* @__PURE__ */ jsx(\n            motion.path,\n            {\n              d: \"M0,35 Q20,10 40,20 T80,5 L100,12\",\n              fill: \"none\",\n              stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n              strokeWidth: \"2.5\",\n              strokeLinecap: \"round\",\n              initial: { pathLength: 0 },\n              animate: { pathLength: 1 },\n              transition: { duration: 0.8 }\n            }\n          )\n        ] }) })\n      ] });\n    case \"mono-credit\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col items-center justify-center text-center select-none font-sans\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mb-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { className: \"w-full h-full transform -rotate-90\", viewBox: \"0 0 36 36\", children: [\n            /* @__PURE__ */ jsx(\"path\", { className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"3.5\", stroke: \"currentColor\", fill: \"none\", d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" }),\n            /* @__PURE__ */ jsx(\n              motion.path,\n              {\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"3.5\",\n                strokeDasharray: \"78, 100\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\",\n                initial: { strokeDasharray: \"0, 100\" },\n                animate: { strokeDasharray: \"78, 100\" },\n                transition: { duration: 0.8 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xl font-black ${isDark ? \"text-white\" : \"text-black\"}`, children: \"785\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"Score\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"span\", { className: `text-[9px] font-bold px-2 py-0.5 rounded-full border ${isDark ? \"bg-white/10 text-white border-white/20\" : \"bg-black/10 text-black border-black/20\"}`, children: \"Excellent Tier\" })\n      ] });\n    case \"mono-wallet\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Wallet Balance\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"$24,500.00\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"grid grid-cols-2 gap-2 my-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2 rounded-xl border ${isDark ? \"bg-white/[0.03] border-white/10\" : \"bg-black/[0.03] border-black/10\"}`, children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[9px] font-medium opacity-50\", children: \"Inflow\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-black\", children: \"+$8,240\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: `p-2 rounded-xl border ${isDark ? \"bg-white/[0.03] border-white/10\" : \"bg-black/[0.03] border-black/10\"}`, children: [\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-[9px] font-medium opacity-50\", children: \"Outflow\" }),\n            /* @__PURE__ */ jsx(\"div\", { className: \"text-base font-black\", children: \"-$2,150\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-60\", children: \"Auto-save enabled \\xB7 4 cards linked\" })\n      ] });\n    case \"mono-savings\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Savings Goal\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"$12,400\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"my-2\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-60\", children: \"Target: New House ($15,000)\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: `w-full h-2 rounded-full mt-1.5 overflow-hidden ${isDark ? \"bg-neutral-800\" : \"bg-neutral-200\"}`, children: /* @__PURE__ */ jsx(motion.div, { initial: { width: 0 }, animate: { width: \"82%\" }, transition: { duration: 0.7 }, className: `h-full rounded-full ${isDark ? \"bg-white\" : \"bg-black\"}` }) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] font-medium opacity-60\", children: \"+ $800 auto-deposit / mo\" })\n      ] });\n    case \"mono-heatmap\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Activity Heatmap\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-[10px] font-mono font-bold\", children: \"342 Commits\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"grid grid-cols-7 gap-1 my-1\", children: Array.from({ length: 28 }).map((_, i) => /* @__PURE__ */ jsx(\n          \"div\",\n          {\n            className: `w-full aspect-square rounded-xs ${i % 5 === 0 ? isDark ? \"bg-white\" : \"bg-black\" : i % 3 === 0 ? isDark ? \"bg-neutral-500\" : \"bg-neutral-400\" : isDark ? \"bg-neutral-800\" : \"bg-neutral-200\"}`\n          },\n          i\n        )) }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-50\", children: \"High Activity Matrix\" })\n      ] });\n    case \"mono-activity-ring\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Activity Rings\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"3 Goals Hit\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"42\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(motion.circle, { cx: \"50\", cy: \"50\", r: \"42\", className: isDark ? \"text-white\" : \"text-black\", strokeWidth: \"4\", strokeLinecap: \"round\", stroke: \"currentColor\", fill: \"none\", strokeDasharray: \"263.8\", strokeDashoffset: \"52.7\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"32\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(motion.circle, { cx: \"50\", cy: \"50\", r: \"32\", className: isDark ? \"text-neutral-400\" : \"text-neutral-600\", strokeWidth: \"4\", strokeLinecap: \"round\", stroke: \"currentColor\", fill: \"none\", strokeDasharray: \"201\", strokeDashoffset: \"40.2\" })\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"22\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(motion.circle, { cx: \"50\", cy: \"50\", r: \"22\", className: isDark ? \"text-neutral-600\" : \"text-neutral-400\", strokeWidth: \"4\", strokeLinecap: \"round\", stroke: \"currentColor\", fill: \"none\", strokeDasharray: \"138.2\", strokeDashoffset: \"27.6\" })\n          ] }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-black\", children: \"88%\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-around text-[10px] font-semibold opacity-70\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Move\" }),\n          \" \\xB7 \",\n          /* @__PURE__ */ jsx(\"span\", { children: \"Exercise\" }),\n          \" \\xB7 \",\n          /* @__PURE__ */ jsx(\"span\", { children: \"Stand\" })\n        ] })\n      ] });\n    case \"mono-users\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Active Users (MAU)\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"+12.4%\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-3xl font-black\", children: \"48.2k\" }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-1 text-[10px] opacity-70\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: `px-1.5 py-0.5 rounded font-semibold ${isDark ? \"bg-white/10 text-white\" : \"bg-black/10 text-black\"}`, children: \"US 54%\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: `px-1.5 py-0.5 rounded font-semibold ${isDark ? \"bg-white/10 text-white\" : \"bg-black/10 text-black\"}`, children: \"EU 32%\" })\n        ] })\n      ] });\n    case \"mono-kfactor\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Viral K-Factor Arc\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"K = 1.42\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"18\", cy: \"18\", r: \"14\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"3.5\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"18\",\n                cy: \"18\",\n                r: \"14\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"3.5\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"88\",\n                strokeDashoffset: \"26\",\n                initial: { strokeDashoffset: 88 },\n                animate: { strokeDashoffset: 26 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-lg font-black\", children: \"1.42x\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"Growth\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] text-center opacity-60\", children: \"Exponential referral multiplier\" })\n      ] });\n    case \"mono-latency\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Latency P99\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-mono font-bold\", children: \"1.8ms\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"my-1\", children: [\n          /* @__PURE__ */ jsx(\"div\", { className: \"text-2xl font-black\", children: \"1.8s Avg\" }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-50\", children: \"P99: 3.6s \\xB7 P95: 0.4s\" })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"h-10 w-full mt-1\", children: /* @__PURE__ */ jsx(\"svg\", { className: \"w-full h-full overflow-visible\", preserveAspectRatio: \"none\", viewBox: \"0 0 100 30\", children: /* @__PURE__ */ jsx(\"path\", { d: \"M0,20 L20,25 L40,15 L60,25 L80,10 L100,5\", fill: \"none\", stroke: isDark ? \"#FFFFFF\" : \"#000000\", strokeWidth: \"2.5\", strokeLinecap: \"round\" }) }) })\n      ] });\n    case \"mono-bandwidth\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Bandwidth Speed Dial\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-mono font-bold\", children: \"1.2 Gbps\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full h-16 flex items-center justify-center my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 50\", className: \"w-full h-full overflow-visible\", children: [\n            /* @__PURE__ */ jsx(\"path\", { d: \"M 10 50 A 40 40 0 0 1 90 50\", fill: \"none\", stroke: isDark ? \"#262626\" : \"#E5E5E5\", strokeWidth: \"8\", strokeLinecap: \"round\" }),\n            /* @__PURE__ */ jsx(\n              motion.path,\n              {\n                d: \"M 10 50 A 40 40 0 0 1 90 50\",\n                fill: \"none\",\n                stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n                strokeWidth: \"8\",\n                strokeLinecap: \"round\",\n                strokeDasharray: \"125.6\",\n                strokeDashoffset: \"25\",\n                initial: { strokeDashoffset: 125.6 },\n                animate: { strokeDashoffset: 25 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute bottom-1 flex flex-col items-center\", children: /* @__PURE__ */ jsx(\"span\", { className: \"text-lg font-black\", children: \"840 Mbps\" }) })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-between text-[10px] font-mono opacity-60\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Latency: 1.2ms\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"Packet Loss: 0%\" })\n        ] })\n      ] });\n    case \"mono-server\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Dual Arc Server Gauge\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"Normal\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-around my-1\", children: [\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-20 h-20 flex items-center justify-center\", children: [\n            /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n              /* @__PURE__ */ jsx(\"path\", { className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\", d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" }),\n              /* @__PURE__ */ jsx(\n                motion.path,\n                {\n                  className: isDark ? \"text-white\" : \"text-black\",\n                  strokeWidth: \"4\",\n                  strokeDasharray: \"32, 100\",\n                  strokeLinecap: \"round\",\n                  stroke: \"currentColor\",\n                  fill: \"none\",\n                  d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\",\n                  initial: { strokeDasharray: \"0, 100\" },\n                  animate: { strokeDasharray: \"32, 100\" },\n                  transition: { duration: 0.8 }\n                }\n              )\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-black\", children: \"32%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"CPU\" })\n            ] })\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-20 h-20 flex items-center justify-center\", children: [\n            /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n              /* @__PURE__ */ jsx(\"path\", { className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"4\", stroke: \"currentColor\", fill: \"none\", d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" }),\n              /* @__PURE__ */ jsx(\n                motion.path,\n                {\n                  className: isDark ? \"text-neutral-400\" : \"text-neutral-600\",\n                  strokeWidth: \"4\",\n                  strokeDasharray: \"64, 100\",\n                  strokeLinecap: \"round\",\n                  stroke: \"currentColor\",\n                  fill: \"none\",\n                  d: \"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\",\n                  initial: { strokeDasharray: \"0, 100\" },\n                  animate: { strokeDasharray: \"64, 100\" },\n                  transition: { duration: 0.8, delay: 0.1 }\n                }\n              )\n            ] }),\n            /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-sm font-black\", children: \"64%\" }),\n              /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-bold opacity-60 uppercase\", children: \"RAM\" })\n            ] })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex justify-around text-[10px] font-mono opacity-60\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Nodes: 8 Active\" }),\n          /* @__PURE__ */ jsx(\"span\", { children: \"Heap: 4.2 GB\" })\n        ] })\n      ] });\n    case \"mono-progress\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Circular Build Ring\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"Building...\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-24 h-24 flex items-center justify-center mx-auto my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 36 36\", className: \"w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"18\", cy: \"18\", r: \"14\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"3\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"18\",\n                cy: \"18\",\n                r: \"14\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"3\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"88\",\n                strokeDashoffset: \"22\",\n                initial: { strokeDashoffset: 88 },\n                animate: { strokeDashoffset: 22 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-xl font-black\", children: \"75%\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[8px] font-semibold opacity-60\", children: \"Stage 3/4\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] text-center opacity-60\", children: \"Compiling bundle chunks...\" })\n      ] });\n    case \"mono-radar\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: containerClasses, children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Incident Radar Arc\" }),\n          /* @__PURE__ */ jsxs(\"span\", { className: \"text-xs font-bold flex items-center gap-1\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `w-2 h-2 rounded-full animate-ping ${isDark ? \"bg-white\" : \"bg-black\"}` }),\n            /* @__PURE__ */ jsx(\"span\", { children: \"Scanning\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-full h-16 flex items-center justify-center my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 50\", className: \"w-full h-full overflow-visible\", children: [\n            /* @__PURE__ */ jsx(\"path\", { d: \"M 10 50 A 40 40 0 0 1 90 50\", fill: \"none\", stroke: isDark ? \"#262626\" : \"#E5E5E5\", strokeWidth: \"6\", strokeLinecap: \"round\" }),\n            /* @__PURE__ */ jsx(\n              motion.path,\n              {\n                d: \"M 10 50 A 40 40 0 0 1 90 50\",\n                fill: \"none\",\n                stroke: isDark ? \"#FFFFFF\" : \"#000000\",\n                strokeWidth: \"6\",\n                strokeLinecap: \"round\",\n                strokeDasharray: \"125.6\",\n                strokeDashoffset: \"0\",\n                initial: { strokeDashoffset: 125.6 },\n                animate: { strokeDashoffset: 0 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsx(\"div\", { className: \"absolute bottom-1 flex flex-col items-center\", children: /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-black\", children: \"Zero Criticals\" }) })\n        ] }),\n        /* @__PURE__ */ jsx(\"div\", { className: \"text-[10px] opacity-60 text-center\", children: \"Monitored 24/7 \\xB7 0 Open Alerts\" })\n      ] });\n    case \"mono-timer-arc\":\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col items-center justify-between select-none font-sans\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between w-full\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Focus Arc Gauge\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-mono font-bold\", children: \"25:00\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-28 h-28 flex items-center justify-center my-1\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"40\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"8\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"50\",\n                cy: \"50\",\n                r: \"40\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"8\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"251.2\",\n                strokeDashoffset: \"62.8\",\n                initial: { strokeDashoffset: 62.8 },\n                animate: { strokeDashoffset: 62.8 },\n                transition: { duration: 1.2 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"absolute flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-xl font-black ${isDark ? \"text-white\" : \"text-black\"}`, children: \"18:42\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-semibold opacity-60 uppercase tracking-widest\", children: \"Remaining\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsx(\n          \"button\",\n          {\n            onClick: (e) => {\n              e.stopPropagation();\n              triggerHaptic(\"medium\");\n              setTimerActive(!timerActive);\n            },\n            className: `px-4 py-1 text-xs font-bold rounded-full border-0 cursor-pointer ${isDark ? \"bg-white text-black\" : \"bg-black text-white\"}`,\n            children: timerActive ? \"Pause\" : \"Start Focus\"\n          }\n        )\n      ] });\n    case \"mono-timer-ring\":\n    default:\n      return /* @__PURE__ */ jsxs(\"div\", { className: \"w-full h-full p-4 flex flex-col items-center justify-between select-none font-sans\", children: [\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center justify-between w-full\", children: [\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold opacity-60\", children: \"Concentric Ring Timer\" }),\n          /* @__PURE__ */ jsx(\"span\", { className: \"text-xs font-bold\", children: \"Deep Work\" })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"relative w-28 h-28 flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"42\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"5\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"50\",\n                cy: \"50\",\n                r: \"42\",\n                className: isDark ? \"text-white\" : \"text-black\",\n                strokeWidth: \"5\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"263.8\",\n                strokeDashoffset: \"65.9\",\n                initial: { strokeDashoffset: 263.8 },\n                animate: { strokeDashoffset: 65.9 },\n                transition: { duration: 1 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"svg\", { viewBox: \"0 0 100 100\", className: \"absolute inset-0 w-full h-full transform -rotate-90\", children: [\n            /* @__PURE__ */ jsx(\"circle\", { cx: \"50\", cy: \"50\", r: \"32\", className: isDark ? \"text-neutral-800\" : \"text-neutral-200\", strokeWidth: \"5\", stroke: \"currentColor\", fill: \"none\" }),\n            /* @__PURE__ */ jsx(\n              motion.circle,\n              {\n                cx: \"50\",\n                cy: \"50\",\n                r: \"32\",\n                className: isDark ? \"text-neutral-400\" : \"text-neutral-600\",\n                strokeWidth: \"5\",\n                strokeLinecap: \"round\",\n                stroke: \"currentColor\",\n                fill: \"none\",\n                strokeDasharray: \"201\",\n                strokeDashoffset: \"40.2\",\n                initial: { strokeDashoffset: 201 },\n                animate: { strokeDashoffset: 40.2 },\n                transition: { duration: 1, delay: 0.2 }\n              }\n            )\n          ] }),\n          /* @__PURE__ */ jsxs(\"div\", { className: \"flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx(\"span\", { className: `text-lg font-black ${isDark ? \"text-white\" : \"text-black\"}`, children: \"75%\" }),\n            /* @__PURE__ */ jsx(\"span\", { className: \"text-[9px] font-bold opacity-60\", children: \"Goal\" })\n          ] })\n        ] }),\n        /* @__PURE__ */ jsxs(\"div\", { className: \"flex items-center gap-3 text-[10px] font-semibold opacity-70\", children: [\n          /* @__PURE__ */ jsx(\"span\", { children: \"Focus 45m\" }),\n          \" \\xB7 \",\n          /* @__PURE__ */ jsx(\"span\", { children: \"Break 15m\" })\n        ] })\n      ] });\n  }\n};\n\n// cacheable-bandwidth-cost.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsx2(AnimatedMetricCard, { theme, config: { \"id\": \"m-cache-bandwidth\", \"label\": \"Cacheable Bandwidth Usage & Cost Card\", \"interactionType\": \"cacheable-bandwidth-cost\", \"description\": \"CDN cacheable bandwidth breakdown card with cached vs non-cacheable segments and monthly cost.\", \"cliCommand\": \"npx @mova-ui/react add cacheable-bandwidth-cost\", \"category\": \"Infrastructure\" } });\n}\nexport {\n  MovaComponent as default\n};\n"
+}

package/registry/card-arc-5.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-arc-5",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-arc-5.tsx",
+  "registryFile": "card-arc-5.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-arc-5';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardArc5Props {\n  angle?: number;\n  gap?: number;\n  yOffset?: number;\n  duration?: number;\n  hoverIntensity?: number;\n  cardClassName?: string;\n  className?: string;\n}\n\nexport default function CardArc5({\n  angle = 30,\n  gap = 70,\n  yOffset = 10,\n  duration = 0.5,\n  hoverIntensity = 1,\n  cardClassName = 'bg-neutral-800',\n  className = ''\n}: CardArc5Props) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4];\n  const center = 2;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const dist = i - center;\n        const targetRotate = isHovered ? dist * (angle / center) * hoverIntensity : 0;\n        const targetX = isHovered ? dist * (gap / center) * hoverIntensity : 0;\n        \n        let targetY = 0;\n        if (isHovered) {\n          if (Math.abs(dist) === 2) targetY = yOffset;\n          else if (Math.abs(dist) === 1) targetY = -0.2 * yOffset;\n          else targetY = -yOffset;\n          targetY = targetY * hoverIntensity;\n        }\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              rotate: targetRotate,\n              x: targetX,\n              y: targetY,\n              scale: isHovered ? (dist === 0 ? 1.05 : 1) : 1\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 180,\n              damping: 20,\n              mass: 0.8,\n              duration\n            }}\n            style={{\n              zIndex: 3 - Math.abs(dist),\n              originX: 0.5,\n              originY: 1\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-arc-7.json

@@ -0,0 +1,18 @@
+{
+  "id": "card-arc-7",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-arc-7.tsx",
+  "registryFile": "card-arc-7.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-arc-7';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\ninterface CardArc7Props {\n  angle?: number;\n  gap?: number;\n  yOffset?: number;\n  duration?: number;\n  hoverIntensity?: number;\n  cardClassName?: string;\n  className?: string;\n}\n\nexport default function CardArc7({\n  angle = 45,\n  gap = 110,\n  yOffset = 30,\n  duration = 0.5,\n  hoverIntensity = 1,\n  cardClassName = 'bg-neutral-800',\n  className = ''\n}: CardArc7Props) {\n  const [isHovered, setIsHovered] = useState(false);\n  const cards = [0, 1, 2, 3, 4, 5, 6];\n  const center = 3;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-[8rem] h-[11rem] cursor-pointer flex items-center justify-center ${className}`}\n    >\n      {cards.map((i) => {\n        const dist = i - center;\n        const targetRotate = isHovered ? dist * (angle / center) * hoverIntensity : 0;\n        const targetX = isHovered ? dist * (gap / center) * hoverIntensity : 0;\n        \n        let targetY = 0;\n        if (isHovered) {\n          if (Math.abs(dist) === 3) targetY = yOffset;\n          else if (Math.abs(dist) === 2) targetY = 0.33 * yOffset;\n          else if (Math.abs(dist) === 1) targetY = -0.17 * yOffset;\n          else targetY = -0.5 * yOffset;\n          targetY = targetY * hoverIntensity;\n        }\n\n        return (\n          <motion.div\n            key={i}\n            animate={{\n              rotate: targetRotate,\n              x: targetX,\n              y: targetY,\n              scale: isHovered ? (dist === 0 ? 1.05 : 1) : 1\n            }}\n            transition={{\n              type: \"spring\",\n              stiffness: 180,\n              damping: 20,\n              mass: 0.8,\n              duration\n            }}\n            style={{\n              zIndex: 4 - Math.abs(dist),\n              originX: 0.5,\n              originY: 1\n            }}\n            className={`absolute inset-0 rounded-2xl shadow-[0_4px_10px_-2px_rgba(0,0,0,0.15)] border border-white/5 ${cardClassName}`}\n          />\n        );\n      })}\n    </div>\n  );\n}"
+}

package/registry/card-carousel-mono.json

@@ -0,0 +1,19 @@
+{
+  "id": "card-carousel-mono",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-carousel-mono.tsx",
+  "registryFile": "card-carousel-mono.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-carousel-mono';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst DEFAULT_ASSETS = [\n  {\n    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunset Beach',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',\n    title: 'Misty Mountains',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',\n    title: 'Forest Trail',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunlight Woods',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',\n    title: 'Green Hills',\n  },\n];\n\ninterface CardCarouselProps {\n  className?: string;\n  images?: { src: string; title: string }[];\n  isMonochrome?: boolean;\n}\n\nexport default function CardCarousel({\n  className = '',\n  images = DEFAULT_ASSETS,\n  isMonochrome = true\n}: CardCarouselProps) {\n  const [activeIndex, setActiveIndex] = useState(2);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const toPrev = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.max(0, prev - 1));\n  };\n\n  const toNext = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));\n  };\n\n  const toSlide = (e: React.MouseEvent, index: number) => {\n    e.stopPropagation();\n    setActiveIndex(index);\n  };\n\n  const slideWidth = 160;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none ${className}`}\n    >\n      <div \n        className=\"relative h-[180px] flex items-center justify-start overflow-visible\"\n        style={{ width: `${slideWidth}px` }}\n      >\n        <motion.div \n          className=\"flex w-fit items-center\"\n          animate={{ x: -activeIndex * slideWidth }}\n          transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}\n        >\n          {images.map((item, i) => {\n            const isActive = activeIndex === i;\n            const diff = i - activeIndex;\n\n            const targetRotate = isHovered ? diff * 20 : diff * 5;\n            const targetScale = isActive ? 1.05 : (isHovered ? 0.65 : 0.8);\n            const targetY = isHovered ? diff * 24 : 0;\n\n            return (\n              <motion.div \n                key={i}\n                className=\"shrink-0 flex flex-col items-center gap-1.5 will-change-[transform,scale]\"\n                style={{ width: `${slideWidth}px` }}\n                animate={{ \n                  rotate: targetRotate, \n                  scale: targetScale, \n                  y: targetY \n                }}\n                transition={{ type: 'spring', bounce: 0.2, duration: 0.8 }}\n              >\n                <div \n                  className={`text-[10px] md:text-xs font-semibold whitespace-nowrap transition-all duration-300 ${isActive ? 'opacity-100 scale-100 text-white' : 'opacity-0 scale-75 text-neutral-400'}`} \n                >\n                  {isMonochrome ? `Card ${i + 1}` : item.title}\n                </div>\n\n                {isMonochrome ? (\n                  <div \n                    onClick={(e) => toSlide(e, i)}\n                    className=\"w-[110px] h-[110px] rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-lg flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm cursor-pointer\"\n                  >\n                    {i + 1}\n                  </div>\n                ) : (\n                  <img \n                    src={item.src} \n                    alt={item.title} \n                    referrerPolicy=\"no-referrer\"\n                    className=\"w-[110px] h-[110px] object-cover rounded-xl shadow-lg border border-white/10 cursor-pointer\" \n                    onClick={(e) => toSlide(e, i)} \n                  />\n                )}\n              </motion.div>\n            )\n          })}\n        </motion.div>\n      </div>\n\n      <div className=\"mt-4 px-1.5 py-0.5 flex items-center gap-2 justify-center text-neutral-400 rounded-full bg-neutral-900/60 backdrop-blur-md border border-white/5 shadow-md z-20\">\n        <button onClick={toPrev} className=\"p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white\">\n          <ChevronLeft className=\"w-3.5 h-3.5\" />\n        </button>\n        <div className=\"flex justify-center items-center gap-1\">\n          {images.map((_, i) => (\n            <div \n              key={i} \n              onClick={(e) => toSlide(e, i)}\n              className={`rounded-full cursor-pointer h-1 transition-all duration-300 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>\n            </div>\n          ))}\n        </div>\n        <button onClick={toNext} className=\"p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white\">\n          <ChevronRight className=\"w-3.5 h-3.5\" />\n        </button>\n      </div>\n    </div>\n  );\n}"
+}

package/registry/card-carousel.json

@@ -0,0 +1,19 @@
+{
+  "id": "card-carousel",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "card-carousel.tsx",
+  "registryFile": "card-carousel.json",
+  "exports": [
+    "default"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "usage": "import MovaComponent from './card-carousel';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "css": "",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst DEFAULT_ASSETS = [\n  {\n    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunset Beach',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',\n    title: 'Misty Mountains',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',\n    title: 'Forest Trail',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',\n    title: 'Sunlight Woods',\n  },\n  {\n    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',\n    title: 'Green Hills',\n  },\n];\n\ninterface CardCarouselProps {\n  className?: string;\n  images?: { src: string; title: string }[];\n}\n\nexport default function CardCarousel({\n  className = '',\n  images = DEFAULT_ASSETS\n}: CardCarouselProps) {\n  const [activeIndex, setActiveIndex] = useState(2);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const toPrev = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.max(0, prev - 1));\n  };\n\n  const toNext = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));\n  };\n\n  const toSlide = (e: React.MouseEvent, index: number) => {\n    e.stopPropagation();\n    setActiveIndex(index);\n  };\n\n  const slideWidth = 160;\n\n  return (\n    <div \n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none ${className}`}\n    >\n      <div \n        className=\"relative h-[180px] flex items-center justify-start overflow-visible\"\n        style={{ width: `${slideWidth}px` }}\n      >\n        <motion.div \n          className=\"flex w-fit items-center\"\n          animate={{ x: -activeIndex * slideWidth }}\n          transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}\n        >\n          {images.map((item, i) => {\n            const isActive = activeIndex === i;\n            const diff = i - activeIndex;\n\n            const targetRotate = isHovered ? diff * 20 : diff * 5;\n            const targetScale = isActive ? 1.05 : (isHovered ? 0.65 : 0.8);\n            const targetY = isHovered ? diff * 24 : 0;\n\n            return (\n              <motion.div \n                key={i}\n                className=\"shrink-0 flex flex-col items-center gap-1.5 will-change-[transform,scale]\"\n                style={{ width: `${slideWidth}px` }}\n                animate={{ \n                  rotate: targetRotate, \n                  scale: targetScale, \n                  y: targetY \n                }}\n                transition={{ type: 'spring', bounce: 0.2, duration: 0.8 }}\n              >\n                <div \n                  className={`text-[10px] md:text-xs font-semibold whitespace-nowrap transition-all duration-300 ${isActive ? 'opacity-100 scale-100 text-white' : 'opacity-0 scale-75 text-neutral-400'}`} \n                >\n                  {item.title}\n                </div>\n\n                <img \n                  src={item.src} \n                  alt={item.title} \n                  referrerPolicy=\"no-referrer\"\n                  className=\"w-[110px] h-[110px] object-cover rounded-xl shadow-lg border border-white/10 cursor-pointer\" \n                  onClick={(e) => toSlide(e, i)} \n                />\n              </motion.div>\n            )\n          })}\n        </motion.div>\n      </div>\n\n      <div className=\"mt-4 px-1.5 py-0.5 flex items-center gap-2 justify-center text-neutral-400 rounded-full bg-neutral-900/60 backdrop-blur-md border border-white/5 shadow-md z-20\">\n        <button onClick={toPrev} className=\"p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white\">\n          <ChevronLeft className=\"w-3.5 h-3.5\" />\n        </button>\n        <div className=\"flex justify-center items-center gap-1\">\n          {images.map((_, i) => (\n            <div \n              key={i} \n              onClick={(e) => toSlide(e, i)}\n              className={`rounded-full cursor-pointer h-1 transition-all duration-300 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>\n            </div>\n          ))}\n        </div>\n        <button onClick={toNext} className=\"p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white\">\n          <ChevronRight className=\"w-3.5 h-3.5\" />\n        </button>\n      </div>\n    </div>\n  );\n}"
+}