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

package/src/ui/media-preview.tsx

@@ -0,0 +1,105 @@
+import type * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
+import { FilmIcon, ImagePlusIcon } from '../spree/icons'
+
+export interface MediaPreviewProps {
+  mediaType?: 'image' | 'video' | 'external_video' | string
+  /** Still image URL — the image itself, or a video's poster. */
+  previewUrl?: string | null
+  /** Playable file for an uploaded video. */
+  videoUrl?: string | null
+  /**
+   * Player URL for an external video. Parsing the provider link is the
+   * caller's job — the server is the authority on what is embeddable, and
+   * this component only renders what it is handed.
+   */
+  embedUrl?: string | null
+  alt?: string
+  /** Normalized 0–1. Drawn as a marker over an image. */
+  focalPoint?: { x: number; y: number } | null
+  /** Click handler for setting the focal point; images only. */
+  onFocalPointClick?: (event: React.MouseEvent<HTMLElement>) => void
+  className?: string
+}
+
+/**
+ * What a media row looks like, whatever its kind: an external video as its
+ * provider's embed, an uploaded video as a player, an image as a picture —
+ * with a focal point marker when one is set.
+ *
+ * Headless by the package rule: everything arrives as props, so the same
+ * component serves a saved record and a form row that only has blob URLs
+ * because it has not been saved yet.
+ */
+export function MediaPreview({
+  mediaType = 'image',
+  previewUrl,
+  videoUrl,
+  embedUrl,
+  alt = '',
+  focalPoint,
+  onFocalPointClick,
+  className = 'max-h-[60vh]',
+}: MediaPreviewProps) {
+  const { t } = useTranslation()
+
+  const isImage = mediaType === 'image'
+
+  if (mediaType === 'external_video' && embedUrl) {
+    return (
+      <div className="aspect-video w-full shrink-0 overflow-hidden rounded-lg border border-border bg-black">
+        <iframe
+          src={embedUrl}
+          title={alt || t('admin.components.media_preview.video_title')}
+          allowFullScreen
+          className="size-full"
+        />
+      </div>
+    )
+  }
+
+  if (mediaType === 'video' && videoUrl) {
+    return (
+      // biome-ignore lint/a11y/useMediaCaption: merchant-supplied footage has no track to offer
+      <video
+        src={videoUrl}
+        poster={previewUrl ?? undefined}
+        controls
+        playsInline
+        preload="metadata"
+        className={cn('w-full shrink-0 rounded-lg bg-black', className)}
+      />
+    )
+  }
+
+  const canSetFocalPoint = isImage && !!previewUrl && !!onFocalPointClick
+
+  return (
+    <button
+      type="button"
+      disabled={!canSetFocalPoint}
+      onClick={onFocalPointClick}
+      className="group relative block w-full shrink-0 overflow-hidden rounded-lg border border-border bg-muted disabled:cursor-default"
+    >
+      {previewUrl ? (
+        <>
+          <img src={previewUrl} alt={alt} className={cn('w-full object-contain', className)} />
+          {isImage && focalPoint && (
+            <span
+              aria-hidden
+              className="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_2px_rgba(0,0,0,0.4)]"
+              style={{ left: `${focalPoint.x * 100}%`, top: `${focalPoint.y * 100}%` }}
+            />
+          )}
+        </>
+      ) : (
+        // A video with no poster has no still to show; say which kind of file
+        // it is rather than rendering a broken image.
+        <div className="flex aspect-square w-full items-center justify-center text-muted-foreground">
+          {isImage ? <ImagePlusIcon className="size-8" /> : <FilmIcon className="size-8" />}
+        </div>
+      )}
+    </button>
+  )
+}

package/src/ui/pagination.tsx

@@ -1,10 +1,10 @@
+import { useTranslation } from 'react-i18next'
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsLeftIcon,
   ChevronsRightIcon,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+} from '../spree/icons'
 import { Button } from './button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
 
