@burdenoff/planmagnet-fe-sdk 2026.703.1 → 2026.703.2

package/dist/index.js

@@ -1,16 +1,17 @@
 import { createContext, useMemo, useEffect, useContext, useState, useCallback } from 'react';
-import { ApolloProvider, useQuery, useMutation, useApolloClient } from '@apollo/client/react';
+import { ApolloProvider, useApolloClient, useMutation, useQuery } from '@apollo/client/react';
 import { createHttpLink, ApolloClient, from, InMemoryCache } from '@apollo/client/core';
 import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
 import { CombinedGraphQLErrors } from '@apollo/client/errors';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Card, CardContent } from '@burdenoff/fe-libs/ui';
-import { Filter } from 'lucide-react';
 import { gql } from '@apollo/client';
+import { CircleX, CircleCheckBig, CircleDotDashed, CircleDot, Circle, CircleDashed, User, CalendarDays, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, CalendarRange, List, LayoutGrid, Search, Plus } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { addWeeks, startOfWeek, endOfWeek, eachDayOfInterval, addMonths, startOfMonth, endOfMonth, format, isToday, isSameMonth, startOfDay, parseISO, isValid } from 'date-fns';
 import { cva } from 'class-variance-authority';
+import { Card, CardContent } from '@burdenoff/fe-libs/ui';
 
 var clientInstance = null;
 function buildCache() {
@@ -412,6 +413,109 @@ var MOVE_WORK_ITEM = gql`
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var CLOSED_STATUSES = /* @__PURE__ */ new Set(["DONE", "CANCELLED"]);
+function parseDate(iso) {
+  if (!iso) return null;
+  const d = parseISO(iso);
+  return isValid(d) ? d : null;
+}
+function formatDueDate(iso) {
+  const d = parseDate(iso);
+  if (!d) return null;
+  const now = /* @__PURE__ */ new Date();
+  return format(
+    d,
+    d.getFullYear() === now.getFullYear() ? "MMM d" : "MMM d yyyy"
+  );
+}
+function isOverdue(iso, status) {
+  const d = parseDate(iso);
+  if (!d) return false;
+  if (status && CLOSED_STATUSES.has(status)) return false;
+  return startOfDay(d).getTime() < startOfDay(/* @__PURE__ */ new Date()).getTime();
+}
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium capitalize transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary",
+        muted: "bg-muted text-muted-foreground",
+        secondary: "bg-secondary text-secondary-foreground",
+        accent: "bg-accent text-accent-foreground",
+        destructive: "bg-destructive/15 text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var TINTS = [
+  "bg-primary/15 text-primary",
+  "bg-secondary text-secondary-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-muted text-muted-foreground",
+  "bg-destructive/15 text-destructive"
+];
+var SIZES = {
+  sm: "h-5 w-5 text-[9px]",
+  md: "h-6 w-6 text-[10px]",
+  lg: "h-8 w-8 text-xs"
+};
+function tintIndex(seed) {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) {
+    h = h * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return h % TINTS.length;
+}
+function initials(name, id) {
+  const source = (name ?? "").trim();
+  if (source) {
+    const parts = source.split(/\s+/);
+    const first = parts[0]?.[0] ?? "";
+    const second = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? "" : "";
+    return (first + second).toUpperCase() || "?";
+  }
+  const raw = (id ?? "").replace(/[^a-zA-Z0-9]/g, "");
+  return raw.slice(0, 2).toUpperCase() || "?";
+}
+function Avatar({ id, name, size = "md", className }) {
+  if (!id && !name) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center justify-center rounded-full border border-dashed border-border text-muted-foreground",
+          SIZES[size],
+          className
+        ),
+        title: "Unassigned",
+        "aria-label": "Unassigned",
+        children: /* @__PURE__ */ jsx(User, { className: "h-1/2 w-1/2", "aria-hidden": "true" })
+      }
+    );
+  }
+  const tint = TINTS[tintIndex(name || id || "")];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded-full font-medium",
+        SIZES[size],
+        tint,
+        className
+      ),
+      title: name ?? id ?? void 0,
+      "aria-label": name ?? id ?? void 0,
+      children: initials(name, id)
+    }
+  );
+}
 
 // src/types/index.ts
 var DEFAULT_BOARD_COLUMNS = [
@@ -448,47 +552,275 @@ var TASK_STATUSES = [
 function enumLabel(value) {
   return value.toLowerCase().replace(/_/g, " ");
 }
-var columnAccent = {
-  BACKLOG: "border-t-muted-foreground/40",
-  TODO: "border-t-primary/50",
-  IN_PROGRESS: "border-t-primary",
-  IN_REVIEW: "border-t-secondary-foreground/50",
-  TESTING: "border-t-accent-foreground/50",
-  DONE: "border-t-primary/70",
-  CANCELLED: "border-t-destructive/60"
+var STATUS_META = {
+  BACKLOG: { icon: CircleDashed, tone: "text-muted-foreground/60" },
+  TODO: { icon: Circle, tone: "text-muted-foreground" },
+  IN_PROGRESS: { icon: CircleDot, tone: "text-primary" },
+  IN_REVIEW: { icon: CircleDotDashed, tone: "text-accent-foreground" },
+  TESTING: { icon: CircleDotDashed, tone: "text-secondary-foreground" },
+  DONE: { icon: CircleCheckBig, tone: "text-primary" },
+  CANCELLED: { icon: CircleX, tone: "text-destructive/70" }
 };
-var priorityTone = {
-  NONE: "bg-muted text-muted-foreground",
-  LOW: "bg-muted text-muted-foreground",
-  MEDIUM: "bg-secondary text-secondary-foreground",
-  HIGH: "bg-accent text-accent-foreground",
-  CRITICAL: "bg-destructive/15 text-destructive"
+function StatusIcon({ status, className }) {
+  const meta = STATUS_META[status] ?? STATUS_META.TODO;
+  const Icon = meta.icon;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      className: cn("h-3.5 w-3.5 shrink-0", meta.tone, className),
+      "aria-hidden": "true"
+    }
+  );
+}
+function StatusPill({ status, className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/40 px-2 py-0.5 text-xs font-medium capitalize text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(StatusIcon, { status }),
+        enumLabel(status)
+      ]
+    }
+  );
+}
+var PRIORITY_META = {
+  NONE: { level: 0, tone: "text-muted-foreground/50" },
+  LOW: { level: 1, tone: "text-muted-foreground" },
+  MEDIUM: { level: 2, tone: "text-accent-foreground" },
+  HIGH: { level: 3, tone: "text-accent-foreground" },
+  CRITICAL: { level: 3, tone: "text-destructive" }
 };
-var typeTone = {
-  TASK: "bg-secondary text-secondary-foreground",
-  STORY: "bg-primary/10 text-primary",
-  BUG: "bg-destructive/15 text-destructive",
-  EPIC: "bg-accent text-accent-foreground",
-  SUB_TASK: "bg-muted text-muted-foreground"
+var BAR_HEIGHTS = ["h-1.5", "h-2.5", "h-3.5"];
+function PriorityIndicator({
+  priority,
+  showLabel = false,
+  className
+}) {
+  const meta = PRIORITY_META[priority] ?? PRIORITY_META.NONE;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex items-center gap-1.5", meta.tone, className),
+      title: `Priority: ${enumLabel(priority)}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex items-end gap-0.5", "aria-hidden": "true", children: BAR_HEIGHTS.map((h, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "w-1 rounded-[1px]",
+              h,
+              i < meta.level ? "bg-current" : "bg-current/25"
+            )
+          },
+          h
+        )) }),
+        showLabel && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium capitalize", children: enumLabel(priority) })
+      ]
+    }
+  );
+}
+var TYPE_VARIANT = {
+  TASK: "secondary",
+  STORY: "default",
+  BUG: "destructive",
+  EPIC: "accent",
+  SUB_TASK: "muted"
 };
