feat: better examples

Author: dani-polani

TODO.md

@@ -3,7 +3,7 @@
 - [ ] Check SEO
 - [x] Highlighting tokens when selecting (hovering) and when selected (with current color, which will be the link color)
 - [x] Make sure instructions are clear and concise, up to date, and complete. 
-- [ ] Add better examples - with complex links and advanced tokenization.
+- [x] Add better examples - with complex links and advanced tokenization.
 - [x] Improve export card comment
 - [x] Twitter doesn't show visual preview
 - [x] Dependency CVE check (`npm audit` / CI)

bitext/src/lib/components/editor/Editor.svelte

@@ -14,13 +14,22 @@
 		>
 			Editor
 		</h2>
-		<button
-			type="button"
-			class="shrink-0 rounded-none border-0 bg-transparent px-2 py-1 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-gray-400 dark:hover:bg-gray-800/80 dark:hover:text-gray-100 dark:focus-visible:outline-primary-500"
-			onclick={() => projectStore.loadExample()}
-		>
-			Load example
-		</button>
+		<div class="flex flex-wrap items-center gap-1">
+			<button
+				type="button"
+				class="shrink-0 rounded-none border-0 bg-transparent px-2 py-1 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-gray-400 dark:hover:bg-gray-800/80 dark:hover:text-gray-100 dark:focus-visible:outline-primary-500"
+				onclick={() => projectStore.loadExample('simple')}
+			>
+				Simple example
+			</button>
+			<button
+				type="button"
+				class="shrink-0 rounded-none border-0 bg-transparent px-2 py-1 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-gray-400 dark:hover:bg-gray-800/80 dark:hover:text-gray-100 dark:focus-visible:outline-primary-500"
+				onclick={() => projectStore.loadExample('complex')}
+			>
+				Complex example
+			</button>
+		</div>
 	</div>
 	<p class="mb-4 w-full text-base text-gray-600 dark:text-gray-400">
 		Edit the sentences here. To link words, click a word in the preview below, then click the

bitext/src/lib/state/project.svelte.ts

@@ -128,19 +128,48 @@ class ProjectStore {
 		};
 	}
 
-	/** Demo alignment for first-time users */
-	loadExample() {
+	/**
+	 * Demo alignments for first-time users.
+	 *
+	 * - `simple`: English↔French with one many-to-many pair (English `world` ↔ French `le monde`)
+	 *   so newcomers immediately see that a single source word can connect to multiple target words.
+	 * - `complex`: Turkish↔English showcasing agglutination and the token-splitter feature. One Turkish
+	 *   "word" (`Ev.im.de.yim` — "I am at my house") is split on `.` into 4 morphemes, and the copula
+	 *   `yim` links to both English `I` and `am` (1-to-many). Forces `.` into the split chars if the
+	 *   user has removed it, otherwise the example degenerates into a single unsplit token.
+	 */
+	loadExample(kind: 'simple' | 'complex' = 'simple') {
+		const palette = settingsStore.settings.palette;
+
+		if (kind === 'simple') {
+			this.loadSnapshot({
+				sourceText: 'Hello world',
+				targetText: 'Bonjour le monde',
+				sourceGlosses: [],
+				targetGlosses: [],
+				links: []
+			});
+			this.addAlignment(['s-0'], ['t-0'], palette);
+			this.addAlignment(['s-1'], ['t-1', 't-2'], palette);
+			return;
+		}
+
+		if (!settingsStore.settings.tokenSplitChars.includes('.')) {
+			settingsStore.patch({
+				tokenSplitChars: settingsStore.settings.tokenSplitChars + '.'
+			});
+		}
 		this.loadSnapshot({
-			sourceText: 'The cat sleeps',
-			targetText: 'Le chat dort',
+			sourceText: 'Ev.im.de.yim',
+			targetText: 'I am at my house',
 			sourceGlosses: [],
 			targetGlosses: [],
 			links: []
 		});
-		const p = settingsStore.settings.palette;
-		this.addAlignment(['s-0'], ['t-0'], p);
-		this.addAlignment(['s-1'], ['t-1'], p);
-		this.addAlignment(['s-2'], ['t-2'], p);
+		this.addAlignment(['s-0'], ['t-4'], palette);
+		this.addAlignment(['s-1'], ['t-3'], palette);
+		this.addAlignment(['s-2'], ['t-2'], palette);
+		this.addAlignment(['s-3'], ['t-0', 't-1'], palette);
 	}
 
 	loadSnapshot(s: ProjectSnapshotV1) {