@meith/theme-default 0.35.1 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "description": "Meith's default theme — every slot and every token, and the reference for what a complete theme fills.",
   "license": "MIT",
   "repository": {
@@ -20,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.35.1",
-    "@meith/ui": "^0.35.1"
+    "@meith/theme-kit": "^0.36.0",
+    "@meith/ui": "^0.36.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -29,7 +29,12 @@ export function announcementCopy(t: Translator): SlotCopy {
 }
 
 export function boardIndexCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['default.boardIndex.boardActivity', 'default.boardIndex.markAllRead'])
+  return copyFor(t, [
+    'default.boardIndex.boardActivity',
+    'default.boardIndex.markAllRead',
+    'default.boardIndex.heading',
+    'default.boardIndex.description',
+  ])
 }
 
 export function boardStatsCopy(t: Translator): SlotCopy {
@@ -103,7 +108,13 @@ export function forumRowCopy(t: Translator): SlotCopy {
 }
 
 export function headerCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['default.header.sections'])
+  return copyFor(t, [
+    'default.header.sections',
+    'default.header.openMenu',
+    'default.header.closeMenu',
+    'default.header.overview',
+    'default.panelNav.open',
+  ])
 }
 
 export function latestPostsCopy(t: Translator): SlotCopy {
@@ -168,7 +179,16 @@ export function paginationCopy(t: Translator): SlotCopy {
 }
 
 export function panelNavCopy(t: Translator): SlotCopy {
-  return copyFor(t, ['default.panelNav.countCap', 'default.panelNav.waiting'])
+  return copyFor(t, [
+    'default.panelNav.countCap',
+    'default.panelNav.waiting',
+    'default.panelNav.open',
+    'default.panelNav.close',
+    'default.panelNav.overview',
+    'default.panelNav.title.admincp',
+    'default.panelNav.title.usercp',
+    'default.panelNav.title.modcp',
+  ])
 }
 
 export function panelPageCopy(t: Translator): SlotCopy {

package/src/index.ts

@@ -1,4 +1,7 @@
+export { headerCopy as mobileHeaderNavCopy, panelNavCopy as mobilePanelNavCopy } from './copy'
 export { defaultMessages } from './messages'
+export { MobileHeaderNav } from './slots/mobile-header-nav'
+export { MobilePanelNav } from './slots/panel-nav'
 export { defaultTheme } from './theme'
 export {
   BROWSER_THEME_COLOR,

package/src/messages/en.json

@@ -2,6 +2,8 @@
   "default.announcement.posted": "Posted",
   "default.announcement.postedBy": "Posted by",
   "default.boardIndex.boardActivity": "Board activity",
+  "default.boardIndex.description": "Find your next conversation.",
+  "default.boardIndex.heading": "Community",
   "default.boardIndex.markAllRead": "Mark all forums read",
   "default.boardStats.counted": "Counted",
   "default.boardStats.heading": "Board statistics",
@@ -46,6 +48,9 @@
   "default.forumRow.thread.one": "thread",
   "default.forumRow.thread.other": "threads",
   "default.forumRow.threadsLabel": "Threads",
+  "default.header.closeMenu": "Close navigation",
+  "default.header.openMenu": "Open navigation",
+  "default.header.overview": "Overview",
   "default.header.sections": "Board sections",
   "default.latestPosts.asOf": "As of",
   "default.latestPosts.dot": "·",
@@ -81,7 +86,13 @@
   "default.pagination.of": "of",
   "default.pagination.page": "Page",
   "default.pagination.previous": "Previous",
+  "default.panelNav.close": "Close panel navigation",
   "default.panelNav.countCap": "99+",
+  "default.panelNav.open": "Open panel navigation",
+  "default.panelNav.overview": "Overview",
+  "default.panelNav.title.admincp": "Administration",
+  "default.panelNav.title.modcp": "Moderation",
+  "default.panelNav.title.usercp": "Your account",
   "default.panelNav.waiting": "waiting",
   "default.panelPage.back": "←",
   "default.postActions.edit": "Edit",

package/src/shared.tsx

@@ -7,11 +7,11 @@ import type {
 } from '@meith/theme-kit'
 import { Badge, cn } from '@meith/ui'
 
-const PAGE_WIDTH = 'max-w-6xl'
+const PAGE_WIDTH = 'max-w-7xl'
 
 export const PAGE = `mx-auto w-full ${PAGE_WIDTH} px-4 sm:px-6`
 
-export const PAGE_BODY = `${PAGE} flex w-full flex-col gap-5 py-5 sm:py-6`
+export const PAGE_BODY = `${PAGE} flex w-full flex-col gap-6 py-6 sm:py-8`
 
 export function pageAt(width: 'max-w-3xl' | 'max-w-4xl'): string {
   return `mx-auto w-full ${width} px-4 sm:px-6`
@@ -26,9 +26,6 @@ export const MUTED_LINK = `text-muted-foreground ${LINK}`
 
 export const BELOW_HEADER = 'top-14'
 
-export const PAGE_TITLE =
-  'font-heading text-xl font-semibold tracking-tight text-balance sm:text-2xl'
-
 export const SECTION_TITLE = 'font-heading text-lg font-semibold tracking-tight text-foreground'
 
 export const EYEBROW = 'text-xs font-semibold tracking-wide text-muted-foreground uppercase'
@@ -163,17 +160,20 @@ export function Figures({ items, className }: { items: readonly CountItem[]; cla
   return (
     <dl
       className={cn(
-        'flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground md:grid md:grid-cols-2 md:gap-x-5 md:text-center',
+        'flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground @3xl/card:grid @3xl/card:grid-cols-2 @3xl/card:gap-x-5 @3xl/card:text-center',
         className,
       )}
     >
       {items.map((item) => (
-        <div key={item.label} className="flex items-baseline gap-x-1 md:flex-col md:gap-0">
+        <div
+          key={item.label}
+          className="flex items-baseline gap-x-1 @3xl/card:flex-col @3xl/card:gap-0"
+        >
           <dt className="sr-only">{item.label}</dt>
-          <dd className={cn('font-semibold text-foreground md:text-sm', NUMERIC)}>
+          <dd className={cn('font-semibold text-foreground @3xl/card:text-sm', NUMERIC)}>
             {item.value.label}
           </dd>
-          <dd className="md:text-[0.6875rem] md:leading-4">
+          <dd className="@3xl/card:text-[0.6875rem] @3xl/card:leading-4">
             {item.value.value === 1 ? item.one : item.many}
           </dd>
         </div>

package/src/slots/auth-page.tsx

@@ -1,4 +1,5 @@
 import type { AuthPageModel } from '@meith/theme-kit'
+import { PageDescription, PageHeader, PageHeaderContent, PageTitle } from '@meith/ui'
 
 import { MUTED_LINK } from '../shared'
 
@@ -9,15 +10,13 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
       tabIndex={-1}
       className="flex flex-1 flex-col items-center justify-center px-4 py-10 sm:px-6 sm:py-14"
     >
-      <div className="flex w-full max-w-sm flex-col gap-6 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-elevation sm:p-8">
-        <div className="flex flex-col gap-1">
-          <h1 className="font-heading text-2xl font-semibold tracking-tight text-foreground">
-            {title}
-          </h1>
-          {regions.lede !== undefined && (
-            <p className="text-sm text-muted-foreground">{regions.lede}</p>
-          )}
-        </div>
+      <div className="flex w-full max-w-md flex-col gap-6 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-elevation sm:p-10">
+        <PageHeader>
+          <PageHeaderContent>
+            <PageTitle className="sm:text-2xl">{title}</PageTitle>
+            {regions.lede !== undefined && <PageDescription>{regions.lede}</PageDescription>}
+          </PageHeaderContent>
+        </PageHeader>
 
         {alert !== null && (
           <p

package/src/slots/board-index.tsx

@@ -1,6 +1,12 @@
 import type { BoardIndexModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { buttonVariants } from '@meith/ui'
+import {
+  buttonVariants,
+  PageDescription,
+  PageHeader,
+  PageHeaderContent,
+  PageTitle,
+} from '@meith/ui'
 
 import { PAGE_BODY } from '../shared'
 
@@ -21,13 +27,19 @@ export function BoardIndex({
         <div className="flex flex-col gap-3">{regions.announcements}</div>
       )}
 
-      {markAllReadAction !== null && (
-        <form action={markAllReadAction} method="post" className="-mb-3 self-end">
-          <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
-            {c('markAllRead')}
-          </button>
-        </form>
-      )}
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{c('heading')}</PageTitle>
+          <PageDescription>{c('description')}</PageDescription>
+        </PageHeaderContent>
+        {markAllReadAction !== null && (
+          <form action={markAllReadAction} method="post">
+            <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
+              {c('markAllRead')}
+            </button>
+          </form>
+        )}
+      </PageHeader>
 
       <div
         className={

package/src/slots/category-block.tsx

@@ -8,7 +8,7 @@ export function CategoryBlock({ category, children }: CategoryBlockModel) {
 
   return (
     <Card aria-labelledby={headingId} className="rounded-xl">
-      <CardHeader className="flex-col items-start gap-0 bg-card px-5 py-3">
+      <CardHeader className="flex-col items-start gap-1 bg-surface/50 px-5 py-4">
         <CardTitle id={headingId} className="flex items-center gap-2.5 text-base">
           <span aria-hidden="true" className="h-4 w-1 rounded-full bg-primary" />
           <a href={category.href} className={`${LINK} text-foreground`}>

package/src/slots/discovery-view.tsx

@@ -1,38 +1,21 @@
-import type { DiscoveryViewModel, SlotCopy, TabModel } from '@meith/theme-kit'
+import type { DiscoveryViewModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Avatar, buttonVariants, Card, CardRows, cn, Empty, EmptyDescription } from '@meith/ui'
+import {
+  Avatar,
+  buttonVariants,
+  Card,
+  CardRows,
+  cn,
+  Empty,
+  EmptyDescription,
+  NavTabs,
+  PageDescription,
+  PageHeader,
+  PageHeaderContent,
+  PageTitle,
+} from '@meith/ui'
 
-import { LINK, NUMERIC, PAGE_TITLE, PILL, pageAt, Stamp } from '../shared'
-
-const TAB =
-  'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-
-function Tabs({ label, tabs }: { label: string; tabs: readonly TabModel[] }) {
-  if (tabs.length === 0) return null
-
-  return (
-    <nav aria-label={label} className="flex flex-wrap items-center gap-x-3 gap-y-2">
-      <ul className="inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1">
-        {tabs.map((tab) => (
-          <li key={tab.href} className="shrink-0">
-            <a
-              href={tab.href}
-              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
-              className={cn(
-                TAB,
-                tab.isCurrent
-                  ? 'bg-card font-semibold text-primary shadow-sm'
-                  : 'font-medium text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {tab.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
+import { LINK, NUMERIC, PILL, pageAt, Stamp } from '../shared'
 
 export function DiscoveryView({
   title,
@@ -54,12 +37,14 @@ export function DiscoveryView({
       tabIndex={-1}
       className={`${pageAt('max-w-4xl')} flex flex-1 flex-col gap-6 py-6 sm:py-8`}
     >
-      <div className="flex flex-col gap-1">
-        <h1 className={PAGE_TITLE}>{title}</h1>
-        <p className="text-sm text-muted-foreground">{blurb}</p>
-      </div>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{title}</PageTitle>
+          <PageDescription>{blurb}</PageDescription>
+        </PageHeaderContent>
+      </PageHeader>
 
-      <Tabs label={tabsLabel} tabs={tabs} />
+      <NavTabs label={tabsLabel} tabs={tabs} />
 
       {refusal !== null ? (
         <p role="alert" className="rounded-lg border border-border bg-card px-4 py-3 text-sm">
@@ -88,7 +73,7 @@ export function DiscoveryView({
                   <div className="flex min-w-0 flex-col gap-0.5">
                     <a
                       href={row.href}
-                      className={`truncate text-[0.9375rem] font-medium text-foreground ${LINK}`}
+                      className={`line-clamp-2 [overflow-wrap:anywhere] text-[0.9375rem] font-medium text-foreground ${LINK}`}
                     >
                       {row.title}
                     </a>

package/src/slots/error-notice.tsx

@@ -1,6 +1,6 @@
 import type { ErrorNoticeModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { buttonVariants, Card, CardContent, CardFooter } from '@meith/ui'
+import { buttonVariants, Card, CardContent, CardFooter, PageTitle } from '@meith/ui'
 
 import { NUMERIC } from '../shared'
 
@@ -20,7 +20,7 @@ export function ErrorNotice({
         <p className={`text-xs font-medium tracking-wide text-destructive uppercase ${NUMERIC}`}>
           {c('error')} {status}
         </p>
-        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance">{title}</h1>
+        <PageTitle className="mt-1 sm:text-2xl">{title}</PageTitle>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <a href={homeHref} className={`mt-5 ${buttonVariants({ variant: 'primary' })}`}>

package/src/slots/footer.tsx

@@ -17,7 +17,7 @@ export function Footer({
     <footer className="mt-auto border-t border-border bg-card">
       {regions?.controls && (
         <div
-          className={`${PAGE} flex flex-wrap items-center justify-end gap-x-6 gap-y-3 border-b border-border py-3`}
+          className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-b border-border py-3`}
         >
           {regions.controls}
         </div>

package/src/slots/forum-display.tsx

@@ -9,9 +9,13 @@ import {
   EmptyAction,
   EmptyDescription,
   EmptyTitle,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageTitle,
 } from '@meith/ui'
 
-import { Counts, isEmptyRegion, PAGE_BODY, PAGE_TITLE } from '../shared'
+import { Counts, isEmptyRegion, PAGE_BODY } from '../shared'
 
 export function ForumDisplay({
   forum,
@@ -24,9 +28,9 @@ export function ForumDisplay({
 
   return (
     <div className={PAGE_BODY}>
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-        <div className="min-w-0">
-          <h1 className={PAGE_TITLE}>{forum.title}</h1>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{forum.title}</PageTitle>
           <div className="mt-1 flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm text-muted-foreground">
             {forum.description !== null && <p className="max-w-prose">{forum.description}</p>}
             {forum.type !== 'link' && (
@@ -48,9 +52,9 @@ export function ForumDisplay({
               />
             )}
           </div>
-        </div>
+        </PageHeaderContent>
 
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
+        <PageHeaderActions>
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
               <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
@@ -66,8 +70,8 @@ export function ForumDisplay({
               {c('newThread')}
             </a>
           )}
-        </div>
-      </div>
+        </PageHeaderActions>
+      </PageHeader>
 
       {regions.announcements !== undefined && (
         <div className="flex flex-col gap-3">{regions.announcements}</div>

package/src/slots/forum-jump.tsx

@@ -13,10 +13,11 @@ export function ForumJump({ action, field, forums, submitLabel, label }: ForumJu
       </Label>
 
       <NativeSelect
+        controlSize="sm"
         id={id}
         name={field}
         defaultValue={forums.find((forum) => forum.isSelected)?.value ?? ''}
-        className="h-8 w-auto min-w-48 flex-1 text-xs sm:flex-none"
+        className="h-8 w-auto min-w-0 max-w-full flex-1 sm:w-48 text-xs sm:flex-none"
       >
         {forums.map((forum) => (
           <option

package/src/slots/forum-row.tsx

@@ -29,15 +29,17 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
     <li
       data-unread={forum.isUnread ? '' : undefined}
       className={
-        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-3.5 transition-colors hover:bg-muted/50 sm:px-5' +
-        (isLink ? '' : ' md:grid-cols-[auto_minmax(0,1fr)_9rem_16rem] md:items-center md:gap-x-5')
+        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-4 transition-colors hover:bg-muted/50 sm:px-5' +
+        (isLink
+          ? ''
+          : ' @3xl/card:grid-cols-[auto_minmax(0,1fr)_6rem_13rem] @3xl/card:items-center @3xl/card:gap-x-5')
       }
     >
-      <Tile label={forum.title} unread={forum.isUnread} className="mt-0.5 md:mt-0">
+      <Tile label={forum.title} unread={forum.isUnread} className="mt-0.5 @3xl/card:mt-0">
         {isLink ? <LinkGlyph /> : undefined}
       </Tile>
 
-      <div className="min-w-0">
+      <div className="min-w-0 [overflow-wrap:anywhere]">
         <a
           href={forum.href}
           className={
@@ -70,9 +72,9 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
       </div>
 
       {!isLink && (
-        <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground md:contents">
+        <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground @3xl/card:contents">
           <Figures
-            className="md:col-start-3 md:justify-self-end"
+            className="@3xl/card:col-start-3 @3xl/card:justify-self-end"
             items={[
               {
                 label: c('threadsLabel'),
@@ -89,18 +91,18 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
             ]}
           />
 
-          <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
+          <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 @3xl/card:order-none @3xl/card:col-start-4 @3xl/card:block @3xl/card:border-l @3xl/card:border-border @3xl/card:pl-5">
             {forum.lastPost === null ? (
               <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (
               <>
                 <a
                   href={forum.lastPost.href}
-                  className={`max-w-full truncate font-medium text-foreground md:block ${LINK}`}
+                  className={`max-w-full truncate font-medium text-foreground @3xl/card:block ${LINK}`}
                 >
                   {forum.lastPost.threadTitle}
                 </a>
-                <span className="md:mt-0.5 md:block md:truncate">
+                <span className="@3xl/card:mt-0.5 @3xl/card:block @3xl/card:truncate">
                   {c('by')} <UserRef user={forum.lastPost.author} className="font-normal" />{' '}
                   {c('dot')} <Stamp at={forum.lastPost.at} />
                 </span>

package/src/slots/header.tsx

@@ -1,17 +1,12 @@
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
-import { BELOW_HEADER, PAGE } from '../shared'
+import { PAGE } from '../shared'
+import { MobileHeaderNav } from './mobile-header-nav'
 
 const DESKTOP_LINK =
   'inline-flex h-9 items-center rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground'
 
-const MOBILE_LINK =
-  'flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground'
-
-const SUMMARY =
-  'cursor-default list-none select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none'
-
 function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'>) {
   if (logo === undefined) {
     return (
@@ -50,7 +45,7 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   if (items === undefined || items.length === 0) return null
 
   return (
-    <ul className="invisible absolute top-full left-0 z-30 mt-1 min-w-52 rounded-xl border border-border bg-card p-1.5 opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+    <ul className="invisible absolute top-full left-0 z-30 min-w-52 rounded-xl border border-border bg-card p-1.5 opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
       {items.map((child) => (
         <li key={child.href}>
           <a
@@ -66,82 +61,6 @@ function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'
   )
 }
 
-function Chevron({ className }: { className: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 12 12"
-      className={className}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m4.5 3 3 3-3 3" />
-    </svg>
-  )
-}
-
-function MenuGlyph() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 20 20"
-      className="size-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-    >
-      <path className="group-open/menu:hidden" d="M3 5.5h14M3 10h14M3 14.5h14" />
-      <path className="hidden group-open/menu:block" d="m5 5 10 10M15 5 5 15" />
-    </svg>
-  )
-}
-
-function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
-  if (item.submenu === undefined || item.submenu.length === 0) {
-    return (
-      <li>
-        <a href={item.href} {...linkTarget(item)} className={MOBILE_LINK}>
-          {item.label}
-        </a>
-      </li>
-    )
-  }
-
-  return (
-    <li>
-      <details data-nav-disclosure name="default-header-submenu" className="group/submenu">
-        <summary
-          className={`${SUMMARY} flex min-h-11 items-center justify-between gap-2 rounded-lg pl-3 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground`}
-        >
-          <a
-            href={item.href}
-            {...linkTarget(item)}
-            className="min-w-0 flex-1 truncate hover:underline"
-          >
-            {item.label}
-          </a>
-          <span className="flex size-11 shrink-0 items-center justify-center">
-            <Chevron className="size-3 text-muted-foreground transition-transform group-open/submenu:rotate-90" />
-          </span>
-        </summary>
-        <ul className="mb-1 ml-3 flex flex-col gap-0.5 border-l border-border py-1 pl-2">
-          {item.submenu.map((child) => (
-            <li key={child.href}>
-              <a href={child.href} {...linkTarget(child)} className={MOBILE_LINK}>
-                {child.label}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </details>
-    </li>
-  )
-}
-
 export function Header({
   boardTitle,
   homeHref,
@@ -165,7 +84,7 @@ export function Header({
       <div className={`${PAGE} flex min-h-14 items-center gap-x-3 sm:gap-x-4`}>
         <a
           href={homeHref}
-          className="flex min-w-0 shrink-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-foreground transition-colors hover:text-primary"
+          className="flex min-w-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-foreground transition-colors hover:text-primary"
         >
           <BoardMark boardTitle={boardTitle} logo={logo} />
         </a>
@@ -201,28 +120,7 @@ export function Header({
 
         <div className="ms-auto flex min-w-0 shrink-0 items-center gap-2 sm:gap-3">{children}</div>
 
-        {hasNavigation && (
-          <nav aria-label={c('sections')} data-nav-view="mobile" className="lg:hidden">
-            <details data-nav-disclosure className="group/menu">
-              <summary
-                className={`${SUMMARY} flex size-10 items-center justify-center rounded-lg border border-border bg-card text-foreground transition-colors hover:border-primary/40 hover:text-primary group-open/menu:border-primary/40 group-open/menu:bg-primary/8 group-open/menu:text-primary`}
-              >
-                <MenuGlyph />
-                <span className="sr-only">{c('sections')}</span>
-              </summary>
-
-              <div
-                className={`absolute inset-x-0 ${BELOW_HEADER} z-30 max-h-[calc(100dvh-3.5rem)] overflow-y-auto border-b border-border bg-card shadow-elevation`}
-              >
-                <ul className={`${PAGE} flex flex-col gap-0.5 py-2`}>
-                  {navigation.map((item) => (
-                    <MobileNavItem key={item.href} item={item} />
-                  ))}
-                </ul>
-              </div>
-            </details>
-          </nav>
-        )}
+        <MobileHeaderNav boardTitle={boardTitle} navigation={navigation} copy={copy} />
       </div>
     </header>
   )

package/src/slots/mobile-header-nav.tsx

@@ -0,0 +1,80 @@
+import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
+import { NavigationDrawer, NavigationDrawerTrigger } from '@meith/ui'
+
+const LINK =
+  'flex min-h-11 items-center rounded-lg px-3 py-2 text-sm font-medium text-foreground hover:bg-muted'
+
+export function MobileHeaderNav({
+  boardTitle,
+  navigation,
+  copy,
+}: Pick<HeaderModel, 'boardTitle' | 'navigation'> & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.header.${key}`)
+  return (
+    <nav data-nav-view="mobile" aria-label={c('sections')} className="lg:hidden">
+      {(['usercp', 'modcp'] as const).map((panel) => (
+        <NavigationDrawerTrigger
+          key={panel}
+          target={`panel-${panel}-navigation`}
+          data-panel-nav-trigger={panel}
+          label={fromSlotCopy(copy, 'default.panelNav.open')}
+        />
+      ))}
+      {navigation.length > 0 && (
+        <div data-main-navigation>
+          <NavigationDrawer
+            id="board-mobile-navigation"
+            title={boardTitle}
+            openLabel={c('openMenu')}
+            closeLabel={c('closeMenu')}
+          >
+            <ul className="flex flex-col gap-1">
+              {navigation.map((item) => (
+                <li key={item.href}>
+                  {item.submenu !== undefined && item.submenu.length > 0 ? (
+                    <details className="group/section">
+                      <summary
+                        className={`${LINK} cursor-pointer list-none justify-between gap-3 select-none [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
+                      >
+                        <span className="min-w-0 break-words">{item.label}</span>
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          className="size-4 shrink-0 text-muted-foreground transition-transform group-open/section:rotate-90"
+                        >
+                          <path d="m6 4 4 4-4 4" />
+                        </svg>
+                      </summary>
+                      <ul className="my-1 ms-3 flex flex-col gap-1 border-s border-border ps-2">
+                        <li>
+                          <a href={item.href} {...linkTarget(item)} className={LINK}>
+                            {c('overview')}
+                          </a>
+                        </li>
+                        {item.submenu.map((child) => (
+                          <li key={child.href}>
+                            <a href={child.href} {...linkTarget(child)} className={LINK}>
+                              {child.label}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </details>
+                  ) : (
+                    <a href={item.href} {...linkTarget(item)} className={LINK}>
+                      {item.label}
+                    </a>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </NavigationDrawer>
+        </div>
+      )}
+    </nav>
+  )
+}

package/src/slots/pagination.tsx

@@ -17,7 +17,7 @@ export function Pagination({
 
   const c = (key: string) => fromSlotCopy(copy, `default.pagination.${key}`)
 
-  const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20 rounded-full')
+  const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20')
   const stepDisabled = cn(step, 'pointer-events-none opacity-40')
 
   return (
@@ -53,7 +53,7 @@ export function Pagination({
                     variant: entry.isCurrent ? 'primary' : 'ghost',
                     size: 'sm',
                   }),
-                  'min-w-8 rounded-full px-2',
+                  'min-w-8 px-2 pointer-coarse:min-w-11',
                   NUMERIC,
                   entry.isCurrent ? '' : 'hidden sm:inline-flex',
                 )}

package/src/slots/panel-nav.tsx

@@ -1,12 +1,11 @@
 import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { cn, Disclosure } from '@meith/ui'
+import { cn, NavigationDrawer } from '@meith/ui'
 
 import { PanelIcon } from '../panel-icons'
-import { BELOW_HEADER } from '../shared'
 
 const ITEM =
-  'group/item relative flex items-center gap-3 rounded-lg px-3 py-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+  'group/item relative flex items-center gap-3 rounded-lg px-3 py-2 pointer-coarse:min-h-11 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
 const HERE = 'bg-primary/10 font-semibold text-primary [&_svg]:text-primary'
 const OPEN = 'font-semibold text-foreground hover:bg-muted'
@@ -30,26 +29,30 @@ function Count({ count, copy }: { count: number; copy: SlotCopy }) {
   )
 }
 
-function Item({
-  item,
-  className,
-  copy,
-}: {
-  item: PanelNavItemModel
-  className: string
-  copy: SlotCopy
-}) {
-  const body = (
+function ItemContent({ item, copy }: { item: PanelNavItemModel; copy: SlotCopy }) {
+  return (
     <>
       {item.icon !== null && (
         <span className="text-muted-foreground/70 transition-colors group-hover/item:text-foreground">
           <PanelIcon icon={item.icon} />
         </span>
       )}
-      <span className="min-w-0 flex-1 truncate">{item.title}</span>
+      <span className="min-w-0 flex-1 text-start [overflow-wrap:anywhere]">{item.title}</span>
       {item.count !== null && <Count count={item.count} copy={copy} />}
     </>
   )
+}
+
+function Item({
+  item,
+  className,
+  copy,
+}: {
+  item: PanelNavItemModel
+  className: string
+  copy: SlotCopy
+}) {
+  const body = <ItemContent item={item} copy={copy} />
 
   if (item.isRecord) {
     return (
@@ -113,28 +116,94 @@ function Sections({
   )
 }
 
-export function PanelNav({
+export function MobilePanelNav({
+  panel,
   label,
   sections,
-  currentTitle,
   copy,
 }: PanelNavModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.panelNav.${key}`)
+
   return (
-    <>
-      <div
-        className={`sticky ${BELOW_HEADER} z-20 -mx-4 bg-background/95 px-4 py-2 backdrop-blur-sm sm:-mx-6 sm:px-6 lg:hidden`}
+    <div className="lg:hidden">
+      <NavigationDrawer
+        showTrigger={false}
+        id={`panel-${panel}-navigation`}
+        title={c(`title.${panel}`)}
+        openLabel={c('open')}
+        closeLabel={c('close')}
       >
-        <Disclosure
-          summary={label}
-          contentClassName="p-2"
-          {...(currentTitle === null ? {} : { aside: currentTitle })}
-        >
-          <Sections label={label} sections={sections} copy={copy} />
-        </Disclosure>
-      </div>
+        <nav aria-label={label} className="text-sm">
+          <ul className="flex flex-col gap-1">
+            {sections.map((section) => (
+              <li
+                key={section.href}
+                className={cn(section.isOverview && 'mb-2 border-b border-border pb-2')}
+              >
+                {section.children.length > 0 ? (
+                  <details open={section.isOpen} className="group/section">
+                    <summary
+                      className={cn(
+                        ITEM,
+                        'min-h-11 cursor-pointer list-none [&::-webkit-details-marker]:hidden',
+                        section.isOpen ? OPEN : ELSEWHERE,
+                      )}
+                    >
+                      <ItemContent item={section} copy={copy} />
+                      <svg
+                        aria-hidden="true"
+                        viewBox="0 0 16 16"
+                        className="size-4 shrink-0 transition-transform group-open/section:rotate-90"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <path d="m6 4 4 4-4 4" />
+                      </svg>
+                    </summary>
+                    <ul className="my-1 ms-5 flex flex-col gap-1 border-s-2 border-border ps-2">
+                      <li>
+                        <Item
+                          item={{ ...section, title: c('overview'), icon: null, count: null }}
+                          className={cn('min-h-11', section.current === 'here' ? HERE : ELSEWHERE)}
+                          copy={copy}
+                        />
+                      </li>
+                      {section.children.map((child) => (
+                        <li key={child.href}>
+                          <Item
+                            item={child}
+                            className={cn('min-h-11', child.current === 'here' ? HERE : ELSEWHERE)}
+                            copy={copy}
+                          />
+                        </li>
+                      ))}
+                    </ul>
+                  </details>
+                ) : (
+                  <Item
+                    item={section}
+                    className={cn('min-h-11', section.current === 'here' ? HERE : ELSEWHERE)}
+                    copy={copy}
+                  />
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </NavigationDrawer>
+    </div>
+  )
+}
 
+export function PanelNav(props: PanelNavModel & { copy: SlotCopy }) {
+  return (
+    <>
+      <MobilePanelNav {...props} />
       <div className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block">
-        <Sections label={label} sections={sections} copy={copy} />
+        <Sections label={props.label} sections={props.sections} copy={props.copy} />
       </div>
     </>
   )

package/src/slots/panel-page.tsx

@@ -1,8 +1,8 @@
 import type { PanelPageModel, PanelSectionModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { cn } from '@meith/ui'
+import { cn, PageHeader, PageHeaderActions, PageHeaderContent, PageTitle } from '@meith/ui'
 
-import { MUTED_LINK, PAGE, PAGE_TITLE, pageAt, SECTION_TITLE } from '../shared'
+import { MUTED_LINK, PAGE, pageAt, SECTION_TITLE } from '../shared'
 
 export function PanelPage({
   title,
@@ -28,8 +28,8 @@ export function PanelPage({
         gap === 'loose' ? 'gap-8' : 'gap-6',
       )}
     >
-      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3 border-b border-border pb-5">
-        <div className="flex min-w-0 flex-col gap-1">
+      <PageHeader className="border-b border-border pb-5">
+        <PageHeaderContent>
           {back !== null && (
             <a
               href={back.href}
@@ -39,7 +39,7 @@ export function PanelPage({
             </a>
           )}
 
-          <h1 className={PAGE_TITLE}>{title}</h1>
+          <PageTitle>{title}</PageTitle>
 
           {regions.lede !== undefined && (
             <p className="max-w-prose text-sm text-muted-foreground">{regions.lede}</p>
@@ -47,12 +47,10 @@ export function PanelPage({
           {regions.meta !== undefined && (
             <p className="text-xs text-muted-foreground">{regions.meta}</p>
           )}
-        </div>
+        </PageHeaderContent>
 
-        {regions.actions !== undefined && (
-          <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
-        )}
-      </div>
+        {regions.actions !== undefined && <PageHeaderActions>{regions.actions}</PageHeaderActions>}
+      </PageHeader>
 
       {children}
     </main>

package/src/slots/panel-shell.tsx

@@ -3,7 +3,7 @@ import type { PanelShellModel } from '@meith/theme-kit'
 import { EYEBROW, MUTED_LINK } from '../shared'
 
 const RAIL =
-  'flex flex-col gap-4 px-4 pt-5 sm:px-6 lg:sticky lg:w-64 lg:shrink-0 lg:self-start lg:pt-8 lg:pr-0'
+  'flex flex-col gap-4 lg:px-6 lg:sticky lg:w-64 lg:shrink-0 lg:self-start lg:pt-8 lg:pr-0'
 
 function SwitchGlyph() {
   return (
@@ -24,7 +24,7 @@ function SwitchGlyph() {
 
 export function PanelShell({ links, linksLabel, regions, children }: PanelShellModel) {
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row lg:gap-8">
+    <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col lg:flex-row lg:gap-8">
       <aside className={`${RAIL} lg:top-14`}>
         {regions.nav}
 

package/src/slots/post-bit.tsx

@@ -237,7 +237,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
           ) : (
             <div className={`flex-1 py-4 sm:py-5 ${BODY_X}`}>
               <div
-                className="prose-md text-[0.9375rem] sm:text-base"
+                className="prose-md max-w-prose text-[0.9375rem] sm:text-base"
                 dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
               />
 

package/src/slots/post-form.tsx

@@ -1,8 +1,8 @@
 import type { PostFormModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Alert, AlertDescription, AlertTitle, buttonVariants, Card, cn } from '@meith/ui'
+import { Alert, AlertDescription, AlertTitle, buttonVariants, Card, cn, PageTitle } from '@meith/ui'
 
-import { PAGE_TITLE, pageAt } from '../shared'
+import { pageAt } from '../shared'
 
 export function PostForm({
   heading,
@@ -17,7 +17,7 @@ export function PostForm({
   return (
     <div className={`${pageAt('max-w-3xl')} flex w-full flex-col gap-5 py-6 sm:py-8`}>
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
-        <h1 className={PAGE_TITLE}>{heading}</h1>
+        <PageTitle>{heading}</PageTitle>
         <a href={cancelHref} className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }))}>
           {cancelLabel}
         </a>

package/src/slots/redirect-notice.tsx

@@ -1,6 +1,6 @@
 import type { RedirectNoticeModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { buttonVariants, Card, CardContent } from '@meith/ui'
+import { buttonVariants, Card, CardContent, PageTitle } from '@meith/ui'
 
 export function RedirectNotice({
   message,
@@ -16,7 +16,7 @@ export function RedirectNotice({
         <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
           {c('redirecting')}
         </p>
-        <h1 className="mt-1 text-2xl font-semibold tracking-tight">{c('pleaseWait')}</h1>
+        <PageTitle className="mt-1 sm:text-2xl">{c('pleaseWait')}</PageTitle>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <div className="mt-5 flex flex-wrap items-center gap-3">

package/src/slots/search-results.tsx

@@ -13,6 +13,11 @@ import {
   Field,
   Input,
   NativeSelect,
+  NavTabs,
+  PageDescription,
+  PageHeader,
+  PageHeaderContent,
+  PageTitle,
 } from '@meith/ui'
 
 import { LINK, pageAt, Stamp } from '../shared'
@@ -37,16 +42,18 @@ export function SearchResults({
       tabIndex={-1}
       className={`${pageAt('max-w-3xl')} flex flex-1 flex-col gap-6 py-8`}
     >
-      <div className="flex flex-col gap-1">
-        <h1 className="font-heading text-2xl font-semibold">
-          {c('resultsFor')} {c('openQuote')}
-          {terms}
-          {c('closeQuote')}
-        </h1>
-        <p className="text-sm text-muted-foreground">
-          {c('searched')} <Stamp at={searchedAt} />. {c('searchedNote')}
-        </p>
-      </div>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>
+            {c('resultsFor')} {c('openQuote')}
+            {terms}
+            {c('closeQuote')}
+          </PageTitle>
+          <PageDescription>
+            {c('searched')} <Stamp at={searchedAt} />. {c('searchedNote')}
+          </PageDescription>
+        </PageHeaderContent>
+      </PageHeader>
 
       {refine !== undefined && <Refine {...refine} copy={copy} />}
 
@@ -147,32 +154,13 @@ function Refine({
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
         <p className="text-sm font-medium text-foreground">{summary}</p>
 
-        <nav
-          aria-label={sortsLabel}
-          className="inline-flex items-center gap-1 rounded-lg border border-border bg-surface p-1"
-        >
-          {sorts.map((sort) => (
-            <a
-              key={sort.label}
-              href={sort.href}
-              {...(sort.isCurrent ? { 'aria-current': 'true' as const } : {})}
-              className={cn(
-                'rounded-md px-2.5 py-1 text-xs whitespace-nowrap transition-colors',
-                sort.isCurrent
-                  ? 'bg-card font-semibold text-foreground shadow-sm'
-                  : 'font-medium text-muted-foreground hover:text-foreground',
-              )}
-            >
-              {sort.label}
-            </a>
-          ))}
-        </nav>
+        <NavTabs label={sortsLabel} tabs={sorts} />
 
         {applied.map((chip) => (
           <a
             key={chip.label}
             href={chip.removeHref}
-            className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-primary/20"
+            className="inline-flex min-h-8 pointer-coarse:min-h-11 items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-primary/20"
           >
             {chip.label}
             <span aria-hidden="true">{c('removeFilterX')}</span>
@@ -184,7 +172,7 @@ function Refine({
       <form
         method="get"
         action={action}
-        className="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border pt-2.5"
+        className="grid grid-cols-1 items-end gap-3 border-t border-border pt-3 sm:grid-cols-2"
       >
         {choices.map((choice) => (
           <Filter
@@ -197,7 +185,7 @@ function Refine({
 
         <button
           type="submit"
-          className={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'h-8')}
+          className={cn(buttonVariants({ variant: 'secondary' }), 'justify-self-start')}
         >
           {submitLabel}
         </button>
@@ -227,16 +215,11 @@ function Filter({
   const id = `filter-${name}`
 
   return (
-    <span className="inline-flex items-center gap-1.5">
+    <span className="flex min-w-0 flex-col gap-2">
       <label htmlFor={id} className="text-xs font-medium text-muted-foreground">
         {label}
       </label>
-      <NativeSelect
-        id={id}
-        name={name}
-        defaultValue={selected?.value ?? ''}
-        className="h-8 w-auto min-w-0 py-0 text-xs"
-      >
+      <NativeSelect id={id} name={name} defaultValue={selected?.value ?? ''} className="w-full">
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}

package/src/slots/thread-row.tsx

@@ -19,7 +19,7 @@ export function ThreadRow({
     <li
       data-unread={thread.isUnread ? '' : undefined}
       data-visibility={hidden ? thread.visibility : undefined}
-      className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-3.5 transition-colors hover:bg-muted/50 sm:px-5 md:grid-cols-[auto_minmax(0,1fr)_9rem_15rem] md:items-center md:gap-x-5 ${hidden ? tint : ''}`}
+      className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-3.5 gap-y-2 px-4 py-4 transition-colors hover:bg-muted/50 sm:px-5 @3xl/card:grid-cols-[auto_minmax(0,1fr)_6rem_13rem] @3xl/card:items-center @3xl/card:gap-x-5 ${hidden ? tint : ''}`}
     >
       <span className="flex items-center gap-2.5">
         {select !== null && (
@@ -41,7 +41,7 @@ export function ThreadRow({
         </span>
       </span>
 
-      <div className="min-w-0">
+      <div className="min-w-0 [overflow-wrap:anywhere]">
         <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
           {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
           {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
@@ -68,9 +68,9 @@ export function ThreadRow({
         </p>
       </div>
 
-      <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground md:contents">
+      <div className="col-start-2 flex min-w-0 flex-col gap-y-1 text-xs text-muted-foreground @3xl/card:contents">
         <Figures
-          className="md:col-start-3 md:justify-self-end"
+          className="@3xl/card:col-start-3 @3xl/card:justify-self-end"
           items={[
             {
               label: c('repliesLabel'),
@@ -87,18 +87,18 @@ export function ThreadRow({
           ]}
         />
 
-        <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
+        <div className="order-first flex min-w-0 max-w-full flex-wrap gap-x-1 @3xl/card:order-none @3xl/card:col-start-4 @3xl/card:block @3xl/card:border-l @3xl/card:border-border @3xl/card:pl-5">
           {thread.lastPost === null ? (
             <span className="text-thread-moved">{c('noRepliesYet')}</span>
           ) : (
             <>
               <a
                 href={thread.lastPost.href}
-                className={`font-medium text-foreground md:block ${LINK}`}
+                className={`font-medium text-foreground @3xl/card:block ${LINK}`}
               >
                 {c('latestReply')}
               </a>
-              <span className="md:mt-0.5 md:block md:truncate">
+              <span className="@3xl/card:mt-0.5 @3xl/card:block @3xl/card:truncate">
                 {c('by')} <UserRef user={thread.lastPost.author} className="font-normal" />{' '}
                 {c('dot')} <Stamp at={thread.lastPost.at} />
               </span>

package/src/slots/thread-view.tsx

@@ -1,8 +1,16 @@
 import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Badge, buttonVariants, cn } from '@meith/ui'
+import {
+  Badge,
+  buttonVariants,
+  cn,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageTitle,
+} from '@meith/ui'
 
-import { Counts, PAGE_BODY, PAGE_TITLE, Prefix } from '../shared'
+import { Counts, PAGE_BODY, Prefix } from '../shared'
 
 export function ThreadView({
   thread,
@@ -16,9 +24,9 @@ export function ThreadView({
 
   return (
     <div className={PAGE_BODY}>
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
-        <div className="min-w-0">
-          <h1 className={PAGE_TITLE}>{thread.title}</h1>
+      <PageHeader>
+        <PageHeaderContent>
+          <PageTitle>{thread.title}</PageTitle>
 
           <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
             {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
@@ -43,9 +51,9 @@ export function ThreadView({
               ]}
             />
           </div>
-        </div>
+        </PageHeaderContent>
 
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
+        <PageHeaderActions>
           {watch != null && (
             <form action={watch.action} method="post">
               <button type="submit" className={buttonVariants({ variant: 'outline' })}>
@@ -74,8 +82,8 @@ export function ThreadView({
               {c('replyAction')}
             </a>
           )}
-        </div>
-      </div>
+        </PageHeaderActions>
+      </PageHeader>
 
       {regions.tools !== undefined && (
         <div className="-mb-1 flex flex-col gap-3 empty:hidden">{regions.tools}</div>

package/src/theme.ts

@@ -70,7 +70,7 @@ import { WhoIsOnline } from './slots/who-is-online'
 export const defaultTheme = defineTheme({
   key: 'default',
   title: 'Default',
-  version: '0.35.1',
+  version: '0.36.0',
   slots: {
     Shell,
     Header,