pni 1.0.1 → 1.0.2

package/dist/app.js

@@ -4,7 +4,7 @@ import { detectProjectType } from './utils/project-detection.js';
 import { createApp } from './utils/app-creation.js';
 import { detectPackageManager, getInstallCommand, getDevInstallCommand, } from './utils/package-manager.js';
 import { getDependencies } from './utils/dependencies.js';
-import { generateConfigFiles } from './utils/config-generator.js';
+import { generateConfigFiles, setupNuxtAppStructure } from './utils/config-generator.js';
 import { generateCSSVariables, updateIndexHtml, createTypographyPage } from './utils/css-variables.js';
 import { setupShadcnNuxt } from './utils/shadcn-setup.js';
 import FeatureSelector from './components/FeatureSelector.js';
@@ -71,6 +71,10 @@ export default function App({ nuxt = false, vue = false, threejs = false, cssVar
             // Generate configuration files
             setStep('configuring');
             await generateConfigFiles(finalProjectType, workingPath, selectedFeatures.threejs, selectedFeatures.cssVars);
+            // Set up Nuxt app structure (app.vue, pages/index.vue, Lenis)
+            if (finalProjectType === 'nuxt') {
+                await setupNuxtAppStructure(workingPath);
+            }
             // Generate CSS variables (always enabled - will be overwritten after shadcn-setup)
             if (finalProjectType === 'nuxt') {
                 // For Nuxt, first create basic tailwind.css

package/dist/template_code/css/tailwind.css.template

@@ -0,0 +1,214 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@font-face {
+  font-family: 'Helvetica';
+  src: url('~/assets/fonts/Helvetica.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --spacing: 4rem;
+  --font-helvetica: 'Helvetica', sans-serif;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  /* osmo scaling system starts here  */
+  --size-unit: 16; /* body font-size in design - no px */
+  --size-container-ideal: 1440; /* screen-size in design - no px */
+  --size-container-min: 992px;
+  --size-container-max: 1920px;
+  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
+  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
+
+  /* 1 fluid pixel unit */
+  --fluid-px: calc(var(--size-font) / 16);
+  /* osmo scaling system ends here  */
+
+
+
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+html {
+  font-size: var(--fluid-px);
+}
+
+body {
+  /* figma design 16px fontsize = 16rem fluid pixel unit */
+  font-size: 16rem;
+  font-family: var(--font-helvetica);
+}
+
+
+/* osmo scaling system starts here  */
+
+
+.container {
+  max-width: var(--size-container);
+}
+
+.container.medium {
+  max-width: calc(var(--size-container) * 0.85);
+}
+
+.container.small {
+  max-width: calc(var(--size-container) * 0.7);
+}
+
+/* Tablet */
+@media screen and (max-width: 991px) {
+  :root {
+    --size-container-ideal: 834;
+    /* screen-size in design - no px */
+    --size-container-min: 768px;
+    --size-container-max: 991px;
+  }
+
+  body {
+    background-color: red;
+  }
+}
+
+/* Mobile Landscape */
+@media screen and (max-width: 767px) {
+  :root {
+    --size-container-ideal: 550;
+    /* screen-size in design - no px */
+    --size-container-min: 480px;
+    --size-container-max: 767px;
+  }
+
+  body {
+    background-color: blue;
+  }
+}
+
+/* Mobile Portrait */
+@media screen and (max-width: 479px) {
+  :root {
+    --size-container-ideal: 375;
+    /* screen-size in design - no px */
+    --size-container-min: 320px;
+    --size-container-max: 479px;
+  }
+
+  body {
+    background-color: green;
+  }
+}
+

package/dist/template_code/nuxt/app.vue.template

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { VueLenis } from 'lenis/vue'
+
+const lenisOptions = {
+  // Lenis options (optional)
+  duration: 1.2,
+  easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+  orientation: 'vertical',
+  gestureOrientation: 'vertical',
+  smoothWheel: true,
+  wheelMultiplier: 1,
+  smoothTouch: false,
+  touchMultiplier: 2,
+  infinite: false,
+}
+</script>
+
+<template>
+  <VueLenis root :options="lenisOptions">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </VueLenis>
+</template>
+

package/dist/template_code/nuxt/nuxt.config.ts.template

@@ -0,0 +1,90 @@
+{{TAILWIND_IMPORT}}// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  // 1. Updated to a realistic 2024/2025 date for Nuxt 4 features
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+
+{{CSS_IMPORT}}  ssr: true,
+
+
+  // SEO: Centralizing data
+  site: {
+    name: 'New Setup',
+    url: 'https://newsetup.com',
+    description: 'A new setup for your project',
+    defaultLocale: 'en',
+  },
+
+  // App Config for UI-wide settings
+  app: {
+    head: {
+      charset: 'utf-8',
+      viewport: 'width=device-width, initial-scale=1',
+      meta: [
+        { name: 'description', content: 'A new setup for your project' },
+        { name: 'author', content: 'New Setup' },
+        { property: 'og:type', content: 'website' },
+        { name: 'msapplication-TileColor', content: '#000000' },
+        { name: 'theme-color', content: '#000000' },
+      ],
+      link: [
+        // { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+        // { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon-180x180.png' },
+        // { rel: 'manifest', href: '/manifest.webmanifest' },
+      ],
+    },
+  },
+
+{{VITE_CONFIG}}  nitro: {
+    compressPublicAssets: {
+      brotli: true,
+      gzip: true,
+    },
+    // Enable crawling for SEO module compatibility
+    prerender: {
+      //  set to true for production
+      crawlLinks: false,
+      routes: ['/']
+    }
+  },
+
+  modules: [{{MODULES}}],
+
+
+  //  Image Optimization
+  image: {
+    quality: 95,
+    format: ['webp'],
+    screens: {
+      xs: 320,
+      sm: 640,
+      md: 768,
+      lg: 1200,
+      xl: 1400,
+      xxl: 1800,
+      '2xl': 2000,
+    },
+  },
+
+  // UI Framework: Shadcn
+{{SHADCN_CONFIG}}  ogImage: {
+    defaults: {
+      component: 'OgImageTemplate',
+      props: {
+        title: 'New Setup',
+        description: 'A new setup for your project',
+        image: 'https://newsetup.com/og-image.png',
+      },
+    }
+  },
+  robots: {
+    disallow: ['/api',],
+  },
+
+
+
+  sitemap: {
+    // sources: ['/api/__sitemap__/urls'] // Fetch from API
+  },
+})
+

package/dist/template_code/nuxt/pages/index.vue.template

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center">
+    <div class="text-center">
+      <h1 class="text-4xl font-bold mb-4">Welcome to Nuxt</h1>
+      <p class="text-lg text-muted-foreground">
+        Get started by editing <code class="px-2 py-1 bg-muted rounded">app/pages/index.vue</code>
+      </p>
+    </div>
+  </div>
+</template>
+

package/dist/template_code/nuxt/pages/typography/index.vue.template

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <section class="w-full py-20 px-4 min-h-screen flex items-center justify-center bg-[#DADADA] flex-col gap-16 ">
+        <div class="hero-container flex flex-col gap-16 leading-[1.2]">
+            <!-- figma design 120px fontsize -->
+            <h1 class="md:text-[120rem] text-[72rem]">Heading H1</h1>
+            <div class="divider"></div>
+            <!-- figma design 80px fontsize -->
+            <h2 class="md:text-[80rem] text-[64rem]">Heading H2</h2>
+            <div class="divider"></div>
+            <h3 class="md:text-[40rem] text-[32rem]">Heading H3</h3>
+            <!-- figma design 40px fontsize -->
+            <div class="divider"></div>
+            <h4 class="md:text-[28rem] text-[24rem]">Heading H4</h4>
+            <!-- figma design 28px fontsize -->
+            <div class="divider"></div>
+            <h5 class="md:text-[20rem] text-[18rem]">Heading H5</h5>
+            <!-- figma design 20px fontsize -->
+            <div class="divider"></div>
+            <!-- figma design  16px fontsize -->
+            <p class="text-[16rem] leading-[1.4] max-md:max-w-85.75 w-full font-helvetica">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum
+                tristique. Duis cursus,  all links in the website, eros dolor interdum nulla, ut commodo diam libero
+                vitae erat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
+                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+                sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+            </p>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.hero-container {
+    max-width: calc(1184em / 16);
+}
+
+.divider {
+    background-color: #969696;
+    height: 1px;
+    width: 100%;
+}
+</style>
+

package/dist/template_code/postcss/postcss.config.js.template

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

package/dist/template_code/tailwind/tailwind.config.js.template

@@ -0,0 +1,52 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+{{CONTENT_PATHS}}
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+}
+

package/dist/template_code/vite/vite.config.ts.template

@@ -0,0 +1,82 @@
+import { fileURLToPath, URL } from 'node:url'
+{{TAILWIND_IMPORT}}import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import viteCompression from 'vite-plugin-compression'
+import Sitemap from 'vite-plugin-sitemap'
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
+
+export default defineConfig(({ mode }) => {
+  const isProd = mode === 'production'
+
+  return {
+    plugins: [
+      vue(),
+{{TAILWIND_PLUGIN}}      // 1. Only load DevTools in development
+      !isProd && vueDevTools(),
+
+      ViteImageOptimizer({
+        test: /\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i,
+        includePublic: true,
+        logStats: true,
+        png: { quality: 75 },
+        jpeg: { quality: 75 },
+        jpg: { quality: 75 },
+        webp: { lossless: false, quality: 75 },
+        avif: { quality: 70 },
+      }),
+
+      Sitemap({
+        hostname: 'https://newsetup.com', // Don't forget to update this!
+        dynamicRoutes: [],
+      }),
+
+      // 2. Gzip Compression (Universal Fallback)
+      viteCompression({
+        algorithm: 'gzip',
+        ext: '.gz',
+        threshold: 10240,
+        deleteOriginFile: false,
+      }),
+
+      // 3. Brotli Compression (Modern Performance)
+      viteCompression({
+        algorithm: 'brotliCompress',
+        ext: '.br',
+        threshold: 10240,
+        deleteOriginFile: false,
+      }),
+    ],
+
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      },
+    },
+
+    build: {
+      cssMinify: 'lightningcss', // Ensure 'lightningcss' is in package.json
+      // 4. Split Chunks for better Browser Caching
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes('node_modules')) {
+              // Split standard Vue dependencies into their own chunk
+              if (id.includes('vue') || id.includes('pinia') || id.includes('vue-router')) {
+                return 'vue-vendor';
+              }
+{{THREEJS_CHUNK}}
+              
+              return 'vendor';
+            }
+          },
+        },
+      },
+    },
+
+    esbuild: {
+      drop: isProd ? ['console', 'debugger'] : [],
+    },
+  }
+})
+

