@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/kanban-board/kanban-board.svelte

@@ -1,543 +1,424 @@
 <script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Controlled multi-column board for reordering cards within and across workflow columns with keyboard, pointer, and live-region feedback.
-   * @tag board
-   * @tag kanban
-   * @tag drag
-   * @tag reorder
-   * @useWhen Presenting a workflow board where users move cards between ordered columns.
-   * @useWhen Consumers own card rendering and need cinder to manage reorder affordances and change metadata.
-   * @avoidWhen Showing a single ordered list — use sortable-list instead.
-   * @avoidWhen Sorting by computed fields rather than direct manual placement.
-   * @related sortable-list, grid-list, data-list
-   */
-  export type {
-    KanbanBoardCardContext,
-    KanbanBoardChange,
-    KanbanBoardColumn,
-    KanbanBoardColumnContext,
-    KanbanBoardProps,
-  } from './kanban-board.types.ts';
+export {};
 </script>
 
 <script lang="ts" generics="Card">
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import {
-    SortableController,
-    setSortableContext,
-  } from '../../utilities/sortable-controller.svelte.ts';
-  import { useAnnouncer } from '../../utilities/use-announcer.svelte.ts';
-  import SortableItem from '../_sortable-item.svelte';
-  import {
-    buildCardLocationMap,
-    findCard,
-    findNextVisibleColumn,
-    moveKanbanCard,
-    moveKanbanColumn,
-    toggleKanbanColumn,
-    validateKanbanBoardKeys,
-    type CardMoveTarget,
-  } from './kanban-board-helpers.ts';
-  import type {
-    KanbanBoardCardContext,
-    KanbanBoardColumn,
-    KanbanBoardColumnContext,
-    KanbanBoardProps,
-  } from './kanban-board.types.ts';
-
-  let {
-    columns,
-    getCardKey,
-    getCardLabel,
-    onchange,
-    card,
-    columnHeader,
-    columnActions,
-    emptyColumn,
-    label,
-    collapsible = false,
-    reorderColumns = true,
-    class: className,
-  }: KanbanBoardProps<Card> = $props();
-
-  const announcer = useAnnouncer({ clearDelay: 5000 });
-  const cardController = new SortableController<Card>({
+import { classNames } from '../../utilities/class-names.ts';
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { SortableController, setSortableContext, } from '../../utilities/sortable-controller.svelte.ts';
+import { useAnnouncer } from '../../utilities/use-announcer.svelte.ts';
+import SortableItem from '../_sortable-item.svelte';
+import { buildCardLocationMap, findCard, findNextVisibleColumn, moveKanbanCard, moveKanbanColumn, toggleKanbanColumn, validateKanbanBoardKeys, } from './kanban-board-helpers.ts';
+let { columns, getCardKey, getCardLabel, onchange, card, columnHeader, columnActions, emptyColumn, label, collapsible = false, reorderColumns = true, class: className, } = $props();
+const announcer = useAnnouncer({ clearDelay: 5000 });
+const cardController = new SortableController({
     announce: (message) => announcer.announce(message),
     announcements: {
-      lifted: (itemLabel, position, total) =>
-        `${itemLabel} lifted from position ${position} of ${total}. Use arrow keys to move, Space to drop, Escape to cancel.`,
-      moved: (itemLabel, position, total) =>
-        `${itemLabel} moved to position ${position} of ${total}.`,
-      dropped: (itemLabel, position, total) =>
-        `${itemLabel} dropped at position ${position} of ${total}.`,
-      cancelled: (itemLabel) => `${itemLabel} move cancelled.`,
+        lifted: (itemLabel, position, total) => `${itemLabel} lifted from position ${position} of ${total}. Use arrow keys to move, Space to drop, Escape to cancel.`,
+        moved: (itemLabel, position, total) => `${itemLabel} moved to position ${position} of ${total}.`,
+        dropped: (itemLabel, position, total) => `${itemLabel} dropped at position ${position} of ${total}.`,
+        cancelled: (itemLabel) => `${itemLabel} move cancelled.`,
     },
-  });
-
-  const baseId = $props.id();
-  const instructionsId = `${baseId}-instructions`;
-  const columnInstructionsId = `${baseId}-column-instructions`;
-  let columnsElement = $state<HTMLElement | null>(null);
-  let cardTarget = $state<CardMoveTarget | null>(null);
-  let pointerColumnIndex = $state<number | null>(null);
-  let columnLiftedKey = $state<string | number | null>(null);
-  let columnTargetIndex = $state<number | null>(null);
-  let crossColumnPlaceholderBlockSize = $state<string | null>(null);
-  let lastInvalidKeyWarning = '';
-
-  const keyValidation = $derived(validateKanbanBoardKeys(columns, getCardKey));
-  const invalidKeys = $derived(!keyValidation.valid);
-
-  // Index cards by key once per render so the card loop can resolve each card's
-  // original column/index in O(1) instead of calling findCard per-card (O(N²)).
-  // Built from the source `columns` (original positions) — getCardLabel must stay
-  // stable on the source position while visualColumns shows the preview reorder.
-  const cardLocations = $derived(buildCardLocationMap(columns, getCardKey));
-
-  const visualColumns = $derived.by(() => {
+});
+const baseId = $props.id();
+const instructionsId = `${baseId}-instructions`;
+const columnInstructionsId = `${baseId}-column-instructions`;
+let columnsElement = $state(null);
+let cardTarget = $state(null);
+let pointerColumnIndex = $state(null);
+let columnLiftedKey = $state(null);
+let columnTargetIndex = $state(null);
+let crossColumnPlaceholderBlockSize = $state(null);
+let lastInvalidKeyWarning = '';
+const keyValidation = $derived(validateKanbanBoardKeys(columns, getCardKey));
+const invalidKeys = $derived(!keyValidation.valid);
+// Index cards by key once per render so the card loop can resolve each card's
+// original column/index in O(1) instead of calling findCard per-card (O(N²)).
+// Built from the source `columns` (original positions) — getCardLabel must stay
+// stable on the source position while visualColumns shows the preview reorder.
+const cardLocations = $derived(buildCardLocationMap(columns, getCardKey));
+const visualColumns = $derived.by(() => {
     if (cardController.phase !== 'lifted' || cardController.liftedKey === null || !cardTarget) {
-      return columns;
+        return columns;
     }
     const located = findCard(columns, getCardKey, cardController.liftedKey);
-    if (!located || located.columnIndex !== cardTarget.columnIndex) return columns;
-    return (
-      moveKanbanCard(columns, getCardKey, cardController.liftedKey, cardTarget)?.nextColumns ??
-      columns
-    );
-  });
-
-  const crossColumnCardTarget = $derived.by((): CardMoveTarget | null => {
+    if (!located || located.columnIndex !== cardTarget.columnIndex)
+        return columns;
+    return (moveKanbanCard(columns, getCardKey, cardController.liftedKey, cardTarget)?.nextColumns ??
+        columns);
+});
+const crossColumnCardTarget = $derived.by(() => {
     if (cardController.phase !== 'lifted' || cardController.liftedKey === null || !cardTarget) {
-      return null;
+        return null;
     }
     const located = findCard(columns, getCardKey, cardController.liftedKey);
     const targetColumn = columns[cardTarget.columnIndex];
-    if (!located || !targetColumn || targetColumn.collapsed) return null;
-    if (located.columnIndex === cardTarget.columnIndex) return null;
+    if (!located || !targetColumn || targetColumn.collapsed)
+        return null;
+    if (located.columnIndex === cardTarget.columnIndex)
+        return null;
     return {
-      columnIndex: cardTarget.columnIndex,
-      cardIndex: Math.max(0, Math.min(cardTarget.cardIndex, targetColumn.cards.length)),
+        columnIndex: cardTarget.columnIndex,
+        cardIndex: Math.max(0, Math.min(cardTarget.cardIndex, targetColumn.cards.length)),
     };
-  });
-  const crossColumnPlaceholderStyle = $derived(
-    crossColumnPlaceholderBlockSize
-      ? `--cinder-kanban-board-drop-placeholder-block-size: ${crossColumnPlaceholderBlockSize};`
-      : undefined,
-  );
-
-  $effect(() => {
+});
+const crossColumnPlaceholderStyle = $derived(crossColumnPlaceholderBlockSize
+    ? `--cinder-kanban-board-drop-placeholder-block-size: ${crossColumnPlaceholderBlockSize};`
+    : undefined);
+$effect(() => {
     if (!invalidKeys) {
-      lastInvalidKeyWarning = '';
-      return;
+        lastInvalidKeyWarning = '';
+        return;
     }
     const duplicateColumns = [...keyValidation.duplicateColumnKeys].join(', ');
     const duplicateCards = [...keyValidation.duplicateCardKeys].join(', ');
     const warningSignature = `${duplicateColumns}|${duplicateCards}`;
-    if (warningSignature === lastInvalidKeyWarning) return;
+    if (warningSignature === lastInvalidKeyWarning)
+        return;
     lastInvalidKeyWarning = warningSignature;
-    devWarn(
-      `[cinder-kanban-board] duplicate keys disable reordering. Duplicate columns: ${duplicateColumns || 'none'}. Duplicate cards: ${duplicateCards || 'none'}.`,
-    );
-  });
-
-  $effect(() => {
-    if (!invalidKeys) return;
-    if (cardController.phase === 'lifted') cancelCardLift();
-    if (columnLiftedKey !== null) cancelColumnLift();
-  });
-
-  $effect(() => {
+    devWarn(`[cinder-kanban-board] duplicate keys disable reordering. Duplicate columns: ${duplicateColumns || 'none'}. Duplicate cards: ${duplicateCards || 'none'}.`);
+});
+$effect(() => {
+    if (!invalidKeys)
+        return;
+    if (cardController.phase === 'lifted')
+        cancelCardLift();
+    if (columnLiftedKey !== null)
+        cancelColumnLift();
+});
+$effect(() => {
     if (!columnsElement || !crossColumnCardTarget || cardController.liftedKey === null) {
-      crossColumnPlaceholderBlockSize = null;
-      return;
+        crossColumnPlaceholderBlockSize = null;
+        return;
     }
-
     const liftedRow = getLiftedRowElement();
     const liftedHeight = liftedRow?.getBoundingClientRect().height ?? 0;
-
     crossColumnPlaceholderBlockSize = liftedHeight > 0 ? `${liftedHeight}px` : null;
-  });
-
-  $effect(() => {
+});
+$effect(() => {
     columns.forEach((column) => column.cards.forEach((currentCard) => getCardKey(currentCard)));
-    if (cardController.phase !== 'lifted' || cardController.liftedKey === null) return;
+    if (cardController.phase !== 'lifted' || cardController.liftedKey === null)
+        return;
     const located = findCard(columns, getCardKey, cardController.liftedKey);
     if (!located) {
-      cardController.cancel();
-      cardTarget = null;
-      return;
+        cardController.cancel();
+        cardTarget = null;
+        return;
     }
     if (!cardTarget) {
-      cardTarget = { columnIndex: located.columnIndex, cardIndex: located.cardIndex };
+        cardTarget = { columnIndex: located.columnIndex, cardIndex: located.cardIndex };
     }
-  });
-
-  function getColumnLabel(column: KanbanBoardColumn<Card>): string {
+});
+function getColumnLabel(column) {
     return column.title;
-  }
-
-  function getCardCount(column: KanbanBoardColumn<Card>): number {
+}
+function getCardCount(column) {
     return column.collapsed ? 0 : column.cards.length;
-  }
-
-  function makeCardContext(
-    column: KanbanBoardColumn<Card>,
-    columnIndex: number,
-    cardIndex: number,
-    isLifted: boolean,
-    isDropTarget: boolean,
-  ): KanbanBoardCardContext<Card> {
+}
+function makeCardContext(column, columnIndex, cardIndex, isLifted, isDropTarget) {
     return {
-      column,
-      columnIndex,
-      cardIndex,
-      visualIndex: cardIndex,
-      totalCards: column.cards.length,
-      isLifted,
-      isDropTarget,
+        column,
+        columnIndex,
+        cardIndex,
+        visualIndex: cardIndex,
+        totalCards: column.cards.length,
+        isLifted,
+        isDropTarget,
     };
-  }
-
-  function makeColumnContext(
-    column: KanbanBoardColumn<Card>,
-    columnIndex: number,
-  ): KanbanBoardColumnContext<Card> {
+}
+function makeColumnContext(column, columnIndex) {
     return {
-      column,
-      columnIndex,
-      totalColumns: columns.length,
-      isLifted: columnLiftedKey === column.id,
-      isDropTarget: columnTargetIndex === columnIndex,
-      collapsed: Boolean(column.collapsed),
-      canCollapse: collapsible,
-      canReorder: reorderColumns && !invalidKeys,
+        column,
+        columnIndex,
+        totalColumns: columns.length,
+        isLifted: columnLiftedKey === column.id,
+        isDropTarget: columnTargetIndex === columnIndex,
+        collapsed: Boolean(column.collapsed),
+        canCollapse: collapsible,
+        canReorder: reorderColumns && !invalidKeys,
     };
-  }
-
-  function getColumnCardListElement(columnElement: HTMLElement): HTMLElement | null {
-    return (
-      Array.from(columnElement.children).find(
-        (child): child is HTMLElement =>
-          child instanceof HTMLElement && child.classList.contains('cinder-kanban-board__cards'),
-      ) ?? null
-    );
-  }
-
-  function sortableRowMatchesKey(row: HTMLElement, key: string | number): boolean {
-    return (
-      row.getAttribute('data-key') === String(key) &&
-      row.getAttribute('data-key-type') === typeof key
-    );
-  }
-
-  function getLiftedRowElement(): HTMLElement | null {
-    if (!columnsElement || cardController.liftedKey === null) return null;
-    return (
-      Array.from(columnsElement.querySelectorAll<HTMLElement>('[data-sortable-row]')).find((row) =>
-        sortableRowMatchesKey(row, cardController.liftedKey as string | number),
-      ) ?? null
-    );
-  }
-
-  function getLiftedRowBlockSize(): number {
+}
+function getColumnCardListElement(columnElement) {
+    return (Array.from(columnElement.children).find((child) => child instanceof HTMLElement && child.classList.contains('cinder-kanban-board__cards')) ?? null);
+}
+function sortableRowMatchesKey(row, key) {
+    return (row.getAttribute('data-key') === String(key) &&
+        row.getAttribute('data-key-type') === typeof key);
+}
+function getLiftedRowElement() {
+    if (!columnsElement || cardController.liftedKey === null)
+        return null;
+    return (Array.from(columnsElement.querySelectorAll('[data-sortable-row]')).find((row) => sortableRowMatchesKey(row, cardController.liftedKey)) ?? null);
+}
+function getLiftedRowBlockSize() {
     return getLiftedRowElement()?.getBoundingClientRect().height ?? 0;
-  }
-
-  function getColumnDropZoneBottom(cardList: HTMLElement, liftedRowBlockSize: number): number {
+}
+function getColumnDropZoneBottom(cardList, liftedRowBlockSize) {
     return cardList.getBoundingClientRect().bottom + liftedRowBlockSize;
-  }
-
-  function locatePointerTarget(pointerX: number, pointerY: number): CardMoveTarget | null {
-    if (!columnsElement) return null;
+}
+function locatePointerTarget(pointerX, pointerY) {
+    if (!columnsElement)
+        return null;
     const liftedRowBlockSize = getLiftedRowBlockSize();
-    const columnElements = Array.from(columnsElement.children).filter(
-      (element): element is HTMLElement =>
-        element instanceof HTMLElement && element.classList.contains('cinder-kanban-board__column'),
-    );
+    const columnElements = Array.from(columnsElement.children).filter((element) => element instanceof HTMLElement && element.classList.contains('cinder-kanban-board__column'));
     const columnIndex = columnElements.findIndex((element) => {
-      const rect = element.getBoundingClientRect();
-      const cardList = getColumnCardListElement(element);
-      if (!cardList) return false;
-      return (
-        pointerX >= rect.left &&
-        pointerX <= rect.right &&
-        pointerY >= rect.top &&
-        pointerY <= getColumnDropZoneBottom(cardList, liftedRowBlockSize)
-      );
+        const rect = element.getBoundingClientRect();
+        const cardList = getColumnCardListElement(element);
+        if (!cardList)
+            return false;
+        return (pointerX >= rect.left &&
+            pointerX <= rect.right &&
+            pointerY >= rect.top &&
+            pointerY <= getColumnDropZoneBottom(cardList, liftedRowBlockSize));
     });
-    if (columnIndex < 0 || columns[columnIndex]?.collapsed) return null;
+    if (columnIndex < 0 || columns[columnIndex]?.collapsed)
+        return null;
     const columnElement = columnElements[columnIndex];
-    if (!columnElement) return null;
+    if (!columnElement)
+        return null;
     const cardList = getColumnCardListElement(columnElement);
     // Exclude the dragged card by its stable data-key attribute so the filter
     // works regardless of whether the card is in the keyboard-drag state
     // (cinder-sortable-item--lifted) or the pointer-drag state
     // (cinder-sortable-item--placeholder). Both states carry the same data-key.
     const draggedKey = cardController.liftedKey;
-    const rows = Array.from(cardList?.children ?? []).filter(
-      (row): row is HTMLElement =>
-        row instanceof HTMLElement &&
+    const rows = Array.from(cardList?.children ?? []).filter((row) => row instanceof HTMLElement &&
         row.hasAttribute('data-sortable-row') &&
-        (draggedKey === null || !sortableRowMatchesKey(row, draggedKey)),
-    );
+        (draggedKey === null || !sortableRowMatchesKey(row, draggedKey)));
     const insertionIndex = rows.filter((row) => {
-      const rect = row.getBoundingClientRect();
-      return rect.top + rect.height / 2 < pointerY;
+        const rect = row.getBoundingClientRect();
+        return rect.top + rect.height / 2 < pointerY;
     }).length;
     return { columnIndex, cardIndex: insertionIndex };
-  }
-
-  function hasCrossColumnPlaceholder(columnIndex: number): boolean {
+}
+function hasCrossColumnPlaceholder(columnIndex) {
     return crossColumnCardTarget?.columnIndex === columnIndex;
-  }
-
-  function shouldRenderCrossColumnPlaceholder(columnIndex: number, cardIndex: number): boolean {
-    return (
-      crossColumnCardTarget?.columnIndex === columnIndex &&
-      crossColumnCardTarget.cardIndex === cardIndex
-    );
-  }
-
-  function shouldRenderCrossColumnAppendPlaceholder(
-    column: KanbanBoardColumn<Card>,
-    columnIndex: number,
-  ): boolean {
-    return (
-      crossColumnCardTarget?.columnIndex === columnIndex &&
-      crossColumnCardTarget.cardIndex >= column.cards.length
-    );
-  }
-
-  function getDestinationTotal(target: CardMoveTarget, itemKey: string | number | null): number {
+}
+function shouldRenderCrossColumnPlaceholder(columnIndex, cardIndex) {
+    return (crossColumnCardTarget?.columnIndex === columnIndex &&
+        crossColumnCardTarget.cardIndex === cardIndex);
+}
+function shouldRenderCrossColumnAppendPlaceholder(column, columnIndex) {
+    return (crossColumnCardTarget?.columnIndex === columnIndex &&
+        crossColumnCardTarget.cardIndex >= column.cards.length);
+}
+function getDestinationTotal(target, itemKey) {
     const column = columns[target.columnIndex];
-    if (!column) return 1;
+    if (!column)
+        return 1;
     const located = itemKey === null ? null : findCard(columns, getCardKey, itemKey);
     const sameColumn = located?.columnIndex === target.columnIndex;
     return Math.max(1, sameColumn ? column.cards.length : column.cards.length + 1);
-  }
-
-  function announceTarget(itemLabel: string): void {
-    if (!cardTarget) return;
+}
+function announceTarget(itemLabel) {
+    if (!cardTarget)
+        return;
     const column = columns[cardTarget.columnIndex];
-    if (!column) return;
+    if (!column)
+        return;
     const total = getDestinationTotal(cardTarget, cardController.liftedKey);
-    announcer.announce(
-      `${itemLabel} moved to ${column.title}, position ${cardTarget.cardIndex + 1} of ${total}.`,
-    );
-  }
-
-  setSortableContext({
+    announcer.announce(`${itemLabel} moved to ${column.title}, position ${cardTarget.cardIndex + 1} of ${total}.`);
+}
+setSortableContext({
     get controller() {
-      return cardController as SortableController<unknown>;
+        return cardController;
     },
     commitDrop(itemKey, itemLabel) {
-      if (invalidKeys || !cardTarget) {
-        cancelCardLift(itemLabel);
-        return;
-      }
-      const destinationColumn = columns[cardTarget.columnIndex];
-      if (!destinationColumn || destinationColumn.collapsed) {
-        cancelCardLift(itemLabel);
-        return;
-      }
-      const located = findCard(columns, getCardKey, itemKey);
-      if (!located) {
-        cancelCardLift(itemLabel);
-        return;
-      }
-      const dropTotal = getDestinationTotal(cardTarget, itemKey);
-      const result = moveKanbanCard(columns, getCardKey, itemKey, cardTarget);
-      cardController.completeDrop(itemLabel, dropTotal);
-      cardTarget = null;
-      pointerColumnIndex = null;
-      if (result) onchange(result.nextColumns, result.change);
+        if (invalidKeys || !cardTarget) {
+            cancelCardLift(itemLabel);
+            return;
+        }
+        const destinationColumn = columns[cardTarget.columnIndex];
+        if (!destinationColumn || destinationColumn.collapsed) {
+            cancelCardLift(itemLabel);
+            return;
+        }
+        const located = findCard(columns, getCardKey, itemKey);
+        if (!located) {
+            cancelCardLift(itemLabel);
+            return;
+        }
+        const dropTotal = getDestinationTotal(cardTarget, itemKey);
+        const result = moveKanbanCard(columns, getCardKey, itemKey, cardTarget);
+        cardController.completeDrop(itemLabel, dropTotal);
+        cardTarget = null;
+        pointerColumnIndex = null;
+        if (result)
+            onchange(result.nextColumns, result.change);
     },
     cancel(itemLabel) {
-      cardController.cancel(itemLabel);
-      cardTarget = null;
-      pointerColumnIndex = null;
+        cardController.cancel(itemLabel);
+        cardTarget = null;
+        pointerColumnIndex = null;
     },
     lift(key, fromIndex, itemLabel, total) {
-      if (invalidKeys || columnLiftedKey !== null) return;
-      const located = findCard(columns, getCardKey, key);
-      if (!located || located.column.collapsed) return;
-      cardTarget = { columnIndex: located.columnIndex, cardIndex: located.cardIndex };
-      cardController.lift(key, fromIndex, itemLabel, total);
+        if (invalidKeys || columnLiftedKey !== null)
+            return;
+        const located = findCard(columns, getCardKey, key);
+        if (!located || located.column.collapsed)
+            return;
+        cardTarget = { columnIndex: located.columnIndex, cardIndex: located.cardIndex };
+        cardController.lift(key, fromIndex, itemLabel, total);
     },
     move(toIndex, itemLabel, _total) {
-      if (!cardTarget) return;
-      const previousTarget = cardTarget;
-      const targetColumnIndex = pointerColumnIndex ?? cardTarget.columnIndex;
-      const column = columns[targetColumnIndex];
-      if (!column || column.collapsed) return;
-      const located =
-        cardController.liftedKey === null
-          ? null
-          : findCard(columns, getCardKey, cardController.liftedKey);
-      const allowAppend = pointerColumnIndex !== null || located?.columnIndex !== targetColumnIndex;
-      const maxCardIndex = allowAppend
-        ? getCardCount(column)
-        : Math.max(0, getCardCount(column) - 1);
-      const cardIndex = Math.max(0, Math.min(toIndex, maxCardIndex));
-      cardTarget = { columnIndex: targetColumnIndex, cardIndex };
-      const destinationTotal = getDestinationTotal(cardTarget, cardController.liftedKey);
-      const targetChanged =
-        previousTarget.columnIndex !== cardTarget.columnIndex ||
-        previousTarget.cardIndex !== cardTarget.cardIndex;
-      cardController.move(cardIndex, itemLabel, destinationTotal, { announce: false });
-      if (targetChanged) announceTarget(itemLabel);
-      pointerColumnIndex = null;
+        if (!cardTarget)
+            return;
+        const previousTarget = cardTarget;
+        const targetColumnIndex = pointerColumnIndex ?? cardTarget.columnIndex;
+        const column = columns[targetColumnIndex];
+        if (!column || column.collapsed)
+            return;
+        const located = cardController.liftedKey === null
+            ? null
+            : findCard(columns, getCardKey, cardController.liftedKey);
+        const allowAppend = pointerColumnIndex !== null || located?.columnIndex !== targetColumnIndex;
+        const maxCardIndex = allowAppend
+            ? getCardCount(column)
+            : Math.max(0, getCardCount(column) - 1);
+        const cardIndex = Math.max(0, Math.min(toIndex, maxCardIndex));
+        cardTarget = { columnIndex: targetColumnIndex, cardIndex };
+        const destinationTotal = getDestinationTotal(cardTarget, cardController.liftedKey);
+        const targetChanged = previousTarget.columnIndex !== cardTarget.columnIndex ||
+            previousTarget.cardIndex !== cardTarget.cardIndex;
+        cardController.move(cardIndex, itemLabel, destinationTotal, { announce: false });
+        if (targetChanged)
+            announceTarget(itemLabel);
+        pointerColumnIndex = null;
     },
     getPointerTarget({ pointerX, pointerY }) {
-      const target = locatePointerTarget(pointerX, pointerY);
-      if (!target) return null;
-      pointerColumnIndex = target.columnIndex;
-      const column = columns[target.columnIndex];
-      return {
-        index: target.cardIndex,
-        total: Math.max(1, getCardCount(column as KanbanBoardColumn<Card>)),
-      };
+        const target = locatePointerTarget(pointerX, pointerY);
+        if (!target)
+            return null;
+        pointerColumnIndex = target.columnIndex;
+        const column = columns[target.columnIndex];
+        return {
+            index: target.cardIndex,
+            total: Math.max(1, getCardCount(column)),
+        };
     },
     handleLiftedKeydown({ event, itemLabel }) {
-      if (!cardTarget || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return false;
-      event.preventDefault();
-      const direction = event.key === 'ArrowRight' ? 1 : -1;
-      const nextColumnIndex = findNextVisibleColumn(columns, cardTarget.columnIndex, direction);
-      if (nextColumnIndex === null) {
-        announcer.announce(`${itemLabel} has no available column in that direction.`);
+        if (!cardTarget || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight'))
+            return false;
+        event.preventDefault();
+        const direction = event.key === 'ArrowRight' ? 1 : -1;
+        const nextColumnIndex = findNextVisibleColumn(columns, cardTarget.columnIndex, direction);
+        if (nextColumnIndex === null) {
+            announcer.announce(`${itemLabel} has no available column in that direction.`);
+            return true;
+        }
+        const nextColumn = columns[nextColumnIndex];
+        cardTarget = {
+            columnIndex: nextColumnIndex,
+            cardIndex: Math.max(0, Math.min(cardTarget.cardIndex, nextColumn.cards.length)),
+        };
+        const destinationTotal = getDestinationTotal(cardTarget, cardController.liftedKey);
+        cardController.move(cardTarget.cardIndex, itemLabel, destinationTotal, { announce: false });
+        announceTarget(itemLabel);
         return true;
-      }
-      const nextColumn = columns[nextColumnIndex] as KanbanBoardColumn<Card>;
-      cardTarget = {
-        columnIndex: nextColumnIndex,
-        cardIndex: Math.max(0, Math.min(cardTarget.cardIndex, nextColumn.cards.length)),
-      };
-      const destinationTotal = getDestinationTotal(cardTarget, cardController.liftedKey);
-      cardController.move(cardTarget.cardIndex, itemLabel, destinationTotal, { announce: false });
-      announceTarget(itemLabel);
-      return true;
     },
-  });
-
-  function cancelCardLift(itemLabel: string | undefined = undefined): void {
+});
+function cancelCardLift(itemLabel = undefined) {
     cardController.cancel(itemLabel);
     cardTarget = null;
     pointerColumnIndex = null;
-  }
-
-  function cancelColumnLift(columnTitle: string | undefined = undefined): void {
+}
+function cancelColumnLift(columnTitle = undefined) {
     columnLiftedKey = null;
     columnTargetIndex = null;
-    if (columnTitle) announcer.announce(`${columnTitle} column move cancelled.`);
-  }
-
-  function handleWindowKeydown(event: KeyboardEvent): void {
+    if (columnTitle)
+        announcer.announce(`${columnTitle} column move cancelled.`);
+}
+function handleWindowKeydown(event) {
     if (cardController.phase === 'lifted' && event.key === 'Escape') {
-      event.preventDefault();
-      cancelCardLift();
-      return;
+        event.preventDefault();
+        cancelCardLift();
+        return;
     }
     if (columnLiftedKey !== null && event.key === 'Escape') {
-      event.preventDefault();
-      const column = columns.find((currentColumn) => currentColumn.id === columnLiftedKey);
-      cancelColumnLift(column?.title);
+        event.preventDefault();
+        const column = columns.find((currentColumn) => currentColumn.id === columnLiftedKey);
+        cancelColumnLift(column?.title);
     }
-  }
-
-  function toggleColumn(column: KanbanBoardColumn<Card>): void {
+}
+function toggleColumn(column) {
     const result = toggleKanbanColumn(columns, column.id);
-    if (!result) return;
-    announcer.announce(
-      `${column.title} ${result.change.type === 'collapse' && result.change.collapsed ? 'collapsed' : 'expanded'}.`,
-    );
+    if (!result)
+        return;
+    announcer.announce(`${column.title} ${result.change.type === 'collapse' && result.change.collapsed ? 'collapsed' : 'expanded'}.`);
     onchange(result.nextColumns, result.change);
-  }
-
-  function liftColumn(column: KanbanBoardColumn<Card>, columnIndex: number): void {
-    if (cardController.phase === 'lifted') return;
+}
+function liftColumn(column, columnIndex) {
+    if (cardController.phase === 'lifted')
+        return;
     columnLiftedKey = column.id;
     columnTargetIndex = columnIndex;
-    announcer.announce(
-      `${column.title} column lifted, position ${columnIndex + 1} of ${columns.length}.`,
-    );
-  }
-
-  function dropColumn(column: KanbanBoardColumn<Card>, targetIndex: number): void {
+    announcer.announce(`${column.title} column lifted, position ${columnIndex + 1} of ${columns.length}.`);
+}
+function dropColumn(column, targetIndex) {
     const result = moveKanbanColumn(columns, column.id, targetIndex);
     columnLiftedKey = null;
     columnTargetIndex = null;
-    announcer.announce(
-      `${column.title} column dropped at position ${targetIndex + 1} of ${columns.length}.`,
-    );
-    if (result) onchange(result.nextColumns, result.change);
-  }
-
-  function handleColumnClick(column: KanbanBoardColumn<Card>, columnIndex: number): void {
-    if (!reorderColumns || invalidKeys || cardController.phase === 'lifted') return;
+    announcer.announce(`${column.title} column dropped at position ${targetIndex + 1} of ${columns.length}.`);
+    if (result)
+        onchange(result.nextColumns, result.change);
+}
+function handleColumnClick(column, columnIndex) {
+    if (!reorderColumns || invalidKeys || cardController.phase === 'lifted')
+        return;
     if (columnLiftedKey === null) {
-      liftColumn(column, columnIndex);
-      return;
+        liftColumn(column, columnIndex);
+        return;
     }
     if (columnLiftedKey === column.id) {
-      dropColumn(column, columnTargetIndex ?? columnIndex);
+        dropColumn(column, columnTargetIndex ?? columnIndex);
     }
-  }
-
-  function handleColumnKeydown(
-    event: KeyboardEvent,
-    column: KanbanBoardColumn<Card>,
-    columnIndex: number,
-  ): void {
-    if (!reorderColumns || invalidKeys || cardController.phase === 'lifted') return;
+}
+function handleColumnKeydown(event, column, columnIndex) {
+    if (!reorderColumns || invalidKeys || cardController.phase === 'lifted')
+        return;
     if (columnLiftedKey === null) {
-      // Space/Enter in the idle state: do nothing here. The native button will
-      // synthesize a click on Space/Enter keyup, which handleColumnClick will
-      // handle to liftColumn. Handling Space/Enter in both keydown and the
-      // subsequent synthesized click caused an immediate lift-then-drop.
-      return;
+        // Space/Enter in the idle state: do nothing here. The native button will
+        // synthesize a click on Space/Enter keyup, which handleColumnClick will
+        // handle to liftColumn. Handling Space/Enter in both keydown and the
+        // subsequent synthesized click caused an immediate lift-then-drop.
+        return;
     }
-    if (columnLiftedKey !== column.id) return;
+    if (columnLiftedKey !== column.id)
+        return;
     const currentTarget = columnTargetIndex ?? columnIndex;
     if (event.key === 'Escape') {
-      event.preventDefault();
-      cancelColumnLift(column.title);
-      return;
+        event.preventDefault();
+        cancelColumnLift(column.title);
+        return;
     }
     if (event.key === 'Tab') {
-      cancelColumnLift(column.title);
-      return;
+        cancelColumnLift(column.title);
+        return;
     }
     if (event.key === ' ' || event.key === 'Enter') {
-      // Prevent the default action so the browser does not synthesize a click
-      // event on keyup — for Space, preventDefault() on keydown suppresses the
-      // synthetic keyup-click, so handleColumnClick never fires after the column
-      // is already dropped and columnLiftedKey is null again.
-      event.preventDefault();
-      dropColumn(column, currentTarget);
-      return;
+        // Prevent the default action so the browser does not synthesize a click
+        // event on keyup — for Space, preventDefault() on keydown suppresses the
+        // synthetic keyup-click, so handleColumnClick never fires after the column
+        // is already dropped and columnLiftedKey is null again.
+        event.preventDefault();
+        dropColumn(column, currentTarget);
+        return;
     }
-    const nextIndex =
-      event.key === 'ArrowLeft'
+    const nextIndex = event.key === 'ArrowLeft'
         ? currentTarget - 1
         : event.key === 'ArrowRight'
-          ? currentTarget + 1
-          : event.key === 'Home'
-            ? 0
-            : event.key === 'End'
-              ? columns.length - 1
-              : currentTarget;
+            ? currentTarget + 1
+            : event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? columns.length - 1
+                    : currentTarget;
     if (nextIndex !== currentTarget) {
-      event.preventDefault();
-      columnTargetIndex = Math.max(0, Math.min(nextIndex, columns.length - 1));
-      announcer.announce(
-        `${column.title} column moved to position ${(columnTargetIndex ?? 0) + 1} of ${columns.length}.`,
-      );
+        event.preventDefault();
+        columnTargetIndex = Math.max(0, Math.min(nextIndex, columns.length - 1));
+        announcer.announce(`${column.title} column moved to position ${(columnTargetIndex ?? 0) + 1} of ${columns.length}.`);
     }
-  }
+}
 </script>
 
 <svelte:window onkeydown={handleWindowKeydown} />