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/layout/demos/demo_layout_style_buttons.html DELETED Viewed

@@ -1,351 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>useLayoutStyle Demo - Buttons</title>
-    <style>
-      .demo-container {
-        margin-bottom: 30px;
-        padding: 20px;
-        background: #f8f9fa;
-        border-radius: 8px;
-      }
-      .demo-box {
-        min-width: 60px;
-        padding: 10px;
-        text-align: center;
-        background: #e3f2fd;
-        border: 1px solid #90caf9;
-        border-radius: 4px;
-      }
-      .visual-container {
-        margin: 10px 0;
-        padding: 10px;
-        background: #fff3e0;
-        border: 2px dashed #ff9800;
-      }
-      h3 {
-        margin-top: 0;
-      }
-      /* Helper to visualize the container boundaries */
-      .bounded {
-        width: 400px;
-        height: 100px;
-        padding: 10px;
-        background: #f0f4ff;
-        border: 1px solid #6366f1;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" jsenv-type="module/jsx">
-      /* eslint-disable no-unused-vars */
-      import { render } from "preact";
-      import { FlexRow, FlexColumn, Input, Button } from "@jsenv/navi";
-      const DemoBox = ({ children, ...props }) => (
-        <div className="demo-box" {...props}>
-          {children}
-        </div>
-      );
-      const Demo = () => {
-        return (
-          <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
-            <h1>useLayoutStyle Demo - Button Elements</h1>
-            <p>
-              Testing spacing (margin/padding), alignment, and expand behavior
-              specifically with Button components in various layout contexts.
-            </p>
-            <div className="demo-container">
-              <h3>1. Button ExpandX - Horizontal Expansion Only</h3>
-              <div className="visual-container">
-                <h4>In FlexRow (grows horizontally)</h4>
-                <FlexRow gap="10px">
-                  <Button>Fixed</Button>
-                  <Button expandX>ExpandX Button</Button>
-                  <Button>Fixed</Button>
-                </FlexRow>
-                <h4>In FlexColumn (takes full width)</h4>
-                <FlexColumn gap="10px" style={{ height: "150px" }}>
-                  <Button>Normal Width</Button>
-                  <Button expandX>Full Width Button</Button>
-                  <Button>Normal Width</Button>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>2. Button ExpandY - Vertical Expansion Only</h3>
-              <div className="visual-container">
-                <h4>In FlexRow (takes full height)</h4>
-                <FlexRow gap="10px" style={{ height: "100px" }}>
-                  <Button>Normal Height</Button>
-                  <Button expandY>Full Height Button</Button>
-                  <Button>Normal Height</Button>
-                </FlexRow>
-                <h4>In FlexColumn (grows vertically)</h4>
-                <FlexColumn gap="10px" style={{ height: "200px" }}>
-                  <Button>Fixed</Button>
-                  <Button expandY>ExpandY Button</Button>
-                  <Button>Fixed</Button>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>3. Button ExpandX + ExpandY - Both Axes</h3>
-              <div className="visual-container">
-                <h4>In FlexRow (grows horizontally, full height)</h4>
-                <FlexRow gap="10px" style={{ height: "80px" }}>
-                  <Button>Fixed</Button>
-                  <Button expandX expandY>
-                    Both Axes
-                  </Button>
-                  <Button>Fixed</Button>
-                </FlexRow>
-                <h4>In FlexColumn (full width, grows vertically)</h4>
-                <FlexColumn gap="10px" style={{ height: "150px" }}>
-                  <Button>Fixed</Button>
-                  <Button expandX expandY>
-                    Both Axes
-                  </Button>
-                  <Button>Fixed</Button>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>4. Precise Control Comparison</h3>
-              <div className="visual-container">
-                <FlexColumn gap="15px">
-                  <div>
-                    <h4>FlexRow with different expansions</h4>
-                    <FlexRow
-                      gap="10px"
-                      style={{
-                        height: "60px",
-                        background: "#f8f9fa",
-                        padding: "10px",
-                      }}
-                    >
-                      <Button>No Expand</Button>
-                      <Button expandX>ExpandX Only</Button>
-                      <Button expandY>ExpandY Only</Button>
-                      <Button expandX expandY>
-                        Both
-                      </Button>
-                    </FlexRow>
-                  </div>
-                  <div>
-                    <h4>FlexColumn with different expansions</h4>
-                    <FlexColumn
-                      gap="10px"
-                      style={{
-                        height: "200px",
-                        background: "#f8f9fa",
-                        padding: "10px",
-                      }}
-                    >
-                      <Button>No Expand</Button>
-                      <Button expandX>ExpandX Only</Button>
-                      <Button expandY>ExpandY Only</Button>
-                      <Button expandX expandY>
-                        Both
-                      </Button>
-                    </FlexColumn>
-                  </div>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>5. Outside Flex Context</h3>
-              <div className="visual-container">
-                <div
-                  style={{
-                    width: "300px",
-                    height: "150px",
-                    border: "1px solid #ccc",
-                    padding: "10px",
-                  }}
-                >
-                  <Button>Normal Button</Button>
-                  <br />
-                  <br />
-                  <Button expandX>ExpandX (full width)</Button>
-                  <br />
-                  <br />
-                  <Button expandY>ExpandY (full height)</Button>
-                  <br />
-                  <br />
-                  <Button expandX expandY>
-                    Both (full width & height)
-                  </Button>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>6. Multiple Expand Buttons</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <Button expandX>ExpandX 1</Button>
-                  <Button expandX>ExpandX 2</Button>
-                  <Button expandX>ExpandX 3</Button>
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>7. Button Spacing - Margins</h3>
-              <div className="visual-container">
-                <FlexColumn gap="5px">
-                  <Button margin="10px">Margin All Sides</Button>
-                  <Button marginX="20px">MarginX Only</Button>
-                  <Button marginY="15px">MarginY Only</Button>
-                  <Button marginLeft="30px">MarginLeft Only</Button>
-                  <Button marginRight="25px">MarginRight Only</Button>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>6. Button Spacing - Padding</h3>
-              <div className="visual-container">
-                <FlexColumn gap="5px">
-                  <Button>Default Padding</Button>
-                  <Button padding="20px">Extra Padding</Button>
-                  <Button paddingX="30px">PaddingX Only</Button>
-                  <Button paddingY="15px">PaddingY Only</Button>
-                  <Button paddingLeft="25px">PaddingLeft Only</Button>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>8. Button AlignX Test: FlexRow + alignX="end"</h3>
-              <div className="visual-container">
-                <div className="bounded">
-                  <FlexRow gap="10px" style={{ height: "100%" }}>
-                    <Button>Default</Button>
-                    <Button alignX="end">Pushed to End</Button>
-                  </FlexRow>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>9. Combined Spacing and ExpandX</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <Button>Label</Button>
-                  <Button expandX marginY="5px" paddingX="20px">
-                    Margin + Padding + ExpandX
-                  </Button>
-                  <Button>End</Button>
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>10. Button Toolbar Layout</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <Button>New</Button>
-                  <Button>Open</Button>
-                  <Button>Save</Button>
-                  <Button expandX>Status Message Area</Button>
-                  <Button alignX="end">Settings</Button>
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>11. Button Group with Various Alignments</h3>
-              <div className="visual-container">
-                <FlexColumn gap="10px">
-                  <FlexRow gap="10px">
-                    <Button>Start</Button>
-                    <Button alignX="center">Center</Button>
-                    <Button alignX="end">End</Button>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <Button expandX>Primary Action</Button>
-                    <Button>Cancel</Button>
-                  </FlexRow>
-                  <FlexRow gap="10px" alignX="end">
-                    <Button>Back</Button>
-                    <Button>Next</Button>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>12. Card Layout with Button Actions</h3>
-              <div className="visual-container">
-                <div
-                  style={{
-                    border: "1px solid #ddd",
-                    borderRadius: "8px",
-                    padding: "20px",
-                    width: "350px",
-                  }}
-                >
-                  <h4 style={{ margin: "0 0 10px 0" }}>Card Title</h4>
-                  <p style={{ margin: "0 0 20px 0", color: "#666" }}>
-                    This is some card content that describes the item or action.
-                  </p>
-                  <FlexRow gap="10px">
-                    <Button expandX>Primary Action</Button>
-                    <Button alignX="end">More</Button>
-                  </FlexRow>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>13. Navigation Button Layout</h3>
-              <div className="visual-container">
-                <FlexColumn gap="15px">
-                  <FlexRow gap="10px">
-                    <Button>Home</Button>
-                    <Button expandX>Current Page Title</Button>
-                    <Button alignX="end">Profile</Button>
-                  </FlexRow>
-                  <FlexRow gap="10px" alignX="center">
-                    <Button marginX="5px">Tab 1</Button>
-                    <Button marginX="5px">Tab 2</Button>
-                    <Button marginX="5px">Tab 3</Button>
-                  </FlexRow>
-                  <FlexRow gap="10px" alignX="space-between">
-                    <Button>Previous</Button>
-                    <Button>Next</Button>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      render(<Demo />, document.getElementById("app"));
-    </script>
-  </body>
-</html>

package/src/components/layout/demos/demo_layout_style_input.html DELETED Viewed

@@ -1,226 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>useLayoutStyle Demo</title>
-    <style>
-      .demo-container {
-        margin-bottom: 30px;
-        padding: 20px;
-        background: #f8f9fa;
-        border-radius: 8px;
-      }
-      .demo-box {
-        min-width: 60px;
-        padding: 10px;
-        text-align: center;
-        background: #e3f2fd;
-        border: 1px solid #90caf9;
-        border-radius: 4px;
-      }
-      .visual-container {
-        margin: 10px 0;
-        padding: 10px;
-        background: #fff3e0;
-        border: 2px dashed #ff9800;
-      }
-      h3 {
-        margin-top: 0;
-      }
-      /* Helper to visualize the container boundaries */
-      .bounded {
-        width: 400px;
-        height: 100px;
-        padding: 10px;
-        background: #f0f4ff;
-        border: 1px solid #6366f1;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" jsenv-type="module/jsx">
-      /* eslint-disable no-unused-vars */
-      import { render } from "preact";
-      import { FlexRow, FlexColumn, Input, Button } from "@jsenv/navi";
-      const DemoBox = ({ children, ...props }) => (
-        <div className="demo-box" {...props}>
-          {children}
-        </div>
-      );
-      const Demo = () => {
-        return (
-          <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
-            <h1>useLayoutStyle Demo - Input Elements</h1>
-            <p>
-              Testing spacing (margin/padding), alignment, and expand behavior
-              specifically with Input components in various layout contexts.
-            </p>
-            <div className="demo-container">
-              <h3>1. Input with Expand in FlexRow</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <Button>Start</Button>
-                  <Input placeholder="Expanding input" expandX />
-                  <Button>End</Button>
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>2. Input with Expand in FlexColumn</h3>
-              <div className="visual-container">
-                <FlexColumn gap="10px" style={{ height: "200px" }}>
-                  <Input placeholder="Fixed input" />
-                  <Input placeholder="Expanding input (height)" expandY />
-                  <Input placeholder="Fixed input" />
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>3. Input with Expand outside Flex context</h3>
-              <div className="visual-container">
-                <div
-                  style={{
-                    width: "300px",
-                    border: "1px solid #ccc",
-                    padding: "10px",
-                  }}
-                >
-                  <Input placeholder="Normal input" />
-                  <br />
-                  <br />
-                  <Input
-                    placeholder="Expanding input (should take full width)"
-                    expand
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>4. Multiple Expand Elements</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <Input placeholder="Expand 1" expand />
-                  <Input placeholder="Expand 2" expand />
-                  <Input placeholder="Expand 3" expand />
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>5. Basic Spacing - Input with margins</h3>
-              <div className="visual-container">
-                <Input placeholder="Default input" margin="10px" />
-                <Input placeholder="MarginX only" marginX="20px" />
-                <Input placeholder="MarginY only" marginY="15px" />
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>6. Input with Padding</h3>
-              <div className="visual-container">
-                <Input placeholder="Default padding" />
-                <Input placeholder="Extra padding" padding="20px" />
-                <Input placeholder="PaddingX only" paddingX="30px" />
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>7. Directional Margins and Padding</h3>
-              <div className="visual-container">
-                <FlexColumn gap="5px">
-                  <Input placeholder="marginLeft: 20px" marginLeft="20px" />
-                  <Input placeholder="marginRight: 30px" marginRight="30px" />
-                  <Input
-                    placeholder="marginTop: 15px, marginBottom: 25px"
-                    marginTop="15px"
-                    marginBottom="25px"
-                  />
-                  <Input placeholder="paddingLeft: 25px" paddingLeft="25px" />
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>8. AlignX Test: FlexRow + alignX="end"</h3>
-              <div className="visual-container">
-                <div className="bounded">
-                  <FlexRow gap="10px" style={{ height: "100%" }}>
-                    <Input placeholder="Default" />
-                    <Input placeholder="Pushed to end" alignX="end" />
-                  </FlexRow>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>9. Combined Spacing and Expand</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <Button>Label</Button>
-                  <Input
-                    placeholder="Margin + Expand"
-                    expand
-                    marginY="5px"
-                    paddingX="15px"
-                  />
-                  <Button>Action</Button>
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>10. Complex Layout: Form with Expand</h3>
-              <div className="visual-container">
-                <FlexColumn gap="15px">
-                  <FlexRow gap="10px">
-                    <label style={{ minWidth: "80px", alignSelf: "center" }}>
-                      Name:
-                    </label>
-                    <Input placeholder="Enter your name" expand />
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <label style={{ minWidth: "80px", alignSelf: "center" }}>
-                      Email:
-                    </label>
-                    <Input placeholder="Enter your email" expand />
-                    <Button>Verify</Button>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <label style={{ minWidth: "80px", alignSelf: "center" }}>
-                      Message:
-                    </label>
-                    <Input
-                      placeholder="Enter your message"
-                      expand
-                      paddingY="10px"
-                    />
-                  </FlexRow>
-                  <FlexRow gap="10px" alignX="end">
-                    <Button>Cancel</Button>
-                    <Button>Submit</Button>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      render(<Demo />, document.getElementById("app"));
-    </script>
-  </body>
-</html>