@vettvangur/vanilla 0.0.48 → 0.0.50

package/dist/data.esm.js

@@ -0,0 +1,167 @@
+/**
+ * vanilla :: index.mjs.
+ *
+ * Vanilla JS helper utilities.
+ *
+ * These docs are generated from inline JSDoc in the repo and are intended for contributors.
+ *
+ * @generated
+ * @module vanilla
+ */
+
+
+/**
+ * Fetcher.
+ *
+ * @param {object} options - Options object.
+ * @param {string} options.url - Value.
+ * @param {any} [options.options=null] - Options that control behavior.
+ * @param {boolean} [options.throwOnError=false] - Value.
+ * @returns Result of the operation.
+ * @throws When the operation fails.
+ *
+ * @example
+ * // vanilla (src/tools/javascript/vanilla/index.mjs)
+ * // import { fetcher } from '@vettvangur/vanilla'
+ *
+ * await fetcher({ url: url, options: {}, throwOnError: throwOnError })
+ */
+
+async function fetcher({
+  url,
+  options = null,
+  throwOnError = false
+}) {
+  const errorMessage = `[@vettvangur/vanilla :: fetcher] Error: ${url}`;
+  try {
+    const request = await fetch(url, options);
+    if (!request.ok) {
+      const errorDetails = await request.text();
+      const fullErrorMessage = `${errorMessage} - Status: ${request.status}, ${request.statusText}, Details: ${errorDetails}`;
+      console.error(fullErrorMessage);
+      if (throwOnError) {
+        throw new Error(fullErrorMessage);
+      }
+
+      // Return null instead of undefined on error for predictable handling
+      return null;
+    }
+    return await request.json();
+  } catch (error) {
+    const fullErrorMessage = `${errorMessage} - ${error}`;
+    console.error(fullErrorMessage);
+    if (throwOnError) {
+      throw error;
+    }
+
+    // Return null instead of undefined on error for predictable handling
+    return null;
+  }
+}
+
+/**
+ * Checks if a given string is a valid regular expression pattern.
+ *
+ * @ignore
+ * @param {string} pattern - The regex pattern to validate.
+ * @returns {boolean} Returns `true` if the pattern is a valid regex, otherwise `false`.
+ */
+function isValidRegex(pattern) {
+  try {
+    new RegExp(pattern);
+    return true;
+  } catch (_unused) {
+    return false;
+  }
+}
+
+/**
+ * Regexr.
+ *
+ * @example
+ * console.log(regexr)
+ */
+const regexr = {
+  /**
+   * Tests whether a given value matches a regex pattern.
+   *
+   * @param {Object} params - Parameters for testing regex.
+   * @param {string} params.value - The string to test against the regex.
+   * @param {string} params.pattern - The regex pattern to match.
+   * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+   * @returns {boolean} Returns `true` if the value matches the pattern, otherwise `false`.
+   *
+   * @example
+   * const isMatch = regexr.match(pattern)
+   * console.log(isMatch) // return true or false
+   */
+  test({
+    value,
+    pattern,
+    flags = 'g'
+  }) {
+    if (!value || !pattern || !isValidRegex(pattern)) {
+      return false;
+    }
+    const regexp = new RegExp(pattern, flags);
+    return regexp.test(value);
+  },
+  /**
+   * Matches a given value against a regex pattern and returns the matches.
+   *
+   * @param {Object} params - Parameters for matching regex.
+   * @param {string} params.value - The string to match against the regex.
+   * @param {string} params.pattern - The regex pattern to match.
+   * @param {string} [params.flags='g'] - Regex flags (default: 'g').
+   * @returns {Array<string>|null} Returns an array of matches, or `null` if no match is found.
+   */
+  match({
+    value,
+    pattern,
+    flags = 'g'
+  }) {
+    if (!value || !pattern || !isValidRegex(pattern)) {
+      return null;
+    }
+    const regexp = new RegExp(pattern, flags);
+    return value.match(regexp);
+  }
+};
+
+/**
+ * Flatten.
+ *
+ * @param obj - Value.
+ * @param prefix - Value.
+ * @returns Result of the operation.
+ *
+ * @example
+ * // vanilla (src/tools/javascript/vanilla/index.mjs)
+ * // import { flatten } from '@vettvangur/vanilla'
+ *
+ * flatten(obj, prefix)
+ */
+const flatten = (obj, prefix = '') => {
+  try {
+    if (!obj || typeof obj !== 'object') {
+      console.error('❌ FLATTEN ERROR: Received invalid data:', obj);
+      return {};
+    }
+    return Object.keys(obj).reduce((acc, key) => {
+      const fullKey = key === 'DEFAULT' ? prefix : prefix ? `${prefix}-${key}` : key;
+      if (typeof obj[key] === 'object' && key !== 'DEFAULT') {
+        Object.assign(acc, flatten(obj[key], fullKey));
+      } else if (typeof obj[key] === 'string') {
+        acc[fullKey] = obj[key];
+      } else {
+        console.warn('! Skipping Invalid Key:', key, 'Value:', obj[key]);
+      }
+      return acc;
+    }, {});
+  } catch (error) {
+    console.error('🚨 Flatten Function Error:', error);
+    return {}; // Prevents Tailwind from crashing
+  }
+};
+
+export { fetcher, flatten, regexr };

