@jsenv/navi 0.10.2 → 0.11.1

package/src/components/svg/font_sized_svg.jsx

@@ -1,59 +0,0 @@
-/**
- * FontSizedSvg component
- *
- * This component wraps an SVG element to make it inherit the current font size.
- * It creates a container that's exactly 1em × 1em in size, allowing the SVG to scale
- * proportionally with the surrounding text.
- *
- * Usage:
- * ```jsx
- * <FontSizedSvg>
- *   <svg width="100%" height="100%" viewBox="...">
- *     <path d="..." />
- *    </svg>
- * </FontSizedSvg>
- * ```
- *
- * Notes:
- * - The wrapped SVG should use width="100%" and height="100%" to fill the container
- * - This ensures SVG icons match the current text size without additional styling
- * - Useful for inline icons that should respect the parent's font-size
- */
-
-import { withPropsStyle } from "../props_composition/with_props_style.js";
-
-import.meta.css = /* css */ `
-  .navi_font_sized_svg {
-    display: flex;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    align-items: center;
-    justify-self: center;
-    line-height: 1em;
-  }
-`;
-
-export const FontSizedSvg = ({
-  width = "1em",
-  height = "1em",
-  style,
-  children,
-  ...props
-}) => {
-  return (
-    <span
-      {...props}
-      className="navi_font_sized_svg"
-      style={withPropsStyle(
-        {
-          width: width === "1em" ? undefined : width,
-          height: height === "1em" ? undefined : height,
-        },
-        style,
-      )}
-    >
-      {children}
-    </span>
-  );
-};

package/src/components/svg/icon_and_text.jsx

@@ -1,21 +0,0 @@
-import { FontSizedSvg } from "./font_sized_svg.jsx";
-
-export const IconAndText = ({ icon, children, ...rest }) => {
-  if (typeof icon === "function") icon = icon({});
-
-  return (
-    <span
-      className="icon_and_text"
-      {...rest}
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: "0.1em",
-        ...rest.style,
-      }}
-    >
-      <FontSizedSvg className="icon">{icon}</FontSizedSvg>
-      <span className="text">{children}</span>
-    </span>
-  );
-};

package/src/components/svg/svg_mask_overlay.jsx

