basuicn 0.2.9 → 0.3.0

package/registry.json

@@ -167,7 +167,7 @@
       "files": [
         {
           "path": "src/components/ui/calendar/Calendar.tsx",
-          "content": "'use client';\n\nimport * as React from 'react';\nimport { DayPicker, type DateRange, type Matcher } from 'react-day-picker';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport * as locales from 'react-day-picker/locale';\n\nimport 'react-day-picker/dist/style.css';\n\nconst calendarVariants = tv({\n  base: 'rdp-custom',\n  variants: {\n    size: {\n      sm: '[&_.rdp-day]:h-7 [&_.rdp-day]:w-7 [&_.rdp-day]:text-xs',\n      md: '[&_.rdp-day]:h-9 [&_.rdp-day]:w-9 [&_.rdp-day]:text-sm',\n      lg: '[&_.rdp-day]:h-11 [&_.rdp-day]:w-11 [&_.rdp-day]:text-base',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst wrapperVariants = tv({\n  base: 'inline-block rounded-xl border border-border bg-background p-3 shadow-sm',\n});\n\nexport type CalendarMode = 'single' | 'range' | 'multiple';\n\n/** Props for the Calendar component */\nexport interface CalendarProps extends VariantProps<typeof calendarVariants> {\n  /** Selection mode: single date, date range, or multiple dates */\n  mode?: CalendarMode;\n  /** Currently selected value (Date, DateRange, or Date[] depending on mode) */\n  selected?: Date | DateRange | Date[];\n  /** Callback fired when the selection changes */\n  onSelect?: (value: Date | DateRange | Date[] | undefined) => void;\n  /** Disable all dates before today */\n  disablePastDates?: boolean;\n  /** Disable all dates after today */\n  disableFutureDates?: boolean;\n  /** Disable the entire calendar */\n  disabled?: boolean;\n  /** Locale key from react-day-picker/locale (defaults to 'enUS') */\n  locale?: keyof typeof locales;\n  className?: string;\n  /** Additional class name for the outer wrapper */\n  wrapperClassName?: string;\n  /** Number of months to display side by side */\n  numberOfMonths?: number;\n  /** Show days from adjacent months */\n  showOutsideDays?: boolean;\n}\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(({\n  mode = 'single',\n  selected,\n  onSelect,\n  disablePastDates = false,\n  disableFutureDates = false,\n  disabled = false,\n  locale = 'enUS',\n  className,\n  wrapperClassName,\n  size,\n  numberOfMonths = 1,\n  showOutsideDays = true,\n}, ref) => {\n  const getDisabled = (): Matcher | Matcher[] | undefined => {\n    if (disabled) return true;\n    if (disablePastDates && disableFutureDates) return () => true;\n    if (disablePastDates) return { before: new Date() };\n    if (disableFutureDates) return { after: new Date() };\n    return undefined;\n  };\n\n  const commonProps = {\n    locale: locales[locale as keyof typeof locales],\n    disabled: getDisabled(),\n    numberOfMonths,\n    showOutsideDays,\n    className: calendarVariants({ size, className }),\n  };\n\n  return (\n    <div ref={ref} className={wrapperVariants({ className: wrapperClassName })}>\n      {mode === 'range' ? (\n        <DayPicker\n          {...commonProps}\n          mode=\"range\"\n          selected={selected as DateRange | undefined}\n          onSelect={(d) => onSelect?.(d)}\n        />\n      ) : mode === 'multiple' ? (\n        <DayPicker\n          {...commonProps}\n          mode=\"multiple\"\n          selected={selected as Date[] | undefined}\n          onSelect={(d) => onSelect?.(d)}\n        />\n      ) : (\n        <DayPicker\n          {...commonProps}\n          mode=\"single\"\n          selected={selected as Date | undefined}\n          onSelect={(d) => onSelect?.(d)}\n        />\n      )}\n    </div>\n  );\n});\n\nCalendar.displayName = 'Calendar';\n\nexport { Calendar };\n"
+          "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { DayPicker, type DateRange, type Matcher } from 'react-day-picker';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport * as locales from 'react-day-picker/locale';\r\n\r\nimport 'react-day-picker/dist/style.css';\r\n\r\nconst calendarVariants = tv({\r\n  base: 'rdp-custom',\r\n  variants: {\r\n    size: {\r\n      sm: '[&_.rdp-day]:h-7 [&_.rdp-day]:w-7 [&_.rdp-day]:text-xs',\r\n      md: '[&_.rdp-day]:h-9 [&_.rdp-day]:w-9 [&_.rdp-day]:text-sm',\r\n      lg: '[&_.rdp-day]:h-11 [&_.rdp-day]:w-11 [&_.rdp-day]:text-base',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: 'md',\r\n  },\r\n});\r\n\r\nconst wrapperVariants = tv({\r\n  base: 'inline-block rounded-xl border border-border bg-background p-3 shadow-sm',\r\n});\r\n\r\nexport type CalendarMode = 'single' | 'range' | 'multiple';\r\n\r\n/** Props for the Calendar component */\r\nexport interface CalendarProps extends VariantProps<typeof calendarVariants> {\r\n  /** Selection mode: single date, date range, or multiple dates */\r\n  mode?: CalendarMode;\r\n  /** Currently selected value (Date, DateRange, or Date[] depending on mode) */\r\n  selected?: Date | DateRange | Date[];\r\n  /** Callback fired when the selection changes */\r\n  onSelect?: (value: Date | DateRange | Date[] | undefined) => void;\r\n  /** Disable all dates before today */\r\n  disablePastDates?: boolean;\r\n  /** Disable all dates after today */\r\n  disableFutureDates?: boolean;\r\n  /** Disable the entire calendar */\r\n  disabled?: boolean;\r\n  /** Locale key from react-day-picker/locale (defaults to 'enUS') */\r\n  locale?: keyof typeof locales;\r\n  className?: string;\r\n  /** Additional class name for the outer wrapper */\r\n  wrapperClassName?: string;\r\n  /** Number of months to display side by side */\r\n  numberOfMonths?: number;\r\n  /** Show days from adjacent months */\r\n  showOutsideDays?: boolean;\r\n}\r\n\r\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(({\r\n  mode = 'single',\r\n  selected,\r\n  onSelect,\r\n  disablePastDates = false,\r\n  disableFutureDates = false,\r\n  disabled = false,\r\n  locale = 'enUS',\r\n  className,\r\n  wrapperClassName,\r\n  size,\r\n  numberOfMonths = 1,\r\n  showOutsideDays = true,\r\n}, ref) => {\r\n  const getDisabled = (): Matcher | Matcher[] | undefined => {\r\n    if (disabled) return true;\r\n    if (disablePastDates && disableFutureDates) return () => true;\r\n    if (disablePastDates) return { before: new Date() };\r\n    if (disableFutureDates) return { after: new Date() };\r\n    return undefined;\r\n  };\r\n\r\n  const commonProps = {\r\n    locale: locales[locale as keyof typeof locales],\r\n    disabled: getDisabled(),\r\n    numberOfMonths,\r\n    showOutsideDays,\r\n    className: calendarVariants({ size, className }),\r\n  };\r\n\r\n  return (\r\n    <div ref={ref} className={wrapperVariants({ className: wrapperClassName })}>\r\n      {mode === 'range' ? (\r\n        <DayPicker\r\n          {...commonProps}\r\n          mode=\"range\"\r\n          selected={selected as DateRange | undefined}\r\n          onSelect={(d) => onSelect?.(d)}\r\n        />\r\n      ) : mode === 'multiple' ? (\r\n        <DayPicker\r\n          {...commonProps}\r\n          mode=\"multiple\"\r\n          selected={selected as Date[] | undefined}\r\n          onSelect={(d) => onSelect?.(d)}\r\n        />\r\n      ) : (\r\n        <DayPicker\r\n          {...commonProps}\r\n          mode=\"single\"\r\n          selected={selected as Date | undefined}\r\n          onSelect={(d) => onSelect?.(d)}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nCalendar.displayName = 'Calendar';\r\n\r\nexport { Calendar };\r\n"
         }
       ]
     },
@@ -195,7 +195,7 @@
       "files": [
         {
           "path": "src/components/ui/carousel/Carousel.tsx",
-          "content": "import * as React from 'react';\nimport { useKeenSlider, type KeenSliderOptions, type KeenSliderPlugin, type KeenSliderInstance } from 'keen-slider/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport 'keen-slider/keen-slider.min.css';\n\n// ─── Variants ─────────────────────────────────────────────────────────────────\n\nconst carouselVariants = tv({\n  slots: {\n    root:     'relative w-full select-none',\n    viewport: 'keen-slider overflow-hidden rounded-xl',\n    slide:    'keen-slider__slide',\n    arrow:    [\n      'absolute top-1/2 -translate-y-1/2 z-10',\n      'flex items-center justify-center',\n      'h-9 w-9 rounded-full',\n      'bg-background/80 backdrop-blur-sm border border-border shadow-md',\n      'text-foreground transition-all duration-150',\n      'hover:bg-background hover:scale-105',\n      'disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:scale-100',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',\n    ],\n    dotsWrapper: 'flex justify-center gap-1.5 mt-3',\n    dot: [\n      'h-1.5 rounded-full bg-border transition-all duration-300',\n      'hover:bg-muted-foreground cursor-pointer',\n    ],\n  },\n});\n\nconst { root, viewport, slide, arrow, dotsWrapper, dot } = carouselVariants();\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface CarouselContextValue {\n  instanceRef: React.MutableRefObject<KeenSliderInstance | null>;\n  currentSlide: number;\n  slideCount: number;\n  loop: boolean;\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null);\n\nfunction useCarousel() {\n  const ctx = React.useContext(CarouselContext);\n  if (!ctx) throw new Error('useCarousel must be used within <Carousel>');\n  return ctx;\n}\n\n// ─── AutoPlay plugin ──────────────────────────────────────────────────────────\n\nexport function AutoPlayPlugin(interval = 3000): KeenSliderPlugin {\n  return (slider) => {\n    let timeout: ReturnType<typeof setTimeout>;\n    let mouseOver = false;\n\n    const clearNext = () => clearTimeout(timeout);\n    const next = () => {\n      clearNext();\n      timeout = setTimeout(() => {\n        if (!mouseOver) slider.next();\n      }, interval);\n    };\n\n    slider.on('created', () => {\n      slider.container.addEventListener('mouseover', () => { mouseOver = true; clearNext(); });\n      slider.container.addEventListener('mouseout',  () => { mouseOver = false; next(); });\n      next();\n    });\n    slider.on('dragStarted',  clearNext);\n    slider.on('animationEnded', next);\n    slider.on('updated',      next);\n    slider.on('destroyed',    clearNext);\n  };\n}\n\n// ─── WheelControls plugin ────────────────────────────────────────────────────\n\nexport const WheelControlsPlugin: KeenSliderPlugin = (slider) => {\n  let touchTimeout: ReturnType<typeof setTimeout>;\n  let position = { x: 0, y: 0 };\n  let wheelActive = false;\n\n  const dispatch = (e: WheelEvent, name: string) => {\n    position.x -= e.deltaX;\n    position.y -= e.deltaY;\n    slider.container.dispatchEvent(new CustomEvent(name, { detail: { x: position.x, y: position.y } }));\n  };\n\n  const wheelStart = (e: WheelEvent) => {\n    position = { x: e.pageX, y: e.pageY };\n    dispatch(e, 'ksDragStart');\n  };\n\n  const wheel = (e: WheelEvent) => {\n    dispatch(e, 'ksDrag');\n  };\n\n  const wheelEnd = (e: WheelEvent) => {\n    dispatch(e, 'ksDragEnd');\n  };\n\n  const eventWheel = (e: WheelEvent) => {\n    if (!wheelActive) {\n      wheelStart(e);\n      wheelActive = true;\n    }\n    wheel(e);\n    clearTimeout(touchTimeout);\n    touchTimeout = setTimeout(() => {\n      wheelActive = false;\n      wheelEnd(e);\n    }, 50);\n  };\n\n  slider.on('created', () => {\n    slider.container.addEventListener('wheel', eventWheel, { passive: true });\n  });\n  slider.on('destroyed', () => {\n    slider.container.removeEventListener('wheel', eventWheel);\n  });\n};\n\n// ─── MutationPlugin ───────────────────────────────────────────────────────────\n\nexport const MutationPlugin: KeenSliderPlugin = (slider) => {\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach(() => slider.update());\n  });\n  slider.on('created', () => {\n    observer.observe(slider.container, { childList: true });\n  });\n  slider.on('destroyed', () => observer.disconnect());\n};\n\n// ─── Carousel3DPlugin ─────────────────────────────────────────────────────────\n\n/**\n * 3-D rotating carousel plugin.\n * Wrap the `keen-slider` div inside a perspective scene:\n *   <div style={{ perspective: '1000px' }}>\n *     <div ref={sliderRef} style={{ transformStyle: 'preserve-3d' }} …>\n *       {slides}\n *     </div>\n *   </div>\n *\n * @param depth  translateZ radius in px (default 280). For N slides of width W:\n *               depth ≈ (W / 2) / Math.tan(Math.PI / N)\n */\nexport function Carousel3DPlugin(depth = 280): KeenSliderPlugin {\n  return (slider) => {\n    function applyRotation() {\n      const deg = 360 * slider.track.details.progress;\n      slider.container.style.transform = `translateZ(-${depth}px) rotateY(${-deg}deg)`;\n    }\n\n    slider.on('created', () => {\n      const perSlide = 360 / slider.slides.length;\n      slider.slides.forEach((el, i) => {\n        el.style.transform = `rotateY(${perSlide * i}deg) translateZ(${depth}px)`;\n      });\n      applyRotation();\n    });\n\n    slider.on('detailsChanged', applyRotation);\n  };\n}\n\n// ─── ResizePlugin ─────────────────────────────────────────────────────────────\n\nexport const ResizePlugin: KeenSliderPlugin = (slider) => {\n  const observer = new ResizeObserver(() => slider.update());\n  slider.on('created',   () => observer.observe(slider.container));\n  slider.on('destroyed', () => observer.disconnect());\n};\n\n// ─── Root ─────────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps {\n  children: React.ReactNode;\n  /** Loop back to start after last slide */\n  loop?: boolean;\n  /** Auto-advance interval in ms; `false` to disable */\n  autoPlay?: number | false;\n  /** Initial slide index */\n  initial?: number;\n  /** Slides to show per view */\n  slidesPerView?: number;\n  /** Gap between slides in px */\n  spacing?: number;\n  /** Drag / swipe enabled */\n  drag?: boolean;\n  /** Vertical orientation — must also provide `height` */\n  vertical?: boolean;\n  /** Explicit height for the viewport (required for vertical mode) e.g. \"320px\" */\n  height?: string;\n  /** Scroll mode */\n  mode?: 'snap' | 'free' | 'free-snap';\n  /** Enable mouse-wheel navigation */\n  wheelControls?: boolean;\n  /** Watch DOM mutations and auto-update */\n  mutationObserver?: boolean;\n  /** Breakpoint overrides — keyed by media query string */\n  breakpoints?: KeenSliderOptions['breakpoints'];\n  /** Called when the active slide changes */\n  onSlideChange?: (index: number) => void;\n  /** Called on every position change — provides progress 0-1 */\n  onDetailsChanged?: (progress: number, rel: number) => void;\n  /** Called once the slider is ready */\n  onCreated?: (instance: CarouselContextValue['instanceRef']['current']) => void;\n  /** Extra className applied to the inner viewport div */\n  viewportClassName?: string;\n  className?: string;\n}\n\nconst Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\n  (\n    {\n      children,\n      loop = false,\n      autoPlay = false,\n      initial = 0,\n      slidesPerView = 1,\n      spacing = 16,\n      drag = true,\n      vertical = false,\n      height,\n      mode = 'snap',\n      wheelControls = false,\n      mutationObserver = false,\n      breakpoints,\n      onSlideChange,\n      onDetailsChanged,\n      onCreated,\n      viewportClassName,\n      className,\n    },\n    ref\n  ) => {\n    const [currentSlide, setCurrentSlide] = React.useState(initial);\n    const [slideCount, setSlideCount] = React.useState(0);\n\n    const plugins: KeenSliderPlugin[] = [];\n    if (autoPlay !== false) plugins.push(AutoPlayPlugin(autoPlay));\n    if (wheelControls)      plugins.push(WheelControlsPlugin);\n    if (mutationObserver)   plugins.push(MutationPlugin);\n    plugins.push(ResizePlugin);\n\n    const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\n      {\n        loop,\n        initial,\n        drag,\n        vertical,\n        mode,\n        breakpoints,\n        slides: { perView: slidesPerView, spacing },\n        slideChanged(s) {\n          setCurrentSlide(s.track.details.rel);\n          onSlideChange?.(s.track.details.rel);\n        },\n        detailsChanged(s) {\n          onDetailsChanged?.(s.track.details.progress, s.track.details.rel);\n        },\n        created(s) {\n          setSlideCount(s.track.details.slides.length);\n          onCreated?.(s);\n        },\n        updated(s) {\n          setSlideCount(s.track.details.slides.length);\n        },\n      },\n      plugins\n    );\n\n    // Separate CarouselSlide children from navigation children\n    const slides: React.ReactNode[] = [];\n    const navigation: React.ReactNode[] = [];\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && (child.type as { displayName?: string }).displayName === 'CarouselSlide') {\n        slides.push(child);\n      } else {\n        navigation.push(child);\n      }\n    });\n\n    return (\n      <CarouselContext.Provider value={{ instanceRef, currentSlide, slideCount, loop }}>\n        <div ref={ref} className={root({ className })} data-testid=\"carousel\">\n          <div\n            ref={sliderRef}\n            className={cn(viewport(), viewportClassName)}\n            style={height ? { height } : undefined}\n          >\n            {slides}\n          </div>\n          {navigation}\n        </div>\n      </CarouselContext.Provider>\n    );\n  }\n);\nCarousel.displayName = 'Carousel';\n\n// ─── CarouselSlide ────────────────────────────────────────────────────────────\n\nexport interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nconst CarouselSlide = React.forwardRef<HTMLDivElement, CarouselSlideProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={slide({ className })} {...props}>\n      {children}\n    </div>\n  )\n);\nCarouselSlide.displayName = 'CarouselSlide';\n\n// ─── CarouselPrev / CarouselNext ──────────────────────────────────────────────\n\nexport interface CarouselArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n}\n\nconst CarouselPrev = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\n  ({ className, ...props }, ref) => {\n    const { instanceRef, currentSlide, loop } = useCarousel();\n    const disabled = !loop && currentSlide === 0;\n\n    return (\n      <button\n        ref={ref}\n        aria-label=\"Previous slide\"\n        disabled={disabled}\n        onClick={() => instanceRef.current?.prev()}\n        className={arrow({ className: cn('left-2', className) })}\n        {...props}\n      >\n        <ChevronLeft className=\"h-4 w-4\" />\n      </button>\n    );\n  }\n);\nCarouselPrev.displayName = 'CarouselPrev';\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\n  ({ className, ...props }, ref) => {\n    const { instanceRef, currentSlide, slideCount, loop } = useCarousel();\n    const disabled = !loop && currentSlide === slideCount - 1;\n\n    return (\n      <button\n        ref={ref}\n        aria-label=\"Next slide\"\n        disabled={disabled}\n        onClick={() => instanceRef.current?.next()}\n        className={arrow({ className: cn('right-2', className) })}\n        {...props}\n      >\n        <ChevronRight className=\"h-4 w-4\" />\n      </button>\n    );\n  }\n);\nCarouselNext.displayName = 'CarouselNext';\n\n// ─── CarouselDots ─────────────────────────────────────────────────────────────\n\nexport interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n  ({ className, ...props }, ref) => {\n    const { instanceRef, currentSlide, slideCount } = useCarousel();\n\n    if (slideCount === 0) return null;\n\n    return (\n      <div ref={ref} className={dotsWrapper({ className })} role=\"tablist\" aria-label=\"Carousel navigation\" {...props}>\n        {Array.from({ length: slideCount }).map((_, i) => (\n          <button\n            key={i}\n            role=\"tab\"\n            aria-selected={i === currentSlide}\n            aria-label={`Go to slide ${i + 1}`}\n            onClick={() => instanceRef.current?.moveToIdx(i)}\n            className={dot({\n              className: cn(\n                i === currentSlide\n                  ? 'w-6 bg-primary'\n                  : 'w-1.5 bg-border hover:bg-muted-foreground'\n              ),\n            })}\n          />\n        ))}\n      </div>\n    );\n  }\n);\nCarouselDots.displayName = 'CarouselDots';\n\n// ─── CarouselProgress ─────────────────────────────────────────────────────────\n\nexport interface CarouselProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst CarouselProgress = React.forwardRef<HTMLDivElement, CarouselProgressProps>(\n  ({ className, ...props }, ref) => {\n    const { currentSlide, slideCount } = useCarousel();\n\n    const pct = slideCount > 1\n      ? Math.round((currentSlide / (slideCount - 1)) * 100)\n      : 100;\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuenow={pct}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label=\"Carousel progress\"\n        className={cn('w-full h-1 bg-border rounded-full overflow-hidden mt-3', className)}\n        {...props}\n      >\n        <div\n          className=\"h-full bg-primary rounded-full transition-all duration-300\"\n          style={{ width: `${pct}%` }}\n        />\n      </div>\n    );\n  }\n);\nCarouselProgress.displayName = 'CarouselProgress';\n\n// ─── CarouselCounter ──────────────────────────────────────────────────────────\n\nexport interface CarouselCounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n}\n\nconst CarouselCounter = React.forwardRef<HTMLSpanElement, CarouselCounterProps>(\n  ({ className, ...props }, ref) => {\n    const { currentSlide, slideCount } = useCarousel();\n\n    return (\n      <span\n        ref={ref}\n        aria-live=\"polite\"\n        aria-label=\"Slide counter\"\n        className={cn('text-xs text-muted-foreground tabular-nums', className)}\n        {...props}\n      >\n        {currentSlide + 1} / {slideCount}\n      </span>\n    );\n  }\n);\nCarouselCounter.displayName = 'CarouselCounter';\n\n// ─── Exports ──────────────────────────────────────────────────────────────────\n\nexport {\n  Carousel,\n  CarouselSlide,\n  CarouselPrev,\n  CarouselNext,\n  CarouselDots,\n  CarouselProgress,\n  CarouselCounter,\n  useCarousel,\n};\n"
+          "content": "import * as React from 'react';\r\nimport { useKeenSlider, type KeenSliderOptions, type KeenSliderPlugin, type KeenSliderInstance } from 'keen-slider/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\r\nimport 'keen-slider/keen-slider.min.css';\r\n\r\n// ─── Variants ─────────────────────────────────────────────────────────────────\r\n\r\nconst carouselVariants = tv({\r\n  slots: {\r\n    root:     'relative w-full select-none',\r\n    viewport: 'keen-slider overflow-hidden rounded-xl',\r\n    slide:    'keen-slider__slide',\r\n    arrow:    [\r\n      'absolute top-1/2 -translate-y-1/2 z-10',\r\n      'flex items-center justify-center',\r\n      'h-9 w-9 rounded-full',\r\n      'bg-background/80 backdrop-blur-sm border border-border shadow-md',\r\n      'text-foreground transition-all duration-150',\r\n      'hover:bg-background hover:scale-105',\r\n      'disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:scale-100',\r\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',\r\n    ],\r\n    dotsWrapper: 'flex justify-center gap-1.5 mt-3',\r\n    dot: [\r\n      'h-1.5 rounded-full bg-border transition-all duration-300',\r\n      'hover:bg-muted-foreground cursor-pointer',\r\n    ],\r\n  },\r\n});\r\n\r\nconst { root, viewport, slide, arrow, dotsWrapper, dot } = carouselVariants();\r\n\r\n// ─── Context ──────────────────────────────────────────────────────────────────\r\n\r\ninterface CarouselContextValue {\r\n  instanceRef: React.MutableRefObject<KeenSliderInstance | null>;\r\n  currentSlide: number;\r\n  slideCount: number;\r\n  loop: boolean;\r\n}\r\n\r\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null);\r\n\r\nfunction useCarousel() {\r\n  const ctx = React.useContext(CarouselContext);\r\n  if (!ctx) throw new Error('useCarousel must be used within <Carousel>');\r\n  return ctx;\r\n}\r\n\r\n// ─── AutoPlay plugin ──────────────────────────────────────────────────────────\r\n\r\nexport function AutoPlayPlugin(interval = 3000): KeenSliderPlugin {\r\n  return (slider) => {\r\n    let timeout: ReturnType<typeof setTimeout>;\r\n    let mouseOver = false;\r\n\r\n    const clearNext = () => clearTimeout(timeout);\r\n    const next = () => {\r\n      clearNext();\r\n      timeout = setTimeout(() => {\r\n        if (!mouseOver) slider.next();\r\n      }, interval);\r\n    };\r\n\r\n    slider.on('created', () => {\r\n      slider.container.addEventListener('mouseover', () => { mouseOver = true; clearNext(); });\r\n      slider.container.addEventListener('mouseout',  () => { mouseOver = false; next(); });\r\n      next();\r\n    });\r\n    slider.on('dragStarted',  clearNext);\r\n    slider.on('animationEnded', next);\r\n    slider.on('updated',      next);\r\n    slider.on('destroyed',    clearNext);\r\n  };\r\n}\r\n\r\n// ─── WheelControls plugin ────────────────────────────────────────────────────\r\n\r\nexport const WheelControlsPlugin: KeenSliderPlugin = (slider) => {\r\n  let touchTimeout: ReturnType<typeof setTimeout>;\r\n  let position = { x: 0, y: 0 };\r\n  let wheelActive = false;\r\n\r\n  const dispatch = (e: WheelEvent, name: string) => {\r\n    position.x -= e.deltaX;\r\n    position.y -= e.deltaY;\r\n    slider.container.dispatchEvent(new CustomEvent(name, { detail: { x: position.x, y: position.y } }));\r\n  };\r\n\r\n  const wheelStart = (e: WheelEvent) => {\r\n    position = { x: e.pageX, y: e.pageY };\r\n    dispatch(e, 'ksDragStart');\r\n  };\r\n\r\n  const wheel = (e: WheelEvent) => {\r\n    dispatch(e, 'ksDrag');\r\n  };\r\n\r\n  const wheelEnd = (e: WheelEvent) => {\r\n    dispatch(e, 'ksDragEnd');\r\n  };\r\n\r\n  const eventWheel = (e: WheelEvent) => {\r\n    if (!wheelActive) {\r\n      wheelStart(e);\r\n      wheelActive = true;\r\n    }\r\n    wheel(e);\r\n    clearTimeout(touchTimeout);\r\n    touchTimeout = setTimeout(() => {\r\n      wheelActive = false;\r\n      wheelEnd(e);\r\n    }, 50);\r\n  };\r\n\r\n  slider.on('created', () => {\r\n    slider.container.addEventListener('wheel', eventWheel, { passive: true });\r\n  });\r\n  slider.on('destroyed', () => {\r\n    slider.container.removeEventListener('wheel', eventWheel);\r\n  });\r\n};\r\n\r\n// ─── MutationPlugin ───────────────────────────────────────────────────────────\r\n\r\nexport const MutationPlugin: KeenSliderPlugin = (slider) => {\r\n  const observer = new MutationObserver((mutations) => {\r\n    mutations.forEach(() => slider.update());\r\n  });\r\n  slider.on('created', () => {\r\n    observer.observe(slider.container, { childList: true });\r\n  });\r\n  slider.on('destroyed', () => observer.disconnect());\r\n};\r\n\r\n// ─── Carousel3DPlugin ─────────────────────────────────────────────────────────\r\n\r\n/**\r\n * 3-D rotating carousel plugin.\r\n * Wrap the `keen-slider` div inside a perspective scene:\r\n *   <div style={{ perspective: '1000px' }}>\r\n *     <div ref={sliderRef} style={{ transformStyle: 'preserve-3d' }} …>\r\n *       {slides}\r\n *     </div>\r\n *   </div>\r\n *\r\n * @param depth  translateZ radius in px (default 280). For N slides of width W:\r\n *               depth ≈ (W / 2) / Math.tan(Math.PI / N)\r\n */\r\nexport function Carousel3DPlugin(depth = 280): KeenSliderPlugin {\r\n  return (slider) => {\r\n    function applyRotation() {\r\n      const deg = 360 * slider.track.details.progress;\r\n      slider.container.style.transform = `translateZ(-${depth}px) rotateY(${-deg}deg)`;\r\n    }\r\n\r\n    slider.on('created', () => {\r\n      const perSlide = 360 / slider.slides.length;\r\n      slider.slides.forEach((el, i) => {\r\n        el.style.transform = `rotateY(${perSlide * i}deg) translateZ(${depth}px)`;\r\n      });\r\n      applyRotation();\r\n    });\r\n\r\n    slider.on('detailsChanged', applyRotation);\r\n  };\r\n}\r\n\r\n// ─── ResizePlugin ─────────────────────────────────────────────────────────────\r\n\r\nexport const ResizePlugin: KeenSliderPlugin = (slider) => {\r\n  const observer = new ResizeObserver(() => slider.update());\r\n  slider.on('created',   () => observer.observe(slider.container));\r\n  slider.on('destroyed', () => observer.disconnect());\r\n};\r\n\r\n// ─── Root ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselProps {\r\n  children: React.ReactNode;\r\n  /** Loop back to start after last slide */\r\n  loop?: boolean;\r\n  /** Auto-advance interval in ms; `false` to disable */\r\n  autoPlay?: number | false;\r\n  /** Initial slide index */\r\n  initial?: number;\r\n  /** Slides to show per view */\r\n  slidesPerView?: number;\r\n  /** Gap between slides in px */\r\n  spacing?: number;\r\n  /** Drag / swipe enabled */\r\n  drag?: boolean;\r\n  /** Vertical orientation — must also provide `height` */\r\n  vertical?: boolean;\r\n  /** Explicit height for the viewport (required for vertical mode) e.g. \"320px\" */\r\n  height?: string;\r\n  /** Scroll mode */\r\n  mode?: 'snap' | 'free' | 'free-snap';\r\n  /** Enable mouse-wheel navigation */\r\n  wheelControls?: boolean;\r\n  /** Watch DOM mutations and auto-update */\r\n  mutationObserver?: boolean;\r\n  /** Breakpoint overrides — keyed by media query string */\r\n  breakpoints?: KeenSliderOptions['breakpoints'];\r\n  /** Called when the active slide changes */\r\n  onSlideChange?: (index: number) => void;\r\n  /** Called on every position change — provides progress 0-1 */\r\n  onDetailsChanged?: (progress: number, rel: number) => void;\r\n  /** Called once the slider is ready */\r\n  onCreated?: (instance: CarouselContextValue['instanceRef']['current']) => void;\r\n  /** Extra className applied to the inner viewport div */\r\n  viewportClassName?: string;\r\n  className?: string;\r\n}\r\n\r\nconst Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\r\n  (\r\n    {\r\n      children,\r\n      loop = false,\r\n      autoPlay = false,\r\n      initial = 0,\r\n      slidesPerView = 1,\r\n      spacing = 16,\r\n      drag = true,\r\n      vertical = false,\r\n      height,\r\n      mode = 'snap',\r\n      wheelControls = false,\r\n      mutationObserver = false,\r\n      breakpoints,\r\n      onSlideChange,\r\n      onDetailsChanged,\r\n      onCreated,\r\n      viewportClassName,\r\n      className,\r\n    },\r\n    ref\r\n  ) => {\r\n    const [currentSlide, setCurrentSlide] = React.useState(initial);\r\n    const [slideCount, setSlideCount] = React.useState(0);\r\n\r\n    const plugins: KeenSliderPlugin[] = [];\r\n    if (autoPlay !== false) plugins.push(AutoPlayPlugin(autoPlay));\r\n    if (wheelControls)      plugins.push(WheelControlsPlugin);\r\n    if (mutationObserver)   plugins.push(MutationPlugin);\r\n    plugins.push(ResizePlugin);\r\n\r\n    const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\r\n      {\r\n        loop,\r\n        initial,\r\n        drag,\r\n        vertical,\r\n        mode,\r\n        breakpoints,\r\n        slides: { perView: slidesPerView, spacing },\r\n        slideChanged(s) {\r\n          setCurrentSlide(s.track.details.rel);\r\n          onSlideChange?.(s.track.details.rel);\r\n        },\r\n        detailsChanged(s) {\r\n          onDetailsChanged?.(s.track.details.progress, s.track.details.rel);\r\n        },\r\n        created(s) {\r\n          setSlideCount(s.track.details.slides.length);\r\n          onCreated?.(s);\r\n        },\r\n        updated(s) {\r\n          setSlideCount(s.track.details.slides.length);\r\n        },\r\n      },\r\n      plugins\r\n    );\r\n\r\n    // Separate CarouselSlide children from navigation children\r\n    const slides: React.ReactNode[] = [];\r\n    const navigation: React.ReactNode[] = [];\r\n    React.Children.forEach(children, (child) => {\r\n      if (React.isValidElement(child) && (child.type as { displayName?: string }).displayName === 'CarouselSlide') {\r\n        slides.push(child);\r\n      } else {\r\n        navigation.push(child);\r\n      }\r\n    });\r\n\r\n    return (\r\n      <CarouselContext.Provider value={{ instanceRef, currentSlide, slideCount, loop }}>\r\n        <div ref={ref} className={root({ className })} data-testid=\"carousel\">\r\n          <div\r\n            ref={sliderRef}\r\n            className={cn(viewport(), viewportClassName)}\r\n            style={height ? { height } : undefined}\r\n          >\r\n            {slides}\r\n          </div>\r\n          {navigation}\r\n        </div>\r\n      </CarouselContext.Provider>\r\n    );\r\n  }\r\n);\r\nCarousel.displayName = 'Carousel';\r\n\r\n// ─── CarouselSlide ────────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst CarouselSlide = React.forwardRef<HTMLDivElement, CarouselSlideProps>(\r\n  ({ className, children, ...props }, ref) => (\r\n    <div ref={ref} className={slide({ className })} {...props}>\r\n      {children}\r\n    </div>\r\n  )\r\n);\r\nCarouselSlide.displayName = 'CarouselSlide';\r\n\r\n// ─── CarouselPrev / CarouselNext ──────────────────────────────────────────────\r\n\r\nexport interface CarouselArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  className?: string;\r\n}\r\n\r\nconst CarouselPrev = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\r\n  ({ className, ...props }, ref) => {\r\n    const { instanceRef, currentSlide, loop } = useCarousel();\r\n    const disabled = !loop && currentSlide === 0;\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        aria-label=\"Previous slide\"\r\n        disabled={disabled}\r\n        onClick={() => instanceRef.current?.prev()}\r\n        className={arrow({ className: cn('left-2', className) })}\r\n        {...props}\r\n      >\r\n        <ChevronLeft className=\"h-4 w-4\" />\r\n      </button>\r\n    );\r\n  }\r\n);\r\nCarouselPrev.displayName = 'CarouselPrev';\r\n\r\nconst CarouselNext = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\r\n  ({ className, ...props }, ref) => {\r\n    const { instanceRef, currentSlide, slideCount, loop } = useCarousel();\r\n    const disabled = !loop && currentSlide === slideCount - 1;\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        aria-label=\"Next slide\"\r\n        disabled={disabled}\r\n        onClick={() => instanceRef.current?.next()}\r\n        className={arrow({ className: cn('right-2', className) })}\r\n        {...props}\r\n      >\r\n        <ChevronRight className=\"h-4 w-4\" />\r\n      </button>\r\n    );\r\n  }\r\n);\r\nCarouselNext.displayName = 'CarouselNext';\r\n\r\n// ─── CarouselDots ─────────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  className?: string;\r\n}\r\n\r\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\r\n  ({ className, ...props }, ref) => {\r\n    const { instanceRef, currentSlide, slideCount } = useCarousel();\r\n\r\n    if (slideCount === 0) return null;\r\n\r\n    return (\r\n      <div ref={ref} className={dotsWrapper({ className })} role=\"tablist\" aria-label=\"Carousel navigation\" {...props}>\r\n        {Array.from({ length: slideCount }).map((_, i) => (\r\n          <button\r\n            key={i}\r\n            role=\"tab\"\r\n            aria-selected={i === currentSlide}\r\n            aria-label={`Go to slide ${i + 1}`}\r\n            onClick={() => instanceRef.current?.moveToIdx(i)}\r\n            className={dot({\r\n              className: cn(\r\n                i === currentSlide\r\n                  ? 'w-6 bg-primary'\r\n                  : 'w-1.5 bg-border hover:bg-muted-foreground'\r\n              ),\r\n            })}\r\n          />\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n);\r\nCarouselDots.displayName = 'CarouselDots';\r\n\r\n// ─── CarouselProgress ─────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  className?: string;\r\n}\r\n\r\nconst CarouselProgress = React.forwardRef<HTMLDivElement, CarouselProgressProps>(\r\n  ({ className, ...props }, ref) => {\r\n    const { currentSlide, slideCount } = useCarousel();\r\n\r\n    const pct = slideCount > 1\r\n      ? Math.round((currentSlide / (slideCount - 1)) * 100)\r\n      : 100;\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role=\"progressbar\"\r\n        aria-valuenow={pct}\r\n        aria-valuemin={0}\r\n        aria-valuemax={100}\r\n        aria-label=\"Carousel progress\"\r\n        className={cn('w-full h-1 bg-border rounded-full overflow-hidden mt-3', className)}\r\n        {...props}\r\n      >\r\n        <div\r\n          className=\"h-full bg-primary rounded-full transition-all duration-300\"\r\n          style={{ width: `${pct}%` }}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n);\r\nCarouselProgress.displayName = 'CarouselProgress';\r\n\r\n// ─── CarouselCounter ──────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselCounterProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  className?: string;\r\n}\r\n\r\nconst CarouselCounter = React.forwardRef<HTMLSpanElement, CarouselCounterProps>(\r\n  ({ className, ...props }, ref) => {\r\n    const { currentSlide, slideCount } = useCarousel();\r\n\r\n    return (\r\n      <span\r\n        ref={ref}\r\n        aria-live=\"polite\"\r\n        aria-label=\"Slide counter\"\r\n        className={cn('text-xs text-muted-foreground tabular-nums', className)}\r\n        {...props}\r\n      >\r\n        {currentSlide + 1} / {slideCount}\r\n      </span>\r\n    );\r\n  }\r\n);\r\nCarouselCounter.displayName = 'CarouselCounter';\r\n\r\n// ─── Exports ──────────────────────────────────────────────────────────────────\r\n\r\nexport {\r\n  Carousel,\r\n  CarouselSlide,\r\n  CarouselPrev,\r\n  CarouselNext,\r\n  CarouselDots,\r\n  CarouselProgress,\r\n  CarouselCounter,\r\n  useCarousel,\r\n};\r\n"
         }
       ]
     },
