npm - @nqlib/nqui - Versions diffs - 0.4.3 → 0.4.5 - Mend

@nqlib/nqui 0.4.3 → 0.4.5

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 (156) hide show

package/INSTALLATION.md +234 -0
package/README.md +109 -151
package/dist/button-CJHdCq9I.js +155 -0
package/dist/button-R304rhsj.cjs +1 -0
package/dist/calendar.cjs.js +1 -1
package/dist/calendar.es.js +1 -1
package/dist/carousel-D1FMVglR.cjs +1 -0
package/dist/carousel-U7RZhYZj.js +179 -0
package/dist/carousel.cjs.js +1 -1
package/dist/carousel.es.js +1 -1
package/dist/command-palette-DCtLpM3Q.js +694 -0
package/dist/command-palette-MHc03bBf.cjs +5 -0
package/dist/command.cjs.js +1 -1
package/dist/command.es.js +1 -1
package/dist/components/custom/color-picker.d.ts +1 -1
package/dist/components/custom/color-picker.d.ts.map +1 -1
package/dist/components/custom/color-slider.d.ts +4 -10
package/dist/components/custom/color-slider.d.ts.map +1 -1
package/dist/components/custom/enhanced-radio-group.d.ts +13 -4
package/dist/components/custom/enhanced-radio-group.d.ts.map +1 -1
package/dist/components/custom/enhanced-tabs.d.ts.map +1 -1
package/dist/components/debug/debug-features.d.ts +29 -0
package/dist/components/debug/debug-features.d.ts.map +1 -0
package/dist/components/debug/debug-panel.d.ts.map +1 -1
package/dist/components/error-boundary.d.ts +20 -0
package/dist/components/error-boundary.d.ts.map +1 -0
package/dist/components/index.d.ts +103 -0
package/dist/components/index.d.ts.map +1 -0
package/dist/components/ui/badge.d.ts +16 -5
package/dist/components/ui/badge.d.ts.map +1 -1
package/dist/components/ui/button.d.ts +38 -4
package/dist/components/ui/button.d.ts.map +1 -1
package/dist/components/ui/checkbox.d.ts +16 -2
package/dist/components/ui/checkbox.d.ts.map +1 -1
package/dist/components/ui/combobox.d.ts +2 -1
package/dist/components/ui/combobox.d.ts.map +1 -1
package/dist/components/ui/frosted-glass.d.ts.map +1 -1
package/dist/components/ui/input-group.d.ts +1 -1
package/dist/components/ui/input-group.d.ts.map +1 -1
package/dist/components/ui/pagination.d.ts +3 -2
package/dist/components/ui/pagination.d.ts.map +1 -1
package/dist/components/ui/radio-group.d.ts +3 -1
package/dist/components/ui/radio-group.d.ts.map +1 -1
package/dist/components/ui/select.d.ts +6 -1
package/dist/components/ui/select.d.ts.map +1 -1
package/dist/components/ui/sidebar.d.ts +1 -1
package/dist/components/ui/sidebar.d.ts.map +1 -1
package/dist/components/ui/slider.d.ts +10 -2
package/dist/components/ui/slider.d.ts.map +1 -1
package/dist/components/ui/sonner.d.ts +18 -2
package/dist/components/ui/sonner.d.ts.map +1 -1
package/dist/components/ui/spinner.d.ts +2 -1
package/dist/components/ui/spinner.d.ts.map +1 -1
package/dist/components/ui/switch.d.ts +15 -2
package/dist/components/ui/switch.d.ts.map +1 -1
package/dist/components/ui/tabs.d.ts +1 -1
package/dist/components/ui/tabs.d.ts.map +1 -1
package/dist/components/ui/toggle.d.ts +1 -1
package/dist/components/ui/toggle.d.ts.map +1 -1
package/dist/debug-panel-CNKk-No5.cjs +75 -0
package/dist/debug-panel-pg39-6xw.js +9011 -0
package/dist/debug.cjs.js +1 -0
package/dist/debug.es.js +7 -0
package/dist/{drawer-CU4lkcz7.js → drawer-DO26uhym.js} +31 -31
package/dist/drawer-DVarEy65.cjs +1 -0
package/dist/drawer.cjs.js +1 -1
package/dist/drawer.es.js +1 -1
package/dist/{enhanced-calendar-BENbxw7_.js → enhanced-calendar-BGlsSYJd.js} +1 -1
package/dist/{enhanced-calendar-5PA8CeF7.cjs → enhanced-calendar-C7EQIr6i.cjs} +1 -1
package/dist/entries/debug.d.ts +14 -0
package/dist/entries/debug.d.ts.map +1 -0
package/dist/entries/sonner.d.ts +1 -2
package/dist/entries/sonner.d.ts.map +1 -1
package/dist/hooks/use-mobile.d.ts.map +1 -1
package/dist/hooks/use-scroll-spy.d.ts.map +1 -1
package/dist/index-CI756mSv.cjs +41 -0
package/dist/index-CgfzsUO6.js +1069 -0
package/dist/index.d.ts +2 -98
package/dist/index.d.ts.map +1 -1
package/dist/lib/index.d.ts +9 -0
package/dist/lib/index.d.ts.map +1 -0
package/dist/lib/wrap-inline-label-text.d.ts +7 -0
package/dist/lib/wrap-inline-label-text.d.ts.map +1 -0
package/dist/nqui.cjs.js +49 -245
package/dist/nqui.es.js +7402 -16735
package/dist/sonner-CpmECDBk.js +179 -0
package/dist/sonner-nE9hIalJ.cjs +48 -0
package/dist/sonner.cjs.js +1 -1
package/dist/sonner.es.js +3 -2
package/dist/styles.css +237 -10
package/docs/components/README.md +109 -10
package/docs/components/nqui-badge.md +1 -0
package/docs/components/nqui-button.md +3 -1
package/docs/components/nqui-card.md +8 -0
package/docs/components/nqui-carousel.md +6 -0
package/docs/components/nqui-checkbox.md +38 -1
package/docs/components/nqui-color-slider.md +5 -3
package/docs/components/nqui-combobox.md +58 -37
package/docs/components/nqui-drawer.md +1 -1
package/docs/components/nqui-frosted-glass.md +83 -5
package/docs/components/nqui-radio-group.md +47 -2
package/docs/components/nqui-scroll-area.md +1 -1
package/docs/components/nqui-select.md +2 -2
package/docs/components/nqui-sheet.md +1 -1
package/docs/components/nqui-slider.md +13 -0
package/docs/components/nqui-spinner.md +6 -1
package/docs/components/nqui-switch.md +23 -1
package/docs/components/nqui-tabs.md +11 -1
package/docs/components/nqui-toaster.md +5 -1
package/docs/internal-notes/PUBLISHING.md +46 -4
package/docs/nqui-skills/SKILL.md +106 -0
package/docs/nqui-skills/design-system.md +143 -0
package/docs/nqui-skills/rules/composition.md +183 -0
package/docs/nqui-skills/rules/forms.md +190 -0
package/docs/nqui-skills/rules/icons.md +158 -0
package/docs/nqui-skills/rules/styling.md +192 -0
package/package.json +23 -12
package/scripts/build-styles.js +16 -0
package/scripts/cli.js +1 -0
package/scripts/download-skills.js +91 -0
package/scripts/examples/nextjs-layout-sidebar.tsx +100 -0
package/scripts/examples/nextjs-page-sidebar.tsx +81 -0
package/scripts/examples/vite-app.tsx +135 -0
package/scripts/examples/vite-main.tsx +17 -0
package/scripts/examples.js +92 -6
package/scripts/generate-docs.js +169 -0
package/scripts/init-css.js +34 -14
package/scripts/init-cursor.js +8 -0
package/scripts/init-debug-css.js +4 -2
package/scripts/post-install.js +41 -9
package/scripts/publish-npmjs.js +17 -3
package/scripts/resolve-target-dir.js +20 -1
package/scripts/setup-helper.js +13 -1
package/scripts/verify-build.js +1 -1
package/scripts/wizard.js +12 -7
package/dist/button-CYFTFDKe.cjs +0 -1
package/dist/button-nJvDl3w8.js +0 -44
package/dist/carousel-DEyyJi49.js +0 -179
package/dist/carousel-Dhhz8m5V.cjs +0 -1
package/dist/command-palette-UHk8zZOg.cjs +0 -45
package/dist/command-palette-d-TrdBsM.js +0 -1778
package/dist/components/custom/enhanced-badge.d.ts +0 -33
package/dist/components/custom/enhanced-badge.d.ts.map +0 -1
package/dist/components/custom/enhanced-button.d.ts +0 -34
package/dist/components/custom/enhanced-button.d.ts.map +0 -1
package/dist/components/custom/enhanced-checkbox.d.ts +0 -28
package/dist/components/custom/enhanced-checkbox.d.ts.map +0 -1
package/dist/components/custom/enhanced-combobox.d.ts +0 -35
package/dist/components/custom/enhanced-combobox.d.ts.map +0 -1
package/dist/components/custom/enhanced-select.d.ts +0 -30
package/dist/components/custom/enhanced-select.d.ts.map +0 -1
package/dist/components/custom/enhanced-sonner.d.ts +0 -16
package/dist/components/custom/enhanced-sonner.d.ts.map +0 -1
package/dist/drawer-BcIxWRN8.cjs +0 -1
package/dist/sonner-Co6YpYVs.js +0 -546
package/dist/sonner-DbQhVp8m.cjs +0 -330

