npm - @jsenv/navi - Versions diffs - 0.10.2 → 0.11.0 - Mend

@jsenv/navi 0.10.2 → 0.11.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 (207) hide show

package/dist/jsenv_navi.js +13838 -23291
package/dist/jsenv_navi.js.map +1281 -0
package/package.json +5 -7
package/index.js +0 -122
package/src/action_private_properties.js +0 -11
package/src/action_proxy_test.html +0 -353
package/src/action_run_states.js +0 -5
package/src/actions.js +0 -1401
package/src/browser_integration/browser_integration.js +0 -216
package/src/browser_integration/document_back_and_forward.js +0 -17
package/src/browser_integration/document_loading_signal.js +0 -100
package/src/browser_integration/document_state_signal.js +0 -9
package/src/browser_integration/document_url_signal.js +0 -9
package/src/browser_integration/use_is_visited.js +0 -19
package/src/browser_integration/via_history.js +0 -232
package/src/browser_integration/via_navigation.js +0 -168
package/src/components/action_execution/form_context.js +0 -5
package/src/components/action_execution/render_actionable_component.jsx +0 -29
package/src/components/action_execution/use_action.js +0 -99
package/src/components/action_execution/use_execute_action.js +0 -193
package/src/components/action_execution/use_run_on_mount.js +0 -9
package/src/components/action_renderer.jsx +0 -125
package/src/components/callout/callout.js +0 -990
package/src/components/callout/callout_demo.html +0 -201
package/src/components/callout/test_dynamic_positioning.html +0 -161
package/src/components/callout/test_html_document_iframe.html +0 -182
package/src/components/demos/0_button_demo.html +0 -707
package/src/components/demos/10_column_reordering_debug.html +0 -277
package/src/components/demos/11_table_selection_debug.html +0 -432
package/src/components/demos/1_checkbox_demo.html +0 -754
package/src/components/demos/2_input_textual_demo.html +0 -286
package/src/components/demos/3_radio_demo.html +0 -874
package/src/components/demos/4_select_demo.html +0 -100
package/src/components/demos/5_list_scrollable_demo.html +0 -153
package/src/components/demos/6_tablist_demo.html +0 -77
package/src/components/demos/7_table_selection_demo.html +0 -176
package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
package/src/components/demos/9_table_column_drag_demo.html +0 -325
package/src/components/demos/action/0_button_demo.html +0 -204
package/src/components/demos/action/10_shortcuts_demo.html +0 -189
package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
package/src/components/demos/action/1_input_text_demo.html +0 -876
package/src/components/demos/action/2_form_multiple.html +0 -303
package/src/components/demos/action/3_details_demo.html +0 -203
package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
package/src/components/demos/action/7_radio_list_demo.html +0 -357
package/src/components/demos/action/8_editable_demo.html +0 -431
package/src/components/demos/action/9_link_demo.html +0 -194
package/src/components/demos/demo.md +0 -0
package/src/components/demos/route/basic/basic.html +0 -14
package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
package/src/components/demos/route/multi/multi.html +0 -14
package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
package/src/components/details/details.jsx +0 -245
package/src/components/details/summary_marker.jsx +0 -141
package/src/components/edition/editable.jsx +0 -186
package/src/components/error_boundary_context.js +0 -9
package/src/components/field/README.md +0 -247
package/src/components/field/button.jsx +0 -429
package/src/components/field/checkbox_list.jsx +0 -185
package/src/components/field/collect_form_element_values.js +0 -82
package/src/components/field/custom_field.js +0 -106
package/src/components/field/form.jsx +0 -209
package/src/components/field/input.jsx +0 -16
package/src/components/field/input_checkbox.jsx +0 -434
package/src/components/field/input_radio.jsx +0 -432
package/src/components/field/input_textual.jsx +0 -389
package/src/components/field/label.jsx +0 -46
package/src/components/field/radio_list.jsx +0 -183
package/src/components/field/select.jsx +0 -256
package/src/components/field/use_action_events.js +0 -132
package/src/components/field/use_form_events.js +0 -59
package/src/components/field/use_ui_state_controller.js +0 -506
package/src/components/item_tracker/README.md +0 -461
package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
package/src/components/item_tracker/use_item_tracker.jsx +0 -143
package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
package/src/components/keyboard_shortcuts/os.js +0 -9
package/src/components/layout/demos/demo_flex.html +0 -638
package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
package/src/components/layout/demos/demo_layout_style_input.html +0 -226
package/src/components/layout/demos/demo_layout_style_text.html +0 -514
package/src/components/layout/flex.jsx +0 -109
package/src/components/layout/layout_context.jsx +0 -3
package/src/components/layout/spacing.jsx +0 -20
package/src/components/layout/use_layout_style.js +0 -249
package/src/components/link/link.jsx +0 -267
package/src/components/link/link_with_icon.jsx +0 -52
package/src/components/loader/loader_background.jsx +0 -372
package/src/components/loader/loading_spinner.jsx +0 -68
package/src/components/loader/network_speed.js +0 -83
package/src/components/loader/rectangle_loading.jsx +0 -244
package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
package/src/components/props_composition/with_props_class_name.js +0 -37
package/src/components/props_composition/with_props_style.js +0 -26
package/src/components/route.jsx +0 -19
package/src/components/selection/selection.jsx +0 -1583
package/src/components/svg/font_sized_svg.jsx +0 -59
package/src/components/svg/icon_and_text.jsx +0 -21
package/src/components/svg/svg_mask_overlay.jsx +0 -105
package/src/components/table/drag/table_drag.jsx +0 -506
package/src/components/table/resize/table_resize.jsx +0 -650
package/src/components/table/resize/table_size.js +0 -43
package/src/components/table/selection/table_selection.js +0 -106
package/src/components/table/selection/table_selection.jsx +0 -203
package/src/components/table/sticky/sticky_group.js +0 -354
package/src/components/table/sticky/table_sticky.js +0 -25
package/src/components/table/sticky/table_sticky.jsx +0 -501
package/src/components/table/table.jsx +0 -721
package/src/components/table/table_css.js +0 -211
package/src/components/table/table_ui.jsx +0 -49
package/src/components/table/use_cells_and_columns.js +0 -90
package/src/components/table/use_object_array_to_cells.js +0 -46
package/src/components/table/z_indexes.js +0 -23
package/src/components/tablist/tablist.jsx +0 -99
package/src/components/text/demos/demo_text_and_icon.html +0 -421
package/src/components/text/overflow.jsx +0 -15
package/src/components/text/text.jsx +0 -83
package/src/components/text/text_and_count.jsx +0 -28
package/src/components/ui_transition.jsx +0 -128
package/src/components/use_auto_focus.js +0 -94
package/src/components/use_batch_during_render.js +0 -33
package/src/components/use_debounce_true.js +0 -31
package/src/components/use_dependencies_diff.js +0 -35
package/src/components/use_focus_group.js +0 -20
package/src/components/use_initial_value.js +0 -78
package/src/components/use_is_visited.js +0 -19
package/src/components/use_ref_array.js +0 -38
package/src/components/use_signal_sync.js +0 -50
package/src/components/use_stable_callback.js +0 -68
package/src/components/use_state_array.js +0 -47
package/src/docs/actions.md +0 -250
package/src/docs/demos/resource/action_status.jsx +0 -42
package/src/docs/demos/resource/demo.md +0 -1
package/src/docs/demos/resource/resource_demo_0.html +0 -84
package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
package/src/docs/demos/resource/resource_demo_2.html +0 -173
package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
package/src/docs/demos/resource/tata.jsx +0 -3
package/src/docs/demos/resource/toto.jsx +0 -3
package/src/docs/demos/user_nav/user_nav.html +0 -12
package/src/docs/demos/user_nav/user_nav.jsx +0 -330
package/src/docs/resource_dependencies.md +0 -103
package/src/docs/resource_with_params.md +0 -80
package/src/navi_css_vars.js +0 -14
package/src/notes.md +0 -34
package/src/route/route.js +0 -596
package/src/route/route.xtest.html +0 -228
package/src/store/array_signal_store.js +0 -537
package/src/store/local_storage_signal.js +0 -17
package/src/store/resource_graph.js +0 -1304
package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
package/src/store/value_in_local_storage.js +0 -187
package/src/symbol_object_signal.js +0 -1
package/src/use_action_data.js +0 -10
package/src/use_action_status.js +0 -47
package/src/utils/add_many_event_listeners.js +0 -15
package/src/utils/array_add_remove.js +0 -61
package/src/utils/array_signal.js +0 -15
package/src/utils/compare_two_js_values.js +0 -172
package/src/utils/execute_with_cleanup.js +0 -21
package/src/utils/get_caller_info.js +0 -85
package/src/utils/is_signal.js +0 -20
package/src/utils/js_value_weak_map.js +0 -162
package/src/utils/js_value_weak_map_demo.html +0 -690
package/src/utils/merge_two_js_values.js +0 -53
package/src/utils/stringify_for_display.js +0 -131
package/src/utils/weak_effect.js +0 -48
package/src/validation/constraints/confirm_constraint.js +0 -14
package/src/validation/constraints/create_unique_value_constraint.js +0 -27
package/src/validation/constraints/native_constraints.js +0 -338
package/src/validation/constraints/readonly_constraint.js +0 -41
package/src/validation/constraints/same_as_constraint.js +0 -42
package/src/validation/constraints/single_space_constraint.js +0 -13
package/src/validation/custom_constraint_validation.js +0 -793
package/src/validation/custom_message.js +0 -18
package/src/validation/demos/browser_style.png +0 -0
package/src/validation/demos/demo_same_as_constraint.html +0 -259
package/src/validation/demos/form_validation_demo.html +0 -142
package/src/validation/demos/form_validation_demo_preact.html +0 -87
package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
package/src/validation/hooks/use_constraints.js +0 -23
package/src/validation/hooks/use_custom_validation_ref.js +0 -73
package/src/validation/hooks/use_validation_message.js +0 -19
package/src/validation/input_change_effect.js +0 -106

