bitwrench 2.0.17 → 2.0.19

package/dist/bitwrench-lean.umd.js

@@ -1,4 +1,4 @@
-/*! bitwrench-lean v2.0.17 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+/*! bitwrench-lean v2.0.19 | 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) :
@@ -12,14 +12,14 @@
    */
 
   const VERSION_INFO = {
-    version: '2.0.17',
+    version: '2.0.19',
     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-13T23:15:10.823Z'
+    buildDate: '2026-03-22T19:09:32.608Z'
   };
 
   /**
@@ -313,13 +313,18 @@
    */
   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)
     };
@@ -378,19 +383,27 @@
     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
@@ -438,10 +451,18 @@
     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),
@@ -454,7 +475,8 @@
       light:      deriveShades(lightBase),
       dark:       deriveShades(darkBase),
       background: bgBase,
-      surface:    surfBase
+      surface:    surfBase,
+      surfaceAlt: surfAlt
     };
 
     return palette;
@@ -501,10 +523,12 @@
     5: '1.5rem',    // 24px
     6: '2rem'};
 
+  let _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] },
-    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] },
-    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] }
+    compact:  { 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: _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: _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 = {
@@ -616,20 +640,14 @@
    * 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.
@@ -676,6 +694,7 @@
     if (sel.includes(',')) return sel.split(',').map(function(s) { return '.' + name + ' ' + s.trim(); }).join(', ');
     return '.' + name + ' ' + sel;
   }
+  var _sx=scopeSelector;
 
   // =========================================================================
   // Themed CSS generators
@@ -684,12 +703,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'
     };
@@ -702,11 +721,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
@@ -715,12 +734,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'
@@ -734,7 +753,7 @@
     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
     };
@@ -753,36 +772,36 @@
 
     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
     };
 
@@ -796,55 +815,55 @@
     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')] = { 'border-color': palette.success.base };
-    rules[scopeSelector(scope, '.bw_form_control.bw_is_valid:focus')] = {
+    rules[_sx(scope, '.bw_form_control.bw_is_valid')] = { 'border-color': palette.success.base };
+    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')] = { 'border-color': palette.danger.base };
-    rules[scopeSelector(scope, '.bw_form_control.bw_is_invalid:focus')] = {
+    rules[_sx(scope, '.bw_form_control.bw_is_invalid')] = { 'border-color': palette.danger.base };
+    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
     };
@@ -852,43 +871,46 @@
     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
     };
@@ -899,49 +921,58 @@
     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;
@@ -950,23 +981,25 @@
   function generateListGroups(scope, palette, layout) {
     var rules = {};
     var sp = layout.spacing;
+    var mo = layout.motion;
 
-    rules[scopeSelector(scope, '.bw_list_group_item')] = {
+    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'
     };
@@ -974,28 +1007,37 @@
     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
@@ -1005,12 +1047,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)'
     };
@@ -1029,26 +1071,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;
   }
 
@@ -1056,11 +1103,11 @@
 
   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;
@@ -1068,82 +1115,94 @@
 
   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;
@@ -1151,13 +1210,13 @@
 
   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;
@@ -1165,22 +1224,23 @@
 
   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;
@@ -1188,15 +1248,15 @@
 
   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;
@@ -1204,88 +1264,102 @@
 
   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')] = { 'color': palette.success.base };
-    rules[scopeSelector(scope, '.bw_stat_change_down')] = { 'color': palette.danger.base };
+    rules[_sx(scope, '.bw_stat_change_up')] = { 'color': palette.success.base };
+    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')] = { 'background-color': palette.light.border };
+    rules[_sx(scope, '.bw_timeline::before')] = { 'background-color': palette.light.border };
     // Variant marker colors handled by palette class
-    rules[scopeSelector(scope, '.bw_timeline_date')] = { 'color': palette.secondary.base };
+    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')] = { 'background-color': palette.light.border };
-    rules[scopeSelector(scope, '.bw_step_active .bw_step_indicator')] = {
+    rules[_sx(scope, '.bw_step + .bw_step::before')] = { 'background-color': palette.light.border };
+    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')] = { 'color': palette.primary.base };
-    rules[scopeSelector(scope, '.bw_step_completed + .bw_step::before')] = { 'background-color': palette.primary.base };
+    rules[_sx(scope, '.bw_step_completed .bw_step_label')] = { 'color': palette.primary.base };
+    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[scopeSelector(scope, '.bw_chip_input:focus-within')] = {
+    rules[_sx(scope, '.bw_chip_input')] = {
+      'border-color': palette.light.border,
+      'background-color': palette.surface || '#fff',
+      'color': palette.dark.base
+    };
+    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'
@@ -1295,35 +1369,73 @@
 
   function generateRangeThemed(scope, palette) {
     var rules = {};
-    rules[scopeSelector(scope, '.bw_range')] = { 'background-color': palette.light.border };
-    rules[scopeSelector(scope, '.bw_range::-webkit-slider-thumb')] = {
+    rules[_sx(scope, '.bw_range')] = { 'background-color': palette.light.border };
+    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')] = { 'color': palette.dark.base };
+  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'
     };
@@ -1333,7 +1445,7 @@
   function generateNavPillsThemed(scope, palette, layout) {
     var rules = {};
     var rd = layout.radius;
-    rules[scopeSelector(scope, '.bw_nav_pills .bw_nav_link')] = { 'border-radius': rd.btn };
+    rules[_sx(scope, '.bw_nav_pills .bw_nav_link')] = { 'border-radius': rd.btn };
     return rules;
   }
 
@@ -1359,21 +1471,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'
       };
@@ -1381,70 +1493,99 @@
       // --- 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;
   }
@@ -1466,30 +1607,32 @@
       generateAlerts(scopeName, palette, layout),
       generateCards(scopeName, palette, layout),
       generateForms(scopeName, palette, layout),
-      generateNavigation(scopeName, palette),
+      generateNavigation(scopeName, palette, layout),
       generateTables(scopeName, palette, layout),
-      generateTabs(scopeName, palette),
+      generateTabs(scopeName, palette, layout),
       generateListGroups(scopeName, palette, layout),
-      generatePagination(scopeName, palette),
+      generatePagination(scopeName, palette, layout),
       generateProgress(scopeName, palette),
-      generateBreadcrumbThemed(scopeName, palette),
+      generateBreadcrumbThemed(scopeName, palette, layout),
       generateCloseButtonThemed(scopeName, palette),
       generateSectionsThemed(scopeName, palette),
-      generateAccordionThemed(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),
+      generateStatCardThemed(scopeName, palette, layout),
       generateTimelineThemed(scopeName, palette),
       generateStepperThemed(scopeName, palette),
       generateChipInputThemed(scopeName, palette),
-      generateFileUploadThemed(scopeName, palette),
+      generateFileUploadThemed(scopeName, palette, layout),
       generateRangeThemed(scopeName, palette),
-      generateSearchThemed(scopeName, palette),
-      generateCodeDemoThemed(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)
     );
@@ -1714,6 +1857,8 @@
       },
       '.bw_table caption': { 'font-size': '0.875rem', 'caption-side': 'bottom' },
       '.bw_table_bordered > :not(caption) > * > *': { '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' }
     },
 
@@ -1767,6 +1912,7 @@
       '.bw_nav_tabs .bw_nav_item': { 'margin-bottom': '-2px' },
       '.bw_nav_link': {
         'display': 'block', 'font-size': '0.875rem', 'font-weight': '500',
+        'padding': '0.625rem 1rem',
         'text-decoration': 'none', 'cursor': 'pointer',
         'border': 'none', 'background': 'transparent', 'font-family': 'inherit'
       },
@@ -1801,10 +1947,11 @@
       '.bw_page_item': { 'display': 'list-item', 'list-style': 'none' },
       '.bw_page_link': {
         'position': 'relative', 'display': 'block', 'padding': '0.375rem 0.75rem',
-        'margin-left': '-1px', 'line-height': '1.25', 'text-decoration': 'none'
+        'margin-left': '-1px', 'line-height': '1.25', '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' },
+      '.bw_page_item:first-child .bw_page_link': { 'margin-left': '0' },
       '.bw_page_link:focus-visible': { 'z-index': '3', 'outline': '2px solid currentColor', 'outline-offset': '-2px' }
     },
 
@@ -1961,6 +2108,7 @@
       '.bw_accordion_header': { 'margin': '0' },
       '.bw_accordion_button': {
         'position': 'relative', 'display': 'flex', 'align-items': 'center', 'width': '100%',
+        'padding': '0.875rem 1.25rem',
         'font-size': '1rem', 'font-weight': '500', 'text-align': 'left',
         'background-color': 'transparent', 'border': '0', 'overflow-anchor': 'none', 'cursor': 'pointer',
         'font-family': 'inherit'
@@ -1972,10 +2120,9 @@
         'background-repeat': 'no-repeat', 'background-size': '1.25rem'
       },
       '.bw_accordion_button:not(.bw_collapsed)::after': { 'transform': 'rotate(-180deg)' },
-      '.bw_accordion_collapse': { 'max-height': '0', 'overflow': 'hidden' },
-      '.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' }
+      '.bw_accordion_body': { 'padding': '1rem 1.25rem' },
+      '.bw_accordion_collapse': { 'max-height': '0', 'overflow': 'hidden', 'transition': 'max-height 0.3s ease' },
+      '.bw_accordion_collapse.bw_collapse_show': { 'max-height': 'none' }
     },
 
     // ---- Carousel ----
@@ -2029,10 +2176,10 @@
         'position': 'relative', 'display': 'flex', 'flex-direction': 'column', 'pointer-events': 'auto',
         'background-clip': 'padding-box', 'border': '1px solid transparent', 'outline': '0'
       },
-      '.bw_modal_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between' },
+      '.bw_modal_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'padding': '1rem 1.25rem', 'border-bottom': '1px solid transparent' },
       '.bw_modal_title': { 'margin': '0', 'font-size': '1.25rem', 'font-weight': '600', 'line-height': '1.3' },
-      '.bw_modal_body': { 'position': 'relative', 'flex': '1 1 auto' },
-      '.bw_modal_footer': { 'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'justify-content': 'flex-end', 'gap': '0.5rem' }
+      '.bw_modal_body': { 'position': 'relative', 'flex': '1 1 auto', 'padding': '1rem 1.25rem' },
+      '.bw_modal_footer': { 'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'justify-content': 'flex-end', 'gap': '0.5rem', 'padding': '0.75rem 1.25rem', 'border-top': '1px solid transparent' }
     },
 
     // ---- Toast ----
@@ -2053,8 +2200,8 @@
       },
       '.bw_toast.bw_toast_show': { 'opacity': '1', 'transform': 'translateY(0)' },
       '.bw_toast.bw_toast_hiding': { 'opacity': '0' },
-      '.bw_toast_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'font-size': '0.875rem' },
-      '.bw_toast_body': { 'font-size': '0.9375rem' }
+      '.bw_toast_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'padding': '0.5rem 0.75rem', 'font-size': '0.875rem', 'border-bottom': '1px solid transparent' },
+      '.bw_toast_body': { 'padding': '0.5rem 0.75rem', 'font-size': '0.9375rem' }
     },
 
     // ---- Dropdown ----
