bitwrench 2.0.14 → 2.0.16

package/src/bitwrench-code-edit.js

@@ -4,6 +4,13 @@
  * Provides bw.highlight() for tokenizing JS/CSS/HTML into TACO spans,
  * and bw.codeEditor() for a live editable code block with syntax coloring.
  *
+ * Theme integration: The editor chrome (background, text color, font) reads
+ * from CSS custom properties --bw_code_bg, --bw_code_text, --bw_font_mono,
+ * falling back to built-in dark values when no theme is active. Syntax
+ * highlighting colors are intentionally fixed (they are a code color scheme,
+ * not brand colors). The bw_ce_light class is still supported for manual
+ * light-mode override.
+ *
  * Can be loaded standalone (browser script tag after bitwrench.umd.js),
  * or imported as an ES module / CJS module.
  *
@@ -14,53 +21,58 @@
 // -- CSS (injected once) ----------------------------------------------
 var _cssInjected = false;
 var CSS_TEXT =
-  '.bw-ce{background:#1e293b;border-radius:6px;border:1px solid rgba(255,255,255,0.08);overflow:auto}' +
-  '.bw-ce pre{margin:0;padding:0}' +
-  '.bw-ce code{font-family:"SF Mono",Monaco,"Cascadia Code",Consolas,monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;outline:none;white-space:pre-wrap;display:block;padding:0.75rem 1rem}' +
-  '.bw-ce code:empty::before{content:"\\200b"}' +
-  '.bw-ce .bw-ce-keyword{color:#c792ea}' +
-  '.bw-ce .bw-ce-string{color:#c3e88d}' +
-  '.bw-ce .bw-ce-comment{color:#546e7a;font-style:italic}' +
-  '.bw-ce .bw-ce-number{color:#f78c6c}' +
-  '.bw-ce .bw-ce-operator{color:#89ddff}' +
-  '.bw-ce .bw-ce-punctuation{color:#89ddff}' +
-  '.bw-ce .bw-ce-property{color:#82aaff}' +
-  '.bw-ce .bw-ce-function{color:#82aaff}' +
-  '.bw-ce .bw-ce-tag{color:#f07178}' +
-  '.bw-ce .bw-ce-attr-name{color:#ffcb6b}' +
-  '.bw-ce .bw-ce-attr-value{color:#c3e88d}' +
-  '.bw-ce .bw-ce-selector{color:#c792ea}' +
-  '.bw-ce .bw-ce-css-prop{color:#82aaff}' +
-  '.bw-ce .bw-ce-css-value{color:#f78c6c}' +
-  '.bw-ce .bw-ce-at-rule{color:#c792ea;font-style:italic}' +
-  '.bw-ce .bw-ce-color{color:#f78c6c}' +
-  '.bw-ce .bw-ce-template-interp{color:#89ddff}' +
+  '.bw_ce{background:var(--bw_code_bg,#1e293b);border-radius:6px;border:1px solid rgba(255,255,255,0.08);overflow:auto}' +
+  '.bw_ce pre{margin:0;padding:0}' +
+  '.bw_ce code{font-family:var(--bw_font_mono,"SF Mono",Monaco,"Cascadia Code",Consolas,monospace);font-size:0.875rem;line-height:1.6;color:var(--bw_code_text,#e2e8f0);outline:none;white-space:pre-wrap;display:block;padding:0.75rem 1rem}' +
+  '.bw_ce code:empty::before{content:"\\200b"}' +
+  '.bw_ce .bw_ce_keyword{color:#c792ea}' +
+  '.bw_ce .bw_ce_string{color:#c3e88d}' +
+  '.bw_ce .bw_ce_comment{color:#546e7a;font-style:italic}' +
+  '.bw_ce .bw_ce_number{color:#f78c6c}' +
+  '.bw_ce .bw_ce_operator{color:#89ddff}' +
+  '.bw_ce .bw_ce_punctuation{color:#89ddff}' +
+  '.bw_ce .bw_ce_property{color:#82aaff}' +
+  '.bw_ce .bw_ce_function{color:#82aaff}' +
+  '.bw_ce .bw_ce_tag{color:#f07178}' +
+  '.bw_ce .bw_ce_attr_name{color:#ffcb6b}' +
+  '.bw_ce .bw_ce_attr_value{color:#c3e88d}' +
+  '.bw_ce .bw_ce_selector{color:#c792ea}' +
+  '.bw_ce .bw_ce_css_prop{color:#82aaff}' +
+  '.bw_ce .bw_ce_css_value{color:#f78c6c}' +
+  '.bw_ce .bw_ce_at_rule{color:#c792ea;font-style:italic}' +
+  '.bw_ce .bw_ce_color{color:#f78c6c}' +
+  '.bw_ce .bw_ce_template_interp{color:#89ddff}' +
   // Light theme
