harebear-ui 0.8.0 → 0.9.0

package/dist/components/ai/code-block.js

@@ -1,11 +1,13 @@
 "use client";
+import { Callout } from "../admin/callout.js";
 import { Button } from "../ui/button.js";
 import { CodeBlock, CodeBlockContent, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "../ui/code-block.js";
 import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
 import { useHighlightedCode } from "../../hooks/use-highlighted-code.js";
 import { cn } from "../../lib/utils.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, CopyIcon, LightbulbIcon } from "lucide-react";
 // src/components/ai/code-block.tsx
 /**
 * One-prop code panel: language label, copy button, shiki highlighting (loaded
@@ -50,16 +52,63 @@ function InlineCode({ truncate, className, children, title, ...props }) {
 		children: cut ? `${children.slice(0, truncate)}…` : children
 	});
 }
+const TIP = /^\s*Tip:\s*/;
+/** The children with a leading "Tip:" removed, or undefined when they do not start with it. */
+function withoutTip(children) {
+	const items = React.Children.toArray(children);
+	const i = items.findIndex((c) => !(typeof c === "string" && c.trim() === ""));
+	const first = items[i];
+	let rest;
+	if (typeof first === "string") {
+		if (!TIP.test(first)) return void 0;
+		rest = first.replace(TIP, "");
+	} else if (React.isValidElement(first) && typeof first.type === "string") {
+		const inner = withoutTip(first.props.children);
+		if (inner === void 0) return void 0;
+		rest = React.cloneElement(first, void 0, inner);
+	} else return;
+	return [
+		...items.slice(0, i),
+		rest,
+		...items.slice(i + 1)
+	];
+}
+/**
+* A blockquote that becomes a `Callout` when its first word is "Tip:" (the word is dropped).
+* Prose applies it to blockquote children; pass it to react-markdown as `components={{ blockquote: ProseBlockquote }}`.
+*/
+function ProseBlockquote({ children, node: _node, ...props }) {
+	const tip = withoutTip(children);
+	if (tip === void 0) return /* @__PURE__ */ jsx("blockquote", {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Callout, {
+		"data-tip": "",
+		icon: /* @__PURE__ */ jsx(LightbulbIcon, {}),
+		className: props.className,
+		children: tip
+	});
+}
+/** Swaps plain blockquote elements for ProseBlockquote, at any depth of plain HTML elements. */
+function withTips(children) {
+	return React.Children.map(children, (c) => {
+		if (!React.isValidElement(c) || typeof c.type !== "string") return c;
+		if (c.type === "blockquote") return /* @__PURE__ */ jsx(ProseBlockquote, { ...c.props });
+		return c.props.children === void 0 ? c : React.cloneElement(c, void 0, withTips(c.props.children));
+	});
+}
 /**
 * Typography for long-form and model output. Styles plain HTML children
 * (p, ul, ol, li, strong, a, code, pre, h1-h4, blockquote, table), so it works
-* with react-markdown or any HTML renderer.
+* with react-markdown or any HTML renderer. A blockquote starting "Tip:" renders as a Callout.
 */
-function Prose({ className, ...props }) {
+function Prose({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "prose",
 		className: cn("flex min-w-0 flex-col gap-3.5 text-[15px] leading-[1.65] wrap-anywhere text-foreground", "[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-2 [&_ol]:pl-5.5", "[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-2 [&_ul]:pl-5.5", "[&_strong]:font-semibold [&_a]:text-primary [&_a]:underline-offset-4 hover:[&_a]:underline", "[&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold", "[&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground", "[&_:not(pre)>code]:rounded-[6px] [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[12.5px]", "[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-4.5 [&_pre]:font-mono [&_pre]:text-[13px]", "[&_table]:w-full [&_table]:text-sm [&_td]:border-b [&_td]:py-2 [&_th]:border-b [&_th]:py-2 [&_th]:text-left [&_th]:font-medium", className),
-		...props
+		...props,
+		children: withTips(children)
 	});
 }
-export { CodeSnippet, InlineCode, Prose };
+export { CodeSnippet, InlineCode, Prose, ProseBlockquote };

package/dist/components/ai/conversation-list.d.ts

@@ -39,11 +39,21 @@ export interface ConversationListProps extends Omit<React.ComponentProps<"nav">,
  * and hides itself when the sidebar is collapsed to its icon rail.
  */
 declare function ConversationList({ groups, activeId, onSelect, renderAction, onDelete, deleteDescription, empty, className, ...props }: ConversationListProps): React.JSX.Element;
+export interface GroupByDateOptions {
+  /** Reference time. Default now; pass it for deterministic tests. */
+  now?: number | Date;
+  /**
+   * `"day"` (default): Today / Yesterday / Previous 7 days / Earlier. `"week"`: Today / This week (the 6 days before
+   * today) / Earlier.
+   */
+  buckets?: "day" | "week";
+}
 /**
- * Buckets items into Today / Yesterday / Previous 7 days / Earlier by a timestamp (ms or Date),
- * newest first, and drops empty groups. Pass `now` for deterministic tests.
+ * Buckets items into Today / Yesterday / Previous 7 days / Earlier (or Today / This week / Earlier with
+ * `buckets: "week"`) by a timestamp (ms or Date), newest first, and drops empty groups. The last argument is the
+ * options, or just `now`.
  */
-declare function groupByDate<T>(items: T[], getDate: (item: T) => number | Date, toConversation: (item: T) => Conversation, now?: number | Date): ConversationGroup[];
+declare function groupByDate<T>(items: T[], getDate: (item: T) => number | Date, toConversation: (item: T) => Conversation, options?: number | Date | GroupByDateOptions): ConversationGroup[];
 /**
  * Short timestamp for lists and headers: the time today ("9:41 AM"), the date this year ("Nov 3"), else with the
  * year ("Nov 3, 2025"). Uses the browser locale unless `locale` is given. Pass `now` for deterministic tests.

package/dist/components/ai/conversation-list.js

@@ -94,39 +94,28 @@ function ConversationList({ groups, activeId, onSelect, renderAction, onDelete,
 	});
 }
 /**
-* Buckets items into Today / Yesterday / Previous 7 days / Earlier by a timestamp (ms or Date),
-* newest first, and drops empty groups. Pass `now` for deterministic tests.
+* Buckets items into Today / Yesterday / Previous 7 days / Earlier (or Today / This week / Earlier with
+* `buckets: "week"`) by a timestamp (ms or Date), newest first, and drops empty groups. The last argument is the
+* options, or just `now`.
 */
-function groupByDate(items, getDate, toConversation, now = Date.now()) {
+function groupByDate(items, getDate, toConversation, options = {}) {
+	const { now = Date.now(), buckets = "day" } = typeof options === "number" || options instanceof Date ? { now: options } : options;
 	const d = new Date(now);
 	const midnight = (daysAgo) => new Date(d.getFullYear(), d.getMonth(), d.getDate() - daysAgo).getTime();
-	const [today, yesterday, weekAgo] = [
-		midnight(0),
-		midnight(1),
-		midnight(7)
-	];
-	const groups = [
-		{
-			label: "Today",
-			items: []
-		},
-		{
-			label: "Yesterday",
-			items: []
-		},
-		{
-			label: "Previous 7 days",
-			items: []
-		},
-		{
-			label: "Earlier",
-			items: []
-		}
+	const bounds = buckets === "week" ? [["Today", midnight(0)], ["This week", midnight(6)]] : [
+		["Today", midnight(0)],
+		["Yesterday", midnight(1)],
+		["Previous 7 days", midnight(7)]
 	];
+	const groups = [...bounds.map(([label]) => label), "Earlier"].map((label) => ({
+		label,
+		items: []
+	}));
 	const sorted = [...items].sort((a, b) => +getDate(b) - +getDate(a));
 	for (const item of sorted) {
 		const t = +getDate(item);
-		groups[t >= today ? 0 : t >= yesterday ? 1 : t >= weekAgo ? 2 : 3]?.items.push(toConversation(item));
+		const i = bounds.findIndex(([, from]) => t >= from);
+		groups[i === -1 ? bounds.length : i]?.items.push(toConversation(item));
 	}
 	return groups.filter((g) => g.items.length);
 }

package/dist/components/auth/auth.js

@@ -3,6 +3,7 @@ import { Button } from "../ui/button.js";
 import { Card, CardContent } from "../ui/card.js";
 import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldSeparator } from "../ui/field.js";
 import { Input } from "../ui/input.js";
+import { PasswordInput } from "../ui/password-input.js";
 import { Spinner } from "../ui/spinner.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
@@ -187,10 +188,9 @@ function LoginForm({ title = "Welcome back", description, onSubmit, mode = "pass
 					className: "ms-auto text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
 					children: "Forgot password?"
 				})]
-			}), /* @__PURE__ */ jsx(Input, {
+			}), /* @__PURE__ */ jsx(PasswordInput, {
 				id: `${id}-password`,
 				name: "password",
-				type: "password",
 				autoComplete: "current-password",
 				required: true,
 				disabled: loading
@@ -280,10 +280,9 @@ function SignupForm({ title = "Create your account", description = "Enter your d
 					htmlFor: `${id}-password`,
 					children: "Password"
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx(PasswordInput, {
 					id: `${id}-password`,
 					name: "password",
-					type: "password",
 					autoComplete: "new-password",
 					onInput: (e) => (e.currentTarget.form?.elements.namedItem("confirm"))?.setCustomValidity(""),
 					minLength: minPasswordLength,
@@ -295,10 +294,9 @@ function SignupForm({ title = "Create your account", description = "Enter your d
 			confirmPassword && /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: `${id}-confirm`,
 				children: "Confirm password"
-			}), /* @__PURE__ */ jsx(Input, {
+			}), /* @__PURE__ */ jsx(PasswordInput, {
 				id: `${id}-confirm`,
 				name: "confirm",
-				type: "password",
 				autoComplete: "new-password",
 				required: true,
 				disabled: loading,

package/dist/components/data/agenda-row.d.ts

@@ -0,0 +1,26 @@
+import { CategoryColor } from "../admin/category.js";
+import * as React from "react";
+export interface AgendaRowWho {
+  name: string;
+  /** Category color of the member or calendar, 1 to 6. */
+  color: CategoryColor;
+}
+export interface AgendaRowProps extends Omit<React.ComponentProps<"div">, "title"> {
+  title: React.ReactNode;
+  /** Left column, e.g. "3:15" or "All day". */
+  time?: React.ReactNode;
+  /** One line under the title. Truncates. */
+  meta?: React.ReactNode;
+  /** Whose it is: a category-colored dot and the name at the right. */
+  who?: AgendaRowWho;
+  /** Pass with `onCheckedChange` to draw a to-do check instead of the event icon. */
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  /** Warning-tinted check. Also say it in words in `meta`. */
+  important?: boolean;
+  /** Makes the title a button, e.g. to open an event dialog or a DetailSheet. */
+  onOpen?: () => void;
+}
+/** One line of a day's agenda: time, event icon or to-do check, title, whose dot. */
+declare function AgendaRow({ title, time, meta, who, checked, onCheckedChange, important, onOpen, className, ...props }: AgendaRowProps): React.JSX.Element;
+export { AgendaRow };

package/dist/components/data/agenda-row.js

@@ -0,0 +1,62 @@
+"use client";
+import { CategoryDot } from "../admin/category.js";
+import { CheckCircle } from "../ui/check-circle.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+// src/components/data/agenda-row.tsx
+/** One line of a day's agenda: time, event icon or to-do check, title, whose dot. */
+function AgendaRow({ title, time, meta, who, checked, onCheckedChange, important, onOpen, className, ...props }) {
+	const titleId = React.useId();
+	const titleClass = cn("text-[15px] leading-6 wrap-anywhere", checked ? "text-muted-foreground line-through decoration-muted-foreground/60" : "text-foreground");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "agenda-row",
+		"data-checked": checked || void 0,
+		className: cn("flex min-w-0 items-start gap-3 rounded-lg px-2 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "w-14 shrink-0 text-[13px] leading-6 text-muted-foreground tabular-nums",
+				children: time
+			}),
+			onCheckedChange ? /* @__PURE__ */ jsx(CheckCircle, {
+				checked: !!checked,
+				onCheckedChange: (v) => onCheckedChange(v === true),
+				tone: important && !checked ? "important" : "default",
+				"aria-labelledby": titleId
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "flex size-6 shrink-0 items-center justify-center text-muted-foreground",
+				children: /* @__PURE__ */ jsx(CalendarIcon, {
+					"aria-hidden": "true",
+					className: "size-[18px]"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [onOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					id: titleId,
+					onClick: onOpen,
+					className: cn(titleClass, "self-start rounded-sm text-left outline-none hover:underline hover:underline-offset-4 focus-visible:ring-4 focus-visible:ring-ring/20"),
+					children: title
+				}) : /* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: titleClass,
+					children: title
+				}), meta && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-muted-foreground",
+					children: meta
+				})]
+			}),
+			who && /* @__PURE__ */ jsxs("span", {
+				className: "flex max-w-32 shrink-0 items-center gap-1.5 text-[13px] leading-6 text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(CategoryDot, { color: who.color }), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: who.name
+				})]
+			})
+		]
+	});
+}
+export { AgendaRow };

package/dist/components/data/day-strip.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface DayStripDay {
+  /** DOM id of the element to jump to, e.g. a SectionedList section id. */
+  id: string;
+  /** Floating local date, `YYYY-MM-DD`. */
+  date: string;
+  /** Shows a dot under the date. */
+  hasPlans?: boolean;
+}
+export interface DayStripProps extends React.ComponentProps<"nav"> {
+  days: DayStripDay[];
+  /** Id of the selected day. */
+  value?: string;
+  /** Called with the day's id after it scrolls that element into view. */
+  onValueChange?: (id: string) => void;
+}
+/**
+ * A row of day buttons (weekday, date, a dot when there are plans) that jump to the element with the day's id.
+ * Scrolls inside itself when the days do not fit. Smooth scrolling is off under prefers-reduced-motion.
+ */
+declare function DayStrip({ days, value, onValueChange, className, "aria-label": ariaLabel, ...props }: DayStripProps): React.JSX.Element;
+export { DayStrip };

package/dist/components/data/day-strip.js

@@ -0,0 +1,68 @@
+"use client";
+import { parseLocalDate } from "../../lib/date.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/data/day-strip.tsx
+/**
+* A row of day buttons (weekday, date, a dot when there are plans) that jump to the element with the day's id.
+* Scrolls inside itself when the days do not fit. Smooth scrolling is off under prefers-reduced-motion.
+*/
+function DayStrip({ days, value, onValueChange, className, "aria-label": ariaLabel, ...props }) {
+	const jump = (e, id) => {
+		e.preventDefault();
+		const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const el = document.getElementById(id);
+		if (el) {
+			el.scrollIntoView?.({
+				behavior: reduce ? "auto" : "smooth",
+				block: "start"
+			});
+			if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
+			el.focus({ preventScroll: true });
+		}
+		onValueChange?.(id);
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "day-strip",
+		"aria-label": ariaLabel ?? "Jump to a day",
+		className: cn("min-w-0 overflow-x-auto", className),
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex gap-2 p-1",
+			children: days.map((day) => {
+				const selected = day.id === value;
+				const date = parseLocalDate(day.date);
+				const label = date.toLocaleDateString(void 0, {
+					weekday: "long",
+					month: "long",
+					day: "numeric"
+				});
+				return /* @__PURE__ */ jsx("li", {
+					className: "flex shrink-0 grow basis-18",
+					children: /* @__PURE__ */ jsxs("a", {
+						href: `#${day.id}`,
+						"aria-current": selected ? "true" : void 0,
+						"aria-label": day.hasPlans ? `${label}, has plans` : label,
+						onClick: (e) => jump(e, day.id),
+						className: cn("flex min-h-21 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-2 outline-none transition-colors focus-visible:ring-4 focus-visible:ring-ring/20 motion-reduce:transition-none", selected ? "bg-primary text-primary-foreground" : "bg-card text-foreground shadow-card hover:bg-muted"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: cn("text-xs font-medium", selected ? "text-primary-foreground" : "text-muted-foreground"),
+								children: date.toLocaleDateString(void 0, { weekday: "short" })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[22px] leading-tight font-semibold tracking-tight tabular-nums",
+								children: date.getDate()
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: cn("size-1.5 rounded-full", !day.hasPlans && "bg-transparent", day.hasPlans && (selected ? "bg-primary-foreground" : "bg-primary"))
+							})
+						]
+					})
+				}, day.id);
+			})
+		})
+	});
+}
+export { DayStrip };

