create-smoodly-app 0.0.10 → 0.0.12

package/README.md

@@ -15,8 +15,8 @@ sign in. Spec: `docs/superpowers/specs/2026-09-04-create-smoodly-app-design.md`.
    `proxy.ts`, translated URLs per locale. Flag: `--locales en,fi`.
 3. Where content lives: a **local Supabase stack** (`supabase init` +
    `supabase start` inside the app, with the services Smoodly never uses
-   excluded — storage, image proxy, edge functions, analytics, realtime,
-   the pooler — so the stack stays small beside any other you run; needs
+   excluded — the image proxy, edge functions, analytics, realtime, the
+   pooler — so the stack stays small beside any other you run; needs
    the Supabase CLI and Docker; when
    another project holds the default `543xx` ports the new one moves to the
    next free block, `553xx` and so on, and says so) or a
@@ -86,6 +86,9 @@ multilingual one with `--locales en,de`.
   app's stack with `-x storage-api,imgproxy,edge-runtime,logflare,vector,realtime,supavisor`
   (`LOCAL_START_ARGS`), and the "Finish by hand" text carries the same
   flags. Kept: db, kong, auth, PostgREST, Studio and pg-meta, mailpit.
+  Storage is back in the local stack since the media library
+  (2026-09-08); the health-check flake is a Docker memory problem, see
+  the repo's memory note.
 - **A non-interactive run without `--locales` needs `--yes`.** The
   "Multilingual site?" prompt is asked whenever `--locales` is absent, and
   with no TTY (a CI step, stdin at EOF) the CLI exits 13 having created

package/dist/index.js

@@ -392,7 +392,7 @@ function parseStatusEnv(output) {
 }
 
 // src/run.ts
-var LOCAL_START_ARGS = ["start", "-x", "storage-api,imgproxy,edge-runtime,logflare,vector,realtime,supavisor"];
+var LOCAL_START_ARGS = ["start", "-x", "imgproxy,edge-runtime,logflare,vector,realtime,supavisor"];
 async function run(answers2, deps) {
   if (answers2.supabase === "hosted" && !answers2.hosted) {
     throw new Error("hosted answers need the project's keys");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smoodly-app",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "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/next/app/globals.css

@@ -94,7 +94,7 @@ main > section { padding-block: 56px; }
 .hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
 .hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 520px; text-wrap: pretty; }
 .hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
-.hero__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
+.hero__image { width: 100%; border-radius: var(--radius); }
 
 /* ---------- page hero ---------- */
 
@@ -102,12 +102,12 @@ main > section { padding-block: 56px; }
 .page-hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
 .page-hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
 .page-hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
-.page-hero__image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
+.page-hero__image { width: 100%; border-radius: var(--radius); }
 
 /* ---------- image and text ---------- */
 
 .image-text__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
-.image-text__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
+.image-text__image { width: 100%; border-radius: var(--radius); }
 [data-image-side="right"] .image-text__image { order: 2; }
 .image-text__copy { display: flex; flex-direction: column; gap: 20px; }
 .image-text__grid > .h2 { align-self: start; }
@@ -136,7 +136,7 @@ main > section { padding-block: 56px; }
 .card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
 .card:hover { color: inherit; }
 .card:hover .card__title { color: var(--accent); }
-.card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
+.card__image { width: 100%; border-radius: var(--radius); }
 .card__meta { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
 .card__tag { color: var(--accent); font-weight: 600; }
 .card__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
@@ -169,7 +169,7 @@ h3.card__title { font-size: 24px; }
 .article__byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
 .article__byline strong { color: var(--ink); font-weight: 500; }
 .article__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--line); display: inline-block; flex: none; }
-.article__image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
+.article__image { width: 100%; border-radius: var(--radius); }
 .article__body { max-width: 720px; margin: 16px auto 0; width: 100%; }
 
 .related { border-top: 1px solid var(--line); margin-top: 88px; padding: 64px 0 96px; }

package/templates/next/components/ArticleCard.tsx

@@ -1,3 +1,4 @@
+import { SmoodlyImage } from "smoodly/image";
 import { formatDate, type ArticleFields } from "./articles";
 
 // One article card: photo, first tag and date, title, excerpt. The grid
