slidev-theme-practicum 0.1.0 → 0.1.2

package/composables/deck-slot-markup.cjs

@@ -0,0 +1,249 @@
+const MarkdownIt = require('markdown-it')
+const { parse } = require('vue/compiler-sfc')
+
+/** @typedef {import('@vue/compiler-core').TemplateChildNode} TemplateChildNode */
+/** @typedef {{ role: string, hasCoordinates: boolean, label: string }} ExplicitSlotIntent */
+/**
+ * @typedef {(
+ *   | { kind: 'comment' }
+ *   | { kind: 'text', content: string }
+ *   | { kind: 'element', tag: string, props: Record<string, unknown>, children: DeckLiveNode[] }
+ * )} DeckLiveNode
+ */
+/** @typedef {{ children: DeckLiveNode[], intents: ExplicitSlotIntent[] }} DeckLiveStructure */
+
+const SLOT_CONTRACT_PROPS = new Set(['role', 'area', 'col', 'row'])
+const SLOT_CONTROL_FLOW_DIRECTIVES = new Set(['if', 'else-if', 'else', 'for'])
+const markdown = new MarkdownIt({ html: true })
+
+/** @param {unknown} error */
+function formatCompilerError(error) {
+  return error instanceof Error ? error.message : String(error)
+}
+
+/**
+ * @param {import('@vue/compiler-core').DirectiveNode} prop
+ * @returns {unknown}
+ */
+function readLiteralBinding(prop) {
+  const ast = prop.exp?.ast
+  if (!ast)
+    return undefined
+
+  if (ast.type === 'StringLiteral'
+    || ast.type === 'NumericLiteral'
+    || ast.type === 'BooleanLiteral') {
+    return ast.value
+  }
+
+  if (ast.type === 'NullLiteral')
+    return null
+
+  if (ast.type === 'TemplateLiteral' && ast.expressions.length === 0)
+    return ast.quasis[0]?.value?.cooked ?? ''
+
+  return undefined
+}
+
+/** @param {string} directive */
+function failSlotControlFlow(directive) {
+  const error = /** @type {Error & { hint: string }} */ (
+    new Error(
+      `[DeckValidator] Slot не поддерживает v-${directive} `
+      + 'на самом компоненте или его предке.',
+    )
+  )
+  error.hint = 'Разверните конечное количество Slot явно, чтобы validator мог проверить role и capacity.'
+  throw error
+}
+
+/** @param {import('@vue/compiler-core').ElementNode} node */
+function controlFlowDirective(node) {
+  return node.props.find(prop =>
+    prop.type === 7
+    && SLOT_CONTROL_FLOW_DIRECTIVES.has(prop.name),
+  )?.name ?? ''
+}
+
+/** @param {TemplateChildNode} node */
+function containsSlot(node) {
+  if (node.type !== 1)
+    return false
+
+  return node.tag === 'Slot' || node.children.some(containsSlot)
+}
+
+/**
+ * @param {import('@vue/compiler-core').ElementNode} node
+ * @returns {Record<string, unknown>}
+ */
+function elementProps(node) {
+  /** @type {Record<string, unknown>} */
+  const props = {}
+
+  for (const prop of node.props) {
+    if (prop.type === 6) {
+      props[prop.name] = prop.value?.content ?? ''
+      continue
+    }
+
+    if (prop.name !== 'bind')
+      continue
+
+    const key = prop.arg?.type === 4 && prop.arg.isStatic
+      ? prop.arg.content
+      : ''
+
+    if (node.tag !== 'Slot'
+      || (!SLOT_CONTRACT_PROPS.has(key) && key !== 'label' && key)) {
+      continue
+    }
+
+    if (!key) {
+      throw new Error(
+        '[DeckValidator] Slot не поддерживает динамический v-bind без статического имени prop.',
+      )
+    }
+
+    const value = readLiteralBinding(prop)
+    if (key === 'label' && value === undefined)
+      continue
+
+    if (value === undefined) {
+      throw new Error(
+        `[DeckValidator] Slot не поддерживает динамический v-bind:${key}; укажите литеральное значение.`,
+      )
+    }
+
+    props[key] = value
+  }
+
+  return props
+}
+
+/**
+ * @param {TemplateChildNode} node
+ * @returns {DeckLiveNode | null}
+ */
+function liveNode(node) {
+  if (node.type === 1) {
+    const directive = controlFlowDirective(node)
+    if (directive && containsSlot(node))
+      failSlotControlFlow(directive)
+
+    return {
+      kind: 'element',
+      tag: node.tag,
+      props: elementProps(node),
+      children: node.children
+        .map(liveNode)
+        .filter(isLiveNode),
+    }
+  }
+
+  if (node.type === 2)
+    return { kind: 'text', content: node.content }
+
+  if (node.type === 3)
+    return { kind: 'comment' }
+
+  if (node.type === 5)
+    return { kind: 'text', content: `{{ ${node.content.loc.source} }}` }
+
+  return null
+}
+
+/**
+ * @param {DeckLiveNode | null} node
+ * @returns {node is DeckLiveNode}
+ */
+function isLiveNode(node) {
+  return node !== null
+}
+
+/**
+ * @param {DeckLiveNode} node
+ * @returns {ExplicitSlotIntent[]}
+ */
+function collectSlotIntents(node) {
+  const nested = node.kind === 'element'
+    ? node.children.flatMap(collectSlotIntents)
+    : []
+
+  if (node.kind !== 'element' || node.tag !== 'Slot')
+    return nested
+
+  const role = String(node.props.role ?? '').trim()
+  const label = String(node.props.label ?? '').trim()
+  const hasCoordinates = ['area', 'col', 'row']
+    .some(key => Boolean(String(node.props[key] ?? '').trim()))
+
+  return [{ role, hasCoordinates, label }, ...nested]
+}
+
+/**
+ * MarkdownIt оборачивает одиночные inline HTML components в `<p>`. Slidev
+ * поднимает component-only параграф обратно в default slot, поэтому validator
+ * нормализует ту же границу.
+ *
+ * @param {DeckLiveNode} node
+ * @returns {DeckLiveNode[]}
+ */
+function normalizeTopLevelNode(node) {
+  if (node.kind !== 'element' || node.tag !== 'p')
+    return [node]
+
+  const meaningful = node.children.filter(child =>
+    child.kind !== 'comment'
+    && !(child.kind === 'text' && !child.content.trim()),
+  )
+
+  if (meaningful.length > 0
+    && meaningful.every(child => child.kind === 'element' && child.tag === 'Slot')) {
+    return meaningful
+  }
+
+  return [node]
+}
+
+/**
+ * Компилирует ровно ту top-level структуру, которую Slidev передаст layout-компоненту:
+ * Markdown уже превращён в HTML, а live Vue-компоненты сохранены как элементы.
+ *
+ * @param {string} content
+ * @returns {DeckLiveStructure}
+ */
+function extractDeckLiveStructure(content) {
+  const rendered = markdown.render(String(content))
+  const source = `<template>${rendered}</template>`
+  const { descriptor, errors } = parse(source, { filename: 'deck-slide.vue' })
+
+  if (errors.length) {
+    throw new Error(
+      `[DeckValidator] Не удалось разобрать live markup слайда: ${errors.map(formatCompilerError).join('; ')}`,
+    )
+  }
+
+  const children = (descriptor.template?.ast?.children ?? [])
+    .map(liveNode)
+    .filter(isLiveNode)
+    .flatMap(normalizeTopLevelNode)
+
+  return {
+    children,
+    intents: children.flatMap(collectSlotIntents),
+  }
+}
+
+/**
+ * @param {string} content
+ * @returns {ExplicitSlotIntent[]}
+ */
+function extractExplicitSlotIntents(content) {
+  return extractDeckLiveStructure(content).intents
+}
+
+module.exports = {
+  extractDeckLiveStructure,
+  extractExplicitSlotIntents,
+}

