create-smoodly-app 0.0.13 → 0.0.15

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { notFound } from "next/navigation";
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+import { routing } from "@/i18n/routing";
+import { href, q } from "@/smoodly/server";
+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,
+// 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 });
+  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 locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
+  return (
+    <html lang={locale}>
+      <body>
+        <NextIntlClientProvider>
+          {locales.length > 1 && (
+            <nav className="container locales" aria-label="Language">
+              {locales.map((l) => (
+                <a key={l.code} href={l.url} aria-current={l.current ? "page" : undefined}>{l.code}</a>
+              ))}
+            </nav>
+          )}
+          <main>{children}</main>
+          {site && <footer className="container site-footer">{site.name} · {site.tagline}</footer>}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,47 @@
+/* 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. */
+
+:root {
+  --paper: #ffffff;
+  --ink: #1a1a1a;
+  --muted: #666666;
+  --container: 720px;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+main { flex: 1; }
+a { color: inherit; }
+
+.container { width: min(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; }
+
+.prose > * + * { margin-top: 1em; }
+.prose h1, .prose h2, .prose h3 { line-height: 1.2; }
+
+/* The Button element, inside richtext. */
+.button {
+  display: inline-block;
+  padding: 0.6em 1.2em;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.site-footer { padding-block: 2rem; color: var(--muted); font-size: 0.875rem; }
+.locales { display: flex; gap: 0.75rem; padding-block: 1rem; font-size: 0.875rem; }
+.locales a[aria-current="page"] { font-weight: 600; }

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

@@ -0,0 +1,26 @@
+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: "/" },
+});
+
+function ButtonView({ label, href }: Props<typeof buttonSchema>) {
+  return <a className="button" href={href}>{label}</a>;
+}
+
+export const Button = smoodly.element(buttonSchema, ButtonView);

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

@@ -0,0 +1,22 @@
+import { smoodly, z, Zone, type Props } from "smoodly";
+import { Text } from "../sections/Text";
+
+// 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] }),
+  },
+  meta: { seo: true },
+});
+
+function HomeView({ zones }: Props<typeof homeSchema>) {
+  return <Zone of={zones.body} />;
+}
+
+export const HomePage = smoodly.page(homeSchema, HomeView);

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

@@ -0,0 +1,25 @@
+import { smoodly, z, Zone, type Props } from "smoodly";
+import { Text } from "../sections/Text";
+
+// 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] }),
+  },
+  meta: { seo: true },
+});
+
+function PageView({ zones, page }: Props<typeof pageSchema>) {
+  return (
+    <>
+      <h1 className="container">{page.title}</h1>
+      <Zone of={zones.body} />
+    </>
+  );
+}
+
+export const StandardPage = smoodly.page(pageSchema, PageView);

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

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

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

