@exegia/corpora-ui 0.9.0 → 0.11.0

package/src/components/motion/animated-sidebar.tsx

@@ -1,14 +1,14 @@
-"use client";
+"use client"
 // beui.dev/components/motion/animated-sidebar
 
-import { ChevronRight } from "lucide-react";
+import { ChevronRight } from "lucide-react"
 import {
   AnimatePresence,
   type HTMLMotionProps,
   motion,
   useReducedMotion,
   type Variants,
-} from "motion/react";
+} from "motion/react"
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
@@ -23,29 +23,24 @@ import {
   useRef,
   useState,
   useSyncExternalStore,
-} from "react";
-import { createPortal } from "react-dom";
-import { SharedLayoutBg } from "@/components/motion/shared-layout-bg";
-import {
-  EASE_DRAWER,
-  EASE_OUT,
-  SPRING_LAYOUT,
-  SPRING_PRESS,
-} from "@/lib/ease";
-import { cn } from "@/lib/utils";
+} from "react"
+import { createPortal } from "react-dom"
+import { SharedLayoutBg } from "@/components/motion/shared-layout-bg"
+import { EASE_DRAWER, EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"
+import { cn } from "@/lib/utils"
 
-type SidebarState = "expanded" | "collapsed";
-type SidebarSide = "left" | "right";
-type SidebarVariant = "sidebar" | "floating" | "inset";
-type SidebarCollapsible = "offcanvas" | "icon" | "none";
+type SidebarState = "expanded" | "collapsed"
+type SidebarSide = "left" | "right"
+type SidebarVariant = "sidebar" | "floating" | "inset"
+type SidebarCollapsible = "offcanvas" | "icon" | "none"
 
-const MOBILE_QUERY = "(max-width: 767px)";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const MOBILE_QUERY = "(max-width: 767px)"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 const PANEL_TRANSITION = {
   duration: 0.36,
   ease: EASE_DRAWER,
-} as const;
+} as const
 
 // The desktop rail settles at a hard zero-width boundary. Keep the spring
 // critically damped so it cannot overshoot, pause against that boundary, and
@@ -55,23 +50,23 @@ const SIDEBAR_MORPH_TRANSITION = {
   stiffness: 380,
   damping: 35,
   mass: 0.75,
-} as const;
+} as const
 
 const LABEL_ENTER_TRANSITION = {
   duration: 0.2,
   delay: 0.08,
   ease: EASE_OUT,
-} as const;
+} as const
 
 const LABEL_EXIT_TRANSITION = {
   duration: 0.12,
   ease: EASE_OUT,
-} as const;
+} as const
 
 const SUBMENU_TRANSITION = {
   duration: 0.18,
   ease: EASE_OUT,
-} as const;
+} as const
 
 const SUBMENU_VARIANTS: Variants = {
   closed: {
@@ -94,7 +89,7 @@ const SUBMENU_VARIANTS: Variants = {
       staggerChildren: 0.045,
     },
   },
-};
+}
 
 const SUBMENU_ITEM_VARIANTS: Variants = {
   closed: {
@@ -108,12 +103,12 @@ const SUBMENU_ITEM_VARIANTS: Variants = {
     filter: "blur(0px)",
     transition: SUBMENU_TRANSITION,
   },
-};
+}
 
 const REDUCED_TRANSITION = {
   duration: 0.16,
   ease: EASE_OUT,
-} as const;
+} as const
 
 const FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -122,90 +117,98 @@ const FOCUSABLE_SELECTOR = [
   "select:not([disabled])",
   "textarea:not([disabled])",
   "[tabindex]:not([tabindex='-1'])",
-].join(",");
+].join(",")
 
 function subscribeToMobileQuery(callback: () => void) {
-  const query = window.matchMedia(MOBILE_QUERY);
-  query.addEventListener("change", callback);
-  return () => query.removeEventListener("change", callback);
+  const query = window.matchMedia(MOBILE_QUERY)
+  query.addEventListener("change", callback)
+  return () => query.removeEventListener("change", callback)
 }
 
 function getMobileSnapshot() {
-  return window.matchMedia(MOBILE_QUERY).matches;
+  return window.matchMedia(MOBILE_QUERY).matches
 }
 
 function getServerMobileSnapshot() {
-  return false;
+  return false
 }
 
 function useIsMobile() {
   return useSyncExternalStore(
     subscribeToMobileQuery,
     getMobileSnapshot,
-    getServerMobileSnapshot,
-  );
+    getServerMobileSnapshot
+  )
 }
 
 interface AnimatedSidebarContextValue {
-  isMobile: boolean;
-  layoutId: string;
-  open: boolean;
-  openMobile: boolean;
-  reduce: boolean;
-  setOpen: (open: boolean) => void;
-  setOpenMobile: (open: boolean) => void;
-  state: SidebarState;
-  toggleSidebar: () => void;
-  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  isMobile: boolean
+  layoutId: string
+  open: boolean
+  openMobile: boolean
+  /** The right panel is a single hidden/shown state — no icon rail, no
+   * separate mobile state. */
+  openRight: boolean
+  reduce: boolean
+  setOpen: (open: boolean) => void
+  setOpenMobile: (open: boolean) => void
+  setOpenRight: (open: boolean) => void
+  state: SidebarState
+  toggleSidebar: () => void
+  toggleRightSidebar: () => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  rightTriggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const AnimatedSidebarContext =
-  createContext<AnimatedSidebarContextValue | null>(null);
+  createContext<AnimatedSidebarContextValue | null>(null)
 
 interface AnimatedSidebarPanelContextValue {
-  collapsed: boolean;
-  collapsible: SidebarCollapsible;
-  side: SidebarSide;
+  collapsed: boolean
+  collapsible: SidebarCollapsible
+  side: SidebarSide
 }
 
 const AnimatedSidebarPanelContext =
-  createContext<AnimatedSidebarPanelContextValue | null>(null);
+  createContext<AnimatedSidebarPanelContextValue | null>(null)
 
 export function useAnimatedSidebar() {
-  const context = useContext(AnimatedSidebarContext);
+  const context = useContext(AnimatedSidebarContext)
   if (!context) {
     throw new Error(
-      "useAnimatedSidebar must be used inside AnimatedSidebarProvider.",
-    );
+      "useAnimatedSidebar must be used inside AnimatedSidebarProvider."
+    )
   }
-  return context;
+  return context
 }
 
 function useAnimatedSidebarPanel() {
-  const context = useContext(AnimatedSidebarPanelContext);
+  const context = useContext(AnimatedSidebarPanelContext)
   if (!context) {
     throw new Error(
-      "Animated Sidebar parts must be used inside AnimatedSidebar.",
-    );
+      "Animated Sidebar parts must be used inside AnimatedSidebar."
+    )
   }
