kreftjs 0.0.6-beta → 0.0.9-beta

package/templates/app/frontend/kreftjs.js

@@ -1,6 +1,6 @@
 /*!
- * Kreft v0.0.6-beta — reactive by nature
- * The .kreftjs component language (state · derive · action · when · watch · on),
+ * Kreft v0.0.9-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.
  * One file, no build step, no virtual DOM. MIT License.
@@ -29,7 +29,7 @@
   };
   const text = () => document.createTextNode('');
   // `kreft dev` turns this on: live components are tracked for hot reload and the DevTools panel
-  const devMode = () => !!(global.__KREFT_DEV__ || global.__SOM_DEV__);
+  const devMode = () => !!global.__KREFT_DEV__;
   const liveInstances = new Set();
   const BAD_PATH_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
   const getPath = (obj, path) => String(path).split('.').reduce((o, k) => (o == null || BAD_PATH_KEYS.has(k) ? undefined : o[k]), obj);
@@ -651,8 +651,8 @@
     return replacePlaceholders(chosen, fullReplace);
   }
 
-  if (typeof window !== 'undefined' && (window.__KREFT_LANG__ || window.__SOM_LANG__)) {
-    addTranslations(window.__KREFT_LANG__ || window.__SOM_LANG__);
+  if (typeof window !== 'undefined' && (window.__KREFT_LANG__)) {
+    addTranslations(window.__KREFT_LANG__);
   }
 
   function formatNumber(n, options, locale = currentLocaleRef.value) {
@@ -1898,9 +1898,9 @@
 
   /* ---------- <kreft-view>: the page for the current route (nested views show child routes) ----------
    * Layouts: the page is shown inside a layout component, in its <slot>.
-   *   Kreftjs.router({ layout: 'app', routes })            every page uses layouts/app.kreftjs
-   *   { path: '/admin', component: …, layout: 'admin' }  this route (and its children) use layouts/admin.kreftjs
-   *   layout admin                                       in a page's .kreftjs file: this page uses it
+   *   Kreftjs.router({ layout: 'app', routes })            every page uses layouts/app.kreft
+   *   { path: '/admin', component: …, layout: 'admin' }  this route (and its children) use layouts/admin.kreft
+   *   layout admin                                       in a page's .kreft file: this page uses it
    *   layout none / layout: false                        no layout
    * Moving between pages with the same layout keeps the layout on the page (its state stays).
    * ------------------------------------------------------------------------------------------- */
@@ -1953,7 +1953,7 @@
           const p = loadDef(def).then(() => { loaded.value++; }, (e) => {
             def.__failed = true;
             def.__failedError = e;
-            if (router.__errors) { console.error('[Kreft error] the page could not be loaded:', e); return router.abort(500, e && e.message); } // errors/500.kreftjs
+            if (router.__errors) { console.error('[Kreft error] the page could not be loaded:', e); return router.abort(500, e && e.message); } // errors/500.kreft
             loaded.value++; // the page reports its own error
           });
           if (first) waitFor(p);
