@moontra/moonui-pro 2.4.6 → 2.5.1

package/dist/index.mjs

@@ -3,10 +3,11 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useContext, useMemo, useEffect, useDebugValue, Component, useLayoutEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Activity, Star, Upload, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, BarChart3, Users, DollarSign, Github, GitFork, Server, EyeOff, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, Video, Music, Archive, File, Columns, XCircle, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Monitor, Timer, Cpu, MemoryStick, HardDrive, Network, CheckCircle, BarChart3, Video, Music, Archive, File, Columns, Sun, Moon, XCircle, Grip, Unlock, Minimize2, Map as Map$1, Target, Pin, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { DayPicker } from 'react-day-picker';
 import { motion, AnimatePresence, useMotionValue, useSpring, useTransform, animate } from 'framer-motion';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import ReactDOM3 from 'react-dom';
@@ -16,6 +17,7 @@ import { createDialogScope } from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -25,6 +27,9 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';
 import { ResponsiveContainer, LineChart, Line, RadialBarChart, Tooltip, Legend, RadialBar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ScatterChart, CartesianGrid, XAxis, YAxis, Scatter, PieChart, Pie, Cell, AreaChart, Area, ReferenceLine, Brush, BarChart, Bar, ReferenceArea } from 'recharts';
+import { startOfDay, endOfDay, subDays, startOfWeek, endOfWeek, startOfMonth, endOfMonth, format, formatDistanceToNow } from 'date-fns';
+import { WidthProvider, Responsive } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { useForm } from 'react-hook-form';
 import { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
@@ -1746,7 +1751,7 @@ function styleInject(css2, { insertAt } = {}) {
 }
 
 // src/styles/index.css
-styleInject(':root {\n  --primary-50: 240 249 255;\n  --primary-100: 224 242 254;\n  --primary-200: 186 230 253;\n  --primary-300: 125 211 252;\n  --primary-400: 56 189 248;\n  --primary-500: 14 165 233;\n  --primary-600: 2 132 199;\n  --primary-700: 3 105 161;\n  --primary-800: 7 89 133;\n  --primary-900: 12 74 110;\n  --primary-950: 8 47 73;\n  --secondary-50: 248 250 252;\n  --secondary-100: 241 245 249;\n  --secondary-200: 226 232 240;\n  --secondary-300: 203 213 225;\n  --secondary-400: 148 163 184;\n  --secondary-500: 100 116 139;\n  --secondary-600: 71 85 105;\n  --secondary-700: 51 65 85;\n  --secondary-800: 30 41 59;\n  --secondary-900: 15 23 42;\n  --secondary-950: 2 6 23;\n  --success-50: 240 253 244;\n  --success-100: 220 252 231;\n  --success-200: 187 247 208;\n  --success-300: 134 239 172;\n  --success-400: 74 222 128;\n  --success-500: 34 197 94;\n  --success-600: 22 163 74;\n  --success-700: 21 128 61;\n  --success-800: 22 101 52;\n  --success-900: 20 83 45;\n  --success-950: 5 46 22;\n  --warning-50: 254 252 232;\n  --warning-100: 254 249 195;\n  --warning-200: 254 240 138;\n  --warning-300: 253 224 71;\n  --warning-400: 250 204 21;\n  --warning-500: 234 179 8;\n  --warning-600: 202 138 4;\n  --warning-700: 161 98 7;\n  --warning-800: 133 77 14;\n  --warning-900: 113 63 18;\n  --warning-950: 66 32 6;\n  --error-50: 254 242 242;\n  --error-100: 254 226 226;\n  --error-200: 254 202 202;\n  --error-300: 252 165 165;\n  --error-400: 248 113 113;\n  --error-500: 239 68 68;\n  --error-600: 220 38 38;\n  --error-700: 185 28 28;\n  --error-800: 153 27 27;\n  --error-900: 127 29 29;\n  --error-950: 69 10 10;\n  --background: 0 0% 100%;\n  --foreground: 222.2 47.4% 11.2%;\n  --card: 0 0% 100%;\n  --card-foreground: 222.2 47.4% 11.2%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222.2 47.4% 11.2%;\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  --secondary: 210 40% 96%;\n  --secondary-foreground: 222.2 47.4% 11.2%;\n  --muted: 210 40% 96%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n  --accent: 210 40% 96%;\n  --accent-foreground: 222.2 47.4% 11.2%;\n  --destructive: 0 100% 50%;\n  --destructive-foreground: 210 40% 98%;\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 215 20.2% 65.1%;\n  --chart-1: 12 76% 61%;\n  --chart-2: 173 58% 39%;\n  --chart-3: 197 37% 24%;\n  --chart-4: 43 74% 66%;\n  --chart-5: 27 87% 67%;\n  --font-sans:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  --font-serif:\n    "Crimson Text",\n    Georgia,\n    "Times New Roman",\n    serif;\n  --font-mono:\n    "JetBrains Mono",\n    "Fira Code",\n    "Consolas",\n    monospace;\n  --text-xs: 0.75rem;\n  --text-sm: 0.875rem;\n  --text-base: 1rem;\n  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;\n  --text-2xl: 1.5rem;\n  --text-3xl: 1.875rem;\n  --text-4xl: 2.25rem;\n  --text-5xl: 3rem;\n  --text-6xl: 3.75rem;\n  --text-7xl: 4.5rem;\n  --text-8xl: 6rem;\n  --text-9xl: 8rem;\n  --leading-none: 1;\n  --leading-tight: 1.25;\n  --leading-snug: 1.375;\n  --leading-normal: 1.5;\n  --leading-relaxed: 1.625;\n  --leading-loose: 2;\n  --font-thin: 100;\n  --font-extralight: 200;\n  --font-light: 300;\n  --font-normal: 400;\n  --font-medium: 500;\n  --font-semibold: 600;\n  --font-bold: 700;\n  --font-extrabold: 800;\n  --font-black: 900;\n  --spacing-0: 0;\n  --spacing-px: 1px;\n  --spacing-0-5: 0.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-1-5: 0.375rem;\n  --spacing-2: 0.5rem;\n  --spacing-2-5: 0.625rem;\n  --spacing-3: 0.75rem;\n  --spacing-3-5: 0.875rem;\n  --spacing-4: 1rem;\n  --spacing-5: 1.25rem;\n  --spacing-6: 1.5rem;\n  --spacing-7: 1.75rem;\n  --spacing-8: 2rem;\n  --spacing-9: 2.25rem;\n  --spacing-10: 2.5rem;\n  --spacing-11: 2.75rem;\n  --spacing-12: 3rem;\n  --spacing-14: 3.5rem;\n  --spacing-16: 4rem;\n  --spacing-20: 5rem;\n  --spacing-24: 6rem;\n  --spacing-28: 7rem;\n  --spacing-32: 8rem;\n  --spacing-36: 9rem;\n  --spacing-40: 10rem;\n  --spacing-44: 11rem;\n  --spacing-48: 12rem;\n  --spacing-52: 13rem;\n  --spacing-56: 14rem;\n  --spacing-60: 15rem;\n  --spacing-64: 16rem;\n  --spacing-72: 18rem;\n  --spacing-80: 20rem;\n  --spacing-96: 24rem;\n  --radius-none: 0;\n  --radius-sm: 0.125rem;\n  --radius-base: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n  --radius-2xl: 1rem;\n  --radius-3xl: 1.5rem;\n  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n  --shadow-none: 0 0 #0000;\n  --elevation-0: var(--shadow-none);\n  --elevation-1: var(--shadow-sm);\n  --elevation-2: var(--shadow-base);\n  --elevation-3: var(--shadow-md);\n  --elevation-4: var(--shadow-lg);\n  --elevation-5: var(--shadow-xl);\n  --elevation-6: var(--shadow-2xl);\n  --duration-75: 75ms;\n  --duration-100: 100ms;\n  --duration-150: 150ms;\n  --duration-200: 200ms;\n  --duration-300: 300ms;\n  --duration-500: 500ms;\n  --duration-700: 700ms;\n  --duration-1000: 1000ms;\n  --ease-linear: linear;\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --animate-fade-in: fadeIn var(--duration-300) var(--ease-out);\n  --animate-fade-out: fadeOut var(--duration-300) var(--ease-in);\n  --animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);\n  --animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);\n  --animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);\n  --animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);\n  --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);\n  --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);\n  --animate-bounce: bounce var(--duration-500) var(--ease-bounce);\n  --animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;\n  --animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;\n  --breakpoint-sm: 640px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 1024px;\n  --breakpoint-xl: 1280px;\n  --breakpoint-2xl: 1536px;\n  --container-sm: 640px;\n  --container-md: 768px;\n  --container-lg: 1024px;\n  --container-xl: 1280px;\n  --container-2xl: 1536px;\n  --z-0: 0;\n  --z-10: 10;\n  --z-20: 20;\n  --z-30: 30;\n  --z-40: 40;\n  --z-50: 50;\n  --z-auto: auto;\n  --z-dropdown: 1000;\n  --z-sticky: 1020;\n  --z-fixed: 1030;\n  --z-modal-backdrop: 1040;\n  --z-modal: 1050;\n  --z-popover: 1060;\n  --z-tooltip: 1070;\n  --z-toast: 1080;\n  --button-height-sm: 2rem;\n  --button-height-md: 2.5rem;\n  --button-height-lg: 3rem;\n  --button-height-xl: 3.5rem;\n  --button-padding-sm: 0.5rem 0.75rem;\n  --button-padding-md: 0.625rem 1rem;\n  --button-padding-lg: 0.75rem 1.25rem;\n  --button-padding-xl: 1rem 1.5rem;\n  --button-font-size-sm: var(--text-sm);\n  --button-font-size-md: var(--text-base);\n  --button-font-size-lg: var(--text-lg);\n  --button-font-size-xl: var(--text-xl);\n  --input-height-sm: 2rem;\n  --input-height-md: 2.5rem;\n  --input-height-lg: 3rem;\n  --input-height-xl: 3.5rem;\n  --input-padding-sm: 0.5rem 0.75rem;\n  --input-padding-md: 0.625rem 1rem;\n  --input-padding-lg: 0.75rem 1.25rem;\n  --input-padding-xl: 1rem 1.5rem;\n  --input-border-width: 1px;\n  --input-border-radius: var(--radius-md);\n  --input-focus-ring-width: 2px;\n  --input-focus-ring-offset: 2px;\n  --card-padding-sm: 1rem;\n  --card-padding-md: 1.5rem;\n  --card-padding-lg: 2rem;\n  --card-padding-xl: 2.5rem;\n  --card-border-radius: var(--radius-lg);\n  --card-border-width: 1px;\n  --card-shadow: var(--elevation-1);\n  --card-hover-shadow: var(--elevation-2);\n}\n.dark {\n  --background: 224 71% 4%;\n  --foreground: 213 31% 91%;\n  --card: 224 71% 4%;\n  --card-foreground: 213 31% 91%;\n  --popover: 224 71% 4%;\n  --popover-foreground: 213 31% 91%;\n  --primary: 210 40% 98%;\n  --primary-foreground: 222.2 47.4% 1.2%;\n  --secondary: 222.2 84% 4.9%;\n  --secondary-foreground: 210 40% 98%;\n  --muted: 223 47% 11%;\n  --muted-foreground: 215.4 16.3% 56.9%;\n  --accent: 216 34% 17%;\n  --accent-foreground: 210 40% 98%;\n  --destructive: 0 63% 31%;\n  --destructive-foreground: 210 40% 98%;\n  --border: 216 34% 17%;\n  --input: 216 34% 17%;\n  --ring: 216 34% 17%;\n  --chart-1: 220 70% 50%;\n  --chart-2: 160 60% 45%;\n  --chart-3: 30 80% 55%;\n  --chart-4: 280 65% 60%;\n  --chart-5: 340 75% 55%;\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes slideInUp {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideInDown {\n  from {\n    transform: translateY(-100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes scaleOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n@keyframes bounce {\n  0%, 20%, 53%, 80%, 100% {\n    transform: translate3d(0, 0, 0);\n  }\n  40%, 43% {\n    transform: translate3d(0, -30px, 0);\n  }\n  70% {\n    transform: translate3d(0, -15px, 0);\n  }\n  90% {\n    transform: translate3d(0, -4px, 0);\n  }\n}\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-fade-in {\n  animation: var(--animate-fade-in);\n}\n.animate-fade-out {\n  animation: var(--animate-fade-out);\n}\n.animate-slide-in-up {\n  animation: var(--animate-slide-in-up);\n}\n.animate-slide-in-down {\n  animation: var(--animate-slide-in-down);\n}\n.animate-slide-in-left {\n  animation: var(--animate-slide-in-left);\n}\n.animate-slide-in-right {\n  animation: var(--animate-slide-in-right);\n}\n.animate-scale-in {\n  animation: var(--animate-scale-in);\n}\n.animate-scale-out {\n  animation: var(--animate-scale-out);\n}\n.animate-bounce {\n  animation: var(--animate-bounce);\n}\n.animate-pulse {\n  animation: var(--animate-pulse);\n}\n.animate-spin {\n  animation: var(--animate-spin);\n}\n@media (max-width: 639px) {\n  .container {\n    max-width: 100%;\n  }\n}\n@media (min-width: 640px) {\n  .container {\n    max-width: var(--container-sm);\n  }\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: var(--container-md);\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: var(--container-lg);\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: var(--container-xl);\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: var(--container-2xl);\n  }\n}\n:root {\n  --bg-base: var(--background);\n  --bg-subtle: var(--gray-50);\n  --bg-muted: var(--gray-100);\n  --bg-emphasis: var(--gray-200);\n  --bg-inverse: var(--foreground);\n  --surface-base: var(--background);\n  --surface-overlay: var(--gray-50);\n  --surface-raised: var(--background);\n  --surface-sunken: var(--gray-100);\n  --text-primary: var(--foreground);\n  --text-secondary: var(--gray-600);\n  --text-tertiary: var(--gray-500);\n  --text-disabled: var(--gray-400);\n  --text-inverse: var(--background);\n  --text-link: var(--primary);\n  --text-link-hover: var(--primary-hover);\n  --brand-primary: var(--primary);\n  --brand-primary-hover: var(--primary-hover);\n  --brand-primary-active: var(--primary-active);\n  --brand-secondary: var(--secondary);\n  --state-hover: var(--gray-100);\n  --state-active: var(--gray-200);\n  --state-selected: var(--primary);\n  --state-disabled: var(--gray-300);\n  --state-focus: var(--primary);\n  --feedback-success: var(--success);\n  --feedback-success-light: 142 71% 95%;\n  --feedback-success-dark: 142 71% 35%;\n  --feedback-warning: var(--warning);\n  --feedback-warning-light: 38 92% 95%;\n  --feedback-warning-dark: 38 92% 40%;\n  --feedback-error: var(--error);\n  --feedback-error-light: 0 84% 95%;\n  --feedback-error-dark: 0 84% 50%;\n  --feedback-info: 217 91% 60%;\n  --feedback-info-light: 217 91% 95%;\n  --feedback-info-dark: 217 91% 50%;\n  --border-default: var(--border);\n  --border-subtle: var(--gray-200);\n  --border-strong: var(--gray-400);\n  --border-interactive: var(--primary);\n  --border-error: var(--error);\n  --border-success: var(--success);\n  --border-warning: var(--warning);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-primary: 0 4px 14px 0 hsl(var(--primary) / 0.3);\n  --shadow-success: 0 4px 14px 0 hsl(var(--success) / 0.3);\n  --shadow-error: 0 4px 14px 0 hsl(var(--error) / 0.3);\n  --shadow-warning: 0 4px 14px 0 hsl(var(--warning) / 0.3);\n  --shadow-inner-xs: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n  --shadow-inner-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  --ease-linear: linear;\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);\n  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --duration-instant: 0ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 350ms;\n  --duration-slower: 500ms;\n  --duration-slowest: 750ms;\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0\\.5: 0.125rem;\n  --space-1: 0.25rem;\n  --space-1\\.5: 0.375rem;\n  --space-2: 0.5rem;\n  --space-2\\.5: 0.625rem;\n  --space-3: 0.75rem;\n  --space-3\\.5: 0.875rem;\n  --space-4: 1rem;\n  --space-5: 1.25rem;\n  --space-6: 1.5rem;\n  --space-7: 1.75rem;\n  --space-8: 2rem;\n  --space-9: 2.25rem;\n  --space-10: 2.5rem;\n  --space-11: 2.75rem;\n  --space-12: 3rem;\n  --space-14: 3.5rem;\n  --space-16: 4rem;\n  --space-20: 5rem;\n  --space-24: 6rem;\n  --space-28: 7rem;\n  --space-32: 8rem;\n  --space-36: 9rem;\n  --space-40: 10rem;\n  --space-44: 11rem;\n  --space-48: 12rem;\n  --space-52: 13rem;\n  --space-56: 14rem;\n  --space-60: 15rem;\n  --space-64: 16rem;\n  --space-72: 18rem;\n  --space-80: 20rem;\n  --space-96: 24rem;\n  --text-2xs: 0.625rem;\n  --text-xs: 0.75rem;\n  --text-sm: 0.875rem;\n  --text-base: 1rem;\n  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;\n  --text-2xl: 1.5rem;\n  --text-3xl: 1.875rem;\n  --text-4xl: 2.25rem;\n  --text-5xl: 3rem;\n  --text-6xl: 3.75rem;\n  --text-7xl: 4.5rem;\n  --text-8xl: 6rem;\n  --text-9xl: 8rem;\n  --leading-none: 1;\n  --leading-tight: 1.25;\n  --leading-snug: 1.375;\n  --leading-normal: 1.5;\n  --leading-relaxed: 1.625;\n  --leading-loose: 2;\n  --tracking-tighter: -0.05em;\n  --tracking-tight: -0.025em;\n  --tracking-normal: 0;\n  --tracking-wide: 0.025em;\n  --tracking-wider: 0.05em;\n  --tracking-widest: 0.1em;\n  --font-thin: 100;\n  --font-extralight: 200;\n  --font-light: 300;\n  --font-normal: 400;\n  --font-medium: 500;\n  --font-semibold: 600;\n  --font-bold: 700;\n  --font-extrabold: 800;\n  --font-black: 900;\n  --radius-none: 0;\n  --radius-sm: 0.125rem;\n  --radius-base: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n  --radius-2xl: 1rem;\n  --radius-3xl: 1.5rem;\n  --radius-full: 9999px;\n  --z-0: 0;\n  --z-10: 10;\n  --z-20: 20;\n  --z-30: 30;\n  --z-40: 40;\n  --z-50: 50;\n  --z-dropdown: 1000;\n  --z-sticky: 1020;\n  --z-fixed: 1030;\n  --z-modal-backdrop: 1040;\n  --z-modal: 1050;\n  --z-popover: 1060;\n  --z-tooltip: 1070;\n  --z-notification: 1080;\n  --blur-none: 0;\n  --blur-sm: 4px;\n  --blur-base: 8px;\n  --blur-md: 12px;\n  --blur-lg: 16px;\n  --blur-xl: 24px;\n  --blur-2xl: 40px;\n  --blur-3xl: 64px;\n}\n.dark {\n  --bg-base: var(--background);\n  --bg-subtle: var(--gray-800);\n  --bg-muted: var(--gray-700);\n  --bg-emphasis: var(--gray-600);\n  --surface-overlay: var(--gray-800);\n  --surface-raised: var(--gray-800);\n  --surface-sunken: var(--background);\n  --text-secondary: var(--gray-400);\n  --text-tertiary: var(--gray-500);\n  --text-disabled: var(--gray-600);\n  --state-hover: var(--gray-700);\n  --state-active: var(--gray-600);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n}\n.shadow-xs {\n  box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n  box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n  box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n  box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n  box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n  box-shadow: var(--shadow-2xl);\n}\n.shadow-primary {\n  box-shadow: var(--shadow-primary);\n}\n.shadow-success {\n  box-shadow: var(--shadow-success);\n}\n.shadow-error {\n  box-shadow: var(--shadow-error);\n}\n.shadow-warning {\n  box-shadow: var(--shadow-warning);\n}\n.shadow-inner-xs {\n  box-shadow: var(--shadow-inner-xs);\n}\n.shadow-inner-sm {\n  box-shadow: var(--shadow-inner-sm);\n}\n.shadow-inner-md {\n  box-shadow: var(--shadow-inner-md);\n}\n.animate-none {\n  animation: none;\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.animate-ping {\n  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n.animate-pulse {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.animate-bounce {\n  animation: bounce 1s infinite;\n}\n.animate-fade-in {\n  animation: fadeIn var(--duration-normal) var(--ease-out);\n}\n.animate-fade-out {\n  animation: fadeOut var(--duration-normal) var(--ease-out);\n}\n.animate-slide-in {\n  animation: slideIn var(--duration-normal) var(--ease-out);\n}\n.animate-scale-in {\n  animation: scaleIn var(--duration-normal) var(--ease-out);\n}\n.transition-none {\n  transition: none;\n}\n.transition-all {\n  transition-property: all;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n}\n.transition-opacity {\n  transition-property: opacity;\n}\n.transition-shadow {\n  transition-property: box-shadow;\n}\n.transition-transform {\n  transition-property: transform;\n}\n.duration-instant {\n  transition-duration: var(--duration-instant);\n}\n.duration-fast {\n  transition-duration: var(--duration-fast);\n}\n.duration-normal {\n  transition-duration: var(--duration-normal);\n}\n.duration-slow {\n  transition-duration: var(--duration-slow);\n}\n.duration-slower {\n  transition-duration: var(--duration-slower);\n}\n.duration-slowest {\n  transition-duration: var(--duration-slowest);\n}\n.ease-linear {\n  transition-timing-function: var(--ease-linear);\n}\n.ease-in {\n  transition-timing-function: var(--ease-in);\n}\n.ease-out {\n  transition-timing-function: var(--ease-out);\n}\n.ease-in-out {\n  transition-timing-function: var(--ease-in-out);\n}\n.ease-bounce {\n  transition-timing-function: var(--ease-bounce);\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: .5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: translateY(0);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes slideIn {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.chart-animate-in {\n  animation: chartFadeIn 0.5s ease-out;\n}\n.chart-point-pulse {\n  animation: pointPulse 2s ease-in-out infinite;\n}\n.chart-gradient-shift {\n  animation: gradientShift 3s ease-in-out infinite;\n}\n.recharts-tooltip-wrapper {\n  outline: none !important;\n}\n.recharts-tooltip-cursor {\n  fill: hsl(var(--muted) / 0.1);\n}\n.recharts-legend-item {\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.recharts-legend-item:hover {\n  transform: translateY(-1px);\n}\n.recharts-line-curve,\n.recharts-area-curve {\n  transition: all 0.3s ease;\n}\n.recharts-bar-rectangle {\n  transition: all 0.2s ease;\n}\n.recharts-bar-rectangle:hover {\n  filter: brightness(1.1);\n}\n.recharts-pie-sector {\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n.recharts-pie-sector:hover {\n  filter: brightness(1.1);\n  transform: scale(1.02);\n}\n.recharts-brush {\n  fill: hsl(var(--primary) / 0.1);\n  stroke: hsl(var(--primary) / 0.3);\n}\n.recharts-brush-slide {\n  fill: hsl(var(--primary) / 0.2);\n  fill-opacity: 0.5;\n}\n.recharts-cartesian-grid-horizontal line,\n.recharts-cartesian-grid-vertical line {\n  stroke-dasharray: 3 3;\n  opacity: 0.3;\n}\n.recharts-xAxis .recharts-cartesian-axis-tick-value,\n.recharts-yAxis .recharts-cartesian-axis-tick-value {\n  fill: hsl(var(--muted-foreground));\n  font-size: 11px;\n}\n.dark .recharts-tooltip-wrapper {\n  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n}\n.dark .recharts-cartesian-grid-horizontal line,\n.dark .recharts-cartesian-grid-vertical line {\n  opacity: 0.2;\n}\n.sparkline-chart .recharts-surface {\n  overflow: visible !important;\n}\n@keyframes chartSkeletonPulse {\n  0%, 100% {\n    opacity: 0.5;\n    transform: scaleY(0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n@keyframes chartFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes pointPulse {\n  0%, 100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.2);\n    opacity: 0.8;\n  }\n}\n@keyframes gradientShift {\n  0%, 100% {\n    stop-opacity: 0.8;\n  }\n  50% {\n    stop-opacity: 0.4;\n  }\n}\n.chart-legend-item {\n  position: relative;\n  overflow: hidden;\n}\n.chart-legend-item::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);\n  transition: left 0.5s ease;\n}\n.chart-legend-item:hover::before {\n  left: 100%;\n}\n.chart-crosshair {\n  stroke: hsl(var(--muted-foreground));\n  stroke-width: 1;\n  stroke-dasharray: 5 5;\n  opacity: 0.5;\n}\n.chart-minimap {\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background: hsl(var(--background) / 0.8);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n}\n.chart-export-menu {\n  animation: slideDown 0.2s ease-out;\n}\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.chart-zoom-indicator {\n  background: hsl(var(--background) / 0.9);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-full);\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n.recharts-surface {\n  will-change: transform;\n}\n.recharts-line,\n.recharts-area,\n.recharts-bar {\n  will-change: opacity, transform;\n}\n@media (max-width: 640px) {\n  .recharts-wrapper {\n    font-size: 0.875rem;\n  }\n  .recharts-legend-wrapper {\n    margin-top: 1rem !important;\n  }\n}\n@media print {\n  .chart-controls {\n    display: none !important;\n  }\n  .recharts-tooltip-wrapper {\n    display: none !important;\n  }\n}\n');
+styleInject(':root {\n  --primary-50: 240 249 255;\n  --primary-100: 224 242 254;\n  --primary-200: 186 230 253;\n  --primary-300: 125 211 252;\n  --primary-400: 56 189 248;\n  --primary-500: 14 165 233;\n  --primary-600: 2 132 199;\n  --primary-700: 3 105 161;\n  --primary-800: 7 89 133;\n  --primary-900: 12 74 110;\n  --primary-950: 8 47 73;\n  --secondary-50: 248 250 252;\n  --secondary-100: 241 245 249;\n  --secondary-200: 226 232 240;\n  --secondary-300: 203 213 225;\n  --secondary-400: 148 163 184;\n  --secondary-500: 100 116 139;\n  --secondary-600: 71 85 105;\n  --secondary-700: 51 65 85;\n  --secondary-800: 30 41 59;\n  --secondary-900: 15 23 42;\n  --secondary-950: 2 6 23;\n  --success-50: 240 253 244;\n  --success-100: 220 252 231;\n  --success-200: 187 247 208;\n  --success-300: 134 239 172;\n  --success-400: 74 222 128;\n  --success-500: 34 197 94;\n  --success-600: 22 163 74;\n  --success-700: 21 128 61;\n  --success-800: 22 101 52;\n  --success-900: 20 83 45;\n  --success-950: 5 46 22;\n  --warning-50: 254 252 232;\n  --warning-100: 254 249 195;\n  --warning-200: 254 240 138;\n  --warning-300: 253 224 71;\n  --warning-400: 250 204 21;\n  --warning-500: 234 179 8;\n  --warning-600: 202 138 4;\n  --warning-700: 161 98 7;\n  --warning-800: 133 77 14;\n  --warning-900: 113 63 18;\n  --warning-950: 66 32 6;\n  --error-50: 254 242 242;\n  --error-100: 254 226 226;\n  --error-200: 254 202 202;\n  --error-300: 252 165 165;\n  --error-400: 248 113 113;\n  --error-500: 239 68 68;\n  --error-600: 220 38 38;\n  --error-700: 185 28 28;\n  --error-800: 153 27 27;\n  --error-900: 127 29 29;\n  --error-950: 69 10 10;\n  --background: 0 0% 100%;\n  --foreground: 222.2 47.4% 11.2%;\n  --card: 0 0% 100%;\n  --card-foreground: 222.2 47.4% 11.2%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222.2 47.4% 11.2%;\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  --secondary: 210 40% 96%;\n  --secondary-foreground: 222.2 47.4% 11.2%;\n  --muted: 210 40% 96%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n  --accent: 210 40% 96%;\n  --accent-foreground: 222.2 47.4% 11.2%;\n  --destructive: 0 100% 50%;\n  --destructive-foreground: 210 40% 98%;\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 215 20.2% 65.1%;\n  --chart-1: 12 76% 61%;\n  --chart-2: 173 58% 39%;\n  --chart-3: 197 37% 24%;\n  --chart-4: 43 74% 66%;\n  --chart-5: 27 87% 67%;\n  --font-sans:\n    "Inter",\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  --font-serif:\n    "Crimson Text",\n    Georgia,\n    "Times New Roman",\n    serif;\n  --font-mono:\n    "JetBrains Mono",\n    "Fira Code",\n    "Consolas",\n    monospace;\n  --text-xs: 0.75rem;\n  --text-sm: 0.875rem;\n  --text-base: 1rem;\n  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;\n  --text-2xl: 1.5rem;\n  --text-3xl: 1.875rem;\n  --text-4xl: 2.25rem;\n  --text-5xl: 3rem;\n  --text-6xl: 3.75rem;\n  --text-7xl: 4.5rem;\n  --text-8xl: 6rem;\n  --text-9xl: 8rem;\n  --leading-none: 1;\n  --leading-tight: 1.25;\n  --leading-snug: 1.375;\n  --leading-normal: 1.5;\n  --leading-relaxed: 1.625;\n  --leading-loose: 2;\n  --font-thin: 100;\n  --font-extralight: 200;\n  --font-light: 300;\n  --font-normal: 400;\n  --font-medium: 500;\n  --font-semibold: 600;\n  --font-bold: 700;\n  --font-extrabold: 800;\n  --font-black: 900;\n  --spacing-0: 0;\n  --spacing-px: 1px;\n  --spacing-0-5: 0.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-1-5: 0.375rem;\n  --spacing-2: 0.5rem;\n  --spacing-2-5: 0.625rem;\n  --spacing-3: 0.75rem;\n  --spacing-3-5: 0.875rem;\n  --spacing-4: 1rem;\n  --spacing-5: 1.25rem;\n  --spacing-6: 1.5rem;\n  --spacing-7: 1.75rem;\n  --spacing-8: 2rem;\n  --spacing-9: 2.25rem;\n  --spacing-10: 2.5rem;\n  --spacing-11: 2.75rem;\n  --spacing-12: 3rem;\n  --spacing-14: 3.5rem;\n  --spacing-16: 4rem;\n  --spacing-20: 5rem;\n  --spacing-24: 6rem;\n  --spacing-28: 7rem;\n  --spacing-32: 8rem;\n  --spacing-36: 9rem;\n  --spacing-40: 10rem;\n  --spacing-44: 11rem;\n  --spacing-48: 12rem;\n  --spacing-52: 13rem;\n  --spacing-56: 14rem;\n  --spacing-60: 15rem;\n  --spacing-64: 16rem;\n  --spacing-72: 18rem;\n  --spacing-80: 20rem;\n  --spacing-96: 24rem;\n  --radius-none: 0;\n  --radius-sm: 0.125rem;\n  --radius-base: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n  --radius-2xl: 1rem;\n  --radius-3xl: 1.5rem;\n  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n  --shadow-none: 0 0 #0000;\n  --elevation-0: var(--shadow-none);\n  --elevation-1: var(--shadow-sm);\n  --elevation-2: var(--shadow-base);\n  --elevation-3: var(--shadow-md);\n  --elevation-4: var(--shadow-lg);\n  --elevation-5: var(--shadow-xl);\n  --elevation-6: var(--shadow-2xl);\n  --duration-75: 75ms;\n  --duration-100: 100ms;\n  --duration-150: 150ms;\n  --duration-200: 200ms;\n  --duration-300: 300ms;\n  --duration-500: 500ms;\n  --duration-700: 700ms;\n  --duration-1000: 1000ms;\n  --ease-linear: linear;\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --animate-fade-in: fadeIn var(--duration-300) var(--ease-out);\n  --animate-fade-out: fadeOut var(--duration-300) var(--ease-in);\n  --animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);\n  --animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);\n  --animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);\n  --animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);\n  --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);\n  --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);\n  --animate-bounce: bounce var(--duration-500) var(--ease-bounce);\n  --animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;\n  --animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;\n  --breakpoint-sm: 640px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 1024px;\n  --breakpoint-xl: 1280px;\n  --breakpoint-2xl: 1536px;\n  --container-sm: 640px;\n  --container-md: 768px;\n  --container-lg: 1024px;\n  --container-xl: 1280px;\n  --container-2xl: 1536px;\n  --z-0: 0;\n  --z-10: 10;\n  --z-20: 20;\n  --z-30: 30;\n  --z-40: 40;\n  --z-50: 50;\n  --z-auto: auto;\n  --z-dropdown: 1000;\n  --z-sticky: 1020;\n  --z-fixed: 1030;\n  --z-modal-backdrop: 1040;\n  --z-modal: 1050;\n  --z-popover: 1060;\n  --z-tooltip: 1070;\n  --z-toast: 1080;\n  --button-height-sm: 2rem;\n  --button-height-md: 2.5rem;\n  --button-height-lg: 3rem;\n  --button-height-xl: 3.5rem;\n  --button-padding-sm: 0.5rem 0.75rem;\n  --button-padding-md: 0.625rem 1rem;\n  --button-padding-lg: 0.75rem 1.25rem;\n  --button-padding-xl: 1rem 1.5rem;\n  --button-font-size-sm: var(--text-sm);\n  --button-font-size-md: var(--text-base);\n  --button-font-size-lg: var(--text-lg);\n  --button-font-size-xl: var(--text-xl);\n  --input-height-sm: 2rem;\n  --input-height-md: 2.5rem;\n  --input-height-lg: 3rem;\n  --input-height-xl: 3.5rem;\n  --input-padding-sm: 0.5rem 0.75rem;\n  --input-padding-md: 0.625rem 1rem;\n  --input-padding-lg: 0.75rem 1.25rem;\n  --input-padding-xl: 1rem 1.5rem;\n  --input-border-width: 1px;\n  --input-border-radius: var(--radius-md);\n  --input-focus-ring-width: 2px;\n  --input-focus-ring-offset: 2px;\n  --card-padding-sm: 1rem;\n  --card-padding-md: 1.5rem;\n  --card-padding-lg: 2rem;\n  --card-padding-xl: 2.5rem;\n  --card-border-radius: var(--radius-lg);\n  --card-border-width: 1px;\n  --card-shadow: var(--elevation-1);\n  --card-hover-shadow: var(--elevation-2);\n}\n.dark {\n  --background: 224 71% 4%;\n  --foreground: 213 31% 91%;\n  --card: 224 71% 4%;\n  --card-foreground: 213 31% 91%;\n  --popover: 224 71% 4%;\n  --popover-foreground: 213 31% 91%;\n  --primary: 210 40% 98%;\n  --primary-foreground: 222.2 47.4% 1.2%;\n  --secondary: 222.2 84% 4.9%;\n  --secondary-foreground: 210 40% 98%;\n  --muted: 223 47% 11%;\n  --muted-foreground: 215.4 16.3% 56.9%;\n  --accent: 216 34% 17%;\n  --accent-foreground: 210 40% 98%;\n  --destructive: 0 63% 31%;\n  --destructive-foreground: 210 40% 98%;\n  --border: 216 34% 17%;\n  --input: 216 34% 17%;\n  --ring: 216 34% 17%;\n  --chart-1: 220 70% 50%;\n  --chart-2: 160 60% 45%;\n  --chart-3: 30 80% 55%;\n  --chart-4: 280 65% 60%;\n  --chart-5: 340 75% 55%;\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes slideInUp {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideInDown {\n  from {\n    transform: translateY(-100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes scaleOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n@keyframes bounce {\n  0%, 20%, 53%, 80%, 100% {\n    transform: translate3d(0, 0, 0);\n  }\n  40%, 43% {\n    transform: translate3d(0, -30px, 0);\n  }\n  70% {\n    transform: translate3d(0, -15px, 0);\n  }\n  90% {\n    transform: translate3d(0, -4px, 0);\n  }\n}\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-fade-in {\n  animation: var(--animate-fade-in);\n}\n.animate-fade-out {\n  animation: var(--animate-fade-out);\n}\n.animate-slide-in-up {\n  animation: var(--animate-slide-in-up);\n}\n.animate-slide-in-down {\n  animation: var(--animate-slide-in-down);\n}\n.animate-slide-in-left {\n  animation: var(--animate-slide-in-left);\n}\n.animate-slide-in-right {\n  animation: var(--animate-slide-in-right);\n}\n.animate-scale-in {\n  animation: var(--animate-scale-in);\n}\n.animate-scale-out {\n  animation: var(--animate-scale-out);\n}\n.animate-bounce {\n  animation: var(--animate-bounce);\n}\n.animate-pulse {\n  animation: var(--animate-pulse);\n}\n.animate-spin {\n  animation: var(--animate-spin);\n}\n@media (max-width: 639px) {\n  .container {\n    max-width: 100%;\n  }\n}\n@media (min-width: 640px) {\n  .container {\n    max-width: var(--container-sm);\n  }\n}\n@media (min-width: 768px) {\n  .container {\n    max-width: var(--container-md);\n  }\n}\n@media (min-width: 1024px) {\n  .container {\n    max-width: var(--container-lg);\n  }\n}\n@media (min-width: 1280px) {\n  .container {\n    max-width: var(--container-xl);\n  }\n}\n@media (min-width: 1536px) {\n  .container {\n    max-width: var(--container-2xl);\n  }\n}\n:root {\n  --bg-base: var(--background);\n  --bg-subtle: var(--gray-50);\n  --bg-muted: var(--gray-100);\n  --bg-emphasis: var(--gray-200);\n  --bg-inverse: var(--foreground);\n  --surface-base: var(--background);\n  --surface-overlay: var(--gray-50);\n  --surface-raised: var(--background);\n  --surface-sunken: var(--gray-100);\n  --text-primary: var(--foreground);\n  --text-secondary: var(--gray-600);\n  --text-tertiary: var(--gray-500);\n  --text-disabled: var(--gray-400);\n  --text-inverse: var(--background);\n  --text-link: var(--primary);\n  --text-link-hover: var(--primary-hover);\n  --brand-primary: var(--primary);\n  --brand-primary-hover: var(--primary-hover);\n  --brand-primary-active: var(--primary-active);\n  --brand-secondary: var(--secondary);\n  --state-hover: var(--gray-100);\n  --state-active: var(--gray-200);\n  --state-selected: var(--primary);\n  --state-disabled: var(--gray-300);\n  --state-focus: var(--primary);\n  --feedback-success: var(--success);\n  --feedback-success-light: 142 71% 95%;\n  --feedback-success-dark: 142 71% 35%;\n  --feedback-warning: var(--warning);\n  --feedback-warning-light: 38 92% 95%;\n  --feedback-warning-dark: 38 92% 40%;\n  --feedback-error: var(--error);\n  --feedback-error-light: 0 84% 95%;\n  --feedback-error-dark: 0 84% 50%;\n  --feedback-info: 217 91% 60%;\n  --feedback-info-light: 217 91% 95%;\n  --feedback-info-dark: 217 91% 50%;\n  --border-default: var(--border);\n  --border-subtle: var(--gray-200);\n  --border-strong: var(--gray-400);\n  --border-interactive: var(--primary);\n  --border-error: var(--error);\n  --border-success: var(--success);\n  --border-warning: var(--warning);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-primary: 0 4px 14px 0 hsl(var(--primary) / 0.3);\n  --shadow-success: 0 4px 14px 0 hsl(var(--success) / 0.3);\n  --shadow-error: 0 4px 14px 0 hsl(var(--error) / 0.3);\n  --shadow-warning: 0 4px 14px 0 hsl(var(--warning) / 0.3);\n  --shadow-inner-xs: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n  --shadow-inner-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  --ease-linear: linear;\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);\n  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  --duration-instant: 0ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 350ms;\n  --duration-slower: 500ms;\n  --duration-slowest: 750ms;\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0\\.5: 0.125rem;\n  --space-1: 0.25rem;\n  --space-1\\.5: 0.375rem;\n  --space-2: 0.5rem;\n  --space-2\\.5: 0.625rem;\n  --space-3: 0.75rem;\n  --space-3\\.5: 0.875rem;\n  --space-4: 1rem;\n  --space-5: 1.25rem;\n  --space-6: 1.5rem;\n  --space-7: 1.75rem;\n  --space-8: 2rem;\n  --space-9: 2.25rem;\n  --space-10: 2.5rem;\n  --space-11: 2.75rem;\n  --space-12: 3rem;\n  --space-14: 3.5rem;\n  --space-16: 4rem;\n  --space-20: 5rem;\n  --space-24: 6rem;\n  --space-28: 7rem;\n  --space-32: 8rem;\n  --space-36: 9rem;\n  --space-40: 10rem;\n  --space-44: 11rem;\n  --space-48: 12rem;\n  --space-52: 13rem;\n  --space-56: 14rem;\n  --space-60: 15rem;\n  --space-64: 16rem;\n  --space-72: 18rem;\n  --space-80: 20rem;\n  --space-96: 24rem;\n  --text-2xs: 0.625rem;\n  --text-xs: 0.75rem;\n  --text-sm: 0.875rem;\n  --text-base: 1rem;\n  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;\n  --text-2xl: 1.5rem;\n  --text-3xl: 1.875rem;\n  --text-4xl: 2.25rem;\n  --text-5xl: 3rem;\n  --text-6xl: 3.75rem;\n  --text-7xl: 4.5rem;\n  --text-8xl: 6rem;\n  --text-9xl: 8rem;\n  --leading-none: 1;\n  --leading-tight: 1.25;\n  --leading-snug: 1.375;\n  --leading-normal: 1.5;\n  --leading-relaxed: 1.625;\n  --leading-loose: 2;\n  --tracking-tighter: -0.05em;\n  --tracking-tight: -0.025em;\n  --tracking-normal: 0;\n  --tracking-wide: 0.025em;\n  --tracking-wider: 0.05em;\n  --tracking-widest: 0.1em;\n  --font-thin: 100;\n  --font-extralight: 200;\n  --font-light: 300;\n  --font-normal: 400;\n  --font-medium: 500;\n  --font-semibold: 600;\n  --font-bold: 700;\n  --font-extrabold: 800;\n  --font-black: 900;\n  --radius-none: 0;\n  --radius-sm: 0.125rem;\n  --radius-base: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n  --radius-2xl: 1rem;\n  --radius-3xl: 1.5rem;\n  --radius-full: 9999px;\n  --z-0: 0;\n  --z-10: 10;\n  --z-20: 20;\n  --z-30: 30;\n  --z-40: 40;\n  --z-50: 50;\n  --z-dropdown: 1000;\n  --z-sticky: 1020;\n  --z-fixed: 1030;\n  --z-modal-backdrop: 1040;\n  --z-modal: 1050;\n  --z-popover: 1060;\n  --z-tooltip: 1070;\n  --z-notification: 1080;\n  --blur-none: 0;\n  --blur-sm: 4px;\n  --blur-base: 8px;\n  --blur-md: 12px;\n  --blur-lg: 16px;\n  --blur-xl: 24px;\n  --blur-2xl: 40px;\n  --blur-3xl: 64px;\n}\n.dark {\n  --bg-base: var(--background);\n  --bg-subtle: var(--gray-800);\n  --bg-muted: var(--gray-700);\n  --bg-emphasis: var(--gray-600);\n  --surface-overlay: var(--gray-800);\n  --surface-raised: var(--gray-800);\n  --surface-sunken: var(--background);\n  --text-secondary: var(--gray-400);\n  --text-tertiary: var(--gray-500);\n  --text-disabled: var(--gray-600);\n  --state-hover: var(--gray-700);\n  --state-active: var(--gray-600);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);\n}\n.shadow-xs {\n  box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n  box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n  box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n  box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n  box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n  box-shadow: var(--shadow-2xl);\n}\n.shadow-primary {\n  box-shadow: var(--shadow-primary);\n}\n.shadow-success {\n  box-shadow: var(--shadow-success);\n}\n.shadow-error {\n  box-shadow: var(--shadow-error);\n}\n.shadow-warning {\n  box-shadow: var(--shadow-warning);\n}\n.shadow-inner-xs {\n  box-shadow: var(--shadow-inner-xs);\n}\n.shadow-inner-sm {\n  box-shadow: var(--shadow-inner-sm);\n}\n.shadow-inner-md {\n  box-shadow: var(--shadow-inner-md);\n}\n.animate-none {\n  animation: none;\n}\n.animate-spin {\n  animation: spin 1s linear infinite;\n}\n.animate-ping {\n  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n.animate-pulse {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n.animate-bounce {\n  animation: bounce 1s infinite;\n}\n.animate-fade-in {\n  animation: fadeIn var(--duration-normal) var(--ease-out);\n}\n.animate-fade-out {\n  animation: fadeOut var(--duration-normal) var(--ease-out);\n}\n.animate-slide-in {\n  animation: slideIn var(--duration-normal) var(--ease-out);\n}\n.animate-scale-in {\n  animation: scaleIn var(--duration-normal) var(--ease-out);\n}\n.transition-none {\n  transition: none;\n}\n.transition-all {\n  transition-property: all;\n}\n.transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n}\n.transition-opacity {\n  transition-property: opacity;\n}\n.transition-shadow {\n  transition-property: box-shadow;\n}\n.transition-transform {\n  transition-property: transform;\n}\n.duration-instant {\n  transition-duration: var(--duration-instant);\n}\n.duration-fast {\n  transition-duration: var(--duration-fast);\n}\n.duration-normal {\n  transition-duration: var(--duration-normal);\n}\n.duration-slow {\n  transition-duration: var(--duration-slow);\n}\n.duration-slower {\n  transition-duration: var(--duration-slower);\n}\n.duration-slowest {\n  transition-duration: var(--duration-slowest);\n}\n.ease-linear {\n  transition-timing-function: var(--ease-linear);\n}\n.ease-in {\n  transition-timing-function: var(--ease-in);\n}\n.ease-out {\n  transition-timing-function: var(--ease-out);\n}\n.ease-in-out {\n  transition-timing-function: var(--ease-in-out);\n}\n.ease-bounce {\n  transition-timing-function: var(--ease-bounce);\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: .5;\n  }\n}\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: translateY(0);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes slideIn {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes scaleIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.chart-animate-in {\n  animation: chartFadeIn 0.5s ease-out;\n}\n.chart-point-pulse {\n  animation: pointPulse 2s ease-in-out infinite;\n}\n.chart-gradient-shift {\n  animation: gradientShift 3s ease-in-out infinite;\n}\n.recharts-tooltip-wrapper {\n  outline: none !important;\n}\n.recharts-tooltip-cursor {\n  fill: hsl(var(--muted) / 0.1);\n}\n.recharts-legend-item {\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.recharts-legend-item:hover {\n  transform: translateY(-1px);\n}\n.recharts-line-curve,\n.recharts-area-curve {\n  transition: all 0.3s ease;\n}\n.recharts-bar-rectangle {\n  transition: all 0.2s ease;\n}\n.recharts-bar-rectangle:hover {\n  filter: brightness(1.1);\n}\n.recharts-pie-sector {\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n.recharts-pie-sector:hover {\n  filter: brightness(1.1);\n  transform: scale(1.02);\n}\n.recharts-brush {\n  fill: hsl(var(--primary) / 0.1);\n  stroke: hsl(var(--primary) / 0.3);\n}\n.recharts-brush-slide {\n  fill: hsl(var(--primary) / 0.2);\n  fill-opacity: 0.5;\n}\n.recharts-cartesian-grid-horizontal line,\n.recharts-cartesian-grid-vertical line {\n  stroke-dasharray: 3 3;\n  opacity: 0.3;\n}\n.recharts-xAxis .recharts-cartesian-axis-tick-value,\n.recharts-yAxis .recharts-cartesian-axis-tick-value {\n  fill: hsl(var(--muted-foreground));\n  font-size: 11px;\n}\n.dark .recharts-tooltip-wrapper {\n  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));\n}\n.dark .recharts-cartesian-grid-horizontal line,\n.dark .recharts-cartesian-grid-vertical line {\n  opacity: 0.2;\n}\n.sparkline-chart .recharts-surface {\n  overflow: visible !important;\n}\n@keyframes chartSkeletonPulse {\n  0%, 100% {\n    opacity: 0.5;\n    transform: scaleY(0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n@keyframes chartFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes pointPulse {\n  0%, 100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.2);\n    opacity: 0.8;\n  }\n}\n@keyframes gradientShift {\n  0%, 100% {\n    stop-opacity: 0.8;\n  }\n  50% {\n    stop-opacity: 0.4;\n  }\n}\n.chart-legend-item {\n  position: relative;\n  overflow: hidden;\n}\n.chart-legend-item::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);\n  transition: left 0.5s ease;\n}\n.chart-legend-item:hover::before {\n  left: 100%;\n}\n.chart-crosshair {\n  stroke: hsl(var(--muted-foreground));\n  stroke-width: 1;\n  stroke-dasharray: 5 5;\n  opacity: 0.5;\n}\n.chart-minimap {\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  background: hsl(var(--background) / 0.8);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n}\n.chart-export-menu {\n  animation: slideDown 0.2s ease-out;\n}\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.chart-zoom-indicator {\n  background: hsl(var(--background) / 0.9);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-full);\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n.recharts-surface {\n  will-change: transform;\n}\n.recharts-line,\n.recharts-area,\n.recharts-bar {\n  will-change: opacity, transform;\n}\n@media (max-width: 640px) {\n  .recharts-wrapper {\n    font-size: 0.875rem;\n  }\n  .recharts-legend-wrapper {\n    margin-top: 1rem !important;\n  }\n}\n@media print {\n  .chart-controls {\n    display: none !important;\n  }\n  .recharts-tooltip-wrapper {\n    display: none !important;\n  }\n}\n.react-grid-layout {\n  position: relative;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item img {\n  pointer-events: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n.react-grid-item.dropping {\n  visibility: hidden;\n}\n.react-grid-item.react-grid-placeholder {\n  background: red;\n  opacity: 0.2;\n  transition-duration: 100ms;\n  z-index: 2;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n}\n.react-grid-item.react-grid-placeholder.placeholder-resizing {\n  transition: none;\n}\n.react-grid-item > .react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n}\n.react-grid-item > .react-resizable-handle::after {\n  content: "";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 5px;\n  height: 5px;\n  border-right: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n}\n.react-resizable-hide > .react-resizable-handle {\n  display: none;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n.react-grid-layout {\n  position: relative !important;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property:\n    left,\n    top,\n    width,\n    height;\n}\n.react-grid-item > div {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.react-grid-item.cssTransforms {\n  transition-property:\n    transform,\n    width,\n    height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n@media (max-width: 768px) {\n  .react-grid-layout {\n    overflow-x: hidden !important;\n    height: auto !important;\n  }\n  .react-grid-item {\n    position: relative !important;\n    transform: none !important;\n    margin-bottom: 24px !important;\n    width: 100% !important;\n    left: 0 !important;\n    right: 0 !important;\n  }\n  .react-grid-item:last-child {\n    margin-bottom: 0 !important;\n  }\n  .react-grid-item.cssTransforms {\n    position: relative !important;\n    transform: none !important;\n  }\n  .react-grid-placeholder {\n    display: none !important;\n  }\n}\n');
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -2535,6 +2540,56 @@ var MoonUIButtonPro = t.forwardRef(
   }
 );
 MoonUIButtonPro.displayName = "MoonUIButtonPro";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          moonUIButtonProVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse",
