npm - @jsenv/navi - Versions diffs - 0.0.1 → 0.1.1 - Mend

@jsenv/navi 0.0.1 → 0.1.1

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

Files changed (139) hide show

package/dist/jsenv_navi.js +22959 -0
package/index.js +66 -16
package/package.json +23 -11
package/src/actions.js +50 -26
package/src/browser_integration/browser_integration.js +31 -6
package/src/browser_integration/via_history.js +42 -9
package/src/components/action_execution/render_actionable_component.jsx +6 -4
package/src/components/action_execution/use_action.js +51 -282
package/src/components/action_execution/use_execute_action.js +106 -92
package/src/components/action_execution/use_run_on_mount.js +9 -0
package/src/components/action_renderer.jsx +21 -32
package/src/components/demos/0_button_demo.html +574 -103
package/src/components/demos/10_column_reordering_debug.html +277 -0
package/src/components/demos/11_table_selection_debug.html +432 -0
package/src/components/demos/1_checkbox_demo.html +579 -202
package/src/components/demos/2_input_textual_demo.html +81 -138
package/src/components/demos/3_radio_demo.html +0 -2
package/src/components/demos/4_select_demo.html +19 -23
package/src/components/demos/6_tablist_demo.html +77 -0
package/src/components/demos/7_table_selection_demo.html +176 -0
package/src/components/demos/8_table_fixed_headers_demo.html +584 -0
package/src/components/demos/9_table_column_drag_demo.html +325 -0
package/src/components/demos/action/0_button_demo.html +2 -4
package/src/components/demos/action/1_input_text_demo.html +643 -222
package/src/components/demos/action/3_details_demo.html +146 -115
package/src/components/demos/action/4_input_checkbox_demo.html +442 -322
package/src/components/demos/action/5_input_checkbox_state_demo.html +270 -0
package/src/components/demos/action/6_checkbox_list_demo.html +304 -72
package/src/components/demos/action/7_radio_list_demo.html +310 -170
package/src/components/demos/action/{8_editable_text_demo.html → 8_editable_demo.html} +65 -76
package/src/components/demos/action/9_link_demo.html +84 -62
package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +695 -0
package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +429 -0
package/src/components/demos/ui_transition/2_height_transition_test.html +295 -0
package/src/components/details/details.jsx +62 -64
package/src/components/edition/editable.jsx +186 -0
package/src/components/field/README.md +247 -0
package/src/components/{input → field}/button.jsx +151 -130
package/src/components/field/checkbox_list.jsx +184 -0
package/src/components/{collect_form_element_values.js → field/collect_form_element_values.js} +7 -4
package/src/components/{input → field}/field_css.js +4 -1
package/src/components/field/form.jsx +211 -0
package/src/components/{input → field}/input.jsx +1 -0
package/src/components/{input → field}/input_checkbox.jsx +132 -155
package/src/components/{input → field}/input_radio.jsx +135 -46
package/src/components/field/input_textual.jsx +418 -0
package/src/components/field/label.jsx +32 -0
package/src/components/field/radio_list.jsx +182 -0
package/src/components/{input → field}/select.jsx +17 -32
package/src/components/field/use_action_events.js +132 -0
package/src/components/field/use_form_events.js +55 -0
package/src/components/field/use_ui_state_controller.js +506 -0
package/src/components/item_tracker/README.md +461 -0
package/src/components/item_tracker/use_isolated_item_tracker.jsx +209 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.html +148 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +460 -0
package/src/components/item_tracker/use_item_tracker.jsx +143 -0
package/src/components/item_tracker/use_item_tracker_demo.html +207 -0
package/src/components/item_tracker/use_item_tracker_demo.jsx +216 -0
package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +87 -0
package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +61 -0
package/src/components/keyboard_shortcuts/keyboard_key_meta.js +17 -0
package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +371 -0
package/src/components/link/link.jsx +65 -102
package/src/components/link/link_with_icon.jsx +52 -0
package/src/components/loader/loader_background.jsx +85 -64
package/src/components/loader/rectangle_loading.jsx +38 -19
package/src/components/route.jsx +8 -4
package/src/components/selection/selection.jsx +1583 -0
package/src/components/svg/font_sized_svg.jsx +45 -0
package/src/components/svg/icon_and_text.jsx +21 -0
package/src/components/svg/svg_mask_overlay.jsx +105 -0
package/src/components/table/drag/table_drag.jsx +506 -0
package/src/components/table/resize/table_resize.jsx +650 -0
package/src/components/table/resize/table_size.js +43 -0
package/src/components/table/selection/table_selection.js +106 -0
package/src/components/table/selection/table_selection.jsx +203 -0
package/src/components/table/sticky/sticky_group.js +354 -0
package/src/components/table/sticky/table_sticky.js +25 -0
package/src/components/table/sticky/table_sticky.jsx +501 -0
package/src/components/table/table.jsx +721 -0
package/src/components/table/table_css.js +211 -0
package/src/components/table/table_ui.jsx +49 -0
package/src/components/table/use_cells_and_columns.js +90 -0
package/src/components/table/use_object_array_to_cells.js +46 -0
package/src/components/table/z_indexes.js +23 -0
package/src/components/tablist/tablist.jsx +99 -0
package/src/components/text/overflow.jsx +15 -0
package/src/components/text/text_and_count.jsx +28 -0
package/src/components/ui_transition.jsx +128 -0
package/src/components/use_auto_focus.js +58 -7
package/src/components/use_batch_during_render.js +33 -0
package/src/components/use_debounce_true.js +7 -7
package/src/components/use_dependencies_diff.js +35 -0
package/src/components/use_focus_group.js +4 -3
package/src/components/use_initial_value.js +8 -34
package/src/components/use_signal_sync.js +1 -1
package/src/components/use_stable_callback.js +68 -0
package/src/components/use_state_array.js +16 -9
package/src/docs/actions.md +22 -0
package/src/notes.md +33 -12
package/src/route/route.js +97 -47
package/src/store/resource_graph.js +2 -1
package/src/store/tests/{resource_graph_dependencies.test.js → resource_graph_dependencies.test_manual.js} +13 -13
package/src/utils/is_signal.js +20 -0
package/src/utils/stringify_for_display.js +4 -23
package/src/validation/constraints/confirm_constraint.js +14 -0
package/src/validation/constraints/create_unique_value_constraint.js +27 -0
package/src/validation/constraints/native_constraints.js +313 -0
package/src/validation/constraints/readonly_constraint.js +36 -0
package/src/validation/constraints/single_space_constraint.js +13 -0
package/src/validation/custom_constraint_validation.js +599 -0
package/src/validation/custom_message.js +18 -0
package/src/validation/demos/browser_style.png +0 -0
package/src/validation/demos/form_validation_demo.html +142 -0
package/src/validation/demos/form_validation_demo_preact.html +87 -0
package/src/validation/demos/form_validation_native_popover_demo.html +168 -0
package/src/validation/demos/form_validation_vs_native_demo.html +172 -0
package/src/validation/demos/validation_message_demo.html +203 -0
package/src/validation/hooks/use_constraints.js +23 -0
package/src/validation/hooks/use_custom_validation_ref.js +73 -0
package/src/validation/hooks/use_validation_message.js +19 -0
package/src/validation/validation_message.js +741 -0
package/src/components/editable_text/editable_text.jsx +0 -96
package/src/components/form.jsx +0 -144
package/src/components/input/checkbox_list.jsx +0 -294
package/src/components/input/field.jsx +0 -61
package/src/components/input/input_textual.jsx +0 -338
package/src/components/input/radio_list.jsx +0 -283
package/src/components/input/use_form_event.js +0 -20
package/src/components/input/use_on_change.js +0 -12
package/src/components/selection/selection.js +0 -5
package/src/components/selection/selection_context.jsx +0 -262
package/src/components/shortcut/shortcut_context.jsx +0 -390
package/src/components/use_action_events.js +0 -37
package/src/utils/iterable_weak_set.js +0 -62
/package/src/components/demos/action/{11_nested_shortcuts_demo.html → 11_nested_shortcuts_demo.xhtml} +0 -0
/package/src/components/{shortcut → keyboard_shortcuts}/os.js +0 -0
/package/src/route/{route.test.html → route.xtest.html} +0 -0

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