@@ -2068,15 +2215,15 @@
       '.bw_dropdown_menu': {
         'position': 'absolute', 'top': '100%', 'left': '0', 'z-index': '1000', 'display': 'block',
         'min-width': '10rem', 'padding': '0.5rem 0', 'margin': '0.125rem 0 0',
-        'background-clip': 'padding-box',
+        'background-clip': 'padding-box', 'border': '1px solid transparent',
         'opacity': '0', 'visibility': 'hidden', 'pointer-events': 'none'
       },
       '.bw_dropdown_menu.bw_dropdown_show': { 'opacity': '1', 'visibility': 'visible', 'pointer-events': 'auto' },
       '.bw_dropdown_menu_end': { 'left': 'auto', 'right': '0' },
       '.bw_dropdown_item': {
-        'display': 'block', 'width': '100%', 'clear': 'both',
+        'display': 'block', 'width': '100%', 'padding': '0.4rem 1rem', 'clear': 'both',
         'font-weight': '400', 'text-align': 'inherit', 'text-decoration': 'none', 'white-space': 'nowrap',
-        'background-color': 'transparent', 'border': '0', 'font-size': '0.9375rem'
+        'background-color': 'transparent', 'border': '0', 'font-size': '0.9375rem', 'cursor': 'pointer'
       },
       '.bw_dropdown_item:focus-visible': { 'outline': '2px solid currentColor', 'outline-offset': '-2px' },
       '.bw_dropdown_divider': { 'height': '0', 'margin': '0.5rem 0', 'overflow': 'hidden', 'opacity': '1' }
@@ -2121,7 +2268,13 @@
 
     // ---- Stat card ----
     statCard: {
-      '.bw_stat_card': { 'border-left': '4px solid transparent' },
+      '.bw_stat_card': {
+        '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)' },
       '.bw_stat_icon': { 'font-size': '1.5rem', 'margin-bottom': '0.5rem' },
       '.bw_stat_value': { 'font-size': '2rem', 'font-weight': '700', 'line-height': '1.2' },
@@ -2392,6 +2545,33 @@
     rules['.bw_text_left'] = { 'text-align': 'left' };
     rules['.bw_text_right'] = { 'text-align': 'right' };
     rules['.bw_text_center'] = { 'text-align': 'center' };
+    rules['.bw_text_justify'] = { 'text-align': 'justify' };
+
+    // Font weight
+    rules['.bw_fw_bold'] = { 'font-weight': '700' };
+    rules['.bw_fw_semibold'] = { 'font-weight': '600' };
+    rules['.bw_fw_normal'] = { 'font-weight': '400' };
+    rules['.bw_fw_light'] = { 'font-weight': '300' };
+
+    // Font style
+    rules['.bw_fst_italic'] = { 'font-style': 'italic' };
+    rules['.bw_fst_normal'] = { 'font-style': 'normal' };
+
+    // Text decoration
+    rules['.bw_text_underline'] = { 'text-decoration': 'underline' };
+    rules['.bw_text_line_through'] = { 'text-decoration': 'line-through' };
+    rules['.bw_text_decoration_none'] = { 'text-decoration': 'none' };
+
+    // Text transform
+    rules['.bw_text_uppercase'] = { 'text-transform': 'uppercase' };
+    rules['.bw_text_lowercase'] = { 'text-transform': 'lowercase' };
+    rules['.bw_text_capitalize'] = { 'text-transform': 'capitalize' };
+
+    // Font size
+    rules['.bw_fs_sm'] = { 'font-size': '0.875rem' };
+    rules['.bw_fs_base'] = { 'font-size': '1rem' };
+    rules['.bw_fs_lg'] = { 'font-size': '1.25rem' };
+    rules['.bw_fs_xl'] = { 'font-size': '1.5rem' };
 
     // Flexbox
     var jc = { start: 'flex-start', end: 'flex-end', center: 'center', between: 'space-between', around: 'space-around' };
@@ -2484,6 +2664,20 @@
     rules['.list-inline-item'] = { 'display': 'inline-block' };
     rules['.list-inline-item:not(:last-child)'] = { 'margin-right': '.5rem' };
 
+    // Typography — bw_ prefixed utilities via loops
+    var _imp = function(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' };
     rules['.bw_invisible, .invisible'] = { 'visibility': 'hidden !important' };
@@ -2544,6 +2738,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
   // =========================================================================
@@ -2573,60 +2787,41 @@
   });
 
   /**
-   * 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];
       }
     }
+    return scoped;
+  }
 
-    // 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;
+  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(', ');
   }
 
   /**
@@ -3326,12 +3521,11 @@
     _subIdCounter: 0,     // monotonic ID for subscriptions
 
     // ── Node reference cache ──────────────────────────────────────────────
-    // Fast O(1) lookup for elements by bw_id, id attribute, or bw_uuid.
+    // Fast O(1) lookup for elements by id attribute or bw_uuid_* class.
     //
     // Populated by bw.createDOM() when elements have:
-    //   - data-bw_id attribute (user-declared addressable elements)
     //   - id attribute (standard HTML id)
-    //   - bw_uuid (internal, for lifecycle-managed elements)
+    //   - bw_uuid_* class (lifecycle-managed or explicitly addressed elements)
     //
     // Cleaned up by bw.cleanup() when elements are destroyed via bitwrench APIs.
     // On cache miss, falls back to querySelector/getElementById — never fails,
@@ -3339,7 +3533,7 @@
     // via parentNode === null check (IE11-safe, unlike el.isConnected).
     //
     // Elements created via bw.createDOM() also get el._bw_refs — a local map of
-    // child bw_id → DOM node ref for fast parent→child access in o.render.
+    // child id/UUID -> DOM node ref for fast parent->child access in o.render.
     // This is the bitwrench equivalent of React's compiled template "holes".
     //
     // Contract: if you remove elements outside of bitwrench APIs (raw el.remove()),
@@ -3419,7 +3613,6 @@
   // _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.
@@ -3592,15 +3785,15 @@
    * 1. Check `bw._nodeMap[id]` — if found and still attached (parentNode !== null), return it
    * 2. If cached ref is detached (parentNode === null), remove stale entry
    * 3. Fall back to `document.getElementById(id)` then `document.querySelector(...)`
-   * 4. If fallback finds the element, cache it for next time
-   * 5. If not found anywhere, return null
+   * 4. Try class-based lookup for bw_uuid_* tokens (UUID addressing)
+   * 5. Cache the result for next time
    *
    * Accepts a DOM element directly (pass-through) or a string identifier.
    * String identifiers are tried as: direct map key, getElementById,
    * querySelector (for CSS selectors starting with . or #), and
-   * data-bw_id attribute selector.
+   * bw_uuid_* class selector.
    *
-   * @param {string|Element} id - Element ID, CSS selector, data-bw_id value, or DOM element
+   * @param {string|Element} id - Element ID, CSS selector, bw_uuid_* class, or DOM element
    * @returns {Element|null} The DOM element, or null if not found
    * @category Internal
    */
@@ -3629,9 +3822,9 @@
       el = document.querySelector(id);
     }
 
