@adea-ai/ui 0.106.2 → 0.108.0

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

@@ -24,31 +24,79 @@ import { headingVariants } from '../typography'
  * `end`, and a full-width row for `top` and `bottom`. The slide-in direction
  * follows from the side, so a caller never pairs them by hand.
  *
+ * `variant` decides how it meets that edge. `inset` — the default for `end` —
+ * docks the panel inside the main view: below the top bar, one equal gap from
+ * the top bar, the end edge and the bottom, with no scrim, so the work it edits
+ * stays visible and the top bar stays reachable. It is the shape for editing one
+ * thing beside its context (appearance settings, a task, a record). `edge` runs
+ * edge to edge over a scrim — the shape of a navigation drawer, and the default
+ * for every other side.
+ *
+ * Its parts read alike everywhere: `SheetHeader` holds a heading, a description
+ * and a full-width rule beneath, with the close button in the corner;
+ * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that
+ * holds the decision.
+ *
  * Controlled sheets opened from outside a `SheetTrigger` restore focus to the
  * element focused before opening. Pass `restoreFocusRef` when a stable external
  * opener must be used instead, such as when another layer closes before the
  * sheet opens.
  */
+// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be
+// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the
+// pinned footer out of view. Only SheetBody scrolls.
 const sheetVariants = cva(
-  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg',
+  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top',
-        bottom:
-          'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',
-        start:
-          'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left',
-        end: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right',
+        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',
+        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',
+        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',
+        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',
+      },
+      variant: {
+        edge: '',
+        inset: 'panel-dialog-inset w-lg rounded-xl border',
       },
     },
-    defaultVariants: { side: 'end' },
+    compoundVariants: [
+      {
+        side: 'top',
+        variant: 'edge',
+        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',
+      },
+      {
+        side: 'bottom',
+        variant: 'edge',
+        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',
+      },
+      {
+        side: 'start',
+        variant: 'edge',
+        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',
+      },
+      {
+        side: 'end',
+        variant: 'edge',
+        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',
+      },
+    ],
+    defaultVariants: { side: 'end', variant: 'edge' },
   }
 )
 
+/** `inset` for the end edge, `edge` for every other side, unless the caller says. */
+const sheetVariantFor = (
+  side: SheetContentProps['side'],
+  variant: SheetContentProps['variant']
+): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')
+
 export type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &
   VariantProps<typeof sheetVariants> & {
     closeButton?: JSX.Element | false
+    /** The close button's accessible name. Defaults to "Close". */
+    closeLabel?: string
     /** Supplies the stable external element to focus when the controlled sheet closes. */
     restoreFocusRef?: Accessor<HTMLElement | undefined>
   }
@@ -57,8 +105,10 @@ export function SheetContent(props: SheetContentProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'side',
+    'variant',
     'children',
     'closeButton',
+    'closeLabel',
     'restoreFocusRef',
     'onOpenAutoFocus',
     'onCloseAutoFocus',
@@ -71,12 +121,19 @@ export function SheetContent(props: SheetContentProps) {
     onCloseAutoFocus: local.onCloseAutoFocus,
   })
 
