@sheetxl/grid-react 0.7.21 → 0.7.23-beta.1

package/types/src/surface/IGridSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IGridSurface.d.ts","sourceRoot":"","sources":["../../../../src/surface/IGridSurface.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,cAAc,EACrF,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;IAC/G;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,WAAW,CAAC;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC;IAC/D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,MAAM,CAAC;IAClE;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACxC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;;OAMG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB;;;;;;;OAOG;IACH,wBAAwB,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,EAAE,UAAU,CAAC,qBAAqB,GAAG,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3I;;;OAGG;IACH,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,SAAS,CAAC;IAEvD;;;;;OAKG;IACH,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC;IAEnD;;;;;;OAMG;IACH,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,cAAc,KAAK,SAAS,GAAG,IAAI,CAAC;IAEvD;;OAEG;IACH,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAClD;AAGD;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,cAAc,EAAE,sBAAsB;CAAG"}

package/types/src/surface/SurfaceStateProvider.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+/**
+ * A tiny pub/sub keyed store scoped to a single {@link GridSurface}. It is the backing for
+ * {@link useSurfaceState} — state that conceptually belongs to the *view* (the surface) rather than to
+ * any one React component instance.
+ *
+ * @remarks
+ * The motivating case: a layer (e.g. `Draggable`, `FillHandle`) is
+ * rendered **once per pane** (Center / Top / Left / TopLeft), so a single logical layer is actually
+ * four separate React instances. Transient drag UI (a move ghost, a fill border) lives in component
+ * `useState`, so only the pane that captured the pointer updates — the frozen-pane copies stay stale.
+ * Hoisting that value into a per-surface store lets all four instances read/write one cell (by an
+ * explicit key), so every pane redraws its own (independently clipped) slice. The store lives for the
+ * life of the surface, so a split view / second view gets its own store and never bleeds.
+ */
+export interface SurfaceStateStore {
+    has(key: string): boolean;
+    get(key: string): unknown;
+    set(key: string, value: unknown): void;
+    subscribe(key: string, onChange: () => void): () => void;
+}
+export declare const createSurfaceStateStore: () => SurfaceStateStore;
+export declare const SurfaceStateContext: React.Context<SurfaceStateStore | null>;
+export interface SurfaceStateProviderProps {
+    /**
+     * Explicit store to provide, overriding both inheritance and lazy creation. Pass one to force a
+     * scope — a test, or a nested surface that wants its own transient state despite an ancestor.
+     * Memoize it (a fresh store every render resets the scope).
+     */
+    store?: SurfaceStateStore;
+    children: React.ReactNode;
+}
+/**
+ * Provides the {@link SurfaceStateStore} backing {@link useSurfaceState} to descendant panes/layers.
+ * It resolves the store itself, highest priority first:
+ *
+ * 1. an explicit {@link SurfaceStateProviderProps.store} prop (override);
+ * 2. a store **inherited** from an ancestor `SurfaceStateProvider` — so a wider parent (e.g. a
+ *    `SheetElement` wrapping its top-left corner + both header `GridSurface`s + the main `GridSurface`)
+ *    shares one scope across sibling surfaces, letting a layer keyed the same in a header and in the body
+ *    read one cell;
+ * 3. otherwise a **lazily-created own** store (the standalone default).
+ *
+ * So a {@link GridSurface} can unconditionally mount `<SurfaceStateProvider>` and get the right thing:
+ * its own isolated store when standalone (or under a split view / second view), the shared one when
+ * nested under a wider provider. Because inheritance is automatic, the common case is a bare
+ * `<SurfaceStateProvider>` with no props.
+ */
+export declare const SurfaceStateProvider: React.FC<SurfaceStateProviderProps>;
+//# sourceMappingURL=SurfaceStateProvider.d.ts.map

package/types/src/surface/SurfaceStateProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceStateProvider.d.ts","sourceRoot":"","sources":["../../../../src/surface/SurfaceStateProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,uBAAuB,QAAO,iBAuB1C,CAAC;AAEF,eAAO,MAAM,mBAAmB,yCAAgD,CAAC;AAEjF,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CASpE,CAAC"}

package/types/src/surface/_GridUtils.d.ts

@@ -0,0 +1,37 @@
+import { RangeCoords, Bounds, TopLeft, Rectangle, SelectionTraversalUtils } from '@sheetxl/utils';
+import { ViewportMetrics } from '@sheetxl/utils-react';
+import { ItemSizer, IGridMetrics } from '../metrics';
+/** Clamp `value` into `[min, max]` (the one shared definition — don't re-inline per module). */
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Retrieves the indices of visible headers within a specified range.
+ * A header is considered visible if it is not hidden according to the `hiddenAt` callback.
+ *
+ * @param hiddenAt Callback to determine hidden headers at a given index.
+ * @param startIndex The starting index of the range to check.
+ * @param stopIndex The ending index of the range to check.
+ * @returns An array of visible header indices within the specified range.
+ */
+export declare const getVisibleHeaders: (hiddenAt: SelectionTraversalUtils.HiddenHeadersAt | undefined, startIndex: number, stopIndex: number) => number[];
+export declare const virtualScrollToBounds: (elementBounds: Bounds, viewport: ViewportMetrics, options?: globalThis.ScrollIntoViewOptions | boolean) => TopLeft | undefined;
+/**
+ * default implementation of hiddenAt. Uses layout and will scan zero length.
+ *
+ * Not very efficient as this just scans.
+ */
+export declare const calcHiddenAt: (index: number, reverse: boolean | undefined, sizer: ItemSizer, limit: number) => number;
+/**
+ * Clip `bounds` to `limitBounds` (with optional `insets`). Returns `null` when nothing survives —
+ * i.e. `bounds` is entirely outside `limitBounds`.
+ */
+export declare const clipBounds: (bounds: Bounds, limitBounds: Bounds, insets?: number) => Bounds | null;
+/**
+ * Returns the bounds for a range given a cellLayout and an optional adjustment
+ * The range or layout is not validated as this is expected to be a performant function
+ */
+export declare const getBoundsFromRange: (layout: IGridMetrics, range: RangeCoords, adjustment?: Partial<Rectangle>) => Bounds;
+/**
+ * Returns true if the x and y are bot within the bounds.
+ */
+export declare const isPointWithinBounds: (x: number, y: number, bounds: Bounds) => boolean;
+//# sourceMappingURL=_GridUtils.d.ts.map

package/types/src/surface/_GridUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_GridUtils.d.ts","sourceRoot":"","sources":["../../../../src/surface/_GridUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,WAAW,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,uBAAuB,EAC1F,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/D,gGAAgG;AAChG,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAC3B,CAAC;AAEtC;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,uBAAuB,CAAC,eAAe,GAAG,SAAS,EAC7D,YAAY,MAAM,EAClB,WAAW,MAAM,KAChB,MAAM,EAYR,CAAA;AAwCD,eAAO,MAAM,qBAAqB,GAChC,eAAe,MAAM,EACrB,UAAU,eAAe,EACzB,UAAS,UAAU,CAAC,qBAAqB,GAAG,OAAY,KAAG,OAAO,GAAG,SAsCtE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,EACb,SAAS,OAAO,YAAM,EACtB,OAAO,SAAS,EAChB,OAAO,MAAM,KACZ,MAkBF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,QAAQ,MAAM,EACd,aAAa,MAAM,EACnB,SAAQ,MAAQ,KACf,MAAM,GAAG,IAqCX,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,YAAY,EACpB,OAAO,WAAW,EAClB,aAAa,OAAO,CAAC,SAAS,CAAC,KAC9B,MAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,QAAQ,MAAM,KACb,OAOF,CAAA"}

package/types/src/surface/index.d.ts

