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

package/src/ui/radio-group.tsx

@@ -18,12 +18,12 @@ function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof Rad
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        'peer relative inline-block size-4 shrink-0 rounded-full border border-input align-[-3px] shadow-xs outline-none transition-shadow',
-        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
-        'disabled:cursor-not-allowed disabled:opacity-50',
+        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-full border border-border bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
+        '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 aria-invalid:ring-destructive/20',
         'data-[checked]:border-blue-500 data-[checked]:bg-blue-500 data-[checked]:text-white',
-        'dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[checked]:bg-blue-500',
+        'dark:aria-invalid:ring-destructive/40 dark:data-[checked]:bg-blue-500',
         className,
       )}
       {...props}

package/src/ui/rich-text-editor.tsx

@@ -1,9 +1,16 @@
+import Image from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
 import Placeholder from '@tiptap/extension-placeholder'
-import { EditorContent, useEditor } from '@tiptap/react'
+import type { Editor } from '@tiptap/react'
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { sameRichText, shouldEmitRichTextChange } from '../lib/same-rich-text'
+import { cn } from '../lib/utils'
 import {
   BoldIcon,
+  ImageIcon,
   ItalicIcon,
   LinkIcon,
   ListIcon,
@@ -12,12 +19,9 @@ import {
   RedoIcon,
   StrikethroughIcon,
   UndoIcon,
-} from 'lucide-react'
-import { useCallback, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '../lib/utils'
+} from '../spree/icons'
 
-interface RichTextEditorProps {
+export interface RichTextEditorProps {
   value?: string
   onChange?: (html: string) => void
   /**
@@ -37,6 +41,16 @@ interface RichTextEditorProps {
    * test locators.
    */
   id?: string
+  /**
+   * Asks the caller for an image to insert, resolving to its URL and alt text
+   * (or null if the merchant backs out). Supplying it puts an image button in
+   * the toolbar; without it the editor has no way to add one.
+   *
+   * The editor stays headless — the media library lives in the app, so
+   * choosing the picture is the caller's job and this component only places
+   * what comes back.
+   */
+  onRequestImage?: () => Promise<{ url: string; alt?: string | null } | null>
 }
 
 export function RichTextEditor({
@@ -48,6 +62,7 @@ export function RichTextEditor({
   disabled = false,
   ariaLabel,
   id,
+  onRequestImage,
 }: RichTextEditorProps) {
   const { t } = useTranslation()
   const resolvedPlaceholder = placeholder ?? t('admin.components.rich_text_editor.placeholder')
@@ -60,17 +75,29 @@ export function RichTextEditor({
   // attempts another create instead of an update.
   const onChangeRef = useRef(onChange)
   const onBlurRef = useRef(onBlur)
+  const valueRef = useRef(value)
   useEffect(() => {
     onChangeRef.current = onChange
     onBlurRef.current = onBlur
+    valueRef.current = value
   })
 
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({ link: false }),
+  const extensions = useMemo(
+    () => [
+      // TrailingNode is on by default in StarterKit 3.x and keeps an extra
+      // empty paragraph that list/quote commands then miss or wrap instead
+      // of the text the merchant just typed.
+      StarterKit.configure({ link: false, trailingNode: false }),
       Placeholder.configure({ placeholder: resolvedPlaceholder }),
       Link.configure({ openOnClick: false }),
+      // Inline (not block) so an image can sit inside a paragraph, which is
+      // how the sanitizer's allowlist expects to find it.
+      Image.configure({ inline: true }),
     ],
+    [resolvedPlaceholder],
+  )
+  const editor = useEditor({
+    extensions,
     content: value,
     editable: !disabled,
     editorProps: {
@@ -80,7 +107,9 @@ export function RichTextEditor({
       },
     },
     onUpdate: ({ editor }) => {
-      onChangeRef.current?.(editor.getHTML())
+      const html = editor.getHTML()
+      if (!shouldEmitRichTextChange(html, valueRef.current)) return
+      onChangeRef.current?.(html)
     },
     onBlur: ({ event }) => {
       // Tiptap fires `onBlur` whenever the contenteditable loses focus —
@@ -112,9 +141,13 @@ export function RichTextEditor({
   // Sync external value changes (e.g. form reset)
   useEffect(() => {
     if (!editor) return
-    if (editor.getHTML() !== value) {
-      editor.commands.setContent(value, { emitUpdate: false })
-    }
+    const html = editor.getHTML()
+    if (html === value) return
+    // Enter adds an empty paragraph the form may not have stored yet.
+    // sameRichText treats that as equal, so a naïve !== reset would merge
+    // the next typed line back into the previous block.
+    if (sameRichText(html, value) && shouldEmitRichTextChange(html, value)) return
+    editor.commands.setContent(value, { emitUpdate: false })
   }, [editor, value])
 
   useEffect(() => {
@@ -133,98 +166,172 @@ export function RichTextEditor({
     }
   }, [editor, t])
 
+  const insertImage = useCallback(async () => {
+    if (!editor || !onRequestImage) return
+
+    const picked = await onRequestImage()
+    if (!picked) return
+
+    editor
+      .chain()
+      .focus()
+      .setImage({ src: picked.url, alt: picked.alt ?? undefined })
+      .run()
+  }, [editor, onRequestImage])
+
   if (!editor) return null
 
   return (
     <div
       ref={wrapperRef}
+      data-slot="rich-text-editor"
       className={cn(
-        'rounded-lg border border-border bg-card text-foreground shadow-xs transition-all duration-100 ease-in-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_rgba(59,130,246,0.15)]',
-        disabled && 'pointer-events-none bg-muted border-border',
+        // The same shell as `<Input>` and `<Textarea>` — border, fill, resting
+        // shadow, transition and focus treatment — so a description field sits
+        // in a form beside them without reading as a different kind of control.
+        // `focus-within` rather than `focus`: the element that takes the caret
+        // is Tiptap's inner contenteditable, not this wrapper.
+        'rounded-md border border-border bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        disabled && 'pointer-events-none bg-muted text-muted-foreground shadow-none',
         className,
       )}
     >
-      {/* Toolbar */}
-      <div className="flex items-center gap-0.5 border-b border-border px-2 py-1.5">
-        <ToolbarButton
-          active={editor.isActive('bold')}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          title={t('admin.components.rich_text_editor.bold')}
-        >
-          <BoldIcon className="size-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          active={editor.isActive('italic')}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          title={t('admin.components.rich_text_editor.italic')}
-        >
-          <ItalicIcon className="size-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          active={editor.isActive('strike')}
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-          title={t('admin.components.rich_text_editor.strikethrough')}
-        >
-          <StrikethroughIcon className="size-4" />
-        </ToolbarButton>
+      <EditorToolbar
+        editor={editor}
+        onRequestImage={onRequestImage}
+        onSetLink={setLink}
+        onInsertImage={insertImage}
+      />
 
-        <ToolbarSeparator />
+      <EditorContent editor={editor} className="px-3 py-2" />
+    </div>
+  )
+}
 
-        <ToolbarButton
-          active={editor.isActive('bulletList')}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-          title={t('admin.components.rich_text_editor.bullet_list')}
-        >
-          <ListIcon className="size-4" />
-        </ToolbarButton>
-        <ToolbarButton
-          active={editor.isActive('orderedList')}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          title={t('admin.components.rich_text_editor.ordered_list')}
-        >
-          <ListOrderedIcon className="size-4" />
+/**
+ * Isolated so `useEditorState` can re-render the buttons when the selection
+ * moves. Tiptap v3 no longer re-renders `useEditor` on every transaction, so
+ * reading `editor.isActive(...)` in the parent would stay stale.
+ */
+function EditorToolbar({
+  editor,
+  onRequestImage,
+  onSetLink,
+  onInsertImage,
+}: {
+  editor: Editor
+  onRequestImage?: RichTextEditorProps['onRequestImage']
+  onSetLink: () => void
+  onInsertImage: () => Promise<void>
+}) {
+  const { t } = useTranslation()
+  const toolbar = useEditorState({
+    editor,
+    selector: ({ editor: current }) => ({
+      isBold: current.isActive('bold'),
+      isItalic: current.isActive('italic'),
+      isStrike: current.isActive('strike'),
+      isBulletList: current.isActive('bulletList'),
+      isOrderedList: current.isActive('orderedList'),
+      isBlockquote: current.isActive('blockquote'),
+      isLink: current.isActive('link'),
+      canUndo: current.can().undo(),
+      canRedo: current.can().redo(),
+    }),
+  })
+
+  const runToolbarCommand = (command: () => void) => {
+    command()
+    // Ctrl/Cmd+A is an AllSelection. Collapse it so the button the
+    // merchant just used lights up against the formatted text.
+    if (editor.state.selection.toJSON().type === 'all') {
+      editor.commands.setTextSelection(1)
+    }
+  }
+
+  return (
+    <div
+      data-slot="rich-text-editor-toolbar"
+      className="flex items-center gap-0.5 border-b border-border px-2 py-1.5"
+    >
+      <ToolbarButton
+        active={toolbar.isBold}
+        onClick={() => runToolbarCommand(() => editor.chain().focus().toggleBold().run())}
+        title={t('admin.components.rich_text_editor.bold')}
+      >
+        <BoldIcon className="size-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        active={toolbar.isItalic}
+        onClick={() => runToolbarCommand(() => editor.chain().focus().toggleItalic().run())}
+        title={t('admin.components.rich_text_editor.italic')}
+      >
+        <ItalicIcon className="size-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        active={toolbar.isStrike}
+        onClick={() => runToolbarCommand(() => editor.chain().focus().toggleStrike().run())}
+        title={t('admin.components.rich_text_editor.strikethrough')}
+      >
+        <StrikethroughIcon className="size-4" />
+      </ToolbarButton>
+
+      <ToolbarSeparator />
+
+      <ToolbarButton
+        active={toolbar.isBulletList}
+        onClick={() => runToolbarCommand(() => editor.chain().focus().toggleBulletList().run())}
+        title={t('admin.components.rich_text_editor.bullet_list')}
+      >
+        <ListIcon className="size-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        active={toolbar.isOrderedList}
+        onClick={() => runToolbarCommand(() => editor.chain().focus().toggleOrderedList().run())}
+        title={t('admin.components.rich_text_editor.ordered_list')}
+      >
+        <ListOrderedIcon className="size-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        active={toolbar.isBlockquote}
+        onClick={() => runToolbarCommand(() => editor.chain().focus().toggleBlockquote().run())}
+        title={t('admin.components.rich_text_editor.blockquote')}
+      >
+        <QuoteIcon className="size-4" />
+      </ToolbarButton>
+
+      <ToolbarSeparator />
+
+      <ToolbarButton
+        active={toolbar.isLink}
+        onClick={() => runToolbarCommand(onSetLink)}
+        title={t('admin.components.rich_text_editor.link')}
+      >
+        <LinkIcon className="size-4" />
+      </ToolbarButton>
+
+      {onRequestImage && (
+        <ToolbarButton onClick={onInsertImage} title={t('admin.components.rich_text_editor.image')}>
+          <ImageIcon className="size-4" />
         </ToolbarButton>
+      )}
+
+      <div className="ml-auto flex items-center gap-0.5">
         <ToolbarButton
-          active={editor.isActive('blockquote')}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-          title={t('admin.components.rich_text_editor.blockquote')}
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!toolbar.canUndo}
+          title={t('admin.components.rich_text_editor.undo')}
         >
-          <QuoteIcon className="size-4" />
+          <UndoIcon className="size-4" />
         </ToolbarButton>
-
-        <ToolbarSeparator />
-
         <ToolbarButton
-          active={editor.isActive('link')}
-          onClick={setLink}
-          title={t('admin.components.rich_text_editor.link')}
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!toolbar.canRedo}
+          title={t('admin.components.rich_text_editor.redo')}
         >
-          <LinkIcon className="size-4" />
+          <RedoIcon className="size-4" />
         </ToolbarButton>
-
-        <div className="ml-auto flex items-center gap-0.5">
-          <ToolbarButton
-            onClick={() => editor.chain().focus().undo().run()}
-            disabled={!editor.can().undo()}
-            title={t('admin.components.rich_text_editor.undo')}
-          >
-            <UndoIcon className="size-4" />
-          </ToolbarButton>
-          <ToolbarButton
-            onClick={() => editor.chain().focus().redo().run()}
-            disabled={!editor.can().redo()}
-            title={t('admin.components.rich_text_editor.redo')}
-          >
-            <RedoIcon className="size-4" />
-          </ToolbarButton>
-        </div>
       </div>
-
-      {/* Editor */}
-      <EditorContent
-        editor={editor}
-        className="prose prose-sm max-w-none px-3 py-2 dark:prose-invert [&_.tiptap]:min-h-32 [&_.tiptap]:outline-none [&_.tiptap.is-editor-empty:first-child::before]:text-muted-foreground [&_.tiptap.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.tiptap.is-editor-empty:first-child::before]:float-left [&_.tiptap.is-editor-empty:first-child::before]:h-0 [&_.tiptap.is-editor-empty:first-child::before]:pointer-events-none"
-      />
     </div>
   )
 }
@@ -245,12 +352,31 @@ function ToolbarButton({
   return (
     <button
       type="button"
-      onClick={onClick}
+      onPointerDown={(event) => {
+        if (event.button !== 0) return
+        // Keep the editor selection and run the command here. preventDefault
+        // on pointer/mouse down stops the contenteditable from blurring, but
+        // it also swallows the following click in Chromium — which is how
+        // Playwright activates the button.
+        event.preventDefault()
+        onClick()
+      }}
+      onClick={(event) => {
+        // Pointer activations already ran above (`detail` is 0 for keyboard
+        // and assistive-technology clicks). Do not keep a flag across
+        // events: undo/redo can disable this button before the paired
+        // click arrives, and a leftover flag would discard the next
+        // keyboard activation.
+        if (event.detail !== 0) return
+        onClick()
+      }}
       disabled={disabled}
       title={title}
+      aria-label={title}
+      aria-pressed={active}
       className={cn(
         'inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none',
-        active && 'bg-accent text-foreground',
+        active && 'bg-accent-strong text-foreground',
       )}
     >
       {children}

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