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

fix(demos): el contador de la pestaña Tokens se DERIVA del contrato — tres ya mentían

Browse Source 
El panel de Tokens existe precisamente para no escribir a mano lo que el
contrato ya sabe: pregunta a ActiveEidos.getRecipeTokens(). Pero el número
junto a la etiqueta de la pestaña SÍ estaba escrito a mano, y derivó como
deriva siempre una segunda fuente de verdad.

Auditadas las 105 demos que montan el panel: 90 contadores correctos, 15 sin
contador y TRES que mentían — carousel decía 30 y son 27, drag-drop 10 y son 9,
link-preview 33 y son 35. Nadie edita un badge cuando cambia una receta.

Nace web/routes/uix/lib/TokensTabCount.svelte, que hace la MISMA pregunta que
el panel de debajo y filtra los forwards con guion bajo. 102 demos convertidas;
las tres que faltan (scroll-area, slider, tabs) están en manos de otra sesión y
van en una segunda pasada, para que el índice compartido no vea nunca dos
escritores sobre un fichero.

Verificado en navegador: carousel pasa de decir 30 a decir 27, con 27 filas en
el panel y ninguna sin resolver; metrics, que no tenía contador, dice 72 y lista
72. npm run check COMPLETED con los 72 errores preexistentes de la rama y
ninguno en los 102 ficheros.

Dos sesiones de esta tanda discreparon sobre si poner el contador —una lo puso
a mano, otra lo omitió por ser justo lo que el panel evita—. Tenían razón las
dos a medias: el contador es útil y no debe escribirse.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 99a9011dd9
commit 9fc38b19a4
106 changed files with 271 additions and 105 deletions
Show Stats Download Patch File Download Diff File

3
web/routes/uix/components/accordion/+page.svelte
Unescape View File

@ -6,6 +6,7 @@
type AccordionType
} from '$uix/eidos/components/accordion';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { accordionMorfo } from '@/uix/morfo/components/accordion';
import { getActiveUix } from '$active-uix';
@ -243,7 +244,7 @@
</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 <span data-uix-tab-count>76</span>
Tokens <TokensTabCount component="accordion" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/anchor-nav/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import SemaPanel from '../../lib/SemaPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -176,7 +177,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>12</span>
Tokens <TokensTabCount component="anchor-nav" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/announce/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { announceMorfo } from '@/uix/morfo/components/announce';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -289,7 +290,7 @@
</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 <span data-uix-tab-count>9</span>
Tokens <TokensTabCount component="announce" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/aura/+page.svelte
Unescape View File

@ -20,6 +20,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
type Tab =
@ -336,7 +337,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
>Tokens</button
>Tokens <TokensTabCount component="aura" /></button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/avatar/+page.svelte
Unescape View File

