@industry-theme/backlogmd-kanban-panel 1.0.9 → 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;AAwRpD;;;;;;;;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.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
@@ -1818,7 +1818,8 @@ const KanbanColumn = ({
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
-  onTaskClick
+  onTaskClick,
+  fullWidth = false
 }) => {
   const { theme: theme2 } = useTheme();
   const getPriorityColor = (priority) => {
@@ -1840,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
@@ -1905,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(
@@ -2084,7 +2089,8 @@ const KanbanColumn = ({
                     "Loading..."
                   ] }) : `Load more (${remaining} remaining)`
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, height: "4px" } })
             ]
           }
         ),
@@ -2354,6 +2360,20 @@ const KanbanPanelContent = ({
   var _a, _b;
   const { theme: theme2 } = useTheme();
   const [_selectedTask, setSelectedTask] = useState(null);
+  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,
@@ -2444,6 +2464,7 @@ const KanbanPanelContent = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRef,
       style: {
         padding: "clamp(12px, 3vw, 20px)",
         // Responsive padding for mobile
@@ -2565,44 +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: statusColumns.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
-                },
-                status
-              );
-            })
-          }
-        )
+        ) : /* @__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
+                );
+              })
+            }
+          )
+        ] })
       ]
     }
   );