diff --git a/scripts/__probe-audio-skin.ts b/scripts/__probe-audio-skin.ts new file mode 100644 index 000000000..148909342 --- /dev/null +++ b/scripts/__probe-audio-skin.ts @@ -0,0 +1,49 @@ +/** + * Sonda del SKIN de audio. La demo de media-player conmuta con el chip + * `audio` (prop `media`), y ahí entra `audio-player.css` sobre las MISMAS + * partes — por eso una sonda que sólo carga la página mide el modo vídeo y + * deja el skin sin medir. Recorre además las cuatro variantes. + */ +import { writeFileSync } from 'node:fs'; +import { chromium } from 'playwright'; + +const [out, url = 'http://localhost:5180/uix/components/media-player'] = process.argv.slice(2); +const PROPS = ['backgroundColor', 'backgroundImage', 'color', 'paddingTop', 'paddingLeft', 'rowGap', 'columnGap', 'fontSize', 'lineHeight', 'blockSize', 'inlineSize', 'borderTopColor', 'borderTopWidth', 'borderTopLeftRadius']; + +const browser = await chromium.launch(); +const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } }); +await page.goto(url, { waitUntil: 'networkidle' }); +await page.waitForTimeout(500); +await page.getByText('audio', { exact: true }).first().click(); +await page.waitForTimeout(300); + +const snapshot = async (label: string) => + page.evaluate( + ([keys, tag]) => { + const root = document.querySelector('[data-uix-stage]') ?? document.body; + const nodes = [...root.querySelectorAll('*')].filter((n) => + [...n.attributes].some((a) => a.name.startsWith('data-media-player')) + ); + const rows: Record> = {}; + nodes.forEach((n, i) => { + const cs = getComputedStyle(n); + const key = `${tag}:${i}:${[...n.attributes].map((a) => a.name).join('|')}`; + rows[key] = Object.fromEntries((keys as string[]).map((k) => [k, cs[k as never] as string])); + }); + return rows; + }, + [PROPS, label] as const + ); + +const all: Record = {}; +for (const variant of ['card', 'row', 'bar', 'inline']) { + const chip = page.getByText(variant, { exact: true }).first(); + if (await chip.count()) { + await chip.click(); + await page.waitForTimeout(200); + } + all[variant] = await snapshot(variant); + console.log(` ${variant}: ${Object.keys(all[variant] as object).length} nodos`); +} +writeFileSync(out, JSON.stringify(all, null, '\t')); +await browser.close(); diff --git a/src/uix/eidos/components/media-player/README.md b/src/uix/eidos/components/media-player/README.md index 2267405b9..b17e4dcc4 100644 --- a/src/uix/eidos/components/media-player/README.md +++ b/src/uix/eidos/components/media-player/README.md @@ -135,10 +135,13 @@ retirar los privados se migró también su receta. `R-5.1 exception: width/height: 100%` (media y póster llenan el marco) e `inline-size: max-content` en los paneles portalados — mecánica de layout. -**Nota de verificación**: `audio-player` **no tiene página de demo** (la ruta da -404), así que su skin no se puede medir con la sonda. Se verificó estampando -`data-variant` sobre el player vivo: el padding pasó a `6px 12px`, exactamente -los tokens. Es un hueco de demo, no de tokens. +**Cómo se mide el skin de audio**: no tiene ruta propia — `/uix/components/audio-player` +da 404 a propósito, porque **la demo es la de `media-player`** y el chip `media` +conmuta a audio, que es cuando entra ``. Una sonda que sólo +carga la página mide el modo VÍDEO y deja el skin sin tocar; por eso existe +`scripts/__probe-audio-skin.ts`, que pulsa el chip y recorre las cuatro +variantes (card · row · bar · inline). Medido así el 2026-08-20: **1.008 valores +en las cuatro variantes, 0 diffs** contra el commit anterior. ## Gaps