create-smoodly-app 0.0.17 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smoodly-app",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Create a Smoodly site: a fresh Next.js app with the admin mounted, a Supabase schema, an env file and a first editor.",
   "license": "MIT",
   "repository": {

package/templates/blank/README.md

@@ -14,6 +14,7 @@ for an agent (or a person) building the site.
 - `components/pages/` — the page shapes and the entry page: `Home` (fixed at /, one freeform zone), `Page` (open, editors create many), `Post` (the entry page for posts).
 - `components/sections/Text.tsx` — the one section: a title and a richtext body. Listed in `smoodly/sections.ts`.
 - `components/elements/Button.tsx` — the one element: a link styled as a button, embedded in richtext through `smoodly/toolsets.ts`.
+- `components/LocaleNav.tsx` — the language links every page view renders from its `locales` map: the same page in the other language, or its home when there is no translation; nothing with one locale.
 - `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts` (posts), `globals.ts` (the site item), `sections.ts`, `elements.ts`, `toolsets.ts`, `server.ts` (stores, site layer, renderer, the read API `q`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount), `richtext.tsx` (the bound renderer).
 - `scripts/seed.ts` — the home page and the site item, written through the stores. `npm run seed` is idempotent.
 - `app/globals.css` — a reset, a container, the two tones. Replace it.

package/templates/blank/components/LocaleNav.tsx

@@ -0,0 +1,19 @@
+import type { LocaleAlternate } from "smoodly";
+import { href } from "@/smoodly/server";
+
+// The language links, rendered by every page view from its own `locales`
+// map (spec 2026-09-15): the same page in the other language where it
+// exists and is published there, that language's home otherwise. A layout
+// cannot know which page is on screen, so the links live with the page.
+// Nothing with one locale, so the single-language scaffold shares the file.
+export function LocaleNav({ locale, locales }: { locale: string; locales: Record<string, LocaleAlternate | null> }) {
+  const codes = Object.keys(locales);
+  if (codes.length < 2) return null;
+  return (
+    <nav className="container locales" aria-label="Language">
+      {codes.map((code) => (
+        <a key={code} href={href(locales[code]?.path ?? "/", code)} aria-current={code === locale ? "page" : undefined}>{code}</a>
+      ))}
+    </nav>
+  );
+}

package/templates/blank/components/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { Text } from "../sections/Text";
+import { LocaleNav } from "../LocaleNav";
 
 // A page shape: zones declared, <Zone /> placed, one file. `slug` makes
 // it fixed — one record editors can neither delete nor duplicate — and
@@ -15,8 +16,13 @@ export const homeSchema = smoodly.schema.page({
   meta: { seo: true },
 });
 
-function HomeView({ zones }: Props<typeof homeSchema>) {
-  return <Zone of={zones.body} />;
+function HomeView({ zones, page }: Props<typeof homeSchema>) {
+  return (
+    <>
+      <LocaleNav locale={page.locale} locales={page.locales} />
+      <Zone of={zones.body} />
+    </>
+  );
 }
 
 export const HomePage = smoodly.page(homeSchema, HomeView);

package/templates/blank/components/pages/Page.tsx

@@ -1,5 +1,6 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { Text } from "../sections/Text";
+import { LocaleNav } from "../LocaleNav";
 
 // An open page shape: no `slug`, so editors create as many as they like,
 // anywhere in the tree the config allows. `page` is where this one sits
@@ -16,6 +17,7 @@ export const pageSchema = smoodly.schema.page({
 function PageView({ zones, page }: Props<typeof pageSchema>) {
   return (
     <>
+      <LocaleNav locale={page.locale} locales={page.locales} />
       <h1 className="container">{page.title}</h1>
       <Zone of={zones.body} />
     </>

package/templates/blank/components/pages/Post.tsx

@@ -1,20 +1,24 @@
 import { smoodly, type EntryPageProps } from "smoodly";
 import { RichText } from "@/smoodly/richtext";
 import { posts } from "@/smoodly/collections";
+import { LocaleNav } from "../LocaleNav";
 
 // The entry page for `posts`, served at /posts/<slug>. It receives the
 // entry's fields; the body is richtext rendered by the site's bound
 // RichText, which knows the registered elements.
 type PostFields = { title: string; date?: string; body?: unknown };
 
-function PostView({ entry }: EntryPageProps) {
+function PostView({ entry, locale, locales }: EntryPageProps) {
   const post = entry.fields as PostFields;
   return (
-    <article className="container prose">
-      <h1>{post.title}</h1>
-      {post.date && <p><time dateTime={post.date}>{post.date.slice(0, 10)}</time></p>}
-      <RichText doc={post.body} />
-    </article>
+    <>
+      <LocaleNav locale={locale} locales={locales} />
+      <article className="container prose">
+        <h1>{post.title}</h1>
+        {post.date && <p><time dateTime={post.date}>{post.date.slice(0, 10)}</time></p>}
+        <RichText doc={post.body} />
+      </article>
+    </>
   );
 }
 

package/templates/blank/package.json

@@ -14,7 +14,7 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.17"
+    "smoodly": "0.0.18"
   },
   "devDependencies": {
     "@next/env": "^16.3.4",

package/templates/blank-intl/README.md

@@ -10,11 +10,12 @@ for an agent (or a person) building the site.
 
 - `app/[locale]/page.tsx` — the home page: one line calling renderSmoodlyPath([], { locale }).
 - `app/[locale]/[...path]/page.tsx` — every other page and every collection entry, at any depth, with translated segments per locale.
-- `app/[locale]/layout.tsx` — the site's root layout: `app/globals.css`, the locale links, the footer line from the `site` item; the admin has its own under `app/(smoodly)/admin/`.
+- `app/[locale]/layout.tsx` — the site's root layout: `app/globals.css`, the footer line from the `site` item; the admin has its own under `app/(smoodly)/admin/`.
 - `i18n/routing.ts` — the locales and the default; `smoodly/config.ts` reads them from here. `i18n/request.ts` and `i18n/navigation.ts` are next-intl's stock files; `proxy.ts` is its locale routing (`/admin` excluded). UI strings go in `messages/<locale>.json`.
 - `components/pages/` — the page shapes and the entry page: `Home` (fixed at /, one freeform zone), `Page` (open, editors create many), `Post` (the entry page for posts).
 - `components/sections/Text.tsx` — the one section: a title and a richtext body. Listed in `smoodly/sections.ts`.
 - `components/elements/Button.tsx` — the one element: a link styled as a button, embedded in richtext through `smoodly/toolsets.ts`.
+- `components/LocaleNav.tsx` — the language links every page view renders from its `locales` map: the same page in the other language, or its home when there is no translation; nothing with one locale.
 - `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts` (posts), `globals.ts` (the site item), `sections.ts`, `elements.ts`, `toolsets.ts`, `server.ts` (stores, site layer, renderer, the read API `q`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount), `richtext.tsx` (the bound renderer).
 - `scripts/seed.ts` — the home page and the site item, written through the stores. `npm run seed` is idempotent.
 - `app/globals.css` — a reset, a container, the two tones. Replace it.

package/templates/blank-intl/app/[locale]/layout.tsx

@@ -2,15 +2,18 @@ import type { ReactNode } from "react";
 import { notFound } from "next/navigation";
 import { hasLocale, NextIntlClientProvider } from "next-intl";
 import { routing } from "@/i18n/routing";
-import { href, q } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 import "../globals.css";
 
 // The site's root layout under the locale segment; the admin has its own
 // under app/(smoodly)/admin, outside [locale], as a second root layout.
 // The `site` global item gives the document title and the footer line,
 // read per locale through `q`, null until published in this locale. The
-// locale links are the visitor's only language switch, since locale
-// detection is off (see i18n/routing.ts).
+// language links are not here: a layout cannot know which page is on
+// screen, so every page view renders them through components/LocaleNav.tsx
+// from its own `locales` map, landing on the same page in the other
+// language (spec 2026-09-15). They are the visitor's only language switch,
+// since locale detection is off (see i18n/routing.ts).
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   const site = await q().getGlobal("site", { locale });
@@ -21,18 +24,10 @@ export default async function LocaleLayout({ children, params }: { children: Rea
   const { locale } = await params;
   if (!hasLocale(routing.locales, locale)) notFound();
   const site = await q().getGlobal("site", { locale });
-  const locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
   return (
     <html lang={locale}>
       <body>
         <NextIntlClientProvider>
-          {locales.length > 1 && (
-            <nav className="container locales" aria-label="Language">
-              {locales.map((l) => (
-                <a key={l.code} href={l.url} aria-current={l.current ? "page" : undefined}>{l.code}</a>
-              ))}
-            </nav>
-          )}
           <main>{children}</main>
           {site && <footer className="container site-footer">{site.name} · {site.tagline}</footer>}
         </NextIntlClientProvider>

package/templates/blank-intl/components/LocaleNav.tsx

@@ -0,0 +1,19 @@
+import type { LocaleAlternate } from "smoodly";
+import { href } from "@/smoodly/server";
+
+// The language links, rendered by every page view from its own `locales`
+// map (spec 2026-09-15): the same page in the other language where it
+// exists and is published there, that language's home otherwise. A layout
+// cannot know which page is on screen, so the links live with the page.
+// Nothing with one locale, so the single-language scaffold shares the file.
+export function LocaleNav({ locale, locales }: { locale: string; locales: Record<string, LocaleAlternate | null> }) {
+  const codes = Object.keys(locales);
+  if (codes.length < 2) return null;
+  return (
+    <nav className="container locales" aria-label="Language">
+      {codes.map((code) => (
+        <a key={code} href={href(locales[code]?.path ?? "/", code)} aria-current={code === locale ? "page" : undefined}>{code}</a>
+      ))}
+    </nav>
+  );
+}

package/templates/blank-intl/components/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { Text } from "../sections/Text";
+import { LocaleNav } from "../LocaleNav";
 
 // A page shape: zones declared, <Zone /> placed, one file. `slug` makes
 // it fixed — one record editors can neither delete nor duplicate — and
@@ -15,8 +16,13 @@ export const homeSchema = smoodly.schema.page({
   meta: { seo: true },
 });
 
-function HomeView({ zones }: Props<typeof homeSchema>) {
-  return <Zone of={zones.body} />;
+function HomeView({ zones, page }: Props<typeof homeSchema>) {
+  return (
+    <>
+      <LocaleNav locale={page.locale} locales={page.locales} />
+      <Zone of={zones.body} />
+    </>
+  );
 }
 
 export const HomePage = smoodly.page(homeSchema, HomeView);

package/templates/blank-intl/components/pages/Page.tsx

@@ -1,5 +1,6 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { Text } from "../sections/Text";
+import { LocaleNav } from "../LocaleNav";
 
 // An open page shape: no `slug`, so editors create as many as they like,
 // anywhere in the tree the config allows. `page` is where this one sits
@@ -16,6 +17,7 @@ export const pageSchema = smoodly.schema.page({
 function PageView({ zones, page }: Props<typeof pageSchema>) {
   return (
     <>
+      <LocaleNav locale={page.locale} locales={page.locales} />
       <h1 className="container">{page.title}</h1>
       <Zone of={zones.body} />
     </>

package/templates/blank-intl/components/pages/Post.tsx

@@ -1,20 +1,24 @@
 import { smoodly, type EntryPageProps } from "smoodly";
 import { RichText } from "@/smoodly/richtext";
 import { posts } from "@/smoodly/collections";
+import { LocaleNav } from "../LocaleNav";
 
 // The entry page for `posts`, served at /posts/<slug>. It receives the
 // entry's fields; the body is richtext rendered by the site's bound
 // RichText, which knows the registered elements.
 type PostFields = { title: string; date?: string; body?: unknown };
 
-function PostView({ entry }: EntryPageProps) {
+function PostView({ entry, locale, locales }: EntryPageProps) {
   const post = entry.fields as PostFields;
   return (
-    <article className="container prose">
-      <h1>{post.title}</h1>
-      {post.date && <p><time dateTime={post.date}>{post.date.slice(0, 10)}</time></p>}
-      <RichText doc={post.body} />
-    </article>
+    <>
+      <LocaleNav locale={locale} locales={locales} />
+      <article className="container prose">
+        <h1>{post.title}</h1>
+        {post.date && <p><time dateTime={post.date}>{post.date.slice(0, 10)}</time></p>}
+        <RichText doc={post.body} />
+      </article>
+    </>
   );
 }
 

package/templates/blank-intl/package.json

@@ -14,7 +14,7 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.17",
+    "smoodly": "0.0.18",
     "next-intl": "^4.14.2"
   },
   "devDependencies": {

package/templates/lorem/README.md

@@ -10,8 +10,9 @@ for an agent (or a person) building the site.
 
 - `app/(site)/page.tsx` — the home page: one line calling renderSmoodlyPath([]).
 - `app/(site)/[...path]/page.tsx` — every other page and every collection entry, at any depth.
-- `app/(site)/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the header and footer from global content; the admin has its own under `app/(smoodly)/admin/`.
+- `app/(site)/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the footer from global content; the admin has its own under `app/(smoodly)/admin/`.
 - `components/pages/` — the page shapes and the entry page: `Home` (locked hero, freeform body), `Articles` (a fixed page at the collection's path — its index — with a code-fetched grid), `Page` (open; About lives here), `Article` (the entry page).
+- `components/PageFrame.tsx` — the header and `<main>` every page view renders (a layout cannot know which page is on screen); with more than one locale, the language links from the page's `locales` map — the same page in the other language, or its home when there is no translation.
 - `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the global items. Add one, list it in `smoodly/sections.ts`.
 - `components/strings.ts`, `messages/` — the site's own UI strings and the request locale, one seam.
 - `public/images/` — the starter's photos; image fields hold URLs like `/images/hero_image.jpg`.
@@ -28,7 +29,7 @@ The Lorem Co. site the installer seeded is a tour of the features:
 - **Articles** — a fixed page at the collection's own URL segment, so it is the collection's index: the hero is the editor's, the grid is code fetching published articles.
 - **Company / About** — a folder and a page under it (the breadcrumb), the same body sections, plus people.
 - **An article** — a collection entry with a richtext body, tags (a localized list), a date and an author ref; versioned, so every save is a snapshot.
-- **Global content** — the header and footer the layout renders, the contact details the footer reads, the quote pages place.
+- **Global content** — the header every page renders through `components/PageFrame.tsx`, the footer the layout renders, the contact details the footer reads, the quote pages place.
 
 Reseed an empty database any time with `npm run seed`.
 

package/templates/lorem/app/(site)/layout.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import { Instrument_Sans, Newsreader } from "next/font/google";
-import { HeaderView } from "@/components/sections/Header";
 import { FooterView } from "@/components/sections/Footer";
 import { q } from "@/smoodly/server";
 import "../globals.css";
@@ -14,20 +13,20 @@ export const metadata = { title: "Lorem Co." };
 // The site's root layout, in its own route group so the admin's layout
 // under app/(smoodly)/admin is a second root layout beside it rather than
 // a child of this one — two root layouts, a full page load between them,
-// which is fine: they are separate apps in spirit. Header, footer and the
+// which is fine: they are separate apps in spirit. The footer and the
 // contact block are global content: read through `q`, cached under their
-// tag, null until published.
+// tag, null until published. The header is NOT here: every page view
+// renders it through components/PageFrame.tsx, the same file that carries
+// the language links in a multilingual site (spec 2026-09-15).
 export default async function RootLayout({ children }: { children: ReactNode }) {
-  const [headerProps, footerProps, contactFields] = await Promise.all([
-    q().getGlobal("header"),
+  const [footerProps, contactFields] = await Promise.all([
     q().getGlobal("footer"),
     q().getGlobal("contact"),
   ]);
   return (
     <html lang="en" className={`${serif.variable} ${sans.variable}`}>
       <body>
-        {headerProps && <HeaderView {...headerProps} />}
-        <main>{children}</main>
+        {children}
         {footerProps && <FooterView {...footerProps} contact={contactFields} />}
       </body>
     </html>

package/templates/lorem/components/PageFrame.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { LocaleAlternate } from "smoodly";
+import { href, q } from "@/smoodly/server";
+import { HeaderView, type LocaleLink } from "./sections/Header";
+
+// The header and the <main> around a page's content, rendered by every
+// page view rather than the layout: a layout cannot know which page is on
+// screen (Next renders the two concurrently), and the language links must
+// land on the same page in the other language. `locales` is the page's or
+// entry's map (spec 2026-09-15): the other locale's path where the page
+// exists and is published there, that locale's home otherwise. With one
+// locale (the single-language scaffold) there are no links at all. The
+// header itself is the global item, read through `q` per locale.
+export async function PageFrame({ locale, locales, children }: {
+  locale: string;
+  locales: Record<string, LocaleAlternate | null>;
+  children: ReactNode;
+}) {
+  const header = await q().getGlobal("header", { locale });
+  const codes = Object.keys(locales);
+  const links: LocaleLink[] | undefined = codes.length > 1
+    ? codes.map((code) => ({ code, url: href(locales[code]?.path ?? "/", code), current: code === locale }))
+    : undefined;
+  return (
+    <>
+      {header && <HeaderView {...header} locales={links} />}
+      <main>{children}</main>
+    </>
+  );
+}

package/templates/lorem/components/pages/Article.tsx

@@ -4,6 +4,7 @@ import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
 import { q } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
+import { PageFrame } from "../PageFrame";
 import { articlePath, articlesIndexPath, formatDate, readingMinutes, type ArticleFields } from "../articles";
 import { ui } from "../strings";
 
@@ -12,15 +13,16 @@ import { ui } from "../strings";
 // resolved (author is a person). The body is richtext rendered by the
 // package's RichText; the read time is words / 200. "Related articles"
 // is the newest other published articles, fetched here, and absent when
-// there are none.
-async function ArticleView({ entry }: EntryPageProps) {
-  const { locale, t, url } = await ui();
+// there are none. The render locale and the alternates arrive as props
+// (spec 2026-09-15); PageFrame renders the header from them.
+async function ArticleView({ entry, locale, locales }: EntryPageProps) {
+  const { t, url } = await ui();
   const a = entry.fields as ArticleFields & { author?: { name: string; role?: string } | null };
   // Four newest, minus this one, so three remain even when it is among them; the store applies the limit.
   const related = (await q().getEntries("articles", { locale, limit: 4 })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
   const index = url(articlesIndexPath(locale));
   return (
-    <>
+    <PageFrame locale={locale} locales={locales}>
       <article className="container article">
         <a className="article__back" href={index}>← {t("allArticles")}</a>
         <div className="article__head">
@@ -59,7 +61,7 @@ async function ArticleView({ entry }: EntryPageProps) {
           </div>
         </section>
       )}
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem/components/pages/Articles.tsx

@@ -1,6 +1,7 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { PageHero } from "../sections/PageHero";
 import { ArticleCard } from "../ArticleCard";
+import { PageFrame } from "../PageFrame";
 import { articlePath, type ArticleFields } from "../articles";
 import { ui } from "../strings";
 import { q } from "@/smoodly/server";
@@ -23,11 +24,11 @@ export const articlesSchema = smoodly.schema.page({
   meta: { seo: true },
 });
 
-async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
+async function ArticlesView({ zones, page }: Props<typeof articlesSchema>) {
   const { locale, url } = await ui();
   const items = await q().getEntries("articles", { locale });
   return (
-    <>
+    <PageFrame locale={page.locale} locales={page.locales}>
       <Zone of={zones.hero} />
       <section className="container articles-index">
         <div className="card-grid">
@@ -37,7 +38,7 @@ async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
           })}
         </div>
       </section>
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem/components/pages/Home.tsx

@@ -5,6 +5,7 @@ import { Points } from "../sections/Points";
 import { FavouriteArticles } from "../sections/FavouriteArticles";
 import { People } from "../sections/People";
 import { Quote } from "../sections/Quote";
+import { PageFrame } from "../PageFrame";
 
 // A page shape: zones declared, <Zone /> placed, one file (DESIGN.md §3).
 // `slug` makes it fixed — one record the editor can neither delete nor
@@ -25,12 +26,12 @@ export const homeSchema = smoodly.schema.page({
   meta: { seo: true },
 });
 
-function HomeView({ zones }: Props<typeof homeSchema>) {
+function HomeView({ zones, page }: Props<typeof homeSchema>) {
   return (
-    <>
+    <PageFrame locale={page.locale} locales={page.locales}>
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem/components/pages/Page.tsx

@@ -6,6 +6,7 @@ import { Points } from "../sections/Points";
 import { FavouriteArticles } from "../sections/FavouriteArticles";
 import { People } from "../sections/People";
 import { Quote } from "../sections/Quote";
+import { PageFrame } from "../PageFrame";
 
 // Open registration: editors create as many of these as they like, at
 // any depth the config allows. `page` is where this one sits in the tree.
@@ -28,7 +29,7 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
   // Sub-navigation: the published children that opted in through their page field.
   const shown = page.children.filter((c) => c.hasPage && c.fields.showInNavigation === true);
   return (
-    <>
+    <PageFrame locale={page.locale} locales={page.locales}>
       {page.ancestors.length > 0 && (
         // `url` is the ancestor's site URL through the app's href seam
         // (/fi/yritys under next-intl); `path` would be the bare CMS path.
@@ -46,7 +47,7 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
       )}
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem/package.json

@@ -14,7 +14,7 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.17"
+    "smoodly": "0.0.18"
   },
   "devDependencies": {
     "@next/env": "^16.3.4",

package/templates/lorem-intl/README.md

@@ -10,9 +10,10 @@ for an agent (or a person) building the site.
 
 - `app/[locale]/page.tsx` — the home page: one line calling renderSmoodlyPath([], { locale }).
 - `app/[locale]/[...path]/page.tsx` — every other page and every collection entry, at any depth, with translated segments per locale.
-- `app/[locale]/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the header and footer from global content, the FI / EN links; the admin has its own under `app/(smoodly)/admin/`.
+- `app/[locale]/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the footer from global content; the admin has its own under `app/(smoodly)/admin/`.
 - `i18n/routing.ts` — the locales and the default; `smoodly/config.ts` reads them from here. `i18n/request.ts` and `i18n/navigation.ts` are next-intl's stock files; `proxy.ts` is its locale routing (`/admin` excluded).
 - `components/pages/` — the page shapes and the entry page: `Home` (locked hero, freeform body), `Articles` (a fixed page at the collection's path — its index — with a code-fetched grid), `Page` (open; About lives here), `Article` (the entry page).
+- `components/PageFrame.tsx` — the header and `<main>` every page view renders (a layout cannot know which page is on screen); with more than one locale, the language links from the page's `locales` map — the same page in the other language, or its home when there is no translation.
 - `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the global items. Add one, list it in `smoodly/sections.ts`.
 - `components/strings.ts`, `messages/` — the site's own UI strings and the request locale, one seam.
 - `public/images/` — the starter's photos; image fields hold URLs like `/images/hero_image.jpg`.
@@ -35,7 +36,7 @@ The Lorem Co. site the installer seeded is a tour of the features:
 - **Articles** — a fixed page at the collection's own URL segment, so it is the collection's index: the hero is the editor's, the grid is code fetching published articles.
 - **Company / About** — a folder and a page under it (the breadcrumb), the same body sections, plus people.
 - **An article** — a collection entry with a richtext body, tags (a localized list), a date and an author ref; versioned, so every save is a snapshot.
-- **Global content** — the header and footer the layout renders, the contact details the footer reads, the quote pages place.
+- **Global content** — the header every page renders through `components/PageFrame.tsx`, the footer the layout renders, the contact details the footer reads, the quote pages place.
 
 Every page and entry exists in each locale with its own slug. Reseed an
 empty database any time with `npm run seed`.

package/templates/lorem-intl/app/[locale]/layout.tsx

@@ -3,9 +3,8 @@ import { notFound } from "next/navigation";
 import { Instrument_Sans, Newsreader } from "next/font/google";
 import { hasLocale, NextIntlClientProvider } from "next-intl";
 import { routing } from "@/i18n/routing";
-import { HeaderView } from "@/components/sections/Header";
 import { FooterView } from "@/components/sections/Footer";
-import { href, q } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 import "../globals.css";
 
 // The starter's two faces, as CSS variables globals.css reads.
@@ -16,25 +15,24 @@ export const metadata = { title: "Lorem Co." };
 
 // The site's root layout. The admin has its own under app/(smoodly)/admin —
 // two root layouts, a full page load between them, which is fine: they
-// are separate apps in spirit. Header, footer and the contact block are
-// global content: read through `q`, cached per locale under their tag, null
-// until published in this locale. The header also gets the locale links
-// — the visitor's only language switch, since locale detection is off.
+// are separate apps in spirit. The footer and the contact block are
+// global content: read through `q`, cached per locale under their tag,
+// null until published in this locale. The header is NOT here: a layout
+// cannot know which page is on screen, and the FI / EN links must land on
+// the same page in the other language, so every page view renders it
+// through components/PageFrame.tsx from its own `locales` (spec 2026-09-15).
 export default async function LocaleLayout({ children, params }: { children: ReactNode; params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   if (!hasLocale(routing.locales, locale)) notFound();
-  const [headerProps, footerProps, contactFields] = await Promise.all([
-    q().getGlobal("header", { locale }),
+  const [footerProps, contactFields] = await Promise.all([
     q().getGlobal("footer", { locale }),
     q().getGlobal("contact", { locale }),
   ]);
-  const locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
   return (
     <html lang={locale} className={`${serif.variable} ${sans.variable}`}>
       <body>
         <NextIntlClientProvider>
-          {headerProps && <HeaderView {...headerProps} locales={locales} />}
-          <main>{children}</main>
+          {children}
           {footerProps && <FooterView {...footerProps} contact={contactFields} />}
         </NextIntlClientProvider>
       </body>

package/templates/lorem-intl/components/PageFrame.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { LocaleAlternate } from "smoodly";
+import { href, q } from "@/smoodly/server";
+import { HeaderView, type LocaleLink } from "./sections/Header";
+
+// The header and the <main> around a page's content, rendered by every
+// page view rather than the layout: a layout cannot know which page is on
+// screen (Next renders the two concurrently), and the language links must
+// land on the same page in the other language. `locales` is the page's or
+// entry's map (spec 2026-09-15): the other locale's path where the page
+// exists and is published there, that locale's home otherwise. With one
+// locale (the single-language scaffold) there are no links at all. The
+// header itself is the global item, read through `q` per locale.
+export async function PageFrame({ locale, locales, children }: {
+  locale: string;
+  locales: Record<string, LocaleAlternate | null>;
+  children: ReactNode;
+}) {
+  const header = await q().getGlobal("header", { locale });
+  const codes = Object.keys(locales);
+  const links: LocaleLink[] | undefined = codes.length > 1
+    ? codes.map((code) => ({ code, url: href(locales[code]?.path ?? "/", code), current: code === locale }))
+    : undefined;
+  return (
+    <>
+      {header && <HeaderView {...header} locales={links} />}
+      <main>{children}</main>
+    </>
+  );
+}

package/templates/lorem-intl/components/pages/Article.tsx

@@ -4,6 +4,7 @@ import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
 import { q } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
+import { PageFrame } from "../PageFrame";
 import { articlePath, articlesIndexPath, formatDate, readingMinutes, type ArticleFields } from "../articles";
 import { ui } from "../strings";
 
@@ -12,15 +13,16 @@ import { ui } from "../strings";
 // resolved (author is a person). The body is richtext rendered by the
 // package's RichText; the read time is words / 200. "Related articles"
 // is the newest other published articles, fetched here, and absent when
-// there are none.
-async function ArticleView({ entry }: EntryPageProps) {
-  const { locale, t, url } = await ui();
+// there are none. The render locale and the alternates arrive as props
+// (spec 2026-09-15); PageFrame renders the header from them.
+async function ArticleView({ entry, locale, locales }: EntryPageProps) {
+  const { t, url } = await ui();
   const a = entry.fields as ArticleFields & { author?: { name: string; role?: string } | null };
   // Four newest, minus this one, so three remain even when it is among them; the store applies the limit.
   const related = (await q().getEntries("articles", { locale, limit: 4 })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
   const index = url(articlesIndexPath(locale));
   return (
-    <>
+    <PageFrame locale={locale} locales={locales}>
       <article className="container article">
         <a className="article__back" href={index}>← {t("allArticles")}</a>
         <div className="article__head">
@@ -59,7 +61,7 @@ async function ArticleView({ entry }: EntryPageProps) {
           </div>
         </section>
       )}
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem-intl/components/pages/Articles.tsx

@@ -1,6 +1,7 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { PageHero } from "../sections/PageHero";
 import { ArticleCard } from "../ArticleCard";
+import { PageFrame } from "../PageFrame";
 import { articlePath, type ArticleFields } from "../articles";
 import { ui } from "../strings";
 import { q } from "@/smoodly/server";
@@ -23,11 +24,11 @@ export const articlesSchema = smoodly.schema.page({
   meta: { seo: true },
 });
 
-async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
+async function ArticlesView({ zones, page }: Props<typeof articlesSchema>) {
   const { locale, url } = await ui();
   const items = await q().getEntries("articles", { locale });
   return (
-    <>
+    <PageFrame locale={page.locale} locales={page.locales}>
       <Zone of={zones.hero} />
       <section className="container articles-index">
         <div className="card-grid">
@@ -37,7 +38,7 @@ async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
           })}
         </div>
       </section>
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem-intl/components/pages/Home.tsx

@@ -5,6 +5,7 @@ import { Points } from "../sections/Points";
 import { FavouriteArticles } from "../sections/FavouriteArticles";
 import { People } from "../sections/People";
 import { Quote } from "../sections/Quote";
+import { PageFrame } from "../PageFrame";
 
 // A page shape: zones declared, <Zone /> placed, one file (DESIGN.md §3).
 // `slug` makes it fixed — one record the editor can neither delete nor
@@ -25,12 +26,12 @@ export const homeSchema = smoodly.schema.page({
   meta: { seo: true },
 });
 
-function HomeView({ zones }: Props<typeof homeSchema>) {
+function HomeView({ zones, page }: Props<typeof homeSchema>) {
   return (
-    <>
+    <PageFrame locale={page.locale} locales={page.locales}>
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem-intl/components/pages/Page.tsx

@@ -6,6 +6,7 @@ import { Points } from "../sections/Points";
 import { FavouriteArticles } from "../sections/FavouriteArticles";
 import { People } from "../sections/People";
 import { Quote } from "../sections/Quote";
+import { PageFrame } from "../PageFrame";
 
 // Open registration: editors create as many of these as they like, at
 // any depth the config allows. `page` is where this one sits in the tree.
@@ -28,7 +29,7 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
   // Sub-navigation: the published children that opted in through their page field.
   const shown = page.children.filter((c) => c.hasPage && c.fields.showInNavigation === true);
   return (
-    <>
+    <PageFrame locale={page.locale} locales={page.locales}>
       {page.ancestors.length > 0 && (
         // `url` is the ancestor's site URL through the app's href seam
         // (/fi/yritys under next-intl); `path` would be the bare CMS path.
@@ -46,7 +47,7 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
       )}
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
-    </>
+    </PageFrame>
   );
 }
 

package/templates/lorem-intl/package.json

@@ -14,7 +14,7 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.17",
+    "smoodly": "0.0.18",
     "next-intl": "^4.14.2"
   },
   "devDependencies": {