```
    class PluginInterface {
      /**
       * Provides the plugin's CSS rules based on current global configurations.
       * @returns {string} - The CSS rule(s) as a string.
       */
      getCSS() {
        throw new Error('getCSS method must be implemented by the plugin.');
      }

      /**
       * Sets global CSS variables on the shadow host.
       * @param {HTMLElement} host - The shadow host element.
       */
      setGlobalVariables(host) {
        throw new Error('setGlobalVariables method must be implemented by the plugin.');
      }

      /**
       * Updates global configurations and returns the updated CSS.
       * @param {Object} options - Options to update.
       * @returns {string} - The updated CSS rule(s) as a string.
       */
      updateGlobal(options = {}) {
        throw new Error('updateGlobal method must be implemented by the plugin.');
      }
    }

    // BorderPlugin Implementation
    class BorderPlugin extends PluginInterface {
      constructor(options = {}) {
        super();
        this.size = options.size || '2px';
        this.color = options.color || '#000';
        this.borderRule = `
          .rect-region {
            border: var(--border-size, ${this.size}) solid var(--border-color, ${this.color});
          }
        `;
      }

      /**
       * Sets global CSS variables for border.
       * @param {HTMLElement} host - The shadow host element.
       */
      setGlobalVariables(host) {
        host.style.setProperty('--border-size', this.size);
        host.style.setProperty('--border-color', this.color);
      }

      /**
       * Provides the CSS rules for borders.
       * @returns {string} - The CSS rule(s).
       */
      getCSS() {
        return this.borderRule;
      }

      /**
       * Updates global configurations and returns the updated CSS.
       * @param {Object} options - Options to update.
       * @returns {string} - The updated CSS rule(s).
       */
      updateGlobal(options = {}) {
        if (options.size) this.size = options.size;
        if (options.color) this.color = options.color;
        this.borderRule = `
          .rect-region {
            border: var(--border-size, ${this.size}) solid var(--border-color, ${this.color});
          }
        `;
        return this.getCSS();
      }
    }

    // VertexPlugin Implementation
    class VertexPlugin extends PluginInterface {
      constructor(options = {}) {
        super();
        this.size = options.size || '25px';
        this.color = options.color || '#3498db';
        this.vertexRule = `
          .rect-region::before {
            width: var(--vertex-size, ${this.size});
            height: var(--vertex-size, ${this.size});
            background-color: var(--vertex-color, ${this.color});
          }
        `;
      }

      /**
       * Sets global CSS variables for vertex.
       * @param {HTMLElement} host - The shadow host element.
       */
      setGlobalVariables(host) {
        host.style.setProperty('--vertex-size', this.size);
        host.style.setProperty('--vertex-color', this.color);
      }

      /**
       * Provides the CSS rules for vertices.
       * @returns {string} - The CSS rule(s).
       */
      getCSS() {
        return this.vertexRule;
      }

      /**
       * Updates global configurations and returns the updated CSS.
       * @param {Object} options - Options to update.
       * @returns {string} - The updated CSS rule(s).
       */
      updateGlobal(options = {}) {
        if (options.size) this.size = options.size;
        if (options.color) this.color = options.color;
        this.vertexRule = `
          .rect-region::before {
            width: var(--vertex-size, ${this.size});
            height: var(--vertex-size, ${this.size});
            background-color: var(--vertex-color, ${this.color});
          }
        `;
        return this.getCSS();
      }
    }

    // Rectangle Wrapper
    class RectWrapper {
      /**
       * Creates a RectWrapper instance.
       * @param {HTMLElement} rect - The rectangle element.
       * @param {RectRegionShapeFactory} factory - Reference to the factory.
       */
      constructor(rect, factory) {
        this.rect = rect;
        this.factory = factory;
      }

      /**
       * Removes the rectangle from the DOM.
       */
      remove() {
        // Remove the rectangle from the DOM
        this.rect.remove();
      }

      /**
       * Updates the rectangle's properties and applies plugin-specific updates.
       * @param {Object} positionalOptions - New positional and size properties.
       * @param {Array} pluginUpdates - Array of plugin updates in the format [[PluginClass, options], ...].
       */
      update(positionalOptions = {}, pluginUpdates = []) {
        const { x, y, width, height } = positionalOptions;

        // Update position
        if (x !== undefined) {
          this.rect.style.left = typeof x === 'number' ? `${x}px` : x;
        }

        if (y !== undefined) {
          this.rect.style.top = typeof y === 'number' ? `${y}px` : y;
        }

        // Update size
        if (width !== undefined) {
          this.rect.style.setProperty('--width', typeof width === 'number' ? `${width}px` : width);
        }

        if (height !== undefined) {
          this.rect.style.setProperty('--height', typeof height === 'number' ? `${height}px` : height);
        }

        // Apply plugin-specific updates
        pluginUpdates.forEach(([PluginClass, options]) => {
          const plugin = this.factory.plugins.get(PluginClass);
          if (plugin) {
            // Update global CSS variables if per-rectangle variables are managed
            // Alternatively, you can implement per-rectangle plugin methods if needed
            // For this example, we'll assume that per-rectangle updates are handled via CSS variables
            if (plugin instanceof BorderPlugin || plugin instanceof VertexPlugin) {
              // Update per-rectangle CSS variables
              if (options.size !== undefined) {
                const varName = plugin instanceof BorderPlugin ? '--border-size' : '--vertex-size';
                this.rect.style.setProperty(varName, options.size);
              }
              if (options.color !== undefined) {
                const varName = plugin instanceof BorderPlugin ? '--border-color' : '--vertex-color';
                this.rect.style.setProperty(varName, options.color);
              }
            }
          } else {
            console.warn(`Plugin ${PluginClass.name} not found.`);
          }
        });

        // After updates, re-render CSS to ensure consistency
        // In this design, re-rendering is not necessary for per-rectangle updates
        // Only global updates require re-rendering
      }
    }

    // Rectangle Factory
    class RectRegionShapeFactory {
      /**
       * Constructor to initialize and mount on a container with optional plugins.
       * @param {HTMLElement} container - The DOM element to mount the rectangles.
       * @param {Array<PluginInterface>} plugins - Array of plugin instances.
       */
      constructor(container, plugins = []) {
        if (!(container instanceof HTMLElement)) {
          throw new Error('Container must be a valid DOM element.');
        }

        this.container = container;
        this.plugins = new Map();

        // Create a shadow root on the container
        this.shadow = container.attachShadow({ mode: 'open' });

        // Initialize a style element inside the shadow DOM
        this.styleElement = document.createElement('style');
        this.shadow.appendChild(this.styleElement);

        // Initialize a container inside the shadow DOM to hold rectangles
        this.rectContainer = document.createElement('div');
        this.rectContainer.style.position = 'relative'; // Ensures absolute children are positioned correctly
        this.shadow.appendChild(this.rectContainer);

        // Register and initialize plugins
        plugins.forEach(plugin => {
          this.registerPlugin(plugin);
        });

        // Initially render all CSS
        this.renderCSS();
      }

      /**
       * Registers a plugin and sets up its global styles.
       * @param {PluginInterface} plugin - The plugin instance.
       */
      registerPlugin(plugin) {
        this.plugins.set(plugin.constructor, plugin);
        plugin.setGlobalVariables(this.shadow.host);
      }

      /**
       * Updates a plugin's global configurations.
       * @param {Function} PluginClass - The plugin's class.
       * @param {Object} options - Options to update.
       */
      updateGlobalPlugin(PluginClass, options = {}) {
        const plugin = this.plugins.get(PluginClass);
        if (plugin) {
          // Update the plugin's global configurations
          const updatedCSS = plugin.updateGlobal(options);

          // Re-render CSS
          this.renderCSS();
        } else {
          console.warn(`Plugin ${PluginClass.name} not found.`);
        }
      }

      /**
       * Aggregates CSS from all plugins and the base styles, then injects into the style element.
       */
      renderCSS() {
        let aggregatedCSS = `
          :host {
            /* Global styles can be added here */
          }

          .rect-region {
            position: absolute;
            width: var(--width, 100px);
            height: var(--height, 100px);
            box-sizing: border-box;
          }

          .rect-region::before {
            content: '';
            position: absolute;
            width: var(--vertex-size, 25px);
            height: var(--vertex-size, 25px);
            background-color: var(--vertex-color, #3498db);
            box-sizing: border-box;

            /* Intermediate variables */
            --offset: calc(-0.5 * (var(--border-size, 2px) + var(--vertex-size)));
            --adjusted-width: calc(var(--width) - var(--border-size, 2px));
            --adjusted-height: calc(var(--height) - var(--border-size, 2px));

            /* Positioning the first vertex */
            top: var(--offset);
            left: var(--offset);

            /* Creating three more vertices using box-shadow, positioned at each corner */
            box-shadow:
              var(--adjusted-width) 0 0 0 var(--vertex-color),
              var(--adjusted-width) var(--adjusted-height) 0 0 var(--vertex-color),
              0 var(--adjusted-height) 0 0 var(--vertex-color);
          }
        `;

        // Append CSS from all plugins
        this.plugins.forEach(plugin => {
          aggregatedCSS += plugin.getCSS() + '\n';
        });

        this.styleElement.textContent = aggregatedCSS;
      }

      /**
       * Creates and appends a rectangle wrapped with plugins.
       * @param {number} x - The left position in pixels relative to the container.
       * @param {number} y - The top position in pixels relative to the container.
       * @param {number} width - Width of the rectangle in pixels.
       * @param {number} height - Height of the rectangle in pixels.
       * @returns {RectWrapper} - The wrapper object managing the rectangle.
       */
      createRect(x, y, width, height) {
        // Create the rectangle div
        const rect = document.createElement('div');
        rect.classList.add('rect-region');

        // Set position relative to the shadow container
        rect.style.left = `${x}px`;
        rect.style.top = `${y}px`;

        // Set width and height via CSS variables
        rect.style.setProperty('--width', `${width}px`);
        rect.style.setProperty('--height', `${height}px`);

        // Append the rectangle to the shadow DOM's container
        this.rectContainer.appendChild(rect);

        // Instantiate the wrapper with reference to this factory and the rectangle
        const rectWrapper = new RectWrapper(rect, this);
        return rectWrapper;
      }
    }

    // Usage Example

    // Instantiate plugins
    const plugins = [
      new BorderPlugin({ size: '3px', color: '#2c3e50' }),
      new VertexPlugin({ size: '20px', color: '#e74c3c' })
    ];

    // Get the container element
    const container = document.getElementById('rectangle-container');

    // Instantiate the factory with plugins
    const factory = new RectRegionShapeFactory(container, plugins);

    // Create multiple rectangles with different properties
    const rect1 = factory.createRect(50, 50, 200, 100);
    const rect2 = factory.createRect(300, 150, 250, 150);
    const rect3 = factory.createRect(600, 80, 180, 120); // Uses plugin defaults

    // Example: Update rect1 after 2 seconds
    setTimeout(() => {
      rect1.update(
        { x: 60, y: 60, width: 220, height: 120 },
        [
          [BorderPlugin, { size: '4px', color: '#8e44ad' }],
          [VertexPlugin, { size: '25px', color: '#2980b9' }]
        ]
      );
    }, 2000);

    // Example: Remove rect2 after 4 seconds
    setTimeout(() => {
      rect2.remove();
    }, 4000);

    // Example: Update global plugin settings after 6 seconds
    setTimeout(() => {
      factory.updateGlobalPlugin(BorderPlugin, { size: '5px', color: '#e67e22' });
      factory.updateGlobalPlugin(VertexPlugin, { size: '30px', color: '#f1c40f' });

      // Create a new rectangle to see updated global settings
      const rect4 = factory.createRect(100, 300, 150, 150);
      const rect5 = factory.createRect(400, 350, 200, 100);
    }, 6000);
```

for some reason, when factory creates a rect, the plugins are in effect, only when you do `rect.update` the plugin would be in effect. please find the errors and fix