npm - @jsenv/dom - Versions diffs - 0.8.8 → 0.9.1 - Mend

@jsenv/dom 0.8.8 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/jsenv_dom.js +131 -73
package/package.json +2 -2

package/dist/jsenv_dom.js CHANGED Viewed

@@ -104,29 +104,31 @@ const getElementSignature = (element) => {
   if (element.nodeType === Node.TEXT_NODE) {
     return `#text(${getElementSignature(element.nodeValue)})`;
   }
+  if (element instanceof HTMLElement) {
+    const tagName = element.tagName.toLowerCase();
+    const dataUIName = element.getAttribute("data-ui-name");
+    if (dataUIName) {
+      return `${tagName}[data-ui-name="${dataUIName}"]`;
+    }
+    if (element === document.body) {
+      return "<body>";
+    }
+    if (element === document.documentElement) {
+      return "<html>";
+    }
+    const elementId = element.id;
+    if (elementId) {
+      return `${tagName}#${elementId}`;
+    }
+    const className = element.className;
+    if (className) {
+      return `${tagName}.${className.split(" ").join(".")}`;
+    }
-  const tagName = element.tagName.toLowerCase();
-  const dataUIName = element.getAttribute("data-ui-name");
-  if (dataUIName) {
-    return `${tagName}[data-ui-name="${dataUIName}"]`;
+    const parentSignature = getElementSignature(element.parentElement);
+    return `${parentSignature} > ${tagName}`;
   }
-  if (element === document.body) {
-    return "<body>";
-  }
-  if (element === document.documentElement) {
-    return "<html>";
-  }
-  const elementId = element.id;
-  if (elementId) {
-    return `${tagName}#${elementId}`;
-  }
-  const className = element.className;
-  if (className) {
-    return `${tagName}.${className.split(" ").join(".")}`;
-  }
-  const parentSignature = getElementSignature(element.parentElement);
-  return `${parentSignature} > ${tagName}`;
+  return String(element);
 };
 const createIterableWeakSet = () => {
@@ -440,7 +442,6 @@ const parseCSSColor = (color, element) => {
   // Pass through CSS color functions we don't handle
   if (
-    color.startsWith("color(") ||
     color.startsWith("lch(") ||
     color.startsWith("oklch(") ||
     color.startsWith("lab(") ||
@@ -451,6 +452,21 @@ const parseCSSColor = (color, element) => {
     return color;
   }
+  // color(srgb r g b) and color(srgb r g b / a)
+  if (color.startsWith("color(")) {
+    const srgbMatch = color.match(
+      /^color\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)$/,
+    );
+    if (srgbMatch) {
+      const r = Math.round(parseFloat(srgbMatch[1]) * 255);
+      const g = Math.round(parseFloat(srgbMatch[2]) * 255);
+      const b = Math.round(parseFloat(srgbMatch[3]) * 255);
+      const a = srgbMatch[4] !== undefined ? parseFloat(srgbMatch[4]) : 1;
+      return [r, g, b, a];
+    }
+    return color;
+  }
   // Pass through relative color syntax (CSS Color Module Level 5)
   if (color.includes(" from ")) {
     return color;
@@ -598,8 +614,9 @@ const convertColorToRgba = (color) => {
   }
   // Named colors (basic set)
-  if (namedColors[color]) {
-    return [...namedColors[color], 1];
+  const namedColorRgb = namedColors[color];
+  if (namedColorRgb) {
+    return [...namedColorRgb, 1];
   }
   return null;
 };
@@ -3322,46 +3339,60 @@ const createSetMany = (setter) => {
 const setAttributes = createSetMany(setAttribute);
+const isSameColor = (color1, color2) => {
+  if (color1 === color2) {
+    return true;
+  }
+  const color1String = String(parseCSSColor(color1));
+  const color2String = String(parseCSSColor(color2));
+  return color1String === color2String;
+};
 /**
- * Chooses between light and dark colors based on which provides better contrast against a background
- * @param {string} backgroundColor - CSS color value (hex, rgb, hsl, CSS variable, etc.) to test against
- * @param {string} [lightColor="white"] - Light color option (typically for dark backgrounds)
- * @param {string} [darkColor="black"] - Dark color option (typically for light backgrounds)
- * @param {Element} [element] - DOM element to resolve CSS variables against
- * @returns {string} The color that provides better contrast (lightColor or darkColor)
- * @example
- * // Choose text color for a dark blue background
- * pickLightOrDark("#1a202c") // returns "white"
+ * Returns `"white"` or `"black"`, whichever provides better contrast against
+ * the given background color — mirroring the CSS `contrast-color()` function.
+ *
+ * `"white"` is preferred when both colors yield the same contrast ratio.
  *
- * // Choose text color for a light background with CSS variable
- * pickLightOrDark("var(--bg-color)", "white", "black", element) // returns "black" or "white"
+ * @param {string} backgroundColor - CSS color value (hex, rgb, hsl, CSS variable, …)
+ * @param {Element} [element] - DOM element used to resolve CSS variables / computed styles
+ * @returns {"white"|"black"}
+ * @example
+ * contrastColor("#1a202c")                 // "white"  (dark background)
+ * contrastColor("#f5f5f5")                 // "black"  (light background)
+ * contrastColor("var(--bg)", el)             // "white" or "black"
  */
-const pickLightOrDark = (
-  backgroundColor,
-  lightColor = "white",
-  darkColor = "black",
-  element,
-) => {
+const contrastColor = (backgroundColor, element) => {
   const resolvedBgColor = parseCSSColor(backgroundColor, element);
-  const resolvedLightColor = parseCSSColor(lightColor, element);
-  const resolvedDarkColor = parseCSSColor(darkColor, element);
-  if (!resolvedBgColor || !resolvedLightColor || !resolvedDarkColor) {
-    // Fallback to light color if parsing fails
-    return lightColor;
+  if (!resolvedBgColor) {
+    return "white";
   }
-  const contrastWithLight = getContrastRatio(
-    resolvedBgColor,
-    resolvedLightColor,
-  );
-  const contrastWithDark = getContrastRatio(resolvedBgColor, resolvedDarkColor);
+  // Composite against white when the background has transparency so the
+  // luminance reflects what the user actually sees.
+  const [r, g, b] =
+    resolvedBgColor[3] === 1
+      ? resolvedBgColor
+      : compositeColor(resolvedBgColor, WHITE_RGBA);
+  const bgLuminance = getLuminance(r, g, b);
-  return contrastWithLight > contrastWithDark ? lightColor : darkColor;
+  // One luminance comparison replaces two full contrast-ratio computations.
+  // White wins (or ties) when bgLuminance <= the crossover point where both
+  // colors yield identical ratios:
+  //   contrastWithWhite = contrastWithBlack
+  //   1.05 / (L + 0.05) = (L + 0.05) / 0.05
+  //   L = √(1.05 × 0.05) − 0.05  ≈ 0.179
+  return bgLuminance <= EQUAL_CONTRAST_LUMINANCE ? "white" : "black";
 };
+// Luminance threshold at which white and black yield the same contrast ratio
+// against a background. Below → white wins or ties; above → black wins.
+const EQUAL_CONTRAST_LUMINANCE = Math.sqrt(1.05 * 0.05) - 0.05;
+const WHITE_RGBA = [255, 255, 255, 1];
 /**
  * Resolves the luminance value of a CSS color
  * @param {string} color - CSS color value (hex, rgb, hsl, CSS variable, etc.)
@@ -9991,7 +10022,6 @@ const createTransition = ({
               `Debug breakpoint hit at ${(breakpoint * 100).toFixed(1)}% progress`,
             );
             const notifyDebuggerEnd = notifyDebuggerStart();
-            debugger;
             notifyDebuggerEnd();
           }
           if (effect === "pause") {
@@ -11615,7 +11645,7 @@ const initFlexDetailsSet = (
     }
   };
-  const applyAllocatedSpaces = (resizeDetails) => {
+  const applyAllocatedSpaces = ({ reason, animated }) => {
     const changeSet = new Set();
     let maxChange = 0;
@@ -11623,9 +11653,8 @@ const initFlexDetailsSet = (
       const allocatedSpace = allocatedSpaceMap.get(child);
       const allocatedSize = spaceToSize(allocatedSpace, child);
       const space = spaceMap.get(child);
-      const size = spaceToSize(space, child);
+      const size = spaceToSize(space === undefined ? 0 : space, child);
       const sizeChange = Math.abs(size - allocatedSize);
       if (size === allocatedSize) {
         continue;
       }
@@ -11658,16 +11687,18 @@ const initFlexDetailsSet = (
     }
     // Don't animate if changes are too small (avoids imperceptible animations that hide scrollbars)
-    const shouldAnimate =
-      resizeDetails.animated && maxChange >= ANIMATION_THRESHOLD_PX;
+    const shouldAnimate = animated && maxChange >= ANIMATION_THRESHOLD_PX;
-    if (debug && resizeDetails.animated && !shouldAnimate) {
+    if (debug && animated && !shouldAnimate) {
       console.debug(
         `🚫 Skipping animation: max change ${maxChange.toFixed(2)}px < ${ANIMATION_THRESHOLD_PX}px threshold`,
       );
     }
     if (!shouldAnimate) {
+      if (debug) {
+        console.debug(`Applying size changes without animation`);
+      }
       const sizeChangeEntries = [];
       for (const { element, target, sideEffect } of changeSet) {
         element.style.height = `${target}px`;
@@ -11677,19 +11708,26 @@ const initFlexDetailsSet = (
         }
         sizeChangeEntries.push({ element, value: target });
       }
-      onSizeChange?.(sizeChangeEntries, resizeDetails);
+      onSizeChange?.(sizeChangeEntries, { reason, animated });
       return;
     }
+    if (debug) {
+      console.debug(`Start animating size changes`);
+    }
     // Create height animations for each element in changeSet
     const transitions = Array.from(changeSet).map(({ element, target }) => {
       const transition = createHeightTransition(element, target, {
         duration: HEIGHT_TRANSITION_DURATION,
+        // because we also set inline height when we don't want animation and it should win
+        // we could also commit styles for animation or cancel any animation so that when we explicitely set height
+        // sync the transition gets overriden
+        styleSynchronizer: "inline_style",
       });
       return transition;
     });
-    const transition = transitionController.animate(transitions, {
+    const transition = transitionController.update(transitions, {
       onChange: (changeEntries, isLast) => {
         // Apply side effects for each animated element
         for (const { transition, value } of changeEntries) {
@@ -11713,7 +11751,7 @@ const initFlexDetailsSet = (
           );
           onSizeChange(
             sizeChangeEntries,
-            isLast ? { ...resizeDetails, animated: false } : resizeDetails,
+            isLast ? { reason, animated: false } : { reason, animated },
           );
         }
       },
@@ -11958,23 +11996,23 @@ const initFlexDetailsSet = (
     }
   };
-  const updateSpaceDistribution = (resizeDetails) => {
+  const updateSpaceDistribution = ({ reason, animated }) => {
     if (debug) {
-      console.group(`updateSpaceDistribution: ${resizeDetails.reason}`);
+      console.group(`updateSpaceDistribution: ${reason}`);
     }
     prepareSpaceDistribution();
-    distributeAvailableSpace(resizeDetails.reason);
+    distributeAvailableSpace(reason);
     distributeRemainingSpace({
       childToGrow: openedDetailsArray[openedDetailsArray.length - 1],
       childToShrinkFrom: lastChild,
     });
     if (
-      resizeDetails.reason === "initial_space_distribution" ||
-      resizeDetails.reason === "content_change"
+      reason === "initial_space_distribution" ||
+      reason === "content_change"
     ) {
       spaceMap.clear(); // force to set size at start
     }
-    applyAllocatedSpaces(resizeDetails);
+    applyAllocatedSpaces({ reason, animated });
     saveCurrentSizeAsRequestedSizes();
     if (debug) {
       console.groupEnd();
@@ -12015,6 +12053,19 @@ const initFlexDetailsSet = (
       }
     }
     if (someNew || someOld) {
+      for (const child of container.children) {
+        if (!child.dispatchEvent) {
+          // ignore text nodes
+          continue;
+        }
+        child.dispatchEvent(
+          new CustomEvent("resizablechange", {
+            detail: {
+              resizable: resizableDetailsIdSet.has(child.id),
+            },
+          }),
+        );
+      }
       onResizableDetailsChange?.(resizableDetailsIdSet);
     }
   };
@@ -12231,11 +12282,18 @@ const initFlexDetailsSet = (
         if (currentAllocatedSpaceMap) {
           allocatedSpaceMap = currentAllocatedSpaceMap;
           saveCurrentSizeAsRequestedSizes({ replaceExistingAttributes: true });
-          if (onRequestedSizeChange) {
-            for (const [child, allocatedSpace] of allocatedSpaceMap) {
-              const size = spaceToSize(allocatedSpace, child);
+          for (const [child, allocatedSpace] of allocatedSpaceMap) {
+            const size = spaceToSize(allocatedSpace, child);
+            if (onRequestedSizeChange) {
               onRequestedSizeChange(child, size);
             }
+            child.dispatchEvent(
+              new CustomEvent("resizeend", {
+                detail: {
+                  size,
+                },
+              }),
+            );
           }
           onMouseResizeEnd?.();
         }
@@ -12673,4 +12731,4 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
   };
 };
-export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isScrollable, measureScrollbar, mergeOneStyle, mergeTwoStyles, normalizeStyles, parseStyle, pickLightOrDark, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };
+export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, contrastColor, createBackgroundColorTransition, createBackgroundTransition, createBorderRadiusTransition, createBorderTransition, createDragGestureController, createDragToMoveGestureController, createGroupTransitionController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBackground, getBackgroundColor, getBorder, getBorderRadius, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getHeightWithoutTransition, getInnerHeight, getInnerWidth, getLuminance, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getOpacityWithoutTransition, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollBox, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateXWithoutTransition, getTranslateY, getVisuallyVisibleInfo, getWidth, getWidthWithoutTransition, hasCSSSizeUnit, initFlexDetailsSet, initFocusGroup, initPositionSticky, isSameColor, isScrollable, measureScrollbar, mergeOneStyle, mergeTwoStyles, normalizeStyles, parseStyle, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, preventIntermediateScrollbar, resolveCSSColor, resolveCSSSize, resolveColorLuminance, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyStyle, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.8.8",
+  "version": "0.9.1",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
     "@jsenv/core": "../../../",
     "@jsenv/navi": "../navi",
     "@jsenv/snapshot": "../../tooling/snapshot",
-    "@preact/signals": "2.5.1",
+    "@preact/signals": "2.8.1",
     "preact": "11.0.0-beta.0"
   },
   "publishConfig": {