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/components/sections/Countdown.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, useEffect, useState, useCallback } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
+import { AnchorIdField } from '../../ui/AnchorIdField';
 
 interface CountdownProps {
   targetDate?: string;
@@ -9,6 +10,7 @@ interface CountdownProps {
   digitColor?: string;
   labelColor?: string;
   bgColor?: string;
+  anchorId?: string;
 }
 
 interface TimeLeft {
@@ -44,6 +46,7 @@ export const Countdown: UserComponent<CountdownProps> = ({
   digitColor = '#ffffff',
   labelColor = 'rgba(255,255,255,0.7)',
   bgColor = '#18181b',
+  anchorId,
 }) => {
   const {
     connectors: { connect, drag },
@@ -98,6 +101,7 @@ export const Countdown: UserComponent<CountdownProps> = ({
   return (
     <section
       ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
+      id={anchorId || undefined}
       style={{
         padding: '60px 20px',
         textAlign: 'center',
@@ -141,6 +145,7 @@ const CountdownSettings: React.FC = () => {
 
   return (
     <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      <AnchorIdField />
       {/* Target date */}
       <div>
         <label style={labelStyle}>Target Date</label>
@@ -235,6 +240,7 @@ Countdown.craft = {
     digitColor: '#ffffff',
     labelColor: 'rgba(255,255,255,0.7)',
     bgColor: '#18181b',
+    anchorId: '',
   },
   rules: {
     canDrag: () => true,
@@ -265,6 +271,7 @@ Countdown.craft = {
     backgroundColor: bgColor,
     ...style,
   });
+  const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
 
   const headingHtml = heading
     ? `<h2 style="font-size:32px;font-weight:700;color:${digitColor};margin-bottom:32px;font-family:Inter,sans-serif">${esc(heading)}</h2>`
@@ -278,7 +285,7 @@ Countdown.craft = {
   const uid = 'cd_' + Math.random().toString(36).slice(2, 8);
 
   return {
-    html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
+    html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
   ${headingHtml}
   <div style="display:flex;justify-content:center;gap:24px;flex-wrap:wrap">
     <div style="${boxStyle}"><span id="${uid}_d" style="${dStyle}">00</span><span style="${lStyle}">Days</span></div>