@1771technologies/lytenyte-pro 2.1.3 → 2.2.1

package/README.md

@@ -1,31 +1,22 @@
-<div align="center">
-  <br><br>
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-lytenyte-dark.svg"/>
-    <source media="(prefers-color-scheme: light)" srcset="https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-lytenyte-light.svg"/>
-    <img width="360" alt="Logo of LyteNyte Grid" src="https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-lytenyte-light.svg"/>
-  </picture>
-  <br><br>
-
-  <h3>
-    The Fastest React Data Grid On The Modern Web
-  </h3>
+![Banner](https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-banner.png)
 
-</div>
-<div align="center">
+<!-- <div align="center">
 
-LyteNyte Grid is a **~40 KB, zero-dependency React data grid** engineered for
-high performance and enterprise-scale datasets. It can handle **10,000 updates/sec**
-and render **millions of rows**. No wrappers. No heavy abstractions.
+<picture>
 
-Choose between **headless** components or a **pre-styled** grid out of
-the box, and ship faster with a **declarative API** that
-is purpose-built for React.
+<source media="(prefers-color-scheme: dark)" srcset="https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-banner.png"/>
+<source media="(prefers-color-scheme: light)" srcset="https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-banner.png"/>
+<img width="360" alt="Logo of LyteNyte Grid" src="https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images/github-banner.png"/>
+</picture>
+</div> -->
 
-Start with **LyteNyte Grid Core** (free and open source). Upgrade
-to **LyteNyte Grid PRO** for advanced enterprise features and support.
+<h3>Drop The Fastest React Data Grid Into Your App In Seconds</h3>
 
