harebear-ui 0.8.1 → 0.10.0

package/AGENTS.md

@@ -26,7 +26,7 @@ src/
   components/ui/        shadcn primitives (radix-nova style), restyled. Keep upstream structure.
   components/theme/     ThemeProvider, ThemeToggle, ThemeScript.
   components/admin/     Layout and dashboard composites (AppShell, AppNav, FocusLayout, SettingsSection, StatCard...).
-  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars, TaskRow, SectionedList.
+  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars, TaskRow, SectionedList, AgendaRow, DayStrip.
   components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput...) and the assistant layer (AssistantProvider, AssistantDock, AskBox, DictationButton, ActionReceipt).
   components/auth/      AuthLayout, LoginForm, SignupForm (parameterized shadcn login/signup blocks).
   components/layout/    Prop-driven layout and text (Stack, Text, Metric, ShowMore, Collapse).
@@ -50,7 +50,7 @@ test/                   Vitest: API snapshot, docs coverage, token integrity, be
 4. Floors: checks 24px, phone touch targets 44px, no text under 12px, icon-only buttons have `aria-label`.
 5. `pnpm gen`, then add the component to `docs/COMPONENTS.md` (the docs test fails otherwise) and to the index in `llms.txt`. Use a heading like ``### `Name` `` or a table row with the name in backticks, so `npx harebear-ui docs Name` finds it.
 6. Use it in a playground screen if it is visual, and look at it in light and dark mode and at 375px width.
-7. Add a behavior test in `test/` if it has logic (`components.test.tsx`, `building-blocks.test.tsx`, `household.test.tsx` for the household and assistant layer). `pnpm test -u` to accept the new export in the snapshot.
+7. Add a behavior test in `test/` if it has logic (`components.test.tsx`, `building-blocks.test.tsx`, `household.test.tsx` for the household and assistant layer, `people.test.tsx` (avatars, category colours), `forms.test.tsx` (form fields, DetailSheet, Prose tips)). `pnpm test -u` to accept the new export in the snapshot.
 8. `pnpm check`.
 
 ## Looking at your work

package/dist/components/admin/app-nav.d.ts

