@ethlete/components 0.1.0-next.5 → 0.1.0-next.7

package/fesm2022/ethlete-components.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, input, booleanAttribute, signal, effect, numberAttribute, computed, inject, ElementRef, InjectionToken, afterNextRender, untracked, DestroyRef, model, viewChild, Injector, output, ApplicationRef, EnvironmentInjector, DOCUMENT, createEnvironmentInjector, createComponent, TemplateRef, linkedSignal, afterRenderEffect, contentChild, inputBinding, PLATFORM_ID, isDevMode, contentChildren } from '@angular/core';
 import * as i2 from '@ethlete/core';
-import { injectStyleManager, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, RuntimeError, injectErrorTheme, signalElementDimensions, createProvider, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, ProvideSurfaceDirective, SURFACE_PROVIDER, injectSurfaceThemes, resolveSurfaceByElevation, ColorInteractiveHasFocusDirective, createStaticRootProvider, signalHostElementDimensions, signalHostStyles, DragHandleDirective, injectRenderer, injectLocale, ResizeHandlesComponent, ANIMATED_LIFECYCLE_TOKEN, injectSurfaceContextTracker, AnimatedLifecycleDirective, createRootProvider, injectOverlayRuntime, typedBreakpointTransform, signalElementChildren, signalElementScrollState, signalElementIntersection, signalHostAttributes, signalHostClasses, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, ScrollObserverDirective, ScrollObserverStartDirective, ScrollObserverEndDirective, injectViewportSize, createFlipAnimation, signalHostElementIntersection, injectHostElement, setInputSignal, SurfaceInteractiveDirective, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, COLOR_PROVIDER, injectFocusVisibleTracker } from '@ethlete/core';
+import { injectStyleManager, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, RuntimeError, injectErrorTheme, signalElementDimensions, createProvider, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, ProvideSurfaceDirective, SURFACE_PROVIDER, injectSurfaceThemes, resolveSurfaceByElevation, ColorInteractiveHasFocusDirective, createStaticRootProvider, signalHostElementDimensions, DragHandleDirective, injectRenderer, injectLocale, ResizeHandlesComponent, ANIMATED_LIFECYCLE_TOKEN, injectSurfaceContextTracker, AnimatedLifecycleDirective, createRootProvider, injectOverlayRuntime, typedBreakpointTransform, signalElementChildren, signalElementScrollState, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, ScrollObserverDirective, ScrollObserverStartDirective, ScrollObserverEndDirective, injectViewportSize, createFlipAnimation, signalHostElementIntersection, injectHostElement, setInputSignal, SurfaceInteractiveDirective, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, COLOR_PROVIDER, injectFocusVisibleTracker } from '@ethlete/core';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { toObservable, takeUntilDestroyed, outputToObservable, outputFromObservable, rxResource } from '@angular/core/rxjs-interop';
-import { switchMap, EMPTY, filter, tap, take, of, timer, animationFrameScheduler, Subject, fromEvent, debounceTime, map, exhaustMap, takeUntil, finalize, distinctUntilChanged, Observable, shareReplay, catchError, interval } from 'rxjs';
+import { switchMap, EMPTY, filter, tap, timer, take, of, animationFrameScheduler, Subject, fromEvent, debounceTime, map, exhaustMap, takeUntil, finalize, distinctUntilChanged, Observable, shareReplay, catchError, interval } from 'rxjs';
+import { tap as tap$1 } from 'rxjs/operators';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/router';
 import { RouterLinkActive, NavigationEnd, RouterLink } from '@angular/router';