+function TypeBadge({ type, className }) {
+  return /* @__PURE__ */ jsx(Badge, { variant: TYPE_VARIANT[type], className, children: enumLabel(type) });
+}
+function OverlayShell({
+  open,
+  onClose,
+  children,
+  ariaLabel,
+  className,
+  variant
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  const isModal = variant === "modal";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex bg-foreground/40",
+        isModal ? "items-center justify-center p-4" : "justify-end"
+      ),
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          className: cn(
+            "relative overflow-y-auto bg-background text-foreground shadow-lg",
+            isModal ? "max-h-[90vh] w-full max-w-2xl rounded-lg" : "h-full w-full max-w-lg",
+            className
+          ),
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close",
+                onClick: onClose,
+                className: "absolute right-3 top-3 z-10 rounded-md bg-muted px-2 py-1 text-sm font-medium text-muted-foreground hover:bg-muted/70",
+                children: "\u2715"
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function Modal(props) {
+  return /* @__PURE__ */ jsx(OverlayShell, { variant: "modal", ...props });
+}
+function Drawer(props) {
+  return /* @__PURE__ */ jsx(OverlayShell, { variant: "drawer", ...props });
+}
+var EMPTY = /* @__PURE__ */ new Set();
+function TaskCard({
+  task,
+  hidden = EMPTY,
+  onClick,
+  draggable,
+  onDragStart,
+  onDragEnd,
+  dragging,
+  resolveAssignee,
+  className
+}) {
+  const overdue = isOverdue(task.dueDate, task.status);
+  const due = formatDueDate(task.dueDate);
+  const resolved = task.assigneeId ? resolveAssignee?.(task.assigneeId) : null;
+  const showTopRow = !hidden.has("key") || !hidden.has("type");
+  const showLabels = !hidden.has("labels") && (task.labels?.length ?? 0) > 0;
+  const showPriority = !hidden.has("priority");
+  const showPoints = !hidden.has("storyPoints") && task.storyPoints != null;
+  const showMetaRow = showPriority || showPoints;
+  const showAssignee = !hidden.has("assignee");
+  const showDue = !hidden.has("dueDate") && Boolean(due);
+  const showPeopleRow = showAssignee || showDue;
+  const interactive = Boolean(onClick);
+  const handleKey = onClick ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick(task);
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      draggable,
+      onDragStart: draggable ? (e) => onDragStart?.(task, e) : void 0,
+      onDragEnd: draggable ? (e) => onDragEnd?.(task, e) : void 0,
+      onClick: onClick ? () => onClick(task) : void 0,
+      onKeyDown: handleKey,
+      className: cn(
+        "group rounded-lg border border-border bg-card p-2.5 shadow-sm transition",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        interactive && "cursor-pointer hover:border-primary/50 hover:shadow-md",
+        draggable && "active:cursor-grabbing",
+        dragging && "opacity-50 ring-2 ring-primary/40",
+        className
+      ),
+      children: [
+        showTopRow && /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+          !hidden.has("key") ? /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] uppercase tracking-wide text-muted-foreground", children: task.key }) : /* @__PURE__ */ jsx("span", {}),
+          !hidden.has("type") && /* @__PURE__ */ jsx(TypeBadge, { type: task.type })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-medium leading-snug text-foreground", children: task.title }),
+        showLabels && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1", children: [
+          task.labels.slice(0, 3).map((l) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground",
+              children: l
+            },
+            l
+          )),
+          task.labels.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+            "+",
+            task.labels.length - 3
+          ] })
+        ] }),
+        showMetaRow && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
+          showPriority ? /* @__PURE__ */ jsx(PriorityIndicator, { priority: task.priority, showLabel: true }) : /* @__PURE__ */ jsx("span", {}),
+          showPoints && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-[10px] font-semibold text-primary",
+              title: `${task.storyPoints} story points`,
+              children: task.storyPoints
+            }
+          )
+        ] }),
+        showPeopleRow && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+          showAssignee ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Avatar, { id: task.assigneeId, name: resolved?.name, size: "sm" }),
+            resolved?.name && /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: resolved.name })
+          ] }) : /* @__PURE__ */ jsx("span", {}),
+          showDue && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "flex shrink-0 items-center gap-1 text-[11px]",
+                overdue ? "font-medium text-destructive" : "text-muted-foreground"
+              ),
+              title: overdue ? "Overdue" : "Due date",
+              children: [
+                /* @__PURE__ */ jsx(CalendarDays, { className: "h-3 w-3", "aria-hidden": "true" }),
+                due
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function TaskBoardCore({
   projectId,
   columns = DEFAULT_BOARD_COLUMNS,
-  readonly: _readonly,
+  readonly,
   hideHeader,
-  hideFilters,
+  priority = "ALL",
+  type = "ALL",
+  search = "",
+  assigneeId,
   hiddenFields,
+  resolveAssignee,
   onTaskClick,
   className,
   workspaceId: workspaceIdProp
 }) {
   const ctx = usePlanMagnetContextSafe();
   const workspaceId = workspaceIdProp ?? ctx?.workspaceId;
-  const [priorityFilter, setPriorityFilter] = useState(
-    "ALL"
-  );
-  const [typeFilter, setTypeFilter] = useState("ALL");
+  const client = useApolloClient();
   const hidden = useMemo(() => new Set(hiddenFields ?? []), [hiddenFields]);
+  const [draggingId, setDraggingId] = useState(null);
+  const [dragOver, setDragOver] = useState(null);
+  const [moveError, setMoveError] = useState(null);
+  const [updateItem] = useMutation(UPDATE_WORK_ITEM);
   const { data, loading, error } = useQuery(
     LIST_WORK_ITEMS,
     {
@@ -500,20 +832,28 @@ function TaskBoardCore({
       skip: !workspaceId
     }
   );
+  const moveTask = useCallback(
+    (task, toStatus) => {
+      const from2 = task.status;
+      if (from2 === toStatus) return;
+      const id = client.cache.identify({ __typename: "WorkItem", id: task.id });
+      if (!id) return;
+      setMoveError(null);
+      client.cache.modify({ id, fields: { status: () => toStatus } });
+      updateItem({
+        variables: { id: task.id, input: { status: toStatus } }
+      }).catch(() => {
+        client.cache.modify({ id, fields: { status: () => from2 } });
+        setMoveError("Couldn't move the task. Please try again.");
+      });
+    },
+    [client, updateItem]
+  );
   if (!workspaceId) {
     return /* @__PURE__ */ jsx("div", { className: cn("p-6 text-sm text-destructive", className), children: "TaskBoard: no workspaceId provided (prop or PlanMagnetProvider)." });
   }
   if (loading && !data) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-center p-12",
-          className
-        ),
-        children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" })
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-12", className), children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" }) });
   }
   if (error && !data) {
     return /* @__PURE__ */ jsxs("div", { className: cn("p-6 text-sm text-destructive", className), children: [
@@ -522,150 +862,90 @@ function TaskBoardCore({
     ] });
   }
   const tasks = data?.planmagnetWorkItems?.items ?? [];
-  const filtered = tasks.filter(
-    (t) => (priorityFilter === "ALL" || t.priority === priorityFilter) && (typeFilter === "ALL" || t.type === typeFilter)
-  );
-  const gridCols = columns.length <= 4 ? "md:grid-cols-4" : columns.length === 5 ? "md:grid-cols-5" : "md:grid-cols-6";
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 p-6", className), children: [
-    !hideHeader && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground", children: "Task Board" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-        tasks.length,
+  const query = search.trim().toLowerCase();
+  const filtered = tasks.filter((t) => {
+    if (priority !== "ALL" && t.priority !== priority) return false;
+    if (type !== "ALL" && t.type !== type) return false;
+    if (assigneeId && t.assigneeId !== assigneeId) return false;
+    if (query) {
+      const haystack = [t.title, t.key, ...t.labels ?? []].join(" ").toLowerCase();
+      if (!haystack.includes(query)) return false;
+    }
+    return true;
+  });
+  const canDrag = !readonly;
+  const onColumnDragOver = (status) => (e) => {
+    if (!canDrag || !draggingId) return;
+    e.preventDefault();
+    if (dragOver !== status) setDragOver(status);
+  };
+  const onColumnDrop = (status) => (e) => {
+    if (!canDrag) return;
+    e.preventDefault();
+    const task = tasks.find((t) => t.id === draggingId);
+    setDragOver(null);
+    setDraggingId(null);
+    if (task) moveTask(task, status);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    !hideHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Board" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        filtered.length,
         " ",
-        tasks.length === 1 ? "task" : "tasks"
-      ] })
-    ] }) }),
-    !hideFilters && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
-      /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4 text-muted-foreground" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ jsx(
-          FilterChip,
-          {
-            active: priorityFilter === "ALL",
-            label: "all",
-            onClick: () => setPriorityFilter("ALL")
-          }
-        ),
-        TASK_PRIORITIES.map((p) => /* @__PURE__ */ jsx(
-          FilterChip,
-          {
-            active: priorityFilter === p,
-            label: p.toLowerCase(),
-            onClick: () => setPriorityFilter(p)
-          },
-          p
-        ))
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-        /* @__PURE__ */ jsx(
-          FilterChip,
-          {
-            active: typeFilter === "ALL",
-            label: "all",
-            onClick: () => setTypeFilter("ALL")
-          }
-        ),
-        TASK_TYPES.map((t) => /* @__PURE__ */ jsx(
-          FilterChip,
-          {
-            active: typeFilter === t,
-            label: t.toLowerCase().replace("_", " "),
-            onClick: () => setTypeFilter(t)
-          },
-          t
-        ))
+        filtered.length === 1 ? "task" : "tasks"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-3 overflow-x-auto", gridCols), children: columns.map((col) => {
+    moveError && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-1.5 text-xs text-destructive", children: moveError }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-3 overflow-x-auto pb-2", children: columns.map((col) => {
       const colTasks = filtered.filter((t) => t.status === col.status);
-      return /* @__PURE__ */ jsxs("div", { className: "min-w-[200px]", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "rounded-t-md border-t-2 bg-muted/50 p-2",
-              columnAccent[col.status] ?? "border-t-muted-foreground/40"
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: col.label }),
-              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 text-xs text-muted-foreground", children: colTasks.length })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: colTasks.map((task) => /* @__PURE__ */ jsx(
-          Card,
-          {
-            className: cn(
-              "shadow-sm",
-              onTaskClick && "cursor-pointer hover:border-primary"
-            ),
-            onClick: onTaskClick ? () => onTaskClick(task) : void 0,
-            children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-2 p-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-tight text-foreground", children: task.title }),
-              !hidden.has("key") && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: task.key }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-                !hidden.has("priority") && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "rounded-full px-1.5 py-0.5 text-[10px] capitalize",
-                      priorityTone[task.priority]
-                    ),
-                    children: task.priority.toLowerCase()
-                  }
-                ),
-                !hidden.has("type") && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "rounded-full px-1.5 py-0.5 text-[10px] capitalize",
-                      typeTone[task.type]
-                    ),
-                    children: task.type.toLowerCase().replace("_", " ")
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                !hidden.has("labels") && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: (task.labels ?? []).slice(0, 2).map((l) => /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "rounded bg-muted px-1 py-0.5 text-[9px] text-muted-foreground",
-                    children: l
-                  },
-                  l
-                )) }),
-                !hidden.has("storyPoints") && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary", children: task.storyPoints ?? 0 })
+      const isOver = dragOver === col.status;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onDragOver: onColumnDragOver(col.status),
+          onDragLeave: () => dragOver === col.status && setDragOver(null),
+          onDrop: onColumnDrop(col.status),
+          className: cn(
+            "flex w-72 shrink-0 flex-col rounded-lg border transition-colors",
+            isOver ? "border-primary/50 bg-primary/5" : "border-transparent bg-muted/40"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ jsx(StatusIcon, { status: col.status }),
+                col.label
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground", children: [
-                !hidden.has("assignee") && /* @__PURE__ */ jsx("span", { children: task.assigneeId ?? "Unassigned" }),
-                !hidden.has("dueDate") && /* @__PURE__ */ jsx("span", { children: task.dueDate ?? "" })
-              ] })
-            ] })
-          },
-          task.id
-        )) })
-      ] }, col.status);
+              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 text-xs font-medium text-muted-foreground", children: colTasks.length })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 px-2 pb-2", children: colTasks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-border/70 px-3 py-6 text-center text-xs text-muted-foreground", children: isOver ? "Drop here" : "No tasks" }) : colTasks.map((task) => /* @__PURE__ */ jsx(
+              TaskCard,
+              {
+                task,
+                hidden,
+                onClick: onTaskClick,
+                draggable: canDrag,
+                dragging: draggingId === task.id,
+                resolveAssignee,
+                onDragStart: (t, e) => {
+                  setDraggingId(t.id);
+                  e.dataTransfer.effectAllowed = "move";
+                  e.dataTransfer.setData("text/plain", t.id);
+                },
+                onDragEnd: () => {
+                  setDraggingId(null);
+                  setDragOver(null);
+                }
+              },
+              task.id
+            )) })
+          ]
+        },
+        col.status
+      );
     }) })
   ] });
 }
