npm - @jsenv/dom - Versions diffs - 0.6.1 → 0.7.0 - Mend

@jsenv/dom 0.6.1 → 0.7.0

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 (109) hide show

package/dist/jsenv_dom.js +259 -314
package/package.json +2 -4
package/index.js +0 -124
package/src/attr/add_attribute_effect.js +0 -93
package/src/attr/attributes.js +0 -32
package/src/color/color_constrast.js +0 -69
package/src/color/color_parsing.js +0 -319
package/src/color/color_scheme.js +0 -28
package/src/color/pick_light_or_dark.js +0 -34
package/src/color/resolve_css_color.js +0 -60
package/src/demos/3_columns_resize_demo.html +0 -84
package/src/demos/3_rows_resize_demo.html +0 -89
package/src/demos/aside_and_main_demo.html +0 -93
package/src/demos/coordinates_demo.html +0 -450
package/src/demos/document_autoscroll_demo.html +0 -517
package/src/demos/drag_gesture_constraints_demo.html +0 -701
package/src/demos/drag_gesture_demo.html +0 -1047
package/src/demos/drag_gesture_element_to_impact_demo.html +0 -445
package/src/demos/drag_reference_element_demo.html +0 -480
package/src/demos/flex_details_set_demo.html +0 -302
package/src/demos/flex_details_set_demo_2.html +0 -315
package/src/demos/visible_rect_demo.html +0 -525
package/src/element_signature.js +0 -100
package/src/interaction/drag/constraint_feedback_line.js +0 -92
package/src/interaction/drag/drag_constraint.js +0 -659
package/src/interaction/drag/drag_debug_markers.js +0 -635
package/src/interaction/drag/drag_element_positioner.js +0 -382
package/src/interaction/drag/drag_gesture.js +0 -566
package/src/interaction/drag/drag_resize_demo.html +0 -571
package/src/interaction/drag/drag_to_move.js +0 -301
package/src/interaction/drag/drag_to_resize_gesture.js +0 -68
package/src/interaction/drag/drop_target_detection.js +0 -148
package/src/interaction/drag/sticky_frontiers.js +0 -160
package/src/interaction/event_marker.js +0 -14
package/src/interaction/focus/active_element.js +0 -33
package/src/interaction/focus/arrow_navigation.js +0 -599
package/src/interaction/focus/element_is_focusable.js +0 -57
package/src/interaction/focus/element_visibility.js +0 -111
package/src/interaction/focus/find_focusable.js +0 -21
package/src/interaction/focus/focus_group.js +0 -91
package/src/interaction/focus/focus_group_registry.js +0 -12
package/src/interaction/focus/focus_nav.js +0 -12
package/src/interaction/focus/focus_nav_event_marker.js +0 -14
package/src/interaction/focus/focus_trap.js +0 -105
package/src/interaction/focus/tab_navigation.js +0 -128
package/src/interaction/focus/tests/focus_group_skip_tab_test.html +0 -206
package/src/interaction/focus/tests/tree_focus_test.html +0 -304
package/src/interaction/focus/tests/tree_focus_test.jsx +0 -261
package/src/interaction/focus/tests/tree_focus_test_preact.html +0 -13
package/src/interaction/isolate_interactions.js +0 -161
package/src/interaction/keyboard.js +0 -26
package/src/interaction/scroll/capture_scroll.js +0 -47
package/src/interaction/scroll/is_scrollable.js +0 -159
package/src/interaction/scroll/scroll_container.js +0 -110
package/src/interaction/scroll/scroll_trap.js +0 -44
package/src/interaction/scroll/scrollbar_size.js +0 -20
package/src/interaction/scroll/wheel_through.js +0 -138
package/src/iterable_weak_set.js +0 -66
package/src/position/dom_coords.js +0 -340
package/src/position/offset_parent.js +0 -15
package/src/position/position_fixed.js +0 -15
package/src/position/position_sticky.js +0 -213
package/src/position/sticky_rect.js +0 -79
package/src/position/visible_rect.js +0 -486
package/src/pub_sub.js +0 -31
package/src/size/can_take_size.js +0 -11
package/src/size/details_content_full_height.js +0 -63
package/src/size/flex_details_set.js +0 -974
package/src/size/get_available_height.js +0 -22
package/src/size/get_available_width.js +0 -22
package/src/size/get_border_sizes.js +0 -14
package/src/size/get_height.js +0 -4
package/src/size/get_inner_height.js +0 -15
package/src/size/get_inner_width.js +0 -15
package/src/size/get_margin_sizes.js +0 -10
package/src/size/get_max_height.js +0 -57
package/src/size/get_max_width.js +0 -47
package/src/size/get_min_height.js +0 -14
package/src/size/get_min_width.js +0 -14
package/src/size/get_padding_sizes.js +0 -10
package/src/size/get_width.js +0 -4
package/src/size/hooks/use_available_height.js +0 -27
package/src/size/hooks/use_available_width.js +0 -27
package/src/size/hooks/use_max_height.js +0 -10
package/src/size/hooks/use_max_width.js +0 -10
package/src/size/hooks/use_resize_status.js +0 -62
package/src/size/resize.js +0 -695
package/src/size/resolve_css_size.js +0 -32
package/src/style/dom_styles.js +0 -97
package/src/style/style_composition.js +0 -121
package/src/style/style_controller.js +0 -345
package/src/style/style_default.js +0 -153
package/src/style/style_default_demo.html +0 -128
package/src/style/style_parsing.js +0 -375
package/src/transition/demos/animation_resumption_test.xhtml +0 -500
package/src/transition/demos/height_toggle_test.xhtml +0 -515
package/src/transition/dom_transition.js +0 -254
package/src/transition/easing.js +0 -48
package/src/transition/group_transition.js +0 -261
package/src/transition/transform_style_parser.js +0 -32
package/src/transition/transition_playback.js +0 -366
package/src/transition/transition_timeline.js +0 -79
package/src/traversal.js +0 -247
package/src/ui_transition/demos/content_states_transition_demo.html +0 -628
package/src/ui_transition/demos/smooth_height_transition_demo.html +0 -149
package/src/ui_transition/demos/transition_testing.html +0 -354
package/src/ui_transition/ui_transition.js +0 -1470
package/src/utils.js +0 -69
package/src/value_effect.js +0 -35

