@raydenui/ui 0.9.7 → 0.10.0

package/dist/blocks/SiteFooterBlock.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { cn } from "../utils/cn.js";
+import { Badge } from "../components/Badge/index.js";
+import { Icon } from "../components/Icon/index.js";
+/* ─── Appearance ───────────────────────────────────────────────────────── */
+const LINK_CLASS = "inline-flex max-w-full flex-wrap items-center gap-x-2 gap-y-1 rounded text-sm break-words text-grey-600 no-underline hover:text-grey-900 hover:underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+/* Two columns below about 420px leaves roughly 130px per link, which forces long
+   compound words to break mid-word. Start at one column and add the second only
+   once the container can hold a full word. */
+const GROUP_COLUMN_CLASS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 @min-[420px]:grid-cols-2",
+    3: "grid-cols-1 @min-[420px]:grid-cols-2 @min-[600px]:grid-cols-3",
+    4: "grid-cols-1 @min-[420px]:grid-cols-2 @min-[600px]:grid-cols-3 @min-[1136px]:grid-cols-4",
+    5: "grid-cols-1 @min-[420px]:grid-cols-2 @min-[600px]:grid-cols-3 @min-[1136px]:grid-cols-5",
+};
+function FooterLinkAnchor({ link, className }) {
+    const externalAttributes = link.external
+        ? { target: "_blank", rel: "noreferrer" }
+        : {};
+    return (_jsxs("a", { href: link.href, onClick: link.onClick, className: cn(LINK_CLASS, className), ...externalAttributes, children: [_jsx("span", { className: "min-w-0", children: link.label }), link.badge && (_jsx(Badge, { color: "orange", type: "accent", size: "sm", children: link.badge })), link.external && _jsx("span", { className: "sr-only", children: "(opens in a new tab)" })] }));
+}
+/**
+ * A native select is used deliberately. It keeps the control usable at 320px,
+ * gives the platform picker on touch devices, and follows the semantic
+ * `--color-surface` role so a consumer theme reaches it.
+ */
+function LocaleSelect({ control }) {
+    const selectId = useId();
+    const hintId = useId();
+    return (_jsxs("div", { className: "flex w-full min-w-0 max-w-[240px] flex-col gap-1.5", children: [_jsx("label", { htmlFor: selectId, className: "text-sm font-medium break-words text-grey-700", children: control.label }), _jsxs("div", { className: "relative w-full min-w-0", children: [_jsx("select", { id: selectId, value: control.value, "aria-describedby": control.hint ? hintId : undefined, onChange: (event) => control.onChange(event.target.value), className: "h-11 w-full min-w-0 cursor-pointer appearance-none truncate rounded-md border border-grey-500 bg-surface py-2 pr-10 pl-3 text-sm text-grey-900 transition-colors hover:border-grey-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: control.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx(Icon, { name: "chevron-down", size: "md", "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-grey-500" })] }), control.hint && (_jsx("p", { id: hintId, className: "text-xs break-words text-grey-500", children: control.hint }))] }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Site Footer — browse grouped site links, legal information, social
+ * destinations, and locale controls.
+ *
+ * Only a default state is meaningful: the footer presents destinations the
+ * consuming application already knows. There is nothing to load, submit, or
+ * confirm, so no loading, error, or success state is offered. Every section is
+ * optional; omitting one removes it rather than rendering an empty shell. A
+ * locale control requires an `onChange` handler, so the footer can never render
+ * a switcher that does nothing.
+ */
+export const SiteFooterBlock = forwardRef(({ label = "Site footer", brand, groups, groupHeadingLevel = "h2", social, socialLabel = "Social media", copyright, legalLinks, legalLabel = "Legal", localeControls, children, className, ...rest }, ref) => {
+    const groupIdPrefix = useId();
+    const GroupHeading = groupHeadingLevel;
+    const groupList = groups ?? [];
+    const socialList = social ?? [];
+    const localeList = localeControls ?? [];
+    const legalList = legalLinks ?? [];
+    const hasTop = Boolean(brand) || groupList.length > 0;
+    const hasBottom = Boolean(copyright) || legalList.length > 0 || socialList.length > 0 || localeList.length > 0;
+    const brandBody = brand && (_jsx(_Fragment, { children: brand.logo ??
+            (brand.name && (_jsx("span", { className: "text-body-lg font-semibold break-words text-grey-900", children: brand.name }))) }));
+    return (_jsx("footer", { ref: ref, "aria-label": label, className: cn("@container relative w-full border-t border-surface-border-strong bg-surface-muted", className), ...rest, children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1136px] flex-col gap-10 px-4 py-10 @min-[600px]:px-8 @min-[600px]:py-14", children: [hasTop && (_jsxs("div", { className: "flex min-w-0 flex-col gap-10 @min-[1136px]:flex-row @min-[1136px]:gap-16", children: [brand && (_jsxs("div", { className: "flex min-w-0 flex-col gap-3 @min-[1136px]:max-w-[300px] @min-[1136px]:shrink-0", children: [brand.href ? (_jsx("a", { href: brand.href, className: "inline-flex max-w-full items-center gap-2 rounded no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: brandBody })) : (_jsx("div", { className: "inline-flex max-w-full items-center gap-2", children: brandBody })), brand.description && (_jsx("p", { className: "max-w-[46ch] text-sm break-words text-grey-600", children: brand.description }))] })), groupList.length > 0 && (_jsx("div", { className: cn("grid min-w-0 gap-x-6 gap-y-8 @min-[1136px]:flex-1", GROUP_COLUMN_CLASS[Math.min(Math.max(groupList.length, 1), 5)]), children: groupList.map((group) => {
+                                const headingId = `${groupIdPrefix}-${group.id}`;
+                                return (_jsxs("nav", { "aria-labelledby": headingId, className: "flex min-w-0 flex-col gap-3", children: [_jsx(GroupHeading, { id: headingId, className: "text-sm font-semibold break-words text-grey-900", children: group.title }), _jsx("ul", { className: "m-0 flex list-none flex-col gap-2.5 p-0", children: group.links.map((link) => (_jsx("li", { className: "min-w-0", children: _jsx(FooterLinkAnchor, { link: link }) }, link.id))) })] }, group.id));
+                            }) }))] })), localeList.length > 0 && (_jsx("div", { className: "flex min-w-0 flex-col gap-4 border-t border-surface-border pt-8 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:gap-6", children: localeList.map((control) => (_jsx(LocaleSelect, { control: control }, control.id))) })), children && _jsx("div", { className: "min-w-0", children: children }), hasBottom && (_jsxs("div", { className: "flex min-w-0 flex-col gap-5 border-t border-surface-border pt-8 @min-[600px]:flex-row @min-[600px]:flex-wrap @min-[600px]:items-center @min-[600px]:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [copyright && (_jsx("p", { className: "text-sm break-words text-grey-600", children: copyright })), legalList.length > 0 && (_jsx("nav", { "aria-label": legalLabel, className: "min-w-0", children: _jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-5 gap-y-2 p-0", children: legalList.map((link) => (_jsx("li", { className: "min-w-0", children: _jsx(FooterLinkAnchor, { link: link }) }, link.id))) }) }))] }), socialList.length > 0 && (_jsx("nav", { "aria-label": socialLabel, className: "min-w-0", children: _jsx("ul", { className: "m-0 flex list-none flex-wrap items-center gap-2 p-0", children: socialList.map((entry) => {
+                                    const isExternal = entry.external !== false;
+                                    const visual = entry.artwork ?? (entry.icon && _jsx(Icon, { name: entry.icon, size: "md", "aria-hidden": "true" }));
+                                    return (_jsx("li", { className: "min-w-0", children: _jsx("a", { href: entry.href, "aria-label": visual ? entry.label : undefined, className: cn("inline-flex min-h-11 min-w-11 max-w-full items-center justify-center gap-2 rounded-lg border border-transparent px-2 text-grey-600 no-underline transition-colors hover:border-surface-border-strong hover:bg-surface hover:text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", !visual && "text-sm font-medium break-words"), ...(isExternal ? { target: "_blank", rel: "noreferrer" } : {}), children: visual ?? _jsx("span", { className: "min-w-0", children: entry.label }) }) }, entry.id));
+                                }) }) }))] }))] }) }));
+});
+SiteFooterBlock.displayName = "SiteFooterBlock";