-function FilterChip({
-  active,
-  label,
-  onClick
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn(
-        "rounded px-2 py-1 text-xs capitalize",
-        active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/70"
-      ),
-      children: label
-    }
-  );
-}
 function TaskBoard({
   apiGatewayUrl,
   authToken,
@@ -979,96 +1259,13 @@ function CreateTask({
     }
   );
 }
-var badgeVariants = cva(
-  "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium capitalize transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary/10 text-primary",
-        muted: "bg-muted text-muted-foreground",
-        secondary: "bg-secondary text-secondary-foreground",
-        accent: "bg-accent text-accent-foreground",
-        destructive: "bg-destructive/15 text-destructive"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-function OverlayShell({
-  open,
-  onClose,
-  children,
-  ariaLabel,
-  className,
-  variant
-}) {
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
-  if (!open) return null;
-  const isModal = variant === "modal";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "fixed inset-0 z-50 flex bg-foreground/40",
-        isModal ? "items-center justify-center p-4" : "justify-end"
-      ),
-      onClick: onClose,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": ariaLabel,
-          className: cn(
-            "relative overflow-y-auto bg-background text-foreground shadow-lg",
-            isModal ? "max-h-[90vh] w-full max-w-2xl rounded-lg" : "h-full w-full max-w-lg",
-            className
-          ),
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Close",
-                onClick: onClose,
-                className: "absolute right-3 top-3 z-10 rounded-md bg-muted px-2 py-1 text-sm font-medium text-muted-foreground hover:bg-muted/70",
-                children: "\u2715"
-              }
-            ),
-            children
-          ]
-        }
-      )
-    }
-  );
-}
-function Modal(props) {
-  return /* @__PURE__ */ jsx(OverlayShell, { variant: "modal", ...props });
-}
-function Drawer(props) {
-  return /* @__PURE__ */ jsx(OverlayShell, { variant: "drawer", ...props });
-}
 var DEFAULT_COLUMNS = [
-  "key",
   "title",
-  "type",
   "status",
   "priority",
   "assignee",
-  "dueDate"
+  "dueDate",
+  "storyPoints"
 ];
 var priorityRank = {
   CRITICAL: 0,
@@ -1086,24 +1283,25 @@ var statusRank = {
   DONE: 5,
   CANCELLED: 6
 };
-var priorityVariant = {
-  NONE: "muted",
-  LOW: "muted",
-  MEDIUM: "secondary",
-  HIGH: "accent",
-  CRITICAL: "destructive"
-};
 var COLUMN_LABELS = {
   key: "Key",
-  title: "Title",
+  title: "Task",
   type: "Type",
   status: "Status",
   priority: "Priority",
   assignee: "Assignee",
-  dueDate: "Due",
+  dueDate: "Due Date",
   storyPoints: "Points",
   labels: "Labels"
 };
+var COLUMN_SORT = {
+  title: "title",
+  type: "type",
+  status: "status",
+  priority: "priority",
+  dueDate: "dueDate",
+  storyPoints: "storyPoints"
+};
 function TaskListCore({
   projectId,
   status,
@@ -1116,12 +1314,17 @@ function TaskListCore({
   sortDir = "asc",
   hideHeader,
   onSelect,
+  resolveAssignee,
   limit = 200,
   className,
   workspaceId: workspaceIdProp
 }) {
   const ctx = usePlanMagnetContextSafe();
   const workspaceId = workspaceIdProp ?? ctx?.workspaceId;
+  const [sort, setSort] = useState({
+    by: sortBy ?? null,
+    dir: sortDir
+  });
   const filter = useMemo(() => {
     const f = {};
     if (projectId) f.projectId = projectId;
@@ -1145,10 +1348,18 @@ function TaskListCore({
   );
   const rows = useMemo(() => {
     const items = data?.planmagnetWorkItems?.items ?? [];
-    if (!sortBy) return items;
-    const dir = sortDir === "desc" ? -1 : 1;
-    return [...items].sort((a, b) => dir * compareTasks(a, b, sortBy));
-  }, [data, sortBy, sortDir]);
+    if (!sort.by) return items;
+    const dir = sort.dir === "desc" ? -1 : 1;
+    const key = sort.by;
+    return [...items].sort((a, b) => dir * compareTasks(a, b, key));
+  }, [data, sort]);
+  const toggleSort = (col) => {
+    const key = COLUMN_SORT[col];
+    if (!key) return;
+    setSort(
+      (prev) => prev.by === key ? { by: key, dir: prev.dir === "asc" ? "desc" : "asc" } : { by: key, dir: "asc" }
+    );
+  };
   if (!workspaceId) {
     return /* @__PURE__ */ jsx("div", { className: cn("p-6 text-sm text-destructive", className), children: "TaskList: no workspaceId provided (prop or PlanMagnetProvider)." });
   }
@@ -1161,36 +1372,41 @@ function TaskListCore({
       error.message
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 p-6", className), children: [
-    !hideHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-foreground", children: "Tasks" }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-          rows.length,
-          " ",
-          rows.length === 1 ? "task" : "tasks"
-        ] })
-      ] }),
-      (status || type || priority || search) && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Filter, { className: "h-3.5 w-3.5" }),
-        " filtered"
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    !hideHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "List" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        rows.length,
+        " ",
+        rows.length === 1 ? "task" : "tasks"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border bg-muted/50 text-left", children: columns.map((col) => /* @__PURE__ */ jsx(
-        "th",
-        {
-          className: "px-3 py-2 font-medium text-muted-foreground",
-          children: COLUMN_LABELS[col]
-        },
-        col
-      )) }) }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border bg-muted/50 text-left", children: columns.map((col) => {
+        const sortable = Boolean(COLUMN_SORT[col]);
+        const active = sort.by === COLUMN_SORT[col];
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            onClick: sortable ? () => toggleSort(col) : void 0,
+            className: cn(
+              "px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+              sortable && "cursor-pointer select-none hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              COLUMN_LABELS[col],
+              active && (sort.dir === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3", "aria-hidden": "true" }))
+            ] })
+          },
+          col
+        );
+      }) }) }),
       /* @__PURE__ */ jsxs("tbody", { children: [
         rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
           "td",
           {
             colSpan: columns.length,
-            className: "px-3 py-6 text-center text-muted-foreground",
+            className: "px-3 py-8 text-center text-muted-foreground",
             children: "No tasks found."
           }
         ) }),
