@meith/theme-default 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Meith's default theme — every slot and every token, and the reference for what a complete theme fills.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,13 +20,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.1.0",
-    "@meith/ui": "^0.1.0"
+    "@meith/theme-kit": "^0.3.0",
+    "@meith/ui": "^0.3.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.3"
+    "@types/react": "^19.2.18"
   }
 }

package/src/slots/auth-page.tsx

@@ -0,0 +1,53 @@
+import type { AuthPageModel } from '@meith/theme-kit'
+
+import { MUTED_LINK } from '../shared'
+
+export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
+  return (
+    <main
+      id="board-content"
+      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 flex-col gap-1">
+          <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
+          {regions.lede !== undefined && (
+            <p className="text-sm text-muted-foreground">{regions.lede}</p>
+          )}
+        </div>
+
+        {alert !== null && (
+          <p
+            role="alert"
+            className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm"
+          >
+            {alert}
+          </p>
+        )}
+
+        {regions.note !== undefined && (
+          <p className="text-sm text-muted-foreground">{regions.note}</p>
+        )}
+
+        {regions.form}
+
+        {links.length > 0 && (
+          <div className="flex flex-col gap-1 text-sm text-muted-foreground">
+            {links.map((link) => (
+              <span key={link.href}>
+                {link.lead === null ? null : `${link.lead} `}
+                <a
+                  href={link.href}
+                  className={link.lead === null ? MUTED_LINK : `font-medium text-foreground ${MUTED_LINK}`}
+                >
+                  {link.label}
+                </a>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}

package/src/slots/discovery-view.tsx

@@ -0,0 +1,126 @@
+import { Card, CardRows, Empty, EmptyDescription, cn } from '@meith/ui'
+import type { DiscoveryViewModel, TabModel } from '@meith/theme-kit'
+
+import { LINK, NUMERIC, Stamp, pageAt } from '../shared'
+
+const TAB =
+  'inline-flex h-9 items-center rounded-full px-3.5 text-sm font-medium 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 items-center gap-x-3">
+      <ul className="-my-1.5 flex min-w-0 flex-1 items-center gap-1 overflow-x-auto py-1.5">
+        {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-primary font-semibold text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+              )}
+            >
+              {tab.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export function DiscoveryView({
+  title,
+  blurb,
+  tabsLabel,
+  tabs,
+  rows,
+  nextHref,
+  nextLabel,
+  emptyMessage,
+  refusal,
+}: DiscoveryViewModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className={`${pageAt('max-w-4xl')} flex flex-1 flex-col gap-6 py-8`}
+    >
+      <div className="flex flex-col gap-1">
+        <h1 className="font-heading text-2xl font-semibold">{title}</h1>
+        <p className="text-sm text-muted-foreground">{blurb}</p>
+      </div>
+
+      <Tabs label={tabsLabel} tabs={tabs} />
+
+      {refusal !== null ? (
+        <p
+          role="alert"
+          className="rounded-md border border-border bg-muted px-3 py-2 text-sm"
+        >
+          {refusal.message}{' '}
+          <a href={refusal.signInHref} className={`font-medium text-foreground ${LINK}`}>
+            {refusal.signInLabel}
+          </a>
+        </p>
+      ) : rows.length === 0 ? (
+        <Card>
+          <Empty>
+            <EmptyDescription>{emptyMessage}</EmptyDescription>
+          </Empty>
+        </Card>
+      ) : (
+        <Card>
+          <CardRows>
+            {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"
+              >
+                <div className="flex min-w-0 flex-col gap-1">
+                  <a
+                    href={row.href}
+                    className="truncate text-[0.9375rem] font-semibold text-foreground hover:underline"
+                  >
+                    {row.title}
+                  </a>
+                  <p className="truncate text-xs text-muted-foreground">
+                    in{' '}
+                    <a href={row.forum.href} className="font-medium hover:underline">
+                      {row.forum.label}
+                    </a>{' '}
+                    · started by {row.authorUsername}
+                  </p>
+                </div>
+
+                <p className="shrink-0 text-xs text-muted-foreground sm:text-right">
+                  <span className={cn('font-semibold text-foreground', NUMERIC)}>
+                    {row.replyCount}
+                  </span>{' '}
+                  {row.replyCount === 1 ? 'reply' : 'replies'}
+                  <span className="block">
+                    last post <Stamp at={row.lastPostAt} />
+                    {row.lastPostUsername === null ? null : ` by ${row.lastPostUsername}`}
+                  </span>
+                </p>
+              </li>
+            ))}
+          </CardRows>
+        </Card>
+      )}
+
+      {nextHref !== null && (
+        <a
+          href={nextHref}
+          className="inline-flex h-9 w-fit items-center rounded-full bg-secondary px-4 text-sm font-semibold text-secondary-foreground transition-colors hover:bg-accent"
+        >
+          {nextLabel} →
+        </a>
+      )}
+    </main>
+  )
+}

package/src/slots/member-profile.tsx

@@ -1,7 +1,7 @@
 import { Avatar, Card, CardContent, CardHeader, CardTitle, buttonVariants, cn } from '@meith/ui'
 import type { MemberProfileModel } from '@meith/theme-kit'
 
-import { NUMERIC, Stamp, pageAt } from '../shared'
+import { NUMERIC, PAGE_BODY, Stamp } from '../shared'
 
 export function MemberProfile({
   user,
@@ -16,7 +16,7 @@ export function MemberProfile({
   regions,
 }: MemberProfileModel) {
   return (
-    <div className={`${pageAt('max-w-4xl')} flex w-full flex-col gap-4 py-6 sm:py-8`}>
+    <div className={PAGE_BODY}>
       <Card>
         <CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:justify-between">
           <div className="flex min-w-0 items-center gap-4">

package/src/slots/panel-nav.tsx

@@ -0,0 +1,106 @@
+import { Disclosure, cn } from '@meith/ui'
+import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
+
+const ITEM =
+  'flex items-baseline gap-2 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'
+const OPEN = 'font-semibold text-foreground hover:bg-accent'
+const ELSEWHERE = 'text-muted-foreground hover:bg-accent hover:text-foreground'
+
+function Count({ count }: { count: number }) {
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className="ml-auto rounded-full bg-surface px-2 py-0.5 text-xs font-semibold tabular-nums text-foreground"
+      >
+        {count > 99 ? '99+' : count}
+      </span>
+      <span className="sr-only">({count} waiting)</span>
+    </>
+  )
+}
+
+function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
+  const body = (
+    <>
+      <span className="min-w-0 flex-1">{item.title}</span>
+      {item.count !== null && <Count count={item.count} />}
+    </>
+  )
+
+  if (item.isRecord) {
+    return (
+      <span className={cn(ITEM, HERE, className)} aria-current="page">
+        {body}
+      </span>
+    )
+  }
+
+  return (
+    <a
+      href={item.href}
+      className={cn(ITEM, className)}
+      {...(item.current === null
+        ? {}
+        : { 'aria-current': item.current === 'here' ? ('page' as const) : ('true' as const) })}
+    >
+      {body}
+    </a>
+  )
+}
+
+function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>) {
+  return (
+    <nav aria-label={label} className="text-sm">
+      <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')}
+          >
+            <Item
+              item={section}
+              className={
+                section.current === 'here' ? HERE : section.isOpen ? OPEN : ELSEWHERE
+              }
+            />
+
+            {section.isOpen && section.children.length > 0 && (
+              <ul className="mt-0.5 ml-3 flex flex-col gap-0.5 border-l border-border pl-2">
+                {section.children.map((child) => (
+                  <li key={child.href}>
+                    <Item
+                      item={child}
+                      className={child.current === 'here' ? HERE : ELSEWHERE}
+                    />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
+  return (
+    <>
+      <Disclosure
+        summary={label}
+        className="lg:hidden"
+        contentClassName="p-2"
+        {...(currentTitle === null ? {} : { aside: currentTitle })}
+      >
+        <Sections label={label} sections={sections} />
+      </Disclosure>
+
+      <div className="hidden rounded-lg border border-border bg-card p-2 shadow-elevation lg:block">
+        <Sections label={label} sections={sections} />
+      </div>
+    </>
+  )
+}

package/src/slots/panel-page.tsx

@@ -0,0 +1,66 @@
+import { cn } from '@meith/ui'
+import type { PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
+
+import { MUTED_LINK } from '../shared'
+
+export function PanelPage({ title, back, width, gap, regions, children }: PanelPageModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className={cn(
+        'flex w-full flex-col px-6 py-8',
+        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 min-w-0 flex-col gap-1">
+          {back !== null && (
+            <a href={back.href} className={`text-sm font-medium ${MUTED_LINK}`}>
+              ← {back.label}
+            </a>
+          )}
+
+          <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
+
+          {regions.lede !== undefined && (
+            <p className="text-sm text-muted-foreground">{regions.lede}</p>
+          )}
+          {regions.meta !== undefined && (
+            <p className="text-xs text-muted-foreground">{regions.meta}</p>
+          )}
+        </div>
+
+        {regions.actions !== undefined && (
+          <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
+        )}
+      </div>
+
+      {children}
+    </main>
+  )
+}
+
+export function PanelSection({ title, headingId, regions, children }: PanelSectionModel) {
+  return (
+    <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">
+            {title}
+          </h2>
+          {regions.description !== undefined && (
+            <p className="text-sm text-muted-foreground">{regions.description}</p>
+          )}
+        </div>
+
+        {regions.actions !== undefined && (
+          <div className="flex shrink-0 flex-wrap items-center gap-2">{regions.actions}</div>
+        )}
+      </div>
+
+      {children}
+    </section>
+  )
+}

package/src/slots/panel-shell.tsx

@@ -0,0 +1,35 @@
+import type { PanelShellModel } from '@meith/theme-kit'
+
+import { MUTED_LINK } from '../shared'
+
+const RAIL =
+  'flex flex-col gap-4 px-6 pt-6 lg:sticky lg:w-56 lg:shrink-0 lg:self-start lg:py-8 lg:pr-0'
+
+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'}`}>
+        {regions.nav}
+
+        {links.length > 0 && (
+          <nav aria-label={linksLabel} className="border-t border-border pt-3 text-sm">
+            <ul className="flex flex-col gap-0.5">
+              {links.map((link) => (
+                <li key={link.href}>
+                  <a
+                    href={link.href}
+                    className={`block rounded-md px-3 py-1.5 ${MUTED_LINK} hover:bg-muted/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </aside>
+
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  )
+}

package/src/slots/search-results.tsx

@@ -0,0 +1,106 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardRows,
+  Empty,
+  EmptyDescription,
+  EmptyTitle,
+  Field,
+  Input,
+  buttonVariants,
+} from '@meith/ui'
+import type { SearchResultsModel } from '@meith/theme-kit'
+
+import { LINK, Stamp, pageAt } from '../shared'
+
+export function SearchResults({
+  terms,
+  searchedAt,
+  hits,
+  nextHref,
+  nextLabel,
+  newSearchHref,
+  within,
+}: SearchResultsModel) {
+  return (
+    <main
+      id="board-content"
+      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">
+          Results for &ldquo;{terms}&rdquo;
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Searched <Stamp at={searchedAt} />. Results are checked against your access
+          every time this page is opened, so they can change.
+        </p>
+      </div>
+
+      <Card>
+        {hits.length === 0 ? (
+          <Empty>
+            <EmptyTitle>Nothing matched.</EmptyTitle>
+            <EmptyDescription>
+              Or nothing you can see does. Try fewer words, or a different spelling.
+            </EmptyDescription>
+          </Empty>
+        ) : (
+          <CardRows>
+            {hits.map((hit) => (
+              <li key={hit.postId} className="flex flex-col gap-1 px-4 py-3">
+                <a href={hit.href} className={`text-sm font-medium text-foreground ${LINK}`}>
+                  {hit.threadTitle}
+                </a>
+                <p
+                  className="text-sm text-muted-foreground [&_b]:font-semibold [&_b]:text-foreground"
+                  dangerouslySetInnerHTML={{ __html: hit.excerptHtml }}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {hit.authorUsername} · <Stamp at={hit.postedAt} />
+                </p>
+              </li>
+            ))}
+          </CardRows>
+        )}
+
+        {nextHref !== null && (
+          <CardFooter>
+            <a href={nextHref} className={`font-medium text-foreground ${LINK}`}>
+              {nextLabel} →
+            </a>
+          </CardFooter>
+        )}
+      </Card>
+
+      <Card>
+        <CardContent className="p-4 sm:p-5">
+          <form method="get" action={within.action} className="flex flex-col gap-4">
+            <Field name={within.field} label={within.label} description={within.hint}>
+              {(control) => (
+                <Input
+                  {...control}
+                  defaultValue={within.value}
+                  type="search"
+                  autoComplete="off"
+                />
+              )}
+            </Field>
+
+            <div>
+              <button type="submit" className={buttonVariants({ variant: 'primary' })}>
+                {within.submitLabel}
+              </button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <a href={newSearchHref} className={`text-sm font-medium text-foreground ${LINK}`}>
+        Start a new search
+      </a>
+    </main>
+  )
+}

package/src/theme.ts

@@ -25,6 +25,12 @@ import { PostActions } from './slots/post-actions'
 import { MemberProfile } from './slots/member-profile'
 import { ForumJump } from './slots/forum-jump'
 import { SearchForm } from './slots/search-form'
+import { AuthPage } from './slots/auth-page'
+import { SearchResults } from './slots/search-results'
+import { DiscoveryView } from './slots/discovery-view'
+import { PanelShell } from './slots/panel-shell'
+import { PanelNav } from './slots/panel-nav'
+import { PanelPage, PanelSection } from './slots/panel-page'
 import { RedirectNotice } from './slots/redirect-notice'
 import { ErrorNotice } from './slots/error-notice'
 
@@ -61,7 +67,18 @@ export const defaultTheme = defineTheme({
 
     MemberProfile,
 
+    AuthPage,
+
     SearchForm,
+    SearchResults,
+
+    DiscoveryView,
+
+    PanelShell,
+    PanelNav,
+    PanelPage,
+    PanelSection,
+
     ForumJump,
 
     RedirectNotice,