@echothink-ui/todo 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# @echothink-ui/todo
+
+Todo package for EchoThink app-domain websites.
+
+This package is part of the EchoThink-UI app-domain library. It is designed for normal website app domains rendered inside EchoThink Studio's Chromium shell, not for implementing the studio browser chrome itself.

package/dist/components/KanbanBoard.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { KanbanColumnModel } from "../types";
+export interface KanbanBoardProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: KanbanColumnModel[];
+    onCardMove?: (cardId: string, fromColumn: string, toColumn: string, index: number) => void;
+    onAddCard?: (columnId: string) => void;
+}
+export declare function KanbanBoard({ columns, onCardMove, onAddCard, className, ...props }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/KanbanColumn.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { KanbanColumnModel } from "../types";
+export interface KanbanColumnProps extends React.HTMLAttributes<HTMLDivElement> {
+    column: KanbanColumnModel;
+    children?: React.ReactNode;
+    onAddCard?: (columnId: string) => void;
+}
+export declare function KanbanColumn({ column, children, onAddCard, className, "aria-label": ariaLabel, ...props }: KanbanColumnProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TaskCard.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { KanbanCard } from "../types";
+export interface TaskCardProps extends React.HTMLAttributes<HTMLElement> {
+    card: KanbanCard;
+}
+export declare function TaskCard({ card, className, ...props }: TaskCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TaskDependencyList.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { TaskDependency } from "../types";
+export interface TaskDependencyListProps extends React.HTMLAttributes<HTMLDivElement> {
+    dependencies?: TaskDependency[];
+}
+export declare function TaskDependencyList({ dependencies, className, ...props }: TaskDependencyListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TaskTable.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { TaskRowActions, TaskTableTask } from "../types";
+export interface TaskTableProps extends React.HTMLAttributes<HTMLDivElement> {
+    tasks?: TaskTableTask[];
+    density?: "compact" | "default" | "comfortable";
+    selectable?: boolean;
+    rowActions?: TaskRowActions;
+}
+export declare function TaskTable({ tasks, density, selectable, rowActions, className, ...props }: TaskTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TaskTimeline.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { TaskTimelineEvent } from "../types";
+export interface TaskTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    events?: TaskTimelineEvent[];
+}
+export declare function TaskTimeline({ events, className, ...props }: TaskTimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TodoItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { TodoTaskItem } from "../types";
+export interface TodoItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+    item: TodoTaskItem;
+    onToggle?: (id: string) => void;
+}
+export declare function TodoItem({ item, onToggle, className, ...props }: TodoItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TodoList.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { TodoTaskItem } from "../types";
+export interface TodoListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> {
+    items?: TodoTaskItem[];
+    onToggle?: (id: string) => void;
+    onAdd?: (label: string) => void;
+}
+export declare function TodoList({ items, onToggle, onAdd, className, ...props }: TodoListProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs

@@ -0,0 +1,590 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  KanbanBoard: () => KanbanBoard,
+  KanbanColumn: () => KanbanColumn,
+  TaskCard: () => TaskCard,
+  TaskDependencyList: () => TaskDependencyList,
+  TaskTable: () => TaskTable,
+  TaskTimeline: () => TaskTimeline,
+  TodoComponentNames: () => TodoComponentNames,
+  TodoItem: () => TodoItem,
+  TodoList: () => TodoList
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/TodoList.tsx
+var React = __toESM(require("react"), 1);
+var import_core2 = require("@echothink-ui/core");
+var import_icons = require("@echothink-ui/icons");
+
+// src/components/TodoItem.tsx
+var import_core = require("@echothink-ui/core");
+
+// src/utils.ts
+function formatDateTime(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(date);
+}
+function priorityLabel(priority) {
+  return priority ?? "normal";
+}
+function prioritySeverity(priority) {
+  const normalized = priority?.toLowerCase();
+  if (normalized === "urgent" || normalized === "critical" || normalized === "high")
+    return "danger";
+  if (normalized === "medium") return "warning";
+  if (normalized === "low") return "info";
+  return "neutral";
+}
+
+// src/components/TodoItem.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function validDateTimeAttribute(value) {
+  if (!value) return void 0;
+  return Number.isNaN(new Date(value).getTime()) ? void 0 : value;
+}
+function TodoItem({ item, onToggle, className, ...props }) {
+  const hasMeta = Boolean(item.assignee || item.priority || item.dueAt);
+  const dueDateTime = validDateTimeAttribute(item.dueAt);
+  const itemClassName = [
+    "eth-todo-item",
+    hasMeta ? "eth-todo-item--has-meta" : "",
+    item.done ? "eth-todo-item--done" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...props,
+      className: itemClassName,
+      "data-priority": item.priority,
+      "data-state": item.done ? "done" : "open",
+      "data-eth-component": "TodoItem",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "eth-todo-item__content eth-todo-item__primary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_core.Checkbox,
+          {
+            checked: item.done,
+            className: "eth-todo-item__checkbox",
+            label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "eth-todo-item__label", children: item.label }),
+            onChange: () => onToggle?.(item.id)
+          }
+        ) }),
+        hasMeta ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "eth-todo-item__meta", role: "group", "aria-label": "Task details", children: [
+          item.priority ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Badge, { className: "eth-todo-item__tag", severity: prioritySeverity(item.priority), children: priorityLabel(item.priority) }) : null,
+          item.assignee ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Tag, { className: "eth-todo-item__tag", children: item.assignee }) : null,
+          item.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "eth-todo-item__due", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "eth-todo-item__due-label", children: "Due" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime: dueDateTime, children: formatDateTime(item.dueAt) })
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/TodoList.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function TodoList({ items = [], onToggle, onAdd, className, ...props }) {
+  const [label, setLabel] = React.useState("");
+  const completedCount = items.filter((item) => item.done).length;
+  const openCount = items.length - completedCount;
+  const summary = items.length ? `${openCount} open / ${completedCount} done` : "No tasks yet";
+  const submit = (event) => {
+    event.preventDefault();
+    if (!label.trim() || !onAdd) return;
+    onAdd(label.trim());
+    setLabel("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_core2.Panel,
+    {
+      ...props,
+      className: `eth-todo-list ${className ?? ""}`,
+      title: "To-do",
+      subtitle: summary,
+      "data-eth-component": "TodoList",
+      children: [
+        items.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "eth-todo-list__items",
+            role: "list",
+            "aria-label": "Tasks",
+            children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TodoItem, { item, onToggle, role: "listitem" }, item.id))
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "eth-todo-list__empty", children: "No tasks have been added." }),
+        onAdd ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { className: "eth-todo-list__add", "aria-label": "Add task", onSubmit: submit, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core2.TextInput,
+            {
+              value: label,
+              labelText: "New task",
+              hideLabel: true,
+              placeholder: "Add a task",
+              onChange: (event) => setLabel(event.currentTarget.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Button, { type: "submit", icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons.PlusIcon, {}), disabled: !label.trim(), children: "Add" })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/KanbanBoard.tsx
+var React3 = __toESM(require("react"), 1);
+
+// src/components/KanbanColumn.tsx
+var React2 = __toESM(require("react"), 1);
+var import_core3 = require("@echothink-ui/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function KanbanColumn({
+  column,
+  children,
+  onAddCard,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const itemCount = column.items.length;
+  const taskLabel = `${itemCount} ${itemCount === 1 ? "task" : "tasks"}`;
+  const wipLimit = column.wipLimit;
+  const hasWipLimit = typeof wipLimit === "number";
+  const overLimit = hasWipLimit ? itemCount > wipLimit : false;
+  const atLimit = hasWipLimit ? itemCount === wipLimit : false;
+  const hasRenderedChildren = React2.Children.count(children) > 0;
+  const titleId = React2.useId();
+  const { "aria-labelledby": ariaLabelledBy, ...sectionProps } = props;
+  let wipPercent = 0;
+  let wipStatusLabel = "";
+  let wipSeverity = "neutral";
+  if (hasWipLimit) {
+    wipPercent = wipLimit > 0 ? Math.min(100, itemCount / wipLimit * 100) : itemCount > 0 ? 100 : 0;
+    const remaining = wipLimit - itemCount;
+    wipStatusLabel = overLimit ? `${Math.abs(remaining)} over limit` : remaining === 0 ? "At limit" : `${remaining} ${remaining === 1 ? "slot" : "slots"} open`;
+    if (overLimit) wipSeverity = "danger";
+    else if (atLimit) wipSeverity = "warning";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "section",
+    {
+      ...sectionProps,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? titleId,
+      className: `eth-kanban-column ${overLimit ? "eth-kanban-column--over-limit" : ""} ${className ?? ""}`,
+      "data-eth-component": "KanbanColumn",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "eth-kanban-column__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "eth-kanban-column__header-main", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "eth-kanban-column__heading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { id: titleId, children: column.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "eth-kanban-column__count", children: taskLabel })
+            ] }),
+            onAddCard ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "eth-kanban-column__actions", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_core3.IconButton,
+              {
+                className: "eth-kanban-column__add",
+                intent: "ghost",
+                density: "compact",
+                label: `Add task to ${column.title}`,
+                icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "eth-kanban-column__add-glyph", "aria-hidden": "true", children: "+" }),
+                onClick: () => onAddCard(column.id)
+              }
+            ) }) : null
+          ] }),
+          hasWipLimit ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "eth-kanban-column__metrics", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: "eth-kanban-column__limit",
+              "aria-label": `Work in progress ${itemCount} of ${wipLimit}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "eth-kanban-column__limit-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Badge, { severity: wipSeverity, children: [
+                    "WIP ",
+                    itemCount,
+                    "/",
+                    wipLimit
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "eth-kanban-column__limit-note", children: wipStatusLabel })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "eth-kanban-column__meter", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { inlineSize: `${wipPercent}%` } }) })
+              ]
+            }
+          ) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "eth-kanban-column__body", role: "list", "aria-label": `${column.title} tasks`, children: hasRenderedChildren ? children : itemCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "eth-kanban-column__empty", children: "No tasks in this column" }) : null })
+      ]
+    }
+  );
+}
+
+// src/components/TaskCard.tsx
+var import_core4 = require("@echothink-ui/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var operationalStatuses = /* @__PURE__ */ new Set([
+  "queued",
+  "running",
+  "paused",
+  "blocked",
+  "failed",
+  "succeeded",
+  "warning",
+  "stale",
+  "synced",
+  "pending-approval",
+  "approval-required",
+  "in-progress",
+  "not-started",
+  "completed",
+  "active",
+  "inactive"
+]);
+function isOperationalStatus(status) {
+  return Boolean(status && operationalStatuses.has(status));
+}
+function statusLabel(status) {
+  return status.replace(/-/g, " ");
+}
+function TaskCard({ card, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_core4.Surface,
+    {
+      ...props,
+      className: `eth-todo-task-card ${className ?? ""}`,
+      "data-priority": card.priority,
+      "data-status": card.status,
+      "data-eth-component": "TaskCard",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "eth-todo-task-card__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: card.title }),
+          card.priority ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Badge, { severity: prioritySeverity(card.priority), children: priorityLabel(card.priority) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "eth-todo-task-card__meta", children: [
+          card.assignee ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Tag, { children: card.assignee }) : null,
+          isOperationalStatus(card.status) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.StatusDot, { status: card.status, label: statusLabel(card.status) }) : card.status ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Tag, { children: card.status }) : null,
+          card.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("time", { className: "eth-todo-task-card__due", dateTime: card.dueAt, children: formatDateTime(card.dueAt) }) : null
+        ] }),
+        card.labels?.length ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "eth-todo-task-card__labels", children: card.labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Tag, { children: label }, label)) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/KanbanBoard.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function KanbanBoard({
+  columns: columns2 = [],
+  onCardMove,
+  onAddCard,
+  className,
+  ...props
+}) {
+  const [announcement, setAnnouncement] = React3.useState("");
+  const [lifted, setLifted] = React3.useState(null);
+  const findCard = (cardId) => {
+    for (const column of columns2) {
+      const index = column.items.findIndex((item) => item.id === cardId);
+      if (index >= 0) return { column, index, card: column.items[index] };
+    }
+    return void 0;
+  };
+  const announce = (message) => setAnnouncement(message);
+  const moveLifted = (direction) => {
+    if (!lifted) return;
+    const currentColumnIndex = columns2.findIndex((column) => column.id === lifted.toColumn);
+    if (currentColumnIndex < 0) return;
+    if (direction === "left" || direction === "right") {
+      const offset = direction === "left" ? -1 : 1;
+      const nextColumn = columns2[currentColumnIndex + offset];
+      if (!nextColumn) return;
+      const nextIndex2 = Math.min(lifted.index, Math.max(0, nextColumn.items.length));
+      setLifted({ ...lifted, toColumn: nextColumn.id, index: nextIndex2 });
+      announce(`Moved ${lifted.cardId} to ${nextColumn.title}, position ${nextIndex2 + 1}`);
+      return;
+    }
+    const currentColumn = columns2[currentColumnIndex];
+    const maxIndex = Math.max(0, currentColumn.items.length - 1);
+    const nextIndex = direction === "up" ? Math.max(0, lifted.index - 1) : Math.min(maxIndex, lifted.index + 1);
+    setLifted({ ...lifted, index: nextIndex });
+    announce(`Moved ${lifted.cardId} to position ${nextIndex + 1}`);
+  };
+  const handleCardKeyDown = (event, card, column, index) => {
+    if (event.key === " ") {
+      event.preventDefault();
+      setLifted({ cardId: card.id, fromColumn: column.id, toColumn: column.id, index });
+      announce(`Lifted ${card.title}`);
+      return;
+    }
+    if (!lifted) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      moveLifted("left");
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      moveLifted("right");
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveLifted("up");
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveLifted("down");
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onCardMove?.(lifted.cardId, lifted.fromColumn, lifted.toColumn, lifted.index);
+      announce(`Dropped ${lifted.cardId}`);
+      setLifted(null);
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      announce(`Cancelled move for ${lifted.cardId}`);
+      setLifted(null);
+    }
+  };
+  const handleDrop = (event, toColumn, index) => {
+    event.preventDefault();
+    const cardId = event.dataTransfer.getData("text/plain");
+    const source = findCard(cardId);
+    if (!source) return;
+    onCardMove?.(cardId, source.column.id, toColumn.id, index);
+    announce(`Moved ${source.card.title} to ${toColumn.title}`);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ...props,
+      className: `eth-kanban-board ${className ?? ""}`,
+      "data-eth-component": "KanbanBoard",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "eth-kanban-board__columns", role: "list", "aria-label": "Kanban columns", children: columns2.map((column) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          KanbanColumn,
+          {
+            column,
+            role: "listitem",
+            onAddCard,
+            onDragOver: (event) => event.preventDefault(),
+            onDrop: (event) => handleDrop(event, column, column.items.length),
+            children: column.items.map((card, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: `eth-kanban-card-shell ${lifted?.cardId === card.id ? "eth-kanban-card-shell--lifted" : ""}`,
+                draggable: true,
+                tabIndex: 0,
+                role: "listitem",
+                "aria-label": `${card.title}, ${column.title}, position ${index + 1} of ${column.items.length}`,
+                "aria-grabbed": lifted?.cardId === card.id,
+                "aria-roledescription": "Draggable task card",
+                "aria-keyshortcuts": "Space ArrowLeft ArrowRight ArrowUp ArrowDown Enter Escape",
+                onDragStart: (event) => {
+                  event.dataTransfer.setData("text/plain", card.id);
+                  event.dataTransfer.effectAllowed = "move";
+                },
+                onDragOver: (event) => event.preventDefault(),
+                onDrop: (event) => handleDrop(event, column, index),
+                onKeyDown: (event) => handleCardKeyDown(event, card, column, index),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TaskCard, { card })
+              },
+              card.id
+            ))
+          },
+          column.id
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "eth-kanban-board__live", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+      ]
+    }
+  );
+}
+
+// src/components/TaskTable.tsx
+var import_core5 = require("@echothink-ui/core");
+var import_data = require("@echothink-ui/data");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var columns = [
+  {
+    key: "title",
+    header: "Task",
+    render: (task) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "eth-todo-task-table__title", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: task.title }),
+      task.labels?.map((label) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.Tag, { children: label }, label))
+    ] })
+  },
+  {
+    key: "status",
+    header: "Status",
+    render: (task) => task.status ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.StatusDot, { status: task.status, label: task.status }) : null
+  },
+  { key: "assignee", header: "Assignee" },
+  {
+    key: "priority",
+    header: "Priority",
+    render: (task) => task.priority ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.Badge, { children: task.priority }) : null
+  },
+  {
+    key: "dueAt",
+    header: "Due",
+    render: (task) => task.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("time", { dateTime: task.dueAt, children: formatDateTime(task.dueAt) }) : null
+  }
+];
+function TaskTable({
+  tasks = [],
+  density = "default",
+  selectable,
+  rowActions,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      ...props,
+      className: `eth-todo-task-table ${className ?? ""}`,
+      "data-eth-component": "TaskTable",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_data.DataTable,
+        {
+          rows: tasks,
+          columns,
+          rowKey: "id",
+          density,
+          selectable,
+          rowActions
+        }
+      )
+    }
+  );
+}
+
+// src/components/TaskDependencyList.tsx
+var import_core6 = require("@echothink-ui/core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TaskDependencyList({
+  dependencies = [],
+  className,
+  ...props
+}) {
+  const groups = {
+    "blocked-by": dependencies.filter((dependency) => dependency.relation === "blocked-by"),
+    blocks: dependencies.filter((dependency) => dependency.relation === "blocks")
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_core6.Panel,
+    {
+      ...props,
+      className: `eth-todo-dependencies ${className ?? ""}`,
+      title: "Dependencies",
+      "data-eth-component": "TaskDependencyList",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DependencyGroup, { title: "Blocked by", dependencies: groups["blocked-by"] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DependencyGroup, { title: "Blocks", dependencies: groups.blocks })
+      ]
+    }
+  );
+}
+function DependencyGroup({
+  title,
+  dependencies
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "eth-todo-dependencies__group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: title }),
+    dependencies.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: dependencies.map((dependency) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: dependency.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Badge, { children: dependency.status })
+    ] }, dependency.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "None" })
+  ] });
+}
+
+// src/components/TaskTimeline.tsx
+var React4 = __toESM(require("react"), 1);
+var import_core7 = require("@echothink-ui/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TaskTimeline({ events = [], className, ...props }) {
+  const sortedEvents = React4.useMemo(
+    () => [...events].sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    ),
+    [events]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_core7.Panel,
+    {
+      ...props,
+      className: `eth-todo-timeline ${className ?? ""}`,
+      title: "Task timeline",
+      "data-eth-component": "TaskTimeline",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { className: "eth-todo-timeline__events", children: sortedEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "eth-todo-timeline__event", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("time", { dateTime: event.timestamp, children: formatDateTime(event.timestamp) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Tag, { children: event.kind }),
+          event.actor ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: event.actor }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: event.summary })
+        ] })
+      ] }, event.id)) })
+    }
+  );
+}
+
+// src/index.tsx
+var TodoComponentNames = [
+  "TodoList",
+  "TodoItem",
+  "KanbanBoard",
+  "KanbanColumn",
+  "TaskCard",
+  "TaskTable",
+  "TaskDependencyList",
+  "TaskTimeline"
+];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KanbanBoard,
+  KanbanColumn,
+  TaskCard,
+  TaskDependencyList,
+  TaskTable,
+  TaskTimeline,
+  TodoComponentNames,
+  TodoItem,
+  TodoList
+});
+//# sourceMappingURL=index.cjs.map