@industry-theme/backlogmd-kanban-panel 1.0.8 → 1.0.10

package/dist/panels/KanbanPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanPanel.d.ts","sourceRoot":"","sources":["../../src/panels/KanbanPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AA2MpD;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAMrD,CAAC"}
+{"version":3,"file":"KanbanPanel.d.ts","sourceRoot":"","sources":["../../src/panels/KanbanPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAyWpD;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAMrD,CAAC"}

package/dist/panels/kanban/components/KanbanColumn.d.ts

@@ -12,6 +12,8 @@ interface KanbanColumnProps {
     /** Callback to load more tasks */
     onLoadMore?: () => void;
     onTaskClick?: (task: Task) => void;
+    /** Whether column should take full width (for narrow/mobile views) */
+    fullWidth?: boolean;
 }
 export declare const KanbanColumn: React.FC<KanbanColumnProps>;
 export {};

package/dist/panels/kanban/components/KanbanColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanColumn.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/components/KanbanColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8QpD,CAAC"}
+{"version":3,"file":"KanbanColumn.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/components/KanbanColumn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsRpD,CAAC"}

package/dist/panels/kanban/hooks/useKanbanData.d.ts

@@ -9,8 +9,24 @@ export interface ColumnState {
 }
 /** Source column names (directory-based) */
 export type SourceColumn = 'tasks' | 'completed';
-/** Display labels for source columns */
+/** Status column names (for 3-column view) */
+export type StatusColumn = 'todo' | 'in-progress' | 'completed';
+/** Display labels for status columns */
+export declare const STATUS_DISPLAY_LABELS: Record<StatusColumn, string>;
+/** Display labels for source columns (legacy) */
 export declare const SOURCE_DISPLAY_LABELS: Record<SourceColumn, string>;
+/** Status-based column state (computed from source data) */
+export interface StatusColumnState {
+    tasks: Task[];
+    count: number;
+}
+/** Active tasks pagination state */
+export interface ActiveTasksState {
+    total: number;
+    loaded: number;
+    hasMore: boolean;
+    isLoadingMore: boolean;
+}
 export interface UseKanbanDataResult {
     tasks: Task[];
     /** Source columns: "tasks" and "completed" */
@@ -25,6 +41,14 @@ export interface UseKanbanDataResult {
     loadMore: (source: SourceColumn) => Promise<void>;
     refreshData: () => Promise<void>;
     updateTaskStatus: (taskId: string, newStatus: string) => Promise<void>;
+    /** Status columns for 3-column view */
+    statusColumns: StatusColumn[];
+    /** Tasks grouped by status (To Do, In Progress, Completed) */
+    tasksByStatus: Map<StatusColumn, StatusColumnState>;
+    /** Active tasks (To Do + In Progress) pagination state */
+    activeTasksState: ActiveTasksState;
+    /** Load more active tasks */
+    loadMoreActive: () => Promise<void>;
 }
 interface UseKanbanDataOptions {
     context?: PanelContextValue;

package/dist/panels/kanban/hooks/useKanbanData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKanbanData.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/hooks/useKanbanData.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,IAAI,EAAwB,MAAM,kBAAkB,CAAC;AAEzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEtE,kCAAkC;AAClC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,4CAA4C;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,wCAAwC;AACxC,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG9D,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,8CAA8C;IAC9C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACnC,kCAAkC;IAClC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACvC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxE;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CAwVrB"}
+{"version":3,"file":"useKanbanData.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/hooks/useKanbanData.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,IAAI,EAAwB,MAAM,kBAAkB,CAAC;AAEzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEtE,kCAAkC;AAClC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,4CAA4C;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,8CAA8C;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,CAAC;AAEhE,wCAAwC;AACxC,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI9D,CAAC;AASF,iDAAiD;AACjD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG9D,CAAC;AAEF,4DAA4D;AAC5D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,8CAA8C;IAC9C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IACnC,kCAAkC;IAClC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACvC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,uCAAuC;IACvC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,8DAA8D;IAC9D,aAAa,EAAE,GAAG,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;IACpD,0DAA0D;IAC1D,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,6BAA6B;IAC7B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CAmYrB"}

package/dist/panels.bundle.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React2 from "react";
-import React2__default, { forwardRef, createElement, createContext, useState, useEffect, useContext, useRef, useCallback, useImperativeHandle, useMemo, useLayoutEffect } from "react";
+import React2__default, { forwardRef, createElement, createContext, useState, useEffect, useContext, useRef, useCallback, useLayoutEffect, useImperativeHandle, useMemo } from "react";
 import { createPortal } from "react-dom";
 /**
  * @license lucide-react v0.552.0 - ISC
@@ -1507,9 +1507,10 @@ class PanelFileSystemAdapter {
     return path2.replace(/^\/+/, "").replace(/\/+$/, "").replace(/\/+/g, "/");
   }
 }
-const SOURCE_DISPLAY_LABELS = {
-  tasks: "Active",
-  completed: "Completed"
+const STATUS_DISPLAY_LABELS = {
+  "todo": "To Do",
+  "in-progress": "In Progress",
+  "completed": "Completed"
 };
 const DEFAULT_SOURCES = ["tasks", "completed"];
 const DEFAULT_TASKS_LIMIT = 20;
@@ -1768,6 +1769,30 @@ function useKanbanData(options) {
     },
     []
   );
+  const statusColumns = ["todo", "in-progress", "completed"];
+  const tasksByStatus = (() => {
+    const result = /* @__PURE__ */ new Map();
+    const activeTasks = tasksBySource.get("tasks") || [];
+    const completedTasks = tasksBySource.get("completed") || [];
+    const todoTasks = activeTasks.filter((t) => t.status === "To Do");
+    const inProgressTasks = activeTasks.filter((t) => t.status === "In Progress");
+    result.set("todo", { tasks: todoTasks, count: todoTasks.length });
+    result.set("in-progress", { tasks: inProgressTasks, count: inProgressTasks.length });
+    result.set("completed", { tasks: completedTasks, count: completedTasks.length });
+    return result;
+  })();
+  const activeTasksState = (() => {
+    const activeColumnState = columnStates.get("tasks");
+    return {
+      total: (activeColumnState == null ? void 0 : activeColumnState.total) || 0,
+      loaded: (activeColumnState == null ? void 0 : activeColumnState.tasks.length) || 0,
+      hasMore: (activeColumnState == null ? void 0 : activeColumnState.hasMore) || false,
+      isLoadingMore: (activeColumnState == null ? void 0 : activeColumnState.isLoadingMore) || false
+    };
+  })();
+  const loadMoreActive = useCallback(async () => {
+    await loadMore("tasks");
+  }, [loadMore]);
   return {
     tasks,
     sources,
@@ -1778,7 +1803,12 @@ function useKanbanData(options) {
     columnStates,
     loadMore,
     refreshData,
-    updateTaskStatus
+    updateTaskStatus,
+    // New 3-column view exports
+    statusColumns,
+    tasksByStatus,
+    activeTasksState,
+    loadMoreActive
   };
 }
 const KanbanColumn = ({
@@ -1788,7 +1818,8 @@ const KanbanColumn = ({
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
-  onTaskClick
+  onTaskClick,
+  fullWidth = false
 }) => {
   const { theme: theme2 } = useTheme();
   const getPriorityColor = (priority) => {
@@ -1810,8 +1841,8 @@ const KanbanColumn = ({
       style: {
         flex: "1 1 0",
         // Grow to fill available width equally
-        minWidth: "280px",
-        maxWidth: "500px",
+        minWidth: fullWidth ? void 0 : "280px",
+        maxWidth: fullWidth ? void 0 : "500px",
         // Cap max width for readability
         height: "100%",
         // Fill parent height
@@ -1875,7 +1906,11 @@ const KanbanColumn = ({
               flexDirection: "column",
               gap: "8px",
               overflowY: "auto",
-              WebkitOverflowScrolling: "touch"
+              overflowX: "hidden",
+              WebkitOverflowScrolling: "touch",
+              // Add padding for scroll content, use margin trick to prevent clipping
+              paddingRight: "4px",
+              marginRight: "-4px"
             },
             children: [
               tasks.map((task) => /* @__PURE__ */ jsxs(
@@ -2054,7 +2089,8 @@ const KanbanColumn = ({
                     "Loading..."
                   ] }) : `Load more (${remaining} remaining)`
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, height: "4px" } })
             ]
           }
         ),
@@ -2324,7 +2360,31 @@ const KanbanPanelContent = ({
   var _a, _b;
   const { theme: theme2 } = useTheme();
   const [_selectedTask, setSelectedTask] = useState(null);
-  const { sources, tasksBySource, columnStates, loadMore, error, isBacklogProject, refreshData } = useKanbanData({
+  const [selectedTab, setSelectedTab] = useState("todo");
+  const [isNarrowView, setIsNarrowView] = useState(false);
+  const containerRef = useRef(null);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsNarrowView(entry.contentRect.width < 768);
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  const {
+    statusColumns,
+    tasksByStatus,
+    columnStates,
+    loadMore,
+    activeTasksState,
+    loadMoreActive,
+    error,
+    isBacklogProject,
+    refreshData
+  } = useKanbanData({
     context,
     actions,
     tasksLimit: 20,
@@ -2404,6 +2464,7 @@ const KanbanPanelContent = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       style: {
         padding: "clamp(12px, 3vw, 20px)",
         // Responsive padding for mobile
@@ -2428,22 +2489,72 @@ const KanbanPanelContent = ({
               // Don't shrink header
               display: "flex",
               alignItems: "center",
+              justifyContent: "space-between",
               gap: "12px",
               flexWrap: "wrap"
             },
             children: [
-              /* @__PURE__ */ jsx(Kanban, { size: 24, color: theme2.colors.primary }),
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: theme2.fontSizes[4],
-                    color: theme2.colors.text
-                  },
-                  children: "Kanban Board"
-                }
-              )
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx(Kanban, { size: 24, color: theme2.colors.primary }),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: theme2.fontSizes[4],
+                      color: theme2.colors.text
+                    },
+                    children: "Kanban Board"
+                  }
+                )
+              ] }),
+              isBacklogProject && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: statusColumns.map((status) => {
+                  const statusState = tasksByStatus.get(status);
+                  const count = (statusState == null ? void 0 : statusState.count) || 0;
+                  const completedState = columnStates.get("completed");
+                  const displayCount = status === "completed" && completedState ? `${count}/${completedState.total}` : count;
+                  return /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: theme2.fontSizes[1],
+                        color: theme2.colors.textSecondary,
+                        background: theme2.colors.backgroundSecondary,
+                        padding: "4px 10px",
+                        borderRadius: theme2.radii[1],
+                        fontWeight: theme2.fontWeights.medium
+                      },
+                      children: [
+                        STATUS_DISPLAY_LABELS[status],
+                        ": ",
+                        displayCount
+                      ]
+                    },
+                    status
+                  );
+                }) }),
+                activeTasksState.hasMore && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: loadMoreActive,
+                    disabled: activeTasksState.isLoadingMore,
+                    style: {
+                      background: theme2.colors.primary,
+                      color: theme2.colors.background,
+                      border: "none",
+                      borderRadius: theme2.radii[2],
+                      padding: "6px 12px",
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: theme2.fontWeights.medium,
+                      cursor: activeTasksState.isLoadingMore ? "wait" : "pointer",
+                      opacity: activeTasksState.isLoadingMore ? 0.7 : 1,
+                      transition: "opacity 0.2s ease"
+                    },
+                    children: activeTasksState.isLoadingMore ? "Loading..." : `Load more active (${activeTasksState.total - activeTasksState.loaded} remaining)`
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -2475,42 +2586,103 @@ const KanbanPanelContent = ({
             canInitialize,
             onInitialize: handleInitialize
           }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              display: "flex",
-              gap: "16px",
-              justifyContent: "center",
-              // Center columns when they hit max-width
-              overflowX: "auto",
-              overflowY: "hidden",
-              paddingBottom: "8px",
-              minHeight: 0,
-              // Allow flex child to shrink below content size
-              WebkitOverflowScrolling: "touch"
-              // Smooth scrolling on iOS
-            },
-            children: sources.map((source2) => {
-              const columnTasks = tasksBySource.get(source2) || [];
-              const columnState = columnStates.get(source2);
-              return /* @__PURE__ */ jsx(
-                KanbanColumn,
-                {
-                  status: SOURCE_DISPLAY_LABELS[source2],
-                  tasks: columnTasks,
-                  total: columnState == null ? void 0 : columnState.total,
-                  hasMore: columnState == null ? void 0 : columnState.hasMore,
-                  isLoadingMore: columnState == null ? void 0 : columnState.isLoadingMore,
-                  onLoadMore: () => loadMore(source2),
-                  onTaskClick: handleTaskClick
-                },
-                source2
-              );
-            })
-          }
-        )
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isNarrowView && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flexShrink: 0,
+                display: "flex",
+                gap: "4px",
+                background: theme2.colors.backgroundSecondary,
+                borderRadius: theme2.radii[2],
+                padding: "4px"
+              },
+              children: statusColumns.map((status) => {
+                const isSelected = status === selectedTab;
+                const statusState = tasksByStatus.get(status);
+                const count = (statusState == null ? void 0 : statusState.count) || 0;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setSelectedTab(status),
+                    style: {
+                      flex: 1,
+                      padding: "10px 12px",
+                      border: "none",
+                      borderRadius: theme2.radii[1],
+                      background: isSelected ? theme2.colors.primary : "transparent",
+                      color: isSelected ? theme2.colors.background : theme2.colors.textSecondary,
+                      fontSize: theme2.fontSizes[1],
+                      fontWeight: theme2.fontWeights.medium,
+                      cursor: "pointer",
+                      transition: "all 0.2s ease",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "6px"
+                    },
+                    children: [
+                      STATUS_DISPLAY_LABELS[status],
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            background: isSelected ? "rgba(255,255,255,0.2)" : theme2.colors.background,
+                            padding: "2px 6px",
+                            borderRadius: theme2.radii[1],
+                            fontSize: theme2.fontSizes[0]
+                          },
+                          children: count
+                        }
+                      )
+                    ]
+                  },
+                  status
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: 1,
+                display: "flex",
+                gap: "16px",
+                justifyContent: "center",
+                // Center columns when they hit max-width
+                overflowX: isNarrowView ? "hidden" : "auto",
+                overflowY: "hidden",
+                paddingBottom: "8px",
+                minHeight: 0,
+                // Allow flex child to shrink below content size
+                WebkitOverflowScrolling: "touch"
+                // Smooth scrolling on iOS
+              },
+              children: statusColumns.filter((status) => !isNarrowView || status === selectedTab).map((status) => {
+                const statusState = tasksByStatus.get(status);
+                const columnTasks = (statusState == null ? void 0 : statusState.tasks) || [];
+                const isCompleted = status === "completed";
+                const completedState = columnStates.get("completed");
+                return /* @__PURE__ */ jsx(
+                  KanbanColumn,
+                  {
+                    status: STATUS_DISPLAY_LABELS[status],
+                    tasks: columnTasks,
+                    total: isCompleted ? completedState == null ? void 0 : completedState.total : void 0,
+                    hasMore: isCompleted ? completedState == null ? void 0 : completedState.hasMore : false,
+                    isLoadingMore: isCompleted ? completedState == null ? void 0 : completedState.isLoadingMore : false,
+                    onLoadMore: isCompleted ? () => loadMore("completed") : void 0,
+                    onTaskClick: handleTaskClick,
+                    fullWidth: isNarrowView
+                  },
+                  status
+                );
+              })
+            }
+          )
+        ] })
       ]
     }
   );