toiljs 0.0.7 → 0.0.8

package/examples/basic/client/components/HoneycombBackground.tsx

@@ -4,6 +4,7 @@ const HEX_R = 34;
 const GAP = 3;
 const DRAW_R = HEX_R - GAP;
 const GLOW_DIST = 140;
+const LOGO_SRC = '/images/logo.svg';
 
 function tracePath(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
     ctx.beginPath();
@@ -43,6 +44,41 @@ function buildGrid(w: number, h: number): Array<{ x: number; y: number }> {
     return hexes;
 }
 
+/** Samples logo colours per hex centre for use in border glow. */
+function buildLogoColors(
+    img: HTMLImageElement,
+    hexes: Array<{ x: number; y: number }>,
+    w: number,
+    h: number,
+): Array<[number, number, number]> | null {
+    const lc = document.createElement('canvas');
+
+    lc.width = w;
+    lc.height = h;
+
+    const lctx = lc.getContext('2d');
+
+    if (!lctx) return null;
+
+    // Draw logo large + blurred, roughly where the hero logo sits in the viewport
+    const size = 700;
+    const cx = w / 2;
+    const cy = h * 0.42;
+
+    lctx.filter = 'blur(90px)';
+    lctx.drawImage(img, cx - size / 2, cy - size / 2, size, size);
+    lctx.filter = 'none';
+
+    // Sample one pixel per hex centre so we can use logo colours for border glow
+    return hexes.map(({ x, y }) => {
+        const px = Math.round(Math.max(0, Math.min(w - 1, x)));
+        const py = Math.round(Math.max(0, Math.min(h - 1, y)));
+        const d = lctx.getImageData(px, py, 1, 1).data;
+
+        return [d[0], d[1], d[2]] as [number, number, number];
+    });
+}
+
 export default function HoneycombBackground() {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const mouse = useRef({ x: -9999, y: -9999 });
@@ -58,19 +94,42 @@ export default function HoneycombBackground() {
 
         const dpr = window.devicePixelRatio || 1;
         let hexes: Array<{ x: number; y: number }> = [];
+        let hexColors: Array<[number, number, number]> = [];
         let raf: number;
 
+        const img = new Image();
+
+        img.onload = () => {
+            const colors = buildLogoColors(img, hexes, window.innerWidth, window.innerHeight);
+
+            if (colors) {
+                hexColors = colors;
+            }
+        };
+
+        img.src = LOGO_SRC;
+
         function resize() {
             if (!canvas || !ctx) return;
 
             const w = window.innerWidth;
             const h = window.innerHeight;
+
             canvas.width = w * dpr;
             canvas.height = h * dpr;
             canvas.style.width = `${w}px`;
             canvas.style.height = `${h}px`;
             ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
             hexes = buildGrid(w, h);
+
+            // Rebuild logo colours if image is already loaded
+            if (img.complete && img.naturalWidth > 0) {
+                const colors = buildLogoColors(img, hexes, w, h);
+
+                if (colors) {
+                    hexColors = colors;
+                }
+            }
         }
 
         function draw() {
@@ -78,36 +137,53 @@ export default function HoneycombBackground() {
 
             const w = window.innerWidth;
             const h = window.innerHeight;
+
             ctx.clearRect(0, 0, w, h);
 
             const mx = mouse.current.x;
             const my = mouse.current.y;
 
-            for (const { x, y } of hexes) {
+            for (let i = 0; i < hexes.length; i++) {
+                const hex = hexes[i];
+
+                if (!hex) continue;
+
+                const { x, y } = hex;
                 const dist = Math.hypot(x - mx, y - my);
                 const t = Math.max(0, 1 - dist / GLOW_DIST);
                 const ease = t * t * (3 - 2 * t);
 
+                // Base fill
                 tracePath(ctx, x, y, DRAW_R);
-
                 ctx.fillStyle = 'rgba(255,255,255,0.018)';
                 ctx.fill();
 
-                if (ease > 0) {
-                    ctx.fillStyle = `rgba(72,148,255,${ease * 0.025})`;
-                    ctx.fill();
-                }
 
+
+                // Base border
+                tracePath(ctx, x, y, DRAW_R);
                 ctx.strokeStyle = 'rgba(255,255,255,0.055)';
                 ctx.lineWidth = 1;
                 ctx.stroke();
 
+                // Glow border using logo-sampled colour
                 if (ease > 0) {
+                    const col = hexColors[i];
+                    const r = col ? col[0] : 120;
+                    const g = col ? col[1] : 180;
+                    const b = col ? col[2] : 255;
+
+                    // If the logo has colour here, use it; otherwise fall back to a soft white
+                    const bright = r + g + b;
+                    const fr = bright > 30 ? r : 120;
+                    const fg = bright > 30 ? g : 180;
+                    const fb = bright > 30 ? b : 255;
+
                     ctx.save();
-                    ctx.shadowColor = `rgba(72,148,255,${ease * 0.2})`;
+                    ctx.shadowColor = `rgba(${fr},${fg},${fb},${ease * 0.25})`;
                     ctx.shadowBlur = 8 * ease;
-                    ctx.strokeStyle = `rgba(120,180,255,${ease * 0.2})`;
-                    ctx.lineWidth = 1 + ease * 0.4;
+                    ctx.strokeStyle = `rgba(${fr},${fg},${fb},${ease * 0.18})`;
+                    ctx.lineWidth = 1 + ease * 0.5;
                     ctx.stroke();
                     ctx.restore();
                 }
@@ -148,15 +224,7 @@ export default function HoneycombBackground() {
     return (
         <canvas
             ref={canvasRef}
-            style={{
-                position: 'fixed',
-                inset: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
-                zIndex: 0,
-            }}
+            className="honeycomb-canvas"
         />
     );
 }
-

package/examples/basic/client/global-error.tsx

@@ -2,9 +2,9 @@
 // also catches errors thrown while rendering the layout itself — the last line of defense.
 export default function GlobalError({ error, reset }: Toil.RouteErrorProps) {
     return (
-        <main style={{ padding: 48, fontFamily: 'system-ui', textAlign: 'center' }}>
+        <main className="global-error">
             <h1>Something went wrong</h1>
-            <p style={{ opacity: 0.7 }}>{error.message}</p>
+            <p className="global-error-message">{error.message}</p>
             <button type="button" onClick={reset}>
                 Try again
             </button>

package/examples/basic/client/layout.tsx

@@ -1,13 +1,8 @@
 import { type ReactNode } from 'react';
 import Footer from './components/Footer';
+import Header from './components/Header';
 import HoneycombBackground from './components/HoneycombBackground';
 
-const GitHubIcon = () => (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.604-3.369-1.341-3.369-1.341-.454-1.154-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
-    </svg>
-);
-
 export default function Layout({ children }: { children?: ReactNode }) {
     return (
         <div className="app">
@@ -17,33 +12,7 @@ export default function Layout({ children }: { children?: ReactNode }) {
                 title="ToilJS"
                 meta={[{ name: 'description', content: 'The most performant React framework.' }]}
             />
-            <header className="nav">
-                <Toil.Link href="/" className="nav-logo">
-                    <img src="images/logo.svg" alt="ToilJS" width={28} height={28} />
-                    <span>ToilJS</span>
-                </Toil.Link>
-
-                <nav className="nav-center">
-                    <Toil.NavLink href="/" end className="nav-center-link">
-                        Home
-                    </Toil.NavLink>
-                    <Toil.NavLink href="/get-started" className="nav-center-link">
-                        Get Started
-                    </Toil.NavLink>
-                </nav>
-
-                <nav className="nav-links">
-                    <Toil.Link href="https://toil.org/docs">Docs</Toil.Link>
-                    <a
-                        href="https://github.com/btc-vision/toiljs"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="nav-github">
-                        <GitHubIcon />
-                        GitHub
-                    </a>
-                </nav>
-            </header>
+            <Header />
 
             <main className="content">{children}</main>
 

package/examples/basic/client/routes/index.tsx

@@ -43,7 +43,14 @@ export default function Home() {
         <section className="hero">
             <div className="hero-logo">
                 <img src="images/logo.svg" className="hero-logo-glow" alt="" aria-hidden="true" width={96} height={96} />
-                <img src="images/logo.svg" className="hero-logo-img" alt="ToilJS" width={96} height={96} />
+                <Toil.Image
+                    src="images/logo.svg"
+                    className="hero-logo-img"
+                    alt="ToilJS"
+                    width={96}
+                    height={96}
+                    priority
+                />
             </div>
 
             <h1 className="hero-title">ToilJS</h1>

package/examples/basic/client/routes/loader-demo/index.tsx

@@ -7,8 +7,14 @@ export const loader = async ({ searchParams }: Toil.LoaderArgs) => {
     return { loadedAt: new Date().toISOString(), q: searchParams.get('q') };
 };
 
+// Cache this route's data for 10s: revisiting within 10s is instant (no 2s wait); after that it
+// refetches on navigation. Use `false` to cache forever, or omit for the default (refetch every nav).
+export const revalidate: Toil.Revalidate = 10;
+
 export default function LoaderDemo() {
-    const data = Toil.useLoaderData<{ loadedAt: string; q: string | null }>();
+    // Pass the loader to infer the data type from its return — no generics, no restating the shape.
+    const data = Toil.useLoaderData(loader);
+    const router = Toil.useRouter();
     return (
         <main>
             <h1>Loader demo</h1>
@@ -16,6 +22,23 @@ export default function LoaderDemo() {
                 Data loaded before render (no <code>useEffect</code>): <code>{data.loadedAt}</code>
                 {data.q !== null ? ` · q=${data.q}` : ''}
             </p>
+            <p>
+                <button type="button" onClick={() => { router.revalidate(); }}>
+                    Revalidate (refetch)
+                </button>
+            </p>
+            {/* The write half: an action runs on submit, then revalidates this route's loader so
+                `loadedAt` above updates — read → write → revalidate, no manual refetch. */}
+            <Toil.Form action={async (form) => { await wait(500); console.log('saved', form.get('note')); }}>
+                {({ pending }) => (
+                    <>
+                        <input name="note" placeholder="Leave a note" disabled={pending} />
+                        <button type="submit" disabled={pending}>
+                            {pending ? 'Saving…' : 'Save & revalidate'}
+                        </button>
+                    </>
+                )}
+            </Toil.Form>
             <Toil.Link href="/">Back home</Toil.Link>
         </main>
     );

package/examples/basic/client/routes/test.tsx

@@ -0,0 +1,8 @@
+export default function TestPage() {
+    return (
+        <div className="test-page">
+            <img src="/images/test_image.webp" alt="Test" className="test-page-image" />
+        </div>
+    );
+}
+

package/examples/basic/client/styles/main.css

@@ -291,13 +291,26 @@ a:hover { color: var(--accent3); }
     background: #131d2e;
 }
 
+/* ── Global Error ── */
+.global-error {
+    padding: 3rem;
+    font-family: system-ui;
+    text-align: center;
+}
+
+.global-error-message {
+    opacity: 0.7;
+}
+
 /* ── Footer ── */
 .footer {
-    text-align: center;
     padding: 1.25rem;
     font-size: 0.82rem;
     color: var(--muted);
     border-top: 1px solid var(--border);
+    background: var(--bg);
+    position: relative;
+    z-index: 1;
 }
 
 /* ── Misc ── */
@@ -503,3 +516,37 @@ code {
     .spinner { animation-duration: 0s; }
 }
 
+/* ── Global Error ── */
+.global-error {
+    padding: 3rem;
+    font-family: system-ui;
+    text-align: center;
+}
+
+.global-error-message {
+    opacity: 0.7;
+}
+
+/* ── Test page ── */
+.test-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100%;
+}
+
+.test-page-image {
+    max-width: 100%;
+    max-height: 80vh;
+    border-radius: 8px;
+}
+
+/* ── Honeycomb background ── */
+.honeycomb-canvas {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "author": "Dacely",
     "description": "todo",
     "engines": {
@@ -95,16 +95,18 @@
         "@btc-vision/as-loader": "^0.0.0",
         "@btc-vision/hyper-express": "^6.17.4",
         "@clack/prompts": "^1.5.0",
-        "@eslint-react/eslint-plugin": "^4.2.3",
+        "@eslint-react/eslint-plugin": "^5.8.8",
         "@eslint/js": "^10.0.1",
         "@typescript-eslint/utils": "^8.60.0",
         "@vitejs/plugin-react": "^6.0.2",
-        "eslint-plugin-react-hooks": "^7.1.0-canary-ab18f33d-20260220",
+        "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.2",
         "picocolors": "^1.1.1",
+        "sharp": "^0.34.5",
         "toilscript": "^0.1.4",
         "typescript-eslint": "^8.60.0",
         "vite": "^8.0.14",
+        "vite-imagetools": "^10.0.0",
         "vite-plugin-node-polyfills": "^0.28.0"
     },
     "peerDependencies": {
@@ -131,10 +133,10 @@
         "@types/react-dom": "^19.2.3",
         "@vitest/coverage-v8": "^4.1.7",
         "@vitest/ui": "^4.1.7",
-        "eslint": "^10.2.0",
-        "jsdom": "^26.1.0",
+        "eslint": "^10.4.1",
+        "jsdom": "^29.1.1",
         "micromatch": "^4.0.8",
-        "prettier": "^3.8.1",
+        "prettier": "^3.8.3",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
         "typedoc": "^0.28.19",

package/presets/eslint.js

@@ -30,12 +30,12 @@ export default tseslint.config(
         },
         rules: {
             ...reactHooks.configs.recommended.rules,
-            // Route files conventionally export a `loader` alongside the default component; the toil
-            // compiler consumes it at runtime. Allow it (plus primitive constants) so Fast Refresh
-            // doesn't flag the pattern.
+            // Route files conventionally export a `loader` / `revalidate` alongside the default
+            // component; the toil compiler consumes them at runtime. Allow them (plus primitive
+            // constants) so Fast Refresh doesn't flag the pattern.
             'react-refresh/only-export-components': [
                 'warn',
-                { allowConstantExport: true, allowExportNames: ['loader'] },
+                { allowConstantExport: true, allowExportNames: ['loader', 'revalidate'] },
             ],
             'no-undef': 'off',
             '@typescript-eslint/no-unused-vars': 'off',

package/src/cli/configure.ts

@@ -16,10 +16,12 @@ import {
     PREPROCESSORS,
     TAILWIND_CSS,
     TAILWIND_ENTRY,
+    defaultConfigSource,
     detectPreprocessor,
     detectTailwind,
     packageDiff,
     preprocessorForExt,
+    setConfigImages,
     setStyleImports,
     styleEntry,
     type Preprocessor,
@@ -34,10 +36,60 @@ export interface ConfigureOptions {
     /** When set, the corresponding prompt is skipped (non-interactive). */
     readonly preprocessor?: Preprocessor;
     readonly tailwind?: boolean;
+    /** Toggle build-time image optimization. When set, the prompt is skipped. */
+    readonly images?: boolean;
     /** Run the package manager to sync deps. Default `true`; `false` edits files only. */
     readonly install?: boolean;
 }
 
+const CONFIG_FILES = [
+    'toil.config.ts',
+    'toil.config.mts',
+    'toil.config.js',
+    'toil.config.mjs',
+    'toiljs.config.ts',
+    'toiljs.config.mts',
+    'toiljs.config.js',
+    'toiljs.config.mjs',
+];
+
+/** Reads the project's `toil.config.*` (path + source), or null if none exists. */
+async function readConfigFile(root: string): Promise<{ path: string; source: string } | null> {
+    for (const name of CONFIG_FILES) {
+        const p = path.join(root, name);
+        try {
+            return { path: p, source: await fs.readFile(p, 'utf8') };
+        } catch {}
+    }
+    return null;
+}
+
+/**
+ * Persists `client.images` to the project's `toil.config`. Edits an existing config in place (or
+ * creates `toil.config.ts` if none); returns `false` if the existing file's shape couldn't be
+ * edited, so the caller can tell the user to set it by hand.
+ */
+async function writeImagesFlag(root: string, enabled: boolean): Promise<boolean> {
+    const existing = await readConfigFile(root);
+    if (!existing) {
+        await fs.writeFile(path.join(root, 'toil.config.ts'), defaultConfigSource(enabled), 'utf8');
+        return true;
+    }
+    const next = setConfigImages(existing.source, enabled);
+    if (next === null) return false;
+    await fs.writeFile(existing.path, next, 'utf8');
+    return true;
+}
+
+/** Current `client.images` setting (defaults to `true` when the config can't be loaded). */
+async function resolveImages(root: string): Promise<boolean> {
+    try {
+        return (await loadConfig({ root })).images;
+    } catch {
+        return true;
+    }
+}
+
 /** Resolves the client source dir, falling back to `<root>/client` if the config can't be loaded. */
 async function resolveClientDir(root: string): Promise<string> {
     try {
@@ -224,13 +276,18 @@ export async function runConfigure(opts: ConfigureOptions): Promise<void> {
         tailwind: detectTailwind(deps),
     };
 
-    const nonInteractive = opts.preprocessor !== undefined || opts.tailwind !== undefined;
+    const currentImages = await resolveImages(root);
+
+    const nonInteractive =
+        opts.preprocessor !== undefined || opts.tailwind !== undefined || opts.images !== undefined;
     let target: StyleFeatures;
+    let targetImages: boolean;
     if (nonInteractive) {
         target = {
             preprocessor: opts.preprocessor ?? current.preprocessor,
             tailwind: opts.tailwind ?? current.tailwind,
         };
+        targetImages = opts.images ?? currentImages;
     } else {
         const ppChoice = await select<Preprocessor>({
             message: 'CSS preprocessor',
@@ -240,33 +297,57 @@ export async function runConfigure(opts: ConfigureOptions): Promise<void> {
         bail(ppChoice);
         const twChoice = await confirm({ message: 'Use Tailwind CSS?', initialValue: current.tailwind });
         bail(twChoice);
+        const imChoice = await confirm({
+            message: 'Optimize images at build time?',
+            initialValue: currentImages,
+        });
+        bail(imChoice);
         target = { preprocessor: ppChoice, tailwind: twChoice };
+        targetImages = imChoice;
     }
 
-    if (target.preprocessor === current.preprocessor && target.tailwind === current.tailwind) {
-        outro('No changes — your styling setup is already up to date.');
+    const styleChanged =
+        target.preprocessor !== current.preprocessor || target.tailwind !== current.tailwind;
+    const imagesChanged = targetImages !== currentImages;
+    if (!styleChanged && !imagesChanged) {
+        outro('No changes — your setup is already up to date.');
         return;
     }
 
     const s = spinner();
     s.start('Updating project files');
-    await applyConfigure(clientAbsDir, pkgPath, pkg, current, target);
-    s.stop('Updated stylesheets, entry imports, and package.json');
+    if (styleChanged) await applyConfigure(clientAbsDir, pkgPath, pkg, current, target);
+    let imagesWarning = '';
+    if (imagesChanged && !(await writeImagesFlag(root, targetImages))) {
+        imagesWarning = pc.yellow(
+            ' Could not edit toil.config automatically — set `client.images` by hand.',
+        );
+    }
+    s.stop('Updated project files');
 
-    const pm = await detectPackageManager(root);
-    if (opts.install === false) {
-        note(`${pc.cyan(`${pm} install`)} to sync the dependency changes.`, 'Next step');
-    } else {
-        const i = spinner();
-        i.start(`Syncing dependencies with ${pm}`);
-        try {
-            await run(pm, ['install'], root);
-            i.stop('Dependencies synced');
-        } catch {
-            i.stop(pc.yellow(`Could not run \`${pm} install\` — run it yourself to finish`));
+    if (styleChanged) {
+        const pm = await detectPackageManager(root);
+        if (opts.install === false) {
+            note(`${pc.cyan(`${pm} install`)} to sync the dependency changes.`, 'Next step');
+        } else {
+            const i = spinner();
+            i.start(`Syncing dependencies with ${pm}`);
+            try {
+                await run(pm, ['install'], root);
+                i.stop('Dependencies synced');
+            } catch {
+                i.stop(pc.yellow(`Could not run \`${pm} install\` — run it yourself to finish`));
+            }
         }
     }
 
-    note(describe(current, target), 'Styling updated');
+    const summary = [
+        styleChanged ? describe(current, target) : '',
+        imagesChanged ? dim('  ') + `image optimization: ${currentImages ? 'on' : 'off'} → ${targetImages ? 'on' : 'off'}` : '',
+        imagesWarning,
+    ]
+        .filter(Boolean)
+        .join('\n');
+    note(summary, 'Updated');
     outro(`Reconfigured — restart \`${accent('toiljs dev')}\` to pick up the changes.`);
 }

package/src/cli/create.ts

@@ -74,6 +74,8 @@ export interface CreateOptions {
     readonly tailwind?: boolean;
     /** AI assistant files to scaffold: `true` = all, `false` = none, omitted = ask. */
     readonly ai?: boolean;
+    /** Enable build-time image optimization. Default `true`; omitted = ask. */
+    readonly images?: boolean;
     readonly install?: boolean;
     readonly git?: boolean;
     readonly pm?: string;
@@ -104,6 +106,7 @@ function scaffold(
     template: Template,
     features: StyleFeatures,
     aiTools: readonly string[],
+    images: boolean,
 ): Record<string, string> {
     const toilVersion = version();
     const devDependencies: Record<string, string> = {
@@ -142,7 +145,12 @@ function scaffold(
         'package.json': JSON.stringify(pkg, null, 4) + '\n',
         'toil.config.ts':
             "import { defineConfig } from 'toiljs/compiler';\n\n" +
-            'export default defineConfig({});\n',
+            'export default defineConfig({\n' +
+            '    client: {\n' +
+            '        // Optimize images at build time (resize/compress imported images).\n' +
+            `        images: ${String(images)},\n` +
+            '    },\n' +
+            '});\n',
         'tsconfig.json':
             '{\n    "extends": "toiljs/tsconfig",\n    "include": ["client", "toil-env.d.ts", "toil-routes.d.ts"]\n}\n',
         'eslint.config.js': "import toiljs from 'toiljs/eslint';\n\nexport default toiljs;\n",
@@ -443,6 +451,14 @@ export async function runCreate(opts: CreateOptions): Promise<void> {
         aiTools = picked.includes('none') ? [] : picked;
     }
 
+    // Build-time image optimization: on by default (just press enter to keep it).
+    let images = opts.images ?? true;
+    if (opts.images === undefined && !opts.yes) {
+        const im = await confirm({ message: 'Optimize images at build time?', initialValue: true });
+        bail(im);
+        images = im;
+    }
+
     let initGit = opts.git ?? false;
     let install = opts.install ?? false;
     const pm = opts.pm ?? 'npm';
@@ -465,7 +481,7 @@ export async function runCreate(opts: CreateOptions): Promise<void> {
 
     const s = spinner();
     s.start('Scaffolding project');
-    await writeFiles(targetDir, scaffold(name, template, features, aiTools));
+    await writeFiles(targetDir, scaffold(name, template, features, aiTools, images));
     if (template === 'app') {
         // Copy the example client (the single starter source), set its <title>, then apply styling.
         await fs.cp(appClientDir(), path.join(targetDir, 'client'), { recursive: true });