From e97fdc53c2d6fa8c9f53f51c18de81501846e8f7 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Fri, 5 Jun 2026 03:53:35 +0200
Subject: [PATCH] fix(demos): drop fake soma snippet from 26 eidos-only
 component demos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eidos-native components have NO soma layer, yet each demo rendered a
misleading "soma" code-snippet block ("n/a · eidos-native — equivalent
markup shown") fed by an orphan `somaSnippet` derived. Sweep the fix
already verified on text/heading across all 26:

  layout primitives  box flex grid stack container auto-grid wrap group
                     section aspect-ratio float
  typography/inline  code code-block kbd mark highlight link badge separator
  visual leaves      avatar banner skeleton spinner icon display scroll-frames

For each: remove the `somaSnippet` declaration + the soma `data-uix-code`
block, leaving only the real eidos snippet (and dropping its now-unneeded
inline margin-top).

Skipped (correctly): card / avatar-group / image (soma mentioned only in
prose, no fake code block — image reads a real ImageProvider) and all
genuinely soma-backed components.

Verified: `npm run check` 0 errors; 0 orphan somaSnippet refs in swept
files; browser spot-check (box, scroll-frames) shows one eidos code
block, zero soma badges.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../uix/components/aspect-ratio/+page.svelte  | 28 +------------
 .../uix/components/auto-grid/+page.svelte     | 27 +------------
 web/routes/uix/components/avatar/+page.svelte | 29 +-------------
 web/routes/uix/components/badge/+page.svelte  | 39 +-----------------
 web/routes/uix/components/banner/+page.svelte | 34 +---------------
 web/routes/uix/components/box/+page.svelte    | 27 +------------
 .../uix/components/code-block/+page.svelte    | 35 +---------------
 web/routes/uix/components/code/+page.svelte   | 27 +------------
 .../uix/components/container/+page.svelte     | 30 +-------------
 .../uix/components/display/+page.svelte       | 28 +------------
 web/routes/uix/components/flex/+page.svelte   | 28 +------------
 web/routes/uix/components/float/+page.svelte  | 29 +-------------
 web/routes/uix/components/grid/+page.svelte   | 28 +------------
 web/routes/uix/components/group/+page.svelte  | 29 +-------------
 .../uix/components/highlight/+page.svelte     | 25 +-----------
 web/routes/uix/components/icon/+page.svelte   | 29 +-------------
 web/routes/uix/components/kbd/+page.svelte    | 24 +----------
 web/routes/uix/components/link/+page.svelte   | 33 +--------------
 web/routes/uix/components/mark/+page.svelte   | 24 +----------
 .../uix/components/scroll-frames/+page.svelte | 16 +-------
 .../uix/components/section/+page.svelte       | 29 +-------------
 .../uix/components/separator/+page.svelte     | 29 +-------------
 .../uix/components/skeleton/+page.svelte      | 32 +--------------
 .../uix/components/spinner/+page.svelte       | 40 +------------------
 web/routes/uix/components/stack/+page.svelte  | 29 +-------------
 web/routes/uix/components/wrap/+page.svelte   | 29 +-------------
 26 files changed, 45 insertions(+), 712 deletions(-)

diff --git a/web/routes/uix/components/aspect-ratio/+page.svelte b/web/routes/uix/components/aspect-ratio/+page.svelte
index 31e60a747..bb13061ff 100644
--- a/web/routes/uix/components/aspect-ratio/+page.svelte
+++ b/web/routes/uix/components/aspect-ratio/+page.svelte
@@ -58,22 +58,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Snippets ─────────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- AspectRatio is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-aspect-ratio',
-			`  style="aspect-ratio: ${ratio}; overflow: hidden; max-inline-size: ${maxWidth}px;"`,
-			'>',
-			'  <img src="hero.jpg" alt="" />',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -218,17 +203,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · aspect-ratio is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · ratio maps to --aspect-ratio</span>
diff --git a/web/routes/uix/components/auto-grid/+page.svelte b/web/routes/uix/components/auto-grid/+page.svelte
index 73b8510a5..3e1f972fe 100644
--- a/web/routes/uix/components/auto-grid/+page.svelte
+++ b/web/routes/uix/components/auto-grid/+page.svelte
@@ -65,22 +65,6 @@
 			: `repeat(${columns}, minmax(0, 1fr))`
 	);
 
