layerpro 4.0.1 → 4.1.0

package/README.md

@@ -35,6 +35,7 @@ LayerPro is **not only** a replacement for `alert`/`prompt`/`confirm`: the same
   - [OS-style Windows](#os-style-windows)
   - [React Components](#react-components)
   - [The `body` Parameter](#the-body-parameter)
+  - [Targeting a window](#targeting-a-window)
 - [Options](#options)
 - [Global Overrides](#global-overrides)
 - [Methods](#methods)
@@ -52,6 +53,7 @@ LayerPro is **not only** a replacement for `alert`/`prompt`/`confirm`: the same
 ## Features
 
 - **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)
+- **Native `<dialog>` windows** - every popup is a real `<dialog>` element, so the platform owns the window semantics (open state, implicit dialog role) while LayerPro keeps the geometry, the drag and the stacking order
 - **OS-style window engine** - not just modals: every popup is a real window with a title bar, drag handle, resize handles, maximize/restore, minimize-to-dock, focus stacking, and a z-order you control
 - **Hosts any content** - plain text, HTML strings, or **full React components** (with Context bridging and DOM auto-healing), rendered inside the window body
 - **Multiple modal types** - alert, confirm, prompt, message - built on top of the same window engine, so they inherit the same styling, dock, and accessibility features
@@ -215,6 +217,33 @@ popup.open({
 
 > **Note**: in React, always use elements (`<Component />`), not function calls (`Component()`).
 
+### Targeting a window
+
+A layer is drawn in the document of the page that loaded LayerPro. The
+`target` option names the window a layer belongs to, so a window opened with
+`native: true` can host its own layers instead of seeing them land on the
+opener:
+
+```javascript
+// Open a real browser window
+await layerpro.popup.open({ id: 'desk', name: 'Desktop', native: true })
+
+// Open a layer inside that window
+await layerpro.popup.open({ id: 'detail', body: 'Inside the desk', target: 'desk' })
+
+// The same thing, through the handle bound to that window
+const desk = layerpro.window('desk')
+await desk.popup.open({ id: 'detail2', body: 'Also inside' })
+
+// The modals accept a target too
+await layerpro.confirm('Save the changes?', { target: 'desk' })
+```
+
+A target is the id of a native window, a `Window` object, or a
+`{ win, doc }` scope. A target that cannot be reached (unknown id, closed
+window, another origin) produces a warning and the layer is drawn in the
+current document.
+
 ## Options
 
 ```typescript
@@ -266,12 +295,17 @@ popup.open({
     confirm?: { text: string; cb?: () => void },
     cancel?: { text: string; cb?: () => void }
   }
+
+  // The window the layer is drawn in: the id of a native window, a Window
+  // object, or a { win, doc } scope. Without it the layer is drawn in the
+  // document of the page that loaded LayerPro.
+  target?: string | number | Window | LayerScope
 }
 ```
 
 > **`modal`** injects a full-viewport overlay (`popup_modal_<id>`) that intercepts every pointer event - the page underneath becomes unclickable until the popup closes. Use `modal: true` for alert/confirm/prompt/message pop ups.
 
-> **Duplicate id** - opening a popup whose `id` already exists brings that window to the front and refreshes its `body`/`buttons` instead of doing nothing.
+> **Duplicate id** - opening a popup whose `id` already exists brings that window to the front and refreshes its `body`/`buttons` instead of doing nothing. The refresh reuses the existing button row: the row is emptied and refilled, never stacked.
 
 ## Global Overrides (Opt-in in 4.0)
 
@@ -321,6 +355,7 @@ const val = await prompt("Name?");        // Promise<string>
 | `popup.movable(props)` | Enable dragging. |
 | `popup.resizable(props)` | Enable resizing. |
 | `layerpro.installGlobals()` | Override `window.alert/confirm/prompt/message` with LayerPro's Promise-based versions. |
+| `layerpro.window(target)` | A handle bound to one window: `win`, `doc` and a `popup` API whose layers are drawn in that window. |
 | `layerpro.version()` | Returns the current LayerPro version string (read from `app.json`). |
 | `layerpro.config(opts)` | Runtime config. Currently supports `{ nonce: string }` for CSP; sets `window.__layerproNonce` consumed by the injected `<style>`. Call before importing LayerPro for the nonce to be present at injection. |
 
@@ -401,7 +436,7 @@ Every element LayerPro creates carries a **stable class alias** next to its id-s
 
 | Element | Stable class | Id-suffixed class |
 |---------|--------------|-------------------|
-| Window surface | `.popup_window` | `.popup_window_<id>` |
+| Window surface (`<dialog>`) | `.popup_window` | `.popup_window_<id>` |
 | Title bar | `.popup_bar` | `.popup_bar_<id>` |
 | Drag handle (title) | `.popup_drag` | `.popup_drag_<id>` |
 | Icon slot | `.popup_icon` | `.popup_icon_<id>` |
@@ -413,6 +448,15 @@ Every element LayerPro creates carries a **stable class alias** next to its id-s
 | Confirm/cancel row | `.buttons` | - |
 | Selected/focused window | `.zHigh`, `.popup_bar_selected` | - |
 
+The confirm/cancel row built from the `buttons` option lives in the **internal
+area** (`.popup_internal`), next to the body, and not inside the body itself:
+a body renderer (React) owns the body container and empties it when it
+commits, so a row kept inside the body would be wiped by the first render.
+The built-in `alert`/`confirm`/`prompt`/`message` modals carry their own row
+inside their body markup, as part of the modal content. Target the row with
+`.buttons` (or `.lp_confirm` / `.lp_cancel` for the single buttons), never
+with `.popup_body .buttons`.
+
 ```css
 /* square windows, no rounded corners */
 #popup .popup_window {