@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/onboarding-checklist/onboarding-checklist.js

@@ -0,0 +1,577 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { ActionButton } from "../action-button/action-button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { RollingNumber } from "../lib/field-message.js";
+import { forwardRef, useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/onboarding-checklist/onboarding-checklist.tsx
+/** How long a checked step stays in place, struck through, before it folds into the completed row. */
+const SETTLE_MS = 720;
+const ordered = (ids, steps) => steps.map((step) => step.id).filter((id) => ids.includes(id));
+const without = (ids, id) => ids.filter((item) => item !== id);
+const omit = (errors, id) => Object.fromEntries(Object.entries(errors).filter(([key]) => key !== id));
+const titleOf = (steps, id) => steps.find((step) => step.id === id)?.title ?? "Step";
+function init({ steps, completed, hidden }) {
+	const done = ordered(completed, steps);
+	return {
+		done,
+		settled: done,
+		expanded: steps.find((step) => !done.includes(step.id))?.id ?? null,
+		errors: {},
+		groupOpen: false,
+		hidden,
+		message: ""
+	};
+}
+function reducer(state, action) {
+	switch (action.type) {
+		case "check": {
+			if (state.done.includes(action.id)) return state;
+			const done = ordered([...state.done, action.id], action.steps);
+			const total = action.steps.length;
+			return {
+				...state,
+				done,
+				errors: omit(state.errors, action.id),
+				message: done.length === total ? `All ${total} steps done.` : `${titleOf(action.steps, action.id)} done. ${done.length} of ${total} complete.`
+			};
+		}
+		case "uncheck": {
+			if (!state.done.includes(action.id)) return state;
+			const done = without(state.done, action.id);
+			return {
+				...state,
+				done,
+				settled: without(state.settled, action.id),
+				expanded: state.expanded ?? action.id,
+				message: `${titleOf(action.steps, action.id)} marked as not done. ${done.length} of ${action.steps.length} complete.`
+			};
+		}
+		case "settle": {
+			if (!state.done.includes(action.id) || state.settled.includes(action.id)) return state;
+			let expanded = state.expanded;
+			if (expanded === action.id) {
+				const order = action.steps.map((step) => step.id);
+				const start = order.indexOf(action.id);
+				expanded = order.map((_, offset) => order[(start + offset + 1) % order.length]).find((id) => !state.done.includes(id)) ?? null;
+			}
+			return {
+				...state,
+				settled: ordered([...state.settled, action.id], action.steps),
+				expanded
+			};
+		}
+		case "expand": return {
+			...state,
+			expanded: state.expanded === action.id ? null : action.id
+		};
+		case "start": return {
+			...state,
+			errors: omit(state.errors, action.id)
+		};
+		case "fail": return {
+			...state,
+			errors: {
+				...state.errors,
+				[action.id]: action.message
+			},
+			message: action.message
+		};
+		case "group": return {
+			...state,
+			groupOpen: !state.groupOpen
+		};
+		case "hide": return {
+			...state,
+			hidden: !state.hidden
+		};
+	}
+}
+const Chevron = () => /* @__PURE__ */ jsx("svg", {
+	width: 16,
+	height: 16,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.75,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+});
+/**
+* A box that opens and closes its height (a grid track going between 0fr and 1fr).
+* Closed, it is visibility: hidden once folded, so it leaves the tab order.
+*/
+function Collapse({ show, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-shown": show || void 0,
+		className: "checklist-collapse",
+		children: /* @__PURE__ */ jsx("div", { children })
+	});
+}
+/** Every label the slot can show sits invisibly underneath, so a swap never changes the slot's size. */
+function SwapLabel({ text, options }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "checklist-swap",
+		"aria-hidden": "true",
+		children: [options.map((option, index) => /* @__PURE__ */ jsx("span", {
+			className: "checklist-swap-sizer",
+			children: option
+		}, index)), /* @__PURE__ */ jsx(SwapText, {
+			swapKey: text,
+			motion: "rise",
+			className: "checklist-swap-item",
+			children: text
+		})]
+	});
+}
+/** The ring's stroke fills on a spring as steps are checked; once every step is done a tick draws in its center. */
+function ProgressRing({ done, total }) {
+	const ratio = total ? done / total : 0;
+	const complete = total > 0 && done === total;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "checklist-ring",
+		role: "progressbar",
+		"aria-label": "Setup progress",
+		"aria-valuemin": 0,
+		"aria-valuemax": total,
+		"aria-valuenow": done,
+		"aria-valuetext": `${done} of ${total} steps done`,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 40 40",
+			fill: "none",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "checklist-ring-track",
+				cx: "20",
+				cy: "20",
+				r: "17",
+				strokeWidth: 3
+			}), /* @__PURE__ */ jsx("g", {
+				transform: "rotate(-90 20 20)",
+				children: /* @__PURE__ */ jsx("circle", {
+					className: "checklist-ring-fill",
+					cx: "20",
+					cy: "20",
+					r: "17",
+					strokeWidth: 3,
+					strokeLinecap: "round",
+					pathLength: 1,
+					"data-started": ratio > 0 ? "" : void 0,
+					style: { "--ratio": ratio }
+				})
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "checklist-ring-tick",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: complete ? "tick" : "",
+				motion: "glyph",
+				className: "grid place-items-center",
+				children: complete ? /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 40 40",
+					fill: "none",
+					children: /* @__PURE__ */ jsx("path", {
+						className: "checklist-draw",
+						pathLength: 1,
+						d: "M13.5 20.5 18 25l8.5-9.5",
+						stroke: "currentColor",
+						strokeWidth: 2.25,
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				}) : null
+			})
+		})]
+	});
+}
+/** The fill grows from the center while the tick draws from its short stroke; unchecking retracts both quickly. */
+function CheckButton({ checked, labelledBy, onToggle }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": checked,
+		"aria-labelledby": labelledBy,
+		className: "checklist-check",
+		"data-check": "",
+		onClick: onToggle,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "checklist-check-visual",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("span", { className: "checklist-check-fill" }), /* @__PURE__ */ jsx("svg", {
+				className: "checklist-check-mark",
+				viewBox: "0 0 22 22",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					pathLength: 1,
+					d: "M6.75 11.25 9.75 14.25 15.25 8.25",
+					stroke: "currentColor",
+					strokeWidth: 1.75,
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
+		})
+	});
+}
+function StepItem({ step, baseId, done, settled, expanded, error, onToggle, onExpand, onRun }) {
+	const titleId = `${baseId}-${step.id}-title`;
+	const panelId = `${baseId}-${step.id}-panel`;
+	const [lastError, setLastError] = useState(error);
+	if (error && error !== lastError) setLastError(error);
+	return /* @__PURE__ */ jsx("li", {
+		"data-step": step.id,
+		"data-done": done || void 0,
+		"data-current": expanded || void 0,
+		"data-open": settled ? void 0 : "",
+		children: /* @__PURE__ */ jsx(Collapse, {
+			show: !settled,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "checklist-step-inner",
+				children: [/* @__PURE__ */ jsx(CheckButton, {
+					checked: done,
+					labelledBy: titleId,
+					onToggle
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "checklist-step-main",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "checklist-step-title",
+						"data-title": "",
+						"aria-expanded": expanded,
+						"aria-controls": panelId,
+						onClick: onExpand,
+						children: /* @__PURE__ */ jsx("span", {
+							id: titleId,
+							className: "checklist-title-text",
+							children: step.title
+						})
+					}), /* @__PURE__ */ jsx(Collapse, {
+						show: expanded,
+						children: /* @__PURE__ */ jsxs("div", {
+							id: panelId,
+							role: "region",
+							"aria-labelledby": titleId,
+							className: "checklist-panel-inner",
+							children: [
+								step.description ? /* @__PURE__ */ jsx("p", {
+									className: "checklist-description",
+									children: step.description
+								}) : null,
+								/* @__PURE__ */ jsx(Collapse, {
+									show: Boolean(error),
+									children: /* @__PURE__ */ jsx("p", {
+										role: "alert",
+										className: "checklist-error",
+										children: lastError
+									})
+								}),
+								step.actionLabel ? /* @__PURE__ */ jsx(ActionButton, {
+									variant: "primary",
+									size: "sm",
+									className: "mt-3",
+									"data-primary": "",
+									pendingLabel: step.actionLabel,
+									successLabel: step.actionLabel,
+									onAction: onRun,
+									children: step.actionLabel
+								}) : null
+							]
+						})
+					})]
+				})]
+			})
+		})
+	});
+}
+const OnboardingChecklist = forwardRef(function OnboardingChecklist({ title, doneTitle = "You’re all set", steps, defaultCompleted = [], onCompletedChange, defaultHidden = false, onHiddenChange, className }, ref) {
+	const baseId = useId();
+	const [state, dispatch] = useReducer(reducer, {
+		steps,
+		completed: defaultCompleted,
+		hidden: defaultHidden
+	}, init);
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const timers = useRef(/* @__PURE__ */ new Map());
+	const focusRequest = useRef(null);
+	const reportCompleted = useRef(onCompletedChange);
+	const reported = useRef(state.done);
+	useEffect(() => {
+		reportCompleted.current = onCompletedChange;
+	});
+	useEffect(() => {
+		if (reported.current === state.done) return;
+		reported.current = state.done;
+		reportCompleted.current?.(state.done);
+	}, [state.done]);
+	useEffect(() => {
+		const pending = timers.current;
+		return () => pending.forEach(clearTimeout);
+	}, []);
+	useEffect(() => {
+		const request = focusRequest.current;
+		const node = root.current;
+		if (!request || !node) return;
+		focusRequest.current = null;
+		let target;
+		if (request === "next") {
+			const next = state.expanded ? node.querySelector(`[data-step="${state.expanded}"][data-open]`) : null;
+			target = next?.querySelector("[data-primary]") ?? next?.querySelector("[data-title]") ?? node.querySelector("[data-group-toggle]");
+		} else target = node.querySelector(`[data-step="${request.id}"][data-open] [data-check]`);
+		target?.focus({ preventScroll: true });
+	});
+	function check(id) {
+		dispatch({
+			type: "check",
+			id,
+			steps
+		});
+		if (timers.current.has(id)) return;
+		timers.current.set(id, setTimeout(() => {
+			timers.current.delete(id);
+			if (root.current?.querySelector(`[data-step="${id}"]`)?.contains(document.activeElement)) focusRequest.current = "next";
+			dispatch({
+				type: "settle",
+				id,
+				steps
+			});
+		}, SETTLE_MS));
+	}
+	function uncheck(id, fromGroup) {
+		clearTimeout(timers.current.get(id));
+		timers.current.delete(id);
+		if (fromGroup) focusRequest.current = { id };
+		dispatch({
+			type: "uncheck",
+			id,
+			steps
+		});
+	}
+	async function run(step) {
+		if (!step.onAction || state.done.includes(step.id)) return;
+		dispatch({
+			type: "start",
+			id: step.id,
+			steps
+		});
+		try {
+			await step.onAction();
+		} catch (error) {
+			dispatch({
+				type: "fail",
+				id: step.id,
+				message: error instanceof Error && error.message ? error.message : "That didn’t work. Try again."
+			});
+			throw error;
+		}
+		check(step.id);
+	}
+	function toggleHidden() {
+		dispatch({ type: "hide" });
+		onHiddenChange?.(!state.hidden);
+	}
+	/** Up and Down walk the step titles, Home and End jump to the first and last. */
+	function navigate(event) {
+		const target = event.target;
+		if (!target.matches("[data-title]") || ![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		const titles = Array.from(event.currentTarget.querySelectorAll("li[data-open] [data-title]"));
+		const index = titles.indexOf(target);
+		const next = event.key === "Home" ? 0 : event.key === "End" ? titles.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + titles.length) % titles.length;
+		event.preventDefault();
+		titles[next]?.focus();
+	}
+	const total = steps.length;
+	const doneCount = state.done.length;
+	const allDone = total > 0 && doneCount === total;
+	const completed = steps.filter((step) => state.settled.includes(step.id));
+	const titleId = `${baseId}-title`;
+	const bodyId = `${baseId}-body`;
+	const groupId = `${baseId}-completed`;
+	return /* @__PURE__ */ jsxs("section", {
+		ref: refs,
+		"aria-labelledby": titleId,
+		"data-slot": "onboarding-checklist",
+		"data-complete": allDone || void 0,
+		"data-hidden": state.hidden || void 0,
+		className: cn("checklist box-border font-sans", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "checklist-header",
+				children: [
+					/* @__PURE__ */ jsx(ProgressRing, {
+						done: doneCount,
+						total
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "checklist-heading",
+						children: [/* @__PURE__ */ jsxs("h3", {
+							id: titleId,
+							className: "checklist-title",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: allDone ? doneTitle : title
+							}), /* @__PURE__ */ jsx(SwapLabel, {
+								text: allDone ? doneTitle : title,
+								options: [title, doneTitle]
+							})]
+						}), /* @__PURE__ */ jsxs("p", {
+							className: "checklist-count",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [
+									doneCount,
+									" of ",
+									total,
+									" done"
+								]
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "checklist-count-visual",
+								"aria-hidden": "true",
+								children: [
+									/* @__PURE__ */ jsx(RollingNumber, { word: String(doneCount) }),
+									"\xA0of ",
+									total,
+									" done"
+								]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "checklist-hide",
+						"aria-expanded": !state.hidden,
+						"aria-controls": bodyId,
+						onClick: toggleHidden,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "checklist-hide-label",
+								children: /* @__PURE__ */ jsx(SwapLabel, {
+									text: state.hidden ? "Show" : "Hide",
+									options: ["Hide", "Show"]
+								})
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [state.hidden ? "Show" : "Hide", " checklist"]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "checklist-chevron",
+								"aria-hidden": "true",
+								"data-flipped": state.hidden || void 0,
+								children: /* @__PURE__ */ jsx(Chevron, {})
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: bodyId,
+				"data-shown": state.hidden ? void 0 : "",
+				className: "checklist-collapse",
+				children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
+					className: "checklist-body-inner",
+					children: [/* @__PURE__ */ jsx("ul", {
+						className: "checklist-list",
+						"aria-label": "Steps to do",
+						"aria-hidden": completed.length === total ? true : void 0,
+						onKeyDown: navigate,
+						children: steps.map((step) => /* @__PURE__ */ jsx(StepItem, {
+							step,
+							baseId,
+							done: state.done.includes(step.id),
+							settled: state.settled.includes(step.id),
+							expanded: state.expanded === step.id,
+							error: state.errors[step.id],
+							onToggle: () => state.done.includes(step.id) ? uncheck(step.id, false) : check(step.id),
+							onExpand: () => dispatch({
+								type: "expand",
+								id: step.id,
+								steps
+							}),
+							onRun: () => run(step)
+						}, step.id))
+					}), /* @__PURE__ */ jsxs(Collapse, {
+						show: completed.length > 0,
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "checklist-group-toggle",
+							"data-group-toggle": "",
+							"aria-expanded": state.groupOpen,
+							"aria-controls": groupId,
+							onClick: () => dispatch({ type: "group" }),
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [completed.length, " completed"]
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "checklist-count-visual",
+									"aria-hidden": "true",
+									children: [/* @__PURE__ */ jsx(RollingNumber, { word: String(completed.length) }), "\xA0completed"]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "checklist-chevron",
+									"aria-hidden": "true",
+									"data-flipped": state.groupOpen ? void 0 : "",
+									children: /* @__PURE__ */ jsx(Chevron, {})
+								})
+							]
+						}), /* @__PURE__ */ jsx(Collapse, {
+							show: state.groupOpen,
+							children: /* @__PURE__ */ jsx("div", {
+								id: groupId,
+								children: /* @__PURE__ */ jsx("ul", {
+									className: "checklist-list",
+									"aria-label": "Completed steps",
+									children: steps.map((step) => {
+										const doneId = `${baseId}-${step.id}-done`;
+										return /* @__PURE__ */ jsx("li", {
+											"data-completed-step": step.id,
+											"data-done": "",
+											children: /* @__PURE__ */ jsx(Collapse, {
+												show: state.settled.includes(step.id),
+												children: /* @__PURE__ */ jsxs("div", {
+													className: "checklist-step-inner",
+													children: [/* @__PURE__ */ jsx(CheckButton, {
+														checked: true,
+														labelledBy: doneId,
+														onToggle: () => uncheck(step.id, true)
+													}), /* @__PURE__ */ jsx("span", {
+														className: "checklist-done-title",
+														children: /* @__PURE__ */ jsx("span", {
+															id: doneId,
+															className: "checklist-title-text",
+															children: step.title
+														})
+													})]
+												})
+											})
+										}, step.id);
+									})
+								})
+							})
+						})]
+					})]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				role: "status",
+				children: state.message
+			})
+		]
+	});
+});
+//#endregion
+export { OnboardingChecklist };
+
+//# sourceMappingURL=onboarding-checklist.js.map

