slidev-theme-practicum 0.1.0

package/composables/text-priority-fit.mjs

@@ -0,0 +1,166 @@
+const TEXT_PRIORITY_MIN = 1
+
+/**
+ * @typedef {{
+ *   minSize: number
+ *   maxSize: number
+ *   priority?: number
+ * }} PriorityTextSizeItemInput
+ * @typedef {{
+ *   minSize: number
+ *   maxSize: number
+ *   priority: number
+ * }} PriorityTextSizeItem
+ */
+
+/**
+ * @param {string} message
+ */
+function failTextPriorityFit(message) {
+  throw new Error(`[Text] ${message}`)
+}
+
+/**
+ * @param {number[]} left
+ * @param {number[]} right
+ * @param {PriorityTextSizeItem[]} items
+ */
+function compareCandidatesByPriority(left, right, items) {
+  const order = items
+    .map((item, index) => ({ index, priority: item.priority }))
+    .sort((leftItem, rightItem) => leftItem.priority - rightItem.priority || leftItem.index - rightItem.index)
+
+  for (const { index } of order) {
+    if (left[index] !== right[index])
+      return right[index] - left[index]
+  }
+
+  return right.reduce((sum, size) => sum + size, 0) - left.reduce((sum, size) => sum + size, 0)
+}
+
+/**
+ * @param {number[]} candidate
+ * @param {PriorityTextSizeItem[]} items
+ */
+function satisfiesPriority(candidate, items) {
+  for (let leftIndex = 0; leftIndex < items.length; leftIndex += 1) {
+    for (let rightIndex = 0; rightIndex < items.length; rightIndex += 1) {
+      if (leftIndex === rightIndex)
+        continue
+
+      const priorityGap = items[rightIndex].priority - items[leftIndex].priority
+      if (priorityGap <= 0)
+        continue
+
+      if (candidate[leftIndex] - candidate[rightIndex] < priorityGap)
+        return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * @param {number[]} candidate
+ * @param {PriorityTextSizeItem[]} items
+ */
+function satisfiesAssignedPriority(candidate, items) {
+  for (let leftIndex = 0; leftIndex < items.length; leftIndex += 1) {
+    if (!Number.isInteger(candidate[leftIndex]))
+      continue
+
+    for (let rightIndex = 0; rightIndex < items.length; rightIndex += 1) {
+      if (leftIndex === rightIndex || !Number.isInteger(candidate[rightIndex]))
+        continue
+
+      const priorityGap = items[rightIndex].priority - items[leftIndex].priority
+      if (priorityGap <= 0)
+        continue
+
+      if (candidate[leftIndex] - candidate[rightIndex] < priorityGap)
+        return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * @param {PriorityTextSizeItemInput[]} items
+ * @returns {PriorityTextSizeItem[]}
+ */
+function normalizePriorityFitItems(items) {
+  return items.map((item, index) => {
+    const minSize = Number(item.minSize),
+      maxSize = Number(item.maxSize),
+      priority = Number(item.priority ?? TEXT_PRIORITY_MIN)
+
+    if (!Number.isInteger(minSize) || !Number.isInteger(maxSize) || minSize > maxSize)
+      failTextPriorityFit(`item ${index + 1} has invalid size range.`)
+
+    if (!Number.isInteger(priority) || priority < TEXT_PRIORITY_MIN)
+      failTextPriorityFit(`item ${index + 1} has invalid priority.`)
+
+    return {
+      minSize,
+      maxSize,
+      priority,
+    }
+  })
+}
+
+/**
+ * @param {PriorityTextSizeItem[]} normalizedItems
+ * @returns {Generator<number[]>}
+ */
+function createPriorityTextSizeCandidatesFromNormalized(normalizedItems) {
+  const order = normalizedItems
+    .map((item, index) => ({ item, index }))
+    .sort((left, right) => left.item.priority - right.item.priority || left.index - right.index)
+
+  /**
+   * @param {number} orderIndex
+   * @param {number[]} candidate
+   * @returns {Generator<number[]>}
+   */
+  function* visit(orderIndex, candidate) {
+    if (orderIndex === order.length) {
+      yield candidate.slice()
+      return
+    }
+
+    const { item, index } = order[orderIndex]
+    for (let size = item.maxSize; size >= item.minSize; size -= 1) {
+      candidate[index] = size
+      if (satisfiesAssignedPriority(candidate, normalizedItems))
+        yield* visit(orderIndex + 1, candidate)
+    }
+  }
+
+  return visit(0, [])
+}
+
+/**
+ * @param {PriorityTextSizeItemInput[]} items
+ * @returns {Generator<number[]>}
+ */
+export function createPriorityTextSizeCandidates(items) {
+  return createPriorityTextSizeCandidatesFromNormalized(normalizePriorityFitItems(items))
+}
+
+/**
+ * @param {PriorityTextSizeItemInput[]} items
+ * @returns {number[][]}
+ */
+export function resolvePriorityTextSizeCandidates(items) {
+  const normalizedItems = normalizePriorityFitItems(items)
+  const candidates = [...createPriorityTextSizeCandidatesFromNormalized(normalizedItems)]
+
+  if (!candidates.length)
+    failTextPriorityFit('size ranges cannot satisfy priority hierarchy.')
+
+  if (!candidates.every(candidate => satisfiesPriority(candidate, normalizedItems)))
+    failTextPriorityFit('size ranges cannot satisfy priority hierarchy.')
+
+  return candidates.sort((left, right) => compareCandidatesByPriority(left, right, normalizedItems))
+}

package/composables/text-typography.mjs

@@ -0,0 +1,138 @@
+const NON_BREAKING_SPACE = '\u00a0'
+const RUSSIAN_SPACED_HYPHEN = /(\p{sc=Cyrillic}) - (?=\p{sc=Cyrillic})/gu
+const TEXT_NODE_FILTER = 4
+const FILTER_ACCEPT = 1
+const FILTER_REJECT = 2
+const TYPOGRAPHY_SKIP_SELECTOR = [
+  'script',
+  'style',
+  'pre',
+  'code',
+  'kbd',
+  'samp',
+  'textarea',
+  '.shiki',
+  '.katex',
+  '.mermaid',
+  '[data-no-typography]',
+  '[data-typography="off"]',
+].join(',')
+
+const RUSSIAN_SERVICE_WORDS = [
+  'благодаря',
+  'вместо',
+  'вокруг',
+  'вдоль',
+  'между',
+  'около',
+  'перед',
+  'после',
+  'прежде',
+  'против',
+  'сквозь',
+  'спустя',
+  'среди',
+  'через',
+  'возле',
+  'из-за',
+  'из-под',
+  'кроме',
+  'мимо',
+  'ради',
+  'или',
+  'без',
+  'для',
+  'над',
+  'под',
+  'при',
+  'про',
+  'как',
+  'обо',
+  'во',
+  'до',
+  'за',
+  'из',
+  'ко',
+  'на',
+  'не',
+  'ни',
+  'но',
+  'об',
+  'от',
+  'по',
+  'со',
+  'а',
+  'в',
+  'да',
+  'и',
+  'к',
+  'ли',
+  'о',
+  'с',
+  'у',
+]
+const RUSSIAN_COMPACT_SERVICE_WORDS = RUSSIAN_SERVICE_WORDS.filter(word => word.length <= 2)
+const RUSSIAN_SERVICE_WORD_WITH_SPACE = createServiceWordPattern(RUSSIAN_SERVICE_WORDS)
+const RUSSIAN_COMPACT_SERVICE_WORD_WITH_SPACE = createServiceWordPattern(RUSSIAN_COMPACT_SERVICE_WORDS)
+
+/**
+ * @param {string[]} words
+ */
+function createServiceWordPattern(words) {
+  return new RegExp(`(?<=^|[\\s\\p{Pi}\\p{Ps}])(${words.join('|')})[ \\t]+(?=[\\p{L}\\p{N}\\p{Pi}\\p{Ps}])`, 'giu')
+}
+
+/**
+ * @param {string} value
+ * @param {{ mode?: 'default' | 'compact' }} [options]
+ */
+export function typographText(value, options = {}) {
+  const serviceWordPattern = options.mode === 'compact'
+    ? RUSSIAN_COMPACT_SERVICE_WORD_WITH_SPACE
+    : RUSSIAN_SERVICE_WORD_WITH_SPACE
+
+  return value
+    .replace(serviceWordPattern, `$1${NON_BREAKING_SPACE}`)
+    .replace(RUSSIAN_SPACED_HYPHEN, `$1${NON_BREAKING_SPACE}— `)
+}
+
+/**
+ * @param {Element | null | undefined} root
+ */
+export function typographElement(root) {
+  if (!root)
+    return 0
+
+  const ownerDocument = root.ownerDocument ?? globalThis.document
+  if (!ownerDocument?.createTreeWalker)
+    return 0
+
+  const nodeFilter = ownerDocument.defaultView?.NodeFilter ?? globalThis.NodeFilter
+  const walker = ownerDocument.createTreeWalker(root, nodeFilter?.SHOW_TEXT ?? TEXT_NODE_FILTER, {
+    acceptNode(node) {
+      const parent = node.parentElement
+      if (!parent || parent.closest(TYPOGRAPHY_SKIP_SELECTOR))
+        return nodeFilter?.FILTER_REJECT ?? FILTER_REJECT
+
+      return nodeFilter?.FILTER_ACCEPT ?? FILTER_ACCEPT
+    },
+  })
+  let changed = 0
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode
+    const parent = node.parentElement
+    const text = node.nodeValue ?? ''
+    const typographedText = typographText(text, {
+      mode: parent?.closest('[data-typography="compact"]') ? 'compact' : 'default',
+    })
+
+    if (typographedText === text)
+      continue
+
+    node.nodeValue = typographedText
+    changed += 1
+  }
+
+  return changed
+}

package/composables/theme-foundation.ts

@@ -0,0 +1,192 @@
+export const THEME_SLIDE_MODES = ['light', 'dark', 'color'] as const
+export const THEME_TONES = ['blue', 'orange', 'green', 'red', 'yellow'] as const
+export const THEME_SLOT_SURFACES = ['none', 'light', 'dark', 'color', 'tint'] as const
+
+export type ThemeSlideMode = typeof THEME_SLIDE_MODES[number]
+export type ThemeTone = typeof THEME_TONES[number]
+export type ThemeSlotSurface = typeof THEME_SLOT_SURFACES[number]
+
+export type ResolvedThemeMode = {
+  mode: ThemeSlideMode
+  tone: ThemeTone
+  background: string
+  text: string
+  muted: string
+  contrast: boolean
+}
+
+export type ResolvedSlideTheme = ResolvedThemeMode
+
+export type ResolvedSlotTheme = {
+  surface: ThemeSlotSurface
+  tone: ThemeTone
+}
+
+export type ResolveThemeModeOptions = {
+  mode?: unknown
+  tone?: unknown
+  defaultTone?: ThemeTone
+  label?: string
+}
+
+export type ResolveSurfaceToneOptions = {
+  surface?: unknown
+  tone?: unknown
+  defaultTone?: ThemeTone
+  label?: string
+}
+
+export type ResolveSlideThemeOptions = ResolveThemeModeOptions
+export type ResolveSlotThemeOptions = ResolveSurfaceToneOptions
+
+function fail(label: string, message: string): never {
+  throw new Error(`[${label}] ${message}`)
+}
+
+function normalizeString(value: unknown) {
+  if (typeof value !== 'string')
+    return null
+
+  const normalized = value.trim().toLowerCase()
+  return normalized || null
+}
+
+function resolveEnum<T extends string>(
+  value: unknown,
+  allowed: readonly T[],
+  label: string,
+  fallback?: T,
+) {
+  const normalized = normalizeString(value)
+  if (normalized == null) {
+    if (fallback)
+      return fallback
+
+    fail(label, `Значение обязательно. Допустимые варианты: ${allowed.join(', ')}.`)
+  }
+
+  if ((allowed as readonly string[]).includes(normalized))
+    return normalized as T
+
+  fail(label, `Недопустимое значение "${normalized}". Разрешены только: ${allowed.join(', ')}.`)
+}
+
+export function resolveSlideMode(
+  value: unknown,
+  label = 'Slide.mode',
+  fallback: ThemeSlideMode = 'light',
+) {
+  return resolveEnum(value, THEME_SLIDE_MODES, label, fallback)
+}
+
+export function resolveTone(
+  value: unknown,
+  label = 'tone',
+  fallback: ThemeTone = 'blue',
+) {
+  return resolveEnum(value, THEME_TONES, label, fallback)
+}
+
+export function resolveSlotSurface(
+  value: unknown,
+  label = 'surface',
+  fallback: ThemeSlotSurface = 'none',
+) {
+  return resolveEnum(value, THEME_SLOT_SURFACES, label, fallback)
+}
+
+export function isContrastSlideMode(mode: ThemeSlideMode) {
+  return mode !== 'light'
+}
+
+export function resolveThemeMode(options: ResolveThemeModeOptions = {}): ResolvedThemeMode {
+  const label = options.label ?? 'Slide'
+  const mode = resolveSlideMode(options.mode, `${label}.mode`, 'light')
+  const tone = resolveTone(options.tone, `${label}.tone`, options.defaultTone ?? 'blue')
+
+  if (mode === 'light') {
+    return {
+      mode,
+      tone,
+      background: 'var(--theme-color-light-0)',
+      text: 'var(--theme-color-dark-0)',
+      muted: 'var(--theme-color-dark-2)',
+      contrast: false,
+    }
+  }
+
+  if (mode === 'dark') {
+    return {
+      mode,
+      tone,
+      background: 'var(--theme-color-dark-0)',
+      text: 'var(--theme-color-light-0)',
+      muted: 'var(--theme-text-muted-on-contrast)',
+      contrast: true,
+    }
+  }
+
+  return {
+    mode,
+    tone,
+    background: `var(--theme-color-${tone}-0)`,
+    text: 'var(--theme-color-light-0)',
+    muted: 'var(--theme-text-muted-on-contrast)',
+    contrast: true,
+  }
+}
+
+export function resolveSurfaceTone(options: ResolveSurfaceToneOptions = {}): ResolvedSlotTheme {
+  const label = options.label ?? 'Slot'
+  const surface = resolveSlotSurface(options.surface, `${label}.surface`, 'none')
+  const rawTone = normalizeString(options.tone)
+
+  if (surface !== 'color' && surface !== 'tint') {
+    if (rawTone) {
+      fail(label, `tone разрешён только для surface="color" или surface="tint". Получено: "${rawTone}".`)
+    }
+
+    return {
+      surface,
+      tone: options.defaultTone ?? 'blue',
+    }
+  }
+
+  return {
+    surface,
+    tone: resolveTone(rawTone, `${label}.tone`, options.defaultTone ?? 'blue'),
+  }
+}
+
+export const resolveSlideTheme = resolveThemeMode
+export const resolveSlotTheme = resolveSurfaceTone
+
+export function themeVars(scope: 'slide', theme: ResolvedSlideTheme): Record<string, string>
+export function themeVars(scope: 'slot', theme: ResolvedSlotTheme): Record<string, string>
+export function themeVars(
+  scope: 'slide' | 'slot',
+  theme: ResolvedSlideTheme | ResolvedSlotTheme,
+): Record<string, string> {
+  if (scope === 'slide') {
+    const slideTheme = theme as ResolvedSlideTheme
+
+    return {
+      '--theme-bg': slideTheme.background,
+      '--theme-text': slideTheme.text,
+      '--theme-text-muted': slideTheme.muted,
+      '--theme-inline-code-text': slideTheme.text,
+      '--theme-text-on-dark': 'var(--theme-color-light-0)',
+      '--theme-link': slideTheme.contrast ? 'var(--theme-color-light-0)' : 'var(--theme-current-color)',
+      '--theme-current-color': `var(--theme-color-${slideTheme.tone}-0)`,
+    }
+  }
+
+  const slotTheme = theme as ResolvedSlotTheme
+  if (slotTheme.surface !== 'color' && slotTheme.surface !== 'tint')
+    return {}
+
+  return {
+    '--theme-slot-color': `var(--theme-color-${slotTheme.tone}-0)`,
+    '--theme-slot-tint': `var(--theme-color-${slotTheme.tone}-1, color-mix(in srgb, var(--theme-color-${slotTheme.tone}-0) 40%, var(--theme-color-light-0)))`,
+  }
+}

package/composables/theme-media.mjs

@@ -0,0 +1,202 @@
+import {
+  DEFAULT_DECOR_CATALOG,
+  hasDecorInput,
+  normalizeDecorCatalog,
+  resolveDecorImage,
+} from './decor-config.mjs'
+import {
+  isSvgImageSource,
+  parseImageBackgrounds,
+  parseImageConfig,
+  resolveImageMaskSize,
+} from './image-config.mjs'
+
+/**
+ * @typedef {Record<string, unknown>} PlainRecord
+ * @typedef {import('./image-config.mjs').NormalizedImageData} NormalizedImageData
+ * @typedef {import('./decor-config.mjs').NormalizedDecorCatalog} NormalizedDecorCatalog
+ * @typedef {{ cols?: number, rows?: number, label?: string }} GridFootprint
+ * @typedef {{ key: string, image: NormalizedImageData, render: { kind: 'img' | 'mask', decorative: boolean, alt: string, cssVars: Record<string, string> } }} ThemeMediaLayer
+ * @typedef {{ background?: unknown, decor?: unknown }} ThemeSlotLayerInput
+ * @typedef {{ label?: string, footprint?: GridFootprint | null, seed?: string, tone?: string, contrast?: boolean }} ThemeSlotMediaContext
+ * @typedef {{ baseCatalog?: readonly object[] | NormalizedDecorCatalog, themeCatalog?: readonly object[], warn?: (message: string) => void }} ThemeMediaInput
+ * @typedef {{ key?: string, alt?: string, decorative?: boolean }} LayerOptions
+ */
+
+/**
+ * @param {unknown} value
+ * @returns {value is PlainRecord}
+ */
+function isRecord(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is NormalizedDecorCatalog}
+ */
+function isNormalizedDecorCatalog(value) {
+  return isRecord(value)
+    && Array.isArray(value.variants)
+    && value.byId instanceof Map
+}
+
+/**
+ * @param {unknown} value
+ */
+function hasBackgroundInput(value) {
+  if (value === undefined || value === null || value === '')
+    return false
+
+  if (Array.isArray(value))
+    return value.some(item => item !== undefined && item !== null && item !== '')
+
+  return true
+}
+
+/**
+ * @param {readonly object[] | NormalizedDecorCatalog | undefined} baseCatalog
+ * @param {readonly object[] | undefined} themeCatalog
+ * @returns {NormalizedDecorCatalog}
+ */
+function resolveCatalog(baseCatalog, themeCatalog) {
+  const base = isNormalizedDecorCatalog(baseCatalog)
+    ? baseCatalog
+    : normalizeDecorCatalog(Array.isArray(baseCatalog) ? baseCatalog : [])
+
+  if (!Array.isArray(themeCatalog) || themeCatalog.length === 0)
+    return base
+
+  return normalizeDecorCatalog([...base.variants], themeCatalog)
+}
+
+/**
+ * @param {NormalizedImageData} image
+ * @param {'img' | 'mask'} kind
+ * @returns {Record<string, string>}
+ */
+function cssVarsForImage(image, kind) {
+  return {
+    '--theme-image-background': image.backgroundColor || 'transparent',
+    '--theme-image-fit': image.fit,
+    '--theme-image-position': image.position,
+    '--theme-image-origin': image.anchor,
+    '--theme-image-x': image.x,
+    '--theme-image-y': image.y,
+    '--theme-image-zoom': String(image.zoom),
+    '--theme-image-rotate': image.rotate,
+    '--theme-image-opacity': String(image.opacity),
+    ...(kind === 'mask'
+      ? {
+          '--theme-image-color': image.color || 'currentColor',
+          '--theme-image-mask': `url("${image.src}")`,
+          '--theme-image-mask-size': resolveImageMaskSize(image.fit),
+        }
+      : {}),
+  }
+}
+
+/**
+ * @param {NormalizedImageData} image
+ * @param {LayerOptions} [options]
+ * @returns {ThemeMediaLayer}
+ */
+function createLayer(image, options = {}) {
+  const kind = image.color && isSvgImageSource(image.src) ? 'mask' : 'img'
+  const alt = typeof options.alt === 'string' ? options.alt : ''
+  const decorative = options.decorative ?? !alt
+
+  return {
+    key: options.key || `${kind}:${image.src}:${image.fit}:${image.position}:${image.zoom}:${image.color}:${image.opacity}`,
+    image,
+    render: {
+      kind,
+      decorative,
+      alt,
+      cssVars: cssVarsForImage(image, kind),
+    },
+  }
+}
+
+/**
+ * @param {ThemeMediaInput} [input]
+ */
+export function createThemeMedia(input = {}) {
+  const catalog = resolveCatalog(input.baseCatalog ?? DEFAULT_DECOR_CATALOG, input.themeCatalog)
+  const warn = typeof input.warn === 'function' ? input.warn : undefined
+
+  return {
+    /**
+     * @param {ThemeSlotLayerInput} [layerInput]
+     * @param {ThemeSlotMediaContext} [context]
+     * @returns {ThemeMediaLayer[]}
+     */
+    resolveSlotLayers(layerInput = {}, context = {}) {
+      const hasBackground = hasBackgroundInput(layerInput.background)
+      const hasDecor = layerInput.decor ? hasDecorInput(layerInput.decor) : false
+      const label = context.label || 'slot'
+
+      if (hasBackground && hasDecor)
+        throw new Error(`[${label}] background and decor cannot be used together.`)
+
+      if (hasDecor) {
+        if (!context.footprint)
+          return []
+
+        const image = resolveDecorImage(layerInput.decor, {
+          catalog: catalog.variants,
+          footprint: context.footprint,
+          seed: context.seed,
+          warn,
+          label: `${label}.decor`,
+        })
+
+        return image
+          ? [createLayer(image, { key: `${label}.decor:${image.src}:${context.seed ?? ''}`, decorative: true })]
+          : []
+      }
+
+      if (!hasBackground)
+        return []
+
+      return parseImageBackgrounds(
+        /** @type {Parameters<typeof parseImageBackgrounds>[0]} */ (layerInput.background),
+        {},
+        `${label}.background`,
+      )
+        .map((image, index) =>
+          createLayer(image, { key: `${label}.background:${index}:${image.src}`, decorative: true }),
+        )
+    },
+
+    /**
+     * @param {unknown} imageInput
+     * @param {string} [label]
+     * @returns {ThemeMediaLayer | null}
+     */
+    resolveImage(imageInput, label = 'image') {
+      if (!imageInput)
+        return null
+
+      if (typeof imageInput === 'string' && !imageInput.trim())
+        return null
+
+      if (isRecord(imageInput) && typeof imageInput.src === 'string' && !imageInput.src.trim())
+        return null
+
+      const image = parseImageConfig(
+        /** @type {Parameters<typeof parseImageConfig>[0]} */ (imageInput),
+        {},
+        label,
+      )
+      if (!image)
+        return null
+
+      return createLayer(image, {
+        key: `${label}:${image.src}`,
+        alt: image.alt,
+        decorative: !image.alt,
+      })
+    },
+  }
+}