@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/sidebars/variants/dual-sidebar-agnostic.tsx

@@ -0,0 +1,3473 @@
+// #dev IMPORTS
+import { Circle, Check, ChevronRight } from "@catalystsoftware/icons";
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { useIsMobile } from "~/modules/hooks/use-mobile";
+import { cn } from "~/components/catalyst-ui";
+import { Button, Drawer, TooltipProvider, Tooltip, TooltipContent, TooltipTrigger, Input, Skeleton, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/catalyst-ui";
+import { useNavigation, NavLink, useLocation } from "@remix-run/react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { Slot } from "@radix-ui/react-slot";
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+// #enddev
+// #dev CONSTANTS & TYPES
+const DS_COOKIE_NAME = "ds_state";
+const DS_COOKIE_NAME_RIGHT = "ds_state_right";
+const DS_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const DS_WIDTH = "275px";
+const DS_WIDTH_MOBILE = "288px";
+const DS_WIDTH_ICON = "48px";
+const DS_KEYBOARD_SHORTCUT_LEFT = "b";
+const DS_KEYBOARD_SHORTCUT_RIGHT = "g";
+
+const THEME_VERSION = "v3";
+const THEME_OPTIONS = ["neutral", "red", "orange", "green", "blue", "violet", "default"] as const;
+const LOCAL_STORAGE_KEY = "ds-theme-v3";
+
+type DSTheme = (typeof THEME_OPTIONS)[number];
+
+type SidebarVariant = "sidebar" | "inset" | "floating" | "frosted" | "floating-card" | "glass" | "compact-card" | "minimal" | "bordered" | "elevated";
+type SidebarSide = 'left' | 'right'
+type SidebarCollapsible = 'offcanvas' | 'icon' | 'none'
+
+// #enddev
+// #dev CVA VARIANTS STYLES
+const dsVariants = cva('', {
+	variants: {
+		variant: {
+			sidebar: 'fixed inset-y-0 z-20 bg-sidebar flex flex-col transition-transform duration-300 h-full',
+			inset: 'fixed inset-y-0 z-20 bg-sidebar rounded-[15px] flex flex-col transition-transform duration-300 shadow-2xl h-full',
+			floating: 'fixed inset-y-0 z-20 bg-sidebar rounded-[15px] flex flex-col transition-transform duration-300 shadow-2xl h-full',
+			frosted: 'fixed inset-y-0 z-20 backdrop-blur-2xl bg-background/80 border border-white/10 shadow-xl flex flex-col transition-transform duration-300 h-full',
+			card: 'fixed z-20 bg-sidebar rounded-xl shadow-2xl flex flex-col transition-all duration-300 my-[5vh] max-h-[90vh] overflow-auto h-full',
+			glass: 'fixed inset-y-0 z-20 backdrop-blur-xl bg-white/10 border border-white/20 shadow-lg flex flex-col transition-transform duration-300 h-full',
+			'compact-card': 'fixed z-20 bg-sidebar rounded-lg shadow-lg flex flex-col transition-all duration-300 my-2 max-h-[95vh] overflow-auto',
+			bordered: 'fixed inset-y-0 z-20 bg-sidebar border-2 border-primary/20 rounded-lg shadow-sm flex flex-col transition-transform duration-300 h-full',
+			minimal: 'fixed inset-y-0 z-20 bg-sidebar flex flex-col transition-transform duration-300 h-full',
+			elevated: 'fixed inset-y-0 z-20 bg-sidebar shadow-2xl rounded-2xl border border-border/50 flex flex-col transition-transform duration-300 h-full',
+		},
+	},
+	defaultVariants: {
+		variant: 'sidebar',
+	},
+})
+const iconDSVariants = cva('fixed inset-y-0 z-20 hidden h-svh flex-col md:flex', {
+	variants: {
+		variant: {
+			sidebar: 'bg-background',
+			inset: 'bg-sidebar',
+			floating: 'bg-sidebar m-2 rounded-lg max-h-[calc(100vh-16px)]',
+			frosted: 'backdrop-blur-xl bg-background/70',
+			card: 'bg-sidebar rounded-lg my-[5vh] max-h-[90vh]',
+			glass: 'backdrop-blur-lg bg-white/5',
+			'compact-card': 'bg-sidebar rounded-md my-2 max-h-[95vh]',
+			bordered: 'bg-sidebar border-2 border-primary/10',
+			minimal: 'bg-background',
+			elevated: 'bg-sidebar shadow-xl rounded-lg border border-border/30',
+		},
+		side: {
+			left: 'left-0 border-r border-border',
+			right: 'right-0 border-l border-border',
+		},
+	},
+	defaultVariants: {
+		variant: 'sidebar',
+		side: 'left',
+	},
+});
+const DSMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-dual-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:text-primary data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				ghost: "hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent/70",
+				outline: "bg-transparent border border-sidebar-border hover:bg-sidebar-accent hover:border-sidebar-accent data-[active=true]:bg-sidebar-accent data-[active=true]:border-sidebar-accent",
+				soft: "hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent/50",
+				solid: "bg-sidebar-accent/10 hover:bg-sidebar-accent data-[active=true]:bg-primary data-[active=true]:text-primary-foreground",
+				minimal: "hover:text-primary data-[active=true]:text-primary data-[active=true]:font-semibold",
+				bordered: "border-l-2 border-transparent hover:border-sidebar-accent hover:bg-sidebar-accent/20 data-[active=true]:border-primary data-[active=true]:bg-sidebar-accent",
+				pill: "rounded-full hover:bg-sidebar-accent data-[active=true]:bg-primary data-[active=true]:text-primary-foreground",
+			},
+			size: {
+				default: "h-9 text-sm px-3",
+				sm: "h-7 text-xs px-2",
+				lg: "h-11 text-base px-4 group-data-[collapsible=icon]:!p-0",
+				icon: "h-9 w-9 p-0 justify-center",
+			},
+			isActive: {
+				true: "font-medium",
+				false: "",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			isActive: false,
+		},
+	}
+);
+const menuItemVariants = cva("group/menu-item relative flex items-center", {
+	variants: {
+		variant: {
+			default: "",
+			spaced: "my-0.5",
+			compact: "my-0",
+			comfortable: "my-1",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const menuSubButtonVariants = cva(
+	"flex h-8 min-w-0 flex-1 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring transition-all duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground",
+	{
+		variants: {
+			variant: {
+				default: "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				ghost: "hover:bg-sidebar-accent/30 data-[active=true]:bg-sidebar-accent/50",
+				minimal: "hover:text-primary data-[active=true]:text-primary data-[active=true]:font-medium",
+				indent: "pl-6 hover:bg-sidebar-accent/30 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-9 text-sm",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+const menuSubItemVariants = cva("relative flex items-center", {
+	variants: {
+		variant: {
+			default: "",
+			indented: "pl-4 border-l border-sidebar-border/50 ml-2",
+			dotted: "pl-6 before:content-[''] before:absolute before:left-2 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-sidebar-foreground/30",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const menuBadgeVariants = cva(
+	"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+	{
+		variants: {
+			variant: {
+				default: "bg-sidebar-accent text-sidebar-accent-foreground",
+				primary: "bg-primary text-primary-foreground",
+				secondary: "bg-secondary text-secondary-foreground",
+				success: "bg-green-500/10 text-green-600 dark:text-green-400",
+				warning: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+				danger: "bg-red-500/10 text-red-600 dark:text-red-400",
+				outline: "border border-sidebar-border bg-transparent",
+				ghost: "bg-sidebar-accent/30 text-sidebar-accent-foreground",
+				dot: "min-w-2 w-2 h-2 rounded-full p-0 bg-primary",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+const groupVariants = cva("relative flex w-full min-w-0 flex-col p-2", {
+	variants: {
+		variant: {
+			default: "",
+			separated: "border-t border-sidebar-border pt-4 mt-2",
+			card: "bg-sidebar-accent/5 rounded-lg p-3 m-1",
+			bordered: "border border-sidebar-border rounded-md p-3 m-1",
+			subtle: "bg-sidebar-accent/3 p-3",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const groupLabelVariants = cva(
+	"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "",
+				prominent: "font-semibold text-sidebar-foreground uppercase tracking-wider",
+				subtle: "text-xs text-muted-foreground",
+				separated: "border-b border-sidebar-border pb-2 mb-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+const drawerVariants = cva("", {
+	variants: {
+		variant: {
+			default: "bg-background",
+			card: "bg-card rounded-t-xl shadow-xl",
+			glass: "backdrop-blur-xl bg-background/80 border-t border-white/10",
+			elevated: "bg-background shadow-2xl",
+			bordered: "bg-background border-t-2 border-primary/20",
+		},
+		size: {
+			default: "h-[80vh]",
+			sm: "h-[50vh]",
+			md: "h-[70vh]",
+			lg: "h-[90vh]",
+			full: "h-screen",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+const loadingVariants = cva(
+	"flex flex-col items-center justify-center text-center p-8 min-h-[400px] h-screen bg-gradient-to-b from-background to-muted/20",
+	{
+		variants: {
+			variant: {
+				default: "",
+				minimal: "bg-transparent from-transparent to-transparent",
+				card: "bg-card rounded-lg shadow-lg max-h-[600px]",
+				centered: "h-auto min-h-[300px]",
+			},
+			size: {
+				default: "w-[256px]",
+				sm: "w-[200px]",
+				md: "w-[280px]",
+				lg: "w-[320px]",
+				full: "w-full",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+const insetVariants = cva(
+	"relative flex flex-1 flex-col mx-auto bg-background min-w-0 flex-grow transition-[margin] duration-300",
+	{
+		variants: {
+			variant: {
+				default: "bg-background w-full h-full",
+				inset: "bg-background rounded-[15px] mt-[7px] overflow-hidden h-[calc(100vh-20px)] w-[calc(100vw-130px)",
+				card: "bg-card rounded-xl shadow-lg m-4 h-[calc(100vh-32px)]",
+				bordered: "bg-background border-2 border-border rounded-lg m-2 h-[calc(100vh-16px)]",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+const separatorVariants = cva("mx-2 w-auto bg-sidebar-border", {
+	variants: {
+		variant: {
+			default: "h-px",
+			thick: "h-0.5",
+			dashed: "h-px border-t border-dashed border-sidebar-border bg-transparent",
+			gradient: "h-px bg-gradient-to-r from-transparent via-sidebar-border to-transparent",
+		},
+		spacing: {
+			default: "my-2",
+			sm: "my-1",
+			lg: "my-4",
+			none: "my-0",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		spacing: "default",
+	},
+});
+const headerFooterVariants = cva("flex flex-col gap-2 p-2", {
+	variants: {
+		variant: {
+			default: "",
+			bordered: "border-b border-sidebar-border",
+			elevated: "shadow-sm",
+			compact: "p-1 gap-1",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+// #enddev
+// #dev CONTEXT TYPES & CONTEXTS
+type DSContextProps = {
+	leftState: "expanded" | "collapsed";
+	rightState: "expanded" | "collapsed";
+	openLeft: boolean;
+	openRight: boolean;
+	setOpenLeft: (open: boolean) => void;
+	setOpenRight: (open: boolean) => void;
+	openMobile: boolean;
+	openMobileRight: boolean;
+	setOpenMobile: (open: boolean) => void;
+	setOpenMobileRight: (open: boolean) => void;
+	isMobile: boolean;
+	sidebarWidth: number;
+	toggleLeft: () => void;
+	toggleRight: () => void;
+
+	leftVariant: SidebarVariant;
+	rightVariant: SidebarVariant;
+	setLeftVariant: (variant: SidebarVariant) => void;
+	setRightVariant: (variant: SidebarVariant) => void;
+
+	isIconLeftActive: boolean;
+	setIsIconLeftActive: (open: boolean) => void;
+	iconLeftWidth: number;
+	setIconLeftWidth: (width: number) => void;
+
+	isIconRightActive: boolean;
+	setIsIconRightActive: (open: boolean) => void;
+	iconRightWidth: number;
+	setIconRightWidth: (width: number) => void;
+
+	topHeight: string;
+	setTopHeight: (height: string) => void;
+
+	bottomHeight: string;
+	setBottomHeight: (height: string) => void;
+};
+
+interface DSThemeContextProps {
+	theme: DSTheme;
+	setTheme: (theme: DSTheme) => void;
+	themeVars: Record<string, string>;
+}
+
+const DSContext = createContext<DSContextProps | null>(null);
+const DSThemeContext = createContext<DSThemeContextProps | undefined>(undefined);
+// #enddev
+// #dev HOOKS
+
+function useDS() {
+	const context = useContext(DSContext);
+	if (!context) throw new Error("useDS must be used within DSProvider");
+	return context;
+}
+
+function useDSTheme() {
+	const ctx = useContext(DSThemeContext);
+	if (!ctx) throw new Error("useDSTheme must be used within DSProvider");
+	return ctx;
+}
+
+// #enddev
+// #dev THEME PROVIDER (Internal - used by DSProvider)
+
+const DSThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	const storageKey = LOCAL_STORAGE_KEY;
+	const Context = DSThemeContext;
+
+	const [theme, setTheme] = React.useState<DSTheme>(() => {
+		if (typeof window !== "undefined") {
+			const storedTheme = localStorage.getItem(storageKey);
+			if (storedTheme && THEME_OPTIONS.includes(storedTheme as DSTheme)) {
+				return storedTheme as DSTheme;
+			}
+		}
+		return "default";
+	});
+
+	const themeVars = React.useMemo(() => {
+		if (theme === "default") return {};
+		return (colorThemes as any)[theme]?.[THEME_VERSION]?.dark || {};
+	}, [theme]);
+
+	React.useEffect(() => {
+		if (typeof window !== "undefined") {
+			localStorage.setItem(storageKey, theme);
+		}
+	}, [theme, storageKey]);
+
+	React.useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		const prefix = "--dual";
+
+		if (Object.keys(themeVars).length > 0) {
+			Object.entries(themeVars).forEach(([key, value]) => {
+				const newKey = key.replace("--sidebar", prefix);
+				root.style.setProperty(newKey, String(value));
+			});
+		}
+
+		return () => {
+			Object.keys(themeVars).forEach((key) => {
+				const newKey = key.replace("--sidebar", prefix);
+				root.style.removeProperty(newKey);
+			});
+		};
+	}, [themeVars]);
+
+	return <Context.Provider value={{ theme, setTheme, themeVars }}>{children}</Context.Provider>;
+};
+
+// #enddev
+// #dev DSThemeSelector - Theme selector component
+
+function DSThemeSelector({ size = 28, className, children }: { size?: number; className?: string; children: React.ReactNode; }) {
+	const { theme, setTheme } = useDSTheme();
+	const [open, setOpen] = React.useState(false);
+	const [flyingTheme, setFlyingTheme] = React.useState<DSTheme | null>(null);
+	const [showOverlay, setShowOverlay] = React.useState(false);
+	const [flyingButtonPos, setFlyingButtonPos] = React.useState<{ left: number; top: number } | null>(null);
+	const [mainButtonOriginalPos, setMainButtonOriginalPos] = React.useState<{ left: number; top: number } | null>(null);
+	const mainButtonRef = React.useRef<HTMLButtonElement>(null);
+
+	const radius = size * 1.6;
+	const themeList = THEME_OPTIONS;
+	const mainButtonCenterOffset = size * 1.5;
+	const mainButtonSize = size;
+
+	function getThemeColor(t: string) {
+		const themeObj = colorThemes[t as DSTheme]?.[THEME_VERSION]?.dark;
+		const primaryColor = themeObj?.["--primary"];
+		if (primaryColor) {
+			if (primaryColor.startsWith("oklch")) {
+				return primaryColor;
+			} else {
+				return `hsl(${primaryColor})`;
+			}
+		}
+		return "#888";
+	}
+
+	const handleMainButtonClick = () => {
+		if (flyingTheme) return;
+		if (!open && mainButtonRef.current) {
+			const rect = mainButtonRef.current.getBoundingClientRect();
+			setMainButtonOriginalPos({
+				left: rect.left + rect.width / 2,
+				top: rect.top + rect.height / 2,
+			});
+		}
+		setOpen((v) => !v);
+		setShowOverlay(!open);
+	};
+
+	const handleThemeSelect = (t: DSTheme, event: React.MouseEvent<HTMLButtonElement>) => {
+		const button = event.currentTarget;
+		const rect = button.getBoundingClientRect();
+
+		setFlyingButtonPos({
+			left: rect.left + rect.width / 2,
+			top: rect.top + rect.height / 2,
+		});
+
+		setFlyingTheme(t);
+		setShowOverlay(true);
+		setOpen(false);
+
+		setTimeout(() => {
+			setTheme(t);
+		}, 300);
+
+		setTimeout(() => {
+			setShowOverlay(false);
+			setFlyingTheme(null);
+			setFlyingButtonPos(null);
+			setMainButtonOriginalPos(null);
+		}, 600);
+	};
+
+	let mainButtonStyle: React.CSSProperties = {
+		zIndex: 70,
+	};
+
+	if (open || mainButtonOriginalPos) {
+		const targetLeft = open ? window.innerWidth / 2 : mainButtonOriginalPos?.left || window.innerWidth / 2;
+		const targetTop = open ? window.innerHeight / 2 : mainButtonOriginalPos?.top || window.innerHeight / 2;
+
+		mainButtonStyle = {
+			...mainButtonStyle,
+			position: "fixed",
+			left: `${targetLeft}px`,
+			top: `${targetTop}px`,
+			transform: "translate(-50%, -50%)",
+		};
+	} else {
+		mainButtonStyle = {
+			...mainButtonStyle,
+			position: "absolute",
+			left: mainButtonCenterOffset - mainButtonSize / 2,
+			top: mainButtonCenterOffset - mainButtonSize / 2,
+		};
+	}
+
+	return (
+		<>
+			{showOverlay && <div
+				className="fixed inset-0 bg-black/60 transition-opacity duration-500 theme-overlay"
+			//	style={{ zIndex: Z_INDEX.OVERLAY, position: 'fixed', }}
+			/>}
+
+			<div
+				className={cn("flex items-center justify-center transition-all duration-1000 theme-container", className)}
+				style={{
+					width: size * 3,
+					height: size * 3,
+					// zIndex: Z_INDEX.CONTAINER,
+					position: open ? 'static' : 'relative',
+					isolation: 'isolate',
+				}}
+			>
+				<button
+					ref={mainButtonRef}
+					onClick={handleMainButtonClick}
+					className={cn(
+						"flex items-center justify-center rounded-full bg-background shadow-lg transition-all duration-500 theme-main-button",
+						`h-[${mainButtonSize}px] w-[${mainButtonSize}px]`,
+						open ? "bg-sidebar-accent text-sidebar-accent-foreground" : "",
+						open || mainButtonOriginalPos ? "!fixed" : ""
+					)}
+					style={{
+						...mainButtonStyle,
+						//	zIndex: Z_INDEX.MAIN_BUTTON,
+					}}
+				>
+					{children}
+				</button>
+
+				{themeList.map((t, i) => {
+					const angle = (360 / themeList.length) * i - 90;
+					const rad = (angle * Math.PI) / 180;
+					const radialX = Math.cos(rad) * radius;
+					const radialY = Math.sin(rad) * radius;
+
+					let currentX = 0;
+					let currentY = 0;
+					let currentScale = 0;
+					let currentOpacity = 0;
+					let currentZIndex = 10;
+					let currentDelay = open ? `${i * 90}ms` : "0ms";
+					let isFixed = false;
+					let fixedLeft = 0;
+					let fixedTop = 0;
+
+					if (flyingTheme === t) {
+						isFixed = true;
+						currentScale = 1.2;
+						currentOpacity = 1;
+						currentZIndex = 10000;
+						currentDelay = "0ms";
+						fixedLeft = window.innerWidth / 2;
+						fixedTop = window.innerHeight / 2;
+					} else if (open) {
+						isFixed = true;
+						fixedLeft = window.innerWidth / 2 + radialX;
+						fixedTop = window.innerHeight / 2 + radialY;
+						currentScale = 1;
+						currentOpacity = 1;
+						currentZIndex = 10;
+					} else if (!open && flyingTheme === null) {
+						currentX = 0;
+						currentY = 0;
+						currentScale = 0;
+						currentOpacity = 0;
+						currentZIndex = 10;
+					}
+
+					const buttonSize = size * 1;
+					const buttonOffset = buttonSize / 2;
+
+					return (
+						<button
+							key={t}
+							style={{
+								width: buttonSize,
+								height: buttonSize,
+								...(isFixed
+									? {
+										left: `${fixedLeft}px`,
+										top: `${fixedTop}px`,
+										transform: `translate(-50%, -50%) scale(${currentScale})`,
+									}
+									: {
+										left: mainButtonCenterOffset + currentX - buttonOffset,
+										top: mainButtonCenterOffset + currentY - buttonOffset,
+										transform: `scale(${currentScale})`,
+									}),
+								// zIndex: flyingTheme === t ? Z_INDEX.FLYING_THEME : Z_INDEX.MAIN_BUTTON,
+								opacity: currentOpacity,
+								transitionDelay: currentDelay,
+								transitionTimingFunction: flyingTheme === t ? "cubic-bezier(0.8, -0.5, 0.2, 1.5)" : "ease-out"
+							}}
+							className={cn(
+								`rounded-full border bg-background shadow transition-all duration-500 flex items-center justify-center`,
+								theme === t ? "ring-2 ring-primary border-primary" : "border-muted hover:ring-2 hover:ring-primary",
+								flyingTheme === t ? "ring-4 ring-primary !fixed" : open ? "!fixed" : "absolute",
+								flyingTheme === t ? "theme-flying-theme" : "theme-buttons",
+							)}
+							aria-label={`Switch to ${t} theme`}
+							onClick={(e) => handleThemeSelect(t as DSTheme, e)}
+							disabled={!!flyingTheme}
+						>
+							<Circle style={{ color: getThemeColor(t), fill: getThemeColor(t) }} size={size * 0.3} />
+						</button>
+					);
+				})}
+			</div>
+		</>
+	);
+}
+
+// #enddev
+// #dev SIDEBAR PROVIDER (Internal - used by DSProvider)
+
+const DSProvider = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		defaultOpenLeft?: boolean;
+		defaultOpenRight?: boolean;
+		defaultWidth?: string;
+	}
+>(({ defaultOpenLeft = false, defaultOpenRight = false, defaultWidth = DS_WIDTH, className, style, children, ...props }, ref) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = useState(false);
+	const [openMobileRight, setOpenMobileRight] = useState(false);
+
+	const [openLeft, setOpenLeft] = useState(defaultOpenLeft);
+	const [openRight, setOpenRight] = useState(defaultOpenRight);
+
+	const [leftVariant, setLeftVariant] = useState("sidebar");
+	const [rightVariant, setRightVariant] = useState("sidebar");
+
+	const [isIconLeftActive, setIsIconLeftActive] = useState(false);
+	const [iconLeftWidth, setIconLeftWidth] = useState("0px");
+
+	const [isIconRightActive, setIsIconRightActive] = useState(false);
+	const [iconRightWidth, setIconRightWidth] = useState("0px");
+
+	const [topHeight, setTopHeight] = useState("0px");
+	const [bottomHeight, setBottomHeight] = useState("0px");
+
+	const sidebarWidth = defaultWidth;
+	const cookieName = DS_COOKIE_NAME;
+	const cookieNameRight = DS_COOKIE_NAME_RIGHT;
+
+	const openL = openLeft;
+	const openR = openRight;
+
+	const toggleLeft = useCallback(() => {
+		isMobile ? setOpenMobile((p) => !p) : setOpenLeft((p) => !p);
+		document.cookie = `${cookieName}=${openL}; path=/; max-age=${DS_COOKIE_MAX_AGE}`;
+	}, [isMobile]);
+
+	const toggleRight = useCallback(() => {
+		isMobile ? setOpenMobileRight((p) => !p) : setOpenRight((p) => !p);
+		document.cookie = `${cookieNameRight}=${openR}; path=/; max-age=${DS_COOKIE_MAX_AGE}`;
+	}, [isMobile]);
+
+	useEffect(() => {
+		const shortcutLeft = DS_KEYBOARD_SHORTCUT_LEFT;
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === shortcutLeft && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				//  toggleLeft(prev => !prev);
+				toggleLeft();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleLeft]);
+
+	useEffect(() => {
+		const shortcutRight = DS_KEYBOARD_SHORTCUT_RIGHT;
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === shortcutRight && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				//  toggleRight(prev => !prev);
+				toggleRight();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleRight]);
+
+	const leftState = openL ? "expanded" : "collapsed";
+	const rightState = openR ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<DSContextProps>(
+		() => ({
+			leftState,
+			rightState,
+
+			openLeft,
+			setOpenLeft,
+
+			openRight,
+			setOpenRight,
+
+			toggleLeft,
+			toggleRight,
+
+			isMobile,
+
+			openMobile,
+			setOpenMobile,
+			openMobileRight,
+			setOpenMobileRight,
+
+			sidebarWidth,
+
+			leftVariant,
+			setLeftVariant,
+			rightVariant,
+			setRightVariant,
+
+			isIconLeftActive,
+			setIsIconLeftActive,
+			iconLeftWidth,
+			setIconLeftWidth,
+
+			isIconRightActive,
+			setIsIconRightActive,
+			iconRightWidth,
+			setIconRightWidth,
+
+			topHeight,
+			setTopHeight,
+			bottomHeight,
+			setBottomHeight,
+		}),
+		[isMobile, openLeft, leftVariant, openRight, rightVariant, isIconLeftActive, iconLeftWidth, isIconRightActive, iconRightWidth, topHeight, bottomHeight, sidebarWidth]
+	);
+
+	const Context = DSContext;
+
+	return (
+			<NavigationProvider>
+		<DSThemeProvider>
+			<Context.Provider value={contextValue}>
+				<TooltipProvider delayDuration={0}>
+					<div
+						style={
+							{
+								"--dual-sidebar-width": sidebarWidth,
+								"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+								...style,
+							} as React.CSSProperties
+						}
+						className={cn(
+							"group/dual-sidebar-wrapper flex min-h-svh w-full",
+							leftVariant === 'inset' || rightVariant === 'inset' ? "bg-sidebar" : null,
+							"w-[100vw] h-[100vh] overflow-hidden",
+							//"bg-[#111827] ",
+							className
+						)}
+						ref={ref}
+						{...props}
+					>
+						{children}
+					</div>
+				</TooltipProvider>
+			</Context.Provider>
+		</DSThemeProvider>
+			</NavigationProvider>
+	);
+});
+DSProvider.displayName = "DSProvider";
+
+// #enddev
+// #dev INSET
+
+const DSInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ children, variant = "default", className, ...props }, ref) => {
+	const { openLeft, openRight, sidebarWidth, leftVariant, rightVariant, isIconLeftActive, iconLeftWidth, isIconRightActive, iconRightWidth, topHeight, bottomHeight } = useDS();
+	let paddingTop = topHeight;
+	let paddingBottom = bottomHeight;
+	let marginLeft = "0px";
+	let marginRight = "0px";
+	let leftWidth = sidebarWidth;
+	let rightWidth = sidebarWidth;
+	const closedGap = "8px";
+
+	if (isIconLeftActive) {
+		leftWidth = `calc(${iconLeftWidth} + ${sidebarWidth})`;
+	}
+	if (isIconRightActive) {
+		rightWidth = `calc(${iconRightWidth} + ${sidebarWidth})`;
+	}
+
+	if (isIconLeftActive) {
+		marginLeft = iconLeftWidth;
+	} else {
+		marginLeft = closedGap;
+	}
+
+	if (isIconRightActive) {
+		marginRight = iconRightWidth;
+	} else {
+		marginRight = closedGap;
+	}
+
+	if (openLeft && (leftVariant === "sidebar" || leftVariant === "inset")) {
+		marginLeft = leftWidth;
+	}
+
+	if (openRight && (rightVariant === "sidebar" || rightVariant === "inset")) {
+		marginRight = `calc(${rightWidth} + 17px)`;
+	}
+
+	let maxWidth = "none"; // Default value
+	if (isIconLeftActive) marginLeft = `calc(${marginLeft} + 12px)`;
+	if (isIconLeftActive && isIconRightActive && (leftVariant === "inset" || rightVariant === "inset")) {
+		maxWidth = `calc(100vw - ${iconLeftWidth} - ${iconRightWidth} - 28px)`;
+	}
+
+	const insetClass = "bg-background rounded-[15px] mt-[7px] overflow-hidden h-[calc(100vh-20px)] w-[calc(100vw-130px) relative flex flex-1 flex-col overflow-hidden";
+	const defaultVisualClasses = "bg-background w-full h-full";
+	const floatingClass = "";
+	const sidebarClass = "";
+	return (
+		<main
+			ref={ref}
+			/**className={cn(
+				"relative flex flex-1 flex-col mx-auto bg-background min-w-0 flex-grow",
+				"transition-[margin] duration-300",
+				leftVariant === "inset" || rightVariant === "inset" ? insetClass : defaultVisualClasses,
+				"flex-1 transition-all duration-300",
+
+				className
+			)} */
+			className={cn(
+				insetVariants({ variant }),
+				className
+			)}
+			style={{
+				marginLeft,
+				marginRight,
+				paddingTop,
+				paddingBottom,
+				maxWidth,
+			}}
+			{...props}
+		>
+			{children}
+		</main>
+	);
+});
+DSInset.displayName = "DSInset";
+
+// #enddev
+// #dev DSLeft - Left Sidebar Component
+
+const DSLeft = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+		loadingUI?: boolean;
+	}
+>(({ variant = "sidebar", collapsible = "offcanvas", className, children, loadingUI = true, ...props }, ref) => {
+	const { isMobile, leftState, openMobile, setOpenMobile, openLeft, sidebarWidth, setLeftVariant, isIconLeftActive, setIsIconLeftActive, iconLeftWidth, setIconLeftWidth } = useDS();
+
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+
+	useEffect(() => {
+		setLeftVariant(variant);
+	}, [variant, setLeftVariant]);
+
+	useEffect(() => {
+		if (navigation.state === "idle" && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	const showLoading = loadingUI && navigation.state === "loading" && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--dual-sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		);
+	}
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent data-dual-sidebar="sidebar" data-mobile="true" className="w-[--dual-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" style={{ "--dual-sidebar-width": DS_WIDTH_MOBILE } as React.CSSProperties} side="left">
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{showLoading ? <DSLoading /> : children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	// const baseClasses = `fixed inset-y-0 left-1 z-20 w-72 bg-sidebar rounded-[15px] flex flex-col transition-transform duration-300 shadow-2xl`;
+	const closedOffset = "8px";
+	const iconOffset = isIconLeftActive ? iconLeftWidth : "0px";
+	const transformClass = openLeft ? "translate-x-0" : "translate-x-[calc(-100%-4px)]";
+	return (
+		<div
+			className={cn(
+				dsVariants({ variant, side: "left" }),
+				transformClass,
+				!isIconLeftActive && "left-0",
+				className
+			)}
+			style={{
+				width: sidebarWidth,
+				"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+				left: isIconLeftActive ? iconOffset : undefined,
+				transform: openLeft ? "translateX(0)" : `translateX(calc(-100% - ${closedOffset}))`,
+			}}
+			{...props}
+		>
+			{showLoading ? <DSLoading /> : children}
+		</div>
+	);
+});
+DSLeft.displayName = "DSLeft";
+
+// #enddev
+// #dev DSLeftIcon - Fixed Icon Sidebar
+
+const DSLeftIcon = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		// We assume the desired width is DS_WIDTH_ICON or similar constant
+		iconWidth?: string;
+		variant?: SidebarVariant;
+
+	}
+>(({ iconWidth = DS_WIDTH_ICON, variant = "sidebar", className, children, ...props }, ref) => {
+	// 1. Communicate its existence and width to the context (NEW STATE)
+	const { setIsIconLeftActive, setIconLeftWidth, leftVariant } = useDS(); // Assumes new context setters
+
+	// Set context state on mount/unmount
+	useEffect(() => {
+		setIsIconLeftActive(true);
+		setIconLeftWidth(iconWidth);
+		return () => {
+			setIsIconLeftActive(false);
+			setIconLeftWidth("0px");
+		};
+	}, [iconWidth, setIsIconLeftActive, setIconLeftWidth]);
+
+	return (
+		<div
+			ref={ref}
+			/**	className={cn(
+					leftVariant === "inset" ? "bg-sidebar" : "bg-background",
+					"fixed inset-y-0 left-0 z-20 hidden h-svh flex-col md:flex",
+					// Transition/width applied via style
+					className
+				)} */
+			className={cn(
+				iconDSVariants({ variant: leftVariant, side: "left" }),
+				className
+			)}
+			style={
+				{
+					// Set the width for this specific component
+					"--dual-sidebar-icon-width-fixed": iconWidth,
+					width: iconWidth, // Apply width directly
+				} as React.CSSProperties
+			}
+			data-side="left-icon"
+			{...props}
+		>
+			<div
+				className="flex h-full w-full flex-col bg-sidebar border-r border-border" // Add a right border
+			>
+				{children}
+			</div>
+		</div>
+	);
+});
+DSLeftIcon.displayName = "DSLeftIcon";
+
+// #enddev
+// #dev DSRight - Right Sidebar Component
+
+const DSRight = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+		loadingUI?: boolean;
+	}
+>(({ variant = "sidebar", collapsible = "offcanvas", className, children, loadingUI = true, ...props }, ref) => {
+	const { isMobile, rightState, openMobileRight, setOpenMobileRight, openRight, sidebarWidth, setRightVariant, isIconRightActive, setIsIconRightActive, iconRightWidth, setIconRightWidth } = useDS();
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+
+	useEffect(() => {
+		setRightVariant(variant);
+	}, [variant, setRightVariant]);
+
+	React.useEffect(() => {
+		if (navigation.state === "idle" && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	// Show loading only during initial load if loadingUI is enabled
+	const showLoading = loadingUI && navigation.state === "loading" && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--dual-sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobileRight} onOpenChange={setOpenMobileRight} {...props}>
+				<SheetContent
+					data-dual-sidebar="sidebar"
+					data-mobile="true"
+					className="w-[--dual-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+					style={{ "--dual-sidebar-width": DS_WIDTH_MOBILE } as React.CSSProperties}
+					side="right"
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{showLoading ? <DSLoading /> : children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+	const closedOffset = "8px";
+	const iconOffset = isIconRightActive ? iconRightWidth : "0px";
+	const baseClasses = `fixed inset-y-0 right-1 z-20 w-72 bg-sidebar rounded-[15px] flex flex-col transition-transform duration-300 shadow-2xl`;
+	const transformClass = openRight ? "translate-x-0" : "translte-x-[calc(100%+4px)]"; // Hide completely + offset for parent margin/bordera
+
+	return (
+		<div
+			//className={cn(baseClasses, transformClass, !isIconRightActive && "right-0", className)}
+			className={cn(
+				dsVariants({ variant, side: "right" }),
+				transformClass,
+				!isIconRightActive && "right-0",
+				className
+			)}
+			style={{
+				width: sidebarWidth,
+				"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+				right: isIconRightActive ? iconOffset : undefined,
+				transform: openRight ? "translateX(0)" : `translateX(calc(100% + ${closedOffset}))`,
+			}}
+			{...props}
+		>
+			{showLoading ? <DSLoading /> : children}
+		</div>
+	);
+});
+DSRight.displayName = "DSRight";
+
+// #enddev
+// #dev DSRightIcon - Fixed Icon Sidebar
+
+const DSRightIcon = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		// We assume the desired width is DS_WIDTH_ICON or similar constant
+		iconWidth?: string;
+		variant?: SidebarVariant;
+	}
+>(({ iconWidth = DS_WIDTH_ICON, variant = "sidebar", className, children, ...props }, ref) => {
+	// 1. Communicate its existence and width to the context (NEW STATE)
+	const { setIsIconRightActive, setIconRightWidth, rightVariant } = useDS(); // Assumes new context setters
+
+	// Set context state on mount/unmount
+	useEffect(() => {
+		setIsIconRightActive(true);
+		setIconRightWidth(iconWidth);
+		return () => {
+			setIsIconRightActive(false);
+			setIconRightWidth("0px");
+		};
+	}, [iconWidth, setIsIconRightActive, setIconRightWidth]);
+
+	return (
+		<div
+			ref={ref}
+			/**className={cn(
+				//  rightVariant === 'inset' ? 'bg-sidebar' : 'bg-background',
+				"fixed inset-y-0 right-0 z-20 hidden h-svh flex-col md:flex",
+				// Transition/width applied via style
+				className
+			)} */
+			className={cn(
+				iconDSVariants({ variant: rightVariant, side: "right" }),
+				className
+			)}
+			style={
+				{
+					// Set the width for this specific component
+					"--dual-sidebar-icon-width-fixed": iconWidth,
+					width: iconWidth, // Apply width directly
+				} as React.CSSProperties
+			}
+			data-side="right-icon"
+			{...props}
+		>
+			<div
+				className="flex h-full w-full flex-col bg-sidebar border-l border-border" // Add a right border
+			>
+				{children}
+			</div>
+		</div>
+	);
+});
+DSRightIcon.displayName = "DSRightIcon";
+
+// #enddev
+// #dev DSTrigger - Toggle button for sidebars
+
+function DSBurger({ opened, size = "md", color = "currentColor", onClick }: any) {
+	const [internalOpened, setInternalOpened] = React.useState(false);
+	const isOpened = opened !== undefined ? opened : internalOpened;
+
+	const sizeClasses = {
+		sm: "w-4 h-4",
+		md: "w-6 h-6",
+		lg: "w-8 h-8",
+		xl: "w-10 h-10",
+	};
+
+	const lineHeight = {
+		sm: "2px",
+		md: "2px",
+		lg: "3px",
+		xl: "3px",
+	};
+
+	const handleClick = () => {
+		if (opened === undefined) {
+			setInternalOpened(!internalOpened);
+		}
+		onClick?.();
+	};
+
+	return (
+		<button className={cn("relative cursor-pointer bg-transparent border-none p-0", sizeClasses[size])} style={{ color }} onClick={handleClick} aria-label={isOpened ? "Close menu" : "Open menu"}>
+			<span
+				className={cn("absolute left-0 block transition-all duration-300 ease-in-out rounded-full bg-current")}
+				style={{
+					width: "100%",
+					height: lineHeight[size],
+					top: "50%",
+					transformOrigin: "center",
+					transform: isOpened ? "translateY(-50%) rotate(45deg)" : "translateY(-50%) translateY(-6px)",
+				}}
+			/>
+			<span
+				className={cn("absolute left-0 top-1/2 block transition-all duration-300 ease-in-out rounded-full bg-current")}
+				style={{
+					width: "100%",
+					height: lineHeight[size],
+					opacity: isOpened ? 0 : 1,
+					transform: "translateY(-50%)",
+					transformOrigin: "center",
+				}}
+			/>
+			<span
+				className={cn("absolute left-0 block transition-all duration-300 ease-in-out rounded-full bg-current")}
+				style={{
+					width: "100%",
+					height: lineHeight[size],
+					top: "50%",
+					transformOrigin: "center",
+					transform: isOpened ? "translateY(-50%) rotate(-45deg)" : "translateY(-50%) translateY(6px)",
+				}}
+			/>
+		</button>
+	);
+}
+
+const DSTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button> & { side?: "left" | "right" }>(({ side = "left", className, onClick, ...props }, ref) => {
+	const { toggleLeft, toggleRight, openLeft, openRight } = useDS();
+	const open = side === "left" ? openLeft : openRight;
+	const handleClick = () => {
+		if (side === "left") {
+			toggleLeft();
+		} else {
+			toggleRight();
+		}
+	};
+	return (
+		<Button
+			ref={ref}
+			data-dual-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("h-7 w-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				handleClick();
+			}}
+			{...props}
+		>
+			<DSBurger opened={open} />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+});
+DSTrigger.displayName = "DSTrigger";
+
+// #enddev
+// #dev DSRAIL
+
+const DSLeftRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { side?: SidebarSide }>(({ side = "left", className, ...props }, ref) => {
+	const { toggleLeft } = useDS();
+
+	return (
+		<button
+			ref={ref}
+			data-dual-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleLeft}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border -right-4 ",
+				"cursor-w-resize",
+				"group-data-[state=collapsed]:cursor-e-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"group-data-[collapsible=offcanvas]:-right-2",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSLeftRail.displayName = "DSLeftRail";
+
+const DSRightRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { side?: "left" | "right" }>(({ side = "right", className, ...props }, ref) => {
+	const { toggleRight } = useDS();
+
+	return (
+		<button
+			ref={ref}
+			data-dual-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleRight}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border left-0 sm:flex",
+				"cursor-e-resize",
+				"group-data-[state=collapsed]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"group-data-[data-collapsible=offcanvas]:-left-2",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSRightRail.displayName = "DSRightRail";
+// #enddev
+// #dev DS Sub-components (Header, Footer, Content)
+
+const DSHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-dual-sidebar="header"
+			className={cn(
+				"flex flex-col gap-2 p-2",
+				"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+				"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSHeader.displayName = "DSHeader";
+
+const DSFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-dual-sidebar="footer"
+			className={cn(
+				"flex flex-col gap-2 p-2",
+				"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+				"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSFooter.displayName = "DSFooter";
+
+const DSSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(({ className, ...props }, ref) => {
+	return <Separator ref={ref} data-dual-sidebar="separator" className={cn("mx-2 w-auto bg-sidebar-border", className)} {...props} />;
+});
+DSSeparator.displayName = "DSSeparator";
+
+const DSContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-dual-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[collapsible=icon]:overflow-hidden",
+				"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+				"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSContent.displayName = "DSContent";
+
+const DSInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(({ className, ...props }, ref) => {
+	return <Input ref={ref} data-dual-sidebar="input" className={cn("h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", className)} {...props} />;
+});
+DSInput.displayName = "DSInput";
+
+// #enddev
+// #dev DS Sub-components group
+
+const DSGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return <div ref={ref} data-dual-sidebar="group" className={cn("relative flex w-full min-w-0 flex-col p-2", className)} {...props} />;
+});
+DSGroup.displayName = "DSGroup";
+
+const DSGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "div";
+	return (
+		<Comp
+			ref={ref}
+			data-dual-sidebar="group-label"
+			className={cn(
+				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSGroupLabel.displayName = "DSGroupLabel";
+
+const DSGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-dual-sidebar="group-action"
+			className={cn(
+				"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"after:absolute after:-inset-2 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSGroupAction.displayName = "DSGroupAction";
+
+const DSGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => <div ref={ref} data-dual-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />);
+DSGroupContent.displayName = "DSGroupContent";
+
+// #enddev
+// #dev MENU
+const DSMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => <ul ref={ref} data-dual-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />);
+DSMenu.displayName = "DSMenu";
+
+const DSMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => <li ref={ref} data-dual-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />);
+DSMenuItem.displayName = "DSMenuItem";
+
+const DSMenuButton = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		isActive?: boolean;
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+		side: "left" | "right";
+	} & VariantProps<typeof DSMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, side, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, leftState, rightState } = useDS();
+
+	const button = <Comp ref={ref} data-dual-sidebar="menu-button" data-size={size} data-active={isActive} className={cn(DSMenuButtonVariants({ variant, size }), className)} {...props} />;
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent side={side === "left" ? "right" : "left"} align="center" hidden={(leftState || rightState) !== "collapsed" || isMobile} {...tooltip} />
+		</Tooltip>
+	);
+});
+DSMenuButton.displayName = "DSMenuButton";
+
+const DSMenuAction = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		showOnHover?: boolean;
+	}
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-dual-sidebar="menu-action"
+			className={cn(
+				"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+				"after:absolute after:-inset-2 after:md:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSMenuAction.displayName = "DSMenuAction";
+
+const DSMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		data-dual-sidebar="menu-badge"
+		className={cn(
+			"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+			"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+			"peer-data-[size=sm]/menu-button:top-1",
+			"peer-data-[size=default]/menu-button:top-1.5",
+			"peer-data-[size=lg]/menu-button:top-2.5",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		)}
+		{...props}
+	/>
+));
+DSMenuBadge.displayName = "DSMenuBadge";
+
+const DSMenuSkeleton = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		showIcon?: boolean;
+	}
+>(({ className, showIcon = false, ...props }, ref) => {
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div ref={ref} data-dual-sidebar="menu-skeleton" className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)} {...props}>
+			{showIcon && <Skeleton className="size-4 rounded-md" data-dual-sidebar="menu-skeleton-icon" />}
+			<Skeleton
+				className="h-4 max-w-[--skeleton-width] flex-1"
+				data-dual-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+});
+DSMenuSkeleton.displayName = "DSMenuSkeleton";
+// #enddev
+// #dev SUB-MENU
+
+const DSMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
+	<ul ref={ref} data-dual-sidebar="menu-sub" className={cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className)} {...props} />
+));
+DSMenuSub.displayName = "DSMenuSub";
+
+const DSMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => <li ref={ref} {...props} />);
+DSMenuSubItem.displayName = "DSMenuSubItem";
+
+const DSMenuSubButton = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentProps<"a"> & {
+		asChild?: boolean;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	}
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			data-dual-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSMenuSubButton.displayName = "DSMenuSubButton";
+// #enddev
+// #dev DSTopDrawer - Top Drawer Component
+
+const DSD = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof Drawer> & {
+		drawerHeight: string;
+		variant?: "default" | "card" | "glass" | "elevated" | "bordered";
+	}
+>(({ drawerHeight = "80vh", variant = "default", children, ...props }, ref) => {
+	const { setTopHeight } = useDS();
+
+	const [isOpen, setIsOpen] = React.useState(false);
+
+	React.useEffect(() => {
+		setTopHeight(isOpen ? drawerHeight : "0px");
+		return () => setTopHeight("0px");
+	}, [isOpen, drawerHeight, setTopHeight]);
+
+	return (
+		<Drawer ref={ref} placement="top" onOpenChange={setIsOpen} {...props}>
+			<div className={cn(drawerVariants({ variant }))}>
+				{children}
+			</div>
+		</Drawer>
+	);
+});
+DSD.displayName = "DSD";
+// #enddev
+// #dev DSBottomDrawer - Top Drawer Component
+const DSDBottom = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof Drawer> & {
+		drawerHeight: string;
+		variant?: "default" | "card" | "glass" | "elevated" | "bordered";
+	}
+>(({ drawerHeight = "80vh", variant = "default", children, ...props }, ref) => {
+	const { setBottomHeight } = useDS();
+	const [isOpen, setIsOpen] = React.useState(false);
+
+	React.useEffect(() => {
+		setBottomHeight(isOpen ? drawerHeight : "0px");
+		return () => setBottomHeight("0px");
+	}, [isOpen, drawerHeight, setBottomHeight]);
+
+	return (
+		<Drawer ref={ref} placement="bottom" onOpenChange={setIsOpen} {...props}>
+			<div className={cn(drawerVariants({ variant }))}>
+				{children}
+			</div>
+		</Drawer>
+	);
+});
+DSDBottom.displayName = "DSDBottom";
+
+// #enddev
+// #dev DRAWER
+
+function DSDTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+function DSDPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+function DSDClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+function DSDOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay data-slot="drawer-overlay" className={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className)} {...props} />
+	);
+}
+function DSDContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+	return (
+		<DSDPortal data-slot="drawer-portal">
+			<DSDOverlay />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+					"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+					className
+				)}
+				{...props}
+			>
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DSDPortal>
+	);
+}
+function DSDHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className)}
+			{...props}
+		/>
+	);
+}
+function DSDFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="drawer-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+function DSDTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return <DrawerPrimitive.Title data-slot="drawer-title" className={cn("text-foreground font-semibold", className)} {...props} />;
+}
+function DSDDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return <DrawerPrimitive.Description data-slot="drawer-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
+}
+
+// #enddev
+// #dev ANCHOR NAVLINK
+
+interface DSMenuAnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	icon?: React.ReactNode;
+	tooltip?: string;
+	to: string;
+	newTab?: boolean;
+	variant?: "default" | "ghost" | "outline" | "soft" | "solid" | "minimal" | "bordered" | "pill";
+	size?: "default" | "sm" | "lg" | "icon";
+}
+
+const DSMenuAnchor = React.forwardRef<HTMLAnchorElement, DSMenuAnchorProps>(({ className, icon, tooltip, children, to, newTab = true, variant = "default", size = "default", onClick, ...props }, ref) => {
+	const { navigation, setNavigation, currentPath } = useNavigationContext();
+
+	const isActive = location.pathname === to;
+
+	const isNavigatingToThisLink = navigation.state === "loading" && navigation.location?.href === to;
+
+	const anchorProps = newTab
+		? {
+			target: "_blank",
+			rel: "noopener noreferrer",
+		}
+		: {};
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+	  if (!newTab) {
+		// Only set navigation state for same-tab navigation
+		setNavigation({
+		  state: 'loading',
+		  location: { pathname: href, href }
+		});
+
+		// Simulate navigation completion
+		setTimeout(() => {
+		  setNavigation({ state: 'idle' });
+		}, 1000);
+	  }
+
+	  onClick?.(e);
+	};
+	return (
+		<a
+			ref={ref}
+			href={to}
+			   onClick={handleClick}
+			{...anchorProps}
+			/**className={cn(
+				"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-dual-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				isActive && "text-primary bg-sidebar-accent font-medium",
+				className
+			)} */
+			className={cn(
+				DSMenuButtonVariants({ variant, size, isActive }),
+				className
+			)}
+			{...props}
+		>
+			{icon &&
+				React.isValidElement(icon) &&
+				React.cloneElement(icon, {
+					className: cn("size-4 shrink-0", icon.props.className),
+				})}
+			<span className="flex-1 truncate">{children}</span>
+
+			{isNavigatingToThisLink && (
+				<div className="ml-auto flex items-center h-full">
+					<div className="animate-spin rounded-full h-5 w-5 border-t-3 border-primary border-solid"></div>
+				</div>
+			)}
+		</a>
+	);
+});
+DSMenuAnchor.displayName = "DSMenuAnchor";
+
+interface DSMenuLinkProps extends React.ComponentProps<typeof NavLink> {
+	icon?: React.ReactNode;
+	tooltip?: string;
+	variant?: "default" | "ghost" | "outline" | "soft" | "solid" | "minimal" | "bordered" | "pill";
+	size?: "default" | "sm" | "lg" | "icon";
+}
+
+const DSMenuLink = React.forwardRef<HTMLAnchorElement, DSMenuLinkProps>(({ className, icon, tooltip, children, to, variant = "default", size = "default", ...props }, ref) => {
+		const { navigation, currentPath, setNavigation } = useNavigationContext();
+
+	const isNavigatingToThisLink = navigation.state === "loading" && navigation.location?.pathname === to;
+
+	const isActive = location.pathname === to;
+
+		const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+		  // Set navigation state when link is clicked
+		  setNavigation({
+			state: 'loading',
+			location: { pathname: to, href: to }
+		  });
+	
+		  onClick?.(e);
+	
+		  // Update current path after a delay (simulating navigation)
+		  setTimeout(() => {
+			setNavigation({ state: 'idle' });
+			// In a real app, you'd update this based on your router
+			// For now, we'll simulate it
+			if (typeof window !== 'undefined') {
+			  window.history.pushState({}, '', to);
+			}
+		  }, 1000);
+		};
+
+	return (
+		<a
+			ref={ref}
+			href={to}
+        onClick={handleClick}
+			/**		className={cn(
+						"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none  transition-[width,height,padding] hover:bg-muted hover:text-primary focus-visible:ring-2   group-has-[[data-dual-sidebar=menu-action]]/menu-item:pr-8   group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate ",
+						isActive && "text-primary bg-muted font-medium",
+						className
+					)} */
+			className={cn(
+				DSMenuButtonVariants({ variant, size, isActive }),
+				isActive && "text-primary bg-muted font-medium",
+				className
+			)}
+			{...props}
+		>
+			{icon &&
+				React.isValidElement(icon) &&
+				React.cloneElement(icon, {
+					className: cn("size-4 shrink-0", icon.props.className),
+				})}
+			<span className="flex-1 truncate">{children}</span>
+
+			{isNavigatingToThisLink && (
+				<div className="ml-auto flex items-center">
+					<div className="animate-spin rounded-full h-5 w-5 border-t-3 border-primary border-solid"></div>
+				</div>
+			)}
+		</a>
+	);
+});
+DSMenuLink.displayName = "DSMenuLink";
+
+// #enddev
+// #dev LOADING UI
+function DSLoading({
+	variant = "default",
+	size = "default"
+}: {
+	variant?: "default" | "minimal" | "card" | "centered";
+	size?: "default" | "sm" | "md" | "lg" | "full";
+}) {
+	const isMobile = useIsMobile();
+	const width = isMobile ? DS_WIDTH_MOBILE : DS_WIDTH;
+	return (
+		<div className={cn(loadingVariants({ variant, size }))}>
+			{/**<div className={cn("flex flex-col items-center justify-center text-center p-8 w-[256px] min-h-[400px] h-screen bg-gradient-to-b from-background to-muted/20", width)}> */}
+			<div className="relative mb-6">
+				<div className="absolute inset-0 animate-pulse bg-primary/20 rounded-full blur-xl"></div>
+				<div className="flex items-center justify-center h-full">
+					<div className="animate-spin rounded-full h-16 w-16 text-primary border-t-5 border-primary border-solid"></div>
+				</div>
+			</div>
+
+			<div className="space-y-3">
+				<h3 className="text-lg font-semibold text-foreground animate-pulse">Loading Sidebar</h3>
+				<p className="text-sm text-muted-foreground/80 animate-pulse delay-150">Please wait while the content loads...</p>
+			</div>
+
+			<div className="w-full mt-8 space-y-3">
+				<div className="h-3 bg-muted rounded-full animate-pulse"></div>
+				<div className="h-3 bg-muted rounded-full animate-pulse delay-75 w-3/4"></div>
+				<div className="h-3 bg-muted rounded-full animate-pulse delay-150 w-1/2"></div>
+			</div>
+
+			<div className="flex space-x-1 mt-6">
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce"></div>
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce delay-100"></div>
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce delay-200"></div>
+			</div>
+		</div>
+	);
+}
+// #enddev
+// #dev COLOR THEMES
+const colorThemes = {
+	neutral: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.145 0 0)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.145 0 0)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.145 0 0)",
+				"--primary": "oklch(0.205 0 0)",
+				"--primary-foreground": "oklch(0.985 0 0)",
+				"--secondary": "oklch(0.97 0 0)",
+				"--secondary-foreground": "oklch(0.205 0 0)",
+				"--muted": "oklch(0.97 0 0)",
+				"--muted-foreground": "oklch(0.556 0 0)",
+				"--accent": "oklch(0.97 0 0)",
+				"--accent-foreground": "oklch(0.205 0 0)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.922 0 0)",
+				"--input": "oklch(0.922 0 0)",
+				"--ring": "oklch(0.708 0 0)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.145 0 0)",
+				"--sidebar-primary": "oklch(0.205 0 0)",
+				"--sidebar-primary-foreground": "oklch(0.985 0 0)",
+				"--sidebar-accent": "oklch(0.97 0 0)",
+				"--sidebar-accent-foreground": "oklch(0.205 0 0)",
+				"--sidebar-border": "oklch(0.922 0 0)",
+				"--sidebar-ring": "oklch(0.708 0 0)",
+			},
+			dark: {
+				"--background": "oklch(0.145 0 0)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.205 0 0)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.205 0 0)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.922 0 0)",
+				"--primary-foreground": "oklch(0.205 0 0)",
+				"--secondary": "oklch(0.269 0 0)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.269 0 0)",
+				"--muted-foreground": "oklch(0.708 0 0)",
+				"--accent": "oklch(0.269 0 0)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.556 0 0)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.205 0 0)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.488 0.243 264.376)",
+				"--sidebar-primary-foreground": "oklch(0.985 0 0)",
+				"--sidebar-accent": "oklch(0.269 0 0)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.556 0 0)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "0 0% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "0 0% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "0 0% 3.9%",
+				"--primary": "0 0% 9%",
+				"--primary-foreground": "0 0% 98%",
+				"--secondary": "0 0% 96.1%",
+				"--secondary-foreground": "0 0% 9%",
+				"--muted": "0 0% 96.1%",
+				"--muted-foreground": "0 0% 45.1%",
+				"--accent": "0 0% 96.1%",
+				"--accent-foreground": "0 0% 9%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 89.8%",
+				"--input": "0 0% 89.8%",
+				"--ring": "0 0% 3.9%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "0 0% 3.9%",
+				"--foreground": "0 0% 98%",
+				"--card": "0 0% 3.9%",
+				"--card-foreground": "0 0% 98%",
+				"--popover": "0 0% 3.9%",
+				"--popover-foreground": "0 0% 98%",
+				"--primary": "0 0% 98%",
+				"--primary-foreground": "0 0% 9%",
+				"--secondary": "0 0% 14.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 14.9%",
+				"--muted-foreground": "0 0% 63.9%",
+				"--accent": "0 0% 14.9%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 14.9%",
+				"--input": "0 0% 14.9%",
+				"--ring": "0 0% 83.1%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	red: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "0 0% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "0 0% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "0 0% 3.9%",
+				"--primary": "0 72.2% 50.6%",
+				"--primary-foreground": "0 85.7% 97.3%",
+				"--secondary": "0 0% 96.1%",
+				"--secondary-foreground": "0 0% 9%",
+				"--muted": "0 0% 96.1%",
+				"--muted-foreground": "0 0% 45.1%",
+				"--accent": "0 0% 96.1%",
+				"--accent-foreground": "0 0% 9%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 89.8%",
+				"--input": "0 0% 89.8%",
+				"--ring": "0 72.2% 50.6%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "0 0% 3.9%",
+				"--foreground": "0 0% 98%",
+				"--card": "0 0% 3.9%",
+				"--card-foreground": "0 0% 98%",
+				"--popover": "0 0% 3.9%",
+				"--popover-foreground": "0 0% 98%",
+				"--primary": "0 72.2% 50.6%",
+				"--primary-foreground": "0 85.7% 97.3%",
+				"--secondary": "0 0% 14.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 14.9%",
+				"--muted-foreground": "0 0% 63.9%",
+				"--accent": "0 0% 14.9%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 14.9%",
+				"--input": "0 0% 14.9%",
+				"--ring": "0 72.2% 50.6%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	rose: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.645 0.246 16.439)",
+				"--primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.645 0.246 16.439)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.645 0.246 16.439)",
+				"--sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.645 0.246 16.439)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.645 0.246 16.439)",
+				"--primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.645 0.246 16.439)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.645 0.246 16.439)",
+				"--sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.645 0.246 16.439)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "240 10% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "240 10% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "240 10% 3.9%",
+				"--primary": "346.8 77.2% 49.8%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 4.8% 95.9%",
+				"--secondary-foreground": "240 5.9% 10%",
+				"--muted": "240 4.8% 95.9%",
+				"--muted-foreground": "240 3.8% 46.1%",
+				"--accent": "240 4.8% 95.9%",
+				"--accent-foreground": "240 5.9% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "240 5.9% 90%",
+				"--input": "240 5.9% 90%",
+				"--ring": "346.8 77.2% 49.8%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "0 0% 95%",
+				"--card": "24 9.8% 10%",
+				"--card-foreground": "0 0% 95%",
+				"--popover": "0 0% 9%",
+				"--popover-foreground": "0 0% 95%",
+				"--primary": "346.8 77.2% 49.8%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 3.7% 15.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 15%",
+				"--muted-foreground": "240 5% 64.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 85.7% 97.3%",
+				"--border": "240 3.7% 15.9%",
+				"--input": "240 3.7% 15.9%",
+				"--ring": "346.8 77.2% 49.8%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	orange: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.705 0.213 47.604)",
+				"--primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.705 0.213 47.604)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.705 0.213 47.604)",
+				"--sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.705 0.213 47.604)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.646 0.222 41.116)",
+				"--primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.646 0.222 41.116)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.646 0.222 41.116)",
+				"--sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.646 0.222 41.116)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "20 14.3% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "20 14.3% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "20 14.3% 4.1%",
+				"--primary": "24.6 95% 53.1%",
+				"--primary-foreground": "60 9.1% 97.8%",
+				"--secondary": "60 4.8% 95.9%",
+				"--secondary-foreground": "24 9.8% 10%",
+				"--muted": "60 4.8% 95.9%",
+				"--muted-foreground": "25 5.3% 44.7%",
+				"--accent": "60 4.8% 95.9%",
+				"--accent-foreground": "24 9.8% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "20 5.9% 90%",
+				"--input": "20 5.9% 90%",
+				"--ring": "24.6 95% 53.1%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "60 9.1% 97.8%",
+				"--card": "20 14.3% 4.1%",
+				"--card-foreground": "60 9.1% 97.8%",
+				"--popover": "20 14.3% 4.1%",
+				"--popover-foreground": "60 9.1% 97.8%",
+				"--primary": "20.5 90.2% 48.2%",
+				"--primary-foreground": "60 9.1% 97.8%",
+				"--secondary": "12 6.5% 15.1%",
+				"--secondary-foreground": "60 9.1% 97.8%",
+				"--muted": "12 6.5% 15.1%",
+				"--muted-foreground": "24 5.4% 63.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "60 9.1% 97.8%",
+				"--destructive": "0 72.2% 50.6%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "12 6.5% 15.1%",
+				"--input": "12 6.5% 15.1%",
+				"--ring": "20.5 90.2% 48.2%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	green: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.723 0.219 149.579)",
+				"--primary-foreground": "oklch(0.982 0.018 155.826)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.723 0.219 149.579)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.723 0.219 149.579)",
+				"--sidebar-primary-foreground": "oklch(0.982 0.018 155.826)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.723 0.219 149.579)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.696 0.17 162.48)",
+				"--primary-foreground": "oklch(0.393 0.095 152.535)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.527 0.154 150.069)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.696 0.17 162.48)",
+				"--sidebar-primary-foreground": "oklch(0.393 0.095 152.535)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.527 0.154 150.069)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "240 10% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "240 10% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "240 10% 3.9%",
+				"--primary": "142.1 76.2% 36.3%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 4.8% 95.9%",
+				"--secondary-foreground": "240 5.9% 10%",
+				"--muted": "240 4.8% 95.9%",
+				"--muted-foreground": "240 3.8% 46.1%",
+				"--accent": "240 4.8% 95.9%",
+				"--accent-foreground": "240 5.9% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "240 5.9% 90%",
+				"--input": "240 5.9% 90%",
+				"--ring": "142.1 76.2% 36.3%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "0 0% 95%",
+				"--card": "24 9.8% 10%",
+				"--card-foreground": "0 0% 95%",
+				"--popover": "0 0% 9%",
+				"--popover-foreground": "0 0% 95%",
+				"--primary": "142.1 70.6% 45.3%",
+				"--primary-foreground": "144.9 80.4% 10%",
+				"--secondary": "240 3.7% 15.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 15%",
+				"--muted-foreground": "240 5% 64.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 85.7% 97.3%",
+				"--border": "240 3.7% 15.9%",
+				"--input": "240 3.7% 15.9%",
+				"--ring": "142.4 71.8% 29.2%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	blue: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.623 0.214 259.815)",
+				"--primary-foreground": "oklch(0.97 0.014 254.604)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.623 0.214 259.815)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.623 0.214 259.815)",
+				"--sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.623 0.214 259.815)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.546 0.245 262.881)",
+				"--primary-foreground": "oklch(0.379 0.146 265.522)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.488 0.243 264.376)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.546 0.245 262.881)",
+				"--sidebar-primary-foreground": "oklch(0.379 0.146 265.522)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.488 0.243 264.376)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "222.2 84% 4.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "222.2 84% 4.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "222.2 84% 4.9%",
+				"--primary": "221.2 83.2% 53.3%",
+				"--primary-foreground": "210 40% 98%",
+				"--secondary": "210 40% 96.1%",
+				"--secondary-foreground": "222.2 47.4% 11.2%",
+				"--muted": "210 40% 96.1%",
+				"--muted-foreground": "215.4 16.3% 46.9%",
+				"--accent": "210 40% 96.1%",
+				"--accent-foreground": "222.2 47.4% 11.2%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "210 40% 98%",
+				"--border": "214.3 31.8% 91.4%",
+				"--input": "214.3 31.8% 91.4%",
+				"--ring": "221.2 83.2% 53.3%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "221.2 83.2% 53.3%",
+				"--special": "221 39% 11%",
+				"--special-muted-background": "210 40% 96.1%",
+				"--special-border": "214.3 31.8% 91.4%",
+				"--special-foreground": "0 0% 98%",
+				"--special-muted-foreground": "215.4 16.3% 46.9%",
+
+			},
+			dark: {
+				"--background": "222.2 84% 4.9%",
+				"--foreground": "210 40% 98%",
+				"--card": "222.2 84% 4.9%",
+				"--card-foreground": "210 40% 98%",
+				"--popover": "222.2 84% 4.9%",
+				"--popover-foreground": "210 40% 98%",
+				"--primary": "217.2 91.2% 59.8%",
+				"--primary-foreground": "222.2 47.4% 11.2%",
+				"--secondary": "217.2 32.6% 17.5%",
+				"--secondary-foreground": "210 40% 98%",
+				"--muted": "217.2 32.6% 17.5%",
+				"--muted-foreground": "215 20.2% 65.1%",
+				"--accent": "217.2 32.6% 17.5%",
+				"--accent-foreground": "210 40% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "210 40% 98%",
+				"--border": "217.2 32.6% 17.5%",
+				"--input": "217.2 32.6% 17.5%",
+				"--ring": "224.3 76.3% 48%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "221.2 83.2% 53.3%",
+				"--special": "221 39% 11%",
+				"--special-muted-background": "210 40% 96.1%",
+				"--special-border": "214.3 31.8% 91.4%",
+				"--special-foreground": "0 0% 98%",
+				"--special-muted-foreground": "215.4 16.3% 46.9%",
+			},
+		},
+	},
+	yellow: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.795 0.184 86.047)",
+				"--primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.795 0.184 86.047)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.795 0.184 86.047)",
+				"--sidebar-primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.795 0.184 86.047)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.795 0.184 86.047)",
+				"--primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.554 0.135 66.442)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.795 0.184 86.047)",
+				"--sidebar-primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.554 0.135 66.442)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "20 14.3% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "20 14.3% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "20 14.3% 4.1%",
+				"--primary": "47.9 95.8% 53.1%",
+				"--primary-foreground": "26 83.3% 14.1%",
+				"--secondary": "60 4.8% 95.9%",
+				"--secondary-foreground": "24 9.8% 10%",
+				"--muted": "60 4.8% 95.9%",
+				"--muted-foreground": "25 5.3% 44.7%",
+				"--accent": "60 4.8% 95.9%",
+				"--accent-foreground": "24 9.8% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "20 5.9% 90%",
+				"--input": "20 5.9% 90%",
+				"--ring": "20 14.3% 4.1%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "60 9.1% 97.8%",
+				"--card": "20 14.3% 4.1%",
+				"--card-foreground": "60 9.1% 97.8%",
+				"--popover": "20 14.3% 4.1%",
+				"--popover-foreground": "60 9.1% 97.8%",
+				"--primary": "47.9 95.8% 53.1%",
+				"--primary-foreground": "26 83.3% 14.1%",
+				"--secondary": "12 6.5% 15.1%",
+				"--secondary-foreground": "60 9.1% 97.8%",
+				"--muted": "12 6.5% 15.1%",
+				"--muted-foreground": "24 5.4% 63.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "60 9.1% 97.8%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "12 6.5% 15.1%",
+				"--input": "12 6.5% 15.1%",
+				"--ring": "35.5 91.7% 32.9%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	violet: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "224 71.4% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "224 71.4% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "224 71.4% 4.1%",
+				"--primary": "262.1 83.3% 57.8%",
+				"--primary-foreground": "210 20% 98%",
+				"--secondary": "220 14.3% 95.9%",
+				"--secondary-foreground": "220.9 39.3% 11%",
+				"--muted": "220 14.3% 95.9%",
+				"--muted-foreground": "220 8.9% 46.1%",
+				"--accent": "220 14.3% 95.9%",
+				"--accent-foreground": "220.9 39.3% 11%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "210 20% 98%",
+				"--border": "220 13% 91%",
+				"--input": "220 13% 91%",
+				"--ring": "262.1 83.3% 57.8%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "224 71.4% 4.1%",
+				"--foreground": "210 20% 98%",
+				"--card": "224 71.4% 4.1%",
+				"--card-foreground": "210 20% 98%",
+				"--popover": "224 71.4% 4.1%",
+				"--popover-foreground": "210 20% 98%",
+				"--primary": "263.4 70% 50.4%",
+				"--primary-foreground": "210 20% 98%",
+				"--secondary": "215 27.9% 16.9%",
+				"--secondary-foreground": "210 20% 98%",
+				"--muted": "215 27.9% 16.9%",
+				"--muted-foreground": "217.9 10.6% 64.9%",
+				"--accent": "215 27.9% 16.9%",
+				"--accent-foreground": "210 20% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "210 20% 98%",
+				"--border": "215 27.9% 16.9%",
+				"--input": "215 27.9% 16.9%",
+				"--ring": "263.4 70% 50.4%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+};
+// #enddev
+// #dev DSA
+const DSA = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+			className
+		)}
+		{...props}
+	/>
+))
+DSA.displayName = AvatarPrimitive.Root.displayName
+
+const DSAImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn('aspect-square h-full w-full', className)}
+		{...props}
+	/>
+))
+DSAImage.displayName = AvatarPrimitive.Image.displayName
+
+const DSAFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			'flex h-full w-full items-center justify-center rounded-full bg-muted',
+			className
+		)}
+		{...props}
+	/>
+))
+DSAFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+// #enddev
+// #dev DSDM
+function DSDM({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DSDMPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	)
+}
+
+function DSDMTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	)
+}
+
+function DSDMContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	)
+}
+
+function DSDMGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	)
+}
+
+function DSDMItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean
+	variant?: "default" | "destructive"
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground cursor-pointer data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMAnchor({
+	className,
+	children,
+	to,
+	variant = "default",
+	newTab = true,
+	...props
+}: {
+	className?: string
+	children: React.ReactNode
+	to: string
+	newTab?: boolean
+}) {
+	const anchorProps = newTab ? {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	} : {};
+	return (
+		<a
+			href={to}
+			{...anchorProps}
+			className={cn(className)}
+			{...props}
+		>
+			<DSDMItem variant={variant}>
+				<span className="flex-1 truncate">{children}</span>
+			</DSDMItem>
+		</a>
+	);
+}
+
+function DSDMCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<Check className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	)
+}
+
+function DSDMRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	)
+}
+
+function DSDMRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<Circle className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	)
+}
+
+function DSDMLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DSDMSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRight className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	)
+}
+
+function DSDMSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+// #enddev
+// #dev DSC - Collapsible Sections
+const DSC = CollapsiblePrimitive.Root;
+const DSCTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+interface CollapsibleContentProps
+	extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> { }
+
+const DSCContent = React.forwardRef<
+	React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+	CollapsibleContentProps
+>(({ className, ...props }, ref) => {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			ref={ref}
+			className={cn(
+				"text-border",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSCContent.displayName = "DSCContent";
+
+// #enddev
+// #dev NAVIGATIONPROVIDER & CONTEXT
+
+interface NavigationState {
+  state: 'idle' | 'loading' | 'submitting';
+  location?: {
+	pathname: string;
+	href: string;
+  };
+}
+
+interface NavigationContextType {
+  navigation: NavigationState;
+  setNavigation: (state: NavigationState) => void;
+  currentPath: string;
+  setCurrentPath: (path: string) => void;
+}
+
+const NavigationContext = React.createContext<NavigationContextType | undefined>(undefined);
+
+export function NavigationProvider({ children }: { children: React.ReactNode }) {
+  const [navigation, setNavigation] = React.useState<NavigationState>({ state: 'idle' });
+  const [currentPath, setCurrentPath] = React.useState(typeof window !== 'undefined' ? window.location.pathname : '/');
+
+  return (
+	<NavigationContext.Provider value={{ navigation, setNavigation, currentPath, setCurrentPath }}>
+	  {children}
+	</NavigationContext.Provider>
+  );
+}
+
+export function useNavigationContext() {
+  const context = React.useContext(NavigationContext);
+  if (context === undefined) {
+	throw new Error('useNavigationContext must be used within a NavigationProvider');
+  }
+  return context;
+}
+//# enddev
+
+
+
+
+// #dev Workspace/Switch
+// DSWorkspaceSwitcher,
+// DSOrganizationSelector,
+// #enddev
+// #dev Status & Progress
+// DSStatusIndicator,
+// DSProgressTracker,
+// DSBadge,
+// #enddev
+// #dev Lists & Feeds
+// DSRecentActivity,
+// DSQuickLinks,
+// DSFavoriteItems,
+// #enddev
+// #dev History & Navigation
+// DSRecentPages,
+// DSNavigationHistory,
+// DSQuickNav,
+// #enddev
+// #dev Contextual Help
+// DSHelpButton,
+// DSTourGuide,
+// DSTooltipTrigger,
+// #enddev
+
+/**export {
+	// DS stands for DualSidebar
+	// use sidebar
+	useDS,
+	// sidebar rails
+	DSLeftRail,
+	DSRightRail,
+	// sidebar layouts
+	DSHeader,
+	DSContent,
+	DSFooter,
+	// sidebar avatar 
+	DSA,
+	DSAImage,
+	DSAFallback,
+	// sidebar menu items
+	DSGroup,
+	DSGroupAction,
+	DSGroupContent,
+	DSGroupLabel,
+	DSInput,
+	DSMenu,
+	DSMenuAction,
+	DSMenuBadge,
+	DSMenuButton,
+	DSMenuItem,
+	DSMenuSkeleton,
+	DSMenuSub,
+	DSMenuSubButton,
+	DSMenuSubItem,
+	DSSeparator,
+	// optimistic ui nav links and loading ui
+	DSMenuAnchor,
+	DSMenuLink,
+	DSLoading,
+	// theme selector
+	useDSTheme,
+	DSThemeSelector,
+	type DSTheme,
+	DSThemeProvider,
+	// sidebar provider
+	DSProvider,
+	// sidebar inset
+	DSInset,
+	// left trigger
+	DSTrigger,
+	// left sidebar
+	DSLeft,
+	DSLeftIcon,
+	// right sidebar
+	DSRight,
+	DSRightIcon,
+	// DSD stands for DualSidebarDrawer
+	DSD,
+	DSDBottom,
+	DSDTrigger,
+	DSDPortal,
+	DSDClose,
+	DSDOverlay,
+	DSDContent,
+	DSDHeader,
+	DSDFooter,
+	DSDTitle,
+	DSDDescription,
+	// DSDM
+	DSDM,
+	DSDMPortal,
+	DSDMTrigger,
+	DSDMContent,
+	DSDMGroup,
+	DSDMLabel,
+	DSDMItem,
+	DSDMCheckboxItem,
+	DSDMRadioGroup,
+	DSDMRadioItem,
+	DSDMSeparator,
+	DSDMShortcut,
+	DSDMSub,
+	DSDMSubTrigger,
+	DSDMSubContent,
+	DSDMAnchor,
+	// Collapsible
+	DSC,
+	DSCTrigger,
+	DSCContent,
+}; */