package/dist/components/data/sectioned-list.d.ts

@@ -8,22 +8,36 @@ export interface SectionedListItem {
   important?: boolean;
   assignee?: TaskRowAssignee;
 }
-export interface SectionedListSection {
+export interface SectionedListSection<T extends SectionedListItem = SectionedListItem> {
+  /** Also the section's DOM id, so a DayStrip or `#id` link can jump to it. */
   id: string;
   /** Section heading, e.g. "Today" or "Groceries". Omit for a section without one. */
   title?: React.ReactNode;
-  items: SectionedListItem[];
+  /** At the right of the heading, e.g. a small ghost Button "Move to today". */
+  action?: React.ReactNode;
+  /** Keeps the section shown with this text when it has no open item, e.g. "Nothing planned". */
+  empty?: React.ReactNode;
+  items: T[];
 }
-export interface SectionedListProps extends Omit<React.ComponentProps<"div">, "onToggle"> {
-  sections: SectionedListSection[];
+export interface SectionedListProps<T extends SectionedListItem = SectionedListItem> extends Omit<React.ComponentProps<"div">, "onToggle"> {
+  sections: SectionedListSection<T>[];
   /** Called when an item's check changes. Update `done` in your data; the row folds away by itself. */
   onToggle: (id: string, done: boolean) => void;
+  /**
+   * Draws a row instead of TaskRow, e.g. an AgendaRow. Call `toggle(done)` from its check so the row lingers and
+   * folds away like a TaskRow. Items without `done` (events) always stay.
+   */
+  renderItem?: (item: T, toggle: (done: boolean) => void) => React.ReactNode;
+  /** How long a ticked row stays struck through before it folds away, e.g. about the length of an Undo toast. Default 600. */
+  lingerMs?: number;
   /** Makes item titles buttons, e.g. to open a DetailSheet. */
   onOpen?: (id: string) => void;
   /** Shows one add box at the top. Called with the trimmed text on Enter. */
   onAdd?: (text: string) => void;
   /** Add box placeholder and label. Default "Add a to-do". */
   addPlaceholder?: string;
+  /** Chips at the right of the add box while it has text, e.g. the date or person parsed from it. Like AskBox `chips`. */
+  addChips?: (text: string) => React.ReactNode;
   /** Shown when no item is open, e.g. <Empty /> or a line of text. */
   empty?: React.ReactNode;
   /** Start with the done items shown. Default false. */
@@ -31,7 +45,8 @@ export interface SectionedListProps extends Omit<React.ComponentProps<"div">, "o
 }
 /**
  * A to-do list: one add box, sections with headings, done items folded into a "Show N done" toggle, an empty
- * state. Rows fold in and out with Collapse, so nothing jumps.
+ * state. Rows fold in and out with Collapse, so nothing jumps. `renderItem` draws other rows (AgendaRow), so a week
+ * agenda is one SectionedList with a section per day.
  */
-declare function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder, empty, defaultShowDone, className, ...props }: SectionedListProps): React.JSX.Element;
+declare function SectionedList<T extends SectionedListItem = SectionedListItem>({ sections, onToggle, renderItem, lingerMs, onOpen, onAdd, addPlaceholder, addChips, empty, defaultShowDone, className, ...props }: SectionedListProps<T>): React.JSX.Element;
 export { SectionedList };

