kreftjs 0.0.12-beta → 0.0.14-beta

package/docs/README.md

@@ -82,7 +82,7 @@ npx kreftjs dev
 ### Check that it works
 
 ```bash
-kreft --version     # for example 0.0.12-beta
+kreft --version     # for example 0.0.14-beta
 kreft about         # Kreft and Node.js versions, this project's settings and drivers
 kreft list          # every command your version has
 ```

package/kreftjs.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Kreft 0.0.12-beta
+// Type definitions for Kreft 0.0.14-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.12-beta — reactive by nature
+ * Kreft v0.0.14-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.12-beta';
+  const VERSION = '0.0.14-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.12-beta",
+  "version": "0.0.14-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",

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.12-beta'}</span>
+          <span class="badge">Kreft {Kreftjs.version || '0.0.14-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.12-beta'}</code></td></tr>
+            <tr><th>Engine</th><td><code>Kreft v{Kreftjs.version || '0.0.14-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.12-beta
+// Type definitions for Kreft 0.0.14-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.12-beta — reactive by nature
+ * Kreft v0.0.14-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.12-beta';
+  const VERSION = '0.0.14-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.12-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.14-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>

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

@@ -80,7 +80,10 @@ 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>
+        <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>
@@ -88,7 +91,7 @@ action copy() {
         <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 -->
@@ -104,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>
@@ -227,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;
@@ -294,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;
@@ -305,6 +309,8 @@ 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; }
@@ -413,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);
@@ -636,24 +643,64 @@ 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: 32px; }
-  .hero-tagline { font-size: 20px; }
-  .cta-actions { flex-direction: column; width: 100%; }
-  .pill-btn { width: 100%; text-align: center; }
-  .feature-badges { gap: 6px; }
-  .badge { font-size: 11.5px; padding: 5px 10px; }
+  .welcome-container { padding: 0 max(14px, env(safe-area-inset-right)) 28px max(14px, env(safe-area-inset-left)); }
+  .site-bar { height: 52px; }
+  .site-nav a { padding: 8px 10px; font-size: 13px; }
+  .site-theme { height: 32px; width: 32px; }
+  .hero-meta { gap: 6px; margin-bottom: 14px; }
+  .hero-grid { gap: 28px; padding-bottom: 36px; }
+  .hero-headline { font-size: 26px; min-height: 3.3em; letter-spacing: -0.03em; }
+  .hero-tagline { font-size: 17px; margin: 10px 0 10px; }
+  .hero-summary { font-size: 14px; line-height: 1.55; margin-bottom: 20px; }
+  /* the main button on its own line, the other two side by side */
+  .cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-bottom: 18px; }
+  .pill-btn.primary { grid-column: 1 / -1; }
+  .pill-btn { width: 100%; min-height: 42px; padding: 8px 14px; font-size: 14px; text-align: center; }
+  .feature-badges { gap: 5px; }
+  .badge { font-size: 11px; padding: 4px 9px; }
+  .hero-visual { gap: 14px; }
+  .terminal-card { border-radius: 14px; }
+  .terminal-code { font-size: 11.5px; line-height: 1.6; padding: 14px 14px 30px; }
+  .floating-preview { padding: 14px; border-radius: 14px; }
+  .preview-name { font-size: 17px; }
+  .preview-metrics { display: none; }
+  .language, .inside, .begin { padding: 28px 0; }
+  .language h2, .inside h2, .begin h2 { font-size: 19px; margin-bottom: 14px; }
+  /* the 12 words and the 9 parts in two columns, not one long list */
+  dl { grid-template-columns: 1fr 1fr; column-gap: 16px; font-size: 13px; }
+  dl div { grid-template-columns: 1fr; gap: 1px; padding: 8px 0; }
+  dl dd { font-size: 12px; line-height: 1.35; }
+  .inside ul { grid-template-columns: 1fr 1fr; }
+  .inside a { padding: 12px; gap: 3px; }
+  .inside a strong { font-size: 13px; }
+  .inside a span { font-size: 12px; line-height: 1.35; }
+  .term { max-width: 100%; }
+  .term code { min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12.5px; }
+  .begin p { font-size: 13px; }
+  .site-foot { flex-wrap: wrap; gap: 6px 14px; padding-top: 16px; font-size: 12px; }
+}
+@media (max-width: 380px) {
+  .hero-headline { font-size: 24px; min-height: 4.3em; }
+  .version-pill, .hero-kicker { font-size: 11px; padding: 4px 10px; }
+  .terminal-code { font-size: 10.5px; }
+  .preview-badges { flex-wrap: wrap; }
+}
+@media (max-width: 340px) {
   .inside ul { grid-template-columns: 1fr; }
-  dl { grid-template-columns: 1fr; }
-  dl div { grid-template-columns: 1fr; gap: 4px; }
 }
 </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.12-beta</span>
+          <span class="badge-env">Kreft v0.0.14-beta</span>
         </div>
         <h1 class="hero-error-message">{currentMessage}</h1>
       </div>