@meith/theme-default 0.33.0 → 0.33.1

package/package.json

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

package/src/shared.tsx

@@ -20,6 +20,8 @@ export function pageAt(width: 'max-w-3xl' | 'max-w-4xl'): string {
 export const LINK =
   'transition-colors hover:text-primary hover:underline underline-offset-2 decoration-1 decoration-primary'
 
+export const PRIMARY_HEADER = 'border-b-primary/15 bg-primary/6'
+
 export const MUTED_LINK = `text-muted-foreground ${LINK}`
 
 export function UserRef({ user, className }: { user: UserRefModel; className?: string }) {

package/src/slots/board-index.tsx

@@ -9,8 +9,9 @@ export function BoardIndex({
   regions,
   copy,
 }: BoardIndexModel & { copy: SlotCopy }) {
-  const rail = (regions.latest ?? null) !== null
-  const footer = regions.stats !== null || regions.online !== null
+  const latest = regions.latest ?? null
+  const rail = latest !== null || regions.stats !== null
+  const footer = regions.online !== null
 
   const c = (key: string) => fromSlotCopy(copy, `default.boardIndex.${key}`)
 
@@ -39,7 +40,8 @@ export function BoardIndex({
 
         {rail && (
           <aside aria-label={c('boardActivity')} className="flex min-w-0 flex-col gap-4">
-            {regions.latest}
+            {latest}
+            {regions.stats}
           </aside>
         )}
       </div>
@@ -47,7 +49,6 @@ export function BoardIndex({
       {footer && (
         <div className="flex flex-col gap-1.5 border-t border-border pt-4 text-xs text-muted-foreground">
           {regions.online}
-          {regions.stats}
         </div>
       )}
 

package/src/slots/board-stats.tsx

@@ -1,7 +1,8 @@
 import type { BoardStatsModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy } from '@meith/theme-kit'
+import { Card, CardContent, CardHeader, CardTitle } from '@meith/ui'
 
-import { NUMERIC, Stamp, UserRef } from '../shared'
+import { NUMERIC, PRIMARY_HEADER, Stamp, UserRef } from '../shared'
 
 export function BoardStats({
   threadCount,
@@ -14,40 +15,45 @@ export function BoardStats({
   const c = (key: string) => fromSlotCopy(copy, `default.boardStats.${key}`)
 
   return (
-    <section
-      aria-labelledby="board-stats-heading"
-      className="flex flex-wrap items-baseline gap-x-3 gap-y-1"
-    >
-      <h2 id="board-stats-heading" className="sr-only">
-        {c('heading')}
-      </h2>
+    <Card aria-labelledby="board-stats-heading">
+      <CardHeader className={PRIMARY_HEADER}>
+        <CardTitle id="board-stats-heading" className="text-primary">
+          {c('heading')}
+        </CardTitle>
+      </CardHeader>
 
-      {computedAt === null ? (
-        <span>{c('notComputed')}</span>
-      ) : (
-        <>
-          {[
-            { label: c('threads'), value: threadCount },
-            { label: c('posts'), value: postCount },
-            { label: c('members'), value: memberCount },
-          ].map((figure) => (
-            <span key={figure.label}>
-              <span className={`font-medium text-foreground ${NUMERIC}`}>{figure.value.label}</span>{' '}
-              {figure.label}
-            </span>
-          ))}
+      <CardContent className="flex flex-col gap-3">
+        {computedAt === null ? (
+          <p className="text-xs text-muted-foreground">{c('notComputed')}</p>
+        ) : (
+          <>
+            <dl className="grid grid-cols-3 gap-2 text-center">
+              {[
+                { label: c('threads'), value: threadCount },
+                { label: c('posts'), value: postCount },
+                { label: c('members'), value: memberCount },
+              ].map((figure) => (
+                <div key={figure.label}>
+                  <dd className={`text-sm font-medium text-foreground ${NUMERIC}`}>
+                    {figure.value.label}
+                  </dd>
+                  <dt className="text-xs text-muted-foreground">{figure.label}</dt>
+                </div>
+              ))}
+            </dl>
 
-          {newestMember !== null && (
-            <span>
-              {c('newestMember')} <UserRef user={newestMember} />
-            </span>
-          )}
+            {newestMember !== null && (
+              <p className="text-xs text-muted-foreground">
+                {c('newestMember')} <UserRef user={newestMember} />
+              </p>
+            )}
 
-          <span className={`ms-auto ${NUMERIC}`}>
-            {c('counted')} <Stamp at={computedAt} />
-          </span>
-        </>
-      )}
-    </section>
+            <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
+              {c('counted')} <Stamp at={computedAt} />
+            </p>
+          </>
+        )}
+      </CardContent>
+    </Card>
   )
 }

package/src/slots/category-block.tsx

@@ -1,14 +1,14 @@
 import type { CategoryBlockModel } from '@meith/theme-kit'
 import { Card, CardDescription, CardHeader, CardRows, CardTitle } from '@meith/ui'
 
-import { LINK } from '../shared'
+import { LINK, PRIMARY_HEADER } from '../shared'
 
 export function CategoryBlock({ category, children }: CategoryBlockModel) {
   const headingId = `category-${category.id}`
 
   return (
     <Card aria-labelledby={headingId}>
-      <CardHeader className="flex-col items-start gap-0.5 border-b-primary/15 bg-primary/6">
+      <CardHeader className={`flex-col items-start gap-0.5 ${PRIMARY_HEADER}`}>
         <CardTitle id={headingId} className="text-primary">
           <a href={category.href} className={`${LINK} hover:text-primary-hover`}>
             {category.title}

package/src/slots/header.tsx

@@ -143,7 +143,7 @@ export function Header({
   const hasNavigation = navigation.length > 0
 
   return (
-    <header className="relative border-t-4 border-b border-t-primary border-b-border bg-card">
+    <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`}>
         <a
           href={homeHref}

package/src/slots/latest-posts.tsx

@@ -10,15 +10,17 @@ import {
   EmptyTitle,
 } from '@meith/ui'
 
-import { LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
+import { LINK, MUTED_LINK, NUMERIC, PRIMARY_HEADER, 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>
-        <CardTitle id="latest-posts-heading">{c('heading')}</CardTitle>
+      <CardHeader className={PRIMARY_HEADER}>
+        <CardTitle id="latest-posts-heading" className="text-primary">
+          {c('heading')}
+        </CardTitle>
         <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
           {c('asOf')} <Stamp at={capturedAt} />
         </p>

package/src/slots/latest-threads.tsx

@@ -10,7 +10,7 @@ import {
   EmptyTitle,
 } from '@meith/ui'
 
-import { LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
+import { LINK, MUTED_LINK, NUMERIC, PRIMARY_HEADER, Stamp, UserRef } from '../shared'
 
 export function LatestThreads({
   threads,
@@ -21,8 +21,10 @@ export function LatestThreads({
 
   return (
     <Card aria-labelledby="latest-threads-heading">
-      <CardHeader>
-        <CardTitle id="latest-threads-heading">{c('heading')}</CardTitle>
+      <CardHeader className={PRIMARY_HEADER}>
+        <CardTitle id="latest-threads-heading" className="text-primary">
+          {c('heading')}
+        </CardTitle>
         <p className={`text-xs text-muted-foreground ${NUMERIC}`}>
           {c('asOf')} <Stamp at={capturedAt} />
         </p>

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