@jant/core 0.3.40 → 0.3.43

package/src/ui/pages/ThemeSamplePage.tsx

@@ -1,4 +1,6 @@
-import { useLingui } from "@lingui/react/macro";
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "../../i18n/context.js";
+import { getCollectionPagePath } from "../../lib/collection-paths.js";
 import { escapeHtml } from "../../lib/html.js";
 import { toPublicPath } from "../../lib/url.js";
 import type { PostView } from "../../types.js";
@@ -140,7 +142,7 @@ export function ThemeSamplePage({
   currentMode: ThemeMode;
   sitePathPrefix?: string;
 }) {
-  const { t } = useLingui();
+  const { i18n } = useLingui();
   const sampleBaseHref = buildSampleHref(
     selectedTheme.id,
     currentMode,
@@ -156,75 +158,98 @@ export function ThemeSamplePage({
       id: "018e2b6f-3a10-7000-8000-000000000001",
       permalink: notePermalink,
       slug: "sample-note",
-      title: t({
-        message: "Why the default accent should feel written, not branded",
-        comment: "@context: Sample note post title on the theme sample page",
-      }),
+      title: i18n._(
+        msg({
+          message: "Why the default accent should feel written, not branded",
+          comment: "@context: Sample note post title on the theme sample page",
+        }),
+      ),
       bodyHtml: [
         renderParagraphWithLink(
-          t({
-            message:
-              "The default accent works best when it reads like a fountain-pen underline. Compare it against the",
-            comment:
-              "@context: Sample note post body prefix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message:
+                "The default accent works best when it reads like a fountain-pen underline. Compare it against the",
+              comment:
+                "@context: Sample note post body prefix on the theme sample page",
+            }),
+          ),
           sampleBaseHref,
-          t({
-            message: "live theme controls",
-            comment: "@context: Inline link label in the sample note post body",
-          }),
-          t({
-            message:
-              "before deciding whether the accent is carrying too much product energy.",
-            comment:
-              "@context: Sample note post body suffix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message: "live theme controls",
+              comment:
+                "@context: Inline link label in the sample note post body",
+            }),
+          ),
+          i18n._(
+            msg({
+              message:
+                "before deciding whether the accent is carrying too much product energy.",
+              comment:
+                "@context: Sample note post body suffix on the theme sample page",
+            }),
+          ),
         ),
         renderParagraph(
-          t({
-            message:
-              "Buttons can stay steady, but links, thread markers, and subtle emphasis should feel closer to ink on paper than dashboard chrome.",
-            comment:
-              "@context: Sample note post second paragraph on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message:
+                "Buttons can stay steady, but links, thread markers, and subtle emphasis should feel closer to ink on paper than dashboard chrome.",
+              comment:
+                "@context: Sample note post second paragraph on the theme sample page",
+            }),
+          ),
         ),
       ].join(""),
-      summary: t({
-        message:
-          "A calmer, warmer accent makes the default theme feel quieter and more intentional.",
-        comment: "@context: Plain-text summary for the sample note post",
-      }),
-      excerpt: t({
-        message:
-          "A calmer, warmer accent makes the default theme feel quieter and more intentional.",
-        comment: "@context: Excerpt for the sample note post",
-      }),
+      summary: i18n._(
+        msg({
+          message:
+            "A calmer, warmer accent makes the default theme feel quieter and more intentional.",
+          comment: "@context: Plain-text summary for the sample note post",
+        }),
+      ),
+      excerpt: i18n._(
+        msg({
+          message:
+            "A calmer, warmer accent makes the default theme feel quieter and more intentional.",
+          comment: "@context: Excerpt for the sample note post",
+        }),
+      ),
       summaryHtml: [
         renderParagraphWithLink(
-          t({
-            message:
-              "The default accent should support reading first. Start by comparing it against the",
-            comment:
-              "@context: Sample note summary prefix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message:
+                "The default accent should support reading first. Start by comparing it against the",
+              comment:
+                "@context: Sample note summary prefix on the theme sample page",
+            }),
+          ),
           sampleBaseHref,
-          t({
-            message: "live theme controls",
-            comment: "@context: Inline link label in the sample note summary",
-          }),
-          t({
-            message: "instead of judging it as an isolated swatch.",
-            comment:
-              "@context: Sample note summary suffix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message: "live theme controls",
+              comment: "@context: Inline link label in the sample note summary",
+            }),
+          ),
+          i18n._(
+            msg({
+              message: "instead of judging it as an isolated swatch.",
+              comment:
+                "@context: Sample note summary suffix on the theme sample page",
+            }),
+          ),
         ),
         renderParagraph(
-          t({
-            message:
-              "When the accent is slightly warmer and less literal, the whole page feels more like a writing space and less like product UI.",
-            comment:
-              "@context: Sample note summary second paragraph on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message:
+                "When the accent is slightly warmer and less literal, the whole page feels more like a writing space and less like product UI.",
+              comment:
+                "@context: Sample note summary second paragraph on the theme sample page",
+            }),
+          ),
         ),
       ].join(""),
       summaryHasMore: true,
