Floating Drag Overlays & Dynamic StyleX Functions

import { Card } from '@astryxdesign/core/Card';
import { BoardCardBody } from './BoardCardBody';
import { styles } from '../styles';
import type { DragState, WorkItem } from '../types';

interface FloatingCardProps {
  drag: DragState;
  item: WorkItem;
}

export function FloatingCard({ drag, item }: FloatingCardProps) {
  return (
    <Card
      padding={3}
      xstyle={[
        styles.floating,
        styles.floatingAt(
          drag.pointerX - drag.offsetX,
          drag.pointerY - drag.offsetY,
          drag.width,
        ),
      ]}
    >
      <BoardCardBody item={item} onMove={() => {}} />
    </Card>
  );
}

'use client';

import { useState } from 'react';
import { useState, type ReactNode } from 'react';
import { Section } from '@astryxdesign/core/Section';
import {
  Layout,
  LayoutHeader,
  LayoutContent,
  HStack,
  VStack,
} from '@astryxdesign/core/Layout';
import { styles } from '../styles';
import { BoardCard } from './BoardCard';
import { BoardColumn } from './BoardColumn';
import { BoardToolbar } from './BoardToolbar';
import { FloatingCard } from './FloatingCard';
import { useKanbanDrag } from '../hooks/useKanbanDrag';
import { COLUMNS, INITIAL_ITEMS } from '../data';
import type { ColumnId, WorkItem } from '../types';

export default function KanbanBoard() {
  const [items, setItems] = useState<WorkItem[]>(INITIAL_ITEMS);
  const [sprint, setSprint] = useState('003');

  const { drag, itemsByColumn, getColumnRef, getCardRef, onCardPointerDown } =
    useKanbanDrag(items, setItems);

  const moveItem = (id: string, to: ColumnId) => {
    setItems(prev =>
      prev.map(item => (item.id === id ? { ...item, column: to } : item)),
    );
  };

  const renderColumnCards = (colId: ColumnId): ReactNode => {
    const colItems = itemsByColumn[colId];
    // The column's cards, minus the one currently being dragged
    // (it's following the pointer, not sitting in the list).
    const visible = drag ? colItems.filter(it => it.id !== drag.id) : colItems;
    // Only the column the pointer is over gets the ghost slot.
    const ghostTarget =
      drag && drag.target && drag.target.column === colId ? drag : null;

    // An empty, non-target column falls back to BoardColumn's EmptyState.
    if (visible.length === 0 && !ghostTarget) {
      return null;
    }

    const nodes: ReactNode[] = visible.map(it => (
      <BoardCard
        key={it.id}
        item={it}
        cardRef={getCardRef(it.id)}
        onPointerDown={onCardPointerDown}
        onMove={moveItem}
      />
    ));

    if (ghostTarget && ghostTarget.target) {
      const index = Math.min(ghostTarget.target.index, nodes.length);
      nodes.splice(
        index,
        0,
        <VStack key="drag-ghost" xstyle={styles.ghost(ghostTarget.height)} />,
      );
    }

    return <VStack gap={2}>{nodes}</VStack>;
  };

  const draggedItem = drag ? items.find(it => it.id === drag.id) : undefined;

  return (
    <Section height="100dvh">
      <Layout
        height="fill"
        header={
          <LayoutHeader hasDivider padding={4}>
            <BoardToolbar
              totalTasks={items.length}
              sprint={sprint}
              onSprintChange={setSprint}
              dragStatus={
                drag
                  ? `Dragging ${drag.id} → ${
                      drag.target
                        ? `${drag.target.column} #${drag.target.index}`
                        : 'no target'
                    }`
                  : undefined
              }
            />
          </LayoutHeader>
        }
        content={
          <LayoutContent padding={0}>
            <HStack gap={4} xstyle={styles.boardColumns}>
              {COLUMNS.map(col => (
                  <BoardColumn
                    key={col.id}
                    meta={col}
                    count={itemsByColumn[col.id].length}
                    contentRef={getColumnRef(col.id)}
                  >
                    {/* null children trigger BoardColumn's EmptyState fallback */}
                    {itemsByColumn[col.id].length > 0 ? (
                      <VStack gap={2}>
                        {itemsByColumn[col.id].map(item => (
                          <BoardCard
                            key={item.id}
                            item={item}
                            cardRef={getCardRef(item.id)}
                            onPointerDown={onCardPointerDown}
                            onMove={moveItem}
                          />
                        ))}
                      </VStack>
                    ) : null}
                  </BoardColumn>
              ))}
              {COLUMNS.map(meta => (
                <BoardColumn
                  key={meta.id}
                  meta={meta}
                  count={itemsByColumn[meta.id].length}
                  contentRef={getColumnRef(meta.id)}
                >
                  {renderColumnCards(meta.id)}
                </BoardColumn>
              ))}
            </HStack>
          </LayoutContent>
        }
      />
      {drag && draggedItem ? (
        <FloatingCard drag={drag} item={draggedItem} />
      ) : null}
    </Section>
  );
}