@@ -0,0 +1,7 @@
+export * from './IGridPane';
+export * from './IGridSurface';
+export * from './GridSurface';
+export * from './useGridPane';
+export * from './useSurfaceState';
+export * from './SurfaceStateProvider';
+//# sourceMappingURL=index.d.ts.map

package/types/src/surface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/surface/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAE9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC"}

package/types/src/surface/useGridPane.d.ts

@@ -0,0 +1,31 @@
+import { IGridPane } from './IGridPane';
+/**
+ * Hook to access the current GridPane from context
+ *
+ * @throws Error if called outside of a GridPaneProvider
+ *
+ * @example
+ * ```tsx
+ * function MyLayer() {
+ *   const pane = useGridPane();
+ *   const bounds = pane.getRangeBounds(myRange);
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export declare function useGridPane(): IGridPane;
+/**
+ * Hook to optionally access the current GridPane from context
+ * Returns null if not within a GridPaneProvider
+ *
+ * @example
+ * ```tsx
+ * function MyDiv({ pane: propPane, ...props }) {
+ *   const contextPane = useGridPaneOptional();
+ *   const pane = propPane ?? contextPane;
+ *   // Use pane...
+ * }
+ * ```
+ */
+export declare function useGridPaneOptional(): IGridPane | null;
+//# sourceMappingURL=useGridPane.d.ts.map

package/types/src/surface/useGridPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridPane.d.ts","sourceRoot":"","sources":["../../../../src/surface/useGridPane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,IAAI,SAAS,CAMvC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,IAAI,SAAS,GAAG,IAAI,CAEtD"}

package/types/src/surface/useSurfaceState.d.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from 'react';
+/**
+ * Like {@link React.useState}, but the cell is **keyed** and scoped to the enclosing {@link GridSurface},
+ * so every pane that renders this layer reads/writes the SAME cell — writing it from the pane that owns a
+ * drag re-renders the frozen-pane copies too (each draws its own clipped slice). Use it for transient,
+ * view-scoped layer UI (a move ghost, a fill border, marching ants, a drag-insert line).
+ *
+ * @param key - A stable identifier for this piece of shared state, **unique within the surface**.
+ *   Identity is an explicit key, not call position: two mirrored panes are separate React trees (each
+ *   gets its own fiber, and client `useId` is only a mount-order counter), so there is no positional
+ *   identity to collapse across them. This is the same idea as a React `key`, a Redux slice, or a store
+ *   key. For a **singleton** use a constant (`'movable-drag'`); for **multi-instance** state (e.g. one
+ *   mover per range) compose the model's identity into the key (`` `range-move:${rangeKey}` ``) so the
+ *   same logical instance shares across panes while distinct instances stay separate.
+ * @param initialValue - The initial value (or a lazy initializer), exactly like `useState`.
+ *
+ * @remarks
+ * Outside a {@link GridSurface} (e.g. a standalone test) it transparently falls back to a per-instance
+ * store, so it still behaves like ordinary local state.
+ */
+export declare function useSurfaceState<T>(key: string, initialValue: T | (() => T)): [T, Dispatch<SetStateAction<T>>];
+//# sourceMappingURL=useSurfaceState.d.ts.map

package/types/src/surface/useSurfaceState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSurfaceState.d.ts","sourceRoot":"","sources":["../../../../src/surface/useSurfaceState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAAE,KAAK,cAAc,EACnC,MAAM,OAAO,CAAC;AAMf;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAsClC"}

package/types/src/svg/LineSVG.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ShapeProps } from './Types';
+export interface LineSVGProps extends React.SVGProps<SVGSVGElement>, ShapeProps {
+    linePoints: number[];
+    propsPath?: React.SVGProps<SVGPathElement>;
+}
+/**
+ * A **shape**: an SVG polyline painted within the given `bounds` (used for gridlines). Like
+ * {@link RectangleSVG}, it takes resolved bounds and knows nothing about ranges or the pane — a
+ * **layer** would place it. (Shapes take bounds and paint; layers are pane-aware.)
+ */
+export declare const LineSVG: (props: LineSVGProps) => React.JSX.Element | null;
+//# sourceMappingURL=LineSVG.d.ts.map

