@spree/dashboard-ui 0.13.1 → 1.0.0-beta.2

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}
     />
   )

package/src/ui/tabs.tsx

@@ -0,0 +1,84 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Tabs({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      orientation={orientation}
+      className={cn(
+        'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/** The track a set of tabs sits in, recessed so the selected tab reads as raised. */
+function TabsList({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'inline-flex w-fit items-center justify-center gap-1 rounded-lg bg-track-recessed p-1 text-muted-foreground',
+        'group-data-[orientation=vertical]/tabs:h-auto group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.List>
+  )
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        // min-h-7 + py-1 keeps the hit area past the 24px WCAG target size at
+        // every text size; the old h-[calc(100%-1px)] left it to the parent.
+        'inline-flex min-h-7 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium whitespace-nowrap',
+        'transition-[color,background-color,box-shadow] duration-150 ease-out outline-none motion-reduce:transition-none',
+        'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start',
+        // Unselected tabs recede so the selected one reads as chosen; hover
+        // promotes to full foreground rather than only shifting the surface,
+        // which is the part a colour-blind or low-vision reader can see.
+        'text-muted-foreground hover:text-foreground',
+        // The raised surface lives on the tab itself, as it did before the
+        // indicator: it is the thing that makes the selection legible, and it
+        // must not depend on a separate element rendering correctly behind it.
+        'data-[active]:bg-nested-raised data-[active]:text-foreground data-[active]:shadow-xs',
+        // Same focus treatment as Button, so a keyboard user sees one
+        // consistent indicator across the dashboard.
+        'focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed',
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }

package/src/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'flex field-sizing-content min-h-16 w-full rounded-lg border border-border bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none placeholder:text-muted-foreground 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',
+        'flex field-sizing-content min-h-16 w-full rounded-md border border-border bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground 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',
         className,
       )}
       {...props}

package/src/ui/thumbnail.tsx

@@ -0,0 +1,80 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+import { ImageIcon } from '../spree/icons'
+
+const thumbnailVariants = cva(
+  // The wrapper always renders, so a record without an image keeps the same
+  // footprint as one with it and rows never reflow. `shrink-0` matters in the
+  // flex rows these sit in — without it a long product name squashes the image.
+  'flex shrink-0 items-center justify-center overflow-hidden border bg-muted text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      size: {
+        xs: 'size-5 [&_svg:not([class*=size-])]:size-3',
+        sm: 'size-8',
+        md: 'size-10',
+        lg: 'size-12 [&_svg:not([class*=size-])]:size-5',
+      },
+      shape: {
+        rounded: 'rounded-md',
+        square: 'rounded-none',
+        circle: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      shape: 'rounded',
+    },
+  },
+)
+
+export interface ThumbnailProps
+  extends Omit<React.ComponentProps<'div'>, 'children'>,
+    VariantProps<typeof thumbnailVariants> {
+  /** Image to show. When absent or failed, the fallback renders instead. */
+  src?: string | null
+  /**
+   * Describes the image for screen readers. Leave unset when a visible label
+   * sits beside the thumbnail — the image is decorative then, and repeating
+   * the name makes screen readers announce it twice.
+   */
+  alt?: string
+  /** Overrides the placeholder shown when there is no image. */
+  fallback?: React.ReactNode
+  /** Defer loading until the thumbnail is near the viewport. */
+  loading?: 'eager' | 'lazy'
+}
+
+/**
+ * A product or record image at a fixed size, falling back to a placeholder.
+ *
+ * Images are cropped to fill the box (`object-cover`), which suits photography.
+ * Logos and artwork that must not be cropped want `Attachment` instead.
+ */
+export function Thumbnail({
+  src,
+  alt = '',
+  fallback,
+  size,
+  shape,
+  className,
+  loading,
+  ...props
+}: ThumbnailProps) {
+  return (
+    <div
+      data-slot="thumbnail"
+      className={cn(thumbnailVariants({ size, shape }), className)}
+      {...props}
+    >
+      {src ? (
+        <img src={src} alt={alt} loading={loading} className="size-full object-cover" />
+      ) : (
+        (fallback ?? <ImageIcon />)
+      )}
+    </div>
+  )
+}
+
+export { thumbnailVariants }