slidev-theme-practicum 0.1.4 → 0.3.0

package/composables/deck-decors.ts

@@ -0,0 +1,74 @@
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import { extname, isAbsolute, relative, resolve } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { parse as parseYaml } from 'yaml'
+import { collectDecorSources, unwrapDecorFile } from './decor-sources'
+
+export const DECK_DECORS_VIRTUAL_ID = 'virtual:practicum-deck-decors'
+export const RESOLVED_DECK_DECORS_VIRTUAL_ID = `\0${DECK_DECORS_VIRTUAL_ID}`
+export const CONVENTION_DECOR_FILES = Object.freeze([
+  'decors.yaml',
+  'decors.yml',
+  'decors.json',
+  'decors.mjs',
+])
+
+const SUPPORTED_EXTENSIONS = new Set(['.yaml', '.yml', '.json', '.mjs', '.js'])
+
+export function resolveDecorFilePath(root: string, spec: string) {
+  const base = resolve(root)
+  const resolved = resolve(base, spec)
+  const rel = relative(base, resolved)
+
+  if (!rel || rel.startsWith('..') || isAbsolute(rel))
+    throw new Error(`Decor catalog path escapes the deck root: ${spec}`)
+
+  return resolved
+}
+
+export function findConventionDecorFile(root: string) {
+  return CONVENTION_DECOR_FILES
+    .map(name => resolve(root, name))
+    .find(path => existsSync(path))
+}
+
+export function collectDeckDecorFiles(input: { decors: unknown, root: string }) {
+  const { files } = collectDecorSources(input.decors)
+
+  if (files.length)
+    return files.map(file => resolveDecorFilePath(input.root, file))
+
+  if (input.decors != null)
+    return []
+
+  const convention = findConventionDecorFile(input.root)
+  return convention ? [convention] : []
+}
+
+export async function loadDecorFile(path: string) {
+  const ext = extname(path).toLowerCase()
+  if (!SUPPORTED_EXTENSIONS.has(ext))
+    throw new Error(`Unsupported decor catalog file: ${path}`)
+
+  if (!existsSync(path))
+    throw new Error(`Decor catalog file not found: ${path}`)
+
+  if (ext === '.mjs' || ext === '.js') {
+    const loadModule = new Function('specifier', 'return import(specifier)') as (specifier: string) => Promise<Record<string, unknown>>
+    const mod = await loadModule(`${pathToFileURL(path).href}?t=${Date.now()}`)
+    return unwrapDecorFile(mod.decors ?? mod.default)
+  }
+
+  const source = await readFile(path, 'utf8')
+  return unwrapDecorFile(ext === '.json' ? JSON.parse(source) : parseYaml(source))
+}
+
+export async function resolveDeckFileDecors(input: { decors: unknown, root: string }) {
+  const records: Record<string, unknown>[] = []
+
+  for (const path of collectDeckDecorFiles(input))
+    records.push(...await loadDecorFile(path))
+
+  return records
+}

package/composables/decor-sources.ts

@@ -0,0 +1,43 @@
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function isDecorFileRef(value: unknown): value is string {
+  return typeof value === 'string' && Boolean(value.trim())
+}
+
+export function collectDecorSources(value: unknown): {
+  files: string[]
+  inline: Record<string, unknown>[]
+} {
+  if (isDecorFileRef(value))
+    return { files: [value.trim()], inline: [] }
+
+  if (!Array.isArray(value))
+    return { files: [], inline: [] }
+
+  const files: string[] = []
+  const inline: Record<string, unknown>[] = []
+
+  for (const item of value) {
+    if (isDecorFileRef(item))
+      files.push(item.trim())
+    else if (isRecord(item))
+      inline.push(item)
+  }
+
+  return { files, inline }
+}
+
+export function unwrapDecorFile(value: unknown): Record<string, unknown>[] {
+  if (Array.isArray(value))
+    return value.filter(isRecord)
+
+  if (isRecord(value) && Array.isArray(value.decors))
+    return value.decors.filter(isRecord)
+
+  if (isRecord(value) && typeof value.id === 'string')
+    return [value]
+
+  return []
+}

package/composables/layout-authoring.ts

