@adea-ai/ui 0.106.2 → 0.108.0

package/dist/r/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -0,0 +1,180 @@
+import type { Accessor, JSX } from 'solid-js'
+import { Show, createSignal, createUniqueId, onCleanup, onMount } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { Sheet, SheetContent, SheetTitle } from '../../ui/sheet'
+import {
+  SidebarNav,
+  SidebarNavContent,
+  SidebarNavFooter,
+  SidebarNavHeader,
+  SidebarNavTitle,
+} from '../sidebar-nav/sidebar-nav'
+import { PixelResizeHandle } from '../pixel-resize-handle/pixel-resize-handle'
+
+export type ContextualSidebarRenderContext = {
+  /** Whether the slot is being rendered inside the modal mobile sheet. */
+  mobile: boolean
+  /** Mount nested popovers and menus inside the mobile dialog's accessibility tree. */
+  portalMount(): HTMLElement | undefined
+}
+
+export type ContextualSidebarProps = {
+  /** Stable host id prefix; generated when omitted. */
+  id?: string
+  /** Landmark name shared by the desktop and mobile navigation. */
+  label: string
+  /** Visible navigation title and mobile dialog title. */
+  title: string
+  /** Host-controlled expanded state for the desktop panel and mobile dialog. */
+  open: boolean
+  onOpenChange(open: boolean): void
+  /** Current host-owned pixel width, reflected by the resize handle. */
+  width: number
+  minimum: number
+  maximum: number
+  step?: number
+  /** Pass the host's initial viewport seed to distinguish stale desktop state. */
+  wideViewportAtLoad?: boolean
+  resizeLabel?: string
+  /** Stable external opener used when the modal mobile sheet closes. */
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+  /** Called with the nav node so a host can project width onto its layout root. */
+  onSidebarElement?: (element: HTMLElement | undefined, mobile: boolean) => void
+  /** Host-owned layout classes applied to both nav instances. */
+  sidebarClass?: string
+  /** Host-owned responsive constraints for the modal sheet. */
+  sheetClass?: string
+  headerClass?: string
+  contentClass?: string
+  footerClass?: string
+  headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  /** Optional action/content slot alongside the shared heading. */
+  header?(context: ContextualSidebarRenderContext): JSX.Element
+  /** View-specific navigation rows, projects, rooms, files, or sessions. */
+  content(context: ContextualSidebarRenderContext): JSX.Element
+  /** Optional view-specific footer, such as an archive affordance. */
+  footer?(context: ContextualSidebarRenderContext): JSX.Element
+  onWidthChange(width: number): void
+  onWidthCommit?(width: number): void
+}
+
+/**
+ * ContextualSidebar.
+ *
+ * Shared navigation geometry and interaction policy for an application's
+ * contextual sidebar. The host keeps ownership of the actual grid width,
+ * persisted preference, open state, and view-specific navigation content.
+ */
+export function ContextualSidebar(props: ContextualSidebarProps) {
+  const [isNarrowViewport, setIsNarrowViewport] = createSignal(false)
+  const [mobileMount, setMobileMount] = createSignal<
+    { element: HTMLElement; connected: boolean } | undefined
+  >()
+  const id = props.id ?? `contextual-sidebar-${createUniqueId()}`
+  const resizeLabel = () => props.resizeLabel ?? `Resize ${props.label}`
+  const portalMount = () => {
+    const mount = mobileMount()
+    return mount?.connected && mount.element.isConnected ? mount.element : undefined
+  }
+
+  onMount(() => {
+    const media = window.matchMedia('(max-width: 48rem)')
+    const updateViewport = () => {
+      const wasNarrow = isNarrowViewport()
+      // Close before mounting a modal. A desktop-expanded host state is not
+      // mobile intent, and opening the Sheet for one frame can steal focus.
+      if (media.matches && !wasNarrow) props.onOpenChange(false)
+      setIsNarrowViewport(media.matches)
+    }
+
+    // A route can mount after a wide-loaded host crosses into mobile. Clear
+    // that stale seed, but preserve a sidebar intentionally opened at a
+    // narrow boot viewport.
+    if (media.matches && props.wideViewportAtLoad && props.open) props.onOpenChange(false)
+    setIsNarrowViewport(media.matches)
+    media.addEventListener('change', updateViewport)
+    onCleanup(() => media.removeEventListener('change', updateViewport))
+  })
+
+  const renderSidebar = (mobile: boolean) => {
+    let element: HTMLElement | undefined
+    const context: ContextualSidebarRenderContext = {
+      mobile,
+      portalMount: () => (mobile ? portalMount() : undefined),
+    }
+    const navigationId = `${id}-${mobile ? 'mobile' : 'desktop'}`
+
+    onCleanup(() => {
+      if (mobile && mobileMount()?.element === element) setMobileMount(undefined)
+      element = undefined
+      props.onSidebarElement?.(undefined, mobile)
+    })
+
+    return (
+      <SidebarNav
+        as="aside"
+        id={navigationId}
+        aria-label={props.label}
+        aria-hidden={!mobile && !props.open ? 'true' : undefined}
+        inert={!mobile && !props.open}
+        data-contextual-sidebar={mobile ? 'mobile' : 'desktop'}
+        data-open={mobile ? undefined : String(props.open)}
+        ref={(node) => {
+          element = node
+          if (mobile) {
+            setMobileMount({ element: node, connected: node.isConnected })
+            queueMicrotask(() => {
+              if (node.isConnected && mobileMount()?.element === node)
+                setMobileMount({ element: node, connected: true })
+            })
+          }
+          props.onSidebarElement?.(node, mobile)
+        }}
+        class={cn('relative h-full w-full max-w-full', props.sidebarClass)}
+      >
+        <Show when={!mobile && props.open}>
+          <PixelResizeHandle
+            side="left"
+            value={props.width}
+            minimum={props.minimum}
+            maximum={props.maximum}
+            step={props.step}
+            label={resizeLabel()}
+            controls={navigationId}
+            onChange={props.onWidthChange}
+            onCommit={props.onWidthCommit}
+          />
+        </Show>
+        <Show when={!mobile || mobileMount()?.connected}>
+          <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
+            <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
+            {props.header?.(context)}
+          </SidebarNavHeader>
+          <SidebarNavContent class={props.contentClass}>{props.content(context)}</SidebarNavContent>
+          {props.footer ? (
+            <SidebarNavFooter class={props.footerClass}>{props.footer(context)}</SidebarNavFooter>
+          ) : null}
+        </Show>
+      </SidebarNav>
+    )
+  }
+
+  return (
+    <Sheet
+      open={isNarrowViewport() && props.open}
+      onOpenChange={(open) => props.onOpenChange(open)}
+    >
+      <Show when={!isNarrowViewport()}>{(_wide) => renderSidebar(false)}</Show>
+      <Show when={isNarrowViewport()}>
+        <SheetContent
+          side="start"
+          class={cn('gap-0 p-0', props.sheetClass)}
+          restoreFocusRef={props.restoreFocusRef}
+        >
+          <SheetTitle class="sr-only">{props.title} navigation</SheetTitle>
+          {renderSidebar(true)}
+        </SheetContent>
+      </Show>
+    </Sheet>
+  )
+}

