@akshatbuilds/sonix 1.0.2 → 1.0.4

package/README.md

@@ -11,7 +11,7 @@ Micro UX audio for interactive web applications. Zero dependencies. Copy-paste r
 - **14 sounds** — clicks, hovers, success, error, notifications, transitions, and more
 - **Zero dependencies** — every snippet is standalone Web Audio API code
 - **Copy & paste** — hit the copy button on any card to get production-ready code
-- **CLI** — `npx sonix add pop` to scaffold sounds into your project
+- **CLI** — `npx @akshatbuilds/sonix add pop` to scaffold sounds into your project
 - **Framework agnostic** — works with React, Vue, Svelte, vanilla JS, anything
 - **Dark mode** — with cinematic circular reveal transition
 - **`prefers-reduced-motion`** — respects user accessibility preferences
@@ -36,7 +36,7 @@ osc.stop(ctx.currentTime + 0.15);
 ### MP3 (for button clicks)
 
 ```js
-const audio = new Audio('/click1.mp3');
+const audio = new Audio('/sonix/click1.mp3');
 audio.volume = 0.5;
 audio.play();
 ```
@@ -44,10 +44,10 @@ audio.play();
 ### React Hook
 
 ```tsx
-import { playSound } from './lib/sounds';
+import { playPop } from '@/components/sonix';
 
 function MyButton() {
-  return <button onClick={() => playSound('pop')}>Click</button>;
+  return <button onClick={playPop}>Click</button>;
 }
 ```
 
@@ -61,7 +61,8 @@ npx @akshatbuilds/sonix add pop           # Add a single sound
 npx @akshatbuilds/sonix add pop swoosh    # Add multiple sounds
 ```
 
-Sounds are written to `lib/sounds/` as standalone files — no runtime dependency.
+Sounds are written to `components/sonix/` as standalone files — no runtime dependency.
+MP3 assets are downloaded automatically to `public/sonix/`.
 
 ## Available Sounds
 
@@ -93,7 +94,7 @@ To manually control sound:
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 if (!prefersReducedMotion) {
-  playSound('pop');
+  playPop();
 }
 ```
 

package/cli/index.mjs

@@ -4,20 +4,23 @@
  * sonix CLI — add sounds to your project
  *
  * Usage:
- *   npx sonix add <sound-name>       Add a single sound
- *   npx sonix add <s1> <s2> ...      Add multiple sounds
- *   npx sonix list                   List all available sounds
+ *   npx @akshatbuilds/sonix add <sound-name>       Add a single sound
+ *   npx @akshatbuilds/sonix add <s1> <s2> ...      Add multiple sounds
+ *   npx @akshatbuilds/sonix list                   List all available sounds
  *
  * Sounds are fetched from the public registry and written
  * to your project as standalone files — no runtime dependency.
  */
 
-import { writeFileSync, mkdirSync, existsSync } from "node:fs";
-import { join } from "node:path";
+import { writeFileSync, mkdirSync, existsSync, readdirSync } from "node:fs";
+import { join, dirname, relative } from "node:path";
 
 const REGISTRY_URL =
   process.env.SONIX_REGISTRY ||
   "https://soundcomponents.vercel.app/registry";
