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

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

package/dist/jsenv_navi.js +13838 -23291
package/dist/jsenv_navi.js.map +1281 -0
package/package.json +6 -8
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/text/demos/demo_text_and_icon.html DELETED Viewed

@@ -1,421 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Text and Icon Demo</title>
-    <script type="importmap">
-      {
-        "imports": {
-          "preact": "https://esm.sh/preact@10.22.0",
-          "preact/": "https://esm.sh/preact@10.22.0/"
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      /* eslint-disable no-unused-vars */
-      import { Text, Icon } from "../text.jsx";
-      // Sample SVG icons
-      const HomeIcon = () => (
-        <svg
-          viewBox="0 0 24 24"
-          width="100%"
-          height="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" />
-        </svg>
-      );
-      const UserIcon = () => (
-        <svg
-          viewBox="0 0 24 24"
-          width="100%"
-          height="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-            fill="currentColor"
-          />
-        </svg>
-      );
-      const SettingsIcon = () => (
-        <svg
-          viewBox="0 0 24 24"
-          width="100%"
-          height="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
-            fill="currentColor"
-          />
-        </svg>
-      );
-      const SearchIcon = () => (
-        <svg
-          viewBox="0 0 24 24"
-          width="100%"
-          height="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-            fill="currentColor"
-          />
-        </svg>
-      );
-      const StarIcon = () => (
-        <svg
-          viewBox="0 0 24 24"
-          width="100%"
-          height="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-            fill="currentColor"
-          />
-        </svg>
-      );
-      const HeartIcon = () => (
-        <svg
-          viewBox="0 0 24 24"
-          width="100%"
-          height="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-            fill="currentColor"
-          />
-        </svg>
-      );
-      const Demo = () => {
-        return (
-          <div
-            style={{
-              padding: "20px",
-              fontFamily: "system-ui, sans-serif",
-              lineHeight: "1.6",
-              maxWidth: "800px",
-            }}
-          >
-            <h1>Text and Icon Combinations</h1>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Basic Icon + Text</h2>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px",
-                }}
-              >
-                <Text>
-                  <Icon>
-                    <HomeIcon />
-                  </Icon>
-                  Home
-                </Text>
-                <Text>
-                  <Icon>
-                    <UserIcon />
-                  </Icon>
-                  Profile
-                </Text>
-                <Text>
-                  <Icon>
-                    <SettingsIcon />
-                  </Icon>
-                  Settings
-                </Text>
-              </div>
-            </section>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Text + Icon (Reversed Order)</h2>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px",
-                }}
-              >
-                <Text>
-                  Search
-                  <Icon>
-                    <SearchIcon />
-                  </Icon>
-                </Text>
-              </div>
-            </section>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Multiple Icons</h2>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px",
-                }}
-              >
-                <Text>
-                  <Icon>
-                    <HomeIcon />
-                  </Icon>
-                  Left and right
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                </Text>
-                <Text>
-                  <Icon>
-                    <UserIcon />
-                  </Icon>
-                  <Icon>
-                    <SettingsIcon />
-                  </Icon>
-                  Two on the left
-                </Text>
-                <Text>
-                  Two on the right
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                  <Icon>
-                    <HeartIcon />
-                  </Icon>
-                </Text>
-                <Text>
-                  <Icon>
-                    <HomeIcon />
-                  </Icon>
-                  <Icon>
-                    <UserIcon />
-                  </Icon>
-                  Two on the left and right
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                  <Icon>
-                    <HeartIcon />
-                  </Icon>
-                </Text>
-              </div>
-            </section>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Different Font Sizes</h2>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "15px",
-                }}
-              >
-                <Text style={{ fontSize: "12px" }}>
-                  <Icon>
-                    <HomeIcon />
-                  </Icon>
-                  Small text with icon
-                </Text>
-                <Text style={{ fontSize: "16px" }}>
-                  <Icon>
-                    <UserIcon />
-                  </Icon>
-                  Normal text with icon
-                </Text>
-                <Text style={{ fontSize: "24px" }}>
-                  <Icon>
-                    <SettingsIcon />
-                  </Icon>
-                  Large text with icon
-                </Text>
-                <Text style={{ fontSize: "32px" }}>
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                  Extra large text
-                </Text>
-              </div>
-            </section>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Colored Examples</h2>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px",
-                }}
-              >
-                <Text style={{ color: "blue" }}>
-                  <Icon>
-                    <HomeIcon />
-                  </Icon>
-                  Blue home link
-                </Text>
-                <Text style={{ color: "green" }}>
-                  <Icon>
-                    <UserIcon />
-                  </Icon>
-                  Green user profile
-                </Text>
-                <Text style={{ color: "red" }}>
-                  <Icon>
-                    <HeartIcon />
-                  </Icon>
-                  Red heart favorite
-                </Text>
-                <Text style={{ color: "purple" }}>
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                  Purple star rating
-                </Text>
-              </div>
-            </section>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Interactive Buttons</h2>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "10px",
-                }}
-              >
-                <button
-                  style={{
-                    padding: "10px 15px",
-                    border: "1px solid #ccc",
-                    borderRadius: "4px",
-                    background: "white",
-                    cursor: "pointer",
-                    fontSize: "14px",
-                  }}
-                >
-                  <Text>
-                    <Icon>
-                      <SearchIcon />
-                    </Icon>
-                    Search Files
-                  </Text>
-                </button>
-              </div>
-            </section>
-            <section style={{ marginBottom: "40px" }}>
-              <h2>Navigation Menu Style</h2>
-              <nav
-                style={{
-                  background: "#f8f9fa",
-                  padding: "20px",
-                  borderRadius: "8px",
-                }}
-              >
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "15px",
-                  }}
-                >
-                  <Text
-                    style={{
-                      cursor: "pointer",
-                      padding: "8px 12px",
-                      borderRadius: "4px",
-                      background: "#007bff",
-                      color: "white",
-                    }}
-                  >
-                    <Icon>
-                      <UserIcon />
-                    </Icon>
-                    Users
-                  </Text>
-                </div>
-              </nav>
-            </section>
-            <section>
-              <h2>Inline Text with Icons</h2>
-              <p style={{ fontSize: "16px", lineHeight: "1.6" }}>
-                Welcome to our platform! Click on the{" "}
-                <Text bold>
-                  <Icon>
-                    <HomeIcon />
-                  </Icon>
-                  home
-                </Text>{" "}
-                button to return to the dashboard, or visit your{" "}
-                <Text italic>
-                  <Icon>
-                    <UserIcon />
-                  </Icon>
-                  profile
-                </Text>{" "}
-                to update your settings. Don't forget to{" "}
-                <Text underline>
-                  <Icon>
-                    <StarIcon />
-                  </Icon>
-                  star
-                </Text>{" "}
-                your favorite items and{" "}
-                <Text bold italic>
-                  <Icon>
-                    <HeartIcon />
-                  </Icon>
-                  like
-                </Text>{" "}
-                the content you enjoy. Use the{" "}
-                <Text bold underline>
-                  <Icon>
-                    <SearchIcon />
-                  </Icon>
-                  search
-                </Text>{" "}
-                feature to find what you're looking for quickly. You can also
-                combine{" "}
-                <Text italic underline>
-                  multiple styles
-                </Text>{" "}
-                together for{" "}
-                <Text bold italic underline>
-                  maximum emphasis
-                </Text>
-                !
-              </p>
-            </section>
-          </div>
-        );
-      };
-      render(<Demo />, document.getElementById("app"));
-    </script>
-  </body>
-</html>

