refactor(builder): remove dead component settings UI

Each component defined a .craft.related.settings panel that was never
rendered -- the right panel renders only GuidedStyles (per-type
*StylePanel components), never .related.settings. Removed all dead
settings components across every component, their settings-only helpers
(including the dead uploadToWhp/showBrowser/handleBrowse asset-browse
blocks in Logo/Navbar/VideoBlock/FeaturesGrid, and CtasEditor in
_cta-helpers), and dropped the now-empty related keys. Render output,
.craft props/rules, and toHtml statics are unchanged.

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

craft/src/components/basic/Menu.tsx

@@ -1,7 +1,6 @@
 import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { usePages } from '../../state/PageContext';
 import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
 
 /* ---------- Types ---------- */
@@ -100,325 +99,6 @@ export const Menu: UserComponent<MenuProps> = ({
   );
 };
 
-/* ---------- Settings panel ---------- */
-
-const MenuSettings: React.FC = () => {
-  const { actions: { setProp }, props } = useNode((node) => ({
-    props: node.data.props as MenuProps,
-  }));
-
-  const { pages } = usePages();
-  const links = props.links || defaultLinks;
-
-  /* Drag state for reordering */
-  const [dragIdx, setDragIdx] = useState<number | null>(null);
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
-
-  /* ---- Link management ---- */
-
-  const updateLink = (index: number, field: keyof MenuLink, value: string | boolean) => {
-    setProp((p: MenuProps) => {
-      const updated = [...(p.links || defaultLinks)];
-      updated[index] = { ...updated[index], [field]: value };
-      p.links = updated;
-    });
-  };
-
-  const addLink = (link?: Partial<MenuLink>) => {
-    setProp((p: MenuProps) => {
-      p.links = [...(p.links || defaultLinks), { text: 'Link', href: '#', ...link }];
-    });
-  };
-
-  const removeLink = (index: number) => {
-    setProp((p: MenuProps) => {
-      const updated = [...(p.links || defaultLinks)];
-      updated.splice(index, 1);
-      p.links = updated;
-    });
-  };
-
-  const moveLink = (fromIdx: number, toIdx: number) => {
-    if (fromIdx === toIdx) return;
-    setProp((p: MenuProps) => {
-      const updated = [...(p.links || defaultLinks)];
-      const [moved] = updated.splice(fromIdx, 1);
-      updated.splice(toIdx, 0, moved);
-      p.links = updated;
-    });
-  };
-
-  /* ---- Shared styles ---- */
-  const labelStyle: CSSProperties = { fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 4 };
-  const inputStyle: CSSProperties = {
-    width: '100%', padding: '3px 6px', background: '#27272a', color: '#e4e4e7',
-    border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
-  };
-  const sectionStyle: CSSProperties = {
-    borderBottom: '1px solid #27272a', paddingBottom: 12,
-  };
-  const btnSmall: CSSProperties = {
-    padding: '2px 6px', fontSize: 11, background: '#27272a', color: '#a1a1aa',
-    border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer',
-  };
-  const btnActive: CSSProperties = {
-    ...btnSmall, background: '#3b82f6', color: '#fff', borderColor: '#3b82f6',
-  };
-
-  const textColorPresets = ['#1f2937', '#374151', '#3f3f46', '#6b7280', '#ffffff', '#e4e4e7', '#a1a1aa', '#3b82f6'];
-  const gapPresets = ['8px', '16px', '24px', '32px', '40px'];
-
-  return (
-    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
-
-      {/* ===== Style Section ===== */}
-      <div style={sectionStyle}>
-        <label style={{ ...labelStyle, fontWeight: 600, fontSize: 12, marginBottom: 8 }}>Menu Style</label>
-
-        {/* Link color */}
-        <div style={{ marginBottom: 8 }}>
-          <label style={labelStyle}>Link Color</label>
-          <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap', alignItems: 'center' }}>
-            {textColorPresets.map((c) => (
-              <button
-                key={c}
-                onClick={() => setProp((p: MenuProps) => { p.linkColor = c; })}
-                style={{
-                  width: 22, height: 22, borderRadius: 4, border: '1px solid #3f3f46',
-                  backgroundColor: c, cursor: 'pointer',
-                  outline: props.linkColor === c ? '2px solid #3b82f6' : 'none',
-                  outlineOffset: 1,
-                }}
-              />
-            ))}
-            <input
-              type="color"
-              value={props.linkColor || '#3f3f46'}
-              onChange={(e) => setProp((p: MenuProps) => { p.linkColor = e.target.value; })}
-              style={{ width: 22, height: 22, padding: 0, border: '1px solid #3f3f46', borderRadius: 3, cursor: 'pointer', background: 'none' }}
-              title="Custom color"
-            />
-          </div>
-        </div>
-
-        {/* Hover color */}
-        <div style={{ marginBottom: 8 }}>
-          <label style={labelStyle}>Hover Color</label>
-          <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-            <input
-              type="color"
-              value={props.linkHoverColor || '#3b82f6'}
-              onChange={(e) => setProp((p: MenuProps) => { p.linkHoverColor = e.target.value; })}
-              style={{ width: 28, height: 24, padding: 0, border: '1px solid #3f3f46', borderRadius: 3, cursor: 'pointer', background: 'none' }}
-            />
-            <span style={{ fontSize: 10, color: '#71717a' }}>{props.linkHoverColor || '#3b82f6'}</span>
-          </div>
-        </div>
-
-        {/* CTA button colors */}
-        <div style={{ marginBottom: 8 }}>
-          <label style={labelStyle}>CTA Button</label>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <div>
-              <span style={{ fontSize: 9, color: '#71717a' }}>BG</span>
-              <input
-                type="color"
-                value={props.ctaBgColor || '#3b82f6'}
-                onChange={(e) => setProp((p: MenuProps) => { p.ctaBgColor = e.target.value; })}
-                style={{ display: 'block', width: 28, height: 20, padding: 0, border: '1px solid #3f3f46', borderRadius: 3, cursor: 'pointer', background: 'none' }}
-              />
-            </div>
-            <div>
-              <span style={{ fontSize: 9, color: '#71717a' }}>Text</span>
-              <input
-                type="color"
-                value={props.ctaTextColor || '#ffffff'}
-                onChange={(e) => setProp((p: MenuProps) => { p.ctaTextColor = e.target.value; })}
-                style={{ display: 'block', width: 28, height: 20, padding: 0, border: '1px solid #3f3f46', borderRadius: 3, cursor: 'pointer', background: 'none' }}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Font size */}
-        <div style={{ marginBottom: 8 }}>
-          <label style={labelStyle}>Font Size</label>
-          <input
-            type="text"
-            value={props.fontSize || '14px'}
-            onChange={(e) => setProp((p: MenuProps) => { p.fontSize = e.target.value; })}
-            placeholder="14px"
-            style={inputStyle}
-          />
-        </div>
-
-        {/* Alignment */}
-        <div style={{ marginBottom: 8 }}>
-          <label style={labelStyle}>Alignment</label>
-          <div style={{ display: 'flex', gap: 4 }}>
-            {(['left', 'center', 'right'] as const).map((a) => (
-              <button
-                key={a}
-                onClick={() => setProp((p: MenuProps) => { p.alignment = a; })}
-                style={(props.alignment || 'right') === a ? btnActive : btnSmall}
-              >
-                {a.charAt(0).toUpperCase() + a.slice(1)}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Orientation */}
-        <div style={{ marginBottom: 8 }}>
-          <label style={labelStyle}>Orientation</label>
-          <div style={{ display: 'flex', gap: 4 }}>
-            {(['horizontal', 'vertical'] as const).map((o) => (
-              <button
-                key={o}
-                onClick={() => setProp((p: MenuProps) => { p.orientation = o; })}
-                style={(props.orientation || 'horizontal') === o ? btnActive : btnSmall}
-              >
-                {o.charAt(0).toUpperCase() + o.slice(1)}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Gap */}
-        <div>
-          <label style={labelStyle}>Gap</label>
-          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-            {gapPresets.map((g) => (
-              <button
-                key={g}
-                onClick={() => setProp((p: MenuProps) => { p.gap = g; })}
-                style={(props.gap || '24px') === g ? btnActive : btnSmall}
-              >
-                {g}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* ===== Links Section ===== */}
-      <div>
-        <label style={{ ...labelStyle, fontWeight: 600, fontSize: 12, marginBottom: 8 }}>Links</label>
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          {links.map((link, i) => (
-            <div
-              key={i}
-              draggable
-              onDragStart={() => setDragIdx(i)}
-              onDragOver={(e) => { e.preventDefault(); setDragOverIdx(i); }}
-              onDragEnd={() => {
-                if (dragIdx !== null && dragOverIdx !== null) {
-                  moveLink(dragIdx, dragOverIdx);
-                }
-                setDragIdx(null);
-                setDragOverIdx(null);
-              }}
-              style={{
-                background: dragOverIdx === i && dragIdx !== null && dragIdx !== i ? '#1e293b' : '#1e1e22',
-                borderRadius: 6,
-                padding: 8,
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 4,
-                border: dragOverIdx === i && dragIdx !== null && dragIdx !== i ? '1px solid #3b82f6' : '1px solid transparent',
-                transition: 'background 0.1s, border-color 0.1s',
-              }}
-            >
-              {/* Row 1: drag handle + text + delete */}
-              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-                <span
-                  style={{ cursor: 'grab', color: '#52525b', fontSize: 12, padding: '0 2px', userSelect: 'none', flexShrink: 0 }}
-                  title="Drag to reorder"
-                >
-                  <i className="fa fa-bars" />
-                </span>
-                <input
-                  type="text"
-                  value={link.text}
-                  onChange={(e) => updateLink(i, 'text', e.target.value)}
-                  placeholder="Text"
-                  style={{ ...inputStyle, flex: 1 }}
-                />
-                <button
-                  onClick={() => removeLink(i)}
-                  style={{ padding: '2px 6px', fontSize: 11, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer', flexShrink: 0 }}
-                  title="Delete link"
-                >
-                  <i className="fa fa-trash" />
-                </button>
-              </div>
-
-              {/* Row 2: URL */}
-              <input
-                type="text"
-                value={link.href}
-                onChange={(e) => updateLink(i, 'href', e.target.value)}
-                placeholder="URL (e.g. /about or https://...)"
-                style={inputStyle}
-              />
-
-              {/* Row 3: checkboxes */}
-              <div style={{ display: 'flex', gap: 8 }}>
-                <label style={{ fontSize: 10, color: '#a1a1aa', display: 'flex', alignItems: 'center', gap: 3, cursor: 'pointer' }}>
-                  <input type="checkbox" checked={!!link.isExternal} onChange={(e) => updateLink(i, 'isExternal', e.target.checked)} />
-                  External
-                </label>
-                <label style={{ fontSize: 10, color: '#a1a1aa', display: 'flex', alignItems: 'center', gap: 3, cursor: 'pointer' }}>
-                  <input type="checkbox" checked={!!link.isCta} onChange={(e) => updateLink(i, 'isCta', e.target.checked)} />
-                  CTA
-                </label>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Add link button */}
-        <button
-          onClick={() => addLink()}
-          style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
-        >
-          + Add Link
-        </button>
-
-        {/* Add page dropdown */}
-        <select
-          onChange={(e) => {
-            const page = pages.find(p => p.id === e.target.value);
-            if (page) {
-              addLink({
-                text: page.name,
-                href: page.slug === 'index' ? '/' : page.slug,
-                isExternal: false,
-                isCta: false,
-              });
-            }
-            e.target.value = '';
-          }}
-          value=""
-          style={{
-            marginTop: 4, width: '100%', padding: '6px', fontSize: 11,
-            background: '#1e293b', color: '#93c5fd',
-            border: '1px solid #334155', borderRadius: 4, cursor: 'pointer',
-          }}
-        >
-          <option value="">+ Add Page...</option>
-          {pages.map(p => (
-            <option key={p.id} value={p.id}>
-              {p.name} ({p.slug === 'index' ? '/' : p.slug})
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-};
-
 /* ---------- Craft config ---------- */
 
 Menu.craft = {
@@ -440,9 +120,6 @@ Menu.craft = {
     canMoveIn: () => false,
     canMoveOut: () => true,
   },
-  related: {
-    settings: MenuSettings,
-  },
 };
 
 /* ---------- HTML export ---------- */