@womp/kookie-ui 0.35.7 → 0.37.0

package/src/components/schemas/shell.schema.ts

@@ -24,7 +24,7 @@ const PaneModeSchema = z.enum(['expanded', 'collapsed']).describe('Pane state mo
 const SidebarModeSchema = z.enum(['collapsed', 'expanded']).describe('Sidebar state');
 const PresentationValueSchema = z.enum(['fixed', 'overlay', 'stacked']).describe('Presentation mode');
 const _BreakpointSchema = z.enum(['initial', 'xs', 'sm', 'md', 'lg', 'xl']).describe('Responsive breakpoint');
-const PaneTargetSchema = z.enum(['left', 'rail', 'panel', 'sidebar', 'inspector', 'bottom']).describe('Pane target. `left` is deprecated: use `rail`.');
+const PaneTargetSchema = z.enum(['rail', 'panel', 'sidebar', 'inspector', 'bottom']).describe('Pane target');
 const TriggerActionSchema = z.enum(['toggle', 'expand', 'collapse']).describe('Trigger action');
 const OpenChangeReasonSchema = z.enum(['toggle', 'dismiss']).describe('Why the state changed: `toggle` for a trigger or the resize handle, `dismiss` for Escape or the scrim');
 const SizeChangeReasonSchema = z.enum(['init', 'resize', 'controlled']).describe('Why the size changed');
@@ -49,21 +49,13 @@ const ResponsiveSidebarModeSchema = responsive(SidebarModeSchema).describe('Resp
 const ResponsivePresentationSchema = responsive(PresentationValueSchema).describe('Responsive presentation configuration');
 const ResponsiveOpenSchema = responsive(z.boolean()).describe('Responsive open state');
 
-// Size persistence adapter (deprecated)
-const PaneSizePersistenceSchema = z
-  .object({
-    load: z.function({ output: z.union([z.number(), z.promise(z.number()), z.undefined()]) }).optional(),
-    save: z.function({ input: [z.number()], output: z.union([z.void(), z.promise(z.void())]) }).optional(),
-  })
-  .describe('Deprecated, removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
-
 const StyleSchema = z
   .record(z.string(), z.union([z.string(), z.number()]))
   .optional()
   .describe('Inline styles');
 
 const OpenPropsSchema = {
-  open: z.union([z.boolean(), ResponsiveOpenSchema]).optional().describe('The open state, when controlled. A responsive object is deprecated.'),
+  open: z.boolean().optional().describe('The open state, when controlled'),
   defaultOpen: z
     .union([z.boolean(), ResponsiveOpenSchema])
     .optional()
@@ -80,8 +72,6 @@ const PaneBaseShape = {
   presentation: ResponsivePresentationSchema.optional(),
   expandedSize: z.number().optional(),
   flush: z.boolean().optional().describe('Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.'),
-  onExpand: z.function({ output: z.void() }).optional().describe('Deprecated: use `onOpenChange`'),
-  onCollapse: z.function({ output: z.void() }).optional().describe('Deprecated: use `onOpenChange`'),
   className: z.string().optional().describe('Additional CSS class name'),
   style: StyleSchema,
   children: z.any().optional(),
@@ -107,11 +97,6 @@ const ResizeShape = {
     .describe('Called during a drag, at most once per animation frame'),
   onResizeStart: z.function({ input: [z.number()], output: z.void() }).optional(),
   onResizeEnd: z.function({ input: [z.number()], output: z.void() }).optional(),
-  snapPoints: z.array(z.number()).optional().describe('Deprecated, removed in 1.0'),
-  snapTolerance: z.number().optional().describe('Deprecated, removed in 1.0'),
-  collapseThreshold: z.number().optional().describe('Deprecated, removed in 1.0'),
-  paneId: z.string().optional().describe('Deprecated, removed in 1.0'),
-  persistence: PaneSizePersistenceSchema.optional(),
 };
 
 /**
@@ -183,7 +168,7 @@ export const ShellSidebarSchema = z
   .object({
     ...PaneBaseShape,
     ...ResizeShape,
-    state: z.union([SidebarModeSchema, ResponsiveSidebarModeSchema]).optional().describe('The state, when controlled. A responsive object is deprecated.'),
+    state: SidebarModeSchema.optional().describe('The state, when controlled'),
     defaultState: ResponsiveSidebarModeSchema.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: z
       .function({ input: [SidebarModeSchema, z.object({ reason: OpenChangeReasonSchema })], output: z.void() })
@@ -251,7 +236,6 @@ export const ShellTriggerSchema = z
   .object({
     target: PaneTargetSchema.describe('Which pane to drive'),
     action: TriggerActionSchema.default('toggle').describe('Action to perform'),
-    peekOnHover: z.boolean().default(false).describe('Deprecated, removed in 1.0. Shows a preview of a closed pane on hover.'),
     type: z.enum(['button', 'submit', 'reset']).default('button').describe('The button type'),
     className: z.string().optional().describe('Additional CSS class name'),
     style: StyleSchema,
@@ -298,7 +282,6 @@ export type TriggerAction = z.infer<typeof TriggerActionSchema>;
 export type ResponsiveMode = z.infer<typeof _ResponsiveModeSchema>;
 export type ResponsiveSidebarMode = z.infer<typeof ResponsiveSidebarModeSchema>;
 export type ResponsivePresentation = z.infer<typeof ResponsivePresentationSchema>;
-export type PaneSizePersistence = z.infer<typeof PaneSizePersistenceSchema>;
 
 /**
  * Development-only helper to validate and normalize Shell props

package/src/components/sheet.tsx

@@ -15,6 +15,7 @@
  * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Size follows the
  *   Theme size; start/end sheets cap at the size's overlay width unless maxWidth is set.
  * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.
+ *   A titled sheet has a Close X at the end of a Toolbar in its top row; dev warns without one.
  *   Radix owns the focus trap, initial focus and the return of focus to the trigger.
  *
  * Example
@@ -23,11 +24,13 @@
  *     <Button>Open</Button>
  *   </Sheet.Trigger>
  *   <Sheet.Content side="end" width={{ initial: '280px', md: '360px' }}>
- *     <Sheet.Title>Details</Sheet.Title>
+ *     <Toolbar>
+ *       <Toolbar.Title><Sheet.Title>Details</Sheet.Title></Toolbar.Title>
+ *       <Sheet.Close>
+ *         <Toolbar.Button iconOnly aria-label="Close">…</Toolbar.Button>
+ *       </Sheet.Close>
+ *     </Toolbar>
  *     ...
- *     <Sheet.Close>
- *       <Button>Close</Button>
- *     </Sheet.Close>
  *   </Sheet.Content>
  * </Sheet.Root>
  */
@@ -40,6 +43,7 @@ import { dialogContentPropDefs } from './dialog.props.js';
 import type { DialogContentOwnProps } from './dialog.props.js';
 import { PortalTheme } from './_internal/portal-theme.js';
 import { NavigatorHostContext, type NavigatorHost } from './_internal/navigator-host.js';
+import { useCloseWarning } from './_internal/use-close-warning.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -132,6 +136,7 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>((allPro
   // Dev-only a11y guard: the panel needs a name. A Sheet.Title anywhere inside counts it
   // in a layout effect, which runs before this ref is attached, so nesting doesn't matter.
   const titleCountRef = React.useRef(0);
+  const closeWarningRef = useCloseWarning('Sheet');
   const combinedRef = React.useCallback(
     (node: HTMLDivElement | null) => {
       if (typeof forwardedRef === 'function') {
@@ -145,8 +150,9 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>((allPro
           console.warn('Sheet.Content: Missing accessible name. Include Sheet.Title inside it or provide aria-label.');
         }
       }
+      closeWarningRef(node);
     },
-    [forwardedRef],
+    [forwardedRef, closeWarningRef],
   );
 
   useBodyPointerEventsCleanup();

package/src/components/shell.context.tsx

@@ -1,34 +1,18 @@
 'use client';
 
 /**
- * Since 0.8.0 the Shell has two contexts: the pane registry (the store) and
- * the set of panes off the frame. They live in `_internal/shell-store.tsx`. This module keeps
- * the two hooks consumers can reach: `useSidebarMode`, and the deprecated
- * `useShell`.
+ * The Shell has two contexts: the pane registry (the store) and the set of panes off the frame.
+ * They live in `_internal/shell-store.tsx`. This module keeps the hook consumers can reach:
+ * `useSidebarMode`.
  */
 import * as React from 'react';
-import { useBreakpoint } from '../hooks/use-breakpoint.js';
-import type { Breakpoint, PaneMode, PaneName, PaneTarget, PresentationValue, SidebarMode } from './shell.types.js';
-import { setShellPeek, subscribeShellStore, useShellStore, warnOnce, type PaneValue, type ShellStore } from './_internal/shell-store.js';
+import type { SidebarMode } from './shell.types.js';
+import { subscribeShellStore, useShellStore, type PaneValue } from './_internal/shell-store.js';
 
 const toSidebarMode = (value: PaneValue | undefined): SidebarMode | undefined => (value === undefined ? undefined : value === 'closed' ? 'collapsed' : 'expanded');
 
 const fromSidebarMode = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : 'open');
 
-const toPaneMode = (value: PaneValue | undefined): PaneMode => (value === undefined || value === 'closed' ? 'collapsed' : 'expanded');
-
-const paneName = (target: PaneTarget): PaneName => (target === 'left' ? 'rail' : target);
-
-/** Re-renders on every change to the registry. For the deprecated whole-shell reader only. */
-function useStoreVersion(store: ShellStore) {
-  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
-  return React.useSyncExternalStore(
-    subscribe,
-    () => store.version,
-    () => 0,
-  );
-}
-
 /**
  * The Sidebar's mode, and a setter. The setter is a user action: it reports
  * through the Sidebar's `onStateChange` the way a Trigger does.
@@ -49,94 +33,3 @@ export function useSidebarMode(): { sidebarMode: SidebarMode; setSidebarMode: (m
   );
   return { sidebarMode: toSidebarMode(value) ?? 'expanded', setSidebarMode };
 }
-
-export interface ShellContextValue {
-  leftMode: PaneMode;
-  setLeftMode: (mode: PaneMode) => void;
-  /** The Rail's open state, resolved, when it is controlled. */
-  leftControlledOpen?: boolean;
-  panelMode: PaneMode;
-  setPanelMode: (mode: PaneMode) => void;
-  sidebarMode: SidebarMode;
-  setSidebarMode: (mode: SidebarMode) => void;
-  inspectorMode: PaneMode;
-  setInspectorMode: (mode: PaneMode) => void;
-  bottomMode: PaneMode;
-  setBottomMode: (mode: PaneMode) => void;
-  peekTarget: PaneTarget | null;
-  setPeekTarget: (target: PaneTarget | null) => void;
-  peekPane: (target: PaneTarget) => void;
-  clearPeek: () => void;
-  /** Whether a Rail is mounted. */
-  hasLeft: boolean;
-  /** No effect since 0.8.0: the registry knows which panes are mounted. */
-  setHasLeft: (has: boolean) => void;
-  /** Whether a Sidebar is mounted. */
-  hasSidebar: boolean;
-  /** No effect since 0.8.0: the registry knows which panes are mounted. */
-  setHasSidebar: (has: boolean) => void;
-  currentBreakpoint: Breakpoint;
-  currentBreakpointReady: boolean;
-  /** The Rail's presentation at the current breakpoint, when known. */
-  leftResolvedPresentation?: PresentationValue;
-  togglePane: (target: PaneTarget) => void;
-  expandPane: (target: PaneTarget) => void;
-  collapsePane: (target: PaneTarget) => void;
-}
-
-const noop = () => {};
-
-/**
- * @deprecated The whole-shell reader re-renders its consumer on every change
- * to any pane. Use `Shell.Trigger` to drive a pane, `Shell.useSidebarMode`
- * for the Sidebar, and each pane's `open`/`onOpenChange` for its state.
- * Removed in 1.0.
- *
- * Keeps 0.7's shape. The setters act as a user would: they report through
- * the pane's own callback with `reason: 'toggle'`, and a controlled pane
- * changes only when the app passes the new value.
- */
-export function useShell(): ShellContextValue {
-  const store = useShellStore('useShell');
-  React.useEffect(() => {
-    warnOnce("Shell.useShell is deprecated and is removed in 1.0. Use Shell.Trigger, Shell.useSidebarMode, or a pane's own open/onOpenChange.");
-  }, []);
-  useStoreVersion(store);
-  const { breakpoint, ready } = useBreakpoint();
-  const actions = React.useMemo(() => {
-    const setMode = (name: PaneName) => (mode: PaneMode) => store.entries.get(name)?.setValue(mode === 'collapsed' ? 'closed' : 'open', 'toggle');
-    const setPeekTarget = (target: PaneTarget | null) => setShellPeek(store, target === null ? null : paneName(target));
-    return {
-      setLeftMode: setMode('rail'),
-      setPanelMode: setMode('panel'),
-      setInspectorMode: setMode('inspector'),
-      setBottomMode: setMode('bottom'),
-      setSidebarMode: (mode: SidebarMode) => store.entries.get('sidebar')?.setValue(fromSidebarMode(mode), 'toggle'),
-      setPeekTarget,
-      peekPane: (target: PaneTarget) => setPeekTarget(target),
-      clearPeek: () => setPeekTarget(null),
-      setHasLeft: noop,
-      setHasSidebar: noop,
-      togglePane: (target: PaneTarget) => store.entries.get(paneName(target))?.toggle('toggle'),
-      expandPane: (target: PaneTarget) => store.entries.get(paneName(target))?.setValue('open', 'toggle'),
-      collapsePane: (target: PaneTarget) => store.entries.get(paneName(target))?.setValue('closed', 'toggle'),
-    };
-  }, [store]);
-  const value = (name: PaneName) => store.entries.get(name)?.value;
-  const rail = store.entries.get('rail');
-  return {
-    leftMode: toPaneMode(value('rail')),
-    leftControlledOpen: rail?.value === undefined ? undefined : rail.value !== 'closed',
-    panelMode: toPaneMode(value('panel')),
-    sidebarMode: toSidebarMode(value('sidebar')) ?? 'expanded',
-    inspectorMode: toPaneMode(value('inspector')),
-    bottomMode: toPaneMode(value('bottom')),
-    peekTarget: store.peek,
-    hasLeft: store.entries.has('rail'),
-    hasSidebar: store.entries.has('sidebar'),
-    currentBreakpoint: breakpoint,
-    currentBreakpointReady: ready,
-    leftResolvedPresentation: rail?.presentation,
-    ...actions,
-  };
-}

package/src/components/shell.css

@@ -885,34 +885,6 @@
   }
 }
 
-/* ── Peek ──────────────────────────────────────────────────────────────────── */
-
-/*
- * A Trigger with `peekOnHover` previews a closed pane while the pointer is on
- * it. The pane shows, floating above the content at its edge. After every
- * breakpoint block, so it wins over a closed state at any width.
- */
-.kui-ShellPane[data-peek][data-state],
-.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);
-  --kui-shell-shadow: var(--surface-chrome);
-  --kui-shell-edge: 1px;
-  --kui-shell-offset: var(--shell-rail-offset, 0px);
-  --kui-shell-handle: none;
-
-  display: flex;
-}
-
-.kui-ShellSidebar[data-peek][data-state] {
-  inline-size: var(--peek-sidebar-width, var(--sidebar-size, var(--sidebar-expanded-size, 288px)));
-}
-
 /* ── Scrim ─────────────────────────────────────────────────────────────────── */
 
 /* Root-owned and always mounted; shown while an overlay is live. Under the overlay panes, over everything else. */
