@mova-ui/react 0.1.0 → 0.4.1

package/README.md

@@ -1,46 +1,95 @@
-# @mova-ui/react
+# Mova
 
 **Make interfaces feel alive.**
 
-Reusable React animation components and an offline, copy-source CLI. Documentation: https://mova.zeeland.studio
+React components for motion: entrance transitions, hover effects, text reveals, loading indicators, and scroll interactions. Import them as a library, or copy the source into your project with the bundled CLI.
 
-## Use as a React library
+## Install
 
-```sh
-npm install @mova-ui/react react react-dom
+Requires Node.js 20+ and React / React DOM 18.2+ or 19.
+
+```bash
+npm install @mova-ui/react
 ```
 
+Import the CSS once in your app entry point. Mova ships compiled styles, so you do not need to configure Tailwind. The stylesheet includes component utilities without a global reset.
+
 ```tsx
-'use client';
-import { FadeIn, GlowButton, ClassicSpinner } from '@mova-ui/react';
+import { FadeIn, GlowButton } from '@mova-ui/react';
 import '@mova-ui/react/styles.css';
 
-export function Example() {
-  return <FadeIn><GlowButton>Continue</GlowButton><ClassicSpinner /></FadeIn>;
+export function Welcome() {
+  return (
+    <FadeIn>
+      <GlowButton onClick={() => console.log('Hello!')}>
+        Try Mova
+      </GlowButton>
+    </FadeIn>
+  );
 }
 ```
 
-ESM with TypeScript declarations. React 18.2+ or 19; Node 20+ for the CLI. Animation and class utility dependencies are installed automatically. Bundlers can tree-shake unused exports. The library entry is marked `use client` for React Server Component frameworks.
-
-The exported CSS contains the bundled components' Tailwind utility classes and theme tokens, **not** the website stylesheet or Tailwind preflight. Import it once; Tailwind is not required for the supplied styles. Its utility class names are global: applications that already use Tailwind may instead scan their installed package's JS or copied source using their own Tailwind configuration. Custom `className` values require your own CSS. Components include upstream demo defaults; check individual props before use. Motion accessibility behavior varies by component; applications should configure reduced-motion preferences and test accessibility for their use case.
+The package includes TypeScript declarations and an ESM entry point. In frameworks with React Server Components, use interactive components inside a client boundary.
 
-## Copy editable source
+## Copy components
 
-Run from a project root containing `package.json`:
+Run the CLI from a project directory containing `package.json`:
 
-```sh
-npx @mova-ui/react --help
+```bash
 npx @mova-ui/react list
 npx @mova-ui/react add glow-button
 npx @mova-ui/react add fade-in --dir src/components/mova
+npx @mova-ui/react --help
 ```
 
-The CLI copies TypeScript source, compiled `styles.css`, and `LICENSE.mova` to `src/components/mova` by default. It prints required dependencies (for example `npm install framer-motion`) but never installs packages, downloads component code, or edits project configuration. Import the copied CSS once, e.g. `import './components/mova/styles.css'` from `src/App.tsx`. Source uses React and, where needed, `framer-motion`, `clsx`, and `tailwind-merge`.
+The CLI copies component source, `styles.css`, and attribution licenses into `src/components/mova` by default. Missing dependencies are installed automatically using your project's npm, pnpm, yarn, or bun. Import the copied CSS once and keep both license files with the source.
+
+Component sources are bundled with the package. Use `--skip-install` for offline source copying; otherwise dependency installation updates your package manifest and lockfile. It refuses symlink targets and paths outside your project. Existing component files stay untouched unless you pass `--overwrite`.
+
+The extended site catalog is generated into standalone JavaScript bundles stored in `.tsx` files with an explicit typecheck exemption. Original library components retain their TypeScript source; generated catalog bundles do not preserve their original prop types.
+
+## Development
+
+This repository contains the component library and CLI only.
+
+```bash
+npm ci --include=dev
+npm run build
+npm test
+npm run test:consumer
+# Run all checks:
+npm run verify
+```
+
+- `source-registry/` contains the editable components, hooks, and utilities. The classic toggle is stored as registry JSON.
+- `scripts/build.mjs` compiles the ESM bundle, strict TypeScript declarations, CSS, and offline registry.
+- `bin/mova.mjs` implements the source-copy CLI.
+- `install-catalog/` contains reviewed public CLI inputs and third-party attribution, controlled by `public-registry.json`. Maintain these inputs in Library; there is no Site-to-Library export workflow.
+- `tests/` covers package exports, CLI safety, and installation into a separate React consumer.
+
+The root public inventory has 178 explicit `sourceRegistry` paths, 220 explicit `catalogEntries` records, and 66 explicit `catalog/registry-bindings.json` entries. Each binding generates standalone CLI source from its canonical catalog module and preset props. Duplicate paths or component IDs are rejected by the build rather than silently skipped, and the combined 464 IDs are the only IDs emitted into the versioned manifest and CLI registry.
+
+The build recreates `dist/`, `registry/`, and `.generated/`. Do not edit those directories. Consumer verification packs the library, checks its file allowlist, installs it in a temporary project, then runs CLI commands, server rendering, strict typechecking, and a Vite production build.
+
+## Source catalog
+
+`catalog/` owns 153 reusable UI modules and 16 support files: cards, charts, metrics, forms, toggles, text effects, and CSS animation experiments. The `0.4.1` artifact exports the explicit module allowlist through `@mova-ui/react/catalog/...` and includes canonical source records in its versioned manifest. These subpaths are separate from root exports and do not create additional CLI IDs. During the root build, `catalog/data/supportedRegistryIds.ts` is generated from the finalized `registry/manifest.json` component IDs; the checked-in catalog copy is only a standalone fallback. See [the catalog guide](catalog/README.md) for source development. Local artifact availability does not imply that this version has been published to npm.
+
+```bash
+npm ci --prefix catalog --include=dev
+npm --prefix catalog run verify
+```
+
+## Contributing
+
+Keep changes focused on reusable components or CLI behavior. Edit `source-registry/`, add regression coverage where applicable, and run `npm run verify` before opening a pull request. Include usage notes when you change a component API. Check keyboard interaction and reduced-motion behavior for interactive or animated changes.
+
+Maintainers can use the manual npm release workflow for a reviewed, unpublished version. The workflow requires an exact version match and the `NPM_TOKEN` secret. Version `0.2.0` adds automatic dependency installation and the expanded CLI catalog.
 
-Existing files are protected. Use `--overwrite` only when you intend to replace them. Identical shared CSS/license files can be reused when adding another component. Absolute paths, parent traversal, symlink targets, Git metadata, and `node_modules` destinations are refused. This is a local developer tool, not a sandbox against another process concurrently mutating your project's directories.
+## Attribution
 
-`list` enumerates all packaged IDs, including loaders, text/entrance/hover/scroll/cursor effects, the page transition, a toggle, hooks, and utilities. The package is generated from the original reusable registry, not the documentation application; website-only chart/demo pages are not exported.
+Forked from an early version of [Amicro](https://github.com/Subhan-code/Amicro--Micro-transitions-).
 
-## License and attribution
+## License
 
-MIT. Derived from Amicro by SYED SUBHAN UDDIN. The original copyright and complete license are retained in `LICENSE` and in source installations. Mova packaging, CLI, and compatibility adjustments preserve that attribution.
+MIT. See [LICENSE](LICENSE).

package/bin/mova.mjs

@@ -1,20 +1,22 @@
 #!/usr/bin/env node
-import { readdirSync, readFileSync, writeFileSync, lstatSync, realpathSync, mkdirSync, renameSync, unlinkSync, constants, openSync, closeSync } from 'node:fs';
+import { readFileSync, writeFileSync, lstatSync, realpathSync, mkdirSync, renameSync, unlinkSync, constants, openSync, closeSync } from 'node:fs';
 import { resolve, dirname, join, isAbsolute, relative, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { randomUUID } from 'node:crypto';
+import { execFileSync } from 'node:child_process';
 const pkg = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const packageManifest = JSON.parse(readFileSync(join(pkg, 'package.json'), 'utf8'));
 const help = `Mova — Make interfaces feel alive.
 
 Usage:
   npx @mova-ui/react list
-  npx @mova-ui/react add <id> [--dir src/components/mova] [--overwrite]
+  npx @mova-ui/react add <id> [--dir src/components/mova] [--overwrite] [--skip-install]
   npx @mova-ui/react --help
 
 Run add from your project root (must contain package.json).
 Copies bundled TypeScript source, compiled styles.css and the MIT license.
-No downloads, package installation or project configuration changes are made.
-Import the copied styles.css once in your app. Required dependencies are printed.
+Installs missing dependencies using your project's npm, pnpm, yarn, or bun.
+Import the copied styles.css once in your app. --skip-install copies source only.
 --dir must be a relative directory inside this project; symlinks are refused.
 --overwrite explicitly replaces existing regular files (never symlinks).
 `;
@@ -31,31 +33,39 @@ function safePath(root, path) {
     if (s && i === parts.length-1 && !s.isFile()) throw new Error('Target is not a regular file');
   }
 }
+function publicEntries() {
+  const manifest = JSON.parse(readFileSync(join(pkg, 'registry', 'manifest.json'), 'utf8'));
+  if (manifest.package !== '@mova-ui/react' || manifest.components?.some(item => item.tier !== 'free')) {
+    throw new Error('Invalid public registry manifest');
+  }
+  return new Map(manifest.components.map(item => [item.id, item]));
+}
 function main(args) {
   if (!args.length || (args.length === 1 && ['--help','-h'].includes(args[0]))) { console.log(help); return; }
   if (args[0] === 'list' && args.length === 1) {
-    console.log(readdirSync(join(pkg, 'registry')).filter(f => f.endsWith('.json')).map(f => f.slice(0,-5)).sort().join('\n')); return;
+    console.log([...publicEntries().keys()].sort().join('\n')); return;
   }
   if (args[0] !== 'add' || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(args[1] ?? '')) throw new Error('Use add <id>, list, or --help');
-  const id = args[1]; let dir = 'src/components/mova'; let overwrite = false;
+  const id = args[1]; let dir = 'src/components/mova'; let overwrite = false; let skipInstall = false;
   for (let i=2;i<args.length;i++) {
     if (args[i] === '--overwrite' && !overwrite) overwrite = true;
+    else if (args[i] === '--skip-install' && !skipInstall) skipInstall = true;
     else if (args[i] === '--dir' && args[i+1] && !args[i+1].startsWith('--')) dir = args[++i];
     else throw new Error(`Unknown or incomplete option: ${args[i]}`);
   }
   if (!dir || isAbsolute(dir) || dir.includes('\\') || dir.includes(':') || dir.split('/').some(p => p === '..' || p.startsWith('.git') || p === 'node_modules')) throw new Error('Directory must be a relative path inside this project');
   const root = realpathSync(process.cwd());
   if (!stat(join(root, 'package.json'))?.isFile()) throw new Error('Run add from a project root containing package.json');
-  JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
-  const registryFile = join(pkg, 'registry', `${id}.json`);
-  if (!stat(registryFile)?.isFile()) throw new Error(`Unknown component: ${id}. Run npx @mova-ui/react list`);
-  const item = JSON.parse(readFileSync(registryFile, 'utf8'));
+  const project = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
+  const item = publicEntries().get(id);
+  if (!item) throw new Error(`Unknown component: ${id}. Run npx @mova-ui/react list`);
   if (!/^[a-z0-9-]+\.tsx?$/.test(item.file) || typeof item.content !== 'string') throw new Error('Invalid bundled registry entry');
   const out = resolve(root, dir);
   const files = [
     { name: item.file, content: item.content },
     { name: 'styles.css', content: readFileSync(join(pkg, 'dist/styles.css'), 'utf8') },
-    { name: 'LICENSE.mova', content: readFileSync(join(pkg, 'LICENSE'), 'utf8') }
+    { name: 'LICENSE.mova', content: readFileSync(join(pkg, 'LICENSE'), 'utf8') },
+    { name: 'LICENSE.third-party', content: readFileSync(join(pkg, 'registry/LICENSE.third-party'), 'utf8') }
   ].map(f => ({...f, path: join(out, f.name)}));
   // Preflight the entire operation before creating directories or replacing files.
   for (const f of files) {
@@ -64,6 +74,22 @@ function main(args) {
     f.skip = exists && f.name !== item.file && readFileSync(f.path, 'utf8') === f.content;
     if (exists && !f.skip && !overwrite) throw new Error(`${relative(root, f.path)} already exists; use --overwrite to replace it`);
   }
+  const dependencies = item.dependencies.filter(name => !project.dependencies?.[name] && !project.devDependencies?.[name]);
+  if (dependencies.some(name => !/^(?:@[a-z0-9._-]+\/)?[a-z0-9._-]+$/.test(name))) throw new Error('Invalid registry dependency');
+  const dependencySpecs = dependencies.map(name => {
+    const version = packageManifest.dependencies?.[name];
+    return version ? `${name}@${version}` : name;
+  });
+  if (!skipInstall && dependencies.length) {
+    const declared = project.packageManager?.split('@')[0];
+    const manager = ['npm', 'pnpm', 'yarn', 'bun'].includes(declared) ? declared
+      : stat(join(root, 'pnpm-lock.yaml')) ? 'pnpm'
+      : stat(join(root, 'yarn.lock')) ? 'yarn'
+      : stat(join(root, 'bun.lock')) || stat(join(root, 'bun.lockb')) ? 'bun' : 'npm';
+    console.log(`Installing ${dependencySpecs.join(', ')} with ${manager}…`);
+    try { execFileSync(manager, [manager === 'npm' ? 'install' : 'add', ...dependencySpecs], { cwd: root, stdio: 'inherit' }); }
+    catch { throw new Error(`Dependency installation failed (${manager}). Component files were not written. Resolve the package-manager error and retry.`); }
+  }
   for (const f of files.filter(f => !f.skip)) {
     mkdirSync(dirname(f.path), { recursive: true });
     safePath(root, f.path);
@@ -78,7 +104,7 @@ function main(args) {
     }
   }
   console.log(`Added ${id} to ${dir}\nImport '${dir}/styles.css' once in your app (adjust the relative import).`);
-  if (item.dependencies.length) console.log(`Dependencies: npm install ${item.dependencies.join(' ')}`);
+  if (skipInstall && dependencies.length) console.log(`Skipped dependencies: ${dependencies.join(' ')}`);
   console.log('Requires React 18.2+ or 19 and React DOM. MIT attribution is in LICENSE.mova.');
 }
 try { main(process.argv.slice(2)); } catch (error) { console.error(`Mova: ${error.message}`); process.exitCode = 1; }

package/dist/catalog/components/AnimatedButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonConfig } from '../data/buttons';
+interface AnimatedButtonProps {
+    config: ButtonConfig;
+    layoutMode: 'list' | 'grid' | 'matrix';
+    theme?: 'dark' | 'light';
+}
+export declare const AnimatedButton: React.NamedExoticComponent<AnimatedButtonProps>;
+export {};

package/dist/catalog/components/AnimatedButton.js

@@ -0,0 +1,346 @@
+"use client";
+import {
+  FocusBlur
+} from "../../catalog-chunks/chunk-QXWREUPI.js";
+
+// .generated/catalog/components/AnimatedButton.tsx
+import React, { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AnimatedButton = React.memo(function AnimatedButton2({ config, layoutMode, theme = "dark" }) {
+  const [isHovered, setIsHovered] = useState(false);
+  if (config.interactionType === "focus-blur") {
+    return /* @__PURE__ */ jsx(
+      FocusBlur,
+      {
+        items: [
+          { label: "@X", href: "#" },
+          { label: "@Threads", href: "#" },
+          { label: "@GitHub", href: "#" }
+        ],
+        showBrackets: true,
+        className: layoutMode === "matrix" ? "scale-[0.5] origin-center text-[10px] gap-1 px-1 py-1" : "text-sm gap-4"
+      }
+    );
+  }
+  const Icon1 = config.icon1;
+  const Icon2 = config.icon2;
+  const isMatrix = layoutMode === "matrix";
+  const isLightTheme = theme === "light";
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [mouseCoords, setMouseCoords] = useState({ x: 0, y: 0 });
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    if (config.interactionType === "morph" && (config.id === "4" || config.id === "21" || config.id === "22" || config.id === "24" || config.id === "25")) {
+      setHasInteracted(true);
+    }
+  };
+  const handleMouseMove = (e) => {
+    if (config.interactionType === "magnetic") {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left - rect.width / 2;
+      const y = e.clientY - rect.top - rect.height / 2;
+      setMouseCoords({ x: x * 0.35, y: y * 0.35 });
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    if (config.interactionType === "magnetic") {
+      setMouseCoords({ x: 0, y: 0 });
+    }
+    if (hasInteracted) {
+      setTimeout(() => setHasInteracted(false), 500);
+    }
+  };
+  const handleTouchStart = () => {
+    setIsHovered(true);
+    if (config.interactionType === "morph" && (config.id === "4" || config.id === "21" || config.id === "22" || config.id === "24" || config.id === "25")) {
+      setHasInteracted(true);
+    }
+  };
+  const handleTouchEnd = () => {
+    setTimeout(() => {
+      setIsHovered(false);
+      if (hasInteracted) {
+        setTimeout(() => setHasInteracted(false), 500);
+      }
+    }, 500);
+  };
+  const showIcon2 = hasInteracted || isHovered;
+  const renderIconContent = () => {
+    switch (config.interactionType) {
+      case "slide-arrow":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: !isHovered && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: true,
+              initial: { opacity: 0, x: -10 },
+              animate: { opacity: 1, x: 0 },
+              exit: { opacity: 0, x: -10 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: `flex items-center shrink-0 ${!isMatrix ? "mr-2.5" : ""}`,
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            },
+            "icon1"
+          ) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.span, { layout: true, className: "font-medium tracking-tight text-[13px] whitespace-nowrap", children: config.label }),
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: isHovered && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: true,
+              initial: { opacity: 0, x: 10 },
+              animate: { opacity: 1, x: 0 },
+              exit: { opacity: 0, x: 10 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: `flex items-center shrink-0 ${!isMatrix ? "ml-2.5" : ""}`,
+              children: Icon2 && /* @__PURE__ */ jsx(Icon2, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            },
+            "icon2"
+          ) })
+        ] });
+      case "sparkle":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: !isHovered ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { y: -15, opacity: 0, scale: 0.8 },
+              animate: { y: 0, opacity: 1, scale: 1 },
+              exit: { y: -15, opacity: 0, scale: 0.8 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: "absolute inset-0 flex items-center justify-center",
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            },
+            "icon1"
+          ) : /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { y: 15, opacity: 0, scale: 0.8 },
+              animate: { y: 0, opacity: 1, scale: 1 },
+              exit: { y: 15, opacity: 0, scale: 0.8 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: "absolute inset-0 flex items-center justify-center",
+              children: [
+                Icon2 && /* @__PURE__ */ jsx(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? "text-black" : "text-[#e3e3e3]")}` }),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, scale: 0, rotate: -45, y: 10 },
+                    animate: { opacity: 1, scale: 1, rotate: 0, y: 0 },
+                    exit: { opacity: 0, scale: 0, rotate: 45, y: 10 },
+                    transition: { type: "spring", stiffness: 600, damping: 25, delay: 0.05 },
+                    className: "absolute -top-3 -right-2",
+                    children: /* @__PURE__ */ jsx("svg", { className: "w-2.5 h-2.5 text-yellow-200", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("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" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, scale: 0, rotate: 45, x: 10 },
+                    animate: { opacity: 1, scale: 1, rotate: 0, x: 0 },
+                    exit: { opacity: 0, scale: 0, rotate: -45, x: 10 },
+                    transition: { type: "spring", stiffness: 600, damping: 25, delay: 0.1 },
+                    className: "absolute -top-1 -left-3",
+                    children: /* @__PURE__ */ jsx("svg", { className: "w-1.5 h-1.5 text-yellow-400", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("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" }) })
+                  }
+                )
+              ]
+            },
+            "icon2"
+          ) }) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.span, { layout: true, className: "font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5", children: config.label })
+        ] });
+      case "morph":
+      case "color-morph":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: !showIcon2 ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 0.5, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              exit: { scale: 0.5, opacity: 0 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: "absolute inset-0 flex items-center justify-center",
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            },
+            "icon1"
+          ) : /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 0.5, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              exit: { scale: 0.5, opacity: 0 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: "absolute inset-0 flex items-center justify-center",
+              children: Icon2 && /* @__PURE__ */ jsx(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? "text-black" : "text-[#e3e3e3]")}` })
+            },
+            "icon2"
+          ) }) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.span, { layout: true, className: "font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5", children: config.id === "4" && showIcon2 ? "Copied" : config.label })
+        ] });
+      case "pulse":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { scale: isHovered ? [1, 1.25, 1] : 1 },
+              transition: { duration: 0.4, ease: "easeInOut" },
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? `${config.icon1Color} fill-current` : isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            }
+          ) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.span, { layout: true, className: "font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5", children: config.label })
+        ] });
+      case "rotate":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isHovered ? 180 : 0 }, transition: { type: "spring", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` }) }) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.span, { layout: true, className: "font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5", children: config.label })
+        ] });
+      case "shake":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: {
+                y: isHovered ? [0, -2, 0, -2, 0] : 0,
+                rotate: isHovered ? [0, -10, 10, -10, 0] : 0
+              },
+              transition: { duration: 0.4 },
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] transition-colors duration-300 ${isHovered && config.icon1Color ? config.icon1Color : isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            }
+          ) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.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 })
+        ] });
+      case "ring":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: !isHovered ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { rotate: -15, scale: 0.8, opacity: 0 },
+              animate: { rotate: 0, scale: 1, opacity: 1 },
+              exit: { rotate: 15, scale: 0.8, opacity: 0 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: "absolute inset-0 flex items-center justify-center",
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            },
+            "icon1"
+          ) : /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { rotate: -15, scale: 0.8, opacity: 0 },
+              animate: { rotate: 0, scale: 1, opacity: 1 },
+              exit: { rotate: 15, scale: 0.8, opacity: 0 },
+              transition: { type: "spring", stiffness: 600, damping: 25 },
+              className: "absolute inset-0 flex items-center justify-center",
+              children: [
+                Icon2 && /* @__PURE__ */ jsx(Icon2, { className: `w-[16px] h-[16px] ${config.icon2Color || (isLightTheme ? "text-black" : "text-[#e3e3e3]")}` }),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { scale: 0 },
+                    animate: { scale: 1 },
+                    transition: { type: "spring", stiffness: 600, damping: 15, delay: 0.1 },
+                    className: "absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full border border-transparent"
+                  }
+                )
+              ]
+            },
+            "icon2"
+          ) }) }),
+          !isMatrix && /* @__PURE__ */ jsx(motion.span, { layout: true, className: "font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5", children: config.label })
+        ] });
+      case "glare":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? "mr-2.5" : ""} ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` }),
+          !isMatrix && /* @__PURE__ */ jsx("span", { className: "font-medium tracking-tight text-[13px] whitespace-nowrap", children: config.label }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { x: isHovered ? ["-150%", "150%"] : "-150%" },
+              transition: { duration: 0.85, ease: "easeInOut", repeat: isHovered ? Infinity : 0, repeatDelay: 1 },
+              className: `absolute top-0 bottom-0 w-[50px] skew-x-[-20deg] pointer-events-none z-10`,
+              style: {
+                background: isLightTheme ? "linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent)" : "linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent)"
+              }
+            }
+          )
+        ] });
+      case "text-reveal":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0 mr-2.5", children: /* @__PURE__ */ jsx(motion.div, { animate: { rotate: isHovered ? 45 : 0 }, transition: { type: "spring", stiffness: 400, damping: 25 }, children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` }) }) }),
+          !isMatrix && /* @__PURE__ */ jsx("div", { className: "relative h-[18px] overflow-hidden", children: /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              animate: { y: isHovered ? -18 : 0 },
+              transition: { type: "spring", stiffness: 400, damping: 25 },
+              className: "flex flex-col",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}`, children: config.label }),
+                /* @__PURE__ */ jsx("span", { className: `block h-[18px] leading-[18px] font-medium tracking-tight text-[13px] whitespace-nowrap ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}`, children: config.label })
+              ]
+            }
+          ) })
+        ] });
+      case "magnetic":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${!isMatrix ? "mr-2.5" : ""} ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` }),
+          !isMatrix && /* @__PURE__ */ jsx("span", { className: "font-medium tracking-tight text-[13px] whitespace-nowrap", children: config.label })
+        ] });
+      case "expand-ring":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-[16px] h-[16px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              animate: { scale: isHovered ? 1.1 : 1 },
+              transition: { type: "spring", stiffness: 400, damping: 20 },
+              children: /* @__PURE__ */ jsx(Icon1, { className: `w-[16px] h-[16px] ${isLightTheme ? "text-black" : "text-[#e3e3e3]"}` })
+            }
+          ) }),
+          !isMatrix && /* @__PURE__ */ jsx("span", { className: "font-medium tracking-tight text-[13px] whitespace-nowrap ml-2.5", children: config.label }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: isHovered && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 1, scale: 1 },
+              animate: { opacity: 0, scale: 1.15 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.6, ease: "easeOut" },
+              className: `absolute inset-0 rounded-[40px] pointer-events-none border ${isLightTheme ? "border-black/25" : "border-white/25"}`
+            },
+            "expand-ring-div"
+          ) })
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      layout: true,
+      transition: { type: "spring", stiffness: 500, damping: 25 },
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onPointerEnter: handleMouseEnter,
+      onPointerLeave: handleMouseLeave,
+      onPointerMove: handleMouseMove,
+      onFocus: handleMouseEnter,
+      onBlur: handleMouseLeave,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      animate: {
+        paddingLeft: isMatrix ? 0 : isHovered ? 28 : 24,
+        paddingRight: isMatrix ? 0 : isHovered ? 28 : 24,
+        x: isHovered && config.interactionType === "magnetic" ? mouseCoords.x : 0,
+        y: isHovered && config.interactionType === "magnetic" ? mouseCoords.y : 0,
+        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)"
+      },
+      whileHover: { scale: 1.02 },
+      whileTap: { scale: 0.96 },
+      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]"}`,
+      children: /* @__PURE__ */ jsx(motion.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() })
+    }
+  );
+});
+export {
+  AnimatedButton
+};

