create-smoodly-app 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smoodly-app",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "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/next/app/globals.css

@@ -173,6 +173,10 @@ h3.card__title { font-size: 24px; }
 .breadcrumb { padding-top: 24px; font-size: 14px; color: var(--muted); }
 .breadcrumb a:hover { color: var(--accent); }
 
+.subnav { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 12px; font-size: 14px; }
+.subnav a { color: var(--muted); }
+.subnav a:hover { color: var(--accent); }
+
 .articles-index { padding-bottom: 96px; }
 
 .article { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }

package/templates/next/app/layout.tsx

@@ -2,8 +2,7 @@ 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 { contact, footer, header } from "@/smoodly/shared";
-import { getSmoodlyShared } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 import "./globals.css";
 
 // The starter's two faces, as CSS variables globals.css reads.
@@ -15,13 +14,13 @@ 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
-// shared content: fetched here, cached under their tag, null until
+// shared content: read through `q`, cached under their tag, null until
 // published.
 export default async function RootLayout({ children }: { children: ReactNode }) {
   const [headerProps, footerProps, contactFields] = await Promise.all([
-    getSmoodlyShared(header),
-    getSmoodlyShared(footer),
-    getSmoodlyShared(contact),
+    q().getShared("header"),
+    q().getShared("footer"),
+    q().getShared("contact"),
   ]);
   return (
     <html lang="en" className={`${serif.variable} ${sans.variable}`}>

package/templates/next/components/elements/Callout.tsx

@@ -15,7 +15,7 @@ export const calloutSchema = smoodly.schema.element({
     body: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
   },
   styles: {
-    tone: f.select(["info", "success", "warning"]).default("info"),
+    tone: f.select([{ value: "info", label: "Info" }, { value: "success", label: "Success" }, { value: "warning", label: "Warning" }]).default("info"),
   },
   sample: {
     title: "Good to know",

package/templates/next/components/elements/Cta.tsx

@@ -15,7 +15,7 @@ export const ctaSchema = smoodly.schema.element({
     href: f.link(),
   },
   styles: {
-    variant: f.select(["primary", "outline"]).default("primary"),
+    variant: f.select([{ value: "primary", label: "Primary" }, { value: "outline", label: "Outline" }]).default("primary"),
   },
   sample: { heading: "Ready to start?", text: "Sed ut perspiciatis unde omnis iste natus.", label: "Get in touch", href: "/company/about-us" },
 });

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

@@ -2,7 +2,7 @@ import { smoodly, type EntryPageProps } from "smoodly";
 import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
-import { site } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
 import { articlePath, articlesIndexPath, formatDate, readingMinutes, type ArticleFields } from "../articles";
 import { ui } from "../strings";
@@ -16,7 +16,8 @@ import { ui } from "../strings";
 async function ArticleView({ entry }: EntryPageProps) {
   const { locale, t, url } = await ui();
   const a = entry.fields as ArticleFields & { author?: { name: string; role?: string } | null };
-  const related = (await site().getEntries("articles", { locale })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
+  // 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 (
     <>

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

@@ -3,16 +3,16 @@ import { PageHero } from "../sections/PageHero";
 import { ArticleCard } from "../ArticleCard";
 import { articlePath, type ArticleFields } from "../articles";
 import { ui } from "../strings";
-import { site } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 
 // The Articles index: a fixed page whose slugs are the collection's own
 // segments (smoodly/collections.ts), which makes it the collection's
 // index page — the mount in the Pages list opens this page's editor. The
-// editor owns the hero; the grid below is developer JSX that fetches the
-// published articles through the site layer, newest first (the
-// collection's `order`). In the editor canvas the hero is the draft while
-// the grid shows published articles only: the content API is
-// published-only by design.
+// editor owns the hero; the grid below is developer JSX that reads the
+// articles through `q`, newest first (the collection's `order`), cached
+// under the collection's tag. In the editor canvas the site runs in draft
+// mode, so the grid reads the live rows too: an unpublished article shows
+// there as it will (spec 2026-09-11 §2).
 export const articlesSchema = smoodly.schema.page({
   name: "articlesIndex",
   title: "Articles",
@@ -25,7 +25,7 @@ export const articlesSchema = smoodly.schema.page({
 
 async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
   const { locale, url } = await ui();
-  const items = await site().getEntries("articles", { locale });
+  const items = await q().getEntries("articles", { locale });
   return (
     <>
       <Zone of={zones.hero} />

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

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { smoodly, z, Zone, type Props } from "smoodly";
+import { f, smoodly, z, Zone, type Props } from "smoodly";
 import { PageHero } from "../sections/PageHero";
 import { ImageText } from "../sections/ImageText";
 import { Points } from "../sections/Points";
@@ -19,9 +19,14 @@ export const pageSchema = smoodly.schema.page({
     body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
   },
   meta: { seo: true },
+  // A page field (spec 2026-09-10 page fields §7): the parent's view lists
+  // the children that keep this on. Edited on the Settings tab.
+  fields: { showInNavigation: f.boolean().default(true) },
 });
 
 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 (
     <>
       {page.ancestors.length > 0 && (
@@ -34,6 +39,11 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
           {page.title}
         </nav>
       )}
+      {shown.length > 0 && (
+        <nav className="container subnav" aria-label="Pages in this section">
+          {shown.map((c) => <Link key={c.path} href={c.url}>{c.title}</Link>)}
+        </nav>
+      )}
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
     </>

package/templates/next/components/sections/ImageText.tsx

@@ -20,7 +20,7 @@ export const imageTextSchema = smoodly.schema.section({
     link: f.object({ label: f.text(), href: f.link() }).optional(),
   },
   styles: {
-    imageSide: f.select(["left", "right"]).default("left"),
+    imageSide: f.select([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
   },
   sample: {
     heading: "Duis aute irure dolor in reprehenderit",

package/templates/next/components/sections/Points.tsx

@@ -9,7 +9,7 @@ export const pointsSchema = smoodly.schema.section({
   fields: {
     heading: f.text(),
     points: f.list(f.object({
-      icon: f.select(["circle", "square", "diamond"]),
+      icon: f.select([{ value: "circle", label: "Circle" }, { value: "square", label: "Square" }, { value: "diamond", label: "Diamond" }]),
       heading: f.text(),
       text: f.text(),
     })).min(1).max(6),

package/templates/next/package.json

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

package/templates/next/scripts/seed.ts

@@ -103,7 +103,7 @@ async function seedEntry(collection: string, en: Fields, fi?: Fields) {
   return row;
 }
 
-type Tree = { zones: Record<string, Node[]> };
+type Tree = { zones: Record<string, Node[]>; fields?: Record<string, unknown>; meta?: Record<string, unknown> };
 
 /** Create a page (or a folder: `template: null`) in EN with its tree,
  *  publish it, then the FI row with its own tree — a locale's tree is
@@ -251,6 +251,8 @@ const favourites = (heading: string): Node => ({
 });
 
 const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]; link: string; favourites: string }): Tree => ({
+  // The built-in SEO set rides the tree (spec 2026-09-10 page fields §2).
+  meta: { description: "Lorem Co. — consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore." },
   zones: {
     // The locked hero's one node. Pages created in the admin get theirs
     // from the editor (fillLockedZones on load); a seeded tree brings its own.
@@ -299,7 +301,9 @@ await seedPage(
 // both locales with its own slug and title.
 const company = await seedPage({ slug: "company", title: "Company", template: null, fi: { slug: "yritys", title: "Yritys" } });
 
-const aboutTree = (t: { kicker: string; people: string }): Tree => ({
+const aboutTree = (t: { kicker: string; people: string; description: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.description },
   zones: {
     hero: [{
       id: "node-about-hero",
@@ -329,11 +333,32 @@ const aboutTree = (t: { kicker: string; people: string }): Tree => ({
     ],
   },
 });
-await seedPage(
+const about = await seedPage(
   { slug: "about-us", title: "About us", template: "page", parentId: company.id, fi: { slug: "tietoa-meista", title: "Tietoa meistä" } },
-  { en: aboutTree({ kicker: "About us", people: "Our people" }), fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki" }) },
+  {
+    en: aboutTree({ kicker: "About us", people: "Our people", description: "Lorem ipsum dolor sit amet — who we are and what we do." }),
+    fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki", description: "Lorem ipsum dolor sit amet — keitä olemme ja mitä teemme." }),
+  },
+);
+
+// A page under About us, shown in its sub-navigation through the Page
+// shape's `showInNavigation` field (spec 2026-09-10 page fields §7).
+const teamTree = (t: { heading: string; text: string; people: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.text },
+  zones: {
+    hero: [{ id: "node-team-hero", type: "pageHero", fields: { kicker: t.heading, heading: t.heading, text: t.text, image: img.about } }],
+    body: [{ id: "node-team-people", type: "peopleSection", fields: { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] } }],
+  },
+});
+await seedPage(
+  { slug: "team", title: "Team", template: "page", parentId: about.id, fi: { slug: "tiimi", title: "Tiimi" } },
+  {
+    en: teamTree({ heading: "Team", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "The whole team" }),
+    fi: teamTree({ heading: "Tiimi", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "Koko tiimi" }),
+  },
 );
 
 console.log(
-  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us${FI ? " (yritys/tietoa-meista)" : ""}, one article, four people, header, footer, contact and quote — all published.`,
+  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us and its Team page${FI ? " (yritys/tietoa-meista/tiimi)" : ""}, one article, four people, header, footer, contact and quote — all published.`,
 );

package/templates/next/smoodly/server.ts

@@ -4,21 +4,22 @@
 // secret is a service-role key or a cloud write key is invisible here.
 //
 // Lazy on purpose, the site and renderer included: config.ts imports the
-// page shapes, and a page shape may import this file to fetch through
-// the site (components/pages/Articles.tsx). That is a cycle, and the
+// page shapes, and a page shape may import this file to read through
+// `q` (components/pages/Articles.tsx). That is a cycle, and the
 // admin route enters it from config.ts — so nothing here may read the
 // config at module scope.
 import {
   createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseAssetStore, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
 } from "smoodly";
 import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admin/next";
-import { createPageRenderer, type PageRegistration } from "smoodly/next";
+import { createPageRenderer, createSmoodlyQueries, type PageRegistration } from "smoodly/next";
 import type { SupabaseClient } from "@supabase/supabase-js";
 import { collections, config, elements, sections, shared } from "./config";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
+type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof shared>>;
 type Bound = {
-  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer; q: Queries;
 };
 
 let cached: Bound | null = null;
@@ -43,17 +44,18 @@ function bound(): Bound {
   // takes this local closure, not the export, so it never re-enters `bound()`.
   const stores = () => ({ pages, entries, assets });
   // The site layer: (locale, path) → page or entry, and the content API
-  // (site.getPagesTree for menus, site.getEntries for lists).
-  // Shadows the exported `site` below on purpose: `createPageRenderer`
-  // takes this local value, not the export, so it never re-enters `bound()`.
-  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug });
+  // `q` wraps below. Not exported — the app reads through `q`, which adds
+  // draft awareness and the cache.
+  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug, pages: config.registry.pages ?? [] });
   const renderer = createPageRenderer({
     site,
     sections,
     pages: (config.registry.pages ?? []) as PageRegistration[],
     href,
   });
-  cached = { db, pages, entries, assets, auth, site, renderer };
+  // The read API (spec 2026-09-11): typed by the registry, draft-aware, cached under tags the admin expires.
+  const q = createSmoodlyQueries({ site, collections, shared });
+  cached = { db, pages, entries, assets, auth, site, renderer, q };
   return cached;
 }
 
@@ -80,13 +82,15 @@ export function publicAuth(): AuthConfig {
  * becomes a locale-prefixing lookup. */
 export const href = (path: string, _locale: string) => path;
 
-/** The content API for page views that fetch (the Articles index, an
- * article's related list): `site().getEntries("articles", { locale })`. */
-export const site = (): SmoodlySite => bound().site;
+/** The read API (spec 2026-09-11) for layouts and page views that fetch:
+ * `q().getEntries("articles", { locale, limit: 3 })`, `q().getShared("header",
+ * { locale })`, `q().getPageTree({ locale })`. Typed by the registry, the
+ * live draft in the editor preview, cached under tags the admin expires.
+ * Rename it if `q` is not to your taste — this file is yours. */
+export const q = (): Queries => bound().q;
 
 /** The two route files call these. */
 export const renderSmoodlyPath: Renderer["renderSmoodlyPath"] = (...args) => bound().renderer.renderSmoodlyPath(...args);
 export const smoodlyMetadata: Renderer["smoodlyMetadata"] = (...args) => bound().renderer.smoodlyMetadata(...args);
 export const renderSmoodlyPage: Renderer["renderSmoodlyPage"] = (...args) => bound().renderer.renderSmoodlyPage(...args);
 export const smoodlyPageMetadata: Renderer["smoodlyPageMetadata"] = (...args) => bound().renderer.smoodlyPageMetadata(...args);
-export const getSmoodlyShared: Renderer["getSmoodlyShared"] = (...args) => bound().renderer.getSmoodlyShared(...args);

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

@@ -5,8 +5,7 @@ import { hasLocale, NextIntlClientProvider } from "next-intl";
 import { routing } from "@/i18n/routing";
 import { HeaderView } from "@/components/sections/Header";
 import { FooterView } from "@/components/sections/Footer";
-import { contact, footer, header } from "@/smoodly/shared";
-import { getSmoodlyShared, href } from "@/smoodly/server";
+import { href, q } from "@/smoodly/server";
 import "../globals.css";
 
 // The starter's two faces, as CSS variables globals.css reads.
@@ -18,16 +17,16 @@ 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
-// shared content: fetched here, cached per locale under their tag, null
+// shared 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.
 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([
-    getSmoodlyShared(header, { locale }),
-    getSmoodlyShared(footer, { locale }),
-    getSmoodlyShared(contact, { locale }),
+    q().getShared("header", { locale }),
+    q().getShared("footer", { locale }),
+    q().getShared("contact", { locale }),
   ]);
   const locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
   return (

package/templates/next-intl/app/globals.css

@@ -173,6 +173,10 @@ h3.card__title { font-size: 24px; }
 .breadcrumb { padding-top: 24px; font-size: 14px; color: var(--muted); }
 .breadcrumb a:hover { color: var(--accent); }
 
+.subnav { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 12px; font-size: 14px; }
+.subnav a { color: var(--muted); }
+.subnav a:hover { color: var(--accent); }
+
 .articles-index { padding-bottom: 96px; }
 
 .article { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }

package/templates/next-intl/components/elements/Callout.tsx

@@ -15,7 +15,7 @@ export const calloutSchema = smoodly.schema.element({
     body: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
   },
   styles: {
-    tone: f.select(["info", "success", "warning"]).default("info"),
+    tone: f.select([{ value: "info", label: "Info" }, { value: "success", label: "Success" }, { value: "warning", label: "Warning" }]).default("info"),
   },
   sample: {
     title: "Good to know",

package/templates/next-intl/components/elements/Cta.tsx

@@ -15,7 +15,7 @@ export const ctaSchema = smoodly.schema.element({
     href: f.link(),
   },
   styles: {
-    variant: f.select(["primary", "outline"]).default("primary"),
+    variant: f.select([{ value: "primary", label: "Primary" }, { value: "outline", label: "Outline" }]).default("primary"),
   },
   sample: { heading: "Ready to start?", text: "Sed ut perspiciatis unde omnis iste natus.", label: "Get in touch", href: "/company/about-us" },
 });

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

@@ -2,7 +2,7 @@ import { smoodly, type EntryPageProps } from "smoodly";
 import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
-import { site } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
 import { articlePath, articlesIndexPath, formatDate, readingMinutes, type ArticleFields } from "../articles";
 import { ui } from "../strings";
@@ -16,7 +16,8 @@ import { ui } from "../strings";
 async function ArticleView({ entry }: EntryPageProps) {
   const { locale, t, url } = await ui();
   const a = entry.fields as ArticleFields & { author?: { name: string; role?: string } | null };
-  const related = (await site().getEntries("articles", { locale })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
+  // 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 (
     <>

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

@@ -3,16 +3,16 @@ import { PageHero } from "../sections/PageHero";
 import { ArticleCard } from "../ArticleCard";
 import { articlePath, type ArticleFields } from "../articles";
 import { ui } from "../strings";
-import { site } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 
 // The Articles index: a fixed page whose slugs are the collection's own
 // segments (smoodly/collections.ts), which makes it the collection's
 // index page — the mount in the Pages list opens this page's editor. The
-// editor owns the hero; the grid below is developer JSX that fetches the
-// published articles through the site layer, newest first (the
-// collection's `order`). In the editor canvas the hero is the draft while
-// the grid shows published articles only: the content API is
-// published-only by design.
+// editor owns the hero; the grid below is developer JSX that reads the
+// articles through `q`, newest first (the collection's `order`), cached
+// under the collection's tag. In the editor canvas the site runs in draft
+// mode, so the grid reads the live rows too: an unpublished article shows
+// there as it will (spec 2026-09-11 §2).
 export const articlesSchema = smoodly.schema.page({
   name: "articlesIndex",
   title: "Articles",
@@ -25,7 +25,7 @@ export const articlesSchema = smoodly.schema.page({
 
 async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
   const { locale, url } = await ui();
-  const items = await site().getEntries("articles", { locale });
+  const items = await q().getEntries("articles", { locale });
   return (
     <>
       <Zone of={zones.hero} />

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

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { smoodly, z, Zone, type Props } from "smoodly";
+import { f, smoodly, z, Zone, type Props } from "smoodly";
 import { PageHero } from "../sections/PageHero";
 import { ImageText } from "../sections/ImageText";
 import { Points } from "../sections/Points";
@@ -19,9 +19,14 @@ export const pageSchema = smoodly.schema.page({
     body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
   },
   meta: { seo: true },
+  // A page field (spec 2026-09-10 page fields §7): the parent's view lists
+  // the children that keep this on. Edited on the Settings tab.
+  fields: { showInNavigation: f.boolean().default(true) },
 });
 
 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 (
     <>
       {page.ancestors.length > 0 && (
@@ -34,6 +39,11 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
           {page.title}
         </nav>
       )}
+      {shown.length > 0 && (
+        <nav className="container subnav" aria-label="Pages in this section">
+          {shown.map((c) => <Link key={c.path} href={c.url}>{c.title}</Link>)}
+        </nav>
+      )}
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
     </>

package/templates/next-intl/components/sections/ImageText.tsx

@@ -20,7 +20,7 @@ export const imageTextSchema = smoodly.schema.section({
     link: f.object({ label: f.text(), href: f.link() }).optional(),
   },
   styles: {
-    imageSide: f.select(["left", "right"]).default("left"),
+    imageSide: f.select([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
   },
   sample: {
     heading: "Duis aute irure dolor in reprehenderit",

package/templates/next-intl/components/sections/Points.tsx

@@ -9,7 +9,7 @@ export const pointsSchema = smoodly.schema.section({
   fields: {
     heading: f.text(),
     points: f.list(f.object({
-      icon: f.select(["circle", "square", "diamond"]),
+      icon: f.select([{ value: "circle", label: "Circle" }, { value: "square", label: "Square" }, { value: "diamond", label: "Diamond" }]),
       heading: f.text(),
       text: f.text(),
     })).min(1).max(6),

package/templates/next-intl/package.json

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

package/templates/next-intl/scripts/seed.ts

@@ -103,7 +103,7 @@ async function seedEntry(collection: string, en: Fields, fi?: Fields) {
   return row;
 }
 
-type Tree = { zones: Record<string, Node[]> };
+type Tree = { zones: Record<string, Node[]>; fields?: Record<string, unknown>; meta?: Record<string, unknown> };
 
 /** Create a page (or a folder: `template: null`) in EN with its tree,
  *  publish it, then the FI row with its own tree — a locale's tree is
@@ -251,6 +251,8 @@ const favourites = (heading: string): Node => ({
 });
 
 const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]; link: string; favourites: string }): Tree => ({
+  // The built-in SEO set rides the tree (spec 2026-09-10 page fields §2).
+  meta: { description: "Lorem Co. — consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore." },
   zones: {
     // The locked hero's one node. Pages created in the admin get theirs
     // from the editor (fillLockedZones on load); a seeded tree brings its own.
@@ -299,7 +301,9 @@ await seedPage(
 // both locales with its own slug and title.
 const company = await seedPage({ slug: "company", title: "Company", template: null, fi: { slug: "yritys", title: "Yritys" } });
 
-const aboutTree = (t: { kicker: string; people: string }): Tree => ({
+const aboutTree = (t: { kicker: string; people: string; description: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.description },
   zones: {
     hero: [{
       id: "node-about-hero",
@@ -329,11 +333,32 @@ const aboutTree = (t: { kicker: string; people: string }): Tree => ({
     ],
   },
 });
-await seedPage(
+const about = await seedPage(
   { slug: "about-us", title: "About us", template: "page", parentId: company.id, fi: { slug: "tietoa-meista", title: "Tietoa meistä" } },
-  { en: aboutTree({ kicker: "About us", people: "Our people" }), fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki" }) },
+  {
+    en: aboutTree({ kicker: "About us", people: "Our people", description: "Lorem ipsum dolor sit amet — who we are and what we do." }),
+    fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki", description: "Lorem ipsum dolor sit amet — keitä olemme ja mitä teemme." }),
+  },
+);
+
+// A page under About us, shown in its sub-navigation through the Page
+// shape's `showInNavigation` field (spec 2026-09-10 page fields §7).
+const teamTree = (t: { heading: string; text: string; people: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.text },
+  zones: {
+    hero: [{ id: "node-team-hero", type: "pageHero", fields: { kicker: t.heading, heading: t.heading, text: t.text, image: img.about } }],
+    body: [{ id: "node-team-people", type: "peopleSection", fields: { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] } }],
+  },
+});
+await seedPage(
+  { slug: "team", title: "Team", template: "page", parentId: about.id, fi: { slug: "tiimi", title: "Tiimi" } },
+  {
+    en: teamTree({ heading: "Team", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "The whole team" }),
+    fi: teamTree({ heading: "Tiimi", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "Koko tiimi" }),
+  },
 );
 
 console.log(
-  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us${FI ? " (yritys/tietoa-meista)" : ""}, one article, four people, header, footer, contact and quote — all published.`,
+  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us and its Team page${FI ? " (yritys/tietoa-meista/tiimi)" : ""}, one article, four people, header, footer, contact and quote — all published.`,
 );

package/templates/next-intl/smoodly/server.ts

@@ -4,22 +4,23 @@
 // secret is a service-role key or a cloud write key is invisible here.
 //
 // Lazy on purpose, the site and renderer included: config.ts imports the
-// page shapes, and a page shape may import this file to fetch through
-// the site (components/pages/Articles.tsx). That is a cycle, and the
+// page shapes, and a page shape may import this file to read through
+// `q` (components/pages/Articles.tsx). That is a cycle, and the
 // admin route enters it from config.ts — so nothing here may read the
 // config at module scope.
 import {
   createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseAssetStore, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
 } from "smoodly";
 import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admin/next";
-import { createPageRenderer, type PageRegistration } from "smoodly/next";
+import { createPageRenderer, createSmoodlyQueries, type PageRegistration } from "smoodly/next";
 import type { SupabaseClient } from "@supabase/supabase-js";
 import { getPathname } from "@/i18n/navigation";
 import { collections, config, elements, sections, shared } from "./config";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
+type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof shared>>;
 type Bound = {
-  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer; q: Queries;
 };
 
 let cached: Bound | null = null;
@@ -44,17 +45,18 @@ function bound(): Bound {
   // takes this local closure, not the export, so it never re-enters `bound()`.
   const stores = () => ({ pages, entries, assets });
   // The site layer: (locale, path) → page or entry, and the content API
-  // (site.getPagesTree for menus, site.getEntries for lists).
-  // Shadows the exported `site` below on purpose: `createPageRenderer`
-  // takes this local value, not the export, so it never re-enters `bound()`.
-  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug });
+  // `q` wraps below. Not exported — the app reads through `q`, which adds
+  // draft awareness and the cache.
+  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug, pages: config.registry.pages ?? [] });
   const renderer = createPageRenderer({
     site,
     sections,
     pages: (config.registry.pages ?? []) as PageRegistration[],
     href,
   });
-  cached = { db, pages, entries, assets, auth, site, renderer };
+  // The read API (spec 2026-09-11): typed by the registry, draft-aware, cached under tags the admin expires.
+  const q = createSmoodlyQueries({ site, collections, shared });
+  cached = { db, pages, entries, assets, auth, site, renderer, q };
   return cached;
 }
 
@@ -81,13 +83,15 @@ export function publicAuth(): AuthConfig {
  * becomes getPathname, which adds the locale prefix. */
 export const href = (path: string, locale: string) => getPathname({ locale, href: path });
 
-/** The content API for page views that fetch (the Articles index, an
- * article's related list): `site().getEntries("articles", { locale })`. */
-export const site = (): SmoodlySite => bound().site;
+/** The read API (spec 2026-09-11) for layouts and page views that fetch:
+ * `q().getEntries("articles", { locale, limit: 3 })`, `q().getShared("header",
+ * { locale })`, `q().getPageTree({ locale })`. Typed by the registry, the
+ * live draft in the editor preview, cached under tags the admin expires.
+ * Rename it if `q` is not to your taste — this file is yours. */
+export const q = (): Queries => bound().q;
 
 /** The two route files call these. */
 export const renderSmoodlyPath: Renderer["renderSmoodlyPath"] = (...args) => bound().renderer.renderSmoodlyPath(...args);
 export const smoodlyMetadata: Renderer["smoodlyMetadata"] = (...args) => bound().renderer.smoodlyMetadata(...args);
 export const renderSmoodlyPage: Renderer["renderSmoodlyPage"] = (...args) => bound().renderer.renderSmoodlyPage(...args);
 export const smoodlyPageMetadata: Renderer["smoodlyPageMetadata"] = (...args) => bound().renderer.smoodlyPageMetadata(...args);
-export const getSmoodlyShared: Renderer["getSmoodlyShared"] = (...args) => bound().renderer.getSmoodlyShared(...args);