@@ -1202,7 +1418,14 @@ function TaskListCore({
               "border-b border-border last:border-0",
               onSelect && "cursor-pointer hover:bg-muted/40"
             ),
-            children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-foreground", children: renderCell(col, task) }, col))
+            children: columns.map((col) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: "px-3 py-2 align-middle text-foreground",
+                children: renderCell(col, task, resolveAssignee)
+              },
+              col
+            ))
           },
           task.id
         ))
@@ -1210,29 +1433,49 @@ function TaskListCore({
     ] }) })
   ] });
 }
-function renderCell(col, task) {
+function renderCell(col, task, resolveAssignee) {
   switch (col) {
     case "key":
-      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: task.key });
+      return /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: task.key });
     case "title":
-      return /* @__PURE__ */ jsx("span", { className: "font-medium", children: task.title });
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: task.title }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] uppercase text-muted-foreground", children: task.key })
+      ] });
     case "type":
-      return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: enumLabel(task.type) });
+      return /* @__PURE__ */ jsx(TypeBadge, { type: task.type });
     case "status":
-      return /* @__PURE__ */ jsx("span", { className: "capitalize text-muted-foreground", children: enumLabel(task.status) });
+      return /* @__PURE__ */ jsx(StatusPill, { status: task.status });
     case "priority":