+        head_row: "grid grid-cols-7",
+        head_cell: "text-muted-foreground rounded-md w-9 h-9 font-normal text-[0.8rem] flex items-center justify-center",
+        row: "grid grid-cols-7 gap-1 mt-1",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          moonUIButtonProVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        // IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        // IconRight: () => <ChevronRight className="h-4 w-4" />,
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
 cva("", {
   variants: {
     hover: {
@@ -3791,7 +3846,7 @@ var me = t.forwardRef((r2, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X14(e) {
+  function X18(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -3806,10 +3861,10 @@ var me = t.forwardRef((r2, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X14(V().length - 1), ie3 = (e) => {
+  let oe = () => X18(V().length - 1), ie3 = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X14(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X18(0) : e.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
@@ -3836,7 +3891,7 @@ var me = t.forwardRef((r2, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X14(0);
+          e.preventDefault(), X18(0);
           break;
         }
         case "End": {
@@ -5105,6 +5160,36 @@ var MoonUIRadioItemWithLabelPro = t.forwardRef(({
   ] });
 });
 MoonUIRadioItemWithLabelPro.displayName = "RadioItemWithLabelPro";
+var ScrollArea = t.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = t.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var MoonUISelectPro = SelectPrimitive.Root;
 MoonUISelectPro.displayName = "MoonUISelectPro";
 var MoonUISelectGroupPro = SelectPrimitive.Group;
@@ -5379,6 +5464,103 @@ var MoonUISeparatorPro = t.forwardRef(
   )
 );
 MoonUISeparatorPro.displayName = SeparatorPrimitive.Root.displayName;
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = t.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+var SheetDescription = t.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
 function MoonUISkeletonPro({
   className,
   ...props
@@ -6296,7 +6478,7 @@ var Toggle = t.forwardRef((props, forwardedRef) => {
   );
 });
 Toggle.displayName = NAME;
-var Root16 = Toggle;
+var Root18 = Toggle;
 var MoonUItoggleVariantsPro = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
@@ -6318,14 +6500,14 @@ var MoonUItoggleVariantsPro = cva(
   }
 );
 var MoonUITogglePro = t.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  Root16,
+  Root18,
   {
     ref,
     className: cn(MoonUItoggleVariantsPro({ variant, size, className })),
     ...props
   }
 ));
-MoonUITogglePro.displayName = Root16.displayName;
+MoonUITogglePro.displayName = Root18.displayName;
 var MoonUITooltipProviderPro = TooltipPrimitive.Provider;
 var tooltipVariants = cva(
   "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=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",
@@ -7457,7 +7639,7 @@ function EventDialog({
   return /* @__PURE__ */ jsx(MoonUIDialogPro, { open, onOpenChange, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "sm:max-w-[500px]", children: [
     /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
       /* @__PURE__ */ jsxs(MoonUIDialogTitlePro, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Calendar, { className: "w-5 h-5" }),
+        /* @__PURE__ */ jsx(Calendar$1, { className: "w-5 h-5" }),
         mode === "create" ? "Create Event" : "Edit Event"
       ] }),
       /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: mode === "create" ? "Add a new event to your calendar." : "Edit the event details." })
@@ -7659,7 +7841,7 @@ var EVENT_COLORS = {
   reminder: "bg-yellow-500",
   event: "bg-purple-500"
 };
-function Calendar2({
+function Calendar3({
   events = [],
   onEventClick,
   onEventAdd,
@@ -7829,7 +8011,7 @@ function Calendar2({
       /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs(MoonUICardTitlePro, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Calendar, { className: "h-5 w-5" }),
+            /* @__PURE__ */ jsx(Calendar$1, { className: "h-5 w-5" }),
             "Calendar"
           ] }),
           /* @__PURE__ */ jsxs(MoonUICardDescriptionPro, { children: [
@@ -8265,7 +8447,7 @@ function Kanban({
                           "flex items-center gap-1",
                           isOverdue(card.dueDate) && "text-destructive"
                         ), children: [
-                          /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx(Calendar$1, { className: "h-3 w-3" }),
                           /* @__PURE__ */ jsx("span", { children: formatDate(card.dueDate) })
                         ] })
                       ] }),
@@ -48887,7 +49069,7 @@ function Timeline({
                 /* @__PURE__ */ jsx("span", { children: event.metadata.duration })
               ] }),
               event.metadata.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx(Calendar$1, { className: "h-3 w-3" }),
                 /* @__PURE__ */ jsx("span", { children: event.metadata.location })
               ] }),
               event.metadata.comments && event.metadata.comments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -49149,14 +49331,18 @@ function AdvancedChart({
   }, [selectedTheme]);
   const gradientId = t__default.useId();
   const trend = t__default.useMemo(() => {
-    if (!data.length || !series.length)
+    if (!data || !Array.isArray(data) || !data.length || !series || !Array.isArray(series) || !series.length)
       return null;
     const firstSeries = series[0];
+    if (!firstSeries || !firstSeries.dataKey)
+      return null;
     const values = data.map((d) => Number(d[firstSeries.dataKey])).filter((v) => !isNaN(v));
     if (values.length < 2)
       return null;
     const first2 = values[0];
     const last = values[values.length - 1];
+    if (first2 === 0)
+      return null;
     const change = (last - first2) / first2 * 100;
     return {
       direction: change > 0 ? "up" : change < 0 ? "down" : "neutral",
@@ -49179,9 +49365,9 @@ function AdvancedChart({
       toggleSeriesVisibility(entry.dataKey);
     }
   };
-  const handleExport = (format) => {
+  const handleExport = (format2) => {
     if (onExport) {
-      onExport(format);
+      onExport(format2);
     }
   };
   const handleZoom = (direction) => {
@@ -49210,6 +49396,9 @@ function AdvancedChart({
     );
   }) });
   const renderChart = () => {
+    if (!data || !Array.isArray(data) || !series || !Array.isArray(series)) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "No data available" });
+    }
     const commonProps = {
       data,
       width: typeof width === "string" ? void 0 : width,
@@ -49998,43 +50187,147 @@ function AdvancedChart({
     }
   );
 }
-var METRIC_COLORS = {
-  primary: "text-blue-600",
-  success: "text-green-600",
-  warning: "text-yellow-600",
-  danger: "text-red-600",
-  info: "text-purple-600"
-};
-var WIDGET_SIZES = {
-  sm: "col-span-1",
-  md: "col-span-2",
-  lg: "col-span-3",
-  xl: "col-span-4"
-};
-function Dashboard({
-  metrics = [],
-  widgets = [],
-  onMetricClick,
-  onWidgetAction,
+function MetricCard({
+  data,
+  onClick,
+  onAction,
   className,
-  showHeader = true,
-  title = "Dashboard",
-  description = "Overview of your key metrics and performance",
-  refreshable = true,
-  onRefresh,
-  loading = false
+  showSparkline = true,
+  showForecast = false,
+  interactive = true,
+  glassmorphism = false
 }) {
-  const [refreshing, setRefreshing] = t__default.useState(false);
-  const handleRefresh = async () => {
-    if (onRefresh) {
-      setRefreshing(true);
-      try {
-        await onRefresh();
-      } finally {
-        setRefreshing(false);
-      }
+  const [isHovered, setIsHovered] = t__default.useState(false);
+  const colorClasses = {
+    primary: "text-blue-600 dark:text-blue-400",
+    success: "text-green-600 dark:text-green-400",
+    warning: "text-yellow-600 dark:text-yellow-400",
+    danger: "text-red-600 dark:text-red-400",
+    info: "text-purple-600 dark:text-purple-400"
+  };
+  const getChangeColor = (type) => {
+    switch (type) {
+      case "increase":
+        return "text-green-600 dark:text-green-400";
+      case "decrease":
+        return "text-red-600 dark:text-red-400";
+      default:
+        return "text-gray-600 dark:text-gray-400";
     }
   };
+  const getChangeIcon = (type) => {
+    switch (type) {
+      case "increase":
+        return /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4" });
+      case "decrease":
+        return /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-4 w-4" });
+      default:
+        return /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" });
+    }
+  };
+  const renderSparkline = () => {
+    if (!data.sparkline || data.sparkline.length < 2)
+      return null;
+    const max = Math.max(...data.sparkline);
+    const min = Math.min(...data.sparkline);
+    const range = max - min || 1;
+    const points = data.sparkline.map((value, index) => {
+      const x = index / (data.sparkline.length - 1) * 100;
+      const y = 100 - (value - min) / range * 100;
+      return `${x},${y}`;
+    }).join(" ");
+    const gradientId = `gradient-${data.id}`;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute bottom-0 left-0 right-0 h-16 overflow-hidden rounded-b-lg opacity-20",
+        initial: { opacity: 0 },
+        animate: { opacity: isHovered ? 0.3 : 0.2 },
+        transition: { duration: 0.2 },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "w-full h-full",
+            viewBox: "0 0 100 100",
+            preserveAspectRatio: "none",
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.3" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "polyline",
+                {
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  points,
+                  className: colorClasses[data.color || "primary"]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "polygon",
+                {
+                  fill: `url(#${gradientId})`,
+                  points: `0,100 ${points} 100,100`,
+                  className: colorClasses[data.color || "primary"]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  };
+  const renderProgress = () => {
+    if (!data.target)
+      return null;
+    const currentValue = typeof data.value === "number" ? data.value : parseFloat(data.value);
+    const progress = currentValue / data.target * 100;
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "mt-3",
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        transition: { delay: 0.1 },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mb-1", children: [
+            /* @__PURE__ */ jsx("span", { children: "Progress to target" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              progress.toFixed(1),
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: cn(
+                "h-full rounded-full",
+                progress >= 100 ? "bg-green-500" : "bg-primary"
+              ),
+              initial: { width: 0 },
+              animate: { width: `${Math.min(progress, 100)}%` },
+              transition: { duration: 0.5, ease: "easeOut" }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mt-1", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              currentValue,
+              " ",
+              data.unit
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Target: ",
+              data.target,
+              " ",
+              data.unit
+            ] })
+          ] })
+        ]
+      }
+    );
+  };
   const formatValue = (value) => {
     if (typeof value === "number") {
       if (value >= 1e6) {
@@ -50046,159 +50339,1823 @@ function Dashboard({
     }
     return value.toString();
   };
-  const getChangeIcon = (type) => {
-    switch (type) {
-      case "increase":
-        return /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4" });
-      case "decrease":
-        return /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-4 w-4" });
-      case "neutral":
-        return /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" });
-    }
+  const cardVariants = {
+    initial: { opacity: 0, y: 20 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.3, ease: "easeOut" }
+    },
+    hover: interactive ? {
+      y: -2,
+      transition: { duration: 0.2 }
+    } : {}
   };
-  const getChangeColor = (type) => {
-    switch (type) {
-      case "increase":
-        return "text-green-600";
-      case "decrease":
-        return "text-red-600";
-      case "neutral":
-        return "text-gray-600";
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      variants: cardVariants,
+      initial: "initial",
+      animate: "animate",
+      whileHover: "hover",
+      onHoverStart: () => setIsHovered(true),
+      onHoverEnd: () => setIsHovered(false),
+      children: /* @__PURE__ */ jsxs(
+        MoonUICardPro,
+        {
+          className: cn(
+            "relative overflow-hidden cursor-pointer transition-all duration-300",
+            interactive && "hover:shadow-lg hover:shadow-primary/5",
+            glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+            className
+          ),
+          onClick,
+          children: [
+            glassmorphism && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 pb-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: cn(
+                      "p-2 rounded-lg",
+                      glassmorphism ? "bg-white/10 backdrop-blur" : "bg-muted"
+                    ),
+                    whileHover: { scale: 1.05 },
+                    whileTap: { scale: 0.95 },
+                    children: /* @__PURE__ */ jsx("div", { className: cn("h-5 w-5", colorClasses[data.color || "primary"]), children: data.icon })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-muted-foreground", children: data.title }) })
+              ] }),
+              interactive && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0",
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("fullscreen"), children: [
+                    /* @__PURE__ */ jsx(Maximize2, { className: "mr-2 h-4 w-4" }),
+                    "Fullscreen"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("export"), children: [
+                    /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                    "Export Data"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("share"), children: [
+                    /* @__PURE__ */ jsx(Share2, { className: "mr-2 h-4 w-4" }),
+                    "Share"
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+              /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
+                /* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    className: "text-3xl font-bold tracking-tight",
+                    animate: {
+                      scale: isHovered ? 1.02 : 1
+                    },
+                    transition: { duration: 0.2 },
+                    children: [
+                      formatValue(data.value),
+                      data.unit && /* @__PURE__ */ jsx("span", { className: "text-lg ml-1 text-muted-foreground", children: data.unit })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(MoonUITooltipContentPro, { children: /* @__PURE__ */ jsxs("p", { children: [
+                  "Exact value: ",
+                  data.value,
+                  " ",
+                  data.unit
+                ] }) })
+              ] }) }),
+              data.change && /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: cn(
+                    "flex items-center gap-1 text-sm mt-2",
+                    getChangeColor(data.change.type)
+                  ),
+                  initial: { opacity: 0, x: -10 },
+                  animate: { opacity: 1, x: 0 },
+                  transition: { delay: 0.1 },
+                  children: [
+                    getChangeIcon(data.change.type),
+                    /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                      data.change.type === "neutral" ? "" : data.change.type === "increase" ? "+" : "-",
+                      Math.abs(data.change.value),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                      "from ",
+                      data.change.period
+                    ] })
+                  ]
+                }
+              ),
+              showForecast && data.forecast && /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: "flex items-center gap-1 text-xs text-muted-foreground mt-1",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  transition: { delay: 0.2 },
+                  children: [
+                    /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "Forecast: ",
+                      formatValue(data.forecast),
+                      " ",
+                      data.unit
+                    ] })
+                  ]
+                }
+              ),
+              renderProgress()
+            ] }),
+            showSparkline && renderSparkline()
+          ]
+        }
+      )
     }
