bitwrench 2.0.17 → 2.0.18

package/src/bitwrench.js

@@ -8,11 +8,11 @@
  */
 
 import { VERSION_INFO } from './version.js';
-import { getStructuralStyles,
-         generateThemedCSS, generateAlternateCSS, derivePalette as _derivePalette,
+import { getStructuralStyles, getResetStyles,
+         generateThemedCSS, derivePalette as _derivePalette,
          DEFAULT_PALETTE_CONFIG, SPACING_PRESETS, RADIUS_PRESETS, THEME_PRESETS,
          TYPE_RATIO_PRESETS, ELEVATION_PRESETS, MOTION_PRESETS, generateTypeScale,
-         resolveLayout } from './bitwrench-styles.js';
+         resolveLayout, scopeRulesUnder } from './bitwrench-styles.js';
 import { hexToHsl, hslToHex, adjustLightness, mixColor,
          relativeLuminance, textOnColor, deriveShades,
          derivePalette, harmonize, deriveAlternateSeed, deriveAlternateConfig,
@@ -364,7 +364,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;
   }
@@ -417,6 +422,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.
  *
@@ -466,6 +549,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.
@@ -730,7 +849,7 @@ bw.htmlPage = function(opts) {
       ? (THEME_PRESETS[theme.toLowerCase()] || null)
       : theme;
     if (themeConfig) {
-      var themeResult = bw.generateTheme('', Object.assign({}, themeConfig, { inject: false }));
+      var themeResult = bw.makeStyles(themeConfig);
       themeCSS = themeResult.css;
     }
   }
@@ -756,14 +875,14 @@ bw.htmlPage = function(opts) {
   // Combine all CSS
   var allCSS = (themeCSS ? themeCSS + '\n' : '') + css;
 
-  // Body-end script: registry entries + optional loadDefaultStyles
+  // Body-end script: registry entries + optional loadStyles
   var bodyEndScript = '';
   var bodyEndParts = [];
   if (registryEntries) {
     bodyEndParts.push(registryEntries);
   }
   if (runtime === 'inline' || runtime === 'cdn') {
-    bodyEndParts.push('if(typeof bw!=="undefined"){bw.loadDefaultStyles();}');
+    bodyEndParts.push('if(typeof bw!=="undefined"){bw.loadStyles();}');
   }
   if (bodyEndParts.length > 0) {
     bodyEndScript = '<script>\n' + bodyEndParts.join('\n') + '\n</script>';
@@ -937,6 +1056,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();
@@ -1309,6 +1436,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]');
 
@@ -1324,6 +1461,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(); });
@@ -1348,6 +1489,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(); });
@@ -1959,7 +2104,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
   };
@@ -2898,7 +3043,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
@@ -2915,9 +3060,14 @@ 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;
@@ -2931,59 +3081,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 && _is(el.focus, 'function')) el.focus();
-  },
-  download: function(filename, content, mimeType) {
-    if (typeof document === 'undefined') return;
-    var blob = new Blob([content], { type: mimeType || 'text/plain' });
-    var a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(a.href);
-  },
-  clipboard: function(text) {
-    if (typeof navigator !== 'undefined' && navigator.clipboard) {
-      navigator.clipboard.writeText(text);
-    }
-  },
-  redirect: function(url) {
-    if (typeof window !== 'undefined') window.location.href = url;
-  },
-  log: function() {
-    console.log.apply(console, arguments);
-  }
-};
-
 /**
  * Parse a bwserve protocol message string, supporting both strict JSON
  * and r-prefixed relaxed JSON (single-quoted strings, trailing commas).
@@ -2998,9 +3113,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);
@@ -3085,10 +3200,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:
@@ -3097,9 +3212,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;
@@ -3133,7 +3248,7 @@ bw.clientApply = function(msg) {
     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;
 
@@ -3152,7 +3267,7 @@ bw.clientApply = function(msg) {
 
   } else if (type === 'call') {
     if (!msg.name) return false;
-    var fn = bw._clientFunctions[msg.name] || bw._builtinClientFunctions[msg.name];
+    var fn = bw._clientFunctions[msg.name];
     if (!_is(fn, 'function')) return false;
     try {
       var args = _isA(msg.args) ? msg.args : [];
@@ -3181,139 +3296,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 = _is(data, 'string') ? bw.clientParse(data) : data;
-      if (onMessage) onMessage(msg);
-      if (handlers.message) handlers.message(msg);
-      bw.clientApply(msg);
-    } catch (e) {
-      if (handlers.error) handlers.error(e);
-    }
-  }
-
-  if (transport === 'sse' && typeof EventSource !== 'undefined') {
-    setStatus('connecting');
-    var es = new EventSource(url);
-    conn._es = es;
-
-    es.onopen = function() {
-      setStatus('connected');
-      if (handlers.open) handlers.open();
-    };
-
-    es.onmessage = function(e) {
-      handleMessage(e.data);
-    };
-
-    es.onerror = function() {
-      if (conn.status === 'connected') {
-        setStatus('disconnected');
-      }
-      if (handlers.error) handlers.error(new Error('SSE connection error'));
-      if (!reconnect) {
-        es.close();
-      }
-      // EventSource auto-reconnects by default when reconnect=true
-    };
-  } else if (transport === 'poll') {
-    var interval = opts.interval || 2000;
-    setStatus('connected');
-    conn._pollTimer = setInterval(function() {
-      fetch(url).then(function(r) { return r.json(); }).then(function(msgs) {
-        if (_isA(msgs)) {
-          msgs.forEach(handleMessage);
-        } else if (msgs && msgs.type) {
-          handleMessage(msgs);
-        }
-      }).catch(function(e) {
-        if (handlers.error) handlers.error(e);
-      });
-    }, interval);
-  }
-
-  /**
-   * Send an action to the server via POST.
-   * @param {string} action - Action name
-   * @param {Object} [data] - Action payload
-   */
-  conn.sendAction = function(action, data) {
-    var body = JSON.stringify({ type: 'action', action: action, data: data || {} });
-    fetch(actionUrl, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: body
-    }).catch(function(e) {
-      if (handlers.error) handlers.error(e);
-    });
-  };
-
-  /**
-   * Register an event handler.
-   * @param {string} event - 'open'|'message'|'error'|'close'
-   * @param {Function} handler
-   */
-  conn.on = function(event, handler) {
-    handlers[event] = handler;
-    return conn;
-  };
-
-  /**
-   * Close the connection.
-   */
-  conn.close = function() {
-    if (conn._es) {
-      conn._es.close();
-      conn._es = null;
-    }
-    if (conn._pollTimer) {
-      clearInterval(conn._pollTimer);
-      conn._pollTimer = null;
-    }
-    setStatus('disconnected');
-    if (handlers.close) handlers.close();
-  };
-
-  return conn;
-};
 
 // ===================================================================================
 // bw.inspect() — Debug utility
