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/10_column_reordering_debug.html DELETED Viewed

@@ -1,277 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Column Reordering Debug Demo</title>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
-        background: #f5f5f5;
-      }
-      .debug-section {
-        background: white;
-        padding: 15px;
-        margin: 10px 0;
-        border-radius: 4px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      .controls {
-        margin: 10px 0;
-        display: flex;
-        gap: 10px;
-        align-items: center;
-      }
-      button {
-        padding: 8px 16px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-      }
-      .btn-primary {
-        background: #007bff;
-        color: white;
-      }
-      .btn-success {
-        background: #28a745;
-        color: white;
-      }
-      .btn-warning {
-        background: #ffc107;
-        color: black;
-      }
-      .log {
-        background: #2d3748;
-        color: #68d391;
-        padding: 12px;
-        border-radius: 4px;
-        font-family: "Courier New", monospace;
-        font-size: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-        white-space: pre-wrap;
-        margin: 10px 0;
-      }
-      .state-display {
-        background: #f7fafc;
-        border: 1px solid #e2e8f0;
-        border-radius: 4px;
-        padding: 12px;
-        margin: 10px 0;
-      }
-      pre {
-        margin: 0;
-        font-size: 12px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Column Reordering Debug Demo</h1>
-    <p>
-      Simple demo with 3 columns and 1 row to debug column reordering issues.
-    </p>
-    <div class="debug-section">
-      <h2>Debug Log</h2>
-      <div id="log" class="log"></div>
-      <button onclick="clearLog()" class="btn-warning">Clear Log</button>
-    </div>
-    <div class="debug-section">
-      <h2>Demo</h2>
-      <div id="root"></div>
-    </div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState } from "preact/hooks";
-      /* eslint-disable no-unused-vars */
-      import {
-        Table,
-        Colgroup,
-        Col,
-        RowNumberCol,
-        Thead,
-        Tbody,
-        Tr,
-        TableCell,
-        RowNumberTableCell,
-      } from "../table/table.jsx";
-      /* eslint-enable no-unused-vars */
-      import { useCellsAndColumns } from "../table/use_cells_and_columns.js";
-      window.clearLog = () => {
-        document.getElementById("log").textContent = "";
-      };
-      const log = (message) => {
-        const timestamp = new Date().toLocaleTimeString();
-        const logElement = document.getElementById("log");
-        logElement.textContent += `[${timestamp}] ${message}\n`;
-        logElement.scrollTop = logElement.scrollHeight;
-        console.log(`[DEBUG] ${message}`);
-      };
-      // eslint-disable-next-line no-unused-vars
-      const ColumnReorderingDemo = () => {
-        // Initial column configuration
-        const [columnConfig] = useState([
-          { id: "col1", name: "Column A", backgroundColor: "#ffebee" },
-          { id: "col2", name: "Column B", backgroundColor: "#e8f5e8" },
-          { id: "col3", name: "Column C", backgroundColor: "#e3f2fd" },
-        ]);
-        // Simple single row of data
-        const initialCellData = [["A1", "B1", "C1"]];
-        const { cells, setCellValue, columns, setColumnOrder } =
-          useCellsAndColumns(initialCellData, columnConfig);
-        // Get current column order for logging and display
-        const columnOrderedIds = columns.map((col) => col.id);
-        log(`🎬 Demo render - columnOrder: [${columnOrderedIds.join(", ")}]`);
-        const handleColumnOrderChange = (newColumnOrder) => {
-          log(
-            `🔄 Column order changing from [${columnOrderedIds.join(", ")}] to [${newColumnOrder.join(", ")}]`,
-          );
-          setColumnOrder(newColumnOrder);
-        };
-        const handleCellEdit = ({ rowIndex, columnIndex }, value) => {
-          log(
-            `✏️ Cell edit: row=${rowIndex}, col=${columnIndex}, value="${value}"`,
-          );
-          setCellValue({ rowIndex, columnIndex }, value);
-        };
-        // Test buttons for manual reordering
-        const moveFirstToLast = () => {
-          const newOrder = [
-            columnOrderedIds[1],
-            columnOrderedIds[2],
-            columnOrderedIds[0],
-          ];
-          handleColumnOrderChange(newOrder);
-        };
-        const moveLastToFirst = () => {
-          const newOrder = [
-            columnOrderedIds[2],
-            columnOrderedIds[0],
-            columnOrderedIds[1],
-          ];
-          handleColumnOrderChange(newOrder);
-        };
-        const resetOrder = () => {
-          handleColumnOrderChange(["col1", "col2", "col3"]);
-        };
-        return (
-          <div>
-            <div className="controls">
-              <button onClick={moveFirstToLast} className="btn-primary">
-                Move First → Last
-              </button>
-              <button onClick={moveLastToFirst} className="btn-primary">
-                Move Last → First
-              </button>
-              <button onClick={resetOrder} className="btn-success">
-                Reset Order
-              </button>
-            </div>
-            <div className="state-display">
-              <h3>Current State</h3>
-              <div>
-                <strong>Column Order:</strong> [{columnOrderedIds.join(", ")}]
-              </div>
-              <div>
-                <strong>Cell Values:</strong>
-              </div>
-              <pre>{JSON.stringify(cells, null, 2)}</pre>
-            </div>
-            <Table
-              onColumnOrderChange={handleColumnOrderChange}
-              maxWidth={600}
-              maxHeight={400}
-            >
-              <Colgroup>
-                <RowNumberCol width={50} />
-                {columns.map((col) => {
-                  log(`🏗️ Rendering Col: id=${col.id}, width=${col?.width}`);
-                  return (
-                    <Col
-                      key={col.id}
-                      id={col.id}
-                      width={col?.width}
-                      backgroundColor={col.backgroundColor}
-                    />
-                  );
-                })}
-              </Colgroup>
-              <Thead>
-                <Tr>
-                  <RowNumberTableCell />
-                  {columns.map((col) => {
-                    log(`🏗️ Rendering Header: id=${col.id}, name=${col?.name}`);
-                    const rowId = "header";
-                    const columnId = col.id;
-                    const tableCellKey = `${columnId}-${rowId}`;
-                    return (
-                      <TableCell key={tableCellKey}>
-                        {col?.name} (id: {col.id})
-                      </TableCell>
-                    );
-                  })}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {cells.map((rowValues, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <RowNumberTableCell />
-                    {rowValues.map((cellValue, columnIndex) => {
-                      log(
-                        `🏗️ Rendering Cell: rowIndex=${rowIndex}, columnIndex=${columnIndex},  value="${cellValue}"`,
-                      );
-                      const rowId = rowIndex;
-                      const columnId = columns[columnIndex].id;
-                      // const tableCellKey = columnId;
-                      const tableCellKey = `${columnId}-${rowId}`;
-                      return (
-                        <TableCell
-                          key={tableCellKey}
-                          action={(value) =>
-                            handleCellEdit({ rowIndex, columnIndex }, value)
-                          }
-                        >
-                          {cellValue}
-                        </TableCell>
-                      );
-                    })}
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-            <div className="state-display">
-              <h3>Column Configuration</h3>
-              <pre>{JSON.stringify(columnConfig, null, 2)}</pre>
-            </div>
-          </div>
-        );
-      };
-      // Initial render
-      log("🚀 Starting Column Reordering Demo");
-      render(<ColumnReorderingDemo />, document.getElementById("root"));
-    </script>
-  </body>
-</html>

package/src/components/demos/11_table_selection_debug.html DELETED Viewed

@@ -1,432 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Table Selection Debug Demo</title>
-    <meta charset="utf-8" />
-    <link rel="icon" href="data:," />
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        margin: 20px;
-        background: #f5f5f5;
-      }
-      .debug-section {
-        background: white;
-        padding: 15px;
-        margin: 10px 0;
-        border-radius: 4px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      .controls {
-        margin: 10px 0;
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        flex-wrap: wrap;
-      }
-      button {
-        padding: 8px 16px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-      }
-      .btn-primary {
-        background: #007bff;
-        color: white;
-      }
-      .btn-success {
-        background: #28a745;
-        color: white;
-      }
-      .btn-warning {
-        background: #ffc107;
-        color: black;
-      }
-      .btn-danger {
-        background: #dc3545;
-        color: white;
-      }
-      .log {
-        background: #2d3748;
-        color: #68d391;
-        padding: 12px;
-        border-radius: 4px;
-        font-family: "Courier New", monospace;
-        font-size: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-        white-space: pre-wrap;
-        margin: 10px 0;
-      }
-      .state-display {
-        background: #f7fafc;
-        border: 1px solid #e2e8f0;
-        border-radius: 4px;
-        padding: 12px;
-        margin: 10px 0;
-      }
-      pre {
-        margin: 0;
-        font-size: 12px;
-      }
-      .selection-info {
-        background: #fff3cd;
-        border: 1px solid #ffeeba;
-        border-radius: 4px;
-        padding: 10px;
-        margin: 10px 0;
-      }
-      .coordinate-buttons {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 5px;
-        max-width: 250px;
-      }
-      .coord-label {
-        font-weight: bold;
-        text-align: center;
-        background: #e9ecef;
-        padding: 5px;
-        border-radius: 3px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Table Selection Debug Demo</h1>
-    <p>Simple 2x2 table to debug selection behavior and external control.</p>
-    <div class="debug-section">
-      <h2>External Selection Controls</h2>
-      <div class="controls">
-        <button id="select-none" class="btn-danger">Clear Selection</button>
-        <button id="select-all" class="btn-primary">Select All</button>
-        <button id="select-row-0" class="btn-primary">Select Row 0</button>
-        <button id="select-row-1" class="btn-primary">Select Row 1</button>
-        <button id="select-col-0" class="btn-primary">Select Column 0</button>
-        <button id="select-col-1" class="btn-primary">Select Column 1</button>
-      </div>
-      <h3>Select Individual Cells</h3>
-      <div class="coordinate-buttons">
-        <button id="select-header-rownumber" class="btn-success">Row#</button>
-        <button id="select-header-0" class="btn-success">H(0)</button>
-        <button id="select-header-1" class="btn-success">H(1)</button>
-        <button id="select-rownumber-0" class="btn-success">R#1</button>
-        <button id="select-0-0" class="btn-success">(1,1)</button>
-        <button id="select-0-1" class="btn-success">(1,2)</button>
-        <button id="select-rownumber-1" class="btn-success">R#2</button>
-        <button id="select-1-0" class="btn-success">(2,1)</button>
-        <button id="select-1-1" class="btn-success">(2,2)</button>
-      </div>
-    </div>
-    <div class="debug-section">
-      <h2>Demo Table (2x2)</h2>
-      <div id="root"></div>
-    </div>
-    <div class="debug-section">
-      <h2>Selection State</h2>
-      <div id="selection-state" class="selection-info">
-        No selection data yet...
-      </div>
-    </div>
-    <div class="debug-section">
-      <h2>Debug Log</h2>
-      <div id="log" class="log"></div>
-      <button onclick="clearLog()" class="btn-warning">Clear Log</button>
-    </div>
-    <script type="module" jsenv-type="module/jsx">
-      import { render } from "preact";
-      import { useState, useEffect } from "preact/hooks";
-      /* eslint-disable no-unused-vars */
-      import {
-        Table,
-        Colgroup,
-        Col,
-        RowNumberCol,
-        Thead,
-        Tbody,
-        Tr,
-        TableCell,
-        RowNumberTableCell,
-      } from "../table/table.jsx";
-      /* eslint-enable no-unused-vars */
-      import { useCellsAndColumns } from "../table/use_cells_and_columns.js";
-      import {
-        stringifyTableSelectionValue,
-        isCellSelected,
-      } from "../table/selection/table_selection.js";
-      window.clearLog = () => {
-        document.getElementById("log").textContent = "";
-      };
-      const log = (message) => {
-        const timestamp = new Date().toLocaleTimeString();
-        const logElement = document.getElementById("log");
-        logElement.textContent += `[${timestamp}] ${message}\n`;
-        logElement.scrollTop = logElement.scrollHeight;
-        console.log(`[DEBUG] ${message}`);
-      };
-      const updateSelectionDisplay = (selection) => {
-        const selectionElement = document.getElementById("selection-state");
-        if (!selection || selection.size === 0) {
-          selectionElement.innerHTML = "<strong>No selection</strong>";
-          return;
-        }
-        const selectionArray = Array.from(selection);
-        const cellSelections = [];
-        const rowSelections = [];
-        const columnSelections = [];
-        selectionArray.forEach((item) => {
-          if (item.startsWith("row:")) {
-            rowSelections.push(item.slice(4));
-          } else if (item.startsWith("column:")) {
-            columnSelections.push(item.slice(7));
-          } else {
-            cellSelections.push(`(${item})`);
-          }
-        });
-        let displayParts = [];
-        if (cellSelections.length > 0)
-          displayParts.push(`Cells: ${cellSelections.join(", ")}`);
-        if (rowSelections.length > 0)
-          displayParts.push(`Rows: ${rowSelections.join(", ")}`);
-        if (columnSelections.length > 0)
-          displayParts.push(`Columns: ${columnSelections.join(", ")}`);
-        selectionElement.innerHTML = `
-          <strong>Selection:</strong> ${displayParts.join(" | ")}<br>
-          <strong>Total count:</strong> ${selection.size}<br>
-          <strong>Raw values:</strong> ${selectionArray.join(", ")}
-        `;
-      };
-      // eslint-disable-next-line no-unused-vars
-      const TableSelectionDemo = () => {
-        // Simple 2x2 table configuration
-        const [columnConfig] = useState([
-          { id: "col1", name: "Column A" },
-          { id: "col2", name: "Column B" },
-        ]);
-        // 2x2 cell data
-        const initialCellData = [
-          ["A1", "B1"],
-          ["A2", "B2"],
-        ];
-        const { cells, setCellValue, columns } = useCellsAndColumns(
-          initialCellData,
-          columnConfig,
-        );
-        // Selection state (controlled from outside)
-        const [selectedCells, setSelectedCells] = useState([]);
-        // Log selection changes
-        useEffect(() => {
-          log(
-            `🎯 Selection changed: ${Array.from(selectedCells).join(", ") || "none"}`,
-          );
-          updateSelectionDisplay(selectedCells);
-        }, [selectedCells]);
-        const handleCellEdit = ({ rowIndex, columnIndex }, value) => {
-          log(
-            `✏️ Cell edit: row=${rowIndex}, col=${columnIndex}, value="${value}"`,
-          );
-          setCellValue({ rowIndex, columnIndex }, value);
-        };
-        const handleSelectionChange = (newSelection) => {
-          log(`🔄 Selection changing from internal table interaction`);
-          setSelectedCells(newSelection);
-        };
-        // External control functions
-        const selectNone = () => {
-          log(`🚫 External: Clear selection`);
-          setSelectedCells([]);
-        };
-        const selectAll = () => {
-          log(`📱 External: Select all cells`);
-          const allCells = [
-            stringifyTableSelectionValue("cell", {
-              rowIndex: 0,
-              columnIndex: 0,
-            }),
-            stringifyTableSelectionValue("cell", {
-              rowIndex: 0,
-              columnIndex: 1,
-            }),
-            stringifyTableSelectionValue("cell", {
-              rowIndex: 1,
-              columnIndex: 0,
-            }),
-            stringifyTableSelectionValue("cell", {
-              rowIndex: 1,
-              columnIndex: 1,
-            }),
-          ];
-          setSelectedCells(allCells);
-        };
-        const selectRow = (rowIndex) => {
-          log(`📏 External: Select row ${rowIndex}`);
-          const rowValue = stringifyTableSelectionValue("row", rowIndex);
-          setSelectedCells([rowValue]);
-        };
-        const selectColumn = (columnIndex) => {
-          log(`📐 External: Select column ${columnIndex}`);
-          const columnValue = stringifyTableSelectionValue(
-            "column",
-            columnIndex,
-          );
-          setSelectedCells([columnValue]);
-        };
-        const selectCell = (rowIndex, columnIndex) => {
-          log(`🎯 External: Select single cell (${rowIndex},${columnIndex})`);
-          const cellValue = stringifyTableSelectionValue("cell", {
-            rowIndex,
-            columnIndex,
-          });
-          setSelectedCells([cellValue]);
-        };
-        const selectHeaderCell = (columnIndex) => {
-          log(`📋 External: Select header cell for column ${columnIndex}`);
-          // Headers are at row index -1 in the visual table
-          const headerValue = stringifyTableSelectionValue("cell", {
-            rowIndex: 0,
-            columnIndex,
-          });
-          setSelectedCells([headerValue]);
-        };
-        const selectRowNumberCell = (rowIndex) => {
-          log(`🔢 External: Select row number cell for row ${rowIndex}`);
-          // Row numbers are at column index -1 in the visual table
-          const rowNumberValue = stringifyTableSelectionValue("cell", {
-            rowIndex,
-            columnIndex: 0,
-          });
-          setSelectedCells([rowNumberValue]);
-        };
-        const selectHeaderRowNumberCell = () => {
-          log(`🏠 External: Select header row number cell`);
-          // Corner cell is at (-1, -1) in the visual table
-          const cornerValue = stringifyTableSelectionValue("cell", {
-            rowIndex: 0,
-            columnIndex: 0,
-          });
-          setSelectedCells([cornerValue]);
-        };
-        // Setup external control button handlers
-        useEffect(() => {
-          const setupButton = (id, handler) => {
-            const button = document.getElementById(id);
-            if (button) {
-              button.onclick = handler;
-            }
-          };
-          setupButton("select-none", selectNone);
-          setupButton("select-all", selectAll);
-          setupButton("select-row-0", () => selectRow(0));
-          setupButton("select-row-1", () => selectRow(1));
-          setupButton("select-col-0", () => selectColumn(0));
-          setupButton("select-col-1", () => selectColumn(1));
-          setupButton("select-0-0", () => selectCell(1, 1));
-          setupButton("select-0-1", () => selectCell(1, 2));
-          setupButton("select-1-0", () => selectCell(2, 1));
-          setupButton("select-1-1", () => selectCell(2, 2));
-          // Header cells: visual column 0 and 1 at header row -1
-          setupButton("select-header-rownumber", selectHeaderRowNumberCell);
-          setupButton("select-header-0", () => selectHeaderCell(1));
-          setupButton("select-header-1", () => selectHeaderCell(2));
-          // Row number cells: visual row 0 and 1 at row number column -1
-          setupButton("select-rownumber-0", () => selectRowNumberCell(1));
-          setupButton("select-rownumber-1", () => selectRowNumberCell(2));
-        }, []);
-        log(`🎬 Demo render - cells: ${cells.length}x${cells[0]?.length}`);
-        return (
-          <div>
-            <Table
-              selection={selectedCells}
-              onSelectionChange={handleSelectionChange}
-              maxWidth={400}
-              maxHeight={300}
-            >
-              <Colgroup>
-                <RowNumberCol width={60} />
-                {columns.map((col) => {
-                  log(`🏗️ Rendering Col: id=${col.id}`);
-                  return <Col key={col.id} id={col.id} width={120} />;
-                })}
-              </Colgroup>
-              <Thead>
-                <Tr>
-                  <RowNumberTableCell />
-                  {columns.map((col) => {
-                    log(`🏗️ Rendering Header: id=${col.id}, name=${col?.name}`);
-                    return <TableCell key={col.id}>{col?.name}</TableCell>;
-                  })}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {cells.map((rowValues, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <RowNumberTableCell />
-                    {rowValues.map((cellValue, columnIndex) => {
-                      const isSelected = isCellSelected(selectedCells, {
-                        rowIndex,
-                        columnIndex,
-                      });
-                      log(
-                        `🏗️ Rendering Cell: (${rowIndex},${columnIndex}) value="${cellValue}" selected=${isSelected}`,
-                      );
-                      return (
-                        <TableCell
-                          key={columnIndex}
-                          action={(value) =>
-                            handleCellEdit({ rowIndex, columnIndex }, value)
-                          }
-                          backgroundColor="yellow"
-                        >
-                          {cellValue}
-                        </TableCell>
-                      );
-                    })}
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </div>
-        );
-      };
-      // Initial render
-      log("🚀 Starting Table Selection Demo");
-      render(<TableSelectionDemo />, document.getElementById("root"));
-    </script>
-  </body>
-</html>