create-smoodly-app 0.0.16 → 0.0.18

package/templates/blank-intl/components/pages/Page.tsx

@@ -1,5 +1,6 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { Text } from "../sections/Text";
+import { LocaleNav } from "../LocaleNav";
 
 // An open page shape: no `slug`, so editors create as many as they like,
 // anywhere in the tree the config allows. `page` is where this one sits
@@ -8,7 +9,7 @@ export const pageSchema = smoodly.schema.page({
   name: "page",
   title: "Page",
   zones: {
-    body: z.freeform({ sections: [Text] }),
+    body: z.freeform({ sections: [Text], custom: true }),
   },
   meta: { seo: true },
 });
@@ -16,6 +17,7 @@ export const pageSchema = smoodly.schema.page({
 function PageView({ zones, page }: Props<typeof pageSchema>) {
   return (
     <>
+      <LocaleNav locale={page.locale} locales={page.locales} />
       <h1 className="container">{page.title}</h1>
       <Zone of={zones.body} />
     </>

package/templates/blank-intl/components/pages/Post.tsx

@@ -1,20 +1,24 @@
 import { smoodly, type EntryPageProps } from "smoodly";
 import { RichText } from "@/smoodly/richtext";
 import { posts } from "@/smoodly/collections";
+import { LocaleNav } from "../LocaleNav";
 
 // The entry page for `posts`, served at /posts/<slug>. It receives the
 // entry's fields; the body is richtext rendered by the site's bound
 // RichText, which knows the registered elements.
 type PostFields = { title: string; date?: string; body?: unknown };
 
-function PostView({ entry }: EntryPageProps) {
+function PostView({ entry, locale, locales }: EntryPageProps) {
   const post = entry.fields as PostFields;
   return (
-    <article className="container prose">
-      <h1>{post.title}</h1>
-      {post.date && <p><time dateTime={post.date}>{post.date.slice(0, 10)}</time></p>}
-      <RichText doc={post.body} />
-    </article>
+    <>
+      <LocaleNav locale={locale} locales={locales} />
+      <article className="container prose">
+        <h1>{post.title}</h1>
+        {post.date && <p><time dateTime={post.date}>{post.date.slice(0, 10)}</time></p>}
+        <RichText doc={post.body} />
+      </article>
+    </>
   );
 }
 

package/templates/blank-intl/components/sections/Text.tsx

@@ -5,8 +5,9 @@ import { text } from "@/smoodly/toolsets";
 // A section: a title and a richtext body. Registered in
 // smoodly/sections.ts and allowed in the page shapes' zones
 // (components/pages/*.tsx). Copy this file to add another section.
-// The section wrapper renders the root element and emits the config's
-// section styles as data attributes (data-tone here) for app/globals.css.
+// The section wrapper renders the root element, Smoodly's styles set
+// inline (spacing, width, align) and the node id; a setting the CSS
+// reads — here `background` — is the view's own data attribute.
 export const textSchema = smoodly.schema.section({
   name: "text",
   title: "Text",
@@ -15,6 +16,9 @@ export const textSchema = smoodly.schema.section({
     title: f.text(),
     body: f.richtext({ toolset: text }),
   },
+  settings: {
+    background: f.radio([{ value: "paper", label: "Paper" }, { value: "ink", label: "Ink" }]).default("paper"),
+  },
   sample: {
     title: "Hello",
     body: { type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text: "Write something here." }] }] },
@@ -25,9 +29,9 @@ export const textSchema = smoodly.schema.section({
 // select and inline-edit them on the canvas.
 const m = smoodly.marks(textSchema);
 
-function TextView({ title, body, styles }: Props<typeof textSchema>) {
+function TextView({ title, body, settings, styles }: Props<typeof textSchema>) {
   return (
-    <smoodly.Section styles={styles}>
+    <smoodly.Section styles={styles} className="text" data-background={settings.background}>
       <div className="container prose">
         <h2 {...m.field("title")}>{title}</h2>
         <div {...m.field("body")}><RichText doc={body} /></div>

package/templates/blank-intl/package.json

@@ -14,7 +14,7 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.16",
+    "smoodly": "0.0.18",
     "next-intl": "^4.14.2"
   },
   "devDependencies": {

package/templates/blank-intl/scripts/seed.ts

@@ -26,7 +26,7 @@ if (await pages.resolvePath(DEFAULT, "/")) {
 // Richtext is TipTap JSON, the stored format; RichText renders it.
 type Node = Record<string, unknown>;
 const p = (s: string): Node => ({ type: "paragraph", content: [{ type: "text", text: s }] });
-const button = (label: string, href: string): Node => ({ type: "element", attrs: { name: "button", fields: { label, href }, styles: {} } });
+const button = (label: string, href: string): Node => ({ type: "element", attrs: { name: "button", fields: { label, href }, settings: {} } });
 const doc = (...content: Node[]) => ({ type: "doc", content });
 
 // --- the site item: name and tagline, published in every locale ------
@@ -38,7 +38,7 @@ for (const locale of OTHERS) {
   await entries.setStatus("site", site.id, locale, "published");
 }
 
-// --- the home page: one Text section ---------------------------------
+// --- the home page: one Text section and one custom section ----------
 
 const tree = {
   meta: { description: "A new site, built with Smoodly." },
@@ -47,6 +47,7 @@ const tree = {
       {
         id: "node-hello",
         type: "text",
+        settings: { background: "paper" },
         fields: {
           title: "Hello",
           body: doc(
@@ -56,6 +57,17 @@ const tree = {
           ),
         },
       },
+      // The custom section: the editor's own rows of columns, rendered by Smoodly.
+      {
+        id: "node-custom",
+        type: "custom",
+        fields: { rows: [
+          { spans: [6, 6], gap: "md", align: "top", reverse: false, columns: [
+            doc(p("A custom section holds rows of columns. Drag the width bar in the inspector to resize them.")),
+            doc(p("Each column is richtext. Columns stack on small screens; the developer's stylesheet needs nothing.")),
+          ] },
+        ] },
+      },
     ],
   },
 } as unknown as PageTree;

package/templates/blank-intl/smoodly/config.ts

@@ -1,14 +1,14 @@
-import { defineConfig, f } from "smoodly";
+import { defineConfig } from "smoodly";
 import { routing } from "@/i18n/routing";
 import { collections } from "./collections";
 import { sections } from "./sections";
-import { shared } from "./shared";
+import { globals } from "./globals";
 import { elements } from "./elements";
 import { HomePage } from "@/components/pages/Home";
 import { StandardPage } from "@/components/pages/Page";
 import { PostPage } from "@/components/pages/Post";
 
-export { collections, sections, shared, elements };
+export { collections, sections, globals, elements };
 
 // The registry and the plain settings, one file. Runtime-free: nothing
 // here imports a route file or Next, so a script and the CLI's template
@@ -20,7 +20,7 @@ export const config = defineConfig({
     sections,
     elements,
     collections,
-    shared,
+    globals,
     pages: [HomePage, StandardPage, PostPage],
   },
   locales: { default: routing.defaultLocale, supported: [...routing.locales] },
@@ -28,11 +28,4 @@ export const config = defineConfig({
   homePageSlug: "home",
   // Editors can nest pages three deep.
   pages: { tree: { depth: 3 } },
-  // Every section gets this select beside its own styles; the section
-  // wrapper emits it as data-tone, and app/globals.css styles it.
-  styles: {
-    sections: {
-      tone: f.select(["paper", "ink"]).default("paper"),
-    },
-  },
 });

package/templates/blank-intl/smoodly/{shared.ts → globals.ts}

@@ -1,10 +1,10 @@
-// Shared content: code-declared singletons, edited once under Globals
+// Global content: code-declared singletons, edited once under Globals
 // and read anywhere. `site` is an object item — fields code consumes;
-// the layout reads it through q().getShared("site"). A visual item
+// the layout reads it through q().getGlobal("site"). A visual item
 // (`section: SomeSection`) renders through a section instead.
 import { f, smoodly } from "smoodly";
 
-export const site = smoodly.shared({
+export const site = smoodly.global({
   name: "site",
   title: "Site",
   fields: {
@@ -13,4 +13,4 @@ export const site = smoodly.shared({
   },
 });
 
-export const shared = [site];
+export const globals = [site];

package/templates/blank-intl/smoodly/server.ts

@@ -15,10 +15,10 @@ import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admi
 import { createPageRenderer, createSmoodlyQueries, type PageRegistration } from "smoodly/next";
 import type { SupabaseClient } from "@supabase/supabase-js";
 import { getPathname } from "@/i18n/navigation";
-import { collections, config, elements, sections, shared } from "./config";
+import { collections, config, elements, sections, globals } from "./config";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
-type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof shared>>;
+type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof globals>>;
 type Bound = {
   db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer; q: Queries;
 };
@@ -32,9 +32,11 @@ function bound(): Bound {
   // 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 entries = new SupabaseEntryStore(db, collections, { paths, locales, globals, elements });
   const pages = new SupabasePageStore(db, {
     sections, elements, entries, paths, locales,
+    // The custom section's columns toolset, so a column's images count as usage (spec 2026-09-14 §6).
+    custom: config.custom,
     homePageSlug: config.homePageSlug,
     tree: config.pages?.tree,
   });
@@ -47,15 +49,16 @@ function bound(): Bound {
   // 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 site = createSmoodlySite({ stores, collections, globals, sections, elements, locales, homePageSlug: config.homePageSlug, styles: config.styles, custom: config.custom, pages: config.registry.pages ?? [] });
   const renderer = createPageRenderer({
     site,
     sections,
+    elements,
     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 });
+  const q = createSmoodlyQueries({ site, collections, globals });
   cached = { db, pages, entries, assets, auth, site, renderer, q };
   return cached;
 }
@@ -84,7 +87,7 @@ export function publicAuth(): AuthConfig {
 export const href = (path: string, locale: string) => getPathname({ locale, href: path });
 
 /** The read API (spec 2026-09-11) for layouts and page views that fetch:
- * `q().getEntries("articles", { locale, limit: 3 })`, `q().getShared("header",
+ * `q().getEntries("articles", { locale, limit: 3 })`, `q().getGlobal("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. */

package/templates/blank-intl/supabase/migrations/00000000000000_smoodly.sql

@@ -110,7 +110,7 @@ create index if not exists "entry_locales_status_idx"
 -- A version belongs to ONE locale of one entry and stores the MERGED
 -- fields (shared + localized + slug) as they were at that save, so
 -- restoring an old Finnish version restores the shared fields too.
--- Rows for every collection and every shared item (spec 2026-09-14 §1).
+-- Rows for every collection and every global item (spec 2026-09-14 §1).
 -- One row per publish plus the live draft (spec 2026-09-13 history §1).
 create table if not exists "entry_versions" (
   "id" uuid primary key default gen_random_uuid(),

package/templates/lorem/AGENTS.md

@@ -8,8 +8,8 @@ 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`
+  collection and global item is listed in its barrel (`sections.ts`,
+  `elements.ts`, `collections.ts`, `globals.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

package/templates/lorem/README.md

@@ -10,9 +10,10 @@ for an agent (or a person) building the site.
 
 - `app/(site)/page.tsx` — the home page: one line calling renderSmoodlyPath([]).
 - `app/(site)/[...path]/page.tsx` — every other page and every collection entry, at any depth.
-- `app/(site)/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the header and footer from shared content; the admin has its own under `app/(smoodly)/admin/`.
+- `app/(site)/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the footer from global content; the admin has its own under `app/(smoodly)/admin/`.
 - `components/pages/` — the page shapes and the entry page: `Home` (locked hero, freeform body), `Articles` (a fixed page at the collection's path — its index — with a code-fetched grid), `Page` (open; About lives here), `Article` (the entry page).
-- `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the shared items. Add one, list it in `smoodly/sections.ts`.
+- `components/PageFrame.tsx` — the header and `<main>` every page view renders (a layout cannot know which page is on screen); with more than one locale, the language links from the page's `locales` map — the same page in the other language, or its home when there is no translation.
+- `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the global items. Add one, list it in `smoodly/sections.ts`.
 - `components/strings.ts`, `messages/` — the site's own UI strings and the request locale, one seam.
 - `public/images/` — the starter's photos; image fields hold URLs like `/images/hero_image.jpg`.
 - `scripts/seed.ts` — the starter content, written through the stores. `npm run seed` is idempotent.
@@ -24,11 +25,11 @@ for an agent (or a person) building the site.
 
 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 shared **quote** placed from the picker's Shared group, points (a list with a minimum and a maximum, an object per item), favourite articles (an editor-picked list of refs).
+- **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 folder and a page under it (the breadcrumb), the same body sections, plus people.
 - **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.
-- **Shared content** — the header and footer the layout renders, the contact details the footer reads, the quote pages place.
+- **Global content** — the header every page renders through `components/PageFrame.tsx`, the footer the layout renders, the contact details the footer reads, the quote pages place.
 
 Reseed an empty database any time with `npm run seed`.
 

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

@@ -1,6 +1,5 @@
 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 { q } from "@/smoodly/server";
 import "../globals.css";
@@ -14,20 +13,20 @@ export const metadata = { title: "Lorem Co." };
 // 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.
+// which is fine: they are separate apps in spirit. The footer and the
+// contact block are global content: read through `q`, cached under their
+// tag, null until published. The header is NOT here: every page view
+// renders it through components/PageFrame.tsx, the same file that carries
+// the language links in a multilingual site (spec 2026-09-15).
 export default async function RootLayout({ children }: { children: ReactNode }) {
-  const [headerProps, footerProps, contactFields] = await Promise.all([
-    q().getShared("header"),
-    q().getShared("footer"),
-    q().getShared("contact"),
+  const [footerProps, contactFields] = await Promise.all([
+    q().getGlobal("footer"),
+    q().getGlobal("contact"),
   ]);
   return (
     <html lang="en" className={`${serif.variable} ${sans.variable}`}>
       <body>
-        {headerProps && <HeaderView {...headerProps} />}
-        <main>{children}</main>
+        {children}
         {footerProps && <FooterView {...footerProps} contact={contactFields} />}
       </body>
     </html>

package/templates/lorem/app/globals.css

@@ -1,11 +1,18 @@
 /* Lorem Co. — the starter's one stylesheet.
    Tokens from the design, base rules, then one block per section and
-   page in page order. Sections carry data-spacing and data-tone from
-   the config's section styles; the site header and footer are shared
-   items rendered by the layout. Photos crop with object-fit: cover at
-   the design's aspect ratios. */
+   page in page order. Each section carries its own padding; the editor's
+   Spacing & layout steps (Smoodly's styles set, smoodly/config.ts) render
+   inline through the section wrapper and read the --space-* / --width-*
+   variables below. A section's `background` setting is its own data
+   attribute. The site header and footer are global items rendered by
+   the layout. Photos crop with object-fit: cover at the design's aspect
+   ratios. */
 
 :root {
+  /* Smoodly's styles set reads these (smoodly/config.ts): editor steps become padding, width, alignment. */
+  --space-sm: 24px; --space-md: 48px; --space-lg: 72px;
+  --width-narrow: 640px; --width-wide: 1440px;
+
   --paper: #faf7f2;
   --ink: #1f1b17;
   --accent: #d9653a;
@@ -15,9 +22,12 @@
   --body: #3a342e;
   --radius: 6px;
   --container: 1200px;
+  /* The custom section's rows share the container's side padding (spec 2026-09-14 §6). */
+  --smd-gutter: 32px;
   --serif: var(--font-serif), Georgia, serif;
   --sans: var(--font-sans), Helvetica, Arial, sans-serif;
 }
+@media (min-width: 768px) { :root { --space-sm: 32px; --space-md: 64px; --space-lg: 96px; } }
 
 /* ---------- base ---------- */
 
@@ -39,7 +49,8 @@ img { display: block; max-width: 100%; }
 h1, h2, h3, p, blockquote, address { margin: 0; }
 address { font-style: normal; }
 
-.container { max-width: var(--container); width: 100%; margin: 0 auto; padding-inline: 32px; }
+/* The container reads the editor's width step; without one, the design's width. */
+.container { max-width: var(--smd-width, var(--container)); width: 100%; margin: 0 auto; padding-inline: 32px; }
 
 .kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
 .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
@@ -52,48 +63,40 @@ address { font-style: normal; }
 .button--outline:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
 
 /* Richtext (RichText renders bare elements) */
-.prose { display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.65; color: var(--muted); }
-.prose p { text-wrap: pretty; }
-.prose h2, .prose h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
-.prose h2 { font-size: 32px; margin-top: 8px; }
-.prose h3 { font-size: 24px; }
-.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
-.prose blockquote { margin: 8px 0; padding-left: 24px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink); }
-.prose a { color: var(--accent); text-decoration: underline; }
+/* The custom section's columns (.smd-col) read like prose (spec 2026-09-14 §6). */
+.prose, .smd-col{ display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.65; color: var(--muted); }
+.prose p, .smd-col p{ text-wrap: pretty; }
+.prose h2, .prose h3, .smd-col h2, .smd-col h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
+.prose h2, .smd-col h2{ font-size: 32px; margin-top: 8px; }
+.prose h3, .smd-col h3{ font-size: 24px; }
+.prose ul, .prose ol, .smd-col ul, .smd-col ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
+.prose blockquote, .smd-col blockquote{ margin: 8px 0; padding-left: 24px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink); }
+.prose a, .smd-col a{ color: var(--accent); text-decoration: underline; }
 .prose--lead { gap: 24px; font-size: 18px; line-height: 1.7; color: var(--body); }
 .prose--lead > p:first-child { font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--ink); }
 
 /* ---------- richtext block nodes: images, callout, cta ---------- */
-.prose figure { margin: 8px 0; }
-.prose figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
-.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
-.prose .callout { margin: 8px 0; padding: 20px 24px; border-radius: var(--radius); border-left: 3px solid var(--accent); background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
-.prose .callout[data-tone="success"] { border-left-color: #3a8f5c; }
-.prose .callout[data-tone="warning"] { border-left-color: #c9962b; background: #fff8e8; }
-.prose .callout__title { color: var(--ink); font-size: 15px; letter-spacing: 0.02em; }
-.prose .callout__body { display: flex; flex-direction: column; gap: 8px; }
-.prose .cta { margin: 16px 0; padding: 28px 32px; border-radius: var(--radius); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
-.prose .cta[data-variant="outline"] { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
-.prose .cta__heading { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; display: block; }
-.prose .cta__text { margin: 6px 0 0; font-size: 15px; color: inherit; opacity: 0.8; }
-.prose .cta .button { background: var(--paper); color: var(--ink); flex: none; }
-.prose .cta[data-variant="outline"] .button { background: var(--ink); color: var(--paper); }
-
-/* ---------- section styles: the config's spacing and tone ---------- */
-
-/* Every section in the page body gets the medium spacing by element,
-   not by attribute: a node saved without an explicit style carries no
-   data-spacing (the config's default is not filled at render), so the
-   attribute selectors below only handle the two non-default values. */
-main > section { padding-block: 56px; }
-[data-spacing="sm"] { padding-block: 32px; }
-[data-spacing="lg"] { padding-block: 88px; }
-[data-tone="ink"] { background: var(--ink); color: var(--paper); }
-[data-tone="ink"] .prose, [data-tone="ink"] .hero__text, [data-tone="ink"] .page-hero__text,
-[data-tone="ink"] .point__text, [data-tone="ink"] .card__meta, [data-tone="ink"] .card__excerpt,
-[data-tone="ink"] .person__role, [data-tone="ink"] .quote__attribution { color: var(--line); }
-[data-tone="ink"] .button { background: var(--paper); color: var(--ink); }
-[data-tone="ink"] .button--outline { background: transparent; color: var(--paper); border-color: var(--muted); }
+.prose figure, .smd-col figure{ margin: 8px 0; }
+/* Inline, so the section's align step moves an image with the text around it. */
+.prose figure img, .smd-col figure img{ display: inline-block; vertical-align: top; max-width: 100%; height: auto; border-radius: var(--radius); }
+.prose figcaption, .smd-col figcaption{ margin-top: 8px; font-size: 14px; color: var(--muted); }
+.prose .callout, .smd-col .callout{ margin: 8px 0; padding: 20px 24px; border-radius: var(--radius); border-left: 3px solid var(--accent); background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
+.prose .callout[data-tone="success"], .smd-col .callout[data-tone="success"]{ border-left-color: #3a8f5c; }
+.prose .callout[data-tone="warning"], .smd-col .callout[data-tone="warning"]{ border-left-color: #c9962b; background: #fff8e8; }
+.prose .callout__title, .smd-col .callout__title{ color: var(--ink); font-size: 15px; letter-spacing: 0.02em; }
+.prose .callout__body, .smd-col .callout__body{ display: flex; flex-direction: column; gap: 8px; }
+.prose .cta, .smd-col .cta{ margin: 16px 0; padding: 28px 32px; border-radius: var(--radius); background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
+.prose .cta[data-variant="outline"], .smd-col .cta[data-variant="outline"]{ background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
+.prose .cta__heading, .smd-col .cta__heading{ font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; display: block; }
+.prose .cta__text, .smd-col .cta__text{ margin: 6px 0 0; font-size: 15px; color: inherit; opacity: 0.8; }
+.prose .cta .button, .smd-col .cta .button{ background: var(--paper); color: var(--ink); flex: none; }
+.prose .cta[data-variant="outline"] .button, .smd-col .cta[data-variant="outline"] .button{ background: var(--ink); color: var(--paper); }
+
+/* ---------- section background: the quote's own `background` setting (Paper / Ink) ---------- */
+
+[data-background="ink"] { background: var(--ink); color: var(--paper); }
+[data-background="ink"] .quote__attribution { color: var(--line); }
+[data-background="ink"].quote { border-color: transparent; }
 
 /* ---------- header ---------- */
 
@@ -105,6 +108,7 @@ main > section { padding-block: 56px; }
 
 /* ---------- hero (home) ---------- */
 
+.hero { padding-block: 56px; }
 .hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
 .hero__copy { display: flex; flex-direction: column; gap: 24px; }
 .hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
@@ -114,6 +118,7 @@ main > section { padding-block: 56px; }
 
 /* ---------- page hero ---------- */
 
+.page-hero { padding-block: 56px; }
 .page-hero__inner { display: flex; flex-direction: column; gap: 40px; }
 .page-hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
 .page-hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
@@ -122,6 +127,7 @@ main > section { padding-block: 56px; }
 
 /* ---------- image and text ---------- */
 
+.image-text { padding-block: 56px; }
 .image-text__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
 .image-text__image { width: 100%; border-radius: var(--radius); }
 [data-image-side="right"] .image-text__image { order: 2; }
@@ -130,13 +136,14 @@ main > section { padding-block: 56px; }
 
 /* ---------- quote ---------- */
 
-.quote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.quote { padding-block: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
 .quote__inner { max-width: 880px; margin: 0 auto; padding-inline: 32px; text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
 .quote__text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
 .quote__attribution { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
 
 /* ---------- points ---------- */
 
+.points { padding-block: 56px; }
 .points .container { display: flex; flex-direction: column; gap: 48px; }
 .points__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
 .point { display: flex; flex-direction: column; gap: 16px; }
@@ -146,6 +153,7 @@ main > section { padding-block: 56px; }
 
 /* ---------- article cards (favourites, index, related) ---------- */
 
+.favourites { padding-block: 56px; }
 .favourites .container, .related .container { display: flex; flex-direction: column; gap: 40px; }
 .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 32px; }
 .card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@@ -161,6 +169,7 @@ h3.card__title { font-size: 24px; }
 
 /* ---------- people ---------- */
 
+.people { padding-block: 56px; }
 .people .container { display: flex; flex-direction: column; gap: 40px; }
 .people__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 32px; }
 .person { display: flex; flex-direction: column; gap: 12px; }

package/templates/lorem/components/PageFrame.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { LocaleAlternate } from "smoodly";
+import { href, q } from "@/smoodly/server";
+import { HeaderView, type LocaleLink } from "./sections/Header";
+
+// The header and the <main> around a page's content, rendered by every
+// page view rather than the layout: a layout cannot know which page is on
+// screen (Next renders the two concurrently), and the language links must
+// land on the same page in the other language. `locales` is the page's or
+// entry's map (spec 2026-09-15): the other locale's path where the page
+// exists and is published there, that locale's home otherwise. With one
+// locale (the single-language scaffold) there are no links at all. The
+// header itself is the global item, read through `q` per locale.
+export async function PageFrame({ locale, locales, children }: {
+  locale: string;
+  locales: Record<string, LocaleAlternate | null>;
+  children: ReactNode;
+}) {
+  const header = await q().getGlobal("header", { locale });
+  const codes = Object.keys(locales);
+  const links: LocaleLink[] | undefined = codes.length > 1
+    ? codes.map((code) => ({ code, url: href(locales[code]?.path ?? "/", code), current: code === locale }))
+    : undefined;
+  return (
+    <>
+      {header && <HeaderView {...header} locales={links} />}
+      <main>{children}</main>
+    </>
+  );
+}

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

@@ -14,7 +14,7 @@ export const calloutSchema = smoodly.schema.element({
     title: f.text().max(80),
     body: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
   },
-  styles: {
+  settings: {
     tone: f.select([{ value: "info", label: "Info" }, { value: "success", label: "Success" }, { value: "warning", label: "Warning" }]).default("info"),
   },
   sample: {
@@ -23,9 +23,9 @@ export const calloutSchema = smoodly.schema.element({
   },
 });
 
-function CalloutView({ title, body, styles }: Props<typeof calloutSchema>) {
+function CalloutView({ title, body, settings }: Props<typeof calloutSchema>) {
   return (
-    <aside className="callout" data-tone={styles.tone}>
+    <aside className="callout" data-tone={settings.tone}>
       <strong className="callout__title">{title}</strong>
       <div className="callout__body"><RichText doc={body} /></div>
     </aside>

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

@@ -14,20 +14,20 @@ export const ctaSchema = smoodly.schema.element({
     label: f.text().max(40),
     href: f.link(),
   },
-  styles: {
+  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" },
 });
 
-function CtaView({ heading, text, label, href, styles }: Props<typeof ctaSchema>) {
+function CtaView({ heading, text, label, href, settings }: Props<typeof ctaSchema>) {
   return (
-    <div className="cta" data-variant={styles.variant}>
+    <div className="cta" data-variant={settings.variant}>
       <div className="cta__copy">
         <strong className="cta__heading">{heading}</strong>
         {text && <p className="cta__text">{text}</p>}
       </div>
-      <a className={styles.variant === "outline" ? "button button--outline" : "button"} href={href}>{label}</a>
+      <a className={settings.variant === "outline" ? "button button--outline" : "button"} href={href}>{label}</a>
     </div>
   );
 }