@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.2

package/dist/cells/cell-editor.js

@@ -0,0 +1,103 @@
+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.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);
+    const grid = useGridRoot().grid;
+    useEffect(() => {
+        if (!el)
+            return;
+        const focusFirst = () => {
+            const tabbables = getTabbables(el);
+            if (!el.contains(document.activeElement))
+                tabbables.at(0)?.focus();
+        };
+        const controller = new AbortController();
+        if (el.parentElement) {
+            el.parentElement.addEventListener("focus", () => {
+                focusFirst();
+            }, { signal: controller.signal });
+        }
+        focusFirst();
+        return () => controller.abort();
+    }, [el]);
+    return (_jsx("div", { ref: setEl, style: { width: "100%", height: "100%" }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                const parent = el?.parentElement;
+                grid.api.editEnd(true);
+                setTimeout(() => {
+                    parent?.focus();
+                }, 4);
+            }
+            if (e.key === "Enter") {
+                const ds = grid.state.rowDataStore;
+                // Don't move if the there are validation errors.
+                const editValidation = grid.internal.editValidation.get();
+                if (typeof editValidation === "boolean"
+                    ? editValidation === false
+                    : Object.keys(editValidation).length >= 1) {
+                    return;
+                }
+                handleNavigationKeys({
+                    ctrlKey: false,
+                    metaKey: false,
+                    key: "ArrowDown",
+                    preventDefault: () => { },
+                    stopPropagation: () => { },
+                }, {
+                    vp: grid.state.viewport.get(),
+                    rowCount: ds.rowCount.get(),
+                    topCount: ds.rowTopCount.get(),
+                    centerCount: ds.rowCenterCount.get(),
+                    columnCount: grid.state.columnMeta.get().columnsVisible.length,
+                    focusActive: grid.internal.focusActive,
+                    id: grid.state.gridId.get(),
+                    getRootCell: grid.api.cellRoot,
+                    rtl: grid.state.rtl.get(),
+                    scrollIntoView: grid.api.scrollIntoView,
+                });
+            }
+            e.stopPropagation();
+        }, children: _jsx(EditRenderer, { cell: cell }) }));
+}
+function EditRenderer({ cell }) {
+    const column = cell.column;
+    const ctx = useGridRoot();
+    const base = ctx.grid.state.columnBase.useValue();
+    const editFuncs = ctx.grid.state.editRenderers.useValue();
+    const editRenderer = column.editRenderer ?? base.editRenderer;
+    const activeData = ctx.grid.internal.editData.useValue();
+    const row = cell.row.get();
+    const value = ctx.grid.api.columnField(column, row.kind === "branch"
+        ? { kind: "branch", data: activeData, key: row.key }
+        : { kind: "leaf", data: activeData });
+    const onChange = useCallback((c) => {
+        editOnChange({
+            value: c,
+            activeData,
+            base,
+            column,
+            grid: ctx.grid,
+            row,
+            rowIndex: cell.rowIndex,
+        });
+    }, [activeData, base, cell.rowIndex, column, ctx.grid, row]);
+    if (!editRenderer) {
+        const type = column.type;
+        if (type === "number")
+            return (_jsx("input", { type: "number", value: value ?? "", onChange: (e) => (e.target.value ? onChange(Number.parseFloat(e.target.value)) : 0) }));
+        if (type === "date")
+            return _jsx("input", { type: "date", value: value ?? "", onChange: (e) => onChange(e.target.value) });
+        if (type === "datetime")
+            return (_jsx("input", { type: "datetime-local", value: value ?? "", onChange: (e) => onChange(e.target.value) }));
+        return _jsx("input", { value: value ?? "", onChange: (e) => onChange(e.target.value) });
+    }
+    const Renderer = typeof editRenderer === "string" ? editFuncs[editRenderer] : editRenderer;
+    const validation = ctx.grid.internal.editValidation.useValue();
+    if (!Renderer)
+        return null;
+    return (_jsx(Renderer, { column: column, grid: ctx.grid, onChange: onChange, row: cell.row.get(), rowIndex: cell.rowIndex, value: value, rowValidationState: validation }));
+}

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGridRoot } from "../context.js";
+export function CellSpacePinStart({ xPositions: x }) {
+    const ctx = useGridRoot().grid;
+    const bounds = ctx.state.viewBounds.useValue();
+    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({ xPositions: x }) {
+    const ctx = useGridRoot().grid;
+    const bounds = ctx.state.viewBounds.useValue();
+    const startOffset = x[bounds.colCenterEnd];
+    let offset = x[bounds.colEndStart] - startOffset;
+    const viewWidth = ctx.state.viewportWidthInner.useValue();
+    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({ xPositions: x }) {
+    const ctx = useGridRoot().grid;
+    const bounds = ctx.state.viewBounds.useValue();
+    const offset = x[bounds.colCenterStart - 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 } });
+}

