@design.estate/dees-catalog 13.0.1 → 13.0.2

package/dist_bundle/bundle.js

@@ -184498,9 +184498,9 @@ var demoFunc72 = /* @__PURE__ */ __name(() => {
 init_dist_ts26();
 init_dees_button();
 init_dees_icon();
-var _pending_dec3, _movable_dec, _columns_dec4, _subtasks_dec, _epic_dec, _ticket_dec2, _a107, _DeesKanbanCard_decorators, _init109, _ticket2, _epic, _subtasks, _columns4, _movable, _pending3;
+var _pointerManaged_dec, _saving_dec3, _pending_dec3, _moveDisabled_dec, _movable_dec, _columns_dec4, _subtasks_dec, _epic_dec, _ticket_dec2, _a107, _DeesKanbanCard_decorators, _init109, _ticket2, _epic, _subtasks, _columns4, _movable, _moveDisabled, _pending3, _saving3, _pointerManaged;
 _DeesKanbanCard_decorators = [customElement("dees-kanban-card")];
-var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticket_dec2 = [n5({ attribute: false })], _epic_dec = [n5({ attribute: false })], _subtasks_dec = [n5({ attribute: false })], _columns_dec4 = [n5({ attribute: false })], _movable_dec = [n5({ type: Boolean })], _pending_dec3 = [n5({ type: Boolean })], _a107) {
+var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticket_dec2 = [n5({ attribute: false })], _epic_dec = [n5({ attribute: false })], _subtasks_dec = [n5({ attribute: false })], _columns_dec4 = [n5({ attribute: false })], _movable_dec = [n5({ type: Boolean })], _moveDisabled_dec = [n5({ type: Boolean })], _pending_dec3 = [n5({ type: Boolean })], _saving_dec3 = [n5({ type: Boolean })], _pointerManaged_dec = [n5({ attribute: false })], _a107) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ticket2, __runInitializers(_init109, 8, this)), __runInitializers(_init109, 11, this);
@@ -184508,7 +184508,10 @@ var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticke
     __privateAdd(this, _subtasks, __runInitializers(_init109, 16, this, [])), __runInitializers(_init109, 19, this);
     __privateAdd(this, _columns4, __runInitializers(_init109, 20, this, [])), __runInitializers(_init109, 23, this);
     __privateAdd(this, _movable, __runInitializers(_init109, 24, this, false)), __runInitializers(_init109, 27, this);
-    __privateAdd(this, _pending3, __runInitializers(_init109, 28, this, false)), __runInitializers(_init109, 31, this);
+    __privateAdd(this, _moveDisabled, __runInitializers(_init109, 28, this, false)), __runInitializers(_init109, 31, this);
+    __privateAdd(this, _pending3, __runInitializers(_init109, 32, this, false)), __runInitializers(_init109, 35, this);
+    __privateAdd(this, _saving3, __runInitializers(_init109, 36, this, false)), __runInitializers(_init109, 39, this);
+    __privateAdd(this, _pointerManaged, __runInitializers(_init109, 40, this, false)), __runInitializers(_init109, 43, this);
   }
   open(ticketId) {
     kanbanEvent(this, "kanban-ticket-open", { ticketId });
@@ -184517,19 +184520,22 @@ var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticke
     const ticket = this.ticket;
     if (!ticket) return b2``;
     const completed = this.subtasks.filter((task) => this.columns.some((column) => column.id === task.columnId && column.done)).length;
-    return b2`<article aria-busy=${String(this.pending)} draggable=${this.movable && !this.pending ? "true" : "false"}
+    return b2`<article aria-busy=${String(this.pending)} data-movable=${String(this.movable && !this.moveDisabled && !this.pending)}
+      draggable=${String(this.movable && !this.moveDisabled && !this.pending && !this.pointerManaged)}
       @dragstart=${(event) => {
-      if (!this.movable || this.pending || !event.dataTransfer) {
+      if (this.pointerManaged || !this.movable || this.moveDisabled || this.pending || !event.dataTransfer) {
         event.preventDefault();
         return;
       }
       event.dataTransfer.setData("application/x-dees-kanban-ticket", ticket.id);
       event.dataTransfer.effectAllowed = "move";
       kanbanEvent(this, "kanban-drag-start", { ticketId: ticket.id });
-    }} @dragend=${() => kanbanEvent(this, "kanban-drag-end", {})}>
+    }} @dragend=${() => {
+      if (!this.pointerManaged) kanbanEvent(this, "kanban-drag-end", {});
+    }}>
       <div class="meta"><span class="key">${ticket.key}</span>
         ${this.epic ? b2`<button class="link epic" title=${this.epic.title} @click=${() => this.open(this.epic.id)}>${this.epic.title}</button>` : ""}
