@meith/theme-phasebook 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/theme-phasebook",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A theme for Meith with a familiar social shape, built on the default theme's slots.",
   "license": "LGPL-3.0-or-later",
   "repository": {
@@ -20,9 +20,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/theme-default": "^0.3.0",
-    "@meith/ui": "^0.3.0",
-    "@meith/theme-kit": "^0.3.0"
+    "@meith/theme-kit": "^0.4.0",
+    "@meith/theme-default": "^0.4.0",
+    "@meith/ui": "^0.4.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/slots/panel-page.tsx

@@ -3,14 +3,20 @@ import type { PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
 
 import { MUTED_LINK } from '../shared'
 
-export function PanelPage({ title, back, width, gap, regions, children }: PanelPageModel) {
+export function PanelPage({ title, back, frame, width, gap, regions, children }: PanelPageModel) {
   return (
     <main
       id="board-content"
       tabIndex={-1}
       className={cn(
         'flex w-full flex-col',
-        width === 'wide' ? 'max-w-none' : 'max-w-4xl',
+        frame === 'standalone'
+          ? `mx-auto flex-1 px-3 py-4 sm:px-4 lg:py-6 ${
+              width === 'wide' ? 'max-w-6xl' : 'max-w-4xl'
+            }`
+          : width === 'wide'
+            ? 'max-w-none'
+            : 'max-w-4xl',
         gap === 'loose' ? 'gap-4' : 'gap-3',
       )}
     >

package/src/slots/search-form.tsx

@@ -1,4 +1,4 @@
-import type { OptionModel, SearchFormModel } from '@meith/theme-kit'
+import type { OptionModel, SearchAdvancedModel, SearchFormModel } from '@meith/theme-kit'
 
 import { PILL_PRIMARY } from '../shared'
 
@@ -36,6 +36,62 @@ function Choice({
   )
 }
 
+function Advanced({ label, isOpen, author, toggles, choices }: SearchAdvancedModel) {
+  return (
+    <details open={isOpen} className="rounded-lg border border-border bg-surface/60">
+      <summary className="cursor-default px-3 py-2 text-sm font-semibold select-none">
+        {label}
+      </summary>
+
+      <div className="flex flex-col gap-4 border-t border-border px-3 py-3">
+        <div>
+          <label htmlFor="search-author" className={LABEL}>
+            {author.label}
+          </label>
+          <input
+            id="search-author"
+            type="text"
+            name={author.field}
+            defaultValue={author.value}
+            placeholder={author.placeholder}
+            autoComplete="off"
+            aria-describedby="search-author-hint"
+            className="w-full rounded-full border border-input bg-surface px-4 py-2.5 text-sm text-foreground transition-colors focus-visible:border-ring"
+          />
+          <p id="search-author-hint" className="mt-1.5 text-xs text-muted-foreground">
+            {author.hint}
+          </p>
+        </div>
+
+        {toggles.map((toggle) => (
+          <label key={toggle.field} className="flex items-center gap-2 text-sm select-none">
+            <input
+              type="checkbox"
+              name={toggle.field}
+              value={toggle.value}
+              defaultChecked={toggle.isOn}
+              className="size-4 rounded border border-input accent-primary"
+            />
+            {toggle.label}
+          </label>
+        ))}
+
+        <div className="grid gap-4 sm:grid-cols-3">
+          {choices.map((choice) => (
+            <Choice
+              key={choice.field}
+              id={`search-${choice.field}`}
+              label={choice.label}
+              name={choice.field}
+              options={choice.options}
+            />
+          ))}
+        </div>
+      </div>
+    </details>
+  )
+}
+
 export function SearchForm({
   action,
   fields,
@@ -45,6 +101,7 @@ export function SearchForm({
   sorts,
   hint,
   errorMessage,
+  advanced,
 }: SearchFormModel) {
   const described = [hint === null ? null : 'search-hint', errorMessage === null ? null : 'search-error']
     .filter((id): id is string => id !== null)
@@ -88,6 +145,8 @@ export function SearchForm({
           <Choice id="search-sort" label="Sort by" name={fields.sort} options={sorts} />
         </div>
 
+        {advanced !== undefined && <Advanced {...advanced} />}
+
         <div>
           <button type="submit" className={PILL_PRIMARY}>
             Search

package/src/slots/search-results.tsx

@@ -1,4 +1,4 @@
-import type { SearchResultsModel } from '@meith/theme-kit'
+import type { OptionModel, SearchRefineModel, SearchResultsModel } from '@meith/theme-kit'
 
 import { FEED, LINK, PAGE, PILL, PILL_PRIMARY, Stamp } from '../shared'
 
@@ -10,6 +10,7 @@ export function SearchResults({
   nextLabel,
   newSearchHref,
   within,
+  refine,
 }: SearchResultsModel) {
   return (
     <main id="board-content" tabIndex={-1} className={`${PAGE} flex-1 py-4 sm:py-6`}>
@@ -24,6 +25,8 @@ export function SearchResults({
           </p>
         </header>
 
+        {refine !== undefined && <Refine {...refine} />}
+
         {hits.length === 0 ? (
           <p className="rounded-lg border border-border bg-card px-4 py-6 text-center text-sm text-muted-foreground shadow-elevation">
             Nothing matched — or nothing you can see does. Try fewer words, or a different
@@ -63,6 +66,15 @@ export function SearchResults({
             action={within.action}
             className="flex flex-col gap-3 px-4 py-4"
           >
+            {(within.hidden ?? []).map((field) => (
+              <input
+                key={`${field.name}-${field.value}`}
+                type="hidden"
+                name={field.name}
+                value={field.value}
+              />
+            ))}
+
             <div>
               <label
                 htmlFor="search-within"
@@ -99,3 +111,114 @@ export function SearchResults({
     </main>
   )
 }
+
+function Refine({
+  action,
+  label,
+  summary,
+  note,
+  sorts,
+  sortsLabel,
+  choices,
+  submitLabel,
+  applied,
+  clearHref,
+}: SearchRefineModel) {
+  return (
+    <section
+      aria-label={label}
+      className="flex flex-col gap-2.5 rounded-lg border border-border bg-card px-4 py-3 shadow-elevation"
+    >
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <p className="text-sm font-semibold text-foreground">{summary}</p>
+
+        <nav
+          aria-label={sortsLabel}
+          className="flex items-center rounded-full border border-border p-0.5"
+        >
+          {sorts.map((sort) => (
+            <a
+              key={sort.label}
+              href={sort.href}
+              {...(sort.isCurrent ? { 'aria-current': 'true' as const } : {})}
+              className={
+                sort.isCurrent
+                  ? 'rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary'
+                  : 'rounded-full px-3 py-1 text-xs font-semibold text-muted-foreground hover:bg-muted hover:text-foreground'
+              }
+            >
+              {sort.label}
+            </a>
+          ))}
+        </nav>
+
+        {applied.map((chip) => (
+          <a
+            key={chip.label}
+            href={chip.removeHref}
+            className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-3 py-1 text-xs font-semibold text-foreground hover:bg-primary/20"
+          >
+            {chip.label}
+            <span aria-hidden="true">×</span>
+            <span className="sr-only">— remove this filter</span>
+          </a>
+        ))}
+      </div>
+
+      <form
+        method="get"
+        action={action}
+        className="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border pt-2.5"
+      >
+        {choices.map((choice) => (
+          <RefineChoice key={choice.field} {...choice} />
+        ))}
+
+        <button type="submit" className={`${PILL} h-8 px-3 text-xs`}>
+          {submitLabel}
+        </button>
+
+        {clearHref !== null && (
+          <a href={clearHref} className={`text-xs font-semibold ${LINK}`}>
+            Clear filters
+          </a>
+        )}
+      </form>
+
+      {note !== null && <p className="text-xs text-muted-foreground">{note}</p>}
+    </section>
+  )
+}
+
+function RefineChoice({
+  field,
+  label,
+  options,
+}: {
+  field: string
+  label: string
+  options: readonly OptionModel[]
+}) {
+  const selected = options.find((option) => option.isSelected)
+  const id = `search-refine-${field}`
+
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <label htmlFor={id} className="text-xs font-semibold text-muted-foreground">
+        {label}
+      </label>
+      <select
+        id={id}
+        name={field}
+        defaultValue={selected?.value ?? ''}
+        className="h-8 rounded-lg border border-input bg-surface px-2 text-xs text-foreground transition-colors focus-visible:border-ring"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </span>
+  )
+}

package/src/slots/user-panel.tsx

@@ -79,6 +79,8 @@ export function UserPanel({
   links,
   unreadNotifications,
   unreadMessages,
+  notificationsHref,
+  messagesHref,
   children,
 }: UserPanelModel) {
   if (viewer.isGuest) {
@@ -94,8 +96,6 @@ export function UserPanel({
   }
 
   const name = viewer.username ?? 'Signed in'
-  const hrefFor = (label: string): string | null =>
-    links.find((link) => link.label === label)?.href ?? null
 
   return (
     <div className="flex items-center gap-2">
@@ -107,14 +107,14 @@ export function UserPanel({
       />
 
       {unreadNotifications > 0 && (
-        <IconButton href={hrefFor('Notifications')} title="Notifications">
+        <IconButton href={notificationsHref ?? null} title="Notifications">
           <BellIcon />
           <CountBadge value={unreadNotifications} label="unread notifications" />
         </IconButton>
       )}
 
       {unreadMessages > 0 && (
-        <IconButton href={hrefFor('Messages')} title="Messages">
+        <IconButton href={messagesHref ?? null} title="Messages">
           <MessageIcon />
           <CountBadge value={unreadMessages} label="unread messages" />
         </IconButton>