@btst/stack 1.11.0 → 2.0.0

package/dist/packages/stack/src/plugins/kanban/client/components/pages/boards-list-page.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { BoardsListSkeleton } from '../loading/boards-list-skeleton.mjs';
+import { NotFoundPage } from './404-page.mjs';
+
+const BoardsListPage = lazy(
+  () => import('./boards-list-page.internal.mjs').then((m) => ({
+    default: m.BoardsListPage
+  }))
+);
+function BoardsListPageComponent() {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/kanban",
+      PageComponent: BoardsListPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: BoardsListSkeleton,
+      NotFoundComponent: NotFoundPage,
+      onError: (error) => console.error("BoardsListPage error:", error)
+    }
+  );
+}
+
+export { BoardsListPageComponent };

package/dist/packages/stack/src/plugins/kanban/client/components/pages/new-board-page.cjs

@@ -0,0 +1,30 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const boardsListSkeleton = require('../loading/boards-list-skeleton.cjs');
+const _404Page = require('./404-page.cjs');
+
+const NewBoardPage = React.lazy(
+  () => import('./new-board-page.internal.cjs').then((m) => ({
+    default: m.NewBoardPage
+  }))
+);
+function NewBoardPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/kanban/new",
+      PageComponent: NewBoardPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: boardsListSkeleton.BoardsListSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      onError: (error) => console.error("NewBoardPage error:", error)
+    }
+  );
+}
+
+exports.NewBoardPageComponent = NewBoardPageComponent;

package/dist/packages/stack/src/plugins/kanban/client/components/pages/new-board-page.internal.cjs

@@ -0,0 +1,51 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const LucideIcons = require('lucide-react');
+const card = require('../../../../../../../ui/src/components/card.cjs');
+const context = require('@btst/stack/context');
+const boardForm = require('../forms/board-form.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+
+function NewBoardPage() {
+  const { Link: OverrideLink, navigate: overrideNavigate } = context.usePluginOverrides("kanban");
+  const navigate = overrideNavigate || ((path) => {
+    window.location.href = path;
+  });
+  const Link = OverrideLink || "a";
+  const handleSuccess = (boardId) => {
+    navigate(`/pages/kanban/${boardId}`);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { "data-testid": "new-board-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          href: "/pages/kanban",
+          className: "text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold", "data-testid": "page-header", children: "Create New Board" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: "Set up a new kanban board for your project" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { className: "max-w-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(card.CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(card.CardTitle, { children: "Board Details" }),
+        /* @__PURE__ */ jsxRuntime.jsx(card.CardDescription, { children: "Enter the details for your new kanban board." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        boardForm.BoardForm,
+        {
+          onClose: () => navigate("/pages/kanban"),
+          onSuccess: handleSuccess
+        }
+      ) })
+    ] })
+  ] });
+}
+
+exports.NewBoardPage = NewBoardPage;

