@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/OfferButton.tsx

@@ -5,6 +5,7 @@ import { Loading } from "./Loading";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
+import { useForgeT } from "../../i18n";
 import { HoldNotice } from "./HoldNotice";
 
 export interface OfferButtonProps {
@@ -20,6 +21,7 @@ export interface OfferButtonProps {
 /** One-line themed product-purchase button + modal, built on the `<Offer>` compound. */
 export function OfferButton({ productId, text, finalisePath, onSuccess, renderPayment, formatAmount }: OfferButtonProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
   const renderPay =
@@ -40,7 +42,7 @@ export function OfferButton({ productId, text, finalisePath, onSuccess, renderPa
             fontFamily: theme.fontFamily,
           }}
         >
-          {text ?? "Buy now"}
+          {text ?? t("forge.offer_button.buy_now")}
         </button>
       </Offer.Trigger>
 
@@ -77,6 +79,7 @@ function OfferBody({
 }) {
   const c = useOfferContext();
   const theme = useForgeTheme();
+  const t = useForgeT();
   const inputStyle = {
     width: "100%",
     padding: 10,
@@ -87,7 +90,7 @@ function OfferBody({
   } as const;
 
   if (c.isLoading) return <Loading />;
-  if (!c.product) return <p style={{ marginTop: 8 }}>Product not found.</p>;
+  if (!c.product) return <p style={{ marginTop: 8 }}>{t("forge.offer_button.not_found")}</p>;
 
   // ── Payment (redirect) ──
   if (c.step === "payment") {
@@ -95,7 +98,7 @@ function OfferBody({
       <div>
         <Offer.Title className="">{c.product.title}</Offer.Title>
         <div style={{ display: "flex", justifyContent: "space-between", margin: "12px 0" }}>
-          <span>Total</span>
+          <span>{t("forge.offer_button.total")}</span>
           <strong style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</strong>
         </div>
         {/* The reservation, counted down while the buyer pays. Nothing is drawn
@@ -110,7 +113,7 @@ function OfferBody({
         {renderPayment ? (
           <Offer.PaymentStep>{(p) => renderPayment(p)}</Offer.PaymentStep>
         ) : (
-          <p style={{ opacity: 0.7 }}>Payment is not configured.</p>
+          <p style={{ opacity: 0.7 }}>{t("forge.offer_button.payment_unavailable")}</p>
         )}
       </div>
     );
@@ -123,7 +126,7 @@ function OfferBody({
       <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 12 }}>
         {c.variants.length > 1 && (
           <label>
-            Option
+            {t("forge.offer_button.option_label")}
             <select
               value={c.selectedVariant?.id ?? ""}
               onChange={(e) => c.setSelectedVariantId(e.target.value)}
@@ -131,7 +134,8 @@ function OfferBody({
             >
               {c.variants.map((v) => (
                 <option key={v.id} value={v.id}>
-                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || "Default"} · {fmt(v.price)}
+                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || t("forge.offer_button.variant_default")}{" "}
+                  · {fmt(v.price)}
                 </option>
               ))}
             </select>
@@ -139,7 +143,7 @@ function OfferBody({
         )}
 
         <label>
-          Quantity
+          {t("forge.offer_button.quantity_label")}
           <select value={c.quantity} onChange={(e) => c.setQuantity(Number(e.target.value))} style={inputStyle}>
             {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => (
               <option key={n} value={n}>
@@ -150,12 +154,28 @@ function OfferBody({
         </label>
 
         <div style={{ display: "flex", gap: 8 }}>
-          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle} />
-          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle} />
+          <input
+            placeholder={t("forge.offer_button.first_name")}
+            value={c.firstName}
+            onChange={(e) => c.setFirstName(e.target.value)}
+            style={inputStyle}
+          />
+          <input
+            placeholder={t("forge.offer_button.last_name")}
+            value={c.lastName}
+            onChange={(e) => c.setLastName(e.target.value)}
+            style={inputStyle}
+          />
         </div>
-        <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle} />
         <input
-          placeholder="Confirm email"
+          placeholder={t("forge.offer_button.email")}
+          type="email"
+          value={c.email}
+          onChange={(e) => c.setEmail(e.target.value)}
+          style={inputStyle}
+        />
+        <input
+          placeholder={t("forge.offer_button.confirm_email")}
           type="email"
           value={c.confirmEmail}
           onChange={(e) => c.setConfirmEmail(e.target.value)}
@@ -163,7 +183,7 @@ function OfferBody({
         />
 
         <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600 }}>
-          <span>Total</span>
+          <span>{t("forge.offer_button.total")}</span>
           <span style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</span>
         </div>
 
@@ -196,7 +216,7 @@ function OfferBody({
             opacity: c.isProcessing ? 0.6 : 1,
           }}
         >
-          {c.isProcessing ? "Processing…" : "Continue to payment"}
+          {c.isProcessing ? t("forge.offer_button.processing") : t("forge.offer_button.continue_to_payment")}
         </button>
       </div>
     </Offer.DetailsStep>

package/src/ui/styled/PaymentLinkConfirmation.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
@@ -20,30 +21,35 @@ export function PaymentLinkConfirmation({
   paymentPath = `/i/payment-link/${paymentLinkId}`,
 }: PaymentLinkConfirmationProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   const { data, isLoading, error } = usePaymentLinkFinalize(paymentLinkId);
 
   if (isLoading) return <Loading fullPage />;
-  if (error || !data) return <p style={{ color: theme.colors.text }}>We couldn’t load this payment.</p>;
+  if (error || !data)
+    return <p style={{ color: theme.colors.text }}>{t("forge.payment_link_confirmation.load_error")}</p>;
 
   const paid = data.status === "paid" || !!data.paidAt;
 
   return (
     <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center", color: theme.colors.text }}>
       <h1 style={{ fontSize: 28, fontWeight: 800, marginBottom: 8 }}>
-        {paid ? "Payment received" : "Payment not completed"}
+        {paid ? t("forge.payment_link_confirmation.paid_title") : t("forge.payment_link_confirmation.unpaid_title")}
       </h1>
       <p style={{ opacity: 0.75, marginBottom: 16 }}>
         {paid
-          ? `Thank you, ${data.recipientName}. Your payment to ${data.profileName} is complete.`
-          : `This payment is ${data.status}. If you were charged, please contact support.`}
+          ? t("forge.payment_link_confirmation.paid_body", {
+              recipient_name: data.recipientName,
+              profile_name: data.profileName,
+            })
+          : t("forge.payment_link_confirmation.unpaid_body", { status: data.status })}
       </p>
       <p style={{ fontWeight: 700, color: theme.colors.primary }}>{fmt(Number(data.amount), data.currency)}</p>
       <a
         href={paymentPath}
         style={{ display: "inline-block", marginTop: 24, color: theme.colors.primary, textDecoration: "underline" }}
       >
-        Back to payment
+        {t("forge.payment_link_confirmation.back_to_payment")}
       </a>
     </div>
   );

package/src/ui/styled/PaymentLinkPayment.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { usePaymentLinkPayment } from "../headless/paymentLink/usePaymentLinkPayment";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
@@ -20,6 +21,7 @@ export interface PaymentLinkPaymentProps {
  * (`usePaymentRenderer`).
  */
 export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }: PaymentLinkPaymentProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
   const renderPayment = usePaymentRenderer();
@@ -27,7 +29,8 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
     usePaymentLinkPayment(paymentLinkId, { returnPath });
 
   if (link.isLoading) return <Loading fullPage />;
-  if (link.error || !link.data) return <p style={{ color: theme.colors.text }}>Payment link not found.</p>;
+  if (link.error || !link.data)
+    return <p style={{ color: theme.colors.text }}>{t("forge.payment_link_payment.not_found")}</p>;
 
   const data = link.data;
   const isPaid = data.status === "paid" || !!data.paidAt;
@@ -35,8 +38,10 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
 
   return (
     <div style={{ maxWidth: 520, margin: "0 auto", color: theme.colors.text }}>
-      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 4 }}>Payment request</h1>
-      <p style={{ opacity: 0.7, fontSize: 14, marginBottom: 16 }}>from {data.profileName}</p>
+      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 4 }}>{t("forge.payment_link_payment.title")}</h1>
+      <p style={{ opacity: 0.7, fontSize: 14, marginBottom: 16 }}>
+        {t("forge.payment_link_payment.from_profile", { profile_name: data.profileName })}
+      </p>
 
       <div
         style={{
@@ -53,28 +58,37 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
             const taxSummary = summarizeTaxQuote(taxQuote, money);
             return taxSummary ? (
               <span style={{ display: "block", fontSize: 13, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
-                {taxSummary.mode === "inclusive" ? taxSummary.label : `+ ${taxSummary.formattedTax} tax`}
+                {taxSummary.mode === "inclusive"
+                  ? taxSummary.label
+                  : t("forge.payment_link_payment.tax_added", { tax_amount: taxSummary.formattedTax })}
               </span>
             ) : null;
           })()}
         </div>
-        <div style={{ fontSize: 14, opacity: 0.8, marginTop: 8 }}>Billed to {data.recipientName}</div>
+        <div style={{ fontSize: 14, opacity: 0.8, marginTop: 8 }}>
+          {t("forge.payment_link_payment.billed_to", { recipient_name: data.recipientName })}
+        </div>
         {data.message && <p style={{ marginTop: 12, lineHeight: 1.6, opacity: 0.9 }}>{data.message}</p>}
       </div>
 
       {isPaid ? (
-        <p style={{ fontWeight: 700, color: theme.colors.primary }}>This payment has been completed. Thank you!</p>
+        <p style={{ fontWeight: 700, color: theme.colors.primary }}>{t("forge.payment_link_payment.paid_notice")}</p>
       ) : (
         <div>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>
+            {t("forge.payment_link_payment.payment_heading")}
+          </h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
           {/* Paystack brings its own modal, so it is checked before the Stripe
               renderer and needs none of it. */}
           {isPaystack ? (
             canOpenPaystack ? (
-              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(data.amount))}`} />
+              <PaystackPayButton
+                onPay={openPaystackCheckout}
+                label={t("forge.payment_link_payment.pay_amount", { amount: money(Number(data.amount)) })}
+              />
             ) : (
-              <Loading label="Preparing payment…" size={22} />
+              <Loading label={t("forge.payment_link_payment.preparing_payment")} size={22} />
             )
           ) : clientSecret ? (
             renderPayment?.({
@@ -84,7 +98,13 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
               mode: "redirect",
             })
           ) : (
-            <>{isStarting ? <Loading label="Preparing payment…" size={22} /> : <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>}</>
+            <>
+              {isStarting ? (
+                <Loading label={t("forge.payment_link_payment.preparing_payment")} size={22} />
+              ) : (
+                <p style={{ opacity: 0.7 }}>{t("forge.payment_link_payment.payment_unavailable")}</p>
+              )}
+            </>
           )}
         </div>
       )}

package/src/ui/styled/PodcastEpisode.tsx

@@ -2,10 +2,11 @@ import { Play, Pause } from "lucide-react";
 import { usePodcast, findEpisode, episodeAudio } from "../../data/queries/usePodcast";
 import { usePodcastPlayer } from "../headless/podcast/usePodcastPlayer";
 import type { BlogPost, BlogCategory } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 // Baseline `.rich-text` content styles ship with Forge (WYSIWYG with the admin
-// editor) — no host-loaded stylesheet needed.
+// editor), so no host-loaded stylesheet is needed.
 import "./rich-text.css";
 
 export interface PodcastEpisodeProps {
@@ -28,7 +29,7 @@ function fmt(sec?: number | null) {
 }
 
 /**
- * Single-episode page — plays this episode and offers Previous / Next episode
+ * Single-episode page. Plays this episode and offers Previous / Next episode
  * buttons. Shares the queue + player with the show page (persistent playback).
  * Built on `usePodcast` + `usePodcastPlayer`.
  */
@@ -40,6 +41,7 @@ export function PodcastEpisode({
   initialShow,
   initialEpisodes,
 }: PodcastEpisodeProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { show, episodes, isLoading } = usePodcast(showSlug, {
     initialShow: initialShow ?? undefined,
@@ -49,7 +51,7 @@ export function PodcastEpisode({
   const { episode, previous, next } = findEpisode(episodes, episodeSlug);
 
   if (isLoading) return <Loading fullPage />;
-  if (!episode) return <p style={{ color: theme.colors.text }}>Episode not found.</p>;
+  if (!episode) return <p style={{ color: theme.colors.text }}>{t("forge.podcast_episode.not_found")}</p>;
 
   const border = `${theme.colors.text}1a`;
   const dur = episodeAudio(episode)?.durationSec;
@@ -58,7 +60,7 @@ export function PodcastEpisode({
   return (
     <article style={{ maxWidth: 720, margin: "0 auto", padding: "40px 20px", color: theme.colors.text }}>
       <a href={showHref(showSlug)} style={{ color: theme.colors.primary, textDecoration: "none", fontSize: 14 }}>
-        ← {show?.title ?? "Podcast"}
+        ← {show?.title ?? t("forge.podcast_episode.show_fallback")}
       </a>
 
       <h1 style={{ fontSize: 26, fontWeight: 800, marginTop: 12 }}>{episode.title}</h1>
@@ -85,7 +87,7 @@ export function PodcastEpisode({
           }}
         >
           {playing ? <Pause size={18} /> : <Play size={18} />}
-          {playing ? "Pause" : "Play episode"}
+          {playing ? t("forge.podcast_episode.pause") : t("forge.podcast_episode.play")}
         </button>
         {player.isCurrent(episode) && (
           <span style={{ fontSize: 13, opacity: 0.6 }}>
@@ -94,7 +96,7 @@ export function PodcastEpisode({
         )}
       </div>
 
-      {/* Show notes — `rich-text` = shared baseline content styles (WYSIWYG
+      {/* Show notes. `rich-text` = shared baseline content styles (WYSIWYG
           with the editor), bundled with Forge via the ./rich-text.css import. */}
       <div
         className="rich-text"
@@ -103,10 +105,19 @@ export function PodcastEpisode({
       />
 
       {/* Prev / Next episode navigation */}
-      <nav style={{ display: "flex", justifyContent: "space-between", gap: 12, marginTop: 32, borderTop: `1px solid ${border}`, paddingTop: 18 }}>
+      <nav
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          gap: 12,
+          marginTop: 32,
+          borderTop: `1px solid ${border}`,
+          paddingTop: 18,
+        }}
+      >
         {previous ? (
           <a href={episodeHref(previous.slug)} style={navLink(theme)}>
-            <span style={{ opacity: 0.55, fontSize: 12 }}>← Previous</span>
+            <span style={{ opacity: 0.55, fontSize: 12 }}>{t("forge.podcast_episode.previous")}</span>
             <span style={{ fontWeight: 600 }}>{previous.title}</span>
           </a>
         ) : (
@@ -114,7 +125,7 @@ export function PodcastEpisode({
         )}
         {next ? (
           <a href={episodeHref(next.slug)} style={{ ...navLink(theme), textAlign: "right", alignItems: "flex-end" }}>
-            <span style={{ opacity: 0.55, fontSize: 12 }}>Next →</span>
+            <span style={{ opacity: 0.55, fontSize: 12 }}>{t("forge.podcast_episode.next")}</span>
             <span style={{ fontWeight: 600 }}>{next.title}</span>
           </a>
         ) : (

package/src/ui/styled/PodcastList.tsx

@@ -1,5 +1,6 @@
 import { usePodcasts } from "../../data/queries/usePodcast";
 import type { PodcastShow } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -13,16 +14,19 @@ export interface PodcastListProps {
 /** Podcast index — grid of the creator's shows. Built on `usePodcasts`. */
 export function PodcastList({ showHref = (s) => `/i/podcasts/${s}`, initialShows }: PodcastListProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { data: shows, isLoading } = usePodcasts({ initialData: initialShows ?? undefined });
 
   if (isLoading) return <Loading fullPage />;
   const list = shows ?? [];
-  if (!list.length) return <p style={{ opacity: 0.7, color: theme.colors.text }}>No podcasts yet.</p>;
+  if (!list.length) {
+    return <p style={{ opacity: 0.7, color: theme.colors.text }}>{t("forge.podcast_list.empty_title")}</p>;
+  }
 
   return (
     <div style={{ maxWidth: 960, margin: "0 auto", padding: "40px 20px", color: theme.colors.text }}>
       <header style={{ marginBottom: 28 }}>
-        <h1 style={{ fontSize: 30, fontWeight: 800 }}>Podcasts</h1>
+        <h1 style={{ fontSize: 30, fontWeight: 800 }}>{t("forge.podcast_list.title")}</h1>
       </header>
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 24 }}>
         {list.map((show) => (
@@ -47,7 +51,9 @@ export function PodcastList({ showHref = (s) => `/i/podcasts/${s}`, initialShows
               <h3 style={{ fontWeight: 700 }}>{show.title}</h3>
               {show.author && <p style={{ fontSize: 13, opacity: 0.6, marginTop: 2 }}>{show.author}</p>}
               <p style={{ fontSize: 12, opacity: 0.5, marginTop: 6 }}>
-                {show.episodeCount} episode{show.episodeCount === 1 ? "" : "s"}
+                {show.episodeCount === 1
+                  ? t("forge.podcast_list.episode_count_one", { count: show.episodeCount })
+                  : t("forge.podcast_list.episode_count_other", { count: show.episodeCount })}
               </p>
             </div>
           </a>

package/src/ui/styled/PodcastShow.tsx

@@ -4,6 +4,7 @@ import { usePodcastPlayer } from "../headless/podcast/usePodcastPlayer";
 import type { BlogPost, BlogCategory } from "../../types/models";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
+import { useForgeT } from "../../i18n";
 
 export interface PodcastShowProps {
   /** Show (podcast category) slug. */
@@ -28,6 +29,7 @@ function fmt(sec?: number | null) {
  * Built on `usePodcast` + `usePodcastPlayer` (the shared AudioPlayer + queue).
  */
 export function PodcastShow({ slug, episodeHref = (s) => `/i/podcasts/${slug}/${s}`, initialShow, initialEpisodes }: PodcastShowProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { show, episodes, isLoading } = usePodcast(slug, {
     initialShow: initialShow ?? undefined,
@@ -36,7 +38,7 @@ export function PodcastShow({ slug, episodeHref = (s) => `/i/podcasts/${slug}/${
   const player = usePodcastPlayer({ episodes, show });
 
   if (isLoading) return <Loading fullPage />;
-  if (!show) return <p>Podcast not found.</p>;
+  if (!show) return <p>{t("forge.podcast_show.not_found")}</p>;
 
   const cover = show.coverImage?.url;
   const nowPlaying = player.currentEpisode ?? episodes[0] ?? null;
@@ -73,16 +75,30 @@ export function PodcastShow({ slug, episodeHref = (s) => `/i/podcasts/${slug}/${
             boxShadow: "0 4px 16px rgba(0,0,0,0.06)",
           }}
         >
-          <div style={{ fontSize: 13, opacity: 0.6 }}>Now playing</div>
+          <div style={{ fontSize: 13, opacity: 0.6 }}>{t("forge.podcast_show.now_playing")}</div>
           <div style={{ fontWeight: 600, margin: "2px 0 10px" }}>{nowPlaying.title}</div>
           <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-            <button onClick={player.playPrevious} disabled={!player.hasPrevious} aria-label="Previous episode" style={iconBtn(theme, !player.hasPrevious)}>
+            <button
+              onClick={player.playPrevious}
+              disabled={!player.hasPrevious}
+              aria-label={t("forge.podcast_show.aria_previous")}
+              style={iconBtn(theme, !player.hasPrevious)}
+            >
               <SkipBack size={18} />
             </button>
-            <button onClick={() => player.toggleEpisode(nowPlaying)} aria-label="Play/pause" style={{ ...iconBtn(theme, false), background: theme.colors.primary, color: theme.colors.background, width: 44, height: 44 }}>
+            <button
+              onClick={() => player.toggleEpisode(nowPlaying)}
+              aria-label={t("forge.podcast_show.aria_play_pause")}
+              style={{ ...iconBtn(theme, false), background: theme.colors.primary, color: theme.colors.background, width: 44, height: 44 }}
+            >
               {player.isEpisodePlaying(nowPlaying) ? <Pause size={20} /> : <Play size={20} />}
             </button>
-            <button onClick={player.playNext} disabled={!player.hasNext} aria-label="Next episode" style={iconBtn(theme, !player.hasNext)}>
+            <button
+              onClick={player.playNext}
+              disabled={!player.hasNext}
+              aria-label={t("forge.podcast_show.aria_next")}
+              style={iconBtn(theme, !player.hasNext)}
+            >
               <SkipForward size={18} />
             </button>
             <div style={{ flex: 1 }}>
@@ -125,7 +141,13 @@ export function PodcastShow({ slug, episodeHref = (s) => `/i/podcasts/${slug}/${
                 borderBottom: `1px solid ${border}`,
               }}
             >
-              <button onClick={() => player.toggleEpisode(ep)} aria-label={player.isEpisodePlaying(ep) ? "Pause episode" : "Play episode"} style={{ ...iconBtn(theme, false), flexShrink: 0 }}>
+              <button
+                onClick={() => player.toggleEpisode(ep)}
+                aria-label={
+                  player.isEpisodePlaying(ep) ? t("forge.podcast_show.aria_pause_episode") : t("forge.podcast_show.aria_play_episode")
+                }
+                style={{ ...iconBtn(theme, false), flexShrink: 0 }}
+              >
                 {player.isEpisodePlaying(ep) ? <Pause size={16} /> : <Play size={16} />}
               </button>
               <div style={{ flex: 1, minWidth: 0 }}>
@@ -140,7 +162,7 @@ export function PodcastShow({ slug, episodeHref = (s) => `/i/podcasts/${slug}/${
             </div>
           );
         })}
-        {!episodes.length && <p style={{ opacity: 0.7 }}>No episodes yet.</p>}
+        {!episodes.length && <p style={{ opacity: 0.7 }}>{t("forge.podcast_show.empty_title")}</p>}
       </div>
     </div>
   );

package/src/ui/styled/PostsFeed.tsx

@@ -1,5 +1,6 @@
 import { useGetPosts } from "../../data/queries/usePosts";
 import type { IPublicPost } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -13,12 +14,13 @@ export interface PostsFeedProps {
 
 /** Themed posts grid, built on `useGetPosts`. */
 export function PostsFeed({ columns = 3, limit, onSelect, className, style }: PostsFeedProps) {
-  const t = useThemeTokens();
+  const t = useForgeT();
+  const tokens = useThemeTokens();
   const { data, isLoading } = useGetPosts({ page: 1 });
   const posts = (data?.data ?? []).slice(0, limit ?? 100);
 
   if (isLoading) return <Loading />;
-  if (!posts.length) return <p style={{ color: t.text, opacity: 0.7 }}>No posts yet.</p>;
+  if (!posts.length) return <p style={{ color: tokens.text, opacity: 0.7 }}>{t("forge.posts_feed.empty_body")}</p>;
 
   const gap = 16;
   const track = `minmax(max(150px, calc((100% - ${(columns - 1) * gap}px) / ${columns})), 1fr)`;
@@ -30,7 +32,7 @@ export function PostsFeed({ columns = 3, limit, onSelect, className, style }: Po
         display: "grid",
         gridTemplateColumns: `repeat(auto-fill, ${track})`,
         gap,
-        fontFamily: t.fontFamily,
+        fontFamily: tokens.fontFamily,
         ...style,
       }}
     >
@@ -43,15 +45,15 @@ export function PostsFeed({ columns = 3, limit, onSelect, className, style }: Po
             style={{
               textAlign: "left",
               cursor: onSelect ? "pointer" : "default",
-              background: t.surface,
-              border: `1px solid ${t.primary}20`,
-              borderRadius: t.cornerRadius,
+              background: tokens.surface,
+              border: `1px solid ${tokens.primary}20`,
+              borderRadius: tokens.cornerRadius,
               overflow: "hidden",
               padding: 0,
-              color: t.text,
+              color: tokens.text,
             }}
           >
-            <div style={{ aspectRatio: "1 / 1", background: `${t.primary}10` }}>
+            <div style={{ aspectRatio: "1 / 1", background: `${tokens.primary}10` }}>
               {cover && <img src={cover} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
             </div>
             <div style={{ padding: 10, fontSize: 14 }}>{post.caption?.slice(0, 100)}</div>

package/src/ui/styled/PresaleCode.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties } from "react";
 import { KeyRound } from "lucide-react";
 import type { PresaleCodeField } from "../headless/event/usePresaleCode";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 import { buttonStyle } from "./Button";
 
 /** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
@@ -38,13 +39,9 @@ export interface PresaleCodeFieldProps {
  *   names no tier and confirms no partial guess; a box that said "that isn't
  *   the VIP code" would be a way to enumerate them.
  */
-export function PresaleCodeField({
-  presale,
-  promptText = "Have a presale code?",
-  className,
-  style,
-}: PresaleCodeFieldProps) {
+export function PresaleCodeField({ presale, promptText, className, style }: PresaleCodeFieldProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   if (!presale.visible) return null;
 
   const isChecking = presale.status === "checking";
@@ -78,7 +75,7 @@ export function PresaleCodeField({
           }}
         >
           <KeyRound size={14} />
-          Presale unlocked: {presale.code}
+          {t("forge.presale_code.unlocked", { code: presale.code ?? "" })}
         </span>
         <button
           type="button"
@@ -95,7 +92,7 @@ export function PresaleCodeField({
             fontFamily: theme.fontFamily,
           }}
         >
-          Remove
+          {t("forge.presale_code.remove")}
         </button>
       </div>
     );
@@ -112,13 +109,13 @@ export function PresaleCodeField({
         style={{ fontSize: 14, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6 }}
       >
         <KeyRound size={14} />
-        {promptText}
+        {promptText ?? t("forge.presale_code.prompt")}
       </label>
       <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
         <input
           id="presale-code-input"
           data-testid="presale-code-input"
-          placeholder="Enter code"
+          placeholder={t("forge.presale_code.input_placeholder")}
           value={presale.input}
           onChange={(e) => presale.setInput(e.target.value.toUpperCase())}
           // Enter is what a buyer does after typing a code into a one-field
@@ -143,7 +140,7 @@ export function PresaleCodeField({
             opacity: isChecking || !presale.input.trim() ? 0.6 : 1,
           }}
         >
-          {isChecking ? "Checking…" : "Unlock"}
+          {isChecking ? t("forge.presale_code.checking") : t("forge.presale_code.unlock")}
         </button>
       </div>
       {presale.message && (