@@ -257,7 +257,7 @@
       "files": [
         {
           "path": "src/components/ui/combobox/ComboBox.tsx",
-          "content": "\"use client\" \r\nimport * as React from 'react';\r\nimport { Combobox as BaseCombobox } from '@base-ui/react';\r\nimport { Check, ChevronDown, X, Loader2 } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst comboboxVariants = tv({\r\n  slots: {\r\n    root: 'flex flex-col gap-1.5 w-full',\r\n    inputContainer: 'flex flex-wrap items-center gap-1.5 min-h-10 w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm focus-within:border-primary disabled:cursor-not-allowed disabled:opacity-50 transition-shadow transition-colors',\r\n    input: 'flex-1 min-w-[120px] bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',\r\n    popup: 'z-50 w-[var(--anchor-width,var(--reference-width))] max-w-[var(--available-width)] overflow-hidden rounded-lg border border-border bg-background text-popover-foreground shadow-[rgba(0,0,0,0.08)_0px_4px_16px] animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n    item: 'cursor-pointer relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n    indicator: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n    chip: 'inline-flex items-center gap-1 rounded bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground outline-none focus:ring-1 focus:ring-primary',\r\n    chipRemove: 'hover:bg-primary/20 rounded-full p-0.5 transition-colors cursor-pointer',\r\n    actionsHeader: 'flex items-center gap-1 p-1 border-b border-border sticky top-0 bg-background z-10',\r\n    actionButton: 'flex-1 text-[10px] uppercase tracking-wider font-bold py-1.5 px-2 rounded-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors text-center',\r\n  }\r\n});\r\n\r\n/** A single option in the ComboBox dropdown */\r\nexport interface ComboBoxOption {\r\n  /** Display text for the option */\r\n  label: string;\r\n  /** Unique value identifying the option */\r\n  value: string;\r\n}\r\n\r\n/** Props for the ComboBox component */\r\nexport interface ComboBoxProps {\r\n  /** Array of selectable options */\r\n  options: ComboBoxOption[];\r\n  /** Label text displayed above the combobox */\r\n  label?: string;\r\n  placeholder?: string;\r\n  /** Controlled selected value (string for single, string[] for multiple) */\r\n  value?: string | string[];\r\n  /** Initial value for uncontrolled usage */\r\n  defaultValue?: string | string[];\r\n  /** Callback fired when the selected value changes */\r\n  onValueChange?: (value: string | string[]) => void;\r\n  /** Enable multi-select mode with chip display */\r\n  multiple?: boolean;\r\n  /** Shows a loading spinner on the dropdown trigger */\r\n  isLoading?: boolean;\r\n  className?: string;\r\n  /** Enable type-ahead filtering of options (default: true) */\r\n  autocomplete?: boolean;\r\n  /** Text shown when no options match the filter */\r\n  emptyText?: string;\r\n  /** Label for the \"select all\" action in multi-select mode */\r\n  selectAllText?: string;\r\n  /** Label for the \"clear all\" action in multi-select mode */\r\n  clearAllText?: string;\r\n  /** Icon rendered at the start (left side) of the input */\r\n  leftIcon?: React.ReactNode;\r\n}\r\n\r\nconst ComboBox = React.forwardRef<HTMLInputElement, ComboBoxProps>(\r\n  ({ options, label, placeholder, value, defaultValue, onValueChange, multiple, isLoading, className, autocomplete = true, emptyText = 'No results found.', selectAllText = 'Select all', clearAllText = 'Clear all', leftIcon }, ref) => {\r\n    const [inputValue, setInputValue] = React.useState('');\r\n    const [internalValue, setInternalValue] = React.useState<string | string[] | null>(defaultValue || (multiple ? [] : null));\r\n    const isSelectingRef = React.useRef(false);\r\n\r\n    const activeValue = value !== undefined ? value : internalValue;\r\n\r\n    const handleValueChange = (newVal: string | string[] | null) => {\r\n      isSelectingRef.current = true;\r\n      if (value === undefined) {\r\n        setInternalValue(newVal);\r\n      }\r\n      if (newVal !== null) {\r\n        onValueChange?.(newVal);\r\n      }\r\n    };\r\n\r\n    const handleInputValueChange = (val: string) => {\r\n      // Bỏ qua cập nhật inputValue khi đang chọn item để tránh nháy popup\r\n      if (isSelectingRef.current) {\r\n        isSelectingRef.current = false;\r\n        return;\r\n      }\r\n      setInputValue(val);\r\n    };\r\n\r\n    const handleClear = (e: React.SyntheticEvent) => {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      handleValueChange(multiple ? [] : null);\r\n      setInputValue('');\r\n    };\r\n\r\n    const hasValue = multiple\r\n      ? Array.isArray(activeValue) && activeValue.length > 0\r\n      : !!activeValue;\r\n\r\n    // Lọc options theo text người dùng đang gõ\r\n    const filteredOptions = React.useMemo(() => {\r\n      if (!inputValue || !autocomplete) return options;\r\n      // Khi đã có value được chọn, input hiển thị label → không filter theo label đó\r\n      if (!multiple && activeValue) {\r\n        const selectedOption = options.find((o) => o.value === activeValue);\r\n        if (selectedOption && inputValue === selectedOption.label) return options;\r\n      }\r\n      return options.filter(opt =>\r\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\r\n      );\r\n    }, [options, inputValue, autocomplete, multiple, activeValue]);\r\n\r\n    const { root, inputContainer, input, popup, item, indicator, chip, chipRemove, actionsHeader, actionButton } = comboboxVariants();\r\n    const inputGroupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n    return (\r\n      <BaseCombobox.Root\r\n        value={activeValue}\r\n        onValueChange={handleValueChange}\r\n        multiple={multiple}\r\n        onInputValueChange={handleInputValueChange}\r\n        autoHighlight\r\n        itemToStringLabel={(val: string) => options.find((o) => o.value === val)?.label ?? val}\r\n      >\r\n        <div className={root({ className })}>\r\n          {label && <label className=\"text-sm font-medium text-foreground\">{label}</label>}\r\n\r\n          <div className=\"relative w-full group\">\r\n            <BaseCombobox.InputGroup ref={inputGroupRef} className={cn(inputContainer(), leftIcon && 'pl-9')}>\r\n              {leftIcon && (\r\n                <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors pointer-events-none\">\r\n                  {leftIcon}\r\n                </div>\r\n              )}\r\n              {multiple ? (\r\n                <BaseCombobox.Chips className=\"flex flex-wrap items-center gap-1.5 flex-1 w-full min-w-0\">\r\n                  {Array.isArray(activeValue) && activeValue.map((val) => {\r\n                    const option = options.find(o => o.value === val);\r\n                    return (\r\n                      <BaseCombobox.Chip key={val} className={chip()}>\r\n                        {option?.label || val}\r\n                        <BaseCombobox.ChipRemove className={chipRemove()}>\r\n                          <X className=\"h-3 w-3\" />\r\n                        </BaseCombobox.ChipRemove>\r\n                      </BaseCombobox.Chip>\r\n                    );\r\n                  })}\r\n                  <BaseCombobox.Input\r\n                    ref={ref}\r\n                    readOnly={!autocomplete}\r\n                    placeholder={Array.isArray(activeValue) && activeValue.length > 0 ? '' : placeholder}\r\n                    className={input()}\r\n                  />\r\n                </BaseCombobox.Chips>\r\n              ) : (\r\n                <BaseCombobox.Input\r\n                  ref={ref}\r\n                  readOnly={!autocomplete}\r\n                  placeholder={placeholder}\r\n                  className={cn(input(), !autocomplete && 'cursor-pointer')}\r\n                />\r\n              )}\r\n\r\n              <div className=\"flex items-center gap-1 shrink-0 ml-auto text-muted-foreground\">\r\n                {hasValue ? (\r\n                  <span\r\n                    role=\"button\"\r\n                    aria-label=\"Clear selection\"\r\n                    onPointerDown={(e) => {\r\n                      e.stopPropagation();\r\n                      handleClear(e);\r\n                    }}\r\n                    onClick={(e) => e.stopPropagation()}\r\n                    className=\"cursor-pointer flex h-5 w-5 items-center justify-center rounded-full hover:bg-red-50 hover:text-red-500 transition-colors pointer-events-auto\"\r\n                  >\r\n                    <X className=\"h-3.5 w-3.5\" />\r\n                  </span>\r\n                ) : (\r\n                  <BaseCombobox.Trigger className=\"transition-transform group-data-open:rotate-180\">\r\n                    {isLoading ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <ChevronDown className=\"h-4 w-4\" />}\r\n                  </BaseCombobox.Trigger>\r\n                )}\r\n              </div>\r\n            </BaseCombobox.InputGroup>\r\n\r\n            <BaseCombobox.Portal>\r\n              <BaseCombobox.Positioner\r\n                anchor={inputGroupRef}\r\n                sideOffset={4}\r\n                style={{ width: 'var(--anchor-width)' }}\r\n              >\r\n                <BaseCombobox.Popup className={cn(popup(), 'min-w-0')}>\r\n                  {multiple && options.length > 0 && (\r\n                    <div className={actionsHeader()}>\r\n                      <button\r\n                        type=\"button\"\r\n                        aria-label={selectAllText}\r\n                        onClick={(e) => {\r\n                          e.preventDefault();\r\n                          handleValueChange(options.map((o) => o.value));\r\n                        }}\r\n                        className={actionButton()}\r\n                      >\r\n                        {selectAllText}\r\n                      </button>\r\n                      <div className=\"w-px h-3 bg-border\" />\r\n                      <button\r\n                        type=\"button\"\r\n                        aria-label={clearAllText}\r\n                        onClick={(e) => {\r\n                          e.preventDefault();\r\n                          handleValueChange([]);\r\n                        }}\r\n                        className={actionButton()}\r\n                      >\r\n                        {clearAllText}\r\n                      </button>\r\n                    </div>\r\n                  )}\r\n                  <BaseCombobox.List className=\"p-1 max-h-[300px] overflow-auto\">\r\n                    {filteredOptions.length === 0 ? (\r\n                      <div className=\"py-2 px-8 text-sm text-muted-foreground italic\">{emptyText}</div>\r\n                    ) : (\r\n                      filteredOptions.map((option) => (\r\n                        <BaseCombobox.Item\r\n                          key={option.value}\r\n                          value={option.value}\r\n                          className={item()}\r\n                        >\r\n                          <BaseCombobox.ItemIndicator className={indicator()}>\r\n                            <Check className=\"h-4 w-4\" />\r\n                          </BaseCombobox.ItemIndicator>\r\n                          {option.label}\r\n                        </BaseCombobox.Item>\r\n                      ))\r\n                    )}\r\n                  </BaseCombobox.List>\r\n                </BaseCombobox.Popup>\r\n              </BaseCombobox.Positioner>\r\n            </BaseCombobox.Portal>\r\n          </div>\r\n        </div>\r\n      </BaseCombobox.Root>\r\n    );\r\n  }\r\n);\r\n\r\nComboBox.displayName = 'ComboBox';\r\n\r\nexport { ComboBox };\r\n"
+          "content": "\"use client\" \r\nimport * as React from 'react';\r\nimport { Combobox as BaseCombobox } from '@base-ui/react';\r\nimport { Check, ChevronDown, X, Loader2 } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst comboboxVariants = tv({\r\n  slots: {\r\n    root: 'flex flex-col gap-1.5 w-full',\r\n    inputContainer: 'flex flex-wrap items-center gap-1.5 min-h-10 w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm focus-within:border-primary disabled:cursor-not-allowed disabled:opacity-50 transition-shadow transition-colors',\r\n    input: 'flex-1 min-w-[120px] bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',\r\n    popup: 'z-999 w-[var(--anchor-width,var(--reference-width))] max-w-[var(--available-width)] overflow-hidden rounded-lg border border-border bg-background text-popover-foreground shadow-[rgba(0,0,0,0.08)_0px_4px_16px] animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n    item: 'cursor-pointer relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n    indicator: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n    chip: 'inline-flex items-center gap-1 rounded bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground outline-none focus:ring-1 focus:ring-primary',\r\n    chipRemove: 'hover:bg-primary/20 rounded-full p-0.5 transition-colors cursor-pointer',\r\n    actionsHeader: 'flex items-center gap-1 p-1 border-b border-border sticky top-0 bg-background z-999',\r\n    actionButton: 'flex-1 text-[10px] uppercase tracking-wider font-bold py-1.5 px-2 rounded-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors text-center',\r\n  }\r\n});\r\n\r\n/** A single option in the ComboBox dropdown */\r\nexport interface ComboBoxOption {\r\n  /** Display text for the option */\r\n  label: string;\r\n  /** Unique value identifying the option */\r\n  value: string;\r\n}\r\n\r\n/** Props for the ComboBox component */\r\nexport interface ComboBoxProps {\r\n  /** Array of selectable options */\r\n  options: ComboBoxOption[];\r\n  /** Label text displayed above the combobox */\r\n  label?: string;\r\n  placeholder?: string;\r\n  /** Controlled selected value (string for single, string[] for multiple) */\r\n  value?: string | string[];\r\n  /** Initial value for uncontrolled usage */\r\n  defaultValue?: string | string[];\r\n  /** Callback fired when the selected value changes */\r\n  onValueChange?: (value: string | string[]) => void;\r\n  /** Enable multi-select mode with chip display */\r\n  multiple?: boolean;\r\n  /** Shows a loading spinner on the dropdown trigger */\r\n  isLoading?: boolean;\r\n  className?: string;\r\n  /** Enable type-ahead filtering of options (default: true) */\r\n  autocomplete?: boolean;\r\n  /** Text shown when no options match the filter */\r\n  emptyText?: string;\r\n  /** Label for the \"select all\" action in multi-select mode */\r\n  selectAllText?: string;\r\n  /** Label for the \"clear all\" action in multi-select mode */\r\n  clearAllText?: string;\r\n  /** Icon rendered at the start (left side) of the input */\r\n  leftIcon?: React.ReactNode;\r\n}\r\n\r\nconst ComboBox = React.forwardRef<HTMLInputElement, ComboBoxProps>(\r\n  ({ options, label, placeholder, value, defaultValue, onValueChange, multiple, isLoading, className, autocomplete = true, emptyText = 'No results found.', selectAllText = 'Select all', clearAllText = 'Clear all', leftIcon }, ref) => {\r\n    const [inputValue, setInputValue] = React.useState('');\r\n    const [internalValue, setInternalValue] = React.useState<string | string[] | null>(defaultValue || (multiple ? [] : null));\r\n    const isSelectingRef = React.useRef(false);\r\n\r\n    const activeValue = value !== undefined ? value : internalValue;\r\n\r\n    const handleValueChange = (newVal: string | string[] | null) => {\r\n      isSelectingRef.current = true;\r\n      if (value === undefined) {\r\n        setInternalValue(newVal);\r\n      }\r\n      if (newVal !== null) {\r\n        onValueChange?.(newVal);\r\n      }\r\n    };\r\n\r\n    const handleInputValueChange = (val: string) => {\r\n      // Bỏ qua cập nhật inputValue khi đang chọn item để tránh nháy popup\r\n      if (isSelectingRef.current) {\r\n        isSelectingRef.current = false;\r\n        return;\r\n      }\r\n      setInputValue(val);\r\n    };\r\n\r\n    const handleClear = (e: React.SyntheticEvent) => {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      handleValueChange(multiple ? [] : null);\r\n      setInputValue('');\r\n    };\r\n\r\n    const hasValue = multiple\r\n      ? Array.isArray(activeValue) && activeValue.length > 0\r\n      : !!activeValue;\r\n\r\n    // Lọc options theo text người dùng đang gõ\r\n    const filteredOptions = React.useMemo(() => {\r\n      if (!inputValue || !autocomplete) return options;\r\n      // Khi đã có value được chọn, input hiển thị label → không filter theo label đó\r\n      if (!multiple && activeValue) {\r\n        const selectedOption = options.find((o) => o.value === activeValue);\r\n        if (selectedOption && inputValue === selectedOption.label) return options;\r\n      }\r\n      return options.filter(opt =>\r\n        opt.label.toLowerCase().includes(inputValue.toLowerCase())\r\n      );\r\n    }, [options, inputValue, autocomplete, multiple, activeValue]);\r\n\r\n    const { root, inputContainer, input, popup, item, indicator, chip, chipRemove, actionsHeader, actionButton } = comboboxVariants();\r\n    const inputGroupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n    return (\r\n      <BaseCombobox.Root\r\n        value={activeValue}\r\n        onValueChange={handleValueChange}\r\n        multiple={multiple}\r\n        onInputValueChange={handleInputValueChange}\r\n        autoHighlight\r\n        itemToStringLabel={(val: string) => options.find((o) => o.value === val)?.label ?? val}\r\n      >\r\n        <div className={root({ className })}>\r\n          {label && <label className=\"text-sm font-medium text-foreground\">{label}</label>}\r\n\r\n          <div className=\"relative w-full group\">\r\n            <BaseCombobox.InputGroup ref={inputGroupRef} className={cn(inputContainer(), leftIcon && 'pl-9')}>\r\n              {leftIcon && (\r\n                <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors pointer-events-none\">\r\n                  {leftIcon}\r\n                </div>\r\n              )}\r\n              {multiple ? (\r\n                <BaseCombobox.Chips className=\"flex flex-wrap items-center gap-1.5 flex-1 w-full min-w-0\">\r\n                  {Array.isArray(activeValue) && activeValue.map((val) => {\r\n                    const option = options.find(o => o.value === val);\r\n                    return (\r\n                      <BaseCombobox.Chip key={val} className={chip()}>\r\n                        {option?.label || val}\r\n                        <BaseCombobox.ChipRemove className={chipRemove()}>\r\n                          <X className=\"h-3 w-3\" />\r\n                        </BaseCombobox.ChipRemove>\r\n                      </BaseCombobox.Chip>\r\n                    );\r\n                  })}\r\n                  <BaseCombobox.Input\r\n                    ref={ref}\r\n                    readOnly={!autocomplete}\r\n                    placeholder={Array.isArray(activeValue) && activeValue.length > 0 ? '' : placeholder}\r\n                    className={input()}\r\n                  />\r\n                </BaseCombobox.Chips>\r\n              ) : (\r\n                <BaseCombobox.Input\r\n                  ref={ref}\r\n                  readOnly={!autocomplete}\r\n                  placeholder={placeholder}\r\n                  className={cn(input(), !autocomplete && 'cursor-pointer')}\r\n                />\r\n              )}\r\n\r\n              <div className=\"flex items-center gap-1 shrink-0 ml-auto text-muted-foreground\">\r\n                {hasValue ? (\r\n                  <span\r\n                    role=\"button\"\r\n                    aria-label=\"Clear selection\"\r\n                    onPointerDown={(e) => {\r\n                      e.stopPropagation();\r\n                      handleClear(e);\r\n                    }}\r\n                    onClick={(e) => e.stopPropagation()}\r\n                    className=\"cursor-pointer flex h-5 w-5 items-center justify-center rounded-full hover:bg-red-50 hover:text-red-500 transition-colors pointer-events-auto\"\r\n                  >\r\n                    <X className=\"h-3.5 w-3.5\" />\r\n                  </span>\r\n                ) : (\r\n                  <BaseCombobox.Trigger className=\"transition-transform group-data-open:rotate-180\">\r\n                    {isLoading ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <ChevronDown className=\"h-4 w-4\" />}\r\n                  </BaseCombobox.Trigger>\r\n                )}\r\n              </div>\r\n            </BaseCombobox.InputGroup>\r\n\r\n            <BaseCombobox.Portal>\r\n              <BaseCombobox.Positioner\r\n                anchor={inputGroupRef}\r\n                sideOffset={4}\r\n                style={{ width: 'var(--anchor-width)', zIndex: 9999 }}\r\n              >\r\n                <BaseCombobox.Popup className={cn(popup(), 'min-w-0')}>\r\n                  {multiple && options.length > 0 && (\r\n                    <div className={actionsHeader()}>\r\n                      <button\r\n                        type=\"button\"\r\n                        aria-label={selectAllText}\r\n                        onClick={(e) => {\r\n                          e.preventDefault();\r\n                          handleValueChange(options.map((o) => o.value));\r\n                        }}\r\n                        className={actionButton()}\r\n                      >\r\n                        {selectAllText}\r\n                      </button>\r\n                      <div className=\"w-px h-3 bg-border\" />\r\n                      <button\r\n                        type=\"button\"\r\n                        aria-label={clearAllText}\r\n                        onClick={(e) => {\r\n                          e.preventDefault();\r\n                          handleValueChange([]);\r\n                        }}\r\n                        className={actionButton()}\r\n                      >\r\n                        {clearAllText}\r\n                      </button>\r\n                    </div>\r\n                  )}\r\n                  <BaseCombobox.List className=\"p-1 max-h-[300px] overflow-auto\">\r\n                    {filteredOptions.length === 0 ? (\r\n                      <div className=\"py-2 px-8 text-sm text-muted-foreground italic\">{emptyText}</div>\r\n                    ) : (\r\n                      filteredOptions.map((option) => (\r\n                        <BaseCombobox.Item\r\n                          key={option.value}\r\n                          value={option.value}\r\n                          className={item()}\r\n                        >\r\n                          <BaseCombobox.ItemIndicator className={indicator()}>\r\n                            <Check className=\"h-4 w-4\" />\r\n                          </BaseCombobox.ItemIndicator>\r\n                          {option.label}\r\n                        </BaseCombobox.Item>\r\n                      ))\r\n                    )}\r\n                  </BaseCombobox.List>\r\n                </BaseCombobox.Popup>\r\n              </BaseCombobox.Positioner>\r\n            </BaseCombobox.Portal>\r\n          </div>\r\n        </div>\r\n      </BaseCombobox.Root>\r\n    );\r\n  }\r\n);\r\n\r\nComboBox.displayName = 'ComboBox';\r\n\r\nexport { ComboBox };\r\n"
         }
       ]
     },
