create-smoodly-app 0.0.44 → 0.0.46

package/templates/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/components/news.ts

@@ -0,0 +1,13 @@
+// The news index's URL, for the post page's back link, from the
+// collection's own nested path (smoodly/collections.ts).
+import { news } from "@/smoodly/collections";
+
+/** The collection's address in a locale: its per-locale path, or the
+ *  first declared one for a locale the map does not name. */
+function address(locale: string): string {
+  const p = news.path;
+  if (typeof p === "string") return p;
+  return p?.[locale] ?? Object.values(p ?? {})[0] ?? "company/news";
+}
+
+export const newsIndexPath = (locale: string) => `/${address(locale)}`;

package/templates/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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/astro-lorem/src/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." }],
+  },
+});

package/templates/astro-lorem/src/components/sections/Quote.schema.ts

@@ -0,0 +1,23 @@
+import { f, smoodly } from "smoodly";
+
+// A pull quote. Registered as a global item (smoodly/globals.ts): one row
+// edited under Global content, placed on pages from the "+" picker's
+// Global group as a linked node. The body zones also list it, because
+// the picker offers a global item only where the zone allows its
+// section — so an editor may also drop a one-off quote.
+export const quoteSchema = smoodly.schema.section({
+  name: "quote",
+  title: "Quote",
+  description: "A pull quote with its attribution.",
+  fields: {
+    text: f.text().localized(),
+    attribution: f.text().localized(),
+  },
+  settings: {
+    background: f.radio([{ value: "paper", label: "Paper" }, { value: "ink", label: "Ink" }]).default("paper"),
+  },
+  sample: {
+    text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.",
+    attribution: "Jane Doe, Founder",
+  },
+});

package/templates/astro-lorem/src/elements/callout.astro

@@ -0,0 +1,13 @@
+---
+// examples/astro/src/elements/callout.astro — the view of the element named "callout", inside an article body
+import { type Props as SmoodlyProps } from "smoodly";
+import { RichText } from "smoodly/astro/components";
+import { calloutSchema } from "@/components/elements/Callout.schema";
+
+type Props = SmoodlyProps<typeof calloutSchema>;
+const { title, body, settings } = Astro.props;
+---
+<aside class="callout" data-tone={settings.tone}>
+  <strong class="callout__title">{title}</strong>
+  <div class="callout__body"><RichText doc={body} /></div>
+</aside>

package/templates/astro-lorem/src/elements/cta.astro

@@ -0,0 +1,15 @@
+---
+// examples/astro/src/elements/cta.astro — the view of the element named "cta"
+import { safeHref, type Props as SmoodlyProps } from "smoodly";
+import { ctaSchema } from "@/components/elements/Cta.schema";
+
+type Props = SmoodlyProps<typeof ctaSchema>;
+const { heading, text, label, href, settings } = Astro.props;
+---
+<div class="cta" data-variant={settings.variant}>
+  <div class="cta__copy">
+    <strong class="cta__heading">{heading}</strong>
+    {text && <p class="cta__text">{text}</p>}
+  </div>
+  <a class={settings.variant === "outline" ? "button button--outline" : "button"} href={safeHref(href)}>{label}</a>
+</div>

package/templates/astro-lorem/src/entry-pages/articles.astro