-  };
-  const renderMetricCard = (metric) => {
-    const colorClass = metric.color ? METRIC_COLORS[metric.color] : "text-foreground";
+  );
+}
+var CHART_COLORS = {
+  default: ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"],
+  pastel: ["#93c5fd", "#86efac", "#fcd34d", "#fca5a5", "#c4b5fd", "#fbcfe8"],
+  vibrant: ["#2563eb", "#059669", "#d97706", "#dc2626", "#7c3aed", "#db2777"],
+  monochrome: ["#1f2937", "#374151", "#4b5563", "#6b7280", "#9ca3af", "#d1d5db"]
+};
+function ChartWidget({
+  id,
+  title,
+  description,
+  data,
+  className,
+  height = 300,
+  onAction,
+  loading = false,
+  refreshing = false,
+  glassmorphism = false,
+  interactive = true
+}) {
+  const [colorScheme, setColorScheme] = t__default.useState("default");
+  const [isFullscreen, setIsFullscreen] = t__default.useState(false);
+  const colors = CHART_COLORS[colorScheme];
+  const CustomTooltip2 = ({ active, payload, label }) => {
+    if (!active || !payload)
+      return null;
     return /* @__PURE__ */ jsxs(
-      MoonUICardPro,
+      motion.div,
       {
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
         className: cn(
-          "cursor-pointer hover:shadow-md transition-shadow",
-          onMetricClick && "hover:bg-muted/50"
+          "p-3 rounded-lg shadow-lg",
+          glassmorphism ? "bg-background/80 backdrop-blur-md border border-white/10" : "bg-background border"
         ),
-        onClick: () => onMetricClick?.(metric),
         children: [
-          /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
-            /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-sm font-medium", children: metric.title }),
-            /* @__PURE__ */ jsx("div", { className: cn("h-4 w-4", colorClass), children: metric.icon })
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: label }),
+          payload.map((entry, index) => /* @__PURE__ */ jsxs("p", { className: "text-sm mt-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-block w-3 h-3 rounded-full mr-2",
+                style: { backgroundColor: entry.color }
+              }
+            ),
+            entry.name,
+            ": ",
+            entry.value
+          ] }, index))
+        ]
+      }
+    );
+  };
+  const renderChart = () => {
+    if (!data.data || data.data.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "No data available" });
+    }
+    const chartProps = {
+      data: data.data,
+      margin: { top: 5, right: 30, left: 20, bottom: 5 }
+    };
+    switch (data.type) {
+      case "line":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart, { ...chartProps, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "opacity-30" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "name").map((key, index) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: key,
+              stroke: colors[index % colors.length],
+              strokeWidth: 2,
+              dot: { r: 4 },
+              activeDot: { r: 6 }
+            },
+            key
+          ))
+        ] }) });
+      case "bar":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart, { ...chartProps, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "opacity-30" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "name").map((key, index) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: key,
+              fill: colors[index % colors.length],
+              radius: [4, 4, 0, 0]
+            },
+            key
+          ))
+        ] }) });
+      case "area":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart, { ...chartProps, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", className: "opacity-30" }),
+          /* @__PURE__ */ jsx(XAxis, { dataKey: "name" }),
+          /* @__PURE__ */ jsx(YAxis, {}),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "name").map((key, index) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: key,
+              stroke: colors[index % colors.length],
+              fill: colors[index % colors.length],
+              fillOpacity: 0.2
+            },
+            key
+          ))
+        ] }) });
+      case "pie":
+      case "donut":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart, { children: [
+          /* @__PURE__ */ jsx(
+            Pie,
+            {
+              data: data.data,
+              cx: "50%",
+              cy: "50%",
+              labelLine: false,
+              label: interactive,
+              outerRadius: data.type === "donut" ? 80 : 100,
+              innerRadius: data.type === "donut" ? 50 : 0,
+              fill: "#8884d8",
+              dataKey: "value",
+              children: data.data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {})
+        ] }) });
+      case "radar":
+        return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RadarChart, { data: data.data, children: [
+          /* @__PURE__ */ jsx(PolarGrid, {}),
+          /* @__PURE__ */ jsx(PolarAngleAxis, { dataKey: "subject" }),
+          /* @__PURE__ */ jsx(PolarRadiusAxis, {}),
+          Object.keys(data.data[0]).filter((key) => key !== "subject").map((key, index) => /* @__PURE__ */ jsx(
+            Radar,
+            {
+              name: key,
+              dataKey: key,
+              stroke: colors[index % colors.length],
+              fill: colors[index % colors.length],
+              fillOpacity: 0.3
+            },
+            key
+          )),
+          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
+          interactive && /* @__PURE__ */ jsx(Legend, {})
+        ] }) });
+      default:
+        return null;
+    }
+  };
+  const cardVariants = {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.3, ease: "easeOut" }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      variants: cardVariants,
+      initial: "initial",
+      animate: "animate",
+      className: cn(isFullscreen && "fixed inset-4 z-50"),
+      children: /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn(
+        "relative overflow-hidden transition-all duration-300",
+        glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+        isFullscreen && "h-full",
+        className
+      ), children: [
+        /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base font-semibold", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description })
           ] }),