@ -14,6 +14,7 @@
import { avatarMorfo } from '@/uix/morfo/components/avatar';
import { PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
// Roles + the 33 palette scales — the avatar's `color` accepts any (a scale
// routes through the shared per-instance layer; THM-2 §25.5).
@ -214,7 +215,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>88</span>
Tokens <TokensTabCount component="avatar" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/background/+page.svelte
Unescape View File

@ -32,6 +32,7 @@
import { backgroundMorfo } from '@/uix/morfo/components/background';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import PalettePicker from '../../lib/PalettePicker.svelte';
import SystemAxes from '../../lib/SystemAxes.svelte';
@ -357,7 +358,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>37</span>
Tokens <TokensTabCount component="background" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/badge/+page.svelte
Unescape View File

@ -14,6 +14,7 @@
import { badgeMorfo } from '@/uix/morfo/components/badge';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -221,7 +222,7 @@
<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 <span data-uix-tab-count>71</span>
Tokens <TokensTabCount component="badge" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/banner/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { compileMorfo } from '$uix/morfo';
import { bannerMorfo } from '@/uix/morfo/components/banner';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens'
| 'a11y';
@ -204,7 +205,7 @@
</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 <span data-uix-tab-count>53</span>
Tokens <TokensTabCount component="banner" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/button-group/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { compileMorfo } from '$uix/morfo';
import { buttonGroupMorfo } from '@/uix/morfo/components/button-group';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens'
| 'a11y';
@ -187,7 +188,7 @@
<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 <span data-uix-tab-count>1</span>
Tokens <TokensTabCount component="button-group" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/button/+page.svelte
Unescape View File

@ -26,6 +26,7 @@
import SemaPanel from '../../lib/SemaPanel.svelte';
import { DemoTrace, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -221,7 +222,7 @@
</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 <span data-uix-tab-count>106</span>
Tokens <TokensTabCount component="button" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/calendar/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { getActiveUix } from '$active-uix';
import { CalendarDate, type DateValue, type WeekStartsOn } from '$libs/days';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -589,7 +590,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>74</span>
Tokens <TokensTabCount component="calendar" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/callout/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import SemaPanel from '../../lib/SemaPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -178,7 +179,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>34</span>
Tokens <TokensTabCount component="callout" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/card-group/+page.svelte
Unescape View File

@ -7,6 +7,7 @@
import { Card } from '$uix/eidos/components/card';
import { UNLIMITED, isSelectable, type SelectionLimit } from '$libs/selection';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'composition' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
@ -248,7 +249,7 @@
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>API</button>
<button data-uix-tab data-active={tab === 'composition'} onclick={() => (tab = 'composition')}>Composition</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>20</span>
Tokens <TokensTabCount component="card-group" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/card/+page.svelte
Unescape View File

@ -15,6 +15,7 @@
import { Badge } from '$uix/eidos/components/badge';
import { Button } from '$uix/eidos/components/button';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { cardMorfo } from '@/uix/morfo/components/card';
@ -242,7 +243,7 @@
<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 <span data-uix-tab-count>98</span>
Tokens <TokensTabCount component="card" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/carousel/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { carouselMorfo } from '@/uix/morfo/components/carousel';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -383,7 +384,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>30</span>
Tokens <TokensTabCount component="carousel" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/chart/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
type PieDatum
} from '$uix/eidos/components/chart';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { chartMorfo } from '@/uix/morfo/components/chart';
import type { CurveName } from '$libs/plots';
@ -143,7 +144,7 @@
</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 <span data-uix-tab-count>45</span>
Tokens <TokensTabCount component="chart" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/chat-composer/+page.svelte
Unescape View File

@ -21,6 +21,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -247,7 +248,7 @@
</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 <span data-uix-tab-count>33</span>
Tokens <TokensTabCount component="chat-composer" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/chat-log/+page.svelte
Unescape View File

@ -18,6 +18,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -330,7 +331,7 @@
</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 <span data-uix-tab-count>35</span>
Tokens <TokensTabCount component="chat-log" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/chat-message/+page.svelte
Unescape View File

@ -22,6 +22,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -326,7 +327,7 @@
</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 <span data-uix-tab-count>81</span>
Tokens <TokensTabCount component="chat-message" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/chat-typing/+page.svelte
Unescape View File

@ -15,6 +15,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -184,7 +185,7 @@
</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 <span data-uix-tab-count>8</span>
Tokens <TokensTabCount component="chat-typing" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/checkbox/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
const params = page.url.searchParams;
@ -266,7 +267,7 @@
</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 <span data-uix-tab-count>47</span>
Tokens <TokensTabCount component="checkbox" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/clipboard/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { clipboardMorfo } from '@/uix/morfo/components/clipboard';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -232,7 +233,7 @@
</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 <span data-uix-tab-count>6</span>
Tokens <TokensTabCount component="clipboard" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/code-block/+page.svelte
Unescape View File

@ -7,6 +7,7 @@
import { compileMorfo } from '$uix/morfo';
import { codeBlockMorfo } from '@/uix/morfo/components/code-block';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -149,7 +150,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>20</span>
Tokens <TokensTabCount component="code-block" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/code/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { compileMorfo } from '$uix/morfo';
import { codeMorfo } from '@/uix/morfo/components/code';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -150,7 +151,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>6</span>
Tokens <TokensTabCount component="code" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/collapsible/+page.svelte
Unescape View File

@ -1,6 +1,7 @@
<script lang="ts">
import { Collapsible } from '$uix/eidos/components/collapsible';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { collapsibleMorfo } from '@/uix/morfo/components/collapsible';
import { getActiveUix } from '$active-uix';
@ -178,7 +179,7 @@
</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 <span data-uix-tab-count>12</span>
Tokens <TokensTabCount component="collapsible" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/color-field/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { colorFieldMorfo } from '@/uix/morfo/components/color-field';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import {
colorValueFromRgb,
type ColorValue,
@ -340,7 +341,7 @@
</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 <span data-uix-tab-count>26</span>
Tokens <TokensTabCount component="color-field" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/color-picker/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { PALETTE_SCALES } from '$uix/eidos/lib/types';
import { INTENTS } from '$uix/intent';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { colorPickerMorfo } from '@/uix/morfo/components/color-picker';
import { colorFieldMorfo } from '@/uix/morfo/components/color-field';
@ -554,7 +555,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>71</span>
Tokens <TokensTabCount component="color-picker" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/command/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
import { commandMorfo } from '@/uix/morfo/components/command';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -362,7 +363,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>57</span>
Tokens <TokensTabCount component="command" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/context-menu/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
import { contextMenuMorfo } from '@/uix/morfo/components/context-menu';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -334,7 +335,7 @@
</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 <span data-uix-tab-count>28</span>
Tokens <TokensTabCount component="context-menu" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/cropper/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { cropperMorfo } from '@/uix/morfo/components/cropper';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -233,7 +234,7 @@
</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 <span data-uix-tab-count>17</span>
Tokens <TokensTabCount component="cropper" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/date-range-field/+page.svelte
Unescape View File

@ -20,6 +20,7 @@
} from '$libs/days';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -465,7 +466,7 @@
</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 <span data-uix-tab-count>7</span>
Tokens <TokensTabCount component="date-range-field" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/dialog/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { dialogMorfo } from '@/uix/morfo/components/dialog';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -250,7 +251,7 @@
</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 <span data-uix-tab-count>44</span>
Tokens <TokensTabCount component="dialog" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/drag-drop/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { dragDropMorfo } from '@/uix/morfo/components/drag-drop';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -228,7 +229,7 @@
</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 <span data-uix-tab-count>10</span>
Tokens <TokensTabCount component="drag-drop" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/drawer/+page.svelte
Unescape View File

@ -6,6 +6,7 @@
type DrawerSize
} from '$uix/eidos/components/drawer';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { drawerMorfo } from '@/uix/morfo/components/drawer';
import { resolveSignature } from '$uix/sema';
@ -257,7 +258,7 @@
</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 <span data-uix-tab-count>54</span>
Tokens <TokensTabCount component="drawer" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/dropdown-menu/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
import { dropdownMenuMorfo } from '@/uix/morfo/components/dropdown-menu';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -364,7 +365,7 @@
</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 <span data-uix-tab-count>28</span>
Tokens <TokensTabCount component="dropdown-menu" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/editable/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type ActivationMode = 'focus' | 'click' | 'dblclick' | 'none';
@ -278,7 +279,7 @@
</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 <span data-uix-tab-count>56</span>
Tokens <TokensTabCount component="editable" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/emoji-picker/+page.svelte
Unescape View File

