smoodly 0.0.60 → 0.0.62

package/docs/content-modeling/overview.md

@@ -0,0 +1,55 @@
+# Modeling content
+
+The five things you register, what each one holds, and where it lives in your project. Read this once; the rest of the group takes them one at a time.
+
+## Registration is the model
+
+Smoodly has no schema screens. Each schema sits in a file beside the component that renders it, is paired with that view, and is listed once in `smoodly/config.ts`. From that one definition Smoodly derives the editor form, the entry in *Add section*, the TypeScript props and the checks it runs at publish.
+
+Change a field in code and the form changes with it. Nothing an editor does changes the code: editors fill fields and arrange sections inside the limits you set.
+
+## The five types
+
+| Type | Registered with | What it is |
+| --- | --- | --- |
+| `Page type` | smoodly.page() | A page component. It declares zones and renders them among your own JSX. Editors pick one when they create a page. |
+| `Section` | smoodly.section() | A full-width component editors place in a zone: a hero, a row of cards, a quote. |
+| `Element` | smoodly.element() | A small component editors insert inside richtext: a callout, a call to action. |
+| `Collection` | smoodly.collection() | A content type with a fixed shape and many entries: posts, people. An entry page, smoodly.entryPage(), renders one entry at its own URL. |
+| `Global` | smoodly.global() | Content that exists once and appears on many pages: the header, the footer, contact details. |
+
+The custom section is the sixth piece and is built in: rows of richtext columns editors lay out themselves, offered only where a zone allows it.
+
+In the Lorem Co. starter that is nine sections, four page types, two entry pages, three collections, four globals and two elements. Page types, sections and elements live in `components/`, two files each: the schema and the view. Collections and globals are lists in `smoodly/collections.ts` and `smoodly/globals.ts`.
+
+## How they nest
+
+Containment is short and fixed:
+
+```
+Page type → zone → section
+                 → custom section → rows → columns of richtext → elements
+```
+
+A section never holds another section. A section that needs columns builds them in code, and editors who need a free layout get the custom section. That cap is what keeps drag and drop, rendering and the canvas simple.
+
+Around the zones, a page type renders whatever JSX you like: navigation, a grid of the newest posts, a form. That JSX shows in the canvas but is not selectable, so it stays yours.
+
+## Content, settings and styles
+
+Everything editors change is stored per page, in three groups:
+
+- **Fields** are content: the heading, the photo, the list of buttons. They can be localized.
+- **Settings** are the options you declare on a section for how it looks, like which side the image sits on. The view alone interprets them.
+- **Styles** are Smoodly's own spacing, width and alignment steps, offered on every section unless you turn them off.
+
+Editors see fields on the *Content* tab and the other two on the *Settings* tab.
+
+## Reading order
+
+1. [Sections](../content-modeling/sections.md): a schema, a view, marks and registration.
+2. [Page types](../content-modeling/page-types.md): zones, fixed and open pages, the page prop.
+3. [Zones and freedom](../content-modeling/zones.md): the three zone policies.
+4. [Settings, styles and CSS](../content-modeling/styles-and-settings.md), [The custom section](../content-modeling/custom-section.md) and [Marks and inline editing](../content-modeling/marks.md).
+
+Then [Fields](../fields/overview.md) for every field type, and [Collections](../collections/defining.md) and [Globals](../globals/defining.md) for the two types that live outside pages.

package/docs/content-modeling/page-types.md

