lumina-slides 9.0.4 → 9.0.5

package/src/components/parts/FlexHtml.vue

@@ -0,0 +1,65 @@
+<template>
+    <div 
+        v-html="html" 
+        :class="customClass"
+        :style="computedStyle"
+    ></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    html: string;
+    class?: string;
+    style?: Record<string, string>;
+}>();
+
+const customClass = computed(() => props.class || '');
+
+const computedStyle = computed(() => {
+    return {
+        width: '100%',
+        ...props.style,
+    };
+});
+</script>
+
+<style scoped>
+/* Ensure HTML content respects container boundaries */
+:deep(*) {
+    max-width: 100%;
+}
+
+/* Style common HTML elements to match Lumina theme */
+:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+    color: var(--lumina-color-text);
+    font-family: var(--lumina-font-heading);
+    margin-top: var(--lumina-space-md);
+    margin-bottom: var(--lumina-space-sm);
+}
+
+:deep(p) {
+    color: var(--lumina-color-text);
+    line-height: var(--lumina-leading-relaxed);
+    margin-bottom: var(--lumina-space-md);
+}
+
+:deep(a) {
+    color: var(--lumina-color-primary);
+    text-decoration: none;
+}
+
+:deep(a:hover) {
+    text-decoration: underline;
+}
+
+:deep(ul), :deep(ol) {
+    margin-left: var(--lumina-space-lg);
+    margin-bottom: var(--lumina-space-md);
+}
+
+:deep(li) {
+    margin-bottom: var(--lumina-space-xs);
+}
+</style>

package/src/components/parts/FlexImage.vue

@@ -5,10 +5,10 @@
         :style="containerStyle">
         <img :src="src" :alt="alt || ''" :class="[
             'w-full h-full transition-opacity duration-700',
-            fill !== false ? 'object-cover' : 'object-contain',
+            objectFitClass,
             roundedClass,
             isLoaded ? 'opacity-100' : 'opacity-0'
-        ]" @load="onLoad" @error="onError" />
+        ]" :style="imageStyle" @load="onLoad" @error="onError" />
     </component>
 </template>
 
@@ -19,12 +19,15 @@ const props = defineProps<{
     src: string;
     alt?: string;
     fill?: boolean;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    position?: string;
     rounded?: string;
     containerClass?: any;
     containerStyle?: any;
     href?: string;
     target?: '_blank' | '_self';
     class?: any;
+    style?: Record<string, string>;
 }>();
 
 const isLoaded = ref(false);
@@ -39,6 +42,30 @@ const onError = (e: any) => {
     e.target.src = 'https://placehold.co/800x600/1a1a1a/666?text=Image+Not+Found';
 };
 
