snice 4.28.0 → 4.30.0

package/dist/components/grid/snice-grid.js

@@ -0,0 +1,795 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, ready, dispose, watch, dispatch, render, styles, html, css } from 'snice';
+
+var cssContent = ":host{display:block;position:relative;width:100%;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style;--grid-gap:1rem;--grid-transition-duration:0.4s;overflow:hidden}.grid{position:relative;width:100%;min-height:1rem}::slotted(*){position:absolute;top:0;left:0;box-sizing:border-box}::slotted([hidden]){display:none!important}:host([ready]) ::slotted(*){transition:transform var(--grid-transition-duration) ease}::slotted(.grid-dragging){z-index:100;opacity:.9;transition:none!important;cursor:grabbing!important;user-select:none}::slotted(.grid-positioning){z-index:99}:host([draggable]) ::slotted(*){cursor:grab}.grid-drop-placeholder{position:absolute;top:0;left:0;outline:rgba(128,128,128,.5) dashed 3px;outline-offset:-6px;border-radius:4px;transition:transform .2s;pointer-events:none;display:none}.grid-drop-placeholder.visible{display:block}";
+
+// ---------------------------------------------------------------------------
+// OccupancyGrid
+// ---------------------------------------------------------------------------
+class OccupancyGrid {
+    constructor() {
+        this.cells = new Map();
+    }
+    key(col, row) {
+        return `${col},${row}`;
+    }
+    occupy(col, row, colspan, rowspan, item) {
+        for (let r = row; r < row + rowspan; r++) {
+            for (let c = col; c < col + colspan; c++) {
+                this.cells.set(this.key(c, r), item);
+            }
+        }
+    }
+    vacate(col, row, colspan, rowspan) {
+        for (let r = row; r < row + rowspan; r++) {
+            for (let c = col; c < col + colspan; c++) {
+                this.cells.delete(this.key(c, r));
+            }
+        }
+    }
+    getOccupant(col, row) {
+        return this.cells.get(this.key(col, row));
+    }
+    isOccupied(col, row, colspan, rowspan) {
+        for (let r = row; r < row + rowspan; r++) {
+            for (let c = col; c < col + colspan; c++) {
+                if (this.cells.has(this.key(c, r)))
+                    return true;
+            }
+        }
+        return false;
+    }
+    /** Find all unique items occupying cells in the given range */
+    getOccupants(col, row, colspan, rowspan) {
+        const occupants = new Set();
+        for (let r = row; r < row + rowspan; r++) {
+            for (let c = col; c < col + colspan; c++) {
+                const occupant = this.cells.get(this.key(c, r));
+                if (occupant)
+                    occupants.add(occupant);
+            }
+        }
+        return occupants;
+    }
+    findNextFree(startCol, startRow, colspan, rowspan, maxCols) {
+        // Scan right-then-down
+        for (let r = startRow; r < 10000; r++) {
+            const startC = r === startRow ? startCol : 0;
+            const endC = maxCols > 0 ? maxCols - colspan + 1 : 10000;
+            for (let c = startC; c < endC; c++) {
+                if (!this.isOccupied(c, r, colspan, rowspan)) {
+                    return { col: c, row: r };
+                }
+            }
+        }
+        return { col: startCol, row: startRow };
+    }
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+let SniceGrid = (() => {
+    let _classDecorators = [element('snice-grid')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _gap_decorators;
+    let _gap_initializers = [];
+    let _gap_extraInitializers = [];
+    let _columnWidth_decorators;
+    let _columnWidth_initializers = [];
+    let _columnWidth_extraInitializers = [];
+    let _rowHeight_decorators;
+    let _rowHeight_initializers = [];
+    let _rowHeight_extraInitializers = [];
+    let _columns_decorators;
+    let _columns_initializers = [];
+    let _columns_extraInitializers = [];
+    let _rows_decorators;
+    let _rows_initializers = [];
+    let _rows_extraInitializers = [];
+    let _originLeft_decorators;
+    let _originLeft_initializers = [];
+    let _originLeft_extraInitializers = [];
+    let _originTop_decorators;
+    let _originTop_initializers = [];
+    let _originTop_extraInitializers = [];
+    let _transitionDuration_decorators;
+    let _transitionDuration_initializers = [];
+    let _transitionDuration_extraInitializers = [];
+    let _stagger_decorators;
+    let _stagger_initializers = [];
+    let _stagger_extraInitializers = [];
+    let _resize_decorators;
+    let _resize_initializers = [];
+    let _resize_extraInitializers = [];
+    let _draggable_decorators;
+    let _draggable_initializers = [];
+    let _draggable_extraInitializers = [];
+    let _dragThrottle_decorators;
+    let _dragThrottle_initializers = [];
+    let _dragThrottle_extraInitializers = [];
+    let _container_decorators;
+    let _container_initializers = [];
+    let _container_extraInitializers = [];
+    let _slotElement_decorators;
+    let _slotElement_initializers = [];
+    let _slotElement_extraInitializers = [];
+    let _dropPlaceholder_decorators;
+    let _dropPlaceholder_initializers = [];
+    let _dropPlaceholder_extraInitializers = [];
+    let _onReady_decorators;
+    let _onDispose_decorators;
+    let _onGapChange_decorators;
+    let _onTransitionDurationChange_decorators;
+    let _onColumnWidthChange_decorators;
+    let _onRowHeightChange_decorators;
+    let _onColumnsChange_decorators;
+    let _onRowsChange_decorators;
+    let _onOriginLeftChange_decorators;
+    let _onOriginTopChange_decorators;
+    let _onResizeChange_decorators;
+    let _onDraggableChange_decorators;
+    let _emitLayoutComplete_decorators;
+    let _emitDragItemPositioned_decorators;
+    let _template_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.gap = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _gap_initializers, '1rem'));
+            this.columnWidth = (__runInitializers(this, _gap_extraInitializers), __runInitializers(this, _columnWidth_initializers, 80));
+            this.rowHeight = (__runInitializers(this, _columnWidth_extraInitializers), __runInitializers(this, _rowHeight_initializers, 80));
+            this.columns = (__runInitializers(this, _rowHeight_extraInitializers), __runInitializers(this, _columns_initializers, 0));
+            this.rows = (__runInitializers(this, _columns_extraInitializers), __runInitializers(this, _rows_initializers, 0));
+            this.originLeft = (__runInitializers(this, _rows_extraInitializers), __runInitializers(this, _originLeft_initializers, true));
+            this.originTop = (__runInitializers(this, _originLeft_extraInitializers), __runInitializers(this, _originTop_initializers, true));
+            this.transitionDuration = (__runInitializers(this, _originTop_extraInitializers), __runInitializers(this, _transitionDuration_initializers, '0.4s'));
+            this.stagger = (__runInitializers(this, _transitionDuration_extraInitializers), __runInitializers(this, _stagger_initializers, 0));
+            this.resize = (__runInitializers(this, _stagger_extraInitializers), __runInitializers(this, _resize_initializers, true));
+            this.draggable = (__runInitializers(this, _resize_extraInitializers), __runInitializers(this, _draggable_initializers, false));
+            this.dragThrottle = (__runInitializers(this, _draggable_extraInitializers), __runInitializers(this, _dragThrottle_initializers, 120));
+            this.container = (__runInitializers(this, _dragThrottle_extraInitializers), __runInitializers(this, _container_initializers, void 0));
+            this.slotElement = (__runInitializers(this, _container_extraInitializers), __runInitializers(this, _slotElement_initializers, void 0));
+            this.dropPlaceholder = (__runInitializers(this, _slotElement_extraInitializers), __runInitializers(this, _dropPlaceholder_initializers, void 0));
+            this.items = (__runInitializers(this, _dropPlaceholder_extraInitializers), []);
+            this.resizeObserver = null;
+            this.layoutScheduled = false;
+            this.resolvedPositions = new Map();
+            // Drag state
+            this.dragItem = null;
+            this.dragItemCol = 0;
+            this.dragItemRow = 0;
+            this.dragOffsetX = 0;
+            this.dragOffsetY = 0;
+            this.dragTime = 0;
+            this.dragTimeoutId = null;
+            this.boundPointerMove = null;
+            this.boundPointerUp = null;
+            this.pendingLayout = null;
+            this.lastObservedWidth = 0;
+            this.lastObservedHeight = 0;
+            this.onPointerDown = (e) => {
+                if (!this.draggable)
+                    return;
+                if (e.button !== 0)
+                    return;
+                const target = e.target;
+                const item = this.items.find(el => el === target || el.contains(target));
+                if (!item)
+                    return;
+                e.preventDefault();
+                this.dragItemStart(item, e);
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _gap_decorators = [property()];
+            _columnWidth_decorators = [property({ type: Number, attribute: 'column-width' })];
+            _rowHeight_decorators = [property({ type: Number, attribute: 'row-height' })];
+            _columns_decorators = [property({ type: Number })];
+            _rows_decorators = [property({ type: Number })];
+            _originLeft_decorators = [property({ type: Boolean, attribute: 'origin-left' })];
+            _originTop_decorators = [property({ type: Boolean, attribute: 'origin-top' })];
+            _transitionDuration_decorators = [property({ attribute: 'transition-duration' })];
+            _stagger_decorators = [property({ type: Number })];
+            _resize_decorators = [property({ type: Boolean })];
+            _draggable_decorators = [property({ type: Boolean })];
+            _dragThrottle_decorators = [property({ type: Number, attribute: 'drag-throttle' })];
+            _container_decorators = [query('.grid')];
+            _slotElement_decorators = [query('slot')];
+            _dropPlaceholder_decorators = [query('.grid-drop-placeholder')];
+            _onReady_decorators = [ready()];
+            _onDispose_decorators = [dispose()];
+            _onGapChange_decorators = [watch('gap')];
+            _onTransitionDurationChange_decorators = [watch('transitionDuration')];
+            _onColumnWidthChange_decorators = [watch('columnWidth')];
+            _onRowHeightChange_decorators = [watch('rowHeight')];
+            _onColumnsChange_decorators = [watch('columns')];
+            _onRowsChange_decorators = [watch('rows')];
+            _onOriginLeftChange_decorators = [watch('originLeft')];
+            _onOriginTopChange_decorators = [watch('originTop')];
+            _onResizeChange_decorators = [watch('resize')];
+            _onDraggableChange_decorators = [watch('draggable')];
+            _emitLayoutComplete_decorators = [dispatch('grid-layout-complete', { bubbles: true, composed: true })];
+            _emitDragItemPositioned_decorators = [dispatch('grid-drag-item-positioned', { bubbles: true, composed: true })];
+            _template_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDispose_decorators, { kind: "method", name: "onDispose", static: false, private: false, access: { has: obj => "onDispose" in obj, get: obj => obj.onDispose }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onGapChange_decorators, { kind: "method", name: "onGapChange", static: false, private: false, access: { has: obj => "onGapChange" in obj, get: obj => obj.onGapChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onTransitionDurationChange_decorators, { kind: "method", name: "onTransitionDurationChange", static: false, private: false, access: { has: obj => "onTransitionDurationChange" in obj, get: obj => obj.onTransitionDurationChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onColumnWidthChange_decorators, { kind: "method", name: "onColumnWidthChange", static: false, private: false, access: { has: obj => "onColumnWidthChange" in obj, get: obj => obj.onColumnWidthChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onRowHeightChange_decorators, { kind: "method", name: "onRowHeightChange", static: false, private: false, access: { has: obj => "onRowHeightChange" in obj, get: obj => obj.onRowHeightChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onColumnsChange_decorators, { kind: "method", name: "onColumnsChange", static: false, private: false, access: { has: obj => "onColumnsChange" in obj, get: obj => obj.onColumnsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onRowsChange_decorators, { kind: "method", name: "onRowsChange", static: false, private: false, access: { has: obj => "onRowsChange" in obj, get: obj => obj.onRowsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onOriginLeftChange_decorators, { kind: "method", name: "onOriginLeftChange", static: false, private: false, access: { has: obj => "onOriginLeftChange" in obj, get: obj => obj.onOriginLeftChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onOriginTopChange_decorators, { kind: "method", name: "onOriginTopChange", static: false, private: false, access: { has: obj => "onOriginTopChange" in obj, get: obj => obj.onOriginTopChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onResizeChange_decorators, { kind: "method", name: "onResizeChange", static: false, private: false, access: { has: obj => "onResizeChange" in obj, get: obj => obj.onResizeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDraggableChange_decorators, { kind: "method", name: "onDraggableChange", static: false, private: false, access: { has: obj => "onDraggableChange" in obj, get: obj => obj.onDraggableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitLayoutComplete_decorators, { kind: "method", name: "emitLayoutComplete", static: false, private: false, access: { has: obj => "emitLayoutComplete" in obj, get: obj => obj.emitLayoutComplete }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitDragItemPositioned_decorators, { kind: "method", name: "emitDragItemPositioned", static: false, private: false, access: { has: obj => "emitDragItemPositioned" in obj, get: obj => obj.emitDragItemPositioned }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _template_decorators, { kind: "method", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _gap_decorators, { kind: "field", name: "gap", static: false, private: false, access: { has: obj => "gap" in obj, get: obj => obj.gap, set: (obj, value) => { obj.gap = value; } }, metadata: _metadata }, _gap_initializers, _gap_extraInitializers);
+            __esDecorate(null, null, _columnWidth_decorators, { kind: "field", name: "columnWidth", static: false, private: false, access: { has: obj => "columnWidth" in obj, get: obj => obj.columnWidth, set: (obj, value) => { obj.columnWidth = value; } }, metadata: _metadata }, _columnWidth_initializers, _columnWidth_extraInitializers);
+            __esDecorate(null, null, _rowHeight_decorators, { kind: "field", name: "rowHeight", static: false, private: false, access: { has: obj => "rowHeight" in obj, get: obj => obj.rowHeight, set: (obj, value) => { obj.rowHeight = value; } }, metadata: _metadata }, _rowHeight_initializers, _rowHeight_extraInitializers);
+            __esDecorate(null, null, _columns_decorators, { kind: "field", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_extraInitializers);
+            __esDecorate(null, null, _rows_decorators, { kind: "field", name: "rows", static: false, private: false, access: { has: obj => "rows" in obj, get: obj => obj.rows, set: (obj, value) => { obj.rows = value; } }, metadata: _metadata }, _rows_initializers, _rows_extraInitializers);
+            __esDecorate(null, null, _originLeft_decorators, { kind: "field", name: "originLeft", static: false, private: false, access: { has: obj => "originLeft" in obj, get: obj => obj.originLeft, set: (obj, value) => { obj.originLeft = value; } }, metadata: _metadata }, _originLeft_initializers, _originLeft_extraInitializers);
+            __esDecorate(null, null, _originTop_decorators, { kind: "field", name: "originTop", static: false, private: false, access: { has: obj => "originTop" in obj, get: obj => obj.originTop, set: (obj, value) => { obj.originTop = value; } }, metadata: _metadata }, _originTop_initializers, _originTop_extraInitializers);
+            __esDecorate(null, null, _transitionDuration_decorators, { kind: "field", name: "transitionDuration", static: false, private: false, access: { has: obj => "transitionDuration" in obj, get: obj => obj.transitionDuration, set: (obj, value) => { obj.transitionDuration = value; } }, metadata: _metadata }, _transitionDuration_initializers, _transitionDuration_extraInitializers);
+            __esDecorate(null, null, _stagger_decorators, { kind: "field", name: "stagger", static: false, private: false, access: { has: obj => "stagger" in obj, get: obj => obj.stagger, set: (obj, value) => { obj.stagger = value; } }, metadata: _metadata }, _stagger_initializers, _stagger_extraInitializers);
+            __esDecorate(null, null, _resize_decorators, { kind: "field", name: "resize", static: false, private: false, access: { has: obj => "resize" in obj, get: obj => obj.resize, set: (obj, value) => { obj.resize = value; } }, metadata: _metadata }, _resize_initializers, _resize_extraInitializers);
+            __esDecorate(null, null, _draggable_decorators, { kind: "field", name: "draggable", static: false, private: false, access: { has: obj => "draggable" in obj, get: obj => obj.draggable, set: (obj, value) => { obj.draggable = value; } }, metadata: _metadata }, _draggable_initializers, _draggable_extraInitializers);
+            __esDecorate(null, null, _dragThrottle_decorators, { kind: "field", name: "dragThrottle", static: false, private: false, access: { has: obj => "dragThrottle" in obj, get: obj => obj.dragThrottle, set: (obj, value) => { obj.dragThrottle = value; } }, metadata: _metadata }, _dragThrottle_initializers, _dragThrottle_extraInitializers);
+            __esDecorate(null, null, _container_decorators, { kind: "field", name: "container", static: false, private: false, access: { has: obj => "container" in obj, get: obj => obj.container, set: (obj, value) => { obj.container = value; } }, metadata: _metadata }, _container_initializers, _container_extraInitializers);
+            __esDecorate(null, null, _slotElement_decorators, { kind: "field", name: "slotElement", static: false, private: false, access: { has: obj => "slotElement" in obj, get: obj => obj.slotElement, set: (obj, value) => { obj.slotElement = value; } }, metadata: _metadata }, _slotElement_initializers, _slotElement_extraInitializers);
+            __esDecorate(null, null, _dropPlaceholder_decorators, { kind: "field", name: "dropPlaceholder", static: false, private: false, access: { has: obj => "dropPlaceholder" in obj, get: obj => obj.dropPlaceholder, set: (obj, value) => { obj.dropPlaceholder = value; } }, metadata: _metadata }, _dropPlaceholder_initializers, _dropPlaceholder_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        onReady() {
+            this.collectItems();
+            this.setupResizeObserver();
+            if (this.draggable) {
+                this.setAttribute('draggable', '');
+                this.setupDragListeners();
+            }
+            this.performLayout();
+            setTimeout(() => this.setAttribute('ready', ''), 10);
+        }
+        onDispose() {
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.teardownDragListeners();
+        }
+        // -- Property watchers ----------------------------------------------------
+        onGapChange() {
+            this.style.setProperty('--grid-gap', this.gap);
+            this.scheduleLayout();
+        }
+        onTransitionDurationChange() {
+            this.style.setProperty('--grid-transition-duration', this.transitionDuration);
+        }
+        onColumnWidthChange() {
+            this.scheduleLayout();
+        }
+        onRowHeightChange() {
+            this.scheduleLayout();
+        }
+        onColumnsChange() {
+            this.scheduleLayout();
+        }
+        onRowsChange() {
+            this.scheduleLayout();
+        }
+        onOriginLeftChange() {
+            this.scheduleLayout();
+        }
+        onOriginTopChange() {
+            this.scheduleLayout();
+        }
+        onResizeChange() {
+            if (this.resize) {
+                this.setupResizeObserver();
+            }
+            else {
+                this.resizeObserver?.disconnect();
+                this.resizeObserver = null;
+            }
+        }
+        onDraggableChange() {
+            if (this.draggable) {
+                this.setAttribute('draggable', '');
+                this.setupDragListeners();
+            }
+            else {
+                this.removeAttribute('draggable');
+                this.teardownDragListeners();
+            }
+        }
+        // -- Events ---------------------------------------------------------------
+        emitLayoutComplete() {
+            return { items: [...this.items] };
+        }
+        emitDragItemPositioned(item, col, row) {
+            return { item, col, row };
+        }
+        // -- Public API -----------------------------------------------------------
+        layout() {
+            this.performLayout();
+        }
+        fit(element, col, row) {
+            if (!this.items.includes(element))
+                return;
+            if (col !== undefined && row !== undefined) {
+                element.setAttribute('grid-col', String(col));
+                element.setAttribute('grid-row', String(row));
+            }
+            this.performLayout();
+        }
+        reloadItems() {
+            this.collectItems();
+            this.scheduleLayout();
+        }
+        getItemElements() {
+            return [...this.items];
+        }
+        getLayout() {
+            const layout = {};
+            let order = 0;
+            for (const item of this.items) {
+                const name = item.getAttribute('name');
+                if (!name)
+                    continue;
+                const resolved = this.resolvedPositions.get(item);
+                const entry = {
+                    col: resolved ? resolved.col : parseInt(item.getAttribute('grid-col') || '0', 10),
+                    row: resolved ? resolved.row : parseInt(item.getAttribute('grid-row') || '0', 10),
+                    colspan: resolved ? resolved.colspan : parseInt(item.getAttribute('grid-colspan') || '1', 10),
+                    rowspan: resolved ? resolved.rowspan : parseInt(item.getAttribute('grid-rowspan') || '1', 10),
+                    order: order++,
+                };
+                if (item.hasAttribute('hidden')) {
+                    entry.hidden = true;
+                }
+                layout[name] = entry;
+            }
+            return layout;
+        }
+        setLayout(layout) {
+            this.pendingLayout = layout;
+            this.applyPendingLayout();
+            this.performLayout();
+        }
+        applyPendingLayout() {
+            if (!this.pendingLayout)
+                return;
+            const layout = this.pendingLayout;
+            const entries = Object.entries(layout).sort((a, b) => a[1].order - b[1].order);
+            const namedItems = new Map();
+            const unnamed = [];
+            for (const item of this.items) {
+                const name = item.getAttribute('name');
+                if (name) {
+                    namedItems.set(name, item);
+                }
+                else {
+                    unnamed.push(item);
+                }
+            }
+            const reordered = [];
+            for (const [name, entry] of entries) {
+                const item = namedItems.get(name);
+                if (!item)
+                    continue;
+                namedItems.delete(name);
+                // Apply grid attributes from layout
+                item.setAttribute('grid-col', String(entry.col));
+                item.setAttribute('grid-row', String(entry.row));
+                if (entry.colspan != null)
+                    item.setAttribute('grid-colspan', String(entry.colspan));
+                if (entry.rowspan != null)
+                    item.setAttribute('grid-rowspan', String(entry.rowspan));
+                if (entry.hidden) {
+                    item.setAttribute('hidden', '');
+                }
+                else {
+                    item.removeAttribute('hidden');
+                }
+                reordered.push(item);
+            }
+            for (const item of namedItems.values()) {
+                item.removeAttribute('hidden');
+                reordered.push(item);
+            }
+            reordered.push(...unnamed);
+            for (const item of reordered) {
+                this.appendChild(item);
+            }
+            this.items = reordered;
+        }
+        // -- Template & Styles ----------------------------------------------------
+        template() {
+            return html `
+      <div class="grid" part="base" role="list">
+        <slot @slotchange="${() => this.handleSlotChange()}"></slot>
+        <div class="grid-drop-placeholder"></div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        // -- Private helpers ------------------------------------------------------
+        handleSlotChange() {
+            this.collectItems();
+            if (this.pendingLayout) {
+                this.applyPendingLayout();
+            }
+            this.scheduleLayout();
+        }
+        collectItems() {
+            if (!this.slotElement)
+                return;
+            this.items = this.slotElement.assignedElements({ flatten: true })
+                .filter(el => el instanceof HTMLElement);
+        }
+        setupResizeObserver() {
+            if (!this.resize)
+                return;
+            if (this.resizeObserver)
+                return;
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (!entry)
+                    return;
+                const { width, height } = entry.contentRect;
+                // Only relayout if the host element size actually changed (not from our own container sizing)
+                if (Math.abs(width - this.lastObservedWidth) > 0.5 || Math.abs(height - this.lastObservedHeight) > 0.5) {
+                    this.lastObservedWidth = width;
+                    this.lastObservedHeight = height;
+                    this.scheduleLayout();
+                }
+            });
+            this.resizeObserver.observe(this);
+        }
+        scheduleLayout() {
+            if (this.layoutScheduled)
+                return;
+            this.layoutScheduled = true;
+            requestAnimationFrame(() => {
+                this.layoutScheduled = false;
+                // Don't run scheduled layouts during active drag — it would fight with free drag positioning
+                if (this.dragItem)
+                    return;
+                this.performLayout();
+            });
+        }
+        getGapPixels() {
+            const gap = this.gap;
+            if (gap.endsWith('px')) {
+                const val = parseFloat(gap);
+                if (!isNaN(val))
+                    return val;
+            }
+            if (gap.endsWith('rem')) {
+                const val = parseFloat(gap);
+                if (!isNaN(val)) {
+                    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+                    return val * fontSize;
+                }
+            }
+            const temp = document.createElement('div');
+            temp.style.position = 'absolute';
+            temp.style.visibility = 'hidden';
+            temp.style.width = gap;
+            document.body.appendChild(temp);
+            const px = temp.getBoundingClientRect().width;
+            temp.remove();
+            return px;
+        }
+        performLayout() {
+            const gapPx = this.getGapPixels();
+            const maxCols = this.columns;
+            const occupancy = new OccupancyGrid();
+            const placements = [];
+            for (const item of this.items) {
+                if (item.hasAttribute('hidden'))
+                    continue;
+                placements.push({
+                    item,
+                    col: parseInt(item.getAttribute('grid-col') || '0', 10),
+                    row: parseInt(item.getAttribute('grid-row') || '0', 10),
+                    colspan: parseInt(item.getAttribute('grid-colspan') || '1', 10),
+                    rowspan: parseInt(item.getAttribute('grid-rowspan') || '1', 10),
+                });
+            }
+            // Phase 1b: Sort placements — unmoved items first, moved items last.
+            // This ensures static items are in the occupancy grid before moved items
+            // are processed, so the moved item triggers proper swap logic.
+            const sorted = [...placements].sort((a, b) => {
+                const aPrev = this.resolvedPositions.get(a.item);
+                const bPrev = this.resolvedPositions.get(b.item);
+                const aMoved = aPrev ? (aPrev.col !== a.col || aPrev.row !== a.row ? 1 : 0) : 0;
+                const bMoved = bPrev ? (bPrev.col !== b.col || bPrev.row !== b.row ? 1 : 0) : 0;
+                return aMoved - bMoved;
+            });
+            // Phase 2: Place items with swap-first collision resolution
+            // Unmoved items placed first, moved items last (so they collide with and swap static items).
+            const resolvedMap = new Map();
+            for (const p of sorted) {
+                let { col, row } = p;
+                const { colspan, rowspan, item } = p;
+                // Clamp to column constraint
+                if (maxCols > 0 && col + colspan > maxCols) {
+                    col = Math.max(0, maxCols - colspan);
+                }
+                if (occupancy.isOccupied(col, row, colspan, rowspan)) {
+                    // Try swap: displace all occupants in target area, place incoming item,
+                    // then re-place displaced items at incoming item's previous position (best effort)
+                    const occupants = occupancy.getOccupants(col, row, colspan, rowspan);
+                    const prevPos = this.resolvedPositions.get(item);
+                    const swapCol = prevPos ? prevPos.col : p.col;
+                    const swapRow = prevPos ? prevPos.row : p.row;
+                    const samePosition = swapCol === col && swapRow === row;
+                    let swapped = false;
+                    if (occupants.size > 0 && !samePosition) {
+                        // Collect occupant info and vacate all their cells
+                        const displaced = [];
+                        for (const occ of occupants) {
+                            const occPos = resolvedMap.get(occ);
+                            if (occPos) {
+                                displaced.push({ el: occ, pos: { ...occPos } });
+                                occupancy.vacate(occPos.col, occPos.row, occPos.colspan, occPos.rowspan);
+                            }
+                        }
+                        // Can we place the incoming item at the target now?
+                        if (!occupancy.isOccupied(col, row, colspan, rowspan)) {
+                            // Place incoming item
+                            occupancy.occupy(col, row, colspan, rowspan, item);
+                            resolvedMap.set(item, { col, row, colspan, rowspan });
+                            // Re-place displaced items: best effort at swap position, fallback push-right-then-down
+                            for (const d of displaced) {
+                                const { colspan: dc, rowspan: dr } = d.pos;
+                                // Try the swap position (incoming item's previous location)
+                                if (!occupancy.isOccupied(swapCol, swapRow, dc, dr)) {
+                                    occupancy.occupy(swapCol, swapRow, dc, dr, d.el);
+                                    resolvedMap.set(d.el, { ...d.pos, col: swapCol, row: swapRow });
+                                }
+                                else {
+                                    // Push-right-then-down from swap position
+                                    const free = occupancy.findNextFree(swapCol, swapRow, dc, dr, maxCols);
+                                    occupancy.occupy(free.col, free.row, dc, dr, d.el);
+                                    resolvedMap.set(d.el, { ...d.pos, col: free.col, row: free.row });
+                                }
+                            }
+                            swapped = true;
+                        }
+                        else {
+                            // Can't place — restore all occupants
+                            for (const d of displaced) {
+                                occupancy.occupy(d.pos.col, d.pos.row, d.pos.colspan, d.pos.rowspan, d.el);
+                            }
+                        }
+                    }
+                    if (swapped)
+                        continue;
+                    // Fall back: push-right-then-down
+                    const free = occupancy.findNextFree(col, row, colspan, rowspan, maxCols);
+                    col = free.col;
+                    row = free.row;
+                }
+                occupancy.occupy(col, row, colspan, rowspan, item);
+                resolvedMap.set(item, { col, row, colspan, rowspan });
+            }
+            // Phase 2b: Sync grid attributes so displaced items don't snap back on next layout
+            for (const p of placements) {
+                const resolved = resolvedMap.get(p.item);
+                if (!resolved)
+                    continue;
+                if (resolved.col !== p.col || resolved.row !== p.row) {
+                    p.item.setAttribute('grid-col', String(resolved.col));
+                    p.item.setAttribute('grid-row', String(resolved.row));
+                }
+            }
+            // Phase 3: Apply positions to DOM
+            let maxCol = 0;
+            let maxRow = 0;
+            let staggerIndex = 0;
+            this.resolvedPositions.clear();
+            for (const p of placements) {
+                const resolved = resolvedMap.get(p.item);
+                if (!resolved)
+                    continue;
+                const { col, row, colspan, rowspan } = resolved;
+                let x = col * (this.columnWidth + gapPx);
+                let y = row * (this.rowHeight + gapPx);
+                const itemWidth = colspan * this.columnWidth + (colspan - 1) * gapPx;
+                const itemHeight = rowspan * this.rowHeight + (rowspan - 1) * gapPx;
+                p.item.style.width = `${itemWidth}px`;
+                p.item.style.height = `${itemHeight}px`;
+                if (!this.originLeft) {
+                    x = this.clientWidth - x - itemWidth;
+                }
+                if (!this.originTop) {
+                    y = this.clientHeight - y - itemHeight;
+                }
+                this.positionItem(p.item, x, y, this.stagger > 0 ? staggerIndex * this.stagger : 0);
+                this.resolvedPositions.set(p.item, { col, row, colspan, rowspan });
+                if (col + colspan > maxCol)
+                    maxCol = col + colspan;
+                if (row + rowspan > maxRow)
+                    maxRow = row + rowspan;
+                staggerIndex++;
+            }
+            // Compute container size
+            if (this.container) {
+                const effectiveCols = this.columns > 0 ? this.columns : maxCol;
+                const effectiveRows = this.rows > 0 ? this.rows : maxRow;
+                const containerWidth = effectiveCols > 0
+                    ? effectiveCols * this.columnWidth + (effectiveCols - 1) * gapPx
+                    : 0;
+                const containerHeight = effectiveRows > 0
+                    ? effectiveRows * this.rowHeight + (effectiveRows - 1) * gapPx
+                    : 0;
+                this.container.style.width = containerWidth > 0 ? `${containerWidth}px` : '';
+                this.container.style.height = containerHeight > 0 ? `${containerHeight}px` : '';
+            }
+            this.emitLayoutComplete();
+        }
+        positionItem(item, x, y, delay) {
+            if (delay > 0) {
+                item.style.transitionDelay = `${delay}ms`;
+            }
+            else {
+                item.style.transitionDelay = '';
+            }
+            item.style.transform = `translate(${x}px, ${y}px)`;
+        }
+        // -- Drag implementation --------------------------------------------------
+        setupDragListeners() {
+            this.addEventListener('pointerdown', this.onPointerDown);
+        }
+        teardownDragListeners() {
+            this.removeEventListener('pointerdown', this.onPointerDown);
+            if (this.boundPointerMove) {
+                document.removeEventListener('pointermove', this.boundPointerMove);
+                this.boundPointerMove = null;
+            }
+            if (this.boundPointerUp) {
+                document.removeEventListener('pointerup', this.boundPointerUp);
+                this.boundPointerUp = null;
+            }
+        }
+        dragItemStart(item, e) {
+            const containerRect = this.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            const currentX = itemRect.left - containerRect.left;
+            const currentY = itemRect.top - containerRect.top;
+            this.dragItem = item;
+            this.dragOffsetX = e.clientX - itemRect.left;
+            this.dragOffsetY = e.clientY - itemRect.top;
+            const gapPx = this.getGapPixels();
+            const cellW = this.columnWidth + gapPx;
+            const cellH = this.rowHeight + gapPx;
+            this.dragItemCol = cellW > 0 ? Math.round(currentX / cellW) : 0;
+            this.dragItemRow = cellH > 0 ? Math.round(currentY / cellH) : 0;
+            item.classList.add('grid-dragging');
+            item.style.transition = 'none';
+            // Show placeholder
+            this.showPlaceholder(item);
+            this.boundPointerMove = (ev) => this.onPointerMove(ev);
+            this.boundPointerUp = (ev) => this.onPointerUp(ev);
+            document.addEventListener('pointermove', this.boundPointerMove);
+            document.addEventListener('pointerup', this.boundPointerUp);
+            try {
+                item.setPointerCapture(e.pointerId);
+            }
+            catch (_) { /* synthetic events */ }
+        }
+        onPointerMove(e) {
+            if (!this.dragItem)
+                return;
+            const containerRect = this.getBoundingClientRect();
+            const x = e.clientX - containerRect.left - this.dragOffsetX;
+            const y = e.clientY - containerRect.top - this.dragOffsetY;
+            this.dragItem.style.transform = `translate(${x}px, ${y}px)`;
+            const now = Date.now();
+            const isThrottled = this.dragTime && (now - this.dragTime) < this.dragThrottle;
+            const doSnap = () => {
+                const gapPx = this.getGapPixels();
+                const cellW = this.columnWidth + gapPx;
+                const cellH = this.rowHeight + gapPx;
+                this.dragItemCol = cellW > 0 ? Math.round(x / cellW) : 0;
+                this.dragItemRow = cellH > 0 ? Math.round(y / cellH) : 0;
+                if (this.dragItemCol < 0)
+                    this.dragItemCol = 0;
+                if (this.dragItemRow < 0)
+                    this.dragItemRow = 0;
+                this.positionPlaceholder();
+            };
+            if (isThrottled) {
+                if (this.dragTimeoutId !== null)
+                    clearTimeout(this.dragTimeoutId);
+                this.dragTimeoutId = setTimeout(doSnap, this.dragThrottle);
+            }
+            else {
+                doSnap();
+                this.dragTime = now;
+            }
+        }
+        onPointerUp(_e) {
+            if (!this.dragItem)
+                return;
+            const item = this.dragItem;
+            if (this.boundPointerMove) {
+                document.removeEventListener('pointermove', this.boundPointerMove);
+                this.boundPointerMove = null;
+            }
+            if (this.boundPointerUp) {
+                document.removeEventListener('pointerup', this.boundPointerUp);
+                this.boundPointerUp = null;
+            }
+            if (this.dragTimeoutId !== null) {
+                clearTimeout(this.dragTimeoutId);
+                this.dragTimeoutId = null;
+            }
+            // Update grid attributes to snapped position
+            item.setAttribute('grid-col', String(this.dragItemCol));
+            item.setAttribute('grid-row', String(this.dragItemRow));
+            item.classList.remove('grid-dragging');
+            item.classList.add('grid-positioning');
+            item.style.transition = '';
+            const col = this.dragItemCol;
+            const row = this.dragItemRow;
+            const onTransitionEnd = () => {
+                item.removeEventListener('transitionend', onTransitionEnd);
+                item.classList.remove('grid-positioning');
+                this.hidePlaceholder();
+                this.emitDragItemPositioned(item, col, row);
+            };
+            item.addEventListener('transitionend', onTransitionEnd);
+            this.dragItem = null;
+            this.performLayout();
+            // Safety timeout
+            setTimeout(() => {
+                if (item.classList.contains('grid-positioning')) {
+                    item.classList.remove('grid-positioning');
+                    this.hidePlaceholder();
+                }
+            }, parseFloat(this.transitionDuration) * 1000 + 100);
+        }
+        showPlaceholder(item) {
+            if (!this.dropPlaceholder)
+                return;
+            this.dropPlaceholder.style.width = `${item.offsetWidth}px`;
+            this.dropPlaceholder.style.height = `${item.offsetHeight}px`;
+            this.dropPlaceholder.classList.add('visible');
+            this.positionPlaceholder();
+        }
+        positionPlaceholder() {
+            if (!this.dropPlaceholder)
+                return;
+            const gapPx = this.getGapPixels();
+            const x = this.dragItemCol * (this.columnWidth + gapPx);
+            const y = this.dragItemRow * (this.rowHeight + gapPx);
+            this.dropPlaceholder.style.transform = `translate(${x}px, ${y}px)`;
+        }
+        hidePlaceholder() {
+            if (!this.dropPlaceholder)
+                return;
+            this.dropPlaceholder.classList.remove('visible');
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceGrid };
+//# sourceMappingURL=snice-grid.js.map