tiny-essentials 1.20.2 → 1.21.0

package/dist/v1/css/TinyNotify.css

@@ -1,350 +0,0 @@
-:root {
-  --notify-width: clamp(280px, 90vw, 400px);
-  --notify-spacing: 1rem;
-  --notify-z-index: 1000;
-  --notify-transition: opacity 0.3s ease, transform 0.3s ease;
-  --notify-padding: 1rem;
-  --notify-border-radius: 0.75rem;
-  --notify-font-size: 1rem;
-  --notify-font-family: sans-serif;
-  --notify-color-bg: #ffffff;
-  --notify-color-text: #333333;
-  --notify-color-shadow: rgba(0, 0, 0, 0.1);
-  --notify-close-size: 1.25rem;
-  --notify-close-color: #444;
-  --notify-close-color-hover: #000;
-  --notif-center-remove-transition: opacity 0.3s ease, transform 0.3s ease;
-  --notif-center-bg-transition: background 0.2s ease;
-  --notif-center-transform: transform 0.3s ease;
-  --notif-center-width: clamp(300px, 90vw, 400px);
-  --notif-center-height: 100vh;
-  --notif-center-bg: rgba(255, 255, 255, 0.85);
-  --notif-center-blur: 12px;
-  --notif-center-shadow: rgba(0, 0, 0, 0.2);
-  --notif-center-x-padding: 1rem;
-  --notif-center-y-padding: 1rem;
-  --notif-center-z-index: 1050;
-  --notif-border: #000;
-  --notif-unread-border: #bd0b0b;
-  --notif-border-unread: ;
-  --notif-item-close: #666;
-  --notif-item-close-hover: #000;
-  --notif-item-bg: #ffffff;
-  --notif-item-unread-bg: #ffffff;
-  --notif-item-text: #222;
-  --notif-item-radius: 0.75rem;
-  --notif-item-padding: 1rem;
-  --notif-item-shadow: rgba(0, 0, 0, 0.1);
-  --notif-close-size: 1.5rem;
-  --notif-close-color: #444;
-  --notif-close-color-hover: #000;
-  --notif-bell-size: 3rem;
-  --notif-bell-bg: #ffffff;
-  --notif-bell-color: #333;
-  --notif-bell-shadow: rgba(0, 0, 0, 0.2);
-  --notif-bell-z-index: 1040;
-  --notif-bell-radius: 50%;
-  --notif-bell-hover-bg: #f0f0f0;
-  --notif-badge-bg: #d32f2f;
-  --notif-badge-color: #ffffff;
-  --notif-badge-size: 1.25rem;
-  --notif-badge-font-size: 0.75rem;
-  --notif-badge-border: none;
-}
-
-/* Notification container */
-.notify-container {
-  position: fixed;
-  display: flex;
-  gap: var(--notify-spacing);
-  width: var(--notify-width);
-  z-index: var(--notify-z-index);
-  pointer-events: none;
-}
-.notify-container.left {
-  left: var(--notify-spacing);
-  align-items: flex-start;
-}
-.notify-container.right {
-  right: var(--notify-spacing);
-  align-items: flex-end;
-}
-.notify-container.center {
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-}
-.notify-container.top {
-  flex-direction: column;
-  top: var(--notify-spacing);
-}
-.notify-container.top .notify.enter {
-  transform: translateY(-10px);
-}
-.notify-container.top .notify.exit {
-  transform: translateY(-10px);
-}
-.notify-container.bottom {
-  flex-direction: column-reverse;
-  bottom: var(--notify-spacing);
-}
-.notify-container.bottom .notify.enter {
-  transform: translateY(10px);
-}
-.notify-container.bottom .notify.exit {
-  transform: translateY(10px);
-}
-.notify-container .notify {
-  position: relative;
-  background-color: var(--notify-color-bg);
-  color: var(--notify-color-text);
-  box-shadow: 0 4px 8px var(--notify-color-shadow);
-  border-radius: var(--notify-border-radius);
-  padding: var(--notify-padding);
-  font-size: var(--notify-font-size);
-  font-family: var(--notify-font-family);
-  width: 100%;
-  pointer-events: auto;
-  transition: var(--notify-transition);
-  opacity: 1;
-}
-.notify-container .notify .avatar {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  object-fit: cover;
-  float: left;
-  margin-right: 0.5rem;
-}
-.notify-container .notify .close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
-  background: transparent;
-  border: none;
-  font-size: var(--notify-close-size);
-  cursor: pointer;
-  line-height: 1;
-  color: var(--notify-close-color);
-  padding: 0;
-  margin: 0;
-}
-.notify-container .notify .close:hover {
-  color: var(--notify-close-color-hover);
-}
-.notify-container .notify.clickable {
-  cursor: pointer;
-}
-.notify-container .notify.clickable:hover {
-  background-color: var(--notify-color-bg-hover, rgba(0, 0, 0, 0.05));
-}
-.notify-container .notify.enter {
-  opacity: 0;
-}
-.notify-container .notify.show {
-  opacity: 1;
-  transform: translateY(0);
-}
-.notify-container .notify.exit {
-  opacity: 0;
-}
-
-/* Notification center */
-.notify-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.35);
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  padding: 1rem;
-  z-index: var(--notif-center-z-index);
-  transition: var(--notif-center-bg-transition);
-}
-.notify-overlay.hidden {
-  background-color: transparent;
-  pointer-events: none;
-}
-.notify-overlay .notify-center {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: var(--notif-center-width);
-  height: var(--notif-center-height);
-  background-color: var(--notif-center-bg);
-  backdrop-filter: blur(var(--notif-center-blur));
-  box-shadow: -4px 0 12px var(--notif-center-shadow);
-  padding-top: var(--notif-center-y-padding);
-  padding-bottom: var(--notif-center-y-padding);
-  padding-left: var(--notif-center-x-padding);
-  padding-right: var(--notif-center-x-padding);
-  display: flex;
-  flex-direction: column;
-  z-index: var(--notif-center-z-index);
-  transform: translateX(100%);
-  transition: var(--notif-center-transform);
-}
-.notify-overlay .notify-center.open {
-  transform: translateX(0%);
-}
-.notify-overlay .notify-center .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.notify-overlay .notify-center .options {
-  display: flex;
-}
-.notify-overlay .notify-center .options > button {
-  background: none;
-  border: none;
-  font-size: var(--notif-close-size);
-  color: var(--notif-close-color);
-  cursor: pointer;
-}
-.notify-overlay .notify-center .options > button > svg {
-  align-items: center;
-  display: flex;
-}
-.notify-overlay .notify-center .options > button:hover {
-  color: var(--notif-close-color-hover);
-}
-.notify-overlay .notify-center .list {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  scrollbar-width: thin;
-  scrollbar-color: #999 transparent;
-}
-.notify-overlay .notify-center .list::-webkit-scrollbar {
-  width: 6px;
-}
-.notify-overlay .notify-center .list::-webkit-scrollbar-thumb {
-  background: #aaa;
-  border-radius: 3px;
-}
-.notify-overlay .notify-center .item {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  background-color: var(--notif-item-bg);
-  color: var(--notif-item-text);
-  border-radius: var(--notif-item-radius);
-  padding: var(--notif-item-padding);
-  box-shadow: 0 2px 6px var(--notif-item-shadow);
-  font-size: 0.95rem;
-  transition: var(--notif-center-remove-transition);
-  border-left-style: solid;
-  border-left-color: var(--notif-border);
-}
-.notify-overlay .notify-center .item .avatar {
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background-size: cover;
-  background-position: center;
-  margin-right: 10px;
-}
-.notify-overlay .notify-center .item.unread {
-  background-color: var(--notif-item-unread-bg);
-  border-left-color: var(--notif-unread-border);
-}
-.notify-overlay .notify-center .item.removing {
-  opacity: 0;
-  transform: translateY(-10px);
-  pointer-events: none !important;
-}
-.notify-overlay .notify-center .item.clickable {
-  cursor: pointer;
-}
-.notify-overlay .notify-center .item.clickable:hover {
-  background-color: var(--notif-hover, rgba(0, 0, 0, 0.05));
-}
-.notify-overlay .notify-center .item .content {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-}
-.notify-overlay .notify-center .item .title {
-  font-weight: bold;
-  margin-bottom: 0.25rem;
-}
-.notify-overlay .notify-center .item .message {
-  font-size: 0.95rem;
-}
-.notify-overlay .notify-center .item .notify-close {
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  line-height: 1;
-  color: var(--notif-item-close);
-  cursor: pointer;
-  padding: 0.25rem;
-}
-.notify-overlay .notify-center .item .notify-close:hover {
-  color: var(--notif-item-close-hover);
-}
-
-@media (max-width: 600px) {
-  .notify-center {
-    border-radius: 0;
-    width: 100vw;
-    padding: 0px !important;
-  }
-  .notify-center .header {
-    padding-top: var(--notif-center-y-padding);
-  }
-  .notify-center .header,
-  .notify-center .list {
-    padding-left: var(--notif-center-x-padding);
-    padding-right: var(--notif-center-x-padding);
-  }
-}
-/* Notification bell */
-.notify-bell {
-  position: fixed;
-  bottom: 1.5rem;
-  right: 1.5rem;
-  width: var(--notif-bell-size);
-  height: var(--notif-bell-size);
-  background-color: var(--notif-bell-bg);
-  color: var(--notif-bell-color);
-  border: none;
-  border-radius: var(--notif-bell-radius);
-  box-shadow: 0 4px 8px var(--notif-bell-shadow);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: var(--notif-bell-z-index);
-  font-size: 1.4rem;
-  transition: var(--notif-center-bg-transition);
-}
-.notify-bell:hover {
-  background-color: var(--notif-bell-hover-bg);
-}
-.notify-bell .badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(25%, -25%);
-  background-color: var(--notif-badge-bg);
-  color: var(--notif-badge-color);
-  border: var(--notif-badge-border);
-  border-radius: 999px;
-  min-width: var(--notif-badge-size);
-  height: var(--notif-badge-size);
-  font-size: var(--notif-badge-font-size);
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.3em;
-  pointer-events: none;
-}
-.notify-bell .badge[data-value="0"] {
-  display: none;
-}