-  return context;
+  return context
 }
 
 type SidebarProviderStyle = CSSProperties & {
-  "--sidebar-width"?: string;
-  "--sidebar-width-icon"?: string;
-  "--sidebar-width-mobile"?: string;
-};
-
-export interface AnimatedSidebarProviderProps
-  extends HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  openMobile?: boolean;
-  defaultOpenMobile?: boolean;
-  onOpenMobileChange?: (open: boolean) => void;
-  style?: SidebarProviderStyle;
+  "--sidebar-width"?: string
+  "--sidebar-width-icon"?: string
+  "--sidebar-width-mobile"?: string
+}
+
+export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  openMobile?: boolean
+  defaultOpenMobile?: boolean
+  onOpenMobileChange?: (open: boolean) => void
+  openRight?: boolean
+  defaultOpenRight?: boolean
+  onOpenRightChange?: (open: boolean) => void
+  style?: SidebarProviderStyle
 }
 
 export function AnimatedSidebarProvider({
@@ -216,40 +219,58 @@ export function AnimatedSidebarProvider({
   openMobile,
   defaultOpenMobile = false,
   onOpenMobileChange,
+  openRight,
+  defaultOpenRight = false,
+  onOpenRightChange,
   className,
   style,
   ...props
 }: AnimatedSidebarProviderProps) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
   const [internalOpenMobile, setInternalOpenMobile] =
-    useState(defaultOpenMobile);
-  const isMobile = useIsMobile();
-  const reduce = useReducedMotion() ?? false;
-  const generatedId = useId();
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const desktopOpen = open ?? internalOpen;
-  const mobileOpen = openMobile ?? internalOpenMobile;
+    useState(defaultOpenMobile)
+  const [internalOpenRight, setInternalOpenRight] = useState(defaultOpenRight)
+  const isMobile = useIsMobile()
+  const reduce = useReducedMotion() ?? false
+  const generatedId = useId()
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const rightTriggerRef = useRef<HTMLButtonElement>(null)
+  const desktopOpen = open ?? internalOpen
+  const mobileOpen = openMobile ?? internalOpenMobile
+  const rightOpen = openRight ?? internalOpenRight
 
   const setOpen = useCallback(
     (nextOpen: boolean) => {
-      if (open === undefined) setInternalOpen(nextOpen);
-      onOpenChange?.(nextOpen);
+      if (open === undefined) setInternalOpen(nextOpen)
+      onOpenChange?.(nextOpen)
     },
-    [onOpenChange, open],
-  );
+    [onOpenChange, open]
+  )
 
   const setOpenMobile = useCallback(
     (nextOpen: boolean) => {
-      if (openMobile === undefined) setInternalOpenMobile(nextOpen);
-      onOpenMobileChange?.(nextOpen);
+      if (openMobile === undefined) setInternalOpenMobile(nextOpen)
+      onOpenMobileChange?.(nextOpen)
     },
-    [onOpenMobileChange, openMobile],
-  );
+    [onOpenMobileChange, openMobile]
+  )
+
+  const setOpenRight = useCallback(
+    (nextOpen: boolean) => {
+      if (openRight === undefined) setInternalOpenRight(nextOpen)
+      onOpenRightChange?.(nextOpen)
+    },
+    [onOpenRightChange, openRight]
+  )
 
   const toggleSidebar = useCallback(() => {
-    if (isMobile) setOpenMobile(!mobileOpen);
-    else setOpen(!desktopOpen);
-  }, [desktopOpen, isMobile, mobileOpen, setOpen, setOpenMobile]);
+    if (isMobile) setOpenMobile(!mobileOpen)
+    else setOpen(!desktopOpen)
+  }, [desktopOpen, isMobile, mobileOpen, setOpen, setOpenMobile])
+
+  const toggleRightSidebar = useCallback(() => {
+    setOpenRight(!rightOpen)
+  }, [rightOpen, setOpenRight])
 
   useEffect(() => {
     const handleShortcut = (event: KeyboardEvent) => {
@@ -257,14 +278,14 @@ export function AnimatedSidebarProvider({
         event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
         (event.metaKey || event.ctrlKey)
       ) {
-        event.preventDefault();
-        toggleSidebar();
+        event.preventDefault()
+        toggleSidebar()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handleShortcut);
-    return () => window.removeEventListener("keydown", handleShortcut);
-  }, [toggleSidebar]);
+    window.addEventListener("keydown", handleShortcut)
+    return () => window.removeEventListener("keydown", handleShortcut)
+  }, [toggleSidebar])
 
   return (
     <AnimatedSidebarContext.Provider
@@ -273,33 +294,38 @@ export function AnimatedSidebarProvider({
         layoutId: `${generatedId}-active`,
         open: desktopOpen,
         openMobile: mobileOpen,
+        openRight: rightOpen,
         reduce,
         setOpen,
         setOpenMobile,
+        setOpenRight,
         state: desktopOpen ? "expanded" : "collapsed",
         toggleSidebar,
+        toggleRightSidebar,
         triggerRef,
+        rightTriggerRef,
       }}
     >
       <div
         {...props}
         data-slot="sidebar-wrapper"
         data-state={desktopOpen ? "expanded" : "collapsed"}
+        data-right-state={rightOpen ? "expanded" : "collapsed"}
         style={{
-          "--sidebar-width": "16rem",
+          "--sidebar-width": "19rem",
           "--sidebar-width-icon": "4.25rem",
           "--sidebar-width-mobile": "18rem",
           ...style,
         }}
         className={cn(
           "group/sidebar-wrapper flex min-h-svh w-full min-w-0",
-          className,
+          className
         )}
       >
         {children}
       </div>
     </AnimatedSidebarContext.Provider>
-  );
+  )
 }
 
 function MobileSidebar({
@@ -308,78 +334,79 @@ function MobileSidebar({
   className,
   side,
 }: {
-  ariaLabel: string;
-  children: ReactNode;
-  className?: string;
-  side: SidebarSide;
+  ariaLabel: string
+  children: ReactNode
+  className?: string
+  side: SidebarSide
 }) {
-  const context = useAnimatedSidebar();
-  const panelRef = useRef<HTMLDivElement>(null);
-  const [mounted, setMounted] = useState(false);
+  const context = useAnimatedSidebar()
+  const isRight = side === "right"
+  const open = isRight ? context.openRight : context.openMobile
+  const setOpen = isRight ? context.setOpenRight : context.setOpenMobile
+  const triggerRef = isRight ? context.rightTriggerRef : context.triggerRef
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [mounted, setMounted] = useState(false)
 
-  useEffect(() => setMounted(true), []);
+  useEffect(() => setMounted(true), [])
 
   useEffect(() => {
-    if (!context.openMobile) return;
+    if (!open) return
 
-    const body = document.body;
-    const scrollY = window.scrollY;
+    const body = document.body
+    const scrollY = window.scrollY
+    const trigger = triggerRef.current
     const previousBodyStyles = {
       left: body.style.left,
       overflow: body.style.overflow,
       position: body.style.position,
       right: body.style.right,
       top: body.style.top,
-    };
+    }
 
-    body.style.position = "fixed";
-    body.style.top = `-${scrollY}px`;
-    body.style.left = "0";
-    body.style.right = "0";
-    body.style.overflow = "hidden";
+    body.style.position = "fixed"
+    body.style.top = `-${scrollY}px`
+    body.style.left = "0"
+    body.style.right = "0"
+    body.style.overflow = "hidden"
 
     const focusFrame = requestAnimationFrame(() => {
       const firstFocusable =
-        panelRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
-      (firstFocusable ?? panelRef.current)?.focus({ preventScroll: true });
-    });
+        panelRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
+      ;(firstFocusable ?? panelRef.current)?.focus({ preventScroll: true })
+    })
 
     return () => {
-      cancelAnimationFrame(focusFrame);
-      body.style.position = previousBodyStyles.position;
-      body.style.top = previousBodyStyles.top;
-      body.style.left = previousBodyStyles.left;
-      body.style.right = previousBodyStyles.right;
-      body.style.overflow = previousBodyStyles.overflow;
-      window.scrollTo(0, scrollY);
-      context.triggerRef.current?.focus({ preventScroll: true });
-    };
-  }, [context.openMobile, context.triggerRef]);
-
-  if (!mounted) return null;
+      cancelAnimationFrame(focusFrame)
+      body.style.position = previousBodyStyles.position
+      body.style.top = previousBodyStyles.top
+      body.style.left = previousBodyStyles.left
+      body.style.right = previousBodyStyles.right
+      body.style.overflow = previousBodyStyles.overflow
+      window.scrollTo(0, scrollY)
+      trigger?.focus({ preventScroll: true })
+    }
+  }, [open, triggerRef])
+
+  if (!mounted) return null
 
   return createPortal(
     <div
       className={cn(
         "pointer-events-none fixed inset-0 z-50 md:hidden",
-        context.openMobile ? "visible" : "invisible",
+        open ? "visible" : "invisible"
       )}
     >
       <motion.button
         type="button"
         aria-label="Close sidebar"
-        tabIndex={context.openMobile ? 0 : -1}
+        tabIndex={open ? 0 : -1}
         initial={false}
-        animate={{ opacity: context.openMobile ? 1 : 0 }}
-        transition={
-          context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION
-        }
-        onClick={() => context.setOpenMobile(false)}
+        animate={{ opacity: open ? 1 : 0 }}
+        transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
+        onClick={() => setOpen(false)}
         className={cn(
-          "absolute inset-0 bg-black/40",
-          context.openMobile
-            ? "pointer-events-auto"
-            : "pointer-events-none",
+          "absolute inset-0",
+          open ? "pointer-events-auto" : "pointer-events-none"
         )}
       />
 
@@ -388,68 +415,62 @@ function MobileSidebar({
         role="dialog"
         aria-modal="true"
         aria-label={ariaLabel}
-        aria-hidden={!context.openMobile}
-        inert={!context.openMobile}
+        aria-hidden={!open}
+        inert={!open}
         tabIndex={-1}
         data-mobile="true"
-        data-state={context.openMobile ? "expanded" : "collapsed"}
+        data-state={open ? "expanded" : "collapsed"}
         data-side={side}
         initial={false}
         animate={{
-          opacity: context.reduce
-            ? context.openMobile
-              ? 1
-              : 0
-            : 1,
+          opacity: context.reduce ? (open ? 1 : 0) : 1,
           x: context.reduce
             ? 0
-            : context.openMobile
+            : open
               ? "0%"
               : side === "left"
                 ? "-100%"
                 : "100%",
         }}
-        transition={
-          context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION
-        }
+        transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
         onKeyDown={(event) => {
           if (event.key === "Escape") {
-            event.preventDefault();
-            context.setOpenMobile(false);
-            return;
+            event.preventDefault()
+            setOpen(false)
+            return
           }
 
-          if (event.key !== "Tab") return;
+          if (event.key !== "Tab") return
           const focusable = panelRef.current
             ? Array.from(
                 panelRef.current.querySelectorAll<HTMLElement>(
-                  FOCUSABLE_SELECTOR,
-                ),
+                  FOCUSABLE_SELECTOR
+                )
               )
-            : [];
+            : []
 
           if (focusable.length === 0) {
-            event.preventDefault();
-            panelRef.current?.focus();
-            return;
+            event.preventDefault()
+            panelRef.current?.focus()
+            return
           }
 
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
+          const first = focusable[0]
+          const last = focusable[focusable.length - 1]
           if (event.shiftKey && document.activeElement === first) {
-            event.preventDefault();
-            last.focus();
+            event.preventDefault()
+            last.focus()
           } else if (!event.shiftKey && document.activeElement === last) {
-            event.preventDefault();
-            first.focus();
+            event.preventDefault()
+            first.focus()
           }
         }}
         className={cn(
           "pointer-events-auto absolute inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden",
-          "border-border bg-background shadow-2xl will-change-transform",
-          side === "left" ? "left-0 border-r" : "right-0 border-l",
-          !context.openMobile && "pointer-events-none",
-          className,
+          "will-change-transform",
+          side === "left" ? "left-0 border-r" : "right-0",
+          !open && "pointer-events-none",
+          className
         )}
       >
         <AnimatedSidebarPanelContext.Provider
@@ -459,18 +480,20 @@ function MobileSidebar({
         </AnimatedSidebarPanelContext.Provider>
       </motion.div>
     </div>,
-    document.body,
-  );
+    document.body
+  )
 }
 
-export interface AnimatedSidebarProps
-  extends Omit<HTMLMotionProps<"aside">, "children"> {
-  children?: ReactNode;
-  side?: SidebarSide;
-  variant?: SidebarVariant;
-  collapsible?: SidebarCollapsible;
-  ariaLabel?: string;
-  panelClassName?: string;
+export interface AnimatedSidebarProps extends Omit<
+  HTMLMotionProps<"aside">,
+  "children"
+> {
+  children?: ReactNode
+  side?: SidebarSide
+  variant?: SidebarVariant
+  collapsible?: SidebarCollapsible
+  ariaLabel?: string
+  panelClassName?: string
 }
 
 export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
@@ -486,27 +509,24 @@ export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
       style,
       ...props
     },
-    forwardedRef,
+    forwardedRef
   ) {
-    const context = useAnimatedSidebar();
-    const collapsed = collapsible !== "none" && !context.open;
-    const offcanvas = collapsed && collapsible === "offcanvas";
+    const context = useAnimatedSidebar()
+    const sideOpen = side === "right" ? context.openRight : context.open
+    const collapsed = collapsible !== "none" && !sideOpen
+    const offcanvas = collapsed && collapsible === "offcanvas"
     const width = offcanvas
       ? "0px"
       : collapsed
         ? "var(--sidebar-width-icon)"
-        : "var(--sidebar-width)";
+        : "var(--sidebar-width)"
 
     if (context.isMobile) {
       return (
-        <MobileSidebar
-          ariaLabel={ariaLabel}
-          className={className}
-          side={side}
-        >
+        <MobileSidebar ariaLabel={ariaLabel} className={className} side={side}>
           {children}
         </MobileSidebar>
-      );
+      )
     }
 
     return (
@@ -521,35 +541,38 @@ export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
         data-variant={variant}
         data-side={side}
         animate={{ width }}
-        transition={
-          context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION
-        }
+        transition={context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION}
         style={style}
         className={cn(
-          "group/sidebar relative hidden h-auto shrink-0 md:block will-change-[width]",
-          "peer",
+          "group/sidebar relative hidden h-auto shrink-0 will-change-[width] md:block",
+          "peer flex!",
+          // The offcanvas panel keeps its full width and slides out of the
+          // zero-width rail, so clip it rather than letting it bleed past the
+          // shell edge. The clip margin lets the panel's own shadow escape
+          // without letting the slid-out panel escape with it
+          collapsible === "offcanvas" &&
+            "overflow-x-visible [overflow-clip-margin:1rem]",
           side === "right" && "order-last",
-          className,
+          className
         )}
       >
+        {side === "right" && !collapsed && (
+          <motion.div className="h-full p-0.5 flex flex-1  bg-radial/decreasing from-amber-400 to-0% hover:to-50% ease-smooth-out to-amber-500/0 cursor-col-resize transition-colors duration-1000 animate-in" />
+        )}
         <motion.div
           initial={false}
           animate={{
             opacity: offcanvas ? 0 : 1,
             x: offcanvas ? (side === "left" ? "-100%" : "100%") : "0%",
           }}
-          transition={
-            context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION
-          }
+          transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
           className={cn(
-            "sticky top-0 flex h-svh w-full flex-col overflow-hidden bg-background",
+            "sticky top-0 flex h-svh w-full flex-col overflow-hidden",
             collapsible === "offcanvas" && "w-[var(--sidebar-width)]",
-            variant === "sidebar" &&
-              (side === "left" ? "border-border border-r" : "border-border border-l"),
-            variant === "floating" &&
-              "m-2 h-[calc(100svh-1rem)] rounded-2xl border border-border shadow-sm",
-            variant === "inset" && "m-2 h-[calc(100svh-1rem)] rounded-2xl",
-            panelClassName,
+
+            variant === "floating" && "m-2 h-[calc(100svh-1rem)]",
+            variant === "inset" && "m-2 h-[calc(100svh-1rem)]",
+            panelClassName
           )}
         >
           <AnimatedSidebarPanelContext.Provider
@@ -559,94 +582,106 @@ export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
           </AnimatedSidebarPanelContext.Provider>
         </motion.div>
       </motion.aside>
-    );
-  },
-);
+    )
+  }
+)
 
-export interface AnimatedSidebarTriggerProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface AnimatedSidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  side?: SidebarSide
+}
 
 export const AnimatedSidebarTrigger = forwardRef<
   HTMLButtonElement,
   AnimatedSidebarTriggerProps
 >(function AnimatedSidebarTrigger(
-  { className, onClick, type = "button", ...props },
-  forwardedRef,
+  { className, onClick, side = "left", type = "button", ...props },
+  forwardedRef
 ) {
-  const context = useAnimatedSidebar();
-  const expanded = context.isMobile ? context.openMobile : context.open;
+  const context = useAnimatedSidebar()
+  const isRight = side === "right"
+  const expanded = isRight
+    ? context.openRight
+    : context.isMobile
+      ? context.openMobile
+      : context.open
+  const triggerRef = isRight ? context.rightTriggerRef : context.triggerRef
 
   return (
     <button
       {...props}
       ref={(node) => {
-        context.triggerRef.current = node;
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
+        triggerRef.current = node
+        if (typeof forwardedRef === "function") forwardedRef(node)
+        else if (forwardedRef) forwardedRef.current = node
       }}
       type={type}
       aria-label={props["aria-label"] ?? "Toggle sidebar"}
       aria-expanded={expanded}
       data-slot="sidebar-trigger"
+      data-side={side}
       data-state={expanded ? "expanded" : "collapsed"}
       onClick={(event) => {
-        onClick?.(event);
-        if (!event.defaultPrevented) context.toggleSidebar();
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        if (isRight) context.toggleRightSidebar()
+        else context.toggleSidebar()
       }}
       className={cn(
         "inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        className,
+        className
       )}
     />
-  );
-});
+  )
+})
 
-export interface AnimatedSidebarCloseProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface AnimatedSidebarCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  side?: SidebarSide
+}
 
 export const AnimatedSidebarClose = forwardRef<
   HTMLButtonElement,
   AnimatedSidebarCloseProps
 >(function AnimatedSidebarClose(
-  { className, onClick, type = "button", ...props },
-  forwardedRef,
+  { className, onClick, side = "left", type = "button", ...props },
+  forwardedRef
 ) {
-  const context = useAnimatedSidebar();
+  const context = useAnimatedSidebar()
 
   return (
     <button
       {...props}
       ref={forwardedRef}
       type={type}
+      data-side={side}
       aria-label={props["aria-label"] ?? "Close sidebar"}
       onClick={(event) => {
-        onClick?.(event);
-        if (event.defaultPrevented) return;
-        if (context.isMobile) context.setOpenMobile(false);
-        else context.setOpen(false);
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        if (side === "right") context.setOpenRight(false)
+        else if (context.isMobile) context.setOpenMobile(false)
+        else context.setOpen(false)
       }}
       className={cn(
         "inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none",
         "focus-visible:ring-2 focus-visible:ring-ring",
-        className,
+        className
       )}
     />
-  );
-});
+  )
+})
 
-export interface AnimatedSidebarRailProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface AnimatedSidebarRailProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const AnimatedSidebarRail = forwardRef<
   HTMLButtonElement,
   AnimatedSidebarRailProps
 >(function AnimatedSidebarRail(
   { className, onClick, type = "button", ...props },
-  forwardedRef,
+  forwardedRef
 ) {
-  const context = useAnimatedSidebar();
-  const panel = useAnimatedSidebarPanel();
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
 
   return (
     <button
@@ -658,21 +693,22 @@ export const AnimatedSidebarRail = forwardRef<
       title="Toggle sidebar"
       tabIndex={-1}
       onClick={(event) => {
-        onClick?.(event);
-        if (!event.defaultPrevented) context.toggleSidebar();
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        if (panel.side === "right") context.toggleRightSidebar()
+        else context.toggleSidebar()
       }}
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 outline-none md:block",
         "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-transparent after:transition-colors hover:after:bg-border",
-        "data-[side=right]:right-0 data-[side=right]:translate-x-1/2 data-[side=left]:left-full",
-        className,
+        "data-[side=left]:left-full data-[side=right]:right-0 data-[side=right]:translate-x-1/2",
+        className
       )}
     />
-  );
-});
+  )
+})
 
