npm - @jsenv/navi - Versions diffs - 0.10.1 → 0.11.0 - Mend

@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

package/dist/jsenv_navi.js +13858 -23295
package/dist/jsenv_navi.js.map +1281 -0
package/package.json +5 -7
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 -177
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/demos/action/5_input_checkbox_state_demo.html DELETED Viewed

@@ -1,270 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="data:," />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Input Checkbox State Demo</title>
-  </head>
-  <body>
-    <div id="root" style="position: relative"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState } from "preact/hooks";
-      import {
-        // eslint-disable-next-line no-unused-vars
-        Button,
-        // eslint-disable-next-line no-unused-vars
-        Form,
-        // eslint-disable-next-line no-unused-vars
-        Label,
-        // eslint-disable-next-line no-unused-vars
-        Checkbox,
-      } from "@jsenv/navi";
-      // eslint-disable-next-line no-unused-vars
-      const App = () => {
-        return (
-          <div style="display: flex; flex-direction: column; gap: 40px">
-            <SingleCheckboxStateDemo />
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const SingleCheckboxStateDemo = () => {
-        // DATA STATE - This represents the actual data/server state
-        const [isEnabledInState, setIsEnabledInState] = useState(true);
-        const [checkboxBgColor, setCheckboxBgColor] = useState("#2196F3");
-        // UI FORM STATE - This represents the current form state (may differ from data state)
-        const [uiIsEnabled, setUiIsEnabled] = useState(isEnabledInState);
-        // Form submission feedback
-        const [isSubmitting, setIsSubmitting] = useState(false);
-        const [submitMessage, setSubmitMessage] = useState("");
-        const [submitError, setSubmitError] = useState("");
-        const [forceError, setForceError] = useState(false);
-        // Action that simulates submitting form data (takes 1s)
-        const submitForm = async ({ notifications }) => {
-          const isChecked = notifications === "on"; // Form checkbox value
-          setIsSubmitting(true);
-          setSubmitError("");
-          setSubmitMessage(
-            `Syncing notification setting: ${isChecked ? "enabled" : "disabled"}...`,
-          );
-          try {
-            console.log("Submitting form data:", { notifications: isChecked });
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-            // Simulate error if checkbox is checked
-            if (forceError) {
-              throw new Error(
-                "Simulated server error: Failed to update notification preferences",
-              );
-            }
-            // Update the data state to match the form submission
-            setIsEnabledInState(isChecked);
-            setSubmitMessage(
-              `✅ Successfully synced: notifications ${isChecked ? "enabled" : "disabled"}`,
-            );
-            console.log("Data state updated from form:", isChecked);
-          } catch (error) {
-            setSubmitError(error.message);
-            setSubmitMessage("");
-          } finally {
-            setIsSubmitting(false);
-          }
-        };
-        // Get what the reset would sync to
-        const getResetValue = () => {
-          return isEnabledInState ? "checked" : "unchecked";
-        };
-        // Get what the submit would send
-        const getSubmitValue = () => {
-          return uiIsEnabled ? "checked" : "unchecked";
-        };
-        return (
-          <div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; background: #f9f9f9;">
-            <h2>Single Checkbox State ↔ UI Form Demo</h2>
-            <div style="display: flex; gap: 20px; margin: 20px 0;">
-              {/* DATA STATE SECTION */}
-              <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
-                <h3 style="margin: 0 0 15px 0; color: #2196F3;">
-                  🗄️ Data State
-                </h3>
-                <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
-                  Direct manipulation of the data source
-                </p>
-                <div style="padding: 15px; border: 1px solid #eee; border-radius: 4px; background: #fafafa;">
-                  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; cursor: pointer;">
-                      <input
-                        type="checkbox"
-                        checked={isEnabledInState}
-                        onChange={(e) => setIsEnabledInState(e.target.checked)}
-                        style="transform: scale(1.2);"
-                      />
-                      🔔 Notifications{" "}
-                      {isEnabledInState ? "ENABLED" : "DISABLED"}
-                    </label>
-                  </div>
-                  <div style="margin-bottom: 15px;">
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 14px;">
-                      <span style="font-weight: 500;">UI Checkbox Color:</span>
-                      <select
-                        value={checkboxBgColor}
-                        onChange={(e) => setCheckboxBgColor(e.target.value)}
-                        style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px;"
-                      >
-                        <option value="#2196F3">Blue</option>
-                        <option value="#4CAF50">Green</option>
-                        <option value="#FF9800">Orange</option>
-                        <option value="#9C27B0">Purple</option>
-                        <option value="#F44336">Red</option>
-                        <option value="#607D8B">Blue Grey</option>
-                        <option value="#795548">Brown</option>
-                        <option value="#E91E63">Pink</option>
-                      </select>
-                      <div
-                        style={{
-                          width: "16px",
-                          height: "16px",
-                          backgroundColor: checkboxBgColor,
-                          borderRadius: "2px",
-                          border: "1px solid #ccc",
-                        }}
-                        title="Current color preview"
-                      ></div>
-                    </label>
-                  </div>
-                  <div style="font-size: 12px; color: #666; margin-top: 8px;">
-                    Click the checkbox above to toggle the data state directly
-                  </div>
-                </div>
-              </div>
-              {/* UI FORM SECTION */}
-              <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
-                <h3 style="margin: 0 0 15px 0; color: #FF9800;">📝 UI Form</h3>
-                <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
-                  Checkbox interface for user interaction
-                </p>
-                <Form action={submitForm}>
-                  <fieldset style="border: 1px solid #ddd; padding: 15px; border-radius: 4px;">
-                    <legend>Notification Settings:</legend>
-                    <Label style="display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer;">
-                      <Checkbox
-                        name="notifications"
-                        checked={isEnabledInState}
-                        onUIStateChange={(uiState) =>
-                          setUiIsEnabled(Boolean(uiState))
-                        }
-                        accentColor={checkboxBgColor}
-                      />
-                      🔔 Enable push notifications
-                    </Label>
-                  </fieldset>
-                  {/* Error simulation checkbox */}
-                  <div style="margin: 10px 0; padding: 8px; background: #ffebee; border-radius: 4px; border: 1px solid #ffcdd2;">
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d32f2f;">
-                      <input
-                        type="checkbox"
-                        checked={forceError}
-                        onChange={(e) => setForceError(e.target.checked)}
-                        style="margin: 0;"
-                      />
-                      🔧 Force submission error (for testing)
-                    </label>
-                  </div>
-                  {/* Submission feedback messages */}
-                  {(isSubmitting || submitMessage || submitError) && (
-                    <div style="margin: 10px 0; padding: 10px; border-radius: 4px; font-size: 14px;">
-                      {isSubmitting && (
-                        <div style="color: #1976d2; background: #e3f2fd; padding: 8px; border-radius: 3px; border-left: 3px solid #1976d2;">
-                          🔄 {submitMessage}
-                        </div>
-                      )}
-                      {!isSubmitting && submitMessage && (
-                        <div style="color: #388e3c; background: #e8f5e8; padding: 8px; border-radius: 3px; border-left: 3px solid #388e3c;">
-                          {submitMessage}
-                        </div>
-                      )}
-                      {submitError && (
-                        <div style="color: #d32f2f; background: #ffebee; padding: 8px; border-radius: 3px; border-left: 3px solid #d32f2f;">
-                          ❌ {submitError}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  <div style="margin-top: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;">
-                    <Button type="submit" disabled={isSubmitting}>
-                      {isSubmitting ? "⏳ Submitting..." : "📤 Submit Form"}{" "}
-                      {!isSubmitting && (
-                        <span style="font-size: 11px; opacity: 0.7;">
-                          ({getSubmitValue()})
-                        </span>
-                      )}
-                    </Button>
-                    <Button type="reset">
-                      🔄 Reset to State
-                      <span style="font-size: 11px; opacity: 0.7;">
-                        ({getResetValue()})
-                      </span>
-                    </Button>
-                  </div>
-                </Form>
-              </div>
-            </div>
-            <div style="background: #f0f8ff; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #2196F3;">
-              <h4 style="margin: 0 0 10px 0;">How it works:</h4>
-              <ul style="margin: 0; padding-left: 20px; font-size: 14px;">
-                <li>
-                  <strong>Data State</strong>: The actual notification setting
-                  with direct toggle button
-                </li>
-                <li>
-                  <strong>UI Form</strong>: Checkbox interface that can differ
-                  from the data state
-                </li>
-                <li>
-                  <strong>Submit</strong>: Updates data state to match the form
-                  checkbox selection
-                </li>
-                <li>
-                  <strong>Reset</strong>: Syncs form checkbox back to current
-                  data state
-                </li>
-                <li>
-                  <strong>Button Labels</strong>: Show exactly what will be
-                  submitted or reset to (checked/unchecked)
-                </li>
-              </ul>
-            </div>
-          </div>
-        );
-      };
-      render(<App />, document.querySelector("#root"));
-    </script>
-  </body>
-</html>

package/src/components/demos/action/6_checkbox_list_demo.html DELETED Viewed

@@ -1,341 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="data:," />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Checkbox list demo</title>
-  </head>
-  <body>
-    <div id="root" style="position: relative"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState } from "preact/hooks";
-      import {
-        // eslint-disable-next-line no-unused-vars
-        Button,
-        // eslint-disable-next-line no-unused-vars
-        Form,
-        // eslint-disable-next-line no-unused-vars
-        CheckboxList,
-        // eslint-disable-next-line no-unused-vars
-        Label,
-        // eslint-disable-next-line no-unused-vars
-        Checkbox,
-      } from "@jsenv/navi";
-      // eslint-disable-next-line no-unused-vars
-      const App = () => {
-        return (
-          <div style="display: flex; flex-direction: column; gap: 40px">
-            <DynamicCheckboxListDemo />
-            <div style="display: flex; flex-direction: row; gap: 30px"></div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DynamicCheckboxListDemo = () => {
-        // Available color choices with their selection state
-        const [colorChoices, setColorChoices] = useState([
-          { id: 1, color: "red", selected: true },
-          { id: 2, color: "blue", selected: true },
-          { id: 3, color: "green", selected: false },
-        ]);
-        // Derived state: currently selected colors in data state
-        const selectedColors = colorChoices
-          .filter((choice) => choice.selected)
-          .map((choice) => choice.color);
-        // UI FORM STATE - This represents the current form state (may differ from data state)
-        const [uiSelectedColors, setUiSelectedColors] =
-          useState(selectedColors);
-        // Next ID for new colors
-        const [nextId, setNextId] = useState(4);
-        // Form submission feedback
-        const [isSubmitting, setIsSubmitting] = useState(false);
-        const [submitMessage, setSubmitMessage] = useState("");
-        const [submitError, setSubmitError] = useState("");
-        const [forceError, setForceError] = useState(false);
-        // Random colors pool
-        const randomColors = [
-          "purple",
-          "orange",
-          "yellow",
-          "pink",
-          "cyan",
-          "magenta",
-          "lime",
-          "indigo",
-          "coral",
-          "teal",
-          "gold",
-          "silver",
-          "navy",
-          "maroon",
-        ];
-        // Action that simulates submitting form data (takes 1s)
-        const submitForm = async ({ colors }) => {
-          setIsSubmitting(true);
-          setSubmitError("");
-          setSubmitMessage(
-            `Syncing colors: ${colors?.length ? colors.join(", ") : "none"}...`,
-          );
-          try {
-            console.log("Submitting form data:", colors);
-            await new Promise((resolve) => setTimeout(resolve, 1000000));
-            // Simulate error if checkbox is checked
-            if (forceError) {
-              throw new Error(
-                "Simulated server error: Failed to update color preferences",
-              );
-            }
-            // Update the data state to match the form submission
-            setColorChoices((prev) =>
-              prev.map((choice) => ({
-                ...choice,
-                selected: colors?.includes(choice.color) || false,
-              })),
-            );
-            setSubmitMessage(
-              `✅ Successfully synced: ${colors?.length ? colors.join(", ") : "none"}`,
-            );
-            console.log("Data state updated from form:", colors);
-          } catch (error) {
-            setSubmitError(error.message);
-            setSubmitMessage("");
-          } finally {
-            setIsSubmitting(false);
-          }
-        };
-        // Add a new color to the data state
-        const addColorToState = (color) => {
-          setColorChoices((prev) => [
-            ...prev,
-            { id: nextId, color, selected: false },
-          ]);
-          setNextId((prev) => prev + 1);
-        };
-        // Remove a color from the data state
-        const removeColorFromState = (colorId) => {
-          setColorChoices((prev) =>
-            prev.filter((choice) => choice.id !== colorId),
-          );
-        };
-        // Toggle selection state in the data state
-        const toggleColorInState = (colorId) => {
-          setColorChoices((prev) =>
-            prev.map((choice) =>
-              choice.id === colorId
-                ? { ...choice, selected: !choice.selected }
-                : choice,
-            ),
-          );
-        };
-        // Get the colors that reset would sync to
-        const getResetColors = () => {
-          return colorChoices
-            .filter((choice) => choice.selected)
-            .map((choice) => choice.color);
-        }; // Add a random color choice to the data state
-        const addRandomColor = () => {
-          const availableColors = randomColors.filter(
-            (color) => !colorChoices.some((choice) => choice.color === color),
-          );
-          if (availableColors.length > 0) {
-            const randomColor =
-              availableColors[
-                Math.floor(Math.random() * availableColors.length)
-              ];
-            addColorToState(randomColor);
-          }
-        };
-        return (
-          <div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; background: #f9f9f9;">
-            <h2>State ↔ UI Form Demo</h2>
-            <div style="display: flex; gap: 20px; margin: 20px 0;">
-              {/* DATA STATE SECTION */}
-              <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
-                <h3 style="margin: 0 0 15px 0; color: #2196F3;">
-                  🗄️ Data State
-                </h3>
-                <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
-                  Direct manipulation of the data source
-                </p>
-                <div style="margin-bottom: 15px;">
-                  <button
-                    onClick={addRandomColor}
-                    style="padding: 6px 12px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin-right: 8px;"
-                  >
-                    + Add Random Color
-                  </button>
-                </div>
-                <div style="display: flex; flex-direction: column; gap: 8px;">
-                  {colorChoices.map(({ id, color, selected }) => (
-                    <div
-                      key={id}
-                      style="display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #eee; border-radius: 3px; background: #fafafa;"
-                    >
-                      <span style="flex: 1; font-size: 14px;">
-                        {color.charAt(0).toUpperCase() + color.slice(1)}
-                      </span>
-                      <button
-                        onClick={() => toggleColorInState(id)}
-                        style={{
-                          padding: "4px 8px",
-                          fontSize: "11px",
-                          background: selected ? "#4CAF50" : "#ccc",
-                          color: "white",
-                          border: "none",
-                          borderRadius: "3px",
-                          cursor: "pointer",
-                          minWidth: "60px",
-                        }}
-                      >
-                        {selected ? "Selected" : "Not Selected"}
-                      </button>
-                      <button
-                        onClick={() => removeColorFromState(id)}
-                        style="padding: 4px 6px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 11px;"
-                        title="Remove this color"
-                      >
-                        🗑
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              {/* UI FORM SECTION */}
-              <div style="flex: 1; padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #ccc;">
-                <h3 style="margin: 0 0 15px 0; color: #FF9800;">📝 UI Form</h3>
-                <p style="margin: 0 0 15px 0; font-size: 14px; color: #666;">
-                  Checkbox interface for user interaction
-                </p>
-                <Form action={submitForm}>
-                  <fieldset style="border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
-                    <legend>Select Colors:</legend>
-                    <CheckboxList
-                      name="colors"
-                      onUIStateChange={(colors) => {
-                        setUiSelectedColors(colors);
-                      }}
-                    >
-                      {colorChoices.map(({ id, color }) => (
-                        <Label key={id} style="display: block; margin: 5px 0;">
-                          {color.charAt(0).toUpperCase() + color.slice(1)}
-                          <Checkbox
-                            value={color}
-                            checked={selectedColors.includes(color)}
-                          />
-                        </Label>
-                      ))}
-                    </CheckboxList>
-                  </fieldset>
-                  {/* Error simulation checkbox */}
-                  <div style="margin: 10px 0; padding: 8px; background: #ffebee; border-radius: 4px; border: 1px solid #ffcdd2;">
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d32f2f;">
-                      <input
-                        type="checkbox"
-                        checked={forceError}
-                        onChange={(e) => setForceError(e.target.checked)}
-                        style="margin: 0;"
-                      />
-                      🔧 Force submission error (for testing)
-                    </label>
-                  </div>
-                  {/* Submission feedback messages */}
-                  {(isSubmitting || submitMessage || submitError) && (
-                    <div style="margin: 10px 0; padding: 10px; border-radius: 4px; font-size: 14px;">
-                      {isSubmitting && (
-                        <div style="color: #1976d2; background: #e3f2fd; padding: 8px; border-radius: 3px; border-left: 3px solid #1976d2;">
-                          🔄 {submitMessage}
-                        </div>
-                      )}
-                      {!isSubmitting && submitMessage && (
-                        <div style="color: #388e3c; background: #e8f5e8; padding: 8px; border-radius: 3px; border-left: 3px solid #388e3c;">
-                          {submitMessage}
-                        </div>
-                      )}
-                      {submitError && (
-                        <div style="color: #d32f2f; background: #ffebee; padding: 8px; border-radius: 3px; border-left: 3px solid #d32f2f;">
-                          ❌ {submitError}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  <div style="margin-top: 15px; display: flex; align-items: flex-start; flex-direction: column; gap: 8px;">
-                    <Button type="submit" disabled={isSubmitting}>
-                      {isSubmitting ? "⏳ Submitting..." : "📤 Submit Form"}{" "}
-                      {!isSubmitting && uiSelectedColors?.length > 0 && (
-                        <span style="font-size: 11px; opacity: 0.7;">
-                          ({uiSelectedColors.join(", ")})
-                        </span>
-                      )}
-                    </Button>
-                    <Button type="reset">
-                      🔄 Reset to State{" "}
-                      {getResetColors().length > 0 && (
-                        <span style="font-size: 11px; opacity: 0.7;">
-                          ({getResetColors().join(", ")})
-                        </span>
-                      )}
-                    </Button>
-                  </div>
-                </Form>
-              </div>
-            </div>
-            <div style="background: #f0f8ff; padding: 15px; border-radius: 6px; margin: 20px 0; border-left: 4px solid #2196F3;">
-              <h4 style="margin: 0 0 10px 0;">How it works:</h4>
-              <ul style="margin: 0; padding-left: 20px; font-size: 14px;">
-                <li>
-                  <strong>Data State</strong>: The actual data with direct
-                  manipulation buttons
-                </li>
-                <li>
-                  <strong>UI Form</strong>: Checkbox interface that can differ
-                  from the data state
-                </li>
-                <li>
-                  <strong>Submit</strong>: Updates data state to match the form
-                  selections
-                </li>
-                <li>
-                  <strong>Reset</strong>: Syncs form back to current data state
-                </li>
-              </ul>
-            </div>
-          </div>
-        );
-      };
-      render(<App />, document.querySelector("#root"));
-    </script>
-  </body>
-</html>