@aceshooting/lyra-ui 6.1.0 → 7.0.0

package/dist/components/layout/dashboard-grid/dashboard-grid.class.js

@@ -4,18 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { LyraElement } from '../../../internal/lyra-element.js';
-import { tag } from '../../../internal/prefix.js';
-import { srOnly } from '../../../internal/a11y.js';
-import { Announcer } from '../../../internal/announcer.js';
-import { isRtl } from '../../../internal/rtl.js';
-import { isArrowKey, finiteInteger, finiteRange } from '../../../internal/numbers.js';
-import { styles } from './dashboard-grid.styles.js';
-import { clampCandidate, findCollisions, resolvePlacement, sortSpatial, } from './layout.js';
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { LyraElement } from "../../../internal/lyra-element.js";
+import { tag } from "../../../internal/prefix.js";
+import { srOnly } from "../../../internal/a11y.js";
+import { Announcer } from "../../../internal/announcer.js";
+import { isRtl } from "../../../internal/rtl.js";
+import { isArrowKey, finiteInteger, finiteRange, } from "../../../internal/numbers.js";
+import { styles } from "./dashboard-grid.styles.js";
+import { clampCandidate, findCollisions, resolvePlacement, sortSpatial, } from "./layout.js";
 const INTERACTIVE_DESCENDANT_SELECTOR = 'button, a[href], input, select, textarea, [role="button"], [tabindex]:not([part="cell"])';
 /**
  * `<lr-dashboard-grid>` — a responsive, keyboard-accessible widget grid: positions `layout`
@@ -81,6 +81,8 @@ const INTERACTIVE_DESCENDANT_SELECTOR = 'button, a[href], input, select, textare
  * @cssprop [--lr-dashboard-grid-cell-hover-outline-color=var(--lr-color-border-strong)] - Outline
  *   color of a cell's mouse-hover preview of its own `:focus-visible` ring (shown because every
  *   cell is a real focusable, draggable/resizable target). Set to `transparent` to opt out.
+ * @cssprop [--lr-dashboard-grid-collision-outline-color=var(--lr-color-danger)] - Outline color
+ *   of a cell whose current drag/resize preview collides with another cell.
  */
 export class LyraDashboardGrid extends LyraElement {
     constructor() {
@@ -95,7 +97,7 @@ export class LyraDashboardGrid extends LyraElement {
         /** Gap between cells, in px, on both axes. */
         this.gap = 8;
         /** How a move/resize that would overlap another cell is resolved -- see the class doc. */
-        this.collision = 'reject';
+        this.collision = "reject";
         /** Opts into pointer-drag + Ctrl/Cmd+Arrow keyboard move for unlocked cells. */
         this.cellsDraggable = false;
         /** Opts into the pointer resize handle + Ctrl/Cmd+Shift+Arrow keyboard resize for unlocked cells. */
@@ -106,21 +108,35 @@ export class LyraDashboardGrid extends LyraElement {
         /** Overrides the grid region's accessible name; falls back to a generic localized label. Fed
          *  only by a host `aria-label`, matching `lr-flow-canvas`'s own host-override pattern. */
         this.accessibleLabel = null;
-        this.announcer = new Announcer({ onFlush: (text) => (this.liveText = text) });
-        this.liveText = '';
+        this.announcer = new Announcer({
+            onFlush: (text) => (this.liveText = text),
+        });
+        this.liveText = "";
         this.activeCellIndex = 0;
+        this.activeCellId = "";
         this.onCellPointerMove = (e) => {
             const drag = this.cellDrag;
             if (!drag || e.pointerId !== drag.pointerId)
                 return;
             const dxUnits = Math.round(((e.clientX - drag.startClientX) * drag.rtlFlip) / drag.colPitch);
             const dyUnits = Math.round((e.clientY - drag.startClientY) / drag.rowPitch);
-            const { x, y } = clampCandidate({}, { x: drag.startX + dxUnits, y: drag.startY + dyUnits, w: drag.w, h: drag.h }, this.safeColumns);
+            const { x, y } = clampCandidate({}, {
+                x: drag.startX + dxUnits,
+                y: drag.startY + dyUnits,
+                w: drag.w,
+                h: drag.h,
+            }, this.safeColumns);
             drag.wrapper.style.gridColumn = `${x + 1} / span ${drag.w}`;
             drag.wrapper.style.gridRow = `${y + 1} / span ${drag.h}`;
-            if (this.collision !== 'overlap') {
-                const collides = findCollisions(this.layout, { id: drag.cellId, x, y, w: drag.w, h: drag.h }).length > 0;
-                drag.wrapper.toggleAttribute('data-collision', collides);
+            if (this.collision !== "overlap") {
+                const collides = findCollisions(this.layout, {
+                    id: drag.cellId,
+                    x,
+                    y,
+                    w: drag.w,
+                    h: drag.h,
+                }).length > 0;
+                drag.wrapper.toggleAttribute("data-collision", collides);
             }
             drag.currentX = x;
             drag.currentY = y;
@@ -130,15 +146,15 @@ export class LyraDashboardGrid extends LyraElement {
             if (!drag || e.pointerId !== drag.pointerId)
                 return;
             this.cellDrag = undefined;
-            drag.wrapper.removeAttribute('data-dragging');
-            window.removeEventListener('pointermove', this.onCellPointerMove);
-            window.removeEventListener('pointerup', this.onCellPointerUp);
-            window.removeEventListener('pointercancel', this.onCellPointerUp);
-            window.removeEventListener('lostpointercapture', this.onCellPointerUp);
+            drag.wrapper.removeAttribute("data-dragging");
+            window.removeEventListener("pointermove", this.onCellPointerMove);
+            window.removeEventListener("pointerup", this.onCellPointerUp);
+            window.removeEventListener("pointercancel", this.onCellPointerUp);
+            window.removeEventListener("lostpointercapture", this.onCellPointerUp);
             const x = drag.currentX ?? drag.startX;
             const y = drag.currentY ?? drag.startY;
             if (x !== drag.startX || y !== drag.startY) {
-                this.commitPlacement(drag.cellId, { x, y, w: drag.w, h: drag.h }, 'move');
+                this.commitPlacement(drag.cellId, { x, y, w: drag.w, h: drag.h }, "move");
             }
             this.resetCellInlineStyle(drag.cellId, drag.wrapper);
             this.requestUpdate();
@@ -149,12 +165,23 @@ export class LyraDashboardGrid extends LyraElement {
                 return;
             const dwUnits = Math.round(((e.clientX - resize.startClientX) * resize.rtlFlip) / resize.colPitch);
             const dhUnits = Math.round((e.clientY - resize.startClientY) / resize.rowPitch);
-            const { w, h } = clampCandidate(this.layout.find((c) => c.id === resize.cellId) ?? {}, { x: resize.x, y: resize.y, w: resize.startW + dwUnits, h: resize.startH + dhUnits }, this.safeColumns);
+            const { w, h } = clampCandidate(this.layout.find((c) => c.id === resize.cellId) ?? {}, {
+                x: resize.x,
+                y: resize.y,
+                w: resize.startW + dwUnits,
+                h: resize.startH + dhUnits,
+            }, this.safeColumns);
             resize.wrapper.style.gridColumn = `${resize.x + 1} / span ${w}`;
             resize.wrapper.style.gridRow = `${resize.y + 1} / span ${h}`;
-            if (this.collision !== 'overlap') {
-                const collides = findCollisions(this.layout, { id: resize.cellId, x: resize.x, y: resize.y, w, h }).length > 0;
-                resize.wrapper.toggleAttribute('data-collision', collides);
+            if (this.collision !== "overlap") {
+                const collides = findCollisions(this.layout, {
+                    id: resize.cellId,
+                    x: resize.x,
+                    y: resize.y,
+                    w,
+                    h,
+                }).length > 0;
+                resize.wrapper.toggleAttribute("data-collision", collides);
             }
             resize.currentW = w;
             resize.currentH = h;
@@ -164,15 +191,15 @@ export class LyraDashboardGrid extends LyraElement {
             if (!resize || e.pointerId !== resize.pointerId)
                 return;
             this.cellResize = undefined;
-            resize.wrapper.removeAttribute('data-resizing');
-            window.removeEventListener('pointermove', this.onResizeHandlePointerMove);
-            window.removeEventListener('pointerup', this.onResizeHandlePointerUp);
-            window.removeEventListener('pointercancel', this.onResizeHandlePointerUp);
-            window.removeEventListener('lostpointercapture', this.onResizeHandlePointerUp);
+            resize.wrapper.removeAttribute("data-resizing");
+            window.removeEventListener("pointermove", this.onResizeHandlePointerMove);
+            window.removeEventListener("pointerup", this.onResizeHandlePointerUp);
+            window.removeEventListener("pointercancel", this.onResizeHandlePointerUp);
+            window.removeEventListener("lostpointercapture", this.onResizeHandlePointerUp);
             const w = resize.currentW ?? resize.startW;
             const h = resize.currentH ?? resize.startH;
             if (w !== resize.startW || h !== resize.startH) {
-                this.commitPlacement(resize.cellId, { x: resize.x, y: resize.y, w, h }, 'resize');
+                this.commitPlacement(resize.cellId, { x: resize.x, y: resize.y, w, h }, "resize");
             }
             this.resetCellInlineStyle(resize.cellId, resize.wrapper);
             this.requestUpdate();
@@ -188,8 +215,28 @@ export class LyraDashboardGrid extends LyraElement {
     get safeGap() {
         return finiteRange(this.gap, 8, 0);
     }
+    normalizeCell(cell) {
+        const columns = this.safeColumns;
+        const minW = finiteInteger(cell.minW ?? 1, 1, 1, columns);
+        const maxW = finiteInteger(cell.maxW ?? columns, columns, minW, columns);
+        const minH = finiteInteger(cell.minH ?? 1, 1, 1, Number.MAX_SAFE_INTEGER);
+        const maxH = finiteInteger(cell.maxH ?? Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, minH, Number.MAX_SAFE_INTEGER);
+        const w = finiteInteger(cell.w, minW, minW, maxW);
+        const h = finiteInteger(cell.h, minH, minH, maxH);
+        return {
+            ...cell,
+            x: finiteInteger(cell.x, 0, 0, Math.max(0, columns - w)),
+            y: finiteInteger(cell.y, 0, 0, Number.MAX_SAFE_INTEGER),
+            w,
+            h,
+            ...(cell.minW === undefined ? {} : { minW }),
+            ...(cell.maxW === undefined ? {} : { maxW }),
+            ...(cell.minH === undefined ? {} : { minH }),
+            ...(cell.maxH === undefined ? {} : { maxH }),
+        };
+    }
     get sortedLayout() {
-        return sortSpatial(this.layout);
+        return sortSpatial(this.layout.map((cell) => this.normalizeCell(cell)));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -197,19 +244,19 @@ export class LyraDashboardGrid extends LyraElement {
         // mid-gesture nothing else ever detaches them, and a later unrelated pointerup would fire
         // against a detached tree with stale gesture state.
         this.cellDrag = undefined;
-        window.removeEventListener('pointermove', this.onCellPointerMove);
-        window.removeEventListener('pointerup', this.onCellPointerUp);
-        window.removeEventListener('pointercancel', this.onCellPointerUp);
-        window.removeEventListener('lostpointercapture', this.onCellPointerUp);
+        window.removeEventListener("pointermove", this.onCellPointerMove);
+        window.removeEventListener("pointerup", this.onCellPointerUp);
+        window.removeEventListener("pointercancel", this.onCellPointerUp);
+        window.removeEventListener("lostpointercapture", this.onCellPointerUp);
         this.cellResize = undefined;
-        window.removeEventListener('pointermove', this.onResizeHandlePointerMove);
-        window.removeEventListener('pointerup', this.onResizeHandlePointerUp);
-        window.removeEventListener('pointercancel', this.onResizeHandlePointerUp);
-        window.removeEventListener('lostpointercapture', this.onResizeHandlePointerUp);
+        window.removeEventListener("pointermove", this.onResizeHandlePointerMove);
+        window.removeEventListener("pointerup", this.onResizeHandlePointerUp);
+        window.removeEventListener("pointercancel", this.onResizeHandlePointerUp);
+        window.removeEventListener("lostpointercapture", this.onResizeHandlePointerUp);
     }
     willUpdate(changed) {
         super.willUpdate(changed); // no-op today, but keeps any future LyraElement/mixin willUpdate logic wired in
-        if (changed.has('layout'))
+        if (changed.has("layout"))
             this.syncDefaultCells();
     }
     // ---------------------------------------------------------------------
@@ -229,26 +276,26 @@ export class LyraDashboardGrid extends LyraElement {
         const ids = new Set(this.layout.map((c) => c.id));
         const byCellId = new Map();
         for (const child of Array.from(this.children)) {
-            const cellId = child.getAttribute('cell-id');
+            const cellId = child.getAttribute("cell-id");
             if (!cellId)
                 continue;
             byCellId.set(cellId, child);
             if (ids.has(cellId)) {
-                child.setAttribute('slot', `cell-${cellId}`);
+                child.setAttribute("slot", `cell-${cellId}`);
             }
             else {
-                if (child.hasAttribute('data-dashboard-grid-default-cell')) {
+                if (child.hasAttribute("data-dashboard-grid-default-cell")) {
                     child.remove();
                     byCellId.delete(cellId);
                     continue;
                 }
-                child.removeAttribute('slot');
+                child.removeAttribute("slot");
                 console.warn(`<lr-dashboard-grid> a child with cell-id="${cellId}" matches no entry in \`layout\`; it will not render.`);
             }
         }
         for (const cell of this.layout) {
             const existing = byCellId.get(cell.id);
-            if (existing?.hasAttribute('data-dashboard-grid-default-cell')) {
+            if (existing?.hasAttribute("data-dashboard-grid-default-cell")) {
                 this.updateDefaultCell(existing, cell);
             }
             else if (!existing) {
@@ -257,18 +304,18 @@ export class LyraDashboardGrid extends LyraElement {
         }
     }
     createDefaultCell(cell) {
-        const widget = document.createElement(tag('widget'));
-        widget.setAttribute('cell-id', cell.id);
-        widget.setAttribute('data-dashboard-grid-default-cell', '');
-        widget.setAttribute('slot', `cell-${cell.id}`);
-        const renderer = document.createElement(tag('widget-renderer'));
+        const widget = document.createElement(tag("widget"));
+        widget.setAttribute("cell-id", cell.id);
+        widget.setAttribute("data-dashboard-grid-default-cell", "");
+        widget.setAttribute("slot", `cell-${cell.id}`);
+        const renderer = document.createElement(tag("widget-renderer"));
         widget.appendChild(renderer);
         this.updateDefaultCell(widget, cell);
         return widget;
     }
     updateDefaultCell(widget, cell) {
         widget.label = this.cellLabel(cell);
-        const renderer = widget.querySelector(tag('widget-renderer'));
+        const renderer = widget.querySelector(tag("widget-renderer"));
         if (renderer)
             renderer.tree = cell.widget ?? null;
     }
@@ -277,8 +324,10 @@ export class LyraDashboardGrid extends LyraElement {
     // ---------------------------------------------------------------------
     onCellFocus(id) {
         const index = this.sortedLayout.findIndex((c) => c.id === id);
-        if (index >= 0)
+        if (index >= 0) {
             this.activeCellIndex = index;
+            this.activeCellId = id;
+        }
     }
     focusCellAt(index) {
         const cells = this.sortedLayout;
@@ -286,7 +335,12 @@ export class LyraDashboardGrid extends LyraElement {
             return;
         this.activeCellIndex = index;
         const cell = cells[index]; // safe: bounds checked above (0 <= index < cells.length)
-        this.announcer.announce(this.localize('flowItemAnnouncement', undefined, { item: this.cellLabel(cell), index: index + 1, total: cells.length }));
+        this.activeCellId = cell.id;
+        this.announcer.announce(this.localize("flowItemAnnouncement", undefined, {
+            item: this.cellLabel(cell),
+            index: index + 1,
+            total: cells.length,
+        }));
         void this.updateComplete.then(() => {
             this.renderRoot.querySelector(`[part="cell"][data-cell-id="${CSS.escape(cell.id)}"]`)?.focus();
         });
@@ -306,16 +360,16 @@ export class LyraDashboardGrid extends LyraElement {
         if (index < 0)
             return;
         const rtl = isRtl(this);
-        const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
-        const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+        const backwardKey = rtl ? "ArrowRight" : "ArrowLeft";
         let next = index;
-        if (e.key === forwardKey || e.key === 'ArrowDown')
+        if (e.key === forwardKey || e.key === "ArrowDown")
             next = Math.min(cells.length - 1, index + 1);
-        else if (e.key === backwardKey || e.key === 'ArrowUp')
+        else if (e.key === backwardKey || e.key === "ArrowUp")
             next = Math.max(0, index - 1);
-        else if (e.key === 'Home')
+        else if (e.key === "Home")
             next = 0;
-        else if (e.key === 'End')
+        else if (e.key === "End")
             next = cells.length - 1;
         else
             return;
@@ -328,17 +382,17 @@ export class LyraDashboardGrid extends LyraElement {
         const rtlFlip = isRtl(this) ? -1 : 1;
         let dx = 0;
         let dy = 0;
-        if (key === 'ArrowRight')
+        if (key === "ArrowRight")
             dx = rtlFlip;
-        else if (key === 'ArrowLeft')
+        else if (key === "ArrowLeft")
             dx = -rtlFlip;
-        else if (key === 'ArrowDown')
+        else if (key === "ArrowDown")
             dy = 1;
-        else if (key === 'ArrowUp')
+        else if (key === "ArrowUp")
             dy = -1;
         else
             return;
-        this.commitPlacement(cell.id, { x: cell.x + dx, y: cell.y + dy, w: cell.w, h: cell.h }, 'move');
+        this.commitPlacement(cell.id, { x: cell.x + dx, y: cell.y + dy, w: cell.w, h: cell.h }, "move");
     }
     keyboardResize(cell, key) {
         if (!this.cellsResizable || this.locked || cell.locked)
@@ -346,17 +400,17 @@ export class LyraDashboardGrid extends LyraElement {
         const rtlFlip = isRtl(this) ? -1 : 1;
         let dw = 0;
         let dh = 0;
-        if (key === 'ArrowRight')
+        if (key === "ArrowRight")
             dw = rtlFlip;
-        else if (key === 'ArrowLeft')
+        else if (key === "ArrowLeft")
             dw = -rtlFlip;
-        else if (key === 'ArrowDown')
+        else if (key === "ArrowDown")
             dh = 1;
-        else if (key === 'ArrowUp')
+        else if (key === "ArrowUp")
             dh = -1;
         else
             return;
-        this.commitPlacement(cell.id, { x: cell.x, y: cell.y, w: cell.w + dw, h: cell.h + dh }, 'resize');
+        this.commitPlacement(cell.id, { x: cell.x, y: cell.y, w: cell.w + dw, h: cell.h + dh }, "resize");
     }
     // ---------------------------------------------------------------------
     // Shared commit path (keyboard nudge, and a pointer gesture's final drop)
@@ -367,44 +421,61 @@ export class LyraDashboardGrid extends LyraElement {
             return;
         const result = resolvePlacement(this.layout, id, requested, this.safeColumns, this.collision);
         if (result.collidedWith.length > 0) {
-            this.emit('lr-collision', { id, collidedWith: result.collidedWith, policy: this.collision, accepted: result.accepted });
+            this.emit("lr-collision", {
+                id,
+                collidedWith: result.collidedWith,
+                policy: this.collision,
+                accepted: result.accepted,
+            });
         }
         if (!result.accepted) {
-            this.announcer.announce(this.localize('dashboardCellCollisionRejected', undefined, { label: this.cellLabel(cell) }));
+            this.announcer.announce(this.localize("dashboardCellCollisionRejected", undefined, {
+                label: this.cellLabel(cell),
+            }));
             return;
         }
         const updated = result.layout.find((c) => c.id === id);
         // `requested` is clamped (bounds + this cell's own min/max) before ever reaching collision
         // resolution, so e.g. a shrink-past-minW request can come back byte-identical to `cell` --
         // that's a real no-op, not a move/resize, and must not emit a spurious event.
-        const unchanged = kind === 'move' ? updated.x === cell.x && updated.y === cell.y : updated.w === cell.w && updated.h === cell.h;
+        const unchanged = kind === "move"
+            ? updated.x === cell.x && updated.y === cell.y
+            : updated.w === cell.w && updated.h === cell.h;
         if (unchanged)
             return;
-        if (kind === 'move') {
-            this.emit('lr-cell-move', {
+        if (kind === "move") {
+            this.emit("lr-cell-move", {
                 id,
                 position: { x: updated.x, y: updated.y },
                 previous: { x: cell.x, y: cell.y },
             });
-            this.announcer.announce(this.localize('dashboardCellMoved', undefined, { label: this.cellLabel(cell), x: updated.x + 1, y: updated.y + 1 }));
+            this.announcer.announce(this.localize("dashboardCellMoved", undefined, {
+                label: this.cellLabel(cell),
+                x: updated.x + 1,
+                y: updated.y + 1,
+            }));
         }
         else {
-            this.emit('lr-cell-resize', {
+            this.emit("lr-cell-resize", {
                 id,
                 size: { w: updated.w, h: updated.h },
                 previous: { w: cell.w, h: cell.h },
             });
-            this.announcer.announce(this.localize('dashboardCellResized', undefined, { label: this.cellLabel(cell), w: updated.w, h: updated.h }));
+            this.announcer.announce(this.localize("dashboardCellResized", undefined, {
+                label: this.cellLabel(cell),
+                w: updated.w,
+                h: updated.h,
+            }));
         }
-        this.emit('lr-layout-change', { layout: result.layout });
+        this.emit("lr-layout-change", { layout: result.layout });
     }
     // ---------------------------------------------------------------------
     // Pointer drag (move)
     // ---------------------------------------------------------------------
     cellStyle(cell) {
         return {
-            'grid-column': `${cell.x + 1} / span ${cell.w}`,
-            'grid-row': `${cell.y + 1} / span ${cell.h}`,
+            "grid-column": `${cell.x + 1} / span ${cell.w}`,
+            "grid-row": `${cell.y + 1} / span ${cell.h}`,
         };
     }
     /** Column/row pixel pitch, measured once per gesture (not re-measured on every pointermove --
@@ -417,16 +488,19 @@ export class LyraDashboardGrid extends LyraElement {
         const columns = this.safeColumns;
         const gap = this.safeGap;
         const rawColPitch = (rect.width - gap * (columns - 1)) / columns;
-        return { colPitch: rawColPitch > 0 ? rawColPitch : 1, rowPitch: this.safeRowHeight + gap };
+        return {
+            colPitch: rawColPitch > 0 ? rawColPitch : 1,
+            rowPitch: this.safeRowHeight + gap,
+        };
     }
     resetCellInlineStyle(id, wrapper) {
         const cell = this.layout.find((c) => c.id === id);
         if (!cell)
             return;
         const style = this.cellStyle(cell);
-        wrapper.style.gridColumn = style['grid-column'];
-        wrapper.style.gridRow = style['grid-row'];
-        wrapper.removeAttribute('data-collision');
+        wrapper.style.gridColumn = style["grid-column"];
+        wrapper.style.gridRow = style["grid-row"];
+        wrapper.removeAttribute("data-collision");
     }
     onCellPointerDown(e, cell) {
         if (!this.cellsDraggable || this.locked || cell.locked || e.button !== 0)
@@ -453,11 +527,11 @@ export class LyraDashboardGrid extends LyraElement {
             rtlFlip: isRtl(this) ? -1 : 1,
         };
         wrapper.setPointerCapture?.(e.pointerId);
-        wrapper.setAttribute('data-dragging', '');
-        window.addEventListener('pointermove', this.onCellPointerMove);
-        window.addEventListener('pointerup', this.onCellPointerUp);
-        window.addEventListener('pointercancel', this.onCellPointerUp);
-        window.addEventListener('lostpointercapture', this.onCellPointerUp);
+        wrapper.setAttribute("data-dragging", "");
+        window.addEventListener("pointermove", this.onCellPointerMove);
+        window.addEventListener("pointerup", this.onCellPointerUp);
+        window.addEventListener("pointercancel", this.onCellPointerUp);
+        window.addEventListener("lostpointercapture", this.onCellPointerUp);
     }
     // ---------------------------------------------------------------------
     // Pointer resize
@@ -486,11 +560,11 @@ export class LyraDashboardGrid extends LyraElement {
             rtlFlip: isRtl(this) ? -1 : 1,
         };
         e.currentTarget.setPointerCapture?.(e.pointerId);
-        wrapper.setAttribute('data-resizing', '');
-        window.addEventListener('pointermove', this.onResizeHandlePointerMove);
-        window.addEventListener('pointerup', this.onResizeHandlePointerUp);
-        window.addEventListener('pointercancel', this.onResizeHandlePointerUp);
-        window.addEventListener('lostpointercapture', this.onResizeHandlePointerUp);
+        wrapper.setAttribute("data-resizing", "");
+        window.addEventListener("pointermove", this.onResizeHandlePointerMove);
+        window.addEventListener("pointerup", this.onResizeHandlePointerUp);
+        window.addEventListener("pointercancel", this.onResizeHandlePointerUp);
+        window.addEventListener("lostpointercapture", this.onResizeHandlePointerUp);
     }
     // ---------------------------------------------------------------------
     // Render
@@ -500,7 +574,7 @@ export class LyraDashboardGrid extends LyraElement {
         return html `<div
       part="cell"
       role="group"
-      tabindex=${active ? '0' : '-1'}
+      tabindex=${active ? "0" : "-1"}
       aria-label=${this.cellLabel(cell)}
       data-cell-id=${cell.id}
       style=${styleMap(this.cellStyle(cell))}
@@ -522,25 +596,36 @@ export class LyraDashboardGrid extends LyraElement {
     }
     render() {
         const cells = this.sortedLayout;
-        const label = this.accessibleLabel || this.localize('dashboardGridLabel');
+        const label = this.accessibleLabel || this.localize("dashboardGridLabel");
         if (cells.length === 0) {
             return html `<div part="base" role="region" aria-label=${label}>
-        <lr-empty part="empty" heading=${this.localize('noData')}></lr-empty>
+        <lr-empty part="empty" heading=${this.localize("noData")}></lr-empty>
       </div>`;
         }
-        const activeIndex = Math.min(this.activeCellIndex, cells.length - 1);
+        const retainedIndex = cells.findIndex((cell) => cell.id === this.activeCellId);
+        const activeIndex = retainedIndex >= 0
+            ? retainedIndex
+            : Math.min(this.activeCellIndex, cells.length - 1);
         return html `<div
       part="base"
       role="region"
       aria-label=${label}
       style=${styleMap({
-            '--lr-dashboard-grid-columns': String(this.safeColumns),
-            '--lr-dashboard-grid-row-height': `${this.safeRowHeight}px`,
-            '--lr-dashboard-grid-gap': `${this.safeGap}px`,
+            "--lr-dashboard-grid-columns": String(this.safeColumns),
+            "--lr-dashboard-grid-row-height": `${this.safeRowHeight}px`,
+            "--lr-dashboard-grid-gap": `${this.safeGap}px`,
         })}
     >
       ${repeat(cells, (cell) => cell.id, (cell, i) => this.renderCell(cell, i === activeIndex))}
-      <div part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this.liveText}</div>
+      <div
+        part="live-region"
+        class="sr-only"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        ${this.liveText}
+      </div>
     </div>`;
     }
 }
@@ -551,7 +636,7 @@ __decorate([
     property({ type: Number })
 ], LyraDashboardGrid.prototype, "columns", void 0);
 __decorate([
-    property({ type: Number, attribute: 'row-height' })
+    property({ type: Number, attribute: "row-height" })
 ], LyraDashboardGrid.prototype, "rowHeight", void 0);
 __decorate([
     property({ type: Number })
@@ -560,16 +645,16 @@ __decorate([
     property()
 ], LyraDashboardGrid.prototype, "collision", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'cells-draggable' })
+    property({ type: Boolean, attribute: "cells-draggable" })
 ], LyraDashboardGrid.prototype, "cellsDraggable", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'cells-resizable' })
+    property({ type: Boolean, attribute: "cells-resizable" })
 ], LyraDashboardGrid.prototype, "cellsResizable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraDashboardGrid.prototype, "locked", void 0);
 __decorate([
-    property({ attribute: 'aria-label' })
+    property({ attribute: "aria-label" })
 ], LyraDashboardGrid.prototype, "accessibleLabel", void 0);
 __decorate([
     state()
@@ -577,4 +662,7 @@ __decorate([
 __decorate([
     state()
 ], LyraDashboardGrid.prototype, "activeCellIndex", void 0);
+__decorate([
+    state()
+], LyraDashboardGrid.prototype, "activeCellId", void 0);
 //# sourceMappingURL=dashboard-grid.class.js.map