@splendidlabz/utils 1.5.0-alpha.1 → 1.5.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @splendidlabz/utils
 
+## 1.5.0-alpha.4
+
+### Patch Changes
+
+- Updates
+
+## 1.5.0-alpha.3
+
+### Minor Changes
+
+- 5fe7c51: - Just bumping
+  - Fix bug with `mix` erroring when a `null` or `undefined` source is passed to it. `mix` now ignores `null` and `undefined`.
+  - Adds `toDegrees`
+  - Adds `toRadians`
+  - Adds `getCSSValue` and `setCSSValue`. They're aliases for `getCSSVar` and `setCSSVar` but they're more descriptive for standard properties.
+  - Renamed `hasLabel` to `checkForAccessibleName`
+  - Add `getParentElement` to get the parent element of a DOM node. If it encounters an `ASTRO-ISLAND` and `ASTRO-SLOT`, it goes one level up.
+
+## 1.5.0-alpha.2
+
+### Minor Changes
+
+- acf9faf: Improve sort function
+
 ## 1.5.0-alpha.1
 
 ### Patch Changes

package/dom/accessibility.js

@@ -1,21 +1,32 @@
-export function stopBodyScroll() {
-  const top = document.documentElement.scrollTop
+// export function stopBodyScroll(element) {
+//   if (!element) element = document.body
+//   const top = document.documentElement.scrollTop
+//   element.style.top = -1 * top + 'px'
+//   element.style.overflow = 'hidden'
+// }
 
-  element.style.top = -1 * top + 'px'
-  element.style.overflow = 'hidden'
-}
+// export function allowBodyScroll() {
+//   const top = parseFloat(document.body.style.top) * -1
+//   document.body.style.top = null
+//   document.body.style.overflow = null
+//   document.documentElement.scrollTop = top
+// }
 