package/src/components/text/overflow.jsx DELETED Viewed

@@ -1,15 +0,0 @@
-export const Overflow = ({ className, children, afterContent }) => {
-  return (
-    <div
-      className={className}
-      style="display: flex; flex-wrap: wrap; overflow: hidden; width: 100%; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis;"
-    >
-      <div style="display: flex; flex-grow: 1; width: 0; gap: 0.3em">
-        <div style="overflow: hidden; max-width: 100%; text-overflow: ellipsis;">
-          {children}
-        </div>
-        {afterContent}
-      </div>
-    </div>
-  );
-};

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

@@ -1,83 +0,0 @@
-import { useLayoutStyle } from "../layout/use_layout_style.js";
-import { withPropsStyle } from "../props_composition/with_props_style.js";
-import.meta.css = /* css */ `
-  :root {
-    --navi-icon-align-y: center;
-  }
-  .navi_text {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.1em;
-  }
-  .navi_icon {
-    --align-y: var(--navi-icon-align-y, center);
-    display: inline-flex;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    align-self: var(--align-y);
-    line-height: 1em;
-  }
-`;
-export const useTypographyStyle = (props) => {
-  const color = props.color;
-  const bold = props.bold;
-  const italic = props.italic;
-  const underline = props.underline;
-  const size = props.size;
-  delete props.color;
-  delete props.bold;
-  delete props.italic;
-  delete props.underline;
-  delete props.size;
-  return {
-    color,
-    fontWeight: bold ? "bold" : bold === undefined ? undefined : "normal",
-    fontStyle: italic ? "italic" : italic === undefined ? undefined : "normal",
-    fontSize: size,
-    textDecoration: underline
-      ? "underline"
-      : underline === undefined
-        ? undefined
-        : "none",
-  };
-};
-export const Text = ({ style, children, ...rest }) => {
-  const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(
-    {
-      ...all,
-      ...useTypographyStyle(rest),
-    },
-    style,
-  );
-  return (
-    <span {...rest} className="navi_text" style={innerStyle}>
-      {children}
-    </span>
-  );
-};
-export const Icon = ({ style, children, ...rest }) => {
-  const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(
-    {
-      ...all,
-      ...useTypographyStyle(rest),
-    },
-    style,
-  );
-  return (
-    <span {...rest} className="navi_icon" style={innerStyle}>
-      {children}
-    </span>
-  );
-};

