create-smoodly-app 0.0.16 → 0.0.17

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,9 @@ 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 header and 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/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 +24,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 and 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

@@ -15,13 +15,13 @@ export const metadata = { title: "Lorem Co." };
 // 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
+// contact block are global 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([
-    q().getShared("header"),
-    q().getShared("footer"),
-    q().getShared("contact"),
+    q().getGlobal("header"),
+    q().getGlobal("footer"),
+    q().getGlobal("contact"),
   ]);
   return (
     <html lang="en" className={`${serif.variable} ${sans.variable}`}>

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/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>
   );
 }

package/templates/lorem/components/pages/Home.tsx

@@ -11,16 +11,16 @@ import { Quote } from "../sections/Quote";
 // duplicate — and the config's homePageSlug maps that record to "/".
 // The hero is locked: fields only, never added, moved or removed. The
 // body is freeform over five sections. Quote is among them because the
-// picker offers a shared item only where the zone allows its section: an
-// editor may drop a one-off quote, or place the shared one from the
-// picker's Shared group.
+// picker offers a global item only where the zone allows its section: an
+// editor may drop a one-off quote, or place the global one from the
+// picker's Global group.
 export const homeSchema = smoodly.schema.page({
   name: "home",
   title: "Home",
   slug: "home",
   zones: {
     hero: z.locked(Hero),
-    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
+    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote], custom: true }),
   },
   meta: { seo: true },
 });

package/templates/lorem/components/pages/Page.tsx

@@ -16,7 +16,7 @@ export const pageSchema = smoodly.schema.page({
   title: "Page",
   zones: {
     hero: z.locked(PageHero),
-    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
+    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote], custom: true }),
   },
   meta: { seo: true },
   // A page field (spec 2026-09-10 page fields §7): the parent's view lists

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

@@ -1,7 +1,7 @@
 import { f, smoodly, type Props, type Scope } from "smoodly";
 
-// The site footer — a VISUAL shared item (smoodly/shared.ts): one row,
-// edited under Shared content, rendered by the layout. Three link columns
+// The site footer — a VISUAL global item (smoodly/globals.ts): one row,
+// edited under Global content, rendered by the layout. Three link columns
 // as top-level objects, each localized as a whole (an object holding a
 // list — one level, which the list field allows; a list of columns each
 // holding a list would be a nested list, which it refuses). The layout
@@ -28,6 +28,8 @@ export const footerSchema = smoodly.schema.section({
     social: { title: "Social", links: [{ label: "Instagram", href: "#" }] },
     copyright: "© 2026 Lorem Co. Built with Smoodly.",
   },
+  // The layout's footer keeps the design's spacing: no Spacing & layout group.
+  styles: false,
 });
 
 export type ContactFields = { email: string; phone?: string; address: string };

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

@@ -1,7 +1,7 @@
 import { f, smoodly, type Props } from "smoodly";
 
-// The site header — a VISUAL shared item (smoodly/shared.ts): one row,
-// edited under Shared content, rendered by the layout, never placed in a
+// The site header — a VISUAL global item (smoodly/globals.ts): one row,
+// edited under Global content, rendered by the layout, never placed in a
 // page. The brand is the same in every language; the nav is a list of
 // links localized as a whole, so each language has its own labels and
 // hrefs. The layout renders HeaderView directly to hand it the locale
@@ -16,6 +16,8 @@ export const headerSchema = smoodly.schema.section({
     nav: f.list(f.object({ label: f.text(), href: f.link() })).localized(),
   },
   sample: { brand: "Lorem Co.", nav: [{ label: "Home", href: "/" }] },
+  // Nobody pads the header from the editor: no Spacing & layout group.
+  styles: false,
 });
 
 export type LocaleLink = { code: string; url: string; current: boolean };

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

@@ -3,7 +3,7 @@ import { RichText } from "@/smoodly/richtext";
 import { SmoodlyImage } from "smoodly/image";
 
 // A photo beside a heading and richtext, the photo on either side (a
-// style, not a field: styles are never translated). Without a photo the
+// setting, not a field: settings are never translated). Without a photo the
 // heading takes the left column and the text the right — the About
 // page's text block. The richtext renders through the package's
 // RichText: paragraphs, headings, lists, quotes.