@@ -0,0 +1,237 @@
+# Defining a page type
+
+A page type is a page component with zones: the places where editors add sections. This page walks through the Lorem Co. starter's Home and Page types, and what a page type learns about its place in the site.
+
+## The schema
+
+A page type starts with `smoodly.schema.page()`: a name, a title, and a `zones` map that gives each zone a policy. The schema is the same file in every framework; in an Astro project it lives under `src/components/pages/`.
+
+File: `components/pages/Home.schema.ts`
+
+```ts
+import { smoodly, z } from "smoodly";
+import { heroSchema } from "../sections/Hero.schema";
+// …
+export const homeSchema = smoodly.schema.page({
+  name: "home",
+  title: "Home",
+  slug: "home",
+  zones: {
+    hero: z.locked(heroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  seo: true,
+});
+```
+
+| Name | Description |
+| --- | --- |
+| `name` | What a page record stores as its type. Keep it stable once pages exist. |
+| `title` | What editors see in the Page type column and when they create a page. |
+| `slug` | Makes the page type fixed: one page, at this URL. Leave it out and editors create as many as they like. See below. |
+| `zones` | One entry per zone, each with a policy from z. Zones and freedom covers the three. |
+| `seo` | `true` gives the page an SEO & Social tab: title, description, social image and a switch to hide it from search engines. |
+| `fields` | The page type's own fields, edited on the page's Settings tab. See below. |
+
+## The view
+
+**Astro**
+
+The view is `src/page-types/home.astro`, named after the schema. It receives `page`, `zones` and `head`. Render each zone with `<Zone>` wherever it belongs, among your own markup:
+
+File: `src/page-types/home.astro`
+
+```astro
+---
+import { Zone } from "smoodly/astro/components";
+// …
+const { page, zones, head } = Astro.props;
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  <Zone of={zones.hero} />
+  <Zone of={zones.body} />
+</Layout>
+```
+
+`Layout` is the starter's own component: the document, the site header and footer. Anything you render around the zones shows in the canvas but cannot be selected, so editors cannot move or remove it. `head` is what `Head` writes into the document head: the title, the canonical link and the rest.
+
+Register the schema in the `pages` list of `src/smoodly/config.ts`; the view is the file, with nothing else to list:
+
+File: `src/smoodly/config.ts`
+
+```ts
+export const config = defineConfig({
+  registry: {
+    sections,
+    // …
+    pages: [homeSchema, articlesSchema, pageSchema, newsSchema],
+  },
+  // …
+});
+```
+
+**Next.js**
+
+The view lives beside the schema, in `Home.tsx`. It receives `zones` and `page`. Render each zone with `<Zone>` wherever it belongs, among your own JSX:
+
+File: `components/pages/Home.tsx`
+
+```tsx
+function HomeView({ zones, page }: Props<typeof homeSchema>) {
+  return (
+    <PageFrame locale={page.locale} locales={page.locales}>
+      <Zone of={zones.hero} />
+      <Zone of={zones.body} />
+    </PageFrame>
+  );
+}
+
+export const HomePage = smoodly.page(homeSchema, HomeView);
+```
+
+`PageFrame` is the starter's own component: the site header and a `main` element. Anything you render around the zones shows in the canvas but cannot be selected, so editors cannot move or remove it.
+
+Register the schema in the `pages` list of `smoodly/config.ts`, and the component in `pages` in `smoodly/views.ts`:
+
+File: `smoodly/config.ts`
+
+```ts
+export const config = defineConfig({
+  registry: {
+    sections,
+    // …
+    pages: [homeSchema, articlesSchema, pageSchema, newsSchema],
+  },
+  // …
+});
+```
+
+File: `smoodly/views.ts`
+
+```ts
+export const views = () =>
+  defineViews(config, {
+    // …
+    pages: [HomePage, ArticlesPage, StandardPage, ArticlePage, NewsPage, NewsPostPage],
+    // …
+  });
+```
+
+## Fixed and open
+
+A page type with a `slug` is **fixed**: it owns exactly one page, at that URL, in every language. Smoodly creates the page the first time the admin loads, so a fresh site has a home page before anyone signs in. Editors can edit it but never create another, rename it, move it or delete it. The slug `home` is special: `homePageSlug` in `defineConfig()` names it, and that page is served at `/`.
+
+A fixed slug can differ per language. The starter's Articles index sits at `/posts` in English and `/artikkelit` in Finnish:
+
+File: `components/pages/Articles.schema.ts`
+
+```ts
+export const articlesSchema = smoodly.schema.page({
+  name: "articlesIndex",
+  title: "Articles",
+  slug: { en: "posts", fi: "artikkelit" },
+  zones: {
+    hero: z.locked(pageHeroSchema),
+  },
+  seo: true,
+});
+```
+
+A page type without a `slug` is **open**: editors create as many pages of it as they like, anywhere the page tree allows. When they click *+ New page*, the admin asks which open page type to use. With one open type, as in the starter, it does not ask.
+
+Lorem Co. has three fixed types, Home, Articles and News, and one open type, Page. A fixed page is live as soon as its code is deployed, with empty zones until an editor fills them. Its row appears in *Pages* the next time someone opens the admin. Article and News post are [entry pages](../collections/entry-pages.md), which render one entry each.
+
+## The page prop
+
+`page` tells the view where the page sits, so breadcrumbs and sub-navigation need no query:
+
+| Name | Description |
+| --- | --- |
+| `page.title, page.locale` | The page's title and the language it is rendered in. |
+| `page.path, page.url` | The page's URL within the site, and the same address through your framework's locale routing. On a single-language site they are equal. |
+| `page.ancestors` | Links to the pages above it, root first. |
+| `page.children` | Links to the pages below it. |
+| `page.locales` | One key per language: the page's address there, or null where it does not exist or is unpublished. What a language switcher links to. |
+| `page.fields` | The page type's own fields, typed from the schema. |
+
+Each link carries `title`, `path`, `url`, `hasPage` and `fields`. A path in the page tree, which groups pages without being one, has `hasPage` false. The starter's Page type uses both lists:
+
+**Astro**
+
+File: `src/page-types/page.astro`
+
+```astro
+---
+// …
+const shown = page.children.filter((c) => c.hasPage && c.fields.showInNavigation === true);
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  {page.ancestors.length > 0 && (
+    <nav class="container breadcrumb" aria-label="Breadcrumb">
+      {page.ancestors.map((a) => <span>{a.hasPage ? <a href={a.url}>{a.title}</a> : a.title} / </span>)}
+      {page.title}
+    </nav>
+  )}
+  {shown.length > 0 && (
+    <nav class="container subnav" aria-label="Pages in this section">
+      {shown.map((c) => <a href={c.url}>{c.title}</a>)}
+    </nav>
+  )}
+  <Zone of={zones.hero} />
+  <Zone of={zones.body} />
+</Layout>
+```
+
+**Next.js**
+
+File: `components/pages/Page.tsx`
+
+```tsx
+function PageView({ zones, page }: Props<typeof pageSchema>) {
+  const shown = page.children.filter((c) => c.hasPage && c.fields.showInNavigation === true);
+  return (
+    <PageFrame locale={page.locale} locales={page.locales}>
+      {page.ancestors.length > 0 && (
+        <nav className="container breadcrumb" aria-label="Breadcrumb">
+          {page.ancestors.map((a) => (
+            <span key={a.path}>{a.hasPage ? <Link href={a.url}>{a.title}</Link> : a.title} / </span>
+          ))}
+          {page.title}
+        </nav>
+      )}
+      {shown.length > 0 && (
+        <nav className="container subnav" aria-label="Pages in this section">
+          {shown.map((c) => <Link key={c.path} href={c.url}>{c.title}</Link>)}
+        </nav>
+      )}
+      <Zone of={zones.hero} />
+      <Zone of={zones.body} />
+    </PageFrame>
+  );
+}
+```
+
+## Page fields
+
+A page type can declare fields of its own, for values that belong to the page rather than to a section. The starter's Page type has one:
+
+File: `components/pages/Page.schema.ts`
+
+```ts
+export const pageSchema = smoodly.schema.page({
+  name: "page",
+  title: "Page",
+  zones: {
+    hero: z.locked(pageHeroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  seo: true,
+  fields: { showInNavigation: f.boolean().default(true) },
+});
+```
+
+Editors find it on the page's *Settings* tab, next to the title and slug. The view reads it as `page.fields.showInNavigation`, and every link in `ancestors` and `children` carries the linked page's fields, which is how the sub-navigation above filters without a query.
+
+Page fields are a settings form, not content: text, link, date, number, boolean, the choice fields, tags, media and objects. Refs, lists and richtext are not allowed, and `.localized()` is not needed because page fields are already stored per language.
+
+Next, [Zones and freedom](../content-modeling/zones.md) explains the three policies a zone can have.