@@ -286,7 +286,7 @@
       "files": [
         {
           "path": "src/components/ui/context-menu/ContextMenu.tsx",
-          "content": "'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { tv } from 'tailwind-variants';\nimport { Check, Circle } from 'lucide-react';\n\nconst contextMenuVariants = tv({\n  slots: {\n    content:\n      'fixed z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95',\n    item: 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n    checkboxItem:\n      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n    radioItem:\n      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n    label: 'px-2 py-1.5 text-sm font-semibold',\n    separator: '-mx-1 my-1 h-px bg-border',\n    shortcut: 'ml-auto text-xs tracking-widest opacity-60',\n    indicatorWrapper: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\n  },\n});\n\nconst styles = contextMenuVariants();\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface ContextMenuState {\n  open: boolean;\n  position: { x: number; y: number };\n}\n\nconst ContextMenuContext = React.createContext<{\n  state: ContextMenuState;\n  close: () => void;\n}>({ state: { open: false, position: { x: 0, y: 0 } }, close: () => {} });\n\n// ─── Root ─────────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuProps {\n  children: React.ReactNode;\n}\n\nconst ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {\n  const [state, setState] = React.useState<ContextMenuState>({\n    open: false,\n    position: { x: 0, y: 0 },\n  });\n\n  const close = React.useCallback(() => setState(s => ({ ...s, open: false })), []);\n\n  // Close on outside click / second right-click / scroll\n  React.useEffect(() => {\n    if (!state.open) return;\n    const handleClose = () => close();\n    document.addEventListener('click', handleClose, { capture: true });\n    document.addEventListener('contextmenu', handleClose, { capture: true });\n    document.addEventListener('scroll', handleClose, { capture: true, passive: true });\n    return () => {\n      document.removeEventListener('click', handleClose, { capture: true });\n      document.removeEventListener('contextmenu', handleClose, { capture: true });\n      document.removeEventListener('scroll', handleClose, { capture: true });\n    };\n  }, [state.open, close]);\n\n  return (\n    <ContextMenuContext.Provider value={{ state, close }}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement(child) && child.type === ContextMenuTrigger) {\n          return React.cloneElement(\n            child as React.ReactElement<{ onContextMenu?: (e: React.MouseEvent) => void }>,\n            {\n              onContextMenu: (e: React.MouseEvent) => {\n                e.preventDefault();\n                e.stopPropagation();\n                setState({ open: true, position: { x: e.clientX, y: e.clientY } });\n              },\n            }\n          );\n        }\n        return child;\n      })}\n    </ContextMenuContext.Provider>\n  );\n};\nContextMenu.displayName = 'ContextMenu';\n\n// ─── Trigger ──────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\n  ({ children, ...props }, ref) => (\n    <div ref={ref} {...props}>{children}</div>\n  )\n);\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n\n// ─── Content ──────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { state, close } = React.useContext(ContextMenuContext);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    // Merge refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [ref]\n    );\n\n    // Focus first item on open\n    React.useEffect(() => {\n      if (state.open) {\n        const first = contentRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]');\n        first?.focus();\n      }\n    }, [state.open]);\n\n    // Keyboard navigation\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const items = Array.from(\n          contentRef.current?.querySelectorAll<HTMLElement>(\n            '[role=\"menuitem\"]:not([disabled]),[role=\"menuitemcheckbox\"]:not([disabled]),[role=\"menuitemradio\"]:not([disabled])'\n          ) ?? []\n        );\n        const current = document.activeElement as HTMLElement;\n        const idx = items.indexOf(current);\n\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          items[(idx + 1) % items.length]?.focus();\n        } else if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          items[(idx - 1 + items.length) % items.length]?.focus();\n        } else if (e.key === 'Escape') {\n          e.preventDefault();\n          close();\n        } else if (e.key === 'Tab') {\n          e.preventDefault();\n          close();\n        } else if (e.key === 'Home') {\n          e.preventDefault();\n          items[0]?.focus();\n        } else if (e.key === 'End') {\n          e.preventDefault();\n          items[items.length - 1]?.focus();\n        }\n      },\n      [close]\n    );\n\n    if (!state.open) return null;\n\n    // Clamp position to viewport\n    const vw = typeof window !== 'undefined' ? window.innerWidth : 0;\n    const vh = typeof window !== 'undefined' ? window.innerHeight : 0;\n    const MENU_W = 192; // ~min-w-[8rem] generous estimate\n    const MENU_H = 300;\n    const x = Math.min(state.position.x, vw - MENU_W - 8);\n    const y = Math.min(state.position.y, vh - MENU_H - 8);\n\n    return ReactDOM.createPortal(\n      <div\n        ref={mergedRef}\n        className={styles.content({ className })}\n        style={{ top: y, left: x }}\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {children}\n      </div>,\n      document.body\n    );\n  }\n);\nContextMenuContent.displayName = 'ContextMenuContent';\n\n// ─── Item ─────────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  inset?: boolean;\n  disabled?: boolean;\n}\n\nconst ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(\n  ({ className, inset, disabled, onClick, ...props }, ref) => {\n    const { close } = React.useContext(ContextMenuContext);\n    return (\n      <div\n        ref={ref}\n        role=\"menuitem\"\n        tabIndex={disabled ? undefined : -1}\n        aria-disabled={disabled || undefined}\n        className={styles.item({\n          className: `${inset ? 'pl-8' : ''} ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className ?? ''}`,\n        })}\n        onClick={(e) => {\n          if (disabled) return;\n          onClick?.(e);\n          close();\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            if (!disabled) {\n              onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n              close();\n            }\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n);\nContextMenuItem.displayName = 'ContextMenuItem';\n\n// ─── CheckboxItem ─────────────────────────────────────────────────────────────\n\nexport interface ContextMenuCheckboxItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuCheckboxItem = React.forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(\n  ({ className, children, checked, onCheckedChange, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"menuitemcheckbox\"\n      tabIndex={-1}\n      aria-checked={checked}\n      className={styles.checkboxItem({ className })}\n      onClick={() => onCheckedChange?.(!checked)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onCheckedChange?.(!checked);\n        }\n      }}\n      {...props}\n    >\n      <span className={styles.indicatorWrapper()}>\n        {checked && <Check className=\"h-4 w-4\" />}\n      </span>\n      {children}\n    </div>\n  )\n);\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\n\n// ─── RadioGroup + RadioItem ───────────────────────────────────────────────────\n\nconst ContextMenuRadioContext = React.createContext<{\n  value?: string;\n  onValueChange?: (value: string) => void;\n}>({});\n\nexport interface ContextMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst ContextMenuRadioGroup = React.forwardRef<HTMLDivElement, ContextMenuRadioGroupProps>(\n  ({ value, onValueChange, ...props }, ref) => (\n    <ContextMenuRadioContext.Provider value={{ value, onValueChange }}>\n      <div ref={ref} role=\"group\" {...props} />\n    </ContextMenuRadioContext.Provider>\n  )\n);\nContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';\n\nexport interface ContextMenuRadioItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nconst ContextMenuRadioItem = React.forwardRef<HTMLDivElement, ContextMenuRadioItemProps>(\n  ({ className, children, value, ...props }, ref) => {\n    const ctx = React.useContext(ContextMenuRadioContext);\n    const isChecked = ctx.value === value;\n    return (\n      <div\n        ref={ref}\n        role=\"menuitemradio\"\n        tabIndex={-1}\n        aria-checked={isChecked}\n        className={styles.radioItem({ className })}\n        onClick={() => ctx.onValueChange?.(value)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            ctx.onValueChange?.(value);\n          }\n        }}\n        {...props}\n      >\n        <span className={styles.indicatorWrapper()}>\n          {isChecked && <Circle className=\"h-2 w-2 fill-current\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\n\n// ─── Label ────────────────────────────────────────────────────────────────────\n\nconst ContextMenuLabel = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={styles.label({ className })} {...props} />\n  )\n);\nContextMenuLabel.displayName = 'ContextMenuLabel';\n\n// ─── Separator ────────────────────────────────────────────────────────────────\n\nconst ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} role=\"separator\" className={styles.separator({ className })} {...props} />\n  )\n);\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\n\n// ─── Shortcut ─────────────────────────────────────────────────────────────────\n\nconst ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span aria-hidden=\"true\" className={styles.shortcut({ className })} {...props} />\n);\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  contextMenuVariants,\n};\n"
+          "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport * as ReactDOM from 'react-dom';\r\nimport { tv } from 'tailwind-variants';\r\nimport { Check, Circle } from 'lucide-react';\r\n\r\nconst contextMenuVariants = tv({\r\n  slots: {\r\n    content:\r\n      'fixed z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95',\r\n    item: 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n    checkboxItem:\r\n      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\r\n    radioItem:\r\n      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\r\n    label: 'px-2 py-1.5 text-sm font-semibold',\r\n    separator: '-mx-1 my-1 h-px bg-border',\r\n    shortcut: 'ml-auto text-xs tracking-widest opacity-60',\r\n    indicatorWrapper: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n  },\r\n});\r\n\r\nconst styles = contextMenuVariants();\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface ContextMenuState {\r\n  open: boolean;\r\n  position: { x: number; y: number };\r\n}\r\n\r\nconst ContextMenuContext = React.createContext<{\r\n  state: ContextMenuState;\r\n  close: () => void;\r\n}>({ state: { open: false, position: { x: 0, y: 0 } }, close: () => {} });\r\n\r\n// ─── Root ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuProps {\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {\r\n  const [state, setState] = React.useState<ContextMenuState>({\r\n    open: false,\r\n    position: { x: 0, y: 0 },\r\n  });\r\n\r\n  const close = React.useCallback(() => setState(s => ({ ...s, open: false })), []);\r\n\r\n  // Close on outside click / second right-click / scroll\r\n  React.useEffect(() => {\r\n    if (!state.open) return;\r\n    const handleClose = () => close();\r\n    document.addEventListener('click', handleClose, { capture: true });\r\n    document.addEventListener('contextmenu', handleClose, { capture: true });\r\n    document.addEventListener('scroll', handleClose, { capture: true, passive: true });\r\n    return () => {\r\n      document.removeEventListener('click', handleClose, { capture: true });\r\n      document.removeEventListener('contextmenu', handleClose, { capture: true });\r\n      document.removeEventListener('scroll', handleClose, { capture: true });\r\n    };\r\n  }, [state.open, close]);\r\n\r\n  return (\r\n    <ContextMenuContext.Provider value={{ state, close }}>\r\n      {React.Children.map(children, child => {\r\n        if (React.isValidElement(child) && child.type === ContextMenuTrigger) {\r\n          return React.cloneElement(\r\n            child as React.ReactElement<{ onContextMenu?: (e: React.MouseEvent) => void }>,\r\n            {\r\n              onContextMenu: (e: React.MouseEvent) => {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                setState({ open: true, position: { x: e.clientX, y: e.clientY } });\r\n              },\r\n            }\r\n          );\r\n        }\r\n        return child;\r\n      })}\r\n    </ContextMenuContext.Provider>\r\n  );\r\n};\r\nContextMenu.displayName = 'ContextMenu';\r\n\r\n// ─── Trigger ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\r\n  ({ children, ...props }, ref) => (\r\n    <div ref={ref} {...props}>{children}</div>\r\n  )\r\n);\r\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\r\n\r\n// ─── Content ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\r\n  ({ className, children, ...props }, ref) => {\r\n    const { state, close } = React.useContext(ContextMenuContext);\r\n    const contentRef = React.useRef<HTMLDivElement>(null);\r\n\r\n    // Merge refs\r\n    const mergedRef = React.useCallback(\r\n      (node: HTMLDivElement | null) => {\r\n        (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\r\n        if (typeof ref === 'function') ref(node);\r\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\r\n      },\r\n      [ref]\r\n    );\r\n\r\n    // Focus first item on open\r\n    React.useEffect(() => {\r\n      if (state.open) {\r\n        const first = contentRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]');\r\n        first?.focus();\r\n      }\r\n    }, [state.open]);\r\n\r\n    // Keyboard navigation\r\n    const handleKeyDown = React.useCallback(\r\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n        const items = Array.from(\r\n          contentRef.current?.querySelectorAll<HTMLElement>(\r\n            '[role=\"menuitem\"]:not([disabled]),[role=\"menuitemcheckbox\"]:not([disabled]),[role=\"menuitemradio\"]:not([disabled])'\r\n          ) ?? []\r\n        );\r\n        const current = document.activeElement as HTMLElement;\r\n        const idx = items.indexOf(current);\r\n\r\n        if (e.key === 'ArrowDown') {\r\n          e.preventDefault();\r\n          items[(idx + 1) % items.length]?.focus();\r\n        } else if (e.key === 'ArrowUp') {\r\n          e.preventDefault();\r\n          items[(idx - 1 + items.length) % items.length]?.focus();\r\n        } else if (e.key === 'Escape') {\r\n          e.preventDefault();\r\n          close();\r\n        } else if (e.key === 'Tab') {\r\n          e.preventDefault();\r\n          close();\r\n        } else if (e.key === 'Home') {\r\n          e.preventDefault();\r\n          items[0]?.focus();\r\n        } else if (e.key === 'End') {\r\n          e.preventDefault();\r\n          items[items.length - 1]?.focus();\r\n        }\r\n      },\r\n      [close]\r\n    );\r\n\r\n    if (!state.open) return null;\r\n\r\n    // Clamp position to viewport\r\n    const vw = typeof window !== 'undefined' ? window.innerWidth : 0;\r\n    const vh = typeof window !== 'undefined' ? window.innerHeight : 0;\r\n    const MENU_W = 192; // ~min-w-[8rem] generous estimate\r\n    const MENU_H = 300;\r\n    const x = Math.min(state.position.x, vw - MENU_W - 8);\r\n    const y = Math.min(state.position.y, vh - MENU_H - 8);\r\n\r\n    return ReactDOM.createPortal(\r\n      <div\r\n        ref={mergedRef}\r\n        className={styles.content({ className })}\r\n        style={{ top: y, left: x }}\r\n        role=\"menu\"\r\n        aria-orientation=\"vertical\"\r\n        onKeyDown={handleKeyDown}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </div>,\r\n      document.body\r\n    );\r\n  }\r\n);\r\nContextMenuContent.displayName = 'ContextMenuContent';\r\n\r\n// ─── Item ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  inset?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\nconst ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(\r\n  ({ className, inset, disabled, onClick, ...props }, ref) => {\r\n    const { close } = React.useContext(ContextMenuContext);\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role=\"menuitem\"\r\n        tabIndex={disabled ? undefined : -1}\r\n        aria-disabled={disabled || undefined}\r\n        className={styles.item({\r\n          className: `${inset ? 'pl-8' : ''} ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className ?? ''}`,\r\n        })}\r\n        onClick={(e) => {\r\n          if (disabled) return;\r\n          onClick?.(e);\r\n          close();\r\n        }}\r\n        onKeyDown={(e) => {\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            e.preventDefault();\r\n            if (!disabled) {\r\n              onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\r\n              close();\r\n            }\r\n          }\r\n        }}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nContextMenuItem.displayName = 'ContextMenuItem';\r\n\r\n// ─── CheckboxItem ─────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuCheckboxItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  checked?: boolean;\r\n  onCheckedChange?: (checked: boolean) => void;\r\n}\r\n\r\nconst ContextMenuCheckboxItem = React.forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(\r\n  ({ className, children, checked, onCheckedChange, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      role=\"menuitemcheckbox\"\r\n      tabIndex={-1}\r\n      aria-checked={checked}\r\n      className={styles.checkboxItem({ className })}\r\n      onClick={() => onCheckedChange?.(!checked)}\r\n      onKeyDown={(e) => {\r\n        if (e.key === 'Enter' || e.key === ' ') {\r\n          e.preventDefault();\r\n          onCheckedChange?.(!checked);\r\n        }\r\n      }}\r\n      {...props}\r\n    >\r\n      <span className={styles.indicatorWrapper()}>\r\n        {checked && <Check className=\"h-4 w-4\" />}\r\n      </span>\r\n      {children}\r\n    </div>\r\n  )\r\n);\r\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\r\n\r\n// ─── RadioGroup + RadioItem ───────────────────────────────────────────────────\r\n\r\nconst ContextMenuRadioContext = React.createContext<{\r\n  value?: string;\r\n  onValueChange?: (value: string) => void;\r\n}>({});\r\n\r\nexport interface ContextMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  value?: string;\r\n  onValueChange?: (value: string) => void;\r\n}\r\n\r\nconst ContextMenuRadioGroup = React.forwardRef<HTMLDivElement, ContextMenuRadioGroupProps>(\r\n  ({ value, onValueChange, ...props }, ref) => (\r\n    <ContextMenuRadioContext.Provider value={{ value, onValueChange }}>\r\n      <div ref={ref} role=\"group\" {...props} />\r\n    </ContextMenuRadioContext.Provider>\r\n  )\r\n);\r\nContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';\r\n\r\nexport interface ContextMenuRadioItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  value: string;\r\n}\r\n\r\nconst ContextMenuRadioItem = React.forwardRef<HTMLDivElement, ContextMenuRadioItemProps>(\r\n  ({ className, children, value, ...props }, ref) => {\r\n    const ctx = React.useContext(ContextMenuRadioContext);\r\n    const isChecked = ctx.value === value;\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role=\"menuitemradio\"\r\n        tabIndex={-1}\r\n        aria-checked={isChecked}\r\n        className={styles.radioItem({ className })}\r\n        onClick={() => ctx.onValueChange?.(value)}\r\n        onKeyDown={(e) => {\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            e.preventDefault();\r\n            ctx.onValueChange?.(value);\r\n          }\r\n        }}\r\n        {...props}\r\n      >\r\n        <span className={styles.indicatorWrapper()}>\r\n          {isChecked && <Circle className=\"h-2 w-2 fill-current\" />}\r\n        </span>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n);\r\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\r\n\r\n// ─── Label ────────────────────────────────────────────────────────────────────\r\n\r\nconst ContextMenuLabel = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\r\n  ({ className, ...props }, ref) => (\r\n    <div ref={ref} className={styles.label({ className })} {...props} />\r\n  )\r\n);\r\nContextMenuLabel.displayName = 'ContextMenuLabel';\r\n\r\n// ─── Separator ────────────────────────────────────────────────────────────────\r\n\r\nconst ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\r\n  ({ className, ...props }, ref) => (\r\n    <div ref={ref} role=\"separator\" className={styles.separator({ className })} {...props} />\r\n  )\r\n);\r\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\r\n\r\n// ─── Shortcut ─────────────────────────────────────────────────────────────────\r\n\r\nconst ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\r\n  <span aria-hidden=\"true\" className={styles.shortcut({ className })} {...props} />\r\n);\r\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\r\n\r\nexport {\r\n  ContextMenu,\r\n  ContextMenuTrigger,\r\n  ContextMenuContent,\r\n  ContextMenuItem,\r\n  ContextMenuCheckboxItem,\r\n  ContextMenuRadioGroup,\r\n  ContextMenuRadioItem,\r\n  ContextMenuLabel,\r\n  ContextMenuSeparator,\r\n  ContextMenuShortcut,\r\n  contextMenuVariants,\r\n};\r\n"
         }
       ]
     },
@@ -305,7 +305,7 @@
       "files": [
         {
           "path": "src/components/ui/datepicker/DatePicker.tsx",
-          "content": "import * as React from 'react';\r\nimport { Popover as BasePopover } from '@base-ui/react';\r\nimport { DayPicker, type DateRange } from 'react-day-picker';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon, ChevronDown, Clock } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport * as locales from 'react-day-picker/locale';\r\n\r\nimport 'react-day-picker/dist/style.css';\r\nimport { Button } from '../button/Button';\r\nimport { TimePicker, type TimePickerStyle } from './TimePicker';\r\nimport {\r\n    type TimeFormat,\r\n    type TimeParts,\r\n    DEFAULT_TIME,\r\n    parseTimeParts,\r\n    buildTimeString,\r\n    applyTimeToDate,\r\n    dateToTimeParts,\r\n    formatDateDisplay,\r\n} from './time-helpers';\r\n\r\n// ---------- types ----------\r\n\r\nexport type { TimeFormat, TimePickerStyle };\r\nexport type DatePickerMode = 'single' | 'range' | 'time-only';\r\n\r\nexport interface DatePickerProps {\r\n    mode?: DatePickerMode;\r\n    date?: Date | DateRange;\r\n    onDateChange?: (date: Date | DateRange | undefined) => void;\r\n    onChange?: (date: Date | DateRange | undefined) => void;\r\n    timeValue?: string;\r\n    onTimeChange?: (time: string) => void;\r\n    label?: string;\r\n    placeholder?: string;\r\n    disablePastDates?: boolean;\r\n    showTime?: boolean;\r\n    timeFormat?: TimeFormat;\r\n    timePickerStyle?: TimePickerStyle;\r\n    disabled?: boolean;\r\n    className?: string;\r\n    description?: string;\r\n    error?: string;\r\n    locale?: keyof typeof locales;\r\n}\r\n\r\n// ---------- styles ----------\r\n\r\nconst popoverContent = tv({\r\n    base: 'z-50 rounded-xl border border-border bg-background text-foreground shadow-xl outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n});\r\n\r\n// ---------- main component ----------\r\n\r\nexport const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({\r\n    mode = 'single',\r\n    date,\r\n    onDateChange,\r\n    onChange,\r\n    timeValue,\r\n    onTimeChange,\r\n    label,\r\n    placeholder = 'Select date...',\r\n    disablePastDates = false,\r\n    showTime = false,\r\n    timeFormat = 'HH:mm:ss',\r\n    timePickerStyle = 'select',\r\n    disabled = false,\r\n    className,\r\n    description,\r\n    error,\r\n    locale: localeKey = 'vi',\r\n}, ref) => {\r\n    const [open, setOpen] = React.useState(false);\r\n    const triggerRef = React.useRef<HTMLButtonElement>(null);\r\n    const resolvedLocale = locales[localeKey];\r\n\r\n    const initParts = React.useMemo<TimeParts>(() => {\r\n        if (mode === 'time-only' && timeValue) return parseTimeParts(timeValue);\r\n        if (date instanceof Date) return dateToTimeParts(date);\r\n        return DEFAULT_TIME;\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, []);\r\n\r\n    const [timeParts, setTimeParts] = React.useState<TimeParts>(initParts);\r\n\r\n    React.useEffect(() => {\r\n        if (mode === 'time-only' && timeValue) {\r\n            setTimeParts(parseTimeParts(timeValue));\r\n        } else if (date instanceof Date) {\r\n            setTimeParts(dateToTimeParts(date));\r\n        }\r\n    }, [date, timeValue, mode]);\r\n\r\n    const handlePartsChange = (newParts: TimeParts) => {\r\n        setTimeParts(newParts);\r\n        if (mode === 'time-only') {\r\n            onTimeChange?.(buildTimeString(newParts, timeFormat));\r\n            return;\r\n        }\r\n        if (date instanceof Date) {\r\n            const newDate = applyTimeToDate(date, newParts);\r\n            onDateChange?.(newDate);\r\n            onChange?.(newDate);\r\n        }\r\n    };\r\n\r\n    const handleDateSelect = (selectedDate: Date | DateRange | Date[] | undefined) => {\r\n        if (!selectedDate) {\r\n            onDateChange?.(undefined);\r\n            onChange?.(undefined);\r\n            return;\r\n        }\r\n        if (mode === 'single' && showTime && selectedDate instanceof Date) {\r\n            const newDate = applyTimeToDate(selectedDate, timeParts);\r\n            onDateChange?.(newDate);\r\n            onChange?.(newDate);\r\n        } else {\r\n            onDateChange?.(selectedDate as DateRange);\r\n            onChange?.(selectedDate as DateRange);\r\n        }\r\n    };\r\n\r\n    const triggerLabel = React.useMemo(() => {\r\n        if (mode === 'time-only') {\r\n            const val = timeValue ?? buildTimeString(timeParts, timeFormat);\r\n            if (!val || val === '00' || val === '00:00' || val === '00:00:00')\r\n                return <span className=\"text-muted-foreground\">{placeholder || 'Select time...'}</span>;\r\n            return <span>{val}</span>;\r\n        }\r\n\r\n        if (!date) return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n\r\n        if (mode === 'single' && date instanceof Date) {\r\n            return <span>{formatDateDisplay(date, showTime, timeFormat)}</span>;\r\n        }\r\n\r\n        if (mode === 'range') {\r\n            const range = date as DateRange;\r\n            if (range.from && range.to) {\r\n                return (\r\n                    <span>\r\n                        {format(range.from, 'dd/MM/yyyy')} – {format(range.to, 'dd/MM/yyyy')}\r\n                    </span>\r\n                );\r\n            }\r\n            if (range.from) return <span>{format(range.from, 'dd/MM/yyyy')} –</span>;\r\n        }\r\n\r\n        return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n    }, [date, mode, showTime, timeFormat, timeValue, timeParts, placeholder]);\r\n\r\n    const isTimeMode = mode === 'time-only';\r\n    const needsTimePicker = isTimeMode || (mode === 'single' && showTime);\r\n\r\n    return (\r\n        <div ref={ref} className={`flex flex-col gap-1.5 ${className || ''}`}>\r\n            {label && (\r\n                <label className=\"text-sm font-medium text-foreground leading-none\">\r\n                    {label}\r\n                </label>\r\n            )}\r\n\r\n            <BasePopover.Root open={open} onOpenChange={disabled ? undefined : setOpen}>\r\n                <BasePopover.Trigger\r\n                    render={\r\n                        <button\r\n                            ref={triggerRef}\r\n                            type=\"button\"\r\n                            disabled={disabled}\r\n                            className={[\r\n                                'flex h-10 w-full items-center gap-2 rounded-lg border bg-background px-3 py-2 text-sm',\r\n                                'ring-offset-background transition-shadow',\r\n                                'hover:border-primary focus:border-primary focus:outline-none',\r\n                                'disabled:cursor-not-allowed disabled:opacity-50',\r\n                                error ? 'border-danger focus:border-danger' : 'border-border',\r\n                                'group',\r\n                            ].join(' ')}\r\n                        >\r\n                            {isTimeMode ? (\r\n                                <Clock className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n                            ) : (\r\n                                <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n                            )}\r\n                            <div className=\"flex-1 truncate text-left\">{triggerLabel}</div>\r\n                            <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-open:rotate-180\" />\r\n                        </button>\r\n                    }\r\n                />\r\n\r\n                <BasePopover.Portal>\r\n                    <BasePopover.Positioner anchor={triggerRef} sideOffset={6} className=\"z-50\">\r\n                        <BasePopover.Popup className={popoverContent()}>\r\n                            {!isTimeMode && mode === 'single' && (\r\n                                <div className=\"p-2 flex justify-center\">\r\n                                    <DayPicker\r\n                                        mode=\"single\"\r\n                                        locale={resolvedLocale}\r\n                                        selected={date as Date | undefined}\r\n                                        onSelect={(d) => handleDateSelect(d)}\r\n                                        disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n                                        className=\"rdp-custom\"\r\n                                    />\r\n                                </div>\r\n                            )}\r\n                            {!isTimeMode && mode === 'range' && (\r\n                                <div className=\"p-2 flex justify-center\">\r\n                                    <DayPicker\r\n                                        mode=\"range\"\r\n                                        locale={resolvedLocale}\r\n                                        selected={date as DateRange | undefined}\r\n                                        onSelect={(d) => handleDateSelect(d)}\r\n                                        disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n                                        className=\"rdp-custom\"\r\n                                    />\r\n                                </div>\r\n                            )}\r\n\r\n                            {needsTimePicker && (\r\n                                <div className={`border-t border-border p-3 flex flex-col gap-2 ${isTimeMode ? 'border-t-0' : ''}`}>\r\n                                    <div className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide\">\r\n                                        <Clock className=\"w-3.5 h-3.5\" />\r\n                                        <span>\r\n                                            {timeFormat === 'HH' ? 'Select hour' : timeFormat === 'HH:mm' ? 'Hour : Minute' : 'Hour : Minute : Second'}\r\n                                        </span>\r\n                                    </div>\r\n                                    <TimePicker\r\n                                        parts={timeParts}\r\n                                        onChange={handlePartsChange}\r\n                                        timeFormat={timeFormat}\r\n                                        timePickerStyle={timePickerStyle}\r\n                                    />\r\n                                </div>\r\n                            )}\r\n\r\n                            <div className=\"flex items-center justify-between gap-2 p-3 border-t border-border\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    onClick={() => {\r\n                                        if (mode === 'time-only') {\r\n                                            setTimeParts(DEFAULT_TIME);\r\n                                            onTimeChange?.('');\r\n                                        } else {\r\n                                            onDateChange?.(undefined);\r\n                                        }\r\n                                    }}\r\n                                    className=\"text-xs text-muted-foreground hover:text-foreground transition-colors underline-offset-2 hover:underline\"\r\n                                >\r\n                                    Clear\r\n                                </button>\r\n                                <Button size=\"sm\" onClick={() => setOpen(false)}>\r\n                                    Confirm\r\n                                </Button>\r\n                            </div>\r\n                        </BasePopover.Popup>\r\n                    </BasePopover.Positioner>\r\n                </BasePopover.Portal>\r\n            </BasePopover.Root>\r\n            {description && !error && (\r\n                <p className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\r\n            )}\r\n            {error && (\r\n                <p className=\"text-[0.8rem] font-medium text-danger\">{error}</p>\r\n            )}\r\n        </div>\r\n    );\r\n});\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"
+          "content": "'use client';\r\nimport * as React from 'react';\r\nimport { Popover as BasePopover } from '@base-ui/react';\r\nimport { DayPicker, type DateRange } from 'react-day-picker';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon, ChevronDown, Clock } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport * as locales from 'react-day-picker/locale';\r\n\r\nimport 'react-day-picker/dist/style.css';\r\nimport { Button } from '../button/Button';\r\nimport { TimePicker, type TimePickerStyle } from './TimePicker';\r\nimport {\r\n    type TimeFormat,\r\n    type TimeParts,\r\n    DEFAULT_TIME,\r\n    parseTimeParts,\r\n    buildTimeString,\r\n    applyTimeToDate,\r\n    dateToTimeParts,\r\n    formatDateDisplay,\r\n} from './time-helpers';\r\n\r\n// ---------- types ----------\r\n\r\nexport type { TimeFormat, TimePickerStyle };\r\nexport type DatePickerMode = 'single' | 'range' | 'time-only';\r\n\r\nexport interface DatePickerProps {\r\n    mode?: DatePickerMode;\r\n    date?: Date | DateRange;\r\n    onDateChange?: (date: Date | DateRange | undefined) => void;\r\n    onChange?: (date: Date | DateRange | undefined) => void;\r\n    timeValue?: string;\r\n    onTimeChange?: (time: string) => void;\r\n    label?: string;\r\n    placeholder?: string;\r\n    disablePastDates?: boolean;\r\n    showTime?: boolean;\r\n    timeFormat?: TimeFormat;\r\n    timePickerStyle?: TimePickerStyle;\r\n    disabled?: boolean;\r\n    className?: string;\r\n    description?: string;\r\n    error?: string;\r\n    locale?: keyof typeof locales;\r\n}\r\n\r\n// ---------- styles ----------\r\n\r\nconst popoverContent = tv({\r\n    base: 'z-50 rounded-xl border border-border bg-background text-foreground shadow-xl outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n});\r\n\r\n// ---------- main component ----------\r\n\r\nexport const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({\r\n    mode = 'single',\r\n    date,\r\n    onDateChange,\r\n    onChange,\r\n    timeValue,\r\n    onTimeChange,\r\n    label,\r\n    placeholder = 'Select date...',\r\n    disablePastDates = false,\r\n    showTime = false,\r\n    timeFormat = 'HH:mm:ss',\r\n    timePickerStyle = 'select',\r\n    disabled = false,\r\n    className,\r\n    description,\r\n    error,\r\n    locale: localeKey = 'vi',\r\n}, ref) => {\r\n    const [open, setOpen] = React.useState(false);\r\n    const triggerRef = React.useRef<HTMLButtonElement>(null);\r\n    const resolvedLocale = locales[localeKey];\r\n\r\n    const initParts = React.useMemo<TimeParts>(() => {\r\n        if (mode === 'time-only' && timeValue) return parseTimeParts(timeValue);\r\n        if (date instanceof Date) return dateToTimeParts(date);\r\n        return DEFAULT_TIME;\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, []);\r\n\r\n    const [timeParts, setTimeParts] = React.useState<TimeParts>(initParts);\r\n\r\n    React.useEffect(() => {\r\n        if (mode === 'time-only' && timeValue) {\r\n            setTimeParts(parseTimeParts(timeValue));\r\n        } else if (date instanceof Date) {\r\n            setTimeParts(dateToTimeParts(date));\r\n        }\r\n    }, [date, timeValue, mode]);\r\n\r\n    const handlePartsChange = (newParts: TimeParts) => {\r\n        setTimeParts(newParts);\r\n        if (mode === 'time-only') {\r\n            onTimeChange?.(buildTimeString(newParts, timeFormat));\r\n            return;\r\n        }\r\n        if (date instanceof Date) {\r\n            const newDate = applyTimeToDate(date, newParts);\r\n            onDateChange?.(newDate);\r\n            onChange?.(newDate);\r\n        }\r\n    };\r\n\r\n    const handleDateSelect = (selectedDate: Date | DateRange | Date[] | undefined) => {\r\n        if (!selectedDate) {\r\n            onDateChange?.(undefined);\r\n            onChange?.(undefined);\r\n            return;\r\n        }\r\n        if (mode === 'single' && showTime && selectedDate instanceof Date) {\r\n            const newDate = applyTimeToDate(selectedDate, timeParts);\r\n            onDateChange?.(newDate);\r\n            onChange?.(newDate);\r\n        } else {\r\n            onDateChange?.(selectedDate as DateRange);\r\n            onChange?.(selectedDate as DateRange);\r\n        }\r\n    };\r\n\r\n    const triggerLabel = React.useMemo(() => {\r\n        if (mode === 'time-only') {\r\n            const val = timeValue ?? buildTimeString(timeParts, timeFormat);\r\n            if (!val || val === '00' || val === '00:00' || val === '00:00:00')\r\n                return <span className=\"text-muted-foreground\">{placeholder || 'Select time...'}</span>;\r\n            return <span>{val}</span>;\r\n        }\r\n\r\n        if (!date) return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n\r\n        if (mode === 'single' && date instanceof Date) {\r\n            return <span>{formatDateDisplay(date, showTime, timeFormat)}</span>;\r\n        }\r\n\r\n        if (mode === 'range') {\r\n            const range = date as DateRange;\r\n            if (range.from && range.to) {\r\n                return (\r\n                    <span>\r\n                        {format(range.from, 'dd/MM/yyyy')} – {format(range.to, 'dd/MM/yyyy')}\r\n                    </span>\r\n                );\r\n            }\r\n            if (range.from) return <span>{format(range.from, 'dd/MM/yyyy')} –</span>;\r\n        }\r\n\r\n        return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n    }, [date, mode, showTime, timeFormat, timeValue, timeParts, placeholder]);\r\n\r\n    const isTimeMode = mode === 'time-only';\r\n    const needsTimePicker = isTimeMode || (mode === 'single' && showTime);\r\n\r\n    return (\r\n        <div ref={ref} className={`flex flex-col gap-1.5 ${className || ''}`}>\r\n            {label && (\r\n                <label className=\"text-sm font-medium text-foreground \">\r\n                    {label}\r\n                </label>\r\n            )}\r\n\r\n            <BasePopover.Root open={open} onOpenChange={disabled ? undefined : setOpen}>\r\n                <BasePopover.Trigger\r\n                    render={\r\n                        <button\r\n                            ref={triggerRef}\r\n                            type=\"button\"\r\n                            disabled={disabled}\r\n                            className={[\r\n                                'flex h-10 w-full items-center gap-2 rounded-lg border bg-background px-3 py-2 text-sm',\r\n                                'ring-offset-background transition-shadow',\r\n                                'hover:border-primary focus:border-primary focus:outline-none',\r\n                                'disabled:cursor-not-allowed disabled:opacity-50',\r\n                                error ? 'border-danger focus:border-danger' : 'border-border',\r\n                                'group',\r\n                            ].join(' ')}\r\n                        >\r\n                            {isTimeMode ? (\r\n                                <Clock className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n                            ) : (\r\n                                <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n                            )}\r\n                            <div className=\"flex-1 truncate text-left\">{triggerLabel}</div>\r\n                            <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-open:rotate-180\" />\r\n                        </button>\r\n                    }\r\n                />\r\n\r\n                <BasePopover.Portal>\r\n                    <BasePopover.Positioner anchor={triggerRef} sideOffset={6} style={{ zIndex: 9999 }}>\r\n                        <BasePopover.Popup className={popoverContent()}>\r\n                            {!isTimeMode && mode === 'single' && (\r\n                                <div className=\"p-2 flex justify-center\">\r\n                                    <DayPicker\r\n                                        mode=\"single\"\r\n                                        locale={resolvedLocale}\r\n                                        selected={date as Date | undefined}\r\n                                        onSelect={(d) => handleDateSelect(d)}\r\n                                        disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n                                        className=\"rdp-custom\"\r\n                                    />\r\n                                </div>\r\n                            )}\r\n                            {!isTimeMode && mode === 'range' && (\r\n                                <div className=\"p-2 flex justify-center\">\r\n                                    <DayPicker\r\n                                        mode=\"range\"\r\n                                        locale={resolvedLocale}\r\n                                        selected={date as DateRange | undefined}\r\n                                        onSelect={(d) => handleDateSelect(d)}\r\n                                        disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n                                        className=\"rdp-custom\"\r\n                                    />\r\n                                </div>\r\n                            )}\r\n\r\n                            {needsTimePicker && (\r\n                                <div className={`border-t border-border p-3 flex flex-col gap-2 ${isTimeMode ? 'border-t-0' : ''}`}>\r\n                                    <div className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide\">\r\n                                        <Clock className=\"w-3.5 h-3.5\" />\r\n                                        <span>\r\n                                            {timeFormat === 'HH' ? 'Select hour' : timeFormat === 'HH:mm' ? 'Hour : Minute' : 'Hour : Minute : Second'}\r\n                                        </span>\r\n                                    </div>\r\n                                    <TimePicker\r\n                                        parts={timeParts}\r\n                                        onChange={handlePartsChange}\r\n                                        timeFormat={timeFormat}\r\n                                        timePickerStyle={timePickerStyle}\r\n                                    />\r\n                                </div>\r\n                            )}\r\n\r\n                            <div className=\"flex items-center justify-between gap-2 p-3 border-t border-border\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    onClick={() => {\r\n                                        if (mode === 'time-only') {\r\n                                            setTimeParts(DEFAULT_TIME);\r\n                                            onTimeChange?.('');\r\n                                        } else {\r\n                                            onDateChange?.(undefined);\r\n                                        }\r\n                                    }}\r\n                                    className=\"text-xs text-muted-foreground hover:text-foreground transition-colors underline-offset-2 hover:underline\"\r\n                                >\r\n                                    Clear\r\n                                </button>\r\n                                <Button size=\"sm\" onClick={() => setOpen(false)}>\r\n                                    Confirm\r\n                                </Button>\r\n                            </div>\r\n                        </BasePopover.Popup>\r\n                    </BasePopover.Positioner>\r\n                </BasePopover.Portal>\r\n            </BasePopover.Root>\r\n            {description && !error && (\r\n                <p className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\r\n            )}\r\n            {error && (\r\n                <p className=\"text-[0.8rem] font-medium text-danger\">{error}</p>\r\n            )}\r\n        </div>\r\n    );\r\n});\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"
         },
         {
           "path": "src/components/ui/datepicker/time-helpers.ts",
@@ -406,7 +406,8 @@
       "name": "input",
       "dependencies": [
         "@base-ui/react",
-        "tailwind-variants"
+        "tailwind-variants",
+        "lucide-react"
       ],
       "internalDependencies": [
         "toggle"
@@ -414,7 +415,7 @@
       "files": [
         {
           "path": "src/components/ui/input/Input.tsx",
-          "content": "import * as React from 'react';\r\nimport { Input as BaseInput, Field as BaseField } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport * as Icon from \"@/components/ui/icons\";\r\nimport { Toggle } from '@/components/ui/toggle/Toggle';\r\n\r\nconst inputVariants = tv({\r\n  base: 'flex h-10 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow',\r\n  variants: {\r\n    variant: {\r\n      default: '',\r\n      filled: 'bg-accent border-transparent focus:border-primary',\r\n      flushed: 'border-b-2 border-transparent border-b-border rounded-none px-0 focus:outline-none focus:ring-0 focus:border-transparent focus:border-b-primary bg-transparent',\r\n    }\r\n  },\r\n  defaultVariants: {\r\n    variant: 'default'\r\n  }\r\n});\r\n\r\n/** Props for the Input component */\r\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseInput>, 'className'>, VariantProps<typeof inputVariants> {\r\n  /** Label text displayed above the input */\r\n  label?: string;\r\n  /** Error message displayed below the input; also applies danger styling */\r\n  error?: string;\r\n  /** Helper text displayed below the input (hidden when error is present) */\r\n  description?: string;\r\n  /** Icon rendered at the start (left side) of the input */\r\n  icon?: React.ReactNode;\r\n  /** Icon rendered at the end (right side) of the input; ignored for password type */\r\n  endIcon?: React.ReactNode;\r\n  placeholder?: string;\r\n  className?: string;\r\n}\r\n\r\nconst Input = React.forwardRef<React.ElementRef<typeof BaseInput>, InputProps>(\r\n  ({ className, variant, label, error, description, icon, endIcon, id, type, ...props }, ref) => {\r\n    const defaultId = React.useId();\r\n    const inputId = id || defaultId;\r\n    const [showPassword, setShowPassword] = React.useState(false);\r\n\r\n    const isPassword = type === 'password';\r\n    const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;\r\n\r\n    return (\r\n      <BaseField.Root className=\"flex flex-col gap-1.5 w-full\">\r\n        {label && (\r\n          <BaseField.Label htmlFor={inputId} className=\"text-sm font-medium text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\r\n            {label}\r\n          </BaseField.Label>\r\n        )}\r\n        <div className=\"relative\">\r\n          {icon && (\r\n            <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\r\n              {icon}\r\n            </div>\r\n          )}\r\n          <BaseField.Control render={<BaseInput\r\n            ref={ref}\r\n            id={inputId}\r\n            type={inputType}\r\n            className={cn(\r\n              inputVariants({ variant }),\r\n              icon && 'pl-9',\r\n              (isPassword || endIcon) && 'pr-10',\r\n              error && 'border-danger focus:border-danger',\r\n              className\r\n            )}\r\n            {...props}\r\n          />} />\r\n          {isPassword ? (\r\n            <Toggle\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              size=\"icon\"\r\n              className=\"absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-muted-foreground hover:text-foreground\"\r\n              pressed={showPassword}\r\n              onPressedChange={setShowPassword}\r\n              aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            >\r\n              {showPassword ? <Icon.EyeOff className=\"h-4 w-4\" /> : <Icon.Eye className=\"h-4 w-4\" />}\r\n            </Toggle>\r\n          ) : endIcon ? (\r\n            <div className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\r\n              {endIcon}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n        {description && !error && (\r\n          <BaseField.Description className=\"text-[0.8rem] text-muted-foreground\">\r\n            {description}\r\n          </BaseField.Description>\r\n        )}\r\n        {error && (\r\n          <p className=\"text-[0.8rem] font-medium text-danger\">\r\n            {error}\r\n          </p>\r\n        )}\r\n      </BaseField.Root>\r\n    );\r\n  }\r\n);\r\nInput.displayName = 'Input';\r\n\r\nexport { Input };\r\n"
+          "content": "import * as React from 'react';\r\nimport { Input as BaseInput, Field as BaseField } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Toggle } from '@/components/ui/toggle/Toggle';\r\nimport { Eye, EyeOff } from 'lucide-react';\r\n\r\nconst inputVariants = tv({\r\n  base: 'flex h-10 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow',\r\n  variants: {\r\n    variant: {\r\n      default: '',\r\n      filled: 'bg-accent border-transparent focus:border-primary',\r\n      flushed: 'border-b-2 border-transparent border-b-border rounded-none px-0 focus:outline-none focus:ring-0 focus:border-transparent focus:border-b-primary bg-transparent',\r\n    }\r\n  },\r\n  defaultVariants: {\r\n    variant: 'default'\r\n  }\r\n});\r\n\r\n/** Props for the Input component */\r\nexport interface InputProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseInput>, 'className'>, VariantProps<typeof inputVariants> {\r\n  /** Label text displayed above the input */\r\n  label?: string;\r\n  /** Error message displayed below the input; also applies danger styling */\r\n  error?: string;\r\n  /** Helper text displayed below the input (hidden when error is present) */\r\n  description?: string;\r\n  /** Icon rendered at the start (left side) of the input */\r\n  icon?: React.ReactNode;\r\n  /** Icon rendered at the end (right side) of the input; ignored for password type */\r\n  endIcon?: React.ReactNode;\r\n  placeholder?: string;\r\n  className?: string;\r\n}\r\n\r\nconst Input = React.forwardRef<React.ElementRef<typeof BaseInput>, InputProps>(\r\n  ({ className, variant, label, error, description, icon, endIcon, id, type, ...props }, ref) => {\r\n    const defaultId = React.useId();\r\n    const inputId = id || defaultId;\r\n    const [showPassword, setShowPassword] = React.useState(false);\r\n\r\n    const isPassword = type === 'password';\r\n    const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;\r\n\r\n    return (\r\n      <BaseField.Root className=\"flex flex-col gap-1.5 w-full\">\r\n        {label && (\r\n          <BaseField.Label htmlFor={inputId} className=\"text-sm font-medium text-foreground \">\r\n            {label}\r\n          </BaseField.Label>\r\n        )}\r\n        <div className=\"relative\">\r\n          {icon && (\r\n            <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\r\n              {icon}\r\n            </div>\r\n          )}\r\n          <BaseInput\r\n            ref={ref}\r\n            id={inputId}\r\n            type={inputType || 'text'}\r\n            className={cn(\r\n              inputVariants({ variant }),\r\n              icon && 'pl-9',\r\n              (isPassword || endIcon) && 'pr-10',\r\n              error && 'border-danger focus:border-danger',\r\n              className\r\n            )}\r\n            {...props}\r\n          />\r\n          {isPassword ? (\r\n            <Toggle\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              size=\"icon\"\r\n              className=\"absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-muted-foreground hover:text-foreground\"\r\n              pressed={showPassword}\r\n              onPressedChange={setShowPassword}\r\n              aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            >\r\n              {showPassword ? <EyeOff className=\"h-4 w-4\" /> : <Eye className=\"h-4 w-4\" />}\r\n            </Toggle>\r\n          ) : endIcon ? (\r\n            <div className=\"absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\r\n              {endIcon}\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n        {description && !error && (\r\n          <BaseField.Description className=\"text-[0.8rem] text-muted-foreground\">\r\n            {description}\r\n          </BaseField.Description>\r\n        )}\r\n        {error && (\r\n          <p className=\"text-[0.8rem] font-medium text-danger\">\r\n            {error}\r\n          </p>\r\n        )}\r\n      </BaseField.Root>\r\n    );\r\n  }\r\n);\r\nInput.displayName = 'Input';\r\n\r\nexport { Input };\r\n"
         }
       ]
     },
@@ -435,6 +436,131 @@
         }
       ]
     },
