snice 4.28.0 → 4.30.0

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

@@ -0,0 +1,862 @@
+/*!
+ * snice v4.30.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-grid.min.js");}
+var SniceGrid = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.property()];
+              _columnWidth_decorators = [snice.property({ type: Number, attribute: 'column-width' })];
+              _rowHeight_decorators = [snice.property({ type: Number, attribute: 'row-height' })];
+              _columns_decorators = [snice.property({ type: Number })];
+              _rows_decorators = [snice.property({ type: Number })];
+              _originLeft_decorators = [snice.property({ type: Boolean, attribute: 'origin-left' })];
+              _originTop_decorators = [snice.property({ type: Boolean, attribute: 'origin-top' })];
+              _transitionDuration_decorators = [snice.property({ attribute: 'transition-duration' })];
+              _stagger_decorators = [snice.property({ type: Number })];
+              _resize_decorators = [snice.property({ type: Boolean })];
+              _draggable_decorators = [snice.property({ type: Boolean })];
+              _dragThrottle_decorators = [snice.property({ type: Number, attribute: 'drag-throttle' })];
+              _container_decorators = [snice.query('.grid')];
+              _slotElement_decorators = [snice.query('slot')];
+              _dropPlaceholder_decorators = [snice.query('.grid-drop-placeholder')];
+              _onReady_decorators = [snice.ready()];
+              _onDispose_decorators = [snice.dispose()];
+              _onGapChange_decorators = [snice.watch('gap')];
+              _onTransitionDurationChange_decorators = [snice.watch('transitionDuration')];
+              _onColumnWidthChange_decorators = [snice.watch('columnWidth')];
+              _onRowHeightChange_decorators = [snice.watch('rowHeight')];
+              _onColumnsChange_decorators = [snice.watch('columns')];
+              _onRowsChange_decorators = [snice.watch('rows')];
+              _onOriginLeftChange_decorators = [snice.watch('originLeft')];
+              _onOriginTopChange_decorators = [snice.watch('originTop')];
+              _onResizeChange_decorators = [snice.watch('resize')];
+              _onDraggableChange_decorators = [snice.watch('draggable')];
+              _emitLayoutComplete_decorators = [snice.dispatch('grid-layout-complete', { bubbles: true, composed: true })];
+              _emitDragItemPositioned_decorators = [snice.dispatch('grid-drag-item-positioned', { bubbles: true, composed: true })];
+              _template_decorators = [snice.render()];
+              _componentStyles_decorators = [snice.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 snice.html `
+      <div class="grid" part="base" role="list">
+        <slot @slotchange="${() => this.handleSlotChange()}"></slot>
+        <div class="grid-drop-placeholder"></div>
+      </div>
+    `;
+          }
+          componentStyles() {
+              return snice.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;
+  })();
+
+  exports.SniceGrid = SniceGrid;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-grid.js.map