-      return /* @__PURE__ */ jsx(Badge, { variant: priorityVariant[task.priority], children: enumLabel(task.priority) });
-    case "assignee":
-      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: task.assigneeId ?? "Unassigned" });
-    case "dueDate":
-      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: task.dueDate ?? "\u2014" });
+      return /* @__PURE__ */ jsx(PriorityIndicator, { priority: task.priority, showLabel: true });
+    case "assignee": {
+      const resolved = task.assigneeId ? resolveAssignee?.(task.assigneeId) : null;
+      return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(Avatar, { id: task.assigneeId, name: resolved?.name, size: "sm" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: resolved?.name ?? (task.assigneeId ? "" : "Unassigned") })
+      ] });
+    }
+    case "dueDate": {
+      const due = formatDueDate(task.dueDate);
+      if (!due) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-xs",
+            isOverdue(task.dueDate, task.status) ? "font-medium text-destructive" : "text-muted-foreground"
+          ),
+          children: due
+        }
+      );
+    }
     case "storyPoints":
-      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: task.storyPoints ?? 0 });
+      return task.storyPoints != null ? /* @__PURE__ */ jsx("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-[10px] font-semibold text-primary", children: task.storyPoints }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
     case "labels":
       return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: (task.labels ?? []).slice(0, 3).map((l) => /* @__PURE__ */ jsx(
         "span",
         {
-          className: "rounded bg-muted px-1 py-0.5 text-[10px] text-muted-foreground",
+          className: "rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground",
           children: l
         },
         l
@@ -1287,9 +1530,448 @@ function TaskList({
     }
   );
 }
+var WEEK_OPTS = { weekStartsOn: 1 };
+function dayKey(d) {
+  return format(d, "yyyy-MM-dd");
+}
+function TaskTimelineCore({
+  projectId,
+  priority = "ALL",
+  type = "ALL",
+  search = "",
+  assigneeId,
+  defaultMode = "week",
+  onSelect,
+  resolveAssignee,
+  className,
+  workspaceId: workspaceIdProp
+}) {
+  const ctx = usePlanMagnetContextSafe();
+  const workspaceId = workspaceIdProp ?? ctx?.workspaceId;
+  const [mode, setMode] = useState(defaultMode);
+  const [offset, setOffset] = useState(0);
+  const { data, loading, error } = useQuery(
+    LIST_WORK_ITEMS,
+    {
+      variables: {
+        workspaceId,
+        ...projectId ? { filter: { projectId } } : {},
+        pagination: { first: 200 }
+      },
+      skip: !workspaceId
+    }
+  );
+  const tasks = useMemo(() => {
+    const all = data?.planmagnetWorkItems?.items ?? [];
+    const query = search.trim().toLowerCase();
+    return all.filter((t) => {
+      if (priority !== "ALL" && t.priority !== priority) return false;
+      if (type !== "ALL" && t.type !== type) return false;
+      if (assigneeId && t.assigneeId !== assigneeId) return false;
+      if (query) {
+        const hay = [t.title, t.key, ...t.labels ?? []].join(" ").toLowerCase();
+        if (!hay.includes(query)) return false;
+      }
+      return true;
+    });
+  }, [data, priority, type, search, assigneeId]);
+  const { anchor, rangeStart, rangeEnd, days } = useMemo(() => {
+    const base = /* @__PURE__ */ new Date();
+    if (mode === "week") {
+      const a2 = addWeeks(base, offset);
+      const s2 = startOfWeek(a2, WEEK_OPTS);
+      const e2 = endOfWeek(a2, WEEK_OPTS);
+      return {
+        anchor: a2,
+        rangeStart: s2,
+        rangeEnd: e2,
+        days: eachDayOfInterval({ start: s2, end: e2 })
+      };
+    }
+    const a = addMonths(base, offset);
+    const s = startOfWeek(startOfMonth(a), WEEK_OPTS);
+    const e = endOfWeek(endOfMonth(a), WEEK_OPTS);
+    return {
+      anchor: a,
+      rangeStart: s,
+      rangeEnd: e,
+      days: eachDayOfInterval({ start: s, end: e })
+    };
+  }, [mode, offset]);
+  const { byDay, overdue, undated } = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const od = [];
+    const ud = [];
+    for (const t of tasks) {
+      const d = parseDate(t.dueDate);
+      if (!d) {
+        ud.push(t);
+        continue;
+      }
+      if (isOverdue(t.dueDate, t.status)) {
+        od.push(t);
+        continue;
+      }
+      const k = dayKey(d);
+      const arr = map.get(k);
+      if (arr) arr.push(t);
+      else map.set(k, [t]);
+    }
+    return { byDay: map, overdue: od, undated: ud };
+  }, [tasks]);
+  if (!workspaceId) {
+    return /* @__PURE__ */ jsx("div", { className: cn("p-6 text-sm text-destructive", className), children: "Timeline: no workspaceId provided (prop or PlanMagnetProvider)." });
+  }
+  if (loading && !data) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center p-12", className), children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" }) });
+  }
+  if (error && !data) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("p-6 text-sm text-destructive", className), children: [
+      "Error loading timeline: ",
+      error.message
+    ] });
+  }
+  const rangeLabel = mode === "week" ? `${format(rangeStart, "MMM d")} \u2013 ${format(rangeEnd, "MMM d")}` : format(anchor, "MMMM yyyy");
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOffset((o) => o - 1),
+            "aria-label": "Previous",
+            className: "flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-muted/50",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOffset(0),
+            className: "h-8 rounded-md border border-border px-3 text-xs font-medium text-foreground hover:bg-muted/50",
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOffset((o) => o + 1),
+            "aria-label": "Next",
+            className: "flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-muted/50",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm font-medium text-foreground", children: rangeLabel })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-md border border-border p-0.5", children: ["week", "month"].map((m) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setMode(m);
+            setOffset(0);
+          },
+          className: cn(
+            "rounded px-3 py-1 text-xs font-medium capitalize transition-colors",
+            mode === m ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: m
+        },
+        m
+      )) })
+    ] }),
+    overdue.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-1 text-xs font-semibold text-destructive", children: [
+        overdue.length,
+        " overdue"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: overdue.map((t) => /* @__PURE__ */ jsx(
+        TaskChip,
+        {
+          task: t,
+          onSelect,
+          resolveAssignee,
+          tone: "destructive"
+        },
+        t.id
+      )) })
+    ] }),
+    mode === "week" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: days.map((day) => {
+      const items = byDay.get(dayKey(day)) ?? [];
+      const today = isToday(day);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex min-h-32 flex-col rounded-lg border p-2",
+            today ? "border-primary/50 bg-primary/5" : "border-border bg-muted/20"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-baseline justify-between", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-xs font-semibold uppercase",
+                    today ? "text-primary" : "text-muted-foreground"
+                  ),
+                  children: format(day, "EEE")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-semibold",
+                    today ? "text-primary" : "text-foreground"
+                  ),
+                  children: format(day, "d")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: items.map((t) => /* @__PURE__ */ jsx(
+              TaskChip,
+              {
+                task: t,
+                onSelect,
+                resolveAssignee
+              },
+              t.id
+            )) })
+          ]
+        },
+        dayKey(day)
+      );
+    }) }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-1", children: [
+      ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-1 pb-1 text-center text-[10px] font-semibold uppercase text-muted-foreground",
+          children: d
+        },
+        d
+      )),
+      days.map((day) => {
+        const items = byDay.get(dayKey(day)) ?? [];
+        const today = isToday(day);
+        const inMonth = isSameMonth(day, anchor);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-h-20 flex-col gap-1 rounded-md border p-1",
+              today ? "border-primary/50 bg-primary/5" : "border-border/60 bg-muted/10",
+              !inMonth && "opacity-40"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[10px] font-semibold",
+                    today ? "text-primary" : "text-muted-foreground"
+                  ),
+                  children: format(day, "d")
+                }
+              ),
+              items.slice(0, 3).map((t) => /* @__PURE__ */ jsx(
+                TaskChip,
+                {
+                  task: t,
+                  onSelect,
+                  resolveAssignee,
+                  compact: true
+                },
+                t.id
+              )),
+              items.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+                "+",
+                items.length - 3,
+                " more"
+              ] })
+            ]
+          },
+          dayKey(day)
+        );
+      })
+    ] }),
+    undated.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-1 text-xs font-semibold text-muted-foreground", children: [
+        "No due date (",
+        undated.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: undated.map((t) => /* @__PURE__ */ jsx(
+        TaskChip,
+        {
+          task: t,
+          onSelect,
+          resolveAssignee
+        },
+        t.id
+      )) })
+    ] })
+  ] });
+}
+function TaskChip({
+  task,
+  onSelect,
+  resolveAssignee,
+  tone,
+  compact
+}) {
+  const resolved = task.assigneeId ? resolveAssignee?.(task.assigneeId) : null;
+  const interactive = Boolean(onSelect);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: !interactive,
+      onClick: interactive ? () => onSelect?.(task.id) : void 0,
+      title: task.title,
+      className: cn(
+        "flex w-full items-center gap-1.5 rounded-md border px-1.5 py-1 text-left transition-colors",
+        tone === "destructive" ? "border-destructive/40 bg-card hover:bg-destructive/5" : "border-border bg-card hover:border-primary/50",
+        interactive ? "cursor-pointer" : "cursor-default"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(PriorityIndicator, { priority: task.priority }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] font-medium text-foreground", children: task.title }),
+        !compact && /* @__PURE__ */ jsx(Avatar, { id: task.assigneeId, name: resolved?.name, size: "sm" })
+      ]
+    }
+  );
+}
+var VIEW_META = {
+  board: { label: "Board", icon: LayoutGrid },
+  list: { label: "List", icon: List },
+  timeline: { label: "Timeline", icon: CalendarRange }
+};
+var SELECT_CLASS = "h-8 rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground capitalize transition-colors hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function TaskToolbar({
+  view,
+  onViewChange,
+  views = ["board", "list", "timeline"],
+  search,
+  onSearchChange,
+  priority,
+  onPriorityChange,
+  type,
+  onTypeChange,
+  onNewTask,
+  canCreate,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-3 border-b border-border pb-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-center gap-1",
+            role: "tablist",
+            "aria-label": "Task views",
+            children: views.map((v) => {
+              const meta = VIEW_META[v];
+              const Icon = meta.icon;
+              const active = v === view;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": active,
+                  onClick: () => onViewChange(v),
+                  className: cn(
+                    "relative flex items-center gap-1.5 rounded-t-md px-2.5 py-1.5 text-sm font-medium transition-colors",
+                    active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", "aria-hidden": "true" }),
+                    meta.label,
+                    active && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-1 -bottom-[9px] h-0.5 rounded-full bg-primary" })
+                  ]
+                },
+                v
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Search,
+              {
+                className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground",
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "search",
+                value: search,
+                onChange: (e) => onSearchChange(e.target.value),
+                placeholder: "Search tasks\u2026",
+                "aria-label": "Search tasks",
+                className: "h-8 w-40 rounded-md border border-border bg-background pl-7 pr-2 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: priority,
+              onChange: (e) => onPriorityChange(e.target.value),
+              "aria-label": "Filter by priority",
+              className: SELECT_CLASS,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "ALL", children: "All priorities" }),
+                TASK_PRIORITIES.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: enumLabel(p) }, p))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: type,
+              onChange: (e) => onTypeChange(e.target.value),
+              "aria-label": "Filter by type",
+              className: SELECT_CLASS,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "ALL", children: "All types" }),
+                TASK_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: enumLabel(t) }, t))
+              ]
+            }
+          ),
+          canCreate && onNewTask && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onNewTask,
+              className: "flex h-8 items-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" }),
+                "New task"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 var fieldClass2 = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring";
 var labelClass2 = "text-xs font-medium uppercase tracking-wide text-muted-foreground";