package/scripts/download-skills.js ADDED Viewed

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+/**
+ * Download nqui-skills to user's project
+ *
+ * Usage: npx @nqlib/nqui init-skills
+ *
+ * Copies docs/nqui-skills to user's .cursor/nqui-skills
+ * Creates AGENTS.md pointing to the skills
+ */
+import { readFileSync, writeFileSync, existsSync, mkdirSync, cpSync } from 'fs';
+import { join, resolve } from 'path';
+import { getPackageRoot } from './getPackageRoot.js';
+import { resolveTargetDir } from './resolve-target-dir.js';
+const root = getPackageRoot();
+const skillsSource = join(root, 'docs', 'nqui-skills');
+function ensureDir(dir) {
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+}
+export async function downloadSkills({ force = true }) {
+  const targetDir = resolveTargetDir(process.cwd());
+  const cursorDir = join(targetDir, '.cursor');
+  const skillsDest = join(cursorDir, 'nqui-skills');
+  const agentsFile = join(targetDir, 'AGENTS.md');
+  // Create .cursor directory if needed
+  ensureDir(cursorDir);
+  // Copy skills folder
+  if (existsSync(skillsSource)) {
+    if (existsSync(skillsDest) && !force) {
+      console.log('⏭️  nqui-skills already exists. Use --force to overwrite.');
+    } else {
+      cpSync(skillsSource, skillsDest, { recursive: true });
+      console.log('✅ Copied nqui-skills to:', skillsDest);
+    }
+  } else {
+    console.warn('⚠️  Source skills not found:', skillsSource);
+    return;
+  }
+  // Create or update AGENTS.md
+  const agentsContent = `# AGENTS.md
+This file points to nqui skills for AI assistants.
+## nqui Skills
+For component implementation and UI design with @nqlib/nqui, load skills from:
+\`\`\`
+.cursor/nqui-skills/SKILL.md
+\`\`\`
+The skills include:
+- Component implementation guide
+- Design system conventions (sizing, z-index)
+- ToggleGroup usage rules
+- App design patterns
+## How to Use
+When working with nqui components, AI assistants should load:
+- \`.cursor/nqui-skills/SKILL.md\` - main guide
+---
+Generated by nqui. Run \`npx @nqlib/nqui init-skills\` to update.
+`;
+  if (existsSync(agentsFile) && !force) {
+    console.log('⏭️  AGENTS.md already exists. Use --force to overwrite.');
+  } else {
+    writeFileSync(agentsFile, agentsContent);
+    console.log('✅ Created AGENTS.md at:', agentsFile);
+  }
+  console.log('\n📚 nqui-skills installed!');
+  console.log('   Restart Cursor to load the skills.');
+}
+// CLI execution
+const args = process.argv.slice(2);
+const force = args.includes('--force') || args.length === 0;
+downloadSkills({ force }).catch(console.error);

