layerpro 2.8.0 → 3.0.0

package/llms.txt

@@ -0,0 +1,55 @@
+# LayerPro
+
+> Dependency-free custom modals (alert, confirm, prompt, message) and advanced
+> popups for the browser. Vanilla DOM (no jQuery); React/react-dom are external
+> and used only to render the modal body. Dockable, draggable, resizable,
+> maximizable (pure CSS), with an OS-style taskbar.
+
+## Source
+
+- [index.ts](index.ts): Entry point. Sets `window.layerpro` (frozen, non-enumerable), imports SCSS, initializes mode.
+- [core/dom.ts](core/dom.ts): jQuery-free chainable DOM helper (`LpEl`, `lp`, `lpAll`, `lpCreate`, `lpDoc`, `lpWin`) — the replacement for jQuery.
+- [core/properties.ts](core/properties.ts): The `popup` object — `open`, `close`, `center`, `maximize`, `iconize`, `index`, `zIndex`, `movable`, `resizable`, `cleanupEvents`, `unmount`.
+- [core/genLayer.ts](core/genLayer.ts): DOM builder for a popup, dock/buttons wiring, pointer/click/dblclick handlers.
+- [core/message.ts](core/message.ts): `alert`/`confirm`/`message`/`prompt` implementations; overrides `window.alert`/`confirm`/`prompt`.
+- [core/mode.ts](core/mode.ts): Close popups on orientation/size mode switch.
+- [core/mobile.ts](core/mobile.ts): Unified pointer/mouse/touch events (`getPointerDown`/`getPointerMove`/`getPointerUp`).
+- [core/window.ts](core/window.ts): Window-level helpers (scroll, size).
+- [core/credits.ts](core/credits.ts): Credits overlay helper.
+- [core/namespace.ts](core/namespace.ts): Global namespace setup.
+
+## Types
+
+- [types/layerpro.d.ts](types/layerpro.d.ts): Public TypeScript definitions (`GenLayerProps`, the `layerpro` global, `Window`/`globalThis` augmentations).
+
+## Docs
+
+- [docs/README.md](docs/README.md): Project README (features, install, quick start).
+- [docs/markdown/GUIDE.md](docs/markdown/GUIDE.md): Example-driven usage guide (modals, popups, dock, maximize, resize, React body, API).
+- [docs/llms.txt](docs/llms.txt): This file.
+
+## Build & Config
+
+- [package.json](package.json): Manifest. React/react-dom are `devDependencies` (external at runtime); **jQuery removed**. `main`/`browser` → `index.js` (ESM), `exports.import` → `index.js`.
+- [tsup.config.ts](tsup.config.ts): Build (CJS + ESM, terser minify, esbuild-sass-plugin). Externalizes devDependencies.
+- [tsup.plugin.copyStatic.ts](tsup.plugin.copyStatic.ts): Copies static files (README, types, license) into `dist`.
+- [tsup.plugin.injectCss.ts](tsup.plugin.injectCss.ts): Injects compiled SCSS into the bundle.
+
+## Key behaviors
+
+- **jQuery removed** — all DOM via `core/dom.ts`; public API unchanged.
+- **React external** — only the modal `body` is rendered with `react-dom` `createRoot`.
+- **Instant resize** — CSS `transition` disabled on the popup while resizing (no lag).
+- **Maximize is pure CSS** — `position: fixed` + insets; follows viewport with no JS listeners.
+- **Dock = OS taskbar** — click dock icon toggles restore / focus / minimize.
+- **z-index** — set as unitless numbers; clicking body or title bar selects (brings to front).
+
+## Contributing
+
+LayerPro is **open source** and free to use. The current codebase is private, but
+**anyone is welcome to join**. If you would like to contribute, suggest changes,
+or just chat about the project, contact the author:
+
+- **Dario Passariello** — https://dario.passariello.ca/ — dariopassariello@gmail.com
+
+Participation is voluntary and free; everyone is free to take part.

