@meith/theme-default 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.31.0",
+  "version": "0.33.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.31.0",
-    "@meith/ui": "^0.31.0"
+    "@meith/theme-kit": "^0.33.0",
+    "@meith/ui": "^0.33.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/copy.ts

@@ -304,6 +304,8 @@ export function threadViewCopy(t: Translator): SlotCopy {
     'default.threadView.view.one',
     'default.threadView.view.other',
     'default.threadView.viewsLabel',
+    'default.threadView.watch',
+    'default.threadView.watching',
   ])
 }
 

package/src/messages/en.json

@@ -170,6 +170,8 @@
   "default.threadView.view.one": "view",
   "default.threadView.view.other": "views",
   "default.threadView.viewsLabel": "Views",
+  "default.threadView.watch": "Watch",
+  "default.threadView.watching": "Watching",
   "default.userPanel.new": "new",
   "default.userPanel.signedIn": "Signed in",
   "default.userPanel.unread": "unread",

package/src/shared.tsx

@@ -17,12 +17,18 @@ export function pageAt(width: 'max-w-3xl' | 'max-w-4xl'): string {
   return `mx-auto w-full ${width} px-4 sm:px-6`
 }
 
-export const LINK = 'hover:underline underline-offset-2 decoration-1 decoration-primary'
+export const LINK =
+  'transition-colors hover:text-primary hover:underline underline-offset-2 decoration-1 decoration-primary'
 
