@unciatech/file-manager 0.0.14 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cli.js +124 -21
  2. package/dist/cli.mjs +123 -20
  3. package/dist/index.js +27 -26
  4. package/dist/index.mjs +36 -35
  5. package/dist/styles.css +96 -52
  6. package/package.json +2 -1
  7. package/styles.css +96 -52
package/dist/cli.js CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- "use strict";var h=Object.create;var g=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var M=(i,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of F(e))!j.call(i,c)&&c!==s&&g(i,c,{get:()=>e[c],enumerable:!(t=S(e,c))||t.enumerable});return i};var d=(i,e,s)=>(s=i!=null?h(v(i)):{},M(e||!i||!i.__esModule?g(s,"default",{value:i,enumerable:!0}):s,i));var n=d(require("fs")),o=d(require("path")),p=require("child_process"),f=d(require("readline")),y=process.argv.slice(2),P=y[0],l=y[1],w=f.default.createInterface({input:process.stdin,output:process.stdout}),C=i=>new Promise(e=>w.question(i,e)),u=`"use client";
2
+ "use strict";var h=Object.create;var g=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var M=(e,o,i,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of b(o))!F.call(e,a)&&a!==i&&g(e,a,{get:()=>o[a],enumerable:!(c=x(o,a))||c.enumerable});return e};var p=(e,o,i)=>(i=e!=null?h(S(e)):{},M(o||!e||!e.__esModule?g(i,"default",{value:e,enumerable:!0}):i,e));var r=p(require("fs")),n=p(require("path")),l=require("child_process"),f=p(require("readline")),v=process.argv.slice(2),j=v[0],s=v[1],y=f.default.createInterface({input:process.stdin,output:process.stdout}),k=e=>new Promise(o=>y.question(e,o)),m=`"use client";
3
3
 
4
4
  import React, { Suspense } from "react";
5
5
  import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -19,14 +19,14 @@ export default function FileManagerDemo() {
19
19
  </div>
20
20
  );
21
21
  }