@ -16,6 +16,7 @@
import SystemAxes from '../../lib/SystemAxes.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'system' | 'api' | 'morfo' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
@ -141,7 +142,7 @@
<span data-uix-layer-badge="morfo">morfo</span><span data-uix-tab-count>{partsList.length}p</span>
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>21</span>
Tokens <TokensTabCount component="emoji-picker" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/empty-state/+page.svelte
Unescape View File

@ -16,6 +16,7 @@
import SemaPanel from '../../lib/SemaPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -228,7 +229,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>26</span>
Tokens <TokensTabCount component="empty-state" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/fab/+page.svelte
Unescape View File

@ -5,6 +5,7 @@
import { fabMorfo } from '@/uix/morfo/components/fab';
import type { ButtonVariant } from '$uix/eidos/components/button';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -186,7 +187,7 @@
<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 <span data-uix-tab-count>12</span>
Tokens <TokensTabCount component="fab" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/feed/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { feedMorfo } from '@/uix/morfo/components/feed';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -292,7 +293,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>50</span>
Tokens <TokensTabCount component="feed" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/field/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { compileMorfo } from '$uix/morfo';
import { fieldMorfo } from '@/uix/morfo/components/field';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens'
| 'a11y';
@ -212,7 +213,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>68</span>
Tokens <TokensTabCount component="field" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/file-upload/+page.svelte
Unescape View File