-var priorityVariant2 = {
+var priorityVariant = {
   NONE: "muted",
   LOW: "muted",
   MEDIUM: "secondary",
@@ -1412,7 +2094,7 @@ function TaskDetailCore({
     !editing ? /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
       !hidden.has("type") && /* @__PURE__ */ jsx(Field, { label: "Type", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: enumLabel(item.type) }) }),
       !hidden.has("status") && /* @__PURE__ */ jsx(Field, { label: "Status", children: /* @__PURE__ */ jsx("span", { className: "capitalize text-foreground", children: enumLabel(item.status) }) }),
-      !hidden.has("priority") && /* @__PURE__ */ jsx(Field, { label: "Priority", children: /* @__PURE__ */ jsx(Badge, { variant: priorityVariant2[item.priority], children: enumLabel(item.priority) }) }),
+      !hidden.has("priority") && /* @__PURE__ */ jsx(Field, { label: "Priority", children: /* @__PURE__ */ jsx(Badge, { variant: priorityVariant[item.priority], children: enumLabel(item.priority) }) }),
       !hidden.has("assignee") && /* @__PURE__ */ jsx(Field, { label: "Assignee", children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.assigneeId ?? "Unassigned" }) }),
       !hidden.has("dueDate") && /* @__PURE__ */ jsx(Field, { label: "Due date", children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.dueDate ?? "\u2014" }) }),
       !hidden.has("storyPoints") && /* @__PURE__ */ jsx(Field, { label: "Story points", children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.storyPoints ?? 0 }) }),
