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

@jsenv/dom 0.6.0 → 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 +262 -330
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 -1491
package/src/utils.js +0 -69
package/src/value_effect.js +0 -35

package/src/demos/drag_gesture_constraints_demo.html DELETED Viewed

@@ -1,701 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Drag Gesture Demo - Custom Bounds Constraints</title>
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-        background: #f0f0f0;
-      }
-      .demo-section {
-        margin: 40px auto;
-        max-width: 900px;
-      }
-      .demo-title {
-        background: white;
-        padding: 15px 20px;
-        border-radius: 8px 8px 0 0;
-        border-bottom: 2px solid #333;
-        margin: 0;
-        font-size: 18px;
-        font-weight: bold;
-        color: #333;
-      }
-      .container {
-        width: 400px;
-        height: 300px;
-        background: white;
-        overflow: auto;
-        overscroll-behavior: contain;
-        position: relative;
-        margin: 0 auto;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        border-radius: 4px;
-        border: 30px solid #ddd;
-      }
-      /* Horizontal constraints content */
-      .horizontal-content {
-        width: 800px; /* Wider than container = horizontal scrollbar */
-        height: 280px; /* Same height as container = no vertical scrollbar */
-        background:
-          linear-gradient(
-            90deg,
-            transparent 99px,
-            #eee 100px,
-            #eee 101px,
-            transparent 102px
-          ),
-          linear-gradient(
-            90deg,
-            #ff9999 0px,
-            #ff9999 100px,
-            transparent 100px,
-            transparent 580px,
-            #ff9999 580px,
-            #ff9999 800px
-          );
-        background-size:
-          100px 280px,
-          800px 280px;
-        position: relative;
-      }
-      /* Vertical constraints content */
-      .vertical-content {
-        width: 380px; /* Same width as container = no horizontal scrollbar */
-        height: 600px; /* Taller than container = vertical scrollbar */
-        background:
-          linear-gradient(
-            transparent 99px,
-            #eee 100px,
-            #eee 101px,
-            transparent 102px
-          ),
-          linear-gradient(
-            #ff9999 0px,
-            #ff9999 100px,
-            transparent 100px,
-            transparent 460px,
-            #ff9999 460px,
-            #ff9999 600px
-          );
-        background-size:
-          380px 100px,
-          380px 600px;
-        position: relative;
-      }
-      .draggable-rectangle {
-        width: 80px;
-        height: 60px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        /* border: 3px solid #333; */
-        border-radius: 8px;
-        position: absolute;
-        cursor: grab;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        font-size: 12px;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        transition: box-shadow 0.2s ease;
-        user-select: none;
-      }
-      .draggable-rectangle:hover {
-        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-      }
-      .draggable-rectangle[data-dragging] {
-        cursor: grabbing;
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-        z-index: 1000;
-      }
-      .info {
-        max-width: 900px;
-        margin: 0 auto;
-        padding: 20px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      .info h1 {
-        margin-top: 0;
-        color: #333;
-      }
-      .info ul {
-        line-height: 1.6;
-      }
-      .debug-toggle {
-        margin: 20px auto;
-        text-align: center;
-      }
-      .debug-toggle label {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        color: #333;
-        cursor: pointer;
-        background: white;
-        padding: 10px 15px;
-        border-radius: 4px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        transition: all 0.2s ease;
-      }
-      .debug-toggle label:hover {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      }
-      .debug-toggle input[type="checkbox"] {
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-      }
-      /* Visual indicators for bounds */
-      .bounds-legend {
-        background: white;
-        padding: 15px;
-        border-radius: 6px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        margin: 20px auto;
-        max-width: 400px;
-        text-align: center;
-      }
-      .bounds-legend h4 {
-        margin: 0 0 10px 0;
-        font-size: 14px;
-        color: #333;
-      }
-      .legend-item {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        margin: 0 10px;
-        font-size: 12px;
-      }
-      .legend-color {
-        width: 20px;
-        height: 15px;
-        border-radius: 2px;
-        border: 1px solid #333;
-      }
-      .red-zone {
-        background: #ff9999;
-      }
-      .position-display {
-        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: 11px;
-        z-index: 10000;
-        line-height: 1.4;
-        min-width: 200px;
-      }
-      .position-display div {
-        margin: 2px 0;
-      }
-      .position-display .label {
-        font-weight: bold;
-        color: #ffeb3b;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="info">
-      <h1>Drag Gesture Demo - Custom Bounds Constraints</h1>
-      <p>
-        This demo demonstrates custom boundary constraints that prevent dragging
-        beyond specific limits:
-      </p>
-      <ul>
-        <li>
-          <strong>Horizontal Constraints:</strong> Element's left edge must stay
-          between 100px-500px. Red zones show forbidden positions for the
-          element.
-        </li>
-        <li>
-          <strong>Vertical Constraints:</strong> Element's top edge must stay
-          between 100px-400px. Red zones show forbidden positions for the
-          element.
-        </li>
-        <li>
-          <strong>Red zones:</strong> Show areas where the element cannot be
-          positioned accounting for its full size (0-100px and 580px+
-          horizontally, 0-100px and 460px+ vertically)
-        </li>
-        <li>
-          <strong>Auto-scroll:</strong> Still works when dragging near container
-          edges, but respects bounds
-        </li>
-      </ul>
-    </div>
-    <div class="debug-toggle">
-      <label>
-        <input type="checkbox" id="debugMarkersCheckbox" checked />
-        Show Debug Markers
-      </label>
-    </div>
-    <div class="bounds-legend">
-      <h4>Visual Legend</h4>
-      <div class="legend-item">
-        <div class="legend-color red-zone"></div>
-        <span>Forbidden Zone</span>
-      </div>
-    </div>
-    <!-- Test Case: Sticky Element with Scroll Issue -->
-    <div class="demo-section">
-      <h2 class="demo-title">
-        Test Case: Sticky Element Drag with Initial Scroll
-      </h2>
-      <div style="text-align: center; margin-bottom: 15px">
-        <button
-          id="resetScrollBtn"
-          style="
-            padding: 8px 16px;
-            margin-right: 10px;
-            border: 1px solid #666;
-            border-radius: 4px;
-            background: white;
-            cursor: pointer;
-          "
-        >
-          Reset Scroll to 0
-        </button>
-        <button
-          id="addScrollBtn"
-          style="
-            padding: 8px 16px;
-            border: 1px solid #666;
-            border-radius: 4px;
-            background: white;
-            cursor: pointer;
-          "
-        >
-          Add 200px Scroll
-        </button>
-        <div style="margin-top: 8px; font-size: 12px; color: #666">
-          Current scroll: <span id="scrollDisplay">0</span>px
-        </div>
-      </div>
-      <div
-        class="container"
-        id="stickyTestContainer"
-        style="border: 2px solid #333"
-      >
-        <div
-          style="
-            width: 1000px;
-            height: 280px;
-            background: linear-gradient(
-              90deg,
-              #f0f0f0 0%,
-              #e0e0e0 50%,
-              #d0d0d0 100%
-            );
-            position: relative;
-          "
-        >
-          <!-- Sticky element on the left -->
-          <div
-            class="draggable-rectangle"
-            id="stickyRectangle"
-            data-sticky-left
-            style="
-              left: 50px;
-              top: 110px;
-              position: sticky;
-              background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-            "
-          >
-            STICKY
-          </div>
-          <!-- Grid lines for visual reference -->
-          <div
-            style="
-              position: absolute;
-              left: 100px;
-              top: 0;
-              width: 1px;
-              height: 100%;
-              background: #999;
-              opacity: 0.3;
-            "
-          ></div>
-          <div
-            style="
-              position: absolute;
-              left: 300px;
-              top: 0;
-              width: 1px;
-              height: 100%;
-              background: #999;
-              opacity: 0.3;
-            "
-          ></div>
-          <div
-            style="
-              position: absolute;
-              left: 500px;
-              top: 0;
-              width: 1px;
-              height: 100%;
-              background: #999;
-              opacity: 0.3;
-            "
-          ></div>
-          <div
-            style="
-              position: absolute;
-              left: 700px;
-              top: 0;
-              width: 1px;
-              height: 100%;
-              background: #999;
-              opacity: 0.3;
-            "
-          ></div>
-          <div
-            style="
-              position: absolute;
-              left: 900px;
-              top: 0;
-              width: 1px;
-              height: 100%;
-              background: #999;
-              opacity: 0.3;
-            "
-          ></div>
-        </div>
-      </div>
-      <div
-        style="
-          text-align: center;
-          margin-top: 10px;
-          font-size: 12px;
-          color: #666;
-        "
-      >
-        <div>
-          Try dragging with scroll = 0, then set scroll = 200px and try again
-        </div>
-        <div>
-          The sticky element should respect bounds constraints in both cases
-        </div>
-      </div>
-    </div>
-    <!-- Case 1: Horizontal Custom Bounds -->
-    <div class="demo-section">
-      <h2 class="demo-title">
-        Case 1: Horizontal Custom Bounds (customLeftBound: 100px,
-        customRightBound: 500px)
-      </h2>
-      <div class="container" id="horizontalContainer">
-        <div class="horizontal-content">
-          <div
-            class="draggable-rectangle"
-            id="horizontalRectangle"
-            style="left: 200px; top: 110px"
-          >
-            DRAG H
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Case 2: Vertical Custom Bounds -->
-    <div class="demo-section">
-      <h2 class="demo-title">
-        Case 2: Vertical Custom Bounds (customTopBound: 100px,
-        customBottomBound: 400px)
-      </h2>
-      <div class="container" id="verticalContainer">
-        <div class="vertical-content">
-          <div
-            class="draggable-rectangle"
-            id="verticalRectangle"
-            style="left: 150px; top: 250px"
-          >
-            DRAG V
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Position Display -->
-    <div class="position-display" id="positionDisplay">
-      <div class="label">Drag Position Info</div>
-      <div id="horizontalInfo">Horizontal: Not dragging</div>
-      <div id="verticalInfo">Vertical: Not dragging</div>
-      <div id="boundsInfo">Bounds: Hover to see limits</div>
-    </div>
-    <script type="module">
-      import { createDragToMoveGestureController } from "@jsenv/dom";
-      const horizontalRectangle = document.getElementById(
-        "horizontalRectangle",
-      );
-      const verticalRectangle = document.getElementById("verticalRectangle");
-      const horizontalContainer = document.getElementById(
-        "horizontalContainer",
-      );
-      const verticalContainer = document.getElementById("verticalContainer");
-      const stickyRectangle = document.getElementById("stickyRectangle");
-      const stickyTestContainer = document.getElementById(
-        "stickyTestContainer",
-      );
-      const resetScrollBtn = document.getElementById("resetScrollBtn");
-      const addScrollBtn = document.getElementById("addScrollBtn");
-      const scrollDisplay = document.getElementById("scrollDisplay");
-      const horizontalInfo = document.getElementById("horizontalInfo");
-      const verticalInfo = document.getElementById("verticalInfo");
-      const boundsInfo = document.getElementById("boundsInfo");
-      // Set up sticky test case
-      function updateScrollDisplay() {
-        scrollDisplay.textContent = Math.round(stickyTestContainer.scrollLeft);
-      }
-      resetScrollBtn.addEventListener("click", () => {
-        stickyTestContainer.scrollLeft = 0;
-        updateScrollDisplay();
-        console.log("Scroll reset to 0");
-      });
-      addScrollBtn.addEventListener("click", () => {
-        stickyTestContainer.scrollLeft = 200;
-        updateScrollDisplay();
-        console.log("Scroll set to 200px");
-      });
-      // Update scroll display initially and on scroll
-      updateScrollDisplay();
-      stickyTestContainer.addEventListener("scroll", updateScrollDisplay);
-      // Set up drag gesture for sticky element
-      stickyRectangle.addEventListener("mousedown", (event) => {
-        console.log(
-          "Sticky drag started with scrollLeft:",
-          stickyTestContainer.scrollLeft,
-        );
-        createDragToMoveGestureController({
-          backdrop: false,
-          // No custom bounds - should respect scrollable area bounds
-          onGrab: (gestureInfo) => {
-            console.log("Sticky - Grab started", {
-              gestureInfo,
-              scrollLeftAtStart: gestureInfo.scrollLeftAtStart,
-              currentScrollLeft: stickyTestContainer.scrollLeft,
-            });
-            stickyRectangle.setAttribute("data-dragging", "");
-          },
-          onDragStart: (gestureInfo) => {
-            console.log("Sticky - Drag started", gestureInfo);
-          },
-          onDrag: (gestureInfo, phase) => {
-            console.log("Sticky - Dragging", {
-              phase,
-              xMove: gestureInfo.xMove,
-              yMove: gestureInfo.yMove,
-              leftAtStart: gestureInfo.leftAtStart,
-              scrollLeftAtStart: gestureInfo.scrollLeftAtStart,
-              currentScrollLeft: stickyTestContainer.scrollLeft,
-            });
-          },
-          onRelease: (gestureInfo) => {
-            console.log("Sticky - Drag released", gestureInfo);
-            stickyRectangle.removeAttribute("data-dragging");
-          },
-        }).grabViaMouse(event, {
-          element: stickyRectangle,
-        });
-      });
-      // Set up drag gesture for horizontal constraints
-      horizontalRectangle.addEventListener("mousedown", (event) => {
-        // Custom bounds in container-relative coordinates
-        const customLeftBound = 100; // Cannot drag left of 100px from content start
-        const customRightBound = 500; // Cannot drag right of 500px from content start
-        createDragToMoveGestureController({
-          direction: { x: true },
-          backdrop: false,
-          customAreaConstraint: {
-            left: customLeftBound,
-            right: customRightBound,
-          },
-          onGrab: (gestureInfo) => {
-            console.log("Horizontal - Grab started", gestureInfo);
-            horizontalRectangle.setAttribute("data-dragging", "");
-            updateHorizontalInfo(gestureInfo, "Grabbed");
-          },
-          onDragStart: (gestureInfo) => {
-            console.log("Horizontal - Drag started", gestureInfo);
-            updateHorizontalInfo(gestureInfo, "Drag Start");
-          },
-          onDrag: (gestureInfo, phase) => {
-            updateHorizontalInfo(gestureInfo, `Dragging (${phase})`);
-            updateBoundsInfo("Horizontal bounds: L=100px, R=500px");
-          },
-          onRelease: (gestureInfo) => {
-            console.log("Horizontal - Drag released", gestureInfo);
-            horizontalRectangle.removeAttribute("data-dragging");
-            updateHorizontalInfo(gestureInfo, "Released");
-            updateBoundsInfo("Hover to see limits");
-          },
-        }).grabViaMouse(event, {
-          element: horizontalRectangle,
-        });
-      });
-      // Set up drag gesture for vertical constraints
-      verticalRectangle.addEventListener("mousedown", (event) => {
-        // Custom bounds in container-relative coordinates
-        const customTopBound = 100; // Cannot drag above 100px from content start
-        const customBottomBound = 400; // Cannot drag below 400px from content start
-        createDragToMoveGestureController({
-          backdrop: false,
-          customAreaConstraint: {
-            top: customTopBound,
-            bottom: customBottomBound,
-          },
-          onGrab: (gestureInfo) => {
-            console.log("Vertical - Grab started", gestureInfo);
-            verticalRectangle.setAttribute("data-dragging", "");
-            updateVerticalInfo(gestureInfo, "Grabbed");
-          },
-          onDragStart: (gestureInfo) => {
-            console.log("Vertical - Drag started", gestureInfo);
-            updateVerticalInfo(gestureInfo, "Drag Start");
-          },
-          onDrag: (gestureInfo, phase) => {
-            updateVerticalInfo(gestureInfo, `Dragging (${phase})`);
-            updateBoundsInfo("Vertical bounds: T=100px, B=400px");
-          },
-          onRelease: (gestureInfo) => {
-            console.log("Vertical - Drag released", gestureInfo);
-            verticalRectangle.removeAttribute("data-dragging");
-            updateVerticalInfo(gestureInfo, "Released");
-            updateBoundsInfo("Hover to see limits");
-          },
-        }).grabViaMouse(event, {
-          element: verticalRectangle,
-        });
-      });
-      function updateHorizontalInfo(gestureInfo, status) {
-        const container = horizontalContainer;
-        const rect = horizontalRectangle.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-        const relativeX = rect.left - containerRect.left + container.scrollLeft;
-        horizontalInfo.innerHTML = `Horizontal: ${status} | X: ${Math.round(relativeX)}px | Scroll: ${Math.round(container.scrollLeft)}px`;
-      }
-      function updateVerticalInfo(gestureInfo, status) {
-        const container = verticalContainer;
-        const rect = verticalRectangle.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-        const relativeY = rect.top - containerRect.top + container.scrollTop;
-        verticalInfo.innerHTML = `Vertical: ${status} | Y: ${Math.round(relativeY)}px | Scroll: ${Math.round(container.scrollTop)}px`;
-      }
-      function updateBoundsInfo(text) {
-        boundsInfo.textContent = text;
-      }
-      // Initial position updates
-      function updatePositions() {
-        const hRect = horizontalRectangle.getBoundingClientRect();
-        const hContainerRect = horizontalContainer.getBoundingClientRect();
-        const hRelativeX =
-          hRect.left - hContainerRect.left + horizontalContainer.scrollLeft;
-        const vRect = verticalRectangle.getBoundingClientRect();
-        const vContainerRect = verticalContainer.getBoundingClientRect();
-        const vRelativeY =
-          vRect.top - vContainerRect.top + verticalContainer.scrollTop;
-        horizontalInfo.innerHTML = `Horizontal: Ready | X: ${Math.round(hRelativeX)}px | Scroll: ${Math.round(horizontalContainer.scrollLeft)}px`;
-        verticalInfo.innerHTML = `Vertical: Ready | Y: ${Math.round(vRelativeY)}px | Scroll: ${Math.round(verticalContainer.scrollTop)}px`;
-      }
-      // Update positions on scroll
-      horizontalContainer.addEventListener("scroll", updatePositions);
-      verticalContainer.addEventListener("scroll", updatePositions);
-      updatePositions();
-      // Add hover effects to show bounds information
-      horizontalRectangle.addEventListener("mouseenter", () => {
-        if (!horizontalRectangle.hasAttribute("data-dragging")) {
-          updateBoundsInfo(
-            "Horizontal bounds: L=100px, R=500px (red = forbidden)",
-          );
-        }
-      });
-      verticalRectangle.addEventListener("mouseenter", () => {
-        if (!verticalRectangle.hasAttribute("data-dragging")) {
-          updateBoundsInfo(
-            "Vertical bounds: T=100px, B=400px (red = forbidden)",
-          );
-        }
-      });
-      horizontalRectangle.addEventListener("mouseleave", () => {
-        if (!horizontalRectangle.hasAttribute("data-dragging")) {
-          updateBoundsInfo("Hover to see limits");
-        }
-      });
-      verticalRectangle.addEventListener("mouseleave", () => {
-        if (!verticalRectangle.hasAttribute("data-dragging")) {
-          updateBoundsInfo("Hover to see limits");
-        }
-      });
-    </script>
-  </body>
-</html>