@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/tools/live-playground.tsx

@@ -0,0 +1,1458 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react"
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react"
+import { cn, } from "~/components/catalyst-ui/utils";
+import { Badge, BookOpenText, Braces, Code, Copy, Download, Eye, ListRestart, Maximize2, Minimize2, Minus, RotateCcw, RotateCw, Save, Square, SquareSplitHorizontal, TimerIcon, TimerReset, X, } from "lucide-react";
+import { LiveProvider, LiveEditor, LivePreview, LiveError, } from "react-live";
+import { ClientOnly, } from "~/utils/client-only";
+import { Editor, } from "@monaco-editor/react";
+import { Burger, Stripe, TextWrap, } from "@catalystsoftware/icons";
+
+import { Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AnimatedNumber, BlobContext, Button, calendarDayButtonVariants, calendarNavButtonVariants, calendarVariants, Card, CircleMenu, damping,  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicContainer, DynamicDescription, DynamicDiv, DynamicIsland, DynamicIslandProvider, DynamicIslandSizePresets, DynamicTitle, FeatureCarousel, filenameIconMap, FloatingPanel, FloatingPanelBody, FloatingPanelButton, FloatingPanelCloseButton, FloatingPanelContent, FloatingPanelFooter, FloatingPanelForm, FloatingPanelHeader, FloatingPanelLabel, FloatingPanelSubmitButton, FloatingPanelTextarea, FloatingPanelTrigger, GradientHeading, headingVariants, Input, IntroDisclosure, KBD, LightBoard, LoadingCarousel, LoadingPage, LogoCarousel, Modal, MorphSurface, Motion, MotionAlertDialog, MotionAlertDialogAction, MotionAlertDialogCancel, MotionAlertDialogContent, MotionAlertDialogDescription, MotionAlertDialogFooter, MotionAlertDialogHeader, MotionAlertDialogIcon, MotionAlertDialogOverlay, MotionAlertDialogPortal, MotionAlertDialogTitle, MotionAlertDialogTrigger, MotionCalendar, MotionCalendarDayButton, MotionCard, MotionCard1, MotionCard2, MotionCardContent, MotionCardFooter, MotionCardHeader, MotionCardTrigger, MotionCarousel, MotionChoicebox, MotionChoiceboxItem, MotionChoiceboxItemContent, MotionChoiceboxItemContentWrapper, MotionChoiceboxItemDescription, MotionChoiceboxItemHeader, MotionChoiceboxItemIndicator, MotionChoiceboxItemSubtitle, MotionChoiceboxItemTitle, MotionCombobox, MotionComboboxCommand, MotionComboboxEmpty, MotionComboboxGroup, MotionComboboxInput, MotionComboboxItem, MotionComboboxList, MotionCommand, MotionCommandDialog, MotionCommandEmpty, MotionCommandGroup, MotionCommandInput, MotionCommandItem, MotionCommandList, MotionCommandSeparator, MotionContent, MotionContext, MotionContextMenu, MotionContextMenuCheckboxItem, MotionContextMenuContent, MotionContextMenuGroup, MotionContextMenuItem, MotionContextMenuLabel, MotionContextMenuPortal, MotionContextMenuRadioGroup, MotionContextMenuRadioItem, MotionContextMenuSeparator, MotionContextMenuShortcut, MotionContextMenuSub, MotionContextMenuSubContent, MotionContextMenuSubTrigger, MotionContextMenuTrigger, MotionDatePicker, MotionDialog, MotionDrawer, MotionDrawer1, MotionDrawerAnimatedContent, MotionDrawerAnimatedWrapper, MotionDrawerButton, MotionDrawerClose, MotionDrawerContent, MotionDrawerHeader, MotionDrawerOverlay, MotionDrawerPortal, MotionDrawerSecondaryButton, MotionDrawerTrigger, MotionDrawerViewContent, MotionDropdownMenu, MotionDropdownMenuAnchor, MotionDropdownMenuCheckboxItem, MotionDropdownMenuContent, MotionDropdownMenuGroup, MotionDropdownMenuItem, MotionDropdownMenuLabel, MotionDropdownMenuPortal, MotionDropdownMenuRadioGroup, MotionDropdownMenuRadioItem, MotionDropdownMenuSeparator, MotionDropdownMenuShortcut, MotionDropdownMenuSub, MotionDropdownMenuSubContent, MotionDropdownMenuSubTrigger, MotionDropdownMenuTrigger, MotionFileUpload, MotionHoverCard, MotionImages, MotionNavigationMenu, MotionNavigationMenuContent, MotionNavigationMenuIndicator, MotionNavigationMenuItem, MotionNavigationMenuLink, MotionNavigationMenuList, MotionNavigationMenuTrigger, MotionNavigationMenuViewport, MotionPanel, MotionPopover, MotionScreen, MotionScreenBackground, MotionScreenContent, MotionScreenTrigger, MotionSearchBar, MotionSelect, MotionTabs, MotionTabsContent, MotionTabsList, MotionTabsTrigger, MotionToolbar, navigationMenuTriggerStyle, PopoverForm, PopoverFormClose, PopoverFormConfirm, PopoverFormContent, PopoverFormCutOutLeftIcon, PopoverFormCutOutRightIcon, PopoverFormDescription, PopoverFormFooter, PopoverFormHeader, PopoverFormSeparator, PopoverFormSuccess, PopoverFormTitle, PopoverFormTrigger, RadialMenu, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, ShiftCard, ShiftCardContent, ShiftCardHeader, SIZE_PRESETS, SortableList, SortableListItem, SpinnerV4, stiffness, TextureButton, Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle, TimerDisplay, TimerRoot, TooltipButton, FileTree, FileTreeDragLine, FileTreeItem, FileTreeItemLabel, useCopyToClipboard, useDynamicIslandSize, useLocalStorageAutoSave, useMotion, useMotionDrawer, useScheduledAnimations, useTimer, } from "~/components/catalyst-ui";
+ /**AIInputSearch,AILoadingState,AIPrompt,AIPromptCommandsView,AIPromptInput,AIPromptOutputView,AIPromptView,AITextLoading,AIVoice,APIDocsHeader,AboutPageHeader,AbsoluteCenter,AbsoluteCenterUsage,Accordion,AccordionContent,AccordionItem,AccordionTrigger,ActionBar,ActionBar1,ActionBarBasicUsage,ActionBarContent1,ActionBarDescription1,ActionPanel,ActionSearchBar,ActionSheet,ActiveTOC,ActivityCard,AddressCard,AdvancedQRCodeExamples,Affix,AgendaView,Alert,AlertDescription,AlertDialog,AlertDialogAction,AlertDialogCancel,AlertDialogContent,AlertDialogDescription,AlertDialogFooter,AlertDialogHeader,AlertDialogOverlay,AlertDialogPortal,AlertDialogTitle,AlertDialogTrigger,AlertModal,AlertModalIntegrations1,AlertTitle,AlertV1,AllProps,AnalogClock,Anchor,AnchorText,Android,AnimatedGlitchText,AnimatedHero,AnimatedHero1,AnimatedListItem,AnimatedModal,AnimatedModalBody,AnimatedModalCloseButton,AnimatedModalContent,AnimatedModalFooter,AnimatedModalSuccessButton,AnimatedModalTrigger,AnimatedNumber,AnimatedNumberExamples,AnimatedSpan,AnimatedTestimonials,AnimatedThemeToggler,AnimatedTooltip,AnnotatedLayout,AnnotatedSection,Announcement,AnnouncementTag,AnnouncementTitle,AppDSLeft,AppShell,AppShellAside,AppShellContent,AppShellFooter,AppShellHeader,AppShellHero,AppShellMain,AppShellSection,AppWithStyleProvider,AppleBlurImage,AppleCard,AppleCarousel,AppleDock,AppleDockIcon,AppleDockItem,AppleDockLabel,AppointmentScheduler,AreaChart,ArticleMediaObject,AspectRatio,AttractButton,AutoResizingTextarea,Autocomplete,AutocompleteClear,AutocompleteCollection,AutocompleteEmpty,AutocompleteGroup,AutocompleteGroupLabel,AutocompleteInput,AutocompleteItem,AutocompleteList,AutocompletePopup,AutocompleteRow,AutocompleteSeparator,AutocompleteStatus,AutocompleteTrigger,AutocompleteValue,Avatar,AvatarCircles,AvatarFallback,AvatarGroup,AvatarGroupTooltip,AvatarGroupVariants,AvatarImage,AvatarMore,AvatarStack,B,BackgroundGradient,BackgroundPaths,Badge,Badge1,BadgeWrapper1,Banner1,Banner2,BannerAction2,BannerClose2,BannerIcon2,BannerSection,BannerTitle2,BarChart,BarList,Barcode,BarcodeCard,BarcodeGenerator,BarcodeGrid,BarcodeScanner,BarsLoader,BasicAllProps,BasicAuthMiddleware,BasicMapUsage,BasicPopoverExample,BasicQRCodeExample,BentoCard,BentoCard1,BentoCard2,BentoGrid,BentoGrid1,BentoGrid2,BentoGridItem,BentoGrids,BentoSystem,BentoSystemItem,BgAnimateButton,BlobContext,Blockquote,Blog,BlogHeader,BlogPost,BlogPostEditor,BlogSidebar,BlurFade,BorderBeam,Box,BoxUsage,Breadcrumb,BreadcrumbEllipsis,BreadcrumbItem,BreadcrumbLink,BreadcrumbList,BreadcrumbPage,BreadcrumbSeparator,Burger,BurgerButton,BurgerNavigation,Button,ButtonGroup,ButtonGroupSeparator,ButtonGroupText,ButtonVariant,CODE,COMMONNONDEAFULTSECTIONS,CORSMiddleware,Calendar,CalendarBody,CalendarDOB,CalendarDate,CalendarDatePagination,CalendarDatePicker,CalendarDayButton,CalendarDndProvider,CalendarHeader,CalendarMonthPicker,CalendarProvider,CalendarRac,CalendarSidebar,CalendarV4,CalendarV4DayButton,CalendarYearPicker,Calendars,Callout,CanvasFractalGrid,CanvasFractalGridExample,Card,CardAction,CardBody,CardBody1,CardContainer1,CardContent,CardDescription,CardFlip,CardFooter,CardHeader,CardHeading,CardHeadingWithDropdown,CardHeadingWithTabs,CardHeart,CardImage,CardItem,CardItem1,CardProduct,CardStack,CardTitle,Carousel2,CarouselHero,CarouselItem2,CarouselV1,CarouselWithIndicator,CartItem,CascadeTree,Cascader,CaseStudyHeader,CashDrawerService,CatalystTable,CatalystTableColumnHeader,CatalystTableDraggableHeader,CategoryBar,CategoryFilters,CategoryPreviews,CcInput,Center,CenterUsage,ChainOfThought,ChainOfThoughtContent,ChainOfThoughtItem,ChainOfThoughtStep,ChainOfThoughtTrigger,Changelog,ChangelogSection,ChartContainer,ChartLegend,ChartLegendContent,ChartStyle,ChartTooltip,ChartTooltipContent,Chat,ChatBasic,ChatBubble,ChatBubbleUsage,ChatContent,ChatSidebar,ChatUsage,ChatWithCustomScroll,CheckTree,CheckTreePicker,CheckableTag,Checkbox,CheckboxCard,CheckboxCardV1,CheckboxTree,CheckboxV1,Checklist,ChecklistWithState,CheckoutForm,Choicebox,ChoiceboxItem,ChoiceboxItemContent,ChoiceboxItemDescription,ChoiceboxItemHeader,ChoiceboxItemIndicator,ChoiceboxItemSubtitle,ChoiceboxItemTitle,CircleMenu,CircularLoader,ClassicLoader,CleanSmallTable,ClientOnly,Code,CodeBlock,CodeBlockBasic,CodeBlockBody,CodeBlockCSS,CodeBlockContent,CodeBlockCopyButton,CodeBlockHeader,CodeBlockItem,CodeBlockNord,CodeBlockPython,CodeBlockSection,CodeBlockSelect,CodeBlockSelectContent,CodeBlockSelectItem,CodeBlockSelectTrigger,CodeBlockSelectValue,CodeBlockThemed,CodeBlockWithHeader,CodeComparison,CodeComparison1,CodeEditor,Col,CollapseButton,Collapsible,CollapsibleContent,CollapsibleSection,CollapsibleTrigger,ColorPaletteCard,ColorPicker,ColorPicker1,ColorPicker3,ColorPickerAlpha3,ColorPickerEyeDropper3,ColorPickerFormat3,ColorPickerHue3,ColorPickerOutput3,ColorSwatch,ColorSwatchUsage,ColorWheel,ComboChart,Combobox,Combobox2,ComboboxContent2,ComboboxCreateNew2,ComboboxEmpty2,ComboboxGroup2,ComboboxInput2,ComboboxItem2,ComboboxList2,ComboboxSeparator2,ComboboxTrigger2,ComboboxV1,ComicText,Command,CommandButton,CommandDialog,CommandDialogCustom,CommandEmpty,CommandGroup,CommandInput,CommandItem,CommandList,CommandSeparator,CommandShortcut,CommandV2,CommandWCombobox,Comment,CommentForm,CommentList,CommentMediaObject,CommentUsage,CommunityHeader,Comparison,ComparisonHandle,ComparisonItem,ComponentName,ComposablePatternExample,ConfigSection,ConfigurableCanvasFractalGrid,ConfirmPopup,ConfirmationFlowExample,ConfirmationModal,ConfirmationModalIntegrations1,ConstrainedContainer,Contact,ContactPageHeader,ContactSection,Container,ContainerBasicExample,ContainerSidebarLayoutExample,Content,Content1,Content2,Content3,ContentLayout,ContextMenu,ContextMenuCheckboxItem,ContextMenuContent,ContextMenuGroup,ContextMenuItem,ContextMenuLabel,ContextMenuPortal,ContextMenuRadioGroup,ContextMenuRadioItem,ContextMenuSeparator,ContextMenuShortcut,ContextMenuSub,ContextMenuSubContent,ContextMenuSubTrigger,ContextMenuTrigger,ContextStorageMiddleware,ConversationPromptInput,ConversationWithActions,ConversationWithAvatars,ConversationWithScrollBottom,CopyButton,CopyText,Counter,CreditCard,CreditCardBack,CreditCardChip,CreditCardCvv,CreditCardExpiry,CreditCardFlipper,CreditCardForm,CreditCardFront,CreditCardLogo,CreditCardMagStripe,CreditCardName,CreditCardNumber,CreditCardServiceProvider,Cropper,Cropper1,CropperCropArea1,CropperDescription1,CropperImage1,CssSection,Cta,CurrencyTransfer,Cursor,CursorBody,CursorFollow,CursorMessage,CursorName,CursorPointer,CursorProvider,CustomFileUpload,CustomQRCode,CustomViewsExample,CustomerSupport,DIV,DSAFallback,DSAImage,DSActionButton,DSActionGrid,DSCContent,DSCTrigger,DSContent,DSDClose,DSDContent,DSDDescription,DSDFooter,DSDHeader,DSDMAnchor,DSDMCheckboxItem,DSDMContent,DSDMGroup,DSDMItem,DSDMLabel,DSDMPortal,DSDMRadioGroup,DSDMRadioItem,DSDMSeparator,DSDMShortcut,DSDMSub,DSDMSubContent,DSDMSubTrigger,DSDMTrigger,DSDOverlay,DSDPortal,DSDTitle,DSDTrigger,DSFooter,DSGroupAction,DSGroupContent,DSGroupLabel,DSInput,DSLeftIcon,DSLoading,DSMenu,DSMenuAction,DSMenuBadge,DSMenuButton,DSMenuItem,DSMenuLink,DSMenuSkeleton,DSMenuSub,DSMenuSubButton,DSMenuSubItem,DSOptInForm,DSQuickActions,DSRightIcon,DSRightRail,DSSeparator,DSThemeProvider,DSThemeSelector,DSToolbar,DataList,DataListActionMenu,DataListActions,DataListItem,DataListKeyValue,DataListLabel,DataListRow,DataListUsage,DataListValue,DataTable,DateField,DateInput,DatePicker,DatePickerInput,DateRangePicker,DateRangePickerInput,DateSegment,DayView,DebouncedInput,DeferredCard,DeferredContent,DeferredImage,DeferredTable,DescriptionDetails,DescriptionList,DescriptionListWithActions,DescriptionListWithBadges,DescriptionTerm,DevListExample,DevListSidebar,DeviceMockup,DeviceMockupUsage,Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogOverlay,DialogPortal,DialogSidebar,DialogStack,DialogStackBody,DialogStackContent,DialogStackDescription,DialogStackFooter,DialogStackHeader,DialogStackNext,DialogStackOverlay,DialogStackPrevious,DialogStackTitle,DialogStackTrigger,DialogTitle,DialogTrigger,Diff,DiffUsage,DigitalClock,Dimmable,Dimmer,DisplayCode,DisplayGithubInstall,DisplayInstallCode,DisplayInstallCodeArray,DocBreadcrumb,DocDescription,DocFeatureList,DocInstallTabs,DocNavigation,DocPage,DocPoweredBy,DocSection,DocTitle,Dock,Dock2,Dock2Icon,DockIcon,DockItem,DockLabel,DockedDatePicker,DockedDatePickerTrigger,DocsLayout,Document,DonutChart,DotLoader,DotLoading,DotPattern,DotsLoader,DottedMap,Draggable,DraggableCard,DraggableEvent,Drawer,DrawerClose,DrawerContent,DrawerDescription,DrawerFooter,DrawerHeader,DrawerOverlay,DrawerPortal,DrawerTitle,DrawerTrigger,Drawing,DrawingSurface,DrawingToolbar,DrawingV2,DropZone,DropdownMenu,DropdownMenuAnchor,DropdownMenuCheckboxItem,DropdownMenuContent,DropdownMenuGroup,DropdownMenuItem,DropdownMenuLabel,DropdownMenuPortal,DropdownMenuRadioGroup,DropdownMenuRadioItem,DropdownMenuSeparator,DropdownMenuShortcut,DropdownMenuSub,DropdownMenuSubContent,DropdownMenuSubTrigger,DropdownMenuTrigger,DroppableCell,Dropzone,DropzoneContent,DropzoneEmptyState,DynamicContainer,DynamicContentTracker,DynamicDescription,DynamicDiv,DynamicHeader,DynamicIsland,DynamicIslandProvider,DynamicIslandSizePresets,DynamicLinks,DynamicRain,DynamicText,DynamicTitle,EFab,EcommerceCategory,EmailAddressInput,EmblaCarousel,EmblaCarouselContent,EmblaCarouselItem,EmblaCarouselNext,EmblaCarouselPrevious,EmojiPicker,EmojiPickerExample,Empty,EmptyCart,EmptyContent,EmptyDescription,EmptyHeader,EmptyMedia,EmptyState,EmptyTitle,ErrorPage,ErrorPageHeader,EventCalendar,EventDialog,EventItem,EventPageHeader,EventsPopup,Example,ExampleComponent1,ExcelExport,ExistingSearchParams,Expandable,ExpandableCard,ExpandableCardContent,ExpandableCardExamples,ExpandableCardFooter,ExpandableCardHeader,ExpandableContent,ExpandableContext,ExpandableScreen,ExpandableScreenBackground,ExpandableScreenContent,ExpandableScreenTrigger,ExpandableTrigger,ExportFile,ExternalDropZone,ExternalScript,ExternalScripts,FAB,FABUsage,FAQ,Fab,FabMenu,FadeIn,FadeInStagger,FancyArea,FaqSection,Feature,FeatureCarousel,FeaturePageHeader,FeatureSection,FeatureShowcase,Feed,FeedEvent,FeedbackBar,FeedbackBarBasic,FetcherProvider,Field,FieldContent,FieldDescription,FieldError,FieldGroup,FieldLabel,FieldLegend,FieldSeparator,FieldSet,FieldTitle,Fieldset,FieldsetContent,FieldsetFooter,File,FileSaver,FileTree,FileTreeDragLine,FileTreeItem,FileTreeItemLabel,FileUpload,FileUploadContent,FileUploadFlowExample,FileUploadTrigger,FileUploadV1,FilterCombobox,FilterSidebar,FixedMarker,FixedMarkerUsage,FlexContainer,FlexboxGrid,FlexboxGridBasicExample,FlexboxGridItem,FlexboxGridResponsiveExample,FlipButton,FloatButton,FloatButtonGroup,FloatLabel,FloatingLabel,FloatingPanel,FloatingPanelBody,FloatingPanelButton,FloatingPanelCloseButton,FloatingPanelContent,FloatingPanelExamples,FloatingPanelFooter,FloatingPanelForm,FloatingPanelHeader,FloatingPanelLabel,FloatingPanelSubmitButton,FloatingPanelTextarea,FloatingPanelTrigger,FlyoutMenu,Folder,Footer,FooterLayout,FormButton,FormInput,FormPopoverExample,FormSelect,FormWizard,FourOFourPage,FractalDotGrid,FractalDotGridExample,FullChatApp,FullConversation,Galleria,GlitchText,Globe,GlowingEffectCard,GoogleMap,GradientHeading,Grid,GridBasicExample,GridContainer,GridLineHorizontal,GridLineVertical,GridList,GridOffsetExample,GridResponsiveExample,Group,H1,H2,H3,H4,H5,HIGHLIGHT,Header,HeaderComponent,HeaderLayout,HeaderNavLink,HeatMapCalendar,Hero,HeroBadge,HeroSection,HeroV2,HeroVideoDialog,HexagonBackground,Highlight,HighlightUsage,HighlightV1,HighlightV1Usage,HoldButton,HoneypotInputs,HoneypotMiddleware,HoneypotProvider,HooksDocumentation,HoverCard,HoverCardContent,HoverCardTrigger,HoverVideoPaddingWrapper,HoverVideoPlayerControls,HoverVideoPlayerHoverOverlay,HoverVideoPlayerLoadingOverlay,HoverVideoPlayerPausedOverlay,HoverVideoPlayerPiPButton,HoverVideoPlayerPlayPauseButton,HoverVideoPlayerProgressBar,HoverVideoPlayerVolumeControl,Html,HyperText,I,IB,
+    errorFocusPriority,IconCloud,IconField,Iframe,Image,ImageCrop,ImageCropApply,ImageCropContent,ImageCropReset,ImageSection,ImageZoom,InPlace,InPlaceContent,InPlaceControls,InPlaceDisplay,IncId,Incentives,Indicator,InfiniteScroll,InfiniteSlider,InlineEdit,Inplace,Input,InputButton,InputButtonAction,InputButtonInput,InputButtonProvider,InputButtonSubmit,InputByok,InputGroup,InputGroupAddon,InputGroupButton,InputGroupInput,InputGroupText,InputGroupTextarea,InputIcon,InputOTP,InputOTPGroup,InputOTPSeparator,InputOTPSlot,InputText,InputWithCharactersLeft,InputWithEndAddOn,InputWithEndButton,InputWithEndIconButton,InputWithEndInlineAddOn,InputWithEndInlineButton,InputWithEndSelect,InputWithInlineAddOns,InputWithInlineStartAndEndAddOn,InputWithInnerTags,InputWithInsetLabel,InputWithMask,InputWithPasswordStrengthIndicator,InputWithStartAddOn,InputWithStartInlineAddOn,InputWithStartSelect,InputWithTags,InsufficientPermissions,InteractiveExample,InteractiveGridPattern,InteractiveIconCloud,IntroDisclosure,IntroDisclosureTab,IntroDisclosureTrigger,Iphone15Pro,Item,ItemActions,ItemContent,ItemDescription,ItemFooter,ItemGroup,ItemHeader,ItemMedia,ItemSeparator,ItemTitle,JSONInput,JSXPreview,JWKAuthMiddleware,JsonSection,KBD,KBtn,KanbanBoard,KanbanHeader,KeyFilter,KeyboardShortcut,KeyboardShortcutsProvider,Keypad,LOCAL_DS_STORAGE_KEY,Label,LabelVariant,LampContainer,LandingPage,LandingPageHeader,Layout,LayoutContainer,LayoutInner,Lens,Lid,LightBoard,LimelightNav,LineChart,LineShadowText,LiquidButton,List,List1,ListContainer,ListGroup,ListHeader,ListItem,ListItems,ListProvider,Listbox,LoadErrorPage,Loader,Loading,LoadingCarousel,LoadingOverlay,LoadingOverlayUsage,LoadingPage,LoadingSidebar,LoginForm,Logo,LogoCarousel,LogoCloud,LogoClouds666,LogoImage,LogoText,MacbookScroll,MagicCard,Magnetic,ManagedStream,MapWithCustomStyling,Markdown,Marquee,Marquee1,MatrixRain,MatrixText,MediaObject,MegaMenu,MegaMenuUsage,Mention,Menu,MenuDock,Menubar,MenubarCheckboxItem,MenubarContent,MenubarGroup,MenubarItem,MenubarLabel,MenubarMenu,MenubarPortal,MenubarRadioGroup,MenubarRadioItem,MenubarSeparator,MenubarShortcut,MenubarSub,MenubarSubContent,MenubarSubTrigger,MenubarTrigger,MermaidDiagram,Message,MessageDock,MessagesList,Meter,MinPricingPage,MiniCalendarDay,MiniCalendarDays,MiniCalendarNavigation,MinimalExample,Modal,ModalDateInput,ModalIntegrations1,MonthView,MorphSurface,MorphicNavbar,Motion,MotionAccordion,MotionAccordionContent,MotionAccordionItem,MotionAccordionTrigger,MotionAlertDialog,MotionAlertDialogAction,MotionAlertDialogCancel,MotionAlertDialogContent,MotionAlertDialogDescription,MotionAlertDialogFooter,MotionAlertDialogHeader,MotionAlertDialogIcon,MotionAlertDialogOverlay,MotionAlertDialogPortal,MotionAlertDialogTitle,MotionAlertDialogTrigger,MotionBento1,MotionBentoGrid,MotionBentoGridCard,MotionButton,MotionButtonContent,MotionButtonDescription,MotionButtonFooter,MotionButtonHeader,MotionButtonTitle,MotionButtonTrigger,MotionCalendar,MotionCalendarDayButton,MotionCard,MotionCard1,MotionCard1Back,MotionCard1BackAction,MotionCard1BackActionIcon,MotionCard1BackActionText,MotionCard1BackContent,MotionCard1BackDescription,MotionCard1BackFeature,MotionCard1BackFooter,MotionCard1BackHeader,MotionCard1BackTitle,MotionCard1Front,MotionCard1FrontDescription,MotionCard1FrontHeader,MotionCard1FrontIcon,MotionCard1FrontTitle,MotionCard2,MotionCard2Action,MotionCard2Content,MotionCard2Description,MotionCard2Footer,MotionCard2Header,MotionCard2Title,MotionCard3Body,MotionCard3Container,MotionCard3Item,MotionCardContent,MotionCardExamples,MotionCardFooter,MotionCardHeader,MotionCardTrigger,MotionCarousel,MotionChoicebox,MotionChoiceboxItem,MotionChoiceboxItemContent,MotionChoiceboxItemContentWrapper,MotionChoiceboxItemDescription,MotionChoiceboxItemHeader,MotionChoiceboxItemIndicator,MotionChoiceboxItemSubtitle,MotionChoiceboxItemTitle,MotionCombobox,MotionComboboxCommand,MotionComboboxEmpty,MotionComboboxGroup,MotionComboboxInput,MotionComboboxItem,MotionComboboxList,MotionCommand,MotionCommandDialog,MotionCommandEmpty,MotionCommandGroup,MotionCommandInput,MotionCommandItem,MotionCommandList,MotionCommandSeparator,MotionContent,MotionContext,MotionContextMenu,MotionContextMenuCheckboxItem,MotionContextMenuContent,MotionContextMenuGroup,MotionContextMenuItem,MotionContextMenuLabel,MotionContextMenuPortal,MotionContextMenuRadioGroup,MotionContextMenuRadioItem,MotionContextMenuSeparator,MotionContextMenuShortcut,MotionContextMenuSub,MotionContextMenuSubContent,MotionContextMenuSubTrigger,MotionContextMenuTrigger,MotionDatePicker,MotionDialog,MotionDialogClose,MotionDialogContent,MotionDialogDescription,MotionDialogFooter,MotionDialogHeader,MotionDialogOverlay,MotionDialogPortal,MotionDialogTitle,MotionDialogTrigger,MotionDrawer,MotionDrawer1,MotionDrawerAnimatedContent,MotionDrawerAnimatedWrapper,MotionDrawerButton,MotionDrawerClose,MotionDrawerContent,MotionDrawerHeader,MotionDrawerOverlay,MotionDrawerPortal,MotionDrawerSecondaryButton,MotionDrawerTrigger,MotionDrawerViewContent,MotionDropdown1,MotionDropdown1Content,MotionDropdown1Group,MotionDropdown1Item,MotionDropdown1ItemWithIcon,MotionDropdown1Label,MotionDropdown1Portal,MotionDropdown1ProfileTrigger,MotionDropdown1Separator,MotionDropdown1Shortcut,MotionDropdown1Sub,MotionDropdown1SubContent,MotionDropdown1SubTrigger,MotionDropdown1Trigger,MotionDropdownMenu,MotionDropdownMenuAnchor,MotionDropdownMenuCheckboxItem,MotionDropdownMenuContent,MotionDropdownMenuGroup,MotionDropdownMenuItem,MotionDropdownMenuLabel,MotionDropdownMenuPortal,MotionDropdownMenuRadioGroup,MotionDropdownMenuRadioItem,MotionDropdownMenuSeparator,MotionDropdownMenuShortcut,MotionDropdownMenuSub,MotionDropdownMenuSubContent,MotionDropdownMenuSubTrigger,MotionDropdownMenuTrigger,MotionFeatureCarousel,MotionFileUpload,MotionGroup,MotionHighlight,MotionHighlightItem,MotionHoverCard,MotionHoverCardContent,MotionHoverCardTrigger,MotionImages,MotionListItem,MotionMap,MotionNavigationMenu,MotionNavigationMenuContent,MotionNavigationMenuIndicator,MotionNavigationMenuItem,MotionNavigationMenuLink,MotionNavigationMenuList,MotionNavigationMenuTrigger,MotionNavigationMenuTriggerStyle,MotionNavigationMenuViewport,MotionPopover,MotionPopoverAnchor,MotionPopoverClose,MotionPopoverContent,MotionPopoverDescription,MotionPopoverFooter,MotionPopoverHeader,MotionPopoverTitle,MotionPopoverTrigger,MotionRadioCardItem,MotionRadioCards,MotionRating,MotionScreen,MotionScreenBackground,MotionScreenContent,MotionScreenTrigger,MotionSearch,MotionSearchBar,MotionSearchBarEmpty,MotionSearchBarGroup,MotionSearchBarInput,MotionSearchBarItem,MotionSearchBarList,MotionSearchBarSeparator,MotionSearchBarShortcut,MotionSearchContainer,MotionSearchInput,MotionSearchResults,MotionSearchResultsItem,MotionSection,MotionSelect,MotionSelectContent,MotionSelectGroup,MotionSelectItem,MotionSelectLabel,MotionSelectScrollDownButton,MotionSelectScrollUpButton,MotionSelectSeparator,MotionSelectTrigger,MotionSelectValue,MotionSpotlight,MotionTabs,MotionTabs2,MotionTabsContent,MotionTestimonials,MotionToast,MotionToolbar,MotionToolbarTabs,MotionToolbarTabsCard,MotionToolbarTabsContent,MotionToolbarTabsList,MotionToolbarTabsTrigger,MotionToolbarTabsWaveform,MotionTooltip,MotionTooltipContent,MotionTooltipProvider,MotionTooltipTrigger,MotionVideoPlayer,MotionsAvatar,MotionsAvatarFallback,MotionsAvatarGroup,MotionsAvatarImage,MotionsAvatarMore,MotionsAvatarStack,MotionsColorPicker,MouseEffectCard,MultiCascadeTree,MultiCascader,MultiColumnLayouts1,MultiColumnLayouts2,MultiColumnShell,MultiCombobox,MultiSelect,MultiStateCheckbox,MyComponent,NavActions,NavAppSidebar,NavAppointments,NavAutoSearch,NavFavorites,NavHeader,NavHeader1,NavMain,NavMessenger,NavProjects,NavSecondary,NavTreeView,NavUser,NavWorkspaces,Navbar19,NavigationMenu,NavigationMenuContent,NavigationMenuIndicator,NavigationMenuItem,NavigationMenuLink,NavigationMenuList,NavigationMenuTrigger,NavigationMenuViewport,NavigationProvider,NestedCombobox,NestedCommand,NestedCommandDialog,Newsletter,NewsletterHeader,NoteSection,NotificationMediaObject,NotificationPopoverExample,NumberInputWithChevrons,NumberInputWithPlusMinusButtons,NumberTicker,OptionKey,OrbitingCircles,OrderCard,OrderDetailsModal,OrderHistory,OrderItem,OrderStatusBadge,OrderStatusTimeline,OrderSummary,OrderSummaryItem,OrderedList,OverlayPanel,OverlayQRCode,OverlayQRCodeExample,P,PDFGenerator,PM,PROSE,Page,PageActions,PageHeader,PageHeaderDescription,PageHeaderFunction,PageHeaderHeading,PageHeading,PageNav,Pagination,PaginationButton,PaginationContent,PaginationEllipsis,PaginationItem,PaginationLink,PaginationNext,PaginationPrevious,PaginationWithHrefs,Panel,PanelMenu,PanelUsage,ParaScramble,ParallaxScroll,ParticleButton,PasswordInput,PaymentCard,PaymentMethodSelector,PdfSignature,PdfSignatureViewer,PdfViewer,PickWithInput,Pill,PillAvatar,PillAvatarGroup,PillButton,PillDelta,PillIcon,PillIndicator,PillStatus,PillsInput,PinInput,PinList,PinPerspective,PixelImage,PlaceholderCode,Pointer,Popconfirm,Popover,PopoverAnchor,PopoverClose,PopoverContent,PopoverDateInput,PopoverDescription,PopoverExamples,PopoverFooter,PopoverForm,PopoverFormClose,PopoverFormConfirm,PopoverFormContent,PopoverFormCutOutLeftIcon,PopoverFormCutOutRightIcon,PopoverFormDescription,PopoverFormFooter,PopoverFormHeader,PopoverFormSeparator,PopoverFormSuccess,PopoverFormTitle,PopoverFormTrigger,PopoverHeader,PopoverTitle,PopoverTrigger,PrefetchPageAnchors,Preview,PricingCardCarousel,PricingCardSingle,PricingCarousel,PricingFeatureComp,PricingPageHeader,PricingPagePages,PricingSimple,PricingThreeTiers,PricingTwoTiers,PricingUsageExamples,PricingWithParams,PricingWithToggle,ProductCard,ProductFeatures,ProductList,ProductOverview,ProductPage,ProductPageHeader,ProductQuickview,ProductShowcaseCard,ProfileDropdown,Progress,ProgressBar,ProgressiveBlur,PromoSection,PromptAutocompleteHighlight,PromptChatContainerContent,PromptChatContainerRoot,PromptChatContainerScrollAnchor,PromptCodeBlock,PromptCodeBlockCode,PromptCodeBlockGroup,PromptImage,PromptInput,PromptInputAction,PromptInputActions,PromptInputTextarea,PromptInputWithActions,PromptInputWithSuggestions,PromptMessage,PromptMessageAction,PromptMessageActions,PromptMessageAvatar,PromptMessageContent,PromptSuggestion,PropsCode,PropsCopyButton,PropsCopyButtonGroup,PropsTable,ProseUsage,PulseDotLoader,PulseLoader,QRCode,QRCodeRoute,QuantityControls,QuickViewModal,REUSABLECOMPONENTSTEMPLATE,RadialMenu,RadioCardGroup,RadioCardIndicator,RadioCardItem,RadioCardItem1,RadioCards,RadioGroup,RadioGroupItem,RadioTile,RadioTileGroup,Rail,RailUsage,RangeCalendarRac,RangePicker,Rate,Rating1,Rating2,RatingButton,RatingButton1,Reasoning,ReasoningContent,ReasoningTrigger,RelativeTimeZone,RelativeTimeZoneDate,RelativeTimeZoneDisplay,RelativeTimeZoneLabel,RemixLink,RemixLinkText,RemixNavLink,RemixNavLinkText,RequestIDMiddleware,ResizableHandle,ResizablePanel,ResizablePanelGroup,ResponseStream,RetroGrid,ReusableProductEditor,ReviewItem,ReviewMediaObject,ReviewsComponent,Ripple,RippleButton,Roladex1,RollingCookie,Rolodex,RolodexOne,RootComponents,Row,Safari,SandboxCodeEditor2,SandboxConsole2,SandboxFileExplorer2,SandboxIsClient,SandboxPreview2,SandboxTabs2,SandboxTabsContent2,SandboxTabsList2,SandboxTabsTrigger2,Scaffolding,ScriptsEditor,ScriptsViewer,Scroll,ScrollArea,ScrollBar,ScrollButton,ScrollText,ScrollToTop,ScrollTop,ScrollVelocityContainer,ScrollVelocityRow,ScrollVelocityRowImpl,ScrollVelocityRowLocal,ScrollX,ScrollXY,ScrollY,SearchCommand,SearchForm,SearchInput,SearchInputWithIconAndButton,SearchInputWithKBD,SearchInputWithLoader,Section,SectionContainer,SectionHeading,SectionHeadingWithAvatar,SectionHeadingWithDropdown,SectionTitle,SecureHeadersMiddleware,Select,SelectButton,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectScrollDownButton,SelectScrollUpButton,SelectSeparator,SelectTrigger,SelectValue,SendMessageEngine,Separator,SeparatorWithText,ServerOnly,ServerTimingMiddleware,SettingsMenu,Sheet,SheetClose,SheetContent,SheetDescription,SheetFooter,SheetHeader,SheetOverlay,SheetPortal,SheetTitle,SheetTrigger,ShiftCard,ShiftCardContent,ShiftCardHeader,ShimmerText,ShoppingCart,ShoppingCartDS,ShoppingCartExample,ShoppingCartSidebar,Sidebar,SidebarChatHistory,SidebarContainer,SidebarContent,SidebarDialog,SidebarFooter,SidebarGroup,SidebarGroupAction,SidebarGroupContent,SidebarGroupLabel,SidebarHeader,SidebarInput,SidebarInset,SidebarLayout,SidebarMenu,SidebarMenuAction,SidebarMenuAnchor,SidebarMenuBadge,SidebarMenuButton,SidebarMenuItem,SidebarMenuLink,SidebarMenuSkeleton,SidebarMenuSub,SidebarMenuSubButton,SidebarMenuSubItem,SidebarNav,SidebarProvider,SidebarRail,SidebarSeparator,SidebarShell,SidebarThemeProvider,SidebarThemeSelector,SidebarTrigger,Signature,SimpleTwoTierPricing,SingleDay,SingleDayMultiMonths,SiteHeader,Skeleton,SlicedText,SlideButton,Slider,SlidingNumber,SmoothCursor,SmoothDrawer,SmoothPopoverBody,SmoothPopoverButton,SmoothPopoverCloseButton,SmoothPopoverContent,SmoothPopoverFooter,SmoothPopoverForm,SmoothPopoverHeader,SmoothPopoverLabel,SmoothPopoverRoot,SmoothPopoverSubmitButton,SmoothPopoverTextarea,SmoothPopoverTrigger,SmoothTab,SocialButton,Sortable,SortableHandle,SortableItem,SortableList,SortableListItem,Source,SourceContent,SourceTrigger,SparkAreaChart,SparkBarChart,SparkLineChart,SparklesCore,SpeakerGrid,SpeedDial,Spinner,SpinnerV1,SpinnerV2,SpinnerV3,SpinnerV4,SplitButton,Spoiler,Spreadsheet,Stack,StackUsage,StackedList,StackedShell,StarRating,Stat,StatDescription,StatIcon,StatIndicator,StatLabel,StatProgress,StatText,StatUsage,StatValue,Stats,Stats1,Status,StatusBadge,StatusVariants,StepForm,StepNumber,Stepper,StepperDescription,StepperIndicator,StepperItem,StepperSeparator,StepperTitle,StepperTrigger,Steps,StepsBar,StepsContent,StepsItem,StepsTrigger,Sticky,StorageUsage,StoreNavigation,StorefrontPages,Stream,StreamBridge,StreamEmitter,StreamManagerProvider,StripeBgGuides,StyleProvider,SwissQRCode,SwissQRCodeExample,Switch,SwitchButton,SwooshText,SystemMessage,TEMPLATETEMPLATE,THEME_OPTIONS,THEME_VERSION,TOC,TabMenu,TabMenuUsage,TabPanel,TabView,Table,TableBody,TableBody1,TableCaption,TableCell,TableCell1,TableFooter,TableHead,TableHeader,TableHeader1,TableHeaderGroup1,TableOfContents,TableRow,TableRow1,Tabs,TabsContent,TabsList,TabsTrigger,Tag,TagsInput1,TailwindClassNamesDefaults,TailwindConverterExample,TaskBoard,TaskCard,TaskColumn,Team,TeamMemberMediaObject,TeamSwitcher,Terminal,TerminalCode,TerminalLoader,TestProvider,TestimonialCarousel,Testimonials,TextBlinkLoader,TextBlockquote,TextCode,TextDotsLoader,TextHighlighter,TextLarge,TextLead,TextMorph,TextParagraph,TextPre,TextReveal,TextRewind,TextScramble,TextShimmerLoader,TextSpan,TextSubtle,Textarea,TextareaV2,TextureButton,TextureCard,TextureCardContent,TextureCardDescription,TextureCardFooter,TextureCardHeader,TextureCardStyled,TextureCardTitle,TextureOverlay,TextureSeparator,ThemeSelector,ThemeSwitcher,ThemeToggleButton,ThreeDCard,ThreeDMarquee,ThreeDPin,TimeField,TimePicker,TimePickerDial,TimePickerInput,Timeline,Timeline2,TimelineContent,TimelineDate,TimelineHeader,TimelineIndicator,TimelineItem,TimelineSeparator,TimelineTitle,TimelineV1,TimerExamples,Toasty,Toggle,ToggleButton,ToggleClass,ToggleGroup,ToggleGroupItem,Tool,Toolbar,ToolbarButton,ToolbarButtonV1,ToolbarDropdownV1,ToolbarExpandable,ToolbarGroup,ToolbarGroupV1,ToolbarSearch,ToolbarSeparator,ToolbarSeparatorV1,ToolbarV1,Tooltip,TooltipButton,TooltipContent,TooltipProvider,TooltipTrigger,Tour,Tour1,Tracker,Trackpad,TransferList,Transition,TransitionablePortal,Tree,TreePicker,TreeView,TreeViewBranchControl,TreeViewBranchIndicator,TreeViewBranchText,TreeViewItem,TreeViewItemText,TreeViewLabel,TreeViewNode,TreeViewTree,TremorTracker,TrustBadges,TsxSection,TweetCard,TweetCard1,TweetNotFound1,TweetSkeleton1,Typewriter,TypingAnimation,TypingLoader,TypingMessage,TypographyExample,UnauthorizedPage,UnderConstructionPage,UnorderedList,Upload,UsageSection,UsageSectionNoDash,VSCODEEXTENSIONTEMPLATE,VersionSwitcher,VideoContent,VideoPlayer,VideoPlayerContent,VideoPlayerControlBar,VideoPlayerMuteButton,VideoPlayerPlayButton,VideoPlayerSeekBackwardButton,VideoPlayerSeekForwardButton,VideoPlayerTimeDisplay,VideoPlayerTimeRange,VideoPlayerVolumeRange,VideoPowerButton,VideoSection,VideoText,Virtualizer,VirtualizerUsage,Vortex,Watermark,WaveLoader,WeatherForecastCard,WeekView,WishlistDS,WithCookieMiddleware,WordRotate,Write,YouTubePlayer,YouTubePlayerControls,YoutubeVideo */
+
+const FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 26, 28, 30, 32, 34, 36, 38, 44]
+
+// Create scope for React Live
+const reactLiveScope = {
+  React, useState, useEffect, useRef, useCallback, useMemo, useContext, useReducer,
+
+
+  useTimer, PopoverForm, PopoverFormTrigger, PopoverFormContent, PopoverFormHeader, PopoverFormTitle, PopoverFormDescription, PopoverFormFooter, MotionTabs, MotionTabsList, MotionTabsTrigger, MotionTabsContent, PopoverFormClose, PopoverFormConfirm, PopoverFormSuccess, PopoverFormSeparator, PopoverFormCutOutLeftIcon, PopoverFormCutOutRightIcon, TimerRoot, MotionCommand, MotionCommandInput,MotionCommandList, MotionCarousel, MotionCommandEmpty, MotionCommandGroup, MotionComboboxCommand, MotionComboboxInput, MotionComboboxList, LogoCarousel, LoadingCarousel, LightBoard, GradientHeading, headingVariants, IntroDisclosure, FeatureCarousel, FloatingPanel, FloatingPanelTrigger, FloatingPanelContent, FloatingPanelForm, FloatingPanelLabel, FloatingPanelTextarea, FloatingPanelHeader, FloatingPanelBody, FloatingPanelFooter, FloatingPanelCloseButton, FloatingPanelSubmitButton, FloatingPanelButton, MotionChoicebox, MotionChoiceboxItem, MotionChoiceboxItemHeader, MotionChoiceboxItemTitle, MotionChoiceboxItemSubtitle, MotionChoiceboxItemDescription, MotionChoiceboxItemContentWrapper, MotionChoiceboxItemContent, MotionChoiceboxItemIndicator, MotionComboboxEmpty, MotionComboboxGroup, MotionComboboxItem, MotionCombobox, MotionCommandItem, MotionCommandSeparator, MotionCommandDialog, TimerIcon, TimerDisplay, TextureButton, MotionDatePicker, SortableListItem, ShiftCardContent, MotionToolbar, AnimatedNumber, MotionSearchBar, MotionScreen, MotionScreenTrigger, MotionScreenContent, MotionScreenBackground, MorphSurface, Motion, MotionAlertDialog, MotionAlertDialogPortal, MotionAlertDialogOverlay, DynamicContainer, DynamicTitle, DynamicDescription, DynamicIsland, SIZE_PRESETS, stiffness, DynamicDiv, damping, DynamicIslandSizePresets, BlobContext, useDynamicIslandSize, useScheduledAnimations, DynamicIslandProvider, MotionAlertDialogTrigger, MotionAlertDialogContent, MotionAlertDialogHeader, MotionAlertDialogFooter, MotionAlertDialogTitle, MotionAlertDialogDescription, MotionAlertDialogAction, MotionAlertDialogCancel, MotionAlertDialogIcon, MotionCalendar, MotionCalendarDayButton, calendarVariants, calendarDayButtonVariants, calendarNavButtonVariants, useMotion, MotionCard, MotionContent, MotionContext, MotionCardTrigger, MotionCardHeader, MotionCardContent, MotionCardFooter, MotionNavigationMenu, MotionNavigationMenuList, MotionNavigationMenuItem, MotionNavigationMenuContent, MotionNavigationMenuTrigger, MotionNavigationMenuLink, MotionNavigationMenuIndicator, MotionNavigationMenuViewport, navigationMenuTriggerStyle, SortableList, ShiftCard, ShiftCardHeader, MotionDropdownMenu, MotionDropdownMenuPortal, MotionDropdownMenuTrigger, MotionDropdownMenuContent, MotionDropdownMenuGroup, MotionDropdownMenuLabel, MotionDropdownMenuItem, MotionDropdownMenuCheckboxItem, MotionDropdownMenuRadioGroup, MotionDropdownMenuRadioItem, MotionDropdownMenuSeparator, MotionDropdownMenuShortcut, MotionDropdownMenuSub, MotionDropdownMenuSubTrigger, MotionDropdownMenuSubContent, MotionDropdownMenuAnchor, MotionDrawer, MotionDrawerTrigger, MotionDrawerPortal, MotionDrawerOverlay, MotionDrawerContent, MotionDrawerAnimatedWrapper, MotionDrawerAnimatedContent, MotionDrawerClose, MotionDrawerHeader, MotionDrawerButton, MotionDrawerSecondaryButton, MotionDrawerViewContent, useMotionDrawer, MotionContextMenu, MotionContextMenuTrigger, MotionContextMenuContent, MotionContextMenuItem, MotionContextMenuCheckboxItem, MotionContextMenuRadioItem, MotionContextMenuLabel, MotionContextMenuSeparator, MotionContextMenuShortcut, MotionContextMenuGroup, MotionContextMenuPortal, MotionContextMenuSub, MotionContextMenuSubContent, MotionContextMenuSubTrigger, MotionContextMenuRadioGroup, Button, Card, Input, Badge, Burger, KBD, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TooltipButton, Modal, Alert, SpinnerV4, useCopyToClipboard, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, cn,   CircleMenu, 
+
+
+}
+export type SandboxTabsContextValue = {
+  selectedTab: string | undefined
+  setSelectedTab: (value: string) => void
+}
+
+const SandboxTabsContext = createContext<SandboxTabsContextValue | undefined>(undefined)
+
+function useSandboxTabsContext() {
+  const context = useContext(SandboxTabsContext)
+  if (!context) {
+    throw new Error("SandboxTabs2 components must be used within a SandboxTabs2")
+  }
+  return context
+}
+
+export type SandboxTabsProps = HTMLAttributes<HTMLDivElement> & {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export function SandboxTabs2({ className, defaultValue, value, onValueChange, ...props }: SandboxTabsProps): ReactNode {
+  const [selectedTab, setSelectedTabState] = useState(value || defaultValue)
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedTabState(value)
+    }
+  }, [value])
+
+  const setSelectedTab = useCallback(
+    (newValue: string) => {
+      if (value === undefined) {
+        setSelectedTabState(newValue)
+      }
+      onValueChange?.(newValue)
+    },
+    [value, onValueChange]
+  )
+
+  return (
+    <SandboxTabsContext.Provider value={{ selectedTab, setSelectedTab }}>
+      <div
+        className={cn(
+          "group relative flex size-full flex-col overflow-hidden rounded-lg bg-background text-sm",
+          // " border ",
+          className
+        )}
+        {...props}
+        data-selected={selectedTab}
+      >
+        {props.children}
+      </div>
+    </SandboxTabsContext.Provider>
+  )
+}
+
+export type SandboxTabsListProps = HTMLAttributes<HTMLDivElement>
+
+export function SandboxTabsList2({ className, ...props }: SandboxTabsListProps): ReactNode {
+  return (
+    <div
+      className={cn(
+        // 'inline-flex w-full shrink-0 items-center justify-start border-b bg-secondary p-2 text-muted-foreground',
+        "mb-px flex gap-x-6 border-b border-border whitespace-nowrap justify-start bg-transparent  rounded-[0xp]",
+        className
+      )}
+      role="tablist"
+      {...props}
+    />
+  )
+}
+
+export type SandboxTabsTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
+  value: string
+}
+
+export function SandboxTabsTrigger2({ className, value, ...props }: SandboxTabsTriggerProps): ReactNode {
+  const { selectedTab, setSelectedTab } = useSandboxTabsContext()
+
+  const handleClick = useCallback(() => {
+    setSelectedTab(value)
+  }, [setSelectedTab, value])
+
+  return (
+    <button
+      aria-selected={selectedTab === value}
+      className={cn(
+        // 'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 font-medium text-sm ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        "-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent",
+        "text-muted-foreground hover:border-border/25",
+        "data-[state=active]:border-[#2563eb] data-[state=active]:text-foreground rounded-[0xp]",
+        className
+      )}
+      data-state={selectedTab === value ? "active" : "inactive"}
+      onClick={handleClick}
+      role="tab"
+      {...props}
+    />
+  )
+}
+
+export type SandboxTabsContentProps = HTMLAttributes<HTMLDivElement> & {
+  value: string
+}
+
+export function SandboxTabsContent2({ className, value, ...props }: SandboxTabsContentProps): ReactNode {
+  const { selectedTab } = useSandboxTabsContext()
+
+  return <div aria-hidden={selectedTab !== value} className={cn("flex-1 overflow-y-auto ring-offset-background transition-opacity duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", selectedTab === value ? "h-auto w-auto opacity-100" : "pointer-events-none absolute h-0 w-0 opacity-0", className)} data-state={selectedTab === value ? "active" : "inactive"} role="tabpanel" {...props} />
+}
+
+export type SandboxFileExplorerProps = HTMLAttributes<HTMLDivElement> & {
+  files: string[]
+  activeFile?: string
+  onFileSelect?: (file: string) => void
+}
+
+export function SandboxFileExplorer2({ className, files = [], activeFile, onFileSelect, ...props }: SandboxFileExplorerProps): ReactNode {
+  return (
+    <div className={cn("h-full bg-background p-2 font-mono text-sm", className)} {...props}>
+      <div className="space-y-0.5">
+        {files.map((file) => {
+          const defaultIcon = Object.entries(filenameIconMap).find(([pattern]) => {
+            const regex = new RegExp(`^${pattern.replace(/\\/g, "\\\\").replace(/\./g, "\\.").replace(/\*/g, ".*")}$`)
+            return file && regex.test(file)
+          })?.[1]
+          const Icon = defaultIcon
+          return (
+            <button
+              key={file}
+              onClick={() => onFileSelect?.(file)}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left transition-colors",
+
+                "-mb-px flex border-b pb-2 text-sm/7 font-medium border-transparent",
+                "text-muted-foreground hover:border-border/25",
+                activeFile === file && "text-foreground border-[#2563eb] rounded-[0xp]"
+              )}
+            >
+              {Icon && <Icon className="h-4 w-4 shrink-0" />}
+              <span className="truncate text-muted-foreground">{file}</span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export type SandboxCodeEditorProps = HTMLAttributes<HTMLDivElement> & {
+  value?: string
+  onChange?: (value: string) => void
+  language?: string
+  readOnly?: boolean
+}
+
+export type SandboxPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  html?: string
+  srcDoc?: string
+}
+
+export function SandboxPreview2({ className, code = "", ...props }: SandboxPreviewProps): ReactNode {
+  return (
+    <div className={cn("h-full bg-background overflow-auto", className)} {...props}>
+      <LiveProvider code={code} scope={reactLiveScope} noInline={false}>
+        <div className="p-4">
+          <LivePreview />
+          <LiveError className="bg-destructive/10 text-destructive p-4 rounded-lg mt-4 font-mono text-sm" />
+        </div>
+      </LiveProvider>
+    </div>
+  )
+}
+
+export type SandboxConsoleProps = HTMLAttributes<HTMLDivElement> & {
+  logs?: Array<{ type: "log" | "error" | "warn"; message: string }>
+}
+
+export function SandboxConsole2({ className, logs = [], ...props }: SandboxConsoleProps): ReactNode {
+  return (
+    <div className={cn("h-full overflow-y-auto bg-background p-2 font-mono text-sm", className)} {...props}>
+      {logs.map((log, i) => (
+        <div key={i} className={cn("px-2 py-1", log.type === "error" && "text-destructive", log.type === "warn" && "text-yellow-500", log.type === "log" && "text-foreground")}>
+          <span className="text-muted-foreground">[{log.type}]</span> {log.message}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function SandboxCodeEditor2({ setIsClient, activeTab, theme, handleEditorChange, handleEditorDidMount, showMinimap, fontSize, showLineNumbers, editorSettings, editorRef, isClient, className, ...props }: SandboxCodeEditorProps): ReactNode {
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const EditorLoading = () => {
+    return (
+      <div>
+        <LoadingPage />
+      </div>
+    )
+  }
+
+  const renderEditor = () => {
+    if (!isClient || !activeTab) {
+      return <EditorLoading />
+    }
+
+    return (
+      <div className="h-full">
+        <Editor
+          height="100%"
+          className=""
+          loading={<SpinnerV4 title="Loading..." subtitle="Please wait while your editor loads the content." size="sm" />}
+          language={activeTab.language}
+          value={activeTab.content}
+          theme={theme}
+          onChange={handleEditorChange}
+          onMount={handleEditorDidMount}
+          options={{
+            minimap: { enabled: showMinimap },
+            fontSize: fontSize,
+            lineNumbers: showLineNumbers ? "on" : "off",
+            wordWrap: true,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            folding: true,
+            bracketMatching: editorSettings.bracketMatching,
+            autoClosingBrackets: editorSettings.autoClosingBrackets,
+            autoClosingQuotes: editorSettings.autoClosingQuotes,
+            autoIndent: editorSettings.autoIndent,
+            renderWhitespace: editorSettings.renderWhitespace,
+            multiCursorModifier: "alt",
+            formatOnPaste: editorSettings.formatOnPaste,
+            formatOnType: editorSettings.formatOnType,
+            smoothScrolling: editorSettings.smoothScrolling,
+            cursorBlinking: editorSettings.cursorBlinking,
+            cursorStyle: editorSettings.cursorStyle,
+            suggest: {
+              showKeywords: true,
+              showSnippets: true,
+              showFunctions: true,
+              showConstructors: true,
+              showFields: true,
+              showVariables: true,
+              showClasses: true,
+              showStructs: true,
+              showInterfaces: true,
+              showModules: true,
+              showProperties: true,
+              showEvents: true,
+              showOperators: true,
+              showUnits: true,
+              showValues: true,
+              showConstants: true,
+              showEnums: true,
+              showEnumMembers: true,
+              showColors: true,
+              showFiles: true,
+              showReferences: true,
+              showFolders: true,
+              showTypeParameters: true,
+            },
+            quickSuggestions: {
+              other: true,
+              comments: true,
+              strings: true,
+            },
+            suggestOnTriggerCharacters: true,
+            acceptSuggestionOnCommitCharacter: true,
+            acceptSuggestionOnEnter: "on",
+            tabCompletion: "on",
+
+            scrollbar: {
+              vertical: "auto",
+              //  horizontal: 'auto',
+              useShadows: true,
+              verticalHasArrows: false,
+              horizontalHasArrows: false,
+              verticalScrollbarSize: 10,
+              horizontalScrollbarSize: 10,
+              arrowSize: 10,
+            },
+            mouseWheelZoom: true,
+            links: true,
+            colorDecorators: true,
+          }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("flex-1", className)} {...props}>
+      {renderEditor()}
+    </div>
+  )
+}
+
+export function Liveplayground() {
+  return <ClientOnly>{() => <SandboxIsClient />}</ClientOnly>
+}
+
+export function SandboxIsClient() {
+    const { toast } = useToasted()
+  
+  const [value, setValue] = useState("editor")
+  const [code, setCode] = useState("")
+  const [isSplitView, setIsSplitView] = useState(false)
+  const [theme, setTheme] = useState("customDark")
+  const [lastSaved, setLastSaved] = useState(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [showMinimap, setShowMinimap] = useState(true)
+  const [fontSize, setFontSize] = useState(14)
+  const [showLineNumbers, setShowLineNumbers] = useState(true)
+  const [activeTabId, setActiveTabId] = useState(1)
+  const [nextTabId, setNextTabId] = useState(4)
+  const [isClient, setIsClient] = useState(false)
+  const [autoSaveEnabled, setAutoSaveEnabled] = useState(true)
+  const [isCopied, setIsCopied] = useState(false)
+  const [isPreview, setIsPreview] = useState(false)
+  const [isVisible, setIsVisible] = useState(true)
+  const [isWordWrapEnabled, setIsWordWrapEnabled] = useState(false)
+  const [isStickyScrollEnabled, setIsStickyScrollEnabled] = useState(false)
+  const [isWhitespaceRendered, setIsWhitespaceRendered] = useState(false)
+  const [areIndentGuidesRendered, setAreIndentGuidesRendered] = useState(true)
+  const [wordWrap, setWordWrap] = useState(true)
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const editorRef = useRef(null)
+  const saveTimeoutRef = useRef(null)
+
+  const [tabs, setTabs] = useState([
+    {
+      id: 1,
+      name: "App.jsx",
+      content: `function App() {
+  const [count, setCount] = React.useState(0);
+  const [name, setName] = React.useState('');
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl mx-auto">
+      <Card className="p-6">
+        <h1 className="text-2xl font-bold mb-4">Catalyst UI React Playground</h1>
+
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">Interactive Example</h2>
+
+          <div className="flex gap-2 items-center">
+            <Button onClick={() => setCount(c => c + 1)}>
+              Count: {count}
+            </Button>
+            <Button variant="secondary" onClick={() => setCount(0)}>
+              Reset
+            </Button>
+          </div>
+
+          <Input
+            placeholder="Enter your name..."
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="max-w-xs"
+          />
+
+          {name && (
+            <Alert>
+              Hello, {name}! Welcome to Catalyst UI.
+            </Alert>
+          )}
+
+          <div className="flex gap-2 flex-wrap">
+            <Badge>React</Badge>
+            <Badge variant="secondary">Live</Badge>
+            <Badge variant="outline">Playground</Badge>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+`,
+      language: "javascript",
+      isDirty: false,
+      isActive: true,
+    },
+    {
+      id: 2,
+      name: "ButtonDemo.jsx",
+      content: `function ButtonDemo() {
+  return (
+    <div className="space-y-4">
+      <h3 className="font-semibold">Button Variants</h3>
+      <div className="flex gap-2 flex-wrap">
+        <Button>Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+    </div>
+  );
+}
+  
+`,
+      language: "javascript",
+      isDirty: false,
+      isActive: false,
+    },
+    {
+      id: 3,
+      name: "styles.css",
+      content: `/* Custom styles can go here */
+.custom-card {
+  border: 2px dashed #3b82f6;
+}`,
+      language: "css",
+      isDirty: false,
+      isActive: false,
+    },
+  ])
+
+  const [editorSettings, setEditorSettings] = useState({
+    bracketMatching: "always",
+    autoClosingBrackets: "always",
+    autoClosingQuotes: "always",
+    autoIndent: "full",
+    formatOnPaste: true,
+    formatOnType: true,
+    renderWhitespace: "selection",
+    smoothScrolling: true,
+    cursorBlinking: "blink",
+    cursorStyle: "line",
+  })
+
+  const customDarkTheme = {
+    base: "vs-dark",
+    inherit: true,
+    rules: [],
+    colors: {
+      "editor.background": "#020817",
+    },
+  }
+
+  const languages = [
+    { value: "markdown", label: "Markdown", icon: "📝" },
+    { value: "javascript", label: "JavaScript", icon: "🟨" },
+    { value: "typescript", label: "TypeScript", icon: "🔷" },
+    { value: "html", label: "HTML", icon: "🌐" },
+    { value: "css", label: "CSS", icon: "🎨" },
+    { value: "scss", label: "SCSS", icon: "💅" },
+    { value: "json", label: "JSON", icon: "📋" },
+    { value: "python", label: "Python", icon: "🐍" },
+    { value: "sql", label: "SQL", icon: "🗃️" },
+    { value: "yaml", label: "YAML", icon: "⚙️" },
+    { value: "xml", label: "XML", icon: "📄" },
+    { value: "java", label: "Java", icon: "☕" },
+    { value: "csharp", label: "C#", icon: "💜" },
+    { value: "cpp", label: "C++", icon: "⚡" },
+    { value: "php", label: "PHP", icon: "🔮" },
+    { value: "rust", label: "Rust", icon: "🦀" },
+    { value: "go", label: "Go", icon: "🐹" },
+    { value: "shell", label: "Shell", icon: "🐚" },
+  ]
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const handleEditorChange = (value) => {
+    setTabs((prev) => prev.map((tab) => (tab.id === activeTabId ? { ...tab, content: value || "", isDirty: true } : tab)))
+    setCode(value)
+  }
+
+  useEffect(() => {
+    if (!isClient) return
+
+    const savedTabs = []
+
+    // Check each existing tab to see if there's saved content
+    tabs.forEach((tab) => {
+      const savedContent = localStorage.getItem(`live-playground-${tab.id}`)
+      const savedName = localStorage.getItem(`live-playground-${tab.id}-name`)
+      const savedLanguage = localStorage.getItem(`live-playground-${tab.id}-language`)
+
+      if (savedContent) {
+        savedTabs.push({
+          ...tab,
+          name: savedName || tab.name,
+          content: savedContent,
+          language: savedLanguage || tab.language,
+          isDirty: false,
+        })
+      } else {
+        // Keep the default tab if nothing was saved
+        savedTabs.push(tab)
+      }
+    })
+
+    // Check for any additional tabs beyond the defaults
+    let index = Math.max(...tabs.map((t) => t.id)) + 1
+    while (true) {
+      const savedContent = localStorage.getItem(`live-playground-${index}`)
+      const savedName = localStorage.getItem(`live-playground-${index}-name`)
+      const savedLanguage = localStorage.getItem(`live-playground-${index}-language`)
+
+      if (!savedContent) break
+
+      savedTabs.push({
+        id: index,
+        name: savedName || `tab-${index}.md`,
+        content: savedContent,
+        language: savedLanguage || "markdown",
+        isDirty: false,
+        isActive: false,
+      })
+
+      index++
+    }
+
+    if (savedTabs.length > 0) {
+      setTabs(savedTabs.map((tab, i) => ({ ...tab, isActive: i === 0 })))
+      setNextTabId(Math.max(...savedTabs.map((t) => t.id)) + 1)
+      setCode(savedTabs[0].content)
+    }
+  }, [isClient])
+
+  const autoSave = useCallback(
+    async (tabId, content) => {
+      const tab = tabs.find((t) => t.id === tabId)
+      if (!tab?.isDirty || !autoSaveEnabled) return
+
+      setIsSaving(true)
+      try {
+        localStorage.setItem(`live-playground-${tabId}`, content)
+        localStorage.setItem(`live-playground-${tabId}-name`, tab.name)
+        localStorage.setItem(`live-playground-${tabId}-language`, tab.language)
+        setTabs((prev) => prev.map((t) => (t.id === tabId ? { ...t, isDirty: false } : t)))
+        setLastSaved(new Date())
+      } catch (error) {
+        console.error("Save failed:", error)
+      } finally {
+        setIsSaving(false)
+      }
+    },
+    [tabs, autoSaveEnabled]
+  )
+
+  useEffect(() => {
+    if (activeTab?.isDirty && autoSaveEnabled) {
+      clearTimeout(saveTimeoutRef.current)
+      saveTimeoutRef.current = setTimeout(() => {
+        autoSave(activeTabId, activeTab.content)
+      }, 2000)
+    }
+
+    return () => clearTimeout(saveTimeoutRef.current)
+  }, [activeTab?.content, activeTab?.isDirty, activeTabId, autoSave, autoSaveEnabled])
+
+  const getFileExtension = (language) => {
+    const extensions = {
+      javascript: "js",
+      typescript: "ts",
+      html: "html",
+      css: "css",
+      scss: "scss",
+      json: "json",
+      python: "py",
+      sql: "sql",
+      yaml: "yml",
+      xml: "xml",
+      java: "java",
+      csharp: "cs",
+      cpp: "cpp",
+      php: "php",
+      rust: "rs",
+      go: "go",
+      shell: "sh",
+      markdown: "md",
+    }
+    return extensions[language] || "txt"
+  }
+
+  const getTemplateForLanguage = (language) => {
+    const templates = {
+      javascript: "// JavaScript code\n",
+      typescript: "// TypeScript code\n",
+      html: "<!DOCTYPE html>\n<html>\n<head>\n  <title>Document</title>\n</head>\n<body>\n  \n</body>\n</html>",
+      css: "/* CSS styles */\n",
+      markdown: "# Markdown Document\n\n",
+      python: "# Python code\n",
+      json: "{\n  \n}",
+    }
+    return templates[language] || ""
+  }
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+      setIsFullscreen(true)
+    } else {
+      document.exitFullscreen()
+      setIsFullscreen(false)
+    }
+  }
+
+  const createNewTab = useCallback(
+    (language = "markdown") => {
+      const newTab = {
+        id: nextTabId,
+        name: `untitled-${nextTabId}.${getFileExtension(language)}`,
+        content: getTemplateForLanguage(language),
+        language,
+        isDirty: false,
+        isActive: true,
+      }
+
+      setTabs((prev) => prev.map((tab) => ({ ...tab, isActive: false })))
+      setTabs((prev) => [...prev, newTab])
+      setActiveTabId(nextTabId)
+      setNextTabId((prev) => prev + 1)
+    },
+    [nextTabId]
+  )
+
+  const closeTab = useCallback(
+    (tabId) => {
+      if (tabs.length === 1) return
+
+      setTabs((prev) => {
+        const newTabs = prev.filter((tab) => tab.id !== tabId)
+        if (tabId === activeTabId) {
+          const nextTab = newTabs[0] || newTabs[newTabs.length - 1]
+          setActiveTabId(nextTab?.id || 1)
+        }
+        return newTabs
+      })
+    },
+    [tabs.length, activeTabId]
+  )
+
+  const handleManualSave = useCallback(() => {
+    if (activeTab?.isDirty) {
+      clearTimeout(saveTimeoutRef.current)
+      autoSave(activeTabId, activeTab.content)
+    }
+  }, [activeTab, activeTabId, autoSave])
+
+  const handleEditorDidMount = (editor, monaco) => {
+    editorRef.current = editor
+    monaco.editor.defineTheme("customDark", customDarkTheme)
+    monaco.editor.setTheme("customDark")
+
+    editor.addCommand(
+      monaco.KeyCode.Enter,
+      () => {
+        const model = editor.getModel()
+        const position = editor.getPosition()
+        const lineContent = model.getLineContent(position.lineNumber)
+
+        const taskMatch = lineContent.match(/^(\s*)-\s+\[([ xX])\]\s*(.*)$/)
+        const unorderedMatch = lineContent.match(/^(\s*)([-*+])\s+(.*)$/)
+        const orderedMatch = lineContent.match(/^(\s*)(\d+)\.\s+(.*)$/)
+
+        if (taskMatch) {
+          const [fullMatch, indent, checked, content] = taskMatch
+          const isCursorAtEnd = position.column === lineContent.length + 1
+
+          if (content.trim() === "" || (content.trim() === "" && isCursorAtEnd)) {
+            const endOfMarker = indent.length + 6
+            editor.executeEdits("list-break", [
+              {
+                range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "",
+              },
+              {
+                range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "\n",
+              },
+            ])
+            editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 })
+          } else {
+            const newText = "\n" + indent + "- [ ] "
+            editor.executeEdits("list-continue", [
+              {
+                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                text: newText,
+              },
+            ])
+            editor.setPosition({
+              lineNumber: position.lineNumber + 1,
+              column: indent.length + 7,
+            })
+          }
+          return true
+        } else if (unorderedMatch) {
+          const [fullMatch, indent, marker, content] = unorderedMatch
+
+          if (content.trim() === "") {
+            editor.executeEdits("list-break", [
+              {
+                range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "",
+              },
+              {
+                range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "\n",
+              },
+            ])
+            editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 })
+          } else {
+            const newText = "\n" + indent + marker + " "
+            editor.executeEdits("list-continue", [
+              {
+                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                text: newText,
+              },
+            ])
+            editor.setPosition({
+              lineNumber: position.lineNumber + 1,
+              column: indent.length + marker.length + 2,
+            })
+          }
+          return true
+        } else if (orderedMatch) {
+          const [fullMatch, indent, num, content] = orderedMatch
+
+          if (content.trim() === "") {
+            editor.executeEdits("list-break", [
+              {
+                range: new monaco.Range(position.lineNumber, indent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "",
+              },
+              {
+                range: new monaco.Range(position.lineNumber, lineContent.length + 1, position.lineNumber, lineContent.length + 1),
+                text: "\n",
+              },
+            ])
+            editor.setPosition({ lineNumber: position.lineNumber + 1, column: indent.length + 1 })
+          } else {
+            const nextNum = parseInt(num) + 1
+            const newText = "\n" + indent + nextNum + ". "
+            editor.executeEdits("list-continue", [
+              {
+                range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                text: newText,
+              },
+            ])
+            editor.setPosition({
+              lineNumber: position.lineNumber + 1,
+              column: indent.length + nextNum.toString().length + 3,
+            })
+          }
+          return true
+        } else {
+          editor.trigger("keyboard", "type", { text: "\n" })
+          return false
+        }
+      },
+      ""
+    )
+
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyS, () => {
+      handleManualSave()
+    })
+
+    editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyP, () => {
+      setIsPreview((prev) => !prev)
+    })
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Equal, () => {
+      setFontSize((prev) => Math.min(prev + 1, 24))
+    })
+
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Minus, () => {
+      setFontSize((prev) => Math.max(prev - 1, 8))
+    })
+
+    editor.focus()
+  }
+
+  function resetLocalStorage() {
+    localStorage.clear()
+    toast.success("Success", "Local storage has been reset!", { variant: "accent" })
+  }
+
+  const editorFind = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "actions.find", null)
+    }
+  }
+
+  const editorFindReplace = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.action.startFindReplace", null)
+    }
+  }
+
+  const editorFoldAll = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.foldAll", null)
+    }
+  }
+
+  const editorUnfoldAll = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.unfoldAll", null)
+    }
+  }
+
+  const closeAllTabs = () => {
+    setTabs([])
+    createNewTab()
+    handleManualSave()
+  }
+
+  useEffect(() => {
+    setIsVisible(true)
+    const timer = setTimeout(() => {
+      setIsVisible(false)
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [lastSaved])
+
+  const editorChangeAllOccurrences = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.action.selectHighlights", null)
+    }
+  }
+
+  const editorToggleBlockComment = () => {
+    if (editorRef.current) {
+      editorRef.current.trigger("menu", "editor.action.blockComment", null)
+    }
+  }
+
+  const editorToggleSoftWraps = () => {
+    const newStatus = !isWordWrapEnabled
+    setIsWordWrapEnabled(newStatus)
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        wordWrap: newStatus ? "on" : "off",
+      })
+    }
+  }
+
+  const editorToggleStickyScroll = () => {
+    const newStatus = !isStickyScrollEnabled
+    setIsStickyScrollEnabled(newStatus)
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        "stickyScroll.enabled": newStatus,
+      })
+    }
+  }
+
+  const editorToggleRenderWhitespace = () => {
+    const newStatus = !isWhitespaceRendered
+    setIsWhitespaceRendered(newStatus)
+    const renderMode = newStatus ? "all" : "none"
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        renderWhitespace: renderMode,
+      })
+    }
+  }
+
+  const editorToggleIndentGuides = () => {
+    const newStatus = !areIndentGuidesRendered
+    setAreIndentGuidesRendered(newStatus)
+
+    if (editorRef.current) {
+      editorRef.current.updateOptions({
+        renderIndentGuides: newStatus,
+      })
+    }
+  }
+
+  const handleClick = (content, filename) => {
+    const blob = new Blob([content], { type: "text/plain" })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement("a")
+    link.href = url
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  const onOpen = (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const content = event.target?.result
+      if (typeof content === "string") {
+        setCode(content)
+        if (activeTab) {
+          setTabs((prev) => prev.map((tab) => (tab.id === activeTabId ? { ...tab, content, isDirty: true } : tab)))
+        }
+      }
+    }
+    reader.readAsText(file)
+  }
+
+  const options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }
+
+  const TabComponent = ({ tab, isActive, onClose, onSelect }) => {
+    const defaultIcon = Object.entries(filenameIconMap).find(([pattern]) => {
+      const regex = new RegExp(`^${pattern.replace(/\\/g, "\\\\").replace(/\./g, "\\.").replace(/\*/g, ".*")}$`)
+      return tab.language && regex.test(tab.language)
+    })?.[1]
+    const Icon = defaultIcon
+    return (
+      <div className={`flex items-center px-3 py-2 border-r border-border cursor-pointer transition-colors ${isActive ? "bg-background text-foreground border-b-2 border-[#1447e6]" : "bg-muted text-muted-foreground hover:bg-background hover:text-foreground"}`} onClick={() => onSelect(tab.id)}>
+        {Icon && <Icon className="h-4 w-4 shrink-0" />}
+        <span className="text-sm truncate max-w-32">{tab.name}</span>
+        {tab.isDirty && <span className="ml-1 text-destructive">●</span>}
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            onClose(tab.id)
+          }}
+          className="ml-2 p-1 rounded hover:bg-destructive/20 hover:text-destructive"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      </div>
+    )
+  }
+
+  function KBDShortcut({
+    name = "Save",
+    sc = (
+      <>
+        <KBD>Alt</KBD>
+        {" & "}
+        <KBD>S</KBD>
+      </>
+    ),
+  }) {
+    return (
+      <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+        {name}
+        <DropdownMenuShortcut>{sc}</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    )
+  }
+
+  const Toolbar = () => (
+    <div className="flex items-center space-x-2">
+      {isSaving && !isVisible && !lastSaved && (
+        <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+          Saving...
+        </Badge>
+      )}
+      {isVisible && lastSaved && (
+        <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+          Saved: {new Date(lastSaved).toLocaleString("en-US", options)}
+        </Badge>
+      )}
+      {isCopied && (
+        <Badge variant="outline" className="text-muted-foreground w-fit transition-opacity duration-500">
+          Copied contents to clipboard!
+        </Badge>
+      )}
+      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setValue(value === "editor" ? "preview" : "editor")}>
+        {value === "editor" ? "Preview" : "Editor"}
+      </Button>
+      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setValue("Console")}>
+        Console
+      </Button>
+      {/** File  */}
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            File
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Monaco Editor</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Open File  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => fileInputRef.current?.click()}>
+              Open File
+              <DropdownMenuShortcut>
+                <BookOpenText />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <input ref={fileInputRef} type="file" accept=".md" onChange={onOpen} style={{ display: "none" }} />
+            {/** save */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" disabled={!activeTab?.isDirty} onClick={handleManualSave}>
+              Save
+              <DropdownMenuShortcut>
+                <Save />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** ExportFile  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => handleClick(code, activeTab.name)}>
+              Export
+              <DropdownMenuShortcut>
+                <Download />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/**  Copy Text */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => copyToClipboard(code)}>
+              Place File Contents In Clipboard
+              <DropdownMenuShortcut>
+                <Copy />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/**  Reset Local Storage */}
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <DropdownMenuItem className="text-muted-foreground hover:text-foreground">
+                  Reset Local Storage
+                  <DropdownMenuShortcut>
+                    <ListRestart />
+                  </DropdownMenuShortcut>
+                </DropdownMenuItem>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                  <AlertDialogDescription>This action cannot be undone. This will permanently delete your local storage data that contains the data from your tabs within this editor.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={() => resetLocalStorage()}>Continue</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/** Edit  */}
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            Edit
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            {/** Undo  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "undo", null)}>
+              Undo
+              <DropdownMenuShortcut>
+                <RotateCcw />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Redo  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "redo", null)}>
+              Redo
+              <DropdownMenuShortcut>
+                <RotateCw />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Toggle Line Comment */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "editor.action.commentLine", null)}>
+              Toggle Line Comment
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Go To Line  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "editor.action.gotoLine", null)}>
+              Go To Line
+            </DropdownMenuItem>
+            {/** Format Document  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorRef.current?.trigger("dropdown-menu", "editor.action.formatDocument", null)}>
+              Format Document
+              <DropdownMenuShortcut>
+                <Braces />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Toggle Block Comment  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleBlockComment()}>
+              Toggle Block Comment
+            </DropdownMenuItem>
+            {/** Change All Occurrences  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorChangeAllOccurrences()}>
+              Change All Occurrences
+            </DropdownMenuItem>
+            {/** Toggle Soft Wraps  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleSoftWraps()}>
+              Toggle Soft Wraps
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Font Size */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Font Size</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  {FONT_SIZES.map((size) => (
+                    <DropdownMenuItem
+                      key={size}
+                      onClick={() => {
+                        setFontSize(size)
+                        if (editorRef && editorRef.current) {
+                          editorRef.current.updateOptions({
+                            fontSize: size,
+                          })
+                        }
+                      }}
+                      className={size === fontSize ? "bg-gray-100 dark:bg-gray-700 font-semibold text-muted-foreground hover:text-foreground" : ""}
+                    >
+                      {size}px
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** find  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFind()}>
+              Find
+            </DropdownMenuItem>
+            {/** Find & Replace  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFindReplace()}>
+              Find & Replace
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/** View  */}
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            View
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            {/** Command Palette  */}
+            <DropdownMenuItem
+              className="text-muted-foreground hover:text-foreground"
+              onClick={() => {
+                if (editorRef.current) {
+                  editorRef.current.trigger("dropdown-menu", "editor.action.quickCommand", null)
+                }
+              }}
+            >
+              Command Palette
+            </DropdownMenuItem>
+            {/** Shortcuts */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Shortcuts</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <KBDShortcut
+                    name="Open File"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>O</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Save File"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>S</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Rename Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>R</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Toggle Preview"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>P</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Create Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>N</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Create tab: Typescript"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>T</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Create tab: Markdown"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>M</KBD>
+                      </>
+                    }
+                  />
+
+                  <KBDShortcut
+                    name="Close Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>w</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Close Tab"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>w</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Search"
+                    sc={
+                      <>
+                        <KBD>Alt</KBD>
+                        {" & "}
+                        <KBD>F</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Increase Font Size"
+                    sc={
+                      <>
+                        <KBD>Ctrl</KBD>
+                        {" & "}
+                        <KBD>+</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Decrease Font Size"
+                    sc={
+                      <>
+                        <KBD>Ctrl</KBD>
+                        {" & "}
+                        <KBD>-</KBD>
+                      </>
+                    }
+                  />
+                  <KBDShortcut
+                    name="Open MD Sidebar"
+                    sc={
+                      <>
+                        <KBD>Ctrl</KBD>
+                        {" & "}
+                        <KBD>B</KBD>
+                      </>
+                    }
+                  />
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** fold  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorFoldAll()}>
+              Fold All
+            </DropdownMenuItem>
+            {/** Unfold  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorUnfoldAll()}>
+              Unfold All
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** mini map  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setShowMinimap((prev) => !prev)}>
+              Mini Map
+              <DropdownMenuShortcut>
+                <Map />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Word Wrap  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setWordWrap((prev) => !prev)}>
+              Word Wrap
+              <DropdownMenuShortcut>
+                <TextWrap />
+              </DropdownMenuShortcut>
+            </DropdownMenuItem>
+            {/** Line Numbers  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setShowLineNumbers((prev) => !prev)}>
+              Line Numbers
+            </DropdownMenuItem>
+            {/** toggle renderer */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => setIsPreview(!isPreview)}>
+              {isPreview ? (
+                <>
+                  Code
+                  <DropdownMenuShortcut>
+                    <Code />
+                  </DropdownMenuShortcut>
+                </>
+              ) : (
+                <>
+                  Preview
+                  <DropdownMenuShortcut>
+                    <Eye />
+                  </DropdownMenuShortcut>
+                </>
+              )}
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {/** Toggle Render Whitespace  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleRenderWhitespace()}>
+              {isWhitespaceRendered ? "Hide Whitespace" : "Show Whitespace"}
+            </DropdownMenuItem>
+            {/** Toggle Indent Guides  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleIndentGuides()}>
+              {areIndentGuidesRendered ? "Hide Indent Guides" : "Show Indent Guides"}
+            </DropdownMenuItem>
+            {/** Toggle Sticky Scroll  */}
+            <DropdownMenuItem className="text-muted-foreground hover:text-foreground" onClick={() => editorToggleStickyScroll()}>
+              {isStickyScrollEnabled ? "Disable Sticky Scroll" : "Enable Sticky Scroll"}
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground" onClick={() => setIsSplitView((prev) => !prev)}>
+        {isSplitView ? <SquareSplitHorizontal /> : <SquareSplitHorizontal />}
+      </Button>
+      {isFullscreen ? <TooltipButton icon={<Minus />} onClick={toggleFullscreen} content="Minimize" /> : <TooltipButton icon={<Square />} onClick={toggleFullscreen} content="Maximize" />}
+    </div>
+  )
+  return (
+    <div className="mx-auto max-w-[95vw] w-full border-2 border-border rounded-[10px] shadow-lg !overflow-hidden">
+      <SandboxTabs2 className="h-[85vh]" value={value} onValueChange={setValue}>
+        <div className="flex items-center justify-between border-b border-border bg-background  ">
+          <div className="flex overflow-x-auto">
+            {tabs.map((tab) => (
+              <TabComponent key={tab.id} tab={tab} isActive={tab.id === activeTabId} onClose={closeTab} onSelect={setActiveTabId} />
+            ))}
+          </div>
+          <Toolbar />
+        </div>
+        <SandboxTabsContent2 value="editor" className="flex">
+          {isSplitView ? (
+            <>
+              <div className="flex h-full w-full">
+                <div className="w-1/2">
+                  <SandboxCodeEditor2 setIsClient={setIsClient} activeTab={activeTab} theme={theme} handleEditorChange={handleEditorChange} handleEditorDidMount={handleEditorDidMount} showMinimap={showMinimap} fontSize={fontSize} showLineNumbers={showLineNumbers} editorSettings={editorSettings} isClient={isClient} editorRef={editorRef} className="h-full border-r border-border" />
+                </div>
+                <div className="w-1/2 overflow-auto bg-background">
+                  <div className="mx-auto p-3">
+                    <SandboxPreview2 code={code} />
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <SandboxCodeEditor2 setIsClient={setIsClient} activeTab={activeTab} theme={theme} handleEditorChange={handleEditorChange} handleEditorDidMount={handleEditorDidMount} showMinimap={showMinimap} fontSize={fontSize} showLineNumbers={showLineNumbers} editorSettings={editorSettings} isClient={isClient} editorRef={editorRef} className="flex-1" />
+          )}
+        </SandboxTabsContent2>
+
+        <SandboxTabsContent2 value="preview">
+          <SandboxPreview2 code={code} />
+        </SandboxTabsContent2>
+
+        <SandboxTabsContent2 value="console">
+          <SandboxConsole2
+            logs={[
+              { type: "log", message: "React Live playground started" },
+              { type: "log", message: "Edit App.jsx to see live changes" },
+            ]}
+          />
+        </SandboxTabsContent2>
+      </SandboxTabs2>
+    </div>
+  )
+}