@@ -243,58 +268,76 @@ export function ThemeSamplePage({
       collections: [
         {
           slug: "design",
-          url: toPublicPath("/c/design", sitePathPrefix),
-          title: t({
-            message: "Design",
-            comment: "@context: Collection tag on sample note post",
-          }),
+          url: toPublicPath(getCollectionPagePath("design"), sitePathPrefix),
+          title: i18n._(
+            msg({
+              message: "Design",
+              comment: "@context: Collection tag on sample note post",
+            }),
+          ),
         },
       ],
       isLastInThread: true,
-      body: t({
-        message: "The default accent should feel written, not branded.",
-        comment: "@context: Plain-text body fallback for the sample note post",
-      }),
+      body: i18n._(
+        msg({
+          message: "The default accent should feel written, not branded.",
+          comment:
+            "@context: Plain-text body fallback for the sample note post",
+        }),
+      ),
     },
     {
       id: "018e2b6f-3a10-7000-8000-000000000002",
       permalink: linkPermalink,
       slug: "sample-link",
-      title: t({
-        message: "Editorial interfaces worth borrowing from",
-        comment: "@context: Sample link post title on the theme sample page",
-      }),
+      title: i18n._(
+        msg({
+          message: "Editorial interfaces worth borrowing from",
+          comment: "@context: Sample link post title on the theme sample page",
+        }),
+      ),
       bodyHtml: [
         renderParagraphWithLink(
-          t({
-            message:
-              "This reference is useful because it treats links and citations as part of the reading rhythm. Keep that in mind while tuning the",
-            comment:
-              "@context: Sample link post body prefix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message:
+                "This reference is useful because it treats links and citations as part of the reading rhythm. Keep that in mind while tuning the",
+              comment:
+                "@context: Sample link post body prefix on the theme sample page",
+            }),
+          ),
           notePermalink,
-          t({
-            message: "default note sample",
-            comment: "@context: Inline link label in the sample link post body",
-          }),
-          t({
-            message:
-              "and checking whether the accent is guiding attention or pulling too hard.",
-            comment:
-              "@context: Sample link post body suffix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message: "default note sample",
+              comment:
+                "@context: Inline link label in the sample link post body",
+            }),
+          ),
+          i18n._(
+            msg({
+              message:
+                "and checking whether the accent is guiding attention or pulling too hard.",
+              comment:
+                "@context: Sample link post body suffix on the theme sample page",
+            }),
+          ),
         ),
       ].join(""),
-      summary: t({
-        message:
-          "A reference link for checking whether the accent feels editorial instead of promotional.",
-        comment: "@context: Plain-text summary for the sample link post",
-      }),
-      excerpt: t({
-        message:
-          "A reference link for checking whether the accent feels editorial instead of promotional.",
-        comment: "@context: Excerpt for the sample link post",
-      }),
+      summary: i18n._(
+        msg({
+          message:
+            "A reference link for checking whether the accent feels editorial instead of promotional.",
+          comment: "@context: Plain-text summary for the sample link post",
+        }),
+      ),
+      excerpt: i18n._(
+        msg({
+          message:
+            "A reference link for checking whether the accent feels editorial instead of promotional.",
+          comment: "@context: Excerpt for the sample link post",
+        }),
+      ),
       url: "https://example.com/editorial-interface-notes",
       format: "link",
       status: "published",
