kreftjs 0.0.11-beta → 0.0.13-beta

package/bin/build.js

@@ -229,6 +229,7 @@ ${indent(components.join('\n\n'))}
       : html.replace(/<head>/i, `<head>\n  <base href="${b}">`);
   }
   write(dist, 'index.html', html);
+  addCacheBusters(dist);
   if (htaccess) writeHtaccess(dist, html);
 
   const report = () => {
@@ -252,6 +253,22 @@ ${indent(components.join('\n\n'))}
   report();
 };
 
+// A host keeps .js and .css for days (Hostinger: 7), and a new build keeps the same file names, so visitors would run the old
+// runtime and old pages after an upgrade (the welcome page still saying "Kreft 0.0.6-beta"). A short hash of each file goes into its
+// address (kreftjs.js?v=3f2a9c1b): a changed file is a new address, an unchanged one stays cached.
+function addCacheBusters(dist) {
+  const file = path.join(dist, 'index.html');
+  const html = fs.readFileSync(file, 'utf8');
+  const out = html.replace(/(<(?:script|link)\b[^>]*?\b(?:src|href)=)(["'])([^"']+)\2/gi, (m, pre, q, url) => {
+    if (/^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(url) || /[?#]/.test(url) || !/\.(?:m?js|css)$/i.test(url)) return m;
+    const target = path.join(dist, url.replace(/^\//, ''));
+    if (!target.startsWith(dist + path.sep) || !fs.existsSync(target) || !fs.statSync(target).isFile()) return m;
+    const hash = require('crypto').createHash('sha1').update(fs.readFileSync(target)).digest('hex').slice(0, 8);
+    return pre + q + url + '?v=' + hash + q;
+  });
+  if (out !== html) fs.writeFileSync(file, out);
+}
+
 // Apache (Hostinger, cPanel …) answers /docs with a 404, because only index.html exists on disk. These rules send every page address
 // (no file extension, not under /api/) that is not a real file, or a folder with its own index.html (a prerendered page), to index.html,
 // so reloading a page works even when a folder has the page's name (the docs/ folder next to the /docs page). A missing file such as
@@ -273,6 +290,13 @@ function writeHtaccess(dist, html) {
   RewriteCond %{REQUEST_URI} !\\.[A-Za-z0-9]+$
   RewriteRule . ${base}index.html [L]
 </IfModule>
+
+# index.html names the other files with their hashes, so it must always be asked for again
+<IfModule mod_headers.c>
+  <FilesMatch "^index\\.html$">
+    Header set Cache-Control "no-cache"
+  </FilesMatch>
+</IfModule>
 `);
 }
 

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.11-beta
+kreft --version     # for example 0.0.13-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```
@@ -1751,7 +1751,7 @@ 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 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.
+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. `kreft build` also puts a short hash into the address of each script and style sheet (`app.js?v=28a965f6`), and the `.htaccess` tells the host never to keep `index.html`. Hosts cache `.js` and `.css` for days, so without the hash visitors would keep running the old runtime and old pages after you upload a new build. 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.

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.11-beta
+// Type definitions for Kreft 0.0.13-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.11-beta — reactive by nature
+ * Kreft v0.0.13-beta — reactive by nature
  * The .kreft component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5036,7 +5036,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.11-beta';
+  const VERSION = '0.0.13-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kreftjs",
-  "version": "0.0.11-beta",
+  "version": "0.0.13-beta",
   "description": "A tiny reactive framework with its own component language (.kreft files): router with nested routes, stores, saved data, animations, an API client, hot reload, DevTools and a template engine.",
   "license": "Elastic-2.0",
   "main": "kreftjs.js",
@@ -14,7 +14,7 @@
     "start": "node bin/kreftjs.js dev --api demo/db.json --db sqlite:demo/database/demo.db --migrations demo/database/migrations --server demo/server --backend demo --seed",
     "build": "node bin/kreftjs.js build demo --out dist/demo --include docs",
     "preview": "node bin/kreftjs.js dev dist --api demo/db.json --db sqlite:demo/database/demo.db --migrations demo/database/migrations --server demo/server --backend demo --seed",
-    "test": "node --test test/security.test.js test/prerender.test.js test/seo.test.js test/rebrand.test.js test/noauth.test.js test/winspawn.test.js test/htaccess.test.js test/cookie-secure.test.js test/password-rule.test.js",
+    "test": "node --test test/security.test.js test/prerender.test.js test/seo.test.js test/rebrand.test.js test/noauth.test.js test/winspawn.test.js test/htaccess.test.js test/cookie-secure.test.js test/password-rule.test.js test/headline.test.js",
     "electron": "kreftjs electron",
     "electron:dev": "kreftjs electron:dev",
     "electron:build": "kreftjs electron:build"

package/templates/app/frontend/errors/ErrorMonitor.kreft

@@ -92,7 +92,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="badges">
           <span class="badge danger-badge">HTTP {status}</span>
           <span class="badge solid">{currentTitle}</span>
-          <span class="badge">Kreft {Kreftjs.version || '0.0.11-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.13-beta'}</span>
         </div>
         <div class="actions">
           <button class="sm" @click={copyReport}>{copied ? 'Copied Markdown' : 'Copy Report'}</button>
@@ -189,7 +189,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <h3>Kreft Runtime</h3>
         <table>
           <tbody>
-            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.11-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.13-beta'}</code></td></tr>
             <tr><th>Sanitizer</th><td><code>Active (cleanHtml / SafeHtml)</code></td></tr>
             <tr><th>Environment</th><td><code>development (APP_DEBUG=true)</code></td></tr>
           </tbody>

package/templates/app/frontend/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.11-beta
+// Type definitions for Kreft 0.0.13-beta
 // Use from TypeScript or for editor hints in plain JavaScript (// @ts-check).
 
 export interface Signal<T> { value: T }

package/templates/app/frontend/kreftjs.js

@@ -1,5 +1,5 @@
 /*!
- * Kreft v0.0.11-beta — reactive by nature
+ * Kreft v0.0.13-beta — reactive by nature
  * The .kreft component language (state · derive · action · when · watch · on),
  * { } views with k-if / k-each / k-model, components, slots, router, stores,
  * share / receive, event bus and a template engine.
@@ -5036,7 +5036,7 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.11-beta';
+  const VERSION = '0.0.13-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets

package/templates/app/frontend/pages/Dashboard.kreft

@@ -112,7 +112,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.11-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.13-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>

package/templates/app/frontend/pages/Home.kreft

@@ -4,6 +4,22 @@
 state name = 'Enterprise User'
 state count = 0
 state copied = false
+
+// the headline changes every few seconds: each line slides in from the right with a flash of red light (not for people who asked for less motion)
+state rotating = [
+  'Build full-stack apps in plain words.',
+  'The JavaScript framework that reads like English.',
+  'Components, backend and database in one small framework.',
+  'A small framework for the whole stack.',
+]
+state rotIndex = 0
+derive rotWord = [rotating[rotIndex]]
+let rotTimer
+on ready {
+  const calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (!calm) rotTimer = setInterval(() => { rotIndex = (rotIndex + 1) % rotating.length }, 3800)
+}
+on destroy { clearInterval(rotTimer) }
 derive double = count * 2
 
 state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
@@ -64,17 +80,18 @@ action copy() {
     <section class="hero-grid">
       <!-- Left Column: Copy, Headlines & CTA Badges -->
       <div class="hero-copy">
-        <p class="version-pill"><span class="version-dot" aria-hidden="true"></span>Kreft v{Kreftjs.version}</p>
-        <h1 class="hero-headline">
-          The Enterprise<br>
-          JavaScript<br>
-          Framework.
+        <div class="hero-meta">
+          <p class="version-pill"><span class="version-dot" aria-hidden="true"></span>Kreft v{Kreftjs.version}</p>
+          <p class="hero-kicker">JavaScript framework · Laravel-friendly</p>
+        </div>
+        <h1 class="hero-headline" aria-label="Build full-stack apps in plain words.">
+          <span aria-hidden="true">{for w in rotWord key w}<span class="rotator">{w}</span>{/for}</span>
         </h1>
 
         <p class="hero-tagline">Built for scale, speed, and safety.</p>
 
         <p class="hero-summary">
-          Kreft is a zero-dependency, full-stack JavaScript framework featuring its own component language, built-in SQL ORM, state management, migrations, auth, queues, and desktop packaging—all self-contained with no build steps required.
+          Kreft is a zero-dependency, full-stack JavaScript framework featuring its own component language, built-in SQL ORM, state management, migrations, auth, queues, and desktop packaging—all self-contained with no build steps required. Routes, controllers, models, migrations and commands will feel familiar if you know Laravel.
         </p>
 
         <!-- CTA Buttons -->
@@ -90,6 +107,7 @@ action copy() {
           <span class="badge highlight">✓ 0 Dependencies</span>
           <span class="badge">✓ Built-in SQL ORM</span>
           <span class="badge">✓ Authentication &amp; Gates</span>
+          <span class="badge">✓ Laravel-friendly</span>
           <span class="badge">✓ TypeScript &amp; JS Choice</span>
         </div>
       </div>
@@ -213,7 +231,7 @@ action copy() {
 <style scoped>
 .welcome-container {
   position: relative;
-  overflow: visible;
+  overflow-x: clip; /* the glow circles may reach past the screen edge without making the page scroll sideways */
   width: 100%;
   max-width: calc(var(--container, 1240px) + var(--container-pad, 28px) * 2);
   margin: 0 auto;
@@ -280,7 +298,7 @@ action copy() {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  margin: 0 0 20px;
+  margin: 0;
   padding: 5px 12px;
   font-family: var(--font-mono, ui-monospace, monospace);
   font-size: 12.5px;
@@ -291,8 +309,21 @@ action copy() {
   border-radius: 9999px;
 }
 .version-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
+.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
+.hero-kicker { margin: 0; padding: 5px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); border: 1px dashed var(--border); border-radius: 9999px; }
+
+/* the changing headline: each line slides in from the right (a marquee) with a flash of red light, then settles */
+.rotator { display: block; animation: rotator-flash 0.9s ease-out; }
+@keyframes rotator-flash {
+  0% { opacity: 0; transform: translateX(1.4em); filter: blur(6px); color: #ef4444; text-shadow: 0 0 0.7em rgba(239, 68, 68, 0.95); }
+  35% { opacity: 1; filter: blur(0); color: #ef4444; text-shadow: 0 0 0.55em rgba(239, 68, 68, 0.85); }
+  100% { opacity: 1; transform: none; filter: none; color: var(--foreground); text-shadow: none; }
+}
+@media (prefers-reduced-motion: reduce) { .rotator { animation: none; } }
 .hero-headline {
-  font-size: clamp(38px, 5.2vw, 66px);
+  font-size: clamp(30px, 3.9vw, 48px);
+  min-height: 3.3em; /* three lines for the longest headline, so the page below does not jump */
+  overflow: hidden;
   line-height: 1.05;
   letter-spacing: -0.04em;
   font-weight: 800;
@@ -388,6 +419,7 @@ action copy() {
 
 /* Code Terminal Window */
 .terminal-card {
+  min-width: 0;
   background: #0f172a;
   border-radius: 18px;
   box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 1px 1px rgba(255, 255, 255, 0.08);
@@ -611,24 +643,45 @@ dd { margin: 0; color: var(--muted); }
 .term button { background: var(--primary); color: var(--primary-foreground); border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; }
 .begin p { color: var(--muted); max-width: 40em; }
 
+@media (max-width: 1100px) {
+  .hero-grid { gap: 32px; }
+  .floating-preview { width: 290px; }
+}
 @media (max-width: 960px) {
-  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
-  .hero-copy { max-width: 100%; }
-  .hero-visual { justify-content: center; width: 100%; padding: 0; }
-  .terminal-card { max-width: 100%; }
-  .floating-preview { position: static; width: 100%; max-width: 100%; margin-top: 20px; right: 0; bottom: 0; }
+  /* minmax(0, 1fr): the code window may scroll inside itself, it must not make the whole page wider than the screen */
+  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
+  .hero-copy, .hero-visual, .terminal-card { min-width: 0; max-width: 100%; }
+  /* the live card goes under the code window (a column), not beside it: two 100% wide boxes in one row squeezed both to nothing */
+  .hero-visual { flex-direction: column; align-items: center; gap: 20px; width: 100%; padding: 0; }
+  .terminal-card, .floating-preview { width: 100%; max-width: 560px; }
+  .floating-preview { position: static; margin: 0; right: 0; bottom: 0; }
   .inside ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 @media (max-width: 640px) {
-  .welcome-container { padding: 24px 0 48px; }
-  .hero-headline { font-size: 36px; }
+  .welcome-container { padding: 0 max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
+  .site-bar { height: 56px; }
+  .site-nav a { padding: 10px 12px; }
+  .hero-headline { font-size: 32px; min-height: 4.4em; }
   .hero-tagline { font-size: 20px; }
-  .cta-actions { flex-direction: column; width: 100%; }
-  .pill-btn { width: 100%; text-align: center; }
+  .hero-summary { font-size: 15px; }
+  .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
+  .pill-btn { width: 100%; min-height: 46px; text-align: center; }
   .feature-badges { gap: 6px; }
   .badge { font-size: 11.5px; padding: 5px 10px; }
+  .terminal-code { font-size: 12.5px; padding: 18px 16px 44px; }
+  .floating-preview { padding: 18px; }
+  .language, .inside, .begin { padding: 40px 0; }
   .inside ul { grid-template-columns: 1fr; }
   dl { grid-template-columns: 1fr; }
   dl div { grid-template-columns: 1fr; gap: 4px; }
+  .term { max-width: 100%; }
+  .term code { min-width: 0; overflow-x: auto; white-space: nowrap; }
+  .site-foot { flex-wrap: wrap; gap: 8px 16px; }
+}
+@media (max-width: 380px) {
+  .hero-headline { font-size: 28px; }
+  .version-pill, .hero-kicker { font-size: 11.5px; }
+  .terminal-code { font-size: 11.5px; }
+  .preview-badges { flex-wrap: wrap; }
 }
 </style>

package/templates/errors/ErrorMonitor.kreft

@@ -118,7 +118,7 @@ state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$
         <div class="hero-badges">
           <span class="badge-exception">{currentTitle}</span>
           <span class="badge-env">Node.js {typeof process !== 'undefined' ? process.version : 'v22.0.0'}</span>
-          <span class="badge-env">Kreft v0.0.11-beta</span>
+          <span class="badge-env">Kreft v0.0.13-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>