@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/tag-input.js

@@ -0,0 +1,305 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { mergeIds } from "../lib/compose-refs.js";
+import { useFieldControl } from "../lib/field-context.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { foldText, highlightParts, matchText } from "../lib/text.js";
+import { useAsyncList } from "../lib/use-async-list.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { controlVariants, itemVariants } from "../lib/variants.js";
+import { Badge } from "./badge.js";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { Spinner } from "./spinner.js";
+const tagInputLabels = {
+    placeholder: "Add a tag…",
+    list: "Tags",
+    suggestions: "Suggestions",
+    added: "“{tag}” added",
+    removed: "“{tag}” removed",
+    duplicate: "“{tag}” is already added",
+    max: "{max, plural, one {Up to # tag} other {Up to # tags}}",
+    notAllowed: "“{tag}” isn't one of the options",
+    tooLong: "{max, plural, one {Tags can be at most # character} other {Tags can be at most # characters}}",
+    invalid: "{tag}: {message}",
+    remove: "Remove {label}",
+    loading: "Loading suggestions…",
+};
+const defaultTransform = (s) => s.replace(/\s+/g, " ").trim();
+const PASTE_SPLIT = /[,;\n\r\t]+/;
+/**
+ * Free-form multi-value entry: post tags, contact segments, skills, recipients, keywords.
+ * Chips live inside the box with a trailing text input. Enter, Tab or comma add; paste splits a
+ * comma- or newline-separated list; Backspace on the empty input moves to the last chip, and a
+ * second Backspace removes it; ←/→ move between chips. Adds and removals are announced.
+ *
+ * ```tsx
+ * <Field label="Tags"><TagInput name="tags" suggestions={existingTags} max={10} /></Field>
+ * <TagInput validate={(v) => /^\S+@\S+\.\S+$/.test(v) || "Not an email address"} />
+ * ```
+ */
+export const TagInput = React.forwardRef(function TagInput(props, forwardedRef) {
+    const { value: valueProp, defaultValue, onValueChange, suggestions, allowCustom = true, delimiters = ["Enter", "Tab", ","], max, maxLength, validate, transform = defaultTransform, dedupe = "fold", tagTone, addOnBlur = false, name: nameProp, placeholder, size = "md", variant = "default", invalid, className, labels, } = props;
+    const t = useLabels("tagInput", tagInputLabels, labels);
+    const { locale } = useLocale();
+    const control = useFieldControl({
+        id: props.id,
+        name: nameProp,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        "aria-invalid": invalid ? true : undefined,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+    });
+    const disabled = Boolean(control.disabled);
+    const readOnly = Boolean(control.readOnly);
+    const inert = disabled || readOnly;
+    const [tags, setTags] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? [], onChange: onValueChange, name: "TagInput" });
+    const [text, setText] = React.useState("");
+    const [announcement, setAnnouncement] = React.useState("");
+    const [flash, setFlash] = React.useState(null);
+    const [focused, setFocused] = React.useState(false);
+    const [listOpen, setListOpen] = React.useState(false);
+    const [active, setActive] = React.useState(-1);
+    const inputRef = React.useRef(null);
+    const boxRef = React.useRef(null);
+    const chipsRef = React.useRef(null);
+    const baseId = React.useId();
+    const listId = `${baseId}-list`;
+    const maxId = `${baseId}-max`;
+    const key = React.useCallback((s) => (dedupe === "fold" ? foldText(s, locale) : s), [dedupe, locale]);
+    const full = max !== undefined && tags.length >= max;
+    /* ---------------------------------------------------------------- suggestions */
+    const loader = typeof suggestions === "function" ? suggestions : undefined;
+    const async = useAsyncList({ load: loader, query: text.trim(), enabled: Boolean(loader) && focused && listOpen });
+    const taken = React.useMemo(() => new Set(tags.map(key)), [tags, key]);
+    const options = React.useMemo(() => {
+        const source = Array.isArray(suggestions) ? suggestions.filter((s) => !text.trim() || matchText(s, text.trim(), locale)) : async.items;
+        return source.filter((s) => !taken.has(key(s))).slice(0, 50);
+    }, [suggestions, async.items, text, locale, taken, key]);
+    const hasSuggestions = suggestions !== undefined;
+    const showList = hasSuggestions && focused && listOpen && !inert && !full && (options.length > 0 || async.loading);
+    React.useEffect(() => {
+        setActive(-1);
+    }, [text]);
+    /* ---------------------------------------------------------------- mutations */
+    const say = (msg) => setAnnouncement((prev) => (prev === msg ? `${msg} ` : msg));
+    const add = (raw, current) => {
+        const tag = transform(raw);
+        if (!tag)
+            return null;
+        if (max !== undefined && current.length >= max) {
+            say(t("max", { max }));
+            return null;
+        }
+        if (maxLength !== undefined && tag.length > maxLength) {
+            say(t("tooLong", { max: maxLength }));
+            return null;
+        }
+        const k = key(tag);
+        const dup = current.findIndex((x) => key(x) === k);
+        if (dup >= 0) {
+            setFlash(dup);
+            say(t("duplicate", { tag: current[dup] }));
+            return null;
+        }
+        if (!allowCustom) {
+            const pool = Array.isArray(suggestions) ? suggestions : async.items;
+            const match = pool.find((s) => key(s) === k);
+            if (!match) {
+                say(t("notAllowed", { tag }));
+                return null;
+            }
+            return [...current, match];
+        }
+        return [...current, tag];
+    };
+    const commit = (raws) => {
+        let next = tags;
+        const added = [];
+        for (const raw of raws) {
+            const r = add(raw, next);
+            if (r) {
+                added.push(r[r.length - 1]);
+                next = r;
+            }
+        }
+        if (added.length === 0)
+            return false;
+        setTags(next);
+        const message = validate ? validate(added[added.length - 1]) : true;
+        say(message === true ? t("added", { tag: added.join(", ") }) : t("invalid", { tag: added[added.length - 1], message }));
+        return true;
+    };
+    const removeAt = (index, refocus) => {
+        if (inert)
+            return;
+        const tag = tags[index];
+        if (tag === undefined)
+            return;
+        setTags(tags.filter((_, i) => i !== index));
+        say(t("removed", { tag }));
+        if (!refocus)
+            return;
+        requestAnimationFrame(() => {
+            const buttons = chipsRef.current?.querySelectorAll('[data-slot="chip-remove"]');
+            if (buttons && buttons.length > 0 && index > 0)
+                buttons[index - 1].focus();
+            else
+                inputRef.current?.focus();
+        });
+    };
+    React.useEffect(() => {
+        if (flash === null)
+            return;
+        const id = setTimeout(() => setFlash(null), 600);
+        return () => clearTimeout(id);
+    }, [flash]);
+    /* ---------------------------------------------------------------- input events */
+    const charDelimiters = delimiters.filter((d) => d.length === 1);
+    const onKeyDown = (e) => {
+        if (e.nativeEvent.isComposing)
+            return;
+        if (showList && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            e.preventDefault();
+            const n = options.length;
+            if (n === 0)
+                return;
+            setActive((i) => (e.key === "ArrowDown" ? (i + 1) % n : i <= 0 ? n - 1 : i - 1));
+            return;
+        }
+        if (e.key === "ArrowDown" && hasSuggestions) {
+            e.preventDefault();
+            setListOpen(true);
+            return;
+        }
+        if (e.key === "Escape" && showList) {
+            e.preventDefault();
+            setListOpen(false);
+            return;
+        }
+        if (e.key === "Enter" && showList && active >= 0 && options[active]) {
+            e.preventDefault();
+            if (commit([options[active]]))
+                setText("");
+            return;
+        }
+        if (delimiters.includes(e.key)) {
+            if (!text.trim()) {
+                // An empty Enter must not submit the form by accident; Tab moves on as usual.
+                if (e.key === "Enter")
+                    e.preventDefault();
+                return;
+            }
+            e.preventDefault();
+            if (commit([text]))
+                setText("");
+            return;
+        }
+        if (e.key === "Backspace" && text === "" && tags.length > 0) {
+            e.preventDefault();
+            const buttons = chipsRef.current?.querySelectorAll('[data-slot="chip-remove"]');
+            buttons?.[buttons.length - 1]?.focus();
+            return;
+        }
+        if ((e.key === "ArrowLeft" && !isRtl()) || (e.key === "ArrowRight" && isRtl())) {
+            if (e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0 && tags.length > 0) {
+                e.preventDefault();
+                const buttons = chipsRef.current?.querySelectorAll('[data-slot="chip-remove"]');
+                buttons?.[buttons.length - 1]?.focus();
+            }
+        }
+    };
+    const isRtl = () => (boxRef.current ? getComputedStyle(boxRef.current).direction === "rtl" : false);
+    const onChange = (e) => {
+        const v = e.target.value;
+        // Typed (or IME-inserted) delimiter characters split the text.
+        if (charDelimiters.some((d) => v.includes(d))) {
+            const parts = v.split(new RegExp(`[${charDelimiters.map((d) => d.replace(/[\\\]^-]/g, "\\$&")).join("")}]`));
+            const rest = parts.pop() ?? "";
+            commit(parts);
+            setText(rest);
+        }
+        else {
+            setText(v);
+        }
+        setListOpen(true);
+    };
+    const onPaste = (e) => {
+        const pasted = e.clipboardData.getData("text");
+        if (!PASTE_SPLIT.test(pasted))
+            return;
+        e.preventDefault();
+        const parts = (text + pasted).split(PASTE_SPLIT).filter((p) => p.trim());
+        commit(parts);
+        setText("");
+    };
+    const onChipKeyDown = (e) => {
+        const buttons = [...(chipsRef.current?.querySelectorAll('[data-slot="chip-remove"]') ?? [])];
+        const i = buttons.indexOf(document.activeElement);
+        if (i < 0)
+            return;
+        const rtl = isRtl();
+        if (e.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+            e.preventDefault();
+            buttons[Math.max(0, i - 1)].focus();
+        }
+        else if (e.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+            e.preventDefault();
+            (buttons[i + 1] ?? inputRef.current)?.focus();
+        }
+        else if (e.key === "Escape" || (e.key.length === 1 && !e.metaKey && !e.ctrlKey)) {
+            // Typing on a chip goes back to the input.
+            inputRef.current?.focus();
+        }
+    };
+    /* ---------------------------------------------------------------- render */
+    const invalidTags = validate ? tags.map((tag) => validate(tag)) : null;
+    const anyInvalid = invalidTags?.some((r) => r !== true) ?? false;
+    const isInvalid = Boolean(control["aria-invalid"]) || anyInvalid;
+    const activeId = active >= 0 ? `${listId}-${active}` : undefined;
+    const name = control.name;
+    const box = (_jsxs("div", { ref: boxRef, "data-slot": "tag-input", "data-size": size, "data-readonly": readOnly ? "" : undefined, "data-full": full ? "" : undefined, "aria-invalid": isInvalid || undefined, "aria-disabled": disabled || undefined, onPointerDown: (e) => {
+            if (e.target === e.currentTarget || e.target === chipsRef.current) {
+                e.preventDefault();
+                inputRef.current?.focus();
+            }
+        }, className: cn(controlVariants({ size, variant, multiline: true }), "cursor-text flex-wrap gap-1 py-1 ps-1.5 pe-2", size === "sm" ? "min-h-[calc(var(--control-h)-0.5rem)] py-0.5" : "min-h-(--control-h)", disabled && "cursor-not-allowed", className), children: [tags.length > 0 ? (_jsx("ul", { ref: chipsRef, "aria-label": t("list"), className: "contents", onKeyDown: onChipKeyDown, children: tags.map((tag, i) => {
+                    const result = invalidTags?.[i];
+                    const bad = result !== undefined && result !== true;
+                    return (_jsx("li", { className: "flex min-w-0", children: _jsxs(Badge, { size: size === "sm" ? "sm" : "md", shape: "square", tone: bad ? "danger" : (tagTone?.(tag) ?? "neutral"), "data-flash": flash === i ? "" : undefined, "data-invalid": bad ? "" : undefined, title: bad ? result : undefined, className: "ui-tag max-w-64 min-w-0", onRemove: inert ? undefined : () => removeAt(i, true), removeLabel: t("remove", { label: tag }), children: [_jsx("span", { className: "truncate", children: tag }), bad ? _jsxs("span", { className: "sr-only", children: [", ", result] }) : null] }) }, `${tag}-${i}`));
+                }) })) : null, _jsx("input", { ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof forwardedRef === "function")
+                        forwardedRef(node);
+                    else if (forwardedRef)
+                        forwardedRef.current = node;
+                }, id: control.id, type: "text", value: text, disabled: disabled, readOnly: readOnly || full, "aria-label": control["aria-label"], "aria-labelledby": control["aria-labelledby"], "aria-describedby": mergeIds(control["aria-describedby"], max !== undefined ? maxId : undefined), "aria-invalid": isInvalid || undefined, "aria-required": control.required || undefined, enterKeyHint: "enter", autoComplete: "off", placeholder: full || readOnly ? undefined : tags.length === 0 ? (placeholder ?? t("placeholder")) : undefined, ...(hasSuggestions
+                    ? {
+                        role: "combobox",
+                        "aria-autocomplete": "list",
+                        "aria-expanded": showList,
+                        "aria-controls": showList ? listId : undefined,
+                        "aria-activedescendant": showList ? activeId : undefined,
+                    }
+                    : {}), onChange: onChange, onKeyDown: onKeyDown, onPaste: onPaste, onFocus: () => setFocused(true), onBlur: () => {
+                    setFocused(false);
+                    setListOpen(false);
+                    if (addOnBlur && text.trim() && commit([text]))
+                        setText("");
+                }, className: cn("h-[calc(var(--control-h)-0.5rem)] min-w-0 flex-1 bg-transparent px-1.5 text-[length:inherit] text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed", size === "sm" && "h-[calc(var(--control-h)-0.875rem)]", full ? "w-2 min-w-2 max-w-2 flex-none caret-transparent" : "min-w-20") }), max !== undefined ? (_jsxs("span", { "aria-hidden": true, className: cn("ms-auto shrink-0 self-center ps-1 text-[11px] tabular text-fg-subtle", full && "text-fg-muted"), children: [tags.length, "/", max] })) : null, _jsx("span", { id: maxId, className: "sr-only", children: max !== undefined ? t("max", { max }) : "" }), _jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement }), name ? tags.map((tag, i) => _jsx("input", { type: "hidden", name: name, value: tag }, `${tag}-${i}`)) : null] }));
+    if (!hasSuggestions)
+        return box;
+    return (_jsxs(Popover, { open: showList, onOpenChange: (o) => !o && setListOpen(false), children: [_jsx(PopoverAnchor, { asChild: true, children: box }), _jsx(PopoverContent, { size: "trigger", padded: false, align: "start", "aria-label": t("suggestions"), className: "min-w-48", onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => {
+                    if (boxRef.current?.contains(e.target))
+                        e.preventDefault();
+                }, children: _jsxs("ul", { id: listId, role: "listbox", "aria-label": t("suggestions"), className: "max-h-64 overflow-y-auto p-1", children: [async.loading && options.length === 0 ? (_jsxs("li", { role: "presentation", className: "flex items-center gap-2 px-2 py-1.5 text-[13px] text-fg-muted", children: [_jsx(Spinner, { size: "xs", tone: "muted" }), t("loading")] })) : null, options.map((option, i) => (_jsx("li", { id: `${listId}-${i}`, role: "option", "aria-selected": i === active, "data-selected": i === active ? "true" : undefined, onMouseDown: (e) => e.preventDefault(), onMouseMove: () => setActive(i), onClick: () => {
+                                if (commit([option]))
+                                    setText("");
+                                inputRef.current?.focus();
+                            }, className: itemVariants({ size: size === "sm" ? "sm" : "md" }), children: _jsx("span", { className: "truncate", children: highlightParts(option, text.trim(), locale).map((p, j) => p.match ? (_jsx("span", { className: "font-semibold text-fg", children: p.text }, j)) : (_jsx(React.Fragment, { children: p.text }, j))) }) }, option)))] }) })] }));
+});

