kreftjs 0.0.7-beta → 0.0.10-beta

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.10-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
 
@@ -1060,6 +1045,16 @@ Without a form, `validate(values, rules)` gives `{}` or `{ field: ['…'] }`. Cu
 
 The same rule names work on the server in `req.validate()` (see [Controllers and requests](#controllers-and-requests)), so one set of rules can describe both sides.
 
+### Passwords
+
+`not_common_password` refuses a password that is among the most used ones (`password`, `12345678`, `qwertyuiop` …), one character repeated (`aaaaaaaa`), a plain run (`12345678`, `abcdefgh`), or the same as the email address. A new app uses it next to `min:8` when people register, reset or change a password, in the pages and in the controllers:
+
+```js
+password: 'required|min:8|confirmed|not_common_password'
+```
+
+It is a short list that runs offline, with no service called, so it catches the worst choices and nothing more. For longer ones, raise `min` (a passphrase of four words beats a short mix of symbols). Change the message in `lang/en/validation.json` (`not_common_password`).
+
 ## Internationalization and RTL
 
 Kreft translates text and flips direction for right-to-left languages such as Arabic, Hebrew, Persian and Urdu.
@@ -1112,7 +1107,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 +1118,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 +1136,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 +1392,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 +1644,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 +1670,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 +1697,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 +1721,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.
 
@@ -1750,11 +1745,13 @@ RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
-RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME}/index.html !-f
+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 a folder with its own `index.html`, 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 +1825,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 +1844,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 +1856,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 +1871,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 +1884,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
 
@@ -2208,7 +2205,8 @@ Go through this before your first real user:
 | `MCP_TOKEN` set, or MCP left off | The MCP endpoint is disabled in production without it. |
 | Tables listed in `kreftjs.config.json`, or no `--db` at all | `kreft serve` serves only the tables you list. |
 | No test user | Do not run `--seed` against production; delete `test@example.com` if it exists. |
-| HTTPS in front of the app | Cookies are `Secure` in production and on `https` URLs. |
+| HTTPS in front of the app, and `FORCE_HTTPS=true` | Cookies are `Secure` in production and on `https` URLs. Plain HTTP is only redirected to HTTPS with `FORCE_HTTPS=true` or an `https://` `APP_URL`. |
+| No `SESSION_SECURE_COOKIE=false` in `.env` | It switches the `Secure` flag off, so the login cookie is also sent over plain `http://`. Older templates wrote it; the server warns about it at start-up in production. |
 | `npm audit` and `kreft update` | Fix known vulnerabilities before release. |
 
 > [!NOTE]
@@ -2221,7 +2219,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 +2282,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 +2303,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 +2322,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 +2351,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. |

package/editors/vscode/README.md

@@ -1,6 +1,6 @@
 # Kreft for VS Code
 
-Colors, bracket matching, comments (Ctrl+/), folding and snippets for `.kreftjs` files.
+Colors, bracket matching, comments (Ctrl+/), folding and snippets for `.kreft` files.
 
 Install from a Kreft project or the Kreft folder:
 
@@ -8,6 +8,6 @@ Install from a Kreft project or the Kreft folder:
 kreftjs vscode
 ```
 
-Then restart VS Code. Type `kreftjs` in an empty `.kreftjs` file for a starter component, or `state`, `action`, `for`, `kreft-wait` …
+Then restart VS Code. Type `kreftjs` in an empty `.kreft` file for a starter component, or `state`, `action`, `for`, `kreft-wait` …
 
-Files from older projects (`.kreft`, and `.som` from Som.js) get the same colors. Both `s-` and `k-` directives, and both `<som-…>` and `<kreft-…>` tags, are highlighted.
+Files with the older `.kreftjs` extension get the same colors.