@@ -8,6 +8,7 @@ import {
   type LayoutShorthandContext,
 } from './layout-shorthands'
 import {
+  hasLayoutVariant,
   resolveLayoutSpec,
   resolveLayoutVariant,
   resolveLayoutRecipe,
@@ -21,6 +22,11 @@ import {
   type ThemeLayoutSlotSpec,
 } from './layout-recipes'
 import { isBlankTextVNode, isCommentVNode } from './layout-vnode'
+import {
+  buildDeckLayoutVariantVNode,
+  resolveDeckLayoutVariant,
+  type DeckLayoutVariantCatalog,
+} from './local-layout-variants'
 import { createSlotRules, type SlotRules } from './slot-rules'
 import {
   isContrastSlideMode,
@@ -48,6 +54,7 @@ export type LayoutAuthoringInput = {
   defaultTone: ThemeTone
   debugGrid?: boolean
   slotPlanState?: LayoutSlotPlanState
+  layoutVariants?: DeckLayoutVariantCatalog
 }
 
 export type LayoutSlotPlanState = Map<string, { role: ThemeLayoutRole, index: number }>
@@ -303,17 +310,27 @@ function resolveHeader(input: {
 export function compileLayoutAuthoring(input: LayoutAuthoringInput): CompiledLayoutAuthoring {
   const props = input.props
   const frontmatter = input.frontmatter
-  const explicitLayout = props.layout || readFrontmatterString(frontmatter, 'layout')
+  const frontmatterLayout = readFrontmatterString(frontmatter, 'layout')
+  const explicitLayout = props.layout || frontmatterLayout
+  const rawVariant = props.variant || readFrontmatterString(frontmatter, 'variant')
+  const rawArrangement = props.arrangement || readFrontmatterString(frontmatter, 'arrangement')
   const layout = isThemeLayout(explicitLayout) ? explicitLayout : ''
   const active = Boolean(layout)
   const slideMode = resolveSlideMode(props.mode ?? readFrontmatterString(frontmatter, 'mode'), 'Slide.mode', 'light')
-  const variant = resolveLayoutVariant(
-    layout,
-    props.variant || readFrontmatterString(frontmatter, 'variant'),
-    props.arrangement || readFrontmatterString(frontmatter, 'arrangement'),
-  )
-  const layoutSpec = active ? resolveLayoutSpec(layout as ThemeLayout, variant) : null
-  const recipe = active ? resolveLayoutRecipe(layout as ThemeLayout, variant) : null
+  const builtInVariant = active && hasLayoutVariant(layout as ThemeLayout, rawVariant)
+  const deckVariant = active && rawVariant && !builtInVariant
+    ? resolveDeckLayoutVariant({
+        layout: layout as ThemeLayout,
+        variant: rawVariant,
+        arrangement: rawArrangement,
+        variants: input.layoutVariants ?? {},
+      })
+    : undefined
+  const variant = deckVariant
+    ? rawVariant
+    : resolveLayoutVariant(layout, rawVariant, rawArrangement)
+  const layoutSpec = active && !deckVariant ? resolveLayoutSpec(layout as ThemeLayout, variant) : null
+  const recipe = active && !deckVariant ? resolveLayoutRecipe(layout as ThemeLayout, variant) : null
   const contrast = isContrastSlideMode(slideMode)
   const frontmatterDecor = readFrontmatterObject(frontmatter, 'decor')
   const agendaDecor = resolveAgendaDecor({
@@ -337,7 +354,15 @@ export function compileLayoutAuthoring(input: LayoutAuthoringInput): CompiledLay
   const rawChildren = input.children?.filter(isVNode) ?? []
   const shouldCompileChildren = input.children !== undefined
   const slotRules = createSlotRules({ Slot: input.components.Slot })
-  const children = active && shouldCompileChildren
+  const children = deckVariant && shouldCompileChildren
+    ? [buildDeckLayoutVariantVNode({
+        layout: layout as ThemeLayout,
+        variant,
+        component: deckVariant,
+        frontmatter,
+        children: flattenVNodes(rawChildren, true),
+      })]
+    : active && shouldCompileChildren
     ? buildSourceChildren({
         rawChildren,
         layout: layout as ThemeLayout,

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' }],
@@ -350,16 +417,30 @@ export const LAYOUT_RECIPES: ThemeLayoutRecipe[] = [
   ]),
 ]
 
-export function resolveLayoutRecipe(layout: ThemeLayout, variant: string, arrangement = '') {
+function findLayoutRecipe(layout: ThemeLayout, variant: string, arrangement = '') {
   const resolvedVariant = variant.trim()
   const resolvedArrangement = arrangement.trim()
-  const recipe = LAYOUT_RECIPES.find(candidate =>
+  return LAYOUT_RECIPES.find(candidate =>
     candidate.layout === layout
     && candidate.aliases.some(alias =>
       alias.variant === resolvedVariant
       && (alias.arrangement ?? '') === resolvedArrangement,
     ),
   )
+}
+
+export function hasLayoutVariant(layout: ThemeLayout, variant: string) {
+  const resolvedVariant = variant.trim()
+  return LAYOUT_RECIPES.some(candidate =>
+    candidate.layout === layout
+    && candidate.aliases.some(alias => alias.variant === resolvedVariant),
+  )
+}
+
+export function resolveLayoutRecipe(layout: ThemeLayout, variant: string, arrangement = '') {
+  const resolvedVariant = variant.trim()
+  const resolvedArrangement = arrangement.trim()
+  const recipe = findLayoutRecipe(layout, resolvedVariant, resolvedArrangement)
 
   if (!recipe) {
     const suffix = resolvedArrangement ? `:${resolvedArrangement}` : ''

package/composables/layout-shorthands.ts

@@ -8,6 +8,7 @@ export type LayoutShorthandComponents = {
   Image: Component
   Person: Component
   Slot: Component
+  StepsGrid: Component
   Text: Component
   Timeline: Component
 }
@@ -136,6 +137,7 @@ function hText(
     priority?: 1 | 2 | 3
     align?: 'start' | 'middle' | 'end'
     className?: string
+    color?: 'light-0'
     typography?: 'compact'
   } = {},
 ) {
@@ -147,6 +149,7 @@ function hText(
     priority?: 1 | 2 | 3
     align?: 'start' | 'middle' | 'end'
     class?: string
+    color?: 'light-0'
   } & {
     'data-typography'?: 'compact'
   } = {
@@ -164,6 +167,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 +363,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,
 }
@@ -542,7 +548,7 @@ function buildCenteredChildren(children: VNode[], context: LayoutShorthandContex
 
   return [
     hSlot(context, 'primary', 'slide-message-centered-primary', { centered: true }, [
-      hText(context, 'h1', '7', title.text, { align: 'middle' }),
+      hText(context, 'h1', '7-12', title.text, { align: 'middle' }),
     ]),
   ]
 }
@@ -726,6 +732,154 @@ 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(context.components.StepsGrid, {
+        items,
+        arrangement,
+      }),
+    ]),
+  ]
+}
+
 function normalizeTimelineItems(context: LayoutShorthandContext) {
   const items = context.readFrontmatterArray('items')
 
@@ -804,6 +958,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 +1021,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 +1170,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 +1204,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 +1243,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,