+  const variant = () => sheetVariantFor(local.side, local.variant)
+
   return (
     <KobalteDialog.Portal>
-      <DialogOverlay />
+      {/* An inset panel is beside the work, so the work stays in view: no scrim.
+          It is still modal — focus stays inside and an outside click dismisses. */}
+      <Show when={variant() === 'edge'}>
+        <DialogOverlay />
+      </Show>
       <KobalteDialogContent
+        data-variant={variant()}
         class={cn(
-          sheetVariants({ side: local.side }),
+          sheetVariants({ side: local.side, variant: variant() }),
           'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',
           'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',
           local.class
@@ -92,7 +149,7 @@ export function SheetContent(props: SheetContentProps) {
               WebKit walks only explicit tabindex and form controls) would skip
               an implicitly-tabbable button and jump past the sheet's end. */}
           <KobalteDialog.CloseButton
-            aria-label="Close"
+            aria-label={local.closeLabel ?? 'Close'}
             tabindex="0"
             class="absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
           >
@@ -122,7 +179,10 @@ export function SheetHeader(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      class={cn('flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start', local.class)}
+      class={cn(
+        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',
+        local.class
+      )}
       {...rest}
     />
   )
@@ -133,7 +193,7 @@ export function SheetBody(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-body"
-      class={cn('flex-1 overflow-y-auto px-4 pb-4', local.class)}
+      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}
       {...rest}
     />
   )
@@ -144,7 +204,10 @@ export function SheetFooter(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-footer"
-      class={cn('flex items-center justify-end gap-2 border-t border-border p-4', local.class)}
+      class={cn(
+        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',
+        local.class
+      )}
       {...rest}
     />
   )
@@ -154,7 +217,7 @@ export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <KobalteDialog.Title
-      class={cn(headingVariants({ size: 'subsection', leading: 'none' }), local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/dist/r/src/lib/overlay.ts

@@ -81,3 +81,17 @@ export const menuSeparator = 'bg-border -mx-1 my-1 h-px'
 
 /** Padding shared by every menu-list surface. */
 export const menuContentPadding = 'p-1'
+
+/**
+ * Marks a floating layer — a menu, a listbox, a popover — as part of the top
+ * layer.
+ *
+ * A modal dialog hides everything outside itself from assistive technology
+ * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.
+ * A menu or select opened from inside the dialog portals to `<body>`, so the
+ * dialog hid it too: the list was on screen, focused, and invisible to a
+ * screen reader, and an outside-click check could treat a click on it as a
+ * click away from the dialog. Kobalte exempts nodes carrying this attribute
+ * from both, so every floating layer carries it.
+ */
+export const topLayerProps = { 'data-kb-top-layer': '' } as const

package/dist/r/src/styles/base.css

@@ -277,6 +277,19 @@
   text-orientation: mixed;
 }
 
+/**
+ * The docking box of an inset Sheet: below the top bar, with one gap (two spacing
+ * steps) from the top bar, the end edge and the bottom of the window, so the
+ * panel fills the height of the main view and its edges line up on every side.
+ * Narrow windows keep the same gap at the start edge too.
+ */
+@utility panel-dialog-inset {
+  top: calc(var(--topbar-height) + var(--spacing) * 2);
+  inset-inline-end: calc(var(--spacing) * 2);
+  bottom: calc(var(--spacing) * 2);
+  max-width: calc(100vw - var(--spacing) * 4);
+}
+
 @utility no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.106.2",
+  "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": [
@@ -1918,7 +1966,7 @@
         "@adea-ai/ui/button",
         "@adea-ai/ui/dropdown-menu",
         "@adea-ai/ui/input",
-        "@adea-ai/ui/popover",
+        "@adea-ai/ui/sheet",
         "@adea-ai/ui/switch",
         "@adea-ai/ui/theme",
         "lib"

package/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -41,12 +41,15 @@ import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-se
 
 import { Switch } from '../../ui/switch/switch'
 import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverTitle,
-  PopoverTrigger,
-} from '../../ui/popover/popover'
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../ui/sheet/sheet'
 import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
 import { ModeChoices, AccentChoices, GlassChoices, isCustomAccent } from './appearance-choices'
 import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
@@ -61,7 +64,6 @@ import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
  */
 export function AppearanceEditor(props: AppearanceEditorProps) {
   const errorId = createUniqueId()
-  const saveReasonId = createUniqueId()
   const custom = () => isCustomAccent(props)
   const accentDescription = () => {
     if (props.draft.accent === 'theme') return "Theme default · Uses the palette's intended color."
@@ -188,15 +190,35 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           </Button>
         </SettingsRow>
       </div>
+      <Show when={!props.hideActions}>
+        {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
+            editor scrolls with its host panel, and actions parked at the bottom
+            of a long form were unreachable without scrolling past every row. */}
+        <div class="sticky bottom-0 z-10 mt-2 border-t bg-background px-4 py-3">
+          <AppearanceEditorActions {...props} />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * Reset, Cancel and Save, with the reason Save is unavailable. Rendered by the
+ * editor itself, or — with `hideActions` — by a host that pins them in its own
+ * footer, as `AppearancePopover` does.
+ */
+export function AppearanceEditorActions(props: AppearanceEditorProps) {
+  const saveReasonId = createUniqueId()
+  return (
+    <div class="flex w-full flex-col gap-2">
       <Show when={props.saveDisabledReason}>
-        <p id={saveReasonId} role="status" class="px-4 pt-3 text-xs text-muted-foreground">
+        <p id={saveReasonId} role="status" class="text-xs text-muted-foreground">
           {props.saveDisabledReason}
         </p>
       </Show>
-      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
-          editor scrolls with its host panel, and actions parked at the bottom
-          of a long form were unreachable without scrolling past every row. */}
-      <div class="global-appearance-editor-actions sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
+      {/* `global-appearance-editor-actions` lets these buttons grow with the UI
+          font preference, like the rest of Appearance's own controls. */}
+      <div class="global-appearance-editor-actions flex flex-wrap items-center gap-2">
         <Button
           type="button"
           size="sm"
@@ -232,19 +254,15 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
   )
 }
 
-/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.
- * Its measured available height also bounds scrolling, keeping footer actions
- * reachable when a narrow popup begins below its trigger. */
+/** The editor in an inset Sheet docked beside the main view: the body scrolls and
+ * Reset/Cancel/Save sit in the panel's full-width footer, always reachable.
+ * Dismissal (Escape, the close button, an outside click) is `onDismiss`. */
 export function AppearancePopover(props: AppearancePopoverProps) {
   const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()
 
   return (
-    <Popover
-      open={props.open}
-      modal
-      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}
-    >
-      <PopoverTrigger
+    <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>
+      <SheetTrigger
         as={Button}
         type="button"
         variant="ghost"
@@ -252,17 +270,21 @@ export function AppearancePopover(props: AppearancePopoverProps) {
         aria-label="Appearance settings"
       >
         <Palette />
-      </PopoverTrigger>
-      <PopoverContent
-        ref={setMenuPortalMount}
-        class="w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto"
-      >
-        <PopoverTitle>Appearance</PopoverTitle>
-        <PopoverDescription>
-          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
-        </PopoverDescription>
-        <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} />
-      </PopoverContent>
-    </Popover>
+      </SheetTrigger>
+      <SheetContent side="end" closeLabel="Close appearance settings" ref={setMenuPortalMount}>
+        <SheetHeader>
+          <SheetTitle>Appearance</SheetTitle>
+          <SheetDescription>
+            Changes preview immediately. Save keeps them; Cancel restores the previous appearance.
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody>
+          <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} hideActions />
+        </SheetBody>
+        <SheetFooter>
+          <AppearanceEditorActions {...props} />
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
   )
 }

package/src/components/composites/appearance-editor/appearance-types.ts

@@ -55,6 +55,8 @@ export type AppearanceEditorProps = {
   /** Mount nested font menus inside the containing overlay when one exists. */
   menuPortalMount?: HTMLElement
   class?: string
+  /** Leave Reset/Cancel/Save to the host, which renders `AppearanceEditorActions`. */
+  hideActions?: boolean
 }
 
 export type AppearancePopoverProps = AppearanceEditorProps & {

package/src/components/composites/appearance-editor/index.ts

@@ -1,4 +1,4 @@
-export { AppearanceEditor, AppearancePopover } from './appearance-editor'
+export { AppearanceEditor, AppearanceEditorActions, AppearancePopover } from './appearance-editor'
 export {
   AppearanceFontSettingsGroup,
   type AppearanceFontSettingsGroupProps,

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'