@@ -1207,7 +1179,7 @@
   }
 
   /*
-   * The panes. A pane over the page (overlay, stacked, peek) attaches to the screen: its posture
+   * The panes. A pane over the page (overlay, stacked) attaches to the screen: its posture
    * writes `--kui-shell-pin: fixed`. A pane in flow sticks beneath the header, a screen tall, and
    * the bottom pane sticks to the screen's bottom. An overlay covers the header
    * (`--kui-shell-pin-top: 0px`); the rest start beneath it.

package/src/components/shell.tsx

@@ -39,17 +39,14 @@ import {
   ShellFrameContext,
   ShellStoreContext,
   createShellStore,
-  setShellPeek,
   subscribeShellStore,
   useFrameRegistration,
   usePaneEntry,
   useShellStore,
-  warnOnce,
   type FramePaneId,
 } from './_internal/shell-store.js';
-import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth, withoutRemovedPaneProps } from './_internal/shell-rest.js';
-import { useShell, useSidebarMode } from './shell.context.js';
-import { useResponsivePresentation } from './shell.hooks.js';
+import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth } from './_internal/shell-rest.js';
+import { useSidebarMode } from './shell.context.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
 import { useThemeSize } from '../hooks/theme-size.js';
 import { PageScope } from './_internal/page-scope.js';
@@ -57,7 +54,7 @@ import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellContentContext, S
 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';
+import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneOpenChangeReason, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';
 
 /* ── Root ──────────────────────────────────────────────────────────────────── */
 
