bitwrench 2.0.16 → 2.0.18

package/dist/bitwrench.es5.js

@@ -1,10 +1,11 @@
-/*! bitwrench v2.0.16 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+/*! bitwrench v2.0.18 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.bw = factory());
 })(this, (function () { 'use strict';
 
+  var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
   function _arrayLikeToArray(r, a) {
     (null == a || a > r.length) && (a = r.length);
     for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
@@ -189,14 +190,14 @@
    */
 
   var VERSION_INFO = {
-    version: '2.0.16',
+    version: '2.0.18',
     name: 'bitwrench',
     description: 'A library for javascript UI functions.',
     license: 'BSD-2-Clause',
     homepage: 'https://deftio.github.com/bitwrench/pages',
     repository: 'git+https://github.com/deftio/bitwrench.git',
     author: 'manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)',
-    buildDate: '2026-03-12T08:05:52.043Z'
+    buildDate: '2026-03-17T00:50:09.505Z'
   };
 
   /**
@@ -485,13 +486,16 @@
    */
   function deriveShades(hex) {
     var rgb = colorParse(hex);
+    // For light input colors (L > 75), mixing toward white produces invisible borders.
+    // Darken instead so borders remain visible against light backgrounds.
+    var borderColor = hexToHsl(hex)[2] > 75 ? adjustLightness(hex, -18) : mixColor(hex, '#ffffff', 0.60);
     return {
       base: hex,
       hover: adjustLightness(hex, -10),
       active: adjustLightness(hex, -15),
       light: mixColor(hex, '#ffffff', 0.85),
       darkText: adjustLightness(hex, -40),
-      border: mixColor(hex, '#ffffff', 0.60),
+      border: borderColor,
       focus: 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',0.25)',
       textOn: textOnColor(hex)
     };
@@ -550,18 +554,26 @@
     alt.secondary = deriveAlternateSeed(config.secondary);
     alt.tertiary = config.tertiary ? deriveAlternateSeed(config.tertiary) : alt.primary;
 
-    // Derive alternate surface colors from primary hue
+    // Derive alternate surface colors from primary hue.
+    // Check actual page surface brightness (not seed color brightness) to decide
+    // whether alternate should be dark or light.  The page surface is what the
+    // user sees; seeds can be dark while the page is still light (default L=96).
     var priHsl = hexToHsl(config.primary);
     var h = priHsl[0];
-    var isLight = isLightPalette(config);
+    var primarySurface = config.surface || hslToHex([h, 8, 96]);
+    var isLight = relativeLuminance(primarySurface) > 0.179;
     if (isLight) {
-      // Primary is light → alternate needs dark surfaces
+      // Page surface is light → alternate needs dark surfaces
       alt.light = hslToHex([h, Math.min(priHsl[1], 15), 15]);
       alt.dark = hslToHex([h, 5, 88]);
+      alt.surface = hslToHex([h, 12, 18]);
+      alt.background = hslToHex([h, 10, 14]);
     } else {
-      // Primary is dark → alternate needs light surfaces
+      // Page surface is dark → alternate needs light surfaces
       alt.light = hslToHex([h, Math.min(priHsl[1], 10), 96]);
       alt.dark = hslToHex([h, 10, 18]);
+      alt.surface = hslToHex([h, 8, 96]);
+      alt.background = hslToHex([h, 6, 98]);
     }
 
     // Semantic colors: harmonize toward primary, then invert for alternate
@@ -610,10 +622,16 @@
     var darkBase = config.dark || hslToHex([h, 10, 13]);
 
     // Background & surface tokens — tinted with primary hue for theme personality.
-    // Very subtle: bg at L=98/S=6, surface at L=96/S=8.
+    // Saturation high enough that the hue is visible (each theme feels distinct)
+    // but low enough to stay neutral and readable.
     // User can override with config.background / config.surface.
-    var bgBase = config.background || hslToHex([h, 6, 98]);
-    var surfBase = config.surface || hslToHex([h, 8, 96]);
+    var bgBase = config.background || hslToHex([h, 22, 96]);
+    var surfBase = config.surface || hslToHex([h, 25, 94]);
+
+    // surfaceAlt: subtle background variant for striped rows, hover states, headers.
+    // Slightly lighter than surface in dark mode, slightly darker in light mode.
+    var surfHsl = hexToHsl(surfBase);
+    var surfAlt = surfHsl[2] <= 50 ? hslToHex([surfHsl[0], surfHsl[1], Math.min(surfHsl[2] + 8, 100)]) : hslToHex([surfHsl[0], surfHsl[1], Math.max(surfHsl[2] - 3, 0)]);
     var palette = {
       primary: deriveShades(config.primary),
       secondary: deriveShades(config.secondary),
@@ -625,7 +643,8 @@
       light: deriveShades(lightBase),
       dark: deriveShades(darkBase),
       background: bgBase,
-      surface: surfBase
+      surface: surfBase,
+      surfaceAlt: surfAlt
     };
     return palette;
   }
@@ -650,27 +669,28 @@
     5: '1.5rem',
     // 24px
     6: '2rem'};
