From 20a18d175d6c0f47195c8d9e03fb9c8e0e08db6c Mon Sep 17 00:00:00 2001
From: fullstackjam <fullstackjam@outlook.com>
Date: Sun, 28 Jun 2026 01:15:48 +0800
Subject: [PATCH] feat(ui): package fingerprint visualization across config
 surfaces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow the updated OpenBoot Redesign design file (v2): replace the flat
"DNA segment bar" with an animated "package fingerprint" — tall vertical
bars colored by package type (cli = green, cask = amber, npm = blue), with
heights seeded deterministically per config so a given config renders the
same shape everywhere, rising on mount via a shared `ob-rise` keyframe.

New shared pieces:
- src/lib/fingerprint.ts — countPackageTypes + buildFingerprint (seeded LCG)
- PackageFingerprint.svelte — renders the bars + defines the global keyframe

Applied to the four surfaces the design touches:
- explore: header restyled to a "community registry / N public" pill badge
  with a larger title and new copy; each card gains a fingerprint
- profile: each card gains a fingerprint (matches the same config on explore)
- dashboard (ConfigRow): flat DNA bar -> fingerprint (hidden for 0-pkg configs)
- config detail (ConfigDetail): hero reworked into a bordered card with the
  fingerprint as a faded background, meta count-swatches, and an install-rail glow

Verified explore/detail/dashboard/profile in light and dark via Playwright.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/ConfigDetail.svelte       | 195 +++++++++++--------
 src/lib/components/ConfigRow.svelte          |  39 +---
 src/lib/components/PackageFingerprint.svelte |  26 +++
 src/lib/fingerprint.ts                       |  65 +++++++
 src/routes/[username]/+page.svelte           |  12 ++
 src/routes/explore/+page.svelte              |  71 +++++--
 6 files changed, 290 insertions(+), 118 deletions(-)
 create mode 100644 src/lib/components/PackageFingerprint.svelte
 create mode 100644 src/lib/fingerprint.ts

diff --git a/src/lib/components/ConfigDetail.svelte b/src/lib/components/ConfigDetail.svelte
index 86a9c86..cf0d826 100644
--- a/src/lib/components/ConfigDetail.svelte
+++ b/src/lib/components/ConfigDetail.svelte
@@ -3,6 +3,7 @@
 	import { getCatalogItem } from '$lib/macos-prefs-catalog';
 	import ShareModal from '$lib/components/ShareModal.svelte';
 	import MacOSPreferencesDisplay from '$lib/components/MacOSPreferencesDisplay.svelte';