package/dist/components/task-list.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+export type TaskPriority = "low" | "medium" | "high" | "urgent";
+export interface TaskData {
+    id: string;
+    title: string;
+    done: boolean;
+    /** Second line (checklist hint, task notes). */
+    description?: string;
+    assignee?: {
+        id: string;
+        name: string;
+        avatar?: string;
+    };
+    /** Due date `YYYY-MM-DD`. */
+    due?: string;
+    priority?: TaskPriority;
+    /** Subtasks (nest as deep as you need; one level reads best). */
+    children?: TaskData[];
+    /** Can't be toggled or edited (system-checked step). */
+    disabled?: boolean;
+}
+export declare const taskListLabels: {
+    list: string;
+    progress: string;
+    hideCompleted: string;
+    showCompleted: string;
+    add: string;
+    addSubtask: string;
+    addSubtaskTo: string;
+    edit: string;
+    remove: string;
+    moveUp: string;
+    moveDown: string;
+    due: string;
+    overdue: string;
+    priority: string;
+    low: string;
+    medium: string;
+    high: string;
+    urgent: string;
+    assignee: string;
+    subtasks: string;
+    expand: string;
+    empty: string;
+    allDone: string;
+    toggleError: string;
+    saveError: string;
+    newTask: string;
+};
+export type TaskListLabels = Partial<typeof taskListLabels>;
+export interface TaskListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    items: TaskData[];
+    /** Check / uncheck. Updates optimistically; a rejection reverts and shows a toast. */
+    onToggle?: (id: string, done: boolean) => void | Promise<void>;
+    /** Shows the add input (and "Add subtask" with `parentId`). Enter creates and keeps focus. */
+    onAdd?: (title: string, parentId?: string) => void | Promise<void>;
+    /** Title edits (click the pencil, Enter saves, Esc cancels). */
+    onEdit?: (id: string, patch: Partial<TaskData>) => void | Promise<void>;
+    onRemove?: (id: string) => void | Promise<void>;
+    /** Keyboard reorder: Alt+↑ / Alt+↓ on a task. Receives the new sibling order. */
+    onReorder?: (ids: string[], parentId?: string) => void | Promise<void>;
+    /** Heading above the list ("Onboarding — week 1"). */
+    title?: React.ReactNode;
+    /** Header "Hide completed" toggle (controlled / uncontrolled). */
+    hideCompleted?: boolean;
+    defaultHideCompleted?: boolean;
+    onHideCompletedChange?: (hide: boolean) => void;
+    /** Progress bar + "3 of 7 done". Default `true`. */
+    showProgress?: boolean;
+    /** Done tasks move below open ones. Default `false`. */
+    sortCompleted?: boolean;
+    /** `list` (assignee, due, priority) or `checklist` (titles only). Default `"list"`. */
+    variant?: "list" | "checklist";
+    /** Today for due states, `YYYY-MM-DD` or a Date (docs, tests). Default: the live clock in the provider time zone. */
+    today?: string | Date;
+    readOnly?: boolean;
+    labels?: TaskListLabels;
+}
+/**
+ * Checkable tasks with assignee, due date, priority and subtasks: deal follow-ups, onboarding,
+ * an editorial checklist. Optimistic toggles, inline add and edit, overdue / due-today tones,
+ * and a progress header announced politely ("4 of 7 done").
+ *
+ * ```tsx
+ * <TaskList title="Onboarding" items={tasks} onToggle={api.toggle} onAdd={api.add} />
+ * <TaskList variant="checklist" items={prePublish} onToggle={toggle} />
+ * ```
+ */
+export declare const TaskList: React.ForwardRefExoticComponent<TaskListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/task-list.js

