\n \n

\n Finalizing shopping list...\n

\n \n );\n}\n\nexport function ShoppingListWidget() {\n const data = useToolOutput();\n const theme = useTheme();\n const isDark = theme === \"dark\";\n const [state, setState] = useWidgetState(() => INITIAL_STATE);\n\n if (!data || data.kind !== \"capsule_shopping_list\") {\n return ;\n }\n\n const { capsule } = data;\n\n useEffect(() => {\n const validIds = new Set(\n capsule.categories.flatMap((category) => category.items.map((item) => item.id)),\n );\n\n setState((previous) => {\n const nextPurchased: Record = {};\n let changed = false;\n\n for (const id of validIds) {\n if (previous.purchased?.[id]) {\n nextPurchased[id] = true;\n }\n }\n\n if (Object.keys(nextPurchased).length !== Object.keys(previous.purchased ?? {}).length) {\n changed = true;\n } else {\n for (const key of Object.keys(previous.purchased ?? {})) {\n if (!nextPurchased[key]) {\n changed = true;\n break;\n }\n }\n }\n\n if (!changed) {\n return previous;\n }\n\n return {\n ...previous,\n purchased: nextPurchased,\n };\n });\n }, [capsule.capsuleId, setState]);\n\n const purchased = state?.purchased ?? {};\n\n const allItems = capsule.categories.flatMap((category) =>\n category.items.map((item) => ({\n ...item,\n category: category.label,\n })),\n );\n\n const mustHaveItems = allItems.filter((item) => item.priority === \"must_have\");\n const niceToHaveItems = allItems.filter((item) => item.priority === \"nice_to_have\");\n\n const purchasedMustHave = mustHaveItems.filter((item) => purchased[item.id]);\n const purchasedNiceToHave = niceToHaveItems.filter((item) => purchased[item.id]);\n\n const purchasedSpend = allItems\n .filter((item) => purchased[item.id])\n .reduce((sum, item) => sum + item.total, 0);\n const purchasedPercent =\n capsule.totalBudget <= 0\n ? 0\n : Math.min(100, Math.round((purchasedSpend / capsule.totalBudget) * 100));\n\n function toggleItem(itemId: string) {\n setState((previous) => {\n const nextPurchased = { ...(previous.purchased ?? {}) };\n nextPurchased[itemId] = !nextPurchased[itemId];\n return {\n ...previous,\n purchased: nextPurchased,\n };\n });\n }\n\n function resetChecklist() {\n setState(() => ({\n purchased: {},\n }));\n }\n\n function handleExport() {\n const lines: string[] = [];\n lines.push(`# ${capsule.title}`);\n lines.push(`Capsule ID: ${capsule.capsuleId}`);\n lines.push(`Working Budget: $${capsule.totalBudget.toFixed(0)}`);\n lines.push(`Remaining Buffer: $${capsule.remainingBudget.toFixed(0)}`);\n lines.push(\"\");\n lines.push(`Purchased Spend: $${purchasedSpend.toFixed(0)} (${purchasedPercent}% of budget)`);\n lines.push(\"\");\n\n lines.push(\"## Must-have Items\");\n mustHaveItems.forEach((item) => {\n const marker = purchased[item.id] ? \"[x]\" : \"[ ]\";\n lines.push(`${marker} ${item.name} - $${item.total.toFixed(0)} (${item.category})`);\n });\n\n lines.push(\"\");\n lines.push(\"## Nice-to-have Items\");\n niceToHaveItems.forEach((item) => {\n const marker = purchased[item.id] ? \"[x]\" : \"[ ]\";\n lines.push(`${marker} ${item.name} - $${item.total.toFixed(0)} (${item.category})`);\n });\n\n const exportBlob = new Blob([lines.join(\"\\n\")], { type: \"text/plain\" });\n const url = URL.createObjectURL(exportBlob);\n const anchor = document.createElement(\"a\");\n anchor.href = url;\n anchor.download = `${capsule.capsuleId}-shopping-list.txt`;\n anchor.click();\n URL.revokeObjectURL(url);\n }\n\n const containerClasses = `max-w-3xl mx-auto p-6 lg:p-8 rounded-2xl shadow-lg transition-colors ${\n isDark ? \"bg-gray-900 text-gray-100\" : \"bg-white text-gray-900\"\n }`;\n const secondaryText = isDark ? \"text-gray-300\" : \"text-gray-600\";\n\n return (\n

\n Capsule - {capsule.capsuleId}\n

Shopping Checklist

\n {purchasedMustHave.length} / {mustHaveItems.length} must-haves purchased ·{\" \"}\n {purchasedNiceToHave.length} / {niceToHaveItems.length} nice-to-haves\n

\n\n

\n \n Export Checklist\n \n \n Reset\n \n

\n\n

Budget Tracker

\n {`Planned spend: $${capsule.totals.overall.spend.toFixed(0)} | Budget window: $${capsule.totalBudget.toFixed(0)}`}\n

\n\n

\n Purchased coverage\n {purchasedPercent}%\n

\n\n

Must-have: \n {purchasedMustHave.length} / {mustHaveItems.length}\n
Nice-to-have: \n {purchasedNiceToHave.length} / {niceToHaveItems.length}\n
Remaining buffer: ${capsule.remainingBudget.toFixed(0)}

\n\n

\n {capsule.categories.map((category) => {\n const percent = Math.min(100, Math.round(category.progress * 100));\n const overBudget = category.remaining < 0;\n\n const categoryMust = category.items.filter((item) => item.priority === \"must_have\");\n const categoryNice = category.items.filter((item) => item.priority === \"nice_to_have\");\n\n return (\n \n

{category.label}

\n {`Budget $${category.allocatedBudget.toFixed(0)} | Planned $${category.spend.toFixed(0)}`}\n

\n \n {overBudget ? `Over by $${Math.abs(category.remaining).toFixed(0)}` : `Buffer $${category.remaining.toFixed(0)}`}\n \n

\n\n

\n \n

\n\n

\n \n \n