View transitions

docs/src/app.css

@@ -172,3 +172,11 @@ code[data-line-numbers] > [data-line]::before {
 .ToggleGroup {
 	user-select: none;
 }
+
+/* Disable view transitions for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-old(root),
+	::view-transition-new(root) {
+		animation: none;
+	}
+}

docs/src/lib/components/Code.svelte

@@ -1,10 +1,14 @@
 <script module>
-	import { createHighlighter } from 'shiki';
+	import { createHighlighter, type Highlighter } from 'shiki';
 	import { transformerMetaHighlight } from '@shikijs/transformers';
 
-	const highlighter = createHighlighter({
+	let highlighter = $state<Highlighter | null>(null);
+
+	createHighlighter({
 		themes: ['github-light-default', 'github-dark-default'],
 		langs: ['svelte', 'javascript', 'ts', 'typescript', 'json', 'sh']
+	}).then((h) => {
+		highlighter = h;
 	});
 </script>
 
@@ -81,24 +85,24 @@
 		{#if source}
 			<pre class={cls('whitespace-normal overflow-auto', classes.pre)}>
 				<code class={cls('text-sm', classes.code)}>
-					{#await highlighter}
-						<div>Loading...</div>
-					{:then h}
+					{#if highlighter}
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-						{@html h.codeToHtml(sourceStr, {
-							lang: language,
-							themes: {
-								light: 'github-light-default',
-								dark: 'github-dark-default'
-							},
-							meta: highlight ? { __raw: `{${highlight}}` } : undefined,
-							transformers: highlight ? [transformerMetaHighlight()] : undefined
-						})}
-					{:catch error}
-						<div class="text-red-500">Error loading code highlighting: {error.message}</div>
-					{/await}
-
-      </code>
+						{@html highlighter.codeToHtml(
+							sourceStr,
+							{
+								lang: language,
+								themes: {
+									light: 'github-light-default',
+									dark: 'github-dark-default'
+								},
+								meta: highlight ? { __raw: `{${highlight}}` } : undefined,
+								transformers: highlight ? [transformerMetaHighlight()] : undefined
+							}
+						)}
+					{:else}
+						<div>Loading...</div>
+					{/if}
+				</code>
     </pre>
 
 			{#if copyButton !== false}

docs/src/lib/components/Example.svelte

@@ -98,6 +98,15 @@
 	let ref = $state<SvelteComponent | null>(null);
 	let data = $derived(ref?.data);
 
+	// Ensure component name is always resolved consistently
+	const resolvedComponent = $derived(component ?? page.params.name ?? '');
+	// Only set view-transition-name on detail pages (when page.params.example matches)
+	// This prevents conflicts with ExampleScreenshot on listing pages
+	const isDetailPage = $derived(page.params.example === name);
+	const viewTransitionName = $derived(
+		isDetailPage && resolvedComponent && name ? `lc-${resolvedComponent}-${name}` : undefined
+	);
+
 	let canResize = $derived.by(() => {
 		// Prop
 		if (typeof noResize === 'boolean') {
@@ -134,6 +143,7 @@
 				)}
 				bind:this={containerEl}
 				style:width={containerWidth ? `${containerWidth}px` : undefined}
+				style:view-transition-name={viewTransitionName}
 			>
 				<example.component bind:this={ref} />
 

docs/src/lib/components/ExampleScreenshot.svelte

@@ -16,10 +16,15 @@
 	} = $props();
 
 	const basePath = $derived(`/screenshots/${component}/${example}`);
+	const viewTransitionName = $derived(`lc-${component}-${example}`);
 
 	const sizes = [
 		{ width: '240w', light: '@sm:hidden dark:hidden', dark: 'dark:block dark:@sm:hidden' },
-		{ width: '400w', light: '@sm:block @lg:hidden dark:hidden', dark: 'dark:@sm:block dark:@lg:hidden' },
+		{
+			width: '400w',
+			light: '@sm:block @lg:hidden dark:hidden',
+			dark: 'dark:@sm:block dark:@lg:hidden'
+		},
 		{ width: '800w', light: '@lg:block dark:hidden', dark: 'dark:@lg:block' }
 	];
 </script>
@@ -33,6 +38,7 @@
 		aspect === 'screenshot' && 'aspect-8/3', // roughly 800x300 for many cartesian
 		background && 'bg-surface-100 dark:bg-surface-200'
 	)}
+	style:view-transition-name={viewTransitionName}
 >
 	{#each ['light', 'dark'] as mode}
 		{#each sizes as size}

docs/src/lib/markdown/config/pretty-code.js

@@ -6,8 +6,8 @@ import { shikiDiffTransformer } from '../transformers/shiki-diff.js';
  */
 export const prettyCodeOptions = {
 	theme: {
-		light: 'github-light',
-		dark: 'github-dark'
+		light: 'github-light-default',
+		dark: 'github-dark-default'
 	},
 	keepBackground: false,
 	defaultLang: {

docs/src/lib/page-transitions.ts

@@ -0,0 +1,16 @@
+import { onNavigate } from '$app/navigation';
+
+export const preparePageTransition = () => {
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) {
+			return;
+		}
+
+		return new Promise<void>((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
+};

docs/src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 
 	import { dev } from '$app/environment';
 	import { page } from '$app/state';
+	import { preparePageTransition } from '$lib/page-transitions';
 
 	import '@fontsource-variable/inter';
 	import '../app.css';
@@ -51,6 +52,9 @@
 			};
 		}
 	});
+
+	// View transition for navigation
+	preparePageTransition();
 </script>
 
 {@render children()}

packages/layerchart/src/lib/docs/Code.svelte

@@ -1,9 +1,13 @@
 <script module>
-  import { createHighlighter } from 'shiki';
+  import { createHighlighter, type Highlighter } from 'shiki';
 
-  const highlighter = createHighlighter({
+  let highlighter = $state<Highlighter | null>(null);
+
+  createHighlighter({
     themes: ['github-light-default', 'github-dark-default'],
     langs: ['svelte', 'javascript', 'ts', 'typescript', 'json', 'sh'],
+  }).then((h) => {
+    highlighter = h;
   });
 </script>
 
@@ -37,20 +41,17 @@
   {#if source}
     <pre class={cls('whitespace-normal overflow-auto', classes.pre)}>
       <code class={cls('text-xs', classes.code)}>
-        {#await highlighter}
-          <div>Loading...</div>
-        {:then h}
-          {@html h.codeToHtml(source, {
+        {#if highlighter}
+          {@html highlighter.codeToHtml(source, {
             lang: language,
             themes: {
               light: 'github-light-default',
               dark: 'github-dark-default',
             },
           })}
-        {:catch error}
-          <div class="text-red-500">Error loading code highlighting: {error.message}</div>
-        {/await}
-
+        {:else}
+          <div>Loading...</div>
+        {/if}
       </code>
     </pre>