@@ -1622,7 +2304,9 @@ function TasksPageCore({
   columns,
   readonly,
   hiddenFields,
-  hideFilters,
+  views,
+  defaultView = "board",
+  resolveAssignee,
   header,
   onTaskSaved,
   createSurface = "modal",
@@ -1632,6 +2316,10 @@ function TasksPageCore({
   const ctx = usePlanMagnetContextSafe();
   const workspaceId = workspaceIdProp ?? ctx?.workspaceId;
   const client = useApolloClient();
+  const [view, setView] = useState(defaultView);
+  const [search, setSearch] = useState("");
+  const [priority, setPriority] = useState("ALL");
+  const [type, setType] = useState("ALL");
   const [creating, setCreating] = useState(false);
   const [selectedId, setSelectedId] = useState(null);
   const refetchBoard = useCallback(() => {
@@ -1656,6 +2344,7 @@ function TasksPageCore({
   const handleTaskClick = useCallback((task) => {
     setSelectedId(task.id);
   }, []);
+  const handleSelect = useCallback((id) => setSelectedId(id), []);
   if (!workspaceId) {
     return /* @__PURE__ */ jsx("div", { className: cn("p-6 text-sm text-destructive", className), children: "TasksPage: no workspaceId provided (prop or PlanMagnetProvider)." });
   }
@@ -1681,34 +2370,69 @@ function TasksPageCore({
       onUpdated: handleUpdated
     }
   ) : null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    (header || canCreate) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-6 pt-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: typeof header === "string" ? /* @__PURE__ */ jsx("h1", { className: "truncate text-2xl font-semibold text-foreground", children: header }) : header }),
-      canCreate && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setCreating(true),
-          className: "shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-          children: "New task"
-        }
-      )
-    ] }),
-    showInlineCreate && /* @__PURE__ */ jsx("div", { className: "px-6", children: createForm }),
+  const listPriority = priority === "ALL" ? void 0 : priority;
+  const listType = type === "ALL" ? void 0 : type;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 p-6", className), children: [
+    header && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: typeof header === "string" ? /* @__PURE__ */ jsx("h1", { className: "truncate text-2xl font-semibold text-foreground", children: header }) : header }),
     /* @__PURE__ */ jsx(
+      TaskToolbar,
+      {
+        view,
+        onViewChange: setView,
+        views,
+        search,
+        onSearchChange: setSearch,
+        priority,
+        onPriorityChange: setPriority,
+        type,
+        onTypeChange: setType,
+        onNewTask: () => setCreating(true),
+        canCreate
+      }
+    ),
+    showInlineCreate && /* @__PURE__ */ jsx("div", { children: createForm }),
+    view === "board" && /* @__PURE__ */ jsx(
       TaskBoardCore,
       {
         workspaceId,
         projectId: boardProjectId,
         columns,
         readonly,
-        hideHeader: Boolean(header),
-        hideFilters,
+        hideHeader: true,
+        priority,
+        type,
+        search,
         hiddenFields,
+        resolveAssignee,
         onTaskClick: handleTaskClick
       }
     ),
