@meith/theme-default 0.33.3 → 0.34.0

package/package.json

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

package/src/shared.tsx

@@ -24,12 +24,8 @@ export const PRIMARY_HEADER = 'border-b-primary/15 bg-primary/6'
 
 export const MUTED_LINK = `text-muted-foreground ${LINK}`
 
-export const HEADER_HEIGHT = 'h-14'
-
 export const BELOW_HEADER = 'top-14'
 
-export const BELOW_DESKTOP_HEADER = 'lg:top-[6.5rem]'
-
 export const PAGE_TITLE =
   'font-heading text-xl font-semibold tracking-tight text-balance sm:text-2xl'
 
@@ -43,7 +39,7 @@ export const PILL =
 export function UserRef({ user, className }: { user: UserRefModel; className?: string }) {
   const classes = cn(
     'font-medium',
-    user.nameClass == null && 'text-primary',
+    user.nameClass == null && 'text-foreground',
     className,
     user.nameClass,
   )
@@ -165,14 +161,19 @@ export function Counts({ items, className }: { items: readonly CountItem[]; clas
 
 export function Figures({ items, className }: { items: readonly CountItem[]; className?: string }) {
   return (
-    <dl className={cn('grid grid-cols-2 gap-x-5 text-center', className)}>
+    <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',
+        className,
+      )}
+    >
       {items.map((item) => (
-        <div key={item.label} className="flex flex-col">
+        <div key={item.label} className="flex items-baseline gap-x-1 md:flex-col md:gap-0">
           <dt className="sr-only">{item.label}</dt>
-          <dd className={cn('text-sm font-semibold text-foreground', NUMERIC)}>
+          <dd className={cn('font-semibold text-foreground md:text-sm', NUMERIC)}>
             {item.value.label}
           </dd>
-          <dd className="text-[0.6875rem] leading-4 text-muted-foreground">
+          <dd className="md:text-[0.6875rem] md:leading-4">
             {item.value.value === 1 ? item.one : item.many}
           </dd>
         </div>

package/src/slots/forum-row.tsx

@@ -70,7 +70,7 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
       </div>
 
       {!isLink && (
-        <div className="col-start-2 flex min-w-0 flex-wrap items-center gap-x-5 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 md:contents">
           <Figures
             className="md:col-start-3 md:justify-self-end"
             items={[
@@ -89,7 +89,7 @@ export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }
             ]}
           />
 
-          <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 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 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
             {forum.lastPost === null ? (
               <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (

package/src/slots/header.tsx

@@ -1,7 +1,7 @@
 import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
 import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
-import { BELOW_HEADER, HEADER_HEIGHT, PAGE } from '../shared'
+import { BELOW_HEADER, PAGE } from '../shared'
 
 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'
@@ -158,16 +158,48 @@ export function Header({
   )
 
   return (
-    <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`}>
+    <header
+      data-header-peek
+      className="sticky top-0 z-40 border-b border-b-border bg-card/95 backdrop-blur motion-safe:transition-transform motion-safe:duration-200 data-peek:-translate-y-full supports-[backdrop-filter]:bg-card/85"
+    >
+      <div className={`${PAGE} flex min-h-14 items-center gap-x-3 sm:gap-x-4`}>
         <a
           href={homeHref}
-          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"
+          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"
         >
           <BoardMark boardTitle={boardTitle} logo={logo} />
         </a>
 
-        <div className="flex min-w-0 shrink-0 items-center gap-2 sm:gap-3">{children}</div>
+        {hasNavigation && (
+          <nav
+            aria-label={c('sections')}
+            className={
+              opensMenus
+                ? 'hidden min-w-0 flex-1 lg:block'
+                : 'hidden min-w-0 flex-1 overflow-x-auto [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] [scrollbar-width:none] lg:block'
+            }
+          >
+            <ul
+              data-nav-view="desktop"
+              className={
+                opensMenus
+                  ? 'flex flex-wrap items-center gap-0.5 py-1'
+                  : 'flex items-center gap-0.5 pr-6 whitespace-nowrap'
+              }
+            >
+              {navigation.map((item) => (
+                <li key={item.href} className="group relative shrink-0">
+                  <a href={item.href} {...linkTarget(item)} className={DESKTOP_LINK}>
+                    {item.label}
+                  </a>
+                  <Submenu items={item.submenu} />
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+
+        <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">
@@ -192,36 +224,6 @@ export function Header({
           </nav>
         )}
       </div>
-
-      {hasNavigation && (
-        <nav aria-label={c('sections')} className="hidden border-t border-border lg:block">
-          <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={
-                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">
-                  <a href={item.href} {...linkTarget(item)} className={DESKTOP_LINK}>
-                    {item.label}
-                  </a>
-                  <Submenu items={item.submenu} />
-                </li>
-              ))}
-            </ul>
-          </div>
-        </nav>
-      )}
     </header>
   )
 }

package/src/slots/panel-shell.tsx

@@ -1,6 +1,6 @@
 import type { PanelShellModel } from '@meith/theme-kit'
 
-import { BELOW_DESKTOP_HEADER, EYEBROW, MUTED_LINK } from '../shared'
+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'
@@ -22,10 +22,10 @@ function SwitchGlyph() {
   )
 }
 
-export function PanelShell({ panel, links, linksLabel, regions, children }: PanelShellModel) {
+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">
-      <aside className={`${RAIL} ${panel === 'admincp' ? 'lg:top-14' : BELOW_DESKTOP_HEADER}`}>
+      <aside className={`${RAIL} lg:top-14`}>
         {regions.nav}
 
         {links.length > 0 && (

package/src/slots/thread-row.tsx

@@ -68,7 +68,7 @@ export function ThreadRow({
         </p>
       </div>
 
-      <div className="col-start-2 flex min-w-0 flex-wrap items-center gap-x-5 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 md:contents">
         <Figures
           className="md:col-start-3 md:justify-self-end"
           items={[
@@ -87,7 +87,7 @@ export function ThreadRow({
           ]}
         />
 
-        <div className="flex min-w-0 max-w-full flex-wrap gap-x-1 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 md:order-none md:col-start-4 md:block md:border-l md:border-border md:pl-5">
           {thread.lastPost === null ? (
             <span className="text-thread-moved">{c('noRepliesYet')}</span>
           ) : (

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