@jsenv/navi 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/dist/jsenv_navi.js +13838 -23291
  2. package/dist/jsenv_navi.js.map +1281 -0
  3. package/package.json +5 -7
  4. package/index.js +0 -122
  5. package/src/action_private_properties.js +0 -11
  6. package/src/action_proxy_test.html +0 -353
  7. package/src/action_run_states.js +0 -5
  8. package/src/actions.js +0 -1401
  9. package/src/browser_integration/browser_integration.js +0 -216
  10. package/src/browser_integration/document_back_and_forward.js +0 -17
  11. package/src/browser_integration/document_loading_signal.js +0 -100
  12. package/src/browser_integration/document_state_signal.js +0 -9
  13. package/src/browser_integration/document_url_signal.js +0 -9
  14. package/src/browser_integration/use_is_visited.js +0 -19
  15. package/src/browser_integration/via_history.js +0 -232
  16. package/src/browser_integration/via_navigation.js +0 -168
  17. package/src/components/action_execution/form_context.js +0 -5
  18. package/src/components/action_execution/render_actionable_component.jsx +0 -29
  19. package/src/components/action_execution/use_action.js +0 -99
  20. package/src/components/action_execution/use_execute_action.js +0 -193
  21. package/src/components/action_execution/use_run_on_mount.js +0 -9
  22. package/src/components/action_renderer.jsx +0 -125
  23. package/src/components/callout/callout.js +0 -990
  24. package/src/components/callout/callout_demo.html +0 -201
  25. package/src/components/callout/test_dynamic_positioning.html +0 -161
  26. package/src/components/callout/test_html_document_iframe.html +0 -182
  27. package/src/components/demos/0_button_demo.html +0 -707
  28. package/src/components/demos/10_column_reordering_debug.html +0 -277
  29. package/src/components/demos/11_table_selection_debug.html +0 -432
  30. package/src/components/demos/1_checkbox_demo.html +0 -754
  31. package/src/components/demos/2_input_textual_demo.html +0 -286
  32. package/src/components/demos/3_radio_demo.html +0 -874
  33. package/src/components/demos/4_select_demo.html +0 -100
  34. package/src/components/demos/5_list_scrollable_demo.html +0 -153
  35. package/src/components/demos/6_tablist_demo.html +0 -77
  36. package/src/components/demos/7_table_selection_demo.html +0 -176
  37. package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
  38. package/src/components/demos/9_table_column_drag_demo.html +0 -325
  39. package/src/components/demos/action/0_button_demo.html +0 -204
  40. package/src/components/demos/action/10_shortcuts_demo.html +0 -189
  41. package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
  42. package/src/components/demos/action/1_input_text_demo.html +0 -876
  43. package/src/components/demos/action/2_form_multiple.html +0 -303
  44. package/src/components/demos/action/3_details_demo.html +0 -203
  45. package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
  46. package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
  47. package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
  48. package/src/components/demos/action/7_radio_list_demo.html +0 -357
  49. package/src/components/demos/action/8_editable_demo.html +0 -431
  50. package/src/components/demos/action/9_link_demo.html +0 -194
  51. package/src/components/demos/demo.md +0 -0
  52. package/src/components/demos/route/basic/basic.html +0 -14
  53. package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
  54. package/src/components/demos/route/multi/multi.html +0 -14
  55. package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
  56. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
  57. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
  58. package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
  59. package/src/components/details/details.jsx +0 -245
  60. package/src/components/details/summary_marker.jsx +0 -141
  61. package/src/components/edition/editable.jsx +0 -186
  62. package/src/components/error_boundary_context.js +0 -9
  63. package/src/components/field/README.md +0 -247
  64. package/src/components/field/button.jsx +0 -429
  65. package/src/components/field/checkbox_list.jsx +0 -185
  66. package/src/components/field/collect_form_element_values.js +0 -82
  67. package/src/components/field/custom_field.js +0 -106
  68. package/src/components/field/form.jsx +0 -209
  69. package/src/components/field/input.jsx +0 -16
  70. package/src/components/field/input_checkbox.jsx +0 -434
  71. package/src/components/field/input_radio.jsx +0 -432
  72. package/src/components/field/input_textual.jsx +0 -389
  73. package/src/components/field/label.jsx +0 -46
  74. package/src/components/field/radio_list.jsx +0 -183
  75. package/src/components/field/select.jsx +0 -256
  76. package/src/components/field/use_action_events.js +0 -132
  77. package/src/components/field/use_form_events.js +0 -59
  78. package/src/components/field/use_ui_state_controller.js +0 -506
  79. package/src/components/item_tracker/README.md +0 -461
  80. package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
  81. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
  82. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
  83. package/src/components/item_tracker/use_item_tracker.jsx +0 -143
  84. package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
  85. package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
  86. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
  87. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
  88. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
  89. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
  90. package/src/components/keyboard_shortcuts/os.js +0 -9
  91. package/src/components/layout/demos/demo_flex.html +0 -638
  92. package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
  93. package/src/components/layout/demos/demo_layout_style_input.html +0 -226
  94. package/src/components/layout/demos/demo_layout_style_text.html +0 -514
  95. package/src/components/layout/flex.jsx +0 -109
  96. package/src/components/layout/layout_context.jsx +0 -3
  97. package/src/components/layout/spacing.jsx +0 -20
  98. package/src/components/layout/use_layout_style.js +0 -249
  99. package/src/components/link/link.jsx +0 -267
  100. package/src/components/link/link_with_icon.jsx +0 -52
  101. package/src/components/loader/loader_background.jsx +0 -372
  102. package/src/components/loader/loading_spinner.jsx +0 -68
  103. package/src/components/loader/network_speed.js +0 -83
  104. package/src/components/loader/rectangle_loading.jsx +0 -244
  105. package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
  106. package/src/components/props_composition/with_props_class_name.js +0 -37
  107. package/src/components/props_composition/with_props_style.js +0 -26
  108. package/src/components/route.jsx +0 -19
  109. package/src/components/selection/selection.jsx +0 -1583
  110. package/src/components/svg/font_sized_svg.jsx +0 -59
  111. package/src/components/svg/icon_and_text.jsx +0 -21
  112. package/src/components/svg/svg_mask_overlay.jsx +0 -105
  113. package/src/components/table/drag/table_drag.jsx +0 -506
  114. package/src/components/table/resize/table_resize.jsx +0 -650
  115. package/src/components/table/resize/table_size.js +0 -43
  116. package/src/components/table/selection/table_selection.js +0 -106
  117. package/src/components/table/selection/table_selection.jsx +0 -203
  118. package/src/components/table/sticky/sticky_group.js +0 -354
  119. package/src/components/table/sticky/table_sticky.js +0 -25
  120. package/src/components/table/sticky/table_sticky.jsx +0 -501
  121. package/src/components/table/table.jsx +0 -721
  122. package/src/components/table/table_css.js +0 -211
  123. package/src/components/table/table_ui.jsx +0 -49
  124. package/src/components/table/use_cells_and_columns.js +0 -90
  125. package/src/components/table/use_object_array_to_cells.js +0 -46
  126. package/src/components/table/z_indexes.js +0 -23
  127. package/src/components/tablist/tablist.jsx +0 -99
  128. package/src/components/text/demos/demo_text_and_icon.html +0 -421
  129. package/src/components/text/overflow.jsx +0 -15
  130. package/src/components/text/text.jsx +0 -83
  131. package/src/components/text/text_and_count.jsx +0 -28
  132. package/src/components/ui_transition.jsx +0 -128
  133. package/src/components/use_auto_focus.js +0 -94
  134. package/src/components/use_batch_during_render.js +0 -33
  135. package/src/components/use_debounce_true.js +0 -31
  136. package/src/components/use_dependencies_diff.js +0 -35
  137. package/src/components/use_focus_group.js +0 -20
  138. package/src/components/use_initial_value.js +0 -78
  139. package/src/components/use_is_visited.js +0 -19
  140. package/src/components/use_ref_array.js +0 -38
  141. package/src/components/use_signal_sync.js +0 -50
  142. package/src/components/use_stable_callback.js +0 -68
  143. package/src/components/use_state_array.js +0 -47
  144. package/src/docs/actions.md +0 -250
  145. package/src/docs/demos/resource/action_status.jsx +0 -42
  146. package/src/docs/demos/resource/demo.md +0 -1
  147. package/src/docs/demos/resource/resource_demo_0.html +0 -84
  148. package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
  149. package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
  150. package/src/docs/demos/resource/resource_demo_2.html +0 -173
  151. package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
  152. package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
  153. package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
  154. package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
  155. package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
  156. package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
  157. package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
  158. package/src/docs/demos/resource/tata.jsx +0 -3
  159. package/src/docs/demos/resource/toto.jsx +0 -3
  160. package/src/docs/demos/user_nav/user_nav.html +0 -12
  161. package/src/docs/demos/user_nav/user_nav.jsx +0 -330
  162. package/src/docs/resource_dependencies.md +0 -103
  163. package/src/docs/resource_with_params.md +0 -80
  164. package/src/navi_css_vars.js +0 -14
  165. package/src/notes.md +0 -34
  166. package/src/route/route.js +0 -596
  167. package/src/route/route.xtest.html +0 -228
  168. package/src/store/array_signal_store.js +0 -537
  169. package/src/store/local_storage_signal.js +0 -17
  170. package/src/store/resource_graph.js +0 -1304
  171. package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
  172. package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
  173. package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
  174. package/src/store/value_in_local_storage.js +0 -187
  175. package/src/symbol_object_signal.js +0 -1
  176. package/src/use_action_data.js +0 -10
  177. package/src/use_action_status.js +0 -47
  178. package/src/utils/add_many_event_listeners.js +0 -15
  179. package/src/utils/array_add_remove.js +0 -61
  180. package/src/utils/array_signal.js +0 -15
  181. package/src/utils/compare_two_js_values.js +0 -172
  182. package/src/utils/execute_with_cleanup.js +0 -21
  183. package/src/utils/get_caller_info.js +0 -85
  184. package/src/utils/is_signal.js +0 -20
  185. package/src/utils/js_value_weak_map.js +0 -162
  186. package/src/utils/js_value_weak_map_demo.html +0 -690
  187. package/src/utils/merge_two_js_values.js +0 -53
  188. package/src/utils/stringify_for_display.js +0 -131
  189. package/src/utils/weak_effect.js +0 -48
  190. package/src/validation/constraints/confirm_constraint.js +0 -14
  191. package/src/validation/constraints/create_unique_value_constraint.js +0 -27
  192. package/src/validation/constraints/native_constraints.js +0 -338
  193. package/src/validation/constraints/readonly_constraint.js +0 -41
  194. package/src/validation/constraints/same_as_constraint.js +0 -42
  195. package/src/validation/constraints/single_space_constraint.js +0 -13
  196. package/src/validation/custom_constraint_validation.js +0 -793
  197. package/src/validation/custom_message.js +0 -18
  198. package/src/validation/demos/browser_style.png +0 -0
  199. package/src/validation/demos/demo_same_as_constraint.html +0 -259
  200. package/src/validation/demos/form_validation_demo.html +0 -142
  201. package/src/validation/demos/form_validation_demo_preact.html +0 -87
  202. package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
  203. package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
  204. package/src/validation/hooks/use_constraints.js +0 -23
  205. package/src/validation/hooks/use_custom_validation_ref.js +0 -73
  206. package/src/validation/hooks/use_validation_message.js +0 -19
  207. package/src/validation/input_change_effect.js +0 -106
