@splendidlabz/utils 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @splendidlabz/utils
 
+## 1.10.0
+
+### Minor Changes
+
+- 4efacb3: - 6c636877 fix scroll observer
+  - 54effb06 add rlh
+
+## 1.9.1
+
+### Patch Changes
+
+- Replace Markdown with Markdown-it
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/cjs/dom/font-size.cjs

@@ -23,6 +23,7 @@ __export(font_size_exports, {
   getUnit: () => getUnit,
   lh: () => lh,
   rem: () => rem,
+  rlh: () => rlh,
   toPx: () => toPx
 });
 module.exports = __toCommonJS(font_size_exports);
@@ -41,13 +42,17 @@ function getUnit(value) {
   const [, unit] = splitUnit(value);
   return unit;
 }
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
 function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)["font-size"]);
   return Math.round(value * multiple);
 }
-function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
-  return Math.round(value * multiple);
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
 }
 function lh(element = document.body, multiple = 1) {
   const lineHeight = getComputedStyle(element)["line-height"];
@@ -70,5 +75,6 @@ function toPx(value, element = null) {
   getUnit,
   lh,
   rem,
+  rlh,
   toPx
 });

package/dist/cjs/dom/index.cjs

@@ -77,6 +77,7 @@ __export(dom_exports, {
   rem: () => rem,
   removeListeners: () => removeListeners,
   resizeObserver: () => resizeObserver,
+  rlh: () => rlh,
   sanitize: () => sanitize2,
   scrollObserver: () => scrollObserver,
   scrollToElement: () => scrollToElement,
@@ -736,13 +737,17 @@ function getUnit(value) {
   const [, unit] = splitUnit(value);
   return unit;
 }
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
 function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)["font-size"]);
   return Math.round(value * multiple);
 }
-function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
-  return Math.round(value * multiple);
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
 }
 function lh(element = document.body, multiple = 1) {
   const lineHeight = getComputedStyle(element)["line-height"];
@@ -915,40 +920,35 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
   const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -987,10 +987,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }
@@ -1234,6 +1235,7 @@ function scrambleText(text) {
   rem,
   removeListeners,
   resizeObserver,
+  rlh,
   sanitize,
   scrollObserver,
   scrollToElement,

package/dist/cjs/dom/observers/index.cjs

@@ -156,40 +156,35 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
   const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -228,10 +223,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }

package/dist/cjs/dom/observers/scroll-observer.cjs

@@ -83,40 +83,35 @@ var defaultOptions = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
   const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -155,10 +150,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }

package/dist/cjs/lib/index.cjs

@@ -989,16 +989,23 @@ function parseSSE(message) {
 }
 
 // src/lib/strings/markdown.js