package/dist/dom.esm.js

@@ -0,0 +1,91 @@
+/**
+ * vanilla :: index.mjs.
+ *
+ * Vanilla JS helper utilities.
+ *
+ * These docs are generated from inline JSDoc in the repo and are intended for contributors.
+ *
+ * @generated
+ * @module vanilla
+ */
+
+
+/**
+ * Preload timeout.
+ *
+ * @returns Nothing.
+ *
+ * @example
+ * // vanilla (src/tools/javascript/vanilla/index.mjs)
+ * // import { preloadTimeout } from '@vettvangur/vanilla'
+ *
+ * preloadTimeout()
+ */
+function preloadTimeout() {
+  const body = document.querySelector('.body');
+  if (!body) {
+    return;
+  }
+  setTimeout(() => body.classList.add('loaded'), 100);
+  setTimeout(() => {
+    body.classList.add('preload--hidden');
+    body.classList.remove('preload--transitions');
+  }, 400);
+}
+
+/**
+ * Click outside.
+ *
+ * @param callback - Value.
+ * @returns Nothing.
+ *
+ * @example
+ * // vanilla (src/tools/javascript/vanilla/index.mjs)
+ * // import { clickOutside } from '@vettvangur/vanilla'
+ *
+ * clickOutside(callback)
+ */
+function clickOutside(callback) {
+  // Clicks
+  document.addEventListener('click', e => {
+    const target = e.target;
+    const classTargets = document.querySelectorAll('.co-el');
+
+    // Check if the click target is inside an element with class `.co-trigger`
+    // @ts-ignore
+    if (target.closest('.co-trigger')) {
+      return;
+    }
+
+    // Execute the callback function
+    callback(e);
+
+    // Close open elements
+    Array.prototype.forEach.call(classTargets, item => {
+      if (item.classList.contains('open')) {
+        item.classList.remove('open');
+      }
+    });
+  }, false);
+
+  // ESC key
+  document.addEventListener('keyup', e => {
+    const openElements = document.querySelectorAll('.open');
+    const keys = e.keyCode || e.which;
+
+    // If ESC key (key code 27) is pressed
+    if (keys === 27) {
+      // Execute the callback function
+      callback(e);
+
+      // Close open elements
+      Array.prototype.forEach.call(openElements, item => {
+        if (item.classList.contains('open')) {
+          item.classList.remove('open');
+        }
+      });
+    }
+  });
+}
+
+export { clickOutside, preloadTimeout };

package/dist/hyphenation.esm.js