package/markdown/GUIDE.md

@@ -0,0 +1,315 @@
+# 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.
+
+---
+
+## 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 (required)
+  body: any,                  // text | HTML string | HTMLElement | React element
+  name: string,               // Title shown in the bar
+  icon: string,               // Icon glyph / HTML entity
+  class: string,              // Extra CSS class on the window
+
+  // Dimensions
+  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,
+
+  // Timing
+  fadeIn?: number,            // open fade duration (ms)
+  fadeOut?: number,           // close fade duration (ms)
+  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,           // start raised / focused
+
+  // Buttons
+  buttons?: {
+    confirm?: { text: string; cb?: () => void },
+    cancel?:  { text: string; cb?: () => void }
+  }
+}
+```
+
+If `top/left/right/bottom` are all `0` (or unset), the popup is auto-centered.
+
+---
+
+## 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 |
+| `layerpro.popup.close(id)` | Close (and unmount) a modal |
+| `layerpro.popup.center(id)` | Center a modal in the viewport |
+| `layerpro.popup.maximize(id)` | 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(id)` | Enable dragging |
+| `layerpro.popup.resizable(id)` | Enable resizing |
+| `layerpro.popup.cleanupEvents(id)` | Remove dock/button/esc listeners |
+| `layerpro.popup.unmount(id)` | Unmount the React root (memory cleanup) |
+
+---
+
+## 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,10 +1,10 @@
 {
   "name": "layerpro",
   "codeName": "layerpro",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "description": "The real custom modals, alert, confirm, prompt... for your browser",
   "main": "./index.cjs",
-  "browser": "./index.cjs",
+  "browser": "./index.js",
   "types": "./index.d.ts",
   "typing": "./types/*",
   "license": "MIT",
@@ -48,22 +48,11 @@
     "url": "https://dario.passariello.ca/",
     "email": "dariopassariello@gmail.com"
   },
-  "dependencies": {
-    "caniuse-lite": "1.0.30001803"
+  "resolutions": {
+    "esbuild": "^0.25.0"
   },
   "overrides": {
-    "function-bind": "npm:@socketregistry/function-bind@^1",
-    "hasown": "npm:@socketregistry/hasown@^1",
-    "is-core-module": "npm:@socketregistry/is-core-module@^1",
-    "object-assign": "npm:@socketregistry/object-assign@^1",
-    "path-parse": "npm:@socketregistry/path-parse@^1"
-  },
-  "resolutions": {
-    "function-bind": "npm:@socketregistry/function-bind@^1",
-    "hasown": "npm:@socketregistry/hasown@^1",
-    "is-core-module": "npm:@socketregistry/is-core-module@^1",
-    "object-assign": "npm:@socketregistry/object-assign@^1",
-    "path-parse": "npm:@socketregistry/path-parse@^1"
+    "esbuild": "^0.25.0"
   },
   "module": "./index.js",
   "exports": {

package/types/files.d.ts

@@ -1,5 +1,5 @@
 /*
-Copyright: © 2019 Dario Passariello <dariopassariello@gmail.com>
+Copyright: © 2026 Dario Passariello <dariopassariello@gmail.com>
 */
 
 declare module '*.js' {

package/types/layerpro.d.ts

@@ -19,7 +19,7 @@ declare function prompt(f1?: string, func1?: Function): any
 
 interface GenLayerProps {
 
-  id: string
+  id: string | number
   body?: React.ReactElement | string | HTMLElement
   name?: string
   style?: any

package/FUNDING.yml

@@ -1,12 +0,0 @@
-# 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/types/jquery.d.ts

@@ -1,17 +0,0 @@
-
-
-
-declare module 'jquery'
-
-declare var $: any
-declare var jQuery: any
-
-// ///
-
-interface window {
-  $: any
-  jQuery: any
-}
-
-type $ = {}
-type jQuery = {}