@@ -6,10 +6,16 @@ export interface AppNavPlace extends Omit<AppNavItem, "badge"> {
   count?: number;
   /** Show in the phone tab bar. Default true; the first 5 that are not false are shown. */
   tab?: boolean;
+  /** Show in the desktop sidebar. Default true; false makes a tab-bar-only place, e.g. Lists when the sidebar has a Lists group. */
+  sidebar?: boolean;
 }
 export interface AppNavGroup {
   /** Group heading, e.g. "Lists". */
   label: string;
+  /** Makes the heading a link, e.g. "/lists"; the chevron next to it still collapses the group. */
+  href?: string;
+  /** The heading link is the current page: aria-current and the active text style. */
+  active?: boolean;
   items: AppNavPlace[];
   /** Expanded at first. Default true. */
   defaultOpen?: boolean;
@@ -22,6 +28,8 @@ export interface AppNavAction {
   label: string;
   icon: React.ReactNode;
   onSelect: () => void;
+  /** Show the button in the desktop sidebar. Default true; false keeps only the round phone button. */
+  sidebar?: boolean;
 }
 export interface AppNavProps {
   /** Product mark at the top of the sidebar, usually <AppBrand />. */
@@ -43,6 +51,12 @@ export interface AppNavProps {
   defaultOpen?: boolean;
   /** Sidebar width. Default "15.75rem". */
   width?: string;
+  /**
+   * Main column exactly fills the screen (minus the tab bar on phones, and the round action button's space when
+   * `action` is set) and does not scroll, for a chat or map. The
+   * child takes the height with `flex-1 min-h-0` (ChatPanel does) and scrolls inside itself.
+   */
+  fill?: boolean;
   /** Classes for the main column. */
   className?: string;
   children?: React.ReactNode;
@@ -53,5 +67,5 @@ export interface AppNavProps {
  * and an optional round action button. The main column gets bottom padding and sets `--hb-bottom-inset` (and
  * `--hb-fab-inset`) so an AssistantDock rendered inside sits above the tab bar and the action button.
  */
-declare function AppNav({ brand, places, group, footer, action, label, linkComponent, collapsible, storageKey, defaultOpen, width, className, children }: AppNavProps): React.JSX.Element;
+declare function AppNav({ brand, places, group, footer, action, label, linkComponent, collapsible, storageKey, defaultOpen, width, fill, className, children }: AppNavProps): React.JSX.Element;
 export { AppNav };

package/dist/components/admin/app-nav.js

@@ -4,7 +4,7 @@ import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar.js";
-import { useToastClearance } from "../../lib/toast-clearance.js";
+import { useToastClearance } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +17,7 @@ const TAB_LIMIT = 5;
 * and an optional round action button. The main column gets bottom padding and sets `--hb-bottom-inset` (and
 * `--hb-fab-inset`) so an AssistantDock rendered inside sits above the tab bar and the action button.
 */
-function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", className, children }) {
+function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", fill, className, children }) {
 	const tabs = places.filter((p) => p.tab !== false).slice(0, TAB_LIMIT);
 	useToastClearance("--hb-toast-nav", "calc(4.5rem + env(safe-area-inset-bottom))", tabs.length > 0);
 	useToastClearance("--hb-toast-fab", "4.5rem", Boolean(action));
@@ -28,7 +28,7 @@ function AppNav({ brand, places, group, footer, action, label = "Main", linkComp
 		defaultOpen,
 		width,
 		sidebarFooter: footer,
-		sidebarActions: action && /* @__PURE__ */ jsxs(Button, {
+		sidebarActions: action && action.sidebar !== false && /* @__PURE__ */ jsxs(Button, {
 			type: "button",
 			"aria-label": action.label,
 			onClick: action.onSelect,
@@ -44,7 +44,7 @@ function AppNav({ brand, places, group, footer, action, label = "Main", linkComp
 			className: "flex flex-col gap-5",
 			children: [/* @__PURE__ */ jsx(SidebarMenu, {
 				className: "gap-1 group-data-[collapsible=icon]:items-center",
-				children: places.map((place) => /* @__PURE__ */ jsx(PlaceItem, {
+				children: places.filter((p) => p.sidebar !== false).map((place) => /* @__PURE__ */ jsx(PlaceItem, {
 					place,
 					Link: linkComponent
 				}, place.label))
@@ -53,7 +53,7 @@ function AppNav({ brand, places, group, footer, action, label = "Main", linkComp
 				Link: linkComponent
 			})]
 		}),
-		className: cn("max-md:pb-[calc(4.5rem+env(safe-area-inset-bottom))] max-md:[--hb-bottom-inset:calc(4.5rem+env(safe-area-inset-bottom))]", action && "max-md:[--hb-fab-inset:4.5rem]", className),
+		className: cn("max-md:pb-[calc(4.5rem+env(safe-area-inset-bottom))] max-md:[--hb-bottom-inset:calc(4.5rem+env(safe-area-inset-bottom))]", action && "max-md:pb-[calc(9rem+env(safe-area-inset-bottom))] max-md:[--hb-fab-inset:4.5rem]", fill && "h-dvh overflow-hidden", className),
 		children: [
 			children,
 			tabs.length > 0 && /* @__PURE__ */ jsx(TabBar, {
@@ -101,6 +101,10 @@ function PlaceItem({ place, Link }) {
 }
 function NavGroup({ group, Link }) {
 	const [open, setOpen] = React.useState(group.defaultOpen ?? true);
+	const chevron = /* @__PURE__ */ jsx(ChevronDownIcon, {
+		"aria-hidden": "true",
+		className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90")
+	});
 	return /* @__PURE__ */ jsxs(Collapsible, {
 		open,
 		onOpenChange: setOpen,
@@ -108,15 +112,28 @@ function NavGroup({ group, Link }) {
 		className: "flex flex-col gap-1 group-data-[collapsible=icon]:hidden",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1 pr-1",
-			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-				className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40",
+			children: [group.href ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Link, {
+					href: group.href,
+					"aria-current": group.active ? "page" : void 0,
+					className: cn("flex h-8 min-w-0 items-center rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11", group.active && "text-foreground"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: group.label
+					})
+				}),
+				/* @__PURE__ */ jsx(CollapsibleTrigger, {
+					"aria-label": `${open ? "Collapse" : "Expand"} ${group.label}`,
+					className: "-ml-1 grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11",
+					children: chevron
+				}),
+				/* @__PURE__ */ jsx("span", { className: "flex-1" })
+			] }) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+				className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: group.label
-				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-					"aria-hidden": "true",
-					className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90")
-				})]
+				}), chevron]
 			}), group.onAdd && /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				variant: "ghost",

package/dist/components/admin/avatar-upload.d.ts

@@ -0,0 +1,32 @@
+import { CategoryColor } from "./category.js";
+import * as React from "react";
+/**
+ * Crops an image to its centred square and scales it to `size` (default 256) pixels, as a JPEG. With `maxBytes`,
+ * steps the quality down until it fits, or rejects with "That photo is too big.".
+ */
+export declare function cropImageToSquare(file: Blob, { size, maxBytes }?: {
+  size?: number;
+  maxBytes?: number;
+}): Promise<Blob>;
+export interface AvatarUploadProps extends Omit<React.ComponentProps<"div">, "onChange" | "onError" | "color"> {
+  /** Whose photo; gives the initials shown without one. */
+  name: string;
+  /** Category colour behind the initials. */
+  color?: CategoryColor;
+  /** The current photo. */
+  avatarUrl?: string;
+  /** Called with a 256x256 JPEG after a photo is chosen, or `null` after Remove photo. */
+  onChange: (photo: Blob | null) => void;
+  /** Largest photo to hand back, in bytes; JPEG quality steps down to fit. */
+  maxBytes?: number;
+  /** Called when the file is not an image or cannot be made small enough. */
+  onError?: (error: Error) => void;
+  /** A line under the buttons. */
+  description?: React.ReactNode;
+}
+/**
+ * Profile photo picker: a large avatar, "Upload a photo" / "Change photo" and "Remove photo". The chosen image is
+ * cropped to a centred square in the browser and previewed right away.
+ */
+declare function AvatarUpload({ name, color, avatarUrl, onChange, maxBytes, onError, description, className, ...props }: AvatarUploadProps): React.JSX.Element;
+export { AvatarUpload };

package/dist/components/admin/avatar-upload.js

@@ -0,0 +1,121 @@
+"use client";
+import { MemberAvatar } from "./user-chip.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/avatar-upload.tsx
+/**
+* Crops an image to its centred square and scales it to `size` (default 256) pixels, as a JPEG. With `maxBytes`,
+* steps the quality down until it fits, or rejects with "That photo is too big.".
+*/
+async function cropImageToSquare(file, { size = 256, maxBytes } = {}) {
+	const image = await createImageBitmap(file).catch(() => {
+		throw new Error("Could not read that image.");
+	});
+	const side = Math.min(image.width, image.height);
+	const canvas = document.createElement("canvas");
+	canvas.width = size;
+	canvas.height = size;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Could not read that image.");
+	ctx.fillStyle = "#fff";
+	ctx.fillRect(0, 0, size, size);
+	ctx.imageSmoothingQuality = "high";
+	ctx.drawImage(image, (image.width - side) / 2, (image.height - side) / 2, side, side, 0, 0, size, size);
+	image.close();
+	for (const quality of [
+		.9,
+		.8,
+		.7,
+		.6,
+		.5
+	]) {
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", quality));
+		if (!blob) throw new Error("Could not read that image.");
+		if (!maxBytes || blob.size <= maxBytes) return blob;
+	}
+	throw new Error("That photo is too big.");
+}
+/**
+* Profile photo picker: a large avatar, "Upload a photo" / "Change photo" and "Remove photo". The chosen image is
+* cropped to a centred square in the browser and previewed right away.
+*/
+function AvatarUpload({ name, color, avatarUrl, onChange, maxBytes, onError, description, className, ...props }) {
+	const input = React.useRef(null);
+	const [preview, setPreview] = React.useState();
+	const [busy, setBusy] = React.useState(false);
+	const shown = preview === void 0 ? avatarUrl : preview ?? void 0;
+	React.useEffect(() => {
+		if (!preview) return;
+		return () => URL.revokeObjectURL(preview);
+	}, [preview]);
+	React.useEffect(() => setPreview(void 0), [avatarUrl]);
+	async function choose(file) {
+		setBusy(true);
+		try {
+			const blob = await cropImageToSquare(file, { maxBytes });
+			setPreview(URL.createObjectURL(blob));
+			onChange(blob);
+		} catch (error) {
+			onError?.(error);
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "avatar-upload",
+		className: cn("flex flex-wrap items-center gap-5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MemberAvatar, {
+			name,
+			avatarUrl: shown,
+			color,
+			size: "lg",
+			"aria-label": shown ? `${name}'s photo` : name,
+			className: "data-[size=lg]:size-18 *:data-[slot=avatar-fallback]:text-2xl"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-[1_1_14rem] flex-col gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: input,
+						type: "file",
+						accept: "image/*",
+						hidden: true,
+						"data-slot": "avatar-upload-input",
+						onChange: (e) => {
+							const file = e.target.files?.[0];
+							e.target.value = "";
+							if (file) choose(file);
+						}
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						className: "max-md:h-11",
+						loading: busy,
+						onClick: () => input.current?.click(),
+						children: shown ? "Change photo" : "Upload a photo"
+					}),
+					shown && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						className: "max-md:h-11",
+						disabled: busy,
+						onClick: () => {
+							setPreview(null);
+							onChange(null);
+						},
+						children: "Remove photo"
+					})
+				]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+}
+export { AvatarUpload, cropImageToSquare };

package/dist/components/admin/category.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+/** One of the six category colours (`category-1..6`) for members, lists and calendars. */
+export type CategoryColor = 1 | 2 | 3 | 4 | 5 | 6;
+/** `bg-category-N` per colour, as complete class names so Tailwind generates them. */
+export declare const categoryBg: Record<CategoryColor, string>;
+export interface CategoryDotProps extends Omit<React.ComponentProps<"span">, "color"> {
+  color: CategoryColor;
+  /** Accessible name when the colour means something on its own, e.g. whose event it is. Decorative without it. */
+  label?: string;
+  /** Adds a lock after the dot, for something only you can see. */
+  locked?: boolean;
+  /** Accessible name of the lock. Default "Only you". */
+  lockLabel?: string;
+}
+/** A small dot in a category colour, e.g. before a list name in a sidebar, with an optional lock for private ones. */
+declare function CategoryDot({ color, label, locked, lockLabel, className, ...props }: CategoryDotProps): React.JSX.Element;
+export { CategoryDot };

package/dist/components/admin/category.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LockIcon } from "lucide-react";
+// src/components/admin/category.tsx
+/** `bg-category-N` per colour, as complete class names so Tailwind generates them. */
+const categoryBg = {
+	1: "bg-category-1",
+	2: "bg-category-2",
+	3: "bg-category-3",
+	4: "bg-category-4",
+	5: "bg-category-5",
+	6: "bg-category-6"
+};
+/** A small dot in a category colour, e.g. before a list name in a sidebar, with an optional lock for private ones. */
+function CategoryDot({ color, label, locked, lockLabel = "Only you", className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "category-dot",
+		className: cn("inline-flex shrink-0 items-center gap-1.5", className),
+		...props,
+		children: [label ? /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": label,
+			className: cn("size-2.5 shrink-0 rounded-full", categoryBg[color])
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-2.5 shrink-0 rounded-full", categoryBg[color])
+		}), locked && /* @__PURE__ */ jsx(LockIcon, {
+			role: "img",
+			"aria-label": lockLabel,
+			className: "size-3.5 text-muted-foreground"
+		})]
+	});
+}
+export { CategoryDot, categoryBg };

package/dist/components/admin/celebration.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** Plays one confetti burst on the mounted `<Celebration />`. Does nothing under prefers-reduced-motion. */
+declare function celebrate(): void;
+export type CelebrationProps = React.ComponentProps<"div">;
+/** Confetti layer for `celebrate()`. Mount once near the root, like Toaster. Renders nothing between bursts. */
+declare function Celebration({ className, ...props }: CelebrationProps): React.JSX.Element | null;
+export { Celebration, celebrate };

package/dist/components/admin/celebration.js

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/admin/celebration.tsx
+const DURATION_MS = 1600;
+const COLORS = [
+	"bg-category-1",
+	"bg-category-2",
+	"bg-category-3",
+	"bg-category-4",
+	"bg-category-5",
+	"bg-category-6"
+];
+const PIECES = Array.from({ length: 36 }, (_, i) => {
+	const angle = i / 36 * Math.PI * 2 + i % 3 * .3;
+	const reach = 120 + i * 47 % 160;
+	return {
+		color: COLORS[i % COLORS.length],
+		style: {
+			"--hb-x": `${Math.round(Math.cos(angle) * reach)}px`,
+			"--hb-y": `${Math.round(Math.sin(angle) * reach * .8 - 120)}px`,
+			"--hb-r": `${i * 137 % 720 - 360}deg`,
+			animationDelay: `${i % 6 * 25}ms`
+		}
+	};
+});
+const listeners = /* @__PURE__ */ new Set();
+/** Plays one confetti burst on the mounted `<Celebration />`. Does nothing under prefers-reduced-motion. */
+function celebrate() {
+	if (typeof window === "undefined" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+	for (const listener of listeners) listener();
+}
+/** Confetti layer for `celebrate()`. Mount once near the root, like Toaster. Renders nothing between bursts. */
+function Celebration({ className, ...props }) {
+	const [burst, setBurst] = React.useState(0);
+	React.useEffect(() => {
+		const listener = () => setBurst((b) => b + 1);
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	}, []);
+	React.useEffect(() => {
+		if (!burst) return;
+		const t = setTimeout(() => setBurst(0), DURATION_MS);
+		return () => clearTimeout(t);
+	}, [burst]);
+	if (!burst) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "celebration",
+		"aria-hidden": "true",
+		className: cn("pointer-events-none fixed inset-0 z-[100] overflow-hidden motion-reduce:hidden", className),
+		...props,
+		children: PIECES.map((p, i) => /* @__PURE__ */ jsx("span", {
+			className: cn("absolute top-1/2 left-1/2 h-3 w-2 rounded-[2px] opacity-0 animate-confetti", p.color),
+			style: p.style
+		}, i))
+	}, burst);
+}
+export { Celebration, celebrate };

package/dist/components/admin/checklist-editor.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface ChecklistItem {
+  id: string;
+  text: string;
+  done: boolean;
+}
+export interface ChecklistEditorProps extends Omit<React.ComponentProps<"div">, "children" | "onToggle"> {
+  items: ChecklistItem[];
+  onToggle: (id: string, done: boolean) => void;
+  onRemove: (id: string) => void;
+  /** Called with the trimmed text when the add field is submitted with Enter. The field then clears. */
+  onAdd: (text: string) => void;
+  /** Placeholder and accessible name of the add field. Default "Add an item". */
+  addPlaceholder?: string;
+  /** Progress line above the items, shown when there are any. Default "2 of 5 done". */
+  progressLabel?: (done: number, total: number) => React.ReactNode;
+}
+/** Steps inside a record (a to-do's checklist): tick, remove, add with Enter, and an "x of y done" line. */
+declare function ChecklistEditor({ items, onToggle, onRemove, onAdd, addPlaceholder, progressLabel, className, ...props }: ChecklistEditorProps): React.JSX.Element;
+export { ChecklistEditor };

package/dist/components/admin/checklist-editor.js

@@ -0,0 +1,69 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { CheckCircle } from "../ui/check-circle.js";
+import { Input } from "../ui/input.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+// src/components/admin/checklist-editor.tsx
+const defaultProgress = (done, total) => `${done} of ${total} done`;
+/** Steps inside a record (a to-do's checklist): tick, remove, add with Enter, and an "x of y done" line. */
+function ChecklistEditor({ items, onToggle, onRemove, onAdd, addPlaceholder = "Add an item", progressLabel = defaultProgress, className, ...props }) {
+	const [text, setText] = React.useState("");
+	const id = React.useId();
+	const done = items.filter((i) => i.done).length;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"data-slot": "checklist-editor",
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground",
+			children: progressLabel(done, items.length)
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col",
+			children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "flex min-w-0 items-start gap-3 py-1.5 ps-2",
+				children: [
+					/* @__PURE__ */ jsx(CheckCircle, {
+						id: `${id}-${item.id}`,
+						className: "mt-2",
+						checked: item.done,
+						onCheckedChange: (v) => onToggle(item.id, v === true)
+					}),
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: `${id}-${item.id}`,
+						className: cn("min-w-0 flex-1 py-2 text-[15px] leading-6 wrap-anywhere", item.done && "text-muted-foreground line-through decoration-muted-foreground/60"),
+						children: item.text
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "pointer-coarse:size-11",
+						"aria-label": `Remove ${item.text}`,
+						onClick: () => onRemove(item.id),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			}, item.id))
+		})] }), /* @__PURE__ */ jsx("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				const value = text.trim();
+				if (!value) return;
+				onAdd(value);
+				setText("");
+			},
+			children: /* @__PURE__ */ jsx(Input, {
+				value: text,
+				onChange: (e) => setText(e.target.value),
+				placeholder: addPlaceholder,
+				"aria-label": addPlaceholder,
+				enterKeyHint: "done"
+			})
+		})]
+	});
+}
+export { ChecklistEditor };