@@ -2384,14 +2385,38 @@ const itemsCollide = (a, b) => {
  * Returns the first item that collides with the given position, or undefined if none.
  */
 const findCollision = (options) => options.entries.find((entry) => entry.id !== options.excludeId && itemsCollide(entry.position, options.position));
+/**
+ * Clamps a position so it fits horizontally within the given column count.
+ * Reduces an over-wide span and slides an out-of-bounds column back in range.
+ */
+const clampToColumns = (position, columns) => {
+    const colSpan = Math.max(1, Math.min(position.colSpan, columns));
+    const col = Math.max(0, Math.min(position.col, columns - colSpan));
+    return { ...position, col, colSpan };
+};
 /**
  * Compacts the layout vertically (moves items up as far as possible without collision).
+ *
+ * Also acts as a self-healing normaliser: positions that overflow the grid horizontally
+ * (e.g. stale data from a wider breakpoint clamped into a narrower one — a colSpan of 12
+ * or a col of 8 in a 6-column grid) are first clamped back into bounds, then any items
+ * left overlapping are pushed down before the upward compaction runs. This guarantees the
+ * returned layout is always in-bounds and overlap-free regardless of the input — clamping
+ * a column alone is not enough, because it can drop an item on top of an existing one.
  */
-const compactLayout = (entries, _columns) => {
-    const sorted = [...entries].sort((a, b) => a.position.row - b.position.row || a.position.col - b.position.col);
+const compactLayout = (entries, columns) => {
+    const sorted = [...entries]
+        .map((entry) => ({ ...entry, position: clampToColumns(entry.position, columns) }))
+        .sort((a, b) => a.position.row - b.position.row || a.position.col - b.position.col);
     const compacted = [];
     for (const entry of sorted) {
         const candidate = { ...entry, position: { ...entry.position } };
+        // Push down past any already-placed item it overlaps. This resolves overlaps introduced
+        // by clamping out-of-bounds columns (which the upward pass below cannot fix on its own).
+        while (findCollision({ entries: compacted, position: candidate.position, excludeId: candidate.id })) {
+            candidate.position.row += 1;
+        }
+        // Then pull up as far as possible without colliding.
         while (candidate.position.row > 0) {
             const moved = { ...candidate, position: { ...candidate.position, row: candidate.position.row - 1 } };
             if (findCollision({ entries: compacted, position: moved.position, excludeId: candidate.id })) {
@@ -2620,6 +2645,17 @@ const deserializeGridLayout = (state, breakpointMinWidths) => {
     return { breakpoints, items, rowHeight: state.rowHeight };
 };
 
+const positionsEqual = (a, b) => a.col === b.col && a.row === b.row && a.colSpan === b.colSpan && a.rowSpan === b.rowSpan;
+const layoutsEqual = (a, b) => {
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length)
+        return false;
+    return aKeys.every((k) => {
+        const ap = a[k];
+        const bp = b[k];
+        return ap !== undefined && bp !== undefined && positionsEqual(ap, bp);
+    });
+};
 const DEFAULT_CONSTRAINTS = {
     minColSpan: 1,
     maxColSpan: 12,
@@ -2719,14 +2755,41 @@ class GridDirective {
                     this.itemConfigs.set(initial);
                     return;
                 }
-                const currentIds = new Set(current.map((c) => c.id));
-                const newItems = initial.filter((item) => !currentIds.has(item.id));
+                const currentById = new Map(current.map((c) => [c.id, c]));
+                const initialIds = new Set(initial.map((i) => i.id));
+                const newItems = initial.filter((item) => !currentById.has(item.id));
+                const removedIds = current.filter((c) => !initialIds.has(c.id)).map((c) => c.id);
+                // Pure layout update — same item set but positions changed (e.g. the host
+                // reset its signal to a saved snapshot after the user cancelled edits).
+                // A structural add/remove takes precedence and is handled below.
+                if (newItems.length === 0 && removedIds.length === 0) {
+                    const anyLayoutChanged = initial.some((incoming) => {
+                        const existing = currentById.get(incoming.id);
+                        return existing && !layoutsEqual(existing.layout, incoming.layout);
+                    });
+                    if (anyLayoutChanged) {
+                        // Restore itemConfigs from the incoming snapshot.
+                        this.itemConfigs.set(initial);
+                        // Rebuild layoutOverrides for every breakpoint that has already been
+                        // visited so the grid renders the restored positions immediately without
+                        // waiting for a breakpoint switch.
+                        const visitedBps = Object.keys(this.layoutOverrides());
+                        if (visitedBps.length > 0) {
+                            const restored = {};
+                            for (const bp of visitedBps) {
+                                restored[bp] = initial.map((item) => ({
+                                    id: item.id,
+                                    position: item.layout[bp] ?? { col: 0, row: 0, colSpan: 1, rowSpan: 1 },
+                                }));
+                            }
+                            this.layoutOverrides.set(restored);
+                        }
+                    }
+                    return;
+                }
                 for (const item of newItems) {
                     this.placeItem(item);
                 }
-                // Remove items no longer in initial
-                const initialIds = new Set(initial.map((i) => i.id));
-                const removedIds = current.filter((c) => !initialIds.has(c.id)).map((c) => c.id);
                 for (const id of removedIds) {
                     this.removeItem(id);
                 }
@@ -2799,27 +2862,33 @@ class GridDirective {
         // On first registration the item may have been auto-placed with 1×1 defaults
         // (because addItem runs before the GridItemDirective initialises). If so,
         // re-place it now at the correct minimum size.
-        const breakpoint = this.activeBreakpoint();
-        const existing = this.layoutOverrides()[breakpoint];
-        if (!existing)
-            return;
-        const entry = existing.find((e) => e.id === id);
-        if (!entry)
-            return;
-        const pos = entry.position;
-        if (pos.colSpan >= constraints.minColSpan && pos.rowSpan >= constraints.minRowSpan)
-            return;
-        const cols = this.activeColumns();
-        const others = existing.filter((e) => e.id !== id);
-        const newPosition = autoPlace({
-            entries: others,
-            colSpan: Math.max(pos.colSpan, constraints.minColSpan),
-            rowSpan: Math.max(pos.rowSpan, constraints.minRowSpan),
-            columns: cols,
+        // All signal reads are wrapped in untracked() to prevent this method from
+        // inadvertently becoming a dependency of the caller's reactive context
+        // (e.g. GridItemDirective's registration effect), which would cause the
+        // layoutOverrides.update() write below to re-trigger that effect in a loop.
+        untracked(() => {
+            const breakpoint = this.activeBreakpoint();
+            const existing = this.layoutOverrides()[breakpoint];
+            if (!existing)
+                return;
+            const entry = existing.find((e) => e.id === id);
+            if (!entry)
+                return;
+            const pos = entry.position;
+            if (pos.colSpan >= constraints.minColSpan && pos.rowSpan >= constraints.minRowSpan)
+                return;
+            const cols = this.activeColumns();
+            const others = existing.filter((e) => e.id !== id);
+            const newPosition = autoPlace({
+                entries: others,
+                colSpan: Math.max(pos.colSpan, constraints.minColSpan),
+                rowSpan: Math.max(pos.rowSpan, constraints.minRowSpan),
+                columns: cols,
+            });
+            const updated = existing.map((e) => (e.id === id ? { ...e, position: newPosition } : e));
+            const compacted = compactLayout(updated, cols);
+            this.layoutOverrides.update((prev) => ({ ...prev, [breakpoint]: compacted }));
         });
-        const updated = existing.map((e) => (e.id === id ? { ...e, position: newPosition } : e));
-        const compacted = compactLayout(updated, cols);
-        this.layoutOverrides.update((prev) => ({ ...prev, [breakpoint]: compacted }));
     }
     registerItem(id, options) {
         this.itemElements.set(id, options.el);
@@ -2960,6 +3029,7 @@ class GridDirective {
                 const currentLayout = this.baseLayout().filter((e) => e.id !== id);
                 const compacted = compactLayout(currentLayout, columns);
                 this.updateLayoutForCurrentBreakpoint(compacted);
+                this.compactOtherBreakpoints(id);
                 this.emitLayoutChange();
                 this.animateLayoutTransition({ excludeIds: new Set([id]) });
             };
@@ -2970,6 +3040,7 @@ class GridDirective {
             const currentLayout = this.baseLayout().filter((e) => e.id !== id);
             const compacted = compactLayout(currentLayout, columns);
             this.updateLayoutForCurrentBreakpoint(compacted);
+            this.compactOtherBreakpoints(id);
             this.emitLayoutChange();
         }
     }
@@ -3022,8 +3093,22 @@ class GridDirective {
         this.resizeBaseLayout.set(null);
     }
     getSerializedState() {
+        const overrides = this.layoutOverrides();
+        // layoutOverrides is the authoritative source for any breakpoint that has been visited.
+        // itemConfigs.layout[bp] lags behind for breakpoints that haven't been written back
+        // yet (e.g. items pushed by moveItem/resizeItem collision resolution, or items whose
+        // non-current-breakpoint positions haven't been visited since the last change).
+        const items = this.itemConfigs().map((item) => {
+            const layout = { ...item.layout };
+            for (const [bp, entries] of Object.entries(overrides)) {
+                const entry = entries.find((e) => e.id === item.id);
+                if (entry)
+                    layout[bp] = entry.position;
+            }
+            return { ...item, layout };
+        });
         return serializeGridLayout({
-            items: this.itemConfigs(),
+            items,
             breakpoints: this.breakpoints(),
             rowHeight: this.rowHeight(),
         });
@@ -3052,24 +3137,45 @@ class GridDirective {
         this.layoutOverrides.set(overrides);
     }
     placeItem(config) {
-        const breakpoint = this.activeBreakpoint();
+        const activeBp = this.activeBreakpoint();
         const columns = this.activeColumns();
         const currentLayout = this.baseLayout();
         const constraints = this.getConstraints(config.id);
-        const position = config.layout[breakpoint] ??
+        const allBreakpoints = this.breakpoints();
+        const overrides = this.layoutOverrides();
+        const existingItems = this.itemConfigs();
+        // Start from any layouts already in the config (e.g. when re-adding from API data).
+        const layout = { ...config.layout };
+        // Place on the active breakpoint first so other breakpoints can use it as a reference.
+        const position = layout[activeBp] ??
             autoPlace({
                 entries: currentLayout,
                 colSpan: constraints.minColSpan,
                 rowSpan: constraints.minRowSpan,
                 columns,
             });
-        const itemWithLayout = {
-            ...config,
-            layout: {
-                ...config.layout,
-                [breakpoint]: position,
-            },
-        };
+        layout[activeBp] = position;
+        // Auto-place on every other breakpoint that has no position yet.
+        // This ensures the emitted layoutChange always carries all breakpoints so
+        // the host's gridItems signal never loses sm/md positions for new items.
+        for (const bp of allBreakpoints) {
+            if (bp.name === activeBp || layout[bp.name])
+                continue;
+            // Effective layout for this breakpoint: prefer layoutOverrides (already visited),
+            // fall back to itemConfigs.layout[bp] (original API positions).
+            const bpEntries = overrides[bp.name] ??
+                existingItems.map((item) => ({
+                    id: item.id,
+                    position: item.layout[bp.name] ?? { col: 0, row: 0, colSpan: 1, rowSpan: 1 },
+                }));
+            layout[bp.name] = autoPlace({
+                entries: bpEntries,
+                colSpan: Math.min(constraints.minColSpan, bp.columns),
+                rowSpan: constraints.minRowSpan,
+                columns: bp.columns,
+            });
+        }
+        const itemWithLayout = { ...config, layout };
         this.itemConfigs.update((items) => [...items, itemWithLayout]);
         this.updateLayoutForCurrentBreakpoint([...currentLayout, { id: config.id, position }]);
         this.emitLayoutChange();
@@ -3153,6 +3259,19 @@ class GridDirective {
             return collides ? original : entry;
         });
     }
+    /** Compact all visited breakpoints (layoutOverrides entries) after an item is removed. */
+    compactOtherBreakpoints(removedId) {
+        const activeBp = this.activeBreakpoint();
+        const bpColumns = new Map(this.breakpoints().map((b) => [b.name, b.columns]));
+        for (const [bp, entries] of Object.entries(this.layoutOverrides())) {
+            if (bp === activeBp)
+                continue;
+            const withoutItem = entries.filter((e) => e.id !== removedId);
+            const cols = bpColumns.get(bp) ?? 1;
+            const compacted = compactLayout(withoutItem, cols);
+            this.layoutOverrides.update((prev) => ({ ...prev, [bp]: compacted }));
+        }
+    }
     updateLayoutForCurrentBreakpoint(entries) {
         const breakpoint = this.activeBreakpoint();
         this.layoutOverrides.update((prev) => ({ ...prev, [breakpoint]: entries }));
@@ -3207,10 +3326,8 @@ class GridItemDirective {
         this.currentRow = computed(() => this.renderPosition()?.row ?? 0, ...(ngDevMode ? [{ debugName: "currentRow" }] : /* istanbul ignore next */ []));
         this.currentColSpan = computed(() => this.renderPosition()?.colSpan ?? 1, ...(ngDevMode ? [{ debugName: "currentColSpan" }] : /* istanbul ignore next */ []));
         this.currentRowSpan = computed(() => this.renderPosition()?.rowSpan ?? 1, ...(ngDevMode ? [{ debugName: "currentRowSpan" }] : /* istanbul ignore next */ []));
-        this.hostStyles = signalHostStyles({
-            'grid-column': computed(() => `${this.currentCol() + 1} / span ${this.currentColSpan()}`),
-            'grid-row': computed(() => `${this.currentRow() + 1} / span ${this.currentRowSpan()}`),
-        });
+        this.gridColumn = computed(() => `${this.currentCol() + 1} / span ${this.currentColSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumn" }] : /* istanbul ignore next */ []));
+        this.gridRow = computed(() => `${this.currentRow() + 1} / span ${this.currentRowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRow" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const id = this.itemId();
             const el = this.hostElement.nativeElement;
@@ -3241,7 +3358,7 @@ class GridItemDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: GridItemDirective, isStandalone: true, selector: "[etGridItem]", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null }, minColSpan: { classPropertyName: "minColSpan", publicName: "minColSpan", isSignal: true, isRequired: false, transformFunction: null }, maxColSpan: { classPropertyName: "maxColSpan", publicName: "maxColSpan", isSignal: true, isRequired: false, transformFunction: null }, minRowSpan: { classPropertyName: "minRowSpan", publicName: "minRowSpan", isSignal: true, isRequired: false, transformFunction: null }, maxRowSpan: { classPropertyName: "maxRowSpan", publicName: "maxRowSpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-grid-item" }, exportAs: ["etGridItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: GridItemDirective, isStandalone: true, selector: "[etGridItem]", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null }, minColSpan: { classPropertyName: "minColSpan", publicName: "minColSpan", isSignal: true, isRequired: false, transformFunction: null }, maxColSpan: { classPropertyName: "maxColSpan", publicName: "maxColSpan", isSignal: true, isRequired: false, transformFunction: null }, minRowSpan: { classPropertyName: "minRowSpan", publicName: "minRowSpan", isSignal: true, isRequired: false, transformFunction: null }, maxRowSpan: { classPropertyName: "maxRowSpan", publicName: "maxRowSpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()" }, classAttribute: "et-grid-item" }, exportAs: ["etGridItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridItemDirective, decorators: [{
             type: Directive,
@@ -3250,6 +3367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     exportAs: 'etGridItem',
                     host: {
                         class: 'et-grid-item',
+                        '[style.grid-column]': 'gridColumn()',
+                        '[style.grid-row]': 'gridRow()',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: true }] }], minColSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColSpan", required: false }] }], maxColSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxColSpan", required: false }] }], minRowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRowSpan", required: false }] }], maxRowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRowSpan", required: false }] }] } });
@@ -3264,12 +3383,10 @@ class GridDragDirective {
         this.renderer = injectRenderer();
         this.dragStartClient = signal(null, ...(ngDevMode ? [{ debugName: "dragStartClient" }] : /* istanbul ignore next */ []));
         this.dragPixelOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragPixelOffset" }] : /* istanbul ignore next */ []));
-        this.hostStyles = signalHostStyles({
-            transform: computed(() => {
-                const offset = this.dragPixelOffset();
-                return `translate(${offset.x}px, ${offset.y}px)`;
-            }),
-        });
+        this.dragTransform = computed(() => {
+            const offset = this.dragPixelOffset();
+            return `translate(${offset.x}px, ${offset.y}px)`;
+        }, ...(ngDevMode ? [{ debugName: "dragTransform" }] : /* istanbul ignore next */ []));
         outputToObservable(this.dragHandle.dragStarted)
             .pipe(filter(() => !this.grid.readOnly()), tap(() => {
             this.dragPixelOffset.set({ x: 0, y: 0 });
@@ -3383,7 +3500,7 @@ class GridDragDirective {
         this.renderer.removeStyles(el, 'position', 'left', 'top', 'width', 'height');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: GridDragDirective, isStandalone: true, selector: "[etGridDrag]", host: { properties: { "class.et-grid-drag--active": "!grid.readOnly() && dragHandle.isDragging()", "attr.aria-grabbed": "!grid.readOnly() && dragHandle.isDragging()" }, classAttribute: "et-grid-drag" }, hostDirectives: [{ directive: i2.DragHandleDirective, outputs: ["dragStarted", "dragStarted", "dragMoved", "dragMoved", "dragEnded", "dragEnded"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: GridDragDirective, isStandalone: true, selector: "[etGridDrag]", host: { properties: { "class.et-grid-drag--active": "!grid.readOnly() && dragHandle.isDragging()", "attr.aria-grabbed": "!grid.readOnly() && dragHandle.isDragging()", "style.transform": "dragTransform()" }, classAttribute: "et-grid-drag" }, hostDirectives: [{ directive: i2.DragHandleDirective, outputs: ["dragStarted", "dragStarted", "dragMoved", "dragMoved", "dragEnded", "dragEnded"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDragDirective, decorators: [{
             type: Directive,
@@ -3399,6 +3516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         class: 'et-grid-drag',
                         '[class.et-grid-drag--active]': '!grid.readOnly() && dragHandle.isDragging()',
                         '[attr.aria-grabbed]': '!grid.readOnly() && dragHandle.isDragging()',
+                        '[style.transform]': 'dragTransform()',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -3528,17 +3646,15 @@ class GridComponent {
             const label = this.grid.readOnly() ? this.gridConfig.readonlyAriaLabel : this.gridConfig.interactiveAriaLabel;
             return this.gridConfig.transformer(label, this.locale.currentLocale());
         }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.hostStyles = signalHostStyles({
-            '--_et-grid-columns': computed(() => `${this.grid.activeColumns()}`),
-            '--et-grid-gap': computed(() => `${this.grid.gap()}px`),
-            '--et-grid-row-height': computed(() => `${this.grid.rowHeight()}px`),
-        });
+        this.gridColumns = computed(() => this.grid.activeColumns(), ...(ngDevMode ? [{ debugName: "gridColumns" }] : /* istanbul ignore next */ []));
+        this.gridGap = computed(() => `${this.grid.gap()}px`, ...(ngDevMode ? [{ debugName: "gridGap" }] : /* istanbul ignore next */ []));
+        this.gridRowHeight = computed(() => `${this.grid.rowHeight()}px`, ...(ngDevMode ? [{ debugName: "gridRowHeight" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.grid.setGhostElement(this.ghostRef()?.nativeElement ?? null);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", host: { attributes: { "role": "region" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "et-grid" }, viewQueries: [{ propertyName: "ghostRef", first: true, predicate: ["ghostRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "initialItems", "initialItems", "readOnly", "readOnly"], outputs: ["layoutChange", "layoutChange"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", host: { attributes: { "role": "region" }, properties: { "attr.aria-label": "ariaLabel()", "style.--_et-grid-columns": "gridColumns()", "style.--et-grid-gap": "gridGap()", "style.--et-grid-row-height": "gridRowHeight()" }, classAttribute: "et-grid" }, viewQueries: [{ propertyName: "ghostRef", first: true, predicate: ["ghostRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "initialItems", "initialItems", "readOnly", "readOnly"], outputs: ["layoutChange", "layoutChange"] }], ngImport: i0, template: `
     <ng-content />
     @if (grid.ghostPosition(); as ghost) {
       <div
@@ -3572,6 +3688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         class: 'et-grid',
                         role: 'region',
                         '[attr.aria-label]': 'ariaLabel()',
+                        '[style.--_et-grid-columns]': 'gridColumns()',
+                        '[style.--et-grid-gap]': 'gridGap()',
+                        '[style.--et-grid-row-height]': 'gridRowHeight()',
                     }, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ghostRef: [{ type: i0.ViewChild, args: ['ghostRef', { isSignal: true }] }] } });
 
@@ -3714,6 +3833,326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     }, styles: ["@property --et-grid-item-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-grid-item-bg{syntax: \"<color>\"; inherits: false; initial-value: rgb(var(--et-surface-background, 255 255 255));}@property --et-grid-item-shadow{syntax: \"*\"; inherits: false; initial-value: 0 1px 3px rgba(0,0,0,.12);}@property --et-grid-item-drag-handle-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}.et-grid-item{position:relative;border-radius:var(--et-grid-item-border-radius);background:var(--et-grid-item-bg);box-shadow:var(--et-grid-item-shadow);border:1px solid rgb(var(--et-surface-border, 229 229 229));color:rgb(var(--et-surface-color, 23 23 23));overflow:hidden;display:flex;flex-direction:column;outline:none;will-change:transform}.et-grid-item:focus-visible{box-shadow:0 0 0 2px var(--et-grid-item-focus-ring-color, #2563eb)}.et-grid-item:is(.et-grid-item--dragging){z-index:100;box-shadow:0 12px 32px #0003;opacity:.95;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:rgb(var(--et-surface-color, 23 23 23) / .2);transition:opacity .15s ease}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{height:var(--et-grid-item-drag-handle-height);cursor:grab;display:flex;align-items:center;padding-inline:8px;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;overflow:hidden;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"] }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
+const posEq = (a, b) => {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.col === b.col && a.row === b.row && a.colSpan === b.colSpan && a.rowSpan === b.rowSpan;
+};
+/**
+ * Development-only debug overlay for an `et-grid` instance.
+ *
+ * ```html
+ * <et-grid #myGrid [initialItems]="items()" ...></et-grid>
+ * <et-grid-debug [grid]="myGrid" [externalItems]="items()" />
+ * ```
+ *
+ * Pass `externalItems` to detect divergence between the host signal
+ * and the grid's internal itemConfigs. The **Copy JSON** button writes
+ * a full diagnostic snapshot to the clipboard without any console output.
+ */
+class GridDebugComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.externalItems = input(null, ...(ngDevMode ? [{ debugName: "externalItems" }] : /* istanbul ignore next */ []));
+        this.activeBreakpoint = computed(() => this.grid().grid.activeBreakpoint(), ...(ngDevMode ? [{ debugName: "activeBreakpoint" }] : /* istanbul ignore next */ []));
+        this.containerWidth = computed(() => this.grid().grid.containerWidth(), ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+        this.breakpoints = computed(() => this.grid().grid.breakpoints(), ...(ngDevMode ? [{ debugName: "breakpoints" }] : /* istanbul ignore next */ []));
+        this.items = computed(() => this.grid().grid.items(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.layout = computed(() => this.grid().grid.layout(), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.hasDrag = computed(() => this.grid().grid.dragState() !== null, ...(ngDevMode ? [{ debugName: "hasDrag" }] : /* istanbul ignore next */ []));
+        this.hasExternal = computed(() => this.externalItems() !== null, ...(ngDevMode ? [{ debugName: "hasExternal" }] : /* istanbul ignore next */ []));
+        this.copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => {
+            const bps = this.breakpoints().map((b) => b.name);
+            const internalItems = this.items();
+            const external = this.externalItems();
+            const extById = external ? new Map(external.map((i) => [i.id, i])) : null;
+            return internalItems.map((item) => ({
+                id: item.id,
+                type: item.type,
+                cells: bps.map((bp) => {
+                    const int = item.layout[bp];
+                    const ext = extById?.get(item.id)?.layout[bp];
+                    return {
+                        bp,
+                        int,
+                        ext,
+                        intMissing: !int,
+                        extMissing: extById !== null && !ext,
+                        mismatch: extById !== null && !posEq(int, ext),
+                    };
+                }),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.issueCount = computed(() => this.rows().reduce((n, row) => n + row.cells.filter((c) => c.intMissing || c.mismatch).length, 0), ...(ngDevMode ? [{ debugName: "issueCount" }] : /* istanbul ignore next */ []));
+    }
+    fmtPos(pos) {
+        return pos ? `(${pos.col},${pos.row}) ${pos.colSpan}×${pos.rowSpan}` : '—';
+    }
+    copyJson($event) {
+        $event.stopPropagation();
+        const issues = [];
+        for (const row of this.rows()) {
+            for (const cell of row.cells) {
+                if (cell.intMissing)
+                    issues.push({ type: 'missing-internal-layout', itemId: row.id, breakpoint: cell.bp });
+                if (cell.mismatch)
+                    issues.push({ type: 'external-internal-mismatch', itemId: row.id, breakpoint: cell.bp });
+            }
+        }
+        const external = this.externalItems();
+        const snapshot = {
+            timestamp: new Date().toISOString(),
+            activeBreakpoint: this.activeBreakpoint(),
+            containerWidth: this.containerWidth(),
+            breakpoints: this.breakpoints(),
+            internalItems: this.items().map((i) => ({ id: i.id, type: i.type, layout: i.layout })),
+            activeLayout: this.layout(),
+            ...(external ? { externalItems: external.map((i) => ({ id: i.id, type: i.type, layout: i.layout })) } : {}),
+            issues,
+        };
+        navigator.clipboard.writeText(JSON.stringify(snapshot, null, 2)).catch(() => {
+            /* clipboard unavailable in this context */
+        });
+        this.copied.set(true);
+        timer(2000)
+            .pipe(takeUntilDestroyed(this.destroyRef), tap$1(() => this.copied.set(false)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDebugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridDebugComponent, isStandalone: true, selector: "et-grid-debug", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, externalItems: { classPropertyName: "externalItems", publicName: "externalItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <details
+      style="font-family: monospace; font-size: 11px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 8px; background: #f9fafb; color: #111"
+    >
+      <summary
+        style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
+      >
+        <span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
+
+        <span style="color: #6b7280">
+          bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp; {{ containerWidth() }}px
+          &nbsp;·&nbsp; {{ items().length }} items
+          @if (hasDrag()) {
+            &nbsp;·&nbsp; <span style="color: #d97706">⠿ dragging</span>
+          }
+        </span>
+
+        @if (issueCount() > 0) {
+          <span style="color: #dc2626; font-weight: 700"
+            >⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
+          >
+        }
+
+        <button
+          (click)="copyJson($event)"
+          style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
+        >
+          Copy JSON
+        </button>
+
+        @if (copied()) {
+          <span style="color: #16a34a; font-size: 10px">✓ copied</span>
+        }
+      </summary>
+
+      <div style="padding: 8px 10px; overflow-x: auto; border-top: 1px solid #e5e7eb">
+        <!-- Breakpoint legend -->
+        <div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap">
+          @for (bp of breakpoints(); track bp.name) {
+            <span
+              [style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
+              [style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
+              style="padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px"
+              >{{ bp.name }}&nbsp;{{ bp.columns }}col&nbsp;≥{{ bp.minWidth }}px</span
+            >
+          }
+        </div>
+
+        <!-- Layout table -->
+        <table style="border-collapse: collapse; white-space: nowrap">
+          <thead>
+            <tr style="background: #f3f4f6">
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">id</th>
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">type</th>
+              @for (bp of breakpoints(); track bp.name) {
+                <th
+                  [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                  style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb"
+                >
+                  {{ bp.name }}{{ hasExternal() ? ' int' : '' }}
+                </th>
+                @if (hasExternal()) {
+                  <th
+                    [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                    style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb; opacity: .65"
+                  >
+                    {{ bp.name }} ext
+                  </th>
+                }
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows(); track row.id) {
+              <tr>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #6b7280">{{ row.id }}</td>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #9ca3af">{{ row.type }}</td>
+                @for (cell of row.cells; track cell.bp) {
+                  <td
+                    [style.color]="cell.intMissing ? '#dc2626' : '#111'"
+                    [title]="cell.intMissing ? 'MISSING — layout.' + cell.bp + ' undefined in internal state' : ''"
+                    style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                  >
+                    {{ fmtPos(cell.int) }}
+                  </td>
+                  @if (hasExternal()) {
+                    <td
+                      [style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
+                      [title]="cell.mismatch ? 'MISMATCH — ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
+                      style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                    >
+                      {{ fmtPos(cell.ext) }}
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+
+        @if (hasExternal()) {
+          <p style="margin-top: 6px; color: #9ca3af; font-size: 10px">
+            int = grid.items() (internal) &nbsp;·&nbsp; ext = externalItems input &nbsp;·&nbsp;
+            <span style="color: #dc2626">red = undefined</span> &nbsp;·&nbsp;
+            <span style="color: #d97706">orange = mismatch</span>
+          </p>
+        }
+      </div>
+    </details>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDebugComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-grid-debug',
+                    template: `
+    <details
+      style="font-family: monospace; font-size: 11px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 8px; background: #f9fafb; color: #111"
+    >
+      <summary
+        style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
+      >
+        <span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
+
+        <span style="color: #6b7280">
+          bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp; {{ containerWidth() }}px
+          &nbsp;·&nbsp; {{ items().length }} items
+          @if (hasDrag()) {
+            &nbsp;·&nbsp; <span style="color: #d97706">⠿ dragging</span>
+          }
+        </span>
+
+        @if (issueCount() > 0) {
+          <span style="color: #dc2626; font-weight: 700"
+            >⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
+          >
+        }
+
+        <button
+          (click)="copyJson($event)"
+          style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
+        >
+          Copy JSON
+        </button>
+
+        @if (copied()) {
+          <span style="color: #16a34a; font-size: 10px">✓ copied</span>
+        }
+      </summary>
+
+      <div style="padding: 8px 10px; overflow-x: auto; border-top: 1px solid #e5e7eb">
+        <!-- Breakpoint legend -->
+        <div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap">
+          @for (bp of breakpoints(); track bp.name) {
+            <span
+              [style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
+              [style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
+              style="padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px"
+              >{{ bp.name }}&nbsp;{{ bp.columns }}col&nbsp;≥{{ bp.minWidth }}px</span
+            >
+          }
+        </div>
+
+        <!-- Layout table -->
+        <table style="border-collapse: collapse; white-space: nowrap">
+          <thead>
+            <tr style="background: #f3f4f6">
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">id</th>
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">type</th>
+              @for (bp of breakpoints(); track bp.name) {
+                <th
+                  [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                  style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb"
+                >
+                  {{ bp.name }}{{ hasExternal() ? ' int' : '' }}
+                </th>
+                @if (hasExternal()) {
+                  <th
+                    [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                    style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb; opacity: .65"
+                  >
+                    {{ bp.name }} ext
+                  </th>
+                }
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows(); track row.id) {
+              <tr>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #6b7280">{{ row.id }}</td>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #9ca3af">{{ row.type }}</td>
+                @for (cell of row.cells; track cell.bp) {
+                  <td
+                    [style.color]="cell.intMissing ? '#dc2626' : '#111'"
+                    [title]="cell.intMissing ? 'MISSING — layout.' + cell.bp + ' undefined in internal state' : ''"
+                    style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                  >
+                    {{ fmtPos(cell.int) }}
+                  </td>
+                  @if (hasExternal()) {
+                    <td
+                      [style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
+                      [title]="cell.mismatch ? 'MISMATCH — ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
+                      style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                    >
+                      {{ fmtPos(cell.ext) }}
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+
+        @if (hasExternal()) {
+          <p style="margin-top: 6px; color: #9ca3af; font-size: 10px">
+            int = grid.items() (internal) &nbsp;·&nbsp; ext = externalItems input &nbsp;·&nbsp;
+            <span style="color: #dc2626">red = undefined</span> &nbsp;·&nbsp;
+            <span style="color: #d97706">orange = mismatch</span>
+          </p>
+        }
+      </div>
+    </details>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: true }] }], externalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalItems", required: false }] }] } });
+
 const GRID_ERROR_CODES = {
     MISSING_GRID: 1900,
     MISSING_GRID_ITEM: 1901,
@@ -3721,7 +4160,7 @@ const GRID_ERROR_CODES = {
     INVALID_LAYOUT_STATE: 1903,
 };
 
-const GridImports = [GridComponent, GridItemComponent];
+const GridImports = [GridComponent, GridItemComponent, GridDebugComponent];
 
 const ARROW_OUT_UP_RIGHT_ICON = {
     name: 'et-arrow-out-up-right',
@@ -11538,5 +11977,5 @@ const TOOLTIP_IMPORTS = [TooltipDirective, TooltipComponent];
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CHECKBOX_IMPORTS, CHEVRON_ICON, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChoiceFieldComponent, DAILYMOTION_PLAYER_TOKEN, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_STREAM_PLAYER_STATE, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DescriptionComponent, FACEBOOK_PLAYER_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_TOKEN, GridComponent, GridDirective, GridDragDirective, GridImports, GridItemComponent, GridItemDirective, GridItemRef, GridResizeDirective, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, INPUT_IMPORTS, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LOCK_ICON, LabelDirective, NAV_TABS_TOKEN, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NavTabImports, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, OVERLAY_ERROR_CODES, OVERLAY_IMPORTS, OVERLAY_REF, OverlayAnchorDirective, OverlayDirective, OverlaySurfaceDirective, OverlayTriggerDirective, PENCIL_ICON, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, RadioComponent, RadioGroupComponent, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SOOP_PLAYER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableErrorCode, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamImports, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_PANEL_TOKEN, TAB_SIZES, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabImports, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TextButtonComponent, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, createGridAdapter, createNotificationRef, createOverlayRef, createPipChromeAnimations, createPipChromeState, createStreamConfig, createStreamPlayerSlot, fromGridPosition, injectFormSupport, injectGridConfig, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, provideFormSupport, provideGridConfig, provideIcons, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlayManager, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, toGridPosition };
+export { ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CHECKBOX_IMPORTS, CHEVRON_ICON, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChoiceFieldComponent, DAILYMOTION_PLAYER_TOKEN, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_STREAM_PLAYER_STATE, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DescriptionComponent, FACEBOOK_PLAYER_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridImports, GridItemComponent, GridItemDirective, GridItemRef, GridResizeDirective, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, INPUT_IMPORTS, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LOCK_ICON, LabelDirective, NAV_TABS_TOKEN, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NavTabImports, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, OVERLAY_ERROR_CODES, OVERLAY_IMPORTS, OVERLAY_REF, OverlayAnchorDirective, OverlayDirective, OverlaySurfaceDirective, OverlayTriggerDirective, PENCIL_ICON, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, RadioComponent, RadioGroupComponent, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SOOP_PLAYER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableErrorCode, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamImports, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_PANEL_TOKEN, TAB_SIZES, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabImports, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TextButtonComponent, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, createGridAdapter, createNotificationRef, createOverlayRef, createPipChromeAnimations, createPipChromeState, createStreamConfig, createStreamPlayerSlot, fromGridPosition, injectFormSupport, injectGridConfig, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, provideFormSupport, provideGridConfig, provideIcons, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlayManager, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, toGridPosition };
 //# sourceMappingURL=ethlete-components.mjs.map