@@ -310,64 +353,82 @@ export function ThemeSamplePage({
       collections: [
         {
           slug: "references",
-          url: toPublicPath("/c/references", sitePathPrefix),
-          title: t({
-            message: "References",
-            comment: "@context: Collection tag on sample link post",
-          }),
+          url: toPublicPath(
+            getCollectionPagePath("references"),
+            sitePathPrefix,
+          ),
+          title: i18n._(
+            msg({
+              message: "References",
+              comment: "@context: Collection tag on sample link post",
+            }),
+          ),
         },
       ],
       threadRootId: "018e2b6f-3a10-7000-8000-000000000010",
-      threadRootPermalink: notePermalink,
       isLastInThread: false,
     },
     {
       id: "018e2b6f-3a10-7000-8000-000000000003",
       permalink: quotePermalink,
       slug: "sample-quote",
-      title: t({
-        message: "Field Notes on Interface Tone",
-        comment:
-          "@context: Sample quote attribution title on the theme sample page",
-      }),
+      title: i18n._(
+        msg({
+          message: "Field Notes on Interface Tone",
+          comment:
+            "@context: Sample quote attribution title on the theme sample page",
+        }),
+      ),
       bodyHtml: [
         renderParagraphWithLink(
-          t({
-            message:
-              "This is useful as a color check because it puts the accent next to quotation styling, metadata, and a quieter explanatory paragraph. Compare it back to the",
-            comment:
-              "@context: Sample quote commentary prefix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message:
+                "This is useful as a color check because it puts the accent next to quotation styling, metadata, and a quieter explanatory paragraph. Compare it back to the",
+              comment:
+                "@context: Sample quote commentary prefix on the theme sample page",
+            }),
+          ),
           notePermalink,
-          t({
-            message: "note treatment",
-            comment:
-              "@context: Inline link label in the sample quote commentary",
-          }),
-          t({
-            message:
-              "to make sure both still feel like they belong to the same product.",
-            comment:
-              "@context: Sample quote commentary suffix on the theme sample page",
-          }),
+          i18n._(
+            msg({
+              message: "note treatment",
+              comment:
+                "@context: Inline link label in the sample quote commentary",
+            }),
+          ),
+          i18n._(
+            msg({
+              message:
+                "to make sure both still feel like they belong to the same product.",
+              comment:
+                "@context: Sample quote commentary suffix on the theme sample page",
+            }),
+          ),
         ),
       ].join(""),
-      summary: t({
-        message:
-          "A quote card for judging accent color against softer, citation-heavy content.",
-        comment: "@context: Plain-text summary for the sample quote post",
-      }),
-      excerpt: t({
-        message:
-          "A quote card for judging accent color against softer, citation-heavy content.",
-        comment: "@context: Excerpt for the sample quote post",
-      }),
+      summary: i18n._(
+        msg({
+          message:
+            "A quote card for judging accent color against softer, citation-heavy content.",
+          comment: "@context: Plain-text summary for the sample quote post",
+        }),
+      ),
+      excerpt: i18n._(
+        msg({
+          message:
+            "A quote card for judging accent color against softer, citation-heavy content.",
+          comment: "@context: Excerpt for the sample quote post",
+        }),
+      ),
       url: "https://example.com/field-notes-interface-tone",
-      quoteText: t({
-        message:
-          "Interfaces for reading should guide the eye, not keep asking for attention.",
-        comment: "@context: Sample quote text on the theme sample page",
-      }),
+      quoteText: i18n._(
+        msg({
+          message:
+            "Interfaces for reading should guide the eye, not keep asking for attention.",
+          comment: "@context: Sample quote text on the theme sample page",
+        }),
+      ),
       format: "quote",
       status: "published",
       visibility: "public",
@@ -383,11 +444,13 @@ export function ThemeSamplePage({
       collections: [
         {
           slug: "reading",
-          url: toPublicPath("/c/reading", sitePathPrefix),
-          title: t({
-            message: "Reading",
-            comment: "@context: Collection tag on sample quote post",
-          }),
+          url: toPublicPath(getCollectionPagePath("reading"), sitePathPrefix),
+          title: i18n._(
+            msg({
+              message: "Reading",
+              comment: "@context: Collection tag on sample quote post",
+            }),
+          ),
         },
       ],
       isLastInThread: true,
@@ -397,173 +460,227 @@ export function ThemeSamplePage({
     id: "018e2b6f-3a10-7000-8000-000000000004",
     permalink: articlePermalink,
     slug: "sample-article-detail",
-    title: t({
-      message: "Designing a calmer default accent for Jant",
-      comment:
-        "@context: Title for the sample detail article on the theme sample page",
-    }),
+    title: i18n._(
+      msg({
+        message: "Designing a calmer default accent for Jant",
+        comment:
+          "@context: Title for the sample detail article on the theme sample page",
+      }),
+    ),
     bodyHtml: [
       `<p>${escapeHtml(
-        t({
-          message:
-            "This article is here to answer a specific question: does the default accent still feel calm once it has to carry a full reading experience?",
-          comment: "@context: Opening paragraph on the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "This article is here to answer a specific question: does the default accent still feel calm once it has to carry a full reading experience?",
+            comment: "@context: Opening paragraph on the sample detail article",
+          }),
+        ),
       )}</p>`,
       `<p>${escapeHtml(
-        t({
-          message:
-            "A good default accent in Jant should feel like editorial structure, not product branding. That means links, emphasis, and thread cues can be visible without turning the page into UI chrome.",
-          comment: "@context: Second paragraph on the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "A good default accent in Jant should feel like editorial structure, not product branding. That means links, emphasis, and thread cues can be visible without turning the page into UI chrome.",
+            comment: "@context: Second paragraph on the sample detail article",
+          }),
+        ),
       )} <a href="${escapeHtml(sampleBaseHref)}">${escapeHtml(
-        t({
-          message: "Compare it against the theme controls",
-          comment: "@context: Inline link label in the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message: "Compare it against the theme controls",
+            comment: "@context: Inline link label in the sample detail article",
+          }),
+        ),
       )}</a>.</p>`,
       renderFigure(
         SAMPLE_ARTICLE_IMAGE,
-        t({
-          message: "An abstract editorial layout in warm paper colors",
-          comment: "@context: Alt text for the sample detail article image",
-        }),
-        t({
-          message:
-            "The image should sit quietly inside the article instead of feeling like a card preview.",
-          comment: "@context: Caption for the sample detail article image",
-        }),
+        i18n._(
+          msg({
+            message: "An abstract editorial layout in warm paper colors",
+            comment: "@context: Alt text for the sample detail article image",
+          }),
+        ),
+        i18n._(
+          msg({
+            message:
+              "The image should sit quietly inside the article instead of feeling like a card preview.",
+            comment: "@context: Caption for the sample detail article image",
+          }),
+        ),
       ),
       renderHeading(
         2,
-        t({
-          message: "What to look for while tuning it",
-          comment: "@context: Section heading in the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message: "What to look for while tuning it",
+            comment: "@context: Section heading in the sample detail article",
+          }),
+        ),
       ),
       renderList("ul", [
-        t({
-          message:
-            "Links should read clearly without glowing against the page.",
-          comment: "@context: Bullet item in the sample detail article",
-        }),
-        t({
-          message:
-            "Headings should keep their hierarchy even when the accent gets softer.",
-          comment: "@context: Bullet item in the sample detail article",
-        }),
-        t({
-          message:
-            "Quoted or highlighted passages should feel like annotations, not warnings.",
-          comment: "@context: Bullet item in the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "Links should read clearly without glowing against the page.",
+            comment: "@context: Bullet item in the sample detail article",
+          }),
+        ),
+        i18n._(
+          msg({
+            message:
+              "Headings should keep their hierarchy even when the accent gets softer.",
+            comment: "@context: Bullet item in the sample detail article",
+          }),
+        ),
+        i18n._(
+          msg({
+            message:
+              "Quoted or highlighted passages should feel like annotations, not warnings.",
+            comment: "@context: Bullet item in the sample detail article",
+          }),
+        ),
       ]),
       renderBlockquote(
-        t({
-          message:
-            "The best default color is the one you notice only after reading for a while.",
-          comment: "@context: Blockquote in the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "The best default color is the one you notice only after reading for a while.",
+            comment: "@context: Blockquote in the sample detail article",
+          }),
+        ),
       ),
       renderHeading(
         3,
-        t({
-          message: "A practical checklist",
-          comment: "@context: Subheading in the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message: "A practical checklist",
+            comment: "@context: Subheading in the sample detail article",
+          }),
+        ),
       ),
       renderList("ol", [
-        t({
-          message:
-            "Read the page from top to bottom without looking at the swatches.",
-          comment: "@context: Ordered list item in the sample detail article",
-        }),
-        t({
-          message:
-            "Open a few links and check whether they still feel native to the page.",
-          comment: "@context: Ordered list item in the sample detail article",
-        }),
-        t({
-          message:
-            "Look at the footer metadata last, to make sure the accent is not fighting the typography.",
-          comment: "@context: Ordered list item in the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "Read the page from top to bottom without looking at the swatches.",
+            comment: "@context: Ordered list item in the sample detail article",
+          }),
+        ),
+        i18n._(
+          msg({
+            message:
+              "Open a few links and check whether they still feel native to the page.",
+            comment: "@context: Ordered list item in the sample detail article",
+          }),
+        ),
+        i18n._(
+          msg({
+            message:
+              "Look at the footer metadata last, to make sure the accent is not fighting the typography.",
+            comment: "@context: Ordered list item in the sample detail article",
+          }),
+        ),
       ]),
       "<hr />",
       renderTable(
         [
-          t({
-            message: "Surface",
-            comment: "@context: Table header in the sample detail article",
-          }),
-          t({
-            message: "What the accent should do",
-            comment: "@context: Table header in the sample detail article",
-          }),
+          i18n._(
+            msg({
+              message: "Surface",
+              comment: "@context: Table header in the sample detail article",
+            }),
+          ),
+          i18n._(
+            msg({
+              message: "What the accent should do",
+              comment: "@context: Table header in the sample detail article",
+            }),
+          ),
         ],
         [
           [
-            t({
-              message: "Primary button",
-              comment: "@context: Table cell in the sample detail article",
-            }),
-            t({
-              message: "Stay sturdy and readable.",
-              comment: "@context: Table cell in the sample detail article",
-            }),
+            i18n._(
+              msg({
+                message: "Primary button",
+                comment: "@context: Table cell in the sample detail article",
+              }),
+            ),
+            i18n._(
+              msg({
+                message: "Stay sturdy and readable.",
+                comment: "@context: Table cell in the sample detail article",
+              }),
+            ),
           ],
           [
-            t({
-              message: "Inline link",
-              comment: "@context: Table cell in the sample detail article",
-            }),
-            t({
-              message: "Feel editorial and slightly quieter.",
-              comment: "@context: Table cell in the sample detail article",
-            }),
+            i18n._(
+              msg({
+                message: "Inline link",
+                comment: "@context: Table cell in the sample detail article",
+              }),
+            ),
+            i18n._(
+              msg({
+                message: "Feel editorial and slightly quieter.",
+                comment: "@context: Table cell in the sample detail article",
+              }),
+            ),
           ],
           [
-            t({
-              message: "Thread accent",
-              comment: "@context: Table cell in the sample detail article",
-            }),
-            t({
-              message: "Guide the eye without taking over the layout.",
-              comment: "@context: Table cell in the sample detail article",
-            }),
+            i18n._(
+              msg({
+                message: "Thread accent",
+                comment: "@context: Table cell in the sample detail article",
+              }),
+            ),
+            i18n._(
+              msg({
+                message: "Guide the eye without taking over the layout.",
+                comment: "@context: Table cell in the sample detail article",
+              }),
+            ),
           ],
         ],
       ),
       renderParagraph(
-        t({
-          message:
-            "For the same reason, inline code should stay neutral. Something like theme.siteAccent = soften(green, 12%) should not suddenly become the loudest thing on the page.",
-          comment:
-            "@context: Paragraph mentioning code on the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "For the same reason, inline code should stay neutral. Something like theme.siteAccent = soften(green, 12%) should not suddenly become the loudest thing on the page.",
+            comment:
+              "@context: Paragraph mentioning code on the sample detail article",
+          }),
+        ),
       ),
       renderCodeBlock(`const linenAccent = {
   primary: "oklch(0.47 0.045 140)",
   siteAccent: "oklch(0.54 0.038 138)",
 };`),
       renderParagraph(
-        t({
-          message:
-            "If this article still feels like a page you want to keep reading, the palette is probably close.",
-          comment: "@context: Closing paragraph on the sample detail article",
-        }),
+        i18n._(
+          msg({
+            message:
+              "If this article still feels like a page you want to keep reading, the palette is probably close.",
+            comment: "@context: Closing paragraph on the sample detail article",
+          }),
+        ),
       ),
     ].join(""),