+  var _S = SPACING_SCALE;
   var SPACING_PRESETS = {
     compact: {
-      btn: SPACING_SCALE[1] + ' ' + SPACING_SCALE[3],
-      card: SPACING_SCALE[3] + ' ' + SPACING_SCALE[4],
-      alert: SPACING_SCALE[2] + ' ' + SPACING_SCALE[4],
-      cell: SPACING_SCALE[2] + ' ' + SPACING_SCALE[3],
-      input: SPACING_SCALE[1] + ' ' + SPACING_SCALE[3]
+      btn: _S[1] + ' ' + _S[3],
+      card: _S[3] + ' ' + _S[4],
+      alert: _S[2] + ' ' + _S[4],
+      cell: _S[2] + ' ' + _S[3],
+      input: _S[1] + ' ' + _S[3]
     },
     normal: {
-      btn: SPACING_SCALE[2] + ' ' + SPACING_SCALE[4],
-      card: SPACING_SCALE[5] + ' ' + SPACING_SCALE[5],
-      alert: SPACING_SCALE[3] + ' ' + SPACING_SCALE[5],
-      cell: SPACING_SCALE[3] + ' ' + SPACING_SCALE[4],
-      input: SPACING_SCALE[2] + ' ' + SPACING_SCALE[3]
+      btn: _S[2] + ' ' + _S[4],
+      card: _S[5] + ' ' + _S[5],
+      alert: _S[3] + ' ' + _S[5],
+      cell: _S[3] + ' ' + _S[4],
+      input: _S[2] + ' ' + _S[3]
     },
     spacious: {
-      btn: SPACING_SCALE[3] + ' ' + SPACING_SCALE[5],
-      card: SPACING_SCALE[6] + ' ' + SPACING_SCALE[6],
-      alert: SPACING_SCALE[4] + ' ' + SPACING_SCALE[5],
-      cell: SPACING_SCALE[4] + ' ' + SPACING_SCALE[5],
-      input: SPACING_SCALE[3] + ' ' + SPACING_SCALE[4]
+      btn: _S[3] + ' ' + _S[5],
+      card: _S[6] + ' ' + _S[6],
+      alert: _S[4] + ' ' + _S[5],
+      cell: _S[4] + ' ' + _S[5],
+      input: _S[3] + ' ' + _S[4]
     }
   };
   var RADIUS_PRESETS = {
@@ -812,68 +832,13 @@
    * Built-in theme presets — named color combinations
    * Each preset provides primary, secondary, and tertiary seed colors.
    */
-  var THEME_PRESETS = {
-    teal: {
-      primary: '#006666',
-      secondary: '#6c757d',
-      tertiary: '#006666'
-    },
-    ocean: {
-      primary: '#0077b6',
-      secondary: '#90e0ef',
-      tertiary: '#00b4d8'
-    },
-    sunset: {
-      primary: '#e76f51',
-      secondary: '#264653',
-      tertiary: '#e9c46a'
-    },
-    forest: {
-      primary: '#2d6a4f',
-      secondary: '#95d5b2',
-      tertiary: '#52b788'
-    },
-    slate: {
-      primary: '#343a40',
-      secondary: '#adb5bd',
-      tertiary: '#6c757d'
-    },
-    rose: {
-      primary: '#e11d48',
-      secondary: '#fda4af',
-      tertiary: '#fb7185'
-    },
-    indigo: {
-      primary: '#4f46e5',
-      secondary: '#a5b4fc',
-      tertiary: '#818cf8'
-    },
-    amber: {
-      primary: '#d97706',
-      secondary: '#fbbf24',
-      tertiary: '#f59e0b'
-    },
-    emerald: {
-      primary: '#059669',
-      secondary: '#6ee7b7',
-      tertiary: '#34d399'
-    },
-    nord: {
-      primary: '#5e81ac',
-      secondary: '#88c0d0',
-      tertiary: '#81a1c1'
-    },
-    coral: {
-      primary: '#ef6461',
-      secondary: '#4a7c7e',
-      tertiary: '#e8a87c'
-    },
-    midnight: {
-      primary: '#1e3a5f',
-      secondary: '#7c8db5',
-      tertiary: '#3d5a80'
-    }
-  };
+  var THEME_PRESETS = Object.fromEntries([['teal', '#006666', '#6c757d', '#006666'], ['ocean', '#0077b6', '#90e0ef', '#00b4d8'], ['sunset', '#e76f51', '#264653', '#e9c46a'], ['forest', '#2d6a4f', '#95d5b2', '#52b788'], ['slate', '#343a40', '#adb5bd', '#6c757d'], ['rose', '#e11d48', '#fda4af', '#fb7185'], ['indigo', '#4f46e5', '#a5b4fc', '#818cf8'], ['amber', '#d97706', '#fbbf24', '#f59e0b'], ['emerald', '#059669', '#6ee7b7', '#34d399'], ['nord', '#5e81ac', '#88c0d0', '#81a1c1'], ['coral', '#ef6461', '#4a7c7e', '#e8a87c'], ['midnight', '#1e3a5f', '#7c8db5', '#3d5a80']].map(function (e) {
+    return [e[0], {
+      primary: e[1],
+      secondary: e[2],
+      tertiary: e[3]
+    }];
+  }));
 
   /**
    * Resolve layout config to spacing, radius, typeScale, elevation, and motion objects.
@@ -921,6 +886,7 @@
     }).join(', ');
     return '.' + name + ' ' + sel;
   }
+  var _sx = scopeSelector;
 
   // =========================================================================
   // Themed CSS generators
@@ -929,12 +895,12 @@
   function generateTypographyThemed(scope, palette, layout) {
     var mot = layout.motion;
     var rules = {};
-    rules[scopeSelector(scope, 'a')] = {
+    rules[_sx(scope, 'a')] = {
       'color': palette.primary.base,
       'text-decoration': 'none',
       'transition': 'color ' + mot.fast + ' ' + mot.easing
     };
-    rules[scopeSelector(scope, 'a:hover')] = {
+    rules[_sx(scope, 'a:hover')] = {
       'color': palette.primary.hover,
       'text-decoration': 'underline'
     };
@@ -946,11 +912,11 @@
     var rd = layout.radius;
 
     // Base button (only when scoped — unscoped uses defaultStyles)
-    rules[scopeSelector(scope, '.bw_btn')] = {
+    rules[_sx(scope, '.bw_btn')] = {
       'padding': sp.btn,
       'border-radius': rd.btn
     };
-    rules[scopeSelector(scope, '.bw_btn:focus-visible')] = {
+    rules[_sx(scope, '.bw_btn:focus-visible')] = {
       'outline': '2px solid currentColor',
       'outline-offset': '2px',
       'box-shadow': '0 0 0 3px ' + palette.primary.focus
@@ -959,12 +925,12 @@
     // Variant colors handled by palette class on component root
 
     // Size variants (structural, reuse layout radius)
-    rules[scopeSelector(scope, '.bw_btn_lg')] = {
+    rules[_sx(scope, '.bw_btn_lg')] = {
       'padding': '0.625rem 1.5rem',
       'font-size': '1rem',
       'border-radius': rd.btn === '50rem' ? '50rem' : parseInt(rd.btn) + 2 + 'px'
     };
-    rules[scopeSelector(scope, '.bw_btn_sm')] = {
+    rules[_sx(scope, '.bw_btn_sm')] = {
       'padding': '0.25rem 0.75rem',
       'font-size': '0.8125rem',
       'border-radius': rd.btn === '50rem' ? '50rem' : Math.max(parseInt(rd.btn) - 1, 0) + 'px'
@@ -975,7 +941,7 @@
     var rules = {};
     var sp = layout.spacing;
     var rd = layout.radius;
-    rules[scopeSelector(scope, '.bw_alert')] = {
+    rules[_sx(scope, '.bw_alert')] = {
       'padding': sp.alert,
       'border-radius': rd.alert
     };
@@ -993,38 +959,38 @@
     var rd = layout.radius;
     var elev = layout.elevation;
     var motion = layout.motion;
-    rules[scopeSelector(scope, '.bw_card')] = {
+    rules[_sx(scope, '.bw_card')] = {
       'background-color': palette.surface || '#fff',
       'border': '1px solid ' + palette.light.border,
       'border-radius': rd.card,
       'box-shadow': elev.sm,
       'transition': 'box-shadow ' + motion.normal + ' ' + motion.easing + ', transform ' + motion.normal + ' ' + motion.easing
     };
-    rules[scopeSelector(scope, '.bw_card:hover')] = {
+    rules[_sx(scope, '.bw_card:hover')] = {
       'box-shadow': elev.md
     };
-    rules[scopeSelector(scope, '.bw_card_hoverable:hover')] = {
+    rules[_sx(scope, '.bw_card_hoverable:hover')] = {
       'box-shadow': elev.lg
     };
-    rules[scopeSelector(scope, '.bw_card_body')] = {
+    rules[_sx(scope, '.bw_card_body')] = {
       'padding': sp.card
     };
-    rules[scopeSelector(scope, '.bw_card_header')] = {
+    rules[_sx(scope, '.bw_card_header')] = {
       'padding': sp.card.split(' ').map(function (v) {
         return (parseFloat(v) * 0.7).toFixed(3).replace(/\.?0+$/, '') + 'rem';
       }).join(' '),
-      'background-color': palette.light.light,
+      'background-color': palette.surfaceAlt,
       'border-bottom': '1px solid ' + palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_card_footer')] = {
-      'background-color': palette.light.light,
+    rules[_sx(scope, '.bw_card_footer')] = {
+      'background-color': palette.surfaceAlt,
       'border-top': '1px solid ' + palette.light.border,
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_card_title')] = {
+    rules[_sx(scope, '.bw_card_title')] = {
       'color': palette.dark.base
     };
-    rules[scopeSelector(scope, '.bw_card_subtitle')] = {
+    rules[_sx(scope, '.bw_card_subtitle')] = {
       'color': palette.secondary.base
     };
 
@@ -1036,101 +1002,104 @@
     var rules = {};
     var sp = layout.spacing;
     var rd = layout.radius;
-    rules[scopeSelector(scope, '.bw_form_control')] = {
+    rules[_sx(scope, '.bw_form_control')] = {
       'padding': sp.input,
       'border-radius': rd.input,
       'color': palette.dark.base,
       'background-color': palette.surface || '#fff',
       'border-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_form_control:focus')] = {
+    rules[_sx(scope, '.bw_form_control:focus')] = {
       'border-color': palette.primary.border,
       'outline': '2px solid ' + palette.primary.base,
       'outline-offset': '-1px',
       'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
     };
-    rules[scopeSelector(scope, '.bw_form_control::placeholder')] = {
+    rules[_sx(scope, '.bw_form_control::placeholder')] = {
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_form_label')] = {
+    rules[_sx(scope, '.bw_form_label')] = {
       'color': palette.dark.base
     };
-    rules[scopeSelector(scope, '.bw_form_text')] = {
+    rules[_sx(scope, '.bw_form_text')] = {
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_form_check_input:checked')] = {
+    rules[_sx(scope, '.bw_form_check_input:checked')] = {
       'background-color': palette.primary.base,
       'border-color': palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_form_check_input:focus')] = {
+    rules[_sx(scope, '.bw_form_check_input:focus')] = {
       'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
     };
     // Validation states
-    rules[scopeSelector(scope, '.bw_form_control.bw_is_valid')] = {
+    rules[_sx(scope, '.bw_form_control.bw_is_valid')] = {
       'border-color': palette.success.base
     };
-    rules[scopeSelector(scope, '.bw_form_control.bw_is_valid:focus')] = {
+    rules[_sx(scope, '.bw_form_control.bw_is_valid:focus')] = {
       'border-color': palette.success.base,
       'box-shadow': '0 0 0 0.2rem ' + palette.success.focus
     };
-    rules[scopeSelector(scope, '.bw_form_control.bw_is_invalid')] = {
+    rules[_sx(scope, '.bw_form_control.bw_is_invalid')] = {
       'border-color': palette.danger.base
     };
-    rules[scopeSelector(scope, '.bw_form_control.bw_is_invalid:focus')] = {
+    rules[_sx(scope, '.bw_form_control.bw_is_invalid:focus')] = {
       'border-color': palette.danger.base,
       'box-shadow': '0 0 0 0.2rem ' + palette.danger.focus
     };
     // Form select
-    rules[scopeSelector(scope, '.bw_form_select')] = {
+    rules[_sx(scope, '.bw_form_select')] = {
       'padding': sp.input,
       'border-radius': rd.input,
       'color': palette.dark.base,
       'background-color': palette.surface || '#fff',
       'border-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_form_select:focus')] = {
+    rules[_sx(scope, '.bw_form_select:focus')] = {
       'border-color': palette.primary.border,
       'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
     };
     return rules;
   }
-  function generateNavigation(scope, palette) {
+  function generateNavigation(scope, palette, layout) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_navbar')] = {
-      'background-color': palette.light.light,
+    rules[_sx(scope, '.bw_navbar')] = {
+      'background-color': palette.surfaceAlt,
       'border-bottom-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_navbar_brand')] = {
+    rules[_sx(scope, '.bw_navbar_brand')] = {
       'color': palette.dark.base
     };
-    rules[scopeSelector(scope, '.bw_navbar_nav .bw_nav_link')] = {
-      'color': palette.secondary.base
+    rules[_sx(scope, '.bw_navbar_nav .bw_nav_link')] = {
+      'color': palette.secondary.base,
+      'border-radius': layout.radius.btn
     };
-    rules[scopeSelector(scope, '.bw_navbar_nav .bw_nav_link:hover')] = {
-      'color': palette.dark.base
+    rules[_sx(scope, '.bw_navbar_nav .bw_nav_link:hover')] = {
+      'color': palette.dark.base,
+      'background-color': palette.surfaceAlt
     };
-    rules[scopeSelector(scope, '.bw_navbar_nav .bw_nav_link.active')] = {
+    rules[_sx(scope, '.bw_navbar_nav .bw_nav_link.active')] = {
       'color': palette.primary.base,
-      'background-color': palette.primary.focus
+      'background-color': palette.primary.focus,
+      'font-weight': '600'
     };
-    rules[scopeSelector(scope, '.bw_navbar_dark')] = {
+    rules[_sx(scope, '.bw_navbar_dark')] = {
       'background-color': palette.dark.base,
       'border-bottom-color': palette.dark.hover
     };
-    rules[scopeSelector(scope, '.bw_navbar_dark .bw_navbar_brand')] = {
+    rules[_sx(scope, '.bw_navbar_dark .bw_navbar_brand')] = {
       'color': palette.light.base
     };
-    rules[scopeSelector(scope, '.bw_navbar_dark .bw_nav_link')] = {
-      'color': 'rgba(255,255,255,.65)'
+    rules[_sx(scope, '.bw_navbar_dark .bw_nav_link')] = {
+      'color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_navbar_dark .bw_nav_link:hover')] = {
-      'color': '#fff'
+    rules[_sx(scope, '.bw_navbar_dark .bw_nav_link:hover')] = {
+      'color': palette.light.base
     };
-    rules[scopeSelector(scope, '.bw_navbar_dark .bw_nav_link.active')] = {
-      'color': '#fff',
+    rules[_sx(scope, '.bw_navbar_dark .bw_nav_link.active')] = {
+      'color': palette.light.base,
       'font-weight': '600'
     };
-    rules[scopeSelector(scope, '.bw_nav_pills .bw_nav_link.active')] = {
+    rules[_sx(scope, '.bw_nav_pills .bw_nav_link.active')] = {
       'color': palette.primary.textOn,
       'background-color': palette.primary.base
     };
@@ -1139,47 +1108,57 @@
   function generateTables(scope, palette, layout) {
     var rules = {};
     var sp = layout.spacing;
-    rules[scopeSelector(scope, '.bw_table')] = {
+    rules[_sx(scope, '.bw_table')] = {
       'color': palette.dark.base,
       'border-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_table > :not(caption) > * > *')] = {
+    rules[_sx(scope, '.bw_table > :not(caption) > * > *')] = {
       'padding': sp.cell,
       'border-bottom-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_table > thead > tr > *')] = {
+    rules[_sx(scope, '.bw_table > thead > tr > *')] = {
       'color': palette.secondary.base,
       'border-bottom-color': palette.light.border,
-      'background-color': palette.light.light
+      'background-color': palette.surfaceAlt
     };
-    rules[scopeSelector(scope, '.bw_table_striped > tbody > tr:nth-of-type(odd) > *')] = {
-      'background-color': 'rgba(0, 0, 0, 0.05)'
+    rules[_sx(scope, '.bw_table_striped > tbody > tr:nth-of-type(odd) > *')] = {
+      'background-color': palette.surfaceAlt
     };
-    rules[scopeSelector(scope, '.bw_table_hover > tbody > tr:hover > *')] = {
+    rules[_sx(scope, '.bw_table_hover > tbody > tr:hover > *')] = {
       'background-color': palette.primary.focus
     };
-    rules[scopeSelector(scope, '.bw_table_bordered')] = {
+    rules[_sx(scope, '.bw_table_selectable > tbody > tr')] = {
+      'cursor': 'pointer'
+    };
+    rules[_sx(scope, '.bw_table > tbody > tr.bw_table_row_selected > *')] = {
+      'background-color': palette.primary.light
+    };
+    rules[_sx(scope, '.bw_table_bordered')] = {
       'border-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_table caption')] = {
+    rules[_sx(scope, '.bw_table caption')] = {
       'color': palette.secondary.base
     };
     return rules;
   }
-  function generateTabs(scope, palette) {
-    var rules = {};
-    rules[scopeSelector(scope, '.bw_nav_tabs')] = {
+  function generateTabs(scope, palette, layout) {
+    var rules = {},
+      mo = layout.motion;
+    rules[_sx(scope, '.bw_nav_tabs')] = {
       'border-bottom-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_nav_link')] = {
-      'color': palette.secondary.base
+    rules[_sx(scope, '.bw_nav_link')] = {
+      'color': palette.secondary.base,
+      'transition': 'color ' + mo.fast + ' ' + mo.easing + ', border-color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
     };
-    rules[scopeSelector(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
+    rules[_sx(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
       'color': palette.dark.base,
+      'background-color': palette.surfaceAlt,
       'border-bottom-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_nav_tabs .bw_nav_link.active')] = {
+    rules[_sx(scope, '.bw_nav_tabs .bw_nav_link.active')] = {
       'color': palette.primary.base,
+      'background-color': palette.primary.focus,
       'border-bottom': '2px solid ' + palette.primary.base
     };
     return rules;
@@ -1187,49 +1166,62 @@
   function generateListGroups(scope, palette, layout) {
     var rules = {};
     var sp = layout.spacing;
-    rules[scopeSelector(scope, '.bw_list_group_item')] = {
+    var mo = layout.motion;
+    rules[_sx(scope, '.bw_list_group_item')] = {
       'padding': sp.cell,
       'color': palette.dark.base,
       'background-color': palette.surface || '#fff',
-      'border-color': palette.light.border
+      'border-color': palette.light.border,
+      'transition': 'color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
     };
-    rules[scopeSelector(scope, 'a.bw_list_group_item:hover')] = {
-      'background-color': palette.light.light,
+    rules[_sx(scope, 'a.bw_list_group_item:hover')] = {
+      'background-color': palette.surfaceAlt,
       'color': palette.dark.hover
     };
-    rules[scopeSelector(scope, '.bw_list_group_item.active')] = {
+    rules[_sx(scope, '.bw_list_group_item.active')] = {
       'color': palette.primary.textOn,
       'background-color': palette.primary.base,
       'border-color': palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_list_group_item.disabled')] = {
+    rules[_sx(scope, '.bw_list_group_item.disabled')] = {
       'color': palette.secondary.base,
       'background-color': palette.surface || '#fff'
     };
     return rules;
   }
-  function generatePagination(scope, palette) {
-    var rules = {};
-    rules[scopeSelector(scope, '.bw_page_link')] = {
+  function generatePagination(scope, palette, layout) {
+    var rules = {},
+      mo = layout.motion,
+      rd = layout.radius;
+    rules[_sx(scope, '.bw_page_item:first-child .bw_page_link')] = {
+      'border-top-left-radius': rd.btn,
+      'border-bottom-left-radius': rd.btn
+    };
+    rules[_sx(scope, '.bw_page_item:last-child .bw_page_link')] = {
+      'border-top-right-radius': rd.btn,
+      'border-bottom-right-radius': rd.btn
+    };
+    rules[_sx(scope, '.bw_page_link')] = {
       'color': palette.primary.base,
       'background-color': palette.surface || '#fff',
-      'border-color': palette.light.border
+      'border-color': palette.light.border,
+      'transition': 'color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
     };
-    rules[scopeSelector(scope, '.bw_page_link:hover')] = {
+    rules[_sx(scope, '.bw_page_link:hover')] = {
       'color': palette.primary.hover,
-      'background-color': palette.light.light,
+      'background-color': palette.surfaceAlt,
       'border-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_page_link:focus')] = {
+    rules[_sx(scope, '.bw_page_link:focus')] = {
       'outline': '2px solid ' + palette.primary.base,
       'outline-offset': '-2px'
     };
-    rules[scopeSelector(scope, '.bw_page_item.bw_active .bw_page_link')] = {
+    rules[_sx(scope, '.bw_page_item.bw_active .bw_page_link')] = {
       'color': palette.primary.textOn,
       'background-color': palette.primary.base,
       'border-color': palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_page_item.bw_disabled .bw_page_link')] = {
+    rules[_sx(scope, '.bw_page_item.bw_disabled .bw_page_link')] = {
       'color': palette.secondary.base,
       'background-color': palette.surface || '#fff',
       'border-color': palette.light.border
@@ -1238,12 +1230,12 @@
   }
   function generateProgress(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_progress')] = {
-      'background-color': palette.light.light,
+    rules[_sx(scope, '.bw_progress')] = {
+      'background-color': palette.surfaceAlt,
       'box-shadow': 'inset 0 1px 2px rgba(0,0,0,.1)'
     };
-    rules[scopeSelector(scope, '.bw_progress_bar')] = {
-      'color': '#fff',
+    rules[_sx(scope, '.bw_progress_bar')] = {
+      'color': palette.primary.textOn,
       'background-color': palette.primary.base,
       'box-shadow': 'inset 0 -1px 0 rgba(0,0,0,.15)'
     };
@@ -1262,25 +1254,31 @@
       'color': palette.dark.base,
       'background-color': bg
     };
-    rules[scopeSelector(scope, 'body')] = baseReset;
-    // Also apply to the scope element itself so themes work on any container, not just body
-    if (scope) {
-      rules['.' + scope] = baseReset;
-    }
+    rules[_sx(scope, 'body')] = baseReset;
     return rules;
   }
-  function generateBreadcrumbThemed(scope, palette) {
-    var rules = {};
-    rules[scopeSelector(scope, '.bw_breadcrumb_item + .bw_breadcrumb_item::before')] = {
-      'color': palette.secondary.base
+  function generateBreadcrumbThemed(scope, palette, layout) {
+    var rules = {},
+      mo = layout.motion;
+    rules[_sx(scope, '.bw_breadcrumb')] = {
+      'background-color': palette.surfaceAlt,
+      'padding': '0.625rem 1rem',
+      'border-radius': layout.radius.btn
     };
-    rules[scopeSelector(scope, '.bw_breadcrumb_item.active')] = {
+    rules[_sx(scope, '.bw_breadcrumb_item + .bw_breadcrumb_item::before')] = {
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_breadcrumb_item a:hover')] = {
+    rules[_sx(scope, '.bw_breadcrumb_item a')] = {
+      'color': palette.primary.base,
+      'transition': 'color ' + mo.fast + ' ' + mo.easing
+    };
+    rules[_sx(scope, '.bw_breadcrumb_item a:hover')] = {
       'color': palette.primary.hover,
       'text-decoration': 'underline'
     };
+    rules[_sx(scope, '.bw_breadcrumb_item.active')] = {
+      'color': palette.dark.base
+    };
     return rules;
   }
 
@@ -1288,240 +1286,273 @@
 
   function generateCloseButtonThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_close')] = {
+    rules[_sx(scope, '.bw_close')] = {
       'color': palette.dark.base,
       'opacity': '0.5'
     };
-    rules[scopeSelector(scope, '.bw_close:focus')] = {
+    rules[_sx(scope, '.bw_close:focus')] = {
       'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
     };
     return rules;
   }
   function generateSectionsThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_section_subtitle')] = {
+    rules[_sx(scope, '.bw_section_subtitle')] = {
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_feature_description')] = {
+    rules[_sx(scope, '.bw_feature_description')] = {
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_cta_description')] = {
+    rules[_sx(scope, '.bw_cta_description')] = {
       'color': palette.secondary.base
     };
     return rules;
   }
-  function generateAccordionThemed(scope, palette) {
+  function generateAccordionThemed(scope, palette, layout) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_accordion_item')] = {
+    var rd = layout ? layout.radius : {
+      card: '8px'
+    };
+    rules[_sx(scope, '.bw_accordion_item')] = {
       'background-color': palette.surface || '#fff',
       'border-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_accordion_button')] = {
+    rules[_sx(scope, '.bw_accordion_item:first-child')] = {
+      'border-top-left-radius': rd.card,
+      'border-top-right-radius': rd.card
+    };
+    rules[_sx(scope, '.bw_accordion_item:last-child')] = {
+      'border-bottom-left-radius': rd.card,
+      'border-bottom-right-radius': rd.card
+    };
+    rules[_sx(scope, '.bw_accordion_button')] = {
       'color': palette.dark.base
     };
-    rules[scopeSelector(scope, '.bw_accordion_button:not(.bw_collapsed)')] = {
+    rules[_sx(scope, '.bw_accordion_button:not(.bw_collapsed)')] = {
       'color': palette.primary.darkText,
-      'background-color': palette.primary.light
+      'background-color': palette.primary.light,
+      'border-left': '3px solid ' + palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_accordion_button:hover')] = {
-      'background-color': palette.light.light
+    rules[_sx(scope, '.bw_accordion_button:hover')] = {
+      'background-color': palette.surfaceAlt
     };
-    rules[scopeSelector(scope, '.bw_accordion_button:not(.bw_collapsed):hover')] = {
-      'background-color': palette.primary.hover
+    rules[_sx(scope, '.bw_accordion_button:not(.bw_collapsed):hover')] = {
+      'background-color': palette.primary.base,
+      'color': palette.primary.textOn
     };
-    rules[scopeSelector(scope, '.bw_accordion_button:focus-visible')] = {
+    rules[_sx(scope, '.bw_accordion_button:focus-visible')] = {
       'box-shadow': '0 0 0 0.2rem ' + palette.primary.focus
     };
-    rules[scopeSelector(scope, '.bw_accordion_body')] = {
-      'border-top': '1px solid ' + palette.light.border
+    rules[_sx(scope, '.bw_accordion_body')] = {
+      'border-top': '1px solid ' + palette.light.border,
+      'background-color': palette.surfaceAlt
     };
     return rules;
   }
   function generateCarouselThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_carousel')] = {
-      'background-color': palette.light.light
+    rules[_sx(scope, '.bw_carousel')] = {
+      'background-color': palette.surfaceAlt
     };
-    rules[scopeSelector(scope, '.bw_carousel_indicator.active')] = {
+    rules[_sx(scope, '.bw_carousel_indicator.active')] = {
       'background-color': palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_carousel_control')] = {
-      'background-color': 'rgba(0,0,0,0.4)',
-      'color': '#fff'
+    rules[_sx(scope, '.bw_carousel_control')] = {
+      'background-color': palette.dark.base,
+      'color': palette.dark.textOn
     };
-    rules[scopeSelector(scope, '.bw_carousel_control:hover')] = {
-      'background-color': 'rgba(0,0,0,0.6)'
+    rules[_sx(scope, '.bw_carousel_control:hover')] = {
+      'background-color': palette.dark.hover
     };
-    rules[scopeSelector(scope, '.bw_carousel_caption')] = {
-      'background': 'linear-gradient(transparent, rgba(0,0,0,0.6))',
-      'color': '#fff'
+    rules[_sx(scope, '.bw_carousel_caption')] = {
+      'background': 'linear-gradient(transparent, ' + palette.dark.base + ')',
+      'color': palette.dark.textOn
     };
     return rules;
   }
   function generateModalThemed(scope, palette, layout) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_modal_content')] = {
+    rules[_sx(scope, '.bw_modal_content')] = {
       'background-color': palette.surface || '#fff',
       'border-color': palette.light.border,
       'box-shadow': layout.elevation.lg
     };
-    rules[scopeSelector(scope, '.bw_modal_header')] = {
+    rules[_sx(scope, '.bw_modal_header')] = {
       'border-bottom-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_modal_footer')] = {
+    rules[_sx(scope, '.bw_modal_footer')] = {
       'border-top-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_modal_title')] = {
+    rules[_sx(scope, '.bw_modal_title')] = {
       'color': palette.dark.base
     };
     return rules;
   }
   function generateToastThemed(scope, palette, layout) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_toast')] = {
+    rules[_sx(scope, '.bw_toast')] = {
       'background-color': palette.surface || '#fff',
-      'border-color': 'rgba(0,0,0,0.1)',
+      'border-color': palette.light.border,
       'box-shadow': layout.elevation.lg
     };
-    rules[scopeSelector(scope, '.bw_toast_header')] = {
-      'border-bottom-color': 'rgba(0,0,0,0.05)'
+    rules[_sx(scope, '.bw_toast_header')] = {
+      'border-bottom-color': palette.light.border
     };
     // Variant toast borders handled by palette class
     return rules;
   }
   function generateDropdownThemed(scope, palette, layout) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_dropdown_menu')] = {
+    rules[_sx(scope, '.bw_dropdown_menu')] = {
       'background-color': palette.surface || '#fff',
       'border-color': palette.light.border,
       'box-shadow': layout.elevation.md
     };
-    rules[scopeSelector(scope, '.bw_dropdown_item')] = {
-      'color': palette.dark.base
+    rules[_sx(scope, '.bw_dropdown_item')] = {
+      'color': palette.dark.base,
+      'transition': 'background-color ' + layout.motion.fast + ' ' + layout.motion.easing
     };
-    rules[scopeSelector(scope, '.bw_dropdown_item:hover')] = {
+    rules[_sx(scope, '.bw_dropdown_item:hover')] = {
       'color': palette.dark.hover,
-      'background-color': palette.light.light
+      'background-color': palette.surfaceAlt
     };
-    rules[scopeSelector(scope, '.bw_dropdown_item.disabled')] = {
+    rules[_sx(scope, '.bw_dropdown_item.disabled')] = {
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_dropdown_divider')] = {
+    rules[_sx(scope, '.bw_dropdown_divider')] = {
       'border-top-color': palette.light.border
     };
     return rules;
   }
   function generateSwitchThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_form_switch .bw_switch_input')] = {
+    rules[_sx(scope, '.bw_form_switch .bw_switch_input')] = {
       'background-color': palette.secondary.base,
       'border-color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_form_switch .bw_switch_input:checked')] = {
+    rules[_sx(scope, '.bw_form_switch .bw_switch_input:checked')] = {
       'background-color': palette.primary.base,
       'border-color': palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_form_switch .bw_switch_input:focus')] = {
+    rules[_sx(scope, '.bw_form_switch .bw_switch_input:focus')] = {
       'box-shadow': '0 0 0 0.25rem ' + palette.primary.focus
     };
     return rules;
   }
   function generateSkeletonThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_skeleton')] = {
-      'background': 'linear-gradient(90deg, ' + palette.light.border + ' 25%, ' + palette.light.light + ' 37%, ' + palette.light.border + ' 63%)'
+    rules[_sx(scope, '.bw_skeleton')] = {
+      'background': 'linear-gradient(90deg, ' + palette.light.border + ' 25%, ' + palette.surfaceAlt + ' 37%, ' + palette.light.border + ' 63%)'
     };
     return rules;
   }
 
   // generateAvatarThemed: removed — palette class on root handles variants
 
-  function generateStatCardThemed(scope, palette) {
-    var rules = {};
+  function generateStatCardThemed(scope, palette, layout) {
+    var rules = {},
+      mo = layout.motion,
+      el = layout.elevation,
+      rd = layout.radius;
+    rules[_sx(scope, '.bw_stat_card')] = {
+      'background-color': palette.surface || '#fff',
+      'color': palette.dark.base,
+      'border': '1px solid ' + palette.light.border,
+      'border-radius': rd.card,
+      'box-shadow': el.sm,
+      'transition': 'box-shadow ' + mo.fast + ' ' + mo.easing + ', transform ' + mo.fast + ' ' + mo.easing
+    };
+    rules[_sx(scope, '.bw_stat_card:hover')] = {
+      'box-shadow': el.md
+    };
     // Variant border colors handled by palette class
-    rules[scopeSelector(scope, '.bw_stat_change_up')] = {
+    rules[_sx(scope, '.bw_stat_change_up')] = {
       'color': palette.success.base
     };
-    rules[scopeSelector(scope, '.bw_stat_change_down')] = {
+    rules[_sx(scope, '.bw_stat_change_down')] = {
       'color': palette.danger.base
     };
     return rules;
   }
   function generateTimelineThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_timeline::before')] = {
+    rules[_sx(scope, '.bw_timeline::before')] = {
       'background-color': palette.light.border
     };
     // Variant marker colors handled by palette class
-    rules[scopeSelector(scope, '.bw_timeline_date')] = {
+    rules[_sx(scope, '.bw_timeline_date')] = {
       'color': palette.secondary.base
     };
     return rules;
   }
   function generateStepperThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_step_indicator')] = {
-      'background-color': palette.light.light,
+    rules[_sx(scope, '.bw_step_indicator')] = {
+      'background-color': palette.surfaceAlt,
       'border': '2px solid ' + palette.light.border,
       'color': palette.secondary.base
     };
-    rules[scopeSelector(scope, '.bw_step + .bw_step::before')] = {
+    rules[_sx(scope, '.bw_step + .bw_step::before')] = {
       'background-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_step_active .bw_step_indicator')] = {
+    rules[_sx(scope, '.bw_step_active .bw_step_indicator')] = {
       'background-color': palette.primary.base,
       'color': palette.primary.textOn
     };
-    rules[scopeSelector(scope, '.bw_step_active .bw_step_label')] = {
+    rules[_sx(scope, '.bw_step_active .bw_step_label')] = {
       'color': palette.dark.base,
       'font-weight': '600'
     };
-    rules[scopeSelector(scope, '.bw_step_completed .bw_step_indicator')] = {
+    rules[_sx(scope, '.bw_step_completed .bw_step_indicator')] = {
       'background-color': palette.primary.base,
       'color': palette.primary.textOn
     };
-    rules[scopeSelector(scope, '.bw_step_completed .bw_step_label')] = {
+    rules[_sx(scope, '.bw_step_completed .bw_step_label')] = {
       'color': palette.primary.base
     };
-    rules[scopeSelector(scope, '.bw_step_completed + .bw_step::before')] = {
+    rules[_sx(scope, '.bw_step_completed + .bw_step::before')] = {
       'background-color': palette.primary.base
     };
     return rules;
   }
   function generateChipInputThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_chip_input')] = {
-      'border-color': palette.light.border
+    rules[_sx(scope, '.bw_chip_input')] = {
+      'border-color': palette.light.border,
+      'background-color': palette.surface || '#fff',
+      'color': palette.dark.base
     };
-    rules[scopeSelector(scope, '.bw_chip_input:focus-within')] = {
+    rules[_sx(scope, '.bw_chip_input:focus-within')] = {
       'border-color': palette.primary.base,
       'box-shadow': '0 0 0 0.2rem ' + palette.primary.focus
     };
-    rules[scopeSelector(scope, '.bw_chip')] = {
-      'background-color': palette.light.light,
+    rules[_sx(scope, '.bw_chip')] = {
+      'background-color': palette.surfaceAlt,
       'color': palette.dark.base
     };
-    rules[scopeSelector(scope, '.bw_chip_remove:hover')] = {
+    rules[_sx(scope, '.bw_chip_remove:hover')] = {
       'color': palette.danger.base,
       'background-color': palette.danger.light
     };
     return rules;
   }
-  function generateFileUploadThemed(scope, palette) {
-    var rules = {};
-    rules[scopeSelector(scope, '.bw_file_upload')] = {
+  function generateFileUploadThemed(scope, palette, layout) {
+    var rules = {},
+      mo = layout.motion;
+    rules[_sx(scope, '.bw_file_upload')] = {
       'border-color': palette.light.border,
-      'background-color': palette.light.light
+      'background-color': palette.surfaceAlt,
+      'transition': 'border-color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
     };
-    rules[scopeSelector(scope, '.bw_file_upload:hover')] = {
+    rules[_sx(scope, '.bw_file_upload:hover')] = {
       'border-color': palette.primary.base,
       'background-color': palette.primary.light
     };
-    rules[scopeSelector(scope, '.bw_file_upload:focus')] = {
+    rules[_sx(scope, '.bw_file_upload:focus')] = {
       'outline': '2px solid ' + palette.primary.base,
       'outline-offset': '2px'
     };
-    rules[scopeSelector(scope, '.bw_file_upload.bw_file_upload_active')] = {
+    rules[_sx(scope, '.bw_file_upload.bw_file_upload_active')] = {
       'border-color': palette.primary.base,
       'background-color': palette.primary.light,
       'border-style': 'solid'
@@ -1530,37 +1561,93 @@
   }
   function generateRangeThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_range')] = {
+    rules[_sx(scope, '.bw_range')] = {
       'background-color': palette.light.border
     };
-    rules[scopeSelector(scope, '.bw_range::-webkit-slider-thumb')] = {
+    rules[_sx(scope, '.bw_range::-webkit-slider-thumb')] = {
       'background-color': palette.primary.base,
-      'border-color': '#fff',
+      'border-color': palette.surface || '#fff',
       'box-shadow': '0 1px 3px rgba(0,0,0,0.2)',
       'transition': 'background-color 0.15s ease-out, transform 0.15s ease-out'
     };
-    rules[scopeSelector(scope, '.bw_range::-moz-range-thumb')] = {
+    rules[_sx(scope, '.bw_range::-moz-range-thumb')] = {
       'background-color': palette.primary.base,
-      'border-color': '#fff',
+      'border-color': palette.surface || '#fff',
       'box-shadow': '0 1px 3px rgba(0,0,0,0.2)'
     };
     return rules;
   }
-  function generateSearchThemed(scope, palette) {
-    var rules = {};
-    rules[scopeSelector(scope, '.bw_search_clear:hover')] = {
+  function generateTooltipThemed(scope, palette, layout) {
+    var rules = {},
+      sp = layout.spacing,
+      rd = layout.radius,
+      el = layout.elevation,
+      mo = layout.motion;
+    rules[_sx(scope, '.bw_tooltip')] = {
+      'background-color': palette.dark.base,
+      'color': palette.dark.textOn,
+      'padding': sp.input,
+      'border-radius': rd.badge,
+      'box-shadow': el.md,
+      'transition': 'opacity ' + mo.fast + ' ' + mo.easing + ', transform ' + mo.fast + ' ' + mo.easing
+    };
+    return rules;
+  }
+  function generatePopoverThemed(scope, palette, layout) {
+    var rules = {},
+      sp = layout.spacing,
+      rd = layout.radius,
+      el = layout.elevation,
+      mo = layout.motion;
+    rules[_sx(scope, '.bw_popover')] = {
+      'background-color': palette.surface || '#fff',
+      'color': palette.dark.base,
+      'border': '1px solid ' + palette.light.border,
+      'border-radius': rd.card,
+      'box-shadow': el.lg,
+      'transition': 'opacity ' + mo.fast + ' ' + mo.easing + ', transform ' + mo.fast + ' ' + mo.easing
+    };
+    rules[_sx(scope, '.bw_popover_header')] = {
+      'background-color': palette.surfaceAlt,
+      'border-bottom': '1px solid ' + palette.light.border,
+      'padding': sp.input
+    };
+    rules[_sx(scope, '.bw_popover_body')] = {
+      'padding': sp.card
+    };
+    return rules;
+  }
+  function generateSearchThemed(scope, palette, layout) {
+    var rules = {},
+      mo = layout.motion;
+    rules[_sx(scope, '.bw_search_input')] = {
+      'background-color': palette.surface || '#fff',
+      'color': palette.dark.base
+    };
+    rules[_sx(scope, '.bw_search_clear')] = {
+      'transition': 'color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
+    };
+    rules[_sx(scope, '.bw_search_clear:hover')] = {
       'color': palette.dark.base
     };
     return rules;
   }
-  function generateCodeDemoThemed(scope, palette) {
+  function generateCodeDemoThemed(scope, palette, layout) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_code_copy_btn_copied')] = {
+    var rd = layout ? layout.radius : {
+      card: '0.375rem'
+    };
+    rules[_sx(scope, '.bw_code_demo')] = {
+      'background-color': palette.surface || '#fff',
+      'color': palette.dark.base,
+      'border-radius': rd.card
+    };
+    rules[_sx(scope, '.bw_code_copy_btn_copied')] = {
       'background': palette.success.base,
       'color': palette.success.textOn,
       'border-color': palette.success.base
     };
-    rules[scopeSelector(scope, '.bw_copy_btn:hover')] = {
+    rules[_sx(scope, '.bw_copy_btn:hover')] = {
       'background': 'rgba(255,255,255,0.2)',
       'color': '#fff'
     };
@@ -1569,7 +1656,7 @@
   function generateNavPillsThemed(scope, palette, layout) {
     var rules = {};
     var rd = layout.radius;
-    rules[scopeSelector(scope, '.bw_nav_pills .bw_nav_link')] = {
+    rules[_sx(scope, '.bw_nav_pills .bw_nav_link')] = {
       'border-radius': rd.btn
     };
     return rules;
@@ -1597,21 +1684,21 @@
       var s = palette[k];
 
       // --- Root palette class: sets default bg/color/border ---
-      rules[scopeSelector(scope, '.bw_' + k)] = {
+      rules[_sx(scope, '.bw_' + k)] = {
         'background-color': s.base,
         'color': s.textOn,
         'border-color': s.base
       };
 
       // --- Pseudo-states (shared across all components) ---
-      rules[scopeSelector(scope, '.bw_' + k + ':hover')] = {
+      rules[_sx(scope, '.bw_' + k + ':hover')] = {
         'background-color': s.hover,
         'border-color': s.active
       };
-      rules[scopeSelector(scope, '.bw_' + k + ':active')] = {
+      rules[_sx(scope, '.bw_' + k + ':active')] = {
         'background-color': s.active
       };
-      rules[scopeSelector(scope, '.bw_' + k + ':focus-visible')] = {
+      rules[_sx(scope, '.bw_' + k + ':focus-visible')] = {
         'box-shadow': '0 0 0 3px ' + s.focus,
         'outline': 'none'
       };
@@ -1619,71 +1706,110 @@
       // --- Component-specific overrides ---
 
       // Alerts: light bg, dark text, subtle border
-      rules[scopeSelector(scope, '.bw_alert.bw_' + k)] = {
+      rules[_sx(scope, '.bw_alert.bw_' + k)] = {
         'background-color': s.light,
         'color': s.darkText,
         'border-color': s.border
       };
 
       // Toast: inherit bg, left border accent
-      rules[scopeSelector(scope, '.bw_toast.bw_' + k)] = {
+      rules[_sx(scope, '.bw_toast.bw_' + k)] = {
         'background-color': 'inherit',
         'color': 'inherit',
         'border-left': '4px solid ' + s.base
       };
 
       // Stat card: inherit bg, left border accent
-      rules[scopeSelector(scope, '.bw_stat_card.bw_' + k)] = {
+      rules[_sx(scope, '.bw_stat_card.bw_' + k)] = {
         'background-color': 'inherit',
         'color': 'inherit',
         'border-left-color': s.base
       };
 
       // Card accent: left border accent, inherit bg
-      rules[scopeSelector(scope, '.bw_card.bw_' + k)] = {
+      rules[_sx(scope, '.bw_card.bw_' + k)] = {
         'background-color': 'inherit',
         'color': 'inherit',
         'border-left': '4px solid ' + s.base
       };
 
       // Timeline marker: colored dot
-      rules[scopeSelector(scope, '.bw_timeline_marker.bw_' + k)] = {
+      rules[_sx(scope, '.bw_timeline_marker.bw_' + k)] = {
         'box-shadow': '0 0 0 2px ' + s.base
       };
 
-      // Spinner: text color only, transparent bg
-      rules[scopeSelector(scope, '.bw_spinner_border.bw_' + k + ',\n' + scopeSelector(scope, '.bw_spinner_grow.bw_' + k))] = {
+      // Spinner: set color, re-apply border pattern so the root palette class
+      // border-color doesn't fill in the transparent gap that makes it spin.
+      // Also neutralize hover/active which would override border-right-color.
+      rules[_sx(scope, '.bw_spinner_border.bw_' + k)] = {
         'background-color': 'transparent',
         'color': s.base,
-        'border-color': 'currentColor'
+        'border-color': s.base,
+        'border-right-color': 'transparent'
+      };
+      rules[_sx(scope, '.bw_spinner_border.bw_' + k + ':hover')] = {
+        'background-color': 'transparent',
+        'border-color': s.base,
+        'border-right-color': 'transparent'
+      };
+      rules[_sx(scope, '.bw_spinner_grow.bw_' + k)] = {
+        'background-color': s.base,
+        'color': s.base
       };
 
       // Outline button: transparent bg, colored border+text, solid on hover
-      rules[scopeSelector(scope, '.bw_btn_outline.bw_' + k)] = {
+      rules[_sx(scope, '.bw_btn_outline.bw_' + k)] = {
         'background-color': 'transparent',
         'color': s.base,
         'border-color': s.base
       };
-      rules[scopeSelector(scope, '.bw_btn_outline.bw_' + k + ':hover')] = {
+      rules[_sx(scope, '.bw_btn_outline.bw_' + k + ':hover')] = {
         'background-color': s.base,
         'color': s.textOn
       };
 
       // Hero: gradient background
-      rules[scopeSelector(scope, '.bw_hero.bw_' + k)] = {
+      rules[_sx(scope, '.bw_hero.bw_' + k)] = {
         'background': 'linear-gradient(135deg, ' + s.base + ' 0%, ' + s.hover + ' 100%)',
         'color': s.textOn
       };
 
-      // Progress bar: white text on colored bg (default is fine, just ensure text)
-      rules[scopeSelector(scope, '.bw_progress_bar.bw_' + k)] = {
-        'color': '#fff'
+      // Progress bar: contrasting text on colored bg
+      rules[_sx(scope, '.bw_progress_bar.bw_' + k)] = {
+        'color': s.textOn
+      };
+
+      // Background utility: .bw_bg_primary, .bw_bg_secondary, etc.
+      rules[_sx(scope, '.bw_bg_' + k)] = {
+        'background-color': s.base,
+        'color': s.textOn
+      };
+
+      // Text color utility: .bw_text_primary, .bw_text_secondary, etc.
+      rules[_sx(scope, '.bw_text_' + k)] = {
+        'color': s.base
       };
     });
 
-    // Text muted
-    rules[scopeSelector(scope, '.bw_text_muted')] = {
-      'color': palette.secondary.base
+    // Text muted — always a neutral gray, never a brand color
+    rules[_sx(scope, '.bw_text_muted')] = {
+      'color': '#6c757d'
+    };
+
+    // Common bg/text utilities that aren't per-variant
+    rules[_sx(scope, '.bw_bg_dark')] = {
+      'background-color': '#212529',
+      'color': '#f8f9fa'
+    };
+    rules[_sx(scope, '.bw_bg_light')] = {
+      'background-color': '#f8f9fa',
+      'color': '#212529'
+    };
+    rules[_sx(scope, '.bw_text_light')] = {
+      'color': '#f8f9fa'
+    };
+    rules[_sx(scope, '.bw_text_dark')] = {
+      'color': '#212529'
     };
     return rules;
   }
@@ -1698,7 +1824,7 @@
    * @returns {Object} CSS rules object
    */
   function generateThemedCSS(scopeName, palette, layout) {
-    return Object.assign({}, generateResetThemed(scopeName, palette), generateTypographyThemed(scopeName, palette, layout), generateButtons(scopeName, palette, layout), generateAlerts(scopeName, palette, layout), generateCards(scopeName, palette, layout), generateForms(scopeName, palette, layout), generateNavigation(scopeName, palette), generateTables(scopeName, palette, layout), generateTabs(scopeName, palette), generateListGroups(scopeName, palette, layout), generatePagination(scopeName, palette), generateProgress(scopeName, palette), generateBreadcrumbThemed(scopeName, palette), generateCloseButtonThemed(scopeName, palette), generateSectionsThemed(scopeName, palette), generateAccordionThemed(scopeName, palette), generateCarouselThemed(scopeName, palette), generateModalThemed(scopeName, palette, layout), generateToastThemed(scopeName, palette, layout), generateDropdownThemed(scopeName, palette, layout), generateSwitchThemed(scopeName, palette), generateSkeletonThemed(scopeName, palette), generateStatCardThemed(scopeName, palette), generateTimelineThemed(scopeName, palette), generateStepperThemed(scopeName, palette), generateChipInputThemed(scopeName, palette), generateFileUploadThemed(scopeName, palette), generateRangeThemed(scopeName, palette), generateSearchThemed(scopeName, palette), generateCodeDemoThemed(scopeName, palette), generateNavPillsThemed(scopeName, palette, layout), generatePaletteClasses(scopeName, palette));
+    return Object.assign({}, generateResetThemed(scopeName, palette), generateTypographyThemed(scopeName, palette, layout), generateButtons(scopeName, palette, layout), generateAlerts(scopeName, palette, layout), generateCards(scopeName, palette, layout), generateForms(scopeName, palette, layout), generateNavigation(scopeName, palette, layout), generateTables(scopeName, palette, layout), generateTabs(scopeName, palette, layout), generateListGroups(scopeName, palette, layout), generatePagination(scopeName, palette, layout), generateProgress(scopeName, palette), generateBreadcrumbThemed(scopeName, palette, layout), generateCloseButtonThemed(scopeName, palette), generateSectionsThemed(scopeName, palette), generateAccordionThemed(scopeName, palette, layout), generateCarouselThemed(scopeName, palette), generateModalThemed(scopeName, palette, layout), generateToastThemed(scopeName, palette, layout), generateDropdownThemed(scopeName, palette, layout), generateSwitchThemed(scopeName, palette), generateSkeletonThemed(scopeName, palette), generateStatCardThemed(scopeName, palette, layout), generateTimelineThemed(scopeName, palette), generateStepperThemed(scopeName, palette), generateChipInputThemed(scopeName, palette), generateFileUploadThemed(scopeName, palette, layout), generateRangeThemed(scopeName, palette), generateSearchThemed(scopeName, palette, layout), generateTooltipThemed(scopeName, palette, layout), generatePopoverThemed(scopeName, palette, layout), generateCodeDemoThemed(scopeName, palette, layout), generateNavPillsThemed(scopeName, palette, layout), generatePaletteClasses(scopeName, palette));
   }
 
   // =========================================================================
@@ -2193,6 +2319,12 @@
         'border-width': '1px',
         'border-style': 'solid'
       },