@@ -19,8 +19,8 @@ export const imageTextSchema = smoodly.schema.section({
     text: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
     link: f.object({ label: f.text(), href: f.link() }).optional(),
   },
-  styles: {
-    imageSide: f.select([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
+  settings: {
+    imageSide: f.radio([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
   },
   sample: {
     heading: "Duis aute irure dolor in reprehenderit",
@@ -33,7 +33,7 @@ export const imageTextSchema = smoodly.schema.section({
 
 const m = smoodly.marks(imageTextSchema);
 
-function ImageTextView({ image, heading, text, link, styles }: Props<typeof imageTextSchema>) {
+function ImageTextView({ image, heading, text, link, settings, styles }: Props<typeof imageTextSchema>) {
   const linkMarks = m.object("link");
   const body = (
     <>
@@ -42,7 +42,7 @@ function ImageTextView({ image, heading, text, link, styles }: Props<typeof imag
     </>
   );
   return (
-    <smoodly.Section styles={styles} className="image-text">
+    <smoodly.Section styles={styles} className="image-text" data-image-side={settings.imageSide}>
       <div className="container image-text__grid">
         {image ? (
           <>

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

@@ -1,9 +1,9 @@
 import { f, smoodly, type Props } from "smoodly";
 
-// A pull quote. Registered as a shared item (smoodly/shared.ts): one row
-// edited under Shared content, placed on pages from the "+" picker's
-// Shared group as a linked node. The body zones also list it, because
-// the picker offers a shared item only where the zone allows its
+// A pull quote. Registered as a global item (smoodly/globals.ts): one row
+// edited under Global content, placed on pages from the "+" picker's
+// Global group as a linked node. The body zones also list it, because
+// the picker offers a global item only where the zone allows its
 // section — so an editor may also drop a one-off quote.
 export const quoteSchema = smoodly.schema.section({
   name: "quote",
@@ -13,6 +13,9 @@ export const quoteSchema = smoodly.schema.section({
     text: f.text().localized(),
     attribution: f.text().localized(),
   },
+  settings: {
+    background: f.radio([{ value: "paper", label: "Paper" }, { value: "ink", label: "Ink" }]).default("paper"),
+  },
   sample: {
     text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.",
     attribution: "Jane Doe, Founder",
@@ -21,9 +24,9 @@ export const quoteSchema = smoodly.schema.section({
 
 const m = smoodly.marks(quoteSchema);
 
-function QuoteView({ text, attribution, styles }: Props<typeof quoteSchema>) {
+function QuoteView({ text, attribution, settings, styles }: Props<typeof quoteSchema>) {
   return (
-    <smoodly.Section styles={styles} className="quote">
+    <smoodly.Section styles={styles} className="quote" data-background={settings.background}>
       <div className="quote__inner">
         <blockquote className="quote__text">“<span {...m.field("text")}>{text}</span>”</blockquote>
         <p className="quote__attribution" {...m.field("attribution")}>{attribution}</p>

package/templates/lorem/package.json

@@ -14,7 +14,7 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.16"
+    "smoodly": "0.0.17"
   },
   "devDependencies": {
     "@next/env": "^16.3.4",

package/templates/lorem/scripts/seed.ts

@@ -48,9 +48,9 @@ const bullets = (...items: string[]): Node => ({ type: "bulletList", content: it
 // 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)) }, styles: { tone } } });
+  ({ 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 }, styles: { variant: "primary" } } });
+  ({ 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 through
@@ -86,7 +86,7 @@ const paths = (locale: string) => ({
   about: href(locale === FI ? "/yritys/tietoa-meista" : "/company/about-us", locale),
 });
 
-/** Create an entry (a collection's or a shared item's) in EN, add the FI
+/** Create an entry (a collection's or a global item's) 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
@@ -173,7 +173,7 @@ const article = await seedEntry("articles", {
   tags: ["Näkemyksiä", "Muotoilu"],
 });
 
-// --- shared items ---------------------------------------------------
+// --- global items ---------------------------------------------------
 
 const nav = (locale: string, labels: [string, string, string]) => {
   const links = paths(locale);
@@ -206,12 +206,14 @@ await seedEntry("contact",
   { 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 seedEntry("quote",
-  { text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.", attribution: "Jane Doe, Founder" },
+  { 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: Node = { id: "node-quote", type: "shared", fields: { item: "quote", ref: quoteRow.id } };
+const quote: Node = { id: "node-quote", type: "global", fields: { item: "quote", ref: quoteRow.id } };
 
 // --- pages ----------------------------------------------------------
 
@@ -227,7 +229,7 @@ const imageText = (locale: string, linkLabel: string): Node => ({
     ),
     link: { label: linkLabel, href: paths(locale).about },
   },
-  styles: { imageSide: "left" },
+  settings: { imageSide: "left" },
 });
 
 const points: Node = {
@@ -241,7 +243,8 @@ const points: Node = {
       { icon: "diamond", heading: "Pariatur deleniti", text: "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga." },
     ],
   },
-  styles: { spacing: "lg" },
+  // 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 => ({
@@ -250,6 +253,21 @@ const favourites = (heading: string): Node => ({
   fields: { heading, items: [article.id] },
 });
 
+// The custom section (spec 2026-09-14 §6): the editor's own rows of
+// richtext columns, widths in twelfths; Smoodly renders its layout CSS.
+const customSection = (): Node => ({
+  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", "/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." },
@@ -270,7 +288,7 @@ const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]
         image: img.hero,
       },
     }],
-    body: [imageText(locale, t.link), quote, points, favourites(t.favourites)],
+    body: [imageText(locale, t.link), quote, points, customSection(), favourites(t.favourites)],
   },
 });
 
@@ -319,6 +337,7 @@ const aboutTree = (t: { kicker: string; people: string; description: string }):
       {
         id: "node-about-text",
         type: "imageText",
+        settings: { imageSide: "left" },
         fields: {
           heading: "Duis aute irure dolor in reprehenderit",
           text: doc(