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

@jsenv/navi 0.0.1 → 0.1.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 (138) hide show

package/dist/jsenv_navi.js +22954 -0
package/index.js +66 -16
package/package.json +22 -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/{input → field}/input_textual.jsx +247 -173
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/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/item_tracker/use_isolated_item_tracker_demo.html ADDED Viewed

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Isolated Item Tracker Demo</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 10px;
+        background: #f5f5f5;
+        font-size: 12px;
+      }
+      .debug-panel {
+        background: white;
+        padding: 10px;
+        margin: 5px 0;
+        border-radius: 4px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+      .item-data {
+        background: #e3f2fd;
+        padding: 8px;
+        margin: 4px 0;
+        border-radius: 3px;
+        border-left: 3px solid #2196f3;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 11px;
+      }
+      .item-info {
+        flex: 1;
+      }
+      .item-controls {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+      }
+      .item-consumer {
+        background: #f3e5f5;
+        padding: 6px;
+        margin: 3px 0;
+        border-radius: 3px;
+        border-left: 3px solid #9c27b0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 11px;
+      }
+      button {
+        background: #4caf50;
+        color: white;
+        border: none;
+        padding: 4px 8px;
+        border-radius: 3px;
+        cursor: pointer;
+        margin: 1px;
+        font-size: 10px;
+      }
+      button:hover {
+        background: #45a049;
+      }
+      button.remove {
+        background: #f44336;
+      }
+      button.remove:hover {
+        background: #d32f2f;
+      }
+      button.add {
+        background: #2196f3;
+      }
+      button.add:hover {
+        background: #1976d2;
+      }
+      button.rerender {
+        background: #ff9800;
+      }
+      button.rerender:hover {
+        background: #f57c00;
+      }
+      select {
+        padding: 2px 4px;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        margin: 0 4px;
+        font-size: 10px;
+      }
+      .log {
+        background: #1e1e1e;
+        color: #00ff00;
+        padding: 8px;
+        border-radius: 3px;
+        font-family: monospace;
+        max-height: 150px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        font-size: 10px;
+      }
+      .section {
+        margin: 8px 0;
+      }
+      h1 {
+        font-size: 18px;
+        margin: 5px 0;
+      }
+      h2 {
+        font-size: 14px;
+        margin: 5px 0;
+      }
+      h3 {
+        font-size: 12px;
+        margin: 4px 0;
+      }
+      strong {
+        font-size: 11px;
+      }
+      small {
+        font-size: 9px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Isolated Item Tracker Demo</h1>
+    <div class="debug-panel">
+      <h2>Logs</h2>
+      <div id="logs" class="log"></div>
+      <button onclick="document.getElementById('logs').textContent = ''">
+        Clear Logs
+      </button>
+    </div>
+    <div class="debug-panel">
+      <h2>App</h2>
+      <div id="app"></div>
+    </div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      // eslint-disable-next-line no-unused-vars
+      import { App } from "./use_isolated_item_tracker_demo.jsx";
+      // Initial render
+      render(<App />, document.getElementById("app"));
+    </script>
+  </body>
+</html>

package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx ADDED Viewed

@@ -0,0 +1,460 @@
+import { useRef, useState } from "preact/hooks";
+import { createIsolatedItemTracker } from "./use_isolated_item_tracker.jsx";
+// Initial state for table columns
+const initialState = {
+  renderKey: 0,
+  columns: [
+    { id: "name", label: "Name", width: "200px", sortable: true },
+    { id: "email", label: "Email", width: "250px", sortable: true },
+    { id: "status", label: "Status", width: "100px", sortable: false },
+  ],
+  tableData: [
+    { name: "John Doe", email: "john@example.com", status: "Active" },
+    { name: "Jane Smith", email: "jane@example.com", status: "Inactive" },
+    { name: "Bob Johnson", email: "bob@example.com", status: "Pending" },
+  ],
+};
+const [useColumnTrackerProviders, useRegisterColumn, useColumn, useColumns] =
+  createIsolatedItemTracker();
+export const App = () => {
+  const [state, setState] = useState(initialState);
+  log(`🎬 App render ${state.renderKey}`);
+  const handleUpdateColumn = (index, newColumn) => {
+    setState((prev) => {
+      const newColumns = [...prev.columns];
+      newColumns[index] = newColumn;
+      log(`🔄 Updated column ${index}: ${JSON.stringify(newColumn)}`);
+      return { ...prev, columns: newColumns };
+    });
+  };
+  const handleRemoveColumn = (index) => {
+    setState((prev) => {
+      const newColumns = prev.columns.filter((_, i) => i !== index);
+      log(`➖ Removed column ${index}`);
+      return { ...prev, columns: newColumns };
+    });
+  };
+  const handleAddColumn = () => {
+    setState((prev) => {
+      const newId = `col${prev.columns.length + 1}`;
+      const newColumn = {
+        id: newId,
+        label: `Column ${prev.columns.length + 1}`,
+        width: "150px",
+        sortable: true,
+      };
+      log(`➕ Added column: ${JSON.stringify(newColumn)}`);
+      return { ...prev, columns: [...prev.columns, newColumn] };
+    });
+  };
+  const handleMoveColumnUp = (index) => {
+    if (index === 0) return; // Can't move first column up
+    setState((prev) => {
+      const newColumns = [...prev.columns];
+      // Swap with previous column
+      [newColumns[index - 1], newColumns[index]] = [
+        newColumns[index],
+        newColumns[index - 1],
+      ];
+      log(`⬆️ Moved column ${index} up to position ${index - 1}`);
+      return { ...prev, columns: newColumns };
+    });
+  };
+  const handleMoveColumnDown = (index) => {
+    setState((prev) => {
+      if (index === prev.columns.length - 1) return prev; // Can't move last column down
+      const newColumns = [...prev.columns];
+      // Swap with next column
+      [newColumns[index], newColumns[index + 1]] = [
+        newColumns[index + 1],
+        newColumns[index],
+      ];
+      log(`⬇️ Moved column ${index} down to position ${index + 1}`);
+      return { ...prev, columns: newColumns };
+    });
+  };
+  const [ColumnProducerProvider, ColumnConsumerProvider] =
+    useColumnTrackerProviders();
+  return (
+    <div>
+      <div style={{ marginBottom: "20px" }}>
+        <strong>App Render #{state.renderKey}</strong>
+        <button
+          style={{ marginLeft: "10px" }}
+          onClick={() => {
+            log("🔄 Manual app re-render triggered");
+            setState((prev) => ({
+              ...prev,
+              renderKey: prev.renderKey + 1,
+            }));
+          }}
+        >
+          Re-render App
+        </button>
+        <button style={{ marginLeft: "10px" }} onClick={handleAddColumn}>
+          ➕ Add Column
+        </button>
+      </div>
+      <div className="section">
+        <h3>Column Configuration (affects both producer & consumer)</h3>
+        {state.columns.map((column, index) => (
+          <ColumnDataControls
+            key={`${column.id}-${state.renderKey}`}
+            column={column}
+            index={index}
+            totalColumns={state.columns.length}
+            onUpdate={handleUpdateColumn}
+            onRemove={handleRemoveColumn}
+            onMoveUp={handleMoveColumnUp}
+            onMoveDown={handleMoveColumnDown}
+          />
+        ))}
+      </div>
+      {/* Producer: Table with colgroup that registers columns */}
+      <TableProducer
+        state={state}
+        ColumnProducerProvider={ColumnProducerProvider}
+      />
+      {/* Consumer: Components that read column data */}
+      <ColumnConsumers ColumnConsumerProvider={ColumnConsumerProvider} />
+    </div>
+  );
+};
+// Producer: Table with colgroup that registers columns
+const TableProducer = ({ state, ColumnProducerProvider }) => {
+  return (
+    <ColumnProducerProvider>
+      <div className="section">
+        <h3>🏗️ Producer: Table with Column Registration</h3>
+        <p style={{ fontSize: "12px", margin: "0 0 10px 0", color: "#666" }}>
+          💡 The colgroup below registers column definitions. Change widths to
+          trigger individual column re-renders.
+        </p>
+        <table style={{ width: "100%", borderCollapse: "collapse" }}>
+          {/* This colgroup registers the columns - this is the PRODUCER */}
+          <colgroup>
+            {state.columns.map((column) => (
+              <ColumnDefinition
+                key={`${column.id}-${state.renderKey}`}
+                id={column.id}
+                label={column.label}
+                width={column.width}
+                sortable={column.sortable}
+              />
+            ))}
+          </colgroup>
+          <thead>
+            <tr>
+              {state.columns.map((column) => (
+                <th
+                  key={column.id}
+                  style={{
+                    border: "1px solid #ddd",
+                    padding: "8px",
+                    background: "#f5f5f5",
+                  }}
+                >
+                  {column.label}
+                  {column.sortable && " ↕️"}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {state.tableData.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {state.columns.map((column) => (
+                  <td
+                    key={column.id}
+                    style={{ border: "1px solid #ddd", padding: "8px" }}
+                  >
+                    {row[column.id] || `row${rowIndex}-${column.id}`}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </ColumnProducerProvider>
+  );
+};
+// Consumer: Components that read column data
+const ColumnConsumers = ({ ColumnConsumerProvider }) => {
+  return (
+    <ColumnConsumerProvider>
+      <div className="section">
+        <h3>👁️ Consumers: Components Reading Column Data</h3>
+        <p style={{ fontSize: "12px", margin: "0 0 10px 0", color: "#666" }}>
+          These components read column data by index. They re-render when column
+          data changes.
+        </p>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
+          <ColumnConsumer columnIndex={0} />
+          <ColumnConsumer columnIndex={1} />
+          <ColumnConsumer columnIndex={2} />
+          <ColumnConsumer columnIndex={3} />
+        </div>
+      </div>
+      <div className="section">
+        <h3>📊 All Tracked Columns</h3>
+        <AllColumnsDisplay />
+      </div>
+    </ColumnConsumerProvider>
+  );
+};
+// Column definition component with local state for testing overrides
+const ColumnDefinition = ({ id, label, width: initialWidth, sortable }) => {
+  const [localWidth, setLocalWidth] = useState(initialWidth);
+  const [localSortable, setLocalSortable] = useState(sortable);
+  const outWidthRef = useRef(initialWidth);
+  const outSortableRef = useRef(sortable);
+  // Reset local state when props change
+  if (outWidthRef.current !== initialWidth) {
+    outWidthRef.current = initialWidth;
+    setLocalWidth(initialWidth);
+  }
+  if (outSortableRef.current !== sortable) {
+    outSortableRef.current = sortable;
+    setLocalSortable(sortable);
+  }
+  const [renderKey, setRenderKey] = useState(0);
+  // Register the column with current local state
+  const columnIndex = useRegisterColumn({
+    id,
+    label,
+    width: localWidth,
+    sortable: localSortable,
+  });
+  log(`�️ Column producer ${id} (index ${columnIndex}) render`);
+  const widthOptions = ["100px", "150px", "200px", "250px", "300px"];
+  return (
+    <>
+      <col style={{ width: localWidth }} />
+      <div className="column-producer-controls">
+        <div className="item-info">
+          <strong>Column Producer {columnIndex}:</strong> id={id}, label={label}
+          , width={localWidth}, sortable={localSortable ? "yes" : "no"}
+          <small> (render #{renderKey})</small>
+        </div>
+        <div className="item-controls">
+          <select
+            value={localWidth}
+            onChange={(e) => {
+              log(
+                `📏 Column ${id} width changed to ${e.target.value} (local override)`,
+              );
+              setLocalWidth(e.target.value);
+            }}
+          >
+            {widthOptions.map((width) => (
+              <option key={width} value={width}>
+                {width}
+              </option>
+            ))}
+          </select>
+          <label style={{ marginLeft: "10px" }}>
+            <input
+              type="checkbox"
+              checked={localSortable}
+              onChange={(e) => {
+                log(`🔄 Column ${id} sortable changed to ${e.target.checked}`);
+                setLocalSortable(e.target.checked);
+              }}
+            />
+            Sortable
+          </label>
+          <button
+            className="rerender"
+            onClick={() => {
+              log(`🔄 Re-rendering column producer ${id}`);
+              setRenderKey((prev) => prev + 1);
+            }}
+          >
+            Re-render Producer
+          </button>
+          <button
+            onClick={() => {
+              log(`🔄 Reset column ${id} to original state`);
+              setLocalWidth(initialWidth);
+              setLocalSortable(sortable);
+            }}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+// Column data controls that affect the global state
+const ColumnDataControls = ({
+  column,
+  index,
+  totalColumns,
+  onUpdate,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+}) => {
+  const widthOptions = ["100px", "150px", "200px", "250px", "300px"];
+  const isFirst = index === 0;
+  const isLast = index === totalColumns - 1;
+  return (
+    <div className="item-data">
+      <div className="item-info">
+        <strong>App Column {index}:</strong> id={column.id}, label=
+        {column.label}, width={column.width}, sortable=
+        {column.sortable ? "yes" : "no"}
+      </div>
+      <div className="item-controls">
+        <button
+          onClick={() => onMoveUp(index)}
+          disabled={isFirst}
+          title={isFirst ? "Already at top" : "Move up"}
+          style={{
+            background: isFirst ? "#ccc" : "#2196f3",
+            cursor: isFirst ? "not-allowed" : "pointer",
+          }}
+        >
+          ⬆️
+        </button>
+        <button
+          onClick={() => onMoveDown(index)}
+          disabled={isLast}
+          title={isLast ? "Already at bottom" : "Move down"}
+          style={{
+            background: isLast ? "#ccc" : "#2196f3",
+            cursor: isLast ? "not-allowed" : "pointer",
+          }}
+        >
+          ⬇️
+        </button>
+        <input
+          value={column.label}
+          onChange={(e) =>
+            onUpdate(index, { ...column, label: e.target.value })
+          }
+          placeholder="Column label"
+          style={{ marginRight: "5px" }}
+        />
+        <select
+          value={column.width}
+          onChange={(e) =>
+            onUpdate(index, { ...column, width: e.target.value })
+          }
+        >
+          {widthOptions.map((width) => (
+            <option key={width} value={width}>
+              {width}
+            </option>
+          ))}
+        </select>
+        <label style={{ margin: "0 10px" }}>
+          <input
+            type="checkbox"
+            checked={column.sortable}
+            onChange={(e) =>
+              onUpdate(index, { ...column, sortable: e.target.checked })
+            }
+          />
+          Sortable
+        </label>
+        <button className="remove" onClick={() => onRemove(index)}>
+          Remove
+        </button>
+      </div>
+    </div>
+  );
+};
+// Column consumer with re-render button
+const ColumnConsumer = ({ columnIndex }) => {
+  const [renderKey, setRenderKey] = useState(0);
+  const columnData = useColumn(columnIndex);
+  log(`👁️ Consumer ${columnIndex} render, ${columnData?.label}`);
+  return (
+    <div className="item-consumer">
+      <div>
+        <strong>Consumer for column {columnIndex}:</strong>
+        <div style={{ fontSize: "11px", marginTop: "4px" }}>
+          {columnData ? (
+            <div>
+              <div>ID: {columnData.id}</div>
+              <div>Label: {columnData.label}</div>
+              <div>Width: {columnData.width}</div>
+              <div>Sortable: {columnData.sortable ? "yes" : "no"}</div>
+            </div>
+          ) : (
+            "undefined"
+          )}
+        </div>
+        <small> (render #{renderKey})</small>
+      </div>
+      <button
+        className="rerender"
+        onClick={() => {
+          log(`🔄 Re-rendering column consumer ${columnIndex}`);
+          setRenderKey((prev) => prev + 1);
+        }}
+      >
+        Re-render
+      </button>
+    </div>
+  );
+};
+// All columns display
+const AllColumnsDisplay = () => {
+  const columns = useColumns();
+  return (
+    <div
+      style={{
+        background: "#fff3e0",
+        padding: "10px",
+        borderRadius: "4px",
+      }}
+    >
+      <strong>All Tracked Columns ({columns.length}):</strong>
+      <pre style={{ fontSize: "11px", margin: "8px 0 0 0" }}>
+        {JSON.stringify(columns, null, 2)}
+      </pre>
+    </div>
+  );
+};
+// Debug logging
+const log = (message) => {
+  const timestamp = new Date().toLocaleTimeString();
+  const logElement = document.getElementById("logs");
+  logElement.textContent += `[${timestamp}] ${message}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+  console.log(message);
+};