create-smoodly-app 0.0.44 → 0.0.46

package/templates/blank/AGENTS.md

@@ -7,11 +7,19 @@ where things are.
 
 ## Rules
 
-- **Register everything in `smoodly/`.** Every section, element,
-  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.
+- **Register schemas in the config, components in `smoodly/views.ts`.**
+  Every section, element and page type is two files: `Name.schema.ts`
+  and `Name.tsx`. The schema is listed in its barrel (`sections.ts`,
+  `elements.ts`, the config's `pages`; collections and global items in
+  `collections.ts`, `globals.ts`) and `smoodly/config.ts` is the one
+  registry. The component is listed in `smoodly/views.ts`, an element's
+  also in `smoodly/richtext.tsx`; an entry page is listed only in
+  `smoodly/views.ts`. A schema with no component, or a component with
+  no schema, is a named error on the first render.
+- **A `.schema.ts` file imports no component** and nothing from
+  `smoodly/server.ts` or `smoodly/richtext.tsx`. Zones, toolsets, global
+  items and `node()` take schemas (`z.locked(heroSchema)`), never
+  components.
 - **After a new collection or a `smoodly` upgrade, run `npx smoodly migrate`**
   and apply what it writes (`supabase db push` hosted, `supabase migration up`
   local). It copies the core schema files the package ships and writes a
@@ -23,16 +31,15 @@ where things are.
   the admin's own operations, so validation and publish checks apply and
   a failure throws. Never write rows or call the stores directly. The
   seed is idempotent; run it with `npm run seed`.
-- **Never import the admin into the site.** Nothing under `app/(site)`,
-  `app/[locale]` or `components/`, and nothing they import
-  (`smoodly/server.ts` included), may import `@/smoodly/admin` or
-  `smoodly/admin/next`: Next ships every client module a route imports,
-  rendered or not, and the admin's chunk must not reach visitors. The
-  package's `smoodly/admin` entry has no client code; server-side
-  admin glue such as `supabaseAdminAuth` comes from there.
-- **Two root layouts.** The site's layout lives in its route group or
-  locale segment and is never the admin's parent; `app/(smoodly)/admin`
-  is a second root layout. Do not add an `app/layout.tsx`.
+- **The admin is one route.** `app/(smoodly)/admin/[[...segments]]/route.ts`
+  serves the admin's page, its files and its operations from the
+  `smoodly` package; the folder name must match `admin.path` in the
+  config. The admin is prebuilt: nothing of it is compiled into the
+  site, and it takes no layout. Server-side pieces such as
+  `supabaseAdminAuth` and the content API come from `smoodly/admin`.
+- **One root layout.** The site's layout lives in its route group or
+  locale segment. Do not add an `app/layout.tsx`: it would wrap that
+  layout in a second `<html>`.
 - **Toolsets and elements.** A richtext field names a toolset
   (`smoodly/toolsets.ts`); a toolset embeds elements by value; the config
   must register those elements too. Files the toolset imports use
@@ -45,7 +52,7 @@ where things are.
 - **Multilingual sites.** Content locales are Smoodly's; URL locales are
   next-intl's. The locale set is `i18n/routing.ts`. UI strings of the
   site's own go through next-intl's messages in `messages/<locale>.json`.
-- **Fixed versus open pages.** A page shape with a `slug` is fixed: one
+- **Fixed versus open pages.** A page type with a `slug` is fixed: one
   record, created for you, never deleted. Without one it is open: editors
   create as many as they like.
 

package/templates/blank/README.md

@@ -10,36 +10,41 @@ 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: `app/globals.css`, the footer line from the `site` item; the admin has its own under `app/(smoodly)/admin/`.
+- `app/(site)/layout.tsx` — the site's root layout: `app/globals.css`, the footer line from the `site` item. The admin is one route, `app/(smoodly)/admin/[[...segments]]/route.ts`, and takes no layout.
 - `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`.