-    summary: t({
-      message:
-        "A long-form article sample for checking the default palette in a true reading context.",
-      comment: "@context: Plain-text summary for the sample detail article",
-    }),
-    excerpt: t({
-      message:
-        "A long-form article sample for checking the default palette in a true reading context.",
-      comment: "@context: Excerpt for the sample detail article",
-    }),
+    summary: i18n._(
+      msg({
+        message:
+          "A long-form article sample for checking the default palette in a true reading context.",
+        comment: "@context: Plain-text summary for the sample detail article",
+      }),
+    ),
+    excerpt: i18n._(
+      msg({
+        message:
+          "A long-form article sample for checking the default palette in a true reading context.",
+        comment: "@context: Excerpt for the sample detail article",
+      }),
+    ),
     format: "note",
     status: "published",
     visibility: "public",
@@ -579,20 +696,24 @@ export function ThemeSamplePage({
     collections: [
       {
         slug: "design",
-        url: toPublicPath("/c/design", sitePathPrefix),
-        title: t({
-          message: "Design",
-          comment: "@context: Collection tag on the sample detail article",
-        }),
+        url: toPublicPath(getCollectionPagePath("design"), sitePathPrefix),
+        title: i18n._(
+          msg({
+            message: "Design",
+            comment: "@context: Collection tag on the sample detail article",
+          }),
+        ),
       },
     ],
     isLastInThread: true,
-    body: t({
-      message:
-        "A long-form article sample for checking the default palette in a true reading context.",
-      comment:
-        "@context: Plain-text body fallback for the sample detail article",
-    }),
+    body: i18n._(
+      msg({
+        message:
+          "A long-form article sample for checking the default palette in a true reading context.",
+        comment:
+          "@context: Plain-text body fallback for the sample detail article",
+      }),
+    ),
   };
 
   return (
@@ -600,42 +721,52 @@ export function ThemeSamplePage({
       <header class="theme-sample-header mb-8 flex flex-col gap-4">
         <div class="flex flex-col gap-2">
           <p class="text-sm uppercase tracking-[0.18em] text-muted-foreground">
-            {t({
-              message: "Theme sample",
-              comment: "@context: Eyebrow on the public theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message: "Theme sample",
+                comment: "@context: Eyebrow on the public theme sample page",
+              }),
+            )}
           </p>
           <h1 class="text-3xl font-semibold tracking-tight">
-            {t({
-              message: "Tune color in a real reading context",
-              comment: "@context: Title on the public theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message: "Tune color in a real reading context",
+                comment: "@context: Title on the public theme sample page",
+              }),
+            )}
           </h1>
           <p class="max-w-2xl text-sm text-muted-foreground">
-            {t({
-              message:
-                "Use this page to judge buttons, links, cards, forms, thread accents, and quiet surfaces before changing a theme globally.",
-              comment:
-                "@context: Introductory description on the public theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message:
+                  "Use this page to judge buttons, links, cards, forms, thread accents, and quiet surfaces before changing a theme globally.",
+                comment:
+                  "@context: Introductory description on the public theme sample page",
+              }),
+            )}
           </p>
         </div>
 
         <section class="theme-sample-toolbar card p-6 md:p-7">
           <div class="mb-4 flex flex-col gap-1">
             <h2 class="text-base font-semibold">
-              {t({
-                message: "Theme",
-                comment: "@context: Section heading for theme picker pills",
-              })}
+              {i18n._(
+                msg({
+                  message: "Theme",
+                  comment: "@context: Section heading for theme picker pills",
+                }),
+              )}
             </h2>
             <p class="text-sm text-muted-foreground">
-              {t({
-                message:
-                  "Switch the palette and mode without opening settings or changing the active site theme.",
-                comment:
-                  "@context: Helper text for theme picker pills on the sample page",
-              })}
+              {i18n._(
+                msg({
+                  message:
+                    "Switch the palette and mode without opening settings or changing the active site theme.",
+                  comment:
+                    "@context: Helper text for theme picker pills on the sample page",
+                }),
+              )}
             </p>
           </div>
 
@@ -659,19 +790,25 @@ export function ThemeSamplePage({
                 class={isActivePill(currentMode, mode)}
               >
                 {mode === "auto"
-                  ? t({
-                      message: "Auto",
-                      comment: "@context: Theme mode option on sample page",
-                    })
-                  : mode === "light"
-                    ? t({
-                        message: "Light",
-                        comment: "@context: Theme mode option on sample page",
-                      })
-                    : t({
-                        message: "Dark",
+                  ? i18n._(
+                      msg({
+                        message: "Auto",
                         comment: "@context: Theme mode option on sample page",
-                      })}
+                      }),
+                    )
+                  : mode === "light"
+                    ? i18n._(
+                        msg({
+                          message: "Light",
+                          comment: "@context: Theme mode option on sample page",
+                        }),
+                      )
+                    : i18n._(
+                        msg({
+                          message: "Dark",
+                          comment: "@context: Theme mode option on sample page",
+                        }),
+                      )}
               </a>
             ))}
           </div>
