npm - @jsenv/navi - Versions diffs - 0.0.1 → 0.1.0 - Mend

@jsenv/navi 0.0.1 → 0.1.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 (138) hide show

package/dist/jsenv_navi.js +22954 -0
package/index.js +66 -16
package/package.json +22 -11
package/src/actions.js +50 -26
package/src/browser_integration/browser_integration.js +31 -6
package/src/browser_integration/via_history.js +42 -9
package/src/components/action_execution/render_actionable_component.jsx +6 -4
package/src/components/action_execution/use_action.js +51 -282
package/src/components/action_execution/use_execute_action.js +106 -92
package/src/components/action_execution/use_run_on_mount.js +9 -0
package/src/components/action_renderer.jsx +21 -32
package/src/components/demos/0_button_demo.html +574 -103
package/src/components/demos/10_column_reordering_debug.html +277 -0
package/src/components/demos/11_table_selection_debug.html +432 -0
package/src/components/demos/1_checkbox_demo.html +579 -202
package/src/components/demos/2_input_textual_demo.html +81 -138
package/src/components/demos/3_radio_demo.html +0 -2
package/src/components/demos/4_select_demo.html +19 -23
package/src/components/demos/6_tablist_demo.html +77 -0
package/src/components/demos/7_table_selection_demo.html +176 -0
package/src/components/demos/8_table_fixed_headers_demo.html +584 -0
package/src/components/demos/9_table_column_drag_demo.html +325 -0
package/src/components/demos/action/0_button_demo.html +2 -4
package/src/components/demos/action/1_input_text_demo.html +643 -222
package/src/components/demos/action/3_details_demo.html +146 -115
package/src/components/demos/action/4_input_checkbox_demo.html +442 -322
package/src/components/demos/action/5_input_checkbox_state_demo.html +270 -0
package/src/components/demos/action/6_checkbox_list_demo.html +304 -72
package/src/components/demos/action/7_radio_list_demo.html +310 -170
package/src/components/demos/action/{8_editable_text_demo.html → 8_editable_demo.html} +65 -76
package/src/components/demos/action/9_link_demo.html +84 -62
package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +695 -0
package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +429 -0
package/src/components/demos/ui_transition/2_height_transition_test.html +295 -0
package/src/components/details/details.jsx +62 -64
package/src/components/edition/editable.jsx +186 -0
package/src/components/field/README.md +247 -0
package/src/components/{input → field}/button.jsx +151 -130
package/src/components/field/checkbox_list.jsx +184 -0
package/src/components/{collect_form_element_values.js → field/collect_form_element_values.js} +7 -4
package/src/components/{input → field}/field_css.js +4 -1
package/src/components/field/form.jsx +211 -0
package/src/components/{input → field}/input.jsx +1 -0
package/src/components/{input → field}/input_checkbox.jsx +132 -155
package/src/components/{input → field}/input_radio.jsx +135 -46
package/src/components/{input → field}/input_textual.jsx +247 -173
package/src/components/field/label.jsx +32 -0
package/src/components/field/radio_list.jsx +182 -0
package/src/components/{input → field}/select.jsx +17 -32
package/src/components/field/use_action_events.js +132 -0
package/src/components/field/use_form_events.js +55 -0
package/src/components/field/use_ui_state_controller.js +506 -0
package/src/components/item_tracker/README.md +461 -0
package/src/components/item_tracker/use_isolated_item_tracker.jsx +209 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.html +148 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +460 -0
package/src/components/item_tracker/use_item_tracker.jsx +143 -0
package/src/components/item_tracker/use_item_tracker_demo.html +207 -0
package/src/components/item_tracker/use_item_tracker_demo.jsx +216 -0
package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +87 -0
package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +61 -0
package/src/components/keyboard_shortcuts/keyboard_key_meta.js +17 -0
package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +371 -0
package/src/components/link/link.jsx +65 -102
package/src/components/link/link_with_icon.jsx +52 -0
package/src/components/loader/loader_background.jsx +85 -64
package/src/components/loader/rectangle_loading.jsx +38 -19
package/src/components/route.jsx +8 -4
package/src/components/selection/selection.jsx +1583 -0
package/src/components/svg/font_sized_svg.jsx +45 -0
package/src/components/svg/icon_and_text.jsx +21 -0
package/src/components/svg/svg_mask_overlay.jsx +105 -0
package/src/components/table/drag/table_drag.jsx +506 -0
package/src/components/table/resize/table_resize.jsx +650 -0
package/src/components/table/resize/table_size.js +43 -0
package/src/components/table/selection/table_selection.js +106 -0
package/src/components/table/selection/table_selection.jsx +203 -0
package/src/components/table/sticky/sticky_group.js +354 -0
package/src/components/table/sticky/table_sticky.js +25 -0
package/src/components/table/sticky/table_sticky.jsx +501 -0
package/src/components/table/table.jsx +721 -0
package/src/components/table/table_css.js +211 -0
package/src/components/table/table_ui.jsx +49 -0
package/src/components/table/use_cells_and_columns.js +90 -0
package/src/components/table/use_object_array_to_cells.js +46 -0
package/src/components/table/z_indexes.js +23 -0
package/src/components/tablist/tablist.jsx +99 -0
package/src/components/text/overflow.jsx +15 -0
package/src/components/text/text_and_count.jsx +28 -0
package/src/components/ui_transition.jsx +128 -0
package/src/components/use_auto_focus.js +58 -7
package/src/components/use_batch_during_render.js +33 -0
package/src/components/use_debounce_true.js +7 -7
package/src/components/use_dependencies_diff.js +35 -0
package/src/components/use_focus_group.js +4 -3
package/src/components/use_initial_value.js +8 -34
package/src/components/use_signal_sync.js +1 -1
package/src/components/use_stable_callback.js +68 -0
package/src/components/use_state_array.js +16 -9
package/src/docs/actions.md +22 -0
package/src/notes.md +33 -12
package/src/route/route.js +97 -47
package/src/store/resource_graph.js +2 -1
package/src/store/tests/{resource_graph_dependencies.test.js → resource_graph_dependencies.test_manual.js} +13 -13
package/src/utils/is_signal.js +20 -0
package/src/utils/stringify_for_display.js +4 -23
package/src/validation/constraints/confirm_constraint.js +14 -0
package/src/validation/constraints/create_unique_value_constraint.js +27 -0
package/src/validation/constraints/native_constraints.js +313 -0
package/src/validation/constraints/readonly_constraint.js +36 -0
package/src/validation/constraints/single_space_constraint.js +13 -0
package/src/validation/custom_constraint_validation.js +599 -0
package/src/validation/custom_message.js +18 -0
package/src/validation/demos/browser_style.png +0 -0
package/src/validation/demos/form_validation_demo.html +142 -0
package/src/validation/demos/form_validation_demo_preact.html +87 -0
package/src/validation/demos/form_validation_native_popover_demo.html +168 -0
package/src/validation/demos/form_validation_vs_native_demo.html +172 -0
package/src/validation/demos/validation_message_demo.html +203 -0
package/src/validation/hooks/use_constraints.js +23 -0
package/src/validation/hooks/use_custom_validation_ref.js +73 -0
package/src/validation/hooks/use_validation_message.js +19 -0
package/src/validation/validation_message.js +741 -0
package/src/components/editable_text/editable_text.jsx +0 -96
package/src/components/form.jsx +0 -144
package/src/components/input/checkbox_list.jsx +0 -294
package/src/components/input/field.jsx +0 -61
package/src/components/input/radio_list.jsx +0 -283
package/src/components/input/use_form_event.js +0 -20
package/src/components/input/use_on_change.js +0 -12
package/src/components/selection/selection.js +0 -5
package/src/components/selection/selection_context.jsx +0 -262
package/src/components/shortcut/shortcut_context.jsx +0 -390
package/src/components/use_action_events.js +0 -37
package/src/utils/iterable_weak_set.js +0 -62
/package/src/components/demos/action/{11_nested_shortcuts_demo.html → 11_nested_shortcuts_demo.xhtml} +0 -0
/package/src/components/{shortcut → keyboard_shortcuts}/os.js +0 -0
/package/src/route/{route.test.html → route.xtest.html} +0 -0