package/scripts/examples/nextjs-layout-sidebar.tsx ADDED Viewed

@@ -0,0 +1,100 @@
+import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
+import "./globals.css";
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarInset,
+  SidebarTrigger,
+  Separator,
+} from "@nqlib/nqui";
+import { NquiLogo } from "@nqlib/nqui";
+import { HomeIcon, SettingsIcon, MailIcon, FileIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import Link from "next/link";
+export const metadata: Metadata = {
+  title: "nqui App",
+  description: "3-column app with sidebar, header, and content area (showcase-style)",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SidebarProvider defaultOpen>
+            <Sidebar>
+              <SidebarHeader>
+                <div className="flex items-center gap-2 px-2 py-4">
+                  <NquiLogo className="w-8 h-8" />
+                  <span className="font-semibold">My App</span>
+                </div>
+              </SidebarHeader>
+              <SidebarContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild>
+                      <Link href="/">
+                        <HugeiconsIcon icon={HomeIcon} className="w-4 h-4" />
+                        <span>Home</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild>
+                      <Link href="/inbox">
+                        <HugeiconsIcon icon={MailIcon} className="w-4 h-4" />
+                        <span>Inbox</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild>
+                      <Link href="/files">
+                        <HugeiconsIcon icon={FileIcon} className="w-4 h-4" />
+                        <span>Files</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild>
+                      <Link href="/settings">
+                        <HugeiconsIcon icon={SettingsIcon} className="w-4 h-4" />
+                        <span>Settings</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarContent>
+            </Sidebar>
+            <SidebarInset className="flex flex-col min-h-screen">
+              <header className="flex h-12 items-center gap-2 border-b px-4 shrink-0 bg-background/95">
+                <SidebarTrigger className="-ml-1" />
+                <Separator orientation="vertical" className="h-4" />
+                <span className="text-sm font-medium">My App</span>
+              </header>
+              <main className="flex-1 min-h-0 flex">
+                {children}
+              </main>
+            </SidebarInset>
+          </SidebarProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/scripts/examples/nextjs-page-sidebar.tsx ADDED Viewed

@@ -0,0 +1,81 @@
+"use client";
+import { Button } from "@nqlib/nqui";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TableOfContents,
+  Input,
+  Label,
+  Checkbox,
+  Separator,
+} from "@nqlib/nqui";
+export default function Home() {
+  return (
+    <div className="flex flex-1 min-h-0">
+      <div className="flex-1 min-w-0 overflow-y-auto p-6">
+        <div className="max-w-3xl space-y-8">
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold">Welcome to My App</h1>
+            <p className="text-muted-foreground">
+              Sample 3-column layout: sidebar, main content, and table of contents (showcase-style).
+            </p>
+          </div>
+          <section className="space-y-4">
+            <h2 id="getting-started" className="text-xl font-semibold scroll-mt-6">
+              Getting Started
+            </h2>
+            <Card>
+              <CardHeader>
+                <CardTitle>Quick start</CardTitle>
+                <CardDescription>
+                  Edit this page to start building your app
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input id="name" placeholder="Enter your name" />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input id="email" type="email" placeholder="Enter your email" />
+                </div>
+                <Checkbox id="terms">Accept terms and conditions</Checkbox>
+                <Separator />
+                <div className="flex gap-2">
+                  <Button variant="default">Submit</Button>
+                  <Button variant="outline">Cancel</Button>
+                </div>
+              </CardContent>
+            </Card>
+          </section>
+          <section className="space-y-4">
+            <h2 id="next-steps" className="text-xl font-semibold scroll-mt-6">
+              Next steps
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              Edit <code className="rounded bg-muted px-1 py-0.5">app/page.tsx</code> to get started.
+            </p>
+          </section>
+        </div>
+      </div>
+      <aside className="w-56 shrink-0 border-l bg-muted/30 p-4 hidden lg:block overflow-y-auto">
+        <TableOfContents
+          autoDetect
+          headingSelector="h2"
+          variant="clerk"
+          enableScrollSpy
+          title="Contents"
+          scrollOffset={80}
+        />
+      </aside>
+    </div>
+  );
+}

package/scripts/examples/vite-app.tsx ADDED Viewed

@@ -0,0 +1,135 @@
+import { Routes, Route } from "react-router-dom";
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarInset,
+  SidebarTrigger,
+  Separator,
+  TableOfContents,
+  NquiLogo,
+} from "@nqlib/nqui";
+import { HomeIcon, SettingsIcon, MailIcon, FileIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Link } from "react-router-dom";
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider defaultOpen>
+      <Sidebar>
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-4">
+            <NquiLogo className="w-8 h-8" />
+            <span className="font-semibold">My App</span>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <Link to="/">
+                  <HugeiconsIcon icon={HomeIcon} className="w-4 h-4" />
+                  <span>Home</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <Link to="/inbox">
+                  <HugeiconsIcon icon={MailIcon} className="w-4 h-4" />
+                  <span>Inbox</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <Link to="/files">
+                  <HugeiconsIcon icon={FileIcon} className="w-4 h-4" />
+                  <span>Files</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton asChild>
+                <Link to="/settings">
+                  <HugeiconsIcon icon={SettingsIcon} className="w-4 h-4" />
+                  <span>Settings</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarContent>
+      </Sidebar>
+      <SidebarInset className="flex flex-col min-h-screen">
+        <header className="flex h-12 items-center gap-2 border-b px-4 shrink-0 bg-background/95">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="h-4" />
+          <span className="text-sm font-medium">My App</span>
+        </header>
+        <main className="flex-1 min-h-0 flex">
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}
+function HomePage() {
+  return (
+    <div className="flex flex-1 min-h-0">
+      <div className="flex-1 min-w-0 overflow-y-auto p-6">
+        <div className="max-w-3xl space-y-8">
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold">Welcome to My App</h1>
+            <p className="text-muted-foreground">
+              Sample 3-column layout: sidebar, main content, and table of contents (showcase-style).
+            </p>
+          </div>
+          <section className="space-y-4">
+            <h2 id="getting-started" className="text-xl font-semibold scroll-mt-6">
+              Getting Started
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              Edit <code className="rounded bg-muted px-1 py-0.5">App.tsx</code> to get started.
+            </p>
+          </section>
+          <section className="space-y-4">
+            <h2 id="next-steps" className="text-xl font-semibold scroll-mt-6">
+              Next steps
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              Add routes and pages. The right column shows a table of contents from headings on this page.
+            </p>
+          </section>
+        </div>
+      </div>
+      <aside className="w-56 shrink-0 border-l bg-muted/30 p-4 hidden lg:block overflow-y-auto">
+        <TableOfContents
+          autoDetect
+          headingSelector="h2"
+          variant="clerk"
+          enableScrollSpy
+          title="Contents"
+          scrollOffset={80}
+        />
+      </aside>
+    </div>
+  );
+}
+export default function App() {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/inbox" element={<div className="p-6">Inbox – Coming soon</div>} />
+        <Route path="/files" element={<div className="p-6">Files – Coming soon</div>} />
+        <Route path="/settings" element={<div className="p-6">Settings – Coming soon</div>} />
+      </Routes>
+    </Layout>
+  );
+}