package/composables/decor-catalog.mjs

@@ -1,3 +1,5 @@
+import { themeDecorPath, themePhotoPath } from './theme-assets.mjs'
+
 const PHOTO_DECOR_SIZES = Object.freeze([
   { cols: [4, 6], rows: [4, 6], ratio: [0.85, 1.2] },
   { cols: [5, 12], rows: [3, 8], ratio: [1.15, 4] },
@@ -12,7 +14,7 @@ const PHOTO_DECOR_SIZES = Object.freeze([
 function photoDecor(number, meanings, tones, image = {}) {
   return {
     id: `decor-photo-${String(number).padStart(2, '0')}`,
-    src: `/photos/photo-${number}.png`,
+    src: themePhotoPath(number),
     sizes: PHOTO_DECOR_SIZES,
     meanings: ['photo', ...meanings],
     tones,
@@ -28,7 +30,7 @@ function photoDecor(number, meanings, tones, image = {}) {
 export const DEFAULT_DECOR_DATA = Object.freeze([
   {
     id: 'decor-cover-band-01',
-    src: '/decor/decor-1.svg',
+    src: themeDecorPath('decor-1.svg'),
     sizes: [{ cols: [3, 8], rows: [2, 5], ratio: [1, 1.5] }],
     meanings: ['cover', 'hero', 'course'],
     tones: ['green', 'orange', 'blue'],
@@ -40,7 +42,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-raster-01',
-    src: '/decor/decor-2.png',
+    src: themeDecorPath('decor-2.png'),
     sizes: [{ cols: [2, 6], rows: [2, 6], ratio: [0.75, 1.2] }],
     meanings: ['support', 'media'],
     tones: ['orange', 'light', 'warm'],
@@ -53,7 +55,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-square-orbit-01',
-    src: '/decor/decor-3.svg',
+    src: themeDecorPath('decor-3.svg'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['qa', 'testing', 'practice'],
     tones: ['blue', 'orange', 'green'],
@@ -65,7 +67,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-wide-01',
-    src: '/decor/decor-4.svg',
+    src: themeDecorPath('decor-4.svg'),
     sizes: [{ cols: [4, 8], rows: [2, 8], ratio: [1, 4] }],
     meanings: ['support', 'learning'],
     tones: ['green', 'blue', 'orange'],
@@ -77,7 +79,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-raster-02',
-    src: '/decor/decor-5.png',
+    src: themeDecorPath('decor-5.png'),
     sizes: [
       { cols: 6, rows: 5 },
       { cols: 6, rows: 6 },
@@ -97,7 +99,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-raster-03',
-    src: '/decor/decor-6.png',
+    src: themeDecorPath('decor-6.png'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['support', 'media'],
     tones: ['orange', 'warm'],
@@ -109,7 +111,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-media-square-01',
-    src: '/decor/decor-7.png',
+    src: themeDecorPath('decor-7.png'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['media', 'practice', 'support'],
     tones: ['blue', 'orange', 'green'],
@@ -122,7 +124,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-cover-vertical-01',
-    src: '/decor/decor-8.svg',
+    src: themeDecorPath('decor-8.svg'),
     sizes: [{ cols: [2, 4], rows: [3, 8], ratio: [0.25, 0.95] }],
     meanings: ['cover', 'hero', 'course'],
     tones: ['orange', 'green', 'blue'],
@@ -134,7 +136,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-cover-ribbon-01',
-    src: '/decor/decor-9.svg',
+    src: themeDecorPath('decor-9.svg'),
     sizes: [{ cols: [4, 8], rows: [2, 4], ratio: [1.4, 4] }],
     meanings: ['cover', 'hero', 'support'],
     tones: ['orange', 'blue', 'green'],
@@ -146,7 +148,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-rules-wide-01',
-    src: '/decor/decor-10.svg',
+    src: themeDecorPath('decor-10.svg'),
     sizes: [{ cols: [4, 12], rows: [3, 6], ratio: [1.4, 4] }],
     meanings: ['rules', 'webinar', 'qa'],
     tones: ['green', 'dark', 'blue', 'orange'],
@@ -163,7 +165,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-agenda-tall-01',
-    src: '/decor/decor-11.svg',
+    src: themeDecorPath('decor-11.svg'),
     sizes: [{ cols: [3, 4], rows: [8, 12], ratio: [0.25, 0.55] }],
     meanings: ['agenda', 'toc'],
     tones: ['blue', 'orange', 'green', 'dark'],
@@ -176,7 +178,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-signal-tall-01',
-    src: '/decor/decor-12.svg',
+    src: themeDecorPath('decor-12.svg'),
     sizes: [{ cols: [2, 4], rows: [4, 12], ratio: [0.2, 0.8] }],
     meanings: ['signal', 'cover', 'hero'],
     tones: ['blue', 'orange', 'green'],
@@ -188,7 +190,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-compact-01',
-    src: '/decor/decor-13.svg',
+    src: themeDecorPath('decor-13.svg'),
     sizes: [{ cols: [2, 6], rows: [2, 6], ratio: [0.75, 1.35] }],
     meanings: ['support', 'practice'],
     tones: ['green', 'blue', 'orange'],
@@ -200,7 +202,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-panel-vertical-01',
-    src: '/decor/decor-14.svg',
+    src: themeDecorPath('decor-14.svg'),
     sizes: [{ cols: [3, 5], rows: [4, 7], ratio: [0.45, 0.95] }],
     meanings: ['support', 'rules', 'qa'],
     tones: ['orange', 'blue', 'green'],
@@ -214,7 +216,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-wide-02',
-    src: '/decor/decor-15.svg',
+    src: themeDecorPath('decor-15.svg'),
     sizes: [{ cols: [4, 8], rows: [2, 5], ratio: [1.2, 4] }],
     meanings: ['support', 'learning'],
     tones: ['orange', 'green', 'blue'],
@@ -226,7 +228,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-wide-03',
-    src: '/decor/decor-16.svg',
+    src: themeDecorPath('decor-16.svg'),
     sizes: [{ cols: [5, 9], rows: [2, 4], ratio: [1.4, 4.5] }],
     meanings: ['support', 'learning'],
     tones: ['blue', 'green', 'orange'],
@@ -238,7 +240,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-media-square-02',
-    src: '/decor/decor-17.png',
+    src: themeDecorPath('decor-17.png'),
     sizes: [{ cols: [3, 5], rows: [3, 5], ratio: [0.8, 1.25] }],
     meanings: ['media', 'support'],
     tones: ['green', 'orange', 'blue'],
@@ -251,7 +253,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-media-square-03',
-    src: '/decor/decor-18.png',
+    src: themeDecorPath('decor-18.png'),
     sizes: [{ cols: [3, 6], rows: [3, 6], ratio: [0.75, 1.35] }],
     meanings: ['media', 'support'],
     tones: ['orange', 'blue', 'green'],
@@ -265,7 +267,7 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   },
   {
     id: 'decor-support-tall-01',
-    src: '/decor/decor-19.svg',
+    src: themeDecorPath('decor-19.svg'),
     sizes: [{ cols: [3, 5], rows: [3, 9], ratio: [0.35, 1.1] }],
     meanings: ['support', 'practice'],
     tones: ['blue', 'orange', 'green'],
@@ -277,62 +279,182 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
   photoDecor(
     1,
     ['portrait', 'workspace', 'home', 'learning'],
-    ['blue', 'light', 'neutral', 'yellow'],
+    ['orange', 'yellow', 'light', 'neutral', 'warm'],
     { position: '50% 44%', zoom: 1.06 },
   ),
   photoDecor(
     2,
-    ['portrait', 'workspace', 'learning'],
-    ['blue', 'green', 'dark', 'cool'],
+    ['portrait', 'workspace', 'outdoor', 'learning'],
+    ['orange', 'blue', 'green', 'yellow', 'warm'],
     { position: '50% 42%', zoom: 1.06 },
   ),
   photoDecor(
     3,
-    ['portrait', 'home', 'learning'],
-    ['orange', 'yellow', 'green', 'dark', 'warm'],
-    { position: '52% 45%', zoom: 1.04 },
+    ['portrait', 'workspace', 'office', 'learning'],
+    ['orange', 'yellow', 'dark', 'warm', 'neutral'],
+    { position: '50% 44%', zoom: 1.04 },
   ),
   photoDecor(
     4,
-    ['portrait', 'workspace', 'learning'],
-    ['blue', 'dark', 'neutral'],
-    { position: '50% 44%', zoom: 1.06 },
+    ['portrait', 'transit', 'workspace', 'learning'],
+    ['blue', 'green', 'light', 'yellow', 'cool'],
+    { position: '42% 42%', zoom: 1.06 },
   ),
   photoDecor(
     5,
-    ['portrait', 'outdoor', 'learning'],
-    ['blue', 'green', 'light', 'yellow'],
-    { position: '48% 44%', zoom: 1.08 },
+    ['portrait', 'workshop', 'outdoor', 'learning'],
+    ['blue', 'dark', 'cool', 'neutral'],
+    { position: '50% 40%', zoom: 1.08 },
   ),
   photoDecor(
     6,
-    ['portrait', 'home', 'learning'],
-    ['green', 'light', 'yellow', 'neutral'],
-    { position: '50% 40%', zoom: 1.04 },
+    ['portrait', 'workspace', 'home', 'learning'],
+    ['blue', 'dark', 'cool', 'neutral'],
+    { position: '50% 44%', zoom: 1.04 },
   ),
   photoDecor(
     7,
-    ['portrait', 'home', 'learning'],
-    ['orange', 'blue', 'yellow', 'dark', 'warm'],
-    { position: '50% 0%', zoom: 1.2 },
+    ['portrait', 'workspace', 'outdoor', 'learning'],
+    ['green', 'yellow', 'neutral', 'warm'],
+    { position: '50% 45%', zoom: 1.04 },
   ),
   photoDecor(
     8,
-    ['portrait', 'campus', 'learning'],
-    ['orange', 'yellow', 'green', 'neutral', 'warm'],
-    { position: '50% 45%', zoom: 1.06 },
+    ['workspace', 'programming', 'home', 'learning'],
+    ['orange', 'yellow', 'light', 'neutral', 'warm'],
+    { position: '50% 44%', zoom: 1.02 },
   ),
   photoDecor(
     9,
-    ['portrait', 'home', 'learning'],
-    ['blue', 'light', 'neutral', 'green'],
-    { position: '50% 45%', zoom: 1.05 },
+    ['portrait', 'workspace', 'learning'],
+    ['orange', 'yellow', 'light', 'neutral', 'warm'],
+    { position: '50% 44%', zoom: 1.05 },
   ),
   photoDecor(
     10,
-    ['portrait', 'home', 'learning'],
-    ['orange', 'yellow', 'dark', 'warm'],
-    { position: '50% 46%', zoom: 1.08 },
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['orange', 'green', 'yellow', 'warm', 'neutral'],
+    { position: '50% 44%', zoom: 1.05 },
+  ),
+  photoDecor(
+    11,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['blue', 'dark', 'cool', 'neutral'],
+    { position: '50% 42%', zoom: 1.06 },
+  ),
+  photoDecor(
+    12,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['green', 'blue', 'yellow', 'cool', 'neutral'],
+    { position: '50% 44%', zoom: 1.06 },
+  ),
+  photoDecor(
+    13,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 43%', zoom: 1.06 },
+  ),
+  photoDecor(
+    14,
+    ['portrait', 'outdoor', 'hero'],
+    ['blue', 'green', 'light', 'cool', 'neutral'],
+    { position: '50% 42%', zoom: 1.05 },
+  ),
+  photoDecor(
+    15,
+    ['portrait', 'outdoor', 'hero'],
+    ['orange', 'blue', 'warm', 'light'],
+    { position: '50% 47%', zoom: 1.04 },
+  ),
+  photoDecor(
+    16,
+    ['portrait', 'outdoor', 'hero'],
+    ['blue', 'dark', 'cool'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    17,
+    ['portrait', 'outdoor', 'mobile', 'learning'],
+    ['blue', 'green', 'cool', 'neutral'],
+    { position: '50% 44%', zoom: 1.04 },
+  ),
+  photoDecor(
+    18,
+    ['portrait', 'outdoor', 'mobile', 'community'],
+    ['blue', 'green', 'neutral', 'cool'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    19,
+    ['portrait', 'outdoor', 'learning'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 45%', zoom: 1.06 },
+  ),
+  photoDecor(
+    20,
+    ['group', 'community', 'collaboration'],
+    ['orange', 'warm', 'light', 'neutral'],
+    { position: '50% 45%', zoom: 1.05 },
+  ),
+  photoDecor(
+    21,
+    ['group', 'workspace', 'collaboration', 'learning'],
+    ['orange', 'warm', 'light', 'neutral'],
+    { position: '50% 45%', zoom: 1.03 },
+  ),
+  photoDecor(
+    22,
+    ['group', 'community', 'outdoor'],
+    ['blue', 'green', 'light', 'cool', 'neutral'],
+    { position: '50% 43%', zoom: 1.04 },
+  ),
+  photoDecor(
+    23,
+    ['group', 'community', 'outdoor'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 46%', zoom: 1.04 },
+  ),
+  photoDecor(
+    24,
+    ['group', 'community', 'collaboration'],
+    ['green', 'orange', 'warm', 'light', 'neutral'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    25,
+    ['group', 'workshop', 'collaboration', 'learning'],
+    ['green', 'orange', 'warm', 'light'],
+    { position: '50% 44%', zoom: 1.03 },
+  ),
+  photoDecor(
+    26,
+    ['group', 'community', 'office', 'collaboration'],
+    ['blue', 'green', 'light', 'neutral', 'cool'],
+    { position: '50% 45%', zoom: 1.04 },
+  ),
+  photoDecor(
+    27,
+    ['group', 'community', 'mobile', 'outdoor'],
+    ['blue', 'light', 'cool', 'neutral'],
+    { position: '50% 46%', zoom: 1.04 },
+  ),
+  photoDecor(
+    28,
+    ['portrait', 'workspace', 'office', 'learning'],
+    ['light', 'neutral', 'orange', 'warm'],
+    { position: '50% 45%', zoom: 1.05 },
+  ),
+  photoDecor(
+    29,
+    ['portrait', 'outdoor', 'hero'],
+    ['orange', 'blue', 'green', 'warm', 'light'],
+    { position: '50% 45%', zoom: 1.06 },
+  ),
+  photoDecor(
+    30,
+    ['portrait', 'outdoor', 'hero'],
+    ['blue', 'orange', 'cool', 'neutral'],
+    { position: '62% 42%', zoom: 1.08 },
   ),
 ])
 

package/composables/layout-authoring.ts

@@ -10,12 +10,16 @@ import {
 import {
   resolveLayoutSpec,
   resolveLayoutVariant,
+  resolveLayoutRecipe,
+  resolveLayoutSlotProps,
+  THEME_LAYOUT_ROLES,
   type ThemeLayout,
   type ThemeLayoutHeader,
   type ThemeLayoutRole,
+  type ThemeLayoutRecipe,
+  type ThemeLayoutSpec,
   type ThemeLayoutSlotSpec,
-} from './layout-registry'
-import { resolveLayoutRecipe, resolveLayoutSlotProps, THEME_LAYOUT_ROLES, type ThemeLayoutRecipe, type ThemeLayoutSpec } from './layout-recipes'
+} from './layout-recipes'
 import { isBlankTextVNode, isCommentVNode } from './layout-vnode'
 import { createSlotRules, type SlotRules } from './slot-rules'
 import {

package/composables/layout-markdown.mjs

@@ -1,3 +1,36 @@
+const INLINE_WHITESPACE = /[ \t\r\n\f\v]+/g
+
+/**
+ * @param {string} value
+ */
+export function normalizeInlineText(value) {
+  return value.replace(INLINE_WHITESPACE, ' ').trim()
+}
+
+/**
+ * @param {string} source
+ */
+export function dedentMarkdownSource(source) {
+  const lines = String(source ?? '').replace(/\r\n/g, '\n').split('\n')
+  const nonEmpty = lines.filter(line => line.trim())
+
+  if (!nonEmpty.length)
+    return ''
+
+  const minIndent = Math.min(...nonEmpty.map((line) => {
+    const match = line.match(/^(\s*)/)
+    return match ? match[1].length : 0
+  }))
+
+  if (!minIndent)
+    return source.trim()
+
+  return lines
+    .map(line => (line.trim() ? line.slice(minIndent) : line))
+    .join('\n')
+    .trim()
+}
+
 /**
  * @param {unknown} input
  * @returns {{ level: number, text: string } | null}