package/dist/cells/cell.d.ts

@@ -0,0 +1,5 @@
+import type { RowCellLayout } from "../+types";
+export interface CellProps {
+    readonly cell: RowCellLayout<any>;
+}
+export declare const Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cells/cell.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 providedRenderer = cell.column.cellRenderer ?? base.cellRenderer;
+    const Renderer = providedRenderer
+        ? typeof providedRenderer === "string"
+            ? (renderers[providedRenderer] ?? CellDefault)
+            : providedRenderer
+        : CellDefault;
+    const [isEditing, setIsEditing] = useState(false);
+    useEffect(() => {
+        return grid.internal.editActivePos.watch(() => {
+            const pos = grid.internal.editActivePos.get();
+            if (!pos)
+                return setIsEditing(false);
+            setIsEditing(pos.column === cell.column &&
+                pos.rowIndex >= cell.rowIndex &&
+                pos.rowIndex < cell.rowIndex + cell.rowSpan);
+        });
+    }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
+    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, { 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-lookup-context.d.ts

@@ -0,0 +1,4 @@
+import type { Column } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export declare const branchLookupContext: import("react").Context<Record<string, PathBranch<Column<any>>>>;
+export declare const useBranchLookup: () => Record<string, PathBranch<Column<any>>>;

package/dist/column-manager/branch-lookup-context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const branchLookupContext = createContext({});
+export const useBranchLookup = () => useContext(branchLookupContext);

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

@@ -0,0 +1,15 @@
+import type { CSSProperties } from "react";
+import type { Column } from "../+types";
+import type { SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface ColumnManagerBranchProps {
+    readonly item: PathBranch<Column<any>>;
+    readonly label: SlotComponent;
+    readonly expander?: SlotComponent<{
+        expanded: boolean;
+        toggle: () => void;
+    }>;
+    readonly labelWrapClassName?: string;
+    readonly labelWrapStyle?: CSSProperties;
+}
+export declare const Branch: import("react").ForwardRefExoticComponent<Omit<ColumnManagerBranchProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/column-manager/branch.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from "react";
+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.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();
+    const accepted = `${id}-columns`;
+    const base = grid.state.columnBase.useValue();
+    const columns = useColumnsFromContext(item);
+    const isVisible = useMemo(() => {
+        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
+        return allVisible;
+    }, [base.hide, columns]);
+    const toggle = useCallback((s) => {
+        const next = s ?? isVisible;
+        grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
+    }, [columns, grid.api, isVisible]);
+    return (_jsx(ColumnItemContext, { value: useMemo(() => ({ item }), [item]), children: _jsx(TreeBranch, { ...props, itemId: item.data.idOccurrence, ref: forwarded, onKeyDown: (ev) => {
+                props.onKeyDown?.(ev);
+                if (ev.key === " ") {
+                    toggle();
+                    ev.preventDefault();
+                }
+            }, labelWrap: _jsx(DropWrap, { "data-ln-column-manager-branch": true, "data-ln-column-id": item.data.idOccurrence, accepted: [accepted], className: labelWrapClassName, style: labelWrapStyle, onEnter: (el) => {
+                    const data = dragState.data
+                        .get()
+                        ?.siteLocalData?.[accepted]?.at(-1);
+                    if (!data)
+                        return;
+                    const move = data.id;
+                    if (columns.some((c) => c.id === move))
+                        return;
+                    const allColumns = grid.state.columns.get();
+                    const moveIndex = allColumns.findIndex((c) => c.id === move);
+                    if (moveIndex === -1)
+                        return;
+                    const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+                    const isBefore = thisIndex > moveIndex;
+                    // Flipped since our source is the one moving
+                    if (!isBefore) {
+                        el.setAttribute("data-ln-is-before", "true");
+                    }
+                    else {
+                        el.setAttribute("data-ln-is-after", "true");
+                    }
+                }, onLeave: (el) => {
+                    el.removeAttribute("data-ln-is-before");
+                    el.removeAttribute("data-ln-is-after");
+                } }), label: label }) }));
+});

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

@@ -0,0 +1,13 @@
+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.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.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

@@ -0,0 +1,18 @@
+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,
+    Label,
+    Branch,
+    Panel,
+    MoveHandle,
+    VisibilityCheckbox,
+    useColumnManager: useColumnManager,
+};

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

