create-smoodly-app 0.0.45 → 0.0.46

package/templates/astro-lorem/AGENTS.md

@@ -0,0 +1,55 @@
+# Working in this Smoodly site
+
+This is an Astro site with Smoodly installed: content lives in Supabase, the admin is mounted at /admin by the `smoodly/astro` integration in `astro.config.ts`, and the site reads content through live collections (`src/live.config.ts`). Read README.md first: it says where things are.
+
+## Rules
+
+- **Register schemas in the config; views are files by name.** A section's view is
+  `src/sections/<name>.astro`, an element's `src/elements/<name>.astro`, a page
+  type's `src/page-types/<name>.astro`, an entry page's
+  `src/entry-pages/<collection>.astro`, where <name> is the schema's `name`.
+  The schema is listed in its barrel (`src/smoodly/sections.ts`, `elements.ts`,
+  the config's `pages`; collections and global items in `collections.ts`,
+  `globals.ts`) and `src/smoodly/config.ts` is the one registry. The server
+  names a schema with no file, and a file with no schema, at the first request.
+- **A `.schema.ts` file imports no component.** Zones, toolsets, global items and
+  `node()` take schemas (`z.locked(heroSchema)`), never views.
+- **After a new collection or a `smoodly` upgrade, run `npx smoodly migrate`**
+  and apply what it writes (`supabase db push` hosted, `supabase migration up`
+  local). It copies the core schema files the package ships and writes a
+  read view and order index per collection. Never edit a file it wrote.
+  The admin reads the base tables, so it lists a collection either way;
+  the view is for SQL and PostgREST readers, the index for `order`.
+- **Content from code goes through `createContent(config)`** from `smoodly/astro`:
+  `scripts/seed.ts` is starter content written with it — the admin's own
+  operations, so validation and publish checks apply and a failure throws. Never
+  write rows or call the stores directly. The seed is idempotent; `npm run seed`.
+- **Reads are live collections.** `src/live.config.ts` names one loader per
+  collection, global item, the pages and the page tree; a view reads with
+  `getLiveCollection("articles", { locale })` or `getLiveEntry("footer", { locale })`
+  from `astro:content`. Every read tags the response, and a publish expires it.
+- **The admin, the preview address and the page shell are injected** by
+  `smoodly()` in `astro.config.ts`; the project has no route file for them. A page
+  file of your own under `src/pages` wins its address. `site` in `astro.config.ts`
+  is the site's own address (from `SITE_URL`).
+- **A link an editor typed goes through `safeHref`** from "smoodly" in an `.astro`
+  view: `<a href={safeHref(link.href)}>`. Astro writes attributes as given, so a
+  `javascript:` URL would reach the page; the template build refuses a shipped
+  view that skips it.
+- **Section styles are inline.** `<Section>` from `smoodly/astro/components` renders
+  the root element with Smoodly's styles set and the node id; marks
+  (`smoodly.marks(schema)`) tie rendered elements to fields.
+- **Multilingual sites.** The locale set is `locales` in `src/smoodly/config.ts`
+  and `i18n` in `astro.config.ts`; the two must agree. UI strings of the site's
+  own go through `src/strings.ts` and `src/messages/<locale>.json`.
+- **Fixed versus open pages.** A page type with a `slug` is fixed: one
+  record, created for you, never deleted. Without one it is open: editors
+  create as many as they like.
+
+## Commands
+
+    npm run dev          # http://localhost:4321, /admin is the editor
+    npm run build        # checks the schema files (smoodly migrate --check), then astro build
+    npm run start        # the built server (dist/server/entry.mjs)
+    npm run seed         # starter content, idempotent
+    npm run typecheck    # astro check

package/templates/astro-lorem/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/astro-lorem/README.md

