lumina-slides 8.9.4 → 9.0.0

package/src/components/layouts/LayoutFeatures.vue

@@ -0,0 +1,121 @@
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div :class="[
+            'features-root w-full max-w-full flex flex-col justify-center overflow-x-hidden',
+            data.sizing === 'container' ? 'min-h-full' : 'min-h-screen'
+        ]">
+            <!-- Header -->
+            <LuminaElement :id="headerId" :class="[data.class || '', 'text-center lg:text-left max-w-6xl min-w-0']"
+                :style="{ marginBottom: 'var(--lumina-space-2xl)' }">
+                <h2 class="font-bold break-words" :style="{
+                    fontFamily: 'var(--lumina-font-heading)',
+                    fontSize: data.sizing === 'container' ? 'var(--lumina-text-3xl)' : 'var(--lumina-text-5xl)',
+                    marginBottom: 'var(--lumina-space-md)',
+                    letterSpacing: 'var(--lumina-tracking-tighter)',
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                    textShadow: '0 2px 10px rgba(0,0,0,0.1)'
+                }">
+                    {{ data.title }}
+                </h2>
+                <p v-if="data.description" class="break-words" :style="{
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                    opacity: 0.9,
+                    fontSize: data.sizing === 'container' ? 'var(--lumina-text-sm)' : 'var(--lumina-text-xl)'
+                }">
+                    {{ data.description }}
+                </p>
+            </LuminaElement>
+
+            <!-- Grid -->
+            <div :class="['features-grid', data.sizing !== 'container' ? 'features-grid--multi' : '']">
+                <LuminaElement v-for="(feature, i) in data.features" :key="i" :id="featureId(i)"
+                    :class="['glass-panel group min-w-0', feature.class || '']" :style="{
+                        borderRadius: 'var(--lumina-card-radius)',
+                        padding: data.sizing === 'container' ? 'var(--lumina-space-lg)' : 'var(--lumina-card-padding)',
+                        borderTop: '1px solid var(--lumina-color-border-subtle)',
+                        transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
+                    }">
+                    <!-- Icon -->
+                    <div class="flex items-center justify-center group-hover:scale-110 shrink-0" :style="{
+                        color: 'white',
+                        background: 'linear-gradient(135deg, var(--lumina-color-primary) 0%, var(--lumina-color-secondary) 100%)',
+                        width: data.sizing === 'container' ? 'var(--lumina-space-xl)' : 'var(--lumina-space-2xl)',
+                        height: data.sizing === 'container' ? 'var(--lumina-space-xl)' : 'var(--lumina-space-2xl)',
+                        borderRadius: 'var(--lumina-radius-xl)',
+                        marginBottom: data.sizing === 'container' ? 'var(--lumina-space-md)' : 'var(--lumina-space-lg)',
+                        fontSize: 'var(--lumina-text-xl)',
+                        boxShadow: '0 4px 12px rgba(var(--lumina-color-primary-rgb), 0.3)',
+                        transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
+                    }">
+                        <i
+                            :class="['ph-thin', (feature.icon || 'star').startsWith('ph-') ? feature.icon : `ph-${feature.icon || 'star'}`]"></i>
+                    </div>
+                    <!-- Title -->
+                    <h3 class="font-bold break-words" :style="{
+                        color: 'var(--lumina-surface-text, var(--lumina-color-text))',
+                        fontSize: data.sizing === 'container' ? 'var(--lumina-text-lg)' : 'var(--lumina-text-2xl)',
+                        marginBottom: 'var(--lumina-space-sm)'
+                    }">
+                        {{ feature.title }}
+                    </h3>
+                    <!-- Description (support both desc and description) -->
+                    <p class="break-words" :style="{
+                        color: 'var(--lumina-color-text-secondary)',
+                        fontSize: data.sizing === 'container' ? 'var(--lumina-text-sm)' : 'var(--lumina-text-base)',
+                        lineHeight: 'var(--lumina-leading-relaxed)',
+                        opacity: 0.8
+                    }">
+                        {{ feature.desc || feature.description || '' }}
+                    </p>
+                </LuminaElement>
+            </div>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideFeatures } from '../../core/types';
+
+const props = defineProps<{
+    data: SlideFeatures;
+    slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+
+const headerId = computed(() => resolveId(props.data, slideIndex.value, ['header']));
+const featureId = (i: number) => resolveId(props.data, slideIndex.value, ['features', i]);
+</script>
+
+<style scoped>
+.features-root {
+    padding: var(--lumina-space-xl) var(--lumina-space-3xl);
+}
+@media (max-width: 1023px) {
+    .features-root { padding-left: var(--lumina-space-xl); padding-right: var(--lumina-space-xl); }
+}
+@media (max-width: 639px) {
+    .features-root { padding: var(--lumina-space-lg) var(--lumina-space-md); }
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--lumina-space-md);
+}
+.features-grid--multi {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+    gap: var(--lumina-space-lg);
+}
+@media (max-width: 639px) {
+    .features-grid--multi {
+        grid-template-columns: 1fr;
+        gap: var(--lumina-space-md);
+    }
+}
+</style>