-  '.bw-ce-light.bw-ce{background:#fafafa;border-color:#d8d8d8}' +
-  '.bw-ce-light.bw-ce code{color:#1a1a1a}' +
-  '.bw-ce-light.bw-ce .bw-ce-keyword{color:#7c3aed}' +
-  '.bw-ce-light.bw-ce .bw-ce-string{color:#16a34a}' +
-  '.bw-ce-light.bw-ce .bw-ce-comment{color:#9ca3af;font-style:italic}' +
-  '.bw-ce-light.bw-ce .bw-ce-number{color:#ea580c}' +
-  '.bw-ce-light.bw-ce .bw-ce-operator{color:#0891b2}' +
-  '.bw-ce-light.bw-ce .bw-ce-punctuation{color:#6b7280}' +
-  '.bw-ce-light.bw-ce .bw-ce-property{color:#2563eb}' +
-  '.bw-ce-light.bw-ce .bw-ce-function{color:#2563eb}' +
-  '.bw-ce-light.bw-ce .bw-ce-tag{color:#dc2626}' +
-  '.bw-ce-light.bw-ce .bw-ce-attr-name{color:#d97706}' +
-  '.bw-ce-light.bw-ce .bw-ce-attr-value{color:#16a34a}' +
-  '.bw-ce-light.bw-ce .bw-ce-selector{color:#7c3aed}' +
-  '.bw-ce-light.bw-ce .bw-ce-css-prop{color:#2563eb}' +
-  '.bw-ce-light.bw-ce .bw-ce-css-value{color:#ea580c}' +
-  '.bw-ce-light.bw-ce .bw-ce-at-rule{color:#7c3aed}' +
-  '.bw-ce-light.bw-ce .bw-ce-color{color:#ea580c}' +
-  '.bw-ce-light.bw-ce .bw-ce-template-interp{color:#0891b2}';
+  '.bw_ce_light.bw_ce{background:#fafafa;border-color:#d8d8d8}' +
+  '.bw_ce_light.bw_ce code{color:#1a1a1a}' +
+  '.bw_ce_light.bw_ce .bw_ce_keyword{color:#7c3aed}' +
+  '.bw_ce_light.bw_ce .bw_ce_string{color:#16a34a}' +
+  '.bw_ce_light.bw_ce .bw_ce_comment{color:#9ca3af;font-style:italic}' +
+  '.bw_ce_light.bw_ce .bw_ce_number{color:#ea580c}' +
+  '.bw_ce_light.bw_ce .bw_ce_operator{color:#0891b2}' +
+  '.bw_ce_light.bw_ce .bw_ce_punctuation{color:#6b7280}' +
+  '.bw_ce_light.bw_ce .bw_ce_property{color:#2563eb}' +
+  '.bw_ce_light.bw_ce .bw_ce_function{color:#2563eb}' +
+  '.bw_ce_light.bw_ce .bw_ce_tag{color:#dc2626}' +
+  '.bw_ce_light.bw_ce .bw_ce_attr_name{color:#d97706}' +
+  '.bw_ce_light.bw_ce .bw_ce_attr_value{color:#16a34a}' +
+  '.bw_ce_light.bw_ce .bw_ce_selector{color:#7c3aed}' +
+  '.bw_ce_light.bw_ce .bw_ce_css_prop{color:#2563eb}' +
+  '.bw_ce_light.bw_ce .bw_ce_css_value{color:#ea580c}' +
+  '.bw_ce_light.bw_ce .bw_ce_at_rule{color:#7c3aed}' +
+  '.bw_ce_light.bw_ce .bw_ce_color{color:#ea580c}' +
+  '.bw_ce_light.bw_ce .bw_ce_template_interp{color:#0891b2}' +
+  // Line number gutter (opt-in via lineNumbers option)
+  '.bw_ce_wrap{display:flex;flex-direction:row}' +
+  '.bw_ce_gutter{flex:0 0 auto;padding:0.75rem 0;text-align:right;user-select:none;-webkit-user-select:none;color:#546e7a;font-family:var(--bw_font_mono,"SF Mono",Monaco,"Cascadia Code",Consolas,monospace);font-size:0.875rem;line-height:1.6;border-right:1px solid rgba(255,255,255,0.08);overflow:hidden}' +
+  '.bw_ce_gutter span{display:block;padding:0 0.5rem 0 0.75rem}' +
+  '.bw_ce_light .bw_ce_gutter{color:#9ca3af;border-right-color:#d8d8d8}';
 
 function ensureCSS(bw) {
   if (_cssInjected) return;
   _cssInjected = true;
   if (bw && bw.injectCSS) {
-    bw.injectCSS(CSS_TEXT, { id: 'bw-code-edit-styles' });
+    bw.injectCSS(CSS_TEXT, { id: 'bw_code_edit_styles' });
   }
 }
 
