craft/src/panels/right/styles/BackgroundSectionStylePanel.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
-import { useEditor } from '@craftjs/core';
 import {
   BG_COLORS,
   SPACING_PRESETS,
@@ -15,22 +14,13 @@ import {
   labelStyle,
   inputStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 import { AssetPicker } from '../../../ui/AssetPicker';
 
 /* ---------- BACKGROUND SECTION ---------- */
 export const BackgroundSectionStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
-  const { actions } = useEditor();
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setPropStyle = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   const style = nodeProps.style || {};
 

craft/src/panels/right/styles/ButtonStylePanel.tsx

@@ -12,6 +12,7 @@ import {
   PresetButtonGrid,
   TextInputField,
   autoTextColor,
+  useNodeProp,
 } from './shared';
 
 /* ---------- BUTTON ---------- */
@@ -19,14 +20,7 @@ export const ButtonStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePr
   const { actions } = useEditor();
   const style: CSSProperties = nodeProps.style || {};
 
-  const setPropStyle = useCallback(
+  const { setPropStyle } = useNodeProp(selectedId);
-    (property: string, value: string) => {
-      actions.setProp(selectedId, (props: any) => {
-        props.style = { ...props.style, [property]: value };
-      });
-    },
-    [actions, selectedId],
-  );
 
   const setButtonColor = useCallback(
     (bgColor: string) => {

craft/src/panels/right/styles/ContainerStylePanel.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
-import { useEditor } from '@craftjs/core';
 import {
   BG_COLORS,
   SPACING_PRESETS,
@@ -14,28 +13,14 @@ import {
   labelStyle,
   inputStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 
 /* ---------- CONTAINER / SECTION ---------- */
 export const ContainerStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
-  const { actions } = useEditor();
   const style: CSSProperties = nodeProps.style || {};
 
-  const setPropStyle = useCallback(
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-    (property: string, value: string) => {
-      actions.setProp(selectedId, (props: any) => {
-        props.style = { ...props.style, [property]: value };
-      });
-    },
-    [actions, selectedId],
-  );
-
-  const setProp = useCallback(
-    (key: string, value: string) => {
-      actions.setProp(selectedId, (props: any) => { props[key] = value; });
-    },
-    [actions, selectedId],
-  );
 
   return (
     <>

craft/src/panels/right/styles/FormStylePanel.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
-import { useEditor } from '@craftjs/core';
 import {
   BG_COLORS,
   SPACING_PRESETS,
@@ -15,21 +14,12 @@ import {
   inputStyle,
   btnActiveStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 
 /* ---------- FORM ---------- */
 export const FormStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
-  const { actions } = useEditor();
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setPropStyle = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   const style = nodeProps.style || {};
 

craft/src/panels/right/styles/GenericPropsEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useEditor } from '@craftjs/core';
 import {
   TEXT_COLORS,
@@ -17,6 +17,7 @@ import {
   inputStyle,
   smallInputStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 
 /* ---------- SMART GENERIC PROPS EDITOR (Fallback) ---------- */
@@ -27,15 +28,7 @@ export const GenericPropsEditor: React.FC<{ selectedId: string; nodeProps: Recor
 
   const SKIP_PROPS = new Set(['style', 'children', 'cssId', 'cssClass']);
 
-  const setPropValue = useCallback((key: string, value: any) => {
+  const { setProp: setPropValue, setPropStyle: setStyleValue } = useNodeProp(selectedId);
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setStyleValue = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   // Categorize all props
   const allProps = Object.entries(nodeProps).filter(([key]) => !SKIP_PROPS.has(key));

craft/src/panels/right/styles/HeroStylePanel.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
-import { useEditor } from '@craftjs/core';
 import {
   StylePanelProps,
   CollapsibleSection,
@@ -8,16 +7,13 @@ import {
   inputStyle,
   btnActiveStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 import { AssetPicker } from '../../../ui/AssetPicker';
 
 /* ---------- HERO STYLE PANEL ---------- */
 export const HeroStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
-  const { actions } = useEditor();
+  const { setProp } = useNodeProp(selectedId);
-
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
 
   const bgType = nodeProps.bgType || 'color';
 

craft/src/panels/right/styles/ImageStylePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 import { useEditor } from '@craftjs/core';
 import {
   IMAGE_RADIUS_PRESETS,
@@ -8,6 +8,7 @@ import {
   SectionLabel,
   PresetButtonGrid,
   TextInputField,
+  useNodeProp,
 } from './shared';
 import { AssetPicker } from '../../../ui/AssetPicker';
 
@@ -16,14 +17,7 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
   const { actions } = useEditor();
   const style: CSSProperties = nodeProps.style || {};
 
-  const setPropStyle = useCallback(
+  const { setPropStyle } = useNodeProp(selectedId);
-    (property: string, value: string) => {
-      actions.setProp(selectedId, (props: any) => {
-        props.style = { ...props.style, [property]: value };
-      });
-    },
-    [actions, selectedId],
-  );
 
   const maxWidthPresets = [
     { label: '25%', value: '25%' },

craft/src/panels/right/styles/MediaStylePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useEditor } from '@craftjs/core';
 import {
   BG_COLORS,
@@ -17,22 +17,14 @@ import {
   inputStyle,
   smallInputStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 import { AssetPicker } from '../../../ui/AssetPicker';
 
 /* ---------- MEDIA (Video / Gallery / Map / Slider) ---------- */
 export const MediaStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
   const { actions } = useEditor();
-
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setPropStyle = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   const style = nodeProps.style || {};
 

craft/src/panels/right/styles/NavStylePanel.tsx

@@ -15,22 +15,14 @@ import {
   inputStyle,
   smallInputStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 import { AssetPicker } from '../../../ui/AssetPicker';
 
 /* ---------- NAV / MENU / LOGO ---------- */
 export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
   const { actions } = useEditor();
-
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setPropStyle = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   const links: any[] = nodeProps.links || [];
 

craft/src/panels/right/styles/SectionTypePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useEditor } from '@craftjs/core';
 import {
   BG_COLORS,
@@ -17,22 +17,14 @@ import {
   inputStyle,
   smallInputStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 import { FeaturesEditor } from './FeaturesEditor';
 
 /* ---------- SECTION-TYPE (Accordion, Tabs, Pricing, Testimonials, etc.) ---------- */
 export const SectionTypePanel: React.FC<StylePanelProps & { typeName: string }> = ({ selectedId, nodeProps, typeName }) => {
   const { actions } = useEditor();
-
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setPropStyle = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   const style = nodeProps.style || {};
 

craft/src/panels/right/styles/SocialStylePanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useEditor } from '@craftjs/core';
 import {
   BG_COLORS,
@@ -16,21 +16,13 @@ import {
   smallInputStyle,
   btnActiveStyle,
   sectionGap,
+  useNodeProp,
 } from './shared';
 
 /* ---------- SOCIAL / ICON / STAR RATING ---------- */
 export const SocialStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
   const { actions } = useEditor();
-
+  const { setProp, setPropStyle } = useNodeProp(selectedId);
-  const setProp = useCallback((key: string, value: any) => {
-    actions.setProp(selectedId, (props: any) => { props[key] = value; });
-  }, [actions, selectedId]);
-
-  const setPropStyle = useCallback((key: string, value: string) => {
-    actions.setProp(selectedId, (props: any) => {
-      props.style = { ...props.style, [key]: value };
-    });
-  }, [actions, selectedId]);
 
   const style = nodeProps.style || {};
 

craft/src/panels/right/styles/TextStylePanel.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
-import { useEditor } from '@craftjs/core';
 import {
   TEXT_COLORS,
   FONT_FAMILIES,
@@ -11,21 +10,14 @@ import {
   SectionLabel,
   ColorSwatchGrid,
   PresetButtonGrid,
+  useNodeProp,
 } from './shared';
 
 /* ---------- TEXT ---------- */
 export const TextStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
-  const { actions } = useEditor();
   const style: CSSProperties = nodeProps.style || {};
 
-  const setPropStyle = useCallback(
+  const { setPropStyle } = useNodeProp(selectedId);
-    (property: string, value: string) => {
-      actions.setProp(selectedId, (props: any) => {
-        props.style = { ...props.style, [property]: value };
-      });
-    },
-    [actions, selectedId],
-  );
 
   return (
     <>

craft/src/panels/right/styles/shared.tsx

@@ -288,6 +288,18 @@ export interface StylePanelProps {
   nodeProps: Record<string, any>;
 }
 
+/* ---------- useNodeProp ----------
+   Shared setProp/setPropStyle boilerplate repeated across many *StylePanel.tsx
+   files. Only adopted where a panel's inline definitions were byte-equivalent
+   to this (some panels use different param names or extra logic and keep
+   their own local versions). */
+export function useNodeProp(selectedId: string) {
+  const { actions } = useEditor();
+  const setProp = useCallback((key: string, value: any) => actions.setProp(selectedId, (p: any) => { p[key] = value; }), [actions, selectedId]);
+  const setPropStyle = useCallback((prop: string, value: string) => actions.setProp(selectedId, (p: any) => { p.style = { ...p.style, [prop]: value }; }), [actions, selectedId]);
+  return { setProp, setPropStyle };
+}
+
 /* ---------- Array Prop Editor (reusable for features, items, plans, etc.) ---------- */
 interface ArrayPropEditorProps {
   selectedId: string;