fix: use pendingAlignmentColor in API so shared-token links get same color

Previously assignColorsInOrder gave each connection a sequential color,
producing different colors when one word maps to multiple target words
(e.g. "спать" → "to" + "sleep"). Now uses the same pendingAlignmentColor
logic as the UI: if a token is already in a connected component, the new
connection inherits that component's color.

Also unifies the main-page footer with SiteFooter (adds API link, removes
duplicate inline footer markup).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dani-polani

bitext/src/lib/api/align.test.ts

@@ -98,6 +98,22 @@ describe('buildAlignUrl', () => {
 		expect(state.project.connections[0]!.lowerTokenId).toBe('l1-2'); // "monde"
 	});
 
+	it('shared token gets the same color on both connections (many-to-one grouping)', () => {
+		// "спать" → "to" and "спать" → "sleep": both connections must share a color
+		const result = buildAlignUrl(ORIGIN, {
+			lines: ['я хочу спать', 'I want to sleep'],
+			alignments: [
+				[0, 2, 1, 2],
+				[0, 2, 1, 3]
+			]
+		});
+		if (!('url' in result)) throw new Error('expected url');
+		const state = decodeState(new URL(result.url).searchParams.get('data'));
+		const conns = state.project.connections;
+		expect(conns).toHaveLength(2);
+		expect(conns[0]!.color).toBe(conns[1]!.color);
+	});
+
 	it('handles 3 lines with alignments between each adjacent pair', () => {
 		const result = buildAlignUrl(ORIGIN, {
 			lines: ['A B', 'C D', 'E F'],

bitext/src/lib/api/align.ts

@@ -1,7 +1,6 @@
 import { encodeState } from '$lib/serialization/encode.js';
 import { tokenize, tokenizeOptionsFromVisualSettings } from '$lib/domain/tokens.js';
-import { createConnectionId, type Connection } from '$lib/domain/alignment.js';
-import { assignColorsInOrder } from '$lib/domain/palettes.js';
+import { createConnectionId, pendingAlignmentColor, type Connection } from '$lib/domain/alignment.js';
 import {
 	defaultVisualSettingsV2,
 	SCHEMA_VERSION,
@@ -67,7 +66,6 @@ export function buildAlignUrl(origin: string, req: AlignRequest): AlignResult {
 	}));
 
 	const tokensByLine = lineObjects.map((line) => tokenize(line.rawText, line.id, tzOpts));
-	const colors = assignColorsInOrder(settings.palette, Math.max(alignments.length, 1));
 
 	const connections: Connection[] = [];
 	for (let idx = 0; idx < alignments.length; idx++) {
@@ -99,12 +97,10 @@ export function buildAlignUrl(origin: string, req: AlignRequest): AlignResult {
 				err: `alignments[${idx}]: word ${lowerWordIdx} out of range for line ${lowerIdx} ("${lines[lowerIdx]}" has ${lowerTokens.length} word(s))`
 			};
 
-		connections.push({
-			id: createConnectionId(),
-			upperTokenId: upperTokens[upperWordIdx]!.id,
-			lowerTokenId: lowerTokens[lowerWordIdx]!.id,
-			color: colors[idx % colors.length]
-		});
+		const upperTokenId = upperTokens[upperWordIdx]!.id;
+		const lowerTokenId = lowerTokens[lowerWordIdx]!.id;
+		const color = pendingAlignmentColor(connections, [upperTokenId], [lowerTokenId], settings.palette);
+		connections.push({ id: createConnectionId(), upperTokenId, lowerTokenId, color });
 	}
 
 	const state: AppStateV2 = {

bitext/src/routes/+page.svelte

@@ -34,6 +34,7 @@
 	import { settingsStore } from '$lib/state/settings.svelte.js';
 	import { editorExamples, type ExampleId } from '$lib/state/examples.js';
 	import { TALLY_FORM_ID } from '$lib/brand.js';
+	import SiteFooter from '$lib/components/layout/SiteFooter.svelte';
 	import { DEFAULT_DESCRIPTION, DEFAULT_TITLE, SITE_NAME } from '$lib/seo/metadata.js';
 	import type { PageProps } from './$types';
 	import type { Component } from 'svelte';
@@ -125,7 +126,6 @@
 
 	const authorSite = 'https://danipolani.github.io/en/';
 	const toolsPage = 'https://danipolani.github.io/en/blog/tools/';
-	const year = new Date().getFullYear();
 
 	/** How much to trim from the top and bottom of each example image (CSS length, e.g. %, px). */
 	const EXAMPLES_IMAGE_VERTICAL_CROP = '10%';
@@ -556,37 +556,5 @@
 	<LineEditModal />
 	<LineSettingsSheet />
 
-	<footer
-		class="mt-12 border-t border-gray-200 pt-8 text-center text-base leading-relaxed text-gray-600 dark:border-gray-700 dark:text-gray-400"
-	>
-		<p>
-			Created by
-			<a
-				href={authorSite}
-				class="font-medium text-primary-700 underline decoration-primary-700/40 underline-offset-2 hover:text-primary-800 hover:decoration-primary-800 dark:text-primary-400 dark:decoration-primary-400/50 dark:hover:text-primary-300"
-				target="_blank"
-				rel="noopener noreferrer">Dani</a
-			>. See other
-			<a
-				href={toolsPage}
-				class="font-medium text-primary-700 underline decoration-primary-700/40 underline-offset-2 hover:text-primary-800 hover:decoration-primary-800 dark:text-primary-400 dark:decoration-primary-400/50 dark:hover:text-primary-300"
-				target="_blank"
-				rel="noopener noreferrer">tools</a
-			> for linguistics and conlanging.
-		</p>
-		<p class="mt-2 text-gray-500 dark:text-gray-500">
-			© {year} Dani Polani ·
-			<a
-				href={resolve('/about')}
-				class="text-gray-600 underline decoration-gray-400/50 underline-offset-2 hover:text-gray-900 hover:decoration-gray-500/60 dark:text-gray-400 dark:decoration-gray-500/50 dark:hover:text-gray-200 dark:hover:decoration-gray-400/60"
-				>About</a
-			>
-			·
-			<a
-				href={resolve('/privacy')}
-				class="text-gray-600 underline decoration-gray-400/50 underline-offset-2 hover:text-gray-900 hover:decoration-gray-500/60 dark:text-gray-400 dark:decoration-gray-500/50 dark:hover:text-gray-200 dark:hover:decoration-gray-400/60"
-				>Privacy policy</a
-			>
-		</p>
-	</footer>
+	<SiteFooter />
 </main>