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

package/src/GridModel.js

@@ -0,0 +1,1289 @@
+import { EventEmitter, uuid } from "@vuu-ui/vuu-utils";
+import { bisectTracks, computeSplitters, findBisectingTrack, findUnusedGridLines, getProportionalResizeAllowance, insertTrack, readTracks, regeneratePlaceholders, removeGridTrack, removeTrack, resizeTrackTo, resizeTracksAdjacent, resizeTracksProportionally, shiftItemsForInsertedTrack, shiftItemsForNewTrack, splitTrack, trackMetrics } from "./GridGeometry.js";
+import { getGridArea, getGridPosition } from "./grid-layout-utils.js";
+import { addGridStackItem, cloneGridStackState, createGridStack, gridStackSelectedIndex, normalizeGridStackState, removeGridStackItem, renameGridStackItem, reorderGridStackItem, selectGridStackItem } from "./GridStack.js";
+const DEFAULT_MIN_GRID_ITEM_SIZE = 80;
+const resolveMinimumGridItemSize = (minimum, styleMinimum)=>{
+    if (void 0 !== minimum) return minimum;
+    if ("number" == typeof styleMinimum) return styleMinimum;
+    if ("string" == typeof styleMinimum && /^-?\d+(?:\.\d+)?px$/.test(styleMinimum)) return Number.parseFloat(styleMinimum);
+};
+const isFractionUnit = (trackSize)=>"string" == typeof trackSize && trackSize.endsWith("fr");
+const isPixelUnit = (trackSize)=>"string" == typeof trackSize && trackSize.endsWith("px");
+const toGridItemUpdates = (updates)=>updates.map(({ column, id, row })=>[
+            id,
+            {
+                ...column ? {
+                    column: {
+                        end: column.end,
+                        start: column.start
+                    }
+                } : {},
+                ...row ? {
+                    row: {
+                        end: row.end,
+                        start: row.start
+                    }
+                } : {}
+            }
+        ]);
+const assertValidTracks = (track, trackSizes)=>{
+    if (void 0 === trackSizes) console.warn(`[GridModel]  ${track}s  must be specified`);
+};
+const NonContentResetOptions = {
+    placeholders: false,
+    splitters: false
+};
+const isPlaceholder = (item)=>"placeholder" === item.type;
+const isStackedItem = (i)=>!!i.stackId;
+const toStackArea = ({ column, row })=>({
+        column: {
+            span: column.end - column.start,
+            start: column.start
+        },
+        row: {
+            span: row.end - row.start,
+            start: row.start
+        }
+    });
+const toGridModelPosition = ({ span, start })=>({
+        end: start + span,
+        start
+    });
+class ObservableGridPosition {
+    #id;
+    #start;
+    #end;
+    constructor(id, { start, end }){
+        this.#id = id;
+        this.#start = start;
+        this.#end = end;
+    }
+    get start() {
+        return this.#start;
+    }
+    set start(val) {
+        this.#start = val;
+    }
+    get end() {
+        return this.#end;
+    }
+    set end(val) {
+        this.#end = val;
+    }
+    toJSON() {
+        return {
+            start: this.#start,
+            end: this.#end
+        };
+    }
+}
+class GridModelChildItem {
+    id;
+    column;
+    componentInstanceId;
+    contentDetached;
+    contentVisible;
+    dropTarget;
+    header;
+    height;
+    horizontalSplitter = false;
+    minHeight;
+    minWidth;
+    stackId;
+    resizeable;
+    row;
+    title;
+    type;
+    verticalSplitter = false;
+    width;
+    #dragging = false;
+    constructor({ componentInstanceId, header, height, id, minHeight, minWidth, row, column, dropTarget, stackId, resizeable = false, title, type = "content", width, contentVisible = void 0 === stackId }){
+        this.componentInstanceId = componentInstanceId;
+        this.contentVisible = contentVisible;
+        this.dropTarget = dropTarget;
+        this.header = header;
+        this.height = height;
+        this.id = id;
+        this.minHeight = minHeight;
+        this.minWidth = minWidth;
+        this.row = new ObservableGridPosition(id, row);
+        this.column = new ObservableGridPosition(id, column);
+        this.stackId = stackId;
+        this.resizeable = resizeable;
+        this.title = title;
+        this.type = type;
+        this.width = width;
+    }
+    get dragging() {
+        return this.#dragging;
+    }
+    set dragging(isDragging) {
+        this.#dragging = isDragging;
+    }
+    get gridArea() {
+        return getGridArea(this);
+    }
+}
+class TabState extends EventEmitter {
+    id;
+    active;
+    tabs;
+    detachedTab = void 0;
+    constructor(id, active, tabs){
+        super(), this.id = id, this.active = active, this.tabs = tabs;
+    }
+    setActiveTab(value) {
+        this.active = this.indexOfTab(value);
+        this.emit("active-change", this);
+    }
+    setActiveTabById(id) {
+        this.active = this.tabs.findIndex((tab)=>tab.id === id);
+        this.emit("active-change", this);
+    }
+    detachTab(value) {
+        const nextActiveTab = this.getNextActiveTab();
+        if (nextActiveTab) {
+            this.detachedTab = this.tabs[this.indexOfTab(value)];
+            this.emit("tab-detached", this);
+            this.setActiveTab(nextActiveTab.label);
+        }
+    }
+    restoreDetachedTab(value) {
+        if (this.detachedTab?.label === value) {
+            this.detachedTab = void 0;
+            this.setActiveTab(value);
+        }
+    }
+    setNextActiveTab() {
+        const nextActiveTab = this.getNextActiveTab();
+        if (nextActiveTab) this.setActiveTab(nextActiveTab.label);
+    }
+    moveTab(tab, { position, target }, activateTab = false) {
+        const { label: activeTab } = this.activeTab;
+        const indexOfMovedTab = this.indexOfTab(tab.label);
+        const newTabs = this.tabs.slice();
+        const [movedTab] = newTabs.splice(indexOfMovedTab, 1);
+        const indexOfTargetTab = this.indexOfTab(target, newTabs);
+        if ("after" === position) newTabs.splice(indexOfTargetTab + 1, 0, movedTab);
+        else newTabs.splice(indexOfTargetTab, 0, movedTab);
+        this.tabs = newTabs;
+        if (activateTab) this.active = this.indexOfTab(tab.label);
+        else this.active = this.indexOfTab(activeTab);
+        this.emit("tabs-change", this.id, this.active, this.tabs);
+    }
+    moveTabById(tabId, targetId, position, activateTab = false) {
+        const activeTabId = this.activeTab.id;
+        const newTabs = this.tabs.slice();
+        const indexOfMovedTab = newTabs.findIndex(({ id })=>id === tabId);
+        const [movedTab] = newTabs.splice(indexOfMovedTab, 1);
+        const indexOfTargetTab = newTabs.findIndex(({ id })=>id === targetId);
+        newTabs.splice("after" === position ? indexOfTargetTab + 1 : indexOfTargetTab, 0, movedTab);
+        this.tabs = newTabs;
+        this.active = this.tabs.findIndex(({ id })=>id === (activateTab ? tabId : activeTabId));
+        this.emit("tabs-change", this.id, this.active, this.tabs);
+    }
+    addTab(tab, dropPosition) {
+        if (dropPosition) {
+            const { position, target } = dropPosition;
+            const pos = this.indexOfTab(target);
+            const newTabs = this.tabs.slice();
+            newTabs.splice("after" === position ? pos + 1 : pos, 0, tab);
+            this.active = newTabs.indexOf(tab);
+            this.tabs = newTabs;
+            this.emit("tab-added", this, tab);
+        } else {
+            const newTabs = this.tabs.concat([
+                tab
+            ]);
+            this.tabs = newTabs;
+            if (-1 === this.active) this.setActiveTab(tab.label);
+        }
+    }
+    removeTab(id) {
+        const activeTabId = this.activeTab.id;
+        const previousActive = this.active;
+        this.tabs = this.tabs.filter((tab)=>tab.id !== id);
+        this.active = activeTabId === id ? Math.min(previousActive, this.tabs.length - 1) : this.tabs.findIndex((tab)=>tab.id === activeTabId);
+        if (1 === this.tabs.length) this.emit("tabs-removed", this.id);
+        else this.emit("tabs-change", this.id, this.active, this.tabs);
+    }
+    renameTab(id, label) {
+        const tabIndex = this.tabs.findIndex((tab)=>tab.id === id);
+        if (-1 !== tabIndex) {
+            this.tabs[tabIndex] = {
+                id,
+                label
+            };
+            this.emit("tabs-change", this.id, this.active, this.tabs);
+        } else throw Error(`[TabState] cannot rename tab #${id} => '${label}', tab not found`);
+    }
+    get activeTab() {
+        return this.tabs[this.active];
+    }
+    getNextActiveTab() {
+        const pos = this.tabs.indexOf(this.activeTab);
+        return pos > 0 ? this.tabs[pos - 1] : this.tabs[pos + 1];
+    }
+    indexOfTab(label, tabs = this.tabs) {
+        return tabs.findIndex((tab)=>tab.label === label);
+    }
+}
+class GridTrack {
+    static fromTrackSize = (trackSize)=>new GridTrack(trackSize);
+    #measuredValue = -1;
+    #fractions = -1;
+    #pixels = -1;
+    constructor(trackSize){
+        this.trackSize = trackSize;
+    }
+    get hasBeenMeasured() {
+        return -1 !== this.#measuredValue;
+    }
+    get isFraction() {
+        return -1 !== this.#fractions;
+    }
+    get isPixelValue() {
+        return -1 !== this.#pixels;
+    }
+    get isMeasured() {
+        return -1 !== this.measuredValue;
+    }
+    get measuredValue() {
+        return this.#measuredValue;
+    }
+    set measuredValue(value) {
+        this.#measuredValue = value;
+    }
+    convertUnitsToPixels() {
+        if (this.hasBeenMeasured) {
+            this.#pixels = this.#measuredValue;
+            this.#fractions = -1;
+        } else throw Error("[GridTrack] convertUnitToPixels, tracks must be measured before calling this method");
+    }
+    get hasNumericValue() {
+        return this.isPixelValue || this.isMeasured;
+    }
+    get numericValue() {
+        if (this.isPixelValue) return this.#pixels;
+        if (-1 !== this.#measuredValue) return this.#measuredValue;
+        throw Error("[GridTrack] getter numericValue, trackSize is neither numeric or a pixel value");
+    }
+    get trackSize() {
+        return -1 !== this.#fractions ? `${this.#fractions}fr` : `${this.#pixels}px`;
+    }
+    set trackSize(trackSize) {
+        if (isPixelUnit(trackSize)) {
+            this.#pixels = parseFloat(trackSize);
+            this.#fractions = -1;
+        } else {
+            this.#fractions = parseFloat(trackSize);
+            this.#pixels = -1;
+        }
+        this.#measuredValue = -1;
+    }
+    addFraction(trackSize) {
+        if (this.isFraction && isFractionUnit(trackSize)) this.#fractions += parseFloat(trackSize);
+        else throw Error("Track.addFraction, both trackSize values must be fractions");
+    }
+    increment(value) {
+        if (this.isFraction && !this.isMeasured) throw Error(`[GridTrack] increment, value ${this.trackSize} cannot be incremented unless measured first`);
+        if (this.isFraction) this.convertUnitsToPixels();
+        this.#pixels += value;
+    }
+    toString = ()=>this.trackSize;
+}
+class GridTracks extends EventEmitter {
+    gridId;
+    #columns;
+    #rows;
+    constructor(gridId, columns, rows){
+        super(), this.gridId = gridId;
+        this.#columns = columns.map(GridTrack.fromTrackSize);
+        this.#rows = rows.map(GridTrack.fromTrackSize);
+    }
+    get columns() {
+        return this.#columns.map((col)=>col.trackSize);
+    }
+    set columns(columns) {
+        this.#columns = columns.map(GridTrack.fromTrackSize);
+        this.emit("grid-track-resize", "column", this.#columns);
+    }
+    get rows() {
+        return this.#rows.map((col)=>col.trackSize);
+    }
+    set rows(rows) {
+        this.#rows = rows.map(GridTrack.fromTrackSize);
+        this.emit("grid-track-resize", "row", this.#rows);
+    }
+    get colCount() {
+        return this.#columns.length;
+    }
+    get rowCount() {
+        return this.#rows.length;
+    }
+    getTracks(trackType) {
+        return "column" === trackType ? this.#columns : this.#rows;
+    }
+    createCheckpoint() {
+        const checkpointTrack = (track)=>({
+                measuredValue: track.measuredValue,
+                size: track.trackSize,
+                track
+            });
+        return {
+            columns: this.#columns.map(checkpointTrack),
+            rows: this.#rows.map(checkpointTrack)
+        };
+    }
+    restoreCheckpoint({ columns, rows }) {
+        const restoreTrack = ({ measuredValue, size, track })=>{
+            track.trackSize = size;
+            if (-1 !== measuredValue) track.measuredValue = measuredValue;
+            return track;
+        };
+        this.#columns = columns.map(restoreTrack);
+        this.#rows = rows.map(restoreTrack);
+        this.emit("grid-track-resize", "column", this.#columns);
+        this.emit("grid-track-resize", "row", this.#rows);
+    }
+    measure(trackType) {
+        const el = document.getElementById(this.gridId);
+        if (el) {
+            const tracks = this.getTracks(trackType);
+            const measuredTracks = getComputedStyle(el).getPropertyValue(`grid-template-${trackType}s`).split(" ").map((value)=>parseFloat(value));
+            measuredTracks.forEach((val, i)=>{
+                void 0 === tracks[i] || (tracks[i].measuredValue = val);
+            });
+        } else throw Error(`[GridTracks] measure no grid element found #${this.gridId}`);
+    }
+    getTrackMetrics(trackType) {
+        return trackMetrics(this.getTracks(trackType).map((track)=>track.measuredValue));
+    }
+    readGeometryTracks(trackType) {
+        return readTracks(this.getTracks(trackType).map(({ trackSize })=>trackSize), this.getTrackMetrics(trackType));
+    }
+    runTrackGeometry(trackType, compute) {
+        const result = compute(this.readGeometryTracks(trackType));
+        if (!result.ok && "MEASUREMENT_REQUIRED" === result.error.code) {
+            this.measure(trackType);
+            return compute(this.readGeometryTracks(trackType));
+        }
+        return result;
+    }
+    runTrackTransition(trackType, compute) {
+        const result = this.runTrackGeometry(trackType, compute);
+        if (!result.ok) throw Error(result.error.message);
+        return result.value;
+    }
+    applyTrackTransition(trackType, { sources, tracks: nextTracks }) {
+        const currentTracks = this.getTracks(trackType);
+        const claimedSources = new Set();
+        const tracks = nextTracks.map(({ measured, size }, index)=>{
+            const source = sources[index] ?? -1;
+            const existingTrack = -1 === source || claimedSources.has(source) ? void 0 : currentTracks[source];
+            if (existingTrack) claimedSources.add(source);
+            const track = existingTrack ?? new GridTrack(size);
+            if (track.trackSize !== size || track.measuredValue !== measured) {
+                track.trackSize = size;
+                if (-1 !== measured) track.measuredValue = measured;
+            }
+            return track;
+        });
+        if ("column" === trackType) this.#columns = tracks;
+        else this.#rows = tracks;
+        this.emit("grid-track-resize", trackType, tracks);
+    }
+    getBisectingTrack(trackType, startIndex, endIndex) {
+        return this.runTrackTransition(trackType, (tracks)=>findBisectingTrack(tracks, startIndex, endIndex, trackType));
+    }
+    splitTrack(trackType, trackIndex) {
+        this.applyTrackTransition(trackType, this.runTrackTransition(trackType, (tracks)=>splitTrack(tracks, trackIndex, trackType)));
+    }
+    splitTracks(trackType, fromTrackLine, toTrackLine) {
+        const { newTrackIndex, transition } = this.runTrackTransition(trackType, (tracks)=>bisectTracks(tracks, fromTrackLine, toTrackLine, trackType));
+        this.applyTrackTransition(trackType, transition);
+        return newTrackIndex;
+    }
+    insertTrack(trackType, { index, position }, trackSize) {
+        const transition = this.runTrackTransition(trackType, (tracks)=>insertTrack(tracks, {
+                index,
+                position
+            }, trackSize, trackType));
+        if (transition) this.applyTrackTransition(trackType, transition);
+    }
+    removeTrack(trackType, index, assignDirection = "fwd") {
+        this.applyTrackTransition(trackType, this.runTrackTransition(trackType, (tracks)=>removeTrack(tracks, index, assignDirection, trackType)));
+    }
+    resizeTo(trackType, trackIndex, value) {
+        this.applyTrackTransition(trackType, this.runTrackTransition(trackType, (tracks)=>resizeTrackTo(tracks, trackIndex, value, trackType)));
+    }
+    resizeBy(trackType, trackIndex, contraTrackIndex, value) {
+        this.applyTrackTransition(trackType, this.runTrackTransition(trackType, (tracks)=>resizeTracksAdjacent(tracks, {
+                contraTrackIndex,
+                delta: value,
+                resizedTrackIndex: trackIndex
+            }, trackType)));
+    }
+    resizeGroupsProportionally(trackType, beforeTrackIndices, afterTrackIndices, value, beforeConstraints = [], afterConstraints = [], initialTrackSizes) {
+        this.applyTrackTransition(trackType, this.runTrackTransition(trackType, (tracks)=>resizeTracksProportionally(tracks, {
+                afterConstraints,
+                afterTrackIndices,
+                beforeConstraints,
+                beforeTrackIndices,
+                delta: value,
+                initialSizes: initialTrackSizes
+            }, trackType)));
+    }
+    getProportionalResizeAllowance(trackType, trackIndices, constraints) {
+        return this.runTrackTransition(trackType, (tracks)=>getProportionalResizeAllowance(tracks, trackIndices, constraints, trackType));
+    }
+    get css() {
+        return {
+            gridTemplateColumns: this.#columns.join(" "),
+            gridTemplateRows: this.#rows.join(" ")
+        };
+    }
+    serialize() {
+        return {
+            cols: this.columns,
+            rows: this.rows
+        };
+    }
+    toString() {
+        return `
+      grid-template-columns: ${this.#columns.join(" ")}
+      grid-template-rows: ${this.#rows.join(" ")}
+    `;
+    }
+}
+class GridModel extends EventEmitter {
+    id;
+    tracks;
+    #childItems = [];
+    #index = new Map();
+    #tabState = new Map();
+    #stackStates = new Map();
+    createCheckpoint() {
+        return {
+            childItems: this.#childItems.map((item)=>({
+                    item,
+                    state: {
+                        column: {
+                            end: item.column.end,
+                            start: item.column.start
+                        },
+                        contentDetached: item.contentDetached,
+                        contentVisible: item.contentVisible,
+                        dragging: item.dragging,
+                        dropTarget: item.dropTarget,
+                        header: item.header,
+                        height: item.height,
+                        horizontalSplitter: item.horizontalSplitter,
+                        minHeight: item.minHeight,
+                        minWidth: item.minWidth,
+                        resizeable: item.resizeable,
+                        row: {
+                            end: item.row.end,
+                            start: item.row.start
+                        },
+                        stackId: item.stackId,
+                        title: item.title,
+                        type: item.type,
+                        verticalSplitter: item.verticalSplitter,
+                        width: item.width
+                    }
+                })),
+            tabStates: [
+                ...this.#tabState.values()
+            ].map((tabState)=>({
+                    active: tabState.active,
+                    detachedTab: tabState.detachedTab ? {
+                        ...tabState.detachedTab
+                    } : void 0,
+                    tabState,
+                    tabs: tabState.tabs.map((tab)=>({
+                            ...tab
+                        }))
+                })),
+            stackStates: [
+                ...this.#stackStates
+            ].map(([stackId, state])=>[
+                    stackId,
+                    cloneGridStackState(state)
+                ]),
+            tracks: this.tracks.createCheckpoint()
+        };
+    }
+    restoreCheckpoint({ childItems, stackStates, tabStates, tracks }) {
+        const currentStacks = new Map(this.#childItems.filter(({ type })=>"stacked-content" === type).map((item)=>[
+                item.id,
+                item
+            ]));
+        const currentTabStates = new Map([
+            ...this.#tabState
+        ].map(([id, { active, tabs }])=>[
+                id,
+                {
+                    active,
+                    tabs: tabs.map((tab)=>({
+                            ...tab
+                        }))
+                }
+            ]));
+        this.tracks.restoreCheckpoint(tracks);
+        this.#childItems = childItems.map(({ item, state })=>{
+            item.column.start = state.column.start;
+            item.column.end = state.column.end;
+            item.contentDetached = state.contentDetached;
+            item.contentVisible = state.contentVisible;
+            item.dragging = state.dragging;
+            item.dropTarget = state.dropTarget;
+            item.header = state.header;
+            item.height = state.height;
+            item.horizontalSplitter = state.horizontalSplitter;
+            item.minHeight = state.minHeight;
+            item.minWidth = state.minWidth;
+            item.resizeable = state.resizeable;
+            item.row.start = state.row.start;
+            item.row.end = state.row.end;
+            item.stackId = state.stackId;
+            item.title = state.title;
+            item.type = state.type;
+            item.verticalSplitter = state.verticalSplitter;
+            item.width = state.width;
+            return item;
+        });
+        this.#index = new Map(this.#childItems.map((item)=>[
+                item.id,
+                item
+            ]));
+        this.#tabState = new Map(tabStates.map(({ active, detachedTab, tabs, tabState })=>{
+            tabState.active = active;
+            tabState.detachedTab = detachedTab ? {
+                ...detachedTab
+            } : void 0;
+            tabState.tabs = tabs.map((tab)=>({
+                    ...tab
+                }));
+            return [
+                tabState.id,
+                tabState
+            ];
+        }));
+        this.#stackStates = new Map(stackStates.map(([stackId, state])=>[
+                stackId,
+                cloneGridStackState(state)
+            ]));
+        const restoredStacks = new Map(this.#childItems.filter(({ type })=>"stacked-content" === type).map((item)=>[
+                item.id,
+                item
+            ]));
+        for (const stackId of currentStacks.keys())if (!restoredStacks.has(stackId)) this.emit("tabs-removed", stackId);
+        for (const [stackId, stackItem] of restoredStacks)if (currentStacks.has(stackId)) {
+            const restored = this.#tabState.get(stackId);
+            const current = currentTabStates.get(stackId);
+            if (restored && current && (restored.active !== current.active || JSON.stringify(restored.tabs) !== JSON.stringify(current.tabs))) {
+                this.emit("tabs-change", stackId, restored.active, restored.tabs.map((tab)=>({
+                        ...tab
+                    })));
+                this.emit("tab-selection-change", stackId, restored.active);
+            }
+        } else this.emit("tabs-created", stackItem);
+    }
+    constructor(id, { cols, gridLayoutItems, rows }){
+        super(), this.id = id;
+        assertValidTracks("col", cols);
+        assertValidTracks("row", rows);
+        this.tracks = new GridTracks(id, cols, rows);
+        if (gridLayoutItems) this.addChildItems(gridLayoutItems);
+    }
+    get childItems() {
+        return this.#childItems;
+    }
+    handleTabsChange = (stackId, active, tabs)=>{
+        const activeTab = tabs[active];
+        this.activateStackedChildItem(stackId, activeTab);
+        this.emit("tabs-change", stackId, active, tabs);
+    };
+    handleTabsRemoved = (stackId)=>{
+        this.removeChildItem(stackId, "unstack");
+        this.emit("tabs-removed", stackId);
+    };
+    handleTabSelectionChange = ({ active, activeTab, id: stackId })=>{
+        this.activateStackedChildItem(stackId, activeTab);
+        this.emit("tab-selection-change", stackId, active);
+    };
+    handleTabAdded = ({ activeTab, id, tabs })=>{
+        const active = tabs.indexOf(activeTab);
+        const stackItem = this.getChildItem(id, true);
+        const stackedItem = this.getChildItem(activeTab.id, true);
+        stackedItem.stackId = id;
+        this.updateChildColumn(activeTab.id, stackItem.column);
+        this.updateChildRow(activeTab.id, stackItem.row);
+        this.activateStackedChildItem(id, activeTab);
+        this.emit("child-position-updates", [
+            [
+                activeTab.id,
+                {
+                    column: stackItem.column,
+                    row: stackItem.row
+                }
+            ]
+        ]);
+        this.emit("tabs-change", id, active, tabs);
+    };
+    handleTabDetached = ({ activeTab, id: stackId })=>{
+        this.detachStackedChildItem(stackId, activeTab);
+    };
+    getTabState = (tabsId, fallbackAction = "throw")=>{
+        const tabState = this.#tabState.get(tabsId);
+        if (tabState) return tabState;
+        if ("create" === fallbackAction) {
+            this.setTabState(tabsId, [], -1);
+            return this.getTabState(tabsId, "throw");
+        }
+        throw Error(`[GridModel#${this.id}] getTabState, no tabState found for tabs #${tabsId} and no initialisation params provided`);
+    };
+    setTabState(stackId, childItems, activeItem = 0) {
+        const tabs = childItems.map(({ id, title }, index)=>({
+                id,
+                label: title ?? `Label-${index + 1}`
+            }));
+        const tabState = this.#createTabState(stackId, tabs, activeItem);
+        if (tabs[activeItem]) this.activateStackedChildItem(stackId, tabs[activeItem]);
+        return tabState;
+    }
+    #createTabState(stackId, tabs, active) {
+        if (this.#tabState.get(stackId)) throw Error(`[GridModel] setTabState  already created for ${stackId}`);
+        const tabState = new TabState(stackId, active, tabs);
+        tabState.on("active-change", this.handleTabSelectionChange);
+        tabState.on("tab-added", this.handleTabAdded);
+        tabState.on("tab-detached", this.handleTabDetached);
+        tabState.on("tabs-change", this.handleTabsChange);
+        tabState.on("tabs-removed", this.handleTabsRemoved);
+        this.#tabState.set(stackId, tabState);
+        return tabState;
+    }
+    getStackState = (stackId)=>{
+        const canonical = this.#stackStates.get(stackId) ?? this.#hydrateStack(stackId);
+        const anchor = this.getChildItem(stackId) ?? this.getChildItem(canonical.members[0]?.id ?? "");
+        const state = normalizeGridStackState({
+            ...canonical,
+            area: anchor ? toStackArea(anchor) : canonical.area,
+            metadata: anchor ? {
+                minHeight: anchor.minHeight,
+                minWidth: anchor.minWidth,
+                resizeable: anchor.resizeable
+            } : canonical.metadata
+        });
+        this.#stackStates.set(stackId, state);
+        return state;
+    };
+    #hydrateStack(stackId) {
+        const { active, tabs } = this.getTabState(stackId);
+        return {
+            area: {
+                column: {
+                    span: 1,
+                    start: 1
+                },
+                row: {
+                    span: 1,
+                    start: 1
+                }
+            },
+            id: stackId,
+            members: tabs.map(({ id, label })=>({
+                    id,
+                    label,
+                    title: this.getChildItem(id)?.title
+                })),
+            metadata: {},
+            selectedItemId: tabs[active]?.id ?? ""
+        };
+    }
+    getStackStates() {
+        return this.#childItems.filter(({ type })=>"stacked-content" === type).map(({ id })=>this.getStackState(id));
+    }
+    applyStackTransition(transition) {
+        const { operation, state } = transition;
+        if (transition.dissolved) this.#stackStates.delete(state.id);
+        else this.#stackStates.set(state.id, state);
+        switch(operation){
+            case "create":
+                {
+                    const [reference] = state.members;
+                    const referenceItem = this.getChildItem(reference.id, true);
+                    const stackItem = new GridModelChildItem({
+                        column: toGridModelPosition(state.area.column),
+                        id: state.id,
+                        minHeight: state.metadata.minHeight,
+                        minWidth: state.metadata.minWidth,
+                        resizeable: state.metadata.resizeable,
+                        row: toGridModelPosition(state.area.row),
+                        type: "stacked-content"
+                    });
+                    stackItem.horizontalSplitter = referenceItem.horizontalSplitter;
+                    stackItem.verticalSplitter = referenceItem.verticalSplitter;
+                    this.#createTabState(state.id, state.members.map(({ id, label })=>({
+                            id,
+                            label
+                        })), gridStackSelectedIndex(state));
+                    this.#registerChildItem(stackItem);
+                    for (const { id } of state.members){
+                        const member = this.getChildItem(id, true);
+                        member.horizontalSplitter = referenceItem.horizontalSplitter;
+                        member.verticalSplitter = referenceItem.verticalSplitter;
+                    }
+                    this.#applyStackPlacement(state);
+                    this.#applyStackSelection(state);
+                    this.emit("tabs-created", stackItem);
+                    return;
+                }
+            case "add":
+                {
+                    this.#applyStackPlacement(state);
+                    const tabState = this.#writeTabState(state);
+                    this.#applyStackSelection(state);
+                    if (transition.positioned) {
+                        const [{ id: addedId }] = transition.added;
+                        const { column, row } = this.getChildItem(addedId, true);
+                        this.emit("child-position-updates", [
+                            [
+                                addedId,
+                                {
+                                    column,
+                                    row
+                                }
+                            ]
+                        ]);
+                        this.emit("tabs-change", state.id, tabState.active, tabState.tabs);
+                    }
+                    return;
+                }
+            case "remove":
+                {
+                    const tabState = this.#writeTabState(state);
+                    if (transition.dissolved) {
+                        this.removeChildItem(state.id, "unstack");
+                        this.emit("tabs-removed", state.id);
+                    } else {
+                        this.#applyStackSelection(state);
+                        this.emit("tabs-change", state.id, tabState.active, tabState.tabs);
+                    }
+                    return;
+                }
+            case "rename":
+            case "reorder":
+                {
+                    const tabState = this.#writeTabState(state);
+                    this.#applyStackSelection(state);
+                    this.emit("tabs-change", state.id, tabState.active, tabState.tabs);
+                    return;
+                }
+            case "select":
+                {
+                    const tabState = this.#writeTabState(state);
+                    this.#applyStackSelection(state);
+                    this.emit("tab-selection-change", state.id, tabState.active);
+                    return;
+                }
+            default:
+                throw Error(`[GridModel] unhandled stack transition ${operation}`);
+        }
+    }
+    createStack(targetId, itemId, stackId = uuid()) {
+        const targetChild = this.getChildItem(targetId, true);
+        const stackedChild = this.getChildItem(itemId, true);
+        const result = createGridStack({
+            area: toStackArea(targetChild),
+            id: stackId,
+            members: [
+                targetChild,
+                stackedChild
+            ].map(({ id, title }, index)=>({
+                    id,
+                    label: title ?? `Label-${index + 1}`,
+                    title
+                })),
+            metadata: {
+                minHeight: targetChild.minHeight,
+                minWidth: targetChild.minWidth,
+                resizeable: targetChild.resizeable
+            }
+        });
+        if (result.ok) this.applyStackTransition(result.value);
+        return result;
+    }
+    addStackItem(stackId, childItem, dropPosition) {
+        const result = this.#addStackTransition(stackId, childItem, dropPosition);
+        if (result.ok) {
+            this.#registerChildItem(childItem);
+            this.applyStackTransition(result.value);
+        }
+        return result;
+    }
+    addStackMember(stackId, itemId, dropPosition) {
+        const result = this.#addStackTransition(stackId, this.getChildItem(itemId, true), dropPosition);
+        if (result.ok) this.applyStackTransition(result.value);
+        return result;
+    }
+    #addStackTransition(stackId, { id, title }, dropPosition) {
+        const state = this.getStackState(stackId);
+        const position = dropPosition ? {
+            placement: dropPosition.position,
+            targetItemId: state.members.find(({ label })=>label === dropPosition.target)?.id ?? dropPosition.target
+        } : void 0;
+        return addGridStackItem(state, {
+            member: {
+                id,
+                label: title ?? id,
+                title
+            },
+            position
+        });
+    }
+    removeStackItem(stackId, itemId) {
+        const result = removeGridStackItem(this.getStackState(stackId), {
+            itemId
+        });
+        if (result.ok) this.applyStackTransition(result.value);
+        return result;
+    }
+    selectStackItem(stackId, itemId) {
+        const result = selectGridStackItem(this.getStackState(stackId), {
+            itemId
+        });
+        if (result.ok) this.applyStackTransition(result.value);
+        return result;
+    }
+    reorderStackItem(stackId, request) {
+        const result = reorderGridStackItem(this.getStackState(stackId), request);
+        if (result.ok) this.applyStackTransition(result.value);
+        return result;
+    }
+    #renameStackItem(stackId, itemId, title) {
+        const result = renameGridStackItem(this.getStackState(stackId), {
+            itemId,
+            title
+        });
+        if (result.ok) this.applyStackTransition(result.value);
+        return result;
+    }
+    #writeTabState(state) {
+        const tabState = this.getTabState(state.id);
+        tabState.tabs = state.members.map(({ id, label })=>({
+                id,
+                label
+            }));
+        tabState.active = gridStackSelectedIndex(state);
+        return tabState;
+    }
+    #applyStackPlacement(state) {
+        const column = toGridModelPosition(state.area.column);
+        const row = toGridModelPosition(state.area.row);
+        for (const { id } of state.members){
+            const member = this.getChildItem(id);
+            if (member) {
+                member.stackId = state.id;
+                this.updateChildColumn(id, column);
+                this.updateChildRow(id, row);
+            }
+        }
+    }
+    #applyStackSelection(state) {
+        const selected = state.members.find(({ id })=>id === state.selectedItemId);
+        if (selected) this.activateStackedChildItem(state.id, selected);
+    }
+    activateStackedChildItem(stackId, { id }) {
+        const stackedChildren = this.getStackedChildItems(stackId);
+        stackedChildren.forEach((child)=>{
+            if (child.id === id) {
+                child.contentVisible = true;
+                child.contentDetached = void 0;
+            } else child.contentVisible = false;
+        });
+    }
+    detachStackedChildItem(stackId, { id }) {
+        const stackedChildren = this.getStackedChildItems(stackId);
+        const detachedChild = stackedChildren.find(({ id: itemId })=>itemId === id);
+        if (detachedChild) detachedChild.contentDetached = true;
+    }
+    detachTab(stackId, label) {
+        const tabState = this.getTabState(stackId);
+        const state = this.getStackState(stackId);
+        const selectedIndex = gridStackSelectedIndex(state);
+        if (state.members[selectedIndex]?.label !== label) return;
+        const next = state.members[selectedIndex - 1] ?? state.members[selectedIndex + 1];
+        if (!next) return;
+        tabState.detachedTab = {
+            ...tabState.tabs[selectedIndex]
+        };
+        this.detachStackedChildItem(stackId, state.members[selectedIndex]);
+        const result = this.selectStackItem(stackId, next.id);
+        if (!result.ok) throw Error(result.error.message);
+    }
+    restoreDetachedTab(stackId, label) {
+        const tabState = this.getTabState(stackId);
+        const detachedTab = tabState.detachedTab;
+        if (detachedTab?.label === label) {
+            tabState.detachedTab = void 0;
+            const result = this.selectStackItem(stackId, detachedTab.id);
+            if (!result.ok) throw Error(result.error.message);
+        }
+    }
+    moveItemWithinTabs(tabsId, tab, { position, target }, selectMovedTab) {
+        const state = this.getStackState(tabsId);
+        const result = this.reorderStackItem(tabsId, {
+            activate: selectMovedTab,
+            itemId: tab.id,
+            placement: position,
+            targetItemId: state.members.find(({ label })=>label === target)?.id ?? target
+        });
+        if (!result.ok) throw Error(result.error.message);
+    }
+    moveItemBetweenTabs(fromTabsId, toTabsId, tab, dropPosition) {
+        const removed = this.removeStackItem(fromTabsId, tab.id);
+        if (!removed.ok) throw Error(removed.error.message);
+        const added = this.addStackMember(toTabsId, tab.id, dropPosition);
+        if (!added.ok) throw Error(added.error.message);
+    }
+    notifyChange() {
+        this.emit("grid-layout-change", this.id, this.toGridLayoutDescriptor());
+    }
+    restoreLayout({ cols, gridLayoutItems = {}, rows }) {
+        this.clearPlaceholders();
+        this.tracks.columns = cols;
+        this.tracks.rows = rows;
+        for (const [id, { gridArea }] of Object.entries(gridLayoutItems)){
+            const child = this.getChildItem(id);
+            if (child) {
+                const { column, row } = getGridPosition(gridArea);
+                this.updateChildColumn(id, column);
+                this.updateChildRow(id, row);
+                child.dragging = false;
+            }
+        }
+        this.createPlaceholders();
+    }
+    toGridLayoutDescriptor() {
+        return {
+            ...this.tracks.serialize(),
+            gridLayoutItems: this.#childItems.reduce((result, { id, column, componentInstanceId, contentVisible, dropTarget, header, minHeight, minWidth, resizeable, row, stackId, title, type, dragging })=>{
+                if ("stacked-content" !== type && !(dragging && !stackId)) result[id] = {
+                    ...void 0 === componentInstanceId ? {} : {
+                        componentId: componentInstanceId
+                    },
+                    contentVisible,
+                    dropTarget,
+                    gridArea: `${row.start}/${column.start}/${row.end}/${column.end}`,
+                    header,
+                    minHeight,
+                    minWidth,
+                    resizeable,
+                    stackId,
+                    title
+                };
+                return result;
+            }, {})
+        };
+    }
+    splitGridTrack(trackType, trackIndex) {
+        this.tracks.splitTrack(trackType, trackIndex);
+        this.updateChildItemsToAccommodateNewTrack(trackType, trackIndex);
+    }
+    splitGridTracks(trackType, fromTrackLine, toTrackLine) {
+        const trackIndex = this.tracks.splitTracks(trackType, fromTrackLine, toTrackLine);
+        this.updateChildItemsToAccommodateNewTrack(trackType, trackIndex);
+        return trackIndex;
+    }
+    updateChildItemsToAccommodateNewTrack(trackType, trackIndex) {
+        this.applyUpdates(toGridItemUpdates(shiftItemsForNewTrack(this.toGeometry().items, trackType, trackIndex)));
+    }
+    insertGridTrack(trackType, { index, position }, trackSize) {
+        this.tracks.insertTrack(trackType, {
+            index,
+            position
+        }, trackSize);
+        const updates = toGridItemUpdates(shiftItemsForInsertedTrack(this.toGeometry().items, trackType, index, position));
+        this.applyUpdates(updates);
+        this.emit("child-position-updates", updates, {
+            splitters: true
+        });
+    }
+    removeGridTrack(trackType, trackIndex, assignDirection, updateChildItems = true) {
+        const geometry = this.toGeometry();
+        const result = this.runGeometry((measurements)=>removeGridTrack(geometry, {
+                assignDirection,
+                trackIndex,
+                trackType,
+                updateItems: updateChildItems
+            }, measurements));
+        if (!result.ok) throw Error(result.error.message);
+        const { columns, rows, updates } = result.value;
+        const trackTransition = "column" === trackType ? columns : rows;
+        if (trackTransition) this.tracks.applyTrackTransition(trackType, trackTransition);
+        if (updateChildItems) {
+            const itemUpdates = toGridItemUpdates(updates);
+            this.applyUpdates(itemUpdates);
+            this.emit("child-position-updates", itemUpdates, {
+                splitters: true
+            });
+        }
+    }
+    toGeometry() {
+        return {
+            columns: this.tracks.columns,
+            items: this.#childItems.map(({ column, dragging, id, resizeable, row, stackId, type })=>({
+                    column: {
+                        end: column.end,
+                        start: column.start
+                    },
+                    dragging,
+                    id,
+                    resizeable,
+                    row: {
+                        end: row.end,
+                        start: row.start
+                    },
+                    stackId,
+                    type
+                })),
+            rows: this.tracks.rows
+        };
+    }
+    getMeasurements() {
+        return {
+            column: this.tracks.getTrackMetrics("column"),
+            row: this.tracks.getTrackMetrics("row")
+        };
+    }
+    runGeometry(compute) {
+        const result = compute(this.getMeasurements());
+        if (result.ok || "MEASUREMENT_REQUIRED" !== result.error.code || void 0 === result.error.trackType) return result;
+        this.tracks.measure(result.error.trackType);
+        return compute(this.getMeasurements());
+    }
+    applyGeometryPositions(geometry) {
+        for (const { column, id, row } of geometry.items){
+            const childItem = this.getChildItem(id);
+            if (void 0 !== childItem) {
+                if (childItem.column.start !== column.start || childItem.column.end !== column.end) this.updateChildColumn(id, {
+                    end: column.end,
+                    start: column.start
+                });
+                if (childItem.row.start !== row.start || childItem.row.end !== row.end) this.updateChildRow(id, {
+                    end: row.end,
+                    start: row.start
+                });
+            }
+        }
+    }
+    applyUpdates(updates) {
+        updates?.forEach(([id, { column: columnPosition, row: rowPosition }])=>{
+            if (columnPosition) this.updateChildColumn(id, columnPosition);
+            if (rowPosition) this.updateChildRow(id, rowPosition);
+        });
+    }
+    addChildItems(childItems) {
+        for (const [id, { componentId, contentVisible, dropTarget, header, minHeight, minWidth, resizeable, stackId, title, ...item }] of Object.entries(childItems)){
+            const { column, row } = getGridPosition(item.gridArea);
+            this.addChildItem(new GridModelChildItem({
+                contentVisible,
+                componentInstanceId: componentId,
+                id,
+                column,
+                dropTarget,
+                header,
+                minHeight,
+                minWidth,
+                resizeable,
+                row,
+                stackId,
+                title
+            }));
+        }
+    }
+    addChildItem(childItem, dropPosition) {
+        if (childItem.stackId && this.getChildItem(childItem.stackId)) {
+            const result = this.addStackItem(childItem.stackId, childItem, dropPosition);
+            if (!result.ok) throw Error(result.error.message);
+            return;
+        }
+        this.#registerChildItem(childItem);
+    }
+    #registerChildItem(childItem) {
+        this.#childItems.push(childItem);
+        this.#index.set(childItem.id, childItem);
+    }
+    updateChildTitle(childItemId, title) {
+        const childItem = this.getChildItem(childItemId, true);
+        if (title !== childItem.title) {
+            childItem.title = title;
+            if (childItem.stackId) {
+                const result = this.#renameStackItem(childItem.stackId, childItemId, title);
+                if (!result.ok) throw Error(`[TabState] cannot rename tab #${childItemId} => '${title}', tab not found`);
+            }
+        }
+    }
+    updateChildColumn(childItemId, { start, end }) {
+        const childItem = this.getChildItem(childItemId, true);
+        const { start: previousStart, end: previousEnd } = childItem.column;
+        if (start !== previousStart) childItem.column.start = start;
+        if (end !== previousEnd) childItem.column.end = end;
+        if ("stacked-content" === childItem.type) {
+            const stackedChildItems = this.getStackedChildItems(childItemId);
+            stackedChildItems.forEach((childItem)=>{
+                this.updateChildColumn(childItem.id, {
+                    start,
+                    end
+                });
+            });
+        }
+    }
+    updateChildRow(childItemId, { start, end }) {
+        const childItem = this.getChildItem(childItemId, true);
+        const { start: previousStart, end: previousEnd } = childItem.row;
+        if (start !== previousStart) childItem.row.start = start;
+        if (end !== previousEnd) childItem.row.end = end;
+        if ("stacked-content" === childItem.type) {
+            const stackedChildItems = this.getStackedChildItems(childItemId);
+            stackedChildItems.forEach((childItem)=>{
+                this.updateChildRow(childItem.id, {
+                    start,
+                    end
+                });
+            });
+        }
+    }
+    removeChildItem(childItemId, reason) {
+        const childItem = this.getChildItem(childItemId, true);
+        if ("drag" === reason) childItem.dragging = true;
+        else {
+            const indexOfDoomedItem = this.#childItems.indexOf(childItem);
+            this.#childItems.splice(indexOfDoomedItem, 1);
+            this.#index.delete(childItemId);
+            if ("stacked-content" === childItem.type) {
+                this.#stackStates.delete(childItemId);
+                const stackedChildItems = this.getStackedChildItems(childItemId);
+                stackedChildItems.forEach((childItem)=>{
+                    childItem.stackId = void 0;
+                    childItem.contentVisible = true;
+                });
+            }
+        }
+    }
+    stackChildItems(targetId, stackedChildId) {
+        const result = this.createStack(targetId, stackedChildId);
+        if (!result.ok) throw Error(result.error.message);
+    }
+    getChildItem(childItemId, throwIfNotFound = false) {
+        const gridItem = this.#index.get(childItemId);
+        if (gridItem) return gridItem;
+        if (throwIfNotFound) throw Error(`[GridModel] GridItem #${childItemId} not found`);
+    }
+    getStackedChildItems(stackId) {
+        if (stackId) return this.childItems.filter((childItem)=>childItem.stackId === stackId);
+        {
+            const stackedChildren = this.childItems.filter(isStackedItem);
+            return Map.groupBy(stackedChildren, ({ stackId })=>stackId);
+        }
+    }
+    validateChildId(childItemId) {
+        if (-1 !== this.#childItems.findIndex(({ id })=>id === childItemId)) return childItemId;
+        throw Error(`[GridModel] validateChildId #${childItemId}`);
+    }
+    clearPlaceholders() {
+        const placeHolders = this.getPlaceholders();
+        placeHolders.forEach((placeholder)=>this.removeChildItem(placeholder.id, "placeholder"));
+    }
+    findUnusedGridLines() {
+        const [unusedColLines, unusedRowLines] = findUnusedGridLines(this.toGeometry());
+        return [
+            [
+                ...unusedColLines
+            ],
+            [
+                ...unusedRowLines
+            ]
+        ];
+    }
+    createPlaceholders() {
+        this.applyPlaceholderTransition(regeneratePlaceholders(this.toGeometry(), uuid));
+    }
+    applyPlaceholderTransition({ added, removedIds }) {
+        removedIds.forEach((id)=>{
+            if (this.getChildItem(id)) this.removeChildItem(id, "placeholder");
+        });
+        added.forEach(({ column, id, resizeable, row, type })=>{
+            this.addChildItem(new GridModelChildItem({
+                column: {
+                    end: column.end,
+                    start: column.start
+                },
+                id,
+                resizeable,
+                row: {
+                    end: row.end,
+                    start: row.start
+                },
+                type
+            }));
+        });
+    }
+    getPlaceholders() {
+        return this.childItems.filter(isPlaceholder);
+    }
+    getSplitters() {
+        const { horizontalSplitterItemIds, splitters, verticalSplitterItemIds } = computeSplitters(this.toGeometry());
+        const horizontal = new Set(horizontalSplitterItemIds);
+        const vertical = new Set(verticalSplitterItemIds);
+        this.#childItems.forEach((childItem)=>{
+            childItem.horizontalSplitter = horizontal.has(childItem.id);
+            childItem.verticalSplitter = vertical.has(childItem.id);
+        });
+        return splitters.map(({ column, resizedChildItems, resizedGridTracks, row, ...splitter })=>({
+                ...splitter,
+                column: {
+                    end: column.end,
+                    start: column.start
+                },
+                resizedChildItems: {
+                    after: [
+                        ...resizedChildItems.after
+                    ],
+                    before: [
+                        ...resizedChildItems.before
+                    ]
+                },
+                resizedGridTracks: [
+                    ...resizedGridTracks
+                ],
+                row: {
+                    end: row.end,
+                    start: row.start
+                }
+            }));
+    }
+    toDebugString() {
+        return this.#childItems.map((c)=>`${c.id.padEnd(10)} col ${c.column.start}/${c.column.end}, row ${c.row.start}/${c.row.end}`).join("\n");
+    }
+    findByColumnStart(col, childItems = this.#childItems) {
+        const childItemsStartingAtCol = childItems.filter(({ column: { start } })=>start === col);
+        return 0 === childItemsStartingAtCol.length ? void 0 : childItemsStartingAtCol;
+    }
+    findByColumnEnd(col, childItems = this.#childItems) {
+        const childItemsEndingAtCol = childItems.filter(({ column: { end } })=>end === col);
+        return 0 === childItemsEndingAtCol.length ? void 0 : childItemsEndingAtCol;
+    }
+    findByRowStart(row, childItems = this.#childItems) {
+        const childItemsStartingAtRow = childItems.filter(({ row: { start } })=>start === row);
+        return 0 === childItemsStartingAtRow.length ? void 0 : childItemsStartingAtRow;
+    }
+    findByRowEnd(row, childItems = this.#childItems) {
+        const childItemsEndingAtRow = childItems.filter(({ row: { end } })=>end === row);
+        return 0 === childItemsEndingAtRow.length ? void 0 : childItemsEndingAtRow;
+    }
+}
+export { DEFAULT_MIN_GRID_ITEM_SIZE, GridModel, GridModelChildItem, GridTrack, GridTracks, NonContentResetOptions, TabState, isFractionUnit, isPixelUnit, isStackedItem, resolveMinimumGridItemSize, toGridItemUpdates };