@1771technologies/lytenyte-pro 1.0.13 → 1.0.15

package/dist/__play__/cell-selections/cell-selection.play.d.ts

@@ -0,0 +1,5 @@
+import "../../../main.css";
+import "./cell-selection.css";
+export default function CellSelection({ data }: {
+    data?: any[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/{grid-navigation/normal-layout.play.js → cell-selections/cell-selection.play.js}

@@ -1,21 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./navigation.css";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "../../../main.css";
+import "./cell-selection.css";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
 import { useLyteNyte } from "../../state/use-lytenyte.js";
-import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
-import { Root } from "../../root/root.js";
-import { Viewport } from "../../viewport/viewport.js";
-import { Header } from "../../header/header.js";
-import { HeaderRow } from "../../header/header-row.js";
-import { HeaderGroupCell } from "../../header/header-group-cell.js";
-import { HeaderCell } from "../../header/header-cell.js";
-import { RowsContainer } from "../../rows/rows-container.js";
-import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.js";
+import { useId } from "react";
+import { Viewport } from "../../grid/viewport.js";
+import { Root } from "../../grid/root.js";
+import { Header } from "../../grid/header.js";
+import { HeaderRow } from "../../grid/header-row.js";
+import { HeaderGroupCell } from "../../grid/header-group-cell.js";
+import { HeaderCell } from "../../grid/header-cell.js";
+import { RowsContainer } from "../../grid/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "../../grid/rows-sections.js";
 import { RowHandler } from "../test-utils/row-handler.js";
-import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
-const baseColumns = [
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+const columns = [
     { id: "age" },
     { id: "job" },
-    { id: "balance" },
+    { id: "balance", pin: "start" },
     { id: "education" },
     { id: "marital" },
     { id: "default" },
@@ -31,21 +33,27 @@ const baseColumns = [
     { id: "poutcome" },
     { id: "y" },
 ];
-export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, floatingRow, }) {
+export default function CellSelection({ data = bankDataSmall }) {
     const ds = useClientRowDataSource({
-        data: center ? bankDataSmall.slice(0, center) : bankDataSmall,
-        topData: pinTop ? bankDataSmall.slice(0, pinTop) : [],
-        bottomData: pinBot ? bankDataSmall.slice(0, pinBot) : [],
+        data: data,
+        topData: data.slice(0, 2),
+        bottomData: data.slice(0, 2),
     });
     const g = useLyteNyte({
-        gridId: "x",
-        columns: columns ?? baseColumns,
+        gridId: useId(),
+        columns,
         rowDataSource: ds,
-        rtl: rtl,
-        floatingRowEnabled: floatingRow,
+        cellSelectionMode: "range",
+        columnBase: {
+            uiHints: {
+                movable: true,
+                resizable: true,
+            },
+        },
     });
     const view = g.view.useValue();
-    return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, onClick: () => { }, children: "Top Capture" }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
+    const selections = g.state.cellSelections.useValue();
+    return (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { onClick: () => g.state.rtl.set((prev) => !prev), children: ["RTL: ", g.state.rtl.get() ? "Yes" : "No"] }), _jsx("button", { onClick: () => g.state.columnMarkerEnabled.set((prev) => !prev), children: "Toggle Marker" }), _jsx("button", { onClick: () => g.state.cellSelectionMode.set((prev) => prev === "multi-range" ? "range" : "multi-range"), children: "Range Selection" }), _jsx("pre", { children: JSON.stringify(selections) })] }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
                                     return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
                                             if (c.kind === "group") {
                                                 return (_jsx(HeaderGroupCell, { cell: c, style: {
@@ -68,5 +76,5 @@ export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, f
                                                     borderRight: "1px solid light-dark(gray, #444242)",
                                                 } }, c.column.id));
                                         }) }, i));
-                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) }), _jsx("button", { tabIndex: 0, onClick: () => { }, children: "Bottom Capture" })] }));
+                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) })] }));
 }

