layerpro 3.1.1 → 3.2.0

package/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: passariello
+patreon: passariello
+ko_fi: passariello
+liberapay: passariello
+issuehunt: passariello
+custom:
+ [
+  "https://dario.passariello.ca",
+  "https://www.indiegogo.com/individuals/28513718",
+ ]

package/README.md

@@ -33,7 +33,7 @@ No more ugly popup boxes. No more blocking the main thread. Just clean, modern m
 
 ## Features
 
-- **Zero runtime dependencies**: no jQuery — pure vanilla DOM helpers; React/react-dom are external and only used to render the modal body
+- **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))
 - **Multiple modal types**: alert, confirm, prompt, message
 - **Fully customizable**: appearance, behavior, and content
 - **Dockable windows (taskbar style)**: click a dock icon to restore, focus, or minimize — just like an OS taskbar
@@ -131,7 +131,10 @@ popup.open({
 
 ### React Components
 
-In a React environment, you can pass React components directly:
+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. reattach handles
+root creation, automatic root reuse on duplicate-id reopen, **Context Bridging** across
+detached roots, and **Auto-healing DOM** recovery — all without you lifting a finger.
 
 ```jsx
 popup.open({
@@ -143,6 +146,31 @@ popup.open({
 });
 ```
 
+#### Advanced Options (React)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `inheritContext` | `boolean` | `false` | Replays captured host React Context into the popup's root. Use `captureContext()` in your app to capture contexts, then set `inheritContext: true` on the popup. |
+| `resilient` | `boolean` | `false` | Enables a `MutationObserver` that auto-heals the React mount container if external DOM mutations (htmx, jQuery, CMS AJAX) remove or replace it. |
+
+```jsx
+// Host app: capture context
+import { captureContext } from 'reattach'
+function App() {
+  const theme = useContext(ThemeContext)
+  captureContext(ThemeContext, theme)
+  return <Toolbar />
+}
+
+// Popup: inherit host context
+popup.open({
+  id: 'contextual',
+  body: <ThemedWidget />,
+  inheritContext: true,   // ContextBridge: ThèmeContext is bridged
+  resilient: true,        // Auto-heals if the container is replaced
+});
+```
+
 ### The `body` Parameter
 
 The `body` property accepts different content types:
@@ -178,6 +206,10 @@ The `body` property accepts different content types:
   // Remote content (same-origin only for security)
   source: string,         // URL to fetch HTML content from (same-origin enforced)
 
+  // React adapter (via reattach)
+  inheritContext: boolean, // reattach Context Bridge — replay host React Context into the popup root
+  resilient: boolean,      // reattach Auto-healing DOM — MutationObserver recovery from external DOM mutations
+
   // Position (numbers are px; strings applied as-is, e.g. "10%")
   top: number | string,
   left: number | string,
@@ -320,7 +352,7 @@ LayerPro includes several security measures:
 
 - **HTML escaping**: All user-provided text content (button labels, body content, titles) is automatically escaped via `escapeHtml()` to prevent XSS. HTML entities like `<`, `>`, `&`, `"` are converted to their safe equivalents.
 
-- **Content Security Policy friendly**: No inline scripts or `eval()` are used. React components are rendered via `createRoot()` with proper sanitization.
+- **Content Security Policy friendly**: No inline scripts or `eval()` are used. React components are rendered via `reattach.mount()` (backed by `createRoot()`) with proper sanitization.
 
 - **No global pollution option**: Call `layerpro.noGlobals()` after import to restore native `alert`, `confirm`, `prompt` and remove the `message` global if your codebase depends on synchronous return values.