@womp/kookie-ui 0.26.3 → 0.27.0

package/src/components/shell.tsx

@@ -23,7 +23,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
-import { useComposedRefs } from 'radix-ui/internal';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 import { PaneResizeContext } from './_internal/shell-resize.js';
 import { PaneHandle, PanelHandle } from './_internal/shell-handles.js';
 import { Sidebar } from './_internal/shell-sidebar.js';
@@ -52,7 +52,8 @@ import { useShell, useSidebarMode } from './shell.context.js';
 import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
 import { useThemeSize } from '../hooks/theme-size.js';
-import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext } from './_internal/pane-chrome.js';
+import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, ShellSizeContext, ShellWindowContext } from './_internal/pane-chrome.js';
+import { onPageScrollMediaChange, pageScrollMatches } from './_internal/shell-page-scroll.js';
 import type { PaneSize, PaneHeaderProps, PaneFooterProps, ScrollProps } from './_internal/pane-chrome.js';
 import { PaneBandSizeContext } from './_internal/pane-band-context.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';
@@ -61,7 +62,18 @@ import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneNa
 
 export interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode;
+  /**
+   * The Shell's height. `full` (the default) is the window's height; on a narrow touch screen the
+   * page scrolls instead of the content, so the browser can hide its toolbars. `auto` grows with
+   * the content. Any other value is the Shell's own height, and makes it contained.
+   */
   height?: 'full' | 'auto' | string | number;
+  /**
+   * Makes the Shell fill its parent instead of the window, and always scroll inside itself. Its
+   * overlays cover only its own box and leave the page free to scroll. Use it for a Shell in a
+   * card, a demo or a canvas. An explicit `height` implies it.
+   */
+  contained?: boolean;
   /** The index the panes' chrome takes: `Shell.PaneHeader`, `Shell.Scroll`, `Shell.PaneFooter` and the Sidebar rows in them. Defaults to the nearest Theme's size (3 when the Theme is 4), else `2`. */
   size?: PaneSize;
 }
@@ -105,7 +117,18 @@ type LivePane = { name: PaneName; id: string; el: HTMLElement };
 /** Shell.Root's own range; a Theme size above it maps to 3. */
 const shellSizePropDef = { values: ['1', '2', '3'] as const };
 
-const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', size: sizeProp, style, onKeyDown, onFocus, ...props }, ref) => {
+/** Lets a Shell.Header tell the Root its height, for the rows that stick beneath it while the page scrolls. */
+const ShellHeaderHeightContext = React.createContext<((height: number | undefined) => void) | null>(null);
+
+/** The Shell.Header's default height, which the stylesheet assumes until a Header says otherwise. */
+const DEFAULT_HEADER_HEIGHT = 64;
+
+/** The content's scroller while the frame scrolls: the Shell.Scroll's viewport, or the content itself. */
+function frameScroller(rootEl: HTMLElement): HTMLElement | null {
+  return rootEl.querySelector<HTMLElement>(':scope > .kui-ShellContent > .kui-ShellScroll > .kui-ScrollAreaViewport') ?? rootEl.querySelector<HTMLElement>(':scope > .kui-ShellContent');
+}
+
+const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', contained: containedProp, size: sizeProp, style, onKeyDown, onFocus, ...props }, ref) => {
   // No size of its own: the nearest Theme's, mapped into 1-3.
   const size = useThemeSize(sizeProp, shellSizePropDef);
   const [store] = React.useState(createShellStore);
@@ -148,10 +171,72 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   );
   const liveCount = [...store.entries.values()].filter((entry) => entry.overlayLive && entry.el).length;
 
