@ablogcms/kanban 3.2.28-beta.0

package/dist/index.mjs

@@ -0,0 +1,981 @@
+// src/components/Board.tsx
+import { useMemo as useMemo3, useRef as useRef4 } from "react";
+import { v4 as uuidv43 } from "uuid";
+
+// src/context/BoardContext.tsx
+import { createContext, useContext, useReducer } from "react";
+
+// src/helpers/LaneHelper.ts
+import { v4 as uuidv4 } from "uuid";
+var LaneHelper = {
+  initialiseLanes: (state, { lanes }) => {
+    const newLanes = lanes.map((lane) => ({
+      ...lane,
+      currentPage: 1,
+      cards: (lane.cards || []).map((c) => ({ ...c, laneId: lane.id }))
+    }));
+    return { ...state, lanes: newLanes };
+  },
+  paginateLane: (state, { laneId, newCards, nextPage }) => {
+    const updatedLanes = LaneHelper.appendCardsToLane(state, { laneId, newCards });
+    return {
+      ...state,
+      lanes: updatedLanes.map((lane) => lane.id === laneId ? { ...lane, currentPage: nextPage } : lane)
+    };
+  },
+  appendCardsToLane: (state, { laneId, newCards, index }) => {
+    const lane = state.lanes.find((l) => l.id === laneId);
+    if (!lane) return state.lanes;
+    const existingIds = new Set(lane.cards.map((c) => c.id));
+    const cardsWithLaneId = newCards.map((c) => ({ ...c, laneId })).filter((c) => !existingIds.has(c.id));
+    return state.lanes.map((l) => {
+      if (l.id !== laneId) return l;
+      if (index !== void 0) {
+        const cards = [...l.cards];
+        cards.splice(index, 0, ...cardsWithLaneId);
+        return { ...l, cards };
+      }
+      return { ...l, cards: [...l.cards, ...cardsWithLaneId] };
+    });
+  },
+  appendCardToLane: (state, { laneId, card, index }) => {
+    const newLanes = LaneHelper.appendCardsToLane(state, { laneId, newCards: [card], index });
+    return { ...state, lanes: newLanes };
+  },
+  addLane: (state, lane) => {
+    const newLane = { id: uuidv4(), cards: [], ...lane };
+    return { ...state, lanes: [...state.lanes, newLane] };
+  },
+  removeCardFromLane: (state, { laneId, cardId }) => {
+    const lanes = state.lanes.map((lane) => {
+      if (lane.id !== laneId) return lane;
+      return { ...lane, cards: lane.cards.filter((card) => card.id !== cardId) };
+    });
+    return { ...state, lanes };
+  },
+  moveCardAcrossLanes: (state, { fromLaneId: fromLaneId2, toLaneId: toLaneId2, cardId, index }) => {
+    let cardToMove = null;
+    const interimLanes = state.lanes.map((lane) => {
+      if (lane.id !== fromLaneId2) return lane;
+      cardToMove = lane.cards.find((card) => card.id === cardId) || null;
+      return { ...lane, cards: lane.cards.filter((card) => card.id !== cardId) };
+    });
+    if (!cardToMove) return state;
+    const interimState = { ...state, lanes: interimLanes };
+    return LaneHelper.appendCardToLane(interimState, { laneId: toLaneId2, card: cardToMove, index });
+  },
+  updateCardsForLane: (state, { laneId, cards }) => {
+    const lanes = state.lanes.map((lane) => {
+      if (lane.id !== laneId) return lane;
+      return { ...lane, cards };
+    });
+    return { ...state, lanes };
+  },
+  updateLanes: (state, lanes) => {
+    return { ...state, lanes };
+  },
+  moveLane: (state, { oldIndex, newIndex }) => {
+    const lanes = [...state.lanes];
+    const [laneToMove] = lanes.splice(oldIndex, 1);
+    lanes.splice(newIndex, 0, laneToMove);
+    return { ...state, lanes };
+  }
+};
+var LaneHelper_default = LaneHelper;
+
+// src/context/BoardReducer.ts
+var initialState = { lanes: [] };
+function boardReducer(state, action) {
+  switch (action.type) {
+    case "LOAD_BOARD":
+      return LaneHelper_default.initialiseLanes(state, action.payload);
+    case "ADD_CARD":
+      return LaneHelper_default.appendCardToLane(state, action.payload);
+    case "REMOVE_CARD":
+      return LaneHelper_default.removeCardFromLane(state, action.payload);
+    case "MOVE_CARD":
+      return LaneHelper_default.moveCardAcrossLanes(state, action.payload);
+    case "UPDATE_CARDS":
+      return LaneHelper_default.updateCardsForLane(state, action.payload);
+    case "UPDATE_LANES":
+      return LaneHelper_default.updateLanes(state, action.payload);
+    case "PAGINATE_LANE":
+      return LaneHelper_default.paginateLane(state, action.payload);
+    case "MOVE_LANE":
+      return LaneHelper_default.moveLane(state, action.payload);
+    case "ADD_LANE":
+      return LaneHelper_default.addLane(state, action.payload);
+    default:
+      return state;
+  }
+}
+
+// src/context/BoardContext.tsx
+import { jsx } from "react/jsx-runtime";
+var BoardStateContext = createContext(null);
+var BoardDispatchContext = createContext(null);
+function BoardProvider({ initialData, children }) {
+  const [state, dispatch] = useReducer(
+    boardReducer,
+    initialData,
+    (data) => boardReducer(initialState, { type: "LOAD_BOARD", payload: data })
+  );
+  return /* @__PURE__ */ jsx(BoardStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(BoardDispatchContext.Provider, { value: dispatch, children }) });
+}
+function useBoardState() {
+  const ctx = useContext(BoardStateContext);
+  if (!ctx) throw new Error("useBoardState must be used within BoardProvider");
+  return ctx;
+}
+function useBoardDispatch() {
+  const ctx = useContext(BoardDispatchContext);
+  if (!ctx) throw new Error("useBoardDispatch must be used within BoardProvider");
+  return ctx;
+}
+
+// src/components/BoardContainer.tsx
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  closestCorners
+} from "@dnd-kit/core";
+import {
+  SortableContext as SortableContext2,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  arrayMove
+} from "@dnd-kit/sortable";
+
+// src/components/SortableLane.tsx
+import { useSortable as useSortable2 } from "@dnd-kit/sortable";
+import { CSS as CSS2 } from "@dnd-kit/utilities";
+
+// src/components/Lane.tsx
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDroppable } from "@dnd-kit/core";
+import { v4 as uuidv42 } from "uuid";
+import Spinner from "@ablogcms/components/spinner";
+
+// src/components/Card.tsx
+import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+
+// src/components/widgets/DeleteButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function DeleteButton(props) {
+  return /* @__PURE__ */ jsx2("div", { className: "acms-admin-kanban-delete-wrapper", children: /* @__PURE__ */ jsx2("button", { type: "button", className: "acms-admin-kanban-delete-button", onClick: props.onClick, children: "x" }) });
+}
+var DeleteButton_default = DeleteButton;
+
+// src/utils/dndIds.ts
+var toLaneId = (id) => `lane:${id}`;
+var toCardId = (id) => `card:${id}`;
+var toDropLaneId = (id) => `droplane:${id}`;
+var fromLaneId = (id) => id.replace(/^lane:/, "");
+var fromCardId = (id) => id.replace(/^card:/, "");
+var fromDropLaneId = (id) => id.replace(/^droplane:/, "");
+var isLaneId = (id) => id.startsWith("lane:");
+var isCardId = (id) => id.startsWith("card:");
+var isDropLaneId = (id) => id.startsWith("droplane:");
+
+// src/components/Card.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Card({
+  card,
+  laneId,
+  editable = false,
+  hideCardDeleteIcon = false,
+  customCardLayout = false,
+  components: components2,
+  tagStyle,
+  cardStyle = {},
+  draggable = false,
+  cardDraggable = true,
+  onCardClick,
+  onCardDelete = () => {
+  },
+  onRemoveCard
+}) {
+  const isDraggingEnabled = draggable && cardDraggable;
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: toCardId(card.id),
+    disabled: !isDraggingEnabled
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : 1
+  };
+  const handleRemoveCard = (e) => {
+    if (onRemoveCard) onRemoveCard(laneId, card.id);
+    onCardDelete(card.id, laneId);
+    e.stopPropagation();
+  };
+  const handleClick = (e) => {
+    if (onCardClick) onCardClick(card.id, card.metadata, laneId);
+    e.stopPropagation();
+  };
+  const handleDelete = () => {
+    if (onRemoveCard) onRemoveCard(laneId, card.id);
+    onCardDelete(card.id, laneId);
+  };
+  const wrapperStyle = customCardLayout ? { ...cardStyle, padding: 0 } : cardStyle;
+  return (
+    // ドラッグ有効時は useSortable の attributes/listeners が role/tabIndex/キーボード操作を提供する。
+    // 無効時のクリックはカード選択という補助的な操作のため、キーボード対応は必須にしていない（既存挙動を維持）。
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ref: setNodeRef,
+        className: "acms-admin-kanban-card",
+        "data-id": card.id,
+        style: { ...wrapperStyle, ...style },
+        onClick: handleClick,
+        ...isDraggingEnabled ? { ...attributes, ...listeners } : {},
+        children: [
+          /* @__PURE__ */ jsx3(components2.Card, { card, laneId, tagStyle, onDelete: handleDelete }),
+          editable && !hideCardDeleteIcon && /* @__PURE__ */ jsx3(DeleteButton_default, { onClick: handleRemoveCard })
+        ]
+      }
+    )
+  );
+}
+var Card_default = Card;
+
+// src/components/Lane.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Lane({
+  lane,
+  boardId: _boardId,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  index: _index,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  draggable = false,
+  cardDraggable = true,
+  collapsibleLanes = false,
+  editable = false,
+  hideCardDeleteIcon = false,
+  customCardLayout = false,
+  components: components2,
+  tagStyle,
+  cardStyle,
+  titleStyle,
+  labelStyle,
+  addCardTitle = "Add Card",
+  addCardLink,
+  onLaneScroll,
+  onCardClick,
+  onCardDelete = () => {
+  },
+  onCardAdd = () => {
+  },
+  onLaneClick,
+  laneSortFunction,
+  dragHandleListeners,
+  dragHandleAttributes
+}) {
+  const dispatch = useBoardDispatch();
+  const [loading, setLoading] = useState(false);
+  const [addCardMode, setAddCardMode] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const scrollRef = useRef(null);
+  const { id, cards = [], style, droppable, currentPage = 1 } = lane;
+  const { isOver, setNodeRef: setDropRef } = useDroppable({
+    id: toDropLaneId(id),
+    disabled: droppable === false
+  });
+  const handleScroll = useCallback(
+    (evt) => {
+      const node = evt.target;
+      const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
+      if (elemScrollPosition <= 0 && onLaneScroll && !loading) {
+        setLoading(true);
+        const nextPage = currentPage + 1;
+        onLaneScroll(nextPage, id).then((moreCards) => {
+          if (!moreCards || moreCards.length === 0) {
+            node.scrollTop -= 100;
+          } else {
+            dispatch({ type: "PAGINATE_LANE", payload: { laneId: id, newCards: moreCards, nextPage } });
+          }
+          setLoading(false);
+        });
+      }
+    },
+    [currentPage, id, loading, onLaneScroll, dispatch]
+  );
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (node) {
+      node.addEventListener("scroll", handleScroll);
+      return () => node.removeEventListener("scroll", handleScroll);
+    }
+  }, [handleScroll]);
+  const removeCard = (laneId, cardId) => {
+    dispatch({ type: "REMOVE_CARD", payload: { laneId, cardId } });
+  };
+  const addNewCard = (params) => {
+    const newCardId = uuidv42();
+    setAddCardMode(false);
+    const card = { id: newCardId, laneId: id, ...params };
+    dispatch({ type: "ADD_CARD", payload: { laneId: id, card } });
+    onCardAdd(card, id);
+  };
+  const toggleLaneCollapsed = () => {
+    if (collapsibleLanes) setCollapsed((c) => !c);
+  };
+  const renderAddCardLink = () => {
+    if (addCardLink) {
+      return /* @__PURE__ */ jsx4(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => setAddCardMode(true),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setAddCardMode(true);
+            }
+          },
+          children: addCardLink
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx4("button", { type: "button", className: "acms-admin-kanban-add-card-link", onClick: () => setAddCardMode(true), children: addCardTitle });
+  };
+  const renderFooter = () => {
+    if (collapsibleLanes && cards.length > 0) {
+      return /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "acms-admin-kanban-lane-footer",
+          onClick: toggleLaneCollapsed,
+          "aria-label": collapsed ? "Expand" : "Collapse",
+          children: /* @__PURE__ */ jsx4("span", { className: collapsed ? "acms-admin-kanban-expand-btn" : "acms-admin-kanban-collapse-btn" })
+        }
+      );
+    }
+    return null;
+  };
+  const sortedCards = useMemo(() => {
+    const showableCards = collapsed ? [] : cards;
+    if (!laneSortFunction) return showableCards;
+    return [...showableCards].sort(laneSortFunction);
+  }, [cards, collapsed, laneSortFunction]);
+  const cardIds = useMemo(() => sortedCards.map((c) => toCardId(c.id)), [sortedCards]);
+  return (
+    // レーン全体のクリックは任意コールバック用の補助的なフックであり、内部にカード/ボタン等の
+    // インタラクティブ要素を含むため要素自体をボタン化しない（既存挙動を維持）。
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs2(
+      "section",
+      {
+        style,
+        onClick: () => onLaneClick && onLaneClick(id),
+        draggable: false,
+        className: "acms-admin-kanban-lane",
+        children: [
+          /* @__PURE__ */ jsx4(
+            components2.LaneHeader,
+            {
+              lane,
+              titleStyle,
+              labelStyle,
+              dragHandleListeners,
+              dragHandleAttributes,
+              onToggleCollapsed: toggleLaneCollapsed
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              ref: (node) => {
+                scrollRef.current = node;
+                setDropRef(node);
+              },
+              className: `acms-admin-kanban-lane-scroll${isOver ? " acms-admin-kanban-lane-scroll-dragover" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx4(SortableContext, { items: cardIds, strategy: verticalListSortingStrategy, children: sortedCards.map((card) => /* @__PURE__ */ jsx4(
+                  Card_default,
+                  {
+                    card,
+                    laneId: id,
+                    draggable,
+                    cardDraggable,
+                    editable,
+                    hideCardDeleteIcon,
+                    customCardLayout,
+                    components: components2,
+                    tagStyle,
+                    cardStyle,
+                    onCardClick,
+                    onCardDelete,
+                    onRemoveCard: removeCard
+                  },
+                  card.id
+                )) }),
+                editable && !addCardMode && renderAddCardLink(),
+                addCardMode && /* @__PURE__ */ jsx4("span", { children: /* @__PURE__ */ jsx4(components2.NewCard, { laneId: id, onCancel: () => setAddCardMode(false), onAdd: addNewCard }) })
+              ]
+            }
+          ),
+          loading && /* @__PURE__ */ jsx4(Spinner, { size: 24, style: { display: "block", margin: "15px auto" } }),
+          renderFooter()
+        ]
+      },
+      id
+    )
+  );
+}
+var Lane_default = Lane;
+
+// src/components/SortableLane.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SortableLane({ lane, disabled = false, ...laneProps }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable2({
+    id: toLaneId(lane.id),
+    disabled,
+    data: { type: "LANE", lane }
+  });
+  const style = {
+    transform: CSS2.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : 1,
+    display: "inline-block"
+  };
+  return /* @__PURE__ */ jsx5("div", { ref: setNodeRef, style, children: /* @__PURE__ */ jsx5(
+    Lane_default,
+    {
+      lane,
+      dragHandleListeners: listeners,
+      dragHandleAttributes: attributes,
+      ...laneProps
+    }
+  ) });
+}
+var SortableLane_default = SortableLane;
+
+// src/components/DragOverlay/CardOverlay.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var overlayStyle = {
+  transform: "rotate(3deg)",
+  boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
+  cursor: "grabbing"
+};
+function CardOverlay({ card, components: components2, tagStyle, cardStyle = {}, customCardLayout = false }) {
+  const wrapperStyle = customCardLayout ? { ...cardStyle, padding: 0, ...overlayStyle } : { ...cardStyle, ...overlayStyle };
+  return /* @__PURE__ */ jsx6("article", { className: "acms-admin-kanban-card", "data-id": card.id, style: wrapperStyle, children: /* @__PURE__ */ jsx6(components2.Card, { card, laneId: card.laneId, tagStyle, onDelete: () => {
+  } }) });
+}
+var CardOverlay_default = CardOverlay;
+
+// src/components/DragOverlay/LaneOverlay.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var overlayStyle2 = {
+  transform: "rotate(3deg)",
+  boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
+  cursor: "grabbing",
+  opacity: 0.9
+};
+function LaneOverlay({ lane }) {
+  return /* @__PURE__ */ jsx7(
+    "section",
+    {
+      style: { ...lane.style || {}, ...overlayStyle2 },
+      className: "acms-admin-kanban-lane",
+      children: /* @__PURE__ */ jsx7("span", { style: { fontWeight: "bold", padding: "5px" }, children: lane.title })
+    }
+  );
+}
+var LaneOverlay_default = LaneOverlay;
+
+// src/components/BoardContainer.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function BoardContainer(props) {
+  const {
+    data,
+    id,
+    draggable = false,
+    laneDraggable = true,
+    style,
+    editable = false,
+    canAddLanes = false,
+    addLaneTitle = "+ Add another lane",
+    components: components2,
+    onDataChange = () => {
+    },
+    eventBusHandle,
+    handleLaneDragStart = () => {
+    },
+    handleLaneDragEnd = () => {
+    },
+    handleDragStart = () => {
+    },
+    handleDragEnd = () => {
+    }
+  } = props;
+  const state = useBoardState();
+  const dispatch = useBoardDispatch();
+  const [addLaneMode, setAddLaneMode] = useState2(false);
+  const [activeId, setActiveId] = useState2(null);
+  const [activeLaneId, setActiveLaneId] = useState2(null);
+  const prevStateRef = useRef2(state);
+  const prevDataRef = useRef2(data);
+  useEffect2(() => {
+    if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
+      dispatch({ type: "LOAD_BOARD", payload: data });
+      onDataChange(data);
+      prevDataRef.current = data;
+    }
+  }, [data, dispatch, onDataChange]);
+  useEffect2(() => {
+    if (state !== prevStateRef.current && prevStateRef.current.lanes.length > 0) {
+      onDataChange(state);
+      prevStateRef.current = state;
+    }
+  }, [state, onDataChange]);
+  useEffect2(() => {
+    if (!eventBusHandle) return;
+    const eventBus = {
+      publish: (event) => {
+        switch (event.type) {
+          case "ADD_CARD":
+            dispatch({ type: "ADD_CARD", payload: { laneId: event.laneId, card: event.card } });
+            break;
+          case "REMOVE_CARD":
+            dispatch({ type: "REMOVE_CARD", payload: { laneId: event.laneId, cardId: event.cardId } });
+            break;
+          case "REFRESH_BOARD":
+            dispatch({ type: "LOAD_BOARD", payload: event.data });
+            break;
+          case "MOVE_CARD":
+            dispatch({
+              type: "MOVE_CARD",
+              payload: {
+                fromLaneId: event.fromLaneId,
+                toLaneId: event.toLaneId,
+                cardId: event.cardId,
+                index: event.index
+              }
+            });
+            break;
+          case "UPDATE_LANES":
+            dispatch({ type: "UPDATE_LANES", payload: event.lanes });
+            break;
+          default:
+            break;
+        }
+      }
+    };
+    eventBusHandle(eventBus);
+  }, [eventBusHandle, dispatch]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const findCardLane = useCallback2(
+    (cardId) => {
+      return state.lanes.find((lane) => lane.cards.some((c) => c.id === cardId));
+    },
+    [state.lanes]
+  );
+  const handleDragStartEvent = (event) => {
+    const { active } = event;
+    setActiveId(active.id);
+    if (isCardId(active.id)) {
+      const cardId = fromCardId(active.id);
+      const lane = findCardLane(cardId);
+      if (lane) {
+        setActiveLaneId(lane.id);
+        handleDragStart(cardId, lane.id);
+      }
+    } else if (isLaneId(active.id)) {
+      const laneId = fromLaneId(active.id);
+      handleLaneDragStart(laneId);
+    }
+  };
+  const handleDragOver = useCallback2(
+    (event) => {
+      const { active, over } = event;
+      if (!over || !isCardId(active.id)) return;
+      if (active.id === over.id) return;
+      const activeCardId = fromCardId(active.id);
+      const overId = over.id;
+      let overLaneId;
+      let overIndex;
+      if (isLaneId(overId) || isDropLaneId(overId)) {
+        overLaneId = isLaneId(overId) ? fromLaneId(overId) : fromDropLaneId(overId);
+        const overLane = state.lanes.find((l) => l.id === overLaneId);
+        overIndex = overLane?.cards.length ?? 0;
+      } else if (isCardId(overId)) {
+        const overCardId = fromCardId(overId);
+        const overLane = state.lanes.find((l) => l.cards.some((c) => c.id === overCardId));
+        if (!overLane) return;
+        overLaneId = overLane.id;
+        overIndex = overLane.cards.findIndex((c) => c.id === overCardId);
+      } else {
+        return;
+      }
+      const currentLaneId = activeLaneId || findCardLane(activeCardId)?.id;
+      if (!currentLaneId || currentLaneId === overLaneId) return;
+      const targetLane = state.lanes.find((l) => l.id === overLaneId);
+      if (targetLane?.droppable === false) return;
+      dispatch({
+        type: "MOVE_CARD",
+        payload: { fromLaneId: currentLaneId, toLaneId: overLaneId, cardId: activeCardId, index: overIndex }
+      });
+      setActiveLaneId(overLaneId);
+    },
+    [state.lanes, activeLaneId, findCardLane, dispatch]
+  );
+  const handleDragEndEvent = useCallback2(
+    (event) => {
+      const { active, over } = event;
+      if (over && isCardId(active.id)) {
+        const activeCardId = fromCardId(active.id);
+        if (isCardId(over.id)) {
+          const overCardId = fromCardId(over.id);
+          if (activeCardId !== overCardId) {
+            const lane = state.lanes.find((l) => l.cards.some((c) => c.id === activeCardId));
+            if (lane) {
+              const oldIndex = lane.cards.findIndex((c) => c.id === activeCardId);
+              const newIndex = lane.cards.findIndex((c) => c.id === overCardId);
+              if (oldIndex !== -1 && newIndex !== -1 && lane.cards[oldIndex]?.laneId === lane.cards[newIndex]?.laneId) {
+                const newCards = arrayMove(lane.cards, oldIndex, newIndex);
+                dispatch({ type: "UPDATE_CARDS", payload: { laneId: lane.id, cards: newCards } });
+                handleDragEnd(activeCardId, lane.id, lane.id, newIndex, lane.cards[oldIndex]);
+              }
+            }
+          }
+        }
+        if (activeLaneId) {
+          const finalLane = state.lanes.find((l) => l.id === activeLaneId);
+          const cardDetails = finalLane?.cards.find((c) => c.id === activeCardId);
+          const originalLane = findCardLane(activeCardId);
+          if (cardDetails && originalLane && originalLane.id !== activeLaneId) {
+            const position = finalLane?.cards.findIndex((c) => c.id === activeCardId) ?? 0;
+            handleDragEnd(activeCardId, originalLane.id, activeLaneId, position, cardDetails);
+          }
+        }
+      } else if (over && isLaneId(active.id)) {
+        const activeLaneIdStr = fromLaneId(active.id);
+        const overLaneIdStr = isLaneId(over.id) ? fromLaneId(over.id) : null;
+        if (overLaneIdStr && activeLaneIdStr !== overLaneIdStr) {
+          const oldIndex = state.lanes.findIndex((l) => l.id === activeLaneIdStr);
+          const newIndex = state.lanes.findIndex((l) => l.id === overLaneIdStr);
+          if (oldIndex !== -1 && newIndex !== -1) {
+            dispatch({ type: "MOVE_LANE", payload: { oldIndex, newIndex } });
+            const payload = state.lanes[oldIndex];
+            handleLaneDragEnd(activeLaneIdStr, newIndex, payload);
+          }
+        }
+      }
+      setActiveId(null);
+      setActiveLaneId(null);
+    },
+    [state.lanes, activeLaneId, findCardLane, dispatch, handleDragEnd, handleLaneDragEnd]
+  );
+  const activeCard = useMemo2(() => {
+    if (!activeId || !isCardId(activeId)) return null;
+    const cardId = fromCardId(activeId);
+    const lane = findCardLane(cardId);
+    return lane?.cards.find((c) => c.id === cardId) ?? null;
+  }, [activeId, findCardLane]);
+  const activeLane = useMemo2(() => {
+    if (!activeId || !isLaneId(activeId)) return null;
+    return state.lanes.find((l) => l.id === fromLaneId(activeId)) ?? null;
+  }, [activeId, state.lanes]);
+  const laneIds = useMemo2(() => state.lanes.map((l) => toLaneId(l.id)), [state.lanes]);
+  const {
+    onLaneScroll,
+    onCardClick,
+    onCardDelete,
+    onCardAdd,
+    onLaneClick,
+    addCardLink,
+    laneSortFunction,
+    cardDraggable,
+    collapsibleLanes,
+    hideCardDeleteIcon,
+    customCardLayout,
+    tagStyle,
+    cardDragClass,
+    addCardTitle
+  } = props;
+  const passthroughProps = {
+    onLaneScroll,
+    onCardClick,
+    onCardDelete,
+    onCardAdd,
+    onLaneClick,
+    addCardLink,
+    laneSortFunction,
+    draggable,
+    cardDraggable,
+    collapsibleLanes,
+    editable,
+    canAddLanes,
+    hideCardDeleteIcon,
+    customCardLayout,
+    components: components2,
+    tagStyle,
+    handleDragStart,
+    handleDragEnd,
+    cardDragClass,
+    addCardTitle
+  };
+  const addNewLane = (params) => {
+    setAddLaneMode(false);
+    dispatch({ type: "ADD_LANE", payload: params });
+  };
+  const renderNewLane = () => /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8(components2.NewLane, { onCancel: () => setAddLaneMode(false), onAdd: addNewLane }) });
+  const renderDragOverlayContent = () => {
+    if (activeCard) {
+      return /* @__PURE__ */ jsx8(
+        CardOverlay_default,
+        {
+          card: activeCard,
+          components: components2,
+          tagStyle: passthroughProps.tagStyle,
+          customCardLayout: passthroughProps.customCardLayout
+        }
+      );
+    }
+    if (activeLane) {
+      return /* @__PURE__ */ jsx8(LaneOverlay_default, { lane: activeLane });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs3(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCorners,
+      onDragStart: handleDragStartEvent,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEndEvent,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { style, draggable: false, className: "acms-admin-kanban-board", "data-boardid": id, children: [
+          /* @__PURE__ */ jsx8(SortableContext2, { items: laneIds, strategy: horizontalListSortingStrategy, children: state.lanes.map((lane, index) => {
+            const isLaneDraggable = draggable && laneDraggable && (lane.movable === void 0 ? true : lane.movable);
+            return /* @__PURE__ */ jsx8(
+              SortableLane_default,
+              {
+                lane,
+                boardId: `TrelloBoard${id}`,
+                index,
+                disabled: !isLaneDraggable,
+                laneDraggable,
+                ...passthroughProps
+              },
+              lane.id
+            );
+          }) }),
+          editable && canAddLanes && !addLaneMode && /* @__PURE__ */ jsx8(
+            "span",
+            {
+              role: "button",
+              tabIndex: 0,
+              style: { cursor: "pointer", padding: "10px", color: "#fff" },
+              onClick: () => setAddLaneMode(true),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setAddLaneMode(true);
+                }
+              },
+              children: addLaneTitle
+            }
+          ),
+          addLaneMode && renderNewLane()
+        ] }),
+        /* @__PURE__ */ jsx8(DragOverlay, { children: renderDragOverlayContent() })
+      ]
+    }
+  );
+}
+var BoardContainer_default = BoardContainer;
+
+// src/components/Tag.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Tag({ title, color, bgcolor, tagStyle }) {
+  const style = {
+    color: color || "white",
+    backgroundColor: bgcolor || "orange",
+    ...tagStyle
+  };
+  return /* @__PURE__ */ jsx9("span", { className: "acms-admin-kanban-tag", style, children: title });
+}
+var Tag_default = Tag;
+
+// src/components/DefaultCard.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function DefaultCard({ card, tagStyle }) {
+  const { title, description, label, tags } = card;
+  return /* @__PURE__ */ jsxs4("span", { children: [
+    /* @__PURE__ */ jsxs4("header", { className: "acms-admin-kanban-card-header", children: [
+      /* @__PURE__ */ jsx10("span", { className: "acms-admin-kanban-card-title", children: title }),
+      /* @__PURE__ */ jsx10("span", { className: "acms-admin-kanban-card-label", children: label })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "acms-admin-kanban-card-detail", children: description }),
+    tags && /* @__PURE__ */ jsx10("div", { className: "acms-admin-kanban-card-footer", children: tags.map((tag) => /* @__PURE__ */ jsx10(Tag_default, { ...tag, tagStyle }, tag.title)) })
+  ] });
+}
+var DefaultCard_default = DefaultCard;
+
+// src/components/DefaultLaneHeader.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function DefaultLaneHeader({
+  lane,
+  titleStyle,
+  labelStyle,
+  dragHandleListeners,
+  dragHandleAttributes,
+  onToggleCollapsed
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "header",
+    {
+      className: "acms-admin-kanban-lane-header",
+      onDoubleClick: onToggleCollapsed,
+      ...dragHandleListeners || {},
+      ...dragHandleAttributes || {},
+      children: [
+        /* @__PURE__ */ jsx11("span", { className: "acms-admin-kanban-lane-title", style: titleStyle, children: lane.title }),
+        lane.label && /* @__PURE__ */ jsx11("span", { className: "acms-admin-kanban-lane-label", children: /* @__PURE__ */ jsx11("span", { style: labelStyle, children: lane.label }) })
+      ]
+    }
+  );
+}
+var DefaultLaneHeader_default = DefaultLaneHeader;
+
+// src/components/NewCard.tsx
+import { useState as useState4 } from "react";
+import { Button } from "@ablogcms/components/button";
+
+// src/components/widgets/EditableLabel.tsx
+import { useRef as useRef3, useState as useState3, useEffect as useEffect3 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function EditableLabel({ onChange = () => {
+}, placeholder = "", autoFocus = false }) {
+  const [text, setText] = useState3("");
+  const divRef = useRef3(null);
+  useEffect3(() => {
+    if (autoFocus && divRef.current) {
+      divRef.current.focus();
+    }
+  }, [autoFocus]);
+  const onTextChange = (ev) => {
+    setText(ev.currentTarget.innerText);
+  };
+  const onBlur = () => {
+    onChange(text);
+  };
+  const onPaste = (ev) => {
+    ev.preventDefault();
+    const pastedText = ev.clipboardData.getData("text");
+    document.execCommand("insertText", false, pastedText);
+  };
+  const className = `acms-admin-kanban-editable-label${text === "" ? " acms-admin-kanban-editable-label--has-placeholder" : ""}`;
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref: divRef,
+      contentEditable: true,
+      className,
+      onPaste,
+      onBlur,
+      onInput: onTextChange,
+      "data-placeholder": placeholder,
+      suppressContentEditableWarning: true
+    }
+  );
+}
+var EditableLabel_default = EditableLabel;
+
+// src/components/NewCard.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function NewCard({
+  laneId: _laneId,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  onCancel,
+  onAdd
+}) {
+  const [formData, setFormData] = useState4({ title: "", label: "", description: "" });
+  const updateField = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleAdd = () => {
+    onAdd(formData);
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "acms-admin-kanban-new-lane", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "acms-admin-kanban-card", children: [
+      /* @__PURE__ */ jsxs6("header", { className: "acms-admin-kanban-card-header", children: [
+        /* @__PURE__ */ jsx13("span", { className: "acms-admin-kanban-card-title", children: /* @__PURE__ */ jsx13(EditableLabel_default, { placeholder: "title", onChange: (val) => updateField("title", val), autoFocus: true }) }),
+        /* @__PURE__ */ jsx13("span", { className: "acms-admin-kanban-card-label", children: /* @__PURE__ */ jsx13(EditableLabel_default, { placeholder: "label", onChange: (val) => updateField("label", val) }) })
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: "acms-admin-kanban-card-detail", children: /* @__PURE__ */ jsx13(EditableLabel_default, { placeholder: "description", onChange: (val) => updateField("description", val) }) })
+    ] }),
+    /* @__PURE__ */ jsx13(Button, { type: "button", variant: "success", onClick: handleAdd, children: "Add" }),
+    /* @__PURE__ */ jsx13(Button, { type: "button", variant: "text", onClick: onCancel, children: "Cancel" })
+  ] });
+}
+var NewCard_default = NewCard;
+
+// src/components/NewLane.tsx
+import { useState as useState5 } from "react";
+import { Button as Button2 } from "@ablogcms/components/button";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function NewLane({ onCancel, onAdd }) {
+  const [formData, setFormData] = useState5({ title: "" });
+  const updateField = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleAdd = () => {
+    onAdd(formData);
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "acms-admin-kanban-new-lane", children: [
+    /* @__PURE__ */ jsx14("div", { className: "acms-admin-kanban-new-lane-title", children: /* @__PURE__ */ jsx14(EditableLabel_default, { placeholder: "title", onChange: (val) => updateField("title", val), autoFocus: true }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "acms-admin-kanban-new-lane-buttons", children: [
+      /* @__PURE__ */ jsx14(Button2, { type: "button", variant: "success", onClick: handleAdd, children: "Add" }),
+      /* @__PURE__ */ jsx14(Button2, { type: "button", variant: "text", onClick: onCancel, children: "Cancel" })
+    ] })
+  ] });
+}
+var NewLane_default = NewLane;
+
+// src/components.ts
+var components = {
+  Card: DefaultCard_default,
+  LaneHeader: DefaultLaneHeader_default,
+  NewCard: NewCard_default,
+  NewLane: NewLane_default
+};
+
+// src/components/Board.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Board(props) {
+  const boardId = useRef4(uuidv43()).current;
+  const components2 = useMemo3(() => ({ ...components, ...props.components }), [props.components]);
+  return /* @__PURE__ */ jsx15(BoardProvider, { initialData: props.data, children: /* @__PURE__ */ jsx15(BoardContainer_default, { ...props, id: boardId, components: components2 }) });
+}
+var Board_default = Board;
+
+// src/index.ts
+var index_default = Board_default;
+export {
+  Board_default as Board,
+  Card_default as Card,
+  Lane_default as Lane,
+  Tag_default as Tag,
+  index_default as default
+};
+//# sourceMappingURL=index.mjs.map