@kushagradhawan/kookie-ui 0.1.107 → 0.1.109

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import * as Sheet from '../sheet.js';
 import { VisuallyHidden } from '../visually-hidden.js';
-import { useShell } from '../shell.context.js';
+import { useShell, useInset } from '../shell.context.js';
 import { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
@@ -23,6 +23,8 @@ type InspectorPublicProps = PaneBaseProps &
     onSizeChange?: (size: number, meta: InspectorSizeChangeMeta) => void;
     sizeUpdate?: 'throttle' | 'debounce';
     sizeUpdateMs?: number;
+    /** When true, adds margin and triggers gray backdrop on Shell. */
+    inset?: boolean;
   };
 
 type InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };
@@ -39,6 +41,7 @@ const INSPECTOR_DOM_PROP_KEYS = [
   'sizeUpdate',
   'sizeUpdateMs',
   'style',
+  'inset',
 ] as const satisfies readonly (keyof InspectorPublicProps)[];
 
 export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>((initialProps, ref) => {
@@ -70,9 +73,19 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     sizeUpdateMs = 50,
     size,
     defaultSize,
+    inset,
   } = initialProps;
   const inspectorDomProps = extractPaneDomProps(initialProps, INSPECTOR_DOM_PROP_KEYS);
   const shell = useShell();
+  const { registerInset, unregisterInset } = useInset();
+
+  // Register/unregister inset
+  React.useEffect(() => {
+    if (inset) {
+      registerInset('inspector');
+      return () => unregisterInset('inspector');
+    }
+  }, [inset, registerInset, unregisterInset]);
   const resolvedPresentation = useResponsivePresentation(presentation);
   const isOverlay = resolvedPresentation === 'overlay';
   const isStacked = resolvedPresentation === 'stacked';
@@ -377,6 +390,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       data-peek={shell.peekTarget === 'inspector' || undefined}
       data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}
       data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}
