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/demos/0_button_demo.html DELETED Viewed

@@ -1,707 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="data:," />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button Demo</title>
-    <style>
-      body {
-        max-width: 1400px;
-        min-height: 100vh;
-        margin: 0 auto;
-        padding: 20px;
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      }
-      h1 {
-        margin-bottom: 30px;
-        color: white;
-        font-size: 2.5rem;
-        text-align: center;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-      }
-      .demo-grid {
-        display: grid;
-        margin-bottom: 30px;
-        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-        gap: 20px;
-      }
-      .demo-card {
-        padding: 25px;
-        background: white;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 12px;
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-        transition:
-          transform 0.2s ease,
-          box-shadow 0.2s ease;
-      }
-      .demo-card:hover {
-        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
-        transform: translateY(-2px);
-      }
-      .demo-title {
-        display: flex;
-        margin: 0 0 20px 0;
-        padding-bottom: 10px;
-        align-items: center;
-        gap: 10px;
-        color: #2c3e50;
-        font-weight: 600;
-        font-size: 1.3rem;
-        border-bottom: 3px solid #667eea;
-      }
-      .demo-title::before {
-        font-size: 1.2rem;
-        content: "🔘";
-      }
-      .button-row {
-        display: flex;
-        margin: 15px 0;
-        padding: 12px;
-        align-items: center;
-        gap: 15px;
-        background: #f8f9fa;
-        border: 1px solid #e9ecef;
-        border-radius: 8px;
-        transition: background 0.2s ease;
-      }
-      .button-row:hover {
-        background: #e8f4f8;
-      }
-      .button-container {
-        display: flex;
-        min-width: 0;
-        flex: 1;
-        align-items: center;
-        gap: 10px;
-      }
-      .toggle-button {
-        padding: 8px 16px;
-        flex-shrink: 0;
-        color: white;
-        font-weight: 500;
-        font-size: 0.9rem;
-        white-space: nowrap;
-        background: linear-gradient(45deg, #667eea, #764ba2);
-        border: none;
-        border-radius: 6px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        transition: all 0.2s ease;
-        cursor: pointer;
-      }
-      .toggle-button:hover {
-        background: linear-gradient(45deg, #5a6fd8, #6b3fa0);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        transform: translateY(-1px);
-      }
-      .comparison {
-        display: flex;
-        margin-top: 15px;
-        padding: 12px;
-        flex-direction: column;
-        gap: 8px;
-        background: #fff3cd;
-        border-left: 4px solid #ffc107;
-        border-radius: 6px;
-      }
-      .comparison-label {
-        margin-bottom: 5px;
-        color: #856404;
-        font-weight: 500;
-        font-size: 0.85rem;
-      }
-      .native-examples {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .native-examples button {
-        padding: 8px 16px;
-        align-self: flex-start;
-        font-size: 0.9rem;
-      }
-      .prop-control-demo {
-        grid-column: 1 / -1;
-        color: white;
-        background: linear-gradient(45deg, #ff6b6b 0%, #feca57 100%);
-      }
-      .prop-control-demo .demo-title {
-        color: white;
-        border-bottom-color: #ffffff;
-      }
-      .prop-control-demo .demo-title::before {
-        content: "🎛️";
-      }
-      .prop-controls {
-        display: grid;
-        margin-bottom: 25px;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 15px;
-      }
-      .prop-select-group {
-        padding: 15px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 8px;
-      }
-      .prop-select-label {
-        display: block;
-        margin-bottom: 8px;
-        font-weight: 500;
-        font-size: 0.95rem;
-      }
-      .prop-select {
-        width: 100%;
-        padding: 8px 12px;
-        color: #333;
-        font-size: 0.9rem;
-        background: white;
-        border: none;
-        border-radius: 6px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        cursor: pointer;
-      }
-      .state-controls {
-        margin-bottom: 20px;
-        padding: 15px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 8px;
-      }
-      .state-controls h4 {
-        margin: 0 0 15px 0;
-        color: white;
-        font-size: 1rem;
-      }
-      .control-row {
-        display: flex;
-        margin-bottom: 10px;
-        flex-wrap: wrap;
-        gap: 15px;
-      }
-      .control-group {
-        display: flex;
-        min-width: 100px;
-        padding: 12px;
-        flex-direction: column;
-        align-items: center;
-        gap: 8px;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 8px;
-      }
-      .control-toggle {
-        min-width: 80px;
-        padding: 8px 16px;
-        color: white;
-        font-weight: 500;
-        font-size: 0.85rem;
-        text-align: center;
-        background: rgba(255, 255, 255, 0.1);
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        border-radius: 6px;
-        transition: all 0.2s ease;
-        cursor: pointer;
-      }
-      .control-toggle.active {
-        color: #333;
-        background: rgba(255, 255, 255, 0.9);
-        border-color: white;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-      }
-      .control-toggle:hover {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: rgba(255, 255, 255, 0.5);
-      }
-      .control-toggle.active:hover {
-        background: white;
-      }
-      .control-label {
-        margin: 0;
-        color: white;
-        font-size: 0.9rem;
-      }
-      .button-test-grid {
-        display: grid;
-        padding: 20px;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 15px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 8px;
-      }
-      .button-test-item {
-        display: flex;
-        padding: 15px;
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-        text-align: center;
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 6px;
-      }
-      .button-label {
-        margin-bottom: 8px;
-        color: white;
-        font-size: 0.9rem;
-      }
-      @media (max-width: 768px) {
-        .demo-grid {
-          grid-template-columns: 1fr;
-        }
-        h1 {
-          font-size: 2rem;
-        }
-        .button-row {
-          flex-direction: column;
-          align-items: stretch;
-          gap: 10px;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <h1>🔘 Interactive Button Demo</h1>
-    <div id="root"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState } from "preact/hooks";
-      import {
-        // eslint-disable-next-line no-unused-vars
-        Button,
-      } from "@jsenv/navi";
-      // eslint-disable-next-line no-unused-vars
-      const App = () => {
-        return (
-          <div className="demo-grid">
-            <LoadingDemo />
-            <ReadOnlyDemo />
-            <DisabledDemo />
-            <SizeVariationsDemo />
-            <DiscreteDemo />
-            <PropControlDemo />
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const LoadingDemo = () => {
-        const [loading, setLoading] = useState(false);
-        return (
-          <div className="demo-card">
-            <h3 className="demo-title">Loading States</h3>
-            <div className="button-row">
-              <div className="button-container">
-                <Button loading={loading}>Loading Button</Button>
-              </div>
-              <button
-                className="toggle-button"
-                onClick={() => setLoading(!loading)}
-              >
-                {loading ? "Stop Loading" : "Start Loading"}
-              </button>
-            </div>
-            <div className="comparison">
-              <span className="comparison-label">Native comparison:</span>
-              <div className="native-examples">
-                <button disabled={loading}>
-                  {loading ? "Loading..." : "Standard Button"}
-                </button>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const ReadOnlyDemo = () => {
-        const [loading, setLoading] = useState(false);
-        return (
-          <div className="demo-card">
-            <h3 className="demo-title">Read-Only State</h3>
-            <div className="button-row">
-              <div className="button-container">
-                <Button loading={loading} readOnly>
-                  Read-Only Button
-                </Button>
-              </div>
-              <button
-                className="toggle-button"
-                onClick={() => setLoading(!loading)}
-              >
-                Toggle Loading
-              </button>
-            </div>
-            <div className="comparison">
-              <span className="comparison-label">Native comparison:</span>
-              <div className="native-examples">
-                <button data-readonly>Native Read-Only</button>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DisabledDemo = () => {
-        const [loading, setLoading] = useState(false);
-        return (
-          <div className="demo-card">
-            <h3 className="demo-title">Disabled State</h3>
-            <div className="button-row">
-              <div className="button-container">
-                <Button loading={loading} disabled>
-                  Disabled Button
-                </Button>
-              </div>
-              <button
-                className="toggle-button"
-                onClick={() => setLoading(!loading)}
-              >
-                Toggle Loading
-              </button>
-            </div>
-            <div className="comparison">
-              <span className="comparison-label">Native comparison:</span>
-              <div className="native-examples">
-                <button disabled>Native Disabled</button>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const SizeVariationsDemo = () => {
-        const [loading, setLoading] = useState(false);
-        return (
-          <div className="demo-card">
-            <h3 className="demo-title">Size Variations</h3>
-            <div className="button-row">
-              <div className="button-container">
-                <Button loading={loading}>Short</Button>
-              </div>
-            </div>
-            <div className="button-row">
-              <div className="button-container">
-                <Button loading={loading}>
-                  This button is quite large but loader speed should be
-                  consistent
-                </Button>
-              </div>
-            </div>
-            <div className="button-row">
-              <div className="button-container">
-                <Button
-                  loading={loading}
-                  style={{
-                    "--border-width": "8px",
-                    "--padding-x": "12px",
-                    "--padding-y": "24px",
-                  }}
-                >
-                  Thick Border Button
-                </Button>
-              </div>
-              <button
-                className="toggle-button"
-                onClick={() => setLoading(!loading)}
-              >
-                {loading ? "Stop Loading" : "Start Loading"}
-              </button>
-            </div>
-            <div className="comparison">
-              <span className="comparison-label">Note:</span>
-              <div className="native-examples">
-                <small style={{ color: "#666" }}>
-                  Loading animation speed should be consistent regardless of
-                  button size
-                </small>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const DiscreteDemo = () => {
-        const [loading, setLoading] = useState(false);
-        return (
-          <div className="demo-card">
-            <h3 className="demo-title">Discrete Buttons</h3>
-            <div className="button-row">
-              <div className="button-container">
-                <Button discrete loading={loading}>
-                  Discrete Button
-                </Button>
-                <span style={{ fontSize: "0.9rem", color: "#666" }}>
-                  Subtle, minimal styling
-                </span>
-              </div>
-              <button
-                className="toggle-button"
-                onClick={() => setLoading(!loading)}
-              >
-                {loading ? "Stop Loading" : "Start Loading"}
-              </button>
-            </div>
-            <div className="button-row">
-              <div className="button-container">
-                <Button discrete disabled>
-                  Disabled Discrete
-                </Button>
-                <span style={{ fontSize: "0.9rem", color: "#666" }}>
-                  Disabled state
-                </span>
-              </div>
-            </div>
-            <div className="button-row">
-              <div className="button-container">
-                <Button discrete readOnly>
-                  Read-Only Discrete
-                </Button>
-                <span style={{ fontSize: "0.9rem", color: "#666" }}>
-                  Read-only state
-                </span>
-              </div>
-            </div>
-            <div className="comparison">
-              <span className="comparison-label">Comparison:</span>
-              <div
-                style={{
-                  display: "flex",
-                  gap: "15px",
-                  alignItems: "center",
-                  marginTop: "10px",
-                }}
-              >
-                <Button appearance="default" loading={loading}>
-                  Regular Button
-                </Button>
-                <Button appearance="default" discrete loading={loading}>
-                  Discrete Button
-                </Button>
-              </div>
-              <div className="native-examples">
-                <small style={{ color: "#666" }}>
-                  Discrete buttons have minimal styling and blend better with
-                  content. They're perfect for secondary actions or when you
-                  want less visual emphasis.
-                </small>
-              </div>
-            </div>
-          </div>
-        );
-      };
-      // eslint-disable-next-line no-unused-vars
-      const PropControlDemo = () => {
-        const [loading, setLoading] = useState(false);
-        const [disabled, setDisabled] = useState(false);
-        const [readOnly, setReadOnly] = useState(false);
-        const [buttonText, setButtonText] = useState("Custom Button");
-        const [buttonType, setButtonType] = useState("button");
-        const textOptions = [
-          "Custom Button",
-          "Click Me!",
-          "Submit Form",
-          "Save Changes",
-          "Long Button Text Example",
-          "🚀 With Emoji",
-        ];
-        const typeOptions = [
-          { name: "button", value: "button" },
-          { name: "submit", value: "submit" },
-          { name: "reset", value: "reset" },
-        ];
-        return (
-          <div className="demo-card prop-control-demo">
-            <h3 className="demo-title">Interactive Prop Controller</h3>
-            <div className="prop-controls">
-              <div className="prop-select-group">
-                <label className="prop-select-label">Button Text:</label>
-                <select
-                  value={buttonText}
-                  onChange={(e) => setButtonText(e.target.value)}
-                  className="prop-select"
-                >
-                  {textOptions.map((text) => (
-                    <option key={text} value={text}>
-                      {text}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div className="prop-select-group">
-                <label className="prop-select-label">Button Type:</label>
-                <select
-                  value={buttonType}
-                  onChange={(e) => setButtonType(e.target.value)}
-                  className="prop-select"
-                >
-                  {typeOptions.map(({ name, value }) => (
-                    <option key={value} value={value}>
-                      {name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            <div className="state-controls">
-              <h4>Button Properties:</h4>
-              <div className="control-row">
-                <div className="control-group">
-                  <button
-                    className={`control-toggle ${loading ? "active" : ""}`}
-                    onClick={() => setLoading(!loading)}
-                  >
-                    {loading ? "true" : "false"}
-                  </button>
-                  <span className="control-label">loading</span>
-                </div>
-                <div className="control-group">
-                  <button
-                    className={`control-toggle ${disabled ? "active" : ""}`}
-                    onClick={() => setDisabled(!disabled)}
-                  >
-                    {disabled ? "true" : "false"}
-                  </button>
-                  <span className="control-label">disabled</span>
-                </div>
-                <div className="control-group">
-                  <button
-                    className={`control-toggle ${readOnly ? "active" : ""}`}
-                    onClick={() => setReadOnly(!readOnly)}
-                  >
-                    {readOnly ? "true" : "false"}
-                  </button>
-                  <span className="control-label">readOnly</span>
-                </div>
-              </div>
-            </div>
-            <div className="button-test-grid">
-              <div className="button-test-item">
-                <span className="button-label">Custom Button Component</span>
-                <Button
-                  type={buttonType}
-                  loading={loading}
-                  disabled={disabled}
-                  readOnly={readOnly}
-                >
-                  {buttonText}
-                </Button>
-              </div>
-              <div className="button-test-item">
-                <span className="button-label">Native Button</span>
-                <button
-                  type={buttonType}
-                  disabled={disabled || loading}
-                  data-readonly={readOnly}
-                >
-                  {loading ? "Loading..." : buttonText}
-                </button>
-              </div>
-            </div>
-            <div
-              style={{
-                marginTop: "20px",
-                padding: "15px",
-                background: "rgba(255,255,255,0.1)",
-                borderRadius: "8px",
-              }}
-            >
-              <strong>Current Configuration:</strong>
-              <br />
-              <small>
-                type: "{buttonType}" | loading: {loading ? "true" : "false"} |
-                disabled: {disabled ? "true" : "false"} | readOnly:{" "}
-                {readOnly ? "true" : "false"}
-              </small>
-              <br />
-              <br />
-              <small>
-                Use the controls above to test different property combinations.
-                Compare how the custom Button component behaves versus a native
-                button.
-              </small>
-            </div>
-          </div>
-        );
-      };
-      render(<App />, document.querySelector("#root"));
-    </script>
-  </body>
-</html>