slidev-theme-practicum 0.3.0 → 0.4.0

package/scripts/typography-browser.mjs

@@ -0,0 +1,134 @@
+import { inspectTypography } from '../composables/typography-guard.cjs'
+
+export async function settleTypography(slide) {
+  await slide.evaluate(async (root) => {
+    const timeout = new Promise((_, reject) => setTimeout(
+      () => reject(new Error('Шрифты или изображения не загрузились за 5 секунд.')), 5_000,
+    ))
+    await Promise.race([
+      Promise.all([
+        document.fonts.ready,
+        ...[...root.querySelectorAll('img')].map(image => image.decode().catch(() => undefined)),
+      ]),
+      timeout,
+    ])
+    await new Promise((resolveStable, rejectStable) => {
+      const deadline = performance.now() + 5_000
+      let previous = ''
+      let stableFrames = 0
+      function observe() {
+        const signature = [...root.querySelectorAll('.Slot, .Slot-Content, .Text, .Text *')]
+          .map((element) => {
+            const style = getComputedStyle(element)
+            const rect = element.getBoundingClientRect()
+            return [element.className, element.textContent, style.fontSize, style.color,
+              rect.x, rect.y, rect.width, rect.height, element.scrollWidth, element.scrollHeight].join(':')
+          }).join('|')
+        stableFrames = signature === previous ? stableFrames + 1 : 0
+        previous = signature
+        if (stableFrames >= 8)
+          resolveStable()
+        else if (performance.now() >= deadline)
+          rejectStable(new Error('Типографика слайда не стабилизировалась за 5 секунд.'))
+        else
+          requestAnimationFrame(observe)
+      }
+      requestAnimationFrame(observe)
+    })
+  })
+}
+
+// Функция передаётся в браузер целиком, поэтому не использует внешние замыкания.
+export function collectRenderedTypography(root) {
+  const content = root.querySelector('.Slide-Grid') ?? root.querySelector('.slidev-layout') ?? root
+  const excluded = '.Slide-Header, .Header, .Logo, .Slot-Background, .ImageRenderer, svg, img, canvas, video, audio, script, style'
+  const slots = [...content.querySelectorAll('.Slot')]
+  const texts = []
+  const issues = []
+  const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT)
+  const canvas = document.createElement('canvas')
+  canvas.width = canvas.height = 1
+  const colorContext = canvas.getContext('2d', { willReadFrequently: true })
+  if (!colorContext)
+    throw new Error('Не удалось нормализовать вычисленные цвета в sRGB.')
+  const colors = new Map()
+
+  function normalizeColor(value) {
+    if (!colors.has(value)) {
+      colorContext.clearRect(0, 0, 1, 1)
+      colorContext.fillStyle = value
+      colorContext.fillRect(0, 0, 1, 1)
+      const [red, green, blue, alpha] = colorContext.getImageData(0, 0, 1, 1).data
+      colors.set(value, `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`)
+    }
+    return colors.get(value)
+  }
+
+  function visible(element) {
+    for (let current = element; current; current = current.parentElement) {
+      const style = getComputedStyle(current)
+      if (style.display === 'none' || style.visibility !== 'visible' || Number(style.opacity) === 0)
+        return false
+      if (current === root)
+        break
+    }
+    return true
+  }
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode
+    const element = node.parentElement
+    const text = node.textContent.replace(/\s+/gu, ' ').trim().slice(0, 100)
+    if (!text || !element || element.closest(excluded) || !visible(element))
+      continue
+    const range = document.createRange()
+    range.selectNodeContents(node)
+    const rects = [...range.getClientRects()].filter(rect => rect.width > 0 && rect.height > 0)
+    if (!rects.length)
+      continue
+    const slotElement = element.closest('.Slot')
+    const slot = slotElement ? `Slot ${slots.indexOf(slotElement) + 1}` : 'Слайд вне Slot'
+    const style = getComputedStyle(element)
+    const textElement = element.closest('.Text')
+    texts.push({
+      text,
+      slot,
+      size: `${Math.round(Number.parseFloat(style.fontSize) * 100) / 100}px`,
+      color: normalizeColor(style.color),
+      keyNumber: textElement?.tagName === 'DATA',
+      muted: Boolean(element.closest('.Text_muted, [data-text-color^="text-muted"]')),
+    })
+
+    // Проверяем также внешний Slot: вложенная композиция не должна вытекать из него.
+    for (let current = slotElement; current; current = current.parentElement?.closest('.Slot')) {
+      const boundsElement = current.querySelector(':scope > .Slot-Content') ?? current
+      const bounds = boundsElement.getBoundingClientRect()
+      const scaleY = current.getBoundingClientRect().height / current.offsetHeight || 1
+      const lineHeight = Number.parseFloat(style.lineHeight) * scaleY
+      const overflow = Math.max(0, ...rects.flatMap((rect) => {
+        // Range включает метрики шрифта за пределами CSS-строки даже у
+        // корректного заголовка. По вертикали проверяем именно строку.
+        const leading = Number.isFinite(lineHeight) ? Math.max(0, rect.height - lineHeight) / 2 : 0
+        return [
+          bounds.left - rect.left, rect.right - bounds.right,
+          bounds.top - rect.top - leading, rect.bottom - leading - bounds.bottom,
+        ]
+      }))
+      if (overflow > 1) {
+        issues.push({
+          code: 'text-overflow',
+          message: `Slot ${slots.indexOf(current) + 1}: «${text}» выходит за границы текста слота на ${overflow.toFixed(1)} px.`,
+          hint: 'Сократите текст или измените композицию, сохранив число размеров.',
+        })
+        break
+      }
+    }
+  }
+  return { texts, issues }
+}
+
+export async function inspectRenderedTypography(slide) {
+  await settleTypography(slide)
+  const { texts, issues } = await slide.evaluate(collectRenderedTypography)
+  return { textCount: texts.length, issues: [...issues, ...inspectTypography(texts)] }
+}

