From 14fa65c0e463a151b32d275ca32482e22ffe0016 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 11 Jul 2026 18:25:30 +0200
Subject: [PATCH] fix(demos): CountUp visible + grouped with Text effects;
 themed stage for all text demos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CountUp WAS shipped (as a service component, filed under Utilities) but the
  user looked for it among the text animations and the number rendered
  invisibly. Two fixes:
  - Group it under a "Text effects" nav group with the other five (all 6 of
    the seed text/ collection together), and match the page eyebrow. It stays
    a FormatNumber sibling in the design doc; the nav groups for discovery.
  - The bare number inherited the eidos text color while the demo stage used
    the docs-chrome (light) surface → invisible. Give every text/service demo
    stage an eidos surface + text color (both from the same theme → contrast
    in any mode), the same fix as the ambient stage.
- Verified in real Chrome: CountUp counts 0→1.234.567,89 (es-ES separators)
  and is clearly visible; the "Text effects" sidebar group lists all six.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/routes/uix/+layout@.svelte                       | 4 ++--
 web/routes/uix/components/count-up/+page.svelte      | 4 ++--
 web/routes/uix/components/text-blur/+page.svelte     | 2 +-
 web/routes/uix/components/text-circular/+page.svelte | 2 +-
 web/routes/uix/components/text-focus/+page.svelte    | 2 +-
 web/routes/uix/components/text-gradient/+page.svelte | 2 +-
 web/routes/uix/components/text-scramble/+page.svelte | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/routes/uix/+layout@.svelte b/web/routes/uix/+layout@.svelte
index f9e349c81..9182402aa 100644
--- a/web/routes/uix/+layout@.svelte
+++ b/web/routes/uix/+layout@.svelte
@@ -299,8 +299,7 @@
 				{ slug: '/uix/components/trans', label: 'Trans' },
 				{ slug: '/uix/components/format-number', label: 'FormatNumber' },
 				{ slug: '/uix/components/format-date', label: 'FormatDate' },
-				{ slug: '/uix/components/relative-time', label: 'RelativeTime' },
-				{ slug: '/uix/components/count-up', label: 'CountUp' }
+				{ slug: '/uix/components/relative-time', label: 'RelativeTime' }
 			]
 		},
 		{
@@ -344,6 +343,7 @@
 			kind: 'group',
 			heading: 'Text effects',
 			items: [
+				{ slug: '/uix/components/count-up', label: 'CountUp' },
 				{ slug: '/uix/components/text-gradient', label: 'TextGradient' },
 				{ slug: '/uix/components/text-circular', label: 'TextCircular' },
 				{ slug: '/uix/components/text-blur', label: 'TextBlur' },
diff --git a/web/routes/uix/components/count-up/+page.svelte b/web/routes/uix/components/count-up/+page.svelte
index bb6cc4ade..1e3690310 100644
--- a/web/routes/uix/components/count-up/+page.svelte
+++ b/web/routes/uix/components/count-up/+page.svelte
@@ -51,7 +51,7 @@
 
 <div data-uix-canvas-inner>
 	<header>
-		<div data-uix-eyebrow>Services · CountUp</div>
+		<div data-uix-eyebrow>Text effects · CountUp</div>
 		<h1 data-uix-page-title>CountUp</h1>
 		<p data-uix-page-lede>
 			Service component que anima un número de <code>from</code> → <code>to</code> con un settle de
@@ -72,7 +72,7 @@
 
 	<!-- Live preview always rendered -->
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-3xl); font-weight: 700;">
+		<div data-uix-stage-area style="font-size: var(--font-size-3xl); font-weight: 700; background: var(--color-surface-default); color: var(--color-neutral-text);">
 			{#key `${runId}|${to}|${from}|${direction}|${delay}|${duration}|${useGrouping}|${demoLocale}`}
 				<CountUp {to} {from} {direction} {delay} {duration} {useGrouping} locale={demoLocale} />
 			{/key}
diff --git a/web/routes/uix/components/text-blur/+page.svelte b/web/routes/uix/components/text-blur/+page.svelte
index 32a045f6d..cb8f7fc87 100644
--- a/web/routes/uix/components/text-blur/+page.svelte
+++ b/web/routes/uix/components/text-blur/+page.svelte
@@ -60,7 +60,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-2xl); font-weight: 600;">
+		<div data-uix-stage-area style="font-size: var(--font-size-2xl); font-weight: 600; background: var(--color-surface-default); color: var(--color-neutral-text);">
 			{#key `${runId}|${text}|${delay}|${animateBy}|${direction}|${stepDuration}`}
 				<TextBlur {text} {delay} {animateBy} {direction} {stepDuration} />
 			{/key}
diff --git a/web/routes/uix/components/text-circular/+page.svelte b/web/routes/uix/components/text-circular/+page.svelte
index 1f7b1da92..1e27251aa 100644
--- a/web/routes/uix/components/text-circular/+page.svelte
+++ b/web/routes/uix/components/text-circular/+page.svelte
@@ -62,7 +62,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area>
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextCircular {text} {spinDuration} {onHover} style={`--text-circular-size: ${size}rem`} />
 		</div>
 		<div data-uix-stage-trace>
diff --git a/web/routes/uix/components/text-focus/+page.svelte b/web/routes/uix/components/text-focus/+page.svelte
index d6d900ea3..919130ff1 100644
--- a/web/routes/uix/components/text-focus/+page.svelte
+++ b/web/routes/uix/components/text-focus/+page.svelte
@@ -65,7 +65,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area>
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextFocus
 				{sentence}
 				{manualMode}
diff --git a/web/routes/uix/components/text-gradient/+page.svelte b/web/routes/uix/components/text-gradient/+page.svelte
index dbf012529..36f70bc75 100644
--- a/web/routes/uix/components/text-gradient/+page.svelte
+++ b/web/routes/uix/components/text-gradient/+page.svelte
@@ -68,7 +68,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-3xl);">
+		<div data-uix-stage-area style="font-size: var(--font-size-3xl); background: var(--color-surface-default);">
 			<TextGradient {colors} {animationSpeed} {showBorder} {direction} {pauseOnHover} {yoyo}>
 				{sample}
 			</TextGradient>
diff --git a/web/routes/uix/components/text-scramble/+page.svelte b/web/routes/uix/components/text-scramble/+page.svelte
index 118f8a791..aad6b323f 100644
--- a/web/routes/uix/components/text-scramble/+page.svelte
+++ b/web/routes/uix/components/text-scramble/+page.svelte
@@ -57,7 +57,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="max-inline-size: 36rem;">
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextScramble {text} {radius} {duration} {speed} {scrambleChars} />
 		</div>
 		<div data-uix-stage-trace>