kreftjs 0.0.7-beta → 0.0.9-beta

package/bin/update.js

@@ -31,7 +31,7 @@ module.exports = function update(args = []) {
     const a = args[i];
     if (a === '--latest' || a === '-L') flags.add('latest');
     else if (a === '--check' || a === '--dry-run') flags.add('check');
-    else if (a === '--core' || a === '--kreft' || a === '--som') flags.add('core'); // --som: the Som.js name
+    else if (a === '--core' || a === '--kreft') flags.add('core');
     else if (a === '--npm') flags.add('npm');
     else if (a === '--help' || a === '-h') {
       printHelp();
@@ -74,16 +74,16 @@ function updateRuntimeFiles(lay, project) {
   const targets = [];
 
   // Check frontend / local kreftjs.js
-  // an older project has kreft.js / som.js (and the .d.ts): those files keep their names (index.html loads them) but get the new code
+  // an older project has kreft.js (and the .d.ts): those files keep their names (index.html loads them) but get the new code
   const named = (dir, name, ...legacy) => (!fs.existsSync(path.join(dir, name)) ? legacy.find((l) => fs.existsSync(path.join(dir, l))) || name : name);
-  const frontKreftJs = path.join(lay.frontend, named(lay.frontend, 'kreftjs.js', 'kreft.js', 'som.js'));
-  const rootKreftJs = path.join(project, named(project, 'kreftjs.js', 'kreft.js', 'som.js'));
+  const frontKreftJs = path.join(lay.frontend, named(lay.frontend, 'kreftjs.js', 'kreft.js'));
+  const rootKreftJs = path.join(project, named(project, 'kreftjs.js', 'kreft.js'));
   if (fs.existsSync(frontKreftJs) && frontKreftJs !== sourceKreftJs) targets.push({ src: sourceKreftJs, dest: frontKreftJs, label: 'frontend/' + path.basename(frontKreftJs) });
   else if (fs.existsSync(rootKreftJs) && rootKreftJs !== sourceKreftJs) targets.push({ src: sourceKreftJs, dest: rootKreftJs, label: path.basename(rootKreftJs) });
 
   // Check frontend / local kreftjs.d.ts
-  const frontKreftDts = path.join(lay.frontend, named(lay.frontend, 'kreftjs.d.ts', 'kreft.d.ts', 'som.d.ts'));
-  const rootKreftDts = path.join(project, named(project, 'kreftjs.d.ts', 'kreft.d.ts', 'som.d.ts'));
+  const frontKreftDts = path.join(lay.frontend, named(lay.frontend, 'kreftjs.d.ts', 'kreft.d.ts'));
+  const rootKreftDts = path.join(project, named(project, 'kreftjs.d.ts', 'kreft.d.ts'));
   if (fs.existsSync(frontKreftDts) && frontKreftDts !== sourceKreftDts) targets.push({ src: sourceKreftDts, dest: frontKreftDts, label: 'frontend/' + path.basename(frontKreftDts) });
   else if (fs.existsSync(rootKreftDts) && rootKreftDts !== sourceKreftDts) targets.push({ src: sourceKreftDts, dest: rootKreftDts, label: path.basename(rootKreftDts) });
 
@@ -134,8 +134,8 @@ function updateRuntimeFiles(lay, project) {
 }
 
 function upgradeAppLayout(lay) {
-  let layoutFile = path.join(lay.frontend, 'layouts', 'app.kreftjs');
-  if (!fs.existsSync(layoutFile)) layoutFile = ['app.kreft', 'app.som'].map((n) => path.join(lay.frontend, 'layouts', n)).find((p) => fs.existsSync(p)) || layoutFile; // older projects
+  let layoutFile = path.join(lay.frontend, 'layouts', 'app.kreft');
+  if (!fs.existsSync(layoutFile)) layoutFile = ['app.kreftjs'].map((n) => path.join(lay.frontend, 'layouts', n)).find((p) => fs.existsSync(p)) || layoutFile; // older projects
   if (!fs.existsSync(layoutFile)) return;
   let text = fs.readFileSync(layoutFile, 'utf8');
   let changed = false;
@@ -162,9 +162,9 @@ function upgradeAppLayout(lay) {
   if (changed) {
     try {
       fs.writeFileSync(layoutFile, text);
-      console.log(`    ${green('DONE')}  frontend/layouts/app.kreftjs ${dim('(upgraded sidebar navigation to route names)')}`);
+      console.log(`    ${green('DONE')}  frontend/layouts/app.kreft ${dim('(upgraded sidebar navigation to route names)')}`);
     } catch (err) {
-      console.error(`    ${red('FAIL')}  frontend/layouts/app.kreftjs: ${err.message}`);
+      console.error(`    ${red('FAIL')}  frontend/layouts/app.kreft: ${err.message}`);
     }
   }
 }

package/docs/{Docs.kreftjs → Docs.kreft}

@@ -1,4 +1,4 @@
-<!-- Kreft documentation viewer (docs/Docs.kreftjs)
+<!-- Kreft documentation viewer (docs/Docs.kreft)
      Reads docs/README.md, shows it as a manual: parts and chapters on the left, the page in the middle,
      "On this page" on the right. It sits under the site header, so it uses the site's colours (ui.css),
      including the light/dark switch. Keys: ⌘K or / search · [ and ] previous / next chapter · Esc closes. -->

package/docs/README.md

@@ -2,10 +2,10 @@
 
 ## Introduction
 
-Kreft is a small reactive framework with its own component language. You write a component in a `.kreftjs` file: declare your state, derived values and actions in plain words, then describe the page in a `<view>`. The framework also ships a full Node.js backend (routes, controllers, models, migrations, queues, mail) so one project can cover the whole stack.
+Kreft is a small reactive framework with its own component language. You write a component in a `.kreft` file: declare your state, derived values and actions in plain words, then describe the page in a `<view>`. The framework also ships a full Node.js backend (routes, controllers, models, migrations, queues, mail) so one project can cover the whole stack.
 
 ```html
-<!-- Counter.kreftjs -->
+<!-- Counter.kreft -->
 state count = 0
 derive double = count * 2
 action add() { count++ }
@@ -19,7 +19,7 @@ action add() { count++ }
 
 | Part | What it gives you |
 |---|---|
-| **The `.kreftjs` language** | `state`, `derive`, `action`, `watch`, props, events, slots, stores, a router with layouts and nested routes, forms with validation, animations. |
+| **The `.kreft` language** | `state`, `derive`, `action`, `watch`, props, events, slots, stores, a router with layouts and nested routes, forms with validation, animations. |
 | **The backend** | `Route`, controllers, an Active Record `Model`, migrations, seeders, factories, jobs, mail, cache, file storage, policies, scheduling. |
 | **Authentication** | Sign-in pages, password reset, email verification, two-factor codes, device sessions and API tokens, ready in every new project (leave them out with `--no-auth`). |
 | **Tooling** | `kreft dev` with hot reload that keeps state, DevTools, an error monitor, `kreft build`, TypeScript, Vite and Electron support. |
@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.7-beta
+kreft --version     # for example 0.0.9-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -95,7 +95,7 @@ kreft list          # every command your version has
 kreft vscode
 ```
 
-installs colors and snippets for `.kreftjs` files in VS Code (also Cursor and VSCodium). Restart the editor afterwards.
+installs colors and snippets for `.kreft` files in VS Code (also Cursor and VSCodium). Restart the editor afterwards.
 
 ### Update
 
@@ -131,21 +131,6 @@ Run `npm link` inside the Kreft folder. The `kreft` command then runs that folde
 
 Next: [Your first app](#your-first-app).
 
-### Migrating from Som.js
-
-Kreft is Som.js under a new name (the package and command are `kreftjs`), and an existing project keeps working without edits. `kreft`, an earlier spelling of the new name, is accepted in the same places:
-
-- **Files:** `.som` (and `.kreft`) files still compile, next to `.kreftjs` ones. A name that is missing with one extension is tried with the others. Everything the tools write is `.kreftjs`.
-- **Templates:** `s-if`, `s-each` and every other `s-` directive are read as `k-if`, `k-each` …, and `<som-view>`, `<som-link>` … as `<kreft-view>`, `<kreft-link>` …
-- **JavaScript:** `Som` and `Kreft` are other names for `Kreftjs` (same object; `Som` is deprecated), and `Som.compileSom` is `Kreftjs.compile`.
-- **Command:** use `kreft` (or `kreftjs`). Kreft does not install a `som` command, so it can be installed next to an old Som.js without an `EEXIST` error; remove the old one with `npm rm -g somjs`.
-- **Server code:** `require('somjs/server')` (also `som/server`, `@somjs/server`, `kreft/server`) still works; new code uses `require('kreftjs/server')`.
-- **Settings:** `kreft.config.json`, `som.config.json` and `SOM_` environment variables (`SOM_SSR`, `SOM_ALLOWED_HOSTS` …) are read when the `kreftjs.config.json` file or the `KREFT_` variable is missing.
-- **Cookies:** new projects use `kreft_session`, `kreft_2fa` and `kreft_bypass`. An existing project keeps its `som_` names until you change `app/Auth/Session.js`, and the framework's CSRF check accepts both.
-- **Kept on purpose:** the `som_migrations` table, the `som:` prefix of saved data in `localStorage`, and the `som:` Redis keys of the queue. Renaming them needs a migration, planned for 3.1.
-
-To move a project over, rename `*.som` (or `*.kreft`) to `*.kreftjs` (and the paths that mention them), run `kreft update` and replace `s-` with `k-`.
-
 ## Your first app
 
 Create a project, move into it and start the development server:
@@ -186,19 +171,19 @@ The new project already has a working login page. `npm run dev` creates the tabl
 
 ### The smallest possible app
 
-You can use Kreft without any project at all. An app is an HTML page plus `.kreftjs` files:
+You can use Kreft without any project at all. An app is an HTML page plus `.kreft` files:
 
 ```html
 <!-- index.html -->
 <div id="app"></div>
 <script src="kreftjs.js"></script>
 <script>
-  Kreftjs.app('App.kreftjs').mount('#app')
+  Kreftjs.app('App.kreft').mount('#app')
 </script>
 ```
 
 ```html
-<!-- App.kreftjs -->
+<!-- App.kreft -->
 state name = 'World'
 
 <view>
@@ -208,7 +193,7 @@ state name = 'World'
 ```
 
 > [!WARNING]
-> `.kreftjs` files need a web server. Browsers refuse to load files from `file://`, so always open your app through `npm run dev` or any other server.
+> `.kreft` files need a web server. Browsers refuse to load files from `file://`, so always open your app through `npm run dev` or any other server.
 
 ## Project structure
 
@@ -218,10 +203,10 @@ state name = 'World'
 my-app/
 ├── frontend/
 │   ├── index.html          entry point
-│   ├── App.kreftjs             root component and router container
-│   ├── routes/web.kreftjs      page routes
-│   ├── layouts/            app.kreftjs (signed in), guest.kreftjs (sign-in pages)
-│   ├── pages/              one .kreftjs file per screen, auth/ for sign-in pages
+│   ├── App.kreft             root component and router container
+│   ├── routes/web.kreft      page routes
+│   ├── layouts/            app.kreft (signed in), guest.kreft (sign-in pages)
+│   ├── pages/              one .kreft file per screen, auth/ for sign-in pages
 │   ├── components/         reusable pieces
 │   ├── ui.css              the design system
 │   └── tests/              component tests
@@ -246,16 +231,16 @@ my-app/
 
 ### Adding a CSS library
 
-Any CSS library works. Add its `<link>` to `index.html`, or install it and import the file from a `.kreftjs` file; it becomes a `<link>` added once, and `kreft build` copies it (with its fonts and images) into `dist/vendor/`.
+Any CSS library works. Add its `<link>` to `index.html`, or install it and import the file from a `.kreft` file; it becomes a `<link>` added once, and `kreft build` copies it (with its fonts and images) into `dist/vendor/`.
 
 ```html
 import 'bootstrap/dist/css/bootstrap.min.css'   // npm i bootstrap
-import './theme.css'                            // your own file, next to this .kreftjs file
+import './theme.css'                            // your own file, next to this .kreft file
 ```
 
 ### npm packages in the browser
 
-Install a package with `kreft add`, then import it in any `.kreftjs` file:
+Install a package with `kreft add`, then import it in any `.kreft` file:
 
 ```bash
 kreft add dayjs nanoid lodash
@@ -277,9 +262,9 @@ state id = nanoid()
 
 # The Kreft language
 
-## Components and the .kreftjs file
+## Components and the .kreft file
 
-A `.kreftjs` file has three parts:
+A `.kreft` file has three parts:
 
 1. **The script**: everything outside `<view>` and `<style>`. Each line starts with a keyword.
 2. **`<view>`**: the HTML of the component.
@@ -299,7 +284,7 @@ A `.kreftjs` file has three parts:
 | `event` | `event save, remove` | Events this component sends to its parent with `send('save', data)`. |
 | `use` | `use cart` | Use a shared store. `use mouse = trackMouse()` uses shared logic from a `.js` file. |
 | `share` / `receive` | `share theme = 'dark'` | Give a value to everything inside this component / take a value a parent shared. |
-| `import` | `import Card from './Card.kreftjs'` | Use another component or a JavaScript module. |
+| `import` | `import Card from './Card.kreft'` | Use another component or a JavaScript module. |
 | `saved` | `saved todos = []` | Like `state`, but kept in the browser (localStorage). |
 | `load` | `load users = api.get('/api/users')` | Loads data and gives `users.data`, `users.loading`, `users.error`, `users.reload()`. |
 
@@ -308,7 +293,7 @@ Inside the script you use names **directly**: write `count++`, not `this.count++
 ### A complete example
 
 ```html
-<!-- TodoPage.kreftjs -->
+<!-- TodoPage.kreft -->
 state todos = []
 state text = ''
 
@@ -344,7 +329,7 @@ when todos.length && remaining === 0 {
 - An `action` that uses `await` becomes async automatically.
 - A line that does not start with a keyword is normal JavaScript (`let timer`, `const max = 10`). Your actions can use it, but the view cannot. Use `state`, `derive` or `action` for anything the view needs.
 - Every Kreft function is available in the script: `bus`, `store`, `signal`, `watch`, `tick`, `send`, `props`, `$route`, `$router`.
-- Errors name the file and line, for example `"state" needs a name, like: state count = 0 (Bad.kreftjs, line 3)`.
+- Errors name the file and line, for example `"state" needs a name, like: state count = 0 (Bad.kreft, line 3)`.
 
 ### Lifecycle
 
@@ -497,13 +482,13 @@ app.directive('focus', {
 Register it once by its path, or import it where you need it:
 
 ```js
-Kreftjs.app('App.kreftjs')
-  .component('UserCard', 'components/UserCard.kreftjs')
+Kreftjs.app('App.kreft')
+  .component('UserCard', 'components/UserCard.kreft')
   .mount('#app')
 ```
 
 ```html
-import UserCard from './UserCard.kreftjs'
+import UserCard from './UserCard.kreft'
 
 <view>
   <user-card name="Alice Smith" age={30}></user-card>
@@ -515,7 +500,7 @@ In the view, write component names in **kebab-case** (`<user-card>`).
 ### Props: parent to child
 
 ```html
-<!-- UserCard.kreftjs -->
+<!-- UserCard.kreft -->
 prop name
 prop age = 0
 prop admin = false
@@ -534,7 +519,7 @@ The default's type decides how plain text attributes are read: `age="30"` become
 ### Events: child to parent
 
 ```html
-<!-- TodoItem.kreftjs -->
+<!-- TodoItem.kreft -->
 prop todo
 event remove
 
@@ -555,7 +540,7 @@ action removeTodo(id) { todos = todos.filter((t) => t.id !== id) }
 ### `k-model` on a component
 
 ```html
-<!-- Toggle.kreftjs -->
+<!-- Toggle.kreft -->
 prop modelValue = false
 event update:modelValue
 
@@ -573,7 +558,7 @@ Named models: `k-model:title="pageTitle"` uses `prop title` and the event `updat
 ### Slots
 
 ```html
-<!-- Card.kreftjs -->
+<!-- Card.kreft -->
 prop items = []
 
 <view>
@@ -648,7 +633,7 @@ Kreftjs.store('cart', {
 })
 ```
 
-Use it in any `.kreftjs` file. Every component sees the same data:
+Use it in any `.kreft` file. Every component sees the same data:
 
 ```html
 use cart
@@ -686,7 +671,7 @@ use mouse = trackMouse()
 ### Share and receive
 
 ```html
-<!-- Layout.kreftjs -->
+<!-- Layout.kreft -->
 state settings = { theme: 'dark', lang: 'so' }
 share settings = settings
 
@@ -722,7 +707,7 @@ saved token = '' as 'auth.token'    <!-- choose the storage key yourself -->
 ```
 
 - Every change is saved by itself, including deep ones: `todos.push(…)`, `todo.done = true`.
-- The default key is `<Component>.<name>` (stored as `som:Home.todos`). Use `as '…'` to share one value between components.
+- The default key is `<Component>.<name>`, for example `Home.todos`. Use `as '…'` to share one value between components.
 - A change made in another tab of the same site shows up in this tab too.
 
 A store keeps its plain values when you add `saved`:
@@ -751,20 +736,20 @@ Kreftjs.storage.clear()                          // removes only what Kreft save
 ```js
 const router = Kreftjs.router({
   routes: [
-    { path: '/', component: 'pages/Home.kreftjs', meta: { title: 'Home' } },
-    { path: '/users/:id', name: 'user', component: 'pages/User.kreftjs', props: true },
-    { path: '/posts/:slug?', component: 'pages/Posts.kreftjs' },
+    { path: '/', component: 'pages/Home.kreft', meta: { title: 'Home' } },
+    { path: '/users/:id', name: 'user', component: 'pages/User.kreft', props: true },
+    { path: '/posts/:slug?', component: 'pages/Posts.kreft' },
     { path: '/old', redirect: '/' },
-    { path: '/admin', component: 'pages/Admin.kreftjs', guard: () => isAdmin() || '/login' },
-    { path: '*', component: 'pages/NotFound.kreftjs' },
+    { path: '/admin', component: 'pages/Admin.kreft', guard: () => isAdmin() || '/login' },
+    { path: '*', component: 'pages/NotFound.kreft' },
   ],
 })
 
-Kreftjs.app('App.kreftjs').use(router).mount('#app')
+Kreftjs.app('App.kreft').use(router).mount('#app')
 ```
 
 ```html
-<!-- App.kreftjs -->
+<!-- App.kreft -->
 <view>
   <nav>
     <kreft-link to="/">Home</kreft-link>
@@ -777,7 +762,7 @@ Kreftjs.app('App.kreftjs').use(router).mount('#app')
 With `props: true`, the `:id` parameter arrives as a prop:
 
 ```html
-<!-- pages/User.kreftjs -->
+<!-- pages/User.kreft -->
 prop id
 derive user = users.find(id)
 action back() { $router.back() }
@@ -797,11 +782,11 @@ Each page file is loaded the first time someone opens it.
 
 ### Route files
 
-New projects keep their pages in `frontend/routes/web.kreftjs`, and `index.html` only points to it:
+New projects keep their pages in `frontend/routes/web.kreft`, and `index.html` only points to it:
 
 ```js
 Kreftjs.router({
-  routes: ['routes/web.kreftjs', 'routes/shop.kreftjs'],
+  routes: ['routes/web.kreft', 'routes/shop.kreft'],
   layout: 'app',
   errors: 'errors',
   middleware: {
@@ -812,27 +797,27 @@ Kreftjs.router({
 ```
 
 ```js
-// routes/web.kreftjs
-Route.view('/', 'pages/Home.kreftjs').name('home').title('Home')
-Route.view('/posts/:id', 'pages/Post.kreftjs')
+// routes/web.kreft
+Route.view('/', 'pages/Home.kreft').name('home').title('Home')
+Route.view('/posts/:id', 'pages/Post.kreft')
 
 Route.middleware('auth').group(() => {
-  Route.view('/dashboard', 'pages/Dashboard.kreftjs').middleware('verified')
+  Route.view('/dashboard', 'pages/Dashboard.kreft').middleware('verified')
 })
 
 Route.layout('guest').middleware('guest').group(() => {
-  Route.view('/login', 'pages/auth/Login.kreftjs').title('Log in')
+  Route.view('/login', 'pages/auth/Login.kreft').title('Log in')
 })
 
 Route.prefix('/account').name('account.').middleware('auth').group(() => {
-  Route.view('/settings', 'pages/account/Settings.kreftjs').children(() => {
-    Route.view('', 'pages/account/General.kreftjs')       // /account/settings
-    Route.view('mail', 'pages/account/Mail.kreftjs')      // /account/settings/mail
+  Route.view('/settings', 'pages/account/Settings.kreft').children(() => {
+    Route.view('', 'pages/account/General.kreft')       // /account/settings
+    Route.view('mail', 'pages/account/Mail.kreft')      // /account/settings/mail
   })
 })
 
 Route.redirect('/home', '/')
-Route.fallback('pages/NotFound.kreftjs')
+Route.fallback('pages/NotFound.kreft')
 ```
 
 | On a route | What it does |
@@ -852,7 +837,7 @@ Route.fallback('pages/NotFound.kreftjs')
 A layout is the frame around your pages: bar, menu, footer. Put it in `layouts/` and use `<slot>` where the page goes.
 
 ```html
-<!-- layouts/app.kreftjs -->
+<!-- layouts/app.kreft -->
 state menuOpen = false
 
 <view>
@@ -887,12 +872,12 @@ A page can also fill other places in its layout:
 Each HTTP error can have its own page in `errors/`. Turn them on with `errors: 'errors'` in the router. New projects already have the folder (`kreft make:errors` adds it to an older one):
 
 ```text
-errors/401.kreftjs 402.kreftjs 403.kreftjs 404.kreftjs 419.kreftjs 429.kreftjs 500.kreftjs 503.kreftjs
-errors/error.kreftjs      any other status
-errors/minimal.kreftjs    the shared frame
+errors/401.kreft 402.kreft 403.kreft 404.kreft 419.kreft 429.kreft 500.kreft 503.kreft
+errors/error.kreft      any other status
+errors/minimal.kreft    the shared frame
 ```
 
-An unknown address shows `errors/404.kreftjs`; a page that cannot load shows `errors/500.kreftjs`. From any `.kreftjs` file, `abort(404)` (also `$router.abort()` and `Kreftjs.abort()`) shows the matching page:
+An unknown address shows `errors/404.kreft`; a page that cannot load shows `errors/500.kreft`. From any `.kreft` file, `abort(404)` (also `$router.abort()` and `Kreftjs.abort()`) shows the matching page:
 
 ```html
 prop id
@@ -911,7 +896,7 @@ If you cannot change the server, use `mode: 'hash'`; URLs then look like `/#/use
 
 ## Fetching data
 
-The global `api` client is available in every `.kreftjs` file, and `Kreftjs.api` in plain JavaScript:
+The global `api` client is available in every `.kreft` file, and `Kreftjs.api` in plain JavaScript:
 
 ```js
 const users = await api.get('/api/users', { query: { page: 2 } })
@@ -926,7 +911,7 @@ await api.delete('/api/users/1')
 `load` declares a reactive resource. It handles the loading state, the error, and fetches again when the values it reads change:
 
 ```html
-<!-- pages/Posts.kreftjs -->
+<!-- pages/Posts.kreft -->
 state query = ''
 state page = 1
 
@@ -1112,7 +1097,7 @@ On the server, request language comes from `?lang=`, the `lang` cookie or `Accep
 
 ## Using Kreft from JavaScript
 
-You can write components as plain objects. The rules match the `.kreftjs` language: values are state, getters are derived values, functions are actions.
+You can write components as plain objects. The rules match the `.kreft` language: values are state, getters are derived values, functions are actions.
 
 ```js
 Kreftjs.app({
@@ -1123,7 +1108,7 @@ Kreftjs.app({
 }).mount('#app')
 ```
 
-| JavaScript | Same as in `.kreftjs` |
+| JavaScript | Same as in `.kreft` |
 |---|---|
 | `Kreftjs.state({ … })` | `state` + `derive` + `action` together, for code outside components. |
 | `Kreftjs.signal(0)` | One value, read and written with `.value`. |
@@ -1141,7 +1126,7 @@ Kreftjs.render(`<ul><li k-each="u in users">{u}</li></ul>`, { users: ['Alex', 'A
 
 ### Server templates
 
-Blade and similar engines use `{{ }}`; Kreft uses `{ }`, so they do not clash. Put `kreftjs.js` and your `.kreftjs` files in your public folder and mount as usual.
+Blade and similar engines use `{{ }}`; Kreft uses `{ }`, so they do not clash. Put `kreftjs.js` and your `.kreft` files in your public folder and mount as usual.
 
 # Backend
 
@@ -1397,13 +1382,13 @@ New projects come with every sign-in screen and the backend behind it:
 
 | Page | Address | What it does |
 |---|---|---|
-| `pages/auth/Login.kreftjs` | `/login` | Log in with email and password. |
-| `pages/auth/Register.kreftjs` | `/register` | Make an account and get an email to verify the address. |
-| `pages/auth/ForgotPassword.kreftjs` | `/forgot-password` | Email a link to choose a new password. |
-| `pages/auth/ResetPassword.kreftjs` | `/reset-password/:token` | The link from that email. |
-| `pages/auth/VerifyEmail.kreftjs` | `/verify-email` | "Check your email", and the link from it opens `/verify-email/:id/:hash`. |
-| `pages/auth/ConfirmPassword.kreftjs` | `/confirm-password` | Type the password again before something serious. |
-| `pages/Dashboard.kreftjs`, `pages/Profile.kreftjs` | `/dashboard`, `/profile` | The first page after logging in; account settings. |
+| `pages/auth/Login.kreft` | `/login` | Log in with email and password. |
+| `pages/auth/Register.kreft` | `/register` | Make an account and get an email to verify the address. |
+| `pages/auth/ForgotPassword.kreft` | `/forgot-password` | Email a link to choose a new password. |
+| `pages/auth/ResetPassword.kreft` | `/reset-password/:token` | The link from that email. |
+| `pages/auth/VerifyEmail.kreft` | `/verify-email` | "Check your email", and the link from it opens `/verify-email/:id/:hash`. |
+| `pages/auth/ConfirmPassword.kreft` | `/confirm-password` | Type the password again before something serious. |
+| `pages/Dashboard.kreft`, `pages/Profile.kreft` | `/dashboard`, `/profile` | The first page after logging in; account settings. |
 
 ### How a login works
 
@@ -1649,7 +1634,7 @@ Run `kreft list` to see every command your installed version has, and `kreft hel
 | `kreft add <package>` | A safer `npm install`. See [Packages](#packages). |
 | `kreft about`, `kreft env`, `kreft log`, `kreft tinker` | Versions and folders, environment, logs, a console with your models (`await User.count()`). |
 | `kreft down --secret=x` / `kreft up` | Maintenance mode: visitors get `503`, and `/x` lets you in. |
-| `kreft vscode` | Installs colors, snippets and folding for `.kreftjs` files in VS Code, Cursor and VSCodium. |
+| `kreft vscode` | Installs colors, snippets and folding for `.kreft` files in VS Code, Cursor and VSCodium. |
 
 ### Generators and database
 
@@ -1675,7 +1660,7 @@ Run `kreft list` to see every command your installed version has, and `kreft hel
 
 Everything here comes with Kreft. Nothing else to install.
 
-**Hot reload.** While `kreft dev` runs, save a `.kreftjs` file and only that component is swapped; its state stays. A `.css` file is reloaded without a page refresh, and an error shows an overlay with the file and line.
+**Hot reload.** While `kreft dev` runs, save a `.kreft` file and only that component is swapped; its state stays. A `.css` file is reloaded without a page refresh, and an error shows an overlay with the file and line.
 
 **Kreft DevTools.** The **S** button in the corner (or <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>) opens a panel:
 
@@ -1702,10 +1687,10 @@ In development, an uncaught error on the server shows an interactive page instea
 
 The page is only shown when `APP_ENV` is not `production` and `APP_DEBUG` is true. **In production the same error answers a plain `Server error.`** with no stack or file names.
 
-Frontend errors use the same design through `errors/ErrorMonitor.kreftjs`; pass it a caught exception:
+Frontend errors use the same design through `errors/ErrorMonitor.kreft`; pass it a caught exception:
 
 ```html
-import ErrorMonitor from 'errors/ErrorMonitor.kreftjs'
+import ErrorMonitor from 'errors/ErrorMonitor.kreft'
 state caught = null
 
 <view>
@@ -1726,16 +1711,16 @@ npm run preview    # check the result: kreft dev dist
 |---|---|
 | `index.html` | Your page, now loading the files below. |
 | `kreftjs.js` | The framework. |
-| `app.js` | Every `.kreftjs` file, already compiled. |
+| `app.js` | Every `.kreft` file, already compiled. |
 | `app.css` | All `<style>` blocks; scoped ones already scoped. |
 | `main.js` | The inline `<script>` code from `index.html`. |
-| `deps/`, `vendor/` | The npm packages and CSS your `.kreftjs` files import, minified. |
+| `deps/`, `vendor/` | The npm packages and CSS your `.kreft` files import, minified. |
 
 What you get:
 
 - **A faster first load.** The browser downloads one `app.js` and compiles nothing.
 - **A strict Content-Security-Policy works.** Every expression becomes a real function, so the built app never uses `eval` or `new Function`.
-- **Errors before you deploy.** A mistake in any `.kreftjs` file stops the build and names the file and line.
+- **Errors before you deploy.** A mistake in any `.kreft` file stops the build and names the file and line.
 
 Options: `kreft build ./site --out public` builds another folder, and `--base /` changes `<base href>`. `--no-htaccess` skips the `.htaccess` file described below.
 
@@ -1751,10 +1736,12 @@ RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_URI} !^/api/
+RewriteCond %{REQUEST_URI} !\.[A-Za-z0-9]+$
 RewriteRule . /index.html [L]
 ```
 
-Apache only knows the files on disk, so without these rules `/docs` or any other clean address gives a 404 when someone opens or reloads it. With them, every address that is not a real file or folder opens `index.html` and the router takes over. Upload the file too (it starts with a dot, so some file managers hide it; turn on "show hidden files"). If the site lives in a folder, build with `--base /folder/` and the rules follow it. An `.htaccess` you keep in `public/` is used as it is. A relative base (`--base ./`, used by the desktop build) gets no file.
+Apache only knows the files on disk, so without these rules `/docs` or any other clean address gives a 404 when someone opens or reloads it. With them, every page address (no file extension, not under `/api/`) that is not a real file or folder opens `index.html` and the router takes over. A missing file such as `app.js`, or an `/api/` address, stays a plain 404, so code that asks for data never receives the page's HTML. Upload the file too (it starts with a dot, so some file managers hide it; turn on "show hidden files"). If the site lives in a folder, build with `--base /folder/` and the rules follow it. An `.htaccess` you keep in `public/` is used as it is. A relative base (`--base ./`, used by the desktop build) gets no file.
 
 > [!NOTE]
 > This hosts the front end only. Login, the database and everything under `/api` need the Node.js server, which Apache does not run.
@@ -1828,7 +1815,7 @@ module.exports = {
 
 ### Whole pages for crawlers
 
-A crawler or link preview (Googlebot, Bingbot, WhatsApp, Facebook, X, Slack, Telegram …) that doesn't run JavaScript would see an empty `<div id="app">`. For these visitors `kreft dev` and `kreft serve` open the page in the same simulated browser as `--prerender`, wait until its data has loaded, and answer with the page already drawn. If the app shows its `errors/404.kreftjs` page, the answer has status 404. A page that `kreft build --prerender` already drew is sent as it is. Everyone else gets the normal page.
+A crawler or link preview (Googlebot, Bingbot, WhatsApp, Facebook, X, Slack, Telegram …) that doesn't run JavaScript would see an empty `<div id="app">`. For these visitors `kreft dev` and `kreft serve` open the page in the same simulated browser as `--prerender`, wait until its data has loaded, and answer with the page already drawn. If the app shows its `errors/404.kreft` page, the answer has status 404. A page that `kreft build --prerender` already drew is sent as it is. Everyone else gets the normal page.
 
 ```bash
 npm i -D jsdom        # once per project
@@ -1847,7 +1834,7 @@ kreft sitemap --url https://example.com                  # public/sitemap.xml an
 kreft sitemap --url https://example.com --urls urls.js   # and the addresses in that file
 ```
 
-It lists the routes of `Kreftjs.router({ routes })` in `index.html` and `routes/web.kreftjs`, skipping redirects and patterns like `/posts/:id`, plus the `urls` of `backend/routes/seo.js` and `--urls`. A `lastmod` is written only when you give one (a database date such as `2026-01-02 10:00:00` becomes `2026-01-02`). A route can list `alternates: { en: '/about', ar: '/ar/about' }` for `xhtml:link` entries.
+It lists the routes of `Kreftjs.router({ routes })` in `index.html` and `routes/web.kreft`, skipping redirects and patterns like `/posts/:id`, plus the `urls` of `backend/routes/seo.js` and `--urls`. A `lastmod` is written only when you give one (a database date such as `2026-01-02 10:00:00` becomes `2026-01-02`). A route can list `alternates: { en: '/about', ar: '/ar/about' }` for `xhtml:link` entries.
 
 ### Deploying the backend
 
@@ -1859,13 +1846,13 @@ Before you do, work through the [Production checklist](#production-checklist).
 
 ## TypeScript
 
-TypeScript works in the browser (`.kreftjs` files and `.ts` modules) and on the server (`routes/api.ts`, `app/**/*.ts`, migrations, seeders).
+TypeScript works in the browser (`.kreft` files and `.ts` modules) and on the server (`routes/api.ts`, `app/**/*.ts`, migrations, seeders).
 
 ```bash
 kreft new my-app --ts
 ```
 
-Inside a `.kreftjs` file you can write `interface`, `type`, `enum`, `import type`, and typed `prop`, `state`, `derive` and `saved`. `kreftjs make:*` writes `.ts` files when the project has a `tsconfig.json` (or with `--ts`; `--js` forces JavaScript).
+Inside a `.kreft` file you can write `interface`, `type`, `enum`, `import type`, and typed `prop`, `state`, `derive` and `saved`. `kreftjs make:*` writes `.ts` files when the project has a `tsconfig.json` (or with `--ts`; `--js` forces JavaScript).
 
 Execution needs no setup: Kreft uses `esbuild` if installed, otherwise Node's built-in type stripping (Node 22.6+), otherwise its own zero-dependency stripper.
 
@@ -1874,7 +1861,7 @@ Execution needs no setup: Kreft uses `esbuild` if installed, otherwise Node's bu
 
 ## Vite and Electron
 
-**Vite.** If your team prefers the Vite ecosystem, Kreft has a plugin that compiles `.kreftjs` files on the fly:
+**Vite.** If your team prefers the Vite ecosystem, Kreft has a plugin that compiles `.kreft` files on the fly:
 
 ```bash
 kreft vite:init       # writes vite.config.js with the Kreft plugin
@@ -1887,7 +1874,7 @@ kreft vite:preview
 
 ## Desktop apps with Electron
 
-Kreft can package your app as a desktop application for Windows, macOS and Linux. The pages are the same `.kreftjs` files you already have; Electron only supplies the window.
+Kreft can package your app as a desktop application for Windows, macOS and Linux. The pages are the same `.kreft` files you already have; Electron only supplies the window.
 
 ### Quick start
 
@@ -2221,7 +2208,7 @@ Go through this before your first real user:
 - The memory of which two-factor codes were already used, and login tickets, is kept per process. Behind several servers, a code can be replayed once on each. The per-account lockout (kept in the cache) still limits guessing.
 - The sanitizer removes unsafe markup; it is not a substitute for choosing carefully what HTML you show.
 - `--prerender` makes static HTML at build time. On a running server whole pages are drawn only for crawlers and link previews; every other visitor gets the page drawn by the browser, and an address the app does not have answers 200 (the app shows its own 404 page) unless `seo.js` says otherwise.
-- `.kreftjs` files must be served over `http://` or `https://`, not opened from `file://`.
+- `.kreft` files must be served over `http://` or `https://`, not opened from `file://`.
 
 # Reference
 
@@ -2284,7 +2271,7 @@ Set these in `.env` (never commit it). Variables that start with `PUBLIC_` are c
 
 | Group | Names |
 |---|---|
-| `.kreftjs` keywords | `state` `derive` `action` `when` `watch` `on` `prop` `event` `use` `share` `receive` `import` `saved` `load` `layout` |
+| `.kreft` keywords | `state` `derive` `action` `when` `watch` `on` `prop` `event` `use` `share` `receive` `import` `saved` `load` `layout` |
 | In the script | `send` `props` `bus` `store` `$route` `$router` `tick` and every `Kreft` function |
 | In the view | `{expr}` `attr={expr}` `@event` `k-if` `k-elif` `k-else` `k-each` `k-key` `k-model` `k-show` `k-text` `k-html` `k-ref` `k-skip` `k-once` `k-memo` `k-animate` `{for}` |
 | App | `Kreftjs.app(rootOrPath)` then `.component()` `.directive()` `.share()` `.use()` `.mount()` `.unmount()` |
@@ -2305,7 +2292,7 @@ Kreft is one framework for the browser and the server. The others below each cov
 | | **Kreft** | **Next.js** | **Nuxt** | **Astro** | **AdonisJS** | **NestJS** |
 |---|---|---|---|---|---|---|
 | **What it is** | Frontend and backend in one | React framework | Vue framework | Content sites with islands of interactivity | Backend (MVC) | Backend (modules, dependency injection) |
-| **Components** | `.kreftjs` files, no Virtual DOM | React | Vue | Astro files; React, Vue, Svelte … inside | none (Edge templates, or Inertia) | none |
+| **Components** | `.kreft` files, no Virtual DOM | React | Vue | Astro files; React, Vue, Svelte … inside | none (Edge templates, or Inertia) | none |
 | **Pages drawn on the server** | At build time (`--prerender`), and for crawlers and link previews on request | Yes, for every visitor | Yes, for every visitor | Yes, mostly at build time | Only with Inertia | no |
 | **Database layer** | Active Record `Model`, migrations, seeders, factories | none (use Prisma, Drizzle …) | none | none | Lucid (Active Record) | none (TypeORM, Prisma, MikroORM …) |
 | **Sign-in, 2FA, API tokens** | Built in, in every new project | none (Auth.js …) | none (a module) | none | Built in | none (Passport, your own) |
@@ -2324,13 +2311,13 @@ Kreft is one framework for the browser and the server. The others below each cov
 - **AdonisJS:** you want the same Laravel-like backend with a larger community and years of production use, and you will bring your own frontend.
 - **NestJS:** you build a large API or microservices with many teams, and you want strict structure and dependency injection.
 
-**Things to weigh before choosing Kreft:** it is young and has one small community, few third-party packages are made for `.kreftjs` files, and nobody has run it at large scale yet. See [Known limits](#known-limits).
+**Things to weigh before choosing Kreft:** it is young and has one small community, few third-party packages are made for `.kreft` files, and nobody has run it at large scale yet. See [Known limits](#known-limits).
 
 ## Coming from Vue
 
 | Vue | Kreft |
 |---|---|
-| `.vue` single-file component | `.kreftjs` file: script, `<view>`, `<style scoped>` |
+| `.vue` single-file component | `.kreft` file: script, `<view>`, `<style scoped>` |
 | `ref()`, `reactive()`, `computed()` | `state`, `derive` (JS: `Kreftjs.signal`, `Kreftjs.state`, `Kreftjs.derived`) |
 | `watch`, `watchEffect` | `watch x { }`, `when cond { }` (JS: `Kreftjs.watch`, `Kreftjs.effect`) |
 | `{{ x }}`, `:attr`, `@click` | `{x}`, `attr={x}`, `@click={fn}` |
@@ -2353,7 +2340,7 @@ Kreft is one framework for the browser and the server. The others below each cov
 
 | Term | Meaning |
 |---|---|
-| **Component** | A `.kreftjs` file: script, view and style together. |
+| **Component** | A `.kreft` file: script, view and style together. |
 | **State** | A value that can change; the view follows it. |
 | **Derived value** | A value calculated from other values; stays up to date by itself. |
 | **Store** | State shared by many components. |