-	const somaSnippet = $derived(
-		[
-			'<!-- AutoGrid is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-grid',
-			'  data-auto-grid',
-			`  style="display: grid; grid-template-columns: ${computedTemplate}; gap: var(--space-${gap});"`,
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -233,17 +217,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · auto-grid is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · minChildWidth / columns computes templateColumns</span>
diff --git a/web/routes/uix/components/avatar/+page.svelte b/web/routes/uix/components/avatar/+page.svelte
index a2c6e7ee6..7e2e39b6a 100644
--- a/web/routes/uix/components/avatar/+page.svelte
+++ b/web/routes/uix/components/avatar/+page.svelte
@@ -73,23 +73,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Avatar is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<span',
-			'  data-avatar',
-			'  data-image-loaded={loaded}',
-			'  data-image-error={error}',
-			'>',
-			'  <img src="…" alt="…" />',
-			'  <span>JD</span>',
-			'</span>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -432,17 +416,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · avatar is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · all props + Badge sub-part</span>
diff --git a/web/routes/uix/components/badge/+page.svelte b/web/routes/uix/components/badge/+page.svelte
index b9738488d..621fb518c 100644
--- a/web/routes/uix/components/badge/+page.svelte
+++ b/web/routes/uix/components/badge/+page.svelte
@@ -72,33 +72,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Badge is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<span',
-			'  data-badge',
-			variant !== 'soft' && `  data-variant="${variant}"`,
-			size !== 'md' && `  data-size="${size}"`,
-			color !== 'primary' && `  data-color="${color}"`,
-			rounded !== 'full' && `  data-rounded="${rounded}"`,
-			withDot && '  data-dot',
-			removable && '  data-removable',
-			'>',
-			withDot && '  <span data-badge-dot aria-hidden="true"></span>',
-			withIcon &&
-				'  <span data-badge-icon aria-hidden="true"><svg>…</svg></span>',
-			`  <span data-badge-label>${labelText || ''}</span>`,
-			removable &&
-				'  <button type="button" data-badge-remove aria-label="Remove">×</button>',
-			'</span>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -318,17 +292,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · badge is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · slots compose inline</span>
diff --git a/web/routes/uix/components/banner/+page.svelte b/web/routes/uix/components/banner/+page.svelte
index 8dd3812e0..04f176508 100644
--- a/web/routes/uix/components/banner/+page.svelte
+++ b/web/routes/uix/components/banner/+page.svelte
@@ -72,28 +72,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Snippets ─────────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Banner is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<header',
-			'  data-banner',
-			'  role="banner"',
-			`  data-intent="${intent}"`,
-			`  data-variant="${variant}"`,
-			`  data-size="${size}"`,
-			'>',
-			withIcon && '  <svg aria-hidden="true">…</svg>',
-			`  <span>${message}</span>`,
-			withClose && '  <button data-banner-close aria-label="Dismiss">×</button>',
-			'</header>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -287,17 +266,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · banner is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · intent / variant / size + composition close</span>
diff --git a/web/routes/uix/components/box/+page.svelte b/web/routes/uix/components/box/+page.svelte
index c69a376a5..995a84ed4 100644
--- a/web/routes/uix/components/box/+page.svelte
+++ b/web/routes/uix/components/box/+page.svelte
@@ -63,21 +63,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Box is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  style="display: var(--box-display); padding: var(--box-padding); gap: var(--box-gap);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -226,17 +212,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · box is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · every prop maps to a --box-* CSS variable</span>
diff --git a/web/routes/uix/components/code-block/+page.svelte b/web/routes/uix/components/code-block/+page.svelte
index a4d41ca1f..3857e4142 100644
--- a/web/routes/uix/components/code-block/+page.svelte
+++ b/web/routes/uix/components/code-block/+page.svelte
@@ -53,31 +53,6 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- CodeBlock is eidos-native — no soma layer. -->',
-			'<!-- Equivalent markup: -->',
-			'',
-			'<div',
-			'  data-code-block',
-			`  data-variant="${variant}"`,
-			'>',
-			'  <div data-code-block-header>',
-			title && `    <span data-code-block-title>${title}</span>`,
-			language && `    <span data-code-block-lang>${language}</span>`,
-			showCopy && '    <button data-code-block-copy>Copy</button>',
-			'  </div>',
-			'  <pre data-code-block-pre>',
-			'    <code data-code-block-code>',
-			'      …',
-			'    </code>',
-			'  </pre>',
-			'</div>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -237,16 +212,8 @@
 				</label>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · code-block is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · variant + header composition</span>
diff --git a/web/routes/uix/components/code/+page.svelte b/web/routes/uix/components/code/+page.svelte
index 7972c642a..3bd061c85 100644
--- a/web/routes/uix/components/code/+page.svelte
+++ b/web/routes/uix/components/code/+page.svelte
@@ -52,23 +52,6 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Code is eidos-native — no soma layer. -->',
-			'<!-- Equivalent markup: -->',
-			'',
-			'<code',
-			'  data-code',
-			`  data-variant="${variant}"`,
-			language && `  data-language="${language}"`,
-			'>',
-			`  ${content}`,
-			'</code>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -234,16 +217,8 @@
 				</label>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · code is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · variant + axis overrides</span>
diff --git a/web/routes/uix/components/container/+page.svelte b/web/routes/uix/components/container/+page.svelte
index 6ab9c426f..cf4feb656 100644
--- a/web/routes/uix/components/container/+page.svelte
+++ b/web/routes/uix/components/container/+page.svelte
@@ -60,24 +60,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Container is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-container',
-			`  data-size="${size}"`,
-			`  data-align="${align}"`,
-			'  style="inline-size: 100%; max-inline-size: var(--container-width-' + size + '); margin-inline: auto; padding-inline: var(--container-padding-inline);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -232,17 +215,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · container is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · size token + auto inline margins</span>
diff --git a/web/routes/uix/components/display/+page.svelte b/web/routes/uix/components/display/+page.svelte
index bae75bcda..e307c405d 100644
--- a/web/routes/uix/components/display/+page.svelte
+++ b/web/routes/uix/components/display/+page.svelte
@@ -66,23 +66,7 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Display is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup: -->',
-			'',
-			`<${asTag}`,
-			'  data-display',
-			tracking && `  data-tracking="${tracking}"`,
-			'  style="font-family: var(--style-hero-font-family); …"',
-			'>',
-			`  ${content}`,
-			`</${asTag}>`
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -337,16 +321,8 @@
 				</label>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · display is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · hero style + per-axis overrides</span>
diff --git a/web/routes/uix/components/flex/+page.svelte b/web/routes/uix/components/flex/+page.svelte
index 34907d616..d26a381e5 100644
--- a/web/routes/uix/components/flex/+page.svelte
+++ b/web/routes/uix/components/flex/+page.svelte
@@ -63,22 +63,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Flex is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-flex',
-			'  style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -231,17 +216,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · flex is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · container props mapped to --flex-* CSS variables</span>
diff --git a/web/routes/uix/components/float/+page.svelte b/web/routes/uix/components/float/+page.svelte
index cadca153b..2e3566ae1 100644
--- a/web/routes/uix/components/float/+page.svelte
+++ b/web/routes/uix/components/float/+page.svelte
@@ -53,23 +53,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Snippets ─────────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Float is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-float',
-			`  data-side="${side}"`,
-			`  style="float: inline-${side}; margin-inline-${side === 'start' ? 'end' : 'start'}: var(--space-${gap}); max-inline-size: ${childWidth}px;"`,
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -245,17 +229,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · float is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · side / gap + inherited Box props</span>
diff --git a/web/routes/uix/components/grid/+page.svelte b/web/routes/uix/components/grid/+page.svelte
index 0ca2bb544..379355ef4 100644
--- a/web/routes/uix/components/grid/+page.svelte
+++ b/web/routes/uix/components/grid/+page.svelte
@@ -70,22 +70,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Grid is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-grid',
-			'  style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -275,17 +260,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · grid is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · container props mapped to --grid-* CSS variables</span>
diff --git a/web/routes/uix/components/group/+page.svelte b/web/routes/uix/components/group/+page.svelte
index 0dccecd0b..5f94a87a7 100644
--- a/web/routes/uix/components/group/+page.svelte
+++ b/web/routes/uix/components/group/+page.svelte
@@ -72,23 +72,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Group is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-flex',
-			'  data-group',
-			'  style="display: flex; flex-direction: row; gap: var(--space-2);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -270,17 +254,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · group is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · cluster props on top of Flex</span>
diff --git a/web/routes/uix/components/highlight/+page.svelte b/web/routes/uix/components/highlight/+page.svelte
index 365996417..7a2f53c2d 100644
--- a/web/routes/uix/components/highlight/+page.svelte
+++ b/web/routes/uix/components/highlight/+page.svelte
@@ -62,21 +62,6 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Highlight is eidos-native — no soma layer. -->',
-			'<!-- Equivalent markup (per match): -->',
-			'',
-			'<span data-highlight',
-			`  data-color="${color}"`,
-			'>',
-			'  …text…',
-			`  <mark data-mark data-color="${color}">match</mark>`,
-			'  …more text…',
-			'</span>'
-		].join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -209,16 +194,8 @@
 				</label>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · highlight is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · text + query + intent</span>
diff --git a/web/routes/uix/components/icon/+page.svelte b/web/routes/uix/components/icon/+page.svelte
index f632124fd..f9c01ab5a 100644
--- a/web/routes/uix/components/icon/+page.svelte
+++ b/web/routes/uix/components/icon/+page.svelte
@@ -162,23 +162,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Icon is an eidos-only primitive — no soma layer. -->',
-			"<!-- The morfo declares scope:['eidos'] for the contract only. -->",
-			'',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'<svg',
-			'  role="img"',
-			'  aria-hidden={decorative}',
-			'>',
-			'  <title>{title}</title>',
-			'  <path d="…" />',
-			'</svg>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -390,17 +374,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · icon is eidos-only — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · size, strokeWidth, color</span>
diff --git a/web/routes/uix/components/kbd/+page.svelte b/web/routes/uix/components/kbd/+page.svelte
index 74c400d74..dde66210a 100644
--- a/web/routes/uix/components/kbd/+page.svelte
+++ b/web/routes/uix/components/kbd/+page.svelte
@@ -44,20 +44,6 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Kbd is eidos-native — no soma layer. -->',
-			'<!-- Equivalent markup: -->',
-			'',
-			'<kbd',
-			'  data-kbd',
-			`  data-variant="${variant}"`,
-			'>',
-			`  ${content}`,
-			'</kbd>'
-		].join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -231,16 +217,8 @@
 				</div>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · kbd is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · variant + size</span>