-[Compare Features](https://1771technologies.com/pricing)
+Building a feature-rich data grid that remains highly performant for end users takes a long time.
+Time that could be spent focusing on your application.
+
+We created LyteNyte Grid to solve that. Designed with an obsessive focus on DX, it's ultra-fast,
+easy to customize, and drastically reduces the engineering effort required for data grids.
 
 </div>
 
@@ -45,23 +36,60 @@ to **LyteNyte Grid PRO** for advanced enterprise features and support.
 
 <div align="center">
 
-<a href="https://1771technologies.com">Website</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/docs/intro-getting-started">Documentation</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/demo">Demo</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/pricing">Pricing</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/eula">EULA</a>
+<a href="https://1771technologies.com">Website</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/docs/intro-getting-started">Documentation</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/demo">Demo</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://1771technologies.com/pricing">Pricing</a> &nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://www.1771technologies.com/blog">Blog</a>
+&nbsp;&nbsp;—&nbsp;&nbsp; <a href="https://www.1771technologies.com/support">Support</a>
 
 </div>
 
 ![LyteNyte Logo](https://xwhoymbxqtnizjadugph.supabase.co/storage/v1/object/public/images//github-readme-image.png)
 
-## LyteNyte Editions
+## Why Choose LyteNyte Grid?
 
-LyteNyte Grid is available in two editions:
+⚡Up to **7x** [faster performance](https://www.1771technologies.com/blog/performance-benchmarks)
+than competing grids. At just **40 KB gzipped**, it renders millions of rows and handles up to **10,000 updates/sec**.
 
-1. **LyteNyte Grid Core:** Free, **open-source edition** for building high-performance data tables. Includes sorting,
-   filtering, editing, row selection, detail views, and more. Also includes advanced features such
-   as aggregation, row grouping, and cell range selection, often locked behind paywalls in other grids.
+🧰 Get **150+ built-in** [grid features](https://www.1771technologies.com/pricing?showFeatures=true#lytenyte-features),
+including server-side data loading, infinite scrolling, pivoting, tree views, filtering, row grouping, and cell editing.
 
-2. **LyteNyte Grid PRO: Commercial edition** that extends Core with powerful enterprise features,
-   including server-side data loading, pivoting, tree data, component managers, and advanced
-   filtering. Build custom menus, popovers, expressions, and workflow-driven UIs with ease.
+🎯 Better DX with a [declarative API](https://www.1771technologies.com/docs/grid-api-extensions)
+that lets you extend the API and column definitions with your own custom props and methods. **100% type-safe**. **No wrappers or dependencies**.
+
+🎨 No [styling tradeoffs](https://www.1771technologies.com/docs/grid-theming)
+by forcing a choice between a **headless table and a pre-built table**. You can run it headless for ultimate customization
+or with pre-built logic and themes if you need to ship in a rush.
+
+🔄Driven by [your state](https://www.1771technologies.com/docs/grid-reactivity). It’s **fully stateless and prop-driven**. Configure it declaratively from
+URL params, server state, or external state for simpler code and zero sync headaches.
+
+🤖 Turbocharges [AI workflows](https://www.1771technologies.com/docs/ai-skills-overview). The grid's
+declarative and type-safe nature allows **AI to statically verify code**, preventing hidden bugs
+and excess token usage caused by wrapping layers and imperative logic found in other grids.
+
+## Installation
+
+LyteNyte Grid can be installed via NPM:
+
+**PRO:**
+
+```sh
+npm install --save @1771technologies/lytenyte-pro
+```
+
+> [!NOTE]
+> You can install and use LyteNyte Grid PRO
+> without a license, but a watermark will be displayed.
+
+**Core:**
+
+```sh
+npm install --save @1771technologies/lytenyte-core
+```
+
+## Quick Start
+
+- Begin with our comprehensive [getting started guide](https://www.1771technologies.com/docs/intro-getting-started).
+- Explore our flexible [pricing options](https://www.1771technologies.com/pricing) to find the ideal fit for your project.
+- Follow our step-by-step [installation guide](https://www.1771technologies.com/docs/intro-installation) to seamlessly integrate LyteNyte Grid into your application.
 
 ## AI-Enhanced Workflows
 
@@ -124,10 +152,24 @@ See our [AI Skills Overview guide](https://1771technologies.com/docs/ai-skills-o
 <summary><b>🚀&nbsp; Virtualization</b></summary>
 <br>
 
-| Feature                                                                            | Core | PRO |
-| ---------------------------------------------------------------------------------- | :--: | :-: |
-| [Row Virtualization](https://www.1771technologies.com/docs/grid-virtualization)    |  ✅  | ✅  |
-| [Column Virtualization](https://www.1771technologies.com/docs/grid-virtualization) |  ✅  | ✅  |
+| Feature                                                                                                             | Core | PRO |
+| ------------------------------------------------------------------------------------------------------------------- | :--: | :-: |
+| [Row Virtualization](https://www.1771technologies.com/docs/grid-virtualization)                                     |  ✅  | ✅  |
+| [Column Virtualization](https://www.1771technologies.com/docs/grid-virtualization)                                  |  ✅  | ✅  |
+| [Scroll Flash Suppression](https://www.1771technologies.com/docs/grid-virtualization#scroll-flash-suppression)      |  ✅  | ✅  |
+| [Initial Viewport Dimensions](https://www.1771technologies.com/docs/grid-virtualization#initial-viewport-rendering) |  ✅  | ✅  |
+
+</details>
+
+<details>
+<summary><b>🎬&nbsp; Animations</b></summary>
+<br>
+
+| Feature                                                                                               | Core | PRO |
+| ----------------------------------------------------------------------------------------------------- | :--: | :-: |
+| [Row Animations](https://www.1771technologies.com/docs/grid-animations)                               |  ✅  | ✅  |
+| [Column Animations](https://www.1771technologies.com/docs/grid-animations)                            |  ✅  | ✅  |
+| [Custom Animation Keyframes](https://www.1771technologies.com/docs/grid-animations#custom-animations) |  ✅  | ✅  |
 
 </details>
 
@@ -155,6 +197,7 @@ See our [AI Skills Overview guide](https://1771technologies.com/docs/ai-skills-o
 | **Basic Row Operations**                                                                                                  |  ✅  | ✅  |
 | &nbsp;&nbsp;&nbsp;↳ [Row Pinning](https://www.1771technologies.com/docs/row-pinning)                                      |  ✅  | ✅  |
 | &nbsp;&nbsp;&nbsp;↳ [Row Spanning](https://www.1771technologies.com/docs/row-spanning)                                    |  ✅  | ✅  |
+| &nbsp;&nbsp;&nbsp;↳ [Row Banding](https://www.1771technologies.com/docs/row-banding)                                      |  ✅  | ✅  |
 | **Row Height**                                                                                                            |  ✅  | ✅  |
 | &nbsp;&nbsp;&nbsp;↳ [Variable Row Height](https://www.1771technologies.com/docs/row-height#variable-row-height)           |  ✅  | ✅  |
 | &nbsp;&nbsp;&nbsp;↳ [Fixed Row Height](https://www.1771technologies.com/docs/row-height#number-row-heights)               |  ✅  | ✅  |
@@ -204,6 +247,18 @@ See our [AI Skills Overview guide](https://1771technologies.com/docs/ai-skills-o
 
 </details>
 
+<details>
+<summary><b>📌&nbsp; Annotations</b> &nbsp;</summary>
+<br>
+
+| Feature                                                                               | Core | PRO |
+| ------------------------------------------------------------------------------------- | :--: | :-: |
+| [Grid Annotations](https://www.1771technologies.com/docs/grid-annotations)            |  —   | ✅  |
+| [Cell Notes](https://www.1771technologies.com/docs/grid-annotations#cell-notes)       |  —   | ✅  |
+| [Marching Ants](https://www.1771technologies.com/docs/grid-annotations#marching-ants) |  —   | ✅  |
+
+</details>
+
 <details>
 <summary><b>🔀&nbsp; Sorting</b></summary>
 <br>
@@ -408,31 +463,17 @@ See our [AI Skills Overview guide](https://1771technologies.com/docs/ai-skills-o
   implements one-way data binding and declarative rendering to
   maintain predictable state management.
 
-## Installation
-
-LyteNyte Grid can be installed via NPM:
-
-**PRO:**
-
-```sh
-npm install --save @1771technologies/lytenyte-pro
-```
-
-> [!NOTE]
-> You can install and use LyteNyte Grid PRO
-> without a license, but a watermark will be displayed.
-
-**Core:**
+## LyteNyte Editions
 
-```sh
-npm install --save @1771technologies/lytenyte-core
-```
+LyteNyte Grid is available in two editions:
 
-## Quick Start
+1. **LyteNyte Grid Core:** Free, **open-source edition** for building high-performance data tables. Includes sorting,
+   filtering, editing, row selection, detail views, and more. Also includes advanced features such
+   as aggregation, row grouping, and cell range selection, often locked behind paywalls in other grids.
 
-- Begin with our comprehensive [getting started guide](https://www.1771technologies.com/docs/intro-getting-started).
-- Explore our flexible [pricing options](https://www.1771technologies.com/pricing) to find the ideal fit for your project.
-- Follow our step-by-step [installation guide](https://www.1771technologies.com/docs/intro-installation) to seamlessly integrate LyteNyte Grid into your application.
+2. **LyteNyte Grid PRO: Commercial edition** that extends Core with powerful enterprise features,
+   including server-side data loading, pivoting, tree data, component managers, and advanced
+   filtering. Build custom menus, popovers, expressions, and workflow-driven UIs with ease.
 
 ## Licensing
 

package/dist/__play__/annotations.play.d.ts

@@ -0,0 +1,4 @@
+import "@1771technologies/lytenyte-design/shadcn-vars.css";
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+export default function AnnotationsPlay(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/annotations.play.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "@1771technologies/lytenyte-design/shadcn-vars.css";
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+import { useState } from "react";
+import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
+import { useClientDataSource } from "../data-source-client/use-client-data-source.js";
+import { Grid } from "../index.js";
+import { annotationBorder } from "./renderers/border.js";
+import { annotationArrow } from "./renderers/arrow.js";
+import { annotationComment } from "./renderers/comment.js";
+const columns = [
+    { id: "age", pin: "start", width: 90 },
+    { id: "job", pin: "start", width: 130 },
+    { id: "balance", width: 110 },
+    { id: "marital", width: 110 },
+    { id: "education", width: 110 },
+    { id: "default", width: 90 },
+    { id: "housing", width: 90 },
+    { id: "loan", width: 90 },
+    { id: "contact", width: 110 },
+    { id: "day", width: 90 },
+    { id: "month", width: 90 },
+    { id: "duration", width: 110 },
+    { id: "campaign", pin: "end", width: 110 },
+    { id: "y", pin: "end", width: 90 },
+];
+export default function AnnotationsPlay() {
+    const [sync, setSync] = useState(false);
+    const ds = useClientDataSource({
+        data: bankDataSmall,
+        topData: bankDataSmall.slice(0, 2),
+        botData: bankDataSmall.slice(0, 2),
+    });
+    const annotations = [
+        {
+            id: "range-corner",
+            anchor: { kind: "range", rowStart: 0, rowEnd: 2, colStart: 0, colEnd: 2 },
+            render: annotationBorder({ color: "#ef4444", width: 3 }),
+        },
+        {
+            id: "range-center",
+            anchor: { kind: "range", rowStart: 10, rowEnd: 13, colStart: 3, colEnd: 6 },
+            render: annotationBorder({ color: "#22c55e" }),
+        },
+        {
+            id: "point-comment",
+            anchor: { kind: "point", x: 700, y: 800 },
+            render: annotationComment({ text: "This scrolls with the data" }),
+        },
+        {
+            id: "header-arrow-end",
+            anchor: { kind: "header", colStart: 12, colEnd: 13 },
+            render: annotationArrow({ direction: "down", color: "#3b82f6" }),
+        },
+        {
+            id: "header-arrow-center",
+            anchor: { kind: "header", colStart: 5, colEnd: 6 },
+            render: annotationArrow({ direction: "down", color: "#f59e0b" }),
+        },
+        {
+            id: "range-by-id",
+            anchor: {
+                kind: "range",
+                rowStart: "leaf-15",
+                rowEnd: "leaf-17",
+                colStart: "contact",
+                colEnd: "duration",
+            },
+            render: annotationBorder({ color: "#a855f7", width: 3 }),
+        },
+        {
+            id: "range-bad-id",
+            anchor: { kind: "range", rowStart: "does-not-exist", rowEnd: "leaf-17", colStart: 0, colEnd: 2 },
+            render: annotationBorder({ color: "#000000" }),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setSync((s) => !s), children: "Toggle suppressScrollFlash (sync mode)" }), _jsx("div", { style: { width: "100%", height: "90vh" }, className: "ln-grid ln-shadcn", children: _jsx(Grid, { columns: columns, columnBase: { resizable: true }, rowSource: ds, suppressScrollFlash: sync, annotations: annotations }) })] }));
+}

package/dist/__play__/renderers/arrow.d.ts

@@ -0,0 +1,7 @@
+import type { Annotation } from "../../types.js";
+export interface AnnotationArrowOptions {
+    readonly direction?: "up" | "down" | "left" | "right";
+    readonly color?: string;
+    readonly size?: number;
+}
+export declare function annotationArrow(options?: AnnotationArrowOptions): Annotation<any>["render"];

package/dist/__play__/renderers/arrow.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ROTATION = {
+    up: 0,
+    right: 90,
+    down: 180,
+    left: 270,
+};
+export function annotationArrow(options) {
+    const direction = options?.direction ?? "up";
+    const color = options?.color ?? "#3b82f6";
+    const size = options?.size ?? 24;
+    return () => (_jsx("div", { style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }, children: _jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", style: { transform: `rotate(${ROTATION[direction]}deg)` }, children: _jsx("path", { d: "M12 2 L22 20 L12 15 L2 20 Z", fill: color }) }) }));
+}

package/dist/__play__/renderers/border.d.ts

@@ -0,0 +1,6 @@
+import type { Annotation } from "../../types.js";
+export interface AnnotationBorderOptions {
+    readonly color?: string;
+    readonly width?: number;
+}
+export declare function annotationBorder(options?: AnnotationBorderOptions): Annotation<any>["render"];

package/dist/__play__/renderers/border.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function annotationBorder(options) {
+    const color = options?.color ?? "#3b82f6";
+    const width = options?.width ?? 2;
+    return () => (_jsx("div", { style: {
+            position: "absolute",
+            inset: 0,
+            boxSizing: "border-box",
+            border: `${width}px solid ${color}`,
+        } }));
+}

package/dist/__play__/renderers/comment.d.ts

@@ -0,0 +1,6 @@
+import type { Annotation } from "../../types.js";
+export interface AnnotationCommentOptions {
+    readonly text: string;
+    readonly color?: string;
+}
+export declare function annotationComment(options: AnnotationCommentOptions): Annotation<any>["render"];

package/dist/__play__/renderers/comment.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function annotationComment(options) {
+    const color = options.color ?? "#f59e0b";
+    return () => (_jsx("div", { title: options.text, style: {
+            position: "absolute",
+            top: 0,
+            insetInlineEnd: 0,
+            width: 0,
+            height: 0,
+            borderTop: `8px solid ${color}`,
+            borderInlineStart: "8px solid transparent",
+            pointerEvents: "auto",
+        } }));
+}

package/dist/components/annotations/annotation-header-overlay.d.ts

@@ -0,0 +1,4 @@
+import type { Annotation } from "./types.js";
+export declare function AnnotationHeaderOverlay({ annotations, }: {
+    readonly annotations: readonly Annotation<any>[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/annotations/annotation-header-overlay.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { splitRect } from "@1771technologies/lytenyte-shared";
+import { useCutoffContext, useColumnsContext } from "@1771technologies/lytenyte-core/internal";
+import { AnnotationHeaderRect } from "./annotation-header-rect.js";
+import { resolveColumnIndex, useColumnIdToIndex } from "./resolve-anchor.js";
+export function AnnotationHeaderOverlay({ annotations, }) {
+    const { startCutoff, endCutoff } = useCutoffContext();
+    const { view } = useColumnsContext();
+    const colIdToIndex = useColumnIdToIndex(view.visibleColumns);
+    const split = useMemo(() => {
+        const result = [];
+        for (const annotation of annotations) {
+            if (annotation.anchor.kind !== "header")
+                continue;
+            const colStart = resolveColumnIndex(annotation.anchor.colStart, colIdToIndex);
+            const colEnd = resolveColumnIndex(annotation.anchor.colEnd, colIdToIndex);
+            if (colStart == null || colEnd == null)
+                continue;
+            const rects = splitRect({ rowStart: 0, rowEnd: 1, columnStart: colStart, columnEnd: colEnd }, startCutoff, endCutoff, 0, 1);
+            for (const rect of rects)
+                result.push({ rect, annotation });
+        }
+        return result;
+    }, [annotations, startCutoff, endCutoff, colIdToIndex]);
+    return (_jsx(_Fragment, { children: split.map((s, i) => (_jsx(AnnotationHeaderRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))) }));
+}

package/dist/components/annotations/annotation-header-rect.d.ts

@@ -0,0 +1,6 @@
+import { type SectionedRect } from "@1771technologies/lytenyte-shared";
+import type { Annotation } from "./types.js";
+export declare function AnnotationHeaderRect({ rect, annotation, }: {
+    readonly rect: SectionedRect;
+    readonly annotation: Annotation<any>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/annotations/annotation-header-rect.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { startSection, endSection } from "@1771technologies/lytenyte-shared";
+import { useMemo } from "react";
+import { sizeFromCoord } from "@1771technologies/js-utils";
+import { useXCoordinates, useRtlContext, useSuppressScrollFlashContext, useDimensionContext, useAPI, } from "@1771technologies/lytenyte-core/internal";
+export function AnnotationHeaderRect({ rect, annotation, }) {
+    const rtl = useRtlContext();
+    const xPositions = useXCoordinates();
+    const sync = useSuppressScrollFlashContext();
+    const dimensions = useDimensionContext();
+    const api = useAPI();
+    const vpWidth = dimensions.innerWidth;
+    const style = useMemo(() => {
+        const isStart = startSection[rect.section];
+        const isEnd = endSection[rect.section];
+        const width = sizeFromCoord(rect.columnStart, xPositions, rect.columnEnd - rect.columnStart);
+        const factor = rtl ? -1 : 1;
+        const x = isEnd
+            ? xPositions[rect.columnStart] - xPositions.at(-1) + vpWidth
+            : xPositions[rect.columnStart] * factor;
+        const style = {
+            height: "100%",
+            width,
+            position: "absolute",
+            pointerEvents: "none",
+            top: 0,
+            transform: sync && !(isStart || isEnd)
+                ? `var(--ln-x-transform) translate3d(${x}px, 0px, 0px)`
+                : `translate3d(${x}px, 0px, 0px)`,
+            zIndex: 1,
+        };
+        if (isStart || isEnd) {
+            style.position = "sticky";
+            style.insetInlineStart = "0px";
+            style.zIndex = 12;
+        }
+        return style;
+    }, [rect.columnStart, rect.columnEnd, rect.section, xPositions, rtl, sync, vpWidth]);
+    return (_jsx("div", { style: style, "data-ln-annotation-rect": true, "data-ln-annotation-id": annotation.id, children: annotation.render({ api }) }));
+}

package/dist/components/annotations/annotation-point-rect.d.ts

@@ -0,0 +1,5 @@
+import type { Annotation, AnnotationAnchorPoint } from "./types.js";
+export declare function AnnotationPointRect({ anchor, annotation, }: {
+    readonly anchor: AnnotationAnchorPoint;
+    readonly annotation: Annotation<any>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/annotations/annotation-point-rect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useYCoordinates, useRowCountsContext, useRtlContext, useSuppressScrollFlashContext, useAPI, } from "@1771technologies/lytenyte-core/internal";
+export function AnnotationPointRect({ anchor, annotation, }) {
+    const rtl = useRtlContext();
+    const yPositions = useYCoordinates();
+    const { topCount: rowTopCount } = useRowCountsContext();
+    const isSync = useSuppressScrollFlashContext();
+    const api = useAPI();
+    const style = useMemo(() => {
+        const factor = rtl ? -1 : 1;
+        const x = isSync ? `calc(${anchor.x * factor}px - var(--ln-x-sync-offset,0))` : anchor.x;
+        const y = isSync
+            ? anchor.y - yPositions[rowTopCount]
+            : `calc(${anchor.y - yPositions[rowTopCount]}px - var(--ln-y-offset, 0px))`;
+        const transform = `translate3d(${typeof x === "string" ? x : `${x}px`}, ${typeof y === "string" ? y : `${y}px`}, 0px)`;
+        return {
+            transform,
+            position: "absolute",
+            pointerEvents: "none",
+            top: 0,
+            zIndex: 1,
+            gridRowStart: "1",
+            gridRowEnd: "2",
+            gridColumnStart: "1",
+            gridColumnEnd: "2",
+        };
+    }, [anchor.x, anchor.y, rtl, isSync, yPositions, rowTopCount]);
+    return (_jsx("div", { style: style, "data-ln-annotation-rect": true, "data-ln-annotation-id": annotation.id, children: annotation.render({ api }) }));
+}

package/dist/components/annotations/annotation-rect.d.ts

@@ -0,0 +1,6 @@
+import { type SectionedRect } from "@1771technologies/lytenyte-shared";
+import type { Annotation } from "./types.js";
+export declare function AnnotationRect({ rect, annotation, }: {
+    readonly rect: SectionedRect;
+    readonly annotation: Annotation<any>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/annotations/annotation-rect.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { bottomSection, endSection, startSection, topSection, } from "@1771technologies/lytenyte-shared";
+import { useMemo } from "react";
+import { sizeFromCoord } from "@1771technologies/js-utils";
+import { useXCoordinates, useYCoordinates, useRowCountsContext, useDimensionContext, useRtlContext, useSuppressScrollFlashContext, useAPI, } from "@1771technologies/lytenyte-core/internal";
+export function AnnotationRect({ rect, annotation, }) {
+    const rtl = useRtlContext();
+    const dimensions = useDimensionContext();
+    const xPositions = useXCoordinates();
+    const yPositions = useYCoordinates();
+    const { rowCount, topCount: rowTopCount, bottomCount: rowBotCount } = useRowCountsContext();
+    const isSync = useSuppressScrollFlashContext();
+    const api = useAPI();
+    const vpWidth = dimensions.innerWidth;
+    const style = useMemo(() => {
+        const columnStart = rect.columnStart;
+        const columnEnd = rect.columnEnd;
+        const isStart = startSection[rect.section];
+        const isEnd = endSection[rect.section];
+        const isTop = topSection[rect.section];
+        const isBot = bottomSection[rect.section];
+        const columnIndex = columnStart;
+        const rowIndex = rect.rowStart;
+        const width = sizeFromCoord(columnStart, xPositions, columnEnd - columnStart);
+        const height = sizeFromCoord(rect.rowStart, yPositions, rect.rowEnd - rect.rowStart);
+        const firstBotIndex = rowCount - rowBotCount;
+        let x;
+        const factor = rtl ? -1 : 1;
+        if (isSync) {
+            x = isEnd
+                ? (xPositions[columnIndex] - xPositions.at(-1) + vpWidth) * factor
+                : isStart
+                    ? xPositions[columnIndex] * factor
+                    : `calc(${xPositions[columnIndex] * factor}px - var(--ln-x-sync-offset,0))`;
+        }
+        else {
+            x = isEnd ? xPositions[columnIndex] - xPositions.at(-1) + vpWidth : xPositions[columnIndex];
+        }
+        let y;
+        if (isSync) {
+            if (isTop)
+                y = yPositions[rowIndex];
+            else
+                y = yPositions[rowIndex] - yPositions[rowTopCount];
+        }
+        else {
+            if (isBot)
+                y = yPositions[rowIndex] - yPositions[firstBotIndex];
+            else if (isTop)
+                y = yPositions[rowIndex];
+            else {
+                y = `calc(${yPositions[rowIndex] - yPositions[rowTopCount]}px - var(--ln-y-offset, 0px))`;
+            }
+        }
+        const transform = `translate3d(${typeof x == "string" ? x : `${x}px`}, ${typeof y === "string" ? y : `${y}px`}, 0px)`;
+        const pinnedRow = isTop || isBot;
+        const pinnedCell = isStart || isEnd;
+        const style = {
+            height,
+            width,
+            transform,
+            position: "absolute",
+            pointerEvents: "none",
+            top: 0,
+            zIndex: annotation.zIndex ?? 1,
+            gridRowStart: "1",
+            gridRowEnd: "2",
+            gridColumnStart: "1",
+            gridColumnEnd: "2",
+        };
+        if (pinnedCell) {
+            style.insetInlineStart = "0px";
+            style.position = "sticky";
+            style.zIndex = annotation.zIndex ?? (pinnedRow ? 6 : 3);
+        }
+        if (pinnedRow) {
+            style.position = "sticky";
+            style.top = "0px";
+            style.zIndex = annotation.zIndex ?? (pinnedCell ? 6 : 3);
+        }
+        return style;
+    }, [
+        rect.columnStart,
+        rect.columnEnd,
+        rect.section,
+        rect.rowStart,
+        rect.rowEnd,
+        xPositions,
+        yPositions,
+        rowCount,
+        rowBotCount,
+        rtl,
+        isSync,
+        vpWidth,
+        rowTopCount,
+    ]);
+    return (_jsx("div", { style: style, "data-ln-annotation-rect": true, "data-ln-annotation-id": annotation.id, children: annotation.render({ api }) }));
+}

package/dist/components/annotations/annotation-row-sections.d.ts

@@ -0,0 +1,10 @@
+import type { Annotation } from "./types.js";
+export declare function AnnotationRowSectionTop({ annotations, }: {
+    readonly annotations: readonly Annotation<any>[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AnnotationRowSectionBottom({ annotations, }: {
+    readonly annotations: readonly Annotation<any>[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AnnotationRowSectionCenter({ annotations, }: {
+    readonly annotations: readonly Annotation<any>[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/annotations/annotation-row-sections.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { splitRect, topSection, centerSection, bottomSection, } from "@1771technologies/lytenyte-shared";
+import { useCutoffContext, useRowSourceContext, useColumnsContext, } from "@1771technologies/lytenyte-core/internal";
+import { AnnotationRect } from "./annotation-rect.js";
+import { AnnotationPointRect } from "./annotation-point-rect.js";
+import { resolveRowIndex, resolveColumnIndex, useColumnIdToIndex } from "./resolve-anchor.js";
+const wrapperStyle = {
+    width: "100%",
+    height: 0,
+    display: "grid",
+    gridTemplateRows: "0px",
+    gridTemplateColumns: "0px",
+};
+function useSplitRangeAnnotations(annotations) {
+    const { startCutoff, endCutoff, topCutoff, bottomCutoff } = useCutoffContext();
+    const rowSource = useRowSourceContext();
+    const { view } = useColumnsContext();
+    const colIdToIndex = useColumnIdToIndex(view.visibleColumns);
+    return useMemo(() => {
+        const result = [];
+        for (const annotation of annotations) {
+            if (annotation.anchor.kind !== "range")
+                continue;
+            const rowStart = resolveRowIndex(annotation.anchor.rowStart, rowSource);
+            const rowEnd = resolveRowIndex(annotation.anchor.rowEnd, rowSource);
+            const colStart = resolveColumnIndex(annotation.anchor.colStart, colIdToIndex);
+            const colEnd = resolveColumnIndex(annotation.anchor.colEnd, colIdToIndex);
+            if (rowStart == null || rowEnd == null || colStart == null || colEnd == null)
+                continue;
+            const rects = splitRect({ rowStart, rowEnd, columnStart: colStart, columnEnd: colEnd }, startCutoff, endCutoff, topCutoff, bottomCutoff);
+            for (const rect of rects)
+                result.push({ rect, annotation });
+        }
+        return result;
+    }, [annotations, startCutoff, endCutoff, topCutoff, bottomCutoff, rowSource, colIdToIndex]);
+}
+export function AnnotationRowSectionTop({ annotations, }) {
+    const split = useSplitRangeAnnotations(annotations);
+    const topSplit = useMemo(() => split.filter((s) => topSection[s.rect.section]), [split]);
+    return (_jsx("div", { role: "presentation", style: wrapperStyle, children: topSplit.map((s, i) => (_jsx(AnnotationRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))) }));
+}
+export function AnnotationRowSectionBottom({ annotations, }) {
+    const split = useSplitRangeAnnotations(annotations);
+    const bottomSplit = useMemo(() => split.filter((s) => bottomSection[s.rect.section]), [split]);
+    return (_jsx("div", { role: "presentation", style: wrapperStyle, children: bottomSplit.map((s, i) => (_jsx(AnnotationRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))) }));
+}
+export function AnnotationRowSectionCenter({ annotations, }) {
+    const split = useSplitRangeAnnotations(annotations);
+    const centerSplit = useMemo(() => split.filter((s) => centerSection[s.rect.section]), [split]);
+    const points = useMemo(() => annotations.filter((a) => a.anchor.kind === "point"), [annotations]);
+    return (_jsxs("div", { role: "presentation", style: wrapperStyle, children: [centerSplit.map((s, i) => (_jsx(AnnotationRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))), points.map((a) => (_jsx(AnnotationPointRect, { anchor: a.anchor, annotation: a }, a.id)))] }));
+}

package/dist/components/annotations/resolve-anchor.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnAbstract, RowSource } from "@1771technologies/lytenyte-shared";
+import type { AnnotationIndexOrId } from "./types.js";
+export declare function resolveRowIndex(value: AnnotationIndexOrId, rowSource: RowSource): number | null;
+export declare function resolveColumnIndex(value: AnnotationIndexOrId, colIdToIndex: ReadonlyMap<string, number>): number | null;
+export declare function useColumnIdToIndex(visibleColumns: readonly ColumnAbstract[]): ReadonlyMap<string, number>;

package/dist/components/annotations/resolve-anchor.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+export function resolveRowIndex(value, rowSource) {
+    if (typeof value === "number")
+        return value;
+    return rowSource.rowIdToRowIndex(value) ?? null;
+}
+export function resolveColumnIndex(value, colIdToIndex) {
+    if (typeof value === "number")
+        return value;
+    return colIdToIndex.get(value) ?? null;
+}
+export function useColumnIdToIndex(visibleColumns) {
+    return useMemo(() => {
+        const map = new Map();
+        visibleColumns.forEach((c, i) => map.set(c.id, i));
+        return map;
+    }, [visibleColumns]);
+}

package/dist/components/annotations/types.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { Root } from "../../root/root.js";
+export type AnnotationIndexOrId = number | string;
+export type AnnotationAnchorRange = {
+    readonly kind: "range";
+    readonly rowStart: AnnotationIndexOrId;
+    readonly rowEnd: AnnotationIndexOrId;
+    readonly colStart: AnnotationIndexOrId;
+    readonly colEnd: AnnotationIndexOrId;
+};
+export type AnnotationAnchorPoint = {
+    readonly kind: "point";
+    readonly x: number;
+    readonly y: number;
+};
+export type AnnotationAnchorHeader = {
+    readonly kind: "header";
+    readonly colStart: AnnotationIndexOrId;
+    readonly colEnd: AnnotationIndexOrId;
+};
+export type AnnotationAnchor = AnnotationAnchorRange | AnnotationAnchorPoint | AnnotationAnchorHeader;
+export type Annotation<Spec extends Root.GridSpec = Root.GridSpec> = {
+    readonly id: string;
+    readonly anchor: AnnotationAnchor;
+    readonly render: (params: {
+        readonly api: Root.API<Spec>;
+    }) => ReactNode;
+    readonly zIndex?: number;
+};

package/dist/components/annotations/types.js

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

package/dist/components/headless/dialog/container.js

@@ -148,6 +148,22 @@ function DialogContainerBase(props, ref) {
                     ev.clientX > bb.right ||
                     ev.clientY < bb.top ||
                     ev.clientY > bb.bottom) {
+                    // If the click lands inside a sibling overlay (e.g. a menu that opened on top
+                    // of this popover), let the event reach it and close this dialog quietly
+                    // instead of swallowing the click with stopImmediatePropagation.
+                    const targetEl = ev.target;
+                    const insideOtherDismissable = targetEl.closest?.("[data-ln-light-dismiss='true']");
+                    if (insideOtherDismissable && insideOtherDismissable !== dialog) {
+                        setTimeout(() => onOpenChange(false));
+                        return;
+                    }
+                    // If the click lands inside another open <dialog> (e.g. a modal edit popover),
+                    // let the event reach it — don't swallow clicks meant for its buttons.
+                    const insideOtherDialog = targetEl.closest?.("dialog[open]");
+                    if (insideOtherDialog && insideOtherDialog !== dialog) {
+                        setTimeout(() => onOpenChange(false));
+                        return;
+                    }
                     ev.stopPropagation();
                     ev.stopImmediatePropagation();
                     if (typeof lightDismiss === "function") {

package/dist/components/pill-manager/item.js

@@ -185,7 +185,7 @@ function PillItemBase({ item, elementEnd, ...props }, ref) {
             row,
         },
     });
-    return (_jsxs("div", { "data-ln-pill-type": row.type, "data-ln-pill-item-container": true, "data-ln-pill-active": item.active, "data-ln-draggable": item.movable, "data-ln-drag-active": isDragActive, onDragLeave: (e) => {
+    return (_jsxs("div", { "data-ln-pill-type": row.type, "data-ln-pill-item-container": true, "data-ln-pill-id": item.id, "data-ln-pill-row-id": row.id, "data-ln-pill-active": item.active, "data-ln-draggable": item.movable, "data-ln-drag-active": isDragActive, onDragLeave: (e) => {
             e.stopPropagation();
             e.preventDefault();
         }, onDragEnter: handleDragEnter, children: [slot, placeholder] }));

package/dist/components/pill-manager/root.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, Fragment, memo, useMemo, useRef, useState } from "react";
+import { forwardRef, Fragment, memo, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
 import { PillRootProvider } from "./root.context.js";
 import { PillRowDefault } from "./row-default.js";
 function PillRootImpl({ children = PillRowDefault, rows, orientation, onPillRowChange, onPillItemActiveChange, onPillItemThrown, ...p }, ref) {
@@ -8,6 +9,9 @@ function PillRootImpl({ children = PillRowDefault, rows, orientation, onPillRowC
     const prevSwapId = useRef(null);
     const prevRowId = useRef(null);
     const movedRef = useRef(null);
+    const rootElRef = useRef(null);
+    const snapshotRef = useRef(new Map());
+    const animationsRef = useRef(new Map());
     const value = useMemo(() => {
         return {
             orientation: orientation ?? "horizontal",
@@ -28,6 +32,85 @@ function PillRootImpl({ children = PillRowDefault, rows, orientation, onPillRowC
         const r = cloned ?? rows;
         return r.map((x, i) => _jsx(Fragment, { children: children(x, value) }, i));
     }, [children, cloned, rows, value]);
-    return (_jsx(PillRootProvider, { value: value, children: _jsx("div", { ...p, ref: ref, "data-ln-pill-root": true, "data-ln-orientation": orientation ?? "horizontal", children: rendered }) }));
+    // FLIP "First": capture pill positions before this render's DOM commit.
+    // useMemo runs during render, before React's mutation phase, so rootElRef.current
+    // still reflects the previous layout — exactly the "before" positions we need.
+    // Only snapshot when cloned is non-null (drag is active and a reorder just occurred).
+    useMemo(() => {
+        const el = rootElRef.current;
+        if (!el || cloned == null)
+            return;
+        const snap = new Map();
+        el.querySelectorAll("[data-ln-pill-id]").forEach((pillEl) => {
+            // Key by "rowId:pillId" — pill IDs are only unique within a row, not across rows.
+            const key = `${pillEl.getAttribute("data-ln-pill-row-id")}:${pillEl.getAttribute("data-ln-pill-id")}`;
+            snap.set(key, pillEl.getBoundingClientRect());
+        });
+        snapshotRef.current = snap;
+    }, [cloned]);
+    // FLIP "Last + Invert + Play": after React commits the new DOM order, measure new
+    // positions, compute the delta from the snapshot, and animate from delta → none.
+    useLayoutEffect(() => {
+        const el = rootElRef.current;
+        if (!el || cloned == null)
+            return;
+        el.querySelectorAll("[data-ln-pill-id]").forEach((pillEl) => {
+            const pillId = pillEl.getAttribute("data-ln-pill-id");
+            const rowId = pillEl.getAttribute("data-ln-pill-row-id");
+            const key = `${rowId}:${pillId}`;
+            const oldRect = snapshotRef.current.get(key);
+            if (!oldRect)
+                return;
+            const newRect = pillEl.getBoundingClientRect();
+            const existing = animationsRef.current.get(key);
+            let dx;
+            let dy;
+            if (existing) {
+                try {
+                    existing.commitStyles();
+                    const xm = /translateX\(([-\d.]+)px\)/.exec(pillEl.style.transform);
+                    const ym = /translateY\(([-\d.]+)px\)/.exec(pillEl.style.transform);
+                    dx = (xm ? parseFloat(xm[1]) : 0) + (oldRect.left - newRect.left);
+                    dy = (ym ? parseFloat(ym[1]) : 0) + (oldRect.top - newRect.top);
+                }
+                catch {
+                    dx = oldRect.left - newRect.left;
+                    dy = oldRect.top - newRect.top;
+                }
+            }
+            else {
+                dx = oldRect.left - newRect.left;
+                dy = oldRect.top - newRect.top;
+            }
+            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                return;
+            pillEl.style.transform = "none";
+            const from = `translateX(${dx}px) translateY(${dy}px)`;
+            if (existing) {
+                existing.effect?.setKeyframes([
+                    { transform: from },
+                    { transform: "none" },
+                ]);
+                existing.currentTime = 0;
+                existing.play();
+                return;
+            }
+            const anim = pillEl.animate([{ transform: from }, { transform: "none" }], {
+                duration: 200,
+                easing: "ease-out",
+            });
+            animationsRef.current.set(key, anim);
+            anim.finished
+                .catch(() => { })
+                .finally(() => {
+                if (animationsRef.current.get(key) === anim) {
+                    animationsRef.current.delete(key);
+                    pillEl.style.transform = "";
+                }
+            });
+        });
+    }, [cloned]);
+    const combined = useCombinedRefs(ref, rootElRef);
+    return (_jsx(PillRootProvider, { value: value, children: _jsx("div", { ...p, ref: combined, "data-ln-pill-root": true, "data-ln-orientation": orientation ?? "horizontal", children: rendered }) }));
 }
 export const PillManager = memo(forwardRef(PillRootImpl));

package/dist/data-source-server/source/use-on-view-change.d.ts

@@ -1,3 +1,3 @@
 import type { ServerData } from "../server-data";
 import type { DataRequest } from "../types";
-export declare function useOnViewChange<T>(source: ServerData, requestsForView: DataRequest[], setRequestsForView: (v: DataRequest[]) => void): (view: import("@1771technologies/lytenyte-shared").SpanLayout) => void;
+export declare function useOnViewChange<T>(source: ServerData, requestsForView: DataRequest[], setRequestsForView: (v: DataRequest[]) => void, debounceDuration: number): (view: import("@1771technologies/lytenyte-shared").SpanLayout) => void;

package/dist/data-source-server/source/use-on-view-change.js

@@ -1,13 +1,37 @@
+import { useRef } from "react";
 import { useEvent } from "@1771technologies/lytenyte-core/internal";
 import { equal } from "@1771technologies/js-utils";
-export function useOnViewChange(source, requestsForView, setRequestsForView) {
-    const onViewChange = useEvent((bounds) => {
-        // This will result in the server sending the requests for the current view.
-        source.rowViewBounds = [bounds.rowCenterStart, bounds.rowCenterEnd];
+export function useOnViewChange(source, requestsForView, setRequestsForView, debounceDuration) {
+    const timerRef = useRef(null);
+    const pendingBoundsRef = useRef(null);
+    // Reads latest requestsForView/setRequestsForView at call time (via useEvent), so the
+    // timer always flushes against the current state even if renders occurred while pending.
+    const flush = useEvent(() => {
+        const bounds = pendingBoundsRef.current;
+        if (!bounds)
+            return;
+        pendingBoundsRef.current = null;
+        source.rowViewBounds = bounds;
         const requests = source.requestsForView();
-        if (equal(requests, requestsForView))
+        if (!equal(requests, requestsForView))
+            setRequestsForView(requests);
+    });
+    const onViewChange = useEvent((bounds) => {
+        if (debounceDuration <= 0) {
+            source.rowViewBounds = [bounds.rowCenterStart, bounds.rowCenterEnd];
+            const requests = source.requestsForView();
+            if (!equal(requests, requestsForView))
+                setRequestsForView(requests);
             return;
-        setRequestsForView(requests);
+        }
+        // Store the latest bounds so the timer always flushes with the final scroll position, not an intermediate one.
+        pendingBoundsRef.current = [bounds.rowCenterStart, bounds.rowCenterEnd];
+        if (timerRef.current !== null)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            flush();
+        }, debounceDuration);
     });
     return onViewChange;
 }

package/dist/data-source-server/use-server-data-source.js

@@ -34,7 +34,8 @@ export function useServerDataSource(props) {
     const rowParents = useRowParents(source);
     const rowsBetween = useRowsBetween(source);
     const rowChildren = useRowChildren(source);
-    const onViewChange = useOnViewChange(source, state.requestsForView, state.setRequestsForView);
+    // TODO @Lee expose a scroll debounce prop.
+    const onViewChange = useOnViewChange(source, state.requestsForView, state.setRequestsForView, 200);
     const idSpec = useEvent((id) => {
         const node = source.tree.rowIdToNode.get(id);
         if (!node || node.kind === "leaf")

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export declare namespace Grid {
     type RowGroupColumn<Spec extends GridSpec = GridSpec> = Required<Root.Props<Spec>>["rowGroupColumn"];
     type Events<Spec extends GridSpec = GridSpec> = Required<Root.Props<Spec>>["events"];
     type Style = LnTypes.GridStyle;
+    type Annotation<Spec extends GridSpec = GridSpec> = LnTypes.Annotation<Spec>;
     namespace Components {
         type Header = GridCore.Components.Header;
         type HeaderRow = GridCore.Components.HeaderRow;

package/dist/root/root.d.ts

@@ -2,12 +2,15 @@ import type * as Core from "@1771technologies/lytenyte-core/types";
 import { type PropsWithChildren, type ReactNode } from "react";
 import type { RowSource } from "@1771technologies/lytenyte-shared";
 import type { Grid } from "@1771technologies/lytenyte-core";
+import type { Annotation } from "../components/annotations/types.js";
 export declare const Root: <Spec extends Root.GridSpec = Root.GridSpec>(props: PropsWithChildren<Root.Props<Spec> & (undefined extends Spec["api"] ? object : {
     apiExtension: Spec["api"];
 })>) => ReactNode;
 export declare namespace Root {
     type GridSpec<T = unknown, C extends Record<string, any> = object, S extends RowSource<T> = RowSource, E extends Record<string, any> = object> = Grid.GridSpec<T, C, S, E>;
-    type Props<Spec extends GridSpec = GridSpec> = Grid.Props<Spec>;
+    type Props<Spec extends GridSpec = GridSpec> = Grid.Props<Spec> & {
+        readonly annotations?: Annotation<Spec>[];
+    };
     type API<Spec extends GridSpec = GridSpec> = Core.API<Spec>;
     type Column<Spec extends GridSpec = GridSpec> = Core.Column<Spec>;
 }

package/dist/root/root.js

@@ -1,8 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Root as RootCore } from "@1771technologies/lytenyte-core/internal";
-import { forwardRef, memo, useEffect } from "react";
+import { Root as RootCore, OverlaySlotsProvider } from "@1771technologies/lytenyte-core/internal";
+import { forwardRef, memo, useEffect, useMemo } from "react";
 import { hasAValidLicense, licenseState } from "../license.js";
+import { AnnotationRowSectionTop } from "../components/annotations/annotation-row-sections.js";
+import { AnnotationRowSectionCenter } from "../components/annotations/annotation-row-sections.js";
+import { AnnotationRowSectionBottom } from "../components/annotations/annotation-row-sections.js";
+import { AnnotationHeaderOverlay } from "../components/annotations/annotation-header-overlay.js";
 const RootWrapper = (props, forwarded) => {
+    const { annotations, ...rest } = props;
+    const overlaySlots = useMemo(() => {
+        if (!annotations || annotations.length === 0)
+            return {};
+        return {
+            rowsTop: _jsx(AnnotationRowSectionTop, { annotations: annotations }),
+            rowsCenter: _jsx(AnnotationRowSectionCenter, { annotations: annotations }),
+            rowsBottom: _jsx(AnnotationRowSectionBottom, { annotations: annotations }),
+            header: _jsx(AnnotationHeaderOverlay, { annotations: annotations }),
+        };
+    }, [annotations]);
     useEffect(() => {
         if (hasAValidLicense)
             return;
@@ -29,6 +44,6 @@ const RootWrapper = (props, forwarded) => {
         document.body.appendChild(invalidLicenseWatermark);
         return () => invalidLicenseWatermark.remove();
     }, []);
-    return _jsx(RootCore, { ref: forwarded, ...props });
+    return (_jsx(OverlaySlotsProvider, { value: overlaySlots, children: _jsx(RootCore, { ref: forwarded, ...rest }) }));
 };
 export const Root = memo(forwardRef(RootWrapper));

package/dist/types.d.ts

@@ -1,3 +1,4 @@
 export type * from "@1771technologies/lytenyte-core/types";
 export type { HavingFilterFn, PivotField, PivotModel, LabelFilter, } from "./data-source-client/use-client-data-source.js";
 export type { PivotState } from "./data-source-client/hooks/use-pivot/use-pivot-columns.js";
+export type { Annotation, AnnotationAnchor, AnnotationAnchorRange, AnnotationAnchorPoint, AnnotationAnchorHeader, } from "./components/annotations/types.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -85,14 +85,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/js-utils": "2.1.3",
-    "@1771technologies/lytenyte-core": "2.1.3",
-    "@1771technologies/lytenyte-design": "2.1.3",
-    "@1771technologies/dom-utils": "2.1.3",
-    "@1771technologies/lytenyte-shared": "2.1.3"
+    "@1771technologies/lytenyte-shared": "2.2.1",
+    "@1771technologies/dom-utils": "2.2.1",
+    "@1771technologies/lytenyte-core": "2.2.1",
+    "@1771technologies/js-utils": "2.2.1",
+    "@1771technologies/lytenyte-design": "2.2.1"
   },
   "devDependencies": {
-    "@1771technologies/grid-sample-data": "2.1.3"
+    "@1771technologies/grid-sample-data": "2.2.1"
   },
   "peerDependencies": {
     "react": "18.0.0 || ^19.0.0",