bitwrench 2.0.32 → 2.1.1

package/src/bitwrench.js

@@ -9,19 +9,20 @@
 
 import { VERSION_INFO } from './version.js';
 import { getStructuralStyles, getResetStyles,
-         generateThemedCSS, derivePalette as _derivePalette,
+         generateThemedCSS,
          DEFAULT_PALETTE_CONFIG, SPACING_PRESETS, RADIUS_PRESETS, THEME_PRESETS,
          TYPE_RATIO_PRESETS, ELEVATION_PRESETS, MOTION_PRESETS, generateTypeScale,
          resolveLayout, scopeRulesUnder } from './bitwrench-styles.js';
 import { hexToHsl, hslToHex, adjustLightness, mixColor,
          relativeLuminance, textOnColor, deriveShades,
          derivePalette, harmonize, deriveAlternateSeed, deriveAlternateConfig,
-         isLightPalette,
-         colorParse, colorRgbToHsl, colorHslToRgb } from './bitwrench-color-utils.js';
+         isLightPalette } from './bitwrench-color-utils.js';
+import { colorParse as _colorParse, colorRgbToHsl as _colorRgbToHsl,
+         colorHslToRgb as _colorHslToRgb, colorInterp as _colorInterp } from './bitwrench-color-utils.js';
 import { bindFileOps } from './bitwrench-file-ops.js';
 import { typeOf as _typeOf, mapScale as _mapScale, clip as _clip,
          choice as _choice, arrayUniq as _arrayUniq, arrayBinA as _arrayBinA,
-         arrayBNotInA as _arrayBNotInA, colorInterp as _colorInterp,
+         arrayBNotInA as _arrayBNotInA,
          loremIpsum as _loremIpsum, multiArray as _multiArray,
          naturalCompare as _naturalCompare, setIntervalX as _setIntervalX,
          repeatUntil as _repeatUntil } from './bitwrench-utils.js';
