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

@jsenv/navi 0.10.1 → 0.11.0

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

Files changed (207) hide show

package/dist/jsenv_navi.js +13858 -23295
package/dist/jsenv_navi.js.map +1281 -0
package/package.json +5 -7
package/index.js +0 -122
package/src/action_private_properties.js +0 -11
package/src/action_proxy_test.html +0 -353
package/src/action_run_states.js +0 -5
package/src/actions.js +0 -1401
package/src/browser_integration/browser_integration.js +0 -216
package/src/browser_integration/document_back_and_forward.js +0 -17
package/src/browser_integration/document_loading_signal.js +0 -100
package/src/browser_integration/document_state_signal.js +0 -9
package/src/browser_integration/document_url_signal.js +0 -9
package/src/browser_integration/use_is_visited.js +0 -19
package/src/browser_integration/via_history.js +0 -232
package/src/browser_integration/via_navigation.js +0 -168
package/src/components/action_execution/form_context.js +0 -5
package/src/components/action_execution/render_actionable_component.jsx +0 -29
package/src/components/action_execution/use_action.js +0 -99
package/src/components/action_execution/use_execute_action.js +0 -177
package/src/components/action_execution/use_run_on_mount.js +0 -9
package/src/components/action_renderer.jsx +0 -125
package/src/components/callout/callout.js +0 -990
package/src/components/callout/callout_demo.html +0 -201
package/src/components/callout/test_dynamic_positioning.html +0 -161
package/src/components/callout/test_html_document_iframe.html +0 -182
package/src/components/demos/0_button_demo.html +0 -707
package/src/components/demos/10_column_reordering_debug.html +0 -277
package/src/components/demos/11_table_selection_debug.html +0 -432
package/src/components/demos/1_checkbox_demo.html +0 -754
package/src/components/demos/2_input_textual_demo.html +0 -286
package/src/components/demos/3_radio_demo.html +0 -874
package/src/components/demos/4_select_demo.html +0 -100
package/src/components/demos/5_list_scrollable_demo.html +0 -153
package/src/components/demos/6_tablist_demo.html +0 -77
package/src/components/demos/7_table_selection_demo.html +0 -176
package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
package/src/components/demos/9_table_column_drag_demo.html +0 -325
package/src/components/demos/action/0_button_demo.html +0 -204
package/src/components/demos/action/10_shortcuts_demo.html +0 -189
package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
package/src/components/demos/action/1_input_text_demo.html +0 -876
package/src/components/demos/action/2_form_multiple.html +0 -303
package/src/components/demos/action/3_details_demo.html +0 -203
package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
package/src/components/demos/action/7_radio_list_demo.html +0 -357
package/src/components/demos/action/8_editable_demo.html +0 -431
package/src/components/demos/action/9_link_demo.html +0 -194
package/src/components/demos/demo.md +0 -0
package/src/components/demos/route/basic/basic.html +0 -14
package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
package/src/components/demos/route/multi/multi.html +0 -14
package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
package/src/components/details/details.jsx +0 -245
package/src/components/details/summary_marker.jsx +0 -141
package/src/components/edition/editable.jsx +0 -186
package/src/components/error_boundary_context.js +0 -9
package/src/components/field/README.md +0 -247
package/src/components/field/button.jsx +0 -429
package/src/components/field/checkbox_list.jsx +0 -185
package/src/components/field/collect_form_element_values.js +0 -82
package/src/components/field/custom_field.js +0 -106
package/src/components/field/form.jsx +0 -209
package/src/components/field/input.jsx +0 -16
package/src/components/field/input_checkbox.jsx +0 -434
package/src/components/field/input_radio.jsx +0 -432
package/src/components/field/input_textual.jsx +0 -389
package/src/components/field/label.jsx +0 -46
package/src/components/field/radio_list.jsx +0 -183
package/src/components/field/select.jsx +0 -256
package/src/components/field/use_action_events.js +0 -132
package/src/components/field/use_form_events.js +0 -59
package/src/components/field/use_ui_state_controller.js +0 -506
package/src/components/item_tracker/README.md +0 -461
package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
package/src/components/item_tracker/use_item_tracker.jsx +0 -143
package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
package/src/components/keyboard_shortcuts/os.js +0 -9
package/src/components/layout/demos/demo_flex.html +0 -638
package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
package/src/components/layout/demos/demo_layout_style_input.html +0 -226
package/src/components/layout/demos/demo_layout_style_text.html +0 -514
package/src/components/layout/flex.jsx +0 -109
package/src/components/layout/layout_context.jsx +0 -3
package/src/components/layout/spacing.jsx +0 -20
package/src/components/layout/use_layout_style.js +0 -249
package/src/components/link/link.jsx +0 -267
package/src/components/link/link_with_icon.jsx +0 -52
package/src/components/loader/loader_background.jsx +0 -372
package/src/components/loader/loading_spinner.jsx +0 -68
package/src/components/loader/network_speed.js +0 -83
package/src/components/loader/rectangle_loading.jsx +0 -244
package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
package/src/components/props_composition/with_props_class_name.js +0 -37
package/src/components/props_composition/with_props_style.js +0 -26
package/src/components/route.jsx +0 -19
package/src/components/selection/selection.jsx +0 -1583
package/src/components/svg/font_sized_svg.jsx +0 -59
package/src/components/svg/icon_and_text.jsx +0 -21
package/src/components/svg/svg_mask_overlay.jsx +0 -105
package/src/components/table/drag/table_drag.jsx +0 -506
package/src/components/table/resize/table_resize.jsx +0 -650
package/src/components/table/resize/table_size.js +0 -43
package/src/components/table/selection/table_selection.js +0 -106
package/src/components/table/selection/table_selection.jsx +0 -203
package/src/components/table/sticky/sticky_group.js +0 -354
package/src/components/table/sticky/table_sticky.js +0 -25
package/src/components/table/sticky/table_sticky.jsx +0 -501
package/src/components/table/table.jsx +0 -721
package/src/components/table/table_css.js +0 -211
package/src/components/table/table_ui.jsx +0 -49
package/src/components/table/use_cells_and_columns.js +0 -90
package/src/components/table/use_object_array_to_cells.js +0 -46
package/src/components/table/z_indexes.js +0 -23
package/src/components/tablist/tablist.jsx +0 -99
package/src/components/text/demos/demo_text_and_icon.html +0 -421
package/src/components/text/overflow.jsx +0 -15
package/src/components/text/text.jsx +0 -83
package/src/components/text/text_and_count.jsx +0 -28
package/src/components/ui_transition.jsx +0 -128
package/src/components/use_auto_focus.js +0 -94
package/src/components/use_batch_during_render.js +0 -33
package/src/components/use_debounce_true.js +0 -31
package/src/components/use_dependencies_diff.js +0 -35
package/src/components/use_focus_group.js +0 -20
package/src/components/use_initial_value.js +0 -78
package/src/components/use_is_visited.js +0 -19
package/src/components/use_ref_array.js +0 -38
package/src/components/use_signal_sync.js +0 -50
package/src/components/use_stable_callback.js +0 -68
package/src/components/use_state_array.js +0 -47
package/src/docs/actions.md +0 -250
package/src/docs/demos/resource/action_status.jsx +0 -42
package/src/docs/demos/resource/demo.md +0 -1
package/src/docs/demos/resource/resource_demo_0.html +0 -84
package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
package/src/docs/demos/resource/resource_demo_2.html +0 -173
package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
package/src/docs/demos/resource/tata.jsx +0 -3
package/src/docs/demos/resource/toto.jsx +0 -3
package/src/docs/demos/user_nav/user_nav.html +0 -12
package/src/docs/demos/user_nav/user_nav.jsx +0 -330
package/src/docs/resource_dependencies.md +0 -103
package/src/docs/resource_with_params.md +0 -80
package/src/navi_css_vars.js +0 -14
package/src/notes.md +0 -34
package/src/route/route.js +0 -596
package/src/route/route.xtest.html +0 -228
package/src/store/array_signal_store.js +0 -537
package/src/store/local_storage_signal.js +0 -17
package/src/store/resource_graph.js +0 -1304
package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
package/src/store/value_in_local_storage.js +0 -187
package/src/symbol_object_signal.js +0 -1
package/src/use_action_data.js +0 -10
package/src/use_action_status.js +0 -47
package/src/utils/add_many_event_listeners.js +0 -15
package/src/utils/array_add_remove.js +0 -61
package/src/utils/array_signal.js +0 -15
package/src/utils/compare_two_js_values.js +0 -172
package/src/utils/execute_with_cleanup.js +0 -21
package/src/utils/get_caller_info.js +0 -85
package/src/utils/is_signal.js +0 -20
package/src/utils/js_value_weak_map.js +0 -162
package/src/utils/js_value_weak_map_demo.html +0 -690
package/src/utils/merge_two_js_values.js +0 -53
package/src/utils/stringify_for_display.js +0 -131
package/src/utils/weak_effect.js +0 -48
package/src/validation/constraints/confirm_constraint.js +0 -14
package/src/validation/constraints/create_unique_value_constraint.js +0 -27
package/src/validation/constraints/native_constraints.js +0 -338
package/src/validation/constraints/readonly_constraint.js +0 -41
package/src/validation/constraints/same_as_constraint.js +0 -42
package/src/validation/constraints/single_space_constraint.js +0 -13
package/src/validation/custom_constraint_validation.js +0 -793
package/src/validation/custom_message.js +0 -18
package/src/validation/demos/browser_style.png +0 -0
package/src/validation/demos/demo_same_as_constraint.html +0 -259
package/src/validation/demos/form_validation_demo.html +0 -142
package/src/validation/demos/form_validation_demo_preact.html +0 -87
package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
package/src/validation/hooks/use_constraints.js +0 -23
package/src/validation/hooks/use_custom_validation_ref.js +0 -73
package/src/validation/hooks/use_validation_message.js +0 -19
package/src/validation/input_change_effect.js +0 -106