-  // A Shell given a height of its own sits inside a page, and its overlays
-  // cover only its box: it holds no page lock. `full` is the page, and
-  // `auto` grows with its content, so its overlays are placed on the window.
-  const contained = height !== 'full' && height !== 'auto';
+  // A contained Shell sits inside a page, and its overlays cover only its box:
+  // it holds no page lock. A height of its own implies it. `full` is the
+  // window, and `auto` grows with its content, so its overlays are placed on
+  // the window. Only a `full` Shell lets the page scroll on a phone.
+  const contained = containedProp === true || (height !== 'full' && height !== 'auto');
+  const windowShell = !contained && height === 'full';
+
+  const [headerHeight, setHeaderHeight] = React.useState<number | undefined>(undefined);
+
+  /*
+   * The reading position crosses with the scroller. When a touch window
+   * crosses the narrow boundary (a phone rotating, an iPad entering Split
+   * View), the scroller changes between the content and the page, and the new
+   * one starts at the top. The offset is remembered on `scroll` from whichever
+   * scroller is live, because by the time the change is reported the old one
+   * has already been laid out again and clamped. Only the live scroller is
+   * heard. The clamp itself is reported as a scroll in the same frame as the
+   * resize and before the media change, so scrolls are not heard from a resize
+   * until that frame's animation callbacks.
+   */
+  React.useEffect(() => {
+    if (!windowShell) return;
+    const rootEl = rootRef.current;
+    const win = rootEl?.ownerDocument.defaultView;
+    if (!rootEl || !win || typeof win.matchMedia !== 'function') return;
+    let pageScrolls = pageScrollMatches();
+    let offset = pageScrolls ? win.scrollY : (frameScroller(rootEl)?.scrollTop ?? 0);
+    let frame = 0;
+    let resizing = 0;
+    const onResize = () => {
+      if (resizing) cancelAnimationFrame(resizing);
+      resizing = requestAnimationFrame(() => {
+        resizing = 0;
+      });
+    };
+    const fromPage = () => {
+      if (pageScrolls && !resizing) offset = win.scrollY;
+    };
+    const fromFrame = (event: Event) => {
+      if (!pageScrolls && !resizing && event.target instanceof HTMLElement && event.target === frameScroller(rootEl)) offset = event.target.scrollTop;
+    };
+    win.addEventListener('resize', onResize);
+    win.addEventListener('scroll', fromPage, { passive: true });
+    rootEl.addEventListener('scroll', fromFrame, { passive: true, capture: true });
+    const stop = onPageScrollMediaChange((matches) => {
+      pageScrolls = matches;
+      const carried = offset;
+      if (frame) cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        if (matches) win.scrollTo(0, carried);
+        else {
+          const el = frameScroller(rootEl);
+          if (el) el.scrollTop = carried;
+        }
+      });
+    });
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      if (resizing) cancelAnimationFrame(resizing);
+      win.removeEventListener('resize', onResize);
+      win.removeEventListener('scroll', fromPage);
+      rootEl.removeEventListener('scroll', fromFrame, { capture: true });
+      stop();
+    };
+  }, [windowShell]);
 
   /*
    * Containment is the Root's, not the pane's. Only the Root can see every live
@@ -371,6 +456,8 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
     <ShellStoreContext.Provider value={store}>
       <ShellSizeContext.Provider value={size}>
       <ShellContentContext.Provider value={false}>
+      <ShellWindowContext.Provider value={windowShell}>
+      <ShellHeaderHeightContext.Provider value={setHeaderHeight}>
       <ShellInsetContext.Provider value={insetContext}>
       {/* A Shell inside a portalled surface's Theme starts with no band, like any other. */}
       <PaneBandSizeContext.Provider value={undefined}>
@@ -381,12 +468,19 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           {...props}
           ref={composedRef}
           className={classNames('kui-ShellRoot', className)}
-          data-height={height === 'auto' ? 'auto' : undefined}
+          data-height={height === 'auto' && !contained ? 'auto' : undefined}
+          data-contained={contained || undefined}
+          data-window={windowShell || undefined}
           data-has-inset={insetPanes.size > 0 || undefined}
           data-overlay-live={liveCount > 0 || undefined}
           onKeyDown={handleKeyDown}
           onFocus={handleFocus}
-          style={{ ...heightStyle, ...(railOffset ? ({ '--shell-rail-offset': railOffset } as CSSPropertiesWithVars) : {}), ...style }}
+          style={{
+            ...heightStyle,
+            ...(railOffset ? ({ '--shell-rail-offset': railOffset } as CSSPropertiesWithVars) : {}),
+            ...(headerHeight !== undefined ? ({ '--kui-shell-header-h': `${headerHeight}px` } as CSSPropertiesWithVars) : {}),
+            ...style,
+          }}
         >
           {children}
           {/* Root-owned and always mounted. The stylesheet shows it while an
@@ -396,6 +490,8 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
         </div>
       </PaneBandSizeContext.Provider>
       </ShellInsetContext.Provider>
+      </ShellHeaderHeightContext.Provider>
+      </ShellWindowContext.Provider>
       </ShellContentContext.Provider>
       </ShellSizeContext.Provider>
     </ShellStoreContext.Provider>
@@ -409,19 +505,29 @@ interface ShellHeaderProps extends React.ComponentPropsWithoutRef<'header'> {
   height?: number;
 }
 
-const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, height = 64, style, ...props }, ref) => (
-  <header
-    {...props}
-    ref={ref}
-    className={classNames('kui-ShellHeader', className)}
-    style={
-      {
-        ...style,
-        '--shell-header-height': `${height}px`,
-      } as CSSPropertiesWithVars
-    }
-  />
-));
+const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, height = DEFAULT_HEADER_HEIGHT, style, ...props }, ref) => {
+  // Rows that stick beneath the header while the page scrolls need its height. The stylesheet
+  // assumes the default, so only another height is told to the Root.
+  const setHeaderHeight = React.useContext(ShellHeaderHeightContext);
+  useLayoutEffect(() => {
+    if (!setHeaderHeight) return;
+    setHeaderHeight(height === DEFAULT_HEADER_HEIGHT ? undefined : height);
+    return () => setHeaderHeight(undefined);
+  }, [setHeaderHeight, height]);
+  return (
+    <header
+      {...props}
+      ref={ref}
+      className={classNames('kui-ShellHeader', className)}
+      style={
+        {
+          ...style,
+          '--shell-header-height': `${height}px`,
+        } as CSSPropertiesWithVars
+      }
+    />
+  );
+});
 Header.displayName = 'Shell.Header';
 
 /* ── Left (deprecated) ─────────────────────────────────────────────────────── */

package/styles.css

@@ -16728,6 +16728,7 @@
 .kui-ShellRoot {
   --shell-inset-gap: var(--space-3);
   --shell-rail-offset: 0px;
+  --kui-shell-page-top: 0px;
   display: grid;
   grid-template-areas: 'header header header header header' 'rail panel sidebar content inspector' 'bottom bottom bottom bottom bottom';
   grid-template-columns: auto auto auto minmax(0, 1fr) auto;
@@ -16745,6 +16746,9 @@
     height: 100dvh;
   }
 }