22
- `;async function k(){if(P!=="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();n.default.existsSync(o.default.join(process.cwd(),"components"))?s=o.default.join(process.cwd(),"components"):n.default.existsSync(o.default.join(process.cwd(),"src","components"))&&(s=o.default.join(process.cwd(),"src","components"));let t=o.default.join(s,"FileManagerDemo.tsx");n.default.existsSync(t)&&(console.error(`\u274C Error: ${t} already exists.`),process.exit(1)),n.default.writeFileSync(t,u,"utf-8"),console.log(`\u2705 Success! Created ${t}`),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(`
23
- \u{1F680} Initializing a new application: ${l}
24
- `),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 i=await C(`
25
- Select an option (1-3): `),e=o.default.join(process.cwd(),l);n.default.existsSync(e)&&(console.error(`
26
- \u274C Error: Directory "${l}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),w.close(),process.exit(1));try{i==="1"?await D(l,e):i==="2"?await b(l,e):(console.log("Canceled."),process.exit(0))}catch(s){console.error(`
27
- \u274C Scaffolding failed:`,s),process.exit(1)}process.exit(0)}async function D(i,e){console.log(`
28
- \u{1F4E6} Creating Next.js application (this may take a minute)...`),(0,p.execSync)(`npx create-next-app@latest ${i} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
29
- \u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),(0,p.execSync)("npm install @unciatech/file-manager tailwindcss-animate",{cwd:e,stdio:"inherit"});let s=o.default.join(e,"src","components");n.default.existsSync(s)||n.default.mkdirSync(s,{recursive:!0}),n.default.writeFileSync(o.default.join(s,"FileManagerDemo.tsx"),u,"utf-8");let t=o.default.join(e,"src","app","page.tsx");n.default.writeFileSync(t,`import FileManagerDemo from "@/components/FileManagerDemo";
22
+ `;async function z(){if(j!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!s){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let i=process.cwd();r.default.existsSync(n.default.join(process.cwd(),"components"))?i=n.default.join(process.cwd(),"components"):r.default.existsSync(n.default.join(process.cwd(),"src","components"))&&(i=n.default.join(process.cwd(),"src","components"));let c=n.default.join(i,"FileManagerDemo.tsx");r.default.existsSync(c)&&(console.error(`\u274C Error: ${c} already exists.`),process.exit(1)),r.default.writeFileSync(c,m,"utf-8"),console.log(`\u2705 Success! Created ${c}`),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(`
23
+ \u{1F680} Initializing a new application: ${s}
24
+ `),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 e=await k(`
25
+ Select an option (1-3): `),o=n.default.join(process.cwd(),s);r.default.existsSync(o)&&(console.error(`
26
+ \u274C Error: Directory "${s}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),y.close(),process.exit(1));try{e==="1"?await C(s,o):e==="2"?await P(s,o):(console.log("Canceled."),process.exit(0))}catch(i){console.error(`
27
+ \u274C Scaffolding failed:`,i),process.exit(1)}process.exit(0)}async function C(e,o){console.log(`
28
+ \u{1F4E6} Creating Next.js application (this may take a minute)...`),(0,l.execSync)(`npx create-next-app@latest ${e} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
29
+ \u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),(0,l.execSync)("npm install @unciatech/file-manager tailwindcss-animate",{cwd:o,stdio:"inherit"});let i=n.default.join(o,"src","components");r.default.existsSync(i)||r.default.mkdirSync(i,{recursive:!0}),r.default.writeFileSync(n.default.join(i,"FileManagerDemo.tsx"),m,"utf-8");let c=n.default.join(o,"src","app","page.tsx");r.default.writeFileSync(c,`import FileManagerDemo from "@/components/FileManagerDemo";
30
30
 
31
31
  export default function Home() {
32
32
  return (
@@ -35,7 +35,7 @@ export default function Home() {
35
35
  </main>
36
36
  );
37
37
  }
38
- `);let c=o.default.join(e,"src","app","media","[[...path]]");n.default.mkdirSync(c,{recursive:!0}),n.default.writeFileSync(o.default.join(c,"page.tsx"),`import FileManagerDemo from "@/components/FileManagerDemo";
38
+ `);let a=n.default.join(o,"src","app","media","[[...path]]");r.default.mkdirSync(a,{recursive:!0}),r.default.writeFileSync(n.default.join(a,"page.tsx"),`import FileManagerDemo from "@/components/FileManagerDemo";
39
39
 
40
40
  export default function MediaPage() {
41
41
  return (
@@ -44,14 +44,117 @@ export default function MediaPage() {
44
44
  </main>
45
45
  );
46
46
  }
47
- `);let a=o.default.join(e,"src","app","layout.tsx");if(n.default.existsSync(a)){let r=n.default.readFileSync(a,"utf8");r.includes("@unciatech/file-manager/styles")||(r=r.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
48
- $1`),n.default.writeFileSync(a,r))}let m=o.default.join(e,"src","app","globals.css");if(n.default.existsSync(m)){let r=n.default.readFileSync(m,"utf8");r.includes("@source")||(r=`@import "tailwindcss";
49
- @plugin "tailwindcss-animate";
47
+ `);let t=n.default.join(o,"src","app","layout.tsx");if(r.default.existsSync(t)){let d=r.default.readFileSync(t,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
48
+ $1`),r.default.writeFileSync(t,d))}let u=n.default.join(o,"src","app","globals.css");r.default.writeFileSync(u,`@import 'tailwindcss';
49
+ @import 'tw-animate-css';
50
50
  @source "../../node_modules/@unciatech/file-manager/dist";
51
51
 
52
- `+r.replace('@import "tailwindcss";',""),n.default.writeFileSync(m,r))}x(i)}async function b(i,e){console.log(`
53
- \u{1F4E6} Creating Vite React application...`),(0,p.execSync)(`npm create vite@latest ${i} -- --template react-ts`,{stdio:"inherit"}),console.log(`
54
- \u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),(0,p.execSync)("npm install",{cwd:e,stdio:"inherit"}),(0,p.execSync)("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:e,stdio:"inherit"});let s=o.default.join(e,"vite.config.ts");n.default.writeFileSync(s,`import { defineConfig } from 'vite'
52
+ /** Dark Mode Variant **/
53
+ @custom-variant dark (&:is(.dark *));
54
+
55
+ @theme {
56
+ --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
57
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
58
+ }
59
+
60
+ /** Colors **/
61
+ :root {
62
+ --background: var(--color-white);
63
+ --foreground: var(--color-zinc-950);
64
+ --card: var(--color-white);
65
+ --card-foreground: var(--color-zinc-950);
66
+ --popover: var(--color-white);
67
+ --popover-foreground: var(--color-zinc-950);
68
+ --primary: var(--color-blue-500);
69
+ --primary-foreground: var(--color-white);
70
+ --secondary: var(--color-zinc-100);
71
+ --secondary-foreground: var(--color-zinc-900);
72
+ --muted: var(--color-zinc-100);
73
+ --muted-foreground: var(--color-zinc-500);
74
+ --accent: var(--color-zinc-100);
75
+ --accent-foreground: var(--color-zinc-900);
76
+ --destructive: var(--color-red-600);
77
+ --destructive-foreground: var(--color-white);
78
+ --border: oklch(94% 0.004 286.32);
79
+ --input: var(--color-zinc-200);
80
+ --ring: var(--color-zinc-400);
81
+ --radius: 0.5rem;
82
+ }
83
+
84
+ .dark {
85
+ --background: var(--color-zinc-950);
86
+ --foreground: var(--color-zinc-50);
87
+ --card: var(--color-zinc-950);
88
+ --card-foreground: var(--color-zinc-50);
89
+ --popover: var(--color-zinc-950);
90
+ --popover-foreground: var(--color-zinc-50);
91
+ --primary: var(--color-blue-600);
92
+ --primary-foreground: var(--color-white);
93
+ --secondary: var(--color-zinc-800);
94
+ --secondary-foreground: var(--color-zinc-50);
95
+ --muted: var(--color-zinc-900);
96
+ --muted-foreground: var(--color-zinc-500);
97
+ --accent: var(--color-zinc-900);
98
+ --accent-foreground: var(--color-zinc-50);
99
+ --destructive: var(--color-red-600);
100
+ --destructive-foreground: var(--color-white);
101
+ --border: var(--color-zinc-800);
102
+ --input: var(--color-zinc-800);
103
+ --ring: var(--color-zinc-600);
104
+ }
105
+
106
+ /** Theme Setup **/
107
+ @theme inline {
108
+ --color-background: var(--background);
109
+ --color-foreground: var(--foreground);
110
+ --color-card: var(--card);
111
+ --color-card-foreground: var(--card-foreground);
112
+ --color-popover: var(--popover);
113
+ --color-popover-foreground: var(--popover-foreground);
114
+ --color-muted: var(--muted);
115
+ --color-muted-foreground: var(--muted-foreground);
116
+ --color-accent: var(--accent);
117
+ --color-accent-foreground: var(--accent-foreground);
118
+ --color-primary: var(--primary);
119
+ --color-primary-foreground: var(--primary-foreground);
120
+ --color-secondary: var(--secondary);
121
+ --color-secondary-foreground: var(--secondary-foreground);
122
+ --color-destructive: var(--destructive);
123
+ --color-destructive-foreground: var(--destructive-foreground);
124
+ --color-border: var(--border);
125
+ --color-input: var(--input);
126
+ --color-ring: var(--ring);
127
+ --radius-xl: calc(var(--radius) + 4px);
128
+ --radius-lg: var(--radius);
129
+ --radius-md: calc(var(--radius) - 2px);
130
+ --radius-sm: calc(var(--radius) - 4px);
131
+ }
132
+
133
+ /** Global Styles **/
134
+ @layer base {
135
+ * {
136
+ @apply border-border;
137
+ }
138
+ *:focus-visible {
139
+ @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
140
+ }
141
+ }
142
+
143
+ /** Custom Scrollbar **/
144
+ @layer base {
145
+ ::-webkit-scrollbar { width: 5px; }
146
+ ::-webkit-scrollbar-track { background: transparent; }
147
+ ::-webkit-scrollbar-thumb { background: var(--input); border-radius: 5px; }
148
+ * { scrollbar-width: thin; scrollbar-color: var(--input) transparent; }
149
+ }
150
+
151
+ /** Smooth scroll **/
152
+ html {
153
+ scroll-behavior: smooth;
154
+ }
155
+ `),w(e)}async function P(e,o){console.log(`
156
+ \u{1F4E6} Creating Vite React application...`),(0,l.execSync)(`npm create vite@latest ${e} -- --template react-ts`,{stdio:"inherit"}),console.log(`
157
+ \u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),(0,l.execSync)("npm install",{cwd:o,stdio:"inherit"}),(0,l.execSync)("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:o,stdio:"inherit"});let i=n.default.join(o,"vite.config.ts");r.default.writeFileSync(i,`import { defineConfig } from 'vite'
55
158
  import react from '@vitejs/plugin-react'
56
159
  import tailwindcss from '@tailwindcss/vite'
57
160
 
@@ -61,9 +164,9 @@ export default defineConfig({
61
164
  tailwindcss(),
62
165
  ],
63
166
  })
64
- `);let c=o.default.join(e,"src","index.css");n.default.writeFileSync(c,`@import "tailwindcss";
167
+ `);let a=n.default.join(o,"src","index.css");r.default.writeFileSync(a,`@import "tailwindcss";
65
168
  @source "../../node_modules/@unciatech/file-manager/dist";
66
- `);let a=o.default.join(e,"src","components");n.default.existsSync(a)||n.default.mkdirSync(a,{recursive:!0}),n.default.writeFileSync(o.default.join(a,"FileManagerDemo.tsx"),u,"utf-8");let m=o.default.join(e,"src","App.tsx");n.default.writeFileSync(m,`import FileManagerDemo from "./components/FileManagerDemo";
169
+ `);let t=n.default.join(o,"src","components");r.default.existsSync(t)||r.default.mkdirSync(t,{recursive:!0}),r.default.writeFileSync(n.default.join(t,"FileManagerDemo.tsx"),m,"utf-8");let u=n.default.join(o,"src","App.tsx");r.default.writeFileSync(u,`import FileManagerDemo from "./components/FileManagerDemo";
67
170
 
68
171
  function App() {
69
172
  return (
@@ -74,8 +177,8 @@ function App() {
74
177
  }
75
178
 
76
179
  export default App;
77
- `),x(i,"npm run dev")}function x(i,e="npm run dev"){console.log(`
180
+ `),w(e,"npm run dev")}function w(e,o="npm run dev"){console.log(`
78
181
  =========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
79
- Next steps:`),console.log(` cd ${i}`),console.log(` ${e}`),console.log(`
182
+ Next steps:`),console.log(` cd ${e}`),console.log(` ${o}`),console.log(`
80
183
  Enjoy building! \u{1F5C2}\uFE0F
81
- `)}k();
184
+ `)}z();
package/dist/cli.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- import e from"fs";import i from"path";import{execSync as p}from"child_process";import y from"readline";var u=process.argv.slice(2),w=u[0],a=u[1],g=y.createInterface({input:process.stdin,output:process.stdout}),x=o=>new Promise(n=>g.question(o,n)),d=`"use client";
2
+ import e from"fs";import r from"path";import{execSync as s}from"child_process";import v from"readline";var m=process.argv.slice(2),y=m[0],t=m[1],g=v.createInterface({input:process.stdin,output:process.stdout}),w=n=>new Promise(o=>g.question(n,o)),p=`"use client";
3
3
 
4
4
  import React, { Suspense } from "react";
5
5
  import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -19,14 +19,14 @@ export default function FileManagerDemo() {
19
19
  </div>
20
20
  );
21
21
  }
22
- `;async function h(){if(w!=="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(i.join(process.cwd(),"components"))?s=i.join(process.cwd(),"components"):e.existsSync(i.join(process.cwd(),"src","components"))&&(s=i.join(process.cwd(),"src","components"));let c=i.join(s,"FileManagerDemo.tsx");e.existsSync(c)&&(console.error(`\u274C Error: ${c} already exists.`),process.exit(1)),e.writeFileSync(c,d,"utf-8"),console.log(`\u2705 Success! Created ${c}`),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(`
23
- \u{1F680} Initializing a new application: ${a}
24
- `),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(`
25
- Select an option (1-3): `),n=i.join(process.cwd(),a);e.existsSync(n)&&(console.error(`
26
- \u274C Error: Directory "${a}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),g.close(),process.exit(1));try{o==="1"?await S(a,n):o==="2"?await F(a,n):(console.log("Canceled."),process.exit(0))}catch(s){console.error(`
27
- \u274C Scaffolding failed:`,s),process.exit(1)}process.exit(0)}async function S(o,n){console.log(`
28
- \u{1F4E6} Creating Next.js application (this may take a minute)...`),p(`npx create-next-app@latest ${o} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
29
- \u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),p("npm install @unciatech/file-manager tailwindcss-animate",{cwd:n,stdio:"inherit"});let s=i.join(n,"src","components");e.existsSync(s)||e.mkdirSync(s,{recursive:!0}),e.writeFileSync(i.join(s,"FileManagerDemo.tsx"),d,"utf-8");let c=i.join(n,"src","app","page.tsx");e.writeFileSync(c,`import FileManagerDemo from "@/components/FileManagerDemo";
22
+ `;async function h(){if(y!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!t){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let i=process.cwd();e.existsSync(r.join(process.cwd(),"components"))?i=r.join(process.cwd(),"components"):e.existsSync(r.join(process.cwd(),"src","components"))&&(i=r.join(process.cwd(),"src","components"));let c=r.join(i,"FileManagerDemo.tsx");e.existsSync(c)&&(console.error(`\u274C Error: ${c} already exists.`),process.exit(1)),e.writeFileSync(c,p,"utf-8"),console.log(`\u2705 Success! Created ${c}`),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(`
23
+ \u{1F680} Initializing a new application: ${t}
24
+ `),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 n=await w(`
25
+ Select an option (1-3): `),o=r.join(process.cwd(),t);e.existsSync(o)&&(console.error(`
26
+ \u274C Error: Directory "${t}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),g.close(),process.exit(1));try{n==="1"?await x(t,o):n==="2"?await b(t,o):(console.log("Canceled."),process.exit(0))}catch(i){console.error(`
27
+ \u274C Scaffolding failed:`,i),process.exit(1)}process.exit(0)}async function x(n,o){console.log(`
28
+ \u{1F4E6} Creating Next.js application (this may take a minute)...`),s(`npx create-next-app@latest ${n} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
29
+ \u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),s("npm install @unciatech/file-manager tailwindcss-animate",{cwd:o,stdio:"inherit"});let i=r.join(o,"src","components");e.existsSync(i)||e.mkdirSync(i,{recursive:!0}),e.writeFileSync(r.join(i,"FileManagerDemo.tsx"),p,"utf-8");let c=r.join(o,"src","app","page.tsx");e.writeFileSync(c,`import FileManagerDemo from "@/components/FileManagerDemo";
30
30
 
31
31
  export default function Home() {
32
32
  return (
@@ -35,7 +35,7 @@ export default function Home() {
35
35
  </main>
36
36
  );
37
37
  }
38
- `);let m=i.join(n,"src","app","media","[[...path]]");e.mkdirSync(m,{recursive:!0}),e.writeFileSync(i.join(m,"page.tsx"),`import FileManagerDemo from "@/components/FileManagerDemo";
38
+ `);let l=r.join(o,"src","app","media","[[...path]]");e.mkdirSync(l,{recursive:!0}),e.writeFileSync(r.join(l,"page.tsx"),`import FileManagerDemo from "@/components/FileManagerDemo";
39
39
 
40
40
  export default function MediaPage() {
41
41
  return (
@@ -44,14 +44,117 @@ export default function MediaPage() {
44
44
  </main>
45
45
  );
46
46
  }
47
- `);let r=i.join(n,"src","app","layout.tsx");if(e.existsSync(r)){let t=e.readFileSync(r,"utf8");t.includes("@unciatech/file-manager/styles")||(t=t.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
48
- $1`),e.writeFileSync(r,t))}let l=i.join(n,"src","app","globals.css");if(e.existsSync(l)){let t=e.readFileSync(l,"utf8");t.includes("@source")||(t=`@import "tailwindcss";
49
- @plugin "tailwindcss-animate";
47
+ `);let a=r.join(o,"src","app","layout.tsx");if(e.existsSync(a)){let d=e.readFileSync(a,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
48
+ $1`),e.writeFileSync(a,d))}let u=r.join(o,"src","app","globals.css");e.writeFileSync(u,`@import 'tailwindcss';
49
+ @import 'tw-animate-css';
50
50
  @source "../../node_modules/@unciatech/file-manager/dist";
51
51
 
52
- `+t.replace('@import "tailwindcss";',""),e.writeFileSync(l,t))}f(o)}async function F(o,n){console.log(`
53
- \u{1F4E6} Creating Vite React application...`),p(`npm create vite@latest ${o} -- --template react-ts`,{stdio:"inherit"}),console.log(`
54
- \u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),p("npm install",{cwd:n,stdio:"inherit"}),p("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:n,stdio:"inherit"});let s=i.join(n,"vite.config.ts");e.writeFileSync(s,`import { defineConfig } from 'vite'
52
+ /** Dark Mode Variant **/
53
+ @custom-variant dark (&:is(.dark *));
54
+
55
+ @theme {
56
+ --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
57
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
58
+ }
59
+
60
+ /** Colors **/
61
+ :root {
62
+ --background: var(--color-white);
63
+ --foreground: var(--color-zinc-950);
64
+ --card: var(--color-white);
65
+ --card-foreground: var(--color-zinc-950);
66
+ --popover: var(--color-white);
67
+ --popover-foreground: var(--color-zinc-950);
68
+ --primary: var(--color-blue-500);
69
+ --primary-foreground: var(--color-white);
70
+ --secondary: var(--color-zinc-100);
71
+ --secondary-foreground: var(--color-zinc-900);
72
+ --muted: var(--color-zinc-100);
73
+ --muted-foreground: var(--color-zinc-500);
74
+ --accent: var(--color-zinc-100);
75
+ --accent-foreground: var(--color-zinc-900);
76
+ --destructive: var(--color-red-600);
77
+ --destructive-foreground: var(--color-white);
78
+ --border: oklch(94% 0.004 286.32);
79
+ --input: var(--color-zinc-200);
80
+ --ring: var(--color-zinc-400);
81
+ --radius: 0.5rem;
82
+ }
83
+
84
+ .dark {
85
+ --background: var(--color-zinc-950);
86
+ --foreground: var(--color-zinc-50);
87
+ --card: var(--color-zinc-950);
88
+ --card-foreground: var(--color-zinc-50);
89
+ --popover: var(--color-zinc-950);
90
+ --popover-foreground: var(--color-zinc-50);
91
+ --primary: var(--color-blue-600);
92
+ --primary-foreground: var(--color-white);
93
+ --secondary: var(--color-zinc-800);
94
+ --secondary-foreground: var(--color-zinc-50);
95
+ --muted: var(--color-zinc-900);
96
+ --muted-foreground: var(--color-zinc-500);
97
+ --accent: var(--color-zinc-900);
98
+ --accent-foreground: var(--color-zinc-50);
99
+ --destructive: var(--color-red-600);
100
+ --destructive-foreground: var(--color-white);
101
+ --border: var(--color-zinc-800);
102
+ --input: var(--color-zinc-800);
103
+ --ring: var(--color-zinc-600);
104
+ }
105
+
106
+ /** Theme Setup **/
107
+ @theme inline {
108
+ --color-background: var(--background);
109
+ --color-foreground: var(--foreground);
110
+ --color-card: var(--card);
111
+ --color-card-foreground: var(--card-foreground);
112
+ --color-popover: var(--popover);
113
+ --color-popover-foreground: var(--popover-foreground);
114
+ --color-muted: var(--muted);
115
+ --color-muted-foreground: var(--muted-foreground);
116
+ --color-accent: var(--accent);
117
+ --color-accent-foreground: var(--accent-foreground);
118
+ --color-primary: var(--primary);
119
+ --color-primary-foreground: var(--primary-foreground);
120
+ --color-secondary: var(--secondary);
121
+ --color-secondary-foreground: var(--secondary-foreground);
122
+ --color-destructive: var(--destructive);
123
+ --color-destructive-foreground: var(--destructive-foreground);
124
+ --color-border: var(--border);
125
+ --color-input: var(--input);
126
+ --color-ring: var(--ring);
127
+ --radius-xl: calc(var(--radius) + 4px);
128
+ --radius-lg: var(--radius);
129
+ --radius-md: calc(var(--radius) - 2px);
130
+ --radius-sm: calc(var(--radius) - 4px);
131
+ }
132
+
133
+ /** Global Styles **/
134
+ @layer base {
135
+ * {
136
+ @apply border-border;
137
+ }
138
+ *:focus-visible {
139
+ @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
140
+ }
141
+ }
142
+
143
+ /** Custom Scrollbar **/
144
+ @layer base {
145
+ ::-webkit-scrollbar { width: 5px; }
146
+ ::-webkit-scrollbar-track { background: transparent; }
147
+ ::-webkit-scrollbar-thumb { background: var(--input); border-radius: 5px; }
148
+ * { scrollbar-width: thin; scrollbar-color: var(--input) transparent; }
149
+ }
150
+
151
+ /** Smooth scroll **/
152
+ html {
153
+ scroll-behavior: smooth;
154
+ }
155
+ `),f(n)}async function b(n,o){console.log(`
156
+ \u{1F4E6} Creating Vite React application...`),s(`npm create vite@latest ${n} -- --template react-ts`,{stdio:"inherit"}),console.log(`
157
+ \u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),s("npm install",{cwd:o,stdio:"inherit"}),s("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:o,stdio:"inherit"});let i=r.join(o,"vite.config.ts");e.writeFileSync(i,`import { defineConfig } from 'vite'
55
158
  import react from '@vitejs/plugin-react'
56
159
  import tailwindcss from '@tailwindcss/vite'
57
160
 
@@ -61,9 +164,9 @@ export default defineConfig({
61
164
  tailwindcss(),
62
165
  ],
63
166
  })
64
- `);let m=i.join(n,"src","index.css");e.writeFileSync(m,`@import "tailwindcss";
167
+ `);let l=r.join(o,"src","index.css");e.writeFileSync(l,`@import "tailwindcss";
65
168
  @source "../../node_modules/@unciatech/file-manager/dist";
66
- `);let r=i.join(n,"src","components");e.existsSync(r)||e.mkdirSync(r,{recursive:!0}),e.writeFileSync(i.join(r,"FileManagerDemo.tsx"),d,"utf-8");let l=i.join(n,"src","App.tsx");e.writeFileSync(l,`import FileManagerDemo from "./components/FileManagerDemo";
169
+ `);let a=r.join(o,"src","components");e.existsSync(a)||e.mkdirSync(a,{recursive:!0}),e.writeFileSync(r.join(a,"FileManagerDemo.tsx"),p,"utf-8");let u=r.join(o,"src","App.tsx");e.writeFileSync(u,`import FileManagerDemo from "./components/FileManagerDemo";
67
170
 
68
171
  function App() {
69
172
  return (
@@ -74,8 +177,8 @@ function App() {
74
177
  }
75
178
 
76
179
  export default App;
77
- `),f(o,"npm run dev")}function f(o,n="npm run dev"){console.log(`
180
+ `),f(n,"npm run dev")}function f(n,o="npm run dev"){console.log(`
78
181
  =========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
79
- Next steps:`),console.log(` cd ${o}`),console.log(` ${n}`),console.log(`
182
+ Next steps:`),console.log(` cd ${n}`),console.log(` ${o}`),console.log(`
80
183
  Enjoy building! \u{1F5C2}\uFE0F
81
184
  `)}h();