@@ -0,0 +1,238 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarDays, ChevronDown, Flag, ListPlus, Pencil, Plus, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { useNow } from "../lib/data-islands.js";
+import { dayKey } from "../lib/value-format.js";
+import { Avatar } from "./avatar.js";
+import { IconButton } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { toast } from "./toast.js";
+export const taskListLabels = {
+    list: "Tasks",
+    progress: "{done} of {total} done",
+    hideCompleted: "Hide completed",
+    showCompleted: "Show completed ({count})",
+    add: "Add a task",
+    addSubtask: "Add subtask",
+    addSubtaskTo: "Add subtask to “{title}”",
+    edit: "Edit task “{title}”",
+    remove: "Delete task “{title}”",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    due: "Due {when}",
+    overdue: "Overdue · {when}",
+    priority: "{level} priority",
+    low: "Low",
+    medium: "Medium",
+    high: "High",
+    urgent: "Urgent",
+    assignee: "Assigned to {name}",
+    subtasks: "{done}/{total}",
+    expand: "Show subtasks of “{title}”",
+    empty: "No tasks yet",
+    allDone: "All done. Nice work.",
+    toggleError: "Couldn't update “{title}”",
+    saveError: "Couldn't save the task",
+    newTask: "New task title",
+};
+function flatten(items) {
+    return items.flatMap((i) => [i, ...(i.children ? flatten(i.children) : [])]);
+}
+function applyDone(items, overrides) {
+    return items.map((i) => ({ ...i, done: overrides[i.id] ?? i.done, children: i.children ? applyDone(i.children, overrides) : undefined }));
+}
+/**
+ * Checkable tasks with assignee, due date, priority and subtasks: deal follow-ups, onboarding,
+ * an editorial checklist. Optimistic toggles, inline add and edit, overdue / due-today tones,
+ * and a progress header announced politely ("4 of 7 done").
+ *
+ * ```tsx
+ * <TaskList title="Onboarding" items={tasks} onToggle={api.toggle} onAdd={api.add} />
+ * <TaskList variant="checklist" items={prePublish} onToggle={toggle} />
+ * ```
+ */
+export const TaskList = React.forwardRef(function TaskList({ items, onToggle, onAdd, onEdit, onRemove, onReorder, title, hideCompleted: hideProp, defaultHideCompleted = false, onHideCompletedChange, showProgress = true, sortCompleted, variant = "list", today, readOnly, labels, className, ...props }, ref) {
+    const t = useLabels("taskList", taskListLabels, labels);
+    const f = useFormat();
+    const { timeZone } = useLocale();
+    const now = useNow();
+    const todayKey = today ? (typeof today === "string" ? today : dayKey(today, timeZone)) : now === null ? null : dayKey(now, timeZone);
+    const [hideState, setHideState] = React.useState(defaultHideCompleted);
+    const hide = hideProp ?? hideState;
+    const setHide = (v) => {
+        setHideState(v);
+        onHideCompletedChange?.(v);
+    };
+    const [overrides, setOverrides] = React.useState({});
+    const headingId = React.useId();
+    // Drop overrides once the parent's data agrees.
+    React.useEffect(() => {
+        setOverrides((o) => {
+            const flat = new Map(flatten(items).map((i) => [i.id, i.done]));
+            let changed = false;
+            const next = {};
+            for (const k in o) {
+                if (flat.get(k) === o[k])
+                    changed = true;
+                else
+                    next[k] = o[k];
+            }
+            return changed ? next : o;
+        });
+    }, [items]);
+    const view = React.useMemo(() => applyDone(items, overrides), [items, overrides]);
+    const all = flatten(view);
+    const done = all.filter((i) => i.done).length;
+    const total = all.length;
+    const toggle = async (task, next) => {
+        if (!onToggle)
+            return;
+        setOverrides((o) => ({ ...o, [task.id]: next }));
+        try {
+            await onToggle(task.id, next);
+        }
+        catch {
+            setOverrides((o) => {
+                const n = { ...o };
+                delete n[task.id];
+                return n;
+            });
+            toast.danger(t("toggleError", { title: task.title }));
+        }
+    };
+    const ctx = {
+        t,
+        f,
+        todayKey,
+        variant,
+        readOnly: Boolean(readOnly),
+        hide,
+        sortCompleted: Boolean(sortCompleted),
+        toggle,
+        onAdd: readOnly ? undefined : onAdd,
+        onEdit: readOnly ? undefined : onEdit,
+        onRemove: readOnly ? undefined : onRemove,
+        onReorder: readOnly ? undefined : onReorder,
+    };
+    const ratio = total ? done / total : 0;
+    return (_jsxs("div", { ref: ref, "data-slot": "task-list", "data-variant": variant, className: cn("flex flex-col gap-3 [--task-box:1.125rem]", className), "aria-labelledby": title ? headingId : undefined, role: title ? "group" : undefined, ...props, children: [title || showProgress ? (_jsxs("div", { "data-slot": "task-list-header", className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-baseline gap-3", children: [title ? (_jsx("h3", { id: headingId, className: "text-sm font-semibold text-fg", children: title })) : null, showProgress && total > 0 ? (_jsx("span", { className: "text-xs text-fg-muted tabular", "aria-live": "polite", children: t("progress", { done: f.number(done), total: f.number(total) }) })) : null, done > 0 ? (_jsx("button", { type: "button", "aria-pressed": hide, onClick: () => setHide(!hide), className: "ms-auto cursor-pointer text-xs font-medium text-fg-muted underline-offset-2 hover:text-fg hover:underline focus-ring", children: hide ? t("showCompleted", { count: f.number(done) }) : t("hideCompleted") })) : null] }), showProgress && total > 0 ? (_jsx("span", { "aria-hidden": true, className: "relative block h-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { className: cn("absolute inset-y-0 start-0 rounded-full transition-[width] duration-500 ease-out motion-reduce:transition-none", ratio === 1 ? "bg-success" : "bg-accent"), style: { width: `${ratio * 100}%` } }) })) : null] })) : null, total === 0 ? (_jsx("p", { className: "rounded-ui border border-dashed border-line px-3 py-3 text-[13px] text-fg-subtle", children: t("empty") })) : hide && done === total ? (_jsx("p", { className: "rounded-ui bg-[color-mix(in_srgb,var(--success)_9%,transparent)] px-3 py-2.5 text-[13px] font-medium text-success", children: t("allDone") })) : (_jsx(TaskGroup, { items: view, ctx: ctx, depth: 0, "aria-label": typeof title === "string" ? title : t("list") })), total > 0 && done === total && !hide ? _jsx("p", { className: "text-[13px] font-medium text-success", children: t("allDone") }) : null, ctx.onAdd ? _jsx(TaskAdd, { onAdd: (v) => ctx.onAdd(v), t: t }) : null] }));
+});
+function TaskGroup({ items, ctx, depth, parentId, ...props }) {
+    let list = ctx.hide ? items.filter((i) => !i.done) : items;
+    if (ctx.sortCompleted)
+        list = [...list.filter((i) => !i.done), ...list.filter((i) => i.done)];
+    const ids = items.map((i) => i.id);
+    const move = (id, delta) => {
+        const from = ids.indexOf(id);
+        const to = from + delta;
+        if (from < 0 || to < 0 || to >= ids.length)
+            return;
+        const next = [...ids];
+        next.splice(to, 0, next.splice(from, 1)[0]);
+        void ctx.onReorder?.(next, parentId);
+    };
+    return (_jsx("ul", { "data-slot": "task-group", "data-depth": depth, className: cn("flex flex-col", depth > 0 && "ms-[calc(var(--task-box)/2+0.25rem)] border-s border-line ps-3"), ...props, children: list.map((task) => (_jsx(TaskItem, { task: task, ctx: ctx, depth: depth, parentId: parentId, onMove: ctx.onReorder ? (d) => move(task.id, d) : undefined }, task.id))) }));
+}
+function dueInfo(due, todayKey, done, ctx) {
+    if (!todayKey)
+        return { text: ctx.f.date(due, { month: "short", day: "numeric" }), tone: "muted", spoken: ctx.t("due", { when: ctx.f.date(due, "long") }) };
+    const days = Math.round((Date.UTC(+due.slice(0, 4), +due.slice(5, 7) - 1, +due.slice(8, 10)) - Date.UTC(+todayKey.slice(0, 4), +todayKey.slice(5, 7) - 1, +todayKey.slice(8, 10))) / 86_400_000);
+    const rel = Math.abs(days) <= 6 ? ctx.f.relative(days, "day", { numeric: "auto" }) : ctx.f.date(due, { month: "short", day: "numeric", ...(due.slice(0, 4) !== todayKey.slice(0, 4) ? { year: "numeric" } : {}) });
+    const text = rel.charAt(0).toLocaleUpperCase(ctx.f.locale) + rel.slice(1);
+    const tone = done ? "muted" : days < 0 ? "danger" : days === 0 ? "warning" : "muted";
+    return { text, tone, spoken: tone === "danger" ? ctx.t("overdue", { when: text }) : ctx.t("due", { when: text }) };
+}
+const PRIORITY_TONE = {
+    low: "text-fg-subtle",
+    medium: "text-info",
+    high: "text-warning",
+    urgent: "text-danger",
+};
+function TaskItem({ task, ctx, depth, parentId, onMove }) {
+    const { t } = ctx;
+    const [editing, setEditing] = React.useState(false);
+    const [adding, setAdding] = React.useState(false);
+    const [open, setOpen] = React.useState(true);
+    const titleId = React.useId();
+    const kids = task.children ?? [];
+    const kidsDone = flatten(kids).filter((k) => k.done).length;
+    const kidsTotal = flatten(kids).length;
+    const editBtn = React.useRef(null);
+    const rich = ctx.variant === "list";
+    const due = task.due && rich ? dueInfo(task.due, ctx.todayKey, task.done, ctx) : null;
+    const locked = task.disabled || ctx.readOnly;
+    return (_jsxs("li", { "data-slot": "task-item", "data-done": task.done ? "" : undefined, onKeyDown: (e) => {
+            if (!onMove || !e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown"))
+                return;
+            if (e.target !== e.currentTarget && e.target.closest("li") !== e.currentTarget)
+                return;
+            e.preventDefault();
+            onMove(e.key === "ArrowUp" ? -1 : 1);
+            const el = e.target;
+            requestAnimationFrame(() => el.focus());
+        }, children: [_jsxs("div", { className: cn("group/task relative -mx-2 flex items-start gap-2.5 rounded-ui-sm px-2 transition-colors hover:bg-hover", rich ? "py-2" : "py-1.5"), children: [_jsx(Checkbox, { checked: task.done, disabled: task.disabled, readOnly: ctx.readOnly, "aria-labelledby": titleId, onCheckedChange: (v) => ctx.toggle(task, v === true), className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [editing ? (_jsx(TaskTitleEditor, { initial: task.title, label: t("edit", { title: task.title }), onCancel: () => {
+                                    setEditing(false);
+                                    requestAnimationFrame(() => editBtn.current?.focus());
+                                }, onSave: async (title) => {
+                                    try {
+                                        await ctx.onEdit(task.id, { title });
+                                        setEditing(false);
+                                        requestAnimationFrame(() => editBtn.current?.focus());
+                                    }
+                                    catch {
+                                        toast.danger(t("saveError"));
+                                    }
+                                } })) : (_jsx("span", { id: titleId, className: cn("block text-[13.5px] leading-[var(--task-box)] text-fg transition-colors", task.done && "text-fg-subtle line-through decoration-[color-mix(in_srgb,var(--fg-subtle)_70%,transparent)]"), onDoubleClick: () => !locked && ctx.onEdit && setEditing(true), children: task.title })), task.description && !editing ? _jsx("p", { className: cn("mt-0.5 text-xs text-fg-muted", task.done && "text-fg-subtle"), children: task.description }) : null, rich && (due || task.priority || task.assignee || kidsTotal > 0) && !editing ? (_jsxs("div", { "data-slot": "task-meta", className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [kidsTotal > 0 ? (_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((o) => !o), className: "inline-flex cursor-pointer items-center gap-1 rounded-ui-sm tabular hover:text-fg focus-ring", children: [_jsx(ChevronDown, { className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90 rtl:rotate-90"), "aria-hidden": true }), _jsxs("span", { className: "sr-only", children: [t("expand", { title: task.title }), ", "] }), t("subtasks", { done: kidsDone, total: kidsTotal })] })) : null, due ? (_jsxs("span", { className: cn("inline-flex items-center gap-1", due.tone === "danger" && "font-medium text-danger", due.tone === "warning" && "font-medium text-warning"), children: [_jsx(CalendarDays, { className: "size-3.5", "aria-hidden": true }), _jsx("span", { "aria-hidden": true, children: due.text }), _jsx("span", { className: "sr-only", children: due.spoken })] })) : null, task.priority && task.priority !== "low" ? (_jsxs("span", { className: cn("inline-flex items-center gap-1", PRIORITY_TONE[task.priority], task.done && "text-fg-subtle"), children: [_jsx(Flag, { className: "size-3.5", "aria-hidden": true, fill: task.priority === "urgent" ? "currentColor" : "none" }), _jsx("span", { children: t("priority", { level: t(task.priority) }) })] })) : null, task.assignee ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Avatar, { name: task.assignee.name, src: task.assignee.avatar, size: "xs", "aria-hidden": true }), _jsx("span", { className: "sr-only", children: t("assignee", { name: task.assignee.name }) }), _jsx("span", { "aria-hidden": true, className: "max-sm:hidden", children: task.assignee.name.split(" ")[0] })] })) : null] })) : null] }), !locked && !editing && (ctx.onEdit || ctx.onRemove || ctx.onAdd) ? (_jsxs("span", { className: "flex shrink-0 items-center gap-0.5 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/task:opacity-100 sm:group-focus-within/task:opacity-100 [@media(hover:none)]:opacity-100", children: [ctx.onAdd && depth === 0 && rich ? (_jsx(IconButton, { label: t("addSubtaskTo", { title: task.title }), size: "xs", tooltip: false, onClick: () => setAdding(true), children: _jsx(ListPlus, {}) })) : null, ctx.onEdit ? (_jsx(IconButton, { ref: editBtn, label: t("edit", { title: task.title }), size: "xs", tooltip: false, onClick: () => setEditing(true), children: _jsx(Pencil, {}) })) : null, ctx.onRemove ? (_jsx(IconButton, { label: t("remove", { title: task.title }), size: "xs", tooltip: false, className: "hover:text-danger", onClick: () => void ctx.onRemove(task.id), children: _jsx(Trash2, {}) })) : null] })) : null] }), (kids.length > 0 && open) || adding ? (_jsxs("div", { className: "pb-1", children: [kids.length > 0 && open ? _jsx(TaskGroup, { items: kids, ctx: ctx, depth: depth + 1, parentId: task.id }) : null, adding ? (_jsx("div", { className: "ms-[calc(var(--task-box)/2+0.25rem)] border-s border-line ps-3", children: _jsx(TaskAdd, { autoFocus: true, compact: true, placeholder: t("addSubtask"), t: t, onCancel: () => setAdding(false), onAdd: (v) => ctx.onAdd(v, task.id) }) })) : null] })) : null] }));
+}
+function TaskTitleEditor({ initial, label, onSave, onCancel }) {
+    const [v, setV] = React.useState(initial);
+    const [busy, setBusy] = React.useState(false);
+    return (_jsx("input", { autoFocus: true, "aria-label": label, value: v, disabled: busy, dir: "auto", onChange: (e) => setV(e.target.value), onBlur: () => !busy && onCancel(), onKeyDown: async (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onCancel();
+            }
+            else if (e.key === "Enter") {
+                e.preventDefault();
+                const next = v.trim();
+                if (!next || next === initial)
+                    return onCancel();
+                setBusy(true);
+                await onSave(next);
+                setBusy(false);
+            }
+        }, className: "-my-0.5 h-[calc(var(--task-box)+0.25rem)] w-full rounded-ui-sm border border-field-border-hover bg-field px-1.5 text-[13.5px] text-fg outline-none focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_18%,transparent)]" }));
+}
+function TaskAdd({ onAdd, onCancel, t, placeholder, autoFocus, compact }) {
+    const [v, setV] = React.useState("");
+    const [busy, setBusy] = React.useState(false);
+    const ref = React.useRef(null);
+    return (_jsxs("div", { "data-slot": "task-add", className: cn("group/add flex items-center gap-2.5 rounded-ui-sm text-fg-subtle focus-within:text-fg-muted", compact ? "py-1" : "-mx-2 px-2 py-1.5 hover:bg-hover"), children: [_jsx(Plus, { className: "size-(--task-box) shrink-0 p-px", "aria-hidden": true }), _jsx("input", { ref: ref, autoFocus: autoFocus, value: v, dir: "auto", disabled: busy, placeholder: placeholder ?? t("add"), "aria-label": placeholder ?? t("add"), onChange: (e) => setV(e.target.value), onBlur: () => !v && onCancel?.(), onKeyDown: async (e) => {
+                    if (e.key === "Escape" && onCancel) {
+                        e.preventDefault();
+                        onCancel();
+                    }
+                    if (e.key !== "Enter")
+                        return;
+                    e.preventDefault();
+                    const title = v.trim();
+                    if (!title)
+                        return;
+                    setBusy(true);
+                    try {
+                        await onAdd(title);
+                        setV("");
+                    }
+                    catch {
+                        toast.danger(t("saveError"));
+                    }
+                    finally {
+                        setBusy(false);
+                        requestAnimationFrame(() => ref.current?.focus());
+                    }
+                }, className: "h-7 min-w-0 flex-1 bg-transparent text-[13.5px] text-fg outline-none placeholder:text-fg-subtle" })] }));
+}