drivn 1.7.2 → 1.8.0

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {Command}from'commander';import*as e from'@clack/prompts';import i from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';var A={next:"Next.js",react:"React"};function B(t){let o=join(t,"package.json");if(!existsSync(o))throw new Error("package.json not found");let a=JSON.parse(readFileSync(o,"utf-8")),b={...a.dependencies,...a.devDependencies},p="react";b.next&&(p="next");let g=existsSync(join(t,"src")),u=existsSync(join(t,"tsconfig.json"));return {framework:p,srcDir:g,typescript:u}}var V="drivn.config.json";function $(t){let o=join(t,V);return existsSync(o)?JSON.parse(readFileSync(o,"utf-8")):null}function _(t,o){let a=join(t,V);writeFileSync(a,JSON.stringify(o,null,2));}function Le(t){existsSync(t)||mkdirSync(t,{recursive:true});}function d(t,o){Le(dirname(t)),writeFileSync(t,o);}function O(t){return readFileSync(t,"utf-8")}function m(t){return existsSync(t)}function P(t){return existsSync(join(t,"pnpm-lock.yaml"))?"pnpm":"npm"}function y(t,o){let a=o.join(" ");return t==="pnpm"?`pnpm add ${a}`:`npm install ${a}`}function F(t){return t==="pnpm"?"pnpm dlx":"npx"}var S=`@import "tailwindcss";
+import {Command}from'commander';import*as n from'@clack/prompts';import m from'picocolors';import {join,dirname}from'path';import {execSync}from'child_process';import {existsSync,readFileSync,writeFileSync,mkdirSync}from'fs';import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {StdioServerTransport}from'@modelcontextprotocol/sdk/server/stdio.js';import {z as z$1}from'zod';var z={next:"Next.js",react:"React"};function $(e){let r=join(e,"package.json");if(!existsSync(r))throw new Error("package.json not found");let t=JSON.parse(readFileSync(r,"utf-8")),a={...t.dependencies,...t.devDependencies},l="react";a.next&&(l="next");let d=existsSync(join(e,"src")),p=existsSync(join(e,"tsconfig.json"));return {framework:l,srcDir:d,typescript:p}}var G="drivn.config.json";function U(e){let r=join(e,G);return existsSync(r)?JSON.parse(readFileSync(r,"utf-8")):null}function K(e,r){let t=join(e,G);writeFileSync(t,JSON.stringify(r,null,2));}function Ae(e){existsSync(e)||mkdirSync(e,{recursive:true});}function b(e,r){Ae(dirname(e)),writeFileSync(e,r);}function H(e){return readFileSync(e,"utf-8")}function x(e){return existsSync(e)}function I(e){return existsSync(join(e,"pnpm-lock.yaml"))?"pnpm":"npm"}function R(e,r){let t=r.join(" ");return e==="pnpm"?`pnpm add ${t}`:`npm install ${t}`}function W(e){return e==="pnpm"?"pnpm dlx":"npx"}var C=`@import "tailwindcss";
 
 :root {
   /* Surfaces */
@@ -70,7 +70,7 @@ body {
   color: var(--color-foreground);
   font-family: system-ui, -apple-system, sans-serif;
 }
-`,M=`
+`,k=`
 /* Drivn Dark/Light Theme */
 :root,
 [data-theme="dark"] {
@@ -136,13 +136,13 @@ body {
   /* Special Surfaces */
   --overlay: hsl(0 0% 0% / 0.18);
 }
-`;var Ae=`import { type ClassValue, clsx } from 'clsx'
+`;var ze=`import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-`,Be=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function He(t){for(let o of Be)if(m(join(t,o)))return o;return null}async function G(){let t=process.cwd();console.log(""),console.log(i.bgCyan(i.bold(i.black(" Drivn "))));let o;try{o=B(t),e.log.success(`Detected ${i.cyan(A[o.framework])}`);}catch{e.log.error("No package.json found. Run this command in a project directory."),e.outro("Setup cancelled"),process.exit(1);}if(m(join(t,"drivn.config.json"))){let r=await e.confirm({message:"Config already exists. Overwrite?",initialValue:false});(e.isCancel(r)||!r)&&(e.cancel("Setup cancelled"),process.exit(0));}let a=o.srcDir?"src/components/ui":"components/ui",b=o.srcDir?"src/utils":"utils",p=await e.group({components:()=>e.text({message:"Where should components be installed?",placeholder:a,defaultValue:a}),utils:()=>e.text({message:"Where should utilities be placed?",placeholder:b,defaultValue:b})},{onCancel:()=>{e.cancel("Setup cancelled"),process.exit(0);}}),g={framework:o.framework,typescript:o.typescript,paths:{components:p.components,utils:p.utils},installed:[]},u=o.typescript?"ts":"js",v=join(t,p.utils,`cn.${u}`);m(v)||d(v,Ae);let h=He(t);if(h){let r=await e.confirm({message:`Found ${i.cyan(h)}. Add Drivn color tokens?`,initialValue:true});!e.isCancel(r)&&r&&(d(join(t,h),S),g.paths.globals=h,e.log.success(`Color tokens written to ${i.cyan(h)}`));}else {let r=o.srcDir?"src/styles/globals.css":"styles/globals.css",c=await e.text({message:"Where should the globals CSS file be created?",placeholder:r,defaultValue:r});e.isCancel(c)||(d(join(t,c),S),g.paths.globals=c,e.log.success(`Color tokens written to ${i.cyan(c)}`));}_(t,g);let x=P(t),l=F(x),N=["clsx","tailwind-merge","lucide-react"],n=e.spinner();n.start("Installing dependencies");try{execSync(y(x,N),{cwd:t,stdio:"ignore"}),n.stop("Dependencies installed");}catch{n.stop("Failed to install dependencies"),e.log.warn(`Run manually: ${y(x,N)}`);}e.log.info(`Add components with: ${i.cyan(`${l} drivn add button`)}`),e.log.info(`Add dark/light theme: ${i.cyan(`${l} drivn add theme`)}`),e.outro("Drivn initialized");}var K=`'use client'
+`,$e=["src/app/globals.css","src/styles/globals.css","src/styles/globals.scss","app/globals.css"];function Ve(e){for(let r of $e)if(x(join(e,r)))return r;return null}async function Y(){let e=process.cwd();console.log(""),console.log(m.bgCyan(m.bold(m.black(" Drivn "))));let r;try{r=$(e),n.log.success(`Detected ${m.cyan(z[r.framework])}`);}catch{n.log.error("No package.json found. Run this command in a project directory."),n.outro("Setup cancelled"),process.exit(1);}if(x(join(e,"drivn.config.json"))){let s=await n.confirm({message:"Config already exists. Overwrite?",initialValue:false});(n.isCancel(s)||!s)&&(n.cancel("Setup cancelled"),process.exit(0));}let t=r.srcDir?"src/components/ui":"components/ui",a=r.srcDir?"src/utils":"utils",l=await n.group({components:()=>n.text({message:"Where should components be installed?",placeholder:t,defaultValue:t}),utils:()=>n.text({message:"Where should utilities be placed?",placeholder:a,defaultValue:a})},{onCancel:()=>{n.cancel("Setup cancelled"),process.exit(0);}}),d={framework:r.framework,typescript:r.typescript,paths:{components:l.components,utils:l.utils},installed:[]},p=r.typescript?"ts":"js",f=join(e,l.utils,`cn.${p}`);x(f)||b(f,ze);let g=Ve(e);if(g){let s=await n.confirm({message:`Found ${m.cyan(g)}. Add Drivn color tokens?`,initialValue:true});!n.isCancel(s)&&s&&(b(join(e,g),C),d.paths.globals=g,n.log.success(`Color tokens written to ${m.cyan(g)}`));}else {let s=r.srcDir?"src/styles/globals.css":"styles/globals.css",i=await n.text({message:"Where should the globals CSS file be created?",placeholder:s,defaultValue:s});n.isCancel(i)||(b(join(e,i),C),d.paths.globals=i,n.log.success(`Color tokens written to ${m.cyan(i)}`));}K(e,d);let N=I(e),u=W(N),h=["clsx","tailwind-merge","lucide-react"],o=n.spinner();o.start("Installing dependencies");try{execSync(R(N,h),{cwd:e,stdio:"ignore"}),o.stop("Dependencies installed");}catch{o.stop("Failed to install dependencies"),n.log.warn(`Run manually: ${R(N,h)}`);}n.log.info(`Add components with: ${m.cyan(`${u} drivn add button`)}`),n.log.info(`Add dark/light theme: ${m.cyan(`${u} drivn add theme`)}`),n.outro("Drivn initialized");}var q=`'use client'
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 
@@ -161,7 +161,7 @@ export function ThemeProvider({
     </NextThemesProvider>
   )
 }
-`;var U=`'use client'
+`;var J=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -293,7 +293,7 @@ export const Accordion = Object.assign(AccordionRoot, {
   Trigger,
   Content
 })