package/dist/r/src/components/layout/contextual-sidebar/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContextualSidebar,
+  type ContextualSidebarProps,
+  type ContextualSidebarRenderContext,
+} from './contextual-sidebar'
+export { PixelResizeHandle, type PixelResizeHandleProps } from '../pixel-resize-handle'

package/dist/r/src/components/layout/pixel-resize-handle/index.ts

@@ -0,0 +1 @@
+export { PixelResizeHandle, type PixelResizeHandleProps } from './pixel-resize-handle'

package/dist/r/src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx

@@ -0,0 +1,177 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../ui/resizable'
+import { createSignal, onCleanup } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+export type PixelResizeHandleProps = {
+  /** Which physical edge of the ruler the resizable surface is attached to. */
+  side: 'left' | 'right'
+  /** Current width in CSS pixels. */
+  value: number
+  minimum: number
+  maximum: number
+  step?: number
+  label?: string
+  controls?: string
+  class?: string
+  onChange(value: number): void
+  onCommit?(value: number): void
+}
+
+/**
+ * PixelResizeHandle.
+ *
+ * A keyboard- and pointer-operable edge ruler for a host-owned pane. Keep the
+ * pane's actual width and any persistence in its layout owner; this component
+ * reports a bounded pixel value and places the shared resizable grip at the
+ * matching left or right edge.
+ *
+ * Corvu 0.2.5 supplies geometry, keyboard resizing, ARIA and the shared grip,
+ * but its global drag handler does not end on pointer cancellation. Prevent
+ * that handler through its public start hook and use local pointer capture
+ * for bounded pixel gestures, including cancellation and lost capture.
+ */
+export function PixelResizeHandle(props: PixelResizeHandleProps) {
+  const maximum = () => Math.max(1, props.maximum)
+  const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))
+  const value = () => Math.min(maximum(), Math.max(minimum(), Math.round(props.value)))
+  const ratio = () => value() / maximum()
+  const isRight = () => props.side === 'right'
+  const rulerSizes = () => (isRight() ? [1 - ratio(), ratio()] : [ratio(), 1 - ratio()])
+  const commit = () => props.onCommit?.(value())
+  let interacting = false
+  const [drag, setDrag] = createSignal<{
+    pointerId: number
+    startX: number
+    startValue: number
+    handle: HTMLElement
+  }>()
+  const endPointer = (shouldCommit: boolean) => {
+    const current = drag()
+    if (!current) return
+    setDrag(undefined)
+    if (current.handle.hasPointerCapture(current.pointerId))
+      current.handle.releasePointerCapture(current.pointerId)
+    if (shouldCommit) commit()
+  }
+  const endKeyboard = () => {
+    const wasInteracting = interacting
+    interacting = false
+    if (wasInteracting) commit()
+  }
+  onCleanup(() => {
+    endKeyboard()
+    endPointer(false)
+  })
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      dir="ltr"
+      sizes={rulerSizes()}
+      keyboardDelta={`${props.step ?? 16}px`}
+      style={{ width: `${maximum()}px` }}
+      class={cn(
+        'pointer-events-none absolute inset-y-0 flex',
+        {
+          'left-0': props.side === 'left',
+          'right-0': props.side === 'right',
+        },
+        props.class
+      )}
+      onSizesChange={(sizes) => {
+        // Panel registration and teardown also emit sizes. Only user resizing
+        // may update the host preference; collapsing must preserve its width.
+        if (!interacting || sizes.length !== 2) return
+        const next = Math.round((sizes[isRight() ? 1 : 0] ?? ratio()) * maximum())
+        const bounded = Math.min(maximum(), Math.max(minimum(), next))
+        if (bounded !== value()) props.onChange(bounded)
+      }}
+    >
+      <ResizablePanel
+        minSize={isRight() ? 0 : minimum() / maximum()}
+        maxSize={1}
+        aria-hidden="true"
+      />
+      <ResizableHandle
+        withHandle
+        label={props.label ?? `Resize ${props.side} pane`}
+        aria-controls={props.controls}
+        aria-valuemin={minimum()}
+        aria-valuemax={maximum()}
+        aria-valuenow={value()}
+        aria-valuetext={`${value()} pixels`}
+        data-dragging={drag() ? '' : undefined}
+        onHandleDragStart={(event) => {
+          // Corvu checks defaultPrevented before starting its global handler.
+          event.preventDefault()
+          if (event.button !== 0 || !event.isPrimary) return
+          const handle = event.currentTarget
+          if (!(handle instanceof HTMLElement)) return
+          endPointer(false)
+          interacting = false
+          handle.focus()
+          handle.setPointerCapture(event.pointerId)
+          setDrag({
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startValue: value(),
+            handle,
+          })
+        }}
+        onPointerMove={(event: PointerEvent) => {
+          const current = drag()
+          if (!current || event.pointerId !== current.pointerId) return
+          if (!current.handle.hasPointerCapture(current.pointerId)) {
+            endPointer(false)
+            return
+          }
+          const delta = (event.clientX - current.startX) * (isRight() ? -1 : 1)
+          const next = Math.min(
+            maximum(),
+            Math.max(minimum(), Math.round(current.startValue + delta))
+          )
+          if (next !== value()) props.onChange(next)
+        }}
+        onPointerUp={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(true)
+        }}
+        onPointerCancel={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(false)
+        }}
+        onLostPointerCapture={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(false)
+        }}
+        onBlur={() => {
+          endKeyboard()
+          endPointer(false)
+        }}
+        onKeyDown={(event) => {
+          const current = drag()
+          if (current && !current.handle.hasPointerCapture(current.pointerId)) endPointer(false)
+          if (drag()) {
+            event.preventDefault()
+            return
+          }
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) interacting = true
+          // Corvu operates on physical panel order. Home/End here describe
+          // the controlled pane width, including a pane after the separator.
+          if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault()
+            props.onChange(event.key === 'Home' ? minimum() : maximum())
+          }
+        }}
+        onKeyUp={(event) => {
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+            endKeyboard()
+          }
+        }}
+        class="pointer-events-auto"
+      />
+      <ResizablePanel
+        minSize={isRight() ? minimum() / maximum() : 0}
+        maxSize={1}
+        aria-hidden="true"
+      />
+    </ResizablePanelGroup>
+  )
+}