@@ -1,105 +0,0 @@
-/**
- * SVGComposition Component
- *
- * Creates composite SVGs by combining independent SVG elements with masking.
- *
- * This component solves the challenge of combining independently created SVGs into
- * a single visual composition. Each SVG can have its own coordinate system, viewBox,
- * and styling, allowing for maximum reusability of individual icons or graphics.
- *
- * When overlaying SVGs, each subsequent overlay "cuts out" its portion from the base SVG,
- * creating a seamless integration where SVGs appear to interact with each other visually.
- *
- * Key benefits:
- * - Maintains each SVG's independence - use them individually elsewhere
- * - Handles different viewBox dimensions automatically
- * - Works with any SVG components regardless of internal implementation
- * - Supports unlimited overlay elements
- * - Creates proper masking between elements for visual integration
- *
- * Usage example combining two independent icon components:
- * ```jsx
- * <SVGMaskOverlay viewBox="0 0 24 24">
- *   <DatabaseSvg />
- *   <svg x="12" y="12" width="16" height="16" overflow="visible">
- *     <PlusSvg />
- *   </svg>
- * </SVGMaskOverlay>
- * ```
- *
- * @param {Object} props - Component properties
- * @param {string} props.viewBox - The main viewBox for the composition (required)
- * @param {ReactNode[]} props.children - SVG elements (first is base, rest are overlays)
- * @returns {ReactElement} A composed SVG with all elements properly masked
- */
-
-import { cloneElement } from "preact";
-
-import.meta.css = /* css */ `
-  .svg_mask_content * {
-    fill: black !important;
-    stroke: black !important;
-    fill-opacity: 1 !important;
-    stroke-opacity: 1 !important;
-    color: black !important;
-    opacity: 1 !important;
-  }
-`;
-
-export const SVGMaskOverlay = ({ viewBox, children }) => {
-  if (!Array.isArray(children)) {
-    return children;
-  }
-  if (children.length === 1) {
-    return children[0];
-  }
-  if (!viewBox) {
-    console.error("SVGComposition requires an explicit viewBox");
-    return null;
-  }
-
-  // First SVG is the base, all others are overlays
-  const [baseSvg, ...overlaySvgs] = children;
-
-  // Generate unique ID for this instance
-  const instanceId = `svgmo-${Math.random().toString(36).slice(2, 9)}`;
-
-  // Create nested masked elements
-  let maskedElement = baseSvg;
-
-  // Apply each mask in sequence
-  overlaySvgs.forEach((overlaySvg, index) => {
-    const maskId = `mask-${instanceId}-${index}`;
-    maskedElement = <g mask={`url(#${maskId})`}>{maskedElement}</g>;
-  });
-
-  return (
-    <svg viewBox={viewBox} width="100%" height="100%">
-      <defs>
-        {/* Define masks that respect position */}
-        {overlaySvgs.map((overlaySvg, index) => {
-          const maskId = `mask-${instanceId}-${index}`;
-
-          // IMPORTANT: clone the overlay SVG exactly as is, just add the mask class
-          return (
-            <mask id={maskId} key={maskId}>
-              {/* White background makes everything visible by default */}
-              <rect width="100%" height="100%" fill="white" />
-
-              {/* EXACT CLONE of the overlay SVG */}
-              {cloneElement(overlaySvg, {
-                className: "svg_mask_content", // Apply styling to make it black
-              })}
-            </mask>
-          );
-        })}
-      </defs>
-
-      {/* Base SVG with all masks applied */}
-      {maskedElement}
-
-      {/* Render all overlays */}
-      {overlaySvgs}
-    </svg>
-  );
-};

package/src/components/table/drag/table_drag.jsx