@@ -2028,7 +2028,7 @@
 
   /* ---------- <kreft-wait>: show something else until everything inside has loaded ----------
    *   <kreft-wait>
-   *     <UserList />                          (its .kreftjs file, `load` data, async `on start`)
+   *     <UserList />                          (its .kreft file, `load` data, async `on start`)
    *     <p k-waiting>Loading…</p>
    *     <p k-failed="error">Could not load: {error.message}</p>
    *   </kreft-wait>
@@ -2234,20 +2234,7 @@
     if (open.length) throw new SyntaxError('A {for} block is missing its {/for}');
     return out;
   }
-  // Som.js names still work in a template: `s-if` is read as `k-if` and `<som-view>` as `<kreft-view>`.
-  // It runs on the finished markup, so the browser, `kreft build` and the Vite plugin all see the same names.
-  const LEGACY_TAGS = /^som-(?=(?:wait|view|component|yield|section|portal|link)$)/i;
-  const TAG_SCAN = /<(\/?)([A-Za-z][\w:.-]*)((?:\s+[^\s"'<>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?)*)(\s*\/?>)/g;
-  const ATTR_SCAN = /(\s+)([^\s"'<>\/=]+)(\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?/g;
-  function legacyMarkup(html) {
-    if (!/s-[a-z]|<\/?som-/i.test(html)) return html;
-    return html.replace(TAG_SCAN, (m, slash, name, attrs, end) => {
-      const tag = LEGACY_TAGS.test(name) ? 'kreft-' + name.slice(4) : name;
-      const out = attrs ? attrs.replace(ATTR_SCAN, (a, sp, an, val) => (/^s-[a-z]/i.test(an) ? sp + 'k-' + an.slice(2) + (val || '') : a)) : attrs;
-      return tag === name && out === attrs ? m : '<' + slash + tag + out + end;
-    });
-  }
-  const prepareTemplate = (src) => legacyMarkup(quoteBraceAttrs(expandBlocks(expandSelfClosing(src))));
+  const prepareTemplate = (src) => quoteBraceAttrs(expandBlocks(expandSelfClosing(src)));
   function getTemplate(def) {
     if (def.__tpl) return def.__tpl;
     let src = def.template;
@@ -2380,7 +2367,7 @@
   }
 
   function mountComponent(el, def, parentScope, parentInst, options = {}) {
-    if (typeof def === 'string') def = kreftComponent(def); // 'components/Card.kreftjs'
+    if (typeof def === 'string') def = kreftComponent(def); // 'components/Card.kreft'
     if (def.__loader && def.__resolved) def = def.__resolved;
     if (isFunction(def)) def = { init: def };
     if (def.__loader || (def.templateUrl && !def.__tpl)) {
@@ -2574,11 +2561,16 @@
     if (refName && parentInst) setRef(parentInst, refName, inst.exposed ? reactive(inst.exposed) : inst.ctx);
     const mountedJob = () => {
       inst.isMounted = true;
-      // run inside the component's scope, so watchers and bus listeners made here are removed with it
-      inst.scope.run(() => {
-        inst.hooks.ready.forEach((h) => safeCall(h, inst.ctx));
-        if (inst.keep) inst.hooks.show.forEach((h) => safeCall(h, inst.ctx)); // a kept one is shown the first time too
-      });
+      // run inside the component's scope, so watchers and bus listeners made here are removed with it.
+      // The instance is current too, so `on ready { onDestroy(() => …) }` registers its cleanup on this component
+      const prevInstance = currentInstance;
+      currentInstance = inst;
+      try {
+        inst.scope.run(() => {
+          inst.hooks.ready.forEach((h) => safeCall(h, inst.ctx));
+          if (inst.keep) inst.hooks.show.forEach((h) => safeCall(h, inst.ctx)); // a kept one is shown the first time too
+        });
+      } finally { currentInstance = prevInstance; }
     };
     if (setupDone.length) {
       const waitCtx = currentWait, keepCtx = currentKeep;
@@ -2743,7 +2735,7 @@
         if (!container) return warn(`Failed to mount app: "${target}" not found.`);
         if (rootInst) return warn('App has already been mounted.');
         // copy with descriptors so getters stay getters (computed)
-        let def = rootComponent; // a .kreftjs path like 'App.kreftjs', or an object
+        let def = rootComponent; // a .kreft path like 'App.kreft', or an object
         let source = container.innerHTML;
         if (container.hasAttribute('data-kreft-ssg')) { // a page made by `kreft build --prerender`: its first view came ready
           const t = document.querySelector('template[data-kreft-ssg-source]');
@@ -2846,14 +2838,13 @@
 
   /* ================================================================
    * Saved data — kept in localStorage, so it survives a page reload
-   *   .kreftjs:  saved todos = []            (key: "<Component>.todos")
+   *   .kreft:  saved todos = []            (key: "<Component>.todos")
    *          saved theme = 'dark' as 'settings.theme'
    *   JS:    const theme = Kreftjs.saved('theme', 'dark')   → a signal
    *          Kreftjs.storage.get / set / remove / clear
-   * Values are stored as JSON under "som:<key>". Changes in another tab show up here too.
+   * Values are stored as JSON under "kreft:<key>". Changes in another tab show up here too.
    * ================================================================ */
