@jsenv/navi 0.10.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/dist/jsenv_navi.js +13858 -23295
  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 -177
  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/8_editable_demo.html DELETED
@@ -1,431 +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>Editable Text Demo</title>
8
- <style>
9
- body {
10
- font-family:
11
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12
- max-width: 1400px;
13
- margin: 0 auto;
14
- padding: 20px;
15
- background-color: #f8f9fa;
16
- }
17
-
18
- h1 {
19
- text-align: center;
20
- color: #333;
21
- margin-bottom: 30px;
22
- }
23
-
24
- .demo-grid {
25
- display: grid;
26
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
27
- gap: 20px;
28
- }
29
-
30
- .demo-card {
31
- background: white;
32
- border-radius: 8px;
33
- padding: 20px;
34
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
35
- border: 1px solid #e1e8ed;
36
- }
37
-
38
- .demo-title {
39
- color: #2c3e50;
40
- margin-top: 0;
41
- margin-bottom: 15px;
42
- font-size: 18px;
43
- font-weight: 600;
44
- border-bottom: 2px solid #3498db;
45
- padding-bottom: 8px;
46
- }
47
-
48
- .control-group {
49
- margin-bottom: 15px;
50
- }
51
-
52
- label {
53
- display: block;
54
- margin-bottom: 5px;
55
- font-weight: 500;
56
- color: #555;
57
- }
58
-
59
- .button-group {
60
- display: flex;
61
- gap: 8px;
62
- margin-top: 12px;
63
- flex-wrap: wrap;
64
- }
65
-
66
- button {
67
- padding: 6px 12px;
68
- border: 1px solid #3498db;
69
- background: #3498db;
70
- color: white;
71
- border-radius: 4px;
72
- cursor: pointer;
73
- font-size: 14px;
74
- transition: all 0.2s ease;
75
- box-sizing: border-box;
76
- }
77
-
78
- button:hover {
79
- background: #2980b9;
80
- border-color: #2980b9;
81
- }
82
-
83
- button:disabled {
84
- background: #95a5a6;
85
- border-color: #95a5a6;
86
- cursor: not-allowed;
87
- }
88
-
89
- .editable-container {
90
- margin: 15px 0;
91
- padding: 15px;
92
- background: #f8f9fa;
93
- border: 1px solid #dee2e6;
94
- border-radius: 6px;
95
- min-height: 40px;
96
- font-size: 16px;
97
- line-height: 1.4;
98
- position: relative;
99
- }
100
-
101
- .result-display {
102
- background: #f8f9fa;
103
- border: 1px solid #dee2e6;
104
- border-radius: 4px;
105
- padding: 12px;
106
- margin-top: 15px;
107
- font-family:
108
- "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono",
109
- "Droid Sans Mono", "Courier New", monospace;
110
- font-size: 13px;
111
- color: #495057;
112
- min-height: 20px;
113
- white-space: pre-wrap;
114
- }
115
-
116
- .result-success {
117
- background: #d4edda;
118
- border-color: #c3e6cb;
119
- color: #155724;
120
- }
121
-
122
- .result-error {
123
- background: #f8d7da;
124
- border-color: #f5c6cb;
125
- color: #721c24;
126
- }
127
-
128
- .result-loading {
129
- background: #d1ecf1;
130
- border-color: #bee5eb;
131
- color: #0c5460;
132
- animation: pulse 1.5s ease-in-out infinite;
133
- }
134
-
135
- @keyframes pulse {
136
- 0%,
137
- 100% {
138
- opacity: 1;
139
- }
140
- 50% {
141
- opacity: 0.7;
142
- }
143
- }
144
-
145
- @media (max-width: 768px) {
146
- .demo-grid {
147
- grid-template-columns: 1fr;
148
- }
149
- }
150
- </style>
151
- </head>
152
- <body>
153
- <h1>Editable Text Demo</h1>
154
- <div id="root"></div>
155
-
156
- <script type="module" jsenv-type="module/jsx">
157
- import { render } from "preact";
158
- import { useState } from "preact/hooks";
159
- import { signal } from "@preact/signals";
160
- import {
161
- SINGLE_SPACE_CONSTRAINT,
162
- useEditionController,
163
- // eslint-disable-next-line no-unused-vars
164
- Editable,
165
- createAction,
166
- } from "@jsenv/navi";
167
-
168
- // eslint-disable-next-line no-unused-vars
169
- const App = () => {
170
- return (
171
- <div className="demo-grid">
172
- <BasicDemo />
173
- <LoadingDemo />
174
- <ErrorDemo />
175
- <CustomStyleDemo />
176
- <ActionObjectDemo />
177
- </div>
178
- );
179
- };
180
-
181
- // eslint-disable-next-line no-unused-vars
182
- const BasicDemo = () => {
183
- const { editing, startEditing, stopEditing } = useEditionController();
184
- const [value, setValue] = useState("Click edit to change this text");
185
- const [result, setResult] = useState("");
186
-
187
- return (
188
- <div className="demo-card">
189
- <h3 className="demo-title">Basic Editable Text</h3>
190
- <div className="control-group">
191
- <label>Editable Content:</label>
192
- <div className="editable-container">
193
- <Editable
194
- editing={editing}
195
- onEditEnd={() => {
196
- stopEditing();
197
- setResult(``);
198
- }}
199
- value={value}
200
- action={(newText) => {
201
- setValue(newText);
202
- return `Updated to: "${newText}"`;
203
- }}
204
- constraints={[SINGLE_SPACE_CONSTRAINT]}
205
- />
206
- </div>
207
- </div>
208
- <div className="button-group">
209
- <button onClick={() => startEditing()} disabled={editing}>
210
- {editing ? "Editing..." : "Start Editing"}
211
- </button>
212
- </div>
213
- <div
214
- className={`result-display ${result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
215
- >
216
- Current value: "{value}"
217
- <br />
218
- {result || "Click 'Start Editing' to modify the text..."}
219
- </div>
220
- </div>
221
- );
222
- };
223
-
224
- // eslint-disable-next-line no-unused-vars
225
- const LoadingDemo = () => {
226
- const { editing, startEditing, stopEditing } = useEditionController();
227
- const [value, setValue] = useState("This will take 2 seconds to save");
228
- const [result, setResult] = useState("");
229
- const [isLoading, setIsLoading] = useState(false);
230
-
231
- return (
232
- <div className="demo-card">
233
- <h3 className="demo-title">Editable Text with Loading</h3>
234
- <div className="control-group">
235
- <label>Editable Content (2s delay):</label>
236
- <div className="editable-container">
237
- <Editable
238
- editing={editing}
239
- onEditEnd={() => {
240
- stopEditing();
241
- setIsLoading(false);
242
- setResult();
243
- }}
244
- value={value}
245
- action={async (newText) => {
246
- setIsLoading(true);
247
- setResult("Saving...");
248
- await new Promise((resolve) => setTimeout(resolve, 2000));
249
- setValue(newText);
250
- return `Saved: "${newText}"`;
251
- }}
252
- constraints={[SINGLE_SPACE_CONSTRAINT]}
253
- />
254
- </div>
255
- </div>
256
- <div className="button-group">
257
- <button
258
- onClick={() => startEditing()}
259
- disabled={editing || isLoading}
260
- >
261
- {isLoading
262
- ? "Saving..."
263
- : editing
264
- ? "Editing..."
265
- : "Start Editing"}
266
- </button>
267
- </div>
268
- <div
269
- className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
270
- >
271
- Current value: "{value}"
272
- <br />
273
- {result || "This demo simulates a 2-second save operation..."}
274
- </div>
275
- </div>
276
- );
277
- };
278
-
279
- // eslint-disable-next-line no-unused-vars
280
- const ErrorDemo = () => {
281
- const { editing, startEditing, stopEditing } = useEditionController();
282
- const [value] = useState("This edit will always fail");
283
- const [result, setResult] = useState("");
284
-
285
- return (
286
- <div className="demo-card">
287
- <h3 className="demo-title">Editable Text with Error Handling</h3>
288
- <div className="control-group">
289
- <label>Editable Content (always fails):</label>
290
- <div className="editable-container">
291
- <Editable
292
- editing={editing}
293
- onEditEnd={() => {
294
- stopEditing();
295
- setResult("");
296
- }}
297
- value={value}
298
- name="errorText"
299
- action={async (newText) => {
300
- setResult("Processing...");
301
- await new Promise((resolve) => setTimeout(resolve, 500));
302
- throw new Error(
303
- `Cannot save "${newText}" - simulated error`,
304
- );
305
- }}
306
- constraints={[SINGLE_SPACE_CONSTRAINT]}
307
- />
308
- </div>
309
- </div>
310
- <div className="button-group">
311
- <button onClick={() => startEditing()} disabled={editing}>
312
- {editing ? "Editing..." : "Start Editing (Will Fail)"}
313
- </button>
314
- </div>
315
- <div
316
- className={`result-display ${result === "Processing..." ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
317
- >
318
- Current value: "{value}"
319
- <br />
320
- {result || "This demo always throws an error when saving..."}
321
- </div>
322
- </div>
323
- );
324
- };
325
-
326
- // eslint-disable-next-line no-unused-vars
327
- const CustomStyleDemo = () => {
328
- const { editing, startEditing, stopEditing } = useEditionController();
329
- const [value, setValue] = useState("Bold styled text");
330
- const [result, setResult] = useState("");
331
-
332
- return (
333
- <div className="demo-card">
334
- <h3 className="demo-title">Editable Text with Custom Styling</h3>
335
- <div className="control-group">
336
- <label>Styled Editable Content:</label>
337
- <div className="editable-container">
338
- <Editable
339
- editing={editing}
340
- onEditEnd={() => {
341
- stopEditing();
342
- setResult("");
343
- }}
344
- value={value}
345
- action={(newText) => {
346
- setValue(newText);
347
- return `Updated styled text: "${newText}"`;
348
- }}
349
- constraints={[SINGLE_SPACE_CONSTRAINT]}
350
- >
351
- <strong style={{ color: "#e74c3c", fontSize: "18px" }}>
352
- {value}
353
- </strong>
354
- </Editable>
355
- </div>
356
- </div>
357
- <div className="button-group">
358
- <button onClick={() => startEditing()} disabled={editing}>
359
- {editing ? "Editing..." : "Start Editing"}
360
- </button>
361
- </div>
362
- <div
363
- className={`result-display ${result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
364
- >
365
- Current value: "{value}"
366
- <br />
367
- {result || "This demo shows custom styling with bold red text..."}
368
- </div>
369
- </div>
370
- );
371
- };
372
-
373
- // Create signal outside component to persist across renders
374
- const editableTextSignal = signal("Click me to edit");
375
- const updateTextAction = createAction(async (newText) => {
376
- await new Promise((resolve) => setTimeout(resolve, 800));
377
- editableTextSignal.value = newText;
378
- return `Signal update: "${newText}"`;
379
- });
380
- // eslint-disable-next-line no-unused-vars
381
- const ActionObjectDemo = () => {
382
- const [result, setResult] = useState("");
383
- const { editing, startEditing, stopEditing } = useEditionController();
384
-
385
- return (
386
- <div className="demo-card">
387
- <h3 className="demo-title">Action object editable Text</h3>
388
- <div className="control-group">
389
- <label>Content:</label>
390
- <div className="editable-container">
391
- <Editable
392
- editing={editing}
393
- onEditEnd={() => {
394
- stopEditing();
395
- setResult("");
396
- }}
397
- value={editableTextSignal.value}
398
- name="signalText"
399
- action={(newText) => {
400
- updateTextAction(newText);
401
- }}
402
- onActionStart={() => {
403
- setResult("Saving...");
404
- }}
405
- constraints={[SINGLE_SPACE_CONSTRAINT]}
406
- >
407
- <span
408
- onClick={() => {
409
- startEditing();
410
- }}
411
- >
412
- {editableTextSignal.value}
413
- </span>
414
- </Editable>
415
- </div>
416
- </div>
417
- <div
418
- className={`result-display ${result === "Saving..." ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
419
- >
420
- Current value: {editableTextSignal.value}
421
- <br />
422
- {result || "Use buttons to control edit mode..."}
423
- </div>
424
- </div>
425
- );
426
- };
427
-
428
- render(<App />, document.querySelector("#root"));
429
- </script>
430
- </body>
431
- </html>
package/src/components/demos/action/9_link_demo.html DELETED
@@ -1,194 +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>Link demo</title>
8
- </head>
9
- <body>
10
- <div id="root" style="position: relative"></div>
11
-
12
- <script type="module" jsenv-type="module/jsx">
13
- import { render } from "preact";
14
- import { useState, useRef } from "preact/hooks";
15
-
16
- import {
17
- // eslint-disable-next-line no-unused-vars
18
- Link,
19
- useSelectionController,
20
- // eslint-disable-next-line no-unused-vars
21
- SelectionContext,
22
- defineRoutes,
23
- } from "@jsenv/navi";
24
-
25
- defineRoutes({});
26
-
27
- // eslint-disable-next-line no-unused-vars
28
- const App = () => {
29
- return (
30
- <div style="padding: 20px; font-family: system-ui, sans-serif; max-width: 800px;">
31
- <h1>Link Component Demo</h1>
32
-
33
- <section style="margin-bottom: 40px;">
34
- <h2>Basic Links</h2>
35
- <div style="display: flex; flex-direction: column; gap: 12px;">
36
- <Link href="#default">Default link</Link>
37
-
38
- <Link href="#active" active>
39
- Active link
40
- </Link>
41
-
42
- <Link href="#visited" visited>
43
- Visited link
44
- </Link>
45
-
46
- <Link href="#readonly" readOnly>
47
- Read-only link
48
- </Link>
49
-
50
- <Link href="#disabled" disabled>
51
- Disabled link
52
- </Link>
53
-
54
- <Link href="#loading" loading readOnly>
55
- Loading link
56
- </Link>
57
- </div>
58
- </section>
59
-
60
- <section style="margin-bottom: 40px;">
61
- <h2>Styled Links</h2>
62
- <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; background: #f8f9fa;">
63
- <div style="display: flex; flex-direction: column; gap: 12px;">
64
- <Link
65
- href="#"
66
- style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; display: inline-block; transition: transform 0.2s;"
67
- >
68
- Gradient button link
69
- </Link>
70
-
71
- <Link
72
- href="#"
73
- style="background: #28a745; color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; display: inline-block; transition: transform 0.2s;"
74
- >
75
- Success button link
76
- </Link>
77
-
78
- <Link
79
- href="#"
80
- style="background: #dc3545; color: white; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; display: inline-block; transition: transform 0.2s;"
81
- data-outline-inset
82
- loading
83
- >
84
- Loading button link
85
- </Link>
86
- </div>
87
- </div>
88
- </section>
89
-
90
- <SelectableLinkDemo />
91
-
92
- <section>
93
- <h2>Navigation Instructions</h2>
94
- <div style="background: #f8f9fa; padding: 16px; border-radius: 6px; color: #666;">
95
- <ul style="margin: 0; padding-left: 20px;">
96
- <li>
97
- <strong>Normal click:</strong> Navigate to the link
98
- </li>
99
- <li>
100
- <strong>Cmd/Ctrl + click:</strong> Toggle selection (for
101
- selectable links)
102
- </li>
103
- <li>
104
- <strong>Shift + click:</strong> Range selection (for
105
- selectable links)
106
- </li>
107
- <li>
108
- <strong>Cmd/Ctrl + Delete/Backspace:</strong> Show alert
109
- with selected items (when focused on a selectable link)
110
- </li>
111
- </ul>
112
- </div>
113
- </section>
114
- </div>
115
- );
116
- };
117
-
118
- // eslint-disable-next-line no-unused-vars
119
- const SelectableLinkDemo = () => {
120
- const [selection, setSelection] = useState([]);
121
- const linkContainerRef = useRef(null);
122
- const selectionController = useSelectionController({
123
- elementRef: linkContainerRef,
124
- layout: "vertical",
125
- value: selection,
126
- onChange: setSelection,
127
- });
128
-
129
- return (
130
- <section style="margin-bottom: 40px;">
131
- <h2>Selectable Links</h2>
132
- <p style="color: #666; margin-bottom: 16px;">
133
- Using Selection context for centralized state management.{" "}
134
- <kbd style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em;">
135
- Cmd/Ctrl + Click
136
- </kbd>{" "}
137
- to multi-select,{" "}
138
- <kbd style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em;">
139
- Shift + Click
140
- </kbd>{" "}
141
- for range selection, and{" "}
142
- <kbd style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em;">
143
- Cmd/Ctrl + Delete
144
- </kbd>{" "}
145
- to show selected items.
146
- </p>
147
-
148
- <SelectionContext.Provider
149
- value={{ selection, selectionController }}
150
- >
151
- <div style="border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; background: white;">
152
- <div
153
- style="display: flex; flex-direction: column; gap: 8px;"
154
- ref={linkContainerRef}
155
- >
156
- <Link href="#doc_report" name="doc" value="doc-1">
157
- 📋 Annual Report 2024
158
- </Link>
159
-
160
- <Link href="#doc_budget" name="doc" value="doc-2">
161
- 💰 Budget Proposal
162
- </Link>
163
-
164
- <Link href="#doc_presentation" name="doc" value="doc-3">
165
- 🎯 Marketing Presentation
166
- </Link>
167
-
168
- <Link href="#doc_manual" name="doc" value="doc-4">
169
- 📖 User Manual v2.0
170
- </Link>
171
- </div>
172
-
173
- {selection.length > 0 && (
174
- <div style="margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border-left: 4px solid #1976d2;">
175
- <strong>Selected items:</strong> {selection.join(", ")}
176
- <br />
177
- <button
178
- onClick={() => setSelection([])}
179
- style="margin-top: 8px; padding: 4px 12px; background: #1976d2; color: white; border: none; border-radius: 4px; font-size: 0.9em; cursor: pointer;"
180
- >
181
- Clear selection
182
- </button>
183
- </div>
184
- )}
185
- </div>
186
- </SelectionContext.Provider>
187
- </section>
188
- );
189
- };
190
-
191
- render(<App />, document.querySelector("#root"));
192
- </script>
193
- </body>
194
- </html>
package/src/components/demos/demo.md DELETED
File without changes
package/src/components/demos/route/basic/basic.html DELETED
@@ -1,14 +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>Routing demo</title>
8
- </head>
9
- <body>
10
- <div id="root"></div>
11
-
12
- <script type="module" src="./basic_route_demo.jsx"></script>
13
- </body>
14
- </html>