create-smoodly-app 0.0.45 → 0.0.47

package/templates/lorem/README.md

@@ -10,15 +10,15 @@ for an agent (or a person) building the site.
 
 - `app/(site)/page.tsx` — the home page: one line calling renderSmoodlyPath([]).
 - `app/(site)/[...path]/page.tsx` — every other page and every collection entry, at any depth.
-- `app/(site)/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the footer from global content; the admin has its own under `app/(smoodly)/admin/`.
+- `app/(site)/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the footer from global content. The admin is one route, `app/(smoodly)/admin/[[...segments]]/route.ts`, and takes no layout.
 - `components/pages/` — the page shapes and the entry page: `Home` (locked hero, freeform body), `Articles` (a fixed page at the collection's path — its index — with a code-fetched grid), `Page` (open; About lives here), `Article` (the entry page), `News` and `NewsPost` (a collection at the nested address `company/news`, its index and entry page).
 - `components/PageFrame.tsx` — the header and `<main>` every page view renders (a layout cannot know which page is on screen); with more than one locale, the language links from the page's `locales` map — the same page in the other language, or its home when there is no translation.
-- `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the global items. Add one, list it in `smoodly/sections.ts`.
+- `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the global items. Each is two files: `Name.schema.ts` (the schema) and `Name.tsx` (the component). Add one, list its schema in `smoodly/sections.ts` and its component in `smoodly/views.ts`.
 - `components/strings.ts`, `messages/` — the site's own UI strings and the request locale, one seam.
 - `public/images/` — the starter's photos; image fields hold URLs like `/images/hero_image.jpg`.
 - `scripts/seed.ts` — the starter content, written through the content API (`content()`). `npm run seed` is idempotent.
 - `smoodly/collections.ts` — structured content (people, articles, news). Add a collection, run `npx smoodly migrate`, apply the file it writes.
-- `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts`, `sections.ts`, `server.ts` (site layer, renderer, the content API `content()`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount).
+- `smoodly/` — the wiring: `config.ts` (the registry of schemas and the settings; it imports no component), `collections.ts`, `sections.ts` and `elements.ts` (the schemas the config registers), `views.ts` (the components that render them), `server.ts` (site layer, renderer, the content API `content()`).
 - `.env.local` — `SMOODLY_URL`, `SMOODLY_SECRET_KEY`, `SMOODLY_PUBLISHABLE_KEY`.
 
 ## What is in the starter

package/templates/lorem/app/(smoodly)/admin/[[...segments]]/route.ts

@@ -0,0 +1,8 @@
+// The admin: its page, the package's files and the operations endpoint, all from this one route. The
+// admin is prebuilt in the `smoodly` package; nothing of it is compiled into the site. The folder name
+// must match `admin.path` in smoodly/config.ts.
+import { createAdminRoute } from "smoodly/next";
+import { config } from "@/smoodly/config";
+import { adminDeps, presence, publicAuth } from "@/smoodly/server";
+
+export const { GET, POST } = createAdminRoute(() => ({ config, ...adminDeps(), signIn: publicAuth(), presence }));

package/templates/lorem/components/elements/Callout.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly } 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 (a schema file imports no view:
+// the view 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"] }) }),
+  },
+  settings: {
+    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." }] }] },
+  },
+});

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

@@ -1,27 +1,5 @@
-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"] }) }),
-  },
-  settings: {
-    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." }] }] },
-  },
-});
+import { RichText, smoodly, type Props } from "smoodly/react";
+import { calloutSchema } from "./Callout.schema";
 
 function CalloutView({ title, body, settings }: Props<typeof calloutSchema>) {
   return (

package/templates/lorem/components/elements/Cta.schema.ts

@@ -0,0 +1,21 @@
+import { f, smoodly } 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(),
+  },
+  settings: {
+    variant: f.select([{ value: "primary", label: "Primary" }, { value: "outline", label: "Outline" }]).default("primary"),
+  },
+  sample: { heading: "Ready to start?", text: "Sed ut perspiciatis unde omnis iste natus.", label: "Get in touch", href: "/company/about-us" },
+});

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

@@ -1,24 +1,5 @@
-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(),
-  },
-  settings: {
-    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" },
-});
+import { smoodly, type Props } from "smoodly/react";
+import { ctaSchema } from "./Cta.schema";
 
 function CtaView({ heading, text, label, href, settings }: Props<typeof ctaSchema>) {
   return (

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

@@ -1,4 +1,4 @@
-import { smoodly } from "smoodly";
+import { smoodly } from "smoodly/react";
 import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";

package/templates/lorem/components/pages/Articles.schema.ts

@@ -0,0 +1,20 @@
+import { smoodly, z } from "smoodly";
+import { pageHeroSchema } from "../sections/PageHero.schema";
+
+// 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 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",
+  slug: "posts",
+  zones: {
+    hero: z.locked(pageHeroSchema),
+  },
+  seo: true,
+});

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