package/docs/content-modeling/sections.md

@@ -0,0 +1,264 @@
+# Defining a section
+
+A section is a full-width component editors place in a zone. You describe its fields once, in a schema file, and Smoodly derives the editor form, the Add section entry and the TypeScript props from that one definition. This page walks through the Lorem Co. starter's Hero.
+
+## The schema
+
+A section is two files. `Hero.schema.ts` holds the schema: `smoodly.schema.section()` with a name, the title editors see, and a `fields` map built from the `f` helpers. The view, below, renders it. The schema is the same file in every framework; in an Astro project it lives under `src/components/sections/`.
+
+File: `components/sections/Hero.schema.ts`
+
+```ts
+import { f, smoodly } from "smoodly";
+
+export const heroSchema = smoodly.schema.section({
+  name: "hero",
+  title: "Hero",
+  description: "The home page opener: heading, text, buttons and a photo.",
+  fields: {
+    kicker: f.text().optional(),
+    heading: f.text(),
+    text: f.text(),
+    buttons: f.list(f.object({ label: f.text(), href: f.link() })).max(2),
+    image: f.image({ aspect: "4:5" }),
+  },
+  sample: {
+    // …
+  },
+});
+```
+
+| Name | Description |
+| --- | --- |
+| `name` | What the content stores for every placed Hero, so keep it stable once pages exist. |
+| `title` | The label in Add section and in the inspector. |
+| `description` | One line under the title in Add section. Optional, like icon. |
+| `fields` | What editors fill. Field order is form order: editors see Kicker, Heading, Text, Buttons, Image, top to bottom. |
+| `sample` | What a new Hero starts with. See Sample content below. |
+
+Every field is required unless it chains `.optional()`. `.max()` and `.min()` limit a length or a count, `.default()` sets a starting value, and `.localized()` gives a field its own value per language. The full list is on [All fields](../fields/overview.md).
+
+## The view
+
+**Astro**
+
+The view is an `.astro` file named after the schema: `src/sections/hero.astro` renders the section named `hero`. It imports the schema, and `Props<typeof heroSchema>` types `Astro.props`: the fields flat, plus `settings` and `styles`.
+
+File: `src/sections/hero.astro`
+
+```astro
+---
+import { safeHref, smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Image, Section } from "smoodly/astro/components";
+import { heroSchema } from "@/components/sections/Hero.schema";
+
+type Props = SmoodlyProps<typeof heroSchema>;
+const { kicker, heading, text, buttons, image, styles } = Astro.props;
+const m = smoodly.marks(heroSchema);
+---
+<Section styles={styles} class="hero">
+  // …
+      <h1 class="hero__heading" {...m.field("heading")}>{heading}</h1>
+      // …
+          {buttons.map((b, i) => {
+            const button = m.item("buttons", i);
+            return <a class={i === 0 ? "button" : "button button--outline"} href={safeHref(b.href)} {...button.attrs} {...button.field("label")}>{b.label}</a>;
+          })}
+      // …
+    {image && <Image image={image} class="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority {...m.field("image")} />}
+  // …
+</Section>
+```
+
+Three things make this a section rather than a plain component:
+
+- **`Section` is the root element.** It comes from `smoodly/astro/components`. Pass it `styles`, and it renders the spacing and width steps an editor picks, plus the attribute the canvas uses to select the section. `as="header"` changes the tag; `class`, `id` and `data-` attributes pass through. The section's own CSS is yours, in `src/styles/global.css` like the starter's.
+- **Marks make fields click-to-edit.** `smoodly.marks(heroSchema)` returns typed helpers. Spread `m.field("heading")` on the element that renders the heading, and clicking it in the canvas opens that field. For a list, `m.item("buttons", i)` gives a scope: spread its `attrs` on the item's root and mark the fields inside with `field()`. `m.object()` does the same for an object field. Outside the admin the marks are plain `data-` attributes. [Marks and inline editing](../content-modeling/marks.md) has the details.
+- **The file name pairs the two.** There is no pairing line and no list of views. The server names a schema with no file, and a file with no schema, at the first request.
+
+A link an editor typed goes through `safeHref` from `smoodly`: Astro writes an attribute as given, so a `javascript:` URL would reach the page. `safeHref` passes http(s), mailto, tel and site paths, and gives `null` for anything else, so the link renders with no `href`.
+
+**Next.js**
+
+The view is an ordinary React component in `Hero.tsx`, beside the schema. It imports the schema, and `Props<typeof heroSchema>` types it: the fields flat, plus `settings` and `styles`.
+
+File: `components/sections/Hero.tsx`
+
+```tsx
+const m = smoodly.marks(heroSchema);
+
+function HeroView({ kicker, heading, text, buttons, image, styles }: Props<typeof heroSchema>) {
+  return (
+    <smoodly.Section styles={styles} className="hero">
+      <div className="container hero__grid">
+        <div className="hero__copy">
+          {kicker && <p className="kicker" {...m.field("kicker")}>{kicker}</p>}
+          <h1 className="hero__heading" {...m.field("heading")}>{heading}</h1>
+          <p className="hero__text" {...m.field("text")}>{text}</p>
+          {buttons?.length > 0 && (
+            <div className="hero__buttons">
+              {buttons.map((b, i) => {
+                const button = m.item("buttons", i);
+                return (
+                  <a key={i} className={i === 0 ? "button" : "button button--outline"} href={b.href}
+                    {...button.attrs} {...button.field("label")}>{b.label}</a>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        {image && <SmoodlyImage image={image} className="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority {...m.field("image")} />}
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const Hero = smoodly.section(heroSchema, HeroView);
+```
+
+Three things make this a section rather than a plain component:
+
+- **`smoodly.Section` is the root element.** Pass it `styles`, and it renders the spacing and width steps an editor picks, plus the attribute the canvas uses to select the section. `as="header"` changes the tag; `className`, `id` and `data-` attributes pass through. The section's own CSS is yours, in `app/globals.css` like the starter's.
+- **Marks make fields click-to-edit.** `smoodly.marks(heroSchema)` returns typed helpers. Spread `m.field("heading")` on the element that renders the heading, and clicking it in the canvas opens that field. For a list, `m.item("buttons", i)` gives a scope: spread its `attrs` on the item's root and mark the fields inside with `field()`. `m.object()` does the same for an object field. Outside the admin the marks are plain `data-` attributes. [Marks and inline editing](../content-modeling/marks.md) has the details.
+- **`smoodly.section()` pairs the two.** Rename a field in the schema and this line fails to compile until the view follows. The export is the component you list in `smoodly/views.ts`. It renders as a normal component too, so you can place a section in your own JSX with its fields as props.
+
+### When a section throws
+
+If a section's own code throws, for example on data it didn't expect, the page still renders and that section is left out. The error goes to the server log, and the editor's canvas shows a placeholder in its place. The editor names it too, and Publish asks before a page with a broken section goes live.
+
+**Astro**
+
+The zone renders each section through `Astro.slots.render` inside a try/catch, so a throw anywhere inside the section, a component it renders included, leaves the section out and the page renders.
+
+**Next.js**
+
+`next dev` shows the placeholder too. A throw inside a component the section renders, or in a `'use client'` section, still fails the live page, but in the canvas it is caught and named the same way, so it shows up before anyone publishes.
+
+## Registering it
+
+**Astro**
+
+Add the schema to `src/smoodly/sections.ts`, which the config registers. The view is the file; there is nothing else to list. Editors can place the section only once a zone lists it, which is the next step:
+
+File: `src/smoodly/sections.ts`
+
+```ts
+import { heroSchema } from "@/components/sections/Hero.schema";
+// …
+export const sections = [heroSchema, pageHeroSchema, imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema, headerSchema, footerSchema];
+```
+
+**Next.js**
+
+A section is registered in two lists. Add its schema to `smoodly/sections.ts`, which the config registers, and its component to `sections` in `smoodly/views.ts`. The config imports no component, so the CLI, a seed script and an agent can read your content model without loading React. Editors can place the section only once a zone lists it, which is the next step:
+
+File: `smoodly/sections.ts`
+
+```ts
+import { heroSchema } from "@/components/sections/Hero.schema";
+// …
+export const sections = [heroSchema, pageHeroSchema, imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema, headerSchema, footerSchema];
+```
+
+File: `smoodly/views.ts`
+
+```ts
+import { Hero } from "@/components/sections/Hero";
+// …
+export const views = () =>
+  defineViews(config, {
+    sections: [Hero, PageHero, ImageText, Points, FavouriteArticles, People, Quote, Header, Footer],
+    // …
+  });
+```
+
+A schema with no component in `smoodly/views.ts` stops the first render with a named error: `smoodly: section "hero" is registered in the config but has no view — add its component to defineViews({ sections }).`
+
+Registering makes the section known; a page type's zones decide where editors may use it. Lorem Co.'s home page locks its hero and lets the body take five sections:
+
+File: `components/pages/Home.schema.ts`
+
+```ts
+export const homeSchema = smoodly.schema.page({
+  name: "home",
+  title: "Home",
+  slug: "home",
+  zones: {
+    hero: z.locked(heroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  // …
+});
+```
+
+A registered section that no zone lists never appears in *Add section*. Lorem Co.'s Header and Footer are registered that way, because the layout renders them as [globals](../globals/header-and-footer.md). The three policies are on [Zones and freedom](../content-modeling/zones.md).
+
+## Sample content
+
+`sample` is what a section starts with, so a page never shows an empty one. Smoodly uses it twice:
+
+- When an editor picks the section in *Add section*, the new section carries the sample.
+- When a page opens with an empty locked zone, Smoodly fills the zone from the locked section's sample.
+
+Fields the sample leaves out start from their `.default()`, or empty. A missing image or number stays unset rather than showing a broken picture or a stray zero. Make the sample a complete value in plain copy: it is what editors see first, and what they overwrite.
+
+The sample may set settings too, under their own keys.
+
+## Settings
+
+Fields are content. Settings are your own options for how the section looks, which the view alone interprets. Lorem Co.'s *Image and text* lets editors put the photo on either side:
+
+File: `components/sections/ImageText.schema.ts`
+
+```ts
+export const imageTextSchema = smoodly.schema.section({
+  name: "imageText",
+  title: "Image and text",
+  // …
+  settings: {
+    imageSide: f.radio([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
+  },
+  // …
+});
+```
+
+**Astro**
+
+File: `src/sections/imageText.astro`
+
+```astro
+---
+// …
+const { image, heading, text, link, settings, styles } = Astro.props;
+// …
+---
+<Section styles={styles} class="image-text" data-image-side={settings.imageSide}>
+```
+
+**Next.js**
+
+File: `components/sections/ImageText.tsx`
+
+```tsx
+function ImageTextView({ image, heading, text, link, settings, styles }: Props<typeof imageTextSchema>) {
+  // …
+    <smoodly.Section styles={styles} className="image-text" data-image-side={settings.imageSide}>
+```
+
+The view receives `settings` with defaults filled, so `settings.imageSide` is always a value. Settings use the same `f` builders as fields, with one rule: they are never localized, because a layout choice is the same in every language.
+
+In the inspector, fields are on the *Content* tab and settings on the *Settings* tab, above Smoodly's own *Spacing & layout* group. [Settings, styles and CSS](../content-modeling/styles-and-settings.md) covers that group, `styles: false` for a section that should not offer it, and the custom CSS box.
+
+## The fields used here
+
+| Field | Editor sees | Notes |
+| --- | --- | --- |
+| `f.text()` | Single line | .max(n) limits the length in characters. |
+| `f.link()` | Text box | A full URL or a site path such as /company/about-us. |
+| `f.image({ aspect })` | Media picker | Upload or pick from the library, then crop to the aspect for this use. |
+| `f.list(item)` | Repeater | Editors add, reorder and remove items. .min(n) and .max(n) count items; lists cannot nest. |
+| `f.object({ … })` | A group of fields | One value with named parts, such as a button's label and href. |
+| `f.richtext({ toolset })` | Text editor | Formatted text; the toolset decides which formatting and elements it offers. |
+| `f.radio([…])` | Pills | One value from a closed set. f.select([…]) shows the same set as a dropdown. |
+
+Next, [Page types](../content-modeling/page-types.md) shows where zones come from, and [Zones and freedom](../content-modeling/zones.md) how to set each zone's policy.