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

@jsenv/navi 0.10.1 → 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 +13858 -23295
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 -177
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/action/2_form_multiple.html DELETED Viewed

@@ -1,303 +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>Form validation test - Multiple elements</title>
-    <style>
-      .test-container {
-        margin: 20px;
-        padding: 20px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      .field {
-        margin-bottom: 15px;
-      }
-      .field label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-      }
-      .status {
-        margin-top: 20px;
-        padding: 10px;
-        border-radius: 4px;
-      }
-      .status.success {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .status.error {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .validation-errors {
-        margin-top: 10px;
-      }
-      .validation-errors ul {
-        margin: 0;
-        padding-left: 20px;
-      }
-      /* ✅ Styles for form params display */
-      .form-params {
-        margin-top: 20px;
-        padding: 15px;
-        background-color: #f8f9fa;
-        border: 1px solid #dee2e6;
-        border-radius: 4px;
-      }
-      .form-params h3 {
-        margin-top: 0;
-        color: #495057;
-      }
-      .form-params pre {
-        background-color: #e9ecef;
-        padding: 10px;
-        border-radius: 4px;
-        overflow-x: auto;
-        margin: 0;
-        font-size: 14px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState } from "preact/hooks";
-      import {
-        // eslint-disable-next-line no-unused-vars
-        Input,
-        // eslint-disable-next-line no-unused-vars
-        Form,
-        // eslint-disable-next-line no-unused-vars
-        Button,
-      } from "@jsenv/navi";
-      // eslint-disable-next-line no-unused-vars
-      const App = () => {
-        return (
-          <div>
-            <h1>Test de validation de formulaire multi-éléments</h1>
-            <MultiFieldValidationTest />
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const MultiFieldValidationTest = () => {
-        const [submitStatus, setSubmitStatus] = useState(null);
-        const [validationErrors, setValidationErrors] = useState([]);
-        const [formParams, setFormParams] = useState(null); // ✅ New state for form params
-        const handleFormExecutePrevented = (event) => {
-          console.log("❌ Form execute prevented event:", event);
-          const reason = event.detail;
-          if (reason === "validation_failed") {
-            setSubmitStatus("error");
-            setFormParams(null); // ✅ Clear params on validation failure
-            // Collecter toutes les erreurs de validation
-            const form = event.target;
-            const errors = [];
-            // Parcourir tous les éléments du formulaire
-            const formElements = form.querySelectorAll(
-              "input, select, textarea",
-            );
-            formElements.forEach((element) => {
-              const validationInterface = element.__validationInterface__;
-              if (validationInterface) {
-                // Vérifier si l'élément a des erreurs
-                if (
-                  !element.checkValidity() ||
-                  !validationInterface.checkValidity?.()
-                ) {
-                  const fieldName = element.name || element.id || element.type;
-                  const validationMessage =
-                    element.validationMessage || "Invalid value";
-                  errors.push(`${fieldName}: ${validationMessage}`);
-                }
-              }
-            });
-            setValidationErrors(errors);
-          }
-        };
-        return (
-          <div className="test-container">
-            <h2>Formulaire avec validation multiple</h2>
-            <p>
-              Ce formulaire contient plusieurs champs avec différentes
-              contraintes. Essayez de soumettre avec des valeurs invalides pour
-              voir toutes les erreurs.
-            </p>
-            <Form
-              onReset={() => {
-                setSubmitStatus(null);
-                setValidationErrors([]);
-                setFormParams(null); // ✅ Clear params on reset
-              }}
-              onExecutePrevented={handleFormExecutePrevented}
-              action={async (params) => {
-                console.log("🎯 Form execute event with params:", params);
-                // ✅ Store form params in state
-                setFormParams(params);
-                setSubmitStatus("executing...");
-                setValidationErrors([]);
-                await new Promise((resolve) => setTimeout(resolve, 2_000));
-                setSubmitStatus("Form submitted successfully!");
-              }}
-            >
-              {/* ✅ Champ requis */}
-              <div className="field">
-                <label htmlFor="required-field">Nom (obligatoire) :</label>
-                <Input
-                  id="required-field"
-                  name="name"
-                  required
-                  placeholder="Entrez votre nom"
-                />
-              </div>
-              {/* ✅ Champ email avec validation type */}
-              <div className="field">
-                <label htmlFor="email-field">Email (format email) :</label>
-                <Input
-                  id="email-field"
-                  name="email"
-                  type="email"
-                  placeholder="exemple@domain.com"
-                />
-              </div>
-              {/* ✅ Champ avec pattern */}
-              <div className="field">
-                <label htmlFor="phone-field">
-                  Téléphone (format: 01-23-45-67-89) :
-                </label>
-                <Input
-                  id="phone-field"
-                  name="phone"
-                  pattern="[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}"
-                  pattern-validation-message="Doit respecter le format <strong>01-23-45-67-89</strong>."
-                  placeholder="01-23-45-67-89"
-                />
-              </div>
-              {/* ✅ Champ avec longueur minimum */}
-              <div className="field">
-                <label htmlFor="password-field">
-                  Mot de passe (min 8 caractères) :
-                </label>
-                <Input
-                  id="password-field"
-                  name="password"
-                  type="password"
-                  minLength="8"
-                  placeholder="Au moins 8 caractères"
-                />
-              </div>
-              {/* ✅ Champ avec contrainte personnalisée */}
-              <div className="field">
-                <label htmlFor="age-field">Âge (18-99 ans) :</label>
-                <Input
-                  id="age-field"
-                  name="age"
-                  type="number"
-                  min="18"
-                  min-validation-message="L'age doit être de <strong>18</strong> ans ou plus."
-                  max="99"
-                  max-validation-message="L'age doit être de <strong>99</strong> ans ou moins."
-                  placeholder="18"
-                />
-              </div>
-              {/* ✅ Bouton de soumission */}
-              <div className="field">
-                <Button type="submit">Valider le formulaire</Button>
-                <Button type="reset">Reset Status</Button>
-              </div>
-            </Form>
-            {/* ✅ Affichage des paramètres du formulaire */}
-            {formParams && (
-              <div className="form-params">
-                <h3>📋 Paramètres du formulaire soumis :</h3>
-                <pre>{JSON.stringify(formParams, null, 2)}</pre>
-              </div>
-            )}
-            {/* ✅ Affichage du statut */}
-            {submitStatus && (
-              <div
-                className={`status ${submitStatus === "error" ? "error" : "success"}`}
-              >
-                {submitStatus === "error" ? (
-                  <div>
-                    <strong>❌ Validation échouée</strong>
-                    {validationErrors.length > 0 && (
-                      <div className="validation-errors">
-                        <p>Erreurs détectées :</p>
-                        <ul>
-                          {validationErrors.map((error, index) => (
-                            <li key={index}>{error}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <strong>✅ {submitStatus}</strong>
-                )}
-              </div>
-            )}
-            {/* ✅ Instructions de test */}
-            <div
-              style={{
-                marginTop: "30px",
-                padding: "15px",
-                backgroundColor: "#f8f9fa",
-                borderRadius: "4px",
-              }}
-            >
-              <h3>Instructions de test :</h3>
-              <ol>
-                <li>
-                  <strong>Test 1</strong> : Laissez tous les champs vides et
-                  cliquez "Valider" → Doit montrer toutes les erreurs
-                </li>
-                <li>
-                  <strong>Test 2</strong> : Remplissez partiellement (ex: nom
-                  seulement) → Doit montrer les erreurs restantes
-                </li>
-                <li>
-                  <strong>Test 3</strong> : Entrez des valeurs invalides (ex:
-                  email sans @, âge inf. 18) → Doit montrer les erreurs
-                  spécifiques
-                </li>
-                <li>
-                  <strong>Test 4</strong> : Remplissez tout correctement → Doit
-                  permettre la soumission et afficher les paramètres
-                </li>
-              </ol>
-            </div>
-          </div>
-        );
-      };
-      render(<App />, document.querySelector("#root"));
-    </script>
-  </body>
-</html>

package/src/components/demos/action/3_details_demo.html DELETED Viewed

@@ -1,203 +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>Details demo</title>
-  </head>
-  <body>
-    <div id="root" style="position: relative"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import {
-        createAction,
-        // eslint-disable-next-line no-unused-vars
-        Details,
-        // eslint-disable-next-line no-unused-vars
-        Form,
-      } from "@jsenv/navi";
-      // eslint-disable-next-line no-unused-vars
-      const App = () => {
-        return (
-          <>
-            <div style="display: flex; flex-direction: row; gap: 30px">
-              <DetailsLoadSyncDemo />
-              <DetailsLoadAfter1sDemo />
-              <DetailsThrowSyncDemo />
-            </div>
-            <DetailsFullControlDemo />
-            <DetailsWithActionPreloadedDemo />
-          </>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DetailsLoadSyncDemo = () => {
-        return (
-          <div>
-            <p>
-              <strong>Loaded sync</strong>
-            </p>
-            <Details
-              id="test"
-              action={() => {
-                return "Hello";
-              }}
-            >
-              {(message) => <span>{message}</span>}
-            </Details>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DetailsLoadAfter1sDemo = () => {
-        return (
-          <div>
-            <p>
-              <strong>Loaded after 1s</strong>
-            </p>
-            <Details
-              id="test_2"
-              action={async () => {
-                await new Promise((resolve) => {
-                  setTimeout(resolve, 1000);
-                });
-                return "Hello";
-              }}
-              label="Custom summary"
-            >
-              {(content) => content}
-            </Details>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DetailsThrowSyncDemo = () => {
-        return (
-          <div>
-            <p>
-              <strong>Throw sync</strong>
-            </p>
-            <Details
-              // id="test_3"
-              action={() => {
-                throw new Error("error");
-              }}
-              label={
-                <>
-                  <span>A</span>
-                  <span style="font-weight: bold">mixed summary</span>
-                </>
-              }
-            ></Details>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DetailsFullControlDemo = () => {
-        return (
-          <div>
-            <p>
-              <strong>Full control (abort, reload)</strong>
-            </p>
-            <Details
-              id="test_4"
-              action={async (_, { signal }) => {
-                await new Promise((resolve) => {
-                  const timeout = setTimeout(resolve, 1000);
-                  signal.addEventListener("abort", () => {
-                    clearTimeout(timeout);
-                  });
-                });
-                return "Hello";
-              }}
-            >
-              {{
-                loading: (action) => {
-                  return (
-                    <span>
-                      Loading...
-                      <button
-                        onClick={() => {
-                          action.abort();
-                        }}
-                      >
-                        Abort
-                      </button>
-                    </span>
-                  );
-                },
-                aborted: (action) => (
-                  <>
-                    <span style="color: red">Aborted</span>
-                    <button
-                      onClick={() => {
-                        action.rerun();
-                      }}
-                    >
-                      Reload
-                    </button>
-                  </>
-                ),
-                completed: (message, action) => (
-                  <>
-                    <span>{message}</span>
-                    <button
-                      onClick={() => {
-                        action.rerun();
-                      }}
-                    >
-                      Reload
-                    </button>
-                  </>
-                ),
-              }}
-            </Details>
-          </div>
-        );
-      };
-      const rootAction = createAction(
-        async ({ name = "default name" }) => {
-          await new Promise((resolve) => {
-            setTimeout(resolve, 500);
-          });
-          return name;
-        },
-        { name: "load user" },
-      );
-      window.rootAction = rootAction;
-      // const boundAction = rootAction.bindParams({
-      //   name: "dam",
-      // });
-      rootAction.prerun();
-      // eslint-disable-next-line no-unused-vars
-      const DetailsWithActionPreloadedDemo = () => {
-        return (
-          <div>
-            <p>
-              <strong>Action preloaded</strong>
-            </p>
-            <Details
-              id="bound"
-              action={rootAction}
-              label="Action using bind params"
-            >
-              {(content) => content}
-            </Details>
-          </div>
-        );
-      };
-      render(<App />, document.querySelector("#root"));
-    </script>
-  </body>
-</html>