@kushagradhawan/kookie-ui 0.1.39 → 0.1.40

package/src/components/_internal/base-sidebar-menu.css

@@ -99,26 +99,26 @@
   & :where(.rt-SidebarMenuSubTriggerIcon) {
     transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
   }
-  
-  &:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
+
+  &:where([data-state='open']) :where(.rt-SidebarMenuSubTriggerIcon) {
     transform: rotate(90deg);
   }
 }
 
 .rt-SidebarMenuSubContent {
   overflow: hidden;
-  
+
   /* Allow focus outlines to show */
   &:where(:focus-within) {
     overflow: visible;
   }
-  
+
   /* Radix Accordion animation support */
-  &:where([data-state="open"]) {
+  &:where([data-state='open']) {
     animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
   }
-  
-  &:where([data-state="closed"]) {
+
+  &:where([data-state='closed']) {
     animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
   }
 }
@@ -195,7 +195,7 @@
   :where(.rt-SidebarContent.rt-r-size-1) & {
     padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
   }
-  
+
   :where(.rt-SidebarContent.rt-r-size-2) & {
     padding-right: var(--base-menu-item-padding-y); /* Matches top/bottom padding */
   }
@@ -220,4 +220,4 @@
 .rt-SidebarContent :where(.rt-BaseMenuItem) {
   margin-top: calc(var(--space-1) / 2);
   margin-bottom: calc(var(--space-1) / 2);
-} 
+}

package/src/components/shell.css

@@ -18,7 +18,9 @@
   --shell-overlay-width: auto;
 }
 @supports (height: 100dvh) {
-  .rt-ShellRoot { block-size: 100dvh; }
+  .rt-ShellRoot {
+    block-size: 100dvh;
+  }
 }
 
 /* Global Header (sticky) */
@@ -27,7 +29,8 @@
   top: 0;
   inset-inline: 0;
   z-index: var(--shell-z-header, 10);
-  block-size: var(--shell-header-height, 64px);
+  height: var(--shell-header-height, 64px);
+  min-height: var(--shell-header-height, 64px);
   display: flex;
   align-items: center;
   background-color: var(--color-panel);
@@ -85,8 +88,6 @@
   overflow: hidden;
 }
 
-
-
 /* Single-markup morph container */
 .rt-ShellSidebarSingle {
   /* Staggered animation: width first, then content fade */
@@ -106,7 +107,8 @@
   /* Exit animation: fade out content first, then collapse width */
   transition:
     opacity var(--motion-duration-small) var(--motion-ease-standard),
-    inline-size var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    inline-size var(--motion-duration-small) var(--motion-ease-standard)
+      var(--motion-duration-small);
 }
 
 /* When visible: show content after width settles */

package/src/components/shell.tsx

@@ -161,6 +161,8 @@ interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
   onToolChange?: (id: string | null) => void;
   activeContext?: string | null;
   onContextChange?: (id: string | null) => void;
