refactor(builder): use shared escaper everywhere, drop 26 local copies

Replace divergent, buggy local esc/escapeHtml helpers across 26 files with
imports from src/utils/escape (escapeHtml/escapeAttr). Attribute call sites use
escapeAttr, text-content sites use escapeHtml. Several toHtml outputs now
correctly escape & where old local escapers omitted it.

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

craft/src/components/layout/BackgroundSection.tsx

@@ -3,6 +3,7 @@ import { useNode, Element, UserComponent } from '@craftjs/core';
 import { Container } from './Container';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { AnchorIdField } from '../../ui/AnchorIdField';
+import { escapeAttr } from '../../utils/escape';
 
 interface BackgroundSectionProps {
   bgImage?: string;
@@ -182,7 +183,6 @@ BackgroundSection.craft = {
 /* ---------- HTML export ---------- */
 
 (BackgroundSection as any).toHtml = (props: BackgroundSectionProps, childrenHtml: string) => {
-  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const outerStyle = cssPropsToString({
     position: 'relative',
     width: '100%',
@@ -207,7 +207,7 @@ BackgroundSection.craft = {
     margin: '0 auto',
     padding: '60px 20px',
   });
-  const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
+  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
   return {
     html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}><div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></section>`,
   };

craft/src/components/layout/ColumnLayout.tsx

@@ -3,6 +3,7 @@ import { useNode, Element, UserComponent } from '@craftjs/core';
 import { Container } from './Container';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { AnchorIdField } from '../../ui/AnchorIdField';
+import { escapeAttr } from '../../utils/escape';
 
 type SplitOption =
   | '100'
@@ -290,7 +291,6 @@ ColumnLayout.craft = {
 /* ---------- HTML export ---------- */
 
 (ColumnLayout as any).toHtml = (props: ColumnLayoutProps, childrenHtml: string) => {
-  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const gap = props.gap || '16px';
   const outerStyle = cssPropsToString({
     display: 'flex',
@@ -299,7 +299,7 @@ ColumnLayout.craft = {
     width: '100%',
     ...props.style,
   });
-  const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
+  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
   return {
     html: `<div${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${childrenHtml}</div>`,
   };

craft/src/components/layout/Container.tsx

@@ -5,6 +5,7 @@ import { SettingsTabs } from '../../ui/SettingsTabs';
 import { BorderControl } from '../../ui/BorderControl';
 import { AdvancedTab } from '../../ui/AdvancedTab';
 import { AnchorIdField } from '../../ui/AnchorIdField';
+import { escapeAttr } from '../../utils/escape';
 
 interface ContainerProps {
   style?: CSSProperties;
@@ -324,7 +325,6 @@ Container.craft = {
 /* ---------- HTML export ---------- */
 
 (Container as any).toHtml = (props: ContainerProps, childrenHtml: string) => {
-  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const tag = props.tag || 'div';
   const isBoxed = props.contentWidth === 'boxed';
   const flexStyles = flexAlignFromTextAlign(props.style?.textAlign);
@@ -340,7 +340,7 @@ Container.craft = {
   }
 
   const styleStr = cssPropsToString(outerCss);
-  const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
+  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
 
   if (isBoxed) {
     const innerStyle = cssPropsToString({ maxWidth: '1200px', margin: '0 auto', ...flexStyles });

craft/src/components/layout/Section.tsx

@@ -3,6 +3,7 @@ import { useNode, Element, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { Container } from './Container';
 import { AnchorIdField } from '../../ui/AnchorIdField';
+import { escapeAttr } from '../../utils/escape';
 
 /* ---------- Shape Divider SVG Paths ---------- */
 
@@ -383,7 +384,6 @@ function buildDividerHtml(
 }
 
 (Section as any).toHtml = (props: SectionProps, childrenHtml: string) => {
-  const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   const hasTopDivider = props.topDivider && props.topDivider !== 'none';
   const hasBottomDivider = props.bottomDivider && props.bottomDivider !== 'none';
 
@@ -401,7 +401,7 @@ function buildDividerHtml(
 
   const topHtml = buildDividerHtml(props.topDivider, props.topDividerColor, props.topDividerHeight, 'top');
   const bottomHtml = buildDividerHtml(props.bottomDivider, props.bottomDividerColor, props.bottomDividerHeight, 'bottom');
-  const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
+  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
 
   return {
     html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${topHtml}<div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div>${bottomHtml}</section>`,