-`;var Y=`import * as React from 'react'
+`;var X=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -341,7 +341,7 @@ export function Alert({
     </div>
   )
 }
-`;var W=`import * as React from 'react'
+`;var Z=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 interface AspectRatioProps {
@@ -364,7 +364,7 @@ export function AspectRatio({
     </div>
   )
 }
-`;var q=`import * as React from 'react'
+`;var Q=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -408,7 +408,7 @@ export function Avatar({
     </div>
   )
 }
-`;var X=`import * as React from 'react'
+`;var ee=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -438,7 +438,7 @@ export function Badge({ variant = 'default', className, children }: BadgeProps)
     </span>
   )
 }
-`;var J=`import * as React from 'react'
+`;var te=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 import { ChevronRight, MoreHorizontal } from 'lucide-react'
 
@@ -554,7 +554,7 @@ export const Breadcrumb = Object.assign(BreadcrumbRoot, {
   Separator: BreadcrumbSeparator,
   Ellipsis,
 })
-`;var Q=`import * as React from 'react'
+`;var ne=`import * as React from 'react'
 import { Loader2 } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -634,7 +634,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({
 )
 
 Button.displayName = 'Button'
-`;var Z=`'use client'
+`;var oe=`'use client'
 
 import * as React from 'react'
 import {
@@ -810,7 +810,7 @@ export { type DateRange, type Locale }
 export const Calendar = Object.assign(CalendarRoot, {
   Range
 })
-`;var ee=`'use client'
+`;var re=`'use client'
 
 import * as React from 'react'
 import { CalendarDays } from 'lucide-react'
@@ -1034,7 +1034,7 @@ export { type DateRange, type Locale }
 export const DatePicker = Object.assign(DatePickerRoot, {
   Range,
 })
-`;var te=`'use client'
+`;var se=`'use client'
 
 import * as React from 'react'
 import { Command as CommandPrimitive } from 'cmdk'
@@ -1265,7 +1265,7 @@ export const Command = Object.assign(CommandRoot, {
   Shortcut,
   Dialog: CommandDialog,
 })
-`;var ne=`'use client'
+`;var ae=`'use client'
 
 import * as React from 'react'
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
@@ -1514,7 +1514,7 @@ export const Carousel = Object.assign(CarouselRoot, {
   Next,
   Dots
 })
-`;var oe=`import * as React from 'react'
+`;var ie=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -1581,7 +1581,7 @@ export const Card = Object.assign(CardRoot, {
   Preview,
   Info
 })