@@ -536,46 +533,17 @@ const Header = React.forwardRef<HTMLElement, ShellHeaderProps>(({ className, hei
 });
 Header.displayName = 'Shell.Header';
 
-/* ── Left (deprecated) ─────────────────────────────────────────────────────── */
-
-interface LeftProps extends React.ComponentPropsWithoutRef<'div'> {
-  presentation?: ResponsivePresentation;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean, meta: { reason: 'init' | 'toggle' | 'panel' | 'responsive' | 'dismiss' }) => void;
-  collapsible?: boolean;
-  onExpand?: () => void;
-  onCollapse?: () => void;
-}
-
-/**
- * @deprecated The Root no longer wraps the Rail and Panel in a Left
- * container: each is its own pane. `Shell.Left` renders its children and
- * ignores its own props. Removed in 1.0.
- */
-const Left = React.forwardRef<HTMLDivElement, LeftProps>(({ children }, _ref) => {
-  React.useEffect(() => {
-    warnOnce('Shell.Left is deprecated and is removed in 1.0. Render Shell.Rail and Shell.Panel directly in Shell.Root.');
-  }, []);
-  return <>{children}</>;
-});
-Left.displayName = 'Shell.Left';
-
 /* ── Rail ──────────────────────────────────────────────────────────────────── */
 
