@womp/kookie-ui 0.36.0 → 0.37.0

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

@@ -17747,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;

package/dist/cjs/components/shell.hooks.d.ts

@@ -1,10 +0,0 @@
-import type { PresentationValue, ResponsivePresentation } from './shell.types.js';
-/**
- * @deprecated Since 0.8.0 the Shell resolves a responsive `presentation` in
- * its stylesheet, so the pane is placed before any script runs. This hook
- * resolves it in JS after mount, which is the behaviour the Shell left
- * behind. It keeps working until 1.0.
- */
-declare function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue;
-export { useResponsivePresentation };
-//# sourceMappingURL=shell.hooks.d.ts.map

package/dist/cjs/components/shell.hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shell.hooks.d.ts","sourceRoot":"","sources":["../../../src/components/shell.hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAGlF;;;;;GAKG;AACH,iBAAS,yBAAyB,CAAC,YAAY,EAAE,sBAAsB,GAAG,iBAAiB,CAM1F;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/cjs/components/shell.hooks.js

@@ -1,3 +0,0 @@
-"use client";
-"use strict";var T=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var O=(e,t)=>{for(var n in t)p(e,n,{get:t[n],enumerable:!0})},y=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of B(t))!C.call(e,r)&&r!==n&&p(e,r,{get:()=>t[r],enumerable:!(i=E(t,r))||i.enumerable});return e};var d=(e,t,n)=>(n=e!=null?T(w(e)):{},y(t||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e)),L=e=>y(p({},"__esModule",{value:!0}),e);var K={};O(K,{useResponsivePresentation:()=>_});module.exports=L(K);var k=d(require("react"));var l=d(require("react"));var P={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},b=["initial","xs","sm","md","lg","xl"];var M=Object.entries(P),c=null,s=new Set,o=null;function f(){return c??(c=M.map(([e,t])=>[e,window.matchMedia(t)])),c}function m(){let e="initial";for(let[t,n]of f())n.matches&&(e=t);return e}function u(){let e=m();e!==o&&(o=e,s.forEach(t=>t()))}function R(e){if(typeof window>"u")return()=>{};if(s.size===0){o=m();for(let[,t]of f())typeof t.addEventListener=="function"?t.addEventListener("change",u):t.addListener?.(u)}return s.add(e),()=>{if(s.delete(e),!(s.size>0)){for(let[,t]of f())try{typeof t.removeEventListener=="function"?t.removeEventListener("change",u):t.removeListener?.(u)}catch{}o=null}}}function N(){return typeof window>"u"?"initial":(o??(o=m()),o)}function V(){return"initial"}var z=()=>!0,I=()=>!1,h=()=>()=>{},F=()=>"initial";function g(e=!0){let t=l.useSyncExternalStore(e?R:h,e?N:F,V),n=l.useSyncExternalStore(e?R:h,z,I);return l.useMemo(()=>({breakpoint:t,ready:n}),[t,n])}var a=d(require("react")),A=require("radix-ui/internal");function v(e){return typeof e=="object"&&e!==null}function S(e,t){let n={},i=null;for(let r of b){if(e!==void 0&&!v(e)){n[r]=e;continue}let x=v(e)?e[r]:void 0;x!==void 0&&(i={value:x}),n[r]=i?i.value:t(r)}return n}var H=S("fixed",()=>"fixed");var W=a.createContext(null);var J=a.createContext(null);function _(e){k.useEffect(()=>{},[]);let{breakpoint:t}=g(typeof e!="string");return S(e,()=>"fixed")[t]}
-//# sourceMappingURL=shell.hooks.js.map

package/dist/cjs/components/shell.hooks.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/shell.hooks.ts", "../../../src/hooks/use-breakpoint.ts", "../../../src/components/shell.types.ts", "../../../src/components/_internal/shell-store.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { useBreakpoint } from '../hooks/use-breakpoint.js';\nimport type { PresentationValue, ResponsivePresentation } from './shell.types.js';\nimport { tableOf, warnOnce } from './_internal/shell-store.js';\n\n/**\n * @deprecated Since 0.8.0 the Shell resolves a responsive `presentation` in\n * its stylesheet, so the pane is placed before any script runs. This hook\n * resolves it in JS after mount, which is the behaviour the Shell left\n * behind. It keeps working until 1.0.\n */\nfunction useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue {\n  React.useEffect(() => {\n    warnOnce('Shell.useResponsivePresentation is deprecated and is removed in 1.0. The Shell resolves presentation in CSS.');\n  }, []);\n  const { breakpoint } = useBreakpoint(typeof presentation !== 'string');\n  return tableOf<PresentationValue>(presentation, () => 'fixed')[breakpoint];\n}\n\nexport { useResponsivePresentation };\n", "'use client';\n\nimport * as React from 'react';\nimport { _BREAKPOINTS, type Breakpoint } from '../components/shell.types.js';\n\nconst QUERIES = Object.entries(_BREAKPOINTS) as Array<[Breakpoint, string]>;\n\ntype Listener = () => void;\n\n/**\n * One set of `MediaQueryList`s and one set of listeners for the whole\n * application. Every component that asks for the breakpoint used to create and\n * subscribe to its own copy of all five queries.\n */\nlet mediaQueryLists: Array<[Breakpoint, MediaQueryList]> | null = null;\nconst listeners = new Set<Listener>();\nlet cachedBreakpoint: Breakpoint | null = null;\n\nfunction getMediaQueryLists() {\n  mediaQueryLists ??= QUERIES.map(([name, query]) => [name, window.matchMedia(query)] as [Breakpoint, MediaQueryList]);\n  return mediaQueryLists;\n}\n\nfunction computeBreakpoint(): Breakpoint {\n  // The largest matching query wins; `_BREAKPOINTS` is ordered smallest first.\n  let matched: Breakpoint = 'initial';\n  for (const [name, mql] of getMediaQueryLists()) {\n    if (mql.matches) matched = name;\n  }\n  return matched;\n}\n\nfunction handleChange() {\n  const next = computeBreakpoint();\n  if (next === cachedBreakpoint) return;\n  cachedBreakpoint = next;\n  listeners.forEach((listener) => listener());\n}\n\nfunction subscribe(listener: Listener) {\n  if (typeof window === 'undefined') return () => {};\n\n  if (listeners.size === 0) {\n    cachedBreakpoint = computeBreakpoint();\n    for (const [, mql] of getMediaQueryLists()) {\n      // Safari below 14 only has the deprecated listener API.\n      if (typeof mql.addEventListener === 'function') mql.addEventListener('change', handleChange);\n      else mql.addListener?.(handleChange);\n    }\n  }\n\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size > 0) return;\n\n    for (const [, mql] of getMediaQueryLists()) {\n      try {\n        if (typeof mql.removeEventListener === 'function') mql.removeEventListener('change', handleChange);\n        else mql.removeListener?.(handleChange);\n      } catch (error) {\n        // Removal can throw in edge cases, e.g. the list was already torn down.\n        if (process.env.NODE_ENV !== 'production') {\n          console.warn('[useBreakpoint] MediaQueryList cleanup warning:', error);\n        }\n      }\n    }\n    cachedBreakpoint = null;\n  };\n}\n\n/**\n * `getSnapshot` must return a referentially stable value between changes, so it\n * reads the cache that `handleChange` maintains rather than recomputing.\n */\nfunction getSnapshot(): Breakpoint {\n  if (typeof window === 'undefined') return 'initial';\n  cachedBreakpoint ??= computeBreakpoint();\n  return cachedBreakpoint;\n}\n\nfunction getServerSnapshot(): Breakpoint {\n  return 'initial';\n}\n\n/**\n * The breakpoint right now, outside React's render. For an effect that needs\n * the answer at the moment it runs rather than the one its render saw.\n */\nexport function readBreakpoint(): Breakpoint {\n  if (typeof window === 'undefined') return 'initial';\n  return computeBreakpoint();\n}\n\nconst getReadySnapshot = () => true;\nconst getReadyServerSnapshot = () => false;\n\nconst noopSubscribe = () => () => {};\nconst getInitialSnapshot = (): Breakpoint => 'initial';\n\n/**\n * The current breakpoint, and whether it has been resolved against a real\n * viewport yet (`false` on the server and during hydration).\n *\n * Reads through `useSyncExternalStore` rather than settling into state from an\n * effect. On a client render the very first pass already has the real\n * breakpoint, instead of rendering the whole shell at `initial` and correcting\n * it after the browser has painted.\n *\n * Pass `enabled = false` to skip the subscription (the breakpoint then reads as\n * `initial`).\n */\nexport function useBreakpoint(enabled = true): { breakpoint: Breakpoint; ready: boolean } {\n  // Callers with a non-responsive value pass `enabled = false` so they neither\n  // subscribe to the media queries nor re-render when the viewport crosses one.\n  const breakpoint = React.useSyncExternalStore(\n    enabled ? subscribe : noopSubscribe,\n    enabled ? getSnapshot : getInitialSnapshot,\n    getServerSnapshot,\n  );\n  const ready = React.useSyncExternalStore(\n    enabled ? subscribe : noopSubscribe,\n    getReadySnapshot,\n    getReadyServerSnapshot,\n  );\n\n  return React.useMemo(() => ({ breakpoint, ready }), [breakpoint, ready]);\n}\n", "import type * as React from 'react';\n\nexport type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\n/**\n * Why a pane's open state changed. Since 0.8.0 only a user action is reported:\n * `toggle` for a Trigger, a handle double-click or a drag past\n * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.\n * `init`, `responsive`, `panel` and `left` are kept in the types for\n * compatibility and are never sent.\n */\nexport type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';\n\nexport interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {\n  presentation?: ResponsivePresentation;\n  expandedSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  resizable?: boolean;\n  collapsible?: boolean;\n  /** @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. */\n  onExpand?: () => void;\n  /** @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. */\n  onCollapse?: () => void;\n  onResize?: (size: number) => void;\n  onResizeStart?: (size: number) => void;\n  onResizeEnd?: (size: number) => void;\n  /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */\n  snapPoints?: number[];\n  /** @deprecated Removed in 1.0, with `snapPoints`. */\n  snapTolerance?: number;\n  /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */\n  collapseThreshold?: number;\n  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */\n  paneId?: string;\n  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */\n  persistence?: PaneSizePersistence;\n}\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\n/** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */\nexport const SHELL_BREAKPOINTS: readonly Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n\n/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */\nexport type PaneName = Exclude<PaneTarget, 'left'>;\n\n/**\n * CSS custom property key type for type-safe style objects.\n * Allows any string prefixed with '--'.\n */\nexport type CSSCustomProperty = `--${string}`;\n\n/**\n * Style object that supports CSS custom properties.\n */\nexport type CSSPropertiesWithVars = React.CSSProperties & {\n  [key: CSSCustomProperty]: string | number | undefined;\n};\n", "'use client';\n\n/**\n * The Shell's state model (0.8.0), ported from kookie-ui-v2's Shell.\n *\n * - State lives on the pane. Each pane holds `auto | open | closed`.\n *   `auto` means untouched: the stylesheet decides what\n *   it shows at each breakpoint, so first paint is right with no script, the\n *   server and the client render the same markup, and no open-state callback\n *   can fire on mount or on a resize.\n * - The one thing that crosses the Shell is a registry keyed by pane name.\n *   Each pane registers what it is and how to drive it; a Trigger looks its\n *   pane up, and the Root reads the set of live overlays. Nothing scans\n *   children and nothing checks `displayName`.\n * - The responsive props are resolved into a table with one value per\n *   breakpoint, from the props alone, with no window. The table is written to\n *   the DOM as data attributes for the stylesheet, and read again in JS by the\n *   mirror that sets `aria-expanded`. One table, two readers, so they agree by\n *   construction.\n */\nimport * as React from 'react';\nimport { useLayoutEffect } from 'radix-ui/internal';\nimport { SHELL_BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js';\n\n/* \u2500\u2500 Breakpoint tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nexport type Table<T> = Record<Breakpoint, T>;\n\n/** What a pane shows: open or closed. */\nexport type PaneValue = 'open' | 'closed';\n\ntype ResponsiveInput<T> = T | Partial<Record<Breakpoint, T>> | undefined;\n\nfunction isMap<T>(value: ResponsiveInput<T>): value is Partial<Record<Breakpoint, T>> {\n  return typeof value === 'object' && value !== null;\n}\n\n/**\n * A responsive value at every breakpoint. A breakpoint takes the largest key\n * at or below it, the same fallback `useResponsiveValue` used; a breakpoint\n * below every key takes `fallback`.\n */\nexport function tableOf<T>(value: ResponsiveInput<T>, fallback: (bp: Breakpoint) => T): Table<T> {\n  const table = {} as Table<T>;\n  let carried: { value: T } | null = null;\n  for (const bp of SHELL_BREAKPOINTS) {\n    if (value !== undefined && !isMap(value)) {\n      table[bp] = value;\n      continue;\n    }\n    const entry = isMap(value) ? value[bp] : undefined;\n    if (entry !== undefined) carried = { value: entry };\n    table[bp] = carried ? carried.value : fallback(bp);\n  }\n  return table;\n}\n\n/** The table's one value, when it has only one. */\nexport function constantOf<T>(table: Table<T>): T | undefined {\n  const first = table.initial;\n  return SHELL_BREAKPOINTS.every((bp) => table[bp] === first) ? first : undefined;\n}\n\n/**\n * The table as data attributes: `data-<name>` when it holds one value, one\n * `data-<name>-<bp>` per breakpoint when it holds several. The stylesheet has\n * a rule for each spelling.\n */\nexport function tableAttributes(name: string, table: Table<string>): Record<string, string> {\n  const constant = constantOf(table);\n  if (constant !== undefined) return { [`data-${name}`]: constant };\n  const attributes: Record<string, string> = {};\n  for (const bp of SHELL_BREAKPOINTS) attributes[`data-${name}-${bp}`] = table[bp];\n  return attributes;\n}\n\n/**\n * A responsive prop object is usually an inline literal, a new identity every\n * render. Keying memoisation on its contents keeps the tables, and so the\n * registry entries, stable across renders that change nothing.\n */\nexport function useStableKey(value: unknown): string {\n  return typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value);\n}\n\nexport const FIXED_TABLE: Table<PresentationValue> = tableOf<PresentationValue>('fixed', () => 'fixed');\n\n/* \u2500\u2500 The registry \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nexport type OpenChangeReason = 'toggle' | 'dismiss';\n\nexport type PaneEntry = {\n  name: PaneName;\n  id: string;\n  el: HTMLElement | null;\n  /** What the pane shows now; `undefined` while an untouched pane cannot know (before the breakpoint is known). */\n  value: PaneValue | undefined;\n  /** How the pane is presented now, when known. */\n  presentation: PresentationValue | undefined;\n  /** The pane's own presentation at every breakpoint. A Panel with none of its own follows the Rail's. */\n  presentationTable: Table<PresentationValue>;\n  /** Open and presented as an overlay: what the scrim and Escape close, and what containment exempts. */\n  overlayLive: boolean;\n  /** The pane's designed open width, for panes that sit beside it when floating. */\n  size: number;\n  setValue: (value: PaneValue, reason: OpenChangeReason) => void;\n  toggle: (reason: OpenChangeReason) => void;\n};\n\nexport type ShellStore = {\n  entries: Map<PaneName, PaneEntry>;\n  listeners: Set<() => void>;\n  /**\n   * What a subscriber reads. useSyncExternalStore needs a value that is stable\n   * between notifications, and a number is; the Map, or anything derived from\n   * it, would be a new identity on every read.\n   */\n  version: number;\n  /** The pane a hovered Trigger is previewing, if any. Layout only. */\n  peek: PaneName | null;\n};\n\nexport function createShellStore(): ShellStore {\n  return { entries: new Map(), listeners: new Set(), version: 0, peek: null };\n}\n\nexport function notifyShellStore(store: ShellStore) {\n  store.version += 1;\n  for (const listener of store.listeners) listener();\n}\n\nexport function subscribeShellStore(store: ShellStore, listener: () => void) {\n  store.listeners.add(listener);\n  return () => {\n    store.listeners.delete(listener);\n  };\n}\n\nexport function setShellPeek(store: ShellStore, peek: PaneName | null) {\n  if (store.peek === peek) return;\n  store.peek = peek;\n  notifyShellStore(store);\n}\n\nexport const ShellStoreContext = React.createContext<ShellStore | null>(null);\n\nexport function useShellStore(part: string): ShellStore {\n  const store = React.useContext(ShellStoreContext);\n  if (!store) throw new Error(`${part} must be used within <Shell.Root>`);\n  return store;\n}\n\n/** One pane's registry entry. Re-renders only when that entry is replaced. */\nexport function usePaneEntry(store: ShellStore, name: PaneName): PaneEntry | undefined {\n  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);\n  const getSnapshot = React.useCallback(() => store.entries.get(name), [store, name]);\n  return React.useSyncExternalStore(subscribe, getSnapshot, () => undefined);\n}\n\n/**\n * Whether this pane is the one being previewed. A boolean per pane rather than\n * the peek target itself, so hovering one Trigger re-renders one pane, not all.\n */\nexport function usePeeking(store: ShellStore, name: PaneName): boolean {\n  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);\n  return React.useSyncExternalStore(\n    subscribe,\n    () => store.peek === name,\n    () => false,\n  );\n}\n\n/* \u2500\u2500 Off the frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nexport type FramePaneId = 'rail' | 'panel' | 'sidebar' | 'content' | 'inspector' | 'bottom';\n\nexport const ShellFrameContext = React.createContext<{\n  registerOffFrame: (id: FramePaneId) => void;\n  unregisterOffFrame: (id: FramePaneId) => void;\n} | null>(null);\n\n/** Tells the Root a pane is off the frame (`flush={false}`); the Rail's card moves a floating Panel over. */\nexport function useFrameRegistration(id: FramePaneId, flush: boolean) {\n  const ctx = React.useContext(ShellFrameContext);\n  if (!ctx) throw new Error('Shell panes must be used within <Shell.Root>');\n  const { registerOffFrame, unregisterOffFrame } = ctx;\n  useLayoutEffect(() => {\n    if (flush) return;\n    registerOffFrame(id);\n    return () => unregisterOffFrame(id);\n  }, [id, flush, registerOffFrame, unregisterOffFrame]);\n}\n\n/* \u2500\u2500 Development warnings \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nconst warned = new Set<string>();\n\n/** A deprecation warning, once per message per page load. Development only. */\nexport function warnOnce(message: string) {\n  if (process.env.NODE_ENV === 'production') return;\n  if (warned.has(message)) return;\n  warned.add(message);\n  console.warn(`[kookie-ui] ${message}`);\n}\n"],
-  "mappings": ";0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBCEvB,IAAAC,EAAuB,oBCqDhB,IAAMC,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,EAKaC,EAA2C,CAAC,UAAW,KAAM,KAAM,KAAM,KAAM,IAAI,ED7DhG,IAAMC,EAAU,OAAO,QAAQC,CAAY,EASvCC,EAA8D,KAC5DC,EAAY,IAAI,IAClBC,EAAsC,KAE1C,SAASC,GAAqB,CAC5B,OAAAH,MAAoBF,EAAQ,IAAI,CAAC,CAACM,EAAMC,CAAK,IAAM,CAACD,EAAM,OAAO,WAAWC,CAAK,CAAC,CAAiC,GAC5GL,CACT,CAEA,SAASM,GAAgC,CAEvC,IAAIC,EAAsB,UAC1B,OAAW,CAACH,EAAMI,CAAG,IAAKL,EAAmB,EACvCK,EAAI,UAASD,EAAUH,GAE7B,OAAOG,CACT,CAEA,SAASE,GAAe,CACtB,IAAMC,EAAOJ,EAAkB,EAC3BI,IAASR,IACbA,EAAmBQ,EACnBT,EAAU,QAASU,GAAaA,EAAS,CAAC,EAC5C,CAEA,SAASC,EAAUD,EAAoB,CACrC,GAAI,OAAO,OAAW,IAAa,MAAO,IAAM,CAAC,EAEjD,GAAIV,EAAU,OAAS,EAAG,CACxBC,EAAmBI,EAAkB,EACrC,OAAW,CAAC,CAAEE,CAAG,IAAKL,EAAmB,EAEnC,OAAOK,EAAI,kBAAqB,WAAYA,EAAI,iBAAiB,SAAUC,CAAY,EACtFD,EAAI,cAAcC,CAAY,CAEvC,CAEA,OAAAR,EAAU,IAAIU,CAAQ,EAEf,IAAM,CAEX,GADAV,EAAU,OAAOU,CAAQ,EACrB,EAAAV,EAAU,KAAO,GAErB,QAAW,CAAC,CAAEO,CAAG,IAAKL,EAAmB,EACvC,GAAI,CACE,OAAOK,EAAI,qBAAwB,WAAYA,EAAI,oBAAoB,SAAUC,CAAY,EAC5FD,EAAI,iBAAiBC,CAAY,CACxC,MAAgB,CAKhB,CAEFP,EAAmB,KACrB,CACF,CAMA,SAASW,GAA0B,CACjC,OAAI,OAAO,OAAW,IAAoB,WAC1CX,MAAqBI,EAAkB,GAChCJ,EACT,CAEA,SAASY,GAAgC,CACvC,MAAO,SACT,CAWA,IAAMC,EAAmB,IAAM,GACzBC,EAAyB,IAAM,GAE/BC,EAAgB,IAAM,IAAM,CAAC,EAC7BC,EAAqB,IAAkB,UActC,SAASC,EAAcC,EAAU,GAAkD,CAGxF,IAAMC,EAAmB,uBACvBD,EAAUE,EAAYL,EACtBG,EAAUG,EAAcL,EACxBM,CACF,EACMC,EAAc,uBAClBL,EAAUE,EAAYL,EACtBF,EACAC,CACF,EAEA,OAAa,UAAQ,KAAO,CAAE,WAAAK,EAAY,MAAAI,CAAM,GAAI,CAACJ,EAAYI,CAAK,CAAC,CACzE,CE5GA,IAAAC,EAAuB,oBACvBC,EAAgC,6BAahC,SAASC,EAASC,EAAoE,CACpF,OAAO,OAAOA,GAAU,UAAYA,IAAU,IAChD,CAOO,SAASC,EAAWD,EAA2BE,EAA2C,CAC/F,IAAMC,EAAQ,CAAC,EACXC,EAA+B,KACnC,QAAWC,KAAMC,EAAmB,CAClC,GAAIN,IAAU,QAAa,CAACD,EAAMC,CAAK,EAAG,CACxCG,EAAME,CAAE,EAAIL,EACZ,QACF,CACA,IAAMO,EAAQR,EAAMC,CAAK,EAAIA,EAAMK,CAAE,EAAI,OACrCE,IAAU,SAAWH,EAAU,CAAE,MAAOG,CAAM,GAClDJ,EAAME,CAAE,EAAID,EAAUA,EAAQ,MAAQF,EAASG,CAAE,CACnD,CACA,OAAOF,CACT,CA8BO,IAAMK,EAAwCC,EAA2B,QAAS,IAAM,OAAO,EA2D/F,IAAMC,EAA0B,gBAAiC,IAAI,EAgCrE,IAAMC,EAA0B,gBAG7B,IAAI,EHzKd,SAASC,EAA0BC,EAAyD,CACpF,YAAU,IAAM,CAEtB,EAAG,CAAC,CAAC,EACL,GAAM,CAAE,WAAAC,CAAW,EAAIC,EAAc,OAAOF,GAAiB,QAAQ,EACrE,OAAOG,EAA2BH,EAAc,IAAM,OAAO,EAAEC,CAAU,CAC3E",
-  "names": ["shell_hooks_exports", "__export", "useResponsivePresentation", "__toCommonJS", "React", "React", "_BREAKPOINTS", "SHELL_BREAKPOINTS", "QUERIES", "_BREAKPOINTS", "mediaQueryLists", "listeners", "cachedBreakpoint", "getMediaQueryLists", "name", "query", "computeBreakpoint", "matched", "mql", "handleChange", "next", "listener", "subscribe", "getSnapshot", "getServerSnapshot", "getReadySnapshot", "getReadyServerSnapshot", "noopSubscribe", "getInitialSnapshot", "useBreakpoint", "enabled", "breakpoint", "subscribe", "getSnapshot", "getServerSnapshot", "ready", "React", "import_internal", "isMap", "value", "tableOf", "fallback", "table", "carried", "bp", "SHELL_BREAKPOINTS", "entry", "FIXED_TABLE", "tableOf", "ShellStoreContext", "ShellFrameContext", "useResponsivePresentation", "presentation", "breakpoint", "useBreakpoint", "tableOf"]
-}

