layerpro 3.1.0 → 3.1.1

package/README.md

@@ -66,7 +66,17 @@ Import LayerPro once in your app entry point:
 import "layerpro";
 ```
 
-That's it. Now you have `alert()`, `confirm()`, `prompt()`, and `message()` globally.
+That's it. Now you have `alert()`, `confirm()`, `prompt()`, `message()`, and `popup()` globally available.
+
+The `popup` alias is a shorthand for `layerpro.popup`:
+
+```javascript
+import "layerpro";
+
+// Both work identically:
+layerpro.popup.open({ id: 'myPopup', body: 'Hello World' });
+popup.open({ id: 'myPopup', body: 'Hello World' });
+```
 
 ---
 
@@ -90,8 +100,23 @@ message("Operation complete!");
 
 ### Custom Popups
 
+You can use either `layerpro.popup.open(...)` or the shorthand `popup.open(...)`:
+
 ```javascript
-layerpro.popup.open({
+popup.open({
+  id: 'myModal',
+  name: 'My Modal',
+  body: '<p>Your content here</p>',
+  width: 450,
+  height: 350,
+  buttons: {
+    confirm: { text: "OK", cb: () => {} },
+    cancel: { text: "Cancel", cb: () => {} }
+  }
+});
+
+// Or using the global alias:
+popup.open({
   id: 'myModal',
   name: 'My Modal',
   body: '<p>Your content here</p>',
@@ -109,7 +134,7 @@ layerpro.popup.open({
 In a React environment, you can pass React components directly:
 
 ```jsx
-layerpro.popup.open({
+popup.open({
   id: 'reactModal',
   name: 'React Modal',
   body: <MyComponent />,   // React element
@@ -226,15 +251,15 @@ message("Done!");                   // LayerPro message
 
 | Method | Description |
 |--------|-------------|
-| `layerpro.popup.open(props)` | Open a modal; returns the props. Re-opens a same-id window to front + refreshes body |
-| `layerpro.popup.close(id)` | Close (and unmount) a modal |
-| `layerpro.popup.center(id, offset?)` | Center a modal in the viewport; optional pixel offset |
-| `layerpro.popup.maximize(props)` | Toggle maximize (pure CSS) |
-| `layerpro.popup.iconize(id)` | Toggle minimize to the dock |
-| `layerpro.popup.index(id)` | Bring a modal to the front (select) |
-| `layerpro.popup.zIndex()` | Get the next z-index counter value |
-| `layerpro.popup.movable(props)` | Enable dragging |
-| `layerpro.popup.resizable(props)` | Enable resizing |
+| `popup.open(props)` | Open a modal; returns the props. Re-opens a same-id window to front + refreshes body. |
+| `popup.close(id)` | Close (and unmount) a modal. |
+| `popup.center(id, offset?)` | Center a modal in the viewport; optional pixel offset |
+| `popup.maximize(props)` | Toggle maximize (pure CSS) |
+| `popup.iconize(id)` | Toggle minimize to the dock |
+| `popup.index(id)` | Bring a modal to the front (select) |
+| `popup.zIndex()` | Get the next z-index counter value |
+| `popup.movable(props)` | Enable dragging |
+| `popup.resizable(props)` | Enable resizing |
 | `layerpro.noGlobals()` | Restore native `alert`/`confirm`/`prompt`; remove `message` |
 
 ---
@@ -271,13 +296,13 @@ properties, so theming needs no `!important` or `[class^=popup_…]` selectors:
 
 | Method | Description |
 |--------|-------------|
-| `layerpro.popup.open(props)` | Open a modal |
-| `layerpro.popup.close(id)` | Close a modal |
-| `layerpro.popup.center(id)` | Center modal |
-| `layerpro.popup.maximize(id)` | Maximize modal |
-| `layerpro.popup.iconize(id)` | Minimize to dock |
-| `layerpro.popup.movable(id)` | Enable drag |
-| `layerpro.popup.resizable(id)` | Enable resize |
+| `popup.open(props)` | Open a modal |
+| `popup.close(id)` | Close a modal |
+| `popup.center(id)` | Center modal |
+| `popup.maximize(id)` | Maximize modal |
+| `popup.iconize(id)` | Minimize to dock |
+| `popup.movable(id)` | Enable drag |
+| `popup.resizable(id)` | Enable resize |
 
 ---
 

package/index.cjs

@@ -34,7 +34,7 @@ Object.defineProperty(i, "credits", {
     configurable: !1
 });
 
-var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.querySelector(e) ?? document : e instanceof HTMLElement ? e : document, r = e => e ? e.split(/\s+/).filter(e => e.length > 0) : [], a = new Set([ "opacity", "zindex", "z-index", "fontweight", "font-weight", "lineheight", "line-height", "zoom", "flex", "flexgrow", "flex-grow", "flexshrink", "flex-shrink", "order", "gridcolumn", "grid-column", "gridrow", "grid-row", "columncount", "column-count", "fontsizeadjust", "font-size-adjust", "appearance" ]), c = (e, t) => "number" != typeof t || a.has(e.toLowerCase()) ? String(t) : `${t}px`, l = (e, t, o, i) => {
+var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.querySelector(e) ?? document : e instanceof HTMLElement ? e : document, r = e => e ? e.split(/\s+/).filter(e => e.length > 0) : [], a = new Set([ "opacity", "zindex", "z-index", "fontweight", "font-weight", "lineheight", "line-height", "zoom", "flex", "flexgrow", "flex-grow", "flexshrink", "flex-shrink", "order", "gridcolumn", "grid-column", "gridrow", "grid-row", "columncount", "column-count", "fontsizeadjust", "font-size-adjust", "appearance" ]), l = (e, t) => "number" != typeof t || a.has(e.toLowerCase()) ? String(t) : `${t}px`, c = (e, t, o, i) => {
     const s = e => o(e), p = i?.ns ? `${t}.${i.ns}` : t;
     e.addEventListener(t, s, i);
     let r = n.get(e);
@@ -76,7 +76,7 @@ var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.q
         return this.el.textContent = e, this;
     }
     css(e, t) {
-        if ("object" == typeof e && null !== e) for (const [t, o] of Object.entries(e)) this.el.style.setProperty(t.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), c(t, o)); else this.el.style.setProperty(e.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), c(e, t));
+        if ("object" == typeof e && null !== e) for (const [t, o] of Object.entries(e)) this.el.style.setProperty(t.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), l(t, o)); else this.el.style.setProperty(e.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), l(e, t));
         return this;
     }
     addClass(e) {
@@ -125,7 +125,7 @@ var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.q
         return this.el.style.display = "none" === this.el.style.display ? "" : "none", this;
     }
     on(e, t, o) {
-        return l(this.el, e, t, o), this;
+        return c(this.el, e, t, o), this;
     }
     off(e, t) {
         return d(this.el, e, t), this;
@@ -189,7 +189,7 @@ var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.q
         let n = 200, s = o;
         "function" == typeof t ? s = t : n = t;
         const p = Object.keys(e), r = {};
-        for (const t of p) r[t] = c(t, e[t]);
+        for (const t of p) r[t] = l(t, e[t]);
         return i.style.transition = "none", i.offsetWidth, i.style.transition = `${p.join(", ")} ${n}ms ease`, 
         Object.assign(i.style, r), this.finishTransition(n, () => {
             i.style.transition = "", s?.();
@@ -223,14 +223,14 @@ var m = e => {
     return new u(o);
 }, b = {
     on(e, t, o) {
-        l(document, e, t, o);
+        c(document, e, t, o);
     },
     off(e, t) {
         d(document, e, t);
     }
 }, _ = {
     on(e, t, o) {
-        l(window, e, t, o);
+        c(window, e, t, o);
     },
     off(e, t) {
         d(window, e, t);
@@ -281,7 +281,7 @@ var m = e => {
             });
         }
     }
-}, k = () => "undefined" != typeof window && window.matchMedia("(max-width: 1024px)").matches, $ = () => {
+}, k = () => "undefined" != typeof window && window.matchMedia("(max-width: 1024px)").matches, T = () => {
     if (!0 === window.__FORCE_TOUCH_MODE__) return "touch";
     const e = (() => {
         if ("undefined" == typeof navigator) return !1;
@@ -289,12 +289,12 @@ var m = e => {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e);
     })() || k();
     return ("ontouchstart" in window || navigator.maxTouchPoints > 0) && e ? "touch" : "mouse";
-}, T = $(), E = !k(), C = null;
+}, $ = T(), E = !k(), C = null;
 
 if ("undefined" != typeof window) {
     const e = window.matchMedia("(max-width: 1024px)"), t = () => {
-        const e = $(), t = T, o = !k();
-        T = e, E !== o && (E = o, C && C(e, t));
+        const e = T(), t = $, o = !k();
+        $ = e, E !== o && (E = o, C && C(e, t));
     };
     let o;
     e.addListener ? e.addListener(t) : e.addEventListener("change", t), window.addEventListener("resize", () => {
@@ -302,10 +302,10 @@ if ("undefined" != typeof window) {
     });
 }
 
-var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length > 0 ? e.touches[0].clientX : e.clientX, M = e => void 0 !== e.clientY ? e.clientY : e.touches && e.touches.length > 0 ? e.touches[0].clientY : e.clientY, S = 250, N = 150, O = !1, I = 1e3, A = !1, H = 0, P = 0, j = 0, W = 0, R = 0, D = 0, q = 0, B = 0, X = 0, Y = new Map, U = new Map, K = () => h("body"), F = e => "object" == typeof e && null !== e ? e.id : e, Z = {
+var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length > 0 ? e.touches[0].clientX : e.clientX, M = e => void 0 !== e.clientY ? e.clientY : e.touches && e.touches.length > 0 ? e.touches[0].clientY : e.clientY, S = 250, N = 150, O = !1, I = 1e3, A = !1, P = 0, H = 0, j = 0, W = 0, R = 0, D = 0, q = 0, B = 0, X = 0, Y = new Map, U = new Map, K = () => h("body"), F = e => "object" == typeof e && null !== e ? e.id : e, Z = {
     open: e => {
         if (!e) return e;
-        e.id = e.id ?? "popup_" + ++H, e.body = e.body ?? "", e.class = e.class ?? "", e.width = e.width ?? 340, 
+        e.id = e.id ?? "popup_" + ++P, e.body = e.body ?? "", e.class = e.class ?? "", e.width = e.width ?? 340, 
         e.height = e.height ?? 220, e.minWidth = e.minWidth ?? 340, e.minHeight = e.minHeight ?? 220, 
         e.name = e.name ?? "popUp_" + e.id, e.source = e.source ?? null, e.icon = e.icon ?? null, 
         e.iconize = e.iconize ?? null, e.maximize = e.maximize ?? null, e.isMaximize = e.isMaximize ?? null, 
@@ -565,21 +565,21 @@ var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length >
         if (!1 === e.movable) return;
         const t = F(e), o = String(t), i = h(".popup_overflow_" + t, "#popup"), n = i ? h(".popup_drag_" + t, i.el) : null, s = i ? h(".popup_body_" + t, i.el) : null;
         i?.css("touch-action", "none");
-        let p = 0, r = 0, a = 0, c = 0;
-        const l = e => {
+        let p = 0, r = 0, a = 0, l = 0;
+        const c = e => {
             e.preventDefault();
             const t = L(e), o = M(e);
-            p = a - t, r = c - o, a = t, c = o, Z.checkArea(e)[1] < Z.checkArea(e)[4] && 1 === Math.sign(Z.checkArea(e)[1]) && i?.css("top", i.el.offsetTop - r), 
+            p = a - t, r = l - o, a = t, l = o, Z.checkArea(e)[1] < Z.checkArea(e)[4] && 1 === Math.sign(Z.checkArea(e)[1]) && i?.css("top", i.el.offsetTop - r), 
             Z.checkArea(e)[0] < Z.checkArea(e)[5] && 1 === Math.sign(Z.checkArea(e)[0]) && i?.css("left", i.el.offsetLeft - p);
         }, d = () => {
             const e = {
                 passive: !1
             };
-            document.removeEventListener("pointermove", l, e), document.removeEventListener("pointerup", d, e), 
+            document.removeEventListener("pointermove", c, e), document.removeEventListener("pointerup", d, e), 
             Y.delete(o), s?.css("pointer-events", "auto"), Z.vfx(i, !0);
         };
         Y.set(o, {
-            move: l,
+            move: c,
             up: d
         });
         n?.el.addEventListener("pointerdown", e => {
@@ -591,11 +591,11 @@ var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length >
             layerpro.popup.maximize(e);
         });
         const u = e => {
-            a = L(e), c = M(e);
+            a = L(e), l = M(e);
             const t = {
                 passive: !1
             };
-            document.addEventListener("pointermove", l, t), document.addEventListener("pointerup", d, t);
+            document.addEventListener("pointermove", c, t), document.addEventListener("pointerup", d, t);
         };
     },
     resizable: e => {
@@ -622,25 +622,25 @@ var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length >
         const p = L(e), r = M(e), a = [ p - _.scrollLeft(), r - _.scrollTop() ];
         o.minWidth, K()?.css("pointer-events", "none"), n?.css("pointer-events", "none"), 
         Z.vfx(n, !1);
-        const c = e => {
+        const l = e => {
             Z.doRes(e, t);
-        }, l = () => {
+        }, c = () => {
             Z.stopRes(t, s);
         }, d = U.get(s) || {};
-        d.move = c, d.up = l, U.set(s, d);
+        d.move = l, d.up = c, U.set(s, d);
         const f = {
             passive: !1
         };
-        document.addEventListener("pointermove", c, f), document.addEventListener("pointerup", l, f), 
-        P = a[0], j = a[1], W = n?.width() ?? 0, R = n?.height() ?? 0, D = n?.position().left ?? 0, 
+        document.addEventListener("pointermove", l, f), document.addEventListener("pointerup", c, f), 
+        H = a[0], j = a[1], W = n?.width() ?? 0, R = n?.height() ?? 0, D = n?.position().left ?? 0, 
         q = n?.position().top ?? 0, B = q + R + 1, X = D + W + 1, O = t;
     },
     doRes: (e, t) => {
         dispatchEvent(new Event("layerProResize"));
         const o = t instanceof HTMLElement ? new u(t) : h(t), i = o?.parent(), n = L(e), s = M(e), p = [ n - _.scrollLeft(), s - _.scrollTop() ];
         if (t === O) {
-            let t = W + p[0] - P, n = R + p[1] - j;
-            const s = W - p[0] + P, r = R - p[1] + j;
+            let t = W + p[0] - H, n = R + p[1] - j;
+            const s = W - p[0] + H, r = R - p[1] + j;
             t <= 0 && (t = 0), n <= 0 && (n = 0), Z.checkArea(e)[1] < Z.checkArea(e)[4] && 1 === Math.sign(Z.checkArea(e)[1]) && o?.hasClass("resize_0") && (i && i.height() <= N && r > N && i.css({
                 height: Number(N + 1)
             }), i && i.height() > N && N <= r && i.css({
@@ -744,6 +744,8 @@ Object.defineProperty(layerpro, "popup", {
     value: Z,
     writable: !1,
     configurable: !1
+}), globalThis.popup = Z, Object.defineProperty(window, "popup", {
+    enumerable: !1
 });
 
 var G = {

package/index.js

@@ -36,7 +36,7 @@ Object.defineProperty(i, "credits", {
     configurable: !1
 });
 
-var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.querySelector(e) ?? document : e instanceof HTMLElement ? e : document, r = e => e ? e.split(/\s+/).filter(e => e.length > 0) : [], a = new Set([ "opacity", "zindex", "z-index", "fontweight", "font-weight", "lineheight", "line-height", "zoom", "flex", "flexgrow", "flex-grow", "flexshrink", "flex-shrink", "order", "gridcolumn", "grid-column", "gridrow", "grid-row", "columncount", "column-count", "fontsizeadjust", "font-size-adjust", "appearance" ]), c = (e, t) => "number" != typeof t || a.has(e.toLowerCase()) ? String(t) : `${t}px`, l = (e, t, o, i) => {
+var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.querySelector(e) ?? document : e instanceof HTMLElement ? e : document, r = e => e ? e.split(/\s+/).filter(e => e.length > 0) : [], a = new Set([ "opacity", "zindex", "z-index", "fontweight", "font-weight", "lineheight", "line-height", "zoom", "flex", "flexgrow", "flex-grow", "flexshrink", "flex-shrink", "order", "gridcolumn", "grid-column", "gridrow", "grid-row", "columncount", "column-count", "fontsizeadjust", "font-size-adjust", "appearance" ]), l = (e, t) => "number" != typeof t || a.has(e.toLowerCase()) ? String(t) : `${t}px`, c = (e, t, o, i) => {
     const s = e => o(e), p = i?.ns ? `${t}.${i.ns}` : t;
     e.addEventListener(t, s, i);
     let r = n.get(e);
@@ -78,7 +78,7 @@ var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.q
         return this.el.textContent = e, this;
     }
     css(e, t) {
-        if ("object" == typeof e && null !== e) for (const [t, o] of Object.entries(e)) this.el.style.setProperty(t.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), c(t, o)); else this.el.style.setProperty(e.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), c(e, t));
+        if ("object" == typeof e && null !== e) for (const [t, o] of Object.entries(e)) this.el.style.setProperty(t.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), l(t, o)); else this.el.style.setProperty(e.replace(/[A-Z]/g, e => `-${e.toLowerCase()}`), l(e, t));
         return this;
     }
     addClass(e) {
@@ -127,7 +127,7 @@ var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.q
         return this.el.style.display = "none" === this.el.style.display ? "" : "none", this;
     }
     on(e, t, o) {
-        return l(this.el, e, t, o), this;
+        return c(this.el, e, t, o), this;
     }
     off(e, t) {
         return d(this.el, e, t), this;
@@ -191,7 +191,7 @@ var n = new WeakMap, s = new WeakMap, p = e => "string" == typeof e ? document.q
         let n = 200, s = o;
         "function" == typeof t ? s = t : n = t;
         const p = Object.keys(e), r = {};
-        for (const t of p) r[t] = c(t, e[t]);
+        for (const t of p) r[t] = l(t, e[t]);
         return i.style.transition = "none", i.offsetWidth, i.style.transition = `${p.join(", ")} ${n}ms ease`, 
         Object.assign(i.style, r), this.finishTransition(n, () => {
             i.style.transition = "", s?.();
@@ -225,14 +225,14 @@ var m = e => {
     return new u(o);
 }, b = {
     on(e, t, o) {
-        l(document, e, t, o);
+        c(document, e, t, o);
     },
     off(e, t) {
         d(document, e, t);
     }
 }, _ = {
     on(e, t, o) {
-        l(window, e, t, o);
+        c(window, e, t, o);
     },
     off(e, t) {
         d(window, e, t);
@@ -283,7 +283,7 @@ var m = e => {
             });
         }
     }
-}, k = () => "undefined" != typeof window && window.matchMedia("(max-width: 1024px)").matches, $ = () => {
+}, k = () => "undefined" != typeof window && window.matchMedia("(max-width: 1024px)").matches, T = () => {
     if (!0 === window.__FORCE_TOUCH_MODE__) return "touch";
     const e = (() => {
         if ("undefined" == typeof navigator) return !1;
@@ -291,12 +291,12 @@ var m = e => {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e);
     })() || k();
     return ("ontouchstart" in window || navigator.maxTouchPoints > 0) && e ? "touch" : "mouse";
-}, T = $(), E = !k(), C = null;
+}, $ = T(), E = !k(), C = null;
 
 if ("undefined" != typeof window) {
     const e = window.matchMedia("(max-width: 1024px)"), t = () => {
-        const e = $(), t = T, o = !k();
-        T = e, E !== o && (E = o, C && C(e, t));
+        const e = T(), t = $, o = !k();
+        $ = e, E !== o && (E = o, C && C(e, t));
     };
     let o;
     e.addListener ? e.addListener(t) : e.addEventListener("change", t), window.addEventListener("resize", () => {
@@ -304,10 +304,10 @@ if ("undefined" != typeof window) {
     });
 }
 
-var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length > 0 ? e.touches[0].clientX : e.clientX, M = e => void 0 !== e.clientY ? e.clientY : e.touches && e.touches.length > 0 ? e.touches[0].clientY : e.clientY, S = 250, N = 150, O = !1, I = 1e3, A = !1, H = 0, P = 0, j = 0, W = 0, R = 0, D = 0, q = 0, B = 0, X = 0, Y = new Map, U = new Map, K = () => h("body"), F = e => "object" == typeof e && null !== e ? e.id : e, Z = {
+var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length > 0 ? e.touches[0].clientX : e.clientX, M = e => void 0 !== e.clientY ? e.clientY : e.touches && e.touches.length > 0 ? e.touches[0].clientY : e.clientY, S = 250, N = 150, O = !1, I = 1e3, A = !1, P = 0, H = 0, j = 0, W = 0, R = 0, D = 0, q = 0, B = 0, X = 0, Y = new Map, U = new Map, K = () => h("body"), F = e => "object" == typeof e && null !== e ? e.id : e, Z = {
     open: e => {
         if (!e) return e;
-        e.id = e.id ?? "popup_" + ++H, e.body = e.body ?? "", e.class = e.class ?? "", e.width = e.width ?? 340, 
+        e.id = e.id ?? "popup_" + ++P, e.body = e.body ?? "", e.class = e.class ?? "", e.width = e.width ?? 340, 
         e.height = e.height ?? 220, e.minWidth = e.minWidth ?? 340, e.minHeight = e.minHeight ?? 220, 
         e.name = e.name ?? "popUp_" + e.id, e.source = e.source ?? null, e.icon = e.icon ?? null, 
         e.iconize = e.iconize ?? null, e.maximize = e.maximize ?? null, e.isMaximize = e.isMaximize ?? null, 
@@ -567,21 +567,21 @@ var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length >
         if (!1 === e.movable) return;
         const t = F(e), o = String(t), i = h(".popup_overflow_" + t, "#popup"), n = i ? h(".popup_drag_" + t, i.el) : null, s = i ? h(".popup_body_" + t, i.el) : null;
         i?.css("touch-action", "none");
-        let p = 0, r = 0, a = 0, c = 0;
-        const l = e => {
+        let p = 0, r = 0, a = 0, l = 0;
+        const c = e => {
             e.preventDefault();
             const t = L(e), o = M(e);
-            p = a - t, r = c - o, a = t, c = o, Z.checkArea(e)[1] < Z.checkArea(e)[4] && 1 === Math.sign(Z.checkArea(e)[1]) && i?.css("top", i.el.offsetTop - r), 
+            p = a - t, r = l - o, a = t, l = o, Z.checkArea(e)[1] < Z.checkArea(e)[4] && 1 === Math.sign(Z.checkArea(e)[1]) && i?.css("top", i.el.offsetTop - r), 
             Z.checkArea(e)[0] < Z.checkArea(e)[5] && 1 === Math.sign(Z.checkArea(e)[0]) && i?.css("left", i.el.offsetLeft - p);
         }, d = () => {
             const e = {
                 passive: !1
             };
-            document.removeEventListener("pointermove", l, e), document.removeEventListener("pointerup", d, e), 
+            document.removeEventListener("pointermove", c, e), document.removeEventListener("pointerup", d, e), 
             Y.delete(o), s?.css("pointer-events", "auto"), Z.vfx(i, !0);
         };
         Y.set(o, {
-            move: l,
+            move: c,
             up: d
         });
         n?.el.addEventListener("pointerdown", e => {
@@ -593,11 +593,11 @@ var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length >
             layerpro.popup.maximize(e);
         });
         const u = e => {
-            a = L(e), c = M(e);
+            a = L(e), l = M(e);
             const t = {
                 passive: !1
             };
-            document.addEventListener("pointermove", l, t), document.addEventListener("pointerup", d, t);
+            document.addEventListener("pointermove", c, t), document.addEventListener("pointerup", d, t);
         };
     },
     resizable: e => {
@@ -624,25 +624,25 @@ var L = e => void 0 !== e.clientX ? e.clientX : e.touches && e.touches.length >
         const p = L(e), r = M(e), a = [ p - _.scrollLeft(), r - _.scrollTop() ];
         o.minWidth, K()?.css("pointer-events", "none"), n?.css("pointer-events", "none"), 
         Z.vfx(n, !1);
-        const c = e => {
+        const l = e => {
             Z.doRes(e, t);
-        }, l = () => {
+        }, c = () => {
             Z.stopRes(t, s);
         }, d = U.get(s) || {};
-        d.move = c, d.up = l, U.set(s, d);
+        d.move = l, d.up = c, U.set(s, d);
         const f = {
             passive: !1
         };
-        document.addEventListener("pointermove", c, f), document.addEventListener("pointerup", l, f), 
-        P = a[0], j = a[1], W = n?.width() ?? 0, R = n?.height() ?? 0, D = n?.position().left ?? 0, 
+        document.addEventListener("pointermove", l, f), document.addEventListener("pointerup", c, f), 
+        H = a[0], j = a[1], W = n?.width() ?? 0, R = n?.height() ?? 0, D = n?.position().left ?? 0, 
         q = n?.position().top ?? 0, B = q + R + 1, X = D + W + 1, O = t;
     },
     doRes: (e, t) => {
         dispatchEvent(new Event("layerProResize"));
         const o = t instanceof HTMLElement ? new u(t) : h(t), i = o?.parent(), n = L(e), s = M(e), p = [ n - _.scrollLeft(), s - _.scrollTop() ];
         if (t === O) {
-            let t = W + p[0] - P, n = R + p[1] - j;
-            const s = W - p[0] + P, r = R - p[1] + j;
+            let t = W + p[0] - H, n = R + p[1] - j;
+            const s = W - p[0] + H, r = R - p[1] + j;
             t <= 0 && (t = 0), n <= 0 && (n = 0), Z.checkArea(e)[1] < Z.checkArea(e)[4] && 1 === Math.sign(Z.checkArea(e)[1]) && o?.hasClass("resize_0") && (i && i.height() <= N && r > N && i.css({
                 height: Number(N + 1)
             }), i && i.height() > N && N <= r && i.css({
@@ -746,6 +746,8 @@ Object.defineProperty(layerpro, "popup", {
     value: Z,
     writable: !1,
     configurable: !1
+}), globalThis.popup = Z, Object.defineProperty(window, "popup", {
+    enumerable: !1
 });
 
 var G = {

package/markdown/GUIDE.md

@@ -1,367 +1,367 @@
-# LayerPro Guide
-
-> A practical, example-driven guide to LayerPro — the real custom modals
-> (alert, confirm, prompt, message) and advanced popups for the browser.
-
-LayerPro is **dependency-free**: it no longer uses jQuery. All DOM work is done
-with small, chainable vanilla helpers. React and react-dom are the only
-external runtime dependencies, and they are used **only** to render the modal
-body when you pass a React element.
-
----
-
-## Table of Contents
-
-1. [Installation](#installation)
-2. [Quick Start](#quick-start)
-3. [Basic Modals](#basic-modals)
-4. [Custom Popups](#custom-popups)
-5. [Options Reference](#options-reference)
-6. [Dock & Taskbar](#dock--taskbar)
-7. [Maximize & Minimize](#maximize--minimize)
-8. [Dragging & Resizing](#dragging--resizing)
-9. [React Body](#react-body)
-10. [Selection & z-index](#selection--z-index)
-11. [API Methods](#api-methods)
-12. [Notes & Migration](#notes--migration)
-
----
-
-## Installation
-
-```bash
-npm install layerpro
-```
-
-Or drop it straight into HTML (UMD build):
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
-```
-
----
-
-## Quick Start
-
-Import LayerPro once at your app entry point. It overrides the global
-`alert`, `confirm`, `prompt`, and exposes `message` and `layerpro`:
-
-```javascript
-import "layerpro";
-```
-
-That single import is enough — `window.layerpro` becomes available and the
-global `alert`/`confirm`/`prompt` are replaced, and a `message` global is added.
-
-> **⚠️ Global override contract:** the overridden `confirm()` no longer returns a
-> `boolean` and `prompt()` no longer returns a `string` — they are callback-based
-> and return `undefined`. If your codebase (or a third-party dependency) relies on
-> the native synchronous return values, call `layerpro.noGlobals()` right after
-> importing to restore the originals:
->
-> ```javascript
-> import "layerpro";
-> layerpro.noGlobals();   // restores native alert/confirm/prompt, drops `message`
-> ```
-
----
-
-## Basic Modals
-
-```javascript
-// Simple alert
-alert("Hello World!");
-
-// Confirm with YES / NO callbacks
-confirm(
-  "Are you sure?",
-  () => console.debug("User clicked YES"),
-  () => console.debug("User clicked NO")
-);
-
-// Prompt with the typed value
-prompt("What is your name?", (name) => {
-  console.debug("User entered:", name);
-});
-
-// Plain message (auto-styled info box)
-message("Operation complete!", () => console.debug("message closed"));
-```
-
-> The global functions keep the same signatures you already know, so legacy
-> code keeps working.
-
----
-
-## Custom Popups
-
-Use `layerpro.popup.open(props)` for full control.
-
-```javascript
-layerpro.popup.open({
-  id: "myModal",
-  name: "My Modal",
-  body: "<p>Your <b>content</b> here</p>",
-  width: 450,
-  height: 350,
-  movable: true,
-  resizable: true,
-  maximize: true,
-  iconize: true,
-  dockable: true,
-  close: true,
-  buttons: {
-    confirm: { text: "OK", cb: () => layerpro.popup.close("myModal") },
-    cancel: { text: "Cancel", cb: () => layerpro.popup.close("myModal") }
-  }
-});
-```
-
-### The `body` parameter
-
-| Type | Example |
-|------|---------|
-| Plain text | `body: "Hello"` |
-| HTML string | `body: "<p>Hello</p>"` |
-| React element | `body: <MyComponent />` |
-
-> In React, always pass an **element** (`<Component />`), never a call
-> (`Component()`).
-
----
-
-## Options Reference
-
-```typescript
-{
-  id: string,                 // Unique id (auto-generated as popup_1, popup_2, … if omitted)
-  body: any,                  // text | HTML string | HTMLElement | React element
-  name: string,               // Title shown in the bar
-  icon: string,               // Icon glyph (HTML entity, e.g. "&#9888;") or HTML string
-                              //     (e.g. '<i class="fa fa-star"></i>')
-  class: string,              // Extra CSS class on the window
-
-  // Dimensions (defaults: width 340, height 220; minWidth 340, minHeight 220)
-  width?: number | string,
-  height?: number | string,
-  minWidth?: number,
-  minHeight?: number,
-  maxWidth?: number,
-  maxHeight?: number,
-
-  // Position (numbers are px; strings are applied as-is, e.g. "10%")
-  top?: number | string,
-  left?: number | string,
-  right?: number | string,
-  bottom?: number | string,
-  center?: boolean,           // Center in the viewport (adds a small cascade
-                              //     offset per open window so stacks don't overlap)
-
-  // Timing
-  fadeIn?: number,            // open fade duration (ms, default 100)
-  fadeOut?: number,           // close fade duration (ms, default 100)
-  timer?: number,             // auto-close after N ms
-
-  // Behavior flags
-  movable?: boolean,          // draggable by the title bar
-  resizable?: boolean,        // resize handles
-  maximize?: boolean,         // double-click title bar to maximize
-  iconize?: boolean,          // allow minimize to dock
-  dockable?: boolean,         // show an icon in the dock bar
-  close?: boolean,            // show the close button
-  raised?: boolean,           // alias: modal — show a full-screen overlay that
-  modal?: boolean,            //     blocks pointer events to the page underneath
-}
-```
-
-If `top/left/right/bottom` are all `0` (or unset) the popup is auto-centered.
-Pass `center: true` to force centering regardless of the position props.
-
-> **`raised` / `modal`** injects a full-viewport overlay (`popup_raised_<id>`)
-> that intercepts every pointer event — the page underneath becomes unclickable
-> until the popup closes. This is modal behavior; both names are accepted.
-
-> **Duplicate id** — opening a popup whose `id` already exists brings that window
-> to the front and refreshes its `body`/`buttons` instead of doing nothing.
-
----
-
-## Dock & Taskbar
-
-When `dockable` and `iconize` are enabled, a minimized popup becomes an icon in
-the bottom dock bar — exactly like an OS taskbar:
-
-```javascript
-layerpro.popup.open({
-  id: "editor",
-  name: "Editor",
-  body: "<p>Edit something…</p>",
-  dockable: true,
-  iconize: true
-});
-```
-
-**Dock interactions (taskbar style):**
-
-- Click a dock icon of a **minimized** popup → it is restored and focused.
-- Click a dock icon of a popup that is open but **not focused** → it is brought
-  to the front.
-- Click a dock icon of the **focused** popup → it is minimized back to the dock.
-
-The close `✕` on the dock icon closes the popup completely.
-
----
-
-## Maximize & Minimize
-
-Maximize is implemented with **pure CSS** (`position: fixed` + `inset`), so the
-popup fills the viewport and follows window resizing automatically — no JS
-resize listeners are involved.
-
-```javascript
-layerpro.popup.open({
-  id: "viewer",
-  name: "Viewer",
-  body: "<p>Big content</p>",
-  maximize: true,
-  iconize: true
-});
-```
-
-- **Double-click the title bar** → toggle maximize / restore.
-- **Click the dock icon** of a maximized popup → restore it.
-
-Because maximize is CSS-driven, resizing the browser window keeps the maximized
-popup perfectly aligned with no lag.
-
----
-
-## Dragging & Resizing
-
-Dragging and resizing are **instant**: the CSS `transition` is disabled on the
-popup while you drag a resize handle, so the popup tracks the pointer with no
-lag (especially on the bottom edge).
-
-```javascript
-layerpro.popup.open({
-  id: "panel",
-  name: "Panel",
-  body: "<p>Move and resize me</p>",
-  movable: true,
-  resizable: true
-});
-```
-
-- Drag the **title bar** to move.
-- Drag the **edges/corners** to resize.
-- These interactions are disabled automatically while a popup is maximized.
-
----
-
-## React Body
-
-Pass a React element as `body` and LayerPro mounts it with `react-dom`
-`createRoot` inside the modal:
-
-```jsx
-import { useState } from "react";
-
-function Counter() {
-  const [n, setN] = useState(0);
-  return <button onClick={() => setN(n + 1)}>Clicked {n} times</button>;
-}
-
-layerpro.popup.open({
-  id: "reactModal",
-  name: "React Modal",
-  body: <Counter />,
-  width: 400,
-  height: 300
-});
-```
-
-React state, effects, and context all work normally inside the body.
-
----
-
-## Selection & z-index
-
-Clicking anywhere on a popup (the body **or** the title bar) brings it to the
-front and gives it the `zHigh` highlight. The dock icon is also marked as
-selected. z-index values are unitless (set as raw numbers, never `px`).
-
-```javascript
-// Bring a popup to the front programmatically
-layerpro.popup.index({ id: "myModal" });
-```
-
----
-
-## API Methods
-
-| Method | Description |
-|--------|-------------|
-| `layerpro.popup.open(props)` | Open a modal; returns the props. Re-opening a same-id window brings it to front + refreshes body |
-| `layerpro.popup.close(id)` | Close (and unmount) a modal |
-| `layerpro.popup.center(id, offset?)` | Center a modal in the viewport; optional pixel offset |
-| `layerpro.popup.maximize(props)` | Toggle maximize (pure CSS) |
-| `layerpro.popup.iconize(id)` | Toggle minimize to the dock |
-| `layerpro.popup.index(id)` | Bring a modal to the front (select) |
-| `layerpro.popup.zIndex()` | Get the next z-index counter value |
-| `layerpro.popup.movable(props)` | Enable dragging |
-| `layerpro.popup.resizable(props)` | Enable resizing |
-| `layerpro.popup.store(element)` | Store a reference (placeholder/extensibility) |
-| `layerpro.popup.cleanupEvents(id)` | Remove dock/button/esc listeners |
-| `layerpro.popup.unmount(id)` | Unmount the React root (memory cleanup) |
-| `layerpro.noGlobals()` | Restore native `alert`/`confirm`/`prompt`; remove `message` |
-
----
-
-## Styling & z-index
-
-Popup z-index starts from the `--popup-z-index` CSS variable (default `1000`).
-Apps with their own stacking contexts (e.g. a tooltip at `z-index: 100000`) can
-shift the whole stack by overriding the variable:
-
-```scss
-:root { --popup-z-index: 100000; }
-```
-
-The title bar, window surface, internal area, and body all read from CSS custom
-properties, so theming needs no `!important` and no `[class^=popup_…]` selectors:
-
-| Variable | Applies to |
-|----------|-----------|
-| `--bar-background` | title bar |
-| `--bar-selected-background` | active/selected title bar |
-| `--bar-color` | title bar text |
-| `--window-background` | popup surface |
-| `--window-shadow` | popup shadow |
-| `--window-border-radius` | popup border radius |
-| `--internal-background` | body wrapper |
-| `--body-color` | body text color |
-| `--raised-background` | modal overlay |
-| `--popup-z-index` (in root.scss) | base z-index for the stack |
-
-Stable class names (`.popup_bar`, `.popup_window`, `.popup_overflow`,
-`.popup_internal`, `.popup_body`, `.popup_drag`, `.popup_icon`, `.popup_option`,
-`.popup_raised`) are emitted alongside the per-id classes so themes can target
-elements without attribute selectors.
-
----
-
-## Notes & Migration
-
-- **jQuery removed.** LayerPro no longer depends on jQuery. All DOM access uses
-  the internal `core/dom.ts` vanilla helper (`lp`, `lpAll`, `lpCreate`, `lpDoc`,
-  `lpWin`). Public behavior is unchanged.
-- **React is external.** `react` and `react-dom` must be provided by the host
-  app and are used only to render the modal body.
-- **Instant resize / maximize.** Transitions are disabled during resize, and
-  maximize is CSS-only, for a snappy, lag-free feel.
-- **Vanilla pages still work.** No framework is required unless you pass a React
-  body.
-
----
-
-© [Dario Passariello](https://dario.passariello.ca/) — MIT License
+# LayerPro Guide
+
+> A practical, example-driven guide to LayerPro — the real custom modals
+> (alert, confirm, prompt, message) and advanced popups for the browser.
+
+LayerPro is **dependency-free**: it no longer uses jQuery. All DOM work is done
+with small, chainable vanilla helpers. React and react-dom are the only
+external runtime dependencies, and they are used **only** to render the modal
+body when you pass a React element.
+
+---
+
+## Table of Contents
+
+1. [Installation](#installation)
+2. [Quick Start](#quick-start)
+3. [Basic Modals](#basic-modals)
+4. [Custom Popups](#custom-popups)
+5. [Options Reference](#options-reference)
+6. [Dock & Taskbar](#dock--taskbar)
+7. [Maximize & Minimize](#maximize--minimize)
+8. [Dragging & Resizing](#dragging--resizing)
+9. [React Body](#react-body)
+10. [Selection & z-index](#selection--z-index)
+11. [API Methods](#api-methods)
+12. [Notes & Migration](#notes--migration)
+
+---
+
+## Installation
+
+```bash
+npm install layerpro
+```
+
+Or drop it straight into HTML (UMD build):
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
+```
+
+---
+
+## Quick Start
+
+Import LayerPro once at your app entry point. It overrides the global
+`alert`, `confirm`, `prompt`, and exposes `message` and `layerpro`:
+
+```javascript
+import "layerpro";
+```
+
+That single import is enough — `window.layerpro` becomes available and the
+global `alert`/`confirm`/`prompt` are replaced, and a `message` global is added.
+
+> **⚠️ Global override contract:** the overridden `confirm()` no longer returns a
+> `boolean` and `prompt()` no longer returns a `string` — they are callback-based
+> and return `undefined`. If your codebase (or a third-party dependency) relies on
+> the native synchronous return values, call `layerpro.noGlobals()` right after
+> importing to restore the originals:
+>
+> ```javascript
+> import "layerpro";
+> layerpro.noGlobals();   // restores native alert/confirm/prompt, drops `message`
+> ```
+
+---
+
+## Basic Modals
+
+```javascript
+// Simple alert
+alert("Hello World!");
+
+// Confirm with YES / NO callbacks
+confirm(
+  "Are you sure?",
+  () => console.debug("User clicked YES"),
+  () => console.debug("User clicked NO")
+);
+
+// Prompt with the typed value
+prompt("What is your name?", (name) => {
+  console.debug("User entered:", name);
+});
+
+// Plain message (auto-styled info box)
+message("Operation complete!", () => console.debug("message closed"));
+```
+
+> The global functions keep the same signatures you already know, so legacy
+> code keeps working.
+
+---
+
+## Custom Popups
+
+Use `layerpro.popup.open(props)` for full control.
+
+```javascript
+layerpro.popup.open({
+  id: "myModal",
+  name: "My Modal",
+  body: "<p>Your <b>content</b> here</p>",
+  width: 450,
+  height: 350,
+  movable: true,
+  resizable: true,
+  maximize: true,
+  iconize: true,
+  dockable: true,
+  close: true,
+  buttons: {
+    confirm: { text: "OK", cb: () => layerpro.popup.close("myModal") },
+    cancel: { text: "Cancel", cb: () => layerpro.popup.close("myModal") }
+  }
+});
+```
+
+### The `body` parameter
+
+| Type | Example |
+|------|---------|
+| Plain text | `body: "Hello"` |
+| HTML string | `body: "<p>Hello</p>"` |
+| React element | `body: <MyComponent />` |
+
+> In React, always pass an **element** (`<Component />`), never a call
+> (`Component()`).
+
+---
+
+## Options Reference
+
+```typescript
+{
+  id: string,                 // Unique id (auto-generated as popup_1, popup_2, … if omitted)
+  body: any,                  // text | HTML string | HTMLElement | React element
+  name: string,               // Title shown in the bar
+  icon: string,               // Icon glyph (HTML entity, e.g. "&#9888;") or HTML string
+                              //     (e.g. '<i class="fa fa-star"></i>')
+  class: string,              // Extra CSS class on the window
+
+  // Dimensions (defaults: width 340, height 220; minWidth 340, minHeight 220)
+  width?: number | string,
+  height?: number | string,
+  minWidth?: number,
+  minHeight?: number,
+  maxWidth?: number,
+  maxHeight?: number,
+
+  // Position (numbers are px; strings are applied as-is, e.g. "10%")
+  top?: number | string,
+  left?: number | string,
+  right?: number | string,
+  bottom?: number | string,
+  center?: boolean,           // Center in the viewport (adds a small cascade
+                              //     offset per open window so stacks don't overlap)
+
+  // Timing
+  fadeIn?: number,            // open fade duration (ms, default 100)
+  fadeOut?: number,           // close fade duration (ms, default 100)
+  timer?: number,             // auto-close after N ms
+
+  // Behavior flags
+  movable?: boolean,          // draggable by the title bar
+  resizable?: boolean,        // resize handles
+  maximize?: boolean,         // double-click title bar to maximize
+  iconize?: boolean,          // allow minimize to dock
+  dockable?: boolean,         // show an icon in the dock bar
+  close?: boolean,            // show the close button
+  raised?: boolean,           // alias: modal — show a full-screen overlay that
+  modal?: boolean,            //     blocks pointer events to the page underneath
+}
+```
+
+If `top/left/right/bottom` are all `0` (or unset) the popup is auto-centered.
+Pass `center: true` to force centering regardless of the position props.
+
+> **`raised` / `modal`** injects a full-viewport overlay (`popup_raised_<id>`)
+> that intercepts every pointer event — the page underneath becomes unclickable
+> until the popup closes. This is modal behavior; both names are accepted.
+
+> **Duplicate id** — opening a popup whose `id` already exists brings that window
+> to the front and refreshes its `body`/`buttons` instead of doing nothing.
+
+---
+
+## Dock & Taskbar
+
+When `dockable` and `iconize` are enabled, a minimized popup becomes an icon in
+the bottom dock bar — exactly like an OS taskbar:
+
+```javascript
+layerpro.popup.open({
+  id: "editor",
+  name: "Editor",
+  body: "<p>Edit something…</p>",
+  dockable: true,
+  iconize: true
+});
+```
+
+**Dock interactions (taskbar style):**
+
+- Click a dock icon of a **minimized** popup → it is restored and focused.
+- Click a dock icon of a popup that is open but **not focused** → it is brought
+  to the front.
+- Click a dock icon of the **focused** popup → it is minimized back to the dock.
+
+The close `✕` on the dock icon closes the popup completely.
+
+---
+
+## Maximize & Minimize
+
+Maximize is implemented with **pure CSS** (`position: fixed` + `inset`), so the
+popup fills the viewport and follows window resizing automatically — no JS
+resize listeners are involved.
+
+```javascript
+layerpro.popup.open({
+  id: "viewer",
+  name: "Viewer",
+  body: "<p>Big content</p>",
+  maximize: true,
+  iconize: true
+});
+```
+
+- **Double-click the title bar** → toggle maximize / restore.
+- **Click the dock icon** of a maximized popup → restore it.
+
+Because maximize is CSS-driven, resizing the browser window keeps the maximized
+popup perfectly aligned with no lag.
+
+---
+
+## Dragging & Resizing
+
+Dragging and resizing are **instant**: the CSS `transition` is disabled on the
+popup while you drag a resize handle, so the popup tracks the pointer with no
+lag (especially on the bottom edge).
+
+```javascript
+layerpro.popup.open({
+  id: "panel",
+  name: "Panel",
+  body: "<p>Move and resize me</p>",
+  movable: true,
+  resizable: true
+});
+```
+
+- Drag the **title bar** to move.
+- Drag the **edges/corners** to resize.
+- These interactions are disabled automatically while a popup is maximized.
+
+---
+
+## React Body
+
+Pass a React element as `body` and LayerPro mounts it with `react-dom`
+`createRoot` inside the modal:
+
+```jsx
+import { useState } from "react";
+
+function Counter() {
+  const [n, setN] = useState(0);
+  return <button onClick={() => setN(n + 1)}>Clicked {n} times</button>;
+}
+
+layerpro.popup.open({
+  id: "reactModal",
+  name: "React Modal",
+  body: <Counter />,
+  width: 400,
+  height: 300
+});
+```
+
+React state, effects, and context all work normally inside the body.
+
+---
+
+## Selection & z-index
+
+Clicking anywhere on a popup (the body **or** the title bar) brings it to the
+front and gives it the `zHigh` highlight. The dock icon is also marked as
+selected. z-index values are unitless (set as raw numbers, never `px`).
+
+```javascript
+// Bring a popup to the front programmatically
+layerpro.popup.index({ id: "myModal" });
+```
+
+---
+
+## API Methods
+
+| Method | Description |
+|--------|-------------|
+| `layerpro.popup.open(props)` | Open a modal; returns the props. Re-opening a same-id window brings it to front + refreshes body |
+| `layerpro.popup.close(id)` | Close (and unmount) a modal |
+| `layerpro.popup.center(id, offset?)` | Center a modal in the viewport; optional pixel offset |
+| `layerpro.popup.maximize(props)` | Toggle maximize (pure CSS) |
+| `layerpro.popup.iconize(id)` | Toggle minimize to the dock |
+| `layerpro.popup.index(id)` | Bring a modal to the front (select) |
+| `layerpro.popup.zIndex()` | Get the next z-index counter value |
+| `layerpro.popup.movable(props)` | Enable dragging |
+| `layerpro.popup.resizable(props)` | Enable resizing |
+| `layerpro.popup.store(element)` | Store a reference (placeholder/extensibility) |
+| `layerpro.popup.cleanupEvents(id)` | Remove dock/button/esc listeners |
+| `layerpro.popup.unmount(id)` | Unmount the React root (memory cleanup) |
+| `layerpro.noGlobals()` | Restore native `alert`/`confirm`/`prompt`; remove `message` |
+
+---
+
+## Styling & z-index
+
+Popup z-index starts from the `--popup-z-index` CSS variable (default `1000`).
+Apps with their own stacking contexts (e.g. a tooltip at `z-index: 100000`) can
+shift the whole stack by overriding the variable:
+
+```scss
+:root { --popup-z-index: 100000; }
+```
+
+The title bar, window surface, internal area, and body all read from CSS custom
+properties, so theming needs no `!important` and no `[class^=popup_…]` selectors:
+
+| Variable | Applies to |
+|----------|-----------|
+| `--bar-background` | title bar |
+| `--bar-selected-background` | active/selected title bar |
+| `--bar-color` | title bar text |
+| `--window-background` | popup surface |
+| `--window-shadow` | popup shadow |
+| `--window-border-radius` | popup border radius |
+| `--internal-background` | body wrapper |
+| `--body-color` | body text color |
+| `--raised-background` | modal overlay |
+| `--popup-z-index` (in root.scss) | base z-index for the stack |
+
+Stable class names (`.popup_bar`, `.popup_window`, `.popup_overflow`,
+`.popup_internal`, `.popup_body`, `.popup_drag`, `.popup_icon`, `.popup_option`,
+`.popup_raised`) are emitted alongside the per-id classes so themes can target
+elements without attribute selectors.
+
+---
+
+## Notes & Migration
+
+- **jQuery removed.** LayerPro no longer depends on jQuery. All DOM access uses
+  the internal `core/dom.ts` vanilla helper (`lp`, `lpAll`, `lpCreate`, `lpDoc`,
+  `lpWin`). Public behavior is unchanged.
+- **React is external.** `react` and `react-dom` must be provided by the host
+  app and are used only to render the modal body.
+- **Instant resize / maximize.** Transitions are disabled during resize, and
+  maximize is CSS-only, for a snappy, lag-free feel.
+- **Vanilla pages still work.** No framework is required unless you pass a React
+  body.
+
+---
+
+© [Dario Passariello](https://dario.passariello.ca/) — MIT License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "layerpro",
   "codeName": "layerpro",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "The real custom modals, alert, confirm, prompt... for your browser",
   "main": "./index.cjs",
   "browser": "./index.js",

package/types/layerpro.d.ts

@@ -127,3 +127,6 @@ interface Window {
 
 declare var layerpro: _layerpro
 type layerpro = _layerpro
+
+declare var popup: layerpro
+type popup = layerpro