@kushagradhawan/kookie-ui 0.1.53 → 0.1.55

package/src/components/_internal/base-card.css

@@ -64,8 +64,9 @@
     z-index: -1;
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent']) & {
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -78,22 +79,6 @@
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
-
-    /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-    :where(
-        .rt-PopoverContent,
-        .rt-BaseDialogContent,
-        .rt-BaseMenuContent,
-        .rt-DropdownMenuContent,
-        .rt-ContextMenuContent,
-        .rt-AlertDialogContent,
-        .rt-HoverCardContent,
-        .rt-TooltipContent,
-        .rt-Card
-      )
-      & {
-      backdrop-filter: none !important;
-    }
   }
   & {
     contain: paint;
@@ -319,6 +304,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -327,11 +313,7 @@
       --backdrop-filter-panel: none;
     }
 
-    :where(
-        .rt-BaseCard[data-panel-background='translucent'],
-        .rt-BaseCard[data-material='translucent']
-      )
-      & {
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
@@ -362,18 +344,13 @@
           }
 
           /* Component-level overrides for hover */
-          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
-            & {
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
             background-color: var(--gray-2);
             backdrop-filter: none;
             --backdrop-filter-panel: none;
           }
 
-          :where(
-              .rt-BaseCard[data-panel-background='translucent'],
-              .rt-BaseCard[data-material='translucent']
-            )
-            & {
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
             background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -406,11 +383,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -441,11 +414,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -696,6 +665,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -704,11 +674,7 @@
       --backdrop-filter-panel: none;
     }
 
-    :where(
-        .rt-BaseCard[data-panel-background='translucent'],
-        .rt-BaseCard[data-material='translucent']
-      )
-      & {
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
@@ -739,18 +705,13 @@
           }
 
           /* Component-level overrides for hover */
-          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
-            & {
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
             background-color: var(--gray-3);
             backdrop-filter: none;
             --backdrop-filter-panel: none;
           }
 
-          :where(
-              .rt-BaseCard[data-panel-background='translucent'],
-              .rt-BaseCard[data-material='translucent']
-            )
-            & {
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
             background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -793,11 +754,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -839,11 +796,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -895,6 +848,7 @@
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
+      --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
 
     /* Component-level overrides (higher specificity) */
@@ -903,11 +857,7 @@
       --backdrop-filter-panel: none;
     }
 
-    :where(
-        .rt-BaseCard[data-panel-background='translucent'],
-        .rt-BaseCard[data-material='translucent']
-      )
-      & {
+    :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
       backdrop-filter: var(--backdrop-filter-panel);
       --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     }
@@ -950,18 +900,13 @@
           }
 
           /* Component-level overrides for hover */