package/types/src/svg/LineSVG.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineSVG.d.ts","sourceRoot":"","sources":["../../../../src/svg/LineSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU;IAC7E,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;CAC5C;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,6BAsC1C,CAAC"}

package/types/src/svg/RectangleSVG.d.ts

@@ -0,0 +1,114 @@
+import { Bounds } from '@sheetxl/utils';
+import { AnimatedStrokeProps, ShapeProps } from './Types';
+/**
+ * CSS keys that the SVG paths paint via **attributes**, not the wrapper's CSS. They are excluded from
+ * {@link VisualSVGProps.style} so `style={{ stroke }}` is a compile error (it would silently no-op) —
+ * set them via the dedicated `stroke`/`fill`/`strokeWidth`/`strokeDasharray` props instead.
+ */
+type PaintCSSKey = 'stroke' | 'fill' | 'strokeWidth' | 'strokeDasharray' | 'strokeDashoffset';
+/**
+ * The visual props shared by {@link RectangleSVG} and {@link RangeRect} — a curated surface, NOT the
+ * full SVG element props. Paint with the dedicated props (`stroke`/`fill`/`strokeWidth`/…); `style` is
+ * the wrapper's CSS for *effects* only (opacity/filter/transition). For raw `<svg>` attributes or
+ * handlers, use {@link RectangleSVGProps.propsRoot}.
+ */
+export interface VisualSVGProps {
+    /**
+     * Fill color. Omit for an outline-only shape.
+     */
+    fill?: string;
+    /**
+     * Set properties for the fill path.
+     */
+    propsFillPath?: React.SVGProps<SVGPathElement>;
+    /**
+     * Stroke color. Omit for a fill-only shape.
+     */
+    stroke?: string;
+    /**
+     * Set properties for the stroke path.
+     */
+    propsStrokePath?: React.SVGProps<SVGPathElement>;
+    /**
+     * Dash the stroke, e.g. `"3 2"` for a dashed marquee.
+     */
+    strokeDasharray?: string | number;
+    /**
+     * Starting dash offset of the stroke (the marching-ants phase).
+     */
+    strokeDashoffset?: string | number;
+    /**
+     * The stroke width — both **painted** and used for device **alignment** (the crisp-snapping parity:
+     * even widths center on a whole device px, odd on a half). In DEVICE px when aligned (the default) —
+     * so 1/2/3 stay crisp at any dpr, like the gridline; in user/CSS units when {@link disableAlign} is
+     * set. Stacked rectangles that share an `alignWidth` snap to the SAME grid, so they stay locked
+     * together while scrolling (no per-layer "shimmy") — e.g. a two-tone selection border draws its inner
+     * ring at the same `alignWidth`, `inset` inward, *under* the outer so only a sliver shows.
+     *
+     * @defaultValue 1
+     */
+    alignWidth?: number;
+    /**
+     * Skip device alignment: the stroke centerline (½-width + parity) and the fill/hole
+     * edges. Turn ON for a raw, unaligned rect (e.g. an invisible hit target).
+     *
+     * @defaultValue false
+     */
+    disableAlign?: boolean;
+    /**
+     * Disable edge-aware stroke placement. When edge-aware (the default), leading edges (top/left) sit
+     * before the divider, trailing (bottom/right) after — so the outline lines up with cell
+     * borders/gridlines; turn ON to center the stroke on the boundary instead. Ignored when
+     * {@link disableAlign} is set. Negated to read alongside {@link disableAlign}.
+     *
+     * @defaultValue false
+     */
+    disableEdgeAware?: boolean;
+    /**
+     * Push the rectangle inward by this many DEVICE px on every side before placement
+     * (still device-aligned) — for an inner ring layered inside an outer outline.
+     *
+     * @defaultValue 0
+     */
+    inset?: number;
+    /**
+     * Marching-ants animation on the stroke (e.g. the copy/cut marquee). `true` uses
+     * defaults; pass {@link AnimatedStrokeProps} to tune the dash/speed.
+     */
+    animatedStroke?: boolean | AnimatedStrokeProps;
+    /**
+     * Transition the path `d` so the shape glides when its bounds change (move-drag).
+     */
+    animatedTransition?: boolean;
+    /** Class on the root `<svg>`. */
+    className?: string;
+    /**
+     * CSS on the root `<svg>` for *effects* — `opacity`, `filter`, `transition`, etc. NOT
+     * for paint: `stroke`/`fill`/`strokeWidth`/`strokeDasharray` are excluded here (the paths paint via
+     * attributes, so CSS paint would silently no-op) — use the dedicated props for those.
+     */
+    style?: Omit<React.CSSProperties, PaintCSSKey>;
+}
+export interface RectangleSVGProps extends VisualSVGProps, ShapeProps {
+    /**
+     * RAW bounds of an evenodd cut-out of the FILL (e.g. the active cell inside a
+     * selection). Area-snapped (`snapDeviceEdge`), not stroke-snapped. Ignored for the stroke.
+     */
+    hole?: Bounds;
+    /**
+     * Escape hatch: props spread onto the root `<svg>` element (raw attributes, event handlers). Rare —
+     * the wrapper is `pointerEvents: 'none'` by default and overlays seldom need it. Prefer the dedicated
+     * paint props, `style`, `propsStrokePath`, and `propsFillPath`.
+     */
+    propsRoot?: React.SVGProps<SVGSVGElement>;
+}
+/**
+ * A **shape**: a single device-pixel-aligned SVG rectangle (stroke and/or fill, with an optional
+ * evenodd hole). It owns ALL painting and ALL snapping of its sub-shapes — stroke centerline via
+ * `edgeCenter`, fill/hole edges via `snapDeviceEdge` — from the RAW `bounds` it is handed. It knows
+ * nothing about ranges or the pane: a **layer** ({@link RangeRect}) resolves a range to bounds and
+ * places it. (Shapes take bounds and paint; layers are pane-aware and compose into `renderLayers`.)
+ */
+export declare const RectangleSVG: import('react').MemoExoticComponent<(props: RectangleSVGProps) => import("react").JSX.Element | null>;
+export {};
+//# sourceMappingURL=RectangleSVG.d.ts.map