@@ -687,51 +824,64 @@ export function ThemeSamplePage({
         <article class="card p-6 md:p-8">
           <div class="mb-4 flex items-center gap-2 text-xs text-muted-foreground">
             <span>
-              {t({
-                message: "March 15",
-                comment: "@context: Date label on theme sample content card",
-              })}
+              {i18n._(
+                msg({
+                  message: "March 15",
+                  comment: "@context: Date label on theme sample content card",
+                }),
+              )}
             </span>
             <span aria-hidden="true">&middot;</span>
             <span>
-              {t({
-                message: "Design",
-                comment:
-                  "@context: Collection label on theme sample content card",
-              })}
+              {i18n._(
+                msg({
+                  message: "Design",
+                  comment:
+                    "@context: Collection label on theme sample content card",
+                }),
+              )}
             </span>
             <span aria-hidden="true">&middot;</span>
             <span>
-              {t({
-                message: "Note",
-                comment:
-                  "@context: Post format label on theme sample content card",
-              })}
+              {i18n._(
+                msg({
+                  message: "Note",
+                  comment:
+                    "@context: Post format label on theme sample content card",
+                }),
+              )}
             </span>
           </div>
 
           <h2 class="mb-3 text-2xl font-semibold tracking-tight">
-            {t({
-              message: "A softer blue feels more like ink than product chrome.",
-              comment: "@context: Main sample article title",
-            })}
+            {i18n._(
+              msg({
+                message:
+                  "A softer blue feels more like ink than product chrome.",
+                comment: "@context: Main sample article title",
+              }),
+            )}
           </h2>
 
           <div class="theme-sample-reading space-y-4 text-sm leading-7 text-foreground">
             <p>
-              {t({
-                message:
-                  "Jant looks best when the accent feels editorial. Buttons can stay sturdy, but inline emphasis should feel like a pen mark, not a dashboard highlight.",
-                comment: "@context: Body paragraph on the theme sample page",
-              })}{" "}
+              {i18n._(
+                msg({
+                  message:
+                    "Jant looks best when the accent feels editorial. Buttons can stay sturdy, but inline emphasis should feel like a pen mark, not a dashboard highlight.",
+                  comment: "@context: Body paragraph on the theme sample page",
+                }),
+              )}{" "}
               <a
                 href={buildSampleHref(selectedTheme.id, currentMode)}
                 class="content-link"
               >
-                {t({
-                  message: "Read the palette as content first",
-                  comment: "@context: Inline link label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Read the palette as content first",
+                    comment: "@context: Inline link label on sample page",
+                  }),
+                )}
               </a>
               .
             </p>
@@ -741,60 +891,74 @@ export function ThemeSamplePage({
               style="border-color:var(--site-accent);background:color-mix(in srgb, var(--site-accent) 8%, var(--card))"
             >
               <p class="font-serif text-lg leading-7">
-                {t({
-                  message:
-                    "The right accent should disappear into the writing until you need it.",
-                  comment: "@context: Blockquote on the theme sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message:
+                      "The right accent should disappear into the writing until you need it.",
+                    comment: "@context: Blockquote on the theme sample page",
+                  }),
+                )}
               </p>
             </blockquote>
 
             <div class="grid gap-4 md:grid-cols-3">
               <div class="rounded-xl border p-3">
                 <div class="text-xs uppercase tracking-[0.16em] text-muted-foreground">
-                  {t({
-                    message: "Primary",
-                    comment: "@context: Token label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Primary",
+                      comment: "@context: Token label on sample page",
+                    }),
+                  )}
                 </div>
                 <div class="mt-2 rounded-lg p-3 text-sm font-medium text-center bg-primary text-primary-foreground">
-                  {t({
-                    message: "Save theme",
-                    comment: "@context: Filled primary button label",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Save theme",
+                      comment: "@context: Filled primary button label",
+                    }),
+                  )}
                 </div>
               </div>
 
               <div class="rounded-xl border p-3">
                 <div class="text-xs uppercase tracking-[0.16em] text-muted-foreground">