-          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid'])
-            & {
+          :where(.rt-BaseCard[data-panel-background='solid'], .rt-BaseCard[data-material='solid']) & {
             background-color: var(--gray-2);
             backdrop-filter: none;
             --backdrop-filter-panel: none;
           }
 
-          :where(
-              .rt-BaseCard[data-panel-background='translucent'],
-              .rt-BaseCard[data-material='translucent']
-            )
-            & {
+          :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
             background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
             backdrop-filter: var(--backdrop-filter-panel);
             --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -997,11 +942,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
@@ -1036,11 +977,7 @@
           --backdrop-filter-panel: none;
         }
 
-        :where(
-            .rt-BaseCard[data-panel-background='translucent'],
-            .rt-BaseCard[data-material='translucent']
-          )
-          & {
+        :where(.rt-BaseCard[data-panel-background='translucent'], .rt-BaseCard[data-material='translucent']) & {
           background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
           backdrop-filter: var(--backdrop-filter-panel);
           --backdrop-filter-panel: blur(var(--backdrop-blur-panel));

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

@@ -5,19 +5,7 @@
   - Shared tokens defined/consumed: --sidebar-base-border-radius, etc.
 */
 
-/* Sidebar Provider - handles positioning */
-.rt-SidebarProvider {
-  /* Positioning based on side */
-  &:where([data-side='left']) {
-    /* Left side is default - no additional positioning needed */
-    order: -1; /* Ensure it appears first in flex container */
-  }
-
-  &:where([data-side='right']) {
-    /* Position on the right side */
-    order: 999; /* Push to end in flex container */
-  }
-}
+/* Removed Sidebar Provider (unused) */
 
 /* Sidebar Root Container */
 .rt-SidebarRoot {
@@ -129,9 +117,4 @@
   margin: var(--space-2) 0;
 }
 
-/* Responsive behavior - only hide when not in Sheet overlay mode */
-@media (max-width: 768px) {
-  .rt-SidebarRoot:not(:where(.rt-SheetContent .rt-SidebarRoot)) {
-    display: none;
-  }
-}
+/* Removed mobile hide rule; Shell handles overlay vs inline */

package/src/components/_internal/shell-bottom.tsx

@@ -6,7 +6,7 @@ import { useShell } from '../shell.context.js';
 import { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { BottomHandle, PaneHandle } from './shell-handles.js';
-import { BREAKPOINTS } from '../shell.types.js';
+import { _BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
 
 interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {

package/src/components/_internal/shell-handles.tsx

@@ -19,7 +19,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     snapTolerance,
     collapseThreshold,
     collapsible,
-    target,
+    target: _target,
     requestCollapse,
     requestToggle,
   } = usePaneResize();

package/src/components/_internal/shell-inspector.tsx

@@ -6,7 +6,7 @@ import { useShell } from '../shell.context.js';
 import { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
-import { BREAKPOINTS } from '../shell.types.js';
+import { _BREAKPOINTS } from '../shell.types.js';
 import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
 
 interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {

package/src/components/_internal/shell-sidebar.tsx

@@ -6,8 +6,8 @@ import { useShell } from '../shell.context.js';
 import { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { SidebarHandle, PaneHandle } from './shell-handles.js';
-import type { Breakpoint, PaneMode, PaneSizePersistence, PresentationValue, ResponsivePresentation, ResponsiveSidebarMode, SidebarMode, Responsive } from '../shell.types.js';
-import { BREAKPOINTS } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive } from '../shell.types.js';
+import { _BREAKPOINTS } from '../shell.types.js';
 
 interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;

package/src/components/callout.css

@@ -6,6 +6,7 @@
   text-align: left;
   color: var(--accent-a11);
   transition: var(--transition-card);
+  border-radius: var(--callout-border-radius);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -21,7 +22,7 @@
     backdrop-filter: none;
     --backdrop-filter-components: none;
   }
-  
+
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -79,7 +80,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-2);
       padding: var(--space-3);
-      border-radius: var(--radius-1);
+      --callout-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
       --callout-icon-height: var(--line-height-1);
       --callout-icon-size: var(--content-icon-size-1);
     }
@@ -87,7 +88,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-3);
       padding: var(--space-4);
-      border-radius: var(--radius-2);
+      --callout-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
       --callout-icon-height: var(--line-height-2);
       --callout-icon-size: var(--content-icon-size-2);
     }
@@ -95,10 +96,26 @@
       row-gap: var(--space-3);
       column-gap: var(--space-4);
       padding: var(--space-5);
-      border-radius: var(--radius-3);
+      --callout-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
       --callout-icon-height: var(--line-height-3);
       --callout-icon-size: var(--content-icon-size-3);
     }
+    &:where(.rt-r-size-4) {
+      row-gap: var(--space-3);
+      column-gap: var(--space-5);
+      padding: var(--space-6);
+      --callout-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --callout-icon-height: var(--line-height-4);
+      --callout-icon-size: var(--content-icon-size-4);
+    }
+    &:where(.rt-r-size-5) {
+      row-gap: var(--space-4);
+      column-gap: var(--space-6);
+      padding: var(--space-7);
+      --callout-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --callout-icon-height: var(--line-height-5);
+      --callout-icon-size: var(--content-icon-size-5);
+    }
   }
 }
 
@@ -234,4 +251,4 @@
       background-color: var(--color-surface-translucent);
     }
   }
-}
+}

package/src/components/chatbar.tsx

@@ -8,9 +8,7 @@ import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
 import { Box } from './box.js';
-import { Card } from './card.js';
 import { Text } from './text.js';
-import { Inset } from './inset.js';
 import { useDropzone } from 'react-dropzone';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
@@ -287,7 +285,10 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
   // `attachments={undefined}` to clear attachments. In that case we normalize to an empty array.
   const isAttachmentsControlled = 'attachments' in props;
   const [attachmentsUncontrolled, setAttachmentsUncontrolled] = React.useState<ChatbarAttachment[]>(defaultAttachments);