+      data-inset={inset || undefined}
       style={{
         ...style,
         ['--inspector-size' as any]: `${expandedSize}px`,

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import * as Sheet from '../sheet.js';
 import { VisuallyHidden } from '../visually-hidden.js';
-import { useShell } from '../shell.context.js';
+import { useShell, useInset } from '../shell.context.js';
 import { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { extractPaneDomProps } from './shell-prop-helpers.js';
@@ -30,6 +30,8 @@ type SidebarPublicProps = Omit<SidebarPaneProps, 'mode' | 'defaultMode' | 'onMod
   onSizeChange?: (size: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void;
   sizeUpdate?: 'throttle' | 'debounce';
   sizeUpdateMs?: number;
+  /** When true, adds margin and triggers gray backdrop on Shell. */
+  inset?: boolean;
 } & (SidebarControlledProps | SidebarUncontrolledProps);
 
 type SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof SidebarHandle };
@@ -48,6 +50,7 @@ const SIDEBAR_DOM_PROP_KEYS = [
   'sizeUpdate',
   'sizeUpdateMs',
   'style',
+  'inset',
 ] as const satisfies readonly (keyof SidebarPublicProps)[];
 
 export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((initialProps, ref) => {
@@ -81,9 +84,19 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
     onSizeChange,
     sizeUpdate,
     sizeUpdateMs = 50,
+    inset,
   } = initialProps;
   const sidebarDomProps = extractPaneDomProps(initialProps, SIDEBAR_DOM_PROP_KEYS);
   const shell = useShell();
+  const { registerInset, unregisterInset } = useInset();
+
+  // Register/unregister inset
+  React.useEffect(() => {
+    if (inset) {
+      registerInset('sidebar');
+      return () => unregisterInset('sidebar');
+    }
+  }, [inset, registerInset, unregisterInset]);
   const resolvedPresentation = useResponsivePresentation(presentation);
   const isOverlay = resolvedPresentation === 'overlay';
   const isStacked = resolvedPresentation === 'stacked';
@@ -430,6 +443,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((ini
       data-peek={shell.peekTarget === 'sidebar' || undefined}
       data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}
       data-open={(shell.currentBreakpointReady && isStacked && isContentVisible) || undefined}
+      data-inset={inset || undefined}
       style={{
         ...style,
         ['--sidebar-size' as any]: `${expandedSize}px`,

package/src/components/segmented-control.css

@@ -66,7 +66,7 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-SegmentedControlRoot.rt-r-orientation-vertical {
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical) {
   grid-auto-flow: row;
   grid-auto-columns: unset;
   grid-auto-rows: 1fr;
@@ -75,7 +75,7 @@
 }
 
 /* Square items for icon-only in vertical */
-.rt-SegmentedControlRoot.rt-r-orientation-vertical:has([data-icon-only]) {
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):has([data-icon-only]) {
   grid-auto-columns: unset;
   grid-auto-rows: minmax(var(--segmented-control-height), 1fr);
 }
@@ -103,18 +103,18 @@
 }
 
 /* Vertical orientation - item layout */
-.rt-r-orientation-vertical .rt-SegmentedControlItem {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem {
   flex-direction: column;
 }
 
 /* Vertical orientation - item border radius */
-.rt-r-orientation-vertical .rt-SegmentedControlItem:first-child {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem:first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
   border-bottom-left-radius: 0;
 }
 
-.rt-r-orientation-vertical .rt-SegmentedControlItem:nth-last-child(2) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem:nth-last-child(2) {
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
   border-top-right-radius: 0;
@@ -202,7 +202,7 @@
 }
 
 /* Vertical orientation - separator */
-.rt-r-orientation-vertical .rt-SegmentedControlItemSeparator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItemSeparator {
   margin-left: calc(var(--space-1) * 0.75); /* 3px */
   margin-right: calc(var(--space-1) * 0.75); /* 3px */
   margin-top: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
@@ -313,71 +313,71 @@
 }
 
 /* Vertical orientation - indicator height based on number of items */
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator {
   width: 100%;
   height: unset;
 }
 
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(2) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(2) {
   height: calc(100% / 1);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(3) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(3) {
   height: calc(100% / 2);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(4) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(4) {
   height: calc(100% / 3);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(5) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(5) {
   height: calc(100% / 4);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(6) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(6) {
   height: calc(100% / 5);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(7) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(7) {
   height: calc(100% / 6);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(8) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(8) {
   height: calc(100% / 7);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(9) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(9) {
   height: calc(100% / 8);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(10) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(10) {
   height: calc(100% / 9);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlIndicator:nth-child(11) {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlIndicator:nth-child(11) {
   height: calc(100% / 10);
 }
 
 /* Vertical transforms */
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(1) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(1) ~ .rt-SegmentedControlIndicator {
   transform: translateY(0%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(2) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(2) ~ .rt-SegmentedControlIndicator {
   transform: translateY(100%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(3) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(3) ~ .rt-SegmentedControlIndicator {
   transform: translateY(200%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(4) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(4) ~ .rt-SegmentedControlIndicator {
   transform: translateY(300%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(5) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(5) ~ .rt-SegmentedControlIndicator {
   transform: translateY(400%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(6) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(6) ~ .rt-SegmentedControlIndicator {
   transform: translateY(500%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(7) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(7) ~ .rt-SegmentedControlIndicator {
   transform: translateY(600%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(8) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(8) ~ .rt-SegmentedControlIndicator {
   transform: translateY(700%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(9) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(9) ~ .rt-SegmentedControlIndicator {
   transform: translateY(800%);
 }
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-state='on']:nth-child(10) ~ .rt-SegmentedControlIndicator {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-state='on']:nth-child(10) ~ .rt-SegmentedControlIndicator {
   transform: translateY(900%);
 }
 
@@ -577,45 +577,45 @@
 }
 
 /* Vertical icon-only - minimum square height */
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-icon-only] {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-icon-only] {
   min-width: unset;
   min-height: var(--segmented-control-height);
 }
 
 /* Vertical icon-only - remove top/bottom padding */
-.rt-r-orientation-vertical .rt-SegmentedControlItem[data-icon-only] .rt-SegmentedControlItemLabel {
+:where(.rt-r-orientation-vertical) .rt-SegmentedControlItem[data-icon-only] .rt-SegmentedControlItemLabel {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 /* Vertical icon-only root width (explicit since nested :has() in @breakpoints may not work) */
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-1:has([data-icon-only]) {
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-1):has([data-icon-only]) {
   width: var(--space-5);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-2:has([data-icon-only]) {
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]) {
   width: var(--space-6);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-3:has([data-icon-only]) {
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]) {
   width: var(--space-7);
 }
-.rt-SegmentedControlRoot.rt-r-orientation-vertical.rt-r-size-4:has([data-icon-only]) {
+.rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]) {
   width: var(--space-8);
 }
 
 /* Vertical text items need vertical padding */
-.rt-r-orientation-vertical.rt-r-size-1 .rt-SegmentedControlItemLabel {
+:where(.rt-r-orientation-vertical):where(.rt-r-size-1) .rt-SegmentedControlItemLabel {
   padding-top: var(--space-1);
   padding-bottom: var(--space-1);
 }
-.rt-r-orientation-vertical.rt-r-size-2 .rt-SegmentedControlItemLabel {
+:where(.rt-r-orientation-vertical):where(.rt-r-size-2) .rt-SegmentedControlItemLabel {
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
-.rt-r-orientation-vertical.rt-r-size-3 .rt-SegmentedControlItemLabel {
+:where(.rt-r-orientation-vertical):where(.rt-r-size-3) .rt-SegmentedControlItemLabel {
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
-.rt-r-orientation-vertical.rt-r-size-4 .rt-SegmentedControlItemLabel {
+:where(.rt-r-orientation-vertical):where(.rt-r-size-4) .rt-SegmentedControlItemLabel {
   padding-top: var(--space-3);
   padding-bottom: var(--space-3);
 }

package/src/components/sheet.css

@@ -10,6 +10,14 @@
   will-change: transform;
 }
 
+/* iOS dynamic viewport height - accounts for browser chrome */
+@supports (height: 100dvh) {
+  :where(.rt-SheetContent) {
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+}
+
 /* Logical side anchoring (RTL-aware via logical inset) */
 :where(.rt-SheetContent[data-side='start']) {
   inset-block: 0 !important;
@@ -17,6 +25,8 @@
   margin: 0 !important;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
+  /* iOS safe area for home indicator */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 :where(.rt-SheetContent[data-side='end']) {
   inset-block: 0 !important;
@@ -24,6 +34,8 @@
   margin: 0 !important;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
+  /* iOS safe area for home indicator */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 :where(.rt-SheetContent[data-side='top']) {
   inset-block-start: 0 !important;

package/src/components/shell.context.tsx

@@ -134,3 +134,17 @@ export function useComposition() {
   if (!ctx) throw new Error('useComposition must be used within Shell.Root');
   return ctx;
 }
+
+// Inset slice - tracks which panes have inset for gray backdrop
+export type InsetPaneId = 'left' | 'sidebar' | 'content' | 'inspector' | 'bottom';
+export const InsetContext = React.createContext<{
+  insetPanes: Set<InsetPaneId>;
+  registerInset: (id: InsetPaneId) => void;
+  unregisterInset: (id: InsetPaneId) => void;
+  hasAnyInset: boolean;
+} | null>(null as any);
+export function useInset() {
+  const ctx = React.useContext(InsetContext);
+  if (!ctx) throw new Error('useInset must be used within Shell.Root');
+  return ctx;
+}

package/src/components/shell.css

@@ -78,19 +78,13 @@
   width: var(--rail-size, 64px);
 }
 
+/* Collapsed rail: stay in flow during transition, then hide */
 .rt-ShellRail[data-mode='collapsed'] {
   width: 0px;
   /* Delay container collapse until content fade completes */
   transition-delay: var(--motion-duration-small);
 }
 
-/* Keep collapsed panes out of flow to avoid layout blips when exiting peek */
-.rt-ShellRail[data-mode='collapsed'] {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-}
-
 /* Peek overlay rules consolidated later to avoid duplication */
 
 .rt-ShellRailContent {
@@ -102,16 +96,20 @@
 
   /* Content animation: fade out first, then fade in after width settles */
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 
 .rt-ShellRailContent[data-visible] {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent {
-  /* Exit animation: fade out content first */
+  /* Exit animation: fade out content first, then collapse */
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
@@ -133,19 +131,13 @@
   width: var(--panel-size, 288px);
 }
 
+/* Collapsed panel: stay in flow during transition, then hide */
 .rt-ShellPanel:not([data-visible]) {
   width: 0px;
   /* Delay container collapse until content fade completes */
   transition-delay: var(--motion-duration-small);
 }
 
-/* Keep collapsed panel out of flow to avoid layout blips when exiting peek */
-.rt-ShellPanel:not([data-visible]) {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
-}
-
 .rt-ShellPanelContent {
   display: flex;
   flex-direction: column;
@@ -155,16 +147,20 @@
 
   /* Content animation */
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 
 .rt-ShellPanelContent[data-visible] {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent {
-  /* Exit animation: fade out content first */
+  /* Exit animation: fade out content first, then collapse */
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
@@ -195,14 +191,9 @@
   width: var(--sidebar-thin-size, 64px);
 }
 
-/* Keep collapsed sidebar out of flow to avoid layout blips when exiting peek */
+/* Collapsed sidebar: stay in flow during transition, then hide */
 .rt-ShellSidebar[data-mode='collapsed'] {
   width: 0px;
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  flex-shrink: 0;
-  flex-basis: 0;
   /* Delay container collapse until content fade completes */
   transition-delay: var(--motion-duration-small);
 }
@@ -216,6 +207,7 @@
 
   /* Content animation */
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 
@@ -226,6 +218,7 @@
 
 .rt-ShellSidebarContent[data-visible] {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* Sidebar presentation switch sequencing (thin ↔ expanded) */
@@ -245,8 +238,10 @@
 }
 
 .rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
-  /* Exit animation: fade out content first */
+  /* Exit animation: fade out content first, then collapse */
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
@@ -320,16 +315,20 @@
 
   /* Content animation */
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 
 .rt-ShellInspectorContent[data-visible] {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent {
-  /* Exit animation: fade out content first */
+  /* Exit animation: fade out content first, then collapse */
   opacity: 0;
+  width: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
@@ -351,11 +350,9 @@
   height: var(--bottom-size, 200px);
 }
 
+/* Collapsed bottom: stay in flow during transition, then hide */
 .rt-ShellBottom[data-mode='collapsed'] {
   height: 0px;
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
   /* Delay container collapse until content fade completes */
   transition-delay: var(--motion-duration-small);
 }
@@ -369,11 +366,13 @@
 
   /* Content animation */
   opacity: 0;
+  pointer-events: none;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
 
 .rt-ShellBottomContent[data-visible] {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* Disable transitions during active resize */
@@ -401,8 +400,10 @@
 }
 
 .rt-ShellBottom[data-mode='collapsed'] .rt-ShellBottomContent {
-  /* Exit animation: fade out content first */
+  /* Exit animation: fade out content first, then collapse */
   opacity: 0;
+  height: 0;
+  visibility: hidden;
   transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
 
@@ -618,3 +619,25 @@
 .rt-ShellBottom[data-peek][data-mode='collapsed'] {
   height: var(--bottom-size, 200px);
 }
+
+/* --- Inset mode: floating panes with gray backdrop --- */
+
+/* Shell body gets gray backdrop when any pane has inset */
+.rt-ShellBody[data-has-inset] {
+  background: var(--gray-2);
+}
+
+/* Inset pane shared styles */
+.rt-ShellLeft[data-inset],
+.rt-ShellSidebar[data-inset],
+.rt-ShellContent[data-inset],
+.rt-ShellInspector[data-inset],
+.rt-ShellBottom[data-inset] {
+  --shell-inset-gap: var(--space-2);
+  margin: var(--shell-inset-gap);
+  border-radius: var(--radius-3);
+  background: var(--color-background);
+  box-shadow: var(--shadow-2);
+  /* Override height: 100% so margin doesn't overflow */
+  height: auto;
+}