-                  {t({
-                    message: "Site accent",
-                    comment: "@context: Token label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Site accent",
+                      comment: "@context: Token label on sample page",
+                    }),
+                  )}
                 </div>
                 <div
                   class="mt-2 rounded-lg border px-3 py-3 text-sm font-medium text-center"
                   style="border-color:color-mix(in srgb, var(--site-accent) 36%, var(--border));color:var(--site-accent);background:color-mix(in srgb, var(--site-accent) 8%, var(--card))"
                 >
-                  {t({
-                    message: "Inline emphasis",
-                    comment: "@context: Site accent sample badge",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Inline emphasis",
+                      comment: "@context: Site accent sample badge",
+                    }),
+                  )}
                 </div>
               </div>
 
               <div class="rounded-xl border p-3">
                 <div class="text-xs uppercase tracking-[0.16em] text-muted-foreground">
-                  {t({
-                    message: "Muted",
-                    comment: "@context: Token label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Muted",
+                      comment: "@context: Token label on sample page",
+                    }),
+                  )}
                 </div>
                 <div class="mt-2 rounded-lg bg-muted px-3 py-3 text-sm text-muted-foreground text-center">
-                  {t({
-                    message: "Quiet metadata",
-                    comment: "@context: Muted sample label",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Quiet metadata",
+                      comment: "@context: Muted sample label",
+                    }),
+                  )}
                 </div>
               </div>
             </div>
@@ -804,91 +968,115 @@ export function ThemeSamplePage({
         <aside class="space-y-6">
           <section class="card p-6 md:p-7">
             <h2 class="mb-3 text-base font-semibold">
-              {t({
-                message: "Controls",
-                comment: "@context: Controls section heading on sample page",
-              })}
+              {i18n._(
+                msg({
+                  message: "Controls",
+                  comment: "@context: Controls section heading on sample page",
+                }),
+              )}
             </h2>
 
             <div class="mb-4 flex flex-wrap gap-2">
               <button class="btn-primary" type="button">
-                {t({
-                  message: "Publish",
-                  comment: "@context: Primary button label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Publish",
+                    comment: "@context: Primary button label on sample page",
+                  }),
+                )}
               </button>
               <button class="btn-outline" type="button">
-                {t({
-                  message: "Save draft",
-                  comment: "@context: Secondary button label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Save draft",
+                    comment: "@context: Secondary button label on sample page",
+                  }),
+                )}
               </button>
               <button class="btn-ghost" type="button">
-                {t({
-                  message: "Preview",
-                  comment: "@context: Ghost button label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Preview",
+                    comment: "@context: Ghost button label on sample page",
+                  }),
+                )}
               </button>
             </div>
 
             <div class="mb-4 flex flex-wrap gap-2">
               <span class="badge">
-                {t({
-                  message: "Default",
-                  comment: "@context: Badge label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Default",
+                    comment: "@context: Badge label on sample page",
+                  }),
+                )}
               </span>
               <span class="badge-secondary">