package/src/components/demos/action/1_input_text_demo.html CHANGED Viewed

@@ -61,6 +61,24 @@
         border-color: #bee5eb;
         color: #0c5460;
       }
+      nav a {
+        color: #007bff;
+        text-decoration: none;
+      }
+      nav a:hover {
+        text-decoration: underline;
+      }
+      h2 {
+        margin-top: 40px;
+        margin-bottom: 20px;
+        padding-top: 20px;
+        border-top: 2px solid #e0e0e0;
+      }
+      h2:first-of-type {
+        margin-top: 0;
+        border-top: none;
+        padding-top: 0;
+      }
       .button-group {
         display: flex;
         gap: 10px;
@@ -77,23 +95,17 @@
       button:hover {
         background: #f8f9fa;
       }
-      button[type="submit"] {
-        background: #007bff;
-        color: white;
-        border-color: #007bff;
-      }
-      button[type="submit"]:hover {
-        background: #0056b3;
-      }
-      button[type="reset"] {
-        background: #6c757d;
-        color: white;
-        border-color: #6c757d;
+      .control-group {
+        margin-bottom: 15px;
       }
-      button[type="reset"]:hover {
-        background: #545b62;
+      label {
+        margin-bottom: 15px;
+        font-weight: 500;
+        color: #555;
       }
-      input {
+      label input {
+        display: block;
+        margin-top: 5px;
         width: 100%;
         padding: 8px 12px;
         border: 1px solid #ccc;
@@ -101,15 +113,6 @@
         font-size: 14px;
         box-sizing: border-box;
       }
-      .control-group {
-        margin-bottom: 15px;
-      }
-      label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: 500;
-        color: #555;
-      }
     </style>
   </head>
   <body>
@@ -119,8 +122,14 @@
     <script type="module" jsenv-type="module/jsx">
       import { render } from "preact";
       import { useState } from "preact/hooks";
-      // eslint-disable-next-line no-unused-vars
-      import { Field, Input, Form, Button, createAction } from "@jsenv/navi";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Input,
+        // eslint-disable-next-line no-unused-vars
+        Form,
+        // eslint-disable-next-line no-unused-vars
+        Button,
+      } from "@jsenv/navi";
       const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -128,18 +137,501 @@
       const App = () => {
         return (
           <>
+            <div className="demo-card" style={{ marginBottom: "30px" }}>
+              <h2>Input Text Demo - Overview</h2>
+              <p>
+                This demo showcases different ways to use the Input component
+                with text inputs.
+              </p>
+              <nav>
+                <h3>Sections:</h3>
+                <ul style={{ marginLeft: "20px" }}>
+                  <li>
+                    <a href="#basic-inputs">
+                      1. Basic Input (no action/no form)
+                    </a>{" "}
+                    - Simple inputs with value handling
+                  </li>
+                  <li>
+                    <a href="#input-actions">2. Input with Actions</a> - Inputs
+                    that trigger actions on value change, including error
+                    handling
+                  </li>
+                  <li>
+                    <a href="#input-forms">3. Input inside Form</a> - Form
+                    integration patterns
+                  </li>
+                  <li>
+                    <a href="#datetime-local">4. Datetime-Local Inputs</a> -
+                    Special handling for datetime inputs with timezone
+                    conversion
+                  </li>
+                </ul>
+              </nav>
+            </div>
+            <h2 id="basic-inputs">1. Basic Input (no action/no form)</h2>
+            <div className="demo-grid">
+              <BasicInputNoActionDemo />
+              <InputWithDefaultValueDemo />
+            </div>
+            <h2 id="input-actions">2. Input with Actions</h2>
             <div className="demo-grid">
               <BasicInputDemo />
               <InputWithInitialValueDemo />
               <InputWithExternalControlDemo />
+              <InputWithErrorDemo />
+              <InputWithValidationErrorDemo />
+            </div>
+            <h2 id="input-forms">3. Input inside Form</h2>
+            <div className="demo-grid">
               <FormInputDemo />
-              <FormWithExternalControlDemo />
-              <SharedActionDemo />
+              <FormInputErrorDemo />
+            </div>
+            <h2 id="datetime-local">4. Datetime-Local Inputs</h2>
+            <div className="demo-grid">
+              <DateTimeLocalDemo />
+              <DateTimeLocalFormDemo />
             </div>
           </>
         );
       };
+      // eslint-disable-next-line no-unused-vars
+      const DateTimeLocalDemo = () => {
+        // External state (what the server/app knows) - stored as UTC ISO string
+        const [externalDateTime, setExternalDateTime] = useState(
+          "2024-01-15T14:30:00Z", // UTC time
+        );
+        // UI state tracking
+        const [uiDateTime, setUiDateTime] = useState(externalDateTime);
+        const [actionValue, setActionValue] = useState("");
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        const saveDateTime = async (dateTimeValue) => {
+          setIsLoading(true);
+          setActionValue(dateTimeValue || "(empty)");
+          setResult("Saving datetime...");
+          try {
+            await delay(1000);
+            // Simulate server response
+            const response = {
+              saved: dateTimeValue,
+              message: `Datetime saved successfully`,
+            };
+            // Update external state to match what was saved
+            setExternalDateTime(dateTimeValue);
+            setResult(`✅ ${response.message}\\nSaved: ${dateTimeValue}`);
+            return response;
+          } catch (error) {
+            setResult(`❌ Save failed: ${error.message}`);
+            throw error;
+          } finally {
+            setIsLoading(false);
+          }
+        };
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Datetime-Local State Demo</h3>
+            {/* External State Control */}
+            <div
+              style={{
+                marginBottom: "20px",
+                padding: "12px",
+                background: "#e3f2fd",
+                borderRadius: "4px",
+              }}
+            >
+              <h4
+                style={{
+                  margin: "0 0 10px 0",
+                  fontSize: "14px",
+                  color: "#1976d2",
+                }}
+              >
+                📊 External State (UTC)
+              </h4>
+              <div
+                style={{
+                  fontFamily: "monospace",
+                  fontSize: "12px",
+                  marginBottom: "10px",
+                }}
+              >
+                Current: {externalDateTime || "(not set)"}
+              </div>
+              <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+                <button
+                  onClick={() => setExternalDateTime("2024-01-15T14:30:00Z")}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Set Jan 15, 2:30 PM UTC
+                </button>
+                <button
+                  onClick={() => setExternalDateTime("2024-12-25T09:00:00Z")}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Set Dec 25, 9:00 AM UTC
+                </button>
+                <button
+                  onClick={() => setExternalDateTime(null)}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Clear
+                </button>
+              </div>
+            </div>
+            {/* UI Input */}
+            <div className="control-group">
+              <label>
+                Datetime Input (Local Time):
+                <Input
+                  type="datetime-local"
+                  name="datetime"
+                  value={externalDateTime} // External state controls the input
+                  onUIStateChange={(datetime) => {
+                    setUiDateTime(datetime);
+                  }}
+                  action={saveDateTime}
+                />
+              </label>
+            </div>
+            {/* State Display */}
+            <div style={{ marginBottom: "15px" }}>
+              <div
+                style={{ fontSize: "12px", color: "#666", marginBottom: "8px" }}
+              >
+                <strong>UI State:</strong> {uiDateTime || "(empty)"}
+              </div>
+              <div
+                style={{ fontSize: "12px", color: "#666", marginBottom: "8px" }}
+              >
+                <strong>Action receives:</strong>{" "}
+                {actionValue || "(waiting for action...)"}
+              </div>
+            </div>
+            <div
+              className={`result-display ${
+                isLoading
+                  ? "result-loading"
+                  : result.startsWith("✅")
+                    ? "result-success"
+                    : result.startsWith("❌")
+                      ? "result-error"
+                      : ""
+              }`}
+            >
+              {result ||
+                "Change the datetime and blur/enter to trigger action..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const DateTimeLocalFormDemo = () => {
+        const [externalDateTime, setExternalDateTime] = useState(
+          "2024-06-01T10:00:00Z",
+        );
+        const [uiDateTime, setUiDateTime] = useState(externalDateTime);
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        const submitForm = async (formData) => {
+          setIsLoading(true);
+          setResult("Submitting form...");
+          try {
+            await delay(1200);
+            const response = {
+              datetime: formData.appointmentTime,
+              message: "Appointment scheduled successfully",
+            };
+            // Update external state
+            setExternalDateTime(formData.appointmentTime);
+            setResult(
+              `✅ ${response.message}\\nScheduled for: ${formData.appointmentTime}`,
+            );
+            return response;
+          } catch (error) {
+            setResult(`❌ Form error: ${error.message}`);
+            throw error;
+          } finally {
+            setIsLoading(false);
+          }
+        };
+        const getResetValue = () => {
+          return externalDateTime || "(not set)";
+        };
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Datetime-Local in Form</h3>
+            {/* External State Control */}
+            <div
+              style={{
+                marginBottom: "20px",
+                padding: "12px",
+                background: "#e3f2fd",
+                borderRadius: "4px",
+              }}
+            >
+              <h4
+                style={{
+                  margin: "0 0 10px 0",
+                  fontSize: "14px",
+                  color: "#1976d2",
+                }}
+              >
+                📊 External State Control (UTC)
+              </h4>
+              <div
+                style={{
+                  fontFamily: "monospace",
+                  fontSize: "12px",
+                  marginBottom: "10px",
+                }}
+              >
+                Current: {externalDateTime || "(not set)"}
+              </div>
+              <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+                <button
+                  onClick={() => setExternalDateTime("2024-03-15T09:00:00Z")}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Set Mar 15, 9:00 AM UTC
+                </button>
+                <button
+                  onClick={() => setExternalDateTime("2024-08-20T16:30:00Z")}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Set Aug 20, 4:30 PM UTC
+                </button>
+                <button
+                  onClick={() => setExternalDateTime("2024-12-31T23:59:00Z")}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Set New Year's Eve
+                </button>
+                <button
+                  onClick={() => setExternalDateTime(null)}
+                  style={{ padding: "4px 8px", fontSize: "12px" }}
+                >
+                  Clear
+                </button>
+              </div>
+            </div>
+            <Form action={submitForm}>
+              <div className="control-group">
+                <label>
+                  Appointment Time:
+                  <Input
+                    type="datetime-local"
+                    name="appointmentTime"
+                    value={externalDateTime}
+                    onUIStateChange={setUiDateTime}
+                  />
+                </label>
+              </div>
+              <div
+                style={{
+                  fontSize: "12px",
+                  color: "#666",
+                  marginBottom: "10px",
+                }}
+              >
+                <strong>UI State:</strong> {uiDateTime || "(empty)"}
+              </div>
+              <div className="button-group">
+                <Button type="submit">
+                  Schedule Appointment
+                  {uiDateTime && (
+                    <span style={{ fontSize: "11px", opacity: "0.7" }}>
+                      {" "}
+                      ({uiDateTime})
+                    </span>
+                  )}
+                </Button>
+                <Button type="reset">
+                  Reset to Saved
+                  <span style={{ fontSize: "11px", opacity: "0.7" }}>
+                    {" "}
+                    ({getResetValue()})
+                  </span>
+                </Button>
+              </div>
+            </Form>
+            <div
+              className={`result-display ${
+                isLoading
+                  ? "result-loading"
+                  : result.startsWith("✅")
+                    ? "result-success"
+                    : result.startsWith("❌")
+                      ? "result-error"
+                      : ""
+              }`}
+            >
+              {result || "Select a datetime and submit..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const BasicInputNoActionDemo = () => {
+        const [result, setResult] = useState("");
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Basic Input (No Action)</h3>
+            <div className="control-group">
+              <label>
+                Enter some text:
+                <Input
+                  name="text"
+                  placeholder="Type something..."
+                  onUIStateChange={(text) => {
+                    setResult(text ? `Current value: "${text}"` : "");
+                  }}
+                />
+              </label>
+            </div>
+            <div className="result-display">
+              {result || "Type in the input to see the value..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const InputWithDefaultValueDemo = () => {
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Input with Default Value</h3>
+            <div className="control-group">
+              <label>
+                Input with default value:
+                <Input
+                  name="text"
+                  defaultValue="Hello World!"
+                  placeholder="Enter text..."
+                />
+              </label>
+            </div>
+            <div className="result-display">
+              Input starts with default value.
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const InputWithErrorDemo = () => {
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Input with Action (Always Fails)</h3>
+            <div className="control-group">
+              <label>
+                Enter text (will always fail):
+                <Input
+                  name="text"
+                  placeholder="Type something..."
+                  action={async (text) => {
+                    setIsLoading(true);
+                    setResult("Processing...");
+                    try {
+                      await delay(1200);
+                      throw new Error(`Processing failed for input: "${text}"`);
+                    } catch (error) {
+                      setResult(`❌ ${error.message}`);
+                      throw error;
+                    } finally {
+                      setIsLoading(false);
+                    }
+                  }}
+                />
+              </label>
+            </div>
+            <div
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              {result || "This input action will always fail..."}
+            </div>
+          </div>
+        );
+      };
+      // eslint-disable-next-line no-unused-vars
+      const InputWithValidationErrorDemo = () => {
+        const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">
+              Input with Validation (Fails on Short Text)
+            </h3>
+            <div className="control-group">
+              <label>
+                Enter text (min 5 characters):
+                <Input
+                  name="text"
+                  placeholder="Must be at least 5 characters..."
+                  action={async (text) => {
+                    setIsLoading(true);
+                    setResult("Validating...");
+                    try {
+                      await delay(800);
+                      if (!text || text.length < 5) {
+                        throw new Error(
+                          "Text must be at least 5 characters long",
+                        );
+                      }
+                      const response = `✅ Valid input: "${text}" (${text.length} characters)`;
+                      setResult(response);
+                      return response;
+                    } catch (error) {
+                      setResult(`❌ Validation failed: ${error.message}`);
+                      throw error;
+                    } finally {
+                      setIsLoading(false);
+                    }
+                  }}
+                />
+              </label>
+            </div>
+            <div
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
+            >
+              {result || "Enter at least 5 characters to pass validation..."}
+            </div>
+          </div>
+        );
+      };
       // eslint-disable-next-line no-unused-vars
       const BasicInputDemo = () => {
         const [result, setResult] = useState("");
@@ -149,27 +641,28 @@
           <div className="demo-card">
             <h3 className="demo-title">Basic Input with Action</h3>
             <div className="control-group">
-              <label htmlFor="basic-input">Enter some text:</label>
-              <Input
-                id="basic-input"
-                name="text"
-                placeholder="Type something..."
-                action={async ({ text }) => {
-                  setIsLoading(true);
-                  setResult("Processing...");
-                  try {
-                    await delay(1000);
-                    const response = `✅ Processed: "${text}"`;
-                    setResult(response);
-                    return response;
-                  } catch (error) {
-                    setResult(`❌ Error: ${error.message}`);
-                    throw error;
-                  } finally {
-                    setIsLoading(false);
-                  }
-                }}
-              />
+              <label>
+                Enter some text:
+                <Input
+                  name="text"
+                  placeholder="Type something..."
+                  action={async (text) => {
+                    setIsLoading(true);
+                    setResult("Processing...");
+                    try {
+                      await delay(1000);
+                      const response = `✅ Processed: "${text}"`;
+                      setResult(response);
+                      return response;
+                    } catch (error) {
+                      setResult(`❌ Error: ${error.message}`);
+                      throw error;
+                    } finally {
+                      setIsLoading(false);
+                    }
+                  }}
+                />
+              </label>
             </div>
             <div
               className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
@@ -182,25 +675,28 @@
       // eslint-disable-next-line no-unused-vars
       const InputWithInitialValueDemo = () => {
+        const [value, setValue] = useState("Hello World!");
         const [result, setResult] = useState("");
         return (
           <div className="demo-card">
             <h3 className="demo-title">Input with Initial Value</h3>
             <div className="control-group">
-              <label htmlFor="initial-input">Input with preset value:</label>
-              <Input
-                id="initial-input"
-                name="text"
-                value="Hello World!"
-                action={async ({ text }) => {
-                  setResult("Processing...");
-                  await delay(800);
-                  const response = `✅ Submitted: "${text}"`;
-                  setResult(response);
-                  return response;
-                }}
-              />
+              <label>
+                Input with preset value:
+                <Input
+                  name="text"
+                  value={value}
+                  onUIStateChange={setValue}
+                  action={async (text) => {
+                    setResult("Processing...");
+                    await delay(800);
+                    const response = `✅ Submitted: "${text}"`;
+                    setResult(response);
+                    return response;
+                  }}
+                />
+              </label>
             </div>
             <div
               className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
@@ -213,48 +709,48 @@
       // eslint-disable-next-line no-unused-vars
       const InputWithExternalControlDemo = () => {
-        const [inputValue, setInputValue] = useState(undefined);
+        const [value, setValue] = useState(undefined);
         const [result, setResult] = useState("");
         return (
           <div className="demo-card">
             <h3 className="demo-title">Input with External Control</h3>
             <div className="control-group">
-              <label htmlFor="controlled-input">
+              <label>
                 Externally controlled input:
+                <Input
+                  name="text"
+                  value={value}
+                  placeholder="Use buttons below to set value"
+                  action={async (text) => {
+                    setResult("Processing...");
+                    await delay(600);
+                    const response = `✅ Action executed with: "${text}"`;
+                    setResult(response);
+                    setValue(text);
+                    return response;
+                  }}
+                />
               </label>
-              <Input
-                id="controlled-input"
-                name="text"
-                value={inputValue}
-                placeholder="Use buttons below to set value"
-                action={async ({ text }) => {
-                  setResult("Processing...");
-                  await delay(600);
-                  const response = `✅ Action executed with: "${text}"`;
-                  setResult(response);
-                  return response;
-                }}
-              />
             </div>
             <div className="button-group">
               <button
                 onClick={() => {
-                  setInputValue("Preset Value 1");
+                  setValue("Preset Value 1");
                 }}
               >
                 Set Value 1
               </button>
               <button
                 onClick={() => {
-                  setInputValue("Preset Value 2");
+                  setValue("Preset Value 2");
                 }}
               >
                 Set Value 2
               </button>
               <button
                 onClick={() => {
-                  setInputValue("");
+                  setValue("");
                 }}
               >
                 Clear
@@ -263,7 +759,7 @@
             <div
               className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
             >
-              Current value: "{inputValue}"<br />
+              Current value: "{value}"<br />
               {result || "Click buttons to change value, then submit..."}
             </div>
           </div>
@@ -275,43 +771,33 @@
         const [result, setResult] = useState("");
         const [isLoading, setIsLoading] = useState(false);
+        const formDemoAction = async ({ username, email }) => {
+          setIsLoading(true);
+          setResult("Submitting form...");
+          try {
+            await delay(1200);
+            const response = `✅ Form submitted!\nUsername: ${username}\nEmail: ${email}`;
+            setResult(response);
+            return response;
+          } catch (error) {
+            setResult(`❌ Form error: ${error.message}`);
+            throw error;
+          } finally {
+            setIsLoading(false);
+          }
+        };
         return (
           <div className="demo-card">
             <h3 className="demo-title">Input inside Form</h3>
-            <Form
-              action={async ({ username, email }) => {
-                setIsLoading(true);
-                setResult("Submitting form...");
-                try {
-                  await delay(1200);
-                  const response = `✅ Form submitted!\nUsername: ${username}\nEmail: ${email}`;
-                  setResult(response);
-                  return response;
-                } catch (error) {
-                  setResult(`❌ Form error: ${error.message}`);
-                  throw error;
-                } finally {
-                  setIsLoading(false);
-                }
-              }}
-            >
+            <Form action={formDemoAction}>
               <div className="control-group">
-                <label htmlFor="form-username">Username:</label>
-                <Input
-                  id="form-username"
-                  name="username"
-                  placeholder="Enter username"
-                />
-              </div>
-              <div className="control-group">
-                <label htmlFor="form-email">Email:</label>
-                <Input
-                  id="form-email"
-                  name="email"
-                  type="email"
-                  placeholder="Enter email"
-                />
+                <label>
+                  Username:
+                  <Input name="username" placeholder="Enter username" />
+                </label>
               </div>
+              <div className="control-group"></div>
               <div className="button-group">
                 <Button type="submit">Submit Form</Button>
                 <Button type="reset">Reset</Button>
@@ -327,69 +813,54 @@
       };
       // eslint-disable-next-line no-unused-vars
-      const FormWithExternalControlDemo = () => {
-        const [username, setUsername] = useState(undefined);
-        const [email, setEmail] = useState(undefined);
+      const FormInputErrorDemo = () => {
         const [result, setResult] = useState("");
+        const [isLoading, setIsLoading] = useState(false);
+        const formErrorAction = async ({ username, email }) => {
+          setIsLoading(true);
+          setResult("Submitting form...");
+          try {
+            await delay(1000);
+            // Simulate server-side validation errors
+            if (!username || username.length < 3) {
+              throw new Error("Username must be at least 3 characters long");
+            }
+            if (username === "admin") {
+              throw new Error(
+                "Username 'admin' is reserved and cannot be used",
+              );
+            }
+            // This will never be reached due to the conditions above
+            const response = `✅ Form submitted!\nUsername: ${username}\nEmail: ${email}`;
+            setResult(response);
+            return response;
+          } catch (error) {
+            setResult(`❌ Form error: ${error.message}`);
+            throw error;
+          } finally {
+            setIsLoading(false);
+          }
+        };
         return (
           <div className="demo-card">
-            <h3 className="demo-title">Form with External Control</h3>
-            <Form
-              action={async (params) => {
-                setResult("Submitting form...");
-                await delay(1000);
-                const response = `✅ Form submitted!\nUsername: ${params.username}\nEmail: ${params.email}`;
-                setResult(response);
-                return response;
-              }}
+            <h3 className="demo-title">Form with Validation Errors</h3>
+            <p
+              style={{ fontSize: "14px", color: "#666", marginBottom: "15px" }}
             >
+              This form demonstrates server-side validation errors. Try: empty
+              fields, username &lt; 3 chars, invalid email, or "admin" username.
+            </p>
+            <Form action={formErrorAction}>
               <div className="control-group">
-                <label htmlFor="controlled-form-username">Username:</label>
-                <Input
-                  id="controlled-form-username"
-                  name="username"
-                  value={username}
-                  placeholder="Controlled by buttons"
-                />
-              </div>
-              <div className="control-group">
-                <label htmlFor="controlled-form-email">Email:</label>
-                <Input
-                  id="controlled-form-email"
-                  name="email"
-                  value={email}
-                  placeholder="Controlled by buttons"
-                />
-              </div>
-              <div className="button-group">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setUsername("john_doe");
-                    setEmail("john@example.com");
-                  }}
-                >
-                  Set User 1
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setUsername("jane_smith");
-                    setEmail("jane@example.com");
-                  }}
-                >
-                  Set User 2
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setUsername("");
-                    setEmail("");
-                  }}
-                >
-                  Clear All
-                </button>
+                <label>
+                  Username:
+                  <Input
+                    name="username"
+                    placeholder="Enter username (try 'admin' or < 3 chars)"
+                  />
+                </label>
               </div>
               <div className="button-group">
                 <Button type="submit">Submit Form</Button>
@@ -397,64 +868,14 @@
               </div>
             </Form>
             <div
-              className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
-            >
-              Current: {username} / {email}
-              <br />
-              {result || "Use buttons to set values, then submit..."}
-            </div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const SharedActionDemo = () => {
-        const [result, setResult] = useState("");
-        return (
-          <div className="demo-card">
-            <h3 className="demo-title">Shared Action Example</h3>
-            <div className="control-group">
-              <label htmlFor="shared-input-1">Input 1 (shared action):</label>
-              <Input
-                id="shared-input-1"
-                name="name"
-                placeholder="Enter name for input 1"
-                action={sharedAction}
-                onActionStart={() => {
-                  setResult("Processing...");
-                }}
-                onActionEnd={(e) => {
-                  setResult(e.detail.data);
-                }}
-              />
-            </div>
-            <div className="control-group">
-              <label htmlFor="shared-input-2">
-                Input 2 (same shared action):
-              </label>
-              <Input
-                id="shared-input-2"
-                name="name"
-                placeholder="Enter name for input 2"
-                action={sharedAction}
-              />
-            </div>
-            <div
-              className={`result-display ${result.startsWith("✅") ? "result-success" : ""}`}
+              className={`result-display ${isLoading ? "result-loading" : result.startsWith("✅") ? "result-success" : result.startsWith("❌") ? "result-error" : ""}`}
             >
-              {result || "Type in either input and submit..."}
+              {result || "Fill form and submit to see validation errors..."}
             </div>
           </div>
         );
       };
-      const sharedAction = createAction(async ({ name }) => {
-        await delay(800);
-        const response = `✅ Hello ${name}! (from shared action)`;
-        return response;
-      });
       render(<App />, document.querySelector("#root"));
     </script>
   </body>