create-nifra 3.3.0 → 4.0.0

package/template-site-preact/routes/index.tsx

@@ -1,24 +1,11 @@
-import type { ActionArgs, LoaderArgs, LoaderData } from "@nifrajs/client"
-import type { backend } from "../backend"
+import type { Route } from "./+types/index"
 
 export const meta = {
   title: "nifra site",
   meta: [{ name: "description", content: "A nifra + Preact SSR site, deployable to every runtime." }],
 }
 
-// Loader runs on the server (in-process during SSR). The action handles the form POST; after a
-// client submit the loader revalidates with no full reload (progressive enhancement).
-export async function loader({ api }: LoaderArgs<typeof backend>) {
-  const res = await api.count.get()
-  return { count: res.ok ? res.data.count : 0 }
-}
-
-export async function action({ api }: ActionArgs<typeof backend>) {
-  await api.count.post()
-  return { ok: true }
-}
-
-export default function Home(props: { data: LoaderData<typeof loader> }) {
+export default function Home(props: Route.ComponentProps) {
   return (
     <>
       <section className="hero">

package/template-site-solid/README.md

@@ -7,7 +7,6 @@ is Web-standard, so only the server entry + build target differ per platform.
 ```sh
 bun install
 bun run dev        # nifra dev → true-HMR dev server (Bun + nifra SSR) at http://localhost:3000
-bun run preview    # wrangler pages dev dist → preview the built Cloudflare bundle (run `bun run build` first)
 ```
 
 The backend starter includes response security headers, explicit-origin CORS, a 30-second request
@@ -18,32 +17,35 @@ evidence in `nifra.assurance.ts`.
 
 Routes are Solid function components (JSX, compiled by `solidBunPlugin`) under `routes/` - `index.tsx`
 (landing + a live loader/action counter), `_layout.tsx` (chrome), `_404.tsx`. The frontend adapter is
-one line in `framework.ts`; data lives behind `backend.ts`. Each `build*` script wires
+one line in `backend/framework.ts`; data lives behind `backend/app.ts`. Each `build*` script wires
 `solidBunPlugin("dom")` for the client and `("ssr")` + the `solid` export condition for the server.
 
-## Deploy - pick a target
+## Deploy
 
-| target | build | deploy |
+The app deploys to the `target` in `nifra.config.ts` (chosen with `bun create nifra --target`, switched
+with `nifra target <t>`). `bun run build` runs `nifra build`, which generates that target's server
+entry from `backend/` and `routes/`, so the app carries no per-runtime entry or build script.
+
+| target | `bun run build` emits | then |
 | --- | --- | --- |
-| **Bun** (flagship) | `bun run build:bun` | `bun run start` - any host |
-| **Node** | `bun run build:node` | `docker build -t app . && docker run -p 3000:3000 app` (or `bun run start:node`) |
-| **Deno Deploy** | `bun run build:deno` | `deployctl deploy --prod --entrypoint=dist-deno/server-deno.js` |
-| **Cloudflare Pages** | `bun run build` | `bun run deploy:cf` |
-| **Vercel Edge** | `bun run build:vercel` | `bun run deploy:vercel` |
+| **bun** (default) | `dist/server.js` + assets | `bun dist/server.js` on any host (`--docker` adds a Dockerfile) |
+| **node** | `dist/server.js` + assets | `node dist/server.js` (`--docker` adds a Dockerfile) |
+| **deno** | `dist/server.js` + assets | `deployctl deploy --prod --entrypoint=dist/server.js` |
+| **cloudflare** | `dist/` (`_worker.js`, `_routes.json`) | `wrangler pages deploy dist` |
+| **vercel** | `.vercel/output/` (Build Output API) | `vercel deploy --prebuilt` |
 
-nifra never enters your cloud credentials - it scaffolds the configs (`Dockerfile`, `deno.json`,
-`wrangler.toml`, Vercel Build Output API); you run the vendor CLI.
+nifra never enters your cloud credentials: it writes the target's config (`wrangler.toml`,
+`deno.json`, a `Dockerfile`) and you run the vendor CLI.
 
 ## Structure
 
 ```
 routes/        index.tsx (landing), _layout.tsx (chrome), _404.tsx
-framework.ts   the adapter (solidAdapter) - imported by the server entries (edge-bundlable)
-nifra.config.ts the nifra CLI's dev/build config (adapter + clientModule + Solid plugins) - read by `nifra dev`
-backend.ts     your contract (loaders/actions call it in-process)
-server-bun.ts  Bun entry (Bun.serve)         build-bun.ts    → dist-bun/
-_worker.ts     Cloudflare Pages entry        build.ts        → dist/
-server-node.ts Node entry (@nifrajs/node)       build-node.ts   → dist-node/   (Dockerfile)
-server-deno.ts Deno entry (@nifrajs/deno)       build-deno.ts   → dist-deno/    (deno.json)
-server-vercel.ts Vercel Edge function        build-vercel.ts → .vercel/output/
+               index.backend.ts - the landing page's loader/action (server only)
+backend/       app.ts - your contract (loaders/actions call it in-process)
+               framework.ts - the adapter (solidAdapter) - imported by the server entry `nifra build` generates (edge-bundlable)
+frontend/      browser-only code (components, hooks) - created when you need it
+shared/        code both sides import (types, formatting, validation) - may import only shared code
+nifra.config.ts the nifra CLI's dev/build config (adapter + clientModule + Solid plugins) - read by `nifra dev` and `nifra build`,
+               including `target`, where `nifra build` deploys
 ```

package/template-site-solid/nifra.config.ts

@@ -1,11 +1,12 @@
 // The nifra CLI's config - read by `nifra dev|build|start`. It's imported ONLY by the CLI (which runs on
 // Bun), so it can eagerly import the Vite plugin + the Solid compile plugin - keeping them OUT of the
-// edge worker bundle that `framework.ts` (the render-adapter source the entries import) must stay free
-// of. Solid needs the `"solid"` resolve condition (routes solid-js to its source / JSX-dev build).
-import { solidBunPlugin } from "@nifrajs/web-solid"
+// edge worker bundle that `backend/framework.ts` (the render-adapter source the generated server entry
+// imports) must stay free of. Solid needs the `"solid"` resolve condition (routes solid-js to its
+// source / JSX-dev build).
+import { solidBunPlugin } from "@nifrajs/web-solid/plugin"
 import solid from "vite-plugin-solid"
 
-export { adapter } from "./framework"
+export { adapter } from "./backend/framework"
 export const clientModule = "@nifrajs/web-solid/client"
 // `ssr: true` makes vite-plugin-solid emit hydratable client output, matching nifra's Bun SSR.
 export const vitePlugins = [solid({ ssr: true })]

package/template-site-solid/routes/index.tsx

@@ -1,24 +1,11 @@
-import type { ActionArgs, LoaderArgs, LoaderData } from "@nifrajs/client"
-import type { backend } from "../backend"
+import type { Route } from "./+types/index"
 
 export const meta = {
   title: "nifra site",
   meta: [{ name: "description", content: "A nifra + Solid SSR site, deployable to every runtime." }],
 }
 
-// Loader runs on the server (in-process during SSR). The action handles the form POST; after a
-// client submit the loader revalidates with no full reload (progressive enhancement).
-export async function loader({ api }: LoaderArgs<typeof backend>) {
-  const res = await api.count.get()
-  return { count: res.ok ? res.data.count : 0 }
-}
-
-export async function action({ api }: ActionArgs<typeof backend>) {
-  await api.count.post()
-  return { ok: true }
-}
-
-export default function Home(props: { data: LoaderData<typeof loader> }) {
+export default function Home(props: Route.ComponentProps) {
   return (
     <div>
       <section class="hero">

package/template-site-svelte/README.md

@@ -7,7 +7,6 @@ is Web-standard, so only the server entry + build target differ per platform.
 ```sh
 bun install
 bun run dev        # nifra dev → true-HMR dev server (Bun + nifra SSR) at http://localhost:3000
-bun run preview    # wrangler pages dev dist → preview the built Cloudflare bundle (run `bun run build` first)
 ```
 
 The backend starter includes response security headers, explicit-origin CORS, a 30-second request
@@ -20,32 +19,35 @@ Routes are `.svelte` components under `routes/` - `index.svelte` (landing + a li
 counter), `_layout.svelte` (chrome via the `children` snippet), `_404.svelte`. A route's
 `loader`/`action`/`meta` are named exports from its `<script module>` block; the page receives the
 loader output as the `data` prop (`let { data } = $props()`). The frontend adapter is one line in
-`framework.ts`; data lives behind `backend.ts`. Each `build*` script wires `svelteBunPlugin("dom")` for
+`backend/framework.ts`; data lives behind `backend/app.ts`. Each `build*` script wires `svelteBunPlugin("dom")` for
 the client and `("ssr")` for the server.
 
-## Deploy - pick a target
+## Deploy
 
-| target | build | deploy |
+The app deploys to the `target` in `nifra.config.ts` (chosen with `bun create nifra --target`, switched
+with `nifra target <t>`). `bun run build` runs `nifra build`, which generates that target's server
+entry from `backend/` and `routes/`, so the app carries no per-runtime entry or build script.
+
+| target | `bun run build` emits | then |
 | --- | --- | --- |
-| **Bun** (flagship) | `bun run build:bun` | `bun run start` - any host |
-| **Node** | `bun run build:node` | `docker build -t app . && docker run -p 3000:3000 app` (or `bun run start:node`) |
-| **Deno Deploy** | `bun run build:deno` | `deployctl deploy --prod --entrypoint=dist-deno/server-deno.js` |
-| **Cloudflare Pages** | `bun run build` | `bun run deploy:cf` |
-| **Vercel Edge** | `bun run build:vercel` | `bun run deploy:vercel` |
+| **bun** (default) | `dist/server.js` + assets | `bun dist/server.js` on any host (`--docker` adds a Dockerfile) |
+| **node** | `dist/server.js` + assets | `node dist/server.js` (`--docker` adds a Dockerfile) |
+| **deno** | `dist/server.js` + assets | `deployctl deploy --prod --entrypoint=dist/server.js` |
+| **cloudflare** | `dist/` (`_worker.js`, `_routes.json`) | `wrangler pages deploy dist` |
+| **vercel** | `.vercel/output/` (Build Output API) | `vercel deploy --prebuilt` |
 
-nifra never enters your cloud credentials - it scaffolds the configs (`Dockerfile`, `deno.json`,
-`wrangler.toml`, Vercel Build Output API); you run the vendor CLI.
+nifra never enters your cloud credentials: it writes the target's config (`wrangler.toml`,
+`deno.json`, a `Dockerfile`) and you run the vendor CLI.
 
 ## Structure
 
 ```
 routes/        index.svelte (landing), _layout.svelte (chrome), _404.svelte
-framework.ts   the adapter (svelteAdapter) - imported by the server entries (edge-bundlable)
-nifra.config.ts the nifra CLI's dev/build config (adapter + clientModule + Svelte plugins) - read by `nifra dev`
-backend.ts     your contract (loaders/actions call it in-process)
-server-bun.ts  Bun entry (Bun.serve)         build-bun.ts    → dist-bun/
-_worker.ts     Cloudflare Pages entry        build.ts        → dist/
-server-node.ts Node entry (@nifrajs/node)       build-node.ts   → dist-node/   (Dockerfile)
-server-deno.ts Deno entry (@nifrajs/deno)       build-deno.ts   → dist-deno/    (deno.json)
-server-vercel.ts Vercel Edge function        build-vercel.ts → .vercel/output/
+               index.backend.ts - the landing page's loader/action (server only)
+backend/       app.ts - your contract (loaders/actions call it in-process)
+               framework.ts - the adapter (svelteAdapter) - imported by the server entry `nifra build` generates (edge-bundlable)
+frontend/      browser-only code (components, hooks) - created when you need it
+shared/        code both sides import (types, formatting, validation) - may import only shared code
+nifra.config.ts the nifra CLI's dev/build config (adapter + clientModule + Svelte plugins) - read by `nifra dev` and `nifra build`,
+               including `target`, where `nifra build` deploys
 ```

package/template-site-svelte/nifra.config.ts

@@ -1,10 +1,11 @@
 // The nifra CLI's config - read by `nifra dev|build|start`. It's imported ONLY by the CLI (which runs on
 // Bun), so it can eagerly import the Vite plugin + the Svelte compiler - keeping them OUT of the edge
-// worker bundle that `framework.ts` (the render-adapter source the entries import) must stay free of.
+// worker bundle that `backend/framework.ts` (the render-adapter source the generated server entry
+// imports) must stay free of.
 import { svelte } from "@sveltejs/vite-plugin-svelte"
 import { svelteBunPlugin } from "@nifrajs/web-svelte/plugin"
 
-export { adapter } from "./framework"
+export { adapter } from "./backend/framework"
 export const clientModule = "@nifrajs/web-svelte/client"
 // `nifra dev` HMR: Vite + the official Svelte plugin compile/HMR the .svelte client modules.
 export const vitePlugins = [svelte()]

package/template-site-svelte/routes/index.svelte

@@ -1,27 +1,14 @@
 <script module lang="ts">
-import type { ActionArgs, LoaderArgs } from "@nifrajs/client"
-import type { backend } from "../backend"
-
 export const meta = {
   title: "nifra site",
   meta: [{ name: "description", content: "A nifra + Svelte SSR site, deployable to every runtime." }],
 }
-
-// Loader runs on the server (in-process during SSR). The action handles the form POST; after a
-// client submit the loader revalidates with no full reload (progressive enhancement).
-export async function loader({ api }: LoaderArgs<typeof backend>) {
-  const res = await api.count.get()
-  return { count: res.ok ? res.data.count : 0 }
-}
-
-export async function action({ api }: ActionArgs<typeof backend>) {
-  await api.count.post()
-  return { ok: true }
-}
 </script>
 
 <script lang="ts">
-  let { data } = $props()
+  import type { Route } from "./+types/index"
+
+  let { data }: Route.ComponentProps = $props()
 </script>
 
 <section class="hero">

package/template-site-vue/README.md

@@ -7,7 +7,6 @@ is Web-standard, so only the server entry + build target differ per platform.
 ```sh
 bun install
 bun run dev        # nifra dev → true-HMR dev server (Bun + nifra SSR) at http://localhost:3000
-bun run preview    # wrangler pages dev dist → preview the built Cloudflare bundle (run `bun run build` first)
 ```
 
 The backend starter includes response security headers, explicit-origin CORS, a 30-second request
@@ -20,32 +19,34 @@ Routes are **Vue SFCs** (`.vue`) under `routes/` - `index.vue` (landing + a live
 counter), `_layout.vue` (chrome via the default slot), `_404.vue`. A route SFC's plain `<script>`
 carries nifra's `loader`/`action`/`meta`; `<script setup>` + `<template>` are the component. The
 build compiles them with `vueBunPlugin` (`@nifrajs/web-vue/plugin`). The frontend adapter is one line in
-`framework.ts`; data lives behind `backend.ts`.
+`backend/framework.ts`; data lives behind `backend/app.ts`.
 
-## Deploy - pick a target
+## Deploy
 
-| target | build | deploy |
+The app deploys to the `target` in `nifra.config.ts` (chosen with `bun create nifra --target`, switched
+with `nifra target <t>`). `bun run build` runs `nifra build`, which generates that target's server
+entry from `backend/` and `routes/`, so the app carries no per-runtime entry or build script.
+
+| target | `bun run build` emits | then |
 | --- | --- | --- |
-| **Bun** (flagship) | `bun run build:bun` | `bun run start` - any host |
-| **Node** | `bun run build:node` | `docker build -t app . && docker run -p 3000:3000 app` (or `bun run start:node`) |
-| **Deno Deploy** | `bun run build:deno` | `deployctl deploy --prod --entrypoint=dist-deno/server-deno.js` |
-| **Cloudflare Pages** | `bun run build` | `bun run deploy:cf` |
-| **Vercel Edge** | `bun run build:vercel` | `bun run deploy:vercel` |
+| **bun** (default) | `dist/server.js` + assets | `bun dist/server.js` on any host (`--docker` adds a Dockerfile) |
+| **node** | `dist/server.js` + assets | `node dist/server.js` (`--docker` adds a Dockerfile) |
+| **deno** | `dist/server.js` + assets | `deployctl deploy --prod --entrypoint=dist/server.js` |
+| **cloudflare** | `dist/` (`_worker.js`, `_routes.json`) | `wrangler pages deploy dist` |
+| **vercel** | `.vercel/output/` (Build Output API) | `vercel deploy --prebuilt` |
 
-The routes, `backend.ts`, and the client bundle are shared; each `build*` script swaps `buildServer`'s
-target/conditions and the server entry. nifra never enters your cloud credentials - it scaffolds the
-configs (`Dockerfile`, `deno.json`, `wrangler.toml`, Vercel Build Output API); you run the vendor CLI.
+nifra never enters your cloud credentials: it writes the target's config (`wrangler.toml`,
+`deno.json`, a `Dockerfile`) and you run the vendor CLI.
 
 ## Structure
 
 ```
 routes/        index.vue (landing), _layout.vue (chrome), _404.vue  (Vue SFCs)
-framework.ts   the adapter (vueAdapter) - imported by the server entries (edge-bundlable)
-nifra.config.ts the nifra CLI's dev/build config (adapter + clientModule + Vue plugins) - read by `nifra dev`
-backend.ts     your contract (loaders/actions call it in-process)
-server-bun.ts  Bun entry (Bun.serve)         build-bun.ts    → dist-bun/
-_worker.ts     Cloudflare Pages entry        build.ts        → dist/
-server-node.ts Node entry (@nifrajs/node)       build-node.ts   → dist-node/   (Dockerfile)
-server-deno.ts Deno entry (@nifrajs/deno)       build-deno.ts   → dist-deno/    (deno.json)
-server-vercel.ts Vercel Edge function        build-vercel.ts → .vercel/output/
+               index.backend.ts - the landing page's loader/action (server only)
+backend/       app.ts - your contract (loaders/actions call it in-process)
+               framework.ts - the adapter (vueAdapter) - imported by the server entry `nifra build` generates (edge-bundlable)
+frontend/      browser-only code (components, hooks) - created when you need it
+shared/        code both sides import (types, formatting, validation) - may import only shared code
+nifra.config.ts the nifra CLI's dev/build config (adapter + clientModule + Vue plugins) - read by `nifra dev` and `nifra build`,
+               including `target`, where `nifra build` deploys
 ```

package/template-site-vue/nifra.config.ts

@@ -1,17 +1,18 @@
 // The nifra CLI's config - read by `nifra dev|build|start`. It's imported ONLY by the CLI (which runs on
 // Bun), so it can eagerly import the Vite plugin + the SFC compiler - keeping them OUT of the edge
-// worker bundle that `framework.ts` (the render-adapter source the entries import) must stay free of.
+// worker bundle that `backend/framework.ts` (the render-adapter source the generated server entry
+// imports) must stay free of.
 import { vueBunPlugin } from "@nifrajs/web-vue/plugin"
 import vue from "@vitejs/plugin-vue"
 
-export { adapter } from "./framework"
+export { adapter } from "./backend/framework"
 export const clientModule = "@nifrajs/web-vue/client"
 // `nifra dev` HMR: Vite + the official Vue plugin compile/HMR the .vue client modules.
 export const vitePlugins = [vue()]
 // `nifra build` (client) + `nifra start`/`nifra dev` (Bun-side SSR) compile .vue via these.
 export const clientPlugins = [vueBunPlugin("dom")]
 export const serverPlugins = [vueBunPlugin("ssr")]
-// Vue feature flags the plugin doesn't inject (mirrors the build scripts' define).
+// Vue feature flags the plugin doesn't inject; `nifra build` defines them in both bundles.
 export const define = {
   __VUE_OPTIONS_API__: "true",
   __VUE_PROD_DEVTOOLS__: "false",

package/template-site-vue/routes/_layout.vue

@@ -1,33 +1,10 @@
 <!--
   Root layout (Vue SFC) - wraps every page; the compose fold passes the page through the default slot.
-  The global stylesheet is rendered as a <style> element via <component :is="'style'"> - SFC <style>
-  blocks are dropped (nifra has no CSS pipeline), and a dynamic component sidesteps the template
-  compiler's special-casing of a literal <style> tag. Keeps the whole template single-file.
+  The <style> block is global (not scoped): @nifrajs/web-vue/plugin compiles it into the app
+  stylesheet, which the document links before it renders.
 -->
-<script setup lang="ts">
-const css = `
-  :root { --bg:#0a0a0f; --panel:#14141c; --border:#26263a; --fg:#e8e8f0; --muted:#9a9ab0; --accent:#7c5cff; --accent2:#00d4ff; }
-  * { box-sizing: border-box; } html { color-scheme: dark; }
-  body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
-  a { color:var(--accent2); text-decoration:none; } a:hover { text-decoration:underline; }
-  .wrap { max-width:840px; margin:0 auto; padding:0 24px; }
-  header.site { border-bottom:1px solid var(--border); } header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:62px; }
-  .logo, .logo b { font-weight:800; font-size:20px; } .logo b { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
-  .hero { text-align:center; padding:80px 0 56px; }
-  .hero h1 { font-size:clamp(36px,6vw,56px); line-height:1.05; margin:0 0 16px; letter-spacing:-0.03em; }
-  .hero h1 .grad { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
-  .hero p { font-size:19px; color:var(--muted); max-width:560px; margin:0 auto 28px; }
-  .card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
-  .card h3 { margin:0 0 4px; } .card p { margin:0; color:var(--muted); font-size:14px; }
-  .count { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; min-width:44px; text-align:center; background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
-  .btn { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0a0a0f; font:inherit; font-weight:700; border:none; cursor:pointer; padding:11px 20px; border-radius:10px; }
-  footer.site { border-top:1px solid var(--border); color:var(--muted); font-size:14px; } footer.site .wrap { padding:24px; }
-`.trim()
-</script>
-
 <template>
   <div id="app">
-    <component :is="'style'">{{ css }}</component>
     <header class="site">
       <div class="wrap">
         <a href="/" class="logo"><b>nifra</b></a>
@@ -38,3 +15,22 @@ const css = `
     <footer class="site"><div class="wrap">Built with nifra</div></footer>
   </div>
 </template>
+
+<style>
+:root { --bg:#0a0a0f; --panel:#14141c; --border:#26263a; --fg:#e8e8f0; --muted:#9a9ab0; --accent:#7c5cff; --accent2:#00d4ff; }
+* { box-sizing: border-box; } html { color-scheme: dark; }
+body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
+a { color:var(--accent2); text-decoration:none; } a:hover { text-decoration:underline; }
+.wrap { max-width:840px; margin:0 auto; padding:0 24px; }
+header.site { border-bottom:1px solid var(--border); } header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:62px; }
+.logo, .logo b { font-weight:800; font-size:20px; } .logo b { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+.hero { text-align:center; padding:80px 0 56px; }
+.hero h1 { font-size:clamp(36px,6vw,56px); line-height:1.05; margin:0 0 16px; letter-spacing:-0.03em; }
+.hero h1 .grad { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+.hero p { font-size:19px; color:var(--muted); max-width:560px; margin:0 auto 28px; }
+.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
+.card h3 { margin:0 0 4px; } .card p { margin:0; color:var(--muted); font-size:14px; }
+.count { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; min-width:44px; text-align:center; background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+.btn { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0a0a0f; font:inherit; font-weight:700; border:none; cursor:pointer; padding:11px 20px; border-radius:10px; }
+footer.site { border-top:1px solid var(--border); color:var(--muted); font-size:14px; } footer.site .wrap { padding:24px; }
+</style>

package/template-site-vue/routes/index.vue

@@ -1,33 +1,27 @@
 <!--
-  Home route (Vue SFC). The plain <script> carries nifra's route convention - loader/action/meta are
-  server-only named exports the client codegen tree-shakes out. <script setup> + <template> are the
-  component. The form POST is the SSR action path; after a client submit the loader revalidates with
+  Home route (Vue SFC). The plain <script> carries meta; loader and action live in index.backend.ts.
+  <script setup> + <template> are the component. The form POST is the SSR action path; after a client submit the loader revalidates with
   no full reload (progressive enhancement). Compiled by @nifrajs/web-vue/plugin.
 -->
 <script lang="ts">
-import type { ActionArgs, LoaderArgs } from "@nifrajs/client"
-import type { backend } from "../backend"
-
 export const meta = {
   title: "nifra site",
   meta: [{ name: "description", content: "A nifra + Vue SSR site, deployable to every runtime." }],
 }
-
-// Loader runs on the server (in-process during SSR). The action handles the form POST.
-export async function loader({ api }: LoaderArgs<typeof backend>) {
-  const res = await api.count.get()
-  return { count: res.ok ? res.data.count : 0 }
-}
-
-export async function action({ api }: ActionArgs<typeof backend>) {
-  await api.count.post()
-  return { ok: true }
-}
 </script>
 
 <script setup lang="ts">
+import type { Route } from "./+types/index"
+
 // compose() spreads data/actionData/pending/submission as props - declare them so they aren't attrs.
-defineProps(["data", "actionData", "pending", "submission"])
+// Listed rather than `defineProps<Route.ComponentProps>()`: the SFC compiler cannot follow an imported
+// type through tsconfig `rootDirs`, but it can declare these keys and leave their types to TypeScript.
+defineProps<{
+  data: Route.LoaderData
+  actionData?: Route.ActionData
+  pending?: Route.ComponentProps["pending"]
+  submission?: Route.ComponentProps["submission"]
+}>()
 </script>
 
 <template>

package/dist/scaffold/site-build.d.ts

@@ -1,60 +0,0 @@
-/**
- * The five build entries a site scaffold ships, emitted from one shape.
- *
- * These were 25 files - five deploy targets copied across five framework directories - and the
- * difference between any two of them is mechanical: which runtime it targets, and which compiler
- * plugin, resolve conditions and defines the framework needs. Nothing else. So the target owns its
- * own prose (what it emits, how to run it) and the framework contributes its injections, and the 25
- * files come out of one function.
- *
- * The emitted text is asserted byte-for-byte against the templates that used to be checked in, so
- * this is a refactor whose correctness is decided by a test rather than by reading.
- */
-import type { FrameworkSpec } from "./frameworks.js";
-/**
- * Where the framework's own resolve conditions sit inside a target's server list.
- *
- * The edge targets end theirs with `browser` (the worker has no Node builtins, so packages must be
- * asked for their browser build); Bun and Node do not. The framework's conditions go in the middle,
- * which is the order every checked-in template used.
- */
-export interface ServerConditionSlots {
-    readonly before: readonly string[];
-    readonly after: readonly string[];
-}
-export interface BuildTarget {
-    /** File name, e.g. `build-bun.ts`. */
-    readonly file: string;
-    /** Leading comment block, without the trailing newline. */
-    readonly header: string;
-    /**
-     * Frameworks whose header says something extra here - what their plugin does, or how to run the
-     * output once their compiler is in the picture.
-     *
-     * These are the one genuinely non-mechanical part of a build entry, and they are the reason this
-     * table exists rather than a pure `{framework, runtime}` function: the prose a framework needs to
-     * explain itself is written, not derived. Keeping them beside the target they belong to is the
-     * closest thing to having them in the file without having five copies of the file.
-     */
-    readonly headerOverrides?: Readonly<Record<string, string>>;
-    /** Runtime conditions this target's SERVER build resolves with. */
-    readonly serverConditions: ServerConditionSlots;
-    /** Extra `node:fs` named imports beyond `cpSync, mkdirSync, rmSync`. */
-    readonly extraFsImports?: readonly string[];
-    /** Lines between the imports and the first build call, `dir` already declared. */
-    readonly setup: string;
-    /** Where `buildClient` writes assets, as a template expression. */
-    readonly clientOutDir: string;
-    /** The server entry this target boots from. */
-    readonly serverEntry: string;
-    /** Scratch directory for the server build. */
-    readonly serverOutDir: string;
-    /** `target:` line for `buildServer`, or empty for the default (workerd). */
-    readonly serverTarget: string;
-    /** Everything after the `buildServer` call. */
-    readonly tail: string;
-}
-export declare const BUILD_TARGETS: readonly BuildTarget[];
-/** Emit one target's build entry for one framework. */
-export declare function renderBuildFile(target: BuildTarget, framework: FrameworkSpec): string;
-//# sourceMappingURL=site-build.d.ts.map

package/dist/scaffold/site-build.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"site-build.d.ts","sourceRoot":"","sources":["../../src/scaffold/site-build.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAgEpD;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CAClC;AAED,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB;;;;;;;;OAQG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC3D,mEAAmE;IACnE,QAAQ,CAAC,gBAAgB,EAAE,oBAAoB,CAAA;IAC/C,wEAAwE;IACxE,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC3C,kFAAkF;IAClF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,8CAA8C;IAC9C,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,SAAS,WAAW,EA2H/C,CAAA;AAeD,uDAAuD;AACvD,wBAAgB,eAAe,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,GAAG,MAAM,CAsBrF"}