-          /* @__PURE__ */ jsxs(MoonUICardContentPro, { children: [
-            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: formatValue(metric.value) }),
-            metric.change && /* @__PURE__ */ jsxs("div", { className: cn(
-              "flex items-center text-xs mt-1",
-              getChangeColor(metric.change.type)
-            ), children: [
-              getChangeIcon(metric.change.type),
-              /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
-                Math.abs(metric.change.value),
-                "% from ",
-                metric.change.period
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            refreshing && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                animate: { rotate: 360 },
+                transition: { duration: 1, repeat: Infinity, ease: "linear" },
+                children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 text-muted-foreground" })
+              }
+            ),
+            interactive && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" }) }) }),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-48", children: [
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => {
+                  setIsFullscreen(!isFullscreen);
+                  onAction?.("fullscreen", { fullscreen: !isFullscreen });
+                }, children: [
+                  /* @__PURE__ */ jsx(Maximize2, { className: "mr-2 h-4 w-4" }),
+                  isFullscreen ? "Exit Fullscreen" : "Fullscreen"
+                ] }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubPro, { children: [
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { children: [
+                    /* @__PURE__ */ jsx(Palette, { className: "mr-2 h-4 w-4" }),
+                    "Color Scheme"
+                  ] }),
+                  /* @__PURE__ */ jsx(MoonUIDropdownMenuSubContentPro, { children: Object.keys(CHART_COLORS).map((scheme2) => /* @__PURE__ */ jsx(
+                    MoonUIDropdownMenuItemPro,
+                    {
+                      onClick: () => setColorScheme(scheme2),
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: CHART_COLORS[scheme2].slice(0, 3).map((color, i) => /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "w-3 h-3 rounded-full",
+                            style: { backgroundColor: color }
+                          },
+                          i
+                        )) }),
+                        /* @__PURE__ */ jsx("span", { className: "capitalize", children: scheme2 })
+                      ] })
+                    },
+                    scheme2
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("export", { format: "png" }), children: [
+                  /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                  "Export as PNG"
+                ] }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("export", { format: "csv" }), children: [
+                  /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                  "Export Data"
+                ] }),
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("filter"), children: [
+                  /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
+                  "Filter Data"
+                ] }),
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onAction?.("settings"), children: [
+                  /* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }),
+                  "Chart Settings"
+                ] })
               ] })
-            ] }),
-            metric.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: metric.description })
+            ] })
           ] })
-        ]
-      },
-      metric.id
-    );
+        ] }),
+        /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-0 px-4 pb-4", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: loading ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            className: "flex items-center justify-center",
+            style: { height },
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-muted h-4 w-32 rounded" }),
+              /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-muted h-4 w-24 rounded" }),
+              /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-muted h-4 w-28 rounded" })
+            ] })
+          },
+          "loading"
+        ) : /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: -10 },
+            transition: { duration: 0.3 },
+            children: renderChart()
+          },
+          "chart"
+        ) }) })
+      ] })
+    }
+  );
+}
+function ActivityFeed({
+  items,
+  title = "Activity Feed",
+  className,
+  height = 400,
+  onItemClick,
+  onAction,
+  loading = false,
+  showFilters = true,
+  showNotifications = true,
+  glassmorphism = false,
+  realtime = false
+}) {
+  const [filter, setFilter] = t__default.useState("all");
+  const [notificationsEnabled, setNotificationsEnabled] = t__default.useState(true);
+  const [newItems, setNewItems] = t__default.useState([]);
+  t__default.useEffect(() => {
+    if (!realtime)
+      return;
+    const interval = setInterval(() => {
+      const randomItem = {
+        id: `new-${Date.now()}`,
+        type: ["info", "success", "warning", "error"][Math.floor(Math.random() * 4)],
+        title: "New activity",
+        description: "Something happened just now",
+        timestamp: /* @__PURE__ */ new Date(),
+        user: {
+          name: "System",
+          avatar: void 0
+        }
+      };
+      setNewItems((prev) => [randomItem, ...prev].slice(0, 3));
+      setTimeout(() => {
+        setNewItems((prev) => prev.filter((item) => item.id !== randomItem.id));
+      }, 5e3);
+    }, 1e4);
+    return () => clearInterval(interval);
+  }, [realtime]);
+  const getTypeIcon = (type) => {
+    switch (type) {
+      case "info":
+        return /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" });
+      case "success":
+        return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" });
+      case "warning":
+        return /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" });
+      case "error":
+        return /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" });
+    }
   };
