create-smoodly-app 0.0.12 → 0.0.14

package/templates/next/smoodly/collections.ts

@@ -1,4 +1,5 @@
 import { f, smoodly } from "smoodly";
+import { article } from "./toolsets";
 
 // A person's name is the same in every language; the role is translated.
 // Shared fields live on the entry, .localized() ones on its locale rows
@@ -7,6 +8,7 @@ export const people = smoodly.collection({
   name: "people",
   title: "People",
   titleField: "name",
+  order: "manual",
   fields: {
     name: f.text(),
     role: f.text().localized(),
@@ -29,13 +31,14 @@ export const articles = smoodly.collection({
   versions: true,
   fields: {
     title: f.text().localized(),
-    slug: f.slug({ from: "title" }),
-    excerpt: f.text().localized(),
-    body: f.richtext().localized(),
-    tags: f.list(f.text()).localized(),
     image: f.image({ aspect: "3:2" }),
     date: f.date(),
     author: f.ref(() => people),
+    slug: f.slug({ from: "title" }),
+    excerpt: f.text().localized(),
+    // The article toolset: the default marks and blocks, body images and the elements.
+    body: f.richtext({ toolset: article }).localized(),
+    tags: f.list(f.text()).localized(),
   },
 });
 

package/templates/next/smoodly/config.ts

@@ -2,12 +2,13 @@ import { defineConfig, f } from "smoodly";
 import { collections } from "./collections";
 import { sections } from "./sections";
 import { shared } from "./shared";
+import { elements } from "./elements";
 import { HomePage } from "@/components/pages/Home";
 import { ArticlesPage } from "@/components/pages/Articles";
 import { StandardPage } from "@/components/pages/Page";
 import { ArticlePage } from "@/components/pages/Article";
 
-export { collections, sections, shared };
+export { collections, sections, shared, elements };
 
 // The registry and the plain settings, one file. Runtime-free: nothing
 // here imports a route file or Next, so a script, the CLI's template
@@ -15,6 +16,8 @@ export { collections, sections, shared };
 export const config = defineConfig({
   registry: {
     sections,
+    // Elements (block nodes spec 2026-09-08): what an article body may embed.
+    elements,
     collections,
     shared,
     pages: [HomePage, ArticlesPage, StandardPage, ArticlePage],

package/templates/next/smoodly/elements.ts

@@ -0,0 +1,6 @@
+// The site's element registrations, in one list: the config registers
+// them, toolsets embed them by value, and smoodly/richtext.tsx renders them.
+import { Callout } from "@/components/elements/Callout";
+import { Cta } from "@/components/elements/Cta";
+
+export const elements = [Callout, Cta];

package/templates/next/smoodly/richtext.tsx

@@ -0,0 +1,7 @@
+// The site's richtext renderer, bound once: it knows the elements a body
+// may embed and renders body images through <SmoodlyImage>. Sections and
+// entry pages import RichText from here, never from the package root.
+import { createRichText } from "smoodly/richtext";
+import { elements } from "./elements";
+
+export const RichText = createRichText({ elements, sizes: "(min-width: 900px) 720px, 100vw" });

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, sections, shared } from "./config";
+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;
@@ -30,9 +31,9 @@ function bound(): Bound {
   // ONE path index for both stores: pages and entries share the URL space.
   const paths = new SupabasePathIndex(db);
   const locales = config.locales;
-  const entries = new SupabaseEntryStore(db, collections, { paths, locales, shared });
+  const entries = new SupabaseEntryStore(db, collections, { paths, locales, shared, elements });
   const pages = new SupabasePageStore(db, {
-    sections, entries, paths, locales,
+    sections, elements, entries, paths, locales,
     homePageSlug: config.homePageSlug,
     tree: config.pages?.tree,
   });
@@ -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, 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/smoodly/toolsets.ts

@@ -0,0 +1,16 @@
+// Toolsets are values, not registrations: a richtext field imports one.
+// `article` is the long-form set — the default marks and blocks plus body
+// images and the two elements. Elements are embedded by value; the
+// config must also register them (defineConfig checks). Relative imports
+// on purpose: collections.ts pulls this file into create-smoodly-app's
+// template build, which runs outside the app where the `@/` alias has
+// no mapping.
+import { smoodly } from "smoodly";
+import { Callout } from "../components/elements/Callout";
+import { Cta } from "../components/elements/Cta";
+
+export const article = smoodly.toolset({
+  marks: ["bold", "italic", "link"],
+  nodes: ["h2", "h3", "h4", "bulletList", "orderedList", "blockquote", "image"],
+  elements: [Callout, Cta],
+});

package/templates/next/supabase/migrations/00000000000000_smoodly.sql

@@ -521,12 +521,12 @@ select
   e."created_at",
   l."updated_at",
   v."fields"->>'title' as "title",
-  v."fields"->>'excerpt' as "excerpt",
-  v."fields"->'body' as "body",
-  v."fields"->'tags' as "tags",
   v."fields"->'image' as "image",
   (v."fields"->>'date')::timestamptz as "date",
-  v."fields"->>'author' as "author"
+  v."fields"->>'author' as "author",
+  v."fields"->>'excerpt' as "excerpt",
+  v."fields"->'body' as "body",
+  v."fields"->'tags' as "tags"
 from "entries" e
 join "entry_locales" l on l."entry_id" = e."id"
 join "entry_versions" v on v."id" = l."published_version_id"

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

@@ -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-intl/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-intl/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-intl/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-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/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-intl/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-intl/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-intl/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-intl/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-intl/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>
   );