@@ -0,0 +1,39 @@
+import { f, smoodly, type Props } from "smoodly";
+import { RichText } from "@/smoodly/richtext";
+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.
+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 }),
+  },
+  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.
+const m = smoodly.marks(textSchema);
+
+function TextView({ title, body, styles }: Props<typeof textSchema>) {
+  return (
+    <smoodly.Section styles={styles}>
+      <div className="container prose">
+        <h2 {...m.field("title")}>{title}</h2>
+        <div {...m.field("body")}><RichText doc={body} /></div>
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const Text = smoodly.section(textSchema, TextView);

package/templates/blank-intl/messages/en.json

@@ -0,0 +1 @@
+{}

package/templates/{next-intl → blank-intl}/package.json

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

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

@@ -0,0 +1,72 @@
+// The starter's content, written through the stores (never raw inserts:
+// the refs index and publish integrity are part of the point). Ships in
+// the scaffold; create-smoodly-app runs `npm run seed` after the first
+// editor. Idempotent: exits once the home page exists in the default
+// locale. Writes the same copy into every configured locale, whatever
+// their codes, so every locale's "/" resolves.
+// Run: npm run seed  (needs .env.local and a Supabase stack).
+import next from "@next/env";
+import type { PageTree } from "smoodly";
+const { loadEnvConfig } = next;
+
+loadEnvConfig(process.cwd());
+
+const { config } = await import("../smoodly/config");
+const { stores } = await import("../smoodly/server");
+const { pages, entries } = stores();
+
+const DEFAULT = config.locales.default;
+const OTHERS = config.locales.supported.filter((l) => l !== DEFAULT);
+
+if (await pages.resolvePath(DEFAULT, "/")) {
+  console.log(`Already seeded — "home" exists in "${DEFAULT}".`);
+  process.exit(0);
+}
+
+// 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 doc = (...content: Node[]) => ({ type: "doc", content });
+
+// --- the site item: name and tagline, published in every locale ------
+
+const site = await entries.create("site", { name: "My site", tagline: "Built with Smoodly" }, { locale: DEFAULT });
+await entries.setStatus("site", site.id, DEFAULT, "published");
+for (const locale of OTHERS) {
+  await entries.addLocale("site", site.id, locale, { from: DEFAULT });
+  await entries.setStatus("site", site.id, locale, "published");
+}
+
+// --- the home page: one Text section ---------------------------------
+
+const tree = {
+  meta: { description: "A new site, built with Smoodly." },
+  zones: {
+    body: [
+      {
+        id: "node-hello",
+        type: "text",
+        fields: {
+          title: "Hello",
+          body: doc(
+            p("This is your home page. Open the admin to edit this text, add sections, create pages and write posts."),
+            p("Everything you see is defined in components/ and registered in smoodly/. The README says where things are."),
+            button("Open the admin", "/admin"),
+          ),
+        },
+      },
+    ],
+  },
+} as unknown as PageTree;
+
+const home = await pages.createPage({ locale: DEFAULT, slug: "home", title: "Home", template: "home" });
+await pages.saveDraft(home.id, DEFAULT, tree);
+await pages.publish(home.id, DEFAULT);
+for (const locale of OTHERS) {
+  await pages.addLocale(home.id, locale, { from: DEFAULT, title: "Home" });
+  await pages.saveDraft(home.id, locale, tree);
+  await pages.publish(home.id, locale);
+}
+
+console.log(`Seeded the blank starter in "${[DEFAULT, ...OTHERS].join('", "')}": the home page and the site item, published.`);

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

@@ -0,0 +1,26 @@
+import { f, smoodly } from "smoodly";
+import { text } from "./toolsets";
+
+// A collection: structured content with its own admin list, served at
+// `path` by its entry page (components/pages/Post.tsx). Fields marked
+// .localized() are stored per locale; the rest are shared across
+// locales. `versions: true` keeps a history per locale. To add a
+// collection: copy this block, add it to `collections`, write its view
+// into a new migration with `collectionSQL` from "smoodly", and apply
+// it (supabase db push, or supabase db reset locally).
+export const posts = smoodly.collection({
+  name: "posts",
+  title: "Posts",
+  titleField: "title",
+  path: "posts",
+  order: { by: "date", direction: "desc" },
+  versions: true,
+  fields: {
+    title: f.text().localized(),
+    slug: f.slug({ from: "title" }),
+    date: f.date(),
+    body: f.richtext({ toolset: text }).localized(),
+  },
+});
+
+export const collections = [posts];

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

@@ -0,0 +1,38 @@
+import { defineConfig, f } from "smoodly";
+import { routing } from "@/i18n/routing";
+import { collections } from "./collections";
+import { sections } from "./sections";
+import { shared } from "./shared";
+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 };
+
+// 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 locale set comes from
+// i18n/routing.ts (plain config, no Next inside) — the proxy runs in the
+// edge runtime and could not import this file the other way round.
+export const config = defineConfig({
+  registry: {
+    sections,
+    elements,
+    collections,
+    shared,
+    pages: [HomePage, StandardPage, PostPage],
+  },
+  locales: { default: routing.defaultLocale, supported: [...routing.locales] },
+  // The record the site root serves.
+  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/elements.ts

@@ -0,0 +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";
+
+export const elements = [Button];

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

@@ -0,0 +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";
+
+export const sections = [Text];

package/templates/{next-intl → blank-intl}/smoodly/server.ts

@@ -4,22 +4,23 @@
 // 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 fetch through
-// the site (components/pages/Articles.tsx). That is a cycle, and 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.
 import {
   createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseAssetStore, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
 } from "smoodly";
 import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admin/next";
-import { createPageRenderer, type PageRegistration } from "smoodly/next";
+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";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
+type Queries = ReturnType<typeof createSmoodlyQueries<typeof collections, typeof shared>>;
 type Bound = {
-  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer; q: Queries;
 };
 
 let cached: Bound | null = null;
@@ -44,17 +45,18 @@ function bound(): Bound {
   // takes this local closure, not the export, so it never re-enters `bound()`.
   const stores = () => ({ pages, entries, assets });
   // The site layer: (locale, path) → page or entry, and the content API
-  // (site.getPagesTree for menus, site.getEntries for lists).
-  // Shadows the exported `site` below on purpose: `createPageRenderer`
-  // takes this local value, not the export, so it never re-enters `bound()`.
-  const site = createSmoodlySite({ stores, collections, shared, sections, elements, locales, homePageSlug: config.homePageSlug });
+  // `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 renderer = createPageRenderer({
     site,
     sections,
     pages: (config.registry.pages ?? []) as PageRegistration[],
     href,
   });
-  cached = { db, pages, entries, assets, auth, site, renderer };
+  // 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 });
+  cached = { db, pages, entries, assets, auth, site, renderer, q };
   return cached;
 }
 
@@ -81,13 +83,15 @@ export function publicAuth(): AuthConfig {
  * becomes getPathname, which adds the locale prefix. */
 export const href = (path: string, locale: string) => getPathname({ locale, href: path });
 
-/** The content API for page views that fetch (the Articles index, an
- * article's related list): `site().getEntries("articles", { locale })`. */
-export const site = (): SmoodlySite => bound().site;
+/** The read API (spec 2026-09-11) for layouts and page views that fetch:
+ * `q().getEntries("articles", { locale, limit: 3 })`, `q().getShared("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. */
+export const q = (): Queries => bound().q;
 
 /** The two route files call these. */
 export const renderSmoodlyPath: Renderer["renderSmoodlyPath"] = (...args) => bound().renderer.renderSmoodlyPath(...args);
 export const smoodlyMetadata: Renderer["smoodlyMetadata"] = (...args) => bound().renderer.smoodlyMetadata(...args);
 export const renderSmoodlyPage: Renderer["renderSmoodlyPage"] = (...args) => bound().renderer.renderSmoodlyPage(...args);
 export const smoodlyPageMetadata: Renderer["smoodlyPageMetadata"] = (...args) => bound().renderer.smoodlyPageMetadata(...args);
-export const getSmoodlyShared: Renderer["getSmoodlyShared"] = (...args) => bound().renderer.getSmoodlyShared(...args);

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

@@ -0,0 +1,16 @@
+// Shared 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
+// (`section: SomeSection`) renders through a section instead.
+import { f, smoodly } from "smoodly";
+
+export const site = smoodly.shared({
+  name: "site",
+  title: "Site",
+  fields: {
+    name: f.text(),
+    tagline: f.text().localized(),
+  },
+});
+
+export const shared = [site];

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

@@ -0,0 +1,14 @@
+// Toolsets are values, not registrations: a richtext field names one.
+// `text` is the starter's one set — the default marks and block nodes,
+// plus the Button element. Elements are embedded by value; the config
+// must also register them (smoodly/elements.ts; defineConfig checks).
+// 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";
+
+export const text = smoodly.toolset({
+  marks: ["bold", "italic", "link"],
+  nodes: ["h2", "h3", "bulletList", "orderedList", "blockquote"],
+  elements: [Button],
+});