From 8244a33c6913ea435f81d7f4fee968c3f9a8d0f7 Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Mon, 27 Apr 2026 11:45:17 +0200
Subject: [PATCH] fixded element default settings

---
 frontend/src/lib/elementDefaults.ts | 63 ++++++++++++++++++++---------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/elementDefaults.ts b/frontend/src/lib/elementDefaults.ts
index ff44d05..482b94a 100644
--- a/frontend/src/lib/elementDefaults.ts
+++ b/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);
   });