package/src/components/layouts/LayoutFlex.vue

@@ -0,0 +1,172 @@
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div class="flex-layout w-full h-screen flex flex-col overflow-y-auto lg:overflow-hidden"
+            :style="containerStyle">
+            <div :class="['flex-1 flex w-full min-h-full lg:h-full', directionClass]"
+                :style="mainFlexStyle">
+                <template v-for="(element, i) in data.elements" :key="i">
+                    <!-- Image Element -->
+                    <LuminaElement v-if="element.type === 'image'" :id="elemId(i)" :class="['flex-item', getSizeClass(element.size)]" :style="getElementStyle(element)">
+                        <FlexImage :src="element.src" :alt="element.alt"
+                            :fill="element.fill" :rounded="element.rounded"
+                            container-class="w-full h-full min-h-0" :container-style="{}" :class="element.class" />
+                    </LuminaElement>
+
+                    <!-- Video Element -->
+                    <LuminaElement v-else-if="element.type === 'video'" :id="elemId(i)"
+                        :class="['flex-item', getSizeClass(element.size), element.class]"
+                        :style="getElementStyle(element)">
+                        <VideoPlayer :class="getRoundedClass(element.rounded, element.fill)" :src="element.src"
+                            :poster="element.poster" :autoplay="element.autoplay ?? false" :loop="element.loop ?? false"
+                            :muted="element.muted ?? false" :controls="element.controls ?? true"
+                            :object-fit="element.fill !== false ? 'cover' : 'contain'" />
+                    </LuminaElement>
+
+                    <!-- Content Container -->
+                    <LuminaElement v-else-if="element.type === 'content'" :id="elemId(i)"
+                        :class="['flex-item flex flex-col h-full', getSizeClass(element.size)]"
+                        :style="getContentStyle(element)">
+                        <template v-for="(child, j) in element.elements" :key="j">
+                            <LuminaElement :id="childId(i, j)">
+                                <component :is="getChildComponent(child.type)" v-bind="child" @action="handleAction" />
+                            </LuminaElement>
+                        </template>
+                    </LuminaElement>
+
+                    <!-- Top-level elements (title, text, bullets, etc.) -->
+                    <LuminaElement v-else :id="elemId(i)" :class="['flex-item', getSizeClass(element.size)]"
+                        :style="{ ...getTopLevelStyle(), width: data.direction === 'vertical' ? '100%' : 'auto' }">
+                        <component :is="getChildComponent(element.type)" v-bind="element" @action="handleAction" />
+                    </LuminaElement>
+                </template>
+            </div>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import VideoPlayer from '../base/VideoPlayer.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideFlex, FlexElement, FlexSize, FlexElementContent } from '../../core/types';
+import FlexImage from '../parts/FlexImage.vue';
+import FlexTitle from '../parts/FlexTitle.vue';
+import FlexText from '../parts/FlexText.vue';
+import FlexButton from '../parts/FlexButton.vue';
+import FlexBullets from '../parts/FlexBullets.vue';
+import FlexOrdered from '../parts/FlexOrdered.vue';
+import FlexTimeline from '../parts/FlexTimeline.vue';
+import FlexStepper from '../parts/FlexStepper.vue';
+import FlexSpacer from '../parts/FlexSpacer.vue';
+import { bus } from '../../core/events';
+import {
+    spacingVarMap,
+    getSizeClass,
+    getFlexItemStyle,
+    getFlexContainerStyle,
+    getTopLevelStyle,
+    getFlexSlideMainStyle,
+    getRoundedClass
+} from '../../composables/useFlexLayout';
+
+const props = defineProps<{
+    data: SlideFlex;
+    slideIndex?: number;
+}>();
+
+const emit = defineEmits(['action']);
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const elemId = (i: number) => resolveId(props.data, slideIndex.value, ['elements', i]);
+const childId = (i: number, j: number) => resolveId(props.data, slideIndex.value, ['elements', i, 'elements', j]);
+
+const containerStyle = computed(() => ({
+    padding: spacingVarMap[props.data.padding || 'none'],
+}));
+
+const directionClass = computed(() =>
+    props.data.direction === 'vertical' ? 'flex-col' : 'flex-col lg:flex-row'
+);
+
+const mainFlexStyle = computed(() => ({
+    gap: spacingVarMap[props.data.gap || 'none'],
+    ...getFlexSlideMainStyle(props.data.direction, props.data.halign, props.data.valign),
+}));
+
+// Wrapper for shared logic requiring vertical flag
+const getElementStyle = (element: FlexElement & { size?: FlexSize }) => {
+    return getFlexItemStyle(element, props.data.direction === 'vertical');
+};
+
+const getContentStyle = (element: FlexElementContent & { size?: FlexSize }) => {
+    const isVertical = props.data.direction === 'vertical';
+    return {
+        ...getFlexItemStyle(element, isVertical),
+        ...getFlexContainerStyle(element),
+        // Force full height/width for alignment space
+        height: isVertical ? 'auto' : '100%',
+        width: isVertical ? '100%' : 'auto',
+        minHeight: isVertical ? 'auto' : '100%'
+    };
+};
+
+const handleAction = (payload: any) => {
+    emit('action', payload);
+    bus.emit('action', payload);
+};
+
+// ============================================================================
+// CHILD ELEMENT COMPONENTS - All using CSS variables
+// ============================================================================
+
+
+// Child components extracted to ../parts/
+
+const getChildComponent = (type: string) => {
+    const components: Record<string, any> = {
+        'title': FlexTitle,
+        'text': FlexText,
+        'image': FlexImage,
+        'video': VideoPlayer,
+        'bullets': FlexBullets,
+        'ordered': FlexOrdered,
+        'button': FlexButton,
+        'timeline': FlexTimeline,
+        'stepper': FlexStepper,
+        'spacer': FlexSpacer,
+    };
+    return components[type] || 'div';
+};
+</script>
+
+<style scoped>
+.flex-layout {
+    min-height: 100vh;
+}
+
+@media (max-width: 1023px) {
+    .flex-item {
+        flex: 0 0 auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        max-height: none !important;
+        min-height: auto !important;
+        height: auto !important;
+    }
+
+    /* Images in stacked flex should have a reasonable height */
+    .flex-item:has(img),
+    .flex-item img {
+        height: 40vh !important;
+        min-height: 300px !important;
+    }
+
+    .flex-layout {
+        overflow-y: auto !important;
+        height: auto !important;
+        min-height: 100vh;
+    }
+}
+</style>

