zero-query 0.5.2 → 0.7.5

package/cli/commands/dev/watcher.js

@@ -0,0 +1,147 @@
+/**
+ * cli/commands/dev/watcher.js — File system watcher
+ *
+ * Recursively watches the project root for file changes, validates
+ * JS files for syntax errors, and broadcasts reload / CSS hot-swap /
+ * error events through the SSE pool.
+ */
+
+'use strict';
+
+const fs   = require('fs');
+const path = require('path');
+
+const { validateJS }                      = require('./validator');
+const { logCSS, logReload, logError }     = require('./logger');
+
+const IGNORE_DIRS = new Set(['node_modules', '.git', 'dist', '.cache']);
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function shouldWatch(filename) {
+  return !!filename && !filename.startsWith('.');
+}
+
+function isIgnored(filepath) {
+  return filepath.split(path.sep).some(p => IGNORE_DIRS.has(p));
+}
+
+/**
+ * Return the file's mtime as a millisecond timestamp, or 0 if unreadable.
+ * Used to ignore spurious fs.watch events (Windows fires on reads too).
+ */
+function mtime(filepath) {
+  try { return fs.statSync(filepath).mtimeMs; } catch { return 0; }
+}
+
+/** Recursively collect every directory under `dir` (excluding ignored). */
+function collectWatchDirs(dir) {
+  const dirs = [dir];
+  try {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (!entry.isDirectory() || IGNORE_DIRS.has(entry.name)) continue;
+      dirs.push(...collectWatchDirs(path.join(dir, entry.name)));
+    }
+  } catch { /* unreadable dir — skip */ }
+  return dirs;
+}
+
+// ---------------------------------------------------------------------------
+// Watcher factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Start watching `root` for file changes.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.root  — absolute project root
+ * @param {SSEPool} opts.pool  — SSE broadcast pool
+ * @returns {{ dirs: string[], destroy: Function }}
+ */
+function startWatcher({ root, pool }) {
+  const watchDirs = collectWatchDirs(root);
+  const watchers  = [];
+
+  let debounceTimer;
+  let currentError = null;   // track which file has an active error
+
+  // Track file mtimes so we only react to genuine writes.
+  // On Windows, fs.watch fires on reads/access too, which causes
+  // spurious reloads the first time the server serves a file.
+  // We seed the cache with current mtimes so the first real save
+  // (which changes the mtime) is always detected.
+  const mtimeCache = new Map();
+  for (const d of watchDirs) {
+    try {
+      for (const entry of fs.readdirSync(d, { withFileTypes: true })) {
+        if (entry.isFile()) {
+          const fp = path.join(d, entry.name);
+          const mt = mtime(fp);
+          if (mt) mtimeCache.set(fp, mt);
+        }
+      }
+    } catch { /* skip */ }
+  }
+
+  for (const dir of watchDirs) {
+    try {
+      const watcher = fs.watch(dir, (_, filename) => {
+        if (!shouldWatch(filename)) return;
+        const fullPath = path.join(dir, filename || '');
+        if (isIgnored(fullPath)) return;
+
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          // Skip if the file hasn't actually been modified
+          const mt = mtime(fullPath);
+          if (mt === 0) return;                 // deleted or unreadable
+          const prev = mtimeCache.get(fullPath);
+          mtimeCache.set(fullPath, mt);
+          if (prev !== undefined && mt === prev) return; // unchanged
+
+          const rel = path.relative(root, fullPath).replace(/\\/g, '/');
+          const ext = path.extname(filename).toLowerCase();
+
+          // ---- CSS hot-swap ----
+          if (ext === '.css') {
+            logCSS(rel);
+            pool.broadcast('css', rel);
+            return;
+          }
+
+          // ---- JS syntax check ----
+          if (ext === '.js') {
+            const err = validateJS(fullPath, rel);
+            if (err) {
+              currentError = rel;
+              logError(err);
+              pool.broadcast('error:syntax', JSON.stringify(err));
+              return;
+            }
+            // File was fixed — clear previous overlay
+            if (currentError === rel) {
+              currentError = null;
+              pool.broadcast('error:clear', '');
+            }
+          }
+
+          // ---- Full reload ----
+          logReload(rel);
+          pool.broadcast('reload', rel);
+        }, 100);
+      });
+      watchers.push(watcher);
+    } catch { /* dir became inaccessible — skip */ }
+  }
+
+  function destroy() {
+    clearTimeout(debounceTimer);
+    watchers.forEach(w => w.close());
+  }
+
+  return { dirs: watchDirs, destroy };
+}
+
+module.exports = { startWatcher, collectWatchDirs };

package/cli/scaffold/index.html

@@ -6,6 +6,7 @@
   <title>{{NAME}}</title>
   <base href="/">
   <link rel="stylesheet" href="styles/styles.css">
+  <link rel="icon" type="image/png" href="favicon.ico">
   <script src="scripts/vendor/zquery.min.js"></script>
   <script type="module" src="scripts/app.js"></script>
 </head>

package/cli/scaffold/scripts/app.js

@@ -27,7 +27,7 @@ const router = $.router({
 // Highlight the active nav link on every route change
 router.onChange((to) => {
   $.all('.nav-link').removeClass('active');
-  $.all(`.nav-link[z-link="${to.path}"]`).addClass('active');
+  $(`.nav-link[z-link="${to.path}"]`).addClass('active');
 
   // Close mobile menu on navigate
   closeMobileMenu();
@@ -36,26 +36,20 @@ router.onChange((to) => {
 // ---------------------------------------------------------------------------
 // Responsive sidebar toggle
 // ---------------------------------------------------------------------------
-const sidebar = $.id('sidebar');
-const overlay = $.id('overlay');
-const toggle  = $.id('menu-toggle');
+const $sidebar = $('#sidebar');
+const $overlay = $('#overlay');
+const $toggle  = $('#menu-toggle');
 
-function openMobileMenu() {
-  sidebar.classList.add('open');
-  overlay.classList.add('visible');
-  toggle.classList.add('active');
+function toggleMobileMenu(open) {
+  $sidebar.toggleClass('open', open);
+  $overlay.toggleClass('visible', open);
+  $toggle.toggleClass('active', open);
 }
 
-function closeMobileMenu() {
-  sidebar.classList.remove('open');
-  overlay.classList.remove('visible');
-  toggle.classList.remove('active');
-}
+function closeMobileMenu() { toggleMobileMenu(false); }
 
 // $.on — global delegated event listeners
-$.on('click', '#menu-toggle', () => {
-  sidebar.classList.contains('open') ? closeMobileMenu() : openMobileMenu();
-});
+$.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
 $.on('click', '#overlay', closeMobileMenu);
 
 // Close sidebar on Escape key — using $.on direct (no selector needed)
@@ -69,14 +63,13 @@ $.on('keydown', (e) => {
 // Any component can emit: $.bus.emit('toast', { message, type })
 // Types: 'success', 'error', 'info'
 $.bus.on('toast', ({ message, type = 'info' }) => {
-  const container = $.id('toasts');
-  const toast = $.create('div');
-  toast.className = `toast toast-${type}`;
-  toast.textContent = message;
-  container.appendChild(toast);
+  const toast = $.create('div')
+    .addClass('toast', `toast-${type}`)
+    .text(message)
+    .appendTo('#toasts');
   // Auto-remove after 3 seconds
   setTimeout(() => {
-    toast.classList.add('toast-exit');
+    toast.addClass('toast-exit');
     setTimeout(() => toast.remove(), 300);
   }, 3000);
 });

package/cli/scaffold/scripts/components/about.js

@@ -46,6 +46,18 @@ $.component('about-page', {
             <strong>$.component()</strong>
             <span>Reactive components with state, lifecycle hooks, and template rendering</span>
           </div>
+          <div class="feature-item">
+            <strong>computed / watch</strong>
+            <span>Derived state properties and reactive watchers on the counter page</span>
+          </div>
+          <div class="feature-item">
+            <strong>DOM Diffing</strong>
+            <span>Efficient <code>morph()</code> engine patches only changed DOM nodes on re-render</span>
+          </div>
+          <div class="feature-item">
+            <strong>z-key</strong>
+            <span>Keyed list reconciliation in z-for loops (todos, counter history, contacts)</span>
+          </div>
           <div class="feature-item">
             <strong>$.router()</strong>
             <span>SPA routing with history mode, z-link navigation, and fallback pages</span>
@@ -79,8 +91,8 @@ $.component('about-page', {
             <span>Safe rendering of user-generated and API content</span>
           </div>
           <div class="feature-item">
-            <strong>$.uuid()</strong>
-            <span>Unique ID generation for new todo items</span>
+            <strong>CSP-safe expressions</strong>
+            <span>Template expressions evaluated without <code>eval()</code> or <code>new Function()</code></span>
           </div>
           <div class="feature-item">
             <strong>z-model / z-ref</strong>

package/cli/scaffold/scripts/components/contacts/contacts.css

@@ -216,13 +216,6 @@
   font-weight: 500;
 }
 
-@keyframes slide-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-}
-
-/* -- Animation -- */
 @keyframes slide-in {
   from { opacity: 0; transform: translateY(-6px); }
   to   { opacity: 1; transform: translateY(0); }

package/cli/scaffold/scripts/components/contacts/contacts.html

@@ -13,7 +13,7 @@
   <h1>Contacts</h1>
   <p class="subtitle">
     External template &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>.
-    Directives: <code>z-if</code>, <code>z-for</code>, <code>z-show</code>,
+    Directives: <code>z-if</code>, <code>z-for</code> + <code>z-key</code>, <code>z-show</code>,
     <code>z-bind</code>, <code>z-class</code>, <code>z-model</code>, and more.
   </p>
 </div>
@@ -68,11 +68,12 @@
 </div>
 
 <!-- Contact count -->
-<div class="card" z-if="contacts.length > 0">
+<div class="card" z-if="contacts.length > 0" z-key="contacts-list">
   <!-- Contacts list — z-for renders each item -->
   <ul class="contacts-list">
     <li
       z-for="contact in contacts"
+      z-key="{{contact.id}}"
       class="contacts-item {{contact.id === selectedId ? 'selected' : ''}} {{contact.favorite ? 'is-favorite' : ''}}"
       @click="selectContact({{contact.id}})"
     >
@@ -101,25 +102,25 @@
 </div>
 
 <!-- Empty state -->
-<div class="card" z-else>
+<div class="card" z-else z-key="contacts-empty">
   <div class="empty-state">
     <p>No contacts yet — add one above!</p>
   </div>
 </div>
 
 <!-- Selected contact detail panel — z-if conditional rendering -->
-<div class="card contact-detail" z-if="selectedId !== null">
+<div class="card contact-detail" z-if="selectedId !== null" z-key="contact-detail">
   <div class="detail-header">
     <div>
-      <h3 z-text="contacts.find(c => c.id === selectedId)?.name || ''"></h3>
-      <p class="muted" z-text="contacts.find(c => c.id === selectedId)?.email || ''"></p>
+      <h3 z-text="selectedName"></h3>
+      <p class="muted" z-text="selectedEmail"></p>
     </div>
     <div class="detail-actions">
       <button
         class="btn btn-outline btn-sm"
         @click="cycleStatus({{selectedId}})"
       >
-        Status: <span z-text="contacts.find(c => c.id === selectedId)?.status || ''"></span>
+        Status: <span z-text="selectedStatus"></span>
       </button>
 
       <!-- Confirm delete pattern using z-if / z-else -->

package/cli/scaffold/scripts/components/contacts/contacts.js

@@ -23,6 +23,9 @@ $.component('contacts-page', {
     nameError: '',
     emailError: '',
     selectedId: null,
+    selectedName: '',
+    selectedEmail: '',
+    selectedStatus: '',
     confirmDeleteId: null,
     totalAdded: 0,
     favoriteCount: 0,
@@ -42,6 +45,7 @@ $.component('contacts-page', {
     this.state.contacts      = store.state.contacts;
     this.state.totalAdded    = store.state.contactsAdded;
     this.state.favoriteCount = store.getters.favoriteCount;
+    this._syncSelected();
   },
 
   // -- Actions --
@@ -101,8 +105,10 @@ $.component('contacts-page', {
   },
 
   selectContact(id) {
-    this.state.selectedId = this.state.selectedId === Number(id) ? null : Number(id);
+    const numId = Number(id);
+    this.state.selectedId = this.state.selectedId === numId ? null : numId;
     this.state.confirmDeleteId = null;
+    this._syncSelected();
   },
 
   confirmDelete(id) {
@@ -125,6 +131,16 @@ $.component('contacts-page', {
 
   cycleStatus(id) {
     $.getStore('main').dispatch('cycleContactStatus', Number(id));
+    this._syncSelected();
+  },
+
+  _syncSelected() {
+    const c = this.state.selectedId != null
+      ? this.state.contacts.find(c => c.id === this.state.selectedId)
+      : null;
+    this.state.selectedName   = c ? c.name : '';
+    this.state.selectedEmail  = c ? c.email : '';
+    this.state.selectedStatus = c ? c.status : '';
   },
 
   _clearForm() {

package/cli/scaffold/scripts/components/counter.js

@@ -1,8 +1,9 @@
 // scripts/components/counter.js — interactive counter
 //
-// Demonstrates: component state, instance methods, @click event binding,
-//               z-model two-way binding with z-number modifier, z-class,
-//               z-if, z-for, $.bus toast notifications
+// Demonstrates: component state, computed properties, watch callbacks,
+//               @click event binding, z-model two-way binding with
+//               z-number modifier, z-class, z-if, z-for with z-key,
+//               $.bus toast notifications
 
 $.component('counter-page', {
   state: () => ({
@@ -11,16 +12,35 @@ $.component('counter-page', {
     history: [],
   }),
 
+  // Computed properties — derived values that update automatically
+  computed: {
+    isNegative: (state) => state.count < 0,
+    historyCount: (state) => state.history.length,
+    lastAction: (state) => state.history.length ? state.history[state.history.length - 1] : null,
+  },
+
+  // Watch — react to specific state changes
+  watch: {
+    count(val) {
+      if (val === 100) $.bus.emit('toast', { message: 'Century! 🎉', type: 'success' });
+      if (val === -100) $.bus.emit('toast', { message: 'Negative century!', type: 'error' });
+    },
+  },
+
   increment() {
     this.state.count += this.state.step;
-    this.state.history.push({ action: '+', value: this.state.step, result: this.state.count });
-    if (this.state.history.length > 8) this.state.history.shift();
+    this._pushHistory('+', this.state.step, this.state.count);
   },
 
   decrement() {
     this.state.count -= this.state.step;
-    this.state.history.push({ action: '−', value: this.state.step, result: this.state.count });
-    if (this.state.history.length > 8) this.state.history.shift();
+    this._pushHistory('−', this.state.step, this.state.count);
+  },
+
+  _pushHistory(action, value, result) {
+    const raw = this.state.history.__raw || this.state.history;
+    const next = [...raw, { id: Date.now(), action, value, result }];
+    this.state.history = next.length > 8 ? next.slice(-8) : next;
   },
 
   reset() {
@@ -33,7 +53,7 @@ $.component('counter-page', {
     return `
       <div class="page-header">
         <h1>Counter</h1>
-        <p class="subtitle">Component state, <code>@click</code> handlers, <code>z-model</code>, <code>z-class</code>, and <code>z-for</code>.</p>
+        <p class="subtitle"><code>computed</code>, <code>watch</code>, <code>@click</code>, <code>z-model</code>, <code>z-class</code>, and <code>z-for</code> with <code>z-key</code>.</p>
       </div>
 
       <div class="card counter-card">
@@ -55,9 +75,9 @@ $.component('counter-page', {
       </div>
 
       <div class="card card-muted" z-if="history.length > 0">
-        <h3>History</h3>
+        <h3>History <small style="color:var(--text-muted);font-weight:400;">(${this.computed.historyCount} entries)</small></h3>
         <div class="history-list">
-          <span z-for="e in history" class="history-item">{{e.action}}{{e.value}} → <strong>{{e.result}}</strong></span>
+          <span z-for="e in history" z-key="{{e.id}}" class="history-item">{{e.action}}{{e.value}} → <strong>{{e.result}}</strong></span>
         </div>
       </div>
     `;

package/cli/scaffold/scripts/components/home.js

@@ -62,19 +62,19 @@ $.component('home-page', {
 
         <div class="card">
           <h3>🔢 Counter</h3>
-          <p>Component state, two-way binding with <code>z-model</code>, and event handling.</p>
+          <p><code>computed</code> properties, <code>watch</code> callbacks, and <code>z-for</code> with <code>z-key</code> diffing.</p>
           <a z-link="/counter" class="btn btn-outline">Try It →</a>
         </div>
 
         <div class="card">
           <h3>✅ Todos</h3>
-          <p>Global store with actions & getters. <strong>${store.getters.todoCount}</strong> items, <strong>${store.getters.doneCount}</strong> done.</p>
+          <p>Global store, <code>z-key</code> keyed lists, DOM diffing. <strong>${store.getters.todoCount}</strong> items, <strong>${store.getters.doneCount}</strong> done.</p>
           <a z-link="/todos" class="btn btn-outline">Try It →</a>
         </div>
 
         <div class="card">
           <h3>📇 Contacts</h3>
-          <p>External templates &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>. <strong>${store.getters.contactCount}</strong> contacts, <strong>${store.getters.favoriteCount}</strong> ★ favorited.</p>
+          <p>External templates, scoped styles, and <code>z-key</code> keyed lists. <strong>${store.getters.contactCount}</strong> contacts, <strong>${store.getters.favoriteCount}</strong> ★ favorited.</p>
           <a z-link="/contacts" class="btn btn-outline">Try It →</a>
         </div>
 

package/cli/scaffold/scripts/components/todos.js

@@ -1,9 +1,10 @@
 // scripts/components/todos.js — todo list with global store
 //
 // Demonstrates: $.getStore, store.dispatch, store.subscribe,
-//               store getters, z-model, z-ref, z-class, z-for,
-//               z-if, z-show, @click with args, @submit.prevent,
-//               mounted/destroyed lifecycle, $.bus toast, $.debounce
+//               store getters, computed properties, z-model, z-ref,
+//               z-class, z-for with z-key, z-if, z-show, @click
+//               with args, @submit.prevent, mounted/destroyed
+//               lifecycle, $.bus toast, $.debounce
 
 $.component('todos-page', {
   state: () => ({
@@ -83,7 +84,7 @@ $.component('todos-page', {
     return `
       <div class="page-header">
         <h1>Todos</h1>
-        <p class="subtitle">Global store with <code>$.store()</code>, <code>z-for</code>, <code>z-class</code>, <code>z-if</code>, and <code>z-show</code>.</p>
+        <p class="subtitle">Global store with <code>$.store()</code>, <code>z-for</code> + <code>z-key</code>, <code>z-class</code>, <code>z-if</code>, and <code>z-show</code>.</p>
       </div>
 
       <div class="card">
@@ -114,7 +115,7 @@ $.component('todos-page', {
         </div>
 
         <ul z-else class="todo-list">
-          <li z-for="t in filtered" class="todo-item {{t.done ? 'done' : ''}}">
+          <li z-for="t in filtered" z-key="{{t.id}}" class="todo-item {{t.done ? 'done' : ''}}">
             <button class="todo-check" @click="toggleTodo('{{t.id}}')"></button>
             <span class="todo-text">{{$.escapeHtml(t.text)}}</span>
             <button class="todo-remove" @click="removeTodo('{{t.id}}')">✕</button>

package/cli/scaffold/styles/styles.css

@@ -103,6 +103,7 @@ code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-s
   transition: all 0.15s ease;
   border-left: 3px solid transparent;
   cursor: pointer;
+  user-select: none;
 }
 
 .nav-link:hover {

package/cli/utils.js

@@ -83,15 +83,120 @@ function stripComments(code) {
 }
 
 // ---------------------------------------------------------------------------
-// minify — quick minification (strips comments + collapses whitespace)
+// minify — single-pass minification
+//   Strips comments, collapses whitespace to the minimum required,
+//   and preserves string / template-literal / regex content verbatim.
 // ---------------------------------------------------------------------------
 
 function minify(code, banner) {
-  const body = stripComments(code.replace(banner, ''))
-    .replace(/^\s*\n/gm, '')
-    .replace(/\n\s+/g, '\n')
-    .replace(/\s{2,}/g, ' ');
-  return banner + '\n' + body;
+  return banner + '\n' + _minifyBody(code.replace(banner, ''));
+}
+
+/**
+ * Single-pass minifier: walks character-by-character, skips strings/regex,
+ * strips comments, and emits a space only when both neighbours are
+ * identifier-like characters (or when collapsing would create ++, --, // or /*).
+ */
+function _minifyBody(code) {
+  let out = '';
+  let i = 0;
+
+  while (i < code.length) {
+    const ch = code[i];
+    const nx = code[i + 1];
+
+    // ── String / template literal: copy verbatim ────────────────
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const q = ch;
+      out += ch; i++;
+      while (i < code.length) {
+        if (code[i] === '\\') { out += code[i] + (code[i + 1] || ''); i += 2; continue; }
+        out += code[i];
+        if (code[i] === q) { i++; break; }
+        i++;
+      }
+      continue;
+    }
+
+    // ── Block comment: skip ─────────────────────────────────────
+    if (ch === '/' && nx === '*') {
+      i += 2;
+      while (i < code.length && !(code[i] === '*' && code[i + 1] === '/')) i++;
+      i += 2;
+      continue;
+    }
+
+    // ── Line comment: skip ──────────────────────────────────────
+    if (ch === '/' && nx === '/') {
+      i += 2;
+      while (i < code.length && code[i] !== '\n') i++;
+      continue;
+    }
+
+    // ── Regex literal: copy verbatim ────────────────────────────
+    if (ch === '/') {
+      if (_isRegexCtx(out)) {
+        out += ch; i++;
+        let inCC = false;
+        while (i < code.length) {
+          const rc = code[i];
+          if (rc === '\\') { out += rc + (code[i + 1] || ''); i += 2; continue; }
+          if (rc === '[') inCC = true;
+          if (rc === ']') inCC = false;
+          out += rc; i++;
+          if (rc === '/' && !inCC) {
+            while (i < code.length && /[gimsuy]/.test(code[i])) { out += code[i]; i++; }
+            break;
+          }
+        }
+        continue;
+      }
+    }
+
+    // ── Whitespace: collapse ────────────────────────────────────
+    if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') {
+      while (i < code.length && (code[i] === ' ' || code[i] === '\t' || code[i] === '\n' || code[i] === '\r')) i++;
+      const before = out[out.length - 1];
+      const after  = code[i];
+      if (_needsSpace(before, after)) out += ' ';
+      continue;
+    }
+
+    out += ch;
+    i++;
+  }
+
+  return out;
+}
+
+/** True when removing the space between a and b would change semantics. */
+function _needsSpace(a, b) {
+  if (!a || !b) return false;
+  const idA = (a >= 'a' && a <= 'z') || (a >= 'A' && a <= 'Z') || (a >= '0' && a <= '9') || a === '_' || a === '$';
+  const idB = (b >= 'a' && b <= 'z') || (b >= 'A' && b <= 'Z') || (b >= '0' && b <= '9') || b === '_' || b === '$';
+  if (idA && idB) return true;   // e.g. const x, return value
+  if (a === '+' && b === '+') return true; // prevent ++
+  if (a === '-' && b === '-') return true; // prevent --
+  if (a === '/' && (b === '/' || b === '*')) return true; // prevent // or /*
+  return false;
+}
+
+/** Heuristic: is the next '/' a regex start (vs division)? */
+function _isRegexCtx(out) {
+  let end = out.length - 1;
+  while (end >= 0 && out[end] === ' ') end--;
+  if (end < 0) return true;
+  const last = out[end];
+  if ('=({[,;:!&|?~+-*/%^>'.includes(last)) return true;
+  const tail = out.substring(Math.max(0, end - 7), end + 1);
+  const kws = ['return', 'typeof', 'case', 'in', 'delete', 'void', 'throw', 'new'];
+  for (const kw of kws) {
+    if (tail.endsWith(kw)) {
+      const pos = end - kw.length;
+      if (pos < 0 || !((out[pos] >= 'a' && out[pos] <= 'z') || (out[pos] >= 'A' && out[pos] <= 'Z') || (out[pos] >= '0' && out[pos] <= '9') || out[pos] === '_' || out[pos] === '$')) return true;
+    }
+  }
+  return false;
 }
 
 // ---------------------------------------------------------------------------