package/dist/components/data/sectioned-list.js

@@ -6,13 +6,12 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, PlusIcon } from "lucide-react";
 // src/components/data/sectioned-list.tsx
-/** How long a ticked row stays in place (so the check is seen) before it folds away. */
-const LINGER_MS = 600;
 /**
 * A to-do list: one add box, sections with headings, done items folded into a "Show N done" toggle, an empty
-* state. Rows fold in and out with Collapse, so nothing jumps.
+* state. Rows fold in and out with Collapse, so nothing jumps. `renderItem` draws other rows (AgendaRow), so a week
+* agenda is one SectionedList with a section per day.
 */
-function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder = "Add a to-do", empty, defaultShowDone = false, className, ...props }) {
+function SectionedList({ sections, onToggle, renderItem, lingerMs = 600, onOpen, onAdd, addPlaceholder = "Add a to-do", addChips, empty, defaultShowDone = false, className, ...props }) {
 	const [showDone, setShowDone] = React.useState(defaultShowDone);
 	const [lingering, setLingering] = React.useState(/* @__PURE__ */ new Set());
 	const timers = React.useRef(/* @__PURE__ */ new Map());
@@ -31,14 +30,14 @@ function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder = "Ad
 					next.delete(id);
 					return next;
 				});
-			}, LINGER_MS));
+			}, lingerMs));
 		}
 		onToggle(id, done);
 	};
 	const shown = (item) => !item.done || lingering.has(item.id);
 	const done = sections.flatMap((s) => s.items.filter((i) => i.done && !lingering.has(i.id)));
 	const anyOpen = sections.some((s) => s.items.some(shown));