package/types/src/svg/RectangleSVG.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RectangleSVG.d.ts","sourceRoot":"","sources":["../../../../src/svg/RectangleSVG.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,MAAM,EAAkB,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAGpE;;;;GAIG;AACH,KAAK,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,aAAa,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAE9F;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IACjD;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnC;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC/C;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,UAAU;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,8CAAgB,iBAAiB,wCAmLxD,CAAC"}

package/types/src/svg/ShapeBounds.d.ts

@@ -0,0 +1,15 @@
+import { Bounds } from '@sheetxl/utils';
+/**
+ * The RAW (pre-snap) bounds a shape leaf ({@link RectangleSVG} / {@link LineSVG}) draws at, provided
+ * by its container {@link Layer} — already expressed RELATIVE to the layer box's **device-aligned**
+ * origin. The shape still does its own `edgeCenter` / `snapDeviceEdge` snapping; because the origin is
+ * a whole number of device pixels, snapping these box-relative bounds lands on the identical device
+ * pixel as snapping absolute, just offset into the box (which carries the absolute translate).
+ *
+ * `null` when a shape is used standalone (not inside a `Layer`) — it then needs an explicit `bounds`
+ * prop, which always wins over this context.
+ */
+export declare const ShapeBoundsContext: import('react').Context<Bounds | null>;
+/** The container layer's box-relative bounds for a shape; the shape prefers its own `bounds` prop. */
+export declare const useShapeBounds: () => Bounds | null;
+//# sourceMappingURL=ShapeBounds.d.ts.map