diff --git a/web/routes/uix/components/link/+page.svelte b/web/routes/uix/components/link/+page.svelte
index 36b570f9f..59cee019a 100644
--- a/web/routes/uix/components/link/+page.svelte
+++ b/web/routes/uix/components/link/+page.svelte
@@ -66,28 +66,7 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Link is eidos-native — no soma layer. -->',
-			'<!-- Equivalent markup: -->',
-			'',
-			disabled ? '<span' : '<a',
-			!disabled && `  href="${href}"`,
-			'  data-link',
-			`  data-variant="${variant}"`,
-			`  data-underline="${underline}"`,
-			`  data-color="${color}"`,
-			external && !disabled && '  target="_blank"',
-			external && !disabled && '  rel="noopener noreferrer"',
-			disabled && '  aria-disabled="true"',
-			'>',
-			'  ' + content,
-			disabled ? '</span>' : '</a>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -278,16 +257,8 @@
 				</label>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · link is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · variant + color + external</span>
diff --git a/web/routes/uix/components/mark/+page.svelte b/web/routes/uix/components/mark/+page.svelte
index 69f5496a6..bd11f4734 100644
--- a/web/routes/uix/components/mark/+page.svelte
+++ b/web/routes/uix/components/mark/+page.svelte
@@ -51,20 +51,6 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Mark is eidos-native — no soma layer. -->',
-			'<!-- Equivalent markup: -->',
-			'',
-			'<mark',
-			'  data-mark',
-			`  data-color="${color}"`,
-			'>',
-			`  ${content}`,
-			'</mark>'
-		].join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -212,16 +198,8 @@
 				</p>
 			</div>
 
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · mark is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · intent tint</span>
diff --git a/web/routes/uix/components/scroll-frames/+page.svelte b/web/routes/uix/components/scroll-frames/+page.svelte
index f433ce779..0472773b6 100644
--- a/web/routes/uix/components/scroll-frames/+page.svelte
+++ b/web/routes/uix/components/scroll-frames/+page.svelte
@@ -96,12 +96,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Snippets ──────────────────────────────────────────────────────────
-	const somaSnippet = [
-		'<!-- ScrollFrames is an eidos-only primitive — no soma layer. -->',
-		"<!-- The morfo declares scope:['eidos'] + 0 events (purely scroll-driven). -->"
-	].join('\n');
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -273,14 +268,7 @@
 				</label>
 			</div>
 