-type RailOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'panel' | 'dismiss' };
+type RailOpenChangeMeta = { reason: PaneOpenChangeReason };
 
-type RailControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: RailOpenChangeMeta) => void; defaultOpen?: never };
+type RailControlledProps = { open: boolean; onOpenChange?: (open: boolean, meta: RailOpenChangeMeta) => void; defaultOpen?: never };
 type RailUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: RailOpenChangeMeta) => void; open?: never };
 
 type RailProps = React.ComponentPropsWithoutRef<'div'> & {
   presentation?: ResponsivePresentation;
   expandedSize?: number;
   collapsible?: boolean;
-  /** @deprecated Use `onOpenChange`. */
-  onExpand?: () => void;
-  /** @deprecated Use `onOpenChange`. */
-  onCollapse?: () => void;
   /**
    * Sets whether this pane joins the app frame. The default is `true`: the pane sits against its
    * neighbours with one hairline between them. Set `flush={false}` to pull it off the frame as a
@@ -588,7 +556,7 @@ type RailProps = React.ComponentPropsWithoutRef<'div'> & {
 const RAIL_PROP_NAMES = { controlled: 'open', default: 'defaultOpen' };
 
 const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
-  const { className, presentation, expandedSize = 64, collapsible: _collapsible, onExpand, onCollapse, children, style, open, defaultOpen, onOpenChange, flush = true, id, ...domProps } = props;
+  const { className, presentation, expandedSize = 64, collapsible: _collapsible, children, style, open, defaultOpen, onOpenChange, flush = true, id, ...domProps } = props;
   const { table, attributes } = usePresentationTable(presentation, 'fixed');
   const pane = usePane({
     name: 'rail',
@@ -600,8 +568,6 @@ const Rail = React.forwardRef<HTMLDivElement, RailProps>((props, ref) => {
     presentationTable: table,
     builtIn: navigationRest,
     onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),
-    onExpand,
-    onCollapse,
     size: expandedSize,
   });
   useFrameRegistration('rail', flush);
@@ -639,8 +605,8 @@ function RailContent({ children }: { children: React.ReactNode }) {
 
 type HandleComponent = React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<'div'> & React.RefAttributes<HTMLDivElement>>;
 
-type PanelOpenChangeMeta = { reason: 'toggle' | 'left' | 'init' | 'responsive' | 'dismiss' };
-type PanelControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: PanelOpenChangeMeta) => void; defaultOpen?: never };
+type PanelOpenChangeMeta = { reason: PaneOpenChangeReason };
+type PanelControlledProps = { open: boolean; onOpenChange?: (open: boolean, meta: PanelOpenChangeMeta) => void; defaultOpen?: never };
 type PanelUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: PanelOpenChangeMeta) => void; open?: never };
 
 type PanelSizeControlledProps = { size: number | string; defaultSize?: never };
@@ -687,16 +653,9 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
     maxSize = 800,
     resizable = false,
     collapsible = true,
-    onExpand,
-    onCollapse,
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     children,
     style,
     onSizeChange,
@@ -723,17 +682,10 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
     presentationTable,
     builtIn: detailRest,
     onChange: (value, reason) => onOpenChange?.(value !== 'closed', { reason }),
-    onExpand,
-    onCollapse,
     size: expandedSize,
   });
   useFrameRegistration('panel', flush);
 
-  React.useEffect(() => {
-    if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
-      warnOnce('Shell.Panel: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
-    }
-  }, [snapPoints, collapseThreshold, paneId, persistence]);
 
   const elementRef = React.useRef<HTMLElement | null>(null);
   const composedRef = useComposedRefs(ref, pane.setElement, elementRef);
@@ -759,11 +711,6 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
     onResize,
     onResizeStart,
     onResizeEnd,
-    snapPoints,
-    snapTolerance,
-    collapseThreshold,
-    paneId,
-    persistence,
     overlaying: pane.overlaying,
     // Asked when the effect runs: the Rail registers its table after this
     // Panel first renders, so the render's answer can be out of date.
@@ -771,7 +718,6 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
       const table = followsRail ? (store.entries.get('rail')?.presentationTable ?? FIXED_TABLE) : own.table;
       return table[readBreakpoint()] === 'overlay';
     },
-    requestCollapse: () => pane.setValue('closed', 'toggle'),
     requestToggle: () => pane.toggle('toggle'),
   });
 
@@ -782,7 +728,7 @@ const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>((props, ref) =>
 
   return (
     <div
-      {...withoutRemovedPaneProps(domProps)}
+      {...domProps}
       role={domProps.role ?? 'navigation'}
       id={pane.id}
       ref={composedRef}
@@ -851,14 +797,6 @@ interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
    * `Button` the trigger: `<Shell.Trigger asChild><Button iconOnly aria-label="Toggle sidebar">…</Button></Shell.Trigger>`.
    */
   asChild?: boolean;
-  /**
-   * Whether to show a preview of the target pane on hover while it is closed
-   * and not an overlay. Defaults to false.
-   *
-   * @deprecated Removed in 1.0. A preview reachable only by mouse hover has no
-   * keyboard or touch equivalent; open the pane instead.
-   */
-  peekOnHover?: boolean;
 }
 
 /**
@@ -868,40 +806,22 @@ interface TriggerProps extends React.ComponentPropsWithoutRef<'button'> {
  * consumer's `onClick` first: calling `preventDefault()` there cancels it. With `asChild` the
  * child is the button, and its own `type` stands.
  */