+    "layout-demo1": {
+      "name": "layout-demo1",
+      "dependencies": [
+        "lucide-react",
+        "react-resizable-panels",
+        "react-router-dom"
+      ],
+      "internalDependencies": [
+        "sidebar",
+        "resizable",
+        "skeleton",
+        "main",
+        "constants"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/layout-demo1/constants/route.constants.tsx",
+          "content": "import React from \"react\";\nimport { BookOpen, Info, Settings } from \"lucide-react\";\n\ninterface SidebarItem {\n  title: string;\n  href: string;\n  icon?: React.ReactNode;\n  badge?: string;\n}\n\ninterface SidebarSection {\n  title: string;\n  icon?: React.ReactNode;\n  collapsible: boolean;\n  defaultOpen?: boolean;\n  items: SidebarItem[];\n}\n\nexport const routesConfig: SidebarSection[] = [\n  {\n    title: \"Tổng quan\",\n    icon: <BookOpen className=\"w-4 h-4\" />,\n    collapsible: false,\n    items: [\n      {\n        title: \"Giới thiệu\",\n        href: \"/blocks\",\n        icon: <Info className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Guideline & Cài đặt CLI\",\n        href: \"/#\",\n        icon: <Settings className=\"w-4 h-4\" />,\n        badge: \"CLI\",\n      },\n    ],\n  },\n];\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo1/layout.tsx",
+          "content": "'use client'\r\n\r\nimport { useCallback, useEffect, useRef } from 'react'\r\nimport type { PanelImperativeHandle } from 'react-resizable-panels'\r\nimport {\r\n  SidebarProvider,\r\n  SidebarInset,\r\n  useSidebar,\r\n} from '@/components/ui/sidebar/Sidebar'\r\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable/Resizable'\r\nimport { ThemeProvider } from '@/lib/theme/ThemeProvider'\r\nimport SideBar from './_layout/SideBar'\r\nimport Header from './_layout/Header'\r\n\r\ninterface Props {\r\n  children: React.ReactNode\r\n}\r\n\r\nfunction LayoutBody({ children }: { children?: React.ReactNode }) {\r\n  const { open, setOpen, isMobile } = useSidebar();\r\n  const panelRef = useRef<PanelImperativeHandle>(null);\r\n  // Prevent onResize from echoing back the programmatic change\r\n  const syncingRef = useRef(false);\r\n\r\n  // Keyboard toggle (Ctrl+B) → collapse / expand panel\r\n  useEffect(() => {\r\n    const panel = panelRef.current;\r\n    if (!panel || isMobile) return;\r\n    syncingRef.current = true;\r\n    if (open) panel.expand();\r\n    else panel.collapse();\r\n    requestAnimationFrame(() => { syncingRef.current = false; });\r\n  }, [open, isMobile]);\r\n\r\n  // Drag-to-collapse/expand → update sidebar context\r\n  const handleSidebarResize = useCallback(\r\n    (size: { asPercentage: number; inPixels: number }) => {\r\n      if (syncingRef.current) return;\r\n      // collapsedSize = \"64px\"; add a small threshold to avoid floating-point edge cases\r\n      setOpen(size.inPixels > 72);\r\n    },\r\n    [setOpen],\r\n  );\r\n\r\n  const content = (\r\n    <SidebarInset className=\"flex flex-col\">\r\n      <Header />\r\n      <main className=\"flex-1 overflow-y-auto\">\r\n        <div className=\"p-6 h-full overflow-auto\">\r\n          <ThemeProvider defaultTheme=\"\">\r\n            {children}\r\n          </ThemeProvider>\r\n        </div>\r\n      </main>\r\n    </SidebarInset>\r\n  );\r\n\r\n  // ── Mobile: sidebar renders as fixed overlay, no panel needed ──\r\n  if (isMobile) {\r\n    return (\r\n      <div className=\"flex h-screen w-full\">\r\n        <SideBar />\r\n        {content}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // ── Desktop: sidebar + handle + content as resizable panels ───\r\n  return (\r\n    <ResizablePanelGroup direction=\"horizontal\" className=\"h-full w-full\">\r\n      <ResizablePanel\r\n        id=\"app-sidebar\"\r\n        defaultSize=\"256px\"\r\n        minSize=\"160px\"\r\n        maxSize=\"480px\"\r\n        collapsible\r\n        collapsedSize=\"64px\"\r\n        groupResizeBehavior=\"preserve-pixel-size\"\r\n        panelRef={panelRef}\r\n        onResize={handleSidebarResize}\r\n      >\r\n        <SideBar />\r\n      </ResizablePanel>\r\n      <ResizableHandle variant=\"bar\" />\r\n\r\n\r\n      <ResizablePanel>\r\n        {content}\r\n      </ResizablePanel>\r\n      \r\n    </ResizablePanelGroup>\r\n  );\r\n}\r\n\r\nexport default function DocLayout({ children }: Props) {\r\n  return (\r\n   <div  className=\"h-screen w-full overflow-hidden\">\r\n      <SidebarProvider className=\"h-full \">\r\n        <LayoutBody>{children}</LayoutBody>\r\n      </SidebarProvider>\r\n    </div>\r\n  )\r\n}\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo1/main.tsx",
+          "content": "import React from 'react'\r\nimport Layout from './layout'\r\n\r\nconst Main = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Layout>\r\n      <main className=\"flex-1 p-6\">\r\n        {children}\r\n      </main>\r\n    </Layout>\r\n  )\r\n}\r\n\r\nexport default Main"
+        },
+        {
+          "path": "src/components/ui/layout-demo1/_components/Test.tsx",
+          "content": "import { Skeleton } from \"@/components/ui/skeleton/Skeleton\";\r\nimport Main from \"../main\";\r\n\r\nconst ContentSkeleton = () => (\r\n  <div className=\"flex flex-col gap-6 p-6 flex-1\">\r\n    {/* Header bar */}\r\n    <div className=\"flex items-center justify-between\">\r\n      <Skeleton className=\"h-6 w-40\" />\r\n      <div className=\"flex gap-2\">\r\n        <Skeleton rounded=\"full\" className=\"h-8 w-8\" />\r\n        <Skeleton rounded=\"full\" className=\"h-8 w-8\" />\r\n      </div>\r\n    </div>\r\n\r\n    {/* Stats cards */}\r\n    <div className=\"grid grid-cols-3 gap-4\">\r\n      {Array.from({ length: 3 }).map((_, i) => (\r\n        <div key={i} className=\"flex flex-col gap-2 p-4 border border-border rounded-lg\">\r\n          <Skeleton className=\"h-3 w-12 md:w-16 lg:w-20\" variant=\"muted\" />\r\n          <Skeleton className=\"h-7 w-14 md:w-20 lg:w-24\" />\r\n          <Skeleton className=\"h-3 w-12 md:w-16 lg:w-20\" variant=\"muted\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n\r\n    {/* Table */}\r\n    <div className=\"flex flex-col gap-2\">\r\n      {/* Table header */}\r\n      <div className=\"grid grid-cols-4 gap-4 px-3 py-2\">\r\n        {Array.from({ length: 4 }).map((_, i) => (\r\n          <Skeleton key={i} className=\"h-3 w-full\" variant=\"muted\" />\r\n        ))}\r\n      </div>\r\n      {/* Table rows */}\r\n      {Array.from({ length: 6 }).map((_, i) => (\r\n        <div key={i} className=\"grid grid-cols-4 gap-4 px-3 py-3 border border-border rounded-md\">\r\n          <div className=\"flex items-center gap-2\">\r\n            <Skeleton rounded=\"full\" className=\"h-6 w-6 shrink-0\" />\r\n            <Skeleton className=\"h-3 flex-1\" />\r\n          </div>\r\n          <Skeleton className=\"h-3 w-full\" variant=\"muted\" />\r\n          <Skeleton className=\"h-3 w-3/4\" variant=\"muted\" />\r\n          <Skeleton rounded=\"full\" className=\"h-5 w-16\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  </div>\r\n);\r\n\r\nconst Test = () => {\r\n  return (\r\n    <Main>\r\n      <div className=\"flex h-full -m-6\" data-lenis-prevent>\r\n        <ContentSkeleton />\r\n      </div>\r\n    </Main>\r\n  );\r\n};\r\n\r\nexport default Test;\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo1/_layout/Header.tsx",
+          "content": "import { SidebarTrigger } from \"@/components/ui/sidebar/Sidebar\";\r\n\r\n/**\r\n * Header chỉ hiển thị trên mobile (< 768px).\r\n * Desktop không có header — sidebar luôn hiện sẵn.\r\n */\r\nconst Header = () => {\r\n  return (\r\n    <header className=\"md:hidden flex items-center gap-3 h-12 px-4 border-b border-border bg-background shrink-0\">\r\n      <SidebarTrigger />\r\n      <div className=\"flex items-center gap-2\">\r\n        <div className=\"w-6 h-6 bg-primary rounded-md flex items-center justify-center shrink-0\">\r\n          <span className=\"text-primary-foreground text-xs font-bold select-none\">\r\n            UI\r\n          </span>\r\n        </div>\r\n        <span className=\"text-sm font-semibold text-foreground\">UI Library</span>\r\n      </div>\r\n    </header>\r\n  );\r\n};\r\n\r\nexport default Header;\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo1/_layout/SideBar.tsx",
+          "content": "import React from \"react\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { cn } from \"@/lib/utils/cn\";\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuCollapsible,\n  SidebarMenuSubItem,\n  useSidebar,\n} from \"@/components/ui/sidebar/Sidebar\";\nimport { routesConfig } from \"../constants/route.constants\";\n\nconst SideBar = () => {\n  const { pathname } = useLocation();\n  const { state } = useSidebar();\n  const isCollapsed = state === \"collapsed\";\n  return (\n    <Sidebar collapsible=\"icon\" variant=\"sidebar\" side=\"left\">\n      <SidebarHeader>\n        <Link to=\"/blocks\">\n          <div\n            className={cn(\n              \"flex items-center gap-3 px-2 py-2 rounded-md transition-all duration-200\",\n              isCollapsed && \"justify-center\",\n            )}\n          >\n            <div className=\"w-8 h-8 bg-primary rounded-lg flex items-center justify-center shrink-0 shadow-sm flex-none\">\n              <span className=\"text-primary-foreground font-bold text-sm select-none\">\n                UI\n              </span>\n            </div>\n            {!isCollapsed && (\n              <div className=\"overflow-hidden min-w-0\">\n                <p className=\"text-sm font-semibold text-foreground truncate leading-tight\">\n                  UI Library\n                </p>\n                <p className=\"text-xs text-muted-foreground truncate leading-tight\">\n                  Component Showcase\n                </p>\n              </div>\n            )}\n          </div>\n        </Link>\n      </SidebarHeader>\n\n      <SidebarContent>\n        {routesConfig.map((route) => {\n          const isChildActive = route.items.some(\n            (item) => pathname === item.href,\n          );\n          const shouldDefaultOpen = isChildActive || route.defaultOpen === true;\n\n          return (\n            <SidebarGroup key={route.title}>\n              {route.collapsible ? (\n                <>\n                  <SidebarGroupLabel>{route.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuCollapsible\n                          id={route.title}\n                          icon={\n                            <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                              {route.icon}\n                            </span>\n                          }\n                          label={route.title}\n                          defaultOpen={shouldDefaultOpen}\n                          isChildActive={isChildActive}\n                        >\n                          {route.items.map((item) => {\n                            const isActive = pathname === item.href;\n                            return (\n                              <SidebarMenuSubItem key={item.href}>\n                                <Link to={item.href}>\n                                  <SidebarMenuButton\n                                    isActive={isActive}\n                                    tooltip={item.title}\n                                    size=\"sm\"\n                                    className={cn(\n                                      isActive &&\n                                        \"bg-sidebar-accent text-sidebar-accent-foreground font-semibold\",\n                                    )}\n                                  >\n                                    <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                                      {item.icon}\n                                    </span>\n                                    <span className=\"truncate\">{item.title}</span>\n                                  </SidebarMenuButton>\n                                </Link>\n                              </SidebarMenuSubItem>\n                            );\n                          })}\n                        </SidebarMenuCollapsible>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </>\n              ) : (\n                <>\n                  <SidebarGroupLabel>{route.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {route.items.map((item) => {\n                        const isActive = pathname === item.href;\n                        return (\n                          <SidebarMenuItem key={item.href}>\n                            <Link to={item.href}>\n                              <SidebarMenuButton\n                                isActive={isActive}\n                                tooltip={item.title}\n                                size=\"sm\"\n                                className={cn(\n                                  isActive &&\n                                    \"bg-sidebar-accent text-sidebar-accent-foreground font-semibold\",\n                                )}\n                              >\n                                <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                                  {item.icon}\n                                </span>\n                                <span className=\"truncate\">{item.title}</span>\n                              </SidebarMenuButton>\n                            </Link>\n                          </SidebarMenuItem>\n                        );\n                      })}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </>\n              )}\n            </SidebarGroup>\n          );\n        })}\n      </SidebarContent>\n    </Sidebar>\n  );\n};\n\nexport default SideBar;\n"
+        }
+      ]
+    },
+    "layout-demo2": {
+      "name": "layout-demo2",
+      "dependencies": [
+        "lucide-react",
+        "react-resizable-panels",
+        "react-router-dom"
+      ],
+      "internalDependencies": [
+        "sidebar",
+        "resizable",
+        "skeleton",
+        "main",
+        "autocomplete",
+        "constants"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/layout-demo2/constants/route.constants.tsx",
+          "content": "import React from \"react\";\nimport {\n  BookOpen,\n  ChevronsUpDown,\n  FormInput,\n  Info,\n  LayoutGrid,\n  ListChecks,\n  Minus,\n  ScrollText,\n  Settings,\n  Square,\n  Tag,\n  TextCursorInput,\n  UserCircle,\n} from \"lucide-react\";\n\ninterface SidebarItem {\n  title: string;\n  href: string;\n  icon?: React.ReactNode;\n  badge?: string;\n}\n\ninterface SidebarSection {\n  title: string;\n  icon?: React.ReactNode;\n  collapsible: boolean;\n  defaultOpen?: boolean;\n  items: SidebarItem[];\n}\n\nexport const routesConfig: SidebarSection[] = [\n  {\n    title: \"Tổng quan\",\n    icon: <BookOpen className=\"w-4 h-4\" />,\n    collapsible: false,\n    items: [\n      {\n        title: \"Giới thiệu\",\n        href: \"/blocks\",\n        icon: <Info className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Guideline & Cài đặt CLI\",\n        href: \"/#\",\n        icon: <Settings className=\"w-4 h-4\" />,\n        badge: \"CLI\",\n      },\n    ],\n  },\n  {\n    title: \"General\",\n    icon: <LayoutGrid className=\"w-4 h-4\" />,\n    collapsible: true,\n    defaultOpen: true,\n    items: [\n      {\n        title: \"Button\",\n        href: \"/#\",\n        icon: <Square className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Badge\",\n        href: \"/#\",\n        icon: <Tag className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Avatar\",\n        href: \"/#\",\n        icon: <UserCircle className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Separator\",\n        href: \"/#\",\n        icon: <Minus className=\"w-4 h-4\" />,\n      },\n    ],\n  },\n  {\n    title: \"Forms\",\n    icon: <FormInput className=\"w-4 h-4\" />,\n    collapsible: true,\n    defaultOpen: true,\n    items: [\n      {\n        title: \"Input\",\n        href: \"/components-page/input\",\n        icon: <TextCursorInput className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Textarea\",\n        href: \"/components-page/textarea\",\n        icon: <ScrollText className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Select\",\n        href: \"/components-page/select\",\n        icon: <ChevronsUpDown className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Checkbox\",\n        href: \"/components-page/checkbox\",\n        icon: <ListChecks className=\"w-4 h-4\" />,\n      },\n    ],\n  },\n];\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo2/layout.tsx",
+          "content": "'use client'\r\n\r\nimport { useCallback, useEffect, useRef } from 'react'\r\nimport type { PanelImperativeHandle } from 'react-resizable-panels'\r\nimport {\r\n  SidebarProvider,\r\n  SidebarInset,\r\n  useSidebar,\r\n} from '@/components/ui/sidebar/Sidebar'\r\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable/Resizable'\r\nimport { ThemeProvider } from '@/lib/theme/ThemeProvider'\r\nimport SideBar from './_layout/SideBar'\r\nimport Header from './_layout/Header'\r\n\r\ninterface Props {\r\n  children: React.ReactNode\r\n}\r\n\r\nfunction LayoutBody({ children }: { children?: React.ReactNode }) {\r\n  const { open, setOpen, isMobile } = useSidebar();\r\n  const panelRef = useRef<PanelImperativeHandle>(null);\r\n  // Prevent onResize from echoing back the programmatic change\r\n  const syncingRef = useRef(false);\r\n\r\n  // Keyboard toggle (Ctrl+B) → collapse / expand panel\r\n  useEffect(() => {\r\n    const panel = panelRef.current;\r\n    if (!panel || isMobile) return;\r\n    syncingRef.current = true;\r\n    if (open) panel.expand();\r\n    else panel.collapse();\r\n    requestAnimationFrame(() => { syncingRef.current = false; });\r\n  }, [open, isMobile]);\r\n\r\n  // Drag-to-collapse/expand → update sidebar context\r\n  const handleSidebarResize = useCallback(\r\n    (size: { asPercentage: number; inPixels: number }) => {\r\n      if (syncingRef.current) return;\r\n      // collapsedSize = \"64px\"; add a small threshold to avoid floating-point edge cases\r\n      setOpen(size.inPixels > 72);\r\n    },\r\n    [setOpen],\r\n  );\r\n\r\n  const content = (\r\n    <SidebarInset className=\"h-full\">\r\n       <Header />\r\n      <main className=\"flex-1 overflow-y-auto\">\r\n        <div className=\"p-6 h-full\">\r\n          <ThemeProvider defaultTheme=\"\">\r\n            {children}\r\n          </ThemeProvider>\r\n        </div>\r\n      </main>\r\n    </SidebarInset>\r\n  );\r\n\r\n  // ── Mobile: sidebar renders as fixed overlay, no panel needed ──\r\n  if (isMobile) {\r\n    return (\r\n      <div className=\"flex h-screen w-full\">\r\n        <SideBar />\r\n        {content}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // ── Desktop: sidebar + handle + content as resizable panels ───\r\n  return (\r\n    <ResizablePanelGroup direction=\"horizontal\" className=\"h-full w-full\">\r\n      <ResizablePanel\r\n        id=\"app-sidebar\"\r\n        defaultSize=\"256px\"\r\n        minSize=\"160px\"\r\n        maxSize=\"480px\"\r\n        collapsible\r\n        collapsedSize=\"64px\"\r\n        groupResizeBehavior=\"preserve-pixel-size\"\r\n        panelRef={panelRef}\r\n        onResize={handleSidebarResize}\r\n      >\r\n        <SideBar />\r\n      </ResizablePanel>\r\n      <ResizableHandle variant=\"bar\" />\r\n\r\n\r\n      <ResizablePanel>\r\n        {content}\r\n      </ResizablePanel>\r\n      \r\n    </ResizablePanelGroup>\r\n  );\r\n}\r\n\r\nexport default function Layout({ children }: Props) {\r\n  return (\r\n   <div  className=\"h-screen w-full overflow-hidden\">\r\n      <SidebarProvider className=\"h-full \">\r\n        <LayoutBody>{children}</LayoutBody>\r\n      </SidebarProvider>\r\n    </div>\r\n  )\r\n}\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo2/main.tsx",
+          "content": "import React from 'react'\r\nimport Layout from './layout'\r\n\r\nconst Main = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Layout>\r\n        {children}\r\n    </Layout>\r\n  )\r\n}\r\n\r\nexport default Main"
+        },
+        {
+          "path": "src/components/ui/layout-demo2/_components/Test2.tsx",
+          "content": "import { Skeleton } from \"@/components/ui/skeleton/Skeleton\";\r\nimport Main from \"../main\";\r\n\r\nconst ContentSkeleton = () => (\r\n  <div className=\"flex flex-col gap-6 p-6 flex-1\">\r\n    {/* Header bar */}\r\n    <div className=\"flex items-center justify-between\">\r\n      <Skeleton className=\"h-6 w-40\" />\r\n      <div className=\"flex gap-2\">\r\n        <Skeleton rounded=\"full\" className=\"h-8 w-8\" />\r\n        <Skeleton rounded=\"full\" className=\"h-8 w-8\" />\r\n      </div>\r\n    </div>\r\n\r\n    {/* Stats cards */}\r\n    <div className=\"grid grid-cols-3 gap-4\">\r\n      {Array.from({ length: 3 }).map((_, i) => (\r\n        <div key={i} className=\"flex flex-col gap-2 p-4 border border-border rounded-lg\">\r\n         <Skeleton className=\"h-3 w-12 md:w-16 lg:w-20\" variant=\"muted\" />\r\n          <Skeleton className=\"h-7 w-14 md:w-20 lg:w-24\" />\r\n          <Skeleton className=\"h-3 w-12 md:w-16 lg:w-20\" variant=\"muted\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n\r\n    {/* Table */}\r\n    <div className=\"flex flex-col gap-2\">\r\n      {/* Table header */}\r\n      <div className=\"grid grid-cols-4 gap-4 px-3 py-2\">\r\n        {Array.from({ length: 4 }).map((_, i) => (\r\n          <Skeleton key={i} className=\"h-3 w-full\" variant=\"muted\" />\r\n        ))}\r\n      </div>\r\n      {/* Table rows */}\r\n      {Array.from({ length: 12}).map((_, i) => (\r\n        <div key={i} className=\"grid grid-cols-4 gap-4 px-3 py-3 border border-border rounded-md\">\r\n          <div className=\"flex items-center gap-2\">\r\n            <Skeleton rounded=\"full\" className=\"h-6 w-6 shrink-0\" />\r\n            <Skeleton className=\"h-3 flex-1\" />\r\n          </div>\r\n          <Skeleton className=\"h-3 w-full\" variant=\"muted\" />\r\n          <Skeleton className=\"h-3 w-3/4\" variant=\"muted\" />\r\n          <Skeleton rounded=\"full\" className=\"h-5 w-16\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  </div>\r\n);\r\n\r\nconst Test = () => {\r\n  return (\r\n    <Main>\r\n      <div data-lenis-prevent>\r\n        <ContentSkeleton />\r\n      </div>\r\n    </Main>\r\n  );\r\n};\r\n\r\nexport default Test;\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo2/_layout/Header.tsx",
+          "content": "import { Button, Code, Separator, SidebarTrigger } from '@/components/ui'\r\nimport { Autocomplete } from '@/components/ui/autocomplete/Autocomplete'\r\nimport { Bell, Home, Search, Settings } from 'lucide-react'\r\nimport React from 'react'\r\nimport { Link } from 'react-router-dom'\r\n\r\nconst Header = () => {\r\n  return (\r\n    <header className=\"h-[60px] sticky top-0  flex items-center gap-3 border-b border-border bg-background/80 backdrop-blur-md px-4 py-2 shrink-0\">\r\n            <SidebarTrigger />\r\n            <Separator orientation=\"vertical\" className=\"h-4\" />\r\n\r\n            {/* Breadcrumb */}\r\n            <nav className=\"flex items-center w-full gap-1.5 text-sm min-w-0\">\r\n                <Link\r\n                    to=\"/\"\r\n                    className=\"text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2 shrink-0\"\r\n                >\r\n                    <Home className=\"h-3.5 w-3.5\" /><span className=\"hidden sm:inline\">Home</span>\r\n                </Link>\r\n                \r\n\r\n                {/* Search Autocomplete */}\r\n                <Autocomplete\r\n                    options={[]}\r\n                    placeholder=\"Tìm kiếm component...\"\r\n                    leftIcon={<Search className=\"h-4 w-4\" />}\r\n                    clearOnSelect\r\n                    // onValueChange={(href) => router.push(href)}\r\n                    emptyText=\"Không tìm thấy component\"\r\n                    className=\"ml-auto hidden md:flex md:w-[200px] lg:w-[240px]\"\r\n                />\r\n\r\n                {/* Action Buttons */}\r\n                <div className=\"flex items-center gap-1.5 sm:gap-2 ml-auto md:ml-3 shrink-0\">\r\n                    <Link to=\"https://github.com\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"hidden sm:block\">\r\n                        <Button variant=\"outline\" size=\"icon-sm\" className=\"rounded-lg \">\r\n                            <Code className=\"h-4 w-4\" />\r\n                        </Button>\r\n                    </Link>\r\n                    <Button variant=\"outline\" size=\"icon-sm\" className=\"rounded-lg \">\r\n                        <Bell className=\"h-4 w-4\" />\r\n                    </Button>\r\n                    <Button variant=\"outline\" size=\"icon-sm\" className=\"rounded-lg \">\r\n                        <Settings className=\"h-4 w-4\" />\r\n                    </Button>\r\n                </div>\r\n            </nav>\r\n        </header>\r\n  )\r\n}\r\n\r\nexport default Header"
+        },
+        {
+          "path": "src/components/ui/layout-demo2/_layout/SideBar.tsx",
+          "content": "import React from \"react\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { cn } from \"@/lib/utils/cn\";\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuCollapsible,\n  SidebarMenuSubItem,\n  useSidebar,\n} from \"@/components/ui/sidebar/Sidebar\";\nimport { routesConfig } from \"../constants/route.constants\";\n\nconst SideBar = () => {\n  const { pathname } = useLocation();\n  const { state } = useSidebar();\n  const isCollapsed = state === \"collapsed\";\n  return (\n    <Sidebar collapsible=\"icon\" variant=\"sidebar\" side=\"left\" data-lenis-prevent>\n      <SidebarHeader>\n        <Link to=\"/blocks\">\n          <div\n            className={cn(\n              \"flex items-center gap-3 px-2 py-2 rounded-md transition-all duration-200\",\n              isCollapsed && \"justify-center\",\n            )}\n          >\n            <div className=\"w-8 h-8 bg-primary rounded-lg flex items-center justify-center shrink-0 shadow-sm flex-none\">\n              <span className=\"text-primary-foreground font-bold text-sm select-none\">\n                UI\n              </span>\n            </div>\n            {!isCollapsed && (\n              <div className=\"overflow-hidden min-w-0\">\n                <p className=\"text-sm font-semibold text-foreground truncate leading-tight\">\n                  UI Library\n                </p>\n                <p className=\"text-xs text-muted-foreground truncate leading-tight\">\n                  Component Showcase\n                </p>\n              </div>\n            )}\n          </div>\n        </Link>\n      </SidebarHeader>\n\n      <SidebarContent>\n        {routesConfig.map((route, idx) => {\n          const isChildActive = route.items.some(\n            (item) => pathname === item.href,\n          );\n          const shouldDefaultOpen = isChildActive || route.defaultOpen === true;\n\n          return (\n            <SidebarGroup key={idx}>\n              {route.collapsible ? (\n                <>\n                  <SidebarGroupLabel>{route.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuCollapsible\n                          id={route.title}\n                          icon={\n                            <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                              {route.icon}\n                            </span>\n                          }\n                          label={route.title}\n                          defaultOpen={shouldDefaultOpen}\n                          isChildActive={isChildActive}\n                        >\n                          {route.items.map((item, i) => {\n                            const isActive = pathname === item.href;\n                            return (\n                              <SidebarMenuSubItem key={i}>\n                                <Link to={item.href}>\n                                  <SidebarMenuButton\n                                    isActive={isActive}\n                                    tooltip={item.title}\n                                    size=\"sm\"\n                                    className={cn(\n                                      isActive &&\n                                        \"bg-sidebar-accent text-sidebar-accent-foreground font-semibold\",\n                                    )}\n                                  >\n                                    <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                                      {item.icon}\n                                    </span>\n                                    <span className=\"truncate\">{item.title}</span>\n                                  </SidebarMenuButton>\n                                </Link>\n                              </SidebarMenuSubItem>\n                            );\n                          })}\n                        </SidebarMenuCollapsible>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </>\n              ) : (\n                <>\n                  <SidebarGroupLabel>{route.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {route.items.map((item, i) => {\n                        const isActive = pathname === item.href;\n                        return (\n                          <SidebarMenuItem key={i}>\n                            <Link to={item.href}>\n                              <SidebarMenuButton\n                                isActive={isActive}\n                                tooltip={item.title}\n                                size=\"sm\"\n                                className={cn(\n                                  isActive &&\n                                    \"bg-sidebar-accent text-sidebar-accent-foreground font-semibold\",\n                                )}\n                              >\n                                <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                                  {item.icon}\n                                </span>\n                                <span className=\"truncate\">{item.title}</span>\n                              </SidebarMenuButton>\n                            </Link>\n                          </SidebarMenuItem>\n                        );\n                      })}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </>\n              )}\n            </SidebarGroup>\n          );\n        })}\n      </SidebarContent>\n    </Sidebar>\n  );\n};\n\nexport default SideBar;\n"
+        }
+      ]
+    },
+    "layout-demo3": {
+      "name": "layout-demo3",
+      "dependencies": [
+        "lucide-react",
+        "react-resizable-panels",
+        "react-router-dom"
+      ],
+      "internalDependencies": [
+        "sidebar",
+        "resizable",
+        "skeleton",
+        "main",
+        "autocomplete",
+        "constants"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/layout-demo3/constants/route.constants.tsx",
+          "content": "import React from \"react\";\nimport {\n  BookOpen,\n  ChevronsUpDown,\n  FormInput,\n  Info,\n  LayoutGrid,\n  ListChecks,\n  Minus,\n  ScrollText,\n  Settings,\n  Square,\n  Tag,\n  TextCursorInput,\n  UserCircle,\n} from \"lucide-react\";\n\ninterface SidebarItem {\n  title: string;\n  href: string;\n  icon?: React.ReactNode;\n  badge?: string;\n}\n\ninterface SidebarSection {\n  title: string;\n  icon?: React.ReactNode;\n  collapsible: boolean;\n  defaultOpen?: boolean;\n  items: SidebarItem[];\n}\n\nexport const routesConfig: SidebarSection[] = [\n  {\n    title: \"Tổng quan\",\n    icon: <BookOpen className=\"w-4 h-4\" />,\n    collapsible: false,\n    items: [\n      {\n        title: \"Giới thiệu\",\n        href: \"/blocks\",\n        icon: <Info className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Guideline & Cài đặt CLI\",\n        href: \"/#\",\n        icon: <Settings className=\"w-4 h-4\" />,\n        badge: \"CLI\",\n      },\n    ],\n  },\n  {\n    title: \"General\",\n    icon: <LayoutGrid className=\"w-4 h-4\" />,\n    collapsible: true,\n    defaultOpen: true,\n    items: [\n      {\n        title: \"Button\",\n        href: \"/#\",\n        icon: <Square className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Badge\",\n        href: \"/#\",\n        icon: <Tag className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Avatar\",\n        href: \"/#\",\n        icon: <UserCircle className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Separator\",\n        href: \"/#\",\n        icon: <Minus className=\"w-4 h-4\" />,\n      },\n    ],\n  },\n  {\n    title: \"Forms\",\n    icon: <FormInput className=\"w-4 h-4\" />,\n    collapsible: true,\n    defaultOpen: true,\n    items: [\n      {\n        title: \"Input\",\n        href: \"/components-page/input\",\n        icon: <TextCursorInput className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Textarea\",\n        href: \"/components-page/textarea\",\n        icon: <ScrollText className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Select\",\n        href: \"/components-page/select\",\n        icon: <ChevronsUpDown className=\"w-4 h-4\" />,\n      },\n      {\n        title: \"Checkbox\",\n        href: \"/components-page/checkbox\",\n        icon: <ListChecks className=\"w-4 h-4\" />,\n      },\n    ],\n  },\n];\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo3/layout.tsx",
+          "content": "'use client'\r\n\r\nimport { useCallback, useEffect, useRef } from 'react'\r\nimport type { PanelImperativeHandle } from 'react-resizable-panels'\r\nimport {\r\n  SidebarProvider,\r\n  SidebarInset,\r\n  useSidebar,\r\n} from '@/components/ui/sidebar/Sidebar'\r\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable/Resizable'\r\nimport { ThemeProvider } from '@/lib/theme/ThemeProvider'\r\nimport SideBar from './_layout/SideBar'\r\nimport Header from './_layout/Header'\r\n\r\ninterface Props {\r\n  children: React.ReactNode\r\n}\r\n\r\nfunction LayoutBody({ children }: { children?: React.ReactNode }) {\r\n  const { open, setOpen, isMobile } = useSidebar();\r\n  const panelRef = useRef<PanelImperativeHandle>(null);\r\n  // Prevent onResize from echoing back the programmatic change\r\n  const syncingRef = useRef(false);\r\n\r\n  // Keyboard toggle (Ctrl+B) → collapse / expand panel\r\n  useEffect(() => {\r\n    const panel = panelRef.current;\r\n    if (!panel || isMobile) return;\r\n    syncingRef.current = true;\r\n    if (open) panel.expand();\r\n    else panel.collapse();\r\n    requestAnimationFrame(() => { syncingRef.current = false; });\r\n  }, [open, isMobile]);\r\n\r\n  // Drag-to-collapse/expand → update sidebar context\r\n  const handleSidebarResize = useCallback(\r\n    (size: { asPercentage: number; inPixels: number }) => {\r\n      if (syncingRef.current) return;\r\n      setOpen(size.inPixels > 8);\r\n    },\r\n    [setOpen],\r\n  );\r\n\r\n  const content = (\r\n    <SidebarInset className=\"h-full\">\r\n       <Header />\r\n      <main className=\"flex-1 overflow-y-auto\">\r\n        <div className=\"p-6 h-full\">\r\n          <ThemeProvider defaultTheme=\"\">\r\n            {children}\r\n          </ThemeProvider>\r\n        </div>\r\n      </main>\r\n    </SidebarInset>\r\n  );\r\n\r\n  // ── Mobile: sidebar renders as fixed overlay, no panel needed ──\r\n  if (isMobile) {\r\n    return (\r\n      <div className=\"flex h-screen w-full\">\r\n        <SideBar />\r\n        {content}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // ── Desktop: sidebar + handle + content as resizable panels ───\r\n  return (\r\n    <ResizablePanelGroup direction=\"horizontal\" className=\"h-full w-full\">\r\n      <ResizablePanel\r\n        id=\"app-sidebar\"\r\n        defaultSize=\"256px\"\r\n        minSize=\"160px\"\r\n        maxSize=\"480px\"\r\n        collapsible\r\n        collapsedSize=\"0px\"\r\n        groupResizeBehavior=\"preserve-pixel-size\"\r\n        panelRef={panelRef}\r\n        onResize={handleSidebarResize}\r\n      >\r\n        <SideBar />\r\n      </ResizablePanel>\r\n      {open && <ResizableHandle variant=\"bar\" />}\r\n\r\n\r\n      <ResizablePanel>\r\n        {content}\r\n      </ResizablePanel>\r\n      \r\n    </ResizablePanelGroup>\r\n  );\r\n}\r\n\r\nexport default function Layout({ children }: Props) {\r\n  return (\r\n   <div  className=\"h-screen w-full overflow-hidden\">\r\n      <SidebarProvider className=\"h-full \">\r\n        <LayoutBody>{children}</LayoutBody>\r\n      </SidebarProvider>\r\n    </div>\r\n  )\r\n}\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo3/main.tsx",
+          "content": "import React from 'react'\r\nimport Layout from './layout'\r\n\r\nconst Main = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Layout>\r\n        {children}\r\n    </Layout>\r\n  )\r\n}\r\n\r\nexport default Main"
+        },
+        {
+          "path": "src/components/ui/layout-demo3/_components/Test3.tsx",
+          "content": "import { Skeleton } from \"@/components/ui/skeleton/Skeleton\";\r\nimport Main from \"../main\";\r\n\r\nconst ContentSkeleton = () => (\r\n  <div className=\"flex flex-col gap-6 p-6 flex-1\">\r\n    {/* Header bar */}\r\n    <div className=\"flex items-center justify-between\">\r\n      <Skeleton className=\"h-6 w-40\" />\r\n      <div className=\"flex gap-2\">\r\n        <Skeleton rounded=\"full\" className=\"h-8 w-8\" />\r\n        <Skeleton rounded=\"full\" className=\"h-8 w-8\" />\r\n      </div>\r\n    </div>\r\n\r\n    {/* Stats cards */}\r\n    <div className=\"grid grid-cols-3 gap-4\">\r\n      {Array.from({ length: 3 }).map((_, i) => (\r\n        <div\r\n          key={i}\r\n          className=\"flex flex-col gap-2 p-4 border border-border rounded-lg\"\r\n        >\r\n          <Skeleton className=\"h-3 w-12 md:w-16 lg:w-20\" variant=\"muted\" />\r\n          <Skeleton className=\"h-7 w-14 md:w-20 lg:w-24\" />\r\n          <Skeleton className=\"h-3 w-12 md:w-16 lg:w-20\" variant=\"muted\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n\r\n    {/* Table */}\r\n    <div className=\"flex flex-col gap-2\">\r\n      {/* Table header */}\r\n      <div className=\"grid grid-cols-4 gap-4 px-3 py-2\">\r\n        {Array.from({ length: 4 }).map((_, i) => (\r\n          <Skeleton key={i} className=\"h-3 w-full\" variant=\"muted\" />\r\n        ))}\r\n      </div>\r\n      {/* Table rows */}\r\n      {Array.from({ length: 12 }).map((_, i) => (\r\n        <div\r\n          key={i}\r\n          className=\"grid grid-cols-4 gap-4 px-3 py-3 border border-border rounded-md\"\r\n        >\r\n          <div className=\"flex items-center gap-2\">\r\n            <Skeleton rounded=\"full\" className=\"h-6 w-6 shrink-0\" />\r\n            <Skeleton className=\"h-3 flex-1\" />\r\n          </div>\r\n          <Skeleton className=\"h-3 w-full\" variant=\"muted\" />\r\n          <Skeleton className=\"h-3 w-3/4\" variant=\"muted\" />\r\n          <Skeleton rounded=\"full\" className=\"h-5 w-16\" />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  </div>\r\n);\r\n\r\nconst Test = () => {\r\n  return (\r\n    <Main>\r\n      <div data-lenis-prevent>\r\n        <ContentSkeleton />\r\n      </div>\r\n    </Main>\r\n  );\r\n};\r\n\r\nexport default Test;\r\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo3/_layout/Header.tsx",
+          "content": "import { Button, Code, Separator, SidebarTrigger } from '@/components/ui'\nimport { Autocomplete } from '@/components/ui/autocomplete/Autocomplete'\nimport { Bell, Home, Search, Settings } from 'lucide-react'\nimport React from 'react'\nimport { Link } from 'react-router-dom'\n\nconst Header = () => {\n  return (\n    <header className=\"h-[60px] sticky top-0 flex items-center gap-3 border-b border-border bg-background/80 backdrop-blur-md px-4 py-2 shrink-0\">\n      <SidebarTrigger />\n      <Separator orientation=\"vertical\" className=\"h-4\" />\n\n      <nav className=\"flex items-center w-full gap-1.5 text-sm min-w-0\">\n        <Link\n          to=\"/\"\n          className=\"text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2 shrink-0\"\n        >\n          <Home className=\"h-3.5 w-3.5\" /><span className=\"hidden sm:inline\">Home</span>\n        </Link>\n\n        <Autocomplete\n          options={[]}\n          placeholder=\"Tìm kiếm component...\"\n          leftIcon={<Search className=\"h-4 w-4\" />}\n          clearOnSelect\n          emptyText=\"Không tìm thấy component\"\n          className=\"ml-auto hidden md:flex md:w-[200px] lg:w-[240px]\"\n        />\n\n        <div className=\"flex items-center gap-1.5 sm:gap-2 ml-auto md:ml-3 shrink-0\">\n          <Link to=\"https://github.com\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"hidden sm:block\">\n            <Button variant=\"outline\" size=\"icon-sm\" className=\"rounded-lg\">\n              <Code className=\"h-4 w-4\" />\n            </Button>\n          </Link>\n          <Button variant=\"outline\" size=\"icon-sm\" className=\"rounded-lg\">\n            <Bell className=\"h-4 w-4\" />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-sm\" className=\"rounded-lg\">\n            <Settings className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </nav>\n    </header>\n  )\n}\n\nexport default Header\n"
+        },
+        {
+          "path": "src/components/ui/layout-demo3/_layout/SideBar.tsx",
+          "content": "import React from \"react\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { cn } from \"@/lib/utils/cn\";\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuCollapsible,\n  SidebarMenuSubItem,\n  useSidebar,\n} from \"@/components/ui/sidebar/Sidebar\";\nimport { routesConfig } from \"../constants/route.constants\";\n\nconst SideBar = () => {\n  const { pathname } = useLocation();\n  const { state } = useSidebar();\n  const isCollapsed = state === \"collapsed\";\n  return (\n    <Sidebar collapsible=\"icon\" variant=\"sidebar\" side=\"left\" data-lenis-prevent>\n      <SidebarHeader>\n        <Link to=\"/blocks\">\n          <div\n            className={cn(\n              \"flex items-center gap-3 px-2 py-2 rounded-md transition-all duration-200\",\n              isCollapsed && \"justify-center\",\n            )}\n          >\n            <div className=\"w-8 h-8 bg-primary rounded-lg flex items-center justify-center shrink-0 shadow-sm flex-none\">\n              <span className=\"text-primary-foreground font-bold text-sm select-none\">\n                UI\n              </span>\n            </div>\n            {!isCollapsed && (\n              <div className=\"overflow-hidden min-w-0\">\n                <p className=\"text-sm font-semibold text-foreground truncate leading-tight\">\n                  UI Library\n                </p>\n                <p className=\"text-xs text-muted-foreground truncate leading-tight\">\n                  Component Showcase\n                </p>\n              </div>\n            )}\n          </div>\n        </Link>\n      </SidebarHeader>\n\n      <SidebarContent>\n        {routesConfig.map((route, idx) => {\n          const isChildActive = route.items.some(\n            (item) => pathname === item.href,\n          );\n          const shouldDefaultOpen = isChildActive || route.defaultOpen === true;\n\n          return (\n            <SidebarGroup key={idx}>\n              {route.collapsible ? (\n                <>\n                  <SidebarGroupLabel>{route.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuCollapsible\n                          id={route.title}\n                          icon={\n                            <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                              {route.icon}\n                            </span>\n                          }\n                          label={route.title}\n                          defaultOpen={shouldDefaultOpen}\n                          isChildActive={isChildActive}\n                        >\n                          {route.items.map((item, i) => {\n                            const isActive = pathname === item.href;\n                            return (\n                              <SidebarMenuSubItem key={i}>\n                                <Link to={item.href}>\n                                  <SidebarMenuButton\n                                    isActive={isActive}\n                                    tooltip={item.title}\n                                    size=\"sm\"\n                                    className={cn(\n                                      isActive &&\n                                        \"bg-sidebar-accent text-sidebar-accent-foreground font-semibold\",\n                                    )}\n                                  >\n                                    <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                                      {item.icon}\n                                    </span>\n                                    <span className=\"truncate\">{item.title}</span>\n                                  </SidebarMenuButton>\n                                </Link>\n                              </SidebarMenuSubItem>\n                            );\n                          })}\n                        </SidebarMenuCollapsible>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </>\n              ) : (\n                <>\n                  <SidebarGroupLabel>{route.title}</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      {route.items.map((item, i) => {\n                        const isActive = pathname === item.href;\n                        return (\n                          <SidebarMenuItem key={i}>\n                            <Link to={item.href}>\n                              <SidebarMenuButton\n                                isActive={isActive}\n                                tooltip={item.title}\n                                size=\"sm\"\n                                className={cn(\n                                  isActive &&\n                                    \"bg-sidebar-accent text-sidebar-accent-foreground font-semibold\",\n                                )}\n                              >\n                                <span className=\"shrink-0 w-4 h-4 flex items-center justify-center\">\n                                  {item.icon}\n                                </span>\n                                <span className=\"truncate\">{item.title}</span>\n                              </SidebarMenuButton>\n                            </Link>\n                          </SidebarMenuItem>\n                        );\n                      })}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </>\n              )}\n            </SidebarGroup>\n          );\n        })}\n      </SidebarContent>\n    </Sidebar>\n  );\n};\n\nexport default SideBar;\n"
+        }
+      ]
+    },
     "login-classic": {
       "name": "login-classic",
       "dependencies": [
@@ -600,7 +726,7 @@
       "files": [
         {
           "path": "src/components/ui/popover/Popover.tsx",
-          "content": "'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst popoverVariants = tv({\n  slots: {\n    popup: 'z-50 w-72 rounded-md border border-border bg-background p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-ending:animate-out data-ending:fade-out-0 data-ending:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\n    arrow: 'fill-popover stroke-border stroke-[1px]',\n  },\n});\n\nconst { popup, arrow } = popoverVariants();\n\n// ─── Compound Components ─────────────────────────────────────────────────────\n\nconst Popover = BasePopover.Root;\n\nconst PopoverTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof BasePopover.Trigger>\n>(({ children, render: renderProp, ...props }, ref) => {\n  // Wrap pattern: <PopoverTrigger><Button /></PopoverTrigger>\n  // → forward the element as `render` so Base UI merges trigger props into it (no nested <button>)\n  const isElement = React.isValidElement(children);\n  return (\n    <BasePopover.Trigger\n      ref={ref}\n      render={renderProp ?? (isElement ? (children as React.ReactElement) : undefined)}\n      {...props}\n    >\n      {isElement ? undefined : children}\n    </BasePopover.Trigger>\n  );\n});\nPopoverTrigger.displayName = 'PopoverTrigger';\n\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof BasePopover.Popup> {\n  /** Side offset from the trigger (default: 4) */\n  sideOffset?: number;\n  /** Side to display the popover (default: 'bottom') */\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Alignment relative to the trigger (default: 'center') */\n  align?: 'start' | 'center' | 'end';\n  /** Show the arrow indicator */\n  showArrow?: boolean;\n}\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ className, sideOffset = 4, side = 'bottom', align = 'center', showArrow = true, children, ...props }, ref) => (\n    <BasePopover.Portal>\n      <BasePopover.Positioner sideOffset={sideOffset} side={side} align={align}>\n        <BasePopover.Popup ref={ref} className={cn(popup(), className)} {...props}>\n          {showArrow && <BasePopover.Arrow className={arrow()} />}\n          {children}\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  )\n);\nPopoverContent.displayName = 'PopoverContent';\n\nconst PopoverClose = BasePopover.Close;\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverClose };\n"
+          "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Popover as BasePopover } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst popoverVariants = tv({\r\n  slots: {\r\n    popup: 'z-50 w-72 rounded-md border border-border bg-background p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-ending:animate-out data-ending:fade-out-0 data-ending:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n    arrow: 'fill-popover stroke-border stroke-[1px]',\r\n  },\r\n});\r\n\r\nconst { popup, arrow } = popoverVariants();\r\n\r\n// ─── Compound Components ─────────────────────────────────────────────────────\r\n\r\nconst Popover = BasePopover.Root;\r\n\r\nconst PopoverTrigger = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentPropsWithoutRef<typeof BasePopover.Trigger>\r\n>(({ children, render: renderProp, ...props }, ref) => {\r\n  // Wrap pattern: <PopoverTrigger><Button /></PopoverTrigger>\r\n  // → forward the element as `render` so Base UI merges trigger props into it (no nested <button>)\r\n  const isElement = React.isValidElement(children);\r\n  return (\r\n    <BasePopover.Trigger\r\n      ref={ref}\r\n      render={renderProp ?? (isElement ? (children as React.ReactElement) : undefined)}\r\n      {...props}\r\n    >\r\n      {isElement ? undefined : children}\r\n    </BasePopover.Trigger>\r\n  );\r\n});\r\nPopoverTrigger.displayName = 'PopoverTrigger';\r\n\r\nexport interface PopoverContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof BasePopover.Popup> {\r\n  /** Side offset from the trigger (default: 4) */\r\n  sideOffset?: number;\r\n  /** Side to display the popover (default: 'bottom') */\r\n  side?: 'top' | 'right' | 'bottom' | 'left';\r\n  /** Alignment relative to the trigger (default: 'center') */\r\n  align?: 'start' | 'center' | 'end';\r\n  /** Show the arrow indicator */\r\n  showArrow?: boolean;\r\n}\r\n\r\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\r\n  ({ className, sideOffset = 4, side = 'bottom', align = 'center', showArrow = true, children, ...props }, ref) => (\r\n    <BasePopover.Portal>\r\n      <BasePopover.Positioner sideOffset={sideOffset} side={side} align={align}>\r\n        <BasePopover.Popup ref={ref} className={cn(popup(), className)} {...props}>\r\n          {showArrow && <BasePopover.Arrow className={arrow()} />}\r\n          {children}\r\n        </BasePopover.Popup>\r\n      </BasePopover.Positioner>\r\n    </BasePopover.Portal>\r\n  )\r\n);\r\nPopoverContent.displayName = 'PopoverContent';\r\n\r\nconst PopoverClose = BasePopover.Close;\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent, PopoverClose };\r\n"
         }
       ]
     },
@@ -617,7 +743,7 @@
       "files": [
         {
           "path": "src/components/ui/pretty-code/PrettyCode.tsx",
-          "content": "import React, { useState, useEffect, useCallback } from 'react';\nimport { createHighlighter, type Highlighter } from 'shiki';\nimport { unified } from 'unified';\nimport rehypeParse from 'rehype-parse';\nimport rehypeReact from 'rehype-react';\nimport * as prod from 'react/jsx-runtime';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Singleton highlighter ────────────────────────────────────────────────────\nlet globalHighlighter: Highlighter | null = null;\n\nconst getHighlighter = async () => {\n    if (globalHighlighter) return globalHighlighter;\n    globalHighlighter = await createHighlighter({\n        themes: ['nord'],\n        langs: ['tsx', 'typescript', 'javascript', 'bash', 'json'],\n    });\n    return globalHighlighter;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\nconst LANG_LABELS: Record<string, string> = {\n    tsx: 'TSX',\n    typescript: 'TypeScript',\n    javascript: 'JavaScript',\n    bash: 'Bash',\n    json: 'JSON',\n};\n\n// Fixed widths for loading skeleton rows\nconst SKELETON_WIDTHS = ['68%', '82%', '54%', '76%', '45%', '60%'];\n\n// ─── Types ────────────────────────────────────────────────────────────────────\ninterface PrettyCodeProps {\n    code: string;\n    lang?: string;\n    /** Optional filename shown in the header bar */\n    filename?: string;\n    className?: string;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\nexport const PrettyCode: React.FC<PrettyCodeProps> = ({\n    code,\n    lang = 'tsx',\n    filename,\n    className,\n}) => {\n    const [nodes, setNodes] = useState<React.ReactNode>(null);\n    const [loading, setLoading] = useState(true);\n    const [copied, setCopied] = useState(false);\n\n    useEffect(() => {\n        let isMounted = true;\n        setLoading(true);\n        setNodes(null);\n\n        const highlight = async () => {\n            try {\n                const highlighter = await getHighlighter();\n                const html = highlighter.codeToHtml(code, { lang, theme: 'nord' });\n\n                const file = await unified()\n                    .use(rehypeParse, { fragment: true })\n                    .use(rehypeReact, { ...prod })\n                    .process(html);\n\n                if (isMounted) {\n                    setNodes(file.result as React.ReactNode);\n                    setLoading(false);\n                }\n            } catch (err) {\n                console.error('Failed to highlight code:', err);\n                if (isMounted) setLoading(false);\n            }\n        };\n\n        highlight();\n        return () => { isMounted = false; };\n    }, [code, lang]);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(code);\n            setCopied(true);\n            setTimeout(() => setCopied(false), 2000);\n        } catch {\n            // clipboard not available\n        }\n    }, [code]);\n\n    const langLabel = LANG_LABELS[lang] ?? lang.toUpperCase();\n\n    return (\n        <div className={cn('rounded-xl overflow-hidden border border-white/[0.07] bg-[#2e3440] shadow-2xl', className)}>\n\n            {/* ── Header bar ── */}\n            <div className=\"flex items-center justify-between px-4 py-2.5 bg-[#252b37] border-b border-white/[0.07] select-none\">\n\n                {/* Left: window dots + filename */}\n                <div className=\"flex items-center gap-3 min-w-0\">\n                    <div className=\"flex items-center gap-1.5 shrink-0\">\n                        <span className=\"w-3 h-3 rounded-full bg-[#ff5f57]\" />\n                        <span className=\"w-3 h-3 rounded-full bg-[#febc2e]\" />\n                        <span className=\"w-3 h-3 rounded-full bg-[#28c840]\" />\n                    </div>\n                    {filename && (\n                        <span className=\"text-[11px] text-zinc-400 font-mono truncate leading-none\">\n                            {filename}\n                        </span>\n                    )}\n                </div>\n\n                {/* Right: language badge + copy button */}\n                <div className=\"flex items-center gap-2 shrink-0 ml-4\">\n                    <span className=\"hidden sm:block text-[10px] font-bold tracking-widest text-zinc-600 uppercase\">\n                        {langLabel}\n                    </span>\n\n                    <button\n                        onClick={handleCopy}\n                        aria-label=\"Copy code\"\n                        className={cn(\n                            'flex items-center gap-1.5 px-2 py-1 rounded-md',\n                            'text-xs font-medium transition-all duration-150 active:scale-95',\n                            copied\n                                ? 'text-emerald-400 bg-emerald-400/10'\n                                : 'text-zinc-400 hover:text-zinc-100 hover:bg-white/10',\n                        )}\n                    >\n                        {copied\n                            ? <Check className=\"w-3.5 h-3.5 shrink-0\" />\n                            : <Copy className=\"w-3.5 h-3.5 shrink-0\" />\n                        }\n                        <span className=\"hidden sm:inline w-[42px]\">\n                            {copied ? 'Copied!' : 'Copy'}\n                        </span>\n                    </button>\n                </div>\n            </div>\n\n            {/* ── Code area ── */}\n            {loading ? (\n                <div className=\"p-5 space-y-3 animate-pulse\" aria-hidden>\n                    {SKELETON_WIDTHS.map((w, i) => (\n                        <div\n                            key={i}\n                            className=\"h-3.5 rounded-full bg-white/[0.08]\"\n                            style={{ width: w }}\n                        />\n                    ))}\n                </div>\n            ) : (\n                <div\n                    className=\"overflow-x-auto\n                        [&_pre]:!bg-transparent [&_pre]:m-0\n                        [&_pre]:px-5 [&_pre]:py-4\n                        [&_pre]:text-[13px] [&_pre]:leading-[1.7]\n                        [&_code]:font-mono [&_code]:text-[13px]\"\n                >\n                    {nodes}\n                </div>\n            )}\n        </div>\n    );\n};\n"
+          "content": "import React, { useState, useEffect, useCallback } from 'react';\r\nimport { createHighlighter, type Highlighter } from 'shiki';\r\nimport { unified } from 'unified';\r\nimport rehypeParse from 'rehype-parse';\r\nimport rehypeReact from 'rehype-react';\r\nimport * as prod from 'react/jsx-runtime';\r\nimport { Copy, Check } from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n// ─── Singleton highlighter ────────────────────────────────────────────────────\r\nlet globalHighlighter: Highlighter | null = null;\r\n\r\nconst getHighlighter = async () => {\r\n    if (globalHighlighter) return globalHighlighter;\r\n    globalHighlighter = await createHighlighter({\r\n        themes: ['nord'],\r\n        langs: ['tsx', 'typescript', 'javascript', 'bash', 'json'],\r\n    });\r\n    return globalHighlighter;\r\n};\r\n\r\n// ─── Helpers ──────────────────────────────────────────────────────────────────\r\nconst LANG_LABELS: Record<string, string> = {\r\n    tsx: 'TSX',\r\n    typescript: 'TypeScript',\r\n    javascript: 'JavaScript',\r\n    bash: 'Bash',\r\n    json: 'JSON',\r\n};\r\n\r\n// Fixed widths for loading skeleton rows\r\nconst SKELETON_WIDTHS = ['68%', '82%', '54%', '76%', '45%', '60%'];\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\ninterface PrettyCodeProps {\r\n    code: string;\r\n    lang?: string;\r\n    /** Optional filename shown in the header bar */\r\n    filename?: string;\r\n    className?: string;\r\n}\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\nexport const PrettyCode: React.FC<PrettyCodeProps> = ({\r\n    code,\r\n    lang = 'tsx',\r\n    filename,\r\n    className,\r\n}) => {\r\n    const [nodes, setNodes] = useState<React.ReactNode>(null);\r\n    const [loading, setLoading] = useState(true);\r\n    const [copied, setCopied] = useState(false);\r\n\r\n    useEffect(() => {\r\n        let isMounted = true;\r\n        setLoading(true);\r\n        setNodes(null);\r\n\r\n        const highlight = async () => {\r\n            try {\r\n                const highlighter = await getHighlighter();\r\n                const html = highlighter.codeToHtml(code, { lang, theme: 'nord' });\r\n\r\n                const file = await unified()\r\n                    .use(rehypeParse, { fragment: true })\r\n                    .use(rehypeReact, { ...prod })\r\n                    .process(html);\r\n\r\n                if (isMounted) {\r\n                    setNodes(file.result as React.ReactNode);\r\n                    setLoading(false);\r\n                }\r\n            } catch (err) {\r\n                console.error('Failed to highlight code:', err);\r\n                if (isMounted) setLoading(false);\r\n            }\r\n        };\r\n\r\n        highlight();\r\n        return () => { isMounted = false; };\r\n    }, [code, lang]);\r\n\r\n    const handleCopy = useCallback(async () => {\r\n        try {\r\n            await navigator.clipboard.writeText(code);\r\n            setCopied(true);\r\n            setTimeout(() => setCopied(false), 2000);\r\n        } catch {\r\n            // clipboard not available\r\n        }\r\n    }, [code]);\r\n\r\n    const langLabel = LANG_LABELS[lang] ?? lang.toUpperCase();\r\n\r\n    return (\r\n        <div className={cn('rounded-xl overflow-hidden border border-white/[0.07] bg-[#2e3440] shadow-2xl', className)}>\r\n\r\n            {/* ── Header bar ── */}\r\n            <div className=\"flex items-center justify-between px-4 py-2.5 bg-[#252b37] border-b border-white/[0.07] select-none\">\r\n\r\n                {/* Left: window dots + filename */}\r\n                <div className=\"flex items-center gap-3 min-w-0\">\r\n                    <div className=\"flex items-center gap-1.5 shrink-0\">\r\n                        <span className=\"w-3 h-3 rounded-full bg-[#ff5f57]\" />\r\n                        <span className=\"w-3 h-3 rounded-full bg-[#febc2e]\" />\r\n                        <span className=\"w-3 h-3 rounded-full bg-[#28c840]\" />\r\n                    </div>\r\n                    {filename && (\r\n                        <span className=\"text-[11px] text-zinc-400 font-mono truncate leading-none\">\r\n                            {filename}\r\n                        </span>\r\n                    )}\r\n                </div>\r\n\r\n                {/* Right: language badge + copy button */}\r\n                <div className=\"flex items-center gap-2 shrink-0 ml-4\">\r\n                    <span className=\"hidden sm:block text-[10px] font-bold tracking-widest text-zinc-600 uppercase\">\r\n                        {langLabel}\r\n                    </span>\r\n\r\n                    <button\r\n                        onClick={handleCopy}\r\n                        aria-label=\"Copy code\"\r\n                        className={cn(\r\n                            'flex items-center gap-1.5 px-2 py-1 rounded-md',\r\n                            'text-xs font-medium transition-all duration-150 active:scale-95',\r\n                            copied\r\n                                ? 'text-emerald-400 bg-emerald-400/10'\r\n                                : 'text-zinc-400 hover:text-zinc-100 hover:bg-white/10',\r\n                        )}\r\n                    >\r\n                        {copied\r\n                            ? <Check className=\"w-3.5 h-3.5 shrink-0\" />\r\n                            : <Copy className=\"w-3.5 h-3.5 shrink-0\" />\r\n                        }\r\n                        <span className=\"hidden sm:inline w-[42px]\">\r\n                            {copied ? 'Copied!' : 'Copy'}\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            {/* ── Code area ── */}\r\n            {loading ? (\r\n                <div className=\"p-5 space-y-3 animate-pulse\" aria-hidden>\r\n                    {SKELETON_WIDTHS.map((w, i) => (\r\n                        <div\r\n                            key={i}\r\n                            className=\"h-3.5 rounded-full bg-white/[0.08]\"\r\n                            style={{ width: w }}\r\n                        />\r\n                    ))}\r\n                </div>\r\n            ) : (\r\n                <div\r\n                    className=\"overflow-x-auto\r\n                        [&_pre]:!bg-transparent [&_pre]:m-0\r\n                        [&_pre]:px-5 [&_pre]:py-4\r\n                        [&_pre]:text-[13px] [&_pre]:leading-[1.7]\r\n                        [&_code]:font-mono [&_code]:text-[13px]\"\r\n                >\r\n                    {nodes}\r\n                </div>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n"
         }
       ]
     },
