v2.2.3 - Fix YAML/preview parity (show_name/icon, perform-action, bg opacity, aspect-ratio, color:auto, icon spin)

Author: aspenrt78

custom_components/button_builder/manifest.json

@@ -16,5 +16,5 @@
 
                      ],
     "single_config_entry":  true,
-    "version": "2.2.2"
+    "version": "2.2.3"
 }

custom_components/button_builder/www/index.js

@@ -1,7 +1,7 @@
 {
   "name": "button-builder",
   "private": true,
-  "version": "2.2.2",
+  "version": "2.2.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -743,13 +743,14 @@ export const PreviewCard: React.FC<Props> = ({ config, simulatedState, onSimulat
   const stateIconAnimation = matchingStateStyle?.iconAnimation;
   const stateIconAnimationSpeed = matchingStateStyle?.iconAnimationSpeed;
 
-  // Use state-specific animation if it exists and is not 'none', otherwise use config animation
+  // Use state-specific animation if it exists and is not 'none', otherwise use config animation.
+  // config.spin (legacy "Icon Spin" checkbox) maps to the 'spin' animation type.
   const effectiveIconAnimation = (stateIconAnimation && stateIconAnimation !== 'none') 
     ? stateIconAnimation 
-    : config.iconAnimation;
+    : (config.spin && config.iconAnimation === 'none' ? 'spin' : config.iconAnimation);
   const effectiveIconAnimationTrigger = (stateIconAnimation && stateIconAnimation !== 'none')
     ? 'always'
-    : config.iconAnimationTrigger;
+    : (config.spin ? 'always' : config.iconAnimationTrigger);
 
   // Icon animations: Always apply when selected (alwaysAnimateIcon checkbox overrides state logic)
   const shouldShowIconAnimation = config.alwaysAnimateIcon || 
@@ -760,7 +761,10 @@ export const PreviewCard: React.FC<Props> = ({ config, simulatedState, onSimulat
   const iconAnimationClass = (effectiveIconAnimation !== 'none' && shouldShowIconAnimation) 
     ? `cba-animate-${effectiveIconAnimation}` 
     : '';
-  const iconAnimationDuration = stateIconAnimationSpeed || config.iconAnimationSpeed || '2s';
+  // Use spinDuration for the legacy spin property, otherwise use animation speed
+  const iconAnimationDuration = config.spin && config.iconAnimation === 'none'
+    ? (config.spinDuration || '2s')
+    : (stateIconAnimationSpeed || config.iconAnimationSpeed || '2s');
 
   // Marquee Logic: If marquee is active and valid
   const isMarquee = effectiveCardAnimation === 'marquee' && 

src/components/PreviewCard.tsx

@@ -178,13 +178,19 @@ const generateActionYaml = (
 ): string => {
   let yaml = `  action: ${actionType}\n`;
 
-  if (actionType === 'call-service' && actionData) {
+  if ((actionType === 'call-service' || actionType === 'perform-action') && actionData) {
     try {
       const data = JSON.parse(actionData);
-      yaml += `  service: ${data.service || ''}\n`;
-      if (data.service_data) {
-        yaml += `  service_data:\n`;
-        Object.entries(data.service_data).forEach(([key, value]) => {
+      // perform-action uses perform_action key; call-service uses service key
+      if (actionType === 'perform-action') {
+        yaml += `  perform_action: ${data.service || data.perform_action || ''}\n`;
+      } else {
+        yaml += `  service: ${data.service || ''}\n`;
+      }
+      if (data.service_data || data.data) {
+        const serviceData = data.service_data || data.data;
+        yaml += actionType === 'perform-action' ? `  data:\n` : `  service_data:\n`;
+        Object.entries(serviceData).forEach(([key, value]) => {
           yaml += `    ${key}: ${JSON.stringify(value)}\n`;
         });
       }
@@ -276,12 +282,13 @@ export const generateYaml = (config: ButtonConfig): string => {
   // --- Base Card Styles ---
   const cardStyles = [
     config.height !== 'auto' ? `height: ${config.height}` : null,
-    config.aspectRatio ? `aspect-ratio: ${config.aspectRatio}` : null,
+    // aspect-ratio is already emitted as a top-level YAML property; omit from styles.card
     gradientCSS ? gradientCSS : (bgColor ? `background-color: ${bgColor}` : null),
     config.cardOpacity < 100 ? `opacity: ${config.cardOpacity / 100}` : null,
     `border-radius: ${config.borderRadius}`,
     `padding: ${config.padding}`,
-    `color: ${config.color}`,
+    // Only emit color in styles.card when not using color:auto (which is a top-level override)
+    !config.colorAuto ? `color: ${config.color}` : null,
     // Use custom font if specified, otherwise use fontFamily dropdown
     (config.customFontName && config.customFontUrl) 
       ? `font-family: '${config.customFontName}', sans-serif`
@@ -346,7 +353,8 @@ export const generateYaml = (config: ButtonConfig): string => {
   if (config.nameTemplate) {
     yaml += `name: ${config.nameTemplate}\n`;
   } else if (config.name) {
-    yaml += `name: ${config.name}\n`;
+    // Quote the name to handle colons, hashes and other YAML special characters
+    yaml += `name: "${config.name.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"\n`;
   }
 
   if (config.iconTemplate) {
@@ -407,9 +415,9 @@ export const generateYaml = (config: ButtonConfig): string => {
   const showState = hasEntity ? config.showState : false;
   const showLastChanged = hasEntity ? config.showLastChanged : false;
 
-  // Only output show options that are true
-  if (config.showName) yaml += `show_name: true\n`;
-  if (config.showIcon) yaml += `show_icon: true\n`;
+  // show_name/show_icon default to true in button-card — only emit when overriding to false
+  if (!config.showName) yaml += `show_name: false\n`;
+  if (!config.showIcon) yaml += `show_icon: false\n`;
   if (showState) yaml += `show_state: true\n`;
   if (showLabel) yaml += `show_label: true\n`;
   if (showEntityPicture) yaml += `show_entity_picture: true\n`;
@@ -1334,7 +1342,10 @@ ${stateIconStyles.map(s => `        - ${formatStyleForYaml(s)}`).join('\n')}` :
           conditionalCardStyles.push(gradientBg);
         }
       } else if (stateStyle.backgroundColor) {
-        conditionalCardStyles.push(`background-color: ${stateStyle.backgroundColor}`);
+        // Apply backgroundColorOpacity if set to something other than full opacity
+        const bgOpacity = stateStyle.backgroundColorOpacity !== undefined ? stateStyle.backgroundColorOpacity : 100;
+        const bgValue = bgOpacity < 100 ? hexToRgba(stateStyle.backgroundColor, bgOpacity) : stateStyle.backgroundColor;
+        conditionalCardStyles.push(`background-color: ${bgValue}`);
       }
       if (stateStyle.borderColor) {
         conditionalCardStyles.push(`border-color: ${stateStyle.borderColor}`);

src/utils/yamlGenerator.ts

@@ -439,11 +439,14 @@ function parseAction(
     cfg[configPrefix] = action.action;
   }
 
-  // Service data
-  if (action.service || action.service_data || action.target) {
+  // Service data - handle both call-service (service/service_data) and perform-action (perform_action/data) formats
+  if (action.service || action.service_data || action.target || action.perform_action || action.data) {
     const serviceData: any = {};
-    if (action.service) serviceData.service = action.service;
-    if (action.service_data) serviceData.service_data = action.service_data;
+    // Support both old (call-service: service key) and new (perform-action: perform_action key)
+    const serviceName = action.service || action.perform_action;
+    if (serviceName) serviceData.service = serviceName;
+    const dataObj = action.service_data || action.data;
+    if (dataObj) serviceData.service_data = dataObj;
     if (action.target) serviceData.target = action.target;
     cfg[`${configPrefix}Data`] = JSON.stringify(serviceData, null, 2);
   }