-                {t({
-                  message: "Muted",
-                  comment: "@context: Secondary badge label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Muted",
+                    comment: "@context: Secondary badge label on sample page",
+                  }),
+                )}
               </span>
               <span class="badge-outline">
-                {t({
-                  message: "Outline",
-                  comment: "@context: Outline badge label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Outline",
+                    comment: "@context: Outline badge label on sample page",
+                  }),
+                )}
               </span>
               <span class="badge-destructive">
-                {t({
-                  message: "Danger",
-                  comment: "@context: Destructive badge label on sample page",
-                })}
+                {i18n._(
+                  msg({
+                    message: "Danger",
+                    comment: "@context: Destructive badge label on sample page",
+                  }),
+                )}
               </span>
             </div>
 
             <div class="space-y-3">
               <label class="field">
                 <span class="label">
-                  {t({
-                    message: "Title",
-                    comment: "@context: Input label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Title",
+                      comment: "@context: Input label on sample page",
+                    }),
+                  )}
                 </span>
                 <input
                   class="input"
                   type="text"
-                  value={t({
-                    message: "Field notes on quiet design",
-                    comment: "@context: Input value on sample page",
-                  })}
+                  value={i18n._(
+                    msg({
+                      message: "Field notes on quiet design",
+                      comment: "@context: Input value on sample page",
+                    }),
+                  )}
                 />
               </label>
 
               <label class="field">
                 <span class="label">
-                  {t({
-                    message: "Summary",
-                    comment: "@context: Textarea label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Summary",
+                      comment: "@context: Textarea label on sample page",
+                    }),
+                  )}
                 </span>
                 <textarea class="textarea" rows={4}>
-                  {t({
-                    message:
-                      "When primary is too rigid, the whole page starts reading like product UI instead of writing space.",
-                    comment: "@context: Textarea value on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message:
+                        "When primary is too rigid, the whole page starts reading like product UI instead of writing space.",
+                      comment: "@context: Textarea value on sample page",
+                    }),
+                  )}
                 </textarea>
               </label>
             </div>