@@ -0,0 +1,7 @@
+import type { Column } from "../+types";
+import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
+export interface TreeItemContextValue {
+    readonly item: PathBranch<Column<any>> | PathLeaf<Column<any>>;
+}
+export declare const ColumnItemContext: import("react").Context<TreeItemContextValue>;
+export declare const useColumnItemContext: () => TreeItemContextValue;

package/dist/column-manager/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const ColumnItemContext = createContext(null);
+export const useColumnItemContext = () => useContext(ColumnItemContext);

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

@@ -0,0 +1,5 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface LabelProps {
+    readonly as?: SlotComponent;
+}
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/column-manager/label.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef, useMemo } from "react";
+import { useColumnItemContext } from "./context.js";
+export const Label = forwardRef(function Label({ as, ...props }, forwarded) {
+    const { item } = useColumnItemContext();
+    const label = useMemo(() => {
+        if (item.kind == "branch")
+            return item.id.split("#").at(-2);
+        return item.data.name ?? item.data.id;
+    }, [item]);
+    const rendered = useSlot({
+        props: [{ children: label }, props],
+        ref: forwarded,
+        slot: as ?? _jsx("div", {}),
+    });
+    return rendered;
+});

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

@@ -0,0 +1,6 @@
+import type { Column } from "../+types";
+import type { PathLeaf } from "@1771technologies/lytenyte-shared";
+export interface ColumnManagerLeafProps {
+    readonly item: PathLeaf<Column<any>>;
+}
+export declare const Leaf: import("react").ForwardRefExoticComponent<Omit<ColumnManagerLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/column-manager/leaf.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from "react";
+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.js";
+import { useColumnsFromContext } from "./use-columns-from-context.js";
+export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, forwarded) {
+    const context = useMemo(() => {
+        return { item: item };
+    }, [item]);
+    const grid = useGrid();
+    const id = grid.state.gridId.useValue();
+    const accepted = `${id}-columns`;
+    const base = grid.state.columnBase.useValue();
+    const columns = useColumnsFromContext(item);
+    const isVisible = useMemo(() => {
+        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
+        return allVisible;
+    }, [base.hide, columns]);
+    const toggle = useCallback((s) => {
+        const next = s ?? isVisible;
+        grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
+    }, [columns, grid.api, isVisible]);
+    return (_jsx(ColumnItemContext.Provider, { value: context, children: _jsx(DropWrap, { accepted: [accepted], onEnter: (el) => {
+                const data = dragState.data
+                    .get()
+                    ?.siteLocalData?.[accepted]?.at(-1);
+                if (!data)
+                    return;
+                const columns = [item.data];
+                const move = data.id;
+                if (columns.some((c) => c.id === move))
+                    return;
+                const allColumns = grid.state.columns.get();
+                const moveIndex = allColumns.findIndex((c) => c.id === move);
+                if (moveIndex === -1)
+                    return;
+                const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+                const isBefore = thisIndex > moveIndex;
+                // Flipped since our source is the one moving
+                if (!isBefore) {
+                    el.setAttribute("data-ln-is-before", "true");
+                }
+                else {
+                    el.setAttribute("data-ln-is-after", "true");
+                }
+            }, onLeave: (el) => {
+                el.removeAttribute("data-ln-is-before");
+                el.removeAttribute("data-ln-is-after");
+            }, as: _jsx(TreeLeaf, { ...props, itemId: item.data.id, ref: forwarded, onKeyDown: (ev) => {
+                    props.onKeyDown?.(ev);
+                    if (ev.key === " ") {
+                        toggle();
+                        ev.preventDefault();
+                    }
+                }, "data-ln-column-manager-leaf": true, "data-ln-column-id": item.data.id }) }) }));
+});

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

