lumina-slides 9.0.4 → 9.0.6

package/src/components/studio/StudioToolbar.vue

@@ -3,7 +3,7 @@
         <!-- Logo -->
         <div class="flex items-center gap-3">
             <span class="font-heading font-bold text-white tracking-wider">LUMINA STUDIO</span>
-            <router-link :to="{ name: 'dashboard' }" class="text-white/40 hover:text-white text-xs transition">
+            <router-link v-if="!embedMode" :to="{ name: 'dashboard' }" class="text-white/40 hover:text-white text-xs transition">
                 <i class="ph-thin ph-arrow-left mr-1"></i> Exit
             </router-link>
         </div>
@@ -52,7 +52,13 @@
                 <i class="ph-thin ph-arrow-u-up-right"></i>
             </button>
             <div class="w-px h-4 bg-[#444] mx-1"></div>
-            <button @click="saveToFirestore" :disabled="isSaving"
+            <button v-if="embedMode" @click="emitSave" :disabled="isSaving"
+                class="min-w-[80px] px-3 py-1 bg-green-600 hover:bg-green-500 disabled:bg-green-800 text-white text-xs font-bold rounded transition flex items-center justify-center gap-1">
+                <i v-if="isSaving" class="ph-thin ph-spinner ph-spin"></i>
+                <i v-else class="ph-thin ph-floppy-disk"></i>
+                {{ isSaving ? 'SAVING...' : 'SAVE' }}
+            </button>
+            <button v-else @click="saveToFirestore" :disabled="isSaving"
                 class="min-w-[80px] px-3 py-1 bg-green-600 hover:bg-green-500 disabled:bg-green-800 text-white text-xs font-bold rounded transition flex items-center justify-center gap-1">
                 <i v-if="isSaving" class="ph-thin ph-spinner ph-spin"></i>
                 <i v-else-if="showSavedMessage" class="ph-thin ph-check"></i>
@@ -86,6 +92,9 @@ import type { Deck } from '../../core/types';
 // import SaveSuccessModal from './SaveSuccessModal.vue';
 import StudioJsonEditor from './StudioJsonEditor.vue';
 
+const props = withDefaults(defineProps<{ embedMode?: boolean }>(), { embedMode: false });
+const emit = defineEmits<{ save: [deck: Deck] }>();
+
 const editor = useEditor();
 const route = useRoute();
 const { user } = useAuth();
@@ -150,6 +159,15 @@ const addElement = (type: string) => {
     }
 };
 
+const emitSave = () => {
+    const rawDeck = toRaw(editor.store.state.deck);
+    if (!rawDeck) return;
+    isSaving.value = true;
+    const deckCopy = JSON.parse(JSON.stringify(rawDeck)) as Deck;
+    emit('save', deckCopy);
+    isSaving.value = false;
+};
+
 const saveToFirestore = async () => {
     isSaving.value = true;
     try {

package/src/composables/useElementState.ts

@@ -66,7 +66,18 @@ export function useElementState(id: MaybeRefOrGetter<string>): UseElementStateRe
       out.opacity = s.opacity;
     }
     if (s?.transform) out.transform = s.transform;
-    if (s?.style && typeof s.style === 'object') Object.assign(out, s.style);
+    // Only apply safe animation/visual styles from state, not layout-critical properties
+    // This prevents state from breaking component layouts (e.g., display, position, flex properties)
+    if (s?.style && typeof s.style === 'object') {
+      const safeStyleProps = ['opacity', 'transform', 'transition', 'filter', 'backdropFilter', 
+        'willChange', 'pointerEvents', 'zIndex', 'color', 'backgroundColor', 'borderColor'];
+      Object.entries(s.style).forEach(([key, value]) => {
+        // Only copy safe properties that don't affect layout structure
+        if (safeStyleProps.includes(key) || key.startsWith('--')) {
+          out[key] = value;
+        }
+      });
+    }
     return out;
   });
 

package/src/composables/useFlexLayout.ts

