go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uix(demos): la pestaña Tokens en los cinco que cerraron antes del paso 11

Browse Source 
`metrics`, `float-panel`, `stepper`, `timeline` y `tag-group` tokenizaron su
receta ANTES de que existiera el paso 11 del protocolo (`PLAN-theming.md` §7),
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.

Ninguna lista escrita a mano. El molde es `collapsible` —
`<TokensPanel component="{kebab}" stage={stageRef} />`—, y el panel pregunta a
`ActiveEidos.getRecipeTokens(name)`: se deriva del contrato VIVO de
`lib/recipes/base.ts`, así que una clave añadida, renombrada o retirada aparece
aquí sin que nadie tenga que acordarse de la demo.

Verificado en Chrome sobre el dev server, pestaña a pestaña. Cada fila resuelve
su valor computado sobre el escenario de la propia demo; ninguna queda en «—»:

  metrics      72 filas
  float-panel  40 filas
  stepper      69 filas
  timeline     45 filas
  tag-group    91 filas

Las cinco cifras casan exactamente con las claves públicas (las que no empiezan
por `_`) del bloque de cada componente en `src/uix/eidos/lib/recipes/base.ts`.
Cero errores de consola en las cinco páginas.

`npm run check`: 72 errores / 62 avisos, ninguno en estos cinco ficheros —
idéntico antes y después. Los cinco `+page.svelte` arrastran deriva de formato
PREVIA (37–75 líneas cada uno ya sucias en HEAD); no se toca aquí, y el botón
nuevo copia literalmente la forma del hermano `Recipe` que tiene encima.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent ccdb7fc506
commit 43360ad0ae
5 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File

8
web/routes/uix/components/float-panel/+page.svelte
Unescape View File

@ -4,11 +4,12 @@
type FloatPanelColor,
type FloatPanelVariant
} from '$uix/eidos/components/float-panel';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { floatPanelMorfo } from '@/uix/morfo/components/float-panel';
import { getActiveUix } from '$active-uix';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type Side = 'top' | 'right' | 'bottom' | 'left';
type Align = 'start' | 'center' | 'end';
type TraceEntry = { event: string; family: string; at: number };
@ -293,6 +294,7 @@
<span data-uix-tab-count>{events.length}</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>
@ -515,6 +517,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="float-panel" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

8
web/routes/uix/components/metrics/+page.svelte
Unescape View File

@ -27,13 +27,14 @@
ArrowUpRight
} from '$uix/eidos/components/icon';
import type { ColorRole } from '$uix/eidos/lib/types';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { metricsMorfo } from '@/uix/morfo/components/metrics';
import { getActiveUix } from '$active-uix';
const uix = getActiveUix();
type Tab = 'live' | 'gallery' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'gallery' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
let tab = $state<Tab>('live');
@ -310,6 +311,7 @@
<span data-uix-tab-count>{events.length}</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>
@ -934,6 +936,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="metrics" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

8
web/routes/uix/components/stepper/+page.svelte
Unescape View File

@ -6,6 +6,7 @@
type StepperVariant
} from '$uix/eidos/components/stepper';
import { SvgCheck } from '$uix/eidos/components/svg';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { stepperMorfo } from '@/uix/morfo/components/stepper';
import type { Intent } from '$uix/intent';
@ -13,7 +14,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type Orientation = 'horizontal' | 'vertical';
type Direction = 'ltr' | 'rtl';
@ -311,6 +312,7 @@
<span data-uix-tab-count>{events.length}</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>
@ -611,6 +613,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="stepper" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

8
web/routes/uix/components/tag-group/+page.svelte
Unescape View File

@ -6,6 +6,7 @@
type TagGroupSize,
type TagGroupVariant
} from '$uix/eidos/components/tag-group';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { tagGroupMorfo } from '@/uix/morfo/components/tag-group';
import type { Intent } from '$uix/intent';
@ -27,7 +28,7 @@
...PALETTE_SCALES
] as const;
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TagModel = {
value: string;
label: string;
@ -333,6 +334,7 @@
<span data-uix-tab-count>{events.length}</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>
@ -615,6 +617,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="tag-group" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

8
web/routes/uix/components/timeline/+page.svelte
Unescape View File

@ -16,6 +16,7 @@
Wrench,
Check
} from '$uix/eidos/components/icon';
import TokensPanel from '../../lib/TokensPanel.svelte';
import { compileMorfo } from '$uix/morfo';
import { timelineMorfo } from '@/uix/morfo/components/timeline';
import type { Intent } from '$uix/intent';
@ -23,7 +24,7 @@
import { getActiveUix } from '$active-uix';
import { page } from '$app/state';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
const uix = getActiveUix();
const params = page.url.searchParams;
@ -260,6 +261,7 @@
<span data-uix-tab-count>{eventsDecl.length}</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>
@ -587,6 +589,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="timeline" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.