slidev-theme-practicum 0.1.3 → 0.2.0

package/README.md

@@ -58,8 +58,11 @@ theme: practicum
 | Объяснить понятие, ситуацию или решение | Поясняющий слайд (`explainer`)             | Заголовок и связное пояснение                      |
 | Дать большой текстовый блок с разметкой | Текстовый блок (`explainer`, `title-body`) | Абзац, затем короткий список или критерий          |
 | Показать план, правила или шаги         | Коллекцию (`collection`)                   | Однотипные пункты в одном формате                  |
+| Сопоставить два состояния или подхода   | Сравнение (`collection`, `comparison`)     | Две стороны с самостоятельными заголовками         |
+| Показать последовательность действий    | Шаги (`collection`, `steps`)               | От 3 до 6 коротких действий                        |
 | Показать события во времени             | Таймлайн (`collection`, `timeline`)        | Годы или месяцы и короткие подписи                 |
 | Показать несколько чисел                | Метрики (`collection`, `metrics`)          | Главное число и подписи, которые объясняют масштаб |
+| Дать четыре пронумерованные опоры        | Факты (`collection`, `facts`)              | Четыре значения с вложенными подписями             |
 | Собрать нестандартную композицию        | Ручную сетку (`none`)                      | Только когда обычные типы не выражают задачу       |
 
 ## Что писать
@@ -108,6 +111,94 @@ layout: cover | message | explainer | collection | none
 
 `layout: cover` markdown shorthand **не** имеет: для всех `cover:*` нужны явные `<Slot role="...">` и `<Text>` (см. обложки в [example.md](example.md)).
 
+### Варианты collection P0
+
+| `variant`     | `arrangement`      | Контракт |
+| ------------- | ------------------ | -------- |
+| `comparison`  | `before-after`     | Markdown heading; `comparison.from` и `comparison.to` с обязательным `title`; необязательные `kicker`, `body` и `relation.label` |
+| `comparison`  | `stable-variable`  | Тот же контракт; вертикальное направление задаёт arrangement |
+| `steps`       | `linear`           | Markdown heading; `items` из 3–6 объектов с обязательным `title`, необязательными `body`, `label`; не больше одного `active: true` |
+| `steps`       | `staggered`        | Тот же контракт, но ровно 5 элементов |
+| `metrics`     | `dashboard`        | Markdown heading; ровно 5 `metrics` с обязательными `value` и одним из `body`, `label`, `title`; без `media` и произвольных spans |
+| `facts`       | `numbered-quartet` | Markdown heading; ровно 4 пункта вида «значение → вложенная подпись»; номера 1–4 добавляет тема |
+
+Канонический alias для пронумерованных фактов — `variant: facts-numbered-quartet`. Для остальных вариантов также можно использовать aliases `comparison-before-after`, `comparison-stable-variable`, `steps-linear`, `steps-staggered` и `metrics-dashboard` без `arrangement`.
+
+Минимальное сравнение:
+
+```md
+---
+layout: collection
+variant: comparison
+arrangement: before-after
+comparison:
+  from:
+    title: Ручная проверка
+  to:
+    title: Единый контур
+relation:
+  label: переход
+---
+
+# Как меняется процесс
+```
+
+Минимальные шаги:
+
+```md
+---
+layout: collection
+variant: steps
+arrangement: linear
+items:
+  - title: Собрать входы
+  - title: Проверить риски
+    active: true
+  - title: Зафиксировать результат
+---
+
+# Три шага
+```
+
+Минимальный dashboard:
+
+```md
+---
+layout: collection
+variant: metrics
+arrangement: dashboard
+metrics:
+  - { value: 42%, label: прошли сценарий }
+  - { value: 18, label: команд }
+  - { value: 9, label: проверок }
+  - { value: 2×, label: быстрее обратная связь }
+  - { value: 0, label: ручных spans }
+---
+
+# Панель результата
+```
+
+Минимальный `numbered-quartet`:
+
+```md
+---
+layout: collection
+variant: facts
+arrangement: numbered-quartet
+---
+
+# Четыре опоры
+
+- Входы
+  - собраны до старта
+- Риски
+  - проверены явно
+- Результат
+  - сохранён в репозитории
+- Стоп
+  - задан до запуска
+```
+
 | Слой          | Для чего                                         |
 | ------------- | ------------------------------------------------ |
 | `layout`      | семантика слайда на уровне Slidev                |

package/components/Slide.vue