-export interface AnimatedSidebarInsetProps
-  extends HTMLMotionProps<"main"> {}
+export interface AnimatedSidebarInsetProps extends HTMLMotionProps<"main"> {}
 
 export const AnimatedSidebarInset = forwardRef<
   HTMLElement,
@@ -684,13 +720,13 @@ export const AnimatedSidebarInset = forwardRef<
       ref={forwardedRef}
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex min-h-svh min-w-0 flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm",
-        className,
+        "relative flex min-w-0 flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:mr-1.5 md:peer-data-[variant=inset]:rounded-md md:peer-data-[variant=inset]:shadow-md",
+        className
       )}
     />
-  );
-});
+  )
+})
 
 export const AnimatedSidebarHeader = forwardRef<
   HTMLDivElement,
@@ -703,8 +739,8 @@ export const AnimatedSidebarHeader = forwardRef<
       data-slot="sidebar-header"
       className={cn("flex shrink-0 flex-col gap-2 p-3", className)}
     />
-  );
-});
+  )
+})
 
 export const AnimatedSidebarContent = forwardRef<
   HTMLDivElement,
@@ -716,12 +752,12 @@ export const AnimatedSidebarContent = forwardRef<
       ref={forwardedRef}
       data-slot="sidebar-content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden overscroll-contain px-2 py-2",