package/dist/blocks/TableBlock.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBlock = TableBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn.cjs");
+const Table_1 = require("../components/Table/index.cjs");
+const useTableSelection_1 = require("../components/Table/useTableSelection.cjs");
+const FormControl_1 = require("../components/FormControl/index.cjs");
+const Avatar_1 = require("../components/Avatar/index.cjs");
+const Badge_1 = require("../components/Badge/index.cjs");
+const Pagination_1 = require("../components/Pagination/index.cjs");
+// ─── Component ───────────────────────────────────────────────────────
+function TableBlock({ rows, selectedIds, onSelectionChange, onRowAction, page, totalPages, onPageChange, className, }) {
+    const rowIds = rows.map((row) => row.id);
+    const selection = (0, useTableSelection_1.useTableSelection)({ dataIds: rowIds, selectedIds, onSelectionChange });
+    // Every visible control needs somewhere to go. Pagination without a page handler is a
+    // row of buttons that silently do nothing, so it is omitted rather than rendered dead.
+    const showPagination = page != null && totalPages != null && onPageChange != null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col", className), children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, { children: [(0, jsx_runtime_1.jsx)(Table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(Table_1.TableHead, { className: "w-[287px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { checked: selection.allSelected, indeterminate: selection.someSelected, onChange: selection.toggleAll, "aria-label": "Select all rows" }), (0, jsx_runtime_1.jsx)("span", { children: "Name" })] }) }), (0, jsx_runtime_1.jsx)(Table_1.TableHead, { children: "Amount" }), (0, jsx_runtime_1.jsx)(Table_1.TableHead, { children: "Payment Type" }), (0, jsx_runtime_1.jsx)(Table_1.TableHead, { children: "Date" }), (0, jsx_runtime_1.jsx)(Table_1.TableHead, { children: "Status" }), onRowAction && ((0, jsx_runtime_1.jsx)(Table_1.TableHead, { className: "w-[67px]", children: (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Actions" }) }))] }) }), (0, jsx_runtime_1.jsx)(Table_1.TableBody, { children: rows.map((row) => ((0, jsx_runtime_1.jsxs)(Table_1.TableRow, { selected: selection.isSelected(row.id), children: [(0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { checked: selection.isSelected(row.id), onChange: () => selection.toggleRow(row.id), "aria-label": `Select ${row.name}` }), (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { type: "initials", initials: row.initials, size: "sm" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-grey-900", children: row.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-grey-500 truncate max-w-[150px]", children: row.email })] })] }) }), (0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-grey-700", children: row.amount }) }), (0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "orange", type: "accent", size: "sm", children: row.paymentType }) }), (0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-grey-700", children: [row.date, (0, jsx_runtime_1.jsx)("span", { className: "text-grey-500 mx-2", children: "|" }), row.time] }) }), (0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: row.statusColor ?? "orange", type: "accent", size: "sm", children: row.status }) }), onRowAction && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, { children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onRowAction(row.id), "aria-label": `Actions for ${row.name}`, className: "flex items-center justify-center size-8 rounded-md hover:bg-grey-50 text-grey-500", children: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "3", r: "1.5", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "13", r: "1.5", fill: "currentColor" })] }) }) }))] }, row.id))) })] }), showPagination && ((0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { totalPages: totalPages, currentPage: page, onPageChange: onPageChange }))] }));
+}

package/dist/blocks/TableBlock.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../components/Table/index.js";
+import { useTableSelection } from "../components/Table/useTableSelection.js";
+import { Checkbox } from "../components/FormControl/index.js";
+import { Avatar } from "../components/Avatar/index.js";
+import { Badge } from "../components/Badge/index.js";
+import { Pagination } from "../components/Pagination/index.js";
+// ─── Component ───────────────────────────────────────────────────────
+export function TableBlock({ rows, selectedIds, onSelectionChange, onRowAction, page, totalPages, onPageChange, className, }) {
+    const rowIds = rows.map((row) => row.id);
+    const selection = useTableSelection({ dataIds: rowIds, selectedIds, onSelectionChange });
+    // Every visible control needs somewhere to go. Pagination without a page handler is a
+    // row of buttons that silently do nothing, so it is omitted rather than rendered dead.
+    const showPagination = page != null && totalPages != null && onPageChange != null;
+    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[287px]", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Checkbox, { checked: selection.allSelected, indeterminate: selection.someSelected, onChange: selection.toggleAll, "aria-label": "Select all rows" }), _jsx("span", { children: "Name" })] }) }), _jsx(TableHead, { children: "Amount" }), _jsx(TableHead, { children: "Payment Type" }), _jsx(TableHead, { children: "Date" }), _jsx(TableHead, { children: "Status" }), onRowAction && (_jsx(TableHead, { className: "w-[67px]", children: _jsx("span", { className: "sr-only", children: "Actions" }) }))] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { selected: selection.isSelected(row.id), children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Checkbox, { checked: selection.isSelected(row.id), onChange: () => selection.toggleRow(row.id), "aria-label": `Select ${row.name}` }), _jsx(Avatar, { type: "initials", initials: row.initials, size: "sm" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium text-grey-900", children: row.name }), _jsx("span", { className: "text-xs text-grey-500 truncate max-w-[150px]", children: row.email })] })] }) }), _jsx(TableCell, { children: _jsx("span", { className: "text-sm text-grey-700", children: row.amount }) }), _jsx(TableCell, { children: _jsx(Badge, { color: "orange", type: "accent", size: "sm", children: row.paymentType }) }), _jsx(TableCell, { children: _jsxs("span", { className: "text-sm text-grey-700", children: [row.date, _jsx("span", { className: "text-grey-500 mx-2", children: "|" }), row.time] }) }), _jsx(TableCell, { children: _jsx(Badge, { color: row.statusColor ?? "orange", type: "accent", size: "sm", children: row.status }) }), onRowAction && (_jsx(TableCell, { children: _jsx("button", { type: "button", onClick: () => onRowAction(row.id), "aria-label": `Actions for ${row.name}`, className: "flex items-center justify-center size-8 rounded-md hover:bg-grey-50 text-grey-500", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "3", r: "1.5", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "13", r: "1.5", fill: "currentColor" })] }) }) }))] }, row.id))) })] }), showPagination && (_jsx(Pagination, { totalPages: totalPages, currentPage: page, onPageChange: onPageChange }))] }));
+}