@ -13,6 +13,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
@ -317,7 +318,7 @@
</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 <span data-uix-tab-count>98</span>
Tokens <TokensTabCount component="file-upload" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

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

@ -5,6 +5,7 @@
type FloatPanelVariant
} from '$uix/eidos/components/float-panel';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { floatPanelMorfo } from '@/uix/morfo/components/float-panel';
import { getActiveUix } from '$active-uix';
@ -294,7 +295,9 @@
<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 === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <TokensTabCount component="float-panel" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/form/+page.svelte
Unescape View File

@ -13,6 +13,7 @@
} from '$libs/forms';
import { object, string, number, boolean, enumOf, pipe, min, max, email, integer, meta } from '$sium/core';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -432,7 +433,7 @@
</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 <span data-uix-tab-count>64</span>
Tokens <TokensTabCount component="form" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/gradient-builder/+page.svelte
Unescape View File

@ -21,6 +21,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -232,7 +233,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}
>Tokens</button
>Tokens <TokensTabCount component="gradient-builder" /></button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/gradient-picker/+page.svelte
Unescape View File

@ -14,6 +14,7 @@
import { gradientPickerMorfo } from '@/uix/morfo/components/gradient-picker';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import SystemAxes from '../../lib/SystemAxes.svelte';
import MotionPanel from '../../lib/MotionPanel.svelte';
@ -254,7 +255,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>25</span>
Tokens <TokensTabCount component="gradient-picker" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/grid-list/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { gridListMorfo } from '@/uix/morfo/components/grid-list';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -217,7 +218,7 @@
</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 <span data-uix-tab-count>38</span>
Tokens <TokensTabCount component="grid-list" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/image-adjustments/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { imageAdjustmentsMorfo } from '@/uix/morfo/components/image-adjustments';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -242,7 +243,7 @@
</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 <span data-uix-tab-count>16</span>
Tokens <TokensTabCount component="image-adjustments" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/image-picker/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { imagePickerMorfo } from '@/uix/morfo/components/image-picker';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -207,7 +208,7 @@
</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 <span data-uix-tab-count>14</span>
Tokens <TokensTabCount component="image-picker" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/image/+page.svelte
Unescape View File

@ -13,6 +13,7 @@
import { compileMorfo } from '$uix/morfo';
import { imageMorfo } from '@/uix/morfo/components/image';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens'
| 'a11y';
@ -180,7 +181,7 @@
<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 <span data-uix-tab-count>23</span>
Tokens <TokensTabCount component="image" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/kbd/+page.svelte
Unescape View File