+const objectFitClass = computed(() => {
+    if (props.fit) {
+        const fitMap: Record<string, string> = {
+            'cover': 'object-cover',
+            'contain': 'object-contain',
+            'fill': 'object-fill',
+            'none': 'object-none',
+            'scale-down': 'object-scale-down',
+        };
+        return fitMap[props.fit] || 'object-cover';
+    }
+    return props.fill !== false ? 'object-cover' : 'object-contain';
+});
+
+const imageStyle = computed(() => {
+    const style: Record<string, string> = {
+        ...props.style,
+    };
+    if (props.position) {
+        style.objectPosition = props.position;
+    }
+    return style;
+});
+
 const roundedClass = computed(() => {
     if (props.fill !== false && !props.rounded) return '';
     const map: Record<string, string> = {

package/src/components/site/SiteDocs.vue

@@ -310,7 +310,7 @@ engine.load(myDeckData);</code></pre>
                                         5</div>
                                     <div>
                                         <h2 class="text-2xl font-bold text-white mb-1">Flex</h2>
-                                        <p class="text-sm text-white/50">Flow-based layout with size tokens (<code>half</code>, <code>third</code>, …). Elements: <code>title</code>, <code>text</code>, <code>bullets</code>, <code>image</code>, <code>video</code>, <code>button</code>, <code>content</code>, <code>timeline</code>, <code>stepper</code>, <code>spacer</code>. See <em>Flex</em> in Layouts.</p>
+                                        <p class="text-sm text-white/50">Flow-based layout with size tokens (<code>half</code>, <code>third</code>, …). Elements: <code>title</code>, <code>text</code>, <code>bullets</code>, <code>image</code>, <code>html</code>, <code>video</code>, <code>button</code>, <code>content</code> (supports nesting), <code>timeline</code>, <code>stepper</code>, <code>spacer</code>. See <em>Flex</em> in Layouts.</p>
                                     </div>
                                 </div>
                                 <div class="prose prose-invert max-w-none prose-pre:bg-black/50 prose-pre:border-none">
@@ -2143,8 +2143,9 @@ engine.data.set(<span class="text-green-400">"user"</span>, <span class="text-gr
                                         <tr><th class="p-3 border-b border-white/10">type</th><th class="p-3 border-b border-white/10">Properties</th><th class="p-3 border-b border-white/10">Description</th></tr>
                                     </thead>
                                     <tbody class="divide-y divide-white/5">
-                                        <tr><td class="p-3 font-mono text-cyan-400">content</td><td class="p-3 font-mono text-xs">elements, valign?, halign?, gap?, padding?, size?</td><td class="p-3">Groups children vertically. Children: title, text, bullets, ordered, button, timeline, stepper, spacer (no image/video/nested content).</td></tr>
-                                        <tr><td class="p-3 font-mono text-cyan-400">image</td><td class="p-3 font-mono text-xs">src, alt?, fill?, fit?, rounded?, href?, target?, class?, size?, id?</td><td class="p-3">Media. fill: edge-to-edge. fit: cover|contain. href+target: link. Rounded: none|sm|md|lg|xl|full.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">content</td><td class="p-3 font-mono text-xs">elements, direction?, valign?, halign?, gap?, padding?, size?, class?, style?, id?</td><td class="p-3">Groups children with alignment. <code>direction</code>: horizontal|vertical (default: vertical). Supports nested content, html, image, and all child elements. <code>class</code> and <code>style</code> for custom styling.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">image</td><td class="p-3 font-mono text-xs">src, alt?, fill?, fit?, position?, rounded?, href?, target?, class?, style?, size?, id?</td><td class="p-3">Media. <code>fill</code>: edge-to-edge. <code>fit</code>: cover|contain|fill|none|scale-down. <code>position</code>: object-position (e.g., "top center"). <code>href</code>+<code>target</code>: link. <code>rounded</code>: none|sm|md|lg|xl|full. <code>style</code>: custom CSS.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">html</td><td class="p-3 font-mono text-xs">html, class?, style?, size?, id?</td><td class="p-3">Raw HTML content. Renders any HTML string. Supports <code>class</code> and <code>style</code> for customization. Automatically styled to match Lumina theme.</td></tr>
                                         <tr><td class="p-3 font-mono text-cyan-400">video</td><td class="p-3 font-mono text-xs">src, poster?, autoplay?, loop?, muted?, controls?, fill?, fit?, rounded?, class?, size?, id?</td><td class="p-3">Video element. Same fill/fit/rounded as image.</td></tr>
                                         <tr><td class="p-3 font-mono text-cyan-400">title</td><td class="p-3 font-mono text-xs">text, size? (lg|xl|2xl|3xl), align?, id?</td><td class="p-3">Heading. align: left|center|right. Top-level only: optional FlexSize <code>size</code>.</td></tr>
                                         <tr><td class="p-3 font-mono text-cyan-400">text</td><td class="p-3 font-mono text-xs">text, align?, muted?, size?, id?</td><td class="p-3">Paragraph. muted: subtle style.</td></tr>
@@ -2161,8 +2162,49 @@ engine.data.set(<span class="text-green-400">"user"</span>, <span class="text-gr
                         </div>
 
                         <div class="my-8">
-                            <h2 class="text-xl font-bold text-white mb-4">Content container (valign, halign, gap, padding)</h2>
-                            <p>Defaults: valign <code>center</code>, halign <code>left</code>, gap <code>md</code>, padding <code>lg</code>.</p>
+                            <h2 class="text-xl font-bold text-white mb-4">Content container (direction, valign, halign, gap, padding)</h2>
+                            <p><strong>Direction:</strong> <code>horizontal</code> | <code>vertical</code> (default: <code>vertical</code>). Controls layout direction of child elements.</p>
+                            <p><strong>Defaults:</strong> direction <code>vertical</code>, valign <code>center</code>, halign <code>left</code>, gap <code>md</code>, padding <code>lg</code>.</p>
+                            <p class="mt-2"><strong>Nested content:</strong> Content containers can be nested inside other content containers for complex layouts. Supports unlimited nesting levels.</p>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">HTML Element</h2>
+                            <p>The <code>html</code> element allows you to insert raw HTML content into your flex layout. This is useful for custom formatting, embedded content, or any HTML that isn't covered by other element types.</p>
+                            <div class="mt-4 p-4 bg-white/5 rounded-lg border border-white/10">
+                                <p class="text-sm text-white/70 mb-2"><strong>Example:</strong></p>
+                                <pre class="text-xs"><code>{{
+`{
+  "type": "html",
+  "html": "<p>Insert <strong>any HTML</strong> here.</p><ul><li>List item</li></ul>",
+  "class": "custom-class",
+  "style": { "maxWidth": "600px" }
+}`}}</code></pre>
+                            </div>
+                            <p class="text-sm text-white/50 mt-2">The HTML is automatically styled to match Lumina's theme. Common HTML elements (h1-h6, p, a, ul, ol, li) are styled with Lumina CSS variables.</p>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Enhanced Image Element</h2>
+                            <p>The <code>image</code> element now supports advanced positioning and styling options:</p>
+                            <ul class="list-disc list-inside text-white/70 space-y-1 mt-2">
+                                <li><code>fit</code>: <code>cover</code> | <code>contain</code> | <code>fill</code> | <code>none</code> | <code>scale-down</code> - Controls how the image fits its container</li>
+                                <li><code>position</code>: string (e.g., <code>"top center"</code>, <code>"left bottom"</code>) - Controls object-position CSS property</li>
+                                <li><code>style</code>: object - Custom CSS styles as key-value pairs</li>
+                                <li><code>class</code>: string - Custom CSS class names</li>
+                            </ul>
+                            <div class="mt-4 p-4 bg-white/5 rounded-lg border border-white/10">
+                                <p class="text-sm text-white/70 mb-2"><strong>Example:</strong></p>
+                                <pre class="text-xs"><code>{{
+`{
+  "type": "image",
+  "src": "photo.jpg",
+  "fit": "contain",
+  "position": "top center",
+  "rounded": "lg",
+  "style": { "border": "2px solid var(--lumina-color-primary)" }
+}`}}</code></pre>
+                            </div>
                         </div>
 
                         <div class="my-8">
@@ -2777,10 +2819,13 @@ engine.data.set(<span class="text-green-400">"user"</span>, <span class="text-gr
 
 <script setup lang="ts">
 import { ref, watch, onUnmounted, onMounted, nextTick } from 'vue';
+import TurndownService from 'turndown';
 import { Lumina } from '../../core/Lumina';
 import { parsePartialJson } from '../../utils/streaming';
 import LivePreview from './LivePreview.vue';
 
+const turndownService = new TurndownService({ headingStyle: 'atx', codeBlockStyle: 'fenced' });
+
 const activeSection = ref('intro');
 
 const LAYOUT_IDS = ['ref-statement', 'ref-half', 'ref-features', 'ref-timeline', 'ref-steps', 'ref-flex', 'ref-chart', 'ref-video', 'ref-diagram', 'ref-free', 'ref-custom', 'ref-auto'];
@@ -2802,12 +2847,74 @@ function goToStreamingDemo() {
     nextTick(() => document.getElementById('streaming-demo-container')?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
 }
 
+function getHeadingLevel(el: Element): number {
+    const m = /^H([1-6])$/.exec(el.tagName || '');
+    return m ? parseInt(m[1], 10) : 7;
+}
+
+async function copySectionAsMarkdown(heading: HTMLElement | null, button?: HTMLElement) {
+    if (!heading || !heading.closest('.doc-content')) return;
+    const level = getHeadingLevel(heading);
+    const container = document.createElement('div');
+    const headingClone = heading.cloneNode(true) as HTMLElement;
+    headingClone.querySelector('.doc-copy-btn')?.remove();
+    container.appendChild(headingClone);
+    let el: Element | null = heading.nextElementSibling;
+    while (el) {
+        if (/^H[1-6]$/i.test(el.tagName) && getHeadingLevel(el) <= level) break;
+        container.appendChild(el.cloneNode(true));
+        el = el.nextElementSibling;
+    }
+    try {
+        const md = turndownService.turndown(container);
+        await navigator.clipboard.writeText(md);
+        if (button) {
+            const orig = button.innerHTML;
+            button.innerHTML = CHECK_ICON_SVG;
+            button.classList.add('doc-copy-btn-done');
+            button.setAttribute('aria-label', 'Copiado');
+            setTimeout(() => {
+                button.innerHTML = orig;
+                button.classList.remove('doc-copy-btn-done');
+                button.setAttribute('aria-label', 'Copiar sección en Markdown');
+            }, 2000);
+        }
+    } catch (_) { /* clipboard or turndown error */ }
+}
+
+const COPY_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z"/></svg>';
+const CHECK_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z"/></svg>';
+
+function injectCopyButtons() {
+    const root = document.querySelector('.doc-content');
+    if (!root) return;
+    root.querySelectorAll('h1, h2, h3').forEach((h) => {
+        if ((h as HTMLElement).querySelector('.doc-copy-btn')) return;
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'doc-copy-btn';
+        btn.title = 'Copiar sección en Markdown';
+        btn.setAttribute('aria-label', 'Copiar sección en Markdown');
+        btn.innerHTML = COPY_ICON_SVG;
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            copySectionAsMarkdown((e.currentTarget as HTMLElement).parentElement, e.currentTarget as HTMLElement);
+        });
+        (h as HTMLElement).appendChild(btn);
+    });
+}
+
+watch(activeSection, () => nextTick(injectCopyButtons));
+
 onMounted(() => {
     if (typeof window === 'undefined') return;
     const h = window.location.hash.slice(1) || '';
-    if (!h) return;
-    activeSection.value = h;
-    nextTick(() => document.getElementById(h)?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+    if (h) {
+        activeSection.value = h;
+        nextTick(() => document.getElementById(h)?.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+    }
+    nextTick(injectCopyButtons);
+    setTimeout(injectCopyButtons, 150);
 });
 
 // --- DEMO LOGIC ---
@@ -2974,13 +3081,31 @@ const EXAMPLES = {
   "type": "flex",
   "sizing": "container",
   "direction": "horizontal",
+  "gap": "lg",
   "elements": [
-    { "type": "image", "src": "./brains.png", "size": "half", "fill": true },
-    { "type": "content", "size": "half", "valign": "center", "padding": "xl", "gap": "md", "elements": [
-      { "type": "title", "text": "Visual Story", "size": "2xl" },
-      { "type": "bullets", "items": ["Image fills height", "Content centered", "No coordinates"] },
-      { "type": "button", "label": "Learn More", "variant": "primary" }
-    ]}
+    { 
+      "type": "image", 
+      "src": "./brains.png", 
+      "size": "half", 
+      "fill": true,
+      "fit": "cover",
+      "position": "center"
+    },
+    { 
+      "type": "content", 
+      "size": "half", 
+      "direction": "vertical",
+      "valign": "center", 
+      "padding": "xl", 
+      "gap": "md", 
+      "elements": [
+        { "type": "title", "text": "Visual Story", "size": "2xl" },
+        { "type": "text", "text": "Enhanced flex layout with new features" },
+        { "type": "html", "html": "<p>Insert <strong>custom HTML</strong> here</p>" },
+        { "type": "bullets", "items": ["Nested content support", "HTML elements", "Enhanced images"] },
+        { "type": "button", "label": "Learn More", "variant": "primary" }
+      ]
+    }
   ]
 }` ,
     video: `{
@@ -3138,15 +3263,22 @@ const navigation = [
 }
 
 .doc-content h1 {
-    @apply text-4xl md:text-5xl font-black tracking-tight text-white mb-8 leading-tight font-heading;
+    @apply text-4xl md:text-5xl font-black tracking-tight text-white mb-8 leading-tight font-heading flex flex-wrap items-center gap-2;
 }
 
 .doc-content h2 {
-    @apply text-2xl md:text-3xl font-bold text-white mt-16 mb-6 tracking-tight font-heading;
+    @apply text-2xl md:text-3xl font-bold text-white mt-16 mb-6 tracking-tight font-heading flex flex-wrap items-center gap-2;
 }
 
 .doc-content h3 {
-    @apply text-[20px] font-extrabold text-white mb-[15px] mt-8 font-heading;
+    @apply text-[20px] font-extrabold text-white mb-[15px] mt-8 font-heading flex flex-wrap items-center gap-2;
+}
+
+.doc-content :deep(.doc-copy-btn) {
+    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg text-white/40 hover:text-white/90 hover:bg-white/10 transition-colors flex-shrink-0;
+}
+.doc-content :deep(.doc-copy-btn-done) {
+    @apply text-green-400;
 }
 
 .doc-content p {

package/src/composables/useFlexLayout.ts

@@ -63,14 +63,20 @@ export const getFlexContainerStyle = (element: FlexElementContent): CSSPropertie
     const halign = element.halign || 'left';
     const gap = element.gap || 'md';
     const padding = element.padding || 'lg';
+    const direction = element.direction || 'vertical';
 
     return {
         display: 'flex',
-        flexDirection: 'column', // Content containers are always column based for children
-        justifyContent: valignMap[valign] as CSSProperties['justifyContent'],
-        alignItems: halignMap[halign] as CSSProperties['alignItems'],
+        flexDirection: direction === 'horizontal' ? 'row' : 'column',
+        justifyContent: direction === 'horizontal' 
+            ? halignMap[halign] as CSSProperties['justifyContent']
+            : valignMap[valign] as CSSProperties['justifyContent'],
+        alignItems: direction === 'horizontal'
+            ? valignMap[valign] as CSSProperties['alignItems']
+            : halignMap[halign] as CSSProperties['alignItems'],
         gap: spacingVarMap[gap],
         padding: spacingVarMap[padding],
+        ...(element.style || {}),
     };
 };
 

package/src/core/schema.ts

@@ -179,8 +179,20 @@ const FlexElementImageSchema = z.object({
     src: fuzzyString.describe("Image URL."),
     alt: fuzzyString.optional().describe("Alt text for accessibility."),
     fill: z.boolean().optional().describe("Fill container edge-to-edge. Default: true."),
-    fit: z.enum(['cover', 'contain']).optional().describe("Object-fit when fill. Default: 'cover'."),
+    fit: z.enum(['cover', 'contain', 'fill', 'none', 'scale-down']).optional().describe("Object-fit mode. Default: 'cover' when fill is true."),
+    position: fuzzyString.optional().describe("Object-position for image placement. Default: 'center'."),
     rounded: z.enum(['none', 'sm', 'md', 'lg', 'xl', 'full']).optional().describe("Border radius."),
+    href: fuzzyString.optional().describe("Link URL when image is clicked."),
+    target: z.enum(['_blank', '_self']).optional().describe("Link target. Default: '_blank'."),
+    class: fuzzyString.optional().describe("Custom CSS class."),
+    style: z.record(z.string()).optional().describe("Custom CSS style object."),
+});
+
+const FlexElementHtmlSchema = z.object({
+    type: z.literal('html').describe("Raw HTML content element."),
+    html: fuzzyString.describe("Raw HTML string to render."),
+    class: fuzzyString.optional().describe("Custom CSS class."),
+    style: z.record(z.string()).optional().describe("Custom CSS style object."),
 });
 
 const FlexElementButtonSchema = z.object({
@@ -208,8 +220,27 @@ const FlexElementSpacerSchema = z.object({
     size: SpacingTokenSchema.optional().describe("Size of the space. Default: 'md'."),
 });
 
-// Child elements (inside content container)
-const FlexChildElementSchema = z.discriminatedUnion('type', [
+// Child elements (inside content container) - supports nested content, html, and image
+// We need to use lazy evaluation for recursive content support
+let FlexChildElementSchema: z.ZodType<any>;
+let FlexElementContentSchema: z.ZodType<any>;
+
+// Define content schema with lazy reference to child elements (for recursion)
+FlexElementContentSchema = z.lazy(() => z.object({
+    type: z.literal('content').describe("Groups child elements with alignment control. Supports nested content."),
+    elements: fuzzyArray(FlexChildElementSchema).describe("Child elements. Can include nested content containers."),
+    direction: z.enum(['horizontal', 'vertical']).optional().describe("Layout direction. Default: 'vertical'."),
+    valign: VAlignSchema.optional().describe("Vertical alignment. Default: 'center'."),
+    halign: HAlignSchema.optional().describe("Horizontal alignment. Default: 'left'."),
+    gap: SpacingTokenSchema.optional().describe("Gap between children. Default: 'md'."),
+    padding: SpacingTokenSchema.optional().describe("Internal padding. Default: 'lg'."),
+    size: FlexSizeSchema.optional().describe("Size in parent flex container."),
+    class: fuzzyString.optional().describe("Custom CSS class."),
+    style: z.record(z.string()).optional().describe("Custom CSS style object."),
+}));
+
+// Define child element schema with reference to content (for nesting)
+FlexChildElementSchema = z.discriminatedUnion('type', [
     FlexElementTitleSchema,
     FlexElementTextSchema,
     FlexElementBulletsSchema,
@@ -218,23 +249,17 @@ const FlexChildElementSchema = z.discriminatedUnion('type', [
     FlexElementTimelineSchema,
     FlexElementStepperSchema,
     FlexElementSpacerSchema,
+    FlexElementHtmlSchema,
+    FlexElementImageSchema,
+    FlexElementContentSchema,
 ]);
 
-// Content container schema
-const FlexElementContentSchema = z.object({
-    type: z.literal('content').describe("Groups child elements vertically with alignment control."),
-    elements: fuzzyArray(FlexChildElementSchema).describe("Child elements."),
-    valign: VAlignSchema.optional().describe("Vertical alignment. Default: 'center'."),
-    halign: HAlignSchema.optional().describe("Horizontal alignment. Default: 'left'."),
-    gap: SpacingTokenSchema.optional().describe("Gap between children. Default: 'md'."),
-    padding: SpacingTokenSchema.optional().describe("Internal padding. Default: 'lg'."),
-    size: FlexSizeSchema.optional().describe("Size in parent flex container."),
-});
-
 // Top-level flex element (with size property)
+// Note: FlexElementContentSchema already includes size in its definition, so we don't need to extend it
 const FlexElementSchema = z.discriminatedUnion('type', [
     FlexElementImageSchema.extend({ size: FlexSizeSchema.optional() }),
-    FlexElementContentSchema,
+    FlexElementContentSchema, // Already includes size, no need to extend
+    FlexElementHtmlSchema.extend({ size: FlexSizeSchema.optional() }),
     FlexElementTitleSchema.extend({ size: FlexSizeSchema.optional() }),
     FlexElementTextSchema.extend({ size: FlexSizeSchema.optional() }),
     FlexElementBulletsSchema.extend({ size: FlexSizeSchema.optional() }),

package/src/core/types.ts

@@ -160,7 +160,9 @@ export interface FlexElementImage {
     /** Fill entire container edge-to-edge. Default: true */
     fill?: boolean;
     /** Object-fit mode when fill is true. Default: 'cover' */
-    fit?: 'cover' | 'contain';
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** Object-position for image placement. Default: 'center' */
+    position?: string;
     /** Border radius. Default: 'none' when fill, 'lg' otherwise */
     rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
     /** Link URL when image is clicked. */
@@ -169,6 +171,8 @@ export interface FlexElementImage {
     target?: '_blank' | '_self';
     /** Custom CSS class */
     class?: string;
+    /** Custom CSS style object */
+    style?: Record<string, string>;
 }
 
 /**
@@ -248,13 +252,30 @@ export interface FlexElementSpacer {
 }
 
 /**
- * Content container - Groups child elements vertically with alignment control.
+ * HTML element - Raw HTML content.
+ */
+export interface FlexElementHtml {
+    type: 'html';
+    /** Optional id for element control (engine.element(id)). */
+    id?: string;
+    /** Raw HTML string to render */
+    html: string;
+    /** Custom CSS class */
+    class?: string;
+    /** Custom CSS style object */
+    style?: Record<string, string>;
+}
+
+/**
+ * Content container - Groups child elements with alignment control.
  */
 export interface FlexElementContent {
     type: 'content';
     /** Optional id for element control (engine.element(id)). */
     id?: string;
     elements: FlexChildElement[];
+    /** Layout direction. Default: 'vertical' */
+    direction?: 'horizontal' | 'vertical';
     /** Vertical alignment of content. Default: 'center' */
     valign?: VAlign;
     /** Horizontal alignment of content. Default: 'left' */
@@ -263,10 +284,15 @@ export interface FlexElementContent {
     gap?: SpacingToken;
     /** Internal padding. Default: 'lg' */
     padding?: SpacingToken;
+    /** Custom CSS class */
+    class?: string;
+    /** Custom CSS style object */
+    style?: Record<string, string>;
 }
 
 /**
  * Child elements that can appear inside a content container.
+ * Supports nested content containers for complex layouts.
  */
 export type FlexChildElement =
     | FlexElementTitle
@@ -276,7 +302,10 @@ export type FlexChildElement =
     | FlexElementButton
     | FlexElementTimeline
     | FlexElementStepper
-    | FlexElementSpacer;
+    | FlexElementSpacer
+    | FlexElementHtml
+    | FlexElementImage
+    | FlexElementContent;
 
 /**
  * Top-level flex elements that can have size.
@@ -285,6 +314,7 @@ export type FlexElement =
     | (FlexElementImage & { size?: FlexSize })
     | (FlexElementVideo & { size?: FlexSize })
     | (FlexElementContent & { size?: FlexSize })
+    | (FlexElementHtml & { size?: FlexSize })
     | (FlexElementTitle & { size?: FlexSize })
     | (FlexElementText & { size?: FlexSize })
     | (FlexElementBullets & { size?: FlexSize })