@ittinc/strapi-plugin-kanban-board 0.0.1

package/dist/_chunks/App-BEiW65up.js

@@ -0,0 +1,343 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const admin = require("@strapi/strapi/admin");
+const reactRouterDom = require("react-router-dom");
+const react = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const initialData = [
+  {
+    id: "col-1",
+    title: "To Do",
+    items: [
+      { id: "1", title: "Research Plugins", subtitle: "Read Strapi v5 docs" },
+      { id: "2", title: "Setup Environment", subtitle: "Install dependencies" }
+    ]
+  },
+  {
+    id: "col-2",
+    title: "In Progress",
+    items: [
+      { id: "3", title: "Develop Feature", subtitle: "Implement Drag & Drop" }
+    ]
+  },
+  {
+    id: "col-3",
+    title: "Done",
+    items: [
+      { id: "4", title: "Initialize Project", subtitle: "Run CLI commands" }
+    ]
+  }
+];
+const BoardContainer = styled__default.default(designSystem.Flex)`
+  gap: 16px;
+  padding: 24px;
+  height: 100%;
+  align-items: flex-start;
+  overflow-x: auto;
+`;
+const ColumnContainer = styled__default.default(designSystem.Box)`
+  background: ${({ theme }) => theme.colors.neutral100};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  min-width: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  flex-shrink: 0;
+`;
+const ColumnHeader = styled__default.default(designSystem.Flex)`
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background: ${({ theme }) => theme.colors.neutral150};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius};
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+const ItemList = styled__default.default(designSystem.Box)`
+  padding: 16px;
+  flex-grow: 1;
+  min-height: 100px;
+  background: ${({ theme, $isDraggingOver }) => $isDraggingOver ? theme.colors.primary100 : "transparent"};
+  transition: background 0.2s;
+  overflow-y: auto;
+`;
+const CardItem = styled__default.default(designSystem.Box)`
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding: 12px;
+  margin-bottom: 8px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  cursor: grab;
+  opacity: ${({ $isDragging }) => $isDragging ? 0.5 : 1};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary500};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+const ScrollableMain = styled__default.default(designSystem.Main)`
+  height: 100vh;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+const HomePage = () => {
+  const [columns, setColumns] = react.useState(initialData);
+  const [draggedItem, setDraggedItem] = react.useState(null);
+  const [dragOverColId, setDragOverColId] = react.useState(null);
+  const [editingColId, setEditingColId] = react.useState(null);
+  const [tempColTitle, setTempColTitle] = react.useState("");
+  const [editingItemId, setEditingItemId] = react.useState(null);
+  const [tempItemTitle, setTempItemTitle] = react.useState("");
+  const [tempItemSubtitle, setTempItemSubtitle] = react.useState("");
+  const handleDragStart = (e, itemId, sourceColId) => {
+    setDraggedItem({ itemId, sourceColId });
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, colId) => {
+    e.preventDefault();
+    setDragOverColId(colId);
+  };
+  const handleDragLeave = () => {
+    setDragOverColId(null);
+  };
+  const handleDrop = (e, targetColId) => {
+    e.preventDefault();
+    setDragOverColId(null);
+    if (!draggedItem) return;
+    const { itemId, sourceColId } = draggedItem;
+    if (sourceColId === targetColId) {
+      setDraggedItem(null);
+      return;
+    }
+    const newColumns = columns.map((col) => {
+      if (col.id === sourceColId) {
+        return {
+          ...col,
+          items: col.items.filter((item) => item.id !== itemId)
+        };
+      }
+      if (col.id === targetColId) {
+        const itemToMove = columns.find((c) => c.id === sourceColId)?.items.find((i) => i.id === itemId);
+        if (itemToMove) {
+          return {
+            ...col,
+            items: [...col.items, itemToMove]
+          };
+        }
+      }
+      return col;
+    });
+    setColumns(newColumns);
+    setDraggedItem(null);
+  };
+  const handleAddColumn = () => {
+    const newCol = {
+      id: `col-${Date.now()}`,
+      title: "New Column",
+      items: []
+    };
+    setColumns([...columns, newCol]);
+  };
+  const handleStartRename = (col) => {
+    setEditingColId(col.id);
+    setTempColTitle(col.title);
+  };
+  const handleSaveRename = (colId) => {
+    if (!tempColTitle.trim()) return;
+    setColumns(columns.map(
+      (col) => col.id === colId ? { ...col, title: tempColTitle } : col
+    ));
+    setEditingColId(null);
+  };
+  const handleDeleteColumn = (colId) => {
+    if (confirm("Are you sure you want to delete this column?")) {
+      setColumns(columns.filter((col) => col.id !== colId));
+    }
+  };
+  const handleStartEditItem = (item) => {
+    setEditingItemId(item.id);
+    setTempItemTitle(item.title);
+    setTempItemSubtitle(item.subtitle);
+  };
+  const handleSaveEditItem = (colId, itemId) => {
+    if (!tempItemTitle.trim()) return;
+    setColumns(columns.map((col) => {
+      if (col.id === colId) {
+        return {
+          ...col,
+          items: col.items.map(
+            (item) => item.id === itemId ? { ...item, title: tempItemTitle, subtitle: tempItemSubtitle } : item
+          )
+        };
+      }
+      return col;
+    }));
+    setEditingItemId(null);
+  };
+  const handleDeleteItem = (colId, itemId) => {
+    if (confirm("Are you sure you want to delete this item?")) {
+      setColumns(columns.map((col) => {
+        if (col.id === colId) {
+          return {
+            ...col,
+            items: col.items.filter((item) => item.id !== itemId)
+          };
+        }
+        return col;
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollableMain, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Kanban Board" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", as: "div", children: "Manage your project tasks visually" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: handleAddColumn, children: "Add Column" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(BoardContainer, { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(ColumnContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColumnHeader, { children: editingColId === col.id ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, style: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            "aria-label": "Column title",
+            value: tempColTitle,
+            onChange: (e) => setTempColTitle(e.target.value),
+            size: "S"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: () => handleSaveRename(col.id),
+            size: "S",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+            children: "Save"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: col.title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginLeft: "8px" }, children: [
+            "(",
+            col.items.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              onClick: () => handleStartRename(col),
+              variant: "ghost",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              onClick: () => handleDeleteColumn(col.id),
+              variant: "ghost",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ItemList,
+        {
+          $isDraggingOver: dragOverColId === col.id,
+          onDragOver: (e) => handleDragOver(e, col.id),
+          onDragLeave: handleDragLeave,
+          onDrop: (e) => handleDrop(e, col.id),
+          children: col.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            CardItem,
+            {
+              draggable: editingItemId !== item.id,
+              onDragStart: (e) => handleDragStart(e, item.id, col.id),
+              $isDragging: draggedItem?.itemId === item.id,
+              children: editingItemId === item.id ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    "aria-label": "Item title",
+                    value: tempItemTitle,
+                    onChange: (e) => setTempItemTitle(e.target.value),
+                    size: "S"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    "aria-label": "Item subtitle",
+                    value: tempItemSubtitle,
+                    onChange: (e) => setTempItemSubtitle(e.target.value),
+                    size: "S"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, justifyContent: "flex-end", style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    onClick: () => handleSaveEditItem(col.id, item.id),
+                    size: "S",
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+                    children: "Save"
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "start", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", as: "div", marginBottom: 1, children: item.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", as: "div", children: item.subtitle })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, style: { opacity: 0.5 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      onClick: () => handleStartEditItem(item),
+                      variant: "ghost",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      onClick: () => handleDeleteItem(col.id, item.id),
+                      variant: "ghost",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                    }
+                  )
+                ] })
+              ] })
+            },
+            item.id
+          ))
+        }
+      )
+    ] }, col.id)) })
+  ] }) });
+};
+const App = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+  ] });
+};
+exports.App = App;

package/dist/_chunks/App-DXTlN9Fm.mjs

@@ -0,0 +1,341 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Page } from "@strapi/strapi/admin";
+import { Routes, Route } from "react-router-dom";
+import { useState } from "react";
+import { Box, Flex, Typography, Button, TextInput, Main } from "@strapi/design-system";
+import { Plus, Check, Pencil, Trash } from "@strapi/icons";
+import styled from "styled-components";
+const initialData = [
+  {
+    id: "col-1",
+    title: "To Do",
+    items: [
+      { id: "1", title: "Research Plugins", subtitle: "Read Strapi v5 docs" },
+      { id: "2", title: "Setup Environment", subtitle: "Install dependencies" }
+    ]
+  },
+  {
+    id: "col-2",
+    title: "In Progress",
+    items: [
+      { id: "3", title: "Develop Feature", subtitle: "Implement Drag & Drop" }
+    ]
+  },
+  {
+    id: "col-3",
+    title: "Done",
+    items: [
+      { id: "4", title: "Initialize Project", subtitle: "Run CLI commands" }
+    ]
+  }
+];
+const BoardContainer = styled(Flex)`
+  gap: 16px;
+  padding: 24px;
+  height: 100%;
+  align-items: flex-start;
+  overflow-x: auto;
+`;
+const ColumnContainer = styled(Box)`
+  background: ${({ theme }) => theme.colors.neutral100};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  min-width: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  flex-shrink: 0;
+`;
+const ColumnHeader = styled(Flex)`
+  padding: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background: ${({ theme }) => theme.colors.neutral150};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius};
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+const ItemList = styled(Box)`
+  padding: 16px;
+  flex-grow: 1;
+  min-height: 100px;
+  background: ${({ theme, $isDraggingOver }) => $isDraggingOver ? theme.colors.primary100 : "transparent"};
+  transition: background 0.2s;
+  overflow-y: auto;
+`;
+const CardItem = styled(Box)`
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding: 12px;
+  margin-bottom: 8px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  cursor: grab;
+  opacity: ${({ $isDragging }) => $isDragging ? 0.5 : 1};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary500};
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+const ScrollableMain = styled(Main)`
+  height: 100vh;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+`;
+const HomePage = () => {
+  const [columns, setColumns] = useState(initialData);
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [dragOverColId, setDragOverColId] = useState(null);
+  const [editingColId, setEditingColId] = useState(null);
+  const [tempColTitle, setTempColTitle] = useState("");
+  const [editingItemId, setEditingItemId] = useState(null);
+  const [tempItemTitle, setTempItemTitle] = useState("");
+  const [tempItemSubtitle, setTempItemSubtitle] = useState("");
+  const handleDragStart = (e, itemId, sourceColId) => {
+    setDraggedItem({ itemId, sourceColId });
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, colId) => {
+    e.preventDefault();
+    setDragOverColId(colId);
+  };
+  const handleDragLeave = () => {
+    setDragOverColId(null);
+  };
+  const handleDrop = (e, targetColId) => {
+    e.preventDefault();
+    setDragOverColId(null);
+    if (!draggedItem) return;
+    const { itemId, sourceColId } = draggedItem;
+    if (sourceColId === targetColId) {
+      setDraggedItem(null);
+      return;
+    }
+    const newColumns = columns.map((col) => {
+      if (col.id === sourceColId) {
+        return {
+          ...col,
+          items: col.items.filter((item) => item.id !== itemId)
+        };
+      }
+      if (col.id === targetColId) {
+        const itemToMove = columns.find((c) => c.id === sourceColId)?.items.find((i) => i.id === itemId);
+        if (itemToMove) {
+          return {
+            ...col,
+            items: [...col.items, itemToMove]
+          };
+        }
+      }
+      return col;
+    });
+    setColumns(newColumns);
+    setDraggedItem(null);
+  };
+  const handleAddColumn = () => {
+    const newCol = {
+      id: `col-${Date.now()}`,
+      title: "New Column",
+      items: []
+    };
+    setColumns([...columns, newCol]);
+  };
+  const handleStartRename = (col) => {
+    setEditingColId(col.id);
+    setTempColTitle(col.title);
+  };
+  const handleSaveRename = (colId) => {
+    if (!tempColTitle.trim()) return;
+    setColumns(columns.map(
+      (col) => col.id === colId ? { ...col, title: tempColTitle } : col
+    ));
+    setEditingColId(null);
+  };
+  const handleDeleteColumn = (colId) => {
+    if (confirm("Are you sure you want to delete this column?")) {
+      setColumns(columns.filter((col) => col.id !== colId));
+    }
+  };
+  const handleStartEditItem = (item) => {
+    setEditingItemId(item.id);
+    setTempItemTitle(item.title);
+    setTempItemSubtitle(item.subtitle);
+  };
+  const handleSaveEditItem = (colId, itemId) => {
+    if (!tempItemTitle.trim()) return;
+    setColumns(columns.map((col) => {
+      if (col.id === colId) {
+        return {
+          ...col,
+          items: col.items.map(
+            (item) => item.id === itemId ? { ...item, title: tempItemTitle, subtitle: tempItemSubtitle } : item
+          )
+        };
+      }
+      return col;
+    }));
+    setEditingItemId(null);
+  };
+  const handleDeleteItem = (colId, itemId) => {
+    if (confirm("Are you sure you want to delete this item?")) {
+      setColumns(columns.map((col) => {
+        if (col.id === colId) {
+          return {
+            ...col,
+            items: col.items.filter((item) => item.id !== itemId)
+          };
+        }
+        return col;
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ScrollableMain, { children: [
+    /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Kanban Board" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", as: "div", children: "Manage your project tasks visually" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: handleAddColumn, children: "Add Column" })
+    ] }) }),
+    /* @__PURE__ */ jsx(BoardContainer, { children: columns.map((col) => /* @__PURE__ */ jsxs(ColumnContainer, { children: [
+      /* @__PURE__ */ jsx(ColumnHeader, { children: editingColId === col.id ? /* @__PURE__ */ jsxs(Flex, { gap: 2, style: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": "Column title",
+            value: tempColTitle,
+            onChange: (e) => setTempColTitle(e.target.value),
+            size: "S"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => handleSaveRename(col.id),
+            size: "S",
+            startIcon: /* @__PURE__ */ jsx(Check, {}),
+            children: "Save"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: col.title }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", style: { marginLeft: "8px" }, children: [
+            "(",
+            col.items.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => handleStartRename(col),
+              variant: "ghost",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsx(Pencil, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => handleDeleteColumn(col.id),
+              variant: "ghost",
+              size: "S",
+              startIcon: /* @__PURE__ */ jsx(Trash, {})
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        ItemList,
+        {
+          $isDraggingOver: dragOverColId === col.id,
+          onDragOver: (e) => handleDragOver(e, col.id),
+          onDragLeave: handleDragLeave,
+          onDrop: (e) => handleDrop(e, col.id),
+          children: col.items.map((item) => /* @__PURE__ */ jsx(
+            CardItem,
+            {
+              draggable: editingItemId !== item.id,
+              onDragStart: (e) => handleDragStart(e, item.id, col.id),
+              $isDragging: draggedItem?.itemId === item.id,
+              children: editingItemId === item.id ? /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    "aria-label": "Item title",
+                    value: tempItemTitle,
+                    onChange: (e) => setTempItemTitle(e.target.value),
+                    size: "S"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    "aria-label": "Item subtitle",
+                    value: tempItemSubtitle,
+                    onChange: (e) => setTempItemSubtitle(e.target.value),
+                    size: "S"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Flex, { gap: 2, justifyContent: "flex-end", style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => handleSaveEditItem(col.id, item.id),
+                    size: "S",
+                    startIcon: /* @__PURE__ */ jsx(Check, {}),
+                    children: "Save"
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "start", children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", as: "div", marginBottom: 1, children: item.title }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", as: "div", children: item.subtitle })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { gap: 1, style: { opacity: 0.5 }, children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: () => handleStartEditItem(item),
+                      variant: "ghost",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsx(Pencil, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: () => handleDeleteItem(col.id, item.id),
+                      variant: "ghost",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ] })
+              ] })
+            },
+            item.id
+          ))
+        }
+      )
+    ] }, col.id)) })
+  ] }) });
+};
+const App = () => {
+  return /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] });
+};
+export {
+  App
+};

package/dist/_chunks/en-C0sbENwZ.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "kanban-plugin.kanban-board.label": "Kanban Board",
+  "kanban-plugin.kanban-board.description": "Drag and drop items between columns",
+  "kanban-plugin.plugin.name": "Kanban Board"
+};
+exports.default = en;

package/dist/_chunks/en-CHHvJuav.mjs

@@ -0,0 +1,8 @@
+const en = {
+  "kanban-plugin.kanban-board.label": "Kanban Board",
+  "kanban-plugin.kanban-board.description": "Drag and drop items between columns",
+  "kanban-plugin.plugin.name": "Kanban Board"
+};
+export {
+  en as default
+};