@@ -366,6 +366,75 @@ const slideClass = computed(() => ({
   justify-content: flex-start;
 }
 
+:deep(.Slide-ComparisonRelation) {
+  display: flex;
+  min-width: 0;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--theme-grid-module) * 2);
+  text-align: center;
+}
+
+:deep(.Slide-ComparisonDirection) {
+  font-size: var(--theme-text-size-5);
+  line-height: var(--theme-text-line-5);
+}
+
+:deep(.Slide-StepsGrid) {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  grid-template-columns: repeat(var(--slide-steps-count), minmax(0, 1fr));
+  gap: var(--theme-grid-gap);
+}
+
+:deep(.Slide-Step) {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  gap: calc(var(--theme-grid-module) * 2);
+  padding: var(--theme-slot-margin-3);
+  border-radius: var(--theme-panel-radius);
+  background: var(--theme-surface-light);
+}
+
+:deep(.Slide-StepsGrid_staggered) {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+:deep(.Slide-StepsGrid_staggered .Slide-Step:nth-child(1)) {
+  grid-area: 1 / 1 / 2 / 3;
+}
+
+:deep(.Slide-StepsGrid_staggered .Slide-Step:nth-child(2)) {
+  grid-area: 1 / 3 / 2 / 5;
+}
+
+:deep(.Slide-StepsGrid_staggered .Slide-Step:nth-child(3)) {
+  grid-area: 1 / 5 / 2 / 7;
+}
+
+:deep(.Slide-StepsGrid_staggered .Slide-Step:nth-child(4)) {
+  grid-area: 2 / 2 / 3 / 4;
+}
+
+:deep(.Slide-StepsGrid_staggered .Slide-Step:nth-child(5)) {
+  grid-area: 2 / 4 / 3 / 6;
+}
+
+:deep(.Slide-Step_active) {
+  background: var(--theme-current-color);
+  color: var(--theme-text-on-dark);
+  --theme-text: var(--theme-text-on-dark);
+  --theme-text-muted: var(--theme-text-muted-on-contrast);
+}
+
 :deep(.Slide-Quote) {
   max-width: var(--theme-grid-span-11-width);
   font-size: var(--theme-text-size-7);

package/composables/decor-catalog.mjs

@@ -159,7 +159,6 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
       x: '50%',
       y: '12%',
       zoom: 3,
-      color: 'var(--theme-color-dark-0)',
       opacity: 1,
     },
   },

package/composables/layout-recipes.ts

@@ -239,6 +239,46 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
         ],
       },
     },
+    {
+      content: 'comparison',
+      aliases: [{ variant: 'comparison-before-after' }, { variant: 'comparison', arrangement: 'before-after' }],
+      regions: {
+        primary: '1 / 1 / 4 / -1',
+        secondary: [
+          { area: '4 / 1 / -1 / 6', surface: 'light', margin: 4 },
+          { area: '4 / 8 / -1 / -1', surface: 'light', margin: 4 },
+        ],
+        support: { area: '4 / 6 / -1 / 8', centered: true },
+      },
+    },
+    {
+      content: 'comparison',
+      aliases: [{ variant: 'comparison-stable-variable' }, { variant: 'comparison', arrangement: 'stable-variable' }],
+      regions: {
+        primary: '1 / 1 / 4 / -1',
+        secondary: [
+          { area: '4 / 1 / 8 / -1', surface: 'light', margin: 4 },
+          { area: '9 / 1 / -1 / -1', surface: 'light', margin: 4 },
+        ],
+        support: { area: '8 / 1 / 9 / -1', centered: true },
+      },
+    },
+    {
+      content: 'steps',
+      aliases: [{ variant: 'steps-linear' }, { variant: 'steps', arrangement: 'linear' }],
+      regions: {
+        primary: '1 / 1 / 4 / -1',
+        support: '4 / 1 / -1 / -1',
+      },
+    },
+    {
+      content: 'steps',
+      aliases: [{ variant: 'steps-staggered' }, { variant: 'steps', arrangement: 'staggered' }],
+      regions: {
+        primary: '1 / 1 / 4 / -1',
+        support: '4 / 1 / -1 / -1',
+      },
+    },
     {
       content: 'metrics',
       aliases: [{ variant: 'metrics-featured-media' }, { variant: 'metrics', arrangement: 'featured-media' }],
@@ -251,6 +291,20 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
         ],
       },
     },
