site-builder: dynamic CTAs, section anchors, edit-with-Sitesmith

Three related features:

1. Dynamic CTA buttons on HeroSimple, CTASection, CallToAction.
   New shared ctas[] array (text + href + variant + target) replaces the
   primary/secondary pair. Settings panel gets add/remove/reorder controls.
   Legacy fields stay readable for backwards compat — first user edit
   migrates the section onto the new array.

2. Anchor IDs on all layout/section components (Container, Section,
   BackgroundSection, ColumnLayout, plus 6 section blocks done by parallel
   subagent, plus Hero/CTA/CallToAction). Anchor input lives in the
   settings panel with an "auto from heading" button that walks the
   subtree for the first Heading.text. Renders as id="..." on the
   outermost element so #anchor URLs resolve.

3. Edit-with-Sitesmith targeted invocation. Right-click → "Ask Sitesmith"
   and a button at the top of the right-side settings panel both open the
   modal pre-targeted at the selected node. The node's serialized subtree
   is sent to the server; system prompt is augmented to require a patch
   with replace_node. Editor lifts modal state into a new SitesmithContext.

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

craft/src/panels/topbar/TopBar.tsx

@@ -7,7 +7,7 @@ import { DeviceMode } from '../../types';
 import { TemplateModal } from './TemplateModal';
 import { HeadCodeModal } from './HeadCodeModal';
 import { SitesmithButton } from '../sitesmith/SitesmithButton';
-import { SitesmithModal } from '../sitesmith/SitesmithModal';
+import { useSitesmithModal } from '../../state/SitesmithContext';
 
 interface TopBarProps {
   device: DeviceMode;
@@ -28,7 +28,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
   const [isDraft, setIsDraft] = useState(false);
   const [templateModalOpen, setTemplateModalOpen] = useState(false);
   const [headCodeModalOpen, setHeadCodeModalOpen] = useState(false);
-  const [sitesmithOpen, setSitesmithOpen] = useState(false);
+  const { open: openSitesmith } = useSitesmithModal();
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const publishTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hasLoadedRef = useRef(false);
@@ -242,7 +242,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
           </span>
         )}
 
-        <SitesmithButton onClick={() => setSitesmithOpen(true)} />
+        <SitesmithButton onClick={() => openSitesmith()} />
 
         <button
           className="topbar-btn primary"
@@ -274,7 +274,6 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
       </div>
       <TemplateModal open={templateModalOpen} onClose={() => setTemplateModalOpen(false)} />
       <HeadCodeModal open={headCodeModalOpen} onClose={() => setHeadCodeModalOpen(false)} />
-      {sitesmithOpen && <SitesmithModal onClose={() => setSitesmithOpen(false)} />}
     </nav>
   );
 };