@vuu-ui/grid-layout 4.0.0-alpha.1

package/types/GridLayoutModel.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter, type GridLayoutSplitDirection, type OptionalProperty } from "@vuu-ui/vuu-utils";
+import { type GridGeometryTransition, type GridInsertTrackTransition, type GridRemoveItemTransition, type GridReplaceItemTransition } from "./GridGeometry";
+import type { TrackType, GridLayoutModelCoordinates, GridModel, GridModelChildItem, GridModelEvents, GridTrackResizeConstraint, ISplitter } from "./GridModel";
+export type GridLayoutModelPosition = {
+    end: number;
+    start: number;
+};
+export type ResizeState = {
+    maxMousePos: number;
+    minMousePos: number;
+    proportionalTrackGroups?: {
+        after: number[];
+        before: number[];
+    };
+    proportionalTrackConstraints?: {
+        after: GridTrackResizeConstraint[];
+        before: GridTrackResizeConstraint[];
+    };
+    proportionalInitialTrackSizes?: number[];
+    proportionalMoveBy?: number;
+    resizeTrackIsShared: boolean;
+    mousePos: number;
+    splitter: ISplitter;
+};
+export type GridItemRemoveReason = "drag" | "close" | "placeholder" | "unstack";
+export type GridLayoutResizeOperation = "contract" | "expand";
+export type GridLayoutResizeDirection = "vertical" | "horizontal";
+export type GridLayoutRelativePosition = "aboveInSameColumn" | "belowInSameColumn" | "rightInSameRow" | "leftInSameRow";
+export type GridLayoutTrack = "column" | "row";
+export type GridLayoutModelItemType = "content" | "placeholder" | "splitter" | "stacked-content";
+type OneOrBothGridLayoutModelCoordinates = GridLayoutModelCoordinates | OptionalProperty<GridLayoutModelCoordinates, TrackType>;
+export type GridItemUpdate = [string, OneOrBothGridLayoutModelCoordinates];
+export type GridLayoutModelEvents = Pick<GridModelEvents, "child-position-updates">;
+export declare class GridLayoutModel extends EventEmitter<GridLayoutModelEvents> {
+    private gridModel;
+    private splitters;
+    constructor(gridModel: GridModel);
+    /**
+     * Hydrate a pure remove transition and notify listeners exactly as the
+     * legacy engine did: positions are broadcast before placeholders are
+     * regenerated.
+     */
+    applyRemoveTransition(transition: GridRemoveItemTransition): void;
+    removeGridItem(gridItemId: string, reason: GridItemRemoveReason): void;
+    /** Hydrate a pure centre replacement transition. */
+    applyReplaceTransition(transition: GridReplaceItemTransition): void;
+    dropReplaceGridItem(droppedItemId: string, targetItemId: string): GridModelChildItem;
+    createSplitters(): ISplitter[];
+    getSplitterById(splitterId: string): ISplitter;
+    getSplitter(gridLayoutItem: GridModelChildItem, resizeDirection: GridLayoutResizeDirection): ISplitter;
+    /** Hydrate a pure track insertion transition. */
+    applyInsertTrackTransition(trackType: TrackType, transition: GridInsertTrackTransition): void;
+    /**
+     * We're going to resize a gridItem that shares a grid line with one or
+     * more other grid items. We need to insert a new grid line, then anchor
+     * the griditem to be resized to the new grid line.
+     */
+    addTrackForResize(trackType: TrackType, newTrackSize: number, resizeOperation: GridLayoutResizeOperation, index: number, state: ResizeState): void;
+    /** Hydrate a pure split transition. */
+    applySplitTransition(transition: GridGeometryTransition): void;
+    /**
+     * Dragged child item has been dropped on (NESW) quadrant of target.
+     * Split the target in two, respecting targetted quadrant and
+     * assign layout positions of each child item.
+     */
+    dropSplitGridItem(droppedItemId: string, targetItemId: string, splitDirection: GridLayoutSplitDirection, resizeDirection?: import("./GridGeometry").GridGeometryResizeDirection): boolean;
+    canSplitGridItem(targetItemId: string, splitDirection: GridLayoutSplitDirection): boolean;
+    removeTrack(trackIndex: number, resizeDirection: GridLayoutResizeDirection): GridItemUpdate[];
+    isResizeTrackShared(splitter: ISplitter): boolean;
+    toDebugString(): string;
+}
+export {};