@ -3,6 +3,7 @@
import { compileMorfo } from '$uix/morfo';
import { kbdMorfo } from '@/uix/morfo/components/kbd';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -135,7 +136,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>13</span>
Tokens <TokensTabCount component="kbd" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/knob/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
import { knobMorfo } from '@/uix/morfo/components/knob';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type Intent = 'neutral' | 'affirm' | 'risk' | 'threat';
@ -180,7 +181,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>33</span>
Tokens <TokensTabCount component="knob" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/label/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { compileMorfo } from '$uix/morfo';
import { labelMorfo } from '@/uix/morfo/components/label';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
@ -109,7 +110,7 @@
</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 <span data-uix-tab-count>2</span>
Tokens <TokensTabCount component="label" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/link-preview/+page.svelte
Unescape View File

@ -7,6 +7,7 @@
import { linkPreviewMorfo } from '@/uix/morfo/components/link-preview';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -224,7 +225,7 @@
</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 <span data-uix-tab-count>33</span>
Tokens <TokensTabCount component="link-preview" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/link/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { compileMorfo } from '$uix/morfo';
import { linkMorfo } from '@/uix/morfo/components/link';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -173,7 +174,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>5</span>
Tokens <TokensTabCount component="link" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/listbox/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { listboxMorfo } from '@/uix/morfo/components/listbox';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -261,7 +262,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>21</span>
Tokens <TokensTabCount component="listbox" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/mark/+page.svelte
Unescape View File

@ -3,6 +3,7 @@
import { compileMorfo } from '$uix/morfo';
import { markMorfo } from '@/uix/morfo/components/mark';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -132,7 +133,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>3</span>
Tokens <TokensTabCount component="mark" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/media-player/+page.svelte
Unescape View File

@ -11,6 +11,7 @@
import { mediaPlayerMorfo } from '@/uix/morfo/components/media-player';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import SystemAxes from '../../lib/SystemAxes.svelte';
import MotionPanel from '../../lib/MotionPanel.svelte';
@ -385,7 +386,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>61</span>
Tokens <TokensTabCount component="media-player" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/menu-dial/+page.svelte
Unescape View File

@ -13,6 +13,7 @@
import { menuDialMorfo } from '@/uix/morfo/components/menu-dial';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -218,7 +219,7 @@
</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 <span data-uix-tab-count>3</span>
Tokens <TokensTabCount component="menu-dial" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/menubar/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { menubarMorfo } from '@/uix/morfo/components/menubar';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -436,7 +437,7 @@
</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 <span data-uix-tab-count>35</span>
Tokens <TokensTabCount component="menubar" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/meter/+page.svelte
Unescape View File

@ -3,6 +3,7 @@
import { compileMorfo } from '$uix/morfo';
import { meterMorfo } from '@/uix/morfo/components/meter';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -183,7 +184,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>28</span>
Tokens <TokensTabCount component="meter" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

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

@ -28,6 +28,7 @@
} from '$uix/eidos/components/icon';
import type { ColorRole } from '$uix/eidos/lib/types';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { metricsMorfo } from '@/uix/morfo/components/metrics';
import { getActiveUix } from '$active-uix';
@ -311,7 +312,9 @@
<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 === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <TokensTabCount component="metrics" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/nav-tree/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -393,7 +394,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens
Tokens <TokensTabCount component="nav-tree" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/navigation-menu/+page.svelte
Unescape View File

@ -7,6 +7,7 @@
import { navigationMenuMorfo } from '@/uix/morfo/components/navigation-menu';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -231,7 +232,7 @@
</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 <span data-uix-tab-count>44</span>
Tokens <TokensTabCount component="navigation-menu" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/onion-menu/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { onionMenuMorfo } from '@/uix/morfo/components/onion-menu';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -256,7 +257,7 @@
<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 <span data-uix-tab-count>19</span>
Tokens <TokensTabCount component="onion-menu" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/password-field/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { passwordStrength, SECS_PASSWORD_STRENGTH_MAX } from '$libs/secs';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
// Number of visual segments — one per canonical strength step above zero.
const STRENGTH_SEGMENTS = Array.from(
@ -271,7 +272,7 @@
<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
>Tokens <TokensTabCount component="password-field" /></button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/pin-input/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { compileMorfo } from '$uix/morfo';
import { pinInputMorfo } from '@/uix/morfo/components/pin-input';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
@ -302,7 +303,7 @@
</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 <span data-uix-tab-count>22</span>
Tokens <TokensTabCount component="pin-input" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/popover/+page.svelte
Unescape View File

@ -5,6 +5,7 @@
} from '$uix/eidos/components/popover';
import type { MotionPresetName } from '$uix/eidos/lib/motion/registry';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { popoverMorfo } from '@/uix/morfo/components/popover';
import { getActiveUix } from '$active-uix';
@ -227,7 +228,7 @@
</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 <span data-uix-tab-count>46</span>
Tokens <TokensTabCount component="popover" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/progress/+page.svelte
Unescape View File