@@ -3522,7 +3504,7 @@ 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' });
@@ -3567,9 +3549,8 @@ 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() {
@@ -3581,99 +3562,6 @@ bw.s = function() {
   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.
  *
@@ -3795,103 +3683,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);
@@ -3899,131 +3733,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.
  *
- * @param {string} mode - 'primary' | 'alternate' | 'light' | 'dark'
- * @returns {string} Active mode: 'primary' or 'alternate'
+ * Equivalent to: `bw.applyStyles(bw.makeStyles(config), scope)`
+ *
+ * @param {Object} [config] - Style configuration (same as `makeStyles`)
+ * @param {string} [scope] - Scope selector (same as `applyStyles`)
+ * @returns {Element|null} The `<style>` element, or null in Node.js
  * @category CSS & Styling
- * @see bw.generateTheme
- * @see bw.toggleTheme
+ * @see bw.makeStyles
+ * @see bw.applyStyles
  * @example
- * bw.applyTheme('alternate');  // switch to alternate palette
- * bw.applyTheme('dark');       // switch to whichever palette is darker
- * bw.applyTheme('primary');    // switch back to primary palette
+ * bw.loadStyles();                                          // defaults, global
+ * bw.loadStyles({ primary: '#4f46e5' });                    // custom, global
+ * bw.loadStyles({ primary: '#4f46e5' }, '#my-dashboard');   // custom, scoped
  */
-bw.applyTheme = function(mode) {
-  if (!bw._isBrowser) return mode || 'primary';
-  var root = document.documentElement;
-  var isLight = bw._activeTheme ? bw._activeTheme.isLightPrimary : true;
-
-  var wantAlt;
-  if (mode === 'primary')        wantAlt = false;
-  else if (mode === 'alternate') wantAlt = true;
-  else if (mode === 'light')     wantAlt = !isLight;
-  else if (mode === 'dark')      wantAlt = isLight;
-  else                           wantAlt = false;
-
-  if (wantAlt) {
-    root.classList.add('bw_theme_alt');
-  } else {
-    root.classList.remove('bw_theme_alt');
+bw.loadStyles = function(config, scope) {
+  // Also inject structural CSS first (only once)
+  if (bw._isBrowser) {
+    var existing = document.getElementById('bw_structural');
+    if (!existing) {
+      var structuralCSS = bw.css(getStructuralStyles());
+      bw.injectCSS(structuralCSS, { id: 'bw_structural', append: false });
+    }
   }
+  return bw.applyStyles(bw.makeStyles(config), scope);
+};
 
-  bw._activeThemeMode = wantAlt ? 'alternate' : 'primary';
-  return bw._activeThemeMode;
+/**
+ * Inject the CSS reset (box-sizing, html/body font, reduced-motion).
+ * Idempotent — if already injected, returns the existing `<style>` element.
+ *
+ * @returns {Element|null} The `<style>` element, or null in Node.js
+ * @category CSS & Styling
+ * @see bw.loadStyles
+ * @see bw.clearStyles
+ * @example
+ * bw.loadReset();  // inject once, safe to call multiple times
+ */
+bw.loadReset = function() {
+  if (!bw._isBrowser) return null;
+  var existing = document.getElementById('bw_style_reset');
+  if (existing) return existing;
+  return bw.injectCSS(bw.css(getResetStyles()), { id: 'bw_style_reset', append: false });
 };
 
 /**
- * Toggle between primary and alternate theme palettes.
+ * Toggle between primary and alternate palettes.
  *
+ * Adds/removes the `bw_theme_alt` class on the scoping element.
+ * Without a scope, toggles on `<html>` (global).
+ * With a scope, toggles on the first matching element.
+ *
+ * @param {string} [scope] - Scope selector (e.g. '#my-dashboard'). Omit for global.
  * @returns {string} Active mode after toggle: 'primary' or 'alternate'
  * @category CSS & Styling
- * @see bw.applyTheme
- * @see bw.generateTheme
+ * @see bw.applyStyles
+ * @see bw.clearStyles
  * @example
- * bw.toggleTheme();  // flip between primary and alternate
+ * bw.toggleStyles();                   // global toggle on <html>
+ * bw.toggleStyles('#my-dashboard');    // scoped toggle
  */
-bw.toggleTheme = function() {
-  var current = bw._activeThemeMode || 'primary';
-  return bw.applyTheme(current === 'primary' ? 'alternate' : 'primary');
+bw.toggleStyles = function(scope) {
+  if (!bw._isBrowser) return 'primary';
+  var target;
+  if (scope) {
+    var els = bw.$(scope);
+    target = els[0];
+  } else {
+    target = document.documentElement;
+  }
+  if (!target) return 'primary';
+
+  var hasAlt = target.classList.contains('bw_theme_alt');
+  if (hasAlt) {
+    target.classList.remove('bw_theme_alt');
+    return 'primary';
+  } else {
+    target.classList.add('bw_theme_alt');
+    return 'alternate';
+  }
 };
 
 /**
- * Remove the currently active theme's injected style elements from the DOM.
- * Use this before generating a new theme with a different name to prevent
- * stale CSS accumulation.
+ * Remove injected styles for a given scope.
  *
+ * Finds the `<style>` element by id and removes it. Also removes
+ * the `bw_theme_alt` class from the relevant element.
+ *
+ * @param {string} [scope] - Scope selector. Omit to remove global styles.
  * @category CSS & Styling
- * @see bw.generateTheme
+ * @see bw.applyStyles
+ * @see bw.loadStyles
  * @example
- * bw.clearTheme();                   // remove current theme styles
- * bw.generateTheme('sunset', conf);  // inject fresh theme
+ * bw.clearStyles();                    // remove global styles
+ * bw.clearStyles('#my-dashboard');     // remove scoped styles
+ * bw.clearStyles('reset');             // remove the CSS reset
  */
-bw.clearTheme = function() {
-  if (bw._activeThemeStyleIds && bw._isBrowser) {
-    bw._activeThemeStyleIds.forEach(function(id) {
-      var el = document.getElementById(id);
-      if (el) el.remove();
-    });
-    bw._activeThemeStyleIds = null;
+bw.clearStyles = function(scope) {
+  if (!bw._isBrowser) return;
+  var styleId = _scopeToStyleId(scope);
+  var el = document.getElementById(styleId);
+  if (el) el.remove();
+
+  // Also remove bw_theme_alt from the relevant element
+  if (scope && scope !== 'reset' && scope !== 'global') {
+    var targets = bw.$(scope);
+    if (targets[0]) targets[0].classList.remove('bw_theme_alt');
+  } else if (!scope || scope === 'global') {
+    document.documentElement.classList.remove('bw_theme_alt');
   }
-  bw._activeTheme = null;
-  bw._activeThemeMode = 'primary';
 };
 
 // Expose color utility functions on bw namespace
@@ -4246,10 +4156,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
@@ -4261,7 +4176,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) {
@@ -4274,41 +4194,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 
+  const cols = columns || (data.length > 0
     ? _keys(data[0]).map(key => ({ key, label: key }))
     : []);
-    
+
   // Current sort state
   let currentSortColumn = sortColumn || null;
   let currentSortDirection = sortDirection;
-  
+
   // Sort data if column specified
   let sortedData = [...data];
   if (currentSortColumn) {
     sortedData.sort((a, b) => {
       const aVal = a[currentSortColumn];
       const bVal = b[currentSortColumn];
-      
+
       // Handle different types
       if (_is(aVal, 'number') && _is(bVal, 'number')) {
         return currentSortDirection === 'asc' ? aVal - bVal : bVal - aVal;
       }
-      
+
       // String comparison
       const aStr = String(aVal || '').toLowerCase();
       const bStr = String(bVal || '').toLowerCase();
-      
+
       if (currentSortDirection === 'asc') {
         return aStr.localeCompare(bStr);
       } else {
@@ -4316,23 +4242,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',
@@ -4355,24 +4290,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
+      }
+    ]
+  };
 };
 
 /**