create-smoodly-app 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smoodly-app",
-  "version": "0.0.12",
+  "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

@@ -63,6 +63,22 @@ address { font-style: normal; }
 .prose--lead { gap: 24px; font-size: 18px; line-height: 1.7; color: var(--body); }
 .prose--lead > p:first-child { font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--ink); }
 
+/* ---------- richtext block nodes: images, callout, cta ---------- */
+.prose figure { margin: 8px 0; }
+.prose figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
+.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
+.prose .callout { margin: 8px 0; padding: 20px 24px; border-radius: var(--radius); border-left: 3px solid var(--accent); background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
+.prose .callout[data-tone="success"] { border-left-color: #3a8f5c; }
+.prose .callout[data-tone="warning"] { border-left-color: #c9962b; background: #fff8e8; }
+.prose .callout__title { color: var(--ink); font-size: 15px; letter-spacing: 0.02em; }
+.prose .callout__body { display: flex; flex-direction: column; gap: 8px; }
+.prose .cta { margin: 16px 0; padding: 28px 32px; border-radius: var(--radius); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
+.prose .cta[data-variant="outline"] { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
+.prose .cta__heading { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; display: block; }
+.prose .cta__text { margin: 6px 0 0; font-size: 15px; color: inherit; opacity: 0.8; }
+.prose .cta .button { background: var(--paper); color: var(--ink); flex: none; }
+.prose .cta[data-variant="outline"] .button { background: var(--ink); color: var(--paper); }
+
 /* ---------- section styles: the config's spacing and tone ---------- */
 
 /* Every section in the page body gets the medium spacing by element,
@@ -157,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

@@ -0,0 +1,35 @@
+import { f, RichText, smoodly, type Props } from "smoodly";
+
+// An Element: a small registered block editors insert inside an article
+// body (the `richtext` context). Its body is richtext too — marks only —
+// rendered by the package's pure RichText (never the project's bound one:
+// smoodly/richtext.tsx imports this file, and an import back would cycle).
+export const calloutSchema = smoodly.schema.element({
+  name: "callout",
+  title: "Callout",
+  icon: "!",
+  description: "A highlighted note inside the text.",
+  contexts: ["richtext"],
+  fields: {
+    title: f.text().max(80),
+    body: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
+  },
+  styles: {
+    tone: f.select([{ value: "info", label: "Info" }, { value: "success", label: "Success" }, { value: "warning", label: "Warning" }]).default("info"),
+  },
+  sample: {
+    title: "Good to know",
+    body: { type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }] }] },
+  },
+});
+
+function CalloutView({ title, body, styles }: Props<typeof calloutSchema>) {
+  return (
+    <aside className="callout" data-tone={styles.tone}>
+      <strong className="callout__title">{title}</strong>
+      <div className="callout__body"><RichText doc={body} /></div>
+    </aside>
+  );
+}
+
+export const Callout = smoodly.element(calloutSchema, CalloutView);

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

@@ -0,0 +1,35 @@
+import { f, smoodly, type Props } from "smoodly";
+
+// A call to action inside an article body: heading, a line of text and
+// one button. `variant` is a style — never translated.
+export const ctaSchema = smoodly.schema.element({
+  name: "cta",
+  title: "Call to action",
+  icon: "→",
+  description: "A heading, a line and a button.",
+  contexts: ["richtext"],
+  fields: {
+    heading: f.text().max(80),
+    text: f.text().max(200).optional(),
+    label: f.text().max(40),
+    href: f.link(),
+  },
+  styles: {
+    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" },
+});
+
+function CtaView({ heading, text, label, href, styles }: Props<typeof ctaSchema>) {
+  return (
+    <div className="cta" data-variant={styles.variant}>
+      <div className="cta__copy">
+        <strong className="cta__heading">{heading}</strong>
+        {text && <p className="cta__text">{text}</p>}
+      </div>
+      <a className={styles.variant === "outline" ? "button button--outline" : "button"} href={href}>{label}</a>
+    </div>
+  );
+}
+
+export const Cta = smoodly.element(ctaSchema, CtaView);

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

@@ -1,7 +1,8 @@
-import { RichText, smoodly, type EntryPageProps } from "smoodly";
+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";
@@ -15,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/FavouriteArticles.tsx

@@ -19,6 +19,8 @@ export const favouriteArticlesSchema = smoodly.schema.section({
   sample: { heading: "From the journal", items: [] },
 });
 
+const m = smoodly.marks(favouriteArticlesSchema);
+
 // async: the cards format dates in the request locale and link through
 // the locale's article segment, both from the strings seam. The canvas
 // is the site's own draft route in an iframe, so an async section
@@ -28,8 +30,8 @@ async function FavouriteArticlesView({ heading, items, styles }: Props<typeof fa
   return (
     <smoodly.Section styles={styles} className="favourites">
       <div className="container">
-        <h2 className="h2">{heading}</h2>
-        <div className="card-grid">
+        <h2 className="h2" {...m.field("heading")}>{heading}</h2>
+        <div className="card-grid" {...m.field("items")}>
           {(items ?? []).filter(Boolean).map((a, i) => (
             <ArticleCard key={i} article={a} url={url(articlePath(a.slug, locale))} locale={locale} />
           ))}

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

@@ -1,4 +1,4 @@
-import { f, smoodly, type Props } from "smoodly";
+import { f, smoodly, type Props, type Scope } from "smoodly";
 
 // The site footer — a VISUAL shared item (smoodly/shared.ts): one row,
 // edited under Shared content, rendered by the layout. Three link columns
@@ -33,12 +33,17 @@ export const footerSchema = smoodly.schema.section({
 export type ContactFields = { email: string; phone?: string; address: string };
 type Column = { title: string; links: { label: string; href: string }[] };
 
-function FooterColumn({ column }: { column: Column | undefined }) {
+const m = smoodly.marks(footerSchema);
+
+function FooterColumn({ column, scope }: { column: Column | undefined; scope: Scope<Column> }) {
   if (!column) return null;
   return (
-    <div className="site-footer__column">
-      <span className="site-footer__title">{column.title}</span>
-      {(column.links ?? []).map((l, i) => <a key={i} href={l.href}>{l.label}</a>)}
+    <div className="site-footer__column" {...scope.attrs}>
+      <span className="site-footer__title" {...scope.field("title")}>{column.title}</span>
+      {(column.links ?? []).map((l, i) => {
+        const link = scope.item("links", i);
+        return <a key={i} href={l.href} {...link.attrs} {...link.field("label")}>{l.label}</a>;
+      })}
     </div>
   );
 }
@@ -48,7 +53,7 @@ export function FooterView({ tagline, company, legal, social, copyright, contact
     <smoodly.Section as="footer" styles={styles} className="site-footer">
       <div className="container site-footer__grid">
         <div className="site-footer__about">
-          <p className="site-footer__tagline">{tagline}</p>
+          <p className="site-footer__tagline" {...m.field("tagline")}>{tagline}</p>
           {contact && (
             <address className="site-footer__contact">
               <a href={`mailto:${contact.email}`}>{contact.email}</a>
@@ -57,11 +62,11 @@ export function FooterView({ tagline, company, legal, social, copyright, contact
             </address>
           )}
         </div>
-        <FooterColumn column={company} />
-        <FooterColumn column={legal} />
-        <FooterColumn column={social} />
+        <FooterColumn column={company} scope={m.object("company")} />
+        <FooterColumn column={legal} scope={m.object("legal")} />
+        <FooterColumn column={social} scope={m.object("social")} />
       </div>
-      <div className="container site-footer__copyright">{copyright}</div>
+      <div className="container site-footer__copyright" {...m.field("copyright")}>{copyright}</div>
     </smoodly.Section>
   );
 }

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

@@ -20,14 +20,19 @@ export const headerSchema = smoodly.schema.section({
 
 export type LocaleLink = { code: string; url: string; current: boolean };
 
+const m = smoodly.marks(headerSchema);
+
 export function HeaderView({ brand, nav, locales, styles }: Props<typeof headerSchema> & { locales?: LocaleLink[] }) {
   const home = locales?.find((l) => l.current)?.url ?? "/";
   return (
     <smoodly.Section as="header" styles={styles} className="site-header">
       <div className="container site-header__bar">
-        <a className="site-header__brand" href={home}>{brand}</a>
+        <a className="site-header__brand" href={home} {...m.field("brand")}>{brand}</a>
         <nav className="site-header__nav">
-          {(nav ?? []).map((item, i) => <a key={i} href={item.href}>{item.label}</a>)}
+          {(nav ?? []).map((item, i) => {
+            const link = m.item("nav", i);
+            return <a key={i} href={item.href} {...link.attrs} {...link.field("label")}>{item.label}</a>;
+          })}
         </nav>
         {locales && locales.length > 1 && (
           <nav className="site-header__locales" aria-label="Language">

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

@@ -24,23 +24,29 @@ export const heroSchema = smoodly.schema.section({
   },
 });
 
+const m = smoodly.marks(heroSchema);
+
 function HeroView({ kicker, heading, text, buttons, image, styles }: Props<typeof heroSchema>) {
   return (
     <smoodly.Section styles={styles} className="hero">
       <div className="container hero__grid">
         <div className="hero__copy">
-          {kicker && <p className="kicker">{kicker}</p>}
-          <h1 className="hero__heading">{heading}</h1>
-          <p className="hero__text">{text}</p>
+          {kicker && <p className="kicker" {...m.field("kicker")}>{kicker}</p>}
+          <h1 className="hero__heading" {...m.field("heading")}>{heading}</h1>
+          <p className="hero__text" {...m.field("text")}>{text}</p>
           {buttons?.length > 0 && (
             <div className="hero__buttons">
-              {buttons.map((b, i) => (
-                <a key={i} className={i === 0 ? "button" : "button button--outline"} href={b.href}>{b.label}</a>
-              ))}
+              {buttons.map((b, i) => {
+                const button = m.item("buttons", i);
+                return (
+                  <a key={i} className={i === 0 ? "button" : "button button--outline"} href={b.href}
+                    {...button.attrs} {...button.field("label")}>{b.label}</a>
+                );
+              })}
             </div>
           )}
         </div>
-        {image && <SmoodlyImage image={image} className="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority />}
+        {image && <SmoodlyImage image={image} className="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority {...m.field("image")} />}
       </div>
     </smoodly.Section>
   );

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

@@ -1,4 +1,5 @@
-import { f, RichText, smoodly, type Props } from "smoodly";
+import { f, smoodly, type Props } from "smoodly";
+import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
 
 // A photo beside a heading and richtext, the photo on either side (a
@@ -19,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",
@@ -30,11 +31,14 @@ export const imageTextSchema = smoodly.schema.section({
   },
 });
 
+const m = smoodly.marks(imageTextSchema);
+
 function ImageTextView({ image, heading, text, link, styles }: Props<typeof imageTextSchema>) {
+  const linkMarks = m.object("link");
   const body = (
     <>
-      <div className="prose"><RichText doc={text} /></div>
-      {link?.href && <a className="link-accent" href={link.href}>{link.label}</a>}
+      <div className="prose" {...m.field("text")}><RichText doc={text} /></div>
+      {link?.href && <a className="link-accent" href={link.href} {...linkMarks.attrs} {...linkMarks.field("label")}>{link.label}</a>}
     </>
   );
   return (
@@ -42,15 +46,15 @@ function ImageTextView({ image, heading, text, link, styles }: Props<typeof imag
       <div className="container image-text__grid">
         {image ? (
           <>
-            <SmoodlyImage image={image} className="image-text__image" sizes="(min-width: 900px) 50vw, 100vw" />
+            <SmoodlyImage image={image} className="image-text__image" sizes="(min-width: 900px) 50vw, 100vw" {...m.field("image")} />
             <div className="image-text__copy">
-              <h2 className="h2">{heading}</h2>
+              <h2 className="h2" {...m.field("heading")}>{heading}</h2>
               {body}
             </div>
           </>
         ) : (
           <>
-            <h2 className="h2">{heading}</h2>
+            <h2 className="h2" {...m.field("heading")}>{heading}</h2>
             <div className="image-text__copy">{body}</div>
           </>
         )}

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

@@ -21,16 +21,18 @@ export const pageHeroSchema = smoodly.schema.section({
   },
 });
 
+const m = smoodly.marks(pageHeroSchema);
+
 function PageHeroView({ kicker, heading, text, image, styles }: Props<typeof pageHeroSchema>) {
   return (
     <smoodly.Section styles={styles} className="page-hero">
       <div className="container page-hero__inner">
         <div className="page-hero__copy">
-          {kicker && <p className="kicker">{kicker}</p>}
-          <h1 className="page-hero__heading">{heading}</h1>
-          <p className="page-hero__text">{text}</p>
+          {kicker && <p className="kicker" {...m.field("kicker")}>{kicker}</p>}
+          <h1 className="page-hero__heading" {...m.field("heading")}>{heading}</h1>
+          <p className="page-hero__text" {...m.field("text")}>{text}</p>
         </div>
-        {image && <SmoodlyImage image={image} className="page-hero__image" sizes="100vw" priority />}
+        {image && <SmoodlyImage image={image} className="page-hero__image" sizes="100vw" priority {...m.field("image")} />}
       </div>
     </smoodly.Section>
   );

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

@@ -14,12 +14,14 @@ export const peopleSchema = smoodly.schema.section({
   sample: { heading: "Our people", people: [] },
 });
 
+const m = smoodly.marks(peopleSchema);
+
 function PeopleView({ heading, people: persons, styles }: Props<typeof peopleSchema>) {
   return (
     <smoodly.Section styles={styles} className="people">
       <div className="container">
-        <h2 className="h2">{heading}</h2>
-        <div className="people__grid">
+        <h2 className="h2" {...m.field("heading")}>{heading}</h2>
+        <div className="people__grid" {...m.field("people")}>
           {(persons ?? []).filter(Boolean).map((person, i) => (
             <div key={i} className="person">
               <span className="person__mark" aria-hidden="true">{person.name?.charAt(0)}</span>

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),
@@ -26,21 +26,26 @@ const ICONS = {
   diamond: <polygon points="20,2 38,20 20,38 2,20" />,
 };
 
+const m = smoodly.marks(pointsSchema);
+
 function PointsView({ heading, points, styles }: Props<typeof pointsSchema>) {
   return (
     <smoodly.Section styles={styles} className="points">
       <div className="container">
-        <h2 className="h2">{heading}</h2>
+        <h2 className="h2" {...m.field("heading")}>{heading}</h2>
         <div className="points__grid">
-          {(points ?? []).map((point, i) => (
-            <div key={i} className="point">
-              <svg className="point__icon" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.5">
-                {ICONS[point.icon] ?? ICONS.circle}
-              </svg>
-              <h3 className="point__heading">{point.heading}</h3>
-              <p className="point__text">{point.text}</p>
-            </div>
-          ))}
+          {(points ?? []).map((point, i) => {
+            const p = m.item("points", i);
+            return (
+              <div key={i} className="point" {...p.attrs}>
+                <svg className="point__icon" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.5" {...p.field("icon")}>
+                  {ICONS[point.icon] ?? ICONS.circle}
+                </svg>
+                <h3 className="point__heading" {...p.field("heading")}>{point.heading}</h3>
+                <p className="point__text" {...p.field("text")}>{point.text}</p>
+              </div>
+            );
+          })}
         </div>
       </div>
     </smoodly.Section>

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

@@ -19,12 +19,14 @@ export const quoteSchema = smoodly.schema.section({
   },
 });
 
+const m = smoodly.marks(quoteSchema);
+
 function QuoteView({ text, attribution, styles }: Props<typeof quoteSchema>) {
   return (
     <smoodly.Section styles={styles} className="quote">
       <div className="quote__inner">
-        <blockquote className="quote__text">“{text}”</blockquote>
-        <p className="quote__attribution">{attribution}</p>
+        <blockquote className="quote__text">“<span {...m.field("text")}>{text}</span>”</blockquote>
+        <p className="quote__attribution" {...m.field("attribution")}>{attribution}</p>
       </div>
     </smoodly.Section>
   );

package/templates/next/package.json

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

package/templates/next/scripts/seed.ts

@@ -45,6 +45,12 @@ const p = (s: string): Node => ({ type: "paragraph", content: text(s) });
 const h2 = (s: string): Node => ({ type: "heading", attrs: { level: 2 }, content: text(s) });
 const quoteBlock = (s: string): Node => ({ type: "blockquote", content: [p(s)] });
 const bullets = (...items: string[]): Node => ({ type: "bulletList", content: items.map((s) => ({ type: "listItem", content: [p(s)] })) });
+// Block nodes (spec 2026-09-08): a library image, and the starter's two elements.
+const imageBlock = (image: { asset: string }, caption: string): Node => ({ type: "image", attrs: { image, caption } });
+const callout = (title: string, text: string, tone: "info" | "success" | "warning" = "info"): Node =>
+  ({ type: "element", attrs: { name: "callout", fields: { title, body: doc(p(text)) }, styles: { tone } } });
+const cta = (heading: string, text: string, label: string, href: string): Node =>
+  ({ type: "element", attrs: { name: "cta", fields: { heading, text, label, href }, styles: { variant: "primary" } } });
 const doc = (...content: Node[]) => ({ type: "doc", content });
 
 // The starter's photos become assets: each file is uploaded once through
@@ -97,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
@@ -139,12 +145,15 @@ const body = doc(
   p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
   h2("Sed ut perspiciatis unde omnis"),
   p("Iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."),
+  imageBlock(img.home2, "Lorem ipsum dolor sit amet."),
   quoteBlock("Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."),
+  callout("Good to know", "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."),
   p("Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."),
   h2("Quis autem vel eum iure"),
   p("Reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur."),
   bullets("At vero eos et accusamus et iusto odio", "Dignissimos ducimus qui blanditiis praesentium", "Voluptatum deleniti atque corrupti quos dolores"),
   p("Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus."),
+  cta("Ready to talk?", "Sed ut perspiciatis unde omnis iste natus error sit voluptatem.", "Get in touch", paths(EN).about),
 );
 
 // Versioned (`versions: true` on the collection): every save below is a
@@ -242,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.
@@ -290,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",
@@ -320,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.`,
 );