-        ${this.movable ? b2`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
+        ${this.saving ? b2`<span class="saving" role="status">Saving…</span>` : this.movable ? b2`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending || this.moveDisabled}
           @clicked=${(event) => kanbanEvent(this, "kanban-move-menu", { ticketId: ticket.id, anchor: event.currentTarget })}></dees-button>` : ""}
       </div>
       <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
@@ -184550,24 +184556,32 @@ _epic = new WeakMap();
 _subtasks = new WeakMap();
 _columns4 = new WeakMap();
 _movable = new WeakMap();
+_moveDisabled = new WeakMap();
 _pending3 = new WeakMap();
+_saving3 = new WeakMap();
+_pointerManaged = new WeakMap();
 __decorateElement(_init109, 4, "ticket", _ticket_dec2, _DeesKanbanCard, _ticket2);
 __decorateElement(_init109, 4, "epic", _epic_dec, _DeesKanbanCard, _epic);
 __decorateElement(_init109, 4, "subtasks", _subtasks_dec, _DeesKanbanCard, _subtasks);
 __decorateElement(_init109, 4, "columns", _columns_dec4, _DeesKanbanCard, _columns4);
 __decorateElement(_init109, 4, "movable", _movable_dec, _DeesKanbanCard, _movable);
+__decorateElement(_init109, 4, "moveDisabled", _moveDisabled_dec, _DeesKanbanCard, _moveDisabled);
 __decorateElement(_init109, 4, "pending", _pending_dec3, _DeesKanbanCard, _pending3);
+__decorateElement(_init109, 4, "saving", _saving_dec3, _DeesKanbanCard, _saving3);
+__decorateElement(_init109, 4, "pointerManaged", _pointerManaged_dec, _DeesKanbanCard, _pointerManaged);
 _DeesKanbanCard = __decorateElement(_init109, 0, "DeesKanbanCard", _DeesKanbanCard_decorators, _DeesKanbanCard);
 __name(_DeesKanbanCard, "DeesKanbanCard");
 __publicField(_DeesKanbanCard, "styles", [...kanbanStyles, i`
     article { padding: 12px; border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
     article:hover { border-color: var(--dees-color-border-strong); }
-    article[aria-busy=true] { opacity: .65; }
+    article[aria-busy=true] > :not(.meta), article[aria-busy=true] .meta > :not(.saving) { opacity: .65; }
+    article[data-movable=true] { cursor: grab; }
     .meta { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
     .key { flex-shrink: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
     .link.epic { min-width: 0; color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
     .link.epic:hover { color: var(--dees-color-link); text-decoration: underline; }
     .move { flex-shrink: 0; margin-left: auto; }
+    .saving { margin-left: auto; font-size: var(--dees-font-caption1-size); white-space: nowrap; }
     .move::part(button) { width: 24px; height: 24px; min-height: 24px; }
     .title { display: block; width: 100%; border: 0; background: transparent; padding: 4px 0 0; color: inherit; text-align: left; cursor: pointer; font: inherit; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
     .title:hover { color: var(--dees-color-link); }
@@ -184590,11 +184604,532 @@ __publicField(_DeesKanbanCard, "styles", [...kanbanStyles, i`
 __runInitializers(_init109, 1, _DeesKanbanCard);
 var DeesKanbanCard = _DeesKanbanCard;
 
+// ts_web/elements/00group-kanban/kanban.dragcontroller.ts
+init_overlay();
+init_zindex();
+var sameMove = /* @__PURE__ */ __name((a4, b4) => a4.ticketId === b4.ticketId && a4.columnId === b4.columnId && a4.beforeTicketId === b4.beforeTicketId, "sameMove");
+var KanbanDragController = class {
+  constructor(board, commit, canMove) {
+    this.board = board;
+    this.commit = commit;
+    this.canMove = canMove;
+  }
+  board;
+  commit;
+  canMove;
+  static {
+    __name(this, "KanbanDragController");
+  }
+  gesture;
+  listeners;
+  frame = 0;
+  previousFrame = 0;
+  rendering = false;
+  scrollParents = [];
+  scrollSnap = /* @__PURE__ */ new Map();
+  animations = /* @__PURE__ */ new Map();
+  timers = /* @__PURE__ */ new Set();
+  suppressClick;
+  clickTimer;
+  resizeObserver;
+  reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+  get busy() {
+    return Boolean(this.gesture && this.gesture.phase !== "armed");
+  }
+  easing(name) {
+    return getComputedStyle(this.board).getPropertyValue(`--dees-ease-${name}`).trim();
+  }
+  get columns() {
+    return [...this.board.shadowRoot?.querySelectorAll("dees-kanban-column") ?? []];
+  }
+  connect() {
+    this.board.addEventListener("pointerdown", this.down);
+  }
+  /** Host updates can remove/filter the source or revoke its move permission during a gesture. */
+  sync() {
+    const gesture = this.gesture;
+    if (!gesture || gesture.phase === "armed") return;
+    const visible = this.columns.some((column) => column.tickets.some((ticket2) => ticket2.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();
+    }
+  }
+  down = /* @__PURE__ */ __name((event) => {
+    if (this.gesture || !this.canMove() || event.button !== 0 || !event.isPrimary || event.pointerType === "touch") return;
+    const path2 = event.composedPath();
+    if (!this.columns.some((column) => path2.includes(column))) return;
+    const source = path2.find((node2) => node2 instanceof DeesKanbanCard);
+    if (!source?.ticket || !source.movable || source.moveDisabled || source.pending) return;
+    if (path2.some((node2) => node2 instanceof Element && node2 !== source && node2.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 });
+  }, "down");
+  move = /* @__PURE__ */ __name((event) => {
+    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();
+  }, "move");
+  async lift(gesture) {
+    gesture.phase = "dragging";
+    gesture.restoreFocus = Boolean(gesture.source.shadowRoot?.activeElement);
+    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 styles3 = getComputedStyle(gesture.source);
+    for (const name of styles3) if (name.startsWith("--dees-")) overlay.style.setProperty(name, styles3.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)) > 0.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);
+  }
+  positionPreview(gesture) {
+    if (!gesture.overlay) return;
+    gesture.overlay.style.left = `${gesture.x - gesture.offsetX}px`;
+    gesture.overlay.style.top = `${gesture.y - gesture.offsetY}px`;
+  }
+  tick = /* @__PURE__ */ __name((time) => {
+    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);
+  }, "tick");
+  targetAt(gesture) {
+    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((column2) => {
+      const rect = column2.getBoundingClientRect();
+      return rect.right > clip.left && rect.left < clip.right;
+    });
+    let column = lanes.sort((a4, b4) => {
+      const ar = a4.getBoundingClientRect(), br = b4.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);
+    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 index3 = tickets.length;
+    for (let i11 = 0; i11 < tickets.length; i11++) {
+      const node2 = this.targets(column).find((target) => target.dataset.ticketId === tickets[i11].id);
+      const midpoint = top + node2.offsetHeight / 2;
+      const hysteresis = gesture.motion.move.columnId === columnId ? i11 < current ? -6 : 6 : 0;
+      if (centerY < midpoint + hysteresis) {
+        index3 = i11;
+        break;
+      }
+      top += node2.offsetHeight + 8;
+    }
+    return { ticketId: gesture.motion.ticket.id, columnId, beforeTicketId: tickets[index3]?.id };
+  }
+  up = /* @__PURE__ */ __name((event) => {
+    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 {
+      void this.commit(target).then((saved) => this.settle(gesture, saved));
+    }
+  }, "up");
+  pointerCancel = /* @__PURE__ */ __name((event) => {
+    if (event.pointerId === this.gesture?.pointerId && ["armed", "dragging"].includes(this.gesture.phase)) void this.cancel();
+  }, "pointerCancel");
+  key = /* @__PURE__ */ __name((event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    void this.cancel();
+  }, "key");
+  blur = /* @__PURE__ */ __name(() => {
+    void this.cancel();
+  }, "blur");
+  async cancel() {
+    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);
+  }
+  authoritativeMove(ticketId) {
+    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 };
+  }
+  async land(gesture) {
+    const revision = ++gesture.flightRevision;
+    await this.renderMotion();
+    if (this.gesture !== gesture || gesture.flightRevision !== revision) return;
+    const target = this.allTargets().find((node2) => node2.dataset.ticketId === gesture.motion.ticket.id);
+    const overlay = gesture.overlay;
+    if (!target || !overlay) {
+      this.clear();
+      return;
+    }
+    const from3 = 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 } : void 0;
+    gesture.elevation?.cancel();
+    if (article) {
+      article.style.boxShadow = "";
+      article.style.borderColor = "";
+    }
+    if (!this.reducedMotion.matches) {
+      const duration = Math.min(280, Math.max(160, 120 + 0.25 * Math.hypot(to.left - from3.left, to.top - from3.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(${from3.left - to.left}px, ${from3.top - to.top}px) scale(${from3.width / to.width}, ${from3.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 !== void 0) {
+      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);
+  }
+  async settle(gesture, saved) {
+    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);
+    }
+  }
+  targets(column) {
+    return [...column.shadowRoot?.querySelectorAll(".target") ?? []];
+  }
+  allTargets() {
+    return this.columns.flatMap((column) => this.targets(column));
+  }
+  capture() {
+    return new Map(this.allTargets().map((node2) => [node2.dataset.ticketId, node2.getBoundingClientRect()]));
+  }
+  async animateFrom(before, duration = 200) {
+    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 node2 of this.allTargets()) {
+      if (node2.querySelector(".placeholder")) continue;
+      const old = before.get(node2.dataset.ticketId), rect = node2.getBoundingClientRect();
+      if (!old || Math.abs(old.x - rect.x) + Math.abs(old.y - rect.y) < 0.5) continue;
+      const animation = node2.animate([{ transform: `translate(${old.x - rect.x}px, ${old.y - rect.y}px)` }, { transform: "none" }], { duration, easing });
+      this.animations.set(node2, animation);
+      void animation.finished.then(() => {
+        if (this.animations.get(node2) === animation) this.animations.delete(node2);
+      }, () => {
+      });
+    }
+  }
+  async renderMotion() {
+    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;
+  }
+  async restoreExpansion(gesture) {
+    const card = this.allTargets().find((node2) => node2.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;
+  }
+  async clearMotion(gesture, duration = 200) {
+    const before = this.capture();
+    for (const column of this.columns) column.motion = void 0;
+    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();
+  }
+  collectScrollParents() {
+    this.scrollParents = [];
+    let node2 = this.board.shadowRoot.querySelector(".columns");
+    while (node2) {
+      if (node2 instanceof HTMLElement) {
+        const style2 = getComputedStyle(node2);
+        if (/(auto|scroll)/.test(style2.overflowX + style2.overflowY) || node2 === document.scrollingElement) {
+          this.scrollParents.push(node2);
+          this.scrollSnap.set(node2, node2.style.scrollSnapType);
+          node2.style.scrollSnapType = "none";
+        }
+      }
+      node2 = node2 instanceof Element && node2.assignedSlot || node2.parentNode || (node2 instanceof ShadowRoot ? node2.host : null);
+    }
+  }
+  visibleRect() {
+    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;
+  }
+  autoScroll(gesture, elapsed) {
+    const velocity = /* @__PURE__ */ __name((point4, start, end, edge) => point4 < start + edge ? -Math.min(1, Math.max(0, (start + edge - point4) / edge)) * 14 * elapsed : point4 > end - edge ? Math.min(1, Math.max(0, (point4 - end + edge) / edge)) * 14 * elapsed : 0, "velocity");
+    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 x3 = parent.scrollLeft, y3 = 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 !== x3;
+      movedY ||= parent.scrollTop !== y3;
+    }
+  }
+  endPointer() {
+    this.listeners?.abort();
+    this.listeners = void 0;
+    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 = void 0;
+  }
+  blockClick() {
+    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 });
+    clearTimeout(this.clickTimer);
+    this.clickTimer = setTimeout(() => controller.abort(), 0);
+  }
+  delay(callback, duration) {
+    const timer2 = setTimeout(() => {
+      this.timers.delete(timer2);
+      callback();
+    }, duration);
+    this.timers.add(timer2);
+  }
+  removeOverlay(gesture) {
+    if (!gesture.overlay) return;
+    gesture.elevation?.cancel();
+    zIndexRegistry.unregister(gesture.overlay);
+    gesture.overlay.remove();
+    gesture.overlay = void 0;
+  }
+  fadeAndClear(gesture) {
+    if (gesture.phase === "settling") return;
+    gesture.phase = "settling";
+    this.endPointer();
+    const element4 = gesture.overlay ?? this.allTargets().find((node2) => node2.dataset.ticketId === gesture.motion.ticket.id);
+    if (!element4 || this.reducedMotion.matches) {
+      this.clear();
+      return;
+    }
+    const transform2 = getComputedStyle(element4).transform;
+    gesture.flight?.cancel();
+    element4.style.transform = transform2;
+    const fade = gesture.flight = element4.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 120, fill: "forwards" });
+    void fade.finished.then(() => {
+      if (this.gesture === gesture) void this.clearMotion(gesture);
+    }, () => {
+    });
+  }
+  clear() {
+    const gesture = this.gesture;
+    this.endPointer();
+    this.gesture = void 0;
+    for (const [parent, value2] of this.scrollSnap) parent.style.scrollSnapType = value2;
+    this.scrollSnap.clear();
+    this.scrollParents = [];
+    for (const timer2 of this.timers) clearTimeout(timer2);
+    this.timers.clear();
+    for (const animation of this.animations.values()) animation.cancel();
+    this.animations.clear();
+    for (const column of this.columns) column.motion = void 0;
+    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((node2) => node2.dataset.ticketId === gesture.motion.ticket.id)?.querySelector("dees-kanban-card");
+      card?.shadowRoot?.querySelector(".title")?.focus({ preventScroll: true });
+    }
+  }
+  disconnect() {
+    this.board.removeEventListener("pointerdown", this.down);
+    this.suppressClick?.abort();
+    clearTimeout(this.clickTimer);
+    this.clear();
+  }
+};
+
 // ts_web/elements/00group-kanban/dees-kanban-column/dees-kanban-column.ts
 init_dist_ts26();
-var _draggingOver_dec, _dropBefore_dec, _draggingTicketId_dec, _pendingTicketId_dec, _canCreate_dec, _movable_dec2, _columns_dec5, _allTickets_dec, _tickets_dec2, _column_dec, _a108, _DeesKanbanColumn_decorators, _init110, _column, _tickets2, _allTickets, _columns5, _movable2, _canCreate, _pendingTicketId, _draggingTicketId, _dropBefore, _draggingOver;
+var _motion_dec, _nativeOver_dec, _nativeDropBefore_dec, _pointerManaged_dec2, _draggingTicketId_dec, _pendingTicketId_dec, _canCreate_dec, _movesDisabled_dec, _movable_dec2, _columns_dec5, _allTickets_dec, _tickets_dec2, _column_dec, _a108, _DeesKanbanColumn_decorators, _init110, _column, _tickets2, _allTickets, _columns5, _movable2, _movesDisabled, _canCreate, _pendingTicketId, _draggingTicketId, _pointerManaged2, _nativeDropBefore, _nativeOver, _motion;
 _DeesKanbanColumn_decorators = [customElement("dees-kanban-column")];
-var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _column_dec = [n5({ attribute: false })], _tickets_dec2 = [n5({ attribute: false })], _allTickets_dec = [n5({ attribute: false })], _columns_dec5 = [n5({ attribute: false })], _movable_dec2 = [n5({ type: Boolean })], _canCreate_dec = [n5({ type: Boolean })], _pendingTicketId_dec = [n5({ type: String })], _draggingTicketId_dec = [n5({ type: String })], _dropBefore_dec = [r5()], _draggingOver_dec = [r5()], _a108) {
+var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _column_dec = [n5({ attribute: false })], _tickets_dec2 = [n5({ attribute: false })], _allTickets_dec = [n5({ attribute: false })], _columns_dec5 = [n5({ attribute: false })], _movable_dec2 = [n5({ type: Boolean })], _movesDisabled_dec = [n5({ type: Boolean })], _canCreate_dec = [n5({ type: Boolean })], _pendingTicketId_dec = [n5({ type: String })], _draggingTicketId_dec = [n5({ type: String })], _pointerManaged_dec2 = [n5({ attribute: false })], _nativeDropBefore_dec = [r5()], _nativeOver_dec = [r5()], _motion_dec = [n5({ attribute: false })], _a108) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _column, __runInitializers(_init110, 8, this)), __runInitializers(_init110, 11, this);
@@ -184602,53 +185137,66 @@ var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _c
     __privateAdd(this, _allTickets, __runInitializers(_init110, 16, this, [])), __runInitializers(_init110, 19, this);
     __privateAdd(this, _columns5, __runInitializers(_init110, 20, this, [])), __runInitializers(_init110, 23, this);
     __privateAdd(this, _movable2, __runInitializers(_init110, 24, this, false)), __runInitializers(_init110, 27, this);
-    __privateAdd(this, _canCreate, __runInitializers(_init110, 28, this, false)), __runInitializers(_init110, 31, this);
-    __privateAdd(this, _pendingTicketId, __runInitializers(_init110, 32, this, "")), __runInitializers(_init110, 35, this);
-    __privateAdd(this, _draggingTicketId, __runInitializers(_init110, 36, this, "")), __runInitializers(_init110, 39, this);
-    __privateAdd(this, _dropBefore, __runInitializers(_init110, 40, this)), __runInitializers(_init110, 43, this);
-    __privateAdd(this, _draggingOver, __runInitializers(_init110, 44, this, false)), __runInitializers(_init110, 47, this);
+    __privateAdd(this, _movesDisabled, __runInitializers(_init110, 28, this, false)), __runInitializers(_init110, 31, this);
+    __privateAdd(this, _canCreate, __runInitializers(_init110, 32, this, false)), __runInitializers(_init110, 35, this);
+    __privateAdd(this, _pendingTicketId, __runInitializers(_init110, 36, this, "")), __runInitializers(_init110, 39, this);
+    __privateAdd(this, _draggingTicketId, __runInitializers(_init110, 40, this, "")), __runInitializers(_init110, 43, this);
+    __privateAdd(this, _pointerManaged2, __runInitializers(_init110, 44, this, false)), __runInitializers(_init110, 47, this);
+    __privateAdd(this, _nativeDropBefore, __runInitializers(_init110, 48, this)), __runInitializers(_init110, 51, this);
+    __privateAdd(this, _nativeOver, __runInitializers(_init110, 52, this, false)), __runInitializers(_init110, 55, this);
+    __privateAdd(this, _motion, __runInitializers(_init110, 56, this)), __runInitializers(_init110, 59, this);
   }
   updated() {
-    if (!this.draggingTicketId) this.draggingOver = false;
+    if (!this.draggingTicketId) this.nativeOver = false;
   }
   render() {
     if (!this.column) return b2``;
-    return b2`<section class=${this.draggingOver ? "over" : ""} aria-label=${this.column.title}
+    const motion = this.motion;
+    const tickets = sortKanbanTickets(this.tickets).filter((ticket) => ticket.id !== motion?.move.ticketId);
+    const active = motion?.move.columnId === this.column.id;
+    if (motion && active) {
+      const index3 = tickets.findIndex((ticket) => ticket.id === motion.move.beforeTicketId);
+      tickets.splice(index3 < 0 ? tickets.length : index3, 0, motion.ticket);
+    }
+    return b2`<section class=${active && motion?.placeholder || this.nativeOver ? "over" : ""} aria-label=${this.column.title}
       @dragover=${(event) => {
-      if (this.draggingTicketId && this.movable) {
+      if (!this.pointerManaged && this.draggingTicketId && this.movable && !this.movesDisabled) {
         event.preventDefault();
-        this.draggingOver = true;
+        this.nativeOver = true;
         if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
       }
     }}
       @dragleave=${(event) => {
-      if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) this.draggingOver = false;
+      if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) this.nativeOver = false;
     }}
       @drop=${(event) => {
+      if (this.pointerManaged) return;
       event.preventDefault();
-      this.draggingOver = false;
-      if (this.movable && this.draggingTicketId && event.dataTransfer?.getData("application/x-dees-kanban-ticket") === this.draggingTicketId)
-        kanbanEvent(this, "kanban-ticket-move", { ticketId: this.draggingTicketId, columnId: this.column.id, beforeTicketId: this.dropBefore });
+      this.nativeOver = false;
+      if (this.movable && !this.movesDisabled && this.draggingTicketId && event.dataTransfer?.getData("application/x-dees-kanban-ticket") === this.draggingTicketId)
+        kanbanEvent(this, "kanban-ticket-move", { ticketId: this.draggingTicketId, columnId: this.column.id, beforeTicketId: this.nativeDropBefore });
     }}>
-      <header><span class="status ${this.column.done ? "done" : ""}" aria-hidden="true"></span><h3>${this.column.title}</h3><span class="count">${this.tickets.length}</span><span class="spacer"></span>
+      <header><span class="status ${this.column.done ? "done" : ""}" aria-hidden="true"></span><h3>${this.column.title}</h3><span class="count">${tickets.length}</span><span class="spacer"></span>
         ${this.canCreate ? b2`<dees-button type="ghost" size="icon" icon="lucide:Plus" text=${`Add task to ${this.column.title}`}
           @clicked=${() => kanbanEvent(this, "kanban-ticket-create", { kind: "task", columnId: this.column.id })}></dees-button>` : ""}</header>
-      <div class="stack">${sortKanbanTickets(this.tickets).map((ticket) => b2`
-        <div class="target ${this.draggingOver && this.dropBefore === ticket.id ? "before" : ""} ${this.draggingTicketId === ticket.id ? "dragging" : ""}"
+      <div class="stack">${directives_exports.repeat(tickets, (ticket) => ticket.id, (ticket) => b2`
+        <div class="target ${this.nativeOver && this.nativeDropBefore === ticket.id ? "native-before" : ""}" data-ticket-id=${ticket.id}
           @dragover=${() => {
-      this.dropBefore = ticket.id;
+      if (!this.pointerManaged) this.nativeDropBefore = ticket.id;
     }}>
-          <dees-kanban-card .ticket=${ticket} .columns=${this.columns}
+          ${motion?.move.ticketId === ticket.id && motion.placeholder ? b2`<div class="placeholder" style=${`height: ${motion.height}px`} aria-label="Drop ticket here"></div>` : b2`<dees-kanban-card .ticket=${ticket} .columns=${this.columns}
             .epic=${this.allTickets.find((item) => item.id === ticket.parentId && item.kind === "epic")}
             .subtasks=${sortKanbanTickets(this.allTickets.filter((item) => item.parentId === ticket.id && item.kind === "subtask"))}
-            .movable=${this.movable && ticket.permissions?.move !== false} .pending=${this.pendingTicketId === ticket.id}></dees-kanban-card>
+            .movable=${this.movable && ticket.permissions?.move !== false} .pending=${motion?.move.ticketId === ticket.id ? motion.dimmed : this.pendingTicketId === ticket.id}
+            .moveDisabled=${this.movesDisabled}
+            .saving=${motion?.move.ticketId === ticket.id && motion.saving} .pointerManaged=${this.pointerManaged}></dees-kanban-card>`}
         </div>`)}
-        ${!this.tickets.length ? b2`<div class="empty" @dragover=${() => {
-      this.dropBefore = void 0;
+        ${!tickets.length ? b2`<div class="empty" @dragover=${() => {
+      this.nativeDropBefore = void 0;
     }}>No tasks</div>` : ""}
       </div>
-      <div class="end-target ${this.draggingOver && !this.dropBefore ? "before" : ""}" @dragover=${() => {
-      this.dropBefore = void 0;
+      <div class="end-target ${this.nativeOver && !this.nativeDropBefore ? "native-before" : ""}" @dragover=${() => {
+      this.nativeDropBefore = void 0;
     }}></div>
     </section>`;
   }
@@ -184659,26 +185207,32 @@ _tickets2 = new WeakMap();
 _allTickets = new WeakMap();
 _columns5 = new WeakMap();
 _movable2 = new WeakMap();
+_movesDisabled = new WeakMap();
 _canCreate = new WeakMap();
 _pendingTicketId = new WeakMap();
 _draggingTicketId = new WeakMap();
-_dropBefore = new WeakMap();
-_draggingOver = new WeakMap();
+_pointerManaged2 = new WeakMap();
+_nativeDropBefore = new WeakMap();
+_nativeOver = new WeakMap();
+_motion = new WeakMap();
 __decorateElement(_init110, 4, "column", _column_dec, _DeesKanbanColumn, _column);
 __decorateElement(_init110, 4, "tickets", _tickets_dec2, _DeesKanbanColumn, _tickets2);
 __decorateElement(_init110, 4, "allTickets", _allTickets_dec, _DeesKanbanColumn, _allTickets);
 __decorateElement(_init110, 4, "columns", _columns_dec5, _DeesKanbanColumn, _columns5);
 __decorateElement(_init110, 4, "movable", _movable_dec2, _DeesKanbanColumn, _movable2);
+__decorateElement(_init110, 4, "movesDisabled", _movesDisabled_dec, _DeesKanbanColumn, _movesDisabled);
 __decorateElement(_init110, 4, "canCreate", _canCreate_dec, _DeesKanbanColumn, _canCreate);
 __decorateElement(_init110, 4, "pendingTicketId", _pendingTicketId_dec, _DeesKanbanColumn, _pendingTicketId);
 __decorateElement(_init110, 4, "draggingTicketId", _draggingTicketId_dec, _DeesKanbanColumn, _draggingTicketId);
-__decorateElement(_init110, 4, "dropBefore", _dropBefore_dec, _DeesKanbanColumn, _dropBefore);
-__decorateElement(_init110, 4, "draggingOver", _draggingOver_dec, _DeesKanbanColumn, _draggingOver);
+__decorateElement(_init110, 4, "pointerManaged", _pointerManaged_dec2, _DeesKanbanColumn, _pointerManaged2);
+__decorateElement(_init110, 4, "nativeDropBefore", _nativeDropBefore_dec, _DeesKanbanColumn, _nativeDropBefore);
+__decorateElement(_init110, 4, "nativeOver", _nativeOver_dec, _DeesKanbanColumn, _nativeOver);
+__decorateElement(_init110, 4, "motion", _motion_dec, _DeesKanbanColumn, _motion);
 _DeesKanbanColumn = __decorateElement(_init110, 0, "DeesKanbanColumn", _DeesKanbanColumn_decorators, _DeesKanbanColumn);
 __name(_DeesKanbanColumn, "DeesKanbanColumn");
 __publicField(_DeesKanbanColumn, "styles", [...kanbanStyles, i`
     :host { display: flex; flex-direction: column; min-width: 272px; max-width: 360px; flex: 1 0 272px; }
-    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-xl); }
+    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-xl); transition: background var(--dees-transition-default) var(--dees-ease-out); }
     header { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--dees-color-border-subtle); }
     h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
     header dees-button::part(button) { width: 24px; height: 24px; min-height: 24px; }
@@ -184686,10 +185240,11 @@ __publicField(_DeesKanbanColumn, "styles", [...kanbanStyles, i`
     .status.done { background: var(--dees-color-accent-success); border-color: var(--dees-color-accent-success); }
     .stack { display: grid; gap: 8px; min-height: 120px; align-content: start; }
     .target { position: relative; }
-    .target.dragging { opacity: .4; }
-    .target.before::before, .end-target.before::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: var(--dees-color-accent-primary); border-radius: 2px; }
+    .native-before::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: var(--dees-color-accent-primary); border-radius: 2px; }
+    .placeholder { border-radius: var(--dees-radius-xl); background: var(--dees-color-fill-tertiary); box-shadow: inset 0 0 0 1px var(--dees-color-border-default); }
     .end-target { position: relative; min-height: 32px; margin-top: 8px; }
     section.over { background: var(--dees-color-row-hover); }
+    @media (prefers-reduced-motion: reduce) { section { transition: none; } }
     @media (pointer: coarse) { header dees-button::part(button) { width: 32px; height: 32px; min-height: 32px; } }
   `]);
 __runInitializers(_init110, 1, _DeesKanbanColumn);
@@ -184699,7 +185254,7 @@ var DeesKanbanColumn = _DeesKanbanColumn;
 init_dist_ts26();
 init_dees_modal();
 init_dees_contextmenu();
-var _openingTicket_dec, _draggingTicketId_dec2, _pendingTicketId_dec2, _operationError_dec, _epicId_dec, _query_dec2, _error_dec4, _loading_dec8, _provider_dec3, _people_dec2, _columns_dec6, _tickets_dec3, _heading_dec8, _a109, _DeesKanban_decorators, _init111, _heading8, _tickets3, _columns6, _people2, _provider3, _loading8, _error4, _query2, _epicId, _operationError, _pendingTicketId2, _draggingTicketId2, _openingTicket;
+var _openingTicket_dec, _pendingTicketId_dec2, _operationError_dec, _epicId_dec, _query_dec2, _error_dec4, _loading_dec8, _provider_dec3, _people_dec2, _columns_dec6, _tickets_dec3, _heading_dec8, _a109, _DeesKanban_decorators, _init111, _heading8, _tickets3, _columns6, _people2, _provider3, _loading8, _error4, _query2, _epicId, _operationError, _pendingTicketId2, _openingTicket;
 var interactionEvents = [
   "kanban-ticket-open",
   "kanban-ticket-move",
@@ -184710,12 +185265,10 @@ var interactionEvents = [
   "kanban-comment-draft",
   "kanban-comment-added",
   "kanban-comments-refresh",
-  "kanban-detail-back",
-  "kanban-drag-start",
-  "kanban-drag-end"
+  "kanban-detail-back"
 ];
 _DeesKanban_decorators = [customElement("dees-kanban")];
-var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8 = [n5({ type: String })], _tickets_dec3 = [n5({ attribute: false })], _columns_dec6 = [n5({ attribute: false })], _people_dec2 = [n5({ attribute: false })], _provider_dec3 = [n5({ attribute: false })], _loading_dec8 = [n5({ type: Boolean })], _error_dec4 = [n5({ type: String })], _query_dec2 = [r5()], _epicId_dec = [r5()], _operationError_dec = [r5()], _pendingTicketId_dec2 = [r5()], _draggingTicketId_dec2 = [r5()], _openingTicket_dec = [r5()], _a109) {
+var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8 = [n5({ type: String })], _tickets_dec3 = [n5({ attribute: false })], _columns_dec6 = [n5({ attribute: false })], _people_dec2 = [n5({ attribute: false })], _provider_dec3 = [n5({ attribute: false })], _loading_dec8 = [n5({ type: Boolean })], _error_dec4 = [n5({ type: String })], _query_dec2 = [r5()], _epicId_dec = [r5()], _operationError_dec = [r5()], _pendingTicketId_dec2 = [r5()], _openingTicket_dec = [r5()], _a109) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _heading8, __runInitializers(_init111, 8, this, "Board")), __runInitializers(_init111, 11, this);
@@ -184729,8 +185282,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
     __privateAdd(this, _epicId, __runInitializers(_init111, 40, this, "")), __runInitializers(_init111, 43, this);
     __privateAdd(this, _operationError, __runInitializers(_init111, 44, this, "")), __runInitializers(_init111, 47, this);
     __privateAdd(this, _pendingTicketId2, __runInitializers(_init111, 48, this, "")), __runInitializers(_init111, 51, this);
-    __privateAdd(this, _draggingTicketId2, __runInitializers(_init111, 52, this, "")), __runInitializers(_init111, 55, this);
-    __privateAdd(this, _openingTicket, __runInitializers(_init111, 56, this, false)), __runInitializers(_init111, 59, this);
+    __privateAdd(this, _openingTicket, __runInitializers(_init111, 52, this, false)), __runInitializers(_init111, 55, this);
     __publicField(this, "modal");
     __publicField(this, "modalOpening");
     __publicField(this, "detail");
@@ -184743,6 +185295,8 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
     __publicField(this, "commentDrafts", /* @__PURE__ */ new Map());
     __publicField(this, "ticketDrafts", /* @__PURE__ */ new Map());
     __publicField(this, "resolvedTickets", /* @__PURE__ */ new Map());
+    __publicField(this, "activeMove");
+    __publicField(this, "dragController", new KanbanDragController(this, (input) => this.persistMove(input), () => !this.pendingTicketId));
     __publicField(this, "searchTickets", /* @__PURE__ */ __name(async (query3, signal) => {
       const tickets = this.provider.searchTickets ? await this.provider.searchTickets(query3, signal) : this.tickets.filter((ticket) => ticketLabel(ticket).toLocaleLowerCase().includes(query3.toLocaleLowerCase()));
       if (!signal.aborted) for (const ticket of tickets) this.resolvedTickets.set(ticket.id, ticket);
@@ -184792,22 +185346,18 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
           if (previous3) void this.openTicket(previous3, false);
           break;
         }
-        case "kanban-drag-start":
-          this.draggingTicketId = detail.ticketId;
-          break;
-        case "kanban-drag-end":
-          this.draggingTicketId = "";
-          break;
       }
     }, "handleInteraction"));
   }
   async connectedCallback() {
     const connection = super.connectedCallback();
     for (const name of interactionEvents) this.addEventListener(name, this.handleInteraction);
+    this.dragController.connect();
     await connection;
   }
   updated() {
     this.syncDetail();
+    this.dragController.sync();
   }
   render() {
     const epics = sortKanbanTickets(this.tickets.filter((ticket) => ticket.kind === "epic"));
@@ -184845,10 +185395,12 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
       ${this.loading || this.openingTicket ? b2`<p class="caption" role="status">${this.loading ? "Loading board\u2026" : "Opening ticket\u2026"}</p>` : ""}
       ${this.error || this.operationError ? b2`<p class="error" role="alert">${this.error || this.operationError}</p>` : ""}
       ${!this.columns.length ? b2`<p class="empty">No columns configured.</p>` : b2`<div class="columns" aria-label=${this.heading}>
-        ${this.columns.map((column) => b2`<dees-kanban-column .column=${column} .columns=${this.columns}
+        ${directives_exports.repeat(this.columns, (column) => column.id, (column) => b2`<dees-kanban-column .column=${column} .columns=${this.columns}
+          .pointerManaged=${true}
           .tickets=${tasks.filter((ticket) => ticket.columnId === column.id)} .allTickets=${this.tickets}
-          .movable=${Boolean(this.provider.moveTicket) && !this.pendingTicketId} .canCreate=${Boolean(this.provider.createTicket)}
-          .pendingTicketId=${this.pendingTicketId} .draggingTicketId=${this.draggingTicketId}></dees-kanban-column>`)}</div>`}`;
+          .movable=${Boolean(this.provider.moveTicket)} .canCreate=${Boolean(this.provider.createTicket)}
+          .movesDisabled=${Boolean(this.pendingTicketId)}
+          .pendingTicketId=${this.pendingTicketId}></dees-kanban-column>`)}</div>`}`;
   }
   findTicket(id) {
     return this.tickets.find((ticket) => ticket.id === id) ?? this.resolvedTickets.get(id);
@@ -184972,29 +185524,44 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
   }
   /** Provider commits the move and supplies the new ordering. Hierarchy is never part of a move request. */
   async moveTicket(input) {
+    if (this.dragController.busy) return;
+    await this.persistMove(input, true);
+  }
+  async persistMove(input, animate = false) {
     const ticket = this.findTicket(input.ticketId);
-    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return;
+    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return false;
     if (!this.columns.some((column) => column.id === input.columnId)) {
       this.reportError(new Error("Unknown destination column."));
-      return;
+      return false;
     }
     const before = input.beforeTicketId ? this.findTicket(input.beforeTicketId) : void 0;
     if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) {
       this.reportError(new Error("Invalid insertion target."));
-      return;
+      return false;
     }
+    const operation = this.activeMove = /* @__PURE__ */ Symbol();
     this.pendingTicketId = ticket.id;
     this.operationError = "";
-    this.draggingTicketId = "";
     try {
       const changed2 = await this.provider.moveTicket(input);
+      if (this.activeMove !== operation) return false;
       if (!changed2.some((item) => item.id === ticket.id)) throw new Error("The move provider did not return the moved ticket.");
+      const positions = animate ? this.dragController.capture() : void 0;
       this.mergeTickets(changed2);
+      if (positions) {
+        await this.updateComplete;
+        await this.dragController.animateFrom(positions);
+      }
+      return true;
     } catch (error) {
-      this.reportError(error);
+      if (this.activeMove === operation) this.reportError(error);
+      return false;
     } finally {
-      this.pendingTicketId = "";
-      this.syncDetail();
+      if (this.activeMove === operation) {
+        this.activeMove = void 0;
+        this.pendingTicketId = "";
+        this.syncDetail();
+      }
     }
   }
   async saveTicket(ticketId, draft) {
@@ -185069,6 +185636,11 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
   }
   async disconnectedCallback() {
     for (const name of interactionEvents) this.removeEventListener(name, this.handleInteraction);
+    this.dragController.disconnect();
+    if (this.activeMove) {
+      this.activeMove = void 0;
+      this.pendingTicketId = "";
+    }
     this.openAbort?.abort();
     this.commentsAbort?.abort();
     void this.modal?.destroy();
@@ -185087,7 +185659,6 @@ _query2 = new WeakMap();
 _epicId = new WeakMap();
 _operationError = new WeakMap();
 _pendingTicketId2 = new WeakMap();
-_draggingTicketId2 = new WeakMap();
 _openingTicket = new WeakMap();
 __decorateElement(_init111, 4, "heading", _heading_dec8, _DeesKanban, _heading8);
 __decorateElement(_init111, 4, "tickets", _tickets_dec3, _DeesKanban, _tickets3);
@@ -185100,7 +185671,6 @@ __decorateElement(_init111, 4, "query", _query_dec2, _DeesKanban, _query2);
 __decorateElement(_init111, 4, "epicId", _epicId_dec, _DeesKanban, _epicId);
 __decorateElement(_init111, 4, "operationError", _operationError_dec, _DeesKanban, _operationError);
 __decorateElement(_init111, 4, "pendingTicketId", _pendingTicketId_dec2, _DeesKanban, _pendingTicketId2);
-__decorateElement(_init111, 4, "draggingTicketId", _draggingTicketId_dec2, _DeesKanban, _draggingTicketId2);
 __decorateElement(_init111, 4, "openingTicket", _openingTicket_dec, _DeesKanban, _openingTicket);
 _DeesKanban = __decorateElement(_init111, 0, "DeesKanban", _DeesKanban_decorators, _DeesKanban);
 __name(_DeesKanban, "DeesKanban");
@@ -196892,9 +197462,9 @@ var AnnotationEditor = class _AnnotationEditor {
     } = this.getClientDimensions();
     const {
       innerHeight: innerHeight2,
-      innerWidth
+      innerWidth: innerWidth2
     } = window;
-    return left < innerWidth && right > 0 && top < innerHeight2 && bottom > 0;
+    return left < innerWidth2 && right > 0 && top < innerHeight2 && bottom > 0;
   }
   #addFocusListeners() {
     if (this.#focusAC || !this.div) {
@@ -226533,7 +227103,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "13.0.1",
+  version: "13.0.2",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };