bitwrench 2.0.15 → 2.0.17

package/src/bitwrench.js

@@ -80,7 +80,7 @@ const bw = {
   __monkey_patch_is_nodejs__: {
     _value: 'ignore',
     set: function(x) {
-      this._value = (typeof x === 'boolean') ? x : 'ignore';
+      this._value = _is(x, 'boolean') ? x : 'ignore';
     },
     get: function() {
       return this._value;
@@ -128,6 +128,67 @@ Object.defineProperty(bw, '_isBrowser', {
   configurable: true
 });
 
+// ── Internal aliases ─────────────────────────────────────────────────────
+// Short names for frequently-used builtins and internal methods.
+// Same pattern as v1 (_to = bw.typeOf, etc.).
+//
+// Why: Terser can't shorten global property chains (console.warn,
+// Object.prototype.hasOwnProperty, Array.isArray, document.createElement)
+// because it can't prove they're side-effect-free. We can, so we alias
+// them here. Each alias saves bytes in the minified output, and the short
+// names also reduce visual noise in the hot paths (binding pipeline,
+// createDOM, etc.).
+//
+// Alias       Target                                  Sites
+// ─────────   ──────────────────────────────────────   ─────
+// _hop        Object.prototype.hasOwnProperty          15
+// _isA        Array.isArray                             25
+// _keys       Object.keys                               7
+// _to         bw.typeOf (type string)                   26
+// _is         type check boolean: _is(x,'string')       ~50
+// _cw         console.warn                               8
+// _cl         console.log                               11
+// _ce         console.error                              4
+// _chp        ComponentHandle.prototype                 28  (defined after constructor)
+//
+// Note: document.createElement etc. are NOT aliased because they require
+// `this === document` and .bind() would add overhead on every call.
+// Console aliases use thin wrappers (not direct refs) so test monkey-
+// patching of console.warn/log/error continues to work.
+//
+// `typeof x` for UNDECLARED globals (window, document, process, require,
+// EventSource, navigator, Promise, __filename, import.meta) MUST stay as
+// raw `typeof` — calling _to(x) when x doesn't exist throws ReferenceError.
+//
+// ── v1 functional type helpers (kept for reference, not currently used) ──
+// _toa(x, type, trueVal, falseVal) — bw.typeAssign:
+//   returns trueVal if _to(x)===type, else falseVal.
+//   Replaces: (typeof x === 'string') ? A : B → _toa(x,'string',A,B)
+// _toc(x, type, trueVal, falseVal) — bw.typeConvert:
+//   same as _toa but if trueVal/falseVal are functions, calls them with x.
+//   Replaces: typeof x === 'string' ? fn(x) : default → _toc(x,'string',fn,default)
+// Uncomment if pattern frequency justifies them:
+// var _toa = function(x, t, y, n) { return _to(x) === t ? y : n; };
+// var _toc = function(x, t, y, n) { var r = _to(x)===t; return r ? (_to(y)==='function'?y(x):y) : (_to(n)==='function'?n(x):n); };
+// ─────────────────────────────────────────────────────────────────────────
+var _hop  = Object.prototype.hasOwnProperty;
+var _isA  = Array.isArray;
+var _keys = Object.keys;
+var _to   = _typeOf;  // imported from bitwrench-utils.js
+var _is   = function(x, t) { var r = _to(x); return r === t || r.toLowerCase() === t; };
+// Console aliases use thin wrappers (not direct references) so that test
+// code can monkey-patch console.warn/log/error and the patches take effect.
+var _cw   = function() { console.warn.apply(console, arguments); };
+var _cl   = function() { console.log.apply(console, arguments); };
+var _ce   = function() { console.error.apply(console, arguments); };
+
+/**
+ * Debug flag. When true, emits console.warn for silent binding failures
+ * (missing paths, null refs, auto-created intermediate objects).
+ * @type {boolean}
+ */
+bw.debug = false;
+
 /**
  * Lazy-resolve Node.js `fs` module.
  * Tries require('fs') first (available in CJS/UMD Node.js builds),
@@ -275,7 +336,7 @@ bw.uuid = function(prefix) {
  */
 bw._el = function(id) {
   // Pass-through for DOM elements
-  if (typeof id !== 'string') return id || null;
+  if (!_is(id, 'string')) return id || null;
   if (!id) return null;
   if (!bw._isBrowser) return null;
 
@@ -371,7 +432,7 @@ bw._deregisterNode = function(el, bwId) {
  * // => '<b>Hello</b> & "world"'
  */
 bw.escapeHTML = function(str) {
-  if (typeof str !== 'string') return '';
+  if (!_is(str, 'string')) return '';
   
   const escapeMap = {
     '&': '&',
@@ -444,7 +505,7 @@ bw.html = function(taco, options = {}) {
   }
 
   // Handle arrays of TACOs
-  if (Array.isArray(taco)) {
+  if (_isA(taco)) {
     return taco.map(t => bw.html(t, options)).join('');
   }
 
@@ -467,15 +528,15 @@ bw.html = function(taco, options = {}) {
   if (taco && taco._bwEach && options.state) {
     var eachExpr = taco.expr.replace(/^\$\{|\}$/g, '');
     var arr = bw._evaluatePath(options.state, eachExpr);
-    if (!Array.isArray(arr)) return '';
+    if (!_isA(arr)) return '';
     return arr.map(function(item, idx) { return bw.html(taco.factory(item, idx), options); }).join('');
   }
 
   // Handle primitives and non-TACO objects
-  if (typeof taco !== 'object' || !taco.t) {
+  if (!_is(taco, 'object') || !taco.t) {
     var str = options.raw ? String(taco) : bw.escapeHTML(String(taco));
     // Resolve template bindings if state provided
-    if (options.state && typeof str === 'string' && str.indexOf('${') >= 0) {
+    if (options.state && _is(str, 'string') && str.indexOf('${') >= 0) {
       str = bw._resolveTemplate(str, options.state, !!options.compile);
     }
     return str;
@@ -495,10 +556,18 @@ bw.html = function(taco, options = {}) {
     // Skip null, undefined, false
     if (value == null || value === false) continue;
     
-    // Skip event handlers (they're for DOM only)
-    if (key.startsWith('on')) continue;
+    // Serialize event handlers via funcRegister
+    if (key.startsWith('on')) {
+      if (_is(value, 'function')) {
+        var fnId = bw.funcRegister(value);
+        attrStr += ' ' + key + '="' + bw.funcGetDispatchStr(fnId, 'event') + '"';
+      } else if (_is(value, 'string')) {
+        attrStr += ' ' + key + '="' + bw.escapeHTML(value) + '"';
+      }
+      continue;
+    }
     
-    if (key === 'style' && typeof value === 'object') {
+    if (key === 'style' && _is(value, 'object')) {
       // Convert style object to string
       const styleStr = Object.entries(value)
         .filter(([, v]) => v != null)
@@ -509,7 +578,7 @@ bw.html = function(taco, options = {}) {
       }
     } else if (key === 'class') {
       // Handle class as array or string
-      const classStr = Array.isArray(value) ? value.filter(Boolean).join(' ') : String(value);
+      const classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
       if (classStr) {
         attrStr += ` class="${bw.escapeHTML(classStr)}"`;
       }
@@ -545,13 +614,184 @@ bw.html = function(taco, options = {}) {
   // Process content recursively
   let contentStr = content != null ? bw.html(content, options) : '';
   // Resolve template bindings in content if state provided
-  if (options.state && typeof contentStr === 'string' && contentStr.indexOf('${') >= 0) {
+  if (options.state && _is(contentStr, 'string') && contentStr.indexOf('${') >= 0) {
     contentStr = bw._resolveTemplate(contentStr, options.state, !!options.compile);
   }
 
   return `<${tag}${attrStr}>${contentStr}</${tag}>`;
 };
 
+/**
+ * Generate a complete, self-contained HTML document from TACO content.
+ *
+ * Produces a full `<!DOCTYPE html>` page with configurable runtime injection,
+ * func registry emission (so serialized event handlers work), optional theme,
+ * and extra head elements. Designed for static site generation, offline/airgapped
+ * use, and the "static site that isn't static" workflow.
+ *
+ * @param {Object} [opts={}] - Page options
+ * @param {Object|string|Array} [opts.body=''] - Body content: TACO, string, or array
+ * @param {string} [opts.title='bitwrench'] - Page title
+ * @param {Object} [opts.state] - State for ${expr} resolution in bw.html()
+ * @param {string} [opts.runtime='shim'] - Runtime level: 'inline'|'cdn'|'shim'|'none'
+ * @param {string} [opts.css=''] - Additional CSS for <style> block
+ * @param {string|Object} [opts.theme=null] - Theme preset name or config object
+ * @param {Array} [opts.head=[]] - Extra TACO elements rendered into <head>
+ * @param {string} [opts.favicon=''] - Favicon URL
+ * @param {string} [opts.lang='en'] - HTML lang attribute
+ * @returns {string} Complete HTML document string
+ * @category DOM Generation
+ * @see bw.html
+ * @example
+ * bw.htmlPage({
+ *   title: 'My App',
+ *   body: { t: 'h1', c: 'Hello World' },
+ *   runtime: 'shim'
+ * })
+ */
+bw.htmlPage = function(opts) {
+  opts = opts || {};
+  var title     = opts.title   || 'bitwrench';
+  var body      = opts.body    || '';
+  var state     = opts.state   || undefined;
+  var runtime   = opts.runtime || 'shim';
+  var css       = opts.css     || '';
+  var theme     = opts.theme   || null;
+  var headExtra = opts.head    || [];
+  var favicon   = opts.favicon || '';
+  var lang      = opts.lang    || 'en';
+
+  // Snapshot funcRegistry counter before rendering
+  var fnCounterBefore = bw._fnIDCounter;
+
+  // Render body content
+  var bodyHTML = '';
+  if (_is(body, 'string')) {
+    bodyHTML = body;
+  } else {
+    var htmlOpts = {};
+    if (state) htmlOpts.state = state;
+    bodyHTML = bw.html(body, htmlOpts);
+  }
+
+  // Collect functions registered during this render
+  var fnCounterAfter = bw._fnIDCounter;
+  var registryEntries = '';
+  for (var i = fnCounterBefore; i < fnCounterAfter; i++) {
+    var fnKey = 'bw_fn_' + i;
+    if (bw._fnRegistry[fnKey]) {
+      registryEntries += 'bw._fnRegistry[\'' + fnKey + '\']=' +
+        bw._fnRegistry[fnKey].toString() + ';\n';
+    }
+  }
+
+  // Build runtime script for <head>
+  var runtimeHead = '';
+  if (runtime === 'inline') {
+    // Read UMD bundle synchronously if in Node.js
+    var umdSource = null;
+    if (bw._isNode) {
+      try {
+        var fs = (typeof require === 'function') ? require('fs') : null;
+        var pathMod = (typeof require === 'function') ? require('path') : null;
+        if (fs && pathMod) {
+          // Resolve dist/ relative to this source file
+          var srcDir = '';
+          try { srcDir = pathMod.dirname((typeof __filename !== 'undefined') ? __filename : ''); }
+          catch(e2) { /* ESM: __filename not available */ }
+          if (!srcDir && typeof import.meta !== 'undefined' && import.meta.url) {
+            var url = (typeof require === 'function') ? require('url') : null;
+            if (url && url.fileURLToPath) srcDir = pathMod.dirname(url.fileURLToPath(import.meta.url));
+          }
+          if (srcDir) {
+            var distPath = pathMod.resolve(srcDir, '../dist/bitwrench.umd.min.js');
+            umdSource = fs.readFileSync(distPath, 'utf8');
+          }
+        }
+      } catch(e) { /* fall through */ }
+    }
+    if (umdSource) {
+      runtimeHead = '<script>' + umdSource + '</script>';
+    } else {
+      // Fallback to shim in browser or if dist not available
+      runtimeHead = '<script>' + bw._FUNC_REGISTRY_SHIM + '</script>';
+    }
+  } else if (runtime === 'cdn') {
+    runtimeHead = '<script src="https://cdn.jsdelivr.net/npm/bitwrench@2/dist/bitwrench.umd.min.js"></script>';
+  } else if (runtime === 'shim') {
+    runtimeHead = '<script>' + bw._FUNC_REGISTRY_SHIM + '</script>';
+  }
+  // runtime === 'none' → empty
+
+  // Theme CSS
+  var themeCSS = '';
+  if (theme) {
+    var themeConfig = _is(theme, 'string')
+      ? (THEME_PRESETS[theme.toLowerCase()] || null)
+      : theme;
+    if (themeConfig) {
+      var themeResult = bw.generateTheme('', Object.assign({}, themeConfig, { inject: false }));
+      themeCSS = themeResult.css;
+    }
+  }
+
+  // Extra <head> elements
+  var headHTML = '';
+  if (_isA(headExtra) && headExtra.length > 0) {
+    headHTML = headExtra.map(function(el) { return bw.html(el); }).join('\n');
+  }
+
+  // Favicon
+  var faviconTag = '';
+  if (favicon) {
+    var safeFavicon = favicon.replace(/[&<>"']/g, function(c) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
+    });
+    faviconTag = '<link rel="icon" href="' + safeFavicon + '">';
+  }
+
+  // Escaped title
+  var safeTitle = bw.escapeHTML(title);
+
+  // Combine all CSS
+  var allCSS = (themeCSS ? themeCSS + '\n' : '') + css;
+
+  // Body-end script: registry entries + optional loadDefaultStyles
+  var bodyEndScript = '';
+  var bodyEndParts = [];
+  if (registryEntries) {
+    bodyEndParts.push(registryEntries);
+  }
+  if (runtime === 'inline' || runtime === 'cdn') {
+    bodyEndParts.push('if(typeof bw!=="undefined"){bw.loadDefaultStyles();}');
+  }
+  if (bodyEndParts.length > 0) {
+    bodyEndScript = '<script>\n' + bodyEndParts.join('\n') + '\n</script>';
+  }
+
+  // Assemble document
+  var parts = [
+    '<!DOCTYPE html>',
+    '<html lang="' + lang + '">',
+    '<head>',
+    '<meta charset="UTF-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1">'
+  ];
+  parts.push('<title>' + safeTitle + '</title>');
+  if (faviconTag) parts.push(faviconTag);
+  if (runtimeHead) parts.push(runtimeHead);
+  if (headHTML) parts.push(headHTML);
+  if (allCSS) parts.push('<style>' + allCSS + '</style>');
+  parts.push('</head>');
+  parts.push('<body>');
+  parts.push(bodyHTML);
+  if (bodyEndScript) parts.push(bodyEndScript);
+  parts.push('</body>');
+  parts.push('</html>');
+
+  return parts.join('\n');
+};
+
 /**
  * Create a live DOM element from a TACO object (browser only).
  *
@@ -596,7 +836,7 @@ bw.createDOM = function(taco, options = {}) {
   }
 
   // Handle text nodes
-  if (typeof taco !== 'object' || !taco.t) {
+  if (!_is(taco, 'object') || !taco.t) {
     return document.createTextNode(String(taco));
   }
 
@@ -609,16 +849,16 @@ bw.createDOM = function(taco, options = {}) {
   for (const [key, value] of Object.entries(attrs)) {
     if (value == null || value === false) continue;
     
-    if (key === 'style' && typeof value === 'object') {
+    if (key === 'style' && _is(value, 'object')) {
       // Apply styles directly
       Object.assign(el.style, value);
     } else if (key === 'class') {
       // Handle class as array or string
-      const classStr = Array.isArray(value) ? value.filter(Boolean).join(' ') : String(value);
+      const classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
       if (classStr) {
         el.className = classStr;
       }
-    } else if (key.startsWith('on') && typeof value === 'function') {
+    } else if (key.startsWith('on') && _is(value, 'function')) {
       // Event handlers
       const eventName = key.slice(2).toLowerCase();
       el.addEventListener(eventName, value);
@@ -638,7 +878,7 @@ bw.createDOM = function(taco, options = {}) {
   // Children with data-bw_id or id attributes get local refs on the parent,
   // so o.render functions can access them without any DOM lookup.
   if (content != null) {
-    if (Array.isArray(content)) {
+    if (_isA(content)) {
       content.forEach(child => {
         if (child != null) {
           // Handle ComponentHandle in content arrays (Level 2 children)
@@ -658,20 +898,20 @@ bw.createDOM = function(taco, options = {}) {
           if (childEl._bw_refs) {
             if (!el._bw_refs) el._bw_refs = {};
             for (var rk in childEl._bw_refs) {
-              if (Object.prototype.hasOwnProperty.call(childEl._bw_refs, rk)) {
+              if (_hop.call(childEl._bw_refs, rk)) {
                 el._bw_refs[rk] = childEl._bw_refs[rk];
               }
             }
           }
         }
       });
-    } else if (typeof content === 'object' && content.__bw_raw) {
+    } else if (_is(content, 'object') && content.__bw_raw) {
       // Raw HTML content — inject via innerHTML
       el.innerHTML = content.v;
     } else if (content._bwComponent === true) {
       // Single ComponentHandle as content
       content.mount(el);
-    } else if (typeof content === 'object' && content.t) {
+    } else if (_is(content, 'object') && content.t) {
       var childEl = bw.createDOM(content, options);
       el.appendChild(childEl);
       var childBwId = content.a ? (content.a['data-bw_id'] || content.a.id) : null;
@@ -682,7 +922,7 @@ bw.createDOM = function(taco, options = {}) {
       if (childEl._bw_refs) {
         if (!el._bw_refs) el._bw_refs = {};
         for (var rk in childEl._bw_refs) {
-          if (Object.prototype.hasOwnProperty.call(childEl._bw_refs, rk)) {
+          if (_hop.call(childEl._bw_refs, rk)) {
             el._bw_refs[rk] = childEl._bw_refs[rk];
           }
         }
@@ -715,7 +955,7 @@ bw.createDOM = function(taco, options = {}) {
       el._bw_render = opts.render;
 
       if (opts.mounted) {
-        console.warn('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
+        _cw('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
       }
 
       // Queue initial render (same timing as mounted)
@@ -788,7 +1028,7 @@ bw.DOM = function(target, taco, options = {}) {
   const targetEl = bw._el(target);
     
   if (!targetEl) {
-    console.error('bw.DOM: Target element not found:', target);
+    _ce('bw.DOM: Target element not found:', target);
     return null;
   }
   
@@ -828,7 +1068,7 @@ bw.DOM = function(target, taco, options = {}) {
       targetEl.appendChild(taco.element);
     }
     // Handle arrays
-    else if (Array.isArray(taco)) {
+    else if (_isA(taco)) {
       taco.forEach(t => {
         if (t != null) {
           if (t._bwComponent === true) {
@@ -864,7 +1104,7 @@ bw.DOM = function(target, taco, options = {}) {
 bw.compileProps = function(handle, props = {}) {
   const compiledProps = {};
   
-  Object.keys(props).forEach(key => {
+  _keys(props).forEach(key => {
     // Create getter/setter for each prop
     Object.defineProperty(compiledProps, key, {
       get() {
@@ -1182,17 +1422,17 @@ bw.patch = function(id, content, attr) {
   if (attr) {
     // Patch an attribute
     el.setAttribute(attr, String(content));
-  } else if (Array.isArray(content)) {
+  } else if (_isA(content)) {
     // Patch with array of children (strings and/or TACOs)
     el.innerHTML = '';
     content.forEach(function(item) {
-      if (typeof item === 'string' || typeof item === 'number') {
+      if (_is(item, 'string') || _is(item, 'number')) {
         el.appendChild(document.createTextNode(String(item)));
       } else if (item && item.t) {
         el.appendChild(bw.createDOM(item));
       }
     });
-  } else if (typeof content === 'object' && content !== null && content.t) {
+  } else if (_is(content, 'object') && content.t) {
     // Patch with a TACO — replace children
     el.innerHTML = '';
     el.appendChild(bw.createDOM(content));
@@ -1223,7 +1463,7 @@ bw.patch = function(id, content, attr) {
 bw.patchAll = function(patches) {
   var results = {};
   for (var id in patches) {
-    if (Object.prototype.hasOwnProperty.call(patches, id)) {
+    if (_hop.call(patches, id)) {
       results[id] = bw.patch(id, patches[id]);
     }
   }
@@ -1320,7 +1560,7 @@ bw.pub = function(topic, detail) {
       snapshot[i].handler(detail);
       called++;
     } catch (err) {
-      console.warn('bw.pub: subscriber error on topic "' + topic + '":', err);
+      _cw('bw.pub: subscriber error on topic "' + topic + '":', err);
     }
   }
   return called;
@@ -1416,8 +1656,8 @@ bw._fnIDCounter = 0;
  * @see bw.funcGetDispatchStr
  */
 bw.funcRegister = function(fn, name) {
-  if (typeof fn !== 'function') return '';
-  var fnID = (typeof name === 'string' && name.length > 0) ? name : ('bw_fn_' + bw._fnIDCounter++);
+  if (!_is(fn, 'function')) return '';
+  var fnID = (_is(name, 'string') && name.length > 0) ? name : ('bw_fn_' + bw._fnIDCounter++);
   bw._fnRegistry[fnID] = fn;
   return fnID;
 };
@@ -1436,7 +1676,7 @@ bw.funcRegister = function(fn, name) {
 bw.funcGetById = function(name, errFn) {
   name = String(name);
   if (name in bw._fnRegistry) return bw._fnRegistry[name];
-  return (typeof errFn === 'function') ? errFn : function() { console.warn('bw.funcGetById: unregistered fn "' + name + '"'); };
+  return _is(errFn, 'function') ? errFn : function() { _cw('bw.funcGetById: unregistered fn "' + name + '"'); };
 };
 
 /**
@@ -1477,13 +1717,30 @@ bw.funcUnregister = function(name) {
 bw.funcGetRegistry = function() {
   var copy = {};
   for (var k in bw._fnRegistry) {
-    if (Object.prototype.hasOwnProperty.call(bw._fnRegistry, k)) {
+    if (_hop.call(bw._fnRegistry, k)) {
       copy[k] = bw._fnRegistry[k];
     }
   }
   return copy;
 };
 
+/**
+ * Minimal runtime shim for funcRegister dispatch in static HTML.
+ * When embedded in a `<script>` tag, provides just enough infrastructure
+ * for `bw.funcGetById()` calls to resolve. The actual function bodies
+ * are emitted separately as `bw._fnRegistry['bw_fn_X'] = ...;` assignments.
+ * @type {string}
+ * @category Function Registry
+ */
+bw._FUNC_REGISTRY_SHIM = '(function(){var bw=window.bw||(window.bw={});' +
+  'if(!bw._fnRegistry)bw._fnRegistry={};' +
+  'bw.funcGetById=function(n){return bw._fnRegistry[n]||function(){' +
+  'console.warn("bw: unregistered fn "+n)};};' +
+  'bw.funcRegister=function(fn,name){' +
+  'var id=name||("bw_fn_"+(bw._fnIDCounter=(bw._fnIDCounter||0)+1));' +
+  'bw._fnRegistry[id]=fn;return id;};' +
+  'window.bw=bw;})();';
+
 // ===================================================================================
 // Template Binding Utilities
 // ===================================================================================
@@ -1511,7 +1768,10 @@ bw._evaluatePath = function(state, path) {
   var parts = path.split('.');
   var val = state;
   for (var i = 0; i < parts.length; i++) {
-    if (val == null) return '';
+    if (val == null) {
+      if (bw.debug) _cw('bw.debug: _evaluatePath — null at key "' + parts[i] + '" in path "' + path + '"');
+      return '';
+    }
     val = val[parts[i]];
   }
   return (val == null) ? '' : val;
@@ -1531,7 +1791,7 @@ bw._evaluatePath = function(state, path) {
  */
 bw._compiledExprs = {};
 bw._resolveTemplate = function(str, state, compile) {
-  if (typeof str !== 'string' || str.indexOf('${') < 0) return str;
+  if (!_is(str, 'string') || str.indexOf('${') < 0) return str;
   var bindings = bw._parseBindings(str);
   if (bindings.length === 0) return str;
 
@@ -1553,6 +1813,7 @@ bw._resolveTemplate = function(str, state, compile) {
       try {
         val = bw._compiledExprs[b.expr](state);
       } catch (e) {
+        if (bw.debug) _cw('bw.debug: _resolveTemplate — Tier 2 eval failed for "${' + b.expr + '}":', e.message);
         val = '';
       }
     } else {
@@ -1661,7 +1922,7 @@ function ComponentHandle(taco) {
   this._state = {};
   if (o.state) {
     for (var k in o.state) {
-      if (Object.prototype.hasOwnProperty.call(o.state, k)) {
+      if (_hop.call(o.state, k)) {
         this._state[k] = o.state[k];
       }
     }
@@ -1670,7 +1931,7 @@ function ComponentHandle(taco) {
   this._actions = {};
   if (o.actions) {
     for (var k2 in o.actions) {
-      if (Object.prototype.hasOwnProperty.call(o.actions, k2)) {
+      if (_hop.call(o.actions, k2)) {
         this._actions[k2] = o.actions[k2];
       }
     }
@@ -1680,7 +1941,7 @@ function ComponentHandle(taco) {
   if (o.methods) {
     var self = this;
     for (var k3 in o.methods) {
-      if (Object.prototype.hasOwnProperty.call(o.methods, k3)) {
+      if (_hop.call(o.methods, k3)) {
         this._methods[k3] = o.methods[k3];
         (function(methodName, methodFn) {
           self[methodName] = function() {
@@ -1713,14 +1974,23 @@ function ComponentHandle(taco) {
   this._compile = !!o.compile;
   this._bw_refs = {};
   this._refCounter = 0;
+  // Child component ownership (Bug #5)
+  this._children = [];
+  this._parent = null;
+  // Factory metadata for BCCL rebuild (Bug #6)
+  this._factory = taco._bwFactory || null;
 }
 
+// Short alias for ComponentHandle.prototype (see alias block at top of file).
+// 28 method definitions × 25 chars = ~700B raw savings in minified output.
+var _chp = ComponentHandle.prototype;
+
 // ── State Methods ──
 
 /**
  * Get a state value. Dot-path supported: `get('user.name')`
  */
-ComponentHandle.prototype.get = function(key) {
+_chp.get = function(key) {
   return bw._evaluatePath(this._state, key);
 };
 
@@ -1730,12 +2000,13 @@ ComponentHandle.prototype.get = function(key) {
  * @param {*} value - New value
  * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
  */
-ComponentHandle.prototype.set = function(key, value, opts) {
+_chp.set = function(key, value, opts) {
   // Dot-path set
   var parts = key.split('.');
   var obj = this._state;
   for (var i = 0; i < parts.length - 1; i++) {
-    if (obj[parts[i]] == null || typeof obj[parts[i]] !== 'object') {
+    if (!_is(obj[parts[i]], 'object')) {
+      if (bw.debug) _cw('bw.debug: set() — auto-creating intermediate "' + parts[i] + '" in path "' + key + '"');
       obj[parts[i]] = {};
     }
     obj = obj[parts[i]];
@@ -1755,10 +2026,10 @@ ComponentHandle.prototype.set = function(key, value, opts) {
 /**
  * Get a shallow clone of the full state.
  */
-ComponentHandle.prototype.getState = function() {
+_chp.getState = function() {
   var clone = {};
   for (var k in this._state) {
-    if (Object.prototype.hasOwnProperty.call(this._state, k)) {
+    if (_hop.call(this._state, k)) {
       clone[k] = this._state[k];
     }
   }
@@ -1770,9 +2041,9 @@ ComponentHandle.prototype.getState = function() {
  * @param {Object} updates - Key-value pairs to merge
  * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
  */
-ComponentHandle.prototype.setState = function(updates, opts) {
+_chp.setState = function(updates, opts) {
   for (var k in updates) {
-    if (Object.prototype.hasOwnProperty.call(updates, k)) {
+    if (_hop.call(updates, k)) {
       this._state[k] = updates[k];
       this._dirtyKeys[k] = true;
     }
@@ -1789,9 +2060,9 @@ ComponentHandle.prototype.setState = function(updates, opts) {
 /**
  * Push a value onto an array in state. Clones the array.
  */
-ComponentHandle.prototype.push = function(key, val) {
+_chp.push = function(key, val) {
   var arr = this.get(key);
-  var newArr = Array.isArray(arr) ? arr.slice() : [];
+  var newArr = _isA(arr) ? arr.slice() : [];
   newArr.push(val);
   this.set(key, newArr);
 };
@@ -1799,9 +2070,9 @@ ComponentHandle.prototype.push = function(key, val) {
 /**
  * Splice an array in state. Clones the array.
  */
-ComponentHandle.prototype.splice = function(key, start, deleteCount) {
+_chp.splice = function(key, start, deleteCount) {
   var arr = this.get(key);
-  var newArr = Array.isArray(arr) ? arr.slice() : [];
+  var newArr = _isA(arr) ? arr.slice() : [];
   var args = [start, deleteCount].concat(Array.prototype.slice.call(arguments, 3));
   Array.prototype.splice.apply(newArr, args);
   this.set(key, newArr);
@@ -1809,7 +2080,7 @@ ComponentHandle.prototype.splice = function(key, start, deleteCount) {
 
 // ── Scheduling ──
 
-ComponentHandle.prototype._scheduleDirty = function() {
+_chp._scheduleDirty = function() {
   if (!this._scheduled) {
     this._scheduled = true;
     bw._dirtyComponents.push(this);
@@ -1824,17 +2095,17 @@ ComponentHandle.prototype._scheduleDirty = function() {
  * Creates binding descriptors with refIds for targeted DOM updates.
  * @private
  */
-ComponentHandle.prototype._compileBindings = function() {
+_chp._compileBindings = function() {
   this._bindings = [];
   this._refCounter = 0;
-  var stateKeys = Object.keys(this._state);
+  var stateKeys = _keys(this._state);
   var self = this;
 
   function walkTaco(taco, path) {
-    if (taco == null || typeof taco !== 'object' || !taco.t) return taco;
+    if (!_is(taco, 'object') || !taco.t) return taco;
 
     // Check content for bindings
-    if (typeof taco.c === 'string' && taco.c.indexOf('${') >= 0) {
+    if (_is(taco.c, 'string') && taco.c.indexOf('${') >= 0) {
       var refId = 'bw_ref_' + self._refCounter++;
       var parsed = bw._parseBindings(taco.c);
       var deps = [];
@@ -1856,10 +2127,10 @@ ComponentHandle.prototype._compileBindings = function() {
     // Check attributes for bindings
     if (taco.a) {
       for (var attrName in taco.a) {
-        if (!Object.prototype.hasOwnProperty.call(taco.a, attrName)) continue;
+        if (!_hop.call(taco.a, attrName)) continue;
         if (attrName === 'data-bw_ref') continue;
         var attrVal = taco.a[attrName];
-        if (typeof attrVal === 'string' && attrVal.indexOf('${') >= 0) {
+        if (_is(attrVal, 'string') && attrVal.indexOf('${') >= 0) {
           var refId2 = 'bw_ref_' + self._refCounter++;
           var parsed2 = bw._parseBindings(attrVal);
           var deps2 = [];
@@ -1885,9 +2156,27 @@ ComponentHandle.prototype._compileBindings = function() {
     }
 
     // Recurse into children
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       for (var i = 0; i < taco.c.length; i++) {
-        if (taco.c[i] && typeof taco.c[i] === 'object' && taco.c[i].t) {
+        // Wrap string children with ${expr} in a span so patches target the span, not the parent
+        if (_is(taco.c[i], 'string') && taco.c[i].indexOf('${') >= 0) {
+          var mixedRefId = 'bw_ref_' + self._refCounter++;
+          var mixedParsed = bw._parseBindings(taco.c[i]);
+          var mixedDeps = [];
+          for (var mi = 0; mi < mixedParsed.length; mi++) {
+            mixedDeps = mixedDeps.concat(bw._extractDeps(mixedParsed[mi].expr, stateKeys));
+          }
+          self._bindings.push({
+            expr: taco.c[i],
+            type: 'content',
+            refId: mixedRefId,
+            deps: mixedDeps,
+            template: taco.c[i]
+          });
+          // Replace string with a span wrapper so textContent targets the span only
+          taco.c[i] = { t: 'span', a: { 'data-bw_ref': mixedRefId, style: 'display:contents' }, c: taco.c[i] };
+        }
+        if (_is(taco.c[i], 'object') && taco.c[i].t) {
           walkTaco(taco.c[i], path.concat(i));
         }
         // Handle bw.when/bw.each markers
@@ -1922,7 +2211,7 @@ ComponentHandle.prototype._compileBindings = function() {
           taco.c[i]._refId = eachRefId;
         }
       }
-    } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+    } else if (_is(taco.c, 'object') && taco.c.t) {
       walkTaco(taco.c, path.concat(0));
     }
 
@@ -1938,7 +2227,7 @@ ComponentHandle.prototype._compileBindings = function() {
  * Build ref map from the live DOM after createDOM.
  * @private
  */
-ComponentHandle.prototype._collectRefs = function() {
+_chp._collectRefs = function() {
   this._bw_refs = {};
   if (!this.element) return;
   var els = this.element.querySelectorAll('[data-bw_ref]');
@@ -1959,7 +2248,7 @@ ComponentHandle.prototype._collectRefs = function() {
  * Creates DOM, compiles bindings, registers actions, and calls lifecycle hooks.
  * @param {Element} parentEl - DOM element to mount into
  */
-ComponentHandle.prototype.mount = function(parentEl) {
+_chp.mount = function(parentEl) {
   // willMount hook
   if (this._hooks.willMount) this._hooks.willMount(this);
 
@@ -1981,7 +2270,7 @@ ComponentHandle.prototype.mount = function(parentEl) {
   // Register named actions in function registry
   var self = this;
   for (var actionName in this._actions) {
-    if (Object.prototype.hasOwnProperty.call(this._actions, actionName)) {
+    if (_hop.call(this._actions, actionName)) {
       var registeredName = this._bwId + '_' + actionName;
       (function(aName) {
         bw.funcRegister(function(evt) {
@@ -2000,6 +2289,11 @@ ComponentHandle.prototype.mount = function(parentEl) {
   this.element = bw.createDOM(tacoForDOM);
   this.element._bwComponentHandle = this;
   this.element.setAttribute('data-bw_comp_id', this._bwId);
+
+  // Restore o.render from original TACO (stripped by _tacoForDOM)
+  if (this.taco.o && this.taco.o.render) {
+    this.element._bw_render = this.taco.o.render;
+  }
   if (this._userTag) {
     this.element.classList.add(this._userTag);
   }
@@ -2015,6 +2309,16 @@ ComponentHandle.prototype.mount = function(parentEl) {
 
   this.mounted = true;
 
+  // Scan for child ComponentHandles and link parent/child (Bug #5)
+  var childEls = this.element.querySelectorAll('[data-bw_comp_id]');
+  for (var ci = 0; ci < childEls.length; ci++) {
+    var ch = childEls[ci]._bwComponentHandle;
+    if (ch && ch !== this && !ch._parent) {
+      ch._parent = this;
+      this._children.push(ch);
+    }
+  }
+
   // mounted hook (backward compat: fn.length === 2 wraps (el, state))
   if (this._hooks.mounted) {
     if (this._hooks.mounted.length === 2) {
@@ -2023,16 +2327,21 @@ ComponentHandle.prototype.mount = function(parentEl) {
       this._hooks.mounted(this);
     }
   }
+
+  // Invoke o.render on initial mount (if present)
+  if (this.element._bw_render) {
+    this.element._bw_render(this.element, this._state);
+  }
 };
 
 /**
  * Prepare TACO for initial render: resolve when/each markers.
  * @private
  */
-ComponentHandle.prototype._prepareTaco = function(taco) {
-  if (!taco || typeof taco !== 'object') return;
+_chp._prepareTaco = function(taco) {
+  if (!_is(taco, 'object')) return;
 
-  if (Array.isArray(taco.c)) {
+  if (_isA(taco.c)) {
     for (var i = taco.c.length - 1; i >= 0; i--) {
       var child = taco.c[i];
       if (child && child._bwWhen) {
@@ -2057,18 +2366,18 @@ ComponentHandle.prototype._prepareTaco = function(taco) {
         var eachExprStr = child.expr.replace(/^\$\{|\}$/g, '');
         var arr = bw._evaluatePath(this._state, eachExprStr);
         var items = [];
-        if (Array.isArray(arr)) {
+        if (_isA(arr)) {
           for (var j = 0; j < arr.length; j++) {
             items.push(child.factory(arr[j], j));
           }
         }
         taco.c[i] = { t: 'span', a: { 'data-bw_each': child._refId, style: 'display:contents' }, c: items };
       }
-      if (taco.c[i] && typeof taco.c[i] === 'object' && taco.c[i].t) {
+      if (_is(taco.c[i], 'object') && taco.c[i].t) {
         this._prepareTaco(taco.c[i]);
       }
     }
-  } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+  } else if (_is(taco.c, 'object') && taco.c.t) {
     this._prepareTaco(taco.c);
   }
 };
@@ -2077,12 +2386,12 @@ ComponentHandle.prototype._prepareTaco = function(taco) {
  * Wire action name strings (in onclick etc.) to dispatch function calls.
  * @private
  */
-ComponentHandle.prototype._wireActions = function(taco) {
-  if (!taco || typeof taco !== 'object' || !taco.t) return;
+_chp._wireActions = function(taco) {
+  if (!_is(taco, 'object') || !taco.t) return;
   if (taco.a) {
     for (var key in taco.a) {
-      if (!Object.prototype.hasOwnProperty.call(taco.a, key)) continue;
-      if (key.startsWith('on') && typeof taco.a[key] === 'string') {
+      if (!_hop.call(taco.a, key)) continue;
+      if (key.startsWith('on') && _is(taco.a[key], 'string')) {
         var actionName = taco.a[key];
         if (actionName in this._actions) {
           var registeredName = this._bwId + '_' + actionName;
@@ -2096,11 +2405,11 @@ ComponentHandle.prototype._wireActions = function(taco) {
       }
     }
   }
-  if (Array.isArray(taco.c)) {
+  if (_isA(taco.c)) {
     for (var i = 0; i < taco.c.length; i++) {
       this._wireActions(taco.c[i]);
     }
-  } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+  } else if (_is(taco.c, 'object') && taco.c.t) {
     this._wireActions(taco.c);
   }
 };
@@ -2109,7 +2418,7 @@ ComponentHandle.prototype._wireActions = function(taco) {
  * Deep-clone a TACO tree, preserving _bwWhen/_bwEach markers and their factories.
  * @private
  */
-ComponentHandle.prototype._deepCloneTaco = function(taco) {
+_chp._deepCloneTaco = function(taco) {
   if (taco == null) return taco;
   // Preserve _bwWhen / _bwEach markers (contain functions)
   if (taco._bwWhen) {
@@ -2121,18 +2430,18 @@ ComponentHandle.prototype._deepCloneTaco = function(taco) {
   if (taco._bwEach) {
     return { _bwEach: true, expr: taco.expr, factory: taco.factory, _refId: taco._refId };
   }
-  if (typeof taco !== 'object' || !taco.t) return taco;
+  if (!_is(taco, 'object') || !taco.t) return taco;
   var result = { t: taco.t };
   if (taco.a) {
     result.a = {};
     for (var k in taco.a) {
-      if (Object.prototype.hasOwnProperty.call(taco.a, k)) result.a[k] = taco.a[k];
+      if (_hop.call(taco.a, k)) result.a[k] = taco.a[k];
     }
   }
   if (taco.c != null) {
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       result.c = taco.c.map(function(child) { return this._deepCloneTaco(child); }.bind(this));
-    } else if (typeof taco.c === 'object') {
+    } else if (_is(taco.c, 'object')) {
       result.c = this._deepCloneTaco(taco.c);
     } else {
       result.c = taco.c;
@@ -2146,27 +2455,31 @@ ComponentHandle.prototype._deepCloneTaco = function(taco) {
  * Create a copy of TACO suitable for createDOM (strips o to prevent double lifecycle).
  * @private
  */
-ComponentHandle.prototype._tacoForDOM = function(taco) {
-  if (!taco || typeof taco !== 'object' || !taco.t) return taco;
+_chp._tacoForDOM = function(taco) {
+  if (!_is(taco, 'object') || !taco.t) return taco;
   var result = { t: taco.t };
   if (taco.a) result.a = taco.a;
   if (taco.c != null) {
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       result.c = taco.c.map(function(child) { return this._tacoForDOM(child); }.bind(this));
-    } else if (typeof taco.c === 'object' && taco.c.t) {
+    } else if (_is(taco.c, 'object') && taco.c.t) {
       result.c = this._tacoForDOM(taco.c);
     } else {
       result.c = taco.c;
     }
   }
   // Intentionally strip o (no mounted/unmount/state/render on sub-elements)
+  if (taco.o && (taco.o.mounted || taco.o.render || taco.o.unmount)) {
+    _cw('bw: _tacoForDOM stripped o.mounted/render/unmount from child <' + taco.t +
+      '>. Use onclick attribute or bw.component() for child interactivity.');
+  }
   return result;
 };
 
 /**
  * Unmount: remove from DOM, deactivate, preserve state for re-mount.
  */
-ComponentHandle.prototype.unmount = function() {
+_chp.unmount = function() {
   if (!this.mounted) return;
 
   // unmount hook
@@ -2201,12 +2514,23 @@ ComponentHandle.prototype.unmount = function() {
 /**
  * Destroy: unmount + clear state + unregister actions.
  */
-ComponentHandle.prototype.destroy = function() {
+_chp.destroy = function() {
   // willDestroy hook
   if (this._hooks.willDestroy) {
     this._hooks.willDestroy(this);
   }
 
+  // Cascade destroy to children depth-first (Bug #5)
+  for (var ci = this._children.length - 1; ci >= 0; ci--) {
+    this._children[ci].destroy();
+  }
+  this._children = [];
+  if (this._parent) {
+    var idx = this._parent._children.indexOf(this);
+    if (idx >= 0) this._parent._children.splice(idx, 1);
+    this._parent = null;
+  }
+
   this.unmount();
 
   // Unregister actions from function registry
@@ -2233,12 +2557,36 @@ ComponentHandle.prototype.destroy = function() {
  * Flush dirty state: resolve changed bindings and apply to DOM.
  * @private
  */
-ComponentHandle.prototype._flush = function() {
+_chp._flush = function() {
   this._scheduled = false;
-  var changedKeys = Object.keys(this._dirtyKeys);
+  var changedKeys = _keys(this._dirtyKeys);
   this._dirtyKeys = {};
   if (changedKeys.length === 0 || !this.mounted) return;
 
+  // Factory rebuild: if a BCCL factory exists and changed keys overlap factory props,
+  // rebuild the TACO from the factory with merged state (Bug #6)
+  if (this._factory) {
+    var rebuildNeeded = false;
+    for (var fi = 0; fi < changedKeys.length; fi++) {
+      if (_hop.call(this._factory.props, changedKeys[fi])) {
+        rebuildNeeded = true; break;
+      }
+    }
+    if (rebuildNeeded) {
+      var merged = {};
+      for (var mk in this._factory.props) if (_hop.call(this._factory.props, mk)) merged[mk] = this._factory.props[mk];
+      for (var sk in this._state) if (_hop.call(this._state, sk)) merged[sk] = this._state[sk];
+      this._factory.props = merged;
+      var newTaco = bw.make(this._factory.type, merged);
+      newTaco._bwFactory = this._factory;
+      this.taco = newTaco;
+      this._originalTaco = this._deepCloneTaco(newTaco);
+      this._render();
+      if (this._hooks.onUpdate) this._hooks.onUpdate(this, changedKeys);
+      return;
+    }
+  }
+
   // willUpdate hook
   if (this._hooks.willUpdate) {
     this._hooks.willUpdate(this, changedKeys);
@@ -2277,7 +2625,7 @@ ComponentHandle.prototype._flush = function() {
  * Returns list of patches to apply.
  * @private
  */
-ComponentHandle.prototype._resolveBindings = function(changedKeys) {
+_chp._resolveBindings = function(changedKeys) {
   var patches = [];
   for (var i = 0; i < this._bindings.length; i++) {
     var b = this._bindings[i];
@@ -2313,11 +2661,14 @@ ComponentHandle.prototype._resolveBindings = function(changedKeys) {
  * Apply patches to DOM.
  * @private
  */
-ComponentHandle.prototype._applyPatches = function(patches) {
+_chp._applyPatches = function(patches) {
   for (var i = 0; i < patches.length; i++) {
     var p = patches[i];
     var el = this._bw_refs[p.refId];
-    if (!el) continue;
+    if (!el) {
+      if (bw.debug) _cw('bw.debug: _applyPatches — ref "' + p.refId + '" not found in DOM');
+      continue;
+    }
     if (p.type === 'content') {
       el.textContent = p.value;
     } else if (p.type === 'attribute') {
@@ -2334,7 +2685,7 @@ ComponentHandle.prototype._applyPatches = function(patches) {
  * Resolve all bindings and apply (used for initial render).
  * @private
  */
-ComponentHandle.prototype._resolveAndApplyAll = function() {
+_chp._resolveAndApplyAll = function() {
   var patches = [];
   for (var i = 0; i < this._bindings.length; i++) {
     var b = this._bindings[i];
@@ -2357,7 +2708,7 @@ ComponentHandle.prototype._resolveAndApplyAll = function() {
  * Full re-render for structural changes (when/each branch switches).
  * @private
  */
-ComponentHandle.prototype._render = function() {
+_chp._render = function() {
   if (!this.element || !this.element.parentNode) return;
   var parent = this.element.parentNode;
   var nextSibling = this.element.nextSibling;
@@ -2397,7 +2748,7 @@ ComponentHandle.prototype._render = function() {
  * @param {string} event - Event name (e.g., 'click')
  * @param {Function} handler - Event handler
  */
-ComponentHandle.prototype.on = function(event, handler) {
+_chp.on = function(event, handler) {
   if (this.element) {
     this.element.addEventListener(event, handler);
   }
@@ -2409,7 +2760,7 @@ ComponentHandle.prototype.on = function(event, handler) {
  * @param {string} event - Event name
  * @param {Function} handler - Handler to remove
  */
-ComponentHandle.prototype.off = function(event, handler) {
+_chp.off = function(event, handler) {
   if (this.element) {
     this.element.removeEventListener(event, handler);
   }
@@ -2424,7 +2775,7 @@ ComponentHandle.prototype.off = function(event, handler) {
  * @param {Function} handler - Handler function
  * @returns {Function} Unsubscribe function
  */
-ComponentHandle.prototype.sub = function(topic, handler) {
+_chp.sub = function(topic, handler) {
   var unsub = bw.sub(topic, handler);
   this._subs.push(unsub);
   return unsub;
@@ -2435,10 +2786,10 @@ ComponentHandle.prototype.sub = function(topic, handler) {
  * @param {string} name - Action name
  * @param {...*} args - Arguments passed after comp
  */
-ComponentHandle.prototype.action = function(name) {
+_chp.action = function(name) {
   var fn = this._actions[name];
   if (!fn) {
-    console.warn('ComponentHandle.action: unknown action "' + name + '"');
+    _cw('ComponentHandle.action: unknown action "' + name + '"');
     return;
   }
   var args = [this].concat(Array.prototype.slice.call(arguments, 1));
@@ -2450,7 +2801,7 @@ ComponentHandle.prototype.action = function(name) {
  * @param {string} sel - CSS selector
  * @returns {Element|null}
  */
-ComponentHandle.prototype.select = function(sel) {
+_chp.select = function(sel) {
   return this.element ? this.element.querySelector(sel) : null;
 };
 
@@ -2459,7 +2810,7 @@ ComponentHandle.prototype.select = function(sel) {
  * @param {string} sel - CSS selector
  * @returns {Element[]}
  */
-ComponentHandle.prototype.selectAll = function(sel) {
+_chp.selectAll = function(sel) {
   if (!this.element) return [];
   return Array.prototype.slice.call(this.element.querySelectorAll(sel));
 };
@@ -2470,7 +2821,7 @@ ComponentHandle.prototype.selectAll = function(sel) {
  * @param {string} tag - User-defined identifier (e.g. 'dashboard_prod_east')
  * @returns {ComponentHandle} this (for chaining)
  */
-ComponentHandle.prototype.userTag = function(tag) {
+_chp.userTag = function(tag) {
   this._userTag = tag;
   if (this.element) {
     this.element.classList.add(tag);
@@ -2571,14 +2922,399 @@ bw.message = function(target, action, data) {
   }
   if (!el || !el._bwComponentHandle) return false;
   var comp = el._bwComponentHandle;
-  if (typeof comp[action] !== 'function') {
-    console.warn('bw.message: unknown action "' + action + '" on component ' + target);
+  if (!_is(comp[action], 'function')) {
+    _cw('bw.message: unknown action "' + action + '" on component ' + target);
     return false;
   }
   comp[action](data);
   return true;
 };
 
+// ===================================================================================
+// bw.clientApply() / bw.clientConnect() — Server-driven UI protocol
+// ===================================================================================
+
+/**
+ * Registry of named functions sent via register messages.
+ * Populated by clientApply({ type: 'register', name, body }).
+ * Invoked by clientApply({ type: 'call', name, args }).
+ * @private
+ */
+bw._clientFunctions = {};
+
+/**
+ * Whether exec messages are allowed. Set by clientConnect opts.allowExec.
+ * Default false — exec messages are rejected unless explicitly opted in.
+ * @private
+ */
+bw._allowExec = false;
+
+/**
+ * Built-in client functions available via call() without registration.
+ * @private
+ */
+bw._builtinClientFunctions = {
+  scrollTo: function(selector) {
+    var el = bw._el(selector);
+    if (el) el.scrollTop = el.scrollHeight;
+  },
+  focus: function(selector) {
+    var el = bw._el(selector);
+    if (el && _is(el.focus, 'function')) el.focus();
+  },
+  download: function(filename, content, mimeType) {
+    if (typeof document === 'undefined') return;
+    var blob = new Blob([content], { type: mimeType || 'text/plain' });
+    var a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  },
+  clipboard: function(text) {
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      navigator.clipboard.writeText(text);
+    }
+  },
+  redirect: function(url) {
+    if (typeof window !== 'undefined') window.location.href = url;
+  },
+  log: function() {
+    console.log.apply(console, arguments);
+  }
+};
+
+/**
+ * Parse a bwserve protocol message string, supporting both strict JSON
+ * and r-prefixed relaxed JSON (single-quoted strings, trailing commas).
+ *
+ * The r-prefix format is designed for C/C++ string literals where
+ * double-quote escaping is painful. The parser is a state machine
+ * that walks character by character — not a regex replace.
+ *
+ * Escaping: apostrophes inside single-quoted values must be escaped
+ * with backslash: r{'name':'Barry\'s room'}
+ *
+ * @param {string} str - JSON or r-prefixed relaxed JSON string
+ * @returns {Object} Parsed message object
+ * @throws {SyntaxError} If the string is not valid JSON or relaxed JSON
+ * @category Server
+ */
+bw.clientParse = function(str) {
+  str = (str || '').trim();
+  if (str.charAt(0) !== 'r') return JSON.parse(str);
+  str = str.slice(1);
+
+  var out = [];
+  var i = 0;
+  var len = str.length;
+
+  while (i < len) {
+    var ch = str[i];
+
+    if (ch === "'") {
+      // Single-quoted string → emit as double-quoted
+      out.push('"');
+      i++;
+      while (i < len) {
+        var c = str[i];
+        if (c === '\\' && i + 1 < len) {
+          var next = str[i + 1];
+          if (next === "'") {
+            out.push("'");     // \' in input → ' in output
+          } else {
+            out.push('\\');
+            out.push(next);
+          }
+          i += 2;
+        } else if (c === '"') {
+          out.push('\\"');
+          i++;
+        } else if (c === "'") {
+          break;
+        } else {
+          out.push(c);
+          i++;
+        }
+      }
+      out.push('"');
+      i++; // skip closing '
+
+    } else if (ch === '"') {
+      // Double-quoted string — pass through verbatim
+      out.push(ch);
+      i++;
+      while (i < len) {
+        var c2 = str[i];
+        if (c2 === '\\' && i + 1 < len) {
+          out.push(c2);
+          out.push(str[i + 1]);
+          i += 2;
+        } else {
+          out.push(c2);
+          i++;
+          if (c2 === '"') break;
+        }
+      }
+
+    } else if (ch === ',') {
+      // Trailing comma check: skip comma if next non-whitespace is } or ]
+      var j = i + 1;
+      while (j < len && (str[j] === ' ' || str[j] === '\t' || str[j] === '\n' || str[j] === '\r')) j++;
+      if (j < len && (str[j] === '}' || str[j] === ']')) {
+        i++; // skip trailing comma
+      } else {
+        out.push(ch);
+        i++;
+      }
+
+    } else {
+      out.push(ch);
+      i++;
+    }
+  }
+
+  return JSON.parse(out.join(''));
+};
+
+/**
+ * Apply a bwserve protocol message to the DOM.
+ *
+ * Dispatches one of 9 message types:
+ *   replace  — bw.DOM(target, node)
+ *   append   — target.appendChild(bw.createDOM(node))
+ *   remove   — bw.cleanup(target); target.remove()
+ *   patch    — bw.patch(target, content, attr)
+ *   batch    — iterate ops, call clientApply for each
+ *   message  — bw.message(target, action, data)
+ *   register — store a named function for later call()
+ *   call     — invoke a registered or built-in function
+ *   exec     — execute arbitrary JS (requires allowExec)
+ *
+ * Target resolution:
+ *   Starts with '#' or '.' → CSS selector (querySelector)
+ *   Otherwise → getElementById, then bw._el fallback
+ *
+ * @param {Object} msg - Protocol message
+ * @returns {boolean} true if the message was applied successfully
+ * @category Server
+ */
+bw.clientApply = function(msg) {
+  if (!msg || !msg.type) return false;
+
+  var type = msg.type;
+  var target = msg.target;
+
+  if (type === 'replace') {
+    var el = bw._el(target);
+    if (!el) return false;
+    bw.DOM(el, msg.node);
+    return true;
+
+  } else if (type === 'patch') {
+    var patched = bw.patch(target, msg.content, msg.attr);
+    return patched !== null;
+
+  } else if (type === 'append') {
+    var parent = bw._el(target);
+    if (!parent) return false;
+    var child = bw.createDOM(msg.node);
+    parent.appendChild(child);
+    return true;
+
+  } else if (type === 'remove') {
+    var toRemove = bw._el(target);
+    if (!toRemove) return false;
+    if (_is(bw.cleanup, 'function')) bw.cleanup(toRemove);
+    toRemove.remove();
+    return true;
+
+  } else if (type === 'batch') {
+    if (!_isA(msg.ops)) return false;
+    var allOk = true;
+    msg.ops.forEach(function(op) {
+      if (!bw.clientApply(op)) allOk = false;
+    });
+    return allOk;
+
+  } else if (type === 'message') {
+    return bw.message(msg.target, msg.action, msg.data);
+
+  } else if (type === 'register') {
+    if (!msg.name || !msg.body) return false;
+    try {
+      bw._clientFunctions[msg.name] = new Function('return ' + msg.body)();
+      return true;
+    } catch (e) {
+      _ce('[bw] register error:', msg.name, e);
+      return false;
+    }
+
+  } else if (type === 'call') {
+    if (!msg.name) return false;
+    var fn = bw._clientFunctions[msg.name] || bw._builtinClientFunctions[msg.name];
+    if (!_is(fn, 'function')) return false;
+    try {
+      var args = _isA(msg.args) ? msg.args : [];
+      fn.apply(null, args);
+      return true;
+    } catch (e) {
+      _ce('[bw] call error:', msg.name, e);
+      return false;
+    }
+
+  } else if (type === 'exec') {
+    if (!bw._allowExec) {
+      _cw('[bw] exec rejected: allowExec is not enabled');
+      return false;
+    }
+    if (!msg.code) return false;
+    try {
+      new Function(msg.code)();
+      return true;
+    } catch (e) {
+      _ce('[bw] exec error:', e);
+      return false;
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Connect to a bwserve SSE endpoint and apply protocol messages automatically.
+ *
+ * Returns a connection object with sendAction(), on(), and close() methods.
+ *
+ * @param {string} url - SSE endpoint URL (e.g., '/__bw/events/client-1')
+ * @param {Object} [opts] - Connection options
+ * @param {string} [opts.transport='sse'] - Transport type: 'sse' (default) or 'poll'
+ * @param {number} [opts.interval=2000] - Poll interval in ms (only for 'poll' transport)
+ * @param {string} [opts.actionUrl] - POST endpoint for actions (default: derived from url)
+ * @param {boolean} [opts.reconnect=true] - Auto-reconnect on disconnect
+ * @param {boolean} [opts.allowExec=false] - Enable exec message type (arbitrary JS execution)
+ * @param {Function} [opts.onStatus] - Status callback: 'connecting'|'connected'|'disconnected'
+ * @param {Function} [opts.onMessage] - Raw message callback (before clientApply)
+ * @returns {Object} Connection object { sendAction, on, close, status }
+ * @category Server
+ */
+bw.clientConnect = function(url, opts) {
+  opts = opts || {};
+  var transport = opts.transport || 'sse';
+  var actionUrl = opts.actionUrl || url.replace(/\/events\//, '/action/');
+  var reconnect = opts.reconnect !== false;
+  var onStatus = opts.onStatus || function() {};
+  var onMessage = opts.onMessage || null;
+  var handlers = {};
+  // Set the global allowExec flag from connection options
+  bw._allowExec = !!opts.allowExec;
+  var conn = {
+    status: 'connecting',
+    _es: null,
+    _pollTimer: null
+  };
+
+  function setStatus(s) {
+    conn.status = s;
+    onStatus(s);
+  }
+
+  function handleMessage(data) {
+    try {
+      var msg = _is(data, 'string') ? bw.clientParse(data) : data;
+      if (onMessage) onMessage(msg);
+      if (handlers.message) handlers.message(msg);
+      bw.clientApply(msg);
+    } catch (e) {
+      if (handlers.error) handlers.error(e);
+    }
+  }
+
+  if (transport === 'sse' && typeof EventSource !== 'undefined') {
+    setStatus('connecting');
+    var es = new EventSource(url);
+    conn._es = es;
+
+    es.onopen = function() {
+      setStatus('connected');
+      if (handlers.open) handlers.open();
+    };
+
+    es.onmessage = function(e) {
+      handleMessage(e.data);
+    };
+
+    es.onerror = function() {
+      if (conn.status === 'connected') {
+        setStatus('disconnected');
+      }
+      if (handlers.error) handlers.error(new Error('SSE connection error'));
+      if (!reconnect) {
+        es.close();
+      }
+      // EventSource auto-reconnects by default when reconnect=true
+    };
+  } else if (transport === 'poll') {
+    var interval = opts.interval || 2000;
+    setStatus('connected');
+    conn._pollTimer = setInterval(function() {
+      fetch(url).then(function(r) { return r.json(); }).then(function(msgs) {
+        if (_isA(msgs)) {
+          msgs.forEach(handleMessage);
+        } else if (msgs && msgs.type) {
+          handleMessage(msgs);
+        }
+      }).catch(function(e) {
+        if (handlers.error) handlers.error(e);
+      });
+    }, interval);
+  }
+
+  /**
+   * Send an action to the server via POST.
+   * @param {string} action - Action name
+   * @param {Object} [data] - Action payload
+   */
+  conn.sendAction = function(action, data) {
+    var body = JSON.stringify({ type: 'action', action: action, data: data || {} });
+    fetch(actionUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: body
+    }).catch(function(e) {
+      if (handlers.error) handlers.error(e);
+    });
+  };
+
+  /**
+   * Register an event handler.
+   * @param {string} event - 'open'|'message'|'error'|'close'
+   * @param {Function} handler
+   */
+  conn.on = function(event, handler) {
+    handlers[event] = handler;
+    return conn;
+  };
+
+  /**
+   * Close the connection.
+   */
+  conn.close = function() {
+    if (conn._es) {
+      conn._es.close();
+      conn._es = null;
+    }
+    if (conn._pollTimer) {
+      clearInterval(conn._pollTimer);
+      conn._pollTimer = null;
+    }
+    setStatus('disconnected');
+    if (handlers.close) handlers.close();
+  };
+
+  return conn;
+};
+
 // ===================================================================================
 // bw.inspect() — Debug utility
 // ===================================================================================
@@ -2605,33 +3341,33 @@ bw.inspect = function(target) {
     el = target.element;
     comp = target;
   } else {
-    if (typeof target === 'string') {
+    if (_is(target, 'string')) {
       el = bw.$(target)[0];
     }
     if (!el) {
-      console.warn('bw.inspect: element not found');
+      _cw('bw.inspect: element not found');
       return null;
     }
     comp = el._bwComponentHandle;
   }
   if (!comp) {
-    console.log('bw.inspect: no ComponentHandle on this element');
-    console.log('  Tag:', el.tagName);
-    console.log('  Classes:', el.className);
-    console.log('  _bw_state:', el._bw_state || '(none)');
+    _cl('bw.inspect: no ComponentHandle on this element');
+    _cl('  Tag:', el.tagName);
+    _cl('  Classes:', el.className);
+    _cl('  _bw_state:', el._bw_state || '(none)');
     return null;
   }
   var deps = comp._bindings.reduce(function(s, b) {
     return s.concat(b.deps || []);
   }, []).filter(function(v, i, a) { return a.indexOf(v) === i; });
   console.group('Component: ' + comp._bwId);
-  console.log('State:', comp._state);
-  console.log('Bindings:', comp._bindings.length, '(deps:', deps, ')');
-  console.log('Methods:', Object.keys(comp._methods));
-  console.log('Actions:', Object.keys(comp._actions));
-  console.log('User tag:', comp._userTag || '(none)');
-  console.log('Mounted:', comp.mounted);
-  console.log('Element:', comp.element);
+  _cl('State:', comp._state);
+  _cl('Bindings:', comp._bindings.length, '(deps:', deps, ')');
+  _cl('Methods:', _keys(comp._methods));
+  _cl('Actions:', _keys(comp._actions));
+  _cl('User tag:', comp._userTag || '(none)');
+  _cl('Mounted:', comp.mounted);
+  _cl('Element:', comp.element);
   console.groupEnd();
   return comp;
 };
@@ -2654,8 +3390,8 @@ bw.compile = function(taco) {
   // Pre-extract all binding expressions
   var precompiled = [];
   function walkExpressions(node) {
-    if (!node || typeof node !== 'object') return;
-    if (typeof node.c === 'string' && node.c.indexOf('${') >= 0) {
+    if (!_is(node, 'object')) return;
+    if (_is(node.c, 'string') && node.c.indexOf('${') >= 0) {
       var parsed = bw._parseBindings(node.c);
       for (var i = 0; i < parsed.length; i++) {
         try {
@@ -2670,9 +3406,9 @@ bw.compile = function(taco) {
     }
     if (node.a) {
       for (var key in node.a) {
-        if (Object.prototype.hasOwnProperty.call(node.a, key)) {
+        if (_hop.call(node.a, key)) {
           var v = node.a[key];
-          if (typeof v === 'string' && v.indexOf('${') >= 0) {
+          if (_is(v, 'string') && v.indexOf('${') >= 0) {
             var parsed2 = bw._parseBindings(v);
             for (var j = 0; j < parsed2.length; j++) {
               try {
@@ -2688,9 +3424,9 @@ bw.compile = function(taco) {
         }
       }
     }
-    if (Array.isArray(node.c)) {
+    if (_isA(node.c)) {
       for (var k = 0; k < node.c.length; k++) walkExpressions(node.c[k]);
-    } else if (node.c && typeof node.c === 'object' && node.c.t) {
+    } else if (_is(node.c, 'object') && node.c.t) {
       walkExpressions(node.c);
     }
   }
@@ -2702,7 +3438,7 @@ bw.compile = function(taco) {
     handle._precompiledBindings = precompiled;
     if (initialState) {
       for (var k in initialState) {
-        if (Object.prototype.hasOwnProperty.call(initialState, k)) {
+        if (_hop.call(initialState, k)) {
           handle._state[k] = initialState[k];
         }
       }
@@ -2733,18 +3469,18 @@ bw.compile = function(taco) {
 bw.css = function(rules, options = {}) {
   const { minify = false, pretty = !minify } = options;
 
-  if (typeof rules === 'string') return rules;
+  if (_is(rules, 'string')) return rules;
 
   let css = '';
   const indent = pretty ? '  ' : '';
   const newline = pretty ? '\n' : '';
   const space = pretty ? ' ' : '';
 
-  if (Array.isArray(rules)) {
+  if (_isA(rules)) {
     css = rules.map(rule => bw.css(rule, options)).join(newline);
-  } else if (typeof rules === 'object') {
+  } else if (_is(rules, 'object')) {
     Object.entries(rules).forEach(([selector, styles]) => {
-      if (typeof styles === 'object' && !Array.isArray(styles)) {
+      if (_is(styles, 'object')) {
         // Handle @media, @keyframes, @supports — recurse into nested block
         if (selector.charAt(0) === '@') {
           const inner = bw.css(styles, options);
@@ -2793,7 +3529,7 @@ bw.css = function(rules, options = {}) {
  */
 bw.injectCSS = function(css, options = {}) {
   if (!bw._isBrowser) {
-    console.warn('bw.injectCSS requires a DOM environment');
+    _cw('bw.injectCSS requires a DOM environment');
     return null;
   }
   
@@ -2810,7 +3546,7 @@ bw.injectCSS = function(css, options = {}) {
   }
   
   // Convert CSS if needed
-  const cssStr = typeof css === 'string' ? css : bw.css(css, options);
+  const cssStr = _is(css, 'string') ? css : bw.css(css, options);
   
   // Set or append CSS
   if (append && styleEl.textContent) {
@@ -2840,7 +3576,7 @@ bw.s = function() {
   var result = {};
   for (var i = 0; i < arguments.length; i++) {
     var arg = arguments[i];
-    if (arg && typeof arg === 'object') Object.assign(result, arg);
+    if (_is(arg, 'object')) Object.assign(result, arg);
   }
   return result;
 };
@@ -2963,7 +3699,7 @@ bw.u = {
 bw.responsive = function(selector, breakpoints) {
   var sizes = { sm: '576px', md: '768px', lg: '992px', xl: '1200px' };
   var parts = [];
-  Object.keys(breakpoints).forEach(function(key) {
+  _keys(breakpoints).forEach(function(key) {
     var rules = {};
     if (key === 'base') {
       rules[selector] = breakpoints[key];
@@ -3035,18 +3771,18 @@ if (bw._isBrowser) {
     if (!selector) return [];
     
     // Already an array
-    if (Array.isArray(selector)) return selector;
+    if (_isA(selector)) return selector;
     
     // Single element
     if (selector.nodeType) return [selector];
     
     // NodeList or HTMLCollection
-    if (selector.length !== undefined && typeof selector !== 'string') {
+    if (selector.length !== undefined && !_is(selector, 'string')) {
       return Array.from(selector);
     }
     
     // CSS selector string
-    if (typeof selector === 'string') {
+    if (_is(selector, 'string')) {
       return Array.from(document.querySelectorAll(selector));
     }
     
@@ -3550,7 +4286,7 @@ bw.makeTable = function(config) {
   
   // Auto-detect columns if not provided
   const cols = columns || (data.length > 0 
-    ? Object.keys(data[0]).map(key => ({ key, label: key }))
+    ? _keys(data[0]).map(key => ({ key, label: key }))
     : []);
     
   // Current sort state
@@ -3565,7 +4301,7 @@ bw.makeTable = function(config) {
       const bVal = b[currentSortColumn];
       
       // Handle different types
-      if (typeof aVal === 'number' && typeof bVal === 'number') {
+      if (_is(aVal, 'number') && _is(bVal, 'number')) {
         return currentSortDirection === 'asc' ? aVal - bVal : bVal - aVal;
       }
       
@@ -3675,7 +4411,7 @@ bw.makeTable = function(config) {
 bw.makeTableFromArray = function(config) {
   const { data = [], headerRow = true, columns, ...rest } = config;
 
-  if (!Array.isArray(data) || data.length === 0) {
+  if (!_isA(data) || data.length === 0) {
     return bw.makeTable({ data: [], columns: columns || [], ...rest });
   }
 
@@ -3757,7 +4493,7 @@ bw.makeBarChart = function(config) {
     className = ''
   } = config;
 
-  if (!Array.isArray(data) || data.length === 0) {
+  if (!_isA(data) || data.length === 0) {
     return { t: 'div', a: { class: ('bw_bar_chart_container ' + className).trim() }, c: '' };
   }
 
@@ -3906,7 +4642,7 @@ bw._componentRegistry = new Map();
  */
 bw.render = function(element, position, taco) {
   // Get target element
-  const targetEl = typeof element === 'string' 
+  const targetEl = _is(element, 'string')
     ? document.querySelector(element) 
     : element;
     
@@ -4056,7 +4792,7 @@ bw.render = function(element, position, taco) {
     setContent(content) {
       this._taco.c = content;
       if (this.element) {
-        if (typeof content === 'string') {
+        if (_is(content, 'string')) {
           this.element.textContent = content;
         } else {
           // Re-render for complex content