-    // 4. Try data-bw_id attribute (for bw.uuid-generated IDs)
-    if (!el) {
-      el = document.querySelector('[data-bw_id="' + id + '"]');
+    // 4. Try class-based lookup for bw_uuid_* tokens (UUID addressing)
+    if (!el && id.indexOf('bw_uuid_') === 0) {
+      el = document.querySelector('.' + id);
     }
 
     // 5. Cache the result for next time
@@ -3646,17 +3839,17 @@
    * Register a DOM element in the node cache under one or more keys.
    *
    * Called internally by `bw.createDOM()`. Registers elements that have
-   * id attributes, data-bw_id attributes, or both.
+   * id attributes, UUID classes, or both.
    *
    * @param {Element} el - DOM element to register
-   * @param {string} [bwId] - data-bw_id value to register under
+   * @param {string} [uuid] - bw_uuid_* class token to register under
    * @category Internal
    */
-  bw._registerNode = function(el, bwId) {
+  bw._registerNode = function(el, uuid) {
     if (!el) return;
-    // Register under data-bw_id
-    if (bwId) {
-      bw._nodeMap[bwId] = el;
+    // Register under UUID class token
+    if (uuid) {
+      bw._nodeMap[uuid] = el;
     }
     // Register under id attribute
     var htmlId = el.getAttribute ? el.getAttribute('id') : null;
@@ -3672,13 +3865,13 @@
    * through bitwrench APIs.
    *
    * @param {Element} el - DOM element to deregister
-   * @param {string} [bwId] - data-bw_id value to remove
+   * @param {string} [uuid] - bw_uuid_* class token to remove
    * @category Internal
    */
-  bw._deregisterNode = function(el, bwId) {
-    // Remove data-bw_id entry
-    if (bwId) {
-      delete bw._nodeMap[bwId];
+  bw._deregisterNode = function(el, uuid) {
+    // Remove UUID class entry
+    if (uuid) {
+      delete bw._nodeMap[uuid];
     }
     // Remove id attribute entry
     var htmlId = el && el.getAttribute ? el.getAttribute('id') : null;
@@ -3687,6 +3880,91 @@
     }
   };
 
+  // ===================================================================================
+  // bw.assignUUID() / bw.getUUID() — Explicit UUID addressing for TACO objects
+  // ===================================================================================
+
+  /**
+   * Marker class for elements with lifecycle hooks (mounted/unmount/render/state).
+   * Used by cleanup() to find lifecycle-managed elements via querySelectorAll('.bw_lc').
+   * @private
+   */
+  var _BW_LC = 'bw_lc';
+
+  /**
+   * 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.
    *
@@ -3736,6 +4014,42 @@
     return { __bw_raw: true, v: String(str) };
   };
 
+  /**
+   * 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.
@@ -3765,15 +4079,6 @@
     // Handle null/undefined
     if (taco == null) return '';
 
-    // Handle ComponentHandle — use its .taco
-    if (taco && taco._bwComponent === true) {
-      var compOptions = Object.assign({}, options);
-      if (!compOptions.state && taco._state) {
-        compOptions.state = taco._state;
-      }
-      return bw.html(taco.taco, compOptions);
-    }
-
     // Handle arrays of TACOs
     if (_isA(taco)) {
       return taco.map(t => bw.html(t, options)).join('');
@@ -3784,24 +4089,6 @@
       return taco.v;
     }
 
-    // Handle bw.when() markers
-    if (taco && taco._bwWhen && options.state) {
-      var whenExpr = taco.expr.replace(/^\$\{|\}$/g, '');
-      var whenVal = options.compile
-        ? bw._resolveTemplate('${' + whenExpr + '}', options.state, true)
-        : bw._evaluatePath(options.state, whenExpr);
-      var branch = whenVal ? taco.branches[0] : (taco.branches[1] || null);
-      return branch ? bw.html(branch, options) : '';
-    }
-
-    // Handle bw.each() markers
-    if (taco && taco._bwEach && options.state) {
-      var eachExpr = taco.expr.replace(/^\$\{|\}$/g, '');
-      var arr = bw._evaluatePath(options.state, eachExpr);
-      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 (!_is(taco, 'object') || !taco.t) {
       var str = options.raw ? String(taco) : bw.escapeHTML(String(taco));
@@ -3865,14 +4152,14 @@
       }
     }
 
-    // Add bw_id as a class if lifecycle hooks present
-    if ((opts.mounted || opts.unmount) && !attrs.class?.includes('bw_id_')) {
-      const id = opts.bw_id || bw.uuid();
+    // Add bw_uuid + bw_lc classes if lifecycle hooks present
+    if ((opts.mounted || opts.unmount) && !_UUID_RE.test(attrs.class || '')) {
+      const uuid = bw.uuid('uuid');
       attrStr = attrStr.replace(/class="([^"]*)"/, (_match, classes) => {
-        return `class="${classes} bw_id_${id}"`.trim();
+        return `class="${classes} ${uuid} ${_BW_LC}"`.trim();
       });
       if (!attrStr.includes('class=')) {
-        attrStr += ` class="bw_id_${id}"`;
+        attrStr += ` class="${uuid} ${_BW_LC}"`;
       }
     }
     
@@ -4000,7 +4287,7 @@
         ? (THEME_PRESETS[theme.toLowerCase()] || null)
         : theme;
       if (themeConfig) {
-        var themeResult = bw.generateTheme('', Object.assign({}, themeConfig, { inject: false }));
+        var themeResult = bw.makeStyles(themeConfig);
         themeCSS = themeResult.css;
       }
     }
@@ -4026,14 +4313,14 @@
     // Combine all CSS
     var allCSS = (themeCSS ? themeCSS + '\n' : '') + css;
 
-    // Body-end script: registry entries + optional loadDefaultStyles
+    // 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.loadDefaultStyles();}');
+      bodyEndParts.push('if(typeof bw!=="undefined"){bw.loadStyles();}');
     }
     if (bodyEndParts.length > 0) {
       bodyEndScript = '<script>\n' + bodyEndParts.join('\n') + '\n</script>';
@@ -4100,11 +4387,6 @@
       return frag;
     }
 
-    // Handle ComponentHandle — extract .taco for DOM creation
-    if (taco && taco._bwComponent === true) {
-      return bw.createDOM(taco.taco, options);
-    }
-
     // Handle text nodes
     if (!_is(taco, 'object') || !taco.t) {
       return document.createTextNode(String(taco));
@@ -4145,24 +4427,19 @@
     }
     
     // Add children, building _bw_refs for fast parent→child access.
-    // Children with data-bw_id or id attributes get local refs on the parent,
+    // Children with id attributes or bw_uuid_* classes get local refs on the parent,
     // so o.render functions can access them without any DOM lookup.
     if (content != null) {
       if (_isA(content)) {
         content.forEach(child => {
           if (child != null) {
-            // Handle ComponentHandle in content arrays (Level 2 children)
-            if (child._bwComponent === true) {
-              child.mount(el);
-              return;
-            }
             var childEl = bw.createDOM(child, options);
             el.appendChild(childEl);
             // Build local refs for addressable children
-            var childBwId = (child && child.a) ? (child.a['data-bw_id'] || child.a.id) : null;
-            if (childBwId) {
+            var childRefId = (child && child.a) ? (child.a.id || bw.getUUID(child)) : null;
+            if (childRefId) {
               if (!el._bw_refs) el._bw_refs = {};
-              el._bw_refs[childBwId] = childEl;
+              el._bw_refs[childRefId] = childEl;
             }
             // Bubble up grandchild refs (flatten one level)
             if (childEl._bw_refs) {
@@ -4178,16 +4455,13 @@
       } 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 (_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;
-        if (childBwId) {
+        var childRefId = content.a ? (content.a.id || bw.getUUID(content)) : null;
+        if (childRefId) {
           if (!el._bw_refs) el._bw_refs = {};
-          el._bw_refs[childBwId] = childEl;
+          el._bw_refs[childRefId] = childEl;
         }
         if (childEl._bw_refs) {
           if (!el._bw_refs) el._bw_refs = {};
@@ -4207,59 +4481,98 @@
       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) {
-      const id = attrs['data-bw_id'] || bw.uuid();
-      el.setAttribute('data-bw_id', id);
+      // Ensure element has a UUID class for identity
+      var uuid = bw.getUUID(el) || bw.uuid('uuid');
+      el.classList.add(uuid);
+      el.classList.add(_BW_LC);
 
-      // Register in node cache under data-bw_id
-      bw._registerNode(el, id);
+      // Register in node cache under UUID class
+      bw._registerNode(el, uuid);
 
       // Store state
       if (opts.state) {
         el._bw_state = opts.state;
       }
 
-      // o.render — first-class render function (replaces mounted boilerplate)
+      // o.render — store the render function for bw.update()
       if (opts.render) {
         el._bw_render = opts.render;
+      }
 
-        if (opts.mounted) {
-          _cw('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
-        }
+      // Determine what to call on mount:
+      // - If o.mounted exists, call it (it can call el._bw_render() for initial render)
+      // - Otherwise if o.render exists, auto-call it as a convenience shorthand
+      var mountFn = opts.mounted || (opts.render ? function(mountEl) {
+        opts.render(mountEl, mountEl._bw_state || {});
+      } : null);
 
-        // Queue initial render (same timing as mounted)
-        if (document.body.contains(el)) {
-          opts.render(el, el._bw_state || {});
-        } else {
-          requestAnimationFrame(() => {
-            if (document.body.contains(el)) {
-              opts.render(el, el._bw_state || {});
-            }
-          });
-        }
-      } else if (opts.mounted) {
-        // Queue mounted callback (legacy pattern)
+      if (mountFn) {
         if (document.body.contains(el)) {
-          opts.mounted(el, el._bw_state || {});
+          mountFn(el, el._bw_state || {});
         } else {
           requestAnimationFrame(() => {
             if (document.body.contains(el)) {
-              opts.mounted(el, el._bw_state || {});
+              mountFn(el, el._bw_state || {});
             }
           });
         }
       }
 
-      // Store unmount callback
+      // Store unmount callback keyed by UUID class
       if (opts.unmount) {
-        bw._unmountCallbacks.set(id, () => {
+        bw._unmountCallbacks.set(uuid, () => {
           opts.unmount(el, el._bw_state || {});
         });
       }
-    } else if (attrs['data-bw_id']) {
-      // Element has explicit data-bw_id but no lifecycle hooks — still register it
-      bw._registerNode(el, attrs['data-bw_id']);
+    }
+
+    // Component handle: attach methods to el.bw namespace
+    if (opts.handle || opts.slots) {
+      if (!el.bw) el.bw = {};
+
+      // Explicit handle methods: fn(el, ...args) -> el.bw.method(...args)
+      if (opts.handle) {
+        for (var hk in opts.handle) {
+          if (_hop.call(opts.handle, hk)) {
+            el.bw[hk] = opts.handle[hk].bind(null, el);
+          }
+        }
+      }
+
+      // Slot declarations: auto-generate setX/getX pairs
+      if (opts.slots) {
+        for (var sk in opts.slots) {
+          if (_hop.call(opts.slots, sk)) {
+            (function(name, selector) {
+              var cap = name.charAt(0).toUpperCase() + name.slice(1);
+              el.bw['set' + cap] = function(value) {
+                var t = el.querySelector(selector);
+                if (!t) return;
+                if (value != null && typeof value === 'object' && value.t) {
+                  t.innerHTML = '';
+                  t.appendChild(bw.createDOM(value));
+                } else {
+                  t.textContent = (value != null) ? String(value) : '';
+                }
+              };
+              el.bw['get' + cap] = function() {
+                var t = el.querySelector(selector);
+                return t ? t.textContent : '';
+              };
+            })(sk, opts.slots[sk]);
+          }
+        }
+      }
     }
 
     return el;
@@ -4306,7 +4619,7 @@
     // the target is the mount point, not the content being replaced)
     const savedState = targetEl._bw_state;
     const savedRender = targetEl._bw_render;
-    const savedBwId = targetEl.getAttribute('data-bw_id');
+    const savedUuid = bw.getUUID(targetEl);
     const savedSubs = targetEl._bw_subs;
 
     // Temporarily remove _bw_subs so cleanup doesn't call them
@@ -4318,10 +4631,9 @@
     // Restore the target's own state/render/subs after cleanup
     if (savedState !== undefined) targetEl._bw_state = savedState;
     if (savedRender) targetEl._bw_render = savedRender;
-    if (savedBwId) {
-      targetEl.setAttribute('data-bw_id', savedBwId);
-      // Re-register mount point in node cache (cleanup deregistered it)
-      bw._registerNode(targetEl, savedBwId);
+    if (savedUuid) {
+      // UUID class stays on element through cleanup; re-register in cache
+      bw._registerNode(targetEl, savedUuid);
     }
     if (savedSubs) targetEl._bw_subs = savedSubs;
 
@@ -4329,25 +4641,11 @@
     targetEl.innerHTML = '';
     
     if (taco != null) {
-      // Handle ComponentHandle (reactive components from bw.component())
-      if (taco._bwComponent === true) {
-        taco.mount(targetEl);
-      }
-      // Handle component handles (objects with element property)
-      else if (taco.element instanceof Element) {
-        targetEl.appendChild(taco.element);
-      }
       // Handle arrays
-      else if (_isA(taco)) {
+      if (_isA(taco)) {
         taco.forEach(t => {
           if (t != null) {
-            if (t._bwComponent === true) {
-              t.mount(targetEl);
-            } else if (t.element instanceof Element) {
-              targetEl.appendChild(t.element);
-            } else {
-              targetEl.appendChild(bw.createDOM(t, options));
-            }
+            targetEl.appendChild(bw.createDOM(t, options));
           }
         });
       }
@@ -4360,240 +4658,80 @@
     return targetEl;
   };
 
+  // Deprecation stubs for removed ComponentHandle APIs
+  bw.compileProps = function() { throw new Error('bw.compileProps() removed in v2.0.19. Use o.handle/o.slots instead.'); };
+  bw.renderComponent = function() { throw new Error('bw.renderComponent() removed in v2.0.19. Use bw.mount() with o.handle/o.slots instead.'); };
+
   /**
-   * Compile props into getter/setter functions for reactive updates.
-   *
-   * Used internally by `bw.renderComponent()`. Creates a proxy-like object
-   * where setting a property triggers `handle.onPropChange()`.
+   * Mount a TACO into a target element and return the created root element.
+   * Like bw.DOM() but returns the root element of the TACO (not the container),
+   * giving direct access to el.bw handle methods.
    *
-   * @param {Object} handle - Component handle
-   * @param {Object} props - Initial props
-   * @returns {Object} Compiled props object with getters/setters
+   * @param {string|Element} target - CSS selector or DOM element
+   * @param {Object} taco - TACO to render
+   * @param {Object} [options] - Mount options
+   * @returns {Element} The created root element
    * @category DOM Generation
-   */
-  bw.compileProps = function(handle, props = {}) {
-    const compiledProps = {};
-    
-    _keys(props).forEach(key => {
-      // Create getter/setter for each prop
-      Object.defineProperty(compiledProps, key, {
-        get() {
-          return handle._props[key];
-        },
-        set(value) {
-          const oldValue = handle._props[key];
-          if (oldValue !== value) {
-            handle._props[key] = value;
-            // Trigger update if prop changed
-            if (handle.onPropChange) {
-              handle.onPropChange(key, value, oldValue);
-            }
-          }
-        },
-        enumerable: true,
-        configurable: true
-      });
-    });
-    
-    return compiledProps;
+   * @example
+   * var el = bw.mount('#app', bw.makeCarousel({ items: slides }));
+   * el.bw.goToSlide(2);
+   * el.bw.next();
+   */
+  bw.mount = function(target, taco, options) {
+    var container = _is(target, 'string') ? bw.$(target)[0] : target;
+    if (!container) {
+      _cw('bw.mount: target not found');
+      return null;
+    }
+    bw.cleanup(container);
+    container.innerHTML = '';
+    var el = bw.createDOM(taco, options || {});
+    container.appendChild(el);
+    return el;
   };
 
   /**
-   * Render a TACO component and return an enhanced handle object.
+   * Clean up a DOM element and all its children by calling unmount callbacks,
+   * removing pub/sub subscriptions, and clearing state/render references.
    *
-   * The handle provides compiled props, state management, child registration,
-   * and a destroy method. Used internally by `bw.createCard()`, `bw.createTable()`, etc.
+   * Called automatically by `bw.DOM()` before re-rendering. Call manually when
+   * removing elements to prevent memory leaks from orphaned callbacks.
    *
-   * @param {Object} taco - TACO object to render
-   * @param {Object} [options] - Render options
-   * @returns {Object} Component handle with element, props, state, update(), destroy()
+   * @param {Element} element - DOM element to clean up
    * @category DOM Generation
+   * @see bw.DOM
+   * @example
+   * var el = document.querySelector('#my-widget');
+   * bw.cleanup(el);   // runs unmount hooks, clears _bw_state, _bw_render
+   * el.remove();       // safe to remove from DOM now
    */
-  bw.renderComponent = function(taco, options = {}) {
-    const element = bw.createDOM(taco, options);
-    
-    // Enhanced handle with prop compilation
-    const handle = {
-      element,
-      taco,
-      _props: { ...taco.a },  // Store props internally
-      _state: taco.o?.state || {},
-      _children: {},  // Store child component references
-      
-      // Get compiled props with getters/setters
-      get props() {
-        if (!this._compiledProps) {
-          this._compiledProps = bw.compileProps(this, this._props);
+  bw.cleanup = function(element) {
+    if (!bw._isBrowser || !element) return;
+
+    // Deregister UUID classes from node cache for non-lifecycle UUID elements
+    var uuidEls = element.querySelectorAll('[class*="bw_uuid_"]');
+    uuidEls.forEach(function(uel) {
+      var m = uel.className && uel.className.match(_UUID_RE);
+      if (m) delete bw._nodeMap[m[0]];
+    });
+
+    // Find all lifecycle-managed elements (have bw_lc marker class)
+    const elements = element.querySelectorAll('.' + _BW_LC);
+
+    elements.forEach(el => {
+      var uuid = bw.getUUID(el);
+
+      if (uuid) {
+        const callback = bw._unmountCallbacks.get(uuid);
+        if (callback) {
+          callback();
+          bw._unmountCallbacks.delete(uuid);
         }
-        return this._compiledProps;
-      },
-      
-      /**
-       * Query all matching elements within this component
-       * @param {string} selector - CSS selector
-       * @returns {NodeList} Matching elements
-       */
-      $(selector) {
-        return this.element.querySelectorAll(selector);
-      },
-      
-      /**
-       * Query the first matching element within this component
-       * @param {string} selector - CSS selector
-       * @returns {Element|null} First matching element or null
-       */
-      $first(selector) {
-        return this.element.querySelector(selector);
-      },
-      
-      /**
-       * Update component with new props and re-render in place
-       * @param {Object} newProps - Properties to merge into current props
-       * @returns {Object} this handle (for chaining)
-       */
-      update(newProps) {
-        // Update internal props
-        Object.assign(this._props, newProps);
-        
-        // Rebuild TACO with new props
-        const newTaco = { ...this.taco, a: { ...this.taco.a, ...newProps } };
-        const newElement = bw.createDOM(newTaco, options);
-        
-        // Replace in DOM
-        this.element.replaceWith(newElement);
-        this.element = newElement;
-        this.taco = newTaco;
-        
-        return this;
-      },
-      
-      /**
-       * Re-render the component from its current TACO, replacing the DOM element
-       * @returns {Object} this handle (for chaining)
-       */
-      render() {
-        const newElement = bw.createDOM(this.taco, options);
-        this.element.replaceWith(newElement);
-        this.element = newElement;
-        return this;
-      },
-      
-      /**
-       * Called when a compiled prop value changes. Override to customize behavior.
-       * Default implementation triggers a full re-render.
-       * @param {string} key - Property name that changed
-       * @param {*} newValue - New property value
-       * @param {*} oldValue - Previous property value
-       */
-      onPropChange(_key, _newValue, _oldValue) {
-        // Auto re-render on prop change by default
-        this.render();
-      },
-      
-      // State management
-      get state() {
-        return this._state;
-      },
-      
-      set state(newState) {
-        this._state = newState;
-        this.render();
-      },
-      
-      /**
-       * Merge state updates and re-render the component
-       * @param {Object} updates - State properties to merge
-       * @returns {Object} this handle (for chaining)
-       */
-      setState(updates) {
-        Object.assign(this._state, updates);
-        this.render();
-        return this;
-      },
-
-      /**
-       * Register a child component under a name for later retrieval
-       * @param {string} name - Child name key
-       * @param {Object} component - Child component handle
-       * @returns {Object} this handle (for chaining)
-       */
-      addChild(name, component) {
-        this._children[name] = component;
-        return this;
-      },
-      
-      /**
-       * Retrieve a registered child component by name
-       * @param {string} name - Child name key
-       * @returns {Object|undefined} Child component handle
-       */
-      getChild(name) {
-        return this._children[name];
-      },
-
-      /**
-       * Destroy this component and all registered children
-       *
-       * Calls destroy() recursively on children, runs bw.cleanup(),
-       * removes the element from DOM, and clears all internal references.
-       */
-      destroy() {
-        // Destroy children first
-        Object.values(this._children).forEach(child => {
-          if (child && child.destroy) child.destroy();
-        });
-        
-        // Clean up this component
-        bw.cleanup(this.element);
-        this.element.remove();
-        
-        // Clear references
-        this._children = {};
-        this._props = {};
-        this._state = {};
-        this._compiledProps = null;
-      }
-    };
-    
-    // Store handle reference on element
-    element._bwHandle = handle;
-    
-    return handle;
-  };
-
-  /**
-   * Clean up a DOM element and all its children by calling unmount callbacks,
-   * removing pub/sub subscriptions, and clearing state/render references.
-   *
-   * Called automatically by `bw.DOM()` before re-rendering. Call manually when
-   * removing elements to prevent memory leaks from orphaned callbacks.
-   *
-   * @param {Element} element - DOM element to clean up
-   * @category DOM Generation
-   * @see bw.DOM
-   * @example
-   * var el = document.querySelector('#my-widget');
-   * bw.cleanup(el);   // runs unmount hooks, clears _bw_state, _bw_render
-   * el.remove();       // safe to remove from DOM now
-   */
-  bw.cleanup = function(element) {
-    if (!bw._isBrowser || !element) return;
-
-    // Find all elements with data-bw_id
-    const elements = element.querySelectorAll('[data-bw_id]');
-
-    elements.forEach(el => {
-      const id = el.getAttribute('data-bw_id');
-      const callback = bw._unmountCallbacks.get(id);
 
-      if (callback) {
-        callback();
-        bw._unmountCallbacks.delete(id);
+        // Deregister from node cache
+        bw._deregisterNode(el, uuid);
       }
 
-      // Deregister from node cache
-      bw._deregisterNode(el, id);
-
       // Clean up pub/sub subscriptions tied to this element
       if (el._bw_subs) {
         el._bw_subs.forEach(function(unsub) { unsub(); });
@@ -4607,16 +4745,18 @@
     });
 
     // Check element itself
-    const id = element.getAttribute('data-bw_id');
-    if (id) {
-      const callback = bw._unmountCallbacks.get(id);
+    var selfUuid = bw.getUUID(element);
+    if (selfUuid) {
+      delete bw._nodeMap[selfUuid];
+
+      const callback = bw._unmountCallbacks.get(selfUuid);
       if (callback) {
         callback();
-        bw._unmountCallbacks.delete(id);
+        bw._unmountCallbacks.delete(selfUuid);
       }
 
       // Deregister from node cache
-      bw._deregisterNode(element, id);
+      bw._deregisterNode(element, selfUuid);
 
       // Clean up pub/sub subscriptions tied to element itself
       if (element._bw_subs) {
@@ -4627,11 +4767,11 @@
       delete element._bw_render;
       delete element._bw_refs;
 
-      // Clean up ComponentHandle back-reference
-      if (element._bwComponentHandle) {
-        element._bwComponentHandle.mounted = false;
-        element._bwComponentHandle.element = null;
-        delete element._bwComponentHandle;
+    } else {
+      // No UUID on element itself, but still check for _bw_subs (from bw.sub())
+      if (element._bw_subs) {
+        element._bw_subs.forEach(function(unsub) { unsub(); });
+        delete element._bw_subs;
       }
     }
   };
@@ -4647,7 +4787,7 @@
    * Calls `el._bw_render(el, state)` and emits `bw:statechange` so other
    * components can react without tight coupling.
    *
-   * @param {string|Element} target - Element ID, data-bw_id, CSS selector, or DOM element
+   * @param {string|Element} target - Element ID, bw_uuid_* class, CSS selector, or DOM element
    * @returns {Element|null} The element, or null if not found / no render function
    * @category State Management
    * @see bw.patch
@@ -4672,7 +4812,7 @@
    * Use `bw.patch()` for lightweight value updates (scores, labels, counters)
    * and `bw.update()` for full structural re-renders.
    *
-   * @param {string|Element} id - Element ID, data-bw_id, CSS selector, or DOM element.
+   * @param {string|Element} id - Element ID, bw_uuid_* class, CSS selector, or DOM element.
    *   Uses node cache for O(1) lookup; falls back to DOM query on cache miss.
    * @param {string|Object} content - New text content, or TACO object to replace children
    * @param {string} [attr] - If provided, sets this attribute instead of content
@@ -4747,7 +4887,7 @@
    * bubble by default so ancestor elements can listen. Use with `bw.on()` for
    * DOM-scoped communication between components.
    *
-   * @param {string|Element} target - Element ID, data-bw_id, CSS selector, or DOM element.
+   * @param {string|Element} target - Element ID, bw_uuid_* class, CSS selector, or DOM element.
    *   Uses node cache for O(1) lookup; falls back to DOM query on cache miss.
    * @param {string} eventName - Event name (will be prefixed with 'bw:')
    * @param {*} [detail] - Data to pass with the event
@@ -4774,7 +4914,7 @@
    * is the first argument so you don't need to destructure `e.detail`.
    * Events bubble, so you can listen on an ancestor element.
    *
-   * @param {string|Element} target - Element ID, data-bw_id, CSS selector, or DOM element.
+   * @param {string|Element} target - Element ID, bw_uuid_* class, CSS selector, or DOM element.
    *   Uses node cache for O(1) lookup; falls back to DOM query on cache miss.
    * @param {string} eventName - Event name (will be prefixed with 'bw:')
    * @param {Function} handler - Called with (detail, event)
@@ -4872,10 +5012,12 @@
     if (el) {
       if (!el._bw_subs) el._bw_subs = [];
       el._bw_subs.push(unsub);
-      // Ensure element has data-bw_id so bw.cleanup() finds it
-      if (!el.getAttribute('data-bw_id')) {
-        var bwId = 'bw_sub_' + id;
-        el.setAttribute('data-bw_id', bwId);
+      // Ensure element has UUID + bw_lc so bw.cleanup() finds it
+      if (!bw.getUUID(el)) {
+        el.classList.add(bw.uuid('uuid'));
+      }
+      if (!el.classList.contains(_BW_LC)) {
+        el.classList.add(_BW_LC);
       }
     }
 
@@ -5082,1102 +5224,61 @@
         }
         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 {
-        // Tier 1: dot-path only
-        val = bw._evaluatePath(state, b.expr);
-      }
-      result += (val == null) ? '' : String(val);
-      lastEnd = b.end;
-    }
-    result += str.slice(lastEnd);
-    return result;
-  };
-
-  /**
-   * Extract top-level state keys that an expression depends on.
-   * @param {string} expr - Expression string
-   * @param {string[]} stateKeys - Declared state keys
-   * @returns {string[]} Matching dependency keys
-   * @private
-   */
-  bw._extractDeps = function(expr, stateKeys) {
-    var deps = [];
-    for (var i = 0; i < stateKeys.length; i++) {
-      var key = stateKeys[i];
-      // Match word boundary: key must be preceded by start/non-word and followed by non-word/end
-      var re = new RegExp('(?:^|[^\\w$.])' + key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '(?:[^\\w$]|$)');
-      if (re.test(expr) || expr === key || expr.indexOf(key + '.') === 0) {
-        deps.push(key);
-      }
-    }
-    return deps;
-  };
-
-  // ===================================================================================
-  // Microtask Batching
-  // ===================================================================================
-
-  bw._dirtyComponents = [];
-  bw._flushScheduled = false;
-
-  /**
-   * Schedule a microtask flush for dirty components.
-   * @private
-   */
-  bw._scheduleFlush = function() {
-    if (bw._flushScheduled) return;
-    bw._flushScheduled = true;
-    if (typeof Promise !== 'undefined') {
-      Promise.resolve().then(bw._doFlush);
-    } else {
-      setTimeout(bw._doFlush, 0);
-    }
-  };
-
-  /**
-   * Flush all dirty components. Deduplicates by _bwId.
-   * @private
-   */
-  bw._doFlush = function() {
-    bw._flushScheduled = false;
-    var queue = bw._dirtyComponents.slice();
-    bw._dirtyComponents = [];
-    // Deduplicate by _bwId
-    var seen = {};
-    for (var i = 0; i < queue.length; i++) {
-      var comp = queue[i];
-      if (!seen[comp._bwId]) {
-        seen[comp._bwId] = true;
-        comp._flush();
-      }
-    }
-  };
-
-  /**
-   * Synchronous flush for testing and imperative code.
-   * Forces immediate re-render of all dirty components.
-   *
-   * @category Component
-   */
-  bw.flush = function() {
-    bw._doFlush();
-  };
-
-  // ===================================================================================
-  // ComponentHandle — unified reactive component (Phase 1)
-  // ===================================================================================
-
-  /**
-   * ComponentHandle constructor.
-   * Wraps a TACO definition with reactive state, lifecycle hooks,
-   * template bindings, and named actions.
-   *
-   * @param {Object} taco - TACO definition {t, a, c, o}
-   * @constructor
-   * @private
-   */
-  function ComponentHandle(taco) {
-    this._bwComponent = true;         // duck-type marker
-    this._bwId = bw.uuid('comp');
-    this.taco = taco;
-    this.element = null;
-    this.mounted = false;
-
-    var o = taco.o || {};
-    // Copy initial state
-    this._state = {};
-    if (o.state) {
-      for (var k in o.state) {
-        if (_hop.call(o.state, k)) {
-          this._state[k] = o.state[k];
-        }
-      }
-    }
-    // Copy actions
-    this._actions = {};
-    if (o.actions) {
-      for (var k2 in o.actions) {
-        if (_hop.call(o.actions, k2)) {
-          this._actions[k2] = o.actions[k2];
-        }
-      }
-    }
-    // Promote o.methods to handle API (MFC/Qt pattern: component owns its methods)
-    this._methods = {};
-    if (o.methods) {
-      var self = this;
-      for (var k3 in o.methods) {
-        if (_hop.call(o.methods, k3)) {
-          this._methods[k3] = o.methods[k3];
-          (function(methodName, methodFn) {
-            self[methodName] = function() {
-              var args = [self].concat(Array.prototype.slice.call(arguments));
-              return methodFn.apply(null, args);
-            };
-          })(k3, o.methods[k3]);
-        }
-      }
-    }
-    // User tag for addressing via bw.message()
-    this._userTag = null;
-    // Lifecycle hooks
-    this._hooks = {
-      willMount: o.willMount || null,
-      mounted: o.mounted || null,
-      willUpdate: o.willUpdate || null,
-      onUpdate: o.onUpdate || null,
-      unmount: o.unmount || null,
-      willDestroy: o.willDestroy || null
-    };
-    // Binding tracking
-    this._bindings = [];
-    this._dirtyKeys = {};
-    this._scheduled = false;
-    this._subs = [];
-    this._eventListeners = [];
-    this._registeredActions = [];
-    this._prevValues = {};
-    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')`
-   */
-  _chp.get = function(key) {
-    return bw._evaluatePath(this._state, key);
-  };
-
-  /**
-   * Set a state value. Dot-path supported. Schedules re-render.
-   * @param {string} key - State key (dot-path)
-   * @param {*} value - New value
-   * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
-   */
-  _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 (!_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]];
-    }
-    obj[parts[parts.length - 1]] = value;
-    // Mark top-level key dirty
-    this._dirtyKeys[parts[0]] = true;
-    if (this.mounted) {
-      if (opts && opts.sync) {
-        this._flush();
-      } else {
-        this._scheduleDirty();
-      }
-    }
-  };
-
-  /**
-   * Get a shallow clone of the full state.
-   */
-  _chp.getState = function() {
-    var clone = {};
-    for (var k in this._state) {
-      if (_hop.call(this._state, k)) {
-        clone[k] = this._state[k];
-      }
-    }
-    return clone;
-  };
-
-  /**
-   * Merge multiple state keys. Schedules re-render.
-   * @param {Object} updates - Key-value pairs to merge
-   * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
-   */
-  _chp.setState = function(updates, opts) {
-    for (var k in updates) {
-      if (_hop.call(updates, k)) {
-        this._state[k] = updates[k];
-        this._dirtyKeys[k] = true;
-      }
-    }
-    if (this.mounted) {
-      if (opts && opts.sync) {
-        this._flush();
-      } else {
-        this._scheduleDirty();
-      }
-    }
-  };
-
-  /**
-   * Push a value onto an array in state. Clones the array.
-   */
-  _chp.push = function(key, val) {
-    var arr = this.get(key);
-    var newArr = _isA(arr) ? arr.slice() : [];
-    newArr.push(val);
-    this.set(key, newArr);
-  };
-
-  /**
-   * Splice an array in state. Clones the array.
-   */
-  _chp.splice = function(key, start, deleteCount) {
-    var arr = this.get(key);
-    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);
-  };
-
-  // ── Scheduling ──
-
-  _chp._scheduleDirty = function() {
-    if (!this._scheduled) {
-      this._scheduled = true;
-      bw._dirtyComponents.push(this);
-      bw._scheduleFlush();
-    }
-  };
-
-  // ── Binding Compilation ──
-
-  /**
-   * Walk the TACO tree and extract ${expr} bindings.
-   * Creates binding descriptors with refIds for targeted DOM updates.
-   * @private
-   */
-  _chp._compileBindings = function() {
-    this._bindings = [];
-    this._refCounter = 0;
-    var stateKeys = _keys(this._state);
-    var self = this;
-
-    function walkTaco(taco, path) {
-      if (!_is(taco, 'object') || !taco.t) return taco;
-
-      // Check content for bindings
-      if (_is(taco.c, 'string') && taco.c.indexOf('${') >= 0) {
-        var refId = 'bw_ref_' + self._refCounter++;
-        var parsed = bw._parseBindings(taco.c);
-        var deps = [];
-        for (var j = 0; j < parsed.length; j++) {
-          deps = deps.concat(bw._extractDeps(parsed[j].expr, stateKeys));
-        }
-        self._bindings.push({
-          expr: taco.c,
-          type: 'content',
-          refId: refId,
-          deps: deps,
-          template: taco.c
-        });
-        // Inject data-bw_ref on the TACO for createDOM to pick up
-        if (!taco.a) taco.a = {};
-        taco.a['data-bw_ref'] = refId;
-      }
-
-      // Check attributes for bindings
-      if (taco.a) {
-        for (var attrName in taco.a) {
-          if (!_hop.call(taco.a, attrName)) continue;
-          if (attrName === 'data-bw_ref') continue;
-          var attrVal = taco.a[attrName];
-          if (_is(attrVal, 'string') && attrVal.indexOf('${') >= 0) {
-            var refId2 = 'bw_ref_' + self._refCounter++;
-            var parsed2 = bw._parseBindings(attrVal);
-            var deps2 = [];
-            for (var j2 = 0; j2 < parsed2.length; j2++) {
-              deps2 = deps2.concat(bw._extractDeps(parsed2[j2].expr, stateKeys));
-            }
-            self._bindings.push({
-              expr: attrVal,
-              type: 'attribute',
-              attrName: attrName,
-              refId: refId2,
-              deps: deps2,
-              template: attrVal
-            });
-            if (!taco.a) taco.a = {};
-            taco.a['data-bw_ref'] = taco.a['data-bw_ref'] || refId2;
-            // If multiple attribute bindings on same element, store additional marker
-            if (taco.a['data-bw_ref'] !== refId2) {
-              taco.a['data-bw_ref_' + attrName] = refId2;
-            }
-          }
-        }
-      }
-
-      // Recurse into children
-      if (_isA(taco.c)) {
-        for (var i = 0; i < taco.c.length; i++) {
-          // 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
-          if (taco.c[i] && taco.c[i]._bwWhen) {
-            var whenRefId = 'bw_ref_' + self._refCounter++;
-            var whenDeps = bw._extractDeps(taco.c[i].expr.replace(/^\$\{|\}$/g, ''), stateKeys);
-            self._bindings.push({
-              expr: taco.c[i].expr,
-              type: 'structural',
-              subtype: 'when',
-              refId: whenRefId,
-              deps: whenDeps,
-              branches: taco.c[i].branches,
-              index: i,
-              parentPath: path
-            });
-            taco.c[i]._refId = whenRefId;
-          }
-          if (taco.c[i] && taco.c[i]._bwEach) {
-            var eachRefId = 'bw_ref_' + self._refCounter++;
-            var eachDeps = bw._extractDeps(taco.c[i].expr.replace(/^\$\{|\}$/g, ''), stateKeys);
-            self._bindings.push({
-              expr: taco.c[i].expr,
-              type: 'structural',
-              subtype: 'each',
-              refId: eachRefId,
-              deps: eachDeps,
-              factory: taco.c[i].factory,
-              index: i,
-              parentPath: path
-            });
-            taco.c[i]._refId = eachRefId;
-          }
-        }
-      } else if (_is(taco.c, 'object') && taco.c.t) {
-        walkTaco(taco.c, path.concat(0));
-      }
-
-      return taco;
-    }
-
-    walkTaco(this.taco, []);
-  };
-
-  // ── DOM Reference Collection ──
-
-  /**
-   * Build ref map from the live DOM after createDOM.
-   * @private
-   */
-  _chp._collectRefs = function() {
-    this._bw_refs = {};
-    if (!this.element) return;
-    var els = this.element.querySelectorAll('[data-bw_ref]');
-    for (var i = 0; i < els.length; i++) {
-      this._bw_refs[els[i].getAttribute('data-bw_ref')] = els[i];
-    }
-    // Also check root element
-    var rootRef = this.element.getAttribute && this.element.getAttribute('data-bw_ref');
-    if (rootRef) {
-      this._bw_refs[rootRef] = this.element;
-    }
-  };
-
-  // ── Lifecycle ──
-
-  /**
-   * Mount the component into a parent DOM element.
-   * Creates DOM, compiles bindings, registers actions, and calls lifecycle hooks.
-   * @param {Element} parentEl - DOM element to mount into
-   */
-  _chp.mount = function(parentEl) {
-    // willMount hook
-    if (this._hooks.willMount) this._hooks.willMount(this);
-
-    // Save original TACO for re-renders (structural changes clone from this)
-    if (!this._originalTaco) {
-      this._originalTaco = this.taco;
-    }
-
-    // Deep-clone TACO so binding annotations don't mutate original.
-    // Custom clone to preserve _bwWhen/_bwEach markers and their factory functions.
-    this.taco = this._deepCloneTaco(this._originalTaco);
-
-    // Compile bindings (annotates TACO with data-bw_ref attributes)
-    this._compileBindings();
-
-    // Prepare TACO: resolve initial binding values, evaluate when/each
-    this._prepareTaco(this.taco);
-
-    // Register named actions in function registry
-    var self = this;
-    for (var actionName in this._actions) {
-      if (_hop.call(this._actions, actionName)) {
-        var registeredName = this._bwId + '_' + actionName;
-        (function(aName) {
-          bw.funcRegister(function(evt) {
-            self._actions[aName](self, evt);
-          }, registeredName);
-        })(actionName);
-        this._registeredActions.push(registeredName);
-      }
-    }
-
-    // Wire action names in onclick etc. to dispatch strings
-    this._wireActions(this.taco);
-
-    // Create DOM (strip o before createDOM to prevent double lifecycle)
-    var tacoForDOM = this._tacoForDOM(this.taco);
-    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);
-    }
-
-    // Append to parent
-    parentEl.appendChild(this.element);
-
-    // Collect refs from live DOM
-    this._collectRefs();
-
-    // Resolve initial bindings and apply to DOM
-    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) {
-        this._hooks.mounted(this.element, this.getState());
-      } else {
-        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
-   */
-  _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) {
-          var exprStr = child.expr.replace(/^\$\{|\}$/g, '');
-          var val;
-          if (this._compile) {
-            try {
-              val = (new Function('state', 'with(state){return (' + exprStr + ');}'))(this._state);
-            } catch(e) { val = false; }
-          } else {
-            val = bw._evaluatePath(this._state, exprStr);
-          }
-          var branch = val ? child.branches[0] : (child.branches[1] || null);
-          if (branch) {
-            // Wrap in a container so we can track it
-            taco.c[i] = { t: 'span', a: { 'data-bw_when': child._refId, style: 'display:contents' }, c: branch };
-          } else {
-            taco.c[i] = { t: 'span', a: { 'data-bw_when': child._refId, style: 'display:contents' }, c: '' };
-          }
-        }
-        if (child && child._bwEach) {
-          var eachExprStr = child.expr.replace(/^\$\{|\}$/g, '');
-          var arr = bw._evaluatePath(this._state, eachExprStr);
-          var items = [];
-          if (_isA(arr)) {
-            for (var j = 0; j < arr.length; j++) {
-              items.push(child.factory(arr[j], j));
-            }
-          }
-          taco.c[i] = { t: 'span', a: { 'data-bw_each': child._refId, style: 'display:contents' }, c: items };
-        }
-        if (_is(taco.c[i], 'object') && taco.c[i].t) {
-          this._prepareTaco(taco.c[i]);
-        }
-      }
-    } else if (_is(taco.c, 'object') && taco.c.t) {
-      this._prepareTaco(taco.c);
-    }
-  };
-
-  /**
-   * Wire action name strings (in onclick etc.) to dispatch function calls.
-   * @private
-   */
-  _chp._wireActions = function(taco) {
-    if (!_is(taco, 'object') || !taco.t) return;
-    if (taco.a) {
-      for (var key in taco.a) {
-        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;
-            // Replace string with actual function for createDOM event binding
-            (function(rName) {
-              taco.a[key] = function(evt) {
-                bw.funcGetById(rName)(evt);
-              };
-            })(registeredName);
-          }
-        }
-      }
-    }
-    if (_isA(taco.c)) {
-      for (var i = 0; i < taco.c.length; i++) {
-        this._wireActions(taco.c[i]);
-      }
-    } else if (_is(taco.c, 'object') && taco.c.t) {
-      this._wireActions(taco.c);
-    }
-  };
-
-  /**
-   * Deep-clone a TACO tree, preserving _bwWhen/_bwEach markers and their factories.
-   * @private
-   */
-  _chp._deepCloneTaco = function(taco) {
-    if (taco == null) return taco;
-    // Preserve _bwWhen / _bwEach markers (contain functions)
-    if (taco._bwWhen) {
-      return { _bwWhen: true, expr: taco.expr, branches: [
-        this._deepCloneTaco(taco.branches[0]),
-        taco.branches[1] ? this._deepCloneTaco(taco.branches[1]) : null
-      ], _refId: taco._refId };
-    }
-    if (taco._bwEach) {
-      return { _bwEach: true, expr: taco.expr, factory: taco.factory, _refId: taco._refId };
-    }
-    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 (_hop.call(taco.a, k)) result.a[k] = taco.a[k];
-      }
-    }
-    if (taco.c != null) {
-      if (_isA(taco.c)) {
-        result.c = taco.c.map(function(child) { return this._deepCloneTaco(child); }.bind(this));
-      } else if (_is(taco.c, 'object')) {
-        result.c = this._deepCloneTaco(taco.c);
-      } else {
-        result.c = taco.c;
-      }
-    }
-    if (taco.o) result.o = taco.o; // Keep o reference (not deep-cloned; hooks are functions)
-    return result;
-  };
-
-  /**
-   * Create a copy of TACO suitable for createDOM (strips o to prevent double lifecycle).
-   * @private
-   */
-  _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 (_isA(taco.c)) {
-        result.c = taco.c.map(function(child) { return this._tacoForDOM(child); }.bind(this));
-      } 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.
-   */
-  _chp.unmount = function() {
-    if (!this.mounted) return;
-
-    // unmount hook
-    if (this._hooks.unmount) {
-      this._hooks.unmount(this);
-    }
-
-    // Remove DOM event listeners
-    for (var i = 0; i < this._eventListeners.length; i++) {
-      var l = this._eventListeners[i];
-      if (this.element) {
-        this.element.removeEventListener(l.event, l.handler);
-      }
-    }
-    this._eventListeners = [];
-
-    // Unsubscribe pub/sub
-    for (var j = 0; j < this._subs.length; j++) {
-      this._subs[j]();
-    }
-    this._subs = [];
-
-    // Remove from DOM
-    if (this.element && this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
-
-    this.mounted = false;
-    // State preserved — can re-mount
-  };
-
-  /**
-   * Destroy: unmount + clear state + unregister actions.
-   */
-  _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
-    for (var i = 0; i < this._registeredActions.length; i++) {
-      bw.funcUnregister(this._registeredActions[i]);
-    }
-    this._registeredActions = [];
-
-    // Clear state
-    this._state = {};
-    this._bindings = [];
-    this._bw_refs = {};
-    this._prevValues = {};
-    this._dirtyKeys = {};
-    if (this.element) {
-      delete this.element._bwComponentHandle;
-      this.element = null;
-    }
-  };
-
-  // ── Flush & Binding Resolution ──
-
-  /**
-   * Flush dirty state: resolve changed bindings and apply to DOM.
-   * @private
-   */
-  _chp._flush = function() {
-    this._scheduled = false;
-    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);
-    }
-
-    // Check if any structural bindings are affected
-    var needsFullRender = false;
-    for (var i = 0; i < this._bindings.length; i++) {
-      var b = this._bindings[i];
-      if (b.type === 'structural') {
-        for (var j = 0; j < b.deps.length; j++) {
-          if (changedKeys.indexOf(b.deps[j]) >= 0) {
-            needsFullRender = true;
-            break;
-          }
-        }
-        if (needsFullRender) break;
-      }
-    }
-
-    if (needsFullRender) {
-      this._render();
-    } else {
-      var patches = this._resolveBindings(changedKeys);
-      this._applyPatches(patches);
-    }
-
-    // onUpdate hook
-    if (this._hooks.onUpdate) {
-      this._hooks.onUpdate(this, changedKeys);
-    }
-  };
-
-  /**
-   * Resolve bindings whose deps intersect with changedKeys.
-   * Returns list of patches to apply.
-   * @private
-   */
-  _chp._resolveBindings = function(changedKeys) {
-    var patches = [];
-    for (var i = 0; i < this._bindings.length; i++) {
-      var b = this._bindings[i];
-      if (b.type === 'structural') continue;
-
-      // Check if any dep matches
-      var affected = false;
-      for (var j = 0; j < b.deps.length; j++) {
-        if (changedKeys.indexOf(b.deps[j]) >= 0) {
-          affected = true;
-          break;
-        }
-      }
-      if (!affected) continue;
-
-      // Evaluate
-      var newVal = bw._resolveTemplate(b.template, this._state, this._compile);
-      var prevKey = b.refId + '_' + (b.attrName || 'content');
-      if (this._prevValues[prevKey] !== newVal) {
-        this._prevValues[prevKey] = newVal;
-        patches.push({
-          refId: b.refId,
-          type: b.type,
-          attrName: b.attrName,
-          value: newVal
-        });
-      }
-    }
-    return patches;
-  };
-
-  /**
-   * Apply patches to DOM.
-   * @private
-   */
-  _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) {
-        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') {
-        if (p.attrName === 'class') {
-          el.className = p.value;
-        } else {
-          el.setAttribute(p.attrName, p.value);
-        }
-      }
-    }
-  };
-
-  /**
-   * Resolve all bindings and apply (used for initial render).
-   * @private
-   */
-  _chp._resolveAndApplyAll = function() {
-    var patches = [];
-    for (var i = 0; i < this._bindings.length; i++) {
-      var b = this._bindings[i];
-      if (b.type === 'structural') continue;
-
-      var newVal = bw._resolveTemplate(b.template, this._state, this._compile);
-      var prevKey = b.refId + '_' + (b.attrName || 'content');
-      this._prevValues[prevKey] = newVal;
-      patches.push({
-        refId: b.refId,
-        type: b.type,
-        attrName: b.attrName,
-        value: newVal
-      });
-    }
-    this._applyPatches(patches);
-  };
-
-  /**
-   * Full re-render for structural changes (when/each branch switches).
-   * @private
-   */
-  _chp._render = function() {
-    if (!this.element || !this.element.parentNode) return;
-    var parent = this.element.parentNode;
-    var nextSibling = this.element.nextSibling;
-
-    // Remove old DOM
-    parent.removeChild(this.element);
-
-    // Re-prepare TACO with current state (deep clone preserving functions)
-    this.taco = this._deepCloneTaco(this._originalTaco || this.taco);
-
-    // Re-compile bindings and prepare
-    this._compileBindings();
-    this._prepareTaco(this.taco);
-    this._wireActions(this.taco);
-
-    var tacoForDOM = this._tacoForDOM(this.taco);
-    this.element = bw.createDOM(tacoForDOM);
-    this.element._bwComponentHandle = this;
-    this.element.setAttribute('data-bw_comp_id', this._bwId);
-
-    // Re-insert at same position
-    if (nextSibling) {
-      parent.insertBefore(this.element, nextSibling);
-    } else {
-      parent.appendChild(this.element);
-    }
-
-    // Re-collect refs and apply all bindings
-    this._collectRefs();
-    this._resolveAndApplyAll();
-  };
-
-  // ── Event & Pub/Sub Methods ──
-
-  /**
-   * Add a DOM event listener on the component's root element.
-   * @param {string} event - Event name (e.g., 'click')
-   * @param {Function} handler - Event handler
-   */
-  _chp.on = function(event, handler) {
-    if (this.element) {
-      this.element.addEventListener(event, handler);
-    }
-    this._eventListeners.push({ event: event, handler: handler });
-  };
-
-  /**
-   * Remove a DOM event listener.
-   * @param {string} event - Event name
-   * @param {Function} handler - Handler to remove
-   */
-  _chp.off = function(event, handler) {
-    if (this.element) {
-      this.element.removeEventListener(event, handler);
-    }
-    this._eventListeners = this._eventListeners.filter(function(l) {
-      return !(l.event === event && l.handler === handler);
-    });
-  };
-
-  /**
-   * Subscribe to a pub/sub topic. Lifecycle-tied: auto-unsubs on destroy.
-   * @param {string} topic - Topic name
-   * @param {Function} handler - Handler function
-   * @returns {Function} Unsubscribe function
-   */
-  _chp.sub = function(topic, handler) {
-    var unsub = bw.sub(topic, handler);
-    this._subs.push(unsub);
-    return unsub;
-  };
-
-  /**
-   * Call a named action.
-   * @param {string} name - Action name
-   * @param {...*} args - Arguments passed after comp
-   */
-  _chp.action = function(name) {
-    var fn = this._actions[name];
-    if (!fn) {
-      _cw('ComponentHandle.action: unknown action "' + name + '"');
-      return;
-    }
-    var args = [this].concat(Array.prototype.slice.call(arguments, 1));
-    return fn.apply(null, args);
-  };
-
-  /**
-   * querySelector within the component's DOM.
-   * @param {string} sel - CSS selector
-   * @returns {Element|null}
-   */
-  _chp.select = function(sel) {
-    return this.element ? this.element.querySelector(sel) : null;
-  };
-
-  /**
-   * querySelectorAll within the component's DOM.
-   * @param {string} sel - CSS selector
-   * @returns {Element[]}
-   */
-  _chp.selectAll = function(sel) {
-    if (!this.element) return [];
-    return Array.prototype.slice.call(this.element.querySelectorAll(sel));
-  };
-
-  /**
-   * Tag this component with a user-defined ID for addressing via bw.message().
-   * The tag is added as a CSS class on the root element (DOM IS the registry).
-   * @param {string} tag - User-defined identifier (e.g. 'dashboard_prod_east')
-   * @returns {ComponentHandle} this (for chaining)
-   */
-  _chp.userTag = function(tag) {
-    this._userTag = tag;
-    if (this.element) {
-      this.element.classList.add(tag);
+        } catch (e) {
+          if (bw.debug) _cw('bw.debug: _resolveTemplate — Tier 2 eval failed for "${' + b.expr + '}":', e.message);
+          val = '';
+        }
+      } else {
+        // Tier 1: dot-path only
+        val = bw._evaluatePath(state, b.expr);
+      }
+      result += (val == null) ? '' : String(val);
+      lastEnd = b.end;
     }