@@ -1,506 +0,0 @@
-import {
-  createDragToMoveGestureController,
-  createPubSub,
-  dragAfterThreshold,
-  getDropTargetInfo,
-  getScrollContainer,
-  stickyAsRelativeCoords,
-} from "@jsenv/dom";
-import { createContext } from "preact";
-import { forwardRef } from "preact/compat";
-import { useMemo, useState } from "preact/hooks";
-
-import { useStableCallback } from "../../use_stable_callback.js";
-import { Z_INDEX_CELL_FOREGROUND, Z_INDEX_DROP_PREVIEW } from "../z_indexes.js";
-
-const DEBUG_VISUAL = false;
-
-import.meta.css = /* css */ `
-  .navi_table_drag_clone_container {
-    position: absolute;
-    left: var(--table-visual-left);
-    top: var(--table-visual-top);
-    width: var(--table-visual-width);
-    height: var(--table-visual-height);
-    /* background: rgba(0, 0, 0, 0.5); */
-  }
-
-  .navi_table_cell[data-grabbed]::before,
-  .navi_table_cell[data-grabbed]::after {
-    box-shadow: none !important;
-  }
-
-  /* We preprend ".navi_table_container" to ensure it propertly overrides */
-  .navi_table_drag_clone_container .navi_table_cell {
-    opacity: ${DEBUG_VISUAL ? 0.5 : 0};
-  }
-
-  .navi_table_drag_clone_container .navi_table_cell[data-grabbed] {
-    opacity: 0.7;
-  }
-
-  .navi_table_drag_clone_container .navi_table_cell_sticky_frontier {
-    opacity: 0;
-  }
-
-  .navi_table_drag_clone_container .navi_table_cell[data-sticky-left],
-  .navi_table_drag_clone_container .navi_table_cell[data-sticky-top] {
-    position: relative;
-  }
-
-  .navi_table_cell_foreground {
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    background: lightgrey;
-    opacity: 0;
-    z-index: ${Z_INDEX_CELL_FOREGROUND};
-  }
-  .navi_table_cell[data-first-row] .navi_table_cell_foreground {
-    background-color: grey;
-  }
-  .navi_table_cell_foreground[data-visible] {
-    opacity: 1;
-  }
-
-  .navi_table_drag_clone_container .navi_table_cell_foreground {
-    opacity: 1;
-    background-color: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-  }
-  .navi_table_drag_clone_container
-    .navi_table_cell[data-first-row][data-grabbed] {
-    opacity: 1;
-  }
-  .navi_table_drag_clone_container
-    .navi_table_cell[data-first-row]
-    .navi_table_cell_foreground {
-    opacity: 0;
-  }
-
-  .navi_table_column_drop_preview {
-    position: absolute;
-    left: var(--column-left);
-    top: var(--column-top);
-    width: var(--column-width);
-    height: var(--column-height);
-    pointer-events: none;
-    z-index: ${Z_INDEX_DROP_PREVIEW};
-    /* Invisible container - just for positioning */
-    background: transparent;
-    border: none;
-  }
-
-  .navi_table_column_drop_preview_line {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background: rgba(0, 0, 255, 0.5);
-    opacity: 0;
-    left: 0; /* Default: left edge for dropping before */
-    transform: translateX(-50%);
-  }
-  .navi_table_column_drop_preview[data-after]
-    .navi_table_column_drop_preview_line {
-    left: 100%; /* Right edge for dropping after */
-  }
-  .navi_table_column_drop_preview[data-visible]
-    .navi_table_column_drop_preview_line {
-    opacity: 1;
-  }
-
-  .navi_table_column_drop_preview .arrow_positioner {
-    position: absolute;
-    left: 0; /* Default: left edge for dropping before */
-    display: flex;
-    opacity: 0;
-    transform: translateX(-50%);
-    color: rgba(0, 0, 255, 0.5);
-  }
-  .navi_table_column_drop_preview[data-after] .arrow_positioner {
-    left: 100%; /* Right edge for dropping after */
-  }
-  .navi_table_column_drop_preview[data-visible] .arrow_positioner {
-    opacity: 1;
-  }
-  .navi_table_column_drop_preview .arrow_positioner[data-top] {
-    top: -10px;
-  }
-  .navi_table_column_drop_preview .arrow_positioner[data-bottom] {
-    bottom: -10px;
-  }
-  .arrow_positioner svg {
-    width: 10px;
-    height: 10px;
-  }
-`;
-
-export const TableDragContext = createContext();
-export const useTableDragContextValue = ({
-  tableDragCloneContainerRef,
-  tableColumnDropPreviewRef,
-  columns,
-  setColumnOrder,
-  canChangeColumnOrder,
-}) => {
-  setColumnOrder = useStableCallback(setColumnOrder);
-
-  const [grabTarget, setGrabTarget] = useState(null);
-  const grabColumn = (columnIndex) => {
-    setGrabTarget(`column:${columnIndex}`);
-  };
-  const releaseColumn = (columnIndex, newColumnIndex) => {
-    setGrabTarget(null);
-    if (columnIndex === newColumnIndex) {
-      return;
-    }
-    const columnIds = columns.map((col) => col.id);
-    const columnIdsWithNewOrder = moveItem(
-      columnIds,
-      columnIndex,
-      newColumnIndex,
-    );
-    setColumnOrder(columnIdsWithNewOrder);
-  };
-
-  return useMemo(() => {
-    return {
-      tableDragCloneContainerRef,
-      tableColumnDropPreviewRef,
-      grabTarget,
-      grabColumn,
-      releaseColumn,
-      setColumnOrder,
-      canChangeColumnOrder,
-    };
-  }, [grabTarget, canChangeColumnOrder]);
-};
-const moveItem = (array, indexA, indexB) => {
-  const newArray = [];
-  const movedItem = array[indexA];
-  const movingRight = indexA < indexB;
-
-  for (let i = 0; i < array.length; i++) {
-    if (movingRight) {
-      // Moving right: add target first, then moved item after
-      if (i !== indexA) {
-        newArray.push(array[i]);
-      }
-      if (i === indexB) {
-        newArray.push(movedItem);
-      }
-    } else {
-      // Moving left: add moved item first, then target after
-      if (i === indexB) {
-        newArray.push(movedItem);
-      }
-      if (i !== indexA) {
-        newArray.push(array[i]);
-      }
-    }
-  }
-  return newArray;
-};
-export const swapItem = (array, indexA, indexB) => {
-  const newArray = [];
-  const itemAtPositionA = array[indexA];
-  const itemAtPositionB = array[indexB];
-  for (let i = 0; i < array.length; i++) {
-    if (i === indexB) {
-      // At the new position, put the dragged column
-      newArray.push(itemAtPositionA);
-      continue;
-    }
-    if (i === indexA) {
-      // At the old position, put what was at the new position
-      newArray.push(itemAtPositionB);
-      continue;
-    }
-    // Everything else stays the same
-    newArray.push(array[i]);
-  }
-  return newArray;
-};
-
-export const TableDragCloneContainer = forwardRef((props, ref) => {
-  const { tableId } = props;
-
-  return (
-    <div
-      ref={ref}
-      className="navi_table_drag_clone_container"
-      data-overlay-for={tableId}
-    ></div>
-  );
-});
-export const TableColumnDropPreview = forwardRef((props, ref) => {
-  return (
-    <div ref={ref} className="navi_table_column_drop_preview">
-      <div className="arrow_positioner" data-top="">
-        {/* This is an arrow pointing down */}
-        <svg fill="currentColor" viewBox="0 0 30.727 30.727">
-          <path
-            d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0
-		l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"
-          />
-        </svg>
-      </div>
-      <div className="navi_table_column_drop_preview_line"></div>
-      <div className="arrow_positioner" data-bottom="">
-        {/* This is an arrow pointing up */}
-        <svg fill="currentColor" viewBox="0 0 30.727 30.727">
-          <path
-            d="M29.994,20.544L15.363,5.915L0.733,20.543c-0.977,0.978-0.977,2.561,0,3.536c0.977,0.977,2.559,0.976,3.536,0
-		l11.095-11.093L26.461,24.08c0.977,0.976,2.559,0.976,3.535,0C30.971,23.103,30.971,21.521,29.994,20.544z"
-          />
-        </svg>
-      </div>
-    </div>
-  );
-});
-
-export const initDragTableColumnViaPointer = (
-  pointerdownEvent,
-  { tableDragCloneContainer, dropPreview, onGrab, onDrag, onRelease },
-) => {
-  dragAfterThreshold(pointerdownEvent, () => {
-    const [teardown, addTeardown] = createPubSub();
-
-    const tableCell = pointerdownEvent.target.closest(".navi_table_cell");
-    const table = tableCell.closest(".navi_table");
-    const columnIndex = Array.from(tableCell.parentNode.children).indexOf(
-      tableCell,
-    );
-
-    // Track the drop target column index (starts as current column)
-    let dropColumnIndex = columnIndex;
-
-    const tableClone = table.cloneNode(true);
-    // ensure [data-drag-obstacle] inside the table clone are ignored
-    tableClone.setAttribute("data-drag-ignore", "");
-
-    // Scale down the table clone and set transform origin to mouse grab point
-    // const tableRect = table.getBoundingClientRect();
-    // const mouseX = mousedownEvent.clientX - tableRect.left;
-    // const mouseY = mousedownEvent.clientY - tableRect.top;
-    // tableClone.style.transform = "scale(1.2)";
-    // tableClone.style.transformOrigin = `${mouseX}px ${mouseY}px`;
-
-    update_sticky_elements: {
-      // In the table clone we need to convert sticky elements to position: relative
-      // with calculated offsets that match their appearance in the original context
-      const scrollContainer = getScrollContainer(table);
-
-      // important: only on cells, not on <col> nor <tr>
-      const originalStickyCells = table.querySelectorAll(
-        ".navi_table_cell[data-sticky-left], .navi_table_cell[data-sticky-top]",
-      );
-      const cloneStickyCells = tableClone.querySelectorAll(
-        ".navi_table_cell[data-sticky-left], .navi_table_cell[data-sticky-top]",
-      );
-
-      originalStickyCells.forEach((originalCell, index) => {
-        const cloneCell = cloneStickyCells[index];
-        const relativePosition = stickyAsRelativeCoords(
-          originalCell,
-          // Our clone is absolutely positioned on top of <table />
-          // So we need the sticky position relative to <table />
-          table,
-          {
-            scrollContainer,
-          },
-        );
-        if (relativePosition) {
-          const [relativeLeft, relativeTop] = relativePosition;
-          cloneCell.style.position = "relative";
-          if (relativeLeft !== undefined) {
-            cloneCell.style.left = `${relativeLeft}px`;
-          }
-          if (relativeTop !== undefined) {
-            cloneCell.style.top = `${relativeTop}px`;
-          }
-        }
-      });
-    }
-
-    sync_data_grabbed: {
-      // ensure [data-grabbed] are present in the table clone
-      // we could retry on "sync_attributes" but we want to be sure it's done asap to prevent table from being displayed at all
-      // I fear without this we might have an intermediate step where the table column clone is not visible
-      // as [data-grabbed] are not set
-      // Would not be a problem but this ensure we see exactly the table clone right away preventing any possibility
-      // of visual glitches
-      const tableCloneCells = tableClone.querySelectorAll(".navi_table_cell");
-      tableCloneCells.forEach((cellClone) => {
-        const cellColumnIndex = Array.from(
-          cellClone.parentNode.children,
-        ).indexOf(cellClone);
-        if (cellColumnIndex === columnIndex) {
-          cellClone.setAttribute("data-grabbed", "");
-        }
-      });
-    }
-
-    append_in_dom: {
-      tableDragCloneContainer.appendChild(tableClone);
-      addTeardown(() => {
-        tableClone.remove();
-      });
-    }
-
-    sync_attributes: {
-      // Sync attribute changes from original table to clone
-      // This is used to:
-      // - handle table cells being selected as result of mousedown on the <th />
-      // - nothing else is supposed to change in the original <table /> during the drag gesture
-      const syncTableAttributes = createTableAttributeSync(table, tableClone);
-      addTeardown(() => {
-        syncTableAttributes.disconnect();
-      });
-    }
-
-    const colgroup = table.querySelector(".navi_colgroup");
-    const colElements = Array.from(colgroup.children);
-
-    const col = colElements[columnIndex];
-    const colgroupClone = tableClone.querySelector(".navi_colgroup");
-    const colClone = colgroupClone.children[columnIndex];
-    const dragToMoveGestureController = createDragToMoveGestureController({
-      name: "move-column",
-      direction: { x: true },
-      threshold: 0,
-      onGrab,
-      onDrag: (gestureInfo) => {
-        onDrag?.(gestureInfo, dropColumnIndex);
-      },
-      resetPositionAfterRelease: !DEBUG_VISUAL,
-      onRelease: (gestureInfo) => {
-        if (!DEBUG_VISUAL) {
-          teardown();
-        }
-        onRelease?.(gestureInfo, dropColumnIndex);
-      },
-    });
-    const dragToMoveGesture = dragToMoveGestureController.grabViaPointer(
-      pointerdownEvent,
-      {
-        element: colClone,
-        referenceElement: col,
-        elementToMove: tableClone,
-      },
-    );
-
-    drop_preview: {
-      // Get all column elements for drop target detection
-      const dropCandidateElements = colElements.filter(
-        (col) =>
-          !(col.getAttribute("data-drag-obstacle") || "").includes(
-            "move-column",
-          ),
-      );
-
-      const updateDropTarget = (dropTargetInfo) => {
-        const targetColumn = dropTargetInfo.element;
-        const targetColumnIndex = colElements.indexOf(targetColumn);
-        dropColumnIndex = targetColumnIndex;
-        if (dropColumnIndex === columnIndex) {
-          dropPreview.removeAttribute("data-visible");
-          return;
-        }
-        // Position the invisible container to match the target column
-        const { left, top, width, height } =
-          targetColumn.getBoundingClientRect();
-        dropPreview.style.setProperty("--column-left", `${left}px`);
-        dropPreview.style.setProperty("--column-top", `${top}px`);
-        dropPreview.style.setProperty("--column-width", `${width}px`);
-        dropPreview.style.setProperty("--column-height", `${height}px`);
-        // Set data-after attribute to control line position via CSS
-        if (dropColumnIndex > columnIndex) {
-          // Dropping after: CSS will position line at right edge (100%)
-          dropPreview.setAttribute("data-after", "");
-        } else {
-          // Dropping before: CSS will position line at left edge (0%)
-          dropPreview.removeAttribute("data-after");
-        }
-        dropPreview.setAttribute("data-drop-column-index", dropColumnIndex);
-        dropPreview.setAttribute("data-visible", "");
-      };
-
-      dragToMoveGesture.addDragCallback((gestureInfo) => {
-        const dropTargetInfo = getDropTargetInfo(
-          gestureInfo,
-          dropCandidateElements,
-        );
-        if (!dropTargetInfo) {
-          dropPreview.removeAttribute("data-visible");
-          return;
-        }
-        updateDropTarget(dropTargetInfo);
-      });
-      dragToMoveGesture.addReleaseCallback(() => {
-        dropPreview.removeAttribute("data-visible");
-      });
-    }
-
-    return dragToMoveGesture;
-  });
-};
-
-/**
- * Creates a MutationObserver that syncs attribute changes from original table to clone
- * @param {HTMLElement} table - The original table element
- * @param {HTMLElement} cloneTable - The cloned table element
- * @returns {MutationObserver} The observer instance with disconnect method
- */
-const createTableAttributeSync = (table, tableClone) => {
-  // Create a map to quickly find corresponding elements in the clone
-  const createElementMap = () => {
-    const map = new Map();
-    const cells = table.querySelectorAll(".navi_table_cell");
-    const cellClones = tableClone.querySelectorAll(".navi_table_cell");
-    for (let i = 0; i < cells.length; i++) {
-      if (cellClones[i]) {
-        map.set(cells[i], cellClones[i]);
-      }
-    }
-    return map;
-  };
-
-  const elementMap = createElementMap();
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.type === "attributes") {
-        const originalElement = mutation.target;
-        const cloneElement = elementMap.get(originalElement);
-
-        if (cloneElement) {
-          const attributeName = mutation.attributeName;
-          if (attributeName === "style") {
-            return;
-          }
-
-          // Sync the attribute change to the clone
-          if (originalElement.hasAttribute(attributeName)) {
-            const attributeValue = originalElement.getAttribute(attributeName);
-            cloneElement.setAttribute(attributeName, attributeValue);
-          } else {
-            cloneElement.removeAttribute(attributeName);
-          }
-        }
-      }
-    });
-  });
-
-  // Observe attribute changes on all table cells
-  const cellsToObserve = table.querySelectorAll(".navi_table_cell");
-  cellsToObserve.forEach((cell) => {
-    observer.observe(cell, {
-      attributes: true,
-      attributeOldValue: false,
-      subtree: false,
-    });
-  });
-
-  return observer;
-};