package/types/GridLayoutProvider.d.ts

@@ -0,0 +1,59 @@
+import { type DragEvent, type ReactElement, type ReactNode } from "react";
+import type { GridComponentRendererRegistry, GridComponentSettingsInput, GridComponentSettingsRegistry } from "./GridComponentSettings";
+import { type GridLayoutDocument, type GridLayoutDocumentError } from "./GridLayoutDocument";
+import { type LegacyDeserializedGridLayout, type LegacySerializedComponentMap, type SerializedGridLayout } from "./GridLayoutLegacyCompatibility";
+import type { ComponentTemplate } from "./GridLayoutContext";
+import type { GridCommittedTransition } from "./GridController";
+type GridLayoutOptions = {
+    newChildItem: {
+        header: boolean;
+    };
+};
+/** @deprecated Use GridLayoutDocument component records. */
+export type SerializedComponentMap = LegacySerializedComponentMap;
+/** @deprecated Use a decoded GridLayoutDocument. */
+export type DeserializedGridLayout = LegacyDeserializedGridLayout;
+export type { SerializedGridLayout } from "./GridLayoutLegacyCompatibility";
+export type GridLayoutDragEndHandler = (evt: DragEvent<HTMLElement>, dropped: boolean) => void;
+export interface GridLayoutProviderProps {
+    children: ReactNode;
+    componentRenderers?: GridComponentRendererRegistry;
+    componentSettings?: readonly GridComponentSettingsInput[];
+    document?: unknown;
+    documentController?: GridLayoutDocumentController;
+    onDocumentChange?: GridLayoutDocumentChangeHandler;
+    onDocumentError?: (error: GridLayoutDocumentError) => void;
+    options?: GridLayoutOptions;
+    settingsCodecs?: GridComponentSettingsRegistry;
+    /**
+     * Read-only compatibility input. Changes are never written to this shape.
+     *
+     * @deprecated Use document with settingsCodecs and componentRenderers.
+     */
+    serializedLayout?: SerializedGridLayout;
+}
+export interface GridLayoutDocumentChange {
+    readonly document: GridLayoutDocument;
+    readonly kind: GridCommittedTransition["kind"];
+    readonly removedComponentInstanceIds: readonly string[];
+    readonly revision: number;
+}
+export type GridLayoutDocumentChangeHandler = (document: GridLayoutDocument, change: GridLayoutDocumentChange) => void;
+export type GridLayoutDocumentStoreListener = () => void;
+export declare class GridLayoutDocumentController {
+    #private;
+    constructor(document?: GridLayoutDocument);
+    getSnapshot: () => GridLayoutDocument | undefined;
+    getChange: () => GridLayoutDocumentChange | undefined;
+    subscribe: (listener: GridLayoutDocumentStoreListener) => () => boolean;
+    replace(document: GridLayoutDocument | undefined): void;
+    publish(change: GridLayoutDocumentChange): void;
+}
+export declare const GridLayoutProvider: (props: GridLayoutProviderProps) => ReactElement;
+export declare const useGridChangeHandler: () => {
+    onCommittedSnapshot: ((transition: GridCommittedTransition, placeholderIds: readonly string[]) => void) | undefined;
+    releaseTemplateComponent: ((id: string) => void) | undefined;
+    renderTemplateComponent: ((template: ComponentTemplate, id: string) => ReactElement | undefined) | undefined;
+};
+export declare const useSavedGrid: () => ((id: string) => LegacyDeserializedGridLayout | undefined) | undefined;
+export declare const useGridLayoutOptions: () => GridLayoutOptions | undefined;