+	import PackageFingerprint from '$lib/components/PackageFingerprint.svelte';
 
 	let {
 		configUser,
@@ -134,22 +135,13 @@
 	const configNpm = $derived(configPkgs.filter((p) => p.type === 'npm'));
 	const configTaps = $derived(configPkgs.filter((p) => p.type === 'tap'));
 
-	// Package "DNA" — one segment per package, opacity ramping within each group.
-	type Seg = { color: string; opacity: number };
-	const dna = $derived.by((): Seg[] => {
-		const groups: [number, string][] = [
-			[configCli.length, 'var(--accent)'],
-			[configApps.length, 'var(--amber)'],
-			[configNpm.length, '#7aa2e3']
-		];
-		const segs: Seg[] = [];
-		for (const [n, color] of groups) {
-			for (let i = 0; i < n; i++) {
-				segs.push({ color, opacity: 0.55 + (i / Math.max(n - 1, 1)) * 0.45 });
-			}
-		}
-		return segs;
+	// Package "fingerprint" — tall bars colored by type, behind the hero.
+	const fpCounts = $derived({
+		cli: configCli.length,
+		cask: configApps.length,
+		npm: configNpm.length
 	});
+	const fpSeed = $derived(String(config.alias ?? config.id ?? config.name ?? ''));
 
 	const dnaLegend = $derived(
 		[
@@ -199,51 +191,51 @@
 		<div class="grid">
 			<!-- main -->
 			<div class="main">
-				<div class="byline">
-					{#if configUser.avatar_url}
-						<img src={configUser.avatar_url} alt={configUser.username} class="avatar" />
-					{:else}
-						<span class="avatar avatar-ph">{configUser.username.charAt(0).toLowerCase()}</span>
-					{/if}
-					<a href="/{configUser.username}" class="user">@{configUser.username}</a>
-					<span class="vis-badge" class:public={visibility === 'public'}>{visibility}</span>
-				</div>
-
-				<h1 class="title">{config.name}</h1>
-				{#if config.description}
-					<p class="desc">{config.description}</p>
-				{/if}
-
-				<div class="meta">
-					<span class="meta-item">
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
-						<span class="strong">{config.install_count || 0}</span> installs
-					</span>
-					{#if formatDate(config.updated_at)}
-						<span>updated {formatDate(config.updated_at)}</span>
-					{/if}
-					{#if config.base_preset}
-						<span>base preset <span class="strong">{config.base_preset}</span></span>
-					{/if}
-				</div>
-
-				{#if dna.length > 0}
-					<div class="dna">
-						{#each dna as seg}
-							<span style="flex:1; height:100%; background:{seg.color}; opacity:{seg.opacity};"></span>
-						{/each}
+				<div class="hero-card">
+					<div class="hero-fp" aria-hidden="true">
+						<PackageFingerprint counts={fpCounts} seed={fpSeed} delayStep={11} duration={0.55} />
 					</div>
-					<div class="dna-legend">
-						{#each dnaLegend as l}
-							<span><span class="swatch" style="background:{l.color};"></span>{l.n} {l.label}</span>
-						{/each}
+					<div class="hero-fade-x"></div>
+					<div class="hero-fade-y"></div>
+					<div class="hero-body">
+						<div class="byline">
+							{#if configUser.avatar_url}
+								<img src={configUser.avatar_url} alt={configUser.username} class="avatar" />
+							{:else}
+								<span class="avatar avatar-ph">{configUser.username.charAt(0).toLowerCase()}</span>
+							{/if}
+							<a href="/{configUser.username}" class="user">@{configUser.username}</a>
+							<span class="vis-badge" class:public={visibility === 'public'}>{visibility}</span>
+						</div>
+
+						<h1 class="title">{config.name}</h1>
+						{#if config.description}
+							<p class="desc">{config.description}</p>
+						{/if}
+
+						<div class="meta">
+							<span class="meta-item">
+								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
+								<span class="strong">{config.install_count || 0}</span> installs
+							</span>
+							{#if formatDate(config.updated_at)}
+								<span>updated {formatDate(config.updated_at)}</span>
+							{/if}
+							{#if dnaLegend.length > 0}
+								<span class="counts">
+									{#each dnaLegend as l}
+										<span class="count" title={l.label}><span class="swatch" style="background:{l.color};"></span>{l.n}</span>
+									{/each}
+								</span>
+							{/if}
+						</div>
 					</div>
-				{/if}
+				</div>
 			</div>
 
 			<!-- rail -->
 			<div class="rail">
-				<div class="rail-card">
+				<div class="rail-card install">
 					<div class="rail-label">Install this setup</div>
 					<button class="curl-btn" onclick={copyCurl}>
 						<code><span class="prompt">$</span> {getCurlCommand()}</code>
@@ -435,17 +427,52 @@
 		align-items: start;
 	}
 
+	.hero-card {
+		position: relative;
+		border: 1px solid var(--border-hover);
+		border-radius: 16px;
+		overflow: hidden;
+		background: var(--bg-secondary);
+		margin-bottom: 26px;
+	}
+
+	.hero-fp {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: flex-end;
+		gap: 3px;
+		padding: 14px;
+	}
+
+	.hero-fade-x {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(102deg, var(--bg-secondary) 44%, transparent 99%);
+	}
+
+	.hero-fade-y {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(0deg, var(--bg-secondary) 7%, transparent 62%);
+	}
+
+	.hero-body {
+		position: relative;
+		padding: 28px 30px 26px;
+	}
+
 	/* ---------- main column ---------- */
 	.byline {
 		display: flex;
 		align-items: center;
 		gap: 11px;
-		margin-bottom: 16px;
+		margin-bottom: 18px;
 	}
 
 	.avatar {
-		width: 34px;
-		height: 34px;
+		width: 30px;
+		height: 30px;
 		border-radius: 50%;
 		flex-shrink: 0;
 	}
@@ -456,7 +483,7 @@
 		justify-content: center;
 		background: var(--bg-tertiary);
 		border: 1px solid var(--border-hover);
-		font-size: 0.85rem;
+		font-size: 0.82rem;
 		color: var(--text-secondary);
 	}
 
@@ -486,19 +513,20 @@
 	}
 
 	.title {
-		font-size: 2.1rem;
+		font-size: 2.6rem;
 		font-weight: 500;
-		letter-spacing: -0.03em;
-		margin: 0 0 12px;
+		letter-spacing: -0.04em;
+		line-height: 1.02;
+		margin: 0 0 14px;
 		color: var(--text-primary);
 	}
 
 	.desc {
-		font-size: 0.95rem;
+		font-size: 0.94rem;
 		color: var(--text-secondary);
 		line-height: 1.65;
-		max-width: 60ch;
-		margin: 0 0 20px;
+		max-width: 46ch;
+		margin: 0 0 22px;
 	}
 
 	.meta {
@@ -506,9 +534,8 @@
 		align-items: center;
 		gap: 20px;
 		flex-wrap: wrap;
-		font-size: 0.82rem;
+		font-size: 0.8rem;
 		color: var(--text-muted);
-		margin-bottom: 18px;
 	}
 
 	.meta-item {
@@ -521,20 +548,16 @@
 		color: var(--text-secondary);
 	}
 
-	.dna {
+	.counts {
 		display: flex;
-		height: 8px;
-		gap: 2px;
-		max-width: 420px;
+		align-items: center;
+		gap: 13px;
+		margin-left: 4px;
 	}
 
-	.dna-legend {
-		display: flex;
-		gap: 18px;
-		flex-wrap: wrap;
-		margin-top: 11px;
-		font-size: 0.74rem;
-		color: var(--text-muted);
+	.count {
+		display: inline-flex;
+		align-items: center;
 	}
 
 	.swatch {
@@ -562,6 +585,24 @@
 		padding: 20px;
 	}
 
+	.rail-card.install {
+		position: relative;
+		overflow: hidden;
+		border-color: var(--border-hover);
+	}
+
+	.rail-card.install::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(150deg, var(--accent-glow), transparent 60%);
+		pointer-events: none;
+	}
+
+	.rail-card.install > * {
+		position: relative;
+	}
+
 	.rail-label {
 		font-size: 0.74rem;
 		color: var(--text-muted);
diff --git a/src/lib/components/ConfigRow.svelte b/src/lib/components/ConfigRow.svelte
index ae6805c..f061259 100644
--- a/src/lib/components/ConfigRow.svelte
+++ b/src/lib/components/ConfigRow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ContextMenu from './ContextMenu.svelte';
+	import PackageFingerprint from './PackageFingerprint.svelte';
 
 	interface Config {
 		id: string;
@@ -32,22 +33,6 @@
 	const apps = $derived(packages.filter((p: any) => p.type === 'cask').length);
 	const npm = $derived(packages.filter((p: any) => p.type === 'npm').length);
 
-	// DNA: one segment per package, grouped by type, brightening across each group
-	const dna = $derived.by(() => {
-		const groups: [number, string][] = [
-			[cli, 'var(--accent)'],
-			[apps, 'var(--amber)'],
-			[npm, '#7aa2e3'],
-		];
-		const segs: { color: string; opacity: number }[] = [];
-		for (const [n, color] of groups) {
-			for (let i = 0; i < n; i++) {
-				segs.push({ color, opacity: 0.55 + (i / Math.max(n - 1, 1)) * 0.45 });
-			}
-		}
-		return segs;
-	});
-
 	const installUrl = $derived(
 		config.alias ? `openboot.dev/${config.alias}` : `openboot.dev/${username}/${config.slug}`
 	);
@@ -84,11 +69,9 @@
 				<h3 class="row-name">{config.name}</h3>
 				<span class="vis-tag" class:public={config.visibility === 'public'}>{config.visibility}</span>
 			</div>
-			{#if dna.length > 0}
-				<div class="dna" aria-hidden="true">
-					{#each dna as seg, i (i)}
-						<span class="dna-seg" style="background:{seg.color}; opacity:{seg.opacity};"></span>
-					{/each}
+			{#if cli + apps + npm > 0}
+				<div class="fingerprint" aria-hidden="true">
+					<PackageFingerprint counts={{ cli, cask: apps, npm }} seed={config.slug ?? config.name} />
 				</div>
 			{/if}
 			{#if config.description}
@@ -145,7 +128,7 @@
 		gap: 24px;
 	}
 
-	/* ── identity + dna ── */
+	/* ── identity + fingerprint ── */
 	.identity {
 		flex: 1 1 0;
 		min-width: 0;
@@ -186,17 +169,13 @@
 		border-color: color-mix(in srgb, var(--accent) 40%, transparent);
 	}
 
-	.dna {
+	.fingerprint {
 		display: flex;
-		height: 7px;
+		align-items: flex-end;
+		height: 24px;
 		gap: 2px;
 		margin-bottom: 11px;
-		max-width: 280px;
-	}
-
-	.dna-seg {
-		flex: 1;
-		height: 100%;
+		max-width: 300px;
 	}
 
 	.row-desc {
diff --git a/src/lib/components/PackageFingerprint.svelte b/src/lib/components/PackageFingerprint.svelte
new file mode 100644
index 0000000..8d3e995
--- /dev/null
+++ b/src/lib/components/PackageFingerprint.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { buildFingerprint, type TypeCounts } from '$lib/fingerprint';
+
+	let {
+		counts,
+		seed,
+		delayStep = 26,
+		duration = 0.5
+	}: { counts: TypeCounts; seed: string; delayStep?: number; duration?: number } = $props();
+
+	const bars = $derived(buildFingerprint(counts, seed, delayStep, duration));
+</script>
+
+{#each bars as b (b.key)}<span style={b.barStyle}></span>{/each}
+
+<style>
+	/* Global so the inline `animation:ob-rise` on each bar resolves to it. */
+	@keyframes -global-ob-rise {
+		from {
+			transform: scaleY(0);
+		}
+		to {
+			transform: scaleY(1);
+		}
+	}
+</style>
diff --git a/src/lib/fingerprint.ts b/src/lib/fingerprint.ts
new file mode 100644
index 0000000..00ec244
--- /dev/null
+++ b/src/lib/fingerprint.ts
@@ -0,0 +1,65 @@
+// Package "fingerprint" — one tall bar per package, grouped and colored by type
+// (cli = green, cask = amber, npm = blue). Bar heights are seeded from a stable
+// per-config string so the shape stays the same across renders. Bars rise on
+// mount via the global `ob-rise` keyframe defined in PackageFingerprint.svelte.
+
+export interface TypeCounts {
+	cli: number;
+	cask: number;
+	npm: number;
+}
+
+export interface FingerprintBar {
+	key: string;
+	barStyle: string;
+}
+
+/** Bucket packages into the three fingerprint groups. Anything that isn't a
+ *  cask or npm package (formulae, taps, …) counts as cli/green. */
+export function countPackageTypes(packages: unknown[]): TypeCounts {
+	let cli = 0;
+	let cask = 0;
+	let npm = 0;
+	for (const p of packages ?? []) {
+		const type = typeof p === 'string' ? 'formula' : ((p as { type?: string })?.type ?? 'formula');
+		if (type === 'cask') cask++;
+		else if (type === 'npm') npm++;
+		else cli++;
+	}
+	return { cli, cask, npm };
+}
+
+/** Build the bar list. `seed` (e.g. the config slug) makes heights deterministic. */
+export function buildFingerprint(
+	counts: TypeCounts,
+	seed: string,
+	delayStep = 26,
+	duration = 0.5
+): FingerprintBar[] {
+	const groups: [string, number, string][] = [
+		['cli', counts.cli, 'var(--accent)'],
+		['cask', counts.cask, 'var(--amber)'],
+		['npm', counts.npm, '#7aa2e3']
+	];
+	// tiny LCG seeded from the string so a config always renders the same shape
+	let s = 0;
+	for (let i = 0; i < seed.length; i++) s = (s * 31 + seed.charCodeAt(i)) >>> 0;
+	const rnd = () => {
+		s = (s * 1664525 + 1013904223) >>> 0;
+		return s / 4294967296;
+	};
+	const bars: FingerprintBar[] = [];
+	let idx = 0;
+	for (const [type, n, color] of groups) {
+		for (let i = 0; i < n; i++) {
+			const height = (34 + rnd() * 64).toFixed(0);
+			const opacity = (0.5 + rnd() * 0.45).toFixed(2);
+			bars.push({
+				key: `${type}-${i}`,
+				barStyle: `flex:1; align-self:flex-end; transform-origin:bottom; border-radius:2px 2px 0 0; background:${color}; height:${height}%; opacity:${opacity}; animation:ob-rise ${duration}s cubic-bezier(.2,.8,.2,1) both; animation-delay:${idx * delayStep}ms;`
+			});
+			idx++;
+		}
+	}
+	return bars;
+}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index e4ffbf7..47d75a8 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import ConfigDetail from '$lib/components/ConfigDetail.svelte';
+	import PackageFingerprint from '$lib/components/PackageFingerprint.svelte';
+	import { countPackageTypes } from '$lib/fingerprint';
 
 	let { data }: { data: PageData } = $props();
 
@@ -147,6 +149,9 @@
 							{#if config.description}
 								<p class="config-description">{config.description}</p>
 							{/if}
+							<div class="card-fingerprint" aria-hidden="true">
+								<PackageFingerprint counts={countPackageTypes(config.packages)} seed={config.slug} />
+							</div>
 							<div class="card-footer">
 								<span class="stat-pkgs">{getPackageBreakdown(config.packages)}</span>
 								<span class="stat-installs">
@@ -411,6 +416,13 @@
 		overflow: hidden;
 	}
 
+	.card-fingerprint {
+		display: flex;
+		align-items: flex-end;
+		gap: 2px;
+		height: 26px;
+	}
+
 	.card-footer {
 		display: flex;
 		gap: 14px;
diff --git a/src/routes/explore/+page.svelte b/src/routes/explore/+page.svelte
index a33bca2..e0d49ae 100644
--- a/src/routes/explore/+page.svelte
+++ b/src/routes/explore/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import PackageFingerprint from '$lib/components/PackageFingerprint.svelte';
+	import { countPackageTypes } from '$lib/fingerprint';
 
 	interface Config {
 		id: string;
@@ -112,10 +114,14 @@
 	<div class="container">
 		<section class="hero">
 			<div class="hero-content">
-				<p class="hero-prompt"><span class="accent">&gt;</span> explore</p>
+				<div class="hero-badge">
+					<span class="badge-dot"></span>
+					<span class="badge-label">community registry</span>
+					{#if total > 0}<span class="badge-count">{total} public</span>{/if}
+				</div>
 				<h1 class="hero-title">Community configurations</h1>
 				<p class="hero-subtitle">
-					Developer setups shared by the community{#if total > 0} — {total} public {total === 1 ? 'config' : 'configs'} and counting{/if}.
+					Real developer setups, shared as one-line installs. Find one close to yours, then make it your own.
 				</p>
 			</div>
 			<div class="sort-controls">
@@ -190,6 +196,9 @@
 						</div>
 						<h3 class="config-name">{config.name}</h3>
 						<p class="config-description">{config.description}</p>
+						<div class="card-fingerprint" aria-hidden="true">
+							<PackageFingerprint counts={countPackageTypes(getPackages(config))} seed={config.slug} />
+						</div>
 						<div class="card-footer">
 							{#if getPackageBreakdown(config).cli > 0 || getPackageBreakdown(config).apps > 0}
 								<div class="stat packages">
@@ -260,27 +269,60 @@
 		flex-wrap: wrap;
 	}
 
-	.hero-prompt {
-		color: var(--text-muted);
-		font-size: 0.85rem;
+	.hero-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 9px;
+		border: 1px solid var(--border-hover);
+		border-radius: 100px;
+		padding: 6px 13px 6px 11px;
+		margin: 0 0 20px;
+	}
+
+	.badge-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--accent);
+		animation: ob-pulse 1.8s ease infinite;
+	}
+
+	.badge-label {
+		font-size: 0.76rem;
+		color: var(--text-secondary);
 		letter-spacing: 0.01em;
-		margin: 0 0 16px;
 	}
 
-	.hero-prompt .accent {
+	.badge-count {
+		font-size: 0.7rem;
 		color: var(--accent);
+		border-left: 1px solid var(--border-hover);
+		padding-left: 9px;
+	}
+
+	@keyframes ob-pulse {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.45;
+			transform: scale(1.5);
+		}
 	}
 
 	.hero-title {
-		font-size: 1.9rem;
+		font-size: 2.5rem;
 		font-weight: 500;
-		letter-spacing: -0.025em;
+		letter-spacing: -0.035em;
+		line-height: 1.04;
 		color: var(--text-primary);
-		margin: 0 0 12px;
+		margin: 0 0 14px;
 	}
 
 	.hero-subtitle {
-		font-size: 0.9rem;
+		font-size: 0.95rem;
 		color: var(--text-secondary);
 		margin: 0;
 		max-width: 60ch;
@@ -570,6 +612,13 @@
 		overflow: hidden;
 	}
 
+	.card-fingerprint {
+		display: flex;
+		align-items: flex-end;
+		gap: 2px;
+		height: 26px;
+	}
+
 	.card-footer {
 		display: flex;
 		gap: 14px;