@spree/dashboard-ui 0.13.0 → 1.0.0-beta.1

package/src/ui/scroll-area.tsx

@@ -0,0 +1,65 @@
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+/**
+ * shadcn's scroll-area, on Base UI rather than Radix — the registry ships the
+ * Radix build for this project's style, and nothing else here imports Radix.
+ * Same parts and the same slot names; the scrollbar fades in on hover or
+ * scroll, which is Base UI's own behaviour rather than a Radix `type` prop.
+ *
+ * Height belongs to the caller: set it here, or let a flex parent size it.
+ */
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full overscroll-contain rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none select-none p-px',
+        'data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent',
+        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',
+        // Base UI marks the bar while it is scrolled or hovered, so it can
+        // stay out of the way of a short list until it is wanted.
+        'opacity-0 transition-opacity duration-150 ease-out data-[hovering]:opacity-100 data-[scrolling]:opacity-100',
+        'motion-reduce:transition-none',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border-control"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/src/ui/select.tsx

@@ -1,7 +1,7 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select'
-import { CheckIcon, ChevronDownIcon } from 'lucide-react'
 import type * as React from 'react'
 import { cn } from '../lib/utils'
+import { CheckIcon, ChevronDownIcon } from '../spree/icons'
 
 function Select({
   children,
@@ -54,19 +54,26 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        // `min-h-9.5` (default) and `data-[size=sm]:min-h-[1.9375rem]` lock
-        // the trigger to the same natural height as `<Input>` so the field
-        // doesn't collapse to chevron-height when the SelectValue render-prop
-        // returns an empty string (e.g., when value is unset and the
-        // placeholder isn't surfaced through the render-prop).
-        "flex w-full min-h-8.5 items-center justify-between gap-1.5 rounded-lg border border-border bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:border-border disabled:text-muted-foreground disabled:shadow-none aria-invalid:border-destructive data-[placeholder]:text-muted-foreground data-[size=sm]:py-1 data-[size=sm]:px-2 data-[size=sm]:text-sm data-[size=sm]:min-h-[1.9375rem] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // `min-h-8` matches `<Input>`'s own minimum, so a select and a text
+        // field on the same row are the same height. It also stops the trigger
+        // collapsing to chevron-height when the SelectValue render-prop returns
+        // an empty string (value unset and the placeholder not surfaced through
+        // the render-prop); `data-[size=sm]` keeps its own floor for the same
+        // reason.
+        //
+        // `sm` is the toolbar size, matching `Button size="sm" variant="outline"`
+        // exactly — height, gap, padding, text, icon size and the resting lift.
+        // A row mixing a select with a popover trigger (the dashboard's channel
+        // picker beside its date range) then reads as one set of controls
+        // rather than two. The default size is a form field and stays flat.
+        "group/select-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[placeholder]:text-muted-foreground data-[size=sm]:shadow-xs data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon>
-        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground group-data-[size=sm]/select-trigger:size-3.5" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -98,7 +105,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={position === 'item-aligned'}
           className={cn(
-            'relative z-[100] max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            'relative z-[100] max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
             position === 'popper' &&
               'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
             className,
@@ -137,7 +144,7 @@ function SelectItem({
         // Padding + font sized to match `<Input>` and `<SelectTrigger>` so
         // the dropdown rows feel like a continuation of the trigger field.
         // `pr-8` reserves room for the absolute-positioned check indicator.
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2.5 text-base font-normal leading-normal outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-8 pl-2.5 text-base font-normal leading-normal outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}

package/src/ui/separator.tsx

@@ -20,7 +20,7 @@ function Separator({
       orientation={orientation}
       data-orientation={orientation}
       className={cn(
-        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+        'shrink-0 bg-border-subtle data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
         className,
       )}
       {...props}

package/src/ui/sheet.tsx

@@ -2,9 +2,10 @@
 
 import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
 import i18n from 'i18next'
-import { XIcon } from 'lucide-react'
 import * as React from 'react'
+import { useScrolled } from '../hooks/use-scrolled'
 import { cn } from '../lib/utils'
+import { XIcon } from '../spree/icons'
 import { Button } from './button'
 
 function Sheet({
@@ -94,7 +95,7 @@ function SheetOverlay({
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-gray-100/75 dark:bg-black/60 duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
+        'fixed inset-0 z-50 bg-background/60 dark:bg-black/60 duration-200 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
         className,
       )}
       {...props}
@@ -122,7 +123,13 @@ function SheetContent({
         data-side={side}
         dir={dir}
         className={cn(
-          'fixed z-50 flex flex-col border border-border bg-card text-foreground text-sm shadow-lg transition duration-250 ease-out',
+          // Tailwind v4 compiles `translate-*`/`scale-*` to the standalone
+          // `translate`/`scale` properties rather than folding them into
+          // `transform`, so all four are listed. The slide below needs
+          // `translate`; the rest are listed because `className` is merged, so
+          // a caller can animate any of them — and a missing entry fails
+          // silently, as a jump rather than an error.
+          'fixed z-50 flex flex-col border border-border bg-card text-foreground text-sm shadow-lg transition-[opacity,transform,translate,scale] duration-250 ease-out',
           'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-[calc(100dvh-1rem)] data-[side=right]:max-h-[calc(100dvh-1rem)] data-[side=right]:w-[calc(100vw-1rem)] data-[side=right]:max-w-[600px] data-[side=right]:min-w-[320px] data-[side=right]:m-2 data-[side=right]:rounded-xl',
           'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:sm:max-w-sm',
           'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t',
@@ -138,7 +145,13 @@ function SheetContent({
           <SheetPrimitive.Close
             data-slot="sheet-close"
             render={
-              <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+              // `size-11` on touch: at `icon-sm`'s 28px this is well under the
+              // 44px minimum, and on a nav sheet it is the primary way out.
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2 size-11 md:top-3 md:right-3 md:size-7"
+                size="icon-sm"
+              >
                 <XIcon />
                 <span className="sr-only">{i18n.t('admin.actions.close')}</span>
               </Button>
@@ -150,11 +163,40 @@ function SheetContent({
   )
 }
 
+/**
+ * A sheet's title bar. It keeps its separating rule at all times and gains a
+ * soft lift once the body scrolls under it, on the same trigger and curve as
+ * `PageHeader`.
+ */
 function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  // A caller passing `sr-only` wants the title announced but not drawn. Merging
+  // it with the visible chrome does not achieve that: `cn` keeps `flex` (a
+  // different utility group from `sr-only`'s `absolute`), so the element stays
+  // a laid-out box — a 33px bar with a border, above the nav. Detect the intent
+  // and render the bare utility instead.
+  const srOnly = className?.split(' ').includes('sr-only')
+  // Hooks cannot be called conditionally, so this reads the flag before the
+  // early return even though the bare variant never uses it.
+  const scrolled = useScrolled()
+  if (srOnly) return <div data-slot="sheet-header" className={className} {...props} />
+
   return (
     <div
       data-slot="sheet-header"
-      className={cn('relative flex flex-col gap-1.5 border-b p-4 pr-12', className)}
+      className={cn(
+        // No `z-index` here: the close button is a sibling rendered BEFORE this,
+        // so any stacking context on the header paints over it and swallows the
+        // clicks. The header needs no lift anyway — it is a flex sibling of the
+        // body rather than an overlay, so nothing scrolls under it.
+        'flex shrink-0 flex-col gap-1.5 border-b border-border-subtle p-4 pr-12',
+        // The rule stays: a sheet header is a fixed band over its own scroller,
+        // so it is divided from the body whether or not anything has moved. The
+        // lift is what scrolling adds, on the same trigger and curve as
+        // `PageHeader`.
+        'transition-shadow duration-200 ease-out motion-reduce:transition-none',
+        scrolled && 'shadow-xs',
+        className,
+      )}
       {...props}
     />
   )
@@ -165,7 +207,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sheet-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 border-t bg-muted/50 p-4 sm:flex-row sm:justify-end rounded-b-xl',
+        'flex flex-col-reverse gap-2 border-t border-border-subtle bg-muted/50 p-4 sm:flex-row sm:justify-end rounded-b-xl',
         className,
       )}
       {...props}
@@ -177,7 +219,7 @@ function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPr
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-base leading-none font-medium', className)}
+      className={cn('text-lg font-medium', className)}
       {...props}
     />
   )

package/src/ui/sidebar.tsx

@@ -1,9 +1,9 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 import i18n from 'i18next'
-import { PanelLeftIcon } from 'lucide-react'
 import * as React from 'react'
 import { useIsMobile } from '../hooks/use-mobile'
 import { cn } from '../lib/utils'
+import { PanelLeftIcon } from '../spree/icons'
 import { Button } from './button'
 import { Input } from './input'
 import { Separator } from './separator'
@@ -14,15 +14,42 @@ import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '220px'
-const SIDEBAR_WIDTH_MOBILE = '220px'
+const SIDEBAR_WIDTH = '240px'
+/**
+ * Width of any nav drawer on a phone: near-full-width, capped so it doesn't
+ * stretch on a tablet. The desktop rail's width leaves ~40% of a phone screen
+ * unused while still cramping the labels. Exported so a second drawer (the
+ * settings nav sheet) matches this one instead of re-inlining the number.
+ */
+export const SIDEBAR_WIDTH_MOBILE = 'min(86vw, 360px)'
+
+/**
+ * Shared chrome for a mobile nav drawer — touch sizing, safe-area insets and
+ * the sidebar surface colours. Both drawers use it so a fix lands in one place.
+ */
+export const mobileDrawerClassName =
+  'touch-manipulation bg-sidebar p-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] text-sidebar-foreground'
 const SIDEBAR_WIDTH_ICON = '59px'
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
+function isEditableKeyboardTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.isContentEditable) return true
+  return Boolean(target.closest('input, textarea, select'))
+}
+
 type SidebarContextProps = {
   state: 'expanded' | 'collapsed'
   open: boolean
+  /** Sets the state and remembers it as the user's preference. */
   setOpen: (open: boolean) => void
+  /**
+   * Sets the state without remembering it. For collapses the app imposes on
+   * the user's behalf (e.g. the settings area folding the nav to icons to make
+   * room for its own): the merchant's own choice, made through the trigger,
+   * must survive it.
+   */
+  setOpenTransient: (open: boolean) => void
   openMobile: boolean
   setOpenMobile: (open: boolean) => void
   isMobile: boolean
@@ -64,19 +91,34 @@ function SidebarProvider({
     return defaultOpen
   })
   const open = openProp ?? _open
+
+  // The updater form needs the current value, but reading it from a ref rather
+  // than closing over it keeps the setters referentially stable — effects that
+  // depend on them (e.g. the settings auto-collapse) must fire on their own
+  // trigger, not again on every toggle.
+  const openRef = React.useRef(open)
+  openRef.current = open
+  const setOpenPropRef = React.useRef(setOpenProp)
+  setOpenPropRef.current = setOpenProp
+
+  const setOpenTransient = React.useCallback((value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === 'function' ? value(openRef.current) : value
+    if (setOpenPropRef.current) {
+      setOpenPropRef.current(openState)
+    } else {
+      _setOpen(openState)
+    }
+    return openState
+  }, [])
+
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
+      const openState = setOpenTransient(value)
 
       // This sets the cookie to keep the sidebar state.
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
     },
-    [setOpenProp, open],
+    [setOpenTransient],
   )
 
   // Helper to toggle the sidebar.
@@ -84,13 +126,17 @@ function SidebarProvider({
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
   }, [isMobile, setOpen, setOpenMobile])
 
-  // Adds a keyboard shortcut to toggle the sidebar.
+  // Cmd/Ctrl+B is also "bold" in every text field. Skip the shortcut when
+  // the merchant is typing so it cannot collapse the nav out from under
+  // a rich-text editor (or steal the keystroke from an input).
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault()
-        toggleSidebar()
-      }
+      if (event.key !== SIDEBAR_KEYBOARD_SHORTCUT || !(event.metaKey || event.ctrlKey)) return
+      if (event.defaultPrevented) return
+      if (isEditableKeyboardTarget(event.target)) return
+
+      event.preventDefault()
+      toggleSidebar()
     }
 
     window.addEventListener('keydown', handleKeyDown)
@@ -106,12 +152,13 @@ function SidebarProvider({
       state,
       open,
       setOpen,
+      setOpenTransient,
       isMobile,
       openMobile,
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    [state, open, setOpen, setOpenTransient, isMobile, openMobile, setOpenMobile, toggleSidebar],
   )
 
   return (
@@ -126,7 +173,11 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+          // `h-svh` + `overflow-hidden`, not `min-h-svh`: an inset shell scrolls
+          // inside its own sheet, so the wrapper must be exactly the viewport
+          // and never let the document scroll behind it.
+          'group/sidebar-wrapper flex w-full has-data-[variant=inset]:h-svh has-data-[variant=inset]:overflow-hidden has-data-[variant=inset]:bg-sidebar',
+          'not-has-data-[variant=inset]:min-h-svh',
           className,
         )}
         {...props}
@@ -175,7 +226,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          className={cn(mobileDrawerClassName, 'w-(--sidebar-width) [&>button]:hidden')}
           style={
             {
               '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -187,7 +238,11 @@ function Sidebar({
             <SheetTitle>{i18n.t('admin.a11y.sidebar')}</SheetTitle>
             <SheetDescription>{i18n.t('admin.a11y.sidebar_description')}</SheetDescription>
           </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
+          {/* `min-h-0` rather than `h-full`: the sheet carries safe-area
+              padding, and `h-full` resolves against its border box, so the
+              column ran past the bottom edge and clipped its last nav item
+              instead of letting `SidebarContent` scroll to it. */}
+          <div className="flex min-h-0 w-full flex-1 flex-col">{children}</div>
         </SheetContent>
       </Sheet>
     )
@@ -230,7 +285,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="flex size-full flex-col bg-sidebar border-e border-border/50 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=sidebar]:border-e group-data-[variant=sidebar]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -248,7 +303,7 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon-sm"
-      className={cn(className)}
+      className={cn('hover:bg-accent-strong-hover', className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()
@@ -273,7 +328,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       onClick={toggleSidebar}
       title={i18n.t('admin.a11y.toggle_sidebar')}
       className={cn(
-        'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+        'absolute inset-y-0 z-20 hidden w-4 transition-colors duration-100 ease-out group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
         'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
@@ -286,12 +341,27 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
   )
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ className, id = 'main-content', ...props }: React.ComponentProps<'main'>) {
   return (
     <main
+      // The skip link's target. Defaulted here rather than set by each host so
+      // the link cannot point at nothing.
+      id={id}
+      // `-1`: a container is not normally focusable, but the skip link has to
+      // be able to move focus here — without it the browser scrolls to the
+      // anchor and leaves focus behind in the nav, so the next Tab continues
+      // through the sidebar the user just asked to skip.
+      tabIndex={-1}
       data-slot="sidebar-inset"
       className={cn(
-        'relative z-0 flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        // `min-w-0`: `w-full` sets the flex basis to the wrapper's full width,
+        // and a flex item's default `min-width: auto` then refuses to shrink
+        // below it — so beside the collapsed icon rail the inset stays a full
+        // viewport wide and its content runs off the right edge.
+        // The inset sheet is the raised surface, so it takes the card colour —
+        // pure white in light mode — rather than the page grey, which is now the
+        // ground the rail sits on.
+        'relative z-0 flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:bg-card md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-sidebar-border md:peer-data-[variant=inset]:shadow-sm',
         className,
       )}
       {...props}
@@ -316,7 +386,9 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-header"
       data-sidebar="header"
       className={cn(
-        'flex flex-col gap-0 px-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center',
+        // In the drawer the switcher is the only thing above the nav, so it
+        // needs a rule under it to read as a header rather than a first row.
+        'flex flex-col gap-3 px-2 in-data-[mobile=true]:border-b in-data-[mobile=true]:border-border-subtle in-data-[mobile=true]:pb-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center',
         className,
       )}
       {...props}
@@ -330,7 +402,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-footer"
       data-sidebar="footer"
       className={cn(
-        'flex flex-col gap-0 p-2 mt-auto border-t border-border group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center',
+        'flex flex-col gap-0 p-2 mt-auto border-t border-border-subtle group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center',
         className,
       )}
       {...props}
@@ -355,7 +427,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 pt-2 overflow-auto group-data-[collapsible=icon]:overflow-visible',
+        'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 pt-3 overflow-auto group-data-[collapsible=icon]:overflow-visible',
         className,
       )}
       {...props}
@@ -369,7 +441,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="sidebar-group"
       data-sidebar="group"
       className={cn(
-        'relative flex w-full min-w-0 flex-col px-3 py-0 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center',
+        'relative flex w-full min-w-0 flex-col px-2 py-0 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center',
         className,
       )}
       {...props}
@@ -389,7 +461,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] [&>svg]:size-4 [&>svg]:shrink-0',
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] [&>svg]:size-4 [&>svg]:shrink-0',
         className,
       )}
       {...props}
@@ -409,7 +481,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
+        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
         className,
       )}
       {...props}
@@ -434,7 +506,9 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
       data-slot="sidebar-menu"
       data-sidebar="menu"
       className={cn(
-        'flex w-full min-w-0 flex-col gap-1 group-data-[collapsible=icon]:items-center',
+        // `gap-2` on touch: adjacent tap targets need 8px between them, and
+        // the rail's 4px is a pointer-precision value.
+        'flex w-full min-w-0 flex-col gap-1 in-data-[mobile=true]:gap-2 group-data-[collapsible=icon]:items-center',
         className,
       )}
       {...props}
@@ -454,7 +528,12 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button group/menu-button flex gap-2 w-full items-center overflow-hidden rounded-xl p-1 text-left text-base text-sidebar-foreground/80 outline-hidden transition-colors duration-100 ease-in-out group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:overflow-visible group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:[&>span:last-child]:hidden hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-foreground data-active:bg-sidebar-accent data-active:text-foreground data-active:font-semibold [&>span:last-child]:truncate',
+  // `whitespace-nowrap` matters during the collapse: the width animates over
+  // 200ms, and mid-transition the row is too narrow for a label plus a trailing
+  // badge. Without it the flex line wraps and the label visibly squashes to two
+  // lines inside the fixed height until the animation lands. Labels clip
+  // instead — which is what the `truncate` below already intends.
+  'peer/menu-button group/menu-button flex gap-2 w-full items-center overflow-hidden whitespace-nowrap rounded-md p-1 text-left font-medium text-base text-sidebar-foreground/80 outline-hidden transition-[color,background-color,border-color,box-shadow] duration-100 ease-out group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:overflow-visible group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:[&>span:last-child]:hidden hover:bg-sidebar-accent-hover hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent-hover data-open:hover:text-sidebar-foreground data-active:bg-accent-strong data-active:text-foreground data-active:font-semibold data-active:hover:bg-accent-strong-hover [&>span:last-child]:truncate',
   {
     variants: {
       variant: {
@@ -463,8 +542,12 @@ const sidebarMenuButtonVariants = cva(
           'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: 'h-8 text-base',
-        sm: 'h-7 text-xs',
+        // Inside the mobile drawer every row grows to a 48px touch target
+        // (iOS wants 44pt, Android 48dp) with a wider glyph to match. The
+        // desktop rail keeps its compact pointer-sized rows.
+        default:
+          'h-8 text-base in-data-[mobile=true]:h-12 in-data-[mobile=true]:px-2 in-data-[mobile=true]:[&_svg]:size-5',
+        sm: 'h-7 text-xs in-data-[mobile=true]:h-11 in-data-[mobile=true]:text-sm',
         lg: 'h-12 text-base group-data-[collapsible=icon]:p-0!',
       },
     },
@@ -541,7 +624,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
+        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
         showOnHover &&
           'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
         className,
@@ -551,13 +634,31 @@ function SidebarMenuAction({
   )
 }
 
+/**
+ * A count or progress marker on a nav item — "3" beside Orders, "2/6" beside
+ * Getting Started.
+ *
+ * Its own component rather than the page's `Badge`: this one sits on the rail
+ * rather than on a card, so it takes the sidebar's foreground token and follows
+ * the item it belongs to (brightening with the label on hover, going full
+ * strength when the item is active). A page badge on a nav row keeps the card
+ * palette and stays the same colour while everything around it moves.
+ *
+ * Rendered inline, at the end of the item's own row — not absolutely positioned
+ * like shadcn's original, which assumed a badge placed as a sibling of the
+ * button rather than inside its link.
+ */
 function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
+        'pointer-events-none flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md border border-sidebar-border px-1.5 text-[11px] font-medium text-sidebar-foreground/70 tabular-nums select-none',
+        'transition-colors duration-100 ease-out group-data-[collapsible=icon]:hidden',
+        // Follows its own row: brighter under the pointer, full strength when
+        // the item is the active one.
+        'group-hover/menu-button:text-sidebar-foreground group-data-active/menu-button:text-foreground',
         className,
       )}
       {...props}
@@ -643,7 +744,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'relative flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-xl p-1 text-sidebar-foreground/80 outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-base data-[size=sm]:text-xs data-active:font-semibold data-active:text-foreground data-active:bg-transparent data-active:shadow-none data-active:before:absolute data-active:before:-left-4 data-active:before:top-[10%] data-active:before:h-[80%] data-active:before:w-[3px] data-active:before:rounded-sm data-active:before:bg-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'relative flex h-7 in-data-[mobile=true]:h-11 in-data-[mobile=true]:px-2 min-w-0 items-center gap-2 overflow-hidden rounded-lg p-1 font-medium text-sidebar-foreground/80 outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent-hover hover:text-sidebar-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-base data-[size=sm]:text-xs data-active:font-semibold data-active:text-foreground data-active:bg-transparent data-active:shadow-none data-active:before:absolute data-active:before:-left-4 data-active:before:top-[10%] data-active:before:h-[80%] data-active:before:w-[3px] data-active:before:rounded-sm data-active:before:bg-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
         className,
       )}
       {...props}

package/src/ui/skeleton.tsx

@@ -4,7 +4,9 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="skeleton"
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      // `accent`, not `muted`: muted sits ~1.5% off white, which reads as nothing
+      // on a card. A skeleton has to be visible to do its job.
+      className={cn('animate-pulse rounded-md bg-accent', className)}
       {...props}
     />
   )