@@ -0,0 +1,350 @@
+/**
+ * Lazy-loaded hyphenation functions. Loaded on-demand so consumers that
+ * do not use hyphenation do not pay the bundle cost.
+ */
+
+/** @type {Promise<((word: string) => Promise<string>) | null> | null} */
+let hyphenateEnPromise = null;
+/** @type {Promise<((word: string) => Promise<string>) | null> | null} */
+let hyphenateIsPromise = null;
+
+/**
+ * Stores the original (non-hyphenated) text content for elements.
+ * Used to ensure idempotent re-runs on resize/font load.
+ * @type {WeakMap<HTMLElement, string>}
+ */
+const originalText = new WeakMap();
+let resizeListenerBound = false;
+let resizeTimer;
+/** @type {HyphenationOptions | undefined} */
+let resizeOptions;
+let fontsListenerBound = false;
+const HYHEN_CLASS_MANUAL = 'js-hyphen-manual';
+const HYPHEN_CLASS_EMERGENCY = 'js-hyphen-emergency';
+
+/** @type {CanvasRenderingContext2D | null} */
+let measureCtx = null;
+
+/**
+ * Gets (and lazily creates) the canvas context used for text measurement.
+ *
+ * @returns {CanvasRenderingContext2D | null}
+ */
+function getMeasureCtx() {
+  if (measureCtx) {
+    return measureCtx;
+  }
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  const canvas = document.createElement('canvas');
+  measureCtx = canvas.getContext('2d');
+  return measureCtx;
+}
+
+/**
+ * Loads the `hyphen` package module and extracts a `hyphenate()` function,
+ * handling common CJS/ESM interop shapes.
+ *
+ * @param {string} moduleId
+ * @returns {Promise<((word: string) => Promise<string>) | null>}
+ */
+async function loadHyphenate(moduleId) {
+  try {
+    var _ref, _mod$hyphenate, _mod$default, _mod$default2;
+    const mod = await import(moduleId);
+    const hyphenate = (_ref = (_mod$hyphenate = mod === null || mod === void 0 ? void 0 : mod.hyphenate) !== null && _mod$hyphenate !== void 0 ? _mod$hyphenate : mod === null || mod === void 0 || (_mod$default = mod.default) === null || _mod$default === void 0 ? void 0 : _mod$default.hyphenate) !== null && _ref !== void 0 ? _ref : mod === null || mod === void 0 || (_mod$default2 = mod.default) === null || _mod$default2 === void 0 || (_mod$default2 = _mod$default2.default) === null || _mod$default2 === void 0 ? void 0 : _mod$default2.hyphenate;
+    if (typeof hyphenate === 'function') {
+      return hyphenate;
+    }
+    console.error('[vanilla] initHyphenation: hyphenate() export not found (CJS/ESM interop issue).', {
+      moduleId,
+      availableKeys: mod ? Object.keys(mod) : null,
+      defaultKeys: mod !== null && mod !== void 0 && mod.default && typeof mod.default === 'object' ? Object.keys(mod.default) : null
+    });
+    return null;
+  } catch (error) {
+    console.error('[vanilla] initHyphenation: failed to load hyphenation module.', {
+      moduleId,
+      error
+    });
+    return null;
+  }
+}
+
+/**
+ * @param {string} lang
+ * @returns {Promise<((word: string) => Promise<string>) | null>}
+ */
+function getHyphenateForLang(lang) {
+  const isIcelandic = lang.startsWith('is');
+  if (isIcelandic) {
+    if (!hyphenateIsPromise) {
+      hyphenateIsPromise = loadHyphenate('hyphen/is/index.js');
+    }
+    return hyphenateIsPromise;
+  }
+  if (!hyphenateEnPromise) {
+    hyphenateEnPromise = loadHyphenate('hyphen/en/index.js');
+  }
+  return hyphenateEnPromise;
+}
+
+/**
+ * Applies a CSS-like text-transform to a string.
+ *
+ * @param {string} text
+ * @param {string} transform
+ * @returns {string}
+ */
+function applyTextTransform(text, transform) {
+  switch (transform) {
+    case 'uppercase':
+      return text.toUpperCase();
+    case 'lowercase':
+      return text.toLowerCase();
+    default:
+      return text;
+  }
+}
+
+/**
+ * Measures rendered text width using canvas, approximating letter-spacing.
+ *
+ * @param {string} text
+ * @param {CSSStyleDeclaration} style
+ * @returns {number}
+ */
+function measureTextWidth(text, style) {
+  const ctx = getMeasureCtx();
+  if (!ctx) {
+    return 0;
+  }
+
+  // `style.font` is a computed shorthand like "700 16px/20px Foo".
+  ctx.font = style.font;
+  const transformed = applyTextTransform(text, style.textTransform);
+  const metrics = ctx.measureText(transformed);
+  let width = metrics.width;
+
+  // Canvas does not support letter-spacing; approximate when it's a pixel value.
+  if (style.letterSpacing && style.letterSpacing !== 'normal') {
+    const ls = Number.parseFloat(style.letterSpacing);
+    if (Number.isFinite(ls) && transformed.length > 1) {
+      width += (transformed.length - 1) * ls;
+    }
+  }
+  return width;
+}
+
+/**
+ * Options for initHyphenation.
+ *
+ * @typedef {Object} HyphenationOptions
+ * @property {string[]} [classes]
+ *   Class names or prefixes to target. If omitted, defaults to `[class*="headline"]`.
+ */
+
+/**
+ * Escapes a string for use inside a CSS attribute selector.
+ *
+ * @param {string} value
+ * @returns {string}
+ */
+function escapeForCssAttrValue(value) {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+/**
+ * Normalizes a class token by trimming and removing a leading dot.
+ *
+ * @param {string} className
+ * @returns {string}
+ */
+function normalizeClassToken(className) {
+  return className.trim().replace(/^\./, '');
+}
+
+/**
+ * Finds the element that defines the usable line width.
+ * Inline elements are walked upward until a non-inline ancestor is found.
+ *
+ * @param {HTMLElement} el
+ * @returns {HTMLElement}
+ */
+function findLineWidthElement(el) {
+  let current = el;
+  while (current) {
+    const display = getComputedStyle(current).display;
+    if (display !== 'inline') {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return el;
+}
+
+/**
+ * Computes the available line width for an element, excluding horizontal padding.
+ *
+ * @param {HTMLElement} el
+ * @returns {number}
+ */
+function getAvailableLineWidth(el) {
+  const widthEl = findLineWidthElement(el);
+  const rectWidth = widthEl.getBoundingClientRect().width;
+  const base = widthEl.clientWidth || rectWidth;
+  if (!base) {
+    return 0;
+  }
+  const style = getComputedStyle(widthEl);
+  const paddingLeft = Number.parseFloat(style.paddingLeft) || 0;
+  const paddingRight = Number.parseFloat(style.paddingRight) || 0;
+  return Math.max(0, Math.floor(base - paddingLeft - paddingRight));
+}
+
+/**
+ * Removes legacy inline hyphenation styles so class-based styling can take over.
+ *
+ * @param {HTMLElement} el
+ */
+function removeLegacyInlineHyphenStyles(el) {
+  el.style.removeProperty('hyphens');
+  el.style.removeProperty('overflow-wrap');
+  el.style.removeProperty('word-break');
+  const styleAttr = el.getAttribute('style');
+  if (styleAttr != null && styleAttr.trim() === '') {
+    el.removeAttribute('style');
+  }
+}
+
+/**
+ * Initializes responsive, language-aware hyphenation for text elements.
+ *
+ * - Inserts soft hyphens for words that cannot fit on a line by themselves.
+ * - Re-runs on window resize and font loading when called on `document`.
+ * - Adds `js-hyphen-manual` when soft hyphens are inserted.
+ * - Adds `js-hyphen-emergency` as a last-resort overflow fallback.
+ *
+ * @param {Document | ParentNode} [root=document]
+ *   Root node to scope the query to.
+ *
+ *   - Use `document` to scan the whole page and enable auto re-runs on resize/font load.
+ *   - Use an element (or other `ParentNode`) to scope hyphenation to a subtree (no global listeners).
+ * @param {HyphenationOptions} [options={}]
+ *   Configuration options.
+ *
+ *   - `options.classes`: array of class tokens or prefixes to match.
+ *     Each token matches either an exact class or a prefix (e.g. `headline` matches `headline` and `headline-xl`).
+ *     If omitted, defaults to targeting elements matching `[class*="headline"]`.
+ * @returns {Promise<void>}
+ */
+async function initHyphenation(root = document, options = {}) {
+  var _options$classes;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  if (root === document) {
+    resizeOptions = options;
+    if (!resizeListenerBound) {
+      resizeListenerBound = true;
+      window.addEventListener('resize', () => {
+        if (resizeTimer) {
+          window.clearTimeout(resizeTimer);
+        }
+        resizeTimer = window.setTimeout(() => {
+          initHyphenation(document, resizeOptions || {}).catch(e => console.error('hyphenation', e));
+        }, 150);
+      });
+    }
+    if (!fontsListenerBound && 'fonts' in document) {
+      var _fontSet$ready;
+      fontsListenerBound = true;
+      const fontSet = document.fonts;
+      fontSet === null || fontSet === void 0 || (_fontSet$ready = fontSet.ready) === null || _fontSet$ready === void 0 || _fontSet$ready.then(() => initHyphenation(document, resizeOptions || {})).catch(e => console.error('hyphenation fonts', e));
+      try {
+        var _fontSet$addEventList;
+        fontSet === null || fontSet === void 0 || (_fontSet$addEventList = fontSet.addEventListener) === null || _fontSet$addEventList === void 0 || _fontSet$addEventList.call(fontSet, 'loadingdone', () => {
+          initHyphenation(document, resizeOptions || {}).catch(e => console.error('hyphenation fonts', e));
+        });
+      } catch (_unused) {
+        // ignore
+      }
+    }
+  }
+  const candidates = (_options$classes = options.classes) !== null && _options$classes !== void 0 && _options$classes.length ? Array.from(options.classes.reduce((acc, className) => {
+    const token = normalizeClassToken(className);
+    if (!token) {
+      return acc;
+    }
+    const escaped = escapeForCssAttrValue(token);
+    root.querySelectorAll(`[class*="${escaped}"]`).forEach(el => {
+      const matches = Array.from(el.classList).some(cls => cls === token || cls.startsWith(token));
+      if (matches) {
+        acc.add(el);
+      }
+    });
+    return acc;
+  }, new Set())) : Array.from(root.querySelectorAll('[class*="headline"]'));
+  if (candidates.length === 0) {
+    return;
+  }
+  await Promise.all(candidates.map(async el => {
+    var _el$closest;
+    removeLegacyInlineHyphenStyles(el);
+    el.classList.remove(HYHEN_CLASS_MANUAL, HYPHEN_CLASS_EMERGENCY);
+    const current = (el.textContent || '').replace(/\u00ad/g, '');
+    const stored = originalText.get(el);
+    const text = stored && stored === current ? stored : current;
+    originalText.set(el, text);
+    if (!text.trim()) {
+      return;
+    }
+    if (el.textContent !== text) {
+      el.textContent = text;
+    }
+    const availableWidth = getAvailableLineWidth(el);
+    if (!availableWidth) {
+      return;
+    }
+    const lang = (((_el$closest = el.closest('[lang]')) === null || _el$closest === void 0 ? void 0 : _el$closest.lang) || document.documentElement.lang || 'en-us').toLowerCase();
+    const style = getComputedStyle(el);
+    const parts = text.split(/(\s+)/);
+    let didChange = false;
+    let needsEmergencyBreak = false;
+
+    /** @type {((word: string) => Promise<string>) | null} */
+    let hyphenFn = null;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (!part || /^\s+$/.test(part)) {
+        continue;
+      }
+      if (measureTextWidth(part, style) <= availableWidth) {
+        continue;
+      }
+      if (!hyphenFn) {
+        hyphenFn = await getHyphenateForLang(lang);
+        if (!hyphenFn) {
+          return;
+        }
+      }
+      const hyphenatedWord = await hyphenFn(part);
+      if (hyphenatedWord !== part) {
+        parts[i] = hyphenatedWord;
+        didChange = true;
+      } else {
+        needsEmergencyBreak = true;
+      }
+    }
+    if (didChange) {
+      el.classList.add(HYHEN_CLASS_MANUAL);
+      el.textContent = parts.join('');
+    }
+    if (needsEmergencyBreak) {
+      el.classList.add(HYPHEN_CLASS_EMERGENCY);
+    }
+  }));
+}
+
+export { initHyphenation };