-  const renderWidget = (widget) => {
-    const sizeClass = WIDGET_SIZES[widget.size || "md"];
-    return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn("h-fit", sizeClass), children: [
-      /* @__PURE__ */ jsx(MoonUICardHeaderPro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base", children: widget.title }),
-          widget.description && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { className: "mt-1", children: widget.description })
+  const getTypeColor = (type) => {
+    switch (type) {
+      case "info":
+        return "text-blue-500 bg-blue-100 dark:bg-blue-900/20";
+      case "success":
+        return "text-green-500 bg-green-100 dark:bg-green-900/20";
+      case "warning":
+        return "text-yellow-500 bg-yellow-100 dark:bg-yellow-900/20";
+      case "error":
+        return "text-red-500 bg-red-100 dark:bg-red-900/20";
+    }
+  };
+  const filteredItems = [...newItems, ...items].filter(
+    (item) => filter === "all" || item.type === filter
+  );
+  const renderActivityItem = (item, isNew = false) => /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, x: -20 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 20 },
+      whileHover: { x: 4 },
+      transition: { duration: 0.2 },
+      className: cn(
+        "group relative flex gap-3 p-3 rounded-lg cursor-pointer transition-colors",
+        "hover:bg-muted/50",
+        isNew && "bg-primary/5 border-l-2 border-primary"
+      ),
+      onClick: () => onItemClick?.(item),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute left-7 top-12 bottom-0 w-px bg-border" }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 flex-shrink-0", children: item.user?.avatar ? /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-8 w-8", children: [
+          /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: item.user.avatar }),
+          /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { children: item.user.name[0] })
+        ] }) : /* @__PURE__ */ jsx("div", { className: cn(
+          "h-8 w-8 rounded-full flex items-center justify-center",
+          getTypeColor(item.type)
+        ), children: item.icon || getTypeIcon(item.type) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium leading-tight", children: [
+                item.user?.name && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+                  item.user.name,
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.title })
+              ] }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5 line-clamp-2", children: item.description })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground whitespace-nowrap", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+              formatDistanceToNow(item.timestamp, { addSuffix: true })
+            ] })
+          ] }),
+          isNew && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 0 },
+              animate: { scale: 1 },
+              className: "inline-block mt-1",
+              children: /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "default", className: "text-xs", children: "New" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-6 w-6 p-0",
+            onClick: (e) => {
+              e.stopPropagation();
+              onAction?.("more", item);
+            },
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-3 w-3" })
+          }
+        ) })
+      ]
+    },
+    item.id
+  );
+  return /* @__PURE__ */ jsxs(MoonUICardPro, { className: cn(
+    "relative overflow-hidden",
+    glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "flex flex-row items-center justify-between space-y-0 pb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(MoonUICardTitlePro, { className: "text-base font-semibold", children: title }),
+        realtime && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "mr-1 h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse" }),
+          "Live"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        showFilters && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4 mr-1" }),
+            filter !== "all" && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "ml-1", children: filter })
+          ] }) }),
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("all"), children: "All Activities" }),
+            /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("info"), children: [
+              /* @__PURE__ */ jsx(Info, { className: "mr-2 h-4 w-4 text-blue-500" }),
+              "Information"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("success"), children: [
+              /* @__PURE__ */ jsx(CheckCircle, { className: "mr-2 h-4 w-4 text-green-500" }),
+              "Success"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("warning"), children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "mr-2 h-4 w-4 text-yellow-500" }),
+              "Warning"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setFilter("error"), children: [
+              /* @__PURE__ */ jsx(XCircle, { className: "mr-2 h-4 w-4 text-red-500" }),
+              "Error"
+            ] })
+          ] })
         ] }),
+        showNotifications && /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 w-8 p-0",
+            onClick: () => {
+              setNotificationsEnabled(!notificationsEnabled);
+              onAction?.("notifications", { enabled: !notificationsEnabled });
+            },
+            children: notificationsEnabled ? /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(BellOff, { className: "h-4 w-4 text-muted-foreground" })
+          }
+        ),
         /* @__PURE__ */ jsx(
           MoonUIButtonPro,
           {
             variant: "ghost",
             size: "sm",
-            onClick: () => onWidgetAction?.(widget.id, "menu"),
-            children: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" })
+            className: "h-8 w-8 p-0",
+            onClick: () => onAction?.("refresh"),
+            children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
           }
         )