+  /** Custom cycling order for single-markup sidebars. Defaults to ['panel', 'rail', 'collapsed'] */
+  singleViewCycle?: SingleView[];
 }
 
 const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(
@@ -175,6 +177,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(
       onToolChange,
       activeContext: activeContextProp,
       onContextChange,
+      singleViewCycle = ['panel', 'rail', 'collapsed'],
       className,
       style,
       children,
@@ -237,13 +240,13 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(
     }, []);
     const cycleSingleView = React.useCallback(
       (side: ShellSide) => {
-        const order: SingleView[] = ['panel', 'rail', 'collapsed'];
+        const order = singleViewCycle;
         const current = singleViewBySide[side];
         const idx = order.indexOf(current);
         const next = order[(idx + 1) % order.length];
         setSingleViewBySide(side, next);
       },
-      [singleViewBySide, setSingleViewBySide],
+      [singleViewBySide, setSingleViewBySide, singleViewCycle],
     );
 
     // === Active tool coordination state ===
@@ -433,7 +436,6 @@ const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(
         role="banner"
         className={classNames('rt-ShellHeader', className)}
         style={{
-          ['--shell-header-height' as any]: headerHeight,
           ['--shell-z-header' as any]: zHeader,
           ...style,
         }}

package/src/components/table.css

@@ -131,4 +131,8 @@
 .rt-TableRoot:where(.rt-variant-ghost) {
   --scrollarea-scrollbar-horizontal-margin-left: 0;
   --scrollarea-scrollbar-horizontal-margin-right: 0;
+
+  & :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
+    --table-row-box-shadow: none;
+  }
 }

package/src/hooks/use-body-pointer-events-cleanup.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-let bodyCleanupInstalled = false;
+let cleanupInstalled = false;
 
 /**
  * Hook to cleanup stuck pointer-events: none on document.body
@@ -12,70 +12,101 @@ let bodyCleanupInstalled = false;
 export function useBodyPointerEventsCleanup() {
   React.useEffect(() => {
     if (typeof document === 'undefined') return;
+    if (cleanupInstalled) return;
 
-    let timeoutId: number | undefined;
+    cleanupInstalled = true;
 
     const hasOpenModal = (): boolean => {
-      // Detect any open modal dialogs/alertdialogs
-      return Boolean(
+      // Check for open dialogs/alertdialogs
+      const hasDialogs = Boolean(
         document.querySelector(
           '[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]',
         ),
       );
+
+      // Also check for any Radix overlays that are still mounted
+      const hasRadixOverlays = Boolean(
+        document.querySelector('[data-radix-popper-content-wrapper], [data-state="open"]'),
+      );
+
+      return hasDialogs || hasRadixOverlays;
     };
 
-    const cleanup = () => {
+    const forceCleanup = () => {
+      // Aggressive cleanup - remove pointer-events regardless
+      if (document.body.style.pointerEvents === 'none') {
+        console.log('[KookieUI] Force cleaning stuck pointer-events: none from body');
+        document.body.style.pointerEvents = '';
+
+        // Also remove any scroll-lock related attributes
+        document.body.removeAttribute('data-scroll-locked');
+        document.body.removeAttribute('data-remove-scroll');
+
+        // Remove any classes that might be causing issues
+        document.body.classList.remove('ReactModal__Body--open');
+      }
+    };
+
+    const safeCleanup = () => {
       if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {
+        console.log('[KookieUI] Safe cleaning stuck pointer-events: none from body');
         document.body.style.pointerEvents = '';
       }
     };
 
-    const scheduleCleanup = (delay = 50) => {
-      if (timeoutId) window.clearTimeout(timeoutId);
-      timeoutId = window.setTimeout(cleanup, delay);
+    // Force cleanup on any click outside modal content
+    const onDocumentClick = (event: Event) => {
+      const target = event.target as Element;
+      if (
+        target &&
+        !target.closest(
+          '[role="dialog"], [role="alertdialog"], [data-radix-popper-content-wrapper]',
+        )
+      ) {
+        // Clicked outside any modal - force cleanup after a short delay
+        setTimeout(forceCleanup, 100);
+      }
     };
 
-    // Initial run to catch already-stuck state
-    scheduleCleanup(100);
+    // Force cleanup on ESC key
+    const onEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setTimeout(forceCleanup, 200);
+      }
+    };
 
-    // If already installed globally, don't re-register listeners/observers
-    if (bodyCleanupInstalled) {
-      return () => {
-        if (timeoutId) window.clearTimeout(timeoutId);
-      };
-    }
+    // Safe cleanup on other interactions
+    const onInteraction = () => {
+      setTimeout(safeCleanup, 50);
+    };
 
-    bodyCleanupInstalled = true;
+    // Install global listeners
+    document.addEventListener('click', onDocumentClick, true);
+    document.addEventListener('keydown', onEscapeKey, true);
+    document.addEventListener('pointerup', onInteraction, true);
+    document.addEventListener('transitionend', onInteraction, true);
+    document.addEventListener('animationend', onInteraction, true);
 
-    const onPointer = () => scheduleCleanup(50);
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' || event.key === 'Enter' || event.key === ' ') scheduleCleanup(50);
-    };
-    const onVisibility = () => {
-      if (!document.hidden) scheduleCleanup(50);
-    };
-    const onTransitionEnd = () => scheduleCleanup(0);
-    const onAnimationEnd = () => scheduleCleanup(0);
-
-    // Listen for common interactions that close overlays/menus
-    document.addEventListener('pointerup', onPointer, true);
-    document.addEventListener('click', onPointer, true);
-    document.addEventListener('keydown', onKey, true);
-    document.addEventListener('keyup', onKey, true);
-    document.addEventListener('visibilitychange', onVisibility);
-    document.addEventListener('transitionend', onTransitionEnd, true);
-    document.addEventListener('animationend', onAnimationEnd, true);
-
-    // Observe body style changes (where pointer-events is applied) and DOM mutations
-    const bodyObserver = new MutationObserver(() => scheduleCleanup(0));
-    bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['style'] });
-
-    const domObserver = new MutationObserver(() => scheduleCleanup(0));
-    domObserver.observe(document, { childList: true, subtree: true });
-
-    // Keep listeners/observers for the app lifetime to ensure cleanup even after overlays unmount
+    // Watch for DOM changes that might indicate overlay removal
+    const observer = new MutationObserver(() => {
+      setTimeout(safeCleanup, 0);
+    });
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+
+    // Fallback periodic cleanup
+    const intervalId = setInterval(() => {
+      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {
+        console.log('[KookieUI] Periodic cleanup of stuck pointer-events');
+        document.body.style.pointerEvents = '';
+      }
+    }, 1000);
+
+    // Initial cleanup
+    setTimeout(safeCleanup, 100);
+
+    // Cleanup function (keep listeners for app lifetime)
     return () => {
-      if (timeoutId) window.clearTimeout(timeoutId);
+      clearInterval(intervalId);
     };
   }, []);
 }

package/styles.css

@@ -9915,7 +9915,18 @@
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard::before{
+:where(
+        .rt-PopoverContent,
+        .rt-BaseDialogContent,
+        .rt-BaseMenuContent,
+        .rt-DropdownMenuContent,
+        .rt-ContextMenuContent,
+        .rt-AlertDialogContent,
+        .rt-HoverCardContent,
+        .rt-TooltipContent,
+        .rt-Card
+      )
+      .rt-BaseCard::before{
   -webkit-backdrop-filter: none !important;
           backdrop-filter: none !important;
 }
@@ -10274,7 +10285,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic)::before{
+:where(
+        .rt-BaseCard[data-panel-background='translucent'],
+        .rt-BaseCard[data-material='translucent']
+      )
+      .rt-BaseCard:where(.rt-variant-classic)::before{
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -10299,13 +10314,18 @@
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
   }
-  :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before{
+  :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
+            .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before{
     background-color: var(--gray-2);
     -webkit-backdrop-filter: none;
             backdrop-filter: none;
     --backdrop-filter-panel: none;
   }
-  :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before{
+  :where(
+              .rt-BaseCard[data-panel-background='translucent'],
+              .rt-BaseCard[data-material='translucent']
+            )
+            .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:hover)::before{
     background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
@@ -10333,7 +10353,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before{
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where([data-state='open'])::before{
   background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
@@ -10359,7 +10383,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-classic):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
   background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
@@ -10426,7 +10454,18 @@
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
   }
-  :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover){
+  :where(
+            .rt-PopoverContent,
+            .rt-BaseDialogContent,
+            .rt-BaseMenuContent,
+            .rt-DropdownMenuContent,
+            .rt-ContextMenuContent,
+            .rt-AlertDialogContent,
+            .rt-HoverCardContent,
+            .rt-TooltipContent,
+            .rt-Card
+          )
+          .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover){
     -webkit-backdrop-filter: none !important;
             backdrop-filter: none !important;
   }
@@ -10454,7 +10493,18 @@
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']){
+:where(
+          .rt-PopoverContent,
+          .rt-BaseDialogContent,
+          .rt-BaseMenuContent,
+          .rt-DropdownMenuContent,
+          .rt-ContextMenuContent,
+          .rt-AlertDialogContent,
+          .rt-HoverCardContent,
+          .rt-TooltipContent,
+          .rt-Card
+        )
+        .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']){
   -webkit-backdrop-filter: none !important;
           backdrop-filter: none !important;
 }
@@ -10481,7 +10531,18 @@
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])){
+:where(
+          .rt-PopoverContent,
+          .rt-BaseDialogContent,
+          .rt-BaseMenuContent,
+          .rt-DropdownMenuContent,
+          .rt-ContextMenuContent,
+          .rt-AlertDialogContent,
+          .rt-HoverCardContent,
+          .rt-TooltipContent,
+          .rt-Card
+        )
+        .rt-BaseCard:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])){
   -webkit-backdrop-filter: none !important;
           backdrop-filter: none !important;
 }
@@ -10495,16 +10556,16 @@
 }
 .rt-BaseCard:where(.rt-variant-soft){
   --card-border-width: 0px;
-  --card-background-color: var(--gray-3);
+  --card-background-color: var(--gray-2);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft){
-  --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+  --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
 }
 .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='solid'], [data-material='solid']){
-  --card-background-color: var(--gray-3);
+  --card-background-color: var(--gray-2);
 }
 .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent']){
-  --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+  --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
 }
 .rt-BaseCard:where(.rt-variant-soft)::before{
   background-color: var(--card-background-color);
@@ -10518,7 +10579,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft)::before{
+:where(
+        .rt-BaseCard[data-panel-background='translucent'],
+        .rt-BaseCard[data-material='translucent']
+      )
+      .rt-BaseCard:where(.rt-variant-soft)::before{
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -10541,19 +10606,35 @@
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
   }
-  :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before{
+  :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
+            .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before{
     background-color: var(--gray-3);
     -webkit-backdrop-filter: none;
             backdrop-filter: none;
     --backdrop-filter-panel: none;
   }
-  :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before{
+  :where(
+              .rt-BaseCard[data-panel-background='translucent'],
+              .rt-BaseCard[data-material='translucent']
+            )
+            .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before{
     background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
   }
-  :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before{
+  :where(
+              .rt-PopoverContent,
+              .rt-BaseDialogContent,
+              .rt-BaseMenuContent,
+              .rt-DropdownMenuContent,
+              .rt-ContextMenuContent,
+              .rt-AlertDialogContent,
+              .rt-HoverCardContent,
+              .rt-TooltipContent,
+              .rt-Card
+            )
+            .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before{
     -webkit-backdrop-filter: none !important;
             backdrop-filter: none !important;
   }
@@ -10572,32 +10653,51 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before{
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before{
   background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
 }
-:where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before{
+:where(
+            .rt-PopoverContent,
+            .rt-BaseDialogContent,
+            .rt-BaseMenuContent,
+            .rt-DropdownMenuContent,
+            .rt-ContextMenuContent,
+            .rt-AlertDialogContent,
+            .rt-HoverCardContent,
+            .rt-TooltipContent,
+            .rt-Card
+          )
+          .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before{
   -webkit-backdrop-filter: none !important;
           backdrop-filter: none !important;
 }
 .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
-  background-color: var(--gray-4);
+  background-color: var(--gray-3);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
-  background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
 }
 :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
-  background-color: var(--gray-4);
+  background-color: var(--gray-3);
   -webkit-backdrop-filter: none;
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
-  background-color: color-mix(in srgb, var(--gray-a4), var(--gray-4) 60%);
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
+  background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -10632,7 +10732,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface)::before{
+:where(
+        .rt-BaseCard[data-panel-background='translucent'],
+        .rt-BaseCard[data-material='translucent']
+      )
+      .rt-BaseCard:where(.rt-variant-surface)::before{
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
   --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -10662,13 +10766,18 @@
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
   }
-  :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before{
+  :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
+            .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before{
     background-color: var(--gray-2);
     -webkit-backdrop-filter: none;
             backdrop-filter: none;
     --backdrop-filter-panel: none;
   }
-  :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before{
+  :where(
+              .rt-BaseCard[data-panel-background='translucent'],
+              .rt-BaseCard[data-material='translucent']
+            )
+            .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:hover)::before{
     background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
@@ -10695,7 +10804,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where([data-state='open'])::before{
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where([data-state='open'])::before{
   background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
@@ -10721,7 +10834,11 @@
           backdrop-filter: none;
   --backdrop-filter-panel: none;
 }
-:where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
+:where(
+            .rt-BaseCard[data-panel-background='translucent'],
+            .rt-BaseCard[data-material='translucent']
+          )
+          .rt-BaseCard:where(.rt-variant-surface):where(:any-link, button, label):where(:active:not([data-state='open']))::before{
   background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
   -webkit-backdrop-filter: var(--backdrop-filter-panel);
           backdrop-filter: var(--backdrop-filter-panel);
@@ -18869,7 +18986,7 @@
 .rt-SidebarMenuSubTrigger :where(.rt-SidebarMenuSubTriggerIcon){
   transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
 }
-.rt-SidebarMenuSubTrigger:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon){
+.rt-SidebarMenuSubTrigger:where([data-state='open']) :where(.rt-SidebarMenuSubTriggerIcon){
   transform: rotate(90deg);
 }
 .rt-SidebarMenuSubContent{
@@ -18878,10 +18995,10 @@
 .rt-SidebarMenuSubContent:where(:focus-within){
   overflow: visible;
 }
-.rt-SidebarMenuSubContent:where([data-state="open"]){
+.rt-SidebarMenuSubContent:where([data-state='open']){
   animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
 }
-.rt-SidebarMenuSubContent:where([data-state="closed"]){
+.rt-SidebarMenuSubContent:where([data-state='closed']){
   animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
 }
 @keyframes rt-sidebar-slide-down {
@@ -19803,7 +19920,8 @@
   top: 0;
   inset-inline: 0;
   z-index: var(--shell-z-header, 10);
-  block-size: var(--shell-header-height, 64px);
+  height: var(--shell-header-height, 64px);
+  min-height: var(--shell-header-height, 64px);
   display: flex;
   align-items: center;
   background-color: var(--color-panel);
@@ -21199,6 +21317,9 @@
   --scrollarea-scrollbar-horizontal-margin-left: 0;
   --scrollarea-scrollbar-horizontal-margin-right: 0;
 }
+.rt-TableRoot:where(.rt-variant-ghost) :where(.rt-TableBody) :where(.rt-TableRow:last-child){
+  --table-row-box-shadow: none;
+}
 .rt-TabsContent{
   position: relative;
   outline: 0;