-	const row = (item) => /* @__PURE__ */ jsx(TaskRow, {
+	const row = (item) => renderItem ? renderItem(item, (v) => toggle(item.id, v)) : /* @__PURE__ */ jsx(TaskRow, {
 		title: item.title,
 		meta: item.meta,
 		checked: !!item.done,
@@ -54,25 +53,44 @@ function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder = "Ad
 		children: [
 			onAdd && /* @__PURE__ */ jsx(AddBox, {
 				placeholder: addPlaceholder,
-				onAdd
+				onAdd,
+				chips: addChips
 			}),
 			sections.map((section) => {
-				const visible = section.items.some(shown);
+				const hasOpen = section.items.some(shown);
 				return /* @__PURE__ */ jsx(Collapse, {
-					open: visible,
+					open: hasOpen || section.empty != null,
 					children: /* @__PURE__ */ jsxs("section", {
+						id: section.id,
 						"aria-label": typeof section.title === "string" ? section.title : void 0,
-						children: [section.title && /* @__PURE__ */ jsx("h2", {
-							className: "px-2 pb-1 text-[13px] font-semibold text-muted-foreground",
-							children: section.title
-						}), /* @__PURE__ */ jsx("ul", {
-							className: "flex flex-col",
-							children: section.items.map((item) => /* @__PURE__ */ jsx(Collapse, {
-								open: shown(item),
-								role: "listitem",
-								children: row(item)
-							}, item.id))
-						})]
+						children: [
+							(section.title || section.action) && /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 items-center gap-2 px-2 pb-1",
+								children: [section.title && /* @__PURE__ */ jsx("h2", {
+									className: "min-w-0 text-[13px] font-semibold text-muted-foreground",
+									children: section.title
+								}), section.action && /* @__PURE__ */ jsx("div", {
+									className: "ml-auto flex shrink-0 items-center max-md:[&>*]:min-h-11",
+									children: section.action
+								})]
+							}),
+							section.empty != null && /* @__PURE__ */ jsx(Collapse, {
+								open: !hasOpen,
+								children: /* @__PURE__ */ jsx("p", {
+									"data-slot": "sectioned-list-section-empty",
+									className: "px-2 py-2.5 text-sm text-muted-foreground",
+									children: section.empty
+								})
+							}),
+							/* @__PURE__ */ jsx("ul", {
+								className: "flex flex-col",
+								children: section.items.map((item) => /* @__PURE__ */ jsx(Collapse, {
+									open: shown(item),
+									role: "listitem",
+									children: row(item)
+								}, item.id))
+							})
+						]
 					})
 				}, section.id);
 			}),
@@ -102,7 +120,7 @@ function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder = "Ad
 		]
 	});
 }