-export function allowBodyScroll() {
-  const top = parseFloat(document.body.style.top) * -1
-  document.body.style.top = null
-  document.body.style.overflow = null
-  document.documentElement.scrollTop = top
+export function hasAccessibleName(label, labelledBy) {
+  if (label || labelledBy) return true
 }
 
-export function inertOthers() {}
+export function checkForAccessibleName({
+  name,
+  ariaLabel,
+  ariaLabelledBy,
+  severity = 'warn',
+} = {}) {
+  if (ariaLabel || ariaLabelledBy) return true
 
-export function hasLabel(label, labelledBy) {
-  if (label || labelledBy) return true
+  const message = `${name} is missing an accessible name. Please provide an accessible name with 'aria-label' or 'aria-labelledby'.`
+  if (severity === 'warn') console.warn(message)
+  if (severity === 'error') console.error(message)
 }
 
 export function isInvalidAriaPopup(value) {

package/{actions → dom/actions}/index.js

@@ -1,5 +1,3 @@
 export * from './masonry.js'
-export * from './mutation-observer.js'
 export * from './prefer-horizontal-scroll.js'
-export * from './resize-observer.js'
 export * from './sticky.js'

package/dom/actions/masonry.js

@@ -0,0 +1,42 @@
+import { getChildrenElements } from '../get-element.js'
+import { mediaLoaded } from '../media.js'
+import { resizeObserver } from '../observers/resize-observer.js'
+
+export async function masonry(node) {
+  if (nativeMasonrySupport(node)) return
+
+  const colGap = parseFloat(getComputedStyle(node).columnGap)
+  const items = getChildrenElements(node)
+
+  node.style.setProperty('row-gap', '1px', 'important')
+  node.style.gridAutoRows = '0px'
+
+  try {
+    await mediaLoaded(node)
+  } catch (e) {}
+
+  layout({ colGap, items })
+
+  const obs = resizeObserver(node, {
+    async callback(opts) {
+      layout({ colGap, items })
+    },
+  })
+
+  async function layout({ colGap, items }) {
+    items.forEach(item => {
+      const ib = item.getBoundingClientRect()
+      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap)}`
+    })
+  }
+
+  return {
+    destroy() {
+      obs.disconnect()
+    },
+  }
+}
+
+function nativeMasonrySupport(node) {
+  return getComputedStyle(node).gridTemplateRows === 'masonry'
+}

package/{actions → dom/actions}/prefer-horizontal-scroll.js

@@ -3,9 +3,9 @@ import {
   getCSSVar,
   removeListeners,
   setCSSVar,
-} from '../dom/index.js'
+} from '../index.js'
 
-import { omitEmpty } from '../lib/index.js'
+import { omitEmpty } from '../../lib/index.js'
 
 const DEFAULT_OPTIONS = {
   scrollSnapDelay: 1000,

package/{actions → dom/actions}/sticky.js

@@ -1,12 +1,9 @@
-import {
-  boundingBoxRelativeToAncestor,
-  findScrollContainer,
-} from '../dom/index.js'
-import { resizeObserver } from './resize-observer.js'
+import { boundingBoxRelativeToAncestor } from '../bounding-box.js'
+import { resizeObserver } from '../observers/resize-observer.js'
+import { findScrollContainer } from '../ui/scroll-container.js'
 
 export function sticky(node, props = {}) {
   const scrollContainer = findScrollContainer(node)
-
   let stickyTBLR = getComputedTBLR(node)
 
   const obs = resizeObserver(node, {

package/dom/css-vars.js

@@ -1,5 +1,13 @@
 import { getElement } from './get-element.js'
 
+export function getCSSValue(element, prop) {
+  return getCSSVar(element, prop)
+}
+
+export function setCSSValue(element, prop, value) {
+  setCSSVar(element, prop, value)
+}
+
 export function getCSSVar(element, prop) {
   element = getElement(element)
   return getComputedStyle(element).getPropertyValue(prop)

package/dom/events.js

@@ -10,12 +10,13 @@ export function removeListeners(listeners) {
   })
 }
 
+// Dispatch a custom event from a Node.
 export function dispatchEvent(node, eventName, detail, options = {}) {
   node.dispatchEvent(
     new CustomEvent(eventName, {
       ...options,
       detail,
-    }),
+    })
   )
 }
 

package/dom/font-size.js

@@ -1,24 +1,35 @@
 import { splitUnit } from '../lib/index.js'
 
-/* globals getComputedStyle */
+export function getUnit(value) {
+  const [, unit] = splitUnit(value)
+  return unit
+}
+
 export function em(element = document.body, multiple = 1) {
-  const unit = parseFloat(getComputedStyle(element)['font-size'])
-  return Math.round(unit * multiple)
+  const value = parseFloat(getComputedStyle(element)['font-size'])
+  return Math.round(value * multiple)
 }
 
 export function rem(multiple = 1) {
-  const unit = parseFloat(getComputedStyle(document.body)['font-size'])
-  return Math.round(unit * multiple)
+  const value = parseFloat(getComputedStyle(document.body)['font-size'])
+  return Math.round(value * multiple)
+}
+
+export function lh(element = document.body, multiple = 1) {
+  const lineHeight = getComputedStyle(element)['line-height']
+  const value = parseFloat(lineHeight)
+  return Math.round(value * multiple)
 }
 
 export function toPx(value, element = null) {
-  const [amt, unit] = splitUnit(value)
+  const [numeric, unit] = splitUnit(value)
   let finalValue = 0
 
-  if (unit === 'rem') finalValue = rem(amt)
-  if (unit === 'em') finalValue = em(element, amt)
-  if (unit === 'px') finalValue = amt
-  if (!unit) finalValue = amt // Default to px offsets
+  if (unit === 'rem') finalValue = rem(numeric)
+  if (unit === 'em') finalValue = em(element, numeric)
+  if (unit === 'lh') finalValue = lh(element, numeric)
+  if (unit === 'px') finalValue = numeric
+  if (!unit) finalValue = numeric // Default to px offsets
 
   return finalValue
 }

package/dom/get-element.js

@@ -2,6 +2,15 @@
 // If the selector is already an HTMLElement, it will return the selector itself.
 // Otherwise, it will return the first element that matches the selector.
 
+const astroNodes = ['ASTRO-SLOT', 'ASTRO-ISLAND']
+
+// Returns the type of the node.
+export function getNodeType(node) {
+  if (node instanceof Element) return 'element'
+  if (node instanceof NodeList) return 'nodelist'
+  if (Array.isArray(node)) return 'array'
+}
+
 export function getElement(selector) {
   if (!selector) return
   if (selector instanceof HTMLElement) return selector
@@ -16,9 +25,15 @@ export function getChildrenElements(node) {
   return Array.from(children)
 }
 
+export function getParentElement(element) {
+  const parent = element.parentElement
+  if (astroNodes.includes(parent.nodeName)) return getParentElement(parent)
+  return parent
+}
+
 export function getSiblingElements(element) {
   return Array.from(element.parentElement.children).filter(
-    child => child !== element,
+    child => child !== element
   )
 }
 

package/dom/index.js

@@ -1,4 +1,5 @@
 export * from './accessibility.js'
+export * from './actions/index.js'
 export * from './bounding-box.js'
 export * from './clipboard.js'
 export * from './cookie.js'
@@ -11,6 +12,7 @@ export * from './hash.js'
 export * from './keyboard.js'
 export * from './local-store.js'
 export * from './media.js'
+export * from './observers/index.js'
 export * from './pkce.js'
 export * from './query-params.js'
 export * from './random-string.js'

package/dom/media.js

@@ -5,6 +5,7 @@ export async function imagesLoaded(node) {
       if (img.complete) return resolve()
       img.onload = resolve
       img.onerror = e => {
+        // eslint-disable-next-line prefer-promise-reject-errors
         reject('Image failed to load')
       }
     })

package/dom/observers/index.js

@@ -0,0 +1,3 @@
+export * from './intersection-observer.js'
+export * from './mutation-observer.js'
+export * from './resize-observer.js'

package/dom/observers/intersection-observer.js

@@ -0,0 +1,43 @@
+import { dispatchEvent } from '../events.js'
+import { useObserverMethodOnTarget } from './observer.js'
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
+export function intersectionObserver(target, options = {}) {
+  const { callback, ...opts } = options
+  const observer = new IntersectionObserver(observerFn, opts)
+
+  useObserverMethodOnTarget(target, observer, 'observe')
+
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer })
+      else dispatchEvent(target, 'intersect', { entry, entries, observer })
+    }
+  }
+
+  return {
+    observer,
+    observe(target, options) {
+      useObserverMethodOnTarget(target, observer, 'observe', options)
+    },
+
+    unobserve(target) {
+      useObserverMethodOnTarget(target, observer, 'unobserve')
+    },
+
+    takeRecords() {
+      return observer.takeRecords()
+    },
+
+    disconnect() {
+      // Take records before disconnecting.
+      const records = observer.takeRecords()
+      observer.disconnect()
+      if (records.length > 0) observerFn(records)
+    },
+
+    destroy() {
+      observer.disconnect()
+    },
+  }
+}

package/dom/observers/mutation-observer.js

@@ -0,0 +1,51 @@
+/* eslint-env browser */
+import { dispatchEvent } from '../events.js'
+import { useObserverMethodOnTarget } from './observer.js'
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
+
+// These are simply options that will often be used. Check the docs for other options. Adding them here simply because it's easier to refer them here than reading the docs.
+const defaultOptions = {
+  attributes: false,
+  childList: false,
+  subtree: false,
+}
+
+export function mutationObserver(target, options) {
+  options = { ...defaultOptions, ...options }
+  const { callback, ...opts } = options
+  const observer = new MutationObserver(observerFn)
+
+  if (target === window) target = document.body
+  useObserverMethodOnTarget(target, observer, 'observe', opts)
+
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer })
+      else dispatchEvent(target, 'mutate', { entry, entries, observer })
+    }
+  }
+
+  return {
+    observer,
+    observe(target, options) {
+      useObserverMethodOnTarget(target, observer, 'observe', options)
+    },
+
+    takeRecords() {
+      return observer.takeRecords()
+    },
+
+    disconnect() {
+      // Take records before disconnecting.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/takeRecords
+      const records = observer.takeRecords()
+      observer.disconnect()
+      if (records.length > 0) observerFn(records)
+    },
+
+    destroy() {
+      observer.disconnect()
+    },
+  }
+}

package/dom/observers/observer.js

@@ -0,0 +1,18 @@
+import { getNodeType } from '../get-element.js'
+
+export function useObserverMethodOnTarget(
+  target,
+  observer,
+  method = 'observe',
+  options = undefined
+) {
+  const targetType = getNodeType(target)
+  if (targetType === 'element') observer[method](target, options)
+  if (targetType === 'nodelist') {
+    const elements = Array.from(target)
+    elements.forEach(element => observer[method](element, options))
+  }
+  if (targetType === 'array') {
+    target.forEach(element => observer[method](element, options))
+  }
+}

package/dom/observers/resize-observer.js

@@ -0,0 +1,34 @@
+/* eslint-env browser */
+import { dispatchEvent } from '../events.js'
+import { useObserverMethodOnTarget } from './observer.js'
+
+export function resizeObserver(target, options) {
+  // We set the option here to prevent observer from being created unless necessary.
+  options = { observe: true, ...options }
+  if (!options.observe) return
+  const { callback, ...opts } = options
+  const observer = new ResizeObserver(observerFn)
+
+  if (target === window) target = document.body
+  useObserverMethodOnTarget(target, observer, 'observe', opts)
+
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer })
+      else dispatchEvent(target, 'resize-obs', { entry, entries, observer })
+    }
+  }
+
+  return {
+    observe(target, options) {
+      useObserverMethodOnTarget(target, observer, 'observe', options)
+    },
+
+    unobserve(target) {
+      useObserverMethodOnTarget(target, observer, 'unobserve')
+    },
+
+    disconnect: _ => observer.disconnect(),
+    destroy: _ => observer.disconnect(),
+  }
+}

package/eslint.config.js

@@ -0,0 +1,2 @@
+import config from '@splendidlabz/eslint-config'
+export default config

package/lib/arrays/index.js

@@ -1,3 +1,5 @@
+import { getNestedValue } from '../objects/nested-property.js'
+
 export function last(array, index) {
   return index === array.length - 1
 }
@@ -25,38 +27,59 @@ export function shuffle(array) {
 }
 
 /**
- * Sorts an array of objects or strings without mutating the array
+ * Sorts an array of objects, numbers, or strings without mutating the original array
+ * @param {Array} array - Array to sort
+ * @param {Object} options - Sort options
+ * @param {string|string[]|null} options.props - Property or array of properties to sort by. If null, sorts simple arrays
+ * @param {boolean} options.reverse - Whether to sort in reverse order
  */
-export function sort(
-  array,
-  {
-    property, // Property to sort by. Used when sorting array of objects.
-    order = 'asc', // 'asc' or 'desc'
-  },
-) {
+export function sort(array, { props = null, reverse = false } = {}) {
   const clone = array.slice()
-  const sorted = clone.sort((a, b) => {
-    let one = a
-    let two = b
-
-    // Use the `sortBy` property if sorting by objects
-    if (property) {
-      one = a[property]
-      two = b[property]
-    }
 
-    if (order === 'asc') {
-      if (one < two) return -1
-      if (one > two) return 1
-    }
+  // Handle simple arrays (numbers or strings)
+  if (props === null) {
+    return clone.sort((a, b) => {
+      const comparison = compareValues(a, b)
+      return reverse ? -comparison : comparison
+    })
+  }
 
-    if (order === 'desc') {
-      if (one < two) return 1
-      if (one > two) return -1
-    }
+  // Handle objects in arrays
+  const properties = Array.isArray(props) ? props : [props]
+
+  return clone.sort((a, b) => {
+    for (const property of properties) {
+      const aValue = getNestedValue(a, property)
+      const bValue = getNestedValue(b, property)
+
+      // Skip if values are equal
+      if (aValue === bValue) continue
 
+      // Push null/undefined values to the end
+      if (aValue == null) return 1
+      if (bValue == null) return -1
+
+      // Compare values and handle reverse sort
+      const comparison = compareValues(aValue, bValue)
+      return reverse ? -comparison : comparison
+    }
     return 0
   })
+}
+
+// Compare values for sorting
+function compareValues(a, b) {
+  // Compare numbers
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+
+  // Compare strings
+  if (typeof a === 'string' && typeof b === 'string') return a.localeCompare(b)
+
+  // Compare dates
+  const aDate = new Date(a)
+  const bDate = new Date(b)
+  if (!isNaN(aDate) && !isNaN(bDate)) return aDate.getTime() - bDate.getTime()
 
-  return sorted
+  // Convert into strings and compare
+  return String(a).localeCompare(String(b))
 }

package/lib/arrays/sort.spec.js

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+
+import { sort } from './index.js'
+
+describe('Sort by', _ => {
+  it('Standard array - numbers', async () => {
+    const array = [3, 1, 2]
+    const sorted = sort(array)
+    const reversed = sort(array, { reverse: true })
+    expect(sorted).toEqual([1, 2, 3])
+    expect(reversed).toEqual([3, 2, 1])
+  })
+
+  it('Standard array - strings', async () => {
+    const array = ['c', 'a', 'b']
+    const sorted = sort(array)
+    const reversed = sort(array, { reverse: true })
+    expect(sorted).toEqual(['a', 'b', 'c'])
+    expect(reversed).toEqual(['c', 'b', 'a'])
+  })
+
+  it('Standard array - dates', async () => {
+    const array = [
+      new Date('2021-05-18'),
+      new Date('2022-01-01'),
+      new Date('2025-03-09'),
+    ]
+    const sorted = sort(array)
+    const reversed = sort(array, { reverse: true })
+    expect(sorted).toEqual([
+      new Date('2021-05-18'),
+      new Date('2022-01-01'),
+      new Date('2025-03-09'),
+    ])
+    expect(reversed).toEqual([
+      new Date('2025-03-09'),
+      new Date('2022-01-01'),
+      new Date('2021-05-18'),
+    ])
+  })
+  it('Array of objects — simple integer', async () => {
+    const array = [
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+    ]
+    const sorted = sort(array, { props: 'age' })
+    const reversed = sort(array, { props: 'age', reverse: true })
+    expect(sorted).toEqual([
+      { name: 'Betty', age: 25 },
+      { name: 'Ace', age: 30 },
+      { name: 'Candy', age: 35 },
+    ])
+    expect(reversed).toEqual([
+      { name: 'Candy', age: 35 },
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+    ])
+  })
+
+  it('Array of objects — simple string', async () => {
+    const array = [
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+    ]
+    const sorted = sort(array, { props: 'name' })
+    const reversed = sort(array, { props: 'name', reverse: true })
+    expect(sorted).toEqual([
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+    ])
+    expect(reversed).toEqual([
+      { name: 'Candy', age: 35 },
+      { name: 'Betty', age: 25 },
+      { name: 'Ace', age: 30 },
+    ])
+  })
+
+  it('Double property', async () => {
+    const array = [
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+      { name: 'Danny', age: 30 },
+    ]
+    const sorted = sort(array, { props: ['age', 'name'] })
+    const reversed = sort(array, { props: ['age', 'name'], reverse: true })
+    expect(sorted).toEqual([
+      { name: 'Betty', age: 25 },
+      { name: 'Ace', age: 30 },
+      { name: 'Danny', age: 30 },
+      { name: 'Candy', age: 35 },
+    ])
+    expect(reversed).toEqual([
+      { name: 'Candy', age: 35 },
+      { name: 'Danny', age: 30 },
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+    ])
+  })
+
+  it('Nested value', async () => {
+    const array = [
+      { data: { value: 1 } },
+      { data: { value: 2 } },
+      { data: { value: 3 } },
+    ]
+    const sorted = sort(array, { props: 'data.value' })
+    const reversed = sort(array, { props: 'data.value', reverse: true })
+    expect(sorted).toEqual([
+      { data: { value: 1 } },
+      { data: { value: 2 } },
+      { data: { value: 3 } },
+    ])
+    expect(reversed).toEqual([
+      { data: { value: 3 } },
+      { data: { value: 2 } },
+      { data: { value: 1 } },
+    ])
+  })
+})

package/lib/form/sanitize.js

@@ -1,5 +1,6 @@
 import DOMPurify from 'dompurify'
 
+// MIGHT HAVE TO SHIFT THIS TO DOM, because DOMPurify doesn't work with Node
 /**
  * Sanitizes HTML string using DOMPurify.
  * @param {string} html - The HTML string to sanitize.

package/lib/numbers/index.js

@@ -1,3 +1,5 @@
+export * from './math.js'
+
 export function splitUnit(string) {
   // If there are no units, return the number straight.
   if (typeof string === 'number') return [string, null]

package/lib/numbers/math.js

@@ -0,0 +1,9 @@
+// Convert radians to degrees
+export function toDegrees(angle) {
+  return angle * (180 / Math.PI)
+}
+
+// Convert degrees to radians
+export function toRadians(angle) {
+  return angle * (Math.PI / 180)
+}

package/lib/objects/mix/mix.js

@@ -1,6 +1,8 @@
 export function mix(...sources) {
   const result = {}
   for (const source of sources) {
+    // Skip null or undefined sources
+    if (source == null) continue
     merge(result, source)
   }
   return result

package/lib/objects/mix/mix.test.js

@@ -322,3 +322,19 @@ it('Safe Merge', () => {
   expect(mixed.__proto__).toEqual({})
   /* eslint-enable */
 })
+
+it('should skip null and undefined sources', () => {
+  const obj1 = { a: 1 }
+  const obj2 = { b: 2 }
+  const expected = { a: 1, b: 2 }
+
+  expect(mix(obj1, null, obj2)).toEqual(expected)
+  expect(mix(null, obj1, obj2)).toEqual(expected)
+  expect(mix(obj1, obj2, null)).toEqual(expected)
+
+  expect(mix(obj1, undefined, obj2)).toEqual(expected)
+  expect(mix(undefined, obj1, obj2)).toEqual(expected)
+  expect(mix(obj1, obj2, undefined)).toEqual(expected)
+
+  expect(mix(null, obj1, undefined, obj2, null)).toEqual(expected)
+})

package/lib/objects/nested-property.js

@@ -34,3 +34,8 @@ export function getNestedProperty2(object, path) {
   const pathArray = path.split('.')
   return getNestedProperty(object, pathArray)
 }
+
+// Same as dot syntax, but terser and more readable name
+export function getNestedValue(object, path) {
+  return path.split('.').reduce((acc, part) => acc?.[part], object)
+}

package/node/file-cache.js

@@ -119,7 +119,7 @@ export async function getLastModifiedTime(globPath) {
   files = await Promise.all(files.map(fs.stat))
   files = files.map(file => file.mtimeMs)
 
-  const sorted = sort(files, { sortBy: 'mtimeMs', order: 'desc' })
+  const sorted = sort(files, { props: 'mtimeMs', reverse: true })
   return sorted[0] || 0
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.5.0-alpha.1",
+  "version": "1.5.0-alpha.4",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -9,8 +9,6 @@
     "./lib/*": "./lib/*.js",
     "./dom": "./dom/index.js",
     "./dom/*": "./dom/*.js",
-    "./actions": "./actions/index.js",
-    "./actions/*": "./actions/*.js",
     "./node": "./node/index.js",
     "./node/*": "./node/*.js"
   },
@@ -23,16 +21,16 @@
   "dependencies": {
     "dompurify": "^3.2.4",
     "glob-promise": "^6.0.7",
-    "pluralize": "^8.0.0",
-    "statuses": "^2.0.1",
     "marked": "^15.0.7",
     "marked-gfm-heading-id": "^4.1.1",
-    "marked-mangle": "^1.1.10"
+    "marked-mangle": "^1.1.10",
+    "pluralize": "^8.0.0",
+    "statuses": "^2.0.1"
   },
   "devDependencies": {
-    "@splendidlabz/eslint-config": "*",
+    "@splendidlabz/eslint-config": "2.0.0-alpha.1",
     "jsdom": "^26.0.0",
     "np": "^10.2.0",
-    "vitest": "^3.0.7"
+    "vitest": "^3.1.1"
   }
 }

package/.eslintrc.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@splendidlabz/eslint-config'],
-}

package/.turbo/turbo-lint.log

@@ -1,10 +0,0 @@
-
-> @splendidlabs/utils@1.0.3 lint
-> eslint . --fix
-
-
-/Users/zellwk/projects/@splendidlabs/packages/utils/lib/index.test.js
-  4:10  error  'expect' is defined but never used  no-unused-vars
-
-✖ 1 problem (1 error, 0 warnings)
-

package/.turbo/turbo-test.log

@@ -1,10 +0,0 @@
-
-> @splendidlabs/utils@1.0.3 test
-> vitest run
-
-sh: vitest: command not found
-npm ERR! Lifecycle script `test` failed with error: 
-npm ERR! Error: command failed 
-npm ERR!   in workspace: @splendidlabs/utils@1.0.3 
-npm ERR!   at location: /Users/zellwk/projects/@splendidlabs/packages/utils 
-

package/actions/intersection-observer.js

@@ -1,37 +0,0 @@
-// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
-const options = {}
-
-export function intersectionObserver(node, options) {
-  const { callback, opts } = options
-  const observer = new IntersectionObserver(observerFn, opts)
-
-  function observerFn(entries, observer) {
-    entries.forEach(entry => {
-      for (const entry of entries) {
-        // Needs testing to see what's in entry
-        if (callback) callback({ node, entry, observer })
-        else {
-          node.dispatchEvent(
-            new CustomEvent('intersect', {
-              detail: { node, entry, observer },
-            }),
-          )
-        }
-      }
-    })
-  }
-
-  observer.observe(node)
-
-  return {
-    observer,
-    disconnect() {
-      observer.disconnect()
-    },
-
-    // Destroy is used for Svelte actions
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/actions/masonry.js

@@ -1,75 +0,0 @@
-import { getChildrenElements, mediaLoaded } from '../dom'
-
-import { resizeObserver } from './resize-observer'
-
-export async function masonry(node) {
-  if (nativeMasonrySupport(node)) return
-
-  const colGap = parseFloat(getComputedStyle(node).columnGap)
-  const items = getChildrenElements(node)
-
-  node.style.setProperty('row-gap', '1px', 'important')
-  node.style.gridAutoRows = '0px'
-
-  try {
-    await mediaLoaded(node)
-  } catch (e) {}
-
-  layout({ colGap, items })
-
-  const obs = resizeObserver(node, {
-    async callback(opts) {
-      layout({ colGap, items })
-    },
-  })
-
-  async function layout({ colGap, items }) {
-    items.forEach(item => {
-      const ib = item.getBoundingClientRect()
-      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap)}`
-    })
-  }
-
-  return {
-    destroy() {
-      obs.disconnect()
-    },
-  }
-}
-
-// export async function masonry(node) {
-//   if (typeof window === 'undefined') return
-//   if (nativeMasonrySupport(node)) return
-
-//   let items
-//   let gap
-
-//   node.style.setProperty('row-gap', '1px', 'important')
-//   node.style.gridAutoRows = '0px'
-//   // await mediaLoaded(node)
-
-//   const obs = resizeObserver(node, {
-//     async callback(opts) {
-//       items = getChildrenElements(node)
-//       gap = parseFloat(getComputedStyle(node).columnGap)
-//       layout(node)
-//     },
-//   })
-
-//   async function layout() {
-//     items.forEach(item => {
-//       const itemBox = item.getBoundingClientRect()
-//       // item.style.gridRowEnd = `span ${Math.round(itemBox.height + gap)}`
-//     })
-//   }
-
-//   return {
-//     destroy() {
-//       obs.disconnect()
-//     },
-//   }
-// }
-
-function nativeMasonrySupport(node) {
-  return getComputedStyle(node).gridTemplateRows === 'masonry'
-}

package/actions/mutation-observer.js

@@ -1,42 +0,0 @@
-/* eslint-env browser */
-// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
-
-// These are simply options that will often be used. Check the docs for other options.
-const defaultOptions = {
-  attributes: false,
-  childList: false,
-  subtree: false,
-}
-
-export function mutationObserver(node, options) {
-  options = { ...defaultOptions, ...options }
-  const { callback, ...opts } = options
-  const observer = new MutationObserver(observerFn)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ node, entry, observer })
-      else {
-        node.dispatchEvent(
-          new CustomEvent('mutate', {
-            detail: { node, entry, observer },
-          }),
-        )
-      }
-    }
-  }
-
-  if (node === window) node = document.body
-  observer.observe(node, opts)
-
-  return {
-    disconnect() {
-      observer.disconnect()
-    },
-
-    // Destroy is used for Svelte actions
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/actions/resize-observer.js

@@ -1,33 +0,0 @@
-/* eslint-env browser */
-export function resizeObserver(node, options) {
-  // We set the option here to prevent observer from being created unless necessary.
-  options = { observe: true, ...options }
-  if (!options.observe) return
-
-  const observer = new ResizeObserver(observerFn)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (options.callback) options.callback({ node, entry, entries, observer })
-      else {
-        node.dispatchEvent(
-          new CustomEvent('resize-obs', {
-            detail: { node, entry, entries, observer },
-          }),
-        )
-      }
-    }
-  }
-
-  observer.observe(node)
-
-  return {
-    disconnect() {
-      observer.unobserve(node)
-    },
-
-    destroy() {
-      observer.unobserve(node)
-    },
-  }
-}

package/lib/index.test.js

@@ -1,9 +0,0 @@
-// Possible to test???
-import * as test from './index.js'
-
-import { expect, it } from 'vitest'
-
-it('Import Test', () => {
-  console.log(test)
-  console.log('hello')
-})