slidev-theme-practicum 0.1.2 → 0.1.4

package/README.md

@@ -148,7 +148,7 @@ layout: cover | message | explainer | collection | none
 | `decor`                                                      | объект                                     | нет           | семантический декоративный слой               |
 | `background`                                                 | объект или строка изображения              | нет           | явно заданное фоновое изображение             |
 
-`Slot` согласует размер до трёх прямых `Text`-детей с диапазонами `size` и `priority`. Несколько `Slot` с одинаковым `fit-group` получают общий размерный вектор: берётся максимальный вариант, который помещается во все ячейки группы. Атрибуты потока принадлежат дочерним элементам: `Text align="end"` прибивает строку внутри потока. Отдельный flow-атрибут есть у `Person`, когда блок автора используется как прямой ребёнок `Slot`.
+`Slot` согласует размер до трёх прямых `Text`-детей с диапазонами `size` и `priority`. Несколько `Slot` с одинаковым `fit-group` получают общий размерный вектор: берётся максимальный вариант, который помещается во все ячейки группы. Если диапазоны одноимённых позиций не пересекаются, слоты сохраняют независимую локальную подгонку вместо ошибки рендера. Атрибуты потока принадлежат дочерним элементам: `Text align="end"` прибивает строку внутри потока. Отдельный flow-атрибут есть у `Person`, когда блок автора используется как прямой ребёнок `Slot`.
 
 ## Text API
 

package/components/Slot.vue

@@ -2,18 +2,13 @@
 import { useSlideContext } from '@slidev/client'
 import {
   computed,
-  defineComponent,
   getCurrentInstance,
-  h,
-  isVNode,
   onBeforeUnmount,
   shallowRef,
   watchEffect,
-  type CSSProperties,
-  type PropType,
-  type VNode,
 } from 'vue'
 import ImageRenderer from './ImageRenderer.vue'
+import TextFitGroup from './TextFitGroup.vue'
 import { createThemeMedia } from '../composables/theme-media.mjs'
 import type { ThemeLayoutSlotSpec } from '../composables/layout-recipes'
 import { useSlotPlacementSession, type ResolvedSlotPlacement } from '../composables/slot-placement'
@@ -23,8 +18,6 @@ import {
   type SlotGapInput,
   type SlotMarginInput,
 } from '../composables/slot-spacing'
-import { useTextFitScope } from '../composables/text-fit-scope'
-import { createTextFitRuntime } from '../composables/text-fit-runtime'
 import { useThemeConfig } from '../composables/use-theme-config'
 import { resolveSlotTheme, themeVars, type ThemeSlotSurface } from '../composables/theme-foundation'
 import { camelToKebab } from '../composables/layout-vnode'
@@ -65,49 +58,6 @@ const layoutOverrideKeys = [
   'centered',
 ] as const satisfies readonly (keyof ThemeLayoutSlotSpec)[]
 
