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

@jsenv/navi 0.10.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/dist/jsenv_navi.js +13838 -23291
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 -193
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_text.html DELETED Viewed

@@ -1,514 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>useLayoutStyle Demo - Text</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;
-      }
-      .text-showcase {
-        margin: 10px 0;
-        padding: 15px;
-        background: #f5f5f5;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-      }
-      h3 {
-        margin-top: 0;
-      }
-      /* Helper to visualize the container boundaries */
-      .bounded {
-        width: 400px;
-        height: 100px;
-        padding: 10px;
-        background: #f0f4ff;
-        border: 1px solid #6366f1;
-      }
-      /* Helper to show text boundaries */
-      .text-boundary {
-        display: inline-block;
-        border: 1px dashed #999;
-      }
-    </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, Text, 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 - Text Elements</h1>
-            <p>
-              Testing spacing (margin/padding), alignment, and expand behavior
-              specifically with Text components in various layout contexts.
-            </p>
-            <div className="demo-container">
-              <h3>1. Text with Expand in FlexRow</h3>
-              <div className="visual-container">
-                <FlexRow gap="10px">
-                  <DemoBox>Start</DemoBox>
-                  <Text
-                    expand
-                    style={{ background: "#e8f5e8", padding: "10px" }}
-                  >
-                    This text expands to fill available horizontal space
-                  </Text>
-                  <DemoBox>End</DemoBox>
-                </FlexRow>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>2. Text with Expand in FlexColumn</h3>
-              <div className="visual-container">
-                <FlexColumn gap="10px" style={{ height: "200px" }}>
-                  <Text style={{ background: "#fff3e0", padding: "10px" }}>
-                    Fixed text at top
-                  </Text>
-                  <Text
-                    expand
-                    style={{ background: "#e8f5e8", padding: "10px" }}
-                  >
-                    This text expands vertically to fill available space
-                  </Text>
-                  <Text style={{ background: "#fff3e0", padding: "10px" }}>
-                    Fixed text at bottom
-                  </Text>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>3. Text with Expand outside Flex context</h3>
-              <div className="visual-container">
-                <div
-                  style={{
-                    width: "300px",
-                    border: "1px solid #ccc",
-                    padding: "10px",
-                  }}
-                >
-                  <Text style={{ background: "#fff3e0", padding: "5px" }}>
-                    Normal text width
-                  </Text>
-                  <br />
-                  <br />
-                  <Text
-                    expand
-                    style={{ background: "#e8f5e8", padding: "5px" }}
-                  >
-                    Expanding text (should take full width)
-                  </Text>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>4. Text Spacing - Margins</h3>
-              <div className="visual-container">
-                <div className="text-showcase">
-                  <Text
-                    margin="15px"
-                    style={{ background: "#e3f2fd", padding: "5px" }}
-                  >
-                    Text with margin all sides
-                  </Text>
-                  <br />
-                  <Text
-                    marginX="25px"
-                    style={{ background: "#f3e5f5", padding: "5px" }}
-                  >
-                    Text with marginX only
-                  </Text>
-                  <br />
-                  <Text
-                    marginY="20px"
-                    style={{ background: "#e8f5e8", padding: "5px" }}
-                  >
-                    Text with marginY only
-                  </Text>
-                  <br />
-                  <Text
-                    marginLeft="40px"
-                    style={{ background: "#fff3e0", padding: "5px" }}
-                  >
-                    Text with marginLeft only
-                  </Text>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>5. Text Spacing - Padding</h3>
-              <div className="visual-container">
-                <div className="text-showcase">
-                  <Text
-                    style={{
-                      background: "#e3f2fd",
-                      border: "1px solid #90caf9",
-                    }}
-                  >
-                    Default padding
-                  </Text>
-                  <br />
-                  <br />
-                  <Text
-                    padding="20px"
-                    style={{
-                      background: "#f3e5f5",
-                      border: "1px solid #ce93d8",
-                    }}
-                  >
-                    Extra padding all sides
-                  </Text>
-                  <br />
-                  <br />
-                  <Text
-                    paddingX="30px"
-                    style={{
-                      background: "#e8f5e8",
-                      border: "1px solid #81c784",
-                    }}
-                  >
-                    PaddingX only
-                  </Text>
-                  <br />
-                  <br />
-                  <Text
-                    paddingY="15px"
-                    style={{
-                      background: "#fff3e0",
-                      border: "1px solid #ffb74d",
-                    }}
-                  >
-                    PaddingY only
-                  </Text>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>6. Text AlignX Test: FlexRow + alignX="end"</h3>
-              <div className="visual-container">
-                <div className="bounded">
-                  <FlexRow gap="10px" style={{ height: "100%" }}>
-                    <Text style={{ background: "#e3f2fd", padding: "5px" }}>
-                      Default position
-                    </Text>
-                    <Text
-                      alignX="end"
-                      style={{ background: "#f3e5f5", padding: "5px" }}
-                    >
-                      Pushed to end
-                    </Text>
-                  </FlexRow>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>7. Text Labels and Content Layout</h3>
-              <div className="visual-container">
-                <FlexColumn gap="15px">
-                  <FlexRow gap="10px">
-                    <Text style={{ minWidth: "80px", fontWeight: "bold" }}>
-                      Name:
-                    </Text>
-                    <Text
-                      expand
-                      style={{ background: "#f5f5f5", padding: "8px" }}
-                    >
-                      John Doe
-                    </Text>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <Text style={{ minWidth: "80px", fontWeight: "bold" }}>
-                      Email:
-                    </Text>
-                    <Text
-                      expand
-                      style={{ background: "#f5f5f5", padding: "8px" }}
-                    >
-                      john.doe@example.com
-                    </Text>
-                    <Button>Edit</Button>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <Text style={{ minWidth: "80px", fontWeight: "bold" }}>
-                      Status:
-                    </Text>
-                    <Text
-                      expand
-                      style={{
-                        background: "#e8f5e8",
-                        padding: "8px",
-                        color: "#2e7d32",
-                      }}
-                    >
-                      Active
-                    </Text>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>8. Text in Card Layout</h3>
-              <div className="visual-container">
-                <div
-                  style={{
-                    border: "1px solid #ddd",
-                    borderRadius: "8px",
-                    padding: "20px",
-                    width: "350px",
-                  }}
-                >
-                  <FlexRow gap="15px" style={{ marginBottom: "15px" }}>
-                    <Text style={{ fontSize: "20px", fontWeight: "bold" }}>
-                      Article Title
-                    </Text>
-                    <Text
-                      alignX="end"
-                      style={{ fontSize: "12px", color: "#666" }}
-                    >
-                      2 min read
-                    </Text>
-                  </FlexRow>
-                  <Text
-                    style={{
-                      lineHeight: "1.6",
-                      color: "#555",
-                      marginBottom: "15px",
-                    }}
-                  >
-                    This is the article content that can expand and flow
-                    naturally. It demonstrates how text components work with
-                    layout props.
-                  </Text>
-                  <FlexRow gap="10px">
-                    <Text style={{ fontSize: "12px", color: "#999" }}>
-                      Published: Oct 29, 2025
-                    </Text>
-                    <Text
-                      alignX="end"
-                      style={{ fontSize: "12px", color: "#666" }}
-                    >
-                      By Author Name
-                    </Text>
-                  </FlexRow>
-                </div>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>9. Text Navigation and Breadcrumbs</h3>
-              <div className="visual-container">
-                <FlexColumn gap="15px">
-                  <FlexRow gap="10px">
-                    <Text style={{ fontWeight: "bold" }}>Home</Text>
-                    <Text>/</Text>
-                    <Text style={{ fontWeight: "bold" }}>Products</Text>
-                    <Text>/</Text>
-                    <Text>Current Page</Text>
-                    <Text
-                      alignX="end"
-                      style={{ fontSize: "12px", color: "#666" }}
-                    >
-                      Help
-                    </Text>
-                  </FlexRow>
-                  <FlexRow gap="15px">
-                    <Text
-                      expand
-                      style={{ fontSize: "18px", fontWeight: "bold" }}
-                    >
-                      Page Title
-                    </Text>
-                    <Text alignX="end" style={{ fontSize: "12px" }}>
-                      Last updated: Today
-                    </Text>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>10. Text with Mixed Alignment</h3>
-              <div className="visual-container">
-                <FlexColumn gap="10px">
-                  <FlexRow gap="10px">
-                    <Text style={{ background: "#e3f2fd", padding: "8px" }}>
-                      Default (start)
-                    </Text>
-                    <Text
-                      alignX="center"
-                      style={{ background: "#f3e5f5", padding: "8px" }}
-                    >
-                      Centered
-                    </Text>
-                    <Text
-                      alignX="end"
-                      style={{ background: "#e8f5e8", padding: "8px" }}
-                    >
-                      End aligned
-                    </Text>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <Text
-                      expand
-                      style={{ background: "#fff3e0", padding: "8px" }}
-                    >
-                      Expanding text that fills remaining space
-                    </Text>
-                    <Text
-                      alignX="end"
-                      style={{ background: "#ffebee", padding: "8px" }}
-                    >
-                      Fixed end
-                    </Text>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>11. Text in Message/Chat Layout</h3>
-              <div className="visual-container">
-                <FlexColumn gap="10px" style={{ width: "400px" }}>
-                  <FlexRow gap="10px">
-                    <Text
-                      style={{
-                        background: "#e3f2fd",
-                        padding: "10px",
-                        borderRadius: "12px",
-                        maxWidth: "70%",
-                      }}
-                    >
-                      Hello! This is a message from the left side.
-                    </Text>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <Text
-                      alignX="end"
-                      style={{
-                        background: "#e8f5e8",
-                        padding: "10px",
-                        borderRadius: "12px",
-                        maxWidth: "70%",
-                      }}
-                    >
-                      This message is aligned to the right side.
-                    </Text>
-                  </FlexRow>
-                  <FlexRow gap="10px">
-                    <Text
-                      style={{
-                        background: "#fff3e0",
-                        padding: "10px",
-                        borderRadius: "12px",
-                        maxWidth: "70%",
-                      }}
-                    >
-                      Another left message with some longer content to show
-                      wrapping.
-                    </Text>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h3>12. Combined Text Styling and Layout</h3>
-              <div className="visual-container">
-                <FlexColumn gap="15px">
-                  <Text bold marginBottom="10px" style={{ fontSize: "24px" }}>
-                    Main Heading
-                  </Text>
-                  <FlexRow gap="15px">
-                    <Text italic marginRight="20px" style={{ color: "#666" }}>
-                      Subtitle
-                    </Text>
-                    <Text alignX="end" style={{ fontSize: "12px" }}>
-                      Metadata
-                    </Text>
-                  </FlexRow>
-                  <Text
-                    paddingX="15px"
-                    paddingY="10px"
-                    style={{
-                      background: "#f8f9fa",
-                      borderLeft: "4px solid #007bff",
-                      fontStyle: "italic",
-                    }}
-                  >
-                    This is a quote or highlighted text with custom padding and
-                    styling.
-                  </Text>
-                  <FlexRow gap="10px">
-                    <Text underline style={{ color: "#007bff" }}>
-                      Link text
-                    </Text>
-                    <Text expand style={{ textAlign: "center" }}>
-                      Centered expanding content
-                    </Text>
-                    <Text bold style={{ color: "#dc3545" }}>
-                      Important
-                    </Text>
-                  </FlexRow>
-                </FlexColumn>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      render(<Demo />, document.getElementById("app"));
-    </script>
-  </body>
-</html>

package/src/components/layout/flex.jsx DELETED Viewed

@@ -1,109 +0,0 @@
-import { useContext } from "preact/hooks";
-import { withPropsClassName } from "../props_composition/with_props_class_name.js";
-import { withPropsStyle } from "../props_composition/with_props_style.js";
-import { FlexDirectionContext } from "./layout_context.jsx";
-import { useLayoutStyle } from "./use_layout_style.js";
-import.meta.css = /* css */ `
-  .navi_flex_row {
-    display: flex;
-    flex-direction: row;
-    gap: 0;
-  }
-  .navi_flex_column {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-  .navi_flex_item {
-    flex-shrink: 0;
-  }
-`;
-export const FlexRow = ({ alignX, alignY, gap, style, children, ...rest }) => {
-  const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(
-    {
-      ...all,
-      // Only set justifyContent if it's not the default "start"
-      justifyContent: alignX !== "start" ? alignX : undefined,
-      // Only set alignItems if it's not the default "stretch"
-      alignItems: alignY !== "stretch" ? alignY : undefined,
-      gap,
-    },
-    style,
-  );
-  return (
-    <div {...rest} className="navi_flex_row" style={innerStyle}>
-      <FlexDirectionContext.Provider value="row">
-        {children}
-      </FlexDirectionContext.Provider>
-    </div>
-  );
-};
-export const FlexColumn = ({
-  alignX,
-  alignY,
-  gap,
-  style,
-  children,
-  ...rest
-}) => {
-  const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(
-    {
-      ...all,
-      // Only set alignItems if it's not the default "stretch"
-      alignItems: alignX !== "stretch" ? alignX : undefined,
-      // Only set justifyContent if it's not the default "start"
-      justifyContent: alignY !== "start" ? alignY : undefined,
-      gap,
-    },
-    style,
-  );
-  return (
-    <div {...rest} className="navi_flex_column" style={innerStyle}>
-      <FlexDirectionContext.Provider value="column">
-        {children}
-      </FlexDirectionContext.Provider>
-    </div>
-  );
-};
-export const FlexItem = ({
-  shrink,
-  className,
-  expand,
-  style,
-  children,
-  ...rest
-}) => {
-  const flexDirection = useContext(FlexDirectionContext);
-  if (!flexDirection) {
-    console.warn(
-      "FlexItem must be used within a FlexRow or FlexColumn component.",
-    );
-  }
-  const innerClassName = withPropsClassName("navi_flex_item", className);
-  const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(
-    {
-      ...all,
-      flexGrow: expand ? 1 : undefined,
-      flexShrink: shrink ? 1 : undefined,
-    },
-    style,
-  );
-  return (
-    <div {...rest} className={innerClassName} style={innerStyle}>
-      {children}
-    </div>
-  );
-};

package/src/components/layout/layout_context.jsx DELETED Viewed

@@ -1,3 +0,0 @@
-import { createContext } from "preact";
-export const FlexDirectionContext = createContext();

package/src/components/layout/spacing.jsx DELETED Viewed

@@ -1,20 +0,0 @@
-import { withPropsStyle } from "../props_composition/with_props_style.js";
-import { useLayoutStyle } from "./use_layout_style.js";
-export const Spacing = ({ style, children, ...rest }) => {
-  const { padding, margin } = useLayoutStyle(rest);
-  return (
-    <div
-      {...rest}
-      style={withPropsStyle(
-        {
-          ...margin,
-          ...padding,
-        },
-        style,
-      )}
-    >
-      {children}
-    </div>
-  );
-};