feat: canonical / Observatory Ledger reader (TIN-2903)

e2e/homepage.spec.ts

@@ -1,14 +1,23 @@
 import { test, expect } from '@playwright/test';
 
-test.describe('Homepage redirect', () => {
-	test('/ redirects to /blog', async ({ page }) => {
+// TIN-2903 ratified contract: `/` IS the canonical reader homepage (the old
+// meta-refresh redirect to /blog is retired); /blog remains the archive.
+test.describe('Reader homepage', () => {
+	test('/ serves the reader without redirecting', async ({ page }) => {
 		await page.goto('/');
-		await expect(page).toHaveURL(/\/blog/);
+		await expect(page).toHaveURL(/\/$/);
+		await expect(page.locator('section.observatory-masthead')).toBeVisible();
 	});
 
-	test('/ has canonical pointing to /blog', async ({ page }) => {
+	test('/ has canonical pointing to the apex root', async ({ page }) => {
 		await page.goto('/');
 		const canonical = page.locator('link[rel="canonical"]');
-		await expect(canonical).toHaveAttribute('href', /\/blog/);
+		await expect(canonical).toHaveAttribute('href', 'https://transscendsurvival.org/');
+	});
+
+	test('/blog still serves the archive listing', async ({ page }) => {
+		await page.goto('/blog');
+		await expect(page).toHaveURL(/\/blog/);
+		await expect(page.getByRole('heading', { name: 'Blog' })).toBeVisible();
 	});
 });

e2e/visual-qa.spec.ts

@@ -44,10 +44,13 @@ test.describe('Homepage — visual QA across viewports', () => {
 
 			test('navigation is accessible', async ({ page }) => {
 				if (vp.width >= 768) {
-					// Desktop nav: visible inline links (md: breakpoint = 768px)
+					// Desktop nav: visible inline links (md: breakpoint = 768px).
+					// TIN-2903 nav reduction: the Blog link is retired (wordmark → /),
+					// so assert a surviving primary link and the Blog link's absence.
 					const desktopNav = page.locator('nav.hidden.md\\:flex');
 					await expect(desktopNav).toBeVisible();
-					await expect(desktopNav.getByRole('link', { name: 'Blog' })).toBeVisible();
+					await expect(desktopNav.getByRole('link', { name: 'Photography' })).toBeVisible();
+					await expect(desktopNav.getByRole('link', { name: 'Blog' })).toHaveCount(0);
 				} else {
 					// Mobile: hamburger button present
 					const hamburger = page.getByRole('button', { name: 'Open navigation' });

package.json

@@ -63,6 +63,7 @@
 		"vitest": "^4.1.4"
 	},
 	"dependencies": {
+		"@floating-ui/dom": "^1.8.0",
 		"@fontsource/crimson-pro": "^5.2.8",
 		"@fontsource/fira-code": "^5.2.7",
 		"@fontsource/inter": "^5.2.8",

src/app.d.ts

@@ -1,6 +1,10 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
+	// Public build SHA injected by Vite `define` (see vite.config.ts). Empty
+	// string when no real build sha is present.
+	const __BUILD_SHA__: string;
+
 	namespace App {
 		// interface Error {}
 		// interface Locals {}

src/lib/components/BlogCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Post } from '$lib/types';
+	import TierBadge from '$lib/components/TierBadge.svelte';
 
 	// dimensions.json is generated by scripts/optimize-images.mjs at prebuild.
 	// Use import.meta.glob so the build doesn't fail if the file is missing.
@@ -73,9 +74,12 @@
 	</article>
 {:else if post}
 	<article
+		data-tier={post.editorial_tier ?? undefined}
 		class="card glass p-0 overflow-hidden hover:ring-2 ring-primary-500 transition-all group {post.featured
 			? 'ring-1 ring-primary-300'
-			: ''}"
+			: post.editorial_tier === 'noteworthy'
+				? 'ring-1 ring-primary-400/50'
+				: ''}"
 	>
 		<a href="/blog/{post.slug}" class="block">
 			<!-- Feature image banner -->
@@ -137,6 +141,7 @@
 							>{post.category}</span
 						>
 					{/if}
+					<TierBadge tier={post.editorial_tier} />
 				</div>
 
 				<!-- Title -->

src/lib/components/TierBadge.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { PostEditorialTier } from '$lib/types';
+
+	// Reader-weight badge for the editorial taxonomy (docs/blog-editorial-taxonomy-2026-07-03.md).
+	// Tiers are IA/reader-weight ONLY — never an auth, privacy, or AP-delivery signal.
+	// Renders nothing when the tier is undefined ("not classified yet").
+	let { tier, class: klass = '' }: { tier?: PostEditorialTier | undefined; class?: string } = $props();
+
+	const TIER_LABELS: Record<PostEditorialTier, string> = {
+		noteworthy: 'Noteworthy',
+		'less-noteworthy': 'Less noteworthy',
+	};
+
+	// noteworthy gets a stronger accent tint; less-noteworthy stays muted/outlined.
+	const TIER_PRESETS: Record<PostEditorialTier, string> = {
+		noteworthy: 'preset-tonal-primary',
+		'less-noteworthy': 'preset-outlined-surface-500',
+	};
+</script>
+
+{#if tier}
+	<span
+		class="badge {TIER_PRESETS[tier]} text-xs font-medium {klass}"
+		data-tier={tier}
+		data-testid="tier-badge"
+		aria-label={`Editorial tier: ${TIER_LABELS[tier]}`}
+		title={`Editorial tier: ${TIER_LABELS[tier]}`}
+	>
+		{#if tier === 'noteworthy'}
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"
+				><path
+					d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+				/></svg
+			>
+		{/if}
+		{TIER_LABELS[tier]}
+	</span>
+{/if}

src/lib/components/TierBadge.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'svelte/server';
+import type { Post } from '$lib/types';
+import { POST_EDITORIAL_TIERS } from '$lib/types';
+import TierBadge from './TierBadge.svelte';
+import BlogCard from './BlogCard.svelte';
+
+describe('TierBadge', () => {
+	it('renders a labelled badge for the noteworthy tier', () => {
+		const { html } = render(TierBadge, { props: { tier: 'noteworthy' } });
+
+		expect(html).toContain('data-testid="tier-badge"');
+		expect(html).toContain('data-tier="noteworthy"');
+		expect(html).toContain('Noteworthy');
+		expect(html).toContain('aria-label="Editorial tier: Noteworthy"');
+	});
+
+	it('renders a labelled badge for the less-noteworthy tier', () => {
+		const { html } = render(TierBadge, { props: { tier: 'less-noteworthy' } });
+
+		expect(html).toContain('data-testid="tier-badge"');
+		expect(html).toContain('data-tier="less-noteworthy"');
+		expect(html).toContain('Less noteworthy');
+		expect(html).toContain('aria-label="Editorial tier: Less noteworthy"');
+	});
+
+	it('renders a badge with an aria-label for every declared tier', () => {
+		for (const tier of POST_EDITORIAL_TIERS) {
+			const { html } = render(TierBadge, { props: { tier } });
+			expect(html).toContain('aria-label="Editorial tier:');
+			expect(html).toContain(`data-tier="${tier}"`);
+		}
+	});
+
+	it('renders nothing when the tier is undefined', () => {
+		const { html } = render(TierBadge, { props: { tier: undefined } });
+
+		expect(html).not.toContain('tier-badge');
+		expect(html).not.toContain('aria-label');
+		expect(html.replace(/<!--[\s\S]*?-->/g, '').trim()).toBe('');
+	});
+});
+
+function makePost(overrides: Partial<Post> = {}): Post {
+	return {
+		title: 'A Test Post',
+		slug: 'a-test-post',
+		date: '2026-03-04',
+		description: 'A description for the card.',
+		tags: ['test'],
+		published: true,
+		...overrides,
+	};
+}
+
+describe('BlogCard editorial tier surface', () => {
+	it('shows the tier badge when the post carries a tier', () => {
+		const { html } = render(BlogCard, {
+			props: { post: makePost({ editorial_tier: 'noteworthy' }) },
+		});
+
+		expect(html).toContain('data-testid="tier-badge"');
+		expect(html).toContain('aria-label="Editorial tier: Noteworthy"');
+	});
+
+	it('omits the tier badge entirely when the post has no tier', () => {
+		const { html } = render(BlogCard, {
+			props: { post: makePost() },
+		});
+
+		expect(html).toContain('A Test Post');
+		expect(html).not.toContain('tier-badge');
+	});
+});

src/lib/components/pulse/PulseBirdCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PublicPulseItem } from '@blog/pulse-core/schema';
+	import TierBadge from '$lib/components/TierBadge.svelte';
 
 	let { item }: { item: PublicPulseItem } = $props();
 
@@ -14,8 +15,12 @@
 </script>
 
 <article class="card preset-outlined-success-500 p-4 space-y-2">
-	<header class="flex items-center justify-between text-sm text-surface-600-400">
-		<span aria-label="kind">🐦 bird sighting</span>
+	<header class="flex items-center justify-between gap-3 text-sm text-surface-600-400">
+		<span class="flex items-center gap-2">
+			<span aria-label="kind">🐦 bird sighting</span>
+			<!-- Reader-weight tier, display-only. Renders nothing when salience is absent. -->
+			<TierBadge tier={item.salience} />
+		</span>
 		<time datetime={item.occurredAt}>{formatted}</time>
 	</header>
 	{#if sighting}

src/lib/components/pulse/PulseCards.test.ts

@@ -78,6 +78,30 @@ describe('Pulse cards', () => {
 	});
 });
 
+describe('Pulse card editorial salience surface', () => {
+	it('shows a TierBadge on a note card only when salience is present', () => {
+		const withSalience = render(PulseNoteCard, {
+			props: { item: { ...noteItem, salience: 'noteworthy' } },
+		});
+		expect(withSalience.html).toContain('data-testid="tier-badge"');
+		expect(withSalience.html).toContain('aria-label="Editorial tier: Noteworthy"');
+
+		const withoutSalience = render(PulseNoteCard, { props: { item: noteItem } });
+		expect(withoutSalience.html).not.toContain('tier-badge');
+	});
+
+	it('shows a TierBadge on a bird card only when salience is present', () => {
+		const withSalience = render(PulseBirdCard, {
+			props: { item: { ...birdItem, salience: 'less-noteworthy' } },
+		});
+		expect(withSalience.html).toContain('data-testid="tier-badge"');
+		expect(withSalience.html).toContain('data-tier="less-noteworthy"');
+
+		const withoutSalience = render(PulseBirdCard, { props: { item: birdItem } });
+		expect(withoutSalience.html).not.toContain('tier-badge');
+	});
+});
+
 describe('Pulse lab policy result rendering', () => {
 	it('renders allowed projection decisions', () => {
 		const decision: PolicyDecision = { allowed: true, item: noteItem };