@@ -0,0 +1,295 @@
+<!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 CHANGED Viewed

@@ -1,15 +1,16 @@
 import { elementIsFocusable, findAfter } from "@jsenv/dom";
-import { requestAction } from "@jsenv/validation";
 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 { useKeyboardShortcuts } from "../shortcut/shortcut_context.jsx";
-import { useActionEvents } from "../use_action_events.js";
+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";
@@ -60,7 +61,6 @@ const DetailsBasic = forwardRef((props, ref) => {
   const {
     id,
     label = "Summary",
-    children,
     open,
     loading,
     className,
@@ -70,6 +70,7 @@ const DetailsBasic = forwardRef((props, ref) => {
     openKeyShortcut = "ArrowRight",
     closeKeyShortcut = "ArrowLeft",
     onToggle,
+    children,
     ...rest
   } = props;
   const innerRef = useRef();
@@ -97,78 +98,72 @@ const DetailsBasic = forwardRef((props, ref) => {
    * - https://stackoverflow.com/questions/58942600/react-html-details-toggles-uncontrollably-when-starts-open
    *
    */
-  const mountedRef = useRef(false);
-  useEffect(() => {
-    mountedRef.current = true;
-  }, []);
   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;
-          }
+  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();
-          firstFocusableElementInDetails.focus();
-        },
+          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();
-          }
-        },
+    },
+    {
+      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();
+        }
       },