-    return this;
+    result += str.slice(lastEnd);
+    return result;
   };
 
-  // Expose ComponentHandle on bw (for testing and advanced use)
-  bw._ComponentHandle = ComponentHandle;
-
   // ===================================================================================
-  // Control Flow Helpers
+  // Deprecation stubs for removed ComponentHandle APIs (v2.0.19)
   // ===================================================================================
 
-  /**
-   * Conditional rendering helper.
-   * Returns a marker object that ComponentHandle detects during binding compilation.
-   * In static contexts (bw.html with state), evaluates immediately.
-   *
-   * @param {string} expr - Expression string like '${loggedIn}'
-   * @param {Object} tacoTrue - TACO to render when truthy
-   * @param {Object} [tacoFalse] - TACO to render when falsy
-   * @returns {Object} Marker object with _bwWhen flag
-   * @category Component
-   */
-  bw.when = function(expr, tacoTrue, tacoFalse) {
-    return { _bwWhen: true, expr: expr, branches: [tacoTrue, tacoFalse || null] };
-  };
+  bw._extractDeps = undefined;
+  bw._dirtyComponents = undefined;
+  bw._flushScheduled = undefined;
+  bw._scheduleFlush = undefined;
+  bw._doFlush = undefined;
+  bw._ComponentHandle = undefined;
 
   /**
-   * List rendering helper.
-   * Returns a marker object that ComponentHandle detects during binding compilation.
-   *
-   * @param {string} expr - Expression string like '${items}'
-   * @param {Function} fn - Factory function(item, index) returning TACO
-   * @returns {Object} Marker object with _bwEach flag
+   * No-op flush (ComponentHandle removed in v2.0.19).
+   * Kept as no-op for backward compatibility.
    * @category Component
    */