-const textFit = createTextFitRuntime()
-
-const SlotContent = defineComponent({
-  name: 'SlotContent',
-  props: {
-    contentStyle: {
-      type: Object as PropType<CSSProperties>,
-      required: true,
-    },
-    fitGroup: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(contentProps, { slots }) {
-    const contentElement = shallowRef<HTMLElement | null>(null)
-    const textFitScope = useTextFitScope()
-    const sharedKey = computed(() => {
-      if (!contentProps.fitGroup)
-        return ''
-
-      return `${textFitScope}:${contentProps.fitGroup}`
-    })
-    let currentChildren: VNode[] = []
-    const { apply } = textFit.useGroup({
-      target: contentElement,
-      nodes: () => currentChildren,
-      sharedKey,
-    })
-
-    return () => {
-      const children = (slots.default?.() ?? []).filter(isVNode)
-      currentChildren = children
-
-      return h('div', {
-        ref: contentElement,
-        class: 'Slot-Content',
-        style: contentProps.contentStyle,
-      }, apply(children))
-    }
-  },
-})
-
 const props = withDefaults(defineProps<{
   as?: string
   role?: SlotRole
@@ -318,9 +268,9 @@ const surfaceClass = computed(() => {
                      class="Slot-BackgroundLayer"
                      :layer="backgroundLayer" />
     </div>
-    <SlotContent :content-style="contentStyle" :fit-group="props.fitGroup">
+    <TextFitGroup class="Slot-Content" :style="contentStyle" :fit-group="props.fitGroup">
       <slot />
-    </SlotContent>
+    </TextFitGroup>
   </component>
 </template>
 

package/components/TextFitGroup.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {
+  computed,
+  defineComponent,
+  h,
+  isVNode,
+  shallowRef,
+  type PropType,
+  type VNode,
+} from 'vue'
+import { createTextFitRuntime } from '../composables/text-fit-runtime'
+import { useTextFitScope } from '../composables/text-fit-scope'
+
+const textFit = createTextFitRuntime()
+
+const props = defineProps<{
+  fitGroup: string
+}>()
+
+const TextFitGroupContent = defineComponent({
+  name: 'TextFitGroupContent',
+  props: {
+    fitGroup: {
+      type: String as PropType<string>,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const groupElement = shallowRef<HTMLElement | null>(null)
+    const textFitScope = useTextFitScope()
+    const sharedKey = computed(() => {
+      if (!props.fitGroup)
+        return ''
+
+      return `${textFitScope}:${props.fitGroup}`
+    })
+    let currentChildren: VNode[] = []
+    const { apply } = textFit.useGroup({
+      target: groupElement,
+      nodes: () => currentChildren,
+      sharedKey,
+    })
+
+    return () => {
+      const children = (slots.default?.() ?? []).filter(isVNode)
+      currentChildren = children
+
+      return h('div', {
+        ref: groupElement,
+        class: 'TextFitGroup',
+      }, apply(children))
+    }
+  },
+})
+</script>
+
+<template>
+  <TextFitGroupContent :fit-group="props.fitGroup">
+    <slot />
+  </TextFitGroupContent>
+</template>
+
+<style scoped>
+.TextFitGroup {
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: inherit;
+}
+</style>

package/components/Timeline.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed, shallowRef, type ComponentPublicInstance } from 'vue'
-import { resolveTimelineItemGridStyle } from '../composables/timeline-grid'
+import { computed, getCurrentInstance, shallowRef, type ComponentPublicInstance } from 'vue'
+import { resolveTimelineItemGridStyle, resolveTimelineLabelSpan } from '../composables/timeline-grid'
 import { createTextFitRuntime, type ThemeTextSize } from '../composables/text-fit-runtime'
+import Text from './Text.vue'
+import TextFitGroup from './TextFitGroup.vue'
 
 const TIMELINE_ACTIVE_YEAR_FALLBACK_SIZE: ThemeTextSize = 9
+const timelineFitGroup = `timeline-${getCurrentInstance()?.uid ?? 'default'}`
 
 const props = defineProps({
   items: {
@@ -16,6 +19,7 @@ const timelineElement = shallowRef<HTMLElement | null>(null)
 const activeYearElement = shallowRef<HTMLElement | null>(null)
 const hasActiveItem = computed(() => props.items.some(item => item.active))
 const activeIndices = computed(() => props.items.flatMap((item, itemIndex) => item.active ? [itemIndex] : []))
+const labelSpan = computed(() => resolveTimelineLabelSpan(props.items))
 const TIMELINE_ACTIVE_YEAR_MAX_SIZE = computed<ThemeTextSize>(() => 12)
 const textFit = createTextFitRuntime()
 
@@ -64,12 +68,15 @@ const { size: fittedActiveYearSize } = textFit.useElement({
   ],
 })
 
-const timelineStyle = computed(() => hasActiveItem.value
-  ? {
-      '--theme-timeline-active-year-size': `var(--theme-text-size-${fittedActiveYearSize.value})`,
-      '--theme-timeline-active-year-line': `var(--theme-text-line-${fittedActiveYearSize.value})`,
-    }
-  : {})
+const timelineStyle = computed(() => ({
+  '--theme-timeline-label-width': `var(--theme-grid-span-${labelSpan.value}-width)`,
+  ...(hasActiveItem.value
+    ? {
+        '--theme-timeline-active-year-size': `var(--theme-text-size-${fittedActiveYearSize.value})`,
+        '--theme-timeline-active-year-line': `var(--theme-text-line-${fittedActiveYearSize.value})`,
+      }
+    : {}),
+}))
 
 function getItemGridStyle(index: number) {
   assertSingleActiveItem()
@@ -89,9 +96,21 @@ function getItemGridStyle(index: number) {
          class="Timeline-Item"
          :style="getItemGridStyle(index)"
          :class="{ 'Timeline-Item_active': item.active }">
-      <div :ref="element => setYearElement(element, item.active)" class="Timeline-Year">{{ item.year }}</div>
+      <div :ref="element => setYearElement(element, item.active)" class="Timeline-Year">
+        <span v-if="item.active">{{ item.year }}</span>
+        <TextFitGroup v-else
+                      class="Timeline-YearFitGroup"
+                      :fit-group="`${timelineFitGroup}-years`">
+          <Text size="4-7">{{ item.year }}</Text>
+        </TextFitGroup>
+      </div>
       <div class="Timeline-Dot" />
-      <div class="Timeline-Label">{{ item.label }}</div>
+      <div class="Timeline-Label">
+        <Text v-if="item.active" size="2-3">{{ item.label }}</Text>
+        <TextFitGroup v-else :fit-group="`${timelineFitGroup}-labels`">
+          <Text size="2-3">{{ item.label }}</Text>
+        </TextFitGroup>
+      </div>
     </div>
   </div>
 </template>
@@ -102,6 +121,7 @@ function getItemGridStyle(index: number) {
   --timeline-dot-size: calc(var(--theme-grid-module) * 4);
   --theme-timeline-active-year-size: var(--theme-text-size-9);
   --theme-timeline-active-year-line: var(--theme-text-line-9);
+  --theme-timeline-label-width: var(--theme-grid-span-3-width);
   position: relative;
   display: grid;
   grid-template-columns: repeat(var(--theme-grid-columns), minmax(0, 1fr));
@@ -122,6 +142,7 @@ function getItemGridStyle(index: number) {
 
 .Timeline-Item {
   position: relative;
+  min-width: 0;
   display: grid;
   grid-template-rows:
     var(--timeline-block-height)
@@ -131,14 +152,18 @@ function getItemGridStyle(index: number) {
 }
 
 .Timeline-Year {
+  min-width: 0;
   min-height: var(--timeline-block-height);
+  padding-right: var(--theme-grid-gap);
   display: flex;
   align-items: flex-end;
-  font-size: var(--theme-text-size-7);
-  line-height: var(--theme-text-line-7);
   color: var(--theme-text);
 }
 
+.Timeline-YearFitGroup {
+  padding-bottom: var(--theme-grid-module);
+}
+
 .Timeline-Dot {
   width: var(--timeline-dot-size);
   height: var(--timeline-dot-size);
@@ -150,11 +175,10 @@ function getItemGridStyle(index: number) {
 
 .Timeline-Label {
   min-height: var(--timeline-block-height);
-  max-width: var(--theme-grid-span-2-width);
+  width: min(100%, var(--theme-timeline-label-width));
+  padding-right: var(--theme-grid-gap);
   padding-top: var(--theme-slot-margin-3);
   color: var(--theme-text-muted);
-  font-size: var(--theme-text-size-2);
-  line-height: var(--theme-text-line-2);
 }
 
 .Timeline_has_active .Timeline-Year {

package/composables/decor-catalog.mjs

@@ -159,7 +159,6 @@ export const DEFAULT_DECOR_DATA = Object.freeze([
       x: '50%',
       y: '12%',
       zoom: 3,
-      color: 'var(--theme-color-dark-0)',
       opacity: 1,
     },
   },

package/composables/layout-shorthands.ts

@@ -972,7 +972,7 @@ function buildFactsChildren(children: VNode[], context: LayoutShorthandContext)
   const footnoteText = footnote ? readInlineText(footnote) : ''
   const rowFactSize: ThemeTextSizeInput = isQuartet ? '5-8' : isDuo ? '5-10' : '5-9'
   const stackedFactSize: ThemeTextSizeInput = '5-9'
-  const stackedLabelSize: ThemeTextSizeInput = '2-4'
+  const stackedLabelSize: ThemeTextSizeInput = '3-5'
   const rowLabelSize: ThemeTextSizeInput = '2-4'
   const featuredFactSize: ThemeTextSizeInput = isFeatured ? '9-12' : isStacked ? stackedFactSize : rowFactSize
   const supportFactSize: ThemeTextSizeInput = isFeatured ? '5-7' : isStacked ? stackedFactSize : rowFactSize

package/composables/text-fit-runtime.ts

@@ -366,7 +366,7 @@ function combineSlotTextFitGroups(groups: SlotTextFitGroup[]) {
   })
 
   if (items.some(item => item.minSize > item.maxSize))
-    throw new Error('[Text] shared size ranges cannot be coordinated because their ranges do not overlap.')
+    return null
 
   return {
     initialSizes: firstTextFitCandidate(items),

package/composables/timeline-grid.ts

@@ -2,6 +2,10 @@ export interface TimelineGridItem {
   active?: boolean
 }
 
+export function resolveTimelineLabelSpan(items: readonly TimelineGridItem[]): 3 | 5 {
+  return items.length <= 2 ? 5 : 3
+}
+
 export function resolveTimelineItemGridStyle(
   items: readonly TimelineGridItem[],
   index: number,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-practicum",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Strict Slidev presentation theme with a 12x12 grid, editorial layouts, and low-level slot composition API",
   "keywords": [
     "slidev-theme",

package/scripts/browser-smoke.mjs

@@ -11,6 +11,7 @@ import {
 const PROJECT_ROOT = resolve(import.meta.dirname, '..')
 const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
 const REPRESENTATIVE_SLIDES = [1, 9, 15, 20, 32, 40, 41]
+const VISUAL_ONLY_SLIDES = [17, 18]
 const LIFECYCLE_EVENT = 'practicum:slide-lifecycle'
 const LIFECYCLE_STATE_KEY = '__practicumBrowserLifecycle'
 const THEME_MEDIA = [
@@ -388,6 +389,17 @@ export async function runBrowserSmoke() {
       )
     }
 
+    for (const slideNumber of VISUAL_ONLY_SLIDES) {
+      activeSlide = `слайд ${slideNumber}`
+      await inspectSlide(
+        page,
+        server.origin,
+        slideNumber,
+        undefined,
+        () => inFlightTracker.waitForIdle(),
+      )
+    }
+
     for (const asset of THEME_MEDIA) {
       activeSlide = `медиа: ${asset.label}`
       await loadThemeImage(page, server.origin, asset)
@@ -401,7 +413,7 @@ export async function runBrowserSmoke() {
     assertNoDiagnostics('неуспешные запросы того же источника', failedRequests)
 
     console.log(
-      `Браузерная проверка: слайды=${REPRESENTATIVE_SLIDES.length}, `
+      `Браузерная проверка: слайды=${REPRESENTATIVE_SLIDES.length + VISUAL_ONLY_SLIDES.length}, `
       + `ошибкиСтраницы=${pageErrors.length}, ошибкиКонсоли=${consoleErrors.length}, `
       + `ошибочныеОтветы=${failedResponses.length}, активныеЗапросы=${inFlightTracker.size}, `
       + `переполнение=0, медиа=${THEME_MEDIA.length}, переходыЖЦ=${REPRESENTATIVE_SLIDES.length - 1}`,