-			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>headless · none — eidos-only primitive</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
diff --git a/web/routes/uix/components/section/+page.svelte b/web/routes/uix/components/section/+page.svelte
index 550c61634..15564464d 100644
--- a/web/routes/uix/components/section/+page.svelte
+++ b/web/routes/uix/components/section/+page.svelte
@@ -52,23 +52,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Section is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-section',
-			`  data-size="${size}"`,
-			`  style="inline-size: 100%; padding-block: var(--section-padding-block-${size});"`,
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -211,17 +195,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · section is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · size-keyed block padding on top of Box</span>
diff --git a/web/routes/uix/components/separator/+page.svelte b/web/routes/uix/components/separator/+page.svelte
index 0582ad383..119057441 100644
--- a/web/routes/uix/components/separator/+page.svelte
+++ b/web/routes/uix/components/separator/+page.svelte
@@ -67,23 +67,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Snippets ─────────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Separator is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-separator',
-			`  data-orientation="${orientation}"`,
-			decorative ? '  aria-hidden="true"' : '  role="separator"',
-			decorative ? '' : `  aria-orientation="${orientation}"`,
-			'></div>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -283,17 +267,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · separator is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · orientation drives geometry; decorative drops the role</span>
diff --git a/web/routes/uix/components/skeleton/+page.svelte b/web/routes/uix/components/skeleton/+page.svelte
index 53a766131..fac95dfee 100644
--- a/web/routes/uix/components/skeleton/+page.svelte
+++ b/web/routes/uix/components/skeleton/+page.svelte
@@ -68,27 +68,6 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Skeleton is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-skeleton',
-			shape !== 'rect' && `  data-shape="${shape}"`,
-			size !== 'md' && `  data-size="${size}"`,
-			color !== 'neutral' && `  data-color="${color}"`,
-			animated && '  data-animated=""',
-			'  role="status"',
-			'  aria-busy="true"',
-			'  aria-label="Loading"',
-			shape === 'rect' && `  style="inline-size: ${width}; block-size: ${height};"`,
-			'></div>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -252,17 +231,8 @@
 				{/if}
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · skeleton is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · shape + size drive recipe geometry</span>
diff --git a/web/routes/uix/components/spinner/+page.svelte b/web/routes/uix/components/spinner/+page.svelte
index c3400c0bc..b85e44d8b 100644
--- a/web/routes/uix/components/spinner/+page.svelte
+++ b/web/routes/uix/components/spinner/+page.svelte
@@ -66,34 +66,7 @@
 		return () => obs.disconnect();
 	});
 