+const DEFAULT_OUT_DIR = process.env.SONIX_OUT_DIR || "components";
+const SOUNDS_SUBDIR = "sonix";
+const ASSETS_SUBDIR = "sonix";
 
 const COLORS = {
   reset: "\x1b[0m",
@@ -51,6 +54,16 @@ async function fetchJSON(url) {
   return res.json();
 }
 
+async function fetchBinary(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status}`);
+  return Buffer.from(await res.arrayBuffer());
+}
+
+function getRegistryHost() {
+  return REGISTRY_URL.replace(/\/registry\/?$/, "");
+}
+
 async function listSounds() {
   try {
     const registry = await fetchJSON(`${REGISTRY_URL}/index.json`);
@@ -80,11 +93,16 @@ async function listSounds() {
 }
 
 async function addSounds(names) {
-  const outDir = join(process.cwd(), "lib", "sounds");
+  const outDir = join(process.cwd(), DEFAULT_OUT_DIR, SOUNDS_SUBDIR);
+  const assetsDir = join(process.cwd(), "public", ASSETS_SUBDIR);
 
   if (!existsSync(outDir)) {
     mkdirSync(outDir, { recursive: true });
-    success(`Created ${COLORS.cyan}lib/sounds/${COLORS.reset}`);
+    success(`Created ${COLORS.cyan}${DEFAULT_OUT_DIR}/${SOUNDS_SUBDIR}/${COLORS.reset}`);
+  }
+
+  if (!existsSync(assetsDir)) {
+    mkdirSync(assetsDir, { recursive: true });
   }
 
   for (const name of names) {
@@ -93,26 +111,73 @@ async function addSounds(names) {
 
       for (const file of sound.files) {
         const filePath = join(outDir, file.name);
+        mkdirSync(dirname(filePath), { recursive: true });
         writeFileSync(filePath, file.content + "\n");
-        success(`Added ${COLORS.cyan}lib/sounds/${file.name}${COLORS.reset}`);
+        success(
+          `Added ${COLORS.cyan}${DEFAULT_OUT_DIR}/${SOUNDS_SUBDIR}/${file.name}${COLORS.reset}`
+        );
       }
 
       if (sound.assets?.length) {
-        warn(
-          `${name} requires asset files: ${sound.assets.join(", ")} — download them from the website and put in your public/ folder.`
-        );
+        for (const assetName of sound.assets) {
+          const assetUrl = `${getRegistryHost()}/${assetName}`;
+          try {
+            const data = await fetchBinary(assetUrl);
+            writeFileSync(join(assetsDir, assetName), data);
+            success(`Added ${COLORS.cyan}public/${ASSETS_SUBDIR}/${assetName}${COLORS.reset}`);
+          } catch (assetErr) {
+            warn(`Could not fetch ${assetName} (${assetErr.message}). Download it manually to public/${ASSETS_SUBDIR}/.`);
+          }
+        }
       }
     } catch (err) {
       error(`Could not add "${name}": ${err.message}`);
     }
   }
 
+  const soundFiles = collectSoundFiles(outDir);
+  const uniqueExports = new Map();
+  for (const filePath of soundFiles) {
+    const importPath = relative(outDir, filePath).replace(/\\/g, "/").replace(/\.ts$/, "");
+    const base = importPath.split("/").pop() || "";
+    uniqueExports.set(`play${toPascal(base)}`, { exportName: `play${toPascal(base)}`, importPath });
+  }
+  const indexPath = join(outDir, "index.ts");
+  const indexContent = Array.from(uniqueExports.values())
+    .sort((a, b) => a.exportName.localeCompare(b.exportName))
+    .map((item) => `export { ${item.exportName} } from "./${item.importPath}";`)
+    .join("\n");
+  if (indexContent) {
+    writeFileSync(indexPath, `${indexContent}\n`);
+    success(`Added ${COLORS.cyan}${DEFAULT_OUT_DIR}/${SOUNDS_SUBDIR}/index.ts${COLORS.reset}`);
+  }
+
   log("");
   log(`${COLORS.dim}Import and use:${COLORS.reset}`);
-  log(`${COLORS.dim}  import { play${toPascal(names[0])} } from './lib/sounds/${names[0]}';${COLORS.reset}`);
+  log(
+    `${COLORS.dim}  import { play${toPascal(names[0])} } from '@/components/sonix';${COLORS.reset}`
+  );
+  log(
+    `${COLORS.dim}  // If you don't use @ alias: ../../components/sonix${COLORS.reset}`
+  );
   log("");
 }
 
+function collectSoundFiles(dir) {
+  const files = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...collectSoundFiles(full));
+      continue;
+    }
+    if (entry.isFile() && entry.name.endsWith(".ts") && entry.name !== "index.ts") {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
 function toPascal(str) {
   return str
     .split("-")
@@ -129,9 +194,9 @@ if (!command || command === "help" || command === "--help") {
   log("");
   log(`${COLORS.bold}sonix${COLORS.reset} — UI sound effects for your app`);
   log("");
-  log(`  ${COLORS.cyan}npx sonix list${COLORS.reset}              List all sounds`);
-  log(`  ${COLORS.cyan}npx sonix add <name>${COLORS.reset}        Add a sound to your project`);
-  log(`  ${COLORS.cyan}npx sonix add pop swoosh${COLORS.reset}    Add multiple sounds`);
+  log(`  ${COLORS.cyan}npx @akshatbuilds/sonix list${COLORS.reset}              List all sounds`);
+  log(`  ${COLORS.cyan}npx @akshatbuilds/sonix add <name>${COLORS.reset}        Add a sound to your project`);
+  log(`  ${COLORS.cyan}npx @akshatbuilds/sonix add pop swoosh${COLORS.reset}    Add multiple sounds`);
   log("");
   process.exit(0);
 }
@@ -141,11 +206,11 @@ if (command === "list") {
 } else if (command === "add") {
   const names = args.slice(1);
   if (names.length === 0) {
-    error("Specify at least one sound name. Run `npx sonix list` to see options.");
+    error("Specify at least one sound name. Run `npx @akshatbuilds/sonix list` to see options.");
     process.exit(1);
   }
   await addSounds(names);
 } else {
-  error(`Unknown command: ${command}. Run \`npx sonix --help\`.`);
+  error(`Unknown command: ${command}. Run \`npx @akshatbuilds/sonix --help\`.`);
   process.exit(1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akshatbuilds/sonix",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Micro UX sound effects for interactive web applications. Zero dependencies, copy-paste ready.",
   "license": "MIT",
   "repository": {
@@ -20,63 +20,34 @@
   "bin": {
     "@akshatbuilds/sonix": "./cli/index.mjs"
   },
+  "files": [
+    "cli",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "build:registry": "node scripts/build-registry.mjs"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-accordion": "1.2.2",
-    "@radix-ui/react-alert-dialog": "1.1.4",
-    "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-avatar": "1.1.2",
     "@radix-ui/react-checkbox": "1.1.3",
-    "@radix-ui/react-collapsible": "1.1.2",
-    "@radix-ui/react-context-menu": "2.2.4",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-hover-card": "1.1.4",
-    "@radix-ui/react-label": "2.1.1",
-    "@radix-ui/react-menubar": "1.1.4",
-    "@radix-ui/react-navigation-menu": "1.2.3",
-    "@radix-ui/react-popover": "1.1.4",
-    "@radix-ui/react-progress": "1.1.1",
-    "@radix-ui/react-radio-group": "1.2.2",
-    "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.4",
-    "@radix-ui/react-separator": "1.1.1",
     "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-slot": "1.1.1",
     "@radix-ui/react-switch": "1.1.2",
-    "@radix-ui/react-tabs": "1.1.2",
-    "@radix-ui/react-toast": "1.2.4",
-    "@radix-ui/react-toggle": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.6",
     "@vercel/analytics": "^1.6.1",
-    "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "1.1.1",
-    "date-fns": "4.1.0",
-    "embla-carousel-react": "8.5.1",
-    "input-otp": "1.4.1",
     "lucide-react": "^0.544.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",
     "react": "19.2.3",
-    "react-day-picker": "8.10.1",
     "react-dom": "19.2.3",
-    "react-hook-form": "^7.54.1",
-    "react-resizable-panels": "^2.1.7",
-    "recharts": "2.15.0",
-    "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.13",

package/app/globals.css

@@ -1,110 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Circular reveal via View Transition API for cinematic theme change */
-::view-transition-old(root) {
-  animation: none;
-  z-index: 1;
-}
-
-::view-transition-new(root) {
-  animation: none;
-  z-index: 9999;
-  mix-blend-mode: normal;
-}
-
-/* Honor prefers-reduced-motion (Web Interface Guidelines: Animation) */
-@media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(root),
-  ::view-transition-new(root) {
-    animation: none !important;
-  }
-}

package/app/layout.tsx

@@ -1,54 +0,0 @@
-import React from "react"
-import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
-import { ThemeProvider } from '@/components/theme-provider'
-import { Analytics } from '@vercel/analytics/next'
-
-import './globals.css'
-
-const geist = Geist({ subsets: ['latin'], variable: '--font-geist' })
-const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-geist-mono' })
-
-export const metadata: Metadata = {
-  title: 'Sonix — UI Sound Effects Library',
-  description: 'Micro UX audio interactions for web apps. 14 sounds, zero dependencies, copy-paste ready.',
-  metadataBase: new URL('https://abhi-yo.github.io/sound-library'),
-  openGraph: {
-    title: 'Sonix — UI Sound Effects Library',
-    description: 'Micro UX audio interactions for web apps. 14 sounds, zero dependencies, copy-paste ready.',
-    type: 'website',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Sonix — UI Sound Effects Library',
-    description: 'Micro UX audio interactions for web apps. 14 sounds, zero dependencies, copy-paste ready.',
-  },
-}
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  return (
-    <html lang="en" suppressHydrationWarning className={`${geist.variable} ${geistMono.variable}`}>
-      <head>
-        <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
-        <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
-      </head>
-      <body className="font-sans antialiased">
-        <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground">
-          Skip to main content
-        </a>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-        >
-          {children}
-        </ThemeProvider>
-        <Analytics />
-      </body>
-    </html>
-  )
-}

package/app/page.tsx

@@ -1,40 +0,0 @@
-import { SoundsGallery } from '@/components/sounds-gallery';
-import { UsageGuide } from '@/components/usage-guide';
-import { ThemeToggle } from '@/components/theme-toggle';
-
-export const metadata = {
-  title: 'UI Sound Effects Library',
-  description: 'Tiny audio interactions for web apps. Button clicks, hover blips, success sounds, and error feedback.',
-};
-
-export default function Home() {
-  return (
-    <main id="main-content" className="flex min-h-screen flex-col bg-background text-foreground">
-      <div className="flex flex-col gap-12 px-4 py-12 sm:px-8 lg:px-16">
-        {/* Header */}
-        <div className="flex flex-col gap-4 border-b border-border pb-8">
-          <div className="flex items-center justify-between">
-            <h1 className="font-sans text-4xl font-bold tracking-tight sm:text-5xl">
-              Sound Effects
-            </h1>
-            <ThemeToggle />
-          </div>
-          <p className="max-w-2xl text-lg text-muted-foreground">
-            Micro UX audio for interactive web applications. Click to preview, copy code to use.
-          </p>
-        </div>
-
-        {/* Gallery */}
-        <SoundsGallery />
-
-        {/* Usage Guide */}
-        <UsageGuide />
-
-        {/* Footer */}
-        <div className="border-t border-border py-8 text-center text-sm text-muted-foreground">
-          <p>Click the play button to preview. Use the copy button to get code for your project.</p>
-        </div>
-      </div>
-    </main>
-  );
-}

package/app/usage/page.tsx

@@ -1,9 +0,0 @@
-import { UsageGuide } from '@/components/usage-guide';
-
-export default function UsagePage() {
-  return (
-    <div className="container mx-auto px-4 py-12">
-      <UsageGuide />
-    </div>
-  );
-}