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/callout/callout_demo.html DELETED Viewed

@@ -1,201 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Simple Callout Demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-    <style>
-      body {
-        min-height: 300vh; /* Make page scrollable */
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-        background: linear-gradient(45deg, #f0f8ff, #e6f3ff);
-      }
-      .container {
-        max-width: 800px;
-        margin: 0 auto;
-      }
-      .section {
-        margin: 40px 0;
-        padding: 20px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-      .target-element {
-        display: inline-block;
-        margin: 10px;
-        padding: 12px 20px;
-        color: white;
-        font-size: 16px;
-        background: #4caf50;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      .target-element:hover {
-        background: #45a049;
-      }
-      .spacer {
-        display: flex;
-        height: 200px;
-        margin: 40px 0;
-        align-items: center;
-        justify-content: center;
-        color: #666;
-        font-weight: bold;
-        font-size: 18px;
-        background: repeating-linear-gradient(
-          45deg,
-          transparent,
-          transparent 20px,
-          rgba(0, 0, 0, 0.1) 20px,
-          rgba(0, 0, 0, 0.1) 40px
-        );
-      }
-      .scroll-instruction {
-        position: fixed;
-        top: 10px;
-        right: 10px;
-        z-index: 1000;
-        padding: 10px;
-        color: white;
-        font-size: 14px;
-        background: #333;
-        border-radius: 4px;
-      }
-      .scrollable-container {
-        width: 100%;
-        height: 300px;
-        padding: 20px;
-        background: #f9f9f9;
-        border: 2px solid #ddd;
-        border-radius: 8px;
-        overflow: auto;
-      }
-      .scrollable-content {
-        display: flex;
-        width: 800px;
-        height: 600px;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        background: repeating-linear-gradient(
-          45deg,
-          transparent,
-          transparent 30px,
-          rgba(0, 0, 255, 0.1) 30px,
-          rgba(0, 0, 255, 0.1) 60px
-        );
-      }
-    </style>
-  </head>
-  <body>
-    <div class="scroll-instruction">Scroll to test callout positioning</div>
-    <div class="container">
-      <h1>Simple Callout Demo</h1>
-      <p>
-        This demo shows how the callout follows its target element during
-        scrolling.
-      </p>
-      <div class="section">
-        <h2>Auto-opened Callout</h2>
-        <p>This callout opens automatically when the page loads:</p>
-        <p>
-          <strong
-            >Scroll inside the container below to test positioning within a
-            scrollable parent:</strong
-          >
-        </p>
-        <div class="scrollable-container">
-          <div class="scrollable-content">
-            <div>Top of scrollable area</div>
-            <button id="auto-target" class="target-element">
-              Target Element (Auto-opened message)
-            </button>
-            <div>Bottom of scrollable area</div>
-          </div>
-        </div>
-      </div>
-      <div class="spacer">
-        Scroll Area 1 - Keep scrolling to test positioning
-      </div>
-      <div class="section">
-        <h2>Middle Section</h2>
-        <p>
-          The callout should follow the target element as you scroll past this
-          section.
-        </p>
-      </div>
-      <div class="spacer">Scroll Area 2 - More scrolling space</div>
-      <div class="section">
-        <h2>Another Section</h2>
-        <p>
-          Continue scrolling to test the message positioning at different scroll
-          positions.
-        </p>
-      </div>
-      <div class="spacer">Scroll Area 3 - Bottom section</div>
-      <div class="section">
-        <h2>Final Section</h2>
-        <p>Scroll back up to see how the callout behaves.</p>
-      </div>
-      <div
-        style="
-          height: 50vh;
-          background: #f0f0f0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 40px;
-        "
-      >
-        <p>Bottom spacer - scroll back up to see callouts</p>
-      </div>
-    </div>
-    <script type="module">
-      import { openCallout } from "@jsenv/navi";
-      // Auto-open callout on page load
-      window.addEventListener("load", () => {
-        const autoTarget = document.getElementById("auto-target");
-        openCallout(
-          `This is a very long callout that was opened automatically when the page loaded. <strong>Try scrolling both horizontally and vertically</strong> within the container to see how the callout follows the target element! This message is intentionally made very long to test how the positioning system handles callouts that exceed the visible area of their container. The callout should properly position itself even when parts of it would normally be clipped by the container boundaries. You can scroll in any direction - up, down, left, right - to test the robustness of the positioning algorithm. This lengthy content helps verify that the callout system can handle edge cases where the callout content is larger than the available viewport space within scrollable containers.`,
-          {
-            anchorElement: autoTarget,
-            level: "warning",
-            debug: true,
-            canClickThrough: true,
-            onClose: () => {
-              console.log("Callout was closed");
-            },
-          },
-        );
-      });
-      console.log(
-        "Simple callout demo loaded. Check console for debug output.",
-      );
-    </script>
-  </body>
-</html>

package/src/components/callout/test_dynamic_positioning.html DELETED Viewed

@@ -1,161 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Dynamic Callout Positioning Test</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-      }
-      .anchor {
-        display: inline-block;
-        margin: 10px;
-        padding: 10px 20px;
-        color: white;
-        background: #007acc;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      .test-section {
-        margin: 40px 0;
-        padding: 20px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-      }
-      .resize-controls {
-        position: fixed;
-        top: 10px;
-        right: 10px;
-        z-index: 1000;
-        padding: 10px;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      .large-anchor {
-        display: flex;
-        width: 300px;
-        height: 200px;
-        margin: 20px;
-        align-items: center;
-        justify-content: center;
-        background: #28a745;
-      }
-      .tiny-anchor {
-        display: flex;
-        width: 50px;
-        height: 20px;
-        margin: 20px;
-        align-items: center;
-        justify-content: center;
-        font-size: 12px;
-        background: #dc3545;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="resize-controls">
-      <button onclick="resizeWindow(800, 600)">Small (800x600)</button>
-      <button onclick="resizeWindow(1200, 800)">Medium (1200x800)</button>
-      <button onclick="resizeWindow(1600, 1000)">Large (1600x1000)</button>
-      <div>Current: <span id="current-size"></span></div>
-    </div>
-    <div class="test-section">
-      <h2>Test 1: Normal anchor element</h2>
-      <div
-        class="anchor"
-        id="anchor1"
-        onclick="openTestCallout(this, 'Normal anchor test')"
-      >
-        Click me - Normal anchor
-      </div>
-      <p>
-        This should show an anchored callout with arrow when viewport is large
-        enough.
-      </p>
-    </div>
-    <div class="test-section">
-      <h2>Test 2: Large anchor element</h2>
-      <div
-        class="large-anchor"
-        id="anchor2"
-        onclick="openTestCallout(this, 'Large anchor test - should be centered when too big for viewport')"
-      >
-        Large Anchor Element
-      </div>
-      <p>
-        This should center in viewport when anchor is too large relative to
-        viewport height.
-      </p>
-    </div>
-    <div class="test-section">
-      <h2>Test 3: Tiny anchor element</h2>
-      <div
-        class="tiny-anchor"
-        id="anchor3"
-        onclick="openTestCallout(this, 'Tiny anchor test')"
-      >
-        Tiny
-      </div>
-      <p>This should work with anchored positioning in most cases.</p>
-    </div>
-    <script type="module">
-      import { openCallout } from "./callout.js";
-      let currentCallout = null;
-      window.openTestCallout = (anchorElement, message) => {
-        // Close existing callout
-        if (currentCallout) {
-          currentCallout.close();
-        }
-        currentCallout = openCallout({
-          anchorElement,
-          calloutElement: createCalloutContent(message),
-          level: "info",
-          debug: true,
-        });
-      };
-      function createCalloutContent(message) {
-        const div = document.createElement("div");
-        div.style.padding = "20px";
-        div.style.maxWidth = "300px";
-        div.style.background = "white";
-        div.innerHTML = `
-        <h3>Dynamic Positioning Test</h3>
-        <p>${message}</p>
-        <p>Window size: ${window.innerWidth} x ${window.innerHeight}</p>
-        <button onclick="currentCallout?.close()">Close</button>
-      `;
-        return div;
-      }
-      window.resizeWindow = (width, height) => {
-        window.resizeTo(width, height);
-        updateSizeDisplay();
-      };
-      function updateSizeDisplay() {
-        document.getElementById("current-size").textContent =
-          `${window.innerWidth} x ${window.innerHeight}`;
-      }
-      // Update size display on load and resize
-      window.addEventListener("load", updateSizeDisplay);
-      window.addEventListener("resize", updateSizeDisplay);
-      // Test automatic strategy changes on resize
-      window.addEventListener("resize", () => {
-        console.debug("Window resized, callout should re-evaluate strategy");
-      });
-    </script>
-  </body>
-</html>

package/src/components/callout/test_html_document_iframe.html DELETED Viewed

@@ -1,182 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Test HTML Document in Callout</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-      }
-      .test-button {
-        display: inline-block;
-        margin: 10px;
-        padding: 10px 20px;
-        color: white;
-        font-size: 14px;
-        background: #007acc;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      .test-section {
-        margin: 40px 0;
-        padding: 20px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-      }
-      pre {
-        padding: 10px;
-        font-size: 12px;
-        background: #f5f5f5;
-        border-radius: 4px;
-        overflow-x: auto;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>HTML Document in Callout Test</h1>
-    <div class="test-section">
-      <h2>Test 1: Regular HTML content (no DOCTYPE)</h2>
-      <button class="test-button" onclick="showRegularHtml()">
-        Show Regular HTML
-      </button>
-      <p>This should display as normal innerHTML (no iframe).</p>
-    </div>
-    <div class="test-section">
-      <h2>Test 2: Complete HTML document (with DOCTYPE)</h2>
-      <button class="test-button" onclick="showHtmlDocument()">
-        Show HTML Document
-      </button>
-      <p>This should display in an iframe to prevent style conflicts.</p>
-    </div>
-    <div class="test-section">
-      <h2>Test 3: HTML document with conflicting styles</h2>
-      <button class="test-button" onclick="showConflictingStylesDocument()">
-        Show Document with Conflicting Styles
-      </button>
-      <p>This demonstrates how iframe isolation prevents style conflicts.</p>
-    </div>
-    <script type="module">
-      import { openCallout } from "@jsenv/navi";
-      let currentCallout = null;
-      function closeCurrentCallout() {
-        if (currentCallout) {
-          currentCallout.close();
-          currentCallout = null;
-        }
-      }
-      window.showRegularHtml = () => {
-        closeCurrentCallout();
-        const regularHtml = `
-        <h3>Regular HTML Content</h3>
-        <p>This is just regular HTML content without DOCTYPE.</p>
-        <ul>
-          <li>Item 1</li>
-          <li>Item 2</li>
-          <li>Item 3</li>
-        </ul>
-        <p><strong>Note:</strong> This should display as innerHTML, not in an iframe.</p>
-      `;
-        currentCallout = openCallout(regularHtml, {
-          level: "info",
-          debug: true,
-        });
-      };
-      window.showHtmlDocument = () => {
-        closeCurrentCallout();
-        const htmlDocument = `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Embedded Document</title>
-  <style>
-    body {
-      font-family: Georgia, serif;
-      background: linear-gradient(45deg, #e3f2fd, #fff3e0);
-      margin: 0;
-      padding: 20px;
-    }
-    h1 { color: #1976d2; }
-    .highlight { background: yellow; padding: 2px 4px; }
-  </style>
-</head>
-<body>
-  <h1>Complete HTML Document</h1>
-  <p>This is a <span class="highlight">complete HTML document</span> with its own styles.</p>
-  <p>It's displayed in an iframe to prevent any style conflicts with the parent page.</p>
-  <div style="border: 2px solid #4caf50; padding: 10px; margin: 10px 0; border-radius: 8px;">
-    <strong>Isolated Environment:</strong> This document has its own CSS and doesn't interfere with the callout styles.
-  </div>
-</body>
-</html>`;
-        currentCallout = openCallout(htmlDocument, {
-          level: "warning",
-          debug: true,
-        });
-      };
-      window.showConflictingStylesDocument = () => {
-        closeCurrentCallout();
-        const conflictingDocument = `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Conflicting Styles</title>
-  <style>
-    /* These styles would conflict with the main page if not isolated */
-    body {
-      background: #ff5722;
-      color: white;
-      font-family: 'Comic Sans MS', cursive;
-      margin: 0;
-      padding: 15px;
-    }
-    button {
-      background: #4caf50;
-      color: white;
-      border: none;
-      padding: 8px 16px;
-      border-radius: 20px;
-      cursor: pointer;
-    }
-    .navi_callout {
-      /* This would break the callout if not isolated */
-      display: none !important;
-    }
-  </style>
-</head>
-<body>
-  <h1>🎨 Document with Conflicting Styles</h1>
-  <p>This document has styles that would completely break the callout if not isolated in an iframe!</p>
-  <button onclick="alert('This button works inside the iframe!')">Click me!</button>
-  <p><em>Notice how the styles don't affect the callout container.</em></p>
-</body>
-</html>`;
-        currentCallout = openCallout(conflictingDocument, {
-          level: "error",
-          debug: true,
-        });
-      };
-      // Close callout on escape key
-      document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
-          closeCurrentCallout();
-        }
-      });
-    </script>
-  </body>
-</html>