@adea-ai/ui 0.107.0 → 0.108.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.107.0",
+  "version": "0.108.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -24,6 +24,7 @@
     "src",
     "!src/**/*.stories.tsx",
     "!src/**/*.stories.ts",
+    "!src/**/*.stories.css",
     "!src/**/*.mdx",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
@@ -112,6 +113,7 @@
     "theme:check": "bun scripts/build-default-theme.ts --check",
     "design-system:build": "bun scripts/design-system/build.ts",
     "check:packed-layout": "node --test scripts/check-packed-layout-process.test.mjs && node scripts/check-packed-layout.mjs && node scripts/check-packed-layout-tree.mjs",
+    "check:packed-lint": "node scripts/check-packed-lint.mjs",
     "check:packed-consumer": "bun scripts/check-packed-consumer.ts",
     "check:packed-list-row": "bun scripts/check-packed-list-row.ts",
     "check:packed-scene-controls": "bun scripts/check-packed-scene-controls.ts",

package/registry.json

@@ -1555,6 +1555,31 @@
         }
       ]
     },
+    {
+      "name": "contextual-sidebar",
+      "type": "registry:ui",
+      "title": "Contextual Sidebar",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "@adea-ai/ui/pixel-resize-handle",
+        "@adea-ai/ui/sheet",
+        "@adea-ai/ui/sidebar-nav",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/contextual-sidebar/contextual-sidebar.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/contextual-sidebar/contextual-sidebar.tsx"
+        },
+        {
+          "path": "src/components/layout/contextual-sidebar/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/contextual-sidebar/index.ts"
+        }
+      ]
+    },
     {
       "name": "floating-preview",
       "type": "registry:ui",
@@ -1652,6 +1677,29 @@
         }
       ]
     },
+    {
+      "name": "pixel-resize-handle",
+      "type": "registry:ui",
+      "title": "Pixel Resize Handle",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "@adea-ai/ui/resizable",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/pixel-resize-handle/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/pixel-resize-handle/index.ts"
+        },
+        {
+          "path": "src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/pixel-resize-handle/pixel-resize-handle.tsx"
+        }
+      ]
+    },
     {
       "name": "side-rail",
       "type": "registry:ui",
@@ -1687,11 +1735,11 @@
       "title": "Sidebar Nav",
       "description": "",
       "dependencies": [
-        "@corvu/resizable@^0.2.5",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/pixel-resize-handle",
         "lib"
       ],
       "files": [

package/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/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/src/components/layout/pixel-resize-handle/index.ts

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