@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/ProductBrowseNav.tsx

@@ -5,6 +5,7 @@ import {
   type IPublicProductCategory,
 } from "../../data/queries/useProducts";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 
 export interface ProductBrowseNavProps {
@@ -52,7 +53,8 @@ export function ProductBrowseNav({
   className,
   style,
 }: ProductBrowseNavProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const categoriesQuery = useProductCategories();
   const collectionsQuery = useProductCollections();
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
@@ -91,14 +93,14 @@ export function ProductBrowseNav({
     const label = (
       <>
         <span>{category.title}</span>
-        <span style={{ color: t.muted, fontSize: 12, marginLeft: 8 }}>{category.productCount}</span>
+        <span style={{ color: tokens.muted, fontSize: 12, marginLeft: 8 }}>{category.productCount}</span>
       </>
     );
 
     const linkStyle: React.CSSProperties = {
       display: "inline-flex",
       alignItems: "baseline",
-      color: isActive ? t.primary : t.text,
+      color: isActive ? tokens.primary : tokens.text,
       fontWeight: isActive ? 600 : 400,
       textDecoration: "none",
       background: "none",
@@ -119,12 +121,16 @@ export function ProductBrowseNav({
               type="button"
               onClick={() => toggle(category.id)}
               aria-expanded={isOpen}
-              aria-label={isOpen ? `Collapse ${category.title}` : `Expand ${category.title}`}
+              aria-label={
+                isOpen
+                  ? t("forge.product_browse_nav.aria_collapse", { category: category.title })
+                  : t("forge.product_browse_nav.aria_expand", { category: category.title })
+              }
               style={{
                 background: "none",
                 border: "none",
                 cursor: "pointer",
-                color: t.muted,
+                color: tokens.muted,
                 padding: 0,
                 lineHeight: 1,
                 width: 12,
@@ -156,7 +162,7 @@ export function ProductBrowseNav({
   };
 
   const headingStyle: React.CSSProperties = {
-    color: t.muted,
+    color: tokens.muted,
     fontSize: 12,
     letterSpacing: "0.08em",
     textTransform: "uppercase",
@@ -164,23 +170,27 @@ export function ProductBrowseNav({
   };
 
   return (
-    <nav className={className} style={{ display: "grid", gap: 24, ...style }} aria-label="Browse the store">
+    <nav
+      className={className}
+      style={{ display: "grid", gap: 24, ...style }}
+      aria-label={t("forge.product_browse_nav.aria_nav")}
+    >
       {showCategories && categories.length > 0 && (
         <div>
-          <h2 style={headingStyle}>Categories</h2>
+          <h2 style={headingStyle}>{t("forge.product_browse_nav.categories_title")}</h2>
           <ul style={{ margin: 0, padding: 0 }}>{categories.map((c) => renderCategory(c, 0))}</ul>
         </div>
       )}
 
       {showCollections && collections.length > 0 && (
         <div>
-          <h2 style={headingStyle}>Collections</h2>
+          <h2 style={headingStyle}>{t("forge.product_browse_nav.collections_title")}</h2>
           <ul style={{ margin: 0, padding: 0 }}>
             {collections.map((collection) => {
               const isActive = collection.id === activeCollectionId;
               const href = hrefForCollection?.(collection);
               const linkStyle: React.CSSProperties = {
-                color: isActive ? t.primary : t.text,
+                color: isActive ? tokens.primary : tokens.text,
                 fontWeight: isActive ? 600 : 400,
                 textDecoration: "none",
                 background: "none",
@@ -200,7 +210,7 @@ export function ProductBrowseNav({
                       {collection.title}
                     </button>
                   )}
-                  <span style={{ color: t.muted, fontSize: 12, marginLeft: 8 }}>{collection.productCount}</span>
+                  <span style={{ color: tokens.muted, fontSize: 12, marginLeft: 8 }}>{collection.productCount}</span>
                 </li>
               );
             })}

package/src/ui/styled/ProductDetail.tsx

@@ -7,6 +7,7 @@ import { useGetProduct } from "../../data/queries/useProducts";
 import { useCart } from "../../contexts/CartContext";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
 import { MembershipGateNotice } from "./MembershipGateNotice";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -64,11 +65,12 @@ export function ProductDetail({
   membershipPath,
 }: ProductDetailProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const { data: product, isLoading } = useGetProduct(slug, { initialData: initialProduct });
   const fmt = useAmountFormatter(formatAmount);
 
   if (isLoading) return <Loading fullPage />;
-  if (!product) return <p style={{ color: t.text }}>Product not found.</p>;
+  if (!product) return <p style={{ color: t.text }}>{tr("forge.product_detail.not_found")}</p>;
 
   // Classify on the product's TYPE, NOT "has tracks" — a Digital product
   // stores its download as a track too, so track-presence would misrender it as
@@ -172,6 +174,7 @@ function StandardDetail({
   membershipPath?: string;
 }) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   // Inclusive stores caption the price as tax-inclusive (display only).
   const pricesIncludeTax = usePricesIncludeTax();
   const cover = product.media?.find((m) => m.type === "image")?.url ?? product.media?.[0]?.url;
@@ -220,12 +223,12 @@ function StandardDetail({
   const isGated = !!product.membershipGate && !product.membershipGate.allowed;
   const canAdd = !!selectedVariant && !outOfStock && !isGated;
   const label = isGated
-    ? "Members only"
+    ? tr("forge.product_detail.members_only")
     : !selectedVariant
-      ? "Select options"
+      ? tr("forge.product_detail.select_options")
       : outOfStock
-        ? "Out of stock"
-        : "Add to cart";
+        ? tr("forge.product_detail.out_of_stock")
+        : tr("forge.product_detail.add_to_cart");
   const addToCart = () => {
     if (!canAdd || !selectedVariant) return;
     add(selectedVariant, { quantity, coverImage: images[imageIndex]?.url ?? images[0]?.url });
@@ -289,7 +292,9 @@ function StandardDetail({
           {product.artist && <p style={{ opacity: 0.7, marginTop: 4 }}>{product.artist}</p>}
           <p style={{ color: t.primary, fontWeight: 700, fontSize: 20, marginTop: 8 }}>
             <PriceDisplay amount={price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
-            {selectedVariant?.payWhatYouWant && <span style={{ fontSize: 13, opacity: 0.7 }}> (Pay what you want)</span>}
+            {selectedVariant?.payWhatYouWant && (
+              <span style={{ fontSize: 13, opacity: 0.7 }}>{" "}{tr("forge.product_detail.pay_what_you_want")}</span>
+            )}
           </p>
 
           {/* Options — one block per axis the product actually uses. */}
@@ -309,7 +314,7 @@ function StandardDetail({
                       key={v.optionValueId}
                       type="button"
                       title={v.value}
-                      aria-label={`${axis.axis}: ${v.value}`}
+                      aria-label={tr("forge.product_detail.option_aria", { axis: axis.axis, value: v.value })}
                       aria-pressed={on}
                       disabled={!v.isAvailable}
                       onClick={() => select(axis.optionTypeId, v.optionValueId)}
@@ -332,8 +337,8 @@ function StandardDetail({
                       type="button"
                       aria-pressed={on}
                       // Same accessible name as the swatch form, so one locator
-                      // — and one screen-reader announcement — covers both.
-                      aria-label={`${axis.axis}: ${v.value}`}
+                      // (and one screen-reader announcement) covers both.
+                      aria-label={tr("forge.product_detail.option_aria", { axis: axis.axis, value: v.value })}
                       disabled={!v.isAvailable}
                       onClick={() => select(axis.optionTypeId, v.optionValueId)}
                       style={{
@@ -357,7 +362,7 @@ function StandardDetail({
           {/* Quantity */}
           {selectedVariant && (
             <div style={{ marginTop: 18 }}>
-              <p style={{ fontSize: 15, marginBottom: 8 }}>Quantity</p>
+              <p style={{ fontSize: 15, marginBottom: 8 }}>{tr("forge.product_detail.quantity")}</p>
               <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                 <QtyButton onClick={() => setQuantity((q) => Math.max(1, q - 1))} border={a(t.text, 0.25)} color={t.text}>
                   −
@@ -380,7 +385,7 @@ function StandardDetail({
           <MembershipGateNotice
             gate={product.membershipGate}
             variant="card"
-            itemLabel="This product"
+            itemLabel={tr("forge.product_detail.gate_item_product")}
             loginPath={loginPath}
             membershipPath={membershipPath}
             style={{ marginTop: 12 }}
@@ -393,14 +398,25 @@ function StandardDetail({
           {/* Product details */}
           {selectedVariant && (
             <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${a(t.text, 0.15)}` }}>
-              <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7, marginBottom: 6 }}>Product details</p>
+              <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7, marginBottom: 6 }}>
+                {tr("forge.product_detail.details_title")}
+              </p>
               {/* "Type", not "Category" — the two were the same thing until the
                   taxonomy split, and the creator's real categories are below. */}
-              <p style={{ fontSize: 14, opacity: 0.75 }}>Type: {product.productType}</p>
-              <p style={{ fontSize: 14, opacity: 0.75 }}>SKU: {selectedVariant.upcCode || "N/A"}</p>
+              <p style={{ fontSize: 14, opacity: 0.75 }}>
+                {tr("forge.product_detail.type", { type: product.productType })}
+              </p>
+              <p style={{ fontSize: 14, opacity: 0.75 }}>
+                {tr("forge.product_detail.sku", {
+                  sku: selectedVariant.upcCode || tr("forge.product_detail.sku_none"),
+                })}
+              </p>
               {!!product.categories?.length && (
                 <p style={{ fontSize: 14, opacity: 0.75 }}>
-                  {product.categories.length === 1 ? "Category: " : "Categories: "}
+                  {product.categories.length === 1
+                    ? tr("forge.product_detail.category_label")
+                    : tr("forge.product_detail.categories_label")}
+                  {" "}
                   {product.categories.map((c, i) => (
                     <span key={c.id}>
                       {i > 0 && ", "}
@@ -417,7 +433,10 @@ function StandardDetail({
               )}
               {!!product.collections?.length && (
                 <p style={{ fontSize: 14, opacity: 0.75 }}>
-                  {product.collections.length === 1 ? "Collection: " : "Collections: "}
+                  {product.collections.length === 1
+                    ? tr("forge.product_detail.collection_label")
+                    : tr("forge.product_detail.collections_label")}
+                  {" "}
                   {product.collections.map((c, i) => (
                     <span key={c.id}>
                       {i > 0 && ", "}
@@ -437,7 +456,7 @@ function StandardDetail({
 
           {product.credits && (
             <div style={{ marginTop: 20 }}>
-              <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7 }}>Credits</p>
+              <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7 }}>{tr("forge.product_detail.credits_title")}</p>
               <p style={{ whiteSpace: "pre-line", fontSize: 14, opacity: 0.7 }}>{product.credits}</p>
             </div>
           )}
@@ -513,6 +532,7 @@ function MusicDetail({
   membershipPath?: string;
 }) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   // Inclusive stores caption the price as tax-inclusive (display only).
   const pricesIncludeTax = usePricesIncludeTax();
   const { pause, loadAndPlay, currentTrack, play, isPlaying } = useAudioPlayer();
@@ -544,13 +564,13 @@ function MusicDetail({
       title: t.title,
       url: t.media.find((m) => m.type === "audio")?.url ?? t.media[0]?.url ?? "",
       coverImage: cover,
-      artist: t.artist || product.artist || "Unknown Artist",
+      artist: t.artist || product.artist || tr("forge.product_detail.unknown_artist"),
       productId: product.id,
     });
     loadAndPlay(toTrack(track), isSingle ? [] : tracks.map(toTrack));
   };
 
-  if (!defaultVariant || !firstTrack) return <p style={{ color: t.text }}>No preview available.</p>;
+  if (!defaultVariant || !firstTrack) return <p style={{ color: t.text }}>{tr("forge.product_detail.no_preview")}</p>;
 
   const border = `1px solid ${a(t.primary, 0.2)}`;
   const onPrimary = readableTextOn(t.primary);
@@ -576,7 +596,11 @@ function MusicDetail({
                 )}
               </div>
               <button
-                aria-label={isPlaying && belongsToProduct ? "Pause" : "Play"}
+                aria-label={
+                  isPlaying && belongsToProduct
+                    ? tr("forge.product_detail.aria_pause")
+                    : tr("forge.product_detail.aria_play")
+                }
                 onClick={() => {
                   if (!currentTrack || !belongsToProduct || currentTrack.id === firstTrack.id) return handlePlayPause(firstTrack);
                   return isPlaying ? pause() : play();
@@ -619,7 +643,9 @@ function MusicDetail({
                   background: a(t.text, 0.08),
                 }}
               >
-                {isSingle ? "Single" : `Album · ${tracks.length} tracks`}
+                {isSingle
+                  ? tr("forge.product_detail.badge_single")
+                  : tr("forge.product_detail.badge_album", { count: tracks.length })}
               </span>
               <div style={{ fontSize: 20, fontWeight: 700, color: t.primary }}>
                 <PriceDisplay amount={defaultVariant.price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
@@ -636,7 +662,7 @@ function MusicDetail({
                         key={v.optionValueId}
                         type="button"
                         aria-pressed={on}
-                        aria-label={`${axis.axis}: ${v.value}`}
+                        aria-label={tr("forge.product_detail.option_aria", { axis: axis.axis, value: v.value })}
                         disabled={!v.isAvailable}
                         onClick={() => select(axis.optionTypeId, v.optionValueId)}
                         style={{
@@ -659,14 +685,14 @@ function MusicDetail({
 
               <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 4 }}>
                 <Button disabled={isGated} onClick={() => buyNow(defaultVariant, { canIncreaseQuantity: false })}>
-                  Buy now
+                  {tr("forge.product_detail.buy_now")}
                 </Button>
                 <Button
                   variant="outline"
                   disabled={isGated}
                   onClick={() => add(defaultVariant, { canIncreaseQuantity: false })}
                 >
-                  Add to cart
+                  {tr("forge.product_detail.add_to_cart")}
                 </Button>
               </div>
               {/* A gated release is still listed and still PLAYABLE — the
@@ -675,7 +701,7 @@ function MusicDetail({
               <MembershipGateNotice
                 gate={product.membershipGate}
                 variant="badge"
-                itemLabel="This release"
+                itemLabel={tr("forge.product_detail.gate_item_release")}
                 loginPath={loginPath}
                 membershipPath={membershipPath}
               />
@@ -701,7 +727,11 @@ function MusicDetail({
                   <button
                     onClick={() => handlePlayPause(track)}
                     disabled={!audioUrl}
-                    aria-label={active && isPlaying ? "Pause" : "Play"}
+                    aria-label={
+                      active && isPlaying
+                        ? tr("forge.product_detail.aria_pause")
+                        : tr("forge.product_detail.aria_play")
+                    }
                     style={{
                       width: 44,
                       height: 44,
@@ -724,7 +754,7 @@ function MusicDetail({
                       </span>
                       {track.hasExplicitContent && (
                         <span style={{ fontSize: 10, padding: "0 4px", borderRadius: 3, border: `1px solid ${a(t.primary, 0.3)}`, background: a(t.primary, 0.1) }}>
-                          E
+                          {tr("forge.product_detail.explicit_badge")}
                         </span>
                       )}
                       {track.isFeatured && <Star size={14} color={t.primary} />}
@@ -740,7 +770,7 @@ function MusicDetail({
         {/* Credits */}
         {product.credits && (
           <div style={{ padding: 24, borderTop: border }}>
-            <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7 }}>Credits</p>
+            <p style={{ fontWeight: 700, fontSize: 13, opacity: 0.7 }}>{tr("forge.product_detail.credits_title")}</p>
             <p style={{ whiteSpace: "pre-line", fontSize: 14, opacity: 0.7 }}>{product.credits}</p>
           </div>
         )}

package/src/ui/styled/ReactionBar.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useForgeT } from "../../i18n";
 import { usePostEngagement, type UsePostEngagementOptions } from "../headless/engagement/usePostEngagement";
 import type { EngagementEntityType } from "../../types/models";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
@@ -12,6 +13,7 @@ export interface ReactionBarProps extends UsePostEngagementOptions {
 
 /** Themed like / save / comment bar built on `usePostEngagement`. */
 export function ReactionBar({ entityId, entityType = "post", showComments = true, ...opts }: ReactionBarProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const e = usePostEngagement(entityId, entityType, opts);
   const [draft, setDraft] = useState("");
@@ -57,7 +59,7 @@ export function ReactionBar({ entityId, entityType = "post", showComments = true
             <input
               value={draft}
               onChange={(ev) => setDraft(ev.target.value)}
-              placeholder="Add a comment…"
+              placeholder={t("forge.reaction_bar.comment_placeholder")}
               style={{
                 flex: 1,
                 padding: 8,
@@ -83,7 +85,7 @@ export function ReactionBar({ entityId, entityType = "post", showComments = true
                 opacity: e.isAddingComment || !draft.trim() ? 0.6 : 1,
               }}
             >
-              Post
+              {t("forge.reaction_bar.submit")}
             </button>
           </div>
         </div>

package/src/ui/styled/ReplayList.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useReplayBroadcasts } from "../../data/queries/useReplay";
 import type { ReplayBroadcast } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -26,6 +27,7 @@ function formatDateTime(value: string | number | Date, timezone?: string): strin
 
 /** Replay broadcasts gallery, gated by ticket id. Built on `useReplayBroadcasts`. */
 export function ReplayList({ ticketId }: ReplayListProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const [selected, setSelected] = useState<ReplayBroadcast | null>(null);
 
@@ -34,7 +36,7 @@ export function ReplayList({ ticketId }: ReplayListProps) {
   if (!ticketId) {
     return (
       <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center", color: theme.colors.text }}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Enter Your Ticket ID</h1>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>{t("forge.replay_list.no_ticket_title")}</h1>
         <p style={{ opacity: 0.7 }}>
           Add your ticket id to the URL, e.g. <code>/i/replay?ticketId=&lt;ticketId&gt;</code>.
         </p>
@@ -45,11 +47,7 @@ export function ReplayList({ ticketId }: ReplayListProps) {
   if (isLoading) return <Loading fullPage />;
 
   if (error || !data) {
-    return (
-      <p style={{ color: theme.colors.text }}>
-        Invalid ticket id or no broadcasts found. Please check your ticket id and try again.
-      </p>
-    );
+    return <p style={{ color: theme.colors.text }}>{t("forge.replay_list.error")}</p>;
   }
 
   if (selected) {
@@ -66,20 +64,33 @@ export function ReplayList({ ticketId }: ReplayListProps) {
             fontSize: 14,
           }}
         >
-          ← Back to broadcasts
+          {t("forge.replay_list.back")}
         </button>
-        <div style={{ borderRadius: theme.cornerRadius, overflow: "hidden", border: `1px solid ${theme.colors.text}1a` }}>
+        <div
+          style={{ borderRadius: theme.cornerRadius, overflow: "hidden", border: `1px solid ${theme.colors.text}1a` }}
+        >
           {selected.vodUrl ? (
             <video src={selected.vodUrl} controls playsInline style={{ width: "100%", background: "#000" }} />
           ) : (
-            <div style={{ aspectRatio: "16/9", display: "flex", alignItems: "center", justifyContent: "center", background: "#000", color: "#fff" }}>
-              Video not available
+            <div
+              style={{
+                aspectRatio: "16/9",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "#000",
+                color: "#fff",
+              }}
+            >
+              {t("forge.replay_list.video_unavailable")}
             </div>
           )}
           <div style={{ padding: 24 }}>
             <h1 style={{ fontSize: 22, fontWeight: 700 }}>{selected.title}</h1>
             {selected.endedAt && (
-              <p style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>Ended {formatDateTime(selected.endedAt)}</p>
+              <p style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
+                {t("forge.replay_list.ended", { date: formatDateTime(selected.endedAt) })}
+              </p>
             )}
           </div>
         </div>
@@ -88,12 +99,12 @@ export function ReplayList({ ticketId }: ReplayListProps) {
   }
 
   if (data.broadcasts.length === 0) {
-    return <p style={{ color: theme.colors.text }}>No replay broadcasts available for this ticket.</p>;
+    return <p style={{ color: theme.colors.text }}>{t("forge.replay_list.empty_title")}</p>;
   }
 
   return (
     <div style={{ maxWidth: 960, margin: "0 auto", color: theme.colors.text }}>
-      <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 24 }}>Replay Broadcasts</h1>
+      <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 24 }}>{t("forge.replay_list.title")}</h1>
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 16 }}>
         {data.broadcasts.map((broadcast) => {
           const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;

package/src/ui/styled/ResetPasswordForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useResetPassword } from "../../data/queries/useAuthActions";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 export interface ResetPasswordFormProps {
@@ -16,6 +17,7 @@ const msg = (e: unknown) => (e as { response?: { data?: { message?: string } } }
 /** Themed reset-password form, built on `useResetPassword`. */
 export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswordFormProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const resetPassword = useResetPassword();
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -24,6 +26,11 @@ export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswor
   const [isSuccess, setIsSuccess] = useState(false);
 
   const card: React.CSSProperties = {
+    // See `LoginForm`. The host layout is a COLUMN flex container, and an auto
+    // cross-axis margin disables `align-items: stretch`, so `maxWidth` alone
+    // leaves the card shrink-to-fit. The cap is unchanged: this fills the
+    // container UP TO 420 and no further.
+    width: "100%",
     maxWidth: 420,
     margin: "40px auto 0",
     padding: 24,
@@ -56,10 +63,12 @@ export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswor
   if (!token) {
     return (
       <div style={card}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Invalid link</h1>
-        <p style={{ fontSize: 14, marginBottom: 24 }}>This password reset link is invalid or has expired.</p>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
+          {t("forge.reset_password_form.invalid_title")}
+        </h1>
+        <p style={{ fontSize: 14, marginBottom: 24 }}>{t("forge.reset_password_form.invalid_body")}</p>
         <a href={forgotHref} style={link}>
-          Request a new reset link
+          {t("forge.reset_password_form.request_new_link")}
         </a>
       </div>
     );
@@ -68,10 +77,12 @@ export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswor
   if (isSuccess) {
     return (
       <div style={card}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Password reset</h1>
-        <p style={{ fontSize: 14, marginBottom: 24 }}>Your password has been reset successfully.</p>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
+          {t("forge.reset_password_form.success_title")}
+        </h1>
+        <p style={{ fontSize: 14, marginBottom: 24 }}>{t("forge.reset_password_form.success_body")}</p>
         <a href={loginHref} style={link}>
-          Back to login
+          {t("forge.reset_password_form.back_to_login")}
         </a>
       </div>
     );
@@ -81,11 +92,11 @@ export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswor
     e.preventDefault();
     setError("");
     if (password.length < 8) {
-      setError("Password must be at least 8 characters.");
+      setError(t("forge.reset_password_form.password_too_short"));
       return;
     }
     if (password !== confirmPassword) {
-      setError("Passwords don't match.");
+      setError(t("forge.reset_password_form.passwords_mismatch"));
       return;
     }
     setIsSubmitting(true);
@@ -93,7 +104,7 @@ export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswor
       await resetPassword.mutateAsync({ token, password });
       setIsSuccess(true);
     } catch (err) {
-      setError(msg(err) || "Something went wrong. Please try again.");
+      setError(msg(err) || t("forge.reset_password_form.error"));
     } finally {
       setIsSubmitting(false);
     }
@@ -101,25 +112,31 @@ export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswor
 
   return (
     <div style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Reset password</h1>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>{t("forge.reset_password_form.title")}</h1>
       {error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{error}</p>}
       <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Password</label>
-          <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} style={input} />
+          <label style={{ fontSize: 14 }}>{t("forge.reset_password_form.password_label")}</label>
+          <input
+            type="password"
+            placeholder={t("forge.reset_password_form.password_placeholder")}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={input}
+          />
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Confirm password</label>
+          <label style={{ fontSize: 14 }}>{t("forge.reset_password_form.confirm_password_label")}</label>
           <input
             type="password"
-            placeholder="Confirm password"
+            placeholder={t("forge.reset_password_form.confirm_password_placeholder")}
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             style={input}
           />
         </div>
         <button type="submit" disabled={isSubmitting} style={button}>
-          {isSubmitting ? "Resetting…" : "Reset password"}
+          {isSubmitting ? t("forge.reset_password_form.submitting") : t("forge.reset_password_form.submit")}
         </button>
       </form>
     </div>