npm - @jsenv/navi - Versions diffs - 0.0.1 → 0.1.1 - Mend

@jsenv/navi 0.0.1 → 0.1.1

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 (139) hide show

package/dist/jsenv_navi.js +22959 -0
package/index.js +66 -16
package/package.json +23 -11
package/src/actions.js +50 -26
package/src/browser_integration/browser_integration.js +31 -6
package/src/browser_integration/via_history.js +42 -9
package/src/components/action_execution/render_actionable_component.jsx +6 -4
package/src/components/action_execution/use_action.js +51 -282
package/src/components/action_execution/use_execute_action.js +106 -92
package/src/components/action_execution/use_run_on_mount.js +9 -0
package/src/components/action_renderer.jsx +21 -32
package/src/components/demos/0_button_demo.html +574 -103
package/src/components/demos/10_column_reordering_debug.html +277 -0
package/src/components/demos/11_table_selection_debug.html +432 -0
package/src/components/demos/1_checkbox_demo.html +579 -202
package/src/components/demos/2_input_textual_demo.html +81 -138
package/src/components/demos/3_radio_demo.html +0 -2
package/src/components/demos/4_select_demo.html +19 -23
package/src/components/demos/6_tablist_demo.html +77 -0
package/src/components/demos/7_table_selection_demo.html +176 -0
package/src/components/demos/8_table_fixed_headers_demo.html +584 -0
package/src/components/demos/9_table_column_drag_demo.html +325 -0
package/src/components/demos/action/0_button_demo.html +2 -4
package/src/components/demos/action/1_input_text_demo.html +643 -222
package/src/components/demos/action/3_details_demo.html +146 -115
package/src/components/demos/action/4_input_checkbox_demo.html +442 -322
package/src/components/demos/action/5_input_checkbox_state_demo.html +270 -0
package/src/components/demos/action/6_checkbox_list_demo.html +304 -72
package/src/components/demos/action/7_radio_list_demo.html +310 -170
package/src/components/demos/action/{8_editable_text_demo.html → 8_editable_demo.html} +65 -76
package/src/components/demos/action/9_link_demo.html +84 -62
package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +695 -0
package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +429 -0
package/src/components/demos/ui_transition/2_height_transition_test.html +295 -0
package/src/components/details/details.jsx +62 -64
package/src/components/edition/editable.jsx +186 -0
package/src/components/field/README.md +247 -0
package/src/components/{input → field}/button.jsx +151 -130
package/src/components/field/checkbox_list.jsx +184 -0
package/src/components/{collect_form_element_values.js → field/collect_form_element_values.js} +7 -4
package/src/components/{input → field}/field_css.js +4 -1
package/src/components/field/form.jsx +211 -0
package/src/components/{input → field}/input.jsx +1 -0
package/src/components/{input → field}/input_checkbox.jsx +132 -155
package/src/components/{input → field}/input_radio.jsx +135 -46
package/src/components/field/input_textual.jsx +418 -0
package/src/components/field/label.jsx +32 -0
package/src/components/field/radio_list.jsx +182 -0
package/src/components/{input → field}/select.jsx +17 -32
package/src/components/field/use_action_events.js +132 -0
package/src/components/field/use_form_events.js +55 -0
package/src/components/field/use_ui_state_controller.js +506 -0
package/src/components/item_tracker/README.md +461 -0
package/src/components/item_tracker/use_isolated_item_tracker.jsx +209 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.html +148 -0
package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +460 -0
package/src/components/item_tracker/use_item_tracker.jsx +143 -0
package/src/components/item_tracker/use_item_tracker_demo.html +207 -0
package/src/components/item_tracker/use_item_tracker_demo.jsx +216 -0
package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +87 -0
package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +61 -0
package/src/components/keyboard_shortcuts/keyboard_key_meta.js +17 -0
package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +371 -0
package/src/components/link/link.jsx +65 -102
package/src/components/link/link_with_icon.jsx +52 -0
package/src/components/loader/loader_background.jsx +85 -64
package/src/components/loader/rectangle_loading.jsx +38 -19
package/src/components/route.jsx +8 -4
package/src/components/selection/selection.jsx +1583 -0
package/src/components/svg/font_sized_svg.jsx +45 -0
package/src/components/svg/icon_and_text.jsx +21 -0
package/src/components/svg/svg_mask_overlay.jsx +105 -0
package/src/components/table/drag/table_drag.jsx +506 -0
package/src/components/table/resize/table_resize.jsx +650 -0
package/src/components/table/resize/table_size.js +43 -0
package/src/components/table/selection/table_selection.js +106 -0
package/src/components/table/selection/table_selection.jsx +203 -0
package/src/components/table/sticky/sticky_group.js +354 -0
package/src/components/table/sticky/table_sticky.js +25 -0
package/src/components/table/sticky/table_sticky.jsx +501 -0
package/src/components/table/table.jsx +721 -0
package/src/components/table/table_css.js +211 -0
package/src/components/table/table_ui.jsx +49 -0
package/src/components/table/use_cells_and_columns.js +90 -0
package/src/components/table/use_object_array_to_cells.js +46 -0
package/src/components/table/z_indexes.js +23 -0
package/src/components/tablist/tablist.jsx +99 -0
package/src/components/text/overflow.jsx +15 -0
package/src/components/text/text_and_count.jsx +28 -0
package/src/components/ui_transition.jsx +128 -0
package/src/components/use_auto_focus.js +58 -7
package/src/components/use_batch_during_render.js +33 -0
package/src/components/use_debounce_true.js +7 -7
package/src/components/use_dependencies_diff.js +35 -0
package/src/components/use_focus_group.js +4 -3
package/src/components/use_initial_value.js +8 -34
package/src/components/use_signal_sync.js +1 -1
package/src/components/use_stable_callback.js +68 -0
package/src/components/use_state_array.js +16 -9
package/src/docs/actions.md +22 -0
package/src/notes.md +33 -12
package/src/route/route.js +97 -47
package/src/store/resource_graph.js +2 -1
package/src/store/tests/{resource_graph_dependencies.test.js → resource_graph_dependencies.test_manual.js} +13 -13
package/src/utils/is_signal.js +20 -0
package/src/utils/stringify_for_display.js +4 -23
package/src/validation/constraints/confirm_constraint.js +14 -0
package/src/validation/constraints/create_unique_value_constraint.js +27 -0
package/src/validation/constraints/native_constraints.js +313 -0
package/src/validation/constraints/readonly_constraint.js +36 -0
package/src/validation/constraints/single_space_constraint.js +13 -0
package/src/validation/custom_constraint_validation.js +599 -0
package/src/validation/custom_message.js +18 -0
package/src/validation/demos/browser_style.png +0 -0
package/src/validation/demos/form_validation_demo.html +142 -0
package/src/validation/demos/form_validation_demo_preact.html +87 -0
package/src/validation/demos/form_validation_native_popover_demo.html +168 -0
package/src/validation/demos/form_validation_vs_native_demo.html +172 -0
package/src/validation/demos/validation_message_demo.html +203 -0
package/src/validation/hooks/use_constraints.js +23 -0
package/src/validation/hooks/use_custom_validation_ref.js +73 -0
package/src/validation/hooks/use_validation_message.js +19 -0
package/src/validation/validation_message.js +741 -0
package/src/components/editable_text/editable_text.jsx +0 -96
package/src/components/form.jsx +0 -144
package/src/components/input/checkbox_list.jsx +0 -294
package/src/components/input/field.jsx +0 -61
package/src/components/input/input_textual.jsx +0 -338
package/src/components/input/radio_list.jsx +0 -283
package/src/components/input/use_form_event.js +0 -20
package/src/components/input/use_on_change.js +0 -12
package/src/components/selection/selection.js +0 -5
package/src/components/selection/selection_context.jsx +0 -262
package/src/components/shortcut/shortcut_context.jsx +0 -390
package/src/components/use_action_events.js +0 -37
package/src/utils/iterable_weak_set.js +0 -62
/package/src/components/demos/action/{11_nested_shortcuts_demo.html → 11_nested_shortcuts_demo.xhtml} +0 -0
/package/src/components/{shortcut → keyboard_shortcuts}/os.js +0 -0
/package/src/route/{route.test.html → route.xtest.html} +0 -0