@@ -0,0 +1,71 @@
+---
+// examples/astro/src/entry-pages/articles.astro — the entry page of the collection "articles", served at the
+// collection's path (/posts/<slug>, /fi/artikkelit/<slug>). Fields only; refs arrive resolved (author is a
+// person). "Related" is the newest other published articles; "More from <author>" filters on the shared
+// author field in the store. The render locale and the alternates ride on the entry (spec 2026-09-15).
+import { getLiveCollection } from "astro:content";
+import { Image, RichText } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import { articlesIndexPath, formatDate, readingMinutes } from "@/components/articles";
+import type { EntryFields, EntryItem } from "smoodly";
+import type { PageHead } from "smoodly/astro/runtime";
+import type { articles } from "@/smoodly/collections";
+import Layout from "../layouts/Layout.astro";
+import ArticleCard from "../components/ArticleCard.astro";
+import { ui } from "../strings";
+
+type Props = { entry: EntryItem<EntryFields<typeof articles>>; head: PageHead };
+const { entry, head } = Astro.props;
+const { locale, locales } = entry;
+const { t } = ui(locale);
+const a = entry.fields;
+const url = (path: string) => href(path, locale);
+// Four newest, minus this one, so three remain even when it is among them; the store applies the limit.
+const { entries: newest = [] } = await getLiveCollection("articles", { locale, limit: 4 });
+const related = newest.map((e) => e.data).filter((r) => r.id !== entry.id).slice(0, 3);
+const authorId = a.author?.id;
+const { entries: byAuthor = [] } = authorId ? await getLiveCollection("articles", { locale, where: { author: authorId } }) : { entries: [] };
+const more = byAuthor.map((e) => e.data).filter((r) => r.id !== entry.id);
+const index = url(articlesIndexPath(locale));
+---
+<Layout head={head} locale={locale} locales={locales}>
+  <article class="container article">
+    <a class="article__back" href={index}>← {t("allArticles")}</a>
+    <div class="article__head">
+      {a.tags && a.tags.length > 0 && (
+        <div class="article__tags">{a.tags.map((tag, i) => <span class={i === 0 ? "tag tag--accent" : "tag"}>{tag}</span>)}</div>
+      )}
+      <h1 class="article__title">{a.title}</h1>
+      <p class="article__byline">
+        <span class="article__avatar" aria-hidden="true"></span>
+        <span>
+          {a.author?.fields.name && <strong>{a.author.fields.name}</strong>}
+          {a.author?.fields.name && " · "}
+          {a.date && <>{formatDate(a.date, locale)} · </>}
+          {t("minRead", { minutes: readingMinutes(a.body) })}
+        </span>
+      </p>
+    </div>
+    {a.image && <Image image={a.image} aspect="21:9" class="article__image" sizes="(min-width: 900px) 800px, 100vw" priority />}
+    <div class="article__body prose prose--lead"><RichText doc={a.body} sizes="(min-width: 900px) 720px, 100vw" /></div>
+  </article>
+  {more.length > 0 && (
+    <section class="related" data-testid="more-by-author">
+      <div class="container">
+        <div class="related__head"><h2 class="h2">{t("moreFromAuthor", { name: a.author?.fields.name ?? "" })}</h2></div>
+        <div class="card-grid card-grid--3">{more.map((r) => <ArticleCard article={r.fields} url={url(r.path!)} locale={locale} compact />)}</div>
+      </div>
+    </section>
+  )}
+  {related.length > 0 && (
+    <section class="related">
+      <div class="container">
+        <div class="related__head">
+          <h2 class="h2">{t("relatedArticles")}</h2>
+          <a class="link-accent" href={index}>{t("allArticles")} →</a>
+        </div>
+        <div class="card-grid card-grid--3">{related.map((r) => <ArticleCard article={r.fields} url={url(r.path!)} locale={locale} compact />)}</div>
+      </div>
+    </section>
+  )}
+</Layout>

package/templates/astro-lorem/src/entry-pages/news.astro

@@ -0,0 +1,29 @@
+---
+// examples/astro/src/entry-pages/news.astro — the entry page of the collection "news", at
+// /company/news/<slug> and /fi/yritys/uutiset/<slug>: the collection's nested path, then the slug.
+import { RichText } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import { formatDate } from "@/components/articles";
+import { newsIndexPath } from "@/components/news";
+import type { EntryFields, EntryItem } from "smoodly";
+import type { PageHead } from "smoodly/astro/runtime";
+import type { news } from "@/smoodly/collections";
+import Layout from "../layouts/Layout.astro";
+import { ui } from "../strings";
+
+type Props = { entry: EntryItem<EntryFields<typeof news>>; head: PageHead };
+const { entry, head } = Astro.props;
+const { locale, locales } = entry;
+const { t } = ui(locale);
+const n = entry.fields;
+---
+<Layout head={head} locale={locale} locales={locales}>
+  <article class="container article">
+    <a class="article__back" href={href(newsIndexPath(locale), locale)}>← {t("allNews")}</a>
+    <div class="article__head">
+      <h1 class="article__title">{n.title}</h1>
+      {n.date && <p class="article__byline">{formatDate(n.date, locale)}</p>}
+    </div>
+    <div class="article__body prose prose--lead"><RichText doc={n.body} /></div>
+  </article>
+</Layout>

package/templates/astro-lorem/src/layouts/Layout.astro

