slidev-theme-practicum 0.1.0

package/composables/layout-vnode.ts

@@ -0,0 +1,43 @@
+import { Comment, Text as NativeText, type VNode } from 'vue'
+
+export function camelToKebab(key: string) {
+  return key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}
+
+export function readVNodeProp<T = unknown>(node: VNode | null | undefined, key: string) {
+  const nodeProps = (node?.props ?? {}) as Record<string, T | undefined>
+  if (key in nodeProps)
+    return nodeProps[key]
+
+  const kebabKey = camelToKebab(key)
+  if (kebabKey !== key && kebabKey in nodeProps)
+    return nodeProps[kebabKey]
+
+  return undefined
+}
+
+export function readVNodeTypeName(node: VNode | null | undefined) {
+  if (typeof node?.type === 'string')
+    return node.type
+
+  if (typeof node?.type === 'object' && node.type) {
+    const component = node.type as { name?: string, __name?: string }
+    return component.name ?? component.__name ?? 'anonymous-component'
+  }
+
+  return 'anonymous-node'
+}
+
+export function isBlankTextVNode(node: VNode | null | undefined) {
+  return node?.type === NativeText
+    && typeof node.children === 'string'
+    && !node.children.trim()
+}
+
+export function isCommentVNode(node: VNode | null | undefined) {
+  return node?.type === Comment
+}
+
+export function isNamedComponentVNode(node: VNode | null | undefined, name: string, component?: unknown) {
+  return node?.type === component || readVNodeTypeName(node) === name
+}

package/composables/logo-mark.mjs

@@ -0,0 +1,5 @@
+export const shortLogoMarkRectX = 45.8672
+export const shortLogoMarkSize = 43
+export const shortLogoMarkRadius = 16.125
+export const shortLogoMarkTransform = `translate(-${shortLogoMarkRectX} 0)`
+export const shortLogoMarkPath = 'M68.1769 5.26562L68.1769 19.9499L80.117 11.5894L81.0419 12.9103L68.978 21.3575L82.3292 27.5833L81.6477 29.0447L68.1761 22.7627V37.623H66.5636V30.7105L65.3632 37.5179L63.7752 37.2379L65.4808 27.5654L61.3627 36.3967L59.9012 35.7152L65.1864 24.3812L55.5328 32.4815L54.4963 31.2463L64.8914 22.5238L51.3749 23.7063L51.2344 22.1L65.3588 20.8643L54.4989 11.7517L55.5354 10.5164L66.5644 19.7709L66.5644 5.26562H68.1769Z'

package/composables/slide-layout.ts

@@ -0,0 +1,43 @@
+import {
+  compileLayoutAuthoring,
+  createLayoutSlotPlanState,
+  type CompiledLayoutAuthoring,
+  type LayoutAuthoringInput,
+} from './layout-authoring'
+import type { LayoutShorthandComponents } from './layout-shorthands'
+import {
+  createSlotPlacementSession,
+  type SlotPlacementSession,
+} from './slot-placement'
+
+export type SlideLayoutInput = Omit<LayoutAuthoringInput, 'components' | 'slotPlanState'>
+export type CompiledSlideLayout = CompiledLayoutAuthoring
+
+export type SlideLayout = SlotPlacementSession & {
+  compile(input: SlideLayoutInput): CompiledSlideLayout
+}
+
+export function createSlideLayout(input: {
+  components: LayoutShorthandComponents
+}): SlideLayout {
+  const slotPlanState = createLayoutSlotPlanState()
+  let current: CompiledSlideLayout | null = null
+  const placement = createSlotPlacementSession({
+    layout: () => current?.slotPlan ?? null,
+  })
+
+  return {
+    compile(authoringInput) {
+      const compiled = compileLayoutAuthoring({
+        ...authoringInput,
+        components: input.components,
+        slotPlanState,
+      })
+
+      current = compiled
+      return compiled
+    },
+    register: placement.register,
+    snapshot: placement.snapshot,
+  }
+}

package/composables/slot-placement.ts