-function AddBox({ placeholder, onAdd }) {
+function AddBox({ placeholder, onAdd, chips }) {
 	const [value, setValue] = React.useState("");
 	const id = React.useId();
 	return /* @__PURE__ */ jsxs("form", {
@@ -132,6 +150,11 @@ function AddBox({ placeholder, onAdd }) {
 				placeholder,
 				autoComplete: "off",
 				className: "h-full min-w-0 flex-1 bg-transparent text-[15px] text-foreground outline-none placeholder:text-muted-foreground"
+			}),
+			chips && value.trim() && /* @__PURE__ */ jsx("div", {
+				"data-slot": "sectioned-list-add-chips",
+				className: "flex shrink-0 items-center gap-1.5",
+				children: chips(value)
 			})
 		]
 	});

package/dist/components/data/task-row.d.ts

@@ -1,7 +1,10 @@
+import { CategoryColor } from "../admin/category.js";
 import * as React from "react";
 export interface TaskRowAssignee {
   name: string;
   avatarUrl?: string;
+  /** Category colour behind the initials when there is no photo. */
+  color?: CategoryColor;
 }
 export interface TaskRowProps extends Omit<React.ComponentProps<"div">, "title"> {
   title: React.ReactNode;

package/dist/components/data/task-row.js

@@ -1,6 +1,5 @@
 "use client";
-import { initials } from "../admin/user-chip.js";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { MemberAvatar } from "../admin/user-chip.js";
 import { CheckCircle } from "../ui/check-circle.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
@@ -40,19 +39,12 @@ function TaskRow({ title, meta, checked, onCheckedChange, assignee, important, o
 					children: meta
 				})]
 			}),
