tiny-essentials 1.10.2 → 1.12.0

package/dist/{TinyBasicsEs.js → v1/TinyDragger.js}

@@ -2121,351 +2121,17 @@ function fromByteArray (uint8) {
 /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
 // This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
 (() => {
 "use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  addAiMarkerShortcut: () => (/* reexport */ addAiMarkerShortcut),
-  arraySortPositions: () => (/* reexport */ arraySortPositions),
-  asyncReplace: () => (/* reexport */ asyncReplace),
-  cloneObjTypeOrder: () => (/* reexport */ cloneObjTypeOrder),
-  countObj: () => (/* reexport */ countObj),
-  extendObjType: () => (/* reexport */ extendObjType),
-  formatBytes: () => (/* reexport */ formatBytes),
-  formatCustomTimer: () => (/* reexport */ formatCustomTimer),
-  formatDayTimer: () => (/* reexport */ formatDayTimer),
-  formatTimer: () => (/* reexport */ formatTimer),
-  getAge: () => (/* reexport */ getAge),
-  getSimplePerc: () => (/* reexport */ getSimplePerc),
-  getTimeDuration: () => (/* reexport */ getTimeDuration),
-  isJsonObject: () => (/* reexport */ isJsonObject),
-  objType: () => (/* reexport */ objType),
-  reorderObjTypeOrder: () => (/* reexport */ reorderObjTypeOrder),
-  ruleOfThree: () => (/* reexport */ ruleOfThree),
-  shuffleArray: () => (/* reexport */ shuffleArray),
-  toTitleCase: () => (/* reexport */ toTitleCase),
-  toTitleCaseLowerFirst: () => (/* reexport */ toTitleCaseLowerFirst)
+  TinyDragger: () => (/* reexport */ libs_TinyDragger)
 });
 
-;// ./src/legacy/libs/arraySortPositions.mjs
-/**
- * Generates a comparator function to sort an array of objects by a given key.
- *
- * @param {string} item - The object key to sort by.
- * @param {boolean} [isReverse=false] - If `true`, the sorting will be in descending order.
- * @returns {(a: Object<string|number, *>, b: Object<string|number, *>) => number} Comparator function compatible with Array.prototype.sort().
- *
- * @example
- * const arr = [{ pos: 2 }, { pos: 1 }, { pos: 3 }];
- * arr.sort(arraySortPositions('pos')); // Ascending: [{pos: 1}, {pos: 2}, {pos: 3}]
- *
- * @example
- * const arr = [{ pos: 2 }, { pos: 1 }, { pos: 3 }];
- * arr.sort(arraySortPositions('pos', true)); // Descending: [{pos: 3}, {pos: 2}, {pos: 1}]
- */
-function arraySortPositions(item, isReverse = false) {
-  if (!isReverse) {
-    return function (a, b) {
-      return a[item] < b[item] ? -1 : a[item] > b[item] ? 1 : 0;
-    };
-  } else {
-    return function (a, b) {
-      return a[item] > b[item] ? -1 : a[item] < b[item] ? 1 : 0;
-    };
-  }
-}
-
-;// ./src/legacy/libs/replaceAsync.mjs
-/**
- * Asynchronously replaces matches in a string using a regex and an async function.
- *
- * @param {string} str - The input string to perform replacements on.
- * @param {RegExp} regex - The regular expression to match substrings for replacement.
- * @param {Function} asyncFn - An asynchronous function that returns a replacement for each match.
- *                             It receives the same arguments as a standard `replace` callback.
- * @returns {Promise<string>} The resulting string with all async replacements applied.
- *
- * @example
- * await asyncReplace("Hello @user1 and @user2!", /@\w+/g, async (mention) => {
- *   return await getUserNameFromMention(mention);
- * });
- */
-async function asyncReplace(str, regex, asyncFn) {
-  /**
-   * @type {any[]}
-   */
-  const promises = [];
-
-  // Collect promises
-  str.replace(regex, (match, ...args) => {
-    promises.push(asyncFn(match, ...args));
-    return match;
-  });
-
-  const data = await Promise.all(promises);
-
-  // Replace using the resolved data
-  return str.replace(regex, () => data.shift());
-}
-
-;// ./src/v1/basics/array.mjs
-// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
-
-/**
- * Randomly shuffles the elements of an array in place using the Fisher–Yates algorithm.
- *
- * This implementation ensures a uniform distribution of permutations.
- * Original algorithm source: StackOverflow (link above).
- *
- * @param {any[]} items - The array to shuffle.
- * @returns {any[]} The same array instance, now shuffled in place.
- */
-function shuffleArray(items) {
-  let currentIndex = items.length,
-    randomIndex;
-
-  // While there remain elements to shuffle...
-  while (currentIndex !== 0) {
-    // Pick a remaining element...
-    randomIndex = Math.floor(Math.random() * currentIndex);
-    currentIndex--;
-
-    // And swap it with the current element.
-    [items[currentIndex], items[randomIndex]] = [items[randomIndex], items[currentIndex]];
-  }
-
-  return items;
-}
-
-;// ./src/v1/basics/clock.mjs
-/**
- * Calculates the time duration between the current time and a given time offset.
- *
- * @param {Date} timeData - The target time as a Date object.
- * @param {string} [durationType='asSeconds'] - The type of duration to return. Can be 'asMilliseconds', 'asSeconds', 'asMinutes', 'asHours', 'asDays'.
- * @param {Date|null} [now=null] - The current time as a Date object. Defaults to the current date and time if not provided.
- * @returns {number|null} The calculated duration in the specified unit, or `null` if `timeData` is not provided.
- */
-function getTimeDuration(timeData = new Date(), durationType = 'asSeconds', now = null) {
-  if (timeData instanceof Date) {
-    const currentTime = now instanceof Date ? now : new Date();
-    /** @type {number} */
-    const diffMs = timeData.getTime() - currentTime.getTime();
-
-    switch (durationType) {
-      case 'asMilliseconds':
-        return diffMs;
-      case 'asSeconds':
-        return diffMs / 1000;
-      case 'asMinutes':
-        return diffMs / (1000 * 60);
-      case 'asHours':
-        return diffMs / (1000 * 60 * 60);
-      case 'asDays':
-        return diffMs / (1000 * 60 * 60 * 24);
-      default:
-        return diffMs / 1000; // default to seconds
-    }
-  }
-
-  return null;
-}
-
-/**
- * Formats a custom timer string based on total seconds and a detail level.
- * Includes proper reallocation of lower units into higher ones, ensuring consistent hierarchy.
- *
- * @param {number} totalSeconds - The total amount of seconds to convert.
- * @param {'seconds'|'minutes'|'hours'|'days'|'months'|'years'} [level] - The highest level to calculate and display.
- * @param {string} [format='{time}'] - Output template with placeholders like {years}, {months}, {days}, {hours}, {minutes}, {seconds}, {time}, {total}.
- * @returns {string} The formatted timer string.
- */
-function formatCustomTimer(totalSeconds, level = 'seconds', format = '{time}') {
-  totalSeconds = Math.max(0, Math.floor(totalSeconds));
-
-  const levels = ['seconds', 'minutes', 'hours', 'days', 'months', 'years'];
-  const index = levels.indexOf(level);
-
-  const include = {
-    years: index >= 5,
-    months: index >= 4,
-    days: index >= 3,
-    hours: index >= 2,
-    minutes: index >= 1,
-    seconds: index >= 0,
-  };
-
-  /**
-   * @type {{
-   *   years: number|NaN,
-   *   months: number|NaN,
-   *   days: number|NaN,
-   *   hours: number|NaN,
-   *   minutes: number|NaN,
-   *   seconds: number|NaN,
-   *   total: number|NaN
-   * }}
-   */
-  const parts = {
-    years: include.years ? 0 : NaN,
-    months: include.months ? 0 : NaN,
-    days: include.days ? 0 : NaN,
-    hours: include.hours ? 0 : NaN,
-    minutes: include.minutes ? 0 : NaN,
-    seconds: include.seconds ? 0 : NaN,
-    total: NaN,
-  };
-
-  let remaining = totalSeconds;
-
-  if (include.years || include.months || include.days) {
-    const baseDate = new Date(1980, 0, 1);
-    const targetDate = new Date(baseDate.getTime() + remaining * 1000);
-    const workingDate = new Date(baseDate);
-
-    // Years
-    if (include.years) {
-      while (
-        new Date(
-          workingDate.getFullYear() + 1,
-          workingDate.getMonth(),
-          workingDate.getDate(),
-        ).getTime() <= targetDate.getTime()
-      ) {
-        workingDate.setFullYear(workingDate.getFullYear() + 1);
-        parts.years++;
-      }
-    }
-
-    // Months
-    if (include.months) {
-      while (
-        new Date(
-          workingDate.getFullYear(),
-          workingDate.getMonth() + 1,
-          workingDate.getDate(),
-        ).getTime() <= targetDate.getTime()
-      ) {
-        workingDate.setMonth(workingDate.getMonth() + 1);
-        parts.months++;
-      }
-    }
-
-    // Days
-    if (include.days) {
-      while (
-        new Date(
-          workingDate.getFullYear(),
-          workingDate.getMonth(),
-          workingDate.getDate() + 1,
-        ).getTime() <= targetDate.getTime()
-      ) {
-        workingDate.setDate(workingDate.getDate() + 1);
-        parts.days++;
-      }
-    }
-
-    remaining = Math.floor((targetDate.getTime() - workingDate.getTime()) / 1000);
-  }
-
-  if (include.hours) {
-    parts.hours = Math.floor(remaining / 3600);
-    remaining %= 3600;
-  }
-
-  if (include.minutes) {
-    parts.minutes = Math.floor(remaining / 60);
-    remaining %= 60;
-  }
-
-  if (include.seconds) {
-    parts.seconds = remaining;
-  }
-
-  // Calculate total
-  const totalMap = {
-    seconds: include.seconds ? totalSeconds : NaN,
-    minutes: include.minutes ? totalSeconds / 60 : NaN,
-    hours: include.hours ? totalSeconds / 3600 : NaN,
-    days: include.days ? totalSeconds / 86400 : NaN,
-    months: include.months ? parts.years * 12 + parts.months + (parts.days || 0) / 30 : NaN,
-    years: include.years ? parts.years + (parts.months || 0) / 12 + (parts.days || 0) / 365 : NaN,
-  };
-
-  parts.total = +(totalMap[level] || 0).toFixed(2).replace(/\.00$/, '');
-
-  /**
-   * Pads a number to ensure it is at least two digits long, using leading zeros if necessary.
-   *
-   * @param {number|string} n - The number or string to pad.
-   * @returns {string} The padded string.
-   */
-  const pad = (n) => {
-    const num = typeof n === 'string' ? parseInt(n) : n;
-    return Number.isNaN(num) ? 'NaN' : String(num).padStart(2, '0');
-  };
-
-  const timeString = [
-    include.hours ? pad(parts.hours) : null,
-    include.minutes ? pad(parts.minutes) : null,
-    include.seconds ? pad(parts.seconds) : null,
-  ]
-    .filter((v) => v !== null)
-    .join(':');
-
-  return format
-    .replace(/\{years\}/g, String(parts.years))
-    .replace(/\{months\}/g, String(parts.months))
-    .replace(/\{days\}/g, String(parts.days))
-    .replace(/\{hours\}/g, pad(parts.hours))
-    .replace(/\{minutes\}/g, pad(parts.minutes))
-    .replace(/\{seconds\}/g, pad(parts.seconds))
-    .replace(/\{time\}/g, timeString)
-    .replace(/\{total\}/g, String(parts.total))
-    .trim();
-}
-
-/**
- * Formats a duration (in seconds) into a timer string showing only hours, minutes, and seconds.
- *
- * Example output: "05:32:10"
- *
- * @param {number} seconds - The total number of seconds to format.
- * @returns {string} The formatted timer string in "HH:MM:SS" format.
- */
-function formatTimer(seconds) {
-  return formatCustomTimer(seconds, 'hours', '{hours}:{minutes}:{seconds}');
-}
-
-/**
- * Formats a duration (in seconds) into a timer string including days, hours, minutes, and seconds.
- *
- * Example output: "2d 05:32:10"
- *
- * @param {number} seconds - The total number of seconds to format.
- * @returns {string} The formatted timer string in "Xd HH:MM:SS" format.
- */
-function formatDayTimer(seconds) {
-  return formatCustomTimer(seconds, 'days', '{days}d {hours}:{minutes}:{seconds}');
-}
-
 // EXTERNAL MODULE: ./node_modules/buffer/index.js
 var buffer = __webpack_require__(287);
 ;// ./src/v1/basics/objFilter.mjs
@@ -2698,7 +2364,7 @@ function countObj(obj) {
  * @param {unknown} value - The value to test.
  * @returns {value is Record<string | number | symbol, unknown>} Returns true if the value is a pure object.
  */
-function isJsonObject(value) {
+function objFilter_isJsonObject(value) {
   if (value === null || typeof value !== 'object') return false;
   if (Array.isArray(value)) return false;
   if (Object.prototype.toString.call(value) !== '[object Object]') return false;
@@ -2827,239 +2493,1071 @@ extendObjType([
   [
     'object',
     /** @param {*} val @returns {val is Record<string | number | symbol, unknown>} */
-    (val) => isJsonObject(val),
+    (val) => objFilter_isJsonObject(val),
   ],
 ]);
 
-;// ./src/v1/basics/simpleMath.mjs
+;// ./src/v1/basics/html.mjs
+
+
 /**
- * Executes a Rule of Three calculation.
- *
- * @param {number} val1 - The first reference value (numerator in direct proportion, denominator in inverse).
- * @param {number} val2 - The second reference value (denominator in direct proportion, numerator in inverse).
- * @param {number} val3 - The third value (numerator in direct proportion, denominator in inverse).
- * @param {boolean} [inverse] - Whether the calculation should use inverse proportion (true for inverse, false for direct).
- * @returns {number} The result of the Rule of Three operation.
- *
- * Rule of Three Formula (Direct Proportion):
- *      val1 / val2 = val3 / result
- *
- * For Inverse Proportion:
- *      val1 / val3 = val2 / result
- *
- * Visual Representation:
- *
- * For Direct Proportion:
- *      val1      val2
- *      -----  =  ------
- *      val3      result
- *
- * For Inverse Proportion:
- *      val1      val2
- *      -----  =  ------
- *      val3      result
- *
- * @example
- * // Direct proportion:
- * ruleOfThree.execute(2, 6, 3, false); // → 9
+ * Checks if two DOM elements are colliding on the screen.
  *
- * @example
- * // Inverse proportion:
- * ruleOfThree.execute(2, 6, 3, true); // → 4
+ * @param {Element} elem1 - First DOM element.
+ * @param {Element} elem2 - Second DOM element.
+ * @returns {boolean} - Returns true if the elements are colliding.
  */
-function ruleOfThree(val1, val2, val3, inverse = false) {
-  return inverse ? Number(val1 * val2) / val3 : Number(val3 * val2) / val1;
+function areHtmlElsColliding(elem1, elem2) {
+  const rect1 = elem1.getBoundingClientRect();
+  const rect2 = elem2.getBoundingClientRect();
+
+  return !(
+    rect1.right < rect2.left ||
+    rect1.left > rect2.right ||
+    rect1.bottom < rect2.top ||
+    rect1.top > rect2.bottom
+  );
 }
 
 /**
- * Calculates a percentage of a given base value.
- * @param {number} price - The base value.
- * @param {number} percentage - The percentage to apply.
- * @returns {number} The result of the percentage calculation.
- *
- * @example
- * getSimplePerc(200, 15); // 30
+ * Reads and parses a JSON data using FileReader.
+ * Throws an error if the content is not valid JSON.
+ * @param {File} file
+ * @returns {Promise<any>}
  */
-function getSimplePerc(price, percentage) {
-  return price * (percentage / 100);
+function readJsonBlob(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      try {
+        // @ts-ignore
+        const result = JSON.parse(reader.result);
+        resolve(result);
+      } catch (error) {
+        // @ts-ignore
+        reject(new Error(`Invalid JSON in file: ${file.name}\n${error.message}`));
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error(`Error reading file: ${file.name}`));
+    };
+
+    reader.readAsText(file);
+  });
 }
 
 /**
- * Calculates the age based on the given date.
+ * Saves a JSON object as a downloadable file.
+ * @param {string} filename
+ * @param {any} data
+ * @param {number} [spaces=2]
+ */
+function saveJsonFile(filename, data, spaces = 2) {
+  const json = JSON.stringify(data, null, spaces);
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Loads and parses a JSON from a remote URL using Fetch API.
  *
- * @param {number|string|Date} timeData - The birth date (can be a timestamp, ISO string, or Date object).
- * @param {Date|null} [now=null] - The Date object representing the current date. Defaults to the current date and time if not provided.
- * @returns {number|null} The age in years, or null if `timeData` is not provided or invalid.
+ * @param {string} url - The full URL to fetch JSON from.
+ * @param {Object} [options] - Optional settings.
+ * @param {string} [options.method="GET"] - HTTP method to use (GET, POST, etc.).
+ * @param {any} [options.body] - Request body (only for methods like POST, PUT).
+ * @param {number} [options.timeout=0] - Timeout in milliseconds (ignored if signal is provided).
+ * @param {number} [options.retries=0] - Number of retry attempts (ignored if signal is provided).
+ * @param {Headers|Record<string, *>} [options.headers={}] - Additional headers.
+ * @param {AbortSignal|null} [options.signal] - External AbortSignal; disables timeout and retries.
+ * @returns {Promise<*>} Parsed JSON object.
+ * @throws {Error} Throws if fetch fails, times out, or returns invalid JSON.
  */
-function getAge(timeData = 0, now = null) {
-  if (typeof timeData !== 'undefined' && timeData !== null && timeData !== 0) {
-    const birthDate = new Date(timeData);
-    if (Number.isNaN(birthDate.getTime())) return null;
+async function fetchJson(
+  url,
+  { method = 'GET', body, timeout = 0, retries = 0, headers = {}, signal = null } = {},
+) {
+  if (
+    typeof url !== 'string' ||
+    (!url.startsWith('../') &&
+      !url.startsWith('./') &&
+      !url.startsWith('/') &&
+      !url.startsWith('https://') &&
+      !url.startsWith('http://'))
+  )
+    throw new Error('Invalid URL: must be a valid http or https address.');
+
+  if (typeof method !== 'string' || !method.trim())
+    throw new Error('Invalid method: must be a non-empty string.');
+
+  if (!signal) {
+    if (
+      typeof timeout !== 'number' ||
+      !Number.isFinite(timeout) ||
+      Number.isNaN(timeout) ||
+      timeout < 0
+    )
+      throw new Error('Invalid timeout: must be a positive number.');
+
+    if (
+      typeof retries !== 'number' ||
+      !Number.isFinite(retries) ||
+      Number.isNaN(retries) ||
+      retries < 0
+    )
+      throw new Error('Invalid retries: must be a positive number.');
+  }
+
+  const attempts = signal ? 1 : retries + 1;
+  /** @type {Error|null} */
+  let lastError = null;
+
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    const controller = signal ? null : new AbortController();
+    const localSignal = signal || (controller?.signal ?? null);
+    const timer =
+      !signal && timeout && controller ? setTimeout(() => controller.abort(), timeout) : null;
+
+    try {
+      const response = await fetch(url, {
+        method: method.toUpperCase(),
+        headers: {
+          Accept: 'application/json',
+          ...headers,
+        },
+        body: body !== undefined ? (isJsonObject(body) ? JSON.stringify(body) : body) : undefined,
+        signal: localSignal,
+      });
 
-    const currentDate = now instanceof Date ? now : new Date();
+      if (timer) clearTimeout(timer);
 
-    let age = currentDate.getFullYear() - birthDate.getFullYear();
+      if (!response.ok) throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
 
-    const currentMonth = currentDate.getMonth();
-    const birthMonth = birthDate.getMonth();
+      const contentType = response.headers.get('content-type') || '';
+      if (!contentType.includes('application/json'))
+        throw new Error(`Unexpected content-type: ${contentType}`);
 
-    const currentDay = currentDate.getDate();
-    const birthDay = birthDate.getDate();
+      const data = await response.json();
 
-    // Adjust if birthday hasn't occurred yet this year
-    if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) age--;
+      if (!isJsonObject(data)) throw new Error('Received invalid data instead of valid JSON.');
 
-    return Math.abs(age);
+      return data;
+    } catch (err) {
+      lastError = /** @type {Error} */ (err);
+      if (signal) break; // if an external signal came, it does not retry
+      if (attempt < retries)
+        await new Promise((resolve) => setTimeout(resolve, 300 * (attempt + 1)));
+    }
   }
 
-  return null;
+  throw new Error(
+    `Failed to fetch JSON from "${url}"${lastError ? `: ${lastError.message}` : '.'}`,
+  );
 }
 
 /**
- * @typedef {Object} FormattedByteResult
- * @property {string|null} unit - The resulting unit (e.g., 'MB', 'GB') or null if input is invalid.
- * @property {number|null} value - The numerical value in the chosen unit, or null if input is invalid.
+ * @typedef {Object} HtmlElBoxSides
+ * @property {number} x - Total horizontal size (left + right)
+ * @property {number} y - Total vertical size (top + bottom)
+ * @property {number} left
+ * @property {number} right
+ * @property {number} top
+ * @property {number} bottom
  */
 
 /**
- * Converts a byte value into a human-readable format with unit and value separated.
+ * Returns the total border width and individual sides from `border{Side}Width` CSS properties.
  *
- * @param {number} bytes - The number of bytes to format. Must be a non-negative number.
- * @param {number|null} [decimals=null] - The number of decimal places to include in the result. Defaults to null. If negative, it will be treated as 0. If null, no rounding is applied.
- * @param {string|null} [maxUnit=null] - Optional unit limit. If provided, restricts conversion to this unit at most (e.g., 'MB' prevents conversion to 'GB' or higher). Must be one of: 'Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'.
- * @returns {FormattedByteResult} An object with the converted value and its corresponding unit. Returns nulls if input is invalid.
- *
- * @example
- * formatBytes(123456789);
- * // → { unit: 'MB', value: 117.74 }
- *
- * @example
- * formatBytes(1073741824, 2, 'MB');
- * // → { unit: 'MB', value: 1024 }
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border widths, and each side individually.
  */
-function formatBytes(bytes, decimals = null, maxUnit = null) {
-  if (typeof bytes !== 'number' || bytes < 0) return { unit: null, value: null };
-  if (bytes === 0) return { unit: 'Bytes', value: 0 };
-
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const getHtmlElBordersWidth = (el) => {
+  const styles = getComputedStyle(el);
+  const left = parseFloat(styles.borderLeftWidth) || 0;
+  const right = parseFloat(styles.borderRightWidth) || 0;
+  const top = parseFloat(styles.borderTopWidth) || 0;
+  const bottom = parseFloat(styles.borderBottomWidth) || 0;
+  const x = left + right;
+  const y = top + bottom;
+
+  return { x, y, left, right, top, bottom };
+};
 
-  const maxIndex = maxUnit && sizes.includes(maxUnit) ? sizes.indexOf(maxUnit) : sizes.length - 1;
-  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), maxIndex);
+/**
+ * Returns the total border size and individual sides from `border{Side}` CSS properties.
+ *
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) border sizes, and each side individually.
+ */
+const getHtmlElBorders = (el) => {
+  const styles = getComputedStyle(el);
+  const left = parseFloat(styles.borderLeft) || 0;
+  const right = parseFloat(styles.borderRight) || 0;
+  const top = parseFloat(styles.borderTop) || 0;
+  const bottom = parseFloat(styles.borderBottom) || 0;
+  const x = left + right;
+  const y = top + bottom;
+
+  return { x, y, left, right, top, bottom };
+};
 
-  let value = bytes / Math.pow(k, i);
+/**
+ * Returns the total margin and individual sides from `margin{Side}` CSS properties.
+ *
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) margins, and each side individually.
+ */
+const getHtmlElMargin = (el) => {
+  const styles = getComputedStyle(el);
+  const left = parseFloat(styles.marginLeft) || 0;
+  const right = parseFloat(styles.marginRight) || 0;
+  const top = parseFloat(styles.marginTop) || 0;
+  const bottom = parseFloat(styles.marginBottom) || 0;
 
-  if (decimals !== null) {
-    const dm = decimals < 0 ? 0 : decimals;
-    value = parseFloat(value.toFixed(dm));
-  }
+  const x = left + right;
+  const y = top + bottom;
 
-  const unit = sizes[i];
-  return { unit, value };
-}
+  return { x, y, left, right, top, bottom };
+};
 
-;// ./src/v1/basics/text.mjs
 /**
- * Converts a string to title case where the first letter of each word is capitalized.
- * All other letters are converted to lowercase.
- *
- * Example: "hello world" -> "Hello World"
+ * Returns the total padding and individual sides from `padding{Side}` CSS properties.
  *
- * @param {string} str - The string to be converted to title case.
- * @returns {string} The string converted to title case.
+ * @param {Element} el - The target DOM element.
+ * @returns {HtmlElBoxSides} - Total horizontal (x) and vertical (y) paddings, and each side individually.
  */
-function toTitleCase(str) {
-  return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
-}
+const getHtmlElPadding = (el) => {
+  const styles = getComputedStyle(el);
+  const left = parseFloat(styles.paddingLeft) || 0;
+  const right = parseFloat(styles.paddingRight) || 0;
+  const top = parseFloat(styles.paddingTop) || 0;
+  const bottom = parseFloat(styles.paddingBottom) || 0;
+
+  const x = left + right;
+  const y = top + bottom;
+
+  return { x, y, left, right, top, bottom };
+};
+
+;// ./src/v1/libs/TinyDragger.mjs
+
+
 
 /**
- * Converts a string to title case where the first letter of each word is capitalized,
- * but the first letter of the entire string is left lowercase.
- *
- * Example: "hello world" -> "hello World"
- *
- * @param {string} str - The string to be converted to title case with the first letter in lowercase.
- * @returns {string} The string converted to title case with the first letter in lowercase.
+ * @typedef {Object} VibrationPatterns
+ * @property {number[]|false} start - Pattern to vibrate on start
+ * @property {number[]|false} end - Pattern to vibrate on end
+ * @property {number[]|false} collide - Pattern to vibrate on collision
+ * @property {number[]|false} move - Pattern to vibrate while moving
  */
-function toTitleCaseLowerFirst(str) {
-  const titleCased = str.replace(
-    /\w\S*/g,
-    (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(),
-  );
-  return titleCased.charAt(0).toLowerCase() + titleCased.slice(1);
-}
 
 /**
- * Enables a keyboard shortcut to toggle a CSS class on the document body.
- *
- * This function listens for a specific key combination: `Ctrl + Alt + [key]`.
- * When triggered, it prevents the default behavior and toggles the
- * `detect-made-by-ai` class on the `<body>`, which can be used to apply visual
- * indicators or filters on AI-generated content.
- *
- * If executed outside of a browser environment (e.g., in Node.js), the function logs an error and exits.
- * If the `<body>` is not available at the moment the shortcut is triggered, a warning is logged.
- *
- * @param {string} [key='a'] - The lowercase character key to be used in combination with Ctrl and Alt.
+ * TinyDragger enables drag-and-drop functionality for a DOM element.
+ * It supports jail boundaries, optional collision detection, vibration feedback,
+ * automatic reverting, proxy dragging, and event dispatching.
  */
-function addAiMarkerShortcut(key = 'a') {
-  if (typeof HTMLElement === 'undefined') {
-    console.error(
-      '[AiMarkerShortcut] Environment does not support the DOM. This function must be run in a browser.',
+class TinyDragger {
+  #enabled = true;
+  #destroyed = false;
+
+  #offsetY = 0;
+  #offsetX = 0;
+
+  #lockInsideJail = false;
+  #revertOnDrop = false;
+  #dragging = false;
+  #collisionByMouse = false;
+  #dropInJailOnly = false;
+
+  /** @type {HTMLElement|null} */
+  #lastCollision = null;
+
+  /** @type {HTMLElement[]} */
+  #collidables = [];
+
+  /** @type {HTMLElement|null} */
+  #dragProxy = null;
+
+  /** @type {VibrationPatterns} */
+  #vibration = { start: false, end: false, collide: false, move: false };
+
+  /** @type {HTMLElement|null} */
+  #jail = null;
+
+  #target;
+
+  #dragHiddenClass = 'drag-hidden';
+  #classDragging = 'dragging';
+  #classBodyDragging = 'drag-active';
+  #classJailDragging = 'jail-drag-active';
+  #classJailDragDisabled = 'jail-drag-disabled';
+  #classDragCollision = 'dragging-collision';
+
+  /** @typedef {(event: TouchEvent) => void} TouchDragEvent */
+
+  /**
+   * @param {HTMLElement} targetElement - The element to make draggable.
+   * @param {Object} [options={}] - Configuration options.
+   * @param {HTMLElement} [options.jail] - Optional container to restrict dragging within.
+   * @param {boolean} [options.collisionByMouse=false] - Use mouse position for collision instead of element rect.
+   * @param {string} [options.classDragging='dragging'] - CSS class applied to the clone during dragging.
+   * @param {string} [options.classBodyDragging='drag-active'] - CSS class applied to <body> during dragging.
+   * @param {string} [options.classJailDragging='jail-drag-active'] - CSS class applied to jail element during drag.
+   * @param {string} [options.classJailDragDisabled='jail-drag-disabled'] - CSS class applied to jail element disabled.
+   * @param {string} [options.classDragCollision='dragging-collision'] - CSS class applied to collision element.
+   * @param {boolean} [options.lockInsideJail=false] - Restrict movement within the jail container.
+   * @param {boolean} [options.dropInJailOnly=false] - Restrict drop within the jail container.
+   * @param {VibrationPatterns|false} [options.vibration=false] - Vibration feedback configuration.
+   * @param {boolean} [options.revertOnDrop=false] - Whether to return to original position on drop.
+   * @param {string} [options.classHidden='drag-hidden'] - CSS class to hide original element during dragging.
+   * @throws {Error} If any option has an invalid type.
+   */
+  constructor(targetElement, options = {}) {
+    if (!(targetElement instanceof HTMLElement))
+      throw new Error('TinyDragger requires a valid target HTMLElement to initialize.');
+
+    this.#target = targetElement;
+
+    // === Validations ===
+    if (options.jail !== undefined && !(options.jail instanceof HTMLElement))
+      throw new Error('The "jail" option must be an HTMLElement if provided.');
+
+    if (
+      options.vibration !== undefined &&
+      options.vibration !== false &&
+      !objFilter_isJsonObject(options.vibration)
+    )
+      throw new Error('The "vibration" option must be an object or false.');
+
+    /**
+     * @param {any} val
+     * @param {string} name
+     */
+    const validateBoolean = (val, name) => {
+      if (val !== undefined && typeof val !== 'boolean') {
+        throw new Error(`The "${name}" option must be a boolean.`);
+      }
+    };
+
+    /**
+     * @param {any} val
+     * @param {string} name
+     */
+    const validateString = (val, name) => {
+      if (val !== undefined && typeof val !== 'string') {
+        throw new Error(`The "${name}" option must be a string.`);
+      }
+    };
+
+    validateBoolean(options.collisionByMouse, 'collisionByMouse');
+    validateBoolean(options.lockInsideJail, 'lockInsideJail');
+    validateBoolean(options.dropInJailOnly, 'dropInJailOnly');
+    validateBoolean(options.revertOnDrop, 'revertOnDrop');
+
+    validateString(options.classDragging, 'classDragging');
+    validateString(options.classBodyDragging, 'classBodyDragging');
+    validateString(options.classJailDragging, 'classJailDragging');
+    validateString(options.classJailDragDisabled, 'classJailDragDisabled');
+    validateString(options.classDragCollision, 'classDragCollision');
+    validateString(options.classHidden, 'classHidden');
+
+    if (options.jail instanceof HTMLElement) this.#jail = options.jail;
+
+    /** @type {VibrationPatterns} */
+    const vibrationTemplate = { start: false, end: false, collide: false, move: false };
+    this.#vibration = Object.assign(
+      vibrationTemplate,
+      objFilter_isJsonObject(options.vibration) ? options.vibration : {},
     );
-    return;
-  }
-  document.addEventListener('keydown', function (event) {
-    if (event.ctrlKey && event.altKey && event.key.toLowerCase() === key) {
-      event.preventDefault(); // Prevent any default behavior
-      if (!document.body) {
-        console.warn(
-          '[AiMarkerShortcut] <body> element not found. Cannot toggle class. Ensure the DOM is fully loaded when using the shortcut.',
-        );
-        return;
+
+    if (typeof options.classDragging === 'string') this.#classDragging = options.classDragging;
+    if (typeof options.classBodyDragging === 'string')
+      this.#classBodyDragging = options.classBodyDragging;
+    if (typeof options.classJailDragging === 'string')
+      this.#classJailDragging = options.classJailDragging;
+    if (typeof options.classJailDragDisabled === 'string')
+      this.#classJailDragDisabled = options.classJailDragDisabled;
+    if (typeof options.classHidden === 'string') this.#dragHiddenClass = options.classHidden;
+    if (typeof options.classDragCollision === 'string')
+      this.#classDragCollision = options.classDragCollision;
+
+    if (typeof options.collisionByMouse === 'boolean')
+      this.#collisionByMouse = options.collisionByMouse;
+    if (typeof options.revertOnDrop === 'boolean') this.#revertOnDrop = options.revertOnDrop;
+    if (typeof options.lockInsideJail === 'boolean') this.#lockInsideJail = options.lockInsideJail;
+    if (typeof options.dropInJailOnly === 'boolean') this.#dropInJailOnly = options.dropInJailOnly;
+
+    /** @private */
+    this._onMouseDown = this.#startDrag.bind(this);
+    /** @private */
+    this._onMouseMove = this.#drag.bind(this);
+    /** @private */
+    this._onMouseUp = this.#endDrag.bind(this);
+
+    /**
+     * @type {TouchDragEvent}
+     * @private
+     */
+    this._onTouchStart = (e) => this.#startDrag(e.touches[0]);
+
+    /**
+     * @type {TouchDragEvent}
+     * @private
+     */
+    this._onTouchMove = (e) => this.#drag(e.touches[0]);
+
+    /**
+     * @type {TouchDragEvent}
+     * @private
+     */
+    this._onTouchEnd = (e) => this.#endDrag(e.changedTouches[0]);
+
+    this.#target.addEventListener('mousedown', this._onMouseDown);
+    this.#target.addEventListener('touchstart', this._onTouchStart, { passive: false });
+  }
+
+  /**
+   * Enables the drag functionality.
+   */
+  enable() {
+    this.#checkDestroy();
+    if (this.#jail) this.#jail.classList.add(this.#classJailDragDisabled);
+    this.#enabled = true;
+  }
+
+  /**
+   * Disables the drag functionality.
+   */
+  disable() {
+    if (this.#jail) this.#jail.classList.remove(this.#classJailDragDisabled);
+    this.#enabled = false;
+  }
+
+  /**
+   * Adds an element to be considered for collision detection.
+   * @param {HTMLElement} element - The element to track collisions with.
+   * @throws {Error} If the element is not a valid HTMLElement.
+   */
+  addCollidable(element) {
+    this.#checkDestroy();
+    if (!(element instanceof HTMLElement))
+      throw new Error('addCollidable expects an HTMLElement as argument.');
+    if (!this.#collidables.includes(element)) this.#collidables.push(element);
+  }
+
+  /**
+   * Removes a collidable element from the tracking list.
+   * @param {HTMLElement} element - The element to remove.
+   * @throws {Error} If the element is not a valid HTMLElement.
+   */
+  removeCollidable(element) {
+    this.#checkDestroy();
+    if (!(element instanceof HTMLElement))
+      throw new Error('removeCollidable expects an HTMLElement as argument.');
+    this.#collidables = this.#collidables.filter((el) => el !== element);
+  }
+
+  /**
+   * Sets vibration patterns for drag events.
+   * @param {Object} [param0={}] - Vibration pattern configuration.
+   * @param {number[]|false} [param0.startPattern=false] - Vibration on drag start.
+   * @param {number[]|false} [param0.endPattern=false] - Vibration on drag end.
+   * @param {number[]|false} [param0.collidePattern=false] - Vibration on collision.
+   * @param {number[]|false} [param0.movePattern=false] - Vibration during movement.
+   * @throws {Error} If any pattern is not false or an array of numbers.
+   */
+  setVibrationPattern({
+    startPattern = false,
+    endPattern = false,
+    collidePattern = false,
+    movePattern = false,
+  } = {}) {
+    this.#checkDestroy();
+
+    /** @param {any} value */
+    const isValidPattern = (value) =>
+      value === false || (Array.isArray(value) && value.every((n) => typeof n === 'number'));
+
+    if (!isValidPattern(startPattern))
+      throw new Error('Invalid "startPattern": must be false or an array of numbers.');
+    if (!isValidPattern(endPattern))
+      throw new Error('Invalid "endPattern": must be false or an array of numbers.');
+    if (!isValidPattern(collidePattern))
+      throw new Error('Invalid "collidePattern": must be false or an array of numbers.');
+    if (!isValidPattern(movePattern))
+      throw new Error('Invalid "movePattern": must be false or an array of numbers.');
+
+    this.#vibration = {
+      start: startPattern,
+      end: endPattern,
+      collide: collidePattern,
+      move: movePattern,
+    };
+  }
+
+  /**
+   * Disables all vibration feedback.
+   */
+  disableVibration() {
+    this.#checkDestroy();
+    this.#vibration = { start: false, end: false, collide: false, move: false };
+  }
+
+  /**
+   * Calculates the cursor offset relative to the top-left of the target element.
+   * @param {MouseEvent|Touch} event - The mouse or touch event.
+   * @returns {{x: number, y: number}} The offset in pixels.
+   * @throws {Error} If event is not a MouseEvent or Touch with clientX/clientY.
+   */
+  getOffset(event) {
+    this.#checkDestroy();
+    if (
+      (!(event instanceof MouseEvent) && !(event instanceof Touch)) ||
+      typeof event.clientX !== 'number' ||
+      typeof event.clientY !== 'number'
+    )
+      throw new Error('getOffset expects an event with valid clientX and clientY coordinates.');
+
+    const targetRect = this.#target.getBoundingClientRect();
+    const { left: borderLeft, top: borderTop } = getHtmlElBordersWidth(this.#target);
+    return {
+      x: event.clientX - targetRect.left + borderLeft,
+      y: event.clientY - targetRect.top + borderTop,
+    };
+  }
+
+  /**
+   * Handles the start of a drag event.
+   * @param {MouseEvent|Touch} event - The initiating event.
+   */
+  #startDrag(event) {
+    if (event instanceof MouseEvent) event.preventDefault();
+    if (this.#destroyed || !this.#enabled || !this.#target.parentElement) return;
+
+    const dragProxy = this.#target.cloneNode(true);
+    if (!(dragProxy instanceof HTMLElement)) return;
+    this.#dragProxy = dragProxy;
+
+    this.#dragging = true;
+
+    const rect = this.#target.getBoundingClientRect();
+
+    Object.assign(this.#dragProxy.style, {
+      position: 'absolute',
+      pointerEvents: 'none',
+      left: `${this.#target.offsetLeft}px`,
+      top: `${this.#target.offsetTop}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      zIndex: 9999,
+    });
+
+    this.#target.classList.add(this.#dragHiddenClass);
+    this.#target.parentElement.appendChild(this.#dragProxy);
+
+    const { x: offsetX, y: offsetY } = this.getOffset(event);
+    this.#offsetX = offsetX;
+    this.#offsetY = offsetY;
+
+    this.#dragProxy.classList.add(this.#classDragging);
+    document.body.classList.add(this.#classBodyDragging);
+    if (this.#jail) this.#jail.classList.add(this.#classJailDragging);
+
+    document.addEventListener('mousemove', this._onMouseMove);
+    document.addEventListener('mouseup', this._onMouseUp);
+
+    document.addEventListener('touchmove', this._onTouchMove, { passive: false });
+    document.addEventListener('touchend', this._onTouchEnd);
+
+    if (navigator.vibrate && Array.isArray(this.#vibration.start)) {
+      navigator.vibrate(this.#vibration.start);
+    }
+
+    this.checkDragCollision(event);
+    this.#dispatchEvent('drag');
+  }
+
+  /**
+   * Handles dragging collision.
+   * @param {MouseEvent|Touch} event - The drag event.
+   */
+  checkDragCollision(event) {
+    const { collidedElement: collided } = this.execCollision(event);
+    if (collided && collided !== this.#lastCollision) {
+      if (navigator.vibrate && Array.isArray(this.#vibration.collide)) {
+        navigator.vibrate(this.#vibration.collide);
       }
-      document.body.classList.toggle('detect-made-by-ai');
+      this.#lastCollision = collided;
+      if (this.#lastCollision) this.#lastCollision.classList.add(this.#classDragCollision);
+    } else if (!collided) {
+      if (this.#lastCollision) this.#lastCollision.classList.remove(this.#classDragCollision);
+      this.#lastCollision = null;
     }
-  });
-}
+  }
 
-/*
-import { useEffect } from "react";
-
-function KeyPressHandler() {
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.ctrlKey && event.altKey && event.key.toLowerCase() === "a") {
-                event.preventDefault();
-                document.body.classList.toggle("detect-made-by-ai");
-            }
-        };
-        
-        document.addEventListener("keydown", handleKeyDown);
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, []);
+  /**
+   * Handles dragging movement.
+   * @param {MouseEvent|Touch} event - The drag event.
+   */
+  #drag(event) {
+    if (event instanceof MouseEvent) event.preventDefault();
+    if (this.#destroyed || !this.#dragging || !this.#enabled || !this.#dragProxy) return;
 
-    return null;
-}
+    const parent = this.#dragProxy.offsetParent || document.body;
+    const parentRect = parent.getBoundingClientRect();
+
+    let x = event.clientX - parentRect.left - this.#offsetX;
+    let y = event.clientY - parentRect.top - this.#offsetY;
+
+    if (this.#lockInsideJail && this.#jail) {
+      const jailRect = this.#jail.getBoundingClientRect();
+      const targetRect = this.#dragProxy.getBoundingClientRect();
+
+      const jailLeft = jailRect.left - parentRect.left;
+      const jailTop = jailRect.top - parentRect.top;
+
+      const { x: borderX, y: borderY } = getHtmlElBordersWidth(this.#jail);
+      const maxX = jailLeft + jailRect.width - targetRect.width - borderY;
+      const maxY = jailTop + jailRect.height - targetRect.height - borderX;
+
+      x = Math.max(jailLeft, Math.min(x, maxX));
+      y = Math.max(jailTop, Math.min(y, maxY));
+    }
+
+    this.#dragProxy.style.position = 'absolute';
+    this.#dragProxy.style.left = `${x}px`;
+    this.#dragProxy.style.top = `${y}px`;
+
+    if (navigator.vibrate && Array.isArray(this.#vibration.move)) {
+      navigator.vibrate(this.#vibration.move);
+    }
+
+    this.checkDragCollision(event);
+    this.#dispatchEvent('dragging');
+  }
+
+  /**
+   * Handles the collision of a drag.
+   * @param {MouseEvent|Touch} event - The release event.
+   * @returns {{ inJail: boolean; collidedElement: HTMLElement|null }}
+   */
+  execCollision(event) {
+    if (this.#destroyed || !this.#dragProxy) return { inJail: false, collidedElement: null };
+
+    let collidedElement;
+    let inJail = true;
+    const jailRect = this.#jail?.getBoundingClientRect();
+    if (this.#collisionByMouse) {
+      const x = event.clientX;
+      const y = event.clientY;
+      if (this.#dropInJailOnly && this.#jail && jailRect) {
+        inJail =
+          x >= jailRect.left && x <= jailRect.right && y >= jailRect.top && y <= jailRect.bottom;
+      }
+
+      collidedElement = inJail ? this.getCollidedElement(x, y) : null;
+    } else {
+      const targetRect = this.#dragProxy.getBoundingClientRect();
+      if (this.#dropInJailOnly && this.#jail && jailRect) {
+        inJail =
+          targetRect.left >= jailRect.left &&
+          targetRect.right <= jailRect.right &&
+          targetRect.top >= jailRect.top &&
+          targetRect.bottom <= jailRect.bottom;
+      }
+
+      collidedElement = inJail ? this.getCollidedElementByRect(targetRect) : null;
+    }
+
+    return { inJail, collidedElement };
+  }
+
+  /**
+   * Handles the end of a drag.
+   * @param {MouseEvent|Touch} event - The release event.
+   */
+  #endDrag(event) {
+    if (event instanceof MouseEvent) event.preventDefault();
+    if (this.#destroyed || !this.#dragging) return;
+
+    this.#dragging = false;
+    if (!this.#dragProxy) return;
+
+    this.#target.classList.remove(this.#classDragging);
+    document.body.classList.remove(this.#classBodyDragging);
+    if (this.#jail) this.#jail.classList.remove(this.#classJailDragging);
+
+    document.removeEventListener('mousemove', this._onMouseMove);
+    document.removeEventListener('mouseup', this._onMouseUp);
+
+    document.removeEventListener('touchmove', this._onTouchMove);
+    document.removeEventListener('touchend', this._onTouchEnd);
+    const { collidedElement } = this.execCollision(event);
+
+    if (navigator.vibrate && Array.isArray(this.#vibration.end)) {
+      navigator.vibrate(this.#vibration.end);
+    }
+
+    const newX = this.#dragProxy.style.left;
+    const newY = this.#dragProxy.style.top;
+    if (this.#dragProxy) {
+      this.#dragProxy.remove();
+      this.#dragProxy = null;
+    }
+
+    if (this.#lastCollision) this.#lastCollision.classList.remove(this.#classDragCollision);
+    this.#lastCollision = null;
+
+    this.#target.classList.remove(this.#dragHiddenClass);
+    if (!this.#revertOnDrop) {
+      this.#target.style.left = newX;
+      this.#target.style.top = newY;
+    }
+
+    const dropEvent = new CustomEvent('drop', {
+      detail: {
+        target: collidedElement,
+      },
+    });
+
+    this.#target.dispatchEvent(dropEvent);
+  }
+
+  /**
+   * Detects collision based on rectangle intersection.
+   * @param {DOMRect} rect - Bounding rectangle of the dragged proxy.
+   * @returns {HTMLElement|null} The collided element or null.
+   * @throws {Error} If rect is not a DOMRect with valid numeric properties.
+   */
+  getCollidedElementByRect(rect) {
+    this.#checkDestroy();
+    if (
+      !(rect instanceof DOMRect) ||
+      typeof rect.left !== 'number' ||
+      typeof rect.right !== 'number' ||
+      typeof rect.top !== 'number' ||
+      typeof rect.bottom !== 'number'
+    )
+      throw new Error('getCollidedElementByRect expects a valid DOMRect object.');
+
+    return (
+      this.#collidables.find((el) => {
+        const elRect = el.getBoundingClientRect();
+        return !(
+          rect.right < elRect.left ||
+          rect.left > elRect.right ||
+          rect.bottom < elRect.top ||
+          rect.top > elRect.bottom
+        );
+      }) || null
+    );
+  }
+
+  /**
+   * Detects collision with a point using element bounding rectangles.
+   * @param {number} x - Horizontal screen coordinate.
+   * @param {number} y - Vertical screen coordinate.
+   * @returns {HTMLElement|null} The collided element or null.
+   */
+  getCollidedElement(x, y) {
+    this.#checkDestroy();
+    if (typeof x !== 'number' || typeof y !== 'number')
+      throw new Error('getCollidedElement expects numeric x and y coordinates.');
+
+    return (
+      this.#collidables.find((el) => {
+        const rect = el.getBoundingClientRect();
+        return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+      }) || null
+    );
+  }
+
+  /**
+   * Dispatches a custom event from the target element.
+   * @param {string} type - The event name.
+   */
+  #dispatchEvent(type) {
+    const event = new CustomEvent(type);
+    this.#target.dispatchEvent(event);
+  }
+
+  /**
+   * Gets whether dragging is currently active.
+   * @returns {boolean}
+   */
+  getDragging() {
+    return this.#dragging;
+  }
+
+  /**
+   * Gets whether movement is restricted inside the jail container.
+   * @returns {boolean}
+   */
+  getLockInsideJail() {
+    return this.#lockInsideJail;
+  }
+
+  /**
+   * Sets whether movement is restricted inside the jail container.
+   * @param {boolean} value
+   */
+  setLockInsideJail(value) {
+    if (typeof value !== 'boolean') throw new Error('lockInsideJail must be a boolean.');
+    this.#lockInsideJail = value;
+  }
 
-export default KeyPressHandler;
-*/
+  /**
+   * Gets whether the element should revert to original position on drop.
+   * @returns {boolean}
+   */
+  getRevertOnDrop() {
+    return this.#revertOnDrop;
+  }
 
-;// ./src/v1/basics/index.mjs
+  /**
+   * Sets whether the element should revert to original position on drop.
+   * @param {boolean} value
+   */
+  setRevertOnDrop(value) {
+    if (typeof value !== 'boolean') throw new Error('revertOnDrop must be a boolean.');
+    this.#revertOnDrop = value;
+  }
 
+  /**
+   * Gets whether collision detection uses mouse position.
+   * @returns {boolean}
+   */
+  getCollisionByMouse() {
+    return this.#collisionByMouse;
+  }
 
+  /**
+   * Sets whether collision detection uses mouse position.
+   * @param {boolean} value
+   */
+  setCollisionByMouse(value) {
+    if (typeof value !== 'boolean') throw new Error('collisionByMouse must be a boolean.');
+    this.#collisionByMouse = value;
+  }
 
+  /**
+   * Gets whether dropping is restricted inside the jail container.
+   * @returns {boolean}
+   */
+  getDropInJailOnly() {
+    return this.#dropInJailOnly;
+  }
+
+  /**
+   * Sets whether dropping is restricted inside the jail container.
+   * @param {boolean} value
+   */
+  setDropInJailOnly(value) {
+    if (typeof value !== 'boolean') throw new Error('dropInJailOnly must be a boolean.');
+    this.#dropInJailOnly = value;
+  }
+
+  /**
+   * Returns the original target element being dragged.
+   * @returns {HTMLElement}
+   */
+  getTarget() {
+    return this.#target;
+  }
+
+  /**
+   * Returns the current jail container (if any).
+   * @returns {HTMLElement|null}
+   */
+  getJail() {
+    return this.#jail;
+  }
+
+  /**
+   * Returns the current proxy element being dragged (if any).
+   * @returns {HTMLElement|null}
+   */
+  getDragProxy() {
+    return this.#dragProxy;
+  }
+
+  /**
+   * Returns the last collided element (if any).
+   * @returns {HTMLElement|null}
+   */
+  getLastCollision() {
+    return this.#lastCollision;
+  }
+
+  /**
+   * Returns all registered collidable elements.
+   * @returns {HTMLElement[]}
+   */
+  getCollidables() {
+    return [...this.#collidables];
+  }
+
+  /**
+   * Returns the CSS class used to hide the target during drag.
+   * @returns {string}
+   */
+  getDragHiddenClass() {
+    return this.#dragHiddenClass;
+  }
+
+  /**
+   * Returns the CSS class applied to the clone during dragging.
+   * @returns {string}
+   */
+  getClassDragging() {
+    return this.#classDragging;
+  }
+
+  /**
+   * Returns the CSS class applied to <body> during dragging.
+   * @returns {string}
+   */
+  getClassBodyDragging() {
+    return this.#classBodyDragging;
+  }
 
+  /**
+   * Returns the CSS class applied to the jail during dragging.
+   * @returns {string}
+   */
+  getClassJailDragging() {
+    return this.#classJailDragging;
+  }
+
+  /**
+   * Returns the CSS class applied to the jail when dragging is disabled.
+   * @returns {string}
+   */
+  getClassJailDragDisabled() {
+    return this.#classJailDragDisabled;
+  }
+
+  /**
+   * Returns the CSS class applied to a collided element.
+   * @returns {string}
+   */
+  getClassDragCollision() {
+    return this.#classDragCollision;
+  }
+
+  /**
+   * Returns the full vibration configuration.
+   * @returns {VibrationPatterns}
+   */
+  getVibrations() {
+    return { ...this.#vibration };
+  }
+
+  /**
+   * Returns the vibration pattern for drag start.
+   * @returns {number[]|boolean}
+   */
+  getStartVibration() {
+    return this.#vibration.start;
+  }
+
+  /**
+   * Returns the vibration pattern for drag end.
+   * @returns {number[]|boolean}
+   */
+  getEndVibration() {
+    return this.#vibration.end;
+  }
+
+  /**
+   * Returns the vibration pattern for collisions.
+   * @returns {number[]|boolean}
+   */
+  getCollideVibration() {
+    return this.#vibration.collide;
+  }
+
+  /**
+   * Returns the vibration pattern during movement.
+   * @returns {number[]|boolean}
+   */
+  getMoveVibration() {
+    return this.#vibration.move;
+  }
+
+  /**
+   * Returns whether the dragger is currently enabled.
+   * @returns {boolean}
+   */
+  isEnabled() {
+    return this.#enabled;
+  }
+
+  /**
+   * Internal method to verify if the instance has been destroyed.
+   * Throws an error if any operation is attempted after destruction.
+   */
+  #checkDestroy() {
+    if (this.#destroyed)
+      throw new Error('This TinyDragger instance has been destroyed and can no longer be used.');
+  }
+
+  /**
+   * Completely disables drag-and-drop and cleans up all event listeners.
+   * Does NOT remove the original HTML element.
+   */
+  destroy() {
+    if (this.#destroyed) return;
+    this.disable();
+
+    this.#target.removeEventListener('mousedown', this._onMouseDown);
+    this.#target.removeEventListener('touchstart', this._onTouchStart);
+
+    document.removeEventListener('mousemove', this._onMouseMove);
+    document.removeEventListener('mouseup', this._onMouseUp);
+
+    document.removeEventListener('touchmove', this._onTouchMove);
+    document.removeEventListener('touchend', this._onTouchEnd);
+
+    if (this.#lastCollision) this.#lastCollision.classList.remove(this.#classDragCollision);
+    if (this.#dragProxy) {
+      this.#dragProxy.remove();
+      this.#dragProxy = null;
+    }
+
+    this.#collidables = [];
+    this.#dragging = false;
+    this.#lastCollision = null;
+
+    this.#target.classList.remove(this.#dragHiddenClass, this.#classDragging);
+    document.body.classList.remove(this.#classBodyDragging);
+    if (this.#jail)
+      this.#jail.classList.remove(this.#classJailDragging, this.#classJailDragDisabled);
+
+    this.#destroyed = true;
+  }
+}
 
+/* harmony default export */ const libs_TinyDragger = (TinyDragger);
 
+;// ./src/v1/build/TinyDragger.mjs
 
 
 
 
 })();
 
-window.TinyBasicsEs = __webpack_exports__;
+window.TinyDragger = __webpack_exports__.TinyDragger;
 /******/ })()
 ;