create-smoodly-app 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smoodly-app",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Create a Smoodly site: a fresh Next.js app with the admin mounted, a Supabase schema, an env file and a first editor.",
   "license": "MIT",
   "repository": {

package/templates/blank/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/blank/README.md

@@ -14,7 +14,7 @@ for an agent (or a person) building the site.
 - `components/pages/` — the page shapes and the entry page: `Home` (fixed at /, one freeform zone), `Page` (open, editors create many), `Post` (the entry page for posts).
 - `components/sections/Text.tsx` — the one section: a title and a richtext body. Listed in `smoodly/sections.ts`.
 - `components/elements/Button.tsx` — the one element: a link styled as a button, embedded in richtext through `smoodly/toolsets.ts`.
-- `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts` (posts), `shared.ts` (the site item), `sections.ts`, `elements.ts`, `toolsets.ts`, `server.ts` (stores, site layer, renderer, the read API `q`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount), `richtext.tsx` (the bound renderer).
+- `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts` (posts), `globals.ts` (the site item), `sections.ts`, `elements.ts`, `toolsets.ts`, `server.ts` (stores, site layer, renderer, the read API `q`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount), `richtext.tsx` (the bound renderer).
 - `scripts/seed.ts` — the home page and the site item, written through the stores. `npm run seed` is idempotent.
 - `app/globals.css` — a reset, a container, the two tones. Replace it.
 - `.env.local` — `SMOODLY_URL`, `SMOODLY_SECRET_KEY`, `SMOODLY_PUBLISHABLE_KEY`.
@@ -48,12 +48,12 @@ Then create a migration with its view:
 Save the output as `supabase/migrations/<timestamp>_people.sql` and apply
 it with `supabase db push` (hosted) or `supabase db reset` (local).
 
-## Add a shared item
+## Add a global item
 
-Copy the `site` block in `smoodly/shared.ts` and add it to `shared`. An
-object item (`fields`) is read in code with `q().getShared("name")`; a
+Copy the `site` block in `smoodly/globals.ts` and add it to `globals`. An
+object item (`fields`) is read in code with `q().getGlobal("name")`; a
 visual item (`section: SomeSection`) renders through its section and can
-be placed on pages from the picker's Shared group. Edit both under
+be placed on pages from the picker's Global group. Edit both under
 Globals in the admin.
 
 Reseed an empty database any time with `npm run seed`.

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

@@ -4,16 +4,16 @@ import "../globals.css";
 
 // 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. The `site` shared item (smoodly/shared.ts) gives
+// a child of this one. The `site` global item (smoodly/globals.ts) gives
 // the document title and the footer line: read through `q`, cached under
 // its tag, null until published.
 export async function generateMetadata() {
-  const site = await q().getShared("site");
+  const site = await q().getGlobal("site");
   return { title: site?.name ?? "Smoodly site" };
 }
 
 export default async function RootLayout({ children }: { children: ReactNode }) {
-  const site = await q().getShared("site");
+  const site = await q().getGlobal("site");
   return (
     <html lang="en">
       <body>

package/templates/blank/app/globals.css

@@ -1,13 +1,22 @@
 /* The blank starter's one stylesheet: a reset, a system font, a
-   container, prose defaults, the button element, and the two tones the
-   config's section style emits as data-tone. Replace freely. */
+   container, prose defaults, the button element, and the two backgrounds
+   the Text section's setting selects. 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.
+   Replace freely. */
 
 :root {
+  /* Smoodly's styles set reads these (smoodly/config.ts): editor steps become padding, width, alignment. */
+  --space-sm: 1.5rem; --space-md: 3rem; --space-lg: 4.5rem;
+  --width-narrow: 40rem; --width-wide: 90rem;
+
   --paper: #ffffff;
   --ink: #1a1a1a;
   --muted: #666666;
   --container: 720px;
+  --smd-gutter: 1rem; /* the custom section's rows share the container's side gutter */
 }
+@media (min-width: 768px) { :root { --space-sm: 2rem; --space-md: 4rem; --space-lg: 6rem; } }
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
@@ -23,15 +32,16 @@ body {
 main { flex: 1; }
 a { color: inherit; }
 
-.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }
+/* The container reads the editor's width step; without one, the design's width. */
+.container { width: min(var(--smd-width, var(--container)), 100% - 2rem); margin-inline: auto; }
 
-/* Sections carry data-tone from the config's section styles. */
-[data-tone="paper"] { background: var(--paper); color: var(--ink); }
-[data-tone="ink"] { background: var(--ink); color: var(--paper); }
-section[data-tone] { padding-block: 3rem; }
+/* The Text section: its own padding, and the background its setting selects. */
+.text { padding-block: 3rem; }
+[data-background="paper"] { background: var(--paper); color: var(--ink); }
+[data-background="ink"] { background: var(--ink); color: var(--paper); }
 
-.prose > * + * { margin-top: 1em; }
-.prose h1, .prose h2, .prose h3 { line-height: 1.2; }
+.prose > * + *, .smd-col > * + * { margin-top: 1em; } /* the custom section's columns read like prose */
+.prose h1, .prose h2, .prose h3, .smd-col h1, .smd-col h2, .smd-col h3 { line-height: 1.2; }
 
 /* The Button element, inside richtext. */
 .button {

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

@@ -10,7 +10,7 @@ export const homeSchema = smoodly.schema.page({
   title: "Home",
   slug: "home",
   zones: {
-    body: z.freeform({ sections: [Text] }),
+    body: z.freeform({ sections: [Text], custom: true }),
   },
   meta: { seo: true },
 });

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

@@ -8,7 +8,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 },
 });

package/templates/blank/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/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/blank/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/smoodly/config.ts

@@ -1,13 +1,13 @@
-import { defineConfig, f } from "smoodly";
+import { defineConfig } from "smoodly";
 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
@@ -17,7 +17,7 @@ export const config = defineConfig({
     sections,
     elements,
     collections,
-    shared,
+    globals,
     pages: [HomePage, StandardPage, PostPage],
   },
   locales: { default: "en", supported: ["en"] },
@@ -25,11 +25,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/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/smoodly/server.ts

@@ -14,10 +14,10 @@ import {
 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";
+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;
 };
@@ -31,9 +31,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,
   });