-var import_marked = require("marked");
-var import_marked_gfm_heading_id = require("marked-gfm-heading-id");
-var import_marked_mangle = require("marked-mangle");
+var import_markdown_it = __toESM(require("markdown-it"), 1);
+var import_markdown_it_anchor = __toESM(require("markdown-it-anchor"), 1);
+var md = (0, import_markdown_it.default)({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+md.use(import_markdown_it_anchor.default, {
+  permalink: false,
+  slugify: (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")
+});
 function markdown(content, options = {}) {
   const defaultOptions = { inline: false };
   const opts = { ...defaultOptions, ...options };
-  import_marked.marked.use((0, import_marked_mangle.mangle)());
-  import_marked.marked.use((0, import_marked_gfm_heading_id.gfmHeadingId)());
   const { content: treated } = treatMarkdownWhitespace(content, opts);
-  return import_marked.marked.parse(treated);
+  if (opts.inline) return md.renderInline(treated);
+  return md.render(treated);
 }
 function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: "", inline };

package/dist/cjs/lib/strings/index.cjs

@@ -104,16 +104,23 @@ function isDigit(char) {
 }
 
 // src/lib/strings/markdown.js
-var import_marked = require("marked");
-var import_marked_gfm_heading_id = require("marked-gfm-heading-id");
-var import_marked_mangle = require("marked-mangle");
+var import_markdown_it = __toESM(require("markdown-it"), 1);
+var import_markdown_it_anchor = __toESM(require("markdown-it-anchor"), 1);
+var md = (0, import_markdown_it.default)({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+md.use(import_markdown_it_anchor.default, {
+  permalink: false,
+  slugify: (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")
+});
 function markdown(content, options = {}) {
   const defaultOptions = { inline: false };
   const opts = { ...defaultOptions, ...options };
-  import_marked.marked.use((0, import_marked_mangle.mangle)());
-  import_marked.marked.use((0, import_marked_gfm_heading_id.gfmHeadingId)());
   const { content: treated } = treatMarkdownWhitespace(content, opts);
-  return import_marked.marked.parse(treated);
+  if (opts.inline) return md.renderInline(treated);
+  return md.render(treated);
 }
 function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: "", inline };

package/dist/cjs/lib/strings/markdown.cjs

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/lib/strings/markdown.js
@@ -23,16 +33,23 @@ __export(markdown_exports, {
   treatMarkdownWhitespace: () => treatMarkdownWhitespace
 });
 module.exports = __toCommonJS(markdown_exports);
-var import_marked = require("marked");
-var import_marked_gfm_heading_id = require("marked-gfm-heading-id");
-var import_marked_mangle = require("marked-mangle");
+var import_markdown_it = __toESM(require("markdown-it"), 1);
+var import_markdown_it_anchor = __toESM(require("markdown-it-anchor"), 1);
+var md = (0, import_markdown_it.default)({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+md.use(import_markdown_it_anchor.default, {
+  permalink: false,
+  slugify: (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")
+});
 function markdown(content, options = {}) {
   const defaultOptions = { inline: false };
   const opts = { ...defaultOptions, ...options };
-  import_marked.marked.use((0, import_marked_mangle.mangle)());
-  import_marked.marked.use((0, import_marked_gfm_heading_id.gfmHeadingId)());
   const { content: treated } = treatMarkdownWhitespace(content, opts);
-  return import_marked.marked.parse(treated);
+  if (opts.inline) return md.renderInline(treated);
+  return md.render(treated);
 }
 function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: "", inline };

package/dist/esm/dom/font-size.js

@@ -12,13 +12,17 @@ function getUnit(value) {
   const [, unit] = splitUnit(value);
   return unit;
 }
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
 function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)["font-size"]);
   return Math.round(value * multiple);
 }
-function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
-  return Math.round(value * multiple);
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
 }
 function lh(element = document.body, multiple = 1) {
   const lineHeight = getComputedStyle(element)["line-height"];
@@ -40,5 +44,6 @@ export {
   getUnit,
   lh,
   rem,
+  rlh,
   toPx
 };

package/dist/esm/dom/index.js

@@ -640,13 +640,17 @@ function getUnit(value) {
   const [, unit] = splitUnit(value);
   return unit;
 }
+function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
+  return Math.round(value * multiple);
+}
 function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)["font-size"]);
   return Math.round(value * multiple);
 }
-function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)["font-size"]);
-  return Math.round(value * multiple);
+function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)["line-height"]);
+  return Math.round(lineHeight * multiple);
 }
 function lh(element = document.body, multiple = 1) {
   const lineHeight = getComputedStyle(element)["line-height"];
@@ -819,40 +823,35 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
   const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -891,10 +890,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }
@@ -1137,6 +1137,7 @@ export {
   rem,
   removeListeners,
   resizeObserver,
+  rlh,
   sanitize2 as sanitize,
   scrollObserver,
   scrollToElement,

package/dist/esm/dom/observers/index.js

@@ -128,40 +128,35 @@ var defaultOptions2 = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions2, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
   const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -200,10 +195,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }

package/dist/esm/dom/observers/scroll-observer.js

@@ -58,40 +58,35 @@ var defaultOptions = {
   // Float between 0 to 1.
   tolerance: 0.1,
   // Float between 0 to 1. Tolerance for event firing
-  throttle: 16,
-  // Throttle interval in ms (default: ~60fps)
   once: false
   // Only fire threshold callback once
 };
 function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } = options;
   const opts = { ...defaultOptions, ...userOpts };
-  const { threshold, tolerance, throttle, once } = opts;
-  const prevScrollDirection = null;
+  const { threshold, tolerance, once } = opts;
+  let prevScrollDirection = null;
   let prevScrollTop = 0;
   let prevScrollPercent = 0;