+- `components/sections/Text.schema.ts` and `Text.tsx` — the one section: a title and a richtext body. The schema is listed in `smoodly/sections.ts`, the component in `smoodly/views.ts`.
+- `components/elements/Button.schema.ts` and `Button.tsx` — the one element: a link styled as a button, embedded in richtext through `smoodly/toolsets.ts`.
 - `components/LocaleNav.tsx` — the language links every page view renders from its `locales` map: the same page in the other language, or its home when there is no translation; nothing with one locale.
-- `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` (site layer, renderer, the read API `q`, the content API `content()`), `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 of schemas and the settings; it imports no component), `collections.ts` (posts), `globals.ts` (the site item), `sections.ts` and `elements.ts` (the schemas the config registers), `views.ts` (the components that render them), `toolsets.ts`, `server.ts` (site layer, renderer, the read API `q`, the content API `content()`), `richtext.tsx` (the bound renderer).
 - `scripts/seed.ts` — the home page and the site item, written through the content API (`content()`). `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`.
 
 ## Add a section
 
-Copy `components/sections/Text.tsx`, give the schema a new `name` and
-`title`, declare its fields, render them inside `<smoodly.Section>` with
-marks on each field. Add it to `sections` in `smoodly/sections.ts`, then
-to the `sections` list of every zone that may hold it in
-`components/pages/*.tsx`. It appears in the editor's "+" picker.
+Copy `components/sections/Text.schema.ts` and `Text.tsx`. In the
+schema file give the schema a new `name` and `title` and declare its
+fields; in the component render them inside `<smoodly.Section>` with
+marks on each field. Then three lists: the schema in `sections` in
+`smoodly/sections.ts`, the component in `sections` in
+`smoodly/views.ts`, and the schema in the `sections` of every zone
+that may hold it in `components/pages/*.schema.ts`. It appears in the
+editor's "+" picker. A schema with no component in `smoodly/views.ts`
+is a named error on the first render.
 
 ## Add an element
 
-Copy `components/elements/Button.tsx` (relative imports only). Add it to
-`elements` in `smoodly/elements.ts` and to the `elements` of the toolset
-in `smoodly/toolsets.ts` that may embed it. It appears in the richtext
-editor's "/" menu.
+Copy `components/elements/Button.schema.ts` (relative imports only) and
+`Button.tsx`. Add the schema to `elements` in `smoodly/elements.ts` and
+to the `elements` of the toolset in `smoodly/toolsets.ts` that may embed
+it; add the component to `elements` in `smoodly/views.ts` and in
+`smoodly/richtext.tsx`. It appears in the richtext editor's "/" menu.
 
 ## Add a collection
 
 Copy the `posts` block in `smoodly/collections.ts`, add the new
 collection to `collections`, and write its entry page by copying
-`components/pages/Post.tsx` (register it in `config.ts` under `pages`).
+`components/pages/Post.tsx` (list it in `smoodly/views.ts` under `pages`).
 Then write its read view and order index and apply them:
 
     npx smoodly migrate
@@ -51,7 +56,7 @@ The same command brings the core schema forward after a `smoodly` upgrade.
 
 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
+visual item (`section: someSectionSchema`) renders through its section and can
 be placed on pages from the picker's Global group. Edit both under
 Globals in the admin.
 

package/templates/blank/app/(smoodly)/admin/[[...segments]]/route.ts

@@ -0,0 +1,8 @@
+// The admin: its page, the package's files and the operations endpoint, all from this one route. The
+// admin is prebuilt in the `smoodly` package; nothing of it is compiled into the site. The folder name
+// must match `admin.path` in smoodly/config.ts.
+import { createAdminRoute } from "smoodly/next";
+import { config } from "@/smoodly/config";
+import { adminDeps, presence, publicAuth } from "@/smoodly/server";
+
+export const { GET, POST } = createAdminRoute(() => ({ config, ...adminDeps(), signIn: publicAuth(), presence }));

package/templates/blank/components/elements/Button.schema.ts

@@ -0,0 +1,22 @@
+import { f, smoodly } from "smoodly";
+
+// An Element: a small registered block editors insert inside richtext
+// (the `richtext` context). This one is a link styled as a button;
+// Button.tsx beside it is the component. To add another element, copy
+// both files, list the schema in smoodly/elements.ts and in the toolsets
+// that may embed it (smoodly/toolsets.ts), and the component in
+// smoodly/views.ts and smoodly/richtext.tsx.
+// Relative imports only in this file and in smoodly/toolsets.ts: the
+// template build imports them outside the app, where `@/` has no mapping.
+export const buttonSchema = smoodly.schema.element({
+  name: "button",
+  title: "Button",
+  icon: "→",
+  description: "A link styled as a button.",
+  contexts: ["richtext"],
+  fields: {
+    label: f.text().max(60),
+    href: f.link(),
+  },
+  sample: { label: "Read more", href: "/" },
+});

package/templates/blank/components/elements/Button.tsx

@@ -1,23 +1,5 @@
-import { f, smoodly, type Props } from "smoodly";
-
-// An Element: a small registered block editors insert inside richtext
-// (the `richtext` context). This one is a link styled as a button. Copy
-// this file to add another element, then list it in smoodly/elements.ts
-// and in the toolsets that may embed it (smoodly/toolsets.ts).
-// Relative imports only in this file and in smoodly/toolsets.ts: the
-// template build imports them outside the app, where `@/` has no mapping.
-export const buttonSchema = smoodly.schema.element({
-  name: "button",
-  title: "Button",
-  icon: "→",
-  description: "A link styled as a button.",
-  contexts: ["richtext"],
-  fields: {
-    label: f.text().max(60),
-    href: f.link(),
-  },
-  sample: { label: "Read more", href: "/" },
-});
+import { smoodly, type Props } from "smoodly/react";
+import { buttonSchema } from "./Button.schema";
 
 function ButtonView({ label, href }: Props<typeof buttonSchema>) {
   return <a className="button" href={href}>{label}</a>;

package/templates/blank/components/pages/Home.schema.ts

@@ -0,0 +1,17 @@
+import { smoodly, z } from "smoodly";
+import { textSchema } from "../sections/Text.schema";
+
+// A page type's schema: its zones and what each allows. Home.tsx beside
+// it places them with <Zone />. `slug` makes it fixed — one record
+// editors can neither delete nor duplicate — and the config's
+// homePageSlug maps that record to "/". The body is a freeform zone over
+// the section schemas listed here.
+export const homeSchema = smoodly.schema.page({
+  name: "home",
+  title: "Home",
+  slug: "home",
+  zones: {
+    body: z.freeform({ sections: [textSchema], custom: true }),
+  },
+  seo: true,
+});

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

@@ -1,20 +1,6 @@
-import { smoodly, z, Zone, type Props } from "smoodly";
-import { Text } from "../sections/Text";
+import { smoodly, Zone, type Props } from "smoodly/react";
 import { LocaleNav } from "../LocaleNav";
-
-// A page shape: zones declared, <Zone /> placed, one file. `slug` makes
-// it fixed — one record editors can neither delete nor duplicate — and
-// the config's homePageSlug maps that record to "/". The body is a
-// freeform zone over the sections listed here.
-export const homeSchema = smoodly.schema.page({
-  name: "home",
-  title: "Home",
-  slug: "home",
-  zones: {
-    body: z.freeform({ sections: [Text], custom: true }),
-  },
-  seo: true,
-});
+import { homeSchema } from "./Home.schema";
 
 function HomeView({ zones, page }: Props<typeof homeSchema>) {
   return (

package/templates/blank/components/pages/Page.schema.ts

@@ -0,0 +1,14 @@
+import { smoodly, z } from "smoodly";
+import { textSchema } from "../sections/Text.schema";
+
+// An open page type: no `slug`, so editors create as many as they like,
+// anywhere in the tree the config allows. Page.tsx beside it is the view;
+// its `page` prop is where the page sits (title, path, ancestors, children).
+export const pageSchema = smoodly.schema.page({
+  name: "page",
+  title: "Page",
+  zones: {
+    body: z.freeform({ sections: [textSchema], custom: true }),
+  },
+  seo: true,
+});

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

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

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

@@ -1,11 +1,12 @@
-import { smoodly } from "smoodly";
+import { smoodly } from "smoodly/react";
 import { RichText } from "@/smoodly/richtext";
 import { posts } from "@/smoodly/collections";
 import { LocaleNav } from "../LocaleNav";
 
-// The entry page for `posts`, served at /posts/<slug>. It receives the
-// entry's fields; the body is richtext rendered by the site's bound
-// RichText, which knows the registered elements.
+// The entry page for `posts`, served at /posts/<slug>. An entry page is a
+// view with no schema of its own: it is listed in smoodly/views.ts, not in
+// the config. It receives the entry's fields; the body is richtext rendered
+// by the site's bound RichText, which knows the registered elements.
 export const PostPage = smoodly.entryPage(posts, function PostView({ entry }) {
   const { locale, locales } = entry;
   const post = entry.fields;

package/templates/blank/components/sections/Text.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly } from "smoodly";
+import { text } from "@/smoodly/toolsets";
+
+// A section's schema: a title and a richtext body. Text.tsx beside it is
+// the component. To add another section, copy both files, list the
+// schema in smoodly/sections.ts and the component in smoodly/views.ts,
+// and allow the schema in a page type's zone (components/pages/*.schema.ts).
+// This file imports no component.
+export const textSchema = smoodly.schema.section({
+  name: "text",
+  title: "Text",
+  description: "A title and a body of text.",
+  fields: {
+    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." }] }] },
+  },
+});

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

@@ -1,32 +1,12 @@
-import { f, smoodly, type Props } from "smoodly";
+import { smoodly, type Props } from "smoodly/react";
 import { RichText } from "@/smoodly/richtext";
-import { text } from "@/smoodly/toolsets";
+import { textSchema } from "./Text.schema";
 
-// 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, 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",
-  description: "A title and a body of text.",
-  fields: {
-    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." }] }] },
-  },
-});
-
-// Marks tie the rendered elements to their fields, so the editor can
-// select and inline-edit them on the canvas.
+// The section's component. 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. Marks tie the rendered elements to their fields, so the
+// editor can select and inline-edit them on the canvas.
 const m = smoodly.marks(textSchema);
 
 function TextView({ title, body, settings, styles }: Props<typeof textSchema>) {

package/templates/blank/package.json

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

package/templates/blank/scripts/seed.ts

@@ -14,7 +14,7 @@ loadEnvConfig(process.cwd());
 
 const { config } = await import("../smoodly/config");
 const { content, node } = await import("../smoodly/server");
-const { Text } = await import("../components/sections/Text");
+const { textSchema } = await import("../components/sections/Text.schema");
 const c = content();
 
 const DEFAULT = config.locales.default;
@@ -59,7 +59,7 @@ const tree: PageTree = {
   meta: { description: "A new site, built with Smoodly." },
   zones: {
     body: [
-      node(Text, {
+      node(textSchema, {
         title: "Hello",
         body: doc(
           p("This is your home page. Open the admin to edit this text, add sections, create pages and write posts."),

package/templates/blank/smoodly/config.ts

@@ -3,22 +3,23 @@ import { collections } from "./collections";
 import { sections } from "./sections";
 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";
+import { homeSchema } from "@/components/pages/Home.schema";
+import { pageSchema } from "@/components/pages/Page.schema";
 
 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
-// build can load it outside the app.
+// The registry of schemas and the plain settings, one file. It imports
+// no component, no route file and no Next API, so a script and the CLI
+// can load it outside the app; smoodly/views.ts lists the components
+// that render these schemas.
 export const config = defineConfig({
   registry: {
     sections,
     elements,
     collections,
     globals,
-    pages: [HomePage, StandardPage, PostPage],
+    // Page types. The entry page is a view: smoodly/views.ts lists it.
+    pages: [homeSchema, pageSchema],
   },
   locales: { default: "en", supported: ["en"] },
   // The record the site root serves.

package/templates/blank/smoodly/elements.ts

@@ -1,5 +1,5 @@
-// The site's element registrations, in one list: the config registers
-// them, toolsets embed them by value, and smoodly/richtext.tsx renders them.
-import { Button } from "@/components/elements/Button";
+// The element schemas a richtext body may embed; smoodly/views.ts lists
+// the components that render them.
+import { buttonSchema } from "@/components/elements/Button.schema";
 
-export const elements = [Button];
+export const elements = [buttonSchema];

package/templates/blank/smoodly/globals.ts

@@ -1,7 +1,8 @@
 // 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().getGlobal("site"). A visual item
-// (`section: SomeSection`) renders through a section instead.
+// the layout reads it through q().getGlobal("site"), so it is a layout
+// global: it comes with the page's own read. A visual item
+// (`section: someSectionSchema`) renders through a section instead.
 import { f, smoodly } from "smoodly";
 
 export const site = smoodly.global({
@@ -11,6 +12,7 @@ export const site = smoodly.global({
     name: f.text(),
     tagline: f.text().localized(),
   },
+  layout: true,
 });
 
 export const globals = [site];

package/templates/blank/smoodly/richtext.tsx

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

package/templates/blank/smoodly/sections.ts

@@ -1,5 +1,5 @@
-// The site's section registrations, in one list. config.ts puts it in
-// the registry; the stores and the renderer share the same array.
-import { Text } from "@/components/sections/Text";
+// The section schemas the config registers; smoodly/views.ts lists the
+// components that render them.
+import { textSchema } from "@/components/sections/Text.schema";
 
-export const sections = [Text];
+export const sections = [textSchema];

package/templates/blank/smoodly/server.ts

@@ -5,22 +5,22 @@
 // SMOODLY_PUBLISHABLE_KEY (the `smoodlyEnv("admin")` calls below); whether the
 // secret is a service-role key or a cloud write key is invisible here.
 //
-// Lazy on purpose, the site and renderer included: config.ts imports the
-// page shapes, and a page shape may import this file to read through
-// `q` (components/pages/Articles.tsx). That is a cycle, and the
-// admin route enters it from config.ts — so nothing here may read the
-// config at module scope.
+// Lazy on purpose: a page component imports this file to read through
+// `q` (components/pages/Articles.tsx), and this file imports the
+// components through ./views. That is a cycle, so nothing here reads
+// views() or the env at module scope.
 import {
-  createSmoodlyClient, createSmoodlySite, presenceConfig, smoodlyEnv, SupabaseAssetStore, SupabaseEntryStore, SupabaseMemberStore, SupabasePageStore, SupabasePathIndex, type PresenceConfig, type SmoodlySite,
+  createSmoodlyClient, createSmoodlySite, createSupabaseStores, presenceConfig, siteOptions, smoodlyEnv,
+  type PresenceConfig, type SmoodlySite, type SupabaseAssetStore, type SupabaseEntryStore, type SupabaseMemberStore, type SupabasePageStore,
 } from "smoodly";
-// The admin gate from `smoodly/admin`, which holds no client code: the site
-// routes import this file, and `smoodly/admin/next` would put the admin
-// shell in every live page's JavaScript.
+// The admin's server pieces: the sign-in check and the content API. No browser code lives in the package's
+// entries; the admin itself is prebuilt and served by app/(smoodly)/admin/[[...segments]]/route.ts.
 import { createSmoodlyContent, supabaseAdminAuth, type AdminAuth, type AuthConfig, type SmoodlyContent } from "smoodly/admin";
-import { createPageRenderer, createSmoodlyQueries, type PageRegistration } from "smoodly/next";
+import { createPageRenderer, createSmoodlyQueries } from "smoodly/next";
 import { connection } from "next/server";
 import type { SupabaseClient } from "@supabase/supabase-js";
-import { collections, config, elements, sections, globals } from "./config";
+import { collections, config, globals } from "./config";
+import { views } from "./views";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
 type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof globals>>;
@@ -34,49 +34,27 @@ function bound(): Bound {
   if (cached) return cached;
   const env = smoodlyEnv();
   const db = createSmoodlyClient(env);
-  // ONE path index for both stores: pages and entries share the URL space.
-  // The index reads the code-owned addresses from the config (spec 2026-09-29 anchored paths §2).
-  const paths = new SupabasePathIndex(db, config.anchors);
-  const locales = config.locales;
-  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,
-    // Code-owned addresses by owner: a fixed page's or a collection's path (spec 2026-09-29 nested paths §3).
-    addresses: config.addresses,
-    tree: config.pages?.tree,
-  });
-  // The media library: rows in `assets`, bytes in the public `media` bucket.
-  const assets = new SupabaseAssetStore(db);
-  // The admission table, read by the Members page (spec 2026-09-25 §4).
-  const members = new SupabaseMemberStore(db);
+  // The stores, read off the config: pages, entries, the media library and the admission table.
+  const { pages, entries, assets, members, published } = createSupabaseStores(db, config);
   const auth = supabaseAdminAuth({ authUrl: env.authUrl, authKey: env.authKey, db });
-  // The site layer's own view of the stores; nothing outside this file reads them.
-  const stores = () => ({ pages, entries, assets });
   // The site layer: (locale, path) → page or entry, and the content API
   // `q` wraps below. Not exported — the app reads through `q`, which adds
   // draft awareness and the cache.
-  const site = createSmoodlySite({ stores, collections, 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,
-  });
+  const site = createSmoodlySite(siteOptions(config, () => ({ pages, entries, assets, published })));
+  // The components, checked against the config's schemas here, on first use.
+  const renderer = createPageRenderer({ site, ...views(), 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, globals });
   cached = { db, pages, entries, assets, members, auth, site, renderer, q };
   return cached;
 }
 
-/** The admin's wiring, for `smoodly/ops.ts` only. Scripts write through `content()`. */
+/** The admin's wiring, for the admin route only. Scripts write through `content()`. */
 export function adminDeps() {
   smoodlyEnv("admin"); // the admin signs in with the publishable key: a missing one is named here, not on a live page
-  const { pages, entries, assets, members, auth } = bound();
-  return { pages, entries, assets, members, auth, href };
+  const { pages, entries, assets, members, auth, site } = bound();
+  // The projector: a publish writes the finished documents a live page reads.
+  return { pages, entries, assets, members, auth, href, projector: site.projector };
 }
 
 /** Write content from code — seeds, migrations, route handlers (spec 2026-09-30 tester findings §1).
@@ -84,8 +62,8 @@ export function adminDeps() {
  *  throws `SmoodlyContentError`. `content().pages.create(…)`, `.entries.create(…)`, `.globals.set(…)`,
  *  `.media.upload(…)`; build tree nodes with `node(Section, fields)`. */
 export function content(): SmoodlyContent {
-  const { pages, entries, assets, members } = bound();
-  return createSmoodlyContent({ config, pages, entries, assets, members, href });
+  const { pages, entries, assets, members, site } = bound();
+  return createSmoodlyContent({ config, pages, entries, assets, members, href, projector: site.projector });
 }
 
 export { node } from "smoodly";