+.kui-ShellRoot[data-contained] {
+  height: 100%;
+}
 :root[data-kui-shell-lock] {
   overflow: hidden;
 }
@@ -16785,6 +16789,8 @@
   --kui-pane-band-end: initial;
   --kui-shell-position: initial;
   --kui-shell-z: initial;
+  --kui-shell-pin: initial;
+  --kui-shell-pin-top: initial;
   --kui-shell-row: initial;
   --kui-shell-col: initial;
   --kui-shell-surface: initial;
@@ -17086,6 +17092,8 @@
 .kui-ShellRail[data-presentation='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
   --kui-shell-position: absolute;
   --kui-shell-z: 6;
+  --kui-shell-pin: fixed;
+  --kui-shell-pin-top: 0px;
   --kui-shell-row: 1 / -1;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
@@ -17099,6 +17107,8 @@
 .kui-ShellRail[data-presentation='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
   --kui-shell-position: absolute;
   --kui-shell-z: 3;
+  --kui-shell-pin: fixed;
+  --kui-shell-pin-top: initial;
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
@@ -17115,6 +17125,8 @@
 .kui-ShellRail[data-presentation-initial='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
   --kui-shell-position: initial;
   --kui-shell-z: initial;
+  --kui-shell-pin: initial;
+  --kui-shell-pin-top: initial;
   --kui-shell-row: initial;
   --kui-shell-col: initial;
   --kui-shell-surface: initial;
@@ -17128,6 +17140,8 @@
 .kui-ShellRail[data-presentation-initial='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
   --kui-shell-position: absolute;
   --kui-shell-z: 6;
+  --kui-shell-pin: fixed;
+  --kui-shell-pin-top: 0px;
   --kui-shell-row: 1 / -1;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
@@ -17141,6 +17155,8 @@
 .kui-ShellRail[data-presentation-initial='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
   --kui-shell-position: absolute;
   --kui-shell-z: 3;
+  --kui-shell-pin: fixed;
+  --kui-shell-pin-top: initial;
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
@@ -17166,6 +17182,8 @@
   .kui-ShellRail[data-presentation-xs='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: initial;
     --kui-shell-z: initial;
+    --kui-shell-pin: initial;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: initial;
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
@@ -17179,6 +17197,8 @@
   .kui-ShellRail[data-presentation-xs='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 6;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: 0px;
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17192,6 +17212,8 @@
   .kui-ShellRail[data-presentation-xs='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 3;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17218,6 +17240,8 @@
   .kui-ShellRail[data-presentation-sm='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: initial;
     --kui-shell-z: initial;
+    --kui-shell-pin: initial;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: initial;
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
@@ -17231,6 +17255,8 @@
   .kui-ShellRail[data-presentation-sm='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 6;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: 0px;
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17244,6 +17270,8 @@
   .kui-ShellRail[data-presentation-sm='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 3;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17270,6 +17298,8 @@
   .kui-ShellRail[data-presentation-md='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: initial;
     --kui-shell-z: initial;
+    --kui-shell-pin: initial;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: initial;
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
@@ -17283,6 +17313,8 @@
   .kui-ShellRail[data-presentation-md='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 6;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: 0px;
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17296,6 +17328,8 @@
   .kui-ShellRail[data-presentation-md='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 3;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17322,6 +17356,8 @@
   .kui-ShellRail[data-presentation-lg='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: initial;
     --kui-shell-z: initial;
+    --kui-shell-pin: initial;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: initial;
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
@@ -17335,6 +17371,8 @@
   .kui-ShellRail[data-presentation-lg='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 6;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: 0px;
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17348,6 +17386,8 @@
   .kui-ShellRail[data-presentation-lg='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 3;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17374,6 +17414,8 @@
   .kui-ShellRail[data-presentation-xl='fixed'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: initial;
     --kui-shell-z: initial;
+    --kui-shell-pin: initial;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: initial;
     --kui-shell-col: initial;
     --kui-shell-surface: initial;
@@ -17387,6 +17429,8 @@
   .kui-ShellRail[data-presentation-xl='overlay'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 6;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: 0px;
     --kui-shell-row: 1 / -1;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17400,6 +17444,8 @@
   .kui-ShellRail[data-presentation-xl='stacked'] ~ .kui-ShellPanel[data-presentation-follows] {
     --kui-shell-position: absolute;
     --kui-shell-z: 3;
+    --kui-shell-pin: fixed;
+    --kui-shell-pin-top: initial;
     --kui-shell-row: 2 / 3;
     --kui-shell-col: 1 / -1;
     --kui-shell-surface: var(--color-surface);
@@ -17425,6 +17471,8 @@
 .kui-ShellRail ~ .kui-ShellPanel[data-presentation-follows][data-peek][data-state] {
   --kui-shell-position: absolute;
   --kui-shell-z: 4;
+  --kui-shell-pin: fixed;
+  --kui-shell-pin-top: initial;
   --kui-shell-row: 2 / 3;
   --kui-shell-col: 1 / -1;
   --kui-shell-surface: var(--color-surface);
@@ -17498,6 +17546,96 @@
   -webkit-margin-before: 0;
           margin-block-start: 0;
 }
+@media (max-width: 767.98px) and (pointer: coarse) {
+  .kui-ShellRoot[data-window] {
+    height: auto;
+    min-height: 100vh;
+    overflow: clip;
+  }
+  @supports (height: 100dvh) {
+    .kui-ShellRoot[data-window] {
+      min-height: 100dvh;
+    }
+  }
+  .kui-ShellRoot[data-window]:has(> .kui-ShellHeader) {
+    --kui-shell-page-top: var(--kui-shell-header-h, 64px);
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellHeader {
+    position: sticky;
+    top: 0;
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent {
+    overflow: clip;
+    isolation: isolate;
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent :where(*) {
+    scroll-margin-block: calc(var(--kui-shell-page-top) + var(--kui-content-float-start, 0px)) var(--kui-content-float-end, 0px);
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellPaneHeader[data-float]) {
+    --kui-content-float-start: calc(max(var(--kui-pane-row-start), var(--kui-pane-band-start, 0px)) + 2 * var(--kui-pane-pad-start));
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellPaneFooter[data-float]) {
+    --kui-content-float-end: calc(max(var(--kui-pane-row-end), var(--kui-pane-band-end, 0px)) + 2 * var(--kui-pane-pad-end));
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    height: auto;
+    overflow: clip;
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll > .kui-ScrollAreaViewport {
+    height: auto;
+    overflow: visible !important;
+    -webkit-mask-image: none;
+            mask-image: none;
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll > .kui-ScrollAreaScrollbar {
+    display: none;
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellScroll) > .kui-ShellPaneHeader[data-float] {
+    position: sticky;
+    top: var(--kui-shell-page-top);
+    -webkit-box-ordinal-group: 0;
+        -ms-flex-order: -1;
+            order: -1;
+    margin-bottom: calc(-1 * var(--kui-content-float-start, 0px));
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent:has(> .kui-ShellScroll) > .kui-ShellPaneFooter[data-float] {
+    position: sticky;
+    bottom: 0;
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    margin-top: calc(-1 * var(--kui-content-float-end, 0px));
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent > :not(.kui-ShellScroll, [data-float]):has(~ .kui-ShellScroll) {
+    position: sticky;
+    top: var(--kui-shell-page-top);
+    z-index: 1;
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellContent > .kui-ShellScroll ~ :not([data-float]) {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+  .kui-ShellRoot[data-window] > :is(.kui-ShellRail, .kui-ShellPanel, .kui-ShellSidebar, .kui-ShellInspector) {
+    position: var(--kui-shell-pin, sticky);
+    top: var(--kui-shell-pin-top, var(--kui-shell-page-top));
+    block-size: calc(100vh - var(--kui-shell-pin-top, var(--kui-shell-page-top)));
+  }
+  @supports (height: 100dvh) {
+    .kui-ShellRoot[data-window] > :is(.kui-ShellRail, .kui-ShellPanel, .kui-ShellSidebar, .kui-ShellInspector) {
+      block-size: calc(100dvh - var(--kui-shell-pin-top, var(--kui-shell-page-top)));
+    }
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellBottom {
+    position: var(--kui-shell-pin, sticky);
+  }
+  .kui-ShellRoot[data-window] > .kui-ShellScrim {
+    position: fixed;
+  }
+}
 .kui-ShellResizer {
   position: absolute;
   z-index: 1;

package/dist/esm/chunk-OLTRWCQK.js

@@ -1,3 +0,0 @@
-"use client";
-import{a as u}from"./chunk-MGWGD6KI.js";import{a as s}from"./chunk-ANQLWGFN.js";import{j as m}from"./chunk-GHWEXMF6.js";import*as e from"react";import c from"classnames";var C=e.createContext(null);function d(){return e.useContext(C)}var S=e.createContext("2"),h=e.createContext(!1);function F({children:t,presentation:n}){let a=e.useContext(S),o=e.useMemo(()=>({size:a,menuVariant:"soft",presentation:n}),[a,n]);return e.createElement(C.Provider,{value:o},t)}function P(){let t=d(),n=e.useContext(S),a=t?.size??n,o=t?.menuVariant??"soft";return["kui-ShellPaneChrome",`kui-r-size-${a}`,`kui-menu-variant-${o}`]}var R={1:"2",2:"3",3:"4",4:"4"};function f(){let t=d(),n=e.useContext(S);return R[t?.size??n]}function M(){let t=e.useContext(s),n=e.useContext(m)!==null,a=f();return t!==void 0?t:n?a:null}var z=e.forwardRef(({className:t,float:n,children:a,...o},r)=>{let i=P(),l=f();return e.createElement("div",{...o,ref:r,"data-float":n||void 0,className:c("kui-ShellPaneHeader","kui-SidebarHeader","kui-SidebarHeader--container",...i,t)},e.createElement(s.Provider,{value:l},a))});z.displayName="Shell.PaneHeader";var b=e.forwardRef(({className:t,float:n,children:a,...o},r)=>{let i=P(),l=f();return e.createElement("div",{...o,ref:r,"data-float":n||void 0,className:c("kui-ShellPaneFooter","kui-SidebarFooter","kui-SidebarFooter--container",...i,t)},e.createElement(s.Provider,{value:l},a))});b.displayName="Shell.PaneFooter";var V=e.forwardRef(({className:t,style:n,dir:a,children:o,fade:r=!1,...i},l)=>{let v=P(),p=e.useContext(h),x=d();return p&&x===null?e.createElement(u,{...i,ref:l,type:"hover",fade:r,className:"kui-ShellScroll"},e.createElement("div",{style:n,dir:a,className:c("kui-ShellScrollContent",t)},o)):e.createElement(u,{...i,ref:l,type:"hover",fade:r,className:"kui-ShellScroll"},e.createElement("div",{style:n,dir:a,className:c("kui-BaseMenuContent","kui-SidebarContent",...v,t)},e.createElement(s.Provider,{value:null},e.createElement("div",{className:"kui-BaseMenuViewport"},o))))});V.displayName="Shell.Scroll";export{C as a,d as b,S as c,h as d,F as e,R as f,M as g,z as h,b as i,V as j};
-//# sourceMappingURL=chunk-OLTRWCQK.js.map

package/dist/esm/chunk-OLTRWCQK.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/_internal/pane-chrome.tsx"],
-  "sourcesContent": ["'use client';\n\n/**\n * A pane's own chrome: a header row, a scrolling region and a footer row.\n *\n * Shell.Sidebar and Shell.Panel render these as `Shell.PaneHeader`, `Shell.Scroll` and\n * `Shell.PaneFooter`. The pane renders anything; with these parts it is the presentation, so\n * Sidebar's menu parts work inside it with no `Sidebar.Root`. The index comes from the nearest\n * Shell (`Shell.Root size`), or from a deprecated `Sidebar.Root` that still wraps them.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { ScrollArea } from '../scroll-area.js';\nimport { ShellStoreContext } from './shell-store.js';\nimport { PaneBandSizeContext, type BandSize } from './pane-band-context.js';\n\ntype PaneSize = '1' | '2' | '3';\n\ntype SidebarVisualContextValue = {\n  size: PaneSize;\n  menuVariant: 'solid' | 'soft';\n  presentation?: 'thin' | 'expanded';\n  color?: string;\n};\n\n/** Size, menu highlight and presentation for the Sidebar parts. Internal: not exported. */\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\n\nfunction useSidebarVisual() {\n  return React.useContext(SidebarVisualContext);\n}\n\n/** The Shell's index. `Shell.Root size` sets it; panes hand it to their chrome. */\nconst ShellSizeContext = React.createContext<PaneSize>('2');\n\n/**\n * True inside `Shell.Content`. `Shell.Root` sets it back to false, so a Shell nested in the\n * content gets pane chrome in its own panes. Read by `Shell.Scroll`: in the content it holds a\n * page, not a menu, so it takes none of the menu's padding, gap or layering.\n */\nconst ShellContentContext = React.createContext(false);\n\n/**\n * Gives a Shell pane's children the Shell's index, so Sidebar parts size themselves. In a Rail\n * the rows are `thin`: icon tiles with a small label, sub-menus as dropdowns.\n */\nfunction PaneChromeScope({ children, presentation }: { children: React.ReactNode; presentation?: 'thin' }) {\n  const size = React.useContext(ShellSizeContext);\n  const value = React.useMemo<SidebarVisualContextValue>(() => ({ size, menuVariant: 'soft', presentation }), [size, presentation]);\n  return <SidebarVisualContext.Provider value={value}>{children}</SidebarVisualContext.Provider>;\n}\n\nfunction useChromeClasses() {\n  const visual = useSidebarVisual();\n  // A pane with no scope (Inspector, Bottom) still takes the Shell's index.\n  const shellSize = React.useContext(ShellSizeContext);\n  const size = visual?.size ?? shellSize;\n  const menuVariant = visual?.menuVariant ?? 'soft';\n  return ['kui-ShellPaneChrome', `kui-r-size-${size}`, `kui-menu-variant-${menuVariant}`];\n}\n\n/**\n * The index a Toolbar in a pane's header or footer rests at when it states none: one step above\n * the Shell's, so the band reads as chrome over the rows (v2 BAND_STEP). 4 has no step above.\n */\nconst BAND_STEP = { '1': '2', '2': '3', '3': '4', '4': '4' } as const satisfies Record<BandSize, BandSize>;\n\nfunction useBandSize(): BandSize {\n  const visual = useSidebarVisual();\n  const shellSize = React.useContext(ShellSizeContext);\n  return BAND_STEP[visual?.size ?? shellSize];\n}\n\n/**\n * The size a Toolbar with no `size` of its own rests at, or null for none.\n *\n * In a pane's header or footer it is that band's size. Anywhere else inside a Shell, such as\n * `Shell.Content` or a pane's body, it is the same step: one above the Shell's index, so a\n * toolbar in the content area matches the ones in the pane headers beside it (v2 sizes every\n * toolbar this way). A pane's scrolling list, and anything outside a Shell, has none.\n */\nfunction usePaneBandSize(): BandSize | null {\n  const band = React.useContext(PaneBandSizeContext);\n  const inShell = React.useContext(ShellStoreContext) !== null;\n  const step = useBandSize();\n  if (band !== undefined) return band;\n  return inShell ? step : null;\n}\n\ninterface PaneHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Floats the row over the top of `Shell.Scroll`, so the list scrolls behind it. The list\n   * starts below the row, and `Shell.Scroll fade` fades it out under the row. The row paints\n   * nothing and lets clicks through between its controls; a `Toolbar backdrop` in it keeps\n   * the controls readable.\n   */\n  float?: boolean;\n}\n\n/** A pane's header row, pinned above its scrolling region. */\nconst PaneHeader = React.forwardRef<HTMLDivElement, PaneHeaderProps>(({ className, float, children, ...props }, forwardedRef) => {\n  const chrome = useChromeClasses();\n  const band = useBandSize();\n  return (\n    <div\n      {...props}\n      ref={forwardedRef}\n      data-float={float || undefined}\n      className={classNames('kui-ShellPaneHeader', 'kui-SidebarHeader', 'kui-SidebarHeader--container', ...chrome, className)}\n    >\n      <PaneBandSizeContext.Provider value={band}>{children}</PaneBandSizeContext.Provider>\n    </div>\n  );\n});\nPaneHeader.displayName = 'Shell.PaneHeader';\n\ninterface PaneFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Floats the row over the bottom of `Shell.Scroll`, the way `Shell.PaneHeader float` does at the top. */\n  float?: boolean;\n}\n\n/** A pane's footer row, pinned below its scrolling region. */\nconst PaneFooter = React.forwardRef<HTMLDivElement, PaneFooterProps>(({ className, float, children, ...props }, forwardedRef) => {\n  const chrome = useChromeClasses();\n  const band = useBandSize();\n  return (\n    <div\n      {...props}\n      ref={forwardedRef}\n      data-float={float || undefined}\n      className={classNames('kui-ShellPaneFooter', 'kui-SidebarFooter', 'kui-SidebarFooter--container', ...chrome, className)}\n    >\n      <PaneBandSizeContext.Provider value={band}>{children}</PaneBandSizeContext.Provider>\n    </div>\n  );\n});\nPaneFooter.displayName = 'Shell.PaneFooter';\n\ninterface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Fades the list out toward an edge with more past it, and under a floating header or footer. */\n  fade?: boolean;\n}\n\n/**\n * The one region of a pane that scrolls; it takes the room the header and footer leave.\n * In `Shell.Content` it is the page's scroller, and a `Shell.PaneHeader float` beside it pins\n * the page's toolbar over it. The ref, events and ARIA props land on the element that scrolls;\n * `className`, `style` and `dir` apply to the content inside it. In a Rail, Panel or Sidebar the pane is\n * already a navigation landmark, so it needs no role of its own.\n */\nconst Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, style, dir, children, fade = false, ...props }, forwardedRef) => {\n  const chrome = useChromeClasses();\n  // A Sidebar.Root inside the content still gets a menu.\n  const contentPane = React.useContext(ShellContentContext);\n  const visual = useSidebarVisual();\n  const inContent = contentPane && visual === null;\n  if (inContent) {\n    return (\n      <ScrollArea {...props} ref={forwardedRef} type=\"hover\" fade={fade} className=\"kui-ShellScroll\">\n        <div style={style} dir={dir} className={classNames('kui-ShellScrollContent', className)}>\n          {children}\n        </div>\n      </ScrollArea>\n    );\n  }\n  return (\n    <ScrollArea {...props} ref={forwardedRef} type=\"hover\" fade={fade} className=\"kui-ShellScroll\">\n      <div style={style} dir={dir} className={classNames('kui-BaseMenuContent', 'kui-SidebarContent', ...chrome, className)}>\n        {/* A header's band does not reach a Toolbar in the scrolling list. */}\n        <PaneBandSizeContext.Provider value={null}>\n          <div className=\"kui-BaseMenuViewport\">{children}</div>\n        </PaneBandSizeContext.Provider>\n      </div>\n    </ScrollArea>\n  );\n});\nScroll.displayName = 'Shell.Scroll';\n\nexport { SidebarVisualContext, useSidebarVisual, ShellSizeContext, ShellContentContext, PaneChromeScope, PaneHeader, PaneFooter, Scroll, BAND_STEP, usePaneBandSize };\nexport type { SidebarVisualContextValue, PaneSize, BandSize, PaneHeaderProps, PaneFooterProps, ScrollProps };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "SidebarVisualContext", "useSidebarVisual", "ShellSizeContext", "ShellContentContext", "PaneChromeScope", "children", "presentation", "size", "value", "useChromeClasses", "visual", "shellSize", "menuVariant", "BAND_STEP", "useBandSize", "usePaneBandSize", "band", "PaneBandSizeContext", "inShell", "ShellStoreContext", "step", "PaneHeader", "className", "float", "props", "forwardedRef", "chrome", "classNames", "PaneFooter", "Scroll", "style", "dir", "fade", "contentPane", "ScrollArea"]
-}

package/dist/esm/chunk-SCIFT27R.js

@@ -1,3 +0,0 @@
-"use client";
-import{z as e}from"zod";var h=e.enum(["expanded","collapsed"]).describe("Pane state mode"),l=e.enum(["collapsed","expanded"]).describe("Sidebar state"),b=e.enum(["fixed","overlay","stacked"]).describe("Presentation mode"),z=e.enum(["initial","xs","sm","md","lg","xl"]).describe("Responsive breakpoint"),u=e.enum(["left","rail","panel","sidebar","inspector","bottom"]).describe("Pane target. `left` is deprecated: use `rail`."),m=e.enum(["toggle","expand","collapse"]).describe("Trigger action"),d=e.enum(["toggle","dismiss"]).describe("Why the state changed: `toggle` for a trigger or the resize handle, `dismiss` for Escape or the scrim"),S=e.enum(["init","resize","controlled"]).describe("Why the size changed");function r(n){return e.union([n,e.object({initial:n.optional(),xs:n.optional(),sm:n.optional(),md:n.optional(),lg:n.optional(),xl:n.optional()})])}var x=r(h).describe("Responsive pane mode configuration"),p=r(l).describe("Responsive sidebar state"),o=r(b).describe("Responsive presentation configuration"),c=r(e.boolean()).describe("Responsive open state"),f=e.object({load:e.function({output:e.union([e.number(),e.promise(e.number()),e.undefined()])}).optional(),save:e.function({input:[e.number()],output:e.union([e.void(),e.promise(e.void())])}).optional()}).describe("Deprecated, removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`."),t=e.record(e.string(),e.union([e.string(),e.number()])).optional().describe("Inline styles"),a={open:e.union([e.boolean(),c]).optional().describe("The open state, when controlled. A responsive object is deprecated."),defaultOpen:e.union([e.boolean(),c]).optional().describe("The starting state. A responsive object leaves the pane untouched, with that object as the answer at each breakpoint."),onOpenChange:e.function({input:[e.boolean(),e.object({reason:d})],output:e.void()}).optional().describe("Called when a user opens or closes the pane. Never called on mount or on a resize.")},i={id:e.string().optional().describe("The pane id. A Trigger points `aria-controls` at it."),presentation:o.optional(),expandedSize:e.number().optional(),inset:e.boolean().optional().describe("Lifts the pane off the frame and paints the backdrop behind it"),onExpand:e.function({output:e.void()}).optional().describe("Deprecated: use `onOpenChange`"),onCollapse:e.function({output:e.void()}).optional().describe("Deprecated: use `onOpenChange`"),className:e.string().optional().describe("Additional CSS class name"),style:t,children:e.any().optional()},s={minSize:e.number().optional(),maxSize:e.number().optional().describe("The largest size. A drag also stops before the handle leaves the frame."),resizable:e.boolean().optional(),collapsible:e.boolean().optional().describe("A double-click on the handle closes the pane"),size:e.union([e.number(),e.string()]).optional().describe("The size, when controlled"),defaultSize:e.union([e.number(),e.string()]).optional().describe("The starting size"),onSizeChange:e.function({input:[e.number(),e.object({reason:S})],output:e.void()}).optional(),sizeUpdate:e.enum(["throttle","debounce"]).optional().describe("Rate-limits onSizeChange across repeated resize ends, such as key presses on the handle. A drag calls it once, when the drag ends; use onResize for live sizes."),sizeUpdateMs:e.number().optional(),onResize:e.function({input:[e.number()],output:e.void()}).optional().describe("Called during a drag, at most once per animation frame"),onResizeStart:e.function({input:[e.number()],output:e.void()}).optional(),onResizeEnd:e.function({input:[e.number()],output:e.void()}).optional(),snapPoints:e.array(e.number()).optional().describe("Deprecated, removed in 1.0"),snapTolerance:e.number().optional().describe("Deprecated, removed in 1.0"),collapseThreshold:e.number().optional().describe("Deprecated, removed in 1.0"),paneId:e.string().optional().describe("Deprecated, removed in 1.0"),persistence:f.optional()},P=e.object({height:e.union([e.literal("full"),e.literal("auto"),e.string(),e.number()]).default("full").describe("Height of the frame. `full` is 100dvh, with 100vh where dvh is not supported."),size:e.enum(["1","2","3"]).default("2").describe("Index of the pane chrome and the Sidebar rows in it"),className:e.string().optional().describe("Additional CSS class name"),style:t,children:e.any().optional().describe("The Shell parts, and anything else, rendered in order")}).strict(),y=e.object({height:e.number().default(64).describe("Height of the header, in pixels"),className:e.string().optional().describe("Additional CSS class name"),style:t,children:e.any().optional().describe("Header content")}).strict(),v=e.object({...i,...a,presentation:o.default("fixed").describe("Presentation mode"),expandedSize:e.number().default(64).describe("Width in pixels"),collapsible:e.boolean().optional()}).strict(),w=e.object({...i,...a,...s,presentation:o.optional().describe("Presentation mode. With no value the panel follows the Rail's."),expandedSize:e.number().default(288).describe("Open width in pixels"),minSize:e.number().default(100).describe("Minimum width when resizing"),maxSize:e.number().default(800).describe("Maximum width when resizing"),resizable:e.boolean().default(!1).describe("Whether the panel can be resized"),collapsible:e.boolean().default(!0).describe("Whether a double-click on the handle closes the panel")}).strict(),R=e.object({...i,...s,state:e.union([l,p]).optional().describe("The state, when controlled. A responsive object is deprecated."),defaultState:p.optional().describe("The starting state. With no value the sidebar is open where it is in the frame and closed where it is an overlay."),onStateChange:e.function({input:[l,e.object({reason:d})],output:e.void()}).optional().describe("Called when a user changes the state. Never called on mount or on a resize."),presentation:o.default({initial:"overlay",sm:"fixed"}).describe("Presentation mode"),expandedSize:e.number().default(288).describe("Open width in pixels"),minSize:e.number().default(200).describe("Minimum width when resizing"),maxSize:e.number().default(400).describe("Maximum width when resizing"),resizable:e.boolean().default(!1).describe("Whether the sidebar can be resized"),collapsible:e.boolean().default(!0).describe("Whether a double-click on the handle closes the sidebar")}).strict(),T=e.object({inset:e.boolean().optional().describe("Lifts the pane off the frame and paints the backdrop behind it"),className:e.string().optional().describe("Additional CSS class name"),style:t,children:e.any().optional().describe("Main content")}).strict(),C=e.object({...i,...a,...s,presentation:o.default({initial:"overlay",sm:"fixed"}).describe("Presentation mode"),expandedSize:e.number().default(320).describe("Open width in pixels"),minSize:e.number().default(200).describe("Minimum width when resizing"),maxSize:e.number().default(500).describe("Maximum width when resizing"),resizable:e.boolean().default(!1).describe("Whether the inspector can be resized"),collapsible:e.boolean().default(!0).describe("Whether a double-click on the handle closes the inspector")}).strict(),N=e.object({...i,...a,...s,presentation:o.default("fixed").describe("Presentation mode"),expandedSize:e.number().default(200).describe("Open height in pixels"),minSize:e.number().default(100).describe("Minimum height when resizing"),maxSize:e.number().default(400).describe("Maximum height when resizing"),resizable:e.boolean().default(!1).describe("Whether the bottom panel can be resized"),collapsible:e.boolean().default(!0).describe("Whether a double-click on the handle closes the panel")}).strict(),k=e.object({target:u.describe("Which pane to drive"),action:m.default("toggle").describe("Action to perform"),peekOnHover:e.boolean().default(!1).describe("Deprecated, removed in 1.0. Shows a preview of a closed pane on hover."),type:e.enum(["button","submit","reset"]).default("button").describe("The button type"),className:e.string().optional().describe("Additional CSS class name"),style:t,children:e.any().optional().describe("Trigger content"),onClick:e.function().optional().describe("Runs before the trigger acts. Call `event.preventDefault()` to cancel it."),onMouseEnter:e.function().optional().describe("Mouse enter handler"),onMouseLeave:e.function().optional().describe("Mouse leave handler"),"aria-label":e.string().optional().describe("ARIA label for accessibility"),"aria-labelledby":e.string().optional().describe("ARIA labelled by reference"),"aria-describedby":e.string().optional().describe("ARIA described by reference")}).strict(),M=e.object({className:e.string().optional().describe("Additional CSS class name"),style:t,children:e.any().optional().describe("Handle content")}).strict();function A(n){return n}function E(n){return n}function O(n){return n}function j(n){return n}function D(n){return n}function H(n){return n}function W(n){return n}function _(n){return n}function I(n){return n}function V(n){return n}export{P as a,y as b,v as c,w as d,R as e,T as f,C as g,N as h,k as i,M as j,A as k,E as l,O as m,j as n,D as o,H as p,W as q,_ as r,I as s,V as t};
-//# sourceMappingURL=chunk-SCIFT27R.js.map