package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html DELETED Viewed

@@ -1,695 +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>ActionRenderer with UITransition Demo</title>
-    <style>
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 20px;
-        background: #f5f5f5;
-      }
-      .demo-container {
-        background: white;
-        border-radius: 8px;
-        padding: 20px;
-        margin: 20px 0;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-      .demo-title {
-        margin-top: 0;
-        color: #333;
-        border-bottom: 2px solid #007acc;
-        padding-bottom: 10px;
-      }
-      .control-panel {
-        display: flex;
-        gap: 10px;
-        margin: 20px 0;
-        flex-wrap: wrap;
-      }
-      .control-panel button {
-        padding: 8px 16px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        background: #f8f9fa;
-        cursor: pointer;
-        transition: background-color 0.2s;
-      }
-      .control-panel button:hover {
-        background: #e9ecef;
-      }
-      .control-panel button:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-      .content-area {
-        min-height: 100px;
-        border: 2px dashed #ddd;
-        border-radius: 4px;
-        padding: 20px;
-        margin: 20px 0;
-      }
-      .loading-spinner {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border: 3px solid #f3f3f3;
-        border-top: 3px solid #007acc;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        margin-right: 10px;
-      }
-      @keyframes spin {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-      .success-content {
-        padding: 20px;
-        background: #d4edda;
-        border: 1px solid #c3e6cb;
-        border-radius: 4px;
-        color: #155724;
-      }
-      .error-content {
-        padding: 20px;
-        background: #f8d7da;
-        border: 1px solid #f5c6cb;
-        border-radius: 4px;
-        color: #721c24;
-      }
-      .info-content {
-        padding: 20px;
-        background: #d1ecf1;
-        border: 1px solid #bee5eb;
-        border-radius: 4px;
-        color: #0c5460;
-      }
-      .config-section {
-        background: #f8f9fa;
-        border: 1px solid #e9ecef;
-        border-radius: 4px;
-        padding: 15px;
-        margin: 10px 0;
-      }
-      .config-section h4 {
-        margin-top: 0;
-        color: #495057;
-      }
-      .checkbox-group {
-        display: flex;
-        gap: 20px;
-        flex-wrap: wrap;
-      }
-      .checkbox-group label {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: pointer;
-      }
-      .config-section input[type="range"]:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      .config-section .description {
-        margin: 8px 0 0 0;
-        font-size: 0.9em;
-        color: #666;
-        line-height: 1.4;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>ActionRenderer with UITransition Demo</h1>
-    <p>
-      This demo showcases how ActionRenderer uses UITransition to smoothly
-      animate between different action states (idle, loading, completed, error)
-      with different content sizes. You can control whether size changes are
-      animated or instant, and customize the duration of all transitions.
-    </p>
-    <div id="root"></div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState } from "preact/hooks";
-      import {
-        createAction,
-        // eslint-disable-next-line no-unused-vars
-        ActionRenderer,
-        // eslint-disable-next-line no-unused-vars
-        UITransition,
-      } from "@jsenv/navi";
-      const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-      // Demo actions with different behaviors
-      const createSuccessAction = (contentKey, delayMs = 1000) =>
-        createAction(async () => {
-          await delay(delayMs);
-          return {
-            contentType: contentKey,
-            timestamp: new Date().toISOString(),
-          };
-        });
-      const createErrorAction = (delayMs = 1000) =>
-        createAction(async () => {
-          await delay(delayMs);
-          throw new Error("Something went wrong! This is a demo error.");
-        });
-      const createSlowAction = () =>
-        createAction(async () => {
-          await delay(3000);
-          return {
-            contentType: "slow",
-            message: "This took 3 seconds to load!",
-            timestamp: new Date().toISOString(),
-          };
-        });
-      const createStuckLoadingAction = () =>
-        createAction(async () => {
-          // This action never resolves, staying in loading state
-          await new Promise(() => {}); // Never resolves
-        });
-      // Content renderers for different scenarios
-      const renderSmallContent = (data) => (
-        <div
-          className="success-content"
-          data-content-key="small"
-          data-ui-name="small-content"
-        >
-          <h4>Small Content</h4>
-          <p>This is small content that loaded successfully.</p>
-          <small>Loaded at: {data.timestamp}</small>
-        </div>
-      );
-      const renderLargeContent = (data) => (
-        <div
-          className="success-content"
-          data-content-key="large"
-          data-ui-name="large-content"
-        >
-          <h4>Large Content</h4>
-          <p>
-            This is much larger content that should cause a smooth size
-            transition when it loads.
-          </p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris.
-          </p>
-          <p>
-            Duis aute irure dolor in reprehenderit in voluptate velit esse
-            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-            cupidatat non proident.
-          </p>
-          <div style="display: flex; gap: 10px; margin-top: 15px;">
-            <div style="flex: 1; padding: 10px; background: rgba(0,123,204,0.1); border-radius: 4px;">
-              <strong>Feature 1</strong>
-              <br />
-              Some additional content here
-            </div>
-            <div style="flex: 1; padding: 10px; background: rgba(0,123,204,0.1); border-radius: 4px;">
-              <strong>Feature 2</strong>
-              <br />
-              More content in this section
-            </div>
-          </div>
-          <small>Loaded at: {data.timestamp}</small>
-        </div>
-      );
-      const renderMediumContent = (data) => (
-        <div
-          className="success-content"
-          data-content-key="medium"
-          data-ui-name="medium-content"
-        >
-          <h4>Medium Content</h4>
-          <p>
-            This is medium-sized content that demonstrates size transitions.
-          </p>
-          <ul>
-            <li>Feature A: Working correctly</li>
-            <li>Feature B: All systems operational</li>
-            <li>Feature C: Performance optimized</li>
-          </ul>
-          <small>Loaded at: {data.timestamp}</small>
-        </div>
-      );
-      const renderSlowContent = (data) => (
-        <div
-          className="success-content"
-          data-content-key="slow"
-          data-ui-name="slow-content"
-        >
-          <h4>Slow Content</h4>
-          <p>{data.message}</p>
-          <p>
-            This content took 3 seconds to load and demonstrates phase
-            transitions from loading to content with the same content key.
-          </p>
-          <small>Loaded at: {data.timestamp}</small>
-        </div>
-      );
-      const renderLoadingContent = (contentKey) => (
-        <div
-          className="info-content"
-          data-content-phase
-          data-content-key={contentKey}
-          data-ui-name={`${contentKey}-loading`}
-        >
-          <div style="display: flex; align-items: center;">
-            <div className="loading-spinner"></div>
-            <span>Loading content...</span>
-          </div>
-        </div>
-      );
-      const renderErrorContent = (error, contentKey) => (
-        <div
-          className="error-content"
-          data-content-phase
-          data-content-key={contentKey}
-          data-ui-name={`${contentKey}-error`}
-        >
-          <h4>❌ Error Occurred</h4>
-          <p>{error.message}</p>
-          <small>Try again or check your connection.</small>
-        </div>
-      );
-      // eslint-disable-next-line no-unused-vars
-      const App = () => {
-        const [currentAction, setCurrentAction] = useState(null);
-        const [transitionType, setTransitionType] = useState(() => {
-          return (
-            localStorage.getItem("ui-transition-demo-type") || "cross-fade"
-          );
-        });
-        const [transitionDuration, setTransitionDuration] = useState(() => {
-          const saved = localStorage.getItem("ui-transition-demo-duration");
-          return saved ? parseInt(saved) : 300;
-        });
-        const [phaseTransitionType, setPhaseTransitionType] = useState(() => {
-          return (
-            localStorage.getItem("ui-transition-demo-phase-type") ||
-            "cross-fade"
-          );
-        });
-        const [phaseTransitionDuration, setPhaseTransitionDuration] = useState(
-          () => {
-            const saved = localStorage.getItem(
-              "ui-transition-demo-phase-duration",
-            );
-            return saved ? parseInt(saved) : 300;
-          },
-        );
-        const [sizeTransition, setSizeTransition] = useState(() => {
-          const saved = localStorage.getItem("ui-transition-demo-size-enabled");
-          return saved ? saved === "true" : true; // Default to enabled
-        });
-        const [sizeTransitionDuration, setSizeTransitionDuration] = useState(
-          () => {
-            const saved = localStorage.getItem(
-              "ui-transition-demo-size-duration",
-            );
-            return saved ? parseInt(saved) : 300;
-          },
-        );
-        // Create actions with content key metadata
-        const smallAction = createSuccessAction("small", 800);
-        smallAction.meta = { contentKey: "small" };
-        const mediumAction = createSuccessAction("medium", 1200);
-        mediumAction.meta = { contentKey: "medium" };
-        const largeAction = createSuccessAction("large", 1000);
-        largeAction.meta = { contentKey: "large" };
-        const errorAction = createErrorAction(500);
-        errorAction.meta = { contentKey: "error" };
-        const slowAction = createSlowAction();
-        slowAction.meta = { contentKey: "slow" };
-        const stuckLoadingAction = createStuckLoadingAction();
-        stuckLoadingAction.meta = { contentKey: "stuck-loading" };
-        // Helper to get content key for an action
-        const getContentKeyForAction = (action) => {
-          if (!action) return "loading";
-          // Use the contentKey property we set on action.meta
-          return action.meta?.contentKey || "loading";
-        };
-        const triggerAction = (action) => {
-          setCurrentAction(() => action);
-          // Clear any previous state and trigger fresh load
-          action.rerun();
-        };
-        const handleTransitionTypeChange = (newType) => {
-          setTransitionType(newType);
-          localStorage.setItem("ui-transition-demo-type", newType);
-        };
-        const handleTransitionDurationChange = (newDuration) => {
-          setTransitionDuration(newDuration);
-          localStorage.setItem(
-            "ui-transition-demo-duration",
-            newDuration.toString(),
-          );
-        };
-        const handlePhaseTransitionTypeChange = (newType) => {
-          setPhaseTransitionType(newType);
-          localStorage.setItem("ui-transition-demo-phase-type", newType);
-        };
-        const handlePhaseTransitionDurationChange = (newDuration) => {
-          setPhaseTransitionDuration(newDuration);
-          localStorage.setItem(
-            "ui-transition-demo-phase-duration",
-            newDuration.toString(),
-          );
-        };
-        const handleSizeTransitionChange = (enabled) => {
-          setSizeTransition(enabled);
-          localStorage.setItem(
-            "ui-transition-demo-size-enabled",
-            enabled.toString(),
-          );
-        };
-        const handleSizeTransitionDurationChange = (newDuration) => {
-          setSizeTransitionDuration(newDuration);
-          localStorage.setItem(
-            "ui-transition-demo-size-duration",
-            newDuration.toString(),
-          );
-        };
-        return (
-          <div>
-            <div className="demo-container">
-              <h2 className="demo-title">🎭 Basic Action State Transitions</h2>
-              <p>
-                Click buttons to trigger different actions and watch smooth
-                transitions between loading, success, and error states.
-              </p>
-              <div className="control-panel">
-                <button onClick={() => triggerAction(smallAction)}>
-                  Load Small Content
-                </button>
-                <button onClick={() => triggerAction(mediumAction)}>
-                  Load Medium Content
-                </button>
-                <button onClick={() => triggerAction(largeAction)}>
-                  Load Large Content
-                </button>
-                <button onClick={() => triggerAction(errorAction)}>
-                  Trigger Error
-                </button>
-                <button onClick={() => triggerAction(slowAction)}>
-                  Slow Loading (3s)
-                </button>
-                <button onClick={() => triggerAction(stuckLoadingAction)}>
-                  Stay Loading
-                </button>
-                <button onClick={() => setCurrentAction(null)}>
-                  Clear Content
-                </button>
-              </div>
-              <div className="content-area">
-                <UITransition
-                  sizeTransition={sizeTransition}
-                  sizeTransitionDuration={sizeTransitionDuration}
-                  transitionType={transitionType}
-                  transitionDuration={transitionDuration}
-                  phaseTransitionType={phaseTransitionType}
-                  phaseTransitionDuration={phaseTransitionDuration}
-                >
-                  <ActionRenderer action={currentAction}>
-                    {{
-                      loading: () => {
-                        // Use the content key of what we're loading
-                        const contentKey =
-                          getContentKeyForAction(currentAction);
-                        return renderLoadingContent(contentKey);
-                      },
-                      error: (error) => {
-                        const contentKey =
-                          getContentKeyForAction(currentAction);
-                        return renderErrorContent(error, contentKey);
-                      },
-                      completed: (data) => {
-                        if (!data) return null;
-                        switch (data.contentType) {
-                          case "small":
-                            return renderSmallContent(data);
-                          case "medium":
-                            return renderMediumContent(data);
-                          case "large":
-                            return renderLargeContent(data);
-                          case "slow":
-                            return renderSlowContent(data);
-                          default:
-                            return renderSmallContent(data);
-                        }
-                      },
-                    }}
-                  </ActionRenderer>
-                </UITransition>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h2 className="demo-title">⚙️ Transition Configuration</h2>
-              <div className="config-section">
-                <h4>Content Transition Type</h4>
-                <div className="checkbox-group">
-                  <label>
-                    <input
-                      type="radio"
-                      name="transition-type"
-                      value="cross-fade"
-                      checked={transitionType === "cross-fade"}
-                      onChange={(e) =>
-                        handleTransitionTypeChange(e.target.value)
-                      }
-                    />
-                    Cross Fade
-                  </label>
-                  <label>
-                    <input
-                      type="radio"
-                      name="transition-type"
-                      value="slide-left"
-                      checked={transitionType === "slide-left"}
-                      onChange={(e) =>
-                        handleTransitionTypeChange(e.target.value)
-                      }
-                    />
-                    Slide Left
-                  </label>
-                </div>
-              </div>
-              <div className="config-section">
-                <h4>Phase Transition Type</h4>
-                <div className="checkbox-group">
-                  <label>
-                    <input
-                      type="radio"
-                      name="phase-transition-type"
-                      value="cross-fade"
-                      checked={phaseTransitionType === "cross-fade"}
-                      onChange={(e) =>
-                        handlePhaseTransitionTypeChange(e.target.value)
-                      }
-                    />
-                    Cross Fade
-                  </label>
-                  <label>
-                    <input
-                      type="radio"
-                      name="phase-transition-type"
-                      value="slide-left"
-                      checked={phaseTransitionType === "slide-left"}
-                      onChange={(e) =>
-                        handlePhaseTransitionTypeChange(e.target.value)
-                      }
-                    />
-                    Slide Left
-                  </label>
-                </div>
-                <p className="description">
-                  <strong>Content Transitions:</strong> Between different
-                  content keys (small → medium → large)
-                  <br />
-                  <strong>Phase Transitions:</strong> Between loading/content
-                  states (loading → content) for same key
-                </p>
-              </div>
-              <div className="config-section">
-                <h4>Content Transition Duration</h4>
-                <label style="display: flex; align-items: center; gap: 10px;">
-                  <span>Duration: {transitionDuration}ms</span>
-                  <input
-                    type="range"
-                    min="100"
-                    max="1000"
-                    step="50"
-                    value={transitionDuration}
-                    onChange={(e) =>
-                      handleTransitionDurationChange(parseInt(e.target.value))
-                    }
-                    style="flex: 1;"
-                  />
-                </label>
-              </div>
-              <div className="config-section">
-                <h4>Phase Transition Duration</h4>
-                <label style="display: flex; align-items: center; gap: 10px;">
-                  <span>Duration: {phaseTransitionDuration}ms</span>
-                  <input
-                    type="range"
-                    min="100"
-                    max="1000"
-                    step="50"
-                    value={phaseTransitionDuration}
-                    onChange={(e) =>
-                      handlePhaseTransitionDurationChange(
-                        parseInt(e.target.value),
-                      )
-                    }
-                    style="flex: 1;"
-                  />
-                </label>
-              </div>
-              <div className="config-section">
-                <h4>Size Transition</h4>
-                <div className="checkbox-group">
-                  <label>
-                    <input
-                      type="checkbox"
-                      checked={sizeTransition}
-                      onChange={(e) =>
-                        handleSizeTransitionChange(e.target.checked)
-                      }
-                    />
-                    Enable Size Transitions
-                  </label>
-                </div>
-                <p className="description">
-                  When enabled, the container smoothly animates to accommodate
-                  different content sizes. When disabled, size changes are
-                  instant.
-                </p>
-              </div>
-              <div className="config-section">
-                <h4>Size Transition Duration</h4>
-                <label style="display: flex; align-items: center; gap: 10px;">
-                  <span>Duration: {sizeTransitionDuration}ms</span>
-                  <input
-                    type="range"
-                    min="100"
-                    max="1000"
-                    step="50"
-                    value={sizeTransitionDuration}
-                    onChange={(e) =>
-                      handleSizeTransitionDurationChange(
-                        parseInt(e.target.value),
-                      )
-                    }
-                    style="flex: 1;"
-                    disabled={!sizeTransition}
-                  />
-                </label>
-                <p className="description">
-                  Controls how fast the container animates when content size
-                  changes. Only applies when size transitions are enabled.
-                </p>
-              </div>
-            </div>
-            <div className="demo-container">
-              <h2 className="demo-title">📝 What's Happening</h2>
-              <ul>
-                <li>
-                  <strong>UITransition Integration:</strong> ActionRenderer
-                  wraps all content in UITransition for smooth state changes
-                </li>
-                <li>
-                  <strong>Size Adaptation:</strong> Container can smoothly
-                  animate to accommodate different content sizes (when enabled)
-                </li>
-                <li>
-                  <strong>Optional Size Transitions:</strong> Toggle between
-                  instant and animated size changes using the "Enable Size
-                  Transitions" checkbox
-                </li>
-                <li>
-                  <strong>Content Phases:</strong> Loading and error states are
-                  marked with <code>data-content-phase</code>
-                </li>
-                <li>
-                  <strong>Content Keys:</strong> Each content type has a unique{" "}
-                  <code>data-content-key</code> for transition tracking
-                </li>
-                <li>
-                  <strong>Stay Loading:</strong> The "Stay Loading" button
-                  demonstrates persistent loading states that never complete
-                </li>
-              </ul>
-            </div>
-            <div className="demo-container">
-              <h2 className="demo-title">🔧 Developer Tools</h2>
-              <p>
-                Open browser dev tools and watch the console for debug logs
-                showing:
-              </p>
-              <ul>
-                <li>Size measurements and transitions</li>
-                <li>Content key changes and transition scenarios</li>
-                <li>Resize observer events</li>
-                <li>Animation progress and completion</li>
-              </ul>
-            </div>
-          </div>
-        );
-      };
-      render(<App />, document.querySelector("#root"));
-    </script>
-  </body>
-</html>