-const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, action = 'toggle', peekOnHover, asChild = false, onClick, onMouseEnter, onMouseLeave, children, ...props }, ref) => {
+const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, action = 'toggle', asChild = false, onClick, children, ...props }, ref) => {
   const store = useShellStore('Shell.Trigger');
-  React.useEffect(() => {
-    if (target === 'left') warnOnce('Shell.Trigger target="left" is deprecated and is removed in 1.0. Use target="rail".');
-    if (peekOnHover) warnOnce('Shell.Trigger: `peekOnHover` is deprecated and is removed in 1.0.');
-  }, [target, peekOnHover]);
-  const name: PaneName = target === 'left' ? 'rail' : target;
   // Subscribes to its own pane only.
-  const entry = usePaneEntry(store, name);
+  const entry = usePaneEntry(store, target);
   const shown = entry?.value === undefined ? undefined : entry.value !== 'closed';
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onClick?.(event);
     if (event.defaultPrevented) return;
-    const current = store.entries.get(name);
+    const current = store.entries.get(target);
     if (!current) return;
-    if (store.peek === name) setShellPeek(store, null);
     if (action === 'toggle') current.toggle('toggle');
     else if (action === 'expand') current.setValue('open', 'toggle');
     else current.setValue('closed', 'toggle');
   };
 