@@ -0,0 +1,5 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface MoveHandleProps {
+    readonly as?: SlotComponent;
+}
+export declare const MoveHandle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & MoveHandleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,73 @@
+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.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();
+    const columns = useColumnsFromContext(item);
+    const base = grid.state.columnBase.useValue();
+    const isMovable = useMemo(() => {
+        return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable);
+    }, [base.uiHints?.movable, columns]);
+    const { dragProps: { ref, ...otherProps }, } = useDraggable({
+        getItems: () => {
+            const gridId = grid.state.gridId.get();
+            const isGroupable = columns.length === 1 && (columns[0].uiHints?.rowGroupable ?? base.uiHints?.rowGroupable);
+            if (isGroupable) {
+                return {
+                    siteLocalData: {
+                        [`${gridId}-columns`]: columns,
+                        [`${gridId}-group`]: columns[0].id,
+                    },
+                };
+            }
+            return {
+                siteLocalData: {
+                    [`${gridId}-columns`]: columns,
+                },
+            };
+        },
+        onDrop: (p) => {
+            const move = p.dropElement.getAttribute("data-ln-column-id");
+            if (!move)
+                return null;
+            if (columns.some((c) => c.id === move))
+                return;
+            const allColumns = grid.state.columns.get();
+            const moveIndex = allColumns.findIndex((c) => c.id === move);
+            if (moveIndex === -1)
+                return;
+            const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
+            const isBefore = thisIndex > moveIndex;
+            grid.api.columnMove({
+                moveColumns: columns,
+                moveTarget: move,
+                before: isBefore,
+            });
+        },
+        placeholder: (_, el) => {
+            let current = el;
+            while (current &&
+                !current.getAttribute("data-ln-column-manager-leaf") &&
+                !current.getAttribute("data-ln-tree-branch")) {
+                current = current.parentElement;
+            }
+            if (current)
+                return current;
+            else
+                return el;
+        },
+    });
+    const combined = useCombinedRefs(ref, forwarded);
+    const additionalProps = isMovable ? otherProps : {};
+    const renderer = useSlot({
+        props: [{ "aria-label": "Drag to move column" }, additionalProps, props],
+        ref: isMovable ? combined : forwarded,
+        slot: as ?? _jsx("div", {}),
+    });
+    return renderer;
+});

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

@@ -0,0 +1 @@
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/dist/column-manager/panel.js

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

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

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react";
+import type { Column, Grid } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface ColumnManagerRootProps<T> {
+    readonly grid: Grid<T>;
+    readonly lookup: Record<string, PathBranch<Column<any>>>;
+}
+export declare function Root<T>({ grid, lookup, children }: PropsWithChildren<ColumnManagerRootProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/column-manager/root.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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.d.ts

@@ -0,0 +1,10 @@
+import type { Column, Grid } from "../+types";
+import type { PathBranch } from "@1771technologies/lytenyte-shared";
+export interface UseColumnManagerProps<T> {
+    readonly grid: Grid<T>;
+    readonly query?: string;
+}
+export declare function useColumnManager<T>({ grid, query }: UseColumnManagerProps<T>): {
+    items: (PathBranch<Column<T>> | import("@1771technologies/lytenyte-shared").PathLeaf<Column<T>>)[];
+    lookup: Record<string, PathBranch<Column<any>>>;
+};

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

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+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(() => {
+        if (!query)
+            return columns;
+        return columns.filter((c) => (c.name ?? c.id).toLowerCase().includes(query.toLowerCase()));
+    }, [columns, query]);
+    const items = useTreeViewPaths(filteredColumns, true);
+    const branchLookup = useMemo(() => {
+        const stack = [...items];
+        const lookup = {};
+        while (stack.length) {
+            const item = stack.pop();
+            if (item.kind === "leaf")
+                continue;
+            lookup[item.data.idOccurrence] = item;
+            stack.push(...item.children.values());
+        }
+        return lookup;
+    }, [items]);
+    return { items, lookup: branchLookup };
+}

package/dist/column-manager/use-columns-from-context.d.ts

@@ -0,0 +1,3 @@
+import type { Column } from "../+types.js";
+import type { PathBranch, PathLeaf } from "@1771technologies/lytenyte-shared";
+export declare function useColumnsFromContext<T>(item: PathBranch<Column<T>> | PathLeaf<Column<T>>): Column<any>[] | Column<T>[];