-      ] }) }),
-      /* @__PURE__ */ jsx(MoonUICardContentPro, { children: widget.loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }) }) : widget.error ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-destructive", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: widget.error }) }) : widget.content })
-    ] }, widget.id);
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-0", children: /* @__PURE__ */ jsx(ScrollArea, { className: "px-4 pb-4", style: { height }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: loading ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "space-y-3",
+        children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded w-3/4 animate-pulse" })
+          ] })
+        ] }, i))
+      },
+      "loading"
+    ) : filteredItems.length === 0 ? /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        className: "flex flex-col items-center justify-center py-12 text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(Activity, { className: "h-8 w-8 mb-2" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No activities to show" })
+        ]
+      },
+      "empty"
+    ) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map(
+      (item) => renderActivityItem(item, newItems.some((newItem) => newItem.id === item.id))
+    ) }) }) }) })
+  ] });
+}
+
+// node_modules/react-resizable/css/styles.css
+styleInject(".react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n");
+var ResponsiveGridLayout = WidthProvider(Responsive);
+function DashboardGrid({
+  widgets,
+  onLayoutChange,
+  onWidgetRemove,
+  onWidgetAction,
+  editMode = false,
+  className,
+  glassmorphism = false,
+  breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+  cols = { lg: 12, md: 8, sm: 4, xs: 2, xxs: 1 },
+  rowHeight = 80,
+  margin = [16, 24],
+  containerPadding = [0, 0]
+}) {
+  const [layouts, setLayouts] = t__default.useState({});
+  const [currentBreakpoint, setCurrentBreakpoint] = t__default.useState("lg");
+  const [lockedWidgets, setLockedWidgets] = t__default.useState(/* @__PURE__ */ new Set());
+  const [fullscreenWidget, setFullscreenWidget] = t__default.useState(null);
+  const [containerWidth, setContainerWidth] = t__default.useState(1200);
+  const containerRef = t__default.useRef(null);
+  const [compactType, setCompactType] = t__default.useState("vertical");
+  t__default.useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        const width = containerRef.current.offsetWidth;
+        setContainerWidth(width);
+        if (width < 480) {
+          setCurrentBreakpoint("xxs");
+        } else if (width < 768) {
+          setCurrentBreakpoint("xs");
+        } else if (width < 996) {
+          setCurrentBreakpoint("sm");
+        } else if (width < 1200) {
+          setCurrentBreakpoint("md");
+        } else {
+          setCurrentBreakpoint("lg");
+        }
+      }
+    };
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  const generateResponsiveLayouts = () => {
+    const baseLayout = widgets.map((widget, index) => ({
+      i: widget.id,
+      x: widget.position?.x ?? index * 3 % 12,
+      y: widget.position?.y ?? Math.floor(index * 3 / 12) * 3,
+      w: widget.size?.w ?? 3,
+      h: widget.size?.h ?? 3,
+      minW: widget.size?.minW || 2,
+      maxW: widget.size?.maxW || 12,
+      minH: widget.size?.minH || 2,
+      maxH: widget.size?.maxH || 8,
+      isDraggable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canMove !== false,
+      isResizable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canResize !== false
+    }));
+    const sortedLayout = [...baseLayout].sort((a, b) => {
+      if (a.y === b.y)
+        return a.x - b.x;
+      return a.y - b.y;
+    });
+    return {
+      lg: baseLayout,
+      md: sortedLayout.map((item, index) => {
+        const maxW = Math.min(item.w, 4);
+        const row = Math.floor(index / 2);
+        const col = index % 2 * 4;
+        return {
+          ...item,
+          w: maxW,
+          x: col,
+          y: row * 3,
+          h: Math.min(item.h, 3)
+        };
+      }),
+      sm: sortedLayout.map((item, index) => {
+        const maxW = Math.min(item.w, 4);
+        return {
+          ...item,
+          w: maxW,
+          x: 0,
+          y: index * 3,
+          h: Math.min(item.h, 3)
+        };
+      }),
+      xs: sortedLayout.map((item, index) => ({
+        ...item,
+        w: 2,
+        // Full width on mobile
+        x: 0,
+        y: index * 2,
+        h: Math.min(item.h, 2)
+      })),
+      xxs: sortedLayout.map((item, index) => ({
+        ...item,
+        w: 1,
+        // Full width on extra small
+        x: 0,
+        y: index * 2,
+        h: Math.min(item.h, 2)
+      }))
+    };
   };
-  const defaultMetrics = [
-    {
-      id: "total-users",
-      title: "Total Users",
-      value: 2543,
-      change: { value: 12, type: "increase", period: "last month" },
-      icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
-      color: "primary"
-    },
-    {
-      id: "revenue",
-      title: "Revenue",
-      value: "$12,345",
-      change: { value: 8, type: "increase", period: "last month" },
-      icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }),
-      color: "success"
-    },
-    {
-      id: "active-sessions",
-      title: "Active Sessions",
-      value: 1234,
-      change: { value: 2, type: "decrease", period: "last hour" },
-      icon: /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4" }),
-      color: "warning"
-    },
-    {
-      id: "conversion-rate",
-      title: "Conversion Rate",
-      value: "3.2%",
-      change: { value: 0.3, type: "increase", period: "last week" },
-      icon: /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" }),
-      color: "info"
+  const toggleWidgetLock = (widgetId) => {
+    setLockedWidgets((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(widgetId)) {
+        newSet.delete(widgetId);
+      } else {
+        newSet.add(widgetId);
+      }
+      return newSet;
+    });
+  };
+  const toggleFullscreen = (widgetId) => {
+    if (fullscreenWidget === widgetId) {
+      setFullscreenWidget(null);
+    } else {
+      setFullscreenWidget(widgetId);
     }
-  ];
-  const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics;
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-1/4" }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-32 bg-muted rounded" }, i)) })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-6", className), children: [
-    showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
-      ] }),
-      refreshable && /* @__PURE__ */ jsxs(
-        MoonUIButtonPro,
+  };
+  const renderWidget = (widget) => {
+    const isLocked = lockedWidgets.has(widget.id);
+    const isFullscreen = fullscreenWidget === widget.id;
+    const widgetContent = () => {
+      switch (widget.type) {
+        case "metric":
+          return /* @__PURE__ */ jsx(
+            MetricCard,
+            {
+              data: widget.data,
+              onAction: (action) => onWidgetAction?.(widget.id, action),
+              glassmorphism
+            }
+          );
+        case "chart":
+          return /* @__PURE__ */ jsx(
+            ChartWidget,
+            {
+              id: widget.id,
+              title: widget.title,
+              description: widget.description,
+              data: widget.data,
+              loading: widget.loading,
+              glassmorphism,
+              onAction: (action, data) => onWidgetAction?.(widget.id, action, data)
+            }
+          );
+        case "activity":
+          return /* @__PURE__ */ jsx(
+            ActivityFeed,
+            {
+              items: widget.data?.items || [],
+              title: widget.title,
+              loading: widget.loading,
+              glassmorphism,
+              realtime: widget.data?.realtime,
+              onAction: (action, data) => onWidgetAction?.(widget.id, action, data)
+            }
+          );
+        case "table":
+        case "map":
+        case "calendar":
+        case "progress":
+        case "comparison":
+          return /* @__PURE__ */ jsxs("div", { className: cn(
+            "h-full p-4 rounded-lg border",
+            glassmorphism ? "bg-background/60 backdrop-blur-md border-white/10" : "bg-card"
+          ), children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-2", children: widget.title }),
+            widget.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: widget.description }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-32 text-muted-foreground", children: /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+              widget.type,
+              " widget content"
+            ] }) })
+          ] });
+        default:
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: [
+            "Widget type not supported: ",
+            widget.type
+          ] });
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: cn(
+          "relative group h-full",
+          isFullscreen && "!fixed !inset-4 !z-50 !h-auto !w-auto"
+        ),
+        layout: !isFullscreen,
+        transition: { duration: 0.2 },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "h-full", children: widgetContent() }),
+          editMode && !isFullscreen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              className: "absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity",
+              children: /* @__PURE__ */ jsxs("div", { className: cn(
+                "flex items-center gap-1 p-1 rounded-lg",
+                glassmorphism ? "bg-background/80 backdrop-blur-sm" : "bg-background/95",
+                "border shadow-sm"
+              ), children: [
+                !isLocked && /* @__PURE__ */ jsx("div", { className: "drag-handle cursor-move p-1 hover:bg-muted rounded", children: /* @__PURE__ */ jsx(Grip, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0",
+                    onClick: () => toggleWidgetLock(widget.id),
+                    children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Unlock, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0",
+                    onClick: () => toggleFullscreen(widget.id),
+                    children: /* @__PURE__ */ jsx(Maximize2, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0",
+                    onClick: () => onWidgetAction?.(widget.id, "settings"),
+                    children: /* @__PURE__ */ jsx(Settings, { className: "h-3 w-3" })
+                  }
+                ),
+                widget.permissions?.canDelete !== false && /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-6 w-6 p-0 text-destructive hover:text-destructive",
+                    onClick: () => onWidgetRemove?.(widget.id),
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                  }
+                )
+              ] })
+            }
+          ),
+          isFullscreen && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, y: -10 },
+              animate: { opacity: 1, y: 0 },
+              className: "absolute top-4 right-4 z-10",
+              children: /* @__PURE__ */ jsxs(
+                MoonUIButtonPro,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => toggleFullscreen(widget.id),
+                  children: [
+                    /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4 mr-2" }),
+                    "Exit Fullscreen"
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      },
+      widget.id
+    );
+  };
+  const isMobile = currentBreakpoint === "xs" || currentBreakpoint === "xxs" || currentBreakpoint === "sm";
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("w-full relative", className), children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: fullscreenWidget ? (
+      // Fullscreen widget
+      /* @__PURE__ */ jsx(
+        motion.div,
         {
-          variant: "outline",
-          onClick: handleRefresh,
-          disabled: refreshing,
-          children: [
-            refreshing ? /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary mr-2" }) : /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 mr-2" }),
-            "Refresh"
-          ]
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          className: "fixed inset-0 z-40 bg-background",
+          children: widgets.filter((w2) => w2.id === fullscreenWidget).map(renderWidget)
         }
       )
