layerpro 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -19
- package/index.cjs +249 -239
- package/index.d.ts +1 -0
- package/index.js +249 -239
- package/llms.txt +55 -55
- package/markdown/GUIDE.md +9 -9
- package/package.json +3 -1
- package/react.d.ts +32 -0
- package/types/layerpro.d.ts +143 -133
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|

|
|
19
19
|

|
|
20
20
|
|
|
21
|
-
LayerPro replaces the browser's native `alert()`, `confirm()`, and `prompt()` with beautiful, fully customizable modals that work everywhere
|
|
21
|
+
LayerPro replaces the browser's native `alert()`, `confirm()`, and `prompt()` with beautiful, fully customizable modals that work everywhere - no more blocking the main thread, no more default browser styling.
|
|
22
22
|
|
|
23
23
|
## Table of Contents
|
|
24
24
|
|
|
@@ -43,12 +43,12 @@ LayerPro replaces the browser's native `alert()`, `confirm()`, and `prompt()` wi
|
|
|
43
43
|
|
|
44
44
|
## Features
|
|
45
45
|
|
|
46
|
-
- **Zero runtime dependencies**
|
|
47
|
-
- **Multiple modal types**
|
|
48
|
-
- **Fully customizable**
|
|
49
|
-
- **Dockable windows** (taskbar-style)
|
|
50
|
-
- **Draggable & resizable**
|
|
51
|
-
- **CSS-only maximize**
|
|
46
|
+
- **Zero runtime dependencies** - no jQuery, pure vanilla DOM helpers; `react`/`react-dom` are peer dependencies, only loaded when React bodies are used, powered by [`reattach`](https://npmjs.com/package/reattach)
|
|
47
|
+
- **Multiple modal types** - alert, confirm, prompt, message
|
|
48
|
+
- **Fully customizable** - appearance, behavior, and content
|
|
49
|
+
- **Dockable windows** (taskbar-style) - click a dock icon to restore, focus, or minimize, just like an OS taskbar
|
|
50
|
+
- **Draggable & resizable** - instant, with no transition lag while resizing
|
|
51
|
+
- **CSS-only maximize** - uses `position: fixed` + insets, so it follows the viewport with no JS resize listeners
|
|
52
52
|
- **Fade in/out transitions** for open/close
|
|
53
53
|
- **Full TypeScript support**
|
|
54
54
|
|
|
@@ -72,7 +72,7 @@ Import LayerPro once, in your app's entry point:
|
|
|
72
72
|
import "layerpro";
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
-
That's it
|
|
75
|
+
That's it - `alert()`, `confirm()`, `prompt()`, `message()`, and `popup()` are now available globally.
|
|
76
76
|
|
|
77
77
|
The `popup` alias is a shorthand for `layerpro.popup`:
|
|
78
78
|
|
|
@@ -120,7 +120,7 @@ popup.open({
|
|
|
120
120
|
|
|
121
121
|
### React Components
|
|
122
122
|
|
|
123
|
-
LayerPro's React adapter is powered by [`reattach`](https://npmjs.com/package/reattach), a zero-dependency library for mounting React components anywhere in the DOM. It handles root creation, automatic root reuse on duplicate-id reopen, **Context Bridging** across detached roots, and **auto-healing DOM** recovery
|
|
123
|
+
LayerPro's React adapter is powered by [`reattach`](https://npmjs.com/package/reattach), a zero-dependency library for mounting React components anywhere in the DOM. It handles root creation, automatic root reuse on duplicate-id reopen, **Context Bridging** across detached roots, and **auto-healing DOM** recovery - all without extra setup.
|
|
124
124
|
|
|
125
125
|
```jsx
|
|
126
126
|
popup.open({
|
|
@@ -174,7 +174,7 @@ popup.open({
|
|
|
174
174
|
id: string, // Unique ID (auto-generated as popup_1, popup_2, ... if omitted)
|
|
175
175
|
body: any, // Content (text, HTML, or React)
|
|
176
176
|
name: string, // Modal title
|
|
177
|
-
icon: string, // Icon glyph
|
|
177
|
+
icon: string, // Icon glyph - HTML entity (e.g. "⚠") or HTML string
|
|
178
178
|
|
|
179
179
|
// Dimensions (defaults: width 340, height 220; minWidth 340, minHeight 220)
|
|
180
180
|
width: number,
|
|
@@ -210,7 +210,7 @@ popup.open({
|
|
|
210
210
|
iconize: boolean, // allow minimize to dock
|
|
211
211
|
dockable: boolean, // show an icon in the dock bar
|
|
212
212
|
close: boolean, // show the close button
|
|
213
|
-
raised: boolean, // alias: modal
|
|
213
|
+
raised: boolean, // alias: modal - full-screen overlay that blocks pointer events beneath
|
|
214
214
|
modal: boolean, // alias of raised
|
|
215
215
|
|
|
216
216
|
// Buttons
|
|
@@ -221,9 +221,9 @@ popup.open({
|
|
|
221
221
|
}
|
|
222
222
|
```
|
|
223
223
|
|
|
224
|
-
> **`raised` / `modal`** injects a full-viewport overlay (`popup_raised_<id>`) that intercepts every pointer event
|
|
224
|
+
> **`raised` / `modal`** injects a full-viewport overlay (`popup_raised_<id>`) that intercepts every pointer event - the page underneath becomes unclickable until the popup closes. Both names are accepted.
|
|
225
225
|
|
|
226
|
-
> **Duplicate id**
|
|
226
|
+
> **Duplicate id** - opening a popup whose `id` already exists brings that window to the front and refreshes its `body`/`buttons` instead of doing nothing.
|
|
227
227
|
|
|
228
228
|
## Global Overrides
|
|
229
229
|
|
|
@@ -238,7 +238,7 @@ prompt("Name?", name => {...}); // LayerPro prompt (callback, not a string r
|
|
|
238
238
|
message("Done!"); // LayerPro message
|
|
239
239
|
```
|
|
240
240
|
|
|
241
|
-
> **⚠️ Important:** the overridden `confirm()` no longer returns a `boolean`, and `prompt()` no longer returns a `string`
|
|
241
|
+
> **⚠️ Important:** the overridden `confirm()` no longer returns a `boolean`, and `prompt()` no longer returns a `string` - they are callback-based and return `undefined`. Any third-party code that does `if (confirm("..."))` will silently fall into the falsy branch. If your codebase depends on native synchronous return values, call **`layerpro.noGlobals()`** right after importing LayerPro to restore the originals:
|
|
242
242
|
>
|
|
243
243
|
> ```javascript
|
|
244
244
|
> import "layerpro";
|
|
@@ -285,10 +285,10 @@ The title bar, window surface, internal area, and body all read from CSS custom
|
|
|
285
285
|
|
|
286
286
|
## Security
|
|
287
287
|
|
|
288
|
-
- **Same-origin fetch guard**
|
|
289
|
-
- **HTML escaping**
|
|
290
|
-
- **CSP-friendly**
|
|
291
|
-
- **Opt-out of global overrides**
|
|
288
|
+
- **Same-origin fetch guard** - the `source` prop only accepts same-origin URLs; cross-origin requests are rejected before any network call is made, preventing SSRF and data exfiltration.
|
|
289
|
+
- **HTML escaping** - all user-provided text content (button labels, body content, titles) is automatically escaped via `escapeHtml()` to prevent XSS.
|
|
290
|
+
- **CSP-friendly** - no inline scripts or `eval()` are used. React components are rendered via `reattach.mount()` (backed by `createRoot()`).
|
|
291
|
+
- **Opt-out of global overrides** - call `layerpro.noGlobals()` after import to restore native `alert`, `confirm`, `prompt`, and remove the `message` global if your codebase depends on synchronous return values.
|
|
292
292
|
|
|
293
293
|
## Browser Support
|
|
294
294
|
|
|
@@ -298,7 +298,7 @@ Chrome 80+ • Firefox 75+ • Safari 13+ • Edge 80+
|
|
|
298
298
|
|
|
299
299
|
LayerPro's source is currently private, but contributions and discussion are welcome. Get in touch:
|
|
300
300
|
|
|
301
|
-
- **Dario Passariello**
|
|
301
|
+
- **Dario Passariello** - https://dario.passariello.ca/ - dariopassariello@gmail.com
|
|
302
302
|
|
|
303
303
|
## License
|
|
304
304
|
|