package/dist/packages/stack/src/plugins/kanban/client/components/pages/new-board-page.internal.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowLeft } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../../../../../../../ui/src/components/card.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+import { BoardForm } from '../forms/board-form.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+
+function NewBoardPage() {
+  const { Link: OverrideLink, navigate: overrideNavigate } = usePluginOverrides("kanban");
+  const navigate = overrideNavigate || ((path) => {
+    window.location.href = path;
+  });
+  const Link = OverrideLink || "a";
+  const handleSuccess = (boardId) => {
+    navigate(`/pages/kanban/${boardId}`);
+  };
+  return /* @__PURE__ */ jsxs(PageWrapper, { "data-testid": "new-board-page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mb-8", children: [
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: "/pages/kanban",
+          className: "text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", "data-testid": "page-header", children: "Create New Board" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: "Set up a new kanban board for your project" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: "max-w-2xl", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Board Details" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Enter the details for your new kanban board." })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+        BoardForm,
+        {
+          onClose: () => navigate("/pages/kanban"),
+          onSuccess: handleSuccess
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { NewBoardPage };

package/dist/packages/stack/src/plugins/kanban/client/components/pages/new-board-page.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { BoardsListSkeleton } from '../loading/boards-list-skeleton.mjs';
+import { NotFoundPage } from './404-page.mjs';
+
+const NewBoardPage = lazy(
+  () => import('./new-board-page.internal.mjs').then((m) => ({
+    default: m.NewBoardPage
+  }))
+);
+function NewBoardPageComponent() {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/kanban/new",
+      PageComponent: NewBoardPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: BoardsListSkeleton,
+      NotFoundComponent: NotFoundPage,
+      onError: (error) => console.error("NewBoardPage error:", error)
+    }
+  );
+}
+
+export { NewBoardPageComponent };

package/dist/packages/stack/src/plugins/kanban/client/components/shared/column-content.cjs

@@ -0,0 +1,76 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const LucideIcons = require('lucide-react');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const badge = require('../../../../../../../ui/src/components/badge.cjs');
+const kanban = require('../../../../../../../ui/src/components/kanban.cjs');
+const dropdownMenu = require('../../../../../../../ui/src/components/dropdown-menu.cjs');
+const taskCard = require('./task-card.cjs');
+
+function ColumnContentComponent({
+  column,
+  onAddTask,
+  onEditTask,
+  onEditColumn,
+  onDeleteColumn
+}) {
+  const hasTasks = column.tasks && column.tasks.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(kanban.KanbanColumn, { value: column.id, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(kanban.KanbanColumnHandle, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.GripVertical, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-lg line-clamp-1 flex-1 text-left", children: column.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "outline", className: "pointer-events-none rounded-sm", children: column.tasks?.length || 0 })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreVertical, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: onEditColumn, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "mr-2 h-4 w-4" }),
+            "Edit Column"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: onAddTask, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
+            "Add Task"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            dropdownMenu.DropdownMenuItem,
+            {
+              onClick: onDeleteColumn,
+              className: "text-red-600 focus:text-red-600",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "mr-2 h-4 w-4" }),
+                "Delete Column"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-0.5 space-y-2", children: hasTasks ? column.tasks.map((task) => /* @__PURE__ */ jsxRuntime.jsx(
+      taskCard.TaskCard,
+      {
+        task,
+        onClick: () => onEditTask(task.id)
+      },
+      task.id
+    )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-1 md:py-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-muted p-4 mb-3 hidden md:block", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 mb-2 md:space-y-2 md:mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No tasks yet" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Add a task to get started" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: onAddTask, size: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
+        "Add Task"
+      ] })
+    ] }) })
+  ] }, column.id);
+}
+const ColumnContent = React.memo(ColumnContentComponent);
+
+exports.ColumnContent = ColumnContent;

package/dist/packages/stack/src/plugins/kanban/client/components/shared/column-content.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { GripVertical, MoreVertical, Pencil, Plus, Trash2 } from 'lucide-react';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Badge } from '../../../../../../../ui/src/components/badge.mjs';
+import { KanbanColumn, KanbanColumnHandle } from '../../../../../../../ui/src/components/kanban.mjs';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '../../../../../../../ui/src/components/dropdown-menu.mjs';
+import { TaskCard } from './task-card.mjs';
+
+function ColumnContentComponent({
+  column,
+  onAddTask,
+  onEditTask,
+  onEditColumn,
+  onDeleteColumn
+}) {
+  const hasTasks = column.tasks && column.tasks.length > 0;
+  return /* @__PURE__ */ jsxs(KanbanColumn, { value: column.id, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx(KanbanColumnHandle, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-bold text-lg line-clamp-1 flex-1 text-left", children: column.title }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "pointer-events-none rounded-sm", children: column.tasks?.length || 0 })
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onEditColumn, children: [
+            /* @__PURE__ */ jsx(Pencil, { className: "mr-2 h-4 w-4" }),
+            "Edit Column"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onAddTask, children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+            "Add Task"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: onDeleteColumn,
+              className: "text-red-600 focus:text-red-600",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                "Delete Column"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-0.5 space-y-2", children: hasTasks ? column.tasks.map((task) => /* @__PURE__ */ jsx(
+      TaskCard,
+      {
+        task,
+        onClick: () => onEditTask(task.id)
+      },
+      task.id
+    )) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-1 md:py-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-3 hidden md:block", children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 mb-2 md:space-y-2 md:mb-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No tasks yet" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Add a task to get started" })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { onClick: onAddTask, size: "sm", children: [
+        /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+        "Add Task"
+      ] })
+    ] }) })
+  ] }, column.id);
+}
+const ColumnContent = memo(ColumnContentComponent);
+
+export { ColumnContent };