package/dist/blocks/TaskListBlock.cjs

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaskListBlock = TaskListBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Alert_1 = require("../components/Alert/index.cjs");
+const Avatar_1 = require("../components/Avatar/index.cjs");
+const Button_1 = require("../components/Button/index.cjs");
+const FormControl_1 = require("../components/FormControl/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Input_1 = require("../components/Input/index.cjs");
+const Spinner_1 = require("../components/Spinner/index.cjs");
+/* ─── Date helpers ───────────────────────────────────────────────────── */
+function startOfLocalDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/** Parses `YYYY-MM-DD` in local time. `new Date("2026-09-22")` would be UTC. */
+function parseIsoDate(iso) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!match)
+        return null;
+    const [, year, month, day] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function pluralDays(count) {
+    return count === 1 ? "1 day" : `${count} days`;
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+function TaskListBlock({ title = "Tasks", description, headingLevel = "h2", tasks, onToggleComplete, onAddTask, onDeleteTask, onAssignTask, assignees, selectedIds, onSelectionChange, onBulkComplete, onBulkDelete, status = "idle", errorMessage, onRetry, addStatus = "idle", addErrorMessage, canEdit = true, readOnlyMessage = "You can follow this list but not change it. Ask the list owner for edit access.", today, locale = "en-GB", formatDueDate, emptyTitle = "No tasks yet", emptyDescription = "Add the first task to start tracking this work.", noMatchesTitle = "No tasks match these filters", noMatchesDescription = "Nothing here matches your search and filter choices. The list still has tasks.", footer, className, }) {
+    const uid = (0, react_1.useId)();
+    const titleId = `${uid}-title`;
+    const statusGroupName = `${uid}-status-filter`;
+    const newTitleId = `${uid}-new-title`;
+    const addErrorId = `${uid}-add-error`;
+    const [statusFilter, setStatusFilter] = (0, react_1.useState)("all");
+    const [assigneeFilter, setAssigneeFilter] = (0, react_1.useState)("all");
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [newTitle, setNewTitle] = (0, react_1.useState)("");
+    const [newAssigneeId, setNewAssigneeId] = (0, react_1.useState)("");
+    const [newDueDate, setNewDueDate] = (0, react_1.useState)("");
+    const [addTouched, setAddTouched] = (0, react_1.useState)(false);
+    const newTitleRef = (0, react_1.useRef)(null);
+    const loading = status === "loading";
+    const failed = status === "error";
+    const adding = addStatus === "submitting";
+    const editable = canEdit && !loading && !failed;
+    const referenceDay = (0, react_1.useMemo)(() => startOfLocalDay(today ?? new Date()), [today]);
+    const dateFormatter = (0, react_1.useMemo)(() => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" }), [locale]);
+    const assigneeById = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        assignees?.forEach((person) => map.set(person.id, person));
+        return map;
+    }, [assignees]);
+    /* — Filtering ——————————————————————————————————————————— */
+    const normalisedQuery = query.trim().toLowerCase();
+    // Search + assignee first, so the status counts predict what each status
+    // choice will actually show.
+    const scoped = (0, react_1.useMemo)(() => tasks.filter((task) => {
+        if (assigneeFilter === "unassigned" && task.assigneeId)
+            return false;
+        if (assigneeFilter !== "all" &&
+            assigneeFilter !== "unassigned" &&
+            task.assigneeId !== assigneeFilter)
+            return false;
+        if (!normalisedQuery)
+            return true;
+        return (task.title.toLowerCase().includes(normalisedQuery) ||
+            (task.note?.toLowerCase().includes(normalisedQuery) ?? false));
+    }), [tasks, assigneeFilter, normalisedQuery]);
+    const counts = (0, react_1.useMemo)(() => ({
+        all: scoped.length,
+        active: scoped.filter((task) => !task.completed).length,
+        completed: scoped.filter((task) => task.completed).length,
+    }), [scoped]);
+    const visible = (0, react_1.useMemo)(() => {
+        if (statusFilter === "active")
+            return scoped.filter((task) => !task.completed);
+        if (statusFilter === "completed")
+            return scoped.filter((task) => task.completed);
+        return scoped;
+    }, [scoped, statusFilter]);
+    const filtersActive = statusFilter !== "all" || assigneeFilter !== "all" || normalisedQuery.length > 0;
+    const clearFilters = (0, react_1.useCallback)(() => {
+        setStatusFilter("all");
+        setAssigneeFilter("all");
+        setQuery("");
+    }, []);
+    /* — Selection ——————————————————————————————————————————— */
+    const selectionEnabled = Boolean(onSelectionChange) && editable;
+    const selectedSet = (0, react_1.useMemo)(() => new Set(selectedIds ?? []), [selectedIds]);
+    const visibleIds = (0, react_1.useMemo)(() => visible.map((task) => task.id), [visible]);
+    // Membership against the *currently visible* ids. Comparing set sizes would
+    // keep the header checked after the rows behind it were replaced.
+    const selectedVisibleIds = (0, react_1.useMemo)(() => visibleIds.filter((id) => selectedSet.has(id)), [visibleIds, selectedSet]);
+    const allVisibleSelected = visibleIds.length > 0 && selectedVisibleIds.length === visibleIds.length;
+    const someVisibleSelected = selectedVisibleIds.length > 0 && !allVisibleSelected;
+    const toggleSelectAll = (0, react_1.useCallback)(() => {
+        if (!onSelectionChange)
+            return;
+        const current = selectedIds ?? [];
+        if (allVisibleSelected) {
+            // Only drop the visible rows; selection made under other filters stays.
+            const visibleSet = new Set(visibleIds);
+            onSelectionChange(current.filter((id) => !visibleSet.has(id)));
+            return;
+        }
+        onSelectionChange(Array.from(new Set([...current, ...visibleIds])));
+    }, [allVisibleSelected, onSelectionChange, selectedIds, visibleIds]);
+    const toggleOne = (0, react_1.useCallback)((id, selected) => {
+        if (!onSelectionChange)
+            return;
+        const current = selectedIds ?? [];
+        onSelectionChange(selected ? Array.from(new Set([...current, id])) : current.filter((x) => x !== id));
+    }, [onSelectionChange, selectedIds]);
+    /* — Due-date context ———————————————————————————————————— */
+    const describeDue = (0, react_1.useCallback)((task) => {
+        if (!task.dueDate)
+            return null;
+        const date = parseIsoDate(task.dueDate);
+        if (!date)
+            return null;
+        const daysFromToday = Math.round((startOfLocalDay(date).getTime() - referenceDay.getTime()) / 86400000);
+        const overdue = !task.completed && daysFromToday < 0;
+        if (formatDueDate) {
+            return {
+                text: formatDueDate(task.dueDate, {
+                    daysFromToday,
+                    date,
+                    completed: task.completed,
+                }),
+                overdue,
+            };
+        }
+        if (task.completed)
+            return { text: `Due ${dateFormatter.format(date)}`, overdue: false };
+        if (daysFromToday < 0)
+            return { text: `Overdue by ${pluralDays(Math.abs(daysFromToday))}`, overdue: true };
+        if (daysFromToday === 0)
+            return { text: "Due today", overdue: false };
+        if (daysFromToday === 1)
+            return { text: "Due tomorrow", overdue: false };
+        if (daysFromToday <= 7)
+            return { text: `Due in ${pluralDays(daysFromToday)}`, overdue: false };
+        return { text: `Due ${dateFormatter.format(date)}`, overdue: false };
+    }, [dateFormatter, formatDueDate, referenceDay]);
+    /* — Add ————————————————————————————————————————————————— */
+    const trimmedNewTitle = newTitle.trim();
+    const addError = addTouched && !trimmedNewTitle ? "Give the task a name." : undefined;
+    const handleAdd = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        // Guard duplicate submission while an add is in flight.
+        if (!onAddTask || adding || !editable)
+            return;
+        setAddTouched(true);
+        if (!trimmedNewTitle) {
+            newTitleRef.current?.focus();
+            return;
+        }
+        onAddTask({
+            title: trimmedNewTitle,
+            assigneeId: newAssigneeId || undefined,
+            dueDate: newDueDate || undefined,
+        });
+        setNewTitle("");
+        setNewDueDate("");
+        setAddTouched(false);
+        newTitleRef.current?.focus();
+    }, [adding, editable, newAssigneeId, newDueDate, onAddTask, trimmedNewTitle]);
+    const Heading = headingLevel;
+    const statusOptions = [
+        { id: "all", label: "All", count: counts.all },
+        { id: "active", label: "To do", count: counts.active },
+        { id: "completed", label: "Done", count: counts.completed },
+    ];
+    return ((0, jsx_runtime_1.jsx)("section", { "aria-labelledby": titleId, className: (0, cn_1.cn)("@container w-full", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 rounded-12 border border-surface-border bg-surface p-4 @min-[520px]:p-6", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: description })] }), !canEdit && ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { state: "information", icon: "lock", role: "status", title: "View only", description: readOnlyMessage, className: "bg-surface dark:bg-surface" })), onAddTask && editable && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleAdd, noValidate: true, className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 @min-[760px]:flex-row @min-[760px]:items-end", children: [(0, jsx_runtime_1.jsx)("div", { className: "min-w-0 flex-1", children: (0, jsx_runtime_1.jsx)(Input_1.Input, { id: newTitleId, ref: newTitleRef, name: "newTask", size: "md", label: "New task", placeholder: "What needs doing?", value: newTitle, disabled: adding, error: addError, onChange: (event) => setNewTitle(event.target.value) }) }), assignees && assignees.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1 @min-[760px]:w-48", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${uid}-new-assignee`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: "Assign to" }), (0, jsx_runtime_1.jsxs)("select", { id: `${uid}-new-assignee`, value: newAssigneeId, disabled: adding, onChange: (event) => setNewAssigneeId(event.target.value), className: "h-12 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text disabled:cursor-not-allowed disabled:bg-grey-50", children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Nobody yet" }), assignees.map((person) => ((0, jsx_runtime_1.jsx)("option", { value: person.id, children: person.name }, person.id)))] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1 @min-[760px]:w-44", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${uid}-new-due`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: "Due date" }), (0, jsx_runtime_1.jsx)("input", { id: `${uid}-new-due`, type: "date", value: newDueDate, disabled: adding, onChange: (event) => setNewDueDate(event.target.value), className: "h-12 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text disabled:cursor-not-allowed disabled:bg-grey-50" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", variant: "primary", size: "lg", disabled: adding, className: "@min-[760px]:h-12 @min-[760px]:shrink-0 @min-[760px]:py-0", children: adding ? "Adding…" : "Add task" })] }), addStatus === "error" && addErrorMessage && ((0, jsx_runtime_1.jsx)("p", { id: addErrorId, role: "alert", className: "text-body-sm text-feedback-error", children: addErrorMessage }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 border-t border-surface-border pt-4 @min-[640px]:flex-row @min-[640px]:flex-wrap @min-[640px]:items-end", children: [(0, jsx_runtime_1.jsxs)("fieldset", { className: "min-w-0 border-0 p-0", children: [(0, jsx_runtime_1.jsx)("legend", { className: "mb-1 text-sm font-medium leading-[1.45] text-grey-900", children: "Filter by status" }), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex flex-wrap gap-1 rounded-lg border border-surface-border-strong p-1", children: statusOptions.map((option) => ((0, jsx_runtime_1.jsxs)("label", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: statusGroupName, value: option.id, checked: statusFilter === option.id, onChange: () => setStatusFilter(option.id), className: "peer sr-only" }), (0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("inline-flex cursor-pointer items-center gap-1 rounded px-3 py-1.5 text-body-sm font-medium text-grey-700", "peer-checked:bg-primary-50 peer-checked:text-action-primary-text", "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-action-primary-text"), children: [option.label, (0, jsx_runtime_1.jsxs)("span", { className: "text-body-xs text-grey-600", children: ["(", option.count, ")"] })] })] }, option.id))) })] }), assignees && assignees.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1 @min-[640px]:w-48", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${uid}-assignee-filter`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: "Filter by assignee" }), (0, jsx_runtime_1.jsxs)("select", { id: `${uid}-assignee-filter`, value: assigneeFilter, onChange: (event) => setAssigneeFilter(event.target.value), className: "h-10 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [(0, jsx_runtime_1.jsx)("option", { value: "all", children: "Everyone" }), (0, jsx_runtime_1.jsx)("option", { value: "unassigned", children: "Unassigned" }), assignees.map((person) => ((0, jsx_runtime_1.jsx)("option", { value: person.id, children: person.name }, person.id)))] })] })), (0, jsx_runtime_1.jsx)("div", { className: "min-w-0 flex-1 @min-[640px]:max-w-64", children: (0, jsx_runtime_1.jsx)(Input_1.Input, { id: `${uid}-search`, type: "search", size: "sm", label: "Search tasks", placeholder: "Search by name", leadingIcon: "search", value: query, onChange: (event) => setQuery(event.target.value) }) })] }), (0, jsx_runtime_1.jsx)("output", { className: "text-body-sm text-grey-600", children: loading
+                        ? `Loading tasks…`
+                        : `Showing ${visible.length} of ${tasks.length} ${tasks.length === 1 ? "task" : "tasks"}.` }), selectionEnabled && visible.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 rounded-8 border border-surface-border bg-surface-muted p-3 @min-[520px]:flex-row @min-[520px]:items-center @min-[520px]:justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { id: `${uid}-select-all`, checked: allVisibleSelected, indeterminate: someVisibleSelected, onChange: toggleSelectAll, "aria-label": `Select all ${visible.length} shown ${visible.length === 1 ? "task" : "tasks"}` }), (0, jsx_runtime_1.jsx)("span", { className: "text-body-sm text-grey-700", children: selectedVisibleIds.length > 0
+                                        ? `${selectedVisibleIds.length} of ${visible.length} shown selected`
+                                        : `Select all ${visible.length} shown` })] }), selectedVisibleIds.length > 0 && (onBulkComplete || onBulkDelete) && ((0, jsx_runtime_1.jsxs)("span", { className: "flex flex-wrap gap-2", children: [onBulkComplete && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", size: "sm", variant: "secondary", onClick: () => onBulkComplete(selectedVisibleIds), children: "Mark as done" })), onBulkDelete && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", size: "sm", variant: "destructive", appearance: "outlined", onClick: () => onBulkDelete(selectedVisibleIds), children: "Delete" }))] }))] })), failed ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(Alert_1.Alert, { state: "error", icon: "info-triangle", role: "alert", title: "These tasks could not be loaded", description: errorMessage ?? "The task service did not respond. Nothing was changed.", className: "bg-surface dark:bg-surface" }), onRetry && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" }) }))] })) : loading ? ((0, jsx_runtime_1.jsx)("div", { "aria-busy": "true", className: "flex min-h-32 items-center justify-center rounded-8 border border-dashed border-surface-border-strong p-6", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "md", label: "Loading tasks\u2026", labelPosition: "below" }) })) : tasks.length === 0 ? (
+                /* No tasks exist at all. */
+                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 rounded-8 border border-dashed border-surface-border-strong p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-md font-semibold text-grey-900", children: emptyTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: emptyDescription }), onAddTask && editable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", size: "sm", variant: "secondary", onClick: () => newTitleRef.current?.focus(), children: "Add the first task" }))] })) : visible.length === 0 ? (
+                /* Tasks exist, but this filter combination matched none of them. */
+                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 rounded-8 border border-dashed border-surface-border-strong p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-md font-semibold text-grey-900", children: noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: noMatchesDescription }), filtersActive && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", size: "sm", variant: "secondary", onClick: clearFilters, children: "Clear filters" }))] })) : ((0, jsx_runtime_1.jsx)("ul", { role: "list", className: "flex list-none flex-col gap-2 p-0", children: visible.map((task) => {
+                        const checkboxId = `${uid}-task-${task.id}`;
+                        const titleLabelId = `${checkboxId}-label`;
+                        const due = describeDue(task);
+                        const person = task.assigneeId ? assigneeById.get(task.assigneeId) : undefined;
+                        const selected = selectedSet.has(task.id);
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_1.cn)("relative flex flex-col gap-3 rounded-8 border p-3 @min-[560px]:flex-row @min-[560px]:items-start", selected
+                                ? "border-primary-200 bg-primary-50"
+                                : "border-surface-border bg-surface"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [selectionEnabled && (
+                                        // A gutter keeps the row-selection control visually
+                                        // distinct from the completion control beside it.
+                                        (0, jsx_runtime_1.jsx)("span", { className: "flex self-stretch border-r border-surface-border pt-0.5 pr-3", children: (0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { checked: selected, onChange: (event) => toggleOne(task.id, event.target.checked), "aria-label": `Select ${task.title}` }) })), (0, jsx_runtime_1.jsx)("span", { className: "pt-0.5", children: (0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { id: checkboxId, checked: task.completed, disabled: !canEdit, "aria-labelledby": titleLabelId, onChange: (event) => onToggleComplete(task.id, event.target.checked) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("label", { id: titleLabelId, htmlFor: checkboxId, className: (0, cn_1.cn)("text-body-sm font-medium break-words", canEdit && "cursor-pointer", task.completed ? "text-grey-600 line-through" : "text-grey-900"), children: task.title }), task.note && ((0, jsx_runtime_1.jsx)("p", { className: "text-body-xs break-words text-grey-600", children: task.note })), due && ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("inline-flex w-fit items-center gap-1 rounded px-1.5 py-0.5 text-body-xs font-medium", due.overdue ? "bg-error-50 text-error-700" : "text-grey-600"), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: due.overdue ? "info-triangle" : "calendar", size: "xs" }), due.text] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 @min-[560px]:justify-end", children: [onAssignTask && canEdit && assignees && assignees.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: `${checkboxId}-assignee`, className: "sr-only", children: ["Assignee for ", task.title] }), (0, jsx_runtime_1.jsxs)("select", { id: `${checkboxId}-assignee`, value: task.assigneeId ?? "", onChange: (event) => onAssignTask(task.id, event.target.value), className: "h-9 max-w-40 rounded-lg border border-grey-300 bg-surface px-2 text-body-xs text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Unassigned" }), assignees.map((candidate) => ((0, jsx_runtime_1.jsx)("option", { value: candidate.id, children: candidate.name }, candidate.id)))] })] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { size: "xs", type: person?.avatarSrc ? "image" : person ? "initials" : "icon", src: person?.avatarSrc, alt: person?.name ?? "", icon: "user", initials: person?.initials ?? person?.name.slice(0, 2).toUpperCase() ?? "?" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate text-body-xs text-grey-600", children: person?.name ?? "Unassigned" })] })), onDeleteTask && canEdit && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onDeleteTask(task.id), className: "inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-grey-300 text-grey-600 hover:bg-grey-100 hover:text-action-danger-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "bin", size: "md" }), (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: ["Delete ", task.title] })] }))] })] }, task.id));
+                    }) })), footer && (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-3", children: footer })] }) }));
+}