-`;var re=`'use client'
+`;var ce=`'use client'
 
 import * as React from 'react'
 import { Check } from 'lucide-react'
@@ -1644,7 +1644,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
 )
 
 Checkbox.displayName = 'Checkbox'
-`;var se=`'use client'
+`;var le=`'use client'
 
 import * as React from 'react'
 import { X } from 'lucide-react'
@@ -1800,7 +1800,7 @@ export const Dialog = Object.assign(DialogRoot, {
   Trigger,
   Content,
 })
-`;var ae=`'use client'
+`;var de=`'use client'
 
 import * as React from 'react'
 import { X } from 'lucide-react'
@@ -2019,7 +2019,7 @@ export const Drawer = Object.assign(DrawerRoot, {
   Header,
   Footer,
 })
-`;var ce=`'use client'
+`;var pe=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2217,7 +2217,7 @@ export const Dropdown = Object.assign(DropdownRoot, {
   Label,
   Separator: DropdownSeparator
 })
-`;var ie=`import * as React from 'react'
+`;var me=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2240,7 +2240,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 )
 
 Input.displayName = 'Input'
-`;var le=`import * as React from 'react'
+`;var ue=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2297,7 +2297,7 @@ function Group({
 }
 
 export const Kbd = Object.assign(KbdRoot, { Group })
-`;var de=`import * as React from 'react'
+`;var fe=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 export function Label({
@@ -2314,7 +2314,7 @@ export function Label({
     />
   )
 }
-`;var pe=`import * as React from 'react'
+`;var ge=`import * as React from 'react'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import { cn } from '@/utils/cn'
 
@@ -2447,7 +2447,7 @@ export const Pagination = Object.assign(PaginationRoot, {
   Next,
   Ellipsis: PaginationEllipsis,
 })
-`;var ue=`'use client'
+`;var he=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2552,7 +2552,7 @@ export const Popover = Object.assign(PopoverRoot, {
   Trigger,
   Content
 })
-`;var me=`import * as React from 'react'
+`;var be=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2590,7 +2590,7 @@ export function Progress({
     </div>
   )
 }
-`;var fe=`'use client'
+`;var ve=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -2739,7 +2739,7 @@ function useRadioGroup() {
 }
 
 export const RadioGroup = Object.assign(RadioGroupRoot, { Item })
-`;var ge=`'use client'
+`;var xe=`'use client'
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
@@ -2893,7 +2893,7 @@ export const Select = Object.assign(SelectRoot, {
   Menu,
   Option
 })
-`;var he=`import * as React from 'react'
+`;var ye=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -2917,7 +2917,7 @@ export function Separator({
     />
   )
 }
-`;var be=`'use client'
+`;var Ne=`'use client'
 
 import * as React from 'react'
 import { ChevronDown, PanelLeft } from 'lucide-react'
@@ -3203,7 +3203,7 @@ export const Sidebar = Object.assign(SidebarRoot, {
   Separator: SidebarSeparator,
   CollapseButton,
 })
-`;var ve=`'use client'
+`;var Ce=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3348,7 +3348,7 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(({
 )
 
 Slider.displayName = 'Slider'
-`;var xe=`'use client'
+`;var we=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3389,7 +3389,7 @@ export function Switch({
     </button>
   )
 }
-`;var ye=`'use client'
+`;var Re=`'use client'
 
 import * as React from 'react'
 import { cn } from '@/utils/cn'
@@ -3503,7 +3503,7 @@ export const Tabs = Object.assign(TabsRoot, {
   Tab,
   Panel
 })
-`;var Ne=`import * as React from 'react'
+`;var ke=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3530,7 +3530,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
 ))
 
 Textarea.displayName = 'Textarea'
-`;var Ce=`'use client'
+`;var Pe=`'use client'
 
 import * as React from 'react'
 import { Toaster as Sonner, toast } from 'sonner'
@@ -3573,7 +3573,7 @@ function Toaster() {
 }
 
 export { Toaster, toast }
-`;var Re=`import * as React from 'react'
+`;var De=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3747,7 +3747,7 @@ export const Table = Object.assign(TableRoot, {
   Head,
   Cell,
 })
-`;var we=`import * as React from 'react'
+`;var Se=`import * as React from 'react'
 import { cn } from '@/utils/cn'
 
 const styles = {
@@ -3792,7 +3792,7 @@ export function Tooltip({
     </span>
   )
 }
-`;var ke=`
+`;var Te=`
 /* react-day-picker theme integration */
 .rdp-root {
   --rdp-accent-color: var(--primary);
@@ -3803,4 +3803,126 @@ export function Tooltip({
   --rdp-selected-border: none;
   --rdp-day_button-border: none;
 }
-`,w=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"aspect-ratio",description:"Maintain consistent width-to-height ratios for images, videos, and embedded content",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"drawer",description:"Slide-in panel with side positioning, header/footer, and overlay",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"kbd",description:"Keyboard key display for shortcuts and hotkeys",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"sidebar",description:"Collapsible sidebar with dot notation, icon items, groups, and layout variants",dependencies:[],npmDependencies:[]},{name:"slider",description:"Range slider with pointer drag, step snapping, and size variants",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],D={accordion:U,alert:Y,"aspect-ratio":W,avatar:q,badge:X,breadcrumb:J,button:Q,calendar:Z,"date-picker":ee,command:te,carousel:ne,card:oe,checkbox:re,dialog:se,drawer:ae,dropdown:ce,input:ie,kbd:le,label:de,pagination:pe,popover:ue,progress:me,"radio-group":fe,select:ge,separator:he,sidebar:be,slider:ve,switch:xe,table:Re,tabs:ye,textarea:Ne,theme:K,toast:Ce,tooltip:we};async function Pe(t){let o=process.cwd();e.intro("drivn add");let a=$(o);if(a||(e.log.error("Drivn is not initialized. Run npx drivn@latest create"),e.outro("Cancelled"),process.exit(1)),!t||!t.length){let n=await e.multiselect({message:"Select components to add",options:w.map(r=>({label:r.name,hint:r.description,value:r.name})),required:true});e.isCancel(n)&&(e.cancel("Cancelled"),process.exit(0)),t=n;}let b=t.filter(n=>!w.find(r=>r.name===n));b.length&&(e.log.error(`Unknown components: ${b.join(", ")}`),e.log.info("Available: "+w.map(n=>n.name).join(", ")),e.outro("Cancelled"),process.exit(1));let p=t.includes("theme"),g=t.filter(n=>n!=="theme"),u=new Set,v=new Set,h=n=>{if(u.has(n))return;let r=w.find(c=>c.name===n);r&&(r.dependencies.forEach(c=>h(c)),r.npmDependencies?.forEach(c=>v.add(c)),u.add(n));};g.forEach(h),p&&v.add("next-themes");let x=[...u].filter(n=>!g.includes(n));x.length&&e.log.info(`Required dependency: ${x.join(", ")}`);let l=a.typescript?"tsx":"jsx",N=join(o,a.paths.components);for(let n of u){let r=join(N,`${n}.${l}`);if(m(r)){let C=await e.confirm({message:`${n}.${l} exists. Overwrite?`,initialValue:false});if(e.isCancel(C)||!C){e.log.warn(`Skipped ${n}`);continue}}let c=D[n];c=c.replace(/@\/utils/g,`@/${a.paths.utils.replace(/^src\//,"")}`),d(r,c),e.log.success(`${n} \u2192 ${a.paths.components}/${n}.${l}`);}if(p){let n=join(N,`theme-provider.${l}`);if(m(n)){let c=await e.confirm({message:`theme-provider.${l} exists. Overwrite?`,initialValue:false});!e.isCancel(c)&&c?(d(n,D.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`)):e.log.warn("Skipped theme-provider");}else d(n,D.theme),e.log.success(`theme-provider \u2192 ${a.paths.components}/theme-provider.${l}`);if(a.paths.globals){let c=join(o,a.paths.globals);if(m(c)){let C=O(c);C.includes('[data-theme="dark"]')?e.log.warn("Theme tokens already exist in globals \u2014 skipped"):(d(c,C+M),e.log.success(`Theme tokens appended to ${i.cyan(a.paths.globals)}`));}else e.log.warn(`Globals file not found at ${a.paths.globals}`);}else e.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let r=a.paths.components.replace(/^src\//,"@/");e.log.message(""),e.log.info(i.bold("Complete the setup:")),e.log.message(""),e.log.message(i.bold(`${i.cyan("1.")} Import ThemeProvider in your root layout:`)),e.log.message(i.cyan(`   import { ThemeProvider } from "${r}/theme-provider"`)),e.log.message(""),e.log.message(i.bold(`${i.cyan("2.")} Add suppressHydrationWarning to <html>:`)),e.log.message(i.cyan("   <html suppressHydrationWarning>")),e.log.message(""),e.log.message(i.bold(`${i.cyan("3.")} Wrap your app with ThemeProvider:`)),e.log.message(i.cyan("   <ThemeProvider>")),e.log.message(i.cyan("     {children}")),e.log.message(i.cyan("   </ThemeProvider>")),e.log.message("");}if(u.has("calendar")&&a.paths.globals){let n=join(o,a.paths.globals);if(m(n)){let r=O(n);r.includes(".rdp-root")?e.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(d(n,r+ke),e.log.success(`Calendar tokens appended to ${i.cyan(a.paths.globals)}`));}}if(v.size){let n=P(o),r=[...v],c=e.spinner();c.start("Installing packages");try{execSync(y(n,r),{cwd:o,stdio:"ignore"}),c.stop("Packages installed");}catch{c.stop("Failed to install packages"),e.log.warn(`Run manually: ${y(n,r)}`);}}e.outro("Done.");}var Se={version:"1.7.2"};var T=new Command;T.name("drivn").description("Drivn \u2014 Modern UI components").version(Se.version);T.command("create").description("Initialize Drivn in your project").action(G);T.command("add [components...]").description("Add components to your project").action(Pe);T.parse();
+`,v=[{name:"accordion",description:"Collapsible content sections with dot notation and smooth animation",dependencies:[],npmDependencies:[]},{name:"alert",description:"Contextual feedback messages with variants and icons",dependencies:[],npmDependencies:[]},{name:"aspect-ratio",description:"Maintain consistent width-to-height ratios for images, videos, and embedded content",dependencies:[],npmDependencies:[]},{name:"avatar",description:"User avatar with image support and fallback initials",dependencies:[],npmDependencies:[]},{name:"badge",description:"Small status indicator with color variants",dependencies:[],npmDependencies:[]},{name:"breadcrumb",description:"Breadcrumb navigation with auto-separators, ellipsis, and dot notation",dependencies:[],npmDependencies:[]},{name:"button",description:"Button with variants, sizes, loading state, and icon slots",dependencies:[],npmDependencies:[]},{name:"calendar",description:"Date picker powered by react-day-picker with single, range, and dropdown modes",dependencies:[],npmDependencies:["react-day-picker"]},{name:"date-picker",description:"Date picker input with Calendar dropdown for single date and range selection",dependencies:["calendar"],npmDependencies:[]},{name:"command",description:"Searchable command menu with filtering, keyboard navigation, and dialog mode",dependencies:["dialog"],npmDependencies:["cmdk"]},{name:"carousel",description:"Carousel with touch/swipe, navigation arrows, dot indicators, and loop mode",dependencies:["button"],npmDependencies:["embla-carousel-react"]},{name:"card",description:"Container with dot notation preview and info sub-components",dependencies:[],npmDependencies:[]},{name:"checkbox",description:"Checkbox input with label and CSS-only checkmark",dependencies:[],npmDependencies:[]},{name:"dialog",description:"Modal dialog with dot notation, overlay, and escape key",dependencies:["button"],npmDependencies:[]},{name:"drawer",description:"Slide-in panel with side positioning, header/footer, and overlay",dependencies:["button"],npmDependencies:[]},{name:"dropdown",description:"Dropdown menu with dot notation, groups, separators, and click-outside",dependencies:["button"],npmDependencies:[]},{name:"input",description:"Text input with focus ring and disabled state",dependencies:[],npmDependencies:[]},{name:"kbd",description:"Keyboard key display for shortcuts and hotkeys",dependencies:[],npmDependencies:[]},{name:"label",description:"Accessible form label for inputs, checkboxes, and selects",dependencies:[],npmDependencies:[]},{name:"pagination",description:"Page navigation with dot notation, Previous/Next, ellipsis, and active state",dependencies:[],npmDependencies:[]},{name:"popover",description:"Floating content panel with dot notation and click-outside",dependencies:["button"],npmDependencies:[]},{name:"progress",description:"Progress bar with animated fill and ARIA attributes",dependencies:[],npmDependencies:[]},{name:"radio-group",description:"Radio group with dot notation, orientation support, and controlled/uncontrolled selection",dependencies:[],npmDependencies:[]},{name:"select",description:"Custom select with dot notation and composable options",dependencies:[],npmDependencies:[]},{name:"separator",description:"Visual divider with horizontal and vertical orientation",dependencies:[],npmDependencies:[]},{name:"sidebar",description:"Collapsible sidebar with dot notation, icon items, groups, and layout variants",dependencies:[],npmDependencies:[]},{name:"slider",description:"Range slider with pointer drag, step snapping, and size variants",dependencies:[],npmDependencies:[]},{name:"switch",description:"Toggle switch with smooth transition",dependencies:[],npmDependencies:[]},{name:"tabs",description:"Tab navigation with dot notation and panel content",dependencies:[],npmDependencies:[]},{name:"table",description:"Data table with dot notation, striped/bordered variants, and responsive overflow",dependencies:[],npmDependencies:[]},{name:"textarea",description:"Multi-line text input with consistent styling",dependencies:[],npmDependencies:[]},{name:"theme",description:"Dark/light theme support with next-themes and ThemeProvider",dependencies:[],npmDependencies:["next-themes"]},{name:"toast",description:"Toast notifications powered by Sonner",dependencies:[],npmDependencies:["sonner"]},{name:"tooltip",description:"Pure CSS tooltip with 4 position options",dependencies:[],npmDependencies:[]}],w={accordion:J,alert:X,"aspect-ratio":Z,avatar:Q,badge:ee,breadcrumb:te,button:ne,calendar:oe,"date-picker":re,command:se,carousel:ae,card:ie,checkbox:ce,dialog:le,drawer:de,dropdown:pe,input:me,kbd:ue,label:fe,pagination:ge,popover:he,progress:be,"radio-group":ve,select:xe,separator:ye,sidebar:Ne,slider:Ce,switch:we,table:De,tabs:Re,textarea:ke,theme:q,toast:Pe,tooltip:Se};async function Ee(e){let r=process.cwd();n.intro("drivn add");let t=U(r);if(t||(n.log.error("Drivn is not initialized. Run npx drivn@latest create"),n.outro("Cancelled"),process.exit(1)),!e||!e.length){let o=await n.multiselect({message:"Select components to add",options:v.map(s=>({label:s.name,hint:s.description,value:s.name})),required:true});n.isCancel(o)&&(n.cancel("Cancelled"),process.exit(0)),e=o;}let a=e.filter(o=>!v.find(s=>s.name===o));a.length&&(n.log.error(`Unknown components: ${a.join(", ")}`),n.log.info("Available: "+v.map(o=>o.name).join(", ")),n.outro("Cancelled"),process.exit(1));let l=e.includes("theme"),d=e.filter(o=>o!=="theme"),p=new Set,f=new Set,g=o=>{if(p.has(o))return;let s=v.find(i=>i.name===o);s&&(s.dependencies.forEach(i=>g(i)),s.npmDependencies?.forEach(i=>f.add(i)),p.add(o));};d.forEach(g),l&&f.add("next-themes");let N=[...p].filter(o=>!d.includes(o));N.length&&n.log.info(`Required dependency: ${N.join(", ")}`);let u=t.typescript?"tsx":"jsx",h=join(r,t.paths.components);for(let o of p){let s=join(h,`${o}.${u}`);if(x(s)){let D=await n.confirm({message:`${o}.${u} exists. Overwrite?`,initialValue:false});if(n.isCancel(D)||!D){n.log.warn(`Skipped ${o}`);continue}}let i=w[o];i=i.replace(/@\/utils/g,`@/${t.paths.utils.replace(/^src\//,"")}`),b(s,i),n.log.success(`${o} \u2192 ${t.paths.components}/${o}.${u}`);}if(l){let o=join(h,`theme-provider.${u}`);if(x(o)){let i=await n.confirm({message:`theme-provider.${u} exists. Overwrite?`,initialValue:false});!n.isCancel(i)&&i?(b(o,w.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${u}`)):n.log.warn("Skipped theme-provider");}else b(o,w.theme),n.log.success(`theme-provider \u2192 ${t.paths.components}/theme-provider.${u}`);if(t.paths.globals){let i=join(r,t.paths.globals);if(x(i)){let D=H(i);D.includes('[data-theme="dark"]')?n.log.warn("Theme tokens already exist in globals \u2014 skipped"):(b(i,D+k),n.log.success(`Theme tokens appended to ${m.cyan(t.paths.globals)}`));}else n.log.warn(`Globals file not found at ${t.paths.globals}`);}else n.log.warn('No globals path in drivn.config.json. Add "globals" to paths');let s=t.paths.components.replace(/^src\//,"@/");n.log.message(""),n.log.info(m.bold("Complete the setup:")),n.log.message(""),n.log.message(m.bold(`${m.cyan("1.")} Import ThemeProvider in your root layout:`)),n.log.message(m.cyan(`   import { ThemeProvider } from "${s}/theme-provider"`)),n.log.message(""),n.log.message(m.bold(`${m.cyan("2.")} Add suppressHydrationWarning to <html>:`)),n.log.message(m.cyan("   <html suppressHydrationWarning>")),n.log.message(""),n.log.message(m.bold(`${m.cyan("3.")} Wrap your app with ThemeProvider:`)),n.log.message(m.cyan("   <ThemeProvider>")),n.log.message(m.cyan("     {children}")),n.log.message(m.cyan("   </ThemeProvider>")),n.log.message("");}if(p.has("calendar")&&t.paths.globals){let o=join(r,t.paths.globals);if(x(o)){let s=H(o);s.includes(".rdp-root")?n.log.warn("Calendar tokens already exist in globals \u2014 skipped"):(b(o,s+Te),n.log.success(`Calendar tokens appended to ${m.cyan(t.paths.globals)}`));}}if(f.size){let o=I(r),s=[...f],i=n.spinner();i.start("Installing packages");try{execSync(R(o,s),{cwd:r,stdio:"ignore"}),i.stop("Packages installed");}catch{i.stop("Failed to install packages"),n.log.warn(`Run manually: ${R(o,s)}`);}}n.outro("Done.");}var j=`# Drivn Component Conventions
+
+## Core Philosophy
+- **Zero runtime UI deps** \u2014 No Radix, no cva, no external UI primitives. Pure React + Tailwind.
+- **Copy & own** \u2014 Components live in user's codebase. Full control after install.
+
+## Import Convention
+\`\`\`tsx
+import * as React from 'react'
+\`\`\`
+One import, full access to all React APIs via \`React.*\` prefix.
+
+## Dot Notation API
+Use compound sub-components via dot notation:
+\`\`\`tsx
+// Correct
+<Dialog.Content>
+  <Dialog.Header>
+    <Dialog.Title>Title</Dialog.Title>
+  </Dialog.Header>
+</Dialog.Content>
+
+// Wrong \u2014 never use flat names
+<DialogContent>
+  <DialogHeader>
+    <DialogTitle>Title</DialogTitle>
+  </DialogHeader>
+</DialogContent>
+\`\`\`
+
+## const styles Pattern
+All classes live in a \`const styles\` object at the top of the file, never inline in JSX:
+\`\`\`tsx
+const styles = {
+  base: cn(
+    'inline-flex items-center justify-center',
+    'rounded-lg font-medium transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2'
+  ),
+  sizes: {
+    sm: 'h-8 px-3 text-sm gap-1.5',
+    md: 'h-10 px-4 text-sm gap-2',
+    lg: 'h-12 px-6 text-base gap-2.5',
+  },
+  variants: {
+    default: 'bg-primary text-white hover:bg-primary/90',
+    secondary: 'bg-muted text-foreground hover:bg-muted/80',
+    outline: 'border border-border bg-transparent hover:bg-muted/50',
+    destructive: 'bg-destructive text-white hover:bg-destructive/90',
+  },
+}
+\`\`\`
+
+## Type-Safe Variants
+Use \`keyof typeof\` for autocomplete, no magic strings:
+\`\`\`tsx
+interface ButtonProps {
+  variant?: keyof typeof styles.variants
+  size?: keyof typeof styles.sizes
+}
+\`\`\`
+
+## Icon Props
+Pass component references, not JSX elements:
+\`\`\`tsx
+// Correct
+<Button leftIcon={Plus}>Add</Button>
+
+// Wrong
+<Button leftIcon={<Plus />}>Add</Button>
+\`\`\`
+
+## Class Merging
+Use the \`cn()\` utility from \`@/utils/cn\`:
+\`\`\`tsx
+import { cn } from '@/utils/cn'
+// cn is clsx + tailwind-merge
+\`\`\`
+
+## Component Categories
+
+### Simple Components (Button, Badge, Input)
+- Single file, direct props, \`const styles\` object
+- Form elements use \`React.forwardRef\`
+
+### Compound Components (Dialog, Tabs, Dropdown)
+- Dot notation API with context
+- Parent manages state, children consume via context
+- Export pattern: \`const Dialog = Object.assign(DialogRoot, { Content, Header, ... })\`
+
+### Form Components (Input, Textarea, Select)
+- Always use \`React.forwardRef\` for ref forwarding
+- Support \`className\` override via \`cn()\`
+
+## Color System
+- HSL custom properties for all colors
+- Theme switching via \`data-theme\` attribute (not \`class\`)
+- Never use hardcoded hex/rgba \u2014 always reference design tokens
+- Tokens: \`--background\`, \`--foreground\`, \`--primary\`, \`--muted\`, \`--border\`, \`--accent\`, etc.
+- Tailwind usage: \`bg-primary\`, \`text-foreground\`, \`border-border\`
+
+## File Naming
+- kebab-case: \`date-picker.tsx\`, \`radio-group.tsx\`
+- Import from: \`@/components/ui/{name}\`
+
+## Line Width
+- 80 character lines maximum
+- Every component should fit on screen without horizontal scrolling
+
+## Dependencies
+- Components declare internal deps (other Drivn components)
+- Some components need npm packages (react-day-picker, cmdk, embla-carousel-react, sonner)
+- The CLI resolves and installs all dependencies automatically
+`;var L={version:"1.8.0"};function O(e){return v.find(r=>r.name===e)}function Ke(e){let r=new Set,t=a=>{if(r.has(a))return;let l=O(a);l&&(l.dependencies.forEach(d=>t(d)),r.add(a));};return t(e),r.delete(e),[...r]}async function Ie(){let e=new McpServer({name:"drivn",version:L.version});e.tool("list_components","List all available Drivn UI components with descriptions",{},async()=>({content:[{type:"text",text:JSON.stringify(v.map(t=>({name:t.name,description:t.description})),null,2)}]})),e.tool("get_component","Get the full source code and metadata for a Drivn component",{name:z$1.string().describe('Component name (e.g. "button", "dialog")')},async({name:t})=>{let a=O(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=w[t];return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,source:l},null,2)}]}}),e.tool("get_component_metadata","Get metadata only (no source code) for a Drivn component \u2014 useful for planning",{name:z$1.string().describe("Component name")},async({name:t})=>{let a=O(t);if(!a)return {content:[{type:"text",text:`Component "${t}" not found. Use list_components to see available components.`}],isError:true};let l=Ke(t);return {content:[{type:"text",text:JSON.stringify({name:a.name,description:a.description,dependencies:a.dependencies,npmDependencies:a.npmDependencies,allResolvedDependencies:l},null,2)}]}}),e.tool("search_components","Search Drivn components by name or description",{query:z$1.string().describe("Search query")},async({query:t})=>{let a=t.toLowerCase(),l=v.filter(d=>d.name.includes(a)||d.description.toLowerCase().includes(a));return {content:[{type:"text",text:l.length?JSON.stringify(l.map(d=>({name:d.name,description:d.description})),null,2):`No components matching "${t}".`}]}}),e.tool("get_installation_instructions","Get step-by-step installation instructions for one or more components",{components:z$1.array(z$1.string()).describe("Component names to install"),packageManager:z$1.enum(["npm","pnpm"]).optional().describe("Package manager (default: npm)")},async({components:t,packageManager:a})=>{let l=a??"npm",d=new Set,p=new Set,f=[],g=o=>{if(d.has(o))return;let s=O(o);if(!s){f.push(o);return}s.dependencies.forEach(i=>g(i)),s.npmDependencies.forEach(i=>p.add(i)),d.add(o);};if(t.forEach(g),f.length)return {content:[{type:"text",text:`Unknown components: ${f.join(", ")}. Use list_components to see available components.`}],isError:true};let N=l==="pnpm"?"pnpm dlx":"npx",u=l==="pnpm"?"pnpm add":"npm install",h=[];return h.push(`# Install components via CLI
+${N} drivn@latest add ${[...d].join(" ")}`),p.size&&h.push(`# Install required npm dependencies
+${u} ${[...p].join(" ")}`),h.push(`# Components will be installed to your configured components directory
+# (default: src/components/ui/)`),{content:[{type:"text",text:JSON.stringify({componentsToInstall:[...d],npmDependencies:[...p],steps:h},null,2)}]}}),e.tool("get_design_tokens","Get the Drivn CSS design tokens (base globals and theme tokens)",{},async()=>({content:[{type:"text",text:`/* === Base Globals === */
+${C}
+
+/* === Theme Tokens === */
+${k}`}]})),e.tool("get_drivn_rules","Get Drivn coding conventions and component patterns",{},async()=>({content:[{type:"text",text:j}]})),e.resource("drivn-rules","drivn://rules",{description:"Drivn coding conventions and component patterns"},async()=>({contents:[{uri:"drivn://rules",mimeType:"text/markdown",text:j}]})),e.resource("drivn-design-tokens","drivn://design-tokens",{description:"Drivn CSS globals and theme tokens"},async()=>({contents:[{uri:"drivn://design-tokens",mimeType:"text/css",text:`${C}
+
+${k}`}]}));for(let t of v){let a=`drivn://components/${t.name}`;e.resource(`drivn-component-${t.name}`,a,{description:t.description},async()=>({contents:[{uri:a,mimeType:"text/plain",text:w[t.name]}]}));}let r=new StdioServerTransport;await e.connect(r);}var E=new Command;E.name("drivn").description("Drivn \u2014 Modern UI components").version(L.version);E.command("create").description("Initialize Drivn in your project").action(Y);E.command("add [components...]").description("Add components to your project").action(Ee);E.command("mcp").description("Start the Drivn MCP server").action(Ie);E.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drivn",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "Modern UI components for React — add beautiful, accessible components to your project",
   "license": "MIT",
   "type": "module",
@@ -39,8 +39,10 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
+    "@modelcontextprotocol/sdk": "^1.12.0",
     "commander": "^12.1.0",
-    "picocolors": "^1.1.1"
+    "picocolors": "^1.1.1",
+    "zod": "^3.25.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",