package/dist/utils/config-generator.d.ts

@@ -3,4 +3,5 @@ export declare function generateNuxtConfig(projectPath: string, threejs: boolean
 export declare function generateViteConfig(projectPath: string, threejs: boolean, cssVars?: boolean): Promise<void>;
 export declare function generateTailwindConfig(projectPath: string, projectType: ProjectType): Promise<void>;
 export declare function generatePostCSSConfig(projectPath: string): Promise<void>;
+export declare function setupNuxtAppStructure(projectPath: string): Promise<void>;
 export declare function generateConfigFiles(projectType: ProjectType, projectPath: string, threejs: boolean, cssVars: boolean): Promise<void>;

package/dist/utils/config-generator.js

@@ -1,12 +1,13 @@
-import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
 import { join } from 'path';
+import { loadTemplateWithReplacements, loadTemplate } from './template-loader.js';
 export async function generateNuxtConfig(projectPath, 
 //@ts-ignore
 threejs, cssVars) {
     const configPath = join(projectPath, 'nuxt.config.ts');
     // Always replace the config with the full template, regardless of whether it exists
-    // Generate full config template
     const modules = [
+        'lenis/nuxt',
         'shadcn-nuxt',
         '@nuxtjs/seo',
         '@nuxt/image',
@@ -17,44 +18,7 @@ threejs, cssVars) {
     const tailwindImport = cssVars
         ? "import tailwindcss from '@tailwindcss/vite'\n\n"
         : '';
-    const configContent = `${tailwindImport}// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  // 1. Updated to a realistic 2024/2025 date for Nuxt 4 features
-  compatibilityDate: '2024-11-01',
-  devtools: { enabled: true },
-
-${cssVars ? `  css: ['${cssImport}'],\n\n` : ''}  ssr: true,
-
-
-  // SEO: Centralizing data
-  site: {
-    name: 'New Setup',
-    url: 'https://newsetup.com',
-    description: 'A new setup for your project',
-    defaultLocale: 'en',
-  },
-
-  // App Config for UI-wide settings
-  app: {
-    head: {
-      charset: 'utf-8',
-      viewport: 'width=device-width, initial-scale=1',
-      meta: [
-        { name: 'description', content: 'A new setup for your project' },
-        { name: 'author', content: 'New Setup' },
-        { property: 'og:type', content: 'website' },
-        { name: 'msapplication-TileColor', content: '#000000' },
-        { name: 'theme-color', content: '#000000' },
-      ],
-      link: [
-        // { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-        // { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon-180x180.png' },
-        // { rel: 'manifest', href: '/manifest.webmanifest' },
-      ],
-    },
-  },
-
-${cssVars
+    const viteConfig = cssVars
         ? `  vite: {
     plugins: [tailwindcss()],
     esbuild: {
@@ -67,39 +31,8 @@ ${cssVars
   },
 
 `
-        : ''}  nitro: {
-    compressPublicAssets: {
-      brotli: true,
-      gzip: true,
-    },
-    // Enable crawling for SEO module compatibility
-    prerender: {
-      //  set to true for production
-      crawlLinks: false,
-      routes: ['/']
-    }
-  },
-
-  modules: [${modules.map(m => `'${m}'`).join(', ')}],
-
-
-  //  Image Optimization
-  image: {
-    quality: 95,
-    format: ['webp'],
-    screens: {
-      xs: 320,
-      sm: 640,
-      md: 768,
-      lg: 1200,
-      xl: 1400,
-      xxl: 1800,
-      '2xl': 2000,
-    },
-  },
-
-  // UI Framework: Shadcn
-${cssVars
+        : '';
+    const shadcnConfig = cssVars
         ? `  shadcn: {
     prefix: '',
     componentDir: '@/components/ui',
@@ -107,27 +40,15 @@ ${cssVars
 
 
 `
-        : ''}  ogImage: {
-    defaults: {
-      component: 'OgImageTemplate',
-      props: {
-        title: 'New Setup',
-        description: 'A new setup for your project',
-        image: 'https://newsetup.com/og-image.png',
-      },
-    }
-  },
-  robots: {
-    disallow: ['/api',],
-  },
-
-
-
-  sitemap: {
-    // sources: ['/api/__sitemap__/urls'] // Fetch from API
-  },
-})
-`;
+        : '';
+    const cssImportLine = cssVars ? `  css: ['${cssImport}'],\n\n` : '';
+    const configContent = loadTemplateWithReplacements('nuxt/nuxt.config.ts.template', {
+        TAILWIND_IMPORT: tailwindImport,
+        CSS_IMPORT: cssImportLine,
+        VITE_CONFIG: viteConfig,
+        MODULES: modules.map(m => `'${m}'`).join(', '),
+        SHADCN_CONFIG: shadcnConfig,
+    });
     // Always write the full config, replacing any existing one
     writeFileSync(configPath, configContent, 'utf-8');
 }
@@ -159,167 +80,54 @@ threejs, cssVars = false) {
             ? "import tailwindcss from '@tailwindcss/vite'\n"
             : '';
         const tailwindPlugin = cssVars ? '      tailwindcss(),\n' : '';
-        configContent = `import { fileURLToPath, URL } from 'node:url'
-      ${tailwindImport}import { defineConfig } from 'vite'
-      import vue from '@vitejs/plugin-vue'
-      import vueDevTools from 'vite-plugin-vue-devtools'
-      import viteCompression from 'vite-plugin-compression'
-      import Sitemap from 'vite-plugin-sitemap'
-      import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
-
-      export default defineConfig(({ mode }) => {
-        const isProd = mode === 'production'
-
-        return {
-          plugins: [
-            vue(),
-      ${tailwindPlugin}      // 1. Only load DevTools in development
-            !isProd && vueDevTools(),
-
-            ViteImageOptimizer({
-              test: /\\.(jpe?g|png|gif|tiff|webp|svg|avif)$/i,
-              includePublic: true,
-              logStats: true,
-              png: { quality: 75 },
-              jpeg: { quality: 75 },
-              jpg: { quality: 75 },
-              webp: { lossless: false, quality: 75 },
-              avif: { quality: 70 },
-            }),
-
-            Sitemap({
-              hostname: 'https://newsetup.com', // Don't forget to update this!
-              dynamicRoutes: [],
-            }),
-
-            // 2. Gzip Compression (Universal Fallback)
-            viteCompression({
-              algorithm: 'gzip',
-              ext: '.gz',
-              threshold: 10240,
-              deleteOriginFile: false,
-            }),
-
-            // 3. Brotli Compression (Modern Performance)
-            viteCompression({
-              algorithm: 'brotliCompress',
-              ext: '.br',
-              threshold: 10240,
-              deleteOriginFile: false,
-            }),
-          ],
-
-          resolve: {
-            alias: {
-              '@': fileURLToPath(new URL('./src', import.meta.url))
-            },
-          },
-
-          build: {
-            cssMinify: 'lightningcss', // Ensure 'lightningcss' is in package.json
-            // 4. Split Chunks for better Browser Caching
-            rollupOptions: {
-              output: {
-                manualChunks(id) {
-                  if (id.includes('node_modules')) {
-                    // Split standard Vue dependencies into their own chunk
-                    if (id.includes('vue') || id.includes('pinia') || id.includes('vue-router')) {
-                      return 'vue-vendor';
-                    }
-      ${threejsChunk}
-                    
-                    return 'vendor';
-                  }
-                },
-              },
-            },
-          },
-
-          esbuild: {
-            drop: isProd ? ['console', 'debugger'] : [],
-          },
-        }
-      })
-`;
+        configContent = loadTemplateWithReplacements('vite/vite.config.ts.template', {
+            TAILWIND_IMPORT: tailwindImport,
+            TAILWIND_PLUGIN: tailwindPlugin,
+            THREEJS_CHUNK: threejsChunk,
+        });
     }
     writeFileSync(configPath, configContent, 'utf-8');
 }
 export async function generateTailwindConfig(projectPath, projectType) {
     const configPath = join(projectPath, 'tailwind.config.js');
-    const configContent = `/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    ${projectType === 'nuxt'
-        ? "'./components/**/*.{js,vue,ts}',"
-        : "'./index.html',"}
-    ${projectType === 'nuxt'
-        ? "'./layouts/**/*.vue',"
-        : "'./src/**/*.{vue,js,ts,jsx,tsx}',"}
-    ${projectType === 'nuxt' ? "'./pages/**/*.vue'," : ''}
-    ${projectType === 'nuxt' ? "'./plugins/**/*.{js,ts}'," : ''}
-    ${projectType === 'nuxt' ? "'./app.vue'," : ''}
-    ${projectType === 'nuxt' ? "'./error.vue'," : ''}
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [],
-}
-`;
+    let contentPaths;
+    if (projectType === 'nuxt') {
+        contentPaths = `    './components/**/*.{js,vue,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './plugins/**/*.{js,ts}',
+    './app.vue',
+    './error.vue',`;
+    }
+    else {
+        contentPaths = `    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',`;
+    }
+    const configContent = loadTemplateWithReplacements('tailwind/tailwind.config.js.template', {
+        CONTENT_PATHS: contentPaths,
+    });
     writeFileSync(configPath, configContent, 'utf-8');
 }
 export async function generatePostCSSConfig(projectPath) {
     const configPath = join(projectPath, 'postcss.config.js');
-    const configContent = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
-`;
+    const configContent = loadTemplate('postcss/postcss.config.js.template');
     writeFileSync(configPath, configContent, 'utf-8');
 }
+export async function setupNuxtAppStructure(projectPath) {
+    // Set up app.vue with NuxtLayout, NuxtPage, and Lenis
+    const appVuePath = join(projectPath, 'app.vue');
+    const appVueContent = loadTemplate('nuxt/app.vue.template');
+    writeFileSync(appVuePath, appVueContent, 'utf-8');
+    // Create app/pages directory if it doesn't exist
+    const pagesDir = join(projectPath, 'app', 'pages');
+    if (!existsSync(pagesDir)) {
+        mkdirSync(pagesDir, { recursive: true });
+    }
+    // Create app/pages/index.vue
+    const indexPagePath = join(pagesDir, 'index.vue');
+    const indexPageContent = loadTemplate('nuxt/pages/index.vue.template');
+    writeFileSync(indexPagePath, indexPageContent, 'utf-8');
+}
 export async function generateConfigFiles(projectType, projectPath, threejs, cssVars) {
     if (projectType === 'nuxt') {
         await generateNuxtConfig(projectPath, threejs, cssVars);

package/dist/utils/css-variables.js

@@ -1,221 +1,6 @@
 import { writeFileSync, mkdirSync, readFileSync, existsSync } from 'fs';
 import { join, dirname } from 'path';
-const CSS_VARIABLES_CONTENT = `
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@font-face {
-  font-family: 'Helvetica';
-  src: url('~/assets/fonts/Helvetica.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --spacing: 4rem;
-  --font-helvetica: 'Helvetica', sans-serif;
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  /* osmo scaling system starts here  */
-  --size-unit: 16; /* body font-size in design - no px */
-  --size-container-ideal: 1440; /* screen-size in design - no px */
-  --size-container-min: 992px;
-  --size-container-max: 1920px;
-  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
-  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
-
-  /* 1 fluid pixel unit */
-  --fluid-px: calc(var(--size-font) / 16);
-  /* osmo scaling system ends here  */
-
-
-
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-html {
-  font-size: var(--fluid-px);
-}
-
-body {
-  /* figma design 16px fontsize = 16rem fluid pixel unit */
-  font-size: 16rem;
-  font-family: var(--font-helvetica);
-}
-
-
-/* osmo scaling system starts here  */
-
-
-.container {
-  max-width: var(--size-container);
-}
-
-.container.medium {
-  max-width: calc(var(--size-container) * 0.85);
-}
-
-.container.small {
-  max-width: calc(var(--size-container) * 0.7);
-}
-
-/* Tablet */
-@media screen and (max-width: 991px) {
-  :root {
-    --size-container-ideal: 834;
-    /* screen-size in design - no px */
-    --size-container-min: 768px;
-    --size-container-max: 991px;
-  }
-
-  body {
-    background-color: red;
-  }
-}
-
-/* Mobile Landscape */
-@media screen and (max-width: 767px) {
-  :root {
-    --size-container-ideal: 550;
-    /* screen-size in design - no px */
-    --size-container-min: 480px;
-    --size-container-max: 767px;
-  }
-
-  body {
-    background-color: blue;
-  }
-}
-
-/* Mobile Portrait */
-@media screen and (max-width: 479px) {
-  :root {
-    --size-container-ideal: 375;
-    /* screen-size in design - no px */
-    --size-container-min: 320px;
-    --size-container-max: 479px;
-  }
-
-  body {
-    background-color: green;
-  }
-}
-
-`;
+import { loadTemplate } from './template-loader.js';
 export async function generateCSSVariables(projectType, projectPath, initialSetup = false) {
     let cssPath;
     if (projectType === 'nuxt') {
@@ -234,7 +19,8 @@ export async function generateCSSVariables(projectType, projectPath, initialSetu
     }
     else {
         // Overwrite the CSS file with full content
-        writeFileSync(cssPath, CSS_VARIABLES_CONTENT.trim() + '\n', 'utf-8');
+        const cssContent = loadTemplate('css/tailwind.css.template');
+        writeFileSync(cssPath, cssContent.trim() + '\n', 'utf-8');
     }
 }
 export async function updateIndexHtml(projectPath) {
@@ -270,51 +56,6 @@ export async function createTypographyPage(projectPath, projectType) {
     const typographyPagePath = join(pagesDir, 'typography', 'index.vue');
     // Ensure directory exists
     mkdirSync(dirname(typographyPagePath), { recursive: true });
-    const typographyPageContent = `<script setup lang="ts">
-</script>
-
-<template>
-    <section class="w-full py-20 px-4 min-h-screen flex items-center justify-center bg-[#DADADA] flex-col gap-16 ">
-        <div class="hero-container flex flex-col gap-16 leading-[1.2]">
-            <!-- figma design 120px fontsize -->
-            <h1 class="md:text-[120rem] text-[72rem]">Heading H1</h1>
-            <div class="divider"></div>
-            <!-- figma design 80px fontsize -->
-            <h2 class="md:text-[80rem] text-[64rem]">Heading H2</h2>
-            <div class="divider"></div>
-            <h3 class="md:text-[40rem] text-[32rem]">Heading H3</h3>
-            <!-- figma design 40px fontsize -->
-            <div class="divider"></div>
-            <h4 class="md:text-[28rem] text-[24rem]">Heading H4</h4>
-            <!-- figma design 28px fontsize -->
-            <div class="divider"></div>
-            <h5 class="md:text-[20rem] text-[18rem]">Heading H5</h5>
-            <!-- figma design 20px fontsize -->
-            <div class="divider"></div>
-            <!-- figma design  16px fontsize -->
-            <p class="text-[16rem] leading-[1.4] max-md:max-w-85.75 w-full font-helvetica">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum
-                tristique. Duis cursus,  all links in the website, eros dolor interdum nulla, ut commodo diam libero
-                vitae erat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
-                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
-                sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-            </p>
-        </div>
-    </section>
-</template>
-
-<style scoped>
-.hero-container {
-    max-width: calc(1184em / 16);
-}
-
-.divider {
-    background-color: #969696;
-    height: 1px;
-    width: 100%;
-}
-</style>
-`;
+    const typographyPageContent = loadTemplate('nuxt/pages/typography/index.vue.template');
     writeFileSync(typographyPagePath, typographyPageContent, 'utf-8');
 }

package/dist/utils/template-loader.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Load a template file and return its content
+ * @param templatePath - Path to template file relative to template_code directory
+ * @returns Template content as string
+ */
+export declare function loadTemplate(templatePath: string): string;
+/**
+ * Load a template and replace placeholders
+ * @param templatePath - Path to template file relative to template_code directory
+ * @param replacements - Object with placeholder keys and replacement values
+ * @returns Template content with replacements applied
+ */
+export declare function loadTemplateWithReplacements(templatePath: string, replacements: Record<string, string>): string;

package/dist/utils/template-loader.js

@@ -0,0 +1,52 @@
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+/**
+ * Get the template directory path
+ * When compiled: dist/utils/template-loader.js -> dist/template_code
+ * When in source: source/utils/template-loader.ts -> source/template_code
+ */
+function getTemplateDir() {
+    let templateDir = join(__dirname, '..', 'template_code');
+    // Check if template directory exists, if not try source location
+    if (!existsSync(templateDir)) {
+        // Try from source location (for development/testing)
+        const sourceTemplateDir = join(__dirname, '..', '..', 'source', 'template_code');
+        if (existsSync(sourceTemplateDir)) {
+            return sourceTemplateDir;
+        }
+    }
+    return templateDir;
+}
+/**
+ * Load a template file and return its content
+ * @param templatePath - Path to template file relative to template_code directory
+ * @returns Template content as string
+ */
+export function loadTemplate(templatePath) {
+    const templateDir = getTemplateDir();
+    const fullPath = join(templateDir, templatePath);
+    try {
+        return readFileSync(fullPath, 'utf-8');
+    }
+    catch (error) {
+        throw new Error(`Template not found: ${fullPath}. Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+}
+/**
+ * Load a template and replace placeholders
+ * @param templatePath - Path to template file relative to template_code directory
+ * @param replacements - Object with placeholder keys and replacement values
+ * @returns Template content with replacements applied
+ */
+export function loadTemplateWithReplacements(templatePath, replacements) {
+    let content = loadTemplate(templatePath);
+    // Replace all placeholders in format {{KEY}}
+    for (const [key, value] of Object.entries(replacements)) {
+        const placeholder = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
+        content = content.replace(placeholder, value);
+    }
+    return content;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pni",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "CLI tool for creating Nuxt/Vue projects with Three.js and CSS variables setup",
 	"license": "MIT",
 	"bin": {