package/dist/onboarding-checklist/onboarding-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-checklist.js","names":[],"sources":["../../src/onboarding-checklist/onboarding-checklist.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { ActionButton } from \"../action-button/action-button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { RollingNumber } from \"../lib/field-message.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * OnboardingChecklist: a getting-started card for a new account or workspace,\n * for a short, one-time setup of three to eight loosely ordered steps. (Use a\n * Stepper when the order is strict and steps map to screens.)\n *\n * The progress ring and the count follow every check: the ring fills on the\n * morph spring, the count rolls its digits, and at 100% a tick draws in the\n * ring while the title morphs to `doneTitle`. A checked step fills its circle\n * from the centre, draws its tick and strikes its title through; 720ms later it\n * folds into a \"N completed\" row that opens again, and the next unfinished step\n * opens and takes focus if the finished one had it. A step with an `actionLabel`\n * runs `onAction`: resolving checks the step, throwing an Error keeps it open\n * and shows the message. The body can be hidden and shown again.\n *\n * Rows and panels open and close their height on a spring that never\n * overshoots, closing a little quicker. Nothing animates on first render, and\n * reduced motion removes the height animation and keeps short fades.\n *\n * Built on plain buttons and the shared swap and rolling-number helpers; the\n * action is the library's ActionButton, whose arrow becomes a spinner and then\n * a tick that draws itself. Keyboard: Up and Down walk the step titles,\n * Home and End jump to the first and last, Enter or Space expands a step,\n * toggles its checkbox or runs its action.\n */\nexport interface OnboardingStep {\n  id: string;\n  title: string;\n  description?: string;\n  /** Label of the button that does the step. Without it, the step is checked off by hand. */\n  actionLabel?: string;\n  /** Runs the step. Resolve to check it off; throw an Error to keep it open and show the error's message. */\n  onAction?: () => void | Promise<void>;\n}\n\nexport interface OnboardingChecklistProps {\n  /** Card title while steps remain. */\n  title: string;\n  /** Title once every step is done. @default \"You’re all set\" */\n  doneTitle?: string;\n  /** Steps in order. */\n  steps: OnboardingStep[];\n  /** Step ids that start completed. */\n  defaultCompleted?: string[];\n  /** Called with the completed ids, in step order, whenever they change. */\n  onCompletedChange?: (completed: string[]) => void;\n  /** Starts with the body collapsed. @default false */\n  defaultHidden?: boolean;\n  /** Called when the Hide or Show button is used. */\n  onHiddenChange?: (hidden: boolean) => void;\n  /** Extra classes for the card. Merged last. */\n  className?: string;\n}\n\ninterface State {\n  done: string[];\n  settled: string[];\n  expanded: string | null;\n  errors: Record<string, string>;\n  groupOpen: boolean;\n  hidden: boolean;\n  message: string;\n}\ntype Action =\n  | { type: \"check\" | \"uncheck\" | \"settle\" | \"expand\" | \"start\"; id: string; steps: OnboardingStep[] }\n  | { type: \"fail\"; id: string; message: string }\n  | { type: \"group\" | \"hide\" };\n\n/** How long a checked step stays in place, struck through, before it folds into the completed row. */\nconst SETTLE_MS = 720;\n\nconst ordered = (ids: string[], steps: OnboardingStep[]) =>\n  steps.map((step) => step.id).filter((id) => ids.includes(id));\nconst without = (ids: string[], id: string) => ids.filter((item) => item !== id);\nconst omit = (errors: Record<string, string>, id: string) =>\n  Object.fromEntries(Object.entries(errors).filter(([key]) => key !== id));\nconst titleOf = (steps: OnboardingStep[], id: string) =>\n  steps.find((step) => step.id === id)?.title ?? \"Step\";\n\nfunction init({\n  steps,\n  completed,\n  hidden,\n}: {\n  steps: OnboardingStep[];\n  completed: string[];\n  hidden: boolean;\n}): State {\n  const done = ordered(completed, steps);\n  return {\n    done,\n    settled: done,\n    expanded: steps.find((step) => !done.includes(step.id))?.id ?? null,\n    errors: {},\n    groupOpen: false,\n    hidden,\n    message: \"\",\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case \"check\": {\n      if (state.done.includes(action.id)) return state;\n      const done = ordered([...state.done, action.id], action.steps);\n      const total = action.steps.length;\n      return {\n        ...state,\n        done,\n        errors: omit(state.errors, action.id),\n        message:\n          done.length === total\n            ? `All ${total} steps done.`\n            : `${titleOf(action.steps, action.id)} done. ${done.length} of ${total} complete.`,\n      };\n    }\n    case \"uncheck\": {\n      if (!state.done.includes(action.id)) return state;\n      const done = without(state.done, action.id);\n      return {\n        ...state,\n        done,\n        settled: without(state.settled, action.id),\n        expanded: state.expanded ?? action.id,\n        message: `${titleOf(action.steps, action.id)} marked as not done. ${done.length} of ${action.steps.length} complete.`,\n      };\n    }\n    case \"settle\": {\n      if (!state.done.includes(action.id) || state.settled.includes(action.id)) return state;\n      let expanded = state.expanded;\n      // The step that just finished hands the open panel to the next unfinished step, wrapping to the top.\n      if (expanded === action.id) {\n        const order = action.steps.map((step) => step.id);\n        const start = order.indexOf(action.id);\n        expanded =\n          order\n            .map((_, offset) => order[(start + offset + 1) % order.length]!)\n            .find((id) => !state.done.includes(id)) ?? null;\n      }\n      return { ...state, settled: ordered([...state.settled, action.id], action.steps), expanded };\n    }\n    case \"expand\":\n      return { ...state, expanded: state.expanded === action.id ? null : action.id };\n    case \"start\":\n      return { ...state, errors: omit(state.errors, action.id) };\n    case \"fail\":\n      return {\n        ...state,\n        errors: { ...state.errors, [action.id]: action.message },\n        message: action.message,\n      };\n    case \"group\":\n      return { ...state, groupOpen: !state.groupOpen };\n    case \"hide\":\n      return { ...state, hidden: !state.hidden };\n  }\n}\n\nconst Chevron = () => (\n  <svg\n    width={16}\n    height={16}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.75}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m18 15-6-6-6 6\" />\n  </svg>\n);\n\n/**\n * A box that opens and closes its height (a grid track going between 0fr and 1fr).\n * Closed, it is visibility: hidden once folded, so it leaves the tab order.\n */\nfunction Collapse({ show, children }: { show: boolean; children: ReactNode }) {\n  return (\n    <div data-shown={show || undefined} className=\"checklist-collapse\">\n      <div>{children}</div>\n    </div>\n  );\n}\n\n/** Every label the slot can show sits invisibly underneath, so a swap never changes the slot's size. */\nfunction SwapLabel({ text, options }: { text: string; options: string[] }) {\n  return (\n    <span className=\"checklist-swap\" aria-hidden=\"true\">\n      {options.map((option, index) => (\n        <span key={index} className=\"checklist-swap-sizer\">\n          {option}\n        </span>\n      ))}\n      <SwapText swapKey={text} motion=\"rise\" className=\"checklist-swap-item\">\n        {text}\n      </SwapText>\n    </span>\n  );\n}\n\n/** The ring's stroke fills on a spring as steps are checked; once every step is done a tick draws in its center. */\nfunction ProgressRing({ done, total }: { done: number; total: number }) {\n  const ratio = total ? done / total : 0;\n  const complete = total > 0 && done === total;\n  return (\n    <span\n      className=\"checklist-ring\"\n      role=\"progressbar\"\n      aria-label=\"Setup progress\"\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={done}\n      aria-valuetext={`${done} of ${total} steps done`}\n    >\n      <svg viewBox=\"0 0 40 40\" fill=\"none\" aria-hidden=\"true\">\n        <circle className=\"checklist-ring-track\" cx=\"20\" cy=\"20\" r=\"17\" strokeWidth={3} />\n        <g transform=\"rotate(-90 20 20)\">\n          <circle\n            className=\"checklist-ring-fill\"\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17\"\n            strokeWidth={3}\n            strokeLinecap=\"round\"\n            pathLength={1}\n            data-started={ratio > 0 ? \"\" : undefined}\n            style={{ \"--ratio\": ratio } as CSSProperties}\n          />\n        </g>\n      </svg>\n      <span className=\"checklist-ring-tick\" aria-hidden=\"true\">\n        <SwapText swapKey={complete ? \"tick\" : \"\"} motion=\"glyph\" className=\"grid place-items-center\">\n          {complete ? (\n            <svg viewBox=\"0 0 40 40\" fill=\"none\">\n              <path\n                className=\"checklist-draw\"\n                pathLength={1}\n                d=\"M13.5 20.5 18 25l8.5-9.5\"\n                stroke=\"currentColor\"\n                strokeWidth={2.25}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          ) : null}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\n/** The fill grows from the center while the tick draws from its short stroke; unchecking retracts both quickly. */\nfunction CheckButton({\n  checked,\n  labelledBy,\n  onToggle,\n}: {\n  checked: boolean;\n  labelledBy: string;\n  onToggle: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={checked}\n      aria-labelledby={labelledBy}\n      className=\"checklist-check\"\n      data-check=\"\"\n      onClick={onToggle}\n    >\n      <span className=\"checklist-check-visual\" aria-hidden=\"true\">\n        <span className=\"checklist-check-fill\" />\n        <svg className=\"checklist-check-mark\" viewBox=\"0 0 22 22\" fill=\"none\">\n          <path\n            pathLength={1}\n            d=\"M6.75 11.25 9.75 14.25 15.25 8.25\"\n            stroke=\"currentColor\"\n            strokeWidth={1.75}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </span>\n    </button>\n  );\n}\n\ninterface StepItemProps {\n  step: OnboardingStep;\n  baseId: string;\n  done: boolean;\n  settled: boolean;\n  expanded: boolean;\n  error: string | undefined;\n  onToggle: () => void;\n  onExpand: () => void;\n  onRun: () => Promise<void>;\n}\n\nfunction StepItem({\n  step,\n  baseId,\n  done,\n  settled,\n  expanded,\n  error,\n  onToggle,\n  onExpand,\n  onRun,\n}: StepItemProps) {\n  const titleId = `${baseId}-${step.id}-title`;\n  const panelId = `${baseId}-${step.id}-panel`;\n  // The message stays while its slot folds away.\n  const [lastError, setLastError] = useState(error);\n  if (error && error !== lastError) setLastError(error);\n  return (\n    <li\n      data-step={step.id}\n      data-done={done || undefined}\n      data-current={expanded || undefined}\n      data-open={settled ? undefined : \"\"}\n    >\n      <Collapse show={!settled}>\n        <div className=\"checklist-step-inner\">\n          <CheckButton checked={done} labelledBy={titleId} onToggle={onToggle} />\n          <div className=\"checklist-step-main\">\n            <button\n              type=\"button\"\n              className=\"checklist-step-title\"\n              data-title=\"\"\n              aria-expanded={expanded}\n              aria-controls={panelId}\n              onClick={onExpand}\n            >\n              <span id={titleId} className=\"checklist-title-text\">\n                {step.title}\n              </span>\n            </button>\n            <Collapse show={expanded}>\n              <div id={panelId} role=\"region\" aria-labelledby={titleId} className=\"checklist-panel-inner\">\n                {step.description ? <p className=\"checklist-description\">{step.description}</p> : null}\n                <Collapse show={Boolean(error)}>\n                  <p role=\"alert\" className=\"checklist-error\">\n                    {lastError}\n                  </p>\n                </Collapse>\n                {step.actionLabel ? (\n                  // The label stays put through the whole action: only the icon beside it changes.\n                  <ActionButton\n                    variant=\"primary\"\n                    size=\"sm\"\n                    className=\"mt-3\"\n                    data-primary=\"\"\n                    pendingLabel={step.actionLabel}\n                    successLabel={step.actionLabel}\n                    onAction={onRun}\n                  >\n                    {step.actionLabel}\n                  </ActionButton>\n                ) : null}\n              </div>\n            </Collapse>\n          </div>\n        </div>\n      </Collapse>\n    </li>\n  );\n}\n\nexport const OnboardingChecklist = forwardRef<HTMLElement, OnboardingChecklistProps>(\n  function OnboardingChecklist(\n    {\n      title,\n      doneTitle = \"You’re all set\",\n      steps,\n      defaultCompleted = [],\n      onCompletedChange,\n      defaultHidden = false,\n      onHiddenChange,\n      className,\n    },\n    ref,\n  ) {\n    const baseId = useId();\n    const [state, dispatch] = useReducer(\n      reducer,\n      { steps, completed: defaultCompleted, hidden: defaultHidden },\n      init,\n    );\n    const root = useRef<HTMLElement | null>(null);\n    const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n    const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n    const focusRequest = useRef<\"next\" | { id: string } | null>(null);\n    const reportCompleted = useRef(onCompletedChange);\n    const reported = useRef(state.done);\n\n    useEffect(() => {\n      reportCompleted.current = onCompletedChange;\n    });\n    useEffect(() => {\n      if (reported.current === state.done) return;\n      reported.current = state.done;\n      reportCompleted.current?.(state.done);\n    }, [state.done]);\n    useEffect(() => {\n      const pending = timers.current;\n      return () => pending.forEach(clearTimeout);\n    }, []);\n    // Focus moves after the commit that opens its target: the next step's action, or the step reopened from the completed row.\n    useEffect(() => {\n      const request = focusRequest.current;\n      const node = root.current;\n      if (!request || !node) return;\n      focusRequest.current = null;\n      let target: HTMLElement | null;\n      if (request === \"next\") {\n        const next = state.expanded\n          ? node.querySelector<HTMLElement>(`[data-step=\"${state.expanded}\"][data-open]`)\n          : null;\n        target =\n          next?.querySelector<HTMLElement>(\"[data-primary]\") ??\n          next?.querySelector<HTMLElement>(\"[data-title]\") ??\n          node.querySelector<HTMLElement>(\"[data-group-toggle]\");\n      } else {\n        target = node.querySelector<HTMLElement>(`[data-step=\"${request.id}\"][data-open] [data-check]`);\n      }\n      target?.focus({ preventScroll: true });\n    });\n\n    function check(id: string) {\n      dispatch({ type: \"check\", id, steps });\n      if (timers.current.has(id)) return;\n      timers.current.set(\n        id,\n        setTimeout(() => {\n          timers.current.delete(id);\n          if (root.current?.querySelector(`[data-step=\"${id}\"]`)?.contains(document.activeElement))\n            focusRequest.current = \"next\";\n          dispatch({ type: \"settle\", id, steps });\n        }, SETTLE_MS),\n      );\n    }\n\n    function uncheck(id: string, fromGroup: boolean) {\n      clearTimeout(timers.current.get(id));\n      timers.current.delete(id);\n      if (fromGroup) focusRequest.current = { id };\n      dispatch({ type: \"uncheck\", id, steps });\n    }\n\n    async function run(step: OnboardingStep) {\n      if (!step.onAction || state.done.includes(step.id)) return;\n      dispatch({ type: \"start\", id: step.id, steps });\n      try {\n        await step.onAction();\n      } catch (error) {\n        dispatch({\n          type: \"fail\",\n          id: step.id,\n          message:\n            error instanceof Error && error.message ? error.message : \"That didn’t work. Try again.\",\n        });\n        // The button goes back to rest on a rejection.\n        throw error;\n      }\n      check(step.id);\n    }\n\n    function toggleHidden() {\n      dispatch({ type: \"hide\" });\n      onHiddenChange?.(!state.hidden);\n    }\n\n    /** Up and Down walk the step titles, Home and End jump to the first and last. */\n    function navigate(event: KeyboardEvent<HTMLUListElement>) {\n      const target = event.target as HTMLElement;\n      if (!target.matches(\"[data-title]\") || ![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(event.key))\n        return;\n      const titles = Array.from(\n        event.currentTarget.querySelectorAll<HTMLElement>(\"li[data-open] [data-title]\"),\n      );\n      const index = titles.indexOf(target);\n      const next =\n        event.key === \"Home\"\n          ? 0\n          : event.key === \"End\"\n            ? titles.length - 1\n            : (index + (event.key === \"ArrowDown\" ? 1 : -1) + titles.length) % titles.length;\n      event.preventDefault();\n      titles[next]?.focus();\n    }\n\n    const total = steps.length;\n    const doneCount = state.done.length;\n    const allDone = total > 0 && doneCount === total;\n    const completed = steps.filter((step) => state.settled.includes(step.id));\n    const titleId = `${baseId}-title`;\n    const bodyId = `${baseId}-body`;\n    const groupId = `${baseId}-completed`;\n\n    return (\n      <section\n        ref={refs}\n        aria-labelledby={titleId}\n        data-slot=\"onboarding-checklist\"\n        data-complete={allDone || undefined}\n        data-hidden={state.hidden || undefined}\n        className={cn(\"checklist box-border font-sans\", className)}\n      >\n        <div className=\"checklist-header\">\n          <ProgressRing done={doneCount} total={total} />\n          <div className=\"checklist-heading\">\n            <h3 id={titleId} className=\"checklist-title\">\n              <span className=\"sr-only\">{allDone ? doneTitle : title}</span>\n              <SwapLabel text={allDone ? doneTitle : title} options={[title, doneTitle]} />\n            </h3>\n            <p className=\"checklist-count\">\n              <span className=\"sr-only\">\n                {doneCount} of {total} done\n              </span>\n              <span className=\"checklist-count-visual\" aria-hidden=\"true\">\n                <RollingNumber word={String(doneCount)} />\n                &nbsp;of {total} done\n              </span>\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            className=\"checklist-hide\"\n            aria-expanded={!state.hidden}\n            aria-controls={bodyId}\n            onClick={toggleHidden}\n          >\n            <span className=\"checklist-hide-label\">\n              <SwapLabel text={state.hidden ? \"Show\" : \"Hide\"} options={[\"Hide\", \"Show\"]} />\n            </span>\n            <span className=\"sr-only\">{state.hidden ? \"Show\" : \"Hide\"} checklist</span>\n            <span className=\"checklist-chevron\" aria-hidden=\"true\" data-flipped={state.hidden || undefined}>\n              <Chevron />\n            </span>\n          </button>\n        </div>\n        <div id={bodyId} data-shown={state.hidden ? undefined : \"\"} className=\"checklist-collapse\">\n          <div>\n            <div className=\"checklist-body-inner\">\n              <ul\n                className=\"checklist-list\"\n                aria-label=\"Steps to do\"\n                aria-hidden={completed.length === total ? true : undefined}\n                onKeyDown={navigate}\n              >\n                {steps.map((step) => (\n                  <StepItem\n                    key={step.id}\n                    step={step}\n                    baseId={baseId}\n                    done={state.done.includes(step.id)}\n                    settled={state.settled.includes(step.id)}\n                    expanded={state.expanded === step.id}\n                    error={state.errors[step.id]}\n                    onToggle={() =>\n                      state.done.includes(step.id) ? uncheck(step.id, false) : check(step.id)\n                    }\n                    onExpand={() => dispatch({ type: \"expand\", id: step.id, steps })}\n                    onRun={() => run(step)}\n                  />\n                ))}\n              </ul>\n              <Collapse show={completed.length > 0}>\n                <button\n                  type=\"button\"\n                  className=\"checklist-group-toggle\"\n                  data-group-toggle=\"\"\n                  aria-expanded={state.groupOpen}\n                  aria-controls={groupId}\n                  onClick={() => dispatch({ type: \"group\" })}\n                >\n                  <span className=\"sr-only\">{completed.length} completed</span>\n                  <span className=\"checklist-count-visual\" aria-hidden=\"true\">\n                    <RollingNumber word={String(completed.length)} />\n                    &nbsp;completed\n                  </span>\n                  <span\n                    className=\"checklist-chevron\"\n                    aria-hidden=\"true\"\n                    data-flipped={state.groupOpen ? undefined : \"\"}\n                  >\n                    <Chevron />\n                  </span>\n                </button>\n                <Collapse show={state.groupOpen}>\n                  <div id={groupId}>\n                    <ul className=\"checklist-list\" aria-label=\"Completed steps\">\n                      {steps.map((step) => {\n                        const doneId = `${baseId}-${step.id}-done`;\n                        return (\n                          <li key={step.id} data-completed-step={step.id} data-done=\"\">\n                            <Collapse show={state.settled.includes(step.id)}>\n                              <div className=\"checklist-step-inner\">\n                                <CheckButton checked labelledBy={doneId} onToggle={() => uncheck(step.id, true)} />\n                                <span className=\"checklist-done-title\">\n                                  <span id={doneId} className=\"checklist-title-text\">\n                                    {step.title}\n                                  </span>\n                                </span>\n                              </div>\n                            </Collapse>\n                          </li>\n                        );\n                      })}\n                    </ul>\n                  </div>\n                </Collapse>\n              </Collapse>\n            </div>\n          </div>\n        </div>\n        <span className=\"sr-only\" role=\"status\">\n          {state.message}\n        </span>\n      </section>\n    );\n  },\n);\n"],"mappings":"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"}