-			assignee && /* @__PURE__ */ jsxs(Avatar, {
+			assignee && /* @__PURE__ */ jsx(MemberAvatar, {
 				size: "sm",
-				role: "img",
-				"aria-label": assignee.name,
-				title: assignee.name,
-				children: [assignee.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
-					src: assignee.avatarUrl,
-					alt: ""
-				}), /* @__PURE__ */ jsx(AvatarFallback, {
-					"aria-hidden": "true",
-					className: "group-data-[size=sm]/avatar:text-xs",
-					children: initials(assignee.name)
-				})]
+				name: assignee.name,
+				avatarUrl: assignee.avatarUrl,
+				color: assignee.color,
+				title: assignee.name
 			})
 		]
 	});

package/dist/components/ui/avatar.js

@@ -21,7 +21,7 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("flex size-full items-center justify-center rounded-full bg-primary-soft text-[13px] font-semibold text-primary group-data-[size=sm]/avatar:text-[11px] group-data-[size=lg]/avatar:text-lg", className),
+		className: cn("flex size-full items-center justify-center rounded-full bg-primary-soft text-[13px] font-semibold text-primary group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-lg", className),
 		...props
 	});
 }

package/dist/components/ui/kbd.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
-		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-[6px] border bg-card px-1.5 font-mono text-[11px] font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-[6px] border bg-card px-1.5 font-mono text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
 		...props
 	});
 }

package/dist/components/ui/password-input.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface PasswordInputProps extends Omit<React.ComponentProps<"input">, "type"> {
+  /** Classes for the wrapping div. `className` goes to the input. */
+  wrapperClassName?: string;
+}
+/** Password `Input` with a Show/Hide button that switches it to plain text. Props go to the input. */
+declare function PasswordInput({ className, wrapperClassName, disabled, ...props }: PasswordInputProps): React.JSX.Element;
+export { PasswordInput };