@unciatech/file-manager 0.0.39 → 0.0.40

package/dist/cli.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-'use strict';var t=require('fs'),i=require('path'),child_process=require('child_process'),g=require('readline');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var t__default=/*#__PURE__*/_interopDefault(t);var i__default=/*#__PURE__*/_interopDefault(i);var g__default=/*#__PURE__*/_interopDefault(g);var p=process.argv.slice(2),v=p[0],l=p[1],u=g__default.default.createInterface({input:process.stdin,output:process.stdout}),x=o=>new Promise(e=>u.question(o,e)),h=(o="/media")=>`"use client";
+'use strict';var e=require('fs'),t=require('path'),child_process=require('child_process'),x=require('readline');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var e__default=/*#__PURE__*/_interopDefault(e);var t__default=/*#__PURE__*/_interopDefault(t);var x__default=/*#__PURE__*/_interopDefault(x);var u=process.argv.slice(2),h=u[0],r=u[1],f=x__default.default.createInterface({input:process.stdin,output:process.stdout}),w=o=>new Promise(i=>f.question(o,i)),y=(o="/media")=>`"use client";
 
 import React, { Suspense } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -20,21 +20,21 @@ export default function FileManagerDemo() {
     </div>
   );
 }
-`;async function w(){if(v!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!l){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();t__default.default.existsSync(i__default.default.join(process.cwd(),"components"))?s=i__default.default.join(process.cwd(),"components"):t__default.default.existsSync(i__default.default.join(process.cwd(),"src","components"))&&(s=i__default.default.join(process.cwd(),"src","components"));let a=i__default.default.join(s,"FileManagerDemo.tsx");t__default.default.existsSync(a)&&(console.error(`\u274C Error: ${a} already exists.`),process.exit(1)),t__default.default.writeFileSync(a,h("/"),"utf-8"),console.log(`\u2705 Success! Created ${a}`),console.log(""),console.log("You can now import and render <FileManagerDemo /> anywhere in your application."),console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!"),process.exit(0);}console.log(`
-\u{1F680} Initializing a new application: ${l}
-`),console.log("Which framework would you like to use?"),console.log("  1) Next.js (App Router, Tailwind v4)"),console.log("  2) Vite (React, Tailwind v4)"),console.log("  3) Cancel");let o=await x(`
-Select an option (1-3): `),e=i__default.default.join(process.cwd(),l);t__default.default.existsSync(e)&&(console.error(`
-\u274C Error: Directory "${l}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),u.close(),process.exit(1));try{o==="1"?await b(l,e):o==="2"?await y(l,e):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
-\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function b(o,e){console.log(`
+`;async function b(){if(h!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!r){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();e__default.default.existsSync(t__default.default.join(process.cwd(),"components"))?s=t__default.default.join(process.cwd(),"components"):e__default.default.existsSync(t__default.default.join(process.cwd(),"src","components"))&&(s=t__default.default.join(process.cwd(),"src","components"));let n=t__default.default.join(s,"FileManagerDemo.tsx");e__default.default.existsSync(n)&&(console.error(`\u274C Error: ${n} already exists.`),process.exit(1)),e__default.default.writeFileSync(n,y("/"),"utf-8"),console.log(`\u2705 Success! Created ${n}`),console.log(""),console.log("You can now import and render <FileManagerDemo /> anywhere in your application."),console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!"),process.exit(0);}console.log(`
+\u{1F680} Initializing a new application: ${r}
+`),console.log("Which framework would you like to use?"),console.log("  1) Next.js (App Router, Tailwind v4)"),console.log("  2) Vite (React, Tailwind v4)"),console.log("  3) Cancel");let o=await w(`
+Select an option (1-3): `),i=t__default.default.join(process.cwd(),r);e__default.default.existsSync(i)&&(console.error(`
+\u274C Error: Directory "${r}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),f.close(),process.exit(1));try{o==="1"?await F(r,i):o==="2"?await M(r,i):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
+\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function F(o,i){console.log(`
 \u{1F4E6} Creating Next.js application (this may take a minute)...`),child_process.execSync(`npx create-next-app@latest ${o} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
-\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),child_process.execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:e,stdio:"inherit"});let s=i__default.default.join(e,"src","app","page.tsx");t__default.default.writeFileSync(s,`"use client";
+\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),child_process.execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:i,stdio:"inherit"});let s=t__default.default.join(i,"src","app","page.tsx");e__default.default.writeFileSync(s,`"use client";
 
 import { redirect } from "next/navigation";
 
 export default function Home() {
   redirect("/media");
 }
-`);let a=i__default.default.join(e,"src","app","media","[[...path]]");t__default.default.mkdirSync(a,{recursive:true}),t__default.default.writeFileSync(i__default.default.join(a,"page.tsx"),`"use client";
+`);let n=t__default.default.join(i,"src","app","media","[[...path]]");e__default.default.mkdirSync(n,{recursive:true}),e__default.default.writeFileSync(t__default.default.join(n,"page.tsx"),`"use client";
 
 import { Suspense, useState } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -73,7 +73,7 @@ export default function MediaPage() {
     </Suspense>
   );
 }
-`);let d=i__default.default.join(e,"src","app","modal-demo");t__default.default.mkdirSync(d,{recursive:true}),t__default.default.writeFileSync(i__default.default.join(d,"page.tsx"),`"use client";
+`);let d=t__default.default.join(i,"src","app","modal-demo");e__default.default.mkdirSync(d,{recursive:true}),e__default.default.writeFileSync(t__default.default.join(d,"page.tsx"),`"use client";
 
 import { Suspense, useState } from "react";
 import { FileManagerModal, MockProvider } from "@unciatech/file-manager";
@@ -156,8 +156,8 @@ export default function ModalDemoPage() {
     </Suspense>
   );
 }
-`);let r=i__default.default.join(e,"src","app","layout.tsx");if(t__default.default.existsSync(r)){let n=t__default.default.readFileSync(r,"utf8");n.includes("@unciatech/file-manager/styles")||(n=n.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
-$1`),t__default.default.writeFileSync(r,n));}let m=i__default.default.join(e,"src","app","globals.css");t__default.default.writeFileSync(m,`@import "tailwindcss";
+`);let l=t__default.default.join(i,"src","app","layout.tsx");if(e__default.default.existsSync(l)){let a=e__default.default.readFileSync(l,"utf8");a.includes("@unciatech/file-manager/styles")||(a=a.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
+$1`),e__default.default.writeFileSync(l,a));}let m=t__default.default.join(i,"src","app","globals.css");e__default.default.writeFileSync(m,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
 @import "tw-animate-css";
 
@@ -167,25 +167,27 @@ $1`),t__default.default.writeFileSync(r,n));}let m=i__default.default.join(e,"sr
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
-`),f(o);}async function y(o,e){console.log(`
-\u{1F4E6} Creating Vite React application...`),child_process.execSync(`npm create vite@latest ${o} -- --template react-ts`,{stdio:"inherit"}),console.log(`
-\u{1F4E6} Installing dependencies (Tailwind + File Manager + React Router)...`),child_process.execSync("npm install",{cwd:e,stdio:"inherit"}),child_process.execSync("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager react-router-dom",{cwd:e,stdio:"inherit"});let s=i__default.default.join(e,"vite.config.ts");t__default.default.writeFileSync(s,`import { defineConfig } from 'vite'
+`),g(o);}async function M(o,i){if(console.log(`
+\u{1F4E6} Creating Vite React application...`),child_process.execSync(`npx create-vite@latest ${o} --template react-ts`,{stdio:"inherit"}),!e__default.default.existsSync(i))throw new Error("Vite project creation failed.");console.log(`
+\u{1F4E6} Installing dependencies...`),child_process.execSync("npm install",{cwd:i,stdio:"inherit"}),child_process.execSync("npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react react-router-dom @unciatech/file-manager",{cwd:i,stdio:"inherit"});let s=t__default.default.join(i,"src");if(!e__default.default.existsSync(s))throw new Error("src directory not found.");console.log(`
+\u2699\uFE0F Configuring project...`),["App.css","App.tsx"].forEach(v=>{let p=t__default.default.join(s,v);e__default.default.existsSync(p)&&e__default.default.rmSync(p);});let d=t__default.default.join(i,"vite.config.ts");e__default.default.writeFileSync(d,`import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   plugins: [
     react(),
-    tailwindcss(),
+    tailwindcss()
   ],
 })
-`);let d=i__default.default.join(e,"src","index.css");t__default.default.writeFileSync(d,`@import "tailwindcss";
+`);let l=t__default.default.join(s,"index.css");e__default.default.writeFileSync(l,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
+
 @source "../node_modules/@unciatech/file-manager";
-`);let r=i__default.default.join(e,"src","main.tsx");t__default.default.writeFileSync(r,`import React from 'react'
+`);let m=t__default.default.join(s,"main.tsx");e__default.default.writeFileSync(m,`import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
-import App from './App.tsx'
+import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
@@ -195,8 +197,8 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     </BrowserRouter>
   </React.StrictMode>,
 )
-`);let m=i__default.default.join(e,"src","App.tsx");t__default.default.writeFileSync(m,`import { useState } from 'react'
-import { useNavigate, Routes, Route, Link } from 'react-router-dom'
+`);let a=t__default.default.join(s,"App.tsx");e__default.default.writeFileSync(a,`import { useState } from 'react'
+import { Routes, Route, Link, useNavigate } from 'react-router-dom'
 import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
 import type { FileMetaData } from '@unciatech/file-manager'
 
@@ -207,21 +209,21 @@ function FullPage() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <div className="flex gap-4 p-4 border-b border-border items-center justify-between">
+      <div className="flex gap-4 p-4 border-b items-center justify-between">
         <h1 className="text-xl font-bold">Full Page View</h1>
         <Link
           to="/"
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium"
+          className="px-4 py-2 bg-blue-600 text-white rounded-md"
         >
-          Back to Modal Demo
+          Back
         </Link>
       </div>
 
       <div className="flex-1 relative overflow-hidden">
         <FileManager
           provider={provider}
-          basePath="full"
-          allowedFileTypes={["images", "videos", "audios", "files"]}
+          basePath="/full"
+          allowedFileTypes={["images","videos","audios","files"]}
           viewMode="grid"
           onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
         />
@@ -232,70 +234,57 @@ function FullPage() {
 
 function ModalDemo() {
   const navigate = useNavigate()
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [selectedFiles, setSelectedFiles] = useState<FileMetaData[]>([])
+  const [open, setOpen] = useState(false)
+  const [files, setFiles] = useState<FileMetaData[]>([])
 
   return (
-    <div className="p-10 flex flex-col items-start gap-6 min-h-screen w-full bg-background text-foreground">
-      <div>
-        <h1 className="text-3xl font-bold mb-2">File Manager Demo</h1>
-        <p className="text-muted-foreground">Select files using the modal or browse the full page view.</p>
-      </div>
+    <div className="p-10 flex flex-col gap-6 min-h-screen">
+      <h1 className="text-3xl font-bold">File Manager Demo</h1>
 
       <div className="flex gap-4">
         <button
-          onClick={() => setIsModalOpen(true)}
-          className="px-6 py-2.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium shadow-sm transition-colors"
+          onClick={() => setOpen(true)}
+          className="px-6 py-2 bg-blue-600 text-white rounded-md"
         >
-          Open File Picker Modal
+          Open File Picker
         </button>
+
         <Link
           to="/full"
-          className="px-6 py-2.5 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-700 cursor-pointer text-sm font-medium transition-colors"
+          className="px-6 py-2 bg-zinc-200 rounded-md"
         >
-          Go to Full Page View
+          Full Page View
         </Link>
       </div>
 
-      {selectedFiles.length > 0 && (
-        <div className="w-full mt-8">
-          <h2 className="text-xl font-semibold mb-4 border-b pb-2">Selected Files ({selectedFiles.length})</h2>
-          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-            {selectedFiles.map((file, idx) => (
-              <div key={idx} className="border border-border rounded-lg p-3 flex flex-col items-center gap-3 bg-card shadow-sm">
-                <div className="w-full aspect-square bg-muted rounded-md overflow-hidden flex items-center justify-center relative">
-                  {file.url && file.mime?.startsWith('image/') ? (
-                    <img src={file.url} alt={file.name} className="w-full h-full object-cover" />
-                  ) : (
-                    <span className="text-muted-foreground font-mono text-xs p-2 overflow-hidden text-ellipsis">{file.ext?.toUpperCase() || 'FILE'}</span>
-                  )}
-                </div>
-                <div className="w-full text-center">
-                  <p className="text-sm font-medium truncate w-full" title={file.name}>{file.name}</p>
-                  <p className="text-xs text-muted-foreground mt-0.5">{(file.size / 1024).toFixed(1)} KB</p>
-                </div>
-              </div>
-            ))}
-          </div>
+      {files.length > 0 && (
+        <div className="grid grid-cols-4 gap-4">
+          {files.map((file, i) => (
+            <div key={i} className="border rounded p-2">
+              {file.url && file.mime?.startsWith('image/') ? (
+                <img src={file.url} className="w-full h-32 object-cover" />
+              ) : (
+                <div className="text-xs">{file.name}</div>
+              )}
+            </div>
+          ))}
         </div>
       )}
 
       <FileManagerModal
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        open={open}
+        onClose={() => setOpen(false)}
         provider={provider}
         basePath="/"
-        allowedFileTypes={["images", "videos", "audios", "files"]}
-        onFilesSelected={(files: FileMetaData[]) => {
-          setSelectedFiles(files)
-        }}
+        allowedFileTypes={["images","videos","audios","files"]}
+        onFilesSelected={(f) => setFiles(f)}
         onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
       />
     </div>
   )
 }
 
-function App() {
+export default function App() {
   return (
     <Routes>
       <Route path="/" element={<ModalDemo />} />
@@ -303,10 +292,8 @@ function App() {
     </Routes>
   )
 }
-
-export default App
-`);let n=i__default.default.join(e,"src","App.css");t__default.default.existsSync(n)&&t__default.default.unlinkSync(n),f(o,"npm run dev");}function f(o,e="npm run dev"){console.log(`
+`),g(o,"npm run dev");}function g(o,i="npm run dev"){console.log(`
 =========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
-Next steps:`),console.log(`  cd ${o}`),console.log(`  ${e}`),console.log(`
+Next steps:`),console.log(`  cd ${o}`),console.log(`  ${i}`),console.log(`
 Enjoy building! \u{1F5C2}\uFE0F
-`);}w();
+`);}b();

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import t from'fs';import i from'path';import {execSync}from'child_process';import g from'readline';var p=process.argv.slice(2),v=p[0],l=p[1],u=g.createInterface({input:process.stdin,output:process.stdout}),x=o=>new Promise(e=>u.question(o,e)),h=(o="/media")=>`"use client";
+import e from'fs';import t from'path';import {execSync}from'child_process';import x from'readline';var u=process.argv.slice(2),h=u[0],r=u[1],f=x.createInterface({input:process.stdin,output:process.stdout}),w=o=>new Promise(i=>f.question(o,i)),y=(o="/media")=>`"use client";
 
 import React, { Suspense } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -20,21 +20,21 @@ export default function FileManagerDemo() {
     </div>
   );
 }
-`;async function w(){if(v!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!l){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();t.existsSync(i.join(process.cwd(),"components"))?s=i.join(process.cwd(),"components"):t.existsSync(i.join(process.cwd(),"src","components"))&&(s=i.join(process.cwd(),"src","components"));let a=i.join(s,"FileManagerDemo.tsx");t.existsSync(a)&&(console.error(`\u274C Error: ${a} already exists.`),process.exit(1)),t.writeFileSync(a,h("/"),"utf-8"),console.log(`\u2705 Success! Created ${a}`),console.log(""),console.log("You can now import and render <FileManagerDemo /> anywhere in your application."),console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!"),process.exit(0);}console.log(`
-\u{1F680} Initializing a new application: ${l}
-`),console.log("Which framework would you like to use?"),console.log("  1) Next.js (App Router, Tailwind v4)"),console.log("  2) Vite (React, Tailwind v4)"),console.log("  3) Cancel");let o=await x(`
-Select an option (1-3): `),e=i.join(process.cwd(),l);t.existsSync(e)&&(console.error(`
-\u274C Error: Directory "${l}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),u.close(),process.exit(1));try{o==="1"?await b(l,e):o==="2"?await y(l,e):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
-\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function b(o,e){console.log(`
+`;async function b(){if(h!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!r){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();e.existsSync(t.join(process.cwd(),"components"))?s=t.join(process.cwd(),"components"):e.existsSync(t.join(process.cwd(),"src","components"))&&(s=t.join(process.cwd(),"src","components"));let n=t.join(s,"FileManagerDemo.tsx");e.existsSync(n)&&(console.error(`\u274C Error: ${n} already exists.`),process.exit(1)),e.writeFileSync(n,y("/"),"utf-8"),console.log(`\u2705 Success! Created ${n}`),console.log(""),console.log("You can now import and render <FileManagerDemo /> anywhere in your application."),console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!"),process.exit(0);}console.log(`
+\u{1F680} Initializing a new application: ${r}
+`),console.log("Which framework would you like to use?"),console.log("  1) Next.js (App Router, Tailwind v4)"),console.log("  2) Vite (React, Tailwind v4)"),console.log("  3) Cancel");let o=await w(`
+Select an option (1-3): `),i=t.join(process.cwd(),r);e.existsSync(i)&&(console.error(`
+\u274C Error: Directory "${r}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),f.close(),process.exit(1));try{o==="1"?await F(r,i):o==="2"?await M(r,i):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
+\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function F(o,i){console.log(`
 \u{1F4E6} Creating Next.js application (this may take a minute)...`),execSync(`npx create-next-app@latest ${o} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
-\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:e,stdio:"inherit"});let s=i.join(e,"src","app","page.tsx");t.writeFileSync(s,`"use client";
+\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:i,stdio:"inherit"});let s=t.join(i,"src","app","page.tsx");e.writeFileSync(s,`"use client";
 
 import { redirect } from "next/navigation";
 
 export default function Home() {
   redirect("/media");
 }
-`);let a=i.join(e,"src","app","media","[[...path]]");t.mkdirSync(a,{recursive:true}),t.writeFileSync(i.join(a,"page.tsx"),`"use client";
+`);let n=t.join(i,"src","app","media","[[...path]]");e.mkdirSync(n,{recursive:true}),e.writeFileSync(t.join(n,"page.tsx"),`"use client";
 
 import { Suspense, useState } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -73,7 +73,7 @@ export default function MediaPage() {
     </Suspense>
   );
 }
-`);let d=i.join(e,"src","app","modal-demo");t.mkdirSync(d,{recursive:true}),t.writeFileSync(i.join(d,"page.tsx"),`"use client";
+`);let d=t.join(i,"src","app","modal-demo");e.mkdirSync(d,{recursive:true}),e.writeFileSync(t.join(d,"page.tsx"),`"use client";
 
 import { Suspense, useState } from "react";
 import { FileManagerModal, MockProvider } from "@unciatech/file-manager";
@@ -156,8 +156,8 @@ export default function ModalDemoPage() {
     </Suspense>
   );
 }
-`);let r=i.join(e,"src","app","layout.tsx");if(t.existsSync(r)){let n=t.readFileSync(r,"utf8");n.includes("@unciatech/file-manager/styles")||(n=n.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
-$1`),t.writeFileSync(r,n));}let m=i.join(e,"src","app","globals.css");t.writeFileSync(m,`@import "tailwindcss";
+`);let l=t.join(i,"src","app","layout.tsx");if(e.existsSync(l)){let a=e.readFileSync(l,"utf8");a.includes("@unciatech/file-manager/styles")||(a=a.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
+$1`),e.writeFileSync(l,a));}let m=t.join(i,"src","app","globals.css");e.writeFileSync(m,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
 @import "tw-animate-css";
 
@@ -167,25 +167,27 @@ $1`),t.writeFileSync(r,n));}let m=i.join(e,"src","app","globals.css");t.writeFil
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
-`),f(o);}async function y(o,e){console.log(`
-\u{1F4E6} Creating Vite React application...`),execSync(`npm create vite@latest ${o} -- --template react-ts`,{stdio:"inherit"}),console.log(`
-\u{1F4E6} Installing dependencies (Tailwind + File Manager + React Router)...`),execSync("npm install",{cwd:e,stdio:"inherit"}),execSync("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager react-router-dom",{cwd:e,stdio:"inherit"});let s=i.join(e,"vite.config.ts");t.writeFileSync(s,`import { defineConfig } from 'vite'
+`),g(o);}async function M(o,i){if(console.log(`
+\u{1F4E6} Creating Vite React application...`),execSync(`npx create-vite@latest ${o} --template react-ts`,{stdio:"inherit"}),!e.existsSync(i))throw new Error("Vite project creation failed.");console.log(`
+\u{1F4E6} Installing dependencies...`),execSync("npm install",{cwd:i,stdio:"inherit"}),execSync("npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react react-router-dom @unciatech/file-manager",{cwd:i,stdio:"inherit"});let s=t.join(i,"src");if(!e.existsSync(s))throw new Error("src directory not found.");console.log(`
+\u2699\uFE0F Configuring project...`),["App.css","App.tsx"].forEach(v=>{let p=t.join(s,v);e.existsSync(p)&&e.rmSync(p);});let d=t.join(i,"vite.config.ts");e.writeFileSync(d,`import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   plugins: [
     react(),
-    tailwindcss(),
+    tailwindcss()
   ],
 })
-`);let d=i.join(e,"src","index.css");t.writeFileSync(d,`@import "tailwindcss";
+`);let l=t.join(s,"index.css");e.writeFileSync(l,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
+
 @source "../node_modules/@unciatech/file-manager";
-`);let r=i.join(e,"src","main.tsx");t.writeFileSync(r,`import React from 'react'
+`);let m=t.join(s,"main.tsx");e.writeFileSync(m,`import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
-import App from './App.tsx'
+import App from './App'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
@@ -195,8 +197,8 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     </BrowserRouter>
   </React.StrictMode>,
 )
-`);let m=i.join(e,"src","App.tsx");t.writeFileSync(m,`import { useState } from 'react'
-import { useNavigate, Routes, Route, Link } from 'react-router-dom'
+`);let a=t.join(s,"App.tsx");e.writeFileSync(a,`import { useState } from 'react'
+import { Routes, Route, Link, useNavigate } from 'react-router-dom'
 import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
 import type { FileMetaData } from '@unciatech/file-manager'
 
@@ -207,21 +209,21 @@ function FullPage() {
 
   return (
     <div className="h-screen w-full flex flex-col">
-      <div className="flex gap-4 p-4 border-b border-border items-center justify-between">
+      <div className="flex gap-4 p-4 border-b items-center justify-between">
         <h1 className="text-xl font-bold">Full Page View</h1>
         <Link
           to="/"
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium"
+          className="px-4 py-2 bg-blue-600 text-white rounded-md"
         >
-          Back to Modal Demo
+          Back
         </Link>
       </div>
 
       <div className="flex-1 relative overflow-hidden">
         <FileManager
           provider={provider}
-          basePath="full"
-          allowedFileTypes={["images", "videos", "audios", "files"]}
+          basePath="/full"
+          allowedFileTypes={["images","videos","audios","files"]}
           viewMode="grid"
           onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
         />
@@ -232,70 +234,57 @@ function FullPage() {
 
 function ModalDemo() {
   const navigate = useNavigate()
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [selectedFiles, setSelectedFiles] = useState<FileMetaData[]>([])
+  const [open, setOpen] = useState(false)
+  const [files, setFiles] = useState<FileMetaData[]>([])
 
   return (
-    <div className="p-10 flex flex-col items-start gap-6 min-h-screen w-full bg-background text-foreground">
-      <div>
-        <h1 className="text-3xl font-bold mb-2">File Manager Demo</h1>
-        <p className="text-muted-foreground">Select files using the modal or browse the full page view.</p>
-      </div>
+    <div className="p-10 flex flex-col gap-6 min-h-screen">
+      <h1 className="text-3xl font-bold">File Manager Demo</h1>
 
       <div className="flex gap-4">
         <button
-          onClick={() => setIsModalOpen(true)}
-          className="px-6 py-2.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium shadow-sm transition-colors"
+          onClick={() => setOpen(true)}
+          className="px-6 py-2 bg-blue-600 text-white rounded-md"
         >
-          Open File Picker Modal
+          Open File Picker
         </button>
+
         <Link
           to="/full"
-          className="px-6 py-2.5 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-700 cursor-pointer text-sm font-medium transition-colors"
+          className="px-6 py-2 bg-zinc-200 rounded-md"
         >
-          Go to Full Page View
+          Full Page View
         </Link>
       </div>
 
-      {selectedFiles.length > 0 && (
-        <div className="w-full mt-8">
-          <h2 className="text-xl font-semibold mb-4 border-b pb-2">Selected Files ({selectedFiles.length})</h2>
-          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-            {selectedFiles.map((file, idx) => (
-              <div key={idx} className="border border-border rounded-lg p-3 flex flex-col items-center gap-3 bg-card shadow-sm">
-                <div className="w-full aspect-square bg-muted rounded-md overflow-hidden flex items-center justify-center relative">
-                  {file.url && file.mime?.startsWith('image/') ? (
-                    <img src={file.url} alt={file.name} className="w-full h-full object-cover" />
-                  ) : (
-                    <span className="text-muted-foreground font-mono text-xs p-2 overflow-hidden text-ellipsis">{file.ext?.toUpperCase() || 'FILE'}</span>
-                  )}
-                </div>
-                <div className="w-full text-center">
-                  <p className="text-sm font-medium truncate w-full" title={file.name}>{file.name}</p>
-                  <p className="text-xs text-muted-foreground mt-0.5">{(file.size / 1024).toFixed(1)} KB</p>
-                </div>
-              </div>
-            ))}
-          </div>
+      {files.length > 0 && (
+        <div className="grid grid-cols-4 gap-4">
+          {files.map((file, i) => (
+            <div key={i} className="border rounded p-2">
+              {file.url && file.mime?.startsWith('image/') ? (
+                <img src={file.url} className="w-full h-32 object-cover" />
+              ) : (
+                <div className="text-xs">{file.name}</div>
+              )}
+            </div>
+          ))}
         </div>
       )}
 
       <FileManagerModal
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        open={open}
+        onClose={() => setOpen(false)}
         provider={provider}
         basePath="/"
-        allowedFileTypes={["images", "videos", "audios", "files"]}
-        onFilesSelected={(files: FileMetaData[]) => {
-          setSelectedFiles(files)
-        }}
+        allowedFileTypes={["images","videos","audios","files"]}
+        onFilesSelected={(f) => setFiles(f)}
         onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
       />
     </div>
   )
 }
 
-function App() {
+export default function App() {
   return (
     <Routes>
       <Route path="/" element={<ModalDemo />} />
@@ -303,10 +292,8 @@ function App() {
     </Routes>
   )
 }
-
-export default App
-`);let n=i.join(e,"src","App.css");t.existsSync(n)&&t.unlinkSync(n),f(o,"npm run dev");}function f(o,e="npm run dev"){console.log(`
+`),g(o,"npm run dev");}function g(o,i="npm run dev"){console.log(`
 =========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
-Next steps:`),console.log(`  cd ${o}`),console.log(`  ${e}`),console.log(`
+Next steps:`),console.log(`  cd ${o}`),console.log(`  ${i}`),console.log(`
 Enjoy building! \u{1F5C2}\uFE0F
-`);}w();
+`);}b();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unciatech/file-manager",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Modern file manager component for React applications",
   "author": "Avi",
   "license": "MIT",
@@ -21,7 +21,9 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "bin": "bin/file-manager.js",
+  "bin": {
+    "file-manager": "./dist/cli.cjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -41,7 +43,6 @@
   },
   "files": [
     "dist",
-    "bin",
     "README.md"
   ],
   "sideEffects": [

package/bin/file-manager.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-import('../dist/cli.js');