-  bw.each = function(expr, fn) {
-    return { _bwEach: true, expr: expr, factory: fn };
-  };
+  bw.flush = function() {};
 
-  // ===================================================================================
-  // bw.component() — Factory for ComponentHandle
-  // ===================================================================================
 
-  /**
-   * Create a ComponentHandle from a TACO definition.
-   * The returned handle has .get(), .set(), .mount(), .destroy(), etc.
-   *
-   * @param {Object} taco - TACO definition with {t, a, c, o}
-   * @returns {ComponentHandle} Reactive component handle
-   * @category Component
-   * @see bw.DOM
-   * @example
-   * var counter = bw.component({
-   *   t: 'div', c: [{ t: 'h3', c: 'Count: ${count}' }],
-   *   o: { state: { count: 0 } }
-   * });
-   * bw.DOM('#app', counter);
-   * counter.set('count', 42); // DOM auto-updates
-   */
-  bw.component = function(taco) {
-    return new ComponentHandle(taco);
-  };
+  bw.when = function() { throw new Error('bw.when() removed in v2.0.19. Use conditional logic in o.render instead.'); };
+  bw.each = function() { throw new Error('bw.each() removed in v2.0.19. Use array mapping in o.render instead.'); };
+  bw.component = function() { throw new Error('bw.component() removed in v2.0.19. Use o.handle/o.slots on TACO options instead.'); };
+
 
   // ===================================================================================
   // bw.message() — SendMessage() for the web
   // ===================================================================================
 
   /**
-   * Dispatch a message to a component by UUID or user tag.
-   * Finds the component's DOM element, looks up its ComponentHandle,
-   * and calls the named method. This is the bitwrench equivalent of
-   * Win32 SendMessage(hwnd, msg, wParam, lParam).
+   * Dispatch a message to a component by UUID, CSS class, or selector.
+   * Finds the element, looks up el.bw, 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} action - Method name to call on the component
+   * @param {string} target - Component UUID (bw_uuid_*), CSS class, or selector
+   * @param {string} action - Method name to call on el.bw
    * @param {*} data - Data to pass to the method
    * @returns {boolean} True if message was dispatched successfully
    * @category Component
    * @example
-   * // Tag a component
-   * myDash.userTag('dashboard_prod');
-   * // Dispatch locally
-   * bw.message('dashboard_prod', 'addAlert', { severity: 'warning', text: 'CPU spike' });
+   * bw.message('my_carousel', 'goToSlide', 2);
    * // Or from SSE handler:
    * es.onmessage = function(e) {
    *   var msg = JSON.parse(e.data);
@@ -6185,75 +5286,35 @@
    * };
    */
   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) {
-      el = bw.$('.' + target)[0];
-    }
-    if (!el || !el._bwComponentHandle) return false;
-    var comp = el._bwComponentHandle;
-    if (!_is(comp[action], 'function')) {
-      _cw('bw.message: unknown action "' + action + '" on component ' + target);
+    var el = bw._el(target);
+    if (!el) el = bw.$('.' + target)[0];
+    if (!el || !el.bw || typeof el.bw[action] !== 'function') {
+      _cw('bw.message: no handle method "' + action + '" on ' + target);
       return false;
     }
-    comp[action](data);
+    el.bw[action](data);
     return true;
   };
 
   // ===================================================================================