-  let lastThrottleTime = 0;
   let thresholdFired = false;
   let rafId = null;
-  const isDocumentScroll = node === document || node === window;
+  const isDocumentScroll = node === document || node === window || node === document.documentElement;
   const scrollElement = isDocumentScroll ? document.documentElement : node;
+  const eventTarget = isDocumentScroll ? window : node;
   let cachedScrollHeight = 0;
   let cachedClientHeight = 0;
   updateCache();
   const cacheObserver = resizeObserver(scrollElement, {
     callback: updateCache
   });
-  node.addEventListener("scroll", throttledObserve, { passive: true });
+  eventTarget.addEventListener("scroll", throttledObserve, { passive: true });
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe);
+  }
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight;
     cachedClientHeight = scrollElement.clientHeight;
   }
-  function throttledObserve() {
-    const now = Date.now();
-    if (now - lastThrottleTime < throttle) return;
-    lastThrottleTime = now;
-    rafId = requestAnimationFrame(observe);
-  }
   function observe() {
     const scrollTop = scrollElement.scrollTop;
     if (Math.abs(scrollTop - prevScrollTop) < 1) return;
@@ -130,10 +125,11 @@ function scrollObserver(node, options = {}) {
     }
     prevScrollTop = scrollTop;
     prevScrollPercent = scrollPercent;
+    prevScrollDirection = scrollDirection;
   }
   return {
     destroy() {
-      node.removeEventListener("scroll", throttledObserve);
+      eventTarget.removeEventListener("scroll", throttledObserve);
       if (rafId) cancelAnimationFrame(rafId);
       cacheObserver.destroy();
     }

package/dist/esm/lib/index.js

@@ -869,16 +869,23 @@ function parseSSE(message) {
 }
 
 // src/lib/strings/markdown.js
-import { marked } from "marked";
-import { gfmHeadingId } from "marked-gfm-heading-id";
-import { mangle } from "marked-mangle";
+import markdownit from "markdown-it";
+import anchor from "markdown-it-anchor";
+var md = markdownit({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+md.use(anchor, {
+  permalink: false,
+  slugify: (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")
+});
 function markdown(content, options = {}) {
   const defaultOptions = { inline: false };
   const opts = { ...defaultOptions, ...options };
-  marked.use(mangle());
-  marked.use(gfmHeadingId());
   const { content: treated } = treatMarkdownWhitespace(content, opts);
-  return marked.parse(treated);
+  if (opts.inline) return md.renderInline(treated);
+  return md.render(treated);
 }
 function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: "", inline };

package/dist/esm/lib/strings/index.js

@@ -55,16 +55,23 @@ function isDigit(char) {
 }
 
 // src/lib/strings/markdown.js
-import { marked } from "marked";
-import { gfmHeadingId } from "marked-gfm-heading-id";
-import { mangle } from "marked-mangle";
+import markdownit from "markdown-it";
+import anchor from "markdown-it-anchor";
+var md = markdownit({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+md.use(anchor, {
+  permalink: false,
+  slugify: (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")
+});
 function markdown(content, options = {}) {
   const defaultOptions = { inline: false };
   const opts = { ...defaultOptions, ...options };
-  marked.use(mangle());
-  marked.use(gfmHeadingId());
   const { content: treated } = treatMarkdownWhitespace(content, opts);
-  return marked.parse(treated);
+  if (opts.inline) return md.renderInline(treated);
+  return md.render(treated);
 }
 function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: "", inline };

package/dist/esm/lib/strings/markdown.js

@@ -1,14 +1,21 @@
 // src/lib/strings/markdown.js
-import { marked } from "marked";
-import { gfmHeadingId } from "marked-gfm-heading-id";
-import { mangle } from "marked-mangle";
+import markdownit from "markdown-it";
+import anchor from "markdown-it-anchor";
+var md = markdownit({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+md.use(anchor, {
+  permalink: false,
+  slugify: (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")
+});
 function markdown(content, options = {}) {
   const defaultOptions = { inline: false };
   const opts = { ...defaultOptions, ...options };
-  marked.use(mangle());
-  marked.use(gfmHeadingId());
   const { content: treated } = treatMarkdownWhitespace(content, opts);
-  return marked.parse(treated);
+  if (opts.inline) return md.renderInline(treated);
+  return md.render(treated);
 }
 function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: "", inline };

package/dist/types/dom/font-size.d.cts

@@ -1,7 +1,8 @@
 declare function getUnit(value: any): any;
-declare function em(element?: HTMLElement, multiple?: number): number;
 declare function rem(multiple?: number): number;
+declare function em(element?: HTMLElement, multiple?: number): number;
+declare function rlh(multiple?: number): number;
 declare function lh(element?: HTMLElement, multiple?: number): number;
 declare function toPx(value: any, element?: any): number;
 
-export { em, getUnit, lh, rem, toPx };
+export { em, getUnit, lh, rem, rlh, toPx };

package/dist/types/dom/index.d.cts

@@ -8,7 +8,7 @@ export { cookies, getCookie } from './cookie.cjs';
 export { getCSSValue, getCSSVar, setCSSValue, setCSSVar } from './css-vars.cjs';
 export { CustomEventOptions, EventListener, ListenerManager, addListeners, dispatchEvent, removeListeners, updateEvent } from './events.cjs';
 export { Focusable, Focusables, getFocusableElements } from './focusable.cjs';
-export { em, getUnit, lh, rem, toPx } from './font-size.cjs';
+export { em, getUnit, lh, rem, rlh, toPx } from './font-size.cjs';
 export { getAncestorWithSiblings, getChildrenElements, getElement, getNodeType, getParentElement, getSelfIndex, getSiblingElements, isAncestor } from './get-element.cjs';
 export { sha256Hash } from './hash.cjs';
 export { isArrowKey, isEscapeKey, isShiftTab, isTab, isTabKey } from './keyboard.cjs';
@@ -17,7 +17,7 @@ export { imagesLoaded, mediaLoaded, videosLoaded } from './media.cjs';
 export { intersectionObserver } from './observers/intersection-observer.cjs';
 export { mutationObserver } from './observers/mutation-observer.cjs';
 export { resizeObserver } from './observers/resize-observer.cjs';
-export { scrollObserver } from './observers/scroll-observer.cjs';
+export { ScrollObserverOptions, scrollObserver } from './observers/scroll-observer.cjs';
 export { PKCE } from './pkce.cjs';
 export { queryParams } from './query-params.cjs';
 export { randomString, uuid } from './random-string.cjs';

package/dist/types/dom/observers/index.d.cts

@@ -1,4 +1,4 @@
 export { intersectionObserver } from './intersection-observer.cjs';
 export { mutationObserver } from './mutation-observer.cjs';
 export { resizeObserver } from './resize-observer.cjs';
-export { scrollObserver } from './scroll-observer.cjs';
+export { ScrollObserverOptions, scrollObserver } from './scroll-observer.cjs';

package/dist/types/dom/observers/scroll-observer.d.cts

@@ -1,27 +1,50 @@
+/**
+ * @typedef {Object} ScrollObserverOptions
+ * @property {number} [threshold] - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
+ * @property {number} [tolerance] - Float between 0 to 1. Tolerance zone around threshold
+ * @property {boolean} [once] - Only fire threshold callback once (default: false)
+ * @property {Function} [callback] - Called on every scroll with scrollPercent
+ * @property {Function} [onScrollDown] - Called when scrolling down
+ * @property {Function} [onScrollUp] - Called when scrolling up
+ * @property {Function} [onEnterThreshold] - Called when entering threshold zone
+ */
 /**
  * Scroll Observer - Optimized for performance
  * @param {Element} node - The element to observe scroll events on
- * @param {Object} options - Configuration options
- * @param {Number} options.threshold - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
- * @param {Number} options.tolerance - Float between 0 to 1. Tolerance zone around threshold
- * @param {Number} options.throttle - Throttle interval in ms (default: 16ms for ~60fps)
- * @param {Boolean} options.once - Only fire threshold callback once (default: false)
- * @param {Function} options.callback - Called on every scroll with scrollPercent
- * @param {Function} options.onScrollDown - Called when scrolling down
- * @param {Function} options.onScrollUp - Called when scrolling up
- * @param {Function} options.onEnterThreshold - Called when entering threshold zone
+ * @param {ScrollObserverOptions} [options] - Configuration options
  */
-declare function scrollObserver(node: Element, options?: {
-    threshold: number;
-    tolerance: number;
-    throttle: number;
-    once: boolean;
-    callback: Function;
-    onScrollDown: Function;
-    onScrollUp: Function;
-    onEnterThreshold: Function;
-}): {
+declare function scrollObserver(node: Element, options?: ScrollObserverOptions): {
     destroy(): void;
 };
+type ScrollObserverOptions = {
+    /**
+     * - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
+     */
+    threshold?: number;
+    /**
+     * - Float between 0 to 1. Tolerance zone around threshold
+     */
+    tolerance?: number;
+    /**
+     * - Only fire threshold callback once (default: false)
+     */
+    once?: boolean;
+    /**
+     * - Called on every scroll with scrollPercent
+     */
+    callback?: Function;
+    /**
+     * - Called when scrolling down
+     */
+    onScrollDown?: Function;
+    /**
+     * - Called when scrolling up
+     */
+    onScrollUp?: Function;
+    /**
+     * - Called when entering threshold zone
+     */
+    onEnterThreshold?: Function;
+};
 
-export { scrollObserver };
+export { type ScrollObserverOptions, scrollObserver };

package/dist/types/lib/strings/markdown.d.cts

@@ -3,11 +3,11 @@
  * @param {string} content - Markdown content to convert
  * @param {Object} [options={}] - Conversion options
  * @param {boolean} [options.inline=false] - Whether content should be treated as inline markdown
- * @returns {string|Promise<string>} HTML string or Promise that resolves to HTML string
+ * @returns {string} Converted HTML string
  */
 declare function markdown(content: string, options?: {
     inline?: boolean;
-}): string | Promise<string>;
+}): string;
 /**
  * Handles whitespace in markdown content to ensure proper rendering
  * @param {string} content - Markdown content to process

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -54,6 +54,8 @@
     "deep-eql": "^5.0.2",
     "dompurify": "^3.2.4",
     "glob": "^11.0.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
     "marked": "^15.0.7",
     "marked-gfm-heading-id": "^4.1.1",
     "marked-mangle": "^1.1.10",

package/src/dom/font-size.js

@@ -5,14 +5,19 @@ export function getUnit(value) {
   return unit
 }
 
+export function rem(multiple = 1) {
+  const value = parseFloat(getComputedStyle(document.body)['font-size'])
+  return Math.round(value * multiple)
+}
+
 export function em(element = document.body, multiple = 1) {
   const value = parseFloat(getComputedStyle(element)['font-size'])
   return Math.round(value * multiple)
 }
 
-export function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)['font-size'])
-  return Math.round(value * multiple)
+export function rlh(multiple = 1) {
+  const lineHeight = parseFloat(getComputedStyle(document.body)['line-height'])
+  return Math.round(lineHeight * multiple)
 }
 
 export function lh(element = document.body, multiple = 1) {

package/src/dom/observers/scroll-observer.js

@@ -4,40 +4,42 @@ import { resizeObserver } from './resize-observer.js'
 const defaultOptions = {
   threshold: 0, // Float between 0 to 1.
   tolerance: 0.1, // Float between 0 to 1. Tolerance for event firing
-  throttle: 16, // Throttle interval in ms (default: ~60fps)
   once: false, // Only fire threshold callback once
 }
 
-// TODO: Move to Utils/Dom
+/**
+ * @typedef {Object} ScrollObserverOptions
+ * @property {number} [threshold] - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
+ * @property {number} [tolerance] - Float between 0 to 1. Tolerance zone around threshold
+ * @property {boolean} [once] - Only fire threshold callback once (default: false)
+ * @property {Function} [callback] - Called on every scroll with scrollPercent
+ * @property {Function} [onScrollDown] - Called when scrolling down
+ * @property {Function} [onScrollUp] - Called when scrolling up
+ * @property {Function} [onEnterThreshold] - Called when entering threshold zone
+ */
+
 /**
  * Scroll Observer - Optimized for performance
  * @param {Element} node - The element to observe scroll events on
- * @param {Object} options - Configuration options
- * @param {Number} options.threshold - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
- * @param {Number} options.tolerance - Float between 0 to 1. Tolerance zone around threshold
- * @param {Number} options.throttle - Throttle interval in ms (default: 16ms for ~60fps)
- * @param {Boolean} options.once - Only fire threshold callback once (default: false)
- * @param {Function} options.callback - Called on every scroll with scrollPercent
- * @param {Function} options.onScrollDown - Called when scrolling down
- * @param {Function} options.onScrollUp - Called when scrolling up
- * @param {Function} options.onEnterThreshold - Called when entering threshold zone
+ * @param {ScrollObserverOptions} [options] - Configuration options
  */
 export function scrollObserver(node, options = {}) {
   const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } =
     options
   const opts = { ...defaultOptions, ...userOpts }
-  const { threshold, tolerance, throttle, once } = opts
+  const { threshold, tolerance, once } = opts
 
-  const prevScrollDirection = null
+  let prevScrollDirection = null
   let prevScrollTop = 0
   let prevScrollPercent = 0
-  let lastThrottleTime = 0
   let thresholdFired = false
   let rafId = null
 
   // Determine scroll context once at initialization
-  const isDocumentScroll = node === document || node === window
+  const isDocumentScroll =
+    node === document || node === window || node === document.documentElement
   const scrollElement = isDocumentScroll ? document.documentElement : node
+  const eventTarget = isDocumentScroll ? window : node
 
   // Cache DOM references and expensive calculations
   let cachedScrollHeight = 0
@@ -49,21 +51,17 @@ export function scrollObserver(node, options = {}) {
     callback: updateCache,
   })
 
-  node.addEventListener('scroll', throttledObserve, { passive: true })
+  eventTarget.addEventListener('scroll', throttledObserve, { passive: true })
+
+  function throttledObserve() {
+    rafId = requestAnimationFrame(observe)
+  }
 
   function updateCache() {
     cachedScrollHeight = scrollElement.scrollHeight
     cachedClientHeight = scrollElement.clientHeight
   }
 
-  function throttledObserve() {
-    const now = Date.now()
-    if (now - lastThrottleTime < throttle) return
-
-    lastThrottleTime = now
-    rafId = requestAnimationFrame(observe)
-  }
-
   function observe() {
     const scrollTop = scrollElement.scrollTop
 
@@ -120,11 +118,12 @@ export function scrollObserver(node, options = {}) {
 
     prevScrollTop = scrollTop
     prevScrollPercent = scrollPercent
+    prevScrollDirection = scrollDirection
   }
 
   return {
     destroy() {
-      node.removeEventListener('scroll', throttledObserve)
+      eventTarget.removeEventListener('scroll', throttledObserve)
       if (rafId) cancelAnimationFrame(rafId)
       cacheObserver.destroy()
     },

package/src/lib/strings/markdown.js

@@ -1,24 +1,36 @@
-import { marked } from 'marked'
-import { gfmHeadingId } from 'marked-gfm-heading-id'
-import { mangle } from 'marked-mangle'
+import markdownit from 'markdown-it'
+import anchor from 'markdown-it-anchor'
+
+const md = markdownit({
+  html: true,
+  linkify: true,
+  typographer: true,
+})
+
+md.use(anchor, {
+  permalink: false,
+  slugify: s =>
+    s
+      .toLowerCase()
+      .replace(/\s+/g, '-')
+      .replace(/[^\w-]/g, ''),
+})
 
 /**
  * Converts markdown content to HTML with whitespace handling
  * @param {string} content - Markdown content to convert
  * @param {Object} [options={}] - Conversion options
  * @param {boolean} [options.inline=false] - Whether content should be treated as inline markdown
- * @returns {string|Promise<string>} HTML string or Promise that resolves to HTML string
+ * @returns {string} Converted HTML string
  */
 export function markdown(content, options = {}) {
   const defaultOptions = { inline: false }
   const opts = { ...defaultOptions, ...options }
 
-  // Prepare Marked
-  marked.use(mangle())
-  marked.use(gfmHeadingId())
-
   const { content: treated } = treatMarkdownWhitespace(content, opts)
-  return marked.parse(treated)
+
+  if (opts.inline) return md.renderInline(treated)
+  return md.render(treated)
 }
 
 /**