@@ -1,27 +1,9 @@
-import { smoodly, z, Zone, type Props } from "smoodly";
-import { PageHero } from "../sections/PageHero";
+import { smoodly, Zone, type Props } from "smoodly/react";
 import { ArticleCard } from "../ArticleCard";
 import { PageFrame } from "../PageFrame";
 import { ui } from "../strings";
 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 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",
-  slug: "posts",
-  zones: {
-    hero: z.locked(PageHero),
-  },
-  seo: true,
-});
+import { articlesSchema } from "./Articles.schema";
 
 async function ArticlesView({ zones, page }: Props<typeof articlesSchema>) {
   const { locale, url } = await ui();

package/templates/lorem/components/pages/Home.schema.ts

@@ -0,0 +1,26 @@
+import { smoodly, z } from "smoodly";
+import { heroSchema } from "../sections/Hero.schema";
+import { imageTextSchema } from "../sections/ImageText.schema";
+import { pointsSchema } from "../sections/Points.schema";
+import { favouriteArticlesSchema } from "../sections/FavouriteArticles.schema";
+import { peopleSchema } from "../sections/People.schema";
+import { quoteSchema } from "../sections/Quote.schema";
+
+// A page type: zones declared here, placed by the page type's view (DESIGN.md §3).
+// `slug` makes it fixed — one record the editor can neither delete nor
+// duplicate — and the config's homePageSlug maps that record to "/".
+// The hero is locked: fields only, never added, moved or removed. The
+// body is freeform over five sections. Quote is among them because the
+// picker offers a global item only where the zone allows its section: an
+// editor may drop a one-off quote, or place the global one from the
+// picker's Global group.
+export const homeSchema = smoodly.schema.page({
+  name: "home",
+  title: "Home",
+  slug: "home",
+  zones: {
+    hero: z.locked(heroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  seo: true,
+});

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

@@ -1,30 +1,6 @@
-import { smoodly, z, Zone, type Props } from "smoodly";
-import { Hero } from "../sections/Hero";
-import { ImageText } from "../sections/ImageText";
-import { Points } from "../sections/Points";
-import { FavouriteArticles } from "../sections/FavouriteArticles";
-import { People } from "../sections/People";
-import { Quote } from "../sections/Quote";
+import { smoodly, Zone, type Props } from "smoodly/react";
 import { PageFrame } from "../PageFrame";
-
-// A page shape: zones declared, <Zone /> placed, one file (DESIGN.md §3).
-// `slug` makes it fixed — one record the editor can neither delete nor
-// duplicate — and the config's homePageSlug maps that record to "/".
-// The hero is locked: fields only, never added, moved or removed. The
-// body is freeform over five sections. Quote is among them because the
-// picker offers a global item only where the zone allows its section: an
-// editor may drop a one-off quote, or place the global one from the
-// picker's Global group.
-export const homeSchema = smoodly.schema.page({
-  name: "home",
-  title: "Home",
-  slug: "home",
-  zones: {
-    hero: z.locked(Hero),
-    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote], custom: true }),
-  },
-  seo: true,
-});
+import { homeSchema } from "./Home.schema";
 
 function HomeView({ zones, page }: Props<typeof homeSchema>) {
   return (

package/templates/lorem/components/pages/News.schema.ts

@@ -0,0 +1,17 @@
+import { smoodly, z } from "smoodly";
+import { pageHeroSchema } from "../sections/PageHero.schema";
+
+// The News index: a fixed page on the news collection's own nested
+// address (smoodly/collections.ts), so it is the collection's index page.
+// Code owns /company/news whole: the Company page above it is an
+// editor's, and renaming it leaves the news where it is. The editor owns
+// the hero; the list below reads the posts through `q`, newest first.
+export const newsSchema = smoodly.schema.page({
+  name: "newsIndex",
+  title: "News",
+  slug: "company/news",
+  zones: {
+    hero: z.locked(pageHeroSchema),
+  },
+  seo: true,
+});

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

@@ -1,24 +1,9 @@
-import { smoodly, z, Zone, type Props } from "smoodly";
-import { PageHero } from "../sections/PageHero";
+import { smoodly, Zone, type Props } from "smoodly/react";
 import { PageFrame } from "../PageFrame";
 import { formatDate } from "../articles";
 import { ui } from "../strings";
 import { q } from "@/smoodly/server";
-
-// The News index: a fixed page on the news collection's own nested
-// address (smoodly/collections.ts), so it is the collection's index page.
-// Code owns /company/news whole: the Company page above it is an
-// editor's, and renaming it leaves the news where it is. The editor owns
-// the hero; the list below reads the posts through `q`, newest first.
-export const newsSchema = smoodly.schema.page({
-  name: "newsIndex",
-  title: "News",
-  slug: "company/news",
-  zones: {
-    hero: z.locked(PageHero),
-  },
-  seo: true,
-});
+import { newsSchema } from "./News.schema";
 
 async function NewsView({ zones, page }: Props<typeof newsSchema>) {
   const { locale, url } = await ui();

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

@@ -1,4 +1,4 @@
-import { smoodly } from "smoodly";
+import { smoodly } from "smoodly/react";
 import { RichText } from "@/smoodly/richtext";
 import { news } from "@/smoodly/collections";
 import { PageFrame } from "../PageFrame";

package/templates/lorem/components/pages/Page.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly, z } from "smoodly";
+import { pageHeroSchema } from "../sections/PageHero.schema";
+import { imageTextSchema } from "../sections/ImageText.schema";
+import { pointsSchema } from "../sections/Points.schema";
+import { favouriteArticlesSchema } from "../sections/FavouriteArticles.schema";
+import { peopleSchema } from "../sections/People.schema";
+import { quoteSchema } from "../sections/Quote.schema";
+
+// Open registration: editors create as many of these as they like, at
+// any depth the config allows. `page` is where this one sits in the tree.
+// Its locked hero is the page hero, not the home one: each shape locks
+// its own.
+export const pageSchema = smoodly.schema.page({
+  name: "page",
+  title: "Page",
+  zones: {
+    hero: z.locked(pageHeroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  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) },
+});

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

@@ -1,29 +1,7 @@
 import Link from "next/link";
-import { f, smoodly, z, Zone, type Props } from "smoodly";
-import { PageHero } from "../sections/PageHero";
-import { ImageText } from "../sections/ImageText";
-import { Points } from "../sections/Points";
-import { FavouriteArticles } from "../sections/FavouriteArticles";
-import { People } from "../sections/People";
-import { Quote } from "../sections/Quote";
+import { smoodly, Zone, type Props } from "smoodly/react";
 import { PageFrame } from "../PageFrame";
-
-// Open registration: editors create as many of these as they like, at
-// any depth the config allows. `page` is where this one sits in the tree.
-// Its locked hero is the page hero, not the home one: each shape locks
-// its own.
-export const pageSchema = smoodly.schema.page({
-  name: "page",
-  title: "Page",
-  zones: {
-    hero: z.locked(PageHero),
-    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote], custom: true }),
-  },
-  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) },
-});
+import { pageSchema } from "./Page.schema";
 
 function PageView({ zones, page }: Props<typeof pageSchema>) {
   // Sub-navigation: the published children that opted in through their page field.

package/templates/lorem/components/sections/FavouriteArticles.schema.ts

@@ -0,0 +1,17 @@
+import { f, smoodly } from "smoodly";
+import { articles } from "@/smoodly/collections";
+
+// Articles an editor picks by hand (refList), as cards. The resolve pass
+// hydrates each ref before render, so the view gets article fields, not
+// ids; an article unpublished after this page went live resolves to
+// null and is skipped.
+export const favouriteArticlesSchema = smoodly.schema.section({
+  name: "favouriteArticles",
+  title: "Favourite articles",
+  description: "Articles picked by hand, as cards.",
+  fields: {
+    heading: f.text(),
+    items: f.refList(() => articles).max(6),
+  },
+  sample: { heading: "From the journal", items: [] },
+});

package/templates/lorem/components/sections/FavouriteArticles.tsx

@@ -1,22 +1,7 @@
-import { f, smoodly, type Props } from "smoodly";
-import { articles } from "@/smoodly/collections";
+import { smoodly, type Props } from "smoodly/react";
 import { ArticleCard } from "@/components/ArticleCard";
 import { ui } from "@/components/strings";
-
-// Articles an editor picks by hand (refList), as cards. The resolve pass
-// hydrates each ref before render, so the view gets article fields, not
-// ids; an article unpublished after this page went live resolves to
-// null and is skipped.
-export const favouriteArticlesSchema = smoodly.schema.section({
-  name: "favouriteArticles",
-  title: "Favourite articles",
-  description: "Articles picked by hand, as cards.",
-  fields: {
-    heading: f.text(),
-    items: f.refList(() => articles).max(6),
-  },
-  sample: { heading: "From the journal", items: [] },
-});
+import { favouriteArticlesSchema } from "./FavouriteArticles.schema";
 
 const m = smoodly.marks(favouriteArticlesSchema);
 

package/templates/lorem/components/sections/Footer.schema.ts

@@ -0,0 +1,31 @@
+import { f, smoodly } from "smoodly";
+
+// The site footer — a VISUAL global item (smoodly/globals.ts): one row,
+// edited under Global content, rendered by the layout. Three link columns
+// as top-level objects, each localized as a whole (an object holding a
+// list — one level, which the list field allows; a list of columns each
+// holding a list would be a nested list, which it refuses).
+const column = () =>
+  f.object({ title: f.text(), links: f.list(f.object({ label: f.text(), href: f.link() })) }).localized();
+
+export const footerSchema = smoodly.schema.section({
+  name: "footer",
+  title: "Footer",
+  description: "The site footer: tagline, three link columns, copyright.",
+  fields: {
+    tagline: f.text().localized(),
+    company: column(),
+    legal: column(),
+    social: column(),
+    copyright: f.text(),
+  },
+  sample: {
+    tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    company: { title: "Company", links: [{ label: "About", href: "/company/about-us" }] },
+    legal: { title: "Legal", links: [{ label: "Privacy", href: "#" }] },
+    social: { title: "Social", links: [{ label: "Instagram", href: "#" }] },
+    copyright: "© 2026 Lorem Co. Built with Smoodly.",
+  },
+  // The layout's footer keeps the design's spacing: no Spacing & layout group.
+  styles: false,
+});

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

@@ -1,36 +1,8 @@
-import { f, smoodly, type Props, type Scope } from "smoodly";
+import { smoodly, type Props, type Scope } from "smoodly/react";
+import { footerSchema } from "./Footer.schema";
 
-// The site footer — a VISUAL global item (smoodly/globals.ts): one row,
-// edited under Global content, rendered by the layout. Three link columns
-// as top-level objects, each localized as a whole (an object holding a
-// list — one level, which the list field allows; a list of columns each
-// holding a list would be a nested list, which it refuses). The layout
-// renders FooterView directly to hand it the contact object item, which
-// is not a footer field.
-const column = () =>
-  f.object({ title: f.text(), links: f.list(f.object({ label: f.text(), href: f.link() })) }).localized();
-
-export const footerSchema = smoodly.schema.section({
-  name: "footer",
-  title: "Footer",
-  description: "The site footer: tagline, three link columns, copyright.",
-  fields: {
-    tagline: f.text().localized(),
-    company: column(),
-    legal: column(),
-    social: column(),
-    copyright: f.text(),
-  },
-  sample: {
-    tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-    company: { title: "Company", links: [{ label: "About", href: "/company/about-us" }] },
-    legal: { title: "Legal", links: [{ label: "Privacy", href: "#" }] },
-    social: { title: "Social", links: [{ label: "Instagram", href: "#" }] },
-    copyright: "© 2026 Lorem Co. Built with Smoodly.",
-  },
-  // The layout's footer keeps the design's spacing: no Spacing & layout group.
-  styles: false,
-});
+// The site footer's view. The layout renders FooterView directly to hand
+// it the contact object item, which is not a footer field.
 
 export type ContactFields = { email: string; phone?: string; address: string };
 type Column = { title: string; links: { label: string; href: string }[] };

package/templates/lorem/components/sections/Header.schema.ts

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// The site header — a VISUAL global item (smoodly/globals.ts): one row,
+// edited under Global content, rendered by the layout, never placed in a
+// page. The brand is the same in every language; the nav is a list of
+// links localized as a whole, so each language has its own labels and
+// hrefs. The layout renders HeaderView directly to hand it the locale
+// links (a paired component takes only its schema's props); the paired
+// Header is what the registry and the admin know.
+export const headerSchema = smoodly.schema.section({
+  name: "header",
+  title: "Header",
+  description: "The site header: brand and navigation.",
+  fields: {
+    brand: f.text(),
+    nav: f.list(f.object({ label: f.text(), href: f.link() })).localized(),
+  },
+  sample: { brand: "Lorem Co.", nav: [{ label: "Home", href: "/" }] },
+  // Nobody pads the header from the editor: no Spacing & layout group.
+  styles: false,
+});

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

@@ -1,24 +1,5 @@
-import { f, smoodly, type Props } from "smoodly";
-
-// The site header — a VISUAL global item (smoodly/globals.ts): one row,
-// edited under Global content, rendered by the layout, never placed in a
-// page. The brand is the same in every language; the nav is a list of
-// links localized as a whole, so each language has its own labels and
-// hrefs. The layout renders HeaderView directly to hand it the locale
-// links (a paired component takes only its schema's props); the paired
-// Header is what the registry and the admin know.
-export const headerSchema = smoodly.schema.section({
-  name: "header",
-  title: "Header",
-  description: "The site header: brand and navigation.",
-  fields: {
-    brand: f.text(),
-    nav: f.list(f.object({ label: f.text(), href: f.link() })).localized(),
-  },
-  sample: { brand: "Lorem Co.", nav: [{ label: "Home", href: "/" }] },
-  // Nobody pads the header from the editor: no Spacing & layout group.
-  styles: false,
-});
+import { smoodly, type Props } from "smoodly/react";
+import { headerSchema } from "./Header.schema";
 
 export type LocaleLink = { code: string; url: string; current: boolean };
 

package/templates/lorem/components/sections/Hero.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly } from "smoodly";
+
+// The home page opener: kicker, heading, text, up to two buttons and a
+// portrait photo. Home locks it (`z.locked(heroSchema)`): one node an editor
+// fills but cannot add, move or remove. `sample` is what the editor
+// materializes into an empty locked zone, so it is a complete value.
+export const heroSchema = smoodly.schema.section({
+  name: "hero",
+  title: "Hero",
+  description: "The home page opener: heading, text, buttons and a photo.",
+  fields: {
+    kicker: f.text().optional(),
+    heading: f.text(),
+    text: f.text(),
+    buttons: f.list(f.object({ label: f.text(), href: f.link() })).max(2),
+    image: f.image({ aspect: "4:5" }),
+  },
+  sample: {
+    kicker: "Lorem ipsum dolor",
+    heading: "Consectetur adipiscing elit sed do eiusmod",
+    text: "Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
+    buttons: [{ label: "About us", href: "/company/about-us" }],
+  },
+});

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