-  // 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(selector) {
-      var el = bw._el(selector);
-      if (el) el.scrollTop = el.scrollHeight;
-    },
-    focus: function(selector) {
-      var el = bw._el(selector);
-      if (el && _is(el.focus, 'function')) el.focus();
-    },
-    download: function(filename, content, mimeType) {
-      if (typeof document === 'undefined') return;
-      var blob = new Blob([content], { type: mimeType || 'text/plain' });
-      var a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(a.href);
-    },
-    clipboard: function(text) {
-      if (typeof navigator !== 'undefined' && navigator.clipboard) {
-        navigator.clipboard.writeText(text);
-      }
-    },
-    redirect: function(url) {
-      if (typeof window !== 'undefined') window.location.href = url;
-    },
-    log: function() {
-      console.log.apply(console, arguments);
-    }
-  };
-
   /**
    * Parse a bwserve protocol message string, supporting both strict JSON
    * and r-prefixed relaxed JSON (single-quoted strings, trailing commas).
@@ -6268,9 +5329,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);
@@ -6355,10 +5416,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:
@@ -6367,9 +5428,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;
@@ -6403,7 +5464,7 @@
       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;
 
@@ -6422,7 +5483,7 @@
 
     } else if (type === 'call') {
       if (!msg.name) return false;
-      var fn = bw._clientFunctions[msg.name] || bw._builtinClientFunctions[msg.name];
+      var fn = bw._clientFunctions[msg.name];
       if (!_is(fn, 'function')) return false;
       try {
         var args = _isA(msg.args) ? msg.args : [];
@@ -6451,271 +5512,35 @@
     return false;
   };
 
-  /**
-   * Connect to a bwserve SSE endpoint and apply protocol messages automatically.
-   *
-   * Returns a connection object with sendAction(), on(), and close() methods.
-   *
-   * @param {string} url - SSE endpoint URL (e.g., '/__bw/events/client-1')
-   * @param {Object} [opts] - Connection options
-   * @param {string} [opts.transport='sse'] - Transport type: 'sse' (default) or 'poll'
-   * @param {number} [opts.interval=2000] - Poll interval in ms (only for 'poll' transport)
-   * @param {string} [opts.actionUrl] - POST endpoint for actions (default: derived from url)
-   * @param {boolean} [opts.reconnect=true] - Auto-reconnect on disconnect
-   * @param {boolean} [opts.allowExec=false] - Enable exec message type (arbitrary JS execution)
-   * @param {Function} [opts.onStatus] - Status callback: 'connecting'|'connected'|'disconnected'
-   * @param {Function} [opts.onMessage] - Raw message callback (before clientApply)
-   * @returns {Object} Connection object { sendAction, on, close, status }
-   * @category Server
-   */
-  bw.clientConnect = function(url, opts) {
-    opts = opts || {};
-    var transport = opts.transport || 'sse';
-    var actionUrl = opts.actionUrl || url.replace(/\/events\//, '/action/');
-    var reconnect = opts.reconnect !== false;
-    var onStatus = opts.onStatus || function() {};
-    var onMessage = opts.onMessage || null;
-    var handlers = {};
-    // Set the global allowExec flag from connection options
-    bw._allowExec = !!opts.allowExec;
-    var conn = {
-      status: 'connecting',
-      _es: null,
-      _pollTimer: null
-    };
-
-    function setStatus(s) {
-      conn.status = s;
-      onStatus(s);
-    }
-
-    function handleMessage(data) {
-      try {
-        var msg = _is(data, 'string') ? bw.clientParse(data) : data;
-        if (onMessage) onMessage(msg);
-        if (handlers.message) handlers.message(msg);
-        bw.clientApply(msg);
-      } catch (e) {
-        if (handlers.error) handlers.error(e);
-      }
-    }
-
-    if (transport === 'sse' && typeof EventSource !== 'undefined') {
-      setStatus('connecting');
-      var es = new EventSource(url);
-      conn._es = es;
-
-      es.onopen = function() {
-        setStatus('connected');
-        if (handlers.open) handlers.open();
-      };
-
-      es.onmessage = function(e) {
-        handleMessage(e.data);
-      };
-
-      es.onerror = function() {
-        if (conn.status === 'connected') {
-          setStatus('disconnected');
-        }
-        if (handlers.error) handlers.error(new Error('SSE connection error'));
-        if (!reconnect) {
-          es.close();
-        }
-        // EventSource auto-reconnects by default when reconnect=true
-      };
-    } else if (transport === 'poll') {
-      var interval = opts.interval || 2000;
-      setStatus('connected');
-      conn._pollTimer = setInterval(function() {
-        fetch(url).then(function(r) { return r.json(); }).then(function(msgs) {
-          if (_isA(msgs)) {
-            msgs.forEach(handleMessage);
-          } else if (msgs && msgs.type) {
-            handleMessage(msgs);
-          }
-        }).catch(function(e) {
-          if (handlers.error) handlers.error(e);
-        });
-      }, interval);
-    }
-
-    /**
-     * Send an action to the server via POST.
-     * @param {string} action - Action name
-     * @param {Object} [data] - Action payload
-     */
-    conn.sendAction = function(action, data) {
-      var body = JSON.stringify({ type: 'action', action: action, data: data || {} });
-      fetch(actionUrl, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: body
-      }).catch(function(e) {
-        if (handlers.error) handlers.error(e);
-      });
-    };
-
-    /**
-     * Register an event handler.
-     * @param {string} event - 'open'|'message'|'error'|'close'
-     * @param {Function} handler
-     */
-    conn.on = function(event, handler) {
-      handlers[event] = handler;
-      return conn;
-    };
-
-    /**
-     * Close the connection.
-     */
-    conn.close = function() {
-      if (conn._es) {
-        conn._es.close();
-        conn._es = null;
-      }
-      if (conn._pollTimer) {
-        clearInterval(conn._pollTimer);
-        conn._pollTimer = null;
-      }
-      setStatus('disconnected');
-      if (handlers.close) handlers.close();
-    };
-
-    return conn;
-  };
 
   // ===================================================================================
   // bw.inspect() — Debug utility
   // ===================================================================================
 
   /**
-   * Inspect a component's state, bindings, methods, and metadata.
-   * Works with DOM elements, CSS selectors, or ComponentHandle objects.
-   * Returns the ComponentHandle for console chaining.
+   * Inspect a DOM element's bitwrench state, handle methods, and metadata.
+   * Works with DOM elements or CSS selectors.
    *
-   * @param {string|Element|ComponentHandle} target - Selector, element, or handle
-   * @returns {ComponentHandle|null} The component handle, or null if not found
+   * @param {string|Element} target - Selector or DOM element
+   * @returns {Element|null} The element, or null if not found
    * @category Component
    * @example
-   * // In browser console, click element in Elements panel then:
+   * bw.inspect('#my-carousel');
    * bw.inspect($0);
-   * // Or by selector:
-   * var h = bw.inspect('#my-dashboard');
-   * h.set('count', 99);  // chain from returned handle
    */
   bw.inspect = function(target) {
-    var el = target;
-    var comp;
-    if (target && target._bwComponent === true) {
-      el = target.element;
-      comp = target;
-    } else {
-      if (_is(target, 'string')) {
-        el = bw.$(target)[0];
-      }
-      if (!el) {
-        _cw('bw.inspect: element not found');
-        return null;
-      }
-      comp = el._bwComponentHandle;
-    }
-    if (!comp) {
-      _cl('bw.inspect: no ComponentHandle on this element');
-      _cl('  Tag:', el.tagName);
-      _cl('  Classes:', el.className);
-      _cl('  _bw_state:', el._bw_state || '(none)');
-      return null;
-    }
-    var deps = comp._bindings.reduce(function(s, b) {
-      return s.concat(b.deps || []);
-    }, []).filter(function(v, i, a) { return a.indexOf(v) === i; });
-    console.group('Component: ' + comp._bwId);
-    _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);
+    var el = _is(target, 'string') ? bw.$(target)[0] : target;
+    if (!el) { _cw('bw.inspect: element not found'); return null; }
+    console.group('Element: ' + (bw.getUUID(el) || el.id || el.tagName));
+    _cl('State:', el._bw_state || '(none)');
+    _cl('Handle:', el.bw ? _keys(el.bw) : '(none)');
+    _cl('Classes:', el.className);
+    _cl('Refs:', el._bw_refs || '(none)');
     console.groupEnd();
