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

Text and Heading are eidos-native (no soma layer), but their demos:
  1. wrapped the live preview in a content-sized box (no inline-size),
     so `align` had no room to render inside the centered stage area;
  2. rendered a "soma" code-snippet block ("n/a · eidos-native") with
     non-real equivalent markup, muddying the layer story.

Fix both: the live wrapper now `inline-size: 100%` (fills up to its
max-inline-size cap, 36/38rem) so alignment is visible; and the soma
code block + its now-orphan `somaSnippet` derived are removed, leaving
only the real eidos snippet.

Verified in browser: text box 576px / heading box 608px (filling the
918px stage); align=end renders; one eidos code block, zero soma badges.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../uix/components/heading/+page.svelte       | 29 ++----------------
 web/routes/uix/components/text/+page.svelte   | 30 ++-----------------
 2 files changed, 5 insertions(+), 54 deletions(-)

diff --git a/web/routes/uix/components/heading/+page.svelte b/web/routes/uix/components/heading/+page.svelte
index 989f2ea76..e8871350e 100644
--- a/web/routes/uix/components/heading/+page.svelte
+++ b/web/routes/uix/components/heading/+page.svelte
@@ -69,23 +69,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Heading is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup: -->',
-			'',
-			`<h${level}`,
-			'  data-heading',
-			`  data-style="${headingStyle || `h${level}`}"`,
-			headingStyle && headingStyle !== `h${level}` && '  <!-- semantic and visual decoupled -->',
-			'>',
-			`  ${content}`,
-			`</h${level}>`
-		]
-			.filter(Boolean)
-			.join('\n')
-	);
+	// ── Code snippet ──────────────────────────────────────────────────────
 
 	const eidosSnippet = $derived(
 		[
@@ -147,7 +131,7 @@
 	<div data-uix-stage>
 		<div data-uix-stage-area bind:this={stageRef}>
 			<div
-				style="max-inline-size: 38rem; padding: var(--space-3); border: 1px dashed var(--color-neutral-border); border-radius: var(--radius-md);"
+				style="inline-size: 100%; max-inline-size: 38rem; padding: var(--space-3); border: 1px dashed var(--color-neutral-border); border-radius: var(--radius-md);"
 			>
 				<Heading
 					{level}
@@ -366,15 +350,6 @@
 			</div>
 
 			<div data-uix-code>
-				<div data-uix-code-head>
-					<span data-uix-layer-badge="soma">soma</span>
-					<span>n/a · heading 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 · level + style + per-axis overrides</span>
diff --git a/web/routes/uix/components/text/+page.svelte b/web/routes/uix/components/text/+page.svelte
index ba7984556..bb7d54f36 100644
--- a/web/routes/uix/components/text/+page.svelte
+++ b/web/routes/uix/components/text/+page.svelte
@@ -68,22 +68,7 @@
 		return () => obs.disconnect();
 	});
 
-	// ── Code snippets ─────────────────────────────────────────────────────
-	const somaSnippet = $derived(
-		[
-			'<!-- Text is eidos-native — no soma layer. -->',
-			'<!-- Equivalent semantic markup (not real soma): -->',
-			'',
-			'<span',
-			'  data-text',
-			`  data-style="${textStyle}"`,
-			'  style="font-family: var(--style-' + textStyle + '-font-family); …"',
-			'>',
-			'  …',
-			'</span>'
-		].join('\n')
-	);
-
+	// ── Code snippet ──────────────────────────────────────────────────────
 	const eidosSnippet = $derived(
 		[
 			"<script lang='ts'>",
@@ -144,7 +129,7 @@
 	<!-- Live preview always rendered -->
 	<div data-uix-stage>
 		<div data-uix-stage-area bind:this={stageRef}>
-			<div style="max-inline-size: 36rem; padding: var(--space-3); border: 1px dashed var(--color-border-default); border-radius: var(--radius-md);">
+			<div style="inline-size: 100%; max-inline-size: 36rem; padding: var(--space-3); border: 1px dashed var(--color-border-default); border-radius: var(--radius-md);">
 				<Text
 					style={textStyle}
 					size={size || undefined}
@@ -285,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 · text 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 · style + per-axis overrides</span>