package/scripts/examples/vite-main.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ThemeProvider } from "next-themes";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+// Required dependencies: npm install @nqlib/nqui tw-animate-css next-themes hugeicons-core-free-icons hugeicons-react react-router-dom
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
+  </StrictMode>
+);

package/scripts/examples.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { askQuestion } from './wizard.js';
 /**
  * Copy Next.js example files to user's project
  */
-export async function copyNextJsExamples(framework, { force }) {
+export async function copyNextJsExamples(framework, { force, sidebar }) {
   if (framework !== 'nextjs') {
     return;
   }
@@ -21,9 +21,95 @@ export async function copyNextJsExamples(framework, { force }) {
     ? join(cwd, 'src', 'app')
     : join(cwd, 'app');
+  // Choose examples based on sidebar flag
+  const examples = sidebar
+    ? [
+        { src: 'nextjs-page-sidebar.tsx', dest: join(appDir, 'page.tsx'), name: 'page.tsx' },
+        { src: 'nextjs-layout-sidebar.tsx', dest: join(appDir, 'layout.tsx'), name: 'layout.tsx' },
+      ]
+    : [
+        { src: 'nextjs-page.tsx', dest: join(appDir, 'page.tsx'), name: 'page.tsx' },
+        { src: 'nextjs-layout.tsx', dest: join(appDir, 'layout.tsx'), name: 'layout.tsx' },
+      ];
+  const copied = [];
+  const existing = [];
+  // Check which files exist
+  for (const { dest, name } of examples) {
+    if (existsSync(dest)) {
+      existing.push({ dest, name });
+    }
+  }
+  // Ask about overwriting if files exist and force is not set
+  let shouldOverwrite = force;
+  if (existing.length > 0 && !force) {
+    const fileList = existing.map(e => e.name).join(' and ');
+    const answer = await askQuestion(
+      `\n⚠️  ${fileList} already exist(s). Overwrite? (y/n): `
+    );
+    shouldOverwrite = answer === 'y';
+  }
+  for (const { src, dest, name } of examples) {
+    const srcPath = join(examplesDir, src);
+    if (!existsSync(srcPath)) {
+      console.warn(`⚠️  Example file not found: ${srcPath}`);
+      continue;
+    }
+    if (existsSync(dest) && !shouldOverwrite) {
+      console.log(`⏭️  Skipped: ${dest} (already exists)`);
+      continue;
+    }
+    const content = readFileSync(srcPath, 'utf8');
+    writeFileSync(dest, content, 'utf8');
+    copied.push(dest);
+    console.log(`✅ ${existsSync(dest) && shouldOverwrite ? 'Overwritten' : 'Created'}: ${dest}`);
+  }
+  if (copied.length > 0) {
+    const deps = sidebar
+      ? 'npm install @nqlib/nqui @hugeicons/react @hugeicons/core-free-icons tw-animate-css next-themes react-router-dom'
+      : 'npm install @nqlib/nqui tw-animate-css next-themes';
+    console.log(`\n📝 Required dependencies for example files:`);
+    console.log(`   ${deps}\n`);
+    if (sidebar) {
+      console.log(`   Note: 3-column layout uses Sidebar, TableOfContents; main.tsx includes ThemeProvider + BrowserRouter for Vite.\n`);
+    }
+  }
+  return copied;
+}
+/**
+ * Copy Vite example files to user's project
+ */
+export async function copyViteExamples(framework, { force, sidebar }) {
+  if (framework !== 'vite') {
+    return;
+  }
+  const root = getPackageRoot();
+  const examplesDir = join(root, 'scripts', 'examples');
+  const cwd = process.cwd();
+  // Determine src directory
+  const srcDir = existsSync(join(cwd, 'src')) ? join(cwd, 'src') : join(cwd, 'src');
+  // Ensure src directory exists
+  if (!existsSync(srcDir)) {
+    console.warn('⚠️  src directory not found');
+    return;
+  }
+  // Choose examples based on sidebar flag (3-column with TOC when sidebar; same files + main for ThemeProvider)
   const examples = [
-    { src: 'nextjs-page.tsx', dest: join(appDir, 'page.tsx'), name: 'page.tsx' },
-    { src: 'nextjs-layout.tsx', dest: join(appDir, 'layout.tsx'), name: 'layout.tsx' },
+    { src: 'vite-app.tsx', dest: join(srcDir, 'App.tsx'), name: 'App.tsx' },
+    { src: 'vite-main.tsx', dest: join(srcDir, 'main.tsx'), name: 'main.tsx' },
   ];
   const copied = [];
@@ -66,11 +152,11 @@ export async function copyNextJsExamples(framework, { force }) {
   }
   if (copied.length > 0) {
+    const deps = 'npm install @nqlib/nqui tw-animate-css next-themes @hugeicons/react @hugeicons/core-free-icons react-router-dom';
     console.log(`\n📝 Required dependencies for example files:`);
-    console.log(`   npm install @nqlib/nqui tw-animate-css next-themes\n`);
-    console.log(`   Make sure your globals.css includes the setup from nqui/nqui-setup.css\n`);
+    console.log(`   ${deps}`);
+    console.log(`   Note: For Vite, wrap your app with ThemeProvider and BrowserRouter in main.tsx\n`);
   }
   return copied;
 }