-    return comp;
+    return el;
   };
 
-  // ===================================================================================
-  // bw.compile() — Pre-compile TACO into optimized factory
-  // ===================================================================================
-
-  /**
-   * Pre-compile a TACO definition into a factory function.
-   * The factory produces ComponentHandles with pre-compiled binding evaluators.
-   *
-   * Phase 1: validates API surface. Template cloning optimization deferred.
-   *
-   * @param {Object} taco - TACO definition
-   * @returns {Function} Factory function(initialState?) → ComponentHandle
-   * @category Component
-   */
-  bw.compile = function(taco) {
-    // Pre-extract all binding expressions
-    var precompiled = [];
-    function walkExpressions(node) {
-      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 {
-            precompiled.push({
-              expr: parsed[i].expr,
-              fn: new Function('state', 'with(state){return (' + parsed[i].expr + ');}')
-            });
-          } catch(e) {
-            precompiled.push({ expr: parsed[i].expr, fn: function() { return ''; } });
-          }
-        }
-      }
-      if (node.a) {
-        for (var key in node.a) {
-          if (_hop.call(node.a, key)) {
-            var v = node.a[key];
-            if (_is(v, 'string') && v.indexOf('${') >= 0) {
-              var parsed2 = bw._parseBindings(v);
-              for (var j = 0; j < parsed2.length; j++) {
-                try {
-                  precompiled.push({
-                    expr: parsed2[j].expr,
-                    fn: new Function('state', 'with(state){return (' + parsed2[j].expr + ');}')
-                  });
-                } catch(e2) {
-                  precompiled.push({ expr: parsed2[j].expr, fn: function() { return ''; } });
-                }
-              }
-            }
-          }
-        }
-      }
-      if (_isA(node.c)) {
-        for (var k = 0; k < node.c.length; k++) walkExpressions(node.c[k]);
-      } else if (_is(node.c, 'object') && node.c.t) {
-        walkExpressions(node.c);
-      }
-    }
-    walkExpressions(taco);
-
-    return function(initialState) {
-      var handle = new ComponentHandle(taco);
-      handle._compile = true;
-      handle._precompiledBindings = precompiled;
-      if (initialState) {
-        for (var k in initialState) {
-          if (_hop.call(initialState, k)) {
-            handle._state[k] = initialState[k];
-          }
-        }
-      }
-      return handle;
-    };
-  };
+  bw.compile = function() { throw new Error('bw.compile() removed in v2.0.19. Use o.handle/o.slots on TACO options instead.'); };
 
   /**
    * Generate CSS from JavaScript objects.
@@ -6792,7 +5617,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' });
@@ -6837,9 +5662,8 @@
    * @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() {
@@ -6851,99 +5675,6 @@
     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.
    *
@@ -7065,103 +5796,49 @@
     };
   }
 
-  /**
-   * 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
-   */
-  bw.loadDefaultStyles = function(options = {}) {
-    const { minify = true, palette } = options;
-
-    // 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;
-  };
+  // =========================================================================
+  // v2.0.18 Clean Styles API — makeStyles / applyStyles / loadStyles / etc.
+  // =========================================================================
 