+    ) : isMobile ? (
+      // Mobile layout - Grid Layout yerine normal flex kullan
+      /* @__PURE__ */ jsx("div", { className: "space-y-6", children: widgets.map((widget) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.3 },
+          className: "w-full",
+          children: renderWidget(widget)
+        },
+        widget.id
+      )) })
+    ) : (
+      // Desktop Grid layout
+      /* @__PURE__ */ jsx(
+        ResponsiveGridLayout,
+        {
+          className: "layout",
+          layouts: layouts.lg ? layouts : generateResponsiveLayouts(),
+          breakpoints,
+          cols,
+          rowHeight: currentBreakpoint === "xs" || currentBreakpoint === "xxs" ? 60 : currentBreakpoint === "sm" ? 70 : rowHeight,
+          margin: currentBreakpoint === "xs" || currentBreakpoint === "xxs" ? [12, 20] : margin,
+          containerPadding: currentBreakpoint === "xs" || currentBreakpoint === "xxs" ? [8, 8] : containerPadding,
+          onLayoutChange: (layout, allLayouts) => {
+            setLayouts(allLayouts);
+            onLayoutChange?.(layout);
+          },
+          onBreakpointChange: (breakpoint) => {
+            setCurrentBreakpoint(breakpoint);
+            if (breakpoint === "xs" || breakpoint === "xxs" || breakpoint === "sm") {
+              setCompactType("vertical");
+            } else {
+              setCompactType("vertical");
+            }
+          },
+          draggableHandle: ".drag-handle",
+          isDraggable: editMode,
+          isResizable: editMode,
+          compactType,
+          preventCollision: false,
+          useCSSTransforms: true,
+          transformScale: 1,
+          isDroppable: true,
+          autoSize: true,
+          verticalCompact: true,
+          children: widgets.map((widget) => /* @__PURE__ */ jsx("div", { children: renderWidget(widget) }, widget.id))
+        }
+      )
+    ) }),
+    editMode && !fullscreenWidget && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 0.1 },
+        className: "absolute inset-0 pointer-events-none",
+        style: {
+          backgroundImage: `
+              repeating-linear-gradient(
+                0deg,
+                var(--border) 0px,
+                transparent 1px,
+                transparent ${rowHeight + margin[1]}px,
+                var(--border) ${rowHeight + margin[1]}px
+              ),
+              repeating-linear-gradient(
+                90deg,
+                var(--border) 0px,
+                transparent 1px,
+                transparent ${100 / cols[currentBreakpoint]}%,
+                var(--border) ${100 / cols[currentBreakpoint]}%
+              )
+            `
+        }
+      }
+    )
+  ] });
+}
+var PRESET_RANGES = [
+  {
+    label: "Today",
+    value: "today",
+    getRange: () => ({
+      start: startOfDay(/* @__PURE__ */ new Date()),
+      end: endOfDay(/* @__PURE__ */ new Date()),
+      label: "Today",
+      preset: "today"
+    })
+  },
+  {
+    label: "Yesterday",
+    value: "yesterday",
+    getRange: () => ({
+      start: startOfDay(subDays(/* @__PURE__ */ new Date(), 1)),
+      end: endOfDay(subDays(/* @__PURE__ */ new Date(), 1)),
+      label: "Yesterday",
+      preset: "yesterday"
+    })
+  },
+  {
+    label: "Last 7 days",
+    value: "last7days",
+    getRange: () => ({
+      start: startOfDay(subDays(/* @__PURE__ */ new Date(), 6)),
+      end: endOfDay(/* @__PURE__ */ new Date()),
+      label: "Last 7 days",
+      preset: "last7days"
+    })
+  },
+  {
+    label: "Last 30 days",
+    value: "last30days",
+    getRange: () => ({
+      start: startOfDay(subDays(/* @__PURE__ */ new Date(), 29)),
+      end: endOfDay(/* @__PURE__ */ new Date()),
+      label: "Last 30 days",
+      preset: "last30days"
+    })
+  },
+  {
+    label: "This week",
+    value: "thisWeek",
+    getRange: () => ({
+      start: startOfWeek(/* @__PURE__ */ new Date()),
+      end: endOfWeek(/* @__PURE__ */ new Date()),
+      label: "This week",
+      preset: "custom"
+    })
+  },
+  {
+    label: "This month",
+    value: "thisMonth",
+    getRange: () => ({
+      start: startOfMonth(/* @__PURE__ */ new Date()),
+      end: endOfMonth(/* @__PURE__ */ new Date()),
+      label: "This month",
+      preset: "thisMonth"
+    })
+  },
+  {
+    label: "Last month",
+    value: "lastMonth",
+    getRange: () => {
+      const lastMonth = subDays(startOfMonth(/* @__PURE__ */ new Date()), 1);
+      return {
+        start: startOfMonth(lastMonth),
+        end: endOfMonth(lastMonth),
+        label: "Last month",
+        preset: "lastMonth"
+      };
+    }
+  }
+];
+function TimeRangePicker({
+  value,
+  onChange,
+  className,
+  showPresets = true,
+  showComparison = false,
+  glassmorphism = false
+}) {
+  const [isOpen, setIsOpen] = t__default.useState(false);
+  const [customRange, setCustomRange] = t__default.useState({});
+  const [comparisonEnabled, setComparisonEnabled] = t__default.useState(false);
+  const currentRange = value || PRESET_RANGES[2].getRange();
+  const formatRange = (range) => {
+    if (range.preset && range.preset !== "custom") {
+      return range.label;
+    }
+    return `${format(range.start, "MMM d")} - ${format(range.end, "MMM d, yyyy")}`;
+  };
+  const handlePresetSelect = (preset) => {
+    const range = preset.getRange();
+    onChange?.(range);
+    setIsOpen(false);
+  };
+  const handleCustomRangeSelect = () => {
+    if (customRange.from && customRange.to) {
+      onChange?.({
+        start: startOfDay(customRange.from),
+        end: endOfDay(customRange.to),
+        label: `${format(customRange.from, "MMM d")} - ${format(customRange.to, "MMM d, yyyy")}`,
+        preset: "custom"
+      });
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(MoonUIPopoverPro, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+      MoonUIButtonPro,
+      {
+        variant: "outline",
+        className: cn(
+          "justify-start text-left font-normal",
+          glassmorphism && "bg-background/60 backdrop-blur-sm border-white/10",
+          !value && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          formatRange(currentRange),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-4 w-4 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MoonUIPopoverContentPro,
+      {
+        className: cn(
+          "w-auto p-0",
+          glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
+        ),
+        align: "end",
+        side: "bottom",
+        sideOffset: 4,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: -10 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.2 },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+              showPresets && /* @__PURE__ */ jsxs("div", { className: "border-r p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-2", children: [
+                  /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Quick Select" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-1", children: PRESET_RANGES.map((preset) => /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    whileHover: { x: 2 },
+                    whileTap: { scale: 0.98 },
+                    onClick: () => handlePresetSelect(preset),
+                    className: cn(
+                      "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                      "hover:bg-muted",
+                      currentRange.preset === preset.value && "bg-primary text-primary-foreground"
+                    ),
+                    children: preset.label
+                  },
+                  preset.value
+                )) }),
+                showComparison && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t", children: /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 px-2 cursor-pointer", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: comparisonEnabled,
+                      onChange: (e) => setComparisonEnabled(e.target.checked),
+                      className: "rounded"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Compare to previous period" })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 pb-2", children: [
+                  /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: "Custom Range" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    mode: "range",
+                    selected: {
+                      from: customRange.from,
+                      to: customRange.to
+                    },
+                    onSelect: (range) => setCustomRange(range || {}),
+                    numberOfMonths: 2,
+                    className: "rounded-md"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-3 px-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: customRange.from && customRange.to && /* @__PURE__ */ jsxs("span", { children: [
+                    Math.ceil((customRange.to.getTime() - customRange.from.getTime()) / (1e3 * 60 * 60 * 24)),
+                    " days selected"
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      MoonUIButtonPro,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: () => {
+                          setCustomRange({});
+                          setIsOpen(false);
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      MoonUIButtonPro,
+                      {
+                        size: "sm",
+                        onClick: handleCustomRangeSelect,
+                        disabled: !customRange.from || !customRange.to,
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+var DASHBOARD_TEMPLATES = [
+  {
+    id: "analytics",
+    name: "Analytics Dashboard",
+    description: "Comprehensive analytics with metrics and charts",
+    category: "analytics",
+    theme: "analytics",
+    widgets: [
+      {
+        type: "metric",
+        title: "Total Revenue",
+        size: { w: 3, h: 2 },
+        position: { x: 0, y: 0 },
+        data: {
+          id: "revenue",
+          title: "Total Revenue",
+          value: 125430,
+          change: { value: 12, type: "increase", period: "last month" },
+          color: "success",
+          icon: /* @__PURE__ */ jsx(DollarSign, { className: "h-4 w-4" }),
+          sparkline: [100, 120, 115, 125, 130, 128, 132],
+          unit: "$"
+        }
+      },
+      {
+        type: "metric",
+        title: "Active Users",
+        size: { w: 3, h: 2 },
+        position: { x: 3, y: 0 },
+        data: {
+          id: "users",
+          title: "Active Users",
+          value: 2543,
+          change: { value: 8, type: "increase", period: "last week" },
+          color: "primary",
+          icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
+          sparkline: [200, 220, 210, 230, 225, 240, 254]
+        }
+      },
+      {
+        type: "chart",
+        title: "Revenue Trend",
+        size: { w: 6, h: 4 },
+        position: { x: 0, y: 2 },
+        data: {
+          type: "area",
+          data: [
+            { name: "Jan", revenue: 4e3, profit: 2400 },
+            { name: "Feb", revenue: 3e3, profit: 1398 },
+            { name: "Mar", revenue: 5e3, profit: 3200 },
+            { name: "Apr", revenue: 4500, profit: 2900 },
+            { name: "May", revenue: 6e3, profit: 3800 },
+            { name: "Jun", revenue: 5500, profit: 3400 }
+          ]
+        }
+      },
+      {
+        type: "activity",
+        title: "Recent Activity",
+        size: { w: 3, h: 6 },
+        position: { x: 9, y: 0 },
+        data: {
+          realtime: true,
+          items: [
+            {
+              id: "1",
+              type: "success",
+              title: "completed a purchase",
+              description: "Order #12345 - $250.00",
+              timestamp: new Date(Date.now() - 1e3 * 60 * 5),
+              user: { name: "John Doe" }
+            },
+            {
+              id: "2",
+              type: "info",
+              title: "signed up",
+              description: "New user registration",
+              timestamp: new Date(Date.now() - 1e3 * 60 * 15),
+              user: { name: "Jane Smith" }
+            }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    id: "sales",
+    name: "Sales Dashboard",
+    description: "Track sales performance and targets",
+    category: "sales",
+    theme: "sales",
+    widgets: [
+      // Sales-specific widgets
+    ]
+  },
+  {
+    id: "monitoring",
+    name: "System Monitoring",
+    description: "Monitor system health and performance",
+    category: "operations",
+    theme: "monitoring",
+    widgets: [
+      // Monitoring widgets
+    ]
+  }
+];
+var WIDGET_TYPE_ICONS = {
+  metric: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+  chart: /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4" }),
+  table: /* @__PURE__ */ jsx(Table$1, { className: "h-4 w-4" }),
+  map: /* @__PURE__ */ jsx(Map$1, { className: "h-4 w-4" }),
+  activity: /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
+  calendar: /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" }),
+  progress: /* @__PURE__ */ jsx(Target, { className: "h-4 w-4" }),
+  comparison: /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" })
+};
+var THEME_COLORS = {
+  analytics: "from-blue-500/10 to-purple-500/10",
+  sales: "from-green-500/10 to-emerald-500/10",
+  monitoring: "from-orange-500/10 to-red-500/10",
+  finance: "from-indigo-500/10 to-blue-500/10",
+  custom: "from-gray-500/10 to-gray-600/10"
+};
+function Dashboard({
+  config,
+  widgets: initialWidgets = [],
+  templates = DASHBOARD_TEMPLATES,
+  onConfigChange,
+  onWidgetAdd,
+  onWidgetRemove,
+  onWidgetUpdate,
+  onExport,
+  onImport,
+  className,
+  showHeader = true,
+  title = "Dashboard",
+  description = "Real-time analytics and insights",
+  editable = true,
+  realtime = false,
+  glassmorphism = true
+}) {
+  const [editMode, setEditMode] = t__default.useState(false);
+  const [widgets, setWidgets] = t__default.useState(initialWidgets);
+  const [selectedTheme, setSelectedTheme] = t__default.useState("analytics");
+  const [timeRange, setTimeRange] = t__default.useState();
+  const [searchQuery, setSearchQuery] = t__default.useState("");
+  const [showWidgetLibrary, setShowWidgetLibrary] = t__default.useState(false);
+  const [showTemplates, setShowTemplates] = t__default.useState(false);
+  const [refreshing, setRefreshing] = t__default.useState(false);
+  const [notifications, setNotifications] = t__default.useState(3);
+  t__default.useEffect(() => {
+    setWidgets(initialWidgets);
+  }, [initialWidgets]);
+  t__default.useEffect(() => {
+    if (!realtime)
+      return;
+    const interval = setInterval(() => {
+      setWidgets((prev) => prev.map((widget) => {
+        if (widget.type === "metric" && widget.data) {
+          const newValue = typeof widget.data.value === "number" ? widget.data.value + Math.floor(Math.random() * 10 - 5) : widget.data.value;
+          return {
+            ...widget,
+            data: {
+              ...widget.data,
+              value: newValue,
+              lastUpdated: /* @__PURE__ */ new Date()
+            }
+          };
+        }
+        return widget;
+      }));
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [realtime]);
+  const handleAddWidget = (type) => {
+    const newWidget = {
+      id: `widget-${Date.now()}`,
+      type,
+      title: `New ${type} Widget`,
+      size: { w: 3, h: 3 },
+      position: { x: 0, y: 0 },
+      data: generateDefaultData(type)
+    };
+    setWidgets((prev) => [...prev, newWidget]);
+    onWidgetAdd?.(newWidget);
+    setShowWidgetLibrary(false);
+  };
+  const applyTemplate = (template) => {
+    const newWidgets = template.widgets.map((w2, index) => ({
+      ...w2,
+      id: `widget-${Date.now()}-${index}`,
+      position: w2.position || { x: index * 3 % 12, y: Math.floor(index * 3 / 12) * 3 },
+      size: w2.size || { w: 3, h: 3 }
+    }));
+    setWidgets(newWidgets);
+    setSelectedTheme(template.theme);
+    setShowTemplates(false);
+  };
+  const generateDefaultData = (type) => {
+    switch (type) {
+      case "metric":
+        return {
+          id: "new-metric",
+          title: "New Metric",
+          value: 0,
+          icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+          color: "primary"
+        };
+      case "chart":
+        return {
+          type: "line",
+          data: [
+            { name: "Mon", value: 100 },
+            { name: "Tue", value: 120 },
+            { name: "Wed", value: 110 },
+            { name: "Thu", value: 130 },
+            { name: "Fri", value: 125 }
+          ]
+        };
+      case "activity":
+        return {
+          items: [],
+          realtime: true
+        };
+      default:
+        return {};
+    }
+  };
+  const WidgetLibrary = () => /* @__PURE__ */ jsx(Sheet, { open: showWidgetLibrary, onOpenChange: setShowWidgetLibrary, children: /* @__PURE__ */ jsxs(SheetContent, { className: cn(
+    "w-[400px] sm:w-[540px]",
+    glassmorphism && "bg-background/95 backdrop-blur-md"
+  ), children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: "Widget Library" }),
+      /* @__PURE__ */ jsx(SheetDescription, { children: "Add widgets to customize your dashboard" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: displayMetrics.map(renderMetricCard) }),
-    widgets.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: widgets.map(renderWidget) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-4 border-t", children: [
-      /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
-        "Export Data"
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-3 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          MoonUIInputPro,
+          {
+            placeholder: "Search widgets...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "pl-10"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 mr-2" }),
-        "Schedule Report"
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-200px)]", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: Object.entries(WIDGET_TYPE_ICONS).filter(([type]) => type.toLowerCase().includes(searchQuery.toLowerCase())).map(([type, icon]) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          whileHover: { scale: 1.02 },
+          whileTap: { scale: 0.98 },
+          children: /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              className: "w-full h-24 flex-col gap-2",
+              onClick: () => handleAddWidget(type),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-muted", children: icon }),
+                /* @__PURE__ */ jsx("span", { className: "capitalize text-sm", children: type })
+              ]
+            }
+          )
+        },
+        type
+      )) }) })
+    ] })
+  ] }) });
+  const TemplateGallery = () => /* @__PURE__ */ jsx(MoonUIDialogPro, { open: showTemplates, onOpenChange: setShowTemplates, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: cn(
+    "max-w-4xl",
+    glassmorphism && "bg-background/95 backdrop-blur-md"
+  ), children: [
+    /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+      /* @__PURE__ */ jsx(MoonUIDialogTitlePro, { children: "Dashboard Templates" }),
+      /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Start with a pre-built template or create your own" })
+    ] }),
+    /* @__PURE__ */ jsxs(MoonUITabsPro, { defaultValue: "all", className: "mt-4", children: [
+      /* @__PURE__ */ jsxs(MoonUITabsListPro, { children: [
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "all", children: "All Templates" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "analytics", children: "Analytics" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "sales", children: "Sales" }),
+        /* @__PURE__ */ jsx(MoonUITabsTriggerPro, { value: "operations", children: "Operations" })
       ] }),
-      /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-        /* @__PURE__ */ jsx(Star, { className: "h-4 w-4 mr-2" }),
-        "Save View"
-      ] })
+      /* @__PURE__ */ jsx(MoonUITabsContentPro, { value: "all", className: "mt-4", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4", children: templates.map((template) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          whileHover: { y: -4 },
+          className: "cursor-pointer",
+          onClick: () => applyTemplate(template),
+          children: /* @__PURE__ */ jsxs("div", { className: cn(
+            "relative overflow-hidden rounded-lg border p-4 hover:shadow-lg transition-all",
+            "bg-gradient-to-br",
+            THEME_COLORS[template.theme]
+          ), children: [
+            template.isPro && /* @__PURE__ */ jsx(MoonUIBadgePro, { className: "absolute top-2 right-2", variant: "secondary", children: "PRO" }),
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-1", children: template.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: template.description }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                template.widgets.length,
+                " widgets"
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { className: "capitalize", children: template.category })
+            ] })
+          ] })
+        },
+        template.id
+      )) }) })
     ] })
