bitwrench 2.0.18 → 2.0.20

package/src/bitwrench-debug.js

@@ -0,0 +1,245 @@
+/**
+ * bitwrench-debug.js -- Standalone debug toolkit for bitwrench pages.
+ *
+ * Installs window.bwd with helper functions ported from bwcli attach:
+ *   bwd.tree(sel, depth)      -- print DOM tree to console
+ *   bwd.listen(sel, event)    -- delegated event logging
+ *   bwd.unlisten(sel, event)  -- remove event listener
+ *   bwd.state(sel?)           -- dump stateful elements via console.table
+ *   bwd.screenshot(sel?)      -- capture screenshot via html2canvas
+ *
+ * NOT bundled into bitwrench core. Load separately via script tag or
+ * console paste. Auto-loads bitwrench from CDN if not present.
+ *
+ * @module bitwrench-debug
+ */
+(function() {
+  'use strict';
+
+  var CDN_BW = 'https://cdn.jsdelivr.net/npm/bitwrench@2/dist/bitwrench.umd.min.js';
+  var CDN_H2C = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
+  var _listeners = {};
+
+  function _loadScript(url) {
+    return new Promise(function(resolve, reject) {
+      var s = document.createElement('script');
+      s.src = url;
+      s.onload = function() { resolve(); };
+      s.onerror = function() { reject(new Error('Failed to load ' + url)); };
+      document.head.appendChild(s);
+    });
+  }
+
+  // -- tree -------------------------------------------------------------------
+
+  function _walk(el, depth, maxDepth) {
+    if (!el || depth > maxDepth) return null;
+    var info = { tag: el.tagName ? el.tagName.toLowerCase() : '#text' };
+    if (el.id) info.id = el.id;
+    if (el.className && typeof el.className === 'string') {
+      info.cls = el.className.split(' ').slice(0, 5).join(' ');
+    }
+    if (el.children && el.children.length > 0 && depth < maxDepth) {
+      info.children = [];
+      for (var i = 0; i < Math.min(el.children.length, 20); i++) {
+        var c = _walk(el.children[i], depth + 1, maxDepth);
+        if (c) info.children.push(c);
+      }
+    }
+    return info;
+  }
+
+  function _print(node, indent) {
+    if (!node) return;
+    var label = node.tag || '?';
+    if (node.id) label += '#' + node.id;
+    if (node.cls) label += '.' + node.cls.split(' ').join('.');
+    console.log('  '.repeat(indent) + label);
+    if (node.children) {
+      for (var i = 0; i < node.children.length; i++) {
+        _print(node.children[i], indent + 1);
+      }
+    }
+  }
+
+  /**
+   * Print an indented DOM tree to the console.
+   * @param {string} [sel='body'] - CSS selector for the root element
+   * @param {number} [depth=3] - Max depth to walk
+   * @returns {object|null} The tree data structure
+   */
+  function tree(sel, depth) {
+    sel = sel || 'body';
+    depth = depth || 3;
+    var root = document.querySelector(sel);
+    if (!root) {
+      console.log('(no element found for "' + sel + '")');
+      return null;
+    }
+    var data = _walk(root, 0, depth);
+    _print(data, 0);
+    return data;
+  }
+
+  // -- listen / unlisten ------------------------------------------------------
+
+  /**
+   * Add a delegated event listener that logs matching events to the console.
+   * @param {string} sel - CSS selector to match via closest()
+   * @param {string} event - DOM event name (e.g. 'click')
+   */
+  function listen(sel, event) {
+    var key = sel + ':::' + event;
+    if (_listeners[key]) {
+      console.log('[bwd] already listening for ' + event + ' on ' + sel);
+      return;
+    }
+    var fn = function(e) {
+      var el = e.target.closest ? e.target.closest(sel) : null;
+      if (!el) return;
+      console.log('[bwd] ' + event + ' on ' + sel + ' -> ' +
+        el.tagName + (el.id ? '#' + el.id : '') +
+        (el.textContent ? ' "' + el.textContent.slice(0, 50).trim() + '"' : ''));
+    };
+    document.addEventListener(event, fn, true);
+    _listeners[key] = { fn: fn, event: event };
+    console.log('[bwd] listening for ' + event + ' on ' + sel);
+  }
+
+  /**
+   * Remove a previously added delegated event listener.
+   * @param {string} sel - CSS selector used in listen()
+   * @param {string} event - DOM event name used in listen()
+   */
+  function unlisten(sel, event) {
+    var key = sel + ':::' + event;
+    var entry = _listeners[key];
+    if (!entry) {
+      console.log('[bwd] no listener for ' + event + ' on ' + sel);
+      return;
+    }
+    document.removeEventListener(entry.event, entry.fn, true);
+    delete _listeners[key];
+    console.log('[bwd] stopped listening for ' + event + ' on ' + sel);
+  }
+
+  // -- state ------------------------------------------------------------------
+
+  /**
+   * Dump all stateful (.bw_lc) elements and their _bw_state via console.table.
+   * @param {string} [sel='.bw_lc'] - CSS selector to query
+   * @returns {Array} Array of {id, uuid, state} objects
+   */
+  function state(sel) {
+    sel = sel || '.bw_lc';
+    var els = document.querySelectorAll(sel);
+    var rows = [];
+    for (var i = 0; i < els.length; i++) {
+      var el = els[i];
+      var uuid = '';
+      if (typeof window !== 'undefined' && window.bw && window.bw.getUUID) {
+        uuid = window.bw.getUUID(el) || '';
+      }
+      rows.push({
+        id: el.id || '',
+        uuid: uuid,
+        state: el._bw_state || null
+      });
+    }
+    if (rows.length === 0) {
+      console.log('[bwd] no stateful elements found for "' + sel + '"');
+    } else if (typeof console.table === 'function') {
+      console.table(rows);
+    } else {
+      console.log(rows);
+    }
+    return rows;
+  }
+
+  // -- screenshot -------------------------------------------------------------
+
+  /**
+   * Capture a screenshot via html2canvas and trigger a download.
+   * Loads html2canvas from CDN if not present.
+   * @param {string} [sel='body'] - CSS selector for the element to capture
+   * @returns {Promise} Resolves when screenshot is saved
+   */
+  function screenshot(sel) {
+    sel = sel || 'body';
+    var el = document.querySelector(sel);
+    if (!el) {
+      console.log('[bwd] no element found for "' + sel + '"');
+      return Promise.resolve(null);
+    }
+
+    var p = (typeof window !== 'undefined' && window.html2canvas)
+      ? Promise.resolve(window.html2canvas)
+      : _loadScript(CDN_H2C).then(function() { return window.html2canvas; });
+
+    return p.then(function(h2c) {
+      console.log('[bwd] capturing ' + sel + ' ...');
+      return h2c(el, { useCORS: true });
+    }).then(function(canvas) {
+      var filename = 'screenshot-' + Date.now() + '.png';
+      canvas.toBlob(function(blob) {
+        if (typeof window !== 'undefined' && window.bw && window.bw.saveClientFile) {
+          window.bw.saveClientFile(filename, blob);
+        } else {
+          // Fallback: create a download link
+          var a = document.createElement('a');
+          a.href = URL.createObjectURL(blob);
+          a.download = filename;
+          a.click();
+          URL.revokeObjectURL(a.href);
+        }
+        console.log('[bwd] saved: ' + filename);
+      });
+    }).catch(function(err) {
+      console.error('[bwd] screenshot failed: ' + err.message);
+    });
+  }
+
+  // -- init -------------------------------------------------------------------
+
+  var bwd = {
+    tree: tree,
+    listen: listen,
+    unlisten: unlisten,
+    state: state,
+    screenshot: screenshot,
+    _listeners: _listeners
+  };
+
+  // Expose for testing in Node (module.exports) or browser (window.bwd)
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = bwd;
+  }
+  if (typeof window !== 'undefined') {
+    window.bwd = bwd;
+  }
+
+  function _printReady() {
+    console.log('[bwd] bitwrench debug toolkit ready');
+    console.log('  bwd.tree(sel?, depth?)       -- print DOM tree');
+    console.log('  bwd.listen(sel, event)       -- log events');
+    console.log('  bwd.unlisten(sel, event)     -- stop logging');
+    console.log('  bwd.state(sel?)              -- dump stateful elements');
+    console.log('  bwd.screenshot(sel?)         -- capture screenshot');
+  }
+
+  // Auto-load bitwrench from CDN if not present
+  if (typeof window !== 'undefined') {
+    if (window.bw && window.bw.version) {
+      _printReady();
+    } else {
+      console.log('[bwd] bitwrench not detected, loading from CDN...');
+      _loadScript(CDN_BW).then(function() {
+        _printReady();
+      }).catch(function(err) {
+        console.warn('[bwd] could not load bitwrench: ' + err.message);
+        console.log('[bwd] toolkit ready (limited -- bw.* not available)');
+        console.log('  bwd.tree, bwd.listen, bwd.unlisten still work');
+      });
+    }
+  }
+})();