-    ],
-    (shortcut, e) => {
-      shortcut.action(e);
     },
-  );
+  ]);
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    mountedRef.current = true;
+  }, []);
   return (
     <details
       {...rest}
+      ref={innerRef}
       id={id}
       className={[
         "navi_details",
         ...(className ? className.split(" ") : []),
       ].join(" ")}
-      ref={innerRef}
       onToggle={(e) => {
         const isOpen = e.newState === "open";
         if (mountedRef.current) {
@@ -218,7 +213,9 @@ const DetailsWithAction = forwardRef((props, ref) => {
   });
   useActionEvents(innerRef, {
     onPrevented: onActionPrevented,
-    onAction: executeAction,
+    onAction: (e) => {
+      executeAction(e);
+    },
     onStart: onActionStart,
     onError: onActionError,
     onEnd: onActionEnd,
@@ -228,10 +225,12 @@ const DetailsWithAction = forwardRef((props, ref) => {
     <DetailsBasic
       {...rest}
       ref={innerRef}
+      loading={loading || actionLoading}
       onToggle={(toggleEvent) => {
         const isOpen = toggleEvent.newState === "open";
         if (isOpen) {
-          requestAction(effectiveAction, {
+          requestAction(toggleEvent.target, effectiveAction, {
+            actionOrigin: "action_prop",
             event: toggleEvent,
             method: "run",
           });
@@ -240,7 +239,6 @@ const DetailsWithAction = forwardRef((props, ref) => {
         }
         onToggle?.(toggleEvent);
       }}
-      loading={loading || actionLoading}
     >
       <ActionRenderer action={effectiveAction}>{children}</ActionRenderer>
     </DetailsBasic>

package/src/components/edition/editable.jsx ADDED Viewed

@@ -0,0 +1,186 @@
+/**
+ * - We must keep the edited element in the DOM so that
+ * the layout remains the same (especially important for table cells)
+ * And the editable part is in absolute so that it takes the original content dimensions
+ * AND for table cells it can actually take the table cell dimensions
+ *
+ * This means an editable thing MUST have a parent with position relative that wraps the content and the eventual editable input
+ *
+ */
+import { forwardRef } from "preact/compat";
+import {
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "preact/hooks";
+import { Input } from "../field/input.jsx";
+import.meta.css = /* css */ `
+  .navi_editable_wrapper {
+    position: absolute;
+    inset: 0;
+  }
+`;
+export const useEditionController = () => {
+  const [editing, editingSetter] = useState(null);
+  const startEditing = useCallback((event) => {
+    editingSetter((current) => {
+      return current || { event };
+    });
+  }, []);
+  const stopEditing = useCallback(() => {
+    editingSetter(null);
+  }, []);
+  const prevEditingRef = useRef(editing);
+  const editionJustEnded = prevEditingRef.current && !editing;
+  prevEditingRef.current = editing;
+  return { editing, startEditing, stopEditing, editionJustEnded };
+};
+export const Editable = forwardRef((props, ref) => {
+  let {
+    children,
+    action,
+    editing,
+    name,
+    value,
+    valueSignal,
+    onEditEnd,
+    constraints,
+    type,
+    required,
+    readOnly,
+    min,
+    max,
+    step,
+    minLength,
+    maxLength,
+    pattern,
+    wrapperProps,
+    autoSelect = true,
+    width,
+    height,
+    ...rest
+  } = props;
+  if (import.meta.dev && !action) {
+    console.warn(`Editable requires an action prop`);
+  }
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  if (valueSignal) {
+    value = valueSignal.value;
+  }
+  const editingPreviousRef = useRef(editing);
+  const valueWhenEditStartRef = useRef(editing ? value : undefined);
+  if (editingPreviousRef.current !== editing) {
+    if (editing) {
+      valueWhenEditStartRef.current = value; // Always store the external value
+    }
+    editingPreviousRef.current = editing;
+  }
+  // Simulate typing the initial value when editing starts with a custom value
+  useLayoutEffect(() => {
+    if (!editing) {
+      return;
+    }
+    const editingEvent = editing.event;
+    if (!editingEvent) {
+      return;
+    }
+    const editingEventInitialValue = editingEvent.detail?.initialValue;
+    if (editingEventInitialValue === undefined) {
+      return;
+    }
+    const input = innerRef.current;
+    input.value = editingEventInitialValue;
+    input.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: false,
+      }),
+    );
+  }, [editing]);
+  const input = (
+    <Input
+      ref={innerRef}
+      {...rest}
+      type={type}
+      name={name}
+      value={value}
+      valueSignal={valueSignal}
+      autoFocus
+      autoFocusVisible
+      autoSelect={autoSelect}
+      cancelOnEscape
+      cancelOnBlurInvalid
+      constraints={constraints}
+      required={required}
+      readOnly={readOnly}
+      min={min}
+      max={max}
+      step={step}
+      minLength={minLength}
+      maxLength={maxLength}
+      pattern={pattern}
+      width={width}
+      height={height}
+      onCancel={(e) => {
+        if (valueSignal) {
+          valueSignal.value = valueWhenEditStartRef.current;
+        }
+        onEditEnd({
+          cancelled: true,
+          event: e,
+        });
+      }}
+      onBlur={(e) => {
+        const value =
+          type === "number" ? e.target.valueAsNumber : e.target.value;
+        const valueWhenEditStart = valueWhenEditStartRef.current;
+        if (value === valueWhenEditStart) {
+          onEditEnd({
+            cancelled: true,
+            event: e,
+          });
+          return;
+        }
+      }}
+      action={action || (() => {})}
+      onActionEnd={(e) => {
+        onEditEnd({
+          success: true,
+          event: e,
+        });
+      }}
+    />
+  );
+  return (
+    <>
+      {children || <span>{value}</span>}
+      {editing && (
+        <div
+          {...wrapperProps}
+          className={[
+            "navi_editable_wrapper",
+            ...(wrapperProps?.className || "").split(" "),
+          ].join(" ")}
+        >
+          {input}
+        </div>
+      )}
+    </>
+  );
+});