package/dist/packages/stack/src/plugins/kanban/client/components/shared/default-error.cjs

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const LucideIcons = require('lucide-react');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+
+function DefaultError({ error, reset }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center justify-center py-12 text-center",
+      "data-testid": "error-placeholder",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-destructive/10 p-6 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-destructive" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-md mb-4", children: error?.message || "An unexpected error occurred. Please try again." }),
+        reset && /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: reset, variant: "outline", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.RefreshCw, { className: "mr-2 h-4 w-4" }),
+          "Try Again"
+        ] })
+      ]
+    }
+  );
+}
+
+exports.DefaultError = DefaultError;

package/dist/packages/stack/src/plugins/kanban/client/components/shared/default-error.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+
+function DefaultError({ error, reset }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center justify-center py-12 text-center",
+      "data-testid": "error-placeholder",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-full bg-destructive/10 p-6 mb-4", children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-md mb-4", children: error?.message || "An unexpected error occurred. Please try again." }),
+        reset && /* @__PURE__ */ jsxs(Button, { onClick: reset, variant: "outline", children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+          "Try Again"
+        ] })
+      ]
+    }
+  );
+}
+
+export { DefaultError };

package/dist/packages/stack/src/plugins/kanban/client/components/shared/empty-state.cjs

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../../../../../../../ui/src/lib/utils.cjs');
+
+function EmptyState({
+  title,
+  description,
+  action,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex flex-col items-center justify-center py-12 text-center",
+        className
+      ),
+      "data-testid": "empty-state",
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-muted p-6 mb-4", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-md mb-4", children: description }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { children: action })
+      ]
+    }
+  );
+}
+
+exports.EmptyState = EmptyState;

package/dist/packages/stack/src/plugins/kanban/client/components/shared/empty-state.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
+
+function EmptyState({
+  title,
+  description,
+  action,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center py-12 text-center",
+        className
+      ),
+      "data-testid": "empty-state",
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-6 mb-4", children: icon }),
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-md mb-4", children: description }),
+        action && /* @__PURE__ */ jsx("div", { children: action })
+      ]
+    }
+  );
+}
+
+export { EmptyState };