@@ -0,0 +1,195 @@
+import { inject, provide } from 'vue'
+import {
+  resolveGridPlacement,
+  type GridCursor,
+  type GridPlacedItem,
+  type GridPlacementInput,
+  type GridPlacementStyle,
+  type GridRect,
+} from './grid-placement'
+import type { LayoutSlotPlan, ResolvedLayoutSlot } from './layout-authoring'
+import type { ThemeLayoutRole, ThemeLayoutSlotSpec } from './layout-registry'
+import { createSlotRules } from './slot-rules'
+
+export type GridFootprint = {
+  cols: number
+  rows: number
+  label: string
+}
+
+export type SlotPlacementInput = {
+  id: string
+  label?: string
+  role?: ThemeLayoutRole | ''
+  area?: string
+  col?: string
+  row?: string
+  overrides?: Partial<ThemeLayoutSlotSpec>
+}
+
+export type ResolvedSlotPlacement = {
+  rect: GridRect
+  style: GridPlacementStyle
+  footprint: GridFootprint
+  layoutSlot: ResolvedLayoutSlot | null
+}
+
+export type SlotPlacementHandle = {
+  update(input: SlotPlacementInput): void
+  dispose(): void
+}
+
+export type SlotPlacementSnapshot = {
+  placements: readonly (ResolvedSlotPlacement & { id: string, label: string })[]
+}
+
+export type SlotPlacementSession = {
+  register(input: SlotPlacementInput, onResolve: (result: ResolvedSlotPlacement) => void): SlotPlacementHandle
+  snapshot(): SlotPlacementSnapshot
+}
+
+type SlotPlacementEntry = {
+  input: SlotPlacementInput
+  onResolve: (result: ResolvedSlotPlacement) => void
+  order: number
+}
+
+const SlotPlacementSessionKey = Symbol('theme-slot-placement-session')
+const slotRules = createSlotRules({ Slot: null })
+
+function resolveEntry(input: SlotPlacementInput, layout: LayoutSlotPlan | null) {
+  const intent = slotRules.normalize(input, { layoutActive: Boolean(layout) })
+
+  if (intent.kind === 'manual') {
+    return {
+      label: intent.label,
+      layoutSlot: null,
+      placement: {
+        area: intent.area,
+        col: intent.col,
+        row: intent.row,
+        label: intent.label,
+      } satisfies GridPlacementInput,
+    }
+  }
+
+  const layoutSlot = layout!.resolveRoleSlot({
+    id: intent.id,
+    role: intent.role,
+    overrides: intent.overrides,
+    label: intent.label,
+  })
+
+  return {
+    label: intent.label,
+    layoutSlot,
+    placement: {
+      area: layoutSlot.area,
+      label: intent.label,
+    } satisfies GridPlacementInput,
+  }
+}
+
+function footprintFromRect(rect: GridRect, label: string): GridFootprint {
+  return {
+    cols: rect.colEnd - rect.colStart,
+    rows: rect.rowEnd - rect.rowStart,
+    label,
+  }
+}
+
+export function createSlotPlacementSession(input: {
+  layout: () => LayoutSlotPlan | null
+}): SlotPlacementSession {
+  const entries = new Map<string, SlotPlacementEntry>()
+  let nextOrder = 0
+  let currentSnapshot: SlotPlacementSnapshot = { placements: [] }
+
+  function recompute() {
+    const layout = input.layout()
+    const occupied: GridPlacedItem[] = []
+    let cursor: GridCursor = { row: 1, col: 1 }
+    const placements: (ResolvedSlotPlacement & { id: string, label: string })[] = []
+
+    const orderedEntries = [...entries.values()].sort((a, b) => a.order - b.order)
+
+    for (const entry of orderedEntries) {
+      const resolved = resolveEntry(entry.input, layout)
+      const result = resolveGridPlacement(resolved.placement, {
+        occupied,
+        cursor,
+        label: resolved.label,
+      })
+      const placement = {
+        rect: result.rect,
+        style: result.style,
+        footprint: footprintFromRect(result.rect, resolved.label),
+        layoutSlot: resolved.layoutSlot,
+      }
+
+      occupied.push({
+        id: entry.input.id,
+        label: resolved.label,
+        ...result.rect,
+      })
+
+      entry.onResolve(placement)
+      placements.push({
+        id: entry.input.id,
+        label: resolved.label,
+        ...placement,
+      })
+      cursor = result.nextCursor
+    }
+
+    currentSnapshot = { placements }
+  }
+
+  return {
+    register(placementInput, onResolve) {
+      entries.set(placementInput.id, {
+        input: placementInput,
+        onResolve,
+        order: nextOrder++,
+      })
+      recompute()
+
+      return {
+        update(nextInput) {
+          const current = entries.get(placementInput.id)
+          if (!current)
+            return
+
+          entries.set(placementInput.id, {
+            ...current,
+            input: nextInput,
+          })
+          recompute()
+        },
+        dispose() {
+          input.layout()?.unregisterRoleSlot(placementInput.id)
+          if (!entries.delete(placementInput.id))
+            return
+
+          recompute()
+        },
+      }
+    },
+    snapshot() {
+      return currentSnapshot
+    },
+  }
+}
+
+export function provideSlotPlacementSession(session: SlotPlacementSession) {
+  provide(SlotPlacementSessionKey, session)
+}
+
+export function useSlotPlacementSession() {
+  const session = inject<SlotPlacementSession | null>(SlotPlacementSessionKey, null)
+
+  if (!session)
+    throw new Error('[Slot] Slot должен находиться внутри Slide.')
+
+  return session
+}

package/composables/slot-rules.ts

