@prenta/admin 2.6.1 → 2.8.0

package/src/components/forms/primitives.tsx

@@ -10,7 +10,8 @@
 import type { ReactNode } from 'react'
 import { AlertTriangle, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
 import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
-import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
+import { CountChip } from '../ui/CountChip.js'
+import type { EntryCounts, FormFieldType, FormStatus } from '../../lib/forms-service.js'
 
 // ─── Field-type badges ─────────────────────────────────────────────────────
 
@@ -28,7 +29,7 @@ function fieldTypeTone(type: FormFieldType): string {
     case 'select':
     case 'multiselect':
     case 'radio':
-      return 'bg-warning/10 text-warning'
+      return 'bg-warn-l text-warning'
     case 'checkbox':
     case 'consent':
       return 'bg-success/10 text-success'
@@ -95,29 +96,44 @@ export function UnreadBadge({ count, className = '' }: { count: number; classNam
   )
 }
 
-// ─── Summary chips ───────────────────────────────────────────────────────
+// ─── Entry count chips ───────────────────────────────────────────────────
 
-export function SummaryChip({
-  value,
-  label,
-  tone = 'neutral',
+/** The inbox status filters a count chip can switch on. */
+type EntryChipFilter = 'unread' | 'starred'
+
+/**
+ * The inbox's header counts (Inbox.html `.stat-pills`), shared by All
+ * Entries and each form's entries. "unread" and "starred" are toggles for
+ * the matching status filter, selected while it is on; a second click goes
+ * back to all entries. "this week" is repo-only.
+ */
+export function EntryCountChips({
+  counts,
+  filter,
+  onFilter,
 }: {
-  value: ReactNode
-  label: string
-  tone?: 'neutral' | 'success' | 'warning' | 'destructive'
+  counts: Pick<EntryCounts, 'total' | 'unread' | 'starred' | 'thisWeek'>
+  /** The view's current status filter. */
+  filter: string
+  onFilter: (next: 'all' | EntryChipFilter) => void
 }) {
-  const valueCls =
-    tone === 'success'
-      ? 'text-success'
-      : tone === 'warning'
-        ? 'text-warning'
-        : tone === 'destructive'
-          ? 'text-destructive'
-          : 'text-foreground'
+  const toggle = (chip: EntryChipFilter) => () => onFilter(filter === chip ? 'all' : chip)
   return (
-    <div className="border-border bg-card flex items-baseline gap-1.5 rounded-lg border px-3 py-2">
-      <span className={`text-base font-medium tabular-nums ${valueCls}`}>{value}</span>
-      <span className="text-muted-foreground text-sm">{label}</span>
+    <div className="flex flex-wrap gap-1.5">
+      <CountChip n={counts.total} label="total" />
+      <CountChip
+        n={counts.unread}
+        label="unread"
+        selected={filter === 'unread'}
+        onClick={toggle('unread')}
+      />
+      <CountChip
+        n={counts.starred}
+        label="starred"
+        selected={filter === 'starred'}
+        onClick={toggle('starred')}
+      />
+      <CountChip n={counts.thisWeek} label="this week" />
     </div>
   )
 }

package/src/components/pages/tag-badges.tsx

@@ -10,7 +10,8 @@ import { paletteFor, TAG_COLOR_KEYS, type TagColorKey } from '../posts/badges.js
  *     colored dot so tags don't rely on color alone.
  *
  * Both resolve color through the shared `paletteFor` palette so they
- * stay consistent with Post Type badges and work in light/dark mode.
+ * stay consistent with Post Type badges and work in light/dark mode, and
+ * neither wraps its label ("Landing Pages" stays on one line).
  */
 
 export { TAG_COLOR_KEYS }
@@ -49,7 +50,7 @@ export function PageTagChip({
       type="button"
       onClick={onToggle}
       aria-pressed={selected}
-      className={`focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 ${
+      className={`focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap transition-colors focus:outline-none focus-visible:ring-2 ${
         selected
           ? `${p.bg} ${p.text} border-transparent ring-1 ${p.ring}`
           : 'border-border bg-background text-foreground hover:bg-accent'
@@ -68,7 +69,7 @@ export function PageTagPill({ name, color }: { name: string; color: string | nul
   const p = paletteFor(color)
   return (
     <span
-      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap ${p.bg} ${p.text}`}
     >
       <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${tagDotColor(color)}`} />
       {name}

package/src/components/seo/PageAuditPanel.tsx

@@ -76,7 +76,7 @@ function CheckRow({ check }: { check: AuditCheck }) {
       <span
         aria-hidden
         className={`mt-0.5 h-4 w-4 shrink-0 rounded ${
-          na ? 'bg-muted' : pass ? 'bg-success/15 text-success' : 'bg-warning/15 text-warning'
+          na ? 'bg-muted' : pass ? 'bg-success/15 text-success' : 'bg-warn-l text-warning'
         }`}
       />
       <div className="min-w-0">
@@ -122,7 +122,7 @@ function CheckGroup({ result, title }: { result: AuditGroupResult; title: string
               band === 'good'
                 ? 'bg-success/15 text-success'
                 : band === 'fair'
-                  ? 'bg-warning/15 text-warning'
+                  ? 'bg-warn-l text-warning'
                   : band === 'poor'
                     ? 'bg-destructive/15 text-destructive'
                     : 'bg-muted text-muted-foreground'

package/src/components/seo/SerpPreview.tsx

@@ -7,10 +7,10 @@
  * they see them, so an editor can judge a title and description as a result
  * rather than as two form fields.
  *
- * The link blue is a literal, not a token: it is Google's result colour, and
- * the point of the card is to look like the thing being previewed. Tokenising
- * it would let a brand accent repaint it and quietly stop it being a preview.
- * `#8ab4f8` is the dark-scheme equivalent.
+ * The link blue is Google's result colour (`--serp-link`, with its own dark
+ * value), never the accent: the point of the card is to look like the thing
+ * being previewed, and letting a brand accent repaint it would quietly stop
+ * it being a preview.
  */
 export interface SerpPreviewProps {
   title: string
@@ -29,7 +29,7 @@ export function SerpPreview({ title, url, description }: SerpPreviewProps) {
       <p className="truncate text-[11px] text-emerald-700 dark:text-emerald-400">
         {url || 'https://example.com/page'}
       </p>
-      <p className="truncate text-[14px] leading-snug text-[#1a0dab] dark:text-[#8ab4f8]">
+      <p className="truncate text-[14px] leading-snug text-[var(--serp-link)]">
         {title || 'Untitled page'}
       </p>
       {/* Two lines is what a result gets; more written here simply is not read. */}

package/src/components/seo/primitives.tsx

@@ -25,7 +25,7 @@ export function gradeMeta(grade: SeoGrade): GradeMeta {
     case 'good':
       return { label: 'Good', text: 'text-success', bg: 'bg-success/10', dot: 'bg-success' }
     case 'fair':
-      return { label: 'Fair', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' }
+      return { label: 'Fair', text: 'text-warning', bg: 'bg-warn-l', dot: 'bg-warning' }
     case 'poor':
       return {
         label: 'Poor',
@@ -94,7 +94,7 @@ export function severityMeta(severity: SeoSeverity): GradeMeta {
         dot: 'bg-destructive',
       }
     case 'warning':
-      return { label: 'Warning', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' }
+      return { label: 'Warning', text: 'text-warning', bg: 'bg-warn-l', dot: 'bg-warning' }
     default:
       return {
         label: 'Info',

package/src/components/ui/AuthorAvatar.tsx

@@ -7,18 +7,19 @@
  * feed and the Pages/Posts list tables so an author always looks the
  * same everywhere.
  *
- * The palette is intentionally raw hex applied via inline style — the
- * design-system exception for truly dynamic values (see Dashboard.tsx
- * note). All swatches keep ≥4.5:1 contrast with white text.
+ * The palette is the `--avatar-*` tokens (tokens.json), applied via inline
+ * style because the pick is computed. Every swatch keeps ≥4.5:1 with the
+ * white initials; the token drift test enforces it.
  */
 export const AVATAR_COLORS = [
-  '#7C3AED', // purple-600 — 5.70:1 on white
-  '#E11D48', // rose-600 — 4.70:1 on white
-  '#047857', // emerald-700 — 5.48:1 (#059669 is 3.77:1)
-  '#0E7490', // cyan-700 — 5.36:1 (#0891B2 is 3.68:1)
-  '#92400E', // amber-800 — 7.09:1 (#D97706 is 3.18:1)
-  '#4F46E5', // indigo-600 — 6.29:1 on white
-  '#DC2626', // red-600 — 4.83:1 on white
+  'var(--avatar-1)',
+  'var(--avatar-2)',
+  'var(--avatar-3)',
+  'var(--avatar-4)',
+  'var(--avatar-5)',
+  'var(--avatar-6)',
+  'var(--avatar-7)',
+  'var(--avatar-8)',
 ] as const
 
 function hashString(s: string): number {

package/src/components/ui/Badge.tsx

@@ -6,7 +6,7 @@ const badge = cv('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs fo
     tone: {
       neutral: 'bg-muted text-muted-foreground',
       success: 'bg-success/10 text-success',
-      warning: 'bg-warning/10 text-warning',
+      warning: 'bg-warn-l text-warning',
       danger: 'bg-destructive/10 text-destructive',
       info: 'bg-info/10 text-info',
       primary: 'bg-[var(--primary)]/15 text-[var(--primary)] dark:bg-[var(--primary)]/25',

package/src/components/ui/Breadcrumb.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { Fragment, type MouseEvent, type ReactNode } from 'react'
+import { useAdminLinks } from './admin-links.js'
+
+export interface BreadcrumbItem {
+  label: string
+  /**
+   * Admin path, e.g. `/posts`. Renders a real link (base path included) and
+   * routes plain clicks in-app. Preferred over `href` / `onClick`.
+   */
+  path?: string
+  /** Real URL for the crumb. With `onClick`, plain clicks go to `onClick` instead. */
+  href?: string
+  /** In-app navigation, e.g. `() => onNavigate('/posts')`. */
+  onClick?: () => void
+  /** Optional leading icon (13px). */
+  icon?: ReactNode
+}
+
+export interface BreadcrumbProps {
+  /** Ancestors first. The last item is the current page. */
+  items: BreadcrumbItem[]
+  className?: string
+}
+
+// Explicit size and leading: the admin base layer styles `button` at 13px / 1.5.
+const LINK_CLASS =
+  'inline-flex cursor-pointer items-center gap-[5px] border-0 bg-transparent p-0 text-sm2 leading-[normal] font-[450] text-sub no-underline hover:text-acc'
+
+function isPlainClick(event: MouseEvent) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey
+}
+
+/**
+ * Breadcrumb for second-level screens only (SHELL.md §4 "Breadcrumb rule"):
+ * `Dashboard / Section / Screen`. Top-level pages have none. Pass it to
+ * `PageHeader` as `breadcrumb`.
+ */
+export function Breadcrumb({ items, className = '' }: BreadcrumbProps) {
+  const links = useAdminLinks()
+  if (items.length === 0) return null
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="text-sm2 text-faint m-0 flex list-none flex-wrap items-center gap-[7px] p-0 leading-[normal]">
+        {items.map((raw, index) => {
+          const current = index === items.length - 1
+          // Kit crumbs are `<a href>`: a path becomes a real link that still
+          // navigates in-app on a plain click.
+          const navigate = links.navigate
+          const item: BreadcrumbItem = raw.path
+            ? {
+                ...raw,
+                href: links.href(raw.path),
+                onClick: navigate ? () => navigate(raw.path!) : raw.onClick,
+              }
+            : raw
+          return (
+            <Fragment key={`${index}-${item.label}`}>
+              {index > 0 ? (
+                <li aria-hidden="true" className="text-faint flex">
+                  /
+                </li>
+              ) : null}
+              <li className="flex min-w-0 items-center whitespace-nowrap">
+                {current ? (
+                  <span
+                    aria-current="page"
+                    className="text-txt inline-flex items-center gap-[5px] font-[550]"
+                  >
+                    {item.icon}
+                    {item.label}
+                  </span>
+                ) : item.href ? (
+                  <a
+                    href={item.href}
+                    className={LINK_CLASS}
+                    onClick={
+                      item.onClick
+                        ? (event) => {
+                            if (!isPlainClick(event)) return
+                            event.preventDefault()
+                            item.onClick?.()
+                          }
+                        : undefined
+                    }
+                  >
+                    {item.icon}
+                    {item.label}
+                  </a>
+                ) : item.onClick ? (
+                  <button type="button" className={LINK_CLASS} onClick={item.onClick}>
+                    {item.icon}
+                    {item.label}
+                  </button>
+                ) : (
+                  <span className="text-sub inline-flex items-center gap-[5px] font-[450]">
+                    {item.icon}
+                    {item.label}
+                  </span>
+                )}
+              </li>
+            </Fragment>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/components/ui/Button.tsx

@@ -3,26 +3,42 @@
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
 import { cv, type VariantProps } from '../../lib/cv.js'
 
+// Kit buttons (SHELL.md §5, `.jb-btn` in jobs-view.jsx). Focus uses the
+// admin-wide `:focus-visible` outline (2px --acc, offset 2px).
 const button = cv(
-  // Base classes apply to every variant.
-  'focus-visible:ring-offset-background inline-flex items-center justify-center gap-2 rounded-[var(--r-control)] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 border font-semibold whitespace-nowrap disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
-        secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
-        danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
-        ghost: 'bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
-        outline:
-          'border border-[var(--border)] bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
-        link: 'bg-transparent text-[var(--primary)] underline-offset-4 hover:underline',
+        primary: 'border-acc bg-acc text-acc-on hover:brightness-[1.07]',
+        /** Card surface with a hairline border. */
+        secondary: 'border-bdr bg-card text-txt hover:border-acc-m hover:text-acc',
+        /** @deprecated Use `secondary`; kept for existing callers. */
+        outline: 'border-bdr bg-card text-txt hover:border-acc-m hover:text-acc',
+        ghost: 'text-sub hover:bg-bg hover:text-txt border-transparent bg-transparent',
+        /** Outline danger; fills with the error tint on hover. */
+        danger:
+          'bg-card text-err hover:bg-err-l border-[color-mix(in_srgb,var(--err)_35%,var(--bdr))]',
+        /**
+         * AI gradient. Keeps its text label at tablet width, where other
+         * header actions collapse to icons (`data-keep-label`); on mobile every
+         * header action is a 44px icon, AI included (cms-layouts.css).
+         */
+        ai: 'text-acc-on border-0 bg-[linear-gradient(135deg,var(--ai1),var(--ai2))] hover:brightness-[1.07] active:translate-y-px',
+        /** Row and toolbar icon button: quiet until hovered. */
+        icon: 'text-sub hover:border-bdr hover:bg-bg hover:text-txt border-transparent bg-transparent',
+        /** Inline text link; ignores the size's height and padding. */
+        link: 'text-acc h-auto! border-transparent bg-transparent px-0! underline-offset-4 hover:underline',
       },
       size: {
-        xs: 'h-7 px-2 text-xs',
-        sm: 'h-8 px-2.5 text-xs',
-        md: 'h-9 px-4 text-sm',
-        lg: 'h-10 px-6 text-base',
-        icon: 'h-9 w-9 p-0',
+        /** 34px, 13px text. */
+        md: 'rounded-8 text-body h-[34px] px-[13px]',
+        /** 28px, 12px text. */
+        sm: 'rounded-8 text-meta h-7 px-2.5',
+        /** 30×30 row icon button. */
+        icon: 'rounded-7 h-[30px] w-[30px] p-0',
+        /** 34×34 topbar / header icon button. */
+        'icon-lg': 'rounded-8 h-[34px] w-[34px] p-0',
       },
     },
     defaultVariants: {
@@ -65,6 +81,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       ref={ref}
       disabled={disabled || loading}
       aria-busy={loading || undefined}
+      // The variant decides how a header action collapses at tablet and
+      // mobile (responsive.css, `[data-header-actions]`).
+      data-variant={variant ?? 'primary'}
+      data-keep-label={variant === 'ai' ? '' : undefined}
       className={button({
         variant,
         size,
@@ -73,7 +93,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       {...rest}
     >
       {loading ? (
-        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden>
+        <svg
+          className="h-3.5 w-3.5 motion-safe:animate-spin"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden
+        >
           <circle
             className="opacity-25"
             cx="12"

package/src/components/ui/Card.tsx

@@ -1,32 +1,31 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
 import { cv, type VariantProps } from '../../lib/cv.js'
 
-const card = cv(
-  'overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] text-[var(--txt)]',
-  {
-    variants: {
-      padding: {
-        none: 'p-0',
-        /** Stat / compact surfaces (`.dstat`). */
-        sm: 'px-4 py-3.5',
-        /** Simple padded panel (`.dcard-b`). */
-        md: 'px-6 py-4',
-        lg: 'px-6 py-6',
-      },
-      elevation: {
-        flat: 'shadow-none',
-        resting: 'shadow-[var(--shd)]',
-        elevated: 'shadow-[var(--shd2)]',
-      },
+// Kit card (SHELL.md §7, `.ap-card` / `.ap-ch`): --card, 1px --bdr, radius 12,
+// --shd. Header row 13px 16px with a bottom border; body 14px 16px.
+const card = cv('rounded-12 border-bdr bg-card text-txt overflow-hidden border', {
+  variants: {
+    padding: {
+      none: 'p-0',
+      /** Stat / compact surfaces (`.dstat`). */
+      sm: 'px-4 py-3.5',
+      /** Card body padding (`.ap-cb`). */
+      md: 'px-4 py-3.5',
+      lg: 'px-6 py-6',
+    },
+    elevation: {
+      flat: 'shadow-none',
+      resting: 'shadow-shd',
+      elevated: 'shadow-shd2',
     },
-    defaultVariants: { padding: 'none', elevation: 'resting' },
   },
-)
+  defaultVariants: { padding: 'none', elevation: 'resting' },
+})
 
 type CardVariants = VariantProps<typeof card>
 
 const INTERACTIVE_CLASS =
-  'motion-safe:transition-shadow motion-safe:duration-[var(--motion-fast)] hover:shadow-[var(--shd2)] focus-within:shadow-[var(--shd2)]'
+  'motion-safe:transition-shadow motion-safe:duration-[var(--mo-fast)] hover:shadow-shd2 focus-within:shadow-shd2'
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
   /** Apply hover/focus elevation transitions (e.g. for clickable cards). */
@@ -46,7 +45,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
   )
 })
 
-/** Header slot — `.dcard-h` in the design system handoff. */
+/** Header row (`.ap-ch`): a flex row, gap 10, padding 13px 16px, bottom hairline. */
 export function CardHeader({
   className = '',
   bordered = true,
@@ -55,7 +54,11 @@ export function CardHeader({
 }: HTMLAttributes<HTMLDivElement> & { bordered?: boolean }) {
   return (
     <div
-      className={[bordered ? 'border-b border-[var(--bdr)] px-6 pt-6 pb-4' : '', className]
+      className={[
+        'flex items-center gap-2.5 px-4 py-[13px]',
+        bordered ? 'border-bdr border-b' : '',
+        className,
+      ]
         .filter(Boolean)
         .join(' ')}
       {...rest}
@@ -65,40 +68,40 @@ export function CardHeader({
   )
 }
 
+/** Card heading (`.ap-ch h2`): 13.5px / 650, takes the row's free space. */
 export function CardTitle({
+  as: Heading = 'h3',
   className = '',
   children,
   ...rest
-}: HTMLAttributes<HTMLHeadingElement>) {
+}: HTMLAttributes<HTMLHeadingElement> & { as?: 'h2' | 'h3' }) {
   return (
-    <h3
-      className={`text-[length:var(--fs-card)] font-semibold text-[var(--txt)] ${className}`}
+    <Heading
+      className={`text-card-title text-txt min-w-0 flex-1 leading-[normal] font-[650] ${className}`}
       {...rest}
     >
       {children}
-    </h3>
+    </Heading>
   )
 }
 
+/** Card subline (`.ap-ch p`): 12px --sub, 1px below the title. */
 export function CardDescription({
   className = '',
   children,
   ...rest
 }: HTMLAttributes<HTMLParagraphElement>) {
   return (
-    <p className={`mt-px text-[length:var(--fs-hint)] text-[var(--muted)] ${className}`} {...rest}>
+    <p className={`text-meta text-sub mt-px leading-[normal] ${className}`} {...rest}>
       {children}
     </p>
   )
 }
 
-/** Body slot — `.dcard-b` in the design system handoff. */
+/** Body slot: padding 14px 16px. */
 export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
-      className={`px-6 pt-4 pb-6 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
-      {...rest}
-    >
+    <div className={`text-body text-sub px-4 py-3.5 leading-[1.55] ${className}`} {...rest}>
       {children}
     </div>
   )

package/src/components/ui/CardListControls.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+type Dir = 'asc' | 'desc'
+
+export interface CardSortOption<F extends string> {
+  field: F
+  label: string
+}
+
+export interface CardListControlsProps<F extends string> {
+  /** Select all / none, as the table header's checkbox does. */
+  selectAll?: {
+    checked: boolean
+    onChange: (checked: boolean) => void
+    disabled?: boolean
+  }
+  /** The columns the header can sort by, as one select with both directions. */
+  sort?: {
+    options: CardSortOption<F>[]
+    field: F | null
+    dir: Dir
+    onChange: (field: F, dir: Dir) => void
+  }
+  /** Spacing from the screen's own layout. */
+  className?: string
+}
+
+/**
+ * Below 769px a list table is drawn as cards (`table[data-cards]`), and the
+ * header row holding its sort buttons and select-all checkbox is hidden: it
+ * is clipped to nothing, and responsive.css takes its controls out of the tab
+ * order. This row brings both back for phones, at 44px. At 769px and up it is
+ * `display: none`, since the header has them. The checkbox is named by its
+ * visible "Select all": it sits right above the cards, and only one of it and
+ * the header's checkbox is ever exposed.
+ */
+export function CardListControls<F extends string>({
+  selectAll,
+  sort,
+  className,
+}: CardListControlsProps<F>) {
+  if (!selectAll && !sort) return null
+  const value = sort?.field ? `${sort.field}:${sort.dir}` : ''
+  return (
+    <div
+      className={`not-mobile:hidden flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 ${className ?? ''}`}
+    >
+      {selectAll ? (
+        <label className="flex min-h-11 cursor-pointer items-center gap-2.5 text-sm text-[var(--txt)]">
+          <input
+            type="checkbox"
+            checked={selectAll.checked}
+            disabled={selectAll.disabled}
+            onChange={(e) => selectAll.onChange(e.target.checked)}
+            className="h-6 w-6 cursor-pointer accent-[var(--acc)]"
+          />
+          Select all
+        </label>
+      ) : null}
+      {sort ? (
+        <label className="ml-auto flex items-center gap-2 text-sm text-[var(--sub)]">
+          Sort
+          <select
+            aria-label="Sort by"
+            value={value}
+            onChange={(e) => {
+              const [field, dir] = e.target.value.split(':') as [F, Dir]
+              if (field) sort.onChange(field, dir)
+            }}
+            className="rounded-8 min-h-11 border border-[var(--bdr)] bg-[var(--card)] px-2.5 text-sm text-[var(--txt)]"
+          >
+            {sort.field ? null : (
+              <option value="" disabled>
+                Default order
+              </option>
+            )}
+            {sort.options.flatMap((option) => [
+              <option key={`${option.field}:asc`} value={`${option.field}:asc`}>
+                {option.label}, ascending
+              </option>,
+              <option key={`${option.field}:desc`} value={`${option.field}:desc`}>
+                {option.label}, descending
+              </option>,
+            ])}
+          </select>
+        </label>
+      ) : null}
+    </div>
+  )
+}