improved disabling validation

frontend/src/components/RuntimePresentation.tsx

@@ -69,7 +69,10 @@ import type {
   GalleryCarouselMediaItem,
   InfoPanelImage,
 } from '../types/constructor';
-import { isInfoPanelElementType } from '../lib/elementDefaults';
+import {
+  isElementFlagEnabled,
+  isInfoPanelElementType,
+} from '../lib/elementDefaults';
 import type { ElementTransitionSettings } from '../types/transition';
 import {
   entityToProjectSettings,
@@ -693,10 +696,16 @@ export default function RuntimePresentation({
 
   const handleElementClick = useCallback(
     (element: CanvasElement) => {
-      if (isNavigationType(element.type) && element.navDisabled) {
+      if (
+        isNavigationType(element.type) &&
+        isElementFlagEnabled(element.navDisabled)
+      ) {
         return;
       }
-      if (isInfoPanelElementType(element.type) && element.infoPanelDisabled) {
+      if (
+        isInfoPanelElementType(element.type) &&
+        isElementFlagEnabled(element.infoPanelDisabled)
+      ) {
         return;
       }
 
@@ -1023,9 +1032,9 @@ export default function RuntimePresentation({
                     element={element}
                     isDisabled={
                       (isNavigationType(element.type) &&
-                        Boolean(element.navDisabled)) ||
+                        isElementFlagEnabled(element.navDisabled)) ||
                       (isInfoPanelElementType(element.type) &&
-                        Boolean(element.infoPanelDisabled))
+                        isElementFlagEnabled(element.infoPanelDisabled))
                     }
                     onClick={() => handleElementClick(element)}
                     resolveUrl={resolveUrlWithBlob}

frontend/src/components/UiElements/elements/InfoPanelElement.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import type { CSSProperties } from 'react';
 import type { CanvasElement } from '../../../types/constructor';
 import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import { isElementFlagEnabled } from '../../../lib/elementDefaults';
 
 interface InfoPanelElementProps {
   element: CanvasElement;
@@ -27,7 +28,7 @@ const InfoPanelElement: React.FC<InfoPanelElementProps> = ({
   onClick,
 }) => {
   const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
-  const isDisabled = element.infoPanelDisabled || false;
+  const isDisabled = isElementFlagEnabled(element.infoPanelDisabled);
   const triggerLabel = element.infoPanelTriggerLabel || 'Info';
   const fontFamily = element.infoPanelTriggerFontFamily || undefined;
 

frontend/src/lib/elementDefaults.ts

@@ -73,6 +73,13 @@ export const createLocalId = (): string => {
 export const clamp = (value: number, min: number, max: number): number =>
   Math.min(Math.max(value, min), max);
 
+/**
+ * Strictly parse feature flags stored on element JSON.
+ */
+export const isElementFlagEnabled = (value: unknown): boolean =>
+  value === true ||
+  (typeof value === 'string' && value.trim().toLowerCase() === 'true');
+
 /**
  * Normalize appearDelaySec value
  */

frontend/src/pages/constructor.tsx

@@ -63,6 +63,7 @@ import {
   normalizeAppearDurationSec,
   ELEMENT_TYPE_LABELS,
   getNavigationButtonKind,
+  isElementFlagEnabled,
   isNavigationElementType,
   isDescriptionElementType,
   isMediaElementType,
@@ -1475,7 +1476,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         if (transitionPreview || isTransitionBuffering) {
           return;
         }
-        if (element.navDisabled) {
+        if (isElementFlagEnabled(element.navDisabled)) {
           return;
         }
 
@@ -2162,9 +2163,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                         isEditMode={isConstructorEditMode}
                         isDisabled={
                           (isNavigationElementType(element.type) &&
-                            Boolean(element.navDisabled)) ||
+                            isElementFlagEnabled(element.navDisabled)) ||
                           (isInfoPanelElementType(element.type) &&
-                            Boolean(element.infoPanelDisabled))
+                            isElementFlagEnabled(element.infoPanelDisabled))
                         }
                         onClick={() => onCanvasElementClick(element)}
                         onMouseDown={(event) =>