fluxo-ui 0.0.1

package/kanban.js

@@ -0,0 +1,967 @@
+import { n as __toESM, t as require_classnames } from "./classnames-CEAOwX3h.js";
+import { t as Sortable } from "./drag-drop-UWg0agsw.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import './styles/kanban.css';//#region src/components/kanban-board/KanbanContext.ts
+var import_classnames = /* @__PURE__ */ __toESM(require_classnames(), 1);
+var KanbanContext = createContext(null);
+function useKanban() {
+	const ctx = useContext(KanbanContext);
+	if (!ctx) throw new Error("useKanban must be used within a KanbanBoard");
+	return ctx;
+}
+//#endregion
+//#region src/components/kanban-board/kanban-utils.ts
+function getCardsForColumn(cards, columnId) {
+	return cards.filter((card) => card.columnId === columnId).sort((a, b) => a.order - b.order);
+}
+function filterCards(cards, filter) {
+	let result = cards;
+	if (filter.query) {
+		const q = filter.query.toLowerCase();
+		result = result.filter((card) => card.title.toLowerCase().includes(q) || card.description?.toLowerCase().includes(q));
+	}
+	if (filter.priority?.length) result = result.filter((card) => card.priority && filter.priority.includes(card.priority));
+	if (filter.labels?.length) result = result.filter((card) => card.labels?.some((label) => filter.labels.includes(label.id)));
+	if (filter.assignees?.length) result = result.filter((card) => {
+		if (card.assignees?.length) return card.assignees.some((a) => filter.assignees.includes(a.id));
+		return card.assignee && filter.assignees.includes(card.assignee.id);
+	});
+	return result;
+}
+function isColumnOverLimit(column, cardCount) {
+	return column.limit !== void 0 && column.limit > 0 && cardCount > column.limit;
+}
+function getInitials(name) {
+	return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function formatDueDate(date) {
+	const d = typeof date === "string" ? new Date(date) : date;
+	const now = /* @__PURE__ */ new Date();
+	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	const target = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+	const diffDays = Math.round((target.getTime() - today.getTime()) / (1e3 * 60 * 60 * 24));
+	if (diffDays < 0) return {
+		text: `${Math.abs(diffDays)}d overdue`,
+		isOverdue: true,
+		isDueSoon: false
+	};
+	if (diffDays === 0) return {
+		text: "Due today",
+		isOverdue: false,
+		isDueSoon: true
+	};
+	if (diffDays === 1) return {
+		text: "Due tomorrow",
+		isOverdue: false,
+		isDueSoon: true
+	};
+	if (diffDays <= 3) return {
+		text: `Due in ${diffDays}d`,
+		isOverdue: false,
+		isDueSoon: true
+	};
+	return {
+		text: `${[
+			"Jan",
+			"Feb",
+			"Mar",
+			"Apr",
+			"May",
+			"Jun",
+			"Jul",
+			"Aug",
+			"Sep",
+			"Oct",
+			"Nov",
+			"Dec"
+		][d.getMonth()]} ${d.getDate()}`,
+		isOverdue: false,
+		isDueSoon: false
+	};
+}
+//#endregion
+//#region src/components/kanban-board/KanbanCard.tsx
+var priorityConfig = {
+	critical: {
+		className: "eui-kanban-priority-critical",
+		label: "Critical"
+	},
+	high: {
+		className: "eui-kanban-priority-high",
+		label: "High"
+	},
+	medium: {
+		className: "eui-kanban-priority-medium",
+		label: "Medium"
+	},
+	low: {
+		className: "eui-kanban-priority-low",
+		label: "Low"
+	},
+	none: {
+		className: "eui-kanban-priority-none",
+		label: "None"
+	}
+};
+function KanbanCard({ card, column, index }) {
+	const { props } = useKanban();
+	const { cardSize = "default", cardTemplate, cardActionsTemplate, allowDeleteCard, onCardClick, onCardDoubleClick, onCardDelete } = props;
+	const handleClick = useCallback((e) => {
+		onCardClick?.({
+			card,
+			column,
+			event: e
+		});
+	}, [
+		card,
+		column,
+		onCardClick
+	]);
+	const handleDoubleClick = useCallback((e) => {
+		onCardDoubleClick?.({
+			card,
+			column,
+			event: e
+		});
+	}, [
+		card,
+		column,
+		onCardDoubleClick
+	]);
+	const handleDelete = useCallback((e) => {
+		e.stopPropagation();
+		onCardDelete?.({
+			card,
+			columnId: column.id
+		});
+	}, [
+		card,
+		column.id,
+		onCardDelete
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onCardClick?.({
+				card,
+				column,
+				event: e
+			});
+		}
+		if (e.key === "Delete" && allowDeleteCard) onCardDelete?.({
+			card,
+			columnId: column.id
+		});
+	}, [
+		card,
+		column,
+		allowDeleteCard,
+		onCardClick,
+		onCardDelete
+	]);
+	const dueInfo = useMemo(() => card.dueDate ? formatDueDate(card.dueDate) : null, [card.dueDate]);
+	const allAssignees = useMemo(() => {
+		if (card.assignees?.length) return card.assignees;
+		if (card.assignee) return [card.assignee];
+		return [];
+	}, [card.assignee, card.assignees]);
+	const hasSubtasks = card.subtaskCount !== void 0 && card.subtaskCount > 0;
+	const subtaskPercent = hasSubtasks ? Math.round((card.subtaskCompleted ?? 0) / card.subtaskCount * 100) : 0;
+	if (cardTemplate) return /* @__PURE__ */ jsx("div", {
+		className: (0, import_classnames.default)("eui-kanban-card", `eui-kanban-card-${cardSize}`),
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		onKeyDown: handleKeyDown,
+		role: "article",
+		tabIndex: 0,
+		"aria-label": card.title,
+		"data-card-id": card.id,
+		"data-card-index": index,
+		children: cardTemplate(card, column)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: (0, import_classnames.default)("eui-kanban-card", `eui-kanban-card-${cardSize}`, {
+			"eui-kanban-card-blocked": card.blocked,
+			"eui-kanban-card-clickable": !!onCardClick
+		}),
+		style: card.color ? { borderLeftColor: card.color } : void 0,
+		onClick: handleClick,
+		onDoubleClick: handleDoubleClick,
+		onKeyDown: handleKeyDown,
+		role: "article",
+		tabIndex: 0,
+		"aria-label": `${card.title}${card.priority ? `, priority: ${card.priority}` : ""}${dueInfo ? `, ${dueInfo.text}` : ""}`,
+		"data-card-id": card.id,
+		"data-card-index": index,
+		children: [card.coverImage && cardSize === "detailed" && /* @__PURE__ */ jsx("div", {
+			className: "eui-kanban-card-cover",
+			children: /* @__PURE__ */ jsx("img", {
+				src: card.coverImage,
+				alt: "",
+				loading: "lazy"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "eui-kanban-card-body",
+			children: [
+				card.labels && card.labels.length > 0 && cardSize !== "compact" && /* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-card-labels",
+					role: "list",
+					"aria-label": "Labels",
+					children: card.labels.map((label) => /* @__PURE__ */ jsx("span", {
+						className: "eui-kanban-label",
+						style: { backgroundColor: label.color },
+						role: "listitem",
+						title: label.text,
+						children: cardSize === "detailed" ? label.text : ""
+					}, label.id))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-card-title",
+					children: card.title
+				}),
+				card.description && cardSize === "detailed" && /* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-card-description",
+					children: card.description
+				}),
+				card.progress !== void 0 && cardSize !== "compact" && /* @__PURE__ */ jsxs("div", {
+					className: "eui-kanban-card-progress",
+					role: "progressbar",
+					"aria-valuenow": card.progress,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "eui-kanban-card-progress-track",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "eui-kanban-card-progress-fill",
+							style: { width: `${card.progress}%` }
+						})
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "eui-kanban-card-progress-text",
+						children: [card.progress, "%"]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "eui-kanban-card-footer",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "eui-kanban-card-meta",
+						children: [
+							card.priority && card.priority !== "none" && /* @__PURE__ */ jsx("span", {
+								className: (0, import_classnames.default)("eui-kanban-card-priority", priorityConfig[card.priority].className),
+								title: `Priority: ${priorityConfig[card.priority].label}`,
+								"aria-label": `Priority: ${priorityConfig[card.priority].label}`,
+								children: /* @__PURE__ */ jsxs("svg", {
+									viewBox: "0 0 16 16",
+									fill: "currentColor",
+									width: "12",
+									height: "12",
+									"aria-hidden": "true",
+									children: [
+										card.priority === "critical" && /* @__PURE__ */ jsx("path", { d: "M8 1l2 5h5l-4 3.5 1.5 5L8 11.5 3.5 14.5 5 9.5 1 6h5z" }),
+										card.priority === "high" && /* @__PURE__ */ jsx("path", { d: "M3 13V5l5-3 5 3v8l-5 2z" }),
+										card.priority === "medium" && /* @__PURE__ */ jsx("path", { d: "M4 12V6l4-2 4 2v6l-4 2z" }),
+										card.priority === "low" && /* @__PURE__ */ jsx("path", { d: "M5 11V7l3-1.5L11 7v4l-3 1.5z" })
+									]
+								})
+							}),
+							dueInfo && /* @__PURE__ */ jsxs("span", {
+								className: (0, import_classnames.default)("eui-kanban-card-due", {
+									"eui-kanban-due-overdue": dueInfo.isOverdue,
+									"eui-kanban-due-soon": dueInfo.isDueSoon
+								}),
+								title: dueInfo.text,
+								children: [/* @__PURE__ */ jsxs("svg", {
+									viewBox: "0 0 16 16",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									width: "12",
+									height: "12",
+									"aria-hidden": "true",
+									children: [/* @__PURE__ */ jsx("circle", {
+										cx: "8",
+										cy: "8",
+										r: "6.5"
+									}), /* @__PURE__ */ jsx("path", { d: "M8 4.5V8l2.5 1.5" })]
+								}), dueInfo.text]
+							}),
+							hasSubtasks && /* @__PURE__ */ jsxs("span", {
+								className: "eui-kanban-card-subtasks",
+								title: `${card.subtaskCompleted ?? 0}/${card.subtaskCount} subtasks`,
+								children: [
+									/* @__PURE__ */ jsx("svg", {
+										viewBox: "0 0 16 16",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "1.5",
+										width: "12",
+										height: "12",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ jsx("path", { d: "M2 4h12M2 8h12M2 12h8" })
+									}),
+									card.subtaskCompleted ?? 0,
+									"/",
+									card.subtaskCount
+								]
+							}),
+							(card.commentCount ?? 0) > 0 && /* @__PURE__ */ jsxs("span", {
+								className: "eui-kanban-card-comments",
+								title: `${card.commentCount} comments`,
+								children: [/* @__PURE__ */ jsx("svg", {
+									viewBox: "0 0 16 16",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									width: "12",
+									height: "12",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx("path", { d: "M2 3h12v8H5l-3 3V3z" })
+								}), card.commentCount]
+							}),
+							(card.attachmentCount ?? 0) > 0 && /* @__PURE__ */ jsxs("span", {
+								className: "eui-kanban-card-attachments",
+								title: `${card.attachmentCount} attachments`,
+								children: [/* @__PURE__ */ jsx("svg", {
+									viewBox: "0 0 16 16",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									width: "12",
+									height: "12",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx("path", { d: "M10.5 5L6 9.5a2 2 0 102.8 2.8L13.5 7.5a3.5 3.5 0 00-5-5L4 7a2 2 0 002.8 2.8" })
+								}), card.attachmentCount]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "eui-kanban-card-actions-row",
+						children: [
+							cardActionsTemplate && cardActionsTemplate(card, column),
+							allAssignees.length > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "eui-kanban-card-assignees",
+								"aria-label": "Assignees",
+								children: [allAssignees.slice(0, 3).map((assignee) => /* @__PURE__ */ jsx("span", {
+									className: "eui-kanban-avatar",
+									title: assignee.name,
+									children: assignee.avatar ? /* @__PURE__ */ jsx("img", {
+										src: assignee.avatar,
+										alt: assignee.name,
+										loading: "lazy"
+									}) : getInitials(assignee.name)
+								}, assignee.id)), allAssignees.length > 3 && /* @__PURE__ */ jsxs("span", {
+									className: "eui-kanban-avatar eui-kanban-avatar-overflow",
+									children: ["+", allAssignees.length - 3]
+								})]
+							}),
+							allowDeleteCard && /* @__PURE__ */ jsx("button", {
+								className: "eui-kanban-card-delete",
+								onClick: handleDelete,
+								"aria-label": `Delete card: ${card.title}`,
+								title: "Delete card",
+								type: "button",
+								children: /* @__PURE__ */ jsx("svg", {
+									viewBox: "0 0 16 16",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									width: "14",
+									height: "14",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+								})
+							})
+						]
+					})]
+				}),
+				hasSubtasks && cardSize !== "compact" && /* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-card-subtask-bar",
+					role: "progressbar",
+					"aria-valuenow": subtaskPercent,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "eui-kanban-card-subtask-fill",
+						style: { width: `${subtaskPercent}%` }
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/kanban-board/KanbanColumnHeader.tsx
+function KanbanColumnHeader({ column, cardCount, isCollapsed }) {
+	const { props, toggleCollapse, editingColumnId, setEditingColumnId } = useKanban();
+	const { columnHeaderTemplate, allowCollapse, allowEditColumn, allowDeleteColumn, showCardCount, showColumnLimit, onColumnDelete, onColumnUpdate } = props;
+	const [editTitle, setEditTitle] = useState(column.title);
+	const inputRef = useRef(null);
+	const isEditing = editingColumnId === column.id;
+	const overLimit = isColumnOverLimit(column, cardCount);
+	useEffect(() => {
+		if (isEditing && inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
+		}
+	}, [isEditing]);
+	const handleStartEdit = useCallback(() => {
+		if (!allowEditColumn || column.locked) return;
+		setEditTitle(column.title);
+		setEditingColumnId(column.id);
+	}, [
+		allowEditColumn,
+		column.locked,
+		column.title,
+		column.id,
+		setEditingColumnId
+	]);
+	const handleSaveEdit = useCallback(() => {
+		const trimmed = editTitle.trim();
+		if (trimmed && trimmed !== column.title) onColumnUpdate?.({
+			column,
+			field: "title",
+			value: trimmed
+		});
+		setEditingColumnId(null);
+	}, [
+		editTitle,
+		column,
+		onColumnUpdate,
+		setEditingColumnId
+	]);
+	const handleEditKeyDown = useCallback((e) => {
+		if (e.key === "Enter") handleSaveEdit();
+		else if (e.key === "Escape") setEditingColumnId(null);
+	}, [handleSaveEdit, setEditingColumnId]);
+	const handleDelete = useCallback((e) => {
+		e.stopPropagation();
+		onColumnDelete?.({ column });
+	}, [column, onColumnDelete]);
+	const handleCollapse = useCallback(() => {
+		toggleCollapse(column.id);
+	}, [column.id, toggleCollapse]);
+	if (isCollapsed) return /* @__PURE__ */ jsx("div", {
+		className: "eui-kanban-column-header eui-kanban-column-header-collapsed",
+		onClick: handleCollapse,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") handleCollapse();
+		},
+		role: "button",
+		tabIndex: 0,
+		"aria-label": `Expand ${column.title} column`,
+		title: `Expand ${column.title}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "eui-kanban-column-header-collapsed-content",
+			children: [
+				column.color && /* @__PURE__ */ jsx("span", {
+					className: "eui-kanban-column-color",
+					style: { backgroundColor: column.color },
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "eui-kanban-column-title-collapsed",
+					children: column.title
+				}),
+				showCardCount && /* @__PURE__ */ jsx("span", {
+					className: "eui-kanban-column-count",
+					children: cardCount
+				})
+			]
+		})
+	});
+	if (columnHeaderTemplate) return /* @__PURE__ */ jsx("div", {
+		className: "eui-kanban-column-header",
+		role: "heading",
+		"aria-level": 3,
+		children: columnHeaderTemplate(column, cardCount)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: (0, import_classnames.default)("eui-kanban-column-header", { "eui-kanban-column-over-limit": overLimit }),
+		role: "heading",
+		"aria-level": 3,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "eui-kanban-column-header-left",
+			children: [
+				column.color && /* @__PURE__ */ jsx("span", {
+					className: "eui-kanban-column-color",
+					style: { backgroundColor: column.color },
+					"aria-hidden": "true"
+				}),
+				column.icon && /* @__PURE__ */ jsx("span", {
+					className: "eui-kanban-column-icon",
+					"aria-hidden": "true",
+					children: column.icon
+				}),
+				isEditing ? /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					className: "eui-kanban-column-title-input",
+					value: editTitle,
+					onChange: (e) => setEditTitle(e.target.value),
+					onBlur: handleSaveEdit,
+					onKeyDown: handleEditKeyDown,
+					"aria-label": "Edit column title"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "eui-kanban-column-title",
+					onDoubleClick: handleStartEdit,
+					title: allowEditColumn && !column.locked ? "Double-click to edit" : column.title,
+					children: column.title
+				}),
+				showCardCount && /* @__PURE__ */ jsxs("span", {
+					className: (0, import_classnames.default)("eui-kanban-column-count", { "eui-kanban-column-count-over": overLimit }),
+					"aria-label": `${cardCount} cards${column.limit ? ` of ${column.limit} limit` : ""}`,
+					children: [cardCount, showColumnLimit && column.limit ? `/${column.limit}` : ""]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "eui-kanban-column-header-right",
+			children: [allowDeleteColumn && !column.locked && /* @__PURE__ */ jsx("button", {
+				className: "eui-kanban-column-action",
+				onClick: handleDelete,
+				"aria-label": `Delete ${column.title} column`,
+				title: "Delete column",
+				type: "button",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					width: "14",
+					height: "14",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "M3 5h10M5.5 5V3.5a1 1 0 011-1h3a1 1 0 011 1V5M6.5 7.5v4M9.5 7.5v4M4.5 5l.5 8.5a1 1 0 001 1h4a1 1 0 001-1L11.5 5" })
+				})
+			}), allowCollapse && /* @__PURE__ */ jsx("button", {
+				className: "eui-kanban-column-action",
+				onClick: handleCollapse,
+				"aria-label": `Collapse ${column.title} column`,
+				title: "Collapse column",
+				type: "button",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					width: "14",
+					height: "14",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/kanban-board/KanbanColumn.tsx
+var kanbanItemType = "kanban-card";
+function KanbanColumn({ column, cards, index, isCollapsed }) {
+	const { props } = useKanban();
+	const { draggable = true, allowAddCard, columnFooterTemplate, emptyColumnTemplate, maxColumnHeight, onCardMove, onCardReorder, onCardCreate } = props;
+	const [isAddingCard, setIsAddingCard] = useState(false);
+	const [newCardTitle, setNewCardTitle] = useState("");
+	const addInputRef = useRef(null);
+	const columnCards = useMemo(() => getCardsForColumn(cards, column.id), [cards, column.id]);
+	const overLimit = isColumnOverLimit(column, columnCards.length);
+	const handleSortChange = useCallback((newItems, _args, event) => {
+		if (!event) return;
+		const { source, target } = event;
+		if (source && target) if (source.containerId !== target.containerId) {
+			const fromColumnId = source.args?.columnId ?? source.item?.columnId;
+			onCardMove?.({
+				cardId: source.item.id,
+				card: source.item,
+				fromColumnId,
+				toColumnId: column.id,
+				fromIndex: source.index,
+				toIndex: target.index
+			});
+		} else onCardReorder?.({
+			columnId: column.id,
+			cards: newItems
+		});
+		else if (event.removed) onCardReorder?.({
+			columnId: column.id,
+			cards: newItems
+		});
+	}, [
+		column.id,
+		onCardMove,
+		onCardReorder
+	]);
+	const handleStartAddCard = useCallback(() => {
+		setIsAddingCard(true);
+		setNewCardTitle("");
+		setTimeout(() => addInputRef.current?.focus(), 0);
+	}, []);
+	const handleAddCard = useCallback(() => {
+		const title = newCardTitle.trim();
+		if (title) onCardCreate?.({
+			columnId: column.id,
+			title
+		});
+		setNewCardTitle("");
+		setIsAddingCard(false);
+	}, [
+		newCardTitle,
+		column.id,
+		onCardCreate
+	]);
+	const handleAddCardKeyDown = useCallback((e) => {
+		if (e.key === "Enter") handleAddCard();
+		else if (e.key === "Escape") {
+			setIsAddingCard(false);
+			setNewCardTitle("");
+		}
+	}, [handleAddCard]);
+	if (isCollapsed) return /* @__PURE__ */ jsx("div", {
+		className: "eui-kanban-column eui-kanban-column-collapsed",
+		role: "region",
+		"aria-label": `${column.title} column (collapsed)`,
+		"data-column-id": column.id,
+		children: /* @__PURE__ */ jsx(KanbanColumnHeader, {
+			column,
+			cardCount: columnCards.length,
+			isCollapsed: true
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: (0, import_classnames.default)("eui-kanban-column", {
+			"eui-kanban-column-over-limit": overLimit,
+			"eui-kanban-column-locked": column.locked
+		}),
+		role: "region",
+		"aria-label": `${column.title} column, ${columnCards.length} cards`,
+		"data-column-id": column.id,
+		"data-column-index": index,
+		children: [
+			/* @__PURE__ */ jsx(KanbanColumnHeader, {
+				column,
+				cardCount: columnCards.length,
+				isCollapsed: false
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "eui-kanban-column-body",
+				style: maxColumnHeight ? { maxHeight: maxColumnHeight } : void 0,
+				children: draggable && !column.locked ? /* @__PURE__ */ jsx(Sortable, {
+					items: columnCards,
+					itemType: kanbanItemType,
+					accept: kanbanItemType,
+					args: { columnId: column.id },
+					className: "eui-kanban-sortable",
+					onChange: handleSortChange,
+					showPlaceholder: true,
+					placeholder: columnCards.length === 0 && emptyColumnTemplate ? emptyColumnTemplate(column) : /* @__PURE__ */ jsx("div", {
+						className: "eui-kanban-drop-placeholder",
+						role: "presentation",
+						children: "Drop here"
+					}),
+					children: (card, idx) => /* @__PURE__ */ jsx(KanbanCard, {
+						card,
+						column,
+						index: idx
+					}, card.id)
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-card-list",
+					children: columnCards.length === 0 && emptyColumnTemplate ? emptyColumnTemplate(column) : columnCards.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "eui-kanban-empty",
+						children: "No cards"
+					}) : columnCards.map((card, idx) => /* @__PURE__ */ jsx(KanbanCard, {
+						card,
+						column,
+						index: idx
+					}, card.id))
+				})
+			}),
+			allowAddCard && !column.locked && /* @__PURE__ */ jsx("div", {
+				className: "eui-kanban-column-footer",
+				children: isAddingCard ? /* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-add-card-form",
+					children: /* @__PURE__ */ jsx("input", {
+						ref: addInputRef,
+						className: "eui-kanban-add-card-input",
+						value: newCardTitle,
+						onChange: (e) => setNewCardTitle(e.target.value),
+						onKeyDown: handleAddCardKeyDown,
+						onBlur: handleAddCard,
+						placeholder: "Enter card title...",
+						"aria-label": "New card title"
+					})
+				}) : /* @__PURE__ */ jsxs("button", {
+					className: "eui-kanban-add-card-btn",
+					onClick: handleStartAddCard,
+					type: "button",
+					"aria-label": `Add card to ${column.title}`,
+					children: [/* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 16 16",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						width: "14",
+						height: "14",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
+					}), "Add card"]
+				})
+			}),
+			columnFooterTemplate && /* @__PURE__ */ jsx("div", {
+				className: "eui-kanban-column-custom-footer",
+				children: columnFooterTemplate(column, columnCards)
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/kanban-board/KanbanBoard.tsx
+var columnItemType = "kanban-column";
+function KanbanBoard(props) {
+	const { columns, cards, layout = "horizontal", className, columnWidth, columnMinHeight, columnDraggable = false, allowAddColumn, showSearch, stickyColumnHeaders, onCardMove, onCardReorder, onColumnReorder, onColumnCreate, onSearchChange } = props;
+	const isControlled = !!(onCardMove || onCardReorder);
+	const [internalCards, setInternalCards] = useState(cards);
+	useEffect(() => {
+		setInternalCards(cards);
+	}, [cards]);
+	const activeCards = isControlled ? cards : internalCards;
+	const handleInternalCardMove = useCallback((event) => {
+		if (onCardMove) {
+			onCardMove(event);
+			return;
+		}
+		setInternalCards((prev) => {
+			const withoutCard = prev.filter((c) => c.id !== event.cardId);
+			const targetCards = withoutCard.filter((c) => c.columnId === event.toColumnId).sort((a, b) => a.order - b.order);
+			const otherCards = withoutCard.filter((c) => c.columnId !== event.toColumnId);
+			const movedCard = {
+				...event.card,
+				columnId: event.toColumnId,
+				order: event.toIndex
+			};
+			targetCards.splice(event.toIndex, 0, movedCard);
+			const reordered = targetCards.map((c, i) => ({
+				...c,
+				order: i
+			}));
+			return [...otherCards, ...reordered];
+		});
+	}, [onCardMove]);
+	const handleInternalCardReorder = useCallback((event) => {
+		if (onCardReorder) {
+			onCardReorder(event);
+			return;
+		}
+		setInternalCards((prev) => {
+			const other = prev.filter((c) => c.columnId !== event.columnId);
+			const reordered = event.cards.map((c, i) => ({
+				...c,
+				order: i
+			}));
+			return [...other, ...reordered];
+		});
+	}, [onCardReorder]);
+	const [collapsedColumns, setCollapsedColumns] = useState(() => {
+		const initial = /* @__PURE__ */ new Set();
+		columns.forEach((col) => {
+			if (col.collapsed) initial.add(col.id);
+		});
+		return initial;
+	});
+	const [searchFilter, setSearchFilterState] = useState({});
+	const [editingColumnId, setEditingColumnId] = useState(null);
+	const [isAddingColumn, setIsAddingColumn] = useState(false);
+	const [newColumnTitle, setNewColumnTitle] = useState("");
+	const addColumnInputRef = useRef(null);
+	const toggleCollapse = useCallback((columnId) => {
+		setCollapsedColumns((prev) => {
+			const next = new Set(prev);
+			const newState = !next.has(columnId);
+			if (newState) next.add(columnId);
+			else next.delete(columnId);
+			props.onColumnCollapse?.(columnId, newState);
+			return next;
+		});
+	}, [props.onColumnCollapse]);
+	const setSearchFilter = useCallback((filter) => {
+		setSearchFilterState(filter);
+		onSearchChange?.(filter);
+	}, [onSearchChange]);
+	const filteredCards = useMemo(() => filterCards(activeCards, searchFilter), [activeCards, searchFilter]);
+	const internalProps = useMemo(() => ({
+		...props,
+		onCardMove: handleInternalCardMove,
+		onCardReorder: handleInternalCardReorder
+	}), [
+		props,
+		handleInternalCardMove,
+		handleInternalCardReorder
+	]);
+	const contextValue = useMemo(() => ({
+		props: internalProps,
+		collapsedColumns,
+		toggleCollapse,
+		searchFilter,
+		setSearchFilter,
+		editingColumnId,
+		setEditingColumnId
+	}), [
+		internalProps,
+		collapsedColumns,
+		toggleCollapse,
+		searchFilter,
+		setSearchFilter,
+		editingColumnId
+	]);
+	const handleColumnReorder = useCallback((newColumns, _args, _event) => {
+		onColumnReorder?.({ columns: newColumns });
+	}, [onColumnReorder]);
+	const handleStartAddColumn = useCallback(() => {
+		setIsAddingColumn(true);
+		setNewColumnTitle("");
+		setTimeout(() => addColumnInputRef.current?.focus(), 0);
+	}, []);
+	const handleAddColumn = useCallback(() => {
+		const title = newColumnTitle.trim();
+		if (title) onColumnCreate?.({ title });
+		setNewColumnTitle("");
+		setIsAddingColumn(false);
+	}, [newColumnTitle, onColumnCreate]);
+	const handleAddColumnKeyDown = useCallback((e) => {
+		if (e.key === "Enter") handleAddColumn();
+		else if (e.key === "Escape") {
+			setIsAddingColumn(false);
+			setNewColumnTitle("");
+		}
+	}, [handleAddColumn]);
+	const handleSearchInput = useCallback((e) => {
+		setSearchFilter({
+			...searchFilter,
+			query: e.target.value || void 0
+		});
+	}, [searchFilter, setSearchFilter]);
+	const columnStyle = useMemo(() => {
+		const style = {};
+		if (columnWidth) {
+			style.width = typeof columnWidth === "number" ? `${columnWidth}px` : columnWidth;
+			style.minWidth = style.width;
+			style.maxWidth = style.width;
+		}
+		if (columnMinHeight) style.minHeight = typeof columnMinHeight === "number" ? `${columnMinHeight}px` : columnMinHeight;
+		return style;
+	}, [columnWidth, columnMinHeight]);
+	const collapsedStyle = useMemo(() => ({
+		width: "40px",
+		minWidth: "40px",
+		maxWidth: "40px",
+		flexShrink: 0
+	}), []);
+	const renderColumn = (col, idx) => {
+		const isCollapsed = collapsedColumns.has(col.id);
+		return /* @__PURE__ */ jsx("div", {
+			className: (0, import_classnames.default)("eui-kanban-column-wrapper", { "eui-kanban-column-wrapper-collapsed": isCollapsed }),
+			style: isCollapsed ? collapsedStyle : columnStyle,
+			children: /* @__PURE__ */ jsx(KanbanColumn, {
+				column: col,
+				cards: filteredCards,
+				index: idx,
+				isCollapsed
+			})
+		}, col.id);
+	};
+	return /* @__PURE__ */ jsx(KanbanContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: (0, import_classnames.default)("eui-kanban-board", `eui-kanban-layout-${layout}`, { "eui-kanban-sticky-headers": stickyColumnHeaders }, className),
+			role: "region",
+			"aria-label": "Kanban board",
+			children: [showSearch && /* @__PURE__ */ jsx("div", {
+				className: "eui-kanban-search",
+				role: "search",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "eui-kanban-search-wrapper",
+					children: [
+						/* @__PURE__ */ jsxs("svg", {
+							className: "eui-kanban-search-icon",
+							viewBox: "0 0 16 16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							width: "14",
+							height: "14",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ jsx("circle", {
+								cx: "6.5",
+								cy: "6.5",
+								r: "4.5"
+							}), /* @__PURE__ */ jsx("path", { d: "M10 10l4 4" })]
+						}),
+						/* @__PURE__ */ jsx("input", {
+							className: "eui-kanban-search-input",
+							type: "text",
+							placeholder: "Search cards...",
+							value: searchFilter.query ?? "",
+							onChange: handleSearchInput,
+							"aria-label": "Search kanban cards"
+						}),
+						searchFilter.query && /* @__PURE__ */ jsx("button", {
+							className: "eui-kanban-search-clear",
+							onClick: () => setSearchFilter({
+								...searchFilter,
+								query: void 0
+							}),
+							"aria-label": "Clear search",
+							type: "button",
+							children: /* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 16 16",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								width: "12",
+								height: "12",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+							})
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "eui-kanban-columns",
+				children: [columnDraggable ? /* @__PURE__ */ jsx(Sortable, {
+					items: columns,
+					itemType: columnItemType,
+					accept: columnItemType,
+					className: "eui-kanban-columns-sortable",
+					onChange: handleColumnReorder,
+					children: (col, idx) => renderColumn(col, idx)
+				}) : columns.map((col, idx) => renderColumn(col, idx)), allowAddColumn && /* @__PURE__ */ jsx("div", {
+					className: "eui-kanban-column-wrapper eui-kanban-add-column-wrapper",
+					children: isAddingColumn ? /* @__PURE__ */ jsx("div", {
+						className: "eui-kanban-add-column-form",
+						children: /* @__PURE__ */ jsx("input", {
+							ref: addColumnInputRef,
+							className: "eui-kanban-add-column-input",
+							value: newColumnTitle,
+							onChange: (e) => setNewColumnTitle(e.target.value),
+							onKeyDown: handleAddColumnKeyDown,
+							onBlur: handleAddColumn,
+							placeholder: "Column title...",
+							"aria-label": "New column title"
+						})
+					}) : /* @__PURE__ */ jsxs("button", {
+						className: "eui-kanban-add-column-btn",
+						onClick: handleStartAddColumn,
+						type: "button",
+						"aria-label": "Add new column",
+						children: [/* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 16 16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							width: "16",
+							height: "16",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
+						}), "Add Column"]
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { KanbanBoard };