package/dist/catalog/components/IconSwap.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { HTMLMotionProps } from "framer-motion";
+export declare function IconSwap({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function IconSwapItem({ children, className, ...props }: HTMLMotionProps<"span">): React.JSX.Element;

package/dist/catalog/components/IconSwap.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  IconSwap,
+  IconSwapItem
+} from "../../catalog-chunks/chunk-3TYA5TCG.js";
+export {
+  IconSwap,
+  IconSwapItem
+};

package/dist/catalog/components/InViewRender.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function InViewRender({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/catalog/components/InViewRender.js

@@ -0,0 +1,14 @@
+"use client";
+
+// .generated/catalog/components/InViewRender.tsx
+import { useRef } from "react";
+import { useInView } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+function InViewRender({ children }) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { margin: "200px", once: true });
+  return /* @__PURE__ */ jsx("div", { ref, className: "w-full h-full flex items-center justify-center", children: isInView ? children : null });
+}
+export {
+  InViewRender
+};

package/dist/catalog/components/PageTransitionCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TransitionPreset } from '../data/transitions';
+interface PageTransitionCardProps {
+    preset: TransitionPreset;
+    theme: 'dark' | 'light';
+    showToast: (msg: string) => void;
+}
+export declare const PageTransitionCard: React.FC<PageTransitionCardProps>;
+export {};