@emberai-engg/task-board 0.3.0

package/dist/index.mjs

@@ -0,0 +1,2259 @@
+// src/components/TaskBoard.tsx
+import { useState as useState9, useEffect as useEffect8, useCallback as useCallback7 } from "react";
+import { DragDropContext } from "@hello-pangea/dnd";
+
+// src/context/TaskBoardProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+
+// src/services/taskBoardService.ts
+function createTaskBoardService(apiClient, basePath = "/api/v1/taskboard") {
+  return {
+    // ─── Tasks ───
+    async listTasks(projectSlug, perColumn = 10) {
+      const { data } = await apiClient.get(
+        `${basePath}/tasks?project_slug=${encodeURIComponent(projectSlug)}&per_column=${perColumn}`
+      );
+      return data;
+    },
+    async listColumnTasks(projectSlug, statusKey, offset, limit) {
+      const { data } = await apiClient.get(
+        `${basePath}/tasks/column?project_slug=${encodeURIComponent(projectSlug)}&status_key=${encodeURIComponent(statusKey)}&offset=${offset}&limit=${limit}`
+      );
+      return data;
+    },
+    async getTask(taskId) {
+      const { data } = await apiClient.get(`${basePath}/tasks/${taskId}`);
+      return data;
+    },
+    async createTask(payload) {
+      const { data } = await apiClient.post(`${basePath}/tasks`, payload);
+      return data;
+    },
+    async updateTask(taskId, payload) {
+      const { data } = await apiClient.patch(`${basePath}/tasks/${taskId}`, payload);
+      return data;
+    },
+    async deleteTask(taskId) {
+      await apiClient.delete(`${basePath}/tasks/${taskId}`);
+    },
+    async markTaskRead(taskId) {
+      await apiClient.post(`${basePath}/tasks/${taskId}/read`);
+    },
+    // ─── Comments ───
+    async listComments(taskId) {
+      const { data } = await apiClient.get(`${basePath}/tasks/${taskId}/comments`);
+      return data;
+    },
+    async addComment(taskId, payload) {
+      const { data } = await apiClient.post(`${basePath}/tasks/${taskId}/comments`, payload);
+      return data;
+    },
+    async editComment(taskId, commentId, payload) {
+      const { data } = await apiClient.patch(
+        `${basePath}/tasks/${taskId}/comments/${commentId}`,
+        payload
+      );
+      return data;
+    },
+    async deleteComment(taskId, commentId) {
+      await apiClient.delete(`${basePath}/tasks/${taskId}/comments/${commentId}`);
+    },
+    // ─── Mentions ───
+    async searchMentionUsers(query) {
+      const { data } = await apiClient.get(
+        `${basePath}/mentions/users?q=${encodeURIComponent(query)}`
+      );
+      return data;
+    },
+    // ─── Notifications ───
+    async getNotificationCount() {
+      const { data } = await apiClient.get(
+        `${basePath}/notifications/count`
+      );
+      return data.count;
+    },
+    async listNotifications(limit = 30) {
+      const { data } = await apiClient.get(
+        `${basePath}/notifications?limit=${limit}`
+      );
+      return data;
+    },
+    async markNotificationRead(notificationId) {
+      await apiClient.patch(`${basePath}/notifications/${notificationId}/read`);
+    },
+    async markAllNotificationsRead() {
+      await apiClient.post(`${basePath}/notifications/read-all`);
+    }
+  };
+}
+
+// src/utils/constants.ts
+var DEFAULT_COLUMNS = [
+  { key: "backlog", label: "Backlog", color: "bg-neutral-400", description: "Tasks not yet scheduled" },
+  { key: "blocked", label: "Blocked", color: "bg-red-500", description: "Waiting on a dependency" },
+  { key: "queued", label: "Queued", color: "bg-blue-500", description: "Scheduled for this sprint" },
+  { key: "in_progress", label: "In Progress", color: "bg-amber-500", description: "Actively being worked on" },
+  { key: "in_testing", label: "In Testing", color: "bg-teal-500", description: "Under QA and validation" },
+  { key: "client_review", label: "Client Review", color: "bg-purple-500", description: "Live & ready for client review" },
+  { key: "changes_requested", label: "Changes Requested", color: "bg-orange-500", description: "Revisions needed from review" },
+  { key: "approved", label: "Approved", color: "bg-green-500", description: "Signed off and complete" }
+];
+var DEFAULT_PRIORITIES = [
+  { value: "urgent", label: "Critical", className: "bg-red-50 text-red-600 border-red-200" },
+  { value: "high", label: "High", className: "bg-orange-50 text-orange-600 border-orange-200" },
+  { value: "medium", label: "Medium", className: "bg-amber-50 text-amber-600 border-amber-200" },
+  { value: "low", label: "Low", className: "bg-neutral-100 text-neutral-500 border-neutral-200" }
+];
+var PREDEFINED_TAGS = [
+  { value: "traceability", label: "Traceability", className: "bg-blue-50 text-blue-600 border-blue-200" },
+  { value: "info-architecture", label: "Info Architecture", className: "bg-purple-50 text-purple-600 border-purple-200" },
+  { value: "ui-ux", label: "UI/UX", className: "bg-pink-50 text-pink-600 border-pink-200" },
+  { value: "workflow-logic", label: "Workflow Logic", className: "bg-teal-50 text-teal-600 border-teal-200" },
+  { value: "legal-reasoning", label: "Legal Reasoning", className: "bg-amber-50 text-amber-600 border-amber-200" },
+  { value: "bug-fix", label: "Bug Fix", className: "bg-red-50 text-red-600 border-red-200" }
+];
+var DESCRIPTION_SECTIONS = [
+  { key: "problem", label: "Problem" },
+  { key: "user_story", label: "User Story" },
+  { key: "proposed_behavior", label: "Proposed Behavior" },
+  { key: "acceptance_criteria", label: "Acceptance Criteria" },
+  { key: "open_questions", label: "Open Questions" }
+];
+var EMPTY_DESCRIPTION = {
+  problem: "",
+  user_story: "",
+  proposed_behavior: "",
+  acceptance_criteria: "",
+  open_questions: ""
+};
+var POSITION_GAP = 1e3;
+var DEFAULT_PAGE_SIZE = 10;
+var NOTIFICATION_POLL_INTERVAL = 3e4;
+
+// src/context/TaskBoardProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var TaskBoardContext = createContext(null);
+function useTaskBoardContext() {
+  const ctx = useContext(TaskBoardContext);
+  if (!ctx) {
+    throw new Error("useTaskBoardContext must be used within a <TaskBoardProvider>");
+  }
+  return ctx;
+}
+function TaskBoardProvider({
+  children,
+  ...config
+}) {
+  const service = useMemo(
+    () => createTaskBoardService(config.apiClient, config.apiBasePath),
+    [config.apiClient, config.apiBasePath]
+  );
+  const features = useMemo(
+    () => ({
+      dragAndDrop: config.features?.dragAndDrop ?? true,
+      comments: config.features?.comments ?? true,
+      mentions: config.features?.mentions ?? true,
+      notifications: config.features?.notifications ?? true,
+      internalComments: config.features?.internalComments ?? true,
+      tags: config.features?.tags ?? true,
+      sharing: config.features?.sharing ?? true,
+      filters: config.features?.filters ?? true,
+      unreadIndicators: config.features?.unreadIndicators ?? true
+    }),
+    [config.features]
+  );
+  const value = useMemo(
+    () => ({
+      service,
+      user: config.user,
+      projects: config.projects ?? [],
+      columns: config.columns ?? DEFAULT_COLUMNS,
+      priorities: config.priorities ?? DEFAULT_PRIORITIES,
+      tags: config.tags ?? PREDEFINED_TAGS,
+      config,
+      features
+    }),
+    [service, config, features]
+  );
+  return /* @__PURE__ */ jsx(TaskBoardContext.Provider, { value, children });
+}
+
+// src/hooks/useTaskBoard.ts
+import { useState, useEffect, useCallback, useMemo as useMemo2, useRef } from "react";
+
+// src/utils/helpers.ts
+function getPriorityStyle(priority) {
+  return DEFAULT_PRIORITIES.find((p) => p.value === priority) ?? DEFAULT_PRIORITIES[2];
+}
+function getTagStyle(tag) {
+  const predefined = PREDEFINED_TAGS.find((t) => t.value === tag);
+  if (predefined) return predefined;
+  const label = tag.charAt(0).toUpperCase() + tag.slice(1).replace(/-/g, " ");
+  return { value: tag, label, className: "bg-neutral-100 text-neutral-500 border-neutral-200" };
+}
+function getInitials(name) {
+  return name.split(" ").map((w) => w[0]).join("").toUpperCase().slice(0, 2);
+}
+function parseDate(dateStr) {
+  if (!dateStr) return /* @__PURE__ */ new Date();
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime()) && !dateStr.endsWith("Z") && !dateStr.includes("+")) {
+    return /* @__PURE__ */ new Date(dateStr + "Z");
+  }
+  return d;
+}
+function formatDate(dateStr) {
+  if (!dateStr) return "";
+  const d = parseDate(dateStr);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function formatDateTime(dateStr) {
+  if (!dateStr) return "";
+  const d = parseDate(dateStr);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function getDescriptionPreview(desc) {
+  if (!desc) return "";
+  if (typeof desc === "string") return desc;
+  for (const section of DESCRIPTION_SECTIONS) {
+    if (desc[section.key]?.trim()) return desc[section.key].trim();
+  }
+  return "";
+}
+function hasDescription(desc) {
+  if (!desc) return false;
+  if (typeof desc === "string") return desc.trim().length > 0;
+  return DESCRIPTION_SECTIONS.some((s) => desc[s.key]?.trim());
+}
+function getUserProjects(apps, allProjects) {
+  if (apps.includes("all")) return allProjects;
+  return allProjects.filter((p) => apps.includes(p.slug));
+}
+
+// src/hooks/useTaskBoard.ts
+function useTaskBoard() {
+  const { service, user, projects: configProjects, columns, config } = useTaskBoardContext();
+  const projects = useMemo2(
+    () => configProjects.length > 0 ? configProjects : getUserProjects(user.apps, []),
+    [configProjects, user.apps]
+  );
+  const [selectedProject, setSelectedProject] = useState("");
+  const [tasks, setTasks] = useState({});
+  const [columnTotals, setColumnTotals] = useState({});
+  const [columnUnreads, setColumnUnreads] = useState({});
+  const [boardLoading, setBoardLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState({});
+  const [error, setError] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  useEffect(() => {
+    if (selectedProject || projects.length === 0) return;
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      const urlProject = params.get("project");
+      if (urlProject && projects.find((p) => p.slug === urlProject)) {
+        setSelectedProject(urlProject);
+        return;
+      }
+    }
+    setSelectedProject(projects[0].slug);
+  }, [projects, selectedProject]);
+  const fetchTasks = useCallback(async () => {
+    if (!selectedProject) return;
+    setBoardLoading(true);
+    try {
+      const data = await service.listTasks(selectedProject, DEFAULT_PAGE_SIZE);
+      const newTasks = {};
+      const newTotals = {};
+      const newUnreads = {};
+      for (const key of columns.map((c) => c.key)) {
+        const col = data[key];
+        if (col) {
+          newTasks[key] = col.tasks || [];
+          newTotals[key] = col.total || 0;
+          newUnreads[key] = col.unread || 0;
+        } else {
+          newTasks[key] = [];
+          newTotals[key] = 0;
+          newUnreads[key] = 0;
+        }
+      }
+      setTasks(newTasks);
+      setColumnTotals(newTotals);
+      setColumnUnreads(newUnreads);
+    } catch {
+      setError("Failed to load tasks");
+    } finally {
+      setBoardLoading(false);
+    }
+  }, [selectedProject, service, columns]);
+  useEffect(() => {
+    fetchTasks();
+  }, [fetchTasks]);
+  const loadMoreTasks = useCallback(async (statusKey) => {
+    if (!selectedProject || loadingMore[statusKey]) return;
+    const current = tasks[statusKey]?.length || 0;
+    const total = columnTotals[statusKey] || 0;
+    if (current >= total) return;
+    setLoadingMore((prev) => ({ ...prev, [statusKey]: true }));
+    try {
+      const newTasks = await service.listColumnTasks(
+        selectedProject,
+        statusKey,
+        current,
+        DEFAULT_PAGE_SIZE
+      );
+      setTasks((prev) => ({
+        ...prev,
+        [statusKey]: [...prev[statusKey] || [], ...newTasks]
+      }));
+    } catch (err) {
+      config.onError?.(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoadingMore((prev) => ({ ...prev, [statusKey]: false }));
+    }
+  }, [selectedProject, tasks, columnTotals, loadingMore, service, config]);
+  const successTimeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current) clearTimeout(successTimeoutRef.current);
+    };
+  }, []);
+  const showSuccess = (msg) => {
+    setSuccessMessage(msg);
+    if (successTimeoutRef.current) clearTimeout(successTimeoutRef.current);
+    successTimeoutRef.current = setTimeout(() => setSuccessMessage(""), 3e3);
+  };
+  return {
+    projects,
+    selectedProject,
+    setSelectedProject,
+    tasks,
+    setTasks,
+    columnTotals,
+    columnUnreads,
+    setColumnUnreads,
+    boardLoading,
+    loadingMore,
+    error,
+    setError,
+    successMessage,
+    showSuccess,
+    fetchTasks,
+    loadMoreTasks
+  };
+}
+
+// src/hooks/useTaskActions.ts
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
+function useTaskActions(tasks, setTasks, fetchTasks) {
+  const { service, config } = useTaskBoardContext();
+  const tasksRef = useRef2(tasks);
+  tasksRef.current = tasks;
+  const createTask = useCallback2(async (data) => {
+    const task = await service.createTask(data);
+    config.onTaskCreate?.(task);
+    await fetchTasks();
+    return task;
+  }, [service, config, fetchTasks]);
+  const updateTask = useCallback2(async (taskId, data) => {
+    const task = await service.updateTask(taskId, data);
+    config.onTaskUpdate?.(task);
+    await fetchTasks();
+    return task;
+  }, [service, config, fetchTasks]);
+  const deleteTask = useCallback2(async (taskId) => {
+    await service.deleteTask(taskId);
+    config.onTaskDelete?.(taskId);
+    await fetchTasks();
+  }, [service, config, fetchTasks]);
+  const markTaskRead = useCallback2(async (taskId) => {
+    service.markTaskRead(taskId).catch(() => {
+    });
+  }, [service]);
+  const moveTask = useCallback2(async (taskId, sourceStatus, destStatus, sourceIndex, destIndex) => {
+    const currentTasks = tasksRef.current;
+    const sourceCol = [...currentTasks[sourceStatus] || []];
+    const destCol = sourceStatus === destStatus ? sourceCol : [...currentTasks[destStatus] || []];
+    const [movedTask] = sourceCol.splice(sourceIndex, 1);
+    if (!movedTask) return;
+    const updatedTask = { ...movedTask, status: destStatus };
+    destCol.splice(destIndex, 0, updatedTask);
+    let newPosition;
+    if (destCol.length === 1) {
+      newPosition = POSITION_GAP;
+    } else if (destIndex === 0) {
+      newPosition = (destCol[1]?.position ?? POSITION_GAP) - POSITION_GAP;
+    } else if (destIndex === destCol.length - 1) {
+      newPosition = (destCol[destCol.length - 2]?.position ?? 0) + POSITION_GAP;
+    } else {
+      const above = destCol[destIndex - 1]?.position ?? 0;
+      const below = destCol[destIndex + 1]?.position ?? above + POSITION_GAP * 2;
+      newPosition = (above + below) / 2;
+    }
+    updatedTask.position = newPosition;
+    const newTasks = { ...currentTasks };
+    newTasks[sourceStatus] = sourceCol;
+    if (sourceStatus !== destStatus) {
+      newTasks[destStatus] = destCol;
+    }
+    setTasks(newTasks);
+    try {
+      await service.updateTask(taskId, { status: destStatus, position: newPosition });
+    } catch {
+      fetchTasks();
+    }
+  }, [setTasks, service, fetchTasks]);
+  return { createTask, updateTask, deleteTask, markTaskRead, moveTask };
+}
+
+// src/hooks/useShareLink.ts
+import { useState as useState2, useCallback as useCallback3 } from "react";
+function useShareLink() {
+  const [copiedTaskId, setCopiedTaskId] = useState2(null);
+  const copyShareLink = useCallback3((taskId, projectSlug) => {
+    if (typeof window === "undefined") return;
+    const url = new URL(window.location.origin + window.location.pathname);
+    url.searchParams.set("project", projectSlug);
+    url.searchParams.set("task", taskId);
+    navigator.clipboard.writeText(url.toString()).then(() => {
+      setCopiedTaskId(taskId);
+      setTimeout(() => setCopiedTaskId(null), 2e3);
+    });
+  }, []);
+  return { copiedTaskId, copyShareLink };
+}
+
+// src/components/SkeletonPulse.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function SkeletonPulse({ className = "" }) {
+  return /* @__PURE__ */ jsx2("div", { className: `animate-pulse rounded bg-neutral-200/60 ${className}` });
+}
+function SkeletonCard() {
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-neutral-200 p-3 space-y-2.5", children: [
+    /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-4 w-3/4" }),
+    /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-4 w-16 rounded-sm" }),
+    /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-3 w-full" }),
+    /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-3 w-2/3" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1", children: [
+      /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-2.5 w-12" }),
+      /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-2.5 w-8" })
+    ] })
+  ] });
+}
+function BoardSkeleton() {
+  const cardCounts = [3, 2, 2, 1, 1, 0, 1];
+  return /* @__PURE__ */ jsx2("div", { className: "flex-1 min-h-0 overflow-hidden pb-4", children: /* @__PURE__ */ jsx2("div", { className: "flex gap-4 min-w-max h-full", children: cardCounts.map((count, i) => /* @__PURE__ */ jsxs("div", { className: "w-[280px] flex flex-col shrink-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3 px-1", children: [
+      /* @__PURE__ */ jsx2(SkeletonPulse, { className: "w-2 h-2 rounded-full" }),
+      /* @__PURE__ */ jsx2(SkeletonPulse, { className: "h-3 w-20" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 rounded-xl bg-neutral-100/50 p-2 space-y-2", children: Array.from({ length: count }).map((_, j) => /* @__PURE__ */ jsx2(SkeletonCard, {}, j)) })
+  ] }, i)) }) });
+}
+
+// src/components/KanbanColumn.tsx
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { Droppable } from "@hello-pangea/dnd";
+
+// src/components/TaskCard.tsx
+import { memo } from "react";
+import { Draggable } from "@hello-pangea/dnd";
+
+// src/components/PriorityBadge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PriorityBadge({ priority, size = "sm" }) {
+  const style = getPriorityStyle(priority);
+  const sizeClass = size === "sm" ? "px-1.5 py-0.5 text-[9px]" : "px-2.5 py-1 text-[10px]";
+  return /* @__PURE__ */ jsx3("span", { className: `inline-flex items-center font-semibold uppercase tracking-wide rounded border ${style.className} ${sizeClass}`, children: style.label });
+}
+
+// src/icons/index.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var PlusIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx4("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+var XIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx4("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var ChevronDownIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("polyline", { points: "6 9 12 15 18 9" }) });
+var MessageSquareIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+var KanbanIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1" }),
+  /* @__PURE__ */ jsx4("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx4("path", { d: "m9 14 2 2 4-4" })
+] });
+var LinkIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsx4("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+var CheckIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" }) });
+var BellIcon = ({ className = "", size = 24 }) => /* @__PURE__ */ jsx4("svg", { className, width: size, height: size, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.75, children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" }) });
+var FilterIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) });
+var PencilIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }) });
+var TrashIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx4("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+] });
+var LockIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx4("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var FeedbackIcon = ({ className = "", size = 24, strokeWidth = 2 }) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+  /* @__PURE__ */ jsx4("path", { d: "M8 12h.01" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 12h.01" }),
+  /* @__PURE__ */ jsx4("path", { d: "M16 12h.01" })
+] });
+
+// src/components/TagBadge.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function TagBadge({ tag, onRemove, size = "sm" }) {
+  const style = getTagStyle(tag);
+  const sizeClass = size === "sm" ? "px-1.5 py-px text-[8px]" : "px-2 py-0.5 text-[10px]";
+  return /* @__PURE__ */ jsxs3("span", { className: `inline-flex items-center gap-1 font-medium rounded border ${style.className} ${sizeClass}`, children: [
+    style.label,
+    onRemove && /* @__PURE__ */ jsx5("button", { onClick: onRemove, className: "opacity-50 hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx5(XIcon, { size: size === "sm" ? 10 : 12 }) })
+  ] });
+}
+
+// src/components/UserAvatar.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZES = {
+  xs: { container: "w-5 h-5", text: "text-[8px]" },
+  sm: { container: "w-6 h-6", text: "text-[9px]" },
+  md: { container: "w-7 h-7", text: "text-[10px]" }
+};
+function UserAvatar({ name, size = "xs", showTooltip = false, className = "" }) {
+  const s = SIZES[size];
+  const initials = getInitials(name || "?");
+  return /* @__PURE__ */ jsxs4("div", { className: `relative ${showTooltip ? "group/avatar" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx6("div", { className: `${s.container} rounded-full bg-[#FF5E00] flex items-center justify-center`, children: /* @__PURE__ */ jsx6("span", { className: `${s.text} font-medium text-white leading-none`, children: initials }) }),
+    showTooltip && /* @__PURE__ */ jsx6("div", { className: "absolute bottom-full right-0 mb-1.5 px-2 py-1 text-[10px] font-medium text-white bg-neutral-800 rounded whitespace-nowrap opacity-0 pointer-events-none group-hover/avatar:opacity-100 transition-opacity duration-75", children: name })
+  ] });
+}
+
+// src/components/TaskCard.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var TaskCard = memo(function TaskCard2({ task, index, onClick, onShare, copied }) {
+  return /* @__PURE__ */ jsx7(Draggable, { draggableId: task.id, index, children: (provided, snapshot) => /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: provided.innerRef,
+      ...provided.draggableProps,
+      ...provided.dragHandleProps,
+      onClick,
+      className: `relative bg-white rounded-lg border p-3.5 cursor-pointer transition-all hover:shadow-md group/card ${snapshot.isDragging ? "shadow-lg ring-2 ring-[#FF5E00]/20" : ""} border-neutral-200`,
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between gap-2.5", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-1.5 flex-1 min-w-0", children: [
+            task.has_unread && /* @__PURE__ */ jsx7("span", { className: "relative group/unread mt-[5px] w-1.5 h-1.5 rounded-full bg-[#FF5E00] shrink-0 cursor-default", children: /* @__PURE__ */ jsx7("span", { className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-1.5 px-2 py-1 text-[10px] font-medium text-white bg-neutral-800 rounded whitespace-nowrap opacity-0 pointer-events-none group-hover/unread:opacity-100 transition-opacity duration-75", children: "New activity" }) }),
+            /* @__PURE__ */ jsx7("h4", { className: "text-[13px] font-medium text-neutral-900 leading-snug line-clamp-2", children: task.title })
+          ] }),
+          /* @__PURE__ */ jsx7(PriorityBadge, { priority: task.priority })
+        ] }),
+        task.tags && task.tags.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "mt-1.5 flex flex-wrap gap-1", children: [
+          task.tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx7(TagBadge, { tag }, tag)),
+          task.tags.length > 3 && /* @__PURE__ */ jsxs5("span", { className: "text-[8px] text-neutral-400 px-1 py-px", children: [
+            "+",
+            task.tags.length - 3
+          ] })
+        ] }),
+        hasDescription(task.description) && /* @__PURE__ */ jsx7("p", { className: "mt-2 text-[11px] text-neutral-400 leading-relaxed line-clamp-2", children: getDescriptionPreview(task.description) }),
+        /* @__PURE__ */ jsxs5("div", { className: "mt-3 flex items-center justify-between pt-2.5 border-t border-neutral-100", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-[10px] text-neutral-400", children: formatDate(task.created_at) }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                onClick: onShare,
+                className: "opacity-0 group-hover/card:opacity-100 transition-opacity p-0.5 rounded text-neutral-300 hover:text-neutral-500 cursor-pointer",
+                title: copied ? "Link copied!" : "Copy link",
+                children: copied ? /* @__PURE__ */ jsx7(CheckIcon, { size: 12 }) : /* @__PURE__ */ jsx7(LinkIcon, { size: 12 })
+              }
+            ),
+            task.comment_count > 0 && /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-0.5 text-[10px] text-neutral-400", children: [
+              /* @__PURE__ */ jsx7(MessageSquareIcon, { size: 12 }),
+              task.comment_count
+            ] }),
+            task.created_by_name && /* @__PURE__ */ jsx7(UserAvatar, { name: task.created_by_name, size: "xs", showTooltip: true })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+});
+
+// src/components/KanbanColumn.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function LoadMoreSentinel({ loading, onLoadMore, remaining }) {
+  const sentinelRef = useRef3(null);
+  useEffect2(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !loading) onLoadMore();
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [loading, onLoadMore]);
+  const skeletonCount = loading ? Math.min(remaining, 10) : 0;
+  return /* @__PURE__ */ jsx8("div", { ref: sentinelRef, className: "space-y-2 pt-2", children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx8(SkeletonCard, {}, i)) });
+}
+function KanbanColumn({
+  column,
+  tasks,
+  totalCount,
+  unreadCount,
+  loadingMore,
+  onAddTask,
+  onTaskClick,
+  onTaskShare,
+  copiedTaskId,
+  onLoadMore
+}) {
+  return /* @__PURE__ */ jsxs6("div", { className: "w-[280px] flex flex-col shrink-0 h-full", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "mb-3 px-1 shrink-0", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8("span", { className: `w-2 h-2 rounded-full ${column.color}` }),
+        /* @__PURE__ */ jsx8("h3", { className: "text-xs font-medium text-neutral-700 uppercase tracking-wide", children: column.label }),
+        unreadCount > 0 && /* @__PURE__ */ jsxs6("span", { className: "relative group/unread-col w-4 h-4 rounded-full bg-[#FF5E00] text-white text-[9px] font-semibold flex items-center justify-center cursor-default", children: [
+          unreadCount,
+          /* @__PURE__ */ jsxs6("span", { className: "absolute left-1/2 -translate-x-1/2 top-full mt-1.5 px-2 py-1 text-[10px] font-medium text-white bg-neutral-800 rounded whitespace-nowrap opacity-0 pointer-events-none group-hover/unread-col:opacity-100 transition-opacity duration-75 z-10", children: [
+            unreadCount,
+            " unread ",
+            unreadCount === 1 ? "task" : "tasks"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx8("span", { className: "text-[10px] text-neutral-400 ml-auto", children: totalCount }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: onAddTask,
+            className: "ml-1 p-1 rounded-md text-neutral-400 hover:text-[#FF5E00] hover:bg-[#FF5E00]/10 transition-colors",
+            "aria-label": `Add task to ${column.label}`,
+            children: /* @__PURE__ */ jsx8(PlusIcon, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-neutral-400 mt-0.5 pl-4", children: column.description })
+    ] }),
+    /* @__PURE__ */ jsx8(Droppable, { droppableId: column.key, children: (provided, snapshot) => /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: provided.innerRef,
+        ...provided.droppableProps,
+        className: `flex-1 rounded-xl p-2 min-h-[120px] overflow-y-auto transition-colors ${snapshot.isDraggingOver ? "bg-[#FF5E00]/5 ring-1 ring-[#FF5E00]/20" : "bg-neutral-100/50"}`,
+        children: [
+          /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
+            tasks.map((task, index) => /* @__PURE__ */ jsx8(
+              TaskCard,
+              {
+                task,
+                index,
+                onClick: () => onTaskClick(task),
+                onShare: (e) => {
+                  e.stopPropagation();
+                  onTaskShare(task.id, e);
+                },
+                copied: copiedTaskId === task.id
+              },
+              task.id
+            )),
+            provided.placeholder
+          ] }),
+          tasks.length < totalCount && /* @__PURE__ */ jsx8(
+            LoadMoreSentinel,
+            {
+              loading: loadingMore,
+              onLoadMore,
+              remaining: totalCount - tasks.length
+            }
+          ),
+          tasks.length === 0 && /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-center h-20 text-xs text-neutral-400", children: "No tasks" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/FilterBar.tsx
+import { useState as useState3, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function FilterBar({
+  projects,
+  selectedProject,
+  onSelectProject,
+  filterTags,
+  onSetFilterTags
+}) {
+  const { tags: predefinedTags, features } = useTaskBoardContext();
+  const [filterExpanded, setFilterExpanded] = useState3(false);
+  const filterDropdownRef = useRef4(null);
+  useEffect3(() => {
+    if (!filterExpanded) return;
+    function handleClick(e) {
+      if (filterDropdownRef.current && !filterDropdownRef.current.contains(e.target)) {
+        setFilterExpanded(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [filterExpanded]);
+  const toggleTag = (value) => {
+    onSetFilterTags(
+      filterTags.includes(value) ? filterTags.filter((t) => t !== value) : [...filterTags, value]
+    );
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "mb-4 shrink-0 flex items-start justify-between gap-3", children: [
+    projects.length > 1 && /* @__PURE__ */ jsx9("div", { className: "flex gap-2 flex-nowrap overflow-x-auto eb-tb-no-scrollbar sm:flex-wrap sm:overflow-visible", children: projects.map((project) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        onClick: () => onSelectProject(project.slug),
+        className: `shrink-0 px-4 py-2 text-xs font-medium rounded-lg border transition-colors whitespace-nowrap ${selectedProject === project.slug ? "bg-[#FF5E00] text-white border-[#FF5E00]" : "bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300 hover:text-neutral-900"}`,
+        children: project.name
+      },
+      project.slug
+    )) }),
+    projects.length === 1 && /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-neutral-600", children: projects[0].name }),
+    features.filters && /* @__PURE__ */ jsx9("div", { className: "self-stretch w-px bg-neutral-200 shrink-0" }),
+    features.filters && /* @__PURE__ */ jsxs7("div", { className: "relative shrink-0", ref: filterDropdownRef, children: [
+      /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          onClick: () => setFilterExpanded(!filterExpanded),
+          className: `flex items-center gap-1.5 px-3 py-2 text-xs font-medium rounded-lg border transition-colors ${filterTags.length > 0 ? "bg-[#FF5E00]/5 border-[#FF5E00]/30 text-[#FF5E00]" : "bg-white text-neutral-500 border-neutral-200 hover:border-neutral-300 hover:text-neutral-700"}`,
+          children: [
+            /* @__PURE__ */ jsx9(FilterIcon, { size: 14 }),
+            "Filter",
+            filterTags.length > 0 && /* @__PURE__ */ jsx9("span", { className: "min-w-[16px] h-4 flex items-center justify-center rounded-full bg-[#FF5E00] text-white text-[9px] font-bold px-1", children: filterTags.length })
+          ]
+        }
+      ),
+      filterExpanded && /* @__PURE__ */ jsxs7("div", { className: "absolute right-0 top-full mt-1.5 w-64 bg-white border border-neutral-200 rounded-lg shadow-lg z-20 animate-in fade-in zoom-in-95 duration-75", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "px-3 py-2.5 border-b border-neutral-100 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx9("span", { className: "text-xs font-medium text-neutral-700", children: "Filter by Tags" }),
+          filterTags.length > 0 && /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: () => onSetFilterTags([]),
+              className: "text-[10px] font-medium text-[#FF5E00] hover:text-[#E05200] transition-colors",
+              children: "Clear all"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "py-1", children: [
+          predefinedTags.map((tag) => {
+            const isActive = filterTags.includes(tag.value);
+            return /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                onClick: () => toggleTag(tag.value),
+                className: `w-full flex items-center justify-between px-3 py-2 text-xs hover:bg-neutral-50 transition-colors ${isActive ? "bg-neutral-50" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx9("span", { className: `inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded border ${tag.className}`, children: tag.label }),
+                  isActive && /* @__PURE__ */ jsx9(CheckIcon, { size: 13, strokeWidth: 2.5, className: "text-[#FF5E00]" })
+                ]
+              },
+              tag.value
+            );
+          }),
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              onClick: () => toggleTag("__other__"),
+              className: `w-full flex items-center justify-between px-3 py-2 text-xs hover:bg-neutral-50 transition-colors border-t border-neutral-100 ${filterTags.includes("__other__") ? "bg-neutral-50" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx9("span", { className: "inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded border bg-neutral-100 text-neutral-500 border-neutral-200", children: "Other" }),
+                filterTags.includes("__other__") && /* @__PURE__ */ jsx9(CheckIcon, { size: 13, strokeWidth: 2.5, className: "text-[#FF5E00]" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/NotificationBell.tsx
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4, useRef as useRef5 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function NotificationBell({ onOpenTask }) {
+  const { service, config } = useTaskBoardContext();
+  const [open, setOpen] = useState4(false);
+  const [notifications, setNotifications] = useState4([]);
+  const [unreadCount, setUnreadCount] = useState4(0);
+  const [loading, setLoading] = useState4(false);
+  const dropdownRef = useRef5(null);
+  const pollRef = useRef5(null);
+  const fetchCount = useCallback4(async () => {
+    try {
+      const count = await service.getNotificationCount();
+      setUnreadCount(count);
+    } catch (err) {
+      config.onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [service, config]);
+  useEffect4(() => {
+    fetchCount();
+    pollRef.current = setInterval(fetchCount, NOTIFICATION_POLL_INTERVAL);
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [fetchCount]);
+  const fetchNotifications = async () => {
+    setLoading(true);
+    try {
+      const data = await service.listNotifications();
+      setNotifications(data);
+    } catch (err) {
+      config.onError?.(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const toggleOpen = () => {
+    if (!open) fetchNotifications();
+    setOpen(!open);
+  };
+  useEffect4(() => {
+    if (!open) return;
+    function handleClick2(e) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClick2);
+    return () => document.removeEventListener("mousedown", handleClick2);
+  }, [open]);
+  const markAsRead = async (id) => {
+    try {
+      await service.markNotificationRead(id);
+      setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
+      setUnreadCount((c) => Math.max(0, c - 1));
+    } catch (err) {
+      config.onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  const markAllRead = async () => {
+    try {
+      await service.markAllNotificationsRead();
+      setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+      setUnreadCount(0);
+    } catch (err) {
+      config.onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  const handleClick = (n) => {
+    if (!n.read) markAsRead(n.id);
+    setOpen(false);
+    onOpenTask(n.task_id, n.project_slug);
+  };
+  return /* @__PURE__ */ jsxs8("div", { ref: dropdownRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        onClick: toggleOpen,
+        className: "relative flex items-center justify-center w-9 h-9 rounded-lg border border-neutral-200 hover:border-neutral-300 hover:bg-neutral-50 transition-colors",
+        title: "Notifications",
+        children: [
+          /* @__PURE__ */ jsx10(BellIcon, { size: 16, className: "text-neutral-600" }),
+          unreadCount > 0 && /* @__PURE__ */ jsx10("span", { className: "absolute -top-1 -right-1 min-w-[16px] h-4 px-1 flex items-center justify-center rounded-full bg-[#FF5E00] text-white text-[9px] font-bold", children: unreadCount > 99 ? "99+" : unreadCount })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs8("div", { className: "absolute right-0 mt-2 w-[360px] bg-white rounded-xl shadow-xl border border-neutral-200 z-50 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-4 py-3 border-b border-neutral-100", children: [
+        /* @__PURE__ */ jsx10("h3", { className: "text-sm font-medium text-neutral-900", children: "Notifications" }),
+        unreadCount > 0 && /* @__PURE__ */ jsx10("button", { onClick: markAllRead, className: "text-[11px] font-medium text-[#FF5E00] hover:text-[#E05200] transition-colors", children: "Mark all as read" })
+      ] }),
+      /* @__PURE__ */ jsx10("div", { className: "max-h-[400px] overflow-y-auto", children: loading ? /* @__PURE__ */ jsx10("div", { className: "px-4 py-6 space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs8("div", { className: "flex gap-3 animate-pulse", children: [
+        /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-full bg-neutral-200 shrink-0" }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex-1 space-y-1.5", children: [
+          /* @__PURE__ */ jsx10(SkeletonPulse, { className: "h-3 w-3/4" }),
+          /* @__PURE__ */ jsx10(SkeletonPulse, { className: "h-2.5 w-full" }),
+          /* @__PURE__ */ jsx10(SkeletonPulse, { className: "h-2 w-16" })
+        ] })
+      ] }, i)) }) : notifications.length === 0 ? /* @__PURE__ */ jsxs8("div", { className: "px-4 py-10 text-center", children: [
+        /* @__PURE__ */ jsx10(BellIcon, { size: 32, className: "text-neutral-300 mx-auto mb-2" }),
+        /* @__PURE__ */ jsx10("p", { className: "text-xs text-neutral-400", children: "No notifications yet" })
+      ] }) : notifications.map((n) => /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          onClick: () => handleClick(n),
+          className: `w-full flex items-start gap-3 px-4 py-3 text-left hover:bg-neutral-50 transition-colors border-b border-neutral-50 last:border-b-0 ${!n.read ? "bg-[#FF5E00]/[0.03]" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-full bg-[#FF5E00] text-white text-[10px] font-semibold flex items-center justify-center shrink-0 mt-0.5", children: getInitials(n.actor_name) }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs8("p", { className: "text-xs text-neutral-700 leading-relaxed", children: [
+                /* @__PURE__ */ jsx10("span", { className: "font-semibold text-neutral-900", children: n.actor_name }),
+                " mentioned you in ",
+                n.context === "description" ? "the description of " : "a comment on ",
+                /* @__PURE__ */ jsx10("span", { className: "font-medium text-neutral-800", children: n.task_title })
+              ] }),
+              n.snippet && /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-neutral-400 mt-0.5 truncate", children: n.snippet }),
+              /* @__PURE__ */ jsx10("p", { className: "text-[10px] text-neutral-400 mt-1", children: formatDateTime(n.created_at) })
+            ] }),
+            !n.read && /* @__PURE__ */ jsx10("span", { className: "w-2 h-2 rounded-full bg-[#FF5E00] shrink-0 mt-2" })
+          ]
+        },
+        n.id
+      )) })
+    ] })
+  ] });
+}
+
+// src/components/CreateTaskModal.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function CreateTaskModal({
+  projectSlug,
+  defaultStatus = "backlog",
+  onClose,
+  onCreate
+}) {
+  const { columns, priorities, tags: predefinedTags, service, config } = useTaskBoardContext();
+  const [title, setTitle] = useState5("");
+  const [description, setDescription] = useState5({ ...EMPTY_DESCRIPTION });
+  const [priority, setPriority] = useState5("medium");
+  const [taskStatus, setTaskStatus] = useState5(defaultStatus);
+  const [selectedTags, setSelectedTags] = useState5([]);
+  const [customTag, setCustomTag] = useState5("");
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5("");
+  const [showColumnDropdown, setShowColumnDropdown] = useState5(false);
+  const [showPriorityDropdown, setShowPriorityDropdown] = useState5(false);
+  const toggleTag = (tag) => {
+    setSelectedTags(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+  };
+  const addCustomTag = () => {
+    const tag = customTag.trim().toLowerCase().replace(/\s+/g, "-");
+    if (tag && !selectedTags.includes(tag)) {
+      setSelectedTags((prev) => [...prev, tag]);
+    }
+    setCustomTag("");
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    setLoading(true);
+    setError("");
+    try {
+      const task = await service.createTask({
+        project_slug: projectSlug,
+        title: title.trim(),
+        description,
+        priority,
+        status: taskStatus,
+        tags: selectedTags
+      });
+      config.onTaskCreate?.(task);
+      onCreate();
+      onClose();
+    } catch (err) {
+      const apiErr = err;
+      setError(apiErr?.response?.data?.detail || apiErr?.message || "Failed to create task");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const priorityStyle = getPriorityStyle(priority);
+  const statusCol = columns.find((c) => c.key === taskStatus);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-sm eb-tb-animate-fade-in",
+      onClick: (e) => e.target === e.currentTarget && onClose(),
+      children: /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-2xl shadow-2xl border border-neutral-200 w-[80vw] max-w-[1100px] h-[85vh] flex flex-col eb-tb-animate-zoom-in", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-neutral-100 shrink-0", children: [
+          /* @__PURE__ */ jsx11("h2", { className: "text-lg font-semibold text-neutral-900", children: "New Task" }),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 rounded-md text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors",
+              children: /* @__PURE__ */ jsx11(XIcon, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "flex-1 flex flex-col min-h-0", children: [
+          error && /* @__PURE__ */ jsx11("div", { className: "mx-6 mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm", children: error }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex-1 flex min-h-0 overflow-hidden", children: [
+            /* @__PURE__ */ jsx11("div", { className: "flex-1 overflow-y-auto px-6 py-5 border-r border-neutral-100", children: /* @__PURE__ */ jsxs9("div", { className: "max-w-2xl", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "pb-4", children: [
+                /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-neutral-700 mb-1.5 block", children: "Title" }),
+                /* @__PURE__ */ jsx11(
+                  "input",
+                  {
+                    type: "text",
+                    required: true,
+                    value: title,
+                    onChange: (e) => setTitle(e.target.value),
+                    className: "w-full px-3 py-2.5 border border-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#FF5E00]/10 focus:border-[#FF5E00]/50",
+                    placeholder: "What needs to be done?",
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx11("div", { className: "border-t border-neutral-100 pt-4 pb-1", children: /* @__PURE__ */ jsx11("span", { className: "text-[10px] font-semibold text-neutral-400 uppercase tracking-wider", children: "Description" }) }),
+              DESCRIPTION_SECTIONS.map((section, idx) => /* @__PURE__ */ jsxs9("div", { className: `py-3 ${idx < DESCRIPTION_SECTIONS.length - 1 ? "border-b border-dashed border-neutral-100" : ""}`, children: [
+                /* @__PURE__ */ jsxs9("label", { className: "text-xs font-medium text-neutral-700 mb-1.5 block", children: [
+                  section.label,
+                  " ",
+                  /* @__PURE__ */ jsx11("span", { className: "text-neutral-400 font-normal", children: "(optional)" })
+                ] }),
+                /* @__PURE__ */ jsx11(
+                  "textarea",
+                  {
+                    value: description[section.key],
+                    onChange: (e) => setDescription((prev) => ({ ...prev, [section.key]: e.target.value })),
+                    rows: 3,
+                    className: "w-full px-3 py-2.5 border border-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#FF5E00]/10 focus:border-[#FF5E00]/50 resize-y",
+                    placeholder: `Add ${section.label.toLowerCase()}...`
+                  }
+                )
+              ] }, section.key))
+            ] }) }),
+            /* @__PURE__ */ jsxs9("div", { className: "w-[340px] shrink-0 overflow-y-auto px-5 py-5 bg-neutral-50/30", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-4 mb-5", children: [
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx11("label", { className: "text-[11px] font-semibold text-neutral-500 uppercase tracking-wide mb-2 block", children: "Column" }),
+                  /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsxs9(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowColumnDropdown(!showColumnDropdown),
+                        className: "w-full flex items-center justify-between gap-2 px-3 py-2 text-xs font-medium rounded-lg border border-neutral-200 bg-white hover:border-neutral-300 transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx11("span", { className: `w-2 h-2 rounded-full ${statusCol?.color ?? "bg-neutral-400"}` }),
+                            statusCol?.label ?? taskStatus
+                          ] }),
+                          /* @__PURE__ */ jsx11(ChevronDownIcon, { size: 12, className: "text-neutral-400" })
+                        ]
+                      }
+                    ),
+                    showColumnDropdown && /* @__PURE__ */ jsx11("div", { className: "absolute top-full mt-1 left-0 right-0 bg-white border border-neutral-200 rounded-lg shadow-lg z-10 py-1 eb-tb-animate-zoom-in", children: columns.map((col) => /* @__PURE__ */ jsxs9(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setTaskStatus(col.key);
+                          setShowColumnDropdown(false);
+                        },
+                        className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-neutral-50 text-left ${taskStatus === col.key ? "font-medium bg-neutral-50" : ""}`,
+                        children: [
+                          /* @__PURE__ */ jsx11("span", { className: `w-2 h-2 rounded-full ${col.color}` }),
+                          col.label
+                        ]
+                      },
+                      col.key
+                    )) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx11("label", { className: "text-[11px] font-semibold text-neutral-500 uppercase tracking-wide mb-2 block", children: "Priority" }),
+                  /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsxs9(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setShowPriorityDropdown(!showPriorityDropdown),
+                        className: `w-full flex items-center justify-between gap-2 px-3 py-2 text-xs font-medium rounded-lg border transition-colors ${priorityStyle.className}`,
+                        children: [
+                          priorityStyle.label,
+                          /* @__PURE__ */ jsx11(ChevronDownIcon, { size: 12, className: "opacity-50" })
+                        ]
+                      }
+                    ),
+                    showPriorityDropdown && /* @__PURE__ */ jsx11("div", { className: "absolute top-full mt-1 left-0 right-0 bg-white border border-neutral-200 rounded-lg shadow-lg z-10 py-1 eb-tb-animate-zoom-in", children: priorities.map((p) => /* @__PURE__ */ jsx11(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setPriority(p.value);
+                          setShowPriorityDropdown(false);
+                        },
+                        className: `w-full flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-neutral-50 text-left ${priority === p.value ? "bg-neutral-50" : ""}`,
+                        children: /* @__PURE__ */ jsx11("span", { className: `inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded border ${p.className}`, children: p.label })
+                      },
+                      p.value
+                    )) })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs9("div", { children: [
+                /* @__PURE__ */ jsx11("label", { className: "text-[11px] font-semibold text-neutral-500 uppercase tracking-wide mb-2 block", children: "Tags" }),
+                /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: predefinedTags.map((tag) => {
+                  const isSelected = selectedTags.includes(tag.value);
+                  return /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleTag(tag.value),
+                      className: `w-full flex items-center justify-between px-3 py-2 text-xs rounded-lg border transition-colors text-left ${isSelected ? "bg-[#FF5E00]/5 border-[#FF5E00]/30 text-neutral-800" : "bg-white text-neutral-600 border-neutral-200 hover:border-neutral-300"}`,
+                      children: [
+                        /* @__PURE__ */ jsx11("span", { className: `inline-flex items-center px-1.5 py-px text-[10px] font-medium rounded border ${tag.className}`, children: tag.label }),
+                        isSelected && /* @__PURE__ */ jsx11(CheckIcon, { size: 13, strokeWidth: 2.5, className: "text-[#FF5E00]" })
+                      ]
+                    },
+                    tag.value
+                  );
+                }) }),
+                /* @__PURE__ */ jsxs9("div", { className: "mt-2.5 flex gap-1.5", children: [
+                  /* @__PURE__ */ jsx11(
+                    "input",
+                    {
+                      type: "text",
+                      value: customTag,
+                      onChange: (e) => setCustomTag(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          addCustomTag();
+                        }
+                      },
+                      className: "flex-1 px-2.5 py-1.5 border border-neutral-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-[#FF5E00]/10 focus:border-[#FF5E00]/50 bg-white",
+                      placeholder: "Custom tag..."
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: addCustomTag,
+                      disabled: !customTag.trim(),
+                      className: "px-2.5 py-1.5 text-xs font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-lg transition-colors disabled:opacity-40",
+                      children: "Add"
+                    }
+                  )
+                ] }),
+                selectedTags.filter((t) => !predefinedTags.some((p) => p.value === t)).length > 0 && /* @__PURE__ */ jsx11("div", { className: "flex gap-1.5 flex-wrap mt-2", children: selectedTags.filter((t) => !predefinedTags.some((p) => p.value === t)).map((tag) => /* @__PURE__ */ jsxs9(
+                  "span",
+                  {
+                    className: "inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-neutral-100 text-neutral-500 border border-neutral-200 rounded",
+                    children: [
+                      tag,
+                      /* @__PURE__ */ jsx11(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSelectedTags((prev) => prev.filter((t) => t !== tag)),
+                          className: "text-neutral-400 hover:text-neutral-600",
+                          children: /* @__PURE__ */ jsx11(XIcon, { size: 12 })
+                        }
+                      )
+                    ]
+                  },
+                  tag
+                )) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-neutral-100 shrink-0 bg-white", children: [
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "px-4 py-2 text-sm text-neutral-600 hover:text-neutral-900 transition-colors",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "submit",
+                disabled: loading,
+                className: "px-6 py-2 text-sm font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-lg transition-colors disabled:opacity-60",
+                children: loading ? "Creating..." : "Create Task"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/TaskDetailPanel.tsx
+import { useState as useState8, useEffect as useEffect7, useRef as useRef7 } from "react";
+
+// src/hooks/useTaskDetail.ts
+import { useState as useState6, useEffect as useEffect5, useCallback as useCallback5 } from "react";
+function getErrorMessage(err) {
+  const apiErr = err;
+  return apiErr?.response?.data?.detail || apiErr?.message || "An error occurred";
+}
+function useTaskDetail(taskId) {
+  const { service, config } = useTaskBoardContext();
+  const [comments, setComments] = useState6([]);
+  const [activity, setActivity] = useState6([]);
+  const [commentsLoaded, setCommentsLoaded] = useState6(false);
+  const [commentLoading, setCommentLoading] = useState6(false);
+  const fetchDetail = useCallback5(async () => {
+    try {
+      const data = await service.getTask(taskId);
+      setComments(data.comments || []);
+      setActivity(data.activity || []);
+    } catch {
+      try {
+        const comments2 = await service.listComments(taskId);
+        setComments(comments2);
+      } catch {
+      }
+    } finally {
+      setCommentsLoaded(true);
+    }
+  }, [taskId, service]);
+  useEffect5(() => {
+    fetchDetail();
+  }, [fetchDetail]);
+  const addComment = async (content, isInternal = false) => {
+    setCommentLoading(true);
+    try {
+      await service.addComment(taskId, { content, is_internal: isInternal });
+      await fetchDetail();
+    } catch (err) {
+      const message = getErrorMessage(err);
+      config.onError?.(err instanceof Error ? err : new Error(message));
+    } finally {
+      setCommentLoading(false);
+    }
+  };
+  const editComment = async (commentId, content) => {
+    try {
+      await service.editComment(taskId, commentId, { content });
+      await fetchDetail();
+    } catch (err) {
+      const msg = getErrorMessage(err);
+      throw new Error(msg);
+    }
+  };
+  const deleteComment = async (commentId) => {
+    try {
+      await service.deleteComment(taskId, commentId);
+      await fetchDetail();
+    } catch (err) {
+      const msg = getErrorMessage(err);
+      throw new Error(msg);
+    }
+  };
+  const saveField = async (field, value) => {
+    await service.updateTask(taskId, { [field]: value });
+  };
+  return {
+    comments,
+    activity,
+    commentsLoaded,
+    commentLoading,
+    addComment,
+    editComment,
+    deleteComment,
+    saveField,
+    refreshDetail: fetchDetail
+  };
+}
+
+// src/components/MentionText.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var MENTION_RE = /(@\[.*?\]\(.*?\))/g;
+var MENTION_PARSE = /^@\[(.*?)\]\((.*?)\)$/;
+function MentionText({ text, className = "" }) {
+  if (!text) return null;
+  const parts = text.split(MENTION_RE);
+  return /* @__PURE__ */ jsx12("span", { className, children: parts.map((part, i) => {
+    const match = part.match(MENTION_PARSE);
+    if (match) {
+      return /* @__PURE__ */ jsxs10(
+        "span",
+        {
+          className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 bg-[#FF5E00]/10 text-[#FF5E00] rounded text-[11px] font-semibold cursor-default",
+          title: `@${match[2]}`,
+          children: [
+            "@",
+            match[1]
+          ]
+        },
+        i
+      );
+    }
+    return /* @__PURE__ */ jsx12("span", { children: part }, i);
+  }) });
+}
+function toDisplayText(stored) {
+  return stored.replace(/@\[(.*?)\]\(.*?\)/g, "@$1");
+}
+function toStoredText(display, mentionMap) {
+  let result = display;
+  mentionMap.forEach((username, name) => {
+    result = result.replace(new RegExp(`@${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "g"), `@[${name}](${username})`);
+  });
+  return result;
+}
+
+// src/components/MentionTextarea.tsx
+import { useState as useState7, useEffect as useEffect6, useRef as useRef6 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function MentionTextarea({
+  value,
+  onChange,
+  onKeyDown,
+  placeholder = "",
+  rows = 2,
+  className = "",
+  disabled = false
+}) {
+  const { service, features } = useTaskBoardContext();
+  const textareaRef = useRef6(null);
+  const [mentionQuery, setMentionQuery] = useState7(null);
+  const [mentionStart, setMentionStart] = useState7(0);
+  const [mentionUsers, setMentionUsers] = useState7([]);
+  const [selectedIndex, setSelectedIndex] = useState7(0);
+  const fetchTimeoutRef = useRef6(null);
+  const mentionMapRef = useRef6(/* @__PURE__ */ new Map());
+  useEffect6(() => {
+    const re = /@\[(.*?)\]\((.*?)\)/g;
+    let match;
+    while ((match = re.exec(value)) !== null) {
+      mentionMapRef.current.set(match[1], match[2]);
+    }
+  }, []);
+  useEffect6(() => {
+    if (!features.mentions || mentionQuery === null) {
+      setMentionUsers([]);
+      return;
+    }
+    if (fetchTimeoutRef.current) clearTimeout(fetchTimeoutRef.current);
+    fetchTimeoutRef.current = setTimeout(async () => {
+      try {
+        const users = await service.searchMentionUsers(mentionQuery);
+        setMentionUsers(users);
+        setSelectedIndex(0);
+      } catch {
+        setMentionUsers([]);
+      }
+    }, 150);
+    return () => {
+      if (fetchTimeoutRef.current) clearTimeout(fetchTimeoutRef.current);
+    };
+  }, [mentionQuery, service, features.mentions]);
+  const displayValue = toDisplayText(value);
+  const handleChange = (e) => {
+    const newDisplay = e.target.value;
+    const stored = toStoredText(newDisplay, mentionMapRef.current);
+    onChange(stored);
+    const cursorPos = e.target.selectionStart;
+    const textBefore = newDisplay.slice(0, cursorPos);
+    const atIndex = textBefore.lastIndexOf("@");
+    if (atIndex >= 0) {
+      const charBefore = atIndex > 0 ? textBefore[atIndex - 1] : " ";
+      if (charBefore === " " || charBefore === "\n" || atIndex === 0) {
+        const query = textBefore.slice(atIndex + 1);
+        if (!query.includes(" ") || query.length <= 20) {
+          setMentionQuery(query);
+          setMentionStart(atIndex);
+          return;
+        }
+      }
+    }
+    setMentionQuery(null);
+  };
+  const insertMention = (user) => {
+    const display = toDisplayText(value);
+    const before = display.slice(0, mentionStart);
+    const after = display.slice(mentionStart + 1 + (mentionQuery?.length || 0));
+    mentionMapRef.current.set(user.name, user.username);
+    const newDisplay = before + `@${user.name} ` + after;
+    const stored = toStoredText(newDisplay, mentionMapRef.current);
+    onChange(stored);
+    setMentionQuery(null);
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+        const pos = before.length + user.name.length + 2;
+        textareaRef.current.setSelectionRange(pos, pos);
+      }
+    }, 0);
+  };
+  const handleKeyDown = (e) => {
+    if (mentionQuery !== null && mentionUsers.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, mentionUsers.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        insertMention(mentionUsers[selectedIndex]);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setMentionQuery(null);
+        return;
+      }
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx13(
+      "textarea",
+      {
+        ref: textareaRef,
+        value: displayValue,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        rows,
+        className,
+        placeholder,
+        disabled
+      }
+    ),
+    mentionQuery !== null && mentionUsers.length > 0 && /* @__PURE__ */ jsxs11("div", { className: "absolute bottom-full left-0 mb-1 w-64 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1 max-h-48 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx13("div", { className: "px-2.5 py-1.5 text-[10px] font-medium text-neutral-400 uppercase tracking-wide", children: "People" }),
+      mentionUsers.map((user, i) => /* @__PURE__ */ jsxs11(
+        "button",
+        {
+          onClick: () => insertMention(user),
+          className: `w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left hover:bg-neutral-50 ${i === selectedIndex ? "bg-neutral-50" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx13("div", { className: "w-6 h-6 rounded-full bg-[#FF5E00] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-medium text-white", children: getInitials(user.name) }) }),
+            /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx13("div", { className: "text-xs font-medium text-neutral-800 truncate", children: user.name }),
+              /* @__PURE__ */ jsx13("div", { className: "text-[10px] text-neutral-400 truncate", children: user.email })
+            ] })
+          ]
+        },
+        user.username
+      ))
+    ] })
+  ] });
+}
+
+// src/components/TaskDetailPanel.tsx
+import { Fragment, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function TaskDetailPanel({ task, projectSlug, onClose, onUpdate }) {
+  const { columns, priorities, tags: predefinedTags, service, config, user, features } = useTaskBoardContext();
+  const detail = useTaskDetail(task.id);
+  const { copiedTaskId, copyShareLink } = useShareLink();
+  const [title, setTitle] = useState8(task.title);
+  const [description, setDescription] = useState8(task.description || EMPTY_DESCRIPTION);
+  const [priority, setPriority] = useState8(task.priority);
+  const [taskStatus, setTaskStatus] = useState8(task.status);
+  const [localTags, setLocalTags] = useState8(task.tags || []);
+  const [pendingTags, setPendingTags] = useState8([]);
+  const [saving, setSaving] = useState8(false);
+  const [editing, setEditing] = useState8(false);
+  const [newComment, setNewComment] = useState8("");
+  const [isInternalComment, setIsInternalComment] = useState8(false);
+  const [showPriorityDropdown, setShowPriorityDropdown] = useState8(false);
+  const [showStatusDropdown, setShowStatusDropdown] = useState8(false);
+  const [showTagDropdown, setShowTagDropdown] = useState8(false);
+  const [showOtherTagInput, setShowOtherTagInput] = useState8(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState8(false);
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState8(false);
+  const [commentToDelete, setCommentToDelete] = useState8(null);
+  const [editingCommentId, setEditingCommentId] = useState8(null);
+  const [editingCommentContent, setEditingCommentContent] = useState8("");
+  const commentsEndRef = useRef7(null);
+  const hasUnsavedChanges = editing && (title !== task.title || JSON.stringify(description) !== JSON.stringify(task.description));
+  useEffect7(() => {
+    if (commentsEndRef.current) {
+      commentsEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [detail.comments]);
+  const saveField = async (field, value) => {
+    setSaving(true);
+    try {
+      await detail.saveField(field, value);
+      onUpdate();
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleSaveEdit = async () => {
+    setSaving(true);
+    try {
+      const updates = {};
+      if (title.trim() && title !== task.title) updates.title = title.trim();
+      if (JSON.stringify(description) !== JSON.stringify(task.description)) updates.description = description;
+      if (Object.keys(updates).length > 0) {
+        await service.updateTask(task.id, updates);
+        onUpdate();
+      }
+    } finally {
+      setSaving(false);
+      setEditing(false);
+    }
+  };
+  const handleCancelEdit = () => {
+    if (hasUnsavedChanges) {
+      setShowDiscardConfirm(true);
+    } else {
+      setEditing(false);
+    }
+  };
+  const handleDiscardChanges = () => {
+    setTitle(task.title);
+    setDescription(task.description || EMPTY_DESCRIPTION);
+    setEditing(false);
+    setShowDiscardConfirm(false);
+  };
+  const handleClosePanel = () => {
+    if (hasUnsavedChanges) {
+      setShowDiscardConfirm(true);
+    } else {
+      onClose();
+    }
+  };
+  const handleDelete = async () => {
+    setSaving(true);
+    try {
+      await service.deleteTask(task.id);
+      config.onTaskDelete?.(task.id);
+      onUpdate();
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handlePriorityChange = (p) => {
+    setPriority(p);
+    setShowPriorityDropdown(false);
+    saveField("priority", p);
+  };
+  const handleStatusChange = (s) => {
+    setTaskStatus(s);
+    setShowStatusDropdown(false);
+    saveField("status", s);
+  };
+  const handleAddComment = async () => {
+    if (!newComment.trim()) return;
+    await detail.addComment(newComment.trim(), isInternalComment);
+    setNewComment("");
+    setIsInternalComment(false);
+    onUpdate();
+  };
+  const handleCommentKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleAddComment();
+    }
+  };
+  const handleDeleteComment = async () => {
+    if (!commentToDelete) return;
+    try {
+      await detail.deleteComment(commentToDelete);
+      setCommentToDelete(null);
+      onUpdate();
+    } catch (err) {
+      setCommentToDelete(null);
+    }
+  };
+  const startEditingComment = (c) => {
+    setEditingCommentId(c.id);
+    setEditingCommentContent(c.content);
+  };
+  const cancelEditingComment = () => {
+    setEditingCommentId(null);
+    setEditingCommentContent("");
+  };
+  const saveEditedComment = async () => {
+    if (!editingCommentId || !editingCommentContent.trim()) return;
+    try {
+      await detail.editComment(editingCommentId, editingCommentContent.trim());
+      setEditingCommentId(null);
+      setEditingCommentContent("");
+    } catch {
+    }
+  };
+  const statusCol = columns.find((c) => c.key === taskStatus);
+  const priorityStyle = getPriorityStyle(priority);
+  const initials = getInitials(task.created_by_name || "?");
+  const linkCopied = copiedTaskId === task.id;
+  const handleShareFromDetail = () => {
+    copyShareLink(task.id, projectSlug);
+  };
+  const timeline = [
+    ...detail.comments.map((c) => ({ kind: "comment", date: c.created_at, data: c })),
+    ...detail.activity.map((a) => ({ kind: "activity", date: a.created_at, data: a }))
+  ].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-end justify-end bg-black/30 backdrop-blur-md eb-tb-animate-fade-in",
+      onClick: (e) => e.target === e.currentTarget && handleClosePanel(),
+      children: [
+        /* @__PURE__ */ jsxs12(
+          "div",
+          {
+            className: "bg-white shadow-2xl border-l border-neutral-200 w-full lg:w-[75vw] h-full flex flex-col",
+            style: { animation: "eb-tb-slide-in-right 0.15s ease-out" },
+            children: [
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 sm:gap-4 px-4 sm:px-8 py-3 sm:py-4 border-b border-neutral-100 shrink-0", children: [
+                /* @__PURE__ */ jsx14("h2", { className: "flex-1 text-base sm:text-lg font-semibold text-neutral-900 truncate min-w-0", children: title }),
+                /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 shrink-0", children: [
+                  saving && /* @__PURE__ */ jsx14("span", { className: "text-[11px] text-neutral-400 mr-1", children: "Saving..." }),
+                  editing ? /* @__PURE__ */ jsxs12(Fragment, { children: [
+                    /* @__PURE__ */ jsxs12("button", { onClick: handleCancelEdit, className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 rounded-lg hover:bg-neutral-100 transition-colors", children: [
+                      /* @__PURE__ */ jsx14(XIcon, { size: 13 }),
+                      " Cancel"
+                    ] }),
+                    /* @__PURE__ */ jsxs12("button", { onClick: handleSaveEdit, disabled: saving, className: "flex items-center gap-1.5 px-4 py-1.5 text-xs font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-lg transition-colors disabled:opacity-60", children: [
+                      /* @__PURE__ */ jsx14(CheckIcon, { size: 13 }),
+                      " ",
+                      saving ? "Saving..." : "Save"
+                    ] })
+                  ] }) : /* @__PURE__ */ jsxs12(Fragment, { children: [
+                    features.sharing && /* @__PURE__ */ jsx14("button", { onClick: handleShareFromDetail, className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 rounded-lg border border-neutral-200 hover:border-neutral-300 transition-colors", children: linkCopied ? /* @__PURE__ */ jsxs12(Fragment, { children: [
+                      /* @__PURE__ */ jsx14(CheckIcon, { size: 13 }),
+                      " Copied!"
+                    ] }) : /* @__PURE__ */ jsxs12(Fragment, { children: [
+                      /* @__PURE__ */ jsx14(LinkIcon, { size: 13 }),
+                      " Share"
+                    ] }) }),
+                    /* @__PURE__ */ jsxs12("button", { onClick: () => setEditing(true), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 rounded-lg border border-neutral-200 hover:border-neutral-300 transition-colors", children: [
+                      /* @__PURE__ */ jsx14(PencilIcon, { size: 13 }),
+                      " Edit"
+                    ] }),
+                    /* @__PURE__ */ jsxs12("button", { onClick: () => setShowDeleteConfirm(true), className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 rounded-lg border border-neutral-200 hover:border-neutral-300 transition-colors", children: [
+                      /* @__PURE__ */ jsx14(TrashIcon, { size: 13 }),
+                      " Delete"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx14("button", { onClick: handleClosePanel, className: "p-1.5 rounded-md text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-1", children: /* @__PURE__ */ jsx14(XIcon, { size: 16 }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col md:flex-row min-h-0", children: [
+                /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-y-auto min-w-0", children: /* @__PURE__ */ jsxs12("div", { className: "max-w-2xl px-4 sm:px-8 lg:px-10 py-6 sm:py-8", children: [
+                  editing && /* @__PURE__ */ jsxs12("div", { className: "mb-6", children: [
+                    /* @__PURE__ */ jsx14("label", { className: "text-[11px] font-medium text-neutral-400 uppercase tracking-wide mb-2 block", children: "Title" }),
+                    /* @__PURE__ */ jsx14(
+                      "input",
+                      {
+                        value: title,
+                        onChange: (e) => setTitle(e.target.value),
+                        className: "w-full text-lg font-semibold text-neutral-900 bg-white border border-neutral-200 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF5E00]/10 focus:border-[#FF5E00]/50 leading-tight",
+                        placeholder: "Task title",
+                        autoFocus: true
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs12("div", { className: `${editing ? "mt-0" : "mt-2"} rounded-lg border border-neutral-100 grid grid-cols-1 sm:grid-cols-2`, children: [
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center h-10 px-4 border-b sm:border-r border-neutral-100", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Task ID" }),
+                      /* @__PURE__ */ jsxs12("span", { className: "text-[11px] font-mono text-neutral-400 bg-neutral-100 px-1.5 py-0.5 rounded", children: [
+                        "T-",
+                        task.id.slice(-6).toUpperCase()
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center h-10 px-4 border-b border-neutral-100", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Creator" }),
+                      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx14("div", { className: "w-5 h-5 rounded-full bg-[#FF5E00] flex items-center justify-center", children: /* @__PURE__ */ jsx14("span", { className: "text-[8px] font-medium text-white leading-none", children: initials }) }),
+                        /* @__PURE__ */ jsx14("span", { className: "text-xs text-neutral-700", children: task.created_by_name || task.created_by })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center h-10 px-4 border-b sm:border-r border-neutral-100", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Created" }),
+                      /* @__PURE__ */ jsx14("span", { className: "text-xs text-neutral-600", children: formatDateTime(task.created_at) })
+                    ] }),
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center h-10 px-4 border-b border-neutral-100", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Updated" }),
+                      /* @__PURE__ */ jsx14("span", { className: "text-xs text-neutral-600", children: task.updated_at ? formatDateTime(task.updated_at) : "\u2014" })
+                    ] }),
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center h-10 px-4 border-b sm:border-r border-neutral-100 hover:bg-neutral-50/50 transition-colors", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Status" }),
+                      /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+                        /* @__PURE__ */ jsxs12(
+                          "button",
+                          {
+                            onClick: () => {
+                              setShowStatusDropdown(!showStatusDropdown);
+                              setShowPriorityDropdown(false);
+                              setShowTagDropdown(false);
+                            },
+                            className: "flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-md hover:bg-neutral-100 transition-colors",
+                            children: [
+                              /* @__PURE__ */ jsx14("span", { className: `w-2 h-2 rounded-full ${statusCol?.color ?? "bg-neutral-400"}` }),
+                              statusCol?.label ?? taskStatus,
+                              /* @__PURE__ */ jsx14(ChevronDownIcon, { size: 12, className: "text-neutral-400" })
+                            ]
+                          }
+                        ),
+                        showStatusDropdown && /* @__PURE__ */ jsx14("div", { className: "absolute top-full mt-1 left-0 bg-white border border-neutral-200 rounded-lg shadow-lg z-10 py-1 w-52 eb-tb-animate-zoom-in", children: columns.map((col) => /* @__PURE__ */ jsxs12("button", { onClick: () => handleStatusChange(col.key), className: `w-full text-left px-3 py-1.5 text-xs hover:bg-neutral-50 flex items-center gap-2 ${taskStatus === col.key ? "font-medium bg-neutral-50" : ""}`, children: [
+                          /* @__PURE__ */ jsx14("span", { className: `w-2 h-2 rounded-full ${col.color}` }),
+                          " ",
+                          col.label
+                        ] }, col.key)) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center h-10 px-4 border-b border-neutral-100 hover:bg-neutral-50/50 transition-colors", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Priority" }),
+                      /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+                        /* @__PURE__ */ jsxs12(
+                          "button",
+                          {
+                            onClick: () => {
+                              setShowPriorityDropdown(!showPriorityDropdown);
+                              setShowStatusDropdown(false);
+                              setShowTagDropdown(false);
+                            },
+                            className: `flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-md transition-colors border ${priorityStyle.className}`,
+                            children: [
+                              priorityStyle.label,
+                              /* @__PURE__ */ jsx14(ChevronDownIcon, { size: 12, className: "opacity-50" })
+                            ]
+                          }
+                        ),
+                        showPriorityDropdown && /* @__PURE__ */ jsx14("div", { className: "absolute top-full mt-1 left-0 bg-white border border-neutral-200 rounded-lg shadow-lg z-10 py-1 w-40 eb-tb-animate-zoom-in", children: priorities.map((p) => /* @__PURE__ */ jsx14("button", { onClick: () => handlePriorityChange(p.value), className: `w-full text-left px-3 py-2 text-xs hover:bg-neutral-50 flex items-center gap-2 ${priority === p.value ? "bg-neutral-50" : ""}`, children: /* @__PURE__ */ jsx14("span", { className: `inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded border ${p.className}`, children: p.label }) }, p.value)) })
+                      ] })
+                    ] }),
+                    features.tags && /* @__PURE__ */ jsxs12("div", { className: "flex items-center min-h-[40px] px-4 border-b border-neutral-100 sm:col-span-2 hover:bg-neutral-50/50 transition-colors", children: [
+                      /* @__PURE__ */ jsx14("span", { className: "w-14 text-[11px] text-neutral-400 font-medium shrink-0", children: "Tags" }),
+                      /* @__PURE__ */ jsxs12("div", { className: "relative flex-1 flex items-center gap-1.5 flex-wrap py-1.5", children: [
+                        localTags.map((tag) => /* @__PURE__ */ jsx14(TagBadge, { tag, size: "sm", onRemove: () => {
+                          const newTags = localTags.filter((t) => t !== tag);
+                          setLocalTags(newTags);
+                          saveField("tags", newTags);
+                        } }, tag)),
+                        /* @__PURE__ */ jsxs12(
+                          "button",
+                          {
+                            onClick: () => {
+                              if (!showTagDropdown) setPendingTags([...localTags]);
+                              setShowTagDropdown(!showTagDropdown);
+                              setShowStatusDropdown(false);
+                              setShowPriorityDropdown(false);
+                            },
+                            className: "inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] text-neutral-400 hover:text-neutral-600 rounded border border-dashed border-neutral-300 hover:border-neutral-400 transition-colors",
+                            children: [
+                              /* @__PURE__ */ jsx14(PlusIcon, { size: 12 }),
+                              " ",
+                              showTagDropdown ? "Close" : "Edit"
+                            ]
+                          }
+                        ),
+                        showTagDropdown && /* @__PURE__ */ jsxs12("div", { className: "absolute top-full left-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-10 w-56 eb-tb-animate-zoom-in", children: [
+                          /* @__PURE__ */ jsxs12("div", { className: "py-1", children: [
+                            predefinedTags.map((tag) => {
+                              const isSelected = pendingTags.includes(tag.value);
+                              return /* @__PURE__ */ jsxs12(
+                                "button",
+                                {
+                                  onClick: () => setPendingTags((prev) => isSelected ? prev.filter((t) => t !== tag.value) : [...prev, tag.value]),
+                                  className: `w-full text-left px-3 py-1.5 text-xs hover:bg-neutral-50 flex items-center justify-between ${isSelected ? "bg-neutral-50" : ""}`,
+                                  children: [
+                                    /* @__PURE__ */ jsx14("span", { className: `inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded border ${tag.className}`, children: tag.label }),
+                                    isSelected && /* @__PURE__ */ jsx14(CheckIcon, { size: 12, strokeWidth: 2.5, className: "text-[#FF5E00]" })
+                                  ]
+                                },
+                                tag.value
+                              );
+                            }),
+                            !showOtherTagInput ? /* @__PURE__ */ jsx14("button", { onClick: () => setShowOtherTagInput(true), className: "w-full text-left px-3 py-1.5 text-xs hover:bg-neutral-50 flex items-center justify-between", children: /* @__PURE__ */ jsx14("span", { className: "inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded border bg-neutral-100 text-neutral-500 border-neutral-200", children: "Other" }) }) : /* @__PURE__ */ jsx14("div", { className: "px-3 py-2 bg-neutral-50/50", children: /* @__PURE__ */ jsxs12("div", { className: "flex gap-1.5", children: [
+                              /* @__PURE__ */ jsx14("input", { type: "text", autoFocus: true, onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                  e.preventDefault();
+                                  const val = e.currentTarget.value.trim().toLowerCase().replace(/\s+/g, "-");
+                                  if (val && !pendingTags.includes(val)) setPendingTags((prev) => [...prev, val]);
+                                  e.currentTarget.value = "";
+                                  setShowOtherTagInput(false);
+                                }
+                                if (e.key === "Escape") setShowOtherTagInput(false);
+                              }, className: "flex-1 px-2 py-1.5 text-xs border border-neutral-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[#FF5E00]/20 focus:border-[#FF5E00]/50", placeholder: "Type a custom tag...", onClick: (e) => e.stopPropagation() }),
+                              /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => setShowOtherTagInput(false), className: "px-2.5 py-1.5 text-[10px] font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-md transition-colors", children: "Add" })
+                            ] }) })
+                          ] }),
+                          /* @__PURE__ */ jsxs12("div", { className: "border-t border-neutral-100 px-2 py-2 flex items-center justify-end gap-2", children: [
+                            /* @__PURE__ */ jsx14("button", { onClick: () => {
+                              setPendingTags([...localTags]);
+                              setShowTagDropdown(false);
+                              setShowOtherTagInput(false);
+                            }, className: "px-2.5 py-1 text-[11px] font-medium text-neutral-500 hover:text-neutral-700 transition-colors", children: "Cancel" }),
+                            /* @__PURE__ */ jsx14("button", { onClick: () => {
+                              setLocalTags([...pendingTags]);
+                              saveField("tags", pendingTags);
+                              setShowTagDropdown(false);
+                              setShowOtherTagInput(false);
+                            }, className: "px-3 py-1 text-[11px] font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded transition-colors", children: "Save" })
+                          ] })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs12("div", { className: "mt-5 space-y-4", children: [
+                    DESCRIPTION_SECTIONS.map((section) => {
+                      const val = description[section.key] || "";
+                      const hasContent = val.trim().length > 0;
+                      if (!editing && !hasContent) return null;
+                      return /* @__PURE__ */ jsxs12("div", { children: [
+                        /* @__PURE__ */ jsx14("label", { className: "text-[11px] font-medium text-neutral-400 uppercase tracking-wide mb-1.5 block", children: section.label }),
+                        editing ? /* @__PURE__ */ jsx14(
+                          MentionTextarea,
+                          {
+                            value: val,
+                            onChange: (v) => setDescription((prev) => ({ ...prev, [section.key]: v })),
+                            rows: 3,
+                            className: "w-full px-4 py-2.5 bg-white border border-neutral-200 rounded-lg text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-[#FF5E00]/10 focus:border-[#FF5E00]/50 resize-y transition-all placeholder:text-neutral-400",
+                            placeholder: `Add ${section.label.toLowerCase()}...`
+                          }
+                        ) : /* @__PURE__ */ jsx14("div", { className: "w-full px-3.5 py-2.5 bg-neutral-50/60 border border-neutral-100 rounded-lg text-sm leading-relaxed text-neutral-700 whitespace-pre-wrap", children: /* @__PURE__ */ jsx14(MentionText, { text: val }) })
+                      ] }, section.key);
+                    }),
+                    !editing && !hasDescription(description) && /* @__PURE__ */ jsx14("div", { className: "px-3.5 py-4 bg-neutral-50/60 border border-neutral-100 rounded-lg text-sm text-neutral-400 text-center", children: "No description provided." })
+                  ] })
+                ] }) }),
+                features.comments && /* @__PURE__ */ jsxs12("div", { className: "w-full md:w-[380px] shrink-0 border-t md:border-t-0 md:border-l border-neutral-100 flex flex-col bg-[#FAFAFA]", children: [
+                  /* @__PURE__ */ jsx14("div", { className: "px-5 h-12 flex items-center border-b border-neutral-100", children: /* @__PURE__ */ jsxs12("h3", { className: "text-[11px] font-semibold text-neutral-500 uppercase tracking-wide", children: [
+                    "Activity",
+                    detail.commentsLoaded ? ` \xB7 ${detail.comments.length + detail.activity.length}` : ""
+                  ] }) }),
+                  /* @__PURE__ */ jsxs12("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: [
+                    !detail.commentsLoaded && /* @__PURE__ */ jsx14("div", { className: "space-y-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs12("div", { className: "flex gap-2.5", children: [
+                      /* @__PURE__ */ jsx14(SkeletonPulse, { className: "w-7 h-7 rounded-full shrink-0" }),
+                      /* @__PURE__ */ jsxs12("div", { className: "flex-1 space-y-1.5", children: [
+                        /* @__PURE__ */ jsx14(SkeletonPulse, { className: "h-3 w-20" }),
+                        /* @__PURE__ */ jsx14(SkeletonPulse, { className: "h-3 w-full" })
+                      ] })
+                    ] }, i)) }),
+                    detail.commentsLoaded && detail.comments.length === 0 && detail.activity.length === 0 && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+                      /* @__PURE__ */ jsx14("div", { className: "w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx14(MessageSquareIcon, { size: 20, className: "text-neutral-400" }) }),
+                      /* @__PURE__ */ jsx14("p", { className: "text-xs text-neutral-400", children: "No activity yet" }),
+                      /* @__PURE__ */ jsx14("p", { className: "text-[10px] text-neutral-400 mt-0.5", children: "Comments and status changes will appear here" })
+                    ] }),
+                    /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
+                      timeline.map((item, i) => {
+                        if (item.kind === "comment") {
+                          const c = item.data;
+                          const isOwner = user.username === c.author_id;
+                          const isEditing = editingCommentId === c.id;
+                          return /* @__PURE__ */ jsxs12("div", { className: `group/comment flex gap-2.5 ${c.is_internal ? "pl-2 border-l-2 border-amber-300" : ""}`, children: [
+                            /* @__PURE__ */ jsx14("div", { className: `w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-0.5 ${c.is_internal ? "bg-amber-100" : "bg-neutral-200"}`, children: /* @__PURE__ */ jsx14("span", { className: `text-[10px] font-medium ${c.is_internal ? "text-amber-600" : "text-neutral-600"}`, children: getInitials(c.author_name || "?") }) }),
+                            /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
+                              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 mb-0.5", children: [
+                                /* @__PURE__ */ jsx14("span", { className: "text-[11px] font-semibold text-neutral-700", children: c.author_name }),
+                                c.is_internal && /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-0.5 px-1.5 py-px text-[9px] font-medium text-amber-600 bg-amber-50 border border-amber-200 rounded", children: [
+                                  /* @__PURE__ */ jsx14(LockIcon, { size: 8, strokeWidth: 2.5 }),
+                                  " Internal"
+                                ] }),
+                                /* @__PURE__ */ jsx14("span", { className: "text-[10px] text-neutral-400", children: formatDateTime(c.created_at) }),
+                                c.edited && /* @__PURE__ */ jsx14("span", { className: "text-[9px] text-neutral-400 italic", title: c.edited_at ? `Edited ${formatDateTime(c.edited_at)}` : "Edited", children: "(edited)" }),
+                                isOwner && /* @__PURE__ */ jsx14("div", { className: `ml-auto flex items-center gap-0.5 transition-opacity ${isEditing ? "opacity-100" : "opacity-0 group-hover/comment:opacity-100"}`, children: isEditing ? /* @__PURE__ */ jsxs12(Fragment, { children: [
+                                  /* @__PURE__ */ jsx14("button", { onClick: saveEditedComment, disabled: !editingCommentContent.trim() || editingCommentContent.trim() === c.content, className: "p-1 rounded hover:bg-green-50 text-neutral-400 hover:text-green-600 disabled:opacity-30", title: "Save edit", children: /* @__PURE__ */ jsx14(CheckIcon, { size: 12, strokeWidth: 2.5 }) }),
+                                  /* @__PURE__ */ jsx14("button", { onClick: cancelEditingComment, className: "p-1 rounded hover:bg-red-50 text-neutral-400 hover:text-red-500", title: "Cancel edit", children: /* @__PURE__ */ jsx14(XIcon, { size: 12, strokeWidth: 2.5 }) })
+                                ] }) : /* @__PURE__ */ jsxs12(Fragment, { children: [
+                                  /* @__PURE__ */ jsx14("button", { onClick: () => startEditingComment(c), className: "p-1 rounded hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600", title: "Edit comment", children: /* @__PURE__ */ jsx14(PencilIcon, { size: 11 }) }),
+                                  /* @__PURE__ */ jsx14("button", { onClick: () => setCommentToDelete(c.id), className: "p-1 rounded hover:bg-red-50 text-neutral-400 hover:text-red-500", title: "Delete comment", children: /* @__PURE__ */ jsx14(TrashIcon, { size: 11 }) })
+                                ] }) })
+                              ] }),
+                              isEditing ? /* @__PURE__ */ jsx14(
+                                MentionTextarea,
+                                {
+                                  value: editingCommentContent,
+                                  onChange: setEditingCommentContent,
+                                  onKeyDown: (e) => {
+                                    if (e.key === "Escape") cancelEditingComment();
+                                    if (e.key === "Enter" && !e.shiftKey) {
+                                      e.preventDefault();
+                                      saveEditedComment();
+                                    }
+                                  },
+                                  rows: 2,
+                                  className: "w-full px-2.5 py-1.5 bg-white border border-neutral-300 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-[#FF5E00]/20 focus:border-[#FF5E00]/50 resize-none"
+                                }
+                              ) : /* @__PURE__ */ jsx14("div", { className: "text-xs text-neutral-600 whitespace-pre-wrap leading-relaxed", children: /* @__PURE__ */ jsx14(MentionText, { text: c.content }) })
+                            ] })
+                          ] }, `c-${c.id}`);
+                        } else {
+                          const a = item.data;
+                          const fromCol = columns.find((col) => col.key === a.from_status);
+                          const toCol = columns.find((col) => col.key === a.to_status);
+                          const isCreated = a.type === "created";
+                          return /* @__PURE__ */ jsxs12("div", { className: "flex gap-2.5", children: [
+                            /* @__PURE__ */ jsx14("div", { className: "w-7 h-7 rounded-full bg-neutral-100 flex items-center justify-center shrink-0", children: isCreated ? /* @__PURE__ */ jsx14(PlusIcon, { size: 12, className: "text-neutral-400" }) : /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-neutral-400", children: [
+                              /* @__PURE__ */ jsx14("path", { d: "M5 12h14" }),
+                              /* @__PURE__ */ jsx14("path", { d: "m12 5 7 7-7 7" })
+                            ] }) }),
+                            /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
+                              isCreated ? /* @__PURE__ */ jsxs12("p", { className: "text-[11px] text-neutral-500", children: [
+                                /* @__PURE__ */ jsx14("span", { className: "font-medium text-neutral-700", children: a.user_name }),
+                                " created this task"
+                              ] }) : /* @__PURE__ */ jsxs12("p", { className: "text-[11px] text-neutral-500", children: [
+                                /* @__PURE__ */ jsx14("span", { className: "font-medium text-neutral-700", children: a.user_name }),
+                                " moved from ",
+                                /* @__PURE__ */ jsx14("span", { className: "font-medium text-neutral-700", children: fromCol?.label ?? a.from_status }),
+                                " to ",
+                                /* @__PURE__ */ jsx14("span", { className: "font-medium text-neutral-700", children: toCol?.label ?? a.to_status })
+                              ] }),
+                              /* @__PURE__ */ jsx14("span", { className: "text-[10px] text-neutral-400", children: formatDateTime(a.created_at) })
+                            ] })
+                          ] }, `a-${a.id}`);
+                        }
+                      }),
+                      /* @__PURE__ */ jsx14("div", { ref: commentsEndRef })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs12("div", { className: `px-5 py-4 pb-5 border-t bg-white transition-colors ${isInternalComment ? "border-amber-300 bg-amber-50/30" : "border-neutral-200"}`, children: [
+                    /* @__PURE__ */ jsx14(
+                      MentionTextarea,
+                      {
+                        value: newComment,
+                        onChange: setNewComment,
+                        onKeyDown: handleCommentKeyDown,
+                        rows: 2,
+                        className: `w-full px-3 py-2 border rounded-lg text-xs focus:outline-none focus:ring-2 resize-none transition-colors placeholder:text-neutral-400 ${isInternalComment ? "bg-amber-50/50 border-amber-200 focus:ring-amber-200/30 focus:border-amber-300" : "bg-neutral-50 border-neutral-200 focus:bg-white focus:ring-[#FF5E00]/10 focus:border-[#FF5E00]/50"}`,
+                        placeholder: isInternalComment ? "Write an internal note... (only visible to team)" : "Write a comment... (type @ to mention someone)"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between mt-2.5", children: [
+                      features.internalComments && user.is_internal ? /* @__PURE__ */ jsxs12(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setIsInternalComment(!isInternalComment),
+                          className: `flex items-center gap-1.5 text-[11px] font-medium rounded-md px-2 py-1 transition-colors ${isInternalComment ? "bg-amber-100 text-amber-700 border border-amber-200" : "text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100"}`,
+                          children: [
+                            /* @__PURE__ */ jsx14(LockIcon, { size: 12 }),
+                            " Internal"
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx14("div", {}),
+                      /* @__PURE__ */ jsx14(
+                        "button",
+                        {
+                          onClick: handleAddComment,
+                          disabled: detail.commentLoading || !newComment.trim(),
+                          className: `px-4 py-1.5 text-xs font-medium text-white rounded-lg transition-colors disabled:opacity-40 ${isInternalComment ? "bg-amber-500 hover:bg-amber-600" : "bg-[#FF5E00] hover:bg-[#E05200]"}`,
+                          children: detail.commentLoading ? "Sending..." : isInternalComment ? "Add Note" : "Comment"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        showDeleteConfirm && /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 z-[110] flex items-center justify-center bg-black/40 eb-tb-animate-fade-in", children: /* @__PURE__ */ jsx14("div", { className: "bg-white rounded-2xl shadow-2xl border border-neutral-200 w-full max-w-sm mx-4 eb-tb-animate-zoom-in", children: /* @__PURE__ */ jsxs12("div", { className: "p-5 space-y-4", children: [
+          /* @__PURE__ */ jsx14("h2", { className: "text-lg font-medium text-neutral-900", children: "Delete Task" }),
+          /* @__PURE__ */ jsxs12("p", { className: "text-sm text-neutral-500", children: [
+            "Are you sure you want to delete ",
+            /* @__PURE__ */ jsx14("span", { className: "font-medium text-neutral-900", children: task.title }),
+            "? This cannot be undone."
+          ] }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-3", children: [
+            /* @__PURE__ */ jsx14("button", { onClick: () => setShowDeleteConfirm(false), className: "px-4 py-2 text-sm text-neutral-600 hover:text-neutral-900 transition-colors", children: "Cancel" }),
+            /* @__PURE__ */ jsx14("button", { onClick: handleDelete, disabled: saving, className: "px-5 py-2 text-sm font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-lg transition-colors disabled:opacity-60", children: saving ? "Deleting..." : "Delete" })
+          ] })
+        ] }) }) }),
+        commentToDelete && /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 z-[110] flex items-center justify-center bg-black/40 eb-tb-animate-fade-in", children: /* @__PURE__ */ jsx14("div", { className: "bg-white rounded-2xl shadow-2xl border border-neutral-200 w-full max-w-sm mx-4 eb-tb-animate-zoom-in", children: /* @__PURE__ */ jsxs12("div", { className: "p-5 space-y-4", children: [
+          /* @__PURE__ */ jsx14("h2", { className: "text-lg font-medium text-neutral-900", children: "Delete Comment" }),
+          /* @__PURE__ */ jsx14("p", { className: "text-sm text-neutral-500", children: "Are you sure you want to delete this comment? This cannot be undone." }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-3", children: [
+            /* @__PURE__ */ jsx14("button", { onClick: () => setCommentToDelete(null), className: "px-4 py-2 text-sm text-neutral-600 hover:text-neutral-900 transition-colors", children: "Cancel" }),
+            /* @__PURE__ */ jsx14("button", { onClick: handleDeleteComment, className: "px-5 py-2 text-sm font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-lg transition-colors", children: "Delete" })
+          ] })
+        ] }) }) }),
+        showDiscardConfirm && /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 z-[110] flex items-center justify-center bg-black/40 eb-tb-animate-fade-in", children: /* @__PURE__ */ jsx14("div", { className: "bg-white rounded-2xl shadow-2xl border border-neutral-200 w-full max-w-sm mx-4 eb-tb-animate-zoom-in", children: /* @__PURE__ */ jsxs12("div", { className: "p-5 space-y-4", children: [
+          /* @__PURE__ */ jsx14("h2", { className: "text-lg font-medium text-neutral-900", children: "Unsaved Changes" }),
+          /* @__PURE__ */ jsx14("p", { className: "text-sm text-neutral-500", children: "You have unsaved changes that will be lost. Are you sure you want to discard them?" }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-3", children: [
+            /* @__PURE__ */ jsx14("button", { onClick: () => setShowDiscardConfirm(false), className: "px-4 py-2 text-sm text-neutral-600 hover:text-neutral-900 transition-colors", children: "Keep Editing" }),
+            /* @__PURE__ */ jsx14("button", { onClick: () => {
+              handleDiscardChanges();
+              onClose();
+            }, className: "px-5 py-2 text-sm font-medium text-white bg-[#FF5E00] hover:bg-[#E05200] rounded-lg transition-colors", children: "Discard" })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/TaskBoard.tsx
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function TaskBoard({
+  className = "",
+  headerActions,
+  onTaskOpen,
+  onShareFeedback,
+  renderTaskDetail,
+  renderCreateTask
+}) {
+  const { columns, features, service } = useTaskBoardContext();
+  const board = useTaskBoard();
+  const actions = useTaskActions(board.tasks, board.setTasks, board.fetchTasks);
+  const { copiedTaskId, copyShareLink } = useShareLink();
+  const [selectedTask, setSelectedTask] = useState9(null);
+  const [createForStatus, setCreateForStatus] = useState9("");
+  const [filterTags, setFilterTags] = useState9([]);
+  const [sharedTaskHandled, setSharedTaskHandled] = useState9(false);
+  useEffect8(() => {
+    if (sharedTaskHandled || !board.selectedProject || board.boardLoading) return;
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const taskId = params.get("task");
+    if (!taskId) return;
+    setSharedTaskHandled(true);
+    let cancelled = false;
+    (async () => {
+      try {
+        const task = await service.getTask(taskId);
+        if (cancelled) return;
+        setSelectedTask(task);
+        service.markTaskRead(taskId).catch(() => {
+        });
+        const url = new URL(window.location.href);
+        url.searchParams.delete("task");
+        window.history.replaceState({}, "", url.toString());
+      } catch {
+        if (!cancelled) board.setError("Could not open shared task.");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [board.selectedProject, board.boardLoading, sharedTaskHandled, service]);
+  useEffect8(() => {
+    if (typeof window === "undefined") return;
+    if (board.selectedProject && board.projects.length > 1) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("project", board.selectedProject);
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, [board.selectedProject, board.projects]);
+  const handleDragEnd = useCallback7((result) => {
+    const { draggableId, source, destination } = result;
+    if (!destination) return;
+    if (source.droppableId === destination.droppableId && source.index === destination.index) return;
+    actions.moveTask(
+      draggableId,
+      source.droppableId,
+      destination.droppableId,
+      source.index,
+      destination.index
+    );
+  }, [actions]);
+  const handleTaskClick = (task) => {
+    setSelectedTask(task);
+    onTaskOpen?.(task);
+    actions.markTaskRead(task.id);
+    if (task.has_unread) {
+      board.setTasks((prev) => {
+        const updated = { ...prev };
+        const col = updated[task.status];
+        if (col) {
+          updated[task.status] = col.map(
+            (t) => t.id === task.id ? { ...t, has_unread: false } : t
+          );
+        }
+        return updated;
+      });
+      board.setColumnUnreads((prev) => ({
+        ...prev,
+        [task.status]: Math.max(0, (prev[task.status] || 0) - 1)
+      }));
+    }
+  };
+  const handleOpenTaskFromNotification = async (taskId, projectSlug) => {
+    if (board.selectedProject !== projectSlug) {
+      board.setSelectedProject(projectSlug);
+    }
+    try {
+      const task = await service.getTask(taskId);
+      setSelectedTask(task);
+      service.markTaskRead(taskId).catch(() => {
+      });
+    } catch {
+      board.setError("Could not open task.");
+    }
+  };
+  const predefinedValues = PREDEFINED_TAGS.map((p) => p.value);
+  const handleCreateClose = () => setCreateForStatus("");
+  const handleCreateDone = () => {
+    board.fetchTasks();
+    board.showSuccess("Task created");
+  };
+  const handleDetailClose = () => setSelectedTask(null);
+  return /* @__PURE__ */ jsxs13("div", { className: `flex flex-col h-full ${className}`, children: [
+    /* @__PURE__ */ jsxs13("div", { className: "mb-4 sm:mb-6 shrink-0", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-1 sm:mb-2", children: [
+        /* @__PURE__ */ jsx15("h1", { className: "text-2xl sm:text-3xl font-medium text-neutral-900 tracking-tight", children: "Task Board" }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+          onShareFeedback && /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              onClick: onShareFeedback,
+              className: "flex items-center gap-1.5 text-xs font-medium text-neutral-600 hover:text-neutral-900 px-3 py-2 sm:py-2.5 rounded-lg border border-neutral-200 hover:border-neutral-300 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx15(FeedbackIcon, { size: 16 }),
+                /* @__PURE__ */ jsx15("span", { className: "hidden sm:inline", children: "Share Feedback" })
+              ]
+            }
+          ),
+          headerActions,
+          features.notifications && /* @__PURE__ */ jsx15(NotificationBell, { onOpenTask: handleOpenTaskFromNotification }),
+          board.projects.length > 0 && /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              onClick: () => setCreateForStatus("backlog"),
+              className: "flex items-center gap-1.5 sm:gap-2 text-xs font-semibold text-white bg-[#FF5E00] hover:bg-[#E05200] px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg transition-colors shadow-sm",
+              children: [
+                /* @__PURE__ */ jsx15(PlusIcon, { size: 16 }),
+                /* @__PURE__ */ jsx15("span", { className: "hidden sm:inline", children: "New Task" }),
+                /* @__PURE__ */ jsx15("span", { className: "sm:hidden", children: "New" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx15("p", { className: "text-neutral-500 font-light text-sm sm:text-lg", children: "Track and manage work across projects." })
+    ] }),
+    board.successMessage && /* @__PURE__ */ jsx15("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm", children: board.successMessage }),
+    board.error && /* @__PURE__ */ jsxs13("div", { className: "mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm flex items-center justify-between", children: [
+      board.error,
+      /* @__PURE__ */ jsx15("button", { onClick: () => board.setError(""), className: "text-red-400 hover:text-red-600", children: /* @__PURE__ */ jsx15(XIcon, { size: 16 }) })
+    ] }),
+    board.projects.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs13("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx15("h2", { className: "text-xl font-medium text-neutral-900 mb-2", children: "No Projects Available" }),
+      /* @__PURE__ */ jsx15("p", { className: "text-neutral-500", children: "You don't have access to any projects yet." })
+    ] }) }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      /* @__PURE__ */ jsx15(
+        FilterBar,
+        {
+          projects: board.projects,
+          selectedProject: board.selectedProject,
+          onSelectProject: board.setSelectedProject,
+          filterTags,
+          onSetFilterTags: setFilterTags
+        }
+      ),
+      board.boardLoading ? /* @__PURE__ */ jsx15(BoardSkeleton, {}) : /* @__PURE__ */ jsx15("div", { className: "flex-1 min-h-0 eb-tb-board-scroll overflow-x-auto overflow-y-hidden pb-4", children: /* @__PURE__ */ jsx15(DragDropContext, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx15("div", { className: "flex gap-4 min-w-max h-full", children: columns.map((col) => {
+        const allColumnTasks = board.tasks[col.key] || [];
+        const columnTasks = filterTags.length > 0 ? allColumnTasks.filter((t) => {
+          const taskTags = t.tags || [];
+          return filterTags.some((f) => {
+            if (f === "__other__") return taskTags.some((tag) => !predefinedValues.includes(tag));
+            return taskTags.includes(f);
+          });
+        }) : allColumnTasks;
+        return /* @__PURE__ */ jsx15(
+          KanbanColumn,
+          {
+            column: col,
+            tasks: columnTasks,
+            totalCount: board.columnTotals[col.key] || 0,
+            unreadCount: board.columnUnreads[col.key] || 0,
+            loadingMore: board.loadingMore[col.key] || false,
+            onAddTask: () => setCreateForStatus(col.key),
+            onTaskClick: handleTaskClick,
+            onTaskShare: (taskId, e) => copyShareLink(taskId, board.selectedProject),
+            copiedTaskId,
+            onLoadMore: () => board.loadMoreTasks(col.key)
+          },
+          col.key
+        );
+      }) }) }) })
+    ] }),
+    createForStatus && (renderCreateTask ? renderCreateTask({
+      projectSlug: board.selectedProject,
+      defaultStatus: createForStatus,
+      onClose: handleCreateClose,
+      onCreate: handleCreateDone
+    }) : /* @__PURE__ */ jsx15(
+      CreateTaskModal,
+      {
+        projectSlug: board.selectedProject,
+        defaultStatus: createForStatus,
+        onClose: handleCreateClose,
+        onCreate: handleCreateDone
+      }
+    )),
+    selectedTask && (renderTaskDetail ? renderTaskDetail({
+      task: selectedTask,
+      onClose: handleDetailClose,
+      onUpdate: board.fetchTasks
+    }) : /* @__PURE__ */ jsx15(
+      TaskDetailPanel,
+      {
+        task: selectedTask,
+        projectSlug: board.selectedProject,
+        onClose: handleDetailClose,
+        onUpdate: board.fetchTasks
+      }
+    ))
+  ] });
+}
+export {
+  BellIcon,
+  BoardSkeleton,
+  CheckIcon,
+  ChevronDownIcon,
+  CreateTaskModal,
+  DEFAULT_COLUMNS,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PRIORITIES,
+  DESCRIPTION_SECTIONS,
+  EMPTY_DESCRIPTION,
+  FeedbackIcon,
+  FilterBar,
+  FilterIcon,
+  KanbanColumn,
+  KanbanIcon,
+  LinkIcon,
+  LockIcon,
+  MentionText,
+  MentionTextarea,
+  MessageSquareIcon,
+  NotificationBell,
+  POSITION_GAP,
+  PREDEFINED_TAGS,
+  PencilIcon,
+  PlusIcon,
+  PriorityBadge,
+  SkeletonCard,
+  SkeletonPulse,
+  TagBadge,
+  TaskBoard,
+  TaskBoardProvider,
+  TaskCard,
+  TaskDetailPanel,
+  TrashIcon,
+  UserAvatar,
+  XIcon,
+  createTaskBoardService,
+  formatDate,
+  formatDateTime,
+  getDescriptionPreview,
+  getInitials,
+  getPriorityStyle,
+  getTagStyle,
+  getUserProjects,
+  hasDescription,
+  toDisplayText,
+  toStoredText,
+  useShareLink,
+  useTaskActions,
+  useTaskBoard,
+  useTaskBoardContext,
+  useTaskDetail
+};
+//# sourceMappingURL=index.mjs.map