package/dist/r/src/components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx

@@ -1,59 +1,11 @@
-import Resizable from '@corvu/resizable'
-import { cn } from '../../../lib/utils'
+import {
+  PixelResizeHandle,
+  type PixelResizeHandleProps,
+} from '../pixel-resize-handle/pixel-resize-handle'
 
-export type SidebarNavResizeHandleProps = {
-  value: number
-  minimum: number
-  maximum: number
-  step?: number
-  label?: string
-  controls?: string
-  class?: string
-  onChange(value: number): void
-  onCommit?(value: number): void
-}
+export type SidebarNavResizeHandleProps = Omit<PixelResizeHandleProps, 'side'>
 
-/**
- * Resize a contextual sidebar without making its host recreate a separator
- * widget. Corvu owns pointer capture, cancellation, constraints, keyboard
- * movement and cleanup. Its two invisible panels provide a bounded pixel
- * ruler; the host retains the real pane layout and preference persistence.
- * Place this inside the positioned sidebar. The ruler can extend over the
- * adjacent content, but only its handle participates in pointer hit testing.
- */
+/** Keep the established left-sidebar API as a thin adapter over the shared edge ruler. */
 export function SidebarNavResizeHandle(props: SidebarNavResizeHandleProps) {
-  const maximum = () => Math.max(1, props.maximum)
-  const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))
-  const value = () => Math.min(maximum(), Math.max(minimum(), props.value))
-  const commit = () => props.onCommit?.(value())
-
-  return (
-    <Resizable
-      orientation="horizontal"
-      sizes={[value() / maximum(), 1 - value() / maximum()]}
-      keyboardDelta={`${props.step ?? 16}px`}
-      style={{ width: `${maximum()}px` }}
-      class={cn('pointer-events-none absolute inset-y-0 start-0 flex', props.class)}
-      onSizesChange={(sizes) => {
-        const next = Math.round((sizes[0] ?? 0) * maximum())
-        if (next !== value()) props.onChange(Math.min(maximum(), Math.max(minimum(), next)))
-      }}
-    >
-      <Resizable.Panel minSize={minimum() / maximum()} maxSize={1} aria-hidden="true" />
-      <Resizable.Handle
-        aria-label={props.label ?? 'Resize navigation'}
-        aria-controls={props.controls}
-        aria-orientation="vertical"
-        aria-valuemin={minimum()}
-        aria-valuemax={maximum()}
-        aria-valuenow={value()}
-        onHandleDragEnd={commit}
-        onKeyUp={(event) => {
-          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) commit()
-        }}
-        class="pointer-events-auto relative z-(--z-docked) w-px -translate-x-full shrink-0 bg-transparent after:absolute after:inset-y-0 after:-inset-x-1 after:w-3 hover:bg-primary focus-visible:bg-primary focus-visible:ring-3 focus-visible:ring-primary-subtle focus-visible:outline-none"
-      />
-      <Resizable.Panel minSize={0} aria-hidden="true" />
-    </Resizable>
-  )
+  return <PixelResizeHandle {...props} side="left" label={props.label ?? 'Resize navigation'} />
 }