+    {
+      content: 'metrics',
+      aliases: [{ variant: 'metrics-dashboard' }, { variant: 'metrics', arrangement: 'dashboard' }],
+      regions: {
+        primary: '1 / 1 / 4 / -1',
+        support: [
+          { area: '4 / 1 / 8 / 5', surface: 'light', margin: 3 },
+          { area: '4 / 5 / 8 / 9', surface: 'light', margin: 3 },
+          { area: '4 / 9 / 8 / -1', surface: 'light', margin: 3 },
+          { area: '8 / 1 / -1 / 7', surface: 'light', margin: 3 },
+          { area: '8 / 7 / -1 / -1', surface: 'light', margin: 3 },
+        ],
+      },
+    },
     {
       content: 'metrics',
       aliases: [{ variant: 'metrics-featured-copy' }, { variant: 'metrics', arrangement: 'featured-copy' }],
@@ -335,6 +389,19 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
         ],
       },
     },
+    {
+      content: 'facts',
+      aliases: [{ variant: 'facts-numbered-quartet' }, { variant: 'facts', arrangement: 'numbered-quartet' }],
+      regions: {
+        primary: '1 / 1 / 4 / -1',
+        support: [
+          { area: '4 / 1 / 8 / 7', surface: 'light', margin: 3 },
+          { area: '4 / 7 / 8 / -1', surface: 'light', margin: 3 },
+          { area: '8 / 1 / -1 / 7', surface: 'light', margin: 3 },
+          { area: '8 / 7 / -1 / -1', surface: 'light', margin: 3 },
+        ],
+      },
+    },
     {
       content: 'facts',
       aliases: [{ variant: 'facts-featured' }, { variant: 'facts', arrangement: 'featured' }],

package/composables/layout-shorthands.ts

@@ -136,6 +136,7 @@ function hText(
     priority?: 1 | 2 | 3
     align?: 'start' | 'middle' | 'end'
     className?: string
+    color?: 'light-0'
     typography?: 'compact'
   } = {},
 ) {
@@ -147,6 +148,7 @@ function hText(
     priority?: 1 | 2 | 3
     align?: 'start' | 'middle' | 'end'
     class?: string
+    color?: 'light-0'
   } & {
     'data-typography'?: 'compact'
   } = {
@@ -164,6 +166,8 @@ function hText(
     textProps.align = options.align
   if (options.className)
     textProps.class = options.className
+  if (options.color)
+    textProps.color = options.color
   if (options.typography)
     textProps['data-typography'] = options.typography
 
@@ -358,6 +362,7 @@ const FACTS_VARIANT_COUNTS: Record<string, number> = {
   'facts-duo': 2,
   'facts-trio': 3,
   'facts-quartet': 4,
+  'facts-numbered-quartet': 4,
   'facts-stacked': 3,
   'facts-featured': 3,
 }
@@ -726,6 +731,166 @@ function buildPointsChildren(children: VNode[], context: LayoutShorthandContext)
   ]
 }
 
+type ComparisonSide = {
+  title: string
+  kicker: string
+  body: string
+}
+
+function normalizeComparisonSide(
+  value: unknown,
+  side: 'from' | 'to',
+): ComparisonSide {
+  if (typeof value !== 'object' || value === null || Array.isArray(value))
+    failMarkdownContract('collection:comparison', `ожидает object в comparison.${side}.`)
+
+  const record = value as Record<string, unknown>
+  const title = readRecordText(record, ['title'])
+
+  if (!title)
+    failMarkdownContract('collection:comparison', `ожидает обязательный title в comparison.${side}.`)
+
+  return {
+    title,
+    kicker: readRecordText(record, ['kicker']),
+    body: readRecordText(record, ['body']),
+  }
+}
+
+function buildComparisonSideChildren(
+  context: LayoutShorthandContext,
+  side: ComparisonSide,
+  index: number,
+) {
+  return hSlot(context, 'secondary', `slide-collection-${context.variant}-side-${index + 1}`, {
+    gap: '3',
+  }, [
+    ...(side.kicker
+      ? [hText(context, 'div', '2', side.kicker, { priority: 3, muted: true })]
+      : []),
+    hText(context, 'div', '5-7', side.title, { priority: 1 }),
+    ...(side.body
+      ? [hText(context, 'div', '3-4', side.body, { priority: 2, muted: true })]
+      : []),
+  ])
+}
+
+function buildComparisonChildren(children: VNode[], context: LayoutShorthandContext) {
+  const title = readHeadingText(children, 'collection:comparison')
+  const comparison = context.readFrontmatterObject('comparison')
+
+  if (!comparison)
+    failMarkdownContract('collection:comparison', 'ожидает frontmatter comparison с полями from и to.')
+
+  const relation = context.readFrontmatterObject('relation')
+  const from = normalizeComparisonSide(comparison.from, 'from')
+  const to = normalizeComparisonSide(comparison.to, 'to')
+  const relationLabel = relation ? readRecordText(relation, ['label']) : ''
+  const isBeforeAfter = context.variant === 'comparison-before-after'
+
+  ensureOnlySupportedChildren('collection:comparison', children, node =>
+    node === title.node
+    || isBlankTextNode(node),
+  )
+
+  return [
+    hSlot(context, 'primary', `slide-collection-${context.variant}-primary`, {}, [
+      hText(context, 'h1', '6', title.text),
+    ]),
+    buildComparisonSideChildren(context, from, 0),
+    buildComparisonSideChildren(context, to, 1),
+    hSlot(context, 'support', `slide-collection-${context.variant}-relation`, {}, [
+      h('div', {
+        class: [
+          'Slide-ComparisonRelation',
+          `Slide-ComparisonRelation_${isBeforeAfter ? 'horizontal' : 'vertical'}`,
+        ],
+      }, [
+        h('span', { 'class': 'Slide-ComparisonDirection', 'aria-hidden': 'true' }, isBeforeAfter ? '→' : '↓'),
+        ...(relationLabel
+          ? [hText(context, 'div', '2-3', relationLabel, { align: 'middle', muted: true })]
+          : []),
+      ]),
+    ]),
+  ]
+}
+
+type StepItem = {
+  title: string
+  body: string
+  label: string
+  active: boolean
+}
+
+function normalizeStepItems(context: LayoutShorthandContext): StepItem[] {
+  const items = context.readFrontmatterArray('items')
+  const isStaggered = context.variant === 'steps-staggered'
+
+  if (items.length < 3 || items.length > 6)
+    failMarkdownContract('collection:steps', 'ожидает от 3 до 6 элементов во frontmatter items.')
+
+  if (isStaggered && items.length !== 5)
+    failMarkdownContract('collection:steps', 'arrangement: staggered ожидает ровно 5 элементов.')
+
+  const normalized = items.map((item, index) => {
+    if (typeof item !== 'object' || item === null || Array.isArray(item))
+      failMarkdownContract('collection:steps', `ожидает object item в items[${index}].`)
+
+    const record = item as Record<string, unknown>
+    const title = readRecordText(record, ['title'])
+
+    if (!title)
+      failMarkdownContract('collection:steps', `ожидает обязательный title в items[${index}].`)
+
+    return {
+      title,
+      body: readRecordText(record, ['body']),
+      label: readRecordText(record, ['label']) || String(index + 1),
+      active: record.active === true,
+    }
+  })
+
+  if (normalized.filter(item => item.active).length > 1)
+    failMarkdownContract('collection:steps', 'поддерживает не больше одного элемента с active: true.')
+
+  return normalized
+}
+
+function buildStepsChildren(children: VNode[], context: LayoutShorthandContext) {
+  const title = readHeadingText(children, 'collection:steps')
+  const items = normalizeStepItems(context)
+  const arrangement = context.variant === 'steps-staggered' ? 'staggered' : 'linear'
+
+  ensureOnlySupportedChildren('collection:steps', children, node =>
+    node === title.node
+    || isBlankTextNode(node),
+  )
+
+  return [
+    hSlot(context, 'primary', `slide-collection-${context.variant}-primary`, {}, [
+      hText(context, 'h1', '6', title.text),
+    ]),
+    hSlot(context, 'support', `slide-collection-${context.variant}-support`, {}, [
+      h('div', {
+        'class': ['Slide-StepsGrid', `Slide-StepsGrid_${arrangement}`],
+        'data-count': String(items.length),
+        'style': { '--slide-steps-count': items.length },
+      }, items.map((item, index) =>
+        h('article', {
+          'class': ['Slide-Step', item.active ? 'Slide-Step_active' : ''],
+          'data-index': String(index + 1),
+        }, [
+          hText(context, 'div', '2', item.label, { muted: !item.active }),
+          hText(context, 'div', '4-5', item.title, { priority: 1 }),
+          ...(item.body
+            ? [hText(context, 'div', '2-3', item.body, { priority: 2, muted: true })]
+            : []),
+        ]),
+      )),
+    ]),
+  ]
+}
+
 function normalizeTimelineItems(context: LayoutShorthandContext) {
   const items = context.readFrontmatterArray('items')
 
@@ -804,6 +969,32 @@ function normalizeMetricItems(context: LayoutShorthandContext) {
   })
 }
 