@@ -1,122 +1,128 @@
-import type { FlexElementContent } from '../core/types';
-import type { CSSProperties } from 'vue';
-
-// Constants
-export const spacingVarMap: Record<string, string> = {
-    'none': 'var(--lumina-space-none, 0)',
-    'xs': 'var(--lumina-space-xs)',
-    'sm': 'var(--lumina-space-sm)',
-    'md': 'var(--lumina-space-md)',
-    'lg': 'var(--lumina-space-lg)',
-    'xl': 'var(--lumina-space-xl)',
-    '2xl': 'var(--lumina-space-2xl)',
-    '3xl': 'var(--lumina-space-3xl)',
-    '4xl': 'var(--lumina-space-4xl)',
-};
-
-export const sizeMap: Record<string, string> = {
-    'auto': 'auto',
-    'quarter': '25%',
-    'third': '33.333%',
-    'half': '50%',
-    'two-thirds': '66.666%',
-    'three-quarters': '75%',
-    'full': '100%',
-};
-
-export const valignMap: Record<string, string> = {
-    'top': 'flex-start',
-    'Top': 'flex-start',
-    'center': 'center',
-    'Center': 'center',
-    'bottom': 'flex-end',
-    'Bottom': 'flex-end',
-};
-
-export const halignMap: Record<string, string> = {
-    'left': 'flex-start',
-    'Left': 'flex-start',
-    'center': 'center',
-    'Center': 'center',
-    'right': 'flex-end',
-    'Right': 'flex-end',
-};
-
-// Helpers
-export const getSizeClass = (size?: string): string => {
-    if (!size || size === 'auto') return 'flex-1';
-    return '';
-};
-
-export const getFlexItemStyle = (element: { size?: string }, directionVertical: boolean): CSSProperties => {
-    const size = element.size || 'auto';
-    if (size === 'auto') return { flex: '1 1 auto' };
-    return {
-        flex: `0 0 ${sizeMap[size]}`,
-        maxWidth: !directionVertical ? sizeMap[size] : undefined,
-        maxHeight: directionVertical ? sizeMap[size] : undefined,
-    };
-};
-
-export const getFlexContainerStyle = (element: FlexElementContent): CSSProperties => {
-    const valign = element.valign || 'center';
-    const halign = element.halign || 'left';
-    const gap = element.gap || 'md';
-    const padding = element.padding || 'lg';
-
-    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'],
-        gap: spacingVarMap[gap],
-        padding: spacingVarMap[padding],
-    };
-};
-
-// Deprecated: kept for backward compat if needed, but we will update consumers
-export const getElementStyle = getFlexItemStyle;
-export const getContentStyle = (element: FlexElementContent & { size?: string }): CSSProperties => {
-    // Legacy combined style
-    return {
-        ...getFlexItemStyle(element, false), // Default assumption
-        ...getFlexContainerStyle(element)
-    };
-};
-
-export const getTopLevelStyle = (): CSSProperties => ({
-    display: 'flex',
-    alignItems: 'center',
-    padding: spacingVarMap['lg'],
-});
-
-/**
- * Alignment for the main flex slide container (all elements as a group).
- * When direction is horizontal: justify-content = halign, align-items = valign.
- * When direction is vertical: justify-content = valign, align-items = halign.
- */
-export const getFlexSlideMainStyle = (
-    direction: 'horizontal' | 'vertical' | undefined,
-    halign: string | undefined,
-    valign: string | undefined
-): CSSProperties => {
-    const jc = direction === 'vertical' ? valignMap[valign || 'top'] : halignMap[halign || 'left'];
-    const ai = direction === 'vertical' ? halignMap[halign || 'left'] : valignMap[valign || 'top'];
-    return {
-        justifyContent: jc as CSSProperties['justifyContent'],
-        alignItems: ai as CSSProperties['alignItems'],
-    };
-};
-
-export const getRoundedClass = (rounded?: string, fill?: boolean) => {
-    if (fill !== false && !rounded) return 'w-full h-full';
-    const map: Record<string, string> = {
-        'none': 'w-full h-full rounded-none',
-        'sm': 'w-full h-full rounded-sm',
-        'md': 'w-full h-full rounded-md',
-        'lg': 'w-full h-full rounded-lg',
-        'xl': 'w-full h-full rounded-xl',
-        'full': 'w-full h-full rounded-full',
-    };
-    return map[rounded || 'lg'] || 'w-full h-full rounded-lg';
-};
+import type { FlexElementContent } from '../core/types';
+import type { CSSProperties } from 'vue';
+
+// Constants
+export const spacingVarMap: Record<string, string> = {
+    'none': 'var(--lumina-space-none, 0)',
+    'xs': 'var(--lumina-space-xs)',
+    'sm': 'var(--lumina-space-sm)',
+    'md': 'var(--lumina-space-md)',
+    'lg': 'var(--lumina-space-lg)',
+    'xl': 'var(--lumina-space-xl)',
+    '2xl': 'var(--lumina-space-2xl)',
+    '3xl': 'var(--lumina-space-3xl)',
+    '4xl': 'var(--lumina-space-4xl)',
+};
+
+export const sizeMap: Record<string, string> = {
+    'auto': 'auto',
+    'quarter': '25%',
+    'third': '33.333%',
+    'half': '50%',
+    'two-thirds': '66.666%',
+    'three-quarters': '75%',
+    'full': '100%',
+};
+
+export const valignMap: Record<string, string> = {
+    'top': 'flex-start',
+    'Top': 'flex-start',
+    'center': 'center',
+    'Center': 'center',
+    'bottom': 'flex-end',
+    'Bottom': 'flex-end',
+};
+
+export const halignMap: Record<string, string> = {
+    'left': 'flex-start',
+    'Left': 'flex-start',
+    'center': 'center',
+    'Center': 'center',
+    'right': 'flex-end',
+    'Right': 'flex-end',
+};
+
+// Helpers
+export const getSizeClass = (size?: string): string => {
+    if (!size || size === 'auto') return 'flex-1';
+    return '';
+};
+
+export const getFlexItemStyle = (element: { size?: string }, directionVertical: boolean): CSSProperties => {
+    const size = element.size || 'auto';
+    if (size === 'auto') return { flex: '1 1 auto' };
+    return {
+        flex: `0 0 ${sizeMap[size]}`,
+        maxWidth: !directionVertical ? sizeMap[size] : undefined,
+        maxHeight: directionVertical ? sizeMap[size] : undefined,
+    };
+};
+
+export const getFlexContainerStyle = (element: FlexElementContent): CSSProperties => {
+    const valign = element.valign || 'center';
+    const halign = element.halign || 'left';
+    const gap = element.gap || 'md';
+    const padding = element.padding || 'lg';
+    const direction = element.direction || 'vertical';
+
+    return {
+        display: 'flex',
+        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 || {}),
+    };
+};
+
+// Deprecated: kept for backward compat if needed, but we will update consumers
+export const getElementStyle = getFlexItemStyle;
+export const getContentStyle = (element: FlexElementContent & { size?: string }): CSSProperties => {
+    // Legacy combined style
+    return {
+        ...getFlexItemStyle(element, false), // Default assumption
+        ...getFlexContainerStyle(element)
+    };
+};
+
+export const getTopLevelStyle = (): CSSProperties => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: spacingVarMap['lg'],
+});
+
+/**
+ * Alignment for the main flex slide container (all elements as a group).
+ * When direction is horizontal: justify-content = halign, align-items = valign.
+ * When direction is vertical: justify-content = valign, align-items = halign.
+ */
+export const getFlexSlideMainStyle = (
+    direction: 'horizontal' | 'vertical' | undefined,
+    halign: string | undefined,
+    valign: string | undefined
+): CSSProperties => {
+    const jc = direction === 'vertical' ? valignMap[valign || 'top'] : halignMap[halign || 'left'];
+    const ai = direction === 'vertical' ? halignMap[halign || 'left'] : valignMap[valign || 'top'];
+    return {
+        justifyContent: jc as CSSProperties['justifyContent'],
+        alignItems: ai as CSSProperties['alignItems'],
+    };
+};
+
+export const getRoundedClass = (rounded?: string, fill?: boolean) => {
+    if (fill !== false && !rounded) return 'w-full h-full';
+    const map: Record<string, string> = {
+        'none': 'w-full h-full rounded-none',
+        'sm': 'w-full h-full rounded-sm',
+        'md': 'w-full h-full rounded-md',
+        'lg': 'w-full h-full rounded-lg',
+        'xl': 'w-full h-full rounded-xl',
+        'full': 'w-full h-full rounded-full',
+    };
+    return map[rounded || 'lg'] || 'w-full h-full rounded-lg';
+};