@@ -689,7 +815,7 @@
       "files": [
         {
           "path": "src/components/ui/rate/Rate.tsx",
-          "content": "'use client';\n\nimport * as React from 'react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { Star } from 'lucide-react';\n\nconst rateVariants = tv({\n  slots: {\n    root: 'inline-flex items-center gap-0.5',\n    star: 'relative cursor-pointer transition-transform duration-100 hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm',\n    starIcon: 'transition-colors duration-150',\n  },\n  variants: {\n    size: {\n      sm: { star: 'w-4 h-4', starIcon: 'w-4 h-4' },\n      md: { star: 'w-6 h-6', starIcon: 'w-6 h-6' },\n      lg: { star: 'w-8 h-8', starIcon: 'w-8 h-8' },\n      xl: { star: 'w-10 h-10', starIcon: 'w-10 h-10' },\n    },\n    readonly: {\n      true: { star: 'cursor-default hover:scale-100' },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n/** Props for the Rate component */\nexport interface RateProps extends VariantProps<typeof rateVariants> {\n  /** Controlled rating value */\n  value?: number;\n  /** Default rating value (uncontrolled) */\n  defaultValue?: number;\n  /** Callback fired when the rating changes */\n  onChange?: (value: number) => void;\n  /** Total number of stars */\n  count?: number;\n  /** Allow half-star precision */\n  allowHalf?: boolean;\n  /** Allow clicking the current value to reset to 0 */\n  allowClear?: boolean;\n  /** Display as read-only (no interaction) */\n  readonly?: boolean;\n  /** Disable the rating component */\n  disabled?: boolean;\n  /** Custom element to render instead of the default star icon */\n  character?: React.ReactNode;\n  /** Tailwind text color class for filled stars */\n  activeColor?: string;\n  /** Tailwind text color class for empty stars */\n  inactiveColor?: string;\n  className?: string;\n  /** Accessible label for the rating group */\n  'aria-label'?: string;\n  /**\n   * Custom label for individual stars.\n   * Receives the star index (1-based) and returns a string.\n   * Defaults to \"1 star\", \"2 stars\", etc.\n   */\n  getStarLabel?: (index: number) => string;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(({\n  value: controlledValue,\n  defaultValue = 0,\n  onChange,\n  count = 5,\n  allowHalf = false,\n  allowClear = true,\n  readonly = false,\n  disabled = false,\n  character,\n  activeColor = 'text-amber-400',\n  inactiveColor = 'text-muted-foreground/30',\n  size,\n  className,\n  'aria-label': ariaLabel,\n  getStarLabel,\n}, ref) => {\n  const isControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\n  const [hoverValue, setHoverValue] = React.useState<number | null>(null);\n\n  const value = isControlled ? controlledValue! : internalValue;\n\n  const handleChange = (newVal: number) => {\n    if (readonly || disabled) return;\n    const next = allowClear && newVal === value ? 0 : newVal;\n    if (!isControlled) setInternalValue(next);\n    onChange?.(next);\n  };\n\n  const defaultGetStarLabel = (index: number) =>\n    index === 1 ? '1 star' : `${index} stars`;\n\n  const resolveLabel = getStarLabel ?? defaultGetStarLabel;\n\n  const getStarFraction = (starIndex: number, displayValue: number): number => {\n    const full = starIndex + 1;\n    const half = starIndex + 0.5;\n    if (displayValue >= full) return 1;\n    if (allowHalf && displayValue >= half) return 0.5;\n    return 0;\n  };\n\n  const slots = rateVariants({ size, readonly: readonly || disabled });\n  const display = hoverValue ?? value;\n\n  return (\n    <div\n      ref={ref}\n      className={slots.root({ className })}\n      role=\"radiogroup\"\n      aria-label={ariaLabel || 'Rating'}\n    >\n      {Array.from({ length: count }, (_, i) => {\n        const fraction = getStarFraction(i, display);\n        const full = i + 1;\n        const half = i + 0.5;\n\n        const renderStar = (frac: number) => {\n          if (character) {\n            if (frac === 0.5) {\n              return (\n                <span className=\"relative inline-flex items-center justify-center w-full h-full\">\n                  <span className={`absolute inset-0 overflow-hidden ${inactiveColor}`}>{character}</span>\n                  <span className=\"absolute inset-0 overflow-hidden w-1/2\" style={{ color: 'inherit' }}>\n                    <span className={activeColor}>{character}</span>\n                  </span>\n                </span>\n              );\n            }\n            return <span className={frac === 1 ? activeColor : inactiveColor}>{character}</span>;\n          }\n\n          if (frac === 0.5) {\n            return (\n              <span className=\"relative inline-flex items-center justify-center w-full h-full\">\n                <Star className={`${slots.starIcon()} ${inactiveColor}`} fill=\"currentColor\" />\n                <span\n                  className=\"absolute inset-0 overflow-hidden\"\n                  style={{ width: '50%' }}\n                  aria-hidden=\"true\"\n                >\n                  <Star className={`${slots.starIcon()} ${activeColor}`} fill=\"currentColor\" />\n                </span>\n              </span>\n            );\n          }\n\n          return (\n            <Star\n              className={`${slots.starIcon()} ${frac === 1 ? activeColor : inactiveColor}`}\n              fill=\"currentColor\"\n            />\n          );\n        };\n\n        return (\n          <button\n            key={i}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={full <= value}\n            aria-label={resolveLabel(full)}\n            disabled={disabled}\n            className={slots.star()}\n            onMouseMove={(e) => {\n              if (readonly || disabled) return;\n              if (allowHalf) {\n                const rect = e.currentTarget.getBoundingClientRect();\n                const isLeft = e.clientX - rect.left < rect.width / 2;\n                setHoverValue(isLeft ? half : full);\n              } else {\n                setHoverValue(full);\n              }\n            }}\n            onMouseLeave={() => setHoverValue(null)}\n            onClick={(e) => {\n              if (readonly || disabled) return;\n              if (allowHalf) {\n                const rect = e.currentTarget.getBoundingClientRect();\n                const isLeft = e.clientX - rect.left < rect.width / 2;\n                handleChange(isLeft ? half : full);\n              } else {\n                handleChange(full);\n              }\n            }}\n            onKeyDown={(e) => {\n              if (readonly || disabled) return;\n              if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n                e.preventDefault();\n                handleChange(Math.min(count, value + (allowHalf ? 0.5 : 1)));\n              } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                handleChange(Math.max(0, value - (allowHalf ? 0.5 : 1)));\n              }\n            }}\n          >\n            {renderStar(fraction)}\n          </button>\n        );\n      })}\n    </div>\n  );\n});\n\nRate.displayName = 'Rate';\n\nexport { Rate };\n"
+          "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { Star } from 'lucide-react';\r\n\r\nconst rateVariants = tv({\r\n  slots: {\r\n    root: 'inline-flex items-center gap-0.5',\r\n    star: 'relative cursor-pointer transition-transform duration-100 hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm',\r\n    starIcon: 'transition-colors duration-150',\r\n  },\r\n  variants: {\r\n    size: {\r\n      sm: { star: 'w-4 h-4', starIcon: 'w-4 h-4' },\r\n      md: { star: 'w-6 h-6', starIcon: 'w-6 h-6' },\r\n      lg: { star: 'w-8 h-8', starIcon: 'w-8 h-8' },\r\n      xl: { star: 'w-10 h-10', starIcon: 'w-10 h-10' },\r\n    },\r\n    readonly: {\r\n      true: { star: 'cursor-default hover:scale-100' },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: 'md',\r\n  },\r\n});\r\n\r\n/** Props for the Rate component */\r\nexport interface RateProps extends VariantProps<typeof rateVariants> {\r\n  /** Controlled rating value */\r\n  value?: number;\r\n  /** Default rating value (uncontrolled) */\r\n  defaultValue?: number;\r\n  /** Callback fired when the rating changes */\r\n  onChange?: (value: number) => void;\r\n  /** Total number of stars */\r\n  count?: number;\r\n  /** Allow half-star precision */\r\n  allowHalf?: boolean;\r\n  /** Allow clicking the current value to reset to 0 */\r\n  allowClear?: boolean;\r\n  /** Display as read-only (no interaction) */\r\n  readonly?: boolean;\r\n  /** Disable the rating component */\r\n  disabled?: boolean;\r\n  /** Custom element to render instead of the default star icon */\r\n  character?: React.ReactNode;\r\n  /** Tailwind text color class for filled stars */\r\n  activeColor?: string;\r\n  /** Tailwind text color class for empty stars */\r\n  inactiveColor?: string;\r\n  className?: string;\r\n  /** Accessible label for the rating group */\r\n  'aria-label'?: string;\r\n  /**\r\n   * Custom label for individual stars.\r\n   * Receives the star index (1-based) and returns a string.\r\n   * Defaults to \"1 star\", \"2 stars\", etc.\r\n   */\r\n  getStarLabel?: (index: number) => string;\r\n}\r\n\r\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(({\r\n  value: controlledValue,\r\n  defaultValue = 0,\r\n  onChange,\r\n  count = 5,\r\n  allowHalf = false,\r\n  allowClear = true,\r\n  readonly = false,\r\n  disabled = false,\r\n  character,\r\n  activeColor = 'text-amber-400',\r\n  inactiveColor = 'text-muted-foreground/30',\r\n  size,\r\n  className,\r\n  'aria-label': ariaLabel,\r\n  getStarLabel,\r\n}, ref) => {\r\n  const isControlled = controlledValue !== undefined;\r\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\r\n  const [hoverValue, setHoverValue] = React.useState<number | null>(null);\r\n\r\n  const value = isControlled ? controlledValue! : internalValue;\r\n\r\n  const handleChange = (newVal: number) => {\r\n    if (readonly || disabled) return;\r\n    const next = allowClear && newVal === value ? 0 : newVal;\r\n    if (!isControlled) setInternalValue(next);\r\n    onChange?.(next);\r\n  };\r\n\r\n  const defaultGetStarLabel = (index: number) =>\r\n    index === 1 ? '1 star' : `${index} stars`;\r\n\r\n  const resolveLabel = getStarLabel ?? defaultGetStarLabel;\r\n\r\n  const getStarFraction = (starIndex: number, displayValue: number): number => {\r\n    const full = starIndex + 1;\r\n    const half = starIndex + 0.5;\r\n    if (displayValue >= full) return 1;\r\n    if (allowHalf && displayValue >= half) return 0.5;\r\n    return 0;\r\n  };\r\n\r\n  const slots = rateVariants({ size, readonly: readonly || disabled });\r\n  const display = hoverValue ?? value;\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      className={slots.root({ className })}\r\n      role=\"radiogroup\"\r\n      aria-label={ariaLabel || 'Rating'}\r\n    >\r\n      {Array.from({ length: count }, (_, i) => {\r\n        const fraction = getStarFraction(i, display);\r\n        const full = i + 1;\r\n        const half = i + 0.5;\r\n\r\n        const renderStar = (frac: number) => {\r\n          if (character) {\r\n            if (frac === 0.5) {\r\n              return (\r\n                <span className=\"relative inline-flex items-center justify-center w-full h-full\">\r\n                  <span className={`absolute inset-0 overflow-hidden ${inactiveColor}`}>{character}</span>\r\n                  <span className=\"absolute inset-0 overflow-hidden w-1/2\" style={{ color: 'inherit' }}>\r\n                    <span className={activeColor}>{character}</span>\r\n                  </span>\r\n                </span>\r\n              );\r\n            }\r\n            return <span className={frac === 1 ? activeColor : inactiveColor}>{character}</span>;\r\n          }\r\n\r\n          if (frac === 0.5) {\r\n            return (\r\n              <span className=\"relative inline-flex items-center justify-center w-full h-full\">\r\n                <Star className={`${slots.starIcon()} ${inactiveColor}`} fill=\"currentColor\" />\r\n                <span\r\n                  className=\"absolute inset-0 overflow-hidden\"\r\n                  style={{ width: '50%' }}\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <Star className={`${slots.starIcon()} ${activeColor}`} fill=\"currentColor\" />\r\n                </span>\r\n              </span>\r\n            );\r\n          }\r\n\r\n          return (\r\n            <Star\r\n              className={`${slots.starIcon()} ${frac === 1 ? activeColor : inactiveColor}`}\r\n              fill=\"currentColor\"\r\n            />\r\n          );\r\n        };\r\n\r\n        return (\r\n          <button\r\n            key={i}\r\n            type=\"button\"\r\n            role=\"radio\"\r\n            aria-checked={full <= value}\r\n            aria-label={resolveLabel(full)}\r\n            disabled={disabled}\r\n            className={slots.star()}\r\n            onMouseMove={(e) => {\r\n              if (readonly || disabled) return;\r\n              if (allowHalf) {\r\n                const rect = e.currentTarget.getBoundingClientRect();\r\n                const isLeft = e.clientX - rect.left < rect.width / 2;\r\n                setHoverValue(isLeft ? half : full);\r\n              } else {\r\n                setHoverValue(full);\r\n              }\r\n            }}\r\n            onMouseLeave={() => setHoverValue(null)}\r\n            onClick={(e) => {\r\n              if (readonly || disabled) return;\r\n              if (allowHalf) {\r\n                const rect = e.currentTarget.getBoundingClientRect();\r\n                const isLeft = e.clientX - rect.left < rect.width / 2;\r\n                handleChange(isLeft ? half : full);\r\n              } else {\r\n                handleChange(full);\r\n              }\r\n            }}\r\n            onKeyDown={(e) => {\r\n              if (readonly || disabled) return;\r\n              if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\r\n                e.preventDefault();\r\n                handleChange(Math.min(count, value + (allowHalf ? 0.5 : 1)));\r\n              } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\r\n                e.preventDefault();\r\n                handleChange(Math.max(0, value - (allowHalf ? 0.5 : 1)));\r\n              }\r\n            }}\r\n          >\r\n            {renderStar(fraction)}\r\n          </button>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n});\r\n\r\nRate.displayName = 'Rate';\r\n\r\nexport { Rate };\r\n"
         }
       ]
     },
