		# Code of Conduct

		## Our Pledge

		In the interest of fostering an open and welcoming environment, we as
		contributors and maintainers pledge to make participation in our project and
		our community a harassment-free experience for everyone, regardless of age, body
		size, disability, ethnicity, sex characteristics, gender identity and expression,
		level of experience, education, socio-economic status, nationality, personal
		appearance, race, religion, or sexual identity and orientation.

		## Our Standards

		Examples of behavior that contributes to a positive environment for our
		community include:

		* Demonstrating empathy and kindness toward other people
		* Being respectful of differing opinions, viewpoints, and experiences
		* Giving and gracefully accepting constructive feedback
		* Accepting responsibility and apologizing to those affected by our mistakes,
		and learning from the experience
		* Focusing on what is best not just for us as individuals, but for the
		overall community

		Examples of unacceptable behavior include:

		* The use of sexualized language or imagery, and sexual attention or advances
		* Trolling, insulting or derogatory comments, and personal or political attacks
		* Public or private harassment
		* Publishing others' private information, such as a physical or email
		address, without their explicit permission
		* Other conduct which could reasonably be considered inappropriate in a
		professional setting

		## Our Responsibilities

		Project maintainers are responsible for clarifying and enforcing our standards of
		acceptable behavior and will take appropriate and fair corrective action in
		response to any behavior that they deem inappropriate,
		threatening, offensive, or harmful.

		Project maintainers have the right and responsibility to remove, edit, or reject
		comments, commits, code, wiki edits, issues, and other contributions that are
		not aligned to this Code of Conduct, and will
		communicate reasons for moderation decisions when appropriate.

		## Scope

		This Code of Conduct applies within all community spaces, and also applies when
		an individual is officially representing the community in public spaces.
		Examples of representing our community include using an official e-mail address,
		posting via an official social media account, or acting as an appointed
		representative at an online or offline event.

		## Enforcement

		Instances of abusive, harassing, or otherwise unacceptable behavior may be
		reported to the community leaders responsible for enforcement at <dariopassariello@gmail.com>.
		All complaints will be reviewed and investigated promptly and fairly.

		All community leaders are obligated to respect the privacy and security of the
		reporter of any incident.

		## Enforcement Guidelines

		Community leaders will follow these Community Impact Guidelines in determining
		the consequences for any action they deem in violation of this Code of Conduct:

		### 1. Correction

		Community Impact: Use of inappropriate language or other behavior deemed
		unprofessional or unwelcome in the community.

		Consequence: A private, written warning from community leaders, providing
		clarity around the nature of the violation and an explanation of why the
		behavior was inappropriate. A public apology may be requested.

		### 2. Warning

		Community Impact: A violation through a single incident or series
		of actions.

		Consequence: A warning with consequences for continued behavior. No
		interaction with the people involved, including unsolicited interaction with
		those enforcing the Code of Conduct, for a specified period of time. This
		includes avoiding interactions in community spaces as well as external channels
		like social media. Violating these terms may lead to a temporary or
		permanent ban.

		### 3. Temporary Ban

		Community Impact: A serious violation of community standards, including
		sustained inappropriate behavior.

		Consequence: A temporary ban from any sort of interaction or public
		communication with the community for a specified period of time. No public or
		private interaction with the people involved, including unsolicited interaction
		with those enforcing the Code of Conduct, is allowed during this period.
		Violating these terms may lead to a permanent ban.

		### 4. Permanent Ban

		Community Impact: Demonstrating a pattern of violation of community
		standards, including sustained inappropriate behavior, harassment of an
		individual, or aggression toward or disparagement of classes of individuals.

		Consequence: A permanent ban from any sort of public interaction within
		the community.

+6

COPYRIGHT.md

		# Copyright

		Copyright (c) 2026, Dario Passariello. All rights reserved.
		<https://dario.passariello.ca>

		This software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

+3

