slidev-theme-practicum 0.2.0 → 0.4.0

package/components/StepsGrid.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue'
+import Text from './Text.vue'
+import TextFitGroup from './TextFitGroup.vue'
+
+type StepItem = {
+  title: string
+  body: string
+  label: string
+  active: boolean
+}
+
+const stepsFitGroup = `steps-${getCurrentInstance()?.uid ?? 'default'}`
+
+const props = defineProps<{
+  items: StepItem[]
+  arrangement: 'linear' | 'staggered'
+}>()
+</script>
+
+<template>
+  <div class="Slide-StepsGrid"
+       :class="`Slide-StepsGrid_${props.arrangement}`"
+       :data-count="props.items.length"
+       :style="{ '--slide-steps-count': props.items.length }">
+    <article v-for="(item, index) in props.items"
+             :key="index"
+             class="Slide-Step"
+             :class="{ 'Slide-Step_active': item.active }"
+             :data-index="index + 1">
+      <Text size="4">{{ item.label }}</Text>
+      <TextFitGroup class="Slide-Step-FitGroup Slide-Step-TitleFitGroup"
+                    :fit-group="`${stepsFitGroup}-titles`">
+        <Text size="3-5">{{ item.title }}</Text>
+      </TextFitGroup>
+      <TextFitGroup v-if="item.body"
+                    class="Slide-Step-FitGroup"
+                    :fit-group="`${stepsFitGroup}-bodies`">
+        <Text size="2-3" priority="2" muted>{{ item.body }}</Text>
+      </TextFitGroup>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.Slide-StepsGrid {
+  display: grid;
+  width: 100%;
+  max-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);
+}
+
+.Slide-Step {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  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);
+}
+
+.Slide-Step-FitGroup {
+  width: 100%;
+  height: auto;
+  min-width: 0;
+}
+
+.Slide-Step :deep(.TextFitGroup) {
+  width: 100%;
+  height: auto;
+  min-width: 0;
+}
+
+.Slide-StepsGrid_staggered .Slide-Step-TitleFitGroup {
+  margin-top: auto;
+}
+
+.Slide-StepsGrid_staggered {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.Slide-StepsGrid_staggered .Slide-Step {
+  grid-column: span 2;
+}
+
+.Slide-StepsGrid_staggered[data-count='2'] .Slide-Step {
+  grid-column: 2 / 6;
+}
+
+.Slide-StepsGrid_staggered[data-count='3'] .Slide-Step,
+.Slide-StepsGrid_staggered[data-count='4'] .Slide-Step {
+  grid-column: span 3;
+}
+
+.Slide-StepsGrid_staggered[data-count='3'] .Slide-Step:nth-child(3) {
+  grid-column: 2 / 6;
+}
+
+.Slide-StepsGrid_staggered[data-count='5'] .Slide-Step:nth-child(4) {
+  grid-column: 2 / 4;
+}
+
+.Slide-Step_active {
+  background: var(--theme-current-color);
+  color: var(--theme-text-on-color);
+  --theme-text: var(--theme-text-on-color);
+  --theme-text-muted: var(--theme-text-muted-on-color);
+}
+</style>

package/components/Text.vue

@@ -16,7 +16,9 @@ type TextColorToken =
   | 'text'
   | 'text-muted'
   | 'text-on-dark'
+  | 'text-on-color'
   | 'text-muted-on-contrast'
+  | 'text-muted-on-color'
   | 'link'
   | 'light-0'
   | 'light-1'
@@ -37,7 +39,9 @@ const TEXT_COLOR_MAP: Record<TextColorToken, string> = {
   'text': 'var(--theme-text)',
   'text-muted': 'var(--theme-text-muted)',
   'text-on-dark': 'var(--theme-text-on-dark)',
+  'text-on-color': 'var(--theme-text-on-color)',
   'text-muted-on-contrast': 'var(--theme-text-muted-on-contrast)',
+  'text-muted-on-color': 'var(--theme-text-muted-on-color)',
   'link': 'var(--theme-link)',
   'light-0': 'var(--theme-color-light-0)',
   'light-1': 'var(--theme-color-light-1)',
@@ -119,6 +123,7 @@ const textStyle = computed(() => ({
   <component :is="as"
              ref="textElement"
              class="Text"
+             :data-text-color="resolvedColor"
              :class="[
                `Text_size_${normalizedSize}`,
                {

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/deck-slot-markup.cjs

@@ -7,7 +7,7 @@ const { parse } = require('vue/compiler-sfc')
  * @typedef {(
  *   | { kind: 'comment' }
  *   | { kind: 'text', content: string }
- *   | { kind: 'element', tag: string, props: Record<string, unknown>, children: DeckLiveNode[] }
+ *   | { kind: 'element', tag: string, props: Record<string, unknown>, dynamicProps?: string[], children: DeckLiveNode[] }
  * )} DeckLiveNode
  */
 /** @typedef {{ children: DeckLiveNode[], intents: ExplicitSlotIntent[] }} DeckLiveStructure */
@@ -26,6 +26,11 @@ function formatCompilerError(error) {
  * @returns {unknown}
  */
 function readLiteralBinding(prop) {
+  const source = prop.exp?.loc.source.trim()
+  if (source === 'true' || source === 'false')
+    return source === 'true'
+  if (source === 'null')
+    return null
   const ast = prop.exp?.ast
   if (!ast)
     return undefined
@@ -75,11 +80,12 @@ function containsSlot(node) {
 
 /**
  * @param {import('@vue/compiler-core').ElementNode} node
- * @returns {Record<string, unknown>}
+ * @returns {{ props: Record<string, unknown>, dynamicProps?: string[] }}
  */
 function elementProps(node) {
   /** @type {Record<string, unknown>} */
   const props = {}
+  const dynamicProps = []
 
   for (const prop of node.props) {
     if (prop.type === 6) {
@@ -87,8 +93,11 @@ function elementProps(node) {
       continue
     }
 
-    if (prop.name !== 'bind')
+    if (prop.name !== 'bind') {
+      if (SLOT_CONTROL_FLOW_DIRECTIVES.has(prop.name))
+        dynamicProps.push(`v-${prop.name}`)
       continue
+    }
 
     const key = prop.arg?.type === 4 && prop.arg.isStatic
       ? prop.arg.content
@@ -96,6 +105,11 @@ function elementProps(node) {
 
     if (node.tag !== 'Slot'
       || (!SLOT_CONTRACT_PROPS.has(key) && key !== 'label' && key)) {
+      const value = readLiteralBinding(prop)
+      if (key && value !== undefined)
+        props[key] = value
+      else
+        dynamicProps.push(key ? `v-bind:${key}` : 'v-bind')
       continue
     }
 
@@ -118,7 +132,7 @@ function elementProps(node) {
     props[key] = value
   }
 
-  return props
+  return dynamicProps.length ? { props, dynamicProps } : { props }
 }
 
 /**
@@ -134,7 +148,7 @@ function liveNode(node) {
     return {
       kind: 'element',
       tag: node.tag,
-      props: elementProps(node),
+      ...elementProps(node),
       children: node.children
         .map(liveNode)
         .filter(isLiveNode),

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

@@ -417,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}` : ''