package/src/components/demos/action/10_shortcuts_demo.html DELETED
@@ -1,189 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Keyboard Shortcuts Demo</title>
8
- <style>
9
- body {
10
- font-family:
11
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12
- max-width: 800px;
13
- margin: 0 auto;
14
- padding: 40px 20px;
15
- line-height: 1.6;
16
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
- min-height: 100vh;
18
- color: #333;
19
- }
20
-
21
- .demo-container {
22
- background: white;
23
- border-radius: 12px;
24
- padding: 40px;
25
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
26
- }
27
-
28
- .demo-title {
29
- font-size: 2rem;
30
- font-weight: 700;
31
- margin: 0 0 30px 0;
32
- color: #2d3748;
33
- text-align: center;
34
- }
35
-
36
- .demo-description {
37
- background: #f7fafc;
38
- border-left: 4px solid #4299e1;
39
- padding: 20px;
40
- margin: 0 0 30px 0;
41
- border-radius: 0 8px 8px 0;
42
- }
43
-
44
- .demo-description h3 {
45
- margin: 0 0 15px 0;
46
- color: #2d3748;
47
- font-size: 1.2rem;
48
- }
49
-
50
- .shortcut-list {
51
- list-style: none;
52
- padding: 0;
53
- margin: 0;
54
- }
55
-
56
- .shortcut-item {
57
- display: flex;
58
- align-items: center;
59
- margin: 10px 0;
60
- padding: 8px 0;
61
- }
62
-
63
- .shortcut-key {
64
- background: #2d3748;
65
- color: white;
66
- padding: 4px 12px;
67
- border-radius: 6px;
68
- font-family: "Monaco", "Menlo", monospace;
69
- font-size: 0.85rem;
70
- font-weight: 600;
71
- margin-right: 15px;
72
- min-width: 60px;
73
- text-align: center;
74
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
75
- }
76
-
77
- .shortcut-description {
78
- color: #4a5568;
79
- flex: 1;
80
- }
81
-
82
- .demo-link-container {
83
- text-align: center;
84
- margin: 40px 0;
85
- padding: 30px;
86
- background: #f8f9fa;
87
- border: 2px solid #e9ecef;
88
- border-radius: 12px;
89
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
90
- }
91
-
92
- .instructions {
93
- background: #fff5f5;
94
- border: 1px solid #fed7d7;
95
- border-radius: 8px;
96
- padding: 20px;
97
- margin-top: 30px;
98
- }
99
-
100
- .instructions h4 {
101
- color: #c53030;
102
- margin: 0 0 10px 0;
103
- font-size: 1rem;
104
- }
105
-
106
- .instructions p {
107
- margin: 0;
108
- color: #744210;
109
- font-size: 0.9rem;
110
- }
111
- </style>
112
- </head>
113
- <body>
114
- <div id="root"></div>
115
-
116
- <script type="module" jsenv-type="module/jsx">
117
- import { render } from "preact";
118
- import {
119
- // eslint-disable-next-line no-unused-vars
120
- Link,
121
- } from "@jsenv/navi";
122
-
123
- // eslint-disable-next-line no-unused-vars
124
- const App = () => {
125
- return (
126
- <div className="demo-container">
127
- <h1 className="demo-title">⌨ī¸ Keyboard Shortcuts Demo</h1>
128
-
129
- <div className="demo-description">
130
- <h3>How to test:</h3>
131
- <ul className="shortcut-list">
132
- <li className="shortcut-item">
133
- <span className="shortcut-key">Enter</span>
134
- <span className="shortcut-description">
135
- Shows loading (0.5s), then displays alert
136
- </span>
137
- </li>
138
- <li className="shortcut-item">
139
- <span className="shortcut-key">Space</span>
140
- <span className="shortcut-description">
141
- Shows loading (1.5s), then throws error
142
- </span>
143
- </li>
144
- </ul>
145
- </div>
146
-
147
- <div className="demo-link-container">
148
- <Link
149
- href="#"
150
- shortcuts={[
151
- {
152
- key: "enter",
153
- action: async () => {
154
- await new Promise((resolve) => setTimeout(resolve, 500));
155
- // eslint-disable-next-line no-alert
156
- window.alert("✅ Enter key pressed successfully!");
157
- },
158
- },
159
- {
160
- key: "space",
161
- action: async () => {
162
- await new Promise((resolve) => setTimeout(resolve, 1500));
163
- throw new Error(
164
- "đŸ’Ĩ Space key triggered an error (this is expected)",
165
- );
166
- },
167
- },
168
- ]}
169
- >
170
- đŸŽ¯ Click or Focus Me and Try Shortcuts
171
- </Link>
172
- </div>
173
-
174
- <div className="instructions">
175
- <h4>📋 Instructions</h4>
176
- <p>
177
- Click on the link above or press Tab to focus it, then try the
178
- keyboard shortcuts. You'll see loading states and different
179
- outcomes for each key.
180
- </p>
181
- </div>
182
- </div>
183
- );
184
- };
185
-
186
- render(<App />, document.getElementById("root"));
187
- </script>
188
- </body>
189
- </html>
package/src/components/demos/action/11_nested_shortcuts_demo.xhtml DELETED
@@ -1,401 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Nested Keyboard Shortcuts Demo</title>
8
- <style>
9
- body {
10
- font-family:
11
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12
- max-width: 900px;
13
- margin: 0 auto;
14
- padding: 40px 20px;
15
- line-height: 1.6;
16
- background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
17
- min-height: 100vh;
18
- color: #333;
19
- }
20
-
21
- .demo-container {
22
- background: white;
23
- border-radius: 12px;
24
- padding: 40px;
25
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
26
- }
27
-
28
- .demo-title {
29
- font-size: 2rem;
30
- font-weight: 700;
31
- margin: 0 0 30px 0;
32
- color: #2d3748;
33
- text-align: center;
34
- }
35
-
36
- .demo-description {
37
- background: #e6fffa;
38
- border-left: 4px solid #38b2ac;
39
- padding: 20px;
40
- margin: 0 0 30px 0;
41
- border-radius: 0 8px 8px 0;
42
- }
43
-
44
- .demo-description h3 {
45
- margin: 0 0 15px 0;
46
- color: #2d3748;
47
- font-size: 1.2rem;
48
- }
49
-
50
- .shortcut-section {
51
- margin: 20px 0;
52
- }
53
-
54
- .shortcut-section h4 {
55
- margin: 0 0 10px 0;
56
- color: #2c7a7b;
57
- font-size: 1rem;
58
- }
59
-
60
- .shortcut-list {
61
- list-style: none;
62
- padding: 0;
63
- margin: 0;
64
- }
65
-
66
- .shortcut-item {
67
- display: flex;
68
- align-items: center;
69
- margin: 8px 0;
70
- padding: 6px 0;
71
- }
72
-
73
- .shortcut-key {
74
- background: #2d3748;
75
- color: white;
76
- padding: 3px 10px;
77
- border-radius: 5px;
78
- font-family: "Monaco", "Menlo", monospace;
79
- font-size: 0.8rem;
80
- font-weight: 600;
81
- margin-right: 12px;
82
- min-width: 50px;
83
- text-align: center;
84
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
85
- }
86
-
87
- .shortcut-description {
88
- color: #4a5568;
89
- flex: 1;
90
- font-size: 0.9rem;
91
- }
92
-
93
- .file-explorer {
94
- background: #f8f9fa;
95
- border: 2px solid #e9ecef;
96
- border-radius: 12px;
97
- padding: 20px;
98
- margin: 30px 0;
99
- }
100
-
101
- .explorer-title {
102
- margin: 0 0 20px 0;
103
- color: #2d3748;
104
- font-size: 1.3rem;
105
- text-align: center;
106
- }
107
-
108
- .file-list {
109
- list-style: none;
110
- padding: 0;
111
- margin: 0;
112
- border: 1px solid #d1d5db;
113
- border-radius: 6px;
114
- background: white;
115
- }
116
-
117
- .file-item {
118
- border-bottom: 1px solid #e5e7eb;
119
- padding: 0;
120
- }
121
-
122
- .file-item:last-child {
123
- border-bottom: none;
124
- }
125
-
126
- .file-link {
127
- display: block;
128
- padding: 12px 16px;
129
- text-decoration: none;
130
- color: #374151;
131
- transition: background-color 0.2s ease;
132
- }
133
-
134
- .file-link:hover {
135
- background-color: #f3f4f6;
136
- }
137
-
138
- .file-link:focus {
139
- outline: 2px solid #3b82f6;
140
- outline-offset: -2px;
141
- background-color: #dbeafe;
142
- }
143
-
144
- .file-icon {
145
- margin-right: 10px;
146
- font-size: 1.1rem;
147
- }
148
-
149
- .instructions {
150
- background: #fef7ff;
151
- border: 1px solid #e879f9;
152
- border-radius: 8px;
153
- padding: 20px;
154
- margin-top: 30px;
155
- }
156
-
157
- .instructions h4 {
158
- color: #a21caf;
159
- margin: 0 0 10px 0;
160
- font-size: 1rem;
161
- }
162
-
163
- .instructions p {
164
- margin: 5px 0;
165
- color: #744210;
166
- font-size: 0.9rem;
167
- }
168
-
169
- .status-display {
170
- background: #1f2937;
171
- color: #f9fafb;
172
- padding: 15px;
173
- border-radius: 8px;
174
- margin: 20px 0;
175
- font-family: "Monaco", "Menlo", monospace;
176
- font-size: 0.9rem;
177
- min-height: 60px;
178
- }
179
-
180
- .status-title {
181
- color: #9ca3af;
182
- margin-bottom: 8px;
183
- font-size: 0.8rem;
184
- text-transform: uppercase;
185
- letter-spacing: 0.5px;
186
- }
187
- </style>
188
- </head>
189
- <body>
190
- <div id="root"></div>
191
-
192
- <script type="module" jsenv-type="module/jsx">
193
- import { render } from "preact";
194
- import { useState, useRef } from "preact/hooks";
195
- import {
196
- // eslint-disable-next-line no-unused-vars
197
- Link,
198
- // eslint-disable-next-line no-unused-vars
199
- ShortcutProvider,
200
- // eslint-disable-next-line no-unused-vars
201
- SelectionProvider,
202
- } from "@jsenv/navi";
203
-
204
- // eslint-disable-next-line no-unused-vars
205
- const App = () => {
206
- const [status, setStatus] = useState("Ready - Try the shortcuts!");
207
- const [selection, setSelection] = useState([]);
208
- const [deletedFiles, setDeletedFiles] = useState([]);
209
-
210
- const containerShortcuts = [
211
- {
212
- key: "a",
213
- description: "Select all files",
214
- action: () => {
215
- setStatus("📋 Selected all files (container shortcut)");
216
- },
217
- },
218
- {
219
- key: "delete",
220
- description: "Delete selected files",
221
- action: async () => {
222
- setStatus("🗑ī¸ Start deleting files (container shortcut)");
223
- await new Promise((resolve) => setTimeout(resolve, 2_000));
224
- setStatus(
225
- "🗑ī¸ Selected files deletion done! (container shortcut)",
226
- );
227
- },
228
- confirmMessage: "Are you sure you want to delete selected files?",
229
- },
230
- {
231
- key: "r",
232
- description: "Refresh file list",
233
- action: () => {
234
- setStatus("🔄 Refreshed file list (container shortcut)");
235
- },
236
- },
237
- ];
238
-
239
- const files = [
240
- { name: "document.pdf", icon: "📄", type: "PDF Document" },
241
- { name: "image.jpg", icon: "đŸ–ŧī¸", type: "JPEG Image" },
242
- { name: "video.mp4", icon: "đŸŽĨ", type: "MP4 Video" },
243
- { name: "archive.zip", icon: "đŸ“Ļ", type: "ZIP Archive" },
244
- ];
245
-
246
- const elementRef = useRef();
247
-
248
- return (
249
- <div className="demo-container">
250
- <h1 className="demo-title">🔗 Nested Shortcuts Demo</h1>
251
-
252
- <div className="demo-description">
253
- <h3>Container vs Link Shortcuts:</h3>
254
-
255
- <div className="shortcut-section">
256
- <h4>
257
- 📁 Container Shortcuts (work anywhere in file explorer):
258
- </h4>
259
- <ul className="shortcut-list">
260
- <li className="shortcut-item">
261
- <span className="shortcut-key">a</span>
262
- <span className="shortcut-description">
263
- Select all files
264
- </span>
265
- </li>
266
- <li className="shortcut-item">
267
- <span className="shortcut-key">Delete</span>
268
- <span className="shortcut-description">
269
- Delete selected files
270
- </span>
271
- </li>
272
- <li className="shortcut-item">
273
- <span className="shortcut-key">r</span>
274
- <span className="shortcut-description">
275
- Refresh file list
276
- </span>
277
- </li>
278
- </ul>
279
- </div>
280
-
281
- <div className="shortcut-section">
282
- <h4>🔗 Link Shortcuts (work only when link is focused):</h4>
283
- <ul className="shortcut-list">
284
- <li className="shortcut-item">
285
- <span className="shortcut-key">Enter</span>
286
- <span className="shortcut-description">
287
- Open/download file
288
- </span>
289
- </li>
290
- <li className="shortcut-item">
291
- <span className="shortcut-key">Space</span>
292
- <span className="shortcut-description">Preview file</span>
293
- </li>
294
- <li className="shortcut-item">
295
- <span className="shortcut-key">i</span>
296
- <span className="shortcut-description">Show file info</span>
297
- </li>
298
- </ul>
299
- </div>
300
- </div>
301
-
302
- <div className="status-display">
303
- <div className="status-title">Action Status:</div>
304
- <div>{status}</div>
305
- </div>
306
-
307
- <div className="file-explorer">
308
- <h2 className="explorer-title">📁 File Explorer</h2>
309
-
310
- <SelectionProvider
311
- value={selection}
312
- onChange={(value) => {
313
- setSelection(value);
314
- }}
315
- >
316
- <ShortcutProvider
317
- elementRef={elementRef}
318
- shortcuts={containerShortcuts}
319
- onActionStart={() => {
320
- setDeletedFiles(selection);
321
- }}
322
- onActionEnd={() => {
323
- setDeletedFiles([]);
324
- }}
325
- >
326
- <ul className="file-list" ref={elementRef}>
327
- {files.map((file) => (
328
- <li key={file.name} className="file-item">
329
- <Link
330
- className="file-link"
331
- href="#"
332
- value={file.name}
333
- readOnly={deletedFiles.includes(file.name)}
334
- loading={deletedFiles.includes(file.name)}
335
- shortcuts={[
336
- {
337
- key: "enter",
338
- description: `Open ${file.name}`,
339
- action: () => {
340
- setStatus(
341
- `📂 Opening ${file.name} (link shortcut)`,
342
- );
343
- },
344
- },
345
- {
346
- key: "space",
347
- description: `Preview ${file.name}`,
348
- action: () => {
349
- setStatus(
350
- `👁ī¸ Previewing ${file.name} (link shortcut)`,
351
- );
352
- },
353
- },
354
- {
355
- key: "i",
356
- description: `Info for ${file.name}`,
357
- action: () => {
358
- setStatus(
359
- `ℹī¸ Info: ${file.name} - ${file.type} (link shortcut)`,
360
- );
361
- },
362
- },
363
- ]}
364
- >
365
- <span className="file-icon">{file.icon}</span>
366
- {file.name}
367
- </Link>
368
- </li>
369
- ))}
370
- </ul>
371
- </ShortcutProvider>
372
- </SelectionProvider>
373
- </div>
374
-
375
- <div className="instructions">
376
- <h4>đŸŽ¯ How to Test:</h4>
377
- <p>
378
- <strong>Container shortcuts:</strong> Click anywhere in the file
379
- explorer area, then press 'a', 'Delete', or 'r'
380
- </p>
381
- <p>
382
- <strong>Link shortcuts:</strong> Tab to focus a specific file,
383
- then press 'Enter', 'Space', or 'i'
384
- </p>
385
- <p>
386
- <strong>Precedence:</strong> When a link is focused, link
387
- shortcuts take priority over container shortcuts
388
- </p>
389
- <p>
390
- <strong>Status display:</strong> Watch the black box above to
391
- see which shortcuts are triggered
392
- </p>
393
- </div>
394
- </div>
395
- );
396
- };
397
-
398
- render(<App />, document.getElementById("root"));
399
- </script>
400
- </body>
401
- </html>