+  /**
+   * 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')
+   */
+  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);
@@ -7169,131 +5846,207 @@
     // 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);
 
-    // 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 });
+    return {
+      css: cssStr,
+      alternateCss: altCssStr,
+      rules: themedRules,
+      alternateRules: altRawRules,
+      palette: palette,
+      alternatePalette: altPalette,
+      isLightPrimary: lightPrimary
+    };
+  };
 
-      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;
     }
 
-    // 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' };
+    var styleId = _scopeToStyleId(scope);
+
+    // 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.loadStyles();                                          // defaults, global
+   * bw.loadStyles({ primary: '#4f46e5' });                    // custom, global
+   * bw.loadStyles({ primary: '#4f46e5' }, '#my-dashboard');   // custom, scoped
    */
-  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 = 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 });
+      }
     }
+    return bw.applyStyles(bw.makeStyles(config), scope);
+  };
 
-    bw._activeThemeMode = wantAlt ? 'alternate' : 'primary';
-    return bw._activeThemeMode;
+  /**
+   * 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.clearStyles();                    // remove global styles
+   * bw.clearStyles('#my-dashboard');     // remove scoped styles
+   * bw.clearStyles('reset');             // remove the CSS reset
    */
-  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 = 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
@@ -7516,10 +6269,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
@@ -7531,7 +6289,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) {
@@ -7544,41 +6307,47 @@
       sortable = true,
       onSort,
       sortColumn,
-      sortDirection = 'asc'
+      sortDirection = 'asc',
+      selectable = false,
+      onRowClick,
+      pageSize,
+      currentPage = 1,
+      onPageChange
     } = config;
 
-    // Build class list: always include bw_table, add striped/hover, append user className
+    // Build class list: always include bw_table, add striped/hover/selectable, append user className
     let cls = 'bw_table';
     if (striped) cls += ' bw_table_striped';
-    if (hover) 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
-    const cols = columns || (data.length > 0 
+    const cols = columns || (data.length > 0
       ? _keys(data[0]).map(key => ({ key, label: key }))
       : []);
-      
+
     // Current sort state
     let currentSortColumn = sortColumn || null;
     let currentSortDirection = sortDirection;
-    
+
     // Sort data if column specified
     let sortedData = [...data];
     if (currentSortColumn) {
       sortedData.sort((a, b) => {
         const aVal = a[currentSortColumn];
         const bVal = b[currentSortColumn];
-        
+
         // Handle different types
         if (_is(aVal, 'number') && _is(bVal, 'number')) {
           return currentSortDirection === 'asc' ? aVal - bVal : bVal - aVal;
         }
-        
+
         // String comparison
         const aStr = String(aVal || '').toLowerCase();
         const bStr = String(bVal || '').toLowerCase();
-        
+
         if (currentSortDirection === 'asc') {
           return aStr.localeCompare(bStr);
         } else {
@@ -7586,23 +6355,32 @@
         }
       });
     }
-    
+
+    // Pagination
+    const totalRows = sortedData.length;
+    const totalPages = pageSize ? Math.max(1, Math.ceil(totalRows / pageSize)) : 1;
+    const page = Math.max(1, Math.min(currentPage, totalPages));
+    if (pageSize) {
+      const start = (page - 1) * pageSize;
+      sortedData = sortedData.slice(start, start + pageSize);
+    }
+
     // Create sort handler
     const handleSort = (column) => {
       if (!sortable) return;
-      
+
       if (currentSortColumn === column) {
         currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
       } else {
         currentSortColumn = column;
         currentSortDirection = 'asc';
       }
-      
+
       if (onSort) {
         onSort(column, currentSortDirection);
       }
     };
-    
+
     // Build table header
     const thead = {
       t: 'thead',
@@ -7625,24 +6403,87 @@
         }))
       }
     };
-    
-    // Build table body
+
+    // Build table body with selectable/onRowClick support
     const tbody = {
       t: 'tbody',
-      c: sortedData.map(row => ({
-        t: 'tr',
-        c: cols.map(col => ({
-          t: 'td',
-          c: col.render ? col.render(row[col.key], row) : String(row[col.key] || '')
-        }))
-      }))
+      c: sortedData.map((row, idx) => {
+        const globalIdx = pageSize ? (page - 1) * pageSize + idx : idx;
+        const 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(col => ({
+            t: 'td',
+            c: col.render ? col.render(row[col.key], row) : String(row[col.key] || '')
+          }))
+        };
+      })
     };
-    
-    return {
+
+    const table = {
       t: 'table',
       a: { class: cls },
       c: [thead, tbody]
     };
+
+    // If no pagination, return table directly
+    if (!pageSize) return table;
+
+    // Build pagination controls
+    const 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
+        }
+      ]
+    };
   };
 
   /**
@@ -7925,8 +6766,8 @@
       };
     }
     
-    // Generate unique ID if not provided
-    const componentId = taco.o?.id || bw.uuid();
+    // Generate unique UUID class if not provided
+    const componentId = taco.o?.id || bw.uuid('uuid');
     
     // Create DOM element
     let domElement;
@@ -7941,9 +6782,10 @@
       };
     }
     
-    // Add component ID to element
-    domElement.setAttribute('data-bw_id', componentId);
-    
+    // Add component ID as class + lifecycle marker
+    domElement.classList.add(componentId);
+    domElement.classList.add(_BW_LC);
+
     // Insert into DOM based on position
     try {
       switch(position) {
@@ -8017,7 +6859,8 @@
         
         // Re-render
         const newElement = bw.createDOM(this._taco);
-        newElement.setAttribute('data-bw_id', componentId);
+        newElement.classList.add(componentId);
+        newElement.classList.add(_BW_LC);
         
         // Replace in DOM
         parent.replaceChild(newElement, this.element);
@@ -8204,13 +7047,12 @@
   // Variant class helper: bw.variantClass('primary') → 'bw_primary'
   bw.variantClass = variantClass;
 
-  // Create functions that return handles (plain renderComponent, no Handle overlay)
+  // Create functions that return DOM elements (createCard, createTable, etc.)
   Object.entries(components).forEach(([name, fn]) => {
     if (name.startsWith('make')) {
-      const createName = 'create' + name.substring(4); // createCard, createTable, etc.
+      const createName = 'create' + name.substring(4);
       bw[createName] = function(props) {
-        const taco = fn(props);
-        return bw.renderComponent(taco);
+        return bw.createDOM(fn(props));
       };
     }
   });