package/templates/blank/smoodly/toolsets.ts

@@ -5,10 +5,10 @@
 // Relative imports on purpose: collections.ts pulls this file into
 // create-smoodly-app's template build, which runs outside the app.
 import { smoodly } from "smoodly";
-import { Button } from "../components/elements/Button";
+import { buttonSchema } from "../components/elements/Button.schema";
 
 export const text = smoodly.toolset({
   marks: ["bold", "italic", "link"],
   nodes: ["h2", "h3", "bulletList", "orderedList", "blockquote"],
-  elements: [Button],
+  elements: [buttonSchema],
 });

package/templates/blank/smoodly/views.ts

@@ -0,0 +1,15 @@
+// The components that render the registered schemas. A function, not a
+// value: a page component may import smoodly/server.ts, which imports
+// this file. defineViews names a schema with no component, and a
+// component with no schema, the first time the site renders.
+import { defineViews } from "smoodly/react";
+import { config } from "./config";
+import { RichText } from "./richtext";
+import { Text } from "@/components/sections/Text";
+import { Button } from "@/components/elements/Button";
+import { HomePage } from "@/components/pages/Home";
+import { StandardPage } from "@/components/pages/Page";
+import { PostPage } from "@/components/pages/Post";
+
+export const views = () =>
+  defineViews(config, { sections: [Text], elements: [Button], pages: [HomePage, StandardPage, PostPage], RichText });