package/types/GridLayoutStackedtem.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+import { type ComponentTemplateWithoutLabel } from "./GridLayoutContext";
+import type { GridLayoutItemProps } from "./GridLayoutItem";
+export interface GridLayoutStackedItemProps extends GridLayoutItemProps {
+    allowAddTab?: boolean;
+    getNewComponent?: () => ComponentTemplateWithoutLabel;
+    showMenu?: boolean;
+}
+export declare const GridLayoutStackedItem: ({ allowAddTab, children, className: classNameProp, header, id, getNewComponent, minHeight, minWidth, resizeable, showMenu, style: styleProp, title, ...htmlAttributes }: GridLayoutStackedItemProps) => import("react").JSX.Element;
+export declare const isGridLayoutStackedItem: (element: ReactElement) => boolean;

package/types/GridModel.d.ts

@@ -0,0 +1,504 @@
+import { EventEmitter, type OptionalProperty } from "@vuu-ui/vuu-utils";
+import type { CSSProperties } from "react";
+import type { DropPosition } from "./drag-drop-next/DragContextNext";
+import { type GridGeometry, type GridGeometryItem, type GridGeometryResult, type GridGeometryTrack, type GridGeometryUpdate, type GridMeasurements, type GridTrackTransition, type TrackMetrics } from "./GridGeometry";
+import type { GridItemRemoveReason, GridItemUpdate, GridLayoutModelPosition, GridLayoutResizeDirection } from "./GridLayoutModel";
+import { type GridStackResult, type GridStackState, type GridStackTransition } from "./GridStack";
+import type { GridItemId, StackId } from "./GridSnapshot";
+export type TrackUnit = "px" | "fr";
+export type CSSFraction = `${number}fr`;
+export type CSSPixels = `${number}px`;
+export type TrackSize = CSSFraction | CSSPixels;
+export declare const DEFAULT_MIN_GRID_ITEM_SIZE = 80;
+export declare const resolveMinimumGridItemSize: (minimum: number | undefined, styleMinimum: CSSProperties["minWidth"]) => number | undefined;
+export declare const isFractionUnit: (trackSize: TrackSize) => trackSize is CSSFraction;
+export declare const isPixelUnit: (trackSize: TrackSize) => trackSize is CSSPixels;
+/**
+ * Convert pure geometry updates into the legacy update tuples broadcast to
+ * position listeners.
+ */
+export declare const toGridItemUpdates: (updates: readonly GridGeometryUpdate[]) => GridItemUpdate[];
+export interface GridLayoutChildItemDescriptor {
+    componentId?: string;
+    contentVisible?: boolean;
+    dropTarget?: boolean | string;
+    gridArea: string;
+    header?: boolean;
+    minHeight?: number;
+    minWidth?: number;
+    resizeable?: GridModelItemResizeable;
+    /**
+     * For GridLayoutItems that are 'stacked' (e.g. displayed in tabbed container)
+     * this is the id of the associated StackedLayoutItem.
+     */
+    stackId?: string;
+    title?: string;
+}
+export interface GridLayoutChildItemDescriptorWithComponentId extends GridLayoutChildItemDescriptor {
+    componentId: string;
+}
+export type GridLayoutChildItemDescriptors = Record<string, GridLayoutChildItemDescriptor>;
+export interface GridColumnsAndRows {
+    cols: TrackSize[];
+    rows: TrackSize[];
+}
+/**
+ * Describes a GridLayout
+ * grid rows and columns
+ * layout details of gridItems
+ *
+ * @deprecated This is the v1 compatibility descriptor. Persist and observe
+ * canonical GridSnapshot values through GridLayoutDocument/GridController.
+ */
+export interface GridLayoutDescriptor extends GridColumnsAndRows {
+    gridLayoutItems?: GridLayoutChildItemDescriptors;
+}
+export interface GridLayoutModelCoordinates {
+    column: GridLayoutModelPosition;
+    row: GridLayoutModelPosition;
+}
+export interface GridModelChildItemProps extends Omit<GridLayoutChildItemDescriptor, "gridArea"> {
+    contentVisible?: boolean;
+    fixed?: boolean;
+    height?: number;
+    id: string;
+    style?: GridChildItemStyle;
+    type?: GridModelItemType;
+    width?: number;
+}
+export type GridModelTrack = "column" | "row";
+export type AssignDirection = "bwd" | "fwd";
+export type TrackInsertionPosition = {
+    index: number;
+    position: "before" | "after";
+};
+/** @deprecated Use committed GridLayoutDocument changes from GridLayoutProvider. */
+export type GridLayoutChangeHandler = (gridId: string, gridLayoutDescriptor: GridLayoutDescriptor) => void;
+export type GridTrackAddedEvent = {
+    gridId: string;
+    trackType: TrackType;
+    newTrackIndex: number;
+    newTracks: GridTrack[];
+};
+export type GridTrackAddedHandler = (evt: GridTrackAddedEvent) => void;
+export type NonContentResetOptions = {
+    placeholders?: boolean;
+    splitters?: boolean;
+};
+export declare const NonContentResetOptions: NonContentResetOptions;
+export type GridChildPositionChangeHandler = (updates: GridItemUpdate[], nonContentResetOptions?: NonContentResetOptions) => void;
+export type TabsChangeHandler = (tabsId: string, active: number, tabs: TabStateTab[]) => void;
+export type TabSelectionChangeHandler = (tabsId: string, active: number) => void;
+export type GridModelEvents = {
+    "grid-layout-change": GridLayoutChangeHandler;
+    "grid-track-added": GridTrackAddedHandler;
+    "child-position-updates": GridChildPositionChangeHandler;
+    "tabs-change": TabsChangeHandler;
+    "tabs-created": (stackItem: GridModelChildItem) => void;
+    "tabs-removed": (tabsId: string) => void;
+    "tab-selection-change": TabSelectionChangeHandler;
+};
+export type GridModelPosition = {
+    end: number;
+    start: number;
+};
+/**
+ * Describes position of component within grid container. Position
+ * is grid column and row start and end values.
+ */
+export interface GridModelCoordinates {
+    column: GridModelPosition;
+    row: GridModelPosition;
+}
+export type GridModelItemResizeable = "h" | "v" | "hv" | false;
+export type GridModelItemType = "content" | "placeholder" | "splitter" | "stacked-content";
+/**
+ * The set of attributes that allow the management of layout and behaviour of a
+ * component laid out in a grid container.
+ */
+export interface IGridModelChildItem extends GridModelCoordinates {
+    childId?: string[];
+    closeable?: boolean;
+    componentInstanceId?: string;
+    contentVisible?: boolean;
+    dropTarget?: boolean | string;
+    fixed?: boolean;
+    header?: boolean;
+    height?: number;
+    id: string;
+    minHeight?: number;
+    minWidth?: number;
+    stackId?: string;
+    resizeable?: GridModelItemResizeable;
+    title?: string;
+    type: GridModelItemType;
+    width?: number;
+}
+export interface IPlaceholder extends IGridModelChildItem {
+    type: "placeholder";
+}
+export type GridChildItemStyle = Omit<CSSProperties, "gridArea"> & {
+    gridArea: string;
+};
+type StackedGridModelChildItem = GridModelChildItem & {
+    stackId: string;
+};
+export declare const isStackedItem: (i: GridModelChildItem) => i is StackedGridModelChildItem;
+export type GridModelStackedChildItem = GridModelChildItem & {
+    type: "stacked-content";
+};
+export declare class GridModelChildItem implements IGridModelChildItem {
+    #private;
+    id: string;
+    column: GridModelPosition;
+    componentInstanceId?: string;
+    contentDetached?: boolean;
+    contentVisible?: boolean;
+    dropTarget?: boolean | string;
+    header?: boolean;
+    height?: number;
+    horizontalSplitter: boolean;
+    minHeight?: number;
+    minWidth?: number;
+    stackId?: string;
+    resizeable: GridModelItemResizeable;
+    row: GridModelPosition;
+    title?: string;
+    type: GridModelItemType;
+    verticalSplitter: boolean;
+    width?: number;
+    constructor({ componentInstanceId, header, height, id, minHeight, minWidth, row, column, dropTarget, stackId, resizeable, title, type, width, contentVisible, }: OptionalProperty<IGridModelChildItem, "type">);
+    get dragging(): boolean;
+    set dragging(isDragging: boolean);
+    get gridArea(): string;
+}
+export type AriaOrientation = "horizontal" | "vertical";
+export type SplitterAlign = "start" | "end";
+export interface ISplitter extends GridLayoutModelCoordinates {
+    align: SplitterAlign;
+    ariaOrientation: AriaOrientation;
+    controls: string;
+    id: string;
+    orientation: GridLayoutResizeDirection;
+    /**
+     * Index values of the two grid tracks (column or row) whose
+     * dimension (width for columns, height for rows) can be
+     * manipulated with this splitter. The tracks will usually,
+     * but not always, be adjacent.
+     */
+    resizedGridTracks: [number, number];
+    resizedChildItems: {
+        before: string[];
+        after: string[];
+    };
+}
+export type TabStateEvent = (tabState: TabState) => void;
+export type TabStateTabEvents = {
+    "active-change": TabStateEvent;
+    "tab-added": (tabState: TabState, tab: TabStateTab) => void;
+    "tab-detached": TabStateEvent;
+    "tabs-change": (tabsId: string, active: number, tabs: TabStateTab[]) => void;
+    "tabs-removed": (tabsId: string) => void;
+};
+export type TabStateTab = {
+    id: string;
+    label: string;
+};
+export declare class TabState extends EventEmitter<TabStateTabEvents> {
+    id: string;
+    active: number;
+    tabs: TabStateTab[];
+    detachedTab: TabStateTab | undefined;
+    constructor(id: string, active: number, tabs: TabStateTab[]);
+    setActiveTab(value: string): void;
+    setActiveTabById(id: string): void;
+    /**
+     * A Tab is detached when a drag operation commences. It is removed from Tabstrip, but associated component
+     * remains in DOM. The 'next' tab is selected and the associated TabPanel made visible. The tab panel associated
+     * with the detached tab remains below the selected tab panel. This allows a dragged tab panel to be repositioned
+     * vis drag drop without removing it from DOM, triggering React unmount/remount.
+     */
+    detachTab(value: string): void;
+    restoreDetachedTab(value: string): void;
+    setNextActiveTab(): void;
+    moveTab(tab: TabStateTab, { position, target }: DropPosition, activateTab?: boolean): void;
+    moveTabById(tabId: string, targetId: string, position: "after" | "before", activateTab?: boolean): void;
+    addTab(tab: TabStateTab, dropPosition?: DropPosition): void;
+    removeTab(id: string): void;
+    renameTab(id: string, label: string): void;
+    get activeTab(): TabStateTab;
+    private getNextActiveTab;
+    private indexOfTab;
+}
+export type TrackType = "column" | "row";
+export type GridTrackResizeHandler = (trackType: TrackType, tracks: GridTrack[]) => void;
+export type GridTrackEvents = {
+    "grid-track-added": GridTrackAddedHandler;
+    "grid-track-resize": GridTrackResizeHandler;
+};
+export type GridTrackResizeConstraint = {
+    minimum: number;
+    trackIndices: number[];
+};
+export declare class GridTrack {
+    #private;
+    static fromTrackSize: (trackSize: TrackSize) => GridTrack;
+    constructor(trackSize: TrackSize);
+    get hasBeenMeasured(): boolean;
+    get isFraction(): boolean;
+    get isPixelValue(): boolean;
+    get isMeasured(): boolean;
+    get measuredValue(): number;
+    set measuredValue(value: number);
+    convertUnitsToPixels(): void;
+    get hasNumericValue(): boolean;
+    get numericValue(): number;
+    get trackSize(): TrackSize;
+    set trackSize(trackSize: TrackSize);
+    addFraction(trackSize: TrackSize): void;
+    increment(value: number): void;
+    toString: () => TrackSize;
+}
+type GridTrackCheckpoint = {
+    readonly track: GridTrack;
+    readonly measuredValue: number;
+    readonly size: TrackSize;
+};
+type GridTracksCheckpoint = {
+    readonly columns: readonly GridTrackCheckpoint[];
+    readonly rows: readonly GridTrackCheckpoint[];
+};
+export declare class GridTracks extends EventEmitter<GridTrackEvents> {
+    #private;
+    private gridId;
+    constructor(gridId: string, columns: TrackSize[], rows: TrackSize[]);
+    get columns(): TrackSize[];
+    set columns(columns: TrackSize[]);
+    get rows(): TrackSize[];
+    set rows(rows: TrackSize[]);
+    get colCount(): number;
+    get rowCount(): number;
+    getTracks(trackType: TrackType): GridTrack[];
+    createCheckpoint(): GridTracksCheckpoint;
+    restoreCheckpoint({ columns, rows }: GridTracksCheckpoint): void;
+    /**
+     * Set the numeric track values from values read from DOM. This is invoked from a callbackRef
+     * as soom as GridLayout container is rendered into dom.
+     */
+    measure(trackType: TrackType): void;
+    /**
+     * The immutable measurement input for a track type. Measured values are -1
+     * for tracks that have not been measured.
+     */
+    getTrackMetrics(trackType: TrackType): TrackMetrics;
+    private readGeometryTracks;
+    /**
+     * Run a pure track transition. Measurement is the only browser input the
+     * geometry needs; when a transition reports that it is missing, tracks are
+     * measured and the transition is retried.
+     */
+    runTrackGeometry<T>(trackType: TrackType, compute: (tracks: readonly GridGeometryTrack[]) => GridGeometryResult<T>): GridGeometryResult<T>;
+    private runTrackTransition;
+    /**
+     * Hydrate a pure track transition. Track instances are reused wherever the
+     * transition identifies the track they derive from, so that measured values
+     * survive transitions which leave a track untouched.
+     */
+    applyTrackTransition(trackType: TrackType, { sources, tracks: nextTracks }: GridTrackTransition): void;
+    getBisectingTrack(trackType: TrackType, startIndex: number, endIndex: number): number;
+    /**
+     * Split a single track into 2 equal sized tracks
+     */
+    splitTrack(trackType: TrackType, trackIndex: number): void;
+    /**
+     * Given multiple tracks (columns/rows), create a new grid line that exactly bisects
+     * given tracks.
+     */
+    splitTracks(trackType: TrackType, fromTrackLine: number, toTrackLine: number): number;
+    /**
+     * In the trackInsertionPosition, the index always indicates where the new track
+     * will be inserted. The position indicates where it falls, conceptually, in relation
+     * to the existing two tracks that it will fall between. It will overlap one, but not
+     * both of the existing track positions.
+     */
+    insertTrack(trackType: TrackType, { index, position }: TrackInsertionPosition, trackSize: number): void;
+    removeTrack(trackType: TrackType, index: number, assignDirection?: AssignDirection): void;
+    resizeTo(trackType: TrackType, trackIndex: number, value: TrackSize): void;
+    resizeBy(trackType: "row" | "column", trackIndex: number, contraTrackIndex: number, value: number): void;
+    resizeGroupsProportionally(trackType: TrackType, beforeTrackIndices: number[], afterTrackIndices: number[], value: number, beforeConstraints?: GridTrackResizeConstraint[], afterConstraints?: GridTrackResizeConstraint[], initialTrackSizes?: number[]): void;
+    getProportionalResizeAllowance(trackType: TrackType, trackIndices: number[], constraints: GridTrackResizeConstraint[]): number;
+    get css(): Pick<CSSProperties, "gridTemplateColumns" | "gridTemplateRows">;
+    serialize(): {
+        cols: TrackSize[];
+        rows: TrackSize[];
+    };
+    toString(): string;
+}
+type GridModelChildItemCheckpoint = {
+    readonly item: GridModelChildItem;
+    readonly state: {
+        readonly column: GridModelPosition;
+        readonly contentDetached: boolean | undefined;
+        readonly contentVisible: boolean | undefined;
+        readonly dragging: boolean;
+        readonly dropTarget: boolean | string | undefined;
+        readonly header: boolean | undefined;
+        readonly height: number | undefined;
+        readonly horizontalSplitter: boolean;
+        readonly minHeight: number | undefined;
+        readonly minWidth: number | undefined;
+        readonly resizeable: GridModelItemResizeable;
+        readonly row: GridModelPosition;
+        readonly stackId: string | undefined;
+        readonly title: string | undefined;
+        readonly type: GridModelItemType;
+        readonly verticalSplitter: boolean;
+        readonly width: number | undefined;
+    };
+};
+type TabStateCheckpoint = {
+    readonly active: number;
+    readonly detachedTab: TabStateTab | undefined;
+    readonly tabs: readonly TabStateTab[];
+    readonly tabState: TabState;
+};
+export type GridModelCheckpoint = {
+    readonly childItems: readonly GridModelChildItemCheckpoint[];
+    readonly stackStates: readonly (readonly [StackId, GridStackState])[];
+    readonly tabStates: readonly TabStateCheckpoint[];
+    readonly tracks: GridTracksCheckpoint;
+};
+export declare class GridModel extends EventEmitter<GridModelEvents> {
+    #private;
+    id: string;
+    tracks: GridTracks;
+    createCheckpoint(): GridModelCheckpoint;
+    restoreCheckpoint({ childItems, stackStates, tabStates, tracks, }: GridModelCheckpoint): void;
+    constructor(id: string, { cols, gridLayoutItems, rows }: GridLayoutDescriptor);
+    get childItems(): GridModelChildItem[];
+    private handleTabsChange;
+    private handleTabsRemoved;
+    private handleTabSelectionChange;
+    private handleTabAdded;
+    private handleTabDetached;
+    getTabState: (tabsId: string, fallbackAction?: "throw" | "create") => TabState;
+    setTabState(stackId: string, childItems: GridModelChildItem[], activeItem?: number): TabState;
+    /**
+     * Canonical stack state. Membership, order, identity and selection are read
+     * from the canonical store — they are never re-derived from the mutable
+     * runtime projection once a stack exists. Placement and durable layout
+     * metadata are read from the grid item, which the geometry engine owns.
+     */
+    getStackState: (stackId: StackId) => GridStackState;
+    /** Every stack currently present in the layout, in child item order. */
+    getStackStates(): GridStackState[];
+    /**
+     * Project a canonical stack transition onto the compatibility runtime. The
+     * legacy TabState is written from canonical state, never the other way
+     * round; observers are then notified exactly as the legacy engine notified
+     * them, for presentation only.
+     */
+    applyStackTransition(transition: GridStackTransition): void;
+    /** Create a stack from two existing grid items. */
+    createStack(targetId: GridItemId, itemId: GridItemId, stackId?: StackId): GridStackResult<GridStackTransition>;
+    /** Register a new grid item and add it to a stack in one transition. */
+    addStackItem(stackId: StackId, childItem: GridModelChildItem, dropPosition?: DropPosition): GridStackResult<GridStackTransition>;
+    /** Add an existing grid item to a stack. */
+    addStackMember(stackId: StackId, itemId: GridItemId, dropPosition?: DropPosition): GridStackResult<GridStackTransition>;
+    /** Remove a member from a stack, dissolving the stack when it empties. */
+    removeStackItem(stackId: StackId, itemId: GridItemId): GridStackResult<GridStackTransition>;
+    /** Select a stack member by its stable id. */
+    selectStackItem(stackId: StackId, itemId: GridItemId): GridStackResult<GridStackTransition>;
+    /** Move a stack member relative to another member. */
+    reorderStackItem(stackId: StackId, request: {
+        activate?: boolean;
+        itemId: GridItemId;
+        placement: "after" | "before";
+        targetItemId: GridItemId;
+    }): GridStackResult<GridStackTransition>;
+    activateStackedChildItem(stackId: string, { id }: TabStateTab): void;
+    detachStackedChildItem(stackId: string, { id }: TabStateTab): void;
+    /**
+     * A tab is detached when a drag operation commences: it is removed from the
+     * TabStrip but its content remains in the DOM. Selection moves to the
+     * neighbouring member, chosen from canonical order.
+     */
+    detachTab(stackId: StackId, label: string): void;
+    restoreDetachedTab(stackId: StackId, label: string): void;
+    moveItemWithinTabs(tabsId: string, tab: TabStateTab, { position, target }: DropPosition, selectMovedTab: boolean): void;
+    moveItemBetweenTabs(fromTabsId: string, toTabsId: string, tab: TabStateTab, dropPosition: DropPosition): void;
+    notifyChange(): void;
+    restoreLayout({ cols, gridLayoutItems, rows }: GridLayoutDescriptor): void;
+    toGridLayoutDescriptor(): GridLayoutDescriptor;
+    splitGridTrack(trackType: TrackType, trackIndex: number): void;
+    splitGridTracks(trackType: TrackType, fromTrackLine: number, toTrackLine: number): number;
+    private updateChildItemsToAccommodateNewTrack;
+    insertGridTrack(trackType: TrackType, { index, position }: TrackInsertionPosition, trackSize: number): void;
+    removeGridTrack(trackType: TrackType, trackIndex: number, assignDirection?: AssignDirection, updateChildItems?: boolean): void;
+    /**
+     * Read an immutable geometry snapshot. This is the input to every pure
+     * geometry transition; the model itself is never read by those transitions.
+     */
+    toGeometry(): GridGeometry;
+    /** The current measurement input for both track types. */
+    getMeasurements(): GridMeasurements;
+    /**
+     * Run a pure geometry transition, measuring tracks and retrying once if the
+     * transition reports that it needs measurement it was not given.
+     */
+    runGeometry<T>(compute: (measurements: GridMeasurements) => GridGeometryResult<T>): GridGeometryResult<T>;
+    /**
+     * Hydrate the item positions described by a pure geometry into the model.
+     */
+    applyGeometryPositions(geometry: GridGeometry): void;
+    applyUpdates(updates: GridItemUpdate[]): void;
+    private addChildItems;
+    addChildItem(childItem: GridModelChildItem, dropPosition?: DropPosition): void;
+    updateChildTitle(childItemId: string, title: string): void;
+    updateChildColumn(childItemId: string, { start, end }: GridModelPosition): void;
+    updateChildRow(childItemId: string, { start, end }: GridModelPosition): void;
+    /**
+     * How we handle removal depends on context (the remove reason).
+     * If the child item is being deleted, we clear all references to the
+     * item in our internal structures. If the item is being dragged, we
+     * can expect it to be dropped again. We preserve some references,
+     * but mark the item as dragging.
+     */
+    removeChildItem(childItemId: string, reason: GridItemRemoveReason): void;
+    stackChildItems(targetId: string, stackedChildId: string): void;
+    getChildItem(childItemId: string, throwIfNotFound: true): GridModelChildItem;
+    getChildItem(childItemId: string, throwIfNotFound?: false): GridModelChildItem | undefined;
+    getStackedChildItems(): Map<string, StackedGridModelChildItem[]>;
+    getStackedChildItems(stackId: string): GridModelChildItem[];
+    validateChildId(childItemId: string): string;
+    clearPlaceholders(): void;
+    findUnusedGridLines(): number[][];
+    createPlaceholders(): void;
+    /**
+     * Hydrate the placeholders described by a pure placeholder transition.
+     */
+    applyPlaceholderTransition({ added, removedIds, }: {
+        added: readonly GridGeometryItem[];
+        removedIds: readonly string[];
+    }): void;
+    getPlaceholders(): GridModelChildItem[];
+    getSplitters(): ISplitter[];
+    toDebugString(): string;
+    /**
+     * Given a column, return all childItems starting at that column
+     */
+    findByColumnStart(col: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+    /**
+     * Given a column, return all childItems ending at that column
+     */
+    findByColumnEnd(col: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+    /**
+     * Given a row, return all childItems starting at that row
+     */
+    findByRowStart(row: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+    /**
+     * Given a row, return all childItems ending at that row
+     */
+    findByRowEnd(row: number, childItems?: GridModelChildItem[]): GridModelChildItem[] | undefined;
+}
+export {};

package/types/GridPlaceholder.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+export interface GridPlaceholderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrop"> {
+    debugLabel?: string;
+}
+export declare const GridPlaceholder: ({ ...htmlAttributes }: GridPlaceholderProps) => import("react").JSX.Element;