package/src/components/demos/8_table_fixed_headers_demo.html ADDED Viewed

@@ -0,0 +1,584 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Table Fixed Headers Demo - Large Dataset</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        margin: 0px;
+        padding: 0;
+        background: #f5f5f5;
+      }
+      .demo-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        background: white;
+        padding: 100px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      /* Status display */
+      .status {
+        margin-top: 20px;
+        padding: 10px;
+        background: #f0f8ff;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 14px;
+      }
+      .actions {
+        margin-top: 15px;
+      }
+      button {
+        background: #0078d4;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 8px;
+      }
+      button:hover {
+        background: #106ebe;
+      }
+      button:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+      .info {
+        background: #fff3cd;
+        border: 1px solid #ffeaa7;
+        border-radius: 4px;
+        padding: 15px;
+        margin: 15px 0;
+      }
+      .info h3 {
+        margin-top: 0;
+        color: #856404;
+      }
+      .info p {
+        margin-bottom: 0;
+        color: #856404;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useRef, useState } from "preact/hooks";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Table,
+        // eslint-disable-next-line no-unused-vars
+        ActiveKeyboardShortcuts,
+        // eslint-disable-next-line no-unused-vars
+        TableCell,
+        // eslint-disable-next-line no-unused-vars
+        Colgroup,
+        // eslint-disable-next-line no-unused-vars
+        Col,
+        // eslint-disable-next-line no-unused-vars
+        Thead,
+        // eslint-disable-next-line no-unused-vars
+        Tbody,
+        // eslint-disable-next-line no-unused-vars
+        Tr,
+        // eslint-disable-next-line no-unused-vars
+        RowNumberCol,
+        // eslint-disable-next-line no-unused-vars
+        RowNumberTableCell,
+        useCellsAndColumns,
+        stringifyTableSelectionValue,
+      } from "@jsenv/navi";
+      // Generate large dataset to force scrolling
+      const generateLargeDataset = (rows = 50, cols = 10) => {
+        const data = [];
+        for (let i = 1; i <= rows; i++) {
+          const rowCells = [];
+          rowCells.id = i;
+          for (let j = 1; j <= cols; j++) {
+            if (i === 1 && j === 1) {
+              // rowCells.push(`Cell ${i}-${j}`);
+              rowCells.push(`A text that is longer`);
+            } else {
+              rowCells.push(`Cell ${i}-${j}`);
+            }
+          }
+          data.push(rowCells);
+        }
+        return data;
+      };
+      // Create large dataset (50 rows x 10 columns = 500 cells)
+      const data = generateLargeDataset(50, 10);
+      const columnsConfig = Array.from({ length: 10 }, (_, i) => ({
+        id: `col${i + 1}`,
+        header: i === 7 ? "A larger header" : `Column ${i + 1}`,
+        width: i === 0 ? 50 : undefined,
+      }));
+      // eslint-disable-next-line no-unused-vars
+      const FixedHeadersDemo = () => {
+        const tableRef = useRef(null);
+        const [selection, setSelection] = useState([]);
+        const [columnWidths, setColumnWidths] = useState([]);
+        const [rowHeights, setRowHeights] = useState([]);
+        const setColumnValue = (columnId, value) => {
+          console.log(`Set column ${columnId} value to "${value}"`);
+        };
+        const { cells, setCellValue, columns, setColumnOrder } =
+          useCellsAndColumns(data, columnsConfig);
+        const [
+          stickyLeftFrontierColumnIndex,
+          setStickyLeftFrontierColumnIndex,
+        ] = useState(() => {
+          const saved = localStorage.getItem(
+            "table-demo-stickyLeftFrontierColumnIndex",
+          );
+          return saved ? parseInt(saved, 10) : 2;
+        });
+        const [stickyTopFrontierRowIndex, setStickyTopFrontierRowIndex] =
+          useState(() => {
+            const saved = localStorage.getItem(
+              "table-demo-stickyTopFrontierRowIndex",
+            );
+            return saved ? parseInt(saved, 10) : 2;
+          });
+        const [useContainerScrolling, setUseContainerScrolling] = useState(
+          () => {
+            // Load from localStorage, default to false if not found
+            const saved = localStorage.getItem(
+              "table-demo-useContainerScrolling",
+            );
+            return saved === "true";
+          },
+        );
+        return (
+          <div className="demo-container">
+            <h1>Table Fixed Headers Demo - Large Dataset</h1>
+            <details>
+              <summary>Instructions for Testing</summary>
+              <div className="info">
+                <h3>Testing Fixed Row/Column Headers with Cell Editing</h3>
+                <p>
+                  This demo contains a large dataset (50 rows × 10 columns = 500
+                  cells) in a constrained container to force scrolling. The goal
+                  is to test and implement fixed first row (header) and first
+                  column behavior, plus cell editing functionality.
+                </p>
+              </div>
+              <p>
+                <strong>Current behavior:</strong> The table will scroll
+                normally with editable cells.
+                <br />
+                <strong>Cell editing:</strong> Double-click any data cell to
+                edit its value. Press Enter to save or Escape to cancel.
+                <br />
+                <strong>Desired behavior:</strong> First row and first column
+                should remain fixed while scrolling.
+              </p>
+            </details>
+            <div>
+              <button
+                onClick={() => {
+                  const newValue = !useContainerScrolling;
+                  setUseContainerScrolling(newValue);
+                  // Save to localStorage for persistence
+                  localStorage.setItem(
+                    "table-demo-useContainerScrolling",
+                    newValue.toString(),
+                  );
+                }}
+                style={{
+                  background: useContainerScrolling ? "#28a745" : "#6c757d",
+                  fontWeight: "bold",
+                }}
+              >
+                Scrolling:{" "}
+                {useContainerScrolling ? "Container (400×600px)" : "Document"}
+              </button>
+              <div style={{ marginTop: "15px" }}>
+                <label style={{ marginRight: "15px" }}>
+                  Sticky Left Frontier (Column Index):{" "}
+                  <input
+                    type="number"
+                    min="-1"
+                    max="10"
+                    value={stickyLeftFrontierColumnIndex}
+                    onChange={(e) => {
+                      const newValue = parseInt(e.target.value, 10);
+                      setStickyLeftFrontierColumnIndex(newValue);
+                      localStorage.setItem(
+                        "table-demo-stickyLeftFrontierColumnIndex",
+                        newValue.toString(),
+                      );
+                    }}
+                    style={{
+                      width: "60px",
+                      marginLeft: "5px",
+                      padding: "2px 6px",
+                      border: "1px solid #ccc",
+                      borderRadius: "3px",
+                    }}
+                  />
+                </label>
+                <label>
+                  Sticky Top Frontier (Row Index):{" "}
+                  <input
+                    type="number"
+                    min="-1"
+                    max="50"
+                    value={stickyTopFrontierRowIndex}
+                    onChange={(e) => {
+                      const newValue = parseInt(e.target.value, 10);
+                      setStickyTopFrontierRowIndex(newValue);
+                      localStorage.setItem(
+                        "table-demo-stickyTopFrontierRowIndex",
+                        newValue.toString(),
+                      );
+                    }}
+                    style={{
+                      width: "60px",
+                      marginLeft: "5px",
+                      padding: "2px 6px",
+                      border: "1px solid #ccc",
+                      borderRadius: "3px",
+                    }}
+                  />
+                </label>
+              </div>
+              <br />
+            </div>
+            <div className="table-container">
+              <Table
+                ref={tableRef}
+                selection={selection}
+                onSelectionChange={(value) => {
+                  setSelection(value);
+                }}
+                onColumnSizeChange={(width, columnIndex, column) => {
+                  console.log(column.id, `resized to ${width}px`);
+                  setColumnWidths((columnWidths) => {
+                    columnWidths[columnIndex] = width;
+                    return [...columnWidths];
+                  });
+                }}
+                onRowSizeChange={(height, rowIndex, row) => {
+                  console.log(row.id, `resized to ${height}px`, rowIndex);
+                  setRowHeights((rowHeights) => {
+                    rowHeights[rowIndex] = height;
+                    return [...rowHeights];
+                  });
+                }}
+                stickyLeftFrontierColumnIndex={stickyLeftFrontierColumnIndex}
+                onStickyLeftFrontierChange={setStickyLeftFrontierColumnIndex}
+                stickyTopFrontierRowIndex={stickyTopFrontierRowIndex}
+                onStickyTopFrontierChange={setStickyTopFrontierRowIndex}
+                onColumnOrderChange={(newColumnOrder) => {
+                  console.log("Column order changed:", newColumnOrder);
+                  setColumnOrder(newColumnOrder);
+                }}
+                borderCollapse
+                overflow={useContainerScrolling ? "auto" : undefined}
+                maxHeight={useContainerScrolling ? 400 : undefined}
+                maxWidth={useContainerScrolling ? 600 : undefined}
+              >
+                <Colgroup>
+                  <RowNumberCol width={columnWidths[0]} immovable={false} />
+                  {columns.map((column, columnIndex) => (
+                    <Col
+                      key={column.id}
+                      id={column.id}
+                      width={columnWidths[columnIndex + 1] || column.width}
+                    />
+                  ))}
+                </Colgroup>
+                <Thead>
+                  <Tr id="head" height={rowHeights[0]}>
+                    <RowNumberTableCell
+                      // just to help debugging column drag
+                      // in practice it won't work as it's purely visual
+                      // and column ordering works only for columns controlled by a state
+                      canDragColumn
+                    />
+                    {columns.map((col) => (
+                      <TableCell
+                        key={col.id}
+                        action={(value) => {
+                          setColumnValue(col.id, value);
+                        }}
+                      >
+                        {col.header}
+                      </TableCell>
+                    ))}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {cells.map((rowCells, dataRowIndex) => {
+                    const rowIndex = dataRowIndex + 1;
+                    const rowData = data[dataRowIndex];
+                    return (
+                      <Tr
+                        id={rowData.id}
+                        key={rowData.id}
+                        height={rowHeights[rowIndex]}
+                      >
+                        <RowNumberTableCell />
+                        {rowCells.map((cellValue, columnIndex) => {
+                          return (
+                            <TableCell
+                              key={columns[columnIndex].id}
+                              action={(value) => {
+                                setCellValue(
+                                  { rowIndex: dataRowIndex, columnIndex },
+                                  value,
+                                );
+                              }}
+                            >
+                              {cellValue}
+                            </TableCell>
+                          );
+                        })}
+                      </Tr>
+                    );
+                  })}
+                </Tbody>
+              </Table>
+            </div>
+            <div className="status">
+              <div>
+                Dataset size:{" "}
+                <span>
+                  {cells.length} rows × {cells[0]?.length || 0} columns ={" "}
+                  {cells.length * (cells[0]?.length || 0)} cells
+                </span>
+              </div>
+              <div>
+                Selection:{" "}
+                <span>
+                  {JSON.stringify(selection.slice(0, 5))}
+                  {selection.length > 5
+                    ? `... (+${selection.length - 5} more)`
+                    : ""}
+                </span>
+              </div>
+              <div>
+                Total selection count: <span>{selection.length}</span>
+              </div>
+              <div>
+                Editable cells:{" "}
+                <span>
+                  {cells.length * (cells[0]?.length || 0)} cells with editing
+                  enabled
+                </span>
+              </div>
+              <div>
+                Column order:{" "}
+                <span>{JSON.stringify(columns.map((c) => c.id))}</span>
+              </div>
+              <div>
+                Column widths:{" "}
+                <span>
+                  {columnWidths.length
+                    ? JSON.stringify(columnWidths)
+                    : "Default (auto)"}
+                </span>
+              </div>
+              <div>
+                Row heights:{" "}
+                <span>
+                  {rowHeights.length
+                    ? JSON.stringify(rowHeights)
+                    : "Default (auto)"}
+                </span>
+              </div>
+            </div>
+            <div className="actions">
+              <button
+                onClick={() => {
+                  setSelection([]);
+                }}
+              >
+                Clear Selection
+              </button>
+              <button
+                onClick={() => {
+                  const allCells = [];
+                  for (let y = 0; y < cells.length; y++) {
+                    for (let x = 0; x < (cells[0]?.length || 0); x++) {
+                      allCells.push(
+                        stringifyTableSelectionValue("cell", {
+                          rowIndex: y + 1,
+                          columnIndex: x + 1,
+                        }),
+                      );
+                    }
+                  }
+                  setSelection(allCells);
+                }}
+              >
+                Select All ({cells.length * (cells[0]?.length || 0)} cells)
+              </button>
+              <button
+                onClick={() => {
+                  const firstRowCells = columns.map((_, columnIndex) =>
+                    stringifyTableSelectionValue("cell", {
+                      rowIndex: 0,
+                      columnIndex: columnIndex + 1,
+                    }),
+                  );
+                  setSelection(firstRowCells);
+                }}
+              >
+                Select First Row
+              </button>
+              <button
+                onClick={() => {
+                  // Select first column
+                  const firstColCells = data.map((_, rowIndex) =>
+                    stringifyTableSelectionValue("cell", {
+                      rowIndex,
+                      columnIndex: 0,
+                    }),
+                  );
+                  setSelection(firstColCells);
+                }}
+              >
+                Select First Column
+              </button>
+              <button
+                onClick={() => {
+                  setColumnWidths([]);
+                }}
+              >
+                Reset Column Widths
+              </button>
+              <button
+                onClick={() => {
+                  setRowHeights([]);
+                }}
+              >
+                Reset Row Heights
+              </button>
+              <button
+                onClick={() => {
+                  // Set a sample cell to demonstrate editing works
+                  // setBaseCellValues((prevValues) => {
+                  //   const newValues = prevValues.map((row, rowIdx) =>
+                  //     rowIdx === 0
+                  //       ? row.map((cell, colIdx) =>
+                  //           colIdx === 0
+                  //             ? `Edited at ${new Date().toLocaleTimeString()}`
+                  //             : cell,
+                  //         )
+                  //       : [...row],
+                  //   );
+                  //   return newValues;
+                  // });
+                }}
+              >
+                Demo Edit Cell (1,1)
+              </button>
+              <button
+                onClick={() => {
+                  setColumnOrder([...columns.map((c) => c.id)].reverse());
+                }}
+              >
+                Reverse Column Order
+              </button>
+              <button
+                onClick={() => {
+                  const shuffled = [...columns.map((c) => c.id)];
+                  for (let i = shuffled.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                  }
+                  setColumnOrder(shuffled);
+                }}
+              >
+                Shuffle Columns
+              </button>
+              <button
+                onClick={() => {
+                  setColumnOrder(columnsConfig.map((col) => col.id));
+                }}
+              >
+                Reset Column Order
+              </button>
+            </div>
+            {/*
+            <div>
+              <h3>Active keyboard shortcuts</h3>
+              <ActiveKeyboardShortcuts visible />
+            </div>
+            <div className="info">
+              <h3>Instructions for Testing</h3>
+              <p>
+                1. Scroll the table horizontally and vertically
+                <br />
+                2. Observe how headers behave during scrolling
+                <br />
+                3. Test selection behavior while scrolled
+                <br />
+                4. <strong>Double-click any data cell to edit its value</strong>
+                <br />
+                5. Use Enter to save changes, Escape to cancel editing
+                <br />
+                6. Check if borders and selection overlay work correctly with
+                fixed headers
+              </p>
+            </div>
+            */}
+          </div>
+        );
+      };
+      // Render the app
+      render(<FixedHeadersDemo />, document.getElementById("root"));
+      setTimeout(() => {
+        // document.querySelector(".navi_table_root").scrollLeft = 1500;
+      }, 500);
+      console.log("Fixed Headers Demo loaded with large dataset:");
+      console.log(
+        `- ${data.length} rows × 10 columns = ${data.length * 10} total cells`,
+      );
+      console.log("- Double-click data cells to edit values");
+      console.log("- Scroll the table to test fixed header behavior");
+      console.log(
+        "- Use selection features to test interaction with scrolling",
+      );
+    </script>
+  </body>
+</html>