@meith/theme-default 0.33.1 → 0.33.3

package/src/slots/header.tsx

@@ -1,19 +1,31 @@
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
-import { PAGE } from '../shared'
+import { BELOW_HEADER, HEADER_HEIGHT, 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'
+  '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-md px-3 text-sm font-medium text-muted-foreground hover:bg-primary/8 hover:text-primary'
+  '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 <>{boardTitle}</>
+  if (logo === undefined) {
+    return (
+      <>
+        <span
+          aria-hidden="true"
+          className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground shadow-sm"
+        >
+          {(Array.from(boardTitle.trim())[0] ?? '?').toUpperCase()}
+        </span>
+        <span className="truncate">{boardTitle}</span>
+      </>
+    )
+  }
 
   const image = (
     <img
@@ -38,13 +50,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-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">
+    <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">
       {items.map((child) => (
         <li key={child.href}>
           <a
             href={child.href}
             {...linkTarget(child)}
-            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"
+            className="flex items-center rounded-lg px-2.5 py-1.5 text-sm text-muted-foreground pointer-coarse:min-h-11 hover:bg-muted hover:text-foreground"
           >
             {child.label}
           </a>
@@ -103,7 +115,7 @@ function MobileNavItem({ item }: { item: HeaderModel['navigation'][number] }) {
     <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`}
+          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}
@@ -141,30 +153,35 @@ export function Header({
   const c = (key: string) => fromSlotCopy(copy, `default.header.${key}`)
 
   const hasNavigation = navigation.length > 0
+  const opensMenus = navigation.some(
+    (item) => item.submenu !== undefined && item.submenu.length > 0,
+  )
 
   return (
-    <header className="relative border-b border-b-border bg-card">
-      <div className={`${PAGE} flex flex-wrap items-center gap-x-4 gap-y-3 py-3`}>
+    <header className="sticky top-0 z-40 border-b border-b-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/85">
+      <div className={`${PAGE} flex ${HEADER_HEIGHT} items-center gap-x-3 sm:gap-x-4`}>
         <a
           href={homeHref}
-          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"
+          className="me-auto 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>
 
-        {children}
+        <div className="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-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`}
+                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 top-full z-30 max-h-[calc(100dvh-5rem)] overflow-y-auto border-b border-border bg-card shadow-elevation">
+              <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} />
@@ -178,10 +195,20 @@ export function Header({
 
       {hasNavigation && (
         <nav aria-label={c('sections')} className="hidden border-t border-border lg:block">
-          <div className={PAGE}>
+          <div
+            className={
+              opensMenus
+                ? PAGE
+                : `${PAGE} overflow-x-auto [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] [scrollbar-width:none]`
+            }
+          >
             <ul
               data-nav-view="desktop"
-              className="-mx-3 flex flex-wrap items-center gap-0.5 py-1 text-sm"
+              className={
+                opensMenus
+                  ? '-mx-3 flex flex-wrap items-center gap-0.5 py-1'
+                  : '-mx-3 flex items-center gap-0.5 py-1 pr-6 whitespace-nowrap'
+              }
             >
               {navigation.map((item) => (
                 <li key={item.href} className="group relative shrink-0">

package/src/slots/latest-posts.tsx

@@ -1,6 +1,7 @@
 import type { LatestPostsModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
 import {
+  Avatar,
   Card,
   CardContent,
   CardHeader,
@@ -10,15 +11,15 @@ import {
   EmptyTitle,
 } from '@meith/ui'
 
-import { LINK, MUTED_LINK, NUMERIC, PRIMARY_HEADER, Stamp, UserRef } from '../shared'
+import { LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
 export function LatestPosts({ posts, capturedAt, copy }: LatestPostsModel & { copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `default.latestPosts.${key}`)
 
   return (
-    <Card aria-labelledby="latest-posts-heading">
-      <CardHeader className={PRIMARY_HEADER}>
-        <CardTitle id="latest-posts-heading" className="text-primary">
+    <Card aria-labelledby="latest-posts-heading" className="rounded-xl">
+      <CardHeader className="bg-card">
+        <CardTitle id="latest-posts-heading" className="text-sm">
           {c('heading')}
         </CardTitle>
         <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
@@ -35,25 +36,36 @@ export function LatestPosts({ posts, capturedAt, copy }: LatestPostsModel & { co
         <CardContent className="px-0 py-0">
           <ul className="divide-y divide-border">
             {posts.map((post) => (
-              <li key={post.href} className="flex flex-col gap-0.5 px-4 py-2">
-                <a
-                  href={post.href}
-                  className={`truncate text-sm font-medium text-foreground ${LINK}`}
-                >
-                  {post.threadTitle}
-                </a>
+              <li
+                key={post.href}
+                className="flex gap-3 px-4 py-2.5 transition-colors hover:bg-muted/50"
+              >
+                <Avatar
+                  src={null}
+                  name={post.author.username}
+                  size={28}
+                  className="mt-0.5 rounded-full"
+                />
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <a
+                    href={post.href}
+                    className={`truncate text-sm font-medium text-foreground ${LINK}`}
+                  >
+                    {post.threadTitle}
+                  </a>
 
-                {post.excerpt !== '' && (
-                  <p className="line-clamp-2 text-xs text-muted-foreground">{post.excerpt}</p>
-                )}
+                  {post.excerpt !== '' && (
+                    <p className="line-clamp-2 text-xs text-muted-foreground">{post.excerpt}</p>
+                  )}
 
-                <p className="truncate text-xs text-muted-foreground">
-                  <UserRef user={post.author} className="font-normal" /> {c('in')}{' '}
-                  <a href={post.forum.href} className={MUTED_LINK}>
-                    {post.forum.label}
-                  </a>{' '}
-                  {c('dot')} <Stamp at={post.postedAt} />
-                </p>
+                  <p className="truncate text-xs text-muted-foreground">
+                    <UserRef user={post.author} className="font-normal" /> {c('in')}{' '}
+                    <a href={post.forum.href} className={MUTED_LINK}>
+                      {post.forum.label}
+                    </a>{' '}
+                    {c('dot')} <Stamp at={post.postedAt} />
+                  </p>
+                </div>
               </li>
             ))}
           </ul>

package/src/slots/latest-threads.tsx

@@ -10,7 +10,7 @@ import {
   EmptyTitle,
 } from '@meith/ui'
 
-import { LINK, MUTED_LINK, NUMERIC, PRIMARY_HEADER, Stamp, UserRef } from '../shared'
+import { LINK, MUTED_LINK, NUMERIC, PILL, Stamp, UserRef } from '../shared'
 
 export function LatestThreads({
   threads,
@@ -20,9 +20,9 @@ export function LatestThreads({
   const c = (key: string) => fromSlotCopy(copy, `default.latestThreads.${key}`)
 
   return (
-    <Card aria-labelledby="latest-threads-heading">
-      <CardHeader className={PRIMARY_HEADER}>
-        <CardTitle id="latest-threads-heading" className="text-primary">
+    <Card aria-labelledby="latest-threads-heading" className="rounded-xl">
+      <CardHeader className="bg-card">
+        <CardTitle id="latest-threads-heading" className="text-sm">
           {c('heading')}
         </CardTitle>
         <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
@@ -39,17 +39,23 @@ export function LatestThreads({
         <CardContent className="px-0 py-0">
           <ul className="divide-y divide-border">
             {threads.map((thread) => (
-              <li key={thread.href} className="flex flex-col gap-0.5 px-4 py-2">
-                <div className="flex items-baseline justify-between gap-2">
+              <li
+                key={thread.href}
+                className="flex flex-col gap-0.5 px-4 py-2.5 transition-colors hover:bg-muted/50"
+              >
+                <div className="flex items-start justify-between gap-2">
                   <a
                     href={thread.href}
-                    className={`truncate text-sm font-medium text-foreground ${LINK}`}
+                    className={`line-clamp-2 text-sm font-medium text-foreground ${LINK}`}
                   >
                     {thread.title}
                   </a>
-                  <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
-                    <span className="font-medium text-primary">{thread.replyCount.label}</span>{' '}
-                    {thread.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
+                  <span className={`${PILL} shrink-0 ${NUMERIC}`}>
+                    {thread.replyCount.label}
+                    <span className="sr-only">
+                      {' '}
+                      {thread.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
+                    </span>
                   </span>
                 </div>
 

package/src/slots/member-profile.tsx

@@ -22,22 +22,33 @@ export function MemberProfile({
 
   return (
     <div className={PAGE_BODY}>
-      <Card>
-        <CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between">
+      <Card className="rounded-xl">
+        <CardContent className="flex flex-col gap-4 px-5 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
           <div className="flex min-w-0 items-center gap-4">
-            <Avatar src={avatarUrl} name={user.username} size={72} />
+            <Avatar src={avatarUrl} name={user.username} size={80} className="rounded-2xl" />
 
             <div className="min-w-0">
               <h1
-                className={cn('text-2xl font-semibold tracking-tight break-words', user.nameClass)}
+                className={cn(
+                  'font-heading text-2xl font-semibold tracking-tight break-words',
+                  user.nameClass,
+                )}
               >
                 {user.username}
               </h1>
-              {groupTags(groups, title).map((group) => (
-                <p key={group.title} className="mt-0.5 text-sm text-muted-foreground">
-                  <span className={group.nameClass ?? undefined}>{group.title}</span>
-                </p>
-              ))}
+              <p className="mt-1.5 flex flex-wrap gap-1.5">
+                {groupTags(groups, title).map((group) => (
+                  <span
+                    key={group.title}
+                    className={cn(
+                      'inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground',
+                      group.nameClass,
+                    )}
+                  >
+                    {group.title}
+                  </span>
+                ))}
+              </p>
             </div>
           </div>
 
@@ -62,18 +73,20 @@ export function MemberProfile({
           )}
         </CardContent>
 
-        <dl className="grid grid-cols-3 gap-3 border-t border-border px-5 py-4">
-          <div>
-            <dd className={`text-lg font-semibold text-primary ${NUMERIC}`}>{postCount.label}</dd>
+        <dl className="grid grid-cols-3 divide-x divide-border border-t border-border">
+          <div className="px-5 py-3.5 sm:px-6">
+            <dd className={`text-lg font-semibold text-foreground ${NUMERIC}`}>
+              {postCount.label}
+            </dd>
             <dt className="text-xs text-muted-foreground">{c('postsLabel')}</dt>
           </div>
-          <div>
+          <div className="px-5 py-3.5 sm:px-6">
             <dd className="text-sm font-medium text-foreground">
               <Stamp at={joinedAt} />
             </dd>
             <dt className="text-xs text-muted-foreground">{c('joinedLabel')}</dt>
           </div>
-          <div>
+          <div className="px-5 py-3.5 sm:px-6">
             <dd className="text-sm font-medium text-foreground">
               {lastVisitAt === null ? c('never') : <Stamp at={lastVisitAt} />}
             </dd>
@@ -83,18 +96,18 @@ export function MemberProfile({
       </Card>
 
       {fields.length > 0 && (
-        <Card aria-labelledby="profile-fields-heading">
-          <CardHeader>
+        <Card aria-labelledby="profile-fields-heading" className="rounded-xl">
+          <CardHeader className="bg-card">
             <CardTitle id="profile-fields-heading" className="text-sm">
               {c('about')}
             </CardTitle>
           </CardHeader>
-          <CardContent>
-            <dl className="grid gap-x-6 gap-y-3 sm:grid-cols-2">
+          <CardContent className="px-5 py-4">
+            <dl className="grid gap-x-6 gap-y-4 sm:grid-cols-2">
               {fields.map((field) => (
                 <div key={field.label}>
                   <dt className="text-xs text-muted-foreground">{field.label}</dt>
-                  <dd className="text-sm break-words">{field.value}</dd>
+                  <dd className="mt-0.5 text-sm break-words">{field.value}</dd>
                 </div>
               ))}
             </dl>
@@ -103,13 +116,13 @@ export function MemberProfile({
       )}
 
       {signatureHtml !== null && (
-        <Card aria-labelledby="profile-signature-heading">
-          <CardHeader>
+        <Card aria-labelledby="profile-signature-heading" className="rounded-xl">
+          <CardHeader className="bg-card">
             <CardTitle id="profile-signature-heading" className="text-sm">
               {c('signature')}
             </CardTitle>
           </CardHeader>
-          <CardContent>
+          <CardContent className="px-5 py-4">
             <div
               className="prose-md text-sm text-muted-foreground"
               dangerouslySetInnerHTML={{ __html: signatureHtml }}

package/src/slots/navigation.tsx

@@ -16,21 +16,21 @@ export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }
           return (
             <li key={item.href} className="flex shrink-0 items-center">
               {index > 0 && (
-                <span aria-hidden="true" className="px-0.5 text-border select-none">
+                <span aria-hidden="true" className="px-1 text-muted-foreground/50 select-none">
                   {c('separator')}
                 </span>
               )}
               {isLast ? (
                 <span
                   aria-current="page"
-                  className="max-w-[24ch] truncate px-1.5 py-1 font-medium text-foreground sm:max-w-none"
+                  className="max-w-[28ch] truncate px-1.5 py-1 font-medium text-foreground sm:max-w-none"
                 >
                   {item.label}
                 </span>
               ) : (
                 <a
                   href={item.href}
-                  className="rounded-md px-1.5 py-1 transition-colors hover:bg-primary/8 hover:text-primary"
+                  className="rounded-md px-1.5 py-1 transition-colors hover:bg-muted hover:text-foreground"
                 >
                   {item.label}
                 </a>

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')
+  const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20 rounded-full')
   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 px-2',
+                  'min-w-8 rounded-full px-2',
                   NUMERIC,
                   entry.isCurrent ? '' : 'hidden sm:inline-flex',
                 )}

package/src/slots/panel-nav.tsx

@@ -3,14 +3,14 @@ import { fromSlotCopy } from '@meith/theme-kit'
 import { cn, Disclosure } from '@meith/ui'
 
 import { PanelIcon } from '../panel-icons'
+import { BELOW_HEADER } from '../shared'
 
 const ITEM =
-  'relative flex items-center gap-2.5 rounded-lg px-2.5 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 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-const HERE =
-  'bg-secondary font-semibold text-foreground before:absolute before:top-1.5 before:bottom-1.5 before:-left-2.5 before:w-0.5 before:rounded-full before:bg-primary'
-const OPEN = 'font-semibold text-foreground hover:bg-accent'
-const ELSEWHERE = 'text-muted-foreground hover:bg-accent hover:text-foreground'
+const HERE = 'bg-primary/10 font-semibold text-primary [&_svg]:text-primary'
+const OPEN = 'font-semibold text-foreground hover:bg-muted'
+const ELSEWHERE = 'text-muted-foreground hover:bg-muted hover:text-foreground'
 
 function Count({ count, copy }: { count: number; copy: SlotCopy }) {
   const c = (key: string) => fromSlotCopy(copy, `default.panelNav.${key}`)
@@ -19,7 +19,7 @@ function Count({ count, copy }: { count: number; copy: SlotCopy }) {
     <>
       <span
         aria-hidden="true"
-        className="ml-auto min-w-5 rounded-full bg-primary px-1.5 py-0.5 text-center text-xs font-semibold tabular-nums text-primary-foreground"
+        className="ml-auto min-w-5 rounded-full bg-primary px-1.5 py-0.5 text-center text-[0.6875rem] leading-4 font-semibold tabular-nums text-primary-foreground"
       >
         {count > 99 ? c('countCap') : count}
       </span>
@@ -42,7 +42,7 @@ function Item({
   const body = (
     <>
       {item.icon !== null && (
-        <span className="text-muted-foreground/80">
+        <span className="text-muted-foreground/70 transition-colors group-hover/item:text-foreground">
           <PanelIcon icon={item.icon} />
         </span>
       )}
@@ -81,11 +81,11 @@ function Sections({
 }: Pick<PanelNavModel, 'label' | 'sections'> & { copy: SlotCopy }) {
   return (
     <nav aria-label={label} className="text-sm">
-      <ul className="flex flex-col gap-0.5 pl-2.5">
+      <ul className="flex flex-col gap-0.5">
         {sections.map((section) => (
           <li
             key={section.href}
-            className={cn(section.isOverview && 'mb-1 border-b border-border pb-1')}
+            className={cn(section.isOverview && 'mb-1.5 border-b border-border pb-1.5')}
           >
             <Item
               item={section}
@@ -94,12 +94,12 @@ function Sections({
             />
 
             {section.isOpen && section.children.length > 0 && (
-              <ul className="mt-0.5 ml-4 flex flex-col gap-0.5 border-l border-border pl-2.5">
+              <ul className="my-1 ml-5 flex flex-col gap-0.5 border-l-2 border-border pl-2">
                 {section.children.map((child) => (
                   <li key={child.href}>
                     <Item
                       item={child}
-                      className={child.current === 'here' ? HERE : ELSEWHERE}
+                      className={cn('py-1.5', child.current === 'here' ? HERE : ELSEWHERE)}
                       copy={copy}
                     />
                   </li>
@@ -121,7 +121,9 @@ export function PanelNav({
 }: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
-      <div className="sticky top-0 z-20 -mx-4 bg-background/95 px-4 py-2 backdrop-blur-sm sm:-mx-6 sm:px-6 lg:hidden">
+      <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`}
+      >
         <Disclosure
           summary={label}
           contentClassName="p-2"
@@ -131,7 +133,7 @@ export function PanelNav({
         </Disclosure>
       </div>
 
-      <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
+      <div className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block">
         <Sections label={label} sections={sections} copy={copy} />
       </div>
     </>

package/src/slots/panel-page.tsx

@@ -2,7 +2,7 @@ import type { PanelPageModel, PanelSectionModel, SlotCopy } from '@meith/theme-k
 import { fromSlotCopy } from '@meith/theme-kit'
 import { cn } from '@meith/ui'
 
-import { MUTED_LINK, PAGE, pageAt } from '../shared'
+import { MUTED_LINK, PAGE, PAGE_TITLE, pageAt, SECTION_TITLE } from '../shared'
 
 export function PanelPage({
   title,
@@ -21,25 +21,28 @@ export function PanelPage({
       id="board-content"
       tabIndex={-1}
       className={cn(
-        'flex w-full flex-col py-8',
+        'flex w-full flex-col py-6 lg:py-8',
         frame === 'standalone'
           ? `flex-1 ${width === 'wide' ? PAGE : pageAt('max-w-4xl')}`
-          : `px-6 ${width === 'wide' ? 'max-w-none' : 'max-w-4xl'}`,
+          : `px-4 sm:px-6 ${width === 'wide' ? 'max-w-none' : 'max-w-4xl'}`,
         gap === 'loose' ? 'gap-8' : 'gap-6',
       )}
     >
-      <div className="flex flex-wrap items-start justify-between gap-x-6 gap-y-2">
+      <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">
           {back !== null && (
-            <a href={back.href} className={`text-sm font-medium ${MUTED_LINK}`}>
-              {c('back')} {back.label}
+            <a
+              href={back.href}
+              className={`mb-1 inline-flex w-fit items-center gap-1 text-sm font-medium ${MUTED_LINK}`}
+            >
+              <span aria-hidden="true">{c('back')}</span> {back.label}
             </a>
           )}
 
-          <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
+          <h1 className={PAGE_TITLE}>{title}</h1>
 
           {regions.lede !== undefined && (
-            <p className="text-sm text-muted-foreground">{regions.lede}</p>
+            <p className="max-w-prose text-sm text-muted-foreground">{regions.lede}</p>
           )}
           {regions.meta !== undefined && (
             <p className="text-xs text-muted-foreground">{regions.meta}</p>
@@ -61,7 +64,7 @@ export function PanelSection({ title, headingId, regions, children }: PanelSecti
     <section aria-labelledby={headingId} className="flex flex-col gap-3">
       <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-1">
         <div className="flex min-w-0 flex-col gap-0.5">
-          <h2 id={headingId} className="font-heading text-lg font-semibold text-foreground">
+          <h2 id={headingId} className={SECTION_TITLE}>
             {title}
           </h2>
           {regions.description !== undefined && (

package/src/slots/panel-shell.tsx

@@ -1,32 +1,48 @@
 import type { PanelShellModel } from '@meith/theme-kit'
 
-import { MUTED_LINK } from '../shared'
+import { BELOW_DESKTOP_HEADER, EYEBROW, MUTED_LINK } from '../shared'
 
 const RAIL =
-  'flex flex-col gap-4 px-4 pt-4 sm:px-6 lg:sticky lg:w-60 lg:shrink-0 lg:self-start lg:py-8 lg:pr-0'
+  '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'
+
+function SwitchGlyph() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      className="size-3.5 shrink-0 text-muted-foreground/70"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6 3.5 9.5 7 6 10.5M3 7h6.5M13 3v8" />
+    </svg>
+  )
+}
 
 export function PanelShell({ panel, links, linksLabel, regions, children }: PanelShellModel) {
   return (
-    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row">
-      <aside className={`${RAIL} ${panel === 'admincp' ? 'lg:top-14' : 'lg:top-6'}`}>
+    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row lg:gap-8">
+      <aside className={`${RAIL} ${panel === 'admincp' ? 'lg:top-14' : BELOW_DESKTOP_HEADER}`}>
         {regions.nav}
 
         {links.length > 0 && (
           <nav
             aria-label={linksLabel}
-            className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block"
+            className="hidden rounded-xl 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}
-            </p>
+            <p className={`${EYEBROW} px-3 pt-1.5 pb-1.5`}>{linksLabel}</p>
             <ul className="flex flex-col gap-0.5 text-sm">
               {links.map((link) => (
                 <li key={link.href}>
                   <a
                     href={link.href}
-                    className={`block rounded-lg px-2.5 py-1.5 ${MUTED_LINK} hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`}
+                    className={`flex items-center gap-2.5 rounded-lg px-3 py-2 ${MUTED_LINK} hover:bg-muted hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`}
                   >
-                    {link.label}
+                    <SwitchGlyph />
+                    <span className="min-w-0 flex-1 truncate">{link.label}</span>
                   </a>
                 </li>
               ))}
@@ -40,10 +56,16 @@ export function PanelShell({ panel, links, linksLabel, regions, children }: Pane
       {links.length > 0 && (
         <nav
           aria-label={linksLabel}
-          className="flex flex-wrap gap-x-4 gap-y-1 px-4 pt-2 text-sm sm:px-6 lg:hidden"
+          className="flex flex-wrap items-center gap-x-2 gap-y-2 px-4 pt-2 pb-6 text-sm sm:px-6 lg:hidden"
         >
+          <span className={`${EYEBROW} me-1`}>{linksLabel}</span>
           {links.map((link) => (
-            <a key={link.href} href={link.href} className={MUTED_LINK}>
+            <a
+              key={link.href}
+              href={link.href}
+              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground transition-colors hover:border-primary/40 hover:text-primary"
+            >
+              <SwitchGlyph />
               {link.label}
             </a>
           ))}