From 27a15f04286f45c244e37fff504aec6af5ff5276 Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Sun, 25 Oct 2026 21:34:33 +0000
Subject: [PATCH] =?UTF-8?q?pc:=20grouped=20=C3=97N=20cards=20list=20each?=
 =?UTF-8?q?=20item=20on=20its=20own=20line,=20shared=20brand=20in=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/pc/SetupCard.svelte | 44 +++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/lib/pc/SetupCard.svelte b/src/lib/pc/SetupCard.svelte
index 6814fab..b76b97b 100644
--- a/src/lib/pc/SetupCard.svelte
+++ b/src/lib/pc/SetupCard.svelte
@@ -38,6 +38,16 @@
 	const qty = $derived(parts.reduce((s, p) => s + (isAddOn(p) ? 0 : units(p)), 0));
 	const image = $derived(parts.flatMap((p) => p.imageUrls)[0] ?? null);
 	const names = $derived([...new Set(parts.map(displayName))]);
+	// Grouped (×N) cards list each item on its own line; a brand shared by all moves to the label.
+	const brands = $derived([...new Set(parts.map((p) => p.brand ?? ''))]);
+	const sharedBrand = $derived(
+		names.length > 1 && brands.length === 1 && brands[0] ? brands[0] : null
+	);
+	const lines = $derived(
+		sharedBrand
+			? [...new Set(parts.map((p) => displayName({ brand: null, model: p.model })))]
+			: names
+	);
 	const spec = $derived(keySpec(first));
 	const badges = $derived([...new Set(parts.flatMap(usageBadges))]);
 	const flag = $derived(badges.find((b) => b !== 'long ago') ?? null);
@@ -63,12 +73,19 @@
 			>{/if}
 		<span class="min-w-0 flex-1">
 			<span class="label">
-				{slotLabel(slot, first.category)}{#if qty > 1}<span class="qty">×{qty}</span>{/if}
+				{slotLabel(slot, first.category)}{#if qty > 1}<span class="qty">×{qty}</span
+					>{/if}{#if sharedBrand}<span class="brand">· {sharedBrand}</span>{/if}
 				{#if !compact}{#each badges as b (b)}<span class="badge" class:warn={b === 'model TBD'}
 							>{b}</span
 						>{/each}{/if}
 			</span>
-			<span class="name" title={names.join(' + ')}>{names.join(' + ')}</span>
+			{#if lines.length > 1}
+				<span class="lines">
+					{#each lines as l (l)}<span class="line">{l}</span>{/each}
+				</span>
+			{:else}
+				<span class="name" title={names[0]}>{names[0]}</span>
+			{/if}
 			{#if spec && !compact}<span class="spec">{spec}</span>{/if}
 		</span>
 	</button>
@@ -210,6 +227,29 @@
 		font-weight: 500;
 		line-height: 1.2;
 	}
+	.brand {
+		text-transform: none;
+		letter-spacing: 0;
+	}
+	.lines {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		margin-top: 0.05rem;
+	}
+	.line {
+		font-size: 0.8rem;
+		font-weight: 500;
+		line-height: 1.2;
+		overflow-wrap: anywhere;
+	}
+	.line + .line {
+		padding-top: 0.1rem;
+		border-top: 1px solid color-mix(in srgb, var(--site-border) 60%, transparent);
+	}
+	.compact .line {
+		font-size: 0.72rem;
+	}
 	.compact .label {
 		letter-spacing: 0.03em;
 	}