create-smoodly-app 0.0.13 → 0.0.15

package/templates/lorem/app/(site)/[...path]/page.tsx

@@ -0,0 +1,15 @@
+import { renderSmoodlyPath, smoodlyMetadata } from "@/smoodly/server";
+
+type Params = Promise<{ path: string[] }>;
+type SearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+// Smoodly: everything else — pages at any depth and collection entries
+// under their `path`. Add app/(site)/<segment>/page.tsx beside this file
+// and it wins for that exact path; deeper paths still resolve here.
+export async function generateMetadata({ params }: { params: Params }) {
+  return smoodlyMetadata((await params).path);
+}
+
+export default async function Page({ params, searchParams }: { params: Params; searchParams: SearchParams }) {
+  return renderSmoodlyPath((await params).path, { searchParams });
+}

package/templates/{next/app → lorem/app/(site)}/layout.tsx

@@ -2,9 +2,8 @@ import type { ReactNode } from "react";
 import { Instrument_Sans, Newsreader } from "next/font/google";
 import { HeaderView } from "@/components/sections/Header";
 import { FooterView } from "@/components/sections/Footer";
-import { contact, footer, header } from "@/smoodly/shared";
-import { getSmoodlyShared } from "@/smoodly/server";
-import "./globals.css";
+import { q } from "@/smoodly/server";
+import "../globals.css";
 
 // The starter's two faces, as CSS variables globals.css reads.
 const serif = Newsreader({ subsets: ["latin", "latin-ext"], style: ["normal", "italic"], variable: "--font-serif" });