-  const handleMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onMouseEnter?.(event);
-    if (!peekOnHover) return;
-    const current = store.entries.get(name);
-    if (current && current.value === 'closed' && current.presentation !== 'overlay') setShellPeek(store, name);
-  };
-
-  const handleMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onMouseLeave?.(event);
-    if (peekOnHover && store.peek === name) setShellPeek(store, null);
-  };
-
   const Comp = asChild ? Slot.Root : 'button';
   return (
     <Comp
@@ -914,8 +834,6 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ target, act
       {...props}
       ref={ref}
       onClick={handleClick}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
       data-shell-trigger={target}
       data-shell-action={action}
     >
@@ -929,7 +847,6 @@ Trigger.displayName = 'Shell.Trigger';
 export {
   Root,
   Header,
-  Left,
   Rail,
   Panel,
   Sidebar,
@@ -940,9 +857,7 @@ export {
   PaneHeader,
   PaneFooter,
   Scroll,
-  useShell,
   useSidebarMode,
-  useResponsivePresentation,
   type PaneMode,
   type SidebarMode,
   type ResponsivePresentation,

package/src/components/shell.types.ts

@@ -13,19 +13,11 @@ export type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs
 
 export type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;
 
-export type PaneSizePersistence = {
-  load?: () => number | Promise<number | undefined> | undefined;
-  save?: (size: number) => void | Promise<void>;
-};
-
 /**
- * Why a pane's open state changed. Since 0.8.0 only a user action is reported:
- * `toggle` for a Trigger, a handle double-click or a drag past
- * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.
- * `init`, `responsive`, `panel` and `left` are kept in the types for
- * compatibility and are never sent.
+ * Why a pane's open state changed. Only a user action is reported: `toggle` for a Trigger or a
+ * handle double-click, and `dismiss` for Escape or a press on the scrim.
  */
-export type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';
+export type PaneOpenChangeReason = 'toggle' | 'dismiss';
 
 export interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;
@@ -34,23 +26,9 @@ export interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {
   maxSize?: number;
   resizable?: boolean;
   collapsible?: boolean;
-  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
-  onExpand?: () => void;
-  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
-  onCollapse?: () => void;
   onResize?: (size: number) => void;
   onResizeStart?: (size: number) => void;
   onResizeEnd?: (size: number) => void;
-  /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */
-  snapPoints?: number[];
-  /** @deprecated Removed in 1.0, with `snapPoints`. */
-  snapTolerance?: number;
-  /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */
-  collapseThreshold?: number;
-  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
-  paneId?: string;
-  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
-  persistence?: PaneSizePersistence;
 }
 
 export const _BREAKPOINTS = {
@@ -66,10 +44,10 @@ export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
 /** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */
 export const SHELL_BREAKPOINTS: readonly Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];
 
-export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
+/** The panes a Trigger can drive. */
+export type PaneTarget = 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
 
-/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */
-export type PaneName = Exclude<PaneTarget, 'left'>;
+export type PaneName = PaneTarget;
 
 /**
  * CSS custom property key type for type-safe style objects.

package/styles.css

@@ -6528,6 +6528,18 @@
   white-space: nowrap;
   border: 0;
 }
+.kui-Toolbar:where(.kui-BaseDialogContent > :first-child) {
+  -webkit-margin-before: calc(-1 * var(--layout-space-2));
+          margin-block-start: calc(-1 * var(--layout-space-2));
+  margin-inline: calc(-1 * var(--layout-space-2));
+  -webkit-margin-after: var(--layout-space-6);
+          margin-block-end: var(--layout-space-6);
+}
+.kui-ToolbarTitle:where(.kui-BaseDialogContent > .kui-Toolbar:first-child > *) {
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
+  min-inline-size: 0;
+}
 .kui-AlertDialogContent {
   max-width: var(--overlay-w);
 }
@@ -17735,26 +17747,6 @@
     inline-size: var(--sidebar-size, var(--sidebar-expanded-size, 288px));
   }
 }
-.kui-ShellPane[data-peek][data-state],
-.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);
-  --kui-shell-shadow: var(--surface-chrome);
-  --kui-shell-edge: 1px;
-  --kui-shell-offset: var(--shell-rail-offset, 0px);
-  --kui-shell-handle: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.kui-ShellSidebar[data-peek][data-state] {
-  inline-size: var(--peek-sidebar-width, var(--sidebar-size, var(--sidebar-expanded-size, 288px)));
-}
 .kui-ShellScrim {
   display: none;
   position: absolute;