@@ -483,7 +495,7 @@ function tokensToTACO(tokArr) {
     if (tok.type === 'plain') {
       result.push(tok.text);
     } else {
-      result.push({ t: 'span', a: { class: 'bw-ce-' + tok.type }, c: tok.text });
+      result.push({ t: 'span', a: { class: 'bw_ce_' + tok.type }, c: tok.text });
     }
   }
   return result;
@@ -537,46 +549,83 @@ function codeEditor(opts) {
   var lang = opts.lang || 'js';
   var height = opts.height || '180px';
   var readOnly = !!opts.readOnly;
-  var className = 'bw-ce' + (opts.className ? ' ' + opts.className : '');
+  var showLineNumbers = !!opts.lineNumbers;
+  var className = 'bw_ce' + (opts.className ? ' ' + opts.className : '');
 
   var highlighted = highlight(code, lang);
 
   var codeAttrs = {
     spellcheck: 'false',
-    class: 'bw-ce-code'
+    class: 'bw_ce_code'
   };
   if (!readOnly) {
     codeAttrs.contenteditable = 'true';
   }
 
+  // Build line number gutter TACO if requested
+  var gutterTaco = null;
+  if (showLineNumbers) {
+    var lineCount = (code.match(/\n/g) || []).length + 1;
+    var gutterLines = [];
+    for (var li = 1; li <= lineCount; li++) {
+      gutterLines.push({ t: 'span', c: String(li) });
+    }
+    gutterTaco = { t: 'div', a: { class: 'bw_ce_gutter' }, c: gutterLines };
+  }
+
+  var preBlock = { t: 'pre', a: { style: 'flex:1;min-width:0;margin:0' }, c: { t: 'code', a: codeAttrs, c: highlighted } };
+  var innerContent = showLineNumbers
+    ? { t: 'div', a: { class: 'bw_ce_wrap' }, c: [gutterTaco, preBlock] }
+    : preBlock;
+
   return {
     t: 'div',
     a: { class: className, style: 'max-height:' + height + ';overflow:auto' },
-    c: [
-      { t: 'pre', c: { t: 'code', a: codeAttrs, c: highlighted } }
-    ],
+    c: [innerContent],
     o: {
       mounted: function(el) {
-        var codeEl = el.querySelector('.bw-ce-code');
+        var codeEl = el.querySelector('.bw_ce_code');
         if (!codeEl) return;
 
         var currentCode = code;
         var debounceTimer = null;
+        var gutterEl = showLineNumbers ? el.querySelector('.bw_ce_gutter') : null;
 
         // Resolve bw from global or import context
         var bw = (typeof window !== 'undefined' && window.bw) || {};
 
         function getValue() { return codeEl.textContent || ''; }
 
+        function updateGutter(text) {
+          if (!gutterEl) return;
+          var count = (text.match(/\n/g) || []).length + 1;
+          var html = '';
+          for (var i = 1; i <= count; i++) html += '<span>' + i + '</span>';
+          gutterEl.innerHTML = html;
+        }
+
         function setValue(newCode) {
           currentCode = newCode;
           var tacos = highlight(newCode, lang);
           if (bw.html) codeEl.innerHTML = bw.html({ t: 'span', c: tacos });
+          updateGutter(newCode);
         }
 
         // Expose API on the element
         el._bwCodeEdit = { getValue: getValue, setValue: setValue };
 
+        // Scroll sync: keep gutter aligned with code
+        if (gutterEl) {
+          var scrollParent = codeEl.closest('.bw_ce') || el;
+          scrollParent.addEventListener('scroll', function() {
+            gutterEl.style.transform = 'translateY(' + (-scrollParent.scrollTop) + 'px)';
+          });
+          // If the outer .bw_ce has overflow, sync from there
+          el.addEventListener('scroll', function() {
+            gutterEl.style.transform = 'translateY(' + (-el.scrollTop) + 'px)';
+          });
+        }
+
         if (readOnly) return;
 
         function rehighlight() {
@@ -587,6 +636,7 @@ function codeEditor(opts) {
           var tacos = highlight(newCode, lang);
           if (bw.html) codeEl.innerHTML = bw.html({ t: 'span', c: tacos });
           setCaretOffset(codeEl, offset);
+          updateGutter(newCode);
           if (opts.onChange) opts.onChange(newCode);
         }
 

package/src/bitwrench-color-utils.js

@@ -6,9 +6,13 @@
  * bw.colorParse, bw.colorRgbToHsl, etc.
  *
  * @module bitwrench-color-utils
- * @license BSD-2-Clause
+ * @license BSD-2-Clause 
+ * @copy Manu Chatterjee @deftio
  */
 
+function _xs (x) {
+  return ('0' + x.toString(16)).slice(-2)
+}
 /**
  * Clamp a value between min and max.
  * @param {number} val
@@ -200,10 +204,7 @@ export function hexToHsl(hex) {
  */
 export function hslToHex(hsl) {
   var rgb = colorHslToRgb(hsl[0], hsl[1], hsl[2], 255, true);
-  return '#' +
-    ('0' + rgb[0].toString(16)).slice(-2) +
-    ('0' + rgb[1].toString(16)).slice(-2) +
-    ('0' + rgb[2].toString(16)).slice(-2);
+  return '#' + _xs(rgb[0])+_xs(rgb[1])+_xs(rgb[2]);
 }
 
 /**
@@ -232,10 +233,7 @@ export function mixColor(hex1, hex2, ratio) {
   var r = Math.round(c1[0] + (c2[0] - c1[0]) * ratio);
   var g = Math.round(c1[1] + (c2[1] - c1[1]) * ratio);
   var b = Math.round(c1[2] + (c2[2] - c1[2]) * ratio);
-  return '#' +
-    ('0' + r.toString(16)).slice(-2) +
-    ('0' + g.toString(16)).slice(-2) +
-    ('0' + b.toString(16)).slice(-2);
+  return '#' + _xs(r) + _xs(g) + _xs(b);
 }
 
 /**
@@ -415,16 +413,24 @@ export function derivePalette(config) {
   var lightBase = config.light || hslToHex([h, 8, 97]);
   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.
+  // 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 palette = {
-    primary:   deriveShades(config.primary),
-    secondary: deriveShades(config.secondary),
-    tertiary:  deriveShades(config.tertiary),
-    success:   deriveShades(successBase),
-    danger:    deriveShades(dangerBase),
-    warning:   deriveShades(warningBase),
-    info:      deriveShades(infoBase),
-    light:     deriveShades(lightBase),
-    dark:      deriveShades(darkBase)
+    primary:    deriveShades(config.primary),
+    secondary:  deriveShades(config.secondary),
+    tertiary:   deriveShades(config.tertiary),
+    success:    deriveShades(successBase),
+    danger:     deriveShades(dangerBase),
+    warning:    deriveShades(warningBase),
+    info:       deriveShades(infoBase),
+    light:      deriveShades(lightBase),
+    dark:       deriveShades(darkBase),
+    background: bgBase,
+    surface:    surfBase
   };
 
   return palette;

package/src/bitwrench-components-stub.js

@@ -1,5 +1,8 @@
 /**
- * Empty stub for bitwrench-components-v2.js.
+ * Empty stub for bitwrench-bccl.js.
  * Used by the lean build to exclude all BCCL component code.
  */
 export const componentHandles = {};
+export function variantClass() { return ''; }
+export var BCCL = {};
+export function make() { throw new Error('bw.make() requires the full bitwrench build (not lean)'); }

package/src/bitwrench-file-ops.js

@@ -0,0 +1,180 @@
+/**
+ * Bitwrench v2 File I/O Functions
+ *
+ * Save/load files in both Node.js and browser environments.
+ * Node uses fs module, browser uses Blob/XHR/FileReader.
+ *
+ * Called via bindFileOps(bw) which attaches all functions to the bw namespace.
+ * This preserves the same public API (bw.saveClientFile, bw.loadClientFile, etc.)
+ * while keeping the implementation in a separate module.
+ *
+ * @module bitwrench-file-ops
+ * @license BSD-2-Clause
+ * @author M A Chatterjee <deftio [at] deftio [dot] com>
+ */
+
+/**
+ * Attach all file I/O functions to the bitwrench namespace.
+ *
+ * @param {Object} bw - Bitwrench namespace object
+ */
+export function bindFileOps(bw) {
+
+  /**
+   * Save data to a file. Works in both Node.js (fs.writeFile) and browser (download link).
+   *
+   * @param {string} fname - Filename to save as
+   * @param {*} data - Data to save (string or buffer)
+   * @category File I/O
+   */
+  bw.saveClientFile = function(fname, data) {
+    if (bw.isNodeJS()) {
+      bw._getFs().then(function(fs) {
+        if (!fs) { console.error('bw.saveClientFile: fs module not available'); return; }
+        fs.writeFile(fname, data, function(err) {
+          if (err) {
+            console.error("Error saving file:", err);
+          }
+        });
+      });
+    } else {
+      var blob = new Blob([data], { type: "application/octet-stream" });
+      var url = window.URL.createObjectURL(blob);
+      var a = bw.createDOM({
+        t: 'a',
+        a: {
+          href: url,
+          download: fname,
+          style: 'display: none'
+        }
+      });
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    }
+  };
+
+  /**
+   * Save data as a JSON file with pretty formatting.
+   *
+   * @param {string} fname - Filename to save as
+   * @param {*} data - Data to serialize as JSON
+   * @category File I/O
+   */
+  bw.saveClientJSON = function(fname, data) {
+    bw.saveClientFile(fname, JSON.stringify(data, null, 2));
+  };
+
+  /**
+   * Load a file by path (Node.js) or URL (browser via XHR).
+   *
+   * @param {string} fname - File path (Node) or URL (browser)
+   * @param {Function} callback - Called with (data, error). data is null on error.
+   * @param {Object} [options] - Options
+   * @param {string} [options.parser="raw"] - "raw" for string, "JSON" to auto-parse
+   * @returns {string} "BW_OK"
+   * @category File I/O
+   */
+  bw.loadClientFile = function(fname, callback, options) {
+    var opts = { parser: 'raw' };
+    if (options && options.parser) { opts.parser = options.parser; }
+    var parse = (opts.parser === 'JSON') ? JSON.parse : function(s) { return s; };
+
+    if (bw.isNodeJS()) {
+      bw._getFs().then(function(fs) {
+        if (!fs) { callback(null, new Error('fs module not available')); return; }
+        fs.readFile(fname, 'utf8', function(err, data) {
+          if (err) { callback(null, err); }
+          else {
+            try { callback(parse(data), null); }
+            catch (e) { callback(null, e); }
+          }
+        });
+      });
+    } else {
+      var x = new XMLHttpRequest();
+      x.open('GET', fname, true);
+      x.onreadystatechange = function() {
+        if (x.readyState === 4) {
+          if (x.status >= 200 && x.status < 300) {
+            try { callback(parse(x.responseText), null); }
+            catch (e) { callback(null, e); }
+          } else {
+            callback(null, new Error('HTTP ' + x.status + ': ' + fname));
+          }
+        }
+      };
+      x.send(null);
+    }
+    return 'BW_OK';
+  };
+
+  /**
+   * Load a JSON file by path (Node.js) or URL (browser).
+   *
+   * @param {string} fname - File path (Node) or URL (browser)
+   * @param {Function} callback - Called with (parsedData, error)
+   * @returns {string} "BW_OK"
+   * @category File I/O
+   */
+  bw.loadClientJSON = function(fname, callback) {
+    return bw.loadClientFile(fname, callback, { parser: 'JSON' });
+  };
+
+  /**
+   * Prompt user to pick a local file via file dialog (browser only).
+   *
+   * @param {Function} callback - Called with (data, filename, error)
+   * @param {Object} [options] - Options
+   * @param {string} [options.accept] - File type filter (e.g. ".json,.txt")
+   * @param {string} [options.parser="raw"] - "raw" for string, "JSON" to auto-parse
+   * @category File I/O
+   */
+  bw.loadLocalFile = function(callback, options) {
+    var opts = { parser: 'raw', accept: '' };
+    if (options) {
+      if (options.parser) { opts.parser = options.parser; }
+      if (options.accept) { opts.accept = options.accept; }
+    }
+    var parse = (opts.parser === 'JSON') ? JSON.parse : function(s) { return s; };
+
+    if (bw.isNodeJS()) {
+      callback(null, '', new Error('bw.loadLocalFile is browser-only. Use bw.loadClientFile() in Node.'));
+      return;
+    }
+
+    var input = bw.createDOM({
+      t: 'input',
+      a: {
+        type: 'file',
+        accept: opts.accept,
+        style: 'display: none'
+      }
+    });
+    input.addEventListener('change', function() {
+      var file = input.files[0];
+      if (!file) { callback(null, '', new Error('No file selected')); return; }
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        try { callback(parse(e.target.result), file.name, null); }
+        catch (err) { callback(null, file.name, err); }
+      };
+      reader.onerror = function() { callback(null, file.name, reader.error); };
+      reader.readAsText(file);
+      input.remove();
+    });
+    document.body.appendChild(input);
+    input.click();
+  };
+
+  /**
+   * Prompt user to pick a local JSON file via file dialog (browser only).
+   *
+   * @param {Function} callback - Called with (parsedData, filename, error)
+   * @category File I/O
+   */
+  bw.loadLocalJSON = function(callback) {
+    bw.loadLocalFile(callback, { parser: 'JSON', accept: '.json' });
+  };
+}

package/src/bitwrench-lean.js

@@ -2,13 +2,13 @@
  * bitwrench-lean.js — Entry point for the lean build.
  *
  * This is identical to bitwrench.js but the Rollup config redirects
- * the bitwrench-components-v2.js import to an empty stub, so no
+ * the bitwrench-bccl.js import to an empty stub, so no
  * BCCL component code is included in the output.
  *
  * Includes: HTML/DOM generation, CSS generation, color utilities,
  *           state management, pub/sub, file I/O, random/lorem,
  *           cookies, URL params, logging, makeTable, makeDataTable.
- * Excludes: All make* component helpers from bitwrench-components-v2.js
+ * Excludes: All make* component helpers from bitwrench-bccl.js
  *           (makeButton, makeCard, makeAlert, makeTabs, etc.)
  */
 export { default } from './bitwrench.js';