+      '.bw_table_selectable > tbody > tr': {
+        'cursor': 'pointer'
+      },
+      '.bw_table > tbody > tr.bw_table_row_selected > *': {
+        'background-color': 'rgba(0, 102, 102, 0.1)'
+      },
       '.bw_table_responsive': {
         'overflow-x': 'auto',
         '-webkit-overflow-scrolling': 'touch'
@@ -2306,6 +2438,7 @@
         'display': 'block',
         'font-size': '0.875rem',
         'font-weight': '500',
+        'padding': '0.625rem 1rem',
         'text-decoration': 'none',
         'cursor': 'pointer',
         'border': 'none',
@@ -2408,16 +2541,15 @@
         'padding': '0.375rem 0.75rem',
         'margin-left': '-1px',
         'line-height': '1.25',
-        'text-decoration': 'none'
+        'text-decoration': 'none',
+        'border': '1px solid transparent',
+        'cursor': 'pointer',
+        'font-family': 'inherit',
+        'font-size': 'inherit',
+        'background': 'none'
       },
       '.bw_page_item:first-child .bw_page_link': {
-        'margin-left': '0',
-        'border-top-left-radius': '0.375rem',
-        'border-bottom-left-radius': '0.375rem'
-      },
-      '.bw_page_item:last-child .bw_page_link': {
-        'border-top-right-radius': '0.375rem',
-        'border-bottom-right-radius': '0.375rem'
+        'margin-left': '0'
       },
       '.bw_page_link:focus-visible': {
         'z-index': '3',
@@ -2788,6 +2920,7 @@
         'display': 'flex',
         'align-items': 'center',
         'width': '100%',
+        'padding': '0.875rem 1.25rem',
         'font-size': '1rem',
         'font-weight': '500',
         'text-align': 'left',
@@ -2810,20 +2943,16 @@
       '.bw_accordion_button:not(.bw_collapsed)::after': {
         'transform': 'rotate(-180deg)'
       },
+      '.bw_accordion_body': {
+        'padding': '1rem 1.25rem'
+      },
       '.bw_accordion_collapse': {
         'max-height': '0',
-        'overflow': 'hidden'
+        'overflow': 'hidden',
+        'transition': 'max-height 0.3s ease'
       },
       '.bw_accordion_collapse.bw_collapse_show': {
         'max-height': 'none'
-      },
-      '.bw_accordion_item:first-child': {
-        'border-top-left-radius': '8px',
-        'border-top-right-radius': '8px'
-      },
-      '.bw_accordion_item:last-child': {
-        'border-bottom-left-radius': '8px',
-        'border-bottom-right-radius': '8px'
       }
     },
     // ---- Carousel ----
@@ -3191,7 +3320,11 @@
     // ---- Stat card ----
     statCard: {
       '.bw_stat_card': {
-        'border-left': '4px solid transparent'
+        'padding': '1.25rem',
+        'border-left': '4px solid transparent',
+        'border-radius': '0.375rem',
+        'background-color': 'inherit',
+        'transition': 'transform 0.15s ease'
       },
       '.bw_stat_card:hover': {
         'transform': 'translateY(-1px)'
@@ -4209,6 +4342,52 @@
       'margin-right': '.5rem'
     };
 
+    // Typography — bw_ prefixed utilities via loops
+    var _imp = function _imp(p, v) {
+      var o = {};
+      o[p] = v + ' !important';
+      return o;
+    };
+    [['fs', {
+      'xs': '0.75rem',
+      'sm': '0.875rem',
+      'base': '1rem',
+      'lg': '1.125rem',
+      'xl': '1.25rem',
+      '2xl': '1.5rem'
+    }, 'font-size'], ['fw', {
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700'
+    }, 'font-weight'], ['lh', {
+      tight: '1.25',
+      normal: '1.5',
+      relaxed: '1.75'
+    }, 'line-height']].forEach(function (d) {
+      for (var dk in d[1]) rules['.bw_' + d[0] + '_' + dk] = _imp(d[2], d[1][dk]);
+    });
+
+    // Flex utilities
+    rules['.bw_flex'] = {
+      'display': 'flex'
+    };
+    rules['.bw_flex_column'] = {
+      'flex-direction': 'column'
+    };
+    rules['.bw_flex_wrap'] = {
+      'flex-wrap': 'wrap'
+    };
+    rules['.bw_flex_center'] = {
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'center'
+    };
+    for (var gk in spacingValues) rules['.bw_gap_' + gk] = {
+      'gap': spacingValues[gk] + ' !important'
+    };
+
     // Visibility
     rules['.bw_visible, .visible'] = {
       'visibility': 'visible !important'
@@ -4287,6 +4466,26 @@
     return getStructuralCSS();
   }
 
+  /**
+   * Get CSS reset rules only (box-sizing, html/body font, reduced-motion).
+   * Separate from themed/structural rules for independent injection.
+   * @returns {Object} CSS rules object for the reset layer
+   */
+  function getResetStyles() {
+    var rules = {};
+    Object.assign(rules, structuralRules.base);
+    // Include reduced-motion preference
+    rules['@media (prefers-reduced-motion: reduce)'] = {
+      '*, *::before, *::after': {
+        'animation-duration': '0.01ms !important',
+        'animation-iteration-count': '1 !important',
+        'transition-duration': '0.01ms !important',
+        'scroll-behavior': 'auto !important'
+      }
+    };
+    return rules;
+  }
+
   // =========================================================================
   // defaultStyles — backward-compatible categorized view
   // =========================================================================
@@ -4321,57 +4520,40 @@
   });
 
   /**
-   * Generate alternate-palette CSS scoped under `.bw_theme_alt`.
-   * Uses the same `generateThemedCSS()` pipeline as the primary palette —
-   * both sides go through identical code paths.
-   *
-   * @param {string} name - Theme scope name (e.g. 'ocean'). '' for global.
-   * @param {Object} altPalette - From derivePalette(deriveAlternateConfig(...))
-   * @param {Object} layout - From resolveLayout()
-   * @returns {Object} CSS rules object scoped under .bw_theme_alt (+ optional .name)
+   * Prefix every selector in a rules object with a scope selector.
+   * Handles @media/@keyframes blocks and comma-separated selectors.
+   * @param {Object} rules - CSS rules object
+   * @param {string} prefix - Scope prefix (e.g. '#my-dashboard', '.bw_theme_alt')
+   * @param {boolean} [compound=false] - If true, use compound selector (no space)
+   *   for the first segment: `#scope.bw_theme_alt .sel` vs `#scope .sel`
+   * @returns {Object} New rules object with scoped selectors
    */