package/dist/esm/chunk-2VSRZ4IT.js

@@ -1,3 +0,0 @@
-"use client";
-import*as e from"react";import{Checkbox as s,Direction as S}from"radix-ui";import{Context as V,Primitive as q,useControllableState as N}from"radix-ui/internal";var{useDirection:D}=S,l="CheckboxGroup",[U,T]=V.createContextScope(l,[s.createCheckboxScope]),x=s.createCheckboxScope(),[W,A]=U(l),m=e.forwardRef((t,n)=>{let{__scopeCheckboxGroup:r,name:i,defaultValue:c,value:o,required:u=!1,disabled:a=!1,orientation:b,dir:C,loop:k,onValueChange:G,...I}=t,R=D(C),[y=[],p]=N({prop:o,defaultProp:c??[],onChange:G}),g=e.useCallback(d=>p((h=[])=>[...h,d]),[p]),E=e.useCallback(d=>p((h=[])=>h.filter(_=>_!==d)),[p]);return e.createElement(W,{scope:r,name:i,required:u,disabled:a,value:y,onItemCheck:g,onItemUncheck:E},e.createElement(q.div,{role:"group","data-disabled":a?"":void 0,dir:R,...I,ref:n}))});m.displayName=l;var P="CheckboxGroupItem",f=e.forwardRef((t,n)=>{let{__scopeCheckboxGroup:r,disabled:i,...c}=t,o=A(P,r),u=o.disabled||i,a=x(r),b=o.value?.includes(c.value),C=o.required&&(o.value?.length??0)===0;return e.createElement(s.Root,{name:o.name,disabled:u,required:C,checked:b,...a,...c,ref:n,onCheckedChange:k=>{k?o.onItemCheck(t.value):o.onItemUncheck(t.value)}})});f.displayName=P;var M="CheckboxGroupIndicator",v=e.forwardRef((t,n)=>{let{__scopeCheckboxGroup:r,...i}=t,c=x(r);return e.createElement(s.Indicator,{...c,...i,ref:n})});v.displayName=M;var z=m,B=f,H=v;export{T as a,m as b,f as c,v as d,z as e,B as f,H as g};
-//# sourceMappingURL=chunk-2VSRZ4IT.js.map

