@meith/theme-default 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-default",
-  "version": "0.4.0",
+  "version": "0.6.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,8 +20,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-kit": "^0.4.0",
-    "@meith/ui": "^0.4.0"
+    "@meith/theme-kit": "^0.6.0",
+    "@meith/ui": "^0.6.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/panel-icons.tsx

@@ -0,0 +1,64 @@
+import type { PanelNavIcon } from '@meith/theme-kit'
+
+const SHARED = {
+  'aria-hidden': true,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.5,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  className: 'size-4 shrink-0',
+} as const
+
+const PATHS: Record<PanelNavIcon, string> = {
+  overview: 'M2.5 8.5h4l1.5 3 2-6 1.5 3h2.5M2.5 4.5v7a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-7',
+  settings: 'M3 4.5h10M3 8h10M3 11.5h10M6 3v3M10.5 6.5v3M5 10v3',
+  forums: 'M2.5 3.5h4l1 1.5h6v7a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1Zm3 5.5h5M5.5 11h3',
+  groups:
+    'M6 7.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm5.5.5a1.75 1.75 0 1 0 0-3.5M2 13v-.5A3.5 3.5 0 0 1 5.5 9h1A3.5 3.5 0 0 1 10 12.5v.5m1.5-4A3 3 0 0 1 14 12v1',
+  users:
+    'M8 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm-4.5 5v-.5A3.5 3.5 0 0 1 7 9h2a3.5 3.5 0 0 1 3.5 3.5v.5',
+  content:
+    'M4 2.5h5l3 3v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1Zm5 0v3h3M5.5 8.5h5M5.5 11h3',
+  antispam: 'M8 2 3 4v4c0 3 2.2 5.2 5 6 2.8-.8 5-3 5-6V4Zm-2 5.5 1.5 1.5L10.5 6',
+  themes:
+    'M8 2.5a5.5 5.5 0 1 0 0 11c.9 0 1.5-.7 1.5-1.5 0-.4-.2-.7-.4-1a1.4 1.4 0 0 1 1-2.4h1.3A2.6 2.6 0 0 0 14 6C14 4 11.3 2.5 8 2.5Zm-2.5 3.7h.01M9 4.7h.01M11.3 6.4h.01M5.2 9.2h.01',
+  plugins:
+    'M6 2.8a1.3 1.3 0 0 1 2.6 0V4h2.2a.7.7 0 0 1 .7.7V7h1.2a1.3 1.3 0 0 1 0 2.6H11.5v2.2a.7.7 0 0 1-.7.7H8.6v-1.2a1.3 1.3 0 0 0-2.6 0V12.5H3.8a.7.7 0 0 1-.7-.7V4.7A.7.7 0 0 1 3.8 4H6Z',
+  tokens:
+    'M9.8 3.2a3.2 3.2 0 1 1-3 5.3L3 12.3v1.2h1.5l.6-.7h1.2v-1.2h1.2l1-1a3.2 3.2 0 0 0 1.3-7.4Zm.9 2.6h.01',
+  system:
+    'M3 3.5h10a.5.5 0 0 1 .5.5v2.5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5Zm0 5.5h10a.5.5 0 0 1 .5.5V12a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V9.5A.5.5 0 0 1 3 9Zm2 1.75h.01M5 5.25h.01',
+  log: 'M4.5 2.5h7a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1Zm1.5 3h4m-4 2.5h4m-4 2.5h2.5',
+  queue:
+    'M2.5 9.5h3l1 2h3l1-2h3M2.5 9.5 4 4a1 1 0 0 1 1-.8h6a1 1 0 0 1 1 .8l1.5 5.5v2.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1Z',
+  reports: 'M4 14V3m0 0h7.5l-1.5 3 1.5 3H4',
+  ip: 'M8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 0c-1.6 1.4-2.4 3.3-2.4 5.5S6.4 12.1 8 13.5c1.6-1.4 2.4-3.3 2.4-5.5S9.6 3.9 8 2.5ZM2.8 6h10.4M2.8 10h10.4',
+  messages:
+    'M2.5 5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1Zm.4-.4 5.1 4 5.1-4',
+  notifications:
+    'M8 2.5a3.5 3.5 0 0 0-3.5 3.5c0 3-1 4-1 4h9s-1-1-1-4A3.5 3.5 0 0 0 8 2.5ZM6.8 12a1.3 1.3 0 0 0 2.4 0',
+  subscriptions: 'M4 2.8h8a.5.5 0 0 1 .5.5v10L8 10.6l-4.5 2.7v-10a.5.5 0 0 1 .5-.5Z',
+  profile:
+    'M8 8.2a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2ZM3.5 13.2v-.7A3.3 3.3 0 0 1 6.8 9.2h2.4a3.3 3.3 0 0 1 3.3 3.3v.7',
+  avatar:
+    'M3.5 2.8h9a.7.7 0 0 1 .7.7v9a.7.7 0 0 1-.7.7h-9a.7.7 0 0 1-.7-.7v-9a.7.7 0 0 1 .7-.7Zm.3 9.6 3.4-3.9 2 2.2 1.6-1.7 1.6 1.9M6 6.6h.01',
+  signature:
+    'M2.8 11.5c2.5 0 3-6.5 4.7-6.5 1.2 0 .5 4.5 1.9 4.5 1 0 1.3-2 2.3-2 .8 0 1 1.3 1.5 1.3M3 13.5h10',
+  buddies:
+    'M5.8 7.6a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2ZM2 13v-.4a3.3 3.3 0 0 1 3.3-3.3h1a3.3 3.3 0 0 1 3.3 3.3v.4m2.4-7.5v3.4m1.7-1.7h-3.4',
+  security:
+    'M4.5 7V5.5a3.5 3.5 0 1 1 7 0V7m-7.7 0h8.4a.8.8 0 0 1 .8.8v5a.8.8 0 0 1-.8.8H3.8a.8.8 0 0 1-.8-.8v-5a.8.8 0 0 1 .8-.8Z',
+}
+
+export function PanelIcon({ icon }: { icon: PanelNavIcon }) {
+  const path = PATHS[icon]
+  if (path === undefined) return null
+
+  return (
+    <svg {...SHARED}>
+      <path d={path} />
+    </svg>
+  )
+}