-  function generateAlternateCSS(name, altPalette, layout) {
-    // Generate themed CSS using the same pipeline as primary
-    var rawRules = generateThemedCSS('', altPalette, layout);
-
-    // Re-scope every selector under .bw_theme_alt (+ optional theme name)
-    var altPrefix = name ? '.' + name + '.bw_theme_alt' : '.bw_theme_alt';
-    var altRules = {};
-    for (var sel in rawRules) {
-      if (!rawRules.hasOwnProperty(sel)) continue;
+  function scopeRulesUnder(rules, prefix, compound) {
+    var scoped = {};
+    for (var sel in rules) {
+      if (!rules.hasOwnProperty(sel)) continue;
       if (sel.charAt(0) === '@') {
         // @media / @keyframes — recurse into the block
-        var innerBlock = rawRules[sel];
-        var altInner = {};
+        var innerBlock = rules[sel];
+        var scopedInner = {};
         for (var innerSel in innerBlock) {
           if (!innerBlock.hasOwnProperty(innerSel)) continue;
-          altInner[altPrefix + ' ' + innerSel] = innerBlock[innerSel];
+          scopedInner[_prefixSelector(innerSel, prefix)] = innerBlock[innerSel];
         }
-        altRules[sel] = altInner;
+        scoped[sel] = scopedInner;
       } else {
-        // Regular selector — prefix with alt scope
-        // Handle comma-separated selectors
-        var parts = sel.split(',');
-        var scopedParts = [];
-        for (var i = 0; i < parts.length; i++) {
-          var s = parts[i].trim();
-          // 'body' selector gets special treatment: .bw_theme_alt body
-          if (s === 'body' || s.indexOf('body') === 0) {
-            scopedParts.push(altPrefix + ' ' + s);
-          } else {
-            scopedParts.push(altPrefix + ' ' + s);
-          }
-        }
-        altRules[scopedParts.join(', ')] = rawRules[sel];
+        scoped[_prefixSelector(sel, prefix)] = rules[sel];
       }
     }
-
-    // Add body-level overrides for the alternate surface
-    altRules[altPrefix + ' body, :root' + altPrefix + ' body'] = {
-      'color': altPalette.dark.base,
-      'background-color': altPalette.light.base
-    };
-    return altRules;
+    return scoped;
+  }
+  function _prefixSelector(sel, prefix) {
+    var parts = sel.split(',');
+    var result = [];
+    for (var i = 0; i < parts.length; i++) {
+      result.push(prefix + ' ' + parts[i].trim());
+    }
+    return result.join(', ');
   }
 
   /**
@@ -5413,7 +5595,7 @@
         if (breakpoint === 'xs') {
           classes.push("bw_col_".concat(value));
         } else {
-          classes.push("bw_col_".concat(breakpoint, "-").concat(value));
+          classes.push("bw_col_".concat(breakpoint, "_").concat(value));
         }
       });
     } else if (size) {
@@ -6938,12 +7120,13 @@
         "class": "bw_page_item ".concat(currentPage <= 1 ? 'bw_disabled' : '').trim()
       },
       c: {
-        t: 'a',
+        t: 'button',
         a: {
           "class": 'bw_page_link',
-          href: '#',
+          type: 'button',
           onclick: handleClick(currentPage - 1),
-          'aria-label': 'Previous'
+          'aria-label': 'Previous',
+          disabled: currentPage <= 1 ? true : undefined
         },
         c: "\u2039"
       }
@@ -6958,11 +7141,12 @@
             "class": "bw_page_item ".concat(pageNum === currentPage ? 'bw_active' : '').trim()
           },
           c: {
-            t: 'a',
+            t: 'button',
             a: {
               "class": 'bw_page_link',
-              href: '#',
-              onclick: handleClick(pageNum)
+              type: 'button',
+              onclick: handleClick(pageNum),
+              'aria-current': pageNum === currentPage ? 'page' : undefined
             },
             c: '' + pageNum
           }
@@ -6977,12 +7161,13 @@
         "class": "bw_page_item ".concat(currentPage >= pages ? 'bw_disabled' : '').trim()
       },
       c: {
-        t: 'a',
+        t: 'button',
         a: {
           "class": 'bw_page_link',
-          href: '#',
+          type: 'button',
           onclick: handleClick(currentPage + 1),
-          'aria-label': 'Next'
+          'aria-label': 'Next',
+          disabled: currentPage >= pages ? true : undefined
         },
         c: "\u203A"
       }
@@ -9080,7 +9265,14 @@
   function make(type, props) {
     var def = BCCL[type];
     if (!def) throw new Error('bw.make: unknown component type "' + type + '". Available: ' + Object.keys(BCCL).join(', '));
-    return def.make(props || {});
+    var taco = def.make(props || {});
+    if (taco && _typeof(taco) === 'object') {
+      taco._bwFactory = {
+        type: type,
+        props: props || {}
+      };
+    }
+    return taco;
   }
 
   var components = /*#__PURE__*/Object.freeze({
@@ -9193,7 +9385,7 @@
     __monkey_patch_is_nodejs__: {
       _value: 'ignore',
       set: function set(x) {
-        this._value = typeof x === 'boolean' ? x : 'ignore';
+        this._value = _is(x, 'boolean') ? x : 'ignore';
       },
       get: function get() {
         return this._value;
@@ -9241,6 +9433,76 @@
     configurable: true
   });
 
+  // ── Internal aliases ─────────────────────────────────────────────────────
+  // Short names for frequently-used builtins and internal methods.
+  // Same pattern as v1 (_to = bw.typeOf, etc.).
+  //
+  // Why: Terser can't shorten global property chains (console.warn,
+  // Object.prototype.hasOwnProperty, Array.isArray, document.createElement)
+  // because it can't prove they're side-effect-free. We can, so we alias
+  // them here. Each alias saves bytes in the minified output, and the short
+  // names also reduce visual noise in the hot paths (binding pipeline,
+  // createDOM, etc.).
+  //
+  // Alias       Target                                  Sites
+  // ─────────   ──────────────────────────────────────   ─────
+  // _hop        Object.prototype.hasOwnProperty          15
+  // _isA        Array.isArray                             25
+  // _keys       Object.keys                               7
+  // _to         bw.typeOf (type string)                   26
+  // _is         type check boolean: _is(x,'string')       ~50
+  // _cw         console.warn                               8
+  // _cl         console.log                               11
+  // _ce         console.error                              4
+  // _chp        ComponentHandle.prototype                 28  (defined after constructor)
+  //
+  // Note: document.createElement etc. are NOT aliased because they require
+  // `this === document` and .bind() would add overhead on every call.
+  // Console aliases use thin wrappers (not direct refs) so test monkey-
+  // patching of console.warn/log/error continues to work.
+  //
+  // `typeof x` for UNDECLARED globals (window, document, process, require,
+  // EventSource, navigator, Promise, __filename, import.meta) MUST stay as
+  // raw `typeof` — calling _to(x) when x doesn't exist throws ReferenceError.
+  //
+  // ── v1 functional type helpers (kept for reference, not currently used) ──
+  // _toa(x, type, trueVal, falseVal) — bw.typeAssign:
+  //   returns trueVal if _to(x)===type, else falseVal.
+  //   Replaces: (typeof x === 'string') ? A : B → _toa(x,'string',A,B)
+  // _toc(x, type, trueVal, falseVal) — bw.typeConvert:
+  //   same as _toa but if trueVal/falseVal are functions, calls them with x.
+  //   Replaces: typeof x === 'string' ? fn(x) : default → _toc(x,'string',fn,default)
+  // Uncomment if pattern frequency justifies them:
+  // var _toa = function(x, t, y, n) { return _to(x) === t ? y : n; };
+  // var _toc = function(x, t, y, n) { var r = _to(x)===t; return r ? (_to(y)==='function'?y(x):y) : (_to(n)==='function'?n(x):n); };
+  // ─────────────────────────────────────────────────────────────────────────
+  var _hop = Object.prototype.hasOwnProperty;
+  var _isA = Array.isArray;
+  var _keys = Object.keys;
+  var _to = typeOf; // imported from bitwrench-utils.js
+  var _is = function _is(x, t) {
+    var r = _to(x);
+    return r === t || r.toLowerCase() === t;
+  };
+  // Console aliases use thin wrappers (not direct references) so that test
+  // code can monkey-patch console.warn/log/error and the patches take effect.
+  var _cw = function _cw() {
+    console.warn.apply(console, arguments);
+  };
+  var _cl = function _cl() {
+    console.log.apply(console, arguments);
+  };
+  var _ce = function _ce() {
+    console.error.apply(console, arguments);
+  };
+
+  /**
+   * Debug flag. When true, emits console.warn for silent binding failures
+   * (missing paths, null refs, auto-created intermediate objects).
+   * @type {boolean}
+   */
+  bw.debug = false;
+
   /**
    * Lazy-resolve Node.js `fs` module.
    * Tries require('fs') first (available in CJS/UMD Node.js builds),
@@ -9390,7 +9652,7 @@
    */
   bw._el = function (id) {
     // Pass-through for DOM elements
-    if (typeof id !== 'string') return id || null;
+    if (!_is(id, 'string')) return id || null;
     if (!id) return null;
     if (!bw._isBrowser) return null;
 
@@ -9418,7 +9680,12 @@
       el = document.querySelector('[data-bw_id="' + id + '"]');
     }
 
-    // 5. Cache the result for next time
+    // 5. Try class-based lookup for bw_uuid_* tokens (UUID addressing)
+    if (!el && id.indexOf('bw_uuid_') === 0) {
+      el = document.querySelector('.' + id);
+    }
+
+    // 6. Cache the result for next time
     if (el) {
       bw._nodeMap[id] = el;
     }
@@ -9470,6 +9737,79 @@
     }
   };
 
+  // ===================================================================================
+  // bw.assignUUID() / bw.getUUID() — Explicit UUID addressing for TACO objects
+  // ===================================================================================
+
+  /**
+   * Regex to match a bw_uuid_* token in a class string.
+   * @private
+   */
+  var _UUID_RE = /\bbw_uuid_[a-z0-9_]+\b/;
+
+  /**
+   * Assign a UUID to a TACO object by appending a `bw_uuid_*` token to `taco.a.class`.
+   *
+   * Idempotent by default — calling twice returns the same UUID. Pass `forceNew=true`
+   * to replace an existing UUID (useful in loops where each TACO needs a unique ID).
+   *
+   * @param {Object} taco - A TACO object `{t, a, c, o}`
+   * @param {boolean} [forceNew=false] - If true, replaces any existing UUID with a new one
+   * @returns {string} The UUID string (e.g. 'bw_uuid_a1b2c3d4e5')
+   * @category Identifiers
+   * @example
+   * var card = bw.makeStatCard({ value: '0', label: 'Scans' });
+   * var uuid = bw.assignUUID(card);        // 'bw_uuid_a1b2c3d4e5'
+   * var same = bw.assignUUID(card);        // same UUID (idempotent)
+   * var diff = bw.assignUUID(card, true);  // new UUID (forced)
+   */
+  bw.assignUUID = function (taco, forceNew) {
+    if (!taco || !_is(taco, 'object')) return null;
+
+    // Ensure taco.a exists
+    if (!taco.a) taco.a = {};
+    if (!_is(taco.a["class"], 'string')) taco.a["class"] = taco.a["class"] ? String(taco.a["class"]) : '';
+    var existing = taco.a["class"].match(_UUID_RE);
+    if (existing && !forceNew) {
+      return existing[0];
+    }
+
+    // Remove old UUID if forceNew
+    if (existing) {
+      taco.a["class"] = taco.a["class"].replace(_UUID_RE, '').replace(/\s+/g, ' ').trim();
+    }
+    var uuid = bw.uuid('uuid');
+    taco.a["class"] = (taco.a["class"] ? taco.a["class"] + ' ' : '') + uuid;
+    return uuid;
+  };
+
+  /**
+   * Read the UUID from a TACO object or DOM element. Pure getter, no side effects.
+   *
+   * @param {Object|Element} tacoOrElement - A TACO object or DOM element
+   * @returns {string|null} The UUID string, or null if none assigned
+   * @category Identifiers
+   * @example
+   * bw.getUUID(card)       // 'bw_uuid_a1b2c3d4e5' (from TACO)
+   * bw.getUUID(domEl)      // 'bw_uuid_a1b2c3d4e5' (from DOM element)
+   * bw.getUUID({t:'div'})  // null (no UUID)
+   */
+  bw.getUUID = function (tacoOrElement) {
+    if (!tacoOrElement) return null;
+    var classStr;
+    // DOM element: check className
+    if (tacoOrElement.className !== undefined && tacoOrElement.tagName) {
+      classStr = tacoOrElement.className;
+    }
+    // TACO object: check a.class
+    else if (tacoOrElement.a && _is(tacoOrElement.a["class"], 'string')) {
+      classStr = tacoOrElement.a["class"];
+    }
+    if (!classStr) return null;
+    var match = classStr.match(_UUID_RE);
+    return match ? match[0] : null;
+  };
+
   /**
    * Escape HTML special characters to prevent XSS.
    *
@@ -9485,7 +9825,7 @@
    * // => '&lt;b&gt;Hello&lt;&#x2F;b&gt; &amp; &quot;world&quot;'
    */
   bw.escapeHTML = function (str) {
-    if (typeof str !== 'string') return '';
+    if (!_is(str, 'string')) return '';
     var escapeMap = {
       '&': '&amp;',
       '<': '&lt;',
@@ -9522,6 +9862,45 @@
     };
   };
 
+  /**
+   * Hyperscript-style TACO constructor.
+   *
+   * A convenience helper that returns a canonical TACO object from positional
+   * arguments. The return value is a plain object — serializable, works with
+   * bwserve, and accepted everywhere TACO is accepted.
+   *
+   * @param {string} tag - HTML tag name (e.g. 'div', 'p', 'section')
+   * @param {Object|null} [attrs] - HTML attributes object. Pass null or omit to skip.
+   * @param {*} [content] - Content: string, number, TACO object, or array of children.
+   * @param {Object} [options] - TACO options (state, lifecycle hooks, render fn).
+   * @returns {Object} Plain TACO object {t, a?, c?, o?}
+   * @category Utilities
+   * @see bw.html
+   * @see bw.createDOM
+   * @see bw.DOM
+   * @example
+   * bw.h('div')
+   * // => { t: 'div' }
+   *
+   * bw.h('p', { class: 'bw_text_muted' }, 'Hello')
+   * // => { t: 'p', a: { class: 'bw_text_muted' }, c: 'Hello' }
+   *
+   * bw.h('ul', null, [
+   *   bw.h('li', null, 'one'),
+   *   bw.h('li', null, 'two')
+   * ])
+   * // => { t: 'ul', c: [{ t: 'li', c: 'one' }, { t: 'li', c: 'two' }] }
+   */
+  bw.h = function (tag, attrs, content, options) {
+    var taco = {
+      t: String(tag)
+    };
+    if (attrs !== null && attrs !== undefined) taco.a = attrs;
+    if (content !== undefined) taco.c = content;
+    if (options !== undefined) taco.o = options;
+    return taco;
+  };
+
   /**
    * Convert a TACO object (or array of TACOs) to an HTML string.
    *
@@ -9562,7 +9941,7 @@
     }
 
     // Handle arrays of TACOs
-    if (Array.isArray(taco)) {
+    if (_isA(taco)) {
       return taco.map(function (t) {
         return bw.html(t, options);
       }).join('');
@@ -9585,17 +9964,17 @@
     if (taco && taco._bwEach && options.state) {
       var eachExpr = taco.expr.replace(/^\$\{|\}$/g, '');
       var arr = bw._evaluatePath(options.state, eachExpr);
-      if (!Array.isArray(arr)) return '';
+      if (!_isA(arr)) return '';
       return arr.map(function (item, idx) {
         return bw.html(taco.factory(item, idx), options);
       }).join('');
     }
 
     // Handle primitives and non-TACO objects
-    if (_typeof(taco) !== 'object' || !taco.t) {
+    if (!_is(taco, 'object') || !taco.t) {
       var str = options.raw ? String(taco) : bw.escapeHTML(String(taco));
       // Resolve template bindings if state provided
-      if (options.state && typeof str === 'string' && str.indexOf('${') >= 0) {
+      if (options.state && _is(str, 'string') && str.indexOf('${') >= 0) {
         str = bw._resolveTemplate(str, options.state, !!options.compile);
       }
       return str;
@@ -9620,9 +9999,17 @@
       // Skip null, undefined, false
       if (value == null || value === false) continue;
 
-      // Skip event handlers (they're for DOM only)
-      if (key.startsWith('on')) continue;
-      if (key === 'style' && _typeof(value) === 'object') {
+      // Serialize event handlers via funcRegister
+      if (key.startsWith('on')) {
+        if (_is(value, 'function')) {
+          var fnId = bw.funcRegister(value);
+          attrStr += ' ' + key + '="' + bw.funcGetDispatchStr(fnId, 'event') + '"';
+        } else if (_is(value, 'string')) {
+          attrStr += ' ' + key + '="' + bw.escapeHTML(value) + '"';
+        }
+        continue;
+      }
+      if (key === 'style' && _is(value, 'object')) {
         // Convert style object to string
         var styleStr = Object.entries(value).filter(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
@@ -9639,7 +10026,7 @@
         }
       } else if (key === 'class') {
         // Handle class as array or string
-        var classStr = Array.isArray(value) ? value.filter(Boolean).join(' ') : String(value);
+        var classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
         if (classStr) {
           attrStr += " class=\"".concat(bw.escapeHTML(classStr), "\"");
         }
@@ -9675,45 +10062,215 @@
     // Process content recursively
     var contentStr = content != null ? bw.html(content, options) : '';
     // Resolve template bindings in content if state provided
-    if (options.state && typeof contentStr === 'string' && contentStr.indexOf('${') >= 0) {
+    if (options.state && _is(contentStr, 'string') && contentStr.indexOf('${') >= 0) {
       contentStr = bw._resolveTemplate(contentStr, options.state, !!options.compile);
     }
     return "<".concat(tag).concat(attrStr, ">").concat(contentStr, "</").concat(tag, ">");
   };
 
   /**
-   * Create a live 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.
-   *
-   * @param {Object} taco - TACO object with {t, a, c, o}
-   * @param {Object} [options] - Creation options
-   * @returns {Element|Text} DOM element or text node
+   * Generate a complete, self-contained HTML document from TACO content.
+   *
+   * Produces a full `<!DOCTYPE html>` page with configurable runtime injection,
+   * func registry emission (so serialized event handlers work), optional theme,
+   * and extra head elements. Designed for static site generation, offline/airgapped
+   * use, and the "static site that isn't static" workflow.
+   *
+   * @param {Object} [opts={}] - Page options
+   * @param {Object|string|Array} [opts.body=''] - Body content: TACO, string, or array
+   * @param {string} [opts.title='bitwrench'] - Page title
+   * @param {Object} [opts.state] - State for ${expr} resolution in bw.html()
+   * @param {string} [opts.runtime='shim'] - Runtime level: 'inline'|'cdn'|'shim'|'none'
+   * @param {string} [opts.css=''] - Additional CSS for <style> block
+   * @param {string|Object} [opts.theme=null] - Theme preset name or config object
+   * @param {Array} [opts.head=[]] - Extra TACO elements rendered into <head>
+   * @param {string} [opts.favicon=''] - Favicon URL
+   * @param {string} [opts.lang='en'] - HTML lang attribute
+   * @returns {string} Complete HTML document string
    * @category DOM Generation
    * @see bw.html
-   * @see bw.DOM
    * @example
-   * var el = bw.createDOM({
-   *   t: 'button',
-   *   a: { class: 'bw_btn', onclick: () => alert('clicked') },
-   *   c: 'Click Me'
-   * });
-   * document.body.appendChild(el);
+   * bw.htmlPage({
+   *   title: 'My App',
+   *   body: { t: 'h1', c: 'Hello World' },
+   *   runtime: 'shim'
+   * })
    */
-  bw.createDOM = function (taco) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    if (!bw._isBrowser) {
-      throw new Error('bw.createDOM requires a DOM environment (document/window). Use bw.html() instead.');
+  bw.htmlPage = function (opts) {
+    opts = opts || {};
+    var title = opts.title || 'bitwrench';
+    var body = opts.body || '';
+    var state = opts.state || undefined;
+    var runtime = opts.runtime || 'shim';
+    var css = opts.css || '';
+    var theme = opts.theme || null;
+    var headExtra = opts.head || [];
+    var favicon = opts.favicon || '';
+    var lang = opts.lang || 'en';
+
+    // Snapshot funcRegistry counter before rendering
+    var fnCounterBefore = bw._fnIDCounter;
+
+    // Render body content
+    var bodyHTML = '';
+    if (_is(body, 'string')) {
+      bodyHTML = body;
+    } else {
+      var htmlOpts = {};
+      if (state) htmlOpts.state = state;
+      bodyHTML = bw.html(body, htmlOpts);
     }
 
-    // Handle null/undefined
-    if (taco == null) return document.createTextNode('');
+    // Collect functions registered during this render
+    var fnCounterAfter = bw._fnIDCounter;
+    var registryEntries = '';
+    for (var i = fnCounterBefore; i < fnCounterAfter; i++) {
+      var fnKey = 'bw_fn_' + i;
+      if (bw._fnRegistry[fnKey]) {
+        registryEntries += 'bw._fnRegistry[\'' + fnKey + '\']=' + bw._fnRegistry[fnKey].toString() + ';\n';
+      }
+    }
 
-    // Handle bw.raw() marked content — inject as HTML
-    if (taco && taco.__bw_raw) {
-      var frag = document.createDocumentFragment();
+    // Build runtime script for <head>
+    var runtimeHead = '';
+    if (runtime === 'inline') {
+      // Read UMD bundle synchronously if in Node.js
+      var umdSource = null;
+      if (bw._isNode) {
+        try {
+          var fs = typeof require === 'function' ? require('fs') : null;
+          var pathMod = typeof require === 'function' ? require('path') : null;
+          if (fs && pathMod) {
+            // Resolve dist/ relative to this source file
+            var srcDir = '';
+            try {
+              srcDir = pathMod.dirname(typeof __filename !== 'undefined' ? __filename : '');
+            } catch (e2) {/* ESM: __filename not available */}
+            if (!srcDir && typeof ({ url: (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('bitwrench.es5.js', document.baseURI).href)) }) !== 'undefined' && (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('bitwrench.es5.js', document.baseURI).href))) {
+              var url = typeof require === 'function' ? require('url') : null;
+              if (url && url.fileURLToPath) srcDir = pathMod.dirname(url.fileURLToPath((typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('bitwrench.es5.js', document.baseURI).href))));
+            }
+            if (srcDir) {
+              var distPath = pathMod.resolve(srcDir, '../dist/bitwrench.umd.min.js');
+              umdSource = fs.readFileSync(distPath, 'utf8');
+            }
+          }
+        } catch (e) {/* fall through */}
+      }
+      if (umdSource) {
+        runtimeHead = '<script>' + umdSource + '</script>';
+      } else {
+        // Fallback to shim in browser or if dist not available
+        runtimeHead = '<script>' + bw._FUNC_REGISTRY_SHIM + '</script>';
+      }
+    } else if (runtime === 'cdn') {
+      runtimeHead = '<script src="https://cdn.jsdelivr.net/npm/bitwrench@2/dist/bitwrench.umd.min.js"></script>';
+    } else if (runtime === 'shim') {
+      runtimeHead = '<script>' + bw._FUNC_REGISTRY_SHIM + '</script>';
+    }
+    // runtime === 'none' → empty
+
+    // Theme CSS
+    var themeCSS = '';
+    if (theme) {
+      var themeConfig = _is(theme, 'string') ? THEME_PRESETS[theme.toLowerCase()] || null : theme;
+      if (themeConfig) {
+        var themeResult = bw.makeStyles(themeConfig);
+        themeCSS = themeResult.css;
+      }
+    }
+
+    // Extra <head> elements
+    var headHTML = '';
+    if (_isA(headExtra) && headExtra.length > 0) {
+      headHTML = headExtra.map(function (el) {
+        return bw.html(el);
+      }).join('\n');
+    }
+
+    // Favicon
+    var faviconTag = '';
+    if (favicon) {
+      var safeFavicon = favicon.replace(/[&<>"']/g, function (c) {
+        return {
+          '&': '&amp;',
+          '<': '&lt;',
+          '>': '&gt;',
+          '"': '&quot;',
+          "'": '&#39;'
+        }[c];
+      });
+      faviconTag = '<link rel="icon" href="' + safeFavicon + '">';
+    }
+
+    // Escaped title
+    var safeTitle = bw.escapeHTML(title);
+
+    // Combine all CSS
+    var allCSS = (themeCSS ? themeCSS + '\n' : '') + css;
+
+    // Body-end script: registry entries + optional loadStyles
+    var bodyEndScript = '';
+    var bodyEndParts = [];
+    if (registryEntries) {
+      bodyEndParts.push(registryEntries);
+    }
+    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>';
+    }
+
+    // Assemble document
+    var parts = ['<!DOCTYPE html>', '<html lang="' + lang + '">', '<head>', '<meta charset="UTF-8">', '<meta name="viewport" content="width=device-width, initial-scale=1">'];
+    parts.push('<title>' + safeTitle + '</title>');
+    if (faviconTag) parts.push(faviconTag);
+    if (runtimeHead) parts.push(runtimeHead);
+    if (headHTML) parts.push(headHTML);
+    if (allCSS) parts.push('<style>' + allCSS + '</style>');
+    parts.push('</head>');
+    parts.push('<body>');
+    parts.push(bodyHTML);
+    if (bodyEndScript) parts.push(bodyEndScript);
+    parts.push('</body>');
+    parts.push('</html>');
+    return parts.join('\n');
+  };
+
+  /**
+   * Create a live DOM element from a TACO object (browser only).
+   *
+   * 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.
+   *
+   * @param {Object} taco - TACO object with {t, a, c, o}
+   * @param {Object} [options] - Creation options
+   * @returns {Element|Text} DOM element or text node
+   * @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);
+   */
+  bw.createDOM = function (taco) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!bw._isBrowser) {
+      throw new Error('bw.createDOM requires a DOM environment (document/window). Use bw.html() instead.');
+    }
+
+    // Handle null/undefined
+    if (taco == null) return document.createTextNode('');
+
+    // Handle bw.raw() marked content — inject as HTML
+    if (taco && taco.__bw_raw) {
+      var frag = document.createDocumentFragment();
       var tmp = document.createElement('span');
       tmp.innerHTML = taco.v;
       while (tmp.firstChild) frag.appendChild(tmp.firstChild);
@@ -9726,7 +10283,7 @@
     }
 
     // Handle text nodes
