fix: add missing framer-motion dependency

Was imported in collection/index.tsx but not in package.json,
causing build failures in CI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

biome.json

@@ -7,7 +7,7 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"includes": ["**", "!src/client/routeTree.gen.ts"]
+		"includes": ["**", "!src/client/routeTree.gen.ts", "!drizzle", "!.planning"]
 	},
 	"formatter": {
 		"enabled": true,

bun.lock

@@ -12,6 +12,7 @@
         "@tanstack/react-router": "^1.167.0",
         "clsx": "^2.1.1",
         "drizzle-orm": "^0.45.1",
+        "framer-motion": "^12.38.0",
         "hono": "^4.12.8",
         "lucide-react": "^0.577.0",
         "react": "^19.2.4",
@@ -502,6 +503,8 @@
 
     "forwarded": ["forwarded@0.2.0", "", {}, "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="],
 
+    "framer-motion": ["framer-motion@12.38.0", "", { "dependencies": { "motion-dom": "^12.38.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g=="],
+
     "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],
 
     "fs-constants": ["fs-constants@1.0.0", "", {}, "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="],
@@ -632,6 +635,10 @@
 
     "mkdirp-classic": ["mkdirp-classic@0.5.3", "", {}, "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="],
 
+    "motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
+
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],

package.json

@@ -39,6 +39,7 @@
 		"@tanstack/react-router": "^1.167.0",
 		"clsx": "^2.1.1",
 		"drizzle-orm": "^0.45.1",
+		"framer-motion": "^12.38.0",
 		"hono": "^4.12.8",
 		"lucide-react": "^0.577.0",
 		"react": "^19.2.4",

src/client/components/WeightSummaryCard.tsx

@@ -264,12 +264,20 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
 						label="Consumable"
 						weight={consumableWeight}
 						unit={unit}
-						percent={totalWeight > 0 ? consumableWeight / totalWeight : undefined}
+						percent={
+							totalWeight > 0 ? consumableWeight / totalWeight : undefined
+						}
 					/>
 					<div className="border-t border-gray-200 mt-1.5 pt-1.5">
 						<div className="flex items-center gap-3 py-1.5">
-							<LucideIcon name="sigma" size={10} className="text-gray-400 shrink-0 ml-0.5" />
+							<LucideIcon
-							<span className="text-sm font-medium text-gray-700 flex-1">Total</span>
+								name="sigma"
+								size={10}
+								className="text-gray-400 shrink-0 ml-0.5"
+							/>
+							<span className="text-sm font-medium text-gray-700 flex-1">
+								Total
+							</span>
 							<span className="text-sm font-bold text-gray-900 tabular-nums">
 								{formatWeight(totalWeight, unit)}
 							</span>

src/client/hooks/useSetups.ts

@@ -113,7 +113,10 @@ export function useUpdateItemClassification(setupId: number) {
 		mutationFn: ({
 			itemId,
 			classification,
-		}: { itemId: number; classification: string }) =>
+		}: {
+			itemId: number;
+			classification: string;
+		}) =>
 			apiPatch<{ success: boolean }>(
 				`/api/setups/${setupId}/items/${itemId}/classification`,
 				{ classification },

src/client/routes/__root.tsx

@@ -59,7 +59,10 @@ function RootLayout() {
 
 	// Don't show onboarding wizard until user has created an account
 	const showWizard =
-		!onboardingLoading && onboardingComplete !== "true" && !wizardDismissed && isAuthenticated;
+		!onboardingLoading &&
+		onboardingComplete !== "true" &&
+		!wizardDismissed &&
+		isAuthenticated;
 
 	const isItemPanelOpen = panelMode !== "closed";
 	const isCandidatePanelOpen = candidatePanelMode !== "closed";

src/client/routes/collection/index.tsx

@@ -9,11 +9,11 @@ import { ItemCard } from "../../components/ItemCard";
 import { SetupCard } from "../../components/SetupCard";
 import { ThreadCard } from "../../components/ThreadCard";
 import { useCategories } from "../../hooks/useCategories";
+import { useCurrency } from "../../hooks/useCurrency";
 import { useItems } from "../../hooks/useItems";
 import { useCreateSetup, useSetups } from "../../hooks/useSetups";
 import { useThreads } from "../../hooks/useThreads";
 import { useTotals } from "../../hooks/useTotals";
-import { useCurrency } from "../../hooks/useCurrency";
 import { useWeightUnit } from "../../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../../lib/formatters";
 import { LucideIcon } from "../../lib/iconData";

src/client/routes/index.tsx

@@ -1,10 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { DashboardCard } from "../components/DashboardCard";
+import { useCurrency } from "../hooks/useCurrency";
 import { useSetups } from "../hooks/useSetups";
 import { useThreads } from "../hooks/useThreads";
 import { useTotals } from "../hooks/useTotals";
 import { useWeightUnit } from "../hooks/useWeightUnit";
-import { useCurrency } from "../hooks/useCurrency";
 import { formatPrice, formatWeight } from "../lib/formatters";
 
 export const Route = createFileRoute("/")({
@@ -35,7 +35,10 @@ function DashboardPage() {
 							label: "Weight",
 							value: formatWeight(global?.totalWeight ?? null, unit),
 						},
-						{ label: "Cost", value: formatPrice(global?.totalCost ?? null, currency) },
+						{
+							label: "Cost",
+							value: formatPrice(global?.totalCost ?? null, currency),
+						},
 					]}
 					emptyText="Get started"
 				/>

src/client/routes/setups/$setupId.tsx

@@ -4,13 +4,13 @@ import { CategoryHeader } from "../../components/CategoryHeader";
 import { ItemCard } from "../../components/ItemCard";
 import { ItemPicker } from "../../components/ItemPicker";
 import { WeightSummaryCard } from "../../components/WeightSummaryCard";
+import { useCurrency } from "../../hooks/useCurrency";
 import {
 	useDeleteSetup,
 	useRemoveSetupItem,
 	useSetup,
 	useUpdateItemClassification,
 } from "../../hooks/useSetups";
-import { useCurrency } from "../../hooks/useCurrency";
 import { useWeightUnit } from "../../hooks/useWeightUnit";
 import { formatPrice, formatWeight } from "../../lib/formatters";
 import { LucideIcon } from "../../lib/iconData";

tests/services/image.service.test.ts

@@ -1,9 +1,48 @@
-import { afterEach, describe, expect, it } from "bun:test";
+import { afterAll, afterEach, beforeAll, describe, expect, it } from "bun:test";
 import { existsSync, rmSync } from "node:fs";
+import type { Server } from "bun";
 import { fetchImageFromUrl } from "../../src/server/services/image.service.ts";
 
 const TEST_UPLOADS_DIR = "test-uploads";
 
+// 1x1 transparent PNG (smallest valid PNG)
+const TINY_PNG = new Uint8Array([
+	0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49,
+	0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, 0x08, 0x06,
+	0x00, 0x00, 0x00, 0x1f, 0x15, 0xc4, 0x89, 0x00, 0x00, 0x00, 0x0a, 0x49, 0x44,
+	0x41, 0x54, 0x78, 0x9c, 0x62, 0x00, 0x00, 0x00, 0x02, 0x00, 0x01, 0xe2, 0x21,
+	0xbc, 0x33, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60,
+	0x82,
+]);
+
+let server: Server;
+let baseUrl: string;
+
+beforeAll(() => {
+	server = Bun.serve({
+		port: 0,
+		fetch(req) {
+			const url = new URL(req.url);
+			if (url.pathname === "/image.png") {
+				return new Response(TINY_PNG, {
+					headers: { "Content-Type": "image/png" },
+				});
+			}
+			if (url.pathname === "/page.html") {
+				return new Response("<html></html>", {
+					headers: { "Content-Type": "text/html" },
+				});
+			}
+			return new Response("Not found", { status: 404 });
+		},
+	});
+	baseUrl = `http://localhost:${server.port}`;
+});
+
+afterAll(() => {
+	server.stop(true);
+});
+
 describe("Image Service", () => {
 	afterEach(() => {
 		if (existsSync(TEST_UPLOADS_DIR)) {
@@ -13,8 +52,7 @@ describe("Image Service", () => {
 
 	describe("fetchImageFromUrl", () => {
 		it("fetches a valid image URL and saves to disk", async () => {
-			const imageUrl =
+			const imageUrl = `${baseUrl}/image.png`;
-				"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
 			const result = await fetchImageFromUrl(imageUrl, TEST_UPLOADS_DIR);
 
 			expect(result.filename).toMatch(/^\d+-[\w-]+\.png$/);
@@ -26,7 +64,7 @@ describe("Image Service", () => {
 
 		it("rejects non-image content type", async () => {
 			await expect(
-				fetchImageFromUrl("https://example.com/", TEST_UPLOADS_DIR),
+				fetchImageFromUrl(`${baseUrl}/page.html`, TEST_UPLOADS_DIR),
 			).rejects.toThrow("Invalid content type");
 		});
 
@@ -41,5 +79,11 @@ describe("Image Service", () => {
 				fetchImageFromUrl("ftp://example.com/image.png", TEST_UPLOADS_DIR),
 			).rejects.toThrow("URL must use HTTP or HTTPS");
 		});
+
+		it("rejects 404 responses", async () => {
+			await expect(
+				fetchImageFromUrl(`${baseUrl}/missing.jpg`, TEST_UPLOADS_DIR),
+			).rejects.toThrow("HTTP 404");
+		});
 	});
 });

tests/services/thread.service.test.ts

@@ -434,7 +434,10 @@ describe("Thread Service", () => {
 		});
 
 		it("returns { success: false, error } when thread status is 'resolved'", () => {
-			const thread = createThread(db, { name: "Resolved Thread", categoryId: 1 });
+			const thread = createThread(db, {
+				name: "Resolved Thread",
+				categoryId: 1,
+			});
 			const candidate = createCandidate(db, thread.id, {
 				name: "Winner",
 				categoryId: 1,