-        className,
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain px-2 py-2",
+        className
       )}
     />
-  );
-});
+  )
+})
 
 export const AnimatedSidebarFooter = forwardRef<
   HTMLDivElement,
@@ -733,12 +769,12 @@ export const AnimatedSidebarFooter = forwardRef<
       ref={forwardedRef}
       data-slot="sidebar-footer"
       className={cn(
-        "flex shrink-0 flex-col gap-2 border-border border-t p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
-        className,
+        "flex shrink-0 flex-col gap-2 border-t border-border p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+        className
       )}
     />
-  );
-});
+  )
+})
 
 export const AnimatedSidebarGroup = forwardRef<
   HTMLDivElement,
@@ -751,17 +787,17 @@ export const AnimatedSidebarGroup = forwardRef<
       data-slot="sidebar-group"
       className={cn("flex w-full min-w-0 flex-col px-1 py-1.5", className)}
     />
-  );
-});
+  )
+})
 
 export const AnimatedSidebarGroupLabel = forwardRef<
   HTMLDivElement,
   HTMLAttributes<HTMLDivElement>
 >(function AnimatedSidebarGroupLabel(
   { children, className, ...props },
-  forwardedRef,
+  forwardedRef
 ) {
-  const { collapsed } = useAnimatedSidebarPanel();
+  const { collapsed } = useAnimatedSidebarPanel()
 
   return (
     <div
@@ -770,23 +806,20 @@ export const AnimatedSidebarGroupLabel = forwardRef<
       aria-hidden={collapsed}
       data-slot="sidebar-group-label"
       className={cn(
-        "mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground transition-opacity",
+        "mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium tracking-[0.14em] text-muted-foreground uppercase transition-opacity",
         collapsed ? "opacity-0" : "opacity-100",
-        className,
+        className
       )}
     >
       {children}
     </div>
-  );
-});
+  )
+})
 
 export const AnimatedSidebarGroupContent = forwardRef<
   HTMLDivElement,
   HTMLAttributes<HTMLDivElement>