@@ -33,27 +33,29 @@ export function Pagination({
   pageSizeOptions = [10, 20, 25, 30, 50],
 }: PaginationProps) {
   const { t } = useTranslation()
+  const showPageSize = Boolean(onPageSizeChange) && meta.count > 0
+  const showPageNav = meta.pages > 1
 
-  if (meta.pages <= 1 && !onPageSizeChange) return null
+  if (!showPageSize && !showPageNav) return null
 
   return (
-    <div className="flex items-center justify-between border-t border-border px-4 py-3">
-      <div className="text-sm text-muted-foreground">
+    <div className="flex items-center justify-between ps-2 py-2">
+      <div className="whitespace-nowrap text-sm text-muted-foreground">
         {t('admin.components.pagination.range', {
           from: meta.from,
           to: meta.to,
           count: meta.count,
         })}
       </div>
-      <div className="flex items-center gap-6">
-        {onPageSizeChange && (
-          <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 sm:gap-6">
+        {showPageSize && (
+          <div className="hidden items-center gap-2 sm:flex">
             <span className="text-sm text-muted-foreground">
               {t('admin.components.pagination.rows_per_page')}
             </span>
             <Select
               value={`${meta.limit}`}
-              onValueChange={(value) => onPageSizeChange(Number(value))}
+              onValueChange={(value) => onPageSizeChange?.(Number(value))}
             >
               <SelectTrigger className="h-8 w-[70px]">
                 <SelectValue />
@@ -68,13 +70,14 @@ export function Pagination({
             </Select>
           </div>
         )}
-        {meta.pages > 1 && (
+        {showPageNav && (
           <>
-            <span className="text-sm text-muted-foreground">
+            <span className="hidden whitespace-nowrap text-sm text-muted-foreground sm:inline">
               {t('admin.common.page_of', { page: meta.page, total: meta.pages })}
             </span>
             <div className="flex items-center gap-1">
               <Button
+                type="button"
                 size="icon-sm"
                 variant="outline"
                 className="hidden lg:flex"
@@ -85,8 +88,10 @@ export function Pagination({
                 <ChevronsLeftIcon />
               </Button>
               <Button
+                type="button"
                 size="icon-sm"
                 variant="outline"
+                className="size-9 sm:size-8"
                 disabled={!meta.previous}
                 onClick={() => meta.previous && onPageChange(meta.previous)}
               >
@@ -94,8 +99,10 @@ export function Pagination({
                 <ChevronLeftIcon />
               </Button>
               <Button
+                type="button"
                 size="icon-sm"
                 variant="outline"
+                className="size-9 sm:size-8"
                 disabled={!meta.next}
                 onClick={() => meta.next && onPageChange(meta.next)}
               >
@@ -103,6 +110,7 @@ export function Pagination({
                 <ChevronRightIcon />
               </Button>
               <Button
+                type="button"
                 size="icon-sm"
                 className="hidden lg:flex"
                 variant="outline"

package/src/ui/popover.tsx

@@ -56,8 +56,10 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            'z-50 w-auto rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-md',
-            '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]',
+            'z-50 w-auto rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-lg',
+            // `origin-(--transform-origin)` (published by Base UI's Positioner)
+            // so the panel grows out of its trigger rather than its own centre.
+            'origin-(--transform-origin) duration-100 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
             className,
           )}
           {...props}

package/src/ui/progress.tsx

@@ -30,7 +30,7 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       data-slot="progress-track"
-      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-blue-500/20', className)}
       {...props}
     />
   )
@@ -41,7 +41,10 @@ function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
       className={cn(
-        'h-full rounded-full bg-primary transition-all',
+        // `width` is a layout property, but it's the right one here: a
+        // determinate bar has to grow, and `scaleX` would distort the fill's
+        // rounded ends. Narrowed from `transition-all` so only width animates.
+        'h-full rounded-full bg-blue-500 transition-[width] duration-200 ease-out',
         'data-[indeterminate]:w-1/3 data-[indeterminate]:animate-pulse',
         className,
       )}

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}