-export const MUTED_LINK = `text-muted-foreground transition-colors hover:text-foreground ${LINK}`
+export const MUTED_LINK = `text-muted-foreground ${LINK}`
 
 export function UserRef({ user, className }: { user: UserRefModel; className?: string }) {
-  const classes = cn('font-medium', className, user.nameClass)
+  const classes = cn(
+    'font-medium',
+    user.nameClass == null && 'text-primary',
+    className,
+    user.nameClass,
+  )
   if (user.profileHref === null) {
     return <span className={classes}>{user.username}</span>
   }
@@ -50,8 +56,8 @@ export function ReadSpacer() {
 }
 
 export function isEmptyRegion(node: React.ReactNode): boolean {
-  if (node === null || node === undefined || node === false) return true
-  return Array.isArray(node) && node.length === 0
+  if (node === null || node === undefined || node === false || node === '') return true
+  return Array.isArray(node) && node.every((child) => isEmptyRegion(child))
 }
 
 export const NUMERIC = 'tabular-nums'
@@ -96,7 +102,7 @@ export function Counts({ items, className }: { items: readonly CountItem[]; clas
         <div key={item.label}>
           <dt className="sr-only">{item.label}</dt>
           <dd>
-            <span className={cn('font-medium text-foreground', NUMERIC)}>{item.value.label}</span>{' '}
+            <span className={cn('font-semibold text-primary', NUMERIC)}>{item.value.label}</span>{' '}
             {item.value.value === 1 ? item.one : item.many}
           </dd>
         </div>

package/src/slots/announcement.tsx

@@ -15,7 +15,7 @@ export function Announcement({
   const c = (key: string) => fromSlotCopy(copy, `default.announcement.${key}`)
 
   return (
-    <Card as="article" className="border-l-4 border-l-foreground">
+    <Card as="article" className="border-l-4 border-l-primary">
       <CardContent className="flex flex-col gap-2 p-4">
         <h2 className="text-lg font-semibold tracking-tight text-balance">{title}</h2>
 
@@ -28,7 +28,7 @@ export function Announcement({
             c('posted')
           ) : (
             <>
-              {c('postedBy')} <UserRef user={postedBy} className="text-foreground" />
+              {c('postedBy')} <UserRef user={postedBy} />
             </>
           )}{' '}
           <Stamp at={postedAt} />

package/src/slots/auth-page.tsx

@@ -9,7 +9,7 @@ export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
       tabIndex={-1}
       className="flex flex-1 flex-col items-center justify-center px-6 py-12"
     >
-      <div className="flex w-full max-w-sm flex-col gap-6 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm">
+      <div className="flex w-full max-w-sm flex-col gap-6 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-elevation">
         <div className="flex flex-col gap-1">
           <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
           {regions.lede !== undefined && (

package/src/slots/board-index.tsx

@@ -21,8 +21,8 @@ export function BoardIndex({
       )}
 
       {markAllReadAction !== null && (
-        <form action={markAllReadAction} method="post" className="self-end">
-          <button type="submit" className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
+        <form action={markAllReadAction} method="post" className="-mb-2 self-end">
+          <button type="submit" className={buttonVariants({ variant: 'outline', size: 'sm' })}>
             {c('markAllRead')}
           </button>
         </form>

package/src/slots/board-stats.tsx

@@ -39,7 +39,7 @@ export function BoardStats({
 
           {newestMember !== null && (
             <span>
-              {c('newestMember')} <UserRef user={newestMember} className="text-foreground" />
+              {c('newestMember')} <UserRef user={newestMember} />
             </span>
           )}
 

package/src/slots/category-block.tsx

@@ -8,9 +8,9 @@ export function CategoryBlock({ category, children }: CategoryBlockModel) {
 
   return (
     <Card aria-labelledby={headingId}>
-      <CardHeader className="flex-col items-start gap-0.5">
-        <CardTitle id={headingId}>
-          <a href={category.href} className={LINK}>
+      <CardHeader className="flex-col items-start gap-0.5 border-b-primary/15 bg-primary/6">
+        <CardTitle id={headingId} className="text-primary">
+          <a href={category.href} className={`${LINK} hover:text-primary-hover`}>
             {category.title}
           </a>
         </CardTitle>

package/src/slots/discovery-view.tsx

@@ -21,7 +21,7 @@ function Tabs({ label, tabs }: { label: string; tabs: readonly TabModel[] }) {
               className={cn(
                 TAB,
                 tab.isCurrent
-                  ? 'bg-card font-semibold text-foreground shadow-sm'
+                  ? 'bg-card font-semibold text-primary shadow-sm'
                   : 'font-medium text-muted-foreground hover:text-foreground',
               )}
             >
@@ -80,7 +80,7 @@ export function DiscoveryView({
             {rows.map((row) => (
               <li
                 key={row.threadId}
-                className="flex flex-col gap-1.5 px-4 py-3.5 transition-colors hover:bg-accent sm:flex-row sm:items-center sm:justify-between sm:gap-6"
+                className="flex flex-col gap-1.5 px-4 py-3.5 transition-colors hover:bg-muted/60 sm:flex-row sm:items-center sm:justify-between sm:gap-6"
               >
                 <div className="flex min-w-0 flex-col gap-1">
                   <a

package/src/slots/editor-toolbar.tsx

@@ -2,7 +2,9 @@
 
 import {
   applyEditorTag,
+  applyInsertion,
   type EditorTag,
+  type EditorToolbarButtonModel,
   type EditorToolbarModel,
   type SlotCopy,
 } from '@meith/theme-kit'
@@ -12,20 +14,34 @@ const GLYPHS: Readonly<Record<EditorTag, string>> = {
   italic: 'I',
   strikethrough: 'S',
   link: 'Link',
+  image: 'Image',
   quote: '“”',
   code: '</>',
   spoiler: 'Spoiler',
   bulletedList: '•',
   numberedList: '1.',
+  taskList: '☑',
   heading: 'H',
+  table: 'Table',
 }
 
 const BUTTON =
   'min-w-8 rounded px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-function runTag(textareaId: string, tag: EditorTag, placeholder: string | null): void {
+function runButton(textareaId: string, button: EditorToolbarButtonModel): void {
   const field = document.getElementById(textareaId)
-  if (field instanceof HTMLTextAreaElement) applyEditorTag(field, tag, placeholder)
+  if (!(field instanceof HTMLTextAreaElement)) return
+
+  if (button.tag !== null) {
+    applyEditorTag(field, button.tag, button.placeholder)
+    return
+  }
+
+  if (button.insertion !== null) applyInsertion(field, button.insertion)
+}
+
+function glyphFor(button: EditorToolbarButtonModel): string {
+  return button.tag === null ? button.label.charAt(0).toUpperCase() : GLYPHS[button.tag]
 }
 
 export function EditorToolbar({
@@ -40,18 +56,19 @@ export function EditorToolbar({
       aria-label={groupLabel}
       className="flex flex-wrap gap-0.5 border-b border-border bg-muted/40 p-2"
     >
-      {buttons.map((button) => (
+      {buttons.map((button, index) => (
         <button
-          key={button.tag}
+          // biome-ignore lint/suspicious/noArrayIndexKey: a plugin's button carries no id of its own, so the index disambiguates two sharing a tag or label; the list is server-rendered in order and never reordered on the client
+          key={`${button.tag ?? button.label}-${index}`}
           type="button"
           onMouseDown={(event) => event.preventDefault()}
-          onClick={() => runTag(textareaId, button.tag, button.placeholder)}
+          onClick={() => runButton(textareaId, button)}
           title={button.title}
           aria-label={button.label}
           {...(button.keyShortcut === null ? {} : { 'aria-keyshortcuts': button.keyShortcut })}
           className={BUTTON}
         >
-          <span aria-hidden="true">{GLYPHS[button.tag]}</span>
+          <span aria-hidden="true">{glyphFor(button)}</span>
         </button>
       ))}
 

package/src/slots/footer.tsx

@@ -17,15 +17,15 @@ 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-2 border-b border-border py-3`}
+          className={`${PAGE} flex flex-wrap items-center justify-end gap-x-6 gap-y-3 border-b border-border py-3`}
         >
           {regions.controls}
         </div>
       )}
       <div
-        className={`${PAGE} flex flex-col gap-2 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-6`}
+        className={`${PAGE} flex flex-col gap-3 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-6`}
       >
-        <span className="font-medium text-foreground">{boardTitle}</span>
+        <span className="font-semibold text-primary">{boardTitle}</span>
 
         {links.length > 0 && (
           <nav aria-label={c('nav')} className="flex flex-wrap gap-x-4 gap-y-1">

package/src/slots/forum-display.tsx

@@ -4,6 +4,7 @@ import {
   buttonVariants,
   Card,
   CardRows,
+  cn,
   Empty,
   EmptyAction,
   EmptyDescription,
@@ -50,16 +51,19 @@ export function ForumDisplay({
           )}
         </div>
 
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
-              <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
+              <button type="submit" className={buttonVariants({ variant: 'outline' })}>
                 {c('markRead')}
               </button>
             </form>
           )}
           {newThreadHref !== null && (
-            <a href={newThreadHref} className={buttonVariants({ variant: 'primary' })}>
+            <a
+              href={newThreadHref}
+              className={cn(buttonVariants({ variant: 'primary' }), 'ms-auto sm:ms-0')}
+            >
               {c('newThread')}
             </a>
           )}

package/src/slots/forum-row.tsx

@@ -12,7 +12,7 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
     <li
       data-unread={forum.isUnread ? '' : undefined}
       className={
-        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-2.5 gap-y-2 px-4 py-3 transition-colors hover:bg-muted/60' +
+        'grid grid-cols-[auto_minmax(0,1fr)] gap-x-2.5 gap-y-1.5 px-4 py-3 transition-colors hover:bg-muted/60' +
         (isLink ? '' : ' md:grid-cols-[auto_minmax(0,1fr)_9rem_15rem] md:items-center md:gap-x-4')
       }
     >
@@ -47,9 +47,9 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
       </div>
 
       {!isLink && (
-        <>
+        <div className="col-start-2 flex min-w-0 flex-wrap items-baseline gap-x-4 gap-y-1 text-xs text-muted-foreground md:contents">
           <Counts
-            className="col-start-2 md:col-start-3 md:justify-end"
+            className="md:col-start-3 md:justify-end"
             items={[
               {
                 label: c('threadsLabel'),
@@ -66,25 +66,25 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
             ]}
           />
 
-          <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-4">
+          <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 md:col-start-4 md:block">
             {forum.lastPost === null ? (
               <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (
               <>
                 <a
                   href={forum.lastPost.href}
-                  className={`block truncate font-medium text-foreground ${LINK}`}
+                  className={`max-w-full truncate font-medium text-foreground md:block ${LINK}`}
                 >
                   {forum.lastPost.threadTitle}
                 </a>
-                <span className="mt-0.5 block truncate">
+                <span className="md:mt-0.5 md:block md:truncate">
                   {c('by')} <UserRef user={forum.lastPost.author} className="font-normal" />{' '}
                   {c('dot')} <Stamp at={forum.lastPost.at} />
                 </span>
               </>
             )}
           </div>
-        </>
+        </div>
       )}
     </li>
   )

package/src/slots/header.tsx

@@ -1,7 +1,16 @@
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
-import { LINK, PAGE } from '../shared'
+import { PAGE } from '../shared'
+
+const DESKTOP_LINK =
+  'inline-flex h-10 items-center rounded-md px-3 font-medium text-muted-foreground transition-colors pointer-coarse:h-11 hover:bg-primary/8 hover:text-primary'
+
+const MOBILE_LINK =
+  'flex min-h-11 items-center rounded-md px-3 text-sm font-medium text-muted-foreground hover:bg-primary/8 hover:text-primary'
+
+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 <>{boardTitle}</>
@@ -29,13 +38,13 @@ 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 min-w-44 rounded-b-md border border-border bg-card py-1 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-48 rounded-md border border-border bg-card p-1 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
             href={child.href}
             {...linkTarget(child)}
-            className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="flex items-center rounded-sm px-2.5 py-1.5 text-muted-foreground pointer-coarse:min-h-11 hover:bg-primary/8 hover:text-primary"
           >
             {child.label}
           </a>
@@ -45,6 +54,82 @@ 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-md 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,
@@ -55,37 +140,52 @@ export function Header({
 }: HeaderModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `default.header.${key}`)
 
-  const opensMenus = navigation.some((item) => item.submenu !== undefined)
+  const hasNavigation = navigation.length > 0
 
   return (
-    <header className="border-b border-border bg-card">
-      <div className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3`}>
+    <header className="relative border-t-4 border-b border-t-primary border-b-border bg-card">
+      <div className={`${PAGE} flex flex-wrap items-center gap-x-4 gap-y-3 py-3`}>
         <a
           href={homeHref}
-          className={`inline-flex items-center text-xl font-semibold tracking-tight text-foreground ${LINK}`}
+          className="me-auto inline-flex min-h-9 min-w-0 items-center text-xl font-semibold tracking-tight text-primary transition-colors hover:text-primary-hover"
         >
           <BoardMark boardTitle={boardTitle} logo={logo} />
         </a>
+
         {children}
+
+        {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-11 items-center justify-center rounded-md border border-border 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 top-full z-30 max-h-[calc(100dvh-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>
+        )}
       </div>
 
-      {navigation.length > 0 && (
-        <nav aria-label={c('sections')} className="border-t border-border bg-surface">
+      {hasNavigation && (
+        <nav aria-label={c('sections')} className="hidden border-t border-border lg:block">
           <div className={PAGE}>
             <ul
-              className={`-mx-4 flex items-stretch gap-1 px-4 text-sm sm:-mx-6 sm:px-6 ${
-                opensMenus
-                  ? 'flex-wrap'
-                  : 'overflow-x-auto [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:[mask-image:none]'
-              }`}
+              data-nav-view="desktop"
+              className="-mx-3 flex flex-wrap items-center gap-0.5 py-1 text-sm"
             >
               {navigation.map((item) => (
                 <li key={item.href} className="group relative shrink-0">
-                  <a
-                    href={item.href}
-                    {...linkTarget(item)}
-                    className="inline-flex h-10 items-center rounded-t-md border-b-2 border-transparent px-2.5 font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground"
-                  >
+                  <a href={item.href} {...linkTarget(item)} className={DESKTOP_LINK}>
                     {item.label}
                   </a>
                   <Submenu items={item.submenu} />

package/src/slots/latest-threads.tsx

@@ -46,7 +46,7 @@ export function LatestThreads({
                     {thread.title}
                   </a>
                   <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
-                    {thread.replyCount.label}{' '}
+                    <span className="font-medium text-primary">{thread.replyCount.label}</span>{' '}
                     {thread.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
                   </span>
                 </div>

package/src/slots/member-profile.tsx

@@ -64,9 +64,7 @@ export function MemberProfile({
 
         <dl className="grid grid-cols-3 gap-3 border-t border-border px-5 py-4">
           <div>
-            <dd className={`text-lg font-semibold text-foreground ${NUMERIC}`}>
-              {postCount.label}
-            </dd>
+            <dd className={`text-lg font-semibold text-primary ${NUMERIC}`}>{postCount.label}</dd>
             <dt className="text-xs text-muted-foreground">{c('postsLabel')}</dt>
           </div>
           <div>

package/src/slots/navigation.tsx

@@ -1,7 +1,7 @@
 import type { NavigationModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 
-import { MUTED_LINK, PAGE } from '../shared'
+import { PAGE } from '../shared'
 
 export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }) {
   if (items.length === 0) return null
@@ -9,28 +9,29 @@ export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }
   const c = (key: string) => fromSlotCopy(copy, `default.navigation.${key}`)
 
   return (
-    <nav aria-label={c('breadcrumb')} className="border-b border-border bg-card/40">
-      <ol
-        className={`${PAGE} flex items-center gap-1.5 overflow-x-auto py-2 text-xs whitespace-nowrap text-muted-foreground`}
-      >
+    <nav aria-label={c('breadcrumb')} className={`${PAGE} pt-4`}>
+      <ol className="-mx-1.5 flex items-center overflow-x-auto py-0.5 text-xs whitespace-nowrap text-muted-foreground">
         {items.map((item, index) => {
           const isLast = index === items.length - 1
           return (
-            <li key={item.href} className="flex shrink-0 items-center gap-1.5">
+            <li key={item.href} className="flex shrink-0 items-center">
               {index > 0 && (
-                <span aria-hidden="true" className="text-border select-none">
+                <span aria-hidden="true" className="px-0.5 text-border select-none">
                   {c('separator')}
                 </span>
               )}
               {isLast ? (
                 <span
                   aria-current="page"
-                  className="max-w-[24ch] truncate font-medium text-foreground sm:max-w-none"
+                  className="max-w-[24ch] truncate px-1.5 py-1 font-medium text-foreground sm:max-w-none"
                 >
                   {item.label}
                 </span>
               ) : (
-                <a href={item.href} className={MUTED_LINK}>
+                <a
+                  href={item.href}
+                  className="rounded-md px-1.5 py-1 transition-colors hover:bg-primary/8 hover:text-primary"
+                >
                   {item.label}
                 </a>
               )}

package/src/slots/panel-nav.tsx

@@ -131,7 +131,7 @@ export function PanelNav({
         </Disclosure>
       </div>
 
-      <div className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block">
+      <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
         <Sections label={label} sections={sections} copy={copy} />
       </div>
     </>

package/src/slots/panel-shell.tsx

@@ -14,7 +14,7 @@ export function PanelShell({ panel, links, linksLabel, regions, children }: Pane
         {links.length > 0 && (
           <nav
             aria-label={linksLabel}
-            className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block"
+            className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block"
           >
             <p className="px-2.5 pt-1 pb-1.5 text-xs font-medium tracking-wide text-muted-foreground uppercase">
               {linksLabel}

package/src/slots/post-actions.tsx

@@ -2,6 +2,8 @@ import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 import { buttonVariants, Separator } from '@meith/ui'
 
+import { isEmptyRegion } from '../shared'
+
 interface Action {
   readonly href: string
   readonly label: string
@@ -28,7 +30,9 @@ export function PostActions({
     actions.moderateHref === null ? null : { href: actions.moderateHref, label: c('moderate') },
   ].filter((action): action is Action => action !== null)
 
-  if (reader.length === 0 && staff.length === 0 && children === undefined) return null
+  const extra = isEmptyRegion(children) ? null : children
+
+  if (reader.length === 0 && staff.length === 0 && extra === null) return null
 
   return (
     <nav aria-label={c('nav')} className="flex flex-wrap items-center gap-x-1 gap-y-1">
@@ -56,7 +60,9 @@ export function PostActions({
         </a>
       ))}
 
-      {children !== undefined && <span className="ms-auto empty:hidden">{children}</span>}
+      {extra !== null && (
+        <span className="ms-auto flex flex-wrap items-center gap-x-1 gap-y-1">{extra}</span>
+      )}
     </nav>
   )
 }

package/src/slots/post-bit.tsx

@@ -1,8 +1,8 @@
 import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Alert, AlertDescription, AlertTitle, Avatar, Card } from '@meith/ui'
+import { Alert, AlertDescription, AlertTitle, Avatar, Card, cn } from '@meith/ui'
 
-import { groupTags, LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
+import { groupTags, isEmptyRegion, LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
 const VISIBILITY_TINT = {
   visible: '',
@@ -10,6 +10,8 @@ const VISIBILITY_TINT = {
   deleted: 'border-thread-deleted/50 bg-destructive/5',
 } as const
 
+const BODY_X = 'px-4 sm:px-5'
+
 function StatusBanner({
   visibility,
   copy,
@@ -74,12 +76,12 @@ function AuthorBlock({
   const c = (key: string) => fromSlotCopy(copy, `default.postBit.${key}`)
 
   return (
-    <div className="flex gap-3 sm:flex-col sm:gap-2 sm:text-center">
+    <div className="flex items-center gap-3 sm:flex-col sm:items-stretch sm:gap-2 sm:text-center">
       <Avatar src={author.avatarUrl} name={author.username} size={48} className="sm:self-center" />
 
       <div className="min-w-0 flex-1 sm:flex-none">
         <p className="truncate text-sm">
-          <UserRef user={author} className="font-semibold text-foreground" />
+          <UserRef user={author} className="font-semibold" />
         </p>
 
         {author.badge != null && (
@@ -103,7 +105,9 @@ function AuthorBlock({
 
         {badges}
 
-        <dl className={`mt-1.5 text-xs text-muted-foreground ${NUMERIC}`}>
+        <dl
+          className={`mt-1 flex flex-wrap gap-x-2 text-xs text-muted-foreground sm:mt-2 sm:flex-col sm:gap-x-0 sm:gap-y-0.5 ${NUMERIC}`}
+        >
           <div className="flex gap-1 sm:justify-center">
             <dt className="sr-only">{c('postsLabel')}</dt>
             <dd>
@@ -130,9 +134,9 @@ function AuthorBlock({
         </dl>
 
         {author.fields.length > 0 && (
-          <dl className="mt-1.5 space-y-0.5 text-xs text-muted-foreground">
+          <dl className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-muted-foreground sm:mt-1.5 sm:flex-col sm:gap-x-0">
             {author.fields.map((field) => (
-              <div key={field.label} className="flex justify-center gap-1">
+              <div key={field.label} className="flex min-w-0 gap-1 sm:justify-center">
                 <dt className="font-medium">{field.label}:</dt>
                 <dd className="truncate">{field.value}</dd>
               </div>
@@ -147,46 +151,57 @@ function AuthorBlock({
 export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `default.postBit.${key}`)
 
+  const actions = regions.actions !== null && !isEmptyRegion(regions.actions)
+  const pluginFooter = !isEmptyRegion(regions.pluginFooter)
+
   return (
     <Card
       as="article"
       id={`post-${post.number}`}
       data-post-id={post.id}
       data-visibility={post.visibility}
-      className={VISIBILITY_TINT[post.visibility]}
+      className={cn(
+        'target:border-primary/60 target:ring-2 target:ring-primary/20',
+        VISIBILITY_TINT[post.visibility],
+      )}
     >
       <StatusBanner visibility={post.visibility} copy={copy} />
 
-      <div className="grid grid-cols-1 sm:grid-cols-[11rem_minmax(0,1fr)]">
-        <div className="border-b border-border px-4 py-3 sm:border-r sm:border-b-0 sm:bg-muted/40">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[10.5rem_minmax(0,1fr)] sm:grid-rows-[auto_minmax(0,1fr)]">
+        <div className="col-start-1 row-start-1 min-w-0 border-b border-border py-3 pl-4 sm:row-span-2 sm:border-r sm:border-b-0 sm:bg-surface/60 sm:px-4 sm:py-4">
           <AuthorBlock author={post.author} badges={regions.pluginBadges} copy={copy} />
         </div>
 
-        <div className="min-w-0">
-          <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2 text-xs text-muted-foreground">
-            {select === null ? (
-              <span />
-            ) : (
-              <label className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  name={select.name}
-                  value={select.value}
-                  form={select.formId}
-                  className="size-4 accent-primary"
-                />
-                <span className="sr-only">{select.label}</span>
-              </label>
-            )}
+        <div
+          className={`col-start-2 row-start-1 flex flex-col-reverse items-end justify-center gap-1.5 border-b border-border py-3 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:py-1.5 ${BODY_X}`}
+        >
+          {select === null ? (
+            <span className="hidden sm:block" />
+          ) : (
+            <label className="flex min-h-6 items-center gap-2">
+              <input
+                type="checkbox"
+                name={select.name}
+                value={select.value}
+                form={select.formId}
+                className="size-4 accent-primary"
+              />
+              <span className="sr-only">{select.label}</span>
+            </label>
+          )}
 
-            <a href={post.permalink} className={MUTED_LINK}>
-              <Stamp at={post.postedAt} />
-              <span className={`ml-2 ${NUMERIC}`}>#{post.number}</span>
-            </a>
-          </div>
+          <a
+            href={post.permalink}
+            className={`inline-flex min-h-8 items-center gap-2 ${MUTED_LINK} ${NUMERIC}`}
+          >
+            <Stamp at={post.postedAt} />
+            <span className="font-semibold text-primary">#{post.number}</span>
+          </a>
+        </div>
 
+        <div className="col-span-2 row-start-2 min-w-0 sm:col-span-1 sm:col-start-2">
           {post.ignored !== null ? (
-            <div className="px-4 py-5 text-sm text-muted-foreground">
+            <div className={`py-5 text-sm text-muted-foreground ${BODY_X}`}>
               {c('ignoringPrefix')}{' '}
               <span className="font-medium text-foreground">{post.ignored.authorUsername}</span>.{' '}
               {c('hiddenNotice')}{' '}
@@ -195,9 +210,9 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
               </a>
             </div>
           ) : (
-            <div className="px-4 py-4">
+            <div className={`py-4 sm:py-5 ${BODY_X}`}>
               <div
-                className="prose-md text-sm"
+                className="prose-md text-[0.9375rem] sm:text-base"
                 dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
               />
 
@@ -210,7 +225,7 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
           )}
 
           {post.attachments.length > 0 && (
-            <div className="border-t border-border px-4 py-3">
+            <div className={`border-t border-border py-3 ${BODY_X}`}>
               <h4 className="mb-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                 {post.attachments.length}{' '}
                 {post.attachments.length === 1 ? c('attachment.one') : c('attachment.other')}
@@ -246,19 +261,19 @@ export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { co
 
           {post.ignored === null && post.author.signatureHtml !== null && (
             <div
-              className="prose-md border-t border-border px-4 py-2.5 text-xs text-muted-foreground"
+              className={`prose-md border-t border-border py-2.5 text-xs text-muted-foreground ${BODY_X}`}
               dangerouslySetInnerHTML={{ __html: post.author.signatureHtml }}
             />
           )}
 
-          {regions.pluginFooter !== undefined && regions.pluginFooter !== null && (
-            <div className="border-t border-border px-4 py-2 text-xs empty:hidden">
+          {pluginFooter && (
+            <div className={`border-t border-border py-2 text-xs empty:hidden ${BODY_X}`}>
               {regions.pluginFooter}
             </div>
           )}
 
-          {regions.actions !== null && (
-            <footer className="border-t border-border px-4 py-2 empty:hidden">
+          {actions && (
+            <footer className={`border-t border-border py-1.5 empty:hidden ${BODY_X}`}>
               {regions.actions}
             </footer>
           )}

package/src/slots/thread-row.tsx

@@ -4,7 +4,12 @@ import { Badge } from '@meith/ui'
 
 import { Counts, LINK, Prefix, ReadSpacer, Stamp, UnreadDot, UserRef } from '../shared'
 
-export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+export function ThreadRow({
+  thread,
+  select,
+  regions,
+  copy,
+}: ThreadRowSlotModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `default.threadRow.${key}`)
 
   const hidden = thread.visibility === 'deleted' || thread.visibility === 'unapproved'
@@ -14,7 +19,7 @@ export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy:
     <li
       data-unread={thread.isUnread ? '' : undefined}
       data-visibility={hidden ? thread.visibility : undefined}
-      className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-2.5 gap-y-2 px-4 py-3 transition-colors hover:bg-muted/60 md:grid-cols-[auto_minmax(0,1fr)_9rem_14rem] md:items-center md:gap-x-4 ${hidden ? tint : ''}`}
+      className={`grid grid-cols-[auto_minmax(0,1fr)] gap-x-2.5 gap-y-1.5 px-4 py-3 transition-colors hover:bg-muted/60 md:grid-cols-[auto_minmax(0,1fr)_9rem_14rem] md:items-center md:gap-x-4 ${hidden ? tint : ''}`}
     >
       <span className="flex items-start gap-2">
         {select !== null && (
@@ -52,6 +57,7 @@ export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy:
             {thread.title}
           </a>
           {thread.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
+          {regions?.pluginBadges}
         </div>
 
         <p className="mt-0.5 text-xs text-muted-foreground">
@@ -59,38 +65,43 @@ export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy:
         </p>
       </div>
 
-      <Counts
-        className="col-start-2 md:col-start-3 md:justify-end"
-        items={[
-          {
-            label: c('repliesLabel'),
-            value: thread.replyCount,
-            one: c('reply.one'),
-            many: c('reply.other'),
-          },
-          {
-            label: c('viewsLabel'),
-            value: thread.viewCount,
-            one: c('view.one'),
-            many: c('view.other'),
-          },
-        ]}
-      />
+      <div className="col-start-2 flex min-w-0 flex-wrap items-baseline gap-x-4 gap-y-1 text-xs text-muted-foreground md:contents">
+        <Counts
+          className="md:col-start-3 md:justify-end"
+          items={[
+            {
+              label: c('repliesLabel'),
+              value: thread.replyCount,
+              one: c('reply.one'),
+              many: c('reply.other'),
+            },
+            {
+              label: c('viewsLabel'),
+              value: thread.viewCount,
+              one: c('view.one'),
+              many: c('view.other'),
+            },
+          ]}
+        />
 
-      <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-4">
-        {thread.lastPost === null ? (
-          <span className="text-thread-moved">{c('noRepliesYet')}</span>
-        ) : (
-          <>
-            <a href={thread.lastPost.href} className={`block font-medium text-foreground ${LINK}`}>
-              {c('latestReply')}
-            </a>
-            <span className="mt-0.5 block truncate">
-              {c('by')} <UserRef user={thread.lastPost.author} className="font-normal" /> {c('dot')}{' '}
-              <Stamp at={thread.lastPost.at} />
-            </span>
-          </>
-        )}
+        <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 md:col-start-4 md:block">
+          {thread.lastPost === null ? (
+            <span className="text-thread-moved">{c('noRepliesYet')}</span>
+          ) : (
+            <>
+              <a
+                href={thread.lastPost.href}
+                className={`font-medium text-foreground md:block ${LINK}`}
+              >
+                {c('latestReply')}
+              </a>
+              <span className="md:mt-0.5 md:block md:truncate">
+                {c('by')} <UserRef user={thread.lastPost.author} className="font-normal" />{' '}
+                {c('dot')} <Stamp at={thread.lastPost.at} />
+              </span>
+            </>
+          )}
+        </div>
       </div>
     </li>
   )

package/src/slots/thread-view.tsx

@@ -1,14 +1,14 @@
 import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
-import { Badge, buttonVariants } from '@meith/ui'
+import { Badge, buttonVariants, cn } from '@meith/ui'
 
-import { Counts, MUTED_LINK, PAGE_BODY, Prefix } from '../shared'
+import { Counts, PAGE_BODY, Prefix } from '../shared'
 
 export function ThreadView({
   thread,
-  forum,
   replyHref,
   markReadAction,
+  watch,
   regions,
   copy,
 }: ThreadViewModel & { copy: SlotCopy }) {
@@ -18,13 +18,7 @@ export function ThreadView({
     <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">
-          <a href={forum.href} className={`text-sm sm:hidden ${MUTED_LINK}`}>
-            {forum.label}
-          </a>
-
-          <h1 className="mt-1 text-2xl font-semibold tracking-tight text-balance sm:mt-0">
-            {thread.title}
-          </h1>
+          <h1 className="text-2xl font-semibold tracking-tight text-balance">{thread.title}</h1>
 
           <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
             {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
@@ -51,7 +45,20 @@ export function ThreadView({
           </div>
         </div>
 
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {watch != null && (
+            <form action={watch.action} method="post">
+              <button type="submit" className={buttonVariants({ variant: 'outline' })}>
+                {watch.subscribed ? (
+                  <>
+                    {c('watching')} <span aria-hidden="true">✓</span>
+                  </>
+                ) : (
+                  c('watch')
+                )}
+              </button>
+            </form>
+          )}
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
               <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
@@ -60,7 +67,10 @@ export function ThreadView({
             </form>
           )}
           {replyHref !== null && (
-            <a href={replyHref} className={buttonVariants({ variant: 'primary' })}>
+            <a
+              href={replyHref}
+              className={cn(buttonVariants({ variant: 'primary' }), 'ms-auto sm:ms-0')}
+            >
               {c('replyAction')}
             </a>
           )}

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.31.0',
+  version: '0.33.0',
   slots: {
     Shell,
     Header,