package/dist/packages/stack/src/plugins/kanban/client/components/shared/kanban-board.cjs

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const kanban = require('../../../../../../../ui/src/components/kanban.cjs');
+const utils = require('../../../../../../../ui/src/lib/utils.cjs');
+const columnContent = require('./column-content.cjs');
+
+function KanbanBoardComponent({
+  columns,
+  kanbanState,
+  onKanbanChange,
+  onAddTask,
+  onEditTask,
+  onEditColumn,
+  onDeleteColumn
+}) {
+  const orderedColumns = React.useMemo(() => {
+    const columnMap = new Map(columns.map((c) => [c.id, c]));
+    return Object.keys(kanbanState).map((columnId) => {
+      const column = columnMap.get(columnId);
+      if (!column) return null;
+      return {
+        ...column,
+        tasks: kanbanState[columnId] || []
+      };
+    }).filter(
+      (c) => c !== null
+    );
+  }, [columns, kanbanState]);
+  const mdClass = React.useMemo(() => {
+    const gridClassMap = {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-4",
+      5: "md:grid-cols-5",
+      6: "md:grid-cols-6"
+    };
+    return gridClassMap[orderedColumns.length] || "md:grid-cols-6";
+  }, [orderedColumns.length]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    kanban.Kanban,
+    {
+      orientation: "horizontal",
+      value: kanbanState,
+      onValueChange: onKanbanChange,
+      getItemValue: (item) => item.id,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          kanban.KanbanBoard,
+          {
+            className: utils.cn(
+              "flex flex-col gap-4 md:auto-rows-fr md:grid-cols-1 md:grid min-h-[400px]",
+              mdClass
+            ),
+            children: orderedColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+              columnContent.ColumnContent,
+              {
+                column,
+                onAddTask: () => onAddTask(column.id),
+                onEditTask: (taskId) => onEditTask(column.id, taskId),
+                onEditColumn: () => onEditColumn(column.id),
+                onDeleteColumn: () => onDeleteColumn(column.id)
+              },
+              column.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(kanban.KanbanOverlay, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full rounded-md bg-primary/10" }) })
+      ]
+    }
+  );
+}
+const KanbanBoard = React.memo(KanbanBoardComponent);
+
+exports.KanbanBoard = KanbanBoard;

package/dist/packages/stack/src/plugins/kanban/client/components/shared/kanban-board.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import { Kanban as KanbanRoot, KanbanBoard as KanbanBoard$1, KanbanOverlay } from '../../../../../../../ui/src/components/kanban.mjs';
+import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
+import { ColumnContent } from './column-content.mjs';
+
+function KanbanBoardComponent({
+  columns,
+  kanbanState,
+  onKanbanChange,
+  onAddTask,
+  onEditTask,
+  onEditColumn,
+  onDeleteColumn
+}) {
+  const orderedColumns = useMemo(() => {
+    const columnMap = new Map(columns.map((c) => [c.id, c]));
+    return Object.keys(kanbanState).map((columnId) => {
+      const column = columnMap.get(columnId);
+      if (!column) return null;
+      return {
+        ...column,
+        tasks: kanbanState[columnId] || []
+      };
+    }).filter(
+      (c) => c !== null
+    );
+  }, [columns, kanbanState]);
+  const mdClass = useMemo(() => {
+    const gridClassMap = {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-4",
+      5: "md:grid-cols-5",
+      6: "md:grid-cols-6"
+    };
+    return gridClassMap[orderedColumns.length] || "md:grid-cols-6";
+  }, [orderedColumns.length]);
+  return /* @__PURE__ */ jsxs(
+    KanbanRoot,
+    {
+      orientation: "horizontal",
+      value: kanbanState,
+      onValueChange: onKanbanChange,
+      getItemValue: (item) => item.id,
+      children: [
+        /* @__PURE__ */ jsx(
+          KanbanBoard$1,
+          {
+            className: cn(
+              "flex flex-col gap-4 md:auto-rows-fr md:grid-cols-1 md:grid min-h-[400px]",
+              mdClass
+            ),
+            children: orderedColumns.map((column) => /* @__PURE__ */ jsx(
+              ColumnContent,
+              {
+                column,
+                onAddTask: () => onAddTask(column.id),
+                onEditTask: (taskId) => onEditTask(column.id, taskId),
+                onEditColumn: () => onEditColumn(column.id),
+                onDeleteColumn: () => onDeleteColumn(column.id)
+              },
+              column.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(KanbanOverlay, { children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-md bg-primary/10" }) })
+      ]
+    }
+  );
+}
+const KanbanBoard = memo(KanbanBoardComponent);
+
+export { KanbanBoard };

package/dist/packages/stack/src/plugins/kanban/client/components/shared/page-wrapper.cjs

@@ -0,0 +1,15 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../../../../../../../ui/src/lib/utils.cjs');
+
+function PageWrapper({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("container mx-auto py-8 px-4", className), ...props, children });
+}
+
+exports.PageWrapper = PageWrapper;

package/dist/packages/stack/src/plugins/kanban/client/components/shared/page-wrapper.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
+
+function PageWrapper({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("container mx-auto py-8 px-4", className), ...props, children });
+}
+
+export { PageWrapper };