package/dist/v1/css/aiMarker.css

@@ -1,4 +0,0 @@
-body.detect-made-by-ai .made-by-ai {
-  color: yellow;
-  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
-}

package/docs/v1/basics/html_deprecated.md

@@ -1,127 +0,0 @@
-### 🚀 `areHtmlElsColliding()`
-
-Check if two DOM elements are **colliding on the screen**! Perfect for games, draggable elements, UI interactions, and more.
-
-This function checks whether **two HTML elements are overlapping** (colliding) within the viewport. It uses their bounding boxes (`getBoundingClientRect()`) to perform a simple AABB (Axis-Aligned Bounding Box) collision detection.
-
-Combine it with `mousemove`, `drag`, or animation listeners for dynamic collision detection in real-time!
-
-It compares the bounding rectangles of both elements:
-
-* ✅ Checks if **rect1** is NOT entirely to the left, right, above, or below **rect2**.
-* ✅ If none of these are true, then the elements are overlapping.
-
-#### 🧠 Syntax
-
-```javascript
-areHtmlElsColliding(elem1, elem2);
-```
-
-#### 🎯 Parameters
-
-| Parameter | Type      | Description             |
-| --------- | --------- | ----------------------- |
-| `elem1`   | `Element` | The first DOM element.  |
-| `elem2`   | `Element` | The second DOM element. |
-
-#### 🔁 Return
-
-| Type      | Description                                                        |
-| --------- | ------------------------------------------------------------------ |
-| `boolean` | ✅ `true` if elements are colliding. <br>❌ `false` if they are not. |
-
-#### 📦 Example
-
-```javascript
-const box1 = document.getElementById('box1');
-const box2 = document.getElementById('box2');
-
-if (areHtmlElsColliding(box1, box2)) {
-  console.log('🎯 Collision detected!');
-} else {
-  console.log('❌ No collision.');
-}
-```
-
-#### 🚧 Limitations
-
-* Only works with **axis-aligned elements** (rectangular shapes).
-* Does not handle rotated elements or complex shapes.
-
----
-
-### 🔲 `getHtmlElBordersWidth(el)`
-
-📏 Returns the total **border width** of an element using `border{Side}Width` values from computed styles.
-
-```js
-getHtmlElBordersWidth(el: Element): HtmlElBoxSides
-```
-
-* `el`: The target DOM element.
-* **Returns**: An object containing total horizontal/vertical border widths, and each side individually.
-
----
-
-### 🔳 `getHtmlElBorders(el)`
-
-📐 Returns the total **border size** of an element using `border{Side}` shorthand values from computed styles.
-
-```js
-getHtmlElBorders(el: Element): HtmlElBoxSides
-```
-
-* `el`: The target DOM element.
-* **Returns**: An object with total horizontal/vertical border sizes and all four sides.
-
----
-
-### ➖ `getHtmlElMargin(el)`
-
-📏 Returns the total **margin** of an element using `margin{Side}` from computed styles.
-
-```js
-getHtmlElMargin(el: Element): HtmlElBoxSides
-```
-
-* `el`: The target DOM element.
-* **Returns**: An object containing margin values for each side and totals for horizontal (`x`) and vertical (`y`).
-
----
-
-### ➕ `getHtmlElPadding(el)`
-
-🧩 Returns the total **padding** of an element using `padding{Side}` from computed styles.
-
-```js
-getHtmlElPadding(el: Element): HtmlElBoxSides
-```
-
-* `el`: The target DOM element.
-* **Returns**: Padding values for all sides and summed horizontal (`x`) and vertical (`y`) values.
-
----
-
-### 👁️ `isInViewport(element)`
-
-🔍 Checks if an element is **partially visible** in the current viewport.
-
-```js
-isInViewport(element: HTMLElement): boolean
-```
-
-* `element`: The DOM element to check.
-* **Returns**: `true` if the element is at least partially visible; `false` otherwise.
-
----
-
-### ✅ `isScrolledIntoView(element)`
-
-📦 Checks if an element is **fully visible** (top and bottom) within the viewport.
-
-```js
-isScrolledIntoView(element: HTMLElement): boolean
-```
-
-* `element`: The DOM element to check.
-* **Returns**: `true` if the entire element is within the viewport; `false` otherwise.