package/dist/blocks/TaskListBlock.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Alert } from "../components/Alert/index.js";
+import { Avatar } from "../components/Avatar/index.js";
+import { Button } from "../components/Button/index.js";
+import { Checkbox } from "../components/FormControl/index.js";
+import { Icon } from "../components/Icon/index.js";
+import { Input } from "../components/Input/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+/* ─── Date helpers ───────────────────────────────────────────────────── */
+function startOfLocalDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/** Parses `YYYY-MM-DD` in local time. `new Date("2026-09-22")` would be UTC. */
+function parseIsoDate(iso) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!match)
+        return null;
+    const [, year, month, day] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function pluralDays(count) {
+    return count === 1 ? "1 day" : `${count} days`;
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function TaskListBlock({ title = "Tasks", description, headingLevel = "h2", tasks, onToggleComplete, onAddTask, onDeleteTask, onAssignTask, assignees, selectedIds, onSelectionChange, onBulkComplete, onBulkDelete, status = "idle", errorMessage, onRetry, addStatus = "idle", addErrorMessage, canEdit = true, readOnlyMessage = "You can follow this list but not change it. Ask the list owner for edit access.", today, locale = "en-GB", formatDueDate, emptyTitle = "No tasks yet", emptyDescription = "Add the first task to start tracking this work.", noMatchesTitle = "No tasks match these filters", noMatchesDescription = "Nothing here matches your search and filter choices. The list still has tasks.", footer, className, }) {
+    const uid = useId();
+    const titleId = `${uid}-title`;
+    const statusGroupName = `${uid}-status-filter`;
+    const newTitleId = `${uid}-new-title`;
+    const addErrorId = `${uid}-add-error`;
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [assigneeFilter, setAssigneeFilter] = useState("all");
+    const [query, setQuery] = useState("");
+    const [newTitle, setNewTitle] = useState("");
+    const [newAssigneeId, setNewAssigneeId] = useState("");
+    const [newDueDate, setNewDueDate] = useState("");
+    const [addTouched, setAddTouched] = useState(false);
+    const newTitleRef = useRef(null);
+    const loading = status === "loading";
+    const failed = status === "error";
+    const adding = addStatus === "submitting";
+    const editable = canEdit && !loading && !failed;
+    const referenceDay = useMemo(() => startOfLocalDay(today ?? new Date()), [today]);
+    const dateFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" }), [locale]);
+    const assigneeById = useMemo(() => {
+        const map = new Map();
+        assignees?.forEach((person) => map.set(person.id, person));
+        return map;
+    }, [assignees]);
+    /* — Filtering ——————————————————————————————————————————— */
+    const normalisedQuery = query.trim().toLowerCase();
+    // Search + assignee first, so the status counts predict what each status
+    // choice will actually show.
+    const scoped = useMemo(() => tasks.filter((task) => {
+        if (assigneeFilter === "unassigned" && task.assigneeId)
+            return false;
+        if (assigneeFilter !== "all" &&
+            assigneeFilter !== "unassigned" &&
+            task.assigneeId !== assigneeFilter)
+            return false;
+        if (!normalisedQuery)
+            return true;
+        return (task.title.toLowerCase().includes(normalisedQuery) ||
+            (task.note?.toLowerCase().includes(normalisedQuery) ?? false));
+    }), [tasks, assigneeFilter, normalisedQuery]);
+    const counts = useMemo(() => ({
+        all: scoped.length,
+        active: scoped.filter((task) => !task.completed).length,
+        completed: scoped.filter((task) => task.completed).length,
+    }), [scoped]);
+    const visible = useMemo(() => {
+        if (statusFilter === "active")
+            return scoped.filter((task) => !task.completed);
+        if (statusFilter === "completed")
+            return scoped.filter((task) => task.completed);
+        return scoped;
+    }, [scoped, statusFilter]);
+    const filtersActive = statusFilter !== "all" || assigneeFilter !== "all" || normalisedQuery.length > 0;
+    const clearFilters = useCallback(() => {
+        setStatusFilter("all");
+        setAssigneeFilter("all");
+        setQuery("");
+    }, []);
+    /* — Selection ——————————————————————————————————————————— */
+    const selectionEnabled = Boolean(onSelectionChange) && editable;
+    const selectedSet = useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
+    const visibleIds = useMemo(() => visible.map((task) => task.id), [visible]);
+    // Membership against the *currently visible* ids. Comparing set sizes would
+    // keep the header checked after the rows behind it were replaced.
+    const selectedVisibleIds = useMemo(() => visibleIds.filter((id) => selectedSet.has(id)), [visibleIds, selectedSet]);
+    const allVisibleSelected = visibleIds.length > 0 && selectedVisibleIds.length === visibleIds.length;
+    const someVisibleSelected = selectedVisibleIds.length > 0 && !allVisibleSelected;
+    const toggleSelectAll = useCallback(() => {
+        if (!onSelectionChange)
+            return;
+        const current = selectedIds ?? [];
+        if (allVisibleSelected) {
+            // Only drop the visible rows; selection made under other filters stays.
+            const visibleSet = new Set(visibleIds);
+            onSelectionChange(current.filter((id) => !visibleSet.has(id)));
+            return;
+        }
+        onSelectionChange(Array.from(new Set([...current, ...visibleIds])));
+    }, [allVisibleSelected, onSelectionChange, selectedIds, visibleIds]);
+    const toggleOne = useCallback((id, selected) => {
+        if (!onSelectionChange)
+            return;
+        const current = selectedIds ?? [];
+        onSelectionChange(selected ? Array.from(new Set([...current, id])) : current.filter((x) => x !== id));
+    }, [onSelectionChange, selectedIds]);
+    /* — Due-date context ———————————————————————————————————— */
+    const describeDue = useCallback((task) => {
+        if (!task.dueDate)
+            return null;
+        const date = parseIsoDate(task.dueDate);
+        if (!date)
+            return null;
+        const daysFromToday = Math.round((startOfLocalDay(date).getTime() - referenceDay.getTime()) / 86400000);
+        const overdue = !task.completed && daysFromToday < 0;
+        if (formatDueDate) {
+            return {
+                text: formatDueDate(task.dueDate, {
+                    daysFromToday,
+                    date,
+                    completed: task.completed,
+                }),
+                overdue,
+            };
+        }
+        if (task.completed)
+            return { text: `Due ${dateFormatter.format(date)}`, overdue: false };
+        if (daysFromToday < 0)
+            return { text: `Overdue by ${pluralDays(Math.abs(daysFromToday))}`, overdue: true };
+        if (daysFromToday === 0)
+            return { text: "Due today", overdue: false };
+        if (daysFromToday === 1)
+            return { text: "Due tomorrow", overdue: false };
+        if (daysFromToday <= 7)
+            return { text: `Due in ${pluralDays(daysFromToday)}`, overdue: false };
+        return { text: `Due ${dateFormatter.format(date)}`, overdue: false };
+    }, [dateFormatter, formatDueDate, referenceDay]);
+    /* — Add ————————————————————————————————————————————————— */
+    const trimmedNewTitle = newTitle.trim();
+    const addError = addTouched && !trimmedNewTitle ? "Give the task a name." : undefined;
+    const handleAdd = useCallback((event) => {
+        event.preventDefault();
+        // Guard duplicate submission while an add is in flight.
+        if (!onAddTask || adding || !editable)
+            return;
+        setAddTouched(true);
+        if (!trimmedNewTitle) {
+            newTitleRef.current?.focus();
+            return;
+        }
+        onAddTask({
+            title: trimmedNewTitle,
+            assigneeId: newAssigneeId || undefined,
+            dueDate: newDueDate || undefined,
+        });
+        setNewTitle("");
+        setNewDueDate("");
+        setAddTouched(false);
+        newTitleRef.current?.focus();
+    }, [adding, editable, newAssigneeId, newDueDate, onAddTask, trimmedNewTitle]);
+    const Heading = headingLevel;
+    const statusOptions = [
+        { id: "all", label: "All", count: counts.all },
+        { id: "active", label: "To do", count: counts.active },
+        { id: "completed", label: "Done", count: counts.completed },
+    ];
+    return (_jsx("section", { "aria-labelledby": titleId, className: cn("@container w-full", className), children: _jsxs("div", { className: "flex flex-col gap-4 rounded-12 border border-surface-border bg-surface p-4 @min-[520px]:p-6", children: [_jsxs("header", { className: "flex flex-col gap-2", children: [_jsx(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), description && _jsx("p", { className: "text-body-sm text-grey-600", children: description })] }), !canEdit && (_jsx(Alert, { state: "information", icon: "lock", role: "status", title: "View only", description: readOnlyMessage, className: "bg-surface dark:bg-surface" })), onAddTask && editable && (_jsxs("form", { onSubmit: handleAdd, noValidate: true, className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-3 @min-[760px]:flex-row @min-[760px]:items-end", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Input, { id: newTitleId, ref: newTitleRef, name: "newTask", size: "md", label: "New task", placeholder: "What needs doing?", value: newTitle, disabled: adding, error: addError, onChange: (event) => setNewTitle(event.target.value) }) }), assignees && assignees.length > 0 && (_jsxs("div", { className: "flex min-w-0 flex-col gap-1 @min-[760px]:w-48", children: [_jsx("label", { htmlFor: `${uid}-new-assignee`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: "Assign to" }), _jsxs("select", { id: `${uid}-new-assignee`, value: newAssigneeId, disabled: adding, onChange: (event) => setNewAssigneeId(event.target.value), className: "h-12 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text disabled:cursor-not-allowed disabled:bg-grey-50", children: [_jsx("option", { value: "", children: "Nobody yet" }), assignees.map((person) => (_jsx("option", { value: person.id, children: person.name }, person.id)))] })] })), _jsxs("div", { className: "flex min-w-0 flex-col gap-1 @min-[760px]:w-44", children: [_jsx("label", { htmlFor: `${uid}-new-due`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: "Due date" }), _jsx("input", { id: `${uid}-new-due`, type: "date", value: newDueDate, disabled: adding, onChange: (event) => setNewDueDate(event.target.value), className: "h-12 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text disabled:cursor-not-allowed disabled:bg-grey-50" })] }), _jsx(Button, { type: "submit", variant: "primary", size: "lg", disabled: adding, className: "@min-[760px]:h-12 @min-[760px]:shrink-0 @min-[760px]:py-0", children: adding ? "Adding…" : "Add task" })] }), addStatus === "error" && addErrorMessage && (_jsx("p", { id: addErrorId, role: "alert", className: "text-body-sm text-feedback-error", children: addErrorMessage }))] })), _jsxs("div", { className: "flex flex-col gap-3 border-t border-surface-border pt-4 @min-[640px]:flex-row @min-[640px]:flex-wrap @min-[640px]:items-end", children: [_jsxs("fieldset", { className: "min-w-0 border-0 p-0", children: [_jsx("legend", { className: "mb-1 text-sm font-medium leading-[1.45] text-grey-900", children: "Filter by status" }), _jsx("div", { className: "inline-flex flex-wrap gap-1 rounded-lg border border-surface-border-strong p-1", children: statusOptions.map((option) => (_jsxs("label", { className: "relative", children: [_jsx("input", { type: "radio", name: statusGroupName, value: option.id, checked: statusFilter === option.id, onChange: () => setStatusFilter(option.id), className: "peer sr-only" }), _jsxs("span", { className: cn("inline-flex cursor-pointer items-center gap-1 rounded px-3 py-1.5 text-body-sm font-medium text-grey-700", "peer-checked:bg-primary-50 peer-checked:text-action-primary-text", "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-action-primary-text"), children: [option.label, _jsxs("span", { className: "text-body-xs text-grey-600", children: ["(", option.count, ")"] })] })] }, option.id))) })] }), assignees && assignees.length > 0 && (_jsxs("div", { className: "flex min-w-0 flex-col gap-1 @min-[640px]:w-48", children: [_jsx("label", { htmlFor: `${uid}-assignee-filter`, className: "text-sm font-medium leading-[1.45] text-grey-900", children: "Filter by assignee" }), _jsxs("select", { id: `${uid}-assignee-filter`, value: assigneeFilter, onChange: (event) => setAssigneeFilter(event.target.value), className: "h-10 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [_jsx("option", { value: "all", children: "Everyone" }), _jsx("option", { value: "unassigned", children: "Unassigned" }), assignees.map((person) => (_jsx("option", { value: person.id, children: person.name }, person.id)))] })] })), _jsx("div", { className: "min-w-0 flex-1 @min-[640px]:max-w-64", children: _jsx(Input, { id: `${uid}-search`, type: "search", size: "sm", label: "Search tasks", placeholder: "Search by name", leadingIcon: "search", value: query, onChange: (event) => setQuery(event.target.value) }) })] }), _jsx("output", { className: "text-body-sm text-grey-600", children: loading
+                        ? `Loading tasks…`
+                        : `Showing ${visible.length} of ${tasks.length} ${tasks.length === 1 ? "task" : "tasks"}.` }), selectionEnabled && visible.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3 rounded-8 border border-surface-border bg-surface-muted p-3 @min-[520px]:flex-row @min-[520px]:items-center @min-[520px]:justify-between", children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx(Checkbox, { id: `${uid}-select-all`, checked: allVisibleSelected, indeterminate: someVisibleSelected, onChange: toggleSelectAll, "aria-label": `Select all ${visible.length} shown ${visible.length === 1 ? "task" : "tasks"}` }), _jsx("span", { className: "text-body-sm text-grey-700", children: selectedVisibleIds.length > 0
+                                        ? `${selectedVisibleIds.length} of ${visible.length} shown selected`
+                                        : `Select all ${visible.length} shown` })] }), selectedVisibleIds.length > 0 && (onBulkComplete || onBulkDelete) && (_jsxs("span", { className: "flex flex-wrap gap-2", children: [onBulkComplete && (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => onBulkComplete(selectedVisibleIds), children: "Mark as done" })), onBulkDelete && (_jsx(Button, { type: "button", size: "sm", variant: "destructive", appearance: "outlined", onClick: () => onBulkDelete(selectedVisibleIds), children: "Delete" }))] }))] })), failed ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Alert, { state: "error", icon: "info-triangle", role: "alert", title: "These tasks could not be loaded", description: errorMessage ?? "The task service did not respond. Nothing was changed.", className: "bg-surface dark:bg-surface" }), onRetry && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" }) }))] })) : loading ? (_jsx("div", { "aria-busy": "true", className: "flex min-h-32 items-center justify-center rounded-8 border border-dashed border-surface-border-strong p-6", children: _jsx(Spinner, { size: "md", label: "Loading tasks\u2026", labelPosition: "below" }) })) : tasks.length === 0 ? (
+                /* No tasks exist at all. */
+                _jsxs("div", { className: "flex flex-col items-start gap-2 rounded-8 border border-dashed border-surface-border-strong p-6", children: [_jsx("p", { className: "text-body-md font-semibold text-grey-900", children: emptyTitle }), _jsx("p", { className: "text-body-sm text-grey-600", children: emptyDescription }), onAddTask && editable && (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: () => newTitleRef.current?.focus(), children: "Add the first task" }))] })) : visible.length === 0 ? (
+                /* Tasks exist, but this filter combination matched none of them. */
+                _jsxs("div", { className: "flex flex-col items-start gap-2 rounded-8 border border-dashed border-surface-border-strong p-6", children: [_jsx("p", { className: "text-body-md font-semibold text-grey-900", children: noMatchesTitle }), _jsx("p", { className: "text-body-sm text-grey-600", children: noMatchesDescription }), filtersActive && (_jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: clearFilters, children: "Clear filters" }))] })) : (_jsx("ul", { role: "list", className: "flex list-none flex-col gap-2 p-0", children: visible.map((task) => {
+                        const checkboxId = `${uid}-task-${task.id}`;
+                        const titleLabelId = `${checkboxId}-label`;
+                        const due = describeDue(task);
+                        const person = task.assigneeId ? assigneeById.get(task.assigneeId) : undefined;
+                        const selected = selectedSet.has(task.id);
+                        return (_jsxs("li", { className: cn("relative flex flex-col gap-3 rounded-8 border p-3 @min-[560px]:flex-row @min-[560px]:items-start", selected
+                                ? "border-primary-200 bg-primary-50"
+                                : "border-surface-border bg-surface"), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [selectionEnabled && (
+                                        // A gutter keeps the row-selection control visually
+                                        // distinct from the completion control beside it.
+                                        _jsx("span", { className: "flex self-stretch border-r border-surface-border pt-0.5 pr-3", children: _jsx(Checkbox, { checked: selected, onChange: (event) => toggleOne(task.id, event.target.checked), "aria-label": `Select ${task.title}` }) })), _jsx("span", { className: "pt-0.5", children: _jsx(Checkbox, { id: checkboxId, checked: task.completed, disabled: !canEdit, "aria-labelledby": titleLabelId, onChange: (event) => onToggleComplete(task.id, event.target.checked) }) }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("label", { id: titleLabelId, htmlFor: checkboxId, className: cn("text-body-sm font-medium break-words", canEdit && "cursor-pointer", task.completed ? "text-grey-600 line-through" : "text-grey-900"), children: task.title }), task.note && (_jsx("p", { className: "text-body-xs break-words text-grey-600", children: task.note })), due && (_jsxs("span", { className: cn("inline-flex w-fit items-center gap-1 rounded px-1.5 py-0.5 text-body-xs font-medium", due.overdue ? "bg-error-50 text-error-700" : "text-grey-600"), children: [_jsx(Icon, { name: due.overdue ? "info-triangle" : "calendar", size: "xs" }), due.text] }))] })] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2 @min-[560px]:justify-end", children: [onAssignTask && canEdit && assignees && assignees.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("label", { htmlFor: `${checkboxId}-assignee`, className: "sr-only", children: ["Assignee for ", task.title] }), _jsxs("select", { id: `${checkboxId}-assignee`, value: task.assigneeId ?? "", onChange: (event) => onAssignTask(task.id, event.target.value), className: "h-9 max-w-40 rounded-lg border border-grey-300 bg-surface px-2 text-body-xs text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [_jsx("option", { value: "", children: "Unassigned" }), assignees.map((candidate) => (_jsx("option", { value: candidate.id, children: candidate.name }, candidate.id)))] })] })) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Avatar, { size: "xs", type: person?.avatarSrc ? "image" : person ? "initials" : "icon", src: person?.avatarSrc, alt: person?.name ?? "", icon: "user", initials: person?.initials ?? person?.name.slice(0, 2).toUpperCase() ?? "?" }), _jsx("span", { className: "truncate text-body-xs text-grey-600", children: person?.name ?? "Unassigned" })] })), onDeleteTask && canEdit && (_jsxs("button", { type: "button", onClick: () => onDeleteTask(task.id), className: "inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-grey-300 text-grey-600 hover:bg-grey-100 hover:text-action-danger-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [_jsx(Icon, { name: "bin", size: "md" }), _jsxs("span", { className: "sr-only", children: ["Delete ", task.title] })] }))] })] }, task.id));
+                    }) })), footer && _jsx("div", { className: "flex flex-wrap items-center gap-3", children: footer })] }) }));
+}