package/scripts/validate-deck.cjs

@@ -1,12 +1,32 @@
 #!/usr/bin/env node
 const { resolve } = require('node:path')
+const { parseArgs } = require('node:util')
 const { formatDeckLayoutIssues, validateDeckLayouts } = require('../composables/validate-deck-layouts.cjs')
 
-const deckPath = resolve(process.argv[2] ?? 'example.md')
+const { values, positionals } = parseArgs({
+  allowPositionals: true,
+  options: {
+    'typography-guard': { type: 'boolean', default: false },
+    'help': { type: 'boolean', short: 'h' },
+  },
+})
+if (values.help) {
+  console.log('Использование: slidev-practicum-validate [slides.md] [--typography-guard]\n'
+    + '--typography-guard проверяет объявленные политики Text. Фактический результат проверяйте командой slidev-practicum-check-typography.')
+  process.exit(0)
+}
+if (positionals.length > 1) {
+  console.error('Укажите один файл колоды.')
+  process.exit(1)
+}
+const deckPath = resolve(positionals[0] ?? 'example.md')
+const typographyGuard = values['typography-guard']
 
-validateDeckLayouts(deckPath).then((issues) => {
+validateDeckLayouts(deckPath, { typographyGuard }).then((issues) => {
   if (!issues.length) {
     console.log(`OK: ${deckPath} — контракты макетов, Markdown и локальных вариантов соблюдены.`)
+    if (typographyGuard)
+      console.log('Объявленные политики Text соблюдены. Для размеров после подбора, Markdown и компонентов выполните slidev-practicum-check-typography.')
     process.exit(0)
   }
 

package/skills/slidev-practicum/SKILL.md

@@ -22,6 +22,7 @@ description: Используй для Slidev-презентаций, фотог
 - Внутри этого репозитория используй `theme: ./`.
 - Во внешней колоде с установленным пакетом используй `theme: practicum`.
 - Пиши по-русски, если пользователь не попросил другой язык.
+- Если для колоды выбрана строгая типографика, прочитай раздел README темы «Строгая проверка типографики», включая пример слайда и порядок работы агента. Во внешней колоде источник — `node_modules/slidev-theme-practicum/README.md`. Проверяй объявления через `npm exec -- slidev-practicum-validate slides.md --typography-guard`, затем фактический результат свежей сборки через `npm exec -- slidev-practicum-check-typography slides.md --dist dist`. Отмечай ключевые числа явно через `Text as="data"`, не назначай это исключение датам и номерам шагов автоматически. Не считай статическую проверку достаточной для Markdown, динамических атрибутов и автоматического подбора размеров. После исправлений пересобери колоду и повтори проверки по порядку из README.
 - Выбирай тип слайда по задаче кадра, следуя `README.md`.
 - Используй верхнеуровневый `title` только в первом headmatter как служебное название всей колоды. Не считай его видимым содержимым: пиши основной заголовок каждого кадра в теле слайда как Markdown `# …`, а для явной композиции — как видимый `<Text as="h1">…</Text>`. Вложенные `title` моделей компонентов сохраняй по контракту варианта.
 - Для повторяющейся композиции конкретной колоды без Vue-тегов в `slides.md` используй `components/layout-variants/<layout>/<variant>.vue` и существующие поля front matter `layout` + `variant`; точный контракт бери из раздела README «Локальные варианты презентации».

package/styles/index.css

@@ -1,32 +1,5 @@
 @import './vars.css';
 
-@font-face {
-  font-family: 'YS Text';
-  src: url('https://yastatic.net/s3/home/fonts/ys/4/text-regular.woff2') format('woff2'),
-    url('https://yastatic.net/s3/home/fonts/ys/4/text-regular.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'YS Text';
-  src: url('https://yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff2') format('woff2'),
-    url('https://yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff') format('woff');
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'YS Text';
-  src: url('https://yastatic.net/s3/home/fonts/ys/4/text-bold.woff2') format('woff2'),
-    url('https://yastatic.net/s3/home/fonts/ys/4/text-bold.woff') format('woff');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
 html,
 body,
 #slide-content,
@@ -131,6 +104,13 @@ body,
   text-underline-offset: auto;
 }
 
+.slidev-layout :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
+  outline-color: var(--theme-text);
+  outline-style: solid;
+  outline-width: var(--theme-focus-width);
+  outline-offset: var(--theme-focus-offset);
+}
+
 .slidev-layout strong,
 .slidev-layout b {
   font-weight: 600;
@@ -199,3 +179,16 @@ body,
 .slidev-layout .slidev-code-line.line-highlighted {
   background: var(--theme-inline-code-bg);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .slidev-layout,
+  .slidev-layout *,
+  .slidev-layout *::before,
+  .slidev-layout *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+  }
+}

package/styles/vars.css

@@ -22,6 +22,8 @@
   --theme-grid-span-12-width: calc((var(--theme-cell-width) * 12) + (var(--theme-grid-gap) * 11));
 
   --theme-stroke-thin: 1px;
+  --theme-focus-width: 3px;
+  --theme-focus-offset: 3px;
   --theme-space-flow: calc(var(--theme-grid-module) * 2);
   --theme-radius-inline-code: var(--theme-grid-module);
   --theme-slot-margin-1: calc(var(--theme-grid-module) * 1);
@@ -41,7 +43,7 @@
   --theme-margin-bottom: calc(var(--theme-grid-module) * 3);
   --theme-margin-left: calc(var(--theme-grid-module) * 3);
 
-  --theme-font-sans: 'YS Text', Inter, sans-serif;
+  --theme-font-sans: 'YS Text', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-font-mono: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
 
   --theme-text-size-0: calc(var(--theme-grid-module) * 2);
@@ -75,7 +77,7 @@
   --theme-color-light-1: #f0f0f0;
   --theme-color-dark-0: #1e1e1e;
   --theme-color-dark-1: #3c3c3c;
-  --theme-color-dark-2: #969696;
+  --theme-color-dark-2: #646464;
   --theme-color-blue-0: #027ef2;
   --theme-color-blue-1: #98d2fe;
   --theme-color-orange-0: #ff6c26;
@@ -91,9 +93,11 @@
   --theme-text: var(--theme-color-dark-0);
   --theme-text-muted: var(--theme-color-dark-2);
   --theme-text-on-dark: var(--theme-color-light-0);
+  --theme-text-on-color: var(--theme-color-light-0);
   --theme-border-subtle: color-mix(in srgb, var(--theme-color-dark-2) 22%, transparent);
   --theme-current-color: var(--theme-color-blue-0);
   --theme-text-muted-on-contrast: color-mix(in srgb, var(--theme-color-light-0) 72%, transparent);
+  --theme-text-muted-on-color: var(--theme-color-light-0);
   --theme-link: var(--theme-current-color);
 
   --theme-code-bg: var(--theme-color-light-1);