->(function AnimatedSidebarGroupContent(
-  { className, ...props },
-  forwardedRef,
-) {
+>(function AnimatedSidebarGroupContent({ className, ...props }, forwardedRef) {
   return (
     <div
       {...props}
@@ -794,15 +827,15 @@ export const AnimatedSidebarGroupContent = forwardRef<
       data-slot="sidebar-group-content"
       className={cn("w-full min-w-0", className)}
     />
-  );
-});
+  )
+})
 
 export const AnimatedSidebarMenu = forwardRef<
   HTMLUListElement,
   HTMLAttributes<HTMLUListElement>
 >(function AnimatedSidebarMenu(
   { children, className, ...props },
-  forwardedRef,
+  forwardedRef
 ) {
   return (
     <SharedLayoutBg
@@ -813,12 +846,15 @@ export const AnimatedSidebarMenu = forwardRef<
       pillClassName="rounded-xl bg-muted/70"
       pillContainerClassName="inset-y-auto top-0 h-9"
       data-slot="sidebar-menu"
-      className={cn("flex w-full min-w-0 list-none flex-col gap-0.5", className)}
+      className={cn(
+        "flex w-full min-w-0 list-none flex-col gap-0.5",
+        className
+      )}
     >
       {children}
     </SharedLayoutBg>
-  );
-});
+  )
+})
 
 export const AnimatedSidebarMenuItem = forwardRef<
   HTMLLIElement,
@@ -833,13 +869,15 @@ export const AnimatedSidebarMenuItem = forwardRef<
       data-slot="sidebar-menu-item"
       className={cn("relative", className)}
     />
-  );
-});
-
-export interface AnimatedSidebarMenuSubProps
-  extends Omit<HTMLMotionProps<"ul">, "children"> {
-  open: boolean;
-  children?: ReactNode;
+  )
+})
+
+export interface AnimatedSidebarMenuSubProps extends Omit<
+  HTMLMotionProps<"ul">,
+  "children"
+> {
+  open: boolean
+  children?: ReactNode
 }
 
 export const AnimatedSidebarMenuSub = forwardRef<
@@ -847,10 +885,10 @@ export const AnimatedSidebarMenuSub = forwardRef<
   AnimatedSidebarMenuSubProps
 >(function AnimatedSidebarMenuSub(
   { open, children, className, ...props },
-  forwardedRef,
+  forwardedRef
 ) {
-  const context = useAnimatedSidebar();
-  const panel = useAnimatedSidebarPanel();
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
 
   return (
     <AnimatePresence initial={false} mode="popLayout">
@@ -866,24 +904,21 @@ export const AnimatedSidebarMenuSub = forwardRef<
           transition={context.reduce ? { duration: 0.12 } : undefined}
           data-slot="sidebar-menu-sub"
           className={cn(
-            "relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-border border-l pl-3",
-            className,
+            "relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-border pl-3",
+            className
           )}
         >
           {children}
         </motion.ul>
       ) : null}
     </AnimatePresence>
-  );
-});
+  )
+})
 
 export const AnimatedSidebarMenuSubItem = forwardRef<
   HTMLLIElement,
   HTMLMotionProps<"li">