@@ -10,7 +11,7 @@ export function ArticleCard({ article, url, locale, compact = false }: {
   const Title = compact ? "h3" : "h2";
   return (
     <a className="card" href={url}>
-      {article.image?.url && <img className="card__image" src={article.image.url} alt={article.image.alt ?? ""} />}
+      {article.image && <SmoodlyImage image={article.image} className="card__image" sizes="(min-width: 900px) 33vw, 100vw" />}
       <div className="card__meta">
         {article.tags?.[0] && <span className="card__tag">{article.tags[0]}</span>}
         {article.date && <span>{formatDate(article.date, locale)}</span>}

package/templates/next/components/articles.ts

@@ -1,6 +1,7 @@
 // Small helpers shared by the Articles index, the article page and the
 // Favourite articles section — the article's URL, dates in the request
 // locale, and the read time from the richtext body.
+import type { ResolvedImage } from "smoodly";
 import { articles } from "@/smoodly/collections";
 
 export type ArticleFields = {
@@ -9,7 +10,7 @@ export type ArticleFields = {
   excerpt?: string;
   body?: unknown;
   tags?: string[];
-  image?: { url: string; alt?: string };
+  image?: ResolvedImage;
   date: string;
 };
 

package/templates/next/components/pages/Article.tsx

@@ -1,4 +1,5 @@
 import { RichText, smoodly, type EntryPageProps } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
 import { site } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
@@ -37,7 +38,7 @@ async function ArticleView({ entry }: EntryPageProps) {
             </span>
           </p>
         </div>
-        {a.image?.url && <img className="article__image" src={a.image.url} alt={a.image.alt ?? ""} />}
+        {a.image && <SmoodlyImage image={a.image} aspect="21:9" className="article__image" sizes="(min-width: 900px) 800px, 100vw" priority />}
         <div className="article__body prose prose--lead"><RichText doc={a.body} /></div>
       </article>
       {related.length > 0 && (

package/templates/next/components/sections/Hero.tsx

@@ -1,4 +1,5 @@
 import { f, smoodly, type Props } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 
 // The home page opener: kicker, heading, text, up to two buttons and a
 // portrait photo. Home locks it (`z.locked(Hero)`): one node an editor
@@ -13,14 +14,13 @@ export const heroSchema = smoodly.schema.section({
     heading: f.text(),
     text: f.text(),
     buttons: f.list(f.object({ label: f.text(), href: f.link() })).max(2),
-    image: f.image(),
+    image: f.image({ aspect: "4:5" }),
   },
   sample: {
     kicker: "Lorem ipsum dolor",
     heading: "Consectetur adipiscing elit sed do eiusmod",
     text: "Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
     buttons: [{ label: "About us", href: "/company/about-us" }],
-    image: { url: "/images/hero_image.jpg", alt: "Office interior" },
   },
 });
 
@@ -40,7 +40,7 @@ function HeroView({ kicker, heading, text, buttons, image, styles }: Props<typeo
             </div>
           )}
         </div>
-        {image?.url && <img className="hero__image" src={image.url} alt={image.alt ?? ""} />}
+        {image && <SmoodlyImage image={image} className="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority />}
       </div>
     </smoodly.Section>
   );

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

@@ -1,4 +1,5 @@
 import { f, RichText, smoodly, type Props } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 
 // A photo beside a heading and richtext, the photo on either side (a
 // style, not a field: styles are never translated). Without a photo the
@@ -10,7 +11,7 @@ export const imageTextSchema = smoodly.schema.section({
   title: "Image and text",
   description: "A photo beside a heading and text; text alone in two columns without one.",
   fields: {
-    image: f.image().optional(),
+    image: f.image({ aspect: "4:3" }).optional(),
     heading: f.text(),
     // Body copy beside a photo: emphasis and links, no headings — the block's
     // own heading field owns that. Every other richtext field takes the default.
@@ -39,9 +40,9 @@ function ImageTextView({ image, heading, text, link, styles }: Props<typeof imag
   return (
     <smoodly.Section styles={styles} className="image-text">
       <div className="container image-text__grid">
-        {image?.url ? (
+        {image ? (
           <>
-            <img className="image-text__image" src={image.url} alt={image.alt ?? ""} />
+            <SmoodlyImage image={image} className="image-text__image" sizes="(min-width: 900px) 50vw, 100vw" />
             <div className="image-text__copy">
               <h2 className="h2">{heading}</h2>
               {body}

package/templates/next/components/sections/PageHero.tsx

@@ -1,4 +1,5 @@
 import { f, smoodly, type Props } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 
 // The opener of every page that is not the home page: kicker, heading,
 // text and an optional wide photo. Page and Articles lock it — each page
@@ -12,7 +13,7 @@ export const pageHeroSchema = smoodly.schema.section({
     kicker: f.text().optional(),
     heading: f.text(),
     text: f.text(),
-    image: f.image().optional(),
+    image: f.image({ aspect: "21:9" }).optional(),
   },
   sample: {
     heading: "About us",
@@ -29,7 +30,7 @@ function PageHeroView({ kicker, heading, text, image, styles }: Props<typeof pag
           <h1 className="page-hero__heading">{heading}</h1>
           <p className="page-hero__text">{text}</p>
         </div>
-        {image?.url && <img className="page-hero__image" src={image.url} alt={image.alt ?? ""} />}
+        {image && <SmoodlyImage image={image} className="page-hero__image" sizes="100vw" priority />}
       </div>
     </smoodly.Section>
   );

package/templates/next/next.config.ts

@@ -1,5 +1,8 @@
 import type { NextConfig } from "next";
+import { smoodlyImages } from "smoodly/image/config";
 
-const config: NextConfig = {};
+// next/image may only optimize from the Supabase host named in SMOODLY_URL
+// (a local stack also needs Next's local-IP allowance; the helper sets it).
+const config: NextConfig = { images: smoodlyImages() };
 
 export default config;

package/templates/next/package.json

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

package/templates/next/scripts/seed.ts

@@ -14,8 +14,9 @@
 // both; what a reader perceives as language (nav, headings, tags,
 // roles, footer titles) is translated. Idempotent: exits once the home
 // page exists.
+import { readFile } from "node:fs/promises";
 import next from "@next/env";
-import type { PageTree } from "smoodly";
+import { imageDimensions, type PageTree } from "smoodly";
 const { loadEnvConfig } = next;
 
 loadEnvConfig(process.cwd());
@@ -23,7 +24,7 @@ loadEnvConfig(process.cwd());
 const { config } = await import("../smoodly/config");
 const { articles } = await import("../smoodly/collections");
 const { href, stores } = await import("../smoodly/server");
-const { pages, entries } = stores();
+const { pages, entries, assets } = stores();
 
 const EN = config.locales.default;
 const FI = config.locales.supported.includes("fi") && EN !== "fi" ? "fi" : null;
@@ -46,7 +47,26 @@ const quoteBlock = (s: string): Node => ({ type: "blockquote", content: [p(s)] }
 const bullets = (...items: string[]): Node => ({ type: "bulletList", content: items.map((s) => ({ type: "listItem", content: [p(s)] })) });
 const doc = (...content: Node[]) => ({ type: "doc", content });
 
-const image = (name: string, alt: string) => ({ url: `/images/${name}.jpg`, alt });
+// The starter's photos become assets: each file is uploaded once through
+// the store (rows in `assets`, bytes in the `media` bucket), and a field
+// value is `{ asset: <id> }` — the alt lives on the asset (spec 2026-09-08).
+const uploaded = new Map<string, string>();
+async function image(name: string, alt: string): Promise<{ asset: string }> {
+  let id = uploaded.get(name);
+  if (!id) {
+    const bytes = new Uint8Array(await readFile(`public/images/${name}.jpg`));
+    const dims = imageDimensions(bytes) ?? {};
+    id = (await assets.create({ filename: `${name}.jpg`, mime: "image/jpeg", size: bytes.byteLength, bytes, alt, title: alt, ...dims })).id;
+    uploaded.set(name, id);
+  }
+  return { asset: id };
+}
+const img = {
+  article: await image("article_photo", "Notebook on a desk"),
+  home2: await image("home_section_2", "Team working"),
+  hero: await image("hero_image", "Office interior"),
+  about: await image("about_main", "Team meeting"),
+};
 
 /** The articles collection's URL segment in a locale, from its own `path`. */
 const articlesSegment = (locale: string) => {
@@ -136,7 +156,7 @@ const article = await seedEntry("articles", {
   excerpt: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   body,
   tags: ["Insights", "Design"],
-  image: image("article_photo", "Notebook on a desk"),
+  image: img.article,
   date: "2026-09-02",
   author: jane.id,
 }, {
@@ -190,7 +210,7 @@ const imageText = (locale: string, linkLabel: string): Node => ({
   id: "node-intro",
   type: "imageText",
   fields: {
-    image: image("home_section_2", "Team working"),
+    image: img.home2,
     heading: "Duis aute irure dolor in reprehenderit",
     text: doc(
       p("In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
@@ -236,7 +256,7 @@ const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]
           { label: t.buttons[0], href: paths(locale).about },
           { label: t.buttons[1], href: paths(locale).articles },
         ],
-        image: image("hero_image", "Office interior"),
+        image: img.hero,
       },
     }],
     body: [imageText(locale, t.link), quote, points, favourites(t.favourites)],
@@ -279,7 +299,7 @@ const aboutTree = (t: { kicker: string; people: string }): Tree => ({
         kicker: t.kicker,
         heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
         text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
-        image: image("about_main", "Team meeting"),
+        image: img.about,
       },
     }],
     body: [

package/templates/next/smoodly/collections.ts

@@ -33,7 +33,7 @@ export const articles = smoodly.collection({
     excerpt: f.text().localized(),
     body: f.richtext().localized(),
     tags: f.list(f.text()).localized(),
-    image: f.image(),
+    image: f.image({ aspect: "3:2" }),
     date: f.date(),
     author: f.ref(() => people),
   },

package/templates/next/smoodly/server.ts

@@ -9,7 +9,7 @@
 // admin route enters it from config.ts — so nothing here may read the
 // config at module scope.
 import {
-  createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
+  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";
@@ -18,7 +18,7 @@ import { collections, config, sections, shared } from "./config";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
 type Bound = {
-  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
 };
 
 let cached: Bound | null = null;
@@ -36,10 +36,12 @@ function bound(): Bound {
     homePageSlug: config.homePageSlug,
     tree: config.pages?.tree,
   });
+  // The media library: rows in `assets`, bytes in the public `media` bucket.
+  const assets = new SupabaseAssetStore(db);
   const auth = supabaseAdminAuth({ authUrl: env.authUrl, authKey: env.authKey, db });
   // Shadows the exported `stores` below on purpose: `createSmoodlySite`
   // takes this local closure, not the export, so it never re-enters `bound()`.
-  const stores = () => ({ pages, entries });
+  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`
@@ -51,13 +53,13 @@ function bound(): Bound {
     pages: (config.registry.pages ?? []) as PageRegistration[],
     href,
   });
-  cached = { db, pages, entries, auth, site, renderer };
+  cached = { db, pages, entries, assets, auth, site, renderer };
   return cached;
 }
 
 export function stores() {
-  const { pages, entries } = bound();
-  return { pages, entries };
+  const { pages, entries, assets } = bound();
+  return { pages, entries, assets };
 }
 
 /** The server-side client (seed script, one-off admin tasks). */

package/templates/next/supabase/migrations/00000000000000_smoodly.sql

@@ -164,6 +164,35 @@ create table if not exists "paths" (
 create index if not exists "paths_target_idx"
   on "paths" ("space_id", "kind", "target_id");
 
+-- Media (spec 2026-09-08): one row per upload, bytes in the "media"
+-- bucket at "path". Immediate — never draft-gated, never versioned —
+-- so there is no locale row and no version table. status 'pending' is
+-- a row whose signed upload has not been confirmed; list never shows it.
+create table if not exists "assets" (
+  "id" uuid primary key default gen_random_uuid(),
+  "space_id" uuid not null default '00000000-0000-0000-0000-000000000000',
+  "kind" text not null check ("kind" in ('image', 'video', 'file')),
+  "status" text not null default 'pending' check ("status" in ('pending', 'ready')),
+  "path" text not null,
+  "mime" text not null,
+  "size" bigint not null,
+  "width" integer,
+  "height" integer,
+  "duration" numeric,
+  "poster_id" uuid references "assets" ("id") on delete set null,
+  "filename" text not null,
+  "title" text,
+  "alt" text,
+  "caption" text,
+  "credit" text,
+  "created_by" text,
+  "created_at" timestamptz not null default now(),
+  "updated_at" timestamptz not null default now()
+);
+
+create index if not exists "assets_space_created_idx"
+  on "assets" ("space_id", "status", "created_at" desc);
+
 -- Replace the targets' rows with the given rows in ONE call: a SQL
 -- function runs in the caller's transaction, so a primary-key collision
 -- rolls the whole rewrite back. Inserted rows get their space from the
@@ -193,6 +222,7 @@ alter table "entry_locales" enable row level security;
 alter table "entry_versions" enable row level security;
 alter table "refs" enable row level security;
 alter table "paths" enable row level security;
+alter table "assets" enable row level security;
 
 -- ── Cloud state (spec 2026-09-04 §1): three ordinary tables, shipped
 -- for everyone with ONE definition. Self-host fills them by hand or
@@ -329,6 +359,10 @@ drop trigger if exists "smoodly_a_set_space" on "paths";
 create trigger "smoodly_a_set_space" before insert on "paths"
   for each row execute function "smoodly_set_space"();
 
+drop trigger if exists "smoodly_a_set_space" on "assets";
+create trigger "smoodly_a_set_space" before insert on "assets"
+  for each row execute function "smoodly_set_space"();
+
 drop trigger if exists "smoodly_a_set_space" on "editors";
 create trigger "smoodly_a_set_space" before insert on "editors"
   for each row execute function "smoodly_set_space"();
@@ -365,6 +399,10 @@ drop trigger if exists "smoodly_b_row_cap" on "paths";
 create trigger "smoodly_b_row_cap" before insert on "paths"
   for each row execute function "smoodly_enforce_row_cap"();
 
+drop trigger if exists "smoodly_b_row_cap" on "assets";
+create trigger "smoodly_b_row_cap" before insert on "assets"
+  for each row execute function "smoodly_enforce_row_cap"();
+
 drop policy if exists "smoodly_write" on "pages";
 create policy "smoodly_write" on "pages" for all
   using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write')
@@ -433,11 +471,33 @@ drop policy if exists "smoodly_read" on "paths";
 create policy "smoodly_read" on "paths" for select
   using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (("kind" = 'page' and exists (select 1 from "page_locales" l where l."page_id" = "paths"."target_id" and l."locale" = "paths"."locale" and l."status" = 'published')) or ("kind" = 'entry' and exists (select 1 from "entry_locales" l where l."entry_id" = "paths"."target_id" and l."locale" = "paths"."locale" and l."status" = 'published'))));
 
+drop policy if exists "smoodly_write" on "assets";
+create policy "smoodly_write" on "assets" for all
+  using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write')
+  with check ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write');
+
+drop policy if exists "smoodly_read" on "assets";
+create policy "smoodly_read" on "assets" for select
+  using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and "status" = 'ready');
+
 drop policy if exists "smoodly_write" on "editors";
 create policy "smoodly_write" on "editors" for all
   using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write')
   with check ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write');
 
+insert into storage.buckets ("id", "name", "public", "file_size_limit")
+  values ('media', 'media', true, 104857600)
+  on conflict ("id") do update set "public" = excluded."public", "file_size_limit" = excluded."file_size_limit";
+
+drop policy if exists "smoodly_media_read" on storage.objects;
+create policy "smoodly_media_read" on storage.objects for select
+  using ("bucket_id" = 'media');
+
+drop policy if exists "smoodly_media_write" on storage.objects;
+create policy "smoodly_media_write" on storage.objects for all
+  using ("bucket_id" = 'media' and (select public."smoodly_key_kind"()) = 'write' and not (select public."smoodly_space_key_revoked"()) and split_part("name", '/', 1) = (select public."smoodly_current_space"())::text)
+  with check ("bucket_id" = 'media' and (select public."smoodly_key_kind"()) = 'write' and not (select public."smoodly_space_key_revoked"()) and split_part("name", '/', 1) = (select public."smoodly_current_space"())::text);
+
 create or replace view "people" with (security_invoker = true) as
 select
   e."id",

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

@@ -94,7 +94,7 @@ main > section { padding-block: 56px; }
 .hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
 .hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 520px; text-wrap: pretty; }
 .hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
-.hero__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
+.hero__image { width: 100%; border-radius: var(--radius); }
 
 /* ---------- page hero ---------- */
 
@@ -102,12 +102,12 @@ main > section { padding-block: 56px; }
 .page-hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
 .page-hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
 .page-hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
-.page-hero__image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
+.page-hero__image { width: 100%; border-radius: var(--radius); }
 
 /* ---------- image and text ---------- */
 
 .image-text__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
-.image-text__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
+.image-text__image { width: 100%; border-radius: var(--radius); }
 [data-image-side="right"] .image-text__image { order: 2; }
 .image-text__copy { display: flex; flex-direction: column; gap: 20px; }
 .image-text__grid > .h2 { align-self: start; }
@@ -136,7 +136,7 @@ main > section { padding-block: 56px; }
 .card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
 .card:hover { color: inherit; }
 .card:hover .card__title { color: var(--accent); }
-.card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
+.card__image { width: 100%; border-radius: var(--radius); }
 .card__meta { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
 .card__tag { color: var(--accent); font-weight: 600; }
 .card__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
@@ -169,7 +169,7 @@ h3.card__title { font-size: 24px; }
 .article__byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
 .article__byline strong { color: var(--ink); font-weight: 500; }
 .article__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--line); display: inline-block; flex: none; }
-.article__image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
+.article__image { width: 100%; border-radius: var(--radius); }
 .article__body { max-width: 720px; margin: 16px auto 0; width: 100%; }
 
 .related { border-top: 1px solid var(--line); margin-top: 88px; padding: 64px 0 96px; }

package/templates/next-intl/components/ArticleCard.tsx

@@ -1,3 +1,4 @@
+import { SmoodlyImage } from "smoodly/image";
 import { formatDate, type ArticleFields } from "./articles";
 
 // One article card: photo, first tag and date, title, excerpt. The grid
@@ -10,7 +11,7 @@ export function ArticleCard({ article, url, locale, compact = false }: {
   const Title = compact ? "h3" : "h2";
   return (
     <a className="card" href={url}>
-      {article.image?.url && <img className="card__image" src={article.image.url} alt={article.image.alt ?? ""} />}
+      {article.image && <SmoodlyImage image={article.image} className="card__image" sizes="(min-width: 900px) 33vw, 100vw" />}
       <div className="card__meta">
         {article.tags?.[0] && <span className="card__tag">{article.tags[0]}</span>}
         {article.date && <span>{formatDate(article.date, locale)}</span>}

package/templates/next-intl/components/articles.ts

@@ -1,6 +1,7 @@
 // Small helpers shared by the Articles index, the article page and the
 // Favourite articles section — the article's URL, dates in the request
 // locale, and the read time from the richtext body.
+import type { ResolvedImage } from "smoodly";
 import { articles } from "@/smoodly/collections";
 
 export type ArticleFields = {
@@ -9,7 +10,7 @@ export type ArticleFields = {
   excerpt?: string;
   body?: unknown;
   tags?: string[];
-  image?: { url: string; alt?: string };
+  image?: ResolvedImage;
   date: string;
 };
 

package/templates/next-intl/components/pages/Article.tsx

@@ -1,4 +1,5 @@
 import { RichText, smoodly, type EntryPageProps } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 import { articles } from "@/smoodly/collections";
 import { site } from "@/smoodly/server";
 import { ArticleCard } from "../ArticleCard";
@@ -37,7 +38,7 @@ async function ArticleView({ entry }: EntryPageProps) {
             </span>
           </p>
         </div>
-        {a.image?.url && <img className="article__image" src={a.image.url} alt={a.image.alt ?? ""} />}
+        {a.image && <SmoodlyImage image={a.image} aspect="21:9" className="article__image" sizes="(min-width: 900px) 800px, 100vw" priority />}
         <div className="article__body prose prose--lead"><RichText doc={a.body} /></div>
       </article>
       {related.length > 0 && (

package/templates/next-intl/components/sections/Hero.tsx

@@ -1,4 +1,5 @@
 import { f, smoodly, type Props } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 
 // The home page opener: kicker, heading, text, up to two buttons and a
 // portrait photo. Home locks it (`z.locked(Hero)`): one node an editor
@@ -13,14 +14,13 @@ export const heroSchema = smoodly.schema.section({
     heading: f.text(),
     text: f.text(),
     buttons: f.list(f.object({ label: f.text(), href: f.link() })).max(2),
-    image: f.image(),
+    image: f.image({ aspect: "4:5" }),
   },
   sample: {
     kicker: "Lorem ipsum dolor",
     heading: "Consectetur adipiscing elit sed do eiusmod",
     text: "Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
     buttons: [{ label: "About us", href: "/company/about-us" }],
-    image: { url: "/images/hero_image.jpg", alt: "Office interior" },
   },
 });
 
@@ -40,7 +40,7 @@ function HeroView({ kicker, heading, text, buttons, image, styles }: Props<typeo
             </div>
           )}
         </div>
-        {image?.url && <img className="hero__image" src={image.url} alt={image.alt ?? ""} />}
+        {image && <SmoodlyImage image={image} className="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority />}
       </div>
     </smoodly.Section>
   );

package/templates/next-intl/components/sections/ImageText.tsx

@@ -1,4 +1,5 @@
 import { f, RichText, smoodly, type Props } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 
 // A photo beside a heading and richtext, the photo on either side (a
 // style, not a field: styles are never translated). Without a photo the
@@ -10,7 +11,7 @@ export const imageTextSchema = smoodly.schema.section({
   title: "Image and text",
   description: "A photo beside a heading and text; text alone in two columns without one.",
   fields: {
-    image: f.image().optional(),
+    image: f.image({ aspect: "4:3" }).optional(),
     heading: f.text(),
     // Body copy beside a photo: emphasis and links, no headings — the block's
     // own heading field owns that. Every other richtext field takes the default.
@@ -39,9 +40,9 @@ function ImageTextView({ image, heading, text, link, styles }: Props<typeof imag
   return (
     <smoodly.Section styles={styles} className="image-text">
       <div className="container image-text__grid">
-        {image?.url ? (
+        {image ? (
           <>
-            <img className="image-text__image" src={image.url} alt={image.alt ?? ""} />
+            <SmoodlyImage image={image} className="image-text__image" sizes="(min-width: 900px) 50vw, 100vw" />
             <div className="image-text__copy">
               <h2 className="h2">{heading}</h2>
               {body}

package/templates/next-intl/components/sections/PageHero.tsx

@@ -1,4 +1,5 @@
 import { f, smoodly, type Props } from "smoodly";
+import { SmoodlyImage } from "smoodly/image";
 
 // The opener of every page that is not the home page: kicker, heading,
 // text and an optional wide photo. Page and Articles lock it — each page
@@ -12,7 +13,7 @@ export const pageHeroSchema = smoodly.schema.section({
     kicker: f.text().optional(),
     heading: f.text(),
     text: f.text(),
-    image: f.image().optional(),
+    image: f.image({ aspect: "21:9" }).optional(),
   },
   sample: {
     heading: "About us",
@@ -29,7 +30,7 @@ function PageHeroView({ kicker, heading, text, image, styles }: Props<typeof pag
           <h1 className="page-hero__heading">{heading}</h1>
           <p className="page-hero__text">{text}</p>
         </div>
-        {image?.url && <img className="page-hero__image" src={image.url} alt={image.alt ?? ""} />}
+        {image && <SmoodlyImage image={image} className="page-hero__image" sizes="100vw" priority />}
       </div>
     </smoodly.Section>
   );

package/templates/next-intl/next.config.ts

@@ -1,8 +1,11 @@
 import type { NextConfig } from "next";
 import createNextIntlPlugin from "next-intl/plugin";
+import { smoodlyImages } from "smoodly/image/config";
 
 const withNextIntl = createNextIntlPlugin();
 
-const config: NextConfig = {};
+// next/image may only optimize from the Supabase host named in SMOODLY_URL
+// (a local stack also needs Next's local-IP allowance; the helper sets it).
+const config: NextConfig = { images: smoodlyImages() };
 
 export default withNextIntl(config);

package/templates/next-intl/package.json

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

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

@@ -14,8 +14,9 @@
 // both; what a reader perceives as language (nav, headings, tags,
 // roles, footer titles) is translated. Idempotent: exits once the home
 // page exists.
+import { readFile } from "node:fs/promises";
 import next from "@next/env";
-import type { PageTree } from "smoodly";
+import { imageDimensions, type PageTree } from "smoodly";
 const { loadEnvConfig } = next;
 
 loadEnvConfig(process.cwd());
@@ -23,7 +24,7 @@ loadEnvConfig(process.cwd());
 const { config } = await import("../smoodly/config");
 const { articles } = await import("../smoodly/collections");
 const { href, stores } = await import("../smoodly/server");
-const { pages, entries } = stores();
+const { pages, entries, assets } = stores();
 
 const EN = config.locales.default;
 const FI = config.locales.supported.includes("fi") && EN !== "fi" ? "fi" : null;
@@ -46,7 +47,26 @@ const quoteBlock = (s: string): Node => ({ type: "blockquote", content: [p(s)] }
 const bullets = (...items: string[]): Node => ({ type: "bulletList", content: items.map((s) => ({ type: "listItem", content: [p(s)] })) });
 const doc = (...content: Node[]) => ({ type: "doc", content });
 
-const image = (name: string, alt: string) => ({ url: `/images/${name}.jpg`, alt });
+// The starter's photos become assets: each file is uploaded once through
+// the store (rows in `assets`, bytes in the `media` bucket), and a field
+// value is `{ asset: <id> }` — the alt lives on the asset (spec 2026-09-08).
+const uploaded = new Map<string, string>();
+async function image(name: string, alt: string): Promise<{ asset: string }> {
+  let id = uploaded.get(name);
+  if (!id) {
+    const bytes = new Uint8Array(await readFile(`public/images/${name}.jpg`));
+    const dims = imageDimensions(bytes) ?? {};
+    id = (await assets.create({ filename: `${name}.jpg`, mime: "image/jpeg", size: bytes.byteLength, bytes, alt, title: alt, ...dims })).id;
+    uploaded.set(name, id);
+  }
+  return { asset: id };
+}
+const img = {
+  article: await image("article_photo", "Notebook on a desk"),
+  home2: await image("home_section_2", "Team working"),
+  hero: await image("hero_image", "Office interior"),
+  about: await image("about_main", "Team meeting"),
+};
 
 /** The articles collection's URL segment in a locale, from its own `path`. */
 const articlesSegment = (locale: string) => {
@@ -136,7 +156,7 @@ const article = await seedEntry("articles", {
   excerpt: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   body,
   tags: ["Insights", "Design"],
-  image: image("article_photo", "Notebook on a desk"),
+  image: img.article,
   date: "2026-09-02",
   author: jane.id,
 }, {
@@ -190,7 +210,7 @@ const imageText = (locale: string, linkLabel: string): Node => ({
   id: "node-intro",
   type: "imageText",
   fields: {
-    image: image("home_section_2", "Team working"),
+    image: img.home2,
     heading: "Duis aute irure dolor in reprehenderit",
     text: doc(
       p("In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
@@ -236,7 +256,7 @@ const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]
           { label: t.buttons[0], href: paths(locale).about },
           { label: t.buttons[1], href: paths(locale).articles },
         ],
-        image: image("hero_image", "Office interior"),
+        image: img.hero,
       },
     }],
     body: [imageText(locale, t.link), quote, points, favourites(t.favourites)],
@@ -279,7 +299,7 @@ const aboutTree = (t: { kicker: string; people: string }): Tree => ({
         kicker: t.kicker,
         heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
         text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
-        image: image("about_main", "Team meeting"),
+        image: img.about,
       },
     }],
     body: [

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

@@ -33,7 +33,7 @@ export const articles = smoodly.collection({
     excerpt: f.text().localized(),
     body: f.richtext().localized(),
     tags: f.list(f.text()).localized(),
-    image: f.image(),
+    image: f.image({ aspect: "3:2" }),
     date: f.date(),
     author: f.ref(() => people),
   },

package/templates/next-intl/smoodly/server.ts

@@ -9,7 +9,7 @@
 // admin route enters it from config.ts — so nothing here may read the
 // config at module scope.
 import {
-  createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
+  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";
@@ -19,7 +19,7 @@ import { collections, config, sections, shared } from "./config";
 
 type Renderer = ReturnType<typeof createPageRenderer>;
 type Bound = {
-  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; assets: SupabaseAssetStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
 };
 
 let cached: Bound | null = null;
@@ -37,10 +37,12 @@ function bound(): Bound {
     homePageSlug: config.homePageSlug,
     tree: config.pages?.tree,
   });
+  // The media library: rows in `assets`, bytes in the public `media` bucket.
+  const assets = new SupabaseAssetStore(db);
   const auth = supabaseAdminAuth({ authUrl: env.authUrl, authKey: env.authKey, db });
   // Shadows the exported `stores` below on purpose: `createSmoodlySite`
   // takes this local closure, not the export, so it never re-enters `bound()`.
-  const stores = () => ({ pages, entries });
+  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`
@@ -52,13 +54,13 @@ function bound(): Bound {
     pages: (config.registry.pages ?? []) as PageRegistration[],
     href,
   });
-  cached = { db, pages, entries, auth, site, renderer };
+  cached = { db, pages, entries, assets, auth, site, renderer };
   return cached;
 }
 
 export function stores() {
-  const { pages, entries } = bound();
-  return { pages, entries };
+  const { pages, entries, assets } = bound();
+  return { pages, entries, assets };
 }
 
 /** The server-side client (seed script, one-off admin tasks). */

package/templates/next-intl/supabase/migrations/00000000000000_smoodly.sql

@@ -164,6 +164,35 @@ create table if not exists "paths" (
 create index if not exists "paths_target_idx"
   on "paths" ("space_id", "kind", "target_id");
 
+-- Media (spec 2026-09-08): one row per upload, bytes in the "media"
+-- bucket at "path". Immediate — never draft-gated, never versioned —
+-- so there is no locale row and no version table. status 'pending' is
+-- a row whose signed upload has not been confirmed; list never shows it.
+create table if not exists "assets" (
+  "id" uuid primary key default gen_random_uuid(),
+  "space_id" uuid not null default '00000000-0000-0000-0000-000000000000',
+  "kind" text not null check ("kind" in ('image', 'video', 'file')),
+  "status" text not null default 'pending' check ("status" in ('pending', 'ready')),
+  "path" text not null,
+  "mime" text not null,
+  "size" bigint not null,
+  "width" integer,
+  "height" integer,
+  "duration" numeric,
+  "poster_id" uuid references "assets" ("id") on delete set null,
+  "filename" text not null,
+  "title" text,
+  "alt" text,
+  "caption" text,
+  "credit" text,
+  "created_by" text,
+  "created_at" timestamptz not null default now(),
+  "updated_at" timestamptz not null default now()
+);
+
+create index if not exists "assets_space_created_idx"
+  on "assets" ("space_id", "status", "created_at" desc);
+
 -- Replace the targets' rows with the given rows in ONE call: a SQL
 -- function runs in the caller's transaction, so a primary-key collision
 -- rolls the whole rewrite back. Inserted rows get their space from the
@@ -193,6 +222,7 @@ alter table "entry_locales" enable row level security;
 alter table "entry_versions" enable row level security;
 alter table "refs" enable row level security;
 alter table "paths" enable row level security;
+alter table "assets" enable row level security;
 
 -- ── Cloud state (spec 2026-09-04 §1): three ordinary tables, shipped
 -- for everyone with ONE definition. Self-host fills them by hand or
@@ -329,6 +359,10 @@ drop trigger if exists "smoodly_a_set_space" on "paths";
 create trigger "smoodly_a_set_space" before insert on "paths"
   for each row execute function "smoodly_set_space"();
 
+drop trigger if exists "smoodly_a_set_space" on "assets";
+create trigger "smoodly_a_set_space" before insert on "assets"
+  for each row execute function "smoodly_set_space"();
+
 drop trigger if exists "smoodly_a_set_space" on "editors";
 create trigger "smoodly_a_set_space" before insert on "editors"
   for each row execute function "smoodly_set_space"();
@@ -365,6 +399,10 @@ drop trigger if exists "smoodly_b_row_cap" on "paths";
 create trigger "smoodly_b_row_cap" before insert on "paths"
   for each row execute function "smoodly_enforce_row_cap"();
 
+drop trigger if exists "smoodly_b_row_cap" on "assets";
+create trigger "smoodly_b_row_cap" before insert on "assets"
+  for each row execute function "smoodly_enforce_row_cap"();
+
 drop policy if exists "smoodly_write" on "pages";
 create policy "smoodly_write" on "pages" for all
   using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write')
@@ -433,11 +471,33 @@ drop policy if exists "smoodly_read" on "paths";
 create policy "smoodly_read" on "paths" for select
   using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (("kind" = 'page' and exists (select 1 from "page_locales" l where l."page_id" = "paths"."target_id" and l."locale" = "paths"."locale" and l."status" = 'published')) or ("kind" = 'entry' and exists (select 1 from "entry_locales" l where l."entry_id" = "paths"."target_id" and l."locale" = "paths"."locale" and l."status" = 'published'))));
 
+drop policy if exists "smoodly_write" on "assets";
+create policy "smoodly_write" on "assets" for all
+  using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write')
+  with check ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write');
+
+drop policy if exists "smoodly_read" on "assets";
+create policy "smoodly_read" on "assets" for select
+  using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and "status" = 'ready');
+
 drop policy if exists "smoodly_write" on "editors";
 create policy "smoodly_write" on "editors" for all
   using ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write')
   with check ("space_id" = (select "smoodly_current_space"()) and not (select "smoodly_space_key_revoked"()) and (select "smoodly_key_kind"()) = 'write');
 
+insert into storage.buckets ("id", "name", "public", "file_size_limit")
+  values ('media', 'media', true, 104857600)
+  on conflict ("id") do update set "public" = excluded."public", "file_size_limit" = excluded."file_size_limit";
+
+drop policy if exists "smoodly_media_read" on storage.objects;
+create policy "smoodly_media_read" on storage.objects for select
+  using ("bucket_id" = 'media');
+
+drop policy if exists "smoodly_media_write" on storage.objects;
+create policy "smoodly_media_write" on storage.objects for all
+  using ("bucket_id" = 'media' and (select public."smoodly_key_kind"()) = 'write' and not (select public."smoodly_space_key_revoked"()) and split_part("name", '/', 1) = (select public."smoodly_current_space"())::text)
+  with check ("bucket_id" = 'media' and (select public."smoodly_key_kind"()) = 'write' and not (select public."smoodly_space_key_revoked"()) and split_part("name", '/', 1) = (select public."smoodly_current_space"())::text);
+
 create or replace view "people" with (security_invoker = true) as
 select
   e."id",