@1771technologies/lytenyte-pro 1.0.7 → 1.0.9

package/dist/cell-selection/cell-selection-containers.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { CellStyleRow } from "./cell-style-row";
-import { useGridRoot } from "../context";
-import { isTopRect } from "./is-top-rect";
-import { isCenterRect } from "./is-center-rect";
-import { isBottomRect } from "./is-bottom-rect";
+import { CellStyleRow } from "./cell-style-row.js";
+import { useGridRoot } from "../context.js";
+import { isTopRect } from "./is-top-rect.js";
+import { isCenterRect } from "./is-center-rect.js";
+import { isBottomRect } from "./is-bottom-rect.js";
 export const CellSelectionTop = memo(function CellSelectionTop() {
     const cx = useGridRoot();
     const allRects = cx.grid.internal.cellSelectionSplits.useValue();

package/dist/cell-selection/cell-selection-driver.js

@@ -1,17 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { useGridRoot } from "../context";
-import { useEdgeScroll } from "./use-edge-scroll";
+import { useGridRoot } from "../context.js";
+import { useEdgeScroll } from "./use-edge-scroll.js";
 import { equal, getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-js-utils";
 import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
 import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
-import { updateAdditiveCellSelection } from "./update-additive-cell-selection";
-import { deselectRectRange } from "./deselect-rect-range";
-import { isWithinSelectionRect } from "./is-within-selection-rect";
-import { expandCellSelectionStart } from "./expand-cell-selection-start";
-import { expandCellSelectionEnd } from "./expand-cell-selection-end";
-import { expandCellSelectionDown } from "./expand-cell-selection-down";
-import { expandCellSelectionUp } from "./expand-cell-selection-up";
+import { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
+import { deselectRectRange } from "./deselect-rect-range.js";
+import { isWithinSelectionRect } from "./is-within-selection-rect.js";
+import { expandCellSelectionStart } from "./expand-cell-selection-start.js";
+import { expandCellSelectionEnd } from "./expand-cell-selection-end.js";
+import { expandCellSelectionDown } from "./expand-cell-selection-down.js";
+import { expandCellSelectionUp } from "./expand-cell-selection-up.js";
 function isNormalClick(event) {
     return event.button === 0 && !event.altKey;
 }

package/dist/cell-selection/cell-style-row.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useGridRoot } from "../context";
+import { useGridRoot } from "../context.js";
 import { getTranslate, sizeFromCoord } from "@1771technologies/lytenyte-shared";
 export function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }) {
     const cx = useGridRoot();

package/dist/cell-selection/split-on-pivot.js

@@ -1,4 +1,4 @@
-import { areRectsEqual } from "./are-rects-equal";
+import { areRectsEqual } from "./are-rects-equal.js";
 export function splitOnPivot(rect, pivot) {
     if (rect.isUnit || areRectsEqual(rect, pivot))
         return null;

package/dist/cells/+types.cell.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnPin } from "../+types";
+export interface Cell {
+    readonly rowIndex: number;
+    readonly colIndex: number;
+    readonly colSpan: number;
+    readonly rowSpan: number;
+    readonly rowLastPinTop?: boolean;
+    readonly rowFirstPinBottom?: boolean;
+    readonly colLastStartPin?: boolean;
+    readonly colFirstEndPin?: boolean;
+    readonly colPin?: ColumnPin;
+    readonly rowPin?: "top" | "bottom" | null;
+}

package/dist/cells/+types.cell.js

@@ -0,0 +1 @@
+export {};

package/dist/cells/cell-editor.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { getTabbables } from "@1771technologies/lytenyte-dom-utils";
-import { useGridRoot } from "../context";
-import { editOnChange } from "../state/helpers/edit-on-change";
+import { useGridRoot } from "../context.js";
+import { editOnChange } from "../state/helpers/edit-on-change.js";
 import { handleNavigationKeys } from "@1771technologies/lytenyte-shared";
 export function CellEditor({ cell }) {
     const [el, setEl] = useState(null);

package/dist/cells/cell-spacer.d.ts

@@ -1,3 +1,9 @@
-export declare function CellSpacePinStart(): import("react/jsx-runtime").JSX.Element | null;
-export declare function CellSpacerPinEnd(): import("react/jsx-runtime").JSX.Element | null;
-export declare function CellSpacerNoPin(): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacePinStart({ xPositions: x }: {
+    xPositions: Uint32Array;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacerPinEnd({ xPositions: x }: {
+    xPositions: Uint32Array;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacerNoPin({ xPositions: x }: {
+    xPositions: Uint32Array;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/cells/cell-spacer.js

@@ -1,35 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useGridRoot } from "../context";
-export function CellSpacePinStart() {
+import { useGridRoot } from "../context.js";
+export function CellSpacePinStart({ xPositions: x }) {
     const ctx = useGridRoot().grid;
-    const xPos = ctx.state.xPositions.useValue();
     const bounds = ctx.state.viewBounds.useValue();
-    const offset = xPos[bounds.colCenterStart] - xPos[bounds.colStartEnd];
+    const offset = x[bounds.colCenterStart] - x[bounds.colStartEnd];
     const meta = ctx.state.columnMeta.useValue();
     if (meta.columnVisibleStartCount === 0)
         return null;
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }
-export function CellSpacerPinEnd() {
+export function CellSpacerPinEnd({ xPositions: x }) {
     const ctx = useGridRoot().grid;
-    const xPos = ctx.state.xPositions.useValue();
     const bounds = ctx.state.viewBounds.useValue();
-    const startOffset = xPos[bounds.colCenterEnd];
-    let offset = xPos[bounds.colEndStart] - startOffset;
+    const startOffset = x[bounds.colCenterEnd];
+    let offset = x[bounds.colEndStart] - startOffset;
     const viewWidth = ctx.state.viewportWidthInner.useValue();
-    if (xPos.at(-1) < viewWidth) {
-        offset = viewWidth - xPos.at(-1);
+    if (x.at(-1) < viewWidth) {
+        offset = viewWidth - x.at(-1);
     }
     const meta = ctx.state.columnMeta.useValue();
     if (meta.columnVisibleEndCount === 0)
         return null;
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }
-export function CellSpacerNoPin() {
+export function CellSpacerNoPin({ xPositions: x }) {
     const ctx = useGridRoot().grid;
-    const xPos = ctx.state.xPositions.useValue();
     const bounds = ctx.state.viewBounds.useValue();
-    const offset = xPos[bounds.colCenterStart - bounds.colStartEnd];
+    const offset = x[bounds.colCenterStart - bounds.colStartEnd];
     const meta = ctx.state.columnMeta.useValue();
     if (meta.columnVisibleStartCount > 0)
         return null;

package/dist/cells/cell.js

@@ -1,17 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
-import { useGridRoot } from "../context";
-import { CellReact, sizeFromCoord } from "@1771technologies/lytenyte-shared";
-import { CellDefault } from "./cell-default";
-import { CellEditor } from "./cell-editor";
-import { useRowMeta } from "../rows/row/context";
-import { CellSpacePinStart, CellSpacerPinEnd } from "./cell-spacer";
-export const Cell = forwardRef(function Cell({ cell, ...props }, forwarded) {
+import { forwardRef, memo, useEffect, useState } from "react";
+import { useGridRoot } from "../context.js";
+import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
+import { CellDefault } from "./cell-default.js";
+import { CellEditor } from "./cell-editor.js";
+import { useRowMeta } from "../rows/row/context.js";
+import { CellSpacePinStart, CellSpacerPinEnd } from "./cell-spacer.js";
+import { useCellStyle } from "./use-cell-style.js";
+export const Cell = forwardRef(function Cell(props, forwarded) {
+    const { colBounds: [start, end], ...rowMeta } = useRowMeta();
+    // This enforces our column virtualization.
+    if (props.cell.colPin == null && (props.cell.colIndex >= end || props.cell.colIndex < start)) {
+        return null;
+    }
+    return _jsx(CellImpl, { ...props, ref: forwarded, ...rowMeta });
+});
+const CellImpl = memo(forwardRef(function Cell({ cell, row, selected, indeterminate, xPositions, yPositions, base, renderers, rtl, ...props }, forwarded) {
     const grid = useGridRoot().grid;
-    const cx = grid.state;
-    const base = grid.state.columnBase.useValue();
-    const row = cell.row.useValue();
-    const renderers = cx.cellRenderers.useValue();
     const providedRenderer = cell.column.cellRenderer ?? base.cellRenderer;
     const Renderer = providedRenderer
         ? typeof providedRenderer === "string"
@@ -29,12 +34,10 @@ export const Cell = forwardRef(function Cell({ cell, ...props }, forwarded) {
                 pos.rowIndex < cell.rowIndex + cell.rowSpan);
         });
     }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
-    const xPositions = cx.xPositions.useValue();
-    const yPositions = cx.yPositions.useValue();
-    const rowMeta = useRowMeta();
+    const style = useCellStyle(xPositions, yPositions, cell, rtl, grid.api.rowDetailRenderedHeight(row ?? ""), undefined);
     if (cell.isDeadRow)
         return _jsx("div", { style: { width: sizeFromCoord(cell.colIndex, xPositions) } });
     if (!row || cell.isDeadCol)
         return null;
-    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, {}), _jsxs(CellReact, { ...props, ref: forwarded, cell: cell, isEditing: isEditing, detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), rtl: cx.rtl.useValue(), xPosition: xPositions, yPosition: yPositions, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: rowMeta.selected, rowIndeterminate: rowMeta.indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, {})] }));
-});
+    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, { xPositions: xPositions }), _jsxs("div", { ...props, ref: forwarded, role: "gridcell", "data-ln-rowindex": cell.rowIndex, "data-ln-colindex": cell.colIndex, "data-ln-colspan": cell.colSpan, "data-ln-rowspan": cell.rowSpan, "data-ln-pin": cell.colPin ?? "center", "data-ln-cell": true, "data-ln-last-top-pin": cell.rowLastPinTop, "data-ln-first-bottom-pin": cell.rowFirstPinBottom, "data-ln-last-start-pin": cell.colLastStartPin, "data-ln-first-end-pin": cell.colFirstEndPin, tabIndex: isEditing ? -1 : 0, style: style, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: selected, rowIndeterminate: indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, { xPositions: xPositions })] }));
+}));

package/dist/cells/use-cell-style.d.ts

@@ -0,0 +1,3 @@
+import { type CSSProperties } from "react";
+import type { Cell } from "./+types.cell";
+export declare function useCellStyle(xPositions: Uint32Array, yPositions: Uint32Array, cell: Cell, rtl: boolean, detailHeight: number, additional: CSSProperties | undefined): CSSProperties;

package/dist/cells/use-cell-style.js

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
+export function useCellStyle(xPositions, yPositions, cell, rtl, detailHeight, additional) {
+    const width = sizeFromCoord(cell.colIndex, xPositions, cell.colSpan);
+    const height = sizeFromCoord(cell.rowIndex, yPositions, cell.rowSpan) - detailHeight;
+    const isSticky = !!cell.colPin;
+    const isRowPinned = !!cell.rowPin;
+    const styles = useMemo(() => {
+        const styles = {
+            height,
+            width,
+            minWidth: width,
+            maxWidth: width,
+            boxSizing: "border-box",
+            pointerEvents: "all",
+            display: "inline-block",
+            overflow: "hidden",
+        };
+        if (cell.colPin === "end") {
+            styles.position = "sticky";
+            const x = xPositions.at(-1) - xPositions[cell.colIndex + cell.colSpan];
+            if (rtl)
+                styles.left = x;
+            else
+                styles.right = x;
+            styles.zIndex = isRowPinned ? 5 : 2;
+        }
+        else if (isSticky) {
+            styles.position = "sticky";
+            const x = xPositions[cell.colIndex];
+            if (rtl)
+                styles.right = x;
+            else
+                styles.left = x;
+            styles.zIndex = isRowPinned ? 5 : 2;
+        }
+        return { ...additional, ...styles };
+    }, [
+        additional,
+        cell.colIndex,
+        cell.colPin,
+        cell.colSpan,
+        height,
+        isRowPinned,
+        isSticky,
+        rtl,
+        width,
+        xPositions,
+    ]);
+    return styles;
+}

package/dist/column-manager/branch.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
-import { TreeBranch } from "../tree-view/branch/branch";
-import { ColumnItemContext } from "./context";
+import { TreeBranch } from "../tree-view/branch/branch.js";
+import { ColumnItemContext } from "./context.js";
 import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
-import { useGrid } from "../grid-provider/use-grid";
-import { useColumnsFromContext } from "./use-columns-from-context";
+import { useGrid } from "../grid-provider/use-grid.js";
+import { useColumnsFromContext } from "./use-columns-from-context.js";
 export const Branch = forwardRef(function Branch({ item, label, labelWrapClassName, labelWrapStyle, ...props }, forwarded) {
     const grid = useGrid();
     const id = grid.state.gridId.useValue();

package/dist/column-manager/column-manager.d.ts

@@ -1,13 +1,13 @@
-import { Root } from "./root";
-import { useColumnManager } from "./use-column-manager";
-import { VisibilityCheckbox } from "./visibility-checkbox";
+import { Root } from "./root.js";
+import { useColumnManager } from "./use-column-manager.js";
+import { VisibilityCheckbox } from "./visibility-checkbox.js";
 export declare const ColumnManager: {
     Root: typeof Root;
-    Leaf: import("react").ForwardRefExoticComponent<Omit<import("./leaf").ColumnManagerLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./label").LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch").ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Leaf: import("react").ForwardRefExoticComponent<Omit<import("./leaf.js").ColumnManagerLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./label.js").LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch.js").ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
     Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
-    MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./move-handle").MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./move-handle.js").MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     VisibilityCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & VisibilityCheckbox, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useColumnManager: typeof useColumnManager;
 };

package/dist/column-manager/column-manager.js

@@ -1,11 +1,11 @@
-import { Branch } from "./branch";
-import { Label } from "./label";
-import { Leaf } from "./leaf";
-import { MoveHandle } from "./move-handle";
-import { Panel } from "./panel";
-import { Root } from "./root";
-import { useColumnManager } from "./use-column-manager";
-import { VisibilityCheckbox } from "./visibility-checkbox";
+import { Branch } from "./branch.js";
+import { Label } from "./label.js";
+import { Leaf } from "./leaf.js";
+import { MoveHandle } from "./move-handle.js";
+import { Panel } from "./panel.js";
+import { Root } from "./root.js";
+import { useColumnManager } from "./use-column-manager.js";
+import { VisibilityCheckbox } from "./visibility-checkbox.js";
 export const ColumnManager = {
     Root,
     Leaf,

package/dist/column-manager/label.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
-import { useColumnItemContext } from "./context";
+import { useColumnItemContext } from "./context.js";
 export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const label = useMemo(() => {

package/dist/column-manager/leaf.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
-import { ColumnItemContext } from "./context";
-import { TreeLeaf } from "../tree-view/leaf";
+import { ColumnItemContext } from "./context.js";
+import { TreeLeaf } from "../tree-view/leaf.js";
 import { dragState, DropWrap } from "@1771technologies/lytenyte-dragon";
-import { useGrid } from "../grid-provider/use-grid";
-import { useColumnsFromContext } from "./use-columns-from-context";
+import { useGrid } from "../grid-provider/use-grid.js";
+import { useColumnsFromContext } from "./use-columns-from-context.js";
 export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, forwarded) {
     const context = useMemo(() => {
         return { item: item };

package/dist/column-manager/move-handle.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useDraggable } from "@1771technologies/lytenyte-dragon";
 import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
-import { useColumnItemContext } from "./context";
-import { useColumnsFromContext } from "./use-columns-from-context";
-import { useGrid } from "../grid-provider/use-grid";
+import { useColumnItemContext } from "./context.js";
+import { useColumnsFromContext } from "./use-columns-from-context.js";
+import { useGrid } from "../grid-provider/use-grid.js";
 export const MoveHandle = forwardRef(function MoveHandle({ as, ...props }, forwarded) {
     const item = useColumnItemContext().item;
     const grid = useGrid();

package/dist/column-manager/panel.js

@@ -1,2 +1,2 @@
-import { TreePanel } from "../tree-view/panel/panel";
+import { TreePanel } from "../tree-view/panel/panel.js";
 export const Panel = TreePanel;

package/dist/column-manager/root.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { GridProvider } from "../grid-provider/provider";
-import { TreeRoot } from "../tree-view/root";
-import { branchLookupContext } from "./branch-lookup-context";
+import { GridProvider } from "../grid-provider/provider.js";
+import { TreeRoot } from "../tree-view/root.js";
+import { branchLookupContext } from "./branch-lookup-context.js";
 export function Root({ grid, lookup, children }) {
     return (_jsx(branchLookupContext.Provider, { value: lookup, children: _jsx(GridProvider, { value: grid, children: _jsx(TreeRoot, { children: children }) }) }));
 }

package/dist/column-manager/use-column-manager.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useTreeViewPaths } from "../tree-view/hooks/use-tree-view-paths";
+import { useTreeViewPaths } from "../tree-view/hooks/use-tree-view-paths.js";
 export function useColumnManager({ grid, query }) {
     const columns = grid.state.columns.useValue();
     const filteredColumns = useMemo(() => {

package/dist/column-manager/visibility-checkbox.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-import { useColumnItemContext } from "./context";
+import { useColumnItemContext } from "./context.js";
 import { forwardRef, useCallback, useMemo } from "react";
-import { useGrid } from "../grid-provider/use-grid";
-import { useColumnsFromContext } from "./use-columns-from-context";
+import { useGrid } from "../grid-provider/use-grid.js";
+import { useColumnsFromContext } from "./use-columns-from-context.js";
 export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ as, ...props }, forwarded) {
     const { item } = useColumnItemContext();
     const grid = useGrid();

package/dist/filter-tree/branch.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { TreeBranch } from "../tree-view/branch/branch";
+import { TreeBranch } from "../tree-view/branch/branch.js";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-import { FilterTreeItemContext } from "./context";
-import { useTreeItem } from "./hooks/use-tree-item";
+import { FilterTreeItemContext } from "./context.js";
+import { useTreeItem } from "./hooks/use-tree-item.js";
 export const Branch = forwardRef(function Branch({ item, labelWrap, label, ...props }, forwarded) {
     const value = useTreeItem(item);
     const labelSlot = useSlot({

package/dist/filter-tree/context.d.ts

@@ -1,6 +1,6 @@
 import { type Dispatch, type SetStateAction } from "react";
-import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree";
-import type { FilterIn, FilterInFilterItem } from "../+types";
+import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree.js";
+import type { FilterIn, FilterInFilterItem } from "../+types.js";
 export interface TreeItemContextValue {
     readonly item: TreeVirtualItem<FilterInFilterItem>;
     readonly onCheckChange: (b?: boolean) => void;

package/dist/filter-tree/hooks/use-filter-tree.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { useVirtualizedTree } from "../../tree-view/virtualized/use-virtualized-tree";
+import { useVirtualizedTree } from "../../tree-view/virtualized/use-virtualized-tree.js";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
 export function useFilterTree({ grid, column, treeItemHeight = 24, pivotMode, applyChangesImmediately = false, query, }) {
     const [items, setItems] = useState([]);

package/dist/filter-tree/inclusion-checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
-import { useTreeItemContext } from "./context";
+import { useTreeItemContext } from "./context.js";
 export const InclusionCheckbox = forwardRef(function InclusionCheckbox({ as, ...props }, forwarded) {
     const { isChecked, onCheckChange, isIndeterminate } = useTreeItemContext();
     const rendered = useSlot({

package/dist/filter-tree/label.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef, useMemo } from "react";
-import { useTreeItemContext } from "./context";
+import { useTreeItemContext } from "./context.js";
 export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
     const { item } = useTreeItemContext();
     const label = useMemo(() => {

package/dist/filter-tree/leaf.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { TreeLeaf } from "../tree-view/leaf";
-import { FilterTreeItemContext } from "./context";
-import { useTreeItem } from "./hooks/use-tree-item";
+import { TreeLeaf } from "../tree-view/leaf.js";
+import { FilterTreeItemContext } from "./context.js";
+import { useTreeItem } from "./hooks/use-tree-item.js";
 export const Leaf = forwardRef(function Leaf({ item, ...props }, forwarded) {
     const value = useTreeItem(item);
     return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeLeaf, { ...props, itemId: item.leaf.data.id, ref: forwarded, ...item.attrs, style: { ...props.style, ...item.attrs.style }, onClick: () => value.onCheckChange(), onKeyDown: (ev) => {

package/dist/filter-tree/root.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { GridProvider } from "../grid-provider/provider";
-import { TreeRoot } from "../tree-view/root";
-import { FilterTreeContext } from "./context";
+import { GridProvider } from "../grid-provider/provider.js";
+import { TreeRoot } from "../tree-view/root.js";
+import { FilterTreeContext } from "./context.js";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 export function Root({ grid, treeRef, filterIn, pivotMode, columnId, children, error, loading, errorAs, loadingAs, fetchItems, items, applyChangesImmediately, filterInChange, ...rootProps }) {
     const value = useMemo(() => {

package/dist/grid-box/grid-box.d.ts

@@ -1,11 +1,11 @@
-import { GridBoxRoot } from "./root";
-import { useAggregationBoxItems } from "./use-aggregation-box-items";
-import { useColumnBoxItems } from "./use-column-box-items";
-import { useRowGroupBoxItems } from "./use-row-group-box-items";
+import { GridBoxRoot } from "./root.js";
+import { useAggregationBoxItems } from "./use-aggregation-box-items.js";
+import { useColumnBoxItems } from "./use-column-box-items.js";
+import { useRowGroupBoxItems } from "./use-row-group-box-items.js";
 export declare const GridBox: {
     Root: typeof GridBoxRoot;
     Panel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrop">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./item").GridBoxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./item.js").GridBoxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useColumnBoxItems: typeof useColumnBoxItems;
     useRowGroupBoxItems: typeof useRowGroupBoxItems;
     useAggregationBoxItems: typeof useAggregationBoxItems;

package/dist/grid-box/grid-box.js

@@ -1,9 +1,9 @@
-import { BoxItem } from "./item";
-import { GridBoxPanel } from "./panel";
-import { GridBoxRoot } from "./root";
-import { useAggregationBoxItems } from "./use-aggregation-box-items";
-import { useColumnBoxItems } from "./use-column-box-items";
-import { useRowGroupBoxItems } from "./use-row-group-box-items";
+import { BoxItem } from "./item.js";
+import { GridBoxPanel } from "./panel.js";
+import { GridBoxRoot } from "./root.js";
+import { useAggregationBoxItems } from "./use-aggregation-box-items.js";
+import { useColumnBoxItems } from "./use-column-box-items.js";
+import { useRowGroupBoxItems } from "./use-row-group-box-items.js";
 export const GridBox = {
     Root: GridBoxRoot,
     Panel: GridBoxPanel,

package/dist/grid-box/item.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Item } from "../listbox/item";
+import { Item } from "../listbox/item.js";
 import { dragState, DropWrap, useDraggable } from "@1771technologies/lytenyte-dragon";
 import { useCombinedRefs, useSlot, } from "@1771technologies/lytenyte-react-hooks";
-import { useGridBoxContext } from "./context";
+import { useGridBoxContext } from "./context.js";
 export const BoxItem = forwardRef(function BoxItem({ item, itemAs, itemClassName, itemStyle, children, ...props }, forwarded) {
     const { accepted } = useGridBoxContext();
     const { dragProps } = useDraggable({

package/dist/grid-box/panel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Panel } from "../listbox/panel";
+import { Panel } from "../listbox/panel.js";
 import { DropWrap } from "@1771technologies/lytenyte-dragon";
-import { useGridBoxContext } from "./context";
+import { useGridBoxContext } from "./context.js";
 export const GridBoxPanel = forwardRef(function GridBoxPanel(props, forwarded) {
     const ctx = useGridBoxContext();
     return (_jsx(DropWrap, { ...props, accepted: ctx.accepted, "data-ln-orientation": ctx.orientation, onDrop: ctx.onRootDrop, ref: forwarded, as: _jsx(Panel, {}) }));

package/dist/grid-box/root.d.ts

@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from "react";
-import type { DropEventParams, Grid } from "../+types";
+import type { DropEventParams, Grid } from "../+types.js";
 export interface GridBoxRootProps<T> {
     readonly orientation?: "vertical" | "horizontal";
     readonly onRootDrop: (p: DropEventParams) => void;

package/dist/grid-box/root.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Root } from "../listbox/root";
-import { GridProvider } from "../grid-provider/provider";
-import { GridBoxContext } from "./context";
+import { Root } from "../listbox/root.js";
+import { GridProvider } from "../grid-provider/provider.js";
+import { GridBoxContext } from "./context.js";
 export function GridBoxRoot({ grid, orientation = "vertical", accepted, onRootDrop, children, }) {
     return (_jsx(GridProvider, { value: grid, children: _jsx(GridBoxContext.Provider, { value: useMemo(() => ({ accepted, orientation, onRootDrop }), [accepted, onRootDrop, orientation]), children: _jsx(Root, { orientation: orientation, children: children }) }) }));
 }

package/dist/grid.d.ts

@@ -1,17 +1,17 @@
-import { Root } from "./root/root";
-import { useLyteNyte } from "./state/use-lytenyte";
+import { Root } from "./root/root.js";
+import { useLyteNyte } from "./state/use-lytenyte.js";
 export declare const Grid: {
     Root: typeof Root;
     Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    HeaderGroupCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-group-cell").HeaderGroupCellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-row").HeaderRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-cell").HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & import("./cells/cell").CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./rows/row-full-width").RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HeaderGroupCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-group-cell.js").HeaderGroupCellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-row.js").HeaderRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-cell.js").HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & import("./cells/cell.js").CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./rows/row-full-width.js").RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsBottom: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsTop: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Row: import("react").NamedExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & import("./rows/row/row").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: import("react").NamedExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & import("./rows/row/row.js").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RowsCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     useLyteNyte: typeof useLyteNyte;