@industry-theme/backlogmd-kanban-panel 1.0.4 → 1.0.6

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;AA4LpD;;;;;;;;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,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmMpD;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAMrD,CAAC"}

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,CAyQpD,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;CACpC;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8QpD,CAAC"}

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

@@ -29,14 +29,17 @@ export interface UseKanbanDataResult {
 interface UseKanbanDataOptions {
     context?: PanelContextValue;
     actions?: PanelActions;
-    /** Number of tasks to load per column (default: 10) */
-    pageSize?: number;
+    /** Number of active tasks to load (default: 20) */
+    tasksLimit?: number;
+    /** Number of completed tasks to load (default: 5) */
+    completedLimit?: number;
 }
 /**
  * Hook for managing kanban board data with lazy loading
  *
  * Uses 2-column view (Active/Completed) based on directory structure.
  * Only loads task content for displayed items (no file reads on init).
+ * Completed tasks are sorted by ID descending (most recent first).
  */
 export declare function useKanbanData(options?: UseKanbanDataOptions): UseKanbanDataResult;
 export {};

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,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CA4TrB"}
+{"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,CAoUrB"}

package/dist/panels/kanban/mocks/mockData.d.ts

@@ -7,6 +7,7 @@
 import type { Task } from '@backlog-md/core';
 /**
  * Generate mock tasks for testing the kanban board
+ * Creates 25 active tasks and 10 completed tasks to test pagination
  */
 export declare function generateMockTasks(): Task[];
 /**

package/dist/panels/kanban/mocks/mockData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/mocks/mockData.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,EAAE,CAuJ1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;GAEG;AACH,wBAAgB,kBAAkB;;;;;;;;;;;;EAcjC"}
+{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../../src/panels/kanban/mocks/mockData.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAsE7C;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,EAAE,CAqD1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;GAEG;AACH,wBAAgB,kBAAkB;;;;;;;;;;;;EAcjC"}

package/dist/panels.bundle.js

@@ -944,46 +944,38 @@ class Core {
    * Groups by directory (tasks/ or completed/) instead of status.
    * Only loads task content for items in the requested page.
    *
-   * @param pagination - Pagination options (applied per source)
+   * @param options - Per-source pagination options
    * @returns Paginated tasks grouped by source
    */
-  async getTasksBySourcePaginated(pagination) {
+  async getTasksBySourcePaginated(options) {
     if (!this.lazyInitialized) {
       throw new Error("Core not lazy initialized. Call initializeLazy() first.");
     }
-    const limit = (pagination == null ? void 0 : pagination.limit) ?? 10;
-    const offset = (pagination == null ? void 0 : pagination.offset) ?? 0;
-    const sortBy = (pagination == null ? void 0 : pagination.sortBy) ?? "title";
-    const sortDirection = (pagination == null ? void 0 : pagination.sortDirection) ?? "asc";
+    const tasksLimit = (options == null ? void 0 : options.tasksLimit) ?? 10;
+    const completedLimit = (options == null ? void 0 : options.completedLimit) ?? 10;
+    const offset = (options == null ? void 0 : options.offset) ?? 0;
+    (options == null ? void 0 : options.tasksSortDirection) ?? "asc";
+    const completedSortByIdDesc = (options == null ? void 0 : options.completedSortByIdDesc) ?? true;
     const sources = ["tasks", "completed"];
     const bySource = /* @__PURE__ */ new Map();
     for (const source of sources) {
       let entries = Array.from(this.taskIndex.values()).filter((e) => e.source === source);
+      const limit = source === "tasks" ? tasksLimit : completedLimit;
       entries = entries.sort((a, b) => {
-        const cmp = a.title.localeCompare(b.title);
-        return sortDirection === "asc" ? cmp : -cmp;
+        const aNum = parseInt(a.id.replace(/\D/g, ""), 10) || 0;
+        const bNum = parseInt(b.id.replace(/\D/g, ""), 10) || 0;
+        return source === "completed" && completedSortByIdDesc ? bNum - aNum : aNum - bNum;
       });
       const total = entries.length;
       const pageEntries = entries.slice(offset, offset + limit);
       const items = await this.loadTasks(pageEntries.map((e) => e.id));
-      if (sortBy !== "title" && items.length > 0) {
-        const sorted = sortTasksBy(items, sortBy, sortDirection);
-        bySource.set(source, {
-          items: sorted,
-          total,
-          hasMore: offset + limit < total,
-          offset,
-          limit
-        });
-      } else {
-        bySource.set(source, {
-          items,
-          total,
-          hasMore: offset + limit < total,
-          offset,
-          limit
-        });
-      }
+      bySource.set(source, {
+        items,
+        total,
+        hasMore: offset + limit < total,
+        offset,
+        limit
+      });
     }
     return {
       bySource,
@@ -995,19 +987,21 @@ class Core {
    *
    * @param source - Source to load more from ("tasks" or "completed")
    * @param currentOffset - Current offset (items already loaded)
-   * @param pagination - Pagination options
+   * @param options - Pagination options
    * @returns Paginated result for the source
    */
-  async loadMoreForSource(source, currentOffset, pagination) {
+  async loadMoreForSource(source, currentOffset, options) {
     if (!this.lazyInitialized) {
       throw new Error("Core not lazy initialized. Call initializeLazy() first.");
     }
-    const limit = (pagination == null ? void 0 : pagination.limit) ?? 10;
-    const sortDirection = (pagination == null ? void 0 : pagination.sortDirection) ?? "asc";
+    const limit = (options == null ? void 0 : options.limit) ?? 10;
+    (options == null ? void 0 : options.sortDirection) ?? "asc";
+    const completedSortByIdDesc = (options == null ? void 0 : options.completedSortByIdDesc) ?? true;
     let entries = Array.from(this.taskIndex.values()).filter((e) => e.source === source);
     entries = entries.sort((a, b) => {
-      const cmp = a.title.localeCompare(b.title);
-      return sortDirection === "asc" ? cmp : -cmp;
+      const aNum = parseInt(a.id.replace(/\D/g, ""), 10) || 0;
+      const bNum = parseInt(b.id.replace(/\D/g, ""), 10) || 0;
+      return source === "completed" && completedSortByIdDesc ? bNum - aNum : aNum - bNum;
     });
     const total = entries.length;
     const pageEntries = entries.slice(currentOffset, currentOffset + limit);
@@ -1352,9 +1346,15 @@ const SOURCE_DISPLAY_LABELS = {
   completed: "Completed"
 };
 const DEFAULT_SOURCES = ["tasks", "completed"];
-const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_TASKS_LIMIT = 20;
+const DEFAULT_COMPLETED_LIMIT = 5;
 function useKanbanData(options) {
-  const { context, actions, pageSize = DEFAULT_PAGE_SIZE } = options || {};
+  const {
+    context,
+    actions,
+    tasksLimit = DEFAULT_TASKS_LIMIT,
+    completedLimit = DEFAULT_COMPLETED_LIMIT
+  } = options || {};
   const [tasks, setTasks] = useState([]);
   const [sources] = useState(DEFAULT_SOURCES);
   const [isLoading, setIsLoading] = useState(true);
@@ -1453,10 +1453,11 @@ function useKanbanData(options) {
       await core.initializeLazy(filePaths);
       coreRef.current = core;
       const paginatedResult = await core.getTasksBySourcePaginated({
-        limit: pageSize,
+        tasksLimit,
+        completedLimit,
         offset: 0,
-        sortBy: "title",
-        sortDirection: "asc"
+        tasksSortDirection: "asc",
+        completedSortByIdDesc: true
       });
       const newTasksBySource = /* @__PURE__ */ new Map();
       const newColumnStates = /* @__PURE__ */ new Map();
@@ -1487,7 +1488,7 @@ function useKanbanData(options) {
         0
       );
       console.log(
-        `[useKanbanData] Loaded ${allTasks.length}/${totalTasks} tasks (page size: ${pageSize})`
+        `[useKanbanData] Loaded ${allTasks.length}/${totalTasks} tasks (active: ${tasksLimit}, completed: ${completedLimit})`
       );
       setTasks(allTasks);
       setTasksBySource(newTasksBySource);
@@ -1503,7 +1504,7 @@ function useKanbanData(options) {
     } finally {
       setIsLoading(false);
     }
-  }, [context, actions, fetchFileContent, pageSize]);
+  }, [context, actions, fetchFileContent, tasksLimit, completedLimit]);
   useEffect(() => {
     loadBacklogData();
   }, [loadBacklogData]);
@@ -1528,13 +1529,14 @@ function useKanbanData(options) {
       });
       try {
         const currentOffset = currentState.tasks.length;
+        const limit = source === "tasks" ? tasksLimit : completedLimit;
         const result = await core.loadMoreForSource(
           source,
           currentOffset,
           {
-            limit: pageSize,
-            sortBy: "title",
-            sortDirection: "asc"
+            limit,
+            sortDirection: "asc",
+            completedSortByIdDesc: source === "completed"
           }
         );
         console.log(
@@ -1574,7 +1576,7 @@ function useKanbanData(options) {
         });
       }
     },
-    [columnStates, pageSize]
+    [columnStates, tasksLimit, completedLimit]
   );
   const refreshData = useCallback(async () => {
     await loadBacklogData();
@@ -1629,9 +1631,15 @@ const KanbanColumn = ({
     "div",
     {
       style: {
-        flex: "1",
-        minWidth: "min(280px, 85vw)",
-        // Responsive width for mobile
+        flex: "1 1 0",
+        // Grow to fill available width equally
+        minWidth: "280px",
+        maxWidth: "500px",
+        // Cap max width for readability
+        height: "100%",
+        // Fill parent height
+        minHeight: 0,
+        // Allow shrinking
         display: "flex",
         flexDirection: "column",
         gap: "12px",
@@ -1684,6 +1692,8 @@ const KanbanColumn = ({
           {
             style: {
               flex: 1,
+              minHeight: 0,
+              // Critical: allows flex child to shrink and scroll
               display: "flex",
               flexDirection: "column",
               gap: "8px",
@@ -1696,6 +1706,8 @@ const KanbanColumn = ({
                 {
                   onClick: () => onTaskClick == null ? void 0 : onTaskClick(task),
                   style: {
+                    flexShrink: 0,
+                    // Prevent card from shrinking
                     background: theme2.colors.surface,
                     borderRadius: theme2.radii[2],
                     padding: "12px",
@@ -2137,7 +2149,8 @@ const KanbanPanelContent = ({
   const { sources, tasksBySource, columnStates, loadMore, error, isBacklogProject, refreshData } = useKanbanData({
     context,
     actions,
-    pageSize: 3
+    tasksLimit: 20,
+    completedLimit: 5
   });
   const handleTaskClick = (task) => {
     setSelectedTask(task);
@@ -2210,9 +2223,13 @@ const KanbanPanelContent = ({
         // Responsive padding for mobile
         fontFamily: theme2.fonts.body,
         height: "100%",
+        boxSizing: "border-box",
+        // Include padding in height calculation
         display: "flex",
         flexDirection: "column",
         gap: "16px",
+        overflow: "hidden",
+        // Prevent outer scrolling
         backgroundColor: theme2.colors.background,
         color: theme2.colors.text
       },
@@ -2221,6 +2238,8 @@ const KanbanPanelContent = ({
           "div",
           {
             style: {
+              flexShrink: 0,
+              // Don't shrink header
               display: "flex",
               alignItems: "center",
               gap: "12px",
@@ -2246,6 +2265,8 @@ const KanbanPanelContent = ({
           "div",
           {
             style: {
+              flexShrink: 0,
+              // Don't shrink error message
               padding: "12px",
               background: `${theme2.colors.error}20`,
               border: `1px solid ${theme2.colors.error}`,
@@ -2275,9 +2296,13 @@ const KanbanPanelContent = ({
               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
             },