@@ -716,7 +842,7 @@
       "files": [
         {
           "path": "src/components/ui/scroll-area/ScrollArea.tsx",
-          "content": "'use client';\n\nimport * as React from 'react';\nimport { tv, type VariantProps } from 'tailwind-variants';\n\nconst scrollAreaVariants = tv({\n  slots: {\n    root: 'relative overflow-hidden',\n    viewport: 'h-full w-full rounded-[inherit] [&>div]:!block',\n    scrollbar: 'flex touch-none select-none transition-colors',\n    thumb: 'relative rounded-full bg-border hover:bg-muted-foreground/30 transition-colors',\n  },\n  variants: {\n    size: {\n      sm: { scrollbar: '', thumb: '' },\n      md: {},\n      lg: {},\n    },\n    orientation: {\n      vertical: {\n        scrollbar: 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n        thumb: 'flex-1',\n      },\n      horizontal: {\n        scrollbar: 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n        thumb: '',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    orientation: 'vertical',\n  },\n});\n\n/** Props for the ScrollArea component */\nexport interface ScrollAreaProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<VariantProps<typeof scrollAreaVariants>, 'orientation'> {\n  /** Scroll direction: vertical, horizontal, or both */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n  /** Accessible label for the scrollable region */\n  'aria-label'?: string;\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, children, orientation = 'vertical', size, 'aria-label': ariaLabel, ...props }, ref) => {\n    const { root, viewport } = scrollAreaVariants({ size });\n\n    const overflowClass =\n      orientation === 'both'\n        ? 'overflow-auto'\n        : orientation === 'horizontal'\n          ? 'overflow-x-auto overflow-y-hidden'\n          : 'overflow-y-auto overflow-x-hidden';\n\n    return (\n      <div\n        ref={ref}\n        className={root({ className })}\n        role=\"region\"\n        aria-label={ariaLabel}\n        {...props}\n      >\n        <div\n          className={viewport({\n            className: `${overflowClass} scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent`,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\nScrollArea.displayName = 'ScrollArea';\n\n/** Props for the ScrollBar component */\nexport interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Scrollbar axis direction */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => {\n    const { scrollbar, thumb } = scrollAreaVariants({ orientation });\n    return (\n      <div ref={ref} className={scrollbar({ className })} {...props}>\n        <div className={thumb()} />\n      </div>\n    );\n  }\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar, scrollAreaVariants };\n"
+          "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\n\r\nconst scrollAreaVariants = tv({\r\n  slots: {\r\n    root: 'relative overflow-hidden',\r\n    viewport: 'h-full w-full rounded-[inherit] [&>div]:!block',\r\n    scrollbar: 'flex touch-none select-none transition-colors',\r\n    thumb: 'relative rounded-full bg-border hover:bg-muted-foreground/30 transition-colors',\r\n  },\r\n  variants: {\r\n    size: {\r\n      sm: { scrollbar: '', thumb: '' },\r\n      md: {},\r\n      lg: {},\r\n    },\r\n    orientation: {\r\n      vertical: {\r\n        scrollbar: 'h-full w-2.5 border-l border-l-transparent p-[1px]',\r\n        thumb: 'flex-1',\r\n      },\r\n      horizontal: {\r\n        scrollbar: 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\r\n        thumb: '',\r\n      },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: 'md',\r\n    orientation: 'vertical',\r\n  },\r\n});\r\n\r\n/** Props for the ScrollArea component */\r\nexport interface ScrollAreaProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    Omit<VariantProps<typeof scrollAreaVariants>, 'orientation'> {\r\n  /** Scroll direction: vertical, horizontal, or both */\r\n  orientation?: 'vertical' | 'horizontal' | 'both';\r\n  /** Accessible label for the scrollable region */\r\n  'aria-label'?: string;\r\n}\r\n\r\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\r\n  ({ className, children, orientation = 'vertical', size, 'aria-label': ariaLabel, ...props }, ref) => {\r\n    const { root, viewport } = scrollAreaVariants({ size });\r\n\r\n    const overflowClass =\r\n      orientation === 'both'\r\n        ? 'overflow-auto'\r\n        : orientation === 'horizontal'\r\n          ? 'overflow-x-auto overflow-y-hidden'\r\n          : 'overflow-y-auto overflow-x-hidden';\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={root({ className })}\r\n        role=\"region\"\r\n        aria-label={ariaLabel}\r\n        {...props}\r\n      >\r\n        <div\r\n          className={viewport({\r\n            className: `${overflowClass} scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent`,\r\n          })}\r\n        >\r\n          {children}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\nScrollArea.displayName = 'ScrollArea';\r\n\r\n/** Props for the ScrollBar component */\r\nexport interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Scrollbar axis direction */\r\n  orientation?: 'vertical' | 'horizontal';\r\n}\r\n\r\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\r\n  ({ className, orientation = 'vertical', ...props }, ref) => {\r\n    const { scrollbar, thumb } = scrollAreaVariants({ orientation });\r\n    return (\r\n      <div ref={ref} className={scrollbar({ className })} {...props}>\r\n        <div className={thumb()} />\r\n      </div>\r\n    );\r\n  }\r\n);\r\nScrollBar.displayName = 'ScrollBar';\r\n\r\nexport { ScrollArea, ScrollBar, scrollAreaVariants };\r\n"
         }
       ]
     },
