jswidthbreakpoints 1.0.0 → 1.0.1

package/.vscode/settings.json

@@ -15,6 +15,6 @@
     ],
     "statusbartext": {
         "active": true,
-        "text": "🏷️ JsWidthBreakpoints v1.0.0"
+        "text": "🏷️ JsWidthBreakpoints v1.0.1"
     }
 }

package/README.md

@@ -1,6 +1,6 @@
 # JsWidthBreakpoints
 
-![Image Preview](https://raw.githubusercontent.com/marceloxp/JsWidthBreakpoints/refs/heads/main/images/screen.png)
+![Image Preview](https://raw.githubusercontent.com/marceloxp/JsWidthBreakpoints/refs/heads/main/images/screen-2.png)
 
 ![Version](https://img.shields.io/github/package-json/v/marceloxp/JsWidthBreakpoints)
 ![License](https://img.shields.io/github/license/marceloxp/JsWidthBreakpoints)

package/demo/index.html

@@ -5,24 +5,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JsWidthBreakpoints - Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
     <style>
-        /* Custom styles for breakpoints */
-        .width-lt400 .area {
-            background-color: lightcoral;
-        }
-
-        .width-b400a600 .area {
-            background-color: cornflowerblue;
-        }
-
-        .width-b600a800 .area {
-            background-color: lightseagreen;
-        }
-
-        .width-gt800 .area {
-            background-color: darkslateblue;
-        }
+        .width-lt400    .area { --zone-color: #f87171; }
+        .width-b400a600 .area { --zone-color: #60a5fa; }
+        .width-b600a800 .area { --zone-color: #34d399; }
+        .width-gt800    .area { --zone-color: #a78bfa; }
     </style>
 </head>
 
@@ -30,16 +21,24 @@
     <div class="container">
         <div class="area">
             <h1>JsWidthBreakpoints</h1>
-            <p>Resize the window to see the CSS classes being applied.</p>
+            <p class="subtitle">Resize the window to see the CSS classes being applied.</p>
             <div class="card">
-                <h2>Breakpoints:</h2>
-                <p id="widths">[400, 600, 800]</p>
-                <p id="current-width">Current width: <span id="width">861</span></p>
+                <div class="card-row">
+                    <span class="card-label">Breakpoints</span>
+                    <span class="card-value mono" id="widths">[400, 600, 800]</span>
+                </div>
+                <div class="card-row">
+                    <span class="card-label">Current width</span>
+                    <span class="card-value mono"><span id="width">—</span>px</span>
+                </div>
+                <div class="card-row">
+                    <span class="card-label">Active class</span>
+                    <span class="card-value mono accent" id="active-class">—</span>
+                </div>
             </div>
         </div>
     </div>
 
-    <!-- JsWidthBreakpoints Library -->
     <script src="../dist/JsWidthBreakpoints.js"></script>
     <script>
         JsWidthBreakpoints.init({
@@ -47,9 +46,9 @@
             applyClasses: true,
             classPrefix: 'width-',
             rule: {
-                show: true, // Show the rule
-                opacity: 1, // Opacity of the rule
-                color: 'red', // Color of the rule
+                show: true,
+                opacity: 1,
+                color: 'red',
             },
             onBreakPoint: (event) => {
                 console.log('Breakpoint reached:', event);
@@ -57,18 +56,11 @@
         });
 
         const drawInfo = () => {
-            document.getElementById('current-width').innerHTML = `
-                <p>Current width: ${window.innerWidth}
-                <br>
-                Current breakpoint: ${JsWidthBreakpoints.currentClass}</p>
-            `;
+            document.getElementById('width').textContent = window.innerWidth;
+            document.getElementById('active-class').textContent = '.' + JsWidthBreakpoints.currentClass;
         };
 
-        // Update current width display
-        window.addEventListener('resize', (event) => {
-            drawInfo();
-        });
-
+        window.addEventListener('resize', drawInfo);
         drawInfo();
     </script>
 </body>

package/demo/style.css

@@ -1,59 +1,86 @@
+:root {
+    --zone-color: #a78bfa;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
 body {
-    margin: 0;
-    font-family: Arial, sans-serif;
-    background-color: #282a2b;
-    color: #fff;
+    font-family: 'Inter', sans-serif;
+    background-color: #18181b;
+    color: #e4e4e7;
     display: flex;
     justify-content: center;
-    height: 100vh;
-    text-align: center;
+    min-height: 100vh;
+    padding: 6vh 1rem;
+    transition: background-color 0.5s ease;
 }
 
 .container {
     width: 80vw;
-    max-width: 900px;
-    min-width: 300px;
-    margin-top: 5vh;
+    max-width: 520px;
+    min-width: 280px;
 }
 
 .area {
-    padding: 1.5rem;
-    border-radius: 8px;
-    border: 1px solid #ccc;
+    padding: 2.5rem 2rem;
+    border-radius: 16px;
+    border: 1px solid var(--zone-color, #3f3f46);
+    background: color-mix(in srgb, var(--zone-color) 15%, #1c1c1f);
+    box-shadow: 0 0 40px -10px color-mix(in srgb, var(--zone-color) 30%, transparent);
+    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
+    text-align: center;
 }
 
 h1 {
-    font-size: clamp(1.2rem, calc(1.2rem + 2vw), 42px);
-    margin: 0;
+    font-size: clamp(1.4rem, 4vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #fff;
+    margin-bottom: 0.5rem;
 }
 
-div.container > .area > p {
-    font-size: clamp(1rem, calc(0.1rem + 1.6vw), 18px);
+.subtitle {
+    font-size: 0.875rem;
+    color: #71717a;
+    margin-bottom: 2rem;
 }
 
-p {
-    margin: 0.5rem 0;
+.card {
+    background: #111113;
+    border: 1px solid #2d2d30;
+    border-radius: 10px;
+    overflow: hidden;
+    text-align: left;
 }
 
-.card {
-    background-color: #fff;
-    color: #333;
-    padding: 1rem;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    margin-top: 1rem;
+.card-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.1rem;
+    border-bottom: 1px solid #2d2d30;
+}
+
+.card-row:last-child {
+    border-bottom: none;
+}
+
+.card-label {
+    font-size: 0.8rem;
+    color: #71717a;
 }
 
-.card h2 {
-    margin: 0 0 0.5rem;
+.card-value {
+    font-size: 0.85rem;
+    color: #e4e4e7;
+    font-weight: 500;
 }
 
-#widths {
-    font-weight: bold;
-    font-size: larger;
-    color: deeppink;
+.mono {
+    font-family: 'JetBrains Mono', monospace;
 }
 
-.card span {
-    font-weight: bold;
+.accent {
+    color: var(--zone-color);
+    transition: color 0.4s ease;
 }

package/dist/JsWidthBreakpoints.js

@@ -0,0 +1,243 @@
+/**
+ * JsWidthBreakpoints - A lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules.
+ * Version: 1.0.1
+ * Repository: https://github.com/marceloxp/JsWidthBreakpoints
+ * License: MIT
+ * Author: Marcelo XP
+ * Build Date: 2026-03-15
+ */
+class JsWidthBreakpoints {
+    // Default settings
+    static defaults = {
+        widths: [],               // Array of breakpoints in pixels (e.g., [400, 600, 800, 1200])
+        onBreakPoint: null,       // Callback function when breakpoint changes
+        applyClasses: true,       // Whether to apply CSS classes to <body>
+        classPrefix: 'width-',    // Prefix for generated CSS classes
+        rule: {
+            show: false,          // Whether to display the rule
+            opacity: 1,           // Opacity of the rule
+            color: 'red',         // Color of the rule
+        },
+    };
+
+    // Flag to prevent multiple initializations
+    static _isInitialized = false;
+
+    // Initialize the library
+    static init(options = {}) {
+        if (this._isInitialized) {
+            console.warn('JsWidthBreakpoints is already initialized. Ignoring subsequent init call.');
+            return;
+        }
+
+        // Deep merge only on rule object
+        const userOptions = options || {};
+        const mergedRule = { ...this.defaults.rule, ...(userOptions.rule || {}) };
+
+        this.options = {
+            ...this.defaults,
+            ...userOptions,
+            rule: mergedRule,
+        };
+
+        // Sort breakpoints in descending order
+        this.breakpoints = [...(this.options.widths || [])]
+            .filter(v => Number.isInteger(v) && v > 0)
+            .sort((a, b) => b - a);
+
+        this.breakpoints_length = this.breakpoints.length;
+
+        // Key decision: no valid breakpoints → doesn't initialize anything
+        if (this.breakpoints_length === 0) {
+            console.warn('JsWidthBreakpoints: No valid breakpoints provided. Library will not be activated.');
+            this._isInitialized = true;
+            return;
+        }
+
+        this.smallestBreakpoint = this.breakpoints[this.breakpoints_length - 1];
+        this.biggestBreakpoint = this.breakpoints[0];
+        this.allBreakpointClasses = this.getAllBreakpointClasses();
+
+        // Check if the callback is a function
+        this.hasCallback = typeof this.options.onBreakPoint === 'function';
+        // Get the current window width
+        this.currentWidth = this.getWindowWidth();
+        // Store the current class name
+        this.currentClass = null;
+
+        // Set up the window resize listener
+        this.setupEventListeners();
+
+        // Check and apply breakpoints immediately
+        this.checkBreakpoints();
+
+        // Initialize the rule if enabled
+        if (this.options.rule.show) {
+            this.injectRuleStyles();
+            this.createRule();
+        }
+
+        this._isInitialized = true;
+    }
+
+    // Get all possible breakpoint class names
+    static getAllBreakpointClasses() {
+        if (this.breakpoints_length === 0) return [];
+
+        const result = [
+            `lt${this.smallestBreakpoint}`,
+            `gt${this.biggestBreakpoint}`,
+        ];
+
+        for (let i = 1; i < this.breakpoints_length; i++) {
+            const lower = this.breakpoints[i];
+            const higher = this.breakpoints[i - 1];
+            result.push(`b${lower}a${higher}`);
+        }
+
+        return result;
+    }
+
+    // Get the current window width
+    static getWindowWidth() {
+        return window.innerWidth;
+    }
+
+    // Set up the window resize listener
+    static setupEventListeners() {
+        window.addEventListener('resize', () => this.checkBreakpoints());
+    }
+
+    // Main logic - simplified and callback always works
+    static checkBreakpoints() {
+        const newWidth = this.getWindowWidth();
+        this.currentWidth = newWidth;
+
+        const breakpoint = this.getCurrentBreakpoint();
+
+        if (breakpoint !== this.currentClass) {
+            const oldBreakpoint = this.currentClass || '';
+            this.currentClass = breakpoint;
+
+            // Execute the callback if defined
+            if (this.hasCallback) {
+                this.options.onBreakPoint({
+                    oldBreakpoint,
+                    currentWidth: newWidth,
+                    currentBreakpoint: breakpoint,
+                });
+            }
+
+            // Apply classes only if enabled
+            if (this.options.applyClasses) {
+                this.applyBreakpointClasses(breakpoint);
+            }
+        }
+    }
+
+    static getCurrentBreakpoint() {
+        if (this.breakpoints_length === 0) return null;
+
+        const w = this.currentWidth;
+
+        if (w <= this.smallestBreakpoint) {
+            return `lt${this.smallestBreakpoint}`;
+        }
+
+        if (w >= this.biggestBreakpoint) {
+            return `gt${this.biggestBreakpoint}`;
+        }
+
+        for (let i = 1; i < this.breakpoints_length; i++) {
+            const higher = this.breakpoints[i - 1];
+            const lower = this.breakpoints[i];
+
+            if (w >= lower && w < higher) {
+                return `b${lower}a${higher}`;
+            }
+        }
+
+        return null;
+    }
+
+    static applyBreakpointClasses(breakpoint) {
+        const body = document.body;
+        const prefix = this.options.classPrefix;
+
+        // Remove all possible classes first
+        this.allBreakpointClasses.forEach((cls) => {
+            body.classList.remove(`${prefix}${cls}`);
+        });
+
+        // Add current one
+        if (breakpoint) {
+            body.classList.add(`${prefix}${breakpoint}`);
+        }
+    }
+
+    static injectRuleStyles() {
+        const styleId = 'jsWidthBreakpointsRuleStyles';
+        if (document.getElementById(styleId)) return;
+
+        const styles = `
+            .JsWidthBreakpoints-rule {
+                position: fixed;
+                top: 0; left: 0;
+                width: 100%; height: 100%;
+                pointer-events: none;
+                z-index: 1000;
+            }
+            .JsWidthBreakpoints-rule-line {
+                position: absolute;
+                top: 0; height: 100%;
+                width: 1px;
+                background-color: ${this.options.rule.color};
+                opacity: ${this.options.rule.opacity};
+            }
+            .JsWidthBreakpoints-rule-label {
+                position: absolute;
+                top: 10px;
+                left: 5px;
+                background-color: dimgrey;
+                color: white;
+                padding: 4px 6px;
+                font-size: 12px;
+                border-radius: 3px;
+                font-family: monospace;
+                box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
+                opacity: ${this.options.rule.opacity};
+            }
+        `;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = styles;
+        document.head.appendChild(style);
+    }
+
+    static createRule() {
+        const ruleContainer = document.createElement('div');
+        ruleContainer.className = 'JsWidthBreakpoints-rule';
+
+        // Lines from largest to smallest (visual order)
+        this.breakpoints.forEach((width) => {
+            const line = document.createElement('div');
+            line.className = 'JsWidthBreakpoints-rule-line';
+            line.style.left = `${width}px`;
+
+            const label = document.createElement('div');
+            label.className = 'JsWidthBreakpoints-rule-label';
+            label.textContent = `${width}px`;
+            label.style.left = `${width + 5}px`;
+
+            ruleContainer.appendChild(line);
+            ruleContainer.appendChild(label);
+        });
+
+        // Add the rule container to the body
+        document.body.appendChild(ruleContainer);
+    }
+}
+
+// Expose globally
+window.JsWidthBreakpoints = JsWidthBreakpoints;

package/dist/JsWidthBreakpoints.min.js

@@ -1,9 +1,9 @@
 /**
  * JsWidthBreakpoints - A lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules.
- * Version: 1.0.0
+ * Version: 1.0.1
  * Repository: https://github.com/marceloxp/JsWidthBreakpoints
  * License: MIT
  * Author: Marcelo XP
- * Build Date: 2025-01-21
+ * Build Date: 2026-03-15
  */
-class JsWidthBreakpoints{static defaults={widths:[],onBreakPoint:null,applyClasses:!0,classPrefix:"width-",rule:{show:!1,opacity:1,color:"red"}};static init(t={}){this.options={...this.defaults,...t},this.breakpoints=this.options.widths.sort(((t,s)=>s-t)),this.breakpoints_length=this.breakpoints.length,this.biggestBreakpoint=this.breakpoints[0],this.smallestBreakpoint=this.breakpoints[this.breakpoints_length-1],this.hasCallback="function"==typeof this.options.onBreakPoint,this.currentWidth=this.getWindowWidth(),this.allBreakpointClasses=this.getAllBreakpointClasses(),this.currentClass=null,this.setupEventListeners(),this.checkBreakpoints(!0),this.options.rule.show&&(this.injectRuleStyles(),this.createRule())}static getAllBreakpointClasses(){const t=[`lt${this.smallestBreakpoint}`,`gt${this.biggestBreakpoint}`];for(let s=this.breakpoints_length-1;s>0;s--)t.push(`b${this.breakpoints[s]}a${this.breakpoints[s-1]}`);return t}static getWindowWidth(){return window.innerWidth}static setupEventListeners(){window.addEventListener("resize",(()=>{this.checkBreakpoints()}))}static checkBreakpoints(t=!1){const s=this.getWindowWidth();if(s!==this.currentWidth||t){this.currentWidth=s;const t=this.getCurrentBreakpoint();if(this.options.applyClasses&&t!==this.currentClass){const s=this.currentClass;this.currentClass=t,this.hasCallback&&this.options.onBreakPoint({oldBreakpoint:s||"",currentWidth:this.currentWidth,currentBreakpoint:t}),this.applyBreakpointClasses(t)}}}static getCurrentBreakpoint(){if(this.currentWidth<=this.smallestBreakpoint)return`lt${this.smallestBreakpoint}`;if(this.currentWidth>=this.biggestBreakpoint)return`gt${this.biggestBreakpoint}`;for(let t=0;t<this.breakpoints_length;t++)if(this.currentWidth>=this.breakpoints[t])return`b${this.breakpoints[t]}a${this.breakpoints[t-1]}`;return null}static applyBreakpointClasses(t){const s=document.body,e=this.options.classPrefix;this.allBreakpointClasses.forEach((t=>{s.classList.remove(`${e}${t}`)})),t&&s.classList.add(`${e}${t}`)}static injectRuleStyles(){const t="jsWidthBreakpointsRuleStyles";if(document.getElementById(t))return;const s=`\n            .JsWidthBreakpoints-rule {\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                pointer-events: none; /* Ensure the rule doesn't interfere with clicks */\n                z-index: 1000;\n            }\n\n            .JsWidthBreakpoints-rule-line {\n                position: absolute;\n                top: 0;\n                height: 100%;\n                width: 1px;\n                background-color: ${this.options.rule.color};\n                opacity: ${this.options.rule.opacity};\n            }\n\n            .JsWidthBreakpoints-rule-label {\n                position: absolute;\n                top: 10px;\n                left: 5px;\n                background-color: dimgrey;\n                color: white;\n                padding: 4px 6px;\n                font-size: 12px;\n                border-radius: 3px;\n                font-family: monospace;\n                box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);\n                opacity: ${this.options.rule.opacity};\n            }\n        `,e=document.createElement("style");e.id=t,e.textContent=s,document.head.appendChild(e)}static createRule(){const t=document.createElement("div");t.className="JsWidthBreakpoints-rule",this.breakpoints.forEach((s=>{const e=document.createElement("div");e.className="JsWidthBreakpoints-rule-line",e.style.left=`${s}px`;const i=document.createElement("div");i.className="JsWidthBreakpoints-rule-label",i.textContent=`${s}px`,i.style.left=`${s+5}px`,t.appendChild(e),t.appendChild(i)})),document.body.appendChild(t)}}window.JsWidthBreakpoints=JsWidthBreakpoints;
+class JsWidthBreakpoints{static defaults={widths:[],onBreakPoint:null,applyClasses:!0,classPrefix:"width-",rule:{show:!1,opacity:1,color:"red"}};static _isInitialized=!1;static init(t={}){if(this._isInitialized)return void console.warn("JsWidthBreakpoints is already initialized. Ignoring subsequent init call.");const i=t||{},s={...this.defaults.rule,...i.rule||{}};if(this.options={...this.defaults,...i,rule:s},this.breakpoints=[...this.options.widths||[]].filter((t=>Number.isInteger(t)&&t>0)).sort(((t,i)=>i-t)),this.breakpoints_length=this.breakpoints.length,0===this.breakpoints_length)return console.warn("JsWidthBreakpoints: No valid breakpoints provided. Library will not be activated."),void(this._isInitialized=!0);this.smallestBreakpoint=this.breakpoints[this.breakpoints_length-1],this.biggestBreakpoint=this.breakpoints[0],this.allBreakpointClasses=this.getAllBreakpointClasses(),this.hasCallback="function"==typeof this.options.onBreakPoint,this.currentWidth=this.getWindowWidth(),this.currentClass=null,this.setupEventListeners(),this.checkBreakpoints(),this.options.rule.show&&(this.injectRuleStyles(),this.createRule()),this._isInitialized=!0}static getAllBreakpointClasses(){if(0===this.breakpoints_length)return[];const t=[`lt${this.smallestBreakpoint}`,`gt${this.biggestBreakpoint}`];for(let i=1;i<this.breakpoints_length;i++){const s=this.breakpoints[i],e=this.breakpoints[i-1];t.push(`b${s}a${e}`)}return t}static getWindowWidth(){return window.innerWidth}static setupEventListeners(){window.addEventListener("resize",(()=>this.checkBreakpoints()))}static checkBreakpoints(){const t=this.getWindowWidth();this.currentWidth=t;const i=this.getCurrentBreakpoint();if(i!==this.currentClass){const s=this.currentClass||"";this.currentClass=i,this.hasCallback&&this.options.onBreakPoint({oldBreakpoint:s,currentWidth:t,currentBreakpoint:i}),this.options.applyClasses&&this.applyBreakpointClasses(i)}}static getCurrentBreakpoint(){if(0===this.breakpoints_length)return null;const t=this.currentWidth;if(t<=this.smallestBreakpoint)return`lt${this.smallestBreakpoint}`;if(t>=this.biggestBreakpoint)return`gt${this.biggestBreakpoint}`;for(let i=1;i<this.breakpoints_length;i++){const s=this.breakpoints[i-1],e=this.breakpoints[i];if(t>=e&&t<s)return`b${e}a${s}`}return null}static applyBreakpointClasses(t){const i=document.body,s=this.options.classPrefix;this.allBreakpointClasses.forEach((t=>{i.classList.remove(`${s}${t}`)})),t&&i.classList.add(`${s}${t}`)}static injectRuleStyles(){const t="jsWidthBreakpointsRuleStyles";if(document.getElementById(t))return;const i=`\n            .JsWidthBreakpoints-rule {\n                position: fixed;\n                top: 0; left: 0;\n                width: 100%; height: 100%;\n                pointer-events: none;\n                z-index: 1000;\n            }\n            .JsWidthBreakpoints-rule-line {\n                position: absolute;\n                top: 0; height: 100%;\n                width: 1px;\n                background-color: ${this.options.rule.color};\n                opacity: ${this.options.rule.opacity};\n            }\n            .JsWidthBreakpoints-rule-label {\n                position: absolute;\n                top: 10px;\n                left: 5px;\n                background-color: dimgrey;\n                color: white;\n                padding: 4px 6px;\n                font-size: 12px;\n                border-radius: 3px;\n                font-family: monospace;\n                box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);\n                opacity: ${this.options.rule.opacity};\n            }\n        `,s=document.createElement("style");s.id=t,s.textContent=i,document.head.appendChild(s)}static createRule(){const t=document.createElement("div");t.className="JsWidthBreakpoints-rule",this.breakpoints.forEach((i=>{const s=document.createElement("div");s.className="JsWidthBreakpoints-rule-line",s.style.left=`${i}px`;const e=document.createElement("div");e.className="JsWidthBreakpoints-rule-label",e.textContent=`${i}px`,e.style.left=`${i+5}px`,t.appendChild(s),t.appendChild(e)})),document.body.appendChild(t)}}window.JsWidthBreakpoints=JsWidthBreakpoints;

package/gulpfile.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const gulp = require('gulp');
+const merge = require('merge-stream');
 const concat = require('gulp-concat');
 const terser = require('gulp-terser');
 const header = require('gulp-header');
@@ -8,7 +9,6 @@ const rename = require('gulp-rename');
 const package = require('./package.json');
 const settingsPath = path.join(__dirname, '.vscode', 'settings.json');
 
-// Cabeçalho personalizado
 const banner = `/**
  * JsWidthBreakpoints - A lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules.
  * Version: ${package.version}
@@ -19,15 +19,22 @@ const banner = `/**
  */
 `;
 
-// Tarefa principal: compila e minifica o código
 function build() {
-    return gulp
-        .src('src/JsWidthBreakpoints.js') // Arquivo de entrada
-        .pipe(concat('JsWidthBreakpoints.js')) // Concatena (útil se houver múltiplos arquivos)
-        .pipe(terser()) // Minifica o código usando Terser
-        .pipe(rename({ suffix: '.min' })) // Adiciona o sufixo .min ao nome do arquivo
-        .pipe(header(banner))               // Adiciona o cabeçalho personalizado
-        .pipe(gulp.dest('dist')); // Salva o arquivo minificado
+    const rawStream = gulp
+        .src('src/JsWidthBreakpoints.js')
+        .pipe(concat('JsWidthBreakpoints.js'))
+        .pipe(header(banner))
+        .pipe(gulp.dest('dist'));
+
+    const minStream = gulp
+        .src('src/JsWidthBreakpoints.js')
+        .pipe(concat('JsWidthBreakpoints.js'))
+        .pipe(terser())
+        .pipe(rename({ suffix: '.min' }))
+        .pipe(header(banner))
+        .pipe(gulp.dest('dist'));
+
+    return merge(rawStream, minStream);
 }
 
 async function updateStatusBar() {
@@ -45,6 +52,5 @@ async function updateStatusBar() {
     await Promise.resolve();
 }
 
-// Tarefa padrão: executa a tarefa de build
 exports.default = build;
 exports.updateStatusBar = updateStatusBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jswidthbreakpoints",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules.",
   "main": "index.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-header": "^2.0.9",
     "gulp-rename": "^2.0.0",
-    "gulp-terser": "^2.1.0"
+    "gulp-terser": "^2.1.0",
+    "merge-stream": "^2.0.0"
   }
 }

package/src/JsWidthBreakpoints.js

@@ -1,43 +1,59 @@
 class JsWidthBreakpoints {
     // Default settings
     static defaults = {
-        widths: [],               // Array of breakpoints (e.g., [400, 600, 800])
-        onBreakPoint: null,       // Callback executed when a breakpoint is reached
-        applyClasses: true,       // Dynamically apply CSS classes
-        classPrefix: 'width-',    // Prefix for CSS classes
-        rule: {                   // Rule configuration
+        widths: [],               // Array of breakpoints in pixels (e.g., [400, 600, 800, 1200])
+        onBreakPoint: null,       // Callback function when breakpoint changes
+        applyClasses: true,       // Whether to apply CSS classes to <body>
+        classPrefix: 'width-',    // Prefix for generated CSS classes
+        rule: {
             show: false,          // Whether to display the rule
             opacity: 1,           // Opacity of the rule
             color: 'red',         // Color of the rule
         },
     };
 
+    // Flag to prevent multiple initializations
+    static _isInitialized = false;
+
     // Initialize the library
     static init(options = {}) {
-        // Merge default options with user-provided options
-        this.options = { ...this.defaults, ...options };
+        if (this._isInitialized) {
+            console.warn('JsWidthBreakpoints is already initialized. Ignoring subsequent init call.');
+            return;
+        }
+
+        // Deep merge only on rule object
+        const userOptions = options || {};
+        const mergedRule = { ...this.defaults.rule, ...(userOptions.rule || {}) };
+
+        this.options = {
+            ...this.defaults,
+            ...userOptions,
+            rule: mergedRule,
+        };
 
         // Sort breakpoints in descending order
-        this.breakpoints = this.options.widths.sort((a, b) => b - a);
+        this.breakpoints = [...(this.options.widths || [])]
+            .filter(v => Number.isInteger(v) && v > 0)
+            .sort((a, b) => b - a);
 
-        // Store the length of the breakpoints array
         this.breakpoints_length = this.breakpoints.length;
 
-        // Get the biggest breakpoint
-        this.biggestBreakpoint = this.breakpoints[0];
+        // Key decision: no valid breakpoints → doesn't initialize anything
+        if (this.breakpoints_length === 0) {
+            console.warn('JsWidthBreakpoints: No valid breakpoints provided. Library will not be activated.');
+            this._isInitialized = true;
+            return;
+        }
 
-        // Get the smallest breakpoint
         this.smallestBreakpoint = this.breakpoints[this.breakpoints_length - 1];
+        this.biggestBreakpoint = this.breakpoints[0];
+        this.allBreakpointClasses = this.getAllBreakpointClasses();
 
         // Check if the callback is a function
         this.hasCallback = typeof this.options.onBreakPoint === 'function';
-
         // Get the current window width
         this.currentWidth = this.getWindowWidth();
-
-        // Get all possible breakpoint class names
-        this.allBreakpointClasses = this.getAllBreakpointClasses();
-
         // Store the current class name
         this.currentClass = null;
 
@@ -45,24 +61,30 @@ class JsWidthBreakpoints {
         this.setupEventListeners();
 
         // Check and apply breakpoints immediately
-        this.checkBreakpoints(true); // Pass `true` to force callback execution
+        this.checkBreakpoints();
 
         // Initialize the rule if enabled
         if (this.options.rule.show) {
-            this.injectRuleStyles(); // Inject CSS styles
-            this.createRule();       // Create the rule
+            this.injectRuleStyles();
+            this.createRule();
         }
+
+        this._isInitialized = true;
     }
 
-    // Get all possibles breakpoint class names
+    // Get all possible breakpoint class names
     static getAllBreakpointClasses() {
+        if (this.breakpoints_length === 0) return [];
+
         const result = [
             `lt${this.smallestBreakpoint}`,
             `gt${this.biggestBreakpoint}`,
         ];
 
-        for (let i = this.breakpoints_length - 1; i > 0; i--) {
-            result.push(`b${this.breakpoints[i]}a${this.breakpoints[i - 1]}`);
+        for (let i = 1; i < this.breakpoints_length; i++) {
+            const lower = this.breakpoints[i];
+            const higher = this.breakpoints[i - 1];
+            result.push(`b${lower}a${higher}`);
         }
 
         return result;
@@ -70,105 +92,100 @@ class JsWidthBreakpoints {
 
     // Get the current window width
     static getWindowWidth() {
-        return window.innerWidth; // Use window.innerWidth directly
+        return window.innerWidth;
     }
 
     // Set up the window resize listener
     static setupEventListeners() {
-        window.addEventListener('resize', () => {
-            this.checkBreakpoints();
-        });
+        window.addEventListener('resize', () => this.checkBreakpoints());
     }
 
-    // Check breakpoints and execute actions
-    static checkBreakpoints(forceCallback = false) {
+    // Main logic - simplified and callback always works
+    static checkBreakpoints() {
         const newWidth = this.getWindowWidth();
+        this.currentWidth = newWidth;
+
+        const breakpoint = this.getCurrentBreakpoint();
 
-        // Check if the width has changed or if the callback should be forced
-        if (newWidth !== this.currentWidth || forceCallback) {
-            this.currentWidth = newWidth;
-            const breakpoint = this.getCurrentBreakpoint();
+        if (breakpoint !== this.currentClass) {
+            const oldBreakpoint = this.currentClass || '';
+            this.currentClass = breakpoint;
+
+            // Execute the callback if defined
+            if (this.hasCallback) {
+                this.options.onBreakPoint({
+                    oldBreakpoint,
+                    currentWidth: newWidth,
+                    currentBreakpoint: breakpoint,
+                });
+            }
 
-            // Apply CSS classes if enabled
+            // Apply classes only if enabled
             if (this.options.applyClasses) {
-                // Check if the breakpoint has changed
-                if (breakpoint !== this.currentClass) {
-                    const oldBreakpoint = this.currentClass;
-                    this.currentClass = breakpoint;
-
-                    // Execute the callback if defined
-                    if (this.hasCallback) {
-                        this.options.onBreakPoint({
-                            oldBreakpoint: oldBreakpoint || '',
-                            currentWidth: this.currentWidth,
-                            currentBreakpoint: breakpoint,
-                        });
-                    }
-
-                    // Apply CSS classes based on the breakpoint
-                    this.applyBreakpointClasses(breakpoint);
-                }
+                this.applyBreakpointClasses(breakpoint);
             }
         }
     }
 
-    // Get the current breakpoint
     static getCurrentBreakpoint() {
-        if (this.currentWidth <= this.smallestBreakpoint) {
+        if (this.breakpoints_length === 0) return null;
+
+        const w = this.currentWidth;
+
+        if (w <= this.smallestBreakpoint) {
             return `lt${this.smallestBreakpoint}`;
-        } else if (this.currentWidth >= this.biggestBreakpoint) {
+        }
+
+        if (w >= this.biggestBreakpoint) {
             return `gt${this.biggestBreakpoint}`;
-        } else {
-            for (let i = 0; i < this.breakpoints_length; i++) {
-                if (this.currentWidth >= this.breakpoints[i]) {
-                    return `b${this.breakpoints[i]}a${this.breakpoints[i - 1]}`;
-                }
+        }
+
+        for (let i = 1; i < this.breakpoints_length; i++) {
+            const higher = this.breakpoints[i - 1];
+            const lower = this.breakpoints[i];
+
+            if (w >= lower && w < higher) {
+                return `b${lower}a${higher}`;
             }
         }
+
         return null;
     }
 
-    // Apply CSS classes based on the breakpoint
     static applyBreakpointClasses(breakpoint) {
         const body = document.body;
-        const classPrefix = this.options.classPrefix;
+        const prefix = this.options.classPrefix;
 
-        // Remove old classes
+        // Remove all possible classes first
         this.allBreakpointClasses.forEach((cls) => {
-            body.classList.remove(`${classPrefix}${cls}`);
+            body.classList.remove(`${prefix}${cls}`);
         });
 
-        // Add the new class
+        // Add current one
         if (breakpoint) {
-            body.classList.add(`${classPrefix}${breakpoint}`);
+            body.classList.add(`${prefix}${breakpoint}`);
         }
     }
 
-    // Inject CSS styles for the rule
     static injectRuleStyles() {
         const styleId = 'jsWidthBreakpointsRuleStyles';
-        if (document.getElementById(styleId)) return; // Avoid duplicate injection
+        if (document.getElementById(styleId)) return;
 
         const styles = `
             .JsWidthBreakpoints-rule {
                 position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                pointer-events: none; /* Ensure the rule doesn't interfere with clicks */
+                top: 0; left: 0;
+                width: 100%; height: 100%;
+                pointer-events: none;
                 z-index: 1000;
             }
-
             .JsWidthBreakpoints-rule-line {
                 position: absolute;
-                top: 0;
-                height: 100%;
+                top: 0; height: 100%;
                 width: 1px;
                 background-color: ${this.options.rule.color};
                 opacity: ${this.options.rule.opacity};
             }
-
             .JsWidthBreakpoints-rule-label {
                 position: absolute;
                 top: 10px;
@@ -184,18 +201,17 @@ class JsWidthBreakpoints {
             }
         `;
 
-        const styleElement = document.createElement('style');
-        styleElement.id = styleId;
-        styleElement.textContent = styles;
-        document.head.appendChild(styleElement);
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = styles;
+        document.head.appendChild(style);
     }
 
-    // Create the rule (régua)
     static createRule() {
         const ruleContainer = document.createElement('div');
         ruleContainer.className = 'JsWidthBreakpoints-rule';
 
-        // Add lines for each breakpoint
+        // Lines from largest to smallest (visual order)
         this.breakpoints.forEach((width) => {
             const line = document.createElement('div');
             line.className = 'JsWidthBreakpoints-rule-line';
@@ -204,7 +220,7 @@ class JsWidthBreakpoints {
             const label = document.createElement('div');
             label.className = 'JsWidthBreakpoints-rule-label';
             label.textContent = `${width}px`;
-            label.style.left = `${width + 5}px`; // Offset the label slightly
+            label.style.left = `${width + 5}px`;
 
             ruleContainer.appendChild(line);
             ruleContainer.appendChild(label);
@@ -215,5 +231,5 @@ class JsWidthBreakpoints {
     }
 }
 
-// Expose the class globally
+// Expose globally
 window.JsWidthBreakpoints = JsWidthBreakpoints;