@@ -896,10 +1084,13 @@ export function ThemeSamplePage({
 
           <section class="card p-6 md:p-7">
             <h2 class="mb-3 text-base font-semibold">
-              {t({
-                message: "Navigation and reading states",
-                comment: "@context: Navigation section heading on sample page",
-              })}
+              {i18n._(
+                msg({
+                  message: "Navigation and reading states",
+                  comment:
+                    "@context: Navigation section heading on sample page",
+                }),
+              )}
             </h2>
 
             <div class="space-y-5">
@@ -908,28 +1099,36 @@ export function ThemeSamplePage({
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                   class="site-header-link site-header-link-active"
                 >
-                  {t({
-                    message: "Journal",
-                    comment: "@context: Active nav link label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Journal",
+                      comment: "@context: Active nav link label on sample page",
+                    }),
+                  )}
                 </a>
                 <a
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                   class="site-header-link"
                 >
-                  {t({
-                    message: "Collections",
-                    comment: "@context: Inactive nav link label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Collections",
+                      comment:
+                        "@context: Inactive nav link label on sample page",
+                    }),
+                  )}
                 </a>
                 <a
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                   class="site-header-link"
                 >
-                  {t({
-                    message: "Archive",
-                    comment: "@context: Inactive nav link label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Archive",
+                      comment:
+                        "@context: Inactive nav link label on sample page",
+                    }),
+                  )}
                 </a>
               </div>
 
@@ -938,10 +1137,13 @@ export function ThemeSamplePage({
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                   class="site-browse-link site-browse-link-active"
                 >
-                  {t({
-                    message: "Latest",
-                    comment: "@context: Active browse tab label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Latest",
+                      comment:
+                        "@context: Active browse tab label on sample page",
+                    }),
+                  )}
                 </a>
                 <span class="site-browse-sep" aria-hidden="true">
                   /
@@ -950,36 +1152,47 @@ export function ThemeSamplePage({
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                   class="site-browse-link"
                 >
-                  {t({
-                    message: "Featured",
-                    comment:
-                      "@context: Inactive browse tab label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Featured",
+                      comment:
+                        "@context: Inactive browse tab label on sample page",
+                    }),
+                  )}
                 </a>
               </div>
 
               <div class="rounded-xl border p-4 text-sm">
                 <div class="mb-2 font-medium">
-                  {t({
-                    message: "Search snippet",
-                    comment: "@context: Search snippet label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Search snippet",
+                      comment: "@context: Search snippet label on sample page",
+                    }),
+                  )}
                 </div>
                 <p class="search-snippet">
-                  {t({
-                    message: "A calmer accent makes",
-                    comment: "@context: Search snippet prefix on sample page",
-                  })}{" "}
+                  {i18n._(
+                    msg({
+                      message: "A calmer accent makes",
+                      comment: "@context: Search snippet prefix on sample page",
+                    }),
+                  )}{" "}
                   <mark>
-                    {t({
-                      message: "quiet design",
-                      comment: "@context: Search highlight text on sample page",
-                    })}
+                    {i18n._(
+                      msg({
+                        message: "quiet design",
+                        comment:
+                          "@context: Search highlight text on sample page",
+                      }),
+                    )}
                   </mark>{" "}
-                  {t({
-                    message: "feel deliberate instead of washed out.",
-                    comment: "@context: Search snippet suffix on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "feel deliberate instead of washed out.",
+                      comment: "@context: Search snippet suffix on sample page",
+                    }),
+                  )}
                 </p>
               </div>
 
@@ -988,11 +1201,13 @@ export function ThemeSamplePage({
                   class="btn-ghost"
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                 >
-                  {t({
-                    message: "Previous",
-                    comment:
-                      "@context: Pagination previous label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Previous",
+                      comment:
+                        "@context: Pagination previous label on sample page",
+                    }),
+                  )}
                 </a>
                 <a
                   class="btn-icon-outline"
@@ -1010,10 +1225,12 @@ export function ThemeSamplePage({
                   class="btn-ghost"
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                 >
-                  {t({
-                    message: "Next",
-                    comment: "@context: Pagination next label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "Next",
+                      comment: "@context: Pagination next label on sample page",
+                    }),
+                  )}
                 </a>
               </div>
             </div>
@@ -1021,11 +1238,13 @@ export function ThemeSamplePage({
 
           <section class="card p-6 md:p-7">
             <h2 class="mb-3 text-base font-semibold">
-              {t({
-                message: "Thread accents",
-                comment:
-                  "@context: Thread accents section heading on sample page",
-              })}
+              {i18n._(
+                msg({
+                  message: "Thread accents",
+                  comment:
+                    "@context: Thread accents section heading on sample page",
+                }),
+              )}
             </h2>
 
             <div class="space-y-4">
@@ -1037,16 +1256,21 @@ export function ThemeSamplePage({
                   />
                   <div>
                     <div class="text-sm font-medium">
-                      {t({
-                        message: "Current post",
-                        comment: "@context: Thread item label on sample page",
-                      })}
+                      {i18n._(
+                        msg({
+                          message: "Current post",
+                          comment: "@context: Thread item label on sample page",
+                        }),
+                      )}
                     </div>
                     <div class="text-xs text-muted-foreground">
-                      {t({
-                        message: "Accent should feel present, not loud.",
-                        comment: "@context: Thread helper text on sample page",
-                      })}
+                      {i18n._(
+                        msg({
+                          message: "Accent should feel present, not loud.",
+                          comment:
+                            "@context: Thread helper text on sample page",
+                        }),
+                      )}
                     </div>
                   </div>
                 </div>
@@ -1055,10 +1279,12 @@ export function ThemeSamplePage({
                   href={buildSampleHref(selectedTheme.id, currentMode)}
                   class="thread-gap-link"
                 >
-                  {t({
-                    message: "View earlier notes in this thread",
-                    comment: "@context: Thread link label on sample page",
-                  })}
+                  {i18n._(
+                    msg({
+                      message: "View earlier notes in this thread",
+                      comment: "@context: Thread link label on sample page",
+                    }),
+                  )}
                 </a>
               </div>
 
@@ -1068,17 +1294,21 @@ export function ThemeSamplePage({
               >
                 <div class="text-sm">
                   <div class="mb-1 font-medium">
-                    {t({
-                      message: "Color check",
-                      comment: "@context: Alert title on theme sample page",
-                    })}
+                    {i18n._(
+                      msg({
+                        message: "Color check",
+                        comment: "@context: Alert title on theme sample page",
+                      }),
+                    )}
                   </div>
                   <p class="leading-6 text-muted-foreground">
-                    {t({
-                      message:
-                        "If this page feels too branded, the first place to soften is the default theme’s site accent, not the border or body text.",
-                      comment: "@context: Alert body on theme sample page",
-                    })}
+                    {i18n._(
+                      msg({
+                        message:
+                          "If this page feels too branded, the first place to soften is the default theme’s site accent, not the border or body text.",
+                        comment: "@context: Alert body on theme sample page",
+                      }),
+                    )}
                   </p>
                 </div>
               </div>
@@ -1090,19 +1320,23 @@ export function ThemeSamplePage({
       <section class="theme-sample-formats mt-8">
         <div class="mb-5 max-w-2xl">
           <h2 class="text-base font-semibold">
-            {t({
-              message: "Real post components",
-              comment:
-                "@context: Section heading for real post component samples on the theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message: "Real post components",
+                comment:
+                  "@context: Section heading for real post component samples on the theme sample page",
+              }),
+            )}
           </h2>
           <p class="mt-1 text-sm text-muted-foreground">
-            {t({
-              message:
-                "These are actual feed components with real footers, summaries, and inline links. Use this section to judge whether the theme still feels calm once it is applied to realistic content.",
-              comment:
-                "@context: Helper text for the real post component section on the theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message:
+                  "These are actual feed components with real footers, summaries, and inline links. Use this section to judge whether the theme still feels calm once it is applied to realistic content.",
+                comment:
+                  "@context: Helper text for the real post component section on the theme sample page",
+              }),
+            )}
           </p>
         </div>
 
@@ -1130,19 +1364,23 @@ export function ThemeSamplePage({
       <section class="theme-sample-detail mt-8">
         <div class="mb-5 max-w-2xl">
           <h2 class="text-base font-semibold">
-            {t({
-              message: "Article detail page",
-              comment:
-                "@context: Section heading for the detail article sample on the theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message: "Article detail page",
+                comment:
+                  "@context: Section heading for the detail article sample on the theme sample page",
+              }),
+            )}
           </h2>
           <p class="mt-1 text-sm text-muted-foreground">
-            {t({
-              message:
-                "This uses the real single-post detail rendering with a longer article, inline image, tables, lists, quotes, and code. The content column stays at the same width as the live site.",
-              comment:
-                "@context: Helper text for the detail article sample on the theme sample page",
-            })}
+            {i18n._(
+              msg({
+                message:
+                  "This uses the real single-post detail rendering with a longer article, inline image, tables, lists, quotes, and code. The content column stays at the same width as the live site.",
+                comment:
+                  "@context: Helper text for the detail article sample on the theme sample page",
+              }),
+            )}
           </p>
         </div>