{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"plan","type":"registry:component","title":"Plan","description":"An agent’s checklist that ticks itself off: pending, in progress, done, skipped or failed.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json"],"files":[{"path":"registry/plan.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDown, ListChecks, X } from \"lucide-react\";\nimport { NumberRoll } from \"./number-roll\";\n\n/* ─────────────────────────────────────────────────────────\n * PLAN: an agent's checklist, ticking itself off\n *\n * pending not started\n * running being worked on now; the ring turns into a spinner\n * done finished; the spinner blurs into a check that draws\n * itself, and a strike-through draws across the label\n * skipped no longer needed\n * failed couldn't be done; the reason folds open underneath\n *\n * A hairline under the header fills as tasks finish and the count\n * rolls (\"3 of 5\"). When every task is settled \"done\" slides in\n * beside it and the plan folds into that one line.\n * ───────────────────────────────────────────────────────── */\n\nexport type PlanTaskStatus = \"pending\" | \"running\" | \"done\" | \"skipped\" | \"failed\";\n\nexport interface PlanTask {\n id?: string;\n label: string;\n /** A note under the task, e.g. why it failed or what it produced. */\n detail?: string;\n status: PlanTaskStatus;\n}\n\nexport interface PlanProps extends Omit, \"title\"> {\n tasks: PlanTask[];\n title?: string;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Fold into the summary once every task is settled. */\n collapseWhenDone?: boolean;\n}\n\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst STATUS_TEXT: Record = {\n pending: \"Not started\",\n running: \"In progress\",\n done: \"Done\",\n skipped: \"Skipped\",\n failed: \"Failed\",\n};\n\nconst MORPH = \"cubic-bezier(0.16,1,0.3,1)\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/** Icons trade places through a blur: the old one shrinks away as the new one grows in. */\nconst swap = (on: boolean, reduced: boolean): React.CSSProperties => ({\n opacity: on ? 1 : 0,\n transform: on ? \"none\" : \"scale(0.6)\",\n filter: on ? \"none\" : \"blur(3px)\",\n transition: reduced ? \"none\" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`,\n});\n\n/** Every mark is there at once; the one for the task's status shows, and they trade places through a blur. */\nfunction Mark({ status, reduced }: { status: PlanTaskStatus; reduced: boolean }) {\n const layer = \"absolute inset-0 flex items-center justify-center\";\n return (\n \n \n \n \n \n {/* Spins only while it's showing. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\n/** A note that folds open under its task and folds shut again, keeping its words while it closes. */\nfunction Detail({ text, failed, reduced }: { text?: string; failed: boolean; reduced: boolean }) {\n const [last, setLast] = React.useState(text);\n if (text && text !== last) setLast(text);\n return (\n \n \n {text ?? last}\n \n \n );\n}\n\nexport function Plan({\n tasks,\n title = \"Plan\",\n open,\n defaultOpen = true,\n onOpenChange,\n collapseWhenDone = true,\n className = \"\",\n ...props\n}: PlanProps) {\n const reduced = useReducedMotion();\n const [ownOpen, setOwnOpen] = React.useState(defaultOpen);\n const [touched, setTouched] = React.useState(false);\n const panelId = React.useId();\n\n const done = tasks.filter((t) => t.status === \"done\").length;\n const settled = tasks.length > 0 && tasks.every((t) => t.status === \"done\" || t.status === \"skipped\" || t.status === \"failed\");\n const failed = tasks.some((t) => t.status === \"failed\");\n const expanded = open ?? ownOpen;\n\n // Fold away once everything is settled, unless the user has taken control or something failed.\n React.useEffect(() => {\n if (!collapseWhenDone || open !== undefined || touched || !settled || failed) return;\n const timer = window.setTimeout(() => setOwnOpen(false), 1200);\n return () => window.clearTimeout(timer);\n }, [collapseWhenDone, open, touched, settled, failed]);\n\n const toggle = () => {\n const next = !expanded;\n setTouched(true);\n if (open === undefined) setOwnOpen(next);\n onOpenChange?.(next);\n };\n\n return (\n
\n \n \n {title}\n \n \n  of \n \n \n  done\n \n \n \n \n {/* Outside the button, so its name stays the title. */}\n \n {settled ? `${done} of ${tasks.length} done` : `${done} of ${tasks.length}`}\n \n\n
\n \n
\n\n \n
\n
    \n {tasks.map((task, i) => {\n const quiet = task.status === \"done\" || task.status === \"skipped\";\n return (\n
  1. \n \n \n \n \n \n {/* The strike draws itself across each line of the label, left to right. */}\n \n {task.label}\n \n , {STATUS_TEXT[task.status]}\n \n \n \n
    2. \n );\n })}\n
\n
\n
\n \n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/plan"}