nodality 1.0.216 → 1.0.217

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.216
+ * nodality v1.0.217
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -199,47 +199,6 @@ class Animator {
 
 	*/
 		commonMethods(obj){ // define in anim
-		/*	obj.pad && this.pad(obj.pad);
-			obj.mar && this.mar(obj.mar);
-			obj.respad && this.respad(obj.respad);
-			obj.resmar && this.resmar(obj.resmar);
-			obj.exact && (this.res.style.fontSize = obj.exact);
-			obj.zIndex && (this.res.style.zIndex = obj.zIndex);
-			obj.position && (this.res.style.position = obj.position);
-			obj.top && (this.res.style.top = obj.top);
-			obj.hover && this.hover(obj.hover);
-			obj.size && this.fluidCopy(obj.size);
-			obj.cursor && (this.res.style.cursor = obj.cursor);
-			// width xx, height xx, background xx, radius xx, resprop xx, keySet, maxHeight xx, maxWidth xx
-
-			obj.width && (this.res.style.width = obj.width);
-			obj.maxWidth && (this.res.style.maxWidth = obj.maxWidth);
-
-			obj.height && (this.res.style.height = obj.height);
-			obj.maxHeight && (this.res.style.maxHeight = obj.maxHeight);
-
-			
-
-			obj.background && (this.res.style.background = obj.background);
-
-			obj.resprop && this.resprop(obj.resprop);
-
-			obj.keySet && this.keySet(obj.keySet);
-
-			// weight, bold, font, hide, radus, lineHeight
-
-			obj.weight && (this.res.style.fontWeight = obj.weight);
-
-			obj.bold && (this.res.style.fontWeight = "bold");
-
-			obj.font && (this.res.style.fontFamily = obj.font);
-
-			obj.hide && this.isHidden(obj.hide);
-
-			obj.radius && (this.res.style.borderRadius = obj.radius);
-
-			obj.lineHeight && (this.res.style.lineHeight = obj.lineHeight);
-*/
 
   // Map of obj keys → style properties
   // Extended 2026-04-27 — first-class CSS props so callers don't need keySet.
@@ -456,21 +415,6 @@ class Animator {
 		this.prevBoxShadow = this.res.style.boxShadow;
 
 
-	/*	if (obj.border){
-			//this.res.style.border = `1px solid transparent`;
-			if (obj.borderObj && obj.borderObj.width){ // fix here
-
-				let w = this.options.borderObj.width ?? 3;
-				this.res.style.border = `${w}px solid transparent`;
-				
-			} else {
-				// 14:53:15 this was stupid
-				//this.res.style.border = `1px solid transparent`;
-			
-			
-			}
-			
-		}*/
   
 
 	
@@ -504,14 +448,6 @@ class Animator {
 		    }
 
 
-		/*	if (obj.borderObj && obj.borderObj.width){
-
-				let w = this.options.borderObj.width ?? 3;
-				this.res.style.border = `${w}px solid transparent`;
-				
-			} else {
-				//this.res.style.border = `1px solid transparent`;
-			}*/
 
 
 			/*if (obj.border){
@@ -651,51 +587,12 @@ class Animator {
 		this.prevText = prevText;
 	}
 
-	getCSS(){
-		return this.css;
-	}
-
 
-	 getPX(value) {
-		const breakpoints = {
-			xs: "0px",      // Extra small
-			sm: "576px",    // Small
-			md: "768px",    // Medium
-			lg: "992px",    // Large
-			xl: "1200px",   // Extra large
-			xxl: "1400px",   // Extra extra large
-			mxxl: "1800px"   // Extra extra large
-		};
-	
-		return breakpoints[value] || "Invalid breakpoint"; // Fallback for invalid input
-	}
 
 	// [{ breakpoint: "sm" , values: [...]}]
-	/*respad(arr){
-		const react = () => { // 00:49:12 22/03/2025
-			this.pad(arr[0].values);
-
-			for(let i = 0; i < arr.length; i++) {
-				let point = arr[i].breakpoint;
-				if (window.matchMedia(`(min-width: ${this.getPX(point)}`).matches){
-					this.pad(arr[i].values);
-				}
-			}
-		}
-
 
-		window.addEventListener("resize", react);
-		react();
-	}*/
 
 
-
-	/*
-respad(arr) {
-  this._applyResponsive(arr, (applied) => {
-    this.pad(applied.values);
-  });
-}*/
 /**
  * @private
  * Sets up the single resize listener and runs all registered tasks.
@@ -989,48 +886,32 @@ respad(arr) {
 }
 
 
-/*
-respad(arr) { // COOL
+
+
+
+
+
+resmar(arr) {
+
     // --- 1. CONFIGURATION & NORMALIZATION ---
-    
-    // Breakpoints defined by explicit [min, max] ranges
     const breakpoints = {
-        default: [0, 100000],
-        xs: [0, 575],
-        sm: [576, 767],
-        md: [768, 991],
-        lg: [992, 1199], 
-        xl: [1200, 1399],
-        xxl: [1400, 100000]
+        default: [0, 100000], xs: [0, 575], sm: [576, 767], md: [768, 991],
+        lg: [992, 1199], xl: [1200, 1399], xxl: [1400, 100000]
     };
-
-    // Control keys: We exclude keys not related to the responsive style or range.
-    const excludedKeys = ['resprop', 'breakpoint', 'range']; 
+    // Note: 'values' is handled specifically here, so it is not excluded globally.
     
-    // A. Normalize custom breakpoints: Assign the [min, max] array to the 'range' property
+    // A. Normalize breakpoints and assign range (handles named, [min, max], and "px" inputs)
     arr.forEach(item => {
-        // 1. Check for named breakpoints (e.g., 'sm', 'md')
         if (breakpoints[item.breakpoint] !== undefined) {
             item.range = breakpoints[item.breakpoint];
-
-        // 2. Check if the input is already an array [min, max] (e.g., [600, 700])
         } else if (Array.isArray(item.breakpoint) && item.breakpoint.length === 2) {
-            const [min, max] = item.breakpoint;
-            
-            item.range = [
-                parseInt(min, 10), 
-                parseInt(max, 10)
-            ];
-
-        // 3. Assume the input is a single pixel string (e.g., "700px")
+            item.range = [parseInt(item.breakpoint[0], 10), parseInt(item.breakpoint[1], 10)];
         } else {
-            // Treat as a min-width override up to a large maximum
-            const min = parseInt(item.breakpoint, 10);
-            item.range = [min, 100000]; 
+            item.range = [parseInt(item.breakpoint, 10), 100000]; 
         }
     });
 
-    // B. Sort by the minimum value of the range (range[0])
+    // B. Sort by the minimum value of the range
     arr.sort((a, b) => a.range[0] - b.range[0]);
 
     // C. Find/Ensure the base style object
@@ -1040,23 +921,17 @@ respad(arr) { // COOL
         arr.unshift(defaultItem);
     }
     
-    // --- 2. STATE CAPTURE & RESET PREPARATION (Specific to 'pad'/'values') ---
+    // --- 2. STATE CAPTURE & RESET PREPARATION ---
 
-    // D. Capture the initial base 'values' (which should be the base padding config)
-    // NOTE: This assumes the non-responsive 'pad' was set via this.options.pad or similar.
-    // For simplicity with your usage, we will use the 'values' from the defaultItem itself.
-    
-    // E. Ensure 'defaultItem' has a 'values' property, or it will use the base config.
+    // D. Ensure 'defaultItem' has a 'values' property, falling back to the base
+    // `mar` option. Same ordering caveat as respad() — see the note there.
     if (defaultItem.values === undefined) {
-         // This assumes the core padding is defined elsewhere if not in the responsive array.
-         // If no 'default' values are set, use the base 'pad' option if available.
-         defaultItem.values = this.options.pad || null;
+         defaultItem.values = (this.options && (this.options.mar || this.options.pad)) || null;
     }
 
 
-    // --- 3. CORE LOGIC: The 'react' function (Responsive Style Application) ---
-
-    const react = () => {
+    // --- 3. CORE LOGIC: The Responsive Task Function ---
+    const resmarTask = () => {
         const width = Animator.viewportWidth();
         let applied = defaultItem; 
 
@@ -1065,1505 +940,382 @@ respad(arr) { // COOL
             const bp = arr[i];
             const [min, max] = bp.range;
 
-            if (bp.breakpoint === "default") {
-                continue; // Skip default, it's the fallback
-            }
+            if (bp.breakpoint === "default") continue;
 
-            // Check if width is WITHIN the [min, max] range
             if (width >= min && width <= max) {
                 applied = bp;
-                break; // Found the exact range.
+                break;
             }
         }
         
         // --- Apply Pad Style ---
         
-        // Determine the final padding value to apply:
-        // Use applied.values if it exists, otherwise fall back to defaultItem.values
+        // Determine the final padding value: use applied.values if it exists, otherwise defaultItem.values
         const finalPadValue = applied.values !== undefined ? applied.values : defaultItem.values;
 
+
         
         if (finalPadValue !== undefined && finalPadValue !== null) {
-            
-            // Call the base 'pad' method with the structure found on the 'values' key.
-            this.pad(finalPadValue);
+            // Note: We trust this.pad handles the style application and clearing
+            this.mar(finalPadValue);
         }
     };
 
 
-    // --- 4. EVENT LISTENERS SETUP ---
+    // --- 4. REGISTRATION ---
+    this._responsiveTasks = this._responsiveTasks || [];
+    this._responsiveTasks.push(resmarTask);
+    
+    // Ensure the unified handler is set up and starts listening
+    this._setupResponsiveManager(); 
+}
 
-    // Prevent duplicate listeners
-    if (this._responsiveHandler) window.removeEventListener("resize", this._responsiveHandler);
-    this._responsiveHandler = react;
 
-    window.addEventListener("resize", react);
-    
-    // Defer the initial execution to solve the refresh race condition.
-    setTimeout(() => {
-        react();
-    }, 0);
-}*/
 
 
-	/*resmar(arr){
-		const react = () => { // 00:49:12 22/03/2025
-			this.mar(arr[0].values);
+	/**
+	 * Tells the caller they passed an option that no longer exists as the
+	 * way to do this, and what to use instead.
+	 *
+	 * console.error only, deliberately. alert() is banned in live modules
+	 * (see the "no live module calls alert()" invariant): alerts had sat in
+	 * ordinary paths and blocked the page for every visitor, and the ban is
+	 * worth more than making this one warning louder.
+	 */
+	deprecatedOption(name, replacement) {
+		console.error(`nodality: \`${name}\` is deprecated — use \`${replacement}\` instead.`);
+		return this;
+	}
 
-			for(let i = 0; i < arr.length; i++) {
-				let point = arr[i].breakpoint;
-				if (window.matchMedia(`(max-width: ${this.getPX(point)}`).matches){
-					this.mar(arr[i].values);
-				}
+	/**
+		 * Centres this element's CHILDREN.
+		 *
+		 *   center: true    both axes
+		 *   center: "x"     horizontally only
+		 *   center: "y"     vertically only
+		 *
+		 * Replaces six overlapping methods — toCenter(), toCenter("both"),
+		 * flexc(), toCol(), centerColumn and simpleCenter(). flexc() was
+		 * byte-identical to toCenter() and toCol() to toCenter("both"), so the
+		 * same behaviour had four names and the two that differed did so by
+		 * one property each.
+		 *
+		 * To centre the element ITSELF inside its parent, that is `mar:
+		 * "center"` — a different thing, and the reason the old names were so
+		 * easy to confuse.
+		 *
+		 * Axis-aware rather than fixed. justify-content runs along the main
+		 * axis, so in a flex column it is the VERTICAL one and align-items is
+		 * horizontal — the opposite of a flex row. The old methods hardcoded
+		 * flex-direction: column and so only ever worked one way round; this
+		 * reads the direction already set and centres the axis you asked for.
+		 * A grid gets justify-items/align-items instead, which is what
+		 * simpleCenter() was reaching for without setting a display at all.
+		 */
+		center(axis = true, hint = {}){
+			const s = this.res.style;
+			// The hints matter because this runs from commonMethods, before a
+			// component applies its own `disp`/`flexDir` aliases. Without them
+			// center() sees a bare element, assumes a flex column, and puts the
+			// centring on the wrong property for every row and grid.
+			const display = s.display || hint.display || "";
+			const direction = s.flexDirection || hint.flexDirection || "";
+			const grid = display.includes("grid");
+	
+			const x = axis === true || axis === "both" || axis === "x";
+			const y = axis === true || axis === "both" || axis === "y";
+	
+			if (grid){
+				if (x){ s.justifyItems = "center"; s.justifyContent = "center"; }
+				if (y){ s.alignItems = "center"; s.alignContent = "center"; }
+				return this;
 			}
+	
+			if (!display.includes("flex")) s.display = "flex";
+			if (!s.flexDirection) s.flexDirection = direction || "column";
+	
+			const column = (s.flexDirection || "column").startsWith("column");
+			const mainIsY = column;
+	
+			if (mainIsY ? y : x) s.justifyContent = "center";
+			if (mainIsY ? x : y) s.alignItems = "center";
+			return this;
 		}
 
-		window.addEventListener("resize", react);
-		react();
-	}*/
-
-_applyResponsive(arr, applyFn) {
-  // Breakpoints defined by explicit [min, max] ranges
-  const breakpoints = {
-    default: [0, 100000], 
-    xs: [0, 575],
-    sm: [576, 767],
-    md: [768, 991],
-    lg: [992, 1199], 
-    xl: [1200, 1399],
-    xxl: [1400, 100000] 
-  };
-
-  // ✅ Normalize breakpoints: Assign the [min, max] array to the 'range' property
-  arr.forEach(item => {
-    if (breakpoints[item.breakpoint] !== undefined) {
-      item.range = breakpoints[item.breakpoint];
-    } else {
-      const min = parseInt(item.breakpoint, 10);
-      item.range = [min, 100000]; // Custom pixel value becomes a Min-Width range
-    }
-  });
-
-  // ✅ Sort by the minimum value of the range (range[0])
-  arr.sort((a, b) => a.range[0] - b.range[0]);
+	isNumber(value) {
+		return typeof value === 'number' && !isNaN(value);
+	}
 
-  // Use the default item or a placeholder as the base
-  const defaultItem = arr.find(item => item.breakpoint === "default") || { breakpoint: "default", range: breakpoints.default };
+	// Single source of truth for "how wide is the viewport". See the note in
+	// chainReact — visualViewport is preferred (it tracks pinch-zoom) but is
+	// not universally present.
+	static viewportWidth() {
+		if (typeof window === "undefined") return 0;
+		const vv = window.visualViewport;
+		return (vv && typeof vv.width === "number") ? vv.width : window.innerWidth;
+	}
+ 
+	pad(arr){
 
-  const react = () => {
-    const width = window.innerWidth;
-    let applied = defaultItem; // Start with the base style object
+		for(let i = 0; i < arr.length; i++) {
+	
+			let keys = Object.keys(arr[i]);
+			for(let j = 0; j < keys.length; j++) {
+				let key = keys[j];
+				let value = arr[i][key];
+				for(let k = 0; k < key.length; k++) {
+					switch(key[k]) {
+						case 'a':
+							
+							//alert("OIHOI")
+							this.res.style.padding = this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 't':
+							this.res.style.paddingTop =  this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 'l':
+							this.res.style.paddingLeft =  this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 'r':
+							this.res.style.paddingRight =  this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 'b':
+							this.res.style.paddingBottom =  this.isNumber(value) ? `${value}px` : value;
+							break;
+						default:
+							// console.log(`Invalid key: ${key[k]}`);
+					}
+				}
+			}
+		}
+		return this;
+	}
 
-    // ✅ RANGE LOGIC: Find the FIRST breakpoint whose range matches the current width.
-    for (let i = 0; i < arr.length; i++) {
-      const bp = arr[i];
-      const [min, max] = bp.range;
 
-      if (bp.breakpoint === "default") {
-          continue; // Skip default, it's the fallback
-      }
+	as(asa){
+		this.res.style.alignSelf = asa;
+		return this;
+	}
 
-      // Check if width is WITHIN the [min, max] range
-      if (width >= min && width <= max) {
-        applied = bp;
-        break; // Found the exact range, no need to search further.
-      }
-    }
 
-    applyFn(applied);
-  };
 
+	mar(arr){
 
-  // Prevent duplicate listeners
-  if (this._responsiveHandler) window.removeEventListener("resize", this._responsiveHandler);
-  this._responsiveHandler = react;
+		// Shorthand: mar: "center" → margin: 0 auto
+		if (arr === "center"){
+			this.res.style.marginLeft = "auto";
+			this.res.style.marginRight = "auto";
+			return this;
+		}
 
-  this._on(window, "resize", react);
-  
-  // ⭐ FIX: Defer the initial call slightly to avoid race conditions on refresh.
-  setTimeout(() => {
-    react(); 
-  }, 0);
-}
+		for(let i = 0; i < arr.length; i++) {
+			let keys = Object.keys(arr[i]);
+			for(let j = 0; j < keys.length; j++) {
+				let key = keys[j];
+				let value = arr[i][key];
+				for(let k = 0; k < key.length; k++) {
+					switch(key[k]) {
+						case 'a':
+							// mar: [{ a: "auto" }] → margin: 0 auto (centers block-level elements)
+							if (value === "auto"){
+								this.res.style.marginLeft = "auto";
+								this.res.style.marginRight = "auto";
+							} else {
+								this.res.style.margin = this.isNumber(value) ? `${value}px` : value;
+							}
+							break;
+						case 't':
+							this.res.style.marginTop = this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 'l':
+							this.res.style.marginLeft = this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 'r':
+							this.res.style.marginRight = this.isNumber(value) ? `${value}px` : value;
+							break;
+						case 'b':
+							this.res.style.marginBottom = this.isNumber(value) ? `${value}px` : value;
+							break;
+						default:
+							// console.log(`Invalid key: ${key[k]}`);
+					}
+				}
 
-/*
-resprop(arr) { // COOL
-    // --- 1. CONFIGURATION & NORMALIZATION ---
-    
-    // Breakpoints defined by explicit [min, max] ranges
-    const breakpoints = {
-        default: [0, 100000], // Use a huge max for default/base
-        xs: [0, 575],
-        sm: [576, 767],
-        md: [768, 991],
-        lg: [992, 1199], // Corrected range assumption based on XL starting at 1200
-        xl: [1200, 1399],
-        xxl: [1400, 100000] // Use a huge max for the largest range
-    };
+				// Per-entry shorthand: { center: true } → marginLeft/Right = auto
+				if (key === "center" && value === true){
+					this.res.style.marginLeft = "auto";
+					this.res.style.marginRight = "auto";
+				}
 
-    // Ensure all control keys are excluded
-    const excludedKeys = ['resprop', 'breakpoint', 'value', 'values']; 
-    
-    // A. Normalize custom breakpoints: Attach the [min, max] array to the item
-    /*arr.forEach(item => {
-        if (breakpoints[item.breakpoint] !== undefined) {
-            item.range = breakpoints[item.breakpoint];
-        } else {
-            // If a custom pixel value is used (e.g., "700px"), treat it as a min-width override.
-            const min = parseInt(item.breakpoint, 10);
-            item.range = [min, 100000]; 
-        }
-    });
-
-	arr.forEach(item => {
-    // 1. Check for named breakpoints (e.g., 'sm', 'md')
-    if (breakpoints[item.breakpoint] !== undefined) {
-        item.range = breakpoints[item.breakpoint];
-
-    // 2. Check if the input is already an array [min, max] (e.g., [600, 700])
-    } else if (Array.isArray(item.breakpoint) && item.breakpoint.length === 2) {
-        const [min, max] = item.breakpoint;
-        
-        // Ensure values are treated as numbers and min <= max
-        item.range = [
-            parseInt(min, 10), 
-            parseInt(max, 10)
-        ];
-
-    // 3. Assume the input is a single pixel string (e.g., "700px")
-    } else {
-        // Treat as a min-width override up to a large maximum
-        const min = parseInt(item.breakpoint, 10);
-        item.range = [min, 100000]; 
-    }
-});
-
-    // B. Sort by the minimum value of the range (range[0])
-    arr.sort((a, b) => a.range[0] - b.range[0]);
-
-    // C. Find/Ensure the base style object
-    let defaultItem = arr.find(item => item.breakpoint === "default");
-    if (!defaultItem) {
-        defaultItem = { breakpoint: "default", range: breakpoints.default };
-        arr.unshift(defaultItem);
-    }
-    
-    // --- 2. STATE CAPTURE & RESET PREPARATION ---
-
-    // D. Capture initial non-responsive styles (for global reset)
-    this.prevStyles = {};
-    for (const prop in this.res.style) {
-       if (this.res.style.hasOwnProperty(prop) && isNaN(parseInt(prop))) {
-          this.prevStyles[prop] = this.res.style[prop];
-        }
-    }
-
-    // E. Identify all properties that are responsive (defined in *any* breakpoint)
-    const responsiveProps = new Set();
-    arr.forEach(bp => {
-        Object.keys(bp).forEach(key => {
-            if (!excludedKeys.includes(key) && key !== 'range') {
-                responsiveProps.add(key);
-            }
-        });
-    });
-
-    // F. Ensure 'defaultItem' holds the base/reset value for every responsive property.
-    responsiveProps.forEach(key => {
-        if (defaultItem[key] === undefined) {
-             // Use the initial component option (e.g., color: "white") as the true reset value.
-             defaultItem[key] = this.options[key] || "initial";
-        }
-    });
-
-
-    // --- 3. CORE LOGIC: The 'react' function (Responsive Style Application) ---
-
-    const react = () => {
-        const width = Animator.viewportWidth();
-        let applied = defaultItem; 
-
-        // 1. RANGE LOGIC: Find the FIRST breakpoint whose range matches the current width.
-        // We skip defaultItem since it's the fallback.
-        for (let i = 0; i < arr.length; i++) {
-            const bp = arr[i];
-            const [min, max] = bp.range;
-
-            if (bp.breakpoint === "default") {
-                continue; // Skip default, it's the fallback
-            }
-
-            // Check if width is WITHIN the [min, max] range
-            if (width >= min && width <= max) {
-                applied = bp;
-                break; // Found the exact range, no need to search further.
-            }
-        }
-        
-        // --- Apply Styles ---
-        
-        // A. Full Reset: Restore all non-responsive styles captured initially.
-        for (const key in this.prevStyles) {
-            this.res.style[key] = this.prevStyles[key];
-        }
-
-        // B. Clear Responsive Props: Apply the 'default' item's base values.
-        responsiveProps.forEach(key => {
-            this.res.style[key] = defaultItem[key];
-        });
-        
-        // C. Apply Overrides: Apply the properties of the currently matching breakpoint
-        for (const key in applied) {
-            if (!excludedKeys.includes(key) && key !== 'range') {
-                const value = applied[key];
-
-                if (typeof this[key] === 'function') {
-                    // Custom property (e.g., pad, size): call the internal method
-                    this[key](value); 
-                } else {
-                    // Standard CSS property: set the style directly.
-                    this.res.style[key] = value;
-                }
-            }
-        }
-    };
-
-
-    // --- 4. EVENT LISTENERS SETUP ---
-
-    // Prevent duplicate listeners
-    if (this._responsiveHandler) window.removeEventListener("resize", this._responsiveHandler);
-    this._responsiveHandler = react;
-
-    window.addEventListener("resize", react);
-    
-    // Defer the initial execution to solve the refresh race condition.
-    setTimeout(() => {
-        react();
-    }, 0);
-}*/
-
-/*
-resprop(arr) {
-    // --- 1. CONFIGURATION & NORMALIZATION ---
-    const breakpoints = {
-        default: 0,
-        xs: [0, 577],
-        sm: [576, 767],
-        md: [768, 991],
-        lg: [992, 993],
-        xl: [1200, 1399],
-        xxl: [1400, 10000]
-    };
-    // Ensure all control keys are excluded
-    const excludedKeys = ['resprop', 'breakpoint', 'value', 'values']; 
-
-    // A. Normalize custom breakpoints and assign numeric values to the 'value' property
-    arr.forEach(item => {
-        if (breakpoints[item.breakpoint] !== undefined) {
-            item.value = breakpoints[item.breakpoint];
-        } else {
-            item.value = parseInt(item.breakpoint, 10); // e.g. "700px" → 700
-        }
-    });
-
-    // B. Sort by numeric value ascending
-    arr.sort((a, b) => a.value - b.value);
-
-    // C. Find/Ensure the base style object
-    let defaultItem = arr.find(item => item.breakpoint === "default");
-    if (!defaultItem) {
-        defaultItem = { breakpoint: "default", value: 0 };
-        arr.unshift(defaultItem);
-    }
-    
-    // --- 2. STATE CAPTURE & RESET PREPARATION ---
-
-    // D. Capture initial non-responsive styles (for global reset)
-    this.prevStyles = {};
-    for (const prop in this.res.style) {
-       if (this.res.style.hasOwnProperty(prop) && isNaN(parseInt(prop))) {
-          this.prevStyles[prop] = this.res.style[prop];
-        }
-    }
-
-    // E. Identify all properties that are responsive (defined in *any* breakpoint)
-    const responsiveProps = new Set();
-    arr.forEach(bp => {
-        Object.keys(bp).forEach(key => {
-            if (!excludedKeys.includes(key)) {
-                responsiveProps.add(key);
-            }
-        });
-    });
-
-    // F. Ensure 'defaultItem' holds the base/reset value for every responsive property.
-    responsiveProps.forEach(key => {
-        if (defaultItem[key] === undefined) {
-             // Use the initial component option (e.g., color: "white") as the true reset value.
-             defaultItem[key] = this.options[key] || "initial";
-        }
-    });
-
-
-    // --- 3. CORE LOGIC: The 'react' function (Responsive Style Application) ---
-
-    const react = () => {
-        const width = Animator.viewportWidth();
-        let applied = defaultItem; 
-
-        // 1. STANDARD MIN-WIDTH LOGIC: Find the LARGEST breakpoint whose MIN-WIDTH is matched.
-        for (let i = 0; i < arr.length; i++) {
-            const bp = arr[i];
-
-            if (bp.breakpoint !== "default" && width >= bp.value) {
-                // Since the array is sorted, this continuously updates 'applied' to the widest match.
-                applied = bp;
-            } else if (width < bp.value) {
-                // Optimization: stop searching once the breakpoint value is greater than the current width.
-                break; 
-            }
-        }
-        
-        // --- Apply Styles ---
-        
-        // A. Full Reset: Restore all non-responsive styles captured initially.
-        for (const key in this.prevStyles) {
-            this.res.style[key] = this.prevStyles[key];
-        }
-
-        // B. Clear Responsive Props: Apply the 'default' item's base values (e.g., "white" color)
-        // This is done for all responsive properties to ensure a clean slate before applying overrides.
-        responsiveProps.forEach(key => {
-            this.res.style[key] = defaultItem[key];
-        });
-        
-        // C. Apply Overrides: Apply the properties of the currently matching breakpoint
-        for (const key in applied) {
-            if (!excludedKeys.includes(key)) {
-                const value = applied[key];
-
-                if (typeof this[key] === 'function') {
-                    // Custom property (e.g., pad, size): call the internal method
-                    this[key](value); 
-                } else {
-                    // Standard CSS property: set the style directly.
-                    this.res.style[key] = value;
-                }
-            }
-        }
-    };
-
-
-    // --- 4. EVENT LISTENERS SETUP (The Fix for Resize/Refresh) ---
-
-    // Prevent duplicate listeners
-    if (this._responsiveHandler) window.removeEventListener("resize", this._responsiveHandler);
-    this._responsiveHandler = react;
-
-    window.addEventListener("resize", react);
-    
-    // Run immediately on load/refresh (This ensures the correct styles are applied on initial load)
-   // react();
-   setTimeout(() => {
-        react();
-    }, 0);
-}*/
-
-/*
-resmar(arr) {
-  this._applyResponsive(arr, (applied) => {
-    this.mar(applied.values);
-  });
-}*/
-
-
-resmar(arr) {
-
-    // --- 1. CONFIGURATION & NORMALIZATION ---
-    const breakpoints = {
-        default: [0, 100000], xs: [0, 575], sm: [576, 767], md: [768, 991],
-        lg: [992, 1199], xl: [1200, 1399], xxl: [1400, 100000]
-    };
-    // Note: 'values' is handled specifically here, so it is not excluded globally.
-    
-    // A. Normalize breakpoints and assign range (handles named, [min, max], and "px" inputs)
-    arr.forEach(item => {
-        if (breakpoints[item.breakpoint] !== undefined) {
-            item.range = breakpoints[item.breakpoint];
-        } else if (Array.isArray(item.breakpoint) && item.breakpoint.length === 2) {
-            item.range = [parseInt(item.breakpoint[0], 10), parseInt(item.breakpoint[1], 10)];
-        } else {
-            item.range = [parseInt(item.breakpoint, 10), 100000]; 
-        }
-    });
-
-    // B. Sort by the minimum value of the range
-    arr.sort((a, b) => a.range[0] - b.range[0]);
-
-    // C. Find/Ensure the base style object
-    let defaultItem = arr.find(item => item.breakpoint === "default");
-    if (!defaultItem) {
-        defaultItem = { breakpoint: "default", range: breakpoints.default };
-        arr.unshift(defaultItem);
-    }
-    
-    // --- 2. STATE CAPTURE & RESET PREPARATION ---
-
-    // D. Ensure 'defaultItem' has a 'values' property, falling back to the base
-    // `mar` option. Same ordering caveat as respad() — see the note there.
-    if (defaultItem.values === undefined) {
-         defaultItem.values = (this.options && (this.options.mar || this.options.pad)) || null;
-    }
-
-
-    // --- 3. CORE LOGIC: The Responsive Task Function ---
-    const resmarTask = () => {
-        const width = Animator.viewportWidth();
-        let applied = defaultItem; 
-
-        // 1. RANGE LOGIC: Find the exact breakpoint whose range matches the current width.
-        for (let i = 0; i < arr.length; i++) {
-            const bp = arr[i];
-            const [min, max] = bp.range;
-
-            if (bp.breakpoint === "default") continue;
-
-            if (width >= min && width <= max) {
-                applied = bp;
-                break;
-            }
-        }
-        
-        // --- Apply Pad Style ---
-        
-        // Determine the final padding value: use applied.values if it exists, otherwise defaultItem.values
-        const finalPadValue = applied.values !== undefined ? applied.values : defaultItem.values;
-
-
-        
-        if (finalPadValue !== undefined && finalPadValue !== null) {
-            // Note: We trust this.pad handles the style application and clearing
-            this.mar(finalPadValue);
-        }
-    };
-
-
-    // --- 4. REGISTRATION ---
-    this._responsiveTasks = this._responsiveTasks || [];
-    this._responsiveTasks.push(resmarTask);
-    
-    // Ensure the unified handler is set up and starts listening
-    this._setupResponsiveManager(); 
-}
-
-
-
-	/*resprop(arr) {
-
-		this.prevBackground = this.res.style.background;
-			this.prevWidth = this.res.style.width;
-			this.prevHeight = this.res.style.height;
-			this.prevBorder = this.res.style.border;
-
-
-		const react = () => { // 00:49:12 22/03/2025
-
-			this.res.style.background = this.prevBackground;
-			this.res.style.width = this.prevWidth;
-			this.res.style.height = this.prevHeight;
-			this.res.style.border = this.prevBorder;
-
-			for (let i = 0; i < arr.length; i++) {
-				let point = arr[i].breakpoint;
-				if (window.matchMedia(`(max-width: ${this.getPX(point)}`).matches) {
-					const filteredObj = {};
-					for (const key in arr[i]) {
-						if (key !== "breakpoint") {
-							filteredObj[key] = arr[i][key];
-						}
-					}
-
-					this.set(filteredObj);
-				}
-			}
-		}
-
-
-		window.addEventListener("resize", react);
-		react();
-	}*/
-
-	/**
-	 * Tells the caller they passed an option that no longer exists as the
-	 * way to do this, and what to use instead.
-	 *
-	 * console.error only, deliberately. alert() is banned in live modules
-	 * (see the "no live module calls alert()" invariant): alerts had sat in
-	 * ordinary paths and blocked the page for every visitor, and the ban is
-	 * worth more than making this one warning louder.
-	 */
-	deprecatedOption(name, replacement) {
-		console.error(`nodality: \`${name}\` is deprecated — use \`${replacement}\` instead.`);
-		return this;
-	}
-
-	/**
-		 * Centres this element's CHILDREN.
-		 *
-		 *   center: true    both axes
-		 *   center: "x"     horizontally only
-		 *   center: "y"     vertically only
-		 *
-		 * Replaces six overlapping methods — toCenter(), toCenter("both"),
-		 * flexc(), toCol(), centerColumn and simpleCenter(). flexc() was
-		 * byte-identical to toCenter() and toCol() to toCenter("both"), so the
-		 * same behaviour had four names and the two that differed did so by
-		 * one property each.
-		 *
-		 * To centre the element ITSELF inside its parent, that is `mar:
-		 * "center"` — a different thing, and the reason the old names were so
-		 * easy to confuse.
-		 *
-		 * Axis-aware rather than fixed. justify-content runs along the main
-		 * axis, so in a flex column it is the VERTICAL one and align-items is
-		 * horizontal — the opposite of a flex row. The old methods hardcoded
-		 * flex-direction: column and so only ever worked one way round; this
-		 * reads the direction already set and centres the axis you asked for.
-		 * A grid gets justify-items/align-items instead, which is what
-		 * simpleCenter() was reaching for without setting a display at all.
-		 */
-		center(axis = true, hint = {}){
-			const s = this.res.style;
-			// The hints matter because this runs from commonMethods, before a
-			// component applies its own `disp`/`flexDir` aliases. Without them
-			// center() sees a bare element, assumes a flex column, and puts the
-			// centring on the wrong property for every row and grid.
-			const display = s.display || hint.display || "";
-			const direction = s.flexDirection || hint.flexDirection || "";
-			const grid = display.includes("grid");
-	
-			const x = axis === true || axis === "both" || axis === "x";
-			const y = axis === true || axis === "both" || axis === "y";
-	
-			if (grid){
-				if (x){ s.justifyItems = "center"; s.justifyContent = "center"; }
-				if (y){ s.alignItems = "center"; s.alignContent = "center"; }
-				return this;
-			}
-	
-			if (!display.includes("flex")) s.display = "flex";
-			if (!s.flexDirection) s.flexDirection = direction || "column";
-	
-			const column = (s.flexDirection || "column").startsWith("column");
-			const mainIsY = column;
-	
-			if (mainIsY ? y : x) s.justifyContent = "center";
-			if (mainIsY ? x : y) s.alignItems = "center";
-			return this;
-		}
-
-	isNumber(value) {
-		return typeof value === 'number' && !isNaN(value);
-	}
-
-	// Single source of truth for "how wide is the viewport". See the note in
-	// chainReact — visualViewport is preferred (it tracks pinch-zoom) but is
-	// not universally present.
-	static viewportWidth() {
-		if (typeof window === "undefined") return 0;
-		const vv = window.visualViewport;
-		return (vv && typeof vv.width === "number") ? vv.width : window.innerWidth;
-	}
- 
-	pad(arr){
-
-		for(let i = 0; i < arr.length; i++) {
-	
-			let keys = Object.keys(arr[i]);
-			for(let j = 0; j < keys.length; j++) {
-				let key = keys[j];
-				let value = arr[i][key];
-				for(let k = 0; k < key.length; k++) {
-					switch(key[k]) {
-						case 'a':
-							
-							//alert("OIHOI")
-							this.res.style.padding = this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 't':
-							this.res.style.paddingTop =  this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 'l':
-							this.res.style.paddingLeft =  this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 'r':
-							this.res.style.paddingRight =  this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 'b':
-							this.res.style.paddingBottom =  this.isNumber(value) ? `${value}px` : value;
-							break;
-						default:
-							// console.log(`Invalid key: ${key[k]}`);
-					}
-				}
-			}
-		}
-		return this;
-	}
-
-
-	as(asa){
-		this.res.style.alignSelf = asa;
-		return this;
-	}
-
-
-
-	mar(arr){
-
-		// Shorthand: mar: "center" → margin: 0 auto
-		if (arr === "center"){
-			this.res.style.marginLeft = "auto";
-			this.res.style.marginRight = "auto";
-			return this;
-		}
-
-		for(let i = 0; i < arr.length; i++) {
-			let keys = Object.keys(arr[i]);
-			for(let j = 0; j < keys.length; j++) {
-				let key = keys[j];
-				let value = arr[i][key];
-				for(let k = 0; k < key.length; k++) {
-					switch(key[k]) {
-						case 'a':
-							// mar: [{ a: "auto" }] → margin: 0 auto (centers block-level elements)
-							if (value === "auto"){
-								this.res.style.marginLeft = "auto";
-								this.res.style.marginRight = "auto";
-							} else {
-								this.res.style.margin = this.isNumber(value) ? `${value}px` : value;
-							}
-							break;
-						case 't':
-							this.res.style.marginTop = this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 'l':
-							this.res.style.marginLeft = this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 'r':
-							this.res.style.marginRight = this.isNumber(value) ? `${value}px` : value;
-							break;
-						case 'b':
-							this.res.style.marginBottom = this.isNumber(value) ? `${value}px` : value;
-							break;
-						default:
-							// console.log(`Invalid key: ${key[k]}`);
-					}
-				}
-
-				// Per-entry shorthand: { center: true } → marginLeft/Right = auto
-				if (key === "center" && value === true){
-					this.res.style.marginLeft = "auto";
-					this.res.style.marginRight = "auto";
-				}
-
-				// Value-based detection: if any value === "auto" on l/r/lr keys, force centering
-				if (value === "auto" && (key.includes("l") || key.includes("r"))){
-					if (key.includes("l")) this.res.style.marginLeft = "auto";
-					if (key.includes("r")) this.res.style.marginRight = "auto";
-				}
-			}
-		}
-		return this;
-	}
-
-
- smartRange(val, from, to) {
-
-    if (val < from.min) {
-        val = from.min;
-    }
-
-    if (val > from.max) {
-        val = from.max;
-    }
-
-    let percent = (val - from.min) / (from.max - from.min);
-
-    if (from.min > from.max) {
-        percent = (val - from.max) / (from.min - from.max);
-    }
-
-    // Linear interpolation across the OUTPUT range. The old form added
-    // |to.min| to to.max instead of subtracting it, so any range whose
-    // minimum was above zero overshot: 0.2 -> 1 produced 0.2 + 1.2p = 1.4
-    // at full scroll. Correct only when to.min <= 0, which is why the
-    // 0 -> 1 demos never showed it.
-    return to.min + (to.max - to.min) * percent;
-}
-
-
-	gpos(obj){
-		//alert(obj.col);
-		this.res.style.gridColumn = obj.col;
-		this.res.style.gridRow = obj.row;
-		//this.res.style.border = "1px solid green";
-		return this;
-	  }
-
-	fluidCopy(name){
-
-
-		if (name instanceof Object){
-			this.prevStylex = this.res.style;
-			this.res = document.createElement("h1");
-			this.res.style.cssText = this.prevStylex.cssText;
-			let node = document.createTextNode(this.text);
-			this.res.appendChild(node);
-             this.res.style.fontSize = name.exact;
-
-			 // alert(name.exact);
-
-			return this;
-		}
-        
-        const display1 = "calc(1.625rem + 5.075vw)";
-        
-        if (name === "S1"){
-			this.prevStylex = this.res.style;
-			this.res = document.createElement("h1");
-			this.res.style.cssText = this.prevStylex.cssText;
-			let node = document.createTextNode(this.text);
-			this.res.appendChild(node);
-             this.res.style.fontSize = display1;
-        }
-         
-        const display2 = "calc(1.500rem + 4.3vw)";
-        
-        if (name === "S2"){
-			this.prevStylex = this.res.style;
-			this.res = document.createElement("h2");
-			this.res.style.cssText = this.prevStylex.cssText;
-			let node = document.createTextNode(this.text);
-			this.res.appendChild(node);
-             this.res.style.fontSize = display2;
-        }
-        
-        
-        const display3 = "calc(1.375rem + 3.525vw)";
-        
-        if (name === "S3"){
-			this.prevStylex = this.res.style;
-			this.res = document.createElement("h3");
-			this.res.style.cssText = this.prevStylex.cssText;
-			let node = document.createTextNode(this.text);
-			this.res.appendChild(node);
-             this.res.style.fontSize = display3;
-        }
-
-		const display4 = "calc(1.250rem + 2.75vw)";
-        
-        if (name === "S4"){
-			this.prevStylex = this.res.style;
-			this.res = document.createElement("h4");
-			this.res.style.cssText = this.prevStylex.cssText;
-			let node = document.createTextNode(this.text);
-			this.res.appendChild(node);
-             this.res.style.fontSize = display4;
-        }
-
-		const display5 = "calc(1.125rem + 1.975vw)";
-        
-        if (name === "S5"){
-			this.prevStylex = this.res.style;
-			this.res = document.createElement("h5");
-			this.res.style.cssText = this.prevStylex.cssText;
-			let node = document.createTextNode(this.text);
-			this.res.appendChild(node);
-            this.res.style.fontSize = display5;
-        }
-
-
-
-		const display6 = "calc(1rem + 0.5vw)"; // calc(1rem + 1.2vw)
-        
-        if (name === "S6"){
-             this.res.style.fontSize = display6;
-        }
-        
-              return this;
-    }
-
-
-	
-    
-    setIndex(idx){
-		this.index = idx;
-	}
-
-	borderObj(options){
-		let type = options.type ?? "solid";
-		this.res.style.border = `${options.width} ${type} ${options.color}`
-		// Only touch borderRadius when the caller actually provided one.
-		// Otherwise we'd clobber the radius set via the styleMap (e.g.
-		// `radius: "50%"` on a circle) with `undefined`, which clears it.
-		if (options.radius !== undefined) {
-			this.res.style.borderRadius = options.radius;
-		}
-		return this;
-	}
-    
-/*
- protoReact(queries, id) {
-	// Sort the queries based on the starting range value in ascending order
-	queries.sort((a, b) => parseInt(a.range[0]) - parseInt(b.range[0]));
-  
-	// Function to check and log queries based on screen size
-	const checkQueries =() => {
-	  const screenSize = window.innerWidth;
-	  let ops = "";
-
-	  this.storedQueries = queries.map(el => el.target).filter(el => el != undefined);
-  
-	  for (const query of queries) {
-		this.counterIndex++;
-
-		const [startRange, endRange] = query.range;
-		const startSize = parseInt(startRange);
-		const endSize = parseInt(endRange);
-
-
-		let all = true;
-
-		if (query.target){
-			all = false;
-
-			for (var i = 0; i < query.target.length; i++){
-				if (query.target[i] === id){ // #id is required
-					all = true;
-				}
-			}
-		} 
-  
-		if (screenSize >= startSize && screenSize <= endSize && all) { // NEED TO COMMENT ALL
-		// USE THIS, but apply all properties all the time !! 255447
-
-		  if (query.log === "gradient"){
-			ops += "gradient";
-		  }
-
-		  if (query.log === "blast"){
-			ops += "blast";
-		  }
-
-		  if (query.log === "animation"){
-			ops += "animation";
-		  }
-
-		  if (query.log === "shadow"){
-			ops += "shadow";
-		  }
-
-		  if (query.log === "span"){
-			ops += "span";
-		  }
-
-		  if (query.log === "filter"){
-			ops += "filter";
-		  }
-
-		  if (query.log === "background"){
-			ops += "background";
-		  }
-		} 
-	  }
-	
-	
-	  this.res.style.margin = "";
-	  // Everything works 12:48:45 06/10/23
-
-	  let defaultColor = this.res.style.color; // 11:05:40 Nice
-
-		let mapped = queries.map(el => el.log).filter(el => el != undefined);
-		
-		if (mapped.includes("gradient")) {
-			this.res.style.WebkitBackgroundClip = "";
-			this.res.style.background = "";
-		}
-
-
-	  // Reset stroke
-	  this.res.style['-webkit-text-stroke'] = "";
-	  this.res.style.filter = ``;
-
-	  // Reset shadow
-	  this.res.style.textShadow = "";
-
-      // Temp reset border
-      this.res.style.border = "";
-	  
-	  while(this.res.firstChild) {  // not the problem...
-		this.res.removeChild(this.res.firstChild); // Remove all children
-	}
-
-	this.res.textContent = this.text;
-
-		if (ops === "") {
-			this.res.style['-webkit-text-fill-color'] = '';
-			this.res.style.color = defaultColor; //"green";
-		}
-
-
-		if (ops === "blast") { // Chekc id here ???
-		   for (var i = 0; i < queries.length; i++){
-			const off  = queries[i].op.offsets;
-
-			if (off && this.index !== undefined){
-				this.res.style.margin = off[Number(this.index)] + "px";
-			}
-		}
-
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style['-webkit-text-stroke'] = this.globalBlast; //this.globalBlast; //`3px orange`;
-	
-			for (var i = 0; i < queries.length; i++){
-				const off  = queries[i].op.offsets;
-				if (off && this.index !== undefined){
-					this.res.style.margin = off[Number(this.index)] + "px";
-				}
-			}
-		}
-	
-		
-
-		if (ops === "gradient") { // the problem is not here
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-		    this.res.style.background = this.globalGradient;// "linear-gradient(to left, #3498db, #1abc9c)";
-			this.res.style['-webkit-background-clip'] = 'text';
-		    this.res.style.border = "1px solid orange"; // Something on Wrapper prevents border works on text
-		}
-	
-
-		if (ops === "background"){
-			this.res.style.background = "orange";
-		}
-
-	
-		if (ops === "gradientblast") { 
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style.background = this.globalGradient;//"linear-gradient(to left, #3498db, #1abc9c)";
-			this.res.style['-webkit-background-clip'] = 'text';
-			this.res.style['-webkit-text-stroke'] = this.globalBlast; // `3px orange`;
-		}
-
-		if (ops === "gradientanimation") { // 12:33:14 Nice
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style.background = this.globalGradient; //"linear-gradient(to left, #3498db, #1abc9c)";
-			this.res.style['-webkit-background-clip'] = 'text';
-		}
-
-		if (ops === "gradientanimationshadow"){
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style.background = this.globalGradient; //"linear-gradient(to left, #3498db, #1abc9c)";
-			this.res.style['-webkit-background-clip'] = 'text';
-			this.res.style.textShadow = this.globalShadow; //"#1abc9cff -6px 6px, #1abc9c9f -12px 12px, #1abc9c40 -18px 18px";
-		}
-
-		if (ops === "animationshadow"){
-			this.res.style['-webkit-text-fill-color'] = '';
-			this.res.style.textShadow = this.globalShadow; //"#1abc9cff -6px 6px , #1abc9c40 -12px 12px";
-		}
-
-		if (ops === "shadow"){
-			// Clear all children and add text content
-			this.res.style['-webkit-text-fill-color'] = '';
-			this.res.style.textShadow = this.globalShadow; //"#1abc9cff -6px 6px , #1abc9c40 -12px 12px";
-		}
-
-
-		if (ops === "span"){
-			if (this.options.span){
-				let noiseObject;
-	
-				if (Array.isArray(this.options.span)){
-					noiseObject = this.options.span.filter(a => a.op.name === "span")[0];
-				} else {
-					noiseObject = this.options.span;
-				}
-
-				this.res.textContent = ""; // creating new element not helping
-	
-				for (var i = 0; i < noiseObject.op.parts.length; i++){
-					let opts = noiseObject.op.parts[i].style;
-					let span = new Text(noiseObject.op.parts[i].text).setup({type: "span"}).set(opts).render();
-					this.res.appendChild(span);
-				}
-			}
-		}
-	  
-
-		if (ops === "filter"){
-			let filterName = this.options.filtera.op.filter;
-			this.res.style.filter = filterName;
-			this.res.style.border = "8px solid orange";
-		}
-	}
-  
-	// Add an event listener to check queries on window resize
-	window.addEventListener('resize', checkQueries);
-  
-	// Initial check
-	checkQueries();
-  }
-*/
-
-
-
-setPref(id){
-	this.preffersId = id;
-}
-
-
-setClass(id){
-	this.class = id;
-}
-
-
-
-/*
- betaReact(queries, id) {
-
-	this.ap = false;
-	this.cta = 0;
-	this.once = false;
-	queries.sort((a, b) => parseInt(a.range[0]) - parseInt(b.range[0]));
-  
-	// Function to check and log queries based on screen size
-	const checkQueries =() => {
-	  const screenSize = window.innerWidth;
-	  let ops = "";
-
-	  this.resCopy = this.res;
-
-	  this.storedQueries = queries.map(el => el.target).filter(el => el != undefined);
-	  // // // console.log(this.storedQueries);
-  
-	  for (const query of queries) {
-		this.counterIndex++;
-
-		const [startRange, endRange] = query.range;
-		const startSize = parseInt(startRange);
-		const endSize = parseInt(endRange);
-		let all = true;
-
-		if (query.target){
-		//alert("KKK")
-			all = false;
-		//alert(this.res.id);
-
-			for (var i = 0; i < query.target.length; i++){
-				// // // console.log("QT " + query.target[i]);
-				// // // console.log("QS " + id);
-
-				if (query.target[i] === id){ // #id is required
-				
-					all = true;
+				// Value-based detection: if any value === "auto" on l/r/lr keys, force centering
+				if (value === "auto" && (key.includes("l") || key.includes("r"))){
+					if (key.includes("l")) this.res.style.marginLeft = "auto";
+					if (key.includes("r")) this.res.style.marginRight = "auto";
 				}
 			}
-		} 
-  
-		if (screenSize >= startSize && screenSize <= endSize && all) { // NEED TO COMMENT ALL
-		  if (query.log === "blast"){
-			ops += "blast";
-		  }
-
-		  if (query.log === "shadow"){
-			ops += "shadow";
-		  }
-
-		  if (query.log === "background"){
-			ops += "background";
-		  }
-
-		  if (query.log === "gradient"){
-			ops += "gradient";
-		  }
-
-		  if (query.log === "spana"){
-			ops += "spana";
-		  }
-
-		  if (query.log === "layout"){
-			ops += "layout";
-		  }
-
-		  if (query.log === "margin"){
-			ops += "margin";
-		  }
-
-		  if (query.op && query.op.margin){
-			this.useMargin = query.op.margin;
-		  }
-		} 
-
-	  }
-
-
-
-	  this.res.style.background = "";
-	  this.res.style.backgroundColor = "";
-	  this.res.style.textShadow = "";
-	  this.res.style.border = "";
-	  this.res.style.margin = ""
-
-	  this.res.style['-webkit-text-fill-color'] = '';
-		this.res.style['-webkit-text-stroke'] = "";
-		this.res.style['-webkit-text-stroke-width'] = "";
-
-	  if (ops === "background"){
-		// alert("PPPA")
-		this.res.style.backgroundColor = "green";
-	  }
-
-	  if (ops === "margin"){
-
-		for (var i = 0; i < queries.length; i++){
-
-			if (!queries[i].op){
-				continue;
-			}
-			const off  = queries[i].op.offsets;
-			if (off && this.index !== undefined){
-				this.res.style.margin = off[Number(this.index)] + "px";
-			}
-		}
-
-		
-	  }
-
-	  if (ops === "blastbackgroundmargin"){
-	
-	for (var i = 0; i < queries.length; i++){
-		if (!queries[i].op){
-			continue;
-		}
-
-		const off  = queries[i].op.offsets;
-		// console.log(off);
-		
-		if (off && this.index !== undefined){
-			 // console.warn("READ INDEX");
-			this.res.style.margin = off[Number(this.index)] + "px";
-		}
-	}
-		
-
-		this.res.style.backgroundColor = "green";
-		//this.useMargin ? this.res.style.margin = "1rem" : null;
-		// alert("PPPA")
-		if (this.getType() === "FlexRowLayoutElement"){
-			this.res.style.border = "1px solid orange";
-		} else {
-			this.res.textContent = this.text; //"a"
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			//this.res.style['-webkit-background-clip'] = 'text';
-			this.res.style['-webkit-text-stroke-color'] = "orange";
-			this.res.style['-webkit-text-stroke-width'] = "1px";
-		}
-		
-		this.res.style['-webkit-text-fill-color'] = 'transparent';
-		this.res.style['-webkit-text-stroke-color'] = "orange";
-		this.res.style['-webkit-text-stroke-width'] = "1px";
-	  }
-
-	  if (ops === "blastbackground"){
-
-		for (var i = 0; i < queries.length; i++){
-			if (!queries[i].op){
-				continue;
-			}
-
-			const off  = queries[i].op.offsets;
-
-			if (off && this.index !== undefined){
-				this.res.style.margin = off[Number(this.index)] + "px";
-			}
-		}
-	
-		this.res.style.backgroundColor = "green";
-		// no unused expression
-		this.useMargin ? this.res.style.margin = "1rem" : this.res.setAttribute("id", "iofhwoiefhoih");
-		//this.useMargin ? this.res.style.margin = "1rem" : null;
-		if (this.getType() === "FlexRowLayoutElement"){
-			this.res.style.border = "1px solid orange";
-		} else {
-			this.res.textContent = this.text; //"a"
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style['-webkit-text-stroke-color'] = "orange";
-			this.res.style['-webkit-text-stroke-width'] = "1px";
-		}
-		
-		this.res.style['-webkit-text-fill-color'] = 'transparent';
-		this.res.style['-webkit-text-stroke-color'] = "orange";
-		this.res.style['-webkit-text-stroke-width'] = "1px";
-	  }
-
-	  if (ops === "layout"){
-		this.res.style.alignSelf = "start";
-		this.res.style.border = "1px solid purple";
-	  }
-
-
-		
-
-	  if (ops === "blast") { // the problem is not here
-		
-		for (var i = 0; i < queries.length; i++){
-			if (!queries[i].op){
-				continue;
-			}
-			
-			const off  = queries[i].op.offsets;
-			if (off && this.index !== undefined){
-				this.res.style.margin = off[Number(this.index)] + "px";
-			}
-		}
-		
-		if (this.getType() === "FlexRowLayoutElement"){
-			this.res.style.border = "1px solid orange";
-		} else {
-			this.res.textContent = this.text; //"a"
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style['-webkit-background-clip'] = 'text';
-			this.res.style['-webkit-text-stroke-color'] = "orange";
-			this.res.style['-webkit-text-stroke-width'] = "1px";
 		}
-		
-		this.res.style['-webkit-text-fill-color'] = 'transparent';
-		this.res.style['-webkit-text-stroke'] = "orange";
-		this.res.style['-webkit-text-stroke-width'] = "1px";
-	}
-
-
-	if (ops === "blastgradientbackground"){
-		this.res.style.border = "1px solid yellow";
-		this.res.style['-webkit-text-stroke-color'] = "orange";
-		this.res.style['-webkit-text-stroke-width'] = "1px";
+		return this;
 	}
 
 
-	
-
-	if (ops === "gradient") {
-		
-		//alert("P")
-		
-		this.res.style.background = "linear-gradient(to left, #3498db, #1abc9c)";
-		
-		if (this.getType() === "FlexRowLayoutElement"){
-		} else {
-
-			this.res.children[0] && this.res.removeChild(this.res.children[0]);
-			//// console.warn(this.res.children[0]);
-			this.res.style['-webkit-text-fill-color'] = 'transparent';
-			this.res.style['-webkit-background-clip'] = 'text';
-			this.res.textContent = this.text; //"a"
-			//this.res.children[0] && this.res.removeChild(this.res.children[0]);
-		}
-	}
-
+ smartRange(val, from, to) {
 
+    if (val < from.min) {
+        val = from.min;
+    }
 
+    if (val > from.max) {
+        val = from.max;
+    }
 
+    let percent = (val - from.min) / (from.max - from.min);
 
-	  if (operations.includes("shadow")){
-			if (this.getType() === "FlexRowLayoutElement"){
-			} else {
-		
-				let str = "";
-				let off = 0;
-				for (var i = 0; i < this.options.shadow.op.steps; i++){
-					off += 3;
+    if (from.min > from.max) {
+        percent = (val - from.max) / (from.min - from.max);
+    }
 
-					let color = this.options.shadow.op.colors[i];
-					str += `drop-shadow(${off}px ${off}px ${off}px ${color}) `; 
-				}
+    // Linear interpolation across the OUTPUT range. The old form added
+    // |to.min| to to.max instead of subtracting it, so any range whose
+    // minimum was above zero overshot: 0.2 -> 1 produced 0.2 + 1.2p = 1.4
+    // at full scroll. Correct only when to.min <= 0, which is why the
+    // 0 -> 1 demos never showed it.
+    return to.min + (to.max - to.min) * percent;
+}
 
 
-				this.res.style.filter = str; 
-				
-		}
+	gpos(obj){
+		//alert(obj.col);
+		this.res.style.gridColumn = obj.col;
+		this.res.style.gridRow = obj.row;
+		//this.res.style.border = "1px solid green";
+		return this;
 	  }
 
-	}
-  
-	// Add an event listener to check queries on window resize
-	window.addEventListener('resize', checkQueries);
-  
-	// Initial check
-	checkQueries();
-  }*/
-
-
-  //--------- START OF INDEPENDENT
-
-
-// React without condition 
-// loop through queries 
-// to make all CSS immediatelly...
-
- /* cssGen(queries, id, classa, preffersClass){
-
-	this.css = [""];
-	return [""];
-
-	this.css = [];
-	queries.sort((a, b) => parseInt(a.range[0]) - parseInt(b.range[0]));
-  
-	// Function to check and log queries based on screen size
-	const checkQueries =() => {
-	  const screenSize = window.innerWidth;
-	  let ops = "";
-	  let operations = [];
-
-	  this.resCopy = this.res;
-
-	  this.storedQueries = queries.map(el => el.target).filter(el => el != undefined);
-	 
-	  // console.log("ULTRA");
-	  // console.log(queries);
-
-	  
-  
-	  for (const query of queries) {
-		this.counterIndex++;
-
-		const [startRange, endRange] = query.range;
-		const startSize = parseInt(startRange);
-		const endSize = parseInt(endRange);
-		let all = true;
-
-		
-
-		if (query.target){
-			//alert("KKK")
-				all = false;
-			//alert(this.res.id);
-	
-				for (var i = 0; i < query.target.length; i++){
-					// // // console.log("QT " + query.target[i]);
-					// // // console.log("QS " + id);
-	
-					if (query.target[i] === id){ // #id is required
-					
-						all = true;
-					}
-				}
-			} 
-
-
-
+	fluidCopy(name){
 
 
-		
-if (all){ // make it work only with ID ???
+		if (name instanceof Object){
+			this.prevStylex = this.res.style;
+			this.res = document.createElement("h1");
+			this.res.style.cssText = this.prevStylex.cssText;
+			let node = document.createTextNode(this.text);
+			this.res.appendChild(node);
+             this.res.style.fontSize = name.exact;
 
+			 // alert(name.exact);
 
-		operations.push(query.log);
+			return this;
+		}
+        
+        const display1 = "calc(1.625rem + 5.075vw)";
+        
+        if (name === "S1"){
+			this.prevStylex = this.res.style;
+			this.res = document.createElement("h1");
+			this.res.style.cssText = this.prevStylex.cssText;
+			let node = document.createTextNode(this.text);
+			this.res.appendChild(node);
+             this.res.style.fontSize = display1;
+        }
+         
+        const display2 = "calc(1.500rem + 4.3vw)";
+        
+        if (name === "S2"){
+			this.prevStylex = this.res.style;
+			this.res = document.createElement("h2");
+			this.res.style.cssText = this.prevStylex.cssText;
+			let node = document.createTextNode(this.text);
+			this.res.appendChild(node);
+             this.res.style.fontSize = display2;
+        }
+        
+        
+        const display3 = "calc(1.375rem + 3.525vw)";
+        
+        if (name === "S3"){
+			this.prevStylex = this.res.style;
+			this.res = document.createElement("h3");
+			this.res.style.cssText = this.prevStylex.cssText;
+			let node = document.createTextNode(this.text);
+			this.res.appendChild(node);
+             this.res.style.fontSize = display3;
+        }
 
-		let range = `\n @media (min-width: ${startSize}px) and (max-width: ${endSize}px)`;
-		this.range = range; // this.range is always the last one!!!
-		this.css.push({log: query.log, range: range, rules:[]});
-}
-	}
+		const display4 = "calc(1.250rem + 2.75vw)";
+        
+        if (name === "S4"){
+			this.prevStylex = this.res.style;
+			this.res = document.createElement("h4");
+			this.res.style.cssText = this.prevStylex.cssText;
+			let node = document.createTextNode(this.text);
+			this.res.appendChild(node);
+             this.res.style.fontSize = display4;
+        }
 
-	
+		const display5 = "calc(1.125rem + 1.975vw)";
+        
+        if (name === "S5"){
+			this.prevStylex = this.res.style;
+			this.res = document.createElement("h5");
+			this.res.style.cssText = this.prevStylex.cssText;
+			let node = document.createTextNode(this.text);
+			this.res.appendChild(node);
+            this.res.style.fontSize = display5;
+        }
 
-	if (operations.includes("blast")){
-		let ft = this.css.map(q => q.log).lastIndexOf("blast");
-		//// console.log("BLAST IDO IS " + ft + "TR" + this.range);
 
-		// should be 0-900
-		// is 880-930
-//alert(this.preffersId);
-//alert(this.class);
 
-		this.css[ft].rules.push(` 
-		${this.preffersId ? id : "." + this.class}{
-			-webkit-text-stroke-width: 1px;
-			-webkit-text-stroke-color: orange;
-			-webkit-text-fill-color: transparent;
-		}
-		`);
-	}
+		const display6 = "calc(1rem + 0.5vw)"; // calc(1rem + 1.2vw)
+        
+        if (name === "S6"){
+             this.res.style.fontSize = display6;
+        }
+        
+              return this;
+    }
 
-	if (operations.includes("gradient")){
-		//let ft = this.css.map(q => q.range).lastIndexOf(this.range);
-		//// console.log("IDO IS " + ft);
-		let ft = this.css.map(q => q.log).lastIndexOf("gradient");
-	//	// console.log("BLAST IDO IS " + ft + "TR" + this.range);
 
 	
-		this.css[ft].rules.push(` 
-		${this.preffersId ? id : "." + this.class}{
-			background: ${this.globalGradient};
-			-webkit-background-clip: text;
-			-webkit-text-fill-color: transparent;
-		}
-		`);
+    
+    setIndex(idx){
+		this.index = idx;
 	}
 
-	if (operations.includes("background")){
-		//let ft = this.css.map(q => q.range).lastIndexOf(this.range);
-		//// console.log("IDO IS " + ft);
-		let ft = this.css.map(q => q.log).lastIndexOf("background");
-		// console.log("ABLAST IDO IS " + ft + "TR" + this.range);
-//alert("Hello" + ft);
-//alert(this.class);
-		this.css[ft].rules.push(` 
-		${this.preffersId ? this.id : "." + this.class}{
-			background: green;
+	borderObj(options){
+		let type = options.type ?? "solid";
+		this.res.style.border = `${options.width} ${type} ${options.color}`
+		// Only touch borderRadius when the caller actually provided one.
+		// Otherwise we'd clobber the radius set via the styleMap (e.g.
+		// `radius: "50%"` on a circle) with `undefined`, which clears it.
+		if (options.radius !== undefined) {
+			this.res.style.borderRadius = options.radius;
 		}
-		`);
+		return this;
+	}
+    
 
-		// console.log("-----Hello-----");
-		// console.warn(this.css[ft]);
 
-	}
 
+setPref(id){
+	this.preffersId = id;
+}
 
-	if (operations.includes("shadow")){
-		let ft = this.css.map(q => q.log).lastIndexOf("shadow");
-		
-			let str = "";
-					let off = 0;
-					for (var i = 0; i < this.options.shadow.op.steps; i++){
-						off += 3;
-						str += `drop-shadow(${off}px ${off}px ${off}px gray) `; 
-					}
 
-		// BEWARE OF INDENTATION
-		this.css[ft].rules.push(`
-		${this.preffersId ? this.id : "." + this.class}{
-			filter: ${str};
-		 }
-					`);
-				//	this.res.style.filter = str;
-		
-	
-	}
+setClass(id){
+	this.class = id;
 }
 
-checkQueries();
 
 
 
-// console.log("FINAL QUERIES HERE");
-// console.log(this.css.map(r => r.rules));
-// console.log("::::::::::::::::::::::");
 
-  }*/
+  //--------- START OF INDEPENDENT
+
+
+// React without condition 
+// loop through queries 
+// to make all CSS immediatelly...
+
 setTags(obj){
 	//alert("TAGS SET")
 	this.openTag = obj.open;
@@ -2817,32 +1569,6 @@ if (this.getType() === "FlexRowLayoutElement" || this.getType() === "LayoutWrapp
 
 			//if (this.getType() === "FlexRowLayoutElement"){
 			//} else {
-		/*
-
-				let str = "";
-				let off = 0;
-				for (var i = 0; i < this.options.shadow.op.steps; i++){
-					off += 3;
-					str += `drop-shadow(${off}px ${off}px ${off}px ${this.options.shadow.op.colors[i] ?? "gray"}) `; 
-				}
-
-if (this.getType() === "FlexRowLayoutElement" || this.getType() === "LayoutWrapperElement"){
-
-	let finalFilter = ""
-	let offa = 0;
-				for (var i = 0; i < this.options.shadow.op.steps; i++){
-					offa += 3;
-					finalFilter += `${off}px ${off}px ${off}px ${this.options.shadow.op.colors[i] ?? "gray"} `; 
-				}
-this.res.style.boxShadow = finalFilter;
-alert(finalFilter);
-
-//this.res.style.boxShadow = `${off}px ${off}px ${off}px ${this.options.shadow.op.colors[i] ?? "gray"}`; //`${off}px ${off}px ${off}px ${this.options.shadow.op.colors[0] ?? "gray"}`; 
-} else {
-	this.res.style.filter = str; 
-}
-				
-*/
 				
 				
 	//	}
@@ -2861,39 +1587,6 @@ alert(finalFilter);
 			}
 		}
   }
-/*
-  if (operations.includes("spana") || operations.includes("span")){
-
-
-	this.res = this.resCopy;
-
-if (this.options.span){
-	let noiseObject;
-
-	if (Array.isArray(this.options.span)){
-		noiseObject = this.options.span.filter(a => a.op.name === "span")[0];
-	} else {
-		noiseObject = this.options.span;
-	}
-
-	this.res.textContent = ""; // creating new element not helping
-//console.log("OPOOOOO");
-//console.log(new Text("A"));
-	for (var i = 0; i < noiseObject.op.parts.length; i++){
-		let opts = noiseObject.op.parts[i].style;
-		let span = new this.constructor(noiseObject.op.parts[i].text).setup({type: "span"}).set(opts).render();
-		this.res.appendChild(span);
-	}
-}
-
-
-
-  } else {
-
-let t = new this.constructor(this.prevText).set({}).render();
-	if (this.prevText && this.prevText.length > 0 && qban){
-this.res.appendChild(t);
-	}*/
 
 
 
@@ -2910,13 +1603,6 @@ Object.assign(overlay.style, {
   pointerEvents: "none",
 });
 
-/*
-if (!this.res.querySelector("#oroa") && operations.includes("gradient")){
-// Set text content
-overlay.textContent = "SWIM FREE";
-overlay.style.position = "relative";
-this.res.appendChild(overlay);
-}*/
 
 		// 🛑 prevent re-creating spans on resize
   if (this.res && this.res.querySelector('span')) return;
@@ -3063,57 +1749,10 @@ this._on(window, this.openTag, () => {
   observer.observe(this.res);
   this._track(() => observer.disconnect());
 }
-/*
-if (!this.openedElements.get(this.res)) {
-  const ass = this.options.animation.op;
-
-this.res.querySelectorAll('span').forEach(span => {
-  if (!span._hasOpened) {
-    span.animate(ass.keyframesClose, { duration: 0, fill: "forwards" });
-
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting && !span._hasOpened) {
-          span._hasOpened = true;
-          span.animate(ass.keyframesOpen, ass.openOptions);
-          observer.disconnect();
-        }
-      });
-    });
-
-    observer.observe(span);
-  }
-});
-}*/
-
-
 
 
-/*
-	  if (this.options.animation && this.options.animation.op.fireAt && this.options.animation.op.fireAt === "inview") {
-
-		let ass = this.options.animation.op;
-
-		this.res.animate(ass.keyframesClose, {
-			duration: 0,
-			fill: "forwards"
-		});
-
 
-	  const observer = new IntersectionObserver((entries, observer) => {
-		entries.forEach(entry => {
-			if (entry.isIntersecting) {
-				// console.log("Element is in view!");
-				this.res.animate(ass.keyframesOpen, ass.openOptions);
-				// Perform your action here
-				observer.disconnect(); // Stop observing if you only want it to fire once
-			}
-		});
-	});
 
-		// Start observing the element
-		observer.observe(this.res);
-}*/
 	
 		
 	}
@@ -3410,312 +2049,7 @@ removeQuotesFromFirstWord(jsonString) {
 
 
 
-/*
-
-    navBarExpand(){
-        this.res.style.backgroundColor = "green";
-        this.res.animate([
-            {transform: "scaleY(3.0)"}
-        ], {
-            
-				
-                duration: 2000,
-                iterations: 1,
-                 fill: "both"
-                
-        })//.play();
-
-        return this;
-    }
-
-
-
-
-
-    
-	scrollFade(duration, direction){
-		this.res.style.visibility = "hidden";
-		this.faden(duration, direction, "scroll");
-		return this;
-	}
-    
-    
-    
-    
-    expand(obj){
-        
-        
-        
-        if (this.state.isExpanded === false){
-            
-        
-        if (obj.on === "click"){
-            this.res.addEventListener("click", () => {
-               this.innerExpand(obj); 
-                // this.moveUp(obj);
-            });
-        } else {
-            this.innerExpand(obj);
-           
-        }
-        
-        } else {
-            
-            this.innerExpandBack(obj);
-            
-            
-        }
-        
-        this.state.isExpanded = !this.state.isExpanded;
-        
-        // // // console.log("IS EXPANDED: " + this.state.isExpanded);
-        return this;
-    }*/
-    
-     /*
-    move(obj){
-        
-        if (obj.on === "click"){
-            this.res.addEventListener("click", () => {
-               this.moveUpa(obj); 
-                // this.moveUp(obj);
-            });
-        } else {
-                if (obj.direction === "up"){
-                    this.moveUpa(obj);
-                }
-            
-            if (obj.direction === "down"){
-                    this.moveDowna(obj);
-                }
-          //  }
-            
-            
-             this.state.isMovedUp = !this.state.isMovedUp;
-            
-                if (obj.direction === "left"){
-                    this.moveLeft(obj);
-                }
-        }
-        
-        return this;
-    }
-    
-    
-    
-    
-     moveLeft(obj){
-         this.res.animate([
-        {transform: `translateX(0px)`},   
-         {transform: `translateX(-${obj.distance})`},
-         
-		],{
-				
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		}).play();
-        
-        return this;
-    }
-    
-   
-    moveUpa(obj){
-        if (this.state.isMovedUp === false){
-            
-        this.res.animate([
-        {transform: `translateX(0px)`}, 
-         {transform: `translateY(-${obj.distance})`},
-		],{	
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		}).play();
-        
-        } else {
-            
-        this.res.animate([
-        {transform: `translateX(0px)`}, 
-         {transform: `translateY(${obj.distance})`},
-		],{	
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		}).play();
-            
-        }
-        return this;
-    }
-    
-    
-     moveDowna(obj){
-        if (this.state.isMovedDown === false){
-            
-        this.res.animate([
-        {transform: `translateX(0px)`}, 
-         {transform: `translateY(${obj.distance})`},
-		],{	
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		}).play();
-        
-        } else {
-            
-        this.res.animate([
-        {transform: `translateX(0px)`}, 
-         {transform: `translateY(-${obj.distance})`},
-		],{	
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		}).play();
-            
-        }
-        return this;
-    }
-    
-    
-    
-    moveUpaBack(obj){
-         this.res.animate([
-        {transform: `translateX(0px)`},
-		],{
-				
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		}).play();
-        
-        
-        return this;
-    }
-    
-    
-
-    innerExpandBack(obj){
-         this.res.animate([
-       
-         
-         {width: this.prevWidth,
-          height: this.prevHeight},
-         
-       //  {width: "100px", height: "100px"}
-		],{
-				
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		});
-    }
     
-    innerExpand(obj){
-        this.prevWidth = this.res.style.width;
-        this.prevHeight = this.res.style.height;
-            
-     this.res.animate([
-        {width: this.prevWidth,
-        height: this.prevHeight},
-         
-         {width: obj.width ?? this.prevWidth,
-          height: obj.height ?? this.prevHeight},
-		],{
-				
-		duration: 900,
-		iterations: obj.iterations,
-         fill: "both"
-		});
-        
-        return this;
-        
-        }
-        
-
-	fade(obj){
-		
-		this.res.style.visibility = "hidden";
-		this.faden(obj.duration, obj.from, "load");
-
-        if (obj.finalOpacity){
-this.finalOpacity = obj.finalOpacity;
-        }
-		return this;
-	}
-	
-	faden(duration, direction, event){
-		this.res.style.visibility = "hidden";
-		this.scrolled = false;	
-	
-		 window.addEventListener(event, () => {
-			this.res.style.visibility = "visible";
-			 var height = window.innerHeight;
-			   var top = this.res.getBoundingClientRect().top;
-            if ((top - height <= 0) || (event == "load")) {
-				
-			 if (this.scrolled == false){
-				 
-	if (direction == "left"){
-					  
-		this.res.animate([
-			{transform: "translateX(-30px)"},
-			{transform: "translateX(0px)"},
-		],{
-				
-		duration: duration,
-		iterations: 1
-		});
-	}
-				 
-	if (direction == "right"){
-					  
-		this.res.animate([
-			{transform: "translateX(30px)"},
-			{transform: "translateX(0px)"},
-		],{
-				
-		duration: duration,
-		iterations: 1
-		});
-	}
-				 
-				 
-	if (direction == "top"){  
-		this.res.animate([
-			{transform: "translateY(-30px)"},
-			{transform: "translateY(0px)"},
-		],{
-				
-		duration: duration,
-		iterations: 1
-		});
-	}
-				 
-	
-	if (direction == "bottom"){
-		this.res.animate([
-			{transform: "translateY(30px)"},
-			{transform: "translateY(0px)"},
-		],{
-				
-		duration: duration,
-		iterations: 1
-		});
-	}
-				 
-		this.res.animate([
-			{opacity: "0.0"},
-			{opacity: "1.0"}	
-		],{
-		duration: duration,
-		iterations: 1
-		});
-				 
-		this.scrolled = true;	 
-			 }	
-			} 
-		 });
-		return this;
-	}*/
 } // 2600-1870
 
 export { Animator };