package/src/demos/visible_rect_demo.html DELETED Viewed

@@ -1,525 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visible Rect Demo</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-        background: #f5f5f5;
-        min-height: 300vh; /* Make page tall enough to scroll */
-        min-width: 1200px; /* Force horizontal scrolling */
-      }
-      .demo-header {
-        background: white;
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-      .demo-title {
-        margin: 0 0 10px 0;
-        font-size: 24px;
-        color: #333;
-      }
-      .demo-description {
-        margin: 0;
-        color: #666;
-        line-height: 1.5;
-      }
-      .scrollable-container {
-        padding: 20px;
-        /* width/height will be set dynamically when overflow: auto */
-      }
-      .scrollable-container.custom-mode {
-        max-width: 600px;
-        max-height: 400px;
-      }
-      .scrollable-content {
-        position: relative;
-      }
-      .target-row {
-        display: flex;
-        gap: 20px;
-        align-items: flex-start;
-        margin: 50px 0;
-      }
-      .side-content {
-        flex: 0 0 200px;
-        padding: 20px;
-        background: rgba(0, 0, 0, 0.05);
-        border-radius: 8px;
-        min-height: 150px;
-      }
-      .side-content h4 {
-        margin: 0 0 10px 0;
-        font-size: 14px;
-        color: #333;
-      }
-      .side-content p {
-        margin: 0;
-        font-size: 13px;
-        color: #666;
-        line-height: 1.4;
-      }
-      .target-element {
-        flex: 1;
-        width: 400px;
-        min-width: 400px;
-        height: 600px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border: 15px solid #333;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        font-size: 18px;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-      }
-      .overlay-ui {
-        position: fixed;
-        z-index: 1000;
-        overflow: hidden;
-        inset: 0;
-        pointer-events: none;
-        background: rgba(
-          0,
-          0,
-          255,
-          0.05
-        ); /* Discrete blue background to make it visible */
-      }
-      .overlay-container {
-        position: absolute;
-        background: rgba(255, 0, 0, 0.5);
-        border: 2px dashed white;
-        box-sizing: border-box; /* Ensure border is included in size */
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
-        font-size: 12px;
-        /* Only transition visual properties, not positioning */
-        transition:
-          background-color 0.2s ease,
-          border-color 0.2s ease;
-      }
-      /* Dynamic styling based on visibility ratio */
-      .overlay-container.high-visibility {
-        background: rgba(0, 255, 0, 0.6);
-        border-color: #00ff00;
-      }
-      .overlay-container.medium-visibility {
-        background: rgba(255, 165, 0, 0.6);
-        border-color: #ffa500;
-      }
-      .overlay-container.low-visibility {
-        background: rgba(255, 0, 0, 0.6);
-        border-color: #ff0000;
-      }
-      .debug-info {
-        position: fixed;
-        top: 100px;
-        right: 10px;
-        background: rgba(0, 0, 0, 0.9);
-        color: white;
-        padding: 15px;
-        border-radius: 8px;
-        font-family: monospace;
-        font-size: 11px;
-        z-index: 2000;
-        max-width: 300px;
-        line-height: 1.4;
-      }
-      .debug-info h4 {
-        margin: 0 0 10px 0;
-        font-size: 12px;
-        color: #4caf50;
-      }
-      .debug-info .section {
-        margin-bottom: 10px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid #333;
-      }
-      .debug-info .section:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-      }
-      .content-section {
-        background: white;
-        margin: 40px 0;
-        padding: 40px;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        text-align: center;
-        min-width: 1000px; /* Force horizontal scrolling */
-      }
-      .content-section:nth-child(even) {
-        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
-        color: #1976d2;
-      }
-      .content-section:nth-child(odd) {
-        background: linear-gradient(135deg, #f3e5f5, #ce93d8);
-        color: #7b1fa2;
-      }
-      .scroll-indicator {
-        position: fixed;
-        top: 10px;
-        right: 10px;
-        background: rgba(0, 0, 0, 0.8);
-        color: white;
-        padding: 10px;
-        border-radius: 4px;
-        font-family: monospace;
-        font-size: 12px;
-        z-index: 2000;
-      }
-      .controls {
-        background: white;
-        padding: 15px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        max-width: 400px;
-      }
-      .controls h3 {
-        margin: 0 0 15px 0;
-        font-size: 16px;
-        color: #333;
-      }
-      .controls button {
-        padding: 10px 15px;
-        background: #4caf50;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: bold;
-        margin-right: 10px;
-      }
-      .controls button:hover {
-        background: #45a049;
-      }
-      .controls button.active {
-        background: #2196f3;
-      }
-      .mode-status {
-        margin-top: 10px;
-        padding: 8px 12px;
-        background: #f0f0f0;
-        border-radius: 4px;
-        font-size: 12px;
-        color: #666;
-        font-style: italic;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="demo-header">
-      <h1 class="demo-title">Visible Rect Demo</h1>
-      <p class="demo-description">
-        This demo shows how the <code>visibleRectEffect</code> API tracks the
-        visible portion of an element with two different visibility ratios:
-        <br />• <strong>Document Visibility:</strong> How much of the element is
-        visible in the browser viewport <br />•
-        <strong>Scroll Container Visibility:</strong> How much of the element is
-        visible within its scrollable parent <br /><strong
-          >Instructions:</strong
-        >
-        Scroll the page and watch how both ratios change. In custom container
-        mode, notice how scroll container visibility can be 100% while document
-        visibility is 0%.
-      </p>
-    </div>
-    <div class="controls">
-      <h3>Scrollable Container</h3>
-      <button id="documentBtn" class="active">Document</button>
-      <button id="customBtn">Custom Container</button>
-      <div class="mode-status" id="modeStatus">Current: Document scrolling</div>
-    </div>
-    <div class="scroll-indicator" id="scrollIndicator">Scroll: 0px</div>
-    <!-- Debug info panel -->
-    <div class="debug-info" id="debugInfo">
-      <h4>Visible Rect API Data</h4>
-      <div class="section">
-        <strong>Visible Rect:</strong><br />
-        <span id="visibleRect">No data</span>
-      </div>
-      <div class="section">
-        <strong>Element Full Size:</strong><br />
-        <span id="fullSize">No data</span>
-      </div>
-      <div class="section">
-        <strong>Document Visibility:</strong><br />
-        <span id="visibilityRatio">No data</span>
-      </div>
-      <div class="section">
-        <strong>Scroll Container Visibility:</strong><br />
-        <span id="scrollVisibilityRatio">No data</span>
-      </div>
-      <div class="section">
-        <strong>Visibility Status:</strong><br />
-        <span id="visibility">No data</span>
-      </div>
-    </div>
-    <!-- Single container that can switch between document and custom scrolling -->
-    <div class="scrollable-container" id="scrollableContainer">
-      <div class="scrollable-content">
-        <h3>Scrollable Content Area</h3>
-        <p>Content above the target element</p>
-        <div class="target-row">
-          <div class="side-content">
-            <h4>Left Content</h4>
-            <p>
-              This is some content on the left side of the target element. It
-              helps demonstrate how the overlay system works when the target is
-              part of a more complex layout.
-            </p>
-            <p>Additional content to make this section taller.</p>
-          </div>
-          <div class="target-element" id="targetElement">Target Element</div>
-          <div class="side-content">
-            <h4>Right Content</h4>
-            <p>
-              This is content on the right side of the target element. The
-              flexbox layout ensures proper alignment while maintaining the
-              overlay functionality.
-            </p>
-            <p>More content to balance the layout.</p>
-          </div>
-        </div>
-        <p>Content below target element</p>
-      </div>
-    </div>
-    <!-- Overlay UI showing the visible rect -->
-    <div class="overlay-ui" id="overlayUI" style="display: none">
-      <div class="overlay-container" id="overlayContainer">VISIBLE RECT</div>
-    </div>
-    <script type="module">
-      import { visibleRectEffect } from "../position/visible_rect.js";
-      const targetElement = document.getElementById("targetElement");
-      const scrollableContainer = document.getElementById(
-        "scrollableContainer",
-      );
-      const overlayUI = document.getElementById("overlayUI");
-      const overlayContainer = document.getElementById("overlayContainer");
-      const scrollIndicator = document.getElementById("scrollIndicator");
-      const documentBtn = document.getElementById("documentBtn");
-      const customBtn = document.getElementById("customBtn");
-      const modeStatus = document.getElementById("modeStatus");
-      const visibleRectSpan = document.getElementById("visibleRect");
-      const fullSizeSpan = document.getElementById("fullSize");
-      const visibilityRatioSpan = document.getElementById("visibilityRatio");
-      const scrollVisibilityRatioSpan = document.getElementById(
-        "scrollVisibilityRatio",
-      );
-      const visibilitySpan = document.getElementById("visibility");
-      let currentVisibleRectEffect = null;
-      const STORAGE_KEY = "overlay-demo-mode";
-      // Load saved mode from localStorage
-      const savedMode = localStorage.getItem(STORAGE_KEY) || "document";
-      // Update mode status display
-      function updateModeStatus(mode) {
-        if (mode === "document") {
-          modeStatus.textContent = "Current: Document scrolling";
-        } else {
-          modeStatus.textContent = "Current: Custom container scrolling";
-        }
-      }
-      // Update scroll indicator
-      const updateScrollIndicator = () => {
-        const scrollY = window.scrollY || document.documentElement.scrollTop;
-        const scrollX = window.scrollX || document.documentElement.scrollLeft;
-        scrollIndicator.textContent = `Scroll: ${Math.round(scrollX)}px, ${Math.round(scrollY)}px`;
-      };
-      // Initialize scroll indicator
-      updateScrollIndicator();
-      window.addEventListener("scroll", updateScrollIndicator);
-      // Initialize overlay
-      function initializeOverlay() {
-        if (currentVisibleRectEffect) {
-          currentVisibleRectEffect.disconnect();
-        }
-        overlayUI.style.display = "block";
-        currentVisibleRectEffect = visibleRectEffect(
-          targetElement,
-          (visibleRect, fullRect) => {
-            // Update overlay container position and size
-            overlayContainer.style.left = `${visibleRect.left}px`;
-            overlayContainer.style.top = `${visibleRect.top}px`;
-            overlayContainer.style.width = `${visibleRect.width}px`;
-            overlayContainer.style.height = `${visibleRect.height}px`;
-            // Hide overlay if element is not visible
-            if (visibleRect.width <= 0 || visibleRect.height <= 0) {
-              overlayContainer.style.display = "none";
-            } else {
-              overlayContainer.style.display = "flex";
-            }
-            // Update dynamic styling based on visibility ratio
-            overlayContainer.classList.remove(
-              "high-visibility",
-              "medium-visibility",
-              "low-visibility",
-            );
-            let visibilityClass = "low-visibility";
-            let overlayText = "VISIBLE RECT";
-            if (visibleRect.visibilityRatio >= 0.8) {
-              visibilityClass = "high-visibility";
-              overlayText = "FULLY VISIBLE";
-            } else if (visibleRect.visibilityRatio >= 0.3) {
-              visibilityClass = "medium-visibility";
-              overlayText = "PARTIALLY VISIBLE";
-            } else if (visibleRect.visibilityRatio > 0) {
-              visibilityClass = "low-visibility";
-              overlayText = "BARELY VISIBLE";
-            }
-            overlayContainer.classList.add(visibilityClass);
-            overlayContainer.textContent = overlayText;
-            // Update debug information
-            visibleRectSpan.innerHTML = `
-              left: ${Math.round(visibleRect.left)}px<br>
-              top: ${Math.round(visibleRect.top)}px<br>
-              width: ${Math.round(visibleRect.width)}px<br>
-              height: ${Math.round(visibleRect.height)}px
-            `;
-            fullSizeSpan.innerHTML = `
-              width: ${Math.round(fullRect.width)}px<br>
-              height: ${Math.round(fullRect.height)}px
-            `;
-            // Display the visibility ratios from the API
-            visibilityRatioSpan.innerHTML = `
-              ${(visibleRect.visibilityRatio * 100).toFixed(1)}%<br>
-              <small>Document Ratio: ${visibleRect.visibilityRatio.toFixed(3)}</small>
-            `;
-            scrollVisibilityRatioSpan.innerHTML = `
-              ${(visibleRect.scrollVisibilityRatio * 100).toFixed(1)}%<br>
-              <small>Scroll Ratio: ${visibleRect.scrollVisibilityRatio.toFixed(3)}</small>
-            `;
-            const isVisible = visibleRect.width > 0 && visibleRect.height > 0;
-            visibilitySpan.innerHTML = `
-              ${isVisible ? "Visible" : "Hidden"}<br>
-              <small>${visibilityClass.replace("-", " ").toUpperCase()}</small>
-            `;
-            console.log("Visible rect updated:", { visibleRect, fullRect });
-          },
-        );
-        console.log("Visible rect effect initialized");
-      }
-      // Set document scrolling mode
-      function setDocumentScrolling() {
-        scrollableContainer.style.overflow = "visible";
-        scrollableContainer.classList.remove("custom-mode");
-        localStorage.setItem(STORAGE_KEY, "document");
-        updateModeStatus("document");
-        initializeOverlay();
-        console.log("Document scrolling mode activated");
-      }
-      // Set custom container scrolling mode
-      function setCustomContainerScrolling() {
-        scrollableContainer.style.overflow = "auto";
-        scrollableContainer.classList.add("custom-mode");
-        localStorage.setItem(STORAGE_KEY, "custom");
-        updateModeStatus("custom");
-        initializeOverlay();
-        console.log("Custom container scrolling mode activated");
-      }
-      // Button handlers
-      documentBtn.addEventListener("click", () => {
-        documentBtn.classList.add("active");
-        customBtn.classList.remove("active");
-        setDocumentScrolling();
-      });
-      customBtn.addEventListener("click", () => {
-        customBtn.classList.add("active");
-        documentBtn.classList.remove("active");
-        setCustomContainerScrolling();
-      });
-      // Initialize with saved mode
-      if (savedMode === "custom") {
-        customBtn.classList.add("active");
-        documentBtn.classList.remove("active");
-        setCustomContainerScrolling();
-      } else {
-        documentBtn.classList.add("active");
-        customBtn.classList.remove("active");
-        setDocumentScrolling();
-      }
-      console.log("Visible rect demo initialized");
-    </script>
-  </body>
-</html>

package/src/element_signature.js DELETED Viewed

@@ -1,100 +0,0 @@
-/**
- * Generates a unique signature for various types of elements that can be used for identification in logs.
- *
- * This function handles different types of elements and returns an appropriate identifier:
- * - For DOM elements: Creates a CSS selector using tag name, data-ui-name, ID, classes, or parent hierarchy
- * - For React/Preact elements (JSX): Returns JSX-like representation with type and props
- * - For functions: Returns function name and optional underlying element reference in brackets
- * - For null/undefined: Returns the string representation
- *
- * The returned signature for DOM elements is a valid CSS selector that can be copy-pasted
- * into browser dev tools to locate the element in the DOM.
- *
- * @param {HTMLElement|Object|Function|null|undefined} element - The element to generate a signature for
- * @returns {string} A unique identifier string in various formats depending on element type
- *
- * @example
- * // For DOM element with data-ui-name
- * // <div data-ui-name="header">
- * getElementSignature(element) // Returns: `div[data-ui-name="header"]`
- *
- * @example
- * // For DOM element with ID
- * // <div id="main" class="container active">
- * getElementSignature(element) // Returns: "div#main"
- *
- * @example
- * // For DOM element with classes only
- * // <button class="btn primary">
- * getElementSignature(element) // Returns: "button.btn.primary"
- *
- * @example
- * // For DOM element without distinguishing features (uses parent hierarchy)
- * // <p> inside <section id="content">
- * getElementSignature(element) // Returns: "section#content > p"
- *
- * @example
- * // For React/Preact element with props
- * // <MyComponent id="widget" />
- * getElementSignature(element) // Returns: `<MyComponent id="widget" />`
- *
- * @example
- * // For named function with underlying element reference
- * const MyComponent = () => {}; MyComponent.underlyingElementId = "div#main";
- * getElementSignature(MyComponent) // Returns: "[function MyComponent for div#main]"
- *
- * @example
- * // For anonymous function without underlying element
- * const anonymousFunc = () => {};
- * getElementSignature(anonymousFunc) // Returns: "[function]"
- *
- * @example
- * // For named function without underlying element
- * function namedHandler() {}
- * getElementSignature(namedHandler) // Returns: "[function namedHandler]"
- *
- * @example
- * // For null/undefined
- * getElementSignature(null) // Returns: "null"
- */
-export const getElementSignature = (element) => {
-  if (!element) {
-    return String(element);
-  }
-  if (typeof element === "function") {
-    const functionName = element.name;
-    const functionLabel = functionName
-      ? `function ${functionName}`
-      : "function";
-    const underlyingElementId = element.underlyingElementId;
-    if (underlyingElementId) {
-      return `[${functionLabel} for ${underlyingElementId}]`;
-    }
-    return `[${functionLabel}]`;
-  }
-  if (element.props) {
-    const type = element.type;
-    const id = element.props.id;
-    if (id) {
-      return `<${type} id="${id}" />`;
-    }
-    return `<${type} />`;
-  }
-  const tagName = element.tagName.toLowerCase();
-  const dataUIName = element.getAttribute("data-ui-name");
-  if (dataUIName) {
-    return `${tagName}[data-ui-name="${dataUIName}"]`;
-  }
-  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}`;
-};