@@ -779,11 +905,11 @@
       "files": [
         {
           "path": "src/components/ui/sidebar/Sidebar.tsx",
-          "content": "// Sidebar — barrel re-export\n// Split into: SidebarContext, SidebarLayout, SidebarMenu, SidebarUserMenu\n\nexport { useSidebar, SidebarProvider } from './SidebarContext';\nexport type { SidebarProviderProps } from './SidebarContext';\n\nexport {\n  SidebarTrigger,\n  Sidebar,\n  SidebarRail,\n  SidebarInset,\n  SidebarHeader,\n  SidebarFooter,\n  SidebarContent,\n  SidebarSeparator,\n} from './SidebarLayout';\nexport type { SidebarProps } from './SidebarLayout';\n\nexport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarNavLink,\n  SidebarMenuCollapsible,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuBadge,\n  SidebarMenuSkeleton,\n} from './SidebarMenu';\nexport type { SidebarMenuButtonProps, SidebarNavLinkProps, SidebarMenuCollapsibleProps } from './SidebarMenu';\n\nexport { UserMenuPopover, UserMenuItem } from './SidebarUserMenu';\n"
+          "content": "// Sidebar — barrel re-export\r\n// Split into: SidebarContext, SidebarLayout, SidebarMenu, SidebarUserMenu\r\n\r\nexport { useSidebar, SidebarProvider } from './SidebarContext';\r\nexport type { SidebarProviderProps } from './SidebarContext';\r\n\r\nexport {\r\n  SidebarTrigger,\r\n  Sidebar,\r\n  SidebarRail,\r\n  SidebarInset,\r\n  SidebarHeader,\r\n  SidebarFooter,\r\n  SidebarContent,\r\n  SidebarSeparator,\r\n} from './SidebarLayout';\r\nexport type { SidebarProps } from './SidebarLayout';\r\n\r\nexport {\r\n  SidebarGroup,\r\n  SidebarGroupLabel,\r\n  SidebarGroupContent,\r\n  SidebarMenu,\r\n  SidebarMenuItem,\r\n  SidebarMenuButton,\r\n  SidebarNavLink,\r\n  SidebarMenuCollapsible,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubItem,\r\n  SidebarMenuBadge,\r\n  SidebarMenuSkeleton,\r\n} from './SidebarMenu';\r\nexport type { SidebarMenuButtonProps, SidebarNavLinkProps, SidebarMenuCollapsibleProps } from './SidebarMenu';\r\n\r\nexport { UserMenuPopover, UserMenuItem } from './SidebarUserMenu';\r\n"
         },
         {
           "path": "src/components/ui/sidebar/SidebarContext.tsx",
-          "content": "import * as React from 'react';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Constants ────────────────────────────────────────────────────────────────\n\nexport const SIDEBAR_WIDTH_DEFAULT = 256; // px\nexport const SIDEBAR_WIDTH_MIN = 160; // px\nexport const SIDEBAR_WIDTH_MAX = 480; // px\nexport const SIDEBAR_WIDTH_ICON = '4rem';\nexport const MOBILE_BREAKPOINT = 768;\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type SidebarState = 'expanded' | 'collapsed';\n\nexport interface SidebarContextValue {\n  state: SidebarState;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  toggleSidebar: () => void;\n  isMobile: boolean;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  sidebarWidth: number;\n  setSidebarWidth: (w: number) => void;\n}\n\nexport const SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar() {\n  const ctx = React.useContext(SidebarContext);\n  if (!ctx) throw new Error('useSidebar must be used within SidebarProvider');\n  return ctx;\n}\n\n// ─── Provider ─────────────────────────────────────────────────────────────────\n\n/** Props for the SidebarProvider that manages sidebar state (open/collapsed, mobile, width) */\nexport interface SidebarProviderProps {\n  children: React.ReactNode;\n  /** Initial open state for uncontrolled usage (default: true) */\n  defaultOpen?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback fired when the sidebar opens or closes */\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n  ({ children, defaultOpen = true, open: controlledOpen, onOpenChange, className, style }, ref) => {\n    const [isMobile, setIsMobile] = React.useState(false);\n    const [openMobile, setOpenMobile] = React.useState(false);\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n    const [sidebarWidth, setSidebarWidth] = React.useState(SIDEBAR_WIDTH_DEFAULT);\n\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen! : internalOpen;\n\n    React.useEffect(() => {\n      const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n      check();\n      window.addEventListener('resize', check);\n      return () => window.removeEventListener('resize', check);\n    }, []);\n\n    const setOpen = React.useCallback(\n      (val: boolean) => {\n        if (!isControlled) setInternalOpen(val);\n        onOpenChange?.(val);\n      },\n      [isControlled, onOpenChange]\n    );\n\n    const toggleSidebar = React.useCallback(() => {\n      if (isMobile) setOpenMobile((v) => !v);\n      else setOpen(!open);\n    }, [isMobile, open, setOpen]);\n\n    React.useEffect(() => {\n      const onKey = (e: KeyboardEvent) => {\n        if ((e.metaKey || e.ctrlKey) && e.key === 'b') {\n          e.preventDefault();\n          toggleSidebar();\n        }\n      };\n      window.addEventListener('keydown', onKey);\n      return () => window.removeEventListener('keydown', onKey);\n    }, [toggleSidebar]);\n\n    const state: SidebarState = open ? 'expanded' : 'collapsed';\n\n    return (\n      <SidebarContext.Provider\n        value={{ state, open, setOpen, toggleSidebar, isMobile, openMobile, setOpenMobile, sidebarWidth, setSidebarWidth }}\n      >\n        <div\n          ref={ref}\n          data-sidebar-state={state}\n          style={\n            {\n              '--sidebar-width': `${sidebarWidth}px`,\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn('group/sidebar-wrapper flex min-h-screen w-full has-data-[variant=inset]:bg-muted/30', className)}\n        >\n          {children}\n        </div>\n      </SidebarContext.Provider>\n    );\n  }\n);\nSidebarProvider.displayName = 'SidebarProvider';\n"
+          "content": "import * as React from 'react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n// ─── Constants ────────────────────────────────────────────────────────────────\r\n\r\nexport const SIDEBAR_WIDTH_DEFAULT = 256; // px\r\nexport const SIDEBAR_WIDTH_MIN = 160; // px\r\nexport const SIDEBAR_WIDTH_MAX = 480; // px\r\nexport const SIDEBAR_WIDTH_ICON = '4rem';\r\nexport const MOBILE_BREAKPOINT = 768;\r\n\r\n// ─── Context ──────────────────────────────────────────────────────────────────\r\n\r\nexport type SidebarState = 'expanded' | 'collapsed';\r\n\r\nexport interface SidebarContextValue {\r\n  state: SidebarState;\r\n  open: boolean;\r\n  setOpen: (open: boolean) => void;\r\n  toggleSidebar: () => void;\r\n  isMobile: boolean;\r\n  openMobile: boolean;\r\n  setOpenMobile: (open: boolean) => void;\r\n  sidebarWidth: number;\r\n  setSidebarWidth: (w: number) => void;\r\n}\r\n\r\nexport const SidebarContext = React.createContext<SidebarContextValue | null>(null);\r\n\r\nexport function useSidebar() {\r\n  const ctx = React.useContext(SidebarContext);\r\n  if (!ctx) throw new Error('useSidebar must be used within SidebarProvider');\r\n  return ctx;\r\n}\r\n\r\n// ─── Provider ─────────────────────────────────────────────────────────────────\r\n\r\n/** Props for the SidebarProvider that manages sidebar state (open/collapsed, mobile, width) */\r\nexport interface SidebarProviderProps {\r\n  children: React.ReactNode;\r\n  /** Initial open state for uncontrolled usage (default: true) */\r\n  defaultOpen?: boolean;\r\n  /** Controlled open state */\r\n  open?: boolean;\r\n  /** Callback fired when the sidebar opens or closes */\r\n  onOpenChange?: (open: boolean) => void;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\r\n  ({ children, defaultOpen = true, open: controlledOpen, onOpenChange, className, style }, ref) => {\r\n    const [isMobile, setIsMobile] = React.useState(false);\r\n    const [openMobile, setOpenMobile] = React.useState(false);\r\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\r\n    const [sidebarWidth, setSidebarWidth] = React.useState(SIDEBAR_WIDTH_DEFAULT);\r\n\r\n    const isControlled = controlledOpen !== undefined;\r\n    const open = isControlled ? controlledOpen! : internalOpen;\r\n\r\n    React.useEffect(() => {\r\n      const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n      check();\r\n      window.addEventListener('resize', check);\r\n      return () => window.removeEventListener('resize', check);\r\n    }, []);\r\n\r\n    const setOpen = React.useCallback(\r\n      (val: boolean) => {\r\n        if (!isControlled) setInternalOpen(val);\r\n        onOpenChange?.(val);\r\n      },\r\n      [isControlled, onOpenChange]\r\n    );\r\n\r\n    const toggleSidebar = React.useCallback(() => {\r\n      if (isMobile) setOpenMobile((v) => !v);\r\n      else setOpen(!open);\r\n    }, [isMobile, open, setOpen]);\r\n\r\n    React.useEffect(() => {\r\n      const onKey = (e: KeyboardEvent) => {\r\n        if ((e.metaKey || e.ctrlKey) && e.key === 'b') {\r\n          e.preventDefault();\r\n          toggleSidebar();\r\n        }\r\n      };\r\n      window.addEventListener('keydown', onKey);\r\n      return () => window.removeEventListener('keydown', onKey);\r\n    }, [toggleSidebar]);\r\n\r\n    const state: SidebarState = open ? 'expanded' : 'collapsed';\r\n\r\n    return (\r\n      <SidebarContext.Provider\r\n        value={{ state, open, setOpen, toggleSidebar, isMobile, openMobile, setOpenMobile, sidebarWidth, setSidebarWidth }}\r\n      >\r\n        <div\r\n          ref={ref}\r\n          data-sidebar-state={state}\r\n          style={\r\n            {\r\n              '--sidebar-width': `${sidebarWidth}px`,\r\n              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\r\n              ...style,\r\n            } as React.CSSProperties\r\n          }\r\n          className={cn('group/sidebar-wrapper flex min-h-screen w-full has-data-[variant=inset]:bg-muted/30', className)}\r\n        >\r\n          {children}\r\n        </div>\r\n      </SidebarContext.Provider>\r\n    );\r\n  }\r\n);\r\nSidebarProvider.displayName = 'SidebarProvider';\r\n"
         },
         {
           "path": "src/components/ui/sidebar/SidebarLayout.tsx",
@@ -791,11 +917,11 @@
         },
         {
           "path": "src/components/ui/sidebar/SidebarMenu.tsx",
-          "content": "import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport { ChevronRight } from 'lucide-react';\nimport { tv } from 'tailwind-variants';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\nimport { cn } from '@/lib/utils/cn';\nimport { useSidebar } from './SidebarContext';\n\n// ─── Group ────────────────────────────────────────────────────────────────────\n\nexport const SidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn('relative flex flex-col w-full min-w-0 px-2 py-1', className)}\n      {...props}\n    />\n  )\n);\nSidebarGroup.displayName = 'SidebarGroup';\n\nexport const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const { state } = useSidebar();\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group-label\"\n        className={cn(\n          'flex h-8 shrink-0 items-center rounded-md px-2',\n          'text-xs font-semibold text-sidebar-foreground/50 uppercase tracking-wider',\n          'motion-safe:transition-all motion-safe:duration-200 overflow-hidden whitespace-nowrap select-none',\n          state === 'collapsed' ? 'opacity-0 h-0 mb-0 hidden' : 'opacity-100',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nexport const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn('w-full', className)}\n      {...props}\n    />\n  )\n);\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\n// ─── Menu ─────────────────────────────────────────────────────────────────────\n\nexport const SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn('flex flex-col gap-0.5 list-none m-0 p-0 w-full', className)}\n      {...props}\n    />\n  )\n);\nSidebarMenu.displayName = 'SidebarMenu';\n\nexport const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn('group/menu-item relative', className)}\n      {...props}\n    />\n  )\n);\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\n// ─── SidebarMenuButton ────────────────────────────────────────────────────────\n\nexport const menuButtonVariants = tv({\n  base: [\n    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md',\n    'text-sm font-medium outline-none ring-sidebar-ring motion-safe:transition-all motion-safe:duration-150',\n    'hover:bg-accent hover:text-accent-foreground',\n    'focus-visible:ring-2 active:bg-accent/80',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n    // Data state active\n    'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[active=true]:font-semibold',\n  ],\n  variants: {\n    size: {\n      sm: 'h-7 text-xs px-2',\n      md: 'h-9 px-2',\n      lg: 'h-11 text-base px-3',\n    },\n    collapsed: {\n      true: 'justify-center px-0',\n      false: 'justify-start',\n    },\n  },\n  defaultVariants: { size: 'md', collapsed: false },\n});\n\n/** Props for a sidebar menu button */\nexport interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Render as child element instead of a button */\n  asChild?: boolean;\n  /** Marks the button as the currently active item */\n  isActive?: boolean;\n  /** Tooltip text shown when the sidebar is collapsed */\n  tooltip?: string;\n  /** Button size variant */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  ({ className, isActive = false, tooltip, size = 'md', children, ...props }, ref) => {\n    const { state } = useSidebar();\n    const isCollapsed = state === 'collapsed';\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-sidebar=\"menu-button\"\n        data-active={isActive}\n        data-size={size}\n        className={menuButtonVariants({ size, collapsed: isCollapsed, className })}\n        {...props}\n      >\n        {isCollapsed\n          ? React.Children.toArray(children)[0]\n          : children}\n      </button>\n    );\n\n    if (isCollapsed && tooltip) {\n      return (\n        <Tooltip>\n          <TooltipTrigger render={button} />\n          <TooltipContent side=\"right\">{tooltip}</TooltipContent>\n        </Tooltip>\n      );\n    }\n\n    return button;\n  }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\n// ─── SidebarNavLink — wraps React Router NavLink ─────────────────────────────\n\n/** Props for a sidebar navigation link (wraps React Router NavLink) */\nexport interface SidebarNavLinkProps {\n  /** Route path for the link */\n  to: string;\n  /** Icon rendered before the label */\n  icon?: React.ReactNode;\n  /** Display text for the link; also used as tooltip when collapsed */\n  label: string;\n  /** Match route exactly (React Router `end` prop) */\n  end?: boolean;\n  /** Badge element rendered after the label */\n  badge?: React.ReactNode;\n  /** Link size variant */\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nexport const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({\n  to,\n  icon,\n  label,\n  end = false,\n  badge,\n  size = 'md',\n  className,\n}) => {\n  const { state } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n\n  const link = (\n    <NavLink\n      to={to}\n      end={end}\n      className={({ isActive }) => cn(\n        menuButtonVariants({ size, collapsed: isCollapsed, className }),\n        isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground font-semibold' : 'text-sidebar-foreground/70'\n      )}\n    >\n      {icon && (\n        <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">\n          {icon}\n        </span>\n      )}\n      {!isCollapsed && (\n        <>\n          <span className=\"flex-1 truncate\">{label}</span>\n          {badge && <span className=\"ml-auto shrink-0\">{badge}</span>}\n        </>\n      )}\n    </NavLink>\n  );\n\n  if (isCollapsed && label) {\n    return (\n      <Tooltip>\n        <TooltipTrigger render={link} />\n        <TooltipContent side=\"right\">{label}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  return link;\n};\nSidebarNavLink.displayName = 'SidebarNavLink';\n\n// ─── SidebarMenuCollapsible — nhóm có sub-items ───────────────────────────────\n\n/** Props for a collapsible sidebar menu group with sub-items */\nexport interface SidebarMenuCollapsibleProps {\n  /** Unique identifier for the group */\n  id: string;\n  /** Icon displayed next to the group label */\n  icon: React.ReactNode;\n  /** Display text for the collapsible group header */\n  label: string;\n  children: React.ReactNode;\n  /** Whether the group is initially expanded */\n  defaultOpen?: boolean;\n  /** When true, the group auto-expands and shows an active indicator */\n  isChildActive?: boolean;\n}\n\nexport const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({\n  icon,\n  label,\n  children,\n  defaultOpen = false,\n  isChildActive = false,\n}) => {\n  const { state } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n\n  const [isOpen, setIsOpen] = React.useState(defaultOpen || isChildActive);\n  const prevOpenRef = React.useRef(isOpen);\n\n  // Khi sidebar collapse → đóng tất cả sub-menu, ghi nhớ state\n  // Khi sidebar expand → khôi phục state cũ\n  React.useEffect(() => {\n    if (isCollapsed) {\n      prevOpenRef.current = isOpen;\n      setIsOpen(false);\n    } else {\n      setIsOpen(prevOpenRef.current);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isCollapsed]);\n\n  // Khi có child active, mở group\n  React.useEffect(() => {\n    if (isChildActive && !isCollapsed) {\n      setIsOpen(true);\n      prevOpenRef.current = true;\n    }\n  }, [isChildActive, isCollapsed]);\n\n  const trigger = (\n    <button\n      type=\"button\"\n      aria-expanded={isOpen}\n      data-active={isChildActive && isCollapsed}\n      onClick={() => {\n        if (!isCollapsed) {\n          const next = !isOpen;\n          setIsOpen(next);\n          prevOpenRef.current = next;\n        }\n      }}\n      className={menuButtonVariants({\n        collapsed: isCollapsed,\n        className:\n          isChildActive && isCollapsed\n            ? 'text-sidebar-accent-foreground'\n            : 'text-sidebar-foreground/70',\n      })}\n    >\n      <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">{icon}</span>\n      {!isCollapsed && (\n        <>\n          <span className=\"flex-1 truncate text-left\">{label}</span>\n          <ChevronRight\n            className={cn(\n              'ml-auto h-3.5 w-3.5 shrink-0 text-sidebar-foreground/40',\n              'motion-safe:transition-transform motion-safe:duration-200',\n              isOpen && 'rotate-90'\n            )}\n          />\n        </>\n      )}\n    </button>\n  );\n\n  return (\n    <>\n      {isCollapsed ? (\n        <Tooltip>\n          <TooltipTrigger render={trigger} />\n          <TooltipContent side=\"right\">{label}</TooltipContent>\n        </Tooltip>\n      ) : (\n        trigger\n      )}\n\n      {/* Sub-items với animation mượt - Sử dụng SidebarMenuSub (ul) để hợp lệ HTML */}\n      <SidebarMenuSub\n        className={cn(\n          'overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-in-out',\n          !isCollapsed && isOpen ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'\n        )}\n      >\n        {children}\n      </SidebarMenuSub>\n    </>\n  );\n};\nSidebarMenuCollapsible.displayName = 'SidebarMenuCollapsible';\n\n// ─── SidebarMenuSub ───────────────────────────────────────────────────────────\n\nexport const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n  ({ className, ...props }, ref) => {\n    const { state } = useSidebar();\n    if (state === 'collapsed') return null;\n    return (\n      <ul\n        ref={ref}\n        data-sidebar=\"menu-sub\"\n        className={cn('mx-3.5 flex min-w-0 flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 list-none', className)}\n        {...props}\n      />\n    );\n  }\n);\nSidebarMenuSub.displayName = 'SidebarMenuSub';\n\nexport const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\n  (props, ref) => <li ref={ref} {...props} />\n);\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem';\n\n// ─── Badge & Skeleton ─────────────────────────────────────────────────────────\n\nexport const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn('ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-xs font-medium text-primary', className)}\n      {...props}\n    />\n  )\n);\nSidebarMenuBadge.displayName = 'SidebarMenuBadge';\n\nexport const SidebarMenuSkeleton: React.FC<{ showIcon?: boolean }> = ({ showIcon = true }) => (\n  <div className=\"flex h-9 items-center gap-2 rounded-md px-2\">\n    {showIcon && <div className=\"h-4 w-4 rounded bg-sidebar-accent motion-safe:animate-pulse shrink-0\" />}\n    <div className=\"h-4 flex-1 rounded bg-sidebar-accent motion-safe:animate-pulse\" />\n  </div>\n);\n"
+          "content": "import * as React from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { ChevronRight } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { useSidebar } from './SidebarContext';\r\n\r\n// ─── Group ────────────────────────────────────────────────────────────────────\r\n\r\nexport const SidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n  ({ className, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"group\"\r\n      className={cn('relative flex flex-col w-full min-w-0 px-2 py-1', className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarGroup.displayName = 'SidebarGroup';\r\n\r\nexport const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n  ({ className, ...props }, ref) => {\r\n    const { state } = useSidebar();\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-sidebar=\"group-label\"\r\n        className={cn(\r\n          'flex h-8 shrink-0 items-center rounded-md px-2',\r\n          'text-xs font-semibold text-sidebar-foreground/50 uppercase tracking-wider',\r\n          'motion-safe:transition-all motion-safe:duration-200 overflow-hidden whitespace-nowrap select-none',\r\n          state === 'collapsed' ? 'opacity-0 h-0 mb-0 hidden' : 'opacity-100',\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\r\n\r\nexport const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n  ({ className, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"group-content\"\r\n      className={cn('w-full', className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarGroupContent.displayName = 'SidebarGroupContent';\r\n\r\n// ─── Menu ─────────────────────────────────────────────────────────────────────\r\n\r\nexport const SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\r\n  ({ className, ...props }, ref) => (\r\n    <ul\r\n      ref={ref}\r\n      data-sidebar=\"menu\"\r\n      className={cn('flex flex-col gap-0.5 list-none m-0 p-0 w-full', className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenu.displayName = 'SidebarMenu';\r\n\r\nexport const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\r\n  ({ className, ...props }, ref) => (\r\n    <li\r\n      ref={ref}\r\n      data-sidebar=\"menu-item\"\r\n      className={cn('group/menu-item relative', className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenuItem.displayName = 'SidebarMenuItem';\r\n\r\n// ─── SidebarMenuButton ────────────────────────────────────────────────────────\r\n\r\nexport const menuButtonVariants = tv({\r\n  base: [\r\n    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md',\r\n    'text-sm font-medium outline-none ring-sidebar-ring motion-safe:transition-all motion-safe:duration-150',\r\n    'hover:bg-accent hover:text-accent-foreground',\r\n    'focus-visible:ring-2 active:bg-accent/80',\r\n    'disabled:pointer-events-none disabled:opacity-50',\r\n    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\r\n    // Data state active\r\n    'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[active=true]:font-semibold',\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: 'h-7 text-xs px-2',\r\n      md: 'h-9 px-2',\r\n      lg: 'h-11 text-base px-3',\r\n    },\r\n    collapsed: {\r\n      true: 'justify-center px-0',\r\n      false: 'justify-start',\r\n    },\r\n  },\r\n  defaultVariants: { size: 'md', collapsed: false },\r\n});\r\n\r\n/** Props for a sidebar menu button */\r\nexport interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Render as child element instead of a button */\r\n  asChild?: boolean;\r\n  /** Marks the button as the currently active item */\r\n  isActive?: boolean;\r\n  /** Tooltip text shown when the sidebar is collapsed */\r\n  tooltip?: string;\r\n  /** Button size variant */\r\n  size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nexport const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\r\n  ({ className, isActive = false, tooltip, size = 'md', children, ...props }, ref) => {\r\n    const { state } = useSidebar();\r\n    const isCollapsed = state === 'collapsed';\r\n\r\n    const button = (\r\n      <button\r\n        ref={ref}\r\n        type=\"button\"\r\n        data-sidebar=\"menu-button\"\r\n        data-active={isActive}\r\n        data-size={size}\r\n        className={menuButtonVariants({ size, collapsed: isCollapsed, className })}\r\n        {...props}\r\n      >\r\n        {isCollapsed\r\n          ? React.Children.toArray(children)[0]\r\n          : children}\r\n      </button>\r\n    );\r\n\r\n    if (isCollapsed && tooltip) {\r\n      return (\r\n        <Tooltip>\r\n          <TooltipTrigger render={button} />\r\n          <TooltipContent side=\"right\">{tooltip}</TooltipContent>\r\n        </Tooltip>\r\n      );\r\n    }\r\n\r\n    return button;\r\n  }\r\n);\r\nSidebarMenuButton.displayName = 'SidebarMenuButton';\r\n\r\n// ─── SidebarNavLink — wraps React Router NavLink ─────────────────────────────\r\n\r\n/** Props for a sidebar navigation link (wraps React Router NavLink) */\r\nexport interface SidebarNavLinkProps {\r\n  /** Route path for the link */\r\n  to: string;\r\n  /** Icon rendered before the label */\r\n  icon?: React.ReactNode;\r\n  /** Display text for the link; also used as tooltip when collapsed */\r\n  label: string;\r\n  /** Match route exactly (React Router `end` prop) */\r\n  end?: boolean;\r\n  /** Badge element rendered after the label */\r\n  badge?: React.ReactNode;\r\n  /** Link size variant */\r\n  size?: 'sm' | 'md' | 'lg';\r\n  className?: string;\r\n}\r\n\r\nexport const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({\r\n  to,\r\n  icon,\r\n  label,\r\n  end = false,\r\n  badge,\r\n  size = 'md',\r\n  className,\r\n}) => {\r\n  const { state } = useSidebar();\r\n  const isCollapsed = state === 'collapsed';\r\n\r\n  const link = (\r\n    <NavLink\r\n      to={to}\r\n      end={end}\r\n      className={({ isActive }) => cn(\r\n        menuButtonVariants({ size, collapsed: isCollapsed, className }),\r\n        isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground font-semibold' : 'text-sidebar-foreground/70'\r\n      )}\r\n    >\r\n      {icon && (\r\n        <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">\r\n          {icon}\r\n        </span>\r\n      )}\r\n      {!isCollapsed && (\r\n        <>\r\n          <span className=\"flex-1 truncate\">{label}</span>\r\n          {badge && <span className=\"ml-auto shrink-0\">{badge}</span>}\r\n        </>\r\n      )}\r\n    </NavLink>\r\n  );\r\n\r\n  if (isCollapsed && label) {\r\n    return (\r\n      <Tooltip>\r\n        <TooltipTrigger render={link} />\r\n        <TooltipContent side=\"right\">{label}</TooltipContent>\r\n      </Tooltip>\r\n    );\r\n  }\r\n\r\n  return link;\r\n};\r\nSidebarNavLink.displayName = 'SidebarNavLink';\r\n\r\n// ─── SidebarMenuCollapsible — nhóm có sub-items ───────────────────────────────\r\n\r\n/** Props for a collapsible sidebar menu group with sub-items */\r\nexport interface SidebarMenuCollapsibleProps {\r\n  /** Unique identifier for the group */\r\n  id: string;\r\n  /** Icon displayed next to the group label */\r\n  icon: React.ReactNode;\r\n  /** Display text for the collapsible group header */\r\n  label: string;\r\n  children: React.ReactNode;\r\n  /** Whether the group is initially expanded */\r\n  defaultOpen?: boolean;\r\n  /** When true, the group auto-expands and shows an active indicator */\r\n  isChildActive?: boolean;\r\n}\r\n\r\nexport const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({\r\n  icon,\r\n  label,\r\n  children,\r\n  defaultOpen = false,\r\n  isChildActive = false,\r\n}) => {\r\n  const { state } = useSidebar();\r\n  const isCollapsed = state === 'collapsed';\r\n\r\n  const [isOpen, setIsOpen] = React.useState(defaultOpen || isChildActive);\r\n  const prevOpenRef = React.useRef(isOpen);\r\n\r\n  // Khi sidebar collapse → đóng tất cả sub-menu, ghi nhớ state\r\n  // Khi sidebar expand → khôi phục state cũ\r\n  React.useEffect(() => {\r\n    if (isCollapsed) {\r\n      prevOpenRef.current = isOpen;\r\n      setIsOpen(false);\r\n    } else {\r\n      setIsOpen(prevOpenRef.current);\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [isCollapsed]);\r\n\r\n  // Khi có child active, mở group\r\n  React.useEffect(() => {\r\n    if (isChildActive && !isCollapsed) {\r\n      setIsOpen(true);\r\n      prevOpenRef.current = true;\r\n    }\r\n  }, [isChildActive, isCollapsed]);\r\n\r\n  const trigger = (\r\n    <button\r\n      type=\"button\"\r\n      aria-expanded={isOpen}\r\n      data-active={isChildActive && isCollapsed}\r\n      onClick={() => {\r\n        if (!isCollapsed) {\r\n          const next = !isOpen;\r\n          setIsOpen(next);\r\n          prevOpenRef.current = next;\r\n        }\r\n      }}\r\n      className={menuButtonVariants({\r\n        collapsed: isCollapsed,\r\n        className:\r\n          isChildActive && isCollapsed\r\n            ? 'text-sidebar-accent-foreground'\r\n            : 'text-sidebar-foreground/70',\r\n      })}\r\n    >\r\n      <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">{icon}</span>\r\n      {!isCollapsed && (\r\n        <>\r\n          <span className=\"flex-1 truncate text-left\">{label}</span>\r\n          <ChevronRight\r\n            className={cn(\r\n              'ml-auto h-3.5 w-3.5 shrink-0 text-sidebar-foreground/40',\r\n              'motion-safe:transition-transform motion-safe:duration-200',\r\n              isOpen && 'rotate-90'\r\n            )}\r\n          />\r\n        </>\r\n      )}\r\n    </button>\r\n  );\r\n\r\n  return (\r\n    <>\r\n      {isCollapsed ? (\r\n        <Tooltip>\r\n          <TooltipTrigger render={trigger} />\r\n          <TooltipContent side=\"right\">{label}</TooltipContent>\r\n        </Tooltip>\r\n      ) : (\r\n        trigger\r\n      )}\r\n\r\n      {/* Sub-items với animation mượt - Sử dụng SidebarMenuSub (ul) để hợp lệ HTML */}\r\n      <SidebarMenuSub\r\n        className={cn(\r\n          'overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-in-out',\r\n          !isCollapsed && isOpen ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'\r\n        )}\r\n      >\r\n        {children}\r\n      </SidebarMenuSub>\r\n    </>\r\n  );\r\n};\r\nSidebarMenuCollapsible.displayName = 'SidebarMenuCollapsible';\r\n\r\n// ─── SidebarMenuSub ───────────────────────────────────────────────────────────\r\n\r\nexport const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\r\n  ({ className, ...props }, ref) => {\r\n    const { state } = useSidebar();\r\n    if (state === 'collapsed') return null;\r\n    return (\r\n      <ul\r\n        ref={ref}\r\n        data-sidebar=\"menu-sub\"\r\n        className={cn('mx-3.5 flex min-w-0 flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 list-none', className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\nSidebarMenuSub.displayName = 'SidebarMenuSub';\r\n\r\nexport const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\r\n  (props, ref) => <li ref={ref} {...props} />\r\n);\r\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem';\r\n\r\n// ─── Badge & Skeleton ─────────────────────────────────────────────────────────\r\n\r\nexport const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n  ({ className, ...props }, ref) => (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"menu-badge\"\r\n      className={cn('ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-xs font-medium text-primary', className)}\r\n      {...props}\r\n    />\r\n  )\r\n);\r\nSidebarMenuBadge.displayName = 'SidebarMenuBadge';\r\n\r\nexport const SidebarMenuSkeleton: React.FC<{ showIcon?: boolean }> = ({ showIcon = true }) => (\r\n  <div className=\"flex h-9 items-center gap-2 rounded-md px-2\">\r\n    {showIcon && <div className=\"h-4 w-4 rounded bg-sidebar-accent motion-safe:animate-pulse shrink-0\" />}\r\n    <div className=\"h-4 flex-1 rounded bg-sidebar-accent motion-safe:animate-pulse\" />\r\n  </div>\r\n);\r\n"
         },
         {
           "path": "src/components/ui/sidebar/SidebarUserMenu.tsx",
-          "content": "import * as React from 'react';\nimport { ChevronsUpDown } from 'lucide-react';\nimport { Popover as BasePopover } from '@base-ui/react';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\nimport { cn } from '@/lib/utils/cn';\nimport { useSidebar } from './SidebarContext';\nimport { menuButtonVariants } from './SidebarMenu';\n\n// ─── User Menu Popover (shadcn style) ─────────────────────────────────────────\n\ninterface UserMenuPopoverProps {\n  name: string;\n  email: string;\n  avatar?: string;\n  children?: React.ReactNode;\n}\n\nexport const UserMenuPopover: React.FC<UserMenuPopoverProps> = ({ name, email, avatar, children }) => {\n  const { state } = useSidebar();\n  const isCollapsed = state === 'collapsed';\n  const [open, setOpen] = React.useState(false);\n\n  const trigger = (\n    <BasePopover.Trigger\n      render={\n        <button\n          type=\"button\"\n          data-active={open}\n          className={cn(\n            menuButtonVariants({ size: 'lg', collapsed: isCollapsed }),\n            'data-[active=true]:bg-sidebar-accent'\n          )}\n        >\n          <img\n            src={avatar || 'https://i.pravatar.cc/100'}\n            alt={name}\n            className=\"w-8 h-8 rounded-lg shrink-0 object-cover border border-sidebar-border\"\n          />\n          {!isCollapsed && (\n            <>\n              <div className=\"flex-1 text-left overflow-hidden grid\">\n                <span className=\"text-sm font-semibold truncate leading-tight\">{name}</span>\n                <span className=\"text-xs text-sidebar-foreground/50 truncate leading-tight\">{email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto h-4 w-4 shrink-0 text-sidebar-foreground/40\" />\n            </>\n          )}\n        </button>\n      }\n    />\n  );\n\n  return (\n    <BasePopover.Root open={open} onOpenChange={setOpen}>\n      {isCollapsed ? (\n        <Tooltip>\n          <TooltipTrigger render={trigger} />\n          <TooltipContent side=\"right\">{name}</TooltipContent>\n        </Tooltip>\n      ) : (\n        trigger\n      )}\n      <BasePopover.Portal>\n        <BasePopover.Positioner side=\"right\" align=\"end\" sideOffset={8}>\n          <BasePopover.Popup\n            className={cn(\n              'z-50 w-64 rounded-xl border border-border bg-popover shadow-xl outline-none p-1',\n              'motion-safe:data-open:animate-in motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95',\n              'motion-safe:data-closed:animate-out motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95'\n            )}\n          >\n            {/* User info header */}\n            <div className=\"flex items-center gap-3 p-3 pb-2 border-b border-border/50\">\n              <img\n                src={avatar || 'https://i.pravatar.cc/100'}\n                alt={name}\n                className=\"w-10 h-10 rounded-lg object-cover border border-border\"\n              />\n              <div className=\"flex-1 overflow-hidden\">\n                <p className=\"text-sm font-semibold truncate\">{name}</p>\n                <p className=\"text-xs text-muted-foreground truncate\">{email}</p>\n              </div>\n            </div>\n\n            {/* Menu items */}\n            <div className=\"py-1\">{children}</div>\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      </BasePopover.Portal>\n    </BasePopover.Root>\n  );\n};\n\n// ─── UserMenuItem (item trong popover) ───────────────────────────────────────\n\ninterface UserMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n  destructive?: boolean;\n}\n\nexport const UserMenuItem: React.FC<UserMenuItemProps> = ({ icon, children, destructive, className, ...props }) => (\n  <button\n    type=\"button\"\n    className={cn(\n      'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm motion-safe:transition-colors',\n      'hover:bg-muted outline-none focus-visible:bg-muted',\n      destructive ? 'text-destructive hover:text-destructive' : 'text-foreground',\n      className\n    )}\n    {...props}\n  >\n    {icon && <span className=\"shrink-0 h-4 w-4 flex items-center justify-center\">{icon}</span>}\n    {children}\n  </button>\n);\n"
+          "content": "import * as React from 'react';\r\nimport { ChevronsUpDown } from 'lucide-react';\r\nimport { Popover as BasePopover } from '@base-ui/react';\r\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { useSidebar } from './SidebarContext';\r\nimport { menuButtonVariants } from './SidebarMenu';\r\n\r\n// ─── User Menu Popover (shadcn style) ─────────────────────────────────────────\r\n\r\ninterface UserMenuPopoverProps {\r\n  name: string;\r\n  email: string;\r\n  avatar?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const UserMenuPopover: React.FC<UserMenuPopoverProps> = ({ name, email, avatar, children }) => {\r\n  const { state } = useSidebar();\r\n  const isCollapsed = state === 'collapsed';\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  const trigger = (\r\n    <BasePopover.Trigger\r\n      render={\r\n        <button\r\n          type=\"button\"\r\n          data-active={open}\r\n          className={cn(\r\n            menuButtonVariants({ size: 'lg', collapsed: isCollapsed }),\r\n            'data-[active=true]:bg-sidebar-accent'\r\n          )}\r\n        >\r\n          <img\r\n            src={avatar || 'https://i.pravatar.cc/100'}\r\n            alt={name}\r\n            className=\"w-8 h-8 rounded-lg shrink-0 object-cover border border-sidebar-border\"\r\n          />\r\n          {!isCollapsed && (\r\n            <>\r\n              <div className=\"flex-1 text-left overflow-hidden grid\">\r\n                <span className=\"text-sm font-semibold truncate leading-tight\">{name}</span>\r\n                <span className=\"text-xs text-sidebar-foreground/50 truncate leading-tight\">{email}</span>\r\n              </div>\r\n              <ChevronsUpDown className=\"ml-auto h-4 w-4 shrink-0 text-sidebar-foreground/40\" />\r\n            </>\r\n          )}\r\n        </button>\r\n      }\r\n    />\r\n  );\r\n\r\n  return (\r\n    <BasePopover.Root open={open} onOpenChange={setOpen}>\r\n      {isCollapsed ? (\r\n        <Tooltip>\r\n          <TooltipTrigger render={trigger} />\r\n          <TooltipContent side=\"right\">{name}</TooltipContent>\r\n        </Tooltip>\r\n      ) : (\r\n        trigger\r\n      )}\r\n      <BasePopover.Portal>\r\n        <BasePopover.Positioner side=\"right\" align=\"end\" sideOffset={8}>\r\n          <BasePopover.Popup\r\n            className={cn(\r\n              'z-50 w-64 rounded-xl border border-border bg-popover shadow-xl outline-none p-1',\r\n              'motion-safe:data-open:animate-in motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95',\r\n              'motion-safe:data-closed:animate-out motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95'\r\n            )}\r\n          >\r\n            {/* User info header */}\r\n            <div className=\"flex items-center gap-3 p-3 pb-2 border-b border-border/50\">\r\n              <img\r\n                src={avatar || 'https://i.pravatar.cc/100'}\r\n                alt={name}\r\n                className=\"w-10 h-10 rounded-lg object-cover border border-border\"\r\n              />\r\n              <div className=\"flex-1 overflow-hidden\">\r\n                <p className=\"text-sm font-semibold truncate\">{name}</p>\r\n                <p className=\"text-xs text-muted-foreground truncate\">{email}</p>\r\n              </div>\r\n            </div>\r\n\r\n            {/* Menu items */}\r\n            <div className=\"py-1\">{children}</div>\r\n          </BasePopover.Popup>\r\n        </BasePopover.Positioner>\r\n      </BasePopover.Portal>\r\n    </BasePopover.Root>\r\n  );\r\n};\r\n\r\n// ─── UserMenuItem (item trong popover) ───────────────────────────────────────\r\n\r\ninterface UserMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  icon?: React.ReactNode;\r\n  destructive?: boolean;\r\n}\r\n\r\nexport const UserMenuItem: React.FC<UserMenuItemProps> = ({ icon, children, destructive, className, ...props }) => (\r\n  <button\r\n    type=\"button\"\r\n    className={cn(\r\n      'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm motion-safe:transition-colors',\r\n      'hover:bg-muted outline-none focus-visible:bg-muted',\r\n      destructive ? 'text-destructive hover:text-destructive' : 'text-foreground',\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {icon && <span className=\"shrink-0 h-4 w-4 flex items-center justify-center\">{icon}</span>}\r\n    {children}\r\n  </button>\r\n);\r\n"
         }
       ]
     },
@@ -822,7 +948,7 @@
       "files": [
         {
           "path": "src/components/ui/slider/Slider.tsx",
-          "content": "import * as React from 'react';\nimport { Slider as BaseSlider } from '@base-ui/react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst sliderVariants = tv({\n  slots: {\n    root: 'relative flex w-full touch-none select-none items-center py-4 data-disabled:opacity-50 data-disabled:cursor-not-allowed',\n    control: 'relative flex w-full items-center',\n    track: 'relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary data-disabled:bg-muted',\n    indicator: 'absolute h-full bg-primary data-disabled:bg-muted-foreground/30',\n    thumb: 'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 data-disabled:border-muted-foreground data-disabled:bg-muted data-disabled:pointer-events-none',\n  }\n});\n\nconst { root, control, track, indicator, thumb } = sliderVariants();\n\n/** Props for the Slider component */\nexport interface SliderProps extends React.ComponentPropsWithoutRef<typeof BaseSlider.Root> {\n    className?: string;\n    /** Hiển thị tooltip số khi kéo / hover thumb */\n    showTooltip?: boolean;\n}\n\nconst toArray = (v: unknown): number[] => {\n  if (Array.isArray(v)) return v as number[];\n  if (typeof v === 'number') return [v];\n  return [0];\n};\n\nconst Slider = React.forwardRef<React.ElementRef<typeof BaseSlider.Root>, SliderProps>(\n  ({ className, showTooltip, value: valueProp, defaultValue, onValueChange, ...props }, ref) => {\n    const isControlled = valueProp !== undefined;\n    const [internalValues, setInternalValues] = React.useState<number[]>(\n      () => toArray(isControlled ? valueProp : defaultValue)\n    );\n\n    // Sync khi prop value thay đổi từ bên ngoài (controlled)\n    React.useEffect(() => {\n      if (isControlled) setInternalValues(toArray(valueProp));\n    }, [isControlled, valueProp]);\n\n    const currentValues = isControlled ? toArray(valueProp) : internalValues;\n\n    const handleValueChange: NonNullable<SliderProps['onValueChange']> = (newValues, eventDetails) => {\n      if (!isControlled) setInternalValues(toArray(newValues));\n      onValueChange?.(newValues, eventDetails);\n    };\n\n    return (\n      <BaseSlider.Root\n        ref={ref}\n        className={root({ className })}\n        aria-label={props['aria-label'] ?? 'Slider'}\n        value={valueProp}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        <BaseSlider.Control className={control()}>\n          <BaseSlider.Track className={track()}>\n            <BaseSlider.Indicator className={indicator()} />\n          </BaseSlider.Track>\n\n          {currentValues.map((val, index) => (\n            <BaseSlider.Thumb\n              key={index}\n              className={cn(thumb(), showTooltip && 'relative group')}\n            >\n              {showTooltip && (\n                <span className=\"\n                  absolute -top-9 left-1/2 -translate-x-1/2\n                  min-w-[28px] text-center\n                  bg-primary text-primary-foreground\n                  text-xs font-medium leading-none\n                  px-1.5 py-1 rounded shadow-sm\n                  opacity-0 group-hover:opacity-100 group-data-[dragging]:opacity-100\n                  transition-opacity duration-150\n                  pointer-events-none select-none\n                \">\n                  {val}\n                </span>\n              )}\n            </BaseSlider.Thumb>\n          ))}\n        </BaseSlider.Control>\n      </BaseSlider.Root>\n    );\n  }\n);\nSlider.displayName = 'Slider';\n\nexport { Slider };\n"
+          "content": "import * as React from 'react';\r\nimport { Slider as BaseSlider } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst sliderVariants = tv({\r\n  slots: {\r\n    root: 'relative flex w-full touch-none select-none items-center py-4 data-disabled:opacity-50 data-disabled:cursor-not-allowed',\r\n    control: 'relative flex w-full items-center',\r\n    track: 'relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary data-disabled:bg-muted',\r\n    indicator: 'absolute h-full bg-primary data-disabled:bg-muted-foreground/30',\r\n    thumb: 'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 data-disabled:border-muted-foreground data-disabled:bg-muted data-disabled:pointer-events-none',\r\n  }\r\n});\r\n\r\nconst { root, control, track, indicator, thumb } = sliderVariants();\r\n\r\n/** Props for the Slider component */\r\nexport interface SliderProps extends React.ComponentPropsWithoutRef<typeof BaseSlider.Root> {\r\n    className?: string;\r\n    /** Hiển thị tooltip số khi kéo / hover thumb */\r\n    showTooltip?: boolean;\r\n}\r\n\r\nconst toArray = (v: unknown): number[] => {\r\n  if (Array.isArray(v)) return v as number[];\r\n  if (typeof v === 'number') return [v];\r\n  return [0];\r\n};\r\n\r\nconst Slider = React.forwardRef<React.ElementRef<typeof BaseSlider.Root>, SliderProps>(\r\n  ({ className, showTooltip, value: valueProp, defaultValue, onValueChange, ...props }, ref) => {\r\n    const isControlled = valueProp !== undefined;\r\n    const [internalValues, setInternalValues] = React.useState<number[]>(\r\n      () => toArray(isControlled ? valueProp : defaultValue)\r\n    );\r\n\r\n    // Sync khi prop value thay đổi từ bên ngoài (controlled)\r\n    React.useEffect(() => {\r\n      if (isControlled) setInternalValues(toArray(valueProp));\r\n    }, [isControlled, valueProp]);\r\n\r\n    const currentValues = isControlled ? toArray(valueProp) : internalValues;\r\n\r\n    const handleValueChange: NonNullable<SliderProps['onValueChange']> = (newValues, eventDetails) => {\r\n      if (!isControlled) setInternalValues(toArray(newValues));\r\n      onValueChange?.(newValues, eventDetails);\r\n    };\r\n\r\n    return (\r\n      <BaseSlider.Root\r\n        ref={ref}\r\n        className={root({ className })}\r\n        aria-label={props['aria-label'] ?? 'Slider'}\r\n        value={valueProp}\r\n        defaultValue={defaultValue}\r\n        onValueChange={handleValueChange}\r\n        {...props}\r\n      >\r\n        <BaseSlider.Control className={control()}>\r\n          <BaseSlider.Track className={track()}>\r\n            <BaseSlider.Indicator className={indicator()} />\r\n          </BaseSlider.Track>\r\n\r\n          {currentValues.map((val, index) => (\r\n            <BaseSlider.Thumb\r\n              key={index}\r\n              className={cn(thumb(), showTooltip && 'relative group')}\r\n            >\r\n              {showTooltip && (\r\n                <span className=\"\r\n                  absolute -top-9 left-1/2 -translate-x-1/2\r\n                  min-w-[28px] text-center\r\n                  bg-primary text-primary-foreground\r\n                  text-xs font-medium leading-none\r\n                  px-1.5 py-1 rounded shadow-sm\r\n                  opacity-0 group-hover:opacity-100 group-data-[dragging]:opacity-100\r\n                  transition-opacity duration-150\r\n                  pointer-events-none select-none\r\n                \">\r\n                  {val}\r\n                </span>\r\n              )}\r\n            </BaseSlider.Thumb>\r\n          ))}\r\n        </BaseSlider.Control>\r\n      </BaseSlider.Root>\r\n    );\r\n  }\r\n);\r\nSlider.displayName = 'Slider';\r\n\r\nexport { Slider };\r\n"
         }
       ]
     },
@@ -971,7 +1097,7 @@
       "files": [
         {
           "path": "src/components/ui/tooltip/Tooltip.tsx",
-          "content": "'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst tooltipVariants = tv({\n  slots: {\n    popup: 'z-50 overflow-hidden rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\n    arrow: 'fill-popover',\n  },\n});\n\nconst { popup, arrow } = tooltipVariants();\n\n// ─── Compound Components ─────────────────────────────────────────────────────\n\n/** Wrap multiple Tooltip instances in a shared provider for better performance */\nconst TooltipProvider = BaseTooltip.Provider;\n\nconst Tooltip = BaseTooltip.Root;\n\nconst TooltipTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof BaseTooltip.Trigger>\n>(({ children, render, ...props }, ref) => (\n  <BaseTooltip.Trigger\n    ref={ref}\n    render={render ?? (React.isValidElement(children) ? children : undefined)}\n    {...props}\n  >\n    {React.isValidElement(children) ? undefined : children}\n  </BaseTooltip.Trigger>\n));\nTooltipTrigger.displayName = 'TooltipTrigger';\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup> {\n  /** Side offset from the trigger (default: 4) */\n  sideOffset?: number;\n  /** Side to display the tooltip (default: 'top') */\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Alignment relative to the trigger (default: 'center') */\n  align?: 'start' | 'center' | 'end';\n  /** Show the arrow indicator */\n  showArrow?: boolean;\n}\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n  ({ className, sideOffset = 4, side = 'top', align = 'center', showArrow = true, children, ...props }, ref) => (\n    <BaseTooltip.Portal>\n      <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset}>\n        <BaseTooltip.Popup ref={ref} className={cn(popup(), className)} role=\"tooltip\" {...props}>\n          {showArrow && <BaseTooltip.Arrow className={arrow()} />}\n          {children}\n        </BaseTooltip.Popup>\n      </BaseTooltip.Positioner>\n    </BaseTooltip.Portal>\n  )\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipVariants };\n"
+          "content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport { Tooltip as BaseTooltip } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst tooltipVariants = tv({\r\n  slots: {\r\n    popup: 'z-50 overflow-hidden rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n    arrow: 'fill-popover',\r\n  },\r\n});\r\n\r\nconst { popup, arrow } = tooltipVariants();\r\n\r\n// ─── Compound Components ─────────────────────────────────────────────────────\r\n\r\n/** Wrap multiple Tooltip instances in a shared provider for better performance */\r\nconst TooltipProvider = BaseTooltip.Provider;\r\n\r\nconst Tooltip = BaseTooltip.Root;\r\n\r\nconst TooltipTrigger = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentPropsWithoutRef<typeof BaseTooltip.Trigger>\r\n>(({ children, render, ...props }, ref) => (\r\n  <BaseTooltip.Trigger\r\n    ref={ref}\r\n    render={render ?? (React.isValidElement(children) ? children : undefined)}\r\n    {...props}\r\n  >\r\n    {React.isValidElement(children) ? undefined : children}\r\n  </BaseTooltip.Trigger>\r\n));\r\nTooltipTrigger.displayName = 'TooltipTrigger';\r\n\r\nexport interface TooltipContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup> {\r\n  /** Side offset from the trigger (default: 4) */\r\n  sideOffset?: number;\r\n  /** Side to display the tooltip (default: 'top') */\r\n  side?: 'top' | 'right' | 'bottom' | 'left';\r\n  /** Alignment relative to the trigger (default: 'center') */\r\n  align?: 'start' | 'center' | 'end';\r\n  /** Show the arrow indicator */\r\n  showArrow?: boolean;\r\n}\r\n\r\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\r\n  ({ className, sideOffset = 4, side = 'top', align = 'center', showArrow = true, children, ...props }, ref) => (\r\n    <BaseTooltip.Portal>\r\n      <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset}>\r\n        <BaseTooltip.Popup ref={ref} className={cn(popup(), className)} role=\"tooltip\" {...props}>\r\n          {showArrow && <BaseTooltip.Arrow className={arrow()} />}\r\n          {children}\r\n        </BaseTooltip.Popup>\r\n      </BaseTooltip.Positioner>\r\n    </BaseTooltip.Portal>\r\n  )\r\n);\r\nTooltipContent.displayName = 'TooltipContent';\r\n\r\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipVariants };\r\n"
         }
       ]
     },
@@ -1001,6 +1127,10 @@
         {
           "path": "src/components/ui/typography/Typography.tsx",
           "content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Copy, Check, ExternalLink } from 'lucide-react';\r\nimport { useCopy } from '@/hooks/useCopy';\r\n\r\n// ─── Shared text style variants ───────────────────────────────────────────────\r\n\r\nconst textVariants = tv({\r\n  base: '',\r\n  variants: {\r\n    size: {\r\n      xs:   'text-xs',\r\n      sm:   'text-sm',\r\n      md:   'text-base',\r\n      lg:   'text-lg',\r\n      xl:   'text-xl',\r\n      '2xl': 'text-2xl',\r\n      '3xl': 'text-3xl',\r\n    },\r\n    weight: {\r\n      thin:      'font-thin',\r\n      light:     'font-light',\r\n      normal:    'font-normal',\r\n      medium:    'font-medium',\r\n      semibold:  'font-semibold',\r\n      bold:      'font-bold',\r\n      extrabold: 'font-extrabold',\r\n    },\r\n    color: {\r\n      default: 'text-foreground',\r\n      muted:   'text-muted-foreground',\r\n      primary: 'text-primary',\r\n      success: 'text-success',\r\n      warning: 'text-warning',\r\n      danger:  'text-danger',\r\n      inherit: 'text-inherit',\r\n    },\r\n    align: {\r\n      left:    'text-left',\r\n      center:  'text-center',\r\n      right:   'text-right',\r\n      justify: 'text-justify',\r\n    },\r\n    leading: {\r\n      none:    'leading-none',\r\n      tight:   'leading-tight',\r\n      normal:  'leading-normal',\r\n      relaxed: 'leading-relaxed',\r\n      loose:   'leading-loose',\r\n    },\r\n    tracking: {\r\n      tighter: 'tracking-tighter',\r\n      tight:   'tracking-tight',\r\n      normal:  'tracking-normal',\r\n      wide:    'tracking-wide',\r\n      widest:  'tracking-widest',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    color: 'default',\r\n  },\r\n});\r\n\r\n// ─── Text ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface TextProps\r\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\r\n    VariantProps<typeof textVariants> {\r\n  /** HTML tag to render — default `span` */\r\n  as?: React.ElementType;\r\n  /** Bold */\r\n  strong?: boolean;\r\n  /** Italic */\r\n  italic?: boolean;\r\n  /** Underline */\r\n  underline?: boolean;\r\n  /** Strikethrough */\r\n  strikethrough?: boolean;\r\n  /** Gradient text (primary → indigo) */\r\n  gradient?: boolean;\r\n  /** Highlighted mark background */\r\n  mark?: boolean;\r\n  /** Single-line truncate with ellipsis */\r\n  truncate?: boolean;\r\n  /** Multi-line clamp (number of lines) */\r\n  lines?: 1 | 2 | 3 | 4 | 5;\r\n  /** Tabular numbers — fixed-width digits */\r\n  numeric?: boolean;\r\n  /** Inline code styling */\r\n  code?: boolean;\r\n  /** Show copy icon on hover, copies text content on click */\r\n  copyable?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst LINES_MAP: Record<number, string> = {\r\n  1: 'line-clamp-1',\r\n  2: 'line-clamp-2',\r\n  3: 'line-clamp-3',\r\n  4: 'line-clamp-4',\r\n  5: 'line-clamp-5',\r\n};\r\n\r\nconst Text = React.forwardRef<HTMLElement, TextProps>(\r\n  (\r\n    {\r\n      as: Tag = 'span',\r\n      size,\r\n      weight,\r\n      color,\r\n      align,\r\n      leading,\r\n      tracking,\r\n      strong,\r\n      italic,\r\n      underline,\r\n      strikethrough,\r\n      gradient,\r\n      mark,\r\n      truncate,\r\n      lines,\r\n      numeric,\r\n      code,\r\n      copyable,\r\n      className,\r\n      children,\r\n      onClick,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const { copied, copy } = useCopy();\r\n    const elRef = React.useRef<HTMLElement>(null);\r\n    const mergedRef = (node: HTMLElement | null) => {\r\n      (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\r\n      if (typeof ref === 'function') ref(node);\r\n      else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\r\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent<HTMLElement>) => {\r\n      if (copyable && elRef.current) {\r\n        copy(elRef.current.innerText);\r\n      }\r\n      onClick?.(e);\r\n    };\r\n\r\n    return (\r\n      <Tag\r\n        ref={mergedRef}\r\n        className={cn(\r\n          textVariants({ size, weight, color, align, leading, tracking }),\r\n          strong       && 'font-bold',\r\n          italic       && 'italic',\r\n          underline    && 'underline underline-offset-2',\r\n          strikethrough && 'line-through',\r\n          gradient     && 'bg-gradient-to-r from-primary to-indigo-500 bg-clip-text text-transparent',\r\n          mark         && 'bg-warning/20 text-warning-foreground rounded px-0.5',\r\n          truncate     && 'block max-w-full truncate',\r\n          lines        && cn('block', LINES_MAP[lines]),\r\n          numeric      && 'tabular-nums',\r\n          code         && 'font-mono text-[0.9em] bg-muted rounded px-1 py-0.5 border border-border/50',\r\n          copyable     && 'cursor-pointer group/copy inline-flex items-center gap-1.5',\r\n          className,\r\n        )}\r\n        onClick={handleClick}\r\n        {...props}\r\n      >\r\n        {children}\r\n        {copyable && (\r\n          <span className=\"opacity-0 group-hover/copy:opacity-60 transition-opacity shrink-0\">\r\n            {copied\r\n              ? <Check className=\"w-3.5 h-3.5 text-success\" />\r\n              : <Copy className=\"w-3.5 h-3.5\" />\r\n            }\r\n          </span>\r\n        )}\r\n      </Tag>\r\n    );\r\n  }\r\n);\r\nText.displayName = 'Text';\r\n\r\n// ─── Heading ──────────────────────────────────────────────────────────────────\r\n\r\nconst HEADING_SIZE: Record<1 | 2 | 3 | 4 | 5 | 6, string> = {\r\n  1: 'text-4xl font-extrabold tracking-tight',\r\n  2: 'text-3xl font-bold tracking-tight',\r\n  3: 'text-2xl font-semibold tracking-tight',\r\n  4: 'text-xl font-semibold',\r\n  5: 'text-lg font-medium',\r\n  6: 'text-base font-medium',\r\n};\r\n\r\nexport interface HeadingProps\r\n  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,\r\n    VariantProps<typeof textVariants> {\r\n  /** Heading level 1–6, also sets default size (default: 2) */\r\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\r\n  /** Show copy icon on hover */\r\n  copyable?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\r\n  ({ level = 2, size, weight, color = 'default', align, className, copyable, children, ...props }, ref) => {\r\n    const Tag = `h${level}` as React.ElementType;\r\n    const { copied, copy } = useCopy();\r\n    const elRef = React.useRef<HTMLHeadingElement>(null);\r\n    const mergedRef = (node: HTMLHeadingElement | null) => {\r\n      (elRef as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\r\n      if (typeof ref === 'function') ref(node);\r\n      else if (ref) (ref as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\r\n    };\r\n\r\n    return (\r\n      <Tag\r\n        ref={mergedRef}\r\n        className={cn(\r\n          HEADING_SIZE[level],\r\n          textVariants({ size, weight, color, align }),\r\n          copyable && 'cursor-pointer group/copy inline-flex items-center gap-2',\r\n          className,\r\n        )}\r\n        onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\r\n        {...props}\r\n      >\r\n        {children}\r\n        {copyable && (\r\n          <span className=\"opacity-0 group-hover/copy:opacity-50 transition-opacity shrink-0\">\r\n            {copied\r\n              ? <Check className=\"w-4 h-4 text-success\" />\r\n              : <Copy className=\"w-4 h-4\" />\r\n            }\r\n          </span>\r\n        )}\r\n      </Tag>\r\n    );\r\n  }\r\n);\r\nHeading.displayName = 'Heading';\r\n\r\n// ─── Paragraph ────────────────────────────────────────────────────────────────\r\n\r\nexport interface ParagraphProps\r\n  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>,\r\n    VariantProps<typeof textVariants> {\r\n  /** Larger intro-text styling */\r\n  lead?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(\r\n  ({ lead, size, weight, color = 'default', align, leading = 'relaxed', className, children, ...props }, ref) => (\r\n    <p\r\n      ref={ref}\r\n      className={cn(\r\n        textVariants({ size, weight, color, align, leading }),\r\n        lead && 'text-xl text-muted-foreground',\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </p>\r\n  )\r\n);\r\nParagraph.displayName = 'Paragraph';\r\n\r\n// ─── Lead ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Lead = React.forwardRef<HTMLParagraphElement, LeadProps>(\r\n  ({ className, children, ...props }, ref) => (\r\n    <p\r\n      ref={ref}\r\n      className={cn('text-xl text-muted-foreground leading-relaxed', className)}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </p>\r\n  )\r\n);\r\nLead.displayName = 'Lead';\r\n\r\n// ─── Blockquote ───────────────────────────────────────────────────────────────\r\n\r\nexport interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {\r\n  /** Citation source text shown below the quote */\r\n  cite?: string;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(\r\n  ({ cite, className, children, ...props }, ref) => (\r\n    <figure className=\"my-1\">\r\n      <blockquote\r\n        ref={ref}\r\n        className={cn(\r\n          'border-l-4 border-primary pl-4 py-1 italic text-muted-foreground leading-relaxed',\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </blockquote>\r\n      {cite && (\r\n        <figcaption className=\"mt-2 pl-4 text-sm text-muted-foreground/70 not-italic\">\r\n          — {cite}\r\n        </figcaption>\r\n      )}\r\n    </figure>\r\n  )\r\n);\r\nBlockquote.displayName = 'Blockquote';\r\n\r\n// ─── Code (inline) ────────────────────────────────────────────────────────────\r\n\r\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\r\n  /** Copy content on click */\r\n  copyable?: boolean;\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Code = React.forwardRef<HTMLElement, CodeProps>(\r\n  ({ copyable, className, children, ...props }, ref) => {\r\n    const { copied, copy } = useCopy();\r\n    const elRef = React.useRef<HTMLElement>(null);\r\n    const mergedRef = (node: HTMLElement | null) => {\r\n      (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\r\n      if (typeof ref === 'function') ref(node);\r\n      else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\r\n    };\r\n\r\n    return (\r\n      <code\r\n        ref={mergedRef}\r\n        onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\r\n        className={cn(\r\n          'font-mono text-[0.875em] bg-muted text-foreground rounded px-1.5 py-0.5 border border-border/50',\r\n          copyable && 'cursor-pointer hover:bg-muted/70 transition-colors group/code inline-flex items-center gap-1',\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n        {copyable && (\r\n          <span className=\"opacity-0 group-hover/code:opacity-60 transition-opacity\">\r\n            {copied\r\n              ? <Check className=\"w-3 h-3 text-success inline\" />\r\n              : <Copy className=\"w-3 h-3 inline\" />\r\n            }\r\n          </span>\r\n        )}\r\n      </code>\r\n    );\r\n  }\r\n);\r\nCode.displayName = 'Code';\r\n\r\n// ─── Kbd ──────────────────────────────────────────────────────────────────────\r\n\r\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\r\n  /** Array of keys to display; joined with `+` separator */\r\n  keys?: string[];\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst KbdKey = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { className?: string }>(\r\n  ({ className, children, ...props }, ref) => (\r\n    <kbd\r\n      ref={ref as React.Ref<HTMLElement>}\r\n      className={cn(\r\n        'inline-flex items-center justify-center h-6 min-w-[1.5rem] px-1.5',\r\n        'font-mono text-xs font-medium',\r\n        'bg-background border border-border rounded shadow-[0_2px_0_0_hsl(var(--border))]',\r\n        'text-muted-foreground',\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </kbd>\r\n  )\r\n);\r\nKbdKey.displayName = 'KbdKey';\r\n\r\nconst Kbd = React.forwardRef<HTMLSpanElement, KbdProps>(\r\n  ({ keys, className, children, ...props }, ref) => {\r\n    const items = keys ?? (children ? [children] : []);\r\n\r\n    return (\r\n      <span ref={ref} className={cn('inline-flex items-center gap-0.5', className)} {...props}>\r\n        {items.map((key, i) => (\r\n          <React.Fragment key={i}>\r\n            {i > 0 && <span className=\"text-[10px] text-muted-foreground/60 px-0.5\">+</span>}\r\n            <KbdKey>{key}</KbdKey>\r\n          </React.Fragment>\r\n        ))}\r\n      </span>\r\n    );\r\n  }\r\n);\r\nKbd.displayName = 'Kbd';\r\n\r\n// ─── Link ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n  /** Open in new tab with rel=\"noopener noreferrer\" */\r\n  external?: boolean;\r\n  /** Underline behaviour — default `hover` */\r\n  underline?: 'always' | 'hover' | 'none';\r\n  /** Color variant */\r\n  color?: 'primary' | 'muted' | 'danger' | 'foreground';\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\r\n  ({ external, underline = 'hover', color = 'primary', className, children, ...props }, ref) => (\r\n    <a\r\n      ref={ref}\r\n      target={external ? '_blank' : props.target}\r\n      rel={external ? 'noopener noreferrer' : props.rel}\r\n      className={cn(\r\n        'inline-flex items-center gap-0.5 transition-colors',\r\n        color === 'primary'    && 'text-primary',\r\n        color === 'muted'      && 'text-muted-foreground',\r\n        color === 'danger'     && 'text-danger',\r\n        color === 'foreground' && 'text-foreground',\r\n        underline === 'always' && 'underline underline-offset-2',\r\n        underline === 'hover'  && 'hover:underline underline-offset-2',\r\n        underline === 'none'   && 'no-underline',\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      {external && <ExternalLink className=\"w-3 h-3 shrink-0 opacity-70\" />}\r\n    </a>\r\n  )\r\n);\r\nLink.displayName = 'Link';\r\n\r\n// ─── Mark ─────────────────────────────────────────────────────────────────────\r\n\r\nconst markVariants = tv({\r\n  base: 'rounded px-0.5 py-px font-medium',\r\n  variants: {\r\n    variant: {\r\n      default: 'bg-warning/25 text-warning-foreground',\r\n      primary: 'bg-primary/15 text-primary',\r\n      success: 'bg-success/15 text-success',\r\n      warning: 'bg-warning/25 text-warning-foreground',\r\n      danger:  'bg-danger/15 text-danger',\r\n    },\r\n  },\r\n  defaultVariants: { variant: 'default' },\r\n});\r\n\r\nexport interface MarkProps\r\n  extends React.HTMLAttributes<HTMLElement>,\r\n    VariantProps<typeof markVariants> {\r\n  className?: string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst Mark = React.forwardRef<HTMLElement, MarkProps>(\r\n  ({ variant, className, children, ...props }, ref) => (\r\n    <mark\r\n      ref={ref as React.Ref<HTMLElement>}\r\n      className={markVariants({ variant, className })}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </mark>\r\n  )\r\n);\r\nMark.displayName = 'Mark';\r\n\r\n// ─── Exports ──────────────────────────────────────────────────────────────────\r\n\r\nexport {\r\n  Text,\r\n  Heading,\r\n  Paragraph,\r\n  Lead,\r\n  Blockquote,\r\n  Code,\r\n  Kbd,\r\n  KbdKey,\r\n  Link,\r\n  Mark,\r\n  textVariants,\r\n  markVariants,\r\n};\r\n"
+        },
+        {
+          "path": "src/hooks/useCopy.ts",
+          "content": "import { useState, useCallback } from 'react';\r\n\r\nexport function useCopy(timeout = 2000) {\r\n  const [copied, setCopied] = useState(false);\r\n\r\n  const copy = useCallback(\r\n    async (text: string) => {\r\n      try {\r\n        await navigator.clipboard.writeText(text);\r\n        setCopied(true);\r\n        setTimeout(() => setCopied(false), timeout);\r\n      } catch {\r\n        /* noop */\r\n      }\r\n    },\r\n    [timeout],\r\n  );\r\n\r\n  return { copied, copy };\r\n}\r\n"
         }
       ]
     }