@unciatech/file-manager 0.0.39 → 0.0.41

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'),o=require('path'),child_process=require('child_process'),f=require('readline');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var e__default=/*#__PURE__*/_interopDefault(e);var o__default=/*#__PURE__*/_interopDefault(o);var f__default=/*#__PURE__*/_interopDefault(f);var m=process.argv.slice(2),g=m[0],a=m[1],p=f__default.default.createInterface({input:process.stdin,output:process.stdout}),x=t=>new Promise(i=>p.question(t,i)),v=(t="/media")=>`"use client";
 
 import React, { Suspense } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -14,27 +14,27 @@ export default function FileManagerDemo() {
           allowedFileTypes={["audios", "videos", "images", "files"]}
           viewMode="grid"
           provider={mockProvider}
-          basePath="${o}"
+          basePath="${t}"
         />
       </Suspense>
     </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(`
-\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";
+`;async function w(){if(g!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!a){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();e__default.default.existsSync(o__default.default.join(process.cwd(),"components"))?s=o__default.default.join(process.cwd(),"components"):e__default.default.existsSync(o__default.default.join(process.cwd(),"src","components"))&&(s=o__default.default.join(process.cwd(),"src","components"));let n=o__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,v("/"),"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: ${a}
+`),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 t=await x(`
+Select an option (1-3): `),i=o__default.default.join(process.cwd(),a);e__default.default.existsSync(i)&&(console.error(`
+\u274C Error: Directory "${a}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),p.close(),process.exit(1));try{t==="1"?await h(a,i):t==="2"?await y(a,i):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
+\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function h(t,i){console.log(`
+\u{1F4E6} Creating Next.js application (this may take a minute)...`),child_process.execSync(`npx create-next-app@latest ${t} --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:i,stdio:"inherit"});let s=o__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=o__default.default.join(i,"src","app","media","[[...path]]");e__default.default.mkdirSync(n,{recursive:true}),e__default.default.writeFileSync(o__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 c=o__default.default.join(i,"src","app","modal-demo");e__default.default.mkdirSync(c,{recursive:true}),e__default.default.writeFileSync(o__default.default.join(c,"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 r=o__default.default.join(i,"src","app","layout.tsx");if(e__default.default.existsSync(r)){let d=e__default.default.readFileSync(r,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
+$1`),e__default.default.writeFileSync(r,d));}let u=o__default.default.join(i,"src","app","globals.css");e__default.default.writeFileSync(u,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
 @import "tw-animate-css";
 
@@ -167,146 +167,47 @@ $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'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss(),
-  ],
-})
-`);let d=i__default.default.join(e,"src","index.css");t__default.default.writeFileSync(d,`@import "tailwindcss";
+`),S(t);}async function y(t,i){if(console.log(`
+\u{1F4E6} Creating Vite React application...`),child_process.execSync(`npm create vite@latest ${t} -- --template react-ts`,{stdio:"inherit"}),!e__default.default.existsSync(i))throw new Error("Project creation failed");process.chdir(i),console.log(`
+\u{1F4E6} Installing dependencies...`),child_process.execSync("npm install",{stdio:"inherit"}),child_process.execSync("npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react react-router-dom @unciatech/file-manager",{stdio:"inherit"}),console.log(`
+\u2699\uFE0F Configuring Vite project...`);let s=o__default.default.join(i,"src");["App.tsx","App.css"].forEach(c=>{let r=o__default.default.join(s,c);e__default.default.existsSync(r)&&e__default.default.unlinkSync(r);}),e__default.default.writeFileSync(o__default.default.join(s,"index.css"),`@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'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import App from './App.tsx'
-import './index.css'
+`),e__default.default.writeFileSync(o__default.default.join(s,"main.tsx"),`import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
     </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'
-import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
-import type { FileMetaData } from '@unciatech/file-manager'
-
-const provider = new MockProvider()
-
-function FullPage() {
-  const navigate = useNavigate()
-
-  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">
-        <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"
-        >
-          Back to Modal Demo
-        </Link>
-      </div>
-
-      <div className="flex-1 relative overflow-hidden">
-        <FileManager
-          provider={provider}
-          basePath="full"
-          allowedFileTypes={["images", "videos", "audios", "files"]}
-          viewMode="grid"
-          onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
-        />
-      </div>
-    </div>
-  )
-}
+  </React.StrictMode>
+);
+`),e__default.default.writeFileSync(o__default.default.join(s,"App.tsx"),`import { FileManager, MockProvider } from "@unciatech/file-manager";
 
-function ModalDemo() {
-  const navigate = useNavigate()
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [selectedFiles, setSelectedFiles] = useState<FileMetaData[]>([])
+const provider = new MockProvider();
 
+export default function App() {
   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="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"
-        >
-          Open File Picker Modal
-        </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"
-        >
-          Go to 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>
-        </div>
-      )}
-
-      <FileManagerModal
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+    <div className="h-screen w-full">
+      <FileManager
         provider={provider}
         basePath="/"
-        allowedFileTypes={["images", "videos", "audios", "files"]}
-        onFilesSelected={(files: FileMetaData[]) => {
-          setSelectedFiles(files)
-        }}
-        onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
+        viewMode="grid"
+        allowedFileTypes={["images","videos","audios","files"]}
       />
     </div>