package/types/src/svg/ShapeBounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeBounds.d.ts","sourceRoot":"","sources":["../../../../src/svg/ShapeBounds.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,wCAAqC,CAAC;AAErE,sGAAsG;AACtG,eAAO,MAAM,cAAc,QAAO,MAAM,GAAG,IAAsC,CAAC"}

package/types/src/svg/Types.d.ts

@@ -0,0 +1,37 @@
+import { Bounds } from '@sheetxl/utils';
+/**
+ * The **shape contract**: a shape paints at the device `bounds` it is handed. `bounds` is OPTIONAL
+ * because a container {@link Layer} provides it via context ({@link useShapeBounds}) — author shapes
+ * without it inside a `Layer`, or pass it directly when standalone. A `Layer` *positions a box*; HTML
+ * children fill it and shape children paint at the box-relative bounds it provides.
+ */
+export interface ShapeProps {
+    /**
+     * The RAW (pre-snap) bounds to paint at. When a shape is inside a {@link Layer} it reads these from
+     * context (box-relative); otherwise pass it directly (absolute). The shape device-snaps it itself.
+     */
+    bounds?: Bounds;
+}
+/**
+ * Props for animated stroke
+ */
+export interface AnimatedStrokeProps {
+    /**
+     * The named of the animation
+     */
+    name?: string;
+    dashGap: number;
+    speed: number;
+    dashLength: number;
+    /**
+     * Color painted in the dash **gaps** — a solid under-stroke drawn beneath the animated dashes so the
+     * gaps reveal THIS color instead of whatever sits under the outline. Defaults to the grid background
+     * (`--sxl-color-base-100`), which keeps the marching ants legible even when the stroke runs directly
+     * over a same-colored fill (e.g. a reference border over the blue selection). Set explicitly to match
+     * a different backdrop.
+     *
+     * @defaultValue `var(--sxl-color-base-100, #fff)`
+     */
+    gapColor?: string;
+}
+//# sourceMappingURL=Types.d.ts.map

package/types/src/svg/Types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../../src/svg/Types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/types/src/svg/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * **Shapes**: low-level SVG painters. They take resolved `bounds` and paint — no pane, no range. A
+ * **layer** ({@link VirtualDiv} / {@link RangeRect}) resolves a range to bounds and places them.
+ */
+export * from './Types';
+export * from './ShapeBounds';
+export * from './LineSVG';
+export * from './RectangleSVG';
+//# sourceMappingURL=index.d.ts.map

package/types/src/svg/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/svg/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC"}