SECURITY.md

		# Security

		Please email [@passariello](https://github.com/passariello) or see <https://dario.passariello.ca/contact/> if you have a potential security vulnerability to report.

+48

types/index.d.ts

		import "./scripts/setupGlobal";
		import "./scripts/setProps";
		import "./tools/ai/index";
		import "./tools/anchor/index";
		import "./tools/array/index";
		import "./tools/audio/index";
		import "./tools/avoid/index";
		import "./tools/browser/index";
		import "./tools/check/index";
		import "./tools/color/index";
		import "./tools/cookie/index";
		import "./tools/coords/index";
		import "./tools/credits/index";
		import "./tools/date/index";
		import "./tools/disable/index";
		import "./tools/dispatch/index";
		import "./tools/elements/index";
		import "./tools/events/index";
		import "./tools/fetch/index";
		import "./tools/form/index";
		import "./tools/format/index";
		import "./tools/json/index";
		import "./tools/load/index";
		import "./tools/logging/index";
		import "./tools/math/index";
		import "./tools/memory/index";
		import "./tools/objects/index";
		import "./tools/path/index";
		import "./tools/promise/index";
		import "./tools/sanitize/index";
		import "./tools/screen/index";
		import "./tools/scrollbar/index";
		import "./tools/security/index";
		import "./tools/shortcut/index";
		import "./tools/socket/index";
		import "./tools/sse/index";
		import "./tools/svg/index";
		import "./tools/sync/index";
		import "./tools/system/index";
		import "./tools/text/index";
		import "./tools/timer/index";
		import "./tools/tools/index";
		import "./tools/translators/index";
		import "./tools/triggers/index";
		import "./tools/types/index";
		import "./tools/ui/index";
		import "./tools/window/index";
		export default dphelper;

+1

types/scripts/generate-imports.d.ts

export {};

+1

types/scripts/over.d.ts

export {};

+1

types/scripts/setProps.d.ts

export {};

+1

types/scripts/setupGlobal.d.ts

export {};

+1

types/tools/ai/index.d.ts

export {};

+1

types/tools/anchor/index.d.ts

export {};

+1

types/tools/array/index.d.ts

export {};

+1

types/tools/audio/index.d.ts

export {};

+1

types/tools/avoid/index.d.ts

export {};

+1

types/tools/browser/index.d.ts

export {};

+1

types/tools/check/index.d.ts

export {};

+1

types/tools/color/index.d.ts

export {};

+1

types/tools/cookie/index.d.ts

export {};

+1

types/tools/coords/index.d.ts

export {};

+1

types/tools/credits/index.d.ts

export {};

+1

types/tools/date/index.d.ts

export {};

+1

types/tools/disable/index.d.ts

export {};

+1

types/tools/dispatch/index.d.ts

export {};

+1

types/tools/elements/index.d.ts

export {};

+1

types/tools/events/index.d.ts

export {};

+1

types/tools/fetch/index.d.ts

export {};

+1

types/tools/form/index.d.ts

export {};

+1

types/tools/format/index.d.ts

export {};

+1

types/tools/json/index.d.ts

export {};

+1

types/tools/load/index.d.ts

export {};

+1

types/tools/logging/index.d.ts

export {};

+1

types/tools/math/index.d.ts

export {};

+1

types/tools/memory/index.d.ts

export {};

+1

types/tools/objects/index.d.ts

export {};

+1

types/tools/path/index.d.ts

export {};

+1

types/tools/promise/index.d.ts

export {};

+1

types/tools/sanitize/index.d.ts

export {};

+1

types/tools/screen/index.d.ts

export {};

+32

types/tools/screen/popupManager.d.ts

		interface MonitorInfo {
		id: string;
		width: number;
		height: number;
		left: number;
		top: number;
		isPrimary: boolean;
		}
		interface PopupState {
		id: string;
		monitorId: string;
		left: number;
		top: number;
		width: number;
		height: number;
		monitorFingerprint: string;
		}
		export declare const popupManager: {
		save: (id: string, win?: Window) => void;
		restore: (id: string) => {
		left: number;
		top: number;
		width: number;
		height: number;
		} \| null;
		remove: (id: string) => void;
		list: () => Record<string, PopupState>;
		clear: () => void;
		getMonitors: () => MonitorInfo[];
		getCurrentMonitor: () => MonitorInfo;
		};
		export default popupManager;

+1

types/tools/scrollbar/index.d.ts

export {};

+1

types/tools/security/index.d.ts

export {};

+1

types/tools/shortcut/index.d.ts

export {};

+1

types/tools/socket/index.d.ts

export {};

+1

types/tools/sse/index.d.ts

export {};

+1

types/tools/svg/index.d.ts

export {};

+1

types/tools/sync/index.d.ts

export {};

+1

types/tools/system/index.d.ts

export {};

+1

types/tools/text/index.d.ts

export {};

+1

types/tools/timer/index.d.ts

export {};

+1

types/tools/tools/index.d.ts

export {};

+1

types/tools/translators/index.d.ts

export {};

+1

types/tools/triggers/index.d.ts

export {};

+1

types/tools/types/index.d.ts

export {};

+1

types/tools/ui/index.d.ts

export {};

+1

types/tools/window/index.d.ts

export {};

+53

-153

package.json

		{
		"name": "dphelper",
		"version": "2.6.4",
		"description": "dphelper devtools, data management for developers by Dario Passariello",
		"version": "3.0.0",
		"type": "module",
		"main": "index.js",
		"description": "dphelper devtools for developers",
		"license": "MIT",
		"types": "./types/index.d.ts",
		"typings": "./types/*",
		"copyright": "Dario Passariello",
		"homepage": "https://a51.gitbook.io/dphelper",
		"author": "Dario Passariello <dariopassariello@gmail.com>",
		"support": {
		"name": "Dario Passariello",
		"url": "https://github.com/passariello/",
		"email": "dariopassariello@gmail.com"
		},
		"bugs": {
		"url": "https://github.com/a51-dev/a51.dphelper.public/issues"
		},
		"contributors": [
		{
		"name": "Dario Passariello",
		"email": "dariopassariello@gmail.com",
		"url": "https://dario.passariello.ca/"
		},
		{
		"name": "Valeria Cala Scaglitta",
		"email": "valeriacalascaglitta@gmail.com"
		}
		],
		"keywords": [
		@@ -17,3 +44,2 @@ "dphelper",
		"store",
		"observer",
		"easy",
		@@ -29,10 +55,4 @@ "pro",
		"idb",
		"devtool",
		"dario",
		"passariello"
		"devtool"
		],
		"homepage": "https://a51.gitbook.io/dphelper",
		"bugs": {
		"url": "https://github.com/a51-dev/a51.dphelper.public/issues"
		},
		"funding": [
		@@ -44,156 +64,36 @@ {
		],
		"license": "MIT",
		"author": "Dario Passariello <dariopassariello@gmail.com>",
		"contributors": [
		{
		"name": "Dario Passariello",
		"email": "dariopassariello@gmail.com",
		"url": "https://dario.passariello.ca/"
		},
		{
		"name": "Valeria Cala Scaglitta",
		"email": "valeriacalascaglitta@gmail.com"
		}
		"typing": [
		"types/*"
		],
		"exports": {
		".": {
		"types": "./index.d.ts",
		"types": "./types/index.d.ts",
		"import": "./index.js",
		"default": "./index.js"
		},
		"./package.json": "./package.json",
		"./": "./"
		"./types/": "./types/"
		},
		"main": "./dist/index.js",
		"types": "./index.d.ts",
		"typings": "./types/*",
		"scripts": {
		"build": "webpack --progress --profile --color --mode=production --config webpack.ts",
		"watch": "webpack --watch --progress --profile --color --mode=development --config webpack.ts",
		"npm:publish": "npm run build && cd dist && ls -al && npm publish",
		"------": "",
		"eslint": "npx eslint tests/eslint/eslint.config.mjs",
		"tsc": "tsc -b tsconfig.json"
		"build": "rm -rf dist &&npm run generate-imports && node esbuild.config.mjs && npx tsc -p tsconfig.json --emitDeclarationOnly",
		"dev": "npm run generate-imports && node esbuild.config.mjs --watch-and-serve",
		"npm:pack": "npm run build && cd dist && npm pack",
		"npm:publish": "npm run build && npm publish ./dist",
		"test": "cd tests && npm run test",
		"lint": "cd tests && npm run lint",
		"tsc": "cd tests && tsc --noEmit",
		"generate-imports": "node --experimental-strip-types scripts/generate-imports.ts"
		},
		"browserslist": {
		"production": [
		"last 2 Chrome major versions",
		"last 2 Firefox major versions",
		"last 2 Safari major versions",
		"last 2 Edge major versions",
		"last 2 Opera versions",
		"last 2 iOS major versions",
		"last 1 Explorer major version",
		"last 1 ChromeAndroid version",
		"last 1 UCAndroid version",
		"last 1 Samsung version",
		"last 1 OperaMini version",
		"Firefox ESR",
		">0.2%",
		"not dead",
		"not op_mini all"
		],
		"development": [
		"last 1 chrome version",
		"last 1 firefox version",
		"last 1 safari version"
		]
		},
		"dependencies": {
		"dphelper.types": "0.0.20",
		"jquery": "4.0.0",
		"memorio": "2.2.1"
		},
		"devDependencies": {
		"@babel/eslint-parser": "^7.28.6",
		"@eslint/js": "10.0.1",
		"@playwright/test": "1.58.2",
		"@testing-library/jest-dom": "6.9.1",
		"@testing-library/react": "16.3.2",
		"@types/jest": "30.0.0",
		"@types/node": "^25.2.3",
		"@types/webpack-env": "1.18.8",
		"@typescript-eslint/eslint-plugin": "8.56.0",
		"@typescript-eslint/parser": "8.56.0",
		"copy-webpack-plugin": "^13.0.1",
		"@types/crypto-js": "4.2.2",
		"@types/node": "^25.3.0",
		"crypto-js": "4.2.0",
		"esbuild-loader": "4.4.2",
		"eslint": "10.0.0",
		"eslint-plugin-react": "7.37.5",
		"eslint-plugin-react-hooks": "7.0.1",
		"file-loader": "6.2.0",
		"jest": "30.2.0",
		"jest-environment-jsdom": "30.2.0",
		"react": "19.2.4",
		"terser-webpack-plugin": "^5.3.16",
		"ts-loader": "^9.5.4",
		"ts-node": "10.9.2",
		"esbuild": "0.27.3",
		"esbuild-node-externals": "1.20.1",
		"esbuild-plugin-alias": "0.2.1",
		"esbuild-plugin-copy": "2.1.1",
		"esbuild-sass-plugin": "3.6.0",
		"esbuild-scss-modules-plugin": "1.1.1",
		"tslib": "^2.8.1",
		"typescript": "5.9.3",
		"typescript-eslint": "8.56.0",
		"webpack": "^5.105.2",
		"webpack-cli": "6.0.1",
		"webpack-dev-server": "^5.2.3"
		},
		"engines": {
		"node": ">=18",
		"pnpm": ">=10"
		},
		"preferGlobal": true,
		"app": {
		"displayName": "dphelper",
		"port": 3000,
		"code": "vulkan",
		"type": "gold",
		"host": {
		"dev": "http://localhost",
		"prod": ""
		},
		"codeRelease": "dphelper",
		"name": "dphelper",
		"folder": "/",
		"target": "web",
		"node": {
		"global": false
		},
		"proxy": {
		"api": {
		"tst": "http://localhost:5003/",
		"dev": "https://a51.dev/",
		"pro": "https://a51.dev/"
		}
		},
		"socket": {
		"url": {
		"tst": "wss://ws.a51.dev/",
		"dev": "wss://ws.a51.dev/",
		"pro": "wss://ws.a51.dev/"
		}
		},
		"url": {
		"dev": "http://localhost/"
		},
		"cdn": {}
		},
		"company": {},
		"copyright": "Dario Passariello",
		"deprecated": false,
		"extends": "./tsconfig.json",
		"language": {
		"en": {}
		},
		"npmFileMap": [
		{
		"basePath": "./dist/",
		"files": [
		"*.js"
		]
		}
		],
		"npmName": "dphelper",
		"support": {
		"name": "Dario Passariello",
		"url": "https://github.com/passariello/",
		"email": "dariopassariello@gmail.com"
		},
		"target": "web"
		"typescript": "5.9.3"
		}
		}

+131

-289

README.md

		@@ -5,11 +5,11 @@ # [dphelper](https://npmjs.com/package/dphelper)

		Manager \| DevTools by [Dario Passariello](https://dario.passariello.ca) (c)
		The supercharged toolkit for modern web development, AI engineering & DevTools.
		By [Dario Passariello](https://dario.passariello.ca) (c)

		[![version](https://img.shields.io/npm/v/dphelper.svg)](https://npmjs.org/package/dphelper)
		[![downloads](https://img.shields.io/npm/dm/dphelper.svg)](https://npmjs.org/package/dphelper)

		![jQuery](https://img.shields.io/badge/jQuery-gray?logo=jQuery)
		![Javascript](https://img.shields.io/badge/Javascript-gray?logo=Javascript)
		![React](https://img.shields.io/badge/React-gray?logo=React)
		![TypeScript](https://img.shields.io/badge/TypeScript-gray?logo=typescript)
		![AI Ready](https://img.shields.io/badge/AI-Ready-brightgreen?logo=openai)
		![TOON](https://img.shields.io/badge/TOON-Format-blue)

		@@ -19,63 +19,68 @@ ![Node.js](https://img.shields.io/badge/Node.js-gray?logo=node.js)
		![ESLint](https://img.shields.io/badge/Eslint-gray?logo=eslint)
		![webpack](https://img.shields.io/badge/webpack-gray?logo=webpack)
		![esbuild](https://img.shields.io/badge/esbuild-gray?logo=esbuild)
		![Snyk](https://img.shields.io/badge/Snyk-gray?logo=Snyk)

		![Snik](https://img.shields.io/badge/Snyk-gray?logo=Snyk)
		![Snik](https://img.shields.io/badge/Socket-gray?logo=socket)

		[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://a51.gitbook.io/dphelper)

		## Table of Contents
		---

		1. [About](#about)
		2. [Installation](#install)
		3. [Live Demo](#live-demo)
		4. [Documentation](#documentation)
		1. [State](#state)
		2. [Store](#store)
		3. [Session](#session)
		4. [Observer](#observer)
		5. [useObserver](#useobserver)
		5. [Security](#security)

		## About

		dpHelper is a precise and complete collection of 190+ tools ready to use in all web/SaaS and enterprise applications. State and Store Management are now easy, accessible everywhere in your application, including Ajax or React apps, without the need for extra files.
		dphelper is a powerful, zero-dependency utility library that brings together 45+ production-ready tools for web developers, AI engineers, and DevTools creators.

		1. Single Source of Truth: The application's entire state is held within a single object in one store, ensuring consistent and accessible state management throughout the app.
		Think of it as your universal toolbox - from DOM manipulation to cryptographic operations, from real-time WebSocket handling to AI-powered token optimization. No more juggling multiple packages. One import, infinite possibilities.

		2. State is flexible: State changes are facilitated exclusively through actions. These actions, which are straightforward JavaScript objects, delineate what has occurred. This methodology ensures that state changes remain predictable.
		### Why dphelper?

		3. Changes are made with proxy handle function: To define state changes, dpHelper employs pure functions as intermediaries. These functions accept the current state as input and produce a new state as output, ensuring predictability and ease of testing in the system.
		- ⚡ Zero Dependencies - Pure vanilla JavaScript/TypeScript. No bloat, no surprises.
		- 🤖 AI-First Design - Built for LLM apps with TOON optimization, token counting, and RAG support.
		- 🌐 Universal - Works in browser, Node.js, Bun, and Deno.
		- 🔒 Type-Safe - Full TypeScript definitions auto-generated for every tool.
		- 📦 Tiny Bundle - Only ~136KB minified, tree-shakeable.

		<!-- 4. Based on [Memorio](https://www.npmjs.com/package/memorio) by Dario Passariello to manage STATE, STORE, SESSION and OBSERVER. You can use Memorio is you need only state management. DpHelper is indicate when you use a complete suite of tools. -->
		> "dphelper is what you'd build if you combined lodash, socket.io, and an AI SDK - but lighter."

		### Example in React
		---

		```js
		import { useEffect } from 'react';
		import 'dphelper';
		## 🚀 Version 3.0: The AI Leap

		function App() {
		// Store a value in the state
		state.test = 'Hello, World!';
		> [!IMPORTANT]
		> Application state is currently handled through Memorio and RGS. To integrate state management into your project, you should install:
		>
		> Simple State and Store Manager [Memorio](http://www.npmjs.com/package/memorio)
		>
		> Enterprise Lever State Manager [Argis RGS](https://www.npmjs.com/package/@biglogic/rgs)

		// Use the stored value in a React component
		useEffect(() => {
		console.log("You can recall from all pages: " + state.test); // Output: "Hello, World!"
		}, []);
		---

		return (
		<div>
		<h1>{state.test}</h1>
		</div>
		);
		}
		`dphelper` has evolved into a powerhouse for AI-driven applications. We've removed legacy dependencies (bye-bye jQuery!) and shifted focus to performance, modularity, and LLM optimization.

		export default App;
		```
		### ✨ Highlights

		## Install
		- 🤖 Advanced AI Module: Built-in support for RAG, token counting, and prompt engineering.
		- 🚀 AI Black Box (Snapshot): The first "Flight Recorder" for apps, capturing the internal state in TOON for instant AI debugging.
		- 🎒 TOON Integration: Native support for Token-Oriented Object Notation (3.0), reducing LLM context usage by up to 50%.
		- 🛠️ Zero Dependencies: Pure vanilla JavaScript/TypeScript architecture.
		- 🌐 Fetch & SSE Pro: High-level networking with automatic retries and custom headers.
		- ⚡ Bulletproof Dispatcher: Integrated listener management with automatic cleanup.
		- 🔄 UI Mirror & Pulse: Cross-tab synchronization and automatic UI state recovery (Zero-Code Persistence).
		- 🌊 SSE Pro: Server-Sent Events with POST & Custom Header support (modern AI streaming ready).
		- 🧬 Modular Types: Auto-generated Type definitions for all 200+ tools.

		Install dpHelper.
		---

		## Table of Contents

		1. [About](#about)
		2. [Installation](#installation)
		3. [AI Power User Guide](#ai-power-user-guide)
		4. [Modular Architecture](#modular-architecture)
		5. [Browser Extension (Chrome/Edge)](#browser-extension-chromeedge)
		6. [Environment Compatibility](#environment-compatibility)
		7. [Security](#security)

		---

		## Installation

		```shell
		@@ -85,24 +90,13 @@ npm i dphelper --save-dev

		or update:
		### Usage

		```shell
		npm i dphelper@latest --save-dev
		```
		Import it precisely once in your entry point (e.g., `index.js`, `main.ts`, or `App.tsx`):

		Use it in the main root file (and only there):

		```js
		import "dphelper";
		// dphelper is now available globally across your entire project!
		```

		or
		For plain HTML/CDN:

		```js
		require("dphelper");
		```

		## Install for EJS or Other Types of Projects (like HTML)

		Note: You don't need to use npm install in this case, or you will get an error.

		```html
		@@ -112,273 +106,121 @@ <script src="https://cdn.jsdelivr.net/npm/dphelper@latest"></script>

		## Live Demo
		---

		[https://tests.a51.dev/](https://tests.a51.dev/)
		## AI Power User Guide

		You can see an HTML version where dpHelper and LayerPro work together seamlessly. dpHelper is compatible with a variety of frontend libraries, including:
		The new `dphelper.ai` module is designed for the modern AI stack (LLMs, RAG, Vector Search).

		* HTML
		* React
		* Vue
		* And any other frontend library
		```javascript
		// ⚡ TOON: The ultimate JSON alternative for prompts
		const toonData = dphelper.ai.toon(myJsonObject);
		// Efficient, compact, and deterministic.

		## Documentation
		// 📏 Context-Aware Token Counting
		const tokens = dphelper.ai.tokenCount(myJsonObject);
		// Automatically calculates tokens based on the optimal TOON representation.

		You can see:
		// 🧩 Smart Chunker (RAG Ready)
		const chunks = dphelper.ai.chunker(longText, { size: 1000, overlap: 200 });

		* [State](https://a51.gitbook.io/dphelper/general/state)
		* [Store](https://a51.gitbook.io/dphelper/general/store)
		* [Observer](https://a51.gitbook.io/dphelper/general/observer)
		* [useObserver](https://a51.gitbook.io/dphelper/general/useobserver)
		* [List of functions](https://a51.gitbook.io/dphelper/general/tools)
		// 🔍 Semantic Similarity
		const score = dphelper.ai.similarity(embeddingA, embeddingB);

		You can see more tutorials, information, and examples about dpHelper [clicking here](https://a51.gitbook.io/dphelper).
		// 🧠 Reasoning Extractor (DeepSeek/O1 support)
		const { reasoning, content } = dphelper.ai.extractReasoning(rawAiReply);

		## State

		### Using the "state"

		You can use the state function to store and reuse data throughout your application. Similar to other state managers, you can save state information in JSON format and access it easily in various contexts, including React useEffect and/or dispatch.

		For example, you can store a value like this: _state.test = 'I am ready'_ and then retrieve it later using state.test.

		_example:_

		You can use the browser's devtools console and type " state.test = 'I am ready' ". Every time you want to use 'test' values, you need just recall state.test.

		```js
		// Set a state
		state.test = "I am ready" *

		// Get the state
		state.test *

		// List all states
		state.list // or just "state" to see the proxy

		// Lock a state from edit (Only for Objects or Array)
		state.test.lock() *

		// Remove a state
		state.remove("test")

		// Remove all states
		state.removeAll()

		*["test" is only an example]

		// 📸 The AI Black Box (Snapshot)
		const appStateToon = dphelper.ai.snapshot();
		// Generates a complete app "mental dump" (URL, gState, Logs) optimized for LLMs.
		```

		### Observer
		---

		Note: _Observer works only with states. Stores are excluded at the moment._
		## Modular Architecture

		If you want to run a function every time a state changes, you can use:
		Every tool in `dphelper` is now a self-contained module. Our new build system automatically:

		```js
		/**
		* Observer is a non-cumulative listener,
		* triggered from customEvent / dispatch from state
		* @parameters
		* [ state \| store, function ]
		*/
		observer( "state.test", () => alert("Test Changes to: " + state.test) )
		\|__________\| \|___________________________________________\|
		State: string Function
		1. Scans the `tools/` directory.
		2. Generates dynamic imports for the core.
		3. Synchronizes TypeScript interfaces in `types/dphelper.d.ts`.

		PS: you need to use the name of state \| store as string
		```
		This ensures that adding new tools is instantaneous and always documented with full Intellisense support.

		You can use it everywhere. Works like "useState" in React but with more flexibility (use one observer for each state!).
		---

		### Example
		## 🔄 UI Mirror & Auto-Recovery

		```js
		import 'dphelper';
		`dphelper` makes your web app feel like a native desktop application with cross-tab intelligence.

		// Use the observer to log the changing state value
		observer(
		'state.count',
		() => console.log("State changed: ", state.count)
		);
		```javascript
		// ⚓ Auto-Recovery: Save scroll and input values across reloads/crashes
		dphelper.UI.anchorContext();

		// Store a value in the state that changes every 5 seconds
		setInterval(() => state.count = Date.now(), 5000);
		```
		// 💓 Pulse: Real-time event bus between all open tabs (No Backend needed!)
		const bus = dphelper.sync.pulse('my-app', (msg) => {
		console.debug('Received from another tab:', msg);
		});
		bus.emit({ action: 'theme-change', value: 'dark' });

		> NOTE: In some cases you need to wrap inside and useEffect in React to avoid multiple observers
		// 🔒 Interlock: Monitor how many tabs of your app are active
		dphelper.browser.interlock((count) => {
		console.debug(`Active tabs: ${count}`);
		});

		#### Another Simple Example

		```js
		import 'dphelper';

		// Set a state
		state.myData = 'Hello, world!';

		// Retrieve the state
		console.log(state.myData); // Output: Hello, world!

		// Observe state changes
		observer('myData', () => {
		console.log('myData has changed to:', state.myData);
		// 🌊 SSE: Modern streaming (Support for POST & Headers)
		const stream = dphelper.sse.open('/api/ai', {
		method: 'POST',
		headers: { 'Authorization': 'Bearer ...' },
		body: JSON.stringify({ prompt: 'Hello AI' })
		});

		// Change the state
		state.myData = 'New value';
		stream.on('message', (data) => console.debug('Chunk:', data));
		stream.on('error', (err) => console.error('Stream failure:', err));
		```

		## useObserver
		---

		```js
		import 'dphelper';
		## Browser Extension (Chrome/Edge)

		// Use the useObserver to log the changing state value
		useObserver(
		() => console.log("State changed: ", state.count)
		, 'state.count'
		);
		![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/screenshot.png)

		// Store a value in the state that changes every 5 seconds
		setInterval(() => state.count = Date.now(), 5000);
		```
		Manage your `dphelper` environment, monitor memory usage, and access documentation directly from your browser.

		## Store
		- [Download for Chrome](https://chrome.google.com/webstore/detail/dphelper-manager-dev-tool/oppppldaoknfddeikfloonnialijngbk)
		- [Download for Edge](https://microsoftedge.microsoft.com/addons/detail/dphelper-manager-dev-to/kphabkbdpaljlfagldhojilhfammepnk)

		### Persistent Storage with dpHelper
		---

		When using dpHelper for permanent storage, you should use the store, which stores data persistently across sessions.
		---

		#### Important Security Note
		## Environment Compatibility

		1. Use store for persistent storage: If you want to store data permanently, use store to ensure it is saved in localStorage.
		`dphelper` tools are classified by their execution target to ensure stability across the stack.

		2. Remove data when necessary: To maintain security, remove stored data when it is no longer needed, such as during logout.
		\| Icon \| Type \| Description \|
		\| :--- \| :--- \| :--- \|
		\| 🌐 \| Client \| Browser only (requires DOM, window, or navigator). \|
		\| 🖥️ \| Server \| Node.js / Bun / Deno only (access to process, fs, etc). \|
		\| 🧬 \| Isomorphic \| Universal. Works in both Browser and Server (AI, Logic, Math). \|

		3. Remove all stored data: Use store.removeAll() to securely remove all stored data from your application.
		### Core Module Status

		```js
		// Set a store:
		store.set("test", { test: "test" })
		- `dphelper.ai`: 🧬 Isomorphic
		- `dphelper.fetch`: 🧬 Isomorphic (Supports Node 18+)
		- `dphelper.sse`: 🌐 Client (Streaming fetch)
		- `dphelper.socket`: 🌐 Client (WebSocket)
		- `dphelper.sync`: 🌐 Client (BroadcastChannel)
		- `dphelper.UI`: 🌐 Client (DOM based)

		// Get a store:
		store.get("test") // Output: { test: "test" }
		---

		// Remove a store:
		store.remove("test") // Output: "ok"

		// Remove all stores:
		store.removeAll() // Output: "ok"
		```

		### 2. Example in React

		```js
		import { useEffect } from 'react';
		import 'dphelper';

		function App() {

		// Store a value in the store (persistent storage)
		store.set(
		'user',
		{
		name: 'John Doe',
		age: 30
		}
		);

		// Use the stored value in a React component
		useEffect(
		() => {
		console.log(store.get("user")); // Output: { name: "John Doe", age: 30 }
		$("#name").text(store.get("user").name)
		}, []
		);

		// Remove all stored data if necessary
		// store.removeAll();

		return (
		<div>
		<h1 id="name">...</h1>
		</div>
		);
		}

		export default App;
		```

		## session

		Similar to store but it's removed when you close the browser.
		For more performance it's better to use state over session. State is global and access to data is more faster and not require the time to resolve promises.

		```js
		// Set a store:
		store.set("test", { test: "test" })

		// Get a store:
		store.get("test") // Output: { test: "test" }

		// Remove a store:
		store.remove("test") // Output: "ok"

		// Remove all stores:
		store.removeAll() // Output: "ok"
		```

		# dpHelper vs Redux vs Zustand vs MobX

		\| Feature \| dpHelper \| Redux / RTK \| Zustand \| MobX \|
		\|---------\|--------------\|------------------\|-------------\|----------\|
		\| Type \| Full suite (190+ utilities) + State Manager \| Predictable state container \| Minimal state manager \| Reactive state manager \|
		\| Boilerplate \| None (single import) \| High (reduced with RTK) \| Low \| Low \|
		\| Global Access \| Immediate global state (`state.x`) \| No, requires provider \| Yes, via store \| Yes, via observable \|
		\| Reactivity \| Built‑in observer \| Only via bindings \| Yes \| Yes (highly reactive) \|
		\| DevTools \| DevTools + Browser Extension \| Redux DevTools \| Yes \| Yes \|
		\| Learning Curve \| Very low \| Medium/High \| Low \| Medium \|
		\| Action Handling \| Simple actions + proxy \| Actions + reducers \| Setter functions \| Decorators / actions \|
		\| Persistence \| Built‑in (state/store/session) \| Via middleware \| Via middleware \| Via plugins \|
		\| Ecosystem \| 190+ built‑in utilities \| Very large \| Medium \| Medium \|
		\| React Usage \| `state.x` anywhere \| Hooks + provider \| Hooks \| Decorators / hooks \|
		\| HTML/Vanilla Usage \| Native (script tag) \| No \| No \| No \|
		\| Philosophy \| “Single source of truth” + full toolbox \| Predictability & immutability \| Simplicity \| Automatic reactivity \|
		\| Best Use Cases \| SaaS apps, dashboards, multi‑framework projects \| Large enterprise apps \| Lightweight React apps \| Highly dynamic UIs \|

		## Console (devtools)

		Type dphelper in the devtool console of your browser to have a look at all available tools that you can use! You can call these from everywhere without import (just one time in the main/root page).

		## Browser Extension (Chrome/Edge) ♥️

		![browser extension](https://img.shields.io/badge/browser%20extension-beta-orange.svg)

		![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/banner.png)

		![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/screenshot.png)

		Chrome: [Download from Google Web Store](https://chrome.google.com/webstore/detail/dphelper-manager-dev-tool/oppppldaoknfddeikfloonnialijngbk)

		Edge: [Download from Microsoft Addons](https://microsoftedge.microsoft.com/addons/detail/dphelper-manager-dev-to/kphabkbdpaljlfagldhojilhfammepnk)

		PS: dpHelper is compatible with all Chromium-based browsers like Edge or Brave!

		## dpHelper Browser Extension

		The dpHelper browser extension allows you to manage your application's dpHelper NPM. Key features include:

		1. Simplified API operations: Easily manage and manipulate data with dpHelper's collection of scripts.
		2. Real-time monitoring: Track memory usage and localStorage to optimize your application's performance.
		3. Stay up-to-date: Receive updates and tips to improve your daily workflow.
		4. Easy installation: Simply import 'dphelper' in your project index to get started.
		5. Global accessibility: All scripts are available globally and can be accessed from anywhere in your application.

		## Security

		[Socket.dev](https://socket.dev/npm/package/dphelper)
		We take security seriously. Every release is audited:

		[Snyk.io](https://security.snyk.io/package/npm/dphelper)
		- [Socket.dev Audit](https://socket.dev/npm/package/dphelper)
		- [Snyk Security Report](https://security.snyk.io/package/npm/dphelper)

		---

		Dario Passariello - <dariopassariello@gmail.com>, All rights reserved - Copyright (c) 2019 - 2026
		Dario Passariello - <dariopassariello@gmail.com>
		All rights reserved - Copyright (c) 2019 - 2026

+140

-540

types/dphelper.d.ts

		@@ -8,566 +8,166 @@ /*!

		////////////////////
		// Global object
		////////////////////
		declare global {

		/**
		* @return dphelper Root.
		*/
		interface _dphelper {
		/**
		* Dynamic index signature for additional properties
		* @private
		*/
		[key: string]: any

		/**
		* Anchor manipulation utilities
		*/
		anchor: {
		/**
		* Converts anchor tags to onClick events
		* @param selector - CSS selector for target elements
		*/
		toOnClick(selector: string): void
		interface Window {
		dphelper: import("./dphelper")._dphelper
		}

		/**
		* Array manipulation utilities
		*/
		array: {
		/**
		* Finds an element in an array by key
		* @param array - Input array to search
		* @param key - Key to search for
		* @returns Found element or undefined
		*/
		find<T>(array: T[], key: any): T \| any

		/**
		* Returns array with unique values
		* @param array - Input array
		* @returns New array with unique values
		*/
		unique<T>(array: T[]): T[]

		/**
		* Deletes an element from array by key
		* @param array - Input array
		* @param key - Key to delete
		*/
		delete<T>(array: T[], key: keyof T): void

		/**
		* Merges two arrays
		* @param arrayA - First array
		* @param arrayB - Second array
		* @returns Merged array
		*/
		merge<T>(arrayA: T[], arrayB: T[]): T[]

		/**
		* Merges two arrays based on a key
		* @param arrayA - First array
		* @param arrayB - Second array
		* @param key - Key to merge on
		* @returns Merged array
		*/
		mergeByKey<T extends Record<string, any>>(arrayA: T[], arrayB: T[], key: keyof T): T[]

		/**
		* Sorts array in ascending order
		* @param array - Input array
		* @returns Sorted array
		*/
		asc<T>(array: T[]): T[]

		/**
		* Sorts array in descending order
		* @param array - Input array
		* @returns Sorted array
		*/
		desc<T>(array: T[]): T[]

		/**
		* Finds duplicate values in array
		* @param array - Input array
		* @returns Array of duplicate values
		*/
		duplicates<T>(array: T[]): T[]

		/**
		* Returns even elements from array
		* @param array - Input array
		* @returns Array with even elements
		*/
		even<T>(array: T[]): T[]

		/**
		* Returns odd elements from array
		* @param array - Input array
		* @returns Array with odd elements
		*/
		odd<T>(array: T[]): T[]

		/**
		* Converts array to object
		* @param array - Input array
		* @returns Resulting object
		*/
		toObj<T>(array: T[]): Record<string, T>

		/**
		* Sums values in a specific column of 2D array
		* @param array - Input 2D array
		* @param column - Column index to sum
		* @returns Sum of values
		*/
		sumColumn(array: number[][], column: number): number

		/**
		* Shuffles array elements randomly
		* @param array - Input array
		* @returns Shuffled array
		*/
		shuffle<T>(array: T[]): T[]

		/**
		* Generates array with sequential numbers
		* @param num - Length of array to generate
		* @returns Generated array
		*/
		generate(num: number): number[]

		/**
		* Tests if array contains only integers
		* @param array - Input array
		* @returns Array of valid integers
		*/
		testArrayInt(array: unknown[]): number[]

		/**
		* Generates random 32-bit number
		* @param number - Upper bound
		* @returns Random number
		*/
		rand32(number: number): number

		/**
		* Finds index of element by key
		* @param array - Input array
		* @param key - Key to search for
		* @returns Found index or -1
		*/
		findindex<T>(array: T[], key: any): number

		/**
		* Converts path array to JSON object
		* @param array - Input array
		* @param separator - Path separator
		* @returns Resulting object
		*/
		pathToJson(array: string[], separator?: string): Record<string, unknown>

		/**
		* Deep clones an object or array
		* @param src - Source to clone
		* @returns Cloned copy
		*/
		deepClone<T>(src: T): T

		/**
		* Checks if arrays have matching elements
		* @param arrayWords - Array of words to match
		* @param arrayToCheck - Array to check against
		* @returns Whether arrays match
		*/
		match(arrayWords: string[], arrayToCheck: string[]): boolean
		interface SubCommand {
		name: string
		version: string
		example: string
		author: string
		creationDate: string
		lastMod: string
		type: string
		active: boolean
		description: string
		env?: "client" \| "server" \| "both"
		subCommand: SubCommand[]
		}

		audio: {
		play: (url: string) => void
		interface Description {
		name: string
		active: boolean
		subCommand: SubCommand[]
		}

		avoid: {
		cache: (uri: string) => string
		}
		var dphelper: import("./dphelper")._dphelper
		}

		browser: {
		state(state: any, title: any, url: any): void
		forw(times: number): void
		back(times: number): void
		reload(): void
		href(url: string): void
		offLine(text?: string): void
		zoom(): number
		status(code: number): string
		}
		// --- AUTO-GENERATED TOOL TYPES START ---
		import { AiTool } from "../tools/ai/index"
		import { AnchorTool } from "../tools/anchor/index"
		import { ArrayTool } from "../tools/array/index"
		import { AudioTool } from "../tools/audio/index"
		import { AvoidTool } from "../tools/avoid/index"
		import { BrowserTool } from "../tools/browser/index"
		import { CheckTool } from "../tools/check/index"
		import { ColorTool } from "../tools/color/index"
		import { CookieTool } from "../tools/cookie/index"
		import { CoordsTool } from "../tools/coords/index"
		import { CreditsTool } from "../tools/credits/index"
		import { DateTool } from "../tools/date/index"
		import { DisableTool } from "../tools/disable/index"
		import { DispatchTool } from "../tools/dispatch/index"
		import { ElementsTool } from "../tools/elements/index"
		import { EventsTool } from "../tools/events/index"
		import { FetchTool } from "../tools/fetch/index"
		import { FormTool } from "../tools/form/index"
		import { FormatTool } from "../tools/format/index"
		import { JsonTool } from "../tools/json/index"
		import { LoadTool } from "../tools/load/index"
		import { LoggingTool } from "../tools/logging/index"
		import { MathTool } from "../tools/math/index"
		import { MemoryTool } from "../tools/memory/index"
		import { ObjectsTool } from "../tools/objects/index"
		import { PathTool } from "../tools/path/index"
		import { PromiseTool } from "../tools/promise/index"
		import { SanitizeTool } from "../tools/sanitize/index"
		import { ScreenTool } from "../tools/screen/index"
		import { ScrollbarTool } from "../tools/scrollbar/index"
		import { SecurityTool } from "../tools/security/index"
		import { ShortcutTool } from "../tools/shortcut/index"
		import { SocketTool } from "../tools/socket/index"
		import { SseTool } from "../tools/sse/index"
		import { SvgTool } from "../tools/svg/index"
		import { SyncTool } from "../tools/sync/index"
		import { SystemTool } from "../tools/system/index"
		import { TextTool } from "../tools/text/index"
		import { TimerTool } from "../tools/timer/index"
		import { ToolsTool } from "../tools/tools/index"
		import { TranslatorsTool } from "../tools/translators/index"
		import { TriggersTool } from "../tools/triggers/index"
		import { TypesTool } from "../tools/types/index"
		import { UiTool } from "../tools/ui/index"
		import { WindowTool } from "../tools/window/index"
		// --- AUTO-GENERATED TOOL TYPES END ---

		check: {
		url: (url: string) => any
		version: (v1: string, v2: string, opts: any) => any
		npmVer: (npm: string) => any
		}
		// --- GLOBALS ---

		color: {
		hex: (c: any) => string
		toHex: (rgb: any) => string
		toRGB: (c: any) => []
		oleColor: (c: any) => string
		gradient: (colorStart: any, colorEnd: any, colorCount: any) => any
		type RTC_PEER_CONNECTION_LIKE = {
		new(configuration?: RTCConfiguration): RTCPeerConnection
		}

		}
		declare const mozRTCPeerConnection: RTC_PEER_CONNECTION_LIKE
		declare const webkitRTCPeerConnection: RTC_PEER_CONNECTION_LIKE

		console: {
		info(name: string, message: string, fn: Function): void
		stop(options?: string[]): void
		toHtml(el: string): void
		declare const require: {
		(id: string): unknown
		context: (directory: string, useSubdirectories?: boolean, regExp?: RegExp) => {
		(id: string): unknown
		keys(): string[]
		resolve(id: string): string
		}
		}

		cookie: {
		set: (pars: {
		name: any,
		value: any,
		time?: any,
		path?: "/",
		sameSite?: "Lax",
		secure?: "Secure" \| "false"
		}) => any
		get: (name: string) => any
		delete: (name: string) => any
		removeAll: () => any
		}
		type RequireType = object

		coords: {
		degreesToRadians: (degrees: any) => any
		latToMeters: (points: any) => any
		toVector: (points: any) => any
		convertToDecDegrees: (deg: any, minutes: any, sec: any, direction: any) => any
		distance: (point1: any, point2: any) => any
		polarToCartesian: (centerX: any, centerY: any, radius: any, angleInDegrees: any) => any
		mapDegreesToPixels: (degree: number, minDegree: number, maxDegree: number, minPixel: number, maxPixel: number, padding: number) => number
		}
		declare function confirm(message: string, func1: Function, func2?: Function): boolean

		date: {
		days: (lang?: string) => string[]
		months: (lang?: string) => string[]
		year: () => number
		toIso: (value: any, int?: string) => string \| null
		toMMDDYYYY: (value: any) => string
		toYYYYMMDD: (value: any) => string \| undefined
		toHuman: (value: any) => string
		convert: (value: any, format: string[]) => string \| null
		iso2Epoch: (value: any) => number
		localIsoTime: (value: any) => string
		utc: () => string
		parse: (value: any, separator?: string) => string \| null
		addDays: (date: any, days: number) => Date
		dateTimeToString: (dateObject: any) => string
		isoToHuman: (value: any, symbol?: string) => string \| null
		fullDate: () => string
		epoch: () => number
		diffInDays: (d1: any, d2: any) => number
		diffInWeeks: (d1: any, d2: any) => number
		diffInMonths: (d1: any, d2: any) => number
		diffInYears: (d1: any, d2: any) => number
		dateToYMD: (date: any) => string
		collection: (params: { date?: Date; type: string; locale?: string }) => string \| undefined
		timeZones: () => string[]
		}
		// --- DPHELPER ---

		disable: {
		select: (el?: string) => void
		spellCheck: (tmr?: number) => void
		rightClick: (el?: string) => void
		copy: (el?: string) => void
		paste: (el?: string) => void
		cut: (el?: string) => void
		drag: (el?: string) => void
		}
		export interface _dphelper {
		[key: string]: any

		dispatch: {
		set: (name: string, value?: any) => void
		listen: (name: string, cb?: (e: Event) => void, flag?: boolean) => void
		remove: (name: string) => void
		}
		// --- AUTO-GENERATED TOOL MEMBERS START ---
		ai: AiTool
		anchor: AnchorTool
		array: ArrayTool
		audio: AudioTool
		avoid: AvoidTool
		browser: BrowserTool
		check: CheckTool
		color: ColorTool
		cookie: CookieTool
		coords: CoordsTool
		credits: CreditsTool
		date: DateTool
		disable: DisableTool
		dispatch: DispatchTool
		element: ElementsTool
		events: EventsTool
		fetch: FetchTool
		form: FormTool
		format: FormatTool
		json: JsonTool
		load: LoadTool
		logging: LoggingTool
		math: MathTool
		memory: MemoryTool
		object: ObjectsTool
		path: PathTool
		promise: PromiseTool
		sanitize: SanitizeTool
		screen: ScreenTool
		scrollbar: ScrollbarTool
		security: SecurityTool
		shortcut: ShortcutTool
		socket: SocketTool
		sse: SseTool
		svg: SvgTool
		sync: SyncTool
		system: SystemTool
		text: TextTool
		timer: TimerTool
		tools: ToolsTool
		translators: TranslatorsTool
		trigger: TriggersTool
		type: TypesTool
		ui: UiTool
		window: WindowTool
		// --- AUTO-GENERATED TOOL MEMBERS END ---

		element: {
		fitScale: (el: any, scale?: number, fit?: boolean) => void
		scaleBasedOnWindow: (elm: any, scale: number, fit: boolean) => void
		setDescription: (description: Description, newObj: any) => void
		setProps: (root: any, desc: any, options?: any) => void
		_list: {
		scripts: Description[]
		sockets: any[]
		[key: string]: any
		}

		events: {
		list: (el: Element) => any
		multi: (element: Element, eventNames: string, listener: EventListener) => void
		copy: (el: string) => void
		onDrag: (elem: string) => void
		keys: (e: KeyboardEvent) => { key: string; ctrl: boolean; alt: boolean; shift: boolean }
		}

		form: {
		serialize: (form: HTMLFormElement) => { [key: string]: any }
		confirmType: (type: string, value: any) => boolean
		required: (value: any) => string \| undefined
		minLength: (value: any, num?: number) => string \| undefined
		maxLength: (value: any, num?: number) => string \| undefined
		maxPhoneNumber: (value: any, num?: number) => string \| undefined
		isNumeric: (value: any) => boolean
		isEmail: (value: any) => boolean
		pattern: (e: Event) => void
		noSpecialChars: (e: Event) => void
		table: (size: [number, number], id: string, elem: HTMLElement) => void
		sanitize: (str: string) => string \| undefined
		}

		format: {
		currency: (value: number, locale?: string, currency?: string) => string
		phoneNumber: (value: string, countryCode?: string) => string
		}

		imports: {
		file: (elem: string, file: string) => Promise<void>
		}

		json: {
		counter: (json: any, key?: string, val?: any) => number \| null
		toCsv: (jsonInput: any) => string
		saveCsvAs: (csvData: string, fileName: string) => void
		is: (str: string) => boolean
		parse: (file: string) => any
		sanitize: (str: string) => string
		sanitizeJsonValue: (str: string) => string
		}

		load: {
		all: (context, cacheName?: string) => void
		file: (filePath: string) => Promise<string>
		fileToElement: (elementSelector: string, filePath: string) => Promise<void>
		json: (filePath: string) => Promise<any>
		remote: (path: string, method?: string, headers?: HeadersInit) => Promise<any>
		script: (scripts: string[], elementSelector?: string) => void
		toJson: (context, cacheName?: string) => void
		}

		logging: {
		list: {
		type: string
		message: string
		}
		reg: (txt: string) => void
		debug: (txt: string) => void
		error: (txt: string) => void
		}

		math: {
		rnd: () => number
		tmr: () => number
		add: (a: number, b: number) => number
		sub: (a: number, b: number) => number
		multi: (a: number, b: number) => number
		div: (a: number, b: number) => number
		rem: (a: number, b: number) => number
		exp: (a: number, b: number) => number
		isOdd: (a: number) => boolean
		float2int: (a: number) => number
		percent: (n: number, tot: number) => number
		isPrime: (n: number) => boolean
		}

		memory: {
		lock: (obj: string) => void
		unlock: (obj: string) => void
		}

		object: {
		toArray: (object: Record<string, any>) => [string, any][]
		replaceNullObjects: (data: Record<string, any>) => Record<string, any>
		serialize: (value: any) => any
		deSerialize: (valueNew: any) => any
		sort: (o: Record<string, any>) => Record<string, any>
		toXML: (obj: Record<string, any>) => string
		find: (array: any[], key: string, value: any) => any
		instance: (obj: any) => any
		updateByKey: (obj: Record<string, any>, key: string, newValue: any) => Record<string, any>
		findindex: (array: any[], key: string) => number
		parse: (val: any) => any
		isObject: (val: any) => boolean
		diff: (obj1: Record<string, any>, obj2: Record<string, any>) => Record<string, { obj1: any, obj2: any }>
		path: (prop: string, array: string[], separator?: string) => string
		}

		path: {
		rail: () => string[]
		hash: () => string[]
		query: (url: string) => Record<string, string>
		}

		promise: {
		check: (p: any) => boolean
		resolve: (data: any) => Promise<any>
		}

		sanitize: {
		html: (s: string) => string
		}

		screen: {
		fullScreen: (el: string) => void
		toggle: (el: string) => void
		info: () => {
		width: number
		height: number
		availWidth: number
		availHeight: number
		colorDepth: number
		pixelDepth: number
		}
		}

		scrollbar: {
		custom: (el: string, options: any) => void
		indicator: (props: any) => void
		position: {
		get: (el: any) => void
		set: (el: any) => void
		}
		smooth: (target: any, speed: any, smooth: any) => void
		scrollTo: (container: string, element: string, gap?: number) => void
		}

		security: {
		uuid: {
		byVal: (string: string) => string
		v4: string
		v5: string
		}
		hashPass: (u: string, p: string, t?: string) => Promise<string>
		crypt: (u: string, p: string, mode?: string) => string
		deCrypt: (u: string, p: string, mode?: string) => string
		AES_KeyGen: (passKey?: string) => string
		SHA256_Hex: (passKey: string) => string
		}

		shortcut: {
		keys: (e: any, trigger: any) => void
		}

		socket: {
		info: () => string
		start: (element: any, server: any, name: string) => void
		conn: (id: any, server: any, name: string) => void
		connect: (server: any, name: string) => void
		open: (id: any, server: any, name: string) => void
		send: (mex: any, type?: string) => void
		ping: (name: string) => void
		receive: (el?: any, name?: string) => void
		keepAlive: (name: string) => void
		check: () => void
		list: () => WebSocket[]
		}

		svg: {
		init: (container: HTMLElement, source1: [HTMLElement, string], source2: [HTMLElement, string], cb?: Function) => void
		check: () => boolean
		update: (rect1: HTMLElement, rect2: HTMLElement, cxn: HTMLElement) => void
		getCurve: (p1: [number, number], p2: [number, number], dx: number) => string
		getIntersection: (dx: number, dy: number, cx: number, cy: number, w: number, h: number) => [number, number]
		setConnector: (source: HTMLElement, side: string) => HTMLElement
		removeConnection: (container: HTMLElement) => void
		makeScrollable: (svgContainer: HTMLElement, scrollContainer: HTMLElement, elm1: HTMLElement, elm2: HTMLElement, rect1: HTMLElement, rect2: HTMLElement) => void
		makeDraggable: (evt: Event) => void
		toggle: (evt: Event, container: HTMLElement, source1: HTMLElement, source2: HTMLElement) => void
		convert: (options) => string \| void
		}

		system: {
		multiSplit: () => any
		}

		text: {
		trim(s: string, c: string, b: number, e: number): string
		capitalize(txt: string): string
		lower(txt: string): string
		upper(txt: string): string
		nl2br(str: string): string
		sanitize(str: string): string
		camelCase: {
		toSpace(string: string): string
		toUnderscore(string: string): string
		}
		fitContainer(el: string): void
		}

		timer: {
		sleep(ms: number): Promise<void>
		percentage(start: string, end: string): string
		}

		tools: {
		getip(): Promise<void>
		byteSize(bytes: number): string
		zIndex(): number
		zeroToFalse(value: number): boolean \| number
		}

		translators: {
		convertMatrixToScale(values: any): number
		}

		trigger: {
		click(elem: string): void
		change(elem: string): void
		input(elem: string): void
		}

		type: {
		of(p: any): string
		instOfObj(p: any): boolean
		isNull(p: any): (i: any) => boolean
		isBool(val: any): boolean
		}

		ui: null

		window: {
		enhancement(): void
		animationframe(): any
		center(params: { url: string; title: string; name: string; w: number; h: number }): void
		onBeforeUnLoad(e: any): void
		purge(d?: Document, time?: number): void
		stopZoomWheel(e: any): void
		setZoom(element?: string, zoom?: number): string
		getZoom(element?: string): number
		}

		}

		////////////////////////////////////////////////////////////////////////////

		declare var dphelper: _dphelper
		type dphelper = _dphelper

		declare var arguments: any
		type arguments = any

		///////////////////

		interface SubCommand {
		name: string
		version: string
		example: string
		author: string
		creationDate: string
		lastMod: string
		type: string
		active: boolean
		description: string
		subCommand: Array<SubCommand> \| typeof Array
		}

		interface Description {
		name: string,
		active: boolean,
		subCommand: Array<SubCommand>,
		}

		declare function confirm(message: string, func1: Function, func2?: Function): boolean
		export { dphelper, _dphelper }

-11

DISCLAIMER.md

		# DISCLAIMER

		```text
		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
		IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
		FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
		AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
		LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
		OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
		SOFTWARE.
		```

-1

docs/_config.yml

theme: jekyll-theme-modernist

-380

docs/index.md

		# [dphelper](https://npmjs.com/package/dphelper)

		![dpHelper](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/banner.svg)

		Manager \| DevTools by [Dario Passariello](https://dario.passariello.ca) (c)

		[![version](https://img.shields.io/npm/v/dphelper.svg)](https://npmjs.org/package/dphelper)
		[![downloads](https://img.shields.io/npm/dm/dphelper.svg)](https://npmjs.org/package/dphelper)

		![jQuery](https://img.shields.io/badge/jQuery-gray?logo=jQuery)
		![Javascript](https://img.shields.io/badge/Javascript-gray?logo=Javascript)
		![React](https://img.shields.io/badge/React-gray?logo=React)
		![TypeScript](https://img.shields.io/badge/TypeScript-gray?logo=typescript)

		![Node.js](https://img.shields.io/badge/Node.js-gray?logo=node.js)
		![Jest](https://img.shields.io/badge/Jest-gray?logo=jest)
		![ESLint](https://img.shields.io/badge/Eslint-gray?logo=eslint)
		![webpack](https://img.shields.io/badge/webpack-gray?logo=webpack)

		![Snik](https://img.shields.io/badge/Snyk-gray?logo=Snyk)
		![Snik](https://img.shields.io/badge/Socket-gray?logo=socket)

		[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://a51.gitbook.io/dphelper)

		## Table of Contents

		1. [About](#about)
		2. [Installation](#install)
		3. [Live Demo](#live-demo)
		4. [Documentation](#documentation)
		1. [State](#state)
		2. [Store](#store)
		3. [Session](#session)
		4. [Observer](#observer)
		5. [useObserver](#useobserver)
		5. [Security](#security)

		## About

		dpHelper is a precise and complete collection of 190+ tools ready to use in all web/SaaS and enterprise applications. State and Store Management are now easy, accessible everywhere in your application, including Ajax or React apps, without the need for extra files.

		1. Single Source of Truth: The application's entire state is held within a single object in one store, ensuring consistent and accessible state management throughout the app.

		2. State is flexible: State changes are facilitated exclusively through actions. These actions, which are straightforward JavaScript objects, delineate what has occurred. This methodology ensures that state changes remain predictable.

		3. Changes are made with proxy handle function: To define state changes, dpHelper employs pure functions as intermediaries. These functions accept the current state as input and produce a new state as output, ensuring predictability and ease of testing in the system.

		<!-- 4. Based on [Memorio](https://www.npmjs.com/package/memorio) by Dario Passariello to manage STATE, STORE, SESSION and OBSERVER. You can use Memorio is you need only state management. DpHelper is indicate when you use a complete suite of tools. -->

		### Example in React

		```js
		import { useEffect } from 'react';
		import 'dphelper';

		function App() {
		// Store a value in the state
		state.test = 'Hello, World!';

		// Use the stored value in a React component
		useEffect(() => {
		console.log("You can recall from all pages: " + state.test); // Output: "Hello, World!"
		}, []);

		return (
		<div>
		<h1>{state.test}</h1>
		</div>
		);
		}

		export default App;
		```

		## Install

		Install dpHelper.

		```shell
		npm i dphelper --save-dev
		```

		or update:

		```shell
		npm i dphelper@latest --save-dev
		```

		Use it in the main root file (and only there):

		```js
		import "dphelper";
		```

		or

		```js
		require("dphelper");
		```

		## Install for EJS or Other Types of Projects (like HTML)

		Note: You don't need to use npm install in this case, or you will get an error.

		```html
		<script src="https://cdn.jsdelivr.net/npm/dphelper@latest"></script>
		```

		## Live Demo

		[https://tests.a51.dev/](https://tests.a51.dev/)

		You can see an HTML version where dpHelper and LayerPro work together seamlessly. dpHelper is compatible with a variety of frontend libraries, including:

		* HTML
		* React
		* Vue
		* And any other frontend library

		## Documentation

		You can see:

		* [State](https://a51.gitbook.io/dphelper/general/state)
		* [Store](https://a51.gitbook.io/dphelper/general/store)
		* [Observer](https://a51.gitbook.io/dphelper/general/observer)
		* [useObserver](https://a51.gitbook.io/dphelper/general/useobserver)
		* [List of functions](https://a51.gitbook.io/dphelper/general/tools)

		You can see more tutorials, information, and examples about dpHelper [clicking here](https://a51.gitbook.io/dphelper).

		## State

		### Using the "state"

		You can use the state function to store and reuse data throughout your application. Similar to other state managers, you can save state information in JSON format and access it easily in various contexts, including React useEffect and/or dispatch.

		For example, you can store a value like this: _state.test = 'I am ready'_ and then retrieve it later using state.test.

		_example:_

		You can use the browser's devtools console and type " state.test = 'I am ready' ". Every time you want to use 'test' values, you need just recall state.test.

		```js
		// Set a state
		state.test = "I am ready" *

		// Get the state
		state.test *

		// List all states
		state.list // or just "state" to see the proxy

		// Lock a state from edit (Only for Objects or Array)
		state.test.lock() *

		// Remove a state
		state.remove("test")

		// Remove all states
		state.removeAll()

		*["test" is only an example]

		```

		### Observer

		Note: _Observer works only with states. Stores are excluded at the moment._

		If you want to run a function every time a state changes, you can use:

		```js
		/**
		* Observer is a non-cumulative listener,
		* triggered from customEvent / dispatch from state
		* @parameters
		* [ state \| store, function ]
		*/
		observer( "state.test", () => alert("Test Changes to: " + state.test) )
		\|__________\| \|___________________________________________\|
		State: string Function

		PS: you need to use the name of state \| store as string
		```

		You can use it everywhere. Works like "useState" in React but with more flexibility (use one observer for each state!).

		### Example

		```js
		import 'dphelper';

		// Use the observer to log the changing state value
		observer(
		'state.count',
		() => console.log("State changed: ", state.count)
		);

		// Store a value in the state that changes every 5 seconds
		setInterval(() => state.count = Date.now(), 5000);
		```

		> NOTE: In some cases you need to wrap inside and useEffect in React to avoid multiple observers

		#### Another Simple Example

		```js
		import 'dphelper';

		// Set a state
		state.myData = 'Hello, world!';

		// Retrieve the state
		console.log(state.myData); // Output: Hello, world!

		// Observe state changes
		observer('myData', () => {
		console.log('myData has changed to:', state.myData);
		});

		// Change the state
		state.myData = 'New value';
		```

		## useObserver

		```js
		import 'dphelper';

		// Use the useObserver to log the changing state value
		useObserver(
		() => console.log("State changed: ", state.count)
		, 'state.count'
		);

		// Store a value in the state that changes every 5 seconds
		setInterval(() => state.count = Date.now(), 5000);
		```

		## Store

		### Persistent Storage with dpHelper

		When using dpHelper for permanent storage, you should use the store, which stores data persistently across sessions.

		#### Important Security Note

		1. Use store for persistent storage: If you want to store data permanently, use store to ensure it is saved in localStorage.

		2. Remove data when necessary: To maintain security, remove stored data when it is no longer needed, such as during logout.

		3. Remove all stored data: Use store.removeAll() to securely remove all stored data from your application.

		```js
		// Set a store:
		store.set("test", { test: "test" })

		// Get a store:
		store.get("test") // Output: { test: "test" }

		// Remove a store:
		store.remove("test") // Output: "ok"

		// Remove all stores:
		store.removeAll() // Output: "ok"
		```

		### 2. Example in React

		```js
		import { useEffect } from 'react';
		import 'dphelper';

		function App() {

		// Store a value in the store (persistent storage)
		store.set(
		'user',
		{
		name: 'John Doe',
		age: 30
		}
		);

		// Use the stored value in a React component
		useEffect(
		() => {
		console.log(store.get("user")); // Output: { name: "John Doe", age: 30 }
		$("#name").text(store.get("user").name)
		}, []
		);

		// Remove all stored data if necessary
		// store.removeAll();

		return (
		<div>
		<h1 id="name">...</h1>
		</div>
		);
		}

		export default App;
		```

		## session

		Similar to store but it's removed when you close the browser.
		For more performance it's better to use state over session. State is global and access to data is more faster and not require the time to resolve promises.

		```js
		// Set a store:
		store.set("test", { test: "test" })

		// Get a store:
		store.get("test") // Output: { test: "test" }

		// Remove a store:
		store.remove("test") // Output: "ok"

		// Remove all stores:
		store.removeAll() // Output: "ok"
		```

		# dpHelper vs Redux vs Zustand vs MobX

		\| Feature \| dpHelper \| Redux / RTK \| Zustand \| MobX \|
		\|---------\|--------------\|------------------\|-------------\|----------\|
		\| Type \| Full suite (190+ utilities) + State Manager \| Predictable state container \| Minimal state manager \| Reactive state manager \|
		\| Boilerplate \| None (single import) \| High (reduced with RTK) \| Low \| Low \|
		\| Global Access \| Immediate global state (`state.x`) \| No, requires provider \| Yes, via store \| Yes, via observable \|
		\| Reactivity \| Built‑in observer \| Only via bindings \| Yes \| Yes (highly reactive) \|
		\| DevTools \| DevTools + Browser Extension \| Redux DevTools \| Yes \| Yes \|
		\| Learning Curve \| Very low \| Medium/High \| Low \| Medium \|
		\| Action Handling \| Simple actions + proxy \| Actions + reducers \| Setter functions \| Decorators / actions \|
		\| Persistence \| Built‑in (state/store/session) \| Via middleware \| Via middleware \| Via plugins \|
		\| Ecosystem \| 190+ built‑in utilities \| Very large \| Medium \| Medium \|
		\| React Usage \| `state.x` anywhere \| Hooks + provider \| Hooks \| Decorators / hooks \|
		\| HTML/Vanilla Usage \| Native (script tag) \| No \| No \| No \|
		\| Philosophy \| “Single source of truth” + full toolbox \| Predictability & immutability \| Simplicity \| Automatic reactivity \|
		\| Best Use Cases \| SaaS apps, dashboards, multi‑framework projects \| Large enterprise apps \| Lightweight React apps \| Highly dynamic UIs \|

		## Console (devtools)

		Type dphelper in the devtool console of your browser to have a look at all available tools that you can use! You can call these from everywhere without import (just one time in the main/root page).

		## Browser Extension (Chrome/Edge) ♥️

		![browser extension](https://img.shields.io/badge/browser%20extension-beta-orange.svg)

		![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/banner.png)

		![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/screenshot.png)

		Chrome: [Download from Google Web Store](https://chrome.google.com/webstore/detail/dphelper-manager-dev-tool/oppppldaoknfddeikfloonnialijngbk)

		Edge: [Download from Microsoft Addons](https://microsoftedge.microsoft.com/addons/detail/dphelper-manager-dev-to/kphabkbdpaljlfagldhojilhfammepnk)

		PS: dpHelper is compatible with all Chromium-based browsers like Edge or Brave!

		## dpHelper Browser Extension

		The dpHelper browser extension allows you to manage your application's dpHelper NPM. Key features include:

		1. Simplified API operations: Easily manage and manipulate data with dpHelper's collection of scripts.
		2. Real-time monitoring: Track memory usage and localStorage to optimize your application's performance.
		3. Stay up-to-date: Receive updates and tips to improve your daily workflow.
		4. Easy installation: Simply import 'dphelper' in your project index to get started.
		5. Global accessibility: All scripts are available globally and can be accessed from anywhere in your application.

		## Security

		[Socket.dev](https://socket.dev/npm/package/dphelper)

		[Snyk.io](https://security.snyk.io/package/npm/dphelper)

		---

		Dario Passariello - <dariopassariello@gmail.com>, All rights reserved - Copyright (c) 2019 - 2026

-63

documents/OBSERVER.md

		# Observer

		## Overview

		This document provides a comprehensive list of all available observer functions in the `dphelper` library along with their descriptions and examples.

		## Functions

		### observer([state.name], [function])

		- Description: Sets up an observer to monitor state changes and trigger a callback.
		- Parameters:
		- `stateName` (string): The name of the state to monitor.
		- `callBack` (Function): The callback function to run when the state changes.
		- `option` (object): Additional options for the observer.
		- Example:

		```javascript
		observer('state.test', (newValue) => {
		console.log('State changed:', newValue);
		});
		```

		### observer([state.name])

		- Description: Recall the observer previously generated.
		- Returns: Console log with a note
		- Example:

		```javascript
		observer('state.test');
		```

		### observer.list

		- Description: See the list of all your observer (eventListener) actually installed.
		- Returns: The list of all installed observers.
		- Example:

		```javascript
		observer.list;
		```

		### remove

		- Description: Remove an observer.
		- Parameters:
		- `name` (string): The name of the observer to remove.
		- Example:

		```javascript
		observer.remove('state.test');
		```

		### removeAll

		- Description: Remove all observers.
		- Returns: void
		- Example:

		```javascript
		observer.removeAll();
		```

-54

documents/SESSION.md

		# dpHelper Session

		## Overview

		This document provides a comprehensive list of all available session functions in the `dphelper` library along with their descriptions and examples.

		Based on [Memorio](https://www.npmjs.com/package/memorio) by Dario Passariello to manage STATE, STORE, SESSION and OBSERVER. You can use Memorio is you need only state management. DpHelper is indicate when you use a complete suite of tools.

		## Functions

		### session.get([session.name])

		- Description: Retrieve an item from session storage.
		- Parameters:
		- `name` (string): The name of the item to retrieve.
		- Example:

		```javascript
		const value = session.get('itemName');
		console.log(value);
		```

		### session.set([name, value])

		- Description: Set an item in session storage.
		- Parameters:
		- `name` (string): The name of the item to set.
		- `value` (any): The value of the item to set.
		- Example:

		```javascript
		session.set('itemName', value);
		```

		### session.remove([session.name])

		- Description: Delete an item from session storage.
		- Parameters:
		- `name` (string): The name of the item to delete.
		- Example:

		```javascript
		session.remove('itemName');
		```

		### session.removeAll()

		- Description: Remove all items from session storage.
		- Parameters: None
		- Example:

		```javascript
		session.removeAll();
		```

-65

documents/STATE.md

		# dpHelper State

		## Overview

		This document provides a comprehensive list of all available state functions in the `dphelper` library along with their descriptions and examples.

		Based on [Memorio](https://www.npmjs.com/package/memorio) by Dario Passariello to manage STATE, STORE, SESSION and OBSERVER. You can use Memorio is you need only state management. DpHelper is indicate when you use a complete suite of tools.

		## Functions

		### state.[state.name] ex: _state.test_

		- Description: Set and get state values.
		- Example:

		```javascript
		// To set a state value
		state.name = 'value';

		// To get a state value
		const value = state.name;
		```

		### state.list

		- Description: Show all states out of proxy.
		- Example:

		```javascript
		state.list;
		```

		### state.remove([state.name])

		- Description: Remove a state.
		- Parameters:
		- `name` (string): The name of the state to remove.
		- Example:

		```javascript
		state.remove('stateName');
		```

		### state.name.lock()

		- Description: Lock a state (only for types: Array, Object).
		- Example:

		```javascript
		state.name = {test:"test"}
		state.name.lock();
		"Now you can't add more data or remove it"
		```

		### state.removeAll()

		- Description: Remove all states.
		- Example:

		```javascript
		state.name = {test:"test"}
		state.removeAll();
		"Now you can't see state.name (all states are removed)"
		"Use for Log-out / Sign-out operation"
		```

-76

documents/STORE.md

		# dpHelper Store

		## Overview

		This document provides a comprehensive list of all available store functions in the `dphelper` library along with their descriptions and examples.

		Based on [Memorio](https://www.npmjs.com/package/memorio) by Dario Passariello to manage STATE, STORE, SESSION and OBSERVER. You can use Memorio is you need only state management. DpHelper is indicate when you use a complete suite of tools.

		## Functions

		### store.get([store.name])

		- Description: Retrieve an item from local storage.
		- Parameters:
		- `name` (string): The name of the item to retrieve.
		- Example:

		```javascript
		const value = store.get('itemName');
		console.log(value);
		```

		### store.set([name, value])

		- Description: Set an item in local storage.
		- Parameters:
		- `name` (string): The name of the item to set.
		- `value` (any): The value of the item to set.
		- Example:

		```javascript
		store.set('itemName', value);
		```

		### store.remove([store.name])

		- Description: Delete an item from local storage.
		- Parameters:
		- `name` (string): The name of the item to delete.
		- Example:

		```javascript
		store.remove('itemName');
		```

		### store.removeAll()

		- Description: Remove all items from local storage.
		- Parameters: None
		- Example:

		```javascript
		store.removeAll();
		```

		### store.quota()

		- Description: Estimate the storage quota and usage.
		- Parameters: None
		- Example:

		```javascript
		const quota = store.quota();
		console.log(quota);
		```

		### store.size()

		- Description: Calculate the total size of all items in local storage.
		- Parameters: None
		- Example:

		```javascript
		const totalSize = store.size();
		console.log(totalSize);
		```

-24

documents/SUMMARY.md

		# Table of contents

		* [dpHelper](README.md)

		## General

		* [State](/documents/STATE.md)
		* [Observer](/documents/OBSERVER.md)
		* [useObserver](/documents/USEOBSERVER.md)
		* [Store](/documents/STORE.md)
		* [Session](/documents/SESSION.md)
		* [All Functions](/documents/TOOLS.md)

		<!-- ## documents

		* [License](LICENSE.md)
		* [Contributing](CONTRIBUTING.md)
		* [Code of Conduct](CODE_OF_CONDUCT.md)
		* [Security](SECURITY.md) -->

		<!-- ## changes

		* [Changelog](CAHNGELOG.md)
		* [History](HISTORY.md) -->

-1282

documents/TOOLS.md

		# All Functions List

		## Overview

		This document provides a comprehensive list of all available functions in the ```js
		dphelper` library along with their descriptions.

		## Functions

		### Anchor

		```js
		dphelper.anchor.toOnClick(el)
		// Converts an element's href attribute to an onclick event.
		```

		### Array

		```js
		dphelper.array.find(array, key)
		// Finds an element in an array by key.
		```

		```js
		dphelper.array.unique(array)
		// Returns an array with unique elements.
		```

		```js
		dphelper.array.delete(array, key)
		// Deletes an element from an array by key.
		```

		```js
		dphelper.array.merge(arrayA, arrayB)
		// Merges two arrays.
		```

		```js
		dphelper.array.mergeByKey(arrayA, arrayB, key)
		// Merges two arrays by a specific key.
		```

		```js
		dphelper.array.asc(array)
		// Sorts an array in ascending order.
		```

		```js
		dphelper.array.desc(array)
		// Sorts an array in descending order.
		```

		```js
		dphelper.array.duplicates(array)
		// Returns an array of duplicate elements.
		```

		```js
		dphelper.array.even(array)
		// Returns an array of even numbers.
		```

		```js
		dphelper.array.odd(array)
		// Returns an array of odd numbers.
		```

		```js
		dphelper.array.toObj(array)
		// Converts an array to an object.
		```

		```js
		dphelper.array.sumColumn(array, column)
		// Sums the values of a specific column in an array.
		```

		```js
		dphelper.array.shuffle(array)
		// Shuffles the elements of an array.
		```

		```js
		dphelper.array.generate(num)
		// Generates an array with a specified number of elements.
		```

		```js
		dphelper.array.testArrayInt(array)
		// Tests if the elements of an array are integers.
		```

		```js
		dphelper.array.rand32(number)
		// Generates a random 32-bit number.
		```

		```js
		dphelper.array.findindex(array, key)
		// Finds the index of an element in an array by key.
		```

		```js
		dphelper.array.pathToJson(array, separator?)
		// Converts an array to a JSON object using a separator.
		```

		```js
		deepClone(src)
		// Creates a deep clone of an object.
		```

		```js
		dphelper.array.match(arrayWords, arrayToCheck)
		// Checks if two arrays match.
		```

		```js
		dphelper.array.shallow(array)
		// Generate a shallow copy of an object.
		```

		```js
		dphelper.array.deeCopy(array)
		// Generate a structured copy of an object.
		```

		```js
		dphelper.array.groupBy(array, key)
		// Generate a structured copy of an object.
		```

		### Audio

		```js
		dphelper.audio.play(url)
		// Plays an audio file from a URL.
		```

		### Avoid

		```js
		dphelper.avoid.cache(uri)
		// Caches a URI.
		```

		### Browser

		```js
		dphelper.browser.state(state, title, url)
		// Changes the browser state.
		```

		```js
		dphelper.browser.forw(times)
		// Moves forward in the browser history.
		```

		```js
		dphelper.browser.back(times)
		// Moves backward in the browser history.
		```

		```js
		dphelper.browser.reload()
		// Reloads the current page.
		```

		```js
		dphelper.browser.href(url)
		// Navigates to a URL.
		```

		```js
		dphelper.browser.offLine(text?)
		// Displays an offline message.
		```

		```js
		dphelper.browser.zoom()
		// Gets the current zoom level.
		```

		```js
		dphelper.browser.status(code)
		// Gets the status text for a status code.
		```

		### Check

		```js
		dphelper.check.url(url)
		// Checks if a URL is valid.
		```

		```js
		dphelper.check.version(v1, v2, opts)
		// Compares two version strings.
		```

		<!-- ```js
		dphelper.check.npmVer(npm)
		// Gets the version of an npm package.
		``` -->

		### Color

		```js
		dphelper.color.hex(c)
		// Converts a color to hex format.
		```

		```js
		dphelper.color.toHex(rgb)
		// Converts RGB to hex format.
		```

		```js
		dphelper.color.toRGB(c)
		// Converts a color to RGB format.
		```

		```js
		dphelper.color.oleColor(c)
		// Converts a color to OLE format.
		```

		```js
		dphelper.color.gradient(colorStart, colorEnd, colorCount)
		// Generates a gradient between two colors.
		```

		### Console

		```js
		dphelper.console.info(name, message, fn)
		// Logs an info message to the console.
		```

		```js
		dphelper.console.stop(options?[])
		// Stops the console.
		```

		```js
		dphelper.console.toHtml(el)
		// Converts console output to HTML.
		```

		### Cookie

		```js
		dphelper.cookie.set(params: { name, value, time?, path?: "/", sameSite?: "Lax", secure?: "Secure" \| "false" })
		// Sets a cookie.
		```

		```js
		dphelper.cookie.get(name)
		// Gets a cookie by name.
		```

		```js
		dphelper.cookie.delete(name)
		// Deletes a cookie by name.
		```

		```js
		dphelper.cookie.removeAll()
		// Clears all cookies.
		```

		### Coords

		```js
		dphelper.coods.degreesToRadians(degrees)
		// Converts degrees to radians.
		```

		```js
		dphelper.coods.latToMeters(points)
		// Converts latitude to meters.
		```

		```js
		dphelper.coods.toVector(points)
		// Converts points to a vector.
		```

		```js
		dphelper.coods.convertToDecDegrees(deg, minutes, sec, direction)
		// Converts coordinates to decimal degrees.
		```

		```js
		dphelper.coods.distance(point1, point2)
		// Calculates the distance between two points.
		```

		```js
		dphelper.coods.polarToCartesian(centerX, centerY, radius, angleInDegrees)
		// Converts polar coordinates to Cartesian coordinates.
		```

		```js
		dphelper.coods.mapDegreesToPixels(degree, minDegree, maxDegree, minPixel, maxPixel, padding)
		// Maps degrees to pixels.
		```

		### Date

		```js
		dphelper.date.days(lang?)
		// Returns the days of the week in a specified language.
		```

		```js
		dphelper.date.months(lang?)
		// Returns the months of the year in a specified language.
		```

		```js
		dphelper.date.year()
		// Returns the current year.
		```

		```js
		dphelper.date.toIso(value, int?)
		// Converts a date to ISO format.
		```

		```js
		dphelper.date.toMMDDYYYY(value)
		// Converts a date to MM/DD/YYYY format.
		```

		```js
		dphelper.date.toYYYYMMDD(value)
		// Converts a date to YYYY/MM/DD format.
		```

		```js
		dphelper.date.toHuman(value)
		// Converts a date to a human-readable format.
		```

		```js
		dphelper.date.convert(value, format[])
		// Converts a date to a specified format.
		```

		```js
		dphelper.date.iso2Epoch(value)
		// Converts an ISO date to epoch time.
		```

		```js
		dphelper.date.localIsoTime(value)
		// Converts a date to local ISO time.
		```

		```js
		dphelper.date.utc()
		// Returns the current UTC time.
		```

		```js
		dphelper.date.parse(value, separator?)
		// Parses a date string.
		```

		```js
		dphelper.date.addDays(date, days)
		// Adds days to a date.
		```

		```js
		dphelper.date.dateTimeToString(dateObject)
		// Converts a date object to a string.
		```

		```js
		dphelper.date.isoToHuman(value, symbol?)
		// Converts an ISO date to a human-readable format.
		```

		```js
		dphelper.date.fullDate()
		// Returns the full date.
		```

		```js
		dphelper.date.epoch()
		// Returns the current epoch time.
		```

		```js
		dphelper.date.diffInDays(d1, d2)
		// Calculates the difference in days between two dates.
		```

		```js
		dphelper.date.diffInWeeks(d1, d2)
		// Calculates the difference in weeks between two dates.
		```

		```js
		dphelper.date.diffInMonths(d1, d2)
		// Calculates the difference in months between two dates.
		```

		```js
		dphelper.date.diffInYears(d1, d2)
		// Calculates the difference in years between two dates.
		```

		```js
		dphelper.date.dateToYMD(date)
		// Converts a date to YYYY-MM-DD format.
		```

		```js
		dphelper.date.collection(params: { date?; type; locale? })
		// Returns a collection of dates.
		```

		```js
		dphelper.date.timeZones()
		// Returns a list of time zones.
		```

		### Disable

		```js
		dphelper.disable.select(el?)
		// Disables text selection.
		```

		```js
		dphelper.disable.spellCheck(tmr?)
		// Disables spell check.
		```

		```js
		dphelper.disable.rightClick(el?)
		// Disables right-click.
		```

		```js
		dphelper.disable.copy(el?)
		// Disables copy.
		```

		```js
		dphelper.disable.paste(el?)
		// Disables paste.
		```

		```js
		dphelper.disable.cut(el?)
		// Disables cut.
		```

		```js
		dphelper.disable.drag(el?)
		// Disables drag.
		```

		### Dispatch

		```js
		dphelper.dispatch.set(name, value?)
		// Sets a dispatch event.
		```

		```js
		dphelper.dispatch.listen(name, cb?, flag?)
		// Listens for a dispatch event.
		```

		```js
		dphelper.dispatch.remove(name)
		// Removes a dispatch event.
		```

		### Element

		```js
		dphelper.element.fitScale(el, scale?, fit?)
		// Fits an element to a scale.
		```

		```js
		dphelper.element.scaleBasedOnWindow(elm, scale, fit)
		// Scales an element based on the window size.
		```

		### Events

		```js
		dphelper.events.list(el)
		// Lists all events on an element.
		```

		```js
		dphelper.events.multi(element, eventNames, listenerListener)
		// Adds multiple event listeners to an element.
		```

		```js
		dphelper.events.copy(el)
		// Copies an element.
		```

		```js
		dphelper.events.onDrag(elem)
		// Adds a drag event to an element.
		```

		```js
		dphelper.events.keys(e): { key; ctrl; alt; shift }
		// Gets the key, ctrl, alt, and shift status from a keyboard event.
		```

		### Form

		```js
		dphelper.form.serialize(form): { [key] }
		// Serializes a form to an object.
		```

		```js
		dphelper.form.confirmType(type, value)
		// Confirms the type of a value.
		```

		```js
		dphelper.form.required(value)
		// Checks if a value is required.
		```

		```js
		dphelper.form.minLength(value, num?)
		// Checks if a value meets the minimum length.
		```

		```js
		dphelper.form.maxLength(value, num?)
		// Checks if a value exceeds the maximum length.
		```

		```js
		dphelper.form.maxPhoneNumber(value, num?)
		// Checks if a phone number exceeds the maximum length.
		```

		```js
		dphelper.form.isNumeric(value)
		// Checks if a value is numeric.
		```

		```js
		dphelper.form.isEmail(value)
		// Checks if a value is an email.
		```

		```js
		dphelper.form.pattern(e)
		// Validates a pattern.
		```

		```js
		dphelper.form.noSpecialChars(e)
		// Disallows special characters.
		```

		```js
		dphelper.form.table(size, id, elem)
		// Creates a table.
		```

		```js
		dphelper.form.sanitize(str)
		// Sanitizes a string.
		```

		### Format

		```js
		dphelper.format.currency(value, locale?, currency?)
		// Formats a value as currency.
		```

		```js
		dphelper.format.phoneNumber(value, countryCode?)
		// Formats a phone number.
		```

		### Imports

		```js
		dphelper.imports.file(elem, file)
		// Imports a file.
		```

		### Json

		```js
		dphelper.json.counter(json, key?, val?)
		// Counts occurrences in a JSON object.
		```

		```js
		dphelper.json.toCsv(jsonInput)
		// Converts JSON to CSV.
		```

		```js
		dphelper.json.saveCsvAs(csvData, fileName)
		// Saves CSV data as a file.
		```

		```js
		dphelper.json.is(str)
		// Checks if a string is valid JSON.
		```

		```js
		dphelper.json.parse(file)
		// Parses a JSON file.
		```

		```js
		dphelper.json.sanitize(str)
		// Sanitizes a JSON string.
		```

		```js
		dphelper.json.sanitizeJsonValue(str)
		// Sanitizes a JSON value.
		```

		### Load

		```js
		dphelper.load.all(context, cacheName?)
		// Loads all modules in a context.
		```

		```js
		dphelper.load.file(filePath)
		// Loads a file.
		```

		```js
		dphelper.load.fileToElement(elementSelector, filePath)
		// Loads a file into an element.
		```

		```js
		dphelper.load.json(filePath)
		// Loads a JSON file.
		```

		```js
		dphelper.load.remote(path, method?, headers?)
		// Loads data from a remote URL.
		```

		```js
		dphelper.load.script(scripts[], elementSelector?)
		// Loads scripts.
		```

		```js
		dphelper.load.toJson(context, cacheName?)
		// Converts a context to JSON.
		```

		### Logging

		```js
		dphelper.logging.list: { type; message }
		// List of log messages.
		```

		```js
		dphelper.logging.reg(txt)
		// Logs a regular message.
		```

		```js
		dphelper.logging.debug(txt)
		// Logs a debug message.
		```

		```js
		dphelper.logging.error(txt)
		// Logs an error message.
		```

		### Math

		```js
		dphelper.math.rnd()
		// Generates a random number.
		```

		```js
		dphelper.math.tmr()
		// Returns the current time in milliseconds.
		```

		```js
		dphelper.math.add(a, b)
		// Adds two numbers.
		```

		```js
		dphelper.math.sub(a, b)
		// Subtracts two numbers.
		```

		```js
		dphelper.math.multi(a, b)
		// Multiplies two numbers.
		```

		```js
		dphelper.math.div(a, b)
		// Divides two numbers.
		```

		```js
		dphelper.math.rem(a, b)
		// Returns the remainder of two numbers.
		```

		```js
		dphelper.math.exp(a, b)
		// Returns the exponent of two numbers.
		```

		```js
		dphelper.math.isOdd(a)
		// Checks if a number is odd.
		```

		```js
		dphelper.math.float2int(a)
		// Converts a float to an integer.
		```

		```js
		dphelper.math.percent(n, tot)
		// Calculates the percentage.
		```

		```js
		dphelper.math.isPrime(n)
		// Checks if a number is prime.
		```

		### Memory

		```js
		dphelper.memory.lock(obj)
		// Locks an object in memory.
		```

		```js
		dphelper.memory.unlock(obj)
		// Unlocks an object in memory.
		```

		### Object

		```js
		dphelper.obj.toArray(object)
		// Converts an object to an array.
		```

		```js
		dphelper.obj.replaceNullObjects(data)
		// Replaces null objects in a record.
		```

		```js
		dphelper.obj.serialize(value)
		// Serializes a value.
		```

		```js
		dphelper.obj.deSerialize(valueNew)
		// Deserializes a value.
		```

		```js
		dphelper.obj.sort(o)
		// Sorts an object.
		```

		```js
		dphelper.obj.toXML(obj)
		// Converts an object to XML.
		```

		```js
		dphelper.obj.find(object, key, value)
		// Finds an element in an object by key and value.
		```

		```js
		dphelper.obj.instance(obj)
		// Returns the instance of an object.
		```

		```js
		dphelper.obj.updateByKey(obj, key, newValue)
		// Updates an object by key.
		```

		```js
		dphelper.obj.findindex(object, key)
		// Finds the index of an element in an object by key.
		```

		```js
		dphelper.obj.parse(val)
		// Parses a value.
		```

		```js
		dphelper.obj.isObject(val)
		// Checks if a value is an object.
		```

		```js
		dphelper.obj.diff(obj1, obj2)
		// Finds the difference between two objects.
		```

		```js
		dphelper.obj.path(prop, object[], separator?)
		// Converts a property path to a string.
		```

		```js
		dphelper.obj.shallow(object)
		// Generate a shallow copy of an object.
		```

		```js
		dphelper.obj.deeCopy(object)
		// Generate a structured copy of an object.
		```

		### Path

		```js
		dphelper.path.rail()
		// Returns the rail path.
		```

		```js
		dphelper.path.hash()
		// Returns the hash path.
		```

		```js
		dphelper.path.query(url)
		// Parses the query string of a URL.
		```

		### Promise

		```js
		dphelper.promise.check(p)
		// Checks if a value is a promise.
		```

		```js
		dphelper.promise.resolve(data)
		// Resolves a promise with data.
		```

		### Sanitize

		```js
		dphelper.sanitize.html(s)
		// Sanitizes HTML.
		```

		### Screen

		```js
		dphelper.screen.fullScreen(el)
		// Enables full screen mode for an element.
		```

		```js
		dphelper.screen.toggle(el)
		// Toggles full screen mode for an element.
		```

		```js
		dphelper.screen.info(): { width; height; availWidth; availHeight; colorDepth; pixelDepth }
		// Gets screen information.
		```

		### Scrollbar

		```js
		dphelper.scrollbar.custom(el, options)
		// Customizes a scrollbar.
		```

		```js
		dphelper.scrollbar.indicator(props)
		// Adds a scrollbar indicator.
		```

		```js
		dphelper.scrollbar.position: { get(el); set(el) }
		// Gets and sets scrollbar position.
		```

		```js
		dphelper.scrollbar.smooth(target, speed, smooth)
		// Smooth scrolls to a target.
		```

		```js
		dphelper.scrollbar.scrollTo(container, element, gap?)
		// Scrolls to an element within a container.
		```

		### Security

		```js
		dphelper.security.uuid: { byVal(string); v4; v5 }
		// Generates UUIDs.
		```

		```js
		dphelper.security.hashPass(u, p, t?)
		// Hashes a password.
		```

		```js
		dphelper.security.crypt(u, p, mode?)
		// Encrypts data.
		```

		```js
		dphelper.security.deCrypt(u, p, mode?)
		// Decrypts data.
		```

		```js
		dphelper.security.AES_KeyGen(passKey?)
		// Generates an AES key.
		```

		```js
		dphelper.security.SHA256_Hex(passKey)
		// Generates a SHA256 hash.
		```

		```js
		dphelper.security.ulid()
		// Generates ULID (Universally Unique Lexicographically Sortable Identifier).
		```

		### Shortcut

		```js
		dphelper.shortcut.keys(e, trigger)
		// Adds a keyboard shortcut.
		```

		### Socket

		```js
		dphelper.socket.info()
		// Gets socket information.
		```

		```js
		dphelper.socket.start(element, server)
		// Starts a socket connection.
		```

		```js
		dphelper.socket.conn(id, server)
		// Connects to a socket server.
		```

		```js
		dphelper.socket.connect(server)
		// Connects to a server.
		```

		```js
		dphelper.socket.open(id, server)
		// Opens a socket connection.
		```

		```js
		dphelper.socket.send(mex, type?)
		// Sends a message through a socket.
		```

		```js
		dphelper.socket.ping()
		// Sends a ping through a socket.
		```

		```js
		dphelper.socket.receive(el?)
		// Receives a message through a socket.
		```

		```js
		dphelper.socket.keepAlive()
		// Keeps a socket connection alive.
		```

		```js
		dphelper.socket.check()
		// Checks the status of a socket connection.
		```

		```js
		dphelper.socket.list()
		// Lists all socket connections.
		```

		### SVG

		```js
		dphelper.svg.init(container, source1, source2, cb?)
		// Initializes an SVG container.
		```

		```js
		dphelper.svg.check()
		// Checks if SVG is supported.
		```

		```js
		dphelper.svg.update(rect1, rect2, cxn)
		// Updates an SVG element.
		```

		```js
		dphelper.svg.getCurve(p1, p2, dx)
		// Gets a curve path between two points.
		```

		```js
		dphelper.svg.getIntersection(dx, dy, cx, cy, w, h)
		// Gets the intersection point of a curve.
		```

		```js
		dphelper.svg.setConnector(source, side)
		// Sets a connector for an SVG element.
		```

		```js
		dphelper.svg.removeConnection(container)
		// Removes a connection from an SVG container.
		```

		```js
		dphelper.svg.makeScrollable(svgContainer, scrollContainer, elm1, elm2, rect1, rect2)
		// Makes an SVG container scrollable.
		```

		```js
		dphelper.svg.makeDraggable(evt)
		// Makes an SVG element draggable.
		```

		```js
		dphelper.svg.toggle(evt, container, source1, source2)
		// Toggles an SVG element.
		```

		```js
		dphelper.svg.convert(options)
		// Converts an SVG element.
		```

		### System

		```js
		dphelper.svg.multiSplit()
		// Splits a string into multiple parts.
		```

		### Terminal

		```js
		dphelper.terminal()
		// Initializes a terminal.
		```

		### Text

		```js
		dphelper.text.trim(s, c, b, e)
		// Trims a string.
		```

		```js
		dphelper.text.capitalize(txt)
		// Capitalizes a string.
		```

		```js
		dphelper.text.lower(txt)
		// Converts a string to lowercase.
		```

		```js
		dphelper.text.upper(txt)
		// Converts a string to uppercase.
		```

		```js
		dphelper.text.nl2br(str)
		// Converts newlines to
		tags.
		```

		```js
		dphelper.text.sanitize(str)
		// Sanitizes a string.
		```

		```js
		dphelper.text.camelCase(str)
		// Converts camelCase to space or underscore.
		```

		```js
		dphelper.text.fitContainer(el)
		// Fits a text element to its container.
		```

		### Timer

		```js
		dphelper.timer.sleep(ms)
		// Pauses execution for a specified time.
		```

		```js
		dphelper.timer.percentage(start, end)
		// Calculates the percentage of time elapsed.
		```

		### Tools

		<!--
		\\ REMOVED
		```js
		dphelper.tools.getip()
		// Gets the IP address.
		``` -->

		```js
		dphelper.tools.byteSize(bytes)
		// Converts bytes to a human-readable format.
		```

		```js
		dphelper.tools.zIndex()
		// Gets the z-index.
		```

		```js
		dphelper.tools.zeroToFalse(value)
		// Converts zero to false.
		```

		### Translators

		```js
		dphelper.translator.convertMatrixToScale(values)
		// Converts a matrix to a scale.
		```

		### Trigger

		```js
		dphelper.trigger.click(elem)
		// Triggers a click event.
		```

		```js
		dphelper.trigger.change(elem)
		// Triggers a change event.
		```

		```js
		dphelper.trigger.input(elem)
		// Triggers an input event.
		```

		### Type

		```js
		dphelper.type.of(p)
		// Gets the type of a value.
		```

		```js
		dphelper.type.instOfObj(p)
		// Checks if a value is an instance of an object.
		```

		```js
		dphelper.type.isNull(p)
		// Checks if a value is null.
		```

		```js
		dphelper.type.isBool(val)
		// Checks if a value is a boolean.
		```

		### UI

		```js
		dphelper.ui: null`
		// User interface operations.
		```

		### Window

		```js
		dphelper.window.enhancement()
		// Enhances the window.
		```

		```js
		dphelper.window.animationframe()
		// Gets the animation frame.
		```

		```js
		dphelper.window.center(params: { url; title; name; w; h })
		// Centers a window.
		```

		```js
		dphelper.window.onBeforeUnLoad(e)
		// Handles the before unload event.
		```

		```js
		dphelper.window.purge(d?, time?)
		// Purges the document.
		```

		```js
		dphelper.window.stopZoomWheel(e)
		// Stops the zoom wheel.
		```

		```js
		dphelper.window.setZoom(element?, zoom?)
		// Sets the zoom level.
		```

		```js
		dphelper.window.getZoom(element?)
		// Gets the zoom level.
		```

-26

documents/USEOBSERVER.md

		# useObserver

		## Overview

		This document provides a comprehensive list of all available useObserver functions in the `dpHelper` library along with their descriptions and examples.

		## Functions

		### useObserver(()=>{ YOUR CODE }, "state.name")

		- Description: Sets up an useObserver to monitor state changes and trigger a callback.
		- Parameters:
		- `stateName` (string): The name of the state to monitor.
		- `callBack` (Function): The callback function to run when the state changes.
		- `option` (object): Additional options for the useObserver.

		- Example:
		> The format is really similar to React useEffect

		```javascript
		useObserver(
		() => {
		console.log('State changed:', newValue);
		}, 'state.test'
		);
		```

-22

index.d.ts

		/*!
		dphelper
		Copyright (c) 2019 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		// VENDORS
		/// <reference path="./types/jquery.d.ts" />
		/// <reference path="./types/idb.d.ts" />

		// BY DARIO PASSARIELLO
		/// <reference path="./types/dphelper.d.ts" />
		/// <reference path="./types/memorio.d.ts" />
		/// <reference path="./types/observer.d.ts" />
		/// <reference path="./types/useObserver.d.ts" />
		/// <reference path="./types/state.d.ts" />
		/// <reference path="./types/session.d.ts" />
		/// <reference path="./types/store.d.ts" />
		/// <reference path="./types/cache.d.ts" />

-27

types/cache.d.ts

		/*!
		dphelper
		Copyright (c) 2019 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* Cache is used for internal use only... but you can use if you need.
		* @return Some stuff you cache... usually used for dynamic imports from dphelper.
		*/

		interface _cache {

		/**
		* Create a cache, please use state instead!
		*
		* @example
		* cache.myCache = any
		*
		* @since dphelper 1.0.6
		*/
		[key: string]: any
		}

		declare var cache: _cache
		type cache = _cache

-21

types/idb.d.ts

		/*!
		dphelper
		Copyright (c) 2019 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* idb is indexedDB simplification by dphelper
		* @return IndexedDB editing and maintain.
		*/

		interface _idb {
		[key: string]: any
		}

		declare var idb: _idb
		declare var idbases: any

		type idb = _idb
		type idbases = {}

-20

types/jquery.d.ts

		/*!
		dphelper
		Copyright (c) 2019 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		declare var $: any
		declare var jQuery: any
		declare module 'jquery'

		// ////////////////////////////////////////////////////////////////

		interface window {
		$: any
		jQuery: any
		}

		type $ = {}
		type jQuery = {}

-21

types/memorio.d.ts

		/*!
		memorio
		Copyright (c) 2025 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		////////////////////
		// Global object
		////////////////////

		/**
		* @return memorio Root.
		*/
		interface _memorio {}

		////////////////////////////////////////////////////////////////////////////

		declare var memorio: _memorio
		type memorio = _memorio

-47

types/observer.d.ts

		/*!
		memorio
		Copyright (c) 2025 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* Observer run a callback anytime the associated state going to change
		* @return Execution of function after state change.
		*/
		interface _observer {

		/**
		* Generate your observer
		*
		* @example
		* observer("myState", Function)
		*
		* @since memorio 1.0.6
		*/
		(stateName: string, callBack: any): any

		/**
		* List of active observers
		*
		* @example
		* observer.list()
		*
		* @since memorio 1.0.6
		*/
		readonly list?: () => void

		/**
		* Remove the active observer (not the state)
		*
		* @example
		* observer.remove("myState")
		*
		* @since memorio 1.0.6
		*/
		readonly remove?: (name: string, callBack?: any, flag?: boolean) => void

		}

		declare var observer: _observer
		type observer = _observer

-67

types/session.d.ts

		/*!
		memorio
		Copyright (c) 2025 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* Create states using: session.set("example",{test:"test"})
		*/
		interface _session {

		/**
		* Create a new session
		*
		* @example
		* session.set("test","example") // or Array, Object, Number, Functions...
		*
		* @since memorio 0.0.1
		* @param name The String as name to define the session.
		* @param param The information taht you want to session (Any).
		* @return boolean
		*/
		set: (name: string, value: any) => void

		/**
		* Have back the data from a session.
		*
		* @example
		* session.get("test")
		*
		* @since memorio 0.0.1
		* @param name The String as name to define the session.
		*/
		get: (name: string) => any

		/**
		* Delete an existing session:
		*
		* @example
		* session.delete("test")
		* session.remove("test")
		*
		* @since memorio 0.0.1
		* @param name The String as name to define the session.
		* @return boolean
		*/
		delete: (name: string) => boolean \| undefined
		remove: (name: string) => boolean \| undefined

		/**
		* Delete all storages
		*
		* @example
		* session.clearAll()
		* session.removeAll()
		*
		* @since memorio 0.0.1
		* @return boolean
		*/
		clearAll: () => boolean
		removeAll: () => boolean

		}

		declare var session: _session
		type session = _session

-71

types/state.d.ts

		/*!
		memorio
		Copyright (c) 2025 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* If you use only "state" you get the entire Proxy object
		* @return Proxy Object of all states.
		*/
		interface _state {

		/**
		* Create states using: state.test = "example"
		*
		* @example
		* state.myStuff = any
		*
		* @since memorio 0.0.1
		* @param key The name of the state for which you want to modify the action.
		* @return The previous values (Any).
		* Important: Object is a Proxy.
		*/
		[key: string]: any

		/**
		* Delete entire state using: state.remove("test")
		*
		* @example
		* state.remove(stateName)
		*
		* @since memorio 0.0.1
		* @param stateName The name of the state for which you want to delete.
		* @return boolean.
		*/
		readonly remove?: (stateName: string) => any

		/**
		* List all states using: state.list
		*
		* @example
		* state.removeAll()
		*
		* @since memorio 1.8.92
		* @return Remove all states.
		*/
		readonly removeAll?: () => any

		/**
		* List all states using: state.list
		*
		* @example
		* state.list
		*
		* @since memorio 0.0.1
		* @return Object of all states (Not the Proxy).
		*/
		readonly list?: (stateName: string) => any

		/**
		* Generate a message for "memorio"
		* Note: FOR INTERNAL USE ONLY.
		* @since memorio 0.0.1
		*/
		readonly mex?: any

		}

		declare var state: _state
		type state = _state

-91

types/store.d.ts

		/*!
		memorio
		Copyright (c) 2025 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* Create states using: store.set("example",{test:"test"})
		*/
		interface _store {

		/**
		* Create a new store
		*
		* @example
		* store.set("test","example") // or Array, Object, Number, Functions...
		*
		* @since memorio 0.0.1
		* @param name The String as name to define the store.
		* @param param The information taht you want to store (Any).
		* @return boolean
		*/
		set: (name: string, value: any) => void

		/**
		* Have back the data from a store.
		*
		* @example
		* store.get("test")
		*
		* @since memorio 0.0.1
		* @param name The String as name to define the store.
		*/
		get: (name: string) => any

		/**
		* Delete an existing store:
		*
		* @example
		* store.delete("test")
		* store.remove("test")
		*
		* @since memorio 0.0.1
		* @param name The String as name to define the store.
		* @return boolean
		*/
		delete: (name: string) => boolean \| undefined
		remove: (name: string) => boolean \| undefined

		/**
		* Delete all storages
		*
		* @example
		* store.clearAll()
		* store.removeAll()
		*
		* @since memorio 0.0.1
		* @return boolean
		*/
		clearAll: () => boolean
		removeAll: () => boolean

		/**
		* Know how much space you have for total storages
		*
		* @example
		* store.quota()
		*
		* @since memorio 0.0.1
		* @return values
		*/
		quota: () => void

		/**
		* Get the size of stores an the total
		*
		* @example
		* store.size()
		*
		* @since memorio 0.0.1
		* @return dimension in kb
		*/
		size: () => number

		// TODO
		// readonly increaseQuota: (value: number) => void
		}

		declare var store: _store
		type store = _store

-28

types/useobserver.d.ts

		/*!
		memorio
		Copyright (c) 2025 Dario Passariello <dariopassariello@gmail.com>
		Licensed under MIT License, see
		https://dario.passariello.ca
		*/

		/**
		* useObserver run a callback anytime the associated state going to change
		* @return Execution of function after state change.
		*/
		interface _useObserver {

		/**
		* Generate your useObserver
		*
		* @example
		* useObserver(Function, "state.myState")
		*
		* @since memorio 1.0.6
		*/
		(func: Function, stateName: string): any


		}

		declare var useObserver: _useObserver
		type useObserver = _useObserver

index.js

Sorry, the diff of this file is too big to display

dphelper - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes