fix(site-builder): HeroSimple canvas render uses the exporter's declaration order (style wins over minHeight prop)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

craft/src/components/sections/HeroSimple.renderParity.test.tsx

@@ -0,0 +1,36 @@
+import { describe, test, expect, afterEach } from 'vitest';
+import { renderEditorHarness, EditorHarness } from '../../test-utils/editorHarness';
+import { HeroSimple } from './HeroSimple';
+
+// The canvas render must lay the <section> out exactly like toHtml (published is the source of
+// truth): same declarations, `style` LAST so style.minHeight / padding win over the minHeight prop.
+const node = (type: string, props: Record<string, unknown>, nodes: string[] = [], extra: Record<string, unknown> = {}) => ({
+  type: { resolvedName: type }, isCanvas: type === 'Container', props, displayName: type, custom: {}, hidden: false, nodes, linkedNodes: {}, ...extra,
+});
+let h: EditorHarness | null = null;
+afterEach(() => { h?.unmount(); h = null; });
+
+const cases: Record<string, any>[] = [
+  { minHeight: '600px', style: { minHeight: '480px' } },
+  { minHeight: '300px', style: {} },
+  { minHeight: '600px', style: { padding: '10px 5px', display: 'block' } },
+];
+
+describe('HeroSimple canvas render == export', () => {
+  test.each(cases)('%j', (props) => {
+    h = renderEditorHarness({
+      initialState: JSON.stringify({
+        ROOT: node('Container', { tag: 'div', style: {} }, ['hero']),
+        hero: node('HeroSimple', props, [], { parent: 'ROOT' }),
+      }),
+    });
+    const sec = h.container.querySelector('section') as HTMLElement;
+    const html = (HeroSimple as any).toHtml(props, '').html.match(/<section[^>]*>/)[0];
+    const exp = document.createElement('div');
+    exp.innerHTML = html + '</section>';
+    const e = (exp.firstElementChild as HTMLElement).style;
+    for (const p of ['minHeight', 'padding', 'display', 'alignItems', 'overflow', 'position'] as const) {
+      expect(sec.style[p], p).toBe(e[p]);
+    }
+  });
+});

craft/src/components/sections/HeroSimple.tsx

@@ -109,16 +109,19 @@ export const HeroSimple: UserComponent<HeroProps> = ({
     <section
       ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
       id={anchorId || undefined}
+      // Same declaration ORDER as toHtml (published output is the source of truth):
+      // computed defaults first, the node's own `style` last so style.minHeight /
+      // padding / display ... win over the `minHeight` prop and the built-ins.
       style={{
-        ...style,
         ...heroBackgroundStyle({ bgType, bgColor, bgGradientFrom, bgGradientTo, bgGradientAngle, bgImage, bgPosition } as HeroProps),
-        minHeight: minHeight === '100vh' ? '100vh' : minHeight,
+        minHeight: minHeight || '500px',
         display: 'flex',
         alignItems: justifyMap[verticalAlign] || 'center',
         justifyContent: 'center',
         position: 'relative',
         overflow: 'hidden',
         padding: '60px 20px',
+        ...style,
       }}
     >
       {/* Video background */}