@mintplayer/ng-bootstrap 21.28.0 → 21.29.0

package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs

@@ -0,0 +1,1332 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, Component, contentChildren, computed, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { html, unsafeCSS, LitElement, nothing } from 'lit';
+
+/**
+ * One tile inside a `<bs-tile-manager>`.
+ *
+ * The component captures two `TemplateRef`s — one for the header (a child
+ * `<bs-tile-header>`) and one for the body (everything else) — which the
+ * manager projects into named slots on the underlying `<mp-tile-manager>`
+ * web component (`${id}-header` and `${id}-content`).
+ */
+class BsTileComponent {
+    constructor() {
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.position = input.required(...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.disableMove = input(false, ...(ngDevMode ? [{ debugName: "disableMove" }] : /* istanbul ignore next */ []));
+        this.disableResize = input(false, ...(ngDevMode ? [{ debugName: "disableResize" }] : /* istanbul ignore next */ []));
+        this.label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.positionChange = output();
+        this.headerTpl = viewChild.required('headerTpl');
+        this.contentTpl = viewChild.required('contentTpl');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsTileComponent, isStandalone: true, selector: "bs-tile", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, disableMove: { classPropertyName: "disableMove", publicName: "disableMove", isSignal: true, isRequired: false, transformFunction: null }, disableResize: { classPropertyName: "disableResize", publicName: "disableResize", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { positionChange: "positionChange" }, viewQueries: [{ propertyName: "headerTpl", first: true, predicate: ["headerTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #headerTpl>
+      <ng-content select="bs-tile-header"></ng-content>
+    </ng-template>
+    <ng-template #contentTpl>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bs-tile',
+                    template: `
+    <ng-template #headerTpl>
+      <ng-content select="bs-tile-header"></ng-content>
+    </ng-template>
+    <ng-template #contentTpl>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], disableMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableMove", required: false }] }], disableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableResize", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], positionChange: [{ type: i0.Output, args: ["positionChange"] }], headerTpl: [{ type: i0.ViewChild, args: ['headerTpl', { isSignal: true }] }], contentTpl: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
+
+class BsTileManagerComponent {
+    constructor() {
+        this.columnCount = input(null, ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+        this.minColumnWidth = input('200px', ...(ngDevMode ? [{ debugName: "minColumnWidth" }] : /* istanbul ignore next */ []));
+        this.minRowHeight = input('8rem', ...(ngDevMode ? [{ debugName: "minRowHeight" }] : /* istanbul ignore next */ []));
+        this.gap = input('0.5rem', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+        this.dragMode = input('header', ...(ngDevMode ? [{ debugName: "dragMode" }] : /* istanbul ignore next */ []));
+        this.resizeMode = input('hover', ...(ngDevMode ? [{ debugName: "resizeMode" }] : /* istanbul ignore next */ []));
+        this.animateReflow = input(true, ...(ngDevMode ? [{ debugName: "animateReflow" }] : /* istanbul ignore next */ []));
+        this.label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.layoutChange = output();
+        this.gestureBlocked = output();
+        this.tiles = contentChildren(BsTileComponent, ...(ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []));
+        this.managerRef = viewChild('manager', ...(ngDevMode ? [{ debugName: "managerRef" }] : /* istanbul ignore next */ []));
+        this.columnCountAttr = computed(() => {
+            const c = this.columnCount();
+            return c && c > 0 ? String(c) : null;
+        }, ...(ngDevMode ? [{ debugName: "columnCountAttr" }] : /* istanbul ignore next */ []));
+        // Snapshot of Angular tile state, derived from contentChildren signals.
+        // Re-runs whenever any tile's id, position, disableMove, disableResize, or label changes.
+        // contentChildren() can surface a child before Angular has finished binding its
+        // required inputs; reading them then throws NG0950. flatMap-with-try lets us
+        // skip the not-yet-bound entry — the effect re-runs once binding completes.
+        this.tilesSnapshot = computed(() => this.tiles().flatMap((t) => {
+            try {
+                return [{
+                        id: t.id(),
+                        position: t.position(),
+                        disableMove: t.disableMove(),
+                        disableResize: t.disableResize(),
+                        label: t.label(),
+                    }];
+            }
+            catch {
+                return [];
+            }
+        }), ...(ngDevMode ? [{ debugName: "tilesSnapshot" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const snapshot = this.tilesSnapshot();
+            const ref = this.managerRef();
+            if (!ref)
+                return;
+            ref.nativeElement.tiles = snapshot;
+        });
+    }
+    ngAfterViewInit() {
+        // First push happens via the constructor effect once the view is alive.
+    }
+    /** Returns the current layout. Mirrors `BsDockManagerComponent.captureLayout()`. */
+    captureLayout() {
+        const ref = this.managerRef();
+        if (!ref)
+            return [];
+        return Array.from(ref.nativeElement.tiles ?? []).map((t) => ({
+            id: t.id,
+            position: { ...t.position },
+        }));
+    }
+    onLayoutChange(event) {
+        const detail = event.detail;
+        if (detail)
+            this.layoutChange.emit(detail);
+    }
+    onPositionChange(event) {
+        const detail = event.detail;
+        if (!detail)
+            return;
+        const tile = this.tiles().find((t) => t.id() === detail.id);
+        tile?.positionChange.emit(detail.position);
+    }
+    onGestureBlocked(event) {
+        const detail = event.detail;
+        if (detail)
+            this.gestureBlocked.emit(detail);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsTileManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsTileManagerComponent, isStandalone: true, selector: "bs-tile-manager", inputs: { columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, minRowHeight: { classPropertyName: "minRowHeight", publicName: "minRowHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, animateReflow: { classPropertyName: "animateReflow", publicName: "animateReflow", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", gestureBlocked: "gestureBlocked" }, queries: [{ propertyName: "tiles", predicate: BsTileComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mp-tile-manager
+      #manager
+      class="bs-tile-manager"
+      [attr.column-count]="columnCountAttr()"
+      [attr.min-column-width]="minColumnWidth()"
+      [attr.min-row-height]="minRowHeight()"
+      [attr.gap]="gap()"
+      [attr.drag-mode]="dragMode()"
+      [attr.resize-mode]="resizeMode()"
+      [attr.animate-reflow]="animateReflow() ? '' : null"
+      [attr.label]="label()"
+      (tilelayoutchange)="onLayoutChange($event)"
+      (tilepositionchange)="onPositionChange($event)"
+      (tilegestureblocked)="onGestureBlocked($event)"
+    >
+      @for (tile of tiles(); track tile.id()) {
+        <div [attr.slot]="tile.id() + '-header'" class="bs-tile-slot">
+          <ng-container *ngTemplateOutlet="tile.headerTpl()"></ng-container>
+        </div>
+        <div [attr.slot]="tile.id() + '-content'" class="bs-tile-slot">
+          <ng-container *ngTemplateOutlet="tile.contentTpl()"></ng-container>
+        </div>
+      }
+    </mp-tile-manager>
+  `, isInline: true, styles: [":host{display:block;width:100%}.bs-tile-manager{display:block;width:100%}.bs-tile-slot{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsTileManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-tile-manager', template: `
+    <mp-tile-manager
+      #manager
+      class="bs-tile-manager"
+      [attr.column-count]="columnCountAttr()"
+      [attr.min-column-width]="minColumnWidth()"
+      [attr.min-row-height]="minRowHeight()"
+      [attr.gap]="gap()"
+      [attr.drag-mode]="dragMode()"
+      [attr.resize-mode]="resizeMode()"
+      [attr.animate-reflow]="animateReflow() ? '' : null"
+      [attr.label]="label()"
+      (tilelayoutchange)="onLayoutChange($event)"
+      (tilepositionchange)="onPositionChange($event)"
+      (tilegestureblocked)="onGestureBlocked($event)"
+    >
+      @for (tile of tiles(); track tile.id()) {
+        <div [attr.slot]="tile.id() + '-header'" class="bs-tile-slot">
+          <ng-container *ngTemplateOutlet="tile.headerTpl()"></ng-container>
+        </div>
+        <div [attr.slot]="tile.id() + '-content'" class="bs-tile-slot">
+          <ng-container *ngTemplateOutlet="tile.contentTpl()"></ng-container>
+        </div>
+      }
+    </mp-tile-manager>
+  `, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}.bs-tile-manager{display:block;width:100%}.bs-tile-slot{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columnCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnCount", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], minRowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRowHeight", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], animateReflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateReflow", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], gestureBlocked: [{ type: i0.Output, args: ["gestureBlocked"] }], tiles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsTileComponent), { isSignal: true }] }], managerRef: [{ type: i0.ViewChild, args: ['manager', { isSignal: true }] }] } });
+
+class BsTileHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsTileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BsTileHeaderComponent, isStandalone: true, selector: "bs-tile-header", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--bs-body-color, inherit);background:linear-gradient(to bottom,rgba(var(--bs-primary-rgb, 13, 110, 253),.1),rgba(var(--bs-primary-rgb, 13, 110, 253),.04));border-bottom:1px solid var(--bs-border-color, #dee2e6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsTileHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-tile-header', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--bs-body-color, inherit);background:linear-gradient(to bottom,rgba(var(--bs-primary-rgb, 13, 110, 253),.1),rgba(var(--bs-primary-rgb, 13, 110, 253),.04));border-bottom:1px solid var(--bs-border-color, #dee2e6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}\n"] }]
+        }] });
+
+function rectsOverlap(a, b) {
+    return (a.colStart < b.colStart + b.colSpan &&
+        b.colStart < a.colStart + a.colSpan &&
+        a.rowStart < b.rowStart + b.rowSpan &&
+        b.rowStart < a.rowStart + a.rowSpan);
+}
+
+/**
+ * Vertical-compact packer. The pinned tile's rect is the user's gesture; all
+ * other tiles flow around it (locked tiles stay put; movable tiles get pushed
+ * out of the way and gravity-compacted upward).
+ *
+ * Returns `blocked: true` if the pinned rect overlaps a locked tile or no
+ * valid layout exists; the caller should snap back and not commit.
+ */
+function pack(tiles, pinned, columnCount) {
+    const pinnedTile = tiles.find((t) => t.id === pinned.id);
+    if (!pinnedTile) {
+        throw new Error(`pack: pinned tile "${pinned.id}" is not in the tiles array`);
+    }
+    const pinnedPlacement = { id: pinned.id, position: { ...pinned.rect } };
+    const lockedPlacements = tiles
+        .filter((t) => t.locked && t.id !== pinned.id)
+        .map((t) => ({ id: t.id, position: { ...t.position } }));
+    const lockedOverlap = lockedPlacements.some((l) => rectsOverlap(l.position, pinnedPlacement.position));
+    if (lockedOverlap) {
+        return { layout: snapshotFromInput(tiles), blocked: true };
+    }
+    const fixed = [pinnedPlacement, ...lockedPlacements];
+    const movables = tiles
+        .filter((t) => !t.locked && t.id !== pinned.id)
+        .slice()
+        .sort((a, b) => {
+        const dRow = a.position.rowStart - b.position.rowStart;
+        return dRow !== 0 ? dRow : a.position.colStart - b.position.colStart;
+    });
+    const placedMovables = movables.reduce((acc, t) => {
+        const all = [...fixed, ...acc];
+        const placed = placeTile(t, all, columnCount);
+        return placed ? [...acc, placed] : acc;
+    }, []);
+    if (placedMovables.length !== movables.length) {
+        return { layout: snapshotFromInput(tiles), blocked: true };
+    }
+    const compacted = compactStable(placedMovables, fixed, columnCount);
+    const placementById = new Map([pinnedPlacement, ...lockedPlacements, ...compacted].map((p) => [p.id, p.position]));
+    // Preserve the input tile order in the output snapshot — keeps layout
+    // identity stable across pack() calls with the same input.
+    const layout = tiles.map((t) => ({
+        id: t.id,
+        position: placementById.get(t.id) ?? { ...t.position },
+    }));
+    return { layout, blocked: false };
+}
+function snapshotFromInput(tiles) {
+    return tiles.map((t) => ({ id: t.id, position: { ...t.position } }));
+}
+function placeTile(tile, obstacles, columnCount) {
+    const { colSpan, rowSpan } = tile.position;
+    if (colSpan > columnCount)
+        return null;
+    const inPlaceFits = !obstacles.some((o) => rectsOverlap(tile.position, o.position));
+    if (inPlaceFits) {
+        return { id: tile.id, position: { ...tile.position } };
+    }
+    const candidate = firstFit({ colSpan, rowSpan }, obstacles, columnCount);
+    return candidate ? { id: tile.id, position: candidate } : null;
+}
+function firstFit(size, obstacles, columnCount) {
+    const lastRow = obstacles.reduce((max, o) => Math.max(max, o.position.rowStart + o.position.rowSpan - 1), 0);
+    // Worst case: stack right after the bottommost obstacle.
+    const rowsToTry = lastRow + size.rowSpan;
+    const cols = columnCount - size.colSpan + 1;
+    if (cols < 1)
+        return null;
+    // Imperative loops here are deliberate — this runs on every pointermove
+    // during a drag (live reflow) and the array-allocation patterns previously
+    // used here generated GC pressure visible as drag jank.
+    for (let rowStart = 1; rowStart <= rowsToTry; rowStart++) {
+        for (let c = 0; c < cols; c++) {
+            const colStart = c + 1;
+            let collides = false;
+            for (let i = 0; i < obstacles.length; i++) {
+                if (rectsOverlap({ rowStart, colStart, colSpan: size.colSpan, rowSpan: size.rowSpan }, obstacles[i].position)) {
+                    collides = true;
+                    break;
+                }
+            }
+            if (!collides) {
+                return { rowStart, colStart, colSpan: size.colSpan, rowSpan: size.rowSpan };
+            }
+        }
+    }
+    return null;
+}
+function compactStable(placements, fixed, columnCount) {
+    return iterate(placements, fixed, columnCount, 10);
+}
+function iterate(placements, fixed, columnCount, iterations) {
+    if (iterations <= 0)
+        return placements;
+    const { result, changed } = compactOnce(placements, fixed, columnCount);
+    return changed ? iterate(result, fixed, columnCount, iterations - 1) : result;
+}
+function compactOnce(placements, fixed, columnCount) {
+    // Process in current visual order: top-to-bottom, then left-to-right.
+    const ordered = placements
+        .slice()
+        .sort((a, b) => {
+        const dRow = a.position.rowStart - b.position.rowStart;
+        return dRow !== 0 ? dRow : a.position.colStart - b.position.colStart;
+    });
+    return ordered.reduce((acc, p) => {
+        const others = [...fixed, ...acc.result.filter((r) => r.id !== p.id)];
+        const slid = slideUp(p.position, others);
+        const changed = slid.rowStart !== p.position.rowStart;
+        return {
+            result: [...acc.result, { id: p.id, position: slid }],
+            changed: acc.changed || changed,
+        };
+    }, { result: [], changed: false });
+}
+function slideUp(pos, others) {
+    if (pos.rowStart <= 1)
+        return pos;
+    // Same hot path as firstFit — keep imperative for GC-pressure reasons.
+    for (let rowStart = 1; rowStart < pos.rowStart; rowStart++) {
+        let collides = false;
+        for (let i = 0; i < others.length; i++) {
+            if (rectsOverlap({ ...pos, rowStart }, others[i].position)) {
+                collides = true;
+                break;
+            }
+        }
+        if (!collides)
+            return { ...pos, rowStart };
+    }
+    return pos;
+}
+
+// AUTO-GENERATED — do not edit by hand.
+// Source: mint-tile-manager.element.html + mint-tile-manager.element.scss
+// Regenerate with the codegen-wc Nx target.
+const template = html `<!-- Tile shells are rendered dynamically by render(). This file exists so the
+     codegen-wc target produces a \`styles\` export from the sibling .scss; the
+     \`template\` export it generates is intentionally unused. -->`;
+const styles = unsafeCSS(`:host {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  contain: layout paint style;
+  --bs-tile-radius: 0.5rem;
+  --bs-tile-bg: var(--bs-body-bg, #fff);
+  --bs-tile-border: var(--bs-border-color, #dee2e6);
+  --bs-tile-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
+  --bs-tile-handle-color: var(--bs-secondary, #6c757d);
+  --bs-tile-blocked-color: var(--bs-danger, #dc3545);
+}
+
+.tile-grid {
+  display: grid;
+  grid-auto-rows: var(--mp-tile-row-height, 8rem);
+  gap: var(--mp-tile-gap, 0.5rem);
+  width: 100%;
+  position: relative;
+}
+
+.tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bs-tile-bg);
+  border: 1px solid var(--bs-tile-border);
+  border-radius: var(--bs-tile-radius);
+  box-shadow: var(--bs-tile-shadow);
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
+  will-change: transform;
+}
+
+.tile[data-dragging=true] {
+  z-index: 5;
+  cursor: grabbing;
+  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
+  transition: none;
+}
+
+.tile[data-resizing=true] {
+  z-index: 4;
+  transition: none;
+}
+
+.tile[data-blocked=true] {
+  outline: 2px solid var(--bs-tile-blocked-color);
+  outline-offset: -2px;
+  animation: tile-shake 200ms ease-in-out;
+}
+
+@keyframes tile-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-3px);
+  }
+  75% {
+    transform: translateX(3px);
+  }
+}
+.tile[data-pressing=true] {
+  filter: brightness(0.96);
+  transition: filter 100ms ease-out;
+}
+
+.tile__header-shell {
+  flex: 0 0 auto;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  cursor: grab;
+}
+
+.tile[data-drag-mode=off] .tile__header-shell,
+.tile[data-locked-move=true] .tile__header-shell {
+  cursor: default;
+}
+
+.tile__content-shell {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.tile__resize-side,
+.tile__resize-bottom,
+.tile__resize-corner {
+  position: absolute;
+  z-index: 2;
+  background: transparent;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+
+.tile:hover .tile__resize-side,
+.tile:hover .tile__resize-bottom,
+.tile:hover .tile__resize-corner,
+:host([resize-mode=always]) .tile__resize-side,
+:host([resize-mode=always]) .tile__resize-bottom,
+:host([resize-mode=always]) .tile__resize-corner {
+  opacity: 1;
+}
+
+@media (pointer: coarse) {
+  .tile__resize-side,
+  .tile__resize-bottom,
+  .tile__resize-corner {
+    opacity: 1;
+  }
+}
+.tile__resize-side {
+  right: -2px;
+  top: 25%;
+  bottom: 25%;
+  width: 6px;
+  cursor: ew-resize;
+}
+
+.tile__resize-bottom {
+  left: 25%;
+  right: 25%;
+  bottom: -2px;
+  height: 6px;
+  cursor: ns-resize;
+}
+
+.tile__resize-corner {
+  right: -2px;
+  bottom: -2px;
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+}
+
+.tile__resize-corner::before {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--bs-tile-handle-color);
+  border-bottom: 2px solid var(--bs-tile-handle-color);
+  border-bottom-right-radius: 2px;
+}
+
+:host([resize-mode=off]) .tile__resize-side,
+:host([resize-mode=off]) .tile__resize-bottom,
+:host([resize-mode=off]) .tile__resize-corner {
+  display: none;
+}
+
+.tile[data-locked-resize=true] .tile__resize-side,
+.tile[data-locked-resize=true] .tile__resize-bottom,
+.tile[data-locked-resize=true] .tile__resize-corner {
+  display: none;
+}
+
+.tile-grid__live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tile {
+    transition: none !important;
+  }
+  .tile[data-blocked=true] {
+    animation: none;
+  }
+}
+:host(:focus-visible) {
+  outline: 2px solid var(--bs-primary, #0d6efd);
+  outline-offset: 2px;
+}
+
+.tile:focus-visible {
+  outline: 2px solid var(--bs-primary, #0d6efd);
+  outline-offset: -2px;
+}`);
+
+const TOUCH_LONG_PRESS_MS = 600;
+const TOUCH_LONG_PRESS_SLOP_PX = 10;
+const TOUCH_PRESS_FEEDBACK_DELAY_MS = 150;
+const POINTER_DRAG_THRESHOLD_PX = 5;
+class MintTileManagerElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tiles = [];
+        this.columnCount = null;
+        this.minColumnWidth = '200px';
+        this.minRowHeight = '8rem';
+        this.gap = '0.5rem';
+        this.dragMode = 'header';
+        this.resizeMode = 'hover';
+        this.animateReflow = true;
+        this.label = null;
+        this.gestureState = { kind: 'idle' };
+        this.keyboardState = { kind: 'idle' };
+        // State-tracked redraw triggers (Lit re-renders when these change).
+        this.previewLayout = null;
+        this.gestureKind = 'idle';
+        this.blocked = false;
+        this.effectiveColumnCount = 1;
+        this.liveRegionMessage = '';
+        this.hostResizeObserver = null;
+        this.flipPreviousRects = new Map();
+        // Cached layout metrics. Refreshed lazily in updated()/firstUpdated() and on
+        // ResizeObserver ticks — never from render(), so the per-tile pointer-move
+        // path stays free of getComputedStyle / getBoundingClientRect calls.
+        this.cellMetrics = { width: 0, height: 0, gapX: 0, gapY: 0 };
+        // Bound handlers — created once so add/remove pair correctly.
+        this.onWindowPointerMove = (e) => this.handlePointerMove(e);
+        this.onWindowPointerUp = (e) => this.handlePointerUp(e);
+        this.onWindowPointerCancel = (e) => this.handlePointerCancel(e);
+        this.onWindowKeyDown = (e) => this.handleEscapeKey(e);
+        this.onVisibilityChange = () => {
+            if (document.visibilityState === 'hidden')
+                this.cancelGesture();
+        };
+        // ---------------- Pointer entry points ----------------
+        this.lastPointerPosition = null;
+    }
+    static { this.styles = [styles]; }
+    static get observedAttributes() {
+        return [
+            ...(super.observedAttributes ?? []),
+            'column-count',
+            'min-column-width',
+            'min-row-height',
+            'gap',
+            'drag-mode',
+            'resize-mode',
+            'animate-reflow',
+            'label',
+        ];
+    }
+    static { this.properties = {
+        tiles: { attribute: false },
+        columnCount: { attribute: 'column-count', type: Number },
+        minColumnWidth: { attribute: 'min-column-width', type: String },
+        minRowHeight: { attribute: 'min-row-height', type: String },
+        gap: { attribute: 'gap', type: String },
+        dragMode: { attribute: 'drag-mode', type: String, reflect: true },
+        resizeMode: { attribute: 'resize-mode', type: String, reflect: true },
+        animateReflow: { attribute: 'animate-reflow', type: Boolean },
+        label: { attribute: 'label', type: String },
+        previewLayout: { state: true },
+        gestureKind: { state: true },
+        blocked: { state: true },
+        effectiveColumnCount: { state: true },
+        keyboardMode: { state: true },
+        liveRegionMessage: { state: true },
+    }; }
+    render() {
+        const layoutSource = this.previewLayout ?? this.tiles.map((t) => ({ id: t.id, position: t.position }));
+        const tileById = new Map(this.tiles.map((t) => [t.id, t]));
+        const gridStyle = this.computeGridStyle();
+        // ARIA grid hierarchy is grid > row > gridcell. A single role="row"
+        // wrapper with display: contents lets us satisfy that without disturbing
+        // the CSS Grid placement of the gridcell children.
+        return html `
+      <div class="tile-grid" role="grid" aria-label=${this.label ?? nothing} style=${gridStyle}>
+        <div role="row" style="display: contents;">
+          ${layoutSource.map((entry) => {
+            const tile = tileById.get(entry.id);
+            if (!tile)
+                return nothing;
+            return this.renderTile(tile, entry.position);
+        })}
+        </div>
+      </div>
+      <div class="tile-grid__live-region" aria-live="polite" aria-atomic="true">${this.liveRegionMessage}</div>
+    `;
+    }
+    renderTile(tile, pos) {
+        const isDragging = this.gestureKind === 'drag' && this.activeTileId() === tile.id;
+        const isResizing = this.gestureKind === 'resize' && this.activeTileId() === tile.id;
+        const isBlocked = (isDragging || isResizing) && this.blocked;
+        const isPressing = this.gestureKind === 'arming-touch-drag' && this.activeTileId() === tile.id;
+        const transform = this.computeActiveTransform(tile.id);
+        const style = [
+            `grid-column: ${pos.colStart} / span ${pos.colSpan}`,
+            `grid-row: ${pos.rowStart} / span ${pos.rowSpan}`,
+            transform ? `transform: ${transform}` : '',
+        ]
+            .filter(Boolean)
+            .join('; ');
+        return html `
+      <div
+        class="tile"
+        role="gridcell"
+        tabindex="0"
+        data-tile-id=${tile.id}
+        data-dragging=${isDragging ? 'true' : 'false'}
+        data-resizing=${isResizing ? 'true' : 'false'}
+        data-blocked=${isBlocked ? 'true' : 'false'}
+        data-pressing=${isPressing ? 'true' : 'false'}
+        data-drag-mode=${this.dragMode}
+        data-locked-move=${tile.disableMove ? 'true' : 'false'}
+        data-locked-resize=${tile.disableResize ? 'true' : 'false'}
+        aria-label=${tile.label ?? nothing}
+        style=${style}
+        @pointerdown=${(e) => this.onTilePointerDown(e, tile)}
+        @keydown=${(e) => this.onTileKeyDown(e, tile)}
+      >
+        <div class="tile__header-shell">
+          <slot name=${`${tile.id}-header`}></slot>
+        </div>
+        <div class="tile__content-shell">
+          <slot name=${`${tile.id}-content`}></slot>
+        </div>
+        ${tile.disableResize || this.resizeMode === 'off'
+            ? nothing
+            : html `
+              <div class="tile__resize-side" data-resize="side"
+                   @pointerdown=${(e) => this.onResizeHandlePointerDown(e, tile, 'side')}></div>
+              <div class="tile__resize-bottom" data-resize="bottom"
+                   @pointerdown=${(e) => this.onResizeHandlePointerDown(e, tile, 'bottom')}></div>
+              <div class="tile__resize-corner" data-resize="corner"
+                   @pointerdown=${(e) => this.onResizeHandlePointerDown(e, tile, 'corner')}></div>
+            `}
+      </div>
+    `;
+    }
+    computeGridStyle() {
+        const tracks = this.columnCount && this.columnCount > 0
+            ? `repeat(${this.columnCount}, minmax(0, 1fr))`
+            : `repeat(auto-fit, minmax(${this.minColumnWidth}, 1fr))`;
+        return [
+            `grid-template-columns: ${tracks}`,
+            `--mp-tile-row-height: ${this.minRowHeight}`,
+            `--mp-tile-gap: ${this.gap}`,
+        ].join('; ');
+    }
+    /**
+     * Refresh the cached layout metrics by reading layout / computed-style state
+     * once. Called from firstUpdated, the ResizeObserver tick, and updated()
+     * when an input that affects metrics changes — never from render().
+     */
+    updateLayoutCache() {
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid) {
+            this.effectiveColumnCount =
+                this.columnCount && this.columnCount > 0 ? this.columnCount : 1;
+            return;
+        }
+        const cs = getComputedStyle(grid);
+        if (this.columnCount && this.columnCount > 0) {
+            this.effectiveColumnCount = this.columnCount;
+        }
+        else {
+            const tracks = cs.gridTemplateColumns.split(/\s+/).filter(Boolean);
+            this.effectiveColumnCount = Math.max(1, tracks.length);
+        }
+        const rect = grid.getBoundingClientRect();
+        const cols = this.effectiveColumnCount;
+        const gapX = parseFloat(cs.columnGap) || 0;
+        const gapY = parseFloat(cs.rowGap) || 0;
+        const width = (rect.width - (cols - 1) * gapX) / cols;
+        const height = parseFloat(cs.gridAutoRows) || rect.width / cols;
+        this.cellMetrics = { width, height, gapX, gapY };
+    }
+    computeActiveTransform(id) {
+        const g = this.gestureState;
+        if (g.kind !== 'drag' || g.tileId !== id)
+            return null;
+        const pointer = this.lastPointerPosition;
+        if (!pointer)
+            return null;
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid)
+            return null;
+        // Cached cellMetrics is stale by at most one frame after a resize — fine
+        // for the visual translate. gridRect read here is unavoidable: we need
+        // the live grid origin to convert pointer (viewport coords) into
+        // grid-relative space. One read per render, not one per tile.
+        const gridRect = grid.getBoundingClientRect();
+        const cell = this.cellMetrics;
+        const snapped = g.currentRect;
+        const desiredLeft = pointer.x - gridRect.left - g.pointerOffset.dx;
+        const desiredTop = pointer.y - gridRect.top - g.pointerOffset.dy;
+        const snappedLeft = (snapped.colStart - 1) * (cell.width + cell.gapX);
+        const snappedTop = (snapped.rowStart - 1) * (cell.height + cell.gapY);
+        return `translate(${Math.round(desiredLeft - snappedLeft)}px, ${Math.round(desiredTop - snappedTop)}px)`;
+    }
+    // ---------------- Lifecycle ----------------
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'application');
+        }
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    disconnectedCallback() {
+        this.cancelGesture();
+        this.detachWindowListeners();
+        document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this.hostResizeObserver?.disconnect();
+        this.hostResizeObserver = null;
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        // Seed the layout cache once the shadow DOM is in place. Subsequent
+        // refreshes happen on host resize and on relevant property changes.
+        this.updateLayoutCache();
+        let scheduled = false;
+        this.hostResizeObserver = new ResizeObserver(() => {
+            if (scheduled)
+                return;
+            scheduled = true;
+            // Defer to the next frame so we never write reactive state from inside
+            // the observer's callback — that path produces "ResizeObserver loop
+            // completed with undelivered notifications" warnings.
+            requestAnimationFrame(() => {
+                scheduled = false;
+                this.updateLayoutCache();
+            });
+        });
+        this.hostResizeObserver.observe(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'animate-reflow') {
+            this.animateReflow = !(newValue === null || newValue === 'false' || newValue === '0');
+        }
+    }
+    // ---------------- FLIP animator ----------------
+    willUpdate(_changed) {
+        if (!this.shouldAnimate()) {
+            this.flipPreviousRects.clear();
+            return;
+        }
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid)
+            return;
+        this.flipPreviousRects.clear();
+        grid.querySelectorAll('.tile').forEach((el) => {
+            const id = el.dataset['tileId'];
+            if (id)
+                this.flipPreviousRects.set(id, el.getBoundingClientRect());
+        });
+    }
+    updated(changed) {
+        // Refresh cached layout metrics when an input that determines them changes.
+        // Reading layout in updated() is safe — the new style is already applied.
+        if (changed.has('columnCount') ||
+            changed.has('minColumnWidth') ||
+            changed.has('minRowHeight') ||
+            changed.has('gap')) {
+            this.updateLayoutCache();
+        }
+        if (!this.shouldAnimate() || this.flipPreviousRects.size === 0)
+            return;
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid)
+            return;
+        const activeId = this.activeTileId();
+        grid.querySelectorAll('.tile').forEach((el) => {
+            const id = el.dataset['tileId'];
+            if (!id || id === activeId)
+                return;
+            const prev = this.flipPreviousRects.get(id);
+            if (!prev)
+                return;
+            const next = el.getBoundingClientRect();
+            const dx = prev.left - next.left;
+            const dy = prev.top - next.top;
+            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                return;
+            // Invert: jump back to old position with no transition…
+            const previous = el.style.transition;
+            el.style.transition = 'none';
+            el.style.transform = `translate(${dx}px, ${dy}px)`;
+            // …then play forward on the next frame, restoring the transition.
+            requestAnimationFrame(() => {
+                el.style.transition = previous;
+                el.style.transform = '';
+            });
+        });
+        this.flipPreviousRects.clear();
+    }
+    shouldAnimate() {
+        if (!this.animateReflow)
+            return false;
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return false;
+        return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    onTilePointerDown(event, tile) {
+        if (event.button !== 0 && event.pointerType === 'mouse')
+            return;
+        if (this.gestureState.kind !== 'idle')
+            return;
+        if (this.dragMode === 'off' || tile.disableMove)
+            return;
+        // Resize handles consume their own pointerdown via stopPropagation; if we
+        // got here it's a drag-surface candidate.
+        if (this.dragMode === 'header' || event.pointerType === 'touch') {
+            // Header-only: only proceed if the click originated inside the header
+            // shell. The slotted (light-DOM) target won't find shadow-DOM ancestors
+            // via closest(), so walk the composed path instead.
+            const inHeader = event
+                .composedPath()
+                .some((node) => node instanceof HTMLElement && node.classList?.contains('tile__header-shell'));
+            if (!inHeader)
+                return;
+        }
+        if (event.pointerType === 'touch') {
+            this.armTouchDrag(event, tile);
+        }
+        else {
+            this.armPointerDrag(event, tile);
+        }
+    }
+    onResizeHandlePointerDown(event, tile, mode) {
+        if (event.button !== 0 && event.pointerType === 'mouse')
+            return;
+        if (tile.disableResize || this.resizeMode === 'off')
+            return;
+        if (this.gestureState.kind !== 'idle')
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        this.beginResize(event, tile, mode);
+    }
+    // ---------------- Drag arming ----------------
+    armPointerDrag(event, tile) {
+        // Mouse / pen: arm immediately past the 5 px threshold. We track the
+        // pointer ourselves and convert to a real drag when distance exceeds
+        // POINTER_DRAG_THRESHOLD_PX.
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const onMove = (e) => {
+            if (e.pointerId !== event.pointerId)
+                return;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (Math.hypot(dx, dy) >= POINTER_DRAG_THRESHOLD_PX) {
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onCancel);
+                window.removeEventListener('pointercancel', onCancel);
+                this.beginDrag(e, tile);
+            }
+        };
+        const onCancel = (e) => {
+            if (e.pointerId !== event.pointerId)
+                return;
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onCancel);
+            window.removeEventListener('pointercancel', onCancel);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onCancel);
+        window.addEventListener('pointercancel', onCancel);
+    }
+    armTouchDrag(event, tile) {
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const pointerId = event.pointerId;
+        const pressingTimer = window.setTimeout(() => {
+            // Visual feedback only — gesture not yet armed.
+            if (this.gestureState.kind === 'arming-touch-drag' && this.gestureState.pointerId === pointerId) {
+                // Force a re-render to flip data-pressing.
+                this.requestUpdate();
+            }
+        }, TOUCH_PRESS_FEEDBACK_DELAY_MS);
+        const armTimer = window.setTimeout(() => {
+            if (this.gestureState.kind !== 'arming-touch-drag' || this.gestureState.pointerId !== pointerId)
+                return;
+            this.cleanupTouchArming();
+            try {
+                navigator.vibrate?.(10);
+            }
+            catch {
+                // Silently ignore; vibrate isn't available everywhere.
+            }
+            this.beginDragFromTouchArm(tile, startX, startY, pointerId);
+        }, TOUCH_LONG_PRESS_MS);
+        this.gestureState = {
+            kind: 'arming-touch-drag',
+            pointerId,
+            tileId: tile.id,
+            startX,
+            startY,
+            timer: armTimer,
+            pressingTimer,
+        };
+        this.gestureKind = 'arming-touch-drag';
+        const onMove = (e) => {
+            if (e.pointerId !== pointerId)
+                return;
+            if (this.gestureState.kind !== 'arming-touch-drag')
+                return;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (Math.hypot(dx, dy) > TOUCH_LONG_PRESS_SLOP_PX) {
+                this.cleanupTouchArming();
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onCancel);
+                window.removeEventListener('pointercancel', onCancel);
+            }
+        };
+        const onCancel = (e) => {
+            if (e.pointerId !== pointerId)
+                return;
+            if (this.gestureState.kind === 'arming-touch-drag') {
+                this.cleanupTouchArming();
+            }
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onCancel);
+            window.removeEventListener('pointercancel', onCancel);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onCancel);
+        window.addEventListener('pointercancel', onCancel);
+    }
+    cleanupTouchArming() {
+        if (this.gestureState.kind !== 'arming-touch-drag')
+            return;
+        const { timer, pressingTimer } = this.gestureState;
+        if (timer !== null)
+            window.clearTimeout(timer);
+        if (pressingTimer !== null)
+            window.clearTimeout(pressingTimer);
+        this.gestureState = { kind: 'idle' };
+        this.gestureKind = 'idle';
+        this.requestUpdate();
+    }
+    beginDragFromTouchArm(tile, startX, startY, pointerId) {
+        // Synthesize the same begin call as for mouse, with a fake pointer event.
+        // Refresh the layout cache once at gesture start — guarantees fresh metrics
+        // even if the grid has resized since the last cache tick.
+        this.updateLayoutCache();
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid)
+            return;
+        const cell = this.cellMetrics;
+        const gridRect = grid.getBoundingClientRect();
+        const tileLeft = gridRect.left + (tile.position.colStart - 1) * (cell.width + cell.gapX);
+        const tileTop = gridRect.top + (tile.position.rowStart - 1) * (cell.height + cell.gapY);
+        this.gestureState = {
+            kind: 'drag',
+            pointerId,
+            tileId: tile.id,
+            pointerOffset: { dx: startX - tileLeft, dy: startY - tileTop },
+            currentRect: { ...tile.position },
+            blocked: false,
+        };
+        this.gestureKind = 'drag';
+        this.lastPointerPosition = { x: startX, y: startY };
+        this.attachWindowListeners();
+        this.requestUpdate();
+    }
+    beginDrag(event, tile) {
+        this.updateLayoutCache();
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid)
+            return;
+        const cell = this.cellMetrics;
+        const gridRect = grid.getBoundingClientRect();
+        const tileLeft = gridRect.left + (tile.position.colStart - 1) * (cell.width + cell.gapX);
+        const tileTop = gridRect.top + (tile.position.rowStart - 1) * (cell.height + cell.gapY);
+        this.gestureState = {
+            kind: 'drag',
+            pointerId: event.pointerId,
+            tileId: tile.id,
+            pointerOffset: { dx: event.clientX - tileLeft, dy: event.clientY - tileTop },
+            currentRect: { ...tile.position },
+            blocked: false,
+        };
+        this.gestureKind = 'drag';
+        this.lastPointerPosition = { x: event.clientX, y: event.clientY };
+        this.attachWindowListeners();
+        this.runPackerForCurrentGesture();
+    }
+    beginResize(event, tile, mode) {
+        this.gestureState = {
+            kind: 'resize',
+            pointerId: event.pointerId,
+            tileId: tile.id,
+            mode,
+            startPointer: { x: event.clientX, y: event.clientY },
+            startSpans: { colSpan: tile.position.colSpan, rowSpan: tile.position.rowSpan },
+            currentRect: { ...tile.position },
+            blocked: false,
+        };
+        this.gestureKind = 'resize';
+        this.lastPointerPosition = { x: event.clientX, y: event.clientY };
+        this.attachWindowListeners();
+        this.runPackerForCurrentGesture();
+    }
+    attachWindowListeners() {
+        window.addEventListener('pointermove', this.onWindowPointerMove);
+        window.addEventListener('pointerup', this.onWindowPointerUp);
+        window.addEventListener('pointercancel', this.onWindowPointerCancel);
+        window.addEventListener('keydown', this.onWindowKeyDown);
+    }
+    detachWindowListeners() {
+        window.removeEventListener('pointermove', this.onWindowPointerMove);
+        window.removeEventListener('pointerup', this.onWindowPointerUp);
+        window.removeEventListener('pointercancel', this.onWindowPointerCancel);
+        window.removeEventListener('keydown', this.onWindowKeyDown);
+    }
+    handleEscapeKey(e) {
+        if (e.key === 'Escape' && this.gestureState.kind !== 'idle') {
+            e.preventDefault();
+            this.cancelGesture();
+        }
+    }
+    // ---------------- Pointer move / up / cancel ----------------
+    handlePointerMove(event) {
+        const g = this.gestureState;
+        if (g.kind === 'idle' || g.kind === 'arming-touch-drag')
+            return;
+        if (event.pointerId !== g.pointerId)
+            return;
+        this.lastPointerPosition = { x: event.clientX, y: event.clientY };
+        this.runPackerForCurrentGesture();
+    }
+    handlePointerUp(event) {
+        const g = this.gestureState;
+        if (g.kind === 'idle' || g.kind === 'arming-touch-drag')
+            return;
+        if (event.pointerId !== g.pointerId)
+            return;
+        if (g.blocked) {
+            this.cancelGesture('blocked');
+            return;
+        }
+        this.commitGesture();
+    }
+    handlePointerCancel(event) {
+        const g = this.gestureState;
+        if (g.kind === 'idle')
+            return;
+        if (g.kind !== 'arming-touch-drag' && event.pointerId !== g.pointerId)
+            return;
+        this.cancelGesture();
+    }
+    // ---------------- Packer integration ----------------
+    runPackerForCurrentGesture() {
+        const g = this.gestureState;
+        if (g.kind !== 'drag' && g.kind !== 'resize')
+            return;
+        const tile = this.tiles.find((t) => t.id === g.tileId);
+        if (!tile) {
+            this.cancelGesture();
+            return;
+        }
+        const rect = g.kind === 'drag' ? this.computeDragRect(g, tile) : this.computeResizeRect(g, tile);
+        if (!rect)
+            return;
+        g.currentRect = rect;
+        const cols = this.effectiveColumnCount;
+        const result = pack(this.tiles.map((t) => ({ id: t.id, position: t.position, locked: t.disableMove })), { id: tile.id, rect }, cols);
+        this.previewLayout = result.layout;
+        g.blocked = result.blocked;
+        this.blocked = result.blocked;
+        this.requestUpdate();
+    }
+    computeDragRect(g, tile) {
+        const grid = this.shadowRoot?.querySelector('.tile-grid');
+        if (!grid)
+            return null;
+        const cell = this.cellMetrics;
+        const cols = this.effectiveColumnCount;
+        const pointer = this.lastPointerPosition;
+        if (!pointer)
+            return null;
+        const gridRect = grid.getBoundingClientRect();
+        // Pointer position relative to grid origin, minus the where-on-the-tile offset.
+        const localX = pointer.x - gridRect.left - g.pointerOffset.dx;
+        const localY = pointer.y - gridRect.top - g.pointerOffset.dy;
+        const colStart = Math.round(localX / (cell.width + cell.gapX)) + 1;
+        const rowStart = Math.round(localY / (cell.height + cell.gapY)) + 1;
+        return {
+            colStart: Math.max(1, Math.min(colStart, cols - tile.position.colSpan + 1)),
+            rowStart: Math.max(1, rowStart),
+            colSpan: tile.position.colSpan,
+            rowSpan: tile.position.rowSpan,
+        };
+    }
+    computeResizeRect(g, tile) {
+        const cell = this.cellMetrics;
+        const cols = this.effectiveColumnCount;
+        const pointer = this.lastPointerPosition;
+        if (!pointer)
+            return null;
+        const dx = pointer.x - g.startPointer.x;
+        const dy = pointer.y - g.startPointer.y;
+        const colDelta = Math.round(dx / (cell.width + cell.gapX));
+        const rowDelta = Math.round(dy / (cell.height + cell.gapY));
+        const colSpan = g.mode === 'bottom'
+            ? g.startSpans.colSpan
+            : Math.max(1, Math.min(g.startSpans.colSpan + colDelta, cols - tile.position.colStart + 1));
+        const rowSpan = g.mode === 'side' ? g.startSpans.rowSpan : Math.max(1, g.startSpans.rowSpan + rowDelta);
+        return {
+            colStart: tile.position.colStart,
+            rowStart: tile.position.rowStart,
+            colSpan,
+            rowSpan,
+        };
+    }
+    // ---------------- Commit / cancel ----------------
+    commitGesture() {
+        const g = this.gestureState;
+        if (g.kind !== 'drag' && g.kind !== 'resize')
+            return;
+        const finalLayout = this.previewLayout;
+        if (!finalLayout) {
+            this.cleanupGesture();
+            return;
+        }
+        const previousById = new Map(this.tiles.map((t) => [t.id, t.position]));
+        const newTiles = this.tiles.map((t) => {
+            const placed = finalLayout.find((p) => p.id === t.id);
+            return placed ? { ...t, position: placed.position } : t;
+        });
+        this.tiles = newTiles;
+        // Dispatch per-tile change events.
+        finalLayout.forEach((entry) => {
+            const prev = previousById.get(entry.id);
+            if (!prev || !this.positionsEqual(prev, entry.position)) {
+                this.dispatchEvent(new CustomEvent('tilepositionchange', {
+                    detail: { id: entry.id, position: entry.position },
+                    bubbles: false,
+                    composed: true,
+                }));
+            }
+        });
+        this.dispatchEvent(new CustomEvent('tilelayoutchange', {
+            detail: this.cloneSnapshot(finalLayout),
+            bubbles: false,
+            composed: true,
+        }));
+        const movedTile = finalLayout.find((p) => p.id === g.tileId);
+        if (movedTile) {
+            this.liveRegionMessage =
+                g.kind === 'drag'
+                    ? `Tile moved to row ${movedTile.position.rowStart}, column ${movedTile.position.colStart}`
+                    : `Tile resized to ${movedTile.position.colSpan} columns by ${movedTile.position.rowSpan} rows`;
+        }
+        this.cleanupGesture();
+    }
+    cancelGesture(reason = 'cancel') {
+        const g = this.gestureState;
+        if (reason === 'blocked' && (g.kind === 'drag' || g.kind === 'resize')) {
+            this.dispatchEvent(new CustomEvent('tilegestureblocked', {
+                detail: { id: g.tileId, reason: 'locked-overlap' },
+                bubbles: false,
+                composed: true,
+            }));
+        }
+        this.cleanupGesture();
+    }
+    cleanupGesture() {
+        if (this.gestureState.kind === 'arming-touch-drag')
+            this.cleanupTouchArming();
+        this.detachWindowListeners();
+        this.gestureState = { kind: 'idle' };
+        this.gestureKind = 'idle';
+        this.previewLayout = null;
+        this.blocked = false;
+        this.lastPointerPosition = null;
+        this.requestUpdate();
+    }
+    positionsEqual(a, b) {
+        return (a.colStart === b.colStart &&
+            a.rowStart === b.rowStart &&
+            a.colSpan === b.colSpan &&
+            a.rowSpan === b.rowSpan);
+    }
+    cloneSnapshot(s) {
+        return s.map((p) => ({ id: p.id, position: { ...p.position } }));
+    }
+    activeTileId() {
+        const g = this.gestureState;
+        if (g.kind === 'drag' || g.kind === 'resize' || g.kind === 'arming-touch-drag')
+            return g.tileId;
+        return null;
+    }
+    // ---------------- Public API ----------------
+    /** Read-only snapshot of the current layout. Mirrors `BsDockManagerComponent.captureLayout()`. */
+    captureLayout() {
+        return this.tiles.map((t) => ({ id: t.id, position: { ...t.position } }));
+    }
+    /**
+     * True while a drag or resize is in flight. The Angular wrapper uses this to
+     * avoid clobbering `tiles` mid-gesture. Touch long-press arming does NOT
+     * count — the WC isn't yet owning the layout during the hold.
+     */
+    get isGestureActive() {
+        return this.gestureState.kind === 'drag' || this.gestureState.kind === 'resize';
+    }
+    // ---------------- Keyboard ----------------
+    onTileKeyDown(event, tile) {
+        if (tile.disableMove && tile.disableResize)
+            return;
+        const km = this.keyboardState;
+        if (km.kind === 'idle') {
+            if (event.key === ' ' && !tile.disableMove) {
+                event.preventDefault();
+                this.keyboardState = { kind: 'move', tileId: tile.id };
+                this.liveRegionMessage = 'Move mode enabled. Use arrow keys to move; Enter to commit, Escape to cancel.';
+                return;
+            }
+            return;
+        }
+        if (km.tileId !== tile.id)
+            return;
+        if (event.key === 'Escape' || event.key === 'Enter') {
+            event.preventDefault();
+            this.keyboardState = { kind: 'idle' };
+            this.liveRegionMessage = event.key === 'Enter' ? 'Move committed.' : 'Move cancelled.';
+            return;
+        }
+        if (event.key.startsWith('Arrow')) {
+            event.preventDefault();
+            const isResize = event.shiftKey;
+            this.applyKeyboardStep(tile, event.key, isResize);
+        }
+    }
+    applyKeyboardStep(tile, key, isResize) {
+        const cols = this.effectiveColumnCount;
+        const dx = key === 'ArrowLeft' ? -1 : key === 'ArrowRight' ? 1 : 0;
+        const dy = key === 'ArrowUp' ? -1 : key === 'ArrowDown' ? 1 : 0;
+        const newRect = isResize
+            ? {
+                colStart: tile.position.colStart,
+                rowStart: tile.position.rowStart,
+                colSpan: Math.max(1, Math.min(tile.position.colSpan + dx, cols - tile.position.colStart + 1)),
+                rowSpan: Math.max(1, tile.position.rowSpan + dy),
+            }
+            : {
+                colStart: Math.max(1, Math.min(tile.position.colStart + dx, cols - tile.position.colSpan + 1)),
+                rowStart: Math.max(1, tile.position.rowStart + dy),
+                colSpan: tile.position.colSpan,
+                rowSpan: tile.position.rowSpan,
+            };
+        const result = pack(this.tiles.map((t) => ({ id: t.id, position: t.position, locked: t.disableMove })), { id: tile.id, rect: newRect }, cols);
+        if (result.blocked) {
+            this.liveRegionMessage = 'Move blocked.';
+            return;
+        }
+        const newTiles = this.tiles.map((t) => {
+            const placed = result.layout.find((p) => p.id === t.id);
+            return placed ? { ...t, position: placed.position } : t;
+        });
+        this.tiles = newTiles;
+        this.dispatchEvent(new CustomEvent('tilelayoutchange', {
+            detail: this.cloneSnapshot(result.layout),
+            bubbles: false,
+            composed: true,
+        }));
+        result.layout.forEach((entry) => {
+            this.dispatchEvent(new CustomEvent('tilepositionchange', {
+                detail: { id: entry.id, position: entry.position },
+                bubbles: false,
+                composed: true,
+            }));
+        });
+        this.liveRegionMessage = isResize
+            ? `Tile resized to ${newRect.colSpan} columns by ${newRect.rowSpan} rows`
+            : `Tile moved to row ${newRect.rowStart}, column ${newRect.colStart}`;
+    }
+}
+if (typeof customElements !== 'undefined' && !customElements.get('mp-tile-manager')) {
+    customElements.define('mp-tile-manager', MintTileManagerElement);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BsTileComponent, BsTileHeaderComponent, BsTileManagerComponent, MintTileManagerElement, rectsOverlap };
+//# sourceMappingURL=mintplayer-ng-bootstrap-tile-manager.mjs.map