@mova-ui/react 0.1.0 → 0.4.1

package/registry/ai-tool-call.json

@@ -0,0 +1,20 @@
+{
+  "id": "ai-tool-call",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "ai-tool-call.tsx",
+  "sourcePath": "ui/ai/ai-tool-call.tsx",
+  "registryFile": "ai-tool-call.json",
+  "exports": [
+    "AIToolCall",
+    "AIToolCallProps",
+    "AIToolCallStatus"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n// Adapted from SmoothUI's ai-tool-call (MIT). See ../patterns/smoothui.LICENSE.\nimport { ChevronRight } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { type ReactNode, useState } from \"react\";\n\nconst SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: \"spring\" as const };\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst BADGE_VIEWBOX = 24;\nconst BADGE_CENTER = BADGE_VIEWBOX / 2;\nconst RING_RADIUS = 8;\nconst CHECK_PATH = \"M 8.5 12.2 L 11 14.8 L 15.8 9.6\";\nconst CROSS_PATHS = [\"M 9 9 L 15 15\", \"M 15 9 L 9 15\"] as const;\nconst SPIN_SECONDS = 0.9;\nconst PENDING_PULSE_SECONDS = 1.6;\n\nexport type AIToolCallStatus = \"pending\" | \"running\" | \"success\" | \"error\";\nexport type AIToolCallProps = {\n  args?: ReactNode;\n  className?: string;\n  defaultOpen?: boolean;\n  name: string;\n  result?: ReactNode;\n  status?: AIToolCallStatus;\n  summary?: string;\n};\n\nconst STATUS_LABEL: Record<AIToolCallStatus, string> = {\n  error: \"Failed\",\n  pending: \"Queued\",\n  running: \"Running\",\n  success: \"Done\",\n};\n\nfunction AIToolCallBadge({ status, shouldReduceMotion }: { shouldReduceMotion: boolean; status: AIToolCallStatus }) {\n  const isRunning = status === \"running\";\n  const isPending = status === \"pending\";\n  const ringColor = status === \"success\" ? \"oklch(72% 0.17 150)\" : status === \"error\" ? \"oklch(63% 0.21 25)\" : \"currentColor\";\n\n  return (\n    <span className=\"relative flex size-5 shrink-0 items-center justify-center text-muted-foreground\">\n      <svg aria-hidden=\"true\" className=\"size-5 overflow-visible\" viewBox={`0 0 ${BADGE_VIEWBOX} ${BADGE_VIEWBOX}`}>\n        <motion.g\n          animate={shouldReduceMotion || !isRunning ? undefined : { rotate: 360 }}\n          style={{ transformBox: \"view-box\", transformOrigin: \"center\" }}\n          transition={{ duration: SPIN_SECONDS, ease: \"linear\", repeat: Number.POSITIVE_INFINITY }}\n        >\n          <motion.circle\n            animate={{\n              stroke: ringColor,\n              strokeDasharray: isRunning ? \"0.68 0.32\" : \"1 0\",\n              strokeOpacity: isPending && !shouldReduceMotion ? [0.35, 1, 0.35] : 1,\n            }}\n            cx={BADGE_CENTER}\n            cy={BADGE_CENTER}\n            fill=\"none\"\n            pathLength={1}\n            r={RING_RADIUS}\n            strokeLinecap=\"round\"\n            strokeWidth={2}\n            transition={{\n              stroke: shouldReduceMotion ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT },\n              strokeDasharray: shouldReduceMotion ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT },\n              strokeOpacity: shouldReduceMotion ? { duration: 0 } : { duration: PENDING_PULSE_SECONDS, repeat: Number.POSITIVE_INFINITY },\n            }}\n          />\n        </motion.g>\n        <AnimatePresence initial={false}>\n          {status === \"success\" ? (\n            <motion.path\n              animate={{ opacity: 1, pathLength: 1 }}\n              d={CHECK_PATH}\n              exit={{ opacity: 0, transition: { duration: 0.1 } }}\n              fill=\"none\"\n              initial={shouldReduceMotion ? { opacity: 1, pathLength: 1 } : { opacity: 1, pathLength: 0 }}\n              key=\"check\"\n              stroke={ringColor}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2.2}\n              transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.22, ease: EASE_OUT }}\n            />\n          ) : null}\n          {status === \"error\" ? CROSS_PATHS.map((path, index) => (\n            <motion.path\n              animate={{ opacity: 1, pathLength: 1 }}\n              d={path}\n              exit={{ opacity: 0, transition: { duration: 0.1 } }}\n              fill=\"none\"\n              initial={shouldReduceMotion ? { opacity: 1, pathLength: 1 } : { opacity: 1, pathLength: 0 }}\n              key={path}\n              stroke={ringColor}\n              strokeLinecap=\"round\"\n              strokeWidth={2.2}\n              transition={shouldReduceMotion ? { duration: 0 } : { delay: index * 0.06, duration: 0.16, ease: EASE_OUT }}\n            />\n          )) : null}\n        </AnimatePresence>\n      </svg>\n    </span>\n  );\n}\n\nexport function AIToolCall({ args, className = \"\", defaultOpen = false, name, result, status = \"pending\", summary }: AIToolCallProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const hasDetail = Boolean(args || result);\n\n  return (\n    <div className={`w-full overflow-hidden rounded-lg border border-border bg-background ${className}`}>\n      <button\n        aria-expanded={hasDetail ? isOpen : undefined}\n        className=\"flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left disabled:cursor-default focus-visible:outline-2 focus-visible:outline-offset-[-2px] hover:bg-muted/40\"\n        disabled={!hasDetail}\n        onClick={() => setIsOpen((current) => !current)}\n        type=\"button\"\n      >\n        <AIToolCallBadge shouldReduceMotion={Boolean(shouldReduceMotion)} status={status} />\n        <span className=\"min-w-0 flex-1\"><span className=\"block truncate font-medium font-mono text-foreground text-xs\">{name}</span></span>\n        {summary ? <span className=\"max-w-[40%] truncate text-muted-foreground text-xs\">{summary}</span> : null}\n        <span className=\"sr-only\">{STATUS_LABEL[status]}</span>\n        {hasDetail ? (\n          <motion.span animate={{ rotate: isOpen ? 90 : 0 }} className=\"flex size-4 shrink-0 items-center justify-center text-muted-foreground\" transition={shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT}>\n            <ChevronRight aria-hidden=\"true\" size={14} />\n          </motion.span>\n        ) : null}\n      </button>\n\n      <AnimatePresence initial={false}>\n        {isOpen && hasDetail ? (\n          <motion.div\n            animate={{ height: \"auto\", opacity: 1 }}\n            className=\"overflow-hidden\"\n            exit={shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 }}\n            initial={shouldReduceMotion ? { height: \"auto\", opacity: 1 } : { height: 0, opacity: 0 }}\n            transition={shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT, opacity: { duration: 0.18, ease: EASE_OUT } }}\n          >\n            <div className=\"space-y-2 border-border border-t px-3 py-2.5 text-xs\">\n              {args ? <div><p className=\"mb-1 text-[10px] text-muted-foreground uppercase tracking-wide\">Arguments</p><div className=\"overflow-x-auto font-mono text-foreground\">{args}</div></div> : null}\n              {result ? <div><p className=\"mb-1 text-[10px] text-muted-foreground uppercase tracking-wide\">Result</p><div className=\"overflow-x-auto text-foreground\">{result}</div></div> : null}\n            </div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport default AIToolCall;\n"
+}

package/registry/analyzing-image.json

@@ -0,0 +1,17 @@
+{
+  "id": "analyzing-image",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "analyzing-image.tsx",
+  "sourcePath": "ui/loading/analyzing-image.tsx",
+  "registryFile": "analyzing-image.json",
+  "exports": [
+    "AnalyzingImage"
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\n// Adapted from Loading UI's analyzing-image component.\n// Source: https://github.com/turbostarter/loading-ui/blob/main/registry/components/loading-ui/analyzing-image.tsx\n// License: MIT; see ./loading-ui.LICENSE. Original animation credit: dmytro.\n\nconst transition = {\n  duration: 2.5,\n  ease: [0.175, 0.885, 0.32, 1] as [number, number, number, number],\n  times: [0, 0.6, 0.6, 1],\n  repeat: Infinity,\n  repeatType: 'mirror' as const,\n  repeatDelay: 0.2,\n};\n\nexport function AnalyzingImage({\n  className = '',\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Analyzing image\"\n      className={`mova-analyzing-image relative isolate shrink-0 ${className}`}\n      {...props}\n    >\n      <motion.div\n        initial={{ clipPath: 'inset(0% 0% 0% 0%)' }}\n        animate={{\n          clipPath: [\n            'inset(0% 0% 0% 0%)',\n            'inset(0% 105% 0% 0%)',\n            'inset(0% 105% 0% 0%)',\n            'inset(0% 0% 0% 0%)',\n          ],\n        }}\n        transition={transition}\n        className=\"absolute inset-0 z-10\"\n        style={{\n          background: 'var(--loading-ui-analyzing-image-background, var(--mova-loader-surface, #000))',\n        }}\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"w-full h-full\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4.27209 20.7279L10.8686 14.1314C11.2646 13.7354 11.4627 13.5373 11.691 13.4632C11.8918 13.3979 12.1082 13.3979 12.309 13.4632C12.5373 13.5373 12.7354 13.7354 13.1314 14.1314L19.6839 20.6839M14 15L16.8686 12.1314C17.2646 11.7354 17.4627 11.5373 17.691 11.4632C17.8918 11.3979 18.1082 11.3979 18.309 11.4632C18.5373 11.5373 18.7354 11.7354 19.1314 12.1314L22 15M10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </motion.div>\n      <motion.div\n        initial={{ transform: 'translateX(1400%)' }}\n        animate={{\n          transform: [\n            'translateX(1400%)',\n            'translateX(-80%)',\n            'translateX(-80%)',\n            'translateX(1400%)',\n          ],\n        }}\n        transition={transition}\n        className=\"absolute z-10 h-full w-[7%] rounded-full bg-current\"\n      />\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"absolute inset-0 w-full h-full\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        <rect x=\"6\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"19\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"14\" y=\"19\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"5\" y=\"18\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"5\" y=\"17\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"17\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"17\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"4\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"3\" y=\"9\" width=\"1\" height=\"3\" fill=\"currentColor\" />\n        <rect x=\"4\" y=\"10\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"6\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"5\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"20\" y=\"8\" width=\"1\" height=\"3\" fill=\"currentColor\" />\n        <rect x=\"19\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"13\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"16\" y=\"12\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"13\" y=\"14\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"15\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"13\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"13\" y=\"10\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"14\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"5\" y=\"4\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"6\" y=\"5\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"14\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"6\" y=\"14\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"16\" y=\"8\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"8\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"20\" y=\"16\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"12\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"8\" y=\"8\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"14\" y=\"12\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"17\" y=\"16\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"14\" y=\"17\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"5\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"4\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"7\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"15\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"13\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"15\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"12\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"19\" y=\"13\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"6\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"20\" y=\"4\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"19\" y=\"4\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"3\" y=\"15\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"3\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"sr-only\">Analyzing image</span>\n    </div>\n  );\n}\n"
+}

package/registry/animated-sidebar.json

@@ -0,0 +1,19 @@
+{
+  "id": "animated-sidebar",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "animated-sidebar.tsx",
+  "sourcePath": "ui/animated-sidebar.tsx",
+  "registryFile": "animated-sidebar.json",
+  "exports": [
+    "AnimatedSidebar",
+    "AnimatedSidebarItemId",
+    "AnimatedSidebarProps"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n// SPDX-License-Identifier: MIT\n// Original Mova source.\n\nimport { Activity, Bookmark, ChevronDown, LayoutGrid } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\n\nexport type AnimatedSidebarItemId = \"send\" | \"templates\" | \"events\";\n\nexport type AnimatedSidebarProps = {\n  className?: string;\n  initialActiveItem?: AnimatedSidebarItemId;\n  onItemChange?: (id: AnimatedSidebarItemId) => void;\n  theme?: \"dark\" | \"light\";\n};\n\ntype SidebarItem = {\n  id: AnimatedSidebarItemId;\n  label: string;\n  meta: string;\n  icon: LucideIcon;\n};\n\nconst SIDEBAR_ITEMS: readonly SidebarItem[] = [\n  { id: \"send\", label: \"Work queue\", meta: \"Current cycle\", icon: LayoutGrid },\n  { id: \"templates\", label: \"Saved views\", meta: \"Shared space\", icon: Bookmark },\n  { id: \"events\", label: \"Activity log\", meta: \"Updated today\", icon: Activity },\n];\n\nconst SIDEBAR_STYLES = `\n.mova-sidebar,\n.mova-sidebar * {\n  box-sizing: border-box;\n}\n\n.mova-sidebar {\n  --mova-sidebar-background: #171a1e;\n  --mova-sidebar-surface: #20252b;\n  --mova-sidebar-border: #343a43;\n  --mova-sidebar-text: #f2f5f5;\n  --mova-sidebar-muted: #9da7ad;\n  --mova-sidebar-accent: #87e3c1;\n  --mova-sidebar-accent-surface: #19382f;\n  --mova-sidebar-focus: #ffd166;\n  width: min(300px, 100%);\n  min-width: 0;\n  min-height: 384px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  overflow: hidden;\n  border: 1px solid var(--mova-sidebar-border);\n  border-radius: 8px;\n  background: var(--mova-sidebar-background);\n  color: var(--mova-sidebar-text);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  font-size: 14px;\n  line-height: 1.4;\n  color-scheme: dark;\n}\n\n.mova-sidebar[data-theme=\"light\"] {\n  --mova-sidebar-background: #f6f8f6;\n  --mova-sidebar-surface: #ffffff;\n  --mova-sidebar-border: #d6ddd8;\n  --mova-sidebar-text: #1f2823;\n  --mova-sidebar-muted: #657169;\n  --mova-sidebar-accent: #087f5b;\n  --mova-sidebar-accent-surface: #e2f4ec;\n  --mova-sidebar-focus: #a65600;\n  color-scheme: light;\n}\n\n.mova-sidebar__brand {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  padding: 4px;\n}\n\n.mova-sidebar__mark {\n  display: grid;\n  flex: 0 0 32px;\n  width: 32px;\n  height: 32px;\n  place-items: center;\n  border: 1px solid color-mix(in srgb, var(--mova-sidebar-accent) 42%, var(--mova-sidebar-border));\n  border-radius: 4px;\n  background: var(--mova-sidebar-accent-surface);\n  color: var(--mova-sidebar-accent);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n}\n\n.mova-sidebar__brand-copy {\n  display: grid;\n  min-width: 0;\n  gap: 0;\n}\n\n.mova-sidebar__eyebrow {\n  margin: 0;\n  color: var(--mova-sidebar-muted);\n  font-size: 11px;\n  letter-spacing: 0.08em;\n  line-height: 16px;\n  text-transform: uppercase;\n}\n\n.mova-sidebar__title {\n  overflow: hidden;\n  color: var(--mova-sidebar-text);\n  font-size: 14px;\n  font-weight: 650;\n  line-height: 20px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mova-sidebar__section {\n  display: grid;\n  min-width: 0;\n  gap: 8px;\n}\n\n.mova-sidebar__section-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 28px;\n  padding: 0 4px 0 8px;\n}\n\n.mova-sidebar__section-label {\n  color: var(--mova-sidebar-muted);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n.mova-sidebar__section-toggle {\n  display: grid;\n  width: 28px;\n  height: 28px;\n  place-items: center;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mova-sidebar-muted);\n  cursor: pointer;\n  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;\n}\n\n.mova-sidebar__section-toggle:hover {\n  border-color: var(--mova-sidebar-border);\n  background: var(--mova-sidebar-surface);\n  color: var(--mova-sidebar-text);\n}\n\n.mova-sidebar__section-toggle[data-open=\"true\"] .mova-sidebar__chevron {\n  transform: rotate(180deg);\n}\n\n.mova-sidebar__chevron {\n  transition: transform 180ms ease;\n}\n\n.mova-sidebar__section-content {\n  display: grid;\n  grid-template-rows: 1fr;\n  min-width: 0;\n  opacity: 1;\n  transition: grid-template-rows 220ms ease, opacity 160ms ease;\n}\n\n.mova-sidebar__section-content[data-open=\"false\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.mova-sidebar__section-content-inner {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.mova-sidebar__list {\n  display: grid;\n  gap: 4px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mova-sidebar__item {\n  position: relative;\n  display: grid;\n  grid-template-columns: 24px minmax(0, 1fr) auto;\n  align-items: center;\n  width: 100%;\n  min-height: 52px;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--mova-sidebar-muted);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.mova-sidebar__item::before {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 3px;\n  height: 20px;\n  border-radius: 0 2px 2px 0;\n  background: var(--mova-sidebar-accent);\n  content: \"\";\n  opacity: 0;\n  transform: translateY(-50%);\n  transition: opacity 180ms ease;\n}\n\n.mova-sidebar__item:hover {\n  border-color: var(--mova-sidebar-border);\n  background: var(--mova-sidebar-surface);\n  color: var(--mova-sidebar-text);\n}\n\n.mova-sidebar__item[data-active=\"true\"] {\n  border-color: color-mix(in srgb, var(--mova-sidebar-accent) 24%, var(--mova-sidebar-border));\n  background: var(--mova-sidebar-accent-surface);\n  color: var(--mova-sidebar-text);\n}\n\n.mova-sidebar__item[data-active=\"true\"]::before {\n  opacity: 1;\n}\n\n.mova-sidebar__item:focus-visible,\n.mova-sidebar__section-toggle:focus-visible {\n  outline: 2px solid var(--mova-sidebar-focus);\n  outline-offset: -2px;\n}\n\n.mova-sidebar__icon {\n  display: grid;\n  width: 24px;\n  height: 24px;\n  place-items: center;\n  color: currentColor;\n}\n\n.mova-sidebar__item[data-active=\"true\"] .mova-sidebar__icon {\n  color: var(--mova-sidebar-accent);\n}\n\n.mova-sidebar__item-copy {\n  display: grid;\n  min-width: 0;\n  gap: 0;\n}\n\n.mova-sidebar__item-label,\n.mova-sidebar__item-meta {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mova-sidebar__item-label {\n  color: inherit;\n  font-size: 13px;\n  font-weight: 650;\n  line-height: 20px;\n}\n\n.mova-sidebar__item-meta {\n  color: var(--mova-sidebar-muted);\n  font-size: 11px;\n  line-height: 16px;\n}\n\n.mova-sidebar__count {\n  min-width: 24px;\n  padding: 2px 4px;\n  border: 1px solid var(--mova-sidebar-border);\n  border-radius: 4px;\n  color: var(--mova-sidebar-muted);\n  font-size: 10px;\n  line-height: 16px;\n  text-align: center;\n}\n\n.mova-sidebar__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-height: 36px;\n  margin-top: auto;\n  padding: 8px 12px;\n  border-top: 1px solid var(--mova-sidebar-border);\n  color: var(--mova-sidebar-muted);\n  font-size: 11px;\n}\n\n.mova-sidebar__status {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.mova-sidebar__status-dot {\n  width: 6px;\n  height: 6px;\n  flex: 0 0 6px;\n  border-radius: 50%;\n  background: var(--mova-sidebar-accent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mova-sidebar *,\n  .mova-sidebar *::before,\n  .mova-sidebar *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n`;\n\nexport function AnimatedSidebar({\n  className = \"\",\n  initialActiveItem = \"send\",\n  onItemChange,\n  theme = \"dark\",\n}: AnimatedSidebarProps = {}) {\n  const [activeItem, setActiveItem] = useState<AnimatedSidebarItemId>(initialActiveItem);\n  const [isSectionOpen, setIsSectionOpen] = useState(true);\n  const sectionId = `mova-sidebar-section-${useId().replace(/:/g, \"\")}`;\n  const rootClassName = [\"mova-sidebar\", className].filter(Boolean).join(\" \");\n\n  const selectItem = (id: AnimatedSidebarItemId) => {\n    setActiveItem(id);\n    onItemChange?.(id);\n  };\n\n  return (\n    <>\n      <style>{SIDEBAR_STYLES}</style>\n      <aside className={rootClassName} data-theme={theme} aria-label=\"Workspace navigation\">\n        <div className=\"mova-sidebar__brand\">\n          <span className=\"mova-sidebar__mark\" aria-hidden=\"true\">MW</span>\n          <div className=\"mova-sidebar__brand-copy\">\n            <p className=\"mova-sidebar__eyebrow\">Workspace</p>\n            <strong className=\"mova-sidebar__title\">Mova Workbench</strong>\n          </div>\n        </div>\n\n        <nav aria-label=\"Workspace destinations\">\n          <div className=\"mova-sidebar__section\">\n            <div className=\"mova-sidebar__section-heading\">\n              <span className=\"mova-sidebar__section-label\">Spaces</span>\n              <button\n                aria-controls={sectionId}\n                aria-expanded={isSectionOpen}\n                aria-label={`${isSectionOpen ? \"Collapse\" : \"Expand\"} workspace destinations`}\n                className=\"mova-sidebar__section-toggle\"\n                data-open={isSectionOpen}\n                onClick={() => setIsSectionOpen((open) => !open)}\n                type=\"button\"\n              >\n                <ChevronDown className=\"mova-sidebar__chevron\" size={16} strokeWidth={1.8} aria-hidden=\"true\" />\n              </button>\n            </div>\n\n            <div\n              aria-hidden={!isSectionOpen}\n              className=\"mova-sidebar__section-content\"\n              data-open={isSectionOpen}\n              id={sectionId}\n            >\n              <div className=\"mova-sidebar__section-content-inner\">\n                <ul className=\"mova-sidebar__list\">\n                  {SIDEBAR_ITEMS.map((item) => {\n                    const Icon = item.icon;\n                    const isActive = activeItem === item.id;\n                    return (\n                      <li key={item.id}>\n                        <button\n                          aria-current={isActive ? \"page\" : undefined}\n                          aria-pressed={isActive}\n                          className=\"mova-sidebar__item\"\n                          data-active={isActive}\n                          onClick={() => selectItem(item.id)}\n                          tabIndex={isSectionOpen ? 0 : -1}\n                          type=\"button\"\n                        >\n                          <span className=\"mova-sidebar__icon\" aria-hidden=\"true\">\n                            <Icon size={17} strokeWidth={1.8} />\n                          </span>\n                          <span className=\"mova-sidebar__item-copy\">\n                            <span className=\"mova-sidebar__item-label\">{item.label}</span>\n                            <span className=\"mova-sidebar__item-meta\">{item.meta}</span>\n                          </span>\n                          <span className=\"mova-sidebar__count\" aria-hidden=\"true\">3</span>\n                        </button>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </div>\n            </div>\n          </div>\n        </nav>\n\n        <div className=\"mova-sidebar__footer\">\n          <span className=\"mova-sidebar__status\">\n            <span className=\"mova-sidebar__status-dot\" aria-hidden=\"true\" />\n            <span>Workspace ready</span>\n          </span>\n          <span>3 views</span>\n        </div>\n      </aside>\n    </>\n  );\n}\n\nexport default AnimatedSidebar;\n"
+}

package/registry/animated-tags.json

@@ -0,0 +1,19 @@
+{
+  "id": "animated-tags",
+  "tier": "free",
+  "version": "0.4.1",
+  "file": "animated-tags.tsx",
+  "sourcePath": "ui/patterns/animated-tags.tsx",
+  "registryFile": "animated-tags.json",
+  "exports": [
+    "AnimatedTags",
+    "AnimatedTagsProps"
+  ],
+  "dependencies": [
+    "framer-motion",
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/**\n * Adapted from SmoothUI's Animated Tags component.\n * Source: https://github.com/educlopez/smoothui/blob/main/packages/smoothui/components/animated-tags/index.tsx\n * Example: https://smoothui.dev/docs/components/animated-tags\n * License: MIT; see ./smoothui.LICENSE.\n */\n\nimport React from \"react\";\nimport { CircleX, Plus } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { useState } from \"react\";\n\nexport interface AnimatedTagsProps {\n  className?: string;\n  initialTags?: string[];\n  onChange?: (selected: string[]) => void;\n  selectedTags?: string[];\n}\n\nexport default function AnimatedTags({\n  initialTags = [\"react\", \"tailwindcss\", \"javascript\"],\n  selectedTags: controlledSelectedTags,\n  onChange,\n  className = \"\",\n}: AnimatedTagsProps) {\n  const [internalSelected, setInternalSelected] = useState<string[]>([]);\n  const shouldReduceMotion = useReducedMotion();\n\n  const selectedTag = controlledSelectedTags ?? internalSelected;\n  const tags = initialTags.filter((tag) => !selectedTag.includes(tag));\n\n  const handleTagClick = (tag: string) => {\n    const newSelected = [...selectedTag, tag];\n    if (onChange) {\n      onChange(newSelected);\n    } else {\n      setInternalSelected(newSelected);\n    }\n  };\n  const handleDeleteTag = (tag: string) => {\n    const newSelectedTag = selectedTag.filter((selected) => selected !== tag);\n    if (onChange) {\n      onChange(newSelectedTag);\n    } else {\n      setInternalSelected(newSelectedTag);\n    }\n  };\n  return (\n    <div className={`flex w-[300px] flex-col gap-4 p-4 ${className}`}>\n      <div className=\"flex flex-col items-start justify-center gap-1\">\n        <p>Selected Tags</p>\n        <AnimatePresence>\n          <div className=\"flex min-h-12 w-full flex-wrap items-center gap-1 rounded-xl border bg-background p-2\">\n            {selectedTag?.map((tag) => (\n              <motion.div\n                animate={\n                  shouldReduceMotion\n                    ? { opacity: 1 }\n                    : {\n                        filter: \"blur(0px)\",\n                        opacity: 1,\n                        y: 0,\n                      }\n                }\n                className=\"group/tag flex cursor-pointer flex-row items-center justify-center gap-2 rounded-md border bg-primary px-2 py-1 text-primary-foreground group-hover/tag:bg-primary group-hover/tag:text-foreground\"\n                exit={\n                  shouldReduceMotion\n                    ? { opacity: 0, transition: { duration: 0 } }\n                    : { filter: \"blur(4px)\", opacity: 0, y: 20 }\n                }\n                initial={\n                  shouldReduceMotion\n                    ? { opacity: 1 }\n                    : { filter: \"blur(4px)\", opacity: 0, y: 20 }\n                }\n                key={tag}\n                layout\n                onClick={() => handleDeleteTag(tag)}\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : { bounce: 0, duration: 0.25, type: \"spring\" as const }\n                }\n              >\n                {tag}{\" \"}\n                <CircleX\n                  className=\"ease flex items-center justify-center rounded-full transition-all duration-200\"\n                  size={16}\n                />\n              </motion.div>\n            ))}\n          </div>\n        </AnimatePresence>\n      </div>\n      <AnimatePresence>\n        <div className=\"flex flex-wrap items-center gap-1\">\n          {tags.map((tag) => (\n            <motion.div\n              animate={\n                shouldReduceMotion\n                  ? { opacity: 1 }\n                  : {\n                      filter: \"blur(0px)\",\n                      opacity: 1,\n                      y: 0,\n                    }\n              }\n              className=\"group/tag flex cursor-pointer flex-row items-center justify-center gap-2 rounded-md border bg-background px-2 py-1 text-primary-foreground\"\n              exit={\n                shouldReduceMotion\n                  ? { opacity: 0, transition: { duration: 0 } }\n                  : { filter: \"blur(4px)\", opacity: 0, y: -20 }\n              }\n              initial={\n                shouldReduceMotion\n                  ? { opacity: 1 }\n                  : { filter: \"blur(4px)\", opacity: 0, y: -20 }\n              }\n              key={tag}\n              layout\n              onClick={() => handleTagClick(tag)}\n              transition={\n                shouldReduceMotion\n                  ? { duration: 0 }\n                  : { bounce: 0, duration: 0.25, type: \"spring\" as const }\n              }\n            >\n              {tag}{\" \"}\n              <Plus\n                className=\"ease flex items-center justify-center rounded-full transition-all duration-200 group-hover/tag:bg-primary group-hover/tag:text-foreground\"\n                size={16}\n              />\n            </motion.div>\n          ))}\n        </div>\n      </AnimatePresence>\n    </div>\n  );\n}\n"
+}

package/registry/app-icon-load.json

@@ -1,8 +1,17 @@
 {
   "id": "app-icon-load",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "app-icon-load.tsx",
+  "sourcePath": "ui/loading/app-icon-load.tsx",
+  "registryFile": "app-icon-load.json",
+  "exports": [
+    "AppIconLoad"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppIconLoad = () => (\n  <div className=\"relative w-12 h-12 bg-zinc-200 dark:bg-zinc-800 rounded-[12px] flex items-center justify-center overflow-hidden\">\n    <svg className=\"w-8 h-8 absolute\" viewBox=\"0 0 50 50\">\n      <circle\n        cx=\"25\" cy=\"25\" r=\"20\"\n        className=\"stroke-zinc-300 dark:stroke-zinc-700 fill-none\"\n        strokeWidth=\"4\"\n      />\n      <motion.circle\n        cx=\"25\" cy=\"25\" r=\"20\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"4\"\n        strokeDasharray=\"125\"\n        animate={{ strokeDashoffset: [125, 0] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n        style={{ rotate: -90, transformOrigin: 'center' }}\n      />\n    </svg>\n  </div>\n);\n"
 }

package/registry/apple-breathe.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-breathe",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-breathe.tsx",
+  "sourcePath": "ui/loading/apple-breathe.tsx",
+  "registryFile": "apple-breathe.json",
+  "exports": [
+    "AppleBreathe"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleBreathe = () => {\n  return (\n    <div className=\"relative flex items-center justify-center w-12 h-12\">\n      {[0, 60, 120, 180, 240, 300].map((angle, idx) => {\n        // Alternating color teal-blue palette\n        const bgClass = idx % 2 === 0 \n          ? 'bg-teal-400/35 dark:bg-teal-400/40' \n          : 'bg-cyan-400/35 dark:bg-cyan-400/40';\n        return (\n          <motion.div\n            key={angle}\n            className={`absolute w-3.5 h-3.5 rounded-full ${bgClass}`}\n            style={{ transformOrigin: 'center' }}\n            animate={{\n              scale: [1, 1.75, 1],\n              x: [0, Math.cos(angle * Math.PI / 180) * 11, 0],\n              y: [0, Math.sin(angle * Math.PI / 180) * 11, 0]\n            }}\n            transition={{\n              duration: 3.6,\n              repeat: Infinity,\n              ease: \"easeInOut\"\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"
 }

package/registry/apple-equalizer.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-equalizer",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-equalizer.tsx",
+  "sourcePath": "ui/loading/apple-equalizer.tsx",
+  "registryFile": "apple-equalizer.json",
+  "exports": [
+    "AppleEqualizer"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleEqualizer = () => (\n  <div className=\"flex space-x-1 h-8 items-end\">\n    {[0,1,2,3].map(i => (\n      <motion.div\n        key={i}\n        className=\"w-1.5 bg-zinc-800 dark:bg-white rounded-t-sm\"\n        animate={{ height: ['20%', '100%', '20%'] }}\n        transition={{ duration: 0.8, repeat: Infinity, delay: Math.random() * 0.5, ease: \"circInOut\" }}\n      />\n    ))}\n  </div>\n);\n"
 }

package/registry/apple-icon-morph.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-icon-morph",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-icon-morph.tsx",
+  "sourcePath": "ui/loading/apple-icon-morph.tsx",
+  "registryFile": "apple-icon-morph.json",
+  "exports": [
+    "AppleIconMorph"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleIconMorph = () => (\n  <motion.div\n    className=\"w-8 h-8 bg-zinc-800 dark:bg-white\"\n    animate={{\n      borderRadius: [\"20%\", \"50%\", \"50%\", \"20%\"],\n      rotate: [0, 90, 180, 270]\n    }}\n    transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n  />\n);\n"
 }

package/registry/apple-pulse-dots.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-pulse-dots",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-pulse-dots.tsx",
+  "sourcePath": "ui/loading/apple-pulse-dots.tsx",
+  "registryFile": "apple-pulse-dots.json",
+  "exports": [
+    "ApplePulseDots"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ApplePulseDots = () => (\n  <div className=\"flex space-x-2\">\n    {[0, 1, 2].map(i => (\n      <motion.div\n        key={i}\n        className=\"w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ scale: [0.5, 1, 0.5], opacity: [0.3, 1, 0.3] }}\n        transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: \"easeInOut\" }}\n      />\n    ))}\n  </div>\n);\n"
 }

package/registry/apple-scale-pulse.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-scale-pulse",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-scale-pulse.tsx",
+  "sourcePath": "ui/loading/apple-scale-pulse.tsx",
+  "registryFile": "apple-scale-pulse.json",
+  "exports": [
+    "AppleScalePulse"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleScalePulse = () => (\n  <div className=\"relative w-12 h-12 flex items-center justify-center\">\n    <motion.div\n      className=\"absolute w-full h-full bg-zinc-200 dark:bg-zinc-800 rounded-full\"\n      animate={{ scale: [0, 1], opacity: [1, 0] }}\n      transition={{ duration: 1.5, repeat: Infinity, ease: \"easeOut\" }}\n    />\n    <motion.div\n      className=\"absolute w-full h-full bg-zinc-200 dark:bg-zinc-800 rounded-full\"\n      animate={{ scale: [0, 1], opacity: [1, 0] }}\n      transition={{ duration: 1.5, repeat: Infinity, delay: 0.5, ease: \"easeOut\" }}\n    />\n    <div className=\"w-3 h-3 bg-zinc-800 dark:bg-white rounded-full z-10\" />\n  </div>\n);\n"
 }

package/registry/apple-sound-wave.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-sound-wave",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-sound-wave.tsx",
+  "sourcePath": "ui/loading/apple-sound-wave.tsx",
+  "registryFile": "apple-sound-wave.json",
+  "exports": [
+    "AppleSoundWave"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleSoundWave = () => (\n  <div className=\"flex space-x-1 h-8 items-center\">\n    {[1, 2, 3, 2, 1].map((val, i) => (\n      <motion.div\n        key={i}\n        className=\"w-1 bg-zinc-800 dark:bg-white rounded-full\"\n        animate={{ height: [4, val * 8, 4] }}\n        transition={{ duration: 1, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" }}\n      />\n    ))}\n  </div>\n);\n"
 }

package/registry/apple-text-reveal.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-text-reveal",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-text-reveal.tsx",
+  "sourcePath": "ui/loading/apple-text-reveal.tsx",
+  "registryFile": "apple-text-reveal.json",
+  "exports": [
+    "AppleTextReveal"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleTextReveal = () => (\n  <div className=\"font-medium text-lg text-zinc-900 dark:text-white overflow-hidden h-6 relative\">\n    <motion.div\n      animate={{ y: [\"100%\", \"0%\", \"-100%\"] }}\n      transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n    >\n      Loading\n    </motion.div>\n  </div>\n);\n"
 }

package/registry/apple-unlock.json

@@ -1,8 +1,17 @@
 {
   "id": "apple-unlock",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "apple-unlock.tsx",
+  "sourcePath": "ui/loading/apple-unlock.tsx",
+  "registryFile": "apple-unlock.json",
+  "exports": [
+    "AppleUnlock"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const AppleUnlock = ({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {\n  const isDark = theme === 'dark';\n  return (\n    <div className=\"relative font-medium text-sm tracking-wide select-none\">\n      <span className=\"text-zinc-400 dark:text-zinc-600\">\n        Slide to unlock\n      </span>\n      <motion.div\n        className=\"absolute inset-0 text-zinc-950 dark:text-white bg-clip-text text-transparent bg-gradient-to-r from-transparent via-current to-transparent\"\n        style={{\n          backgroundSize: \"200% 100%\",\n        }}\n        animate={{ backgroundPosition: [\"200% 0\", \"-200% 0\"] }}\n        transition={{ duration: 2.2, repeat: Infinity, ease: \"linear\" }}\n      >\n        Slide to unlock\n      </motion.div>\n    </div>\n  );\n};\n"
 }

package/registry/arc-tracer.json

@@ -1,8 +1,17 @@
 {
   "id": "arc-tracer",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "arc-tracer.tsx",
+  "sourcePath": "ui/loading/arc-tracer.tsx",
+  "registryFile": "arc-tracer.json",
+  "exports": [
+    "ArcTracer"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const ArcTracer = () => {\n  return (\n    <svg className=\"w-10 h-10\" viewBox=\"0 0 50 50\">\n      <circle cx=\"25\" cy=\"25\" r=\"20\" className=\"stroke-zinc-200 dark:stroke-zinc-800 fill-none\" strokeWidth=\"4\" />\n      <motion.circle\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        className=\"stroke-zinc-800 dark:stroke-white fill-none\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"125\"\n        animate={{ strokeDashoffset: [125, 0, -125] }}\n        transition={{ duration: 2, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </svg>\n  );\n};\n"
 }

package/registry/bar-cascade.json

@@ -1,8 +1,17 @@
 {
   "id": "bar-cascade",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "bar-cascade.tsx",
+  "sourcePath": "ui/loading/bar-cascade.tsx",
+  "registryFile": "bar-cascade.json",
+  "exports": [
+    "BarCascade"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const BarCascade = () => {\n  return (\n    <div className=\"flex space-x-1 items-center h-8\">\n      {[0, 1, 2, 3, 4].map((i) => (\n        <motion.div\n          key={i}\n          className=\"w-1.5 bg-zinc-800 dark:bg-white rounded-full\"\n          animate={{ height: [\"8px\", \"24px\", \"8px\"] }}\n          transition={{ duration: 1, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" }}\n        />\n      ))}\n    </div>\n  );\n};\n"
 }

package/registry/bar-sweep.json

@@ -1,8 +1,17 @@
 {
   "id": "bar-sweep",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "bar-sweep.tsx",
+  "sourcePath": "ui/loading/bar-sweep.tsx",
+  "registryFile": "bar-sweep.json",
+  "exports": [
+    "BarSweep"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion } from 'framer-motion';\n\nexport const BarSweep = () => {\n  return (\n    <div className=\"w-12 h-6 border-2 border-zinc-800 dark:border-zinc-700 rounded-full p-1 relative flex items-center overflow-hidden\">\n      <motion.div\n        className=\"w-4 h-4 bg-zinc-800 dark:bg-white rounded-full absolute\"\n        animate={{ x: [0, 24, 0] }}\n        transition={{ duration: 1.5, repeat: Infinity, ease: \"easeInOut\" }}\n      />\n    </div>\n  );\n};\n"
 }

package/registry/blur-text.json

@@ -1,8 +1,17 @@
 {
   "id": "blur-text",
+  "tier": "free",
+  "version": "0.4.1",
   "file": "blur-text.tsx",
+  "sourcePath": "ui/text/blur-text.tsx",
+  "registryFile": "blur-text.json",
+  "exports": [
+    "BlurText"
+  ],
   "dependencies": [
     "framer-motion"
   ],
+  "license": "MIT",
+  "previewMode": "client",
   "content": "\"use client\";\nimport React from 'react';\nimport { motion, type Variants } from 'framer-motion';\n\ninterface BlurTextProps {\n  text: string;\n  duration?: number;\n  staggerDelay?: number;\n  initialBlur?: string;\n  className?: string;\n}\n\nexport function BlurText({\n  text,\n  duration = 0.5,\n  staggerDelay = 0.02,\n  initialBlur = '8px',\n  className = '',\n}: BlurTextProps) {\n  const characters = Array.from(text);\n\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: staggerDelay,\n      },\n    },\n  };\n\n  const charVariants: Variants = {\n    hidden: { opacity: 0, filter: `blur(${initialBlur})` },\n    visible: {\n      opacity: 1,\n      filter: 'blur(0px)',\n      transition: {\n        duration,\n        ease: 'easeOut',\n      },\n    },\n  };\n\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once: true, margin: '-10%' }}\n      className={`inline-block ${className}`}\n    >\n      {characters.map((char, index) => (\n        <motion.span\n          key={index}\n          variants={charVariants}\n          className=\"inline-block whitespace-pre\"\n        >\n          {char}\n        </motion.span>\n      ))}\n    </motion.div>\n  );\n}\n"
 }

package/registry/blur-up-char.json

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