package/src/components/text/text_and_count.jsx DELETED Viewed

@@ -1,28 +0,0 @@
-import { Overflow } from "./overflow.jsx";
-import.meta.css = /* css */ `
-  .text_and_count {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    flex: 1;
-    white-space: nowrap;
-  }
-  .count {
-    position: relative;
-    top: -1px;
-    color: rgba(28, 43, 52, 0.4);
-  }
-`;
-export const TextAndCount = ({ text, count }) => {
-  return (
-    <Overflow
-      className="text_and_count"
-      afterContent={count > 0 && <span className="count">({count})</span>}
-    >
-      <span className="label">{text}</span>
-    </Overflow>
-  );
-};

package/src/components/ui_transition.jsx DELETED Viewed

@@ -1,128 +0,0 @@
-/**
- * UITransition
- *
- * A Preact component that enables smooth animated transitions between its children when the content changes.
- * It observes content keys and phases to create different types of transitions.
- *
- * Features:
- * - Content transitions: Between different content keys (e.g., user profiles, search results)
- * - Phase transitions: Between loading/content/error states for the same content key
- * - Automatic size animation to accommodate content changes
- * - Configurable transition types: "slide-left", "cross-fade"
- * - Independent duration control for content and phase transitions
- *
- * Usage:
- * - Wrap dynamic content in <UITransition> to animate between states
- * - Set a unique `data-content-key` on your rendered content to identify each content variant
- * - Use `data-content-phase` to mark loading/error states for phase transitions
- * - Configure transition types and durations for both content and phase changes
- *
- * Example:
- *
- *   <UITransition
- *     transitionType="slide-left"
- *     transitionDuration={400}
- *     phaseTransitionType="cross-fade"
- *     phaseTransitionDuration={300}
- *   >
- *     {isLoading
- *       ? <Spinner data-content-key={userId} data-content-phase />
- *       : <UserProfile user={user} data-content-key={userId} />}
- *   </UITransition>
- *
- * When `data-content-key` changes, UITransition animates content transitions.
- * When `data-content-phase` changes for the same key, it animates phase transitions.
- */
-import { initUITransition } from "@jsenv/dom";
-import { createContext } from "preact";
-import { useContext, useLayoutEffect, useRef, useState } from "preact/hooks";
-const ContentKeyContext = createContext();
-export const UITransition = ({
-  children,
-  contentKey,
-  sizeTransition,
-  sizeTransitionDuration,
-  transitionType,
-  transitionDuration,
-  phaseTransitionType,
-  phaseTransitionDuration,
-  debugTransition,
-  ...props
-}) => {
-  const [contentKeyFromContext, setContentKeyFromContext] = useState();
-  const effectiveContentKey = contentKey || contentKeyFromContext;
-  const ref = useRef();
-  useLayoutEffect(() => {
-    const uiTransition = initUITransition(ref.current);
-    return () => {
-      uiTransition.cleanup();
-    };
-  }, []);
-  return (
-    <ContentKeyContext.Provider value={setContentKeyFromContext}>
-      <div
-        ref={ref}
-        {...props}
-        className="ui_transition_container"
-        data-size-transition={sizeTransition ? "" : undefined}
-        data-size-transition-duration={
-          sizeTransitionDuration ? sizeTransitionDuration : undefined
-        }
-        data-content-transition={transitionType ? transitionType : undefined}
-        data-content-transition-duration={
-          transitionDuration ? transitionDuration : undefined
-        }
-        data-phase-transition={
-          phaseTransitionType ? phaseTransitionType : undefined
-        }
-        data-phase-transition-duration={
-          phaseTransitionDuration ? phaseTransitionDuration : undefined
-        }
-        data-debug-transition={debugTransition ? "" : undefined}
-      >
-        <div className="ui_transition_outer_wrapper">
-          <div className="ui_transition_measure_wrapper">
-            <div
-              className="ui_transition_slot"
-              data-content-key={
-                effectiveContentKey ? effectiveContentKey : undefined
-              }
-            >
-              {children}
-            </div>
-            <div className="ui_transition_phase_overlay"></div>
-          </div>
-        </div>
-        <div className="ui_transition_content_overlay"></div>
-      </div>
-    </ContentKeyContext.Provider>
-  );
-};
-export const useContentKey = (key, enabled) => {
-  const setKey = useContext(ContentKeyContext);
-  if (setKey && enabled) {
-    setKey(key);
-  }
-  useLayoutEffect(() => {
-    if (!setKey || !enabled) {
-      return null;
-    }
-    return () => {
-      setKey((v) => {
-        if (v !== key) {
-          // the current key is different from the one we set
-          // it means another component set it in the meantime
-          // we should not clear it
-          return v;
-        }
-        return undefined;
-      });
-    };
-  }, [enabled]);
-};