package/types/src/theme/GridTheme.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from 'react';
+import { TokenTheme, ThemeMode } from '@sheetxl/utils-react';
+/**
+ * grid-react's own **surfaces** — the `grid` (paper + gridlines) and `header` (elevated) token overrides,
+ * layered over the generic app baseline (utils-react `defaultTheme`). Headers have no non-sheet consumers, so
+ * they belong here, not in the shared util. First-pass values (tune against the storybook diff); a later
+ * step can DERIVE these from the app baseline (the `createGridStyleFromMUITheme` elevate/divider math)
+ * instead of authoring them.
+ *
+ * A "surface" is just a partial {@link TokenTheme} merged over the baseline — see utils-react `themeVars`.
+ */
+export declare const GRID_SURFACE: Record<ThemeMode, Partial<TokenTheme>>;
+/**
+ * @remarks
+ * States `color-base-100` in both modes rather than letting it fall through to the app desktop
+ * ({@link buildGridThemeCSS}): with the neutral `defaultTheme`, the dark desktop and the dark grid paper are
+ * both `#1e1e1e`, so an unstated header would equal the cell fill and erase the row/column gutters.
+ *
+ * Header *hover* is `color-base-hover`, not `color-base-200`. `base-100/200/300` is a depth ramp — paper →
+ * recessed ground → border — and a pointer state is not a step on it. Parking hover on `base-200` gave one
+ * ramp token two unrelated meanings (the desktop on the app surface, a hover here); the header now simply
+ * doesn't restate `base-200` and inherits the app's desktop, like every other surface.
+ */
+export declare const HEADER_SURFACE: Record<ThemeMode, Partial<TokenTheme>>;
+/** The grid-surface `--sxl-*` var block for a mode (baseline + grid overrides + any client tweaks). */
+export declare const gridThemeVars: (mode: ThemeMode, ...overrides: Array<Partial<TokenTheme> | undefined>) => CSSProperties;
+/** The header-surface `--sxl-*` var block for a mode (baseline + header overrides + any client tweaks). */
+export declare const headerThemeVars: (mode: ThemeMode, ...overrides: Array<Partial<TokenTheme> | undefined>) => CSSProperties;
+export interface GridThemeCSSOptions {
+    /** App baseline per mode. @defaultValue utils-react `defaultTheme` (via `buildThemeCSS`). */
+    app?: Record<ThemeMode, TokenTheme>;
+    /** `grid` surface overrides per mode. @defaultValue {@link GRID_SURFACE}. */
+    grid?: Record<ThemeMode, Partial<TokenTheme>>;
+    /**
+     * `header` surface overrides per mode. A cell that omits `color-base-100` defaults to the app's
+     * `color-base-200` — the desktop — resolved to a value at emission time (THEMING-DESIGN §4).
+     * @defaultValue {@link HEADER_SURFACE}.
+     */
+    header?: Record<ThemeMode, Partial<TokenTheme>>;
+    /** @defaultValue `'sxl-defaults'` */
+    layer?: string;
+    /**
+     * Scope selector (e.g. `.sheetxl-sheet-<id>`) to emit a per-instance theme. Omit for global (interim).
+     * @defaultValue undefined
+     */
+    scope?: string;
+}
+/**
+ * grid-react's theme stylesheet — the app baseline (utils-react `defaultTheme`, or a passed one) + the
+ * `grid` / `header` surface overrides, compiled to the `data-sxl-theme-*` attribute matrix. Called by the
+ * react `SheetElement` with neutral defaults into `@layer sxl-defaults` (so even a chromeless sheet is
+ * themed), and by studio-mui with MUI-derived values into `sxl-app` on top; clients override in
+ * `sxl-overrides`. Consumers just set `data-sxl-theme-*` attributes.
+ */
+export declare const buildGridThemeCSS: ({ app, grid, header, layer, scope }?: GridThemeCSSOptions) => string;
+//# sourceMappingURL=GridTheme.d.ts.map

package/types/src/theme/GridTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridTheme.d.ts","sourceRoot":"","sources":["../../../../src/theme/GridTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAA0C,MAAM,sBAAsB,CAAC;AAE/G;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,CAO/D,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,CAWjE,CAAC;AAEF,uGAAuG;AACvG,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,EAAE,GAAG,WAAW,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,KAAG,aACnD,CAAC;AAEpD,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,MAAM,SAAS,EAAE,GAAG,WAAW,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,KAAG,aACnD,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,6FAA6F;IAC7F,GAAG,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACpC,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAC9C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAChD,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,sCAM/B,mBAAwB,KAAG,MAsB7B,CAAC"}

package/types/src/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GridTheme';
+//# sourceMappingURL=index.d.ts.map

package/types/src/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/node/assets/style.css

@@ -1 +0,0 @@
-._sheetxl-grid_h9wwa_7{position:relative;box-sizing:border-box;user-select:none}._sheetxl-grid_h9wwa_7 *{box-sizing:border-box!important}._sheetxl-grid_h9wwa_7 *:focus{outline:none}._sheetxl-grid_h9wwa_7 .cell-container{position:absolute;overflow:visible;white-space:pre}._sheetxl-grid_h9wwa_7 .cell-container>*{inset:0;position:absolute}._sheetxl-grid_h9wwa_7 .sheetxl-stage{contain:strict}._sheetxl-grid_h9wwa_7 .sheetxl-stage>*{contain:strict}