create-smoodly-app 0.0.44 → 0.0.46

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." }] }],
+    },
+  },
+});

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

@@ -1,35 +1,7 @@
-import { f, smoodly, type Props } from "smoodly";
+import { smoodly, type Props } from "smoodly/react";
 import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
-
-// 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." }] }],
-    },
-  },
-});
+import { imageTextSchema } from "./ImageText.schema";
 
 const m = smoodly.marks(imageTextSchema);
 

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

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// The opener of every page that is not the home page: kicker, heading,
+// text and an optional wide photo. Page and Articles lock it — each page
+// shape locks its own hero, which is the point: a locked zone is per
+// shape. Without an image the copy stands alone (the Articles index).
+export const pageHeroSchema = smoodly.schema.section({
+  name: "pageHero",
+  title: "Page hero",
+  description: "A page opener: kicker, heading, text and an optional wide photo.",
+  fields: {
+    kicker: f.text().optional(),
+    heading: f.text(),
+    text: f.text(),
+    image: f.image({ aspect: "21:9" }).optional(),
+  },
+  sample: {
+    heading: "About us",
+    text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+  },
+});

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

@@ -1,25 +1,6 @@
-import { f, smoodly, type Props } from "smoodly";
+import { smoodly, type Props } from "smoodly/react";
 import { SmoodlyImage } from "smoodly/image";
-
-// The opener of every page that is not the home page: kicker, heading,
-// text and an optional wide photo. Page and Articles lock it — each page
-// shape locks its own hero, which is the point: a locked zone is per
-// shape. Without an image the copy stands alone (the Articles index).
-export const pageHeroSchema = smoodly.schema.section({
-  name: "pageHero",
-  title: "Page hero",
-  description: "A page opener: kicker, heading, text and an optional wide photo.",
-  fields: {
-    kicker: f.text().optional(),
-    heading: f.text(),
-    text: f.text(),
-    image: f.image({ aspect: "21:9" }).optional(),
-  },
-  sample: {
-    heading: "About us",
-    text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
-  },
-});
+import { pageHeroSchema } from "./PageHero.schema";
 
 const m = smoodly.marks(pageHeroSchema);
 

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

@@ -0,0 +1,15 @@
+import { f, smoodly } from "smoodly";
+import { people } from "@/smoodly/collections";
+
+// People picked by hand (refList), four to a row: name and role, the
+// role in the page's language because it is a localized field.
+export const peopleSchema = smoodly.schema.section({
+  name: "peopleSection",
+  title: "People",
+  description: "A heading and a row of people.",
+  fields: {
+    heading: f.text(),
+    people: f.refList(() => people),
+  },
+  sample: { heading: "Our people", people: [] },
+});

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

@@ -1,18 +1,6 @@
-import { f, smoodly, type Props } from "smoodly";
+import { smoodly, type Props } from "smoodly/react";
 import { people } from "@/smoodly/collections";
-
-// People picked by hand (refList), four to a row: name and role, the
-// role in the page's language because it is a localized field.
-export const peopleSchema = smoodly.schema.section({
-  name: "peopleSection",
-  title: "People",
-  description: "A heading and a row of people.",
-  fields: {
-    heading: f.text(),
-    people: f.refList(() => people),
-  },
-  sample: { heading: "Our people", people: [] },
-});
+import { peopleSchema } from "./People.schema";
 
 const m = smoodly.marks(peopleSchema);
 

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

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// A heading over one to six points, each an icon, a heading and a line
+// of text: the list field with min/max, and an object inside the list.
+export const pointsSchema = smoodly.schema.section({
+  name: "points",
+  title: "Points",
+  description: "A heading and one to six points with an icon each.",
+  fields: {
+    heading: f.text(),
+    points: f.list(f.object({
+      icon: f.select([{ value: "circle", label: "Circle" }, { value: "square", label: "Square" }, { value: "diamond", label: "Diamond" }]),
+      heading: f.text(),
+      text: f.text(),
+    })).min(1).max(6),
+  },
+  sample: {
+    heading: "Quis autem vel eum",
+    points: [{ icon: "circle", heading: "Iure reprehenderit", text: "Qui in ea voluptate velit esse quam nihil molestiae consequatur." }],
+  },
+});