@ -3,6 +3,7 @@
import { compileMorfo } from '$uix/morfo';
import { progressMorfo } from '@/uix/morfo/components/progress';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type Orientation = 'horizontal' | 'vertical';
@ -178,7 +179,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>43</span>
Tokens <TokensTabCount component="progress" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/qr-code/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { compileMorfo } from '$uix/morfo';
import { qrCodeMorfo } from '@/uix/morfo/components/qr-code';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'tokens'
| 'a11y';
@ -133,7 +134,7 @@
</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 <span data-uix-tab-count>10</span>
Tokens <TokensTabCount component="qr-code" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/radio-cards/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { radioCardsMorfo } from '@/uix/morfo/components/radio-cards';
import { page } from '$app/state';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const params = page.url.searchParams;
@ -180,7 +181,7 @@
</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
>Tokens <TokensTabCount component="radio-cards" /></button
>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/radio-group/+page.svelte
Unescape View File

@ -14,6 +14,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
const params = page.url.searchParams;
@ -297,7 +298,7 @@
</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 <span data-uix-tab-count>69</span>
Tokens <TokensTabCount component="radio-group" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/rating-group/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
import { ratingGroupMorfo } from '@/uix/morfo/components/rating-group';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type Orientation = 'horizontal' | 'vertical';
@ -197,7 +198,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>29</span>
Tokens <TokensTabCount component="rating-group" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/s-text-virtual-list/+page.svelte
Unescape View File

@ -3,6 +3,7 @@
import { compileMorfo } from '$uix/morfo';
import { sTextVirtualListMorfo } from '@/uix/morfo/components/s-text-virtual-list';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
@ -113,7 +114,7 @@
<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 <span data-uix-tab-count>9</span>
Tokens <TokensTabCount component="s-text-virtual-list" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

10
web/routes/uix/components/scroll-area/+page.svelte
Unescape View File

@ -9,8 +9,9 @@
} from '$uix/eidos/components/scroll-area';
import { compileMorfo } from '$uix/morfo';
import { scrollAreaMorfo } from '@/uix/morfo/components/scroll-area';
import TokensPanel from '../../lib/TokensPanel.svelte';
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 };
let tab = $state<Tab>('live');
let trace = $state<TraceEntry[]>([]);
@ -216,6 +217,9 @@
<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 <span data-uix-tab-count>13</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -625,6 +629,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="scroll-area" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

3
web/routes/uix/components/scroll-frames/+page.svelte
Unescape View File

@ -5,6 +5,7 @@
import { scrollFramesMorfo } from '@/uix/morfo/components/scroll-frames';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -201,7 +202,7 @@
</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 <span data-uix-tab-count>4</span>
Tokens <TokensTabCount component="scroll-frames" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/search-field/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { searchFieldMorfo } from '@/uix/morfo/components/search-field';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -420,7 +421,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>17</span>
Tokens <TokensTabCount component="search-field" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/section/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
import { compileMorfo } from '$uix/morfo';
import { sectionMorfo } from '@/uix/morfo/components/section';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens'
| 'a11y';
@ -152,7 +153,7 @@
</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 <span data-uix-tab-count>4</span>
Tokens <TokensTabCount component="section" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/select/+page.svelte
Unescape View File