package/src/components/layouts/LayoutFree.vue

@@ -0,0 +1,62 @@
+<template>
+  <BaseSlide :data="data" :slide-index="slideIndex">
+    <div class="layout-free-stage absolute inset-0 min-h-[100vh] overflow-hidden">
+      <template v-for="(el, i) in (data.elements || [])" :key="i">
+        <LuminaElement
+          :id="elementId(i)"
+          :tag="el.type === 'image' ? 'div' : 'div'"
+          :style="baseStyle(el)"
+          class="layout-free-element">
+          <template v-if="el.type === 'text'">{{ el.text }}</template>
+          <img v-else-if="el.type === 'image' && el.src" :src="el.src" :alt="''" class="max-w-full max-h-full object-contain" :style="imgStyle(el)" />
+          <span v-else-if="el.type === 'box'">&nbsp;</span>
+        </LuminaElement>
+      </template>
+    </div>
+  </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import LuminaElement from '../base/LuminaElement.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideFree, FreeElement } from '../../core/types';
+
+const props = defineProps<{
+  data: SlideFree;
+  slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+
+function elementId(i: number) {
+  return resolveId(props.data, slideIndex.value, ['elements', i]);
+}
+
+function baseStyle(el: FreeElement): Record<string, string | number> {
+  const s: Record<string, string | number> = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    fontFamily: 'var(--lumina-font-heading, inherit)',
+    color: 'var(--lumina-color-text-safe, #fff)',
+  };
+  if (el.width != null) s.width = typeof el.width === 'number' ? `${el.width}px` : el.width;
+  if (el.height != null) s.height = typeof el.height === 'number' ? `${el.height}px` : el.height;
+  if (el.fontSize != null) s.fontSize = typeof el.fontSize === 'number' ? `${el.fontSize}px` : el.fontSize;
+  if (el.color) s.color = el.color;
+  if (el.fontWeight) s.fontWeight = el.fontWeight;
+  if (el.type === 'box' && el.backgroundColor) s.backgroundColor = el.backgroundColor;
+  return s;
+}
+
+function imgStyle(el: FreeElement): Record<string, string | number> {
+  const s: Record<string, string | number> = { display: 'block' };
+  if (el.width != null) s.width = typeof el.width === 'number' ? `${el.width}px` : el.width;
+  if (el.height != null) s.height = typeof el.height === 'number' ? `${el.height}px` : el.height;
+  return s;
+}
+</script>

