@meith/theme-raidframe 0.7.0 → 0.9.0

package/src/slots/category-block.tsx

@@ -1,8 +1,15 @@
-import type { CategoryBlockModel } from '@meith/theme-kit'
+import type { CategoryBlockModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, MICRO, PanelHead } from '../shared'
 
-export function CategoryBlock({ category, children }: CategoryBlockModel) {
+export function CategoryBlock({
+  category,
+  children,
+  copy,
+}: CategoryBlockModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.categoryBlock.${key}`)
+
   return (
     <Frame>
       <PanelHead title={category.title} href={category.href} />
@@ -17,16 +24,16 @@ export function CategoryBlock({ category, children }: CategoryBlockModel) {
         <thead>
           <tr className={`${MICRO} text-left`}>
             <th scope="col" className="px-3 py-1.5 font-semibold">
-              Forum
+              {c('forum')}
             </th>
             <th scope="col" className="w-16 px-2 py-1.5 text-right font-semibold">
-              Threads
+              {c('threads')}
             </th>
             <th scope="col" className="w-16 px-2 py-1.5 text-right font-semibold">
-              Posts
+              {c('posts')}
             </th>
             <th scope="col" className="hidden w-60 px-3 py-1.5 font-semibold sm:table-cell">
-              Last post
+              {c('lastPost')}
             </th>
           </tr>
         </thead>

package/src/slots/discovery-view.tsx

@@ -1,4 +1,5 @@
-import type { DiscoveryViewModel, TabModel } from '@meith/theme-kit'
+import type { DiscoveryViewModel, SlotCopy, TabModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, HEADING, MICRO, NUMERIC, RULE, Stamp } from '../shared'
 
@@ -6,7 +7,8 @@ const TAB =
   'inline-flex items-center border px-3 py-1.5 font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.14em] whitespace-nowrap'
 
 const CURRENT = 'border-primary bg-primary text-primary-foreground'
-const OTHER = 'border-border bg-card text-muted-foreground hover:border-primary/60 hover:text-primary'
+const OTHER =
+  'border-border bg-card text-muted-foreground hover:border-primary/60 hover:text-primary'
 
 function Tabs({ label, tabs }: { label: string; tabs: readonly TabModel[] }) {
   if (tabs.length === 0) return null
@@ -40,7 +42,10 @@ export function DiscoveryView({
   nextLabel,
   emptyMessage,
   refusal,
-}: DiscoveryViewModel) {
+  copy,
+}: DiscoveryViewModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.discoveryView.${key}`)
+
   return (
     <main
       id="board-content"
@@ -49,7 +54,7 @@ export function DiscoveryView({
     >
       <div className="border border-border bg-card shadow-elevation">
         <div className="px-4 py-3">
-          <p className={MICRO}>listing</p>
+          <p className={MICRO}>{c('kicker')}</p>
           <h1 className={`${HEADING} text-xl text-foreground`}>{title}</h1>
           <p className="mt-1 text-xs text-muted-foreground">{blurb}</p>
         </div>
@@ -92,16 +97,20 @@ export function DiscoveryView({
                       {row.forum.label}
                     </a>
                     <span className="text-border">{' | '}</span>
-                    <span className="uppercase">started by</span> {row.authorUsername}
+                    <span className="uppercase">{c('startedBy')}</span> {row.authorUsername}
                   </p>
                 </div>
 
                 <p className={`${MICRO} shrink-0 normal-case sm:text-right`}>
-                  <span className={`${NUMERIC} text-foreground`}>{row.replyCount}</span>{' '}
-                  <span className="uppercase">{row.replyCount === 1 ? 'reply' : 'replies'}</span>
+                  <span className={`${NUMERIC} text-foreground`}>{row.replyCount.label}</span>{' '}
+                  <span className="uppercase">
+                    {row.replyCount.value === 1 ? c('reply.one') : c('reply.other')}
+                  </span>
                   <span className="block">
                     <Stamp at={row.lastPostAt} />
-                    {row.lastPostUsername === null ? null : ` by ${row.lastPostUsername}`}
+                    {row.lastPostUsername === null
+                      ? null
+                      : `${c('lastPostByPrefix')}${row.lastPostUsername}`}
                   </span>
                 </p>
               </li>

package/src/slots/error-notice.tsx

@@ -1,23 +1,35 @@
-import type { ErrorNoticeModel } from '@meith/theme-kit'
+import type { ErrorNoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON_PRIMARY, Frame, HEADING, MICRO, NUMERIC } from '../shared'
 
-export function ErrorNotice({ status, title, message, homeHref, requestId }: ErrorNoticeModel) {
+export function ErrorNotice({
+  status,
+  title,
+  message,
+  homeHref,
+  requestId,
+  copy,
+}: ErrorNoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.errorNotice.${key}`)
+
   return (
     <Frame className="w-full max-w-lg">
       <div className="px-5 py-5">
-        <p className={`${MICRO} ${NUMERIC} text-destructive`}>error {status}</p>
+        <p className={`${MICRO} ${NUMERIC} text-destructive`}>
+          {c('errorLabel')} {status}
+        </p>
         <h1 className={`${HEADING} mt-1 text-2xl text-foreground`}>{title}</h1>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <a href={homeHref} className={`${BUTTON_PRIMARY} mt-5`}>
-          forum home
+          {c('forumHome')}
         </a>
       </div>
 
       {requestId !== null && (
         <p className={`${MICRO} border-t border-border px-5 py-2 normal-case`}>
-          <span className="uppercase">request id</span>{' '}
+          <span className="uppercase">{c('requestId')}</span>{' '}
           <code className={`${NUMERIC} text-foreground select-all`}>{requestId}</code>
         </p>
       )}

package/src/slots/footer.tsx

@@ -1,8 +1,17 @@
-import type { FooterModel } from '@meith/theme-kit'
+import type { FooterModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { RULE } from '../shared'
 
-export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterModel) {
+export function Footer({
+  boardTitle,
+  links,
+  timezoneLabel,
+  poweredBy,
+  copy,
+}: FooterModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.footer.${key}`)
+
   return (
     <footer className="mt-auto">
       <div className={RULE} aria-hidden="true" />
@@ -12,7 +21,7 @@ export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterMo
           {boardTitle}
         </span>
 
-        <nav aria-label="Board links" className="flex flex-wrap gap-x-4 gap-y-1">
+        <nav aria-label={c('linksAriaLabel')} className="flex flex-wrap gap-x-4 gap-y-1">
           {links.map((link) => (
             <a key={link.href} href={link.href} className="hover:text-primary">
               {link.label}
@@ -21,7 +30,10 @@ export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterMo
         </nav>
 
         <span className="flex flex-wrap gap-x-4 gap-y-1">
-          <span>all times {timezoneLabel}</span>
+          <span>
+            {c('allTimesPrefix')}
+            {timezoneLabel}
+          </span>
           {poweredBy && (
             <a href={poweredBy.href} className="hover:text-primary">
               {poweredBy.label}

package/src/slots/forum-display.tsx

@@ -1,14 +1,23 @@
-import type { ForumDisplayModel } from '@meith/theme-kit'
+import type { ForumDisplayModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON, BUTTON_PRIMARY, Frame, HEADING, MICRO, NUMERIC, RULE } from '../shared'
 
-export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }: ForumDisplayModel) {
+export function ForumDisplay({
+  forum,
+  newThreadHref,
+  markReadAction,
+  regions,
+  copy,
+}: ForumDisplayModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.forumDisplay.${key}`)
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <div className="border border-border bg-card shadow-elevation">
         <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
           <div className="min-w-0">
-            <p className={MICRO}>forum</p>
+            <p className={MICRO}>{c('kicker')}</p>
             <h1 className={`${HEADING} text-xl text-foreground`}>{forum.title}</h1>
             {forum.description !== null && (
               <p className="mt-1 text-xs text-muted-foreground">{forum.description}</p>
@@ -17,13 +26,13 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
 
           <div className="flex flex-wrap items-center gap-3">
             <span className={`${MICRO} ${NUMERIC} normal-case`}>
-              <span className="text-foreground">{forum.threadCount}</span> threads
+              <span className="text-foreground">{forum.threadCount.label}</span> {c('threads')}
               <span className="text-border">{' | '}</span>
-              <span className="text-foreground">{forum.postCount}</span> posts
+              <span className="text-foreground">{forum.postCount.label}</span> {c('posts')}
             </span>
             {newThreadHref !== null && (
               <a href={newThreadHref} className={BUTTON_PRIMARY}>
-                new thread
+                {c('newThread')}
               </a>
             )}
           </div>
@@ -46,16 +55,16 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
           <thead>
             <tr className={`${MICRO} border-b border-border bg-surface text-left`}>
               <th scope="col" className="px-3 py-2 font-semibold">
-                Thread
+                {c('threadHeader')}
               </th>
               <th scope="col" className="w-16 px-2 py-2 text-right font-semibold">
-                Replies
+                {c('repliesHeader')}
               </th>
               <th scope="col" className="w-16 px-2 py-2 text-right font-semibold">
-                Views
+                {c('viewsHeader')}
               </th>
               <th scope="col" className="hidden w-52 px-3 py-2 font-semibold sm:table-cell">
-                Last post
+                {c('lastPostHeader')}
               </th>
             </tr>
           </thead>
@@ -72,7 +81,7 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
       {markReadAction !== null && (
         <form action={markReadAction} method="post">
           <button type="submit" className={BUTTON}>
-            mark this forum read
+            {c('markRead')}
           </button>
         </form>
       )}

package/src/slots/forum-row.tsx

@@ -1,9 +1,11 @@
-import type { ForumRowSlotModel } from '@meith/theme-kit'
+import type { ForumRowSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { HEADING, MICRO, NUMERIC, ReadPip, Stamp, UserRef } from '../shared'
 
-export function ForumRow({ forum }: ForumRowSlotModel) {
+export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }) {
   const isLink = forum.type === 'link'
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.forumRow.${key}`)
 
   return (
     <tr className="border-t border-border align-top hover:bg-secondary/50">
@@ -11,11 +13,14 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
         <div className="flex items-baseline gap-2">
           <ReadPip unread={forum.isUnread} className="mt-1.5" />
           <div className="min-w-0">
-            <a href={forum.href} className={`${HEADING} text-sm text-foreground hover:text-primary`}>
+            <a
+              href={forum.href}
+              className={`${HEADING} text-sm text-foreground hover:text-primary`}
+            >
               {forum.title}
             </a>
-            {forum.isUnread && <span className="sr-only">(new posts)</span>}
-            {isLink && <span className={`${MICRO} ml-2`}>link</span>}
+            {forum.isUnread && <span className="sr-only">{c('newPosts')}</span>}
+            {isLink && <span className={`${MICRO} ml-2`}>{c('linkBadge')}</span>}
 
             {forum.description !== null && (
               <p className="mt-0.5 text-xs text-muted-foreground">{forum.description}</p>
@@ -39,23 +44,34 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
       </td>
 
       <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-foreground`}>
-        {isLink ? <span className="text-muted-foreground">—</span> : forum.threadCount}
+        {isLink ? (
+          <span className="text-muted-foreground">{c('none')}</span>
+        ) : (
+          forum.threadCount.label
+        )}
       </td>
       <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-foreground`}>
-        {isLink ? <span className="text-muted-foreground">—</span> : forum.postCount}
+        {isLink ? (
+          <span className="text-muted-foreground">{c('none')}</span>
+        ) : (
+          forum.postCount.label
+        )}
       </td>
 
       <td className="hidden w-60 px-3 py-2.5 text-xs text-muted-foreground sm:table-cell">
         {isLink || forum.lastPost === null ? (
-          <span className={MICRO}>{isLink ? '' : 'no posts yet'}</span>
+          <span className={MICRO}>{isLink ? '' : c('noPostsYet')}</span>
         ) : (
           <>
-            <a href={forum.lastPost.href} className="block truncate text-foreground hover:text-primary">
+            <a
+              href={forum.lastPost.href}
+              className="block truncate text-foreground hover:text-primary"
+            >
               {forum.lastPost.threadTitle}
             </a>
             <span className={`${MICRO} mt-0.5 block normal-case`}>
               <UserRef user={forum.lastPost.author} className="hover:text-primary" />
-              {' · '}
+              {c('separator')}
               <Stamp at={forum.lastPost.at} />
             </span>
           </>

package/src/slots/header.tsx

@@ -1,4 +1,5 @@
-import type { HeaderModel } from '@meith/theme-kit'
+import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy, linkTarget } from '@meith/theme-kit'
 
 import { RULE } from '../shared'
 
@@ -30,7 +31,36 @@ function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'
   )
 }
 
-export function Header({ boardTitle, homeHref, navigation, logo, children }: HeaderModel) {
+function Submenu({ items }: { items: HeaderModel['navigation'][number]['submenu'] }) {
+  if (items === undefined || items.length === 0) return null
+
+  return (
+    <ul className="invisible absolute top-full left-0 z-30 min-w-44 rounded-b-md border border-border bg-card py-1 text-sm opacity-0 shadow-elevation transition-opacity group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100">
+      {items.map((child) => (
+        <li key={child.href}>
+          <a
+            href={child.href}
+            {...linkTarget(child)}
+            className="block px-3 py-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            {child.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export function Header({
+  boardTitle,
+  homeHref,
+  navigation,
+  logo,
+  children,
+  copy,
+}: HeaderModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.header.${key}`)
+
   return (
     <header>
       <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b border-border bg-surface px-4 py-3">
@@ -48,17 +78,20 @@ export function Header({ boardTitle, homeHref, navigation, logo, children }: Hea
 
       {navigation.length > 0 && (
         <nav
-          aria-label="Board sections"
+          aria-label={c('sectionsAriaLabel')}
           className="flex flex-wrap border-b border-border bg-card/60"
         >
           {navigation.map((item) => (
-            <a
-              key={item.href}
-              href={item.href}
-              className="border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:border-t-primary hover:bg-secondary hover:text-primary"
-            >
-              {item.label}
-            </a>
+            <span key={item.href} className="group relative">
+              <a
+                href={item.href}
+                {...linkTarget(item)}
+                className="block border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:border-t-primary hover:bg-secondary hover:text-primary"
+              >
+                {item.label}
+              </a>
+              <Submenu items={item.submenu} />
+            </span>
           ))}
         </nav>
       )}

package/src/slots/latest-posts.tsx

@@ -1,19 +1,25 @@
-import type { LatestPostsModel } from '@meith/theme-kit'
+import type { LatestPostsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, MICRO, PanelHead, Stamp, UserRef } from '../shared'
 
-export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+export function LatestPosts({ posts, capturedAt, copy }: LatestPostsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.latestPosts.${key}`)
+
   return (
     <Frame aria-labelledby="latest-posts-heading">
-      <PanelHead id="latest-posts-heading" title="Latest posts" />
+      <PanelHead id="latest-posts-heading" title={c('heading')} />
 
       {posts.length === 0 ? (
-        <p className={`${MICRO} px-3 py-2.5`}>nothing said yet</p>
+        <p className={`${MICRO} px-3 py-2.5`}>{c('empty')}</p>
       ) : (
         <ul className="divide-y divide-border">
           {posts.map((post) => (
             <li key={post.href} className="px-3 py-2 hover:bg-secondary/50">
-              <a href={post.href} className="block truncate text-xs text-foreground hover:text-primary">
+              <a
+                href={post.href}
+                className="block truncate text-xs text-foreground hover:text-primary"
+              >
                 {post.threadTitle}
               </a>
               <p className={`${MICRO} mt-0.5 truncate normal-case`}>
@@ -35,7 +41,7 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
       )}
 
       <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
-        <span className="uppercase">as of</span> <Stamp at={capturedAt} />
+        <span className="uppercase">{c('asOf')}</span> <Stamp at={capturedAt} />
       </p>
     </Frame>
   )

package/src/slots/latest-threads.tsx

@@ -1,19 +1,29 @@
-import type { LatestThreadsModel } from '@meith/theme-kit'
+import type { LatestThreadsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, MICRO, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
 
-export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+export function LatestThreads({
+  threads,
+  capturedAt,
+  copy,
+}: LatestThreadsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.latestThreads.${key}`)
+
   return (
     <Frame aria-labelledby="latest-threads-heading">
-      <PanelHead id="latest-threads-heading" title="Latest threads" />
+      <PanelHead id="latest-threads-heading" title={c('heading')} />
 
       {threads.length === 0 ? (
-        <p className={`${MICRO} px-3 py-2.5`}>nothing started yet</p>
+        <p className={`${MICRO} px-3 py-2.5`}>{c('empty')}</p>
       ) : (
         <ul className="divide-y divide-border">
           {threads.map((thread) => (
             <li key={thread.href} className="px-3 py-2 hover:bg-secondary/50">
-              <a href={thread.href} className="block truncate text-xs text-foreground hover:text-primary">
+              <a
+                href={thread.href}
+                className="block truncate text-xs text-foreground hover:text-primary"
+              >
                 {thread.title}
               </a>
               <p className={`${MICRO} mt-0.5 truncate normal-case`}>
@@ -26,8 +36,8 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
               <p className={`${MICRO} truncate normal-case`}>
                 <Stamp at={thread.startedAt} />
                 <span className="text-border">{' | '}</span>
-                <span className={NUMERIC}>{thread.replyCount}</span>
-                <span className="uppercase"> replies</span>
+                <span className={NUMERIC}>{thread.replyCount.label}</span>
+                <span className="uppercase">{c('replies')}</span>
               </p>
             </li>
           ))}
@@ -35,7 +45,7 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
       )}
 
       <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
-        <span className="uppercase">as of</span> <Stamp at={capturedAt} />
+        <span className="uppercase">{c('asOf')}</span> <Stamp at={capturedAt} />
       </p>
     </Frame>
   )

package/src/slots/member-profile.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
-import type { MemberProfileModel } from '@meith/theme-kit'
+import type { MemberProfileModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { BUTTON, Frame, HEADING, MICRO, NUMERIC, PanelHead, RULE, Stamp } from '../shared'
 
@@ -24,7 +25,10 @@ export function MemberProfile({
   fields,
   actions,
   regions,
-}: MemberProfileModel) {
+  copy,
+}: MemberProfileModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.memberProfile.${key}`)
+
   return (
     <article className="flex flex-col gap-4 p-4">
       <div className="border border-border bg-card shadow-elevation">
@@ -44,7 +48,7 @@ export function MemberProfile({
           )}
 
           <div className="min-w-0">
-            <p className={MICRO}>profile</p>
+            <p className={MICRO}>{c('kicker')}</p>
             <h1
               className={[`${HEADING} text-2xl text-foreground`, user.nameClass]
                 .filter(Boolean)
@@ -59,14 +63,14 @@ export function MemberProfile({
       </div>
 
       <Frame aria-labelledby="member-stats-heading">
-        <PanelHead id="member-stats-heading" title="Statistics" />
+        <PanelHead id="member-stats-heading" title={c('statsHeading')} />
         <dl className="grid grid-cols-2 gap-1.5 p-3 sm:grid-cols-3">
-          <Field label="posts">{postCount}</Field>
-          <Field label="joined">
+          <Field label={c('posts')}>{postCount.label}</Field>
+          <Field label={c('joined')}>
             <Stamp at={joinedAt} />
           </Field>
-          <Field label="last visit">
-            {lastVisitAt === null ? 'never' : <Stamp at={lastVisitAt} />}
+          <Field label={c('lastVisit')}>
+            {lastVisitAt === null ? c('never') : <Stamp at={lastVisitAt} />}
           </Field>
           {fields.map((field) => (
             <Field key={field.label} label={field.label}>
@@ -78,7 +82,7 @@ export function MemberProfile({
 
       {signatureHtml !== null && (
         <Frame aria-labelledby="member-signature-heading">
-          <PanelHead id="member-signature-heading" title="Signature" />
+          <PanelHead id="member-signature-heading" title={c('signatureHeading')} />
           <div
             className="prose-md p-3 text-sm"
             dangerouslySetInnerHTML={{ __html: signatureHtml }}
@@ -89,7 +93,7 @@ export function MemberProfile({
       {regions?.plugins}
 
       {actions.length > 0 && (
-        <nav aria-label="Member actions" className="flex flex-wrap gap-2">
+        <nav aria-label={c('actionsAriaLabel')} className="flex flex-wrap gap-2">
           {actions.map((action) => (
             <a key={action.href} href={action.href} className={BUTTON}>
               {action.label}

package/src/slots/navigation.tsx

@@ -1,8 +1,11 @@
-import type { NavigationModel } from '@meith/theme-kit'
+import type { NavigationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+
+export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.navigation.${key}`)
 
-export function Navigation({ items }: NavigationModel) {
   return (
-    <nav aria-label="Breadcrumb" className="border-b border-border bg-card/40 px-4 py-2">
+    <nav aria-label={c('ariaLabel')} className="border-b border-border bg-card/40 px-4 py-2">
       <ol className="flex flex-wrap items-center gap-1.5 font-mono text-[0.6875rem] tracking-[0.1em] text-muted-foreground uppercase">
         {items.map((item, index) => {
           const isLast = index === items.length - 1

package/src/slots/notice.tsx

@@ -1,4 +1,5 @@
-import type { NoticeModel } from '@meith/theme-kit'
+import type { NoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 const TONE: Record<NoticeModel['kind'], string> = {
   info: 'border-l-forum-unread text-forum-unread',
@@ -7,7 +8,9 @@ const TONE: Record<NoticeModel['kind'], string> = {
   error: 'border-l-destructive text-destructive',
 }
 
-export function Notice({ kind, message, dismissHref }: NoticeModel) {
+export function Notice({ kind, message, dismissHref, copy }: NoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.notice.${key}`)
+
   return (
     <div
       role={kind === 'error' ? 'alert' : undefined}
@@ -15,7 +18,7 @@ export function Notice({ kind, message, dismissHref }: NoticeModel) {
     >
       <p className="text-foreground">
         <span className="mr-2 font-mono text-[0.625rem] font-bold tracking-[0.18em] uppercase">
-          {kind}
+          {c(kind)}
         </span>
         {message}
       </p>
@@ -24,7 +27,7 @@ export function Notice({ kind, message, dismissHref }: NoticeModel) {
           href={dismissHref}
           className="font-mono text-[0.625rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:text-primary"
         >
-          dismiss
+          {c('dismiss')}
         </a>
       )}
     </div>