-  ] });
+  ] }) });
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: cn(
+        "w-full min-h-screen",
+        glassmorphism && "bg-gradient-to-br",
+        glassmorphism && THEME_COLORS[selectedTheme],
+        className
+      ),
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.5 },
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: cn(
+              "sticky top-0 z-30 border-b",
+              glassmorphism ? "bg-background/80 backdrop-blur-md" : "bg-background"
+            ),
+            initial: { y: -50 },
+            animate: { y: 0 },
+            transition: { type: "spring", stiffness: 300, damping: 30 },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      whileHover: { scale: 1.05 },
+                      whileTap: { scale: 0.95 },
+                      children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "lg:hidden", children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+                      realtime && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "animate-pulse", children: [
+                        /* @__PURE__ */ jsx("span", { className: "mr-1 h-1.5 w-1.5 rounded-full bg-green-500" }),
+                        "Real-time"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    TimeRangePicker,
+                    {
+                      value: timeRange,
+                      onChange: setTimeRange,
+                      glassmorphism
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "relative", children: [
+                    /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
+                    notifications > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center", children: notifications })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" }) }) }),
+                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setSelectedTheme("analytics"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-gradient-to-br from-blue-500 to-purple-500" }),
+                        "Analytics"
+                      ] }) }),
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setSelectedTheme("sales"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-gradient-to-br from-green-500 to-emerald-500" }),
+                        "Sales"
+                      ] }) }),
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => setSelectedTheme("monitoring"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-gradient-to-br from-orange-500 to-red-500" }),
+                        "Monitoring"
+                      ] }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
+                      /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 mr-2" }),
+                      "Actions"
+                    ] }) }),
+                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", className: "w-48", children: [
+                      editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setEditMode(!editMode), children: [
+                          /* @__PURE__ */ jsx(Edit3, { className: "mr-2 h-4 w-4" }),
+                          editMode ? "Exit Edit Mode" : "Edit Layout"
+                        ] }),
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setShowWidgetLibrary(true), children: [
+                          /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+                          "Add Widget"
+                        ] }),
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setShowTemplates(true), children: [
+                          /* @__PURE__ */ jsx(LayoutGrid, { className: "mr-2 h-4 w-4" }),
+                          "Templates"
+                        ] }),
+                        /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
+                      ] }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubPro, { children: [
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { children: [
+                          /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }),
+                          "Export"
+                        ] }),
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubContentPro, { children: [
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => onExport?.("json"), children: "As JSON" }),
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => onExport?.("pdf"), children: "As PDF" }),
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuItemPro, { onClick: () => onExport?.("png"), children: "As Image" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
+                        /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }),
+                        "Import"
+                      ] }),
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {}),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => setRefreshing(true), children: [
+                        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+                        "Refresh Data"
+                      ] }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
+                        /* @__PURE__ */ jsx(Share2, { className: "mr-2 h-4 w-4" }),
+                        "Share Dashboard"
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: editMode && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: { height: "auto", opacity: 1 },
+                  exit: { height: 0, opacity: 0 },
+                  className: "bg-primary/10 border-t border-primary/20",
+                  children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-2 flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                      /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-primary" }),
+                      /* @__PURE__ */ jsx("span", { children: "Edit mode enabled - Drag widgets to rearrange" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxs(
+                        MoonUIButtonPro,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          onClick: () => setEditMode(false),
+                          children: [
+                            /* @__PURE__ */ jsx(X, { className: "h-4 w-4 mr-1" }),
+                            "Cancel"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        MoonUIButtonPro,
+                        {
+                          variant: "primary",
+                          size: "sm",
+                          onClick: () => {
+                            setEditMode(false);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-1" }),
+                            "Save Changes"
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "p-6", children: widgets.length === 0 ? (
+          // Empty state
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.9 },
+              animate: { opacity: 1, scale: 1 },
+              className: "flex flex-col items-center justify-center min-h-[400px] text-center",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: cn(
+                  "p-4 rounded-full mb-4",
+                  glassmorphism ? "bg-background/60 backdrop-blur-sm" : "bg-muted"
+                ), children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-8 w-8 text-muted-foreground" }) }),
+                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "No widgets added yet" }),
+                /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-4", children: "Start by adding widgets or choosing a template" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxs(MoonUIButtonPro, { onClick: () => setShowWidgetLibrary(true), children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                    "Add Widget"
+                  ] }),
+                  /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", onClick: () => setShowTemplates(true), children: [
+                    /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4 mr-2" }),
+                    "Browse Templates"
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ) : (
+          // Dashboard grid
+          /* @__PURE__ */ jsx(
+            DashboardGrid,
+            {
+              widgets,
+              onLayoutChange: (layout) => {
+                const updatedWidgets = widgets.map((widget) => {
+                  const layoutItem = layout.find((l) => l.i === widget.id);
+                  if (layoutItem) {
+                    return {
+                      ...widget,
+                      position: { x: layoutItem.x, y: layoutItem.y },
+                      size: { ...widget.size, w: layoutItem.w, h: layoutItem.h }
+                    };
+                  }
+                  return widget;
+                });
+                setWidgets(updatedWidgets);
+              },
+              onWidgetRemove: (widgetId) => {
+                setWidgets((prev) => prev.filter((w2) => w2.id !== widgetId));
+                onWidgetRemove?.(widgetId);
+              },
+              onWidgetAction: (widgetId, action, data) => {
+                console.log("Widget action:", widgetId, action, data);
+              },
+              editMode,
+              glassmorphism
+            }
+          )
+        ) }),
+        /* @__PURE__ */ jsx(WidgetLibrary, {}),
+        /* @__PURE__ */ jsx(TemplateGallery, {})
+      ]
+    }
+  );
 }
 function DraggableList({
   items,
@@ -51371,7 +53328,7 @@ var OptimizedImageInternal = ({
   width,
   height,
   quality = 75,
-  format = "auto",
+  format: format2 = "auto",
   lazy = true,
   blur: blur2 = true,
   priority = false,
@@ -51410,7 +53367,7 @@ var OptimizedImageInternal = ({
       params.set("f", options.format);
     return optimizedUrl;
   };
-  const optimizedSrc = getOptimizedSrc(src, { width, height, quality, format });
+  const optimizedSrc = getOptimizedSrc(src, { width, height, quality, format: format2 });
   const handleImageLoad = () => {
     setIsLoaded(true);
     setIsLoading(false);
@@ -51574,7 +53531,7 @@ var OptimizedImageInternal = ({
                   ] }),
                   /* @__PURE__ */ jsxs("div", { children: [
                     "Format: ",
-                    format
+                    format2
                   ] })
                 ]
               }
@@ -53475,11 +55432,11 @@ function downloadFile(content, filename, mimeType) {
   URL.revokeObjectURL(url);
 }
 async function exportData(data, options) {
-  const { format, filename = "data-export", columns, includeHeaders = true } = options;
+  const { format: format2, filename = "data-export", columns, includeHeaders = true } = options;
   let content;
   let mimeType;
   let extension;
-  switch (format) {
+  switch (format2) {
     case "csv":
       content = dataToCSV(data, columns, includeHeaders);
       mimeType = "text/csv;charset=utf-8;";
@@ -53493,7 +55450,7 @@ async function exportData(data, options) {
     case "xlsx":
       throw new Error("XLSX export requires additional dependencies. Use CSV format instead.");
     default:
-      throw new Error(`Unsupported export format: ${format}`);
+      throw new Error(`Unsupported export format: ${format2}`);
   }
   const finalFilename = `${filename}-${( new Date()).toISOString().split("T")[0]}.${extension}`;
   downloadFile(content, finalFilename, mimeType);
@@ -53976,11 +55933,11 @@ function DataTable({
     rowSelection: features.rowSelection !== false || selectable,
     export: features.export !== false || exportable
   });
-  const handleExport = async (format) => {
+  const handleExport = async (format2) => {
     const selectedRows = table.getFilteredSelectedRowModel().rows;
     const dataToExport = selectedRows.length > 0 ? selectedRows.map((row) => row.original) : table.getFilteredRowModel().rows.map((row) => row.original);
     if (typeof exportable === "object" && exportable.onExport) {
-      exportable.onExport(dataToExport, format);
+      exportable.onExport(dataToExport, format2);
       return;
     }
     if (onExport) {
@@ -53990,7 +55947,7 @@ function DataTable({
     const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
     const visibleColumns = getVisibleColumns(columns, columnVisibility);
     await exportData(dataToExport, {
-      format,
+      format: format2,
       filename,
       columns: visibleColumns,
       includeHeaders: true
@@ -54349,6 +56306,355 @@ var TableRow2 = t__default.memo(({
   return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
 });
 TableRow2.displayName = "TableRow";
+function Sidebar({
+  sections,
+  footer,
+  showSearch = true,
+  searchPlaceholder = "Search...",
+  onSearchChange,
+  showThemeToggle = false,
+  theme = "system",
+  onThemeChange,
+  branding,
+  collapsible = true,
+  defaultCollapsed = false,
+  floatingActionButton = true,
+  glassmorphism = false,
+  animatedBackground = false,
+  keyboardShortcuts = true,
+  persistState = true,
+  onStateChange,
+  customStyles,
+  className,
+  activePath,
+  onNavigate
+}) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [expandedSections, setExpandedSections] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [pinnedItems, setPinnedItems] = useState([]);
+  const searchInputRef = useRef(null);
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const springX = useSpring(mouseX, { stiffness: 300, damping: 30 });
+  const springY = useSpring(mouseY, { stiffness: 300, damping: 30 });
+  useEffect(() => {
+    if (persistState && typeof window !== "undefined") {
+      const savedState = localStorage.getItem("moonui-sidebar-state");
+      if (savedState) {
+        const state = JSON.parse(savedState);
+        setCollapsed(state.collapsed);
+        setExpandedSections(state.expandedSections);
+        setPinnedItems(state.pinnedItems || []);
+      }
+    }
+  }, [persistState]);
+  useEffect(() => {
+    if (persistState && typeof window !== "undefined") {
+      const state = {
+        collapsed,
+        expandedSections,
+        searchQuery,
+        pinnedItems,
+        recentItems: []
+      };
+      localStorage.setItem("moonui-sidebar-state", JSON.stringify(state));
+      onStateChange?.(state);
+    }
+  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, onStateChange]);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect(() => {
+    const sectionsToExpand = sections.filter((section) => section.defaultExpanded !== false).map((section) => section.id);
+    setExpandedSections(sectionsToExpand);
+  }, [sections]);
+  useEffect(() => {
+    if (!keyboardShortcuts)
+      return;
+    const handleKeyDown3 = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === "b") {
+        e.preventDefault();
+        if (isMobile) {
+          setIsOpen(!isOpen);
+        } else {
+          setCollapsed(!collapsed);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown3);
+    return () => document.removeEventListener("keydown", handleKeyDown3);
+  }, [keyboardShortcuts, isMobile, isOpen, collapsed]);
+  useEffect(() => {
+    if (!animatedBackground)
+      return;
+    const handleMouseMove2 = (e) => {
+      const rect = document.querySelector(".sidebar-container")?.getBoundingClientRect();
+      if (rect) {
+        mouseX.set(e.clientX - rect.left);
+        mouseY.set(e.clientY - rect.top);
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove2);
+    return () => document.removeEventListener("mousemove", handleMouseMove2);
+  }, [animatedBackground, mouseX, mouseY]);
+  const toggleSection = (sectionId) => {
+    setExpandedSections(
+      (prev) => prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId]
+    );
+  };
+  const handleItemClick = (item) => {
+    if (item.action) {
+      item.action();
+    } else if (item.href && onNavigate) {
+      onNavigate(item.href);
+      if (isMobile) {
+        setIsOpen(false);
+      }
+    }
+  };
+  const filterItems = (items, query) => {
+    if (!query)
+      return items;
+    return items.filter((item) => {
+      const matchesTitle = item.title.toLowerCase().includes(query.toLowerCase());
+      const hasMatchingChildren = item.items?.some(
+        (child) => child.title.toLowerCase().includes(query.toLowerCase())
+      );
+      return matchesTitle || hasMatchingChildren;
+    });
+  };
+  const renderItem = (item, depth = 0) => {
+    const isActive2 = item.href === activePath;
+    const isPinned = pinnedItems.includes(item.id);
+    const hasChildren = item.items && item.items.length > 0;
+    const isExpanded = expandedSections.includes(item.id);
+    const ItemWrapper = item.tooltip && !collapsed ? MoonUITooltipTriggerPro : t__default.Fragment;
+    const itemContent = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          if (hasChildren) {
+            toggleSection(item.id);
+          } else {
+            handleItemClick(item);
+          }
+        },
+        className: cn(
+          "w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all",
+          "hover:bg-accent hover:text-accent-foreground",
+          isActive2 && "bg-primary/10 text-primary font-medium",
+          item.disabled && "opacity-50 cursor-not-allowed",
+          depth > 0 && "ml-6 text-xs",
+          collapsed && depth === 0 && "justify-center px-2",
+          customStyles?.hover
+        ),
+        disabled: item.disabled,
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: cn(
+            "flex-shrink-0",
+            collapsed && depth === 0 && "mx-auto"
+          ), children: item.icon }),
+          (!collapsed || depth > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: item.title }),
+            item.badge && /* @__PURE__ */ jsx(
+              MoonUIBadgePro,
+              {
+                variant: item.badgeVariant || "secondary",
+                className: "ml-auto flex-shrink-0",
+                children: item.badge
+              }
+            ),
+            hasChildren && depth === 0 && /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 flex-shrink-0 transition-transform",
+                  isExpanded && "rotate-180"
+                )
+              }
+            ),
+            isPinned && /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3 flex-shrink-0" })
+          ] })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { children: [
+      item.tooltip && !collapsed ? /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
+        /* @__PURE__ */ jsx(ItemWrapper, { children: itemContent }),
+        /* @__PURE__ */ jsx(MoonUITooltipContentPro, { side: "right", children: /* @__PURE__ */ jsx("p", { children: item.tooltip }) })
+      ] }) }) : itemContent,
+      hasChildren && !collapsed && /* @__PURE__ */ jsx(AnimatePresence, { children: isExpanded && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: { duration: 0.2 },
+          className: "overflow-hidden",
+          children: /* @__PURE__ */ jsx("div", { className: "pt-1 space-y-1", children: filterItems(item.items, searchQuery).map(
+            (child) => renderItem(child, depth + 1)
+          ) })
+        }
+      ) })
+    ] }, item.id);
+  };
+  const SidebarContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex items-center gap-3 p-4 border-b",
+      collapsed && !isMobile && "justify-center px-2"
+    ), children: [
+      branding && /* @__PURE__ */ jsxs(Fragment, { children: [
+        branding.logo,
+        (!collapsed || isMobile) && branding.title && /* @__PURE__ */ jsx("span", { className: "font-semibold text-lg", children: branding.title })
+      ] }),
+      isMobile && /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "ml-auto h-8 w-8 p-0",
+          onClick: () => setIsOpen(false),
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      ),
+      !isMobile && collapsible && /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: cn(
+            "h-8 w-8 p-0",
+            !collapsed && "ml-auto"
+          ),
+          onClick: () => setCollapsed(!collapsed),
+          children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        MoonUIInputPro,
+        {
+          ref: searchInputRef,
+          type: "search",
+          placeholder: searchPlaceholder,
+          value: searchQuery,
+          onChange: (e) => {
+            setSearchQuery(e.target.value);
+            onSearchChange?.(e.target.value);
+          },
+          className: "pl-9 pr-9"
+        }
+      ),
+      keyboardShortcuts && /* @__PURE__ */ jsxs("kbd", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
+        "K"
+      ] })
+    ] }) }),
+    pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "p-4 border-b", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Pinned" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.flatMap(
+        (section) => section.items.filter((item) => pinnedItems.includes(item.id))
+      ).map((item) => renderItem(item)) })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6", children: sections.map((section, index) => {
+      const filteredItems = filterItems(section.items, searchQuery);
+      if (filteredItems.length === 0)
+        return null;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredItems.map((item) => renderItem(item)) }),
+        section.showDivider && index < sections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+      ] }, section.id);
+    }) }) }),
+    footer && /* @__PURE__ */ jsxs("div", { className: "border-t p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: footer.items.map((item) => renderItem(item)) }),
+      showThemeToggle && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Theme" }),
+        /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-7 px-2", children: [
+            theme === "light" && /* @__PURE__ */ jsx(Sun, { className: "h-3 w-3" }),
+            theme === "dark" && /* @__PURE__ */ jsx(Moon, { className: "h-3 w-3" }),
+            theme === "system" && /* @__PURE__ */ jsx(Monitor, { className: "h-3 w-3" })
+          ] }) }),
+          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("light"), children: [
+              /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }),
+              "Light"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("dark"), children: [
+              /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }),
+              "Dark"
+            ] }),
+            /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onThemeChange?.("system"), children: [
+              /* @__PURE__ */ jsx(Monitor, { className: "mr-2 h-4 w-4" }),
+              "System"
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+  const sidebarClasses = cn(
+    "flex h-screen flex-col bg-background border-r sticky top-0",
+    glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
+    collapsed && !isMobile && "w-16",
+    !collapsed && !isMobile && "w-64",
+    customStyles?.background,
+    customStyles?.border,
+    className
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      floatingActionButton && /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          onClick: () => setIsOpen(true),
+          className: "fixed bottom-4 left-4 z-40 h-12 w-12 rounded-full shadow-lg md:hidden",
+          size: "icon",
+          children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "sidebar-container"), children: [
+        animatedBackground && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 opacity-30",
+            style: {
+              background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(SidebarContent, {})
+      ] }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex"), children: [
+    animatedBackground && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute inset-0 opacity-30",
+        style: {
+          background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(SidebarContent, {})
+  ] });
+}
 
 // src/components/enhanced/index.ts
 var enhanced_exports = {};
@@ -54366,7 +56672,7 @@ __export(enhanced_exports, {
   DialogProFooter: () => DialogProFooter,
   DialogProHeader: () => DialogProHeader,
   DialogProTitle: () => DialogProTitle,
-  DialogProTrigger: () => DialogTrigger,
+  DialogProTrigger: () => DialogTrigger2,
   EnhancedCardDescription: () => EnhancedCardDescription,
   EnhancedCardTitle: () => EnhancedCardTitle,
   badgeVariants: () => badgeVariants,
@@ -54899,7 +57205,7 @@ var CardProFooter = t__default.forwardRef(({ className, ...props }, ref) => /* @
 ));
 CardProFooter.displayName = "CardProFooter";
 var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
+var DialogTrigger2 = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
 var DialogProOverlay = t.forwardRef(({ className, blur: blur2 = "md", variant = "default", ...props }, ref) => {
@@ -55248,4 +57554,4 @@ var BadgePro = t__default.forwardRef(({
 });
 BadgePro.displayName = "BadgePro";
 
-export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, AdvancedChart, AdvancedForms, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIButtonPro as Button, Calendar2 as Calendar, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceDebugger, PerformanceMonitor, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, MoonUISeparatorPro as Separator, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useStreamingData, useVirtualList };
+export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, Calendar3 as AdvancedCalendar, AdvancedChart, AdvancedForms, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIButtonPro as Button, Calendar, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, GitHubStars, HealthCheck, HoverCard3D, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceDebugger, PerformanceMonitor, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, ScrollArea, ScrollBar, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, MoonUISeparatorPro as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useStreamingData, useVirtualList };