@@ -0,0 +1,39 @@
+---
+// examples/astro/src/layouts/Layout.astro
+// The site's own document: every page type and entry page renders inside it. The header and the footer are
+// global content, read as live entries per locale, null until published there; the language links come from
+// the page's own `locales` map (spec 2026-09-15), so a layout here can know which page is on screen — Astro
+// renders the page before its layout's slot is filled. Nothing of Smoodly's is written here but the head it
+// knows; in a preview the integration adds what the editor needs to the response.
+import { getLiveEntry } from "astro:content";
+import { Head } from "smoodly/astro/components";
+import { href, type PageHead } from "smoodly/astro/runtime";
+import Header from "../sections/header.astro";
+import Footer from "../sections/footer.astro";
+import "../styles/global.css";
+
+type Props = { head: PageHead; locale: string; locales?: Record<string, { path: string | null } | null> };
+const { head, locale, locales = {} } = Astro.props;
+const [{ entry: header }, { entry: footer }, { entry: contact }] = await Promise.all([
+  getLiveEntry("header", { locale }),
+  getLiveEntry("footer", { locale }),
+  getLiveEntry("contact", { locale }),
+]);
+const codes = Object.keys(locales);
+const links = codes.length > 1
+  ? codes.map((code) => ({ code, url: href(locales[code]?.path ?? "/", code), current: code === locale }))
+  : undefined;
+---
+<!doctype html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <Head of={head} fallback="Lorem Co." />
+  </head>
+  <body>
+    {header && <Header {...header.data.fields} settings={header.data.settings} styles={header.data.styles} home={href("/", locale)} locales={links} />}
+    <main><slot /></main>
+    {footer && <Footer {...footer.data.fields} settings={footer.data.settings} styles={footer.data.styles} contact={contact?.data.fields} />}
+  </body>
+</html>

package/templates/astro-lorem/src/live.config.ts

@@ -0,0 +1,20 @@
+// examples/astro/src/live.config.ts
+// Smoodly's content as live collections (spec 2026-10-02 astro cloud fit §6): a loader per collection, global
+// item and the pages, from the package; this file only names them. `getLiveCollection("articles", { locale })`
+// in a view reads through the read layer, and the response is tagged by what it read.
+import { defineLiveCollection } from "astro:content";
+import { entriesLoader, globalLoader, pageLoader, pageTreeLoader } from "smoodly/astro/content";
+import { articles, news, people } from "@/smoodly/collections";
+import { contact, footer, header, quote } from "@/smoodly/globals";
+
+export const collections = {
+  pages: defineLiveCollection({ loader: pageLoader() }),
+  pageTree: defineLiveCollection({ loader: pageTreeLoader() }),
+  articles: defineLiveCollection({ loader: entriesLoader(articles) }),
+  news: defineLiveCollection({ loader: entriesLoader(news) }),
+  people: defineLiveCollection({ loader: entriesLoader(people) }),
+  header: defineLiveCollection({ loader: globalLoader(header) }),
+  footer: defineLiveCollection({ loader: globalLoader(footer) }),
+  contact: defineLiveCollection({ loader: globalLoader(contact) }),
+  quote: defineLiveCollection({ loader: globalLoader(quote) }),
+};

package/templates/astro-lorem/src/messages/en.json

@@ -0,0 +1,7 @@
+{
+  "allArticles": "All articles",
+  "relatedArticles": "Related articles",
+  "moreFromAuthor": "More from {name}",
+  "minRead": "{minutes} min read",
+  "allNews": "All news"
+}

package/templates/astro-lorem/src/messages/fi.json

@@ -0,0 +1,7 @@
+{
+  "allArticles": "Kaikki artikkelit",
+  "relatedArticles": "Aiheeseen liittyvät artikkelit",
+  "moreFromAuthor": "Lisää kirjoittajalta {name}",
+  "minRead": "{minutes} min lukuaika",
+  "allNews": "Kaikki uutiset"
+}

package/templates/astro-lorem/src/page-types/articlesIndex.astro

@@ -0,0 +1,24 @@
+---
+// examples/astro/src/page-types/articlesIndex.astro — the view of the page type named "articlesIndex": the
+// editor owns the hero; the grid reads the published articles as a live collection, newest first (the
+// collection's `order`), and in the canvas the drafts too (the request scope reads drafts in a preview).
+import { getLiveCollection } from "astro:content";
+import { Zone } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import type { PageContext } from "smoodly";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+import ArticleCard from "../components/ArticleCard.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+const { entries = [] } = await getLiveCollection("articles", { locale: page.locale });
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  <Zone of={zones.hero} />
+  <section class="container articles-index">
+    <div class="card-grid">
+      {entries.map(({ data: entry }) => <ArticleCard article={entry.fields} url={href(entry.path!, page.locale)} locale={page.locale} />)}
+    </div>
+  </section>
+</Layout>

package/templates/astro-lorem/src/page-types/home.astro

@@ -0,0 +1,14 @@
+---
+// examples/astro/src/page-types/home.astro — the view of the page type named "home"
+import { Zone } from "smoodly/astro/components";
+import type { PageContext } from "smoodly";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  <Zone of={zones.hero} />
+  <Zone of={zones.body} />
+</Layout>