@@ -51,23 +52,24 @@ const bw = {
 
   // Internal state
   _idCounter: 0,
-  _unmountCallbacks: new Map(),
   _topics: {},          // topic → [{handler, id}]  (plain object for IE11 compat)
   _subIdCounter: 0,     // monotonic ID for subscriptions
+  _detached: {},        // uuid → true for detach-exempt elements
+  _mounted: {},         // uuid → true for elements that have fired mounted()
 
   // ── Node reference cache ──────────────────────────────────────────────
   // Fast O(1) lookup for elements by id attribute or bw_uuid_* class.
   //
-  // Populated by bw.createDOM() when elements have:
+  // Populated by bw.create() when elements have:
   //   - id attribute (standard HTML id)
   //   - bw_uuid_* class (lifecycle-managed or explicitly addressed elements)
   //
-  // Cleaned up by bw.cleanup() when elements are destroyed via bitwrench APIs.
+  // Cleaned up by bw.unmount() when elements are destroyed via bitwrench APIs.
   // On cache miss, falls back to querySelector/getElementById — never fails,
   // just slower. Stale entries (refs to detached nodes) are removed on miss
   // via parentNode === null check (IE11-safe, unlike el.isConnected).
   //
-  // Elements created via bw.createDOM() also get el._bw_refs — a local map of
+  // Elements created via bw.create() also get el._bw_refs — a local map of
   // child id/UUID -> DOM node ref for fast parent->child access in o.render.
   // This is the bitwrench equivalent of React's compiled template "holes".
   //
@@ -136,7 +138,7 @@ Object.defineProperty(bw, '_isBrowser', {
 // 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.).
+// create, etc.).
 //
 // Alias       Target                                  Sites
 // ─────────   ──────────────────────────────────────   ─────
@@ -204,6 +206,7 @@ bw._getFs = function() {
   if (!bw.isNodeJS()) { bw._fsCache = null; return Promise.resolve(null); }
 
   // Strategy 1: synchronous require (CJS / UMD in Node.js)
+  /* c8 ignore next 7 -- require() is not defined in ESM test environment */
   if (typeof require === 'function') {
     try {
       bw._fsCache = require('fs');
@@ -216,17 +219,20 @@ bw._getFs = function() {
   try {
     var _importDynamic = new Function('m', 'return import(m)');
     return _importDynamic('fs').then(function(mod) {
+      /* c8 ignore next -- mod.default always exists in Node.js ESM */
       bw._fsCache = mod.default || mod;
       return bw._fsCache;
     }).catch(function() {
       bw._fsCache = null;
       return null;
     });
+  /* c8 ignore start -- Function() constructor never fails in test environments */
   } catch(e) {
     // Function() construction failed (shouldn't happen, but safety net)
     bw._fsCache = null;
     return Promise.resolve(null);
   }
+  /* c8 ignore stop */
 };
 
 /**
@@ -327,7 +333,7 @@ bw.uuid = function(prefix) {
  * applies the second argument to the element and returns the element:
  * - string/number: sets `el.textContent`
  * - function: calls `apply(el)`, returns el
- * - TACO object: clears children, mounts TACO via `bw.createDOM()`
+ * - TACO object: clears children, mounts TACO via `bw.create()`
  * - array: clears children, appends each item (string -> text node, TACO -> element)
  *
  * @param {string|Element} target - Element ref, ID, CSS selector, or bw_uuid_* class
@@ -355,25 +361,33 @@ bw.el = function(target, apply) {
     // 1. Check cache
     var cached = bw._nodeMap[target];
     if (cached) {
-      if (cached.parentNode !== null) {
+      // Detach-exempt elements survive the staleness check
+      var cachedUuid = bw.getUUID(cached);
+      if (cached.parentNode !== null || (cachedUuid && bw._detached[cachedUuid])) {
         el = cached;
+        // Clear detach exemption on reconnect
+        if (cachedUuid && bw._detached[cachedUuid] && cached.parentNode !== null) {
+          delete bw._detached[cachedUuid];
+        }
       } else {
         delete bw._nodeMap[target];
       }
     }
     if (!el) {
-      // 2. getElementById
-      el = document.getElementById(target);
-      // 3. querySelector for CSS selectors
-      if (!el && (target.charAt(0) === '#' || target.charAt(0) === '.')) {
-        el = document.querySelector(target);
-      }
-      // 4. bw_uuid_* class lookup
-      if (!el && target.indexOf('bw_uuid_') === 0) {
-        el = document.querySelector('.' + target);
+      // UUID strings are registry-only — never querySelector resurrection (§3.2)
+      if (target.indexOf('bw_uuid_') === 0) {
+        // Not in registry → null (no querySelector fallback)
+        el = null;
+      } else {
+        // 2. getElementById
+        el = document.getElementById(target);
+        // 3. querySelector for CSS selectors
+        if (!el && (target.charAt(0) === '#' || target.charAt(0) === '.')) {
+          el = document.querySelector(target);
+        }
+        // 4. Cache result
+        if (el) bw._nodeMap[target] = el;
       }
-      // 5. Cache result
-      if (el) bw._nodeMap[target] = el;
     }
   }
 
@@ -396,7 +410,7 @@ function _applyTo(el, apply) {
     apply.forEach(function(item) {
       if (item != null) {
         if (_is(item, 'object') && item.t) {
-          el.appendChild(bw.createDOM(item));
+          el.appendChild(bw.create(item));
         } else {
           el.appendChild(document.createTextNode(String(item)));
         }
@@ -404,20 +418,17 @@ function _applyTo(el, apply) {
     });
   } else if (_is(apply, 'object') && apply !== null && apply.t) {
     el.innerHTML = '';
-    el.appendChild(bw.createDOM(apply));
+    el.appendChild(bw.create(apply));
   } else {
     el.textContent = String(apply);
   }
 }
 
-// Internal alias — kept for one release cycle (v2.0.26).
-// Will be removed in v2.0.27. Use bw.el() instead.
-bw._el = bw.el;
 
 /**
  * Register a DOM element in the node cache under one or more keys.
  *
- * Called internally by `bw.createDOM()`. Registers elements that have
+ * Called internally by `bw.create()`. Registers elements that have
  * id attributes, UUID classes, or both.
  *
  * @param {Element} el - DOM element to register
@@ -440,7 +451,7 @@ bw._registerNode = function(el, uuid) {
 /**
  * Remove a DOM element from the node cache.
  *
- * Called internally by `bw.cleanup()` when elements are destroyed
+ * Called internally by `bw.unmount()` when elements are destroyed
  * through bitwrench APIs.
  *
  * @param {Element} el - DOM element to deregister
@@ -465,7 +476,7 @@ bw._deregisterNode = function(el, uuid) {
 
 /**
  * Marker class for elements with lifecycle hooks (mounted/unmount/render/state).
- * Used by cleanup() to find lifecycle-managed elements via querySelectorAll('.bw_lc').
+ * Used by unmount() to find lifecycle-managed elements via querySelectorAll('.bw_lc').
  * @private
  */
 var _BW_LC = 'bw_lc';
@@ -581,13 +592,13 @@ bw.escapeHTML = function(str) {
 };
 
 /**
- * Mark a string as raw HTML so it will not be escaped by bw.html() or bw.createDOM().
+ * Mark a string as raw HTML so it will not be escaped by bw.html() or bw.create().
  *
  * By default, bitwrench escapes all text content to prevent XSS. Use bw.raw()
  * when you need to embed pre-sanitized HTML, entities, or inline markup.
  *
  * @param {string} str - HTML string to mark as raw
- * @returns {Object} Marked object recognized by bw.html() and bw.createDOM()
+ * @returns {Object} Marked object recognized by bw.html() and bw.create()
  * @category DOM Generation
  * @see bw.escapeHTML
  * @see bw.html
@@ -614,7 +625,7 @@ bw.raw = function(str) {
  * @returns {Object} Plain TACO object {t, a?, c?, o?}
  * @category Utilities
  * @see bw.html
- * @see bw.createDOM
+ * @see bw.create
  * @see bw.DOM
  * @example
  * bw.h('div')
@@ -650,7 +661,7 @@ bw.h = function(tag, attrs, content, options) {
  * @param {boolean} [options.raw=false] - If true, skip HTML escaping on content
  * @returns {string} HTML string
  * @category DOM Generation
- * @see bw.createDOM
+ * @see bw.create
  * @see bw.DOM
  * @example
  * bw.html({ t: 'h1', c: 'Hello' })
@@ -694,24 +705,59 @@ bw.html = function(taco, options = {}) {
   
   // Build attributes string
   let attrStr = '';
-  
+  var fnMarkers = []; // bw_fn_* markers to add to class
+  var fnsRegistry = options.fns || null;
+
   for (const [key, value] of Object.entries(attrs)) {
     // Skip null, undefined, false
     if (value == null || value === false) continue;
-    
-    // Serialize event handlers via funcRegister
+
+    // Serialize event handlers
     if (key.startsWith('on')) {
       if (_is(value, 'function')) {
-        var fnId = bw.funcRegister(value);
-        attrStr += ' ' + key + '="' + bw.funcGetDispatchStr(fnId, 'event') + '"';
+        if (fnsRegistry) {
+          // Check for unserializable functions (bound, native)
+          var fnStr = '';
+          try { fnStr = value.toString(); } catch(e) {}
+          if (fnStr.indexOf('[native code]') !== -1) {
+            if (!options._fnUnserializableWarned) {
+              bw.pub('bw:diag', { code: 'fn_unserializable', msg: 'bound/native function cannot be serialized' });
+              options._fnUnserializableWarned = true;
+            }
+            continue;
+          }
+          // Register function in per-render registry
+          var eventName = key.substring(2);
+          var fnId = null;
+          // Dedupe by reference + event type
+          var fnKeys = _keys(fnsRegistry);
+          for (var fi = 0; fi < fnKeys.length; fi++) {
+            if (fnsRegistry[fnKeys[fi]].fn === value && fnsRegistry[fnKeys[fi]].event === eventName) {
+              fnId = fnKeys[fi]; break;
+            }
+          }
+          if (!fnId) {
+            fnId = 'bw_fn_' + (options._fnCounter || 0);
+            options._fnCounter = (options._fnCounter || 0) + 1;
+            fnsRegistry[fnId] = { fn: value, event: eventName };
+          }
+          fnMarkers.push(fnId);
+          // No inline on* attribute emitted
+        } else {
+          // No {fns} registry → skip function attrs, warn once per render
+          if (!options._fnSkipWarned) {
+            bw.pub('bw:diag', { code: 'fn_skipped', msg: 'function attrs skipped without {fns} option' });
+            options._fnSkipWarned = true;
+          }
+        }
+        continue;
       } else if (_is(value, 'string')) {
         attrStr += ' ' + key + '="' + bw.escapeHTML(value) + '"';
       }
       continue;
     }
-    
+
     if (key === 'style' && _is(value, 'object')) {
-      // Convert style object to string
       const styleStr = Object.entries(value)
         .filter(([, v]) => v != null)
         .map(([k, v]) => `${k}:${v}`)
@@ -720,16 +766,11 @@ bw.html = function(taco, options = {}) {
         attrStr += ` style="${bw.escapeHTML(styleStr)}"`;
       }
     } else if (key === 'class') {
-      // Handle class as array or string
-      const classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
-      if (classStr) {
-        attrStr += ` class="${bw.escapeHTML(classStr)}"`;
-      }
+      // Handled below with identity stamps
+      continue;
     } else if (value === true) {
-      // Boolean attributes
       attrStr += ` ${key}`;
     } else {
-      // Regular attributes — resolve ${expr} if state provided
       let resolvedVal = String(value);
       if (options.state && resolvedVal.indexOf('${') >= 0) {
         resolvedVal = bw._resolveTemplate(resolvedVal, options.state, !!options.compile);
@@ -738,15 +779,29 @@ bw.html = function(taco, options = {}) {
     }
   }
 
-  // Add bw_uuid + bw_lc classes if lifecycle hooks present
-  if ((opts.mounted || opts.unmount) && !_UUID_RE.test(attrs.class || '')) {
-    const uuid = bw.uuid('uuid');
-    attrStr = attrStr.replace(/class="([^"]*)"/, (_match, classes) => {
-      return `class="${classes} ${uuid} ${_BW_LC}"`.trim();
-    });
-    if (!attrStr.includes('class=')) {
-      attrStr += ` class="${uuid} ${_BW_LC}"`;
-    }
+  // Build class attribute: user classes + identity stamps + fn markers
+  var classTokens = [];
+  var userClass = attrs.class || '';
+  if (_isA(userClass)) userClass = userClass.filter(Boolean).join(' ');
+  if (userClass) classTokens.push(String(userClass));
+
+  // Add identity stamps for o.* elements
+  var hasOpts = opts && (opts.type || opts.state || opts.mounted || opts.unmount || opts.handle || opts.render || opts.slots);
+  if (hasOpts && !_UUID_RE.test(userClass)) {
+    var uuid = bw.uuid('uuid');
+    classTokens.push(uuid);
+    classTokens.push(_BW_LC);
+    classTokens.push('bw_is_component');
+    if (opts.type) classTokens.push('bw_is_component_' + opts.type);
+  }
+
+  // Add fn marker classes
+  for (var fmi = 0; fmi < fnMarkers.length; fmi++) {
+    classTokens.push(fnMarkers[fmi]);
+  }
+
+  if (classTokens.length > 0) {
+    attrStr += ' class="' + bw.escapeHTML(classTokens.join(' ')) + '"';
   }
   
   // Build HTML
@@ -804,27 +859,30 @@ bw.htmlPage = function(opts) {
   var favicon   = opts.favicon || '';
   var lang      = opts.lang    || 'en';
 
-  // Snapshot funcRegistry counter before rendering
-  var fnCounterBefore = bw._fnIDCounter;
+  var useHandlers = opts.handlers !== false;
+
+  // Per-render function registry
+  var fns = useHandlers ? {} : null;
 
   // Render body content
   var bodyHTML;
   if (_is(body, 'string')) {
     bodyHTML = body;
   } else {
-    var htmlOpts = {};
+    var htmlOpts = { _fnCounter: 0 };
     if (state) htmlOpts.state = state;
+    if (fns) htmlOpts.fns = fns;
     bodyHTML = bw.html(body, htmlOpts);
   }
 
-  // Collect functions registered during this render
-  var fnCounterAfter = bw._fnIDCounter;
+  // Build registry entries from per-render fns
   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';
+  if (fns) {
+    var fnKeys = _keys(fns);
+    for (var i = 0; i < fnKeys.length; i++) {
+      var fnEntry = fns[fnKeys[i]];
+      registryEntries += 'r[\'' + fnKeys[i] + '\']={fn:' +
+        fnEntry.fn.toString() + ',event:\'' + fnEntry.event + '\'};\n';
     }
   }
 
@@ -833,6 +891,7 @@ bw.htmlPage = function(opts) {
   if (runtime === 'inline') {
     // Read UMD bundle synchronously if in Node.js
     var umdSource = null;
+    /* c8 ignore start -- htmlPage inline runtime: require('fs')/require('path')/__filename only available in CJS builds, not ESM test runner */
     if (bw._isNode) {
       try {
         var fs = (typeof require === 'function') ? require('fs') : null;
@@ -853,6 +912,8 @@ bw.htmlPage = function(opts) {
         }
       } catch(e) { /* fall through */ }
     }
+    /* c8 ignore stop */
+    /* c8 ignore next 4 -- umdSource path depends on CJS fs.readFileSync */
     if (umdSource) {
       runtimeHead = '<script>' + umdSource + '</script>';
     } else {
@@ -899,17 +960,31 @@ bw.htmlPage = function(opts) {
   // Combine all CSS
   var allCSS = (themeCSS ? themeCSS + '\n' : '') + css;
 
-  // Body-end script: registry entries + optional loadStyles
+  // CSP nonce
+  var nonce = (bw.config && bw.config.cspNonce) ? bw.config.cspNonce : null;
+  var nonceAttr = nonce ? ' nonce="' + bw.escapeHTML(nonce) + '"' : '';
+
+  // Body-end script: binder for registered functions
   var bodyEndScript = '';
   var bodyEndParts = [];
   if (registryEntries) {
+    // Emit binder: iterate registered functions, find elements by bw_fn_* class,
+    // bind event listeners. Wrap in try/catch with bw_act guidance.
+    bodyEndParts.push('(function(){var r={};');
     bodyEndParts.push(registryEntries);
+    bodyEndParts.push('for(var k in r){if(r.hasOwnProperty(k)){');
+    bodyEndParts.push('var els=document.querySelectorAll("."+k);');
+    bodyEndParts.push('for(var i=0;i<els.length;i++){');
+    bodyEndParts.push('(function(el,entry){el.addEventListener(entry.event,function(event){');
+    bodyEndParts.push('try{entry.fn.call(el,event);}catch(e){');
+    bodyEndParts.push('console.error("bw_act handler error — if this is a ReferenceError from a closure, use bw_act_* class tokens instead:",e);}');
+    bodyEndParts.push('});})(els[i],r[k]);}}}})();');
   }
   if (runtime === 'inline' || runtime === 'cdn') {
     bodyEndParts.push('if(typeof bw!=="undefined"){bw.loadStyles();}');
   }
   if (bodyEndParts.length > 0) {
-    bodyEndScript = '<script>\n' + bodyEndParts.join('\n') + '\n</script>';
+    bodyEndScript = '<script' + nonceAttr + '>\n' + bodyEndParts.join('\n') + '\n</script>';
   }
 
   // Assemble document
@@ -922,9 +997,13 @@ bw.htmlPage = function(opts) {
   ];
   parts.push('<title>' + safeTitle + '</title>');
   if (faviconTag) parts.push(faviconTag);
-  if (runtimeHead) parts.push(runtimeHead);
+  if (runtimeHead) {
+    // Add nonce to runtime script tags
+    if (nonce) runtimeHead = runtimeHead.replace(/<script(?![^>]*\bnonce\b)/g, '<script' + nonceAttr);
+    parts.push(runtimeHead);
+  }
   if (headHTML) parts.push(headHTML);
-  if (allCSS) parts.push('<style>' + allCSS + '</style>');
+  if (allCSS) parts.push('<style' + nonceAttr + '>' + allCSS + '</style>');
   parts.push('</head>');
   parts.push('<body>');
   parts.push(bodyHTML);
@@ -936,31 +1015,32 @@ bw.htmlPage = function(opts) {
 };
 
 /**
- * Create a live DOM element from a TACO object (browser only).
+ * Create a hydrated, detached DOM element from a TACO object (browser only).
  *
- * Unlike `bw.html()` which returns a string, this creates real DOM elements
- * with event handlers, lifecycle hooks (mounted/unmount), and state. Used
- * internally by `bw.DOM()`. Throws in Node.js — use `bw.html()` instead.
+ * v2.1 Phase verb: the element is fully wired (state, handles, slots, events,
+ * unmount closure) but NOT registered and mounted() is NOT fired. Registration
+ * happens in mountTree(); mounted fires there too.
  *
  * @param {Object} taco - TACO object with {t, a, c, o}
  * @param {Object} [options] - Creation options
- * @returns {Element|Text} DOM element or text node
+ * @returns {Element|Text|DocumentFragment} DOM element, text node, or fragment
  * @category DOM Generation
- * @see bw.html
- * @see bw.DOM
- * @example
- * var el = bw.createDOM({
- *   t: 'button',
- *   a: { class: 'bw_btn', onclick: () => alert('clicked') },
- *   c: 'Click Me'
- * });
- * document.body.appendChild(el);
+ * @see bw.mount
+ * @see bw.mountTree
  */
-bw.createDOM = function(taco, options = {}) {
+bw.create = function(taco, options) {
   if (!bw._isBrowser) {
-    throw new Error('bw.createDOM requires a DOM environment (document/window). Use bw.html() instead.');
+    throw new Error('bw.create requires a DOM environment (document/window). Use bw.html() instead.');
   }
-  
+  return _createNode(taco, options || {});
+};
+
+/**
+ * Internal: recursively build DOM from TACO. Separated so spy on bw.create
+ * sees only the top-level call, not the recursive child builds.
+ * @private
+ */
+function _createNode(taco, options) {
   // Handle null/undefined
   if (taco == null) return document.createTextNode('');
 
@@ -973,53 +1053,49 @@ bw.createDOM = function(taco, options = {}) {
     return frag;
   }
 
-  // Handle text nodes
+  // Handle text nodes (primitives)
   if (!_is(taco, 'object') || !taco.t) {
     return document.createTextNode(String(taco));
   }
 
-  const { t: tag, a: attrs = {}, c: content, o: opts = {} } = taco;
+  // Read attrs from taco without mutating the original
+  var tag = taco.t;
+  var attrs = taco.a || {};
+  var content = taco.c;
+  var opts = taco.o || {};
 
   // SVG namespace: detect SVG context and thread through children.
-  // {t:'svg'} starts SVG context; foreignObject children revert to HTML.
   var svgCtx = options._svgCtx || (tag === 'svg');
   var el = svgCtx ? document.createElementNS(_SVG_NS, tag) : document.createElement(tag);
-  
-  // Set attributes
-  for (const [key, value] of Object.entries(attrs)) {
+
+  // Set attributes — never mutate taco.a, read from it
+  var attrKeys = _keys(attrs);
+  for (var ai = 0; ai < attrKeys.length; ai++) {
+    var key = attrKeys[ai];
+    var value = attrs[key];
     if (value == null || value === false) continue;
-    
+
     if (key === 'style' && _is(value, 'object')) {
-      // Apply styles directly
       Object.assign(el.style, value);
     } else if (key === 'class') {
-      // Handle class as array or string
-      // SVG elements use SVGAnimatedString for className, so use setAttribute
-      const classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
+      var classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
       if (classStr) {
         if (svgCtx) el.setAttribute('class', classStr);
         else el.className = classStr;
       }
-    } else if (key.startsWith('on') && _is(value, 'function')) {
-      // Event handlers
-      const eventName = key.slice(2).toLowerCase();
+    } else if (key.indexOf('on') === 0 && key.length > 2 && _is(value, 'function')) {
+      var eventName = key.slice(2).toLowerCase();
       el.addEventListener(eventName, value);
     } else if (key === 'value' && tag === 'input') {
-      // Special handling for input value
       el.value = value;
     } else if (value === true) {
-      // Boolean attributes
       el.setAttribute(key, '');
     } else {
-      // Regular attributes
       el.setAttribute(key, String(value));
     }
   }
-  
+
   // Add children, building _bw_refs for fast parent→child access.
-  // Children with id attributes or bw_uuid_* classes get local refs on the parent,
-  // so o.render functions can access them without any DOM lookup.
-  // SVG: foreignObject children revert to HTML namespace; otherwise inherit.
   var childOpts = options;
   var childSvgCtx = svgCtx && tag !== 'foreignObject';
   if (childSvgCtx !== (options._svgCtx || false)) {
@@ -1027,17 +1103,16 @@ bw.createDOM = function(taco, options = {}) {
   }
   if (content != null) {
     if (_isA(content)) {
-      content.forEach(child => {
+      for (var ci = 0; ci < content.length; ci++) {
+        var child = content[ci];
         if (child != null) {
-          var childEl = bw.createDOM(child, childOpts);
+          var childEl = _createNode(child, childOpts);
           el.appendChild(childEl);
-          // Build local refs for addressable children
           var childRefId = (child && child.a) ? (child.a.id || bw.getUUID(child)) : null;
           if (childRefId) {
             if (!el._bw_refs) el._bw_refs = {};
             el._bw_refs[childRefId] = childEl;
           }
-          // Bubble up grandchild refs (flatten one level)
           if (childEl._bw_refs) {
             if (!el._bw_refs) el._bw_refs = {};
             for (var rk in childEl._bw_refs) {
@@ -1047,23 +1122,22 @@ bw.createDOM = function(taco, options = {}) {
             }
           }
         }
-      });
+      }
     } else if (_is(content, 'object') && content.__bw_raw) {
-      // Raw HTML content — inject via innerHTML
       el.innerHTML = content.v;
     } else if (_is(content, 'object') && content.t) {
-      var childEl = bw.createDOM(content, childOpts);
-      el.appendChild(childEl);
-      var childRefId = content.a ? (content.a.id || bw.getUUID(content)) : null;
-      if (childRefId) {
+      var childEl2 = _createNode(content, childOpts);
+      el.appendChild(childEl2);
+      var childRefId2 = content.a ? (content.a.id || bw.getUUID(content)) : null;
+      if (childRefId2) {
         if (!el._bw_refs) el._bw_refs = {};
-        el._bw_refs[childRefId] = childEl;
+        el._bw_refs[childRefId2] = childEl2;
       }
-      if (childEl._bw_refs) {
+      if (childEl2._bw_refs) {
         if (!el._bw_refs) el._bw_refs = {};
-        for (var rk in childEl._bw_refs) {
-          if (_hop.call(childEl._bw_refs, rk)) {
-            el._bw_refs[rk] = childEl._bw_refs[rk];
+        for (var rk2 in childEl2._bw_refs) {
+          if (_hop.call(childEl2._bw_refs, rk2)) {
+            el._bw_refs[rk2] = childEl2._bw_refs[rk2];
           }
         }
       }
@@ -1072,218 +1146,718 @@ bw.createDOM = function(taco, options = {}) {
     }
   }
 
-  // Register element in node cache if it has an id attribute
-  if (attrs.id) {
-    bw._registerNode(el, null);
-  }
+  // ── Hydrate: wire o.* onto the element ──
+  // No registration, no mounted(), no rAF. That's mountTree's job.
+  _hydrateElement(el, opts);
 
-  // Register UUID class in node cache (bw_uuid_* tokens in class string)
-  // SVG elements have SVGAnimatedString for className; use getAttribute instead
-  var clsStr = svgCtx ? (el.getAttribute('class') || '') : el.className;
-  if (clsStr) {
-    var uuidMatch = clsStr.match(_UUID_RE);
-    if (uuidMatch) {
-      bw._nodeMap[uuidMatch[0]] = el;
-    }
-  }
+  return el;
+}
+
+// v2.1: bw.createDOM, bw.renderComponent, bw.compileProps fully removed.
 
-  // Store component type metadata (e.g., 'card', 'tabs') for introspection.
-  // BCCL factories set o.type; custom components can too.
+/**
+ * Internal: wire a TACO's o.* options onto an existing DOM element.
+ * Used by both bw.create (inline) and bw.hydrate (standalone).
+ * Idempotent: if el already has bw handle, skip.
+ * @private
+ */
+function _hydrateElement(el, opts) {
+  if (!opts || typeof opts !== 'object') return;
+
+  // Check for any o.* key that makes this a component
+  var hasLifecycle = opts.mounted || opts.unmount || opts.render || opts.state
+    || opts.handle || opts.slots || opts.type;
+  if (!hasLifecycle) return;
+
+  // Idempotency: if el.bw already exists, skip (re-hydrate is no-op)
+  if (el.bw) return;
+
+  // Store component type
   if (opts.type) {
     el._bw_type = opts.type;
   }
 
-  // Handle lifecycle hooks and state
-  if (opts.mounted || opts.unmount || opts.render || opts.state) {
-    // Ensure element has a UUID class for identity
-    var uuid = bw.getUUID(el) || bw.uuid('uuid');
-    el.classList.add(uuid);
-    el.classList.add(_BW_LC);
+  // Stamp UUID on the element (not on the input TACO)
+  var uuid = bw.getUUID(el) || bw.uuid('uuid');
+  if (!el.classList.contains(uuid)) el.classList.add(uuid);
 
-    // Register in node cache under UUID class
-    bw._registerNode(el, uuid);
+  // Component markers
+  el.classList.add(_BW_LC);
+  el.classList.add('bw_is_component');
+  if (opts.type) {
+    el.classList.add('bw_is_component_' + opts.type);
+  }
 
-    // Store state
-    if (opts.state) {
-      el._bw_state = opts.state;
-    }
+  // Store state (clone so TACO isn't retained)
+  if (opts.state) {
+    el._bw_state = opts.state;
+  }
+
+  // Store render function
+  if (opts.render) {
+    el._bw_render = opts.render;
+  }
+
+  // Store mounted function on element (fired later by mountTree)
+  if (opts.mounted) {
+    el._bw_mounted_fn = opts.mounted;
+  } else if (opts.render && !opts.mounted) {
+    // Auto-mount: if render exists but no mounted, auto-call render at mount
+    el._bw_mounted_fn = function(mountEl, state) {
+      opts.render(mountEl, state);
+    };
+  }
 
-    // o.render — store the render function for bw.update()
-    if (opts.render) {
-      el._bw_render = opts.render;
+  // Store unmount closure on the element itself (not in a global Map)
+  if (opts.unmount) {
+    el._bw_unmount_fn = opts.unmount;
+  }
+
+  // Component handle: attach methods to el.bw namespace
+  if (!el.bw) el.bw = {};
+
+  // Auto-generate getState()
+  el.bw.getState = function() {
+    return Object.assign({}, el._bw_state || {});
+  };
+
+  // Explicit handle methods: fn(el, ...args) -> el.bw.method(...args)
+  if (opts.handle) {
+    for (var hk in opts.handle) {
+      if (_hop.call(opts.handle, hk)) {
+        el.bw[hk] = opts.handle[hk].bind(null, el);
+      }
     }
+  }
 
-    // Determine what to call on mount:
-    // - If o.mounted exists, call it (it can call el._bw_render() for initial render)
-    // - Otherwise if o.render exists, auto-call it as a convenience shorthand
-    var mountFn = opts.mounted || (opts.render ? function(mountEl) {
-      opts.render(mountEl, mountEl._bw_state || {});
-    } : null);
-
-    if (mountFn) {
-      if (document.body.contains(el)) {
-        try { mountFn(el, el._bw_state || {}); }
-        catch (e) { _cw('o.mounted error: ' + e.message); }
-      } else {
-        requestAnimationFrame(() => {
-          if (document.body.contains(el)) {
-            try { mountFn(el, el._bw_state || {}); }
-            catch (e) { _cw('o.mounted error: ' + e.message); }
-          }
-        });
+  // Slot declarations: lazy-cached on first use, refresh invalidates cache
+  if (opts.slots) {
+    el._bw_slots = opts.slots;
+    el._bw_slot_cache = null; // lazy
+    for (var sk in opts.slots) {
+      if (_hop.call(opts.slots, sk)) {
+        (function(name, selector) {
+          var cap = name.charAt(0).toUpperCase() + name.slice(1);
+          el.bw['set' + cap] = function(value) {
+            if (!el._bw_slot_cache) el._bw_slot_cache = {};
+            if (!el._bw_slot_cache[name]) {
+              el._bw_slot_cache[name] = el.querySelector(selector);
+            }
+            var target = el._bw_slot_cache[name];
+            if (!target) return;
+            // Always unmount existing children before replacing
+            bw.unmountChildren(target);
+            if (value != null && typeof value === 'object' && value.t) {
+              // TACO through slots runs mount pipeline
+              target.innerHTML = '';
+              var child = bw.create(value);
+              target.appendChild(child);
+              if (el.isConnected) bw.mountTree(child);
+            } else {
+              target.textContent = (value != null) ? String(value) : '';
+            }
+          };
+          el.bw['get' + cap] = function() {
+            if (!el._bw_slot_cache) el._bw_slot_cache = {};
+            if (!el._bw_slot_cache[name]) {
+              el._bw_slot_cache[name] = el.querySelector(selector);
+            }
+            var target = el._bw_slot_cache[name];
+            return target ? target.textContent : '';
+          };
+        })(sk, opts.slots[sk]);
       }
     }
+  }
+}
 
-    // Store unmount callback keyed by UUID class
-    if (opts.unmount) {
-      bw._unmountCallbacks.set(uuid, () => {
-        try { opts.unmount(el, el._bw_state || {}); }
-        catch (e) { _cw('o.unmount error: ' + e.message); }
-      });
+/**
+ * Wire lifecycle from taco.o onto an existing DOM node. Idempotent.
+ * Used for Path S adoption: html() output → mountTree → hydrate adds behavior.
+ *
+ * @param {Element} el - Existing DOM element
+ * @param {Object} taco - TACO object whose o.* to wire
+ * @category DOM Generation
+ */
+bw.hydrate = function(el, taco) {
+  if (!el || !taco) return;
+  var opts = taco.o || {};
+  _hydrateElement(el, opts);
+};
+
+/**
+ * Walk a subtree, register every addressable node, fire mounted() hooks.
+ * Idempotent: already-registered nodes (same element) are skipped silently.
+ *
+ * Mounted fires synchronously, parent before children.
+ *
+ * @param {Element} el - Root of subtree to mount
+ * @category DOM Generation
+ */
+bw.mountTree = function(el) {
+  if (!el || el.nodeType !== 1) return;
+
+  // Lazy-install janitor observer on first mount
+  if (bw.janitor && bw.janitor._ensureObserver) bw.janitor._ensureObserver();
+  // Lazy-install action dispatcher if enabled (handles document changes in test envs)
+  if (bw.actions && bw.actions._ensureInstalled) bw.actions._ensureInstalled();
+
+  // Process this node
+  _mountNode(el);
+
+  // Process descendants in document order (parent-first = querySelectorAll order)
+  var descendants = el.querySelectorAll('*');
+  for (var i = 0; i < descendants.length; i++) {
+    _mountNode(descendants[i]);
+  }
+};
+
+/**
+ * Internal: mount a single node — register and fire mounted if needed.
+ * @private
+ */
+function _mountNode(el) {
+  /* c8 ignore next -- _mountNode only called with valid elements from mountTree */
+  if (!el || el.nodeType !== 1) return;
+
+  var uuid = bw.getUUID(el);
+  if (!uuid) {
+    // Still register by id if present
+    /* c8 ignore next -- all DOM elements in test env have getAttribute */
+    var htmlId = el.getAttribute ? el.getAttribute('id') : null;
+    if (htmlId) bw._nodeMap[htmlId] = el;
+    return;
+  }
+
+  // Idempotent: if already registered to this same element, skip entirely
+  if (bw._nodeMap[uuid] === el && bw._mounted[uuid]) return;
+
+  // Collision detection: UUID already registered to a DIFFERENT element
+  if (bw._nodeMap[uuid] && bw._nodeMap[uuid] !== el) {
+    // Remint: generate a new UUID for this element
+    var oldUuid = uuid;
+    var newUuid = bw.uuid('uuid');
+    // Replace on element
+    el.classList.remove(oldUuid);
+    el.classList.add(newUuid);
+    uuid = newUuid;
+    // Re-key parent's _bw_refs if applicable
+    if (el.parentNode && el.parentNode._bw_refs) {
+      if (el.parentNode._bw_refs[oldUuid] === el) {
+        delete el.parentNode._bw_refs[oldUuid];
+        el.parentNode._bw_refs[newUuid] = el;
+      }
     }
+    bw.pub('bw:diag', { code: 'uuid_collision', uuid: oldUuid, ref: newUuid,
+      msg: 'UUID collision detected; reminted to ' + newUuid });
   }
 
-  // Component handle: attach methods to el.bw namespace
-  if (opts.handle || opts.slots) {
-    if (!el.bw) el.bw = {};
-
-    // Explicit handle methods: fn(el, ...args) -> el.bw.method(...args)
-    if (opts.handle) {
-      for (var hk in opts.handle) {
-        if (_hop.call(opts.handle, hk)) {
-          el.bw[hk] = opts.handle[hk].bind(null, el);
-        }
+  // Register UUID
+  bw._nodeMap[uuid] = el;
+
+  // Register id attribute
+  /* c8 ignore next -- all DOM elements in test env have getAttribute */
+  htmlId = el.getAttribute ? el.getAttribute('id') : null;
+  if (htmlId) {
+    bw._nodeMap[htmlId] = el;
+  }
+
+  // Clear detach exemption on reconnect
+  if (bw._detached[uuid]) {
+    delete bw._detached[uuid];
+  }
+
+  // Fire mounted() — only for lifecycle components, only once per identity
+  if (el.classList.contains(_BW_LC) && !bw._mounted[uuid]) {
+    bw._mounted[uuid] = true;
+
+    if (el._bw_mounted_fn) {
+      try { el._bw_mounted_fn(el, el._bw_state || {}); }
+      catch (e) {
+        _cw('o.mounted error: ' + e.message);
+        bw.pub('bw:diag', { code: 'mounted_hook_error', uuid: uuid, msg: e.message });
       }
     }
 
-    // Slot declarations: auto-generate setX/getX pairs
-    // The target element is cached at creation time to avoid repeated
-    // querySelector calls on every get/set invocation.
-    if (opts.slots) {
-      for (var sk in opts.slots) {
-        if (_hop.call(opts.slots, sk)) {
-          (function(name, selector) {
-            var target = el.querySelector(selector);
-            var cap = name.charAt(0).toUpperCase() + name.slice(1);
-            el.bw['set' + cap] = function(value) {
-              if (!target) return;
-              if (value != null && typeof value === 'object' && value.t) {
-                target.innerHTML = '';
-                target.appendChild(bw.createDOM(value));
-              } else {
-                target.textContent = (value != null) ? String(value) : '';
-              }
-            };
-            el.bw['get' + cap] = function() {
-              return target ? target.textContent : '';
-            };
-          })(sk, opts.slots[sk]);
+    // Emit bw:mount CustomEvent (bubbles)
+    try {
+      el.dispatchEvent(new CustomEvent('bw:mount', {
+        bubbles: true,
+        detail: { uuid: uuid, type: el._bw_type || null }
+      }));
+    } catch (e) { /* jsdom edge case */ }
+
+    // Mirror to bw:lifecycle pub/sub
+    bw.pub('bw:lifecycle', { event: 'mount', uuid: uuid, type: el._bw_type || null });
+  }
+}
+
+/**
+ * Unmount an element and its entire subtree. Fire unmount hooks self-first,
+ * then descendants in document order. Strip ALL bitwrench properties.
+ * Deregister from _nodeMap.
+ *
+ * @param {Element} el - Element to unmount
+ * @category DOM Generation
+ */
+bw.unmount = function(el) {
+  if (!el || el.nodeType !== 1) return;
+
+  // Collect all addressable nodes: self + descendants in document order
+  var nodes = [el];
+  var desc = el.querySelectorAll('.' + _BW_LC + ', [class*="bw_uuid_"], [id]');
+  for (var i = 0; i < desc.length; i++) {
+    nodes.push(desc[i]);
+  }
+
+  // Fire unmount hooks and strip, self-first
+  for (var n = 0; n < nodes.length; n++) {
+    _unmountNode(nodes[n]);
+  }
+};
+
+/**
+ * Internal: unmount a single node — fire hook, strip everything, deregister.
+ * @private
+ */
+function _unmountNode(el) {
+  /* c8 ignore next -- _unmountNode only called with valid elements */
+  if (!el || el.nodeType !== 1) return;
+
+  var uuid = bw.getUUID(el);
+  /* c8 ignore next -- all DOM elements in test env have getAttribute */
+  var htmlId = el.getAttribute ? el.getAttribute('id') : null;
+
+  // If element has neither uuid nor id nor lifecycle, nothing to do
+  if (!uuid && !htmlId && !el.classList.contains(_BW_LC)) return;
+
+  // Emit bw:unmount BEFORE stripping (so listeners can read state)
+  if (uuid && el.classList.contains(_BW_LC)) {
+    try {
+      el.dispatchEvent(new CustomEvent('bw:unmount', {
+        bubbles: true,
+        detail: { uuid: uuid, type: el._bw_type || null }
+      }));
+    } catch (e) { /* jsdom edge case */ }
+  }
+
+  // Fire unmount closure
+  if (el._bw_unmount_fn) {
+    try { el._bw_unmount_fn(el, el._bw_state || {}); }
+    catch (e) {
+      _cw('o.unmount error: ' + e.message);
+      bw.pub('bw:diag', { code: 'unmount_hook_error', uuid: uuid, msg: e.message });
+    }
+  }
+
+  // Clean up pub/sub subscriptions tied to this element
+  if (el._bw_subs) {
+    for (var si = 0; si < el._bw_subs.length; si++) {
+      try { el._bw_subs[si](); } catch (e) {}
+    }
+    delete el._bw_subs;
+  }
+
+  // Deregister from node cache — remove all entries pointing to this element
+  // (covers uuid, id, and selector-based cache entries like "#foo")
+  for (var nk in bw._nodeMap) {
+    if (_hop.call(bw._nodeMap, nk) && bw._nodeMap[nk] === el) {
+      delete bw._nodeMap[nk];
+    }
+  }
+  if (uuid) {
+    delete bw._mounted[uuid];
+    delete bw._detached[uuid];
+  }
+
+  // Strip ALL bitwrench properties
+  delete el.bw;
+  delete el._bw_state;
+  delete el._bw_render;
+  delete el._bw_refs;
+  delete el._bw_type;
+  delete el._bw_unmount_fn;
+  delete el._bw_mounted_fn;
+  delete el._bw_slots;
+  delete el._bw_slot_cache;
+
+  // Strip marker classes and uuid tokens
+  if (el.classList) {
+    el.classList.remove(_BW_LC);
+    el.classList.remove('bw_is_component');
+    // Remove typed marker
+    var cls = el.className;
+    if (typeof cls === 'string') {
+      var classes = cls.split(/\s+/);
+      for (var ci = 0; ci < classes.length; ci++) {
+        if (classes[ci].indexOf('bw_is_component_') === 0 ||
+            classes[ci].indexOf('bw_uuid_') === 0) {
+          el.classList.remove(classes[ci]);
         }
       }
     }
   }
+}
 
-  return el;
+/**
+ * Unmount descendants only; the element's own state/subs/registration are untouched.
+ *
+ * @param {Element} el - Parent element whose children to unmount
+ * @category DOM Generation
+ */
+bw.unmountChildren = function(el) {
+  if (!el || el.nodeType !== 1) return;
+
+  // Find all direct and nested lifecycle/addressable nodes inside children
+  var childNodes = el.querySelectorAll('.' + _BW_LC + ', [class*="bw_uuid_"]');
+  for (var i = 0; i < childNodes.length; i++) {
+    _unmountNode(childNodes[i]);
+  }
 };
 
 /**
- * Mount a TACO object into a DOM element, replacing its contents (browser only).
+ * Remove an element from the DOM and clean it up. Convenience compound:
+ * unmount(el) + el.remove().
  *
- * This is the primary way to render bitwrench UI to the page. It cleans up
- * any existing children (calling unmount hooks), then renders the TACO into
- * the target. The target element itself is preserved — only its children change.
+ * @param {string|Element} ref - Element reference
+ * @category DOM Generation
+ */
+bw.remove = function(ref) {
+  var el = bw.el(ref);
+  if (!el) return;
+  bw.unmount(el);
+  if (el.parentNode) el.parentNode.removeChild(el);
+};
+
+/**
+ * Detach an element from the DOM but keep it registered (keep-alive).
+ * The element stays addressable and its subscriptions keep delivering.
+ * Janitor will not reap detach-exempt elements.
  *
- * @param {string|Element} target - CSS selector or DOM element to mount into
- * @param {Object} taco - TACO object to render
- * @param {Object} [options] - Mount options
- * @returns {Element} Target element
+ * @param {Element} el - Element to detach
  * @category DOM Generation
- * @see bw.html
- * @see bw.createDOM
- * @see bw.cleanup
- * @example
- * bw.DOM('#app', {
- *   t: 'div', a: { class: 'card' },
- *   c: [
- *     { t: 'h2', c: 'Hello' },
- *     { t: 'p', c: 'Built with bitwrench.' }
- *   ]
- * });
  */
-bw.DOM = function(target, taco, options = {}) {
-  if (!bw._isBrowser) {
-    throw new Error('bw.DOM requires a DOM environment (document/window). Use bw.html() instead.');
+bw.detach = function(el) {
+  if (!el) return;
+  var uuid = bw.getUUID(el);
+  if (uuid) {
+    bw._detached[uuid] = true;
   }
-  
-  // Get target element (use cache-backed lookup)
-  const targetEl = bw.el(target);
-    
-  if (!targetEl) {
-    _ce('bw.DOM: Target element not found:', target);
-    return null;
+  if (el.parentNode) el.parentNode.removeChild(el);
+};
+
+// v2.1: bw.cleanup fully removed.
+
+/**
+ * Janitor: document-level cleanup for ungraceful teardown.
+ * Detects rude el.remove() / innerHTML='' and fires full unmount.
+ *
+ * flush() = synchronous process all pending disconnected nodes.
+ * enable()/disable() toggle monitoring. ON by default.
+ */
+bw.janitor = (function() {
+  var _pending = [];        // elements pending liveness check
+  var _enabled = true;
+  var _reapedList = [];     // recently reaped elements for tripwire check
+  var _observer = null;
+  var _flushScheduled = false;
+
+  function _scheduleFlush() {
+    if (_flushScheduled) return;
+    _flushScheduled = true;
+    // In jsdom, MutationObserver callbacks fire synchronously during DOM
+    // mutation. We use Promise.resolve() to defer flush to a microtask,
+    // giving same-stack moves time to complete (same-task appendChild
+    // after remove = move, not removal). The flush runs as a microtask
+    // which fires before setTimeout callbacks.
+    Promise.resolve().then(_doFlush);
   }
-  
-  // Clean up existing children (but preserve the target's own state, render, and subs —
-  // the target is the mount point, not the content being replaced)
-  const savedState = targetEl._bw_state;
-  const savedRender = targetEl._bw_render;
-  const savedUuid = bw.getUUID(targetEl);
-  const savedSubs = targetEl._bw_subs;
-
-  // Temporarily remove _bw_subs so cleanup doesn't call them
-  // (children's subs will still be cleaned up normally)
-  delete targetEl._bw_subs;
-
-  bw.cleanup(targetEl);
-
-  // Restore the target's own state/render/subs after cleanup
-  if (savedState !== undefined) targetEl._bw_state = savedState;
-  if (savedRender) targetEl._bw_render = savedRender;
-  if (savedUuid) {
-    // UUID class stays on element through cleanup; re-register in cache
-    bw._registerNode(targetEl, savedUuid);
-  }
-  if (savedSubs) targetEl._bw_subs = savedSubs;
-
-  // Clear and mount new content
-  targetEl.innerHTML = '';
-  
-  if (taco != null) {
-    // Handle arrays
-    if (_isA(taco)) {
-      taco.forEach(t => {
-        if (t != null) {
-          targetEl.appendChild(bw.createDOM(t, options));
+
+  function _doFlush() {
+    _flushScheduled = false;
+    _processPending();
+  }
+
+  // Install MutationObserver if available (detects rude removals)
+  function _installObserver() {
+    if (!bw._isBrowser || typeof MutationObserver === 'undefined') return;
+    /* c8 ignore start -- observer body: MutationObserver callbacks are async and not triggered in synchronous tests */
+    if (_observer) return;
+    try {
+      _observer = new MutationObserver(function(mutations) {
+        if (!_enabled) return;
+        var removedSet = [];
+        var addedSet = [];
+        // Collect all removals and additions in this batch
+        for (var m = 0; m < mutations.length; m++) {
+          var mut = mutations[m];
+          for (var r = 0; r < mut.removedNodes.length; r++) {
+            var rn = mut.removedNodes[r];
+            if (rn.nodeType === 1) removedSet.push(rn);
+          }
+          for (var a = 0; a < mut.addedNodes.length; a++) {
+            var an = mut.addedNodes[a];
+            if (an.nodeType === 1) addedSet.push(an);
+          }
+        }
+        // Same-stack moves: if a node appears in both removed and added,
+        // it's a move (not a removal). Don't add to pending.
+        var found = false;
+        for (var i = 0; i < removedSet.length; i++) {
+          var node = removedSet[i];
+          if (addedSet.indexOf(node) !== -1) continue; // same-stack move
+          var uuid = bw.getUUID(node);
+          if (uuid && bw._nodeMap[uuid]) {
+            if (_pending.indexOf(node) === -1) _pending.push(node);
+            found = true;
+          }
+          if (node.querySelectorAll) {
+            var desc = node.querySelectorAll('.' + _BW_LC + ', [class*="bw_uuid_"]');
+            for (var d = 0; d < desc.length; d++) {
+              if (addedSet.indexOf(desc[d]) === -1 && _pending.indexOf(desc[d]) === -1) {
+                _pending.push(desc[d]);
+                found = true;
+              }
+            }
+          }
         }
+        if (found) _scheduleFlush();
       });
+      _observer.observe(document.body, { childList: true, subtree: true });
+    } catch (e) { /* observer setup failed */ }
+    /* c8 ignore stop */
+  }
+
+  // Try to install immediately; re-install when DOM becomes available
+  if (bw._isBrowser && typeof document !== 'undefined' && document.body) {
+    _installObserver();
+  }
+
+  function _processPending() {
+    // Take snapshot from observer-reported removals and clear
+    var batch = _pending.splice(0);
+    var observerCount = batch.length; // items from observer are confirmed removals
+
+    // Also scan entire registry for disconnected nodes (fallback for non-observer removals)
+    for (var key in bw._nodeMap) {
+      if (_hop.call(bw._nodeMap, key)) {
+        var el = bw._nodeMap[key];
+        if (el && el.nodeType === 1 && !el.isConnected) {
+          if (batch.indexOf(el) === -1) batch.push(el);
+        }
+      }
+    }
+
+    // Clear detach exemptions for reconnected elements
+    for (var uuid in bw._detached) {
+      if (_hop.call(bw._detached, uuid)) {
+        var detEl = bw._nodeMap[uuid];
+        if (detEl && detEl.isConnected) {
+          delete bw._detached[uuid];
+        }
+      }
+    }
+
+    // Check for reaped-reinserted tripwire — check if any recently reaped elements are back in DOM
+    var nextReaped = [];
+    for (var ri = 0; ri < _reapedList.length; ri++) {
+      var rEl = _reapedList[ri];
+      if (rEl.isConnected) {
+        bw.pub('bw:diag', { code: 'reaped_reinserted',
+          msg: 'a reaped element was reinserted — use bw.detach() for keep-alive' });
+        // Don't carry forward — warn once
+      } else {
+        nextReaped.push(rEl);  // keep tracking for next flush
+      }
+    }
+    _reapedList = nextReaped;
+
+    // Process elements. Elements from _pending (MutationObserver) are confirmed
+    // removals that weren't same-stack moves — reap them even if reconnected
+    // (async reinsert without bw.detach). Elements from registry scan only
+    // reap if still disconnected.
+    for (var i = 0; i < batch.length; i++) {
+      var node = batch[i];
+      var fromObserver = batch.indexOf(node) < observerCount;
+      /* c8 ignore next -- registry-scan reconnected nodes only occur with async observer batching */
+      if (!fromObserver && node.isConnected) continue; // registry-scan hit: still alive
+
+      var nodeUuid = bw.getUUID(node);
+      if (nodeUuid && bw._detached[nodeUuid]) continue; // exempt
+
+      // Check if this is a lifecycle component or plain addressable node
+      var isComponent = node.classList && node.classList.contains(_BW_LC);
+      var isAddressable = nodeUuid && bw._nodeMap[nodeUuid] === node;
+
+      if (isComponent) {
+        // Capture type before unmount strips it
+        var nodeType = node._bw_type || null;
+        // Full unmount for components
+        bw.unmount(node);
+        _reapedList.push(node);
+        // Emit lifecycle mirror (DOM events can't bubble from detached tree)
+        bw.pub('bw:lifecycle', { event: 'unmount', uuid: nodeUuid, type: nodeType });
+        bw.pub('bw:diag', { code: 'janitor_reap', uuid: nodeUuid });
+      } else if (isAddressable) {
+        // Deregister plain addressable node
+        _unmountNode(node);
+        _reapedList.push(node);
+        bw.pub('bw:diag', { code: 'janitor_reap', uuid: nodeUuid });
+      }
+
+      // Also check for lifecycle children inside this node
+      /* c8 ignore start -- janitor children iteration: parent unmount already covers descendants */
+      if (node.querySelectorAll) {
+        var children = node.querySelectorAll('.' + _BW_LC + ', [class*="bw_uuid_"]');
+        for (var ci = 0; ci < children.length; ci++) {
+          var child = children[ci];
+          var childUuid = bw.getUUID(child);
+          if (childUuid && bw._nodeMap[childUuid] === child) {
+            if (child.classList.contains(_BW_LC)) {
+              bw.unmount(child);
+              if (_reapedList) _reapedList.push(child);
+              bw.pub('bw:diag', { code: 'janitor_reap', uuid: childUuid });
+            } else {
+              _unmountNode(child);
+              bw.pub('bw:diag', { code: 'janitor_reap', uuid: childUuid });
+            }
+          }
+        }
+      }
+      /* c8 ignore stop */
     }
-    // Handle TACO objects
-    else {
-      targetEl.appendChild(bw.createDOM(taco, options));
+  }
+
+  return {
+    flush: function() {
+      _flushScheduled = false;
+      // Lazy-install observer on first flush
+      if (!_observer && bw._isBrowser && typeof document !== 'undefined' && document.body) {
+        _installObserver();
+      }
+      _processPending();
+    },
+    enable: function() { _enabled = true; },
+    disable: function() { _enabled = false; },
+    _addPending: function(el) {
+      if (_pending.indexOf(el) === -1) _pending.push(el);
+    },
+    _ensureObserver: function() {
+      if (!_observer && bw._isBrowser && typeof document !== 'undefined' && document.body) {
+        _installObserver();
+      }
+    },
+    _reset: function() {
+      _pending.length = 0;
+      _reapedList.length = 0;
+      _flushScheduled = false;
+      _enabled = true;
+      /* c8 ignore start -- observer not installed in jsdom test env */
+      if (_observer) {
+        _observer.disconnect();
+        _observer = null;
+      }
+      /* c8 ignore stop */
+    },
+    _getPendingCount: function() {
+      // Count pending plus any disconnected registry entries
+      var count = _pending.length;
+      for (var key in bw._nodeMap) {
+        if (_hop.call(bw._nodeMap, key)) {
+          var el = bw._nodeMap[key];
+          if (el && el.nodeType === 1 && !el.isConnected) {
+            var uuid = bw.getUUID(el);
+            if (!uuid || !bw._detached[uuid]) count++;
+          }
+        }
+      }
+      return count;
     }
+  };
+})();
+
+/**
+ * Debug introspection for tests. Returns counts of internal state.
+ * @returns {Object} {registered, detached, janitorPending, topics}
+ * @category Internal
+ */
+bw._debug = function() {
+  var regCount = 0;
+  for (var k in bw._nodeMap) {
+    if (_hop.call(bw._nodeMap, k)) regCount++;
   }
-  
-  return targetEl;
+  var detCount = 0;
+  for (var d in bw._detached) {
+    if (_hop.call(bw._detached, d)) detCount++;
+  }
+  return {
+    registered: regCount,
+    detached: detCount,
+    janitorPending: bw.janitor._getPendingCount(),
+    topics: _keys(bw._topics).length
+  };
 };
 
-// Deprecation stubs for removed ComponentHandle APIs
-bw.compileProps = function() { throw new Error('bw.compileProps() removed in v2.0.19. Use o.handle/o.slots instead.'); };
-bw.renderComponent = function() { throw new Error('bw.renderComponent() removed in v2.0.19. Use bw.mount() with o.handle/o.slots instead.'); };
+/**
+ * Hard reset all singleton state for test isolation.
+ * @category Internal
+ */
+bw._resetForTest = function() {
+  // Clear node registry
+  for (var k in bw._nodeMap) {
+    if (_hop.call(bw._nodeMap, k)) delete bw._nodeMap[k];
+  }
+  // Clear topics
+  for (var t in bw._topics) {
+    if (_hop.call(bw._topics, t)) delete bw._topics[t];
+  }
+  // Clear detached set
+  for (var d in bw._detached) {
+    if (_hop.call(bw._detached, d)) delete bw._detached[d];
+  }
+  // Clear mounted set
+  for (var m in bw._mounted) {
+    if (_hop.call(bw._mounted, m)) delete bw._mounted[m];
+  }
+  bw._subIdCounter = 0;
+  bw._idCounter = 0;
+  // Reset janitor
+  if (bw.janitor) {
+    if (typeof bw.janitor._reset === 'function') bw.janitor._reset();
+  }
+  // Reset actions — clear installed state, keep enabled (actions are ON by default)
+  if (bw.actions) {
+    if (typeof bw.actions._reset === 'function') bw.actions._reset();
+    // Re-enable (actions are ON by default), but don't install yet
+    // (install will happen lazily on next mountTree or enable call)
+    bw.actions.enable();
+  }
+  // Reset remote/wire
+  bw.remote = null;
+  for (var wl in bw._wireListeners) {
+    if (_hop.call(bw._wireListeners, wl)) {
+      try { bw._wireListeners[wl](); } catch (e) {}
+      delete bw._wireListeners[wl];
+    }
+  }
+  for (var cr in bw._clientRemotes) {
+    if (_hop.call(bw._clientRemotes, cr)) delete bw._clientRemotes[cr];
+  }
+};
 
 /**
- * Mount a TACO into a target element and return the created root element.
- * Like bw.DOM() but returns the root element of the TACO (not the container),
- * giving direct access to el.bw handle methods.
- *
- * @param {string|Element} target - CSS selector or DOM element
- * @param {Object} taco - TACO to render
- * @param {Object} [options] - Mount options
- * @returns {Element} The created root element
+ * Mount a TACO into a target element. Returns the root element (single root),
+ * first node (array), or null. This is the primary compound verb for putting
+ * UI on the page.
+ *
+ * Composes atomics: unmountChildren(target) → clear → create(content) →
+ * insert → mountTree(target).
+ *
+ * @param {string|Element} target - CSS selector or DOM element to mount into
+ * @param {Object|Array} taco - TACO object or array to render
+ * @param {Object} [options] - Creation options
+ * @returns {Element|null} The root element, or null
  * @category DOM Generation
- * @example
- * var el = bw.mount('#app', bw.makeCarousel({ items: slides }));
- * el.bw.goToSlide(2);
- * el.bw.next();
  */
 bw.mount = function(target, taco, options) {
   var container = _is(target, 'string') ? bw.$(target)[0] : target;
@@ -1291,136 +1865,192 @@ bw.mount = function(target, taco, options) {
     _cw('bw.mount: target not found');
     return null;
   }
-  bw.cleanup(container);
+
+  // Teardown existing children (compound calls atomic)
+  bw.unmountChildren(container);
   container.innerHTML = '';
-  var el = bw.createDOM(taco, options || {});
-  container.appendChild(el);
-  return el;
+
+  if (taco == null) return null;
+
+  var firstEl = null;
+  var created = [];
+  if (_isA(taco)) {
+    for (var i = 0; i < taco.length; i++) {
+      if (taco[i] != null) {
+        var child = bw.create(taco[i], options || {});
+        container.appendChild(child);
+        created.push(child);
+        if (!firstEl) firstEl = child;
+      }
+    }
+  } else {
+    firstEl = bw.create(taco, options || {});
+    container.appendChild(firstEl);
+    created.push(firstEl);
+  }
+
+  // Walk each created child to register and fire mounted (not the container itself)
+  for (var ci = 0; ci < created.length; ci++) {
+    bw.mountTree(created[ci]);
+  }
+
+  return firstEl;
 };
 
+// bw.DOM is an exact alias of bw.mount (v2.1 §2)
+bw.DOM = bw.mount;
+
 /**
- * Clean up a DOM element and all its children by calling unmount callbacks,
- * removing pub/sub subscriptions, and clearing state/render references.
+ * Append content to a target. create → insert (respecting opts.before) → mountTree.
+ * Returns the new child element.
  *
- * Called automatically by `bw.DOM()` before re-rendering. Call manually when
- * removing elements to prevent memory leaks from orphaned callbacks.
+ * @param {string|Element} target - Container
+ * @param {Object} content - TACO to append
+ * @param {Object} [opts] - {before: Element|number} for positioning
+ * @returns {Element|null} The appended element
+ * @category DOM Generation
+ */
+bw.append = function(target, content, opts) {
+  var container = _is(target, 'string') ? bw.$(target)[0] : target;
+  if (!container) return null;
+  var child = bw.create(content);
+  if (opts && opts.before !== undefined) {
+    var ref = opts.before;
+    if (typeof ref === 'number') ref = container.children[ref] || null;
+    container.insertBefore(child, ref);
+  } else {
+    container.appendChild(child);
+  }
+  bw.mountTree(child);
+  return child;
+};
+
+/**
+ * Replace an existing element with new content. unmount(old) → create(taco) →
+ * insert at position → mountTree. Returns new element. null taco = remove.
  *
- * @param {Element} element - DOM element to clean up
+ * @param {Element} ref - Element to replace
+ * @param {Object|null} taco - Replacement TACO, or null to just remove
+ * @returns {Element|null} The new element, or null
  * @category DOM Generation
- * @see bw.DOM
- * @example
- * var el = document.querySelector('#my-widget');
- * bw.cleanup(el);   // runs unmount hooks, clears _bw_state, _bw_render
- * el.remove();       // safe to remove from DOM now
  */
-bw.cleanup = function(element) {
-  if (!bw._isBrowser || !element) return;
-
-  // Deregister UUID classes from node cache for non-lifecycle UUID elements
-  var uuidEls = element.querySelectorAll('[class*="bw_uuid_"]');
-  uuidEls.forEach(function(uel) {
-    var uc = typeof uel.className === 'string' ? uel.className : (uel.getAttribute('class') || '');
-    var m = uc && uc.match(_UUID_RE);
-    if (m) delete bw._nodeMap[m[0]];
-  });
+bw.replace = function(ref, taco) {
+  if (!ref) return null;
+  var parent = ref.parentNode;
+  var next = ref.nextSibling;
 
-  // Find all lifecycle-managed elements (have bw_lc marker class)
-  const elements = element.querySelectorAll('.' + _BW_LC);
+  bw.unmount(ref);
+  if (ref.parentNode) ref.parentNode.removeChild(ref);
 
-  elements.forEach(el => {
-    var uuid = bw.getUUID(el);
+  if (taco == null) return null;
 
-    if (uuid) {
-      const callback = bw._unmountCallbacks.get(uuid);
-      if (callback) {
-        callback();
-        bw._unmountCallbacks.delete(uuid);
-      }
+  var neo = bw.create(taco);
+  if (parent) {
+    if (next) parent.insertBefore(neo, next);
+    else parent.appendChild(neo);
+  }
+  bw.mountTree(neo);
+  return neo;
+};
 
-      // Deregister from node cache
-      bw._deregisterNode(el, uuid);
-    }
+/**
+ * Refresh a component: unmountChildren → re-render → mountTree.
+ * Render throw propagates. Emits bw:refresh.
+ *
+ * @param {string|Element} ref - Component to refresh
+ * @returns {Element|null} The element
+ * @category DOM Generation
+ */
+bw.refresh = function(ref) {
+  var el = bw.el(ref);
+  if (!el) return null;
 
-    // Clean up pub/sub subscriptions tied to this element
-    if (el._bw_subs) {
-      el._bw_subs.forEach(function(unsub) { unsub(); });
-      delete el._bw_subs;
-    }
+  bw.unmountChildren(el);
+  el.innerHTML = '';
+  // Invalidate slot cache so slots re-resolve after rebuild
+  if (el._bw_slot_cache) el._bw_slot_cache = null;
 
-    // Clean up state, render, and local refs
-    delete el._bw_state;
-    delete el._bw_render;
-    delete el._bw_refs;
-  });
+  if (el._bw_render) {
+    // Let throw propagate (§3 error policy)
+    el._bw_render(el, el._bw_state || {});
+    // Walk newly created children
+    bw.mountTree(el);
+  }
 
-  // Check element itself
-  var selfUuid = bw.getUUID(element);
-  if (selfUuid) {
-    delete bw._nodeMap[selfUuid];
+  // Emit bw:refresh
+  try {
+    el.dispatchEvent(new CustomEvent('bw:refresh', {
+      bubbles: true,
+      detail: { uuid: bw.getUUID(el), type: el._bw_type || null }
+    }));
+  } catch (e) { /* jsdom */ }
 
-    const callback = bw._unmountCallbacks.get(selfUuid);
-    if (callback) {
-      callback();
-      bw._unmountCallbacks.delete(selfUuid);
-    }
+  return el;
+};
 
-    // Deregister from node cache
-    bw._deregisterNode(element, selfUuid);
+/**
+ * Update a component by dispatching to el.bw.update(data) if defined.
+ * Emits bw:statechange. If no update handle, emits specific diag warning.
+ * NEVER falls back to refresh.
+ *
+ * @param {string|Element} ref - Component to update
+ * @param {*} data - Data to pass to el.bw.update
+ * @returns {Element|null} The element
+ * @category State Management
+ */
+bw.update = function(ref, data) {
+  var el = bw.el(ref);
+  if (!el) return null;
 
-    // Clean up pub/sub subscriptions tied to element itself
-    if (element._bw_subs) {
-      element._bw_subs.forEach(function(unsub) { unsub(); });
-      delete element._bw_subs;
-    }
-    delete element._bw_state;
-    delete element._bw_render;
-    delete element._bw_refs;
+  if (el.bw && typeof el.bw.update === 'function') {
+    el.bw.update(data);
+    // Emit statechange via pub/sub lifecycle topic
+    bw.pub('bw:lifecycle', { event: 'statechange', uuid: bw.getUUID(el), data: data });
+    bw.emit(el, 'statechange', el._bw_state);
+    return el;
+  }
 
+  // No update handle — emit appropriate diag warning
+  if (el._bw_render) {
+    bw.pub('bw:diag', { code: 'update_use_refresh', uuid: bw.getUUID(el),
+      msg: 'component has o.render but no update handle — use bw.refresh() instead' });
   } else {
-    // No UUID on element itself, but still check for _bw_subs (from bw.sub())
-    if (element._bw_subs) {
-      element._bw_subs.forEach(function(unsub) { unsub(); });
-      delete element._bw_subs;
-    }
+    bw.pub('bw:diag', { code: 'update_no_handle', uuid: bw.getUUID(el),
+      msg: 'component has no update handle and no render — nothing to do' });
   }
+  return el;
 };
 
-// ===================================================================================
-// State Management: update, patch, emit/on
-// ===================================================================================
-
 /**
- * Trigger re-render of a component by calling its stored `o.render` function.
- *
- * This is the recommended way to update a component after changing its state.
- * Calls `el._bw_render(el, state)` and emits `bw:statechange` so other
- * components can react without tight coupling.
+ * Update a specific slot on a component by reference.
  *
- * @param {string|Element} target - Element ID, bw_uuid_* class, CSS selector, or DOM element
- * @returns {Element|null} The element, or null if not found / no render function
- * @category State Management
- * @see bw.patch
- * @example
- * // Given a counter element with o.render
- * el._bw_state.count++;
- * bw.update(el);  // re-renders, emits bw:statechange
+ * @param {string|Element} ref - Component reference
+ * @param {string} name - Slot name
+ * @param {*} value - Value to set
+ * @returns {boolean} True if slot was updated
+ * @category DOM Generation
  */
-bw.update = function(target) {
-  var el = bw.el(target);
-  if (el && el._bw_render) {
-    try { el._bw_render(el, el._bw_state || {}); }
-    catch (e) { _cw('o.render error: ' + e.message); }
-    bw.emit(el, 'statechange', el._bw_state);
-  }
-  return el || null;
+bw.updateSlot = function(ref, name, value) {
+  var el = bw.el(ref);
+  if (!el || !el.bw) return false;
+  var setter = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
+  if (typeof el.bw[setter] !== 'function') return false;
+  el.bw[setter](value);
+  return true;
 };
 
+// ===================================================================================
+// State Management: update, patch, emit/on
+// ===================================================================================
+
+// v2.1: old bw.update (render-based) replaced by new bw.update (dispatch-based) above.
+
 /**
  * Targeted DOM update by element ID — change one element's content or attribute
  * without rebuilding the entire component tree.
  *
  * Use `bw.patch()` for lightweight value updates (scores, labels, counters)
- * and `bw.update()` for full structural re-renders.
+ * and `bw.refresh()` for full structural re-renders.
  *
  * @param {string|Element} id - Element ID, bw_uuid_* class, CSS selector, or DOM element.
  *   Uses node cache for O(1) lookup; falls back to DOM query on cache miss.
@@ -1439,25 +2069,47 @@ bw.patch = function(id, content, attr) {
   var el = bw.el(id);
   if (!el) return null;
 
+  // v2.1 discriminated patch:
+  // - string/number → text content
+  // - plain object without .t → attributes
+  // - TACO (has .t) → unmountChildren + create + mountTree
+  // - array → unmountChildren + create each + mountTree
+  // - legacy 3rd arg: explicit attribute set
+
   if (attr) {
-    // Patch an attribute
+    // Legacy: explicit attribute patch
     el.setAttribute(attr, String(content));
+  } else if (_is(content, 'string') || _is(content, 'number')) {
+    // Text patch
+    el.textContent = String(content);
   } else if (_isA(content)) {
-    // Patch with array of children (strings and/or TACOs)
+    // Array of children: full pipeline
+    bw.unmountChildren(el);
     el.innerHTML = '';
-    content.forEach(function(item) {
-      if (_is(item, 'string') || _is(item, 'number')) {
-        el.appendChild(document.createTextNode(String(item)));
-      } else if (item && item.t) {
-        el.appendChild(bw.createDOM(item));
+    for (var i = 0; i < content.length; i++) {
+      var item = content[i];
+      if (item != null) {
+        if (_is(item, 'object') && item.t) {
+          el.appendChild(bw.create(item));
+        } else {
+          el.appendChild(document.createTextNode(String(item)));
+        }
       }
-    });
-  } else if (_is(content, 'object') && content.t) {
-    // Patch with a TACO — replace children
+    }
+    bw.mountTree(el);
+  } else if (_is(content, 'object') && content !== null && content.t) {
+    // TACO content: full pipeline
+    bw.unmountChildren(el);
     el.innerHTML = '';
-    el.appendChild(bw.createDOM(content));
+    el.appendChild(bw.create(content));
+    bw.mountTree(el);
+  } else if (_is(content, 'object') && content !== null) {
+    // Plain object without .t → attribute patch
+    var attrKeys = _keys(content);
+    for (var ak = 0; ak < attrKeys.length; ak++) {
+      el.setAttribute(attrKeys[ak], String(content[attrKeys[ak]]));
+    }
   } else {
-    // Patch text content
     el.textContent = String(content);
   }
   return el;
@@ -1490,6 +2142,90 @@ bw.patchAll = function(patches) {
   return results;
 };
 
+/**
+ * Keyed reconciliation: match existing children by `el._bw_key`, move/add/remove
+ * to match `items` order. Moved nodes are the SAME DOM nodes (state/focus survives).
+ *
+ * @param {Element} parentEl - Container element
+ * @param {Array} items - Data array for desired children
+ * @param {Object} opts - {key: fn(item)→string, create: fn(item)→TACO, update: fn(el, item)}
+ * @category DOM Generation
+ */
+bw.syncChildren = function(parentEl, items, opts) {
+  if (!parentEl || !items || !opts) return;
+  var keyFn = opts.key;
+  var createFn = opts.create;
+  var updateFn = opts.update;
+
+  // Save focus to restore after reorder (insertBefore can blur in some environments)
+  /* c8 ignore next -- document is always defined in jsdom test env */
+  var focused = (typeof document !== 'undefined') ? document.activeElement : null;
+  if (focused && !parentEl.contains(focused)) focused = null;
+
+  // Build map of existing keyed children
+  var existingByKey = {};
+  var child = parentEl.firstElementChild;
+  while (child) {
+    if (child._bw_key != null) {
+      existingByKey[child._bw_key] = child;
+    }
+    child = child.nextElementSibling;
+  }
+
+  // Determine which keys are in the new items
+  var newKeys = {};
+  for (var i = 0; i < items.length; i++) {
+    newKeys[keyFn(items[i])] = true;
+  }
+
+  // Remove absent keys (unmount + remove)
+  var toRemove = [];
+  for (var ek in existingByKey) {
+    if (_hop.call(existingByKey, ek) && !newKeys[ek]) {
+      toRemove.push(existingByKey[ek]);
+    }
+  }
+  for (var ri = 0; ri < toRemove.length; ri++) {
+    bw.unmount(toRemove[ri]);
+    if (toRemove[ri].parentNode) toRemove[ri].parentNode.removeChild(toRemove[ri]);
+    delete existingByKey[toRemove[ri]._bw_key];
+  }
+
+  // Process items in order: create new, update existing, reorder
+  var prevNode = null;
+  for (var j = 0; j < items.length; j++) {
+    var k = keyFn(items[j]);
+    var existing = existingByKey[k];
+
+    if (existing) {
+      // Update existing
+      if (updateFn) updateFn(existing, items[j]);
+      // Move into correct position if needed
+      var expectedAfter = prevNode ? prevNode.nextSibling : parentEl.firstChild;
+      if (existing !== expectedAfter) {
+        parentEl.insertBefore(existing, expectedAfter);
+      }
+      prevNode = existing;
+    } else {
+      // Create new
+      var taco = createFn(items[j]);
+      var neo = bw.create(taco);
+      neo._bw_key = k;
+      var insertBefore = prevNode ? prevNode.nextSibling : parentEl.firstChild;
+      parentEl.insertBefore(neo, insertBefore);
+      bw.mountTree(neo);
+      existingByKey[k] = neo;
+      prevNode = neo;
+    }
+  }
+
+  // Restore focus if it was lost during reorder
+  /* c8 ignore next 2 -- focus management not exercised in jsdom */
+  if (focused && focused.isConnected && document.activeElement !== focused) {
+    try { focused.focus(); } catch (e) {}
+  }
+};
+
 /**
  * Emit a custom DOM event on an element.
  *
@@ -1538,12 +2274,13 @@ bw.emit = function(target, eventName, detail) {
  */
 bw.on = function(target, eventName, handler) {
   var el = bw.el(target);
-  if (el) {
-    el.addEventListener('bw:' + eventName, function(e) {
-      handler(e.detail, e);
-    });
-  }
-  return el || null;
+  if (!el) return function() {};
+  var wrapped = function(e) { handler(e.detail, e); };
+  el.addEventListener('bw:' + eventName, wrapped);
+  // v2.1: return off() function (not the element)
+  return function() {
+    el.removeEventListener('bw:' + eventName, wrapped);
+  };
 };
 
 // ===================================================================================
@@ -1573,29 +2310,48 @@ bw.on = function(target, eventName, handler) {
  */
 bw.pub = function(topic, detail) {
   var called = 0;
-  // Exact-match subscribers
-  var subs = bw._topics[topic];
-  if (subs && subs.length > 0) {
+
+  function _deliver(subs, topicKey) {
+    if (!subs || subs.length === 0) return;
     var snapshot = subs.slice();
+    var pruned = false;
+    var ghostDiags = [];
     for (var i = 0; i < snapshot.length; i++) {
-      try { snapshot[i].handler(detail, topic); called++; }
-      catch (err) { _cw('bw.pub: subscriber error on topic "' + topic + '":', err); }
+      var sub = snapshot[i];
+      // Liveness check: tied element that is disconnected and not detach-exempt
+      // Skip liveness check for diag/lifecycle topics to avoid recursion
+      if (sub.tiedEl && topic !== 'bw:diag' && topic !== 'bw:lifecycle') {
+        var tiedUuid = bw.getUUID(sub.tiedEl);
+        if (!sub.tiedEl.isConnected && !(tiedUuid && bw._detached[tiedUuid])) {
+          // Ghost: prune this subscription
+          var idx = subs.indexOf(sub);
+          if (idx !== -1) subs.splice(idx, 1);
+          pruned = true;
+          ghostDiags.push({ code: 'ghost_prune', uuid: tiedUuid, topic: topicKey });
+          continue;
+        }
+      }
+      try { sub.handler(detail, topic); called++; }
+      catch (err) { _cw('bw.pub: subscriber error on topic "' + topicKey + '":', err); }
+    }
+    if (pruned && subs.length === 0) delete bw._topics[topicKey];
+    // Emit ghost_prune diags AFTER delivery loop to avoid re-entrancy
+    for (var g = 0; g < ghostDiags.length; g++) {
+      bw.pub('bw:diag', ghostDiags[g]);
     }
   }
+
+  // Exact-match subscribers
+  _deliver(bw._topics[topic], topic);
+
   // Wildcard subscribers -- patterns ending with '*'
   var keys = Object.keys(bw._topics);
   for (var k = 0; k < keys.length; k++) {
     var pat = keys[k];
     if (pat.charAt(pat.length - 1) !== '*') continue;
-    var prefix = pat.slice(0, -1); // strip trailing '*'
+    var prefix = pat.slice(0, -1);
     if (topic.length >= prefix.length && topic.substring(0, prefix.length) === prefix && topic !== pat) {
-      var wsubs = bw._topics[pat];
-      if (!wsubs) continue;
-      var wsnap = wsubs.slice();
-      for (var w = 0; w < wsnap.length; w++) {
-        try { wsnap[w].handler(detail, topic); called++; }
-        catch (err) { _cw('bw.pub: wildcard subscriber error on "' + pat + '" for topic "' + topic + '":', err); }
-      }
+      _deliver(bw._topics[pat], pat);
     }
   }
   return called;
@@ -1610,7 +2366,7 @@ bw.pub = function(topic, detail) {
  * receives `(detail, topic)` so it can distinguish which topic fired.
  *
  * Optional third argument ties the subscription to a DOM element's lifecycle --
- * when `bw.cleanup()` is called on that element, the subscription is automatically
+ * when `bw.unmount()` is called on that element, the subscription is automatically
  * removed, preventing memory leaks.
  *
  * @param {string} topic - Topic name, or wildcard pattern ending in '*'
@@ -1634,7 +2390,10 @@ bw.pub = function(topic, detail) {
 bw.sub = function(topic, handler, el) {
   var id = ++bw._subIdCounter;
   if (!bw._topics[topic]) bw._topics[topic] = [];
-  bw._topics[topic].push({ handler: handler, id: id });
+  var entry = { handler: handler, id: id };
+  // Track tied element for liveness checks in bw.pub
+  if (el) entry.tiedEl = el;
+  bw._topics[topic].push(entry);
 
   var unsub = function() {
     var subs = bw._topics[topic];
@@ -1647,7 +2406,7 @@ bw.sub = function(topic, handler, el) {
   if (el) {
     if (!el._bw_subs) el._bw_subs = [];
     el._bw_subs.push(unsub);
-    // Ensure element has UUID + bw_lc so bw.cleanup() finds it
+    // Ensure element has UUID + bw_lc so unmount finds it
     if (!bw.getUUID(el)) {
       el.classList.add(bw.uuid('uuid'));
     }
@@ -1712,6 +2471,88 @@ bw.once = function(topic, handler, el) {
   return unsub;
 };
 
+/**
+ * Declared dataflow: recompute fn(inputs...) on any input publish.
+ * Returns a disposer function. Optionally ties to an element lifecycle.
+ *
+ * @param {Array<string>} inputs - Topic names to subscribe to
+ * @param {Function} fn - Combiner: fn(...latestValues) → result
+ * @param {string} outTopic - Topic to publish result on
+ * @param {Object} [opts] - {seed: [], immediate: bool, el: Element}
+ * @returns {Function} Disposer
+ * @category Pub/Sub
+ */
+bw.derive = function(inputs, fn, outTopic, opts) {
+  opts = opts || {};
+  var values = new Array(inputs.length);
+  var ready = new Array(inputs.length);
+  var disposed = false;
+  var unsubs = [];
+
+  // Validate seed length
+  if (opts.seed) {
+    if (opts.seed.length !== inputs.length) {
+      throw new TypeError('bw.derive: seed length (' + opts.seed.length + ') must match inputs length (' + inputs.length + ')');
+    }
+    for (var si = 0; si < opts.seed.length; si++) {
+      values[si] = opts.seed[si];
+      ready[si] = true;
+    }
+  }
+
+  // Cycle detection
+  if (inputs.indexOf(outTopic) !== -1) {
+    bw.pub('bw:diag', { code: 'derive_cycle', inputs: inputs, outTopic: outTopic });
+  }
+
+  function _allReady() {
+    for (var r = 0; r < ready.length; r++) { if (!ready[r]) return false; }
+    return true;
+  }
+
+  function _compute() {
+    /* c8 ignore next -- disposed guard: race condition safety net */
+    if (disposed) return;
+    try {
+      var result = fn.apply(null, values);
+      bw.pub(outTopic, result);
+    } catch (e) {
+      bw.pub('bw:diag', { code: 'derive_error', outTopic: outTopic, msg: e.message });
+    }
+  }
+
+  for (var i = 0; i < inputs.length; i++) {
+    (function(idx) {
+      var unsub = bw.sub(inputs[idx], function(v) {
+        values[idx] = v;
+        ready[idx] = true;
+        if (_allReady()) _compute();
+      });
+      unsubs.push(unsub);
+    })(i);
+  }
+
+  // Immediate: publish once at creation if ready
+  if (opts.immediate && _allReady()) _compute();
+
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    for (var u = 0; u < unsubs.length; u++) {
+      /* c8 ignore next -- unsub() never throws in practice */
+      try { unsubs[u](); } catch (e) {}
+    }
+  }
+
+  // Tie to element lifecycle
+  if (opts.el) {
+    if (!opts.el._bw_subs) opts.el._bw_subs = [];
+    opts.el._bw_subs.push(dispose);
+  }
+
+  return dispose;
+};
+
 // ===================================================================================
 // Function Registry (revived from v1 for string dispatch contexts)
 // ===================================================================================
@@ -1734,7 +2575,9 @@ bw._fnIDCounter = 0;
  * @see bw.funcGetDispatchStr
  */
 bw.funcRegister = function(fn, name) {
+  /* c8 ignore next -- non-function guard: tests always pass valid functions */
   if (!_is(fn, 'function')) return '';
+  /* c8 ignore next -- ternary branches: both name and auto-generated paths tested elsewhere */
   var fnID = (_is(name, 'string') && name.length > 0) ? name : ('bw_fn_' + bw._fnIDCounter++);
   bw._fnRegistry[fnID] = fn;
   return fnID;
@@ -1779,10 +2622,12 @@ bw.funcGetDispatchStr = function(name, argStr) {
  * @category Function Registry
  */
 bw.funcUnregister = function(name) {
+  /* c8 ignore start -- funcUnregister: tested via htmlPage/funcRegister integration */
   if (name in bw._fnRegistry) {
     delete bw._fnRegistry[name];
     return true;
   }
+  /* c8 ignore stop */
   return false;
 };
 
@@ -1905,28 +2750,9 @@ bw._resolveTemplate = function(str, state, compile) {
   return result;
 };
 
-// ===================================================================================
-// Deprecation stubs for removed ComponentHandle APIs (v2.0.19)
-// ===================================================================================
-
-bw._extractDeps = undefined;
-bw._dirtyComponents = undefined;
-bw._flushScheduled = undefined;
-bw._scheduleFlush = undefined;
-bw._doFlush = undefined;
-bw._ComponentHandle = undefined;
-
-/**
- * No-op flush (ComponentHandle removed in v2.0.19).
- * Kept as no-op for backward compatibility.
- * @category Component
- */
-bw.flush = function() {};
-
-
-bw.when = function() { throw new Error('bw.when() removed in v2.0.19. Use conditional logic in o.render instead.'); };
-bw.each = function() { throw new Error('bw.each() removed in v2.0.19. Use array mapping in o.render instead.'); };
-bw.component = function() { throw new Error('bw.component() removed in v2.0.19. Use o.handle/o.slots on TACO options instead.'); };
+// v2.1: ComponentHandle APIs (_extractDeps, _dirtyComponents, _flushScheduled,
+// _scheduleFlush, _doFlush, _ComponentHandle, flush, when, each, component)
+// fully removed — no stubs needed in v2.1.
 
 
 // ===================================================================================
@@ -1953,7 +2779,10 @@ bw.component = function() { throw new Error('bw.component() removed in v2.0.19.
  */
 bw.message = function(target, action, data) {
   var el = bw.el(target);
-  if (!el) el = bw.$('.' + target)[0];
+  // Fallback: try class selector, but only for safe selector strings
+  if (!el && _is(target, 'string') && target.indexOf('#') !== 0 && target.indexOf('.') !== 0) {
+    try { el = bw.$('.' + target)[0]; } catch (e) { /* invalid selector */ }
+  }
   if (!el || !el.bw || typeof el.bw[action] !== 'function') {
     _cw('bw.message: no handle method "' + action + '" on ' + target);
     return false;
@@ -2168,20 +2997,12 @@ bw.jsonPatch = function(obj, ops) {
 // ===================================================================================
 
 /**
- * Registry of named functions sent via register messages.
- * Populated by bw.apply({ type: 'register', name, body }).
- * Invoked by bw.apply({ type: 'call', name, args }).
+ * Registry of named functions for backward compat with code that checks _clientFunctions.
+ * v2.1: exec/register are rejected at the protocol level; use bw.registerRemote() instead.
  * @private
  */
 bw._clientFunctions = {};
 
-/**
- * Whether exec messages are allowed. Set by bwclient connect opts.allowExec.
- * Default false — exec messages are rejected unless explicitly opted in.
- * @private
- */
-bw._allowExec = false;
-
 /**
  * Parse a bwserve protocol message string, supporting both strict JSON
  * and r-prefixed relaxed JSON (single-quoted strings, trailing commas).
@@ -2278,16 +3099,19 @@ bw.parseJSONFlex = function(str) {
 /**
  * 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)
+ * Dispatches one of 12 v:1 message types:
+ *   mount    — bw.mount(ref, taco)
+ *   patch    — bw.patch(ref, text/attrs/content)
+ *   append   — bw.append(ref, taco)
+ *   replace  — bw.replace(ref, taco)
+ *   remove   — bw.remove(ref)
+ *   refresh  — bw.refresh(ref)
+ *   update   — bw.update(ref, data)
+ *   message  — bw.message(ref, action, data)
  *   batch    — iterate ops, call bw.apply for each
- *   message  — bw.message(target, action, data)
- *   register — store a named function for later call()
- *   call     — invoke a registered function
- *   exec     — execute arbitrary JS (requires allowExec)
+ *   listen   — subscribe to a pub/sub topic
+ *   unlisten — unsubscribe from a topic
+ *   call     — invoke a registered remote function
  *
  * Target resolution:
  *   Starts with '#' or '.' → CSS selector (querySelector)
@@ -2297,85 +3121,242 @@ bw.parseJSONFlex = function(str) {
  * @returns {boolean} true if the message was applied successfully
  * @category Core
  */
+// ===================================================================================
+// bw.actions — document-level delegated action dispatcher (§5.4)
+// ===================================================================================
+
+bw.actions = (function() {
+  var _enabled = false;
+  var _installed = false;
+
+  function _findActionToken(el) {
+    /* c8 ignore next -- el always has classList in DOM event handlers */
+    if (!el || !el.classList) return null;
+    var cls = el.classList;
+    var tokens = [];
+    /* c8 ignore next 2 -- action token extraction: only hit via real DOM clicks */
+    for (var i = 0; i < cls.length; i++) {
+      if (cls[i].indexOf('bw_act_') === 0) tokens.push(cls[i].substring(7));
+    }
+    return tokens;
+  }
+
+  function _findOwner(el) {
+    var node = el;
+    while (node) {
+      if (node._bw_type) {
+        return { uuid: bw.getUUID(node), type: node._bw_type };
+      }
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  function _handleEvent(e) {
+    /* c8 ignore next -- guard only reachable if disabled between install and event */
+    if (!_enabled) return;
+    var node = e.target;
+    /* c8 ignore start -- action dispatch: requires real DOM event delegation not exercised in unit tests */
+    while (node && node !== document) {
+      var tokens = _findActionToken(node);
+      if (tokens && tokens.length > 0) {
+        var action = tokens[0];
+        if (tokens.length > 1) {
+          bw.pub('bw:diag', { code: 'act_multiple', tokens: tokens });
+        }
+        var tag = node.tagName ? node.tagName.toLowerCase() : '';
+        if (tag === 'a' || tag === 'form') e.preventDefault();
+        var value = null;
+        var name = null;
+        var form = null;
+        if (tag === 'input' || tag === 'textarea' || tag === 'select') {
+          value = node.value;
+          name = node.getAttribute('name');
+        }
+        if (tag === 'form') {
+          form = {};
+          try {
+            var fd = new FormData(node);
+            fd.forEach(function(v, k) { form[k] = v; });
+          } catch (ex) {}
+        }
+        var ref = bw.getUUID(node) || node.getAttribute('id') || null;
+        var owner = _findOwner(node.parentElement);
+        var payload = { action: action, value: value, name: name, ref: ref, owner: owner };
+        if (form) payload.form = form;
+        bw.pub('act:' + action, payload);
+        if (bw.remote && typeof bw.remote.send === 'function') {
+          bw.remote.send({ v: 1, type: 'event', action: action, value: value, name: name, ref: ref, owner: owner });
+        }
+        return;
+      }
+      node = node.parentElement;
+    }
+    /* c8 ignore stop */
+  }
+
+  var _installedDoc = null;
+
+  function _install() {
+    /* c8 ignore next -- document always available in test env */
+    if (typeof document === 'undefined') return;
+    // Re-install if document changed (jsdom test isolation)
+    if (_installedDoc === document) return;
+    _installedDoc = document;
+    document.addEventListener('click', _handleEvent, true);
+    document.addEventListener('change', _handleEvent, true);
+    document.addEventListener('input', _handleEvent, true);
+    document.addEventListener('submit', _handleEvent, true);
+  }
+
+  return {
+    enable: function() { _enabled = true; _install(); },
+    disable: function() { _enabled = false; },
+    _ensureInstalled: function() { if (_enabled) _install(); },
+    _reset: function() { _enabled = false; _installedDoc = null; }
+  };
+})();
+
+bw.remote = null;
+bw._clientRemotes = {};
+bw._wireListeners = {};
+
+bw.registerRemote = function(name, fn) { bw._clientRemotes[name] = fn; };
+
+bw.connect = function(url) {
+  bw.pub('bw:diag', { code: 'remote_status', status: 'connecting', url: url });
+  var es = new EventSource(url);
+  var remote = {
+    send: function(msg) {
+      try {
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', url.replace('/events/', '/apply/'), true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.send(JSON.stringify(msg));
+      } catch (e) {}
+    },
+    close: function() { es.close(); }
+  };
+  es.onopen = function() { bw.pub('bw:diag', { code: 'remote_status', status: 'connected' }); };
+  es.onmessage = function(e) { try { bw.apply(JSON.parse(e.data)); } catch (ex) {} };
+  es.onerror = function() { bw.pub('bw:diag', { code: 'remote_status', status: 'disconnected' }); };
+  bw.remote = remote;
+  return remote;
+};
+
+function _sanitizeWireTaco(taco) {
+  if (!taco || typeof taco !== 'object') return taco;
+  if (taco.a) {
+    var cleanAttrs = {};
+    var akeys = _keys(taco.a);
+    for (var ai = 0; ai < akeys.length; ai++) {
+      if (akeys[ai].substring(0, 2).toLowerCase() === 'on' && typeof taco.a[akeys[ai]] === 'string') continue;
+      cleanAttrs[akeys[ai]] = taco.a[akeys[ai]];
+    }
+    taco = Object.assign({}, taco, { a: cleanAttrs });
+  }
+  if (_isA(taco.c)) {
+    taco = Object.assign({}, taco, { c: taco.c.map(_sanitizeWireTaco) });
+  } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+    taco = Object.assign({}, taco, { c: _sanitizeWireTaco(taco.c) });
+  }
+  return taco;
+}
+
 bw.apply = function(msg) {
   if (!msg || !msg.type) return false;
-
+  if (msg.type === 'hello') return true; // handshake -- no-op ack
+  if (msg.type !== 'batch' && msg.v !== 1) {
+    bw.pub('bw:diag', { code: 'wire_rejected', msg: 'missing or unknown version', v: msg.v });
+    return false;
+  }
   var type = msg.type;
-  var target = msg.target;
+  var ref = msg.ref;
+  if (msg.target !== undefined || msg.node !== undefined) {
+    bw.pub('bw:diag', { code: 'wire_rejected', msg: 'v:1 uses ref/taco, not target/node' });
+    return false;
+  }
 
-  if (type === 'replace') {
-    var el = bw.el(target);
-    if (!el) return false;
-    bw.DOM(el, msg.node);
+  if (type === 'mount') {
+    var mountTarget = bw.el(ref);
+    if (!mountTarget) return false;
+    bw.mount(mountTarget, _sanitizeWireTaco(msg.taco));
     return true;
-
   } else if (type === 'patch') {
-    var patched = bw.patch(target, msg.content, msg.attr);
-    return patched !== null;
-
+    var patchEl = bw.el(ref);
+    if (!patchEl) return false;
+    if (msg.text !== undefined) bw.patch(patchEl, msg.text);
+    else if (msg.attrs) bw.patch(patchEl, msg.attrs);
+    else if (msg.content) bw.patch(patchEl, _sanitizeWireTaco(msg.content));
+    return true;
   } else if (type === 'append') {
-    var parent = bw.el(target);
-    if (!parent) return false;
-    var child = bw.createDOM(msg.node);
-    parent.appendChild(child);
+    var appendTarget = bw.el(ref);
+    if (!appendTarget) return false;
+    bw.append(appendTarget, _sanitizeWireTaco(msg.taco));
+    return true;
+  } else if (type === 'replace') {
+    var replaceEl = bw.el(ref);
+    if (!replaceEl) return false;
+    bw.replace(replaceEl, _sanitizeWireTaco(msg.taco));
     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();
+    var removeEl = bw.el(ref);
+    if (!removeEl) return false;
+    bw.remove(removeEl);
     return true;
-
+  } else if (type === 'refresh') {
+    var refreshEl = bw.el(ref);
+    if (!refreshEl) return false;
+    if (!refreshEl._bw_render) {
+      bw.pub('bw:diag', { code: 'refresh_no_render', ref: ref });
+      return false;
+    }
+    bw.refresh(refreshEl);
+    return true;
+  } else if (type === 'update') {
+    var updateEl = bw.el(ref);
+    if (!updateEl) return false;
+    bw.update(updateEl, msg.data);
+    return true;
+  } else if (type === 'message') {
+    return bw.message(ref, msg.action, msg.data) !== false;
   } else if (type === 'batch') {
     if (!_isA(msg.ops)) return false;
     var allOk = true;
-    msg.ops.forEach(function(op) {
-      if (!bw.apply(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;
+    for (var bi = 0; bi < msg.ops.length; bi++) {
+      /* c8 ignore next 2 -- batch catch: bw.apply() handles errors internally */
+      try { if (!bw.apply(msg.ops[bi])) allOk = false; }
+      catch (e) { allOk = false; }
     }
-
+    return allOk;
+  } else if (type === 'listen') {
+    if (!msg.topic) return false;
+    if (bw._wireListeners[msg.topic]) return true;
+    bw._wireListeners[msg.topic] = bw.sub(msg.topic, function(d) {
+      if (bw.remote && typeof bw.remote.send === 'function') {
+        bw.remote.send({ v: 1, type: 'topic', topic: msg.topic, data: d });
+      }
+    });
+    return true;
+  } else if (type === 'unlisten') {
+    if (!msg.topic || !bw._wireListeners[msg.topic]) return false;
+    bw._wireListeners[msg.topic]();
+    delete bw._wireListeners[msg.topic];
+    return true;
   } else if (type === 'call') {
     if (!msg.name) return false;
-    var fn = bw._clientFunctions[msg.name];
+    var fn = bw._clientRemotes[msg.name] || bw._clientFunctions[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;
-    }
+      fn.apply(null, args);
+      return true;
+    } catch (e) { return false; }
+  } else if (type === 'exec' || type === 'register') {
+    bw.pub('bw:diag', { code: 'wire_rejected', msg: type + ' is not a valid v:1 verb' });
+    return false;
   }
-
+  bw.pub('bw:diag', { code: 'wire_rejected', msg: 'unknown type: ' + type });
   return false;
 };
 
@@ -2425,10 +3406,13 @@ bw.inspect = function(target, depth) {
   if (depth === undefined || depth === null) depth = 3;
 
   function walk(node, d) {
+    /* c8 ignore next -- null node guard: children iteration always passes valid nodes */
     if (!node) return null;
     // Skip non-element nodes (text, comment, etc.)
+    /* c8 ignore next -- nodeType guard: el.children only contains elements */
     if (node.nodeType !== 1) return null;
 
+    /* c8 ignore next -- tagName always exists on elements; #text fallback is defensive */
     var info = { tag: node.tagName ? node.tagName.toLowerCase() : '#text' };
 
     // Identity
@@ -2562,29 +3546,59 @@ bw.injectCSS = function(css, options = {}) {
     _cw('bw.injectCSS requires a DOM environment');
     return null;
   }
-  
+
   const { id = 'bw_styles', append = true } = options;
-  
+
+  // Warn if user is using bw_style_* reserved namespace
+  if (id && /^bw_style_/.test(id) && !options._internal) {
+    bw.pub('bw:diag', { code: 'css_reserved_id', ref: id, msg: 'id "' + id + '" is in the reserved bw_style_* namespace' });
+  }
+
   // Get or create style element
   let styleEl = document.getElementById(id);
-  
+
   if (!styleEl) {
     styleEl = document.createElement('style');
     styleEl.id = id;
     styleEl.type = 'text/css';
-    document.head.appendChild(styleEl);
+    // Layer ordering: insert bw_style_* elements in deterministic order
+    if (/^bw_style_/.test(id)) {
+      var _layerOrder = ['bw_style_reset', 'bw_style_structural', 'bw_style_global'];
+      var myIdx = _layerOrder.indexOf(id);
+      if (myIdx === -1) myIdx = _layerOrder.length; // scoped styles after global
+      // Find the first existing bw_style_* element that should come after this one
+      var inserted = false;
+      var headStyles = document.head.querySelectorAll('style[id^="bw_style_"]');
+      for (var si = 0; si < headStyles.length; si++) {
+        var thatIdx = _layerOrder.indexOf(headStyles[si].id);
+        if (thatIdx === -1) thatIdx = _layerOrder.length;
+        if (thatIdx > myIdx) {
+          document.head.insertBefore(styleEl, headStyles[si]);
+          inserted = true;
+          break;
+        }
+      }
+      if (!inserted) document.head.appendChild(styleEl);
+    } else {
+      document.head.appendChild(styleEl);
+    }
   }
-  
+
+  // Apply CSP nonce if configured
+  if (bw.config && bw.config.cspNonce) {
+    styleEl.setAttribute('nonce', bw.config.cspNonce);
+  }
+
   // Convert CSS if needed
   const cssStr = _is(css, 'string') ? css : bw.css(css, options);
-  
+
   // Set or append CSS
   if (append && styleEl.textContent) {
     styleEl.textContent += '\n' + cssStr;
   } else {
     styleEl.textContent = cssStr;
   }
-  
+
   return styleEl;
 };
 
@@ -2698,7 +3712,7 @@ bw.clip = _clip;
  * every matched element (same apply rules as `bw.el()`):
  * - string/number: sets `el.textContent`
  * - function: calls `apply(el)` for each element
- * - TACO object: clears children, mounts TACO via `bw.createDOM()`
+ * - TACO object: clears children, mounts TACO via `bw.create()`
  * - array: clears children, appends each item
  *
  * @param {string|Element|Array} selector - CSS selector, element, or array
@@ -2713,35 +3727,36 @@ bw.clip = _clip;
  *   el.style.opacity = '0.5';
  * })
  */
-if (bw._isBrowser) {
-  bw.$ = function(selector, apply) {
-    var els;
-    if (!selector) {
-      els = [];
-    } else if (_isA(selector)) {
-      els = selector;
-    } else if (selector.nodeType) {
-      els = [selector];
-    } else if (selector.length !== undefined && !_is(selector, 'string')) {
-      els = Array.from(selector);
-    } else if (_is(selector, 'string')) {
-      els = Array.from(document.querySelectorAll(selector));
-    } else {
-      els = [];
-    }
+// Always define bw.$ — use dynamic _isBrowser check so it works when
+// jsdom globals are injected after module load (test environments).
+bw.$ = function(selector, apply) {
+  if (!bw._isBrowser) return [];
+  var els;
+  if (!selector) {
+    els = [];
+  } else if (_isA(selector)) {
+    els = selector;
+  } else if (selector.nodeType) {
+    els = [selector];
+  } else if (selector.length !== undefined && !_is(selector, 'string')) {
+    els = Array.from(selector);
+  } else if (_is(selector, 'string')) {
+    els = Array.from(document.querySelectorAll(selector));
+  } else {
+    els = [];
+  }
 
-    if (apply !== undefined) {
-      for (var i = 0; i < els.length; i++) _applyTo(els[i], apply);
-    }
+  if (apply !== undefined) {
+    for (var i = 0; i < els.length; i++) _applyTo(els[i], apply);
+  }
 
-    return els;
-  };
+  return els;
+};
 
-  // Convenience single element selector
-  bw.$.one = function(selector) {
-    return bw.$(selector)[0] || null;
-  };
-}
+// Convenience single element selector
+bw.$.one = function(selector) {
+  return bw.$(selector)[0] || null;
+};
 
 
 // =========================================================================
@@ -2757,8 +3772,12 @@ if (bw._isBrowser) {
 function _scopeToStyleId(scope) {
   if (!scope || scope === '' || scope === 'global') return 'bw_style_global';
   if (scope === 'reset') return 'bw_style_reset';
-  // Strip leading # or . and convert - to _
-  var clean = scope.replace(/^[#.]/, '').replace(/-/g, '_');
+  if (scope === 'structural') return 'bw_style_structural';
+  // Preserve sigil distinction: '#dash' → 'id_dash', '.dash' → 'cls_dash'
+  var clean = scope;
+  if (clean.charAt(0) === '#') clean = 'id_' + clean.substring(1);
+  else if (clean.charAt(0) === '.') clean = 'cls_' + clean.substring(1);
+  clean = clean.replace(/-/g, '_');
   return 'bw_style_' + clean;
 }
 
@@ -2787,6 +3806,18 @@ bw.makeStyles = function(config) {
   var fullConfig = Object.assign({}, DEFAULT_PALETTE_CONFIG, config || {});
   if (config && !config.tertiary) fullConfig.tertiary = fullConfig.primary;
 
+  // Contrast check: warn if primary/secondary seeds are too close
+  if (fullConfig.primary && fullConfig.secondary) {
+    var l1 = relativeLuminance(fullConfig.primary);
+    var l2 = relativeLuminance(fullConfig.secondary);
+    var bright = Math.max(l1, l2);
+    var dark = Math.min(l1, l2);
+    var ratio = (bright + 0.05) / (dark + 0.05);
+    if (ratio < 1.5) {
+      bw.pub('bw:diag', { code: 'contrast_aa', msg: 'primary/secondary seeds have near-identical luminance (ratio ' + ratio.toFixed(2) + ')' });
+    }
+  }
+
   // Derive primary palette
   var palette = derivePalette(fullConfig);
 
@@ -2807,6 +3838,7 @@ bw.makeStyles = function(config) {
 
   // Add body-level surface overrides for the alternate palette.
   // When .bw_theme_alt is on <html>, ".bw_theme_alt body" correctly matches.
+  /* c8 ignore next 3 -- altPalette.surface always provided by derivePalette */
   altRawRules['body'] = {
     'color': altPalette.dark.base,
     'background-color': altPalette.surface || altPalette.light.base
@@ -2853,6 +3885,8 @@ bw.applyStyles = function(styles, scope) {
     _cw('bw.applyStyles: invalid styles object');
     return null;
   }
+  // Reject complex/comma scopes
+  if (scope && !_validateThemeScope(scope)) return null;
 
   var styleId = _scopeToStyleId(scope);
 
@@ -2865,9 +3899,25 @@ bw.applyStyles = function(styles, scope) {
   // Wrap alternate rules with .bw_theme_alt
   var altRules = styles.alternateRules;
   if (altRules) {
+    // When scoped: remove the raw 'body' rule (dead as descendant of scope)
+    // and add a self-rule on the scope root instead
+    var bodyDecls = null;
+    if (scope && altRules['body']) {
+      bodyDecls = altRules['body'];
+      // Work on a shallow copy so we don't mutate the original
+      var altCopy = {};
+      for (var k in altRules) {
+        if (Object.prototype.hasOwnProperty.call(altRules, k) && k !== 'body') altCopy[k] = altRules[k];
+      }
+      altRules = altCopy;
+    }
     if (scope) {
       // Scoped compound: #scope.bw_theme_alt .bw_card
       altRules = scopeRulesUnder(altRules, scope + '.bw_theme_alt');
+      // Add self surface rule for the scope root
+      if (bodyDecls) {
+        altRules[scope + '.bw_theme_alt'] = bodyDecls;
+      }
     } else {
       // Global: .bw_theme_alt .bw_card
       altRules = scopeRulesUnder(altRules, '.bw_theme_alt');
@@ -2880,7 +3930,7 @@ bw.applyStyles = function(styles, scope) {
     combined += '\n' + bw.css(altRules);
   }
 
-  return bw.injectCSS(combined, { id: styleId, append: false });
+  return bw.injectCSS(combined, { id: styleId, append: false, _internal: true });
 };
 
 /**
@@ -2901,19 +3951,29 @@ bw.applyStyles = function(styles, scope) {
  * bw.loadStyles({ primary: '#4f46e5' }, '#my-dashboard');   // custom, scoped
  */
 bw.loadStyles = function(config, scope) {
-  // Also inject structural CSS first (only once)
-  if (bw._isBrowser) {
-    var existing = document.getElementById('bw_structural');
-    if (!existing) {
-      var structuralCSS = bw.css(getStructuralStyles());
-      bw.injectCSS(structuralCSS, { id: 'bw_structural', append: false });
-    }
-  }
+  // Inject structural CSS first (only once)
+  bw.loadStructural();
   var styles = bw.makeStyles(config);
   bw.applyStyles(styles, scope);
   return styles;
 };
 
+/**
+ * Inject structural (theme-independent) CSS only. Idempotent.
+ *
+ * @returns {Element|null} The `<style>` element, or null in Node.js
+ * @category CSS & Styling
+ * @see bw.loadStyles
+ * @see bw.clearStyles
+ */
+bw.loadStructural = function() {
+  if (!bw._isBrowser) return null;
+  var existing = document.getElementById('bw_style_structural');
+  if (existing) return existing;
+  var structuralCSS = bw.css(getStructuralStyles());
+  return bw.injectCSS(structuralCSS, { id: 'bw_style_structural', append: false, _internal: true });
+};
+
 /**
  * Prefix every selector in a rules object with a scope selector.
  * Useful for wrapping site-level CSS under `.bw_theme_alt` for dark mode.
@@ -2945,7 +4005,7 @@ bw.loadReset = function() {
   if (!bw._isBrowser) return null;
   var existing = document.getElementById('bw_style_reset');
   if (existing) return existing;
-  return bw.injectCSS(bw.css(getResetStyles()), { id: 'bw_style_reset', append: false });
+  return bw.injectCSS(bw.css(getResetStyles()), { id: 'bw_style_reset', append: false, _internal: true });
 };
 
 /**
@@ -2965,8 +4025,67 @@ bw.loadReset = function() {
  * bw.toggleThemeMode('#my-dashboard');    // scoped toggle
  * bw.toggleThemeMode('.panel');           // toggle on ALL .panel elements
  */
+/**
+ * Validate a scope selector. Rejects complex/comma selectors.
+ * @private
+ * @param {string} scope
+ * @returns {boolean}
+ */
+function _validateThemeScope(scope) {
+  if (!scope) return true;
+  // Reject comma-separated selectors
+  if (scope.indexOf(',') !== -1) {
+    bw.pub('bw:diag', { code: 'scope_rejected', ref: scope, msg: 'comma selectors not allowed' });
+    return false;
+  }
+  // Reject descendant selectors (space-separated compound)
+  if (/\s/.test(scope.trim())) {
+    bw.pub('bw:diag', { code: 'scope_rejected', ref: scope, msg: 'complex selectors not allowed' });
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Set the theme mode on all matching elements.
+ *
+ * @param {string} mode - 'primary' or 'alternate'
+ * @param {string} [scope] - Selector. Omit for global (<html>).
+ * @returns {Object} { mode, count } — the mode set and number of elements affected
+ * @category CSS & Styling
+ */
+bw.setThemeMode = function(mode, scope) {
+  if (!bw._isBrowser) return { mode: 'primary', count: 0 };
+  if (!_validateThemeScope(scope)) return { mode: mode, count: 0 };
+  var els;
+  if (scope) {
+    els = bw.$(scope);
+  } else {
+    els = [document.documentElement];
+  }
+  for (var i = 0; i < els.length; i++) {
+    if (mode === 'alternate') {
+      els[i].classList.add('bw_theme_alt');
+    } else {
+      els[i].classList.remove('bw_theme_alt');
+    }
+  }
+  var result = { mode: mode, count: els.length };
+  bw.pub('bw:thememode', { mode: mode, scope: scope || 'html', count: els.length });
+  return result;
+};
+
+/**
+ * Toggle between primary and alternate theme palettes.
+ * Determines current mode from first matched element, then sets inverse on all.
+ *
+ * @param {string|Element} [scope] - Selector or element. Omit for global.
+ * @returns {string} Active mode after toggle: 'primary' or 'alternate' (based on first element)
+ * @category CSS & Styling
+ */
 bw.toggleThemeMode = function(scope) {
   if (!bw._isBrowser) return 'primary';
+  if (!_validateThemeScope(scope)) return 'primary';
   var els;
   if (scope) {
     els = bw.$(scope);
@@ -2975,21 +4094,20 @@ bw.toggleThemeMode = function(scope) {
   }
   if (!els.length) return 'primary';
 
-  var mode;
+  // Determine inverse based on first element
+  var firstHasAlt = els[0].classList.contains('bw_theme_alt');
+  var newMode = firstHasAlt ? 'primary' : 'alternate';
+  // Set all to the same mode
   for (var i = 0; i < els.length; i++) {
-    var hasAlt = els[i].classList.contains('bw_theme_alt');
-    if (hasAlt) {
-      els[i].classList.remove('bw_theme_alt');
-    } else {
+    if (newMode === 'alternate') {
       els[i].classList.add('bw_theme_alt');
+    } else {
+      els[i].classList.remove('bw_theme_alt');
     }
-    if (i === 0) mode = hasAlt ? 'primary' : 'alternate';
   }
-  return mode;
+  return newMode;
 };
 
-// Alias — kept for one release cycle. Use bw.toggleThemeMode() instead.
-bw.toggleStyles = bw.toggleThemeMode;
 
 /**
  * Remove injected styles for a given scope.
@@ -3012,10 +4130,12 @@ bw.clearStyles = function(scope) {
   var el = document.getElementById(styleId);
   if (el) el.remove();
 
-  // Also remove bw_theme_alt from the relevant element
-  if (scope && scope !== 'reset' && scope !== 'global') {
+  // Also remove bw_theme_alt from ALL relevant elements
+  if (scope && scope !== 'reset' && scope !== 'structural' && scope !== 'global') {
     var targets = bw.$(scope);
-    if (targets[0]) targets[0].classList.remove('bw_theme_alt');
+    for (var i = 0; i < targets.length; i++) {
+      targets[i].classList.remove('bw_theme_alt');
+    }
   } else if (!scope || scope === 'global') {
     document.documentElement.classList.remove('bw_theme_alt');
   }
@@ -3034,6 +4154,10 @@ bw.harmonize = harmonize;
 bw.deriveAlternateSeed = deriveAlternateSeed;
 bw.deriveAlternateConfig = deriveAlternateConfig;
 bw.isLightPalette = isLightPalette;
+bw.colorParse = _colorParse;
+bw.colorRgbToHsl = _colorRgbToHsl;
+bw.colorHslToRgb = _colorHslToRgb;
+bw.colorInterp = _colorInterp;
 
 // Expose layout and theme presets
 bw.SPACING_PRESETS = SPACING_PRESETS;
@@ -3058,15 +4182,6 @@ bw.arrayBinA = _arrayBinA;
 /** @see bitwrench-utils.js for implementation */
 bw.arrayBNotInA = _arrayBNotInA;
 
-/** @see bitwrench-utils.js for implementation — wraps _colorInterp with bw.colorParse */
-bw.colorInterp = function(x, in0, in1, colors, stretch) {
-  return _colorInterp(x, in0, in1, colors, stretch, colorParse);
-};
-
-// Color conversion functions — imported from bitwrench-color-utils.js (single source of truth)
-bw.colorHslToRgb = colorHslToRgb;
-bw.colorRgbToHsl = colorRgbToHsl;
-bw.colorParse = colorParse;
 
 /**
  * Set a browser cookie with expiration and options.
@@ -3114,11 +4229,13 @@ bw.getCookie = function(cname, defaultValue) {
   const name = cname + "=";
   const ca = document.cookie.split(";");
   
+  /* c8 ignore start -- cookie parsing: jsdom doesn't support document.cookie in unit tests */
   for (let i = 0; i < ca.length; i++) {
     let c = ca[i];
     while (c.charAt(0) === " ") c = c.substring(1);
     if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
   }
+  /* c8 ignore stop */
   
   return defaultValue;
 };
@@ -3149,10 +4266,13 @@ bw.getURLParam = function(key, defaultValue) {
       return result;
     }
     
+    /* c8 ignore next -- params.has() branch: jsdom window.location.search is always empty */
     return params.has(key) ? (params.get(key) || true) : defaultValue;
+  /* c8 ignore start -- URLSearchParams never throws in test env */
   } catch (e) {
     return defaultValue;
   }
+  /* c8 ignore stop */
 };
 
 
@@ -3188,7 +4308,7 @@ bw.copyToClipboard = function(text) {
   
   // Fallback for older browsers
   return new Promise((resolve, reject) => {
-    const textarea = bw.createDOM({
+    const textarea = bw.create({
       t: 'textarea',
       a: {
         value: text,
@@ -3282,16 +4402,17 @@ bw.makeTable = function(config) {
     sortDirection = 'asc',
     selectable = false,
     onRowClick,
+    rowKey,
     pageSize,
     currentPage = 1,
     onPageChange
   } = config;
 
-  // Build class list: always include bw_table, add striped/hover/selectable, append user className
-  let cls = 'bw_table';
-  if (striped) cls += ' bw_table_striped';
-  if (hover || selectable) cls += ' bw_table_hover';
-  if (selectable) cls += ' bw_table_selectable';
+  // Build class list: always include bw_bccl_table, add striped/hover/selectable, append user className
+  let cls = 'bw_bccl_table';
+  if (striped) cls += ' bw_bccl_table_striped';
+  if (hover || selectable) cls += ' bw_bccl_table_hover';
+  if (selectable) cls += ' bw_bccl_table_selectable';
   if (className) cls += ' ' + className;
   cls = cls.trim();
 
@@ -3337,42 +4458,35 @@ bw.makeTable = function(config) {
     sortedData = sortedData.slice(start, start + pageSize);
   }
 
-  // Create sort handler
-  const handleSort = (column) => {
-    if (!sortable) return;
-
-    if (currentSortColumn === column) {
-      currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
-    } else {
-      currentSortColumn = column;
-      currentSortDirection = 'asc';
-    }
-
-    if (onSort) {
-      onSort(column, currentSortDirection);
-    }
-  };
-
-  // Build table header
+  // Build table header with scope="col" and aria-sort support
   const thead = {
     t: 'thead',
     c: {
       t: 'tr',
-      c: cols.map(col => ({
-        t: 'th',
-        a: sortable ? {
-          style: { cursor: 'pointer', userSelect: 'none' },
-          onclick: () => handleSort(col.key)
-        } : {},
-        c: [
-          col.label,
-          sortable && currentSortColumn === col.key && {
-            t: 'span',
-            a: { style: { marginLeft: '5px' } },
-            c: currentSortDirection === 'asc' ? '▲' : '▼'
-          }
-        ].filter(Boolean)
-      }))
+      c: cols.map(col => {
+        var thAttrs = {
+          scope: 'col',
+          'data-col-key': col.key
+        };
+        if (sortable) {
+          thAttrs.style = { cursor: 'pointer', userSelect: 'none' };
+        }
+        if (currentSortColumn === col.key) {
+          thAttrs['aria-sort'] = currentSortDirection === 'asc' ? 'ascending' : 'descending';
+        }
+        return {
+          t: 'th',
+          a: thAttrs,
+          c: [
+            col.label,
+            sortable && currentSortColumn === col.key && {
+              t: 'span',
+              a: { style: { marginLeft: '5px' } },
+              c: currentSortDirection === 'asc' ? '\u25B2' : '\u25BC'
+            }
+          ].filter(Boolean)
+        };
+      })
     }
   };
 
@@ -3382,13 +4496,15 @@ bw.makeTable = function(config) {
     c: sortedData.map((row, idx) => {
       const globalIdx = pageSize ? (page - 1) * pageSize + idx : idx;
       const rowAttrs = {};
+      if (rowKey && row[rowKey] !== undefined) {
+        rowAttrs['data-row-key'] = String(row[rowKey]);
+      }
       if (selectable || onRowClick) {
         rowAttrs.style = 'cursor:pointer;';
         rowAttrs.onclick = function(e) {
           if (selectable) {
-            // Toggle selected class on this row
             var tr = e.currentTarget;
-            tr.classList.toggle('bw_table_row_selected');
+            tr.classList.toggle('bw_bccl_table_row_selected');
           }
           if (onRowClick) {
             onRowClick(row, globalIdx, e);
@@ -3406,10 +4522,149 @@ bw.makeTable = function(config) {
     })
   };
 
+  // Shared helper: sort the live table DOM
+  function _sortTableDOM(el, column, direction) {
+    var ths = el.querySelectorAll('th[data-col-key]');
+    // Remove all aria-sort
+    for (var h = 0; h < ths.length; h++) {
+      ths[h].removeAttribute('aria-sort');
+    }
+    // Set aria-sort on the sorted column
+    for (var h2 = 0; h2 < ths.length; h2++) {
+      if (ths[h2].getAttribute('data-col-key') === column) {
+        ths[h2].setAttribute('aria-sort', direction === 'asc' ? 'ascending' : 'descending');
+        break;
+      }
+    }
+  }
+
+  // Shared helper: rebuild tbody rows from new data
+  function _rebuildTbody(el, newData, colsDef, rKey) {
+    var tbodyEl = el.querySelector('tbody');
+    if (!tbodyEl) return;
+
+    if (rKey) {
+      // Keyed reconciliation: reuse existing row nodes
+      var existingRows = {};
+      var rows = tbodyEl.querySelectorAll('tr');
+      for (var r = 0; r < rows.length; r++) {
+        var k = rows[r].getAttribute('data-row-key');
+        if (k !== null) existingRows[k] = rows[r];
+      }
+
+      // Build new order
+      var frag = el.ownerDocument.createDocumentFragment();
+      for (var d = 0; d < newData.length; d++) {
+        var rowData = newData[d];
+        var keyVal = String(rowData[rKey]);
+        if (existingRows[keyVal]) {
+          // Reuse existing row, update cells
+          var tr = existingRows[keyVal];
+          var cells = tr.querySelectorAll('td');
+          for (var ci = 0; ci < colsDef.length; ci++) {
+            if (cells[ci]) {
+              var newText = colsDef[ci].render
+                ? colsDef[ci].render(rowData[colsDef[ci].key], rowData)
+                : String(rowData[colsDef[ci].key] || '');
+              if (cells[ci].textContent !== newText) cells[ci].textContent = newText;
+            }
+          }
+          frag.appendChild(tr);
+        } else {
+          // Create new row
+          var newTr = el.ownerDocument.createElement('tr');
+          newTr.setAttribute('data-row-key', keyVal);
+          for (var ci2 = 0; ci2 < colsDef.length; ci2++) {
+            var td = el.ownerDocument.createElement('td');
+            td.textContent = colsDef[ci2].render
+              ? colsDef[ci2].render(rowData[colsDef[ci2].key], rowData)
+              : String(rowData[colsDef[ci2].key] || '');
+            newTr.appendChild(td);
+          }
+          frag.appendChild(newTr);
+        }
+      }
+      // Replace tbody contents
+      while (tbodyEl.firstChild) tbodyEl.removeChild(tbodyEl.firstChild);
+      tbodyEl.appendChild(frag);
+    } else {
+      // Full rebuild
+      while (tbodyEl.firstChild) tbodyEl.removeChild(tbodyEl.firstChild);
+      for (var d2 = 0; d2 < newData.length; d2++) {
+        var tr2 = el.ownerDocument.createElement('tr');
+        for (var ci3 = 0; ci3 < colsDef.length; ci3++) {
+          var td2 = el.ownerDocument.createElement('td');
+          td2.textContent = colsDef[ci3].render
+            ? colsDef[ci3].render(newData[d2][colsDef[ci3].key], newData[d2])
+            : String(newData[d2][colsDef[ci3].key] || '');
+          tr2.appendChild(td2);
+        }
+        tbodyEl.appendChild(tr2);
+      }
+    }
+  }
+
   const table = {
     t: 'table',
     a: { class: cls },
-    c: [thead, tbody]
+    c: [thead, tbody],
+    o: {
+      type: 'table',
+      state: {
+        data: data,
+        columns: cols,
+        sortColumn: currentSortColumn,
+        sortDirection: currentSortDirection,
+        rowKey: rowKey
+      },
+      handle: {
+        sort: function(el, column, dir) {
+          var state = el._bw_state || {};
+          if (!dir) {
+            if (state.sortColumn === column) {
+              dir = state.sortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+              dir = 'asc';
+            }
+          }
+          state.sortColumn = column;
+          state.sortDirection = dir;
+          _sortTableDOM(el, column, dir);
+
+          // Re-sort and rebuild rows
+          var d = state.data ? [...state.data] : [];
+          d.sort(function(a, b) {
+            var aVal = a[column];
+            var bVal = b[column];
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+              return dir === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            var aStr = String(aVal || '').toLowerCase();
+            var bStr = String(bVal || '').toLowerCase();
+            return dir === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+          });
+          _rebuildTbody(el, d, state.columns || cols, state.rowKey);
+
+          if (onSort) onSort(column, dir);
+        },
+        update: function(el, newConfig) {
+          if (!newConfig) return;
+          var state = el._bw_state || {};
+          if (newConfig.data) {
+            state.data = newConfig.data;
+            _rebuildTbody(el, newConfig.data, state.columns || cols, state.rowKey);
+          }
+        },
+        setData: function(el, newData) {
+          var state = el._bw_state || {};
+          state.data = newData;
+          _rebuildTbody(el, newData, state.columns || cols, state.rowKey);
+        },
+        getData: function(el) {
+          return (el._bw_state && el._bw_state.data) || [];
+        }
+      }
+    }
   };
 
   // If no pagination, return table directly
@@ -3417,27 +4672,24 @@ bw.makeTable = function(config) {
 
   // Build pagination controls
   const pageButtons = [];
-  // Previous button
   pageButtons.push({
     t: 'button',
     a: {
-      class: 'bw_btn bw_btn_sm',
+      class: 'bw_bccl_btn bw_bccl_btn_sm',
       disabled: page <= 1 ? 'disabled' : undefined,
       onclick: page > 1 && onPageChange ? function() { onPageChange(page - 1); } : undefined
     },
     c: 'Prev'
   });
-  // Page info
   pageButtons.push({
     t: 'span',
     a: { style: 'margin:0 0.5rem;font-size:0.875rem;' },
     c: 'Page ' + page + ' of ' + totalPages
   });
-  // Next button
   pageButtons.push({
     t: 'button',
     a: {
-      class: 'bw_btn bw_btn_sm',
+      class: 'bw_bccl_btn bw_bccl_btn_sm',
       disabled: page >= totalPages ? 'disabled' : undefined,
       onclick: page < totalPages && onPageChange ? function() { onPageChange(page + 1); } : undefined
     },
@@ -3446,12 +4698,12 @@ bw.makeTable = function(config) {
 
   return {
     t: 'div',
-    a: { class: 'bw_table_paginated' },
+    a: { class: 'bw_bccl_table_paginated' },
     c: [
       table,
       {
         t: 'div',
-        a: { class: 'bw_table_pagination', style: 'display:flex;align-items:center;justify-content:flex-end;padding:0.5rem 0;gap:0.25rem;' },
+        a: { class: 'bw_bccl_table_pagination', style: 'display:flex;align-items:center;justify-content:flex-end;padding:0.5rem 0;gap:0.25rem;' },
         c: pageButtons
       }
     ]
@@ -3690,317 +4942,64 @@ bw.makeDataTable = function(config) {
   
   return {
     t: 'div',
-    a: { class: 'table-container' },
+    a: { class: 'bw_bccl_dataTable table-container' },
     c: content
   };
 };
 
 /**
- * Component registry for tracking rendered components
- * @private
- */
-bw._componentRegistry = new Map();
-
-/**
- * Render a TACO object into the DOM at a specific position, returning a component handle.
+ * Render a TACO into the DOM at a specific position relative to a target.
  *
- * The handle provides full lifecycle control: state management, re-rendering,
- * class manipulation, show/hide, event binding, and destroy. Components are
- * tracked in a registry for later retrieval via `bw.getComponent()`.
+ * Thin convenience factory over `bw.append()` / `bw.replace()`. Every code
+ * path goes through the v2.1 lifecycle pipeline (create → insert → mountTree),
+ * so mounted/unmount hooks, state, handles, and the janitor all work
+ * automatically.
  *
- * @param {Element|string} element - Target element or CSS selector
- * @param {string} position - Position: 'replace', 'prepend', 'append', 'before', 'after'
+ * @param {Element|string} target - Target element or CSS selector
+ * @param {string} position - 'append', 'prepend', 'replace', 'before', 'after'
  * @param {Object} taco - TACO object to render
- * @returns {Object} Component handle with element, setState, update, destroy, etc.
+ * @returns {{ el: Element|null, ok: boolean, error: string|null }}
  * @category DOM Generation
- * @see bw.getComponent
- * @see bw.DOM
+ * @see bw.append
+ * @see bw.replace
  * @example
- * var handle = bw.render('#app', 'append', {
+ * var r = bw.render('#app', 'append', {
  *   t: 'button', a: { class: 'bw_btn' }, c: 'Click Me',
  *   o: { state: { clicks: 0 } }
  * });
- * handle.setState({ clicks: 1 });
- * handle.destroy();
+ * if (r.ok) r.el.bw.myMethod();   // use component handle
  */
-bw.render = function(element, position, taco) {
-  // Get target element
-  const targetEl = _is(element, 'string')
-    ? document.querySelector(element) 
-    : element;
-    
-  if (!targetEl) {
-    return {
-      object_type: 'error',
-      component_id: null,
-      object_handle_in_dom: null,
-      status_code: 'error=target_element_not_found'
-    };
-  }
-  
-  // Generate unique UUID class if not provided
-  const componentId = taco.o?.id || bw.uuid('uuid');
-  
-  // Create DOM element
-  let domElement;
+bw.render = function(target, position, taco) {
   try {
-    domElement = bw.createDOM(taco);
-  } catch(e) {
-    return {
-      object_type: 'error',
-      component_id: componentId,
-      object_handle_in_dom: null,
-      status_code: `error=render_failed:${e.message}`
-    };
-  }
-  
-  // Add component ID as class + lifecycle marker
-  domElement.classList.add(componentId);
-  domElement.classList.add(_BW_LC);
+    var targetEl = _is(target, 'string') ? bw.$(target)[0] : target;
+    if (!targetEl) return { el: null, ok: false, error: 'target not found' };
 
-  // Insert into DOM based on position
-  try {
-    switch(position) {
-      case 'replace':
-        targetEl.parentNode.replaceChild(domElement, targetEl);
+    var el;
+    switch (position) {
+      case 'append':
+        el = bw.append(targetEl, taco);
         break;
       case 'prepend':
-        targetEl.insertBefore(domElement, targetEl.firstChild);
+        el = bw.append(targetEl, taco, { before: 0 });
         break;
-      case 'append':
-        targetEl.appendChild(domElement);
+      case 'replace':
+        el = bw.replace(targetEl, taco);
         break;
       case 'before':
-        targetEl.parentNode.insertBefore(domElement, targetEl);
+        if (!targetEl.parentNode) return { el: null, ok: false, error: 'no parent for before' };
+        el = bw.append(targetEl.parentNode, taco, { before: targetEl });
         break;
       case 'after':
-        targetEl.parentNode.insertBefore(domElement, targetEl.nextSibling);
+        if (!targetEl.parentNode) return { el: null, ok: false, error: 'no parent for after' };
+        el = bw.append(targetEl.parentNode, taco, { before: targetEl.nextSibling });
         break;
       default:
-        throw new Error(`Invalid position: ${position}`);
-    }
-  } catch(e) {
-    return {
-      object_type: 'error',
-      component_id: componentId,
-      object_handle_in_dom: null,
-      status_code: `error=insertion_failed:${e.message}`
-    };
-  }
-  
-  // Create component handle
-  const handle = {
-    object_type: taco.t || 'element',
-    component_id: componentId,
-    object_handle_in_dom: domElement,
-    status_code: 'success',
-    
-    // Reference to original TACO
-    _taco: { ...taco },
-    _state: { ...(taco.o?.state || {}) },
-    _mounted: true,
-    
-    // Get DOM element
-    get element() {
-      return this.object_handle_in_dom;
-    },
-    
-    // Get/set state
-    getState() {
-      return { ...this._state };
-    },
-    
-    setState(updates) {
-      this._state = { ...this._state, ...updates };
-      if (this._taco.o?.onStateChange) {
-        this._taco.o.onStateChange(this._state, updates);
-      }
-      return this;
-    },
-    
-    // Update component (re-render)
-    update() {
-      if (!this._mounted || !this.element) return this;
-      
-      const parent = this.element.parentNode;
-      
-      // Update TACO with current state
-      if (this._taco.o) {
-        this._taco.o.state = this._state;
-      }
-      
-      // Re-render
-      const newElement = bw.createDOM(this._taco);
-      newElement.classList.add(componentId);
-      newElement.classList.add(_BW_LC);
-      
-      // Replace in DOM
-      parent.replaceChild(newElement, this.element);
-      this.object_handle_in_dom = newElement;
-      
-      // Call update lifecycle
-      if (this._taco.o?.onUpdate) {
-        this._taco.o.onUpdate(newElement, this._state);
-      }
-      
-      return this;
-    },
-    
-    // Get/set properties
-    getProp(key) {
-      return this._taco.a?.[key];
-    },
-    
-    setProp(key, value) {
-      if (!this._taco.a) this._taco.a = {};
-      this._taco.a[key] = value;
-      
-      // Update DOM attribute
-      if (this.element) {
-        if (value === null || value === undefined) {
-          this.element.removeAttribute(key);
-        } else if (value === true) {
-          this.element.setAttribute(key, '');
-        } else {
-          this.element.setAttribute(key, String(value));
-        }
-      }
-      
-      return this;
-    },
-    
-    // Get/set content
-    getContent() {
-      return this._taco.c;
-    },
-    
-    setContent(content) {
-      this._taco.c = content;
-      if (this.element) {
-        if (_is(content, 'string')) {
-          this.element.textContent = content;
-        } else {
-          // Re-render for complex content
-          this.update();
-        }
-      }
-      return this;
-    },
-    
-    // Add/remove CSS classes
-    addClass(className) {
-      if (this.element) {
-        this.element.classList.add(className);
-      }
-      return this;
-    },
-    
-    removeClass(className) {
-      if (this.element) {
-        this.element.classList.remove(className);
-      }
-      return this;
-    },
-    
-    toggleClass(className) {
-      if (this.element) {
-        this.element.classList.toggle(className);
-      }
-      return this;
-    },
-    
-    hasClass(className) {
-      return this.element ? this.element.classList.contains(className) : false;
-    },
-    
-    // Show/hide
-    show() {
-      if (this.element) {
-        this.element.style.display = '';
-      }
-      return this;
-    },
-    
-    hide() {
-      if (this.element) {
-        this.element.style.display = 'none';
-      }
-      return this;
-    },
-    
-    // Event handling
-    on(event, handler) {
-      if (this.element) {
-        this.element.addEventListener(event, handler);
-      }
-      return this;
-    },
-    
-    off(event, handler) {
-      if (this.element) {
-        this.element.removeEventListener(event, handler);
-      }
-      return this;
-    },
-    
-    // Destroy component
-    destroy() {
-      if (!this._mounted) return this;
-      
-      // Call unmount lifecycle
-      if (this._taco.o?.unmount) {
-        this._taco.o.unmount(this.element);
-      }
-      
-      // Remove from DOM
-      if (this.element && this.element.parentNode) {
-        this.element.parentNode.removeChild(this.element);
-      }
-      
-      // Remove from registry
-      bw._componentRegistry.delete(componentId);
-      
-      // Clean up
-      this._mounted = false;
-      this.object_handle_in_dom = null;
-      this.status_code = 'destroyed';
-      
-      return this;
+        return { el: null, ok: false, error: 'invalid position: ' + position };
     }
-  };
-  
-  // Store in registry
-  bw._componentRegistry.set(componentId, handle);
-  
-  // Call mounted lifecycle
-  if (taco.o?.mounted) {
-    taco.o.mounted(domElement, handle);
+    return { el: el, ok: true, error: null };
+  } catch (e) {
+    return { el: null, ok: false, error: e.message };
   }
-  
-  return handle;
-};
-
-/**
- * Get a component handle by its ID from the component registry.
- *
- * @param {string} id - Component ID (from bw.render)
- * @returns {Object|null} Component handle or null if not found
- * @category DOM Generation
- * @see bw.render
- */
-bw.getComponent = function(id) {
-  return bw._componentRegistry.get(id) || null;
-};
-
-/**
- * Get all registered component handles as a Map.
- *
- * @returns {Map} Map of componentId → component handle
- * @category DOM Generation
- * @see bw.getComponent
- */
-bw.getAllComponents = function() {
-  return new Map(bw._componentRegistry);
 };
 
 // =========================================================================
@@ -4027,18 +5026,16 @@ bw.make = components.make;
 // Component registry: bw.BCCL lists all available component types
 bw.BCCL = components.BCCL;
 
+// Register makeTable (defined in bitwrench.js) in the shared BCCL registry
+bw.BCCL.table = { make: bw.makeTable };
+bw.BCCL.tableFromArray = { make: bw.makeTableFromArray };
+bw.BCCL.dataTable = { make: bw.makeDataTable };
+bw.BCCL.barChart = { make: bw.makeBarChart };
+
 // Variant class helper: bw.variantClass('primary') → 'bw_primary'
 bw.variantClass = components.variantClass;
 
-// Create functions that return DOM elements (createCard, createTable, etc.)
-Object.entries(components).forEach(([name, fn]) => {
-  if (name.startsWith('make')) {
-    const createName = 'create' + name.substring(4);
-    bw[createName] = function(props) {
-      return bw.createDOM(fn(props));
-    };
-  }
-});
+// v2.1: codegen create* family removed (§12). Use bw.create(bw.makeX(props)) instead.
 
 /**
  * Query the BCCL component registry. Returns metadata about registered
@@ -4094,7 +5091,16 @@ bw.catalog = function(type) {
 // Export for different environments
 export default bw;
 
-// Also attach to global in browsers
+// Also attach to global in browsers, with double-load guard
 if (bw._isBrowser && typeof window !== 'undefined') {
+  /* c8 ignore start -- double-load guard: only triggers when bitwrench is loaded twice */
+  if (window.__bitwrench) {
+    console.warn(
+      'bitwrench: already loaded (v' + window.__bitwrench + '); ' +
+      'loading v' + bw.version + ' over it.'
+    );
+  }
+  /* c8 ignore stop */
+  window.__bitwrench = bw.version;
   window.bw = bw;
 }