-  const attachments = isAttachmentsControlled ? ((attachmentsProp ?? []) as ChatbarAttachment[]) : attachmentsUncontrolled;
+  const attachments = React.useMemo(
+    () => (isAttachmentsControlled ? ((attachmentsProp ?? []) as ChatbarAttachment[]) : attachmentsUncontrolled),
+    [isAttachmentsControlled, attachmentsProp, attachmentsUncontrolled],
+  );
 
   // Track generated object URLs for cleanup
   const generatedUrlSetRef = React.useRef<Set<string>>(new Set());
@@ -416,11 +417,12 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
 
   // Revoke any remaining generated URLs on unmount
   React.useEffect(() => {
+    const urlSet = generatedUrlSetRef.current;
     return () => {
-      for (const url of Array.from(generatedUrlSetRef.current)) {
+      for (const url of Array.from(urlSet)) {
         URL.revokeObjectURL(url);
       }
-      generatedUrlSetRef.current.clear();
+      urlSet.clear();
     };
   }, []);
 

package/src/components/shell.hooks.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Breakpoint, PresentationValue, ResponsivePresentation } from './shell.types.js';
-import { BREAKPOINTS } from './shell.types.js';
+import { _BREAKPOINTS } from './shell.types.js';
 import { useShell } from './shell.context.js';
 
 export function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue {
@@ -15,7 +15,7 @@ export function useResponsivePresentation(presentation: ResponsivePresentation):
       return presentation[currentBreakpoint]!;
     }
 
-    const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+    const bpKeys = Object.keys(_BREAKPOINTS) as Array<keyof typeof _BREAKPOINTS>;
     const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
     const startIdx = order.indexOf(currentBreakpoint as Breakpoint);
 
@@ -50,7 +50,7 @@ export function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>>
       return map[currentBreakpoint as Breakpoint] as T;
     }
 
-    const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+    const bpKeys = Object.keys(_BREAKPOINTS) as Array<keyof typeof _BREAKPOINTS>;
     const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
     const startIdx = order.indexOf(currentBreakpoint as Breakpoint);
 

package/src/components/shell.tsx

@@ -31,12 +31,12 @@ import * as Sheet from './sheet.js';
 import { VisuallyHidden } from './visually-hidden.js';
 import { useResponsivePresentation, useResponsiveValue } from './shell.hooks.js';
 import { PaneResizeContext } from './_internal/shell-resize.js';
-import { PaneHandle, PanelHandle, SidebarHandle, InspectorHandle, BottomHandle } from './_internal/shell-handles.js';
+import { PaneHandle, PanelHandle } from './_internal/shell-handles.js';
 import { Sidebar } from './_internal/shell-sidebar.js';
 import { Bottom } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
 import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive } from './shell.types.js';