package/src/slots/header.tsx

@@ -40,7 +40,7 @@ export function Header({ boardTitle, homeHref, navigation, logo, children }: Hea
       {navigation.length > 0 && (
         <nav aria-label="Board sections" className="border-t border-border bg-surface">
           <div className={PAGE}>
-            <ul className="-mx-4 flex items-stretch gap-1 overflow-x-auto px-4 text-sm sm:-mx-6 sm:px-6">
+            <ul className="-mx-4 flex items-stretch gap-1 overflow-x-auto px-4 text-sm [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] sm:-mx-6 sm:px-6 sm:[mask-image:none]">
               {navigation.map((item) => (
                 <li key={item.href} className="shrink-0">
                   <a

package/src/slots/pagination.tsx

@@ -3,7 +3,14 @@ import type { PaginationModel } from '@meith/theme-kit'
 
 import { NUMERIC } from '../shared'
 
-export function Pagination({ page, pageCount, pages, previousHref, nextHref }: PaginationModel) {
+export function Pagination({
+  page,
+  pageCount,
+  pageCountIsExact,
+  pages,
+  previousHref,
+  nextHref,
+}: PaginationModel) {
   if (pageCount <= 1 && previousHref === null && nextHref === null) return null
 
   const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20')
@@ -54,9 +61,8 @@ export function Pagination({ page, pageCount, pages, previousHref, nextHref }: P
         })}
 
         <li className="ml-1 text-xs whitespace-nowrap text-muted-foreground">
-          <span className="sr-only">Page </span>
           <span className={NUMERIC}>
-            {page} of {pageCount}
+            {pageCountIsExact ? `Page ${page} of ${pageCount}` : `Page ${page}`}
           </span>
         </li>
       </ol>

package/src/slots/panel-nav.tsx

@@ -1,10 +1,13 @@
 import { Disclosure, cn } from '@meith/ui'
 import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
 
+import { PanelIcon } from '../panel-icons'
+
 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'
+  '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'
 
-const HERE = 'bg-secondary font-semibold text-foreground'
+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'
 
@@ -13,7 +16,7 @@ function Count({ count }: { count: number }) {
     <>
       <span
         aria-hidden="true"
-        className="ml-auto rounded-full bg-surface px-2 py-0.5 text-xs font-semibold tabular-nums text-foreground"
+        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"
       >
         {count > 99 ? '99+' : count}
       </span>
@@ -25,7 +28,12 @@ function Count({ count }: { count: number }) {
 function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
   const body = (
     <>
-      <span className="min-w-0 flex-1">{item.title}</span>
+      {item.icon !== null && (
+        <span className="text-muted-foreground/80">
+          <PanelIcon icon={item.icon} />
+        </span>
+      )}
+      <span className="min-w-0 flex-1 truncate">{item.title}</span>
       {item.count !== null && <Count count={item.count} />}
     </>
   )
@@ -44,7 +52,10 @@ function Item({ item, className }: { item: PanelNavItemModel; className: string
       className={cn(ITEM, className)}
       {...(item.current === null
         ? {}
-        : { 'aria-current': item.current === 'here' ? ('page' as const) : ('true' as const) })}
+        : {
+            'aria-current':
+              item.current === 'here' ? ('page' as const) : ('true' as const),
+          })}
     >
       {body}
     </a>
@@ -54,7 +65,7 @@ function Item({ item, className }: { item: PanelNavItemModel; className: string
 function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>) {
   return (
     <nav aria-label={label} className="text-sm">
-      <ul className="flex flex-col gap-0.5">
+      <ul className="flex flex-col gap-0.5 pl-2.5">
         {sections.map((section) => (
           <li
             key={section.href}
@@ -68,7 +79,7 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
             />
 
             {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">
+              <ul className="mt-0.5 ml-4 flex flex-col gap-0.5 border-l border-border pl-2.5">
                 {section.children.map((child) => (
                   <li key={child.href}>
                     <Item
@@ -89,16 +100,17 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
 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="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">
+        <Disclosure
+          summary={label}
+          contentClassName="p-2"
+          {...(currentTitle === null ? {} : { aside: currentTitle })}
+        >
+          <Sections label={label} sections={sections} />
+        </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} />
       </div>
     </>

package/src/slots/panel-shell.tsx

@@ -3,22 +3,34 @@ 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'
+  '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'
 
-export function PanelShell({ panel, links, linksLabel, regions, children }: PanelShellModel) {
+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">
+          <nav
+            aria-label={linksLabel}
+            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>
+            <ul className="flex flex-col gap-0.5 text-sm">
               {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`}
+                    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`}
                   >
                     {link.label}
                   </a>
@@ -30,6 +42,19 @@ export function PanelShell({ panel, links, linksLabel, regions, children }: Pane
       </aside>
 
       <div className="min-w-0 flex-1">{children}</div>
+
+      {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"
+        >
+          {links.map((link) => (
+            <a key={link.href} href={link.href} className={MUTED_LINK}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      )}
     </div>
   )
 }

package/src/slots/search-results.tsx

@@ -25,6 +25,7 @@ export function SearchResults({
   newSearchHref,
   within,
   refine,
+  regions,
 }: SearchResultsModel) {
   return (
     <main
@@ -71,12 +72,16 @@ export function SearchResults({
           </CardRows>
         )}
 
-        {nextHref !== null && (
-          <CardFooter>
-            <a href={nextHref} className={`font-medium text-foreground ${LINK}`}>
-              {nextLabel} →
-            </a>
-          </CardFooter>
+        {regions?.pagination !== undefined ? (
+          <CardFooter>{regions.pagination}</CardFooter>
+        ) : (
+          nextHref !== null && (
+            <CardFooter>
+              <a href={nextHref} className={`font-medium text-foreground ${LINK}`}>
+                {nextLabel} →
+              </a>
+            </CardFooter>
+          )
         )}
       </Card>