package/src/bitwrench-styles.js

@@ -1703,10 +1703,10 @@ var structuralRules = {
       'position': 'relative', 'display': 'flex', 'flex-direction': 'column', 'pointer-events': 'auto',
       'background-clip': 'padding-box', 'border': '1px solid transparent', 'outline': '0'
     },
-    '.bw_modal_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between' },
+    '.bw_modal_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'padding': '1rem 1.25rem', 'border-bottom': '1px solid transparent' },
     '.bw_modal_title': { 'margin': '0', 'font-size': '1.25rem', 'font-weight': '600', 'line-height': '1.3' },
-    '.bw_modal_body': { 'position': 'relative', 'flex': '1 1 auto' },
-    '.bw_modal_footer': { 'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'justify-content': 'flex-end', 'gap': '0.5rem' }
+    '.bw_modal_body': { 'position': 'relative', 'flex': '1 1 auto', 'padding': '1rem 1.25rem' },
+    '.bw_modal_footer': { 'display': 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', 'justify-content': 'flex-end', 'gap': '0.5rem', 'padding': '0.75rem 1.25rem', 'border-top': '1px solid transparent' }
   },
 
   // ---- Toast ----
@@ -1727,8 +1727,8 @@ var structuralRules = {
     },
     '.bw_toast.bw_toast_show': { 'opacity': '1', 'transform': 'translateY(0)' },
     '.bw_toast.bw_toast_hiding': { 'opacity': '0' },
-    '.bw_toast_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'font-size': '0.875rem' },
-    '.bw_toast_body': { 'font-size': '0.9375rem' }
+    '.bw_toast_header': { 'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'padding': '0.5rem 0.75rem', 'font-size': '0.875rem', 'border-bottom': '1px solid transparent' },
+    '.bw_toast_body': { 'padding': '0.5rem 0.75rem', 'font-size': '0.9375rem' }
   },
 
   // ---- Dropdown ----
@@ -1742,15 +1742,15 @@ var structuralRules = {
     '.bw_dropdown_menu': {
       'position': 'absolute', 'top': '100%', 'left': '0', 'z-index': '1000', 'display': 'block',
       'min-width': '10rem', 'padding': '0.5rem 0', 'margin': '0.125rem 0 0',
-      'background-clip': 'padding-box',
+      'background-clip': 'padding-box', 'border': '1px solid transparent',
       'opacity': '0', 'visibility': 'hidden', 'pointer-events': 'none'
     },
     '.bw_dropdown_menu.bw_dropdown_show': { 'opacity': '1', 'visibility': 'visible', 'pointer-events': 'auto' },
     '.bw_dropdown_menu_end': { 'left': 'auto', 'right': '0' },
     '.bw_dropdown_item': {
-      'display': 'block', 'width': '100%', 'clear': 'both',
+      'display': 'block', 'width': '100%', 'padding': '0.4rem 1rem', 'clear': 'both',
       'font-weight': '400', 'text-align': 'inherit', 'text-decoration': 'none', 'white-space': 'nowrap',
-      'background-color': 'transparent', 'border': '0', 'font-size': '0.9375rem'
+      'background-color': 'transparent', 'border': '0', 'font-size': '0.9375rem', 'cursor': 'pointer'
     },
     '.bw_dropdown_item:focus-visible': { 'outline': '2px solid currentColor', 'outline-offset': '-2px' },
     '.bw_dropdown_divider': { 'height': '0', 'margin': '0.5rem 0', 'overflow': 'hidden', 'opacity': '1' }
@@ -2072,6 +2072,33 @@ function generateUtilityRules() {
   rules['.bw_text_left'] = { 'text-align': 'left' };
   rules['.bw_text_right'] = { 'text-align': 'right' };
   rules['.bw_text_center'] = { 'text-align': 'center' };
+  rules['.bw_text_justify'] = { 'text-align': 'justify' };
+
+  // Font weight
+  rules['.bw_fw_bold'] = { 'font-weight': '700' };
+  rules['.bw_fw_semibold'] = { 'font-weight': '600' };
+  rules['.bw_fw_normal'] = { 'font-weight': '400' };
+  rules['.bw_fw_light'] = { 'font-weight': '300' };
+
+  // Font style
+  rules['.bw_fst_italic'] = { 'font-style': 'italic' };
+  rules['.bw_fst_normal'] = { 'font-style': 'normal' };
+
+  // Text decoration
+  rules['.bw_text_underline'] = { 'text-decoration': 'underline' };
+  rules['.bw_text_line_through'] = { 'text-decoration': 'line-through' };
+  rules['.bw_text_decoration_none'] = { 'text-decoration': 'none' };
+
+  // Text transform
+  rules['.bw_text_uppercase'] = { 'text-transform': 'uppercase' };
+  rules['.bw_text_lowercase'] = { 'text-transform': 'lowercase' };
+  rules['.bw_text_capitalize'] = { 'text-transform': 'capitalize' };
+
+  // Font size
+  rules['.bw_fs_sm'] = { 'font-size': '0.875rem' };
+  rules['.bw_fs_base'] = { 'font-size': '1rem' };
+  rules['.bw_fs_lg'] = { 'font-size': '1.25rem' };
+  rules['.bw_fs_xl'] = { 'font-size': '1.5rem' };
 
   // Flexbox
   var jc = { start: 'flex-start', end: 'flex-end', center: 'center', between: 'space-between', around: 'space-around' };