@@ -12,16 +11,17 @@ const sans = Instrument_Sans({ subsets: ["latin", "latin-ext"], weight: ["400",
 
 export const metadata = { title: "Lorem Co." };
 
-// The site's root layout. The admin has its own under app/(smoodly)/admin —
-// two root layouts, a full page load between them, which is fine: they
-// are separate apps in spirit. Header, footer and the contact block are
-// shared content: fetched here, cached under their tag, null until
-// published.
+// The site's root layout, in its own route group so the admin's layout
+// under app/(smoodly)/admin is a second root layout beside it rather than
+// a child of this one — two root layouts, a full page load between them,
+// which is fine: they are separate apps in spirit. Header, footer and the
+// contact block are shared content: read through `q`, cached under their
+// tag, null until published.
 export default async function RootLayout({ children }: { children: ReactNode }) {
   const [headerProps, footerProps, contactFields] = await Promise.all([
-    getSmoodlyShared(header),
-    getSmoodlyShared(footer),
-    getSmoodlyShared(contact),
+    q().getShared("header"),
+    q().getShared("footer"),
+    q().getShared("contact"),
   ]);
   return (
     <html lang="en" className={`${serif.variable} ${sans.variable}`}>

package/templates/lorem/app/(site)/page.tsx

@@ -0,0 +1,11 @@
+import { renderSmoodlyPath, smoodlyMetadata } from "@/smoodly/server";
+
+type SearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+// Smoodly: the home page. Editing this file replaces or wraps the CMS
+// home; the shapes it can render live in components/pages/.
+export const generateMetadata = () => smoodlyMetadata([]);
+
+export default async function Page({ searchParams }: { searchParams: SearchParams }) {
+  return renderSmoodlyPath([], { searchParams });
+}

package/templates/lorem/app/(smoodly)/admin/[[...segments]]/page.tsx

@@ -0,0 +1 @@
+export { AdminPage as default } from "@/smoodly/admin";

package/templates/lorem/app/(smoodly)/admin/layout.tsx

@@ -0,0 +1 @@
+export { AdminLayout as default } from "@/smoodly/admin";

package/templates/{next → lorem}/app/globals.css

@@ -173,6 +173,10 @@ h3.card__title { font-size: 24px; }
 .breadcrumb { padding-top: 24px; font-size: 14px; color: var(--muted); }
 .breadcrumb a:hover { color: var(--accent); }
 
+.subnav { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 12px; font-size: 14px; }
+.subnav a { color: var(--muted); }
+.subnav a:hover { color: var(--accent); }
+
 .articles-index { padding-bottom: 96px; }
 
 .article { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }

package/templates/{next-intl → lorem}/components/elements/Callout.tsx

@@ -15,7 +15,7 @@ export const calloutSchema = smoodly.schema.element({
     body: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
   },
   styles: {
-    tone: f.select(["info", "success", "warning"]).default("info"),
+    tone: f.select([{ value: "info", label: "Info" }, { value: "success", label: "Success" }, { value: "warning", label: "Warning" }]).default("info"),
   },
   sample: {
     title: "Good to know",

package/templates/{next → lorem}/components/elements/Cta.tsx

@@ -15,7 +15,7 @@ export const ctaSchema = smoodly.schema.element({
     href: f.link(),
   },
   styles: {
-    variant: f.select(["primary", "outline"]).default("primary"),
+    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/{next → lorem}/components/pages/Article.tsx

@@ -2,7 +2,7 @@ import { smoodly, type EntryPageProps } from "smoodly";
 import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
-import { site } from "@/smoodly/server";
+import { q } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
 import { articlePath, articlesIndexPath, formatDate, readingMinutes, type ArticleFields } from "../articles";
 import { ui } from "../strings";
@@ -16,7 +16,8 @@ import { ui } from "../strings";
 async function ArticleView({ entry }: EntryPageProps) {
   const { locale, t, url } = await ui();
   const a = entry.fields as ArticleFields & { author?: { name: string; role?: string } | null };
-  const related = (await site().getEntries("articles", { locale })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
+  // Four newest, minus this one, so three remain even when it is among them; the store applies the limit.
+  const related = (await q().getEntries("articles", { locale, limit: 4 })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
   const index = url(articlesIndexPath(locale));
   return (
     <>

package/templates/{next → lorem}/components/pages/Articles.tsx

@@ -3,16 +3,16 @@ import { PageHero } from "../sections/PageHero";
 import { ArticleCard } from "../ArticleCard";
 import { articlePath, type ArticleFields } from "../articles";
 import { ui } from "../strings";
-import { site } from "@/smoodly/server";
+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 fetches the
-// published articles through the site layer, newest first (the
-// collection's `order`). In the editor canvas the hero is the draft while
-// the grid shows published articles only: the content API is
-// published-only by design.
+// 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",
@@ -25,7 +25,7 @@ export const articlesSchema = smoodly.schema.page({
 
 async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
   const { locale, url } = await ui();
-  const items = await site().getEntries("articles", { locale });
+  const items = await q().getEntries("articles", { locale });
   return (
     <>
       <Zone of={zones.hero} />

package/templates/{next-intl → lorem}/components/pages/Page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { smoodly, z, Zone, type Props } from "smoodly";
+import { f, smoodly, z, Zone, type Props } from "smoodly";
 import { PageHero } from "../sections/PageHero";
 import { ImageText } from "../sections/ImageText";
 import { Points } from "../sections/Points";
@@ -19,9 +19,14 @@ export const pageSchema = smoodly.schema.page({
     body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
   },
   meta: { 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) },
 });
 
 function PageView({ zones, page }: Props<typeof pageSchema>) {
+  // Sub-navigation: the published children that opted in through their page field.
+  const shown = page.children.filter((c) => c.hasPage && c.fields.showInNavigation === true);
   return (
     <>
       {page.ancestors.length > 0 && (
@@ -34,6 +39,11 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
           {page.title}
         </nav>
       )}
+      {shown.length > 0 && (
+        <nav className="container subnav" aria-label="Pages in this section">
+          {shown.map((c) => <Link key={c.path} href={c.url}>{c.title}</Link>)}
+        </nav>
+      )}
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
     </>

package/templates/{next → lorem}/components/sections/ImageText.tsx

@@ -20,7 +20,7 @@ export const imageTextSchema = smoodly.schema.section({
     link: f.object({ label: f.text(), href: f.link() }).optional(),
   },
   styles: {
-    imageSide: f.select(["left", "right"]).default("left"),
+    imageSide: f.select([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
   },
   sample: {
     heading: "Duis aute irure dolor in reprehenderit",

package/templates/{next → lorem}/components/sections/Points.tsx

@@ -9,7 +9,7 @@ export const pointsSchema = smoodly.schema.section({
   fields: {
     heading: f.text(),
     points: f.list(f.object({
-      icon: f.select(["circle", "square", "diamond"]),
+      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),

package/templates/lorem/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+import { smoodlyImages } from "smoodly/image/config";
+
+// next/image may only optimize from the Supabase host named in SMOODLY_URL
+// (a local stack also needs Next's local-IP allowance; the helper sets it).
+const config: NextConfig = { images: smoodlyImages() };
+
+export default config;

package/templates/lorem/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "smoodly-site",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "seed": "tsx scripts/seed.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.113.0",
+    "next": "^16.3.4",
+    "react": "^19",
+    "react-dom": "^19",
+    "smoodly": "0.0.15"
+  },
+  "devDependencies": {
+    "@next/env": "^16.3.4",
+    "@types/node": "^26.4.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19.2.5",
+    "tsx": "^4",
+    "typescript": "^5"
+  }
+}

package/templates/{next-intl → lorem}/scripts/seed.ts

@@ -103,7 +103,7 @@ async function seedEntry(collection: string, en: Fields, fi?: Fields) {
   return row;
 }
 
-type Tree = { zones: Record<string, Node[]> };
+type Tree = { zones: Record<string, Node[]>; fields?: Record<string, unknown>; meta?: Record<string, unknown> };
 
 /** 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
@@ -251,6 +251,8 @@ const favourites = (heading: string): Node => ({
 });
 
 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.
@@ -299,7 +301,9 @@ await seedPage(
 // both locales with its own slug and title.
 const company = await seedPage({ slug: "company", title: "Company", template: null, fi: { slug: "yritys", title: "Yritys" } });
 
-const aboutTree = (t: { kicker: string; people: string }): Tree => ({
+const aboutTree = (t: { kicker: string; people: string; description: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.description },
   zones: {
     hero: [{
       id: "node-about-hero",
@@ -329,11 +333,32 @@ const aboutTree = (t: { kicker: string; people: string }): Tree => ({
     ],
   },
 });
-await seedPage(
+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" }), fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki" }) },
+  {
+    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: [{ id: "node-team-hero", type: "pageHero", fields: { kicker: t.heading, heading: t.heading, text: t.text, image: img.about } }],
+    body: [{ id: "node-team-people", type: "peopleSection", fields: { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] } }],
+  },
+});
+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${FI ? " (yritys/tietoa-meista)" : ""}, one article, four people, header, footer, contact and quote — all published.`,
+  `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, four people, header, footer, contact and quote — all published.`,
 );

package/templates/lorem/smoodly/admin.tsx

@@ -0,0 +1,6 @@
+import { createSmoodlyAdmin } from "smoodly/admin/next";
+import { config } from "./config";
+import { smoodlyOp } from "./ops";
+import { publicAuth } from "./server";
+
+export const { AdminPage, AdminLayout } = createSmoodlyAdmin({ config, op: smoodlyOp, auth: publicAuth });

package/templates/lorem/smoodly/ops.ts

@@ -0,0 +1,11 @@
+"use server";
+// The app's entire write surface for the admin: ONE exported action,
+// gated by the editors table. ('use server' modules may only export
+// async functions — hence the shape.)
+import { createAdminOpHandler, type AdminOpCall } from "smoodly/admin/next";
+import { config } from "./config";
+import { adminAuth, href, stores } from "./server";
+
+export async function smoodlyOp(call: AdminOpCall) {
+  return createAdminOpHandler({ config, ...stores(), auth: adminAuth(), href })(call);
+}

package/templates/lorem/smoodly/richtext.tsx

@@ -0,0 +1,7 @@
+// The site's richtext renderer, bound once: it knows the elements a body
+// may embed and renders body images through <SmoodlyImage>. Sections and
+// entry pages import RichText from here, never from the package root.
+import { createRichText } from "smoodly/richtext";
+import { elements } from "./elements";
+
+export const RichText = createRichText({ elements, sizes: "(min-width: 900px) 720px, 100vw" });

package/templates/lorem/smoodly/server.ts

@@ -0,0 +1,96 @@
+// Server-only glue: the client, both stores, the site layer and the
+// renderer, constructed lazily so `next build` doesn't need env vars at
+// import time. The env shape is the package's (SMOODLY_*); whether the
+// secret is a service-role key or a cloud write key is invisible here.
+//
+// Lazy on purpose, the site and renderer included: config.ts imports the
+// page shapes, and a page shape may import this file to read through
+// `q` (components/pages/Articles.tsx). That is a cycle, and the
+// admin route enters it from config.ts — so nothing here may read the
+// config at module scope.
+import {
+  createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseAssetStore, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
+} from "smoodly";
+import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admin/next";
+import { createPageRenderer, createSmoodlyQueries, type PageRegistration } from "smoodly/next";
+import type { SupabaseClient } from "@supabase/supabase-js";
+import { collections, config, elements, sections, shared } from "./config";
+
+type Renderer = ReturnType<typeof createPageRenderer>;
+type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof shared>>;
+type Bound = {
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer; q: Queries;
+};
+
+let cached: Bound | null = null;
+
+function bound(): Bound {
+  if (cached) return cached;
+  const env = smoodlyEnv();
+  const db = createSmoodlyClient(env);
+  // ONE path index for both stores: pages and entries share the URL space.
+  const paths = new SupabasePathIndex(db);
+  const locales = config.locales;
+  const entries = new SupabaseEntryStore(db, collections, { paths, locales, shared, elements });
+  const pages = new SupabasePageStore(db, {
+    sections, elements, entries, paths, locales,
+    homePageSlug: config.homePageSlug,
+    tree: config.pages?.tree,
+  });
+  // The media library: rows in `assets`, bytes in the public `media` bucket.
+  const assets = new SupabaseAssetStore(db);
+  const auth = supabaseAdminAuth({ authUrl: env.authUrl, authKey: env.authKey, db });
+  // Shadows the exported `stores` below on purpose: `createSmoodlySite`
+  // takes this local closure, not the export, so it never re-enters `bound()`.
+  const stores = () => ({ pages, entries, assets });
+  // The site layer: (locale, path) → page or entry, and the content API
+  // `q` wraps below. Not exported — the app reads through `q`, which adds
+  // draft awareness and the cache.
+  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug, pages: config.registry.pages ?? [] });
+  const renderer = createPageRenderer({
+    site,
+    sections,
+    pages: (config.registry.pages ?? []) as PageRegistration[],
+    href,
+  });
+  // The read API (spec 2026-09-11): typed by the registry, draft-aware, cached under tags the admin expires.
+  const q = createSmoodlyQueries({ site, collections, shared });
+  cached = { db, pages, entries, assets, auth, site, renderer, q };
+  return cached;
+}
+
+export function stores() {
+  const { pages, entries, assets } = bound();
+  return { pages, entries, assets };
+}
+
+/** The server-side client (seed script, one-off admin tasks). */
+export const client = () => bound().db;
+
+/** The admin gate: session verified against the auth project, editors row read with the write key. */
+export const adminAuth = () => bound().auth;
+
+/** What the browser needs to sign in — public values only. */
+export function publicAuth(): AuthConfig {
+  const env = smoodlyEnv();
+  return { url: env.authUrl, key: env.authKey };
+}
+
+/** Locale-relative CMS path → site URL: the one seam for the renderer
+ * (metadata alternates, the `page` prop's links) and the admin (canvas,
+ * View live). The identity for a single-language site; with next-intl it
+ * becomes a locale-prefixing lookup. */
+export const href = (path: string, _locale: string) => path;
+
+/** The read API (spec 2026-09-11) for layouts and page views that fetch:
+ * `q().getEntries("articles", { locale, limit: 3 })`, `q().getShared("header",
+ * { locale })`, `q().getPageTree({ locale })`. Typed by the registry, the
+ * live draft in the editor preview, cached under tags the admin expires.
+ * Rename it if `q` is not to your taste — this file is yours. */
+export const q = (): Queries => bound().q;
+
+/** The two route files call these. */
+export const renderSmoodlyPath: Renderer["renderSmoodlyPath"] = (...args) => bound().renderer.renderSmoodlyPath(...args);
+export const smoodlyMetadata: Renderer["smoodlyMetadata"] = (...args) => bound().renderer.smoodlyMetadata(...args);
+export const renderSmoodlyPage: Renderer["renderSmoodlyPage"] = (...args) => bound().renderer.renderSmoodlyPage(...args);
+export const smoodlyPageMetadata: Renderer["smoodlyPageMetadata"] = (...args) => bound().renderer.smoodlyPageMetadata(...args);

package/templates/lorem/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/templates/lorem-intl/AGENTS.md

@@ -0,0 +1,50 @@
+# Working in this Smoodly site
+
+This is a Next.js app with Smoodly installed: content lives in Supabase,
+the admin is mounted at /admin from the `smoodly` package, and the site
+reads content through `smoodly/server.ts`. Read README.md first: it says
+where things are.
+
+## Rules
+
+- **Register everything in `smoodly/`.** Every section, element,
+  collection and shared item is listed in its barrel (`sections.ts`,
+  `elements.ts`, `collections.ts`, `shared.ts`) and `smoodly/config.ts`
+  is the one registry. A component that is not registered does not exist
+  for the admin.
+- **A new collection is a new migration.** Write its view with
+  `collectionSQL` from `smoodly` into a new file under
+  `supabase/migrations/`, then apply it: `supabase db push` (hosted) or
+  `supabase db reset` (local). The admin cannot list a collection whose
+  view is missing.
+- **Seed through the stores.** `scripts/seed.ts` is starter content,
+  written through the page and entry stores, never raw SQL. It is
+  idempotent; run it with `npm run seed`.
+- **Never import the admin into the site.** Nothing under `app/(site)`,
+  `app/[locale]` or `components/` may import `@/smoodly/admin` or
+  `smoodly/admin/next`; the admin's chunk must not reach visitors.
+- **Two root layouts.** The site's layout lives in its route group or
+  locale segment and is never the admin's parent; `app/(smoodly)/admin`
+  is a second root layout. Do not add an `app/layout.tsx`.
+- **Toolsets and elements.** A richtext field names a toolset
+  (`smoodly/toolsets.ts`); a toolset embeds elements by value; the config
+  must register those elements too. Files the toolset imports use
+  relative paths, not `@/`.
+- **Section styles are data attributes.** `<smoodly.Section>` renders the
+  root element and emits the config's section styles as `data-*`
+  attributes; `app/globals.css` styles them. Marks
+  (`smoodly.marks(schema)`) tie rendered elements to fields so the
+  editor can select and edit them in place.
+- **Multilingual sites.** Content locales are Smoodly's; URL locales are
+  next-intl's. The locale set is `i18n/routing.ts`. UI strings of the
+  site's own go through next-intl's messages in `messages/<locale>.json`.
+- **Fixed versus open pages.** A page shape 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:3000, /admin is the editor
+    npm run build        # next build
+    npm run seed         # starter content, idempotent
+    npm run typecheck    # tsc --noEmit

package/templates/lorem-intl/CLAUDE.md

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

package/templates/{next-intl → lorem-intl}/README.md

@@ -1,7 +1,8 @@
 # Smoodly site
 
 Created by `create-smoodly-app`. Content lives in Supabase; the admin is
-mounted at `/admin` from the `smoodly` package.
+mounted at `/admin` from the `smoodly` package. AGENTS.md holds the rules
+for an agent (or a person) building the site.
 
     npm run dev          # http://localhost:3000 — /admin is the editor
 

package/templates/lorem-intl/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.next/
+.env.local
+next-env.d.ts
+*.tsbuildinfo

package/templates/lorem-intl/app/(smoodly)/admin/[[...segments]]/page.tsx

@@ -0,0 +1 @@
+export { AdminPage as default } from "@/smoodly/admin";

package/templates/lorem-intl/app/(smoodly)/admin/layout.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { AdminLayout } from "@/smoodly/admin";
+
+// The admin's own root layout: the site's is app/[locale]/layout.tsx and
+// the admin sits outside the locale segment (the proxy skips /admin), so
+// Next needs a second <html> here.
+export default function AdminRootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <AdminLayout>{children}</AdminLayout>
+      </body>
+    </html>
+  );
+}

package/templates/lorem-intl/app/[locale]/[...path]/page.tsx

@@ -0,0 +1,18 @@
+import { renderSmoodlyPath, smoodlyMetadata } from "@/smoodly/server";
+
+type Params = Promise<{ locale: string; path: string[] }>;
+type SearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+// Smoodly: everything else — pages at any depth and collection entries
+// under their `path`, with translated segments per locale. Add
+// app/[locale]/<segment>/page.tsx beside this file and it wins for that
+// exact path; deeper paths still resolve here.
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale, path } = await params;
+  return smoodlyMetadata(path, { locale });
+}
+
+export default async function Page({ params, searchParams }: { params: Params; searchParams: SearchParams }) {
+  const { locale, path } = await params;
+  return renderSmoodlyPath(path, { locale, searchParams });
+}

package/templates/{next-intl → lorem-intl}/app/[locale]/layout.tsx

@@ -5,8 +5,7 @@ import { hasLocale, NextIntlClientProvider } from "next-intl";
 import { routing } from "@/i18n/routing";
 import { HeaderView } from "@/components/sections/Header";
 import { FooterView } from "@/components/sections/Footer";
-import { contact, footer, header } from "@/smoodly/shared";
-import { getSmoodlyShared, href } from "@/smoodly/server";
+import { href, q } from "@/smoodly/server";
 import "../globals.css";
 
 // The starter's two faces, as CSS variables globals.css reads.
@@ -18,16 +17,16 @@ export const metadata = { title: "Lorem Co." };
 // The site's root layout. The admin has its own under app/(smoodly)/admin —
 // two root layouts, a full page load between them, which is fine: they
 // are separate apps in spirit. Header, footer and the contact block are
-// shared content: fetched here, cached per locale under their tag, null
+// shared content: read through `q`, cached per locale under their tag, null
 // until published in this locale. The header also gets the locale links
 // — the visitor's only language switch, since locale detection is off.
 export default async function LocaleLayout({ children, params }: { children: ReactNode; params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   if (!hasLocale(routing.locales, locale)) notFound();
   const [headerProps, footerProps, contactFields] = await Promise.all([
-    getSmoodlyShared(header, { locale }),
-    getSmoodlyShared(footer, { locale }),
-    getSmoodlyShared(contact, { locale }),
+    q().getShared("header", { locale }),
+    q().getShared("footer", { locale }),
+    q().getShared("contact", { locale }),
   ]);
   const locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
   return (