@industry-theme/backlogmd-kanban-panel 0.1.0

package/dist/panels.bundle.js

@@ -0,0 +1,939 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React2, { forwardRef, createElement, createContext, useState, useEffect, useContext, useMemo, useCallback } from "react";
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  ["path", { d: "M5 3v14", key: "9nsxs2" }],
+  ["path", { d: "M12 3v8", key: "1h2ygw" }],
+  ["path", { d: "M19 3v18", key: "1sk56x" }]
+];
+const Kanban = createLucideIcon("kanban", __iconNode$1);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
+  ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
+  ["path", { d: "M8 16H3v5", key: "1cv678" }]
+];
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode);
+var terminalTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fonts: {
+    body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1,
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600,
+    light: 300,
+    medium: 500,
+    semibold: 600
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.4,
+    relaxed: 1.8
+  },
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    "none",
+    "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
+    "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
+    "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+  colors: {
+    text: "#e4e4e4",
+    background: "rgba(10, 10, 10, 0.85)",
+    primary: "#66b3ff",
+    secondary: "#80c4ff",
+    accent: "#66ff99",
+    highlight: "rgba(102, 179, 255, 0.15)",
+    muted: "rgba(26, 26, 26, 0.8)",
+    success: "#66ff99",
+    warning: "#ffcc66",
+    error: "#ff6666",
+    info: "#66b3ff",
+    border: "rgba(255, 255, 255, 0.1)",
+    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
+    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
+    backgroundLight: "rgba(255, 255, 255, 0.05)",
+    backgroundHover: "rgba(102, 179, 255, 0.08)",
+    surface: "rgba(15, 15, 15, 0.95)",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textTertiary: "rgba(255, 255, 255, 0.5)",
+    textMuted: "rgba(255, 255, 255, 0.4)",
+    highlightBg: "rgba(255, 235, 59, 0.25)",
+    highlightBorder: "rgba(255, 235, 59, 0.5)"
+  },
+  modes: {
+    light: {
+      text: "#1a1a1a",
+      background: "rgba(255, 255, 255, 0.9)",
+      primary: "#0066cc",
+      secondary: "#0052a3",
+      accent: "#00cc88",
+      highlight: "rgba(0, 102, 204, 0.08)",
+      muted: "rgba(245, 245, 245, 0.8)",
+      success: "#00cc88",
+      warning: "#ffaa00",
+      error: "#ff3333",
+      info: "#0066cc",
+      border: "rgba(0, 0, 0, 0.1)",
+      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
+      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
+      backgroundLight: "rgba(0, 0, 0, 0.02)",
+      backgroundHover: "rgba(0, 102, 204, 0.04)",
+      surface: "rgba(255, 255, 255, 0.95)",
+      textSecondary: "rgba(0, 0, 0, 0.6)",
+      textTertiary: "rgba(0, 0, 0, 0.4)",
+      textMuted: "rgba(0, 0, 0, 0.3)",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      bg: "primary",
+      borderWidth: 0,
+      "&:hover": {
+        bg: "secondary"
+      }
+    },
+    secondary: {
+      color: "primary",
+      bg: "transparent",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "primary",
+      "&:hover": {
+        bg: "highlight"
+      }
+    },
+    ghost: {
+      color: "text",
+      bg: "transparent",
+      "&:hover": {
+        bg: "backgroundHover"
+      }
+    }
+  },
+  text: {
+    heading: {
+      fontFamily: "heading",
+      fontWeight: "heading",
+      lineHeight: "heading"
+    },
+    body: {
+      fontFamily: "body",
+      fontWeight: "body",
+      lineHeight: "body"
+    },
+    caption: {
+      fontSize: 1,
+      color: "textSecondary"
+    }
+  },
+  cards: {
+    primary: {
+      bg: "surface",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    },
+    secondary: {
+      bg: "backgroundSecondary",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    }
+  }
+};
+function getMode(theme2, mode) {
+  if (!mode || !theme2.modes || !theme2.modes[mode]) {
+    return theme2.colors;
+  }
+  return {
+    ...theme2.colors,
+    ...theme2.modes[mode]
+  };
+}
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext(void 0);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = createContext(void 0);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = useContext(ThemeContextSingleton);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeProvider = ({
+  children,
+  theme: customTheme = theme,
+  initialMode
+}) => {
+  const [mode, setMode] = useState(initialMode);
+  const activeTheme = React2.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode)
+    };
+  }, [customTheme, mode]);
+  useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem("principlemd-theme-mode");
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  useEffect(() => {
+    if (mode) {
+      localStorage.setItem("principlemd-theme-mode", mode);
+    } else {
+      localStorage.removeItem("principlemd-theme-mode");
+    }
+  }, [mode]);
+  const value = {
+    theme: activeTheme,
+    mode,
+    setMode
+  };
+  return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
+    value
+  }, children);
+};
+var theme = terminalTheme;
+function generateMockTasks() {
+  return [
+    {
+      id: "task-001",
+      title: "Implement user authentication",
+      status: "To Do",
+      assignee: ["alice@example.com"],
+      createdDate: "2025-11-01T10:00:00Z",
+      updatedDate: "2025-11-15T14:30:00Z",
+      labels: ["feature", "security"],
+      dependencies: [],
+      description: "Add OAuth2 authentication flow with support for multiple providers (Google, GitHub). Include session management and token refresh logic.",
+      priority: "high",
+      ordinal: 1,
+      filePath: "backlog/task-001.md",
+      source: "local"
+    },
+    {
+      id: "task-002",
+      title: "Design database schema",
+      status: "To Do",
+      assignee: ["bob@example.com"],
+      createdDate: "2025-11-02T09:15:00Z",
+      labels: ["database", "architecture"],
+      dependencies: [],
+      description: "Create normalized database schema for user data, tasks, and relationships. Include migration scripts.",
+      priority: "high",
+      ordinal: 2,
+      filePath: "backlog/task-002.md",
+      source: "local"
+    },
+    {
+      id: "task-003",
+      title: "Build REST API endpoints",
+      status: "In Progress",
+      assignee: ["charlie@example.com"],
+      createdDate: "2025-11-03T11:20:00Z",
+      updatedDate: "2025-11-16T09:00:00Z",
+      labels: ["backend", "api"],
+      dependencies: ["task-002"],
+      description: "Implement RESTful API endpoints for CRUD operations. Include validation, error handling, and rate limiting.",
+      implementationPlan: `
+## Implementation Steps
+1. Set up Express/Fastify server
+2. Define API routes and handlers
+3. Add request validation middleware
+4. Implement error handling
+5. Add rate limiting
+6. Write API documentation
+      `.trim(),
+      priority: "high",
+      ordinal: 1,
+      filePath: "backlog/task-003.md",
+      source: "local"
+    },
+    {
+      id: "task-004",
+      title: "Create UI component library",
+      status: "In Progress",
+      assignee: ["diana@example.com", "eve@example.com"],
+      createdDate: "2025-11-04T13:45:00Z",
+      updatedDate: "2025-11-17T16:20:00Z",
+      labels: ["frontend", "ui"],
+      dependencies: [],
+      description: "Build reusable React components with TypeScript. Include buttons, forms, modals, and data tables.",
+      priority: "medium",
+      ordinal: 2,
+      acceptanceCriteriaItems: [
+        { index: 0, text: "All components are fully typed", checked: true },
+        { index: 1, text: "Components support theme customization", checked: true },
+        { index: 2, text: "Storybook stories for each component", checked: false },
+        { index: 3, text: "Accessibility audit passes", checked: false }
+      ],
+      filePath: "backlog/task-004.md",
+      source: "local"
+    },
+    {
+      id: "task-005",
+      title: "Set up CI/CD pipeline",
+      status: "Done",
+      assignee: ["frank@example.com"],
+      createdDate: "2025-11-05T08:30:00Z",
+      updatedDate: "2025-11-10T17:00:00Z",
+      labels: ["devops", "automation"],
+      dependencies: [],
+      description: "Configure GitHub Actions for automated testing, building, and deployment.",
+      priority: "medium",
+      ordinal: 1,
+      filePath: "backlog/task-005.md",
+      source: "completed"
+    },
+    {
+      id: "task-006",
+      title: "Write unit tests",
+      status: "Done",
+      assignee: ["grace@example.com"],
+      createdDate: "2025-11-06T10:00:00Z",
+      updatedDate: "2025-11-12T14:30:00Z",
+      labels: ["testing", "quality"],
+      dependencies: ["task-003"],
+      description: "Add comprehensive unit tests for all API endpoints and utility functions. Aim for 80%+ coverage.",
+      priority: "medium",
+      ordinal: 2,
+      filePath: "backlog/task-006.md",
+      source: "completed"
+    },
+    {
+      id: "task-007",
+      title: "Optimize database queries",
+      status: "To Do",
+      assignee: ["henry@example.com"],
+      createdDate: "2025-11-07T15:20:00Z",
+      labels: ["performance", "database"],
+      dependencies: ["task-002", "task-003"],
+      description: "Profile and optimize slow database queries. Add indexes where needed.",
+      priority: "low",
+      ordinal: 3,
+      filePath: "backlog/task-007.md",
+      source: "local"
+    },
+    {
+      id: "task-008",
+      title: "Implement real-time notifications",
+      status: "To Do",
+      assignee: [],
+      createdDate: "2025-11-08T09:45:00Z",
+      labels: ["feature", "realtime"],
+      dependencies: ["task-003"],
+      description: "Add WebSocket support for real-time notifications when tasks are updated or assigned.",
+      priority: "low",
+      ordinal: 4,
+      filePath: "backlog/task-008.md",
+      source: "local"
+    }
+  ];
+}
+function getDefaultStatuses() {
+  return ["To Do", "In Progress", "Done"];
+}
+function useKanbanData() {
+  const [tasks, setTasks] = useState(() => generateMockTasks());
+  const [statuses] = useState(() => getDefaultStatuses());
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const tasksByStatus = useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const status of statuses) {
+      grouped.set(status, []);
+    }
+    for (const task of tasks) {
+      const statusKey = task.status ?? "";
+      const list = grouped.get(statusKey);
+      if (list) {
+        list.push(task);
+      }
+    }
+    for (const [status, taskList] of grouped.entries()) {
+      taskList.sort((a, b) => {
+        if (a.ordinal !== void 0 && b.ordinal !== void 0) {
+          return a.ordinal - b.ordinal;
+        }
+        const priorityOrder = { high: 3, medium: 2, low: 1 };
+        const aPriority = priorityOrder[a.priority] || 0;
+        const bPriority = priorityOrder[b.priority] || 0;
+        if (aPriority !== bPriority) {
+          return bPriority - aPriority;
+        }
+        return new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime();
+      });
+      grouped.set(status, taskList);
+    }
+    return grouped;
+  }, [tasks, statuses]);
+  const refreshData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const newTasks = generateMockTasks();
+      setTasks(newTasks);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to refresh data");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  const updateTaskStatus = useCallback(async (taskId, newStatus) => {
+    setError(null);
+    setTasks(
+      (prevTasks) => prevTasks.map(
+        (task) => task.id === taskId ? { ...task, status: newStatus, updatedDate: (/* @__PURE__ */ new Date()).toISOString() } : task
+      )
+    );
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update task");
+      setTasks(generateMockTasks());
+    }
+  }, []);
+  return {
+    tasks,
+    statuses,
+    isLoading,
+    error,
+    tasksByStatus,
+    refreshData,
+    updateTaskStatus
+  };
+}
+const KanbanColumn = ({
+  status,
+  tasks,
+  onTaskClick
+}) => {
+  const { theme: theme2 } = useTheme();
+  const getPriorityColor = (priority) => {
+    switch (priority) {
+      case "high":
+        return theme2.colors.error;
+      case "medium":
+        return theme2.colors.warning;
+      case "low":
+        return theme2.colors.info;
+      default:
+        return theme2.colors.border;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: "0 0 320px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        background: theme2.colors.backgroundSecondary,
+        borderRadius: theme2.radii[2],
+        padding: "16px",
+        border: `1px solid ${theme2.colors.border}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: theme2.fontSizes[3],
+                    color: theme2.colors.text,
+                    fontWeight: theme2.fontWeights.semibold
+                  },
+                  children: status
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textSecondary,
+                    background: theme2.colors.background,
+                    padding: "2px 8px",
+                    borderRadius: theme2.radii[1]
+                  },
+                  children: tasks.length
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              overflowY: "auto"
+            },
+            children: tasks.map((task) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                onClick: () => onTaskClick == null ? void 0 : onTaskClick(task),
+                style: {
+                  background: theme2.colors.surface,
+                  borderRadius: theme2.radii[2],
+                  padding: "12px",
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderLeft: `4px solid ${getPriorityColor(task.priority)}`,
+                  cursor: onTaskClick ? "pointer" : "default",
+                  transition: "all 0.2s ease"
+                },
+                onMouseEnter: (e) => {
+                  if (onTaskClick) {
+                    e.currentTarget.style.transform = "translateY(-2px)";
+                    e.currentTarget.style.boxShadow = `0 4px 8px ${theme2.colors.border}`;
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (onTaskClick) {
+                    e.currentTarget.style.transform = "translateY(0)";
+                    e.currentTarget.style.boxShadow = "none";
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "h4",
+                    {
+                      style: {
+                        margin: "0 0 8px 0",
+                        fontSize: theme2.fontSizes[2],
+                        color: theme2.colors.text,
+                        fontWeight: theme2.fontWeights.medium
+                      },
+                      children: task.title
+                    }
+                  ),
+                  task.description && /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        margin: "0 0 8px 0",
+                        fontSize: theme2.fontSizes[1],
+                        color: theme2.colors.textSecondary,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        display: "-webkit-box",
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: "vertical",
+                        lineHeight: "1.4"
+                      },
+                      children: task.description
+                    }
+                  ),
+                  task.labels && task.labels.length > 0 && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: "4px",
+                        flexWrap: "wrap",
+                        marginBottom: "8px"
+                      },
+                      children: task.labels.map((label) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: theme2.fontSizes[0],
+                            color: theme2.colors.primary,
+                            background: `${theme2.colors.primary}20`,
+                            padding: "2px 8px",
+                            borderRadius: theme2.radii[1],
+                            fontWeight: theme2.fontWeights.medium
+                          },
+                          children: label
+                        },
+                        label
+                      ))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        fontSize: theme2.fontSizes[0],
+                        color: theme2.colors.textMuted
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: theme2.fonts.monospace
+                            },
+                            children: task.id
+                          }
+                        ),
+                        task.assignee && task.assignee.length > 0 && /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              color: theme2.colors.textSecondary
+                            },
+                            children: [
+                              task.assignee.length,
+                              " assignee",
+                              task.assignee.length !== 1 ? "s" : ""
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              },
+              task.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+const KanbanPanelContent = ({
+  context
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [_selectedTask, setSelectedTask] = useState(null);
+  const {
+    statuses,
+    tasksByStatus,
+    isLoading,
+    error,
+    refreshData
+  } = useKanbanData();
+  const handleTaskClick = (task) => {
+    setSelectedTask(task);
+  };
+  const handleRefresh = async () => {
+    await refreshData();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "20px",
+        fontFamily: theme2.fonts.body,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text
+      },
+      children: [
+        /* @__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"
+            }
+          ),
+          context.currentScope.repository && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                marginLeft: "auto",
+                fontSize: theme2.fontSizes[1],
+                color: theme2.colors.textSecondary,
+                fontFamily: theme2.fonts.monospace
+              },
+              children: context.currentScope.repository.name
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleRefresh,
+              disabled: isLoading,
+              style: {
+                padding: "8px 12px",
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                border: `1px solid ${theme2.colors.border}`,
+                borderRadius: theme2.radii[1],
+                background: theme2.colors.surface,
+                color: theme2.colors.text,
+                cursor: isLoading ? "not-allowed" : "pointer",
+                opacity: isLoading ? 0.6 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(RefreshCw, { size: 16, style: { animation: isLoading ? "spin 1s linear infinite" : "none" } }),
+                "Refresh"
+              ]
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              background: `${theme2.colors.error}20`,
+              border: `1px solid ${theme2.colors.error}`,
+              borderRadius: theme2.radii[2],
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              color: theme2.colors.error
+            },
+            children: [
+              /* @__PURE__ */ jsx(CircleAlert, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { children: error })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              gap: "16px",
+              overflowX: "auto",
+              paddingBottom: "8px"
+            },
+            children: statuses.map((status) => {
+              const columnTasks = tasksByStatus.get(status) || [];
+              return /* @__PURE__ */ jsx(
+                KanbanColumn,
+                {
+                  status,
+                  tasks: columnTasks,
+                  onTaskClick: handleTaskClick
+                },
+                status
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+const KanbanPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(KanbanPanelContent, { ...props }) });
+};
+const panels = [
+  {
+    metadata: {
+      id: "principal-ade.kanban-panel",
+      name: "Kanban Board",
+      icon: "📋",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Kanban board for visualizing Backlog.md tasks",
+      slices: ["fileTree"]
+      // Data slices this panel depends on
+    },
+    component: KanbanPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Kanban Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("Kanban Panel unmounting");
+    }
+  }
+];
+const onPackageLoad = async () => {
+  console.log("Panel package loaded - Kanban Panel Extension");
+};
+const onPackageUnload = async () => {
+  console.log("Panel package unloading - Kanban Panel Extension");
+};
+export {
+  onPackageLoad,
+  onPackageUnload,
+  panels
+};
+//# sourceMappingURL=panels.bundle.js.map