@womp/kookie-ui 0.32.0 → 0.33.0

package/dist/cjs/components/_internal/shell-pane.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/shell-pane.tsx", "../../../../src/hooks/use-breakpoint.ts", "../../../../src/components/shell.types.ts", "../../../../src/components/_internal/shell-store.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { useLayoutEffect } from 'radix-ui/internal';\nimport { readBreakpoint, useBreakpoint } from '../../hooks/use-breakpoint.js';\nimport type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js';\nimport {\n  constantOf,\n  notifyShellStore,\n  tableAttributes,\n  tableOf,\n  usePeeking,\n  useShellStore,\n  useStableKey,\n  warnOnce,\n  type OpenChangeReason,\n  type PaneEntry,\n  type PaneValue,\n  type Table,\n} from './shell-store.js';\n\ntype ResponsiveValue = PaneValue | Partial<Record<Breakpoint, PaneValue>>;\n\nexport type UsePaneOptions = {\n  name: PaneName;\n  /** The component's display name, for warnings: `Inspector`, `Sidebar`, \u2026 */\n  label: string;\n  /** The prop names a warning should use: `open`/`defaultOpen`, or `state`/`defaultState`. */\n  propNames: { controlled: string; default: string };\n  id: string | undefined;\n  /** The controlled value. A responsive object is deprecated: it is resolved against the current breakpoint. */\n  controlled: ResponsiveValue | undefined;\n  /**\n   * The uncontrolled default. A single value fixes where the pane starts. A\n   * responsive object leaves the pane untouched (`auto`), with that object as\n   * what it shows at each breakpoint.\n   */\n  defaultValue: ResponsiveValue | undefined;\n  /** The pane's presentation at every breakpoint. Pass a memoised table. */\n  presentationTable: Table<PresentationValue>;\n  /** What an untouched pane shows where no default says otherwise. Pass a module-level function. */\n  builtIn: (presentation: PresentationValue) => PaneValue;\n  /** Reports a change a user made. Never called on mount or on a resize. */\n  onChange: ((value: PaneValue, reason: OpenChangeReason) => void) | undefined;\n  /** The value a toggle moves to. Defaults to open and closed in turn. */\n  toggleNext?: (current: PaneValue, defaultHere: PaneValue | undefined) => PaneValue;\n  onExpand: (() => void) | undefined;\n  onCollapse: (() => void) | undefined;\n  /** The pane's designed open width, published for the panes beside it. */\n  size: number;\n};\n\nexport type PaneController = ReturnType<typeof usePane>;\n\nconst isMap = (value: ResponsiveValue | undefined): value is Partial<Record<Breakpoint, PaneValue>> => typeof value === 'object' && value !== null;\n\n/** The first value a responsive object states, smallest breakpoint first. */\nfunction firstStated(map: Partial<Record<Breakpoint, PaneValue>>): PaneValue {\n  for (const bp of ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const) {\n    const value = map[bp];\n    if (value !== undefined) return value;\n  }\n  return 'closed';\n}\n\n/** Everything the togglable panes share: their state, their registry entry and their callbacks. */\nexport function usePane(options: UsePaneOptions) {\n  const { name, label, propNames, presentationTable, builtIn } = options;\n  const store = useShellStore(`Shell.${label}`);\n  const generatedId = React.useId();\n  const id = options.id ?? `shell-${name}${generatedId}`;\n\n  const controlled = options.controlled !== undefined;\n  const controlledIsMap = isMap(options.controlled);\n  if (controlledIsMap) {\n    warnOnce(\n      `Shell.${label}: a responsive \\`${propNames.controlled}\\` is deprecated and is removed in 1.0. ` +\n        `Pass a boolean and decide it from your own state, or use \\`${propNames.default}\\` with a responsive object.`,\n    );\n  }\n\n  // A responsive controlled value is resolved the way a responsive default\n  // is: it becomes the table an untouched pane follows, so the stylesheet\n  // answers it at each breakpoint (right in the server HTML, with no\n  // callback on a crossing) and the app's prop is still the only writer.\n  const controlledMap = controlledIsMap ? (options.controlled as Partial<Record<Breakpoint, PaneValue>>) : undefined;\n  const autoSource = controlledMap ?? (isMap(options.defaultValue) ? options.defaultValue : undefined);\n  const autoKey = useStableKey(autoSource);\n  const [inner, setInner] = React.useState<'auto' | PaneValue>(() => (typeof options.defaultValue === 'string' ? options.defaultValue : 'auto'));\n\n  // What an untouched pane shows at each breakpoint: a responsive default\n  // where it states one, the pane's own default where it does not.\n  const autoTable = React.useMemo(\n    () => (controlledMap ? tableOf<PaneValue>(controlledMap, () => firstStated(controlledMap)) : tableOf<PaneValue>(autoSource, (bp) => builtIn(presentationTable[bp]))),\n    // `autoKey` stands for the responsive object, which is usually a new literal each render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [autoKey, controlledIsMap, presentationTable, builtIn],\n  );\n\n  let state: 'auto' | PaneValue = inner;\n  if (controlled) state = controlledMap ? 'auto' : (options.controlled as PaneValue);\n\n  // Only a pane whose answer depends on the window subscribes to it, so a\n  // pane with one presentation and one default never re-renders on a resize.\n  const needsBreakpoint = constantOf(presentationTable) === undefined || (state === 'auto' && constantOf(autoTable) === undefined);\n  const { breakpoint, ready } = useBreakpoint(needsBreakpoint);\n\n  /** A table's value now: known without the window when it holds one value, else once the breakpoint is known. */\n  const now = <T,>(table: Table<T>): T | undefined => {\n    const constant = constantOf(table);\n    if (constant !== undefined) return constant;\n    return ready ? table[breakpoint] : undefined;\n  };\n\n  const value: PaneValue | undefined = state === 'auto' ? now(autoTable) : state;\n  const presentation = now(presentationTable);\n  const overlaying = presentation === 'overlay';\n  const shown = value === undefined ? undefined : value !== 'closed';\n  const overlayLive = shown === true && overlaying;\n\n  // Stable actions over the latest values, so the registry entry changes only\n  // when a fact it carries changes.\n  const defaultValue = options.defaultValue;\n  const latest = React.useRef({ state, value, autoTable, defaultValue, controlled, onChange: options.onChange, toggleNext: options.toggleNext });\n  useLayoutEffect(() => {\n    latest.current = { state, value, autoTable, defaultValue, controlled, onChange: options.onChange, toggleNext: options.toggleNext };\n  });\n\n  /**\n   * What the pane shows, and its default, at the window's breakpoint right\n   * now. Asked at the moment of an action rather than taken from the last\n   * render: a touched pane no longer follows the window, and a click can land\n   * before the mirror has resolved after hydration.\n   */\n  const valueNow = React.useCallback((): PaneValue | undefined => {\n    const current = latest.current;\n    if (current.value !== undefined) return current.value;\n    return current.state === 'auto' ? current.autoTable[readBreakpoint()] : undefined;\n  }, []);\n  const defaultHereNow = React.useCallback((): PaneValue | undefined => {\n    const current = latest.current;\n    if (typeof current.defaultValue === 'string') return current.defaultValue;\n    return isMap(current.defaultValue) ? current.autoTable[readBreakpoint()] : undefined;\n  }, []);\n\n  const setValue = React.useCallback(\n    (next: PaneValue, reason: OpenChangeReason) => {\n      const current = latest.current;\n      if (valueNow() === next) return;\n      current.onChange?.(next, reason);\n      if (!current.controlled) setInner(next);\n    },\n    [valueNow],\n  );\n\n  const toggle = React.useCallback(\n    (reason: OpenChangeReason) => {\n      const current = latest.current;\n      const from = valueNow() ?? 'closed';\n      const next = current.toggleNext ? current.toggleNext(from, defaultHereNow()) : from === 'closed' ? 'open' : 'closed';\n      setValue(next, reason);\n    },\n    [setValue, valueNow, defaultHereNow],\n  );\n\n  // The pane's element, for the Root's containment and focus.\n  const elementRef = React.useRef<HTMLElement | null>(null);\n  const setElement = React.useCallback((node: HTMLElement | null) => {\n    elementRef.current = node;\n  }, []);\n\n  // Registration. A layout effect so a Trigger's aria attributes and the\n  // Root's containment are right before the browser paints.\n  useLayoutEffect(() => {\n    const entry: PaneEntry = {\n      name,\n      id,\n      el: elementRef.current,\n      value,\n      presentation,\n      presentationTable,\n      overlayLive,\n      size: options.size,\n      setValue,\n      toggle,\n    };\n    store.entries.set(name, entry);\n    notifyShellStore(store);\n    return () => {\n      if (store.entries.get(name) === entry) {\n        store.entries.delete(name);\n        notifyShellStore(store);\n      }\n    };\n  }, [store, name, id, value, presentation, presentationTable, overlayLive, options.size, setValue, toggle]);\n\n  // onExpand/onCollapse fire when the pane's state changes and that changes\n  // whether it is shown: a user's toggle, or a controlled prop. Never on\n  // mount, and never because the window crossed a breakpoint.\n  const callbacks = React.useRef({ onExpand: options.onExpand, onCollapse: options.onCollapse });\n  useLayoutEffect(() => {\n    callbacks.current = { onExpand: options.onExpand, onCollapse: options.onCollapse };\n  });\n  const previous = React.useRef({ state, shown });\n  React.useEffect(() => {\n    const before = previous.current;\n    if (before.state !== state && before.shown !== undefined && shown !== undefined && before.shown !== shown) {\n      if (shown) callbacks.current.onExpand?.();\n      else callbacks.current.onCollapse?.();\n    }\n    previous.current = { state, shown };\n  }, [state, shown]);\n\n  // Development guards. Once per mount, not once per render.\n  useLayoutEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    if (options.controlled !== undefined && options.defaultValue !== undefined) {\n      console.error(`Shell.${label}: Do not pass both \\`${propNames.controlled}\\` and \\`${propNames.default}\\`. Choose one.`);\n    }\n    // Mount only: this is the once-per-mount guard.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const wasControlled = React.useRef(controlled);\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    if (wasControlled.current !== controlled) {\n      console.warn(`Shell.${label}: Switching between controlled and uncontrolled \\`${propNames.controlled}\\` is not supported.`);\n      wasControlled.current = controlled;\n    }\n  }, [controlled, label, propNames.controlled]);\n\n  const peeking = usePeeking(store, name) && shown === false && !overlaying;\n\n  return {\n    store,\n    id,\n    state,\n    value,\n    shown,\n    presentation,\n    overlaying,\n    overlayLive,\n    peeking,\n    ready,\n    breakpoint,\n    autoTable,\n    setValue,\n    toggle,\n    defaultHereNow,\n    setElement,\n  };\n}\n\n/** The data attributes every togglable pane renders. */\nexport function paneAttributes(pane: PaneController, presentationAttributes: Record<string, string>) {\n  const { state, value, presentation, shown } = pane;\n  return {\n    ...presentationAttributes,\n    'data-state': state,\n    ...(state === 'auto' ? tableAttributes('auto', pane.autoTable) : {}),\n    'data-presentation': presentation,\n    'data-mode': value === undefined ? undefined : value === 'closed' ? 'collapsed' : 'expanded',\n    // Kept for stylesheets written against 0.7: set while a stacked pane is open.\n    'data-open': presentation === 'stacked' && shown ? '' : undefined,\n    'data-peek': pane.peeking ? '' : undefined,\n  } as const;\n}\n\n/** A pane's own presentation, as a table and as the attributes the stylesheet reads. */\nexport function usePresentationTable(presentation: Parameters<typeof tableOf<PresentationValue>>[0], fallback: PresentationValue) {\n  const key = useStableKey(presentation);\n  const table = React.useMemo(\n    () => tableOf<PresentationValue>(presentation, () => fallback),\n    // `key` stands for `presentation`, which is usually a new literal each render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [key, fallback],\n  );\n  // One value is the plain `data-presentation` the pane renders anyway; several\n  // are written per breakpoint, so the stylesheet can place the pane before\n  // any script runs.\n  const attributes = React.useMemo(() => (constantOf(table) === undefined ? tableAttributes('presentation', table) : ({} as Record<string, string>)), [table]);\n  return { table, attributes };\n}\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 Inset \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nexport type InsetPaneId = 'rail' | 'panel' | 'sidebar' | 'content' | 'inspector' | 'bottom';\n\nexport const ShellInsetContext = React.createContext<{\n  registerInset: (id: InsetPaneId) => void;\n  unregisterInset: (id: InsetPaneId) => void;\n} | null>(null);\n\n/** Registers a pane's `inset` with the Root, which paints the backdrop while any pane is inset. */\nexport function useInsetRegistration(id: InsetPaneId, inset: boolean | undefined) {\n  const ctx = React.useContext(ShellInsetContext);\n  if (!ctx) throw new Error('Shell panes must be used within <Shell.Root>');\n  const { registerInset, unregisterInset } = ctx;\n  useLayoutEffect(() => {\n    if (!inset) return;\n    registerInset(id);\n    return () => unregisterInset(id);\n  }, [id, inset, registerInset, unregisterInset]);\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"],
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { useLayoutEffect } from 'radix-ui/internal';\nimport { readBreakpoint, useBreakpoint } from '../../hooks/use-breakpoint.js';\nimport type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js';\nimport {\n  constantOf,\n  notifyShellStore,\n  tableAttributes,\n  tableOf,\n  usePeeking,\n  useShellStore,\n  useStableKey,\n  warnOnce,\n  type OpenChangeReason,\n  type PaneEntry,\n  type PaneValue,\n  type Table,\n} from './shell-store.js';\n\ntype ResponsiveValue = PaneValue | Partial<Record<Breakpoint, PaneValue>>;\n\nexport type UsePaneOptions = {\n  name: PaneName;\n  /** The component's display name, for warnings: `Inspector`, `Sidebar`, \u2026 */\n  label: string;\n  /** The prop names a warning should use: `open`/`defaultOpen`, or `state`/`defaultState`. */\n  propNames: { controlled: string; default: string };\n  id: string | undefined;\n  /** The controlled value. A responsive object is deprecated: it is resolved against the current breakpoint. */\n  controlled: ResponsiveValue | undefined;\n  /**\n   * The uncontrolled default. A single value fixes where the pane starts. A\n   * responsive object leaves the pane untouched (`auto`), with that object as\n   * what it shows at each breakpoint.\n   */\n  defaultValue: ResponsiveValue | undefined;\n  /** The pane's presentation at every breakpoint. Pass a memoised table. */\n  presentationTable: Table<PresentationValue>;\n  /** What an untouched pane shows where no default says otherwise. Pass a module-level function. */\n  builtIn: (presentation: PresentationValue) => PaneValue;\n  /** Reports a change a user made. Never called on mount or on a resize. */\n  onChange: ((value: PaneValue, reason: OpenChangeReason) => void) | undefined;\n  /** The value a toggle moves to. Defaults to open and closed in turn. */\n  toggleNext?: (current: PaneValue, defaultHere: PaneValue | undefined) => PaneValue;\n  onExpand: (() => void) | undefined;\n  onCollapse: (() => void) | undefined;\n  /** The pane's designed open width, published for the panes beside it. */\n  size: number;\n};\n\nexport type PaneController = ReturnType<typeof usePane>;\n\nconst isMap = (value: ResponsiveValue | undefined): value is Partial<Record<Breakpoint, PaneValue>> => typeof value === 'object' && value !== null;\n\n/** The first value a responsive object states, smallest breakpoint first. */\nfunction firstStated(map: Partial<Record<Breakpoint, PaneValue>>): PaneValue {\n  for (const bp of ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const) {\n    const value = map[bp];\n    if (value !== undefined) return value;\n  }\n  return 'closed';\n}\n\n/** Everything the togglable panes share: their state, their registry entry and their callbacks. */\nexport function usePane(options: UsePaneOptions) {\n  const { name, label, propNames, presentationTable, builtIn } = options;\n  const store = useShellStore(`Shell.${label}`);\n  const generatedId = React.useId();\n  const id = options.id ?? `shell-${name}${generatedId}`;\n\n  const controlled = options.controlled !== undefined;\n  const controlledIsMap = isMap(options.controlled);\n  if (controlledIsMap) {\n    warnOnce(\n      `Shell.${label}: a responsive \\`${propNames.controlled}\\` is deprecated and is removed in 1.0. ` +\n        `Pass a boolean and decide it from your own state, or use \\`${propNames.default}\\` with a responsive object.`,\n    );\n  }\n\n  // A responsive controlled value is resolved the way a responsive default\n  // is: it becomes the table an untouched pane follows, so the stylesheet\n  // answers it at each breakpoint (right in the server HTML, with no\n  // callback on a crossing) and the app's prop is still the only writer.\n  const controlledMap = controlledIsMap ? (options.controlled as Partial<Record<Breakpoint, PaneValue>>) : undefined;\n  const autoSource = controlledMap ?? (isMap(options.defaultValue) ? options.defaultValue : undefined);\n  const autoKey = useStableKey(autoSource);\n  const [inner, setInner] = React.useState<'auto' | PaneValue>(() => (typeof options.defaultValue === 'string' ? options.defaultValue : 'auto'));\n\n  // What an untouched pane shows at each breakpoint: a responsive default\n  // where it states one, the pane's own default where it does not.\n  const autoTable = React.useMemo(\n    () => (controlledMap ? tableOf<PaneValue>(controlledMap, () => firstStated(controlledMap)) : tableOf<PaneValue>(autoSource, (bp) => builtIn(presentationTable[bp]))),\n    // `autoKey` stands for the responsive object, which is usually a new literal each render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [autoKey, controlledIsMap, presentationTable, builtIn],\n  );\n\n  let state: 'auto' | PaneValue = inner;\n  if (controlled) state = controlledMap ? 'auto' : (options.controlled as PaneValue);\n\n  // Only a pane whose answer depends on the window subscribes to it, so a\n  // pane with one presentation and one default never re-renders on a resize.\n  const needsBreakpoint = constantOf(presentationTable) === undefined || (state === 'auto' && constantOf(autoTable) === undefined);\n  const { breakpoint, ready } = useBreakpoint(needsBreakpoint);\n\n  /** A table's value now: known without the window when it holds one value, else once the breakpoint is known. */\n  const now = <T,>(table: Table<T>): T | undefined => {\n    const constant = constantOf(table);\n    if (constant !== undefined) return constant;\n    return ready ? table[breakpoint] : undefined;\n  };\n\n  const value: PaneValue | undefined = state === 'auto' ? now(autoTable) : state;\n  const presentation = now(presentationTable);\n  const overlaying = presentation === 'overlay';\n  const shown = value === undefined ? undefined : value !== 'closed';\n  const overlayLive = shown === true && overlaying;\n\n  // Stable actions over the latest values, so the registry entry changes only\n  // when a fact it carries changes.\n  const defaultValue = options.defaultValue;\n  const latest = React.useRef({ state, value, autoTable, defaultValue, controlled, onChange: options.onChange, toggleNext: options.toggleNext });\n  useLayoutEffect(() => {\n    latest.current = { state, value, autoTable, defaultValue, controlled, onChange: options.onChange, toggleNext: options.toggleNext };\n  });\n\n  /**\n   * What the pane shows, and its default, at the window's breakpoint right\n   * now. Asked at the moment of an action rather than taken from the last\n   * render: a touched pane no longer follows the window, and a click can land\n   * before the mirror has resolved after hydration.\n   */\n  const valueNow = React.useCallback((): PaneValue | undefined => {\n    const current = latest.current;\n    if (current.value !== undefined) return current.value;\n    return current.state === 'auto' ? current.autoTable[readBreakpoint()] : undefined;\n  }, []);\n  const defaultHereNow = React.useCallback((): PaneValue | undefined => {\n    const current = latest.current;\n    if (typeof current.defaultValue === 'string') return current.defaultValue;\n    return isMap(current.defaultValue) ? current.autoTable[readBreakpoint()] : undefined;\n  }, []);\n\n  const setValue = React.useCallback(\n    (next: PaneValue, reason: OpenChangeReason) => {\n      const current = latest.current;\n      if (valueNow() === next) return;\n      current.onChange?.(next, reason);\n      if (!current.controlled) setInner(next);\n    },\n    [valueNow],\n  );\n\n  const toggle = React.useCallback(\n    (reason: OpenChangeReason) => {\n      const current = latest.current;\n      const from = valueNow() ?? 'closed';\n      const next = current.toggleNext ? current.toggleNext(from, defaultHereNow()) : from === 'closed' ? 'open' : 'closed';\n      setValue(next, reason);\n    },\n    [setValue, valueNow, defaultHereNow],\n  );\n\n  // The pane's element, for the Root's containment and focus.\n  const elementRef = React.useRef<HTMLElement | null>(null);\n  const setElement = React.useCallback((node: HTMLElement | null) => {\n    elementRef.current = node;\n  }, []);\n\n  // Registration. A layout effect so a Trigger's aria attributes and the\n  // Root's containment are right before the browser paints.\n  useLayoutEffect(() => {\n    const entry: PaneEntry = {\n      name,\n      id,\n      el: elementRef.current,\n      value,\n      presentation,\n      presentationTable,\n      overlayLive,\n      size: options.size,\n      setValue,\n      toggle,\n    };\n    store.entries.set(name, entry);\n    notifyShellStore(store);\n    return () => {\n      if (store.entries.get(name) === entry) {\n        store.entries.delete(name);\n        notifyShellStore(store);\n      }\n    };\n  }, [store, name, id, value, presentation, presentationTable, overlayLive, options.size, setValue, toggle]);\n\n  // onExpand/onCollapse fire when the pane's state changes and that changes\n  // whether it is shown: a user's toggle, or a controlled prop. Never on\n  // mount, and never because the window crossed a breakpoint.\n  const callbacks = React.useRef({ onExpand: options.onExpand, onCollapse: options.onCollapse });\n  useLayoutEffect(() => {\n    callbacks.current = { onExpand: options.onExpand, onCollapse: options.onCollapse };\n  });\n  const previous = React.useRef({ state, shown });\n  React.useEffect(() => {\n    const before = previous.current;\n    if (before.state !== state && before.shown !== undefined && shown !== undefined && before.shown !== shown) {\n      if (shown) callbacks.current.onExpand?.();\n      else callbacks.current.onCollapse?.();\n    }\n    previous.current = { state, shown };\n  }, [state, shown]);\n\n  // Development guards. Once per mount, not once per render.\n  useLayoutEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    if (options.controlled !== undefined && options.defaultValue !== undefined) {\n      console.error(`Shell.${label}: Do not pass both \\`${propNames.controlled}\\` and \\`${propNames.default}\\`. Choose one.`);\n    }\n    // Mount only: this is the once-per-mount guard.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const wasControlled = React.useRef(controlled);\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    if (wasControlled.current !== controlled) {\n      console.warn(`Shell.${label}: Switching between controlled and uncontrolled \\`${propNames.controlled}\\` is not supported.`);\n      wasControlled.current = controlled;\n    }\n  }, [controlled, label, propNames.controlled]);\n\n  const peeking = usePeeking(store, name) && shown === false && !overlaying;\n\n  return {\n    store,\n    id,\n    state,\n    value,\n    shown,\n    presentation,\n    overlaying,\n    overlayLive,\n    peeking,\n    ready,\n    breakpoint,\n    autoTable,\n    setValue,\n    toggle,\n    defaultHereNow,\n    setElement,\n  };\n}\n\n/** The data attributes every togglable pane renders. */\nexport function paneAttributes(pane: PaneController, presentationAttributes: Record<string, string>) {\n  const { state, value, presentation, shown } = pane;\n  return {\n    ...presentationAttributes,\n    'data-state': state,\n    ...(state === 'auto' ? tableAttributes('auto', pane.autoTable) : {}),\n    'data-presentation': presentation,\n    'data-mode': value === undefined ? undefined : value === 'closed' ? 'collapsed' : 'expanded',\n    // Kept for stylesheets written against 0.7: set while a stacked pane is open.\n    'data-open': presentation === 'stacked' && shown ? '' : undefined,\n    'data-peek': pane.peeking ? '' : undefined,\n  } as const;\n}\n\n/** A pane's own presentation, as a table and as the attributes the stylesheet reads. */\nexport function usePresentationTable(presentation: Parameters<typeof tableOf<PresentationValue>>[0], fallback: PresentationValue) {\n  const key = useStableKey(presentation);\n  const table = React.useMemo(\n    () => tableOf<PresentationValue>(presentation, () => fallback),\n    // `key` stands for `presentation`, which is usually a new literal each render.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [key, fallback],\n  );\n  // One value is the plain `data-presentation` the pane renders anyway; several\n  // are written per breakpoint, so the stylesheet can place the pane before\n  // any script runs.\n  const attributes = React.useMemo(() => (constantOf(table) === undefined ? tableAttributes('presentation', table) : ({} as Record<string, string>)), [table]);\n  return { table, attributes };\n}\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": "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",
-  "names": ["shell_pane_exports", "__export", "paneAttributes", "usePane", "usePresentationTable", "__toCommonJS", "React", "import_internal", "React", "_BREAKPOINTS", "SHELL_BREAKPOINTS", "QUERIES", "_BREAKPOINTS", "mediaQueryLists", "listeners", "cachedBreakpoint", "getMediaQueryLists", "name", "query", "computeBreakpoint", "matched", "mql", "handleChange", "next", "listener", "subscribe", "getSnapshot", "getServerSnapshot", "readBreakpoint", "getReadySnapshot", "getReadyServerSnapshot", "noopSubscribe", "getInitialSnapshot", "useBreakpoint", "enabled", "breakpoint", "ready", "React", "import_internal", "isMap", "value", "tableOf", "fallback", "table", "carried", "bp", "SHELL_BREAKPOINTS", "entry", "constantOf", "first", "tableAttributes", "name", "constant", "attributes", "useStableKey", "FIXED_TABLE", "notifyShellStore", "store", "listener", "subscribeShellStore", "ShellStoreContext", "useShellStore", "part", "store", "usePeeking", "store", "name", "subscribe", "listener", "subscribeShellStore", "ShellInsetContext", "isMap", "value", "firstStated", "map", "bp", "usePane", "options", "name", "label", "propNames", "presentationTable", "builtIn", "store", "useShellStore", "generatedId", "id", "controlled", "controlledIsMap", "controlledMap", "autoSource", "autoKey", "useStableKey", "inner", "setInner", "autoTable", "tableOf", "state", "needsBreakpoint", "constantOf", "breakpoint", "ready", "useBreakpoint", "now", "table", "constant", "presentation", "overlaying", "shown", "overlayLive", "defaultValue", "latest", "valueNow", "current", "readBreakpoint", "defaultHereNow", "setValue", "next", "reason", "toggle", "from", "elementRef", "setElement", "node", "entry", "notifyShellStore", "callbacks", "previous", "before", "wasControlled", "peeking", "usePeeking", "paneAttributes", "pane", "presentationAttributes", "tableAttributes", "usePresentationTable", "fallback", "key", "attributes"]
+  "names": ["shell_pane_exports", "__export", "paneAttributes", "usePane", "usePresentationTable", "__toCommonJS", "React", "import_internal", "React", "_BREAKPOINTS", "SHELL_BREAKPOINTS", "QUERIES", "_BREAKPOINTS", "mediaQueryLists", "listeners", "cachedBreakpoint", "getMediaQueryLists", "name", "query", "computeBreakpoint", "matched", "mql", "handleChange", "next", "listener", "subscribe", "getSnapshot", "getServerSnapshot", "readBreakpoint", "getReadySnapshot", "getReadyServerSnapshot", "noopSubscribe", "getInitialSnapshot", "useBreakpoint", "enabled", "breakpoint", "ready", "React", "import_internal", "isMap", "value", "tableOf", "fallback", "table", "carried", "bp", "SHELL_BREAKPOINTS", "entry", "constantOf", "first", "tableAttributes", "name", "constant", "attributes", "useStableKey", "FIXED_TABLE", "notifyShellStore", "store", "listener", "subscribeShellStore", "ShellStoreContext", "useShellStore", "part", "store", "usePeeking", "store", "name", "subscribe", "listener", "subscribeShellStore", "ShellFrameContext", "isMap", "value", "firstStated", "map", "bp", "usePane", "options", "name", "label", "propNames", "presentationTable", "builtIn", "store", "useShellStore", "generatedId", "id", "controlled", "controlledIsMap", "controlledMap", "autoSource", "autoKey", "useStableKey", "inner", "setInner", "autoTable", "tableOf", "state", "needsBreakpoint", "constantOf", "breakpoint", "ready", "useBreakpoint", "now", "table", "constant", "presentation", "overlaying", "shown", "overlayLive", "defaultValue", "latest", "valueNow", "current", "readBreakpoint", "defaultHereNow", "setValue", "next", "reason", "toggle", "from", "elementRef", "setElement", "node", "entry", "notifyShellStore", "callbacks", "previous", "before", "wasControlled", "peeking", "usePeeking", "paneAttributes", "pane", "presentationAttributes", "tableAttributes", "usePresentationTable", "fallback", "key", "attributes"]
 }