+function normalizeDashboardMetrics(context: LayoutShorthandContext) {
+  const metrics = context.readFrontmatterArray('metrics')
+
+  if (metrics.length !== 5)
+    failMarkdownContract('collection:metrics', 'arrangement: dashboard ожидает ровно 5 элементов во frontmatter metrics.')
+
+  return metrics.map((item, index) => {
+    if (typeof item !== 'object' || item === null || Array.isArray(item))
+      failMarkdownContract('collection:metrics', `ожидает object item в metrics[${index}].`)
+
+    const record = item as Record<string, unknown>
+    const value = readRecordText(record, ['value'])
+    const label = readRecordText(record, ['body', 'label', 'title'])
+    const hasArbitrarySpan = ['area', 'col', 'row', 'span', 'colSpan', 'rowSpan']
+      .some(key => record[key] !== undefined)
+
+    if (!value || !label)
+      failMarkdownContract('collection:metrics', `ожидает value и body/label/title в metrics[${index}].`)
+
+    if (hasArbitrarySpan)
+      failMarkdownContract('collection:metrics', `не принимает произвольные координаты или spans в metrics[${index}].`)
+
+    return { value, label }
+  })
+}
+
 function normalizeMetricItemsFromList(list: VNode) {
   const entries = readNestedListItems(list, 'collection:metrics')
 
@@ -841,6 +1032,32 @@ function normalizeMediaItems(context: LayoutShorthandContext) {
 }
 
 function buildMetricsChildren(children: VNode[], context: LayoutShorthandContext) {
+  if (context.variant === 'metrics-dashboard') {
+    const title = readHeadingText(children, 'collection:metrics')
+    const metrics = normalizeDashboardMetrics(context)
+    const fitGroup = 'collection-metrics-dashboard'
+
+    ensureOnlySupportedChildren('collection:metrics', children, node =>
+      node === title.node
+      || isBlankTextNode(node),
+    )
+
+    return [
+      hSlot(context, 'primary', 'slide-collection-metrics-dashboard-primary', {}, [
+        hText(context, 'h1', '6', title.text),
+      ]),
+      ...metrics.map((metric, index) =>
+        hSlot(context, 'support', `slide-collection-metrics-dashboard-support-${index + 1}`, {
+          fitGroup,
+          gap: '2',
+        }, [
+          hText(context, 'div', index < 3 ? '5-7' : '6-8', metric.value, { priority: 1 }),
+          hText(context, 'div', '2-4', metric.label, { priority: 2, muted: true, typography: 'compact' }),
+        ]),
+      ),
+    ]
+  }
+
   const list = children.find(isListNode)
 
   ensureOnlySupportedChildren('collection:metrics', children, node =>
@@ -964,7 +1181,8 @@ function buildFactsChildren(children: VNode[], context: LayoutShorthandContext)
   const isStacked = context.variant === 'facts-stacked'
   const isDuo = context.variant === 'facts-duo'
   const isQuartet = context.variant === 'facts-quartet'
-  const shouldCoordinateFactSizes = isStacked || isDuo || context.variant === 'facts-trio' || isQuartet
+  const isNumberedQuartet = context.variant === 'facts-numbered-quartet'
+  const shouldCoordinateFactSizes = isStacked || isDuo || context.variant === 'facts-trio' || isQuartet || isNumberedQuartet
   const factFitGroup = shouldCoordinateFactSizes ? `collection-${context.variant}-facts` : ''
   const supportFactFitGroup = isFeatured ? `collection-${context.variant}-support-facts` : factFitGroup
   const headingText = readInlineText(heading)
@@ -997,6 +1215,24 @@ function buildFactsChildren(children: VNode[], context: LayoutShorthandContext)
   if (footnoteText && !factFitGroup)
     featuredChildren.push(hText(context, 'div', '2-3', footnoteText, { priority: 3, muted: true }))
 
+  if (isNumberedQuartet) {
+    return [
+      hSlot(context, 'primary', 'slide-collection-facts-numbered-quartet-primary', { gap: '3' }, primaryChildren),
+      ...facts.map((fact, index) =>
+        hSlot(context, 'support', `slide-collection-facts-numbered-quartet-support-${index + 1}`, {
+          gap: '2',
+          fitGroup: factFitGroup,
+        }, [
+          hText(context, 'div', '4', String(index + 1), {
+            priority: 1,
+          }),
+          hText(context, 'div', '4', fact.value, { priority: 1, align: 'end' }),
+          hText(context, 'div', '2-3', fact.label, { priority: 2, muted: true }),
+        ]),
+      ),
+    ]
+  }
+
   return [
     hSlot(context, 'primary', `slide-collection-${context.variant}-primary`, { gap: '3' }, primaryChildren),
     hSlot(context, 'support', `slide-collection-${context.variant}-support-1`, {
@@ -1018,16 +1254,22 @@ function buildFactsChildren(children: VNode[], context: LayoutShorthandContext)
 
 const LAYOUT_SHORTHANDS = {
   'collection:agenda': buildAgendaChildren,
+  'collection:comparison-before-after': buildComparisonChildren,
+  'collection:comparison-stable-variable': buildComparisonChildren,
   'collection:facts-stacked': buildFactsChildren,
   'collection:facts-duo': buildFactsChildren,
   'collection:facts-trio': buildFactsChildren,
   'collection:facts-quartet': buildFactsChildren,
+  'collection:facts-numbered-quartet': buildFactsChildren,
   'collection:facts-featured': buildFactsChildren,
   'collection:points-trio': buildPointsChildren,
+  'collection:steps-linear': buildStepsChildren,
+  'collection:steps-staggered': buildStepsChildren,
   'collection:timeline': buildTimelineChildren,
   'collection:metrics-featured-media': buildMetricsChildren,
   'collection:metrics-featured-copy': buildMetricsChildren,
   'collection:metrics-featured-copy-split-media': buildMetricsChildren,
+  'collection:metrics-dashboard': buildMetricsChildren,
   'message:centered': buildCenteredChildren,
   'message:quote': buildQuoteChildren,
   'message:closing': buildClosingChildren,

package/example.md

@@ -306,9 +306,6 @@ variant: title-supports-bottom-plain
 # Когда нужны два самостоятельных абзаца
 
 - Этот вариант снимает приглушение с нижних опор. Каждый абзац читается как самостоятельный текст: его не воспринимают как «второстепенный к заголовку», а ставят рядом по весу.
-  - авава
-  - ава
-  авава
 - Берите слайд, когда тезис распадается на два независимых направления: например, «что включить» и «чего избегать», «теория» и «практика», «причина» и «следствие». Третий блок не нужен — два аргумента уже задают сильную смысловую пару.
 
 ---
@@ -467,10 +464,143 @@ decor:
 
 # Оранжевый тон: акцент
 
-1. Выносите важный поворот или предупреждение
+1. Подсвечивайте один критический поворот
 2. Не окрашивайте им весь ряд одинаковых фактов
 3. Оставляйте рядом достаточно воздуха
 
+---
+layout: collection
+variant: comparison
+arrangement: before-after
+comparison:
+  from:
+    kicker: До разбора
+    title: «Я просто запомнил формулу»
+    body: Ответ верный, но ученик не может объяснить выбор метода.
+  to:
+    kicker: После разбора
+    title: «Я выбрал формулу по условию»
+    body: Ученик связывает данные, метод и проверку результата.
+relation:
+  label: объяснить ход мысли
+---
+
+<!-- Контракт: comparison before-after — заголовок в Markdown, две стороны и связь во frontmatter. -->
+
+# Как обратная связь превращает ответ в решение
+
+---
+layout: collection
+variant: comparison
+arrangement: stable-variable
+comparison:
+  from:
+    kicker: Сохраняем
+    title: Научиться проверять гипотезу
+    body: Результат занятия остаётся общим для любой группы.
+  to:
+    kicker: Меняем
+    title: Данные и уровень подсказок
+    body: Контекст и поддержка зависят от опыта студентов.
+relation:
+  label: одна цель, разные маршруты
+---
+
+<!-- Контракт: comparison stable-variable — тот же shorthand, но вертикальная связь. -->
+
+# Как адаптировать практику, сохраняя учебную цель
+
+---
+layout: collection
+variant: steps
+arrangement: linear
+items:
+  - title: Назвать цель
+    body: Что студент сделает сам
+  - title: Дать контекст
+    body: Где возникает задача
+  - title: Показать пример
+    body: Один разобранный ход
+  - title: Оставить практику
+    body: Задание без подсказки
+  - title: Проверить критерий
+    body: Видимый признак качества
+    active: true
+  - title: Закрепить вывод
+    body: Что перенести дальше
+---
+
+<!-- Контракт: steps linear — ровно 6 шагов во frontmatter, один из них active. -->
+
+# Шесть шагов учебного объяснения
+
+---
+layout: collection
+variant: steps
+arrangement: staggered
+items:
+  - label: Сигнал
+    title: Заметить сбой
+    body: Зафиксировать наблюдение
+  - label: Факт
+    title: Повторить шаг
+    body: Отделить случайность
+  - label: Причина
+    title: Найти правило
+    body: Объяснить механизм
+    active: true
+  - label: Решение
+    title: Изменить подход
+    body: Проверить новый ход
+  - label: Перенос
+    title: Записать вывод
+    body: Применить в другой задаче
+---
+
+<!-- Контракт: steps staggered — ровно 5 шагов во frontmatter для ритма 3+2. -->
+
+# Как команда разбирает ошибку
+
+---
+layout: collection
+variant: metrics
+arrangement: dashboard
+metrics:
+  - value: '84%'
+    label: завершили тренажёр
+  - value: '18 мин'
+    label: медиана выполнения
+  - value: '3'
+    label: попытки до зачёта
+  - value: '12'
+    label: вопросов разобрали
+  - value: '+21 п. п.'
+    label: к входной диагностике
+---
+
+<!-- Контракт: metrics dashboard — ровно 5 метрик во frontmatter, без media и ручных spans. -->
+
+# Что изменилось после практикума
+
+---
+layout: collection
+variant: facts
+arrangement: numbered-quartet
+---
+
+<!-- Контракт: facts numbered-quartet — заголовок и 4 вложенных Markdown-факта; номера добавляет тема. -->
+
+# Четыре вопроса перед публикацией задания
+
+- Цель
+  - Что студент сделает самостоятельно
+- Контекст
+  - Почему задача нужна именно сейчас
+- Критерий
+  - Как выглядит проверяемый результат
+- Обратная связь
+  - Что поможет улучшить следующую попытку
+
 ---
 layout: collection
 variant: metrics
@@ -717,7 +847,7 @@ header: default
 </Slot>
 
 <Slot area="6 / 1 / -1 / 7" surface="color" tone="orange" margin="4" gap="2">
-  <Text size="5">Цветная поверхность</Text>
+  <Text size="5">Акцентная поверхность</Text>
   <Text size="3">Слот целиком красится в текущий акцентный цвет — для смыслового выделения.</Text>
 </Slot>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-practicum",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Strict Slidev presentation theme with a 12x12 grid, editorial layouts, and low-level slot composition API",
   "keywords": [
     "slidev-theme",

package/scripts/browser-smoke.mjs

@@ -10,8 +10,9 @@ import {
 
 const PROJECT_ROOT = resolve(import.meta.dirname, '..')
 const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
-const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 32, 40, 41]
+const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 38, 46, 47]
 const VISUAL_ONLY_SLIDES = [17, 18]
+const P0_REGRESSION_SLIDES = [23, 24, 25, 26, 27, 28]
 const LIFECYCLE_EVENT = 'practicum:slide-lifecycle'
 const LIFECYCLE_STATE_KEY = '__practicumBrowserLifecycle'
 const THEME_MEDIA = [
@@ -168,6 +169,88 @@ async function assertClosingLayout(slide, slideNumber, expectedTextCount) {
   )
 }
 
+async function assertStaggeredStepsLayout(slide, slideNumber) {
+  const grid = slide.locator('.Slide-StepsGrid_staggered')
+  const cards = grid.locator(':scope > .Slide-Step')
+  const cardCount = await cards.count()
+
+  assert.equal(cardCount, 5, `слайд ${slideNumber}: staggered должен содержать ровно 5 карточек`)
+
+  const [gridBox, cardBoxes, placements] = await Promise.all([
+    grid.boundingBox(),
+    Promise.all(Array.from({ length: cardCount }, (_, index) => cards.nth(index).boundingBox())),
+    cards.evaluateAll(elements => elements.map((element) => {
+      const style = getComputedStyle(element)
+
+      return {
+        columnEnd: style.gridColumnEnd,
+        columnStart: style.gridColumnStart,
+        rowEnd: style.gridRowEnd,
+        rowStart: style.gridRowStart,
+      }
+    })),
+  ])
+
+  assert.ok(gridBox, `слайд ${slideNumber}: не найдена геометрия staggered grid`)
+  assert.ok(cardBoxes.every(Boolean), `слайд ${slideNumber}: не найдена геометрия всех staggered-карточек`)
+  assert.deepEqual(placements, [
+    { columnEnd: '3', columnStart: '1', rowEnd: '2', rowStart: '1' },
+    { columnEnd: '5', columnStart: '3', rowEnd: '2', rowStart: '1' },
+    { columnEnd: '7', columnStart: '5', rowEnd: '2', rowStart: '1' },
+    { columnEnd: '4', columnStart: '2', rowEnd: '3', rowStart: '2' },
+    { columnEnd: '6', columnStart: '4', rowEnd: '3', rowStart: '2' },
+  ], `слайд ${slideNumber}: staggered должен использовать центрированную геометрию 3+2`)
+
+  const boxes = cardBoxes
+  const topY = boxes[0].y
+  const bottomY = boxes[3].y
+
+  assert.ok(
+    boxes.slice(0, 3).every(box => Math.abs(box.y - topY) <= 1),
+    `слайд ${slideNumber}: первые три staggered-карточки должны быть в верхнем ряду`,
+  )
+  assert.ok(
+    boxes.slice(3).every(box => Math.abs(box.y - bottomY) <= 1) && bottomY > topY,
+    `слайд ${slideNumber}: последние две staggered-карточки должны быть в нижнем ряду`,
+  )
+
+  const lowerCenter = (boxes[3].x + boxes[4].x + boxes[4].width) / 2
+  const gridCenter = gridBox.x + gridBox.width / 2
+
+  assert.ok(
+    Math.abs(lowerCenter - gridCenter) <= 1,
+    `слайд ${slideNumber}: нижняя пара staggered не центрирована`,
+  )
+}
+
+async function assertNumberedQuartet(slide, slideNumber) {
+  const markers = slide.locator('.Text_size_4')
+  assert.deepEqual(
+    (await markers.allTextContents()).map(text => text.trim()),
+    ['1', 'Цель', '2', 'Контекст', '3', 'Критерий', '4', 'Обратная связь'],
+    `слайд ${slideNumber}: номер и название каждого факта должны быть plain Text размера 4`,
+  )
+  assert.equal(
+    await slide.locator('.Slide-FactNumber').count(),
+    0,
+    `слайд ${slideNumber}: номера не должны оформляться кружками`,
+  )
+
+  const factTitles = slide.locator('.Text_size_4.Text_align_end')
+  assert.deepEqual(
+    (await factTitles.allTextContents()).map(text => text.trim()),
+    ['Цель', 'Контекст', 'Критерий', 'Обратная связь'],
+    `слайд ${slideNumber}: названия фактов должны быть прижаты к нижнему краю карточки`,
+  )
+  assert.ok(
+    (await factTitles.evaluateAll(elements => elements.every((element) => {
+      const marginTop = Number.parseFloat(getComputedStyle(element).marginTop)
+      return Number.isFinite(marginTop) && marginTop > 0
+    }))),
+    `слайд ${slideNumber}: названия фактов должны быть отодвинуты вниз от номера`,
+  )
+}
+
 async function inspectSlide(
   page,
   origin,
@@ -222,12 +305,16 @@ async function inspectSlide(
     result.heightOverflow <= 1,
     `слайд ${slideNumber}: вертикальное переполнение ${result.heightOverflow}px`,
   )
-  if (slideNumber === 32)
+  if (slideNumber === 38)
     await assertStrongEmphasis(slide, slideNumber)
-  if (slideNumber === 40)
+  if (slideNumber === 46)
     await assertClosingLayout(slide, slideNumber, 1)
-  if (slideNumber === 41)
+  if (slideNumber === 47)
     await assertClosingLayout(slide, slideNumber, 2)
+  if (slideNumber === 26)
+    await assertStaggeredStepsLayout(slide, slideNumber)
+  if (slideNumber === 28)
+    await assertNumberedQuartet(slide, slideNumber)
   assertLifecycleTransition(
     beforeLifecycle,
     afterLifecycle,
@@ -400,6 +487,17 @@ export async function runBrowserSmoke() {
       )
     }
 
+    for (const slideNumber of P0_REGRESSION_SLIDES) {
+      activeSlide = `P0-регрессия: слайд ${slideNumber}`
+      await inspectSlide(
+        page,
+        server.origin,
+        slideNumber,
+        undefined,
+        () => inFlightTracker.waitForIdle(),
+      )
+    }
+
     for (const asset of THEME_MEDIA) {
       activeSlide = `медиа: ${asset.label}`
       await loadThemeImage(page, server.origin, asset)
@@ -413,7 +511,7 @@ export async function runBrowserSmoke() {
     assertNoDiagnostics('неуспешные запросы того же источника', failedRequests)
 
     console.log(
-      `Браузерная проверка: слайды=${REPRESENTATIVE_SLIDES.length + VISUAL_ONLY_SLIDES.length}, `
+      `Браузерная проверка: слайды=${REPRESENTATIVE_SLIDES.length + VISUAL_ONLY_SLIDES.length + P0_REGRESSION_SLIDES.length}, `
       + `ошибкиСтраницы=${pageErrors.length}, ошибкиКонсоли=${consoleErrors.length}, `
       + `ошибочныеОтветы=${failedResponses.length}, активныеЗапросы=${inFlightTracker.size}, `
       + `переполнение=0, медиа=${THEME_MEDIA.length}, переходыЖЦ=${REPRESENTATIVE_SLIDES.length - 1}`,