@meith/theme-default 0.6.0 → 0.8.0

package/src/slots/member-profile.tsx

@@ -1,5 +1,6 @@
-import { Avatar, Card, CardContent, CardHeader, CardTitle, buttonVariants, cn } from '@meith/ui'
-import type { MemberProfileModel } from '@meith/theme-kit'
+import type { MemberProfileModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { Avatar, buttonVariants, Card, CardContent, CardHeader, CardTitle, cn } from '@meith/ui'
 
 import { NUMERIC, PAGE_BODY, Stamp } from '../shared'
 
@@ -14,7 +15,10 @@ export function MemberProfile({
   fields,
   actions,
   regions,
-}: MemberProfileModel) {
+  copy,
+}: MemberProfileModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.memberProfile.${key}`)
+
   return (
     <div className={PAGE_BODY}>
       <Card>
@@ -24,10 +28,7 @@ export function MemberProfile({
 
             <div className="min-w-0">
               <h1
-                className={cn(
-                  'text-2xl font-semibold tracking-tight break-words',
-                  user.nameClass,
-                )}
+                className={cn('text-2xl font-semibold tracking-tight break-words', user.nameClass)}
               >
                 {user.username}
               </h1>
@@ -36,7 +37,10 @@ export function MemberProfile({
           </div>
 
           {actions.length > 0 && (
-            <nav aria-label="Member actions" className="flex shrink-0 flex-wrap items-center gap-2">
+            <nav
+              aria-label={c('memberActions')}
+              className="flex shrink-0 flex-wrap items-center gap-2"
+            >
               {actions.map((action, index) => (
                 <a
                   key={action.href}
@@ -56,21 +60,21 @@ export function MemberProfile({
         <dl className="grid grid-cols-3 gap-3 border-t border-border px-5 py-4">
           <div>
             <dd className={`text-lg font-semibold text-foreground ${NUMERIC}`}>
-              {postCount.toLocaleString('en')}
+              {postCount.label}
             </dd>
-            <dt className="text-xs text-muted-foreground">Posts</dt>
+            <dt className="text-xs text-muted-foreground">{c('postsLabel')}</dt>
           </div>
           <div>
             <dd className="text-sm font-medium text-foreground">
               <Stamp at={joinedAt} />
             </dd>
-            <dt className="text-xs text-muted-foreground">Joined</dt>
+            <dt className="text-xs text-muted-foreground">{c('joinedLabel')}</dt>
           </div>
           <div>
             <dd className="text-sm font-medium text-foreground">
-              {lastVisitAt === null ? 'Never' : <Stamp at={lastVisitAt} />}
+              {lastVisitAt === null ? c('never') : <Stamp at={lastVisitAt} />}
             </dd>
-            <dt className="text-xs text-muted-foreground">Last visit</dt>
+            <dt className="text-xs text-muted-foreground">{c('lastVisitLabel')}</dt>
           </div>
         </dl>
       </Card>
@@ -79,7 +83,7 @@ export function MemberProfile({
         <Card aria-labelledby="profile-fields-heading">
           <CardHeader>
             <CardTitle id="profile-fields-heading" className="text-sm">
-              About
+              {c('about')}
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -99,7 +103,7 @@ export function MemberProfile({
         <Card aria-labelledby="profile-signature-heading">
           <CardHeader>
             <CardTitle id="profile-signature-heading" className="text-sm">
-              Signature
+              {c('signature')}
             </CardTitle>
           </CardHeader>
           <CardContent>

package/src/slots/navigation.tsx

@@ -1,12 +1,15 @@
-import type { NavigationModel } from '@meith/theme-kit'
+import type { NavigationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { MUTED_LINK, PAGE } from '../shared'
 
-export function Navigation({ items }: NavigationModel) {
+export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }) {
   if (items.length === 0) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `default.navigation.${key}`)
+
   return (
-    <nav aria-label="Breadcrumb" className="border-b border-border bg-card/40">
+    <nav aria-label={c('breadcrumb')} className="border-b border-border bg-card/40">
       <ol
         className={`${PAGE} flex items-center gap-1.5 overflow-x-auto py-2 text-xs whitespace-nowrap text-muted-foreground`}
       >
@@ -16,7 +19,7 @@ export function Navigation({ items }: NavigationModel) {
             <li key={item.href} className="flex shrink-0 items-center gap-1.5">
               {index > 0 && (
                 <span aria-hidden="true" className="text-border select-none">
-                  /
+                  {c('separator')}
                 </span>
               )}
               {isLast ? (

package/src/slots/notice.tsx

@@ -1,25 +1,28 @@
+import type { NoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Alert, AlertDescription, AlertTitle } from '@meith/ui'
-import type { NoticeModel } from '@meith/theme-kit'
 
 import { MUTED_LINK } from '../shared'
 
-const KIND_LABELS: Record<NoticeModel['kind'], string> = {
-  info: 'Notice:',
-  success: 'Done:',
-  warning: 'Warning:',
-  error: 'Error:',
+const KIND_KEYS: Record<NoticeModel['kind'], string> = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
 }
 
-export function Notice({ kind, message, dismissHref }: NoticeModel) {
+export function Notice({ kind, message, dismissHref, copy }: NoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.notice.${key}`)
+
   return (
     <Alert tone={kind}>
       <AlertDescription>
-        <AlertTitle>{KIND_LABELS[kind]}</AlertTitle> {message}
+        <AlertTitle>{c(KIND_KEYS[kind])}</AlertTitle> {message}
       </AlertDescription>
 
       {dismissHref !== null && (
         <a href={dismissHref} className={`shrink-0 text-xs ${MUTED_LINK}`}>
-          Dismiss
+          {c('dismiss')}
         </a>
       )}
     </Alert>

package/src/slots/pagination.tsx

@@ -1,5 +1,6 @@
+import type { PaginationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { buttonVariants, cn } from '@meith/ui'
-import type { PaginationModel } from '@meith/theme-kit'
 
 import { NUMERIC } from '../shared'
 
@@ -10,21 +11,24 @@ export function Pagination({
   pages,
   previousHref,
   nextHref,
-}: PaginationModel) {
+  copy,
+}: PaginationModel & { copy: SlotCopy }) {
   if (pageCount <= 1 && previousHref === null && nextHref === null) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `default.pagination.${key}`)
+
   const step = cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'min-w-20')
   const stepDisabled = cn(step, 'pointer-events-none opacity-40')
 
   return (
-    <nav aria-label="Pagination" className="flex flex-wrap items-center justify-between gap-3">
+    <nav aria-label={c('nav')} className="flex flex-wrap items-center justify-between gap-3">
       {previousHref === null ? (
         <span className={stepDisabled} aria-hidden="true">
-          Previous
+          {c('previous')}
         </span>
       ) : (
         <a href={previousHref} rel="prev" className={step}>
-          Previous
+          {c('previous')}
         </a>
       )}
 
@@ -37,13 +41,13 @@ export function Pagination({
             <li key={entry.page} className="flex items-center gap-1">
               {gap && (
                 <span aria-hidden="true" className="px-1 text-sm text-muted-foreground">
-                  …
+                  {c('ellipsis')}
                 </span>
               )}
               <a
                 href={entry.href}
                 aria-current={entry.isCurrent ? 'page' : undefined}
-                aria-label={`Page ${entry.page}`}
+                aria-label={`${c('page')} ${entry.page}`}
                 className={cn(
                   buttonVariants({
                     variant: entry.isCurrent ? 'primary' : 'ghost',
@@ -62,18 +66,20 @@ export function Pagination({
 
         <li className="ml-1 text-xs whitespace-nowrap text-muted-foreground">
           <span className={NUMERIC}>
-            {pageCountIsExact ? `Page ${page} of ${pageCount}` : `Page ${page}`}
+            {pageCountIsExact
+              ? `${c('page')} ${page} ${c('of')} ${pageCount}`
+              : `${c('page')} ${page}`}
           </span>
         </li>
       </ol>
 
       {nextHref === null ? (
         <span className={stepDisabled} aria-hidden="true">
-          Next
+          {c('next')}
         </span>
       ) : (
         <a href={nextHref} rel="next" className={step}>
-          Next
+          {c('next')}
         </a>
       )}
     </nav>

package/src/slots/panel-nav.tsx

@@ -1,5 +1,6 @@
-import { Disclosure, cn } from '@meith/ui'
-import type { PanelNavItemModel, PanelNavModel } from '@meith/theme-kit'
+import type { PanelNavItemModel, PanelNavModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { cn, Disclosure } from '@meith/ui'
 
 import { PanelIcon } from '../panel-icons'
 
@@ -11,21 +12,33 @@ const HERE =
 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 }) {
+function Count({ count, copy }: { count: number; copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.panelNav.${key}`)
+
   return (
     <>
       <span
         aria-hidden="true"
         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}
+        {count > 99 ? c('countCap') : count}
+      </span>
+      <span className="sr-only">
+        ({count} {c('waiting')})
       </span>
-      <span className="sr-only">({count} waiting)</span>
     </>
   )
 }
 
-function Item({ item, className }: { item: PanelNavItemModel; className: string }) {
+function Item({
+  item,
+  className,
+  copy,
+}: {
+  item: PanelNavItemModel
+  className: string
+  copy: SlotCopy
+}) {
   const body = (
     <>
       {item.icon !== null && (
@@ -34,7 +47,7 @@ function Item({ item, className }: { item: PanelNavItemModel; className: string
         </span>
       )}
       <span className="min-w-0 flex-1 truncate">{item.title}</span>
-      {item.count !== null && <Count count={item.count} />}
+      {item.count !== null && <Count count={item.count} copy={copy} />}
     </>
   )
 
@@ -53,8 +66,7 @@ function Item({ item, className }: { item: PanelNavItemModel; className: string
       {...(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}
@@ -62,7 +74,11 @@ function Item({ item, className }: { item: PanelNavItemModel; className: string
   )
 }
 
-function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>) {
+function Sections({
+  label,
+  sections,
+  copy,
+}: Pick<PanelNavModel, 'label' | 'sections'> & { copy: SlotCopy }) {
   return (
     <nav aria-label={label} className="text-sm">
       <ul className="flex flex-col gap-0.5 pl-2.5">
@@ -73,9 +89,8 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
           >
             <Item
               item={section}
-              className={
-                section.current === 'here' ? HERE : section.isOpen ? OPEN : ELSEWHERE
-              }
+              className={section.current === 'here' ? HERE : section.isOpen ? OPEN : ELSEWHERE}
+              copy={copy}
             />
 
             {section.isOpen && section.children.length > 0 && (
@@ -85,6 +100,7 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
                     <Item
                       item={child}
                       className={child.current === 'here' ? HERE : ELSEWHERE}
+                      copy={copy}
                     />
                   </li>
                 ))}
@@ -97,7 +113,12 @@ function Sections({ label, sections }: Pick<PanelNavModel, 'label' | 'sections'>
   )
 }
 
-export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
+export function PanelNav({
+  label,
+  sections,
+  currentTitle,
+  copy,
+}: PanelNavModel & { copy: SlotCopy }) {
   return (
     <>
       <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">
@@ -106,12 +127,12 @@ export function PanelNav({ label, sections, currentTitle }: PanelNavModel) {
           contentClassName="p-2"
           {...(currentTitle === null ? {} : { aside: currentTitle })}
         >
-          <Sections label={label} sections={sections} />
+          <Sections label={label} sections={sections} copy={copy} />
         </Disclosure>
       </div>
 
       <div className="hidden rounded-xl border border-border bg-card p-2 shadow-elevation lg:block">
-        <Sections label={label} sections={sections} />
+        <Sections label={label} sections={sections} copy={copy} />
       </div>
     </>
   )

package/src/slots/panel-page.tsx

@@ -1,9 +1,21 @@
+import type { PanelPageModel, PanelSectionModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { cn } from '@meith/ui'
-import type { PanelPageModel, PanelSectionModel } from '@meith/theme-kit'
 
 import { MUTED_LINK, PAGE, pageAt } from '../shared'
 
-export function PanelPage({ title, back, frame, width, gap, regions, children }: PanelPageModel) {
+export function PanelPage({
+  title,
+  back,
+  frame,
+  width,
+  gap,
+  regions,
+  children,
+  copy,
+}: PanelPageModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.panelPage.${key}`)
+
   return (
     <main
       id="board-content"
@@ -20,7 +32,7 @@ export function PanelPage({ title, back, frame, width, gap, regions, children }:
         <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}
+              {c('back')} {back.label}
             </a>
           )}
 

package/src/slots/panel-shell.tsx

@@ -5,13 +5,7 @@ import { MUTED_LINK } from '../shared'
 const RAIL =
   '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'}`}>

package/src/slots/post-actions.tsx

@@ -1,29 +1,36 @@
-import { Separator, buttonVariants } from '@meith/ui'
-import type { PostActionsSlotModel } from '@meith/theme-kit'
+import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { buttonVariants, Separator } from '@meith/ui'
 
 interface Action {
   readonly href: string
   readonly label: string
 }
 
-export function PostActions({ actions, children }: PostActionsSlotModel) {
+export function PostActions({
+  actions,
+  children,
+  copy,
+}: PostActionsSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.postActions.${key}`)
+
   const reader: Action[] = [
-    actions.quoteHref === null ? null : { href: actions.quoteHref, label: 'Quote' },
-    actions.editHref === null ? null : { href: actions.editHref, label: 'Edit' },
-    actions.rateHref === null ? null : { href: actions.rateHref, label: 'Rate' },
-    actions.reportHref === null ? null : { href: actions.reportHref, label: 'Report' },
+    actions.quoteHref === null ? null : { href: actions.quoteHref, label: c('quote') },
+    actions.editHref === null ? null : { href: actions.editHref, label: c('edit') },
+    actions.rateHref === null ? null : { href: actions.rateHref, label: c('rate') },
+    actions.reportHref === null ? null : { href: actions.reportHref, label: c('report') },
   ].filter((action): action is Action => action !== null)
 
   const staff: Action[] = [
-    actions.restoreHref === null ? null : { href: actions.restoreHref, label: 'Restore' },
-    actions.warnHref === null ? null : { href: actions.warnHref, label: 'Warn' },
-    actions.moderateHref === null ? null : { href: actions.moderateHref, label: 'Moderate' },
+    actions.restoreHref === null ? null : { href: actions.restoreHref, label: c('restore') },
+    actions.warnHref === null ? null : { href: actions.warnHref, label: c('warn') },
+    actions.moderateHref === null ? null : { href: actions.moderateHref, label: c('moderate') },
   ].filter((action): action is Action => action !== null)
 
   if (reader.length === 0 && staff.length === 0 && children === undefined) return null
 
   return (
-    <nav aria-label="Post actions" className="flex flex-wrap items-center gap-x-1 gap-y-1">
+    <nav aria-label={c('nav')} className="flex flex-wrap items-center gap-x-1 gap-y-1">
       {reader.map((action) => (
         <a
           key={action.href}

package/src/slots/post-bit.tsx

@@ -1,5 +1,6 @@
+import type { PostBitSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Alert, AlertDescription, AlertTitle, Avatar, Card } from '@meith/ui'
-import type { PostBitSlotModel } from '@meith/theme-kit'
 
 import { LINK, MUTED_LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
@@ -9,9 +10,17 @@ const VISIBILITY_TINT = {
   deleted: 'border-thread-deleted/50 bg-destructive/5',
 } as const
 
-function StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['visibility'] }) {
+function StatusBanner({
+  visibility,
+  copy,
+}: {
+  visibility: PostBitSlotModel['post']['visibility']
+  copy: SlotCopy
+}) {
   if (visibility === 'visible') return null
 
+  const c = (key: string) => fromSlotCopy(copy, `default.postBit.${key}`)
+
   return (
     <Alert
       tone={visibility === 'deleted' ? 'error' : 'warning'}
@@ -19,15 +28,19 @@ function StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['vi
     >
       <AlertDescription>
         <AlertTitle>
-          {visibility === 'deleted' ? 'Deleted post.' : 'Waiting for approval.'}
+          {visibility === 'deleted' ? c('deletedPost') : c('waitingApproval')}
         </AlertTitle>{' '}
-        Only moderators can see this.
+        {c('staffOnly')}
       </AlertDescription>
     </Alert>
   )
 }
 
-function GroupBadge({ badge }: { badge: NonNullable<PostBitSlotModel['post']['author']['badge']> }) {
+function GroupBadge({
+  badge,
+}: {
+  badge: NonNullable<PostBitSlotModel['post']['author']['badge']>
+}) {
   const image = (
     <img
       src={badge.src}
@@ -52,10 +65,14 @@ function GroupBadge({ badge }: { badge: NonNullable<PostBitSlotModel['post']['au
 function AuthorBlock({
   author,
   badges,
+  copy,
 }: {
   author: PostBitSlotModel['post']['author']
   badges: React.ReactNode
+  copy: SlotCopy
 }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.postBit.${key}`)
+
   return (
     <div className="flex gap-3 sm:flex-col sm:gap-2 sm:text-center">
       <Avatar src={author.avatarUrl} name={author.username} size={48} className="sm:self-center" />
@@ -78,7 +95,7 @@ function AuthorBlock({
         {author.isOnline && (
           <p className="mt-1 flex items-center gap-1.5 text-xs text-moderation-approved sm:justify-center">
             <span aria-hidden="true" className="size-1.5 rounded-full bg-moderation-approved" />
-            Online
+            {c('online')}
           </p>
         )}
 
@@ -86,23 +103,26 @@ function AuthorBlock({
 
         <dl className={`mt-1.5 text-xs text-muted-foreground ${NUMERIC}`}>
           <div className="flex gap-1 sm:justify-center">
-            <dt className="sr-only">Posts</dt>
+            <dt className="sr-only">{c('postsLabel')}</dt>
             <dd>
-              {author.postCount.toLocaleString('en')} {author.postCount === 1 ? 'post' : 'posts'}
+              {author.postCount.label}{' '}
+              {author.postCount.value === 1 ? c('post.one') : c('post.other')}
             </dd>
           </div>
           {author.joinedAt !== null && (
             <div className="flex gap-1 sm:justify-center">
-              <dt className="sr-only">Joined</dt>
+              <dt className="sr-only">{c('joined')}</dt>
               <dd>
-                Joined <Stamp at={author.joinedAt} />
+                {c('joined')} <Stamp at={author.joinedAt} />
               </dd>
             </div>
           )}
           {author.reputation != null && (
             <div className="flex gap-1 sm:justify-center">
-              <dt className="sr-only">Reputation</dt>
-              <dd>{author.reputation.toLocaleString('en')} reputation</dd>
+              <dt className="sr-only">{c('reputationLabel')}</dt>
+              <dd>
+                {author.reputation.label} {c('reputation')}
+              </dd>
             </div>
           )}
         </dl>
@@ -122,7 +142,9 @@ function AuthorBlock({
   )
 }
 
-export function PostBit({ post, select, regions }: PostBitSlotModel) {
+export function PostBit({ post, select, regions, copy }: PostBitSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.postBit.${key}`)
+
   return (
     <Card
       as="article"
@@ -131,11 +153,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
       data-visibility={post.visibility}
       className={VISIBILITY_TINT[post.visibility]}
     >
-      <StatusBanner visibility={post.visibility} />
+      <StatusBanner visibility={post.visibility} copy={copy} />
 
       <div className="grid grid-cols-1 sm:grid-cols-[11rem_minmax(0,1fr)]">
         <div className="border-b border-border px-4 py-3 sm:border-r sm:border-b-0 sm:bg-muted/40">
-          <AuthorBlock author={post.author} badges={regions.pluginBadges} />
+          <AuthorBlock author={post.author} badges={regions.pluginBadges} copy={copy} />
         </div>
 
         <div className="min-w-0">
@@ -163,11 +185,11 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
 
           {post.ignored !== null ? (
             <div className="px-4 py-5 text-sm text-muted-foreground">
-              You are ignoring{' '}
-              <span className="font-medium text-foreground">{post.ignored.authorUsername}</span>.
-              This post is hidden.{' '}
+              {c('ignoringPrefix')}{' '}
+              <span className="font-medium text-foreground">{post.ignored.authorUsername}</span>.{' '}
+              {c('hiddenNotice')}{' '}
               <a href={post.ignored.revealHref} className={`font-medium text-foreground ${LINK}`}>
-                Show it anyway
+                {c('showAnyway')}
               </a>
             </div>
           ) : (
@@ -189,7 +211,7 @@ export function PostBit({ post, select, regions }: PostBitSlotModel) {
             <div className="border-t border-border px-4 py-3">
               <h4 className="mb-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                 {post.attachments.length}{' '}
-                {post.attachments.length === 1 ? 'attachment' : 'attachments'}
+                {post.attachments.length === 1 ? c('attachment.one') : c('attachment.other')}
               </h4>
               <ul className="flex flex-wrap gap-3">
                 {post.attachments.map((file) => (

package/src/slots/post-form.tsx

@@ -1,5 +1,6 @@
+import type { PostFormModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Alert, AlertDescription, AlertTitle, Card } from '@meith/ui'
-import type { PostFormModel } from '@meith/theme-kit'
 
 import { MUTED_LINK, pageAt } from '../shared'
 
@@ -9,7 +10,10 @@ export function PostForm({
   cancelLabel,
   errorMessage,
   regions,
-}: PostFormModel) {
+  copy,
+}: PostFormModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.postForm.${key}`)
+
   return (
     <div className={`${pageAt('max-w-3xl')} flex w-full flex-col gap-5 py-6 sm:py-8`}>
       <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2">
@@ -22,7 +26,7 @@ export function PostForm({
       {errorMessage !== null && (
         <Alert tone="error">
           <AlertDescription>
-            <AlertTitle>Cannot post.</AlertTitle> {errorMessage}
+            <AlertTitle>{c('cannotPost')}</AlertTitle> {errorMessage}
           </AlertDescription>
         </Alert>
       )}