create-smoodly-app 0.0.12 → 0.0.13

package/package.json

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

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(["info", "success", "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(["primary", "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,4 +1,5 @@
-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";

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
@@ -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

@@ -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.13"
   },
   "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
@@ -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

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

@@ -14,7 +14,7 @@ import {
 import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admin/next";
 import { createPageRenderer, 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 Bound = {
@@ -30,9 +30,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,
   });
@@ -46,7 +46,7 @@ function bound(): Bound {
   // (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 });
+  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug });
   const renderer = createPageRenderer({
     site,
     sections,

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/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,

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(["info", "success", "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(["primary", "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,4 +1,5 @@
-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";

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

package/templates/next-intl/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-intl/components/sections/Points.tsx

@@ -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-intl/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-intl/package.json

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

package/templates/next-intl/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
@@ -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

package/templates/next-intl/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-intl/smoodly/config.ts

@@ -3,12 +3,13 @@ import { routing } from "@/i18n/routing";
 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
@@ -19,6 +20,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-intl/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-intl/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-intl/smoodly/server.ts

@@ -15,7 +15,7 @@ import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admi
 import { createPageRenderer, type PageRegistration } from "smoodly/next";
 import type { SupabaseClient } from "@supabase/supabase-js";
 import { getPathname } from "@/i18n/navigation";
-import { collections, config, sections, shared } from "./config";
+import { collections, config, elements, sections, shared } from "./config";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
 type Bound = {
@@ -31,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,
   });
@@ -47,7 +47,7 @@ function bound(): Bound {
   // (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 });
+  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug });
   const renderer = createPageRenderer({
     site,
     sections,

package/templates/next-intl/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-intl/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"