snice 4.27.0 → 4.29.0

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

@@ -0,0 +1,1037 @@
+/*!
+ * snice v4.29.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-binpack.min.js");}
+var SniceBinpack = (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;--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 = [snice.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 = [snice.property()];
+              _columnWidth_decorators = [snice.property({ type: Number, attribute: 'column-width' })];
+              _rowHeight_decorators = [snice.property({ type: Number, attribute: 'row-height' })];
+              _horizontal_decorators = [snice.property({ type: Boolean })];
+              _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('.binpack')];
+              _slotElement_decorators = [snice.query('slot')];
+              _dropPlaceholder_decorators = [snice.query('.binpack-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')];
+              _onHorizontalChange_decorators = [snice.watch('horizontal')];
+              _onOriginLeftChange_decorators = [snice.watch('originLeft')];
+              _onOriginTopChange_decorators = [snice.watch('originTop')];
+              _onResizeChange_decorators = [snice.watch('resize')];
+              _onDraggableChange_decorators = [snice.watch('draggable')];
+              _emitLayoutComplete_decorators = [snice.dispatch('binpack-layout-complete', { bubbles: true, composed: true })];
+              _emitFitComplete_decorators = [snice.dispatch('binpack-fit-complete', { bubbles: true, composed: true })];
+              _emitDragItemPositioned_decorators = [snice.dispatch('binpack-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, _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 snice.html `
+      <div class="binpack" part="base" role="list">
+        <slot @slotchange="${() => this.handleSlotChange()}"></slot>
+        <div class="binpack-drop-placeholder"></div>
+      </div>
+    `;
+          }
+          componentStyles() {
+              return snice.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;
+  })();
+
+  exports.SniceBinpack = SniceBinpack;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-binpack.js.map