@@ -0,0 +1,60 @@
+# Smoodly site
+
+Created by `create-smoodly-app`. Content lives in Supabase; the admin is
+mounted at `/admin` by the `smoodly/astro` integration. AGENTS.md holds the
+rules for an agent (or a person) building the site.
+
+    npm run dev          # http://localhost:4321 — /admin is the editor
+
+## Where things are
+
+- `astro.config.ts` — the `smoodly()` integration (it mounts the admin, the preview address and the page shell), the node adapter, the cache and `site` (from `SITE_URL`).
+- `src/smoodly/` — the wiring: `config.ts` (the registry of schemas and the settings), `collections.ts`, `sections.ts`, `elements.ts`, `globals.ts` and `toolsets.ts`. The schemas they register are `*.schema.ts` files under `src/components/`.
+- `src/sections/` — one `<name>.astro` view per section schema, named by the schema's `name`; the header, footer and quote behind the global items are here too.
+- `src/elements/` — one view per element schema, embedded in richtext.
+- `src/page-types/` — one view per page type: `home`, `page` (open; About lives here), `articlesIndex` and `newsIndex` (fixed pages at a collection's path).
+- `src/entry-pages/` — one view per collection that has entry pages: `articles` and `news`.
+- `src/layouts/Layout.astro` — the page shell every view renders: head, header, footer, `src/styles/global.css`.
+- `src/live.config.ts` — the live collections the views read with `getLiveCollection` and `getLiveEntry`.
+- `src/strings.ts`, `src/messages/` — the site's own UI strings in the page's language.
+- `public/images/` — the starter's photos; image fields hold URLs like `/images/hero_image.jpg`.
+- `scripts/seed.ts` — the starter content, written through `createContent(config)`. `npm run seed` is idempotent.
+- `.env` — `SMOODLY_URL`, `SMOODLY_SECRET_KEY`, `SMOODLY_PUBLISHABLE_KEY`.
+
+## What is in the starter
+
+The Lorem Co. site the installer seeded is a tour of the features:
+
+- **Home** — a locked hero (fields only; nobody adds, moves or removes it), then a freeform body: image and text (richtext), the global **quote** placed from the picker's Global group, points (a list with a minimum and a maximum, an object per item), favourite articles (an editor-picked list of refs).
+- **Articles** — a fixed page at the collection's own URL segment, so it is the collection's index: the hero is the editor's, the grid is code fetching published articles.
+- **Company / About** — a path and a page under it (the breadcrumb), the same body sections, plus people.
+- **News** — a collection at a nested address, `company/news`: code owns the whole address, so its index page and posts stay put when an editor renames Company, and nobody can create a page there.
+- **An article** — a collection entry with a richtext body, tags (a localized list), a date and an author ref; versioned, so every save is a snapshot.
+- **Global content** — the header and footer every page renders through \`src/layouts/Layout.astro\`, the contact details the footer reads, the quote pages place.
+
+Reseed an empty database any time with `npm run seed`.
+
+## Moving the admin
+
+The admin is at `/admin`. To serve it somewhere else, say `/studio`:
+
+1. set `smoodly({ adminPath: "/studio" })` in `astro.config.ts`,
+2. set `admin: { path: "/studio" }` in `src/smoodly/config.ts`.
+
+The two must agree; the admin says so when they do not.
+
+## Editors
+
+Anyone who may open `/admin` is a Supabase Auth user with a row in the
+`editors` table. To add one: create the user in Supabase Studio
+(Authentication → Users), then in the SQL editor:
+
+    insert into editors (user_id, role) values ('<the user id>', 'editor');
+
+## Hosted Supabase
+
+    supabase init        # if the CLI has not been set up here yet
+    supabase link        # pick the project
+    supabase db push     # applies supabase/migrations/
+
+Then put the project's URL and keys in `.env`.

package/templates/astro-lorem/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.astro/
+.env
+smoodly-export-*

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

@@ -0,0 +1,15 @@
+import { defineConfig, memoryCache } from "astro/config";
+import node from "@astrojs/node";
+import smoodly from "smoodly/astro";
+
+export default defineConfig({
+  output: "server",
+  adapter: node({ mode: "standalone" }),
+  // Pages are cached whole and expire by tag when an editor publishes (one process, one cache).
+  cache: { provider: memoryCache() },
+  // The site's own address: canonical, hreflang and social links are absolute on it. Astro reads astro.config
+  // before .env, so this sees only a SITE_URL set in the shell; when it is unset, smoodly() sets `site` from
+  // SITE_URL in .env. Set SITE_URL where you deploy: `site` is fixed at `astro build`.
+  site: process.env.SITE_URL,
+  integrations: [smoodly({ config: "src/smoodly/config.ts" })],
+});

package/templates/astro-lorem/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "smoodly-site",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "smoodly migrate --check && astro build",
+    "start": "node --env-file-if-exists=.env dist/server/entry.mjs",
+    "seed": "tsx scripts/seed.ts",
+    "typecheck": "astro check"
+  },
+  "dependencies": {
+    "@astrojs/node": "^11.1.6",
+    "@supabase/supabase-js": "^2.113.0",
+    "astro": "^7.3.5",
+    "smoodly": "0.0.46"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.10",
+    "@types/node": "^26.4.1",
+    "typescript": "^5",
+    "tsx": "^4"
+  }
+}

package/templates/astro-lorem/scripts/seed.ts

@@ -0,0 +1,405 @@
+// The starter's content, written through the content API (`createContent(config)`
+// from smoodly/astro): the admin's own operations, so validation and
+// the publish checks apply and a failure throws. This file is also the
+// example of writing content from code. Content only; it ships in the template and create-smoodly-app runs
+// `npm run seed` after the first editor. (The example repo's demo
+// editor account is a separate, example-only script.)
+// Run: npm run seed  (needs .env and a Supabase stack).
+//
+// Locales: the English content goes into the configured default locale,
+// whatever its code, and the Finnish rows are written only when `fi` is
+// supported and not the default (spec 2026-09-07 starter §4). The
+// installer accepts any locale set; URL segments come from the
+// registrations (the articles collection's per-locale `path`), so a
+// `fi` default lands the index on `artikkelit`. Body copy is Latin in
+// both; what a reader perceives as language (nav, headings, tags,
+// roles, footer titles) is translated. Idempotent: exits once the home
+// page has content.
+import type { PageTree, TreeNode } from "smoodly";
+
+const { config } = await import("../src/smoodly/config");
+const { articles, news } = await import("../src/smoodly/collections");
+const { node } = await import("smoodly");
+const { createContent } = await import("smoodly/astro");
+const { content, href } = createContent(config);
+const { heroSchema } = await import("../src/components/sections/Hero.schema");
+const { pageHeroSchema } = await import("../src/components/sections/PageHero.schema");
+const { imageTextSchema } = await import("../src/components/sections/ImageText.schema");
+const { pointsSchema } = await import("../src/components/sections/Points.schema");
+const { favouriteArticlesSchema } = await import("../src/components/sections/FavouriteArticles.schema");
+const { peopleSchema } = await import("../src/components/sections/People.schema");
+const c = content;
+
+const EN = config.locales.default;
+const FI = config.locales.supported.includes("fi") && EN !== "fi" ? "fi" : null;
+
+// The home page is code-owned: `find` returns its record, creating it when
+// the database is new. It is seeded once somebody has given it sections.
+const home = (await c.pages.find(EN, "/"))!;
+if (Object.values((await c.pages.getTree(home.id, EN))?.zones ?? {}).some((nodes) => nodes.length > 0)) {
+  console.log(`Already seeded — the home page has content in "${EN}".`);
+  process.exit(0);
+}
+
+// --- helpers -------------------------------------------------------
+
+type Fields = Record<string, unknown>;
+type Node = Record<string, unknown>;
+
+// Richtext is TipTap JSON, the stored format; RichText renders it.
+const text = (s: string) => [{ type: "text", text: s }];
+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)) }, settings: { tone } } });
+const cta = (heading: string, text: string, label: string, href: string): Node =>
+  ({ type: "element", attrs: { name: "cta", fields: { heading, text, label, href }, settings: { variant: "primary" } } });
+const doc = (...content: Node[]) => ({ type: "doc", content });
+
+// The starter's photos become assets: each file is uploaded once (a row
+// in `assets`, the bytes in the `media` bucket), and a field value is
+// `{ asset: <id> }` — the alt lives on the asset (spec 2026-09-08).
+const image = async (name: string, alt: string): Promise<{ asset: string }> =>
+  ({ asset: (await c.media.upload(`public/images/${name}.jpg`, { alt, title: alt })).asset });
+const img = {
+  article: await image("article_photo", "Notebook on a desk"),
+  home2: await image("home_section_2", "Team working"),
+  hero: await image("hero_image", "Office interior"),
+  about: await image("about_main", "Team meeting"),
+};
+
+/** The articles collection's URL segment in a locale, from its own `path`. */
+const articlesSegment = (locale: string) => {
+  const declared = articles.path;
+  return typeof declared === "string" ? declared : (declared?.[locale] ?? declared?.[EN] ?? "posts");
+};
+/** The news collection's nested address in a locale (`company/news`), from its own `path`. */
+const newsAddress = (locale: string) => {
+  const declared = news.path;
+  return typeof declared === "string" ? declared : (declared?.[locale] ?? declared?.[EN] ?? "company/news");
+};
+/** Site URLs for the starter's own pages in a locale. */
+const paths = (locale: string) => ({
+  home: href("/", locale),
+  articles: href(`/${articlesSegment(locale)}`, locale),
+  news: href(`/${newsAddress(locale)}`, locale),
+  about: href(locale === FI ? "/yritys/tietoa-meista" : "/company/about-us", locale),
+});
+
+/** Create an entry in EN, add the FI row when there is one, and publish
+ *  both — every entry is published in every locale it has BEFORE any
+ *  page, because publish integrity is per locale and would (rightly)
+ *  block a page whose tree references an entry that is a draft, or
+ *  absent, in that locale. `fi` holds the localized fields; shared ones
+ *  are repeated from `en`. */
+async function seedEntry(collection: string, en: Fields, fi?: Fields) {
+  const row = await c.entries.create(collection, { locale: EN, fields: en });
+  await c.entries.publish(collection, row.id, EN);
+  if (FI && fi) {
+    await c.entries.addLocale(collection, row.id, FI, { from: EN, fields: { ...en, ...fi } });
+    await c.entries.publish(collection, row.id, FI);
+  }
+  return row;
+}
+
+/** A global item exists in every locale from the start: set and publish each. */
+async function seedGlobal(name: string, en: Fields, fi?: Fields) {
+  const row = await c.globals.set(name, EN, en);
+  await c.globals.publish(name, EN);
+  if (FI) {
+    await c.globals.set(name, FI, { ...en, ...fi });
+    await c.globals.publish(name, FI);
+  }
+  return row;
+}
+
+type Tree = PageTree;
+type Trees = { en: Tree; fi?: Tree };
+
+/** Create a page (or a folder: `template: null`) in EN with its tree,
+ *  publish it, then the FI row with its own tree — a locale's tree is
+ *  its own (spec 2026-09-06); the Finnish page is copied from the
+ *  English draft, then overwritten with the Finnish tree. */
+async function seedPage(
+  input: { slug: string; title: string; template: string | null; parentId?: string; fi?: { slug?: string; title: string } },
+  trees?: Trees,
+) {
+  const page = await c.pages.create({ parentId: input.parentId ?? null, locale: EN, slug: input.slug, title: input.title, template: input.template });
+  if (trees) {
+    await c.pages.setTree(page.id, EN, trees.en);
+    await c.pages.publish(page.id, EN);
+  }
+  if (FI && input.fi) {
+    await c.pages.addLocale(page.id, FI, { from: EN, ...input.fi });
+    if (trees?.fi) {
+      await c.pages.setTree(page.id, FI, trees.fi);
+      await c.pages.publish(page.id, FI);
+    }
+  }
+  return page;
+}
+
+/** A code-owned page (the home page, a collection's index): its address,
+ *  title and locales come from the registration, so there is nothing to
+ *  create — `find` returns the record, and the trees are written to it. */
+async function seedCodePage(path: string, trees: Trees) {
+  const page = (await c.pages.find(EN, path))!;
+  await c.pages.setTree(page.id, EN, trees.en);
+  await c.pages.publish(page.id, EN);
+  if (FI && trees.fi) {
+    await c.pages.setTree(page.id, FI, trees.fi);
+    await c.pages.publish(page.id, FI);
+  }
+  return page;
+}
+
+// --- people ---------------------------------------------------------
+
+const jane = await seedEntry("people", { name: "Jane Doe", role: "Founder" }, { role: "Perustaja" });
+const john = await seedEntry("people", { name: "John Smith", role: "Creative Director" }, { role: "Luova johtaja" });
+const anna = await seedEntry("people", { name: "Anna Lorem", role: "Head of Design" }, { role: "Muotoilujohtaja" });
+const mark = await seedEntry("people", { name: "Mark Ipsum", role: "Developer" }, { role: "Kehittäjä" });
+
+// --- the article ----------------------------------------------------
+
+const body = doc(
+  p("Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
+  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),
+);
+
+// Every collection is versioned: every save below is a
+// snapshot. Title and body are Latin in both locales; tags and slug are
+// per locale, so the Finnish row reads Finnish where a reader would notice.
+const article = await seedEntry("articles", {
+  title: "Lorem ipsum dolor sit amet consectetur adipiscing",
+  slug: "lorem-ipsum-dolor-sit-amet",
+  excerpt: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  body,
+  tags: ["Insights", "Design"],
+  image: img.article,
+  date: "2026-09-02",
+  author: jane.id,
+}, {
+  slug: "lorem-ipsum-dolor-sit-amet-fi",
+  tags: ["Näkemyksiä", "Muotoilu"],
+});
+
+// Two news posts at the collection's nested address (/company/news/<slug>,
+// /fi/yritys/uutiset/<slug>): Latin copy, a slug per locale.
+await seedEntry("news", {
+  title: "Lorem ipsum dolor sit amet nova",
+  slug: "lorem-news",
+  date: "2026-09-20",
+  excerpt: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+  body: doc(p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
+}, { slug: "lorem-uutinen" });
+await seedEntry("news", {
+  title: "Ipsum dolor sit amet consectetur",
+  slug: "ipsum-update",
+  date: "2026-09-27",
+  excerpt: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.",
+  body: doc(p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")),
+}, { slug: "ipsum-paivitys" });
+
+// --- global items ---------------------------------------------------
+
+// No Home item: the brand in the header is the way home.
+const nav = (locale: string, labels: [string, string]) => {
+  const links = paths(locale);
+  return [
+    { label: labels[0], href: links.articles },
+    { label: labels[1], href: links.about },
+  ];
+};
+await seedGlobal("header",
+  { brand: "Lorem Co.", nav: nav(EN, ["Articles", "About"]) },
+  FI ? { nav: nav(FI, ["Artikkelit", "Tietoa meistä"]) } : undefined,
+);
+
+await seedGlobal("footer", {
+  tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  company: { title: "Company", links: [{ label: "About", href: paths(EN).about }, { label: "Articles", href: paths(EN).articles }, { label: "News", href: paths(EN).news }] },
+  legal: { title: "Legal", links: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+  social: { title: "Social", links: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
+  copyright: "© 2026 Lorem Co. Built with Smoodly.",
+}, FI ? {
+  tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  company: { title: "Yritys", links: [{ label: "Tietoa meistä", href: paths(FI).about }, { label: "Artikkelit", href: paths(FI).articles }, { label: "Uutiset", href: paths(FI).news }] },
+  legal: { title: "Lakiasiat", links: [{ label: "Tietosuoja", href: "#" }, { label: "Ehdot", href: "#" }] },
+  social: { title: "Some", links: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
+} : undefined);
+
+await seedGlobal("contact",
+  { email: "hello@lorem.co", phone: "+358 40 123 4567", address: "Lorem Street 1, 00100 Helsinki" },
+  { address: "Loremkatu 1, 00100 Helsinki" },
+);
+
+// A visual global item's settings ride the row under the reserved
+// `$settings` key (spec 2026-09-13 §1): the quote is the site's one dark band.
+const quoteRow = await seedGlobal("quote",
+  { text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.", attribution: "Jane Doe, Founder", $settings: { background: "ink" } },
+  { attribution: "Jane Doe, perustaja" },
+);
+// A placement: the quote as a linked node, the same row wherever it sits.
+const quote: TreeNode = { id: "node-quote", type: "global", fields: { item: "quote", ref: quoteRow.id } };
+
+// --- pages ----------------------------------------------------------
+
+const imageText = (locale: string, linkLabel: string) => node(imageTextSchema, {
+    image: img.home2,
+    heading: "Duis aute irure dolor in reprehenderit",
+    text: doc(
+      p("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."),
+      p("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."),
+    ),
+    link: { label: linkLabel, href: paths(locale).about },
+  }, { id: "node-intro", settings: { imageSide: "left" } });
+
+const points: TreeNode = {
+  ...node(pointsSchema, {
+    heading: "Quis autem vel eum",
+    points: [
+      { icon: "circle", heading: "Iure reprehenderit", text: "Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat." },
+      { icon: "square", heading: "Quo voluptas nulla", text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum." },
+      { icon: "diamond", heading: "Pariatur deleniti", text: "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga." },
+    ],
+  }, { id: "node-points" }),
+  // One Spacing & layout step stored (spec 2026-09-14 §2); the rest are Default and store nothing.
+  styles: { spacingBottom: "lg" },
+};
+
+const favourites = (heading: string) => node(favouriteArticlesSchema, { heading, items: [article.id] }, { id: "node-favourites" });
+
+// The custom section (spec 2026-09-14 §6): the editor's own rows of
+// richtext columns, widths in twelfths; Smoodly renders its layout CSS.
+// Not a registered section, so it is a plain node object.
+const customSection = (locale: string): TreeNode => ({
+  id: "node-custom",
+  type: "custom",
+  fields: { rows: [
+    { spans: [4, 8], gap: "lg", align: "top", reverse: false, columns: [
+      doc(h2("Sed ut perspiciatis"), p("Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.")),
+      doc(p("Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."), callout("Nemo enim", "Ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.", "info")),
+    ] },
+    { spans: [12], gap: "md", align: "top", reverse: false, columns: [doc(cta("Neque porro quisquam", "Qui dolorem ipsum quia dolor sit amet.", "Read the articles", paths(locale).articles))] },
+  ] },
+  styles: { spacingBottom: "lg" },
+});
+
+const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]; link: string; favourites: string }): Tree => ({
+  // The built-in SEO set rides the tree (spec 2026-09-10 page fields §2).
+  meta: { description: "Lorem Co. — consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore." },
+  zones: {
+    // The locked hero's one node. Pages created in the admin get theirs
+    // from the editor (fillLockedZones on load); a seeded tree brings its own.
+    hero: [node(heroSchema, {
+      kicker: t.kicker,
+      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: t.buttons[0], href: paths(locale).about },
+        { label: t.buttons[1], href: paths(locale).articles },
+      ],
+      image: img.hero,
+    }, { id: "node-hero" })],
+    body: [imageText(locale, t.link), quote, points, customSection(locale), favourites(t.favourites)],
+  },
+});
+
+await seedCodePage("/", {
+    en: homeTree(EN, { kicker: "Lorem ipsum dolor", buttons: ["About us", "Read articles"], link: "About Lorem Co. →", favourites: "From the journal" }),
+  fi: FI ? homeTree(FI, { kicker: "Lorem ipsum dolor", buttons: ["Tietoa meistä", "Lue artikkelit"], link: "Tietoa Lorem Co:sta →", favourites: "Ajankohtaista" }) : undefined,
+});
+
+// The Articles index: the fixed page at the collection's own segments,
+// so the mount in the Pages list opens this page. Only a hero; the grid
+// is the view's own fetch.
+const articlesHero = (heading: string, text: string): Tree => ({
+  zones: { hero: [node(pageHeroSchema, { heading, text }, { id: "node-articles-hero" })] },
+});
+await seedCodePage(`/${articlesSegment(EN)}`, {
+  en: articlesHero("Articles", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."),
+  fi: articlesHero("Artikkelit", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."),
+});
+
+// A folder and a page under it: the tree the admin lists, and the
+// breadcrumb the Page shape renders from the `page` prop. Each exists in
+// both locales with its own slug and title.
+const company = await seedPage({ slug: "company", title: "Company", template: null, fi: { slug: "yritys", title: "Yritys" } });
+
+// The News index: the code-owned page on the news collection's nested
+// address (spec 2026-09-29 nested paths §3) — it shows under Company in
+// URL only; renaming Company never moves it.
+await seedCodePage(`/${newsAddress(EN)}`, {
+  en: { zones: { hero: [node(pageHeroSchema, { heading: "News", text: "Lorem ipsum dolor sit amet — what is new at Lorem Co." }, { id: "node-news-hero" })] } },
+  fi: { zones: { hero: [node(pageHeroSchema, { heading: "Uutiset", text: "Lorem ipsum dolor sit amet — mitä Lorem Co:lle kuuluu." }, { id: "node-news-hero" })] } },
+});
+
+const aboutTree = (t: { kicker: string; people: string; description: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.description },
+  zones: {
+    hero: [node(pageHeroSchema, {
+      kicker: t.kicker,
+      heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+      image: img.about,
+    }, { id: "node-about-hero" })],
+    body: [
+      node(imageTextSchema, {
+          heading: "Duis aute irure dolor in reprehenderit",
+          text: doc(
+            p("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."),
+            p("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis."),
+            p("Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."),
+          ),
+      }, { id: "node-about-text", settings: { imageSide: "left" } }),
+      quote,
+      node(peopleSchema, { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] }, { id: "node-people" }),
+    ],
+  },
+});
+const about = await seedPage(
+  { slug: "about-us", title: "About us", template: "page", parentId: company.id, fi: { slug: "tietoa-meista", title: "Tietoa meistä" } },
+  {
+    en: aboutTree({ kicker: "About us", people: "Our people", description: "Lorem ipsum dolor sit amet — who we are and what we do." }),
+    fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki", description: "Lorem ipsum dolor sit amet — keitä olemme ja mitä teemme." }),
+  },
+);
+
+// A page under About us, shown in its sub-navigation through the Page
+// shape's `showInNavigation` field (spec 2026-09-10 page fields §7).
+const teamTree = (t: { heading: string; text: string; people: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.text },
+  zones: {
+    hero: [node(pageHeroSchema, { kicker: t.heading, heading: t.heading, text: t.text, image: img.about }, { id: "node-team-hero" })],
+    body: [node(peopleSchema, { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] }, { id: "node-team-people" })],
+  },
+});
+await seedPage(
+  { slug: "team", title: "Team", template: "page", parentId: about.id, fi: { slug: "tiimi", title: "Tiimi" } },
+  {
+    en: teamTree({ heading: "Team", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "The whole team" }),
+    fi: teamTree({ heading: "Tiimi", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "Koko tiimi" }),
+  },
+);
+
+console.log(
+  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us and its Team page${FI ? " (yritys/tietoa-meista/tiimi)" : ""}, one article, News (${newsAddress(EN)}${FI ? ` / ${newsAddress(FI)}` : ""}) with two posts, four people, header, footer, contact and quote — all published.`,
+);

