refactor(builder): extract useNodeProp hook, dedup StylePanel setProp boilerplate

Adopted in BackgroundSectionStylePanel, ButtonStylePanel, ContainerStylePanel,
FormStylePanel, GenericPropsEditor, HeroStylePanel, ImageStylePanel,
MediaStylePanel, NavStylePanel, SectionTypePanel, SocialStylePanel,
TextStylePanel — only where the inline setProp/setPropStyle were behaviorally
identical to the hook. PricingStylePanel and FeaturesEditor keep their own
array-mutation logic since it differs. Behavior-preserving (task E4.1).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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) => {
-    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]);
+  const { setProp: setPropValue, setPropStyle: setStyleValue } = useNodeProp(selectedId);
 
   // Categorize all props
   const allProps = Object.entries(nodeProps).filter(([key]) => !SKIP_PROPS.has(key));