@ -12,6 +12,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type SelectMode = 'single' | 'multiple';
@ -298,7 +299,7 @@
</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 <span data-uix-tab-count>103</span>
Tokens <TokensTabCount component="select" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/separator/+page.svelte
Unescape View File

@ -7,6 +7,7 @@
import { compileMorfo } from '$uix/morfo';
import { separatorMorfo } from '@/uix/morfo/components/separator';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -199,7 +200,7 @@
</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 <span data-uix-tab-count>3</span>
Tokens <TokensTabCount component="separator" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/skeleton/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { skeletonMorfo } from '@/uix/morfo/components/skeleton';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -166,7 +167,7 @@
<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 <span data-uix-tab-count>9</span>
Tokens <TokensTabCount component="skeleton" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/skip-link/+page.svelte
Unescape View File

@ -18,6 +18,7 @@
import MotionPanel from '../../lib/MotionPanel.svelte';
import SemaPanel from '../../lib/SemaPanel.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
const uix = getActiveUix();
@ -309,7 +310,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>8</span>
Tokens <TokensTabCount component="skip-link" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

10
web/routes/uix/components/slider/+page.svelte
Unescape View File

@ -3,8 +3,9 @@
import { compileMorfo } from '$uix/morfo';
import { sliderMorfo } from '@/uix/morfo/components/slider';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.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';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -197,6 +198,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 <span data-uix-tab-count>39</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -529,6 +533,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="slider" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'a11y'}
<section data-uix-section>
<h2 data-uix-section-title>Accessibility</h2>

3
web/routes/uix/components/spinner/+page.svelte
Unescape View File

@ -11,6 +11,7 @@
import { spinnerMorfo } from '@/uix/morfo/components/spinner';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -160,7 +161,7 @@
<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 <span data-uix-tab-count>18</span>
Tokens <TokensTabCount component="spinner" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/split-button/+page.svelte
Unescape View File

@ -8,6 +8,7 @@
import { compileMorfo } from '$uix/morfo';
import { splitButtonMorfo } from '@/uix/morfo/components/split-button';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens'
| 'a11y';
@ -196,7 +197,7 @@
<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 <span data-uix-tab-count>1</span>
Tokens <TokensTabCount component="split-button" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

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

@ -7,6 +7,7 @@
} from '$uix/eidos/components/stepper';
import { SvgCheck } from '$uix/eidos/components/svg';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { stepperMorfo } from '@/uix/morfo/components/stepper';
import type { Intent } from '$uix/intent';
@ -312,7 +313,9 @@
<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 === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <TokensTabCount component="stepper" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/sticky/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import SemaPanel from '../../lib/SemaPanel.svelte';
import { DemoTrace } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -195,7 +196,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>1</span>
Tokens <TokensTabCount component="sticky" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/switch/+page.svelte
Unescape View File

@ -6,6 +6,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
const params = page.url.searchParams;
@ -203,7 +204,7 @@
</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 <span data-uix-tab-count>52</span>
Tokens <TokensTabCount component="switch" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/table/+page.svelte
Unescape View File

@ -19,6 +19,7 @@
import { tableMorfo } from '@/uix/morfo/components/table';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -621,7 +622,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>45</span>
Tokens <TokensTabCount component="table" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

10
web/routes/uix/components/tabs/+page.svelte
Unescape View File

