pni 1.0.0 → 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
@@ -82,7 +86,7 @@ export default function App({ nuxt = false, vue = false, threejs = false, cssVar
                 await generateCSSVariables(finalProjectType, workingPath, false);
                 // Create typography page after CSS variables are set up
                 if (selectedFeatures.cssVars) {
-                    await createTypographyPage(workingPath);
+                    await createTypographyPage(workingPath, finalProjectType);
                 }
             }
             else {

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/add-three.js

@@ -98,9 +98,24 @@ export async function addThree(currentDir) {
         mkdirSync(composablesTargetDir, { recursive: true });
     }
     // Calculate import path from composables/{directoryName} to three folder
-    // In Nuxt/Vue, @/ resolves to project root (Nuxt) or src (Vue), so we use the path relative to project root
-    const threePathRelative = relative(projectRoot, targetDir).replace(/\\/g, '/');
-    const importPath = `@/${threePathRelative}/World.js`;
+    // The import path should be @/pages/{directoryName}/three/World.js when run in a pages directory
+    const currentPathRelative = relative(projectRoot, currentPath).replace(/\\/g, '/');
+    // Check if the current path is in a pages directory
+    let importPath;
+    if (currentPathRelative.startsWith('pages/')) {
+        // If we're in a pages directory (Vue), use @/pages/{directoryName}/three/World.js
+        importPath = `@/pages/${directoryName}/three/World.js`;
+    }
+    else if (currentPathRelative.startsWith('app/pages/')) {
+        // If we're in app/pages directory (Nuxt), use @/pages/{directoryName}/three/World.js
+        // Note: @/ in Nuxt resolves to project root, so app/pages becomes pages
+        importPath = `@/pages/${directoryName}/three/World.js`;
+    }
+    else {
+        // Otherwise, use the relative path from project root
+        const threePathRelative = relative(projectRoot, targetDir).replace(/\\/g, '/');
+        importPath = `@/${threePathRelative}/World.js`;
+    }
     // Determine file extension based on project type
     const fileExtension = projectType === 'vue' ? 'js' : 'ts';
     // Create usethree.{js|ts}

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>;