package/dist/r/src/components/ui/badge/badge.tsx

@@ -19,11 +19,15 @@ export const badgeVariants = cva(
         default: 'bg-primary text-primary-foreground',
         secondary: 'bg-secondary text-secondary-foreground',
         outline: 'border-border text-foreground',
-        /** Tinted status fills, for counts and states rather than actions. */
-        success: 'bg-success-subtle text-foreground',
-        warning: 'bg-warning-subtle text-foreground',
-        destructive: 'bg-destructive-subtle text-foreground',
-        info: 'bg-info-subtle text-foreground',
+        /**
+         * Tinted status fills, for counts and states rather than actions. The
+         * word stays in `foreground` for contrast; the glyph takes the status
+         * hue, so tags of different tones read apart at a glance.
+         */
+        success: 'bg-success-subtle text-foreground [&_svg]:text-success',
+        warning: 'bg-warning-subtle text-foreground [&_svg]:text-warning',
+        destructive: 'bg-destructive-subtle text-foreground [&_svg]:text-destructive',
+        info: 'bg-info-subtle text-foreground [&_svg]:text-info',
         subtle: 'bg-primary-subtle text-primary',
         /**
          * A count that asks for attention, pinned to a corner of another control

package/dist/r/src/components/ui/combobox/combobox.tsx

@@ -2,7 +2,7 @@ import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'
 import { Check, ChevronDown, X } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
-import { menuContentPadding, menuItem, popoverArrow } from '../../../lib/overlay'
+import { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '../../../lib/overlay'
 import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
@@ -108,6 +108,7 @@ export function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Con
   return (
     <KobalteCombobox.Portal>
       <KobalteCombobox.Content
+        {...topLayerProps}
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
           'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',

package/dist/r/src/components/ui/context-menu/context-menu.tsx

@@ -10,6 +10,7 @@ import {
   menuSeparator,
   overlayMotion,
   overlaySurface,
+  topLayerProps,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
@@ -40,6 +41,7 @@ export function ContextMenuContent(props: ComponentProps<typeof KobalteContextMe
   return (
     <KobalteContextMenu.Portal>
       <KobalteContextMenu.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -174,6 +176,7 @@ export function ContextMenuSubContent(props: ComponentProps<typeof KobalteContex
   return (
     <KobalteContextMenu.Portal>
       <KobalteContextMenu.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -11,6 +11,7 @@ import {
   overlayMotion,
   overlaySurface,
   popoverArrow,
+  topLayerProps,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
@@ -148,6 +149,12 @@ export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdown
     const isNativeLink = trigger instanceof HTMLAnchorElement && trigger.hasAttribute('href')
     if (trigger instanceof HTMLElement && !isNativeLink) {
       trigger.focus({ preventScroll: true })
+      // Focusing first is not enough in WebKit: the press's default mousedown
+      // action runs afterwards and moves focus off a button to the nearest
+      // focusable ancestor — inside a dialog, the dialog — so the menu that
+      // just opened still reads focus leaving it and closes. Cancelling the
+      // default keeps focus where it was put.
+      if (event.pointerType !== 'touch') event.preventDefault()
     }
   }
   const onKeyDown = (event: DropdownMenuTriggerKeyEvent) => {
@@ -196,6 +203,7 @@ export function DropdownMenuContent(props: DropdownMenuContentProps) {
   return (
     <KobalteDropdownMenu.Portal mount={local.portalMount}>
       <KobalteDropdownMenu.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -372,6 +380,7 @@ export function DropdownMenuSubContent(
   return (
     <KobalteDropdownMenu.Portal>
       <KobalteDropdownMenu.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/dist/r/src/components/ui/menubar/menubar.tsx

@@ -11,6 +11,7 @@ import {
   overlayMotion,
   overlaySurface,
   popoverArrow,
+  topLayerProps,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
@@ -71,6 +72,7 @@ export function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Conte
   return (
     <KobalteMenubar.Portal>
       <KobalteMenubar.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,
@@ -201,6 +203,7 @@ export function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.Su
   return (
     <KobalteMenubar.Portal>
       <KobalteMenubar.SubContent
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           overlayMotion,

package/dist/r/src/components/ui/popover/popover.tsx

@@ -1,7 +1,13 @@
 import { Popover as KobaltePopover } from '@kobalte/core/popover'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
-import { menuContentPadding, popoverArrow, popoverMotion, overlaySurface } from '../../../lib/overlay'
+import {
+  menuContentPadding,
+  popoverArrow,
+  popoverMotion,
+  overlaySurface,
+  topLayerProps,
+} from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -39,6 +45,7 @@ export function PopoverContent(props: PopoverContentProps) {
   return (
     <KobaltePopover.Portal>
       <KobaltePopover.Content
+        {...topLayerProps}
         class={cn(
           overlaySurface,
           popoverMotion,

package/dist/r/src/components/ui/resizable/resizable.tsx

@@ -17,7 +17,7 @@ import { cn } from '../../../lib/utils'
  * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.
  */
 /**
- * Whether the group was given `initialSizes`. Those are corvu's to apply, and a
+ * Whether the group was given `initialSizes` or controlled `sizes`. Those are corvu's to apply, and a
  * panel's own `initialSize` overrides them — so an unsized panel must not invent
  * one when the group already has an answer.
  */
@@ -27,7 +27,9 @@ export function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & {
   const [local, rest] = splitProps(props, ['class'])
 
   return (
-    <GroupSizesContext.Provider value={() => rest.initialSizes !== undefined}>
+    <GroupSizesContext.Provider
+      value={() => rest.initialSizes !== undefined || rest.sizes !== undefined}
+    >
       <Resizable
         class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
         {...rest}

package/dist/r/src/components/ui/select/select.tsx

@@ -2,7 +2,7 @@ import { Select as KobalteSelect } from '@kobalte/core/select'
 import { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
-import { menuContentPadding, menuItem, popoverArrow } from '../../../lib/overlay'
+import { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -140,6 +140,7 @@ export function SelectContent(props: SelectContentProps) {
   return (
     <KobalteSelect.Portal mount={local.portalMount}>
       <KobalteSelect.Content
+        {...topLayerProps}
         class={cn(
           'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',
           'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',