-import { BREAKPOINTS } from './shell.types.js';
+import { _BREAKPOINTS } from './shell.types.js';
 import {
   ShellProvider,
   useShell,
@@ -75,7 +75,7 @@ function useBreakpoint(): { bp: Breakpoint; ready: boolean } {
   React.useEffect(() => {
     if (typeof window === 'undefined') return;
 
-    const queries: [key: keyof typeof BREAKPOINTS, query: string][] = Object.entries(BREAKPOINTS) as any;
+    const queries: [key: keyof typeof _BREAKPOINTS, query: string][] = Object.entries(_BREAKPOINTS) as any;
     const mqls = queries.map(([k, q]) => [k, window.matchMedia(q)] as const);
 
     const compute = () => {
@@ -556,7 +556,7 @@ type RailProps = React.ComponentPropsWithoutRef<'div'> & {
 
 // Left container - behaves like Inspector but contains Rail+Panel
 const Left = React.forwardRef<HTMLDivElement, LeftProps>(
-  ({ className, presentation = { initial: 'fixed', sm: 'fixed' }, collapsible = true, onExpand, onCollapse, children, style, ...props }, ref) => {
+  ({ className, presentation = { initial: 'fixed', sm: 'fixed' }, collapsible: _collapsible = true, onExpand, onCollapse, children, style, ...props }, ref) => {
     const shell = useShell();
     const resolvedPresentation = useResponsivePresentation(presentation);
     const isOverlay = resolvedPresentation === 'overlay';
@@ -581,7 +581,7 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
       return () => shell.setHasLeft(false);
     }, [shell]);
 
-    const lastBpRef = React.useRef<Breakpoint | null>(null);
+    const _lastBpRef = React.useRef<Breakpoint | null>(null);
     const lastLeftModeRef = React.useRef<PaneMode | null>(null);
     const initNotifiedRef = React.useRef(false);
     const resolvedDefaultOpen = useResponsiveValue((props as any).defaultOpen as any);
@@ -633,7 +633,7 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
       }
     }, [shell.leftMode, onExpand, onCollapse]);
 
-    const isExpanded = shell.leftMode === 'expanded';
+    const _isExpanded = shell.leftMode === 'expanded';
 
     // Left is not resizable; width derives from Rail/Panel.
 
@@ -674,11 +674,11 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
       const isType = (el: React.ReactElement, comp: any) => React.isValidElement(el) && el.type === comp;
       const railEl = childArray.find((el) => isType(el, Rail));
       const panelEl = childArray.find((el) => isType(el, Panel));
-      const railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
-      const panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
-      const hasRail = Boolean(railEl);
-      const hasPanel = Boolean(panelEl);
-      const includePanel = hasPanel && (shell.panelMode === 'expanded' || shell.peekTarget === 'panel');
+      const _railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
+      const _panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
+      const _hasRail = Boolean(railEl);
+      const _hasPanel = Boolean(panelEl);
+      const _includePanel = _hasPanel && (shell.panelMode === 'expanded' || shell.peekTarget === 'panel');
 
       // Strip control props from DOM spread
       const { open: _openIgnored, defaultOpen: _defaultOpenIgnored, onOpenChange: _onOpenChangeIgnored, ...stackDomProps } = props as any;
@@ -810,7 +810,7 @@ type PanelComponent = React.ForwardRefExoticComponent<PanelPublicProps & React.R
   Handle: HandleComponent;
 };
 
-type SidebarComponent = React.ForwardRefExoticComponent<
+type _SidebarComponent = React.ForwardRefExoticComponent<
   (Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {
     state?: Responsive<SidebarMode>;
     defaultState?: SidebarMode;
@@ -821,9 +821,9 @@ type SidebarComponent = React.ForwardRefExoticComponent<
     React.RefAttributes<HTMLDivElement>
 > & { Handle: HandleComponent };
 
-type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
+type _InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
 
-type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
+type _BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
 
 const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
   (

package/src/components/shell.types.ts

@@ -16,7 +16,7 @@ export type PaneSizePersistence = {
   save?: (size: number) => void | Promise<void>;
 };
 
-export const BREAKPOINTS = {
+export const _BREAKPOINTS = {
   xs: '(min-width: 520px)',
   sm: '(min-width: 768px)',
   md: '(min-width: 1024px)',
@@ -24,6 +24,6 @@ export const BREAKPOINTS = {
   xl: '(min-width: 1640px)',
 } as const;
 
-export type Breakpoint = 'initial' | keyof typeof BREAKPOINTS;
+export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
 
 export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';

package/src/components/table.css

@@ -45,7 +45,7 @@
   }
 }
 .rt-TableColumnHeaderCell {
-  font-weight: bold;
+  font-weight: 600;
 }
 .rt-TableRowHeaderCell {
   font-weight: normal;
@@ -60,7 +60,7 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: var(--radius-3);
+      --table-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
       --table-cell-padding: var(--space-2);
       --table-cell-min-height: calc(36px * var(--scaling));
 
@@ -70,7 +70,7 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: var(--radius-4);
+      --table-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
       --table-cell-padding: var(--space-3);
       --table-cell-min-height: calc(44px * var(--scaling));
 
@@ -80,8 +80,8 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: var(--radius-4);
-      --table-cell-padding: var(--space-3) var(--space-4);
+      --table-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --table-cell-padding: var(--space-4);
       --table-cell-min-height: var(--space-8);
 
       & :where(.rt-TableRootTable) {
@@ -89,6 +89,26 @@
         line-height: var(--line-height-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --table-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --table-cell-padding: var(--space-5);
+      --table-cell-min-height: var(--space-9);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+      }
+    }
+    &:where(.rt-r-size-5) {
+      --table-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --table-cell-padding: var(--space-6);
+      --table-cell-min-height: var(--space-10);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-4);
+        line-height: var(--line-height-4);
+      }
+    }
   }
 }