package/dist/esm/chunk-2VSRZ4IT.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/checkbox-group.primitive.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive, Direction } from 'radix-ui';\nimport { Context, Primitive, useControllableState } from 'radix-ui/internal';\n\nconst { useDirection } = Direction;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxGroup\n * -----------------------------------------------------------------------------------------------*/\nconst CHECKBOX_GROUP_NAME = 'CheckboxGroup';\n\ntype ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };\nconst [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(\n  CHECKBOX_GROUP_NAME,\n  [CheckboxPrimitive.createCheckboxScope],\n);\nconst useCheckboxScope = CheckboxPrimitive.createCheckboxScope();\n\ntype CheckboxGroupContextValue = {\n  name?: string;\n  required: boolean;\n  disabled: boolean;\n  value?: string[];\n  onItemCheck(value: string): void;\n  onItemUncheck(value: string): void;\n};\n\nconst [CheckboxGroupProvider, useCheckboxGroupContext] =\n  createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);\n\ntype CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface CheckboxGroupProps extends PrimitiveDivProps {\n  name?: CheckboxGroupContextValue['name'];\n  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];\n  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];\n  dir?: 'ltr' | 'rtl';\n  /**\n   * @deprecated Has no effect. Each checkbox is its own tab stop, as with native checkboxes,\n   * so there is no arrow-key navigation to orient.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * @deprecated Has no effect. Each checkbox is its own tab stop, as with native checkboxes,\n   * so there is no arrow-key navigation to loop.\n   */\n  loop?: boolean;\n  defaultValue?: string[];\n  value?: CheckboxGroupContextValue['value'];\n  onValueChange?: (value: string[]) => void;\n}\n\nconst CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(\n  (props: ScopedProps<CheckboxGroupProps>, forwardedRef) => {\n    const {\n      __scopeCheckboxGroup,\n      name,\n      defaultValue,\n      value: valueProp,\n      required = false,\n      disabled = false,\n      orientation: _orientation,\n      dir,\n      loop: _loop,\n      onValueChange,\n      ...groupProps\n    } = props;\n    const direction = useDirection(dir);\n    const [value = [], setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue ?? [],\n      onChange: onValueChange,\n    });\n\n    const handleItemCheck = React.useCallback(\n      (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n      [setValue],\n    );\n\n    const handleItemUncheck = React.useCallback(\n      (itemValue: string) =>\n        setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n      [setValue],\n    );\n\n    return (\n      <CheckboxGroupProvider\n        scope={__scopeCheckboxGroup}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={value}\n        onItemCheck={handleItemCheck}\n        onItemUncheck={handleItemUncheck}\n      >\n        <Primitive.div\n          role=\"group\"\n          data-disabled={disabled ? '' : undefined}\n          dir={direction}\n          {...groupProps}\n          ref={forwardedRef}\n        />\n      </CheckboxGroupProvider>\n    );\n  },\n);\n\nCheckboxGroup.displayName = CHECKBOX_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'CheckboxGroupItem';\n\ntype CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitive.Root>;\ntype CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;\ninterface CheckboxGroupItemProps\n  extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'name'> {\n  value: string;\n}\n\nconst CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(\n  (props: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {\n    const { __scopeCheckboxGroup, disabled, ...itemProps } = props;\n    const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);\n    const isDisabled = context.disabled || disabled;\n    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);\n    const checked = context.value?.includes(itemProps.value);\n    // A required group needs at least one box checked, not every box: the items are\n    // required only while none is checked.\n    const isRequired = context.required && (context.value?.length ?? 0) === 0;\n\n    return (\n      <CheckboxPrimitive.Root\n        name={context.name}\n        disabled={isDisabled}\n        required={isRequired}\n        checked={checked}\n        {...checkboxScope}\n        {...itemProps}\n        ref={forwardedRef}\n        onCheckedChange={(checked) => {\n          if (checked) {\n            context.onItemCheck(props.value);\n          } else {\n            context.onItemUncheck(props.value);\n          }\n        }}\n      />\n    );\n  },\n);\n\nCheckboxGroupItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxGroupIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxGroupIndicator';\n\ntype CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.Indicator>;\ntype CheckboxIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;\ninterface CheckboxGroupIndicatorProps extends CheckboxIndicatorProps {}\n\nconst CheckboxGroupIndicator = React.forwardRef<\n  CheckboxGroupIndicatorElement,\n  CheckboxGroupIndicatorProps\n>((props: ScopedProps<CheckboxGroupIndicatorProps>, forwardedRef) => {\n  const { __scopeCheckboxGroup, ...indicatorProps } = props;\n  const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);\n  return <CheckboxPrimitive.Indicator {...checkboxScope} {...indicatorProps} ref={forwardedRef} />;\n});\n\nCheckboxGroupIndicator.displayName = INDICATOR_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = CheckboxGroup;\nconst Item = CheckboxGroupItem;\nconst Indicator = CheckboxGroupIndicator;\n\nexport {\n  createCheckboxGroupScope,\n  //\n  CheckboxGroup,\n  CheckboxGroupItem,\n  CheckboxGroupIndicator,\n  //\n  Root,\n  Item,\n  Indicator,\n};\nexport type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupIndicatorProps };\n"],
-  "mappings": ";AAEA,UAAYA,MAAW,QACvB,OAAS,YAAYC,EAAmB,aAAAC,MAAiB,WACzD,OAAS,WAAAC,EAAS,aAAAC,EAAW,wBAAAC,MAA4B,oBAEzD,GAAM,CAAE,aAAAC,CAAa,EAAIJ,EAKnBK,EAAsB,gBAGtB,CAACC,EAA4BC,CAAwB,EAAIN,EAAQ,mBACrEI,EACA,CAACN,EAAkB,mBAAmB,CACxC,EACMS,EAAmBT,EAAkB,oBAAoB,EAWzD,CAACU,EAAuBC,CAAuB,EACnDJ,EAAsDD,CAAmB,EAwBrEM,EAAsB,aAC1B,CAACC,EAAwCC,IAAiB,CACxD,GAAM,CACJ,qBAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAOC,EACP,SAAAC,EAAW,GACX,SAAAC,EAAW,GACX,YAAaC,EACb,IAAAC,EACA,KAAMC,EACN,cAAAC,EACA,GAAGC,CACL,EAAIZ,EACEa,EAAYrB,EAAaiB,CAAG,EAC5B,CAACK,EAAQ,CAAC,EAAGC,CAAQ,EAAIxB,EAAqB,CAClD,KAAMc,EACN,YAAaD,GAAgB,CAAC,EAC9B,SAAUO,CACZ,CAAC,EAEKK,EAAwB,cAC3BC,GAAsBF,EAAS,CAACG,EAAY,CAAC,IAAM,CAAC,GAAGA,EAAWD,CAAS,CAAC,EAC7E,CAACF,CAAQ,CACX,EAEMI,EAA0B,cAC7BF,GACCF,EAAS,CAACG,EAAY,CAAC,IAAMA,EAAU,OAAQJ,GAAUA,IAAUG,CAAS,CAAC,EAC/E,CAACF,CAAQ,CACX,EAEA,OACE,gBAAClB,EAAA,CACC,MAAOK,EACP,KAAMC,EACN,SAAUG,EACV,SAAUC,EACV,MAAOO,EACP,YAAaE,EACb,cAAeG,GAEf,gBAAC7B,EAAU,IAAV,CACC,KAAK,QACL,gBAAeiB,EAAW,GAAK,OAC/B,IAAKM,EACJ,GAAGD,EACJ,IAAKX,EACP,CACF,CAEJ,CACF,EAEAF,EAAc,YAAcN,EAM5B,IAAM2B,EAAY,oBASZC,EAA0B,aAC9B,CAACrB,EAA4CC,IAAiB,CAC5D,GAAM,CAAE,qBAAAC,EAAsB,SAAAK,EAAU,GAAGe,CAAU,EAAItB,EACnDuB,EAAUzB,EAAwBsB,EAAWlB,CAAoB,EACjEsB,EAAaD,EAAQ,UAAYhB,EACjCkB,EAAgB7B,EAAiBM,CAAoB,EACrDwB,EAAUH,EAAQ,OAAO,SAASD,EAAU,KAAK,EAGjDK,EAAaJ,EAAQ,WAAaA,EAAQ,OAAO,QAAU,KAAO,EAExE,OACE,gBAACpC,EAAkB,KAAlB,CACC,KAAMoC,EAAQ,KACd,SAAUC,EACV,SAAUG,EACV,QAASD,EACR,GAAGD,EACH,GAAGH,EACJ,IAAKrB,EACL,gBAAkByB,GAAY,CACxBA,EACFH,EAAQ,YAAYvB,EAAM,KAAK,EAE/BuB,EAAQ,cAAcvB,EAAM,KAAK,CAErC,EACF,CAEJ,CACF,EAEAqB,EAAkB,YAAcD,EAMhC,IAAMQ,EAAiB,yBAMjBC,EAA+B,aAGnC,CAAC7B,EAAiDC,IAAiB,CACnE,GAAM,CAAE,qBAAAC,EAAsB,GAAG4B,CAAe,EAAI9B,EAC9CyB,EAAgB7B,EAAiBM,CAAoB,EAC3D,OAAO,gBAACf,EAAkB,UAAlB,CAA6B,GAAGsC,EAAgB,GAAGK,EAAgB,IAAK7B,EAAc,CAChG,CAAC,EAED4B,EAAuB,YAAcD,EAIrC,IAAMG,EAAOhC,EACPiC,EAAOX,EACPY,EAAYJ",
-  "names": ["React", "CheckboxPrimitive", "Direction", "Context", "Primitive", "useControllableState", "useDirection", "CHECKBOX_GROUP_NAME", "createCheckboxGroupContext", "createCheckboxGroupScope", "useCheckboxScope", "CheckboxGroupProvider", "useCheckboxGroupContext", "CheckboxGroup", "props", "forwardedRef", "__scopeCheckboxGroup", "name", "defaultValue", "valueProp", "required", "disabled", "_orientation", "dir", "_loop", "onValueChange", "groupProps", "direction", "value", "setValue", "handleItemCheck", "itemValue", "prevValue", "handleItemUncheck", "ITEM_NAME", "CheckboxGroupItem", "itemProps", "context", "isDisabled", "checkboxScope", "checked", "isRequired", "INDICATOR_NAME", "CheckboxGroupIndicator", "indicatorProps", "Root", "Item", "Indicator"]
-}