fixded element default settings

frontend/src/lib/elementDefaults.ts

@@ -16,6 +16,29 @@ import type {
 import { ELEMENT_STYLE_PROPS } from './elementStyles';
 import { GALLERY_SECTION_STYLE_PROPS } from './gallerySectionStyles';
 
+/**
+ * Effect properties that can be configured in element defaults.
+ * Used for appear animations, hover effects, focus effects, and active effects.
+ */
+export const ELEMENT_EFFECT_PROPS = [
+  'appearAnimation',
+  'appearAnimationDuration',
+  'appearAnimationEasing',
+  'hoverScale',
+  'hoverOpacity',
+  'hoverBackgroundColor',
+  'hoverColor',
+  'hoverBoxShadow',
+  'hoverTransitionDuration',
+  'focusScale',
+  'focusOpacity',
+  'focusOutline',
+  'focusBoxShadow',
+  'activeScale',
+  'activeOpacity',
+  'activeBackgroundColor',
+] as const;
+
 /**
  * Generate a local unique ID for elements
  */
@@ -304,6 +327,24 @@ export const mergeElementWithDefaults = (
     }
   });
 
+  // For effect properties, use defaults if element has empty/null/undefined value
+  // This ensures effect defaults (animations, hover, focus, active) cascade to elements
+  ELEMENT_EFFECT_PROPS.forEach((prop) => {
+    const elementValue = elementRecord[prop];
+    const defaultValue = defaultsRecord[prop];
+    const elementIsEmpty =
+      elementValue === '' ||
+      elementValue === undefined ||
+      elementValue === null;
+    const defaultHasValue =
+      defaultValue !== undefined &&
+      defaultValue !== null &&
+      defaultValue !== '';
+    if (elementIsEmpty && defaultHasValue) {
+      mergedRecord[prop] = defaultValue;
+    }
+  });
+
   // Normalize position values
   merged.xPercent = clamp(Number(merged.xPercent ?? element.xPercent), 0, 100);
   merged.yPercent = clamp(Number(merged.yPercent ?? element.yPercent), 0, 100);
@@ -448,26 +489,8 @@ export const buildElementSettings = (
     addIfNotEmpty(settings, prop, value);
   });
 
-  // Effect properties
-  const effectProps = [
-    'appearAnimation',
-    'appearAnimationDuration',
-    'appearAnimationEasing',
-    'hoverScale',
-    'hoverOpacity',
-    'hoverBackgroundColor',
-    'hoverColor',
-    'hoverBoxShadow',
-    'hoverTransitionDuration',
-    'focusScale',
-    'focusOpacity',
-    'focusOutline',
-    'focusBoxShadow',
-    'activeScale',
-    'activeOpacity',
-    'activeBackgroundColor',
-  ];
-  effectProps.forEach((prop) => {
+  // Effect properties (using shared constant)
+  ELEMENT_EFFECT_PROPS.forEach((prop) => {
     const value = (element as Record<string, unknown>)[prop];
     addIfNotEmpty(settings, prop, value);
   });