@@ -1,28 +1,6 @@
-import { f, smoodly, type Props } from "smoodly";
+import { smoodly, type Props } from "smoodly/react";
 import { SmoodlyImage } from "smoodly/image";
-
-// The home page opener: kicker, heading, text, up to two buttons and a
-// portrait photo. Home locks it (`z.locked(Hero)`): one node an editor
-// fills but cannot add, move or remove. `sample` is what the editor
-// materializes into an empty locked zone, so it is a complete value.
-export const heroSchema = smoodly.schema.section({
-  name: "hero",
-  title: "Hero",
-  description: "The home page opener: heading, text, buttons and a photo.",
-  fields: {
-    kicker: f.text().optional(),
-    heading: f.text(),
-    text: f.text(),
-    buttons: f.list(f.object({ label: f.text(), href: f.link() })).max(2),
-    image: f.image({ aspect: "4:5" }),
-  },
-  sample: {
-    kicker: "Lorem ipsum dolor",
-    heading: "Consectetur adipiscing elit sed do eiusmod",
-    text: "Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
-    buttons: [{ label: "About us", href: "/company/about-us" }],
-  },
-});
+import { heroSchema } from "./Hero.schema";
 
 const m = smoodly.marks(heroSchema);
 

package/templates/lorem/components/sections/ImageText.schema.ts

@@ -0,0 +1,30 @@
+import { f, smoodly } from "smoodly";
+
+// A photo beside a heading and richtext, the photo on either side (a
+// setting, not a field: settings are never translated). Without a photo the
+// heading takes the left column and the text the right — the About
+// page's text block. The richtext renders through the package's
+// RichText: paragraphs, headings, lists, quotes.
+export const imageTextSchema = smoodly.schema.section({
+  name: "imageText",
+  title: "Image and text",
+  description: "A photo beside a heading and text; text alone in two columns without one.",
+  fields: {
+    image: f.image({ aspect: "4:3" }).optional(),
+    heading: f.text(),
+    // Body copy beside a photo: emphasis and links, no headings — the block's
+    // own heading field owns that. Every other richtext field takes the default.
+    text: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
+    link: f.object({ label: f.text(), href: f.link() }).optional(),
+  },
+  settings: {
+    imageSide: f.radio([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
+  },
+  sample: {
+    heading: "Duis aute irure dolor in reprehenderit",
+    text: {
+      type: "doc",
+      content: [{ type: "paragraph", content: [{ type: "text", text: "In voluptate velit esse cillum dolore eu fugiat nulla pariatur." }] }],
+    },
+  },
+});