@design.estate/dees-catalog 13.0.1 → 13.0.2

package/ts_web/elements/00group-kanban/kanban.dragcontroller.ts

@@ -0,0 +1,481 @@
+import type { DeesKanban } from './dees-kanban/dees-kanban.js';
+import { DeesKanbanCard } from './dees-kanban-card/dees-kanban-card.js';
+import type { DeesKanbanColumn } from './dees-kanban-column/dees-kanban-column.js';
+import type { IKanbanMove, IKanbanTicket } from './interfaces.js';
+import { sortKanbanTickets } from './kanban.helpers.js';
+import { getOverlayContainer } from '../00overlay.js';
+import { zIndexRegistry } from '../00zindex.js';
+
+export interface IKanbanMotion {
+  move: IKanbanMove;
+  ticket: IKanbanTicket;
+  height: number;
+  placeholder: boolean;
+  dimmed: boolean;
+  saving: boolean;
+}
+
+interface IKanbanGesture {
+  pointerId: number;
+  source: DeesKanbanCard;
+  startX: number;
+  startY: number;
+  x: number;
+  y: number;
+  offsetX: number;
+  offsetY: number;
+  width: number;
+  expanded: boolean;
+  restoreFocus: boolean;
+  phase: 'armed' | 'dragging' | 'landing' | 'pending' | 'settling';
+  motion: IKanbanMotion;
+  overlay?: DeesKanbanCard;
+  settled?: boolean;
+  flight?: Animation;
+  elevation?: Animation;
+  flightRevision: number;
+}
+
+const sameMove = (a: IKanbanMove, b: IKanbanMove): boolean =>
+  a.ticketId === b.ticketId && a.columnId === b.columnId && a.beforeTicketId === b.beforeTicketId;
+
+/** Owns pointer motion and a render-only placement. The board/provider still owns saved data. */
+export class KanbanDragController {
+  private gesture?: IKanbanGesture;
+  private listeners?: AbortController;
+  private frame = 0;
+  private previousFrame = 0;
+  private rendering = false;
+  private scrollParents: HTMLElement[] = [];
+  private scrollSnap = new Map<HTMLElement, string>();
+  private animations = new Map<HTMLElement, Animation>();
+  private timers = new Set<ReturnType<typeof setTimeout>>();
+  private suppressClick?: AbortController;
+  private clickTimer?: ReturnType<typeof setTimeout>;
+  private resizeObserver?: ResizeObserver;
+  private readonly reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
+
+  constructor(private readonly board: DeesKanban, private readonly commit: (move: IKanbanMove) => Promise<boolean>, private readonly canMove: () => boolean) {}
+
+  public get busy(): boolean { return Boolean(this.gesture && this.gesture.phase !== 'armed'); }
+  private easing(name: 'out' | 'spring'): string { return getComputedStyle(this.board).getPropertyValue(`--dees-ease-${name}`).trim(); }
+  private get columns(): DeesKanbanColumn[] { return [...this.board.shadowRoot?.querySelectorAll('dees-kanban-column') ?? []]; }
+
+  public connect(): void { this.board.addEventListener('pointerdown', this.down); }
+
+  /** Host updates can remove/filter the source or revoke its move permission during a gesture. */
+  public sync(): void {
+    const gesture = this.gesture;
+    if (!gesture || gesture.phase === 'armed') return;
+    const visible = this.columns.some(column => column.tickets.some(ticket => ticket.id === gesture.motion.ticket.id));
+    const ticket = this.board.tickets.find(item => item.id === gesture.motion.ticket.id);
+    if (!visible || !this.columns.some(column => column.column?.id === gesture.motion.move.columnId)) {
+      this.fadeAndClear(gesture);
+    } else if (gesture.phase === 'dragging' && (!this.board.provider.moveTicket || ticket?.permissions?.move === false)) {
+      void this.cancel();
+    }
+  }
+
+  private down = (event: PointerEvent): void => {
+    if (this.gesture || !this.canMove() || event.button !== 0 || !event.isPrimary || event.pointerType === 'touch') return;
+    const path = event.composedPath();
+    if (!this.columns.some(column => path.includes(column))) return;
+    const source = path.find(node => node instanceof DeesKanbanCard) as DeesKanbanCard | undefined;
+    if (!source?.ticket || !source.movable || source.moveDisabled || source.pending) return;
+    // Title/body can drag; every other nested control keeps its normal action.
+    if (path.some(node => node instanceof Element && node !== source &&
+      node.matches('a, input, textarea, select, summary, dees-button, button:not(.title), [contenteditable=true]'))) return;
+    const rect = source.getBoundingClientRect();
+    this.gesture = {
+      pointerId: event.pointerId, source, startX: event.clientX, startY: event.clientY,
+      x: event.clientX, y: event.clientY, offsetX: event.clientX - rect.left, offsetY: event.clientY - rect.top,
+      width: rect.width, expanded: Boolean(source.shadowRoot?.querySelector('details')?.open), restoreFocus: false,
+      phase: 'armed', flightRevision: 0,
+      motion: { ticket: source.ticket, move: this.authoritativeMove(source.ticket.id)!, height: rect.height, placeholder: true, dimmed: false, saving: false },
+    };
+    const signal = (this.listeners = new AbortController()).signal;
+    window.addEventListener('pointermove', this.move, { signal, passive: false });
+    window.addEventListener('pointerup', this.up, { signal });
+    window.addEventListener('pointercancel', this.pointerCancel, { signal });
+    this.board.addEventListener('lostpointercapture', this.pointerCancel, { signal });
+    window.addEventListener('keydown', this.key, { signal, capture: true });
+    window.addEventListener('blur', this.blur, { signal });
+    window.addEventListener('resize', this.blur, { signal });
+  };
+
+  private move = (event: PointerEvent): void => {
+    const gesture = this.gesture;
+    if (!gesture || event.pointerId !== gesture.pointerId || !['armed', 'dragging'].includes(gesture.phase)) return;
+    gesture.x = event.clientX; gesture.y = event.clientY;
+    if (gesture.phase === 'armed') {
+      if (Math.hypot(gesture.x - gesture.startX, gesture.y - gesture.startY) < 4) return;
+      void this.lift(gesture);
+    }
+    event.preventDefault();
+    window.getSelection()?.removeAllRanges();
+  };
+
+  private async lift(gesture: IKanbanGesture): Promise<void> {
+    gesture.phase = 'dragging';
+    gesture.restoreFocus = Boolean(gesture.source.shadowRoot?.activeElement);
+    // Capture on the stable board; the source card is replaced by its slot.
+    this.board.setPointerCapture(gesture.pointerId);
+    const overlay = gesture.overlay = new DeesKanbanCard();
+    overlay.dataset.kanbanPreview = '';
+    overlay.ticket = gesture.source.ticket; overlay.epic = gesture.source.epic;
+    overlay.subtasks = gesture.source.subtasks; overlay.columns = gesture.source.columns;
+    overlay.movable = gesture.source.movable;
+    overlay.pointerManaged = true;
+    overlay.inert = true; overlay.setAttribute('aria-hidden', 'true');
+    const styles = getComputedStyle(gesture.source);
+    for (const name of styles) if (name.startsWith('--dees-')) overlay.style.setProperty(name, styles.getPropertyValue(name));
+    const zIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(overlay, zIndex);
+    Object.assign(overlay.style, { position: 'fixed', margin: '0', pointerEvents: 'none', width: `${gesture.width}px`, zIndex: String(zIndex), transformOrigin: 'center' });
+    this.positionPreview(gesture);
+    getOverlayContainer(this.board).append(overlay);
+    this.collectScrollParents();
+    const widths = new Map(this.columns.map(column => [column, column.getBoundingClientRect().width]));
+    this.resizeObserver = new ResizeObserver(entries => {
+      if (entries.some(entry => Math.abs(entry.borderBoxSize[0].inlineSize - widths.get(entry.target as DeesKanbanColumn)!) > .5)) void this.cancel();
+    });
+    for (const column of this.columns) this.resizeObserver.observe(column);
+    await overlay.updateComplete;
+    if (this.gesture !== gesture || gesture.phase !== 'dragging') return;
+    const details = overlay.shadowRoot?.querySelector('details');
+    if (details) details.open = gesture.expanded;
+    const article = overlay.shadowRoot!.querySelector('article')!;
+    const resting = { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor };
+    article.style.borderColor = 'var(--dees-color-border-strong)';
+    article.style.boxShadow = 'var(--dees-shadow-lg)';
+    if (!this.reducedMotion.matches) {
+      overlay.style.transform = 'scale(1.02)';
+      overlay.animate([{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }], { duration: 120, easing: this.easing('out') });
+      gesture.elevation = article.animate([resting, { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor }], { duration: 120, easing: this.easing('out') });
+    }
+    await this.renderMotion();
+    if (this.gesture === gesture && gesture.phase === 'dragging') this.frame = requestAnimationFrame(this.tick);
+  }
+
+  private positionPreview(gesture: IKanbanGesture): void {
+    if (!gesture.overlay) return;
+    gesture.overlay.style.left = `${gesture.x - gesture.offsetX}px`;
+    gesture.overlay.style.top = `${gesture.y - gesture.offsetY}px`;
+  }
+
+  private tick = (time: number): void => {
+    const gesture = this.gesture;
+    if (!gesture || gesture.phase !== 'dragging') return;
+    this.positionPreview(gesture);
+    this.autoScroll(gesture, Math.min(2, (time - (this.previousFrame || time - 16.7)) / 16.7));
+    this.previousFrame = time;
+    if (!this.rendering) {
+      const target = this.targetAt(gesture) ?? this.authoritativeMove(gesture.motion.ticket.id);
+      if (target && !sameMove(target, gesture.motion.move)) {
+        gesture.motion = { ...gesture.motion, move: target };
+        void this.renderMotion();
+      }
+    }
+    this.frame = requestAnimationFrame(this.tick);
+  };
+
+  private targetAt(gesture: IKanbanGesture): IKanbanMove | undefined {
+    const clip = this.visibleRect();
+    if (gesture.x < clip.left - 48 || gesture.x > clip.right + 48 || gesture.y < clip.top - 48 || gesture.y > clip.bottom + 48) return;
+    const centerX = gesture.x - gesture.offsetX + gesture.width / 2;
+    const centerY = gesture.y - gesture.offsetY + gesture.motion.height / 2;
+    const lanes = this.columns.filter(column => {
+      const rect = column.getBoundingClientRect();
+      return rect.right > clip.left && rect.left < clip.right;
+    });
+    let column = lanes.sort((a, b) => {
+      const ar = a.getBoundingClientRect(), br = b.getBoundingClientRect();
+      return Math.abs(centerX - (ar.left + ar.width / 2)) - Math.abs(centerX - (br.left + br.width / 2));
+    })[0];
+    if (!column?.column) return;
+    const currentLane = lanes.find(item => item.column?.id === gesture.motion.move.columnId);
+    if (currentLane && currentLane !== column) {
+      const currentRect = currentLane.getBoundingClientRect(), candidateRect = column.getBoundingClientRect();
+      const currentCenter = currentRect.left + currentRect.width / 2, candidateCenter = candidateRect.left + candidateRect.width / 2;
+      if (Math.abs(centerX - currentCenter) < Math.abs(candidateCenter - currentCenter) / 2 + 12) column = currentLane;
+    }
+    const columnId = column.column?.id;
+    if (!columnId) return;
+    const tickets = sortKanbanTickets(column.tickets).filter(ticket => ticket.id !== gesture.motion.ticket.id);
+    // Virtual positions exclude the slot and FLIP transforms, so opening a gap cannot change the hit test.
+    let top = column.shadowRoot!.querySelector('.stack')!.getBoundingClientRect().top;
+    const currentIndex = gesture.motion.move.columnId === columnId
+      ? tickets.findIndex(ticket => ticket.id === gesture.motion.move.beforeTicketId) : -1;
+    const current = currentIndex < 0 ? tickets.length : currentIndex;
+    let index = tickets.length;
+    for (let i = 0; i < tickets.length; i++) {
+      const node = this.targets(column).find(target => target.dataset.ticketId === tickets[i].id)!;
+      const midpoint = top + node.offsetHeight / 2;
+      const hysteresis = gesture.motion.move.columnId === columnId ? (i < current ? -6 : 6) : 0;
+      if (centerY < midpoint + hysteresis) { index = i; break; }
+      top += node.offsetHeight + 8;
+    }
+    return { ticketId: gesture.motion.ticket.id, columnId, beforeTicketId: tickets[index]?.id };
+  }
+
+  private up = (event: PointerEvent): void => {
+    const gesture = this.gesture;
+    if (!gesture || gesture.pointerId !== event.pointerId || !['armed', 'dragging'].includes(gesture.phase)) return;
+    if (gesture.phase === 'armed') { this.clear(); return; }
+    gesture.x = event.clientX; gesture.y = event.clientY;
+    this.blockClick();
+    const target = this.targetAt(gesture);
+    if (!target) { void this.cancel(); return; }
+    gesture.phase = 'landing';
+    this.endPointer();
+    gesture.motion = { ...gesture.motion, move: target };
+    void this.land(gesture);
+    if (sameMove(target, this.authoritativeMove(target.ticketId)!)) {
+      gesture.settled = true;
+    } else {
+      // Persistence and landing start together. Only commit() can update board.tickets.
+      void this.commit(target).then(saved => this.settle(gesture, saved));
+    }
+  };
+
+  private pointerCancel = (event: PointerEvent): void => {
+    if (event.pointerId === this.gesture?.pointerId && ['armed', 'dragging'].includes(this.gesture.phase)) void this.cancel();
+  };
+  private key = (event: KeyboardEvent): void => {
+    if (event.key !== 'Escape') return;
+    event.preventDefault(); event.stopImmediatePropagation(); void this.cancel();
+  };
+  private blur = (): void => { void this.cancel(); };
+
+  private async cancel(): Promise<void> {
+    const gesture = this.gesture;
+    if (!gesture || !['armed', 'dragging'].includes(gesture.phase)) return;
+    if (gesture.phase === 'armed') { this.clear(); return; }
+    this.blockClick();
+    gesture.phase = 'landing'; gesture.settled = false;
+    this.endPointer();
+    const origin = this.authoritativeMove(gesture.motion.ticket.id);
+    if (!origin) { this.fadeAndClear(gesture); return; }
+    gesture.motion = { ...gesture.motion, move: origin };
+    const column = this.columns.find(item => item.column?.id === origin.columnId);
+    if (gesture.overlay && column) {
+      gesture.overlay.style.width = `${column.getBoundingClientRect().width}px`;
+      gesture.motion.height = gesture.overlay.offsetHeight;
+    }
+    await this.land(gesture);
+  }
+
+  private authoritativeMove(ticketId: string): IKanbanMove | undefined {
+    const ticket = this.board.tickets.find(item => item.id === ticketId);
+    if (!ticket) return;
+    const tickets = sortKanbanTickets(this.columns.find(column => column.column?.id === ticket.columnId)?.tickets ?? []);
+    return { ticketId, columnId: ticket.columnId, beforeTicketId: tickets[tickets.findIndex(item => item.id === ticketId) + 1]?.id };
+  }
+
+  private async land(gesture: IKanbanGesture): Promise<void> {
+    const revision = ++gesture.flightRevision;
+    await this.renderMotion();
+    if (this.gesture !== gesture || gesture.flightRevision !== revision) return;
+    const target = this.allTargets().find(node => node.dataset.ticketId === gesture.motion.ticket.id);
+    const overlay = gesture.overlay;
+    if (!target || !overlay) { this.clear(); return; }
+    const from = overlay.getBoundingClientRect(), to = target.getBoundingClientRect();
+    gesture.flight?.cancel();
+    for (const animation of overlay.getAnimations()) animation.cancel();
+    Object.assign(overlay.style, { left: `${to.left}px`, top: `${to.top}px`, width: `${to.width}px`, transform: 'none' });
+    const article = overlay.shadowRoot?.querySelector('article');
+    const raised = article ? { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor } : undefined;
+    gesture.elevation?.cancel();
+    if (article) { article.style.boxShadow = ''; article.style.borderColor = ''; }
+    if (!this.reducedMotion.matches) {
+      const duration = Math.min(280, Math.max(160, 120 + .25 * Math.hypot(to.left - from.left, to.top - from.top)));
+      if (article && raised) gesture.elevation = article.animate([raised, { boxShadow: getComputedStyle(article).boxShadow, borderColor: getComputedStyle(article).borderColor }], { duration, easing: this.easing('spring') });
+      const flight = gesture.flight = overlay.animate([
+        { transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${from.width / to.width}, ${from.height / to.height})`, transformOrigin: 'top left' },
+        { transform: 'none', transformOrigin: 'top left' },
+      ], { duration, easing: this.easing('spring') });
+      const completed = await flight.finished.then(() => true, () => false);
+      if (!completed) return;
+    }
+    if (this.gesture !== gesture || gesture.flightRevision !== revision) return;
+    if (gesture.settled !== undefined) { await this.clearMotion(gesture); return; }
+    gesture.phase = 'pending';
+    gesture.motion = { ...gesture.motion, placeholder: false };
+    await this.renderMotion();
+    if (this.gesture !== gesture) return;
+    this.removeOverlay(gesture);
+    this.delay(() => { if (this.gesture === gesture && gesture.phase === 'pending') { gesture.motion = { ...gesture.motion, dimmed: true }; void this.renderMotion(); } }, 180);
+    this.delay(() => { if (this.gesture === gesture && gesture.phase === 'pending') { gesture.motion = { ...gesture.motion, saving: true }; void this.renderMotion(); } }, 600);
+  }
+
+  private async settle(gesture: IKanbanGesture, saved: boolean): Promise<void> {
+    if (this.gesture !== gesture) return;
+    gesture.settled = saved;
+    await this.board.updateComplete;
+    if (this.gesture !== gesture) return;
+    const move = this.authoritativeMove(gesture.motion.ticket.id);
+    if (!move) { this.fadeAndClear(gesture); return; }
+    const unchanged = sameMove(move, gesture.motion.move);
+    gesture.motion = { ...gesture.motion, move, ticket: this.board.tickets.find(ticket => ticket.id === move.ticketId)!, dimmed: false, saving: false };
+    if (gesture.phase === 'landing') { if (!unchanged) await this.land(gesture); }
+    else { gesture.phase = 'settling'; await this.clearMotion(gesture, saved ? 200 : 240); }
+  }
+
+  private targets(column: DeesKanbanColumn): HTMLElement[] { return [...column.shadowRoot?.querySelectorAll<HTMLElement>('.target') ?? []]; }
+  private allTargets(): HTMLElement[] { return this.columns.flatMap(column => this.targets(column)); }
+  public capture(): Map<string, DOMRect> { return new Map(this.allTargets().map(node => [node.dataset.ticketId!, node.getBoundingClientRect()])); }
+
+  public async animateFrom(before: Map<string, DOMRect>, duration = 200): Promise<void> {
+    await Promise.all(this.columns.map(column => column.updateComplete));
+    for (const animation of this.animations.values()) animation.cancel();
+    this.animations.clear();
+    if (this.reducedMotion.matches || !this.board.isConnected) return;
+    const easing = this.easing('spring');
+    for (const node of this.allTargets()) {
+      if (node.querySelector('.placeholder')) continue;
+      const old = before.get(node.dataset.ticketId!), rect = node.getBoundingClientRect();
+      if (!old || Math.abs(old.x - rect.x) + Math.abs(old.y - rect.y) < .5) continue;
+      const animation = node.animate([{ transform: `translate(${old.x - rect.x}px, ${old.y - rect.y}px)` }, { transform: 'none' }], { duration, easing });
+      this.animations.set(node, animation);
+      void animation.finished.then(() => { if (this.animations.get(node) === animation) this.animations.delete(node); }, () => {});
+    }
+  }
+
+  private async renderMotion(): Promise<void> {
+    this.rendering = true;
+    const before = this.capture();
+    for (const column of this.columns) column.motion = this.gesture?.motion;
+    await Promise.all(this.columns.map(column => column.updateComplete));
+    const gesture = this.gesture;
+    if (gesture && !gesture.motion.placeholder) await this.restoreExpansion(gesture);
+    await this.animateFrom(before);
+    this.rendering = false;
+  }
+
+  private async restoreExpansion(gesture: IKanbanGesture): Promise<void> {
+    const card = this.allTargets().find(node => node.dataset.ticketId === gesture.motion.ticket.id)?.querySelector('dees-kanban-card');
+    if (!card) return;
+    await card.updateComplete;
+    const details = card.shadowRoot?.querySelector('details');
+    if (details) details.open = gesture.expanded;
+  }
+
+  private async clearMotion(gesture: IKanbanGesture, duration = 200): Promise<void> {
+    const before = this.capture();
+    for (const column of this.columns) column.motion = undefined;
+    await Promise.all(this.columns.map(column => column.updateComplete));
+    if (this.gesture !== gesture) return;
+    await this.restoreExpansion(gesture);
+    this.removeOverlay(gesture);
+    await this.animateFrom(before, duration);
+    await Promise.all([...this.animations.values()].map(animation => animation.finished.catch(() => {})));
+    if (this.gesture === gesture) this.clear();
+  }
+
+  private collectScrollParents(): void {
+    this.scrollParents = [];
+    let node: Node | null = this.board.shadowRoot!.querySelector('.columns');
+    while (node) {
+      if (node instanceof HTMLElement) {
+        const style = getComputedStyle(node);
+        if (/(auto|scroll)/.test(style.overflowX + style.overflowY) || node === document.scrollingElement) {
+          this.scrollParents.push(node);
+          this.scrollSnap.set(node, node.style.scrollSnapType);
+          node.style.scrollSnapType = 'none';
+        }
+      }
+      node = (node instanceof Element && node.assignedSlot) || node.parentNode || (node instanceof ShadowRoot ? node.host : null);
+    }
+  }
+
+  private visibleRect(): { left: number; right: number; top: number; bottom: number } {
+    const board = this.board.shadowRoot!.querySelector('.columns')!.getBoundingClientRect();
+    const clip = { left: Math.max(0, board.left), right: Math.min(innerWidth, board.right), top: Math.max(0, board.top), bottom: Math.min(innerHeight, board.bottom) };
+    for (const parent of this.scrollParents) {
+      if (parent === document.scrollingElement) continue;
+      const rect = parent.getBoundingClientRect();
+      clip.left = Math.max(clip.left, rect.left); clip.right = Math.min(clip.right, rect.right);
+      clip.top = Math.max(clip.top, rect.top); clip.bottom = Math.min(clip.bottom, rect.bottom);
+    }
+    return clip;
+  }
+
+  private autoScroll(gesture: IKanbanGesture, elapsed: number): void {
+    const velocity = (point: number, start: number, end: number, edge: number) =>
+      point < start + edge ? -Math.min(1, Math.max(0, (start + edge - point) / edge)) * 14 * elapsed :
+        point > end - edge ? Math.min(1, Math.max(0, (point - end + edge) / edge)) * 14 * elapsed : 0;
+    let movedX = false, movedY = false;
+    for (const parent of this.scrollParents) {
+      const rect = parent === document.scrollingElement ? { left: 0, top: 0, right: innerWidth, bottom: innerHeight } : parent.getBoundingClientRect();
+      const left = Math.max(0, rect.left), top = Math.max(0, rect.top), right = Math.min(innerWidth, rect.right), bottom = Math.min(innerHeight, rect.bottom);
+      if (gesture.x < left - 48 || gesture.x > right + 48 || gesture.y < top - 56 || gesture.y > bottom + 56) continue;
+      const x = parent.scrollLeft, y = parent.scrollTop;
+      if (!movedX) parent.scrollLeft += velocity(gesture.x, left, right, 48);
+      if (!movedY) parent.scrollTop += velocity(gesture.y, top, bottom, 56);
+      movedX ||= parent.scrollLeft !== x; movedY ||= parent.scrollTop !== y;
+    }
+  }
+
+  private endPointer(): void {
+    this.listeners?.abort(); this.listeners = undefined;
+    cancelAnimationFrame(this.frame); this.frame = 0; this.previousFrame = 0;
+    if (this.gesture && this.board.hasPointerCapture(this.gesture.pointerId)) this.board.releasePointerCapture(this.gesture.pointerId);
+    this.resizeObserver?.disconnect(); this.resizeObserver = undefined;
+  }
+
+  private blockClick(): void {
+    this.suppressClick?.abort();
+    const controller = this.suppressClick = new AbortController();
+    window.addEventListener('click', event => { event.preventDefault(); event.stopImmediatePropagation(); controller.abort(); }, { capture: true, once: true, signal: controller.signal });
+    // Pointerup's click is synchronous; do not swallow a later intentional click.
+    clearTimeout(this.clickTimer);
+    this.clickTimer = setTimeout(() => controller.abort(), 0);
+  }
+
+  private delay(callback: () => void, duration: number): void {
+    const timer = setTimeout(() => { this.timers.delete(timer); callback(); }, duration);
+    this.timers.add(timer);
+  }
+
+  private removeOverlay(gesture: IKanbanGesture): void {
+    if (!gesture.overlay) return;
+    gesture.elevation?.cancel();
+    zIndexRegistry.unregister(gesture.overlay); gesture.overlay.remove(); gesture.overlay = undefined;
+  }
+
+  private fadeAndClear(gesture: IKanbanGesture): void {
+    if (gesture.phase === 'settling') return;
+    gesture.phase = 'settling'; this.endPointer();
+    const element = gesture.overlay ?? this.allTargets().find(node => node.dataset.ticketId === gesture.motion.ticket.id);
+    if (!element || this.reducedMotion.matches) { this.clear(); return; }
+    const transform = getComputedStyle(element).transform;
+    gesture.flight?.cancel(); element.style.transform = transform;
+    const fade = gesture.flight = element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 120, fill: 'forwards' });
+    void fade.finished.then(() => { if (this.gesture === gesture) void this.clearMotion(gesture); }, () => {});
+  }
+
+  private clear(): void {
+    const gesture = this.gesture;
+    this.endPointer(); this.gesture = undefined;
+    for (const [parent, value] of this.scrollSnap) parent.style.scrollSnapType = value;
+    this.scrollSnap.clear(); this.scrollParents = [];
+    for (const timer of this.timers) clearTimeout(timer);
+    this.timers.clear();
+    for (const animation of this.animations.values()) animation.cancel();
+    this.animations.clear();
+    for (const column of this.columns) column.motion = undefined;
+    if (!gesture) return;
+    gesture.flight?.cancel(); this.removeOverlay(gesture);
+    let focused = document.activeElement;
+    while (focused?.shadowRoot?.activeElement) focused = focused.shadowRoot.activeElement;
+    if (gesture.restoreFocus && this.board.isConnected && (focused === document.body || focused === this.board)) {
+      const card = this.allTargets().find(node => node.dataset.ticketId === gesture.motion.ticket.id)?.querySelector('dees-kanban-card');
+      (card?.shadowRoot?.querySelector('.title') as HTMLButtonElement | null)?.focus({ preventScroll: true });
+    }
+  }
+
+  public disconnect(): void {
+    this.board.removeEventListener('pointerdown', this.down);
+    this.suppressClick?.abort(); clearTimeout(this.clickTimer); this.clear();
+  }
+}