@ -12,11 +12,12 @@
import { tabsMorfo } from '@/uix/morfo/components/tabs';
import { getActiveUix } from '$active-uix';
import { page } from '$app/state';
import TokensPanel from '../../lib/TokensPanel.svelte';
const uix = getActiveUix();
const params = page.url.searchParams;
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
// ── State ──────────────────────────────────────────────────────────────
@ -260,6 +261,9 @@
<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 <span data-uix-tab-count>79</span>
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>
@ -586,6 +590,10 @@
</section>
{/if}
{#if tab === 'tokens'}
<TokensPanel component="tabs" stage={stageRef ?? undefined} />
{/if}
{#if tab === 'recipe'}
<section data-uix-section>
<h2 data-uix-section-title>Eidos recipe</h2>

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

@ -7,6 +7,7 @@
type TagGroupVariant
} from '$uix/eidos/components/tag-group';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { tagGroupMorfo } from '@/uix/morfo/components/tag-group';
import type { Intent } from '$uix/intent';
@ -334,7 +335,9 @@
<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 === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <TokensTabCount component="tag-group" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/tags-input/+page.svelte
Unescape View File

@ -10,6 +10,7 @@
import { tagsInputMorfo } from '@/uix/morfo/components/tags-input';
import type { Intent } from '$uix/intent';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { getActiveUix } from '$active-uix';
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
@ -260,7 +261,7 @@
</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 <span data-uix-tab-count>91</span>
Tokens <TokensTabCount component="tags-input" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/text-gradient/+page.svelte
Unescape View File

@ -3,6 +3,7 @@
import { compileMorfo } from '$uix/morfo';
import { textGradientMorfo } from '@/uix/morfo/components/text-gradient';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
let tab = $state<Tab>('live');
@ -110,7 +111,7 @@
</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 <span data-uix-tab-count>7</span>
Tokens <TokensTabCount component="text-gradient" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/textarea/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { compileMorfo } from '$uix/morfo';
import { textareaMorfo } from '@/uix/morfo/components/textarea';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type TraceEntry = { event: string; family: string; intent?: string; at: number };
@ -230,7 +231,7 @@
Recipe
</button>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>37</span>
Tokens <TokensTabCount component="textarea" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/time-range-field/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { timeRangeFieldMorfo } from '@/uix/morfo/components/time-range-field';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import {
Time,
type TimeValue,
@ -242,7 +243,7 @@
</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 <span data-uix-tab-count>7</span>
Tokens <TokensTabCount component="time-range-field" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

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

@ -17,6 +17,7 @@
Check
} from '$uix/eidos/components/icon';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { timelineMorfo } from '@/uix/morfo/components/timeline';
import type { Intent } from '$uix/intent';
@ -261,7 +262,9 @@
<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 === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <TokensTabCount component="timeline" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/toggle-group/+page.svelte
Unescape View File

@ -13,6 +13,7 @@
import { page } from '$app/state';
import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
const params = page.url.searchParams;
@ -237,7 +238,7 @@
</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 <span data-uix-tab-count>1</span>
Tokens <TokensTabCount component="toggle-group" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/toggle/+page.svelte
Unescape View File

@ -4,6 +4,7 @@
type ToggleSize
} from '$uix/eidos/components/toggle';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
import { compileMorfo } from '$uix/morfo';
import { toggleMorfo } from '@/uix/morfo/components/toggle';
import { getActiveUix } from '$active-uix';
@ -235,7 +236,7 @@
</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 <span data-uix-tab-count>126</span>
Tokens <TokensTabCount component="toggle" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/toolbar/+page.svelte
Unescape View File

@ -9,6 +9,7 @@
import { toolbarMorfo } from '@/uix/morfo/components/toolbar';
import { getActiveUix } from '$active-uix';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
type Orientation = 'horizontal' | 'vertical';
@ -205,7 +206,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>54</span>
Tokens <TokensTabCount component="toolbar" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

3
web/routes/uix/components/tooltip/+page.svelte
Unescape View File

@ -6,6 +6,7 @@
import type { Side, Align } from '$soma/layers/floating';
import { page } from '$app/state';
import TokensPanel from '../../lib/TokensPanel.svelte';
import TokensTabCount from '../../lib/TokensTabCount.svelte';
const uix = getActiveUix();
@ -275,7 +276,7 @@
>Recipe</button
>
<button data-uix-tab data-active={tab === 'tokens'} onclick={() => (tab = 'tokens')}>
Tokens <span data-uix-tab-count>23</span>
Tokens <TokensTabCount component="tooltip" />
</button>
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
</div>

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.