-	const somaSnippet = $derived(
-		[
-			'<!-- Spinner is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-spinner',
-			variant !== 'ring' && `  data-variant="${variant}"`,
-			size !== 'md' && `  data-size="${size}"`,
-			color !== 'primary' && `  data-color="${color}"`,
-			'  role="status"',
-			'  aria-live="polite"',
-			'  aria-label="Loading"',
-			'>',
-			variant === 'ring' && '  <span data-spinner-track aria-hidden="true"></span>',
-			variant === 'dots' &&
-				'  <span data-spinner-track aria-hidden="true">' +
-					'<span data-spinner-dot></span><span data-spinner-dot></span><span data-spinner-dot></span></span>',
-			variant === 'bars' &&
-				'  <span data-spinner-track aria-hidden="true">' +
-					'<span data-spinner-bar></span><span data-spinner-bar></span><span data-spinner-bar></span><span data-spinner-bar></span></span>',
-			withLabel && '  <span data-spinner-label>Loading…</span>',
-			'</div>'
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -238,17 +211,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · spinner is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · variant swaps Track DOM</span>
diff --git a/web/routes/uix/components/stack/+page.svelte b/web/routes/uix/components/stack/+page.svelte
index 7e4f993e3..d92dbfda5 100644
--- a/web/routes/uix/components/stack/+page.svelte
+++ b/web/routes/uix/components/stack/+page.svelte
@@ -68,23 +68,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Stack is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-flex',
-			'  data-stack',
-			'  style="display: flex; flex-direction: column; gap: var(--space-3);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -249,17 +233,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · stack is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · 4 ergonomic props on top of Flex</span>
diff --git a/web/routes/uix/components/wrap/+page.svelte b/web/routes/uix/components/wrap/+page.svelte
index c01c4580b..eb777b33a 100644
--- a/web/routes/uix/components/wrap/+page.svelte
+++ b/web/routes/uix/components/wrap/+page.svelte
@@ -90,23 +90,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Wrap is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<div',
-			'  data-box',
-			'  data-flex',
-			'  data-wrap',
-			'  style="display: flex; flex-wrap: wrap; gap: var(--space-2);"',
-			'>',
-			'  …',
-			'</div>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -286,17 +270,8 @@
 				</label>
 			</div>
 
-			<!-- ── Code snippets per layer ─────────────────────────────────── -->
+			<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · wrap is eidos-native — equivalent markup shown</span>
-					<span data-uix-code-lang>svelte</span>
-				</div>
-				<pre><code>{somaSnippet}</code></pre>
-			</div>
-
-			<div data-uix-code style="margin-top: var(--uix-space-3);">
 				<div data-uix-code-head>
 					<span data-uix-layer-badge="eidos">eidos</span>
 					<span>visual · always wraps · per-axis gap shorthands</span>