-  // TODO(3.1): the prefix keeps its Som.js spelling so saved data survives the rename; move it to 'kreft:' with a fallback read
-  const STORAGE_PREFIX = 'som:';
+  const STORAGE_PREFIX = 'kreft:';
   const ls = () => { try { return typeof localStorage !== 'undefined' ? localStorage : null; } catch (_) { return null; } };
   const storage = {
     has(key) { const s = ls(); try { return !!s && s.getItem(STORAGE_PREFIX + key) !== null; } catch (_) { return false; } },
@@ -3048,7 +3039,7 @@
 
   /* ================================================================
    * load — data from an async function, with loading and error built in
-   *   .kreftjs:  load users = api.get('/api/users')
+   *   .kreft:  load users = api.get('/api/users')
    *   JS:    const users = Kreftjs.resource(() => Kreftjs.api.get('/api/users'))
    *   →  users.data · users.loading · users.error · users.loaded · users.reload()
    * It loads again by itself when a value it reads changes:  load user = api.get('/api/users/' + id)
@@ -3158,7 +3149,7 @@
   }
 
   /* ================================================================
-   * The .kreftjs language
+   * The .kreft language
    *
    *   prop start = 0
    *   state count = start
@@ -3174,20 +3165,20 @@
    *
    *   <style scoped> button { color: red } </style>
    *
-   * Load with app.component('Counter', 'components/Counter.kreftjs'),
-   * a route { path: '/', component: 'pages/Home.kreftjs' } or Kreftjs.load(url).
+   * Load with app.component('Counter', 'components/Counter.kreft'),
+   * a route { path: '/', component: 'pages/Home.kreft' } or Kreftjs.load(url).
    * ================================================================ */
-  // Component files are `.kreftjs`. Older projects have `.kreft` (an early Kreft name) or `.som` (Som.js) files:
-  // all three are accepted, and a name that is not found with one extension is tried with the others.
-  const EXT = '.kreftjs';
-  const LEGACY_EXTS = ['.kreft', '.som'];
-  const EXT_RE = /\.(?:kreftjs|kreft|som)$/i;
-  const COMPONENT_RE = /\.(?:kreftjs|kreft|som)(?:[?#].*)?$/i;
+  // Component files are `.kreft`. Projects from the 0.0.x betas have `.kreftjs` files:
+  // both are accepted, and a name that is not found with one extension is tried with the other.
+  const EXT = '.kreft';
+  const LEGACY_EXTS = ['.kreftjs'];
+  const EXT_RE = /\.(?:kreftjs|kreft)$/i;
+  const COMPONENT_RE = /\.(?:kreftjs|kreft)(?:[?#].*)?$/i;
   const isComponent = (s) => COMPONENT_RE.test(s);
   const isKreftUrl = isComponent;
   // the same address under the other extensions
   const altExts = (url) => {
-    const m = /^(.*?)(\.(?:kreftjs|kreft|som))([?#].*)?$/i.exec(url);
+    const m = /^(.*?)(\.(?:kreftjs|kreft))([?#].*)?$/i.exec(url);
     return m ? [EXT, ...LEGACY_EXTS].filter((e) => e !== m[2].toLowerCase()).map((e) => m[1] + e + (m[3] || '')) : [];
   };
   // fetch() the file, or the first of its other-extension names that exists; also tells which address answered
@@ -3228,7 +3219,7 @@
   const hashString = (s) => { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return (h >>> 0).toString(36); };
 
   /* ---------- a small scanner that understands strings, comments and brackets ---------- */
-  // the .kreftjs script part may hold regular expressions like /["']/g; views never do ({/for} must stay a block)
+  // the .kreft script part may hold regular expressions like /["']/g; views never do ({/for} must stay a block)
   let scanScript = false;
   const REGEX_BEFORE = /(?:^|[(,=:[!&|?{};+\-*%<>~^]|\b(?:return|typeof|instanceof|in|of|new|delete|void|throw|case|do|else|yield|await))\s*$/;
   function skipLiteral(src, i) {
@@ -3634,7 +3625,7 @@
     }
   }
 
-  /* ---------- the compiler: .kreftjs source → component definition ---------- */
+  /* ---------- the compiler: .kreft source → component definition ---------- */
   function parseKreftScript(src, url) {
     scanScript = true;
     try { return parseKreftScriptInner(src, url); } finally { scanScript = false; }
@@ -3677,7 +3668,7 @@
       if (m && (m[1] === 'watch' || m[1] === 'when') && /^\w+\s*\(/.test(src.slice(i))) m = null;
       if (m && m[1] === 'interface' && !/^interface\s+[A-Za-z_$][\w$]*/.test(src.slice(i, i + 120))) m = null;
       if (m && m[1] === 'type' && !/^type\s+[A-Za-z_$][\w$]*(?:\s*<[^>]*>)?\s*=(?!=)/.test(src.slice(i, i + 160))) m = null;
-      // `layout admin` / `layout 'layouts/admin.kreftjs'` / `layout none`: only like that, so `layout = …` stays code
+      // `layout admin` / `layout 'layouts/admin.kreft'` / `layout none`: only like that, so `layout = …` stays code
       const lm = m && m[1] === 'layout' && src.slice(i).match(/^layout[ \t]+(?:(['"])([^'"\n]+)\1|([\w./-]+))[ \t]*;?[ \t]*(?=\n|$|\/\/)/);
       if (m && m[1] === 'layout' && !lm) m = null;
       if (lm) { layout = lm[2] || lm[3]; if (layout === 'none' || layout === 'false') layout = false; i += lm[0].length; continue; }
@@ -3844,7 +3835,7 @@
     return { code: out.join('\n'), imports, props, events, layout };
   }
 
-  // a CSS file imported by a .kreftjs file: one <link> for the whole page, before the components' own styles
+  // a CSS file imported by a .kreft file: one <link> for the whole page, before the components' own styles
   function addStylesheet(href) {
     if (typeof document === 'undefined') return;
     const full = new URL(href, document.baseURI).href;
@@ -3857,14 +3848,14 @@
     document.head.insertBefore(link, first);
   }
 
-  // load `import` lines once per file; .kreftjs imports become local components
+  // load `import` lines once per file; .kreft imports become local components
   async function resolveImports(list, url) {
     const values = {}, components = {};
     for (const stmt of list) {
       const m = stmt.match(/^import\s+(?:([\s\S]+?)\s+from\s+)?(['"])(.+?)\2/);
       if (!m) { warn(`Can't read import: ${stmt}`); continue; }
       const [, what, , spec] = m;
-      if (/^(?:kreftjs|kreft|som)(\.js)?$/.test(spec)) continue; // Kreft's own functions are always available
+      if (/^(?:kreftjs|kreft)(\.js)?$/.test(spec)) continue; // Kreft's own functions are always available
       const abs = /^\.{0,2}\//.test(spec) ? new URL(spec, url).href : spec;
       if (isKreftUrl(spec)) {
         if (what && IDENT.test(what.trim())) components[what.trim()] = kreftComponent(abs);
@@ -4072,15 +4063,15 @@
     return st;
   }
 
-  // Pure text work, shared by the browser and `kreft build`: .kreftjs source → its parts
-  function splitKreft(source, url = 'inline.kreftjs') {
+  // Pure text work, shared by the browser and `kreft build`: .kreft source → its parts
+  function splitKreft(source, url = 'inline.kreft') {
     const name = (url.split('/').pop() || '').replace(/[?#].*$/, '').replace(EXT_RE, '');
     source = source.replace(/\r\n?/g, '\n');
     // Safe linear extraction of <view> ... </view> to prevent ReDoS catastrophic backtracking
     const viewOpenIdx = source.search(/<view(\s[^>]*)?>/i);
     const viewCloseIdx = source.toLowerCase().lastIndexOf('</view>');
     if (viewOpenIdx === -1 || viewCloseIdx === -1 || viewCloseIdx <= viewOpenIdx) {
-      throw new SyntaxError(`${name}.kreftjs has no <view> … </view>`);
+      throw new SyntaxError(`${name}.kreft has no <view> … </view>`);
     }
     const viewOpenTagMatch = source.slice(viewOpenIdx).match(/^<view(\s[^>]*)?>/i);
     const viewContentStart = viewOpenIdx + viewOpenTagMatch[0].length;
@@ -4120,12 +4111,12 @@
     return def;
   }
 
-  async function compileKreft(source, url = 'inline.kreftjs') {
+  async function compileKreft(source, url = 'inline.kreft') {
     const sp = splitKreft(source, url);
     const { values, components } = await resolveImports(sp.imports, url);
     let run;
     try { run = new Function('$scope', '$h', `with ($scope) {\n${sp.code}\n}`); }
-    catch (e) { throw new SyntaxError(`${sp.name}.kreftjs: ${e.message}`); }
+    catch (e) { throw new SyntaxError(`${sp.name}.kreft: ${e.message}`); }
 
     const props = {};
     for (const p in sp.props) {
@@ -4270,20 +4261,20 @@
 
   // mode 'history' (default): clean URLs like /users/5 — the server must send index.html for every path.
   // mode 'hash': URLs like #/users/5 — works with any server, even file://.
-  // Error pages: errors/404.kreftjs, errors/403.kreftjs, errors/500.kreftjs …
+  // Error pages: errors/404.kreft, errors/403.kreft, errors/500.kreft …
   // (Kreftjs.router({ errors: 'errors' }) turns them on; `kreft make:errors` writes them into a project)
   const ERROR_PAGES = [401, 402, 403, 404, 419, 429, 500, 503];
   const ERROR_TITLES = { 400: 'Bad Request', 401: 'Unauthorized', 402: 'Payment Required', 403: 'Forbidden', 404: 'Not Found', 405: 'Method Not Allowed', 409: 'Conflict', 410: 'Gone', 419: 'Page Expired', 422: 'Unprocessable Content', 429: 'Too Many Requests', 500: 'Server Error', 502: 'Bad Gateway', 503: 'Service Unavailable', 504: 'Gateway Timeout' };
   let activeRouter = null;
 
-  /* ---------- route files: routes/web.kreftjs ----------
-   *   Route.view('/', 'pages/Home.kreftjs').name('home').title('Home')
-   *   Route.view('/users/:id', 'pages/User.kreftjs')                 // :id reaches the page as a prop
-   *   Route.middleware('auth').group(() => { Route.view('/dashboard', 'pages/Dashboard.kreftjs') })
-   *   Route.layout('guest').middleware('guest').group(() => { Route.view('/login', 'pages/auth/Login.kreftjs') })
+  /* ---------- route files: routes/web.kreft ----------
+   *   Route.view('/', 'pages/Home.kreft').name('home').title('Home')
+   *   Route.view('/users/:id', 'pages/User.kreft')                 // :id reaches the page as a prop
+   *   Route.middleware('auth').group(() => { Route.view('/dashboard', 'pages/Dashboard.kreft') })
+   *   Route.layout('guest').middleware('guest').group(() => { Route.view('/login', 'pages/auth/Login.kreft') })
    *   Route.prefix('/admin').name('admin.').group(() => { … })
    *   Route.redirect('/home', '/')
-   *   Route.view('/settings', 'pages/Settings.kreftjs').children(() => { Route.view('profile', 'pages/settings/Profile.kreftjs') })
+   *   Route.view('/settings', 'pages/Settings.kreft').children(() => { Route.view('profile', 'pages/settings/Profile.kreft') })
    */
   const routeFiles = new Map(); // absolute URL → function (Route) { … }  (kreft build puts them in app.js)
   function defineRoutes(path, fn) { routeFiles.set(new URL(path, document.baseURI).href, fn); }
@@ -4397,7 +4388,7 @@
   }
 
   function createRouter({ routes = [], mode = 'history', base, scrollToTop = true, layout = null, layouts = null, errors = null, middleware = {} } = {}) {
-    // routes: 'routes/web.kreftjs', or ['routes/web.kreftjs', 'routes/admin.kreftjs'], or the route objects themselves
+    // routes: 'routes/web.kreft', or ['routes/web.kreft', 'routes/admin.kreft'], or the route objects themselves
     const files = [].concat(routes).filter((r) => typeof r === 'string');
     const inline = [].concat(routes).filter((r) => r && typeof r === 'object');
     const middlewares = { ...middleware };
@@ -4539,7 +4530,7 @@
       if (!fromBrowser) setURL(target.fullPath, replace);
       Object.assign(route, target, { error: null });
       const rec = target.matched;
-      if (!rec && errorsDir) { // no route for this address: errors/404.kreftjs
+      if (!rec && errorsDir) { // no route for this address: errors/404.kreft
         showError(404, '');
         afterHooks.forEach((h) => { try { h(route, from); } catch (e) { console.error(e); } });
         return readyResolve();
@@ -4563,10 +4554,10 @@
       readyResolve();
     }
 
-    // shows errors/<status>.kreftjs in place of the page; the address stays as it is
+    // shows errors/<status>.kreft in place of the page; the address stays as it is
     function showError(status, message) {
       status = Number(status) || 500;
-      const file = ERROR_PAGES.includes(status) ? status : 'error'; // errors/error.kreftjs for any other status
+      const file = ERROR_PAGES.includes(status) ? status : 'error'; // errors/error.kreft for any other status
       const component = kreftComponent(`${errorsDir}/${file}${EXT}`);
       route.error = { status, message: message || '' };
       levels.value = [{ component, isError: true, props: { status, message: message || '', title: ERROR_TITLES[status] || 'Error' } }];
@@ -4635,7 +4626,7 @@
     };
     return router;
   }
-  // abort(404) in any .kreftjs file or in JavaScript
+  // abort(404) in any .kreft file or in JavaScript
   const abortPage = (status, message) => { if (activeRouter) activeRouter.abort(status, message); else warn('abort() needs a router.'); };
   const currentRouter = () => receive(ROUTER_KEY, null);
   const currentRoute = () => { const r = receive(ROUTER_KEY, null); return r && r.route; };
@@ -4959,7 +4950,7 @@
       Object.keys(kept).forEach((k) => { if (hasOwn(raw, k) && keepable(raw[k])) s[k] = kept[k]; });
     });
   }
-  // a .kreftjs file changed: compile it again and swap every live copy (false = reload the page instead)
+  // a .kreft file changed: compile it again and swap every live copy (false = reload the page instead)
   async function hotUpdate(url, source) {
     const abs = new URL(url, document.baseURI).href;
     const entry = kreftCache.get(abs);
@@ -5032,29 +5023,29 @@
     stores, storeLog, busLog,
   };
 
-  const VERSION = '0.0.6-beta';
+  const VERSION = '0.0.9-beta';
   const Kreftjs = {
     version: VERSION,
     // PUBLIC_ values from .env (kreft dev and kreft build put them here); never secrets
-    get env() { return Object.freeze({ ...((typeof window !== 'undefined' && (window.__KREFT_ENV__ || window.__SOM_ENV__)) || {}) }); },
+    get env() { return Object.freeze({ ...((typeof window !== 'undefined' && window.__KREFT_ENV__) || {}) }); },
     get isVite() {
-      return Boolean(typeof window !== 'undefined' && (window.__KREFT_VITE__ || window.__SOM_VITE__));
+      return Boolean(typeof window !== 'undefined' && window.__KREFT_VITE__);
     },
     get isElectron() {
       return Boolean(
         typeof window !== 'undefined' && (
-          window.kreftDesktop || window.somDesktop ||
+          window.kreftDesktop ||
           (window.process && window.process.type === 'renderer') ||
           (typeof navigator !== 'undefined' && /electron/i.test(navigator.userAgent))
         )
       );
     },
     get desktop() {
-      return (typeof window !== 'undefined' && (window.kreftDesktop || window.somDesktop)) || null;
+      return (typeof window !== 'undefined' && window.kreftDesktop) || null;
     },
     abort: abortPage,
     // apps & components
-    app: createApp, lazy, load, compile: compileKreft, compileSom: compileKreft, render, // compileSom: the Som.js name, kept as an alias
+    app: createApp, lazy, load, compile: compileKreft, render,
     // used by `kreft build`, Vite plugin and the app.js it writes
     __makeDef: makeKreftDef,
     __registerDef: registerDef,
@@ -5063,7 +5054,7 @@
     __routes: defineRoutes,
     __fileHeaders: (url) => fileHeaders(new URL(url, document.baseURI).href),
     __npmBase: '/__kreft/npm/', // where kreft dev serves files from node_modules (CSS imports)
-    __import: (url) => import(url), // how built apps load the .js modules a .kreftjs file imports
+    __import: (url) => import(url), // how built apps load the .js modules a .kreft file imports
     __precompiled: precompiled,
     __hot: hotUpdate,
     __devtools: devtools,
@@ -5098,11 +5089,10 @@
 
   // the text-only helpers the build tool reuses, so built code matches the browser exactly
   Object.defineProperty(Kreftjs, '__internal', {
-    value: { expandBlocks, prepareTemplate, legacyMarkup, splitKreft, splitInterp, exactBrace, stripBrace, interpToExpr, quoteBraceAttrs, expandSelfClosing, scopeCss, hashString, propType, simplePathRE, fnExpRE, forAliasRE, makeKreftDef, compileFn, evaluate, stripTypeScript, stripTsParams },
+    value: { expandBlocks, prepareTemplate, splitKreft, splitInterp, exactBrace, stripBrace, interpToExpr, quoteBraceAttrs, expandSelfClosing, scopeCss, hashString, propType, simplePathRE, fnExpRE, forAliasRE, makeKreftDef, compileFn, evaluate, stripTypeScript, stripTsParams },
   });
 
   if (typeof module !== 'undefined' && module.exports) module.exports = Kreftjs;
   global.Kreftjs = Kreftjs;
   global.Kreft = Kreftjs; // the shorter name, kept as an alias
-  global.Som = Kreftjs; // Som.js name, kept so older code keeps working (deprecated: use Kreftjs)
 })(typeof window !== 'undefined' ? window : globalThis);

package/templates/app/frontend/layouts/{app.kreftjs → app.kreft}

@@ -11,6 +11,7 @@ state remainingMinutes = 5
 state inactivityTimer = null
 
 // SVG vector icon paths (24x24)
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
 state icons = {
   dashboard: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
   users: 'M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1M9.5 10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M21 19v-1a4 4 0 0 0-3-3.87M15.5 3.13a3.5 3.5 0 0 1 0 6.75',
@@ -33,7 +34,7 @@ state navGroups = [
   { label: 'Platform', links: [
     { to: 'welcome', label: 'Showcase', icon: 'showcase' },
     { to: 'error-monitor', label: 'Error Monitor', icon: 'panel' },
-    { to: 'docs', label: 'Documentation', icon: 'docs' },
+    { docs: '/docs', label: 'Documentation', icon: 'docs' },
     { to: 'tests.index', label: 'Test Suite', icon: 'tests' },
   ] },
 ]
@@ -130,7 +131,12 @@ action extendSession() {
             <ul class="nav-list">
               {for link in group.links}
                 <li>
+                  <a k-if="link.docs" href={docs + link.docs} target="_blank" rel="noopener" title={collapsed ? link.label : null} class="nav-item">
+                    <svg viewBox="0 0 24 24" aria-hidden="true" class="nav-icon"><path d={icons[link.icon] || icons.panel}></path></svg>
+                    <span class="nav-label">{link.label}</span>
+                  </a>
                   <kreft-link
+                    k-else
                     to={link.to}
                     exact-class={link.exact ? 'active-link' : 'kreft-link-exact'}
                     active-class={link.exact ? 'kreft-link-active' : 'active-link'}

package/templates/app/frontend/layouts/{docs.kreftjs → docs.kreft}

@@ -1,5 +1,5 @@
 <!-- The layout of the documentation page (/docs): a slim top bar and the page, without the dashboard sidebar.
-     The route asks for it with .layout('docs') in routes/web.kreftjs. The documentation viewer (docs/Docs.kreftjs)
+     The route asks for it with .layout('docs') in routes/web.kreft. The documentation viewer (docs/Docs.kreft)
      assumes a bar this tall (60px) above it. -->
 <view>
   <header>

package/templates/app/frontend/pages/{Dashboard.kreftjs → Dashboard.kreft}

@@ -5,6 +5,8 @@
 load stats = api.get('/api/admin/stats')
 load board = api.get('/api/dashboard')
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
+
 <view>
   <div class="dashboard-page">
     <div class="dashboard-header">
@@ -110,7 +112,7 @@ load board = api.get('/api/dashboard')
         <div class="info-list">
           <div class="info-item">
             <span class="info-label">Framework Engine</span>
-            <span class="info-value">Kreft {Kreftjs.version || '0.0.6-beta'}</span>
+            <span class="info-value">Kreft {Kreftjs.version || '0.0.9-beta'}</span>
           </div>
           <div class="info-item">
             <span class="info-label">Active Database</span>
@@ -128,7 +130,7 @@ load board = api.get('/api/dashboard')
 
         <div class="quick-nav-group">
           <kreft-link to="/profile" class="btn secondary sm w-full">Edit Profile Settings</kreft-link>
-          <kreft-link to="/docs" class="btn ghost sm w-full">API Documentation</kreft-link>
+          <a href={docs + '/docs'} class="btn ghost sm w-full" target="_blank" rel="noopener">API Documentation</a>
           <kreft-link to="/welcome" class="btn ghost sm w-full">Landing Page Showcase</kreft-link>
         </div>
       </section>

package/templates/app/frontend/pages/{ErrorMonitor.kreftjs → ErrorMonitor.kreft}

@@ -1,8 +1,8 @@
 <!--
   ErrorMonitor Page — Interactive Kreft Diagnostic Inspector Showcase
-  Uses Kreft's own minimalist geometric UI and authentic JavaScript/.kreftjs stack traces.
+  Uses Kreft's own minimalist geometric UI and authentic JavaScript/.kreft stack traces.
 -->
-import ErrorMonitor from '../errors/ErrorMonitor.kreftjs'
+import ErrorMonitor from '../errors/ErrorMonitor.kreft'
 
 state scenario = 'method'
 

package/templates/app/frontend/pages/{Home.kreftjs → Home.kreft}

@@ -1,11 +1,12 @@
 <!-- The welcome page: what Kreft is, shown with a component that runs right here.
-     routes/web.kreftjs gives it no layout, so the bar and the footer are part of this page. -->
+     routes/web.kreft gives it no layout, so the bar and the footer are part of this page. -->
 
 state name = 'Enterprise User'
 state count = 0
 state copied = false
 derive double = count * 2
 
+state docs = (Kreftjs.env.PUBLIC_DOCS_URL || 'http://kreftjs.com').replace(/\/+$/, '')   // where "Documentation" links go: PUBLIC_DOCS_URL in .env
 state words = [
   { word: 'state', says: 'a value that can change', to: '/docs#components-and-the-kreftjs-file' },
   { word: 'saved', says: 'a value kept after a reload', to: '/docs#saving-data-in-the-browser' },
@@ -49,7 +50,7 @@ action copy() {
     <header class="site-bar">
       <kreft-link to="/" class="site-brand"><span class="site-mark" aria-hidden="true"></span>{env.PUBLIC_APP_NAME || 'Kreft'}</kreft-link>
       <nav class="site-nav">
-        <kreft-link to="/docs">Documentation</kreft-link>
+        <a href={docs + '/docs'} target="_blank" rel="noopener">Documentation</a>
         <kreft-link k-if="$store.auth.user" to="/dashboard">Dashboard</kreft-link>
         <kreft-link k-if="!$store.auth.user" to="/login">Log in</kreft-link>
         <kreft-link k-if="!$store.auth.user" to="/register" class="site-cta">Sign up</kreft-link>
@@ -77,10 +78,10 @@ action copy() {
 
         <!-- CTA Buttons -->
         <div class="cta-actions">
-          <kreft-link to="/docs" class="pill-btn primary">Read the docs</kreft-link>
+          <a href={docs + '/docs'} class="pill-btn primary" target="_blank" rel="noopener">Read the docs</a>
           <kreft-link k-if="$store.auth.user" to="/dashboard" class="pill-btn ghost">Open dashboard</kreft-link>
           <kreft-link k-if="!$store.auth.user" to="/register" class="pill-btn ghost">Sign up</kreft-link>
-          <kreft-link to="/docs#your-first-app" class="pill-btn ghost">Quick start</kreft-link>
+          <a href={docs + '/docs#your-first-app'} class="pill-btn ghost" target="_blank" rel="noopener">Quick start</a>
         </div>
 
         <!-- Badges Row -->
@@ -102,7 +103,7 @@ action copy() {
               <span class="mac-dot yellow"></span>
               <span class="mac-dot green"></span>
             </div>
-            <span class="tab-title">Hello.ts.kreftjs</span>
+            <span class="tab-title">Hello.ts.kreft</span>
             <div class="terminal-bar-end"></div>
           </div>
 
@@ -177,7 +178,7 @@ action copy() {
       <h2>The whole language fits on one screen</h2>
       <dl>
         {for w in words key w.word}
-          <div><dt><kreft-link to={w.to}>{w.word}</kreft-link></dt><dd>{w.says}</dd></div>
+          <div><dt><a href={docs + w.to} target="_blank" rel="noopener">{w.word}</a></dt><dd>{w.says}</dd></div>
         {/for}
       </dl>
     </section>
@@ -186,7 +187,7 @@ action copy() {
       <h2>Also in the box</h2>
       <ul>
         {for p in parts key p.title}
-          <li><kreft-link to={p.to}><strong>{p.title}</strong><span>{p.text}</span></kreft-link></li>
+          <li><a href={docs + p.to} target="_blank" rel="noopener"><strong>{p.title}</strong><span>{p.text}</span></a></li>
         {/for}
       </ul>
     </section>
@@ -197,12 +198,12 @@ action copy() {
         <code>kreft new my-app --db sqlite</code>
         <button class="sm" @click={copy} aria-label="Copy the command">{copied ? 'Copied' : 'Copy'}</button>
       </div>
-      <p>Then <code>cd my-app</code> and <code>npm run dev</code>. Coming from Vue? The <kreft-link to="/docs">docs</kreft-link> have a table with the Kreft name for every Vue feature.</p>
+      <p>Then <code>cd my-app</code> and <code>npm run dev</code>. Coming from Vue? The <a href={docs + '/docs'} target="_blank" rel="noopener">docs</a> have a table with the Kreft name for every Vue feature.</p>
     </section>
 
     <footer class="site-foot">
       <span>Kreft {Kreftjs.version}</span>
-      <kreft-link to="/docs">Docs</kreft-link>
+      <a href={docs + '/docs'} target="_blank" rel="noopener">Docs</a>
       <kreft-link to="/error-monitor">Error monitor</kreft-link>
     </footer>
   </div>

package/templates/app/frontend/pages/{Profile.kreftjs → Profile.kreft}

@@ -1,8 +1,8 @@
 <!-- /profile: name, email, password, two-factor, devices, API tokens, or delete the account
      (app/Http/Controllers/ProfileController.js and Auth/…) -->
-import TwoFactor from '../components/profile/TwoFactor.kreftjs'
-import Sessions from '../components/profile/Sessions.kreftjs'
-import ApiTokens from '../components/profile/ApiTokens.kreftjs'
+import TwoFactor from '../components/profile/TwoFactor.kreft'
+import Sessions from '../components/profile/Sessions.kreft'
+import ApiTokens from '../components/profile/ApiTokens.kreft'
 state info = form(
   { name: $store.auth.user ? $store.auth.user.name : '', email: $store.auth.user ? $store.auth.user.email : '' },
   { name: 'required|max:255', email: 'required|email|max:255' },

package/templates/app/frontend/routes/web.kreft

@@ -0,0 +1,34 @@
+// Application Web Routes.
+// Developers can attach custom auth guards directly: .middleware('auth', 'admin') or custom guards.
+
+// Public Welcome & Showcase Page (shows first with links to Sign Up, Log In, Docs)
+Route.view('/', 'pages/Home.kreft').layout('none').name('home').title('Welcome')
+Route.view('/welcome', 'pages/Home.kreft').layout('none').name('welcome').title('Welcome')
+
+// Protected Dashboard & management pages (requires signed-in user)
+Route.middleware('auth').group(() => {
+  Route.view('/dashboard', 'pages/Dashboard.kreft').name('dashboard').title('Dashboard')
+  Route.view('/users', 'pages/Users.kreft').name('users').title('Users')
+  Route.view('/profile', 'pages/Profile.kreft').name('profile').title('Profile')
+})
+
+// Authentication routes (pages/auth/), wrapped in guest layout
+Route.layout('guest').group(() => {
+  Route.middleware('guest').group(() => {
+    Route.view('/login', 'pages/auth/Login.kreft').name('login').title('Log In')
+    Route.view('/register', 'pages/auth/Register.kreft').name('register').title('Register')
+    Route.view('/forgot-password', 'pages/auth/ForgotPassword.kreft').name('password.request').title('Forgot Password')
+  })
+  Route.view('/reset-password/:token', 'pages/auth/ResetPassword.kreft').name('password.reset').title('Reset Password')
+  Route.view('/verify-email/:id?/:hash?', 'pages/auth/VerifyEmail.kreft').name('verification.notice').title('Verify Email')
+  Route.view('/confirm-password', 'pages/auth/ConfirmPassword.kreft').name('password.confirm').title('Confirm Password').middleware('auth')
+})
+
+// Documentation (docs/) and test suite (tests/)
+Route.view('/docs', 'docs/Docs.kreft').name('docs').title('Documentation').layout('docs')   // its own slim bar, not the dashboard sidebar
+Route.view('/error-monitor', 'pages/ErrorMonitor.kreft').name('error-monitor').title('Error Monitor')
+Route.prefix('/tests').name('tests.').group(() => {
+  Route.view('/', 'tests/pages/Test.kreft').name('index').title('Test Suite')
+  Route.view('/about', 'tests/pages/About.kreft').name('about').title('About · Tests')
+})
+

package/templates/app/frontend/tests/components/{Counter.kreftjs → Counter.kreft}

@@ -1,4 +1,4 @@
-<!-- A test component: a button that counts. Used by tests/pages/Test.kreftjs as <counter>. -->
+<!-- A test component: a button that counts. Used by tests/pages/Test.kreft as <counter>. -->
 prop start = 0
 
 state count = start