package/templates/astro-lorem/src/components/ArticleCard.astro

@@ -0,0 +1,19 @@
+---
+// examples/astro/src/components/ArticleCard.astro
+// One article card: photo, first tag and date, title, excerpt. The grid item on the Articles page and in
+// Favourite articles; `compact` drops the excerpt for the Related list. The caller resolves the URL.
+import { Image } from "smoodly/astro/components";
+import { formatDate } from "@/components/articles";
+
+const { article, url, locale, compact = false } = Astro.props;
+const Title = compact ? "h3" : "h2";
+---
+<a class="card" href={url}>
+  {article.image && <Image image={article.image} class="card__image" sizes="(min-width: 900px) 33vw, 100vw" />}
+  <div class="card__meta">
+    {article.tags?.[0] && <span class="card__tag">{article.tags[0]}</span>}
+    {article.date && <span>{formatDate(article.date, locale)}</span>}
+  </div>
+  <Title class="card__title">{article.title}</Title>
+  {!compact && article.excerpt && <p class="card__excerpt">{article.excerpt}</p>}
+</a>

package/templates/astro-lorem/src/components/articles.ts

@@ -0,0 +1,42 @@
+// Small helpers shared by the Articles index, the article page and the
+// Favourite articles section — the article's URL, dates in the request
+// locale, and the read time from the richtext body.
+import type { ResolvedImage } from "smoodly";
+import { articles } from "@/smoodly/collections";
+
+export type ArticleFields = {
+  title: string;
+  slug: string;
+  excerpt?: string;
+  body?: unknown;
+  tags?: string[];
+  image?: ResolvedImage;
+  date: string;
+};
+
+/** The collection's segment in a locale: its per-locale path, or the
+ *  first declared one for a locale the map does not name. */
+function segment(locale: string): string {
+  const p = articles.path;
+  if (typeof p === "string") return p;
+  return p?.[locale] ?? Object.values(p ?? {})[0] ?? "posts";
+}
+
+export const articlesIndexPath = (locale: string) => `/${segment(locale)}`;
+
+export const formatDate = (iso: string, locale: string) =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(new Date(iso));
+
+/** A datetime field's UTC instant, shown in the site's zone (config.timeZone). */
+export const formatDateTime = (iso: string, locale: string, timeZone: string) =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).format(new Date(iso));
+
+type Node = { text?: string; content?: Node[] };
+export function richtextText(doc: unknown): string {
+  const walk = (n: Node): string => n.text ?? (n.content ?? []).map(walk).join(" ");
+  return walk((doc ?? {}) as Node);
+}
+
+/** Words / 200, at least one minute. */
+export const readingMinutes = (doc: unknown) =>
+  Math.max(1, Math.round(richtextText(doc).split(/\s+/).filter(Boolean).length / 200));