-  )
-}
-
-function App() {
-  return (
-    <Routes>
-      <Route path="/" element={<ModalDemo />} />
-      <Route path="/full/*" element={<FullPage />} />
-    </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(`
+`),console.log(`
+=================================`),console.log("\u{1F389} Vite File Manager ready!"),console.log(`=================================
+`),console.log(`cd ${t}`),console.log(`npm run dev
+`);}function S(t,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 ${t}`),console.log(`  ${i}`),console.log(`
 Enjoy building! \u{1F5C2}\uFE0F
 `);}w();

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 o from'path';import {execSync}from'child_process';import f from'readline';var m=process.argv.slice(2),g=m[0],a=m[1],p=f.createInterface({input:process.stdin,output:process.stdout}),x=t=>new Promise(i=>p.question(t,i)),v=(t="/media")=>`"use client";
 
 import React, { Suspense } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -14,27 +14,27 @@ export default function FileManagerDemo() {
           allowedFileTypes={["audios", "videos", "images", "files"]}
           viewMode="grid"
           provider={mockProvider}
-          basePath="${o}"
+          basePath="${t}"
         />
       </Suspense>
     </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(`
-\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";
+`;async function w(){if(g!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!a){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();e.existsSync(o.join(process.cwd(),"components"))?s=o.join(process.cwd(),"components"):e.existsSync(o.join(process.cwd(),"src","components"))&&(s=o.join(process.cwd(),"src","components"));let n=o.join(s,"FileManagerDemo.tsx");e.existsSync(n)&&(console.error(`\u274C Error: ${n} already exists.`),process.exit(1)),e.writeFileSync(n,v("/"),"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: ${a}
+`),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 t=await x(`
+Select an option (1-3): `),i=o.join(process.cwd(),a);e.existsSync(i)&&(console.error(`
+\u274C Error: Directory "${a}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),p.close(),process.exit(1));try{t==="1"?await h(a,i):t==="2"?await y(a,i):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
+\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function h(t,i){console.log(`
+\u{1F4E6} Creating Next.js application (this may take a minute)...`),execSync(`npx create-next-app@latest ${t} --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:i,stdio:"inherit"});let s=o.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=o.join(i,"src","app","media","[[...path]]");e.mkdirSync(n,{recursive:true}),e.writeFileSync(o.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 c=o.join(i,"src","app","modal-demo");e.mkdirSync(c,{recursive:true}),e.writeFileSync(o.join(c,"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 r=o.join(i,"src","app","layout.tsx");if(e.existsSync(r)){let d=e.readFileSync(r,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
+$1`),e.writeFileSync(r,d));}let u=o.join(i,"src","app","globals.css");e.writeFileSync(u,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
 @import "tw-animate-css";
 
@@ -167,146 +167,47 @@ $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'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss(),
-  ],
-})
-`);let d=i.join(e,"src","index.css");t.writeFileSync(d,`@import "tailwindcss";
+`),S(t);}async function y(t,i){if(console.log(`
+\u{1F4E6} Creating Vite React application...`),execSync(`npm create vite@latest ${t} -- --template react-ts`,{stdio:"inherit"}),!e.existsSync(i))throw new Error("Project creation failed");process.chdir(i),console.log(`
+\u{1F4E6} Installing dependencies...`),execSync("npm install",{stdio:"inherit"}),execSync("npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react react-router-dom @unciatech/file-manager",{stdio:"inherit"}),console.log(`
+\u2699\uFE0F Configuring Vite project...`);let s=o.join(i,"src");["App.tsx","App.css"].forEach(c=>{let r=o.join(s,c);e.existsSync(r)&&e.unlinkSync(r);}),e.writeFileSync(o.join(s,"index.css"),`@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'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import App from './App.tsx'
-import './index.css'
+`),e.writeFileSync(o.join(s,"main.tsx"),`import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
     </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'
-import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
-import type { FileMetaData } from '@unciatech/file-manager'
-
-const provider = new MockProvider()
-
-function FullPage() {
-  const navigate = useNavigate()
-
-  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">
-        <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"
-        >
-          Back to Modal Demo
-        </Link>
-      </div>
-
-      <div className="flex-1 relative overflow-hidden">
-        <FileManager
-          provider={provider}
-          basePath="full"
-          allowedFileTypes={["images", "videos", "audios", "files"]}
-          viewMode="grid"
-          onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
-        />
-      </div>
-    </div>
-  )
-}
+  </React.StrictMode>
+);
+`),e.writeFileSync(o.join(s,"App.tsx"),`import { FileManager, MockProvider } from "@unciatech/file-manager";
 
-function ModalDemo() {
-  const navigate = useNavigate()
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [selectedFiles, setSelectedFiles] = useState<FileMetaData[]>([])
+const provider = new MockProvider();
 
+export default function App() {
   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="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"
-        >
-          Open File Picker Modal
-        </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"
-        >
-          Go to 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>
-        </div>
-      )}
-
-      <FileManagerModal
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+    <div className="h-screen w-full">
+      <FileManager
         provider={provider}
         basePath="/"
-        allowedFileTypes={["images", "videos", "audios", "files"]}
-        onFilesSelected={(files: FileMetaData[]) => {
-          setSelectedFiles(files)
-        }}
-        onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
+        viewMode="grid"
+        allowedFileTypes={["images","videos","audios","files"]}
       />
     </div>
-  )
-}
-
-function App() {
-  return (
-    <Routes>
-      <Route path="/" element={<ModalDemo />} />
-      <Route path="/full/*" element={<FullPage />} />
-    </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(`
+`),console.log(`
+=================================`),console.log("\u{1F389} Vite File Manager ready!"),console.log(`=================================
+`),console.log(`cd ${t}`),console.log(`npm run dev
+`);}function S(t,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 ${t}`),console.log(`  ${i}`),console.log(`
 Enjoy building! \u{1F5C2}\uFE0F
 `);}w();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unciatech/file-manager",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "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');