package/dist/components/admin/color-swatch-picker.d.ts

@@ -0,0 +1,15 @@
+import { CategoryColor } from "./category.js";
+import * as React from "react";
+import { RadioGroup } from "radix-ui";
+export interface ColorSwatchPickerProps extends Omit<React.ComponentProps<typeof RadioGroup.Root>, "value" | "defaultValue" | "onValueChange" | "children"> {
+  value?: CategoryColor;
+  onValueChange?: (color: CategoryColor) => void;
+  /** Colours someone else already uses, as colour -> their name. Shown with their initial and disabled. */
+  taken?: Partial<Record<CategoryColor, string>>;
+}
+/**
+ * The six category colours as a radio group (arrow keys move between free colours). Name it with `aria-label` or
+ * `aria-labelledby`. 32px swatches with 44px touch targets; the chosen one shows a check and a ring.
+ */
+declare function ColorSwatchPicker({ value, onValueChange, taken, className, ...props }: ColorSwatchPickerProps): React.JSX.Element;
+export { ColorSwatchPicker };

package/dist/components/admin/color-swatch-picker.js

@@ -0,0 +1,68 @@
+"use client";
+import { categoryBg } from "./category.js";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { RadioGroup } from "radix-ui";
+// src/components/admin/color-swatch-picker.tsx
+const colors = [
+	{
+		value: 1,
+		name: "Blue"
+	},
+	{
+		value: 2,
+		name: "Teal"
+	},
+	{
+		value: 3,
+		name: "Violet"
+	},
+	{
+		value: 4,
+		name: "Rose"
+	},
+	{
+		value: 5,
+		name: "Slate"
+	},
+	{
+		value: 6,
+		name: "Cyan"
+	}
+];
+/**
+* The six category colours as a radio group (arrow keys move between free colours). Name it with `aria-label` or
+* `aria-labelledby`. 32px swatches with 44px touch targets; the chosen one shows a check and a ring.
+*/
+function ColorSwatchPicker({ value, onValueChange, taken, className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+		"data-slot": "color-swatch-picker",
+		value: value ? String(value) : "",
+		onValueChange: (v) => onValueChange?.(Number(v)),
+		className: cn("flex flex-wrap gap-3", className),
+		...props,
+		children: colors.map((c) => {
+			const by = taken?.[c.value];
+			return /* @__PURE__ */ jsx(RadioGroup.Item, {
+				value: String(c.value),
+				disabled: !!by,
+				"aria-label": by ? `${c.name}, taken by ${by}` : c.name,
+				title: by ? `${c.name}, taken by ${by}` : void 0,
+				className: cn("relative grid size-8 shrink-0 place-items-center rounded-full text-category-foreground outline-none after:absolute after:-inset-1.5 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50 data-checked:ring-2 data-checked:ring-foreground data-checked:ring-offset-2 data-checked:ring-offset-card", categoryBg[c.value]),
+				children: by ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "text-xs leading-none font-semibold",
+					children: by.trim()[0]?.toUpperCase()
+				}) : /* @__PURE__ */ jsx(RadioGroup.Indicator, {
+					className: "grid place-items-center",
+					children: /* @__PURE__ */ jsx(CheckIcon, {
+						className: "size-4",
+						strokeWidth: 3
+					})
+				})
+			}, c.value);
+		})
+	});
+}
+export { ColorSwatchPicker };

package/dist/components/admin/comment-thread.d.ts

@@ -0,0 +1,26 @@
+import { CategoryColor } from "./category.js";
+import * as React from "react";
+export interface CommentThreadComment {
+  id: string;
+  author: {
+    name: string;
+    color?: CategoryColor;
+    avatarUrl?: string;
+  };
+  /** Muted text after the name, e.g. "2 h ago" or "via HomeBot · 2 h ago". */
+  meta?: React.ReactNode;
+  /** Markdown, rendered with `Markdown`. */
+  body: string;
+}
+export interface CommentThreadProps extends Omit<React.ComponentProps<"div">, "children" | "onSubmit"> {
+  comments: CommentThreadComment[];
+  /** Called with the trimmed text. The box then clears. */
+  onSubmit: (text: string) => void;
+  /** Placeholder and accessible name of the box. Default "Add a comment". */
+  placeholder?: string;
+  /** Default "Comment". */
+  submitLabel?: string;
+}
+/** Comments on a record, oldest first, with a box to add one. Bodies are Markdown. */
+declare function CommentThread({ comments, onSubmit, placeholder, submitLabel, className, ...props }: CommentThreadProps): React.JSX.Element;
+export { CommentThread };