From 99a9011dd925a9692422ae7529b992169d24d5a0 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Mon, 24 Aug 2026 03:56:06 +0200
Subject: [PATCH] =?UTF-8?q?uix(demos):=20la=20pesta=C3=B1a=20Tokens=20en?=
 =?UTF-8?q?=20cinco=20demos=20=E2=80=94=20la=20superficie=20de=20tema=20se?=
 =?UTF-8?q?=20VE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El paso 11 del protocolo (`PLAN-theming.md` §7) llegó DESPUÉS de que estos
cinco cerraran su tokenización, así que su superficie de tema no se veía en
ninguna parte. La demo ES el producto: un componente temable cuya demo
esconde sus tokens está a medio entregar.

Las cinco piezas del molde de `collapsible`, sin una sola lista escrita a
mano: el panel pregunta a `ActiveEidos.getRecipeTokens(name)`, de modo que
un token que se añada, se renombre o se caiga aparece aquí sin que nadie se
acuerde de tocar la demo. El `stage` que recibe cada panel es el nodo del
escenario que ya existía en cada fichero (`stageRef`), no uno nuevo.

Filas que lista cada panel — el número es el de claves públicas de su
bloque en `lib/recipes/base.ts`, no una cifra copiada:

  radio-cards       40
  password-field    30
  aura              37
  gradient-builder  72   (6 de ellas estructuradas: «por talla / ámbito»)
  nav-tree          18

Verificado en Chrome de verdad, abriendo la pestaña en las cinco páginas:
las tres columnas resuelven sobre el escenario vivo, cero filas sin resolver
(«—») y cero errores de consola. `npm run check`: 72 errores preexistentes,
ninguno en estos ficheros.

De paso: `gradient-builder` declaraba su `type Tab` en una línea de 101
columnas que prettier ya quería partir antes de esta sesión; al tocar esa
misma línea queda en su forma canónica y el fichero pasa a estar limpio.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/routes/uix/components/aura/+page.svelte   |  9 +++++++++
 .../components/gradient-builder/+page.svelte  | 20 ++++++++++++++++++-
 .../uix/components/nav-tree/+page.svelte      | 10 +++++++++-
 .../components/password-field/+page.svelte    | 10 +++++++++-
 .../uix/components/radio-cards/+page.svelte   | 10 +++++++++-
 5 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/web/routes/uix/components/aura/+page.svelte b/web/routes/uix/components/aura/+page.svelte
index 803ab22e7..201141a5c 100644
--- a/web/routes/uix/components/aura/+page.svelte
+++ b/web/routes/uix/components/aura/+page.svelte
@@ -19,6 +19,7 @@
 	import SystemAxes from '../../lib/SystemAxes.svelte';
 	import MotionPanel from '../../lib/MotionPanel.svelte';
 	import SemaPanel from '../../lib/SemaPanel.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { DemoTrace } from '../../lib/harness.svelte';
 
 	type Tab =
@@ -30,6 +31,7 @@
 		| 'api'
 		| 'morfo'
 		| 'recipe'
+		| 'tokens'
 		| 'a11y';
 	let tab = $state<Tab>('live');
 
@@ -333,6 +335,9 @@
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
 			>Recipe</button
 		>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -671,6 +676,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="aura" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/gradient-builder/+page.svelte b/web/routes/uix/components/gradient-builder/+page.svelte
index 941ccb2c0..3ed29e6e0 100644
--- a/web/routes/uix/components/gradient-builder/+page.svelte
+++ b/web/routes/uix/components/gradient-builder/+page.svelte
@@ -20,11 +20,22 @@
 	import SystemAxes from '../../lib/SystemAxes.svelte';
 	import MotionPanel from '../../lib/MotionPanel.svelte';
 	import SemaPanel from '../../lib/SemaPanel.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { DemoTrace } from '../../lib/harness.svelte';
 
 	const uix = getActiveUix();
 
-	type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'a11y';
+	type Tab =
+		| 'live'
+		| 'system'
+		| 'motion'
+		| 'sema'
+		| 'services'
+		| 'api'
+		| 'morfo'
+		| 'recipe'
+		| 'tokens'
+		| 'a11y';
 	let tab = $state<Tab>('live');
 
 	const sizes: GradientBuilderSize[] = ['sm', 'md', 'lg'];
@@ -220,6 +231,9 @@
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
 			>Recipe</button
 		>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -524,6 +538,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="gradient-builder" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/nav-tree/+page.svelte b/web/routes/uix/components/nav-tree/+page.svelte
index e6844871f..b7bdc62ee 100644
--- a/web/routes/uix/components/nav-tree/+page.svelte
+++ b/web/routes/uix/components/nav-tree/+page.svelte
@@ -7,12 +7,13 @@
 	import SystemAxes from '../../lib/SystemAxes.svelte';
 	import MotionPanel from '../../lib/MotionPanel.svelte';
 	import SemaPanel from '../../lib/SemaPanel.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 	import { DemoTrace } from '../../lib/harness.svelte';
 
 	const uix = getActiveUix();
 
 	// prettier-ignore
-	type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'system' | 'motion' | 'sema' | 'services' | 'api' | 'morfo' | 'recipe' | 'tokens' | 'a11y';
 	let tab = $state<Tab>('live');
 
 	const trace = new DemoTrace();
@@ -391,6 +392,9 @@
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>
 			Recipe
 		</button>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
+			Tokens
+		</button>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -756,6 +760,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="nav-tree" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/password-field/+page.svelte b/web/routes/uix/components/password-field/+page.svelte
index cdaebb62c..b7b44744a 100644
--- a/web/routes/uix/components/password-field/+page.svelte
+++ b/web/routes/uix/components/password-field/+page.svelte
@@ -11,6 +11,7 @@
 	import { getActiveUix } from '$active-uix';
 	import { passwordStrength, SECS_PASSWORD_STRENGTH_MAX } from '$libs/secs';
 	import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 
 	// Number of visual segments — one per canonical strength step above zero.
 	const STRENGTH_SEGMENTS = Array.from(
@@ -18,7 +19,7 @@
 		(_, i) => i
 	);
 
-	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
 	type TraceEntry = { event: string; family: string; intent?: string; at: number };
 
 	const uix = getActiveUix();
@@ -269,6 +270,9 @@
 		</button>
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button
 		>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -718,6 +722,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="password-field" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
diff --git a/web/routes/uix/components/radio-cards/+page.svelte b/web/routes/uix/components/radio-cards/+page.svelte
index 100a86985..a684dbb98 100644
--- a/web/routes/uix/components/radio-cards/+page.svelte
+++ b/web/routes/uix/components/radio-cards/+page.svelte
@@ -9,10 +9,11 @@
 	import { compileMorfo } from '$uix/morfo';
 	import { radioCardsMorfo } from '@/uix/morfo/components/radio-cards';
 	import { page } from '$app/state';
+	import TokensPanel from '../../lib/TokensPanel.svelte';
 
 	const params = page.url.searchParams;
 
-	type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'a11y';
+	type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'tokens' | 'a11y';
 	let tab = $state<Tab>('live');
 
 	let value = $state('pro');
@@ -178,6 +179,9 @@
 			<span data-uix-tab-count>{partsList.length}p</span>
 		</button>
 		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
+		<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
+			>Tokens</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -390,6 +394,10 @@
 		</section>
 	{/if}
 
+	{#if tab === 'tokens'}
+		<TokensPanel component="radio-cards" stage={stageRef ?? undefined} />
+	{/if}
+
 	{#if tab === 'a11y'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>