package/src/components/layouts/LayoutHalf.vue

@@ -0,0 +1,127 @@
+<template>
+  <BaseSlide :data="data" :slide-index="si">
+    <div
+      :class="['w-full flex flex-col lg:block relative', data.sizing === 'container' ? 'min-h-full' : 'min-h-screen']">
+      <!-- Image Section -->
+      <LuminaElement :id="mediaId"
+        :class="['relative h-[40vh] lg:h-full lg:w-1/2 overflow-hidden z-0', data.sizing === 'container' ? 'lg:absolute lg:top-0' : 'lg:fixed lg:top-0', data.imageSide === 'right' ? 'lg:right-0 order-1' : 'lg:left-0 order-1']">
+        <div class="absolute inset-0 z-10" :style="{ backgroundColor: 'var(--lumina-color-overlay, rgba(0,0,0,0.2))' }">
+        </div>
+
+        <!-- Video Handling -->
+        <div v-if="data.video" class="w-full h-full relative">
+          <VideoPlayer class="w-full h-full" :src="data.video.src" :poster="data.video.poster"
+            :autoplay="data.video.autoplay ?? true" :loop="data.video.loop ?? true" :muted="data.video.muted ?? true"
+            :controls="data.video.controls" object-fit="cover" />
+        </div>
+
+        <!-- Image Handling -->
+        <img v-else-if="data.image" :src="data.image"
+          :class="['w-full h-full object-cover scale-110 origin-center', data.imageClass || '', isLoaded ? 'opacity-100' : 'opacity-0']"
+          :style="{ transition: 'opacity var(--lumina-transition-duration) var(--lumina-transition-easing)' }"
+          alt="Slide Image" @load="isLoaded = true"
+          @error="(e: any) => { isLoaded = true; e.target.src = 'https://placehold.co/1920x1080/1a1a1a/666?text=Image+Not+Found'; }">
+      </LuminaElement>
+
+      <!-- Content Section - Uses background color for proper theme integration -->
+      <div
+        :class="['relative z-10 w-full lg:w-1/2 min-h-[60vh] flex flex-col justify-center order-2', data.imageSide === 'right' ? 'lg:mr-[50%]' : 'lg:ml-[50%]', data.sizing === 'container' ? 'lg:min-h-full' : 'lg:min-h-screen']"
+        :style="contentPanelStyle">
+        <div :class="data.class || ''" :style="{ maxWidth: '36rem' }">
+          <!-- Tag -->
+          <LuminaElement v-if="data.tag" :id="tagId" tag="span" class="font-bold uppercase block" :style="{
+            color: 'var(--lumina-color-primary)',
+            letterSpacing: 'var(--lumina-tracking-widest)',
+            fontSize: 'var(--lumina-text-xs)',
+            marginBottom: 'var(--lumina-space-lg)'
+          }">
+            {{ data.tag }}
+          </LuminaElement>
+
+          <!-- Title -->
+          <LuminaElement :id="titleId" tag="h1" class="font-bold" :style="{
+            fontFamily: 'var(--lumina-font-heading)',
+            color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+            fontSize: 'var(--lumina-text-6xl)',
+            letterSpacing: 'var(--lumina-tracking-tighter)',
+            lineHeight: 'var(--lumina-leading-tight)',
+            marginBottom: 'var(--lumina-space-xl)',
+            textShadow: '0 2px 10px rgba(0,0,0,0.1)'
+          }">
+            {{ data.title }}
+          </LuminaElement>
+
+          <!-- Paragraphs -->
+          <LuminaElement :id="paragraphsId" :style="{
+            color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+            opacity: 0.9,
+            fontSize: 'var(--lumina-text-lg)',
+            lineHeight: 'var(--lumina-leading-relaxed)',
+            marginBottom: 'var(--lumina-space-xl)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--lumina-space-lg)'
+          }">
+            <p v-for="(p, i) in data.paragraphs" :key="i">{{ p }}</p>
+          </LuminaElement>
+
+          <!-- CTA -->
+          <LuminaElement v-if="data.cta" :id="ctaId" :style="{
+            paddingTop: 'var(--lumina-space-lg)',
+            borderTop: '1px solid var(--lumina-color-border)'
+          }">
+            <button @click="$emit('action', { type: 'cta', label: data.cta })" class="font-bold flex items-center"
+              :style="{
+                backgroundColor: 'var(--lumina-color-primary)',
+                color: 'var(--lumina-color-background)',
+                borderRadius: 'var(--lumina-button-radius)',
+                padding: 'var(--lumina-button-padding)',
+                fontWeight: 'var(--lumina-button-font-weight)',
+                gap: 'var(--lumina-space-sm)',
+                transition: 'all var(--lumina-transition-duration) var(--lumina-transition-easing)'
+              }">
+              {{ data.cta }} <i class="ph-thin ph-arrow-right"></i>
+            </button>
+          </LuminaElement>
+        </div>
+      </div>
+    </div>
+  </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import VideoPlayer from '../base/VideoPlayer.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideHalf } from '../../core/types';
+
+const props = defineProps<{
+  data: SlideHalf;
+  slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const isLoaded = ref(false);
+const si = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const mediaId = computed(() => resolveId(props.data, si.value, ['media']));
+const tagId = computed(() => resolveId(props.data, si.value, ['tag']));
+const titleId = computed(() => resolveId(props.data, si.value, ['title']));
+const paragraphsId = computed(() => resolveId(props.data, si.value, ['paragraphs']));
+const ctaId = computed(() => resolveId(props.data, si.value, ['cta']));
+
+// Content panel style - uses background color for proper theme integration
+// This ensures text is always readable against the background
+const contentPanelStyle = computed(() => ({
+  backgroundColor: 'var(--lumina-color-background)',
+  paddingTop: 'var(--lumina-space-xl)',
+  paddingLeft: 'var(--lumina-space-3xl)',
+  paddingRight: 'var(--lumina-space-3xl)',
+  paddingBottom: 'calc(var(--lumina-space-xl) + var(--lumina-safe-area-bottom))'
+}));
+
+defineEmits<{
+  (e: 'action', payload: any): void
+}>();
+</script>

package/src/components/layouts/LayoutStatement.vue

@@ -0,0 +1,74 @@
+<template>
+  <BaseSlide :data="data" :slide-index="slideIndex">
+    <div
+      :class="['flex flex-col justify-center items-center text-center relative', data.sizing === 'container' ? 'h-full' : 'min-h-screen']"
+      :style="{ paddingTop: 'var(--lumina-space-xl)', paddingLeft: 'var(--lumina-space-xl)', paddingRight: 'var(--lumina-space-xl)', paddingBottom: 'calc(var(--lumina-space-xl) + var(--lumina-safe-area-bottom))' }">
+      <div :class="[data.class || '', 'max-w-5xl z-10']">
+        <!-- Tag -->
+        <LuminaElement v-if="data.tag" :id="tagId" tag="span" class="inline-block rounded-full font-medium uppercase" :style="{
+          color: 'var(--lumina-color-primary)',
+          border: '1px solid var(--lumina-color-border)',
+          backgroundColor: 'rgba(var(--lumina-color-text-rgb), 0.05)',
+          padding: 'var(--lumina-tag-padding)',
+          fontSize: 'var(--lumina-tag-font-size)',
+          letterSpacing: 'var(--lumina-tracking-widest)',
+          marginBottom: 'var(--lumina-space-xl)'
+        }">
+          {{ data.tag }}
+        </LuminaElement>
+
+        <!-- Title -->
+        <LuminaElement :id="titleId" tag="h1" :style="titleStyle">
+          {{ data.title }}
+        </LuminaElement>
+
+        <!-- Subtitle -->
+        <LuminaElement v-if="data.subtitle" :id="subtitleId" tag="p" class="max-w-3xl mx-auto" :style="{
+          color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+          opacity: 0.8,
+          fontWeight: 'normal',
+          fontSize: 'clamp(var(--lumina-text-xl), 3vw, var(--lumina-text-3xl))',
+          lineHeight: 'var(--lumina-leading-normal)'
+        }">
+          {{ data.subtitle }}
+        </LuminaElement>
+      </div>
+    </div>
+  </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideStatement } from '../../core/types';
+
+const props = defineProps<{
+  data: SlideStatement;
+  slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+
+const tagId = computed(() => resolveId(props.data, slideIndex.value, ['tag']));
+const titleId = computed(() => resolveId(props.data, slideIndex.value, ['title']));
+const subtitleId = computed(() => resolveId(props.data, slideIndex.value, ['subtitle']));
+
+const titleStyle = computed(() => ({
+  fontSize: props.data.sizing === 'container'
+    ? 'var(--lumina-text-5xl)'
+    : 'clamp(var(--lumina-text-4xl), 10vw, var(--lumina-text-7xl))',
+  fontFamily: 'var(--lumina-font-heading)',
+  fontWeight: 'var(--lumina-font-weight-bold)',
+  lineHeight: 'var(--lumina-leading-tight)',
+  letterSpacing: 'var(--lumina-tracking-tighter)',
+  marginBottom: 'var(--lumina-space-xl)',
+  backgroundImage: 'linear-gradient(135deg, var(--lumina-color-text-safe, var(--lumina-color-text)) 30%, #525252 100%)',
+  WebkitBackgroundClip: 'text',
+  WebkitTextFillColor: 'transparent',
+  backgroundClip: 'text',
+  color: 'var(--lumina-color-text-safe, var(--lumina-color-text))', // Fallback
+}));
+</script>

package/src/components/layouts/LayoutSteps.vue

@@ -0,0 +1,106 @@
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div :class="['w-full flex flex-col justify-center', data.sizing === 'container' ? 'min-h-full py-12 lg:py-16' : 'min-h-screen']"
+            :style="{ padding: 'var(--lumina-space-xl) var(--lumina-space-3xl)' }">
+            <!-- Header -->
+            <LuminaElement :id="headerId" :class="['text-center max-w-4xl mx-auto', data.class || '']"
+                :style="{ marginBottom: 'var(--lumina-space-2xl)' }">
+                <h2 class="font-bold" :style="{
+                    fontFamily: 'var(--lumina-font-heading)',
+                    fontSize: 'var(--lumina-text-5xl)',
+                    marginBottom: 'var(--lumina-space-md)',
+                    letterSpacing: 'var(--lumina-tracking-tighter)',
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))'
+                }">
+                    {{ data.title }}
+                </h2>
+                <p v-if="data.subtitle" :style="{
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                    opacity: 0.9,
+                    fontSize: 'var(--lumina-text-xl)'
+                }">
+                    {{ data.subtitle }}
+                </p>
+            </LuminaElement>
+
+            <!-- Steps Grid -->
+            <div :style="{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+                gap: 'var(--lumina-space-xl)',
+                maxWidth: '72rem',
+                margin: '0 auto',
+                width: '100%'
+            }">
+                <LuminaElement v-for="(step, i) in data.steps" :key="i" :id="stepId(i)"
+                    :class="['glass-panel group relative overflow-hidden', step.class || '']" :style="{
+                        borderRadius: 'var(--lumina-card-radius)',
+                        padding: 'var(--lumina-card-padding)'
+                    }">
+                    <!-- Step Number -->
+                    <div :style="{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 'var(--lumina-space-md)',
+                        marginBottom: 'var(--lumina-space-md)'
+                    }">
+                        <div class="flex items-center justify-center font-bold" :style="{
+                            width: 'var(--lumina-step-badge-size, 2.5rem)',
+                            height: 'var(--lumina-step-badge-size, 2.5rem)',
+                            fontSize: 'var(--lumina-step-font-size, 1rem)',
+                            background: 'linear-gradient(135deg, var(--lumina-color-primary), var(--lumina-color-secondary))',
+                            color: 'white',
+                            borderRadius: 'var(--lumina-radius-xl)',
+                            boxShadow: '0 4px 12px rgba(var(--lumina-color-primary-rgb), 0.4)'
+                        }">
+                            {{ step.step }}
+                        </div>
+                        <h3 class="font-bold" :style="{
+                            fontSize: 'var(--lumina-text-xl)',
+                            color: 'var(--lumina-surface-text, var(--lumina-color-text))'
+                        }">
+                            {{ step.title }}
+                        </h3>
+                    </div>
+
+                    <!-- Description -->
+                    <p v-if="step.description" :style="{
+                        color: 'var(--lumina-color-text-secondary)',
+                        lineHeight: 'var(--lumina-leading-relaxed)',
+                        fontSize: 'var(--lumina-text-base)',
+                        opacity: 0.8
+                    }">
+                        {{ step.description }}
+                    </p>
+
+                    <!-- Icon (optional) -->
+                    <div v-if="step.icon" class="absolute top-4 right-4" :style="{
+                        color: 'var(--lumina-color-primary)',
+                        opacity: 0.1,
+                        fontSize: 'var(--lumina-text-4xl)'
+                    }">
+                        <i :class="['ph-thin', step.icon.startsWith('ph-') ? step.icon : `ph-${step.icon}`]"></i>
+                    </div>
+                </LuminaElement>
+            </div>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideSteps } from '../../core/types';
+
+const props = defineProps<{
+    data: SlideSteps;
+    slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const headerId = computed(() => resolveId(props.data, slideIndex.value, ['header']));
+const stepId = (i: number) => resolveId(props.data, slideIndex.value, ['steps', i]);
+</script>