@@ -0,0 +1,147 @@
+import type { VNode } from 'vue'
+import { isBlankTextVNode, isCommentVNode, isNamedComponentVNode, readVNodeProp, readVNodeTypeName } from './layout-vnode'
+import { THEME_LAYOUT_ROLES, type ThemeLayoutRole, type ThemeLayoutSlotSpec } from './layout-recipes'
+import type { SlotPlacementInput } from './slot-placement'
+
+export type SlotNodeIntent = {
+  role: string
+  hasCoordinates: boolean
+  label: string
+}
+
+export type SlotChildrenRuleInput = {
+  label: string
+}
+
+export type SlotLayoutChildRuleInput = {
+  label: string
+}
+
+export type SlotIntent =
+  | { kind: 'manual', id: string, label: string, area: string, col: string, row: string }
+  | { kind: 'layout', id: string, label: string, role: ThemeLayoutRole, overrides: Partial<ThemeLayoutSlotSpec> }
+
+export type SlotRules = {
+  read(node: VNode): SlotNodeIntent | null
+  assertChildren(children: readonly VNode[], input: SlotChildrenRuleInput): VNode[]
+  assertLayoutChild(node: VNode, input: SlotLayoutChildRuleInput): VNode
+  normalize(input: SlotPlacementInput, context: { layoutActive: boolean }): SlotIntent
+}
+
+const THEME_LAYOUT_ROLE_SET = new Set<ThemeLayoutRole>(THEME_LAYOUT_ROLES)
+
+export function isThemeLayoutRole(value: unknown): value is ThemeLayoutRole {
+  return typeof value === 'string' && THEME_LAYOUT_ROLE_SET.has(value as ThemeLayoutRole)
+}
+
+function readStringProp(node: VNode, key: string) {
+  const value = readVNodeProp<string>(node, key)
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+function normalizeLabel(input: SlotPlacementInput) {
+  return input.label?.trim() || input.id
+}
+
+function hasCoordinates(input: SlotPlacementInput | VNode) {
+  if ('props' in input) {
+    return Boolean(
+      readVNodeProp<string>(input, 'area')
+      || readVNodeProp<string>(input, 'col')
+      || readVNodeProp<string>(input, 'row'),
+    )
+  }
+
+  return Boolean(input.area || input.col || input.row)
+}
+
+export function createSlotRules(input: { Slot: unknown }): SlotRules {
+  function read(node: VNode): SlotNodeIntent | null {
+    if (!isNamedComponentVNode(node, 'Slot', input.Slot))
+      return null
+
+    return {
+      role: readStringProp(node, 'role'),
+      hasCoordinates: hasCoordinates(node),
+      label: readStringProp(node, 'label'),
+    }
+  }
+
+  return {
+    read,
+    assertChildren(children, options) {
+      const unsupportedNodes = children.filter(node =>
+        !isCommentVNode(node)
+        && !isBlankTextVNode(node)
+        && !read(node)?.role,
+      )
+
+      if (unsupportedNodes.length) {
+        const unsupportedLabels = unsupportedNodes.map(readVNodeTypeName).join(', ')
+        throw new Error(
+          `[Slide] ${options.label} ожидает только Slot role="${THEME_LAYOUT_ROLES.join('|')}" children в explicit layout mode. Неподдерживаемые children: ${unsupportedLabels}.`,
+        )
+      }
+
+      return [...children]
+    },
+    assertLayoutChild(node, options) {
+      const intent = read(node)
+
+      if (!intent?.role)
+        return node
+
+      const { role } = intent
+
+      if (!isThemeLayoutRole(role)) {
+        throw new Error(
+          `[Slide] ${options.label} получил неизвестную Slot role "${role}". Разрешены только: ${THEME_LAYOUT_ROLES.join(', ')}.`,
+        )
+      }
+
+      if (intent.hasCoordinates) {
+        throw new Error('[Slide] Slot внутри layout-слайда не должен получать area, col или row напрямую.')
+      }
+
+      return node
+    },
+    normalize(placementInput, context) {
+      const label = normalizeLabel(placementInput)
+
+      if (placementInput.role && !context.layoutActive) {
+        throw new Error('[Slot] role разрешён только внутри layout-слайда; вне layout-слайда используйте area, col или row.')
+      }
+
+      if (context.layoutActive && placementInput.role && !isThemeLayoutRole(placementInput.role)) {
+        throw new Error(`[Slot] role внутри layout-слайда должен быть одним из: ${THEME_LAYOUT_ROLES.join(', ')}.`)
+      }
+
+      if (context.layoutActive && placementInput.role && hasCoordinates(placementInput)) {
+        throw new Error('[Slot] area, col и row запрещены внутри layout-слайда; задайте role и выберите variant во frontmatter.')
+      }
+
+      if (context.layoutActive && !placementInput.role) {
+        throw new Error('[Slot] area, col и row запрещены внутри layout-слайда; все Slot внутри layout должны использовать role.')
+      }
+
+      if (!context.layoutActive || !placementInput.role) {
+        return {
+          kind: 'manual',
+          id: placementInput.id,
+          label,
+          area: placementInput.area ?? '',
+          col: placementInput.col ?? '',
+          row: placementInput.row ?? '',
+        }
+      }
+
+      return {
+        kind: 'layout',
+        id: placementInput.id,
+        label,
+        role: placementInput.role,
+        overrides: placementInput.overrides ?? {},
+      }
+    },
+  }
+}