@vc-shell/framework 2.0.0-alpha.8 → 2.0.0-pr221.637b802

package/dist/chunks/vendor-gridstack-Beau2jQ7.js

@@ -0,0 +1,3460 @@
+class h {
+  /**
+   * Convert a potential selector into an actual list of HTML elements.
+   * Supports CSS selectors, element references, and special ID handling.
+   *
+   * @param els selector string, HTMLElement, or array of elements
+   * @param root optional root element to search within (defaults to document, useful for shadow DOM)
+   * @returns array of HTML elements matching the selector
+   *
+   * @example
+   * const elements = Utils.getElements('.grid-item');
+   * const byId = Utils.getElements('#myWidget');
+   * const fromShadow = Utils.getElements('.item', shadowRoot);
+   */
+  static getElements(t, e = document) {
+    if (typeof t == "string") {
+      const i = "getElementById" in e ? e : void 0;
+      if (i && !isNaN(+t[0])) {
+        const r = i.getElementById(t);
+        return r ? [r] : [];
+      }
+      let s = e.querySelectorAll(t);
+      if (!s.length && t[0] !== "." && t[0] !== "#" && (s = e.querySelectorAll("." + t), s.length || (s = e.querySelectorAll("#" + t)), !s.length)) {
+        const r = e.querySelector(`[gs-id="${t}"]`);
+        return r ? [r] : [];
+      }
+      return Array.from(s);
+    }
+    return [t];
+  }
+  /**
+   * Convert a potential selector into a single HTML element.
+   * Similar to getElements() but returns only the first match.
+   *
+   * @param els selector string or HTMLElement
+   * @param root optional root element to search within (defaults to document)
+   * @returns the first HTML element matching the selector, or null if not found
+   *
+   * @example
+   * const element = Utils.getElement('#myWidget');
+   * const first = Utils.getElement('.grid-item');
+   */
+  static getElement(t, e = document) {
+    if (typeof t == "string") {
+      const i = "getElementById" in e ? e : void 0;
+      if (!t.length)
+        return null;
+      if (i && t[0] === "#")
+        return i.getElementById(t.substring(1));
+      if (t[0] === "#" || t[0] === "." || t[0] === "[")
+        return e.querySelector(t);
+      if (i && !isNaN(+t[0]))
+        return i.getElementById(t);
+      let s = e.querySelector(t);
+      return i && !s && (s = i.getElementById(t)), s || (s = e.querySelector("." + t)), s;
+    }
+    return t;
+  }
+  /**
+   * Check if a widget should be lazy loaded based on node or grid settings.
+   *
+   * @param n the grid node to check
+   * @returns true if the item should be lazy loaded
+   *
+   * @example
+   * if (Utils.lazyLoad(node)) {
+   *   // Set up intersection observer for lazy loading
+   * }
+   */
+  static lazyLoad(t) {
+    return t.lazyLoad || t.grid?.opts?.lazyLoad && t.lazyLoad !== !1;
+  }
+  /**
+   * Create a div element with the specified CSS classes.
+   *
+   * @param classes array of CSS class names to add
+   * @param parent optional parent element to append the div to
+   * @returns the created div element
+   *
+   * @example
+   * const div = Utils.createDiv(['grid-item', 'draggable']);
+   * const nested = Utils.createDiv(['content'], parentDiv);
+   */
+  static createDiv(t, e) {
+    const i = document.createElement("div");
+    return t.forEach((s) => {
+      s && i.classList.add(s);
+    }), e?.appendChild(i), i;
+  }
+  /**
+   * Check if a widget should resize to fit its content.
+   *
+   * @param n the grid node to check (can be undefined)
+   * @param strict if true, only returns true for explicit sizeToContent:true (not numbers)
+   * @returns true if the widget should resize to content
+   *
+   * @example
+   * if (Utils.shouldSizeToContent(node)) {
+   *   // Trigger content-based resizing
+   * }
+   */
+  static shouldSizeToContent(t, e = !1) {
+    return t?.grid && (e ? t.sizeToContent === !0 || t.grid.opts.sizeToContent === !0 && t.sizeToContent === void 0 : !!t.sizeToContent || t.grid.opts.sizeToContent && t.sizeToContent !== !1);
+  }
+  /**
+   * Check if two grid positions overlap/intersect.
+   *
+   * @param a first position with x, y, w, h properties
+   * @param b second position with x, y, w, h properties
+   * @returns true if the positions overlap
+   *
+   * @example
+   * const overlaps = Utils.isIntercepted(
+   *   {x: 0, y: 0, w: 2, h: 1},
+   *   {x: 1, y: 0, w: 2, h: 1}
+   * ); // true - they overlap
+   */
+  static isIntercepted(t, e) {
+    return !(t.y >= e.y + e.h || t.y + t.h <= e.y || t.x + t.w <= e.x || t.x >= e.x + e.w);
+  }
+  /**
+   * Check if two grid positions are touching (edges or corners).
+   *
+   * @param a first position
+   * @param b second position
+   * @returns true if the positions are touching
+   *
+   * @example
+   * const touching = Utils.isTouching(
+   *   {x: 0, y: 0, w: 2, h: 1},
+   *   {x: 2, y: 0, w: 1, h: 1}
+   * ); // true - they share an edge
+   */
+  static isTouching(t, e) {
+    return h.isIntercepted(t, { x: e.x - 0.5, y: e.y - 0.5, w: e.w + 1, h: e.h + 1 });
+  }
+  /**
+   * Calculate the overlapping area between two grid positions.
+   *
+   * @param a first position
+   * @param b second position
+   * @returns the area of overlap (0 if no overlap)
+   *
+   * @example
+   * const overlap = Utils.areaIntercept(
+   *   {x: 0, y: 0, w: 3, h: 2},
+   *   {x: 1, y: 0, w: 3, h: 2}
+   * ); // returns 4 (2x2 overlap)
+   */
+  static areaIntercept(t, e) {
+    const i = t.x > e.x ? t.x : e.x, s = t.x + t.w < e.x + e.w ? t.x + t.w : e.x + e.w;
+    if (s <= i)
+      return 0;
+    const r = t.y > e.y ? t.y : e.y, n = t.y + t.h < e.y + e.h ? t.y + t.h : e.y + e.h;
+    return n <= r ? 0 : (s - i) * (n - r);
+  }
+  /**
+   * Calculate the total area of a grid position.
+   *
+   * @param a position with width and height
+   * @returns the total area (width * height)
+   *
+   * @example
+   * const area = Utils.area({x: 0, y: 0, w: 3, h: 2}); // returns 6
+   */
+  static area(t) {
+    return t.w * t.h;
+  }
+  /**
+   * Sort an array of grid nodes by position (y first, then x).
+   *
+   * @param nodes array of nodes to sort
+   * @param dir sort direction: 1 for ascending (top-left first), -1 for descending
+   * @returns the sorted array (modifies original)
+   *
+   * @example
+   * const sorted = Utils.sort(nodes); // Sort top-left to bottom-right
+   * const reverse = Utils.sort(nodes, -1); // Sort bottom-right to top-left
+   */
+  static sort(t, e = 1) {
+    return t.sort((s, r) => {
+      const n = e * ((s.y ?? 1e4) - (r.y ?? 1e4));
+      return n === 0 ? e * ((s.x ?? 1e4) - (r.x ?? 1e4)) : n;
+    });
+  }
+  /**
+   * Find a grid node by its ID.
+   *
+   * @param nodes array of nodes to search
+   * @param id the ID to search for
+   * @returns the node with matching ID, or undefined if not found
+   *
+   * @example
+   * const node = Utils.find(nodes, 'widget-1');
+   * if (node) console.log('Found node at:', node.x, node.y);
+   */
+  static find(t, e) {
+    return e ? t.find((i) => i.id === e) : void 0;
+  }
+  /**
+   * Convert various value types to boolean.
+   * Handles strings like 'false', 'no', '0' as false.
+   *
+   * @param v value to convert
+   * @returns boolean representation
+   *
+   * @example
+   * Utils.toBool('true');  // true
+   * Utils.toBool('false'); // false
+   * Utils.toBool('no');    // false
+   * Utils.toBool('1');     // true
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static toBool(t) {
+    return typeof t == "boolean" ? t : typeof t == "string" ? (t = t.toLowerCase(), !(t === "" || t === "no" || t === "false" || t === "0")) : !!t;
+  }
+  /**
+   * Convert a string value to a number, handling null and empty strings.
+   *
+   * @param value string or null value to convert
+   * @returns number value, or undefined for null/empty strings
+   *
+   * @example
+   * Utils.toNumber('42');  // 42
+   * Utils.toNumber('');    // undefined
+   * Utils.toNumber(null);  // undefined
+   */
+  static toNumber(t) {
+    return t === null || t.length === 0 ? void 0 : Number(t);
+  }
+  /**
+   * Parse a height value with units into numeric value and unit string.
+   * Supports px, em, rem, vh, vw, %, cm, mm units.
+   *
+   * @param val height value as number or string with units
+   * @returns object with h (height) and unit properties
+   *
+   * @example
+   * Utils.parseHeight('100px');  // {h: 100, unit: 'px'}
+   * Utils.parseHeight('2rem');   // {h: 2, unit: 'rem'}
+   * Utils.parseHeight(50);       // {h: 50, unit: 'px'}
+   */
+  static parseHeight(t) {
+    let e, i = "px";
+    if (typeof t == "string")
+      if (t === "auto" || t === "")
+        e = 0;
+      else {
+        const s = t.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/);
+        if (!s)
+          throw new Error(`Invalid height val = ${t}`);
+        i = s[2] || "px", e = parseFloat(s[1]);
+      }
+    else
+      e = t;
+    return { h: e, unit: i };
+  }
+  /**
+   * Copy unset fields from source objects to target object (shallow merge with defaults).
+   * Similar to Object.assign but only sets undefined/null fields.
+   *
+   * @param target the object to copy defaults into
+   * @param sources one or more source objects to copy defaults from
+   * @returns the modified target object
+   *
+   * @example
+   * const config = { width: 100 };
+   * Utils.defaults(config, { width: 200, height: 50 });
+   * // config is now { width: 100, height: 50 }
+   */
+  // eslint-disable-next-line
+  static defaults(t, ...e) {
+    return e.forEach((i) => {
+      for (const s in i) {
+        if (!i.hasOwnProperty(s))
+          return;
+        t[s] === null || t[s] === void 0 ? t[s] = i[s] : typeof i[s] == "object" && typeof t[s] == "object" && h.defaults(t[s], i[s]);
+      }
+    }), t;
+  }
+  /**
+   * Compare two objects for equality (shallow comparison).
+   * Checks if objects have the same fields and values at one level deep.
+   *
+   * @param a first object to compare
+   * @param b second object to compare
+   * @returns true if objects have the same values
+   *
+   * @example
+   * Utils.same({x: 1, y: 2}, {x: 1, y: 2}); // true
+   * Utils.same({x: 1}, {x: 1, y: 2}); // false
+   */
+  static same(t, e) {
+    if (typeof t != "object")
+      return t == e;
+    if (typeof t != typeof e || Object.keys(t).length !== Object.keys(e).length)
+      return !1;
+    for (const i in t)
+      if (t[i] !== e[i])
+        return !1;
+    return !0;
+  }
+  /**
+   * Copy position and size properties from one widget to another.
+   * Copies x, y, w, h and optionally min/max constraints.
+   *
+   * @param a target widget to copy to
+   * @param b source widget to copy from
+   * @param doMinMax if true, also copy min/max width/height constraints
+   * @returns the target widget (a)
+   *
+   * @example
+   * Utils.copyPos(widget1, widget2); // Copy position/size
+   * Utils.copyPos(widget1, widget2, true); // Also copy constraints
+   */
+  static copyPos(t, e, i = !1) {
+    return e.x !== void 0 && (t.x = e.x), e.y !== void 0 && (t.y = e.y), e.w !== void 0 && (t.w = e.w), e.h !== void 0 && (t.h = e.h), i && (e.minW && (t.minW = e.minW), e.minH && (t.minH = e.minH), e.maxW && (t.maxW = e.maxW), e.maxH && (t.maxH = e.maxH)), t;
+  }
+  /** true if a and b has same size & position */
+  static samePos(t, e) {
+    return t && e && t.x === e.x && t.y === e.y && (t.w || 1) === (e.w || 1) && (t.h || 1) === (e.h || 1);
+  }
+  /** given a node, makes sure it's min/max are valid */
+  static sanitizeMinMax(t) {
+    t.minW || delete t.minW, t.minH || delete t.minH, t.maxW || delete t.maxW, t.maxH || delete t.maxH;
+  }
+  /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
+  static removeInternalAndSame(t, e) {
+    if (!(typeof t != "object" || typeof e != "object") && !(Array.isArray(t) || Array.isArray(e)))
+      for (let i in t) {
+        const s = t[i], r = e[i];
+        i[0] === "_" || s === r ? delete t[i] : s && typeof s == "object" && r !== void 0 && (h.removeInternalAndSame(s, r), Object.keys(s).length || delete t[i]);
+      }
+  }
+  /** removes internal fields '_' and default values for saving */
+  static removeInternalForSave(t, e = !0) {
+    for (let i in t)
+      (i[0] === "_" || t[i] === null || t[i] === void 0) && delete t[i];
+    delete t.grid, e && delete t.el, t.autoPosition || delete t.autoPosition, t.noResize || delete t.noResize, t.noMove || delete t.noMove, t.locked || delete t.locked, (t.w === 1 || t.w === t.minW) && delete t.w, (t.h === 1 || t.h === t.minH) && delete t.h;
+  }
+  /** return the closest parent (or itself) matching the given class */
+  // static closestUpByClass(el: HTMLElement, name: string): HTMLElement {
+  //   while (el) {
+  //     if (el.classList.contains(name)) return el;
+  //     el = el.parentElement
+  //   }
+  //   return null;
+  // }
+  /** delay calling the given function for given delay, preventing new calls from happening while waiting */
+  static throttle(t, e) {
+    let i = !1;
+    return (...s) => {
+      i || (i = !0, setTimeout(() => {
+        t(...s), i = !1;
+      }, e));
+    };
+  }
+  static removePositioningStyles(t) {
+    const e = t.style;
+    e.position && e.removeProperty("position"), e.left && e.removeProperty("left"), e.top && e.removeProperty("top"), e.width && e.removeProperty("width"), e.height && e.removeProperty("height");
+  }
+  /** @internal returns the passed element if vertically scrollable, else the closest parent that will, up to the entire document scrolling element */
+  static getScrollElement(t) {
+    if (!t)
+      return document.scrollingElement || document.documentElement;
+    const e = getComputedStyle(t).overflowY;
+    return (e === "auto" || e === "scroll") && t.scrollHeight > t.clientHeight ? t : h.getScrollElement(t.parentElement);
+  }
+  /**
+   * @internal Function used to scroll the page.
+   *
+   * @param event `MouseEvent` that triggers the resize
+   * @param el `HTMLElement` that's being resized
+   * @param distance Distance from the V edges to start scrolling
+   */
+  static updateScrollResize(t, e, i) {
+    const s = h.getScrollElement(e), r = s.clientHeight, n = s === h.getScrollElement() ? 0 : s.getBoundingClientRect().top, o = t.clientY - n, d = o < i, l = o > r - i;
+    d ? s.scrollBy({ behavior: "smooth", top: o - i }) : l && s.scrollBy({ behavior: "smooth", top: i - (r - o) });
+  }
+  /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
+  static clone(t) {
+    return t == null || typeof t != "object" ? t : t instanceof Array ? [...t] : { ...t };
+  }
+  /**
+   * Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
+   * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
+   */
+  static cloneDeep(t) {
+    const e = ["parentGrid", "el", "grid", "subGrid", "engine"], i = h.clone(t);
+    for (const s in i)
+      i.hasOwnProperty(s) && typeof i[s] == "object" && s.substring(0, 2) !== "__" && !e.find((r) => r === s) && (i[s] = h.cloneDeep(t[s]));
+    return i;
+  }
+  /** deep clone the given HTML node, removing teh unique id field */
+  static cloneNode(t) {
+    const e = t.cloneNode(!0);
+    return e.removeAttribute("id"), e;
+  }
+  static appendTo(t, e) {
+    let i;
+    typeof e == "string" ? i = h.getElement(e) : i = e, i && i.appendChild(t);
+  }
+  // public static setPositionRelative(el: HTMLElement): void {
+  //   if (!(/^(?:r|a|f)/).test(getComputedStyle(el).position)) {
+  //     el.style.position = "relative";
+  //   }
+  // }
+  static addElStyles(t, e) {
+    if (e instanceof Object)
+      for (const i in e)
+        e.hasOwnProperty(i) && (Array.isArray(e[i]) ? e[i].forEach((s) => {
+          t.style[i] = s;
+        }) : t.style[i] = e[i]);
+  }
+  static initEvent(t, e) {
+    const i = { type: e.type }, s = {
+      button: 0,
+      which: 0,
+      buttons: 1,
+      bubbles: !0,
+      cancelable: !0,
+      target: e.target ? e.target : t.target
+    };
+    return ["altKey", "ctrlKey", "metaKey", "shiftKey"].forEach((r) => i[r] = t[r]), ["pageX", "pageY", "clientX", "clientY", "screenX", "screenY"].forEach((r) => i[r] = t[r]), { ...i, ...s };
+  }
+  /** copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target */
+  static simulateMouseEvent(t, e, i) {
+    const s = t, r = new MouseEvent(e, {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      view: window,
+      detail: 1,
+      screenX: t.screenX,
+      screenY: t.screenY,
+      clientX: t.clientX,
+      clientY: t.clientY,
+      ctrlKey: s.ctrlKey ?? !1,
+      altKey: s.altKey ?? !1,
+      shiftKey: s.shiftKey ?? !1,
+      metaKey: s.metaKey ?? !1,
+      button: 0,
+      relatedTarget: t.target
+    });
+    (i || t.target).dispatchEvent(r);
+  }
+  /**
+   * defines an element that is used to get the offset and scale from grid transforms
+   * returns the scale and offsets from said element
+  */
+  static getValuesFromTransformedElement(t) {
+    const e = document.createElement("div");
+    h.addElStyles(e, {
+      opacity: "0",
+      position: "fixed",
+      top: "0px",
+      left: "0px",
+      width: "1px",
+      height: "1px",
+      zIndex: "-999999"
+    }), t.appendChild(e);
+    const i = e.getBoundingClientRect();
+    return t.removeChild(e), e.remove(), {
+      xScale: 1 / i.width,
+      yScale: 1 / i.height,
+      xOffset: i.left,
+      yOffset: i.top
+    };
+  }
+  /** swap the given object 2 field values */
+  static swap(t, e, i) {
+    if (!t)
+      return;
+    const s = t[e];
+    t[e] = t[i], t[i] = s;
+  }
+  /** returns true if event is inside the given element rectangle */
+  // Note: Safari Mac has null event.relatedTarget which causes #1684 so check if DragEvent is inside the coordinates instead
+  //    Utils.el.contains(event.relatedTarget as HTMLElement)
+  // public static inside(e: MouseEvent, el: HTMLElement): boolean {
+  //   // srcElement, toElement, target: all set to placeholder when leaving simple grid, so we can't use that (Chrome)
+  //   const target: HTMLElement = e.relatedTarget || (e as any).fromElement;
+  //   if (!target) {
+  //     const { bottom, left, right, top } = el.getBoundingClientRect();
+  //     return (e.x < right && e.x > left && e.y < bottom && e.y > top);
+  //   }
+  //   return el.contains(target);
+  // }
+  /** true if the item can be rotated (checking for prop, not space available) */
+  static canBeRotated(t) {
+    return !(!t || t.w === t.h || t.locked || t.noResize || t.grid?.opts.disableResize || t.minW && t.minW === t.maxW || t.minH && t.minH === t.maxH);
+  }
+}
+class x {
+  constructor(t = {}) {
+    this.addedNodes = [], this.removedNodes = [], this.defaultColumn = 12, this.column = t.column || this.defaultColumn, this.column > this.defaultColumn && (this.defaultColumn = this.column), this.maxRow = t.maxRow, this._float = t.float, this.nodes = t.nodes || [], this.onChange = t.onChange;
+  }
+  /**
+   * Enable/disable batch mode for multiple operations to optimize performance.
+   * When enabled, layout updates are deferred until batch mode is disabled.
+   *
+   * @param flag true to enable batch mode, false to disable and apply changes
+   * @param doPack if true (default), pack/compact nodes when disabling batch mode
+   * @returns the engine instance for chaining
+   *
+   * @example
+   * // Start batch mode for multiple operations
+   * engine.batchUpdate(true);
+   * engine.addNode(node1);
+   * engine.addNode(node2);
+   * engine.batchUpdate(false); // Apply all changes at once
+   */
+  batchUpdate(t = !0, e = !0) {
+    return !!this.batchMode === t ? this : (this.batchMode = t, t ? (this._prevFloat = this._float, this._float = !0, this.cleanNodes(), this.saveInitial()) : (this._float = this._prevFloat, delete this._prevFloat, e && this._packNodes(), this._notify()), this);
+  }
+  // use entire row for hitting area (will use bottom reverse sorted first) if we not actively moving DOWN and didn't already skip
+  _useEntireRowArea(t, e) {
+    return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!t._moving || t._skipDown || e.y <= t.y);
+  }
+  /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.
+   * return true if we moved. */
+  _fixCollisions(t, e = t, i, s = {}) {
+    if (this.sortNodes(-1), i = i || this.collide(t, e), !i)
+      return !1;
+    if (t._moving && !s.nested && !this.float && this.swap(t, i))
+      return !0;
+    let r = e;
+    !this._loading && this._useEntireRowArea(t, e) && (r = { x: 0, w: this.column, y: e.y, h: e.h }, i = this.collide(t, r, s.skip));
+    let n = !1;
+    const o = { nested: !0, pack: !1 };
+    let d = 0;
+    for (; i = i || this.collide(t, r, s.skip); ) {
+      if (d++ > this.nodes.length * 2)
+        throw new Error("Infinite collide check");
+      let l;
+      if (i.locked || this._loading || t._moving && !t._skipDown && e.y > t.y && !this.float && // can take space we had, or before where we're going
+      (!this.collide(i, { ...i, y: t.y }, t) || !this.collide(i, { ...i, y: e.y - i.h }, t))) {
+        t._skipDown = t._skipDown || e.y > t.y;
+        const a = { ...e, y: i.y + i.h, ...o };
+        l = this._loading && h.samePos(t, a) ? !0 : this.moveNode(t, a), (i.locked || this._loading) && l ? h.copyPos(e, t) : !i.locked && l && s.pack && (this._packNodes(), e.y = i.y + i.h, h.copyPos(t, e)), n = n || l;
+      } else
+        l = this.moveNode(i, { ...i, y: e.y + e.h, skip: t, ...o });
+      if (!l)
+        return n;
+      i = void 0;
+    }
+    return n;
+  }
+  /**
+   * Return the first node that intercepts/collides with the given node or area.
+   * Used for collision detection during drag and drop operations.
+   *
+   * @param skip the node to skip in collision detection (usually the node being moved)
+   * @param area the area to check for collisions (defaults to skip node's area)
+   * @param skip2 optional second node to skip in collision detection
+   * @returns the first colliding node, or undefined if no collision
+   *
+   * @example
+   * const colliding = engine.collide(draggedNode, {x: 2, y: 1, w: 2, h: 1});
+   * if (colliding) {
+   *   console.log('Would collide with:', colliding.id);
+   * }
+   */
+  collide(t, e = t, i) {
+    const s = t._id, r = i?._id;
+    return this.nodes.find((n) => n._id !== s && n._id !== r && h.isIntercepted(n, e));
+  }
+  /**
+   * Return all nodes that intercept/collide with the given node or area.
+   * Similar to collide() but returns all colliding nodes instead of just the first.
+   *
+   * @param skip the node to skip in collision detection
+   * @param area the area to check for collisions (defaults to skip node's area)
+   * @param skip2 optional second node to skip in collision detection
+   * @returns array of all colliding nodes
+   *
+   * @example
+   * const allCollisions = engine.collideAll(draggedNode);
+   * console.log('Colliding with', allCollisions.length, 'nodes');
+   */
+  collideAll(t, e = t, i) {
+    const s = t._id, r = i?._id;
+    return this.nodes.filter((n) => n._id !== s && n._id !== r && h.isIntercepted(n, e));
+  }
+  /** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */
+  directionCollideCoverage(t, e, i) {
+    if (!e.rect || !t._rect)
+      return;
+    const s = t._rect, r = { ...e.rect };
+    r.y > s.y ? (r.h += r.y - s.y, r.y = s.y) : r.h += s.y - r.y, r.x > s.x ? (r.w += r.x - s.x, r.x = s.x) : r.w += s.x - r.x;
+    let n, o = 0.5;
+    for (let d of i) {
+      if (d.locked || !d._rect)
+        break;
+      const l = d._rect;
+      let a = Number.MAX_VALUE, u = Number.MAX_VALUE;
+      s.y < l.y ? a = (r.y + r.h - l.y) / l.h : s.y + s.h > l.y + l.h && (a = (l.y + l.h - r.y) / l.h), s.x < l.x ? u = (r.x + r.w - l.x) / l.w : s.x + s.w > l.x + l.w && (u = (l.x + l.w - r.x) / l.w);
+      const c = Math.min(u, a);
+      c > o && (o = c, n = d);
+    }
+    return e.collide = n, n;
+  }
+  /** does a pixel coverage returning the node that has the most coverage by area */
+  /*
+  protected collideCoverage(r: GridStackPosition, collides: GridStackNode[]): {collide: GridStackNode, over: number} {
+    const collide: GridStackNode;
+    const overMax = 0;
+    collides.forEach(n => {
+      if (n.locked || !n._rect) return;
+      const over = Utils.areaIntercept(r, n._rect);
+      if (over > overMax) {
+        overMax = over;
+        collide = n;
+      }
+    });
+    return {collide, over: overMax};
+  }
+  */
+  /**
+   * Cache the pixel rectangles for all nodes used for collision detection during drag operations.
+   * This optimization converts grid coordinates to pixel coordinates for faster collision detection.
+   *
+   * @param w width of a single grid cell in pixels
+   * @param h height of a single grid cell in pixels
+   * @param top top margin/padding in pixels
+   * @param right right margin/padding in pixels
+   * @param bottom bottom margin/padding in pixels
+   * @param left left margin/padding in pixels
+   * @returns the engine instance for chaining
+   *
+   * @internal This is typically called by GridStack during resize events
+   */
+  cacheRects(t, e, i, s, r, n) {
+    return this.nodes.forEach((o) => o._rect = {
+      y: o.y * e + i,
+      x: o.x * t + n,
+      w: o.w * t - n - s,
+      h: o.h * e - i - r
+    }), this;
+  }
+  /**
+   * Attempt to swap the positions of two nodes if they meet swapping criteria.
+   * Nodes can swap if they are the same size or in the same column/row, not locked, and touching.
+   *
+   * @param a first node to swap
+   * @param b second node to swap
+   * @returns true if swap was successful, false if not possible, undefined if not applicable
+   *
+   * @example
+   * const swapped = engine.swap(nodeA, nodeB);
+   * if (swapped) {
+   *   console.log('Nodes swapped successfully');
+   * }
+   */
+  swap(t, e) {
+    if (!e || e.locked || !t || t.locked)
+      return !1;
+    function i() {
+      const r = e.x, n = e.y;
+      return e.x = t.x, e.y = t.y, t.h != e.h ? (t.x = r, t.y = e.y + e.h) : t.w != e.w ? (t.x = e.x + e.w, t.y = n) : (t.x = r, t.y = n), t._dirty = e._dirty = !0, !0;
+    }
+    let s;
+    if (t.w === e.w && t.h === e.h && (t.x === e.x || t.y === e.y) && (s = h.isTouching(t, e)))
+      return i();
+    if (s !== !1) {
+      if (t.w === e.w && t.x === e.x && (s || (s = h.isTouching(t, e)))) {
+        if (e.y < t.y) {
+          const r = t;
+          t = e, e = r;
+        }
+        return i();
+      }
+      if (s !== !1) {
+        if (t.h === e.h && t.y === e.y && (s || (s = h.isTouching(t, e)))) {
+          if (e.x < t.x) {
+            const r = t;
+            t = e, e = r;
+          }
+          return i();
+        }
+        return !1;
+      }
+    }
+  }
+  /**
+   * Check if the specified rectangular area is empty (no nodes occupy any part of it).
+   *
+   * @param x the x coordinate (column) of the area to check
+   * @param y the y coordinate (row) of the area to check
+   * @param w the width in columns of the area to check
+   * @param h the height in rows of the area to check
+   * @returns true if the area is completely empty, false if any node overlaps
+   *
+   * @example
+   * if (engine.isAreaEmpty(2, 1, 3, 2)) {
+   *   console.log('Area is available for placement');
+   * }
+   */
+  isAreaEmpty(t, e, i, s) {
+    const r = { x: t || 0, y: e || 0, w: i || 1, h: s || 1 };
+    return !this.collide(r);
+  }
+  /**
+   * Re-layout grid items to reclaim any empty space.
+   * This optimizes the grid layout by moving items to fill gaps.
+   *
+   * @param layout layout algorithm to use:
+   *   - 'compact' (default): find truly empty spaces, may reorder items
+   *   - 'list': keep the sort order exactly the same, move items up sequentially
+   * @param doSort if true (default), sort nodes by position before compacting
+   * @returns the engine instance for chaining
+   *
+   * @example
+   * // Compact to fill empty spaces
+   * engine.compact();
+   *
+   * // Compact preserving item order
+   * engine.compact('list');
+   */
+  compact(t = "compact", e = !0) {
+    if (this.nodes.length === 0)
+      return this;
+    e && this.sortNodes();
+    const i = this.batchMode;
+    i || this.batchUpdate();
+    const s = this._inColumnResize;
+    s || (this._inColumnResize = !0);
+    const r = this.nodes;
+    return this.nodes = [], r.forEach((n, o, d) => {
+      let l;
+      n.locked || (n.autoPosition = !0, t === "list" && o && (l = d[o - 1])), this.addNode(n, !1, l);
+    }), s || delete this._inColumnResize, i || this.batchUpdate(!1), this;
+  }
+  /**
+   * Enable/disable floating widgets (default: `false`).
+   * When floating is enabled, widgets can move up to fill empty spaces.
+   * See [example](http://gridstackjs.com/demo/float.html)
+   *
+   * @param val true to enable floating, false to disable
+   *
+   * @example
+   * engine.float = true;  // Enable floating
+   * engine.float = false; // Disable floating (default)
+   */
+  set float(t) {
+    this._float !== t && (this._float = t || !1, t || this._packNodes()._notify());
+  }
+  /**
+   * Get the current floating mode setting.
+   *
+   * @returns true if floating is enabled, false otherwise
+   *
+   * @example
+   * const isFloating = engine.float;
+   * console.log('Floating enabled:', isFloating);
+   */
+  get float() {
+    return this._float || !1;
+  }
+  /**
+   * Sort the nodes array from first to last, or reverse.
+   * This is called during collision/placement operations to enforce a specific order.
+   *
+   * @param dir sort direction: 1 for ascending (first to last), -1 for descending (last to first)
+   * @returns the engine instance for chaining
+   *
+   * @example
+   * engine.sortNodes();    // Sort ascending (default)
+   * engine.sortNodes(-1);  // Sort descending
+   */
+  sortNodes(t = 1) {
+    return this.nodes = h.sort(this.nodes, t), this;
+  }
+  /** @internal called to top gravity pack the items back OR revert back to original Y positions when floating */
+  _packNodes() {
+    return this.batchMode ? this : (this.sortNodes(), this.float ? this.nodes.forEach((t) => {
+      if (t._updating || t._orig === void 0 || t.y === t._orig.y)
+        return;
+      let e = t.y;
+      for (; e > t._orig.y; )
+        --e, this.collide(t, { x: t.x, y: e, w: t.w, h: t.h }) || (t._dirty = !0, t.y = e);
+    }) : this.nodes.forEach((t, e) => {
+      if (!t.locked)
+        for (; t.y > 0; ) {
+          const i = e === 0 ? 0 : t.y - 1;
+          if (!(e === 0 || !this.collide(t, { x: t.x, y: i, w: t.w, h: t.h })))
+            break;
+          t._dirty = t.y !== i, t.y = i;
+        }
+    }), this);
+  }
+  /**
+   * Prepare and validate a node's coordinates and values for the current grid.
+   * This ensures the node has valid position, size, and properties before being added to the grid.
+   *
+   * @param node the node to prepare and validate
+   * @param resizing if true, resize the node down if it's out of bounds; if false, move it to fit
+   * @returns the prepared node with valid coordinates
+   *
+   * @example
+   * const node = { w: 3, h: 2, content: 'Hello' };
+   * const prepared = engine.prepareNode(node);
+   * console.log('Node prepared at:', prepared.x, prepared.y);
+   */
+  prepareNode(t, e) {
+    t._id = t._id ?? x._idSeq++;
+    const i = t.id;
+    if (i) {
+      let r = 1;
+      for (; this.nodes.find((n) => n.id === t.id && n !== t); )
+        t.id = i + "_" + r++;
+    }
+    (t.x === void 0 || t.y === void 0 || t.x === null || t.y === null) && (t.autoPosition = !0);
+    const s = { x: 0, y: 0, w: 1, h: 1 };
+    return h.defaults(t, s), t.autoPosition || delete t.autoPosition, t.noResize || delete t.noResize, t.noMove || delete t.noMove, h.sanitizeMinMax(t), typeof t.x == "string" && (t.x = Number(t.x)), typeof t.y == "string" && (t.y = Number(t.y)), typeof t.w == "string" && (t.w = Number(t.w)), typeof t.h == "string" && (t.h = Number(t.h)), isNaN(t.x) && (t.x = s.x, t.autoPosition = !0), isNaN(t.y) && (t.y = s.y, t.autoPosition = !0), isNaN(t.w) && (t.w = s.w), isNaN(t.h) && (t.h = s.h), this.nodeBoundFix(t, e), t;
+  }
+  /**
+   * Part 2 of preparing a node to fit inside the grid - validates and fixes coordinates and dimensions.
+   * This ensures the node fits within grid boundaries and respects min/max constraints.
+   *
+   * @param node the node to validate and fix
+   * @param resizing if true, resize the node to fit; if false, move the node to fit
+   * @returns the engine instance for chaining
+   *
+   * @example
+   * // Fix a node that might be out of bounds
+   * engine.nodeBoundFix(node, true); // Resize to fit
+   * engine.nodeBoundFix(node, false); // Move to fit
+   */
+  nodeBoundFix(t, e) {
+    const i = t._orig || h.copyPos({}, t);
+    if (t.maxW && (t.w = Math.min(t.w || 1, t.maxW)), t.maxH && (t.h = Math.min(t.h || 1, t.maxH)), t.minW && (t.w = Math.max(t.w || 1, t.minW)), t.minH && (t.h = Math.max(t.h || 1, t.minH)), (t.x || 0) + (t.w || 1) > this.column && this.column < this.defaultColumn && !this._inColumnResize && !this.skipCacheUpdate && t._id != null && this.findCacheLayout(t, this.defaultColumn) === -1) {
+      const r = { ...t };
+      r.autoPosition || r.x === void 0 ? (delete r.x, delete r.y) : r.x = Math.min(this.defaultColumn - 1, r.x), r.w = Math.min(this.defaultColumn, r.w || 1), this.cacheOneLayout(r, this.defaultColumn);
+    }
+    return t.w > this.column ? t.w = this.column : t.w < 1 && (t.w = 1), this.maxRow && t.h > this.maxRow ? t.h = this.maxRow : t.h < 1 && (t.h = 1), t.x < 0 && (t.x = 0), t.y < 0 && (t.y = 0), t.x + t.w > this.column && (e ? t.w = this.column - t.x : t.x = this.column - t.w), this.maxRow && t.y + t.h > this.maxRow && (e ? t.h = this.maxRow - t.y : t.y = this.maxRow - t.h), h.samePos(t, i) || (t._dirty = !0), this;
+  }
+  /**
+   * Returns a list of nodes that have been modified from their original values.
+   * This is used to track which nodes need DOM updates.
+   *
+   * @param verify if true, performs additional verification by comparing current vs original positions
+   * @returns array of nodes that have been modified
+   *
+   * @example
+   * const changed = engine.getDirtyNodes();
+   * console.log('Modified nodes:', changed.length);
+   *
+   * // Get verified dirty nodes
+   * const verified = engine.getDirtyNodes(true);
+   */
+  getDirtyNodes(t) {
+    return t ? this.nodes.filter((e) => e._dirty && !h.samePos(e, e._orig)) : this.nodes.filter((e) => e._dirty);
+  }
+  /** @internal call this to call onChange callback with dirty nodes so DOM can be updated */
+  _notify(t) {
+    if (this.batchMode || !this.onChange)
+      return this;
+    const e = (t || []).concat(this.getDirtyNodes());
+    return this.onChange(e), this;
+  }
+  /**
+   * Clean all dirty and last tried information from nodes.
+   * This resets the dirty state tracking for all nodes.
+   *
+   * @returns the engine instance for chaining
+   *
+   * @internal
+   */
+  cleanNodes() {
+    return this.batchMode ? this : (this.nodes.forEach((t) => {
+      delete t._dirty, delete t._lastTried;
+    }), this);
+  }
+  /**
+   * Save the initial position/size of all nodes to track real dirty state.
+   * This creates a snapshot of current positions that can be restored later.
+   *
+   * Note: Should be called right after change events and before move/resize operations.
+   *
+   * @returns the engine instance for chaining
+   *
+   * @internal
+   */
+  saveInitial() {
+    return this.nodes.forEach((t) => {
+      t._orig = h.copyPos({}, t), delete t._dirty;
+    }), this._hasLocked = this.nodes.some((t) => t.locked), this;
+  }
+  /**
+   * Restore all nodes back to their initial values.
+   * This is typically called when canceling an operation (e.g., Esc key during drag).
+   *
+   * @returns the engine instance for chaining
+   *
+   * @internal
+   */
+  restoreInitial() {
+    return this.nodes.forEach((t) => {
+      !t._orig || h.samePos(t, t._orig) || (h.copyPos(t, t._orig), t._dirty = !0);
+    }), this._notify(), this;
+  }
+  /**
+   * Find the first available empty spot for the given node dimensions.
+   * Updates the node's x,y attributes with the found position.
+   *
+   * @param node the node to find a position for (w,h must be set)
+   * @param nodeList optional list of nodes to check against (defaults to engine nodes)
+   * @param column optional column count (defaults to engine column count)
+   * @param after optional node to start search after (maintains order)
+   * @returns true if an empty position was found and node was updated
+   *
+   * @example
+   * const node = { w: 2, h: 1 };
+   * if (engine.findEmptyPosition(node)) {
+   *   console.log('Found position at:', node.x, node.y);
+   * }
+   */
+  findEmptyPosition(t, e = this.nodes, i = this.column, s) {
+    const r = s ? s.y * i + (s.x + s.w) : 0;
+    let n = !1;
+    for (let o = r; !n; ++o) {
+      const d = o % i, l = Math.floor(o / i);
+      if (d + t.w > i)
+        continue;
+      const a = { x: d, y: l, w: t.w, h: t.h };
+      e.find((u) => h.isIntercepted(a, u)) || ((t.x !== d || t.y !== l) && (t._dirty = !0), t.x = d, t.y = l, delete t.autoPosition, n = !0);
+    }
+    return n;
+  }
+  /**
+   * Add the given node to the grid, handling collision detection and re-packing.
+   * This is the main method for adding new widgets to the engine.
+   *
+   * @param node the node to add to the grid
+   * @param triggerAddEvent if true, adds node to addedNodes list for event triggering
+   * @param after optional node to place this node after (for ordering)
+   * @returns the added node (or existing node if duplicate)
+   *
+   * @example
+   * const node = { x: 0, y: 0, w: 2, h: 1, content: 'Hello' };
+   * const added = engine.addNode(node, true);
+   */
+  addNode(t, e = !1, i) {
+    const s = this.nodes.find((n) => n._id === t._id);
+    if (s)
+      return s;
+    this._inColumnResize ? this.nodeBoundFix(t) : this.prepareNode(t), delete t._temporaryRemoved, delete t._removeDOM;
+    let r;
+    return t.autoPosition && this.findEmptyPosition(t, this.nodes, this.column, i) && (delete t.autoPosition, r = !0), this.nodes.push(t), e && this.addedNodes.push(t), r || this._fixCollisions(t), this.batchMode || this._packNodes()._notify(), t;
+  }
+  /**
+   * Remove the given node from the grid.
+   *
+   * @param node the node to remove
+   * @param removeDOM if true (default), marks node for DOM removal
+   * @param triggerEvent if true, adds node to removedNodes list for event triggering
+   * @returns the engine instance for chaining
+   *
+   * @example
+   * engine.removeNode(node, true, true);
+   */
+  removeNode(t, e = !0, i = !1) {
+    return this.nodes.find((s) => s._id === t._id) ? (i && this.removedNodes.push(t), e && (t._removeDOM = !0), this.nodes = this.nodes.filter((s) => s._id !== t._id), t._isAboutToRemove || this._packNodes(), this._notify([t]), this) : this;
+  }
+  /**
+   * Remove all nodes from the grid.
+   *
+   * @param removeDOM if true (default), marks all nodes for DOM removal
+   * @param triggerEvent if true (default), triggers removal events
+   * @returns the engine instance for chaining
+   *
+   * @example
+   * engine.removeAll(); // Remove all nodes
+   */
+  removeAll(t = !0, e = !0) {
+    if (delete this._layouts, !this.nodes.length)
+      return this;
+    t && this.nodes.forEach((s) => s._removeDOM = !0);
+    const i = this.nodes;
+    return this.removedNodes = e ? i : [], this.nodes = [], this._notify(i);
+  }
+  /**
+   * Check if a node can be moved to a new position, considering layout constraints.
+   * This is a safer version of moveNode() that validates the move first.
+   *
+   * For complex cases (like maxRow constraints), it simulates the move in a clone first,
+   * then applies the changes only if they meet all specifications.
+   *
+   * @param node the node to move
+   * @param o move options including target position
+   * @returns true if the node was successfully moved
+   *
+   * @example
+   * const canMove = engine.moveNodeCheck(node, { x: 2, y: 1 });
+   * if (canMove) {
+   *   console.log('Node moved successfully');
+   * }
+   */
+  moveNodeCheck(t, e) {
+    if (!this.changedPosConstrain(t, e))
+      return !1;
+    if (e.pack = !0, !this.maxRow)
+      return this.moveNode(t, e);
+    let i;
+    const s = new x({
+      column: this.column,
+      float: this.float,
+      nodes: this.nodes.map((n) => n._id === t._id ? (i = { ...n }, i) : { ...n })
+    });
+    if (!i)
+      return !1;
+    const r = s.moveNode(i, e) && s.getRow() <= Math.max(this.getRow(), this.maxRow);
+    if (!r && !e.resizing && e.collide) {
+      const n = e.collide.el.gridstackNode;
+      if (this.swap(t, n))
+        return this._notify(), !0;
+    }
+    return r ? (s.nodes.filter((n) => n._dirty).forEach((n) => {
+      const o = this.nodes.find((d) => d._id === n._id);
+      o && (h.copyPos(o, n), o._dirty = !0);
+    }), this._notify(), !0) : !1;
+  }
+  /** return true if can fit in grid height constrain only (always true if no maxRow) */
+  willItFit(t) {
+    if (delete t._willFitPos, !this.maxRow)
+      return !0;
+    const e = new x({
+      column: this.column,
+      float: this.float,
+      nodes: this.nodes.map((s) => ({ ...s }))
+    }), i = { ...t };
+    return this.cleanupNode(i), delete i.el, delete i._id, delete i.content, delete i.grid, e.addNode(i), e.getRow() <= this.maxRow ? (t._willFitPos = h.copyPos({}, i), !0) : !1;
+  }
+  /** true if x,y or w,h are different after clamping to min/max */
+  changedPosConstrain(t, e) {
+    return e.w = e.w || t.w, e.h = e.h || t.h, t.x !== e.x || t.y !== e.y ? !0 : (t.maxW && (e.w = Math.min(e.w, t.maxW)), t.maxH && (e.h = Math.min(e.h, t.maxH)), t.minW && (e.w = Math.max(e.w, t.minW)), t.minH && (e.h = Math.max(e.h, t.minH)), t.w !== e.w || t.h !== e.h);
+  }
+  /** return true if the passed in node was actually moved (checks for no-op and locked) */
+  moveNode(t, e) {
+    if (!t || /*node.locked ||*/
+    !e)
+      return !1;
+    let i;
+    e.pack === void 0 && !this.batchMode && (i = e.pack = !0), typeof e.x != "number" && (e.x = t.x), typeof e.y != "number" && (e.y = t.y), typeof e.w != "number" && (e.w = t.w), typeof e.h != "number" && (e.h = t.h);
+    const s = t.w !== e.w || t.h !== e.h, r = h.copyPos({}, t, !0);
+    if (h.copyPos(r, e), this.nodeBoundFix(r, s), h.copyPos(e, r), !e.forceCollide && h.samePos(t, e))
+      return !1;
+    const n = h.copyPos({}, t), o = this.collideAll(t, r, e.skip);
+    let d = !0;
+    if (o.length) {
+      const l = t._moving && !e.nested;
+      let a = l ? this.directionCollideCoverage(t, e, o) : o[0];
+      if (l && a && t.grid?.opts?.subGridDynamic && !t.grid._isTemp) {
+        const u = h.areaIntercept(e.rect, a._rect), c = h.area(e.rect), p = h.area(a._rect);
+        u / (c < p ? c : p) > 0.8 && (a.grid.makeSubGrid(a.el, void 0, t), a = void 0);
+      }
+      a ? d = !this._fixCollisions(t, r, a, e) : (d = !1, i && delete e.pack);
+    }
+    return d && !h.samePos(t, r) && (t._dirty = !0, h.copyPos(t, r)), e.pack && this._packNodes()._notify(), !h.samePos(t, n);
+  }
+  getRow() {
+    return this.nodes.reduce((t, e) => Math.max(t, e.y + e.h), 0);
+  }
+  beginUpdate(t) {
+    return t._updating || (t._updating = !0, delete t._skipDown, this.batchMode || this.saveInitial()), this;
+  }
+  endUpdate() {
+    const t = this.nodes.find((e) => e._updating);
+    return t && (delete t._updating, delete t._skipDown), this;
+  }
+  /** saves a copy of the largest column layout (eg 12 even when rendering 1 column) so we don't loose orig layout, unless explicity column
+   * count to use is given. returning a list of widgets for serialization
+   * @param saveElement if true (default), the element will be saved to GridStackWidget.el field, else it will be removed.
+   * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
+   * @param column if provided, the grid will be saved for the given column count (IFF we have matching internal saved layout, or current layout).
+   * Note: nested grids will ALWAYS save the container w to match overall layouts (parent + child) to be consistent.
+  */
+  save(t = !0, e, i) {
+    const s = this._layouts?.length || 0;
+    let r;
+    s && (i ? i !== this.column && (r = this._layouts[i]) : this.column !== s - 1 && (r = this._layouts[s - 1]));
+    const n = [];
+    return this.sortNodes(), this.nodes.forEach((o) => {
+      const d = r?.find((a) => a._id === o._id), l = { ...o, ...d || {} };
+      h.removeInternalForSave(l, !t), e && e(o, l), n.push(l);
+    }), n;
+  }
+  /** @internal called whenever a node is added or moved - updates the cached layouts */
+  layoutsNodesChange(t) {
+    return !this._layouts || this._inColumnResize ? this : (this._layouts.forEach((e, i) => {
+      if (!e || i === this.column)
+        return this;
+      if (i < this.column)
+        this._layouts[i] = void 0;
+      else {
+        const s = i / this.column;
+        t.forEach((r) => {
+          if (!r._orig)
+            return;
+          const n = e.find((o) => o._id === r._id);
+          n && (n.y >= 0 && r.y !== r._orig.y && (n.y += r.y - r._orig.y, n.y < 0 && (n.y = 0)), r.x !== r._orig.x && (n.x = Math.round(r.x * s), n.x < 0 && (n.x = 0)), r.w !== r._orig.w && (n.w = Math.round(r.w * s), n.w < 1 && (n.w = 1)));
+        });
+      }
+    }), this);
+  }
+  /**
+   * @internal Called to scale the widget width & position up/down based on the column change.
+   * Note we store previous layouts (especially original ones) to make it possible to go
+   * from say 12 -> 1 -> 12 and get back to where we were.
+   *
+   * @param prevColumn previous number of columns
+   * @param column  new column number
+   * @param layout specify the type of re-layout that will happen (position, size, etc...).
+   * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
+   */
+  columnChanged(t, e, i = "moveScale") {
+    if (!this.nodes.length || !e || t === e)
+      return this;
+    const s = i === "compact" || i === "list";
+    s && this.sortNodes(1), e < t && this.cacheLayout(this.nodes, t), this.batchUpdate();
+    let r = [], n = s ? this.nodes : h.sort(this.nodes, -1);
+    if (e > t && this._layouts) {
+      const o = this._layouts[e] || [], d = this._layouts.length - 1;
+      !o.length && t !== d && this._layouts[d]?.length && (t = d, this._layouts[d].forEach((l) => {
+        const a = n.find((u) => u._id === l._id);
+        a && (!s && !l.autoPosition && (a.x = l.x ?? a.x, a.y = l.y ?? a.y), a.w = l.w ?? a.w, (l.x == null || l.y === void 0) && (a.autoPosition = !0));
+      })), o.forEach((l) => {
+        const a = n.findIndex((u) => u._id === l._id);
+        if (a !== -1) {
+          const u = n[a];
+          if (s) {
+            u.w = l.w;
+            return;
+          }
+          (l.autoPosition || isNaN(l.x) || isNaN(l.y)) && this.findEmptyPosition(l, r), l.autoPosition || (u.x = l.x ?? u.x, u.y = l.y ?? u.y, u.w = l.w ?? u.w, r.push(u)), n.splice(a, 1);
+        }
+      });
+    }
+    if (s)
+      this.compact(i, !1);
+    else {
+      if (n.length)
+        if (typeof i == "function")
+          i(e, t, r, n);
+        else {
+          const o = s || i === "none" ? 1 : e / t, d = i === "move" || i === "moveScale", l = i === "scale" || i === "moveScale";
+          n.forEach((a) => {
+            a.x = e === 1 ? 0 : d ? Math.round(a.x * o) : Math.min(a.x, e - 1), a.w = e === 1 || t === 1 ? 1 : l ? Math.round(a.w * o) || 1 : Math.min(a.w, e), r.push(a);
+          }), n = [];
+        }
+      r = h.sort(r, -1), this._inColumnResize = !0, this.nodes = [], r.forEach((o) => {
+        this.addNode(o, !1), delete o._orig;
+      });
+    }
+    return this.nodes.forEach((o) => delete o._orig), this.batchUpdate(!1, !s), delete this._inColumnResize, this;
+  }
+  /**
+   * call to cache the given layout internally to the given location so we can restore back when column changes size
+   * @param nodes list of nodes
+   * @param column corresponding column index to save it under
+   * @param clear if true, will force other caches to be removed (default false)
+   */
+  cacheLayout(t, e, i = !1) {
+    const s = [];
+    return t.forEach((r, n) => {
+      if (r._id === void 0) {
+        const o = r.id ? this.nodes.find((d) => d.id === r.id) : void 0;
+        r._id = o?._id ?? x._idSeq++;
+      }
+      s[n] = { x: r.x, y: r.y, w: r.w, _id: r._id };
+    }), this._layouts = i ? [] : this._layouts || [], this._layouts[e] = s, this;
+  }
+  /**
+   * call to cache the given node layout internally to the given location so we can restore back when column changes size
+   * @param node single node to cache
+   * @param column corresponding column index to save it under
+   */
+  cacheOneLayout(t, e) {
+    t._id = t._id ?? x._idSeq++;
+    const i = { x: t.x, y: t.y, w: t.w, _id: t._id };
+    (t.autoPosition || t.x === void 0) && (delete i.x, delete i.y, t.autoPosition && (i.autoPosition = !0)), this._layouts = this._layouts || [], this._layouts[e] = this._layouts[e] || [];
+    const s = this.findCacheLayout(t, e);
+    return s === -1 ? this._layouts[e].push(i) : this._layouts[e][s] = i, this;
+  }
+  findCacheLayout(t, e) {
+    return this._layouts?.[e]?.findIndex((i) => i._id === t._id) ?? -1;
+  }
+  removeNodeFromLayoutCache(t) {
+    if (this._layouts)
+      for (let e = 0; e < this._layouts.length; e++) {
+        const i = this.findCacheLayout(t, e);
+        i !== -1 && this._layouts[e].splice(i, 1);
+      }
+  }
+  /** called to remove all internal values but the _id */
+  cleanupNode(t) {
+    for (const e in t)
+      e[0] === "_" && e !== "_id" && delete t[e];
+    return this;
+  }
+}
+x._idSeq = 0;
+const v = {
+  alwaysShowResizeHandle: "mobile",
+  animate: !0,
+  auto: !0,
+  cellHeight: "auto",
+  cellHeightThrottle: 100,
+  cellHeightUnit: "px",
+  column: 12,
+  draggable: { handle: ".grid-stack-item-content", appendTo: "body", scroll: !0 },
+  handle: ".grid-stack-item-content",
+  itemClass: "grid-stack-item",
+  margin: 10,
+  marginUnit: "px",
+  maxRow: 0,
+  minRow: 0,
+  placeholderClass: "grid-stack-placeholder",
+  placeholderText: "",
+  removableOptions: { accept: "grid-stack-item", decline: "grid-stack-non-removable" },
+  resizable: { handles: "se" },
+  rtl: "auto"
+  // **** same as not being set ****
+  // disableDrag: false,
+  // disableResize: false,
+  // float: false,
+  // handleClass: null,
+  // removable: false,
+  // staticGrid: false,
+  //removable
+};
+class f {
+}
+const b = typeof window < "u" && typeof document < "u" && ("ontouchstart" in document || "ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
+class w {
+}
+function D(m, t) {
+  m.touches.length > 1 || (m.cancelable && m.preventDefault(), h.simulateMouseEvent(m.changedTouches[0], t));
+}
+function W(m, t) {
+  m.cancelable && m.preventDefault(), h.simulateMouseEvent(m, t);
+}
+function H(m) {
+  w.touchHandled || (w.touchHandled = !0, D(m, "mousedown"));
+}
+function N(m) {
+  w.touchHandled && D(m, "mousemove");
+}
+function T(m) {
+  if (!w.touchHandled)
+    return;
+  w.pointerLeaveTimeout && (window.clearTimeout(w.pointerLeaveTimeout), delete w.pointerLeaveTimeout);
+  const t = !!f.dragElement;
+  D(m, "mouseup"), t || D(m, "click"), w.touchHandled = !1;
+}
+function k(m) {
+  m.pointerType !== "mouse" && m.target.releasePointerCapture(m.pointerId);
+}
+function P(m) {
+  f.dragElement && m.pointerType !== "mouse" && W(m, "mouseenter");
+}
+function B(m) {
+  f.dragElement && m.pointerType !== "mouse" && (w.pointerLeaveTimeout = window.setTimeout(() => {
+    delete w.pointerLeaveTimeout, W(m, "mouseleave");
+  }, 10));
+}
+class M {
+  constructor(t, e, i) {
+    this.host = t, this.dir = e, this.option = i, this.moving = !1, this._mouseDown = this._mouseDown.bind(this), this._mouseMove = this._mouseMove.bind(this), this._mouseUp = this._mouseUp.bind(this), this._keyEvent = this._keyEvent.bind(this), this._init();
+  }
+  /** @internal */
+  _init() {
+    if (this.option.element)
+      try {
+        this.el = this.option.element instanceof HTMLElement ? this.option.element : this.host.querySelector(this.option.element);
+      } catch (t) {
+        this.option.element = void 0, console.error("Query for resizeable handle failed, falling back", t);
+      }
+    return this.el || (this.el = document.createElement("div"), this.host.appendChild(this.el)), this.el.classList.add("ui-resizable-handle"), this.el.classList.add(`${M.prefix}${this.dir}`), this.el.style.zIndex = "100", this.el.style.userSelect = "none", this.el.addEventListener("mousedown", this._mouseDown), b && (this.el.addEventListener("touchstart", H), this.el.addEventListener("pointerdown", k)), this;
+  }
+  /** call this when resize handle needs to be removed and cleaned up */
+  destroy() {
+    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), b && (this.el.removeEventListener("touchstart", H), this.el.removeEventListener("pointerdown", k)), this.option.element || this.host.removeChild(this.el), delete this.el, delete this.host, this;
+  }
+  /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
+  _mouseDown(t) {
+    this.mouseDownEvent = t, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), b && (this.el.addEventListener("touchmove", N), this.el.addEventListener("touchend", T)), t.stopPropagation(), t.preventDefault();
+  }
+  /** @internal */
+  _mouseMove(t) {
+    const e = this.mouseDownEvent;
+    this.moving ? this._triggerEvent("move", t) : Math.abs(t.x - e.x) + Math.abs(t.y - e.y) > 2 && (this.moving = !0, this._triggerEvent("start", this.mouseDownEvent), this._triggerEvent("move", t), document.addEventListener("keydown", this._keyEvent)), t.stopPropagation();
+  }
+  /** @internal */
+  _mouseUp(t) {
+    this.moving && (this._triggerEvent("stop", t), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), b && (this.el.removeEventListener("touchmove", N), this.el.removeEventListener("touchend", T)), delete this.moving, delete this.mouseDownEvent, t.stopPropagation(), t.preventDefault();
+  }
+  /** @internal call when keys are being pressed - use Esc to cancel */
+  _keyEvent(t) {
+    t.key === "Escape" && (this.host.gridstackNode?.grid?.engine.restoreInitial(), this._mouseUp(this.mouseDownEvent));
+  }
+  /** @internal */
+  _triggerEvent(t, e) {
+    return this.option[t] && this.option[t](e), this;
+  }
+}
+M.prefix = "ui-resizable-";
+class S {
+  constructor() {
+    this._eventRegister = {};
+  }
+  /**
+   * Returns the current disabled state.
+   * Note: Use enable()/disable() methods to change state as other operations need to happen.
+   */
+  get disabled() {
+    return this._disabled;
+  }
+  /**
+   * Register an event callback for the specified event.
+   *
+   * @param event - Event name to listen for
+   * @param callback - Function to call when event occurs
+   */
+  on(t, e) {
+    this._eventRegister[t] = e;
+  }
+  /**
+   * Unregister an event callback for the specified event.
+   *
+   * @param event - Event name to stop listening for
+   */
+  off(t) {
+    delete this._eventRegister[t];
+  }
+  /**
+   * Enable this drag & drop implementation.
+   * Subclasses should override to perform additional setup.
+   */
+  enable() {
+    this._disabled = !1;
+  }
+  /**
+   * Disable this drag & drop implementation.
+   * Subclasses should override to perform additional cleanup.
+   */
+  disable() {
+    this._disabled = !0;
+  }
+  /**
+   * Destroy this drag & drop implementation and clean up resources.
+   * Removes all event handlers and clears internal state.
+   */
+  destroy() {
+    delete this._eventRegister;
+  }
+  /**
+   * Trigger a registered event callback if one exists and the implementation is enabled.
+   *
+   * @param eventName - Name of the event to trigger
+   * @param event - DOM event object to pass to the callback
+   * @returns Result from the callback function, if any
+   */
+  triggerEvent(t, e) {
+    if (!this.disabled && this._eventRegister && this._eventRegister[t])
+      return this._eventRegister[t](e);
+  }
+}
+class R extends S {
+  // have to be public else complains for HTMLElementExtendOpt ?
+  constructor(t, e = {}) {
+    super(), this.el = t, this.option = e, this.rectScale = { x: 1, y: 1 }, this._ui = () => {
+      const s = this.el.parentElement.getBoundingClientRect(), r = {
+        width: this.originalRect.width,
+        height: this.originalRect.height + this.scrolled,
+        left: this.originalRect.left,
+        right: this.originalRect.right,
+        top: this.originalRect.top - this.scrolled
+      }, n = this.temporalRect || r;
+      return {
+        position: {
+          left: this.option.rtl ? (s.right - n.right) * this.rectScale.x : (n.left - s.left) * this.rectScale.x,
+          top: (n.top - s.top) * this.rectScale.y
+        },
+        size: {
+          width: n.width * this.rectScale.x,
+          height: n.height * this.rectScale.y
+        }
+        /* Gridstack ONLY needs position set above... keep around in case.
+        element: [this.el], // The object representing the element to be resized
+        helper: [], // TODO: not support yet - The object representing the helper that's being resized
+        originalElement: [this.el],// we don't wrap here, so simplify as this.el //The object representing the original element before it is wrapped
+        originalPosition: { // The position represented as { left, top } before the resizable is resized
+          left: this.originalRect.left - containmentRect.left,
+          top: this.originalRect.top - containmentRect.top
+        },
+        originalSize: { // The size represented as { width, height } before the resizable is resized
+          width: this.originalRect.width,
+          height: this.originalRect.height
+        }
+        */
+      };
+    }, this._mouseOver = this._mouseOver.bind(this), this._mouseOut = this._mouseOut.bind(this), this.enable(), this._setupAutoHide(this.option.autoHide), this._setupHandlers();
+  }
+  on(t, e) {
+    super.on(t, e);
+  }
+  off(t) {
+    super.off(t);
+  }
+  enable() {
+    super.enable(), this.el.classList.remove("ui-resizable-disabled"), this._setupAutoHide(this.option.autoHide);
+  }
+  disable() {
+    super.disable(), this.el.classList.add("ui-resizable-disabled"), this._setupAutoHide(!1);
+  }
+  destroy() {
+    this._removeHandlers(), this._setupAutoHide(!1), delete this.el, super.destroy();
+  }
+  updateOption(t) {
+    const e = t.handles && t.handles !== this.option.handles, i = t.autoHide && t.autoHide !== this.option.autoHide;
+    return Object.keys(t).forEach((s) => this.option[s] = t[s]), e && (this._removeHandlers(), this._setupHandlers()), i && this._setupAutoHide(this.option.autoHide), this;
+  }
+  /** @internal turns auto hide on/off */
+  _setupAutoHide(t) {
+    return t ? (this.el.classList.add("ui-resizable-autohide"), this.el.addEventListener("mouseover", this._mouseOver), this.el.addEventListener("mouseout", this._mouseOut)) : (this.el.classList.remove("ui-resizable-autohide"), this.el.removeEventListener("mouseover", this._mouseOver), this.el.removeEventListener("mouseout", this._mouseOut), f.overResizeElement === this && delete f.overResizeElement), this;
+  }
+  /** @internal */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _mouseOver(t) {
+    f.overResizeElement || f.dragElement || (f.overResizeElement = this, this.el.classList.remove("ui-resizable-autohide"));
+  }
+  /** @internal */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _mouseOut(t) {
+    f.overResizeElement === this && (delete f.overResizeElement, this.el.classList.add("ui-resizable-autohide"));
+  }
+  /** @internal */
+  _setupHandlers() {
+    return this.handlers = this.option.handles.split(",").map((t) => t.trim()).map((t) => new M(this.el, t, {
+      element: this.option.element,
+      start: (e) => this._resizeStart(e),
+      stop: (e) => this._resizeStop(e),
+      move: (e) => this._resizing(e, t)
+    })), this;
+  }
+  /** @internal */
+  _resizeStart(t) {
+    this.sizeToContent = h.shouldSizeToContent(this.el.gridstackNode, !0), this.originalRect = this.el.getBoundingClientRect(), this.scrollEl = h.getScrollElement(this.el), this.scrollY = this.scrollEl.scrollTop, this.scrolled = 0, this.startEvent = t, this._setupHelper(), this._applyChange();
+    const e = h.initEvent(t, { type: "resizestart", target: this.el });
+    return this.option.start && this.option.start(e, this._ui()), this.el.classList.add("ui-resizable-resizing"), this.triggerEvent("resizestart", e), this;
+  }
+  /** @internal */
+  _resizing(t, e) {
+    this.scrolled = this.scrollEl.scrollTop - this.scrollY, this.temporalRect = this._getChange(t, e), this._applyChange();
+    const i = h.initEvent(t, { type: "resize", target: this.el });
+    return i.resizeDir = e, i.hasMovedX = this.option.rtl ? e.includes("e") : e.includes("w"), i.hasMovedY = e.includes("n"), this.option.resize && this.option.resize(i, this._ui()), this.triggerEvent("resize", i), this;
+  }
+  /** @internal */
+  _resizeStop(t) {
+    const e = h.initEvent(t, { type: "resizestop", target: this.el });
+    return this._cleanHelper(), this.option.stop && this.option.stop(e), this.el.classList.remove("ui-resizable-resizing"), this.triggerEvent("resizestop", e), delete this.startEvent, delete this.originalRect, delete this.temporalRect, delete this.scrollY, delete this.scrolled, this;
+  }
+  /** @internal */
+  _setupHelper() {
+    this.elOriginStyleVal = R._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    const t = this.el.parentElement, e = h.getValuesFromTransformedElement(t);
+    return this.rectScale = {
+      x: e.xScale,
+      y: e.yScale
+    }, getComputedStyle(this.el.parentElement).position.match(/static/) && (this.el.parentElement.style.position = "relative"), this.el.style.position = "absolute", this.el.style.opacity = "0.8", this;
+  }
+  /** @internal */
+  _cleanHelper() {
+    return R._originStyleProp.forEach((t, e) => {
+      this.el.style[t] = this.elOriginStyleVal[e] || null;
+    }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
+  }
+  /** @internal */
+  _getChange(t, e) {
+    const i = this.startEvent, s = {
+      width: this.originalRect.width,
+      height: this.originalRect.height + this.scrolled,
+      left: this.originalRect.left,
+      right: this.originalRect.right,
+      top: this.originalRect.top - this.scrolled
+    }, r = t.clientX - i.clientX, n = this.sizeToContent ? 0 : t.clientY - i.clientY;
+    let o, d;
+    const l = this.option.rtl;
+    !l && e.indexOf("e") > -1 ? s.width += r : l && e.indexOf("w") > -1 ? s.width -= r : !l && e.indexOf("w") > -1 ? (s.width -= r, s.left += r, o = !0) : l && e.indexOf("e") > -1 && (s.width += r, s.right += r, o = !0), e.indexOf("s") > -1 ? s.height += n : e.indexOf("n") > -1 && (s.height -= n, s.top += n, d = !0);
+    const a = this._constrainSize(s.width, s.height, o, d);
+    return Math.round(s.width) !== Math.round(a.width) && (!l && e.indexOf("w") > -1 ? s.left += s.width - a.width : l && e.indexOf("e") > -1 && (s.right -= s.width - a.width), s.width = a.width), Math.round(s.height) !== Math.round(a.height) && (e.indexOf("n") > -1 && (s.top += s.height - a.height), s.height = a.height), s;
+  }
+  /** @internal constrain the size to the set min/max values */
+  _constrainSize(t, e, i, s) {
+    const r = this.option, n = (i ? r.maxWidthMoveLeft : r.maxWidth) || Number.MAX_SAFE_INTEGER, o = r.minWidth / this.rectScale.x || t, d = (s ? r.maxHeightMoveUp : r.maxHeight) || Number.MAX_SAFE_INTEGER, l = r.minHeight / this.rectScale.y || e, a = Math.min(n, Math.max(o, t)), u = Math.min(d, Math.max(l, e));
+    return { width: a, height: u };
+  }
+  /** @internal */
+  _applyChange() {
+    let t = { left: 0, right: 0, top: 0, width: 0, height: 0 };
+    if (this.el.style.position === "absolute") {
+      const e = this.el.parentElement, { left: i, right: s, top: r } = e.getBoundingClientRect();
+      t = { left: i, right: s, top: r, width: 0, height: 0 };
+    }
+    return this.temporalRect ? (Object.entries(this.temporalRect).forEach(([e, i]) => {
+      if (this.option.rtl ? e === "left" : e === "right")
+        return;
+      const s = e === "width" || e === "left" || e === "right" ? this.rectScale.x : e === "height" || e === "top" ? this.rectScale.y : 1;
+      let r;
+      e === "right" ? r = (t.right - i) * this.rectScale.x + "px" : r = (i - t[e]) * s + "px", this.el.style[e] = r;
+    }), this) : this;
+  }
+  /** @internal */
+  _removeHandlers() {
+    return this.handlers.forEach((t) => t.destroy()), delete this.handlers, this;
+  }
+}
+R._originStyleProp = ["width", "height", "position", "left", "right", "top", "opacity", "zIndex"];
+const U = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class z extends S {
+  constructor(t, e = {}) {
+    super(), this.el = t, this.option = e, this.dragTransform = {
+      xScale: 1,
+      yScale: 1,
+      xOffset: 0,
+      yOffset: 0
+    }, this._autoScrollTick = () => {
+      const r = this.helper, n = this._autoScrollContainer;
+      if (!r || !n) {
+        this._stopScrolling();
+        return;
+      }
+      const o = this._getClipping(r, n);
+      if (o === 0) {
+        this._stopScrolling();
+        return;
+      }
+      if (!this._autoScrollMaxSpeed) {
+        const c = window.innerHeight || document.documentElement.clientHeight;
+        this._autoScrollMaxSpeed = Math.max(c / 150, 4);
+      }
+      const d = Math.abs(o), l = Math.min(d * 0.5, this._autoScrollMaxSpeed), a = o > 0 ? l : -l, u = n.scrollTop;
+      if (n.scrollTop += a, n.scrollTop === u) {
+        this._stopScrolling();
+        return;
+      }
+      this.dragging && this.lastDrag && (this._dragFollow(this.lastDrag), this._callDrag(this.lastDrag)), this._autoScrollAnimId = requestAnimationFrame(this._autoScrollTick);
+    };
+    const i = e?.handle?.substring(1), s = t.gridstackNode;
+    this.dragEls = !i || t.classList.contains(i) ? [t] : s?.subGrid ? [t.querySelector(e.handle) || t] : this.getAllHandles(), this.dragEls.length === 0 && (this.dragEls = [t]), this._mouseDown = this._mouseDown.bind(this), this._mouseMove = this._mouseMove.bind(this), this._mouseUp = this._mouseUp.bind(this), this._keyEvent = this._keyEvent.bind(this), this.enable();
+  }
+  /** return all handles omitting other nested `.grid-stack-item` children (in case node.subGrid isn't set for some reason) */
+  getAllHandles() {
+    return Array.from(this.el.querySelectorAll(this.option.handle)).filter((t) => {
+      if (!(t instanceof HTMLElement))
+        return !1;
+      const e = t.closest(".grid-stack-item");
+      return e === this.el || !e;
+    });
+  }
+  on(t, e) {
+    super.on(t, e);
+  }
+  off(t) {
+    super.off(t);
+  }
+  enable() {
+    this.disabled !== !1 && (super.enable(), this.dragEls.forEach((t) => {
+      t.addEventListener("mousedown", this._mouseDown), b && (t.addEventListener("touchstart", H), t.addEventListener("pointerdown", k));
+    }), this.el.classList.remove("ui-draggable-disabled"));
+  }
+  disable(t = !1) {
+    this.disabled !== !0 && (super.disable(), this.dragEls.forEach((e) => {
+      e.removeEventListener("mousedown", this._mouseDown), b && (e.removeEventListener("touchstart", H), e.removeEventListener("pointerdown", k));
+    }), t || this.el.classList.add("ui-draggable-disabled"));
+  }
+  destroy() {
+    this.dragTimeout && window.clearTimeout(this.dragTimeout), delete this.dragTimeout, this.mouseDownEvent && this._mouseUp(this.mouseDownEvent), this.disable(!0), delete this.el, delete this.helper, delete this.option, super.destroy();
+  }
+  updateOption(t) {
+    return Object.keys(t).forEach((e) => this.option[e] = t[e]), this;
+  }
+  /** @internal call when mouse goes down before a dragstart happens */
+  _mouseDown(t) {
+    if (w.touchHandled && t.isTrusted && (w.touchHandled = !1), !f.mouseHandled)
+      return t.button !== 0 || !this.dragEls.find((e) => e === t.target) && t.target.closest(U) || this.option.cancel && t.target.closest(this.option.cancel) || (this.mouseDownEvent = t, delete this.dragging, delete f.dragElement, delete f.dropElement, delete this._autoScrollMaxSpeed, delete this._autoScrollContainer, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), b && (t.currentTarget.addEventListener("touchmove", N), t.currentTarget.addEventListener("touchend", T)), t.preventDefault(), document.activeElement && document.activeElement.blur(), f.mouseHandled = !0), !0;
+  }
+  /** @internal method to call actual drag event */
+  _callDrag(t) {
+    if (!this.dragging)
+      return;
+    const e = h.initEvent(t, { target: this.el, type: "drag" });
+    this.option.drag && this.option.drag(e, this.ui()), this.triggerEvent("drag", e);
+  }
+  /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
+  _mouseMove(t) {
+    const e = this.mouseDownEvent;
+    if (this.lastDrag = t, this.dragging)
+      if (this._dragFollow(t), f.pauseDrag) {
+        const i = Number.isInteger(f.pauseDrag) ? f.pauseDrag : 100;
+        this.dragTimeout && window.clearTimeout(this.dragTimeout), this.dragTimeout = window.setTimeout(() => this._callDrag(t), i);
+      } else
+        this._callDrag(t);
+    else if (Math.abs(t.x - e.x) + Math.abs(t.y - e.y) > 3) {
+      this.dragging = !0, f.dragElement = this;
+      const i = this.el.gridstackNode?.grid;
+      i ? f.dropElement = i.el.ddElement.ddDroppable : delete f.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = h.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(t, this.el, this.helperContainment), this._setupHelperStyle(t);
+      const s = h.initEvent(t, { target: this.el, type: "dragstart" });
+      this.option.start && this.option.start(s, this.ui()), this.triggerEvent("dragstart", s), document.addEventListener("keydown", this._keyEvent);
+    }
+    return !0;
+  }
+  /** @internal call when the mouse gets released to drop the item at current location */
+  _mouseUp(t) {
+    if (this._stopScrolling(), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), b && t.currentTarget && (t.currentTarget.removeEventListener("touchmove", N, !0), t.currentTarget.removeEventListener("touchend", T, !0)), this.dragging) {
+      delete this.dragging, delete this.el.gridstackNode?._origRotate, document.removeEventListener("keydown", this._keyEvent), f.dropElement?.el === this.el.parentElement && delete f.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
+      const e = h.initEvent(t, { target: this.el, type: "dragstop" });
+      this.option.stop && this.option.stop(e), this.triggerEvent("dragstop", e), f.dropElement && f.dropElement.drop(t);
+    }
+    delete this.helper, delete this.mouseDownEvent, delete f.dragElement, delete f.dropElement, delete f.mouseHandled, t.preventDefault();
+  }
+  /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
+  _keyEvent(t) {
+    const e = this.el.gridstackNode, i = e?.grid || f.dropElement?.el?.gridstack;
+    if (t.key === "Escape")
+      e && e._origRotate && (e._orig = e._origRotate, delete e._origRotate), i?.cancelDrag(), this._mouseUp(this.mouseDownEvent);
+    else if (e && i && (t.key === "r" || t.key === "R")) {
+      if (!h.canBeRotated(e))
+        return;
+      e._origRotate = e._origRotate || { ...e._orig }, delete e._moving, i.setAnimation(!1).rotate(e.el, {
+        top: -this.dragOffset.offsetTop,
+        left: -this.dragOffset.offsetX
+      }).setAnimation(), e._moving = !0, this.dragOffset = this._getDragOffset(this.lastDrag, e.el, this.helperContainment), this.helper.style.width = this.dragOffset.width + "px", this.helper.style.height = this.dragOffset.height + "px", h.swap(e._orig, "w", "h"), delete e._rect, this._mouseMove(this.lastDrag);
+    }
+  }
+  /** @internal create a clone copy (or user defined method) of the original drag item if set */
+  _createHelper() {
+    let t = this.el;
+    return typeof this.option.helper == "function" ? t = this.option.helper(this.el) : this.option.helper === "clone" && (t = h.cloneNode(this.el)), t.parentElement || h.appendTo(t, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = z.originStyleProp.map((e) => this.el.style[e]), t;
+  }
+  /** @internal set the fix position of the dragged item */
+  _setupHelperStyle(t) {
+    this.helper.classList.add("ui-draggable-dragging"), this.el.gridstackNode?.grid?.el.classList.add("grid-stack-dragging");
+    const e = this.helper.style;
+    return e.pointerEvents = "none", e.width = this.dragOffset.width + "px", e.height = this.dragOffset.height + "px", e.willChange = "left, right, top", e.position = "fixed", this._dragFollow(t), e.transition = "none", setTimeout(() => {
+      this.helper && (e.transition = null);
+    }, 0), this;
+  }
+  /** @internal restore back the original style before dragging */
+  _removeHelperStyle() {
+    if (this.helper.classList.remove("ui-draggable-dragging"), this.el.gridstackNode?.grid?.el.classList.remove("grid-stack-dragging"), !this.helper?.gridstackNode?._isAboutToRemove && this.dragElementOriginStyle) {
+      const e = this.helper, i = this.dragElementOriginStyle.transition || null;
+      e.style.transition = this.dragElementOriginStyle.transition = "none", z.originStyleProp.forEach((s) => e.style[s] = this.dragElementOriginStyle[s] || null), setTimeout(() => e.style.transition = i, 50);
+    }
+    return delete this.dragElementOriginStyle, this;
+  }
+  /** @internal updates the top/left position to follow the mouse */
+  _dragFollow(t) {
+    const e = this.helper.style, i = this.dragOffset;
+    this.option.rtl ? (e.right = (window.innerWidth - t.clientX + i.offsetX) * this.dragTransform.xScale + "px", e.left && (e.left = "")) : (e.left = (t.clientX + i.offsetX) * this.dragTransform.xScale + "px", e.right && (e.right = "")), e.top = (t.clientY + i.offsetTop) * this.dragTransform.yScale + "px";
+  }
+  /** @internal */
+  _setupHelperContainmentStyle() {
+    return this.helperContainment = this.helper.parentElement, this.helper.style.position !== "fixed" && (this.parentOriginStylePosition = this.helperContainment.style.position, getComputedStyle(this.helperContainment).position.match(/static/) && (this.helperContainment.style.position = "relative")), this;
+  }
+  /** @internal */
+  _getDragOffset(t, e, i) {
+    let s = 0, r = 0;
+    i && (s = this.dragTransform.xOffset, r = this.dragTransform.yOffset);
+    const n = e.getBoundingClientRect();
+    let o = this.option.rtl ? n.right : n.left, d = this.option.rtl ? t.clientX - n.right + s : -t.clientX + n.left - s;
+    return {
+      x: o,
+      top: n.top,
+      offsetX: d,
+      offsetTop: -t.clientY + n.top - r,
+      width: n.width * this.dragTransform.xScale,
+      height: n.height * this.dragTransform.yScale
+    };
+  }
+  /** @internal starts or continues auto-scroll when the dragged helper is clipped by the scroll container.
+   * Takes the grid's own element to find the scroll container so external/sidebar drags work too (#2074). */
+  updateScrollPosition(t) {
+    this._autoScrollContainer = h.getScrollElement(t), this._getClipping(this.helper, this._autoScrollContainer) === 0 ? this._stopScrolling() : this._autoScrollAnimId || (this._autoScrollAnimId = requestAnimationFrame(this._autoScrollTick));
+  }
+  /** @internal compute how many pixels the element is clipped: negative = above, positive = below, 0 = fully inside OR outside (stop scrolling) */
+  _getClipping(t, e) {
+    const i = t.getBoundingClientRect(), s = e.getBoundingClientRect(), r = window.innerHeight || document.documentElement.clientHeight;
+    if (i.bottom < s.top || i.top > s.bottom)
+      return 0;
+    const n = i.bottom - Math.min(s.bottom, r), o = i.top - Math.max(s.top, 0);
+    return o < 0 ? o : n > 0 ? n : 0;
+  }
+  /** @internal stop any active auto-scroll animation */
+  _stopScrolling() {
+    this._autoScrollAnimId && (cancelAnimationFrame(this._autoScrollAnimId), delete this._autoScrollAnimId);
+  }
+  /** @internal TODO: set to public as called by DDDroppable! */
+  ui() {
+    const e = this.el.parentElement.getBoundingClientRect(), i = this.helper.getBoundingClientRect(), s = this.option.rtl ? (e.right - i.right) * this.dragTransform.xScale : (i.left - e.left) * this.dragTransform.xScale;
+    return {
+      position: {
+        top: (i.top - e.top) * this.dragTransform.yScale,
+        left: s
+      }
+      /* not used by GridStack for now...
+      helper: [this.helper], //The object arr representing the helper that's being dragged.
+      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
+      */
+    };
+  }
+}
+z.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "right", "top", "minWidth", "willChange"];
+class F extends S {
+  constructor(t, e = {}) {
+    super(), this.el = t, this.option = e, this._mouseEnter = this._mouseEnter.bind(this), this._mouseLeave = this._mouseLeave.bind(this), this.enable(), this._setupAccept();
+  }
+  on(t, e) {
+    super.on(t, e);
+  }
+  off(t) {
+    super.off(t);
+  }
+  enable() {
+    this.disabled !== !1 && (super.enable(), this.el.classList.add("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), this.el.addEventListener("mouseenter", this._mouseEnter), this.el.addEventListener("mouseleave", this._mouseLeave), b && (this.el.addEventListener("pointerenter", P), this.el.addEventListener("pointerleave", B)));
+  }
+  disable(t = !1) {
+    this.disabled !== !0 && (super.disable(), this.el.classList.remove("ui-droppable"), t || this.el.classList.add("ui-droppable-disabled"), this.el.removeEventListener("mouseenter", this._mouseEnter), this.el.removeEventListener("mouseleave", this._mouseLeave), b && (this.el.removeEventListener("pointerenter", P), this.el.removeEventListener("pointerleave", B)));
+  }
+  destroy() {
+    this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
+  }
+  updateOption(t) {
+    return Object.keys(t).forEach((e) => this.option[e] = t[e]), this._setupAccept(), this;
+  }
+  /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
+  _mouseEnter(t) {
+    if (!f.dragElement || w.touchHandled && t.isTrusted || !this._canDrop(f.dragElement.el))
+      return;
+    t.preventDefault(), t.stopPropagation(), f.dragElement._stopScrolling(), f.dropElement && f.dropElement !== this && f.dropElement._mouseLeave(t, !0), f.dropElement = this;
+    const e = h.initEvent(t, { target: this.el, type: "dropover" });
+    this.option.over && this.option.over(e, this._ui(f.dragElement)), this.triggerEvent("dropover", e), this.el.classList.add("ui-droppable-over");
+  }
+  /** @internal called when the item is leaving our area, stop tracking if we had moving item */
+  _mouseLeave(t, e = !1) {
+    if (!f.dragElement || f.dropElement !== this)
+      return;
+    t.preventDefault(), t.stopPropagation(), e && f.dragElement._stopScrolling();
+    const i = h.initEvent(t, { target: this.el, type: "dropout" });
+    if (this.option.out && this.option.out(i, this._ui(f.dragElement)), this.triggerEvent("dropout", i), f.dropElement === this && (delete f.dropElement, !e)) {
+      let s, r = this.el.parentElement;
+      for (; !s && r; )
+        s = r.ddElement?.ddDroppable, r = r.parentElement;
+      s && s._mouseEnter(t);
+    }
+  }
+  /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
+  drop(t) {
+    t.preventDefault();
+    const e = h.initEvent(t, { target: this.el, type: "drop" });
+    this.option.drop && this.option.drop(e, this._ui(f.dragElement)), this.triggerEvent("drop", e);
+  }
+  /** @internal true if element matches the string/method accept option */
+  _canDrop(t) {
+    return t && (!this.accept || this.accept(t));
+  }
+  /** @internal */
+  _setupAccept() {
+    return this.option.accept ? (typeof this.option.accept == "string" ? this.accept = (t) => t.classList.contains(this.option.accept) || t.matches(this.option.accept) : this.accept = this.option.accept, this) : this;
+  }
+  /** @internal */
+  _ui(t) {
+    return {
+      draggable: t.el,
+      ...t.ui()
+    };
+  }
+}
+class O {
+  static init(t) {
+    return t.ddElement || (t.ddElement = new O(t)), t.ddElement;
+  }
+  constructor(t) {
+    this.el = t;
+  }
+  on(t, e) {
+    return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(t) > -1 ? this.ddDraggable.on(t, e) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(t) > -1 ? this.ddDroppable.on(t, e) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(t) > -1 && this.ddResizable.on(t, e), this;
+  }
+  off(t) {
+    return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(t) > -1 ? this.ddDraggable.off(t) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(t) > -1 ? this.ddDroppable.off(t) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(t) > -1 && this.ddResizable.off(t), this;
+  }
+  setupDraggable(t) {
+    return this.ddDraggable ? this.ddDraggable.updateOption(t) : this.ddDraggable = new z(this.el, t), this;
+  }
+  cleanDraggable() {
+    return this.ddDraggable && (this.ddDraggable.destroy(), delete this.ddDraggable), this;
+  }
+  setupResizable(t) {
+    return this.ddResizable ? this.ddResizable.updateOption(t) : this.ddResizable = new R(this.el, t), this;
+  }
+  cleanResizable() {
+    return this.ddResizable && (this.ddResizable.destroy(), delete this.ddResizable), this;
+  }
+  setupDroppable(t) {
+    return this.ddDroppable ? this.ddDroppable.updateOption(t) : this.ddDroppable = new F(this.el, t), this;
+  }
+  cleanDroppable() {
+    return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
+  }
+}
+class X {
+  /**
+   * Enable/disable/configure resizing for grid elements.
+   *
+   * @param el - Grid item element(s) to configure
+   * @param opts - Resize options or command ('enable', 'disable', 'destroy', 'option', or config object)
+   * @param key - Option key when using 'option' command
+   * @param value - Option value when using 'option' command
+   * @returns this instance for chaining
+   *
+   * @example
+   * dd.resizable(element, 'enable');  // Enable resizing
+   * dd.resizable(element, 'option', 'minWidth', 100);  // Set minimum width
+   */
+  resizable(t, e, i, s) {
+    return this._getDDElements(t, e).forEach((r) => {
+      if (e === "disable" || e === "enable")
+        r.ddResizable && r.ddResizable[e]();
+      else if (e === "destroy")
+        r.ddResizable && r.cleanResizable();
+      else if (e === "option")
+        r.setupResizable({ [i]: s });
+      else {
+        const o = r.el.gridstackNode.grid;
+        let d = r.el.getAttribute("gs-resize-handles") || o.opts.resizable.handles || "e,s,se";
+        d === "all" && (d = "n,e,s,w,se,sw,ne,nw");
+        const l = !o.opts.alwaysShowResizeHandle;
+        r.setupResizable({
+          ...o.opts.resizable,
+          handles: d,
+          autoHide: l,
+          start: e.start,
+          stop: e.stop,
+          resize: e.resize,
+          rtl: e.rtl
+        });
+      }
+    }), this;
+  }
+  /**
+   * Enable/disable/configure dragging for grid elements.
+   *
+   * @param el - Grid item element(s) to configure
+   * @param opts - Drag options or command ('enable', 'disable', 'destroy', 'option', or config object)
+   * @param key - Option key when using 'option' command
+   * @param value - Option value when using 'option' command
+   * @param rtl - Are we in rtl mode?
+   * @returns this instance for chaining
+   *
+   * @example
+   * dd.draggable(element, 'enable');  // Enable dragging
+   * dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle
+   */
+  draggable(t, e, i, s) {
+    return this._getDDElements(t, e).forEach((r) => {
+      if (e === "disable" || e === "enable")
+        r.ddDraggable && r.ddDraggable[e]();
+      else if (e === "destroy")
+        r.ddDraggable && r.cleanDraggable();
+      else if (e === "option")
+        r.setupDraggable({ [i]: s });
+      else {
+        const n = r.el.gridstackNode.grid;
+        r.setupDraggable({
+          ...n.opts.draggable,
+          // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+          start: e.start,
+          stop: e.stop,
+          drag: e.drag,
+          rtl: e.rtl
+        });
+      }
+    }), this;
+  }
+  dragIn(t, e) {
+    return this._getDDElements(t).forEach((i) => i.setupDraggable(e)), this;
+  }
+  droppable(t, e, i, s) {
+    return typeof e.accept == "function" && !e._accept && (e._accept = e.accept, e.accept = (r) => e._accept(r)), this._getDDElements(t, e).forEach((r) => {
+      e === "disable" || e === "enable" ? r.ddDroppable && r.ddDroppable[e]() : e === "destroy" ? r.ddDroppable && r.cleanDroppable() : e === "option" ? r.setupDroppable({ [i]: s }) : r.setupDroppable(e);
+    }), this;
+  }
+  /** true if element is droppable */
+  isDroppable(t) {
+    return !!(t?.ddElement?.ddDroppable && !t.ddElement.ddDroppable.disabled);
+  }
+  /** true if element is draggable */
+  isDraggable(t) {
+    return !!(t?.ddElement?.ddDraggable && !t.ddElement.ddDraggable.disabled);
+  }
+  /** true if element is draggable */
+  isResizable(t) {
+    return !!(t?.ddElement?.ddResizable && !t.ddElement.ddResizable.disabled);
+  }
+  on(t, e, i) {
+    return this._getDDElements(t).forEach((s) => s.on(e, (r) => {
+      i(r, f.dragElement ? f.dragElement.el : r.target, f.dragElement ? f.dragElement.helper : null);
+    })), this;
+  }
+  off(t, e) {
+    return this._getDDElements(t).forEach((i) => i.off(e)), this;
+  }
+  /** @internal returns a list of DD elements, creating them on the fly by default unless option is to destroy or disable */
+  _getDDElements(t, e) {
+    const i = t.gridstack || e !== "destroy" && e !== "disable", s = h.getElements(t);
+    return s.length ? s.map((n) => n.ddElement || (i ? O.init(n) : null)).filter((n) => n) : [];
+  }
+}
+/*!
+ * GridStack 12.6.0
+ * https://gridstackjs.com/
+ *
+ * Copyright (c) 2021-2025  Alain Dumesny
+ * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
+ */
+const y = new X();
+class g {
+  /**
+   * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
+   * simply return the existing instance (ignore any passed options). There is also an initAll() version that support
+   * multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.
+   * @param options grid options (optional)
+   * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
+   *
+   * @example
+   * const grid = GridStack.init();
+   *
+   * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
+   * const grid = document.querySelector('.grid-stack').gridstack;
+   */
+  static init(t = {}, e = ".grid-stack") {
+    if (typeof document > "u")
+      return null;
+    const i = g.getGridElement(e);
+    return i ? (i.gridstack || (i.gridstack = new g(i, h.cloneDeep(t))), i.gridstack) : (console.error(typeof e == "string" ? 'GridStack.initAll() no grid was found with selector "' + e + `" - element missing or wrong selector ?
+Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.` : "GridStack.init() no grid element was passed."), null);
+  }
+  /**
+   * Will initialize a list of elements (given a selector) and return an array of grids.
+   * @param options grid options (optional)
+   * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
+   *
+   * @example
+   * const grids = GridStack.initAll();
+   * grids.forEach(...)
+   */
+  static initAll(t = {}, e = ".grid-stack") {
+    const i = [];
+    return typeof document > "u" || (g.getGridElements(e).forEach((s) => {
+      s.gridstack || (s.gridstack = new g(s, h.cloneDeep(t))), i.push(s.gridstack);
+    }), i.length === 0 && console.error('GridStack.initAll() no grid was found with selector "' + e + `" - element missing or wrong selector ?
+Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.`)), i;
+  }
+  /**
+   * call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
+   * grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
+   * JSON serialized data, including options.
+   * @param parent HTML element parent to the grid
+   * @param opt grids options used to initialize the grid, and list of children
+   */
+  static addGrid(t, e = {}) {
+    if (!t)
+      return null;
+    let i = t;
+    if (i.gridstack) {
+      const n = i.gridstack;
+      return e && (n.opts = { ...n.opts, ...e }), e.children !== void 0 && n.load(e.children), n;
+    }
+    return (!t.classList.contains("grid-stack") || g.addRemoveCB) && (g.addRemoveCB ? i = g.addRemoveCB(t, e, !0, !0) : i = h.createDiv(["grid-stack", e.class], t)), g.init(e, i);
+  }
+  /** call this method to register your engine instead of the default one.
+   * See instead `GridStackOptions.engineClass` if you only need to
+   * replace just one instance.
+   */
+  static registerEngine(t) {
+    g.engineClass = t;
+  }
+  /**
+   * @internal create placeholder DIV as needed
+   * @returns the placeholder element for indicating drop zones during drag operations
+   */
+  get placeholder() {
+    if (!this._placeholder) {
+      this._placeholder = h.createDiv([this.opts.placeholderClass, v.itemClass, this.opts.itemClass]);
+      const t = h.createDiv(["placeholder-content"], this._placeholder);
+      this.opts.placeholderText && (t.textContent = this.opts.placeholderText);
+    }
+    return this._placeholder;
+  }
+  /**
+   * Construct a grid item from the given element and options
+   * @param el the HTML element tied to this grid after it's been initialized
+   * @param opts grid options - public for classes to access, but use methods to modify!
+   */
+  constructor(t, e = {}) {
+    this.el = t, this.opts = e, this.animationDelay = 310, this._gsEventHandler = {}, this._extraDragRow = 0, this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 }, t.gridstack = this, this.opts = e = e || {}, t.classList.contains("grid-stack") || this.el.classList.add("grid-stack"), e.row && (e.minRow = e.maxRow = e.row, delete e.row);
+    const i = h.toNumber(t.getAttribute("gs-row"));
+    e.column === "auto" && delete e.column, e.alwaysShowResizeHandle !== void 0 && (e._alwaysShowResizeHandle = e.alwaysShowResizeHandle);
+    const s = e.columnOpts;
+    if (s) {
+      const l = s.breakpoints;
+      !s.columnWidth && !l?.length ? delete e.columnOpts : (s.columnMax = s.columnMax || 12, l?.length > 1 && l.sort((a, u) => (u.w || 0) - (a.w || 0)));
+    }
+    const r = {
+      ...h.cloneDeep(v),
+      column: h.toNumber(t.getAttribute("gs-column")) || v.column,
+      minRow: i || h.toNumber(t.getAttribute("gs-min-row")) || v.minRow,
+      maxRow: i || h.toNumber(t.getAttribute("gs-max-row")) || v.maxRow,
+      staticGrid: h.toBool(t.getAttribute("gs-static")) || v.staticGrid,
+      sizeToContent: h.toBool(t.getAttribute("gs-size-to-content")) || void 0,
+      draggable: {
+        handle: (e.handleClass ? "." + e.handleClass : e.handle ? e.handle : "") || v.draggable.handle
+      },
+      removableOptions: {
+        accept: e.itemClass || v.removableOptions.accept,
+        decline: v.removableOptions.decline
+      }
+    };
+    t.getAttribute("gs-animate") && (r.animate = h.toBool(t.getAttribute("gs-animate"))), e = h.defaults(e, r), this._initMargin(), this.checkDynamicColumn(), this._updateColumnVar(e), e.rtl === "auto" && (e.rtl = t.style.direction === "rtl"), e.rtl && this.el.classList.add("grid-stack-rtl");
+    const o = this.el.closest("." + v.itemClass)?.gridstackNode;
+    if (o && (o.subGrid = this, this.parentGridNode = o, this.el.classList.add("grid-stack-nested"), o.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = e.cellHeight === "auto", this._isAutoCellHeight || e.cellHeight === "initial")
+      this.cellHeight(void 0);
+    else {
+      typeof e.cellHeight == "number" && e.cellHeightUnit && e.cellHeightUnit !== v.cellHeightUnit && (e.cellHeight = e.cellHeight + e.cellHeightUnit, delete e.cellHeightUnit);
+      const l = e.cellHeight;
+      delete e.cellHeight, this.cellHeight(l);
+    }
+    e.alwaysShowResizeHandle === "mobile" && (e.alwaysShowResizeHandle = b), this._setStaticClass();
+    const d = e.engineClass || g.engineClass || x;
+    if (this.engine = new d({
+      column: this.getColumn(),
+      float: e.float,
+      maxRow: e.maxRow,
+      onChange: (l) => {
+        l.forEach((a) => {
+          const u = a.el;
+          u && (a._removeDOM ? (u && u.remove(), delete a._removeDOM) : this._writePosAttr(u, a));
+        }), this._updateContainerHeight();
+      }
+    }), e.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((l) => this._prepareElement(l)), delete this.engine._loading, this.batchUpdate(!1)), e.children) {
+      const l = e.children;
+      delete e.children, l.length && this.load(l);
+    }
+    this.setAnimation(), e.subGridDynamic && !f.pauseDrag && (f.pauseDrag = !0), e.draggable?.pause !== void 0 && (f.pauseDrag = e.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
+  }
+  _updateColumnVar(t = this.opts) {
+    this.el.classList.add("gs-" + t.column), typeof t.column == "number" && this.el.style.setProperty("--gs-column-width", `${100 / t.column}%`);
+  }
+  /**
+   * add a new widget and returns it.
+   *
+   * Widget will be always placed even if result height is more than actual grid height.
+   * You need to use `willItFit()` before calling addWidget for additional check.
+   * See also `makeWidget(el)` for DOM element.
+   *
+   * @example
+   * const grid = GridStack.init();
+   * grid.addWidget({w: 3, content: 'hello'});
+   *
+   * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
+   */
+  addWidget(t) {
+    if (!t)
+      return;
+    if (typeof t == "string") {
+      console.error("V11: GridStack.addWidget() does not support string anymore. see #2736");
+      return;
+    }
+    if (t.ELEMENT_NODE)
+      return console.error("V11: GridStack.addWidget() does not support HTMLElement anymore. use makeWidget()"), this.makeWidget(t);
+    let e, i = t;
+    if (i.grid = this, i.el ? e = i.el : g.addRemoveCB ? e = g.addRemoveCB(this.el, t, !0, !1) : e = this.createWidgetDivs(i), !e)
+      return;
+    if (i = e.gridstackNode, i && e.parentElement === this.el && this.engine.nodes.find((r) => r._id === i._id))
+      return e;
+    const s = this._readAttr(e);
+    return h.defaults(t, s), this.engine.prepareNode(t), this.el.appendChild(e), this.makeWidget(e, t), e;
+  }
+  /**
+   * Create the default grid item divs and content (possibly lazy loaded) by using GridStack.renderCB().
+   *
+   * @param n GridStackNode definition containing widget configuration
+   * @returns the created HTML element with proper grid item structure
+   *
+   * @example
+   * const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' });
+   */
+  createWidgetDivs(t) {
+    const e = h.createDiv(["grid-stack-item", this.opts.itemClass]), i = h.createDiv(["grid-stack-item-content"], e);
+    return h.lazyLoad(t) ? t.visibleObservable || (t.visibleObservable = new IntersectionObserver(([s]) => {
+      s.isIntersecting && (t.visibleObservable?.disconnect(), delete t.visibleObservable, g.renderCB(i, t), t.grid?.prepareDragDrop(t.el));
+    }), window.setTimeout(() => t.visibleObservable?.observe(e))) : g.renderCB(i, t), e;
+  }
+  /**
+   * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
+   * from the parent's subGrid options.
+   * @param el gridItem element to convert
+   * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
+   * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
+   * @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget
+   * @returns newly created grid
+   */
+  makeSubGrid(t, e, i, s = !0) {
+    let r = t.gridstackNode;
+    if (r || (r = this.makeWidget(t).gridstackNode), r.subGrid?.el)
+      return r.subGrid;
+    let n, o = this;
+    for (; o && !n; )
+      n = o.opts?.subGridOpts, o = o.parentGridNode?.grid;
+    e = h.cloneDeep({
+      // by default sub-grid inherit from us | parent, other than id, children, etc...
+      ...this.opts,
+      id: void 0,
+      children: void 0,
+      column: "auto",
+      columnOpts: void 0,
+      layout: "list",
+      subGridOpts: void 0,
+      ...n || {},
+      ...e || r.subGridOpts || {}
+    }), r.subGridOpts = e;
+    let d;
+    e.column === "auto" && (d = !0, e.column = Math.max(r.w || 1, i?.w || 1), delete e.columnOpts);
+    let l = r.el.querySelector(".grid-stack-item-content"), a, u;
+    if (s && (this._removeDD(r.el), u = { ...r, x: 0, y: 0 }, h.removeInternalForSave(u), delete u.subGridOpts, r.content && (u.content = r.content, delete r.content), g.addRemoveCB ? a = g.addRemoveCB(this.el, u, !0, !1) : (a = h.createDiv(["grid-stack-item"]), a.appendChild(l), l = h.createDiv(["grid-stack-item-content"], r.el)), this.prepareDragDrop(r.el)), i) {
+      const p = d ? e.column : r.w, _ = r.h + i.h, E = r.el.style;
+      E.transition = "none", this.update(r.el, { w: p, h: _ }), setTimeout(() => E.transition = null);
+    }
+    const c = r.subGrid = g.addGrid(l, e);
+    return i?._moving && (c._isTemp = !0), d && (c._autoColumn = !0), s && c.makeWidget(a, u), i && (i._moving ? window.setTimeout(() => h.simulateMouseEvent(i._event, "mouseenter", c.el), 0) : c.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), c;
+  }
+  /**
+   * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
+   * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
+   */
+  removeAsSubGrid(t) {
+    const e = this.parentGridNode?.grid;
+    e && (e.batchUpdate(), e.removeWidget(this.parentGridNode.el, !0, !0), this.engine.nodes.forEach((i) => {
+      i.x += this.parentGridNode.x, i.y += this.parentGridNode.y, e.makeWidget(i.el, i);
+    }), e.batchUpdate(!1), this.parentGridNode && delete this.parentGridNode.subGrid, delete this.parentGridNode, t && window.setTimeout(() => h.simulateMouseEvent(t._event, "mouseenter", e.el), 0));
+  }
+  /**
+   * saves the current layout returning a list of widgets for serialization which might include any nested grids.
+   * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
+   * be removed.
+   * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
+   * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
+   * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
+   * @param column if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout).
+   * Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts.
+   * NOTE: if you want to save to currently display layout, pass this.getColumn() as column.
+   * NOTE2: nested grids will ALWAYS save to the container size to be in sync with parent.
+   * @returns list of widgets or full grid option, including .children list of widgets
+   */
+  save(t = !0, e = !1, i = g.saveCB, s) {
+    const r = this.engine.save(t, i, s);
+    if (r.forEach((n) => {
+      if (t && n.el && !n.subGrid && !i) {
+        const o = n.el.querySelector(".grid-stack-item-content");
+        n.content = o?.innerHTML, n.content || delete n.content;
+      } else if (!t && !i && delete n.content, n.subGrid?.el) {
+        const o = n.w || n.subGrid.getColumn(), d = n.subGrid.save(t, e, i, o);
+        n.subGridOpts = e ? d : { children: d }, delete n.subGrid;
+      }
+      delete n.el;
+    }), e) {
+      const n = h.cloneDeep(this.opts);
+      n.marginBottom === n.marginTop && n.marginRight === n.marginLeft && n.marginTop === n.marginRight && (n.margin = n.marginTop, delete n.marginTop, delete n.marginRight, delete n.marginBottom, delete n.marginLeft), n.rtl === (this.el.style.direction === "rtl") && (n.rtl = "auto"), this._isAutoCellHeight && (n.cellHeight = "auto"), this._autoColumn && (n.column = "auto");
+      const o = n._alwaysShowResizeHandle;
+      return delete n._alwaysShowResizeHandle, o !== void 0 ? n.alwaysShowResizeHandle = o : delete n.alwaysShowResizeHandle, h.removeInternalAndSame(n, v), n.children = r, n;
+    }
+    return r;
+  }
+  /**
+   * Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
+   * Used to restore a grid layout for a saved layout list (see `save()`).
+   *
+   * @param items list of widgets definition to update/create
+   * @param addRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
+   * the user control of insertion.
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Basic usage with saved layout
+   * const savedLayout = grid.save(); // Save current layout
+   * // ... later restore it
+   * grid.load(savedLayout);
+   *
+   * // Load with custom add/remove callback
+   * grid.load(layout, (items, grid, add) => {
+   *   if (add) {
+   *     // Custom logic for adding new widgets
+   *     items.forEach(item => {
+   *       const el = document.createElement('div');
+   *       el.innerHTML = item.content || '';
+   *       grid.addWidget(el, item);
+   *     });
+   *   } else {
+   *     // Custom logic for removing widgets
+   *     items.forEach(item => grid.removeWidget(item.el));
+   *   }
+   * });
+   *
+   * // Load without adding/removing missing widgets
+   * grid.load(layout, false);
+   *
+   * @see {@link http://gridstackjs.com/demo/serialization.html} for complete example
+   */
+  load(t, e = g.addRemoveCB || !0) {
+    t.forEach((a) => {
+      a.w = a.w || a.minW || 1, a.h = a.h || a.minH || 1;
+    }), t = h.sort(t), this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = !0;
+    let i = 0;
+    t.forEach((a) => {
+      i = Math.max(i, (a.x || 0) + a.w);
+    }), i > this.engine.defaultColumn && (this.engine.defaultColumn = i);
+    const s = this.getColumn();
+    i > s && (this.engine.nodes.length === 0 && this.responseLayout ? (this.engine.nodes = t, this.engine.columnChanged(i, s, this.responseLayout), t = this.engine.nodes, this.engine.nodes = [], delete this.responseLayout) : this.engine.cacheLayout(t, i, !0));
+    const r = g.addRemoveCB;
+    typeof e == "function" && (g.addRemoveCB = e);
+    const n = [];
+    this.batchUpdate();
+    const o = !this.engine.nodes.length, d = o && this.opts.animate;
+    d && this.setAnimation(!1), !o && e && [...this.engine.nodes].forEach((u) => {
+      if (!u.id)
+        return;
+      h.find(t, u.id) || (g.addRemoveCB && g.addRemoveCB(this.el, u, !1, !1), n.push(u), this.removeWidget(u.el, !0, !1));
+    }), this.engine._loading = !0;
+    const l = [];
+    return this.engine.nodes = this.engine.nodes.filter((a) => h.find(t, a.id) ? (l.push(a), !1) : !0), t.forEach((a) => {
+      const u = h.find(l, a.id);
+      if (u) {
+        if (h.shouldSizeToContent(u) && (a.h = u.h), this.engine.nodeBoundFix(a), (a.autoPosition || a.x === void 0 || a.y === void 0) && (a.w = a.w || u.w, a.h = a.h || u.h, this.engine.findEmptyPosition(a)), this.engine.nodes.push(u), h.samePos(u, a) && this.engine.nodes.length > 1 && (this.moveNode(u, { ...a, forceCollide: !0 }), h.copyPos(a, u)), this.update(u.el, a), a.subGridOpts?.children) {
+          const c = u.el.querySelector(".grid-stack");
+          c && c.gridstack && c.gridstack.load(a.subGridOpts.children);
+        }
+      } else e && this.addWidget(a);
+    }), delete this.engine._loading, this.engine.removedNodes = n, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? g.addRemoveCB = r : delete g.addRemoveCB, d && this.setAnimation(!0, !0), this;
+  }
+  /**
+   * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
+   * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
+   */
+  batchUpdate(t = !0) {
+    return this.engine.batchUpdate(t), t || (this._updateContainerHeight(), this._triggerRemoveEvent(), this._triggerAddEvent(), this._triggerChangeEvent()), this;
+  }
+  /**
+   * Gets the current cell height in pixels. This takes into account the unit type and converts to pixels if necessary.
+   *
+   * @param forcePixel if true, forces conversion to pixels even when cellHeight is specified in other units
+   * @returns the cell height in pixels
+   *
+   * @example
+   * const height = grid.getCellHeight();
+   * console.log('Cell height:', height, 'px');
+   *
+   * // Force pixel conversion
+   * const pixelHeight = grid.getCellHeight(true);
+   */
+  getCellHeight(t = !1) {
+    if (this.opts.cellHeight && this.opts.cellHeight !== "auto" && (!t || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === "px"))
+      return this.opts.cellHeight;
+    if (this.opts.cellHeightUnit === "rem")
+      return this.opts.cellHeight * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (this.opts.cellHeightUnit === "em")
+      return this.opts.cellHeight * parseFloat(getComputedStyle(this.el).fontSize);
+    if (this.opts.cellHeightUnit === "cm")
+      return this.opts.cellHeight * (96 / 2.54);
+    if (this.opts.cellHeightUnit === "mm")
+      return this.opts.cellHeight * (96 / 2.54) / 10;
+    const e = this.el.querySelector("." + this.opts.itemClass);
+    if (e) {
+      const s = h.toNumber(e.getAttribute("gs-h")) || 1;
+      return Math.round(e.offsetHeight / s);
+    }
+    const i = parseInt(this.el.getAttribute("gs-current-row"));
+    return i ? Math.round(this.el.getBoundingClientRect().height / i) : this.opts.cellHeight;
+  }
+  /**
+   * Update current cell height - see `GridStackOptions.cellHeight` for format by updating eh Browser CSS variable.
+   *
+   * @param val the cell height. Options:
+   *   - `undefined`: cells content will be made square (match width minus margin)
+   *   - `0`: the CSS will be generated by the application instead
+   *   - number: height in pixels
+   *   - string: height with units (e.g., '70px', '5rem', '2em')
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * grid.cellHeight(100);     // 100px height
+   * grid.cellHeight('70px');  // explicit pixel height
+   * grid.cellHeight('5rem');  // relative to root font size
+   * grid.cellHeight(grid.cellWidth() * 1.2); // aspect ratio
+   * grid.cellHeight('auto');  // auto-size based on content
+   */
+  cellHeight(t) {
+    if (t !== void 0 && this._isAutoCellHeight !== (t === "auto") && (this._isAutoCellHeight = t === "auto", this._updateResizeEvent()), (t === "initial" || t === "auto") && (t = void 0), t === void 0) {
+      const i = -this.opts.marginRight - this.opts.marginLeft + this.opts.marginTop + this.opts.marginBottom;
+      t = this.cellWidth() + i;
+    }
+    const e = h.parseHeight(t);
+    return this.opts.cellHeightUnit === e.unit && this.opts.cellHeight === e.h ? this : (this.opts.cellHeightUnit = e.unit, this.opts.cellHeight = e.h, this.el.style.setProperty("--gs-cell-height", `${this.opts.cellHeight}${this.opts.cellHeightUnit}`), this._updateContainerHeight(), this.resizeToContentCheck(), this);
+  }
+  /** Gets current cell width. */
+  /**
+   * Gets the current cell width in pixels. This is calculated based on the grid container width divided by the number of columns.
+   *
+   * @returns the cell width in pixels
+   *
+   * @example
+   * const width = grid.cellWidth();
+   * console.log('Cell width:', width, 'px');
+   *
+   * // Use cell width to calculate widget dimensions
+   * const widgetWidth = width * 3; // For a 3-column wide widget
+   */
+  cellWidth() {
+    return this._widthOrContainer() / this.getColumn();
+  }
+  /** return our expected width (or parent) , and optionally of window for dynamic column check */
+  _widthOrContainer(t = !1) {
+    return t && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth;
+  }
+  /** checks for dynamic column count for our current size, returning true if changed */
+  checkDynamicColumn() {
+    const t = this.opts.columnOpts;
+    if (!t || !t.columnWidth && !t.breakpoints?.length)
+      return !1;
+    const e = this.getColumn();
+    let i = e;
+    const s = this._widthOrContainer(!0);
+    if (t.columnWidth)
+      i = Math.min(Math.round(s / t.columnWidth) || 1, t.columnMax);
+    else {
+      i = t.columnMax;
+      let r = 0;
+      for (; r < t.breakpoints.length && s <= t.breakpoints[r].w; )
+        i = t.breakpoints[r++].c || e;
+    }
+    if (i !== e) {
+      const r = t.breakpoints?.find((n) => n.c === i);
+      return this.column(i, r?.layout || t.layout), !0;
+    }
+    return !1;
+  }
+  /**
+   * Re-layout grid items to reclaim any empty space. This is useful after removing widgets
+   * or when you want to optimize the layout.
+   *
+   * @param layout layout type. Options:
+   *   - 'compact' (default): might re-order items to fill any empty space
+   *   - 'list': keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit
+   * @param doSort re-sort items first based on x,y position. Set to false to do your own sorting ahead (default: true)
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Compact layout after removing widgets
+   * grid.removeWidget('.widget-to-remove');
+   * grid.compact();
+   *
+   * // Use list layout (preserve order)
+   * grid.compact('list');
+   *
+   * // Compact without sorting first
+   * grid.compact('compact', false);
+   */
+  compact(t = "compact", e = !0) {
+    return this.engine.compact(t, e), this._triggerChangeEvent(), this;
+  }
+  /**
+   * Set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
+   * as well as cache the original layout so you can revert back to previous positions without loss.
+   *
+   * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11] columns,
+   * else you will need to generate correct CSS.
+   * See: https://github.com/gridstack/gridstack.js#change-grid-columns
+   *
+   * @param column Integer > 0 (default 12)
+   * @param layout specify the type of re-layout that will happen. Options:
+   *   - 'moveScale' (default): scale widget positions and sizes
+   *   - 'move': keep widget sizes, only move positions
+   *   - 'scale': keep widget positions, only scale sizes
+   *   - 'none': don't change widget positions or sizes
+   *   Note: items will never be outside of the current column boundaries.
+   *   Ignored for `column=1` as we always want to vertically stack.
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Change to 6 columns with default scaling
+   * grid.column(6);
+   *
+   * // Change to 4 columns, only move positions
+   * grid.column(4, 'move');
+   *
+   * // Single column layout (vertical stack)
+   * grid.column(1);
+   */
+  column(t, e = "moveScale") {
+    if (!t || t < 1 || this.opts.column === t)
+      return this;
+    const i = this.getColumn();
+    return this.opts.column = t, this.engine ? (this.engine.column = t, this.el.classList.remove("gs-" + i), this._updateColumnVar(), this.engine.columnChanged(i, t, e), this._isAutoCellHeight && this.cellHeight(), this.resizeToContentCheck(!0), this._ignoreLayoutsNodeChange = !0, this._triggerChangeEvent(), delete this._ignoreLayoutsNodeChange, this) : (this.responseLayout = e, this);
+  }
+  /**
+   * Get the number of columns in the grid (default 12).
+   *
+   * @returns the current number of columns in the grid
+   *
+   * @example
+   * const columnCount = grid.getColumn(); // returns 12 by default
+   */
+  getColumn() {
+    return this.opts.column;
+  }
+  /**
+   * Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
+   * This method excludes placeholder elements and returns only actual grid items.
+   *
+   * @returns array of GridItemHTMLElement instances representing all grid items
+   *
+   * @example
+   * const items = grid.getGridItems();
+   * items.forEach(item => {
+   *   console.log('Item ID:', item.gridstackNode.id);
+   * });
+   */
+  getGridItems() {
+    return Array.from(this.el.children).filter((t) => t.matches("." + this.opts.itemClass) && !t.matches("." + this.opts.placeholderClass));
+  }
+  /**
+   * Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc.
+   * This is useful for callers who want to implement dirty flag functionality.
+   *
+   * @returns true if change callbacks are currently being ignored
+   *
+   * @example
+   * if (!grid.isIgnoreChangeCB()) {
+   *   // Process the change event
+   *   console.log('Grid layout changed');
+   * }
+   */
+  isIgnoreChangeCB() {
+    return this._ignoreLayoutsNodeChange;
+  }
+  /**
+   * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
+   * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
+   */
+  destroy(t = !0) {
+    if (this.el)
+      return this.offAll(), this._updateResizeEvent(!0), this.setStatic(!0, !1), this.setAnimation(!1), t ? this.el.parentNode.removeChild(this.el) : (this.removeAll(t), this.el.removeAttribute("gs-current-row")), this.parentGridNode && delete this.parentGridNode.subGrid, delete this.parentGridNode, delete this.opts, delete this._placeholder?.gridstackNode, delete this._placeholder, delete this.engine, delete this.el.gridstack, delete this.el, this;
+  }
+  /**
+   * Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces.
+   * See [example](http://gridstackjs.com/demo/float.html)
+   *
+   * @param val true to enable floating, false to disable
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * grid.float(true);  // Enable floating
+   * grid.float(false); // Disable floating (default)
+   */
+  float(t) {
+    return this.opts.float !== t && (this.opts.float = this.engine.float = t, this._triggerChangeEvent()), this;
+  }
+  /**
+   * Get the current float mode setting.
+   *
+   * @returns true if floating is enabled, false otherwise
+   *
+   * @example
+   * const isFloating = grid.getFloat();
+   * console.log('Floating enabled:', isFloating);
+   */
+  getFloat() {
+    return this.engine.float;
+  }
+  /**
+   * Get the position of the cell under a pixel on screen.
+   * @param position the position of the pixel to resolve in
+   * absolute coordinates, as an object with top and left properties
+   * @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).
+   * Useful when grid is within `position: relative` element
+   *
+   * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
+   */
+  getCellFromPixel(t, e = !1) {
+    const i = this.el.getBoundingClientRect();
+    let s;
+    e ? s = { top: i.top + document.documentElement.scrollTop, left: i.left } : s = { top: this.el.offsetTop, left: this.el.offsetLeft };
+    const r = t.left - s.left, n = t.top - s.top, o = i.width / this.getColumn(), d = i.height / parseInt(this.el.getAttribute("gs-current-row"));
+    return { x: Math.floor(r / o), y: Math.floor(n / d) };
+  }
+  /**
+   * Returns the current number of rows, which will be at least `minRow` if set.
+   * The row count is based on the highest positioned widget in the grid.
+   *
+   * @returns the current number of rows in the grid
+   *
+   * @example
+   * const rowCount = grid.getRow();
+   * console.log('Grid has', rowCount, 'rows');
+   */
+  getRow() {
+    return Math.max(this.engine.getRow(), this.opts.minRow || 0);
+  }
+  /**
+   * Checks if the specified rectangular area is empty (no widgets occupy any part of it).
+   *
+   * @param x the x coordinate (column) of the area to check
+   * @param y the y coordinate (row) of the area to check
+   * @param w the width in columns of the area to check
+   * @param h the height in rows of the area to check
+   * @returns true if the area is completely empty, false if any widget overlaps
+   *
+   * @example
+   * // Check if a 2x2 area at position (1,1) is empty
+   * if (grid.isAreaEmpty(1, 1, 2, 2)) {
+   *   console.log('Area is available for placement');
+   * }
+   */
+  isAreaEmpty(t, e, i, s) {
+    return this.engine.isAreaEmpty(t, e, i, s);
+  }
+  /**
+   * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
+   * If you want gridstack to add the elements for you, use `addWidget()` instead.
+   * Makes the given element a widget and returns it.
+   *
+   * @param els widget or single selector to convert.
+   * @param options widget definition to use instead of reading attributes or using default sizing values
+   * @returns the converted GridItemHTMLElement
+   *
+   * @example
+   * const grid = GridStack.init();
+   *
+   * // Create HTML content manually, possibly looking like:
+   * // <div id="item-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2"></div>
+   * grid.el.innerHTML = '<div id="item-1" gs-w="3"></div><div id="item-2"></div>';
+   *
+   * // Convert existing elements to widgets
+   * grid.makeWidget('#item-1'); // Uses gs-* attributes from DOM
+   * grid.makeWidget('#item-2', {w: 2, h: 1, content: 'Hello World'});
+   *
+   * // Or pass DOM element directly
+   * const element = document.getElementById('item-3');
+   * grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
+   */
+  makeWidget(t, e) {
+    const i = g.getElement(t);
+    if (!i || i.gridstackNode)
+      return i;
+    i.parentElement || this.el.appendChild(i), this._prepareElement(i, !0, e);
+    const s = i.gridstackNode;
+    this._updateContainerHeight(), s.subGridOpts && this.makeSubGrid(i, s.subGridOpts, void 0, !1);
+    let r;
+    return this.opts.column === 1 && !this._ignoreLayoutsNodeChange && (r = this._ignoreLayoutsNodeChange = !0), this._triggerAddEvent(), this._triggerChangeEvent(), r && delete this._ignoreLayoutsNodeChange, i;
+  }
+  on(t, e) {
+    return t.indexOf(" ") !== -1 ? (t.split(" ").forEach((s) => this.on(s, e)), this) : (t === "change" || t === "added" || t === "removed" || t === "enable" || t === "disable" ? (t === "enable" || t === "disable" ? this._gsEventHandler[t] = (s) => e(s) : this._gsEventHandler[t] = (s) => {
+      s.detail && e(s, s.detail);
+    }, this.el.addEventListener(t, this._gsEventHandler[t])) : t === "drag" || t === "dragstart" || t === "dragstop" || t === "resizestart" || t === "resize" || t === "resizestop" || t === "dropped" || t === "resizecontent" ? this._gsEventHandler[t] = e : console.error("GridStack.on(" + t + ") event not supported"), this);
+  }
+  /**
+   * unsubscribe from the 'on' event GridStackEvent
+   * @param name of the event (see possible values) or list of names space separated
+   */
+  off(t) {
+    return t.indexOf(" ") !== -1 ? (t.split(" ").forEach((i) => this.off(i)), this) : ((t === "change" || t === "added" || t === "removed" || t === "enable" || t === "disable") && this._gsEventHandler[t] && this.el.removeEventListener(t, this._gsEventHandler[t]), delete this._gsEventHandler[t], this);
+  }
+  /**
+   * Remove all event handlers from the grid. This is useful for cleanup when destroying a grid.
+   *
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * grid.offAll(); // Remove all event listeners
+   */
+  offAll() {
+    return Object.keys(this._gsEventHandler).forEach((t) => this.off(t)), this;
+  }
+  /**
+   * Removes widget from the grid.
+   * @param el  widget or selector to modify
+   * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
+   * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
+   */
+  removeWidget(t, e = !0, i = !0) {
+    return t ? (g.getElements(t).forEach((s) => {
+      if (s.parentElement && s.parentElement !== this.el)
+        return;
+      let r = s.gridstackNode;
+      r || (r = this.engine.nodes.find((n) => s === n.el)), r && (e && g.addRemoveCB && g.addRemoveCB(this.el, r, !1, !1), delete s.gridstackNode, this._removeDD(s), this.engine.removeNode(r, e, i), e && s.parentElement && s.remove());
+    }), i && (this._triggerRemoveEvent(), this._triggerChangeEvent()), this) : (console.error("Error: GridStack.removeWidget(undefined) called"), this);
+  }
+  /**
+   * Removes all widgets from the grid.
+   * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+   * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
+   */
+  removeAll(t = !0, e = !0) {
+    return this.engine.nodes.forEach((i) => {
+      t && g.addRemoveCB && g.addRemoveCB(this.el, i, !1, !1), delete i.el.gridstackNode, this.opts.staticGrid || this._removeDD(i.el);
+    }), this.engine.removeAll(t, e), e && this._triggerRemoveEvent(), this;
+  }
+  /**
+   * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
+   * @param doAnimate if true the grid will animate.
+   * @param delay if true setting will be set on next event loop.
+   */
+  setAnimation(t = this.opts.animate, e) {
+    return e ? setTimeout(() => {
+      this.opts && this.setAnimation(t);
+    }) : t ? this.el.classList.add("grid-stack-animate") : this.el.classList.remove("grid-stack-animate"), this.opts.animate = t, this;
+  }
+  /** @internal */
+  hasAnimationCSS() {
+    return this.el.classList.contains("grid-stack-animate");
+  }
+  /**
+   * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
+   * Also toggle the grid-stack-static class.
+   * @param val if true the grid become static.
+   * @param updateClass true (default) if css class gets updated
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  setStatic(t, e = !0, i = !0) {
+    return !!this.opts.staticGrid === t ? this : (t ? this.opts.staticGrid = !0 : delete this.opts.staticGrid, this._setupRemoveDrop(), this._setupAcceptWidget(), this.engine.nodes.forEach((s) => {
+      this.prepareDragDrop(s.el), s.subGrid && i && s.subGrid.setStatic(t, e, i);
+    }), e && this._setStaticClass(), this);
+  }
+  /**
+   * Updates the passed in options on the grid (similar to update(widget) for for the grid options).
+   * @param options PARTIAL grid options to update - only items specified will be updated.
+   * NOTE: not all options updating are currently supported (lot of code, unlikely to change)
+   */
+  updateOptions(t) {
+    const e = this.opts;
+    if (t === e)
+      return this;
+    if (t.acceptWidgets !== void 0 && (e.acceptWidgets = t.acceptWidgets, this._setupAcceptWidget()), t.animate !== void 0 && this.setAnimation(t.animate), t.cellHeight && this.cellHeight(t.cellHeight), t.class !== void 0 && t.class !== e.class && (e.class && this.el.classList.remove(e.class), t.class && this.el.classList.add(t.class)), t.columnOpts) {
+      const i = !!this.opts.columnOpts;
+      this.opts.columnOpts = t.columnOpts, i !== !!this.opts.columnOpts && this._updateResizeEvent(), this.checkDynamicColumn();
+    } else t.columnOpts === null && this.opts.columnOpts ? (delete this.opts.columnOpts, this._updateResizeEvent()) : typeof t.column == "number" && this.column(t.column);
+    return t.margin !== void 0 && this.margin(t.margin), t.staticGrid !== void 0 && this.setStatic(t.staticGrid), t.disableDrag !== void 0 && !t.staticGrid && this.enableMove(!t.disableDrag), t.disableResize !== void 0 && !t.staticGrid && this.enableResize(!t.disableResize), t.float !== void 0 && this.float(t.float), t.row !== void 0 ? (e.minRow = e.maxRow = e.row = t.row, this._updateContainerHeight()) : (t.minRow !== void 0 && (e.minRow = t.minRow, this._updateContainerHeight()), t.maxRow !== void 0 && (e.maxRow = this.engine.maxRow = t.maxRow)), t.lazyLoad !== void 0 && (e.lazyLoad = t.lazyLoad), t.children?.length && this.load(t.children), this;
+  }
+  /**
+   * Updates widget position/size and other info. This is used to change widget properties after creation.
+   * Can update position, size, content, and other widget properties.
+   *
+   * Note: If you need to call this on all nodes, use load() instead which will update what changed.
+   * Setting the same x,y for multiple items will be indeterministic and likely unwanted.
+   *
+   * @param els widget element(s) or selector to modify
+   * @param opt new widget options (x,y,w,h, etc.). Only those set will be updated.
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Update widget size and position
+   * grid.update('.my-widget', { x: 2, y: 1, w: 3, h: 2 });
+   *
+   * // Update widget content
+   * grid.update(widget, { content: '<p>New content</p>' });
+   *
+   * // Update multiple properties
+   * grid.update('#my-widget', {
+   *   w: 4,
+   *   h: 3,
+   *   noResize: true,
+   *   locked: true
+   * });
+   */
+  update(t, e) {
+    return g.getElements(t).forEach((i) => {
+      const s = i?.gridstackNode;
+      if (!s)
+        return;
+      const r = { ...h.copyPos({}, s), ...h.cloneDeep(e) };
+      this.engine.nodeBoundFix(r), delete r.autoPosition;
+      const n = ["x", "y", "w", "h"];
+      let o;
+      if (n.some((a) => r[a] !== void 0 && r[a] !== s[a]) && (o = {}, n.forEach((a) => {
+        o[a] = r[a] !== void 0 ? r[a] : s[a], delete r[a];
+      })), !o && (r.minW || r.minH || r.maxW || r.maxH) && (o = {}), r.content !== void 0) {
+        const a = i.querySelector(".grid-stack-item-content");
+        a && a.textContent !== r.content && (s.content = r.content, g.renderCB(a, r), s.subGrid?.el && (a.appendChild(s.subGrid.el), s.subGrid._updateContainerHeight())), delete r.content;
+      }
+      let d = !1, l = !1;
+      for (const a in r)
+        a[0] !== "_" && s[a] !== r[a] && (s[a] = r[a], d = !0, l = l || !this.opts.staticGrid && (a === "noResize" || a === "noMove" || a === "locked"));
+      if (h.sanitizeMinMax(s), o) {
+        const a = o.w !== void 0 && o.w !== s.w;
+        this.moveNode(s, o), a && s.subGrid ? s.subGrid.onResize(this.hasAnimationCSS() ? s.w : void 0) : this.resizeToContentCheck(a, s), delete s._orig;
+      }
+      (o || d) && this._writeAttr(i, s), l && this.prepareDragDrop(s.el), g.updateCB && g.updateCB(s);
+    }), this;
+  }
+  moveNode(t, e) {
+    const i = t._updating;
+    i || this.engine.cleanNodes().beginUpdate(t), this.engine.moveNode(t, e), this._updateContainerHeight(), i || (this._triggerChangeEvent(), this.engine.endUpdate());
+  }
+  /**
+   * Updates widget height to match the content height to avoid vertical scrollbars or dead space.
+   * This automatically adjusts the widget height based on its content size.
+   *
+   * Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content'
+   * (sized to gridItem minus padding) that represents the entire content size.
+   *
+   * @param el the grid item element to resize
+   *
+   * @example
+   * // Resize a widget to fit its content
+   * const widget = document.querySelector('.grid-stack-item');
+   * grid.resizeToContent(widget);
+   *
+   * // This is commonly used with dynamic content:
+   * widget.querySelector('.content').innerHTML = 'New longer content...';
+   * grid.resizeToContent(widget);
+   */
+  resizeToContent(t) {
+    if (!t || (t.classList.remove("size-to-content-max"), !t.clientHeight))
+      return;
+    const e = t.gridstackNode;
+    if (!e)
+      return;
+    const i = e.grid;
+    if (!i || t.parentElement !== i.el)
+      return;
+    const s = i.getCellHeight(!0);
+    if (!s)
+      return;
+    let r = e.h ? e.h * s : t.clientHeight, n;
+    if (e.resizeToContentParent && (n = t.querySelector(e.resizeToContentParent)), n || (n = t.querySelector(g.resizeToContentParent)), !n)
+      return;
+    const o = t.clientHeight - n.clientHeight, d = e.h ? e.h * s - o : n.clientHeight;
+    let l;
+    if (e.subGrid) {
+      l = e.subGrid.getRow() * e.subGrid.getCellHeight(!0);
+      const c = e.subGrid.el.getBoundingClientRect(), p = t.getBoundingClientRect();
+      l += c.top - p.top;
+    } else {
+      if (e.subGridOpts?.children?.length)
+        return;
+      {
+        const c = n.firstElementChild;
+        if (!c) {
+          console.error(`Error: GridStack.resizeToContent() widget id:${e.id} '${g.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
+          return;
+        }
+        l = c.getBoundingClientRect().height || d;
+      }
+    }
+    if (d === l)
+      return;
+    r += l - d;
+    let a = Math.ceil(r / s);
+    const u = Number.isInteger(e.sizeToContent) ? e.sizeToContent : 0;
+    u && a > u && (a = u, t.classList.add("size-to-content-max")), e.minH && a < e.minH ? a = e.minH : e.maxH && a > e.maxH && (a = e.maxH), a !== e.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(e, { h: a }), delete i._ignoreLayoutsNodeChange);
+  }
+  /** call the user resize (so they can do extra work) else our build in version */
+  resizeToContentCBCheck(t) {
+    g.resizeToContentCB ? g.resizeToContentCB(t) : this.resizeToContent(t);
+  }
+  /**
+   * Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging.
+   * The rotation swaps the w/h dimensions and adjusts min/max constraints accordingly.
+   *
+   * @param els widget element(s) or selector to rotate
+   * @param relative optional pixel coordinate relative to upper/left corner to rotate around (keeps that cell under cursor)
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Rotate a specific widget
+   * grid.rotate('.my-widget');
+   *
+   * // Rotate with relative positioning during drag
+   * grid.rotate(widget, { left: 50, top: 30 });
+   */
+  rotate(t, e) {
+    return g.getElements(t).forEach((i) => {
+      const s = i.gridstackNode;
+      if (!h.canBeRotated(s))
+        return;
+      const r = { w: s.h, h: s.w, minH: s.minW, minW: s.minH, maxH: s.maxW, maxW: s.maxH };
+      if (e) {
+        const o = e.left > 0 ? Math.floor(e.left / this.cellWidth()) : 0, d = e.top > 0 ? Math.floor(e.top / this.opts.cellHeight) : 0;
+        r.x = s.x + o - (s.h - (d + 1)), r.y = s.y + d - o;
+      }
+      Object.keys(r).forEach((o) => {
+        r[o] === void 0 && delete r[o];
+      });
+      const n = s._orig;
+      this.update(i, r), s._orig = n;
+    }), this;
+  }
+  /**
+   * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
+   * Supports CSS string format of 1, 2, or 4 values or a single number.
+   *
+   * @param value margin value - can be:
+   *   - Single number: `10` (applies to all sides)
+   *   - Two values: `'10px 20px'` (top/bottom, left/right)
+   *   - Four values: `'10px 20px 5px 15px'` (top, right, bottom, left)
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * grid.margin(10);           // 10px all sides
+   * grid.margin('10px 20px');  // 10px top/bottom, 20px left/right
+   * grid.margin('5px 10px 15px 20px'); // Different for each side
+   */
+  margin(t) {
+    if (!(typeof t == "string" && t.split(" ").length > 1)) {
+      const i = h.parseHeight(t);
+      if (this.opts.marginUnit === i.unit && this.opts.margin === i.h)
+        return;
+    }
+    return this.opts.margin = t, this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = void 0, this._initMargin(), this;
+  }
+  /**
+   * Returns the current margin value as a number (undefined if the 4 sides don't match).
+   * This only returns a number if all sides have the same margin value.
+   *
+   * @returns the margin value in pixels, or undefined if sides have different values
+   *
+   * @example
+   * const margin = grid.getMargin();
+   * if (margin !== undefined) {
+   *   console.log('Uniform margin:', margin, 'px');
+   * } else {
+   *   console.log('Margins are different on different sides');
+   * }
+   */
+  getMargin() {
+    return this.opts.margin;
+  }
+  /**
+   * Returns true if the height of the grid will be less than the vertical
+   * constraint. Always returns true if grid doesn't have height constraint.
+   * @param node contains x,y,w,h,auto-position options
+   *
+   * @example
+   * if (grid.willItFit(newWidget)) {
+   *   grid.addWidget(newWidget);
+   * } else {
+   *   alert('Not enough free space to place the widget');
+   * }
+   */
+  willItFit(t) {
+    return this.engine.willItFit(t);
+  }
+  /** @internal */
+  _triggerChangeEvent() {
+    if (this.engine.batchMode)
+      return this;
+    const t = this.engine.getDirtyNodes(!0);
+    return t && t.length && (this._ignoreLayoutsNodeChange || this.engine.layoutsNodesChange(t), this._triggerEvent("change", t)), this.engine.saveInitial(), this;
+  }
+  /** @internal */
+  _triggerAddEvent() {
+    if (this.engine.batchMode)
+      return this;
+    if (this.engine.addedNodes?.length) {
+      this._ignoreLayoutsNodeChange || this.engine.layoutsNodesChange(this.engine.addedNodes), this.engine.addedNodes.forEach((e) => {
+        delete e._dirty;
+      });
+      const t = [...this.engine.addedNodes];
+      this.engine.addedNodes = [], this._triggerEvent("added", t);
+    }
+    return this;
+  }
+  /** @internal */
+  _triggerRemoveEvent() {
+    if (this.engine.batchMode)
+      return this;
+    if (this.engine.removedNodes?.length) {
+      const t = [...this.engine.removedNodes];
+      this.engine.removedNodes = [], this._triggerEvent("removed", t);
+    }
+    return this;
+  }
+  /** @internal */
+  _triggerEvent(t, e) {
+    const i = e ? new CustomEvent(t, { bubbles: !1, detail: e }) : new Event(t);
+    let s = this;
+    for (; s.parentGridNode; )
+      s = s.parentGridNode.grid;
+    return s.el.dispatchEvent(i), this;
+  }
+  /** @internal */
+  _updateContainerHeight() {
+    if (!this.engine || this.engine.batchMode)
+      return this;
+    const t = this.parentGridNode;
+    let e = this.getRow() + this._extraDragRow;
+    const i = this.opts.cellHeight, s = this.opts.cellHeightUnit;
+    if (!i)
+      return this;
+    if (!t && !this.opts.minRow) {
+      const r = h.parseHeight(getComputedStyle(this.el).minHeight);
+      if (r.h > 0 && r.unit === s) {
+        const n = Math.floor(r.h / i);
+        e < n && (e = n);
+      }
+    }
+    return this.el.setAttribute("gs-current-row", String(e)), this.el.style.removeProperty("min-height"), this.el.style.removeProperty("height"), e && (this.el.style[t ? "minHeight" : "height"] = e * i + s), t && h.shouldSizeToContent(t) && t.grid.resizeToContentCBCheck(t.el), this;
+  }
+  /** @internal */
+  _prepareElement(t, e = !1, i) {
+    i = i || this._readAttr(t), t.gridstackNode = i, i.el = t, i.grid = this, i = this.engine.addNode(i, e), this._writeAttr(t, i), t.classList.add(v.itemClass, this.opts.itemClass);
+    const s = h.shouldSizeToContent(i);
+    return s ? t.classList.add("size-to-content") : t.classList.remove("size-to-content"), s && this.resizeToContentCheck(!1, i), h.lazyLoad(i) || this.prepareDragDrop(i.el), this;
+  }
+  /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */
+  _writePosAttr(t, e) {
+    if (!e._moving && !e._resizing || this._placeholder === t) {
+      const i = this.opts.rtl ? "right" : "left";
+      t.style.top = e.y ? e.y === 1 ? "var(--gs-cell-height)" : `calc(${e.y} * var(--gs-cell-height))` : null, t.style[i] = e.x ? e.x === 1 ? "var(--gs-column-width)" : `calc(${e.x} * var(--gs-column-width))` : null, t.style.width = e.w > 1 ? `calc(${e.w} * var(--gs-column-width))` : null, t.style.height = e.h > 1 ? `calc(${e.h} * var(--gs-cell-height))` : null;
+    }
+    return t.setAttribute("gs-x", String(e.x)), t.setAttribute("gs-y", String(e.y)), e.w > 1 ? t.setAttribute("gs-w", String(e.w)) : t.removeAttribute("gs-w"), e.h > 1 ? t.setAttribute("gs-h", String(e.h)) : t.removeAttribute("gs-h"), this;
+  }
+  /** @internal call to write any default attributes back to element */
+  _writeAttr(t, e) {
+    if (!e)
+      return this;
+    this._writePosAttr(t, e);
+    const i = {
+      // autoPosition: 'gs-auto-position', // no need to write out as already in node and doesn't affect CSS
+      noResize: "gs-no-resize",
+      noMove: "gs-no-move",
+      locked: "gs-locked",
+      id: "gs-id",
+      sizeToContent: "gs-size-to-content"
+    };
+    for (const s in i)
+      e[s] ? t.setAttribute(i[s], String(e[s])) : t.removeAttribute(i[s]);
+    return this;
+  }
+  /** @internal call to read any default attributes from element */
+  _readAttr(t, e = !0) {
+    const i = {};
+    i.x = h.toNumber(t.getAttribute("gs-x")), i.y = h.toNumber(t.getAttribute("gs-y")), i.w = h.toNumber(t.getAttribute("gs-w")), i.h = h.toNumber(t.getAttribute("gs-h")), i.autoPosition = h.toBool(t.getAttribute("gs-auto-position")), i.noResize = h.toBool(t.getAttribute("gs-no-resize")), i.noMove = h.toBool(t.getAttribute("gs-no-move")), i.locked = h.toBool(t.getAttribute("gs-locked"));
+    const s = t.getAttribute("gs-size-to-content");
+    s && (s === "true" || s === "false" ? i.sizeToContent = h.toBool(s) : i.sizeToContent = parseInt(s, 10)), i.id = t.getAttribute("gs-id"), i.maxW = h.toNumber(t.getAttribute("gs-max-w")), i.minW = h.toNumber(t.getAttribute("gs-min-w")), i.maxH = h.toNumber(t.getAttribute("gs-max-h")), i.minH = h.toNumber(t.getAttribute("gs-min-h")), e && (i.w === 1 && t.removeAttribute("gs-w"), i.h === 1 && t.removeAttribute("gs-h"), i.maxW && t.removeAttribute("gs-max-w"), i.minW && t.removeAttribute("gs-min-w"), i.maxH && t.removeAttribute("gs-max-h"), i.minH && t.removeAttribute("gs-min-h"));
+    for (const r in i) {
+      if (!i.hasOwnProperty(r))
+        return;
+      !i[r] && i[r] !== 0 && r !== "sizeToContent" && delete i[r];
+    }
+    return i;
+  }
+  /** @internal */
+  _setStaticClass() {
+    const t = ["grid-stack-static"];
+    return this.opts.staticGrid ? (this.el.classList.add(...t), this.el.setAttribute("gs-static", "true")) : (this.el.classList.remove(...t), this.el.removeAttribute("gs-static")), this;
+  }
+  /**
+   * called when we are being resized - check if the one Column Mode needs to be turned on/off
+   * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+   * or `sizeToContent` gridItem options.
+   */
+  onResize(t = this.el?.clientWidth) {
+    if (!t || this.prevWidth === t)
+      return;
+    this.prevWidth = t, this.batchUpdate();
+    let e = !1;
+    return this._autoColumn && this.parentGridNode ? this.opts.column !== this.parentGridNode.w && (this.column(this.parentGridNode.w, this.opts.layout || "list"), e = !0) : e = this.checkDynamicColumn(), this._isAutoCellHeight && this.cellHeight(), this.engine.nodes.forEach((i) => {
+      i.subGrid && i.subGrid.onResize();
+    }), this._skipInitialResize || this.resizeToContentCheck(e), delete this._skipInitialResize, this.batchUpdate(!1), this;
+  }
+  /** resizes content for given node (or all) if shouldSizeToContent() is true */
+  resizeToContentCheck(t = !1, e = void 0) {
+    if (this.engine) {
+      if (t && this.hasAnimationCSS())
+        return setTimeout(() => this.resizeToContentCheck(!1, e), this.animationDelay);
+      if (e)
+        h.shouldSizeToContent(e) && this.resizeToContentCBCheck(e.el);
+      else if (this.engine.nodes.some((i) => h.shouldSizeToContent(i))) {
+        const i = [...this.engine.nodes];
+        this.batchUpdate(), i.forEach((s) => {
+          h.shouldSizeToContent(s) && this.resizeToContentCBCheck(s.el);
+        }), this._ignoreLayoutsNodeChange = !0, this.batchUpdate(!1), this._ignoreLayoutsNodeChange = !1;
+      }
+      this._gsEventHandler.resizecontent && this._gsEventHandler.resizecontent(null, e ? [e] : this.engine.nodes);
+    }
+  }
+  /** add or remove the grid element size event handler */
+  _updateResizeEvent(t = !1) {
+    const e = !this.parentGridNode && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts || this.engine.nodes.find((i) => i.sizeToContent));
+    return !t && e && !this.resizeObserver ? (this._sizeThrottle = h.throttle(() => this.onResize(), this.opts.cellHeightThrottle), this.resizeObserver = new ResizeObserver(() => this._sizeThrottle()), this.resizeObserver.observe(this.el), this._skipInitialResize = !0) : (t || !e) && this.resizeObserver && (this.resizeObserver.disconnect(), delete this.resizeObserver, delete this._sizeThrottle), this;
+  }
+  /** @internal convert a potential selector into actual element */
+  static getElement(t = ".grid-stack-item") {
+    return h.getElement(t);
+  }
+  /** @internal */
+  static getElements(t = ".grid-stack-item") {
+    return h.getElements(t);
+  }
+  /** @internal */
+  static getGridElement(t) {
+    return g.getElement(t);
+  }
+  /** @internal */
+  static getGridElements(t) {
+    return h.getElements(t);
+  }
+  /** @internal initialize margin top/bottom/left/right and units */
+  _initMargin() {
+    let t, e = 0, i = [];
+    typeof this.opts.margin == "string" && (i = this.opts.margin.split(" ")), i.length === 2 ? (this.opts.marginTop = this.opts.marginBottom = i[0], this.opts.marginLeft = this.opts.marginRight = i[1]) : i.length === 4 ? (this.opts.marginTop = i[0], this.opts.marginRight = i[1], this.opts.marginBottom = i[2], this.opts.marginLeft = i[3]) : (t = h.parseHeight(this.opts.margin), this.opts.marginUnit = t.unit, e = this.opts.margin = t.h), ["marginTop", "marginRight", "marginBottom", "marginLeft"].forEach((n) => {
+      this.opts[n] === void 0 ? this.opts[n] = e : (t = h.parseHeight(this.opts[n]), this.opts[n] = t.h, delete this.opts.margin);
+    }), this.opts.marginUnit = t.unit, this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight && (this.opts.margin = this.opts.marginTop);
+    const r = this.el.style;
+    return r.setProperty("--gs-item-margin-top", `${this.opts.marginTop}${this.opts.marginUnit}`), r.setProperty("--gs-item-margin-bottom", `${this.opts.marginBottom}${this.opts.marginUnit}`), r.setProperty("--gs-item-margin-right", `${this.opts.marginRight}${this.opts.marginUnit}`), r.setProperty("--gs-item-margin-left", `${this.opts.marginLeft}${this.opts.marginUnit}`), this;
+  }
+  /* ===========================================================================================
+   * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts
+   * but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
+   * ===========================================================================================
+   */
+  /**
+   * Get the global drag & drop implementation instance.
+   * This provides access to the underlying drag & drop functionality.
+   *
+   * @returns the DDGridStack instance used for drag & drop operations
+   *
+   * @example
+   * const dd = GridStack.getDD();
+   * // Access drag & drop functionality
+   */
+  static getDD() {
+    return y;
+  }
+  /**
+   * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+   * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
+   * is dynamically create and needs to be set later.
+   * @param dragIn string selector (ex: '.sidebar-item') or list of dom elements
+   * @param dragInOptions options - see DDDragOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
+   * @param widgets GridStackWidget def to assign to each element which defines what to create on drop
+   * @param root optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
+   */
+  static setupDragIn(t, e, i, s = document) {
+    e?.pause !== void 0 && (f.pauseDrag = e.pause), e = { appendTo: "body", helper: "clone", ...e || {} }, (typeof t == "string" ? h.getElements(t, s) : t).forEach((n, o) => {
+      y.isDraggable(n) || y.dragIn(n, e), i?.[o] && (n.gridstackNode = i[o]);
+    });
+  }
+  /**
+   * Enables/Disables dragging by the user for specific grid elements.
+   * For all items and future items, use enableMove() instead. No-op for static grids.
+   *
+   * Note: If you want to prevent an item from moving due to being pushed around by another
+   * during collision, use the 'locked' property instead.
+   *
+   * @param els widget element(s) or selector to modify
+   * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Make specific widgets draggable
+   * grid.movable('.my-widget', true);
+   *
+   * // Disable dragging for specific widgets
+   * grid.movable('#fixed-widget', false);
+   */
+  movable(t, e) {
+    return this.opts.staticGrid ? this : (g.getElements(t).forEach((i) => {
+      const s = i.gridstackNode;
+      s && (e ? delete s.noMove : s.noMove = !0, this.prepareDragDrop(s.el));
+    }), this);
+  }
+  /**
+   * Enables/Disables user resizing for specific grid elements.
+   * For all items and future items, use enableResize() instead. No-op for static grids.
+   *
+   * @param els widget element(s) or selector to modify
+   * @param val if true widget will be resizable, assuming the parent grid isn't noResize or static
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Make specific widgets resizable
+   * grid.resizable('.my-widget', true);
+   *
+   * // Disable resizing for specific widgets
+   * grid.resizable('#fixed-size-widget', false);
+   */
+  resizable(t, e) {
+    return this.opts.staticGrid ? this : (g.getElements(t).forEach((i) => {
+      const s = i.gridstackNode;
+      s && (e ? delete s.noResize : s.noResize = !0, this.prepareDragDrop(s.el));
+    }), this);
+  }
+  /**
+   * Temporarily disables widgets moving/resizing.
+   * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
+   *
+   * Note: This is a no-op for static grids.
+   *
+   * This is a shortcut for:
+   * ```typescript
+   * grid.enableMove(false);
+   * grid.enableResize(false);
+   * ```
+   *
+   * @param recurse if true (default), sub-grids also get updated
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Disable all interactions
+   * grid.disable();
+   *
+   * // Disable only this grid, not sub-grids
+   * grid.disable(false);
+   */
+  disable(t = !0) {
+    if (!this.opts.staticGrid)
+      return this.enableMove(!1, t), this.enableResize(!1, t), this._triggerEvent("disable"), this;
+  }
+  /**
+   * Re-enables widgets moving/resizing - see disable().
+   * Note: This is a no-op for static grids.
+   *
+   * This is a shortcut for:
+   * ```typescript
+   * grid.enableMove(true);
+   * grid.enableResize(true);
+   * ```
+   *
+   * @param recurse if true (default), sub-grids also get updated
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Re-enable all interactions
+   * grid.enable();
+   *
+   * // Enable only this grid, not sub-grids
+   * grid.enable(false);
+   */
+  enable(t = !0) {
+    if (!this.opts.staticGrid)
+      return this.enableMove(!0, t), this.enableResize(!0, t), this._triggerEvent("enable"), this;
+  }
+  /**
+   * Enables/disables widget moving for all widgets. No-op for static grids.
+   * Note: locally defined items (with noMove property) still override this setting.
+   *
+   * @param doEnable if true widgets will be movable, if false moving is disabled
+   * @param recurse if true (default), sub-grids also get updated
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Enable moving for all widgets
+   * grid.enableMove(true);
+   *
+   * // Disable moving for all widgets
+   * grid.enableMove(false);
+   *
+   * // Enable only this grid, not sub-grids
+   * grid.enableMove(true, false);
+   */
+  enableMove(t, e = !0) {
+    return this.opts.staticGrid ? this : (t ? delete this.opts.disableDrag : this.opts.disableDrag = !0, this.engine.nodes.forEach((i) => {
+      this.prepareDragDrop(i.el), i.subGrid && e && i.subGrid.enableMove(t, e);
+    }), this);
+  }
+  /**
+   * Enables/disables widget resizing for all widgets. No-op for static grids.
+   * Note: locally defined items (with noResize property) still override this setting.
+   *
+   * @param doEnable if true widgets will be resizable, if false resizing is disabled
+   * @param recurse if true (default), sub-grids also get updated
+   * @returns the grid instance for chaining
+   *
+   * @example
+   * // Enable resizing for all widgets
+   * grid.enableResize(true);
+   *
+   * // Disable resizing for all widgets
+   * grid.enableResize(false);
+   *
+   * // Enable only this grid, not sub-grids
+   * grid.enableResize(true, false);
+   */
+  enableResize(t, e = !0) {
+    return this.opts.staticGrid ? this : (t ? delete this.opts.disableResize : this.opts.disableResize = !0, this.engine.nodes.forEach((i) => {
+      this.prepareDragDrop(i.el), i.subGrid && e && i.subGrid.enableResize(t, e);
+    }), this);
+  }
+  /** @internal call when drag (and drop) needs to be cancelled (Esc key) */
+  cancelDrag() {
+    const t = this._placeholder?.gridstackNode;
+    t && (t._isExternal ? (t._isAboutToRemove = !0, this.engine.removeNode(t)) : t._isAboutToRemove && g._itemRemoving(t.el, !1), this.engine.restoreInitial());
+  }
+  /** @internal removes any drag&drop present (called during destroy) */
+  _removeDD(t) {
+    return y.draggable(t, "destroy").resizable(t, "destroy"), t.gridstackNode && delete t.gridstackNode._initDD, delete t.ddElement, this;
+  }
+  /** @internal called to add drag over to support widgets being added externally */
+  _setupAcceptWidget() {
+    if (this.opts.staticGrid || !this.opts.acceptWidgets && !this.opts.removable)
+      return y.droppable(this.el, "destroy"), this;
+    let t, e;
+    const i = (s, r, n) => {
+      n = n || r;
+      const o = n.gridstackNode;
+      if (!o)
+        return;
+      if (!o.grid?.el) {
+        n.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
+        const c = n.getBoundingClientRect();
+        n.style.left = c.x + (this.dragTransform.xScale - 1) * (s.clientX - c.x) / this.dragTransform.xScale + "px", n.style.top = c.y + (this.dragTransform.yScale - 1) * (s.clientY - c.y) / this.dragTransform.yScale + "px", n.style.transformOrigin = "0px 0px";
+      }
+      let { top: d, left: l } = n.getBoundingClientRect();
+      const a = this.el.getBoundingClientRect();
+      l -= a.left, d -= a.top;
+      const u = {
+        position: {
+          top: d * this.dragTransform.xScale,
+          left: l * this.dragTransform.yScale
+        }
+      };
+      if (o._temporaryRemoved) {
+        if (o.x = Math.max(0, Math.round(l / e)), o.y = Math.max(0, Math.round(d / t)), delete o.autoPosition, this.engine.nodeBoundFix(o), !this.engine.willItFit(o)) {
+          if (o.autoPosition = !0, !this.engine.willItFit(o)) {
+            y.off(r, "drag");
+            return;
+          }
+          o._willFitPos && (h.copyPos(o, o._willFitPos), delete o._willFitPos);
+        }
+        this._onStartMoving(n, s, u, o, e, t);
+      } else
+        this._dragOrResize(n, s, u, o, e, t);
+    };
+    return y.droppable(this.el, {
+      accept: (s) => {
+        const r = s.gridstackNode || this._readAttr(s, !1);
+        if (r?.grid === this)
+          return !0;
+        if (!this.opts.acceptWidgets)
+          return !1;
+        let n = !0;
+        if (typeof this.opts.acceptWidgets == "function")
+          n = this.opts.acceptWidgets(s);
+        else {
+          const o = this.opts.acceptWidgets === !0 ? ".grid-stack-item" : this.opts.acceptWidgets;
+          n = s.matches(o);
+        }
+        if (n && r && this.opts.maxRow) {
+          const o = { w: r.w, h: r.h, minW: r.minW, minH: r.minH };
+          n = this.engine.willItFit(o);
+        }
+        return n;
+      }
+    }).on(this.el, "dropover", (s, r, n) => {
+      let o = n?.gridstackNode || r.gridstackNode;
+      if (o?.grid === this && !o._temporaryRemoved)
+        return !1;
+      if (o?._sidebarOrig && (o.w = o._sidebarOrig.w, o.h = o._sidebarOrig.h), o?.grid && o.grid !== this && !o._temporaryRemoved && o.grid._leave(r, n), n = n || r, e = this.cellWidth(), t = this.getCellHeight(!0), !o) {
+        const a = n.getAttribute("data-gs-widget") || n.getAttribute("gridstacknode");
+        if (a) {
+          try {
+            o = JSON.parse(a);
+          } catch {
+            console.error("Gridstack dropover: Bad JSON format: ", a);
+          }
+          n.removeAttribute("data-gs-widget"), n.removeAttribute("gridstacknode");
+        }
+        o || (o = this._readAttr(n)), o._sidebarOrig = { w: o.w, h: o.h };
+      }
+      o.grid || (o.el || (o = { ...o }), o._isExternal = !0, n.gridstackNode = o);
+      const d = o.w || Math.round(n.offsetWidth / e) || 1, l = o.h || Math.round(n.offsetHeight / t) || 1;
+      return o.grid && o.grid !== this ? (r._gridstackNodeOrig || (r._gridstackNodeOrig = o), r.gridstackNode = o = { ...o, w: d, h: l, grid: this }, delete o.x, delete o.y, this.engine.cleanupNode(o).nodeBoundFix(o), o._initDD = o._isExternal = // DOM needs to be re-parented on a drop
+      o._temporaryRemoved = !0) : (o.w = d, o.h = l, o._temporaryRemoved = !0), g._itemRemoving(o.el, !1), y.on(r, "drag", i), i(s, r, n), !1;
+    }).on(this.el, "dropout", (s, r, n) => {
+      const o = n?.gridstackNode || r.gridstackNode;
+      return o && (!o.grid || o.grid === this) && (this._leave(r, n), this._isTemp && this.removeAsSubGrid(o)), !1;
+    }).on(this.el, "drop", (s, r, n) => {
+      const o = n?.gridstackNode || r.gridstackNode;
+      if (o?.grid === this && !o._isExternal)
+        return !1;
+      const d = !!this.placeholder.parentElement, l = r !== n;
+      this.placeholder.remove(), delete this.placeholder.gridstackNode, d && this.opts.animate && (this.setAnimation(!1), this.setAnimation(!0, !0));
+      const a = r._gridstackNodeOrig;
+      if (delete r._gridstackNodeOrig, d && a?.grid && a.grid !== this) {
+        const c = a.grid;
+        c.engine.removeNodeFromLayoutCache(a), c.engine.removedNodes.push(a), c._triggerRemoveEvent()._triggerChangeEvent(), c.parentGridNode && !c.engine.nodes.length && c.opts.subGridDynamic && c.removeAsSubGrid();
+      }
+      if (!o || (d && (this.engine.cleanupNode(o), o.grid = this), delete o.grid?._isTemp, y.off(r, "drag"), n !== r ? (n.remove(), r = n) : r.remove(), this._removeDD(r), !d))
+        return !1;
+      const u = o.subGrid?.el?.gridstack;
+      return h.copyPos(o, this._readAttr(this.placeholder)), h.removePositioningStyles(r), l && (o.content || o.subGridOpts || g.addRemoveCB) ? (delete o.el, r = this.addWidget(o)) : (this._prepareElement(r, !0, o), this.el.appendChild(r), this.resizeToContentCheck(!1, o), u && (u.parentGridNode = o), this._updateContainerHeight()), this.engine.addedNodes.push(o), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, a && a.grid ? a : void 0, o), !1;
+    }), this;
+  }
+  /** @internal mark item for removal */
+  static _itemRemoving(t, e) {
+    if (!t)
+      return;
+    const i = t ? t.gridstackNode : void 0;
+    !i?.grid || t.classList.contains(i.grid.opts.removableOptions.decline) || (e ? i._isAboutToRemove = !0 : delete i._isAboutToRemove, e ? t.classList.add("grid-stack-item-removing") : t.classList.remove("grid-stack-item-removing"));
+  }
+  /** @internal called to setup a trash drop zone if the user specifies it */
+  _setupRemoveDrop() {
+    if (typeof this.opts.removable != "string")
+      return this;
+    const t = document.querySelector(this.opts.removable);
+    return t ? (!this.opts.staticGrid && !y.isDroppable(t) && y.droppable(t, this.opts.removableOptions).on(t, "dropover", (e, i) => g._itemRemoving(i, !0)).on(t, "dropout", (e, i) => g._itemRemoving(i, !1)), this) : this;
+  }
+  /**
+   * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
+   * @param el GridItemHTMLElement of the widget
+   * @param [force=false]
+   * */
+  prepareDragDrop(t, e = !1) {
+    const i = t?.gridstackNode;
+    if (!i)
+      return;
+    const s = i.noMove || this.opts.disableDrag, r = i.noResize || this.opts.disableResize, n = this.opts.staticGrid || s && r;
+    if ((e || n) && (i._initDD && (this._removeDD(t), delete i._initDD), n))
+      return t.classList.add("ui-draggable-disabled", "ui-resizable-disabled"), this;
+    if (!i._initDD) {
+      let o, d;
+      const l = (c, p) => {
+        this.triggerEvent(c, c.target), o = this.cellWidth(), d = this.getCellHeight(!0), this._onStartMoving(t, c, p, i, o, d);
+      }, a = (c, p) => {
+        this._dragOrResize(t, c, p, i, o, d);
+      }, u = (c) => {
+        this.placeholder.remove(), delete this.placeholder.gridstackNode, delete i._moving, delete i._resizing, delete i._event, delete i._lastTried;
+        const p = i.w !== i._orig.w, _ = c.target;
+        if (!(!_.gridstackNode || _.gridstackNode.grid !== this)) {
+          if (i.el = _, i._isAboutToRemove) {
+            const E = t.gridstackNode.grid;
+            E._gsEventHandler[c.type] && E._gsEventHandler[c.type](c, _), E.engine.nodes.push(i), E.removeWidget(t, !0, !0);
+          } else
+            h.removePositioningStyles(_), i._temporaryRemoved ? (this._writePosAttr(_, i), this.engine.addNode(i)) : this._writePosAttr(_, i), this.triggerEvent(c, _);
+          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), c.type === "resizestop" && (Number.isInteger(i.sizeToContent) && (i.sizeToContent = i.h), this.resizeToContentCheck(p, i));
+        }
+      };
+      y.draggable(t, {
+        start: l,
+        stop: u,
+        drag: a,
+        rtl: this.opts.rtl
+      }).resizable(t, {
+        start: l,
+        stop: u,
+        resize: a,
+        rtl: this.opts.rtl
+      }), i._initDD = !0;
+    }
+    return y.draggable(t, s ? "disable" : "enable").resizable(t, r ? "disable" : "enable"), this;
+  }
+  /** @internal handles actual drag/resize start */
+  _onStartMoving(t, e, i, s, r, n) {
+    if (this.engine.cleanNodes().beginUpdate(s), this._writePosAttr(this.placeholder, s), this.el.appendChild(this.placeholder), this.placeholder.gridstackNode = s, s.grid?.el)
+      this.dragTransform = h.getValuesFromTransformedElement(t);
+    else if (this.placeholder && this.placeholder.closest(".grid-stack")) {
+      const o = this.placeholder.closest(".grid-stack");
+      this.dragTransform = h.getValuesFromTransformedElement(o);
+    } else
+      this.dragTransform = {
+        xScale: 1,
+        xOffset: 0,
+        yScale: 1,
+        yOffset: 0
+      };
+    if (s.el = this.placeholder, s._lastUiPosition = i.position, s._prevYPix = i.position.top, s._moving = e.type === "dragstart", s._resizing = e.type === "resizestart", delete s._lastTried, e.type === "dropover" && s._temporaryRemoved && (this.engine.addNode(s), s._moving = !0), this.engine.cacheRects(r, n, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), e.type === "resizestart") {
+      const o = this.getColumn() - s.x, d = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
+      y.resizable(t, "option", "minWidth", r * Math.min(s.minW || 1, o)).resizable(t, "option", "minHeight", n * Math.min(s.minH || 1, d)).resizable(t, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, o)).resizable(t, "option", "maxWidthMoveLeft", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, s.x + s.w)).resizable(t, "option", "maxHeight", n * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, d)).resizable(t, "option", "maxHeightMoveUp", n * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
+    }
+  }
+  /** @internal handles actual drag/resize */
+  _dragOrResize(t, e, i, s, r, n) {
+    const o = { ...s._orig };
+    let d, l = this.opts.marginLeft, a = this.opts.marginRight, u = this.opts.marginTop, c = this.opts.marginBottom;
+    const p = Math.round(n * 0.1), _ = Math.round(r * 0.1);
+    if (l = Math.min(l, _), a = Math.min(a, _), u = Math.min(u, p), c = Math.min(c, p), e.type === "drag") {
+      if (s._temporaryRemoved)
+        return;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && f.dragElement?.updateScrollPosition(this.el);
+      const C = i.position.left + (i.position.left > s._lastUiPosition.left ? -a : l), G = i.position.top + (i.position.top > s._lastUiPosition.top ? -c : u);
+      o.x = Math.round(C / r), o.y = Math.round(G / n);
+      const I = this._extraDragRow;
+      if (this.engine.collide(s, o)) {
+        const A = this.getRow();
+        let L = Math.max(0, o.y + s.h - A);
+        this.opts.maxRow && A + L > this.opts.maxRow && (L = Math.max(0, this.opts.maxRow - A)), this._extraDragRow = L;
+      } else
+        this._extraDragRow = 0;
+      if (this._extraDragRow !== I && this._updateContainerHeight(), s.x === o.x && s.y === o.y)
+        return;
+    } else if (e.type === "resize") {
+      if (o.x < 0 || (h.updateScrollResize(e, t, n), o.w = Math.round((i.size.width - l) / r), o.h = Math.round((i.size.height - u) / n), s.w === o.w && s.h === o.h) || s._lastTried && s._lastTried.w === o.w && s._lastTried.h === o.h)
+        return;
+      if (e.hasMovedX) {
+        const C = i.position.left + l;
+        o.x = Math.round(C / r);
+      }
+      if (e.hasMovedY) {
+        const C = i.position.top + u;
+        o.y = Math.round(C / n);
+      }
+      d = !0;
+    }
+    s._event = e, s._lastTried = o;
+    const E = {
+      x: i.position.left + l,
+      y: i.position.top + u,
+      w: (i.size ? i.size.width : s.w * r) - l - a,
+      h: (i.size ? i.size.height : s.h * n) - u - c
+    };
+    if (this.engine.moveNodeCheck(s, { ...o, cellWidth: r, cellHeight: n, rect: E, resizing: d })) {
+      s._lastUiPosition = i.position, this.engine.cacheRects(r, n, u, a, c, l), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
+      const C = e.target;
+      s._sidebarOrig || this._writePosAttr(C, s), this.triggerEvent(e, C);
+    }
+  }
+  /** call given event callback on our main top-most grid (if we're nested) */
+  triggerEvent(t, e) {
+    let i = this;
+    for (; i.parentGridNode; )
+      i = i.parentGridNode.grid;
+    i._gsEventHandler[t.type] && i._gsEventHandler[t.type](t, e);
+  }
+  /** @internal called when item leaving our area by either cursor dropout event
+   * or shape is outside our boundaries. remove it from us, and mark temporary if this was
+   * our item to start with else restore prev node values from prev grid it came from.
+   */
+  _leave(t, e) {
+    e = e || t;
+    const i = e.gridstackNode;
+    if (!i || (e.style.transform = e.style.transformOrigin = null, y.off(t, "drag"), i._temporaryRemoved))
+      return;
+    i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && e ? e : t;
+    const s = i._sidebarOrig;
+    i._isExternal && this.engine.cleanupNode(i), i._sidebarOrig = s, this.opts.removable === !0 && g._itemRemoving(t, !0), t._gridstackNodeOrig ? (t.gridstackNode = t._gridstackNodeOrig, delete t._gridstackNodeOrig) : i._isExternal && this.engine.restoreInitial();
+  }
+}
+g.renderCB = (m, t) => {
+  m && t?.content && (m.textContent = t.content);
+};
+g.resizeToContentParent = ".grid-stack-item-content";
+g.Utils = h;
+g.Engine = x;
+g.GDRev = "12.6.0";
+export {
+  g as G
+};