package/src/components/demos/ui_transition/2_height_transition_test.html DELETED Viewed

@@ -1,295 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="data:," />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Height Transition Test - Big to Small</title>
-    <style>
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        max-width: 600px;
-        margin: 0 auto;
-        padding: 20px;
-        background: #f5f5f5;
-        line-height: 1.5;
-      }
-      h1 {
-        color: #333;
-        margin-bottom: 20px;
-      }
-      .controls {
-        background: white;
-        border-radius: 8px;
-        padding: 20px;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-      .controls h3 {
-        margin-top: 0;
-        margin-bottom: 15px;
-        color: #555;
-      }
-      .button-group {
-        display: flex;
-        gap: 10px;
-        margin-bottom: 10px;
-        flex-wrap: wrap;
-      }
-      button {
-        padding: 10px 16px;
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        background: #fff;
-        cursor: pointer;
-        font: inherit;
-        transition: all 0.15s;
-      }
-      button:hover {
-        background: #f8f9fa;
-        border-color: #007acc;
-      }
-      button:active {
-        background: #e9ecef;
-      }
-      .demo-container {
-        background: white;
-        border-radius: 8px;
-        padding: 20px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-      /* UI Transition Container */
-      #transition-box {
-        border: 2px solid #007acc;
-        border-radius: 8px;
-        background: #f8fbff;
-        max-width: 400px;
-        margin: 20px 0;
-      }
-      /* Content styles */
-      .big-content {
-        padding: 30px;
-        background: repeating-linear-gradient(
-          to bottom,
-          rgba(0, 0, 0, 0.05) 0px,
-          rgba(0, 0, 0, 0.05) 20px,
-          rgba(0, 0, 0, 0.1) 20px,
-          rgba(0, 0, 0, 0.1) 40px
-        );
-        color: #222;
-        border-radius: 6px;
-        min-height: 300px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-      }
-      .big-content h2 {
-        margin: 0 0 15px 0;
-        font-size: 24px;
-      }
-      .big-content p {
-        margin: 5px 0;
-        opacity: 0.9;
-        font-size: 16px;
-      }
-      .small-content {
-        padding: 15px;
-        background: transparent; /* reveal any cropping during cross-fade */
-        color: #222;
-        border-radius: 6px;
-        text-align: center;
-        font-weight: 600;
-        border: 1px dashed #bbb; /* show where the new smaller height is */
-      }
-      /* A bright bar anchored at the bottom to make cropping obvious when height shrinks */
-      .big-content .bottom-flag {
-        margin-top: 20px;
-        width: 100%;
-        height: 40px;
-        border-radius: 4px;
-        background: repeating-linear-gradient(
-          45deg,
-          #ff1744,
-          #ff1744 10px,
-          #ff9100 10px,
-          #ff9100 20px
-        );
-        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) inset;
-      }
-      .note {
-        background: #e7f3ff;
-        border: 1px solid #b8daff;
-        color: #004085;
-        padding: 12px;
-        border-radius: 6px;
-        font-size: 14px;
-        margin-top: 15px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Height Transition Test</h1>
-    <div class="controls">
-      <h3>Test Controls</h3>
-      <div class="button-group">
-        <button id="show-big">Show Big Content</button>
-        <button id="show-small">Show Small Content</button>
-        <button id="clear">Clear Content</button>
-      </div>
-      <div class="button-group">
-        <label style="display: flex; align-items: center; gap: 8px">
-          <input type="checkbox" id="toggle-transitions" />
-          Enable Size Transitions
-        </label>
-      </div>
-    </div>
-    <div class="demo-container">
-      <h3>Transition Container</h3>
-      <div class="note">
-        Tip: With size transitions DISABLED (default), switching from the tall
-        content to the small content will crop the outgoing element while the
-        content transition runs. Toggle size transitions ON to see the
-        difference. The striped bar at the bottom of the big content helps
-        visualize cropping when the container height shrinks instantly.
-      </div>
-      <div
-        id="transition-box"
-        class="ui_transition_container"
-        data-content-transition="cross-fade"
-        data-content-transition-duration="600"
-      >
-        <div class="ui_transition_outer_wrapper">
-          <div class="ui_transition_measure_wrapper">
-            <div class="ui_transition_slot" data-content-key="initial">
-              <div class="big-content">
-                <h2>🎯 Big Content</h2>
-                <p>This is a tall element with lots of content</p>
-                <p>It takes up significant vertical space</p>
-                <p>Perfect for testing height transitions</p>
-                <p>When you switch to small content,</p>
-                <p>watch how smoothly it transitions!</p>
-                <div
-                  class="bottom-flag"
-                  title="Bottom area to reveal cropping"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="ui_transition_content_overlay"></div>
-      </div>
-    </div>
-    <script type="module">
-      import { initUITransition } from "../../../../../dom/src/ui_transition/ui_transition.js";
-      const transitionBox = document.getElementById("transition-box");
-      const { slot } = initUITransition(transitionBox);
-      // Content templates
-      const createBigContent = () => {
-        const div = document.createElement("div");
-        div.className = "big-content";
-        div.setAttribute("data-content-key", "big");
-        div.innerHTML = `
-          <h2>🎯 Big Content</h2>
-          <p>This is a tall element with lots of content</p>
-          <p>It takes up significant vertical space</p>
-          <p>Perfect for testing height transitions</p>
-          <p>When you switch to small content,</p>
-          <p>watch how smoothly it transitions!</p>
-          <div class="bottom-flag" title="Bottom area to reveal cropping"></div>
-        `;
-        return div;
-      };
-      const createSmallContent = () => {
-        const div = document.createElement("div");
-        div.className = "small-content";
-        div.setAttribute("data-content-key", "small");
-        div.textContent = "📦 Small Content - Compact and concise!";
-        return div;
-      };
-      // no loading state in this simplified demo
-      // Button handlers
-      document.getElementById("show-big").addEventListener("click", () => {
-        slot.innerHTML = "";
-        slot.appendChild(createBigContent());
-      });
-      document.getElementById("show-small").addEventListener("click", () => {
-        slot.innerHTML = "";
-        slot.appendChild(createSmallContent());
-      });
-      // removed loading button
-      document.getElementById("clear").addEventListener("click", () => {
-        slot.innerHTML = "";
-      });
-      // Initialize and handle size transitions checkbox
-      const sizeToggle = document.getElementById("toggle-transitions");
-      sizeToggle.checked = transitionBox.hasAttribute("data-size-transition");
-      sizeToggle.addEventListener("change", (e) => {
-        if (e.target.checked) {
-          transitionBox.setAttribute("data-size-transition", "");
-        } else {
-          transitionBox.removeAttribute("data-size-transition");
-        }
-      });
-      // removed debug toggle
-      // Quick test sequence
-      let testRunning = false;
-      document.addEventListener("keydown", (e) => {
-        if (e.key === " " && !testRunning) {
-          e.preventDefault();
-          testRunning = true;
-          // Auto-cycle through states (big -> small -> big)
-          setTimeout(() => {
-            slot.innerHTML = "";
-            slot.appendChild(createSmallContent());
-          }, 1000);
-          setTimeout(() => {
-            slot.innerHTML = "";
-            slot.appendChild(createBigContent());
-          }, 2500);
-          setTimeout(() => {
-            testRunning = false;
-          }, 5500);
-        }
-      });
-      console.log("Height Transition Test loaded!");
-      console.log("Press SPACEBAR for auto-cycle test");
-    </script>
-  </body>
-</html>

package/src/components/details/details.jsx DELETED Viewed

@@ -1,245 +0,0 @@
-import { elementIsFocusable, findAfter } from "@jsenv/dom";
-import { forwardRef } from "preact/compat";
-import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
-import { useNavState } from "../../browser_integration/browser_integration.js";
-import { useActionStatus } from "../../use_action_status.js";
-import { requestAction } from "../../validation/custom_constraint_validation.js";
-import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import { useAction } from "../action_execution/use_action.js";
-import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { ActionRenderer } from "../action_renderer.jsx";
-import { useActionEvents } from "../field/use_action_events.js";
-import { useKeyboardShortcuts } from "../keyboard_shortcuts/keyboard_shortcuts.js";
-import { useFocusGroup } from "../use_focus_group.js";
-import { SummaryMarker } from "./summary_marker.jsx";
-import.meta.css = /* css */ `
-  .navi_details {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-  }
-  .navi_details > summary {
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    cursor: pointer;
-    user-select: none;
-  }
-  .summary_body {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.2em;
-  }
-  .summary_label {
-    display: flex;
-    padding-right: 10px;
-    flex: 1;
-    align-items: center;
-    gap: 0.2em;
-  }
-  .navi_details > summary:focus {
-    z-index: 1;
-  }
-`;
-export const Details = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
-    Basic: DetailsBasic,
-    WithAction: DetailsWithAction,
-  });
-});
-const DetailsBasic = forwardRef((props, ref) => {
-  const {
-    id,
-    label = "Summary",
-    open,
-    loading,
-    className,
-    focusGroup,
-    focusGroupDirection,
-    arrowKeyShortcuts = true,
-    openKeyShortcut = "ArrowRight",
-    closeKeyShortcut = "ArrowLeft",
-    onToggle,
-    children,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const [navState, setNavState] = useNavState(id);
-  const [innerOpen, innerOpenSetter] = useState(open || navState);
-  useFocusGroup(innerRef, {
-    enabled: focusGroup,
-    name: typeof focusGroup === "string" ? focusGroup : undefined,
-    direction: focusGroupDirection,
-  });
-  /**
-   * Browser will dispatch "toggle" event even if we set open={true}
-   * When rendering the component for the first time
-   * We have to ensure the initial "toggle" event is ignored.
-   *
-   * If we don't do that code will think the details has changed and run logic accordingly
-   * For example it will try to navigate to the current url while we are already there
-   *
-   * See:
-   * - https://techblog.thescore.com/2024/10/08/why-we-decided-to-change-how-the-details-element-works/
-   * - https://github.com/whatwg/html/issues/4500
-   * - https://stackoverflow.com/questions/58942600/react-html-details-toggles-uncontrollably-when-starts-open
-   *
-   */
-  const summaryRef = useRef(null);
-  useKeyboardShortcuts(innerRef, [
-    {
-      key: openKeyShortcut,
-      enabled: arrowKeyShortcuts,
-      when: (e) =>
-        document.activeElement === summaryRef.current &&
-        // avoid handling openKeyShortcut twice when keydown occurs inside nested details
-        !e.defaultPrevented,
-      action: (e) => {
-        const details = innerRef.current;
-        if (!details.open) {
-          e.preventDefault();
-          details.open = true;
-          return;
-        }
-        const summary = summaryRef.current;
-        const firstFocusableElementInDetails = findAfter(
-          summary,
-          elementIsFocusable,
-          { root: details },
-        );
-        if (!firstFocusableElementInDetails) {
-          return;
-        }
-        e.preventDefault();
-        firstFocusableElementInDetails.focus();
-      },
-    },
-    {
-      key: closeKeyShortcut,
-      enabled: arrowKeyShortcuts,
-      when: () => {
-        const details = innerRef.current;
-        return details.open;
-      },
-      action: (e) => {
-        const details = innerRef.current;
-        const summary = summaryRef.current;
-        if (document.activeElement === summary) {
-          e.preventDefault();
-          summary.focus();
-          details.open = false;
-        } else {
-          e.preventDefault();
-          summary.focus();
-        }
-      },
-    },
-  ]);
-  const mountedRef = useRef(false);
-  useEffect(() => {
-    mountedRef.current = true;
-  }, []);
-  return (
-    <details
-      {...rest}
-      ref={innerRef}
-      id={id}
-      className={[
-        "navi_details",
-        ...(className ? className.split(" ") : []),
-      ].join(" ")}
-      onToggle={(e) => {
-        const isOpen = e.newState === "open";
-        if (mountedRef.current) {
-          if (isOpen) {
-            innerOpenSetter(true);
-            setNavState(true);
-          } else {
-            innerOpenSetter(false);
-            setNavState(undefined);
-          }
-        }
-        onToggle?.(e);
-      }}
-      open={innerOpen}
-    >
-      <summary ref={summaryRef}>
-        <div className="summary_body">
-          <SummaryMarker open={innerOpen} loading={loading} />
-          <div className="summary_label">{label}</div>
-        </div>
-      </summary>
-      {children}
-    </details>
-  );
-});
-const DetailsWithAction = forwardRef((props, ref) => {
-  const {
-    action,
-    loading,
-    onToggle,
-    onActionPrevented,
-    onActionStart,
-    onActionError,
-    onActionEnd,
-    children,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const effectiveAction = useAction(action);
-  const { loading: actionLoading } = useActionStatus(effectiveAction);
-  const executeAction = useExecuteAction(innerRef, {
-    // the error will be displayed by actionRenderer inside <details>
-    errorEffect: "none",
-  });
-  useActionEvents(innerRef, {
-    onPrevented: onActionPrevented,
-    onAction: (e) => {
-      executeAction(e);
-    },
-    onStart: onActionStart,
-    onError: onActionError,
-    onEnd: onActionEnd,
-  });
-  return (
-    <DetailsBasic
-      {...rest}
-      ref={innerRef}
-      loading={loading || actionLoading}
-      onToggle={(toggleEvent) => {
-        const isOpen = toggleEvent.newState === "open";
-        if (isOpen) {
-          requestAction(toggleEvent.target, effectiveAction, {
-            event: toggleEvent,
-            method: "run",
-          });
-        } else {
-          effectiveAction.abort();
-        }
-        onToggle?.(toggleEvent);
-      }}
-    >
-      <ActionRenderer action={effectiveAction}>{children}</ActionRenderer>
-    </DetailsBasic>
-  );
-});

package/src/components/details/summary_marker.jsx DELETED Viewed

@@ -1,141 +0,0 @@
-import { useLayoutEffect, useRef } from "preact/hooks";
-import { useDebounceTrue } from "../use_debounce_true.js";
-const rightArrowPath = "M680-480L360-160l-80-80 240-240-240-240 80-80 320 320z";
-const downArrowPath = "M480-280L160-600l80-80 240 240 240-240 80 80-320 320z";
-import.meta.css = /* css */ `
-  .summary_marker {
-    width: 1em;
-    height: 1em;
-    line-height: 1em;
-  }
-  .summary_marker_svg .arrow {
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-  .summary_marker_svg .arrow[data-animation-target="down"] {
-    animation-name: morph-to-down;
-  }
-  @keyframes morph-to-down {
-    from {
-      d: path("${rightArrowPath}");
-    }
-    to {
-      d: path("${downArrowPath}");
-    }
-  }
-  .summary_marker_svg .arrow[data-animation-target="right"] {
-    animation-name: morph-to-right;
-  }
-  @keyframes morph-to-right {
-    from {
-      d: path("${downArrowPath}");
-    }
-    to {
-      d: path("${rightArrowPath}");
-    }
-  }
-  .summary_marker_svg .foreground_circle {
-    stroke-dasharray: 503 1507; /* ~25% of circle perimeter */
-    stroke-dashoffset: 0;
-    animation: progress-around-circle 1.5s linear infinite;
-  }
-  @keyframes progress-around-circle {
-    0% {
-      stroke-dashoffset: 0;
-    }
-    100% {
-      stroke-dashoffset: -2010;
-    }
-  }
-  /* fading and scaling */
-  .summary_marker_svg .arrow {
-    transition: opacity 0.3s ease-in-out;
-    opacity: 1;
-  }
-  .summary_marker_svg .loading_container {
-    transition: transform 0.3s linear;
-    transform: scale(0.3);
-  }
-  .summary_marker_svg .background_circle,
-  .summary_marker_svg .foreground_circle {
-    transition: opacity 0.3s ease-in-out;
-    opacity: 0;
-  }
-  .summary_marker_svg[data-loading] .arrow {
-    opacity: 0;
-  }
-  .summary_marker_svg[data-loading] .loading_container {
-    transform: scale(1);
-  }
-  .summary_marker_svg[data-loading] .background_circle {
-    opacity: 0.2;
-  }
-  .summary_marker_svg[data-loading] .foreground_circle {
-    opacity: 1;
-  }
-`;
-export const SummaryMarker = ({ open, loading }) => {
-  const showLoading = useDebounceTrue(loading, 300);
-  const mountedRef = useRef(false);
-  const prevOpenRef = useRef(open);
-  useLayoutEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  const shouldAnimate = mountedRef.current && prevOpenRef.current !== open;
-  prevOpenRef.current = open;
-  return (
-    <span className="summary_marker">
-      <svg
-        className="summary_marker_svg"
-        viewBox="0 -960 960 960"
-        xmlns="http://www.w3.org/2000/svg"
-        data-loading={open ? showLoading || undefined : undefined}
-      >
-        <g className="loading_container" transform-origin="480px -480px">
-          <circle
-            className="background_circle"
-            cx="480"
-            cy="-480"
-            r="320"
-            stroke="currentColor"
-            fill="none"
-            strokeWidth="60"
-            opacity="0.2"
-          />
-          <circle
-            className="foreground_circle"
-            cx="480"
-            cy="-480"
-            r="320"
-            stroke="currentColor"
-            fill="none"
-            strokeWidth="60"
-            strokeLinecap="round"
-            strokeDasharray="503 1507"
-          />
-        </g>
-        <g className="arrow_container" transform-origin="480px -480px">
-          <path
-            className="arrow"
-            fill="currentColor"
-            data-animation-target={
-              shouldAnimate ? (open ? "down" : "right") : undefined
-            }
-            d={open ? downArrowPath : rightArrowPath}
-          />
-        </g>
-      </svg>
-    </span>
-  );
-};