->(function AnimatedSidebarMenuSubItem(
-  { className, ...props },
-  forwardedRef,
-) {
+>(function AnimatedSidebarMenuSubItem({ className, ...props }, forwardedRef) {
   return (
     <motion.li
       {...props}
@@ -892,20 +927,20 @@ export const AnimatedSidebarMenuSubItem = forwardRef<
       data-slot="sidebar-menu-sub-item"
       className={cn("relative min-w-0", className)}
     />
-  );
-});
+  )
+})
 
 export interface AnimatedSidebarMenuSubButtonProps {
-  children: ReactNode;
-  icon?: ReactNode;
-  href?: string;
-  isActive?: boolean;
-  disabled?: boolean;
-  closeOnSelect?: boolean;
-  target?: "_blank" | "_self" | "_parent" | "_top";
-  rel?: string;
-  onSelect?: () => void;
-  className?: string;
+  children: ReactNode
+  icon?: ReactNode
+  href?: string
+  isActive?: boolean
+  disabled?: boolean
+  closeOnSelect?: boolean
+  target?: "_blank" | "_self" | "_parent" | "_top"
+  rel?: string
+  onSelect?: () => void
+  className?: string
 }
 
 export function AnimatedSidebarMenuSubButton({
@@ -920,18 +955,18 @@ export function AnimatedSidebarMenuSubButton({
   onSelect,
   className,
 }: AnimatedSidebarMenuSubButtonProps) {
-  const context = useAnimatedSidebar();
+  const context = useAnimatedSidebar()
 
   const select = (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => {
     if (disabled) {
-      event.preventDefault();
-      return;
+      event.preventDefault()
+      return
     }
-    onSelect?.();
-    if (context.isMobile && closeOnSelect) context.setOpenMobile(false);
-  };
+    onSelect?.()
+    if (context.isMobile && closeOnSelect) context.setOpenMobile(false)
+  }
 
   const content = (
     <>
@@ -943,7 +978,7 @@ export function AnimatedSidebarMenuSubButton({
       </span>
       <span className="min-w-0 flex-1 truncate">{children}</span>
     </>
-  );
+  )
 
   const interactiveClassName = cn(
     "flex min-h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-left text-xs outline-none",
@@ -951,17 +986,14 @@ export function AnimatedSidebarMenuSubButton({
     "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
     isActive && "bg-muted/70 text-foreground",
     disabled && "cursor-not-allowed opacity-40",
-    className,
-  );
+    className
+  )
 
   return href ? (
     <motion.a
       href={href}
       target={target}
-      rel={
-        rel ??
-        (target === "_blank" ? "noreferrer noopener" : undefined)
-      }
+      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
       aria-current={isActive ? "page" : undefined}
       aria-disabled={disabled || undefined}
       tabIndex={disabled ? -1 : undefined}
@@ -984,22 +1016,22 @@ export function AnimatedSidebarMenuSubButton({
     >
       {content}
     </motion.button>
-  );
+  )
 }
 
 export interface AnimatedSidebarMenuButtonProps {
-  children: ReactNode;
-  icon?: ReactNode;
-  badge?: ReactNode;
-  href?: string;
-  isActive?: boolean;
-  ariaExpanded?: boolean;
-  disabled?: boolean;
-  closeOnSelect?: boolean;
-  target?: "_blank" | "_self" | "_parent" | "_top";
-  rel?: string;
-  onSelect?: () => void;
-  className?: string;
+  children: ReactNode
+  icon?: ReactNode
+  badge?: ReactNode
+  href?: string
+  isActive?: boolean
+  ariaExpanded?: boolean
+  disabled?: boolean
+  closeOnSelect?: boolean
+  target?: "_blank" | "_self" | "_parent" | "_top"
+  rel?: string
+  onSelect?: () => void
+  className?: string
 }
 
 export function AnimatedSidebarMenuButton({
@@ -1016,24 +1048,23 @@ export function AnimatedSidebarMenuButton({
   onSelect,
   className,
 }: AnimatedSidebarMenuButtonProps) {
-  const context = useAnimatedSidebar();
-  const panel = useAnimatedSidebarPanel();
-  const textLabel = typeof children === "string" ? children : undefined;
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+  const textLabel = typeof children === "string" ? children : undefined
 
   const select = (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
   ) => {
     if (disabled) {
-      event.preventDefault();
-      return;
+      event.preventDefault()
+      return
     }
-    onSelect?.();
-    const shouldCloseOnSelect =
-      closeOnSelect ?? ariaExpanded === undefined;
+    onSelect?.()
+    const shouldCloseOnSelect = closeOnSelect ?? ariaExpanded === undefined
     if (context.isMobile && shouldCloseOnSelect) {
-      context.setOpenMobile(false);
+      context.setOpenMobile(false)
     }
-  };
+  }
 
   const content = (
     <>
@@ -1068,7 +1099,7 @@ export function AnimatedSidebarMenuButton({
         aria-hidden={panel.collapsed}
         className={cn(
           "relative z-10 min-w-0 flex-1 truncate",
-          panel.collapsed && "pointer-events-none",
+          panel.collapsed && "pointer-events-none"
         )}
       >
         {children}
@@ -1094,7 +1125,7 @@ export function AnimatedSidebarMenuButton({
         </motion.span>
       ) : null}
     </>
-  );
+  )
 
   const interactiveClassName = cn(
     "relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none",
@@ -1102,17 +1133,14 @@ export function AnimatedSidebarMenuButton({
     "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
     isActive && "text-foreground",
     disabled && "cursor-not-allowed opacity-40",
-    className,
-  );
+    className
+  )
 
   return href ? (
     <motion.a
       href={href}
       target={target}
-      rel={
-        rel ??
-        (target === "_blank" ? "noreferrer noopener" : undefined)
-      }
+      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
       aria-current={isActive ? "page" : undefined}
       aria-expanded={ariaExpanded}
       aria-disabled={disabled || undefined}
@@ -1141,5 +1169,5 @@ export function AnimatedSidebarMenuButton({
     >
       {content}
     </motion.button>
-  );
+  )
 }