package/dist/cjs/components/_internal/shell-sidebar.d.ts

@@ -21,8 +21,13 @@ type SidebarPublicProps = PaneBaseProps & {
     onSizeChange?: (size: number, meta: SizeChangeMeta) => void;
     sizeUpdate?: 'throttle' | 'debounce';
     sizeUpdateMs?: number;
-    /** When true, adds margin and triggers the gray backdrop on the Shell. */
-    inset?: boolean;
+    /**
+     * 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
+     * card. It then floats over the content if the content is flush, and otherwise sits on the
+     * Shell's background beside a card content.
+     */
+    flush?: boolean;
 } & (SidebarControlledProps | SidebarUncontrolledProps);
 type SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & {
     Handle: typeof SidebarHandle;

package/dist/cjs/components/_internal/shell-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAsD,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAM/G,OAAO,KAAK,EAAE,UAAU,EAAyB,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEnH,KAAK,sBAAsB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAA;CAAE,CAAC;AACvF,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnK,KAAK,wBAAwB,GAAG;IAAE,YAAY,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrM,KAAK,kBAAkB,GAAG,aAAa,GAAG;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5D,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,CAAC;AAExD,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CAAC,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAqBrJ,eAAO,MAAM,OAAO,EAmId,gBAAgB,CAAC;AAKvB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAsD,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAM/G,OAAO,KAAK,EAAE,UAAU,EAAyB,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEnH,KAAK,sBAAsB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,SAAS,CAAA;CAAE,CAAC;AACvF,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnK,KAAK,wBAAwB,GAAG;IAAE,YAAY,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrM,KAAK,kBAAkB,GAAG,aAAa,GAAG;IACxC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5D,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,CAAC;AAExD,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CAAC,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAqBrJ,eAAO,MAAM,OAAO,EAmId,gBAAgB,CAAC;AAKvB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/cjs/components/_internal/shell-sidebar.js

@@ -1,3 +1,3 @@
 "use client";
-"use strict";"use client";var nn=Object.create;var ye=Object.defineProperty;var rn=Object.getOwnPropertyDescriptor;var on=Object.getOwnPropertyNames;var sn=Object.getPrototypeOf,an=Object.prototype.hasOwnProperty;var ln=(e,t)=>{for(var n in t)ye(e,n,{get:t[n],enumerable:!0})},ot=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of on(t))!an.call(e,o)&&o!==n&&ye(e,o,{get:()=>t[o],enumerable:!(r=rn(t,o))||r.enumerable});return e};var D=(e,t,n)=>(n=e!=null?nn(sn(e)):{},ot(t||!e||!e.__esModule?ye(n,"default",{value:e,enumerable:!0}):n,e)),un=e=>ot(ye({},"__esModule",{value:!0}),e);var Qn={};ln(Qn,{Sidebar:()=>Xe});module.exports=un(Qn);var q=D(require("react")),Zt=D(require("classnames")),en=require("radix-ui/internal");var Se=D(require("react")),Be=Se.createContext(null);function it(){let e=Se.useContext(Be);if(!e)throw new Error("Shell.Handle must be used within a resizable pane");return e}var z=D(require("react")),st=require("radix-ui/internal"),at=D(require("classnames"));var oe=z.forwardRef(({className:e,children:t,...n},r)=>{let{containerRef:o,controls:s,cssVarName:i,minSize:c,maxSize:l,defaultSize:a,orientation:u,edge:b,growth:f,onResize:k,onResizeStart:I,onResizeEnd:B,snapPoints:N,snapTolerance:x,collapseThreshold:V,collapsible:j,target:W,requestCollapse:te,requestToggle:H}=it(),$=z.useRef(null),_=z.useCallback(d=>{$.current=d,typeof r=="function"?r(d):r&&(r.current=d)},[r]),w=z.useRef(null);z.useEffect(()=>()=>{w.current?.(),w.current=null},[]);let p=z.useCallback(()=>{let d=o.current;if(!d)return a;let y=Number.parseFloat(getComputedStyle(d).getPropertyValue(i));return Number.isFinite(y)?y:a},[o,i,a]),P=z.useCallback(()=>{let d=o.current,y=$.current,h=d?.closest(".kui-ShellRoot")?.getBoundingClientRect();if(!d||!h||!y)return l;let R=d.getBoundingClientRect(),O=y.getBoundingClientRect(),A=f(getComputedStyle(d).direction==="rtl"),v;u==="vertical"?v=A>0?h.right-R.left:R.right-h.left:v=A>0?h.bottom-R.top:R.bottom-h.top;let J=u==="vertical"?O.width:O.height;return!(h.width>0&&h.height>0)||!Number.isFinite(v)?l:Math.max(c,Math.min(l,Math.round(v-J)))},[o,f,l,c,u]),T=()=>{$.current?.setAttribute("aria-valuemax",String(P()))};(0,st.useLayoutEffect)(()=>{$.current?.setAttribute("aria-valuenow",String(Math.round(p())))},[p]);let C=(d,y)=>{d.style.setProperty(i,`${y}px`),$.current?.setAttribute("aria-valuenow",String(Math.round(y)))},U=W.charAt(0).toUpperCase()+W.slice(1);return z.createElement("div",{ref:_,className:(0,at.default)("kui-ShellResizer",e),"data-orientation":u,"data-edge":b,role:"separator",tabIndex:0,"aria-label":`Resize ${U} pane`,"aria-controls":s,"aria-orientation":u,"aria-valuemin":c,"aria-valuemax":l,...n,onPointerDown:d=>{n.onPointerDown?.(d);let y=o.current;if(!y||d.defaultPrevented||d.button!==0)return;d.preventDefault();let h=d.currentTarget,R=d.pointerId;w.current?.();try{h.setPointerCapture(R)}catch{}let O=getComputedStyle(y),A=Number.parseFloat(O.getPropertyValue(i)),v=Number.isFinite(A)?A:a,J=u==="vertical"?d.clientX:d.clientY,m=f(O.direction==="rtl"),K=P();h.setAttribute("aria-valuemax",String(K));let G=L=>Math.min(Math.max(L,c),K);y.setAttribute("data-resizing",""),h.setAttribute("data-dragging","");let Q=document.body,Ve=Q.style.cursor,Le=Q.style.userSelect;Q.style.cursor=u==="vertical"?"col-resize":"row-resize",Q.style.userSelect="none",I?.(v);let re=v,Me=v,Y=0,ce=null,Je=()=>{if(Y=0,ce===null)return;let L=ce;ce=null,k?.(L)},Ze=null,et=!1,tn=(L,ae)=>{if(L.type===ae)et=!0;else if(et)return!1;return!0},Z=L=>{if(!tn(L,"pointermove")||L===Ze)return;Ze=L;let ae=u==="vertical"?L.clientX:L.clientY;Me=v+(ae-J)*m,re=G(Me),C(y,re),ce=re,Y||(Y=requestAnimationFrame(Je))},be=()=>{Y&&cancelAnimationFrame(Y),Y=0;try{h.releasePointerCapture(R)}catch{}window.removeEventListener("pointermove",Z),document.removeEventListener("pointermove",Z),window.removeEventListener("mousemove",Z),document.removeEventListener("mousemove",Z),h.removeEventListener("pointermove",Z),window.removeEventListener("pointerup",F),document.removeEventListener("pointerup",F),window.removeEventListener("mouseup",F),document.removeEventListener("mouseup",F),window.removeEventListener("pointercancel",F),document.removeEventListener("pointercancel",F),window.removeEventListener("keydown",tt),h.removeEventListener("lostpointercapture",F),y.removeAttribute("data-resizing"),h.removeAttribute("data-dragging"),Q.style.cursor=Ve,Q.style.userSelect=Le,w.current=null},Ae=!1,F=()=>{if(Ae)return;if(Ae=!0,Y&&cancelAnimationFrame(Y),Je(),j&&typeof V=="number"&&Me<=V){C(y,v),k?.(v),be(),te?.(),B?.(v);return}let L=re;if(N&&N.length){let ae=N.reduce((nt,rt)=>Math.abs(rt-re)<Math.abs(nt-re)?rt:nt,N[0]);Math.abs(ae-re)<=x&&(L=G(ae),C(y,L),k?.(L))}B?.(L),be()},tt=L=>{L.key==="Escape"&&(Y&&cancelAnimationFrame(Y),Y=0,ce=null,C(y,v),k?.(v),Ae=!0,B?.(v),be())};window.addEventListener("pointermove",Z),document.addEventListener("pointermove",Z),window.addEventListener("mousemove",Z),document.addEventListener("mousemove",Z),h.addEventListener("pointermove",Z),window.addEventListener("pointerup",F),document.addEventListener("pointerup",F),window.addEventListener("mouseup",F),document.addEventListener("mouseup",F),window.addEventListener("pointercancel",F),document.addEventListener("pointercancel",F),window.addEventListener("keydown",tt),h.addEventListener("lostpointercapture",F),w.current=be},onDoubleClick:d=>{n.onDoubleClick?.(d),!d.defaultPrevented&&j&&H?.()},onFocus:d=>{n.onFocus?.(d),T()},onKeyDown:d=>{n.onKeyDown?.(d);let y=o.current;if(!y||d.defaultPrevented)return;if(d.key==="Enter"){j&&H&&(d.preventDefault(),H());return}let h=p(),R=P(),O=v=>Math.min(Math.max(v,c),R),A;if(d.key==="Home")A=O(c);else if(d.key==="End")A=O(R);else{let v=u==="vertical"?d.key==="ArrowRight"?1:d.key==="ArrowLeft"?-1:0:d.key==="ArrowDown"?1:d.key==="ArrowUp"?-1:0;if(v===0)return;let J=d.shiftKey?32:8;A=O(h+v*J*f(getComputedStyle(y).direction==="rtl"))}d.preventDefault(),I?.(h),C(y,A),k?.(A),B?.(A)}},t)});oe.displayName="Shell.Handle";var cn=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));cn.displayName="Shell.Panel.Handle";var he=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));he.displayName="Shell.Sidebar.Handle";var dn=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));dn.displayName="Shell.Inspector.Handle";var pn=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));pn.displayName="Shell.Bottom.Handle";var E=D(require("react")),Pe=require("radix-ui/internal");var pe=D(require("react"));var lt={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},ve=["initial","xs","sm","md","lg","xl"];var fn=Object.entries(lt),He=null,de=new Set,ie=null;function Oe(){return He??(He=fn.map(([e,t])=>[e,window.matchMedia(t)])),He}function xe(){let e="initial";for(let[t,n]of Oe())n.matches&&(e=t);return e}function Re(){let e=xe();e!==ie&&(ie=e,de.forEach(t=>t()))}function ut(e){if(typeof window>"u")return()=>{};if(de.size===0){ie=xe();for(let[,t]of Oe())typeof t.addEventListener=="function"?t.addEventListener("change",Re):t.addListener?.(Re)}return de.add(e),()=>{if(de.delete(e),!(de.size>0)){for(let[,t]of Oe())try{typeof t.removeEventListener=="function"?t.removeEventListener("change",Re):t.removeListener?.(Re)}catch{}ie=null}}}function mn(){return typeof window>"u"?"initial":(ie??(ie=xe()),ie)}function Pn(){return"initial"}function fe(){return typeof window>"u"?"initial":xe()}var gn=()=>!0,bn=()=>!1,ct=()=>()=>{},yn=()=>"initial";function dt(e=!0){let t=pe.useSyncExternalStore(e?ut:ct,e?mn:yn,Pn),n=pe.useSyncExternalStore(e?ut:ct,gn,bn);return pe.useMemo(()=>({breakpoint:t,ready:n}),[t,n])}var ee=D(require("react")),ft=require("radix-ui/internal");function pt(e){return typeof e=="object"&&e!==null}function me(e,t){let n={},r=null;for(let o of ve){if(e!==void 0&&!pt(e)){n[o]=e;continue}let s=pt(e)?e[o]:void 0;s!==void 0&&(r={value:s}),n[o]=r?r.value:t(o)}return n}function le(e){let t=e.initial;return ve.every(n=>e[n]===t)?t:void 0}function Ie(e,t){let n=le(t);if(n!==void 0)return{[`data-${e}`]:n};let r={};for(let o of ve)r[`data-${e}-${o}`]=t[o];return r}function $e(e){return typeof e=="object"&&e!==null?JSON.stringify(e):String(e)}var or=me("fixed",()=>"fixed");function Fe(e){e.version+=1;for(let t of e.listeners)t()}function Sn(e,t){return e.listeners.add(t),()=>{e.listeners.delete(t)}}var hn=ee.createContext(null);function mt(e){let t=ee.useContext(hn);if(!t)throw new Error(`${e} must be used within <Shell.Root>`);return t}function Pt(e,t){let n=ee.useCallback(r=>Sn(e,r),[e]);return ee.useSyncExternalStore(n,()=>e.peek===t,()=>!1)}var vn=ee.createContext(null);function gt(e,t){let n=ee.useContext(vn);if(!n)throw new Error("Shell panes must be used within <Shell.Root>");let{registerInset:r,unregisterInset:o}=n;(0,ft.useLayoutEffect)(()=>{if(t)return r(e),()=>o(e)},[e,t,r,o])}var je=e=>typeof e=="object"&&e!==null;function xn(e){for(let t of["initial","xs","sm","md","lg","xl"]){let n=e[t];if(n!==void 0)return n}return"closed"}function bt(e){let{name:t,label:n,propNames:r,presentationTable:o,builtIn:s}=e,i=mt(`Shell.${n}`),c=E.useId(),l=e.id??`shell-${t}${c}`,a=e.controlled!==void 0,u=je(e.controlled);u&&(`${n}${r.controlled}${r.default}`,void 0);let b=u?e.controlled:void 0,f=b??(je(e.defaultValue)?e.defaultValue:void 0),k=$e(f),[I,B]=E.useState(()=>typeof e.defaultValue=="string"?e.defaultValue:"auto"),N=E.useMemo(()=>b?me(b,()=>xn(b)):me(f,m=>s(o[m])),[k,u,o,s]),x=I;a&&(x=b?"auto":e.controlled);let V=le(o)===void 0||x==="auto"&&le(N)===void 0,{breakpoint:j,ready:W}=dt(V),te=m=>{let K=le(m);return K!==void 0?K:W?m[j]:void 0},H=x==="auto"?te(N):x,$=te(o),_=$==="overlay",w=H===void 0?void 0:H!=="closed",p=w===!0&&_,P=e.defaultValue,T=E.useRef({state:x,value:H,autoTable:N,defaultValue:P,controlled:a,onChange:e.onChange,toggleNext:e.toggleNext});(0,Pe.useLayoutEffect)(()=>{T.current={state:x,value:H,autoTable:N,defaultValue:P,controlled:a,onChange:e.onChange,toggleNext:e.toggleNext}});let C=E.useCallback(()=>{let m=T.current;return m.value!==void 0?m.value:m.state==="auto"?m.autoTable[fe()]:void 0},[]),U=E.useCallback(()=>{let m=T.current;return typeof m.defaultValue=="string"?m.defaultValue:je(m.defaultValue)?m.autoTable[fe()]:void 0},[]),d=E.useCallback((m,K)=>{let G=T.current;C()!==m&&(G.onChange?.(m,K),G.controlled||B(m))},[C]),y=E.useCallback(m=>{let K=T.current,G=C()??"closed",Q=K.toggleNext?K.toggleNext(G,U()):G==="closed"?"open":"closed";d(Q,m)},[d,C,U]),h=E.useRef(null),R=E.useCallback(m=>{h.current=m},[]);(0,Pe.useLayoutEffect)(()=>{let m={name:t,id:l,el:h.current,value:H,presentation:$,presentationTable:o,overlayLive:p,size:e.size,setValue:d,toggle:y};return i.entries.set(t,m),Fe(i),()=>{i.entries.get(t)===m&&(i.entries.delete(t),Fe(i))}},[i,t,l,H,$,o,p,e.size,d,y]);let O=E.useRef({onExpand:e.onExpand,onCollapse:e.onCollapse});(0,Pe.useLayoutEffect)(()=>{O.current={onExpand:e.onExpand,onCollapse:e.onCollapse}});let A=E.useRef({state:x,shown:w});E.useEffect(()=>{let m=A.current;m.state!==x&&m.shown!==void 0&&w!==void 0&&m.shown!==w&&(w?O.current.onExpand?.():O.current.onCollapse?.()),A.current={state:x,shown:w}},[x,w]),(0,Pe.useLayoutEffect)(()=>{},[]);let v=E.useRef(a);E.useEffect(()=>{},[a,n,r.controlled]);let J=Pt(i,t)&&w===!1&&!_;return{store:i,id:l,state:x,value:H,shown:w,presentation:$,overlaying:_,overlayLive:p,peeking:J,ready:W,breakpoint:j,autoTable:N,setValue:d,toggle:y,defaultHereNow:U,setElement:R}}function yt(e,t){let{state:n,value:r,presentation:o,shown:s}=e;return{...t,"data-state":n,...n==="auto"?Ie("auto",e.autoTable):{},"data-presentation":o,"data-mode":r===void 0?void 0:r==="closed"?"collapsed":"expanded","data-open":o==="stacked"&&s?"":void 0,"data-peek":e.peeking?"":void 0}}function St(e,t){let n=$e(e),r=E.useMemo(()=>me(e,()=>t),[n,t]),o=E.useMemo(()=>le(r)===void 0?Ie("presentation",r):{},[r]);return{table:r,attributes:o}}var S=D(require("react")),ue=require("radix-ui/internal");function ht(e,t="horizontal"){if(e==null)return;if(typeof e=="number"&&Number.isFinite(e))return e;let n=String(e).trim();if(!n)return;if(n.endsWith("px"))return Number.parseFloat(n);if(n.endsWith("rem")){let o=Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16")||16;return Number.parseFloat(n)*o}if(n.endsWith("%")){let o=Number.parseFloat(n),s=t==="horizontal"?document.documentElement.clientWidth||window.innerWidth||0:document.documentElement.clientHeight||window.innerHeight||0;return o/100*s}let r=Number.parseFloat(n);return Number.isFinite(r)?r:void 0}var Ce=(e,t,n)=>Math.max(t??e,Math.min(n??e,e));function vt(e,t,n,r){let[o]=S.useState(()=>{let s=e??t;return typeof s=="number"&&Number.isFinite(s)?`${Ce(s,n,r)}px`:void 0});return o}function Rt(e){let{name:t,elementRef:n,cssVarName:r,orientation:o,minSize:s,maxSize:i,resizable:c,size:l,defaultSize:a,paneId:u,persistence:b}=e,f=S.useRef(e);(0,ue.useLayoutEffect)(()=>{f.current=e});let k=S.useRef(null),I=S.useRef(0);S.useEffect(()=>()=>{k.current&&clearTimeout(k.current)},[]);let B=S.useCallback((p,P)=>{let{onSizeChange:T,sizeUpdate:C,sizeUpdateMs:U}=f.current;if(T){if(C==="debounce"){k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{k.current=null,f.current.onSizeChange?.(p,P)},U);return}if(C==="throttle"){let d=Date.now();if(d-I.current<U)return;I.current=d}T(p,P)}},[]),N=S.useCallback(p=>ht(p,o==="vertical"?"horizontal":"vertical"),[o]),x=S.useRef(!1),V=S.useCallback((p,P)=>{let T=n.current;if(T){T.style.setProperty(r,`${p}px`);for(let C of T.querySelectorAll(":scope > .kui-ShellResizer"))C.setAttribute("aria-valuenow",String(Math.round(p)));P&&(x.current=!0)}},[n,r]);(0,ue.useLayoutEffect)(()=>{x.current||V(e.expandedSize,!1)},[e.expandedSize,V]),(0,ue.useLayoutEffect)(()=>{if(l!==void 0||a===void 0)return;let p=N(a);if(typeof p!="number"||!Number.isFinite(p))return;let P=Ce(p,s,i);V(P,!0),B(P,{reason:"init"})},[]),(0,ue.useLayoutEffect)(()=>{if(l===void 0||f.current.overlayingNow())return;let p=N(l);if(typeof p!="number"||!Number.isFinite(p))return;let P=Ce(p,s,i);V(P,!0),B(P,{reason:"controlled"})},[l,s,i,e.overlaying,N,V,B]);let j=b!==void 0,W=S.useMemo(()=>{if(j)return{load:()=>f.current.persistence?.load?.(),save:P=>f.current.persistence?.save?.(P)};if(!u)return;let p=`kookie-ui:shell:${t}:${u}`;return{load:()=>{if(!(typeof window>"u"))try{let P=window.localStorage.getItem(p);return P?Number(P):void 0}catch{return}},save:P=>{if(!(typeof window>"u"))try{window.localStorage.setItem(p,String(P))}catch{}}}},[t,u,j]);(0,ue.useLayoutEffect)(()=>{if(!c||!W?.load||f.current.overlayingNow())return;let p=!0,P=C=>{if(!p||typeof C!="number"||!Number.isFinite(C))return;let U=Ce(C,s,i);V(U,!0),f.current.onResize?.(U)},T=W.load();return T instanceof Promise?T.then(P).catch(C=>{}):P(T),()=>{p=!1}},[c,W,e.overlaying,V,s,i,t]);let te=S.useCallback(p=>f.current.onResize?.(p),[]),H=S.useCallback(p=>{x.current=!0,f.current.onResizeStart?.(p)},[]),$=S.useCallback(p=>{f.current.onResizeEnd?.(p),B(p,{reason:"resize"}),W?.save?.(p)},[B,W]),_=S.useCallback(()=>f.current.requestCollapse(),[]),w=S.useCallback(()=>f.current.requestToggle(),[]);return S.useMemo(()=>({containerRef:n,controls:e.elementId,cssVarName:r,minSize:s,maxSize:i,defaultSize:e.expandedSize,orientation:o,edge:e.edge,growth:e.growth,onResize:te,onResizeStart:H,onResizeEnd:$,target:t,collapsible:e.collapsible,snapPoints:e.snapPoints,snapTolerance:e.snapTolerance??8,collapseThreshold:e.collapseThreshold,requestCollapse:_,requestToggle:w}),[n,e.elementId,r,s,i,e.expandedSize,o,e.edge,e.growth,te,H,$,t,e.collapsible,e.snapPoints,e.snapTolerance,e.collapseThreshold,_,w])}function xt(e,t){let n=S.Children.toArray(e),r=n.filter(s=>S.isValidElement(s)&&s.type===t),o=n.filter(s=>!(S.isValidElement(s)&&s.type===t));return{handles:r,content:o}}var Ct=e=>e==="overlay"?"closed":"open";var Et=e=>e?-1:1;function wt(e){if(!("height"in e)&&!("resizer"in e))return e;let{height:t,resizer:n,...r}=e;return r}var g=D(require("react")),ge=D(require("classnames"));var M=D(require("react")),$t=D(require("classnames")),ne=require("radix-ui"),Ft=require("radix-ui/internal");var Tt={asChild:{type:"boolean"}};var Cn=["none","small","medium","large","full"],zt={radius:{type:"enum",values:Cn,default:void 0}};var En=["vertical","horizontal","both"],Ee={...Tt,...zt,scrollbars:{type:"enum",values:En,default:"both"},fade:{type:"boolean",default:!1}};var we=D(require("react"));function We(e){let t=getComputedStyle(e);return{x:t.overflowX==="hidden"?0:Math.max(0,e.scrollWidth-e.clientWidth),y:t.overflowY==="hidden"?0:Math.max(0,e.scrollHeight-e.clientHeight)}}function kt(e){let[t,n]=we.useState(null);return we.useEffect(()=>{if(!e||!t)return;let r=0,o=()=>{r=0;let l=We(t),a=Math.max(0,t.scrollTop),u=Math.max(0,l.y-t.scrollTop);t.style.setProperty("--scroll-overflow-start",`${a}px`),t.style.setProperty("--scroll-overflow-end",`${u}px`);let b=Math.abs(t.scrollLeft),f=Math.max(0,l.x-b);t.style.setProperty("--scroll-overflow-x-start",`${b}px`),t.style.setProperty("--scroll-overflow-x-end",`${f}px`)},s=()=>{r||(r=requestAnimationFrame(o))};o(),t.addEventListener("scroll",s,{passive:!0});let i=typeof ResizeObserver>"u"?null:new ResizeObserver(s);i?.observe(t);for(let l of Array.from(t.children))i?.observe(l);let c=typeof MutationObserver>"u"?null:new MutationObserver(s);return c?.observe(t,{childList:!0}),()=>{r&&cancelAnimationFrame(r),t.removeEventListener("scroll",s),i?.disconnect(),c?.disconnect(),t.style.removeProperty("--scroll-overflow-start"),t.style.removeProperty("--scroll-overflow-end"),t.style.removeProperty("--scroll-overflow-x-start"),t.style.removeProperty("--scroll-overflow-x-end")}},[e,t]),n}var Te=D(require("react"));function Dt(){let[e,t]=Te.useState(null);return Te.useEffect(()=>{let n=e?.parentElement;if(!e||!n)return;let r=0,o=()=>{r=0;for(let i of n.querySelectorAll(":scope > .kui-ScrollAreaScrollbar > .kui-ScrollAreaThumb")){let c=i.parentElement,l=getComputedStyle(c);if(c.dataset.orientation==="horizontal"){let a=c.clientWidth-parseFloat(l.paddingLeft)-parseFloat(l.paddingRight),u=Nt(e.scrollLeft,e.scrollWidth-e.offsetWidth,a-i.offsetWidth);i.style.transform=`translate3d(${u}px, 0, 0)`}else{let a=c.clientHeight-parseFloat(l.paddingTop)-parseFloat(l.paddingBottom),u=Nt(e.scrollTop,e.scrollHeight-e.offsetHeight,a-i.offsetHeight);i.style.transform=`translate3d(0, ${u}px, 0)`}}},s=()=>{r||(r=requestAnimationFrame(o))};return e.addEventListener("scroll",s,{passive:!0}),()=>{r&&cancelAnimationFrame(r),e.removeEventListener("scroll",s)}},[e]),t}function Nt(e,t,n){return t<=0||n<=0?0:Math.min(Math.max(e,-t),t)/t*n}var ze=D(require("react"));function Vt(e,t){let{asChild:n,children:r}=e;if(!n)return typeof t=="function"?t(r):t;let o=ze.Children.only(r);return ze.cloneElement(o,{children:typeof t=="function"?t(o.props.children):t})}var Bt=D(require("classnames"));var wn=[],Tn=new Set;function zn(e){let t=Object.assign({},...e),n=[],r=[],o=new Set;for(let s in t){let i=t[s],c=i.values??wn,l={key:s,type:i.type,default:i.default,hasDefault:i.default!==void 0,responsive:"responsive"in i,className:i.className,customProperties:i.customProperties,parseValue:i.parseValue,values:c,valueSet:c.length>0?new Set(c):Tn,enumValueSet:i.type==="enum"?new Set([i.default,...c]):void 0};i.className?(n.push(l),o.add(s)):(l.hasDefault||i.type==="enum")&&r.push(l)}return{styling:n,passthrough:r,stylingKeys:o}}var kn={children:new WeakMap};function Lt(e){let t=kn;for(let n=0;n<e.length;n++){let r=e[n],o=t.children.get(r);o===void 0&&(o={children:new WeakMap},t.children.set(r,o)),t=o}return t.compiled??(t.compiled=zn(e))}var Nn=["initial","xs","sm","md","lg","xl"],Ue=new Set(Nn);function qe(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var Dn=new Set(["initial","xs","sm","md","lg","xl"]);function se(e){if(typeof e!="object"||e===null)return!1;for(let t in e)if(Dn.has(t))return!0;return!1}function ke(e,t,n){return t!==void 0?t.has(n):e.includes(n)}function At({className:e,customProperties:t,...n}){let r=Ke({allowArbitraryValues:!0,className:e,...n}),o=Vn({customProperties:t,...n});return[r,o]}function Ke({allowArbitraryValues:e,value:t,className:n,propValues:r,propValueSet:o,parseValue:s=i=>i}){if(t){if(typeof t=="string")return ke(r,o,t)?Mt(n,t,s):e?n:void 0;if(se(t)){let i=t,c=[];for(let l in i){if(!qe(i,l)||!Ue.has(l))continue;let a=i[l];if(a!==void 0){if(ke(r,o,a)){let u=Mt(n,a,s),b=l==="initial"?u:`${l}:${u}`;c.push(b)}else if(e){let u=l==="initial"?n:`${l}:${n}`;c.push(u)}}}return c.length>0?c.join(" "):""}if(e)return n}}function Mt(e,t,n){let r=e?"-":"",o=n(t),s=o?.startsWith("-"),i=s?"-":"",c=s?o?.substring(1):o;return`${i}${e}${r}${c}`}function Vn({customProperties:e,value:t,propValues:n,propValueSet:r,parseValue:o=s=>s}){if(!t||typeof t=="string"&&ke(n,r,t))return;let s;if(typeof t=="string"){let i=o(t);s={};for(let c of e)s[c]=i;return s}if(se(t)){let i=t;for(let c in i){if(!qe(i,c)||!Ue.has(c))continue;let l=i[c];if(l===void 0||ke(n,r,l))continue;let a=o(l);s??(s={});for(let u of e){let b=c==="initial"?u:`${u}-${c}`;s[b]=a}}}return s??{}}function _e(...e){let t;for(let n of e)n&&(t===void 0&&(t={}),Object.assign(t,n));return t}function Ln(e,t){let n=e.initial,r=!1;return t.hasDefault&&n===void 0&&(n=t.default,r=!0),t.enumValueSet!==void 0&&!t.enumValueSet.has(n)&&(n=t.default,r=!0),r?{...e,initial:n}:e}function Ht(e,...t){let{styling:n,passthrough:r,stylingKeys:o}=Lt(t),s={};for(let l in e)o.has(l)||(s[l]=e[l]);for(let l=0;l<r.length;l++){let a=r[l],u=s[a.key];if(u===void 0){a.hasDefault&&(s[a.key]=a.default);continue}a.enumValueSet!==void 0&&!a.enumValueSet.has(u)&&!se(u)&&(s[a.key]=a.default)}let i,c=[];for(let l=0;l<n.length;l++){let a=n[l],u=e[a.key];if(u===void 0&&a.hasDefault&&(u=a.default),a.enumValueSet!==void 0&&!a.enumValueSet.has(u)&&!se(u)&&(u=a.default),!!u){if(se(u)){if(!a.responsive)continue;u=Ln(u,a)}if(a.type==="enum"){let b=Ke({allowArbitraryValues:!1,value:u,className:a.className,propValues:a.values,propValueSet:a.valueSet,parseValue:a.parseValue});b&&c.push(b);continue}if(a.type==="string"||a.type==="enum | string"){let[b,f]=At({className:a.className,customProperties:a.customProperties,propValues:a.type==="string"?[]:a.values,propValueSet:a.type==="string"?void 0:a.valueSet,parseValue:a.parseValue,value:u});f&&(i=_e(i,f)),b&&c.push(b);continue}if(a.type==="boolean"){c.push(a.className);continue}}}return s.className=(0,Bt.default)(c.length>0?c.join(" "):void 0,e.className),s.style=_e(i,e.style),s}var Ot={width:{type:"string",className:"kui-r-w",customProperties:["--width"],responsive:!0},minWidth:{type:"string",className:"kui-r-min-w",customProperties:["--min-width"],responsive:!0},maxWidth:{type:"string",className:"kui-r-max-w",customProperties:["--max-width"],responsive:!0}};var It={height:{type:"string",className:"kui-r-h",customProperties:["--height"],responsive:!0},minHeight:{type:"string",className:"kui-r-min-h",customProperties:["--min-height"],responsive:!0},maxHeight:{type:"string",className:"kui-r-max-h",customProperties:["--max-height"],responsive:!0}};var Mn='[role="menu"], [role="listbox"]';function An(e,t){M.useEffect(()=>{if(!t||!e||e.closest(Mn))return;let n=0,r=()=>{n=0;let i=We(e);i.x>0||i.y>0?e.setAttribute("tabindex","0"):e.removeAttribute("tabindex")},o=()=>{n||(n=requestAnimationFrame(r))};r();let s=typeof ResizeObserver>"u"?null:new ResizeObserver(o);s?.observe(e);for(let i of Array.from(e.children))s?.observe(i);return()=>{n&&cancelAnimationFrame(n),s?.disconnect()}},[e,t])}var Ne=M.forwardRef((e,t)=>{let{asChild:n,children:r,className:o,style:s,type:i,scrollHideDelay:c=i!=="scroll"?0:void 0,dir:l,radius:a=Ee.radius.default,scrollbars:u=Ee.scrollbars.default,fade:b=Ee.fade.default,...f}=Ht(e,Ot,It),[k,I]=M.useState(null),B=kt(b),N=Dt(),x=(0,Ft.useComposedRefs)(t,B,N,I);An(k,f.tabIndex===void 0);let V=f["aria-label"]!==void 0||f["aria-labelledby"]!==void 0;return M.createElement(ne.ScrollArea.Root,{type:i,scrollHideDelay:c,dir:l,className:(0,$t.default)("kui-ScrollAreaRoot",o),"data-fade":b?"":void 0,style:s,asChild:n},Vt({asChild:n,children:r},j=>M.createElement(M.Fragment,null,M.createElement(ne.ScrollArea.Viewport,{role:V?"region":void 0,...f,ref:x,className:"kui-ScrollAreaViewport"},j),M.createElement("div",{className:"kui-ScrollAreaViewportFocusRing"}),u!=="vertical"?M.createElement(ne.ScrollArea.Scrollbar,{"data-radius":a,orientation:"horizontal",className:"kui-ScrollAreaScrollbar"},M.createElement(ne.ScrollArea.Thumb,{className:"kui-ScrollAreaThumb"})):null,u!=="horizontal"?M.createElement(ne.ScrollArea.Scrollbar,{"data-radius":a,orientation:"vertical",className:"kui-ScrollAreaScrollbar"},M.createElement(ne.ScrollArea.Thumb,{className:"kui-ScrollAreaThumb"})):null,u==="both"?M.createElement(ne.ScrollArea.Corner,{className:"kui-ScrollAreaCorner"}):null)))});Ne.displayName="ScrollArea";var jt=D(require("react")),De=jt.createContext(void 0);var Ut=D(require("react")),Bn="(max-width: 767.98px) and (pointer: coarse)",Wt,qt=()=>Wt??(Wt=window.matchMedia(Bn));function Hn(e,t){return typeof e.addEventListener=="function"?(e.addEventListener("change",t),()=>e.removeEventListener("change",t)):(e.addListener?.(t),()=>e.removeListener?.(t))}function On(e){return Hn(qt(),e)}function Kt(){return Ut.useSyncExternalStore(On,()=>qt().matches,()=>!1)}var _t=g.createContext(null);function Ge(){return g.useContext(_t)}var Qe=g.createContext("2"),In=g.createContext(!1),$n=g.createContext(!1);function Gt({children:e,presentation:t}){let n=g.useContext(Qe),r=g.useMemo(()=>({size:n,menuVariant:"soft",presentation:t}),[n,t]);return g.createElement(_t.Provider,{value:r},e)}function Ye(){let e=Ge(),t=g.useContext(Qe),n=e?.size??t,r=e?.menuVariant??"soft";return["kui-ShellPaneChrome",`kui-r-size-${n}`,`kui-menu-variant-${r}`]}var Fn={1:"2",2:"3",3:"4",4:"4"};function Qt(){let e=Ge(),t=g.useContext(Qe);return Fn[e?.size??t]}var jn=g.forwardRef(({className:e,float:t,children:n,...r},o)=>{let s=Ye(),i=Qt();return g.createElement("div",{...r,ref:o,"data-float":t||void 0,className:(0,ge.default)("kui-ShellPaneHeader","kui-SidebarHeader","kui-SidebarHeader--container",...s,e)},g.createElement(De.Provider,{value:i},n))});jn.displayName="Shell.PaneHeader";var Wn=g.forwardRef(({className:e,float:t,children:n,...r},o)=>{let s=Ye(),i=Qt();return g.createElement("div",{...r,ref:o,"data-float":t||void 0,className:(0,ge.default)("kui-ShellPaneFooter","kui-SidebarFooter","kui-SidebarFooter--container",...s,e)},g.createElement(De.Provider,{value:i},n))});Wn.displayName="Shell.PaneFooter";var Un=g.forwardRef(({className:e,style:t,dir:n,children:r,fade:o=!1,pane:s=!1,...i},c)=>{let l=Ye(),a=g.useContext(In),u=Ge(),b=a&&u===null&&!s,f=g.useContext($n),k=Kt();if(b){let I=i.tabIndex??(f&&k?-1:void 0);return g.createElement(Ne,{...i,tabIndex:I,ref:c,type:"hover",fade:o,className:"kui-ShellScroll"},g.createElement("div",{style:t,dir:n,className:(0,ge.default)("kui-ShellScrollContent",e)},r))}return g.createElement(Ne,{...i,ref:c,type:"hover",fade:o,className:"kui-ShellScroll"},g.createElement("div",{style:t,dir:n,className:(0,ge.default)("kui-BaseMenuContent","kui-SidebarContent",...l,e)},g.createElement(De.Provider,{value:null},g.createElement("div",{className:"kui-BaseMenuViewport"},r))))});Un.displayName="Shell.Scroll";var X=D(require("react")),qn=X.createContext(null);function Yt({children:e}){let t=X.useMemo(()=>({title:null,mirrors:new Set,collapsed:!1,listeners:new Set,version:0}),[]);return X.createElement(qn.Provider,{value:t},e)}var Xt=e=>e==="collapsed"?"closed":"open",Kn=e=>e==="closed"?"collapsed":"expanded";function Jt(e){if(e===void 0)return;if(typeof e=="string")return Xt(e);let t={};for(let[n,r]of Object.entries(e))r!==void 0&&(t[n]=Xt(r));return t}var _n={controlled:"state",default:"defaultState"},Gn={initial:"overlay",sm:"fixed"},Xe=q.forwardRef((e,t)=>{let{className:n,presentation:r=Gn,expandedSize:o=288,minSize:s=200,maxSize:i=400,resizable:c=!1,collapsible:l=!0,onExpand:a,onCollapse:u,onResize:b,onResizeStart:f,onResizeEnd:k,snapPoints:I,snapTolerance:B,collapseThreshold:N,paneId:x,persistence:V,children:j,style:W,state:te,defaultState:H,onStateChange:$,size:_,defaultSize:w,onSizeChange:p,sizeUpdate:P,sizeUpdateMs:T=50,inset:C,id:U,...d}=e,{table:y,attributes:h}=St(r,"fixed"),R=bt({name:"sidebar",label:"Sidebar",propNames:_n,id:U,controlled:Jt(te),defaultValue:Jt(H),presentationTable:y,builtIn:Ct,onChange:(Ve,Le)=>$?.(Kn(Ve),{reason:Le}),onExpand:a,onCollapse:u,size:o});gt("sidebar",C),q.useEffect(()=>{(I!==void 0||N!==void 0||x!==void 0||V!==void 0)&&void 0},[I,N,x,V]);let O=q.useRef(null),A=(0,en.useComposedRefs)(t,R.setElement,O),v=Rt({name:"sidebar",elementId:R.id,elementRef:O,cssVarName:"--sidebar-size",orientation:"vertical",edge:"end",growth:Et,expandedSize:o,minSize:s,maxSize:i,resizable:c,collapsible:l,size:_,defaultSize:w,onSizeChange:p,sizeUpdate:P,sizeUpdateMs:T,onResize:b,onResizeStart:f,onResizeEnd:k,snapPoints:I,snapTolerance:B,collapseThreshold:N,paneId:x,persistence:V,overlaying:R.overlaying,overlayingNow:()=>y[fe()]==="overlay",requestCollapse:()=>R.setValue("closed","toggle"),requestToggle:()=>R.toggle("toggle")}),{handles:J,content:m}=xt(j,he),K=c&&R.value!=="closed"&&!R.overlaying?q.createElement(Be.Provider,{value:v},J.length>0?J:q.createElement(oe,null)):null,G=R.peeking?`var(--sidebar-size, ${o}px)`:void 0,Q=vt(_,w,s,i);return q.createElement("div",{...wt(d),role:d.role??"navigation",id:R.id,ref:A,className:(0,Zt.default)("kui-ShellPane","kui-ShellSidebar",n),...yt(R,h),"data-inset":C||void 0,tabIndex:R.overlaying?-1:d.tabIndex,style:{...W,"--sidebar-expanded-size":`${o}px`,...Q?{"--sidebar-size":Q}:{},"--sidebar-min-size":`${s}px`,"--sidebar-max-size":`${i}px`,...G?{"--peek-sidebar-width":G}:{}}},q.createElement("div",{className:"kui-ShellSidebarContent"},q.createElement(Gt,null,q.createElement(Yt,null,m))),K)});Xe.displayName="Shell.Sidebar";Xe.Handle=he;
+"use strict";"use client";var nn=Object.create;var ye=Object.defineProperty;var rn=Object.getOwnPropertyDescriptor;var on=Object.getOwnPropertyNames;var an=Object.getPrototypeOf,sn=Object.prototype.hasOwnProperty;var ln=(e,t)=>{for(var n in t)ye(e,n,{get:t[n],enumerable:!0})},ot=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of on(t))!sn.call(e,o)&&o!==n&&ye(e,o,{get:()=>t[o],enumerable:!(r=rn(t,o))||r.enumerable});return e};var D=(e,t,n)=>(n=e!=null?nn(an(e)):{},ot(t||!e||!e.__esModule?ye(n,"default",{value:e,enumerable:!0}):n,e)),un=e=>ot(ye({},"__esModule",{value:!0}),e);var Qn={};ln(Qn,{Sidebar:()=>Xe});module.exports=un(Qn);var q=D(require("react")),Zt=D(require("classnames")),en=require("radix-ui/internal");var Se=D(require("react")),Be=Se.createContext(null);function it(){let e=Se.useContext(Be);if(!e)throw new Error("Shell.Handle must be used within a resizable pane");return e}var z=D(require("react")),at=require("radix-ui/internal"),st=D(require("classnames"));var oe=z.forwardRef(({className:e,children:t,...n},r)=>{let{containerRef:o,controls:a,cssVarName:i,minSize:c,maxSize:l,defaultSize:s,orientation:u,edge:b,growth:f,onResize:k,onResizeStart:F,onResizeEnd:B,snapPoints:N,snapTolerance:x,collapseThreshold:V,collapsible:j,target:W,requestCollapse:te,requestToggle:H}=it(),$=z.useRef(null),_=z.useCallback(d=>{$.current=d,typeof r=="function"?r(d):r&&(r.current=d)},[r]),w=z.useRef(null);z.useEffect(()=>()=>{w.current?.(),w.current=null},[]);let p=z.useCallback(()=>{let d=o.current;if(!d)return s;let y=Number.parseFloat(getComputedStyle(d).getPropertyValue(i));return Number.isFinite(y)?y:s},[o,i,s]),P=z.useCallback(()=>{let d=o.current,y=$.current,h=d?.closest(".kui-ShellRoot")?.getBoundingClientRect();if(!d||!h||!y)return l;let R=d.getBoundingClientRect(),O=y.getBoundingClientRect(),A=f(getComputedStyle(d).direction==="rtl"),v;u==="vertical"?v=A>0?h.right-R.left:R.right-h.left:v=A>0?h.bottom-R.top:R.bottom-h.top;let J=u==="vertical"?O.width:O.height;return!(h.width>0&&h.height>0)||!Number.isFinite(v)?l:Math.max(c,Math.min(l,Math.round(v-J)))},[o,f,l,c,u]),T=()=>{$.current?.setAttribute("aria-valuemax",String(P()))};(0,at.useLayoutEffect)(()=>{$.current?.setAttribute("aria-valuenow",String(Math.round(p())))},[p]);let C=(d,y)=>{d.style.setProperty(i,`${y}px`),$.current?.setAttribute("aria-valuenow",String(Math.round(y)))},U=W.charAt(0).toUpperCase()+W.slice(1);return z.createElement("div",{ref:_,className:(0,st.default)("kui-ShellResizer",e),"data-orientation":u,"data-edge":b,role:"separator",tabIndex:0,"aria-label":`Resize ${U} pane`,"aria-controls":a,"aria-orientation":u,"aria-valuemin":c,"aria-valuemax":l,...n,onPointerDown:d=>{n.onPointerDown?.(d);let y=o.current;if(!y||d.defaultPrevented||d.button!==0)return;d.preventDefault();let h=d.currentTarget,R=d.pointerId;w.current?.();try{h.setPointerCapture(R)}catch{}let O=getComputedStyle(y),A=Number.parseFloat(O.getPropertyValue(i)),v=Number.isFinite(A)?A:s,J=u==="vertical"?d.clientX:d.clientY,m=f(O.direction==="rtl"),K=P();h.setAttribute("aria-valuemax",String(K));let G=L=>Math.min(Math.max(L,c),K);y.setAttribute("data-resizing",""),h.setAttribute("data-dragging","");let Q=document.body,Ve=Q.style.cursor,Le=Q.style.userSelect;Q.style.cursor=u==="vertical"?"col-resize":"row-resize",Q.style.userSelect="none",F?.(v);let re=v,Me=v,Y=0,ce=null,Je=()=>{if(Y=0,ce===null)return;let L=ce;ce=null,k?.(L)},Ze=null,et=!1,tn=(L,se)=>{if(L.type===se)et=!0;else if(et)return!1;return!0},Z=L=>{if(!tn(L,"pointermove")||L===Ze)return;Ze=L;let se=u==="vertical"?L.clientX:L.clientY;Me=v+(se-J)*m,re=G(Me),C(y,re),ce=re,Y||(Y=requestAnimationFrame(Je))},be=()=>{Y&&cancelAnimationFrame(Y),Y=0;try{h.releasePointerCapture(R)}catch{}window.removeEventListener("pointermove",Z),document.removeEventListener("pointermove",Z),window.removeEventListener("mousemove",Z),document.removeEventListener("mousemove",Z),h.removeEventListener("pointermove",Z),window.removeEventListener("pointerup",I),document.removeEventListener("pointerup",I),window.removeEventListener("mouseup",I),document.removeEventListener("mouseup",I),window.removeEventListener("pointercancel",I),document.removeEventListener("pointercancel",I),window.removeEventListener("keydown",tt),h.removeEventListener("lostpointercapture",I),y.removeAttribute("data-resizing"),h.removeAttribute("data-dragging"),Q.style.cursor=Ve,Q.style.userSelect=Le,w.current=null},Ae=!1,I=()=>{if(Ae)return;if(Ae=!0,Y&&cancelAnimationFrame(Y),Je(),j&&typeof V=="number"&&Me<=V){C(y,v),k?.(v),be(),te?.(),B?.(v);return}let L=re;if(N&&N.length){let se=N.reduce((nt,rt)=>Math.abs(rt-re)<Math.abs(nt-re)?rt:nt,N[0]);Math.abs(se-re)<=x&&(L=G(se),C(y,L),k?.(L))}B?.(L),be()},tt=L=>{L.key==="Escape"&&(Y&&cancelAnimationFrame(Y),Y=0,ce=null,C(y,v),k?.(v),Ae=!0,B?.(v),be())};window.addEventListener("pointermove",Z),document.addEventListener("pointermove",Z),window.addEventListener("mousemove",Z),document.addEventListener("mousemove",Z),h.addEventListener("pointermove",Z),window.addEventListener("pointerup",I),document.addEventListener("pointerup",I),window.addEventListener("mouseup",I),document.addEventListener("mouseup",I),window.addEventListener("pointercancel",I),document.addEventListener("pointercancel",I),window.addEventListener("keydown",tt),h.addEventListener("lostpointercapture",I),w.current=be},onDoubleClick:d=>{n.onDoubleClick?.(d),!d.defaultPrevented&&j&&H?.()},onFocus:d=>{n.onFocus?.(d),T()},onKeyDown:d=>{n.onKeyDown?.(d);let y=o.current;if(!y||d.defaultPrevented)return;if(d.key==="Enter"){j&&H&&(d.preventDefault(),H());return}let h=p(),R=P(),O=v=>Math.min(Math.max(v,c),R),A;if(d.key==="Home")A=O(c);else if(d.key==="End")A=O(R);else{let v=u==="vertical"?d.key==="ArrowRight"?1:d.key==="ArrowLeft"?-1:0:d.key==="ArrowDown"?1:d.key==="ArrowUp"?-1:0;if(v===0)return;let J=d.shiftKey?32:8;A=O(h+v*J*f(getComputedStyle(y).direction==="rtl"))}d.preventDefault(),F?.(h),C(y,A),k?.(A),B?.(A)}},t)});oe.displayName="Shell.Handle";var cn=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));cn.displayName="Shell.Panel.Handle";var he=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));he.displayName="Shell.Sidebar.Handle";var dn=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));dn.displayName="Shell.Inspector.Handle";var pn=z.forwardRef((e,t)=>z.createElement(oe,{...e,ref:t}));pn.displayName="Shell.Bottom.Handle";var E=D(require("react")),Pe=require("radix-ui/internal");var pe=D(require("react"));var lt={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"},ve=["initial","xs","sm","md","lg","xl"];var fn=Object.entries(lt),He=null,de=new Set,ie=null;function Oe(){return He??(He=fn.map(([e,t])=>[e,window.matchMedia(t)])),He}function xe(){let e="initial";for(let[t,n]of Oe())n.matches&&(e=t);return e}function Re(){let e=xe();e!==ie&&(ie=e,de.forEach(t=>t()))}function ut(e){if(typeof window>"u")return()=>{};if(de.size===0){ie=xe();for(let[,t]of Oe())typeof t.addEventListener=="function"?t.addEventListener("change",Re):t.addListener?.(Re)}return de.add(e),()=>{if(de.delete(e),!(de.size>0)){for(let[,t]of Oe())try{typeof t.removeEventListener=="function"?t.removeEventListener("change",Re):t.removeListener?.(Re)}catch{}ie=null}}}function mn(){return typeof window>"u"?"initial":(ie??(ie=xe()),ie)}function Pn(){return"initial"}function fe(){return typeof window>"u"?"initial":xe()}var gn=()=>!0,bn=()=>!1,ct=()=>()=>{},yn=()=>"initial";function dt(e=!0){let t=pe.useSyncExternalStore(e?ut:ct,e?mn:yn,Pn),n=pe.useSyncExternalStore(e?ut:ct,gn,bn);return pe.useMemo(()=>({breakpoint:t,ready:n}),[t,n])}var ee=D(require("react")),ft=require("radix-ui/internal");function pt(e){return typeof e=="object"&&e!==null}function me(e,t){let n={},r=null;for(let o of ve){if(e!==void 0&&!pt(e)){n[o]=e;continue}let a=pt(e)?e[o]:void 0;a!==void 0&&(r={value:a}),n[o]=r?r.value:t(o)}return n}function le(e){let t=e.initial;return ve.every(n=>e[n]===t)?t:void 0}function Fe(e,t){let n=le(t);if(n!==void 0)return{[`data-${e}`]:n};let r={};for(let o of ve)r[`data-${e}-${o}`]=t[o];return r}function $e(e){return typeof e=="object"&&e!==null?JSON.stringify(e):String(e)}var or=me("fixed",()=>"fixed");function Ie(e){e.version+=1;for(let t of e.listeners)t()}function Sn(e,t){return e.listeners.add(t),()=>{e.listeners.delete(t)}}var hn=ee.createContext(null);function mt(e){let t=ee.useContext(hn);if(!t)throw new Error(`${e} must be used within <Shell.Root>`);return t}function Pt(e,t){let n=ee.useCallback(r=>Sn(e,r),[e]);return ee.useSyncExternalStore(n,()=>e.peek===t,()=>!1)}var vn=ee.createContext(null);function gt(e,t){let n=ee.useContext(vn);if(!n)throw new Error("Shell panes must be used within <Shell.Root>");let{registerOffFrame:r,unregisterOffFrame:o}=n;(0,ft.useLayoutEffect)(()=>{if(!t)return r(e),()=>o(e)},[e,t,r,o])}var je=e=>typeof e=="object"&&e!==null;function xn(e){for(let t of["initial","xs","sm","md","lg","xl"]){let n=e[t];if(n!==void 0)return n}return"closed"}function bt(e){let{name:t,label:n,propNames:r,presentationTable:o,builtIn:a}=e,i=mt(`Shell.${n}`),c=E.useId(),l=e.id??`shell-${t}${c}`,s=e.controlled!==void 0,u=je(e.controlled);u&&(`${n}${r.controlled}${r.default}`,void 0);let b=u?e.controlled:void 0,f=b??(je(e.defaultValue)?e.defaultValue:void 0),k=$e(f),[F,B]=E.useState(()=>typeof e.defaultValue=="string"?e.defaultValue:"auto"),N=E.useMemo(()=>b?me(b,()=>xn(b)):me(f,m=>a(o[m])),[k,u,o,a]),x=F;s&&(x=b?"auto":e.controlled);let V=le(o)===void 0||x==="auto"&&le(N)===void 0,{breakpoint:j,ready:W}=dt(V),te=m=>{let K=le(m);return K!==void 0?K:W?m[j]:void 0},H=x==="auto"?te(N):x,$=te(o),_=$==="overlay",w=H===void 0?void 0:H!=="closed",p=w===!0&&_,P=e.defaultValue,T=E.useRef({state:x,value:H,autoTable:N,defaultValue:P,controlled:s,onChange:e.onChange,toggleNext:e.toggleNext});(0,Pe.useLayoutEffect)(()=>{T.current={state:x,value:H,autoTable:N,defaultValue:P,controlled:s,onChange:e.onChange,toggleNext:e.toggleNext}});let C=E.useCallback(()=>{let m=T.current;return m.value!==void 0?m.value:m.state==="auto"?m.autoTable[fe()]:void 0},[]),U=E.useCallback(()=>{let m=T.current;return typeof m.defaultValue=="string"?m.defaultValue:je(m.defaultValue)?m.autoTable[fe()]:void 0},[]),d=E.useCallback((m,K)=>{let G=T.current;C()!==m&&(G.onChange?.(m,K),G.controlled||B(m))},[C]),y=E.useCallback(m=>{let K=T.current,G=C()??"closed",Q=K.toggleNext?K.toggleNext(G,U()):G==="closed"?"open":"closed";d(Q,m)},[d,C,U]),h=E.useRef(null),R=E.useCallback(m=>{h.current=m},[]);(0,Pe.useLayoutEffect)(()=>{let m={name:t,id:l,el:h.current,value:H,presentation:$,presentationTable:o,overlayLive:p,size:e.size,setValue:d,toggle:y};return i.entries.set(t,m),Ie(i),()=>{i.entries.get(t)===m&&(i.entries.delete(t),Ie(i))}},[i,t,l,H,$,o,p,e.size,d,y]);let O=E.useRef({onExpand:e.onExpand,onCollapse:e.onCollapse});(0,Pe.useLayoutEffect)(()=>{O.current={onExpand:e.onExpand,onCollapse:e.onCollapse}});let A=E.useRef({state:x,shown:w});E.useEffect(()=>{let m=A.current;m.state!==x&&m.shown!==void 0&&w!==void 0&&m.shown!==w&&(w?O.current.onExpand?.():O.current.onCollapse?.()),A.current={state:x,shown:w}},[x,w]),(0,Pe.useLayoutEffect)(()=>{},[]);let v=E.useRef(s);E.useEffect(()=>{},[s,n,r.controlled]);let J=Pt(i,t)&&w===!1&&!_;return{store:i,id:l,state:x,value:H,shown:w,presentation:$,overlaying:_,overlayLive:p,peeking:J,ready:W,breakpoint:j,autoTable:N,setValue:d,toggle:y,defaultHereNow:U,setElement:R}}function yt(e,t){let{state:n,value:r,presentation:o,shown:a}=e;return{...t,"data-state":n,...n==="auto"?Fe("auto",e.autoTable):{},"data-presentation":o,"data-mode":r===void 0?void 0:r==="closed"?"collapsed":"expanded","data-open":o==="stacked"&&a?"":void 0,"data-peek":e.peeking?"":void 0}}function St(e,t){let n=$e(e),r=E.useMemo(()=>me(e,()=>t),[n,t]),o=E.useMemo(()=>le(r)===void 0?Fe("presentation",r):{},[r]);return{table:r,attributes:o}}var S=D(require("react")),ue=require("radix-ui/internal");function ht(e,t="horizontal"){if(e==null)return;if(typeof e=="number"&&Number.isFinite(e))return e;let n=String(e).trim();if(!n)return;if(n.endsWith("px"))return Number.parseFloat(n);if(n.endsWith("rem")){let o=Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16")||16;return Number.parseFloat(n)*o}if(n.endsWith("%")){let o=Number.parseFloat(n),a=t==="horizontal"?document.documentElement.clientWidth||window.innerWidth||0:document.documentElement.clientHeight||window.innerHeight||0;return o/100*a}let r=Number.parseFloat(n);return Number.isFinite(r)?r:void 0}var Ce=(e,t,n)=>Math.max(t??e,Math.min(n??e,e));function vt(e,t,n,r){let[o]=S.useState(()=>{let a=e??t;return typeof a=="number"&&Number.isFinite(a)?`${Ce(a,n,r)}px`:void 0});return o}function Rt(e){let{name:t,elementRef:n,cssVarName:r,orientation:o,minSize:a,maxSize:i,resizable:c,size:l,defaultSize:s,paneId:u,persistence:b}=e,f=S.useRef(e);(0,ue.useLayoutEffect)(()=>{f.current=e});let k=S.useRef(null),F=S.useRef(0);S.useEffect(()=>()=>{k.current&&clearTimeout(k.current)},[]);let B=S.useCallback((p,P)=>{let{onSizeChange:T,sizeUpdate:C,sizeUpdateMs:U}=f.current;if(T){if(C==="debounce"){k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{k.current=null,f.current.onSizeChange?.(p,P)},U);return}if(C==="throttle"){let d=Date.now();if(d-F.current<U)return;F.current=d}T(p,P)}},[]),N=S.useCallback(p=>ht(p,o==="vertical"?"horizontal":"vertical"),[o]),x=S.useRef(!1),V=S.useCallback((p,P)=>{let T=n.current;if(T){T.style.setProperty(r,`${p}px`);for(let C of T.querySelectorAll(":scope > .kui-ShellResizer"))C.setAttribute("aria-valuenow",String(Math.round(p)));P&&(x.current=!0)}},[n,r]);(0,ue.useLayoutEffect)(()=>{x.current||V(e.expandedSize,!1)},[e.expandedSize,V]),(0,ue.useLayoutEffect)(()=>{if(l!==void 0||s===void 0)return;let p=N(s);if(typeof p!="number"||!Number.isFinite(p))return;let P=Ce(p,a,i);V(P,!0),B(P,{reason:"init"})},[]),(0,ue.useLayoutEffect)(()=>{if(l===void 0||f.current.overlayingNow())return;let p=N(l);if(typeof p!="number"||!Number.isFinite(p))return;let P=Ce(p,a,i);V(P,!0),B(P,{reason:"controlled"})},[l,a,i,e.overlaying,N,V,B]);let j=b!==void 0,W=S.useMemo(()=>{if(j)return{load:()=>f.current.persistence?.load?.(),save:P=>f.current.persistence?.save?.(P)};if(!u)return;let p=`kookie-ui:shell:${t}:${u}`;return{load:()=>{if(!(typeof window>"u"))try{let P=window.localStorage.getItem(p);return P?Number(P):void 0}catch{return}},save:P=>{if(!(typeof window>"u"))try{window.localStorage.setItem(p,String(P))}catch{}}}},[t,u,j]);(0,ue.useLayoutEffect)(()=>{if(!c||!W?.load||f.current.overlayingNow())return;let p=!0,P=C=>{if(!p||typeof C!="number"||!Number.isFinite(C))return;let U=Ce(C,a,i);V(U,!0),f.current.onResize?.(U)},T=W.load();return T instanceof Promise?T.then(P).catch(C=>{}):P(T),()=>{p=!1}},[c,W,e.overlaying,V,a,i,t]);let te=S.useCallback(p=>f.current.onResize?.(p),[]),H=S.useCallback(p=>{x.current=!0,f.current.onResizeStart?.(p)},[]),$=S.useCallback(p=>{f.current.onResizeEnd?.(p),B(p,{reason:"resize"}),W?.save?.(p)},[B,W]),_=S.useCallback(()=>f.current.requestCollapse(),[]),w=S.useCallback(()=>f.current.requestToggle(),[]);return S.useMemo(()=>({containerRef:n,controls:e.elementId,cssVarName:r,minSize:a,maxSize:i,defaultSize:e.expandedSize,orientation:o,edge:e.edge,growth:e.growth,onResize:te,onResizeStart:H,onResizeEnd:$,target:t,collapsible:e.collapsible,snapPoints:e.snapPoints,snapTolerance:e.snapTolerance??8,collapseThreshold:e.collapseThreshold,requestCollapse:_,requestToggle:w}),[n,e.elementId,r,a,i,e.expandedSize,o,e.edge,e.growth,te,H,$,t,e.collapsible,e.snapPoints,e.snapTolerance,e.collapseThreshold,_,w])}function xt(e,t){let n=S.Children.toArray(e),r=n.filter(a=>S.isValidElement(a)&&a.type===t),o=n.filter(a=>!(S.isValidElement(a)&&a.type===t));return{handles:r,content:o}}var Ct=e=>e==="overlay"?"closed":"open";var Et=e=>e?-1:1;function wt(e){if(!("height"in e)&&!("resizer"in e))return e;let{height:t,resizer:n,...r}=e;return r}var g=D(require("react")),ge=D(require("classnames"));var M=D(require("react")),$t=D(require("classnames")),ne=require("radix-ui"),It=require("radix-ui/internal");var Tt={asChild:{type:"boolean"}};var Cn=["none","small","medium","large","full"],zt={radius:{type:"enum",values:Cn,default:void 0}};var En=["vertical","horizontal","both"],Ee={...Tt,...zt,scrollbars:{type:"enum",values:En,default:"both"},fade:{type:"boolean",default:!1}};var we=D(require("react"));function We(e){let t=getComputedStyle(e);return{x:t.overflowX==="hidden"?0:Math.max(0,e.scrollWidth-e.clientWidth),y:t.overflowY==="hidden"?0:Math.max(0,e.scrollHeight-e.clientHeight)}}function kt(e){let[t,n]=we.useState(null);return we.useEffect(()=>{if(!e||!t)return;let r=0,o=()=>{r=0;let l=We(t),s=Math.max(0,t.scrollTop),u=Math.max(0,l.y-t.scrollTop);t.style.setProperty("--scroll-overflow-start",`${s}px`),t.style.setProperty("--scroll-overflow-end",`${u}px`);let b=Math.abs(t.scrollLeft),f=Math.max(0,l.x-b);t.style.setProperty("--scroll-overflow-x-start",`${b}px`),t.style.setProperty("--scroll-overflow-x-end",`${f}px`)},a=()=>{r||(r=requestAnimationFrame(o))};o(),t.addEventListener("scroll",a,{passive:!0});let i=typeof ResizeObserver>"u"?null:new ResizeObserver(a);i?.observe(t);for(let l of Array.from(t.children))i?.observe(l);let c=typeof MutationObserver>"u"?null:new MutationObserver(a);return c?.observe(t,{childList:!0}),()=>{r&&cancelAnimationFrame(r),t.removeEventListener("scroll",a),i?.disconnect(),c?.disconnect(),t.style.removeProperty("--scroll-overflow-start"),t.style.removeProperty("--scroll-overflow-end"),t.style.removeProperty("--scroll-overflow-x-start"),t.style.removeProperty("--scroll-overflow-x-end")}},[e,t]),n}var Te=D(require("react"));function Dt(){let[e,t]=Te.useState(null);return Te.useEffect(()=>{let n=e?.parentElement;if(!e||!n)return;let r=0,o=()=>{r=0;for(let i of n.querySelectorAll(":scope > .kui-ScrollAreaScrollbar > .kui-ScrollAreaThumb")){let c=i.parentElement,l=getComputedStyle(c);if(c.dataset.orientation==="horizontal"){let s=c.clientWidth-parseFloat(l.paddingLeft)-parseFloat(l.paddingRight),u=Nt(e.scrollLeft,e.scrollWidth-e.offsetWidth,s-i.offsetWidth);i.style.transform=`translate3d(${u}px, 0, 0)`}else{let s=c.clientHeight-parseFloat(l.paddingTop)-parseFloat(l.paddingBottom),u=Nt(e.scrollTop,e.scrollHeight-e.offsetHeight,s-i.offsetHeight);i.style.transform=`translate3d(0, ${u}px, 0)`}}},a=()=>{r||(r=requestAnimationFrame(o))};return e.addEventListener("scroll",a,{passive:!0}),()=>{r&&cancelAnimationFrame(r),e.removeEventListener("scroll",a)}},[e]),t}function Nt(e,t,n){return t<=0||n<=0?0:Math.min(Math.max(e,-t),t)/t*n}var ze=D(require("react"));function Vt(e,t){let{asChild:n,children:r}=e;if(!n)return typeof t=="function"?t(r):t;let o=ze.Children.only(r);return ze.cloneElement(o,{children:typeof t=="function"?t(o.props.children):t})}var Bt=D(require("classnames"));var wn=[],Tn=new Set;function zn(e){let t=Object.assign({},...e),n=[],r=[],o=new Set;for(let a in t){let i=t[a],c=i.values??wn,l={key:a,type:i.type,default:i.default,hasDefault:i.default!==void 0,responsive:"responsive"in i,className:i.className,customProperties:i.customProperties,parseValue:i.parseValue,values:c,valueSet:c.length>0?new Set(c):Tn,enumValueSet:i.type==="enum"?new Set([i.default,...c]):void 0};i.className?(n.push(l),o.add(a)):(l.hasDefault||i.type==="enum")&&r.push(l)}return{styling:n,passthrough:r,stylingKeys:o}}var kn={children:new WeakMap};function Lt(e){let t=kn;for(let n=0;n<e.length;n++){let r=e[n],o=t.children.get(r);o===void 0&&(o={children:new WeakMap},t.children.set(r,o)),t=o}return t.compiled??(t.compiled=zn(e))}var Nn=["initial","xs","sm","md","lg","xl"],Ue=new Set(Nn);function qe(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var Dn=new Set(["initial","xs","sm","md","lg","xl"]);function ae(e){if(typeof e!="object"||e===null)return!1;for(let t in e)if(Dn.has(t))return!0;return!1}function ke(e,t,n){return t!==void 0?t.has(n):e.includes(n)}function At({className:e,customProperties:t,...n}){let r=Ke({allowArbitraryValues:!0,className:e,...n}),o=Vn({customProperties:t,...n});return[r,o]}function Ke({allowArbitraryValues:e,value:t,className:n,propValues:r,propValueSet:o,parseValue:a=i=>i}){if(t){if(typeof t=="string")return ke(r,o,t)?Mt(n,t,a):e?n:void 0;if(ae(t)){let i=t,c=[];for(let l in i){if(!qe(i,l)||!Ue.has(l))continue;let s=i[l];if(s!==void 0){if(ke(r,o,s)){let u=Mt(n,s,a),b=l==="initial"?u:`${l}:${u}`;c.push(b)}else if(e){let u=l==="initial"?n:`${l}:${n}`;c.push(u)}}}return c.length>0?c.join(" "):""}if(e)return n}}function Mt(e,t,n){let r=e?"-":"",o=n(t),a=o?.startsWith("-"),i=a?"-":"",c=a?o?.substring(1):o;return`${i}${e}${r}${c}`}function Vn({customProperties:e,value:t,propValues:n,propValueSet:r,parseValue:o=a=>a}){if(!t||typeof t=="string"&&ke(n,r,t))return;let a;if(typeof t=="string"){let i=o(t);a={};for(let c of e)a[c]=i;return a}if(ae(t)){let i=t;for(let c in i){if(!qe(i,c)||!Ue.has(c))continue;let l=i[c];if(l===void 0||ke(n,r,l))continue;let s=o(l);a??(a={});for(let u of e){let b=c==="initial"?u:`${u}-${c}`;a[b]=s}}}return a??{}}function _e(...e){let t;for(let n of e)n&&(t===void 0&&(t={}),Object.assign(t,n));return t}function Ln(e,t){let n=e.initial,r=!1;return t.hasDefault&&n===void 0&&(n=t.default,r=!0),t.enumValueSet!==void 0&&!t.enumValueSet.has(n)&&(n=t.default,r=!0),r?{...e,initial:n}:e}function Ht(e,...t){let{styling:n,passthrough:r,stylingKeys:o}=Lt(t),a={};for(let l in e)o.has(l)||(a[l]=e[l]);for(let l=0;l<r.length;l++){let s=r[l],u=a[s.key];if(u===void 0){s.hasDefault&&(a[s.key]=s.default);continue}s.enumValueSet!==void 0&&!s.enumValueSet.has(u)&&!ae(u)&&(a[s.key]=s.default)}let i,c=[];for(let l=0;l<n.length;l++){let s=n[l],u=e[s.key];if(u===void 0&&s.hasDefault&&(u=s.default),s.enumValueSet!==void 0&&!s.enumValueSet.has(u)&&!ae(u)&&(u=s.default),!!u){if(ae(u)){if(!s.responsive)continue;u=Ln(u,s)}if(s.type==="enum"){let b=Ke({allowArbitraryValues:!1,value:u,className:s.className,propValues:s.values,propValueSet:s.valueSet,parseValue:s.parseValue});b&&c.push(b);continue}if(s.type==="string"||s.type==="enum | string"){let[b,f]=At({className:s.className,customProperties:s.customProperties,propValues:s.type==="string"?[]:s.values,propValueSet:s.type==="string"?void 0:s.valueSet,parseValue:s.parseValue,value:u});f&&(i=_e(i,f)),b&&c.push(b);continue}if(s.type==="boolean"){c.push(s.className);continue}}}return a.className=(0,Bt.default)(c.length>0?c.join(" "):void 0,e.className),a.style=_e(i,e.style),a}var Ot={width:{type:"string",className:"kui-r-w",customProperties:["--width"],responsive:!0},minWidth:{type:"string",className:"kui-r-min-w",customProperties:["--min-width"],responsive:!0},maxWidth:{type:"string",className:"kui-r-max-w",customProperties:["--max-width"],responsive:!0}};var Ft={height:{type:"string",className:"kui-r-h",customProperties:["--height"],responsive:!0},minHeight:{type:"string",className:"kui-r-min-h",customProperties:["--min-height"],responsive:!0},maxHeight:{type:"string",className:"kui-r-max-h",customProperties:["--max-height"],responsive:!0}};var Mn='[role="menu"], [role="listbox"]';function An(e,t){M.useEffect(()=>{if(!t||!e||e.closest(Mn))return;let n=0,r=()=>{n=0;let i=We(e);i.x>0||i.y>0?e.setAttribute("tabindex","0"):e.removeAttribute("tabindex")},o=()=>{n||(n=requestAnimationFrame(r))};r();let a=typeof ResizeObserver>"u"?null:new ResizeObserver(o);a?.observe(e);for(let i of Array.from(e.children))a?.observe(i);return()=>{n&&cancelAnimationFrame(n),a?.disconnect()}},[e,t])}var Ne=M.forwardRef((e,t)=>{let{asChild:n,children:r,className:o,style:a,type:i,scrollHideDelay:c=i!=="scroll"?0:void 0,dir:l,radius:s=Ee.radius.default,scrollbars:u=Ee.scrollbars.default,fade:b=Ee.fade.default,...f}=Ht(e,Ot,Ft),[k,F]=M.useState(null),B=kt(b),N=Dt(),x=(0,It.useComposedRefs)(t,B,N,F);An(k,f.tabIndex===void 0);let V=f["aria-label"]!==void 0||f["aria-labelledby"]!==void 0;return M.createElement(ne.ScrollArea.Root,{type:i,scrollHideDelay:c,dir:l,className:(0,$t.default)("kui-ScrollAreaRoot",o),"data-fade":b?"":void 0,style:a,asChild:n},Vt({asChild:n,children:r},j=>M.createElement(M.Fragment,null,M.createElement(ne.ScrollArea.Viewport,{role:V?"region":void 0,...f,ref:x,className:"kui-ScrollAreaViewport"},j),M.createElement("div",{className:"kui-ScrollAreaViewportFocusRing"}),u!=="vertical"?M.createElement(ne.ScrollArea.Scrollbar,{"data-radius":s,orientation:"horizontal",className:"kui-ScrollAreaScrollbar"},M.createElement(ne.ScrollArea.Thumb,{className:"kui-ScrollAreaThumb"})):null,u!=="horizontal"?M.createElement(ne.ScrollArea.Scrollbar,{"data-radius":s,orientation:"vertical",className:"kui-ScrollAreaScrollbar"},M.createElement(ne.ScrollArea.Thumb,{className:"kui-ScrollAreaThumb"})):null,u==="both"?M.createElement(ne.ScrollArea.Corner,{className:"kui-ScrollAreaCorner"}):null)))});Ne.displayName="ScrollArea";var jt=D(require("react")),De=jt.createContext(void 0);var Ut=D(require("react")),Bn="(max-width: 767.98px) and (pointer: coarse)",Wt,qt=()=>Wt??(Wt=window.matchMedia(Bn));function Hn(e,t){return typeof e.addEventListener=="function"?(e.addEventListener("change",t),()=>e.removeEventListener("change",t)):(e.addListener?.(t),()=>e.removeListener?.(t))}function On(e){return Hn(qt(),e)}function Kt(){return Ut.useSyncExternalStore(On,()=>qt().matches,()=>!1)}var _t=g.createContext(null);function Ge(){return g.useContext(_t)}var Qe=g.createContext("2"),Fn=g.createContext(!1),$n=g.createContext(!1);function Gt({children:e,presentation:t}){let n=g.useContext(Qe),r=g.useMemo(()=>({size:n,menuVariant:"soft",presentation:t}),[n,t]);return g.createElement(_t.Provider,{value:r},e)}function Ye(){let e=Ge(),t=g.useContext(Qe),n=e?.size??t,r=e?.menuVariant??"soft";return["kui-ShellPaneChrome",`kui-r-size-${n}`,`kui-menu-variant-${r}`]}var In={1:"2",2:"3",3:"4",4:"4"};function Qt(){let e=Ge(),t=g.useContext(Qe);return In[e?.size??t]}var jn=g.forwardRef(({className:e,float:t,children:n,...r},o)=>{let a=Ye(),i=Qt();return g.createElement("div",{...r,ref:o,"data-float":t||void 0,className:(0,ge.default)("kui-ShellPaneHeader","kui-SidebarHeader","kui-SidebarHeader--container",...a,e)},g.createElement(De.Provider,{value:i},n))});jn.displayName="Shell.PaneHeader";var Wn=g.forwardRef(({className:e,float:t,children:n,...r},o)=>{let a=Ye(),i=Qt();return g.createElement("div",{...r,ref:o,"data-float":t||void 0,className:(0,ge.default)("kui-ShellPaneFooter","kui-SidebarFooter","kui-SidebarFooter--container",...a,e)},g.createElement(De.Provider,{value:i},n))});Wn.displayName="Shell.PaneFooter";var Un=g.forwardRef(({className:e,style:t,dir:n,children:r,fade:o=!1,pane:a=!1,...i},c)=>{let l=Ye(),s=g.useContext(Fn),u=Ge(),b=s&&u===null&&!a,f=g.useContext($n),k=Kt();if(b){let F=i.tabIndex??(f&&k?-1:void 0);return g.createElement(Ne,{...i,tabIndex:F,ref:c,type:"hover",fade:o,className:"kui-ShellScroll"},g.createElement("div",{style:t,dir:n,className:(0,ge.default)("kui-ShellScrollContent",e)},r))}return g.createElement(Ne,{...i,ref:c,type:"hover",fade:o,className:"kui-ShellScroll"},g.createElement("div",{style:t,dir:n,className:(0,ge.default)("kui-BaseMenuContent","kui-SidebarContent",...l,e)},g.createElement(De.Provider,{value:null},g.createElement("div",{className:"kui-BaseMenuViewport"},r))))});Un.displayName="Shell.Scroll";var X=D(require("react")),qn=X.createContext(null);function Yt({children:e}){let t=X.useMemo(()=>({title:null,mirrors:new Set,collapsed:!1,listeners:new Set,version:0}),[]);return X.createElement(qn.Provider,{value:t},e)}var Xt=e=>e==="collapsed"?"closed":"open",Kn=e=>e==="closed"?"collapsed":"expanded";function Jt(e){if(e===void 0)return;if(typeof e=="string")return Xt(e);let t={};for(let[n,r]of Object.entries(e))r!==void 0&&(t[n]=Xt(r));return t}var _n={controlled:"state",default:"defaultState"},Gn={initial:"overlay",sm:"fixed"},Xe=q.forwardRef((e,t)=>{let{className:n,presentation:r=Gn,expandedSize:o=288,minSize:a=200,maxSize:i=400,resizable:c=!1,collapsible:l=!0,onExpand:s,onCollapse:u,onResize:b,onResizeStart:f,onResizeEnd:k,snapPoints:F,snapTolerance:B,collapseThreshold:N,paneId:x,persistence:V,children:j,style:W,state:te,defaultState:H,onStateChange:$,size:_,defaultSize:w,onSizeChange:p,sizeUpdate:P,sizeUpdateMs:T=50,flush:C=!0,id:U,...d}=e,{table:y,attributes:h}=St(r,"fixed"),R=bt({name:"sidebar",label:"Sidebar",propNames:_n,id:U,controlled:Jt(te),defaultValue:Jt(H),presentationTable:y,builtIn:Ct,onChange:(Ve,Le)=>$?.(Kn(Ve),{reason:Le}),onExpand:s,onCollapse:u,size:o});gt("sidebar",C),q.useEffect(()=>{(F!==void 0||N!==void 0||x!==void 0||V!==void 0)&&void 0},[F,N,x,V]);let O=q.useRef(null),A=(0,en.useComposedRefs)(t,R.setElement,O),v=Rt({name:"sidebar",elementId:R.id,elementRef:O,cssVarName:"--sidebar-size",orientation:"vertical",edge:"end",growth:Et,expandedSize:o,minSize:a,maxSize:i,resizable:c,collapsible:l,size:_,defaultSize:w,onSizeChange:p,sizeUpdate:P,sizeUpdateMs:T,onResize:b,onResizeStart:f,onResizeEnd:k,snapPoints:F,snapTolerance:B,collapseThreshold:N,paneId:x,persistence:V,overlaying:R.overlaying,overlayingNow:()=>y[fe()]==="overlay",requestCollapse:()=>R.setValue("closed","toggle"),requestToggle:()=>R.toggle("toggle")}),{handles:J,content:m}=xt(j,he),K=c&&R.value!=="closed"&&!R.overlaying?q.createElement(Be.Provider,{value:v},J.length>0?J:q.createElement(oe,null)):null,G=R.peeking?`var(--sidebar-size, ${o}px)`:void 0,Q=vt(_,w,a,i);return q.createElement("div",{...wt(d),role:d.role??"navigation",id:R.id,ref:A,className:(0,Zt.default)("kui-ShellPane","kui-ShellSidebar",n),...yt(R,h),"data-flush":C||void 0,tabIndex:R.overlaying?-1:d.tabIndex,style:{...W,"--sidebar-expanded-size":`${o}px`,...Q?{"--sidebar-size":Q}:{},"--sidebar-min-size":`${a}px`,"--sidebar-max-size":`${i}px`,...G?{"--peek-sidebar-width":G}:{}}},q.createElement("div",{className:"kui-ShellSidebarContent"},q.createElement(Gt,null,q.createElement(Yt,null,m))),K)});Xe.displayName="Shell.Sidebar";Xe.Handle=he;
 //# sourceMappingURL=shell-sidebar.js.map