-    showInlineDetail && /* @__PURE__ */ jsx("div", { className: "px-6 pb-6", children: detailView }),
+    view === "list" && /* @__PURE__ */ jsx(
+      TaskListCore,
+      {
+        workspaceId,
+        projectId: boardProjectId,
+        priority: listPriority,
+        type: listType,
+        search: search || void 0,
+        hideHeader: true,
+        resolveAssignee,
+        onSelect: handleSelect
+      }
+    ),
+    view === "timeline" && /* @__PURE__ */ jsx(
+      TaskTimelineCore,
+      {
+        workspaceId,
+        projectId: boardProjectId,
+        priority,
+        type,
+        search,
+        resolveAssignee,
+        onSelect: handleSelect
+      }
+    ),
+    showInlineDetail && /* @__PURE__ */ jsx("div", { className: "pb-6", children: detailView }),
     createSurface === "modal" && /* @__PURE__ */ jsx(
       Modal,
       {
@@ -1759,6 +2483,6 @@ function TasksPage({
   );
 }
 
-export { Badge, CREATE_WORK_ITEM, CreateTask, CreateTaskCore, DEFAULT_BOARD_COLUMNS, Drawer, GET_PROJECTS, GET_WORK_ITEM, LIST_WORK_ITEMS, MOVE_WORK_ITEM, Modal, PROJECT_SUMMARY_FIELDS, PlanMagnetProvider, TASK_PRIORITIES, TASK_STATUSES, TASK_TYPES, TaskBoard, TaskBoardCore, TaskDetail, TaskDetailCore, TaskList, TaskListCore, TasksPage, TasksPageCore, UPDATE_WORK_ITEM, WORK_ITEM_FIELDS, WORK_ITEM_SUMMARY_FIELDS, badgeVariants, cn, config, createPlanMagnetClient, enumLabel, getGraphQLEndpoint, getPlanMagnetClient, getPlanMagnetClientSafe, getPlanMagnetConfig, isPlanMagnetClientReady, resetPlanMagnetClient, resetPlanMagnetConfig, setPlanMagnetClient, setPlanMagnetConfig, usePlanMagnetContext, usePlanMagnetContextSafe, validateTrustedOrigin, waitForPlanMagnetClient };
+export { Avatar, Badge, CREATE_WORK_ITEM, CreateTask, CreateTaskCore, DEFAULT_BOARD_COLUMNS, Drawer, GET_PROJECTS, GET_WORK_ITEM, LIST_WORK_ITEMS, MOVE_WORK_ITEM, Modal, PRIORITY_META, PROJECT_SUMMARY_FIELDS, PlanMagnetProvider, PriorityIndicator, STATUS_META, StatusIcon, StatusPill, TASK_PRIORITIES, TASK_STATUSES, TASK_TYPES, TaskBoard, TaskBoardCore, TaskCard, TaskDetail, TaskDetailCore, TaskList, TaskListCore, TaskTimelineCore, TaskToolbar, TasksPage, TasksPageCore, TypeBadge, UPDATE_WORK_ITEM, WORK_ITEM_FIELDS, WORK_ITEM_SUMMARY_FIELDS, badgeVariants, cn, config, createPlanMagnetClient, enumLabel, getGraphQLEndpoint, getPlanMagnetClient, getPlanMagnetClientSafe, getPlanMagnetConfig, isPlanMagnetClientReady, resetPlanMagnetClient, resetPlanMagnetConfig, setPlanMagnetClient, setPlanMagnetConfig, usePlanMagnetContext, usePlanMagnetContextSafe, validateTrustedOrigin, waitForPlanMagnetClient };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map