package/dist/__play__/test-utils/row-handler.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
-import { Cell } from "../../cells/cell.js";
-import { Row } from "../../rows/row/row.js";
-import { RowFullWidth } from "../../rows/row-full-width.js";
+import { Row } from "../../grid/row.js";
+import { Cell } from "../../grid/cell.js";
+import { RowFullWidth } from "../../grid/row-full-width.js";
 export const RowHandler = fastDeepMemo((props) => {
     return props.rows.map((row) => {
         if (row.kind === "full-width")

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

@@ -117,8 +117,11 @@ export function CellSelectionDriver() {
         const pointerDown = (event) => {
             if (!isNormalClick(event)) {
                 document.removeEventListener("pointermove", pointerMove);
-                // Prevent the default for the context menu, otherwise the cell right clicked will be focused,
-                // resulting in the cell selection changing.        if (event.button == 2) event.preventDefault();
+                // Prevent the default for the context menu, otherwise the cell
+                // right clicked will be focused,
+                // resulting in the cell selection changing.
+                if (event.button == 2)
+                    event.preventDefault();
                 return;
             }
             isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);

package/dist/context.d.ts

@@ -1,10 +1,11 @@
 import type { Grid } from "./+types.js";
 import type { InternalAtoms } from "./state/+types.js";
+import type { Provider } from "react";
 export interface GridRootContext {
     readonly ref: (el: HTMLElement | null) => void;
     readonly grid: Grid<any> & {
         internal: InternalAtoms;
     };
 }
-export declare const RootProvider: import("react").Provider<GridRootContext>;
+export declare const RootProvider: Provider<GridRootContext>;
 export declare const useGridRoot: () => GridRootContext;

package/dist/context.js

@@ -1,4 +1,5 @@
-import { createContext, useContext } from "react";
-const context = createContext(null);
-export const RootProvider = context.Provider;
-export const useGridRoot = () => useContext(context);
+import { RootProvider as CoreProvider, useGridRoot as useCoreRoot, } from "@1771technologies/lytenyte-core/yinternal";
+// The PRO context is a superset of the Core context, but we still want to leverage some of the core
+// components to share code. Hence we share the context functionality.
+export const RootProvider = CoreProvider;
+export const useGridRoot = useCoreRoot;

package/dist/grid/cell.d.ts

@@ -0,0 +1,6 @@
+import { type JSX, type ReactNode } from "react";
+import type { RowCellLayout } from "../+types";
+export interface CellProps {
+    readonly cell: RowCellLayout<any>;
+}
+export declare const Cell: (props: Omit<JSX.IntrinsicElements["div"], "children"> & CellProps) => ReactNode;

package/dist/grid/cell.js

@@ -0,0 +1,3 @@
+import {} from "react";
+import { Cell as CellCore } from "@1771technologies/lytenyte-core/yinternal";
+export const Cell = CellCore;

package/dist/{header → grid}/header-cell.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from "react";
+import { type CSSProperties, type JSX, type ReactNode } from "react";
 import type { HeaderCellFloating, HeaderCellLayout } from "../+types";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface HeaderCellProps<T> {
@@ -7,4 +7,4 @@ export interface HeaderCellProps<T> {
     readonly resizerClassName?: string;
     readonly resizerStyle?: CSSProperties;
 }
-export declare const HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HeaderCell: (props: JSX.IntrinsicElements["div"] & HeaderCellProps<any>) => ReactNode;

package/dist/grid/header-cell.js

@@ -0,0 +1,4 @@
+import {} from "react";
+import {} from "@1771technologies/lytenyte-react-hooks";
+import { HeaderCell as HeaderCellCore } from "@1771technologies/lytenyte-core/yinternal";
+export const HeaderCell = HeaderCellCore;

package/dist/grid/header-group-cell.d.ts

@@ -0,0 +1,6 @@
+import { type JSX, type ReactNode } from "react";
+import type { HeaderGroupCellLayout } from "../+types";
+export interface HeaderGroupCellProps {
+    readonly cell: HeaderGroupCellLayout;
+}
+export declare const HeaderGroupCell: (props: JSX.IntrinsicElements["div"] & HeaderGroupCellProps) => ReactNode;

package/dist/grid/header-group-cell.js

@@ -0,0 +1,3 @@
+import {} from "react";
+import { HeaderGroupCell as Core } from "@1771technologies/lytenyte-core/yinternal";
+export const HeaderGroupCell = Core;

package/dist/grid/header-row.d.ts

@@ -0,0 +1,5 @@
+import type { JSX, ReactNode } from "react";
+export interface HeaderRowProps {
+    readonly headerRowIndex: number;
+}
+export declare const HeaderRow: (props: JSX.IntrinsicElements["div"] & HeaderRowProps) => ReactNode;

package/dist/grid/header-row.js

@@ -0,0 +1,2 @@
+import { HeaderRow as Core } from "@1771technologies/lytenyte-core/yinternal";
+export const HeaderRow = Core;

package/dist/grid/header.js

@@ -0,0 +1,2 @@
+import { Header as Core } from "@1771technologies/lytenyte-core/yinternal";
+export const Header = Core;

package/dist/{root → grid}/root.d.ts

@@ -5,4 +5,4 @@ export type RootProps<T> = {
 } & {
     [k in keyof GridEvents<T> as `on${Capitalize<k>}`]: GridEvents<T>[k];
 };
-export declare function Root<T = any>({ grid, children, ...events }: PropsWithChildren<RootProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function Root<T = any>({ children, grid, ...props }: PropsWithChildren<RootProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/grid/root.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { DialogDriver } from "./dialog-driver.js";
+import { PopoverDriver } from "./popover-driver.js";
+import { CellSelectionDriver } from "../cell-selection/cell-selection-driver.js";
+import { hasAValidLicense, licenseState } from "../license.js";
+import { Root as RootCore } from "@1771technologies/lytenyte-core/yinternal";
+export function Root({ children, grid, ...props }) {
+    useEffect(() => {
+        if (hasAValidLicense)
+            return;
+        const existing = document.getElementById("lng1771-watermark");
+        if (existing)
+            return;
+        const invalidLicenseWatermark = document.createElement("div");
+        invalidLicenseWatermark.style.position = "fixed";
+        invalidLicenseWatermark.style.bottom = "0px";
+        invalidLicenseWatermark.style.insetInlineEnd = "0px";
+        invalidLicenseWatermark.style.background = "rgb(255, 167, 167)";
+        invalidLicenseWatermark.style.color = "black";
+        invalidLicenseWatermark.style.fontSize = "1.2rem";
+        invalidLicenseWatermark.style.fontWeight = "bold";
+        invalidLicenseWatermark.style.border = "1px solid black";
+        invalidLicenseWatermark.style.padding = "16px";
+        if (licenseState === "expired")
+            invalidLicenseWatermark.innerHTML = `LyteNyte Grid: License key expired. Your license covers earlier versions only.`;
+        else if (licenseState === "invalid")
+            invalidLicenseWatermark.innerHTML = `LyteNyte Grid: Invalid license key. Please verify the key and try again.`;
+        else
+            invalidLicenseWatermark.innerHTML = `LyteNyte Grid PRO is being used for evaluation. 
+      <a href="https://1771Technologies.com/pricing">Click here</a> to secure your license.`;
+        document.body.appendChild(invalidLicenseWatermark);
+        return () => invalidLicenseWatermark.remove();
+    }, []);
+    const cellSelectionMode = grid.state.cellSelectionMode.useValue();
+    return (_jsxs(RootCore, { ...props, grid: grid, children: [_jsx(DialogDriver, {}), _jsx(PopoverDriver, {}), cellSelectionMode !== "none" && _jsx(CellSelectionDriver, {}), children] }));
+}

package/dist/{rows → grid}/row-full-width.d.ts

@@ -1,3 +1,4 @@
+import { type JSX, type ReactNode } from "react";
 import type { RowFullWidthRowLayout } from "../+types";
 import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
 export interface RowFullWidthProps extends Omit<DropWrapProps, "accepted"> {
@@ -5,4 +6,4 @@ export interface RowFullWidthProps extends Omit<DropWrapProps, "accepted"> {
     readonly space?: "viewport" | "scroll-width";
     readonly accepted?: string[];
 }
-export declare const RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RowFullWidth: (props: JSX.IntrinsicElements["div"] & RowFullWidthProps) => ReactNode;

package/dist/grid/row-full-width.js

@@ -0,0 +1,4 @@
+import {} from "react";
+import {} from "@1771technologies/lytenyte-shared";
+import { RowFullWidth as RowFullWidthCore } from "@1771technologies/lytenyte-core/yinternal";
+export const RowFullWidth = RowFullWidthCore;

package/dist/grid/row.d.ts

@@ -0,0 +1,8 @@
+import { type JSX, type ReactNode } from "react";
+import type { RowNormalRowLayout } from "../+types";
+import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
+export interface RowProps extends Omit<DropWrapProps, "accepted"> {
+    readonly row: RowNormalRowLayout<any>;
+    readonly accepted?: string[];
+}
+export declare const Row: (props: Omit<JSX.IntrinsicElements["div"], "onDrag"> & RowProps) => ReactNode;

package/dist/grid/row.js

@@ -0,0 +1,4 @@
+import {} from "react";
+import {} from "@1771technologies/lytenyte-shared";
+import { Row as RowCore } from "@1771technologies/lytenyte-core/yinternal";
+export const Row = RowCore;

package/dist/grid/rows-container.js

@@ -0,0 +1,2 @@
+import { RowsContainer as RowsContainerCore } from "@1771technologies/lytenyte-core/yinternal";
+export const RowsContainer = RowsContainerCore;

package/dist/grid/rows-sections.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { RowsTop as RowsTopCore, RowsBottom as RowsBottomCore, RowsCenter as RowsCenterCore, NativeScroller, } from "@1771technologies/lytenyte-core/yinternal";
+import { CellSelectionBottom, CellSelectionCenter, CellSelectionTop, } from "../cell-selection/cell-selection-containers.js";
+export const RowsTop = forwardRef(function RowsTop(props, forwarded) {
+    return (_jsxs(RowsTopCore, { ...props, ref: forwarded, children: [props.children, _jsx(CellSelectionTop, {})] }));
+});
+export const RowsCenter = forwardRef(function RowsCenter({ children, ...props }, forwarded) {
+    return (_jsx(RowsCenterCore, { ...props, ref: forwarded, children: _jsxs(NativeScroller, { children: [_jsx(CellSelectionCenter, {}), children] }) }));
+});
+export const RowsBottom = forwardRef(function RowsBottom(props, forwarded) {
+    return (_jsxs(RowsBottomCore, { ...props, ref: forwarded, children: [_jsx(CellSelectionBottom, {}), props.children] }));
+});

package/dist/grid/viewport.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useGridRoot } from "../context.js";
+import { Viewport as Core } from "@1771technologies/lytenyte-core/yinternal";
+export const Viewport = forwardRef(function Viewport(props, forwarded) {
+    const ctx = useGridRoot();
+    const cellSelectionMode = ctx.grid.state.cellSelectionMode.useValue();
+    return (_jsx(Core, { ...props, "data-ln-has-cell-selection": cellSelectionMode !== "none", ref: forwarded }));
+});

package/dist/grid.d.ts

@@ -1,17 +1,17 @@
-import { Root } from "./root/root.js";
+import { Root } from "./grid/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.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>>;
+    HeaderGroupCell: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/header-group-cell.js").HeaderGroupCellProps) => import("react").ReactNode;
+    HeaderRow: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/header-row.js").HeaderRowProps) => import("react").ReactNode;
+    HeaderCell: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/header-cell.js").HeaderCellProps<any>) => import("react").ReactNode;
+    Cell: (props: Omit<import("react").JSX.IntrinsicElements["div"], "children"> & import("./grid/cell.js").CellProps) => import("react").ReactNode;
+    RowFullWidth: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/row-full-width.js").RowFullWidthProps) => import("react").ReactNode;
     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.js").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: (props: Omit<import("react").JSX.IntrinsicElements["div"], "onDrag"> & import("./grid/row.js").RowProps) => import("react").ReactNode;
     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;

package/dist/grid.js

@@ -1,15 +1,15 @@
-import { Cell } from "./cells/cell.js";
-import { Header } from "./header/header.js";
-import { HeaderCell } from "./header/header-cell.js";
-import { HeaderGroupCell } from "./header/header-group-cell.js";
-import { HeaderRow } from "./header/header-row.js";
-import { Root } from "./root/root.js";
-import { RowFullWidth } from "./rows/row-full-width.js";
-import { Row } from "./rows/row/row.js";
-import { RowsContainer } from "./rows/rows-container.js";
-import { RowsBottom, RowsCenter, RowsTop } from "./rows/rows-sections.js";
+import { Cell } from "./grid/cell.js";
+import { Header } from "./grid/header.js";
+import { HeaderCell } from "./grid/header-cell.js";
+import { HeaderGroupCell } from "./grid/header-group-cell.js";
+import { HeaderRow } from "./grid/header-row.js";
+import { Root } from "./grid/root.js";
+import { RowFullWidth } from "./grid/row-full-width.js";
+import { Row } from "./grid/row.js";
+import { RowsContainer } from "./grid/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "./grid/rows-sections.js";
 import { useLyteNyte } from "./state/use-lytenyte.js";
-import { Viewport } from "./viewport/viewport.js";
+import { Viewport } from "./grid/viewport.js";
 export const Grid = {
     Root,
     Header,

package/dist/state/helpers/row-layout/row-layout.js

@@ -50,9 +50,6 @@ export function makeRowLayout({ view: n, viewCache, layout, rds, columns }) {
     };
 }
 function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, layout, viewCache, container, rowForIndex, }) {
-    /**
-     * TOP ROW LAYOUT START
-     */
     for (let r = rowStart; r < rowEnd; r++) {
         const status = layout.special[r];
         const computed = layout.computed[r];
@@ -68,7 +65,9 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
         const rowLastPinTop = n.rowTopEnd - 1 === r ? true : undefined;
         if (status === FULL_WIDTH) {
             const row = {
-                id: node.get()?.id ?? `${r}`,
+                get id() {
+                    return node.get()?.id ?? `${r}`;
+                },
                 rowIndex: r,
                 kind: "full-width",
                 rowPin,
@@ -147,7 +146,9 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
             });
         }
         const row = {
-            id: node.get()?.id ?? `${r}`,
+            get id() {
+                return node.get()?.id ?? `${r}`;
+            },
             rowIndex: r,
             kind: "row",
             cells: cellLayout,

package/dist/types/types.d.ts

@@ -1,8 +1,8 @@
 export type * from "../+types";
-export type { CellProps } from "../cells/cell";
-export type { HeaderCellProps } from "../header/header-cell";
-export type { HeaderGroupCellProps } from "../header/header-group-cell";
-export type { HeaderRowProps } from "../header/header-row";
-export type { RootProps } from "../root/root";
-export type { RowFullWidthProps } from "../rows/row-full-width";
+export type { CellProps } from "../grid/cell";
+export type { HeaderCellProps } from "../grid/header-cell";
+export type { HeaderRowProps } from "../grid/header-row";
+export type { HeaderGroupCellProps } from "../grid/header-group-cell";
+export type { RootProps } from "../grid/root";
+export type { RowFullWidthProps } from "../grid/row-full-width";
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -48,12 +48,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/lytenyte-core": "1.0.13",
-    "@1771technologies/lytenyte-dragon": "1.0.13",
-    "@1771technologies/lytenyte-shared": "1.0.13",
-    "@1771technologies/lytenyte-js-utils": "1.0.13",
-    "@1771technologies/lytenyte-dom-utils": "1.0.13",
-    "@1771technologies/lytenyte-react-hooks": "1.0.13"
+    "@1771technologies/lytenyte-dragon": "1.0.15",
+    "@1771technologies/lytenyte-core": "1.0.15",
+    "@1771technologies/lytenyte-shared": "1.0.15",
+    "@1771technologies/lytenyte-dom-utils": "1.0.15",
+    "@1771technologies/lytenyte-js-utils": "1.0.15",
+    "@1771technologies/lytenyte-react-hooks": "1.0.15"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/__play__/grid-navigation/cell-spans-large.play.d.ts

@@ -1,3 +0,0 @@
-export default function CellSpansLarge({ rtl }: {
-    rtl?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-spans-large.play.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NormalLayout from "./normal-layout.play.js";
-const columns = [
-    {
-        id: "age",
-        colSpan: (c) => {
-            return c.rowIndex === 0 ? 10 : 1;
-        },
-    },
-    { id: "marital" },
-    { id: "default" },
-    { id: "housing", colSpan: 2 },
-    { id: "loan" },
-    { id: "contact" },
-    { id: "day" },
-    { id: "month" },
-    { id: "duration" },
-    { id: "campaign" },
-    { id: "pdays" },
-    { id: "previous" },
-    { id: "poutcome", colSpan: 2 },
-    { id: "y" },
-];
-export default function CellSpansLarge({ rtl }) {
-    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
-}

package/dist/__play__/grid-navigation/cell-spans-with-pins.play.d.ts

@@ -1,3 +0,0 @@
-export default function CellSpansWithPins({ rtl }: {
-    rtl?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-spans-with-pins.play.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NormalLayout from "./normal-layout.play.js";
-const columns = [
-    {
-        id: "age",
-        pin: "start",
-        colSpan: (c) => {
-            return c.rowIndex === 0 ? 10 : 1;
-        },
-    },
-    { id: "marital", pin: "start" },
-    { id: "default" },
-    { id: "housing", colSpan: 2 },
-    { id: "loan" },
-    { id: "contact", pin: "end" },
-    { id: "day", pin: "end" },
-    { id: "month" },
-    { id: "duration" },
-    { id: "campaign" },
-    { id: "pdays" },
-    { id: "previous" },
-    { id: "poutcome", colSpan: 2 },
-    { id: "y" },
-];
-export default function CellSpansWithPins({ rtl }) {
-    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
-}

package/dist/__play__/grid-navigation/cell-spans.play.d.ts

@@ -1,3 +0,0 @@
-export default function CellSpans({ rtl }: {
-    rtl?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-spans.play.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NormalLayout from "./normal-layout.play.js";
-const columns = [
-    {
-        id: "age",
-        colSpan: (c) => {
-            return c.rowIndex === 0 || c.rowIndex === 12 ? 3 : 1;
-        },
-    },
-    {
-        id: "job",
-        colSpan: (c) => {
-            return c.rowIndex === 2 ? 3 : 1;
-        },
-    },
-    { id: "balance" },
-    {
-        id: "education",
-        colSpan: (t) => {
-            if (t.rowIndex === 4)
-                return 2;
-            if (t.rowIndex === 12)
-                return 2;
-            return 1;
-        },
-        rowSpan: (t) => {
-            if (t.rowIndex === 4)
-                return 3;
-            if (t.rowIndex === 8)
-                return 3;
-            if (t.rowIndex === 12)
-                return 2;
-            return 1;
-        },
-    },
-    { id: "marital" },
-    { id: "default" },
-    { id: "housing", colSpan: 2 },
-    { id: "loan" },
-    { id: "contact" },
-    { id: "day" },
-    { id: "month" },
-    { id: "duration" },
-    { id: "campaign" },
-    { id: "pdays" },
-    { id: "previous" },
-    { id: "poutcome", colSpan: 2 },
-    { id: "y" },
-];
-export default function CellSpans({ rtl }) {
-    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
-}

package/dist/__play__/grid-navigation/cell-with-tabbables.play.d.ts

@@ -1,3 +0,0 @@
-export default function CellWithTabbables({ rtl }: {
-    rtl?: boolean;
-}): import("react/jsx-runtime").JSX.Element;