bitwrench 2.0.16 → 2.0.18

package/dist/bitwrench-lean.esm.js

@@ -1,18 +1,18 @@
-/*! bitwrench-lean v2.0.16 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+/*! bitwrench-lean v2.0.18 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
 /**
  * Auto-generated version file from package.json
  * DO NOT EDIT DIRECTLY - Use npm run generate-version
  */
 
 const VERSION_INFO = {
-  version: '2.0.16',
+  version: '2.0.18',
   name: 'bitwrench',
   description: 'A library for javascript UI functions.',
   license: 'BSD-2-Clause',
   homepage: 'https://deftio.github.com/bitwrench/pages',
   repository: 'git+https://github.com/deftio/bitwrench.git',
   author: 'manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)',
-  buildDate: '2026-03-12T08:05:52.043Z'
+  buildDate: '2026-03-17T00:50:09.505Z'
 };
 
 /**
@@ -306,13 +306,18 @@ function harmonize(sourceHex, targetHex, amount) {
  */
 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)
   };
@@ -371,19 +376,27 @@ function deriveAlternateConfig(config) {
   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
@@ -431,10 +444,18 @@ function derivePalette(config) {
   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),
@@ -447,7 +468,8 @@ function derivePalette(config) {
     light:      deriveShades(lightBase),
     dark:       deriveShades(darkBase),
     background: bgBase,
-    surface:    surfBase
+    surface:    surfBase,
+    surfaceAlt: surfAlt
   };
 
   return palette;
@@ -494,10 +516,12 @@ var SPACING_SCALE = {
   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 = {
@@ -609,20 +633,14 @@ var DEFAULT_PALETTE_CONFIG = {
  * 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.
@@ -669,6 +687,7 @@ function scopeSelector(name, sel) {
   if (sel.includes(',')) return sel.split(',').map(function(s) { return '.' + name + ' ' + s.trim(); }).join(', ');
   return '.' + name + ' ' + sel;
 }
+var _sx=scopeSelector;
 
 // =========================================================================
 // Themed CSS generators
@@ -677,12 +696,12 @@ function scopeSelector(name, sel) {
 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'
   };
@@ -695,11 +714,11 @@ function generateButtons(scope, palette, layout) {
   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
@@ -708,12 +727,12 @@ function generateButtons(scope, palette, layout) {
   // 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'
@@ -727,7 +746,7 @@ function generateAlerts(scope, palette, layout) {
   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
   };
@@ -746,36 +765,36 @@ function generateCards(scope, palette, layout) {
 
   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
   };
 
@@ -789,55 +808,55 @@ function generateForms(scope, palette, layout) {
   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
   };
@@ -845,43 +864,46 @@ function generateForms(scope, palette, layout) {
   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
   };
@@ -892,49 +914,58 @@ function generateTables(scope, palette, layout) {
   var rules = {};
   var sp = layout.spacing;
 
-  rules[scopeSelector(scope, '.bw_table')] = {
+  rules[_sx(scope, '.bw_table')] = {
     'color': palette.dark.base,
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_table > :not(caption) > * > *')] = {
+  rules[_sx(scope, '.bw_table > :not(caption) > * > *')] = {
     'padding': sp.cell,
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_table > thead > tr > *')] = {
+  rules[_sx(scope, '.bw_table > thead > tr > *')] = {
     'color': palette.secondary.base,
     'border-bottom-color': palette.light.border,
-    'background-color': palette.light.light
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_table_striped > tbody > tr:nth-of-type(odd) > *')] = {
-    'background-color': 'rgba(0, 0, 0, 0.05)'
+  rules[_sx(scope, '.bw_table_striped > tbody > tr:nth-of-type(odd) > *')] = {
+    'background-color': palette.surfaceAlt
   };
-  rules[scopeSelector(scope, '.bw_table_hover > tbody > tr:hover > *')] = {
+  rules[_sx(scope, '.bw_table_hover > tbody > tr:hover > *')] = {
     'background-color': palette.primary.focus
   };
-  rules[scopeSelector(scope, '.bw_table_bordered')] = {
+  rules[_sx(scope, '.bw_table_selectable > tbody > tr')] = {
+    'cursor': 'pointer'
+  };
+  rules[_sx(scope, '.bw_table > tbody > tr.bw_table_row_selected > *')] = {
+    'background-color': palette.primary.light
+  };
+  rules[_sx(scope, '.bw_table_bordered')] = {
     'border-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_table caption')] = {
+  rules[_sx(scope, '.bw_table caption')] = {
     'color': palette.secondary.base
   };
 
   return rules;
 }
 
-function generateTabs(scope, palette) {
-  var rules = {};
-  rules[scopeSelector(scope, '.bw_nav_tabs')] = {
+function generateTabs(scope, palette, layout) {
+  var rules = {}, mo = layout.motion;
+  rules[_sx(scope, '.bw_nav_tabs')] = {
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_nav_link')] = {
-    'color': palette.secondary.base
+  rules[_sx(scope, '.bw_nav_link')] = {
+    'color': palette.secondary.base,
+    'transition': 'color ' + mo.fast + ' ' + mo.easing + ', border-color ' + mo.fast + ' ' + mo.easing + ', background-color ' + mo.fast + ' ' + mo.easing
   };
-  rules[scopeSelector(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
+  rules[_sx(scope, '.bw_nav_tabs .bw_nav_link:hover')] = {
     'color': palette.dark.base,
+    'background-color': palette.surfaceAlt,
     'border-bottom-color': palette.light.border
   };
-  rules[scopeSelector(scope, '.bw_nav_tabs .bw_nav_link.active')] = {
+  rules[_sx(scope, '.bw_nav_tabs .bw_nav_link.active')] = {
     'color': palette.primary.base,
+    'background-color': palette.primary.focus,
     'border-bottom': '2px solid ' + palette.primary.base
   };
   return rules;
@@ -943,23 +974,25 @@ function generateTabs(scope, palette) {
 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'
   };
@@ -967,28 +1000,37 @@ function generateListGroups(scope, palette, layout) {
   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
@@ -998,12 +1040,12 @@ function generatePagination(scope, palette) {
 
 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)'
   };
@@ -1022,26 +1064,31 @@ function generateResetThemed(scope, palette) {
     '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;
 }
 
@@ -1049,11 +1096,11 @@ function generateBreadcrumbThemed(scope, palette) {
 
 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;
@@ -1061,82 +1108,94 @@ function generateCloseButtonThemed(scope, palette) {
 
 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;
@@ -1144,13 +1203,13 @@ function generateModalThemed(scope, palette, layout) {
 
 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;
@@ -1158,22 +1217,23 @@ function generateToastThemed(scope, palette, layout) {
 
 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;
@@ -1181,15 +1241,15 @@ function generateDropdownThemed(scope, palette, layout) {
 
 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;
@@ -1197,88 +1257,102 @@ function generateSwitchThemed(scope, palette) {
 
 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'
@@ -1288,35 +1362,73 @@ function generateFileUploadThemed(scope, palette) {
 
 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 generateCodeDemoThemed(scope, palette) {
+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, 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'
   };
@@ -1326,7 +1438,7 @@ function generateCodeDemoThemed(scope, palette) {
 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;
 }
 
@@ -1352,21 +1464,21 @@ function generatePaletteClasses(scope, palette) {
     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'
     };
@@ -1374,70 +1486,99 @@ function generatePaletteClasses(scope, palette) {
     // --- 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;
 }
@@ -1459,30 +1600,32 @@ function generateThemedCSS(scopeName, palette, layout) {
     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)
   );
@@ -1707,6 +1850,8 @@ var structuralRules = {
     },
     '.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' }
   },
 
@@ -1760,6 +1905,7 @@ var structuralRules = {
     '.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'
     },
@@ -1794,10 +1940,11 @@ var structuralRules = {
     '.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' }
   },
 
@@ -1954,6 +2101,7 @@ var structuralRules = {
     '.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'
@@ -1965,10 +2113,9 @@ var structuralRules = {
       '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 ----
@@ -2114,7 +2261,13 @@ var structuralRules = {
 
   // ---- 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' },
@@ -2477,6 +2630,20 @@ function generateUtilityRules() {
   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' };
@@ -2537,6 +2704,26 @@ function getStructuralStyles() {
   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
 // =========================================================================
@@ -2566,60 +2753,41 @@ Object.assign({}, structuralRules, {
 });
 
 /**
- * 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(', ');
 }
 
 /**
@@ -3343,7 +3511,7 @@ const bw = {
   __monkey_patch_is_nodejs__: {
     _value: 'ignore',
     set: function(x) {
-      this._value = (typeof x === 'boolean') ? x : 'ignore';
+      this._value = _is(x, 'boolean') ? x : 'ignore';
     },
     get: function() {
       return this._value;
@@ -3391,6 +3559,67 @@ Object.defineProperty(bw, '_isBrowser', {
   configurable: true
 });
 
+// ── Internal aliases ─────────────────────────────────────────────────────
+// Short names for frequently-used builtins and internal methods.
+// Same pattern as v1 (_to = bw.typeOf, etc.).
+//
+// Why: Terser can't shorten global property chains (console.warn,
+// Object.prototype.hasOwnProperty, Array.isArray, document.createElement)
+// because it can't prove they're side-effect-free. We can, so we alias
+// them here. Each alias saves bytes in the minified output, and the short
+// names also reduce visual noise in the hot paths (binding pipeline,
+// createDOM, etc.).
+//
+// Alias       Target                                  Sites
+// ─────────   ──────────────────────────────────────   ─────
+// _hop        Object.prototype.hasOwnProperty          15
+// _isA        Array.isArray                             25
+// _keys       Object.keys                               7
+// _to         bw.typeOf (type string)                   26
+// _is         type check boolean: _is(x,'string')       ~50
+// _cw         console.warn                               8
+// _cl         console.log                               11
+// _ce         console.error                              4
+// _chp        ComponentHandle.prototype                 28  (defined after constructor)
+//
+// Note: document.createElement etc. are NOT aliased because they require
+// `this === document` and .bind() would add overhead on every call.
+// Console aliases use thin wrappers (not direct refs) so test monkey-
+// patching of console.warn/log/error continues to work.
+//
+// `typeof x` for UNDECLARED globals (window, document, process, require,
+// EventSource, navigator, Promise, __filename, import.meta) MUST stay as
+// raw `typeof` — calling _to(x) when x doesn't exist throws ReferenceError.
+//
+// ── v1 functional type helpers (kept for reference, not currently used) ──
+// _toa(x, type, trueVal, falseVal) — bw.typeAssign:
+//   returns trueVal if _to(x)===type, else falseVal.
+//   Replaces: (typeof x === 'string') ? A : B → _toa(x,'string',A,B)
+// _toc(x, type, trueVal, falseVal) — bw.typeConvert:
+//   same as _toa but if trueVal/falseVal are functions, calls them with x.
+//   Replaces: typeof x === 'string' ? fn(x) : default → _toc(x,'string',fn,default)
+// Uncomment if pattern frequency justifies them:
+// var _toa = function(x, t, y, n) { return _to(x) === t ? y : n; };
+// var _toc = function(x, t, y, n) { var r = _to(x)===t; return r ? (_to(y)==='function'?y(x):y) : (_to(n)==='function'?n(x):n); };
+// ─────────────────────────────────────────────────────────────────────────
+var _hop  = Object.prototype.hasOwnProperty;
+var _isA  = Array.isArray;
+var _keys = Object.keys;
+var _to   = typeOf;  // imported from bitwrench-utils.js
+var _is   = function(x, t) { var r = _to(x); return r === t || r.toLowerCase() === t; };
+// Console aliases use thin wrappers (not direct references) so that test
+// code can monkey-patch console.warn/log/error and the patches take effect.
+var _cw   = function() { console.warn.apply(console, arguments); };
+var _cl   = function() { console.log.apply(console, arguments); };
+var _ce   = function() { console.error.apply(console, arguments); };
+
+/**
+ * Debug flag. When true, emits console.warn for silent binding failures
+ * (missing paths, null refs, auto-created intermediate objects).
+ * @type {boolean}
+ */
+bw.debug = false;
+
 /**
  * Lazy-resolve Node.js `fs` module.
  * Tries require('fs') first (available in CJS/UMD Node.js builds),
@@ -3538,7 +3767,7 @@ bw.uuid = function(prefix) {
  */
 bw._el = function(id) {
   // Pass-through for DOM elements
-  if (typeof id !== 'string') return id || null;
+  if (!_is(id, 'string')) return id || null;
   if (!id) return null;
   if (!bw._isBrowser) return null;
 
@@ -3566,7 +3795,12 @@ bw._el = function(id) {
     el = document.querySelector('[data-bw_id="' + id + '"]');
   }
 
-  // 5. Cache the result for next time
+  // 5. Try class-based lookup for bw_uuid_* tokens (UUID addressing)
+  if (!el && id.indexOf('bw_uuid_') === 0) {
+    el = document.querySelector('.' + id);
+  }
+
+  // 6. Cache the result for next time
   if (el) {
     bw._nodeMap[id] = el;
   }
@@ -3619,6 +3853,84 @@ bw._deregisterNode = function(el, bwId) {
   }
 };
 
+// ===================================================================================
+// bw.assignUUID() / bw.getUUID() — Explicit UUID addressing for TACO objects
+// ===================================================================================
+
+/**
+ * Regex to match a bw_uuid_* token in a class string.
+ * @private
+ */
+var _UUID_RE = /\bbw_uuid_[a-z0-9_]+\b/;
+
+/**
+ * Assign a UUID to a TACO object by appending a `bw_uuid_*` token to `taco.a.class`.
+ *
+ * Idempotent by default — calling twice returns the same UUID. Pass `forceNew=true`
+ * to replace an existing UUID (useful in loops where each TACO needs a unique ID).
+ *
+ * @param {Object} taco - A TACO object `{t, a, c, o}`
+ * @param {boolean} [forceNew=false] - If true, replaces any existing UUID with a new one
+ * @returns {string} The UUID string (e.g. 'bw_uuid_a1b2c3d4e5')
+ * @category Identifiers
+ * @example
+ * var card = bw.makeStatCard({ value: '0', label: 'Scans' });
+ * var uuid = bw.assignUUID(card);        // 'bw_uuid_a1b2c3d4e5'
+ * var same = bw.assignUUID(card);        // same UUID (idempotent)
+ * var diff = bw.assignUUID(card, true);  // new UUID (forced)
+ */
+bw.assignUUID = function(taco, forceNew) {
+  if (!taco || !_is(taco, 'object')) return null;
+
+  // Ensure taco.a exists
+  if (!taco.a) taco.a = {};
+  if (!_is(taco.a.class, 'string')) taco.a.class = taco.a.class ? String(taco.a.class) : '';
+
+  var existing = taco.a.class.match(_UUID_RE);
+
+  if (existing && !forceNew) {
+    return existing[0];
+  }
+
+  // Remove old UUID if forceNew
+  if (existing) {
+    taco.a.class = taco.a.class.replace(_UUID_RE, '').replace(/\s+/g, ' ').trim();
+  }
+
+  var uuid = bw.uuid('uuid');
+  taco.a.class = (taco.a.class ? taco.a.class + ' ' : '') + uuid;
+  return uuid;
+};
+
+/**
+ * Read the UUID from a TACO object or DOM element. Pure getter, no side effects.
+ *
+ * @param {Object|Element} tacoOrElement - A TACO object or DOM element
+ * @returns {string|null} The UUID string, or null if none assigned
+ * @category Identifiers
+ * @example
+ * bw.getUUID(card)       // 'bw_uuid_a1b2c3d4e5' (from TACO)
+ * bw.getUUID(domEl)      // 'bw_uuid_a1b2c3d4e5' (from DOM element)
+ * bw.getUUID({t:'div'})  // null (no UUID)
+ */
+bw.getUUID = function(tacoOrElement) {
+  if (!tacoOrElement) return null;
+
+  var classStr;
+  // DOM element: check className
+  if (tacoOrElement.className !== undefined && tacoOrElement.tagName) {
+    classStr = tacoOrElement.className;
+  }
+  // TACO object: check a.class
+  else if (tacoOrElement.a && _is(tacoOrElement.a.class, 'string')) {
+    classStr = tacoOrElement.a.class;
+  }
+
+  if (!classStr) return null;
+  var match = classStr.match(_UUID_RE);
+  return match ? match[0] : null;
+};
+
 /**
  * Escape HTML special characters to prevent XSS.
  *
@@ -3634,7 +3946,7 @@ bw._deregisterNode = function(el, bwId) {
  * // => '&lt;b&gt;Hello&lt;&#x2F;b&gt; &amp; &quot;world&quot;'
  */
 bw.escapeHTML = function(str) {
-  if (typeof str !== 'string') return '';
+  if (!_is(str, 'string')) return '';
   
   const escapeMap = {
     '&': '&amp;',
@@ -3668,6 +3980,42 @@ bw.raw = function(str) {
   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.
@@ -3707,7 +4055,7 @@ bw.html = function(taco, options = {}) {
   }
 
   // Handle arrays of TACOs
-  if (Array.isArray(taco)) {
+  if (_isA(taco)) {
     return taco.map(t => bw.html(t, options)).join('');
   }
 
@@ -3730,15 +4078,15 @@ bw.html = function(taco, options = {}) {
   if (taco && taco._bwEach && options.state) {
     var eachExpr = taco.expr.replace(/^\$\{|\}$/g, '');
     var arr = bw._evaluatePath(options.state, eachExpr);
-    if (!Array.isArray(arr)) return '';
+    if (!_isA(arr)) return '';
     return arr.map(function(item, idx) { return bw.html(taco.factory(item, idx), options); }).join('');
   }
 
   // Handle primitives and non-TACO objects
-  if (typeof taco !== 'object' || !taco.t) {
+  if (!_is(taco, 'object') || !taco.t) {
     var str = options.raw ? String(taco) : bw.escapeHTML(String(taco));
     // Resolve template bindings if state provided
-    if (options.state && typeof str === 'string' && str.indexOf('${') >= 0) {
+    if (options.state && _is(str, 'string') && str.indexOf('${') >= 0) {
       str = bw._resolveTemplate(str, options.state, !!options.compile);
     }
     return str;
@@ -3758,10 +4106,18 @@ bw.html = function(taco, options = {}) {
     // Skip null, undefined, false
     if (value == null || value === false) continue;
     
-    // Skip event handlers (they're for DOM only)
-    if (key.startsWith('on')) continue;
+    // Serialize event handlers via funcRegister
+    if (key.startsWith('on')) {
+      if (_is(value, 'function')) {
+        var fnId = bw.funcRegister(value);
+        attrStr += ' ' + key + '="' + bw.funcGetDispatchStr(fnId, 'event') + '"';
+      } else if (_is(value, 'string')) {
+        attrStr += ' ' + key + '="' + bw.escapeHTML(value) + '"';
+      }
+      continue;
+    }
     
-    if (key === 'style' && typeof value === 'object') {
+    if (key === 'style' && _is(value, 'object')) {
       // Convert style object to string
       const styleStr = Object.entries(value)
         .filter(([, v]) => v != null)
@@ -3772,7 +4128,7 @@ bw.html = function(taco, options = {}) {
       }
     } else if (key === 'class') {
       // Handle class as array or string
-      const classStr = Array.isArray(value) ? value.filter(Boolean).join(' ') : String(value);
+      const classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
       if (classStr) {
         attrStr += ` class="${bw.escapeHTML(classStr)}"`;
       }
@@ -3808,13 +4164,184 @@ bw.html = function(taco, options = {}) {
   // Process content recursively
   let contentStr = content != null ? bw.html(content, options) : '';
   // Resolve template bindings in content if state provided
-  if (options.state && typeof contentStr === 'string' && contentStr.indexOf('${') >= 0) {
+  if (options.state && _is(contentStr, 'string') && contentStr.indexOf('${') >= 0) {
     contentStr = bw._resolveTemplate(contentStr, options.state, !!options.compile);
   }
 
   return `<${tag}${attrStr}>${contentStr}</${tag}>`;
 };
 
+/**
+ * Generate a complete, self-contained HTML document from TACO content.
+ *
+ * Produces a full `<!DOCTYPE html>` page with configurable runtime injection,
+ * func registry emission (so serialized event handlers work), optional theme,
+ * and extra head elements. Designed for static site generation, offline/airgapped
+ * use, and the "static site that isn't static" workflow.
+ *
+ * @param {Object} [opts={}] - Page options
+ * @param {Object|string|Array} [opts.body=''] - Body content: TACO, string, or array
+ * @param {string} [opts.title='bitwrench'] - Page title
+ * @param {Object} [opts.state] - State for ${expr} resolution in bw.html()
+ * @param {string} [opts.runtime='shim'] - Runtime level: 'inline'|'cdn'|'shim'|'none'
+ * @param {string} [opts.css=''] - Additional CSS for <style> block
+ * @param {string|Object} [opts.theme=null] - Theme preset name or config object
+ * @param {Array} [opts.head=[]] - Extra TACO elements rendered into <head>
+ * @param {string} [opts.favicon=''] - Favicon URL
+ * @param {string} [opts.lang='en'] - HTML lang attribute
+ * @returns {string} Complete HTML document string
+ * @category DOM Generation
+ * @see bw.html
+ * @example
+ * bw.htmlPage({
+ *   title: 'My App',
+ *   body: { t: 'h1', c: 'Hello World' },
+ *   runtime: 'shim'
+ * })
+ */
+bw.htmlPage = function(opts) {
+  opts = opts || {};
+  var title     = opts.title   || 'bitwrench';
+  var body      = opts.body    || '';
+  var state     = opts.state   || undefined;
+  var runtime   = opts.runtime || 'shim';
+  var css       = opts.css     || '';
+  var theme     = opts.theme   || null;
+  var headExtra = opts.head    || [];
+  var favicon   = opts.favicon || '';
+  var lang      = opts.lang    || 'en';
+
+  // Snapshot funcRegistry counter before rendering
+  var fnCounterBefore = bw._fnIDCounter;
+
+  // Render body content
+  var bodyHTML = '';
+  if (_is(body, 'string')) {
+    bodyHTML = body;
+  } else {
+    var htmlOpts = {};
+    if (state) htmlOpts.state = state;
+    bodyHTML = bw.html(body, htmlOpts);
+  }
+
+  // Collect functions registered during this render
+  var fnCounterAfter = bw._fnIDCounter;
+  var registryEntries = '';
+  for (var i = fnCounterBefore; i < fnCounterAfter; i++) {
+    var fnKey = 'bw_fn_' + i;
+    if (bw._fnRegistry[fnKey]) {
+      registryEntries += 'bw._fnRegistry[\'' + fnKey + '\']=' +
+        bw._fnRegistry[fnKey].toString() + ';\n';
+    }
+  }
+
+  // Build runtime script for <head>
+  var runtimeHead = '';
+  if (runtime === 'inline') {
+    // Read UMD bundle synchronously if in Node.js
+    var umdSource = null;
+    if (bw._isNode) {
+      try {
+        var fs = (typeof require === 'function') ? require('fs') : null;
+        var pathMod = (typeof require === 'function') ? require('path') : null;
+        if (fs && pathMod) {
+          // Resolve dist/ relative to this source file
+          var srcDir = '';
+          try { srcDir = pathMod.dirname((typeof __filename !== 'undefined') ? __filename : ''); }
+          catch(e2) { /* ESM: __filename not available */ }
+          if (!srcDir && typeof import.meta !== 'undefined' && import.meta.url) {
+            var url = (typeof require === 'function') ? require('url') : null;
+            if (url && url.fileURLToPath) srcDir = pathMod.dirname(url.fileURLToPath(import.meta.url));
+          }
+          if (srcDir) {
+            var distPath = pathMod.resolve(srcDir, '../dist/bitwrench.umd.min.js');
+            umdSource = fs.readFileSync(distPath, 'utf8');
+          }
+        }
+      } catch(e) { /* fall through */ }
+    }
+    if (umdSource) {
+      runtimeHead = '<script>' + umdSource + '</script>';
+    } else {
+      // Fallback to shim in browser or if dist not available
+      runtimeHead = '<script>' + bw._FUNC_REGISTRY_SHIM + '</script>';
+    }
+  } else if (runtime === 'cdn') {
+    runtimeHead = '<script src="https://cdn.jsdelivr.net/npm/bitwrench@2/dist/bitwrench.umd.min.js"></script>';
+  } else if (runtime === 'shim') {
+    runtimeHead = '<script>' + bw._FUNC_REGISTRY_SHIM + '</script>';
+  }
+  // runtime === 'none' → empty
+
+  // Theme CSS
+  var themeCSS = '';
+  if (theme) {
+    var themeConfig = _is(theme, 'string')
+      ? (THEME_PRESETS[theme.toLowerCase()] || null)
+      : theme;
+    if (themeConfig) {
+      var themeResult = bw.makeStyles(themeConfig);
+      themeCSS = themeResult.css;
+    }
+  }
+
+  // Extra <head> elements
+  var headHTML = '';
+  if (_isA(headExtra) && headExtra.length > 0) {
+    headHTML = headExtra.map(function(el) { return bw.html(el); }).join('\n');
+  }
+
+  // Favicon
+  var faviconTag = '';
+  if (favicon) {
+    var safeFavicon = favicon.replace(/[&<>"']/g, function(c) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
+    });
+    faviconTag = '<link rel="icon" href="' + safeFavicon + '">';
+  }
+
+  // Escaped title
+  var safeTitle = bw.escapeHTML(title);
+
+  // Combine all CSS
+  var allCSS = (themeCSS ? themeCSS + '\n' : '') + css;
+
+  // Body-end script: registry entries + optional loadStyles
+  var bodyEndScript = '';
+  var bodyEndParts = [];
+  if (registryEntries) {
+    bodyEndParts.push(registryEntries);
+  }
+  if (runtime === 'inline' || runtime === 'cdn') {
+    bodyEndParts.push('if(typeof bw!=="undefined"){bw.loadStyles();}');
+  }
+  if (bodyEndParts.length > 0) {
+    bodyEndScript = '<script>\n' + bodyEndParts.join('\n') + '\n</script>';
+  }
+
+  // Assemble document
+  var parts = [
+    '<!DOCTYPE html>',
+    '<html lang="' + lang + '">',
+    '<head>',
+    '<meta charset="UTF-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1">'
+  ];
+  parts.push('<title>' + safeTitle + '</title>');
+  if (faviconTag) parts.push(faviconTag);
+  if (runtimeHead) parts.push(runtimeHead);
+  if (headHTML) parts.push(headHTML);
+  if (allCSS) parts.push('<style>' + allCSS + '</style>');
+  parts.push('</head>');
+  parts.push('<body>');
+  parts.push(bodyHTML);
+  if (bodyEndScript) parts.push(bodyEndScript);
+  parts.push('</body>');
+  parts.push('</html>');
+
+  return parts.join('\n');
+};
+
 /**
  * Create a live DOM element from a TACO object (browser only).
  *
@@ -3859,7 +4386,7 @@ bw.createDOM = function(taco, options = {}) {
   }
 
   // Handle text nodes
-  if (typeof taco !== 'object' || !taco.t) {
+  if (!_is(taco, 'object') || !taco.t) {
     return document.createTextNode(String(taco));
   }
 
@@ -3872,16 +4399,16 @@ bw.createDOM = function(taco, options = {}) {
   for (const [key, value] of Object.entries(attrs)) {
     if (value == null || value === false) continue;
     
-    if (key === 'style' && typeof value === 'object') {
+    if (key === 'style' && _is(value, 'object')) {
       // Apply styles directly
       Object.assign(el.style, value);
     } else if (key === 'class') {
       // Handle class as array or string
-      const classStr = Array.isArray(value) ? value.filter(Boolean).join(' ') : String(value);
+      const classStr = _isA(value) ? value.filter(Boolean).join(' ') : String(value);
       if (classStr) {
         el.className = classStr;
       }
-    } else if (key.startsWith('on') && typeof value === 'function') {
+    } else if (key.startsWith('on') && _is(value, 'function')) {
       // Event handlers
       const eventName = key.slice(2).toLowerCase();
       el.addEventListener(eventName, value);
@@ -3901,7 +4428,7 @@ bw.createDOM = function(taco, options = {}) {
   // Children with data-bw_id or id attributes get local refs on the parent,
   // so o.render functions can access them without any DOM lookup.
   if (content != null) {
-    if (Array.isArray(content)) {
+    if (_isA(content)) {
       content.forEach(child => {
         if (child != null) {
           // Handle ComponentHandle in content arrays (Level 2 children)
@@ -3921,20 +4448,20 @@ bw.createDOM = function(taco, options = {}) {
           if (childEl._bw_refs) {
             if (!el._bw_refs) el._bw_refs = {};
             for (var rk in childEl._bw_refs) {
-              if (Object.prototype.hasOwnProperty.call(childEl._bw_refs, rk)) {
+              if (_hop.call(childEl._bw_refs, rk)) {
                 el._bw_refs[rk] = childEl._bw_refs[rk];
               }
             }
           }
         }
       });
-    } else if (typeof content === 'object' && content.__bw_raw) {
+    } else if (_is(content, 'object') && content.__bw_raw) {
       // Raw HTML content — inject via innerHTML
       el.innerHTML = content.v;
     } else if (content._bwComponent === true) {
       // Single ComponentHandle as content
       content.mount(el);
-    } else if (typeof content === 'object' && content.t) {
+    } else if (_is(content, 'object') && content.t) {
       var childEl = bw.createDOM(content, options);
       el.appendChild(childEl);
       var childBwId = content.a ? (content.a['data-bw_id'] || content.a.id) : null;
@@ -3945,7 +4472,7 @@ bw.createDOM = function(taco, options = {}) {
       if (childEl._bw_refs) {
         if (!el._bw_refs) el._bw_refs = {};
         for (var rk in childEl._bw_refs) {
-          if (Object.prototype.hasOwnProperty.call(childEl._bw_refs, rk)) {
+          if (_hop.call(childEl._bw_refs, rk)) {
             el._bw_refs[rk] = childEl._bw_refs[rk];
           }
         }
@@ -3960,6 +4487,14 @@ bw.createDOM = function(taco, options = {}) {
     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();
@@ -3978,7 +4513,7 @@ bw.createDOM = function(taco, options = {}) {
       el._bw_render = opts.render;
 
       if (opts.mounted) {
-        console.warn('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
+        _cw('bw.createDOM: o.render and o.mounted are mutually exclusive. o.render wins.');
       }
 
       // Queue initial render (same timing as mounted)
@@ -4051,7 +4586,7 @@ bw.DOM = function(target, taco, options = {}) {
   const targetEl = bw._el(target);
     
   if (!targetEl) {
-    console.error('bw.DOM: Target element not found:', target);
+    _ce('bw.DOM: Target element not found:', target);
     return null;
   }
   
@@ -4091,7 +4626,7 @@ bw.DOM = function(target, taco, options = {}) {
       targetEl.appendChild(taco.element);
     }
     // Handle arrays
-    else if (Array.isArray(taco)) {
+    else if (_isA(taco)) {
       taco.forEach(t => {
         if (t != null) {
           if (t._bwComponent === true) {
@@ -4127,7 +4662,7 @@ bw.DOM = function(target, taco, options = {}) {
 bw.compileProps = function(handle, props = {}) {
   const compiledProps = {};
   
-  Object.keys(props).forEach(key => {
+  _keys(props).forEach(key => {
     // Create getter/setter for each prop
     Object.defineProperty(compiledProps, key, {
       get() {
@@ -4332,6 +4867,16 @@ bw.renderComponent = function(taco, options = {}) {
 bw.cleanup = function(element) {
   if (!bw._isBrowser || !element) return;
 
+  // Deregister UUID classes from node cache (element + descendants)
+  // Covers elements that have UUID but no data-bw_id
+  var selfUuidMatch = element.className && element.className.match(_UUID_RE);
+  if (selfUuidMatch) delete bw._nodeMap[selfUuidMatch[0]];
+  var uuidEls = element.querySelectorAll('[class*="bw_uuid_"]');
+  uuidEls.forEach(function(uel) {
+    var m = uel.className && uel.className.match(_UUID_RE);
+    if (m) delete bw._nodeMap[m[0]];
+  });
+
   // Find all elements with data-bw_id
   const elements = element.querySelectorAll('[data-bw_id]');
 
@@ -4347,6 +4892,10 @@ bw.cleanup = function(element) {
     // Deregister from node cache
     bw._deregisterNode(el, id);
 
+    // Deregister UUID class from node cache
+    var uuidMatch = el.className && el.className.match(_UUID_RE);
+    if (uuidMatch) delete bw._nodeMap[uuidMatch[0]];
+
     // Clean up pub/sub subscriptions tied to this element
     if (el._bw_subs) {
       el._bw_subs.forEach(function(unsub) { unsub(); });
@@ -4371,6 +4920,10 @@ bw.cleanup = function(element) {
     // Deregister from node cache
     bw._deregisterNode(element, id);
 
+    // Deregister UUID class from node cache
+    var elemUuidMatch = element.className && element.className.match(_UUID_RE);
+    if (elemUuidMatch) delete bw._nodeMap[elemUuidMatch[0]];
+
     // Clean up pub/sub subscriptions tied to element itself
     if (element._bw_subs) {
       element._bw_subs.forEach(function(unsub) { unsub(); });
@@ -4445,17 +4998,17 @@ bw.patch = function(id, content, attr) {
   if (attr) {
     // Patch an attribute
     el.setAttribute(attr, String(content));
-  } else if (Array.isArray(content)) {
+  } else if (_isA(content)) {
     // Patch with array of children (strings and/or TACOs)
     el.innerHTML = '';
     content.forEach(function(item) {
-      if (typeof item === 'string' || typeof item === 'number') {
+      if (_is(item, 'string') || _is(item, 'number')) {
         el.appendChild(document.createTextNode(String(item)));
       } else if (item && item.t) {
         el.appendChild(bw.createDOM(item));
       }
     });
-  } else if (typeof content === 'object' && content !== null && content.t) {
+  } else if (_is(content, 'object') && content.t) {
     // Patch with a TACO — replace children
     el.innerHTML = '';
     el.appendChild(bw.createDOM(content));
@@ -4486,7 +5039,7 @@ bw.patch = function(id, content, attr) {
 bw.patchAll = function(patches) {
   var results = {};
   for (var id in patches) {
-    if (Object.prototype.hasOwnProperty.call(patches, id)) {
+    if (_hop.call(patches, id)) {
       results[id] = bw.patch(id, patches[id]);
     }
   }
@@ -4583,7 +5136,7 @@ bw.pub = function(topic, detail) {
       snapshot[i].handler(detail);
       called++;
     } catch (err) {
-      console.warn('bw.pub: subscriber error on topic "' + topic + '":', err);
+      _cw('bw.pub: subscriber error on topic "' + topic + '":', err);
     }
   }
   return called;
@@ -4679,8 +5232,8 @@ bw._fnIDCounter = 0;
  * @see bw.funcGetDispatchStr
  */
 bw.funcRegister = function(fn, name) {
-  if (typeof fn !== 'function') return '';
-  var fnID = (typeof name === 'string' && name.length > 0) ? name : ('bw_fn_' + bw._fnIDCounter++);
+  if (!_is(fn, 'function')) return '';
+  var fnID = (_is(name, 'string') && name.length > 0) ? name : ('bw_fn_' + bw._fnIDCounter++);
   bw._fnRegistry[fnID] = fn;
   return fnID;
 };
@@ -4699,7 +5252,7 @@ bw.funcRegister = function(fn, name) {
 bw.funcGetById = function(name, errFn) {
   name = String(name);
   if (name in bw._fnRegistry) return bw._fnRegistry[name];
-  return (typeof errFn === 'function') ? errFn : function() { console.warn('bw.funcGetById: unregistered fn "' + name + '"'); };
+  return _is(errFn, 'function') ? errFn : function() { _cw('bw.funcGetById: unregistered fn "' + name + '"'); };
 };
 
 /**
@@ -4740,13 +5293,30 @@ bw.funcUnregister = function(name) {
 bw.funcGetRegistry = function() {
   var copy = {};
   for (var k in bw._fnRegistry) {
-    if (Object.prototype.hasOwnProperty.call(bw._fnRegistry, k)) {
+    if (_hop.call(bw._fnRegistry, k)) {
       copy[k] = bw._fnRegistry[k];
     }
   }
   return copy;
 };
 
+/**
+ * Minimal runtime shim for funcRegister dispatch in static HTML.
+ * When embedded in a `<script>` tag, provides just enough infrastructure
+ * for `bw.funcGetById()` calls to resolve. The actual function bodies
+ * are emitted separately as `bw._fnRegistry['bw_fn_X'] = ...;` assignments.
+ * @type {string}
+ * @category Function Registry
+ */
+bw._FUNC_REGISTRY_SHIM = '(function(){var bw=window.bw||(window.bw={});' +
+  'if(!bw._fnRegistry)bw._fnRegistry={};' +
+  'bw.funcGetById=function(n){return bw._fnRegistry[n]||function(){' +
+  'console.warn("bw: unregistered fn "+n)};};' +
+  'bw.funcRegister=function(fn,name){' +
+  'var id=name||("bw_fn_"+(bw._fnIDCounter=(bw._fnIDCounter||0)+1));' +
+  'bw._fnRegistry[id]=fn;return id;};' +
+  'window.bw=bw;})();';
+
 // ===================================================================================
 // Template Binding Utilities
 // ===================================================================================
@@ -4774,7 +5344,10 @@ bw._evaluatePath = function(state, path) {
   var parts = path.split('.');
   var val = state;
   for (var i = 0; i < parts.length; i++) {
-    if (val == null) return '';
+    if (val == null) {
+      if (bw.debug) _cw('bw.debug: _evaluatePath — null at key "' + parts[i] + '" in path "' + path + '"');
+      return '';
+    }
     val = val[parts[i]];
   }
   return (val == null) ? '' : val;
@@ -4794,7 +5367,7 @@ bw._evaluatePath = function(state, path) {
  */
 bw._compiledExprs = {};
 bw._resolveTemplate = function(str, state, compile) {
-  if (typeof str !== 'string' || str.indexOf('${') < 0) return str;
+  if (!_is(str, 'string') || str.indexOf('${') < 0) return str;
   var bindings = bw._parseBindings(str);
   if (bindings.length === 0) return str;
 
@@ -4816,6 +5389,7 @@ bw._resolveTemplate = function(str, state, compile) {
       try {
         val = bw._compiledExprs[b.expr](state);
       } catch (e) {
+        if (bw.debug) _cw('bw.debug: _resolveTemplate — Tier 2 eval failed for "${' + b.expr + '}":', e.message);
         val = '';
       }
     } else {
@@ -4924,7 +5498,7 @@ function ComponentHandle(taco) {
   this._state = {};
   if (o.state) {
     for (var k in o.state) {
-      if (Object.prototype.hasOwnProperty.call(o.state, k)) {
+      if (_hop.call(o.state, k)) {
         this._state[k] = o.state[k];
       }
     }
@@ -4933,7 +5507,7 @@ function ComponentHandle(taco) {
   this._actions = {};
   if (o.actions) {
     for (var k2 in o.actions) {
-      if (Object.prototype.hasOwnProperty.call(o.actions, k2)) {
+      if (_hop.call(o.actions, k2)) {
         this._actions[k2] = o.actions[k2];
       }
     }
@@ -4943,7 +5517,7 @@ function ComponentHandle(taco) {
   if (o.methods) {
     var self = this;
     for (var k3 in o.methods) {
-      if (Object.prototype.hasOwnProperty.call(o.methods, k3)) {
+      if (_hop.call(o.methods, k3)) {
         this._methods[k3] = o.methods[k3];
         (function(methodName, methodFn) {
           self[methodName] = function() {
@@ -4961,7 +5535,7 @@ function ComponentHandle(taco) {
     willMount: o.willMount || null,
     mounted: o.mounted || null,
     willUpdate: o.willUpdate || null,
-    onUpdate: o.onUpdate || null,
+    onUpdate: o.onUpdate || o.updated || null,
     unmount: o.unmount || null,
     willDestroy: o.willDestroy || null
   };
@@ -4976,14 +5550,23 @@ function ComponentHandle(taco) {
   this._compile = !!o.compile;
   this._bw_refs = {};
   this._refCounter = 0;
+  // Child component ownership (Bug #5)
+  this._children = [];
+  this._parent = null;
+  // Factory metadata for BCCL rebuild (Bug #6)
+  this._factory = taco._bwFactory || null;
 }
 
+// Short alias for ComponentHandle.prototype (see alias block at top of file).
+// 28 method definitions × 25 chars = ~700B raw savings in minified output.
+var _chp = ComponentHandle.prototype;
+
 // ── State Methods ──
 
 /**
  * Get a state value. Dot-path supported: `get('user.name')`
  */
-ComponentHandle.prototype.get = function(key) {
+_chp.get = function(key) {
   return bw._evaluatePath(this._state, key);
 };
 
@@ -4993,12 +5576,13 @@ ComponentHandle.prototype.get = function(key) {
  * @param {*} value - New value
  * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
  */
-ComponentHandle.prototype.set = function(key, value, opts) {
+_chp.set = function(key, value, opts) {
   // Dot-path set
   var parts = key.split('.');
   var obj = this._state;
   for (var i = 0; i < parts.length - 1; i++) {
-    if (obj[parts[i]] == null || typeof obj[parts[i]] !== 'object') {
+    if (!_is(obj[parts[i]], 'object')) {
+      if (bw.debug) _cw('bw.debug: set() — auto-creating intermediate "' + parts[i] + '" in path "' + key + '"');
       obj[parts[i]] = {};
     }
     obj = obj[parts[i]];
@@ -5018,10 +5602,10 @@ ComponentHandle.prototype.set = function(key, value, opts) {
 /**
  * Get a shallow clone of the full state.
  */
-ComponentHandle.prototype.getState = function() {
+_chp.getState = function() {
   var clone = {};
   for (var k in this._state) {
-    if (Object.prototype.hasOwnProperty.call(this._state, k)) {
+    if (_hop.call(this._state, k)) {
       clone[k] = this._state[k];
     }
   }
@@ -5033,9 +5617,9 @@ ComponentHandle.prototype.getState = function() {
  * @param {Object} updates - Key-value pairs to merge
  * @param {Object} [opts] - Options. `{sync: true}` for immediate flush.
  */
-ComponentHandle.prototype.setState = function(updates, opts) {
+_chp.setState = function(updates, opts) {
   for (var k in updates) {
-    if (Object.prototype.hasOwnProperty.call(updates, k)) {
+    if (_hop.call(updates, k)) {
       this._state[k] = updates[k];
       this._dirtyKeys[k] = true;
     }
@@ -5052,9 +5636,9 @@ ComponentHandle.prototype.setState = function(updates, opts) {
 /**
  * Push a value onto an array in state. Clones the array.
  */
-ComponentHandle.prototype.push = function(key, val) {
+_chp.push = function(key, val) {
   var arr = this.get(key);
-  var newArr = Array.isArray(arr) ? arr.slice() : [];
+  var newArr = _isA(arr) ? arr.slice() : [];
   newArr.push(val);
   this.set(key, newArr);
 };
@@ -5062,9 +5646,9 @@ ComponentHandle.prototype.push = function(key, val) {
 /**
  * Splice an array in state. Clones the array.
  */
-ComponentHandle.prototype.splice = function(key, start, deleteCount) {
+_chp.splice = function(key, start, deleteCount) {
   var arr = this.get(key);
-  var newArr = Array.isArray(arr) ? arr.slice() : [];
+  var newArr = _isA(arr) ? arr.slice() : [];
   var args = [start, deleteCount].concat(Array.prototype.slice.call(arguments, 3));
   Array.prototype.splice.apply(newArr, args);
   this.set(key, newArr);
@@ -5072,7 +5656,7 @@ ComponentHandle.prototype.splice = function(key, start, deleteCount) {
 
 // ── Scheduling ──
 
-ComponentHandle.prototype._scheduleDirty = function() {
+_chp._scheduleDirty = function() {
   if (!this._scheduled) {
     this._scheduled = true;
     bw._dirtyComponents.push(this);
@@ -5087,17 +5671,17 @@ ComponentHandle.prototype._scheduleDirty = function() {
  * Creates binding descriptors with refIds for targeted DOM updates.
  * @private
  */
-ComponentHandle.prototype._compileBindings = function() {
+_chp._compileBindings = function() {
   this._bindings = [];
   this._refCounter = 0;
-  var stateKeys = Object.keys(this._state);
+  var stateKeys = _keys(this._state);
   var self = this;
 
   function walkTaco(taco, path) {
-    if (taco == null || typeof taco !== 'object' || !taco.t) return taco;
+    if (!_is(taco, 'object') || !taco.t) return taco;
 
     // Check content for bindings
-    if (typeof taco.c === 'string' && taco.c.indexOf('${') >= 0) {
+    if (_is(taco.c, 'string') && taco.c.indexOf('${') >= 0) {
       var refId = 'bw_ref_' + self._refCounter++;
       var parsed = bw._parseBindings(taco.c);
       var deps = [];
@@ -5119,10 +5703,10 @@ ComponentHandle.prototype._compileBindings = function() {
     // Check attributes for bindings
     if (taco.a) {
       for (var attrName in taco.a) {
-        if (!Object.prototype.hasOwnProperty.call(taco.a, attrName)) continue;
+        if (!_hop.call(taco.a, attrName)) continue;
         if (attrName === 'data-bw_ref') continue;
         var attrVal = taco.a[attrName];
-        if (typeof attrVal === 'string' && attrVal.indexOf('${') >= 0) {
+        if (_is(attrVal, 'string') && attrVal.indexOf('${') >= 0) {
           var refId2 = 'bw_ref_' + self._refCounter++;
           var parsed2 = bw._parseBindings(attrVal);
           var deps2 = [];
@@ -5148,9 +5732,27 @@ ComponentHandle.prototype._compileBindings = function() {
     }
 
     // Recurse into children
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       for (var i = 0; i < taco.c.length; i++) {
-        if (taco.c[i] && typeof taco.c[i] === 'object' && taco.c[i].t) {
+        // Wrap string children with ${expr} in a span so patches target the span, not the parent
+        if (_is(taco.c[i], 'string') && taco.c[i].indexOf('${') >= 0) {
+          var mixedRefId = 'bw_ref_' + self._refCounter++;
+          var mixedParsed = bw._parseBindings(taco.c[i]);
+          var mixedDeps = [];
+          for (var mi = 0; mi < mixedParsed.length; mi++) {
+            mixedDeps = mixedDeps.concat(bw._extractDeps(mixedParsed[mi].expr, stateKeys));
+          }
+          self._bindings.push({
+            expr: taco.c[i],
+            type: 'content',
+            refId: mixedRefId,
+            deps: mixedDeps,
+            template: taco.c[i]
+          });
+          // Replace string with a span wrapper so textContent targets the span only
+          taco.c[i] = { t: 'span', a: { 'data-bw_ref': mixedRefId, style: 'display:contents' }, c: taco.c[i] };
+        }
+        if (_is(taco.c[i], 'object') && taco.c[i].t) {
           walkTaco(taco.c[i], path.concat(i));
         }
         // Handle bw.when/bw.each markers
@@ -5185,7 +5787,7 @@ ComponentHandle.prototype._compileBindings = function() {
           taco.c[i]._refId = eachRefId;
         }
       }
-    } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+    } else if (_is(taco.c, 'object') && taco.c.t) {
       walkTaco(taco.c, path.concat(0));
     }
 
@@ -5201,7 +5803,7 @@ ComponentHandle.prototype._compileBindings = function() {
  * Build ref map from the live DOM after createDOM.
  * @private
  */
-ComponentHandle.prototype._collectRefs = function() {
+_chp._collectRefs = function() {
   this._bw_refs = {};
   if (!this.element) return;
   var els = this.element.querySelectorAll('[data-bw_ref]');
@@ -5222,7 +5824,7 @@ ComponentHandle.prototype._collectRefs = function() {
  * Creates DOM, compiles bindings, registers actions, and calls lifecycle hooks.
  * @param {Element} parentEl - DOM element to mount into
  */
-ComponentHandle.prototype.mount = function(parentEl) {
+_chp.mount = function(parentEl) {
   // willMount hook
   if (this._hooks.willMount) this._hooks.willMount(this);
 
@@ -5244,7 +5846,7 @@ ComponentHandle.prototype.mount = function(parentEl) {
   // Register named actions in function registry
   var self = this;
   for (var actionName in this._actions) {
-    if (Object.prototype.hasOwnProperty.call(this._actions, actionName)) {
+    if (_hop.call(this._actions, actionName)) {
       var registeredName = this._bwId + '_' + actionName;
       (function(aName) {
         bw.funcRegister(function(evt) {
@@ -5263,6 +5865,11 @@ ComponentHandle.prototype.mount = function(parentEl) {
   this.element = bw.createDOM(tacoForDOM);
   this.element._bwComponentHandle = this;
   this.element.setAttribute('data-bw_comp_id', this._bwId);
+
+  // Restore o.render from original TACO (stripped by _tacoForDOM)
+  if (this.taco.o && this.taco.o.render) {
+    this.element._bw_render = this.taco.o.render;
+  }
   if (this._userTag) {
     this.element.classList.add(this._userTag);
   }
@@ -5278,6 +5885,16 @@ ComponentHandle.prototype.mount = function(parentEl) {
 
   this.mounted = true;
 
+  // Scan for child ComponentHandles and link parent/child (Bug #5)
+  var childEls = this.element.querySelectorAll('[data-bw_comp_id]');
+  for (var ci = 0; ci < childEls.length; ci++) {
+    var ch = childEls[ci]._bwComponentHandle;
+    if (ch && ch !== this && !ch._parent) {
+      ch._parent = this;
+      this._children.push(ch);
+    }
+  }
+
   // mounted hook (backward compat: fn.length === 2 wraps (el, state))
   if (this._hooks.mounted) {
     if (this._hooks.mounted.length === 2) {
@@ -5286,16 +5903,21 @@ ComponentHandle.prototype.mount = function(parentEl) {
       this._hooks.mounted(this);
     }
   }
+
+  // Invoke o.render on initial mount (if present)
+  if (this.element._bw_render) {
+    this.element._bw_render(this.element, this._state);
+  }
 };
 
 /**
  * Prepare TACO for initial render: resolve when/each markers.
  * @private
  */
-ComponentHandle.prototype._prepareTaco = function(taco) {
-  if (!taco || typeof taco !== 'object') return;
+_chp._prepareTaco = function(taco) {
+  if (!_is(taco, 'object')) return;
 
-  if (Array.isArray(taco.c)) {
+  if (_isA(taco.c)) {
     for (var i = taco.c.length - 1; i >= 0; i--) {
       var child = taco.c[i];
       if (child && child._bwWhen) {
@@ -5320,18 +5942,18 @@ ComponentHandle.prototype._prepareTaco = function(taco) {
         var eachExprStr = child.expr.replace(/^\$\{|\}$/g, '');
         var arr = bw._evaluatePath(this._state, eachExprStr);
         var items = [];
-        if (Array.isArray(arr)) {
+        if (_isA(arr)) {
           for (var j = 0; j < arr.length; j++) {
             items.push(child.factory(arr[j], j));
           }
         }
         taco.c[i] = { t: 'span', a: { 'data-bw_each': child._refId, style: 'display:contents' }, c: items };
       }
-      if (taco.c[i] && typeof taco.c[i] === 'object' && taco.c[i].t) {
+      if (_is(taco.c[i], 'object') && taco.c[i].t) {
         this._prepareTaco(taco.c[i]);
       }
     }
-  } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+  } else if (_is(taco.c, 'object') && taco.c.t) {
     this._prepareTaco(taco.c);
   }
 };
@@ -5340,12 +5962,12 @@ ComponentHandle.prototype._prepareTaco = function(taco) {
  * Wire action name strings (in onclick etc.) to dispatch function calls.
  * @private
  */
-ComponentHandle.prototype._wireActions = function(taco) {
-  if (!taco || typeof taco !== 'object' || !taco.t) return;
+_chp._wireActions = function(taco) {
+  if (!_is(taco, 'object') || !taco.t) return;
   if (taco.a) {
     for (var key in taco.a) {
-      if (!Object.prototype.hasOwnProperty.call(taco.a, key)) continue;
-      if (key.startsWith('on') && typeof taco.a[key] === 'string') {
+      if (!_hop.call(taco.a, key)) continue;
+      if (key.startsWith('on') && _is(taco.a[key], 'string')) {
         var actionName = taco.a[key];
         if (actionName in this._actions) {
           var registeredName = this._bwId + '_' + actionName;
@@ -5359,11 +5981,11 @@ ComponentHandle.prototype._wireActions = function(taco) {
       }
     }
   }
-  if (Array.isArray(taco.c)) {
+  if (_isA(taco.c)) {
     for (var i = 0; i < taco.c.length; i++) {
       this._wireActions(taco.c[i]);
     }
-  } else if (taco.c && typeof taco.c === 'object' && taco.c.t) {
+  } else if (_is(taco.c, 'object') && taco.c.t) {
     this._wireActions(taco.c);
   }
 };
@@ -5372,7 +5994,7 @@ ComponentHandle.prototype._wireActions = function(taco) {
  * Deep-clone a TACO tree, preserving _bwWhen/_bwEach markers and their factories.
  * @private
  */
-ComponentHandle.prototype._deepCloneTaco = function(taco) {
+_chp._deepCloneTaco = function(taco) {
   if (taco == null) return taco;
   // Preserve _bwWhen / _bwEach markers (contain functions)
   if (taco._bwWhen) {
@@ -5384,18 +6006,18 @@ ComponentHandle.prototype._deepCloneTaco = function(taco) {
   if (taco._bwEach) {
     return { _bwEach: true, expr: taco.expr, factory: taco.factory, _refId: taco._refId };
   }
-  if (typeof taco !== 'object' || !taco.t) return taco;
+  if (!_is(taco, 'object') || !taco.t) return taco;
   var result = { t: taco.t };
   if (taco.a) {
     result.a = {};
     for (var k in taco.a) {
-      if (Object.prototype.hasOwnProperty.call(taco.a, k)) result.a[k] = taco.a[k];
+      if (_hop.call(taco.a, k)) result.a[k] = taco.a[k];
     }
   }
   if (taco.c != null) {
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       result.c = taco.c.map(function(child) { return this._deepCloneTaco(child); }.bind(this));
-    } else if (typeof taco.c === 'object') {
+    } else if (_is(taco.c, 'object')) {
       result.c = this._deepCloneTaco(taco.c);
     } else {
       result.c = taco.c;
@@ -5409,27 +6031,31 @@ ComponentHandle.prototype._deepCloneTaco = function(taco) {
  * Create a copy of TACO suitable for createDOM (strips o to prevent double lifecycle).
  * @private
  */
-ComponentHandle.prototype._tacoForDOM = function(taco) {
-  if (!taco || typeof taco !== 'object' || !taco.t) return taco;
+_chp._tacoForDOM = function(taco) {
+  if (!_is(taco, 'object') || !taco.t) return taco;
   var result = { t: taco.t };
   if (taco.a) result.a = taco.a;
   if (taco.c != null) {
-    if (Array.isArray(taco.c)) {
+    if (_isA(taco.c)) {
       result.c = taco.c.map(function(child) { return this._tacoForDOM(child); }.bind(this));
-    } else if (typeof taco.c === 'object' && taco.c.t) {
+    } else if (_is(taco.c, 'object') && taco.c.t) {
       result.c = this._tacoForDOM(taco.c);
     } else {
       result.c = taco.c;
     }
   }
   // Intentionally strip o (no mounted/unmount/state/render on sub-elements)
+  if (taco.o && (taco.o.mounted || taco.o.render || taco.o.unmount)) {
+    _cw('bw: _tacoForDOM stripped o.mounted/render/unmount from child <' + taco.t +
+      '>. Use onclick attribute or bw.component() for child interactivity.');
+  }
   return result;
 };
 
 /**
  * Unmount: remove from DOM, deactivate, preserve state for re-mount.
  */
-ComponentHandle.prototype.unmount = function() {
+_chp.unmount = function() {
   if (!this.mounted) return;
 
   // unmount hook
@@ -5464,12 +6090,23 @@ ComponentHandle.prototype.unmount = function() {
 /**
  * Destroy: unmount + clear state + unregister actions.
  */
-ComponentHandle.prototype.destroy = function() {
+_chp.destroy = function() {
   // willDestroy hook
   if (this._hooks.willDestroy) {
     this._hooks.willDestroy(this);
   }
 
+  // Cascade destroy to children depth-first (Bug #5)
+  for (var ci = this._children.length - 1; ci >= 0; ci--) {
+    this._children[ci].destroy();
+  }
+  this._children = [];
+  if (this._parent) {
+    var idx = this._parent._children.indexOf(this);
+    if (idx >= 0) this._parent._children.splice(idx, 1);
+    this._parent = null;
+  }
+
   this.unmount();
 
   // Unregister actions from function registry
@@ -5496,12 +6133,36 @@ ComponentHandle.prototype.destroy = function() {
  * Flush dirty state: resolve changed bindings and apply to DOM.
  * @private
  */
-ComponentHandle.prototype._flush = function() {
+_chp._flush = function() {
   this._scheduled = false;
-  var changedKeys = Object.keys(this._dirtyKeys);
+  var changedKeys = _keys(this._dirtyKeys);
   this._dirtyKeys = {};
   if (changedKeys.length === 0 || !this.mounted) return;
 
+  // Factory rebuild: if a BCCL factory exists and changed keys overlap factory props,
+  // rebuild the TACO from the factory with merged state (Bug #6)
+  if (this._factory) {
+    var rebuildNeeded = false;
+    for (var fi = 0; fi < changedKeys.length; fi++) {
+      if (_hop.call(this._factory.props, changedKeys[fi])) {
+        rebuildNeeded = true; break;
+      }
+    }
+    if (rebuildNeeded) {
+      var merged = {};
+      for (var mk in this._factory.props) if (_hop.call(this._factory.props, mk)) merged[mk] = this._factory.props[mk];
+      for (var sk in this._state) if (_hop.call(this._state, sk)) merged[sk] = this._state[sk];
+      this._factory.props = merged;
+      var newTaco = bw.make(this._factory.type, merged);
+      newTaco._bwFactory = this._factory;
+      this.taco = newTaco;
+      this._originalTaco = this._deepCloneTaco(newTaco);
+      this._render();
+      if (this._hooks.onUpdate) this._hooks.onUpdate(this, changedKeys);
+      return;
+    }
+  }
+
   // willUpdate hook
   if (this._hooks.willUpdate) {
     this._hooks.willUpdate(this, changedKeys);
@@ -5540,7 +6201,7 @@ ComponentHandle.prototype._flush = function() {
  * Returns list of patches to apply.
  * @private
  */
-ComponentHandle.prototype._resolveBindings = function(changedKeys) {
+_chp._resolveBindings = function(changedKeys) {
   var patches = [];
   for (var i = 0; i < this._bindings.length; i++) {
     var b = this._bindings[i];
@@ -5576,11 +6237,14 @@ ComponentHandle.prototype._resolveBindings = function(changedKeys) {
  * Apply patches to DOM.
  * @private
  */
-ComponentHandle.prototype._applyPatches = function(patches) {
+_chp._applyPatches = function(patches) {
   for (var i = 0; i < patches.length; i++) {
     var p = patches[i];
     var el = this._bw_refs[p.refId];
-    if (!el) continue;
+    if (!el) {
+      if (bw.debug) _cw('bw.debug: _applyPatches — ref "' + p.refId + '" not found in DOM');
+      continue;
+    }
     if (p.type === 'content') {
       el.textContent = p.value;
     } else if (p.type === 'attribute') {
@@ -5597,7 +6261,7 @@ ComponentHandle.prototype._applyPatches = function(patches) {
  * Resolve all bindings and apply (used for initial render).
  * @private
  */
-ComponentHandle.prototype._resolveAndApplyAll = function() {
+_chp._resolveAndApplyAll = function() {
   var patches = [];
   for (var i = 0; i < this._bindings.length; i++) {
     var b = this._bindings[i];
@@ -5620,7 +6284,7 @@ ComponentHandle.prototype._resolveAndApplyAll = function() {
  * Full re-render for structural changes (when/each branch switches).
  * @private
  */
-ComponentHandle.prototype._render = function() {
+_chp._render = function() {
   if (!this.element || !this.element.parentNode) return;
   var parent = this.element.parentNode;
   var nextSibling = this.element.nextSibling;
@@ -5660,7 +6324,7 @@ ComponentHandle.prototype._render = function() {
  * @param {string} event - Event name (e.g., 'click')
  * @param {Function} handler - Event handler
  */
-ComponentHandle.prototype.on = function(event, handler) {
+_chp.on = function(event, handler) {
   if (this.element) {
     this.element.addEventListener(event, handler);
   }
@@ -5672,7 +6336,7 @@ ComponentHandle.prototype.on = function(event, handler) {
  * @param {string} event - Event name
  * @param {Function} handler - Handler to remove
  */
-ComponentHandle.prototype.off = function(event, handler) {
+_chp.off = function(event, handler) {
   if (this.element) {
     this.element.removeEventListener(event, handler);
   }
@@ -5687,7 +6351,7 @@ ComponentHandle.prototype.off = function(event, handler) {
  * @param {Function} handler - Handler function
  * @returns {Function} Unsubscribe function
  */
-ComponentHandle.prototype.sub = function(topic, handler) {
+_chp.sub = function(topic, handler) {
   var unsub = bw.sub(topic, handler);
   this._subs.push(unsub);
   return unsub;
@@ -5698,10 +6362,10 @@ ComponentHandle.prototype.sub = function(topic, handler) {
  * @param {string} name - Action name
  * @param {...*} args - Arguments passed after comp
  */
-ComponentHandle.prototype.action = function(name) {
+_chp.action = function(name) {
   var fn = this._actions[name];
   if (!fn) {
-    console.warn('ComponentHandle.action: unknown action "' + name + '"');
+    _cw('ComponentHandle.action: unknown action "' + name + '"');
     return;
   }
   var args = [this].concat(Array.prototype.slice.call(arguments, 1));
@@ -5713,7 +6377,7 @@ ComponentHandle.prototype.action = function(name) {
  * @param {string} sel - CSS selector
  * @returns {Element|null}
  */
-ComponentHandle.prototype.select = function(sel) {
+_chp.select = function(sel) {
   return this.element ? this.element.querySelector(sel) : null;
 };
 
@@ -5722,7 +6386,7 @@ ComponentHandle.prototype.select = function(sel) {
  * @param {string} sel - CSS selector
  * @returns {Element[]}
  */
-ComponentHandle.prototype.selectAll = function(sel) {
+_chp.selectAll = function(sel) {
   if (!this.element) return [];
   return Array.prototype.slice.call(this.element.querySelectorAll(sel));
 };
@@ -5733,7 +6397,7 @@ ComponentHandle.prototype.selectAll = function(sel) {
  * @param {string} tag - User-defined identifier (e.g. 'dashboard_prod_east')
  * @returns {ComponentHandle} this (for chaining)
  */
-ComponentHandle.prototype.userTag = function(tag) {
+_chp.userTag = function(tag) {
   this._userTag = tag;
   if (this.element) {
     this.element.classList.add(tag);
@@ -5810,7 +6474,7 @@ bw.component = function(taco) {
  * and calls the named method. This is the bitwrench equivalent of
  * Win32 SendMessage(hwnd, msg, wParam, lParam).
  *
- * @param {string} target - Component UUID (data-bw_comp_id) or user tag (CSS class)
+ * @param {string} target - Component UUID (bw_uuid_*), comp ID (data-bw_comp_id), or user tag (CSS class)
  * @param {string} action - Method name to call on the component
  * @param {*} data - Data to pass to the method
  * @returns {boolean} True if message was dispatched successfully
@@ -5827,15 +6491,20 @@ bw.component = function(taco) {
  * };
  */
 bw.message = function(target, action, data) {
-  // Try data-bw_comp_id attribute first, then CSS class (user tag)
-  var el = bw.$('[data-bw_comp_id="' + target + '"]')[0];
-  if (!el) {
+  // Try bw._el() first (handles UUID class, nodeMap cache, getElementById)
+  var el = bw._el(target);
+  // Then try data-bw_comp_id attribute
+  if (!el || !el._bwComponentHandle) {
+    el = bw.$('[data-bw_comp_id="' + target + '"]')[0];
+  }
+  // Then try CSS class (user tag)
+  if (!el || !el._bwComponentHandle) {
     el = bw.$('.' + target)[0];
   }
   if (!el || !el._bwComponentHandle) return false;
   var comp = el._bwComponentHandle;
-  if (typeof comp[action] !== 'function') {
-    console.warn('bw.message: unknown action "' + action + '" on component ' + target);
+  if (!_is(comp[action], 'function')) {
+    _cw('bw.message: unknown action "' + action + '" on component ' + target);
     return false;
   }
   comp[action](data);
@@ -5843,59 +6512,24 @@ bw.message = function(target, action, data) {
 };
 
 // ===================================================================================
-// 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 && typeof 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).
@@ -5910,9 +6544,9 @@ bw._builtinClientFunctions = {
  * @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);
@@ -5997,10 +6631,10 @@ bw.clientParse = function(str) {
  *   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:
@@ -6009,9 +6643,9 @@ bw.clientParse = function(str) {
  *
  * @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;
@@ -6037,15 +6671,15 @@ bw.clientApply = function(msg) {
   } else if (type === 'remove') {
     var toRemove = bw._el(target);
     if (!toRemove) return false;
-    if (typeof bw.cleanup === 'function') bw.cleanup(toRemove);
+    if (_is(bw.cleanup, 'function')) bw.cleanup(toRemove);
     toRemove.remove();
     return true;
 
   } else if (type === 'batch') {
-    if (!Array.isArray(msg.ops)) return false;
+    if (!_isA(msg.ops)) return false;
     var allOk = true;
     msg.ops.forEach(function(op) {
-      if (!bw.clientApply(op)) allOk = false;
+      if (!bw.apply(op)) allOk = false;
     });
     return allOk;
 
@@ -6058,26 +6692,26 @@ bw.clientApply = function(msg) {
       bw._clientFunctions[msg.name] = new Function('return ' + msg.body)();
       return true;
     } catch (e) {
-      console.error('[bw] register error:', msg.name, e);
+      _ce('[bw] register error:', msg.name, e);
       return false;
     }
 
   } else if (type === 'call') {
     if (!msg.name) return false;
-    var fn = bw._clientFunctions[msg.name] || bw._builtinClientFunctions[msg.name];
-    if (typeof fn !== 'function') return false;
+    var fn = bw._clientFunctions[msg.name];
+    if (!_is(fn, 'function')) return false;
     try {
-      var args = Array.isArray(msg.args) ? msg.args : [];
+      var args = _isA(msg.args) ? msg.args : [];
       fn.apply(null, args);
       return true;
     } catch (e) {
-      console.error('[bw] call error:', msg.name, e);
+      _ce('[bw] call error:', msg.name, e);
       return false;
     }
 
   } else if (type === 'exec') {
     if (!bw._allowExec) {
-      console.warn('[bw] exec rejected: allowExec is not enabled');
+      _cw('[bw] exec rejected: allowExec is not enabled');
       return false;
     }
     if (!msg.code) return false;
@@ -6085,7 +6719,7 @@ bw.clientApply = function(msg) {
       new Function(msg.code)();
       return true;
     } catch (e) {
-      console.error('[bw] exec error:', e);
+      _ce('[bw] exec error:', e);
       return false;
     }
   }
@@ -6093,139 +6727,6 @@ bw.clientApply = function(msg) {
   return false;
 };
 
-/**
- * Connect to a bwserve SSE endpoint and apply protocol messages automatically.
- *
- * Returns a connection object with sendAction(), on(), and close() methods.
- *
- * @param {string} url - SSE endpoint URL (e.g., '/__bw/events/client-1')
- * @param {Object} [opts] - Connection options
- * @param {string} [opts.transport='sse'] - Transport type: 'sse' (default) or 'poll'
- * @param {number} [opts.interval=2000] - Poll interval in ms (only for 'poll' transport)
- * @param {string} [opts.actionUrl] - POST endpoint for actions (default: derived from url)
- * @param {boolean} [opts.reconnect=true] - Auto-reconnect on disconnect
- * @param {boolean} [opts.allowExec=false] - Enable exec message type (arbitrary JS execution)
- * @param {Function} [opts.onStatus] - Status callback: 'connecting'|'connected'|'disconnected'
- * @param {Function} [opts.onMessage] - Raw message callback (before clientApply)
- * @returns {Object} Connection object { sendAction, on, close, status }
- * @category Server
- */
-bw.clientConnect = function(url, opts) {
-  opts = opts || {};
-  var transport = opts.transport || 'sse';
-  var actionUrl = opts.actionUrl || url.replace(/\/events\//, '/action/');
-  var reconnect = opts.reconnect !== false;
-  var onStatus = opts.onStatus || function() {};
-  var onMessage = opts.onMessage || null;
-  var handlers = {};
-  // Set the global allowExec flag from connection options
-  bw._allowExec = !!opts.allowExec;
-  var conn = {
-    status: 'connecting',
-    _es: null,
-    _pollTimer: null
-  };
-
-  function setStatus(s) {
-    conn.status = s;
-    onStatus(s);
-  }
-
-  function handleMessage(data) {
-    try {
-      var msg = typeof data === 'string' ? bw.clientParse(data) : data;
-      if (onMessage) onMessage(msg);
-      if (handlers.message) handlers.message(msg);
-      bw.clientApply(msg);
-    } catch (e) {
-      if (handlers.error) handlers.error(e);
-    }
-  }
-
-  if (transport === 'sse' && typeof EventSource !== 'undefined') {
-    setStatus('connecting');
-    var es = new EventSource(url);
-    conn._es = es;
-
-    es.onopen = function() {
-      setStatus('connected');
-      if (handlers.open) handlers.open();
-    };
-
-    es.onmessage = function(e) {
-      handleMessage(e.data);
-    };
-
-    es.onerror = function() {
-      if (conn.status === 'connected') {
-        setStatus('disconnected');
-      }
-      if (handlers.error) handlers.error(new Error('SSE connection error'));
-      if (!reconnect) {
-        es.close();
-      }
-      // EventSource auto-reconnects by default when reconnect=true
-    };
-  } else if (transport === 'poll') {
-    var interval = opts.interval || 2000;
-    setStatus('connected');
-    conn._pollTimer = setInterval(function() {
-      fetch(url).then(function(r) { return r.json(); }).then(function(msgs) {
-        if (Array.isArray(msgs)) {
-          msgs.forEach(handleMessage);
-        } else if (msgs && msgs.type) {
-          handleMessage(msgs);
-        }
-      }).catch(function(e) {
-        if (handlers.error) handlers.error(e);
-      });
-    }, interval);
-  }
-
-  /**
-   * Send an action to the server via POST.
-   * @param {string} action - Action name
-   * @param {Object} [data] - Action payload
-   */
-  conn.sendAction = function(action, data) {
-    var body = JSON.stringify({ type: 'action', action: action, data: data || {} });
-    fetch(actionUrl, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: body
-    }).catch(function(e) {
-      if (handlers.error) handlers.error(e);
-    });
-  };
-
-  /**
-   * Register an event handler.
-   * @param {string} event - 'open'|'message'|'error'|'close'
-   * @param {Function} handler
-   */
-  conn.on = function(event, handler) {
-    handlers[event] = handler;
-    return conn;
-  };
-
-  /**
-   * Close the connection.
-   */
-  conn.close = function() {
-    if (conn._es) {
-      conn._es.close();
-      conn._es = null;
-    }
-    if (conn._pollTimer) {
-      clearInterval(conn._pollTimer);
-      conn._pollTimer = null;
-    }
-    setStatus('disconnected');
-    if (handlers.close) handlers.close();
-  };
-
-  return conn;
-};
 
 // ===================================================================================
 // bw.inspect() — Debug utility
@@ -6253,33 +6754,33 @@ bw.inspect = function(target) {
     el = target.element;
     comp = target;
   } else {
-    if (typeof target === 'string') {
+    if (_is(target, 'string')) {
       el = bw.$(target)[0];
     }
     if (!el) {
-      console.warn('bw.inspect: element not found');
+      _cw('bw.inspect: element not found');
       return null;
     }
     comp = el._bwComponentHandle;
   }
   if (!comp) {
-    console.log('bw.inspect: no ComponentHandle on this element');
-    console.log('  Tag:', el.tagName);
-    console.log('  Classes:', el.className);
-    console.log('  _bw_state:', el._bw_state || '(none)');
+    _cl('bw.inspect: no ComponentHandle on this element');
+    _cl('  Tag:', el.tagName);
+    _cl('  Classes:', el.className);
+    _cl('  _bw_state:', el._bw_state || '(none)');
     return null;
   }
   var deps = comp._bindings.reduce(function(s, b) {
     return s.concat(b.deps || []);
   }, []).filter(function(v, i, a) { return a.indexOf(v) === i; });
   console.group('Component: ' + comp._bwId);
-  console.log('State:', comp._state);
-  console.log('Bindings:', comp._bindings.length, '(deps:', deps, ')');
-  console.log('Methods:', Object.keys(comp._methods));
-  console.log('Actions:', Object.keys(comp._actions));
-  console.log('User tag:', comp._userTag || '(none)');
-  console.log('Mounted:', comp.mounted);
-  console.log('Element:', comp.element);
+  _cl('State:', comp._state);
+  _cl('Bindings:', comp._bindings.length, '(deps:', deps, ')');
+  _cl('Methods:', _keys(comp._methods));
+  _cl('Actions:', _keys(comp._actions));
+  _cl('User tag:', comp._userTag || '(none)');
+  _cl('Mounted:', comp.mounted);
+  _cl('Element:', comp.element);
   console.groupEnd();
   return comp;
 };
@@ -6302,8 +6803,8 @@ bw.compile = function(taco) {
   // Pre-extract all binding expressions
   var precompiled = [];
   function walkExpressions(node) {
-    if (!node || typeof node !== 'object') return;
-    if (typeof node.c === 'string' && node.c.indexOf('${') >= 0) {
+    if (!_is(node, 'object')) return;
+    if (_is(node.c, 'string') && node.c.indexOf('${') >= 0) {
       var parsed = bw._parseBindings(node.c);
       for (var i = 0; i < parsed.length; i++) {
         try {
@@ -6318,9 +6819,9 @@ bw.compile = function(taco) {
     }
     if (node.a) {
       for (var key in node.a) {
-        if (Object.prototype.hasOwnProperty.call(node.a, key)) {
+        if (_hop.call(node.a, key)) {
           var v = node.a[key];
-          if (typeof v === 'string' && v.indexOf('${') >= 0) {
+          if (_is(v, 'string') && v.indexOf('${') >= 0) {
             var parsed2 = bw._parseBindings(v);
             for (var j = 0; j < parsed2.length; j++) {
               try {
@@ -6336,9 +6837,9 @@ bw.compile = function(taco) {
         }
       }
     }
-    if (Array.isArray(node.c)) {
+    if (_isA(node.c)) {
       for (var k = 0; k < node.c.length; k++) walkExpressions(node.c[k]);
-    } else if (node.c && typeof node.c === 'object' && node.c.t) {
+    } else if (_is(node.c, 'object') && node.c.t) {
       walkExpressions(node.c);
     }
   }
@@ -6350,7 +6851,7 @@ bw.compile = function(taco) {
     handle._precompiledBindings = precompiled;
     if (initialState) {
       for (var k in initialState) {
-        if (Object.prototype.hasOwnProperty.call(initialState, k)) {
+        if (_hop.call(initialState, k)) {
           handle._state[k] = initialState[k];
         }
       }
@@ -6381,18 +6882,18 @@ bw.compile = function(taco) {
 bw.css = function(rules, options = {}) {
   const { minify = false, pretty = !minify } = options;
 
-  if (typeof rules === 'string') return rules;
+  if (_is(rules, 'string')) return rules;
 
   let css = '';
   const indent = pretty ? '  ' : '';
   const newline = pretty ? '\n' : '';
   const space = pretty ? ' ' : '';
 
-  if (Array.isArray(rules)) {
+  if (_isA(rules)) {
     css = rules.map(rule => bw.css(rule, options)).join(newline);
-  } else if (typeof rules === 'object') {
+  } else if (_is(rules, 'object')) {
     Object.entries(rules).forEach(([selector, styles]) => {
-      if (typeof styles === 'object' && !Array.isArray(styles)) {
+      if (_is(styles, 'object')) {
         // Handle @media, @keyframes, @supports — recurse into nested block
         if (selector.charAt(0) === '@') {
           const inner = bw.css(styles, options);
@@ -6434,14 +6935,14 @@ bw.css = function(rules, options = {}) {
  * @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' });
  */
 bw.injectCSS = function(css, options = {}) {
   if (!bw._isBrowser) {
-    console.warn('bw.injectCSS requires a DOM environment');
+    _cw('bw.injectCSS requires a DOM environment');
     return null;
   }
   
@@ -6458,7 +6959,7 @@ bw.injectCSS = function(css, options = {}) {
   }
   
   // Convert CSS if needed
-  const cssStr = typeof css === 'string' ? css : bw.css(css, options);
+  const cssStr = _is(css, 'string') ? css : bw.css(css, options);
   
   // Set or append CSS
   if (append && styleEl.textContent) {
@@ -6479,113 +6980,19 @@ bw.injectCSS = function(css, options = {}) {
  * @param {...Object} styles - Style objects to merge (left-to-right)
  * @returns {Object} Merged style object
  * @category CSS & Styling
- * @see bw.u
  * @example
- * var style = bw.s(bw.u.flex, bw.u.gap4, { color: 'red' });
+ * var style = bw.s({ display: 'flex' }, { gap: '1rem' }, { color: 'red' });
  * // => { display: 'flex', gap: '1rem', color: 'red' }
  */
 bw.s = function() {
   var result = {};
   for (var i = 0; i < arguments.length; i++) {
     var arg = arguments[i];
-    if (arg && typeof arg === 'object') Object.assign(result, arg);
+    if (_is(arg, 'object')) Object.assign(result, arg);
   }
   return result;
 };
 
-/**
- * Pre-built CSS utility objects (like Tailwind utilities, but in JS).
- *
- * Compose with `bw.s()` to build inline styles without writing raw CSS strings.
- * Includes flex, padding, margin, typography, color, border, and transition utilities.
- *
- * @category CSS & Styling
- * @see bw.s
- * @example
- * { t: 'div', a: { style: bw.s(bw.u.flex, bw.u.gap4, bw.u.p4) },
- *   c: 'Flexbox with 1rem gap and padding' }
- */
-bw.u = {
-  // Display
-  flex: { display: 'flex' },
-  flexCol: { display: 'flex', flexDirection: 'column' },
-  flexRow: { display: 'flex', flexDirection: 'row' },
-  flexWrap: { display: 'flex', flexWrap: 'wrap' },
-  block: { display: 'block' },
-  inline: { display: 'inline' },
-  hidden: { display: 'none' },
-
-  // Flex alignment
-  justifyCenter: { justifyContent: 'center' },
-  justifyBetween: { justifyContent: 'space-between' },
-  justifyEnd: { justifyContent: 'flex-end' },
-  alignCenter: { alignItems: 'center' },
-  alignStart: { alignItems: 'flex-start' },
-  alignEnd: { alignItems: 'flex-end' },
-
-  // Gap (0.25rem increments)
-  gap1: { gap: '0.25rem' },
-  gap2: { gap: '0.5rem' },
-  gap3: { gap: '0.75rem' },
-  gap4: { gap: '1rem' },
-  gap6: { gap: '1.5rem' },
-  gap8: { gap: '2rem' },
-
-  // Padding
-  p0: { padding: '0' },
-  p1: { padding: '0.25rem' },
-  p2: { padding: '0.5rem' },
-  p3: { padding: '0.75rem' },
-  p4: { padding: '1rem' },
-  p6: { padding: '1.5rem' },
-  p8: { padding: '2rem' },
-  px4: { paddingLeft: '1rem', paddingRight: '1rem' },
-  py2: { paddingTop: '0.5rem', paddingBottom: '0.5rem' },
-  py4: { paddingTop: '1rem', paddingBottom: '1rem' },
-
-  // Margin (same scale)
-  m0: { margin: '0' },
-  m4: { margin: '1rem' },
-  mt2: { marginTop: '0.5rem' },
-  mt4: { marginTop: '1rem' },
-  mb2: { marginBottom: '0.5rem' },
-  mb4: { marginBottom: '1rem' },
-  mx_auto: { marginLeft: 'auto', marginRight: 'auto' },
-
-  // Typography
-  textSm: { fontSize: '0.875rem' },
-  textBase: { fontSize: '1rem' },
-  textLg: { fontSize: '1.125rem' },
-  textXl: { fontSize: '1.25rem' },
-  text2xl: { fontSize: '1.5rem' },
-  text3xl: { fontSize: '1.875rem' },
-  bold: { fontWeight: '700' },
-  semibold: { fontWeight: '600' },
-  italic: { fontStyle: 'italic' },
-  textCenter: { textAlign: 'center' },
-  textRight: { textAlign: 'right' },
-
-  // Colors (from design tokens)
-  bgWhite: { background: '#ffffff' },
-  bgTeal: { background: '#006666', color: '#ffffff' },
-  textWhite: { color: '#ffffff' },
-  textTeal: { color: '#006666' },
-  textMuted: { color: '#888' },
-
-  // Borders
-  rounded: { borderRadius: '0.375rem' },
-  roundedLg: { borderRadius: '0.5rem' },
-  roundedFull: { borderRadius: '9999px' },
-  border: { border: '1px solid #d8d8d8' },
-
-  // Sizing
-  wFull: { width: '100%' },
-  hFull: { height: '100%' },
-
-  // Transitions
-  transition: { transition: 'all 0.2s ease' }
-};
-
 /**
  * Generate responsive CSS with media query breakpoints.
  *
@@ -6611,7 +7018,7 @@ bw.u = {
 bw.responsive = function(selector, breakpoints) {
   var sizes = { sm: '576px', md: '768px', lg: '992px', xl: '1200px' };
   var parts = [];
-  Object.keys(breakpoints).forEach(function(key) {
+  _keys(breakpoints).forEach(function(key) {
     var rules = {};
     if (key === 'base') {
       rules[selector] = breakpoints[key];
@@ -6683,18 +7090,18 @@ if (bw._isBrowser) {
     if (!selector) return [];
     
     // Already an array
-    if (Array.isArray(selector)) return selector;
+    if (_isA(selector)) return selector;
     
     // Single element
     if (selector.nodeType) return [selector];
     
     // NodeList or HTMLCollection
-    if (selector.length !== undefined && typeof selector !== 'string') {
+    if (selector.length !== undefined && !_is(selector, 'string')) {
       return Array.from(selector);
     }
     
     // CSS selector string
-    if (typeof selector === 'string') {
+    if (_is(selector, 'string')) {
       return Array.from(document.querySelectorAll(selector));
     }
     
@@ -6707,103 +7114,49 @@ if (bw._isBrowser) {
   };
 }
 
-/**
- * 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.
+ * Generate a complete styles object from seed colors and layout config.
+ * Pure function — no DOM, no state, no side effects.
  *
- * 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.
+ * All parameters are optional. Defaults to the bitwrench default palette.
  *
- * @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)
+ * @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);
@@ -6811,131 +7164,207 @@ bw.generateTheme = function(name, config) {
   // 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.applyTheme = function(mode) {
-  if (!bw._isBrowser) return mode || 'primary';
-  var root = document.documentElement;
-  var isLight = bw._activeTheme ? bw._activeTheme.isLightPrimary : true;
-
-  var wantAlt;
-  if (mode === 'primary')        wantAlt = false;
-  else if (mode === 'alternate') wantAlt = true;
-  else if (mode === 'light')     wantAlt = !isLight;
-  else if (mode === 'dark')      wantAlt = isLight;
-  else                           wantAlt = false;
-
-  if (wantAlt) {
-    root.classList.add('bw_theme_alt');
-  } else {
-    root.classList.remove('bw_theme_alt');
+ * bw.loadStyles();                                          // defaults, global
+ * bw.loadStyles({ primary: '#4f46e5' });                    // custom, global
+ * bw.loadStyles({ primary: '#4f46e5' }, '#my-dashboard');   // custom, scoped
+ */
+bw.loadStyles = function(config, scope) {
+  // Also inject structural CSS first (only once)
+  if (bw._isBrowser) {
+    var existing = document.getElementById('bw_structural');
+    if (!existing) {
+      var structuralCSS = bw.css(getStructuralStyles());
+      bw.injectCSS(structuralCSS, { id: 'bw_structural', append: false });
+    }
   }
+  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.clearTheme = function() {
-  if (bw._activeThemeStyleIds && bw._isBrowser) {
-    bw._activeThemeStyleIds.forEach(function(id) {
-      var el = document.getElementById(id);
-      if (el) el.remove();
-    });
-    bw._activeThemeStyleIds = null;
+ * bw.clearStyles();                    // remove global styles
+ * bw.clearStyles('#my-dashboard');     // remove scoped styles
+ * bw.clearStyles('reset');             // remove the CSS reset
+ */
+bw.clearStyles = function(scope) {
+  if (!bw._isBrowser) return;
+  var styleId = _scopeToStyleId(scope);
+  var el = document.getElementById(styleId);
+  if (el) el.remove();
+
+  // Also remove bw_theme_alt from the relevant element
+  if (scope && scope !== 'reset' && scope !== 'global') {
+    var targets = bw.$(scope);
+    if (targets[0]) targets[0].classList.remove('bw_theme_alt');
+  } else if (!scope || scope === 'global') {
+    document.documentElement.classList.remove('bw_theme_alt');
   }
-  bw._activeTheme = null;
-  bw._activeThemeMode = 'primary';
 };
 
 // Expose color utility functions on bw namespace
@@ -7158,10 +7587,15 @@ bw.copyToClipboard = function(text) {
  * @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
@@ -7173,7 +7607,12 @@ bw.copyToClipboard = function(text) {
  *   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) {
@@ -7186,41 +7625,47 @@ bw.makeTable = function(config) {
     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 
-    ? Object.keys(data[0]).map(key => ({ key, label: key }))
+  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 (typeof aVal === 'number' && typeof bVal === 'number') {
+      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 {
@@ -7228,23 +7673,32 @@ bw.makeTable = function(config) {
       }
     });
   }
-  
+
+  // 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',
@@ -7267,24 +7721,87 @@ bw.makeTable = function(config) {
       }))
     }
   };
-  
-  // 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
+      }
+    ]
+  };
 };
 
 /**
@@ -7323,7 +7840,7 @@ bw.makeTable = function(config) {
 bw.makeTableFromArray = function(config) {
   const { data = [], headerRow = true, columns, ...rest } = config;
 
-  if (!Array.isArray(data) || data.length === 0) {
+  if (!_isA(data) || data.length === 0) {
     return bw.makeTable({ data: [], columns: columns || [], ...rest });
   }
 
@@ -7405,7 +7922,7 @@ bw.makeBarChart = function(config) {
     className = ''
   } = config;
 
-  if (!Array.isArray(data) || data.length === 0) {
+  if (!_isA(data) || data.length === 0) {
     return { t: 'div', a: { class: ('bw_bar_chart_container ' + className).trim() }, c: '' };
   }
 
@@ -7554,7 +8071,7 @@ bw._componentRegistry = new Map();
  */
 bw.render = function(element, position, taco) {
   // Get target element
-  const targetEl = typeof element === 'string' 
+  const targetEl = _is(element, 'string')
     ? document.querySelector(element) 
     : element;
     
@@ -7704,7 +8221,7 @@ bw.render = function(element, position, taco) {
     setContent(content) {
       this._taco.c = content;
       if (this.element) {
-        if (typeof content === 'string') {
+        if (_is(content, 'string')) {
           this.element.textContent = content;
         } else {
           // Re-render for complex content