snice 4.27.0 → 4.29.0

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

@@ -0,0 +1,970 @@
+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;--binpack-gap:1rem;--binpack-transition-duration:0.4s}.binpack{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(--binpack-transition-duration) ease}::slotted(.binpack-dragging){z-index:100;opacity:.9;transition:none!important;cursor:grabbing!important;user-select:none}::slotted(.binpack-positioning){z-index:99}:host([draggable]) ::slotted(*){cursor:grab}.binpack-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}.binpack-drop-placeholder.visible{display:block}";
+
+// ---------------------------------------------------------------------------
+// Rect helpers
+// ---------------------------------------------------------------------------
+function rectContains(outer, inner) {
+    return (inner.x >= outer.x &&
+        inner.y >= outer.y &&
+        inner.x + inner.width <= outer.x + outer.width &&
+        inner.y + inner.height <= outer.y + outer.height);
+}
+function rectOverlaps(a, b) {
+    return (a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y);
+}
+function canFit(space, item) {
+    // 1px tolerance for sub-pixel rounding errors
+    return space.width >= item.width - 1 && space.height >= item.height - 1;
+}
+/**
+ * After placing `placed` inside `space`, return up to 4 remaining sub-rects
+ * (top, right, bottom, left strips).
+ */
+function getMaximalFreeRects(space, placed) {
+    const rects = [];
+    // Top strip
+    if (placed.y > space.y) {
+        rects.push({ x: space.x, y: space.y, width: space.width, height: placed.y - space.y });
+    }
+    // Bottom strip
+    const placedBottom = placed.y + placed.height;
+    const spaceBottom = space.y + space.height;
+    if (placedBottom < spaceBottom) {
+        rects.push({ x: space.x, y: placedBottom, width: space.width, height: spaceBottom - placedBottom });
+    }
+    // Left strip
+    if (placed.x > space.x) {
+        rects.push({ x: space.x, y: space.y, width: placed.x - space.x, height: space.height });
+    }
+    // Right strip
+    const placedRight = placed.x + placed.width;
+    const spaceRight = space.x + space.width;
+    if (placedRight < spaceRight) {
+        rects.push({ x: placedRight, y: space.y, width: spaceRight - placedRight, height: space.height });
+    }
+    return rects;
+}
+// ---------------------------------------------------------------------------
+// Packer
+// ---------------------------------------------------------------------------
+class Packer {
+    constructor(width, height, horizontal) {
+        this.width = width;
+        this.height = height;
+        this.horizontal = horizontal;
+        this.spaces = [{ x: 0, y: 0, width, height }];
+    }
+    /**
+     * Snap item dimensions to the nearest grid multiple.
+     * If gridSize is set, round UP to the next (gridSize + gutter) multiple.
+     */
+    applyGrid(measurement, gridSize, gutter) {
+        if (!gridSize)
+            return measurement;
+        const gridWithGutter = gridSize + gutter;
+        const remainder = measurement % gridWithGutter;
+        const method = remainder && remainder < 1 ? 'round' : 'ceil';
+        return Math[method](measurement / gridWithGutter) * gridWithGutter;
+    }
+    /**
+     * Find first fitting space and return the placement position.
+     * If columnWidth/rowHeight are provided, snap item SIZE to grid.
+     */
+    pack(itemWidth, itemHeight, columnWidth, rowHeight, gutter) {
+        // Snap item size to grid multiples
+        const w = this.applyGrid(itemWidth, columnWidth, gutter);
+        const h = this.applyGrid(itemHeight, rowHeight, gutter);
+        // Clamp to packer bounds
+        const item = {
+            x: 0, y: 0,
+            width: Math.min(w, this.width),
+            height: Math.min(h, this.height),
+        };
+        for (const space of this.spaces) {
+            if (canFit(space, item)) {
+                item.x = space.x;
+                item.y = space.y;
+                this.placed(item);
+                return { x: space.x, y: space.y };
+            }
+        }
+        return null;
+    }
+    /**
+     * Update free spaces after an item has been placed.
+     */
+    placed(placed) {
+        const newSpaces = [];
+        for (const space of this.spaces) {
+            if (rectOverlaps(space, placed)) {
+                const subs = getMaximalFreeRects(space, placed);
+                newSpaces.push(...subs);
+            }
+            else {
+                newSpaces.push(space);
+            }
+        }
+        this.spaces = newSpaces;
+        this.mergeSortSpaces();
+    }
+    /**
+     * Remove spaces fully contained within larger ones, then sort.
+     */
+    mergeSortSpaces() {
+        // Remove contained spaces
+        this.spaces = this.spaces.filter((space, i, arr) => {
+            for (let j = 0; j < arr.length; j++) {
+                if (i !== j && rectContains(arr[j], space)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        // Sort: vertical = downward-left-to-right, horizontal = rightward-top-to-bottom
+        if (this.horizontal) {
+            this.spaces.sort((a, b) => a.x - b.x || a.y - b.y);
+        }
+        else {
+            this.spaces.sort((a, b) => a.y - b.y || a.x - b.x);
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+let SniceBinpack = (() => {
+    let _classDecorators = [element('snice-binpack')];
+    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 _horizontal_decorators;
+    let _horizontal_initializers = [];
+    let _horizontal_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 _onHorizontalChange_decorators;
+    let _onOriginLeftChange_decorators;
+    let _onOriginTopChange_decorators;
+    let _onResizeChange_decorators;
+    let _onDraggableChange_decorators;
+    let _emitLayoutComplete_decorators;
+    let _emitFitComplete_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, 0));
+            this.rowHeight = (__runInitializers(this, _columnWidth_extraInitializers), __runInitializers(this, _rowHeight_initializers, 0));
+            this.horizontal = (__runInitializers(this, _rowHeight_extraInitializers), __runInitializers(this, _horizontal_initializers, false));
+            this.originLeft = (__runInitializers(this, _horizontal_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.stampedElements = new Set();
+            this.resizeObserver = null;
+            this.itemResizeObserver = null;
+            this.layoutScheduled = false;
+            // Drag state
+            this.dragItemCount = 0;
+            this.shiftTargets = [];
+            this.shiftTargetKeys = [];
+            this.dragItem = null;
+            this.dragItemRect = { x: 0, y: 0, width: 0, height: 0 };
+            this.dragStartX = 0;
+            this.dragStartY = 0;
+            this.dragOffsetX = 0;
+            this.dragOffsetY = 0;
+            this.dragTime = 0;
+            this.dragTimeoutId = null;
+            this.boundPointerMove = null;
+            this.boundPointerUp = null;
+            this.pendingLayout = null;
+            this.onPointerDown = (e) => {
+                if (!this.draggable)
+                    return;
+                // Only handle primary button
+                if (e.button !== 0)
+                    return;
+                // Find the direct child item that was clicked
+                const target = e.target;
+                const item = this.items.find(el => el === target || el.contains(target));
+                if (!item || this.stampedElements.has(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' })];
+            _horizontal_decorators = [property({ type: Boolean })];
+            _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('.binpack')];
+            _slotElement_decorators = [query('slot')];
+            _dropPlaceholder_decorators = [query('.binpack-drop-placeholder')];
+            _onReady_decorators = [ready()];
+            _onDispose_decorators = [dispose()];
+            _onGapChange_decorators = [watch('gap')];
+            _onTransitionDurationChange_decorators = [watch('transitionDuration')];
+            _onColumnWidthChange_decorators = [watch('columnWidth')];
+            _onRowHeightChange_decorators = [watch('rowHeight')];
+            _onHorizontalChange_decorators = [watch('horizontal')];
+            _onOriginLeftChange_decorators = [watch('originLeft')];
+            _onOriginTopChange_decorators = [watch('originTop')];
+            _onResizeChange_decorators = [watch('resize')];
+            _onDraggableChange_decorators = [watch('draggable')];
+            _emitLayoutComplete_decorators = [dispatch('binpack-layout-complete', { bubbles: true, composed: true })];
+            _emitFitComplete_decorators = [dispatch('binpack-fit-complete', { bubbles: true, composed: true })];
+            _emitDragItemPositioned_decorators = [dispatch('binpack-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, _onHorizontalChange_decorators, { kind: "method", name: "onHorizontalChange", static: false, private: false, access: { has: obj => "onHorizontalChange" in obj, get: obj => obj.onHorizontalChange }, 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, _emitFitComplete_decorators, { kind: "method", name: "emitFitComplete", static: false, private: false, access: { has: obj => "emitFitComplete" in obj, get: obj => obj.emitFitComplete }, 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, _horizontal_decorators, { kind: "field", name: "horizontal", static: false, private: false, access: { has: obj => "horizontal" in obj, get: obj => obj.horizontal, set: (obj, value) => { obj.horizontal = value; } }, metadata: _metadata }, _horizontal_initializers, _horizontal_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.layout();
+            setTimeout(() => this.setAttribute('ready', ''), 10);
+        }
+        onDispose() {
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.itemResizeObserver?.disconnect();
+            this.itemResizeObserver = null;
+            this.teardownDragListeners();
+        }
+        // -- Property watchers ----------------------------------------------------
+        onGapChange() {
+            this.style.setProperty('--binpack-gap', this.gap);
+            this.scheduleLayout();
+        }
+        onTransitionDurationChange() {
+            this.style.setProperty('--binpack-transition-duration', this.transitionDuration);
+        }
+        onColumnWidthChange() {
+            this.scheduleLayout();
+        }
+        onRowHeightChange() {
+            this.scheduleLayout();
+        }
+        onHorizontalChange() {
+            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] };
+        }
+        emitFitComplete(item, x, y) {
+            return { item, x, y };
+        }
+        emitDragItemPositioned(item, x, y) {
+            return { item, x, y };
+        }
+        // -- Public API -----------------------------------------------------------
+        layout() {
+            this.performLayout();
+        }
+        fit(element, x, y) {
+            if (!this.items.includes(element))
+                return;
+            if (x !== undefined && y !== undefined) {
+                this.positionItem(element, x, y, 0);
+            }
+            // Re-layout remaining items around the fitted one
+            this.performLayout(element);
+            const rect = element.getBoundingClientRect();
+            const containerRect = this.getBoundingClientRect();
+            const finalX = rect.left - containerRect.left;
+            const finalY = rect.top - containerRect.top;
+            this.emitFitComplete(element, finalX, finalY);
+        }
+        reloadItems() {
+            this.collectItems();
+            this.observeItems();
+            this.scheduleLayout();
+        }
+        stamp(elements) {
+            const els = Array.isArray(elements) ? elements : [elements];
+            els.forEach(el => this.stampedElements.add(el));
+            this.scheduleLayout();
+        }
+        unstamp(elements) {
+            const els = Array.isArray(elements) ? elements : [elements];
+            els.forEach(el => this.stampedElements.delete(el));
+            this.scheduleLayout();
+        }
+        getItemElements() {
+            return [...this.items];
+        }
+        getLayout() {
+            const layout = {};
+            const gapPx = this.getGapPixels();
+            const hasGrid = this.columnWidth > 0 || this.rowHeight > 0;
+            let order = 0;
+            for (const item of this.items) {
+                const name = item.getAttribute('name');
+                if (!name)
+                    continue;
+                const entry = { order: order++ };
+                if (item.hasAttribute('hidden')) {
+                    entry.hidden = true;
+                }
+                if (hasGrid && !entry.hidden) {
+                    const match = item.style.transform.match(/translate\(([^,]+)px,\s*([^)]+)px\)/);
+                    if (match) {
+                        const x = parseFloat(match[1]);
+                        const y = parseFloat(match[2]);
+                        if (this.columnWidth > 0) {
+                            entry.col = Math.round(x / (this.columnWidth + gapPx));
+                        }
+                        if (this.rowHeight > 0) {
+                            entry.row = Math.round(y / (this.rowHeight + gapPx));
+                        }
+                    }
+                }
+                layout[name] = entry;
+            }
+            return layout;
+        }
+        setLayout(layout) {
+            // Store for late-arriving items
+            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);
+                }
+            }
+            // Reorder items: layout-ordered named items first, then unnamed in original order
+            const reordered = [];
+            for (const [name, entry] of entries) {
+                const item = namedItems.get(name);
+                if (!item)
+                    continue;
+                namedItems.delete(name);
+                // Apply hidden state
+                if (entry.hidden) {
+                    item.setAttribute('hidden', '');
+                }
+                else {
+                    item.removeAttribute('hidden');
+                }
+                reordered.push(item);
+            }
+            // Remaining named items not in layout (new items added after save)
+            for (const item of namedItems.values()) {
+                item.removeAttribute('hidden');
+                reordered.push(item);
+            }
+            // Unnamed items at the end
+            reordered.push(...unnamed);
+            // Reorder DOM to match
+            for (const item of reordered) {
+                this.appendChild(item);
+            }
+            this.items = reordered;
+        }
+        // -- Template & Styles ----------------------------------------------------
+        template() {
+            return html `
+      <div class="binpack" part="base" role="list">
+        <slot @slotchange="${() => this.handleSlotChange()}"></slot>
+        <div class="binpack-drop-placeholder"></div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css `${cssContent}`;
+        }
+        // -- Private helpers ------------------------------------------------------
+        handleSlotChange() {
+            this.collectItems();
+            this.observeItems();
+            // If a layout was explicitly set, apply ordering to any new items
+            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(() => {
+                this.scheduleLayout();
+            });
+            this.resizeObserver.observe(this);
+            this.observeItems();
+        }
+        observeItems() {
+            this.itemResizeObserver?.disconnect();
+            this.itemResizeObserver = new ResizeObserver(() => {
+                this.scheduleLayout();
+            });
+            for (const item of this.items) {
+                this.itemResizeObserver.observe(item);
+            }
+        }
+        scheduleLayout() {
+            if (this.layoutScheduled)
+                return;
+            this.layoutScheduled = true;
+            requestAnimationFrame(() => {
+                this.layoutScheduled = false;
+                this.performLayout();
+            });
+        }
+        getGapPixels() {
+            // Parse gap string to pixels
+            const gap = this.gap;
+            // Fast path for common values
+            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;
+                }
+            }
+            // Fallback: measure via DOM
+            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(fittedElement) {
+            const containerWidth = this.clientWidth;
+            const containerHeight = this.clientHeight;
+            const gapPx = this.getGapPixels();
+            // Packer dimensions include one extra gutter so edge items fit.
+            // Vertical: constrained by container width, infinite height.
+            // Horizontal: constrained by container height, infinite width.
+            const packWidth = this.horizontal ? 100000 : containerWidth + gapPx;
+            const packHeight = this.horizontal ? containerHeight + gapPx : 100000;
+            const packer = new Packer(packWidth, packHeight, this.horizontal);
+            // Mark stamped elements as occupied in the packer
+            for (const stamped of this.stampedElements) {
+                let stampRect;
+                if (stamped === this.dragItem) {
+                    // Use the computed drop position, not the cursor position
+                    stampRect = {
+                        x: this.dragItemRect.x,
+                        y: this.dragItemRect.y,
+                        width: this.dragItemRect.width + gapPx,
+                        height: this.dragItemRect.height + gapPx,
+                    };
+                }
+                else {
+                    const rect = stamped.getBoundingClientRect();
+                    const containerRect = this.getBoundingClientRect();
+                    stampRect = {
+                        x: rect.left - containerRect.left,
+                        y: rect.top - containerRect.top,
+                        width: rect.width + gapPx,
+                        height: rect.height + gapPx,
+                    };
+                }
+                packer.placed(stampRect);
+            }
+            // If a fitted element is specified, mark it as placed first
+            if (fittedElement) {
+                const rect = fittedElement.getBoundingClientRect();
+                const containerRect = this.getBoundingClientRect();
+                const fitRect = {
+                    x: rect.left - containerRect.left,
+                    y: rect.top - containerRect.top,
+                    width: rect.width + gapPx,
+                    height: rect.height + gapPx,
+                };
+                packer.placed(fitRect);
+            }
+            let maxExtent = 0;
+            let staggerIndex = 0;
+            for (const item of this.items) {
+                if (this.stampedElements.has(item))
+                    continue;
+                if (item === fittedElement)
+                    continue;
+                if (item.hasAttribute('hidden'))
+                    continue;
+                const itemWidth = item.offsetWidth + gapPx;
+                const itemHeight = item.offsetHeight + gapPx;
+                const position = packer.pack(itemWidth, itemHeight, this.columnWidth, this.rowHeight, gapPx);
+                if (position) {
+                    let x = position.x;
+                    let y = position.y;
+                    // Handle origin direction
+                    if (!this.originLeft) {
+                        x = containerWidth - x - item.offsetWidth;
+                    }
+                    if (!this.originTop) {
+                        y = containerHeight - y - item.offsetHeight;
+                    }
+                    this.positionItem(item, x, y, this.stagger > 0 ? staggerIndex * this.stagger : 0);
+                    const extent = this.horizontal
+                        ? position.x + itemWidth
+                        : position.y + itemHeight;
+                    if (extent > maxExtent)
+                        maxExtent = extent;
+                    staggerIndex++;
+                }
+            }
+            // Set container size, subtracting trailing gutter
+            const containerSize = Math.max(0, maxExtent - gapPx);
+            if (this.container) {
+                if (this.horizontal) {
+                    this.container.style.width = `${containerSize}px`;
+                    this.container.style.height = '';
+                }
+                else {
+                    this.container.style.height = `${containerSize}px`;
+                    this.container.style.width = '';
+                }
+            }
+            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();
+            // Get the item's current position from its transform
+            const itemRect = item.getBoundingClientRect();
+            const currentX = itemRect.left - containerRect.left;
+            const currentY = itemRect.top - containerRect.top;
+            this.dragItem = item;
+            this.dragItemRect = {
+                x: currentX,
+                y: currentY,
+                width: item.offsetWidth,
+                height: item.offsetHeight,
+            };
+            this.dragStartX = currentX;
+            this.dragStartY = currentY;
+            this.dragOffsetX = e.clientX - itemRect.left;
+            this.dragOffsetY = e.clientY - itemRect.top;
+            // Stamp the dragged item so layout flows around it
+            this.stamp(item);
+            this.dragItemCount++;
+            // Add dragging class
+            item.classList.add('binpack-dragging');
+            item.style.transition = 'none';
+            // Show placeholder
+            this.showPlaceholder(item);
+            // Compute shift targets
+            this.updateShiftTargets();
+            // Bind move/up to document
+            this.boundPointerMove = (ev) => this.onPointerMove(ev);
+            this.boundPointerUp = (ev) => this.onPointerUp(ev);
+            document.addEventListener('pointermove', this.boundPointerMove);
+            document.addEventListener('pointerup', this.boundPointerUp);
+            // Capture pointer for reliable tracking
+            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;
+            // Move the dragged item directly (no transition)
+            this.dragItem.style.transform = `translate(${x}px, ${y}px)`;
+            // Throttled layout update
+            const now = Date.now();
+            const isThrottled = this.dragTime && (now - this.dragTime) < this.dragThrottle;
+            const doShift = () => {
+                this.shiftToNearest(x, y);
+                this.positionPlaceholder();
+                this.performLayout();
+            };
+            if (isThrottled) {
+                if (this.dragTimeoutId !== null)
+                    clearTimeout(this.dragTimeoutId);
+                this.dragTimeoutId = setTimeout(doShift, this.dragThrottle);
+            }
+            else {
+                doShift();
+                this.dragTime = now;
+            }
+        }
+        onPointerUp(e) {
+            if (!this.dragItem)
+                return;
+            const item = this.dragItem;
+            // Clean up listeners
+            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;
+            }
+            // Add positioning class, remove dragging
+            item.classList.remove('binpack-dragging');
+            item.classList.add('binpack-positioning');
+            item.style.transition = '';
+            // Animate to final position
+            const finalX = this.dragItemRect.x;
+            const finalY = this.dragItemRect.y;
+            const onTransitionEnd = () => {
+                item.removeEventListener('transitionend', onTransitionEnd);
+                item.classList.remove('binpack-positioning');
+                this.hidePlaceholder();
+                this.emitDragItemPositioned(item, finalX, finalY);
+            };
+            item.addEventListener('transitionend', onTransitionEnd);
+            // Move to final position (will animate because we removed transition: none)
+            item.style.transform = `translate(${finalX}px, ${finalY}px)`;
+            // Final layout
+            this.dragItemCount = Math.max(0, this.dragItemCount - 1);
+            this.unstamp(item);
+            this.dragItem = null;
+            // Sort items by visual position
+            this.sortItemsByPosition();
+            this.performLayout();
+            // Safety: if no transition fires (same position), clean up after timeout
+            setTimeout(() => {
+                if (item.classList.contains('binpack-positioning')) {
+                    item.classList.remove('binpack-positioning');
+                    this.hidePlaceholder();
+                }
+            }, parseFloat(this.transitionDuration) * 1000 + 100);
+        }
+        updateShiftTargets() {
+            if (!this.dragItem)
+                return;
+            const gapPx = this.getGapPixels();
+            const containerWidth = this.clientWidth;
+            const containerHeight = this.clientHeight;
+            const packWidth = this.horizontal ? 100000 : containerWidth + gapPx;
+            const packHeight = this.horizontal ? containerHeight + gapPx : 100000;
+            const shiftPacker = new Packer(packWidth, packHeight, this.horizontal);
+            // Pack stamped elements (except the dragged item, which is stamped but should be excluded)
+            for (const stamped of this.stampedElements) {
+                if (stamped === this.dragItem)
+                    continue;
+                const rect = stamped.getBoundingClientRect();
+                const containerRect = this.getBoundingClientRect();
+                const stampRect = {
+                    x: rect.left - containerRect.left,
+                    y: rect.top - containerRect.top,
+                    width: rect.width + gapPx,
+                    height: rect.height + gapPx,
+                };
+                shiftPacker.placed(stampRect);
+            }
+            this.shiftTargetKeys = [];
+            this.shiftTargets = [];
+            const isHoriz = this.horizontal;
+            const measure = isHoriz ? 'height' : 'width';
+            const segment = isHoriz
+                ? (this.rowHeight ? this.rowHeight + gapPx : 0)
+                : (this.columnWidth ? this.columnWidth + gapPx : 0);
+            const dropItemMeasure = isHoriz ? this.dragItemRect.height + gapPx : this.dragItemRect.width + gapPx;
+            let boundsSize;
+            if (segment) {
+                const segmentSpan = Math.ceil(dropItemMeasure / segment);
+                const segs = Math.floor((shiftPacker[measure] + gapPx) / segment);
+                boundsSize = (segs - segmentSpan) * segment;
+                for (let i = 0; i < segs; i++) {
+                    const ix = isHoriz ? 0 : i * segment;
+                    const iy = isHoriz ? i * segment : 0;
+                    this.addShiftTarget(ix, iy, boundsSize, isHoriz);
+                }
+            }
+            else {
+                boundsSize = (shiftPacker[measure] + gapPx) - dropItemMeasure;
+                this.addShiftTarget(0, 0, boundsSize, isHoriz);
+            }
+            // Pack each non-dragged, non-stamped, non-hidden item and add targets at corners
+            for (const item of this.items) {
+                if (this.stampedElements.has(item))
+                    continue;
+                if (item === this.dragItem)
+                    continue;
+                if (item.hasAttribute('hidden'))
+                    continue;
+                const itemW = item.offsetWidth + gapPx;
+                const itemH = item.offsetHeight + gapPx;
+                const pos = shiftPacker.pack(itemW, itemH, this.columnWidth, this.rowHeight, gapPx);
+                if (pos) {
+                    // Top-left corner
+                    this.addShiftTarget(pos.x, pos.y, boundsSize, isHoriz);
+                    // Bottom-left (vertical) or top-right (horizontal)
+                    const cx = isHoriz ? pos.x + itemW : pos.x;
+                    const cy = isHoriz ? pos.y : pos.y + itemH;
+                    this.addShiftTarget(cx, cy, boundsSize, isHoriz);
+                    if (segment) {
+                        const itemMeasure = isHoriz ? itemH : itemW;
+                        const segSpan = Math.round(itemMeasure / segment);
+                        for (let i = 1; i < segSpan; i++) {
+                            const sx = isHoriz ? cx : pos.x + segment * i;
+                            const sy = isHoriz ? pos.y + segment * i : cy;
+                            this.addShiftTarget(sx, sy, boundsSize, isHoriz);
+                        }
+                    }
+                }
+            }
+        }
+        addShiftTarget(x, y, boundsSize, isHoriz) {
+            const check = isHoriz ? y : x;
+            if (check !== 0 && check > boundsSize)
+                return;
+            const key = `${x},${y}`;
+            if (this.shiftTargetKeys.includes(key))
+                return;
+            this.shiftTargetKeys.push(key);
+            this.shiftTargets.push({ x, y });
+        }
+        shiftToNearest(x, y) {
+            let minDist = Infinity;
+            let nearest = this.shiftTargets[0];
+            for (const target of this.shiftTargets) {
+                const dx = target.x - x;
+                const dy = target.y - y;
+                const dist = dx * dx + dy * dy; // skip sqrt, just compare
+                if (dist < minDist) {
+                    minDist = dist;
+                    nearest = target;
+                }
+            }
+            if (nearest) {
+                this.dragItemRect.x = nearest.x;
+                this.dragItemRect.y = nearest.y;
+            }
+        }
+        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;
+            this.dropPlaceholder.style.transform = `translate(${this.dragItemRect.x}px, ${this.dragItemRect.y}px)`;
+        }
+        hidePlaceholder() {
+            if (!this.dropPlaceholder)
+                return;
+            this.dropPlaceholder.classList.remove('visible');
+        }
+        sortItemsByPosition() {
+            const getPos = (el) => {
+                const match = el.style.transform.match(/translate\(([^,]+)px,\s*([^)]+)px\)/);
+                if (!match)
+                    return { x: 0, y: 0 };
+                return { x: parseFloat(match[1]), y: parseFloat(match[2]) };
+            };
+            if (this.horizontal) {
+                this.items.sort((a, b) => {
+                    const pa = getPos(a);
+                    const pb = getPos(b);
+                    return pa.x - pb.x || pa.y - pb.y;
+                });
+            }
+            else {
+                this.items.sort((a, b) => {
+                    const pa = getPos(a);
+                    const pb = getPos(b);
+                    return pa.y - pb.y || pa.x - pb.x;
+                });
+            }
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceBinpack };
+//# sourceMappingURL=snice-binpack.js.map