-    if (_typeof(taco) !== 'object' || !taco.t) {
+    if (!_is(taco, 'object') || !taco.t) {
       return document.createTextNode(String(taco));
     }
     var tag = taco.t,
@@ -9745,16 +10302,16 @@
         key = _Object$entries2$_i[0],
         value = _Object$entries2$_i[1];
       if (value == null || value === false) continue;
-      if (key === 'style' && _typeof(value) === 'object') {
+      if (key === 'style' && _is(value, 'object')) {
         // Apply styles directly
         Object.assign(el.style, value);
       } else if (key === 'class') {
         // Handle class as array or string
-        var classStr = Array.isArray(value) ? value.filter(Boolean).join(' ') : String(value);
+        var classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
         if (classStr) {
           el.className = classStr;
         }
-      } else if (key.startsWith('on') && typeof value === 'function') {
+      } else if (key.startsWith('on') && _is(value, 'function')) {
         // Event handlers
         var eventName = key.slice(2).toLowerCase();
         el.addEventListener(eventName, value);
@@ -9774,7 +10331,7 @@
     // Children with data-bw_id or id attributes get local refs on the parent,
     // so o.render functions can access them without any DOM lookup.
     if (content != null) {
-      if (Array.isArray(content)) {
+      if (_isA(content)) {
         content.forEach(function (child) {
           if (child != null) {
             // Handle ComponentHandle in content arrays (Level 2 children)
@@ -9794,20 +10351,20 @@
             if (childEl._bw_refs) {
               if (!el._bw_refs) el._bw_refs = {};
               for (var rk in childEl._bw_refs) {
-                if (Object.prototype.hasOwnProperty.call(childEl._bw_refs, rk)) {
+                if (_hop.call(childEl._bw_refs, rk)) {
                   el._bw_refs[rk] = childEl._bw_refs[rk];
                 }
               }
             }
           }
         });
-      } else if (_typeof(content) === 'object' && content.__bw_raw) {
+      } else if (_is(content, 'object') && content.__bw_raw) {
         // Raw HTML content — inject via innerHTML
         el.innerHTML = content.v;
       } else if (content._bwComponent === true) {
         // Single ComponentHandle as content
         content.mount(el);
-      } else if (_typeof(content) === 'object' && content.t) {
+      } else if (_is(content, 'object') && content.t) {
         var childEl = bw.createDOM(content, options);
         el.appendChild(childEl);
         var childBwId = content.a ? content.a['data-bw_id'] || content.a.id : null;
@@ -9818,7 +10375,7 @@
         if (childEl._bw_refs) {
           if (!el._bw_refs) el._bw_refs = {};
           for (var rk in childEl._bw_refs) {
-            if (Object.prototype.hasOwnProperty.call(childEl._bw_refs, rk)) {
+            if (_hop.call(childEl._bw_refs, rk)) {
               el._bw_refs[rk] = childEl._bw_refs[rk];
             }
           }
@@ -9833,6 +10390,14 @@
       bw._registerNode(el, null);
     }
 
+    // Register UUID class in node cache (bw_uuid_* tokens in class string)
+    if (el.className) {
+      var uuidMatch = el.className.match(_UUID_RE);
+      if (uuidMatch) {
+        bw._nodeMap[uuidMatch[0]] = el;
+      }
+    }
+
     // Handle lifecycle hooks and state
     if (opts.mounted || opts.unmount || opts.render || opts.state) {
       var id = attrs['data-bw_id'] || bw.uuid();
@@ -9850,7 +10415,7 @@
       if (opts.render) {
         el._bw_render = opts.render;
         if (opts.mounted) {
-          console.warn('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
+          _cw('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
         }
 
         // Queue initial render (same timing as mounted)
@@ -9922,7 +10487,7 @@
     // Get target element (use cache-backed lookup)
     var targetEl = bw._el(target);
     if (!targetEl) {
-      console.error('bw.DOM: Target element not found:', target);
+      _ce('bw.DOM: Target element not found:', target);
       return null;
     }
 
@@ -9960,7 +10525,7 @@
         targetEl.appendChild(taco.element);
       }
       // Handle arrays
-      else if (Array.isArray(taco)) {
+      else if (_isA(taco)) {
         taco.forEach(function (t) {
           if (t != null) {
             if (t._bwComponent === true) {
@@ -9995,7 +10560,7 @@
   bw.compileProps = function (handle) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var compiledProps = {};
-    Object.keys(props).forEach(function (key) {
+    _keys(props).forEach(function (key) {
       // Create getter/setter for each prop
       Object.defineProperty(compiledProps, key, {
         get: function get() {
@@ -10192,6 +10757,16 @@
   bw.cleanup = function (element) {
     if (!bw._isBrowser || !element) return;
 
+    // Deregister UUID classes from node cache (element + descendants)
+    // Covers elements that have UUID but no data-bw_id
+    var selfUuidMatch = element.className && element.className.match(_UUID_RE);
+    if (selfUuidMatch) delete bw._nodeMap[selfUuidMatch[0]];
+    var uuidEls = element.querySelectorAll('[class*="bw_uuid_"]');
+    uuidEls.forEach(function (uel) {
+      var m = uel.className && uel.className.match(_UUID_RE);
+      if (m) delete bw._nodeMap[m[0]];
+    });
+
     // Find all elements with data-bw_id
     var elements = element.querySelectorAll('[data-bw_id]');
     elements.forEach(function (el) {
@@ -10205,6 +10780,10 @@
       // Deregister from node cache
       bw._deregisterNode(el, id);
 
+      // Deregister UUID class from node cache
+      var uuidMatch = el.className && el.className.match(_UUID_RE);
+      if (uuidMatch) delete bw._nodeMap[uuidMatch[0]];
+
       // Clean up pub/sub subscriptions tied to this element
       if (el._bw_subs) {
         el._bw_subs.forEach(function (unsub) {
@@ -10231,6 +10810,10 @@
       // Deregister from node cache
       bw._deregisterNode(element, id);
 
+      // Deregister UUID class from node cache
+      var elemUuidMatch = element.className && element.className.match(_UUID_RE);
+      if (elemUuidMatch) delete bw._nodeMap[elemUuidMatch[0]];
+
       // Clean up pub/sub subscriptions tied to element itself
       if (element._bw_subs) {
         element._bw_subs.forEach(function (unsub) {
@@ -10306,17 +10889,17 @@
     if (attr) {
       // Patch an attribute
       el.setAttribute(attr, String(content));
-    } else if (Array.isArray(content)) {
+    } else if (_isA(content)) {
       // Patch with array of children (strings and/or TACOs)
       el.innerHTML = '';
       content.forEach(function (item) {
-        if (typeof item === 'string' || typeof item === 'number') {
+        if (_is(item, 'string') || _is(item, 'number')) {
           el.appendChild(document.createTextNode(String(item)));
         } else if (item && item.t) {
           el.appendChild(bw.createDOM(item));
         }
       });
-    } else if (_typeof(content) === 'object' && content !== null && content.t) {
+    } else if (_is(content, 'object') && content.t) {
       // Patch with a TACO — replace children
       el.innerHTML = '';
       el.appendChild(bw.createDOM(content));
@@ -10347,7 +10930,7 @@
   bw.patchAll = function (patches) {
     var results = {};
     for (var id in patches) {
-      if (Object.prototype.hasOwnProperty.call(patches, id)) {
+      if (_hop.call(patches, id)) {
         results[id] = bw.patch(id, patches[id]);
       }
     }
@@ -10444,7 +11027,7 @@
         snapshot[i].handler(detail);
         called++;
       } catch (err) {
-        console.warn('bw.pub: subscriber error on topic "' + topic + '":', err);
+        _cw('bw.pub: subscriber error on topic "' + topic + '":', err);
       }
     }
     return called;
@@ -10545,8 +11128,8 @@
    * @see bw.funcGetDispatchStr
    */
   bw.funcRegister = function (fn, name) {
-    if (typeof fn !== 'function') return '';
-    var fnID = typeof name === 'string' && name.length > 0 ? name : 'bw_fn_' + bw._fnIDCounter++;
+    if (!_is(fn, 'function')) return '';
+    var fnID = _is(name, 'string') && name.length > 0 ? name : 'bw_fn_' + bw._fnIDCounter++;
     bw._fnRegistry[fnID] = fn;
     return fnID;
   };
@@ -10565,8 +11148,8 @@
   bw.funcGetById = function (name, errFn) {
     name = String(name);
     if (name in bw._fnRegistry) return bw._fnRegistry[name];
-    return typeof errFn === 'function' ? errFn : function () {
-      console.warn('bw.funcGetById: unregistered fn "' + name + '"');
+    return _is(errFn, 'function') ? errFn : function () {
+      _cw('bw.funcGetById: unregistered fn "' + name + '"');
     };
   };
 
@@ -10608,13 +11191,23 @@
   bw.funcGetRegistry = function () {
     var copy = {};
     for (var k in bw._fnRegistry) {
-      if (Object.prototype.hasOwnProperty.call(bw._fnRegistry, k)) {
+      if (_hop.call(bw._fnRegistry, k)) {
         copy[k] = bw._fnRegistry[k];
       }
     }
     return copy;
   };
 
+  /**
+   * Minimal runtime shim for funcRegister dispatch in static HTML.
+   * When embedded in a `<script>` tag, provides just enough infrastructure
+   * for `bw.funcGetById()` calls to resolve. The actual function bodies
+   * are emitted separately as `bw._fnRegistry['bw_fn_X'] = ...;` assignments.
+   * @type {string}
+   * @category Function Registry
+   */
+  bw._FUNC_REGISTRY_SHIM = '(function(){var bw=window.bw||(window.bw={});' + 'if(!bw._fnRegistry)bw._fnRegistry={};' + 'bw.funcGetById=function(n){return bw._fnRegistry[n]||function(){' + 'console.warn("bw: unregistered fn "+n)};};' + 'bw.funcRegister=function(fn,name){' + 'var id=name||("bw_fn_"+(bw._fnIDCounter=(bw._fnIDCounter||0)+1));' + 'bw._fnRegistry[id]=fn;return id;};' + 'window.bw=bw;})();';
+
   // ===================================================================================
   // Template Binding Utilities
   // ===================================================================================
@@ -10646,7 +11239,10 @@
     var parts = path.split('.');
     var val = state;
     for (var i = 0; i < parts.length; i++) {
-      if (val == null) return '';
+      if (val == null) {
+        if (bw.debug) _cw('bw.debug: _evaluatePath — null at key "' + parts[i] + '" in path "' + path + '"');
+        return '';
+      }
       val = val[parts[i]];
     }
     return val == null ? '' : val;
@@ -10666,7 +11262,7 @@
    */
   bw._compiledExprs = {};
   bw._resolveTemplate = function (str, state, compile) {
-    if (typeof str !== 'string' || str.indexOf('${') < 0) return str;
+    if (!_is(str, 'string') || str.indexOf('${') < 0) return str;
     var bindings = bw._parseBindings(str);
     if (bindings.length === 0) return str;
     var result = '';
@@ -10689,6 +11285,7 @@
         try {
           val = bw._compiledExprs[b.expr](state);
         } catch (e) {
+          if (bw.debug) _cw('bw.debug: _resolveTemplate — Tier 2 eval failed for "${' + b.expr + '}":', e.message);
           val = '';
         }
       } else {
@@ -10796,7 +11393,7 @@
     this._state = {};
     if (o.state) {
       for (var k in o.state) {
-        if (Object.prototype.hasOwnProperty.call(o.state, k)) {
+        if (_hop.call(o.state, k)) {
           this._state[k] = o.state[k];
         }
       }
@@ -10805,7 +11402,7 @@
     this._actions = {};
     if (o.actions) {
       for (var k2 in o.actions) {
-        if (Object.prototype.hasOwnProperty.call(o.actions, k2)) {
+        if (_hop.call(o.actions, k2)) {
           this._actions[k2] = o.actions[k2];
         }
       }
@@ -10815,7 +11412,7 @@
     if (o.methods) {
       var self = this;
       for (var k3 in o.methods) {
-        if (Object.prototype.hasOwnProperty.call(o.methods, k3)) {
+        if (_hop.call(o.methods, k3)) {
           this._methods[k3] = o.methods[k3];
           (function (methodName, methodFn) {
             self[methodName] = function () {
@@ -10833,7 +11430,7 @@
       willMount: o.willMount || null,
       mounted: o.mounted || null,
       willUpdate: o.willUpdate || null,
-      onUpdate: o.onUpdate || null,
+      onUpdate: o.onUpdate || o.updated || null,
       unmount: o.unmount || null,
       willDestroy: o.willDestroy || null
     };
@@ -10848,14 +11445,23 @@
     this._compile = !!o.compile;
     this._bw_refs = {};
     this._refCounter = 0;
+    // Child component ownership (Bug #5)
+    this._children = [];
+    this._parent = null;
+    // Factory metadata for BCCL rebuild (Bug #6)
+    this._factory = taco._bwFactory || null;
   }
 
+  // Short alias for ComponentHandle.prototype (see alias block at top of file).
+  // 28 method definitions × 25 chars = ~700B raw savings in minified output.
+  var _chp = ComponentHandle.prototype;
+
   // ── State Methods ──
 
   /**
    * Get a state value. Dot-path supported: `get('user.name')`
    */
-  ComponentHandle.prototype.get = function (key) {
+  _chp.get = function (key) {
     return bw._evaluatePath(this._state, key);
   };
 
@@ -10865,12 +11471,13 @@
    * @param {*} value - New value
    * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
    */
-  ComponentHandle.prototype.set = function (key, value, opts) {
+  _chp.set = function (key, value, opts) {
     // Dot-path set
     var parts = key.split('.');
     var obj = this._state;
     for (var i = 0; i < parts.length - 1; i++) {
-      if (obj[parts[i]] == null || _typeof(obj[parts[i]]) !== 'object') {
+      if (!_is(obj[parts[i]], 'object')) {
+        if (bw.debug) _cw('bw.debug: set() — auto-creating intermediate "' + parts[i] + '" in path "' + key + '"');
         obj[parts[i]] = {};
       }
       obj = obj[parts[i]];
@@ -10890,10 +11497,10 @@
   /**
    * Get a shallow clone of the full state.
    */
-  ComponentHandle.prototype.getState = function () {
+  _chp.getState = function () {
     var clone = {};
     for (var k in this._state) {
-      if (Object.prototype.hasOwnProperty.call(this._state, k)) {
+      if (_hop.call(this._state, k)) {
         clone[k] = this._state[k];
       }
     }
@@ -10905,9 +11512,9 @@
    * @param {Object} updates - Key-value pairs to merge
    * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
    */
-  ComponentHandle.prototype.setState = function (updates, opts) {
+  _chp.setState = function (updates, opts) {
     for (var k in updates) {
-      if (Object.prototype.hasOwnProperty.call(updates, k)) {
+      if (_hop.call(updates, k)) {
         this._state[k] = updates[k];
         this._dirtyKeys[k] = true;
       }
@@ -10924,9 +11531,9 @@
   /**
    * Push a value onto an array in state. Clones the array.
    */
-  ComponentHandle.prototype.push = function (key, val) {
+  _chp.push = function (key, val) {
     var arr = this.get(key);
-    var newArr = Array.isArray(arr) ? arr.slice() : [];
+    var newArr = _isA(arr) ? arr.slice() : [];
     newArr.push(val);
     this.set(key, newArr);
   };
@@ -10934,9 +11541,9 @@
   /**
    * Splice an array in state. Clones the array.
    */
-  ComponentHandle.prototype.splice = function (key, start, deleteCount) {
+  _chp.splice = function (key, start, deleteCount) {
     var arr = this.get(key);
-    var newArr = Array.isArray(arr) ? arr.slice() : [];
+    var newArr = _isA(arr) ? arr.slice() : [];
     var args = [start, deleteCount].concat(Array.prototype.slice.call(arguments, 3));
     Array.prototype.splice.apply(newArr, args);
     this.set(key, newArr);
@@ -10944,7 +11551,7 @@
 
   // ── Scheduling ──
 
-  ComponentHandle.prototype._scheduleDirty = function () {
+  _chp._scheduleDirty = function () {
     if (!this._scheduled) {
       this._scheduled = true;
       bw._dirtyComponents.push(this);
@@ -10959,16 +11566,16 @@
    * Creates binding descriptors with refIds for targeted DOM updates.
    * @private
    */
-  ComponentHandle.prototype._compileBindings = function () {
+  _chp._compileBindings = function () {
     this._bindings = [];
     this._refCounter = 0;
-    var stateKeys = Object.keys(this._state);
+    var stateKeys = _keys(this._state);
     var self = this;
     function walkTaco(taco, path) {
-      if (taco == null || _typeof(taco) !== 'object' || !taco.t) return taco;
+      if (!_is(taco, 'object') || !taco.t) return taco;
 
       // Check content for bindings
-      if (typeof taco.c === 'string' && taco.c.indexOf('${') >= 0) {
+      if (_is(taco.c, 'string') && taco.c.indexOf('${') >= 0) {
         var refId = 'bw_ref_' + self._refCounter++;
         var parsed = bw._parseBindings(taco.c);
         var deps = [];
@@ -10990,10 +11597,10 @@
       // Check attributes for bindings
       if (taco.a) {
         for (var attrName in taco.a) {
-          if (!Object.prototype.hasOwnProperty.call(taco.a, attrName)) continue;
+          if (!_hop.call(taco.a, attrName)) continue;
           if (attrName === 'data-bw_ref') continue;
           var attrVal = taco.a[attrName];
-          if (typeof attrVal === 'string' && attrVal.indexOf('${') >= 0) {
+          if (_is(attrVal, 'string') && attrVal.indexOf('${') >= 0) {
             var refId2 = 'bw_ref_' + self._refCounter++;
             var parsed2 = bw._parseBindings(attrVal);
             var deps2 = [];
@@ -11019,9 +11626,34 @@
       }
 
       // Recurse into children
-      if (Array.isArray(taco.c)) {
+      if (_isA(taco.c)) {
         for (var i = 0; i < taco.c.length; i++) {
-          if (taco.c[i] && _typeof(taco.c[i]) === 'object' && taco.c[i].t) {
+          // Wrap string children with ${expr} in a span so patches target the span, not the parent
+          if (_is(taco.c[i], 'string') && taco.c[i].indexOf('${') >= 0) {
+            var mixedRefId = 'bw_ref_' + self._refCounter++;
+            var mixedParsed = bw._parseBindings(taco.c[i]);
+            var mixedDeps = [];
+            for (var mi = 0; mi < mixedParsed.length; mi++) {
+              mixedDeps = mixedDeps.concat(bw._extractDeps(mixedParsed[mi].expr, stateKeys));
+            }
+            self._bindings.push({
+              expr: taco.c[i],
+              type: 'content',
+              refId: mixedRefId,
+              deps: mixedDeps,
+              template: taco.c[i]
+            });
+            // Replace string with a span wrapper so textContent targets the span only
+            taco.c[i] = {
+              t: 'span',
+              a: {
+                'data-bw_ref': mixedRefId,
+                style: 'display:contents'
+              },
+              c: taco.c[i]
+            };
+          }
+          if (_is(taco.c[i], 'object') && taco.c[i].t) {
             walkTaco(taco.c[i], path.concat(i));
           }
           // Handle bw.when/bw.each markers
@@ -11056,7 +11688,7 @@
             taco.c[i]._refId = eachRefId;
           }
         }
-      } else if (taco.c && _typeof(taco.c) === 'object' && taco.c.t) {
+      } else if (_is(taco.c, 'object') && taco.c.t) {
         walkTaco(taco.c, path.concat(0));
       }
       return taco;
@@ -11070,7 +11702,7 @@
    * Build ref map from the live DOM after createDOM.
    * @private
    */
-  ComponentHandle.prototype._collectRefs = function () {
+  _chp._collectRefs = function () {
     this._bw_refs = {};
     if (!this.element) return;
     var els = this.element.querySelectorAll('[data-bw_ref]');
@@ -11091,7 +11723,7 @@
    * Creates DOM, compiles bindings, registers actions, and calls lifecycle hooks.
    * @param {Element} parentEl - DOM element to mount into
    */
-  ComponentHandle.prototype.mount = function (parentEl) {
+  _chp.mount = function (parentEl) {
     // willMount hook
     if (this._hooks.willMount) this._hooks.willMount(this);
 
@@ -11113,7 +11745,7 @@
     // Register named actions in function registry
     var self = this;
     for (var actionName in this._actions) {
-      if (Object.prototype.hasOwnProperty.call(this._actions, actionName)) {
+      if (_hop.call(this._actions, actionName)) {
         var registeredName = this._bwId + '_' + actionName;
         (function (aName) {
           bw.funcRegister(function (evt) {
@@ -11132,6 +11764,11 @@
     this.element = bw.createDOM(tacoForDOM);
     this.element._bwComponentHandle = this;
     this.element.setAttribute('data-bw_comp_id', this._bwId);
+
+    // Restore o.render from original TACO (stripped by _tacoForDOM)
+    if (this.taco.o && this.taco.o.render) {
+      this.element._bw_render = this.taco.o.render;
+    }
     if (this._userTag) {
       this.element.classList.add(this._userTag);
     }
@@ -11146,6 +11783,16 @@
     this._resolveAndApplyAll();
     this.mounted = true;
 
+    // Scan for child ComponentHandles and link parent/child (Bug #5)
+    var childEls = this.element.querySelectorAll('[data-bw_comp_id]');
+    for (var ci = 0; ci < childEls.length; ci++) {
+      var ch = childEls[ci]._bwComponentHandle;
+      if (ch && ch !== this && !ch._parent) {
+        ch._parent = this;
+        this._children.push(ch);
+      }
+    }
+
     // mounted hook (backward compat: fn.length === 2 wraps (el, state))
     if (this._hooks.mounted) {
       if (this._hooks.mounted.length === 2) {
@@ -11154,15 +11801,20 @@
         this._hooks.mounted(this);
       }
     }
+
+    // Invoke o.render on initial mount (if present)
+    if (this.element._bw_render) {
+      this.element._bw_render(this.element, this._state);
+    }
   };
 
   /**
    * Prepare TACO for initial render: resolve when/each markers.
    * @private
    */
-  ComponentHandle.prototype._prepareTaco = function (taco) {
-    if (!taco || _typeof(taco) !== 'object') return;
-    if (Array.isArray(taco.c)) {
+  _chp._prepareTaco = function (taco) {
+    if (!_is(taco, 'object')) return;
+    if (_isA(taco.c)) {
       for (var i = taco.c.length - 1; i >= 0; i--) {
         var child = taco.c[i];
         if (child && child._bwWhen) {
@@ -11203,7 +11855,7 @@
           var eachExprStr = child.expr.replace(/^\$\{|\}$/g, '');
           var arr = bw._evaluatePath(this._state, eachExprStr);
           var items = [];
-          if (Array.isArray(arr)) {
+          if (_isA(arr)) {
             for (var j = 0; j < arr.length; j++) {
               items.push(child.factory(arr[j], j));
             }
@@ -11217,11 +11869,11 @@
             c: items
           };
         }
-        if (taco.c[i] && _typeof(taco.c[i]) === 'object' && taco.c[i].t) {
+        if (_is(taco.c[i], 'object') && taco.c[i].t) {
           this._prepareTaco(taco.c[i]);
         }
       }
-    } else if (taco.c && _typeof(taco.c) === 'object' && taco.c.t) {
+    } else if (_is(taco.c, 'object') && taco.c.t) {
       this._prepareTaco(taco.c);
     }
   };
@@ -11230,12 +11882,12 @@
    * Wire action name strings (in onclick etc.) to dispatch function calls.
    * @private
    */
-  ComponentHandle.prototype._wireActions = function (taco) {
-    if (!taco || _typeof(taco) !== 'object' || !taco.t) return;
+  _chp._wireActions = function (taco) {
+    if (!_is(taco, 'object') || !taco.t) return;
     if (taco.a) {
       for (var key in taco.a) {
-        if (!Object.prototype.hasOwnProperty.call(taco.a, key)) continue;
-        if (key.startsWith('on') && typeof taco.a[key] === 'string') {
+        if (!_hop.call(taco.a, key)) continue;
+        if (key.startsWith('on') && _is(taco.a[key], 'string')) {
           var actionName = taco.a[key];
           if (actionName in this._actions) {
             var registeredName = this._bwId + '_' + actionName;
@@ -11249,11 +11901,11 @@
         }
       }
     }
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       for (var i = 0; i < taco.c.length; i++) {
         this._wireActions(taco.c[i]);
       }
-    } else if (taco.c && _typeof(taco.c) === 'object' && taco.c.t) {
+    } else if (_is(taco.c, 'object') && taco.c.t) {
       this._wireActions(taco.c);
     }
   };
@@ -11262,7 +11914,7 @@
    * Deep-clone a TACO tree, preserving _bwWhen/_bwEach markers and their factories.
    * @private
    */
-  ComponentHandle.prototype._deepCloneTaco = function (taco) {
+  _chp._deepCloneTaco = function (taco) {
     if (taco == null) return taco;
     // Preserve _bwWhen / _bwEach markers (contain functions)
     if (taco._bwWhen) {
@@ -11281,22 +11933,22 @@
         _refId: taco._refId
       };
     }
-    if (_typeof(taco) !== 'object' || !taco.t) return taco;
+    if (!_is(taco, 'object') || !taco.t) return taco;
     var result = {
       t: taco.t
     };
     if (taco.a) {
       result.a = {};
       for (var k in taco.a) {
-        if (Object.prototype.hasOwnProperty.call(taco.a, k)) result.a[k] = taco.a[k];
+        if (_hop.call(taco.a, k)) result.a[k] = taco.a[k];
       }
     }
     if (taco.c != null) {
-      if (Array.isArray(taco.c)) {
+      if (_isA(taco.c)) {
         result.c = taco.c.map(function (child) {
           return this._deepCloneTaco(child);
         }.bind(this));
-      } else if (_typeof(taco.c) === 'object') {
+      } else if (_is(taco.c, 'object')) {
         result.c = this._deepCloneTaco(taco.c);
       } else {
         result.c = taco.c;
@@ -11310,31 +11962,34 @@
    * Create a copy of TACO suitable for createDOM (strips o to prevent double lifecycle).
    * @private
    */
-  ComponentHandle.prototype._tacoForDOM = function (taco) {
-    if (!taco || _typeof(taco) !== 'object' || !taco.t) return taco;
+  _chp._tacoForDOM = function (taco) {
+    if (!_is(taco, 'object') || !taco.t) return taco;
     var result = {
       t: taco.t
     };
     if (taco.a) result.a = taco.a;
     if (taco.c != null) {
-      if (Array.isArray(taco.c)) {
+      if (_isA(taco.c)) {
         result.c = taco.c.map(function (child) {
           return this._tacoForDOM(child);
         }.bind(this));
-      } else if (_typeof(taco.c) === 'object' && taco.c.t) {
+      } else if (_is(taco.c, 'object') && taco.c.t) {
         result.c = this._tacoForDOM(taco.c);
       } else {
         result.c = taco.c;
       }
     }
     // Intentionally strip o (no mounted/unmount/state/render on sub-elements)
+    if (taco.o && (taco.o.mounted || taco.o.render || taco.o.unmount)) {
+      _cw('bw: _tacoForDOM stripped o.mounted/render/unmount from child <' + taco.t + '>. Use onclick attribute or bw.component() for child interactivity.');
+    }
     return result;
   };
 
   /**
    * Unmount: remove from DOM, deactivate, preserve state for re-mount.
    */
-  ComponentHandle.prototype.unmount = function () {
+  _chp.unmount = function () {
     if (!this.mounted) return;
 
     // unmount hook
@@ -11368,11 +12023,22 @@
   /**
    * Destroy: unmount + clear state + unregister actions.
    */
-  ComponentHandle.prototype.destroy = function () {
+  _chp.destroy = function () {
     // willDestroy hook
     if (this._hooks.willDestroy) {
       this._hooks.willDestroy(this);
     }
+
+    // Cascade destroy to children depth-first (Bug #5)
+    for (var ci = this._children.length - 1; ci >= 0; ci--) {
+      this._children[ci].destroy();
+    }
+    this._children = [];
+    if (this._parent) {
+      var idx = this._parent._children.indexOf(this);
+      if (idx >= 0) this._parent._children.splice(idx, 1);
+      this._parent = null;
+    }
     this.unmount();
 
     // Unregister actions from function registry
@@ -11399,12 +12065,37 @@
    * Flush dirty state: resolve changed bindings and apply to DOM.
    * @private
    */
-  ComponentHandle.prototype._flush = function () {
+  _chp._flush = function () {
     this._scheduled = false;
-    var changedKeys = Object.keys(this._dirtyKeys);
+    var changedKeys = _keys(this._dirtyKeys);
     this._dirtyKeys = {};
     if (changedKeys.length === 0 || !this.mounted) return;
 
+    // Factory rebuild: if a BCCL factory exists and changed keys overlap factory props,
+    // rebuild the TACO from the factory with merged state (Bug #6)
+    if (this._factory) {
+      var rebuildNeeded = false;
+      for (var fi = 0; fi < changedKeys.length; fi++) {
+        if (_hop.call(this._factory.props, changedKeys[fi])) {
+          rebuildNeeded = true;
+          break;
+        }
+      }
+      if (rebuildNeeded) {
+        var merged = {};
+        for (var mk in this._factory.props) if (_hop.call(this._factory.props, mk)) merged[mk] = this._factory.props[mk];
+        for (var sk in this._state) if (_hop.call(this._state, sk)) merged[sk] = this._state[sk];
+        this._factory.props = merged;
+        var newTaco = bw.make(this._factory.type, merged);
+        newTaco._bwFactory = this._factory;
+        this.taco = newTaco;
+        this._originalTaco = this._deepCloneTaco(newTaco);
+        this._render();
+        if (this._hooks.onUpdate) this._hooks.onUpdate(this, changedKeys);
+        return;
+      }
+    }
+
     // willUpdate hook
     if (this._hooks.willUpdate) {
       this._hooks.willUpdate(this, changedKeys);
@@ -11442,7 +12133,7 @@
    * Returns list of patches to apply.
    * @private
    */
-  ComponentHandle.prototype._resolveBindings = function (changedKeys) {
+  _chp._resolveBindings = function (changedKeys) {
     var patches = [];
     for (var i = 0; i < this._bindings.length; i++) {
       var b = this._bindings[i];
@@ -11478,11 +12169,14 @@
    * Apply patches to DOM.
    * @private
    */
-  ComponentHandle.prototype._applyPatches = function (patches) {
+  _chp._applyPatches = function (patches) {
     for (var i = 0; i < patches.length; i++) {
       var p = patches[i];
       var el = this._bw_refs[p.refId];
-      if (!el) continue;
+      if (!el) {
+        if (bw.debug) _cw('bw.debug: _applyPatches — ref "' + p.refId + '" not found in DOM');
+        continue;
+      }
       if (p.type === 'content') {
         el.textContent = p.value;
       } else if (p.type === 'attribute') {
@@ -11499,7 +12193,7 @@
    * Resolve all bindings and apply (used for initial render).
    * @private
    */
-  ComponentHandle.prototype._resolveAndApplyAll = function () {
+  _chp._resolveAndApplyAll = function () {
     var patches = [];
     for (var i = 0; i < this._bindings.length; i++) {
       var b = this._bindings[i];
@@ -11521,7 +12215,7 @@
    * Full re-render for structural changes (when/each branch switches).
    * @private
    */
-  ComponentHandle.prototype._render = function () {
+  _chp._render = function () {
     if (!this.element || !this.element.parentNode) return;
     var parent = this.element.parentNode;
     var nextSibling = this.element.nextSibling;
@@ -11560,7 +12254,7 @@
    * @param {string} event - Event name (e.g., 'click')
    * @param {Function} handler - Event handler
    */
-  ComponentHandle.prototype.on = function (event, handler) {
+  _chp.on = function (event, handler) {
     if (this.element) {
       this.element.addEventListener(event, handler);
     }
@@ -11575,7 +12269,7 @@
    * @param {string} event - Event name
    * @param {Function} handler - Handler to remove
    */
-  ComponentHandle.prototype.off = function (event, handler) {
+  _chp.off = function (event, handler) {
     if (this.element) {
       this.element.removeEventListener(event, handler);
     }
@@ -11590,7 +12284,7 @@
    * @param {Function} handler - Handler function
    * @returns {Function} Unsubscribe function
    */
-  ComponentHandle.prototype.sub = function (topic, handler) {
+  _chp.sub = function (topic, handler) {
     var unsub = bw.sub(topic, handler);
     this._subs.push(unsub);
     return unsub;
@@ -11601,10 +12295,10 @@
    * @param {string} name - Action name
    * @param {...*} args - Arguments passed after comp
    */
-  ComponentHandle.prototype.action = function (name) {
+  _chp.action = function (name) {
     var fn = this._actions[name];
     if (!fn) {
-      console.warn('ComponentHandle.action: unknown action "' + name + '"');
+      _cw('ComponentHandle.action: unknown action "' + name + '"');
       return;
     }
     var args = [this].concat(Array.prototype.slice.call(arguments, 1));
@@ -11616,7 +12310,7 @@
    * @param {string} sel - CSS selector
    * @returns {Element|null}
    */
-  ComponentHandle.prototype.select = function (sel) {
+  _chp.select = function (sel) {
     return this.element ? this.element.querySelector(sel) : null;
   };
 
@@ -11625,7 +12319,7 @@
    * @param {string} sel - CSS selector
    * @returns {Element[]}
    */
-  ComponentHandle.prototype.selectAll = function (sel) {
+  _chp.selectAll = function (sel) {
     if (!this.element) return [];
     return Array.prototype.slice.call(this.element.querySelectorAll(sel));
   };
@@ -11636,7 +12330,7 @@
    * @param {string} tag - User-defined identifier (e.g. 'dashboard_prod_east')
    * @returns {ComponentHandle} this (for chaining)
    */
-  ComponentHandle.prototype.userTag = function (tag) {
+  _chp.userTag = function (tag) {
     this._userTag = tag;
     if (this.element) {
       this.element.classList.add(tag);
@@ -11721,7 +12415,7 @@
    * and calls the named method. This is the bitwrench equivalent of
    * Win32 SendMessage(hwnd, msg, wParam, lParam).
    *
-   * @param {string} target - Component UUID (data-bw_comp_id) or user tag (CSS class)
+   * @param {string} target - Component UUID (bw_uuid_*), comp ID (data-bw_comp_id), or user tag (CSS class)
    * @param {string} action - Method name to call on the component
    * @param {*} data - Data to pass to the method
    * @returns {boolean} True if message was dispatched successfully
@@ -11738,15 +12432,20 @@
    * };
    */
   bw.message = function (target, action, data) {
-    // Try data-bw_comp_id attribute first, then CSS class (user tag)
-    var el = bw.$('[data-bw_comp_id="' + target + '"]')[0];
-    if (!el) {
+    // Try bw._el() first (handles UUID class, nodeMap cache, getElementById)
+    var el = bw._el(target);
+    // Then try data-bw_comp_id attribute
+    if (!el || !el._bwComponentHandle) {
+      el = bw.$('[data-bw_comp_id="' + target + '"]')[0];
+    }
+    // Then try CSS class (user tag)
+    if (!el || !el._bwComponentHandle) {
       el = bw.$('.' + target)[0];
     }
     if (!el || !el._bwComponentHandle) return false;
     var comp = el._bwComponentHandle;
-    if (typeof comp[action] !== 'function') {
-      console.warn('bw.message: unknown action "' + action + '" on component ' + target);
+    if (!_is(comp[action], 'function')) {
+      _cw('bw.message: unknown action "' + action + '" on component ' + target);
       return false;
     }
     comp[action](data);
@@ -11754,61 +12453,24 @@
   };
 
   // ===================================================================================
-  // bw.clientApply() / bw.clientConnect() — Server-driven UI protocol
+  // bw.apply() / bw.parseJSONFlex() — Server-driven UI protocol
   // ===================================================================================
 
   /**
    * Registry of named functions sent via register messages.
-   * Populated by clientApply({ type: 'register', name, body }).
-   * Invoked by clientApply({ type: 'call', name, args }).
+   * Populated by bw.apply({ type: 'register', name, body }).
+   * Invoked by bw.apply({ type: 'call', name, args }).
    * @private
    */
   bw._clientFunctions = {};
 
   /**
-   * Whether exec messages are allowed. Set by clientConnect opts.allowExec.
+   * 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;
 
-  /**
-   * Built-in client functions available via call() without registration.
-   * @private
-   */
-  bw._builtinClientFunctions = {
-    scrollTo: function scrollTo(selector) {
-      var el = bw._el(selector);
-      if (el) el.scrollTop = el.scrollHeight;
-    },
-    focus: function focus(selector) {
-      var el = bw._el(selector);
-      if (el && typeof el.focus === 'function') el.focus();
-    },
-    download: function download(filename, content, mimeType) {
-      if (typeof document === 'undefined') return;
-      var blob = new Blob([content], {
-        type: mimeType || 'text/plain'
-      });
-      var a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(a.href);
-    },
-    clipboard: function clipboard(text) {
-      if (typeof navigator !== 'undefined' && navigator.clipboard) {
-        navigator.clipboard.writeText(text);
-      }
-    },
-    redirect: function redirect(url) {
-      if (typeof window !== 'undefined') window.location.href = url;
-    },
-    log: function log() {
-      console.log.apply(console, arguments);
-    }
-  };
-
   /**
    * Parse a bwserve protocol message string, supporting both strict JSON
    * and r-prefixed relaxed JSON (single-quoted strings, trailing commas).
@@ -11823,9 +12485,9 @@
    * @param {string} str - JSON or r-prefixed relaxed JSON string
    * @returns {Object} Parsed message object
    * @throws {SyntaxError} If the string is not valid JSON or relaxed JSON
-   * @category Server
+   * @category Core
    */
-  bw.clientParse = function (str) {
+  bw.parseJSONFlex = function (str) {
     str = (str || '').trim();
     if (str.charAt(0) !== 'r') return JSON.parse(str);
     str = str.slice(1);
@@ -11903,10 +12565,10 @@
    *   append   — target.appendChild(bw.createDOM(node))
    *   remove   — bw.cleanup(target); target.remove()
    *   patch    — bw.patch(target, content, attr)
-   *   batch    — iterate ops, call clientApply for each
+   *   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 or built-in function
+   *   call     — invoke a registered function
    *   exec     — execute arbitrary JS (requires allowExec)
    *
    * Target resolution:
@@ -11915,9 +12577,9 @@
    *
    * @param {Object} msg - Protocol message
    * @returns {boolean} true if the message was applied successfully
-   * @category Server
+   * @category Core
    */
-  bw.clientApply = function (msg) {
+  bw.apply = function (msg) {
     if (!msg || !msg.type) return false;
     var type = msg.type;
     var target = msg.target;
@@ -11938,14 +12600,14 @@
     } else if (type === 'remove') {
       var toRemove = bw._el(target);
       if (!toRemove) return false;
-      if (typeof bw.cleanup === 'function') bw.cleanup(toRemove);
+      if (_is(bw.cleanup, 'function')) bw.cleanup(toRemove);
       toRemove.remove();
       return true;
     } else if (type === 'batch') {
-      if (!Array.isArray(msg.ops)) return false;
+      if (!_isA(msg.ops)) return false;
       var allOk = true;
       msg.ops.forEach(function (op) {
-        if (!bw.clientApply(op)) allOk = false;
+        if (!bw.apply(op)) allOk = false;
       });
       return allOk;
     } else if (type === 'message') {
@@ -11956,24 +12618,24 @@
         bw._clientFunctions[msg.name] = new Function('return ' + msg.body)();
         return true;
       } catch (e) {
-        console.error('[bw] register error:', msg.name, e);
+        _ce('[bw] register error:', msg.name, e);
         return false;
       }
     } else if (type === 'call') {
       if (!msg.name) return false;
-      var fn = bw._clientFunctions[msg.name] || bw._builtinClientFunctions[msg.name];
-      if (typeof fn !== 'function') return false;
+      var fn = bw._clientFunctions[msg.name];
+      if (!_is(fn, 'function')) return false;
       try {
-        var args = Array.isArray(msg.args) ? msg.args : [];
+        var args = _isA(msg.args) ? msg.args : [];
         fn.apply(null, args);
         return true;
       } catch (e) {
-        console.error('[bw] call error:', msg.name, e);
+        _ce('[bw] call error:', msg.name, e);
         return false;
       }
     } else if (type === 'exec') {
       if (!bw._allowExec) {
-        console.warn('[bw] exec rejected: allowExec is not enabled');
+        _cw('[bw] exec rejected: allowExec is not enabled');
         return false;
       }
       if (!msg.code) return false;
@@ -11981,148 +12643,13 @@
         new Function(msg.code)();
         return true;
       } catch (e) {
-        console.error('[bw] exec error:', e);
+        _ce('[bw] exec error:', e);
         return false;
       }
     }
     return false;
   };
 
-  /**
-   * Connect to a bwserve SSE endpoint and apply protocol messages automatically.
-   *
-   * Returns a connection object with sendAction(), on(), and close() methods.
-   *
-   * @param {string} url - SSE endpoint URL (e.g., '/__bw/events/client-1')
-   * @param {Object} [opts] - Connection options
-   * @param {string} [opts.transport='sse'] - Transport type: 'sse' (default) or 'poll'
-   * @param {number} [opts.interval=2000] - Poll interval in ms (only for 'poll' transport)
-   * @param {string} [opts.actionUrl] - POST endpoint for actions (default: derived from url)
-   * @param {boolean} [opts.reconnect=true] - Auto-reconnect on disconnect
-   * @param {boolean} [opts.allowExec=false] - Enable exec message type (arbitrary JS execution)
-   * @param {Function} [opts.onStatus] - Status callback: 'connecting'|'connected'|'disconnected'
-   * @param {Function} [opts.onMessage] - Raw message callback (before clientApply)
-   * @returns {Object} Connection object { sendAction, on, close, status }
-   * @category Server
-   */
-  bw.clientConnect = function (url, opts) {
-    opts = opts || {};
-    var transport = opts.transport || 'sse';
-    var actionUrl = opts.actionUrl || url.replace(/\/events\//, '/action/');
-    var reconnect = opts.reconnect !== false;
-    var onStatus = opts.onStatus || function () {};
-    var onMessage = opts.onMessage || null;
-    var handlers = {};
-    // Set the global allowExec flag from connection options
-    bw._allowExec = !!opts.allowExec;
-    var conn = {
-      status: 'connecting',
-      _es: null,
-      _pollTimer: null
-    };
-    function setStatus(s) {
-      conn.status = s;
-      onStatus(s);
-    }
-    function handleMessage(data) {
-      try {
-        var msg = typeof data === 'string' ? bw.clientParse(data) : data;
-        if (onMessage) onMessage(msg);
-        if (handlers.message) handlers.message(msg);
-        bw.clientApply(msg);
-      } catch (e) {
-        if (handlers.error) handlers.error(e);
-      }
-    }
-    if (transport === 'sse' && typeof EventSource !== 'undefined') {
-      setStatus('connecting');
-      var es = new EventSource(url);
-      conn._es = es;
-      es.onopen = function () {
-        setStatus('connected');
-        if (handlers.open) handlers.open();
-      };
-      es.onmessage = function (e) {
-        handleMessage(e.data);
-      };
-      es.onerror = function () {
-        if (conn.status === 'connected') {
-          setStatus('disconnected');
-        }
-        if (handlers.error) handlers.error(new Error('SSE connection error'));
-        if (!reconnect) {
-          es.close();
-        }
-        // EventSource auto-reconnects by default when reconnect=true
-      };
-    } else if (transport === 'poll') {
-      var interval = opts.interval || 2000;
-      setStatus('connected');
-      conn._pollTimer = setInterval(function () {
-        fetch(url).then(function (r) {
-          return r.json();
-        }).then(function (msgs) {
-          if (Array.isArray(msgs)) {
-            msgs.forEach(handleMessage);
-          } else if (msgs && msgs.type) {
-            handleMessage(msgs);
-          }
-        })["catch"](function (e) {
-          if (handlers.error) handlers.error(e);
-        });
-      }, interval);
-    }
-
-    /**
-     * Send an action to the server via POST.
-     * @param {string} action - Action name
-     * @param {Object} [data] - Action payload
-     */
-    conn.sendAction = function (action, data) {
-      var body = JSON.stringify({
-        type: 'action',
-        action: action,
-        data: data || {}
-      });
-      fetch(actionUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: body
-      })["catch"](function (e) {
-        if (handlers.error) handlers.error(e);
-      });
-    };
-
-    /**
-     * Register an event handler.
-     * @param {string} event - 'open'|'message'|'error'|'close'
-     * @param {Function} handler
-     */
-    conn.on = function (event, handler) {
-      handlers[event] = handler;
-      return conn;
-    };
-
-    /**
-     * Close the connection.
-     */
-    conn.close = function () {
-      if (conn._es) {
-        conn._es.close();
-        conn._es = null;
-      }
-      if (conn._pollTimer) {
-        clearInterval(conn._pollTimer);
-        conn._pollTimer = null;
-      }
-      setStatus('disconnected');
-      if (handlers.close) handlers.close();
-    };
-    return conn;
-  };
-
   // ===================================================================================
   // bw.inspect() — Debug utility
   // ===================================================================================
@@ -12149,20 +12676,20 @@
       el = target.element;
       comp = target;
     } else {
-      if (typeof target === 'string') {
+      if (_is(target, 'string')) {
         el = bw.$(target)[0];
       }
       if (!el) {
-        console.warn('bw.inspect: element not found');
+        _cw('bw.inspect: element not found');
         return null;
       }
       comp = el._bwComponentHandle;
     }
     if (!comp) {
-      console.log('bw.inspect: no ComponentHandle on this element');
-      console.log('  Tag:', el.tagName);
-      console.log('  Classes:', el.className);
-      console.log('  _bw_state:', el._bw_state || '(none)');
+      _cl('bw.inspect: no ComponentHandle on this element');
+      _cl('  Tag:', el.tagName);
+      _cl('  Classes:', el.className);
+      _cl('  _bw_state:', el._bw_state || '(none)');
       return null;
     }
     var deps = comp._bindings.reduce(function (s, b) {
@@ -12171,13 +12698,13 @@
       return a.indexOf(v) === i;
     });
     console.group('Component: ' + comp._bwId);
-    console.log('State:', comp._state);
-    console.log('Bindings:', comp._bindings.length, '(deps:', deps, ')');
-    console.log('Methods:', Object.keys(comp._methods));
-    console.log('Actions:', Object.keys(comp._actions));
-    console.log('User tag:', comp._userTag || '(none)');
-    console.log('Mounted:', comp.mounted);
-    console.log('Element:', comp.element);
+    _cl('State:', comp._state);
+    _cl('Bindings:', comp._bindings.length, '(deps:', deps, ')');
+    _cl('Methods:', _keys(comp._methods));
+    _cl('Actions:', _keys(comp._actions));
+    _cl('User tag:', comp._userTag || '(none)');
+    _cl('Mounted:', comp.mounted);
+    _cl('Element:', comp.element);
     console.groupEnd();
     return comp;
   };
@@ -12200,8 +12727,8 @@
     // Pre-extract all binding expressions
     var precompiled = [];
     function walkExpressions(node) {
-      if (!node || _typeof(node) !== 'object') return;
-      if (typeof node.c === 'string' && node.c.indexOf('${') >= 0) {
+      if (!_is(node, 'object')) return;
+      if (_is(node.c, 'string') && node.c.indexOf('${') >= 0) {
         var parsed = bw._parseBindings(node.c);
         for (var i = 0; i < parsed.length; i++) {
           try {
@@ -12221,9 +12748,9 @@
       }
       if (node.a) {
         for (var key in node.a) {
-          if (Object.prototype.hasOwnProperty.call(node.a, key)) {
+          if (_hop.call(node.a, key)) {
             var v = node.a[key];
-            if (typeof v === 'string' && v.indexOf('${') >= 0) {
+            if (_is(v, 'string') && v.indexOf('${') >= 0) {
               var parsed2 = bw._parseBindings(v);
               for (var j = 0; j < parsed2.length; j++) {
                 try {
@@ -12244,9 +12771,9 @@
           }
         }
       }
-      if (Array.isArray(node.c)) {
+      if (_isA(node.c)) {
         for (var k = 0; k < node.c.length; k++) walkExpressions(node.c[k]);
-      } else if (node.c && _typeof(node.c) === 'object' && node.c.t) {
+      } else if (_is(node.c, 'object') && node.c.t) {
         walkExpressions(node.c);
       }
     }
@@ -12257,7 +12784,7 @@
       handle._precompiledBindings = precompiled;
       if (initialState) {
         for (var k in initialState) {
-          if (Object.prototype.hasOwnProperty.call(initialState, k)) {
+          if (_hop.call(initialState, k)) {
             handle._state[k] = initialState[k];
           }
         }
@@ -12291,21 +12818,21 @@
       minify = _options$minify === void 0 ? false : _options$minify,
       _options$pretty = options.pretty,
       pretty = _options$pretty === void 0 ? !minify : _options$pretty;
-    if (typeof rules === 'string') return rules;
+    if (_is(rules, 'string')) return rules;
     var css = '';
     var indent = pretty ? '  ' : '';
     var newline = pretty ? '\n' : '';
     var space = pretty ? ' ' : '';
-    if (Array.isArray(rules)) {
+    if (_isA(rules)) {
       css = rules.map(function (rule) {
         return bw.css(rule, options);
       }).join(newline);
-    } else if (_typeof(rules) === 'object') {
+    } else if (_is(rules, 'object')) {
       Object.entries(rules).forEach(function (_ref5) {
         var _ref6 = _slicedToArray(_ref5, 2),
           selector = _ref6[0],
           styles = _ref6[1];
-        if (_typeof(styles) === 'object' && !Array.isArray(styles)) {
+        if (_is(styles, 'object')) {
           // Handle @media, @keyframes, @supports — recurse into nested block
           if (selector.charAt(0) === '@') {
             var inner = bw.css(styles, options);
@@ -12351,7 +12878,7 @@
    * @returns {Element} The style element
    * @category CSS & Styling
    * @see bw.css
-   * @see bw.loadDefaultStyles
+   * @see bw.loadStyles
    * @example
    * bw.injectCSS('.my-class { color: red; }');
    * bw.injectCSS({ '.card': { padding: '1rem' } }, { id: 'card-styles' });
@@ -12359,7 +12886,7 @@
   bw.injectCSS = function (css) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     if (!bw._isBrowser) {
-      console.warn('bw.injectCSS requires a DOM environment');
+      _cw('bw.injectCSS requires a DOM environment');
       return null;
     }
     var _options$id = options.id,
@@ -12377,7 +12904,7 @@
     }
 
     // Convert CSS if needed
-    var cssStr = typeof css === 'string' ? css : bw.css(css, options);
+    var cssStr = _is(css, 'string') ? css : bw.css(css, options);
 
     // Set or append CSS
     if (append && styleEl.textContent) {
@@ -12397,230 +12924,19 @@
    * @param {...Object} styles - Style objects to merge (left-to-right)
    * @returns {Object} Merged style object
    * @category CSS & Styling
-   * @see bw.u
    * @example
-   * var style = bw.s(bw.u.flex, bw.u.gap4, { color: 'red' });
+   * var style = bw.s({ display: 'flex' }, { gap: '1rem' }, { color: 'red' });
    * // => { display: 'flex', gap: '1rem', color: 'red' }
    */
   bw.s = function () {
     var result = {};
     for (var i = 0; i < arguments.length; i++) {
       var arg = arguments[i];
-      if (arg && _typeof(arg) === 'object') Object.assign(result, arg);
+      if (_is(arg, 'object')) Object.assign(result, arg);
     }
     return result;
   };
 
-  /**
-   * Pre-built CSS utility objects (like Tailwind utilities, but in JS).
-   *
-   * Compose with `bw.s()` to build inline styles without writing raw CSS strings.
-   * Includes flex, padding, margin, typography, color, border, and transition utilities.
-   *
-   * @category CSS & Styling
-   * @see bw.s
-   * @example
-   * { t: 'div', a: { style: bw.s(bw.u.flex, bw.u.gap4, bw.u.p4) },
-   *   c: 'Flexbox with 1rem gap and padding' }
-   */
-  bw.u = {
-    // Display
-    flex: {
-      display: 'flex'
-    },
-    flexCol: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    flexRow: {
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    flexWrap: {
-      display: 'flex',
-      flexWrap: 'wrap'
-    },
-    block: {
-      display: 'block'
-    },
-    inline: {
-      display: 'inline'
-    },
-    hidden: {
-      display: 'none'
-    },
-    // Flex alignment
-    justifyCenter: {
-      justifyContent: 'center'
-    },
-    justifyBetween: {
-      justifyContent: 'space-between'
-    },
-    justifyEnd: {
-      justifyContent: 'flex-end'
-    },
-    alignCenter: {
-      alignItems: 'center'
-    },
-    alignStart: {
-      alignItems: 'flex-start'
-    },
-    alignEnd: {
-      alignItems: 'flex-end'
-    },
-    // Gap (0.25rem increments)
-    gap1: {
-      gap: '0.25rem'
-    },
-    gap2: {
-      gap: '0.5rem'
-    },
-    gap3: {
-      gap: '0.75rem'
-    },
-    gap4: {
-      gap: '1rem'
-    },
-    gap6: {
-      gap: '1.5rem'
-    },
-    gap8: {
-      gap: '2rem'
-    },
-    // Padding
-    p0: {
-      padding: '0'
-    },
-    p1: {
-      padding: '0.25rem'
-    },
-    p2: {
-      padding: '0.5rem'
-    },
-    p3: {
-      padding: '0.75rem'
-    },
-    p4: {
-      padding: '1rem'
-    },
-    p6: {
-      padding: '1.5rem'
-    },
-    p8: {
-      padding: '2rem'
-    },
-    px4: {
-      paddingLeft: '1rem',
-      paddingRight: '1rem'
-    },
-    py2: {
-      paddingTop: '0.5rem',
-      paddingBottom: '0.5rem'
-    },
-    py4: {
-      paddingTop: '1rem',
-      paddingBottom: '1rem'
-    },
-    // Margin (same scale)
-    m0: {
-      margin: '0'
-    },
-    m4: {
-      margin: '1rem'
-    },
-    mt2: {
-      marginTop: '0.5rem'
-    },
-    mt4: {
-      marginTop: '1rem'
-    },
-    mb2: {
-      marginBottom: '0.5rem'
-    },
-    mb4: {
-      marginBottom: '1rem'
-    },
-    mx_auto: {
-      marginLeft: 'auto',
-      marginRight: 'auto'
-    },
-    // Typography
-    textSm: {
-      fontSize: '0.875rem'
-    },
-    textBase: {
-      fontSize: '1rem'
-    },
-    textLg: {
-      fontSize: '1.125rem'
-    },
-    textXl: {
-      fontSize: '1.25rem'
-    },
-    text2xl: {
-      fontSize: '1.5rem'
-    },
-    text3xl: {
-      fontSize: '1.875rem'
-    },
-    bold: {
-      fontWeight: '700'
-    },
-    semibold: {
-      fontWeight: '600'
-    },
-    italic: {
-      fontStyle: 'italic'
-    },
-    textCenter: {
-      textAlign: 'center'
-    },
-    textRight: {
-      textAlign: 'right'
-    },
-    // Colors (from design tokens)
-    bgWhite: {
-      background: '#ffffff'
-    },
-    bgTeal: {
-      background: '#006666',
-      color: '#ffffff'
-    },
-    textWhite: {
-      color: '#ffffff'
-    },
-    textTeal: {
-      color: '#006666'
-    },
-    textMuted: {
-      color: '#888'
-    },
-    // Borders
-    rounded: {
-      borderRadius: '0.375rem'
-    },
-    roundedLg: {
-      borderRadius: '0.5rem'
-    },
-    roundedFull: {
-      borderRadius: '9999px'
-    },
-    border: {
-      border: '1px solid #d8d8d8'
-    },
-    // Sizing
-    wFull: {
-      width: '100%'
-    },
-    hFull: {
-      height: '100%'
-    },
-    // Transitions
-    transition: {
-      transition: 'all 0.2s ease'
-    }
-  };
-
   /**
    * Generate responsive CSS with media query breakpoints.
    *
@@ -12651,7 +12967,7 @@
       xl: '1200px'
     };
     var parts = [];
-    Object.keys(breakpoints).forEach(function (key) {
+    _keys(breakpoints).forEach(function (key) {
       var rules = {};
       if (key === 'base') {
         rules[selector] = breakpoints[key];
@@ -12723,18 +13039,18 @@
       if (!selector) return [];
 
       // Already an array
-      if (Array.isArray(selector)) return selector;
+      if (_isA(selector)) return selector;
 
       // Single element
       if (selector.nodeType) return [selector];
 
       // NodeList or HTMLCollection
-      if (selector.length !== undefined && typeof selector !== 'string') {
+      if (selector.length !== undefined && !_is(selector, 'string')) {
         return Array.from(selector);
       }
 
       // CSS selector string
-      if (typeof selector === 'string') {
+      if (_is(selector, 'string')) {
         return Array.from(document.querySelectorAll(selector));
       }
       return [];
@@ -12746,111 +13062,48 @@
     };
   }
 
+  // =========================================================================
+  // v2.0.18 Clean Styles API — makeStyles / applyStyles / loadStyles / etc.
+  // =========================================================================
+
   /**
-   * Load the built-in Bootstrap-inspired default stylesheet.
-   *
-   * Injects bitwrench's batteries-included CSS (buttons, cards, grids, forms,
-   * alerts, badges, nav, tabs, etc.) into the document head. Call once at app startup.
-   * Returns null in Node.js (no DOM).
-   *
-   * @param {Object} [options] - Style loading options
-   * @param {boolean} [options.minify=true] - Minify the CSS output
-   * @returns {Element|null} Style element if in browser, null in Node.js
-   * @category CSS & Styling
-   * @see bw.setTheme
-   * @see bw.applyTheme
-   * @see bw.toggleTheme
-   * @example
-   * bw.loadDefaultStyles();  // inject all default CSS
+   * Convert a scope selector to a <style> element id.
+   * @private
+   * @param {string} [scope] - Scope selector (e.g. '#my-dashboard', '.preview')
+   * @returns {string} Style element id (e.g. 'bw_style_my_dashboard')
    */
-  bw.loadDefaultStyles = function () {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _options$minify2 = options.minify,
-      minify = _options$minify2 === void 0 ? true : _options$minify2,
-      palette = options.palette;
-
-    // 1. Inject structural CSS (layout, sizing — never changes with theme)
-    if (bw._isBrowser) {
-      var structuralCSS = bw.css(getStructuralStyles());
-      bw.injectCSS(structuralCSS, {
-        id: 'bw_structural',
-        append: false,
-        minify: minify
-      });
-    }
-
-    // 2. Inject cosmetic CSS via generateTheme (colors, shadows, radii)
-    var paletteConfig = Object.assign({}, DEFAULT_PALETTE_CONFIG, palette || {});
-    var result = bw.generateTheme('', Object.assign({}, paletteConfig, {
-      inject: true
-    }));
-    return result;
-  };
+  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, '_');
+    return 'bw_style_' + clean;
+  }
 
   /**
-   * Generate a complete, scoped theme from seed colors.
-   *
-   * Produces CSS for all themed components (buttons, alerts, badges, cards,
-   * forms, nav, tables, tabs, list groups, pagination, progress, hero, utilities)
-   * scoped under `.name` class. Multiple themes can coexist in the stylesheet.
-   * Swap themes by changing the class on a container element.
-   *
-   * @param {string} name - CSS scope class (e.g. 'ocean'). Empty string = unscoped global.
-   * @param {Object} config - Theme configuration
-   * @param {string} config.primary - Primary brand color hex
-   * @param {string} config.secondary - Secondary color hex
-   * @param {string} [config.tertiary] - Tertiary/accent color hex (defaults to primary)
-   * @param {string} [config.success='#198754'] - Success color hex
-   * @param {string} [config.danger='#dc3545'] - Danger color hex
-   * @param {string} [config.warning='#ffc107'] - Warning color hex
-   * @param {string} [config.info='#0dcaf0'] - Info color hex
-   * @param {string} [config.light='#f8f9fa'] - Light color hex
-   * @param {string} [config.dark='#212529'] - Dark color hex
-   * @param {string} [config.background] - Page background hex (default: '#ffffff' light, derived dark)
-   * @param {string} [config.surface] - Surface/card background hex (default: '#f8f9fa' light, derived dark)
+   * Generate a complete styles object from seed colors and layout config.
+   * Pure function — no DOM, no state, no side effects.
+   *
+   * All parameters are optional. Defaults to the bitwrench default palette.
+   *
+   * @param {Object} [config] - Style configuration
+   * @param {string} [config.primary='#006666'] - Primary brand color hex
+   * @param {string} [config.secondary='#6c757d'] - Secondary color hex
+   * @param {string} [config.tertiary] - Tertiary color hex (defaults to primary)
    * @param {string} [config.spacing='normal'] - 'compact' | 'normal' | 'spacious'
    * @param {string} [config.radius='md'] - 'none' | 'sm' | 'md' | 'lg' | 'pill'
-   * @param {number} [config.fontSize=1.0] - Base font size scale factor
-   * @param {string|number} [config.typeRatio='normal'] - 'tight' | 'normal' | 'relaxed' | 'dramatic' or a number
-   * @param {string} [config.elevation='md'] - 'flat' | 'sm' | 'md' | 'lg'
-   * @param {string} [config.motion='standard'] - 'reduced' | 'standard' | 'expressive'
-   * @param {number} [config.harmonize=0.20] - 0-1, semantic color hue shift toward primary
-   * @param {boolean} [config.inject=true] - Inject into DOM (browser only)
-   * @returns {Object} { css, palette, name, isLightPrimary, alternate: { css, palette } }
+   * @returns {Object} { css, alternateCss, rules, alternateRules, palette, alternatePalette, isLightPrimary }
    * @category CSS & Styling
-   * @see bw.applyTheme
-   * @see bw.toggleTheme
-   * @see bw.loadDefaultStyles
+   * @see bw.applyStyles
+   * @see bw.loadStyles
    * @example
-   * // Generate and inject an ocean theme (primary + alternate)
-   * var theme = bw.generateTheme('ocean', {
-   *   primary: '#0077b6',
-   *   secondary: '#90e0ef',
-   *   tertiary: '#00b4d8'
-   * });
-   *
-   * // Apply to a container
-   * document.getElementById('app').classList.add('ocean');
-   *
-   * // Toggle to alternate palette
-   * bw.toggleTheme();
-   *
-   * // Generate CSS for static export (Node.js)
-   * var result = bw.generateTheme('sunset', {
-   *   primary: '#e76f51',
-   *   secondary: '#264653',
-   *   inject: false
-   * });
-   * fs.writeFileSync('sunset.css', result.css + result.alternate.css);
+   * var styles = bw.makeStyles({ primary: '#4f46e5', secondary: '#d97706' });
+   * console.log(styles.palette.primary.base); // '#4f46e5'
+   * // styles.css contains all themed CSS — nothing injected
    */
-  bw.generateTheme = function (name, config) {
-    if (!config || !config.primary || !config.secondary) {
-      throw new Error('bw.generateTheme requires config.primary and config.secondary');
-    }
-
-    // Merge with defaults; if user didn't supply tertiary, default to their primary
-    var fullConfig = Object.assign({}, DEFAULT_PALETTE_CONFIG, config);
-    if (!config.tertiary) fullConfig.tertiary = fullConfig.primary;
+  bw.makeStyles = function (config) {
+    var fullConfig = Object.assign({}, DEFAULT_PALETTE_CONFIG, config || {});
+    if (config && !config.tertiary) fullConfig.tertiary = fullConfig.primary;
 
     // Derive primary palette
     var palette = derivePalette(fullConfig);
@@ -12858,136 +13111,211 @@
     // Resolve layout
     var layout = resolveLayout(fullConfig);
 
-    // Generate primary themed CSS rules
-    var themedRules = generateThemedCSS(name, palette, layout);
+    // Generate primary themed CSS rules (unscoped)
+    var themedRules = generateThemedCSS('', palette, layout);
     var cssStr = bw.css(themedRules);
 
     // Derive alternate palette (luminance-inverted)
     var altConfig = deriveAlternateConfig(fullConfig);
     var altPalette = derivePalette(altConfig);
 
-    // Generate alternate CSS scoped under .bw_theme_alt
-    var altRules = generateAlternateCSS(name, altPalette, layout);
-    var altCssStr = bw.css(altRules);
+    // Generate alternate CSS rules WITHOUT .bw_theme_alt prefix (raw rules)
+    // applyStyles() wraps them appropriately based on scope
+    var altRawRules = generateThemedCSS('', altPalette, layout);
+
+    // Add body-level surface overrides for the alternate palette.
+    // When .bw_theme_alt is on <html>, ".bw_theme_alt body" correctly matches.
+    altRawRules['body'] = {
+      'color': altPalette.dark.base,
+      'background-color': altPalette.surface || altPalette.light.base
+    };
+    var altCssStr = bw.css(altRawRules);
 
     // Determine if primary is light-flavored
     var lightPrimary = isLightPalette(fullConfig);
+    return {
+      css: cssStr,
+      alternateCss: altCssStr,
+      rules: themedRules,
+      alternateRules: altRawRules,
+      palette: palette,
+      alternatePalette: altPalette,
+      isLightPrimary: lightPrimary
+    };
+  };
 
-    // Inject both CSS sets into DOM if requested
-    var shouldInject = config.inject !== false;
-    if (shouldInject && bw._isBrowser) {
-      var safeName = name ? name.replace(/-/g, '_') : '';
-      var styleId = safeName ? 'bw_theme_' + safeName : 'bw_theme_default';
-      var altStyleId = safeName ? 'bw_theme_' + safeName + '_alt' : 'bw_theme_default_alt';
-      bw.injectCSS(cssStr, {
-        id: styleId,
-        append: false
-      });
-      bw.injectCSS(altCssStr, {
-        id: altStyleId,
-        append: false
-      });
-      bw._activeThemeStyleIds = [styleId, altStyleId];
+  /**
+   * Inject styles into the DOM with optional scoping.
+   *
+   * Takes a styles object from `makeStyles()` and creates a single `<style>`
+   * element in `<head>`. If a scope selector is provided, all CSS rules are
+   * wrapped under that selector. Alternate CSS is wrapped under `.bw_theme_alt`.
+   *
+   * @param {Object} styles - Result of `bw.makeStyles()`
+   * @param {string} [scope] - Scope selector (e.g. '#my-dashboard', '.preview'). Omit for global.
+   * @returns {Element|null} The `<style>` element, or null in Node.js
+   * @category CSS & Styling
+   * @see bw.makeStyles
+   * @see bw.loadStyles
+   * @see bw.clearStyles
+   * @example
+   * var styles = bw.makeStyles({ primary: '#4f46e5' });
+   * bw.applyStyles(styles);                     // global
+   * bw.applyStyles(styles, '#my-dashboard');     // scoped
+   */
+  bw.applyStyles = function (styles, scope) {
+    if (!bw._isBrowser) return null;
+    if (!styles || !styles.rules) {
+      _cw('bw.applyStyles: invalid styles object');
+      return null;
     }
+    var styleId = _scopeToStyleId(scope);
 
-    // Update bw.u color entries to reflect the palette
-    if (!name) {
-      bw.u.bgTeal = {
-        background: palette.primary.base,
-        color: palette.primary.textOn
-      };
-      bw.u.textTeal = {
-        color: palette.primary.base
-      };
-      bw.u.bgWhite = {
-        background: '#ffffff'
-      };
-      bw.u.textWhite = {
-        color: '#ffffff'
-      };
+    // Scope the primary rules if a scope is provided
+    var primaryRules = styles.rules;
+    if (scope) {
+      primaryRules = scopeRulesUnder(primaryRules, scope);
     }
 
-    // Store active theme state
-    var result = {
-      css: cssStr,
-      palette: palette,
-      name: name,
-      isLightPrimary: lightPrimary,
-      alternate: {
-        css: altCssStr,
-        palette: altPalette
+    // Wrap alternate rules with .bw_theme_alt
+    var altRules = styles.alternateRules;
+    if (altRules) {
+      if (scope) {
+        // Scoped compound: #scope.bw_theme_alt .bw_card
+        altRules = scopeRulesUnder(altRules, scope + '.bw_theme_alt');
+      } else {
+        // Global: .bw_theme_alt .bw_card
+        altRules = scopeRulesUnder(altRules, '.bw_theme_alt');
       }
-    };
-    bw._activeTheme = result;
-    bw._activeThemeMode = 'primary';
-    return result;
+    }
+
+    // Combine primary + alternate into one CSS string
+    var combined = bw.css(primaryRules);
+    if (altRules) {
+      combined += '\n' + bw.css(altRules);
+    }
+    return bw.injectCSS(combined, {
+      id: styleId,
+      append: false
+    });
   };
 
   /**
-   * Apply a theme mode. Switches between primary and alternate palettes
-   * by adding/removing the `bw_theme_alt` class on `<html>`.
+   * Generate and apply styles in one call. Convenience wrapper.
+   *
+   * Equivalent to: `bw.applyStyles(bw.makeStyles(config), scope)`
    *
-   * @param {string} mode - 'primary' | 'alternate' | 'light' | 'dark'
-   * @returns {string} Active mode: 'primary' or 'alternate'
+   * @param {Object} [config] - Style configuration (same as `makeStyles`)
+   * @param {string} [scope] - Scope selector (same as `applyStyles`)
+   * @returns {Element|null} The `<style>` element, or null in Node.js
    * @category CSS & Styling
-   * @see bw.generateTheme
-   * @see bw.toggleTheme
+   * @see bw.makeStyles
+   * @see bw.applyStyles
    * @example
-   * bw.applyTheme('alternate');  // switch to alternate palette
-   * bw.applyTheme('dark');       // switch to whichever palette is darker
-   * bw.applyTheme('primary');    // switch back to primary palette
-   */
-  bw.applyTheme = function (mode) {
-    if (!bw._isBrowser) return mode || 'primary';
-    var root = document.documentElement;
-    var isLight = bw._activeTheme ? bw._activeTheme.isLightPrimary : true;
-    var wantAlt;
-    if (mode === 'primary') wantAlt = false;else if (mode === 'alternate') wantAlt = true;else if (mode === 'light') wantAlt = !isLight;else if (mode === 'dark') wantAlt = isLight;else wantAlt = false;
-    if (wantAlt) {
-      root.classList.add('bw_theme_alt');
-    } else {
-      root.classList.remove('bw_theme_alt');
+   * bw.loadStyles();                                          // defaults, global
+   * bw.loadStyles({ primary: '#4f46e5' });                    // custom, global
+   * 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
+        });
+      }
     }
-    bw._activeThemeMode = wantAlt ? 'alternate' : 'primary';
-    return bw._activeThemeMode;
+    return bw.applyStyles(bw.makeStyles(config), scope);
+  };
+
+  /**
+   * Inject the CSS reset (box-sizing, html/body font, reduced-motion).
+   * Idempotent — if already injected, returns the existing `<style>` element.
+   *
+   * @returns {Element|null} The `<style>` element, or null in Node.js
+   * @category CSS & Styling
+   * @see bw.loadStyles
+   * @see bw.clearStyles
+   * @example
+   * bw.loadReset();  // inject once, safe to call multiple times
+   */
+  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
+    });
   };
 
   /**
-   * Toggle between primary and alternate theme palettes.
+   * Toggle between primary and alternate palettes.
+   *
+   * Adds/removes the `bw_theme_alt` class on the scoping element.
+   * Without a scope, toggles on `<html>` (global).
+   * With a scope, toggles on the first matching element.
    *
+   * @param {string} [scope] - Scope selector (e.g. '#my-dashboard'). Omit for global.
    * @returns {string} Active mode after toggle: 'primary' or 'alternate'
    * @category CSS & Styling
-   * @see bw.applyTheme
-   * @see bw.generateTheme
+   * @see bw.applyStyles
+   * @see bw.clearStyles
    * @example
-   * bw.toggleTheme();  // flip between primary and alternate
+   * bw.toggleStyles();                   // global toggle on <html>
+   * bw.toggleStyles('#my-dashboard');    // scoped toggle
    */
-  bw.toggleTheme = function () {
-    var current = bw._activeThemeMode || 'primary';
-    return bw.applyTheme(current === 'primary' ? 'alternate' : 'primary');
+  bw.toggleStyles = function (scope) {
+    if (!bw._isBrowser) return 'primary';
+    var target;
+    if (scope) {
+      var els = bw.$(scope);
+      target = els[0];
+    } else {
+      target = document.documentElement;
+    }
+    if (!target) return 'primary';
+    var hasAlt = target.classList.contains('bw_theme_alt');
+    if (hasAlt) {
+      target.classList.remove('bw_theme_alt');
+      return 'primary';
+    } else {
+      target.classList.add('bw_theme_alt');
+      return 'alternate';
+    }
   };
 
   /**
-   * Remove the currently active theme's injected style elements from the DOM.
-   * Use this before generating a new theme with a different name to prevent
-   * stale CSS accumulation.
+   * Remove injected styles for a given scope.
    *
+   * Finds the `<style>` element by id and removes it. Also removes
+   * the `bw_theme_alt` class from the relevant element.
+   *
+   * @param {string} [scope] - Scope selector. Omit to remove global styles.
    * @category CSS & Styling
-   * @see bw.generateTheme
+   * @see bw.applyStyles
+   * @see bw.loadStyles
    * @example
-   * bw.clearTheme();                   // remove current theme styles
-   * bw.generateTheme('sunset', conf);  // inject fresh theme
-   */
-  bw.clearTheme = function () {
-    if (bw._activeThemeStyleIds && bw._isBrowser) {
-      bw._activeThemeStyleIds.forEach(function (id) {
-        var el = document.getElementById(id);
-        if (el) el.remove();
-      });
-      bw._activeThemeStyleIds = null;
+   * bw.clearStyles();                    // remove global styles
+   * bw.clearStyles('#my-dashboard');     // remove scoped styles
+   * bw.clearStyles('reset');             // remove the CSS reset
+   */
+  bw.clearStyles = function (scope) {
+    if (!bw._isBrowser) return;
+    var styleId = _scopeToStyleId(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') {
+      var targets = bw.$(scope);
+      if (targets[0]) targets[0].classList.remove('bw_theme_alt');
+    } else if (!scope || scope === 'global') {
+      document.documentElement.classList.remove('bw_theme_alt');
     }
-    bw._activeTheme = null;
-    bw._activeThemeMode = 'primary';
   };
 
   // Expose color utility functions on bw namespace
@@ -13209,10 +13537,15 @@
    * @param {Object} config - Table configuration
    * @param {Array<Object>} config.data - Array of row objects to display
    * @param {Array<Object>} [config.columns] - Column definitions with key, label, render
-   * @param {string} [config.className='table'] - CSS class for table element
+   * @param {string} [config.className=''] - Additional CSS classes for table element
    * @param {boolean} [config.sortable=true] - Enable click-to-sort headers
    * @param {Function} [config.onSort] - Sort callback (column, direction)
-   * @returns {Object} TACO object for table
+   * @param {boolean} [config.selectable=false] - Enable row selection on click
+   * @param {Function} [config.onRowClick] - Row click callback (row, index, event)
+   * @param {number} [config.pageSize] - Rows per page (enables pagination when set)
+   * @param {number} [config.currentPage=1] - Current page number (1-based)
+   * @param {Function} [config.onPageChange] - Page change callback (newPage)
+   * @returns {Object} TACO object for table (with optional pagination controls)
    * @category Component Builders
    * @see bw.makeDataTable
    * @example
@@ -13224,7 +13557,12 @@
    *   columns: [
    *     { key: 'name', label: 'Name' },
    *     { key: 'age', label: 'Age' }
-   *   ]
+   *   ],
+   *   selectable: true,
+   *   onRowClick: function(row, i) { console.log('clicked', row.name); },
+   *   pageSize: 10,
+   *   currentPage: 1,
+   *   onPageChange: function(page) { console.log('page', page); }
    * });
    */
   bw.makeTable = function (config) {
@@ -13242,17 +13580,25 @@
       onSort = config.onSort,
       sortColumn = config.sortColumn,
       _config$sortDirection = config.sortDirection,
-      sortDirection = _config$sortDirection === void 0 ? 'asc' : _config$sortDirection;
-
-    // Build class list: always include bw_table, add striped/hover, append user className
+      sortDirection = _config$sortDirection === void 0 ? 'asc' : _config$sortDirection,
+      _config$selectable = config.selectable,
+      selectable = _config$selectable === void 0 ? false : _config$selectable,
+      onRowClick = config.onRowClick,
+      pageSize = config.pageSize,
+      _config$currentPage = config.currentPage,
+      currentPage = _config$currentPage === void 0 ? 1 : _config$currentPage,
+      onPageChange = config.onPageChange;
+
+    // Build class list: always include bw_table, add striped/hover/selectable, append user className
     var cls = 'bw_table';
     if (striped) cls += ' bw_table_striped';
-    if (hover) cls += ' bw_table_hover';
+    if (hover || selectable) cls += ' bw_table_hover';
+    if (selectable) cls += ' bw_table_selectable';
     if (className) cls += ' ' + className;
     cls = cls.trim();
 
     // Auto-detect columns if not provided
-    var cols = columns || (data.length > 0 ? Object.keys(data[0]).map(function (key) {
+    var cols = columns || (data.length > 0 ? _keys(data[0]).map(function (key) {
       return {
         key: key,
         label: key
@@ -13271,7 +13617,7 @@
         var bVal = b[currentSortColumn];
 
         // Handle different types
-        if (typeof aVal === 'number' && typeof bVal === 'number') {
+        if (_is(aVal, 'number') && _is(bVal, 'number')) {
           return currentSortDirection === 'asc' ? aVal - bVal : bVal - aVal;
         }
 
@@ -13286,6 +13632,15 @@
       });
     }
 
+    // Pagination
+    var totalRows = sortedData.length;
+    var totalPages = pageSize ? Math.max(1, Math.ceil(totalRows / pageSize)) : 1;
+    var page = Math.max(1, Math.min(currentPage, totalPages));
+    if (pageSize) {
+      var start = (page - 1) * pageSize;
+      sortedData = sortedData.slice(start, start + pageSize);
+    }
+
     // Create sort handler
     var handleSort = function handleSort(column) {
       if (!sortable) return;
@@ -13331,12 +13686,28 @@
       }
     };
 
-    // Build table body
+    // Build table body with selectable/onRowClick support
     var tbody = {
       t: 'tbody',
-      c: sortedData.map(function (row) {
+      c: sortedData.map(function (row, idx) {
+        var globalIdx = pageSize ? (page - 1) * pageSize + idx : idx;
+        var rowAttrs = {};
+        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');
+            }
+            if (onRowClick) {
+              onRowClick(row, globalIdx, e);
+            }
+          };
+        }
         return {
           t: 'tr',
+          a: rowAttrs,
           c: cols.map(function (col) {
             return {
               t: 'td',
@@ -13346,13 +13717,65 @@
         };
       })
     };
-    return {
+    var table = {
       t: 'table',
       a: {
         "class": cls
       },
       c: [thead, tbody]
     };
+
+    // If no pagination, return table directly
+    if (!pageSize) return table;
+
+    // Build pagination controls
+    var pageButtons = [];
+    // Previous button
+    pageButtons.push({
+      t: 'button',
+      a: {
+        "class": 'bw_btn bw_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',
+        disabled: page >= totalPages ? 'disabled' : undefined,
+        onclick: page < totalPages && onPageChange ? function () {
+          onPageChange(page + 1);
+        } : undefined
+      },
+      c: 'Next'
+    });
+    return {
+      t: 'div',
+      a: {
+        "class": 'bw_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;'
+        },
+        c: pageButtons
+      }]
+    };
   };
 
   /**
@@ -13395,7 +13818,7 @@
       headerRow = _config$headerRow === void 0 ? true : _config$headerRow,
       columns = config.columns,
       rest = _objectWithoutProperties(config, _excluded);
-    if (!Array.isArray(data) || data.length === 0) {
+    if (!_isA(data) || data.length === 0) {
       return bw.makeTable(_objectSpread2({
         data: [],
         columns: columns || []
@@ -13492,7 +13915,7 @@
       showLabels = _config$showLabels === void 0 ? true : _config$showLabels,
       _config$className2 = config.className,
       className = _config$className2 === void 0 ? '' : _config$className2;
-    if (!Array.isArray(data) || data.length === 0) {
+    if (!_isA(data) || data.length === 0) {
       return {
         t: 'div',
         a: {
@@ -13675,7 +14098,7 @@
   bw.render = function (element, position, taco) {
     var _taco$o4, _taco$o5, _taco$o6;
     // Get target element
-    var targetEl = typeof element === 'string' ? document.querySelector(element) : element;
+    var targetEl = _is(element, 'string') ? document.querySelector(element) : element;
     if (!targetEl) {
       return {
         object_type: 'error',
@@ -13813,7 +14236,7 @@
       setContent: function setContent(content) {
         this._taco.c = content;
         if (this.element) {
-          if (typeof content === 'string') {
+          if (_is(content, 'string')) {
             this.element.textContent = content;
           } else {
             // Re-render for complex content