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/1_nested_ui_transition_demo.html ADDED Viewed

@@ -0,0 +1,429 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nested UITransition Demo (Pages & Sub Pages)</title>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        max-width: 940px;
+        margin: 0 auto;
+        padding: 24px 24px 160px;
+        background: #f5f7fa;
+        line-height: 1.45;
+      }
+      h1 {
+        margin-top: 0;
+      }
+      .note {
+        background: #fff3cd;
+        border: 1px solid #ffe69c;
+        color: #664d03;
+        padding: 10px 14px;
+        border-radius: 6px;
+        font-size: 14px;
+      }
+      .controls,
+      .sub-controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin: 16px 0 8px;
+      }
+      button {
+        cursor: pointer;
+        padding: 8px 14px;
+        border-radius: 4px;
+        border: 1px solid #d0d7de;
+        background: #fff;
+        font: inherit;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        transition:
+          background 0.15s,
+          box-shadow 0.15s;
+      }
+      button:hover {
+        background: #f0f2f4;
+      }
+      button.active {
+        background: #0969da;
+        color: #fff;
+        border-color: #0969da;
+      }
+      .outer-transition-container {
+        position: relative;
+        background: #ffffff;
+        border: 2px solid #2684ff44;
+        border-radius: 8px;
+        padding: 20px 22px 40px;
+        margin-top: 24px;
+        overflow: hidden; /* so slide-left stays clean */
+      }
+      .page-root {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        /* visual differences per page set in inline style */
+      }
+      .page-title {
+        margin: 0;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .nested-transition-container {
+        position: relative;
+        border: 2px dashed #6f42c144;
+        background: #faf9ff;
+        padding: 16px 18px 24px;
+        border-radius: 6px;
+        overflow: hidden; /* cross-fade stays confined */
+      }
+      .section-root {
+        position: relative;
+      }
+      .section-root h3 {
+        margin-top: 0;
+      }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 12px;
+        margin-top: 10px;
+      }
+      .legend span {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .box {
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
+        display: inline-block;
+      }
+      .box.outer {
+        background: #2684ff22;
+        border: 1px solid #2684ff;
+      }
+      .box.inner {
+        background: #6f42c122;
+        border: 1px solid #6f42c1;
+      }
+      .info {
+        font-size: 13px;
+        color: #555;
+        margin-top: 6px;
+      }
+      .size-diff-block {
+        padding: 12px 14px;
+        border-radius: 4px;
+        background: linear-gradient(105deg, #e0f2ff, #f1f8ff);
+        border: 1px solid #b6d9ff;
+        font-size: 14px;
+      }
+      .footer-note {
+        margin-top: 60px;
+        font-size: 12px;
+        color: #666;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Nested UITransition Demo</h1>
+    <p>
+      This file demonstrates
+      <strong
+        >an outer <code>UITransition</code> wrapping an inner
+        <code>UITransition</code></strong
+      >. Switching between Page A & Page B uses a
+      <code>slide-left</code> content transition. Inside each page, switching
+      between its sections uses a <code>cross-fade</code> content transition.
+      This allows you to see how a long/larger transition (page slide) can
+      encompass/overlap smaller fades.
+    </p>
+    <div class="note">
+      Outer: <code>transitionType = "slide-left"</code> (content transition).<br />
+      Inner: <code>transitionType = "cross-fade"</code> (content transition).<br />
+      Both layers have independent size transitions.
+    </div>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      // eslint-disable-next-line no-unused-vars
+      import { UITransition } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      const Page = ({ pageKey }) => {
+        const [sectionIndex, setSectionIndex] = useState(0);
+        const sections =
+          pageKey === "A"
+            ? [
+                {
+                  key: "intro",
+                  title: "Introduction",
+                  content: (
+                    <div
+                      className="section-root"
+                      data-content-key="intro"
+                      data-ui-name={`page-${pageKey}-intro`}
+                    >
+                      <h3>{pageKey} · Intro</h3>
+                      <p>
+                        This is the <strong>intro section</strong> of Page{" "}
+                        {pageKey}. It is the smallest one to highlight size
+                        growth when changing sections.
+                      </p>
+                    </div>
+                  ),
+                },
+                {
+                  key: "details",
+                  title: "Details",
+                  content: (
+                    <div
+                      className="section-root"
+                      data-content-key="details"
+                      data-ui-name={`page-${pageKey}-details`}
+                    >
+                      <h3>{pageKey} · Details</h3>
+                      <p>
+                        This section is a bit larger. It contains a list to make
+                        height differ and emphasize size transition inside the
+                        nested container.
+                      </p>
+                      <ul>
+                        <li>Point Alpha — descriptive text for clarity.</li>
+                        <li>
+                          Point Beta — demonstrates cross-fade with bigger
+                          blocks.
+                        </li>
+                        <li>Point Gamma — keeps layout stable during fade.</li>
+                      </ul>
+                      <div className="size-diff-block">
+                        Variable height content block (A/details)
+                      </div>
+                    </div>
+                  ),
+                },
+                {
+                  key: "extended",
+                  title: "Extended",
+                  content: (
+                    <div
+                      className="section-root"
+                      data-content-key="extended"
+                      data-ui-name={`page-${pageKey}-extended`}
+                    >
+                      <h3>{pageKey} · Extended</h3>
+                      <p>
+                        The extended section is the tallest. Long paragraphs
+                        plus a grid create a pronounced size difference showing
+                        nested size transitions while the outer page container
+                        remains stable.
+                      </p>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam.
+                      </p>
+                      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0;">
+                        {[1, 2, 3, 4].map((n) => (
+                          <div
+                            style="background:#eef4ff;border:1px solid #d1e3ff;padding:8px;border-radius:4px;"
+                            key={n}
+                          >
+                            Card {n}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ),
+                },
+              ]
+            : [
+                {
+                  key: "alpha",
+                  title: "Alpha",
+                  content: (
+                    <div
+                      className="section-root"
+                      data-content-key="alpha"
+                      data-ui-name={`page-${pageKey}-alpha`}
+                    >
+                      <h3>{pageKey} · Alpha</h3>
+                      <p>
+                        Page {pageKey} starts with Alpha — a mid-sized first
+                        section.
+                      </p>
+                      <div className="size-diff-block">
+                        Moderate sized block (B/alpha)
+                      </div>
+                    </div>
+                  ),
+                },
+                {
+                  key: "beta",
+                  title: "Beta",
+                  content: (
+                    <div
+                      className="section-root"
+                      data-content-key="beta"
+                      data-ui-name={`page-${pageKey}-beta`}
+                    >
+                      <h3>{pageKey} · Beta</h3>
+                      <p>
+                        Beta shrinks a little so you can observe the container
+                        height animating downward on the nested transition.
+                      </p>
+                    </div>
+                  ),
+                },
+                {
+                  key: "gamma",
+                  title: "Gamma",
+                  content: (
+                    <div
+                      className="section-root"
+                      data-content-key="gamma"
+                      data-ui-name={`page-${pageKey}-gamma`}
+                    >
+                      <h3>{pageKey} · Gamma</h3>
+                      <p>
+                        Gamma is larger again with multiple paragraphs +
+                        decorative blocks.
+                      </p>
+                      <p>
+                        Mauris non tempor quam, et lacinia sapien. Mauris
+                        accumsan eros eget libero posuere vulputate. Etiam elit
+                        elit, elementum sed varius at, adipiscing vitae est.
+                      </p>
+                      <p>
+                        Suspendisse vel felis. Ut lorem lorem, interdum eu,
+                        tincidunt sit amet, laoreet vitae, arcu.
+                      </p>
+                    </div>
+                  ),
+                },
+              ];
+        const currentSection = sections[sectionIndex];
+        return (
+          <div
+            className="page-root"
+            data-content-key={pageKey}
+            data-ui-name={`page-${pageKey}`}
+            style={{
+              background: pageKey === "A" ? "#e8f4ff" : "#ffeef5",
+              border: `1px solid ${pageKey === "A" ? "#b8dcff" : "#ffc2d7"}`,
+              padding: "18px 18px 26px",
+              borderRadius: "6px",
+            }}
+          >
+            <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
+              <h2 className="page-title">
+                {pageKey === "A" ? "🅰️ Page A" : "🅱️ Page B"}
+              </h2>
+              <div className="sub-controls">
+                {sections.map((s, i) => (
+                  <button
+                    key={s.key}
+                    className={i === sectionIndex ? "active" : ""}
+                    onClick={() => setSectionIndex(i)}
+                  >
+                    {s.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="nested-transition-container">
+              <UITransition
+                transitionType="cross-fade"
+                transitionDuration={350}
+                sizeTransition
+                sizeTransitionDuration={350}
+              >
+                {currentSection.content}
+              </UITransition>
+              <div className="info">
+                Inner UITransition (purple dashed) cross-fades sections &
+                animates height.
+              </div>
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [page, setPage] = useState("A");
+        return (
+          <div>
+            <div className="controls">
+              <button
+                onClick={() => setPage("A")}
+                className={page === "A" ? "active" : ""}
+              >
+                Page A
+              </button>
+              <button
+                onClick={() => setPage("B")}
+                className={page === "B" ? "active" : ""}
+              >
+                Page B
+              </button>
+            </div>
+            <div className="legend">
+              <span>
+                <span className="box outer"></span> Outer UITransition
+                (slide-left)
+              </span>
+              <span>
+                <span className="box inner"></span> Inner UITransition
+                (cross-fade)
+              </span>
+            </div>
+            <div className="outer-transition-container">
+              <UITransition
+                transitionType="slide-left"
+                transitionDuration={500}
+                sizeTransition
+                sizeTransitionDuration={400}
+              >
+                <Page pageKey={page} />
+              </UITransition>
+              <div className="info">
+                Outer UITransition (blue border) slides horizontally between
+                Page A & Page B.
+              </div>
+            </div>
+          </div>
+        );
+      };
+      render(<App />, document.getElementById("root"));
+    </script>
+    <div class="footer-note">
+      Open devtools console to observe any debug logs (if enabled in the library
+      build). Try switching pages mid section fade to see nested transition
+      interplay.
+    </div>
+  </body>
+</html>