@@ -46,15 +48,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;
 }
@@ -83,7 +86,7 @@ export function publicAuth(): AuthConfig {
 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",
+ * `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/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/blank-intl/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/blank-intl/README.md

@@ -15,7 +15,7 @@ for an agent (or a person) building the site.
 - `components/pages/` — the page shapes and the entry page: `Home` (fixed at /, one freeform zone), `Page` (open, editors create many), `Post` (the entry page for posts).
 - `components/sections/Text.tsx` — the one section: a title and a richtext body. Listed in `smoodly/sections.ts`.
 - `components/elements/Button.tsx` — the one element: a link styled as a button, embedded in richtext through `smoodly/toolsets.ts`.
-- `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts` (posts), `shared.ts` (the site item), `sections.ts`, `elements.ts`, `toolsets.ts`, `server.ts` (stores, site layer, renderer, the read API `q`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount), `richtext.tsx` (the bound renderer).
+- `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts` (posts), `globals.ts` (the site item), `sections.ts`, `elements.ts`, `toolsets.ts`, `server.ts` (stores, site layer, renderer, the read API `q`), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount), `richtext.tsx` (the bound renderer).
 - `scripts/seed.ts` — the home page and the site item, written through the stores. `npm run seed` is idempotent.
 - `app/globals.css` — a reset, a container, the two tones. Replace it.
 - `.env.local` — `SMOODLY_URL`, `SMOODLY_SECRET_KEY`, `SMOODLY_PUBLISHABLE_KEY`.
@@ -49,12 +49,12 @@ Then create a migration with its view:
 Save the output as `supabase/migrations/<timestamp>_people.sql` and apply
 it with `supabase db push` (hosted) or `supabase db reset` (local).
 
-## Add a shared item
+## Add a global item
 
-Copy the `site` block in `smoodly/shared.ts` and add it to `shared`. An
-object item (`fields`) is read in code with `q().getShared("name")`; a
+Copy the `site` block in `smoodly/globals.ts` and add it to `globals`. An
+object item (`fields`) is read in code with `q().getGlobal("name")`; a
 visual item (`section: SomeSection`) renders through its section and can
-be placed on pages from the picker's Shared group. Edit both under
+be placed on pages from the picker's Global group. Edit both under
 Globals in the admin.
 
 Reseed an empty database any time with `npm run seed`.

package/templates/blank-intl/app/[locale]/layout.tsx

@@ -7,20 +7,20 @@ import "../globals.css";
 
 // The site's root layout under the locale segment; the admin has its own
 // under app/(smoodly)/admin, outside [locale], as a second root layout.
-// The `site` shared item gives the document title and the footer line,
+// The `site` global item gives the document title and the footer line,
 // read per locale through `q`, null until published in this locale. The
 // locale links are the visitor's only language switch, since locale
 // detection is off (see i18n/routing.ts).
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
-  const site = await q().getShared("site", { locale });
+  const site = await q().getGlobal("site", { locale });
   return { title: site?.name ?? "Smoodly site" };
 }
 
 export default async function LocaleLayout({ children, params }: { children: ReactNode; params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   if (!hasLocale(routing.locales, locale)) notFound();
-  const site = await q().getShared("site", { locale });
+  const site = await q().getGlobal("site", { locale });
   const locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
   return (
     <html lang={locale}>

package/templates/blank-intl/app/globals.css

@@ -1,13 +1,22 @@
 /* The blank starter's one stylesheet: a reset, a system font, a
-   container, prose defaults, the button element, and the two tones the
-   config's section style emits as data-tone. Replace freely. */
+   container, prose defaults, the button element, and the two backgrounds
+   the Text section's setting selects. 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.
+   Replace freely. */
 
 :root {
+  /* Smoodly's styles set reads these (smoodly/config.ts): editor steps become padding, width, alignment. */
+  --space-sm: 1.5rem; --space-md: 3rem; --space-lg: 4.5rem;
+  --width-narrow: 40rem; --width-wide: 90rem;
+
   --paper: #ffffff;
   --ink: #1a1a1a;
   --muted: #666666;
   --container: 720px;
+  --smd-gutter: 1rem; /* the custom section's rows share the container's side gutter */
 }
+@media (min-width: 768px) { :root { --space-sm: 2rem; --space-md: 4rem; --space-lg: 6rem; } }
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
@@ -23,15 +32,16 @@ body {
 main { flex: 1; }
 a { color: inherit; }
 
-.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }
+/* The container reads the editor's width step; without one, the design's width. */
+.container { width: min(var(--smd-width, var(--container)), 100% - 2rem); margin-inline: auto; }
 
-/* Sections carry data-tone from the config's section styles. */
-[data-tone="paper"] { background: var(--paper); color: var(--ink); }
-[data-tone="ink"] { background: var(--ink); color: var(--paper); }
-section[data-tone] { padding-block: 3rem; }
+/* The Text section: its own padding, and the background its setting selects. */
+.text { padding-block: 3rem; }
+[data-background="paper"] { background: var(--paper); color: var(--ink); }
+[data-background="ink"] { background: var(--ink); color: var(--paper); }
 
-.prose > * + * { margin-top: 1em; }
-.prose h1, .prose h2, .prose h3 { line-height: 1.2; }
+.prose > * + *, .smd-col > * + * { margin-top: 1em; } /* the custom section's columns read like prose */
+.prose h1, .prose h2, .prose h3, .smd-col h1, .smd-col h2, .smd-col h3 { line-height: 1.2; }
 
 /* The Button element, inside richtext. */
 .button {

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

@@ -10,7 +10,7 @@ export const homeSchema = smoodly.schema.page({
   title: "Home",
   slug: "home",
   zones: {
-    body: z.freeform({ sections: [Text] }),
+    body: z.freeform({ sections: [Text], custom: true }),
   },
   meta: { seo: true },
 });

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

@@ -8,7 +8,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 },
 });

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.17",
     "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];