cloud-hosting-platform/site-builder
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Josh Knapp
2026-05-25 12:43:28 -07:00
parent 7b747f775f
commit d0925d9e2d
24 changed files with 723 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
craft/src/App.tsx
View File

@@ -6,18 +6,29 @@ import { WhpConfig } from './types';
import { EditorConfigProvider } from './state/EditorConfigContext';
import { SiteDesignProvider } from './state/SiteDesignContext';
import { PageProvider } from './state/PageContext';
import { SitesmithProvider, useSitesmithModal } from './state/SitesmithContext';
import { SitesmithModal } from './panels/sitesmith/SitesmithModal';
interface AppProps {
whpConfig: WhpConfig | null;
}
const SitesmithModalMount: React.FC = () => {
const { isOpen, target, close } = useSitesmithModal();
if (!isOpen) return null;
return <SitesmithModal target={target} onClose={close} />;
};
export const App: React.FC<AppProps> = ({ whpConfig }) => {
return (
<EditorConfigProvider config={whpConfig}>
<SiteDesignProvider>
<Editor resolver={componentResolver} enabled={true}>
<PageProvider>
<EditorShell />
<SitesmithProvider>
<EditorShell />
<SitesmithModalMount />
</SitesmithProvider>
</PageProvider>
</Editor>
</SiteDesignProvider>

10
craft/src/components/layout/BackgroundSection.tsx
View File

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
import { useNode, Element, UserComponent } from '@craftjs/core';
import { Container } from './Container';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface BackgroundSectionProps {
bgImage?: string;
@@ -11,6 +12,7 @@ interface BackgroundSectionProps {
innerMaxWidth?: string;
style?: CSSProperties;
children?: React.ReactNode;
anchorId?: string;
}
export const BackgroundSection: UserComponent<BackgroundSectionProps> = ({
@@ -20,12 +22,14 @@ export const BackgroundSection: UserComponent<BackgroundSectionProps> = ({
overlayOpacity = 0.4,
innerMaxWidth = '1200px',
style = {},
anchorId,
}) => {
const { connectors: { connect, drag } } = useNode();
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
position: 'relative',
width: '100%',
@@ -77,6 +81,7 @@ const BackgroundSectionSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background Image URL</label>
<input
@@ -162,6 +167,7 @@ BackgroundSection.craft = {
overlayOpacity: 0.4,
innerMaxWidth: '1200px',
style: { padding: '0' },
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -176,6 +182,7 @@ 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%',
@@ -200,7 +207,8 @@ BackgroundSection.craft = {
margin: '0 auto',
padding: '60px 20px',
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
return {
html: `<section${outerStyle ? ` style="${outerStyle}"` : ''}><div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></section>`,
html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}><div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></section>`,
};
};

10
craft/src/components/layout/ColumnLayout.tsx
View File

@@ -2,6 +2,7 @@ import React, { CSSProperties, useState } from 'react';
import { useNode, Element, UserComponent } from '@craftjs/core';
import { Container } from './Container';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
type SplitOption =
| '100'
@@ -18,6 +19,7 @@ interface ColumnLayoutProps {
gap?: string;
style?: CSSProperties;
children?: React.ReactNode;
anchorId?: string;
}
const splitToWidths: Record<string, string[]> = {
@@ -59,6 +61,7 @@ export const ColumnLayout: UserComponent<ColumnLayoutProps> = ({
split = '50-50',
gap = '16px',
style = {},
anchorId,
}) => {
const { connectors: { connect, drag } } = useNode();
const widths = getWidths(split, columns);
@@ -66,6 +69,7 @@ export const ColumnLayout: UserComponent<ColumnLayoutProps> = ({
return (
<div
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
display: 'flex',
flexWrap: 'wrap',
@@ -124,6 +128,7 @@ const ColumnLayoutSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
{/* Preset layouts */}
<div>
<label style={labelStyle}>Column Layout</label>
@@ -270,6 +275,7 @@ ColumnLayout.craft = {
split: '50-50',
gap: '16px',
style: {},
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -284,6 +290,7 @@ 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',
@@ -292,7 +299,8 @@ ColumnLayout.craft = {
width: '100%',
...props.style,
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
return {
html: `<div${outerStyle ? ` style="${outerStyle}"` : ''}>${childrenHtml}</div>`,
html: `<div${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${childrenHtml}</div>`,
};
};

12
craft/src/components/layout/Container.tsx
View File

@@ -4,6 +4,7 @@ import { cssPropsToString } from '../../utils/style-helpers';
import { SettingsTabs } from '../../ui/SettingsTabs';
import { BorderControl } from '../../ui/BorderControl';
import { AdvancedTab } from '../../ui/AdvancedTab';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface ContainerProps {
style?: CSSProperties;
@@ -11,6 +12,7 @@ interface ContainerProps {
children?: React.ReactNode;
cssId?: string;
cssClass?: string;
anchorId?: string;
hideOnDesktop?: boolean;
hideOnTablet?: boolean;
hideOnMobile?: boolean;
@@ -37,6 +39,7 @@ export const Container: UserComponent<ContainerProps> = ({
children,
fullWidth = false,
contentWidth = 'full',
anchorId,
}) => {
const { connectors: { connect, drag } } = useNode();
@@ -56,6 +59,7 @@ export const Container: UserComponent<ContainerProps> = ({
ref: (ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); },
style: outerStyle,
'data-craft-container': 'true',
id: anchorId || undefined,
},
needsBoxedWrapper
? React.createElement('div', { style: { maxWidth: '1200px', margin: '0 auto', ...flexStyles } }, children)
@@ -120,6 +124,7 @@ const ContainerSettings: React.FC = () => {
<SettingsTabs
general={
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<AnchorIdField />
{/* Tag */}
<div>
<label style={cLabelStyle}>HTML Element</label>
@@ -304,6 +309,7 @@ Container.craft = {
tag: 'div',
fullWidth: false,
contentWidth: 'full',
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -318,6 +324,7 @@ 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);
@@ -333,11 +340,12 @@ Container.craft = {
}
const styleStr = cssPropsToString(outerCss);
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
if (isBoxed) {
const innerStyle = cssPropsToString({ maxWidth: '1200px', margin: '0 auto', ...flexStyles });
return { html: `<${tag}${styleStr ? ` style="${styleStr}"` : ''}><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></${tag}>` };
return { html: `<${tag}${idAttr}${styleStr ? ` style="${styleStr}"` : ''}><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></${tag}>` };
}
return { html: `<${tag}${styleStr ? ` style="${styleStr}"` : ''}>${childrenHtml}</${tag}>` };
return { html: `<${tag}${idAttr}${styleStr ? ` style="${styleStr}"` : ''}>${childrenHtml}</${tag}>` };
};

10
craft/src/components/layout/Section.tsx
View File

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
import { useNode, Element, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { Container } from './Container';
import { AnchorIdField } from '../../ui/AnchorIdField';
/* ---------- Shape Divider SVG Paths ---------- */
@@ -27,6 +28,7 @@ interface SectionProps {
bottomDivider?: DividerShape;
bottomDividerColor?: string;
bottomDividerHeight?: string;
anchorId?: string;
}
/* ---------- Divider renderer ---------- */
@@ -85,6 +87,7 @@ export const Section: UserComponent<SectionProps> = ({
bottomDivider = 'none',
bottomDividerColor = '#ffffff',
bottomDividerHeight = '50px',
anchorId,
}) => {
const { connectors: { connect, drag } } = useNode();
@@ -94,6 +97,7 @@ export const Section: UserComponent<SectionProps> = ({
return (
<section
ref={(ref: HTMLElement | null) => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
width: '100%',
position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
@@ -229,6 +233,7 @@ const SectionSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background Color</label>
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
@@ -333,6 +338,7 @@ Section.craft = {
bottomDivider: 'none',
bottomDividerColor: '#ffffff',
bottomDividerHeight: '50px',
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -377,6 +383,7 @@ 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';
@@ -394,8 +401,9 @@ 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)}"` : '';
return {
html: `<section${outerStyle ? ` style="${outerStyle}"` : ''}>${topHtml}<div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div>${bottomHtml}</section>`,
html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}>${topHtml}<div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div>${bottomHtml}</section>`,
};
};

11
craft/src/components/sections/Accordion.tsx
View File

@@ -1,6 +1,7 @@
import React, { CSSProperties, useState } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface AccordionItem {
title: string;
@@ -15,6 +16,7 @@ interface AccordionProps {
headerColor?: string;
contentBg?: string;
borderColor?: string;
anchorId?: string;
}
const defaultItems: AccordionItem[] = [
@@ -30,6 +32,7 @@ export const Accordion: UserComponent<AccordionProps> = ({
headerColor = '#18181b',
contentBg = '#ffffff',
borderColor = '#e2e8f0',
anchorId,
}) => {
const {
connectors: { connect, drag },
@@ -56,6 +59,7 @@ export const Accordion: UserComponent<AccordionProps> = ({
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
padding: '60px 20px',
backgroundColor: '#ffffff',
@@ -161,6 +165,7 @@ const AccordionSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={labelStyle}>Header Background</label>
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
@@ -279,6 +284,7 @@ Accordion.craft = {
headerColor: '#18181b',
contentBg: '#ffffff',
borderColor: '#e2e8f0',
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -293,11 +299,12 @@ Accordion.craft = {
/* ---------- HTML export ---------- */
(Accordion as any).toHtml = (props: AccordionProps, _childrenHtml: string) => {
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
const sectionStyle = cssPropsToString({
padding: '60px 20px',
...props.style,
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
const headerBg = props.headerBg || '#f8fafc';
const headerColor = props.headerColor || '#18181b';
const contentBg = props.contentBg || '#ffffff';
@@ -320,7 +327,7 @@ Accordion.craft = {
}).join('\n ');
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:800px;margin:0 auto;display:flex;flex-direction:column">
${panels}
</div>

83
craft/src/components/sections/CTASection.tsx
View File

@@ -1,13 +1,18 @@
import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { CtaButton, CtasEditor, normalizeCtas, ctaInlineStyle, ctasToHtml } from './_cta-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface CTASectionProps {
heading?: string;
description?: string;
ctas?: CtaButton[];
/** Legacy props kept for backward compat with saved projects. */
buttonText?: string;
buttonHref?: string;
gradient?: string;
anchorId?: string;
style?: CSSProperties;
}
@@ -16,9 +21,11 @@ const defaultGradient = 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)';
export const CTASection: UserComponent<CTASectionProps> = ({
heading = 'Ready to Get Started?',
description = 'Join thousands of satisfied users and start building your dream website today.',
buttonText = 'Start Free Trial',
buttonHref = '#',
ctas,
buttonText,
buttonHref,
gradient = defaultGradient,
anchorId,
style = {},
}) => {
const {
@@ -28,9 +35,13 @@ export const CTASection: UserComponent<CTASectionProps> = ({
selected: node.events.selected,
}));
const effectiveCtas = normalizeCtas({ ctas, buttonText, buttonHref });
const ctaDefaults = { primaryBg: '#ffffff', primaryText: '#18181b', outlineText: '#ffffff' };
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
background: gradient,
padding: '80px 20px',
@@ -46,22 +57,14 @@ export const CTASection: UserComponent<CTASectionProps> = ({
<p style={{ fontSize: '18px', color: 'rgba(255,255,255,0.85)', marginBottom: '28px', lineHeight: '1.6' }}>
{description}
</p>
<a
href={buttonHref}
onClick={(e) => e.preventDefault()}
style={{
display: 'inline-block',
padding: '14px 36px',
backgroundColor: '#ffffff',
color: '#18181b',
textDecoration: 'none',
borderRadius: '8px',
fontWeight: '600',
fontSize: '16px',
}}
>
{buttonText}
</a>
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
{effectiveCtas.map((cta, i) => (
<a key={i} href={cta.href || '#'} onClick={(e) => e.preventDefault()}
style={ctaInlineStyle(cta, ctaDefaults)}>
{cta.text}
</a>
))}
</div>
</div>
</section>
);
@@ -83,8 +86,11 @@ const CTASectionSettings: React.FC = () => {
{ label: 'Ocean', value: 'linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)' },
];
const effectiveCtas = normalizeCtas(props);
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Heading</label>
<input
@@ -105,26 +111,14 @@ const CTASectionSettings: React.FC = () => {
/>
</div>
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Button Text</label>
<input
type="text"
value={props.buttonText || ''}
onChange={(e) => setProp((p: CTASectionProps) => { p.buttonText = e.target.value; })}
style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
/>
</div>
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Button URL</label>
<input
type="text"
value={props.buttonHref || ''}
onChange={(e) => setProp((p: CTASectionProps) => { p.buttonHref = e.target.value; })}
placeholder="https://..."
style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
/>
</div>
<CtasEditor
ctas={effectiveCtas}
onChange={(next) => setProp((p: CTASectionProps) => {
p.ctas = next;
p.buttonText = undefined;
p.buttonHref = undefined;
})}
/>
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Gradient</label>
@@ -155,9 +149,11 @@ CTASection.craft = {
props: {
heading: 'Ready to Get Started?',
description: 'Join thousands of satisfied users and start building your dream website today.',
buttonText: 'Start Free Trial',
buttonHref: '#',
ctas: [
{ text: 'Start Free Trial', href: '#', variant: 'primary' },
] as CtaButton[],
gradient: defaultGradient,
anchorId: '',
style: {},
},
rules: {
@@ -180,12 +176,15 @@ CTASection.craft = {
textAlign: 'center',
...props.style,
});
const ctas = normalizeCtas(props);
const buttonsHtml = ctasToHtml(ctas, { primaryBg: '#ffffff', primaryText: '#18181b', outlineText: '#ffffff' });
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:700px;margin:0 auto">
<h2 style="font-size:36px;font-weight:700;color:#ffffff;margin-bottom:12px">${esc(props.heading || '')}</h2>
<p style="font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:28px;line-height:1.6">${esc(props.description || '')}</p>
<a href="${props.buttonHref || '#'}" style="display:inline-block;padding:14px 36px;background-color:#ffffff;color:#18181b;text-decoration:none;border-radius:8px;font-weight:600;font-size:16px">${esc(props.buttonText || '')}</a>
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">${buttonsHtml}</div>
</div>
</section>`,
};

161
craft/src/components/sections/CallToAction.tsx
View File

@@ -1,10 +1,14 @@
import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { CtaButton, CtasEditor, normalizeCtas, ctaInlineStyle, ctasToHtml } from './_cta-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface CallToActionProps {
heading?: string;
description?: string;
ctas?: CtaButton[];
/** Legacy props kept for backward compat with saved projects. */
buttonText?: string;
buttonHref?: string;
secondaryButtonText?: string;
@@ -15,6 +19,7 @@ interface CallToActionProps {
overlayOpacity?: number;
textColor?: string;
buttonColor?: string;
anchorId?: string;
style?: CSSProperties;
}
@@ -23,16 +28,18 @@ const defaultGradient = 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)';
export const CallToAction: UserComponent<CallToActionProps> = ({
heading = 'Ready to Get Started?',
description = 'Join thousands of satisfied users and start building your dream website today.',
buttonText = 'Get Started',
buttonHref = '#',
secondaryButtonText = '',
secondaryButtonHref = '#',
ctas,
buttonText,
buttonHref,
secondaryButtonText,
secondaryButtonHref,
bgType = 'gradient',
bgValue = defaultGradient,
overlayColor = '#000000',
overlayOpacity = 0,
textColor = '#ffffff',
buttonColor = '#ffffff',
anchorId,
style = {},
}) => {
const {
@@ -56,9 +63,13 @@ export const CallToAction: UserComponent<CallToActionProps> = ({
const isButtonDark = buttonColor === '#ffffff' || buttonColor === '#f8fafc';
const buttonTextColor = isButtonDark ? '#18181b' : '#ffffff';
const effectiveCtas = normalizeCtas({ ctas, buttonText, buttonHref, secondaryButtonText, secondaryButtonHref });
const ctaDefaults = { primaryBg: buttonColor, primaryText: buttonTextColor, outlineText: textColor };
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
position: 'relative',
padding: '80px 20px',
@@ -89,41 +100,12 @@ export const CallToAction: UserComponent<CallToActionProps> = ({
{description}
</p>
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
<a
href={buttonHref}
onClick={(e) => e.preventDefault()}
style={{
display: 'inline-block',
padding: '14px 36px',
backgroundColor: buttonColor,
color: buttonTextColor,
textDecoration: 'none',
borderRadius: '8px',
fontWeight: '600',
fontSize: '16px',
}}
>
{buttonText}
</a>
{secondaryButtonText && (
<a
href={secondaryButtonHref}
onClick={(e) => e.preventDefault()}
style={{
display: 'inline-block',
padding: '14px 36px',
backgroundColor: 'transparent',
color: textColor,
textDecoration: 'none',
borderRadius: '8px',
fontWeight: '600',
fontSize: '16px',
border: `2px solid ${textColor}`,
}}
>
{secondaryButtonText}
{effectiveCtas.map((cta, i) => (
<a key={i} href={cta.href || '#'} onClick={(e) => e.preventDefault()}
style={ctaInlineStyle(cta, ctaDefaults)}>
{cta.text}
</a>
)}
))}
</div>
</div>
</section>
@@ -155,8 +137,11 @@ const CallToActionSettings: React.FC = () => {
border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12,
};
const effectiveCtas = normalizeCtas(props);
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Heading</label>
<input
@@ -177,52 +162,16 @@ const CallToActionSettings: React.FC = () => {
/>
</div>
{/* Primary Button */}
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Primary Button Text</label>
<input
type="text"
value={props.buttonText || ''}
onChange={(e) => setProp((p: CallToActionProps) => { p.buttonText = e.target.value; })}
style={inputStyle}
/>
</div>
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Primary Button URL</label>
<input
type="text"
value={props.buttonHref || ''}
onChange={(e) => setProp((p: CallToActionProps) => { p.buttonHref = e.target.value; })}
placeholder="https://..."
style={inputStyle}
/>
</div>
{/* Secondary Button */}
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Secondary Button Text <span style={{ opacity: 0.5 }}>(leave empty to hide)</span></label>
<input
type="text"
value={props.secondaryButtonText || ''}
onChange={(e) => setProp((p: CallToActionProps) => { p.secondaryButtonText = e.target.value; })}
placeholder="e.g. Learn More"
style={inputStyle}
/>
</div>
{props.secondaryButtonText && (
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Secondary Button URL</label>
<input
type="text"
value={props.secondaryButtonHref || ''}
onChange={(e) => setProp((p: CallToActionProps) => { p.secondaryButtonHref = e.target.value; })}
placeholder="https://..."
style={inputStyle}
/>
</div>
)}
<CtasEditor
ctas={effectiveCtas}
onChange={(next) => setProp((p: CallToActionProps) => {
p.ctas = next;
p.buttonText = undefined;
p.buttonHref = undefined;
p.secondaryButtonText = undefined;
p.secondaryButtonHref = undefined;
})}
/>
{/* Background Type */}
<div>
@@ -380,10 +329,11 @@ CallToAction.craft = {
props: {
heading: 'Ready to Get Started?',
description: 'Join thousands of satisfied users and start building your dream website today.',
buttonText: 'Get Started',
buttonHref: '#',
secondaryButtonText: 'Learn More',
secondaryButtonHref: '#',
ctas: [
{ text: 'Get Started', href: '#', variant: 'primary' },
{ text: 'Learn More', href: '#', variant: 'outline' },
] as CtaButton[],
anchorId: '',
bgType: 'gradient',
bgValue: defaultGradient,
overlayColor: '#000000',
@@ -445,41 +395,16 @@ CallToAction.craft = {
overlayHtml = `<div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div>`;
}
let secondaryBtnHtml = '';
if (props.secondaryButtonText) {
const secStyle = cssPropsToString({
display: 'inline-block',
padding: '14px 36px',
backgroundColor: 'transparent',
color: textColor,
textDecoration: 'none',
borderRadius: '8px',
fontWeight: '600',
fontSize: '16px',
border: `2px solid ${textColor}`,
});
secondaryBtnHtml = `\n <a href="${props.secondaryButtonHref || '#'}"${secStyle ? ` style="${secStyle}"` : ''}>${esc(props.secondaryButtonText)}</a>`;
}
const btnStyle = cssPropsToString({
display: 'inline-block',
padding: '14px 36px',
backgroundColor: buttonColor,
color: buttonTextColor,
textDecoration: 'none',
borderRadius: '8px',
fontWeight: '600',
fontSize: '16px',
});
const ctas = normalizeCtas(props);
const buttonsHtml = ctasToHtml(ctas, { primaryBg: buttonColor, primaryText: buttonTextColor, outlineText: textColor });
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
${overlayHtml}<div style="max-width:700px;margin:0 auto;position:relative;z-index:1">
<h2 style="font-size:36px;font-weight:700;color:${textColor};margin-bottom:12px">${esc(props.heading || '')}</h2>
<p style="font-size:18px;color:${textColor};opacity:0.85;margin-bottom:28px;line-height:1.6">${esc(props.description || '')}</p>
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
<a href="${props.buttonHref || '#'}"${btnStyle ? ` style="${btnStyle}"` : ''}>${esc(props.buttonText || '')}</a>${secondaryBtnHtml}
</div>
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">${buttonsHtml}</div>
</div>
</section>`,
};

9
craft/src/components/sections/Countdown.tsx
View File

@@ -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>

11
craft/src/components/sections/FeaturesGrid.tsx
View File

@@ -1,6 +1,7 @@
import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface FeatureItem {
title: string;
@@ -11,6 +12,7 @@ interface FeatureItem {
interface FeaturesGridProps {
features?: FeatureItem[];
style?: CSSProperties;
anchorId?: string;
}
const defaultFeatures: FeatureItem[] = [
@@ -22,6 +24,7 @@ const defaultFeatures: FeatureItem[] = [
export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
features = defaultFeatures,
style = {},
anchorId,
}) => {
const {
connectors: { connect, drag },
@@ -33,6 +36,7 @@ export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
padding: '80px 20px',
backgroundColor: '#ffffff',
@@ -102,6 +106,7 @@ const FeaturesGridSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background</label>
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
@@ -163,6 +168,7 @@ FeaturesGrid.craft = {
props: {
features: defaultFeatures,
style: { backgroundColor: '#ffffff' },
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -177,11 +183,12 @@ FeaturesGrid.craft = {
/* ---------- HTML export ---------- */
(FeaturesGrid as any).toHtml = (props: FeaturesGridProps, _childrenHtml: string) => {
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
const sectionStyle = cssPropsToString({
padding: '80px 20px',
...props.style,
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
const cards = (props.features || defaultFeatures).map((feat) => {
return `<div style="text-align:center;padding:32px 24px;border-radius:12px;background-color:#f8fafc;border:1px solid #e2e8f0">
<div style="font-size:36px;margin-bottom:16px">${esc(feat.icon)}</div>
@@ -191,7 +198,7 @@ FeaturesGrid.craft = {
}).join('\n ');
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px">
${cards}
</div>

100
craft/src/components/sections/HeroSimple.tsx
View File

@@ -1,10 +1,15 @@
import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { CtaButton, CtasEditor, normalizeCtas, ctaInlineStyle, ctasToHtml } from './_cta-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface HeroProps {
heading?: string;
subtitle?: string;
/** New dynamic CTAs. When set (length > 0), legacy primary/secondary fields are ignored. */
ctas?: CtaButton[];
/** Legacy — kept for backwards compatibility with saved projects. */
buttonText?: string;
buttonHref?: string;
secondaryButtonText?: string;
@@ -24,6 +29,7 @@ interface HeroProps {
minHeight?: string;
verticalAlign?: 'top' | 'center' | 'bottom';
textAlign?: 'left' | 'center' | 'right';
anchorId?: string;
style?: CSSProperties;
}
@@ -43,10 +49,11 @@ function buildBackground(props: HeroProps): string {
export const HeroSimple: UserComponent<HeroProps> = ({
heading = 'Build Something Amazing',
subtitle = 'Create beautiful websites without writing a single line of code.',
buttonText = 'Get Started',
buttonHref = '#',
secondaryButtonText = '',
secondaryButtonHref = '#',
ctas,
buttonText,
buttonHref,
secondaryButtonText,
secondaryButtonHref,
bgType = 'color',
bgColor = '#1e293b',
bgGradientFrom = '#667eea',
@@ -62,6 +69,7 @@ export const HeroSimple: UserComponent<HeroProps> = ({
minHeight = '500px',
verticalAlign = 'center',
textAlign = 'center',
anchorId,
style = {},
}) => {
const { connectors: { connect, drag } } = useNode();
@@ -72,9 +80,17 @@ export const HeroSimple: UserComponent<HeroProps> = ({
const justifyMap = { top: 'flex-start', center: 'center', bottom: 'flex-end' };
const effectiveCtas = normalizeCtas({ ctas, buttonText, buttonHref, secondaryButtonText, secondaryButtonHref });
const ctaDefaults = {
primaryBg: buttonBgColor,
primaryText: buttonTextColor,
outlineText: textColor,
};
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
...style,
background: bgType !== 'image' ? bg : undefined,
@@ -134,25 +150,12 @@ export const HeroSimple: UserComponent<HeroProps> = ({
{subtitle}
</p>
<div style={{ display: 'flex', gap: '12px', justifyContent: textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start', flexWrap: 'wrap' }}>
{buttonText && (
<a href={buttonHref} onClick={(e) => e.preventDefault()} style={{
display: 'inline-block', padding: '14px 36px', backgroundColor: buttonBgColor,
color: buttonTextColor, textDecoration: 'none', borderRadius: '8px',
fontWeight: '600', fontSize: '16px',
}}>
{buttonText}
{effectiveCtas.map((cta, i) => (
<a key={i} href={cta.href || '#'} onClick={(e) => e.preventDefault()}
style={ctaInlineStyle(cta, ctaDefaults)}>
{cta.text}
</a>
)}
{secondaryButtonText && (
<a href={secondaryButtonHref} onClick={(e) => e.preventDefault()} style={{
display: 'inline-block', padding: '14px 36px',
backgroundColor: 'transparent', color: textColor,
textDecoration: 'none', borderRadius: '8px', fontWeight: '600',
fontSize: '16px', border: `2px solid ${textColor}`,
}}>
{secondaryButtonText}
</a>
)}
))}
</div>
</div>
</section>
@@ -181,8 +184,11 @@ const HeroSettings: React.FC = () => {
props: node.data.props as HeroProps,
}));
const effectiveCtas = normalizeCtas(props);
return (
<div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
<AnchorIdField />
{/* Content */}
<div>
<label style={labelStyle}>Heading</label>
@@ -192,18 +198,20 @@ const HeroSettings: React.FC = () => {
<label style={labelStyle}>Subtitle</label>
<textarea value={props.subtitle || ''} onChange={(e) => setProp((p: HeroProps) => { p.subtitle = e.target.value; })} rows={3} style={{ ...inputStyle, resize: 'vertical' as const }} />
</div>
<div>
<label style={labelStyle}>Button Text</label>
<input type="text" value={props.buttonText || ''} onChange={(e) => setProp((p: HeroProps) => { p.buttonText = e.target.value; })} style={inputStyle} />
</div>
<div>
<label style={labelStyle}>Button URL</label>
<input type="text" value={props.buttonHref || ''} onChange={(e) => setProp((p: HeroProps) => { p.buttonHref = e.target.value; })} placeholder="#" style={inputStyle} />
</div>
<div>
<label style={labelStyle}>Secondary Button Text</label>
<input type="text" value={props.secondaryButtonText || ''} onChange={(e) => setProp((p: HeroProps) => { p.secondaryButtonText = e.target.value; })} placeholder="Leave blank to hide" style={inputStyle} />
</div>
{/* Dynamic CTAs */}
<CtasEditor
ctas={effectiveCtas}
onChange={(next) => setProp((p: HeroProps) => {
p.ctas = next;
// Once the user touches CTAs, the legacy fields are no longer
// authoritative — clear them so the array is the only source.
p.buttonText = undefined;
p.buttonHref = undefined;
p.secondaryButtonText = undefined;
p.secondaryButtonHref = undefined;
})}
/>
{/* Background Type */}
<div>
@@ -370,10 +378,9 @@ HeroSimple.craft = {
props: {
heading: 'Build Something Amazing',
subtitle: 'Create beautiful websites without writing a single line of code.',
buttonText: 'Get Started',
buttonHref: '#',
secondaryButtonText: '',
secondaryButtonHref: '#',
ctas: [
{ text: 'Get Started', href: '#', variant: 'primary' },
] as CtaButton[],
bgType: 'color',
bgColor: '#1e293b',
bgGradientFrom: '#667eea',
@@ -389,6 +396,7 @@ HeroSimple.craft = {
minHeight: '500px',
verticalAlign: 'center',
textAlign: 'center',
anchorId: '',
style: {},
},
rules: {
@@ -436,16 +444,16 @@ HeroSimple.craft = {
const textAlign = props.textAlign || 'center';
const justifyBtn = textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start';
let buttonsHtml = '';
if (props.buttonText) {
buttonsHtml += `<a href="${props.buttonHref || '#'}" style="display:inline-block;padding:14px 36px;background-color:${props.buttonBgColor || '#3b82f6'};color:${props.buttonTextColor || '#fff'};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px">${esc(props.buttonText)}</a>`;
}
if (props.secondaryButtonText) {
buttonsHtml += `<a href="${props.secondaryButtonHref || '#'}" style="display:inline-block;padding:14px 36px;background:transparent;color:${props.textColor || '#fff'};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px;border:2px solid ${props.textColor || '#fff'}">${esc(props.secondaryButtonText)}</a>`;
}
const ctas = normalizeCtas(props);
const buttonsHtml = ctasToHtml(ctas, {
primaryBg: props.buttonBgColor || '#3b82f6',
primaryText: props.buttonTextColor || '#fff',
outlineText: props.textColor || '#fff',
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
return {
html: `<section style="${sectionStyle}">
html: `<section${idAttr} style="${sectionStyle}">
${videoHtml}${overlayHtml}
<div style="max-width:800px;width:100%;position:relative;z-index:2;text-align:${textAlign}">
<h1 style="font-size:48px;font-weight:700;color:${props.textColor || '#fff'};margin-bottom:16px;line-height:1.2">${esc(props.heading || '')}</h1>

11
craft/src/components/sections/PricingTable.tsx
View File

@@ -1,6 +1,7 @@
import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface PricingPlan {
name: string;
@@ -17,6 +18,7 @@ interface PricingTableProps {
style?: CSSProperties;
featuredBg?: string;
bulletType?: string;
anchorId?: string;
}
const bulletChars: Record<string, string> = {
@@ -58,6 +60,7 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
style = {},
featuredBg = '#3b82f6',
bulletType = 'check',
anchorId,
}) => {
const {
connectors: { connect, drag },
@@ -69,6 +72,7 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
padding: '80px 20px',
backgroundColor: '#ffffff',
@@ -271,6 +275,7 @@ const PricingTableSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={labelStyle}>Background</label>
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
@@ -384,6 +389,7 @@ PricingTable.craft = {
style: { backgroundColor: '#ffffff' },
featuredBg: '#3b82f6',
bulletType: 'check',
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -398,12 +404,13 @@ PricingTable.craft = {
/* ---------- HTML export ---------- */
(PricingTable as any).toHtml = (props: PricingTableProps, _childrenHtml: string) => {
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
const bulletType = props.bulletType || 'check';
const sectionStyle = cssPropsToString({
padding: '80px 20px',
...props.style,
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
const plans = props.plans || defaultPlans;
const featuredBg = props.featuredBg || '#3b82f6';
@@ -442,7 +449,7 @@ PricingTable.craft = {
}).join('\n ');
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:1100px;margin:0 auto;display:flex;gap:24px;justify-content:center;align-items:stretch;flex-wrap:wrap">
${cards}
</div>

11
craft/src/components/sections/Tabs.tsx
View File

@@ -1,6 +1,7 @@
import React, { CSSProperties, useState } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface TabItem {
label: string;
@@ -15,6 +16,7 @@ interface TabsProps {
inactiveTabBg?: string;
inactiveTabColor?: string;
contentBg?: string;
anchorId?: string;
}
const defaultTabs: TabItem[] = [
@@ -31,6 +33,7 @@ export const Tabs: UserComponent<TabsProps> = ({
inactiveTabBg = '#f1f5f9',
inactiveTabColor = '#64748b',
contentBg = '#ffffff',
anchorId,
}) => {
const {
connectors: { connect, drag },
@@ -44,6 +47,7 @@ export const Tabs: UserComponent<TabsProps> = ({
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
padding: '60px 20px',
backgroundColor: '#ffffff',
@@ -139,6 +143,7 @@ const TabsSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
<div>
<label style={labelStyle}>Active Tab Background</label>
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
@@ -276,6 +281,7 @@ Tabs.craft = {
inactiveTabBg: '#f1f5f9',
inactiveTabColor: '#64748b',
contentBg: '#ffffff',
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -290,11 +296,12 @@ Tabs.craft = {
/* ---------- HTML export ---------- */
(Tabs as any).toHtml = (props: TabsProps, _childrenHtml: string) => {
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;');
const esc = (s: any) => String(s ?? "").replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
const sectionStyle = cssPropsToString({
padding: '60px 20px',
...props.style,
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
const tabs = props.tabs || defaultTabs;
const activeTabBg = props.activeTabBg || '#3b82f6';
const activeTabColor = props.activeTabColor || '#ffffff';
@@ -326,7 +333,7 @@ function ${tabId}_switch(idx){
</script>`;
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:800px;margin:0 auto">
<div style="display:flex;gap:2px;border-bottom:2px solid #e2e8f0">
${tabButtons}

11
craft/src/components/sections/Testimonials.tsx
View File

@@ -1,6 +1,7 @@
import React, { CSSProperties, useState } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { AnchorIdField } from '../../ui/AnchorIdField';
interface Testimonial {
quote: string;
@@ -16,6 +17,7 @@ interface TestimonialsProps {
style?: CSSProperties;
cardBg?: string;
starColor?: string;
anchorId?: string;
}
const defaultTestimonials: Testimonial[] = [
@@ -52,6 +54,7 @@ export const Testimonials: UserComponent<TestimonialsProps> = ({
style = {},
cardBg = '#f8fafc',
starColor = '#f59e0b',
anchorId,
}) => {
const {
connectors: { connect, drag },
@@ -86,6 +89,7 @@ export const Testimonials: UserComponent<TestimonialsProps> = ({
return (
<section
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
id={anchorId || undefined}
style={{
padding: '80px 20px',
backgroundColor: '#ffffff',
@@ -187,6 +191,7 @@ const TestimonialsSettings: React.FC = () => {
return (
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
<AnchorIdField />
{/* Layout */}
<div>
<label style={labelStyle}>Layout</label>
@@ -357,6 +362,7 @@ Testimonials.craft = {
style: { backgroundColor: '#ffffff' },
cardBg: '#f8fafc',
starColor: '#f59e0b',
anchorId: '',
},
rules: {
canDrag: () => true,
@@ -388,6 +394,7 @@ Testimonials.craft = {
backgroundColor: '#ffffff',
...style,
});
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
const cardCss = `background-color:${cardBg};border-radius:12px;padding:32px 24px;text-align:center;border:1px solid #e2e8f0`;
@@ -403,7 +410,7 @@ Testimonials.craft = {
if (layout === 'single') {
// For single layout, export as grid with 1 column (simpler static export)
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:600px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px">
${cards}
</div>
@@ -412,7 +419,7 @@ Testimonials.craft = {
}
return {
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(${columns},1fr);gap:24px">
${cards}
</div>

201
craft/src/components/sections/_cta-helpers.tsx Normal file
View File

@@ -0,0 +1,201 @@
import React, { CSSProperties } from 'react';
export type CtaVariant = 'primary' | 'outline' | 'ghost';
export interface CtaButton {
text: string;
href: string;
variant?: CtaVariant;
target?: '_blank';
}
export interface CtaStyleDefaults {
primaryBg: string;
primaryText: string;
outlineText: string;
}
/**
* Read the effective list of CTAs for a section, falling back to legacy
* primary/secondary props when ctas[] is absent. New sections write ctas[]
* directly; old sections keep rendering until the user touches the settings.
*/
export function normalizeCtas(props: {
ctas?: CtaButton[];
buttonText?: string;
buttonHref?: string;
secondaryButtonText?: string;
secondaryButtonHref?: string;
}): CtaButton[] {
if (Array.isArray(props.ctas) && props.ctas.length > 0) {
return props.ctas.filter((c) => c && (c.text || c.href));
}
const legacy: CtaButton[] = [];
if (props.buttonText) legacy.push({ text: props.buttonText, href: props.buttonHref || '#', variant: 'primary' });
if (props.secondaryButtonText) legacy.push({ text: props.secondaryButtonText, href: props.secondaryButtonHref || '#', variant: 'outline' });
return legacy;
}
export function ctaInlineStyle(cta: CtaButton, defaults: CtaStyleDefaults): CSSProperties {
const variant = cta.variant || 'primary';
switch (variant) {
case 'outline':
return {
display: 'inline-block', padding: '14px 36px',
backgroundColor: 'transparent', color: defaults.outlineText,
textDecoration: 'none', borderRadius: '8px',
fontWeight: 600, fontSize: '16px',
border: `2px solid ${defaults.outlineText}`,
};
case 'ghost':
return {
display: 'inline-block', padding: '14px 24px',
backgroundColor: 'transparent', color: defaults.outlineText,
textDecoration: 'underline', borderRadius: '8px',
fontWeight: 600, fontSize: '16px',
};
case 'primary':
default:
return {
display: 'inline-block', padding: '14px 36px',
backgroundColor: defaults.primaryBg, color: defaults.primaryText,
textDecoration: 'none', borderRadius: '8px',
fontWeight: 600, fontSize: '16px',
};
}
}
export function ctaCssString(cta: CtaButton, defaults: CtaStyleDefaults): string {
const variant = cta.variant || 'primary';
switch (variant) {
case 'outline':
return `display:inline-block;padding:14px 36px;background-color:transparent;color:${defaults.outlineText};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px;border:2px solid ${defaults.outlineText}`;
case 'ghost':
return `display:inline-block;padding:14px 24px;background-color:transparent;color:${defaults.outlineText};text-decoration:underline;border-radius:8px;font-weight:600;font-size:16px`;
case 'primary':
default:
return `display:inline-block;padding:14px 36px;background-color:${defaults.primaryBg};color:${defaults.primaryText};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px`;
}
}
const esc = (s: any) => String(s ?? '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
export function ctasToHtml(ctas: CtaButton[], defaults: CtaStyleDefaults): string {
return ctas.map((c) => {
const target = c.target === '_blank' ? ' target="_blank" rel="noopener noreferrer"' : '';
return `<a href="${esc(c.href || '#')}"${target} style="${ctaCssString(c, defaults)}">${esc(c.text || '')}</a>`;
}).join('');
}
/* ---------- CTAs editor (settings UI) ---------- */
interface CtasEditorProps {
ctas: CtaButton[];
/** Called whenever the user mutates the array. Sections wire this via setProp. */
onChange: (next: CtaButton[]) => void;
/** Max items the user can add. Default 4. */
max?: number;
}
const inputStyle: CSSProperties = {
width: '100%', padding: '6px 8px', background: '#27272a',
color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12,
};
const labelStyle: CSSProperties = {
fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 4,
};
export const CtasEditor: React.FC<CtasEditorProps> = ({ ctas, onChange, max = 4 }) => {
const update = (i: number, patch: Partial<CtaButton>) => {
const next = ctas.slice();
next[i] = { ...next[i], ...patch };
onChange(next);
};
const remove = (i: number) => onChange(ctas.filter((_, j) => j !== i));
const add = () => {
if (ctas.length >= max) return;
onChange([...ctas, { text: 'New button', href: '#', variant: ctas.length === 0 ? 'primary' : 'outline' }]);
};
const move = (i: number, dir: -1 | 1) => {
const j = i + dir;
if (j < 0 || j >= ctas.length) return;
const next = ctas.slice();
[next[i], next[j]] = [next[j], next[i]];
onChange(next);
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
<div style={{ fontSize: 11, color: '#a1a1aa', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
Buttons ({ctas.length})
</div>
{ctas.length === 0 && (
<div style={{ fontSize: 11, color: '#71717a', fontStyle: 'italic', padding: '8px 0' }}>
No buttons. Click "Add button" to insert one.
</div>
)}
{ctas.map((cta, i) => (
<div key={i} style={{
background: '#18181b', border: '1px solid #3f3f46', borderRadius: 6,
padding: 10, display: 'flex', flexDirection: 'column', gap: 6,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<span style={{ fontSize: 10, color: '#a1a1aa', fontWeight: 600, flex: 1 }}>Button {i + 1}</span>
<button onClick={() => move(i, -1)} disabled={i === 0} title="Move up"
style={iconBtn(i === 0)}>↑</button>
<button onClick={() => move(i, 1)} disabled={i === ctas.length - 1} title="Move down"
style={iconBtn(i === ctas.length - 1)}>↓</button>
<button onClick={() => remove(i)} title="Remove"
style={{ ...iconBtn(false), color: '#fca5a5' }}>✕</button>
</div>
<div>
<label style={labelStyle}>Text</label>
<input type="text" value={cta.text} onChange={(e) => update(i, { text: e.target.value })} style={inputStyle} />
</div>
<div>
<label style={labelStyle}>URL</label>
<input type="text" value={cta.href} onChange={(e) => update(i, { href: e.target.value })}
placeholder="https://… or #anchor" style={inputStyle} />
</div>
<div style={{ display: 'flex', gap: 6 }}>
<div style={{ flex: 1 }}>
<label style={labelStyle}>Style</label>
<select value={cta.variant || 'primary'}
onChange={(e) => update(i, { variant: e.target.value as CtaVariant })}
style={{ ...inputStyle, padding: '5px 6px' }}>
<option value="primary">Primary (filled)</option>
<option value="outline">Outline</option>
<option value="ghost">Ghost (text)</option>
</select>
</div>
<div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'flex-end' }}>
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer', whiteSpace: 'nowrap' }}>
<input type="checkbox" checked={cta.target === '_blank'}
onChange={(e) => update(i, { target: e.target.checked ? '_blank' : undefined })} />
New tab
</label>
</div>
</div>
</div>
))}
{ctas.length < max && (
<button onClick={add} style={{
padding: '8px 12px', fontSize: 12, fontWeight: 600,
color: '#3b82f6', background: 'rgba(59,130,246,0.1)',
border: '1px dashed #3b82f6', borderRadius: 4, cursor: 'pointer',
}}>
+ Add button{ctas.length === 0 ? '' : ` (${max - ctas.length} more)`}
</button>
)}
</div>
);
};
function iconBtn(disabled: boolean): CSSProperties {
return {
width: 22, height: 22, fontSize: 11,
background: '#27272a', color: disabled ? '#52525b' : '#a1a1aa',
border: '1px solid #3f3f46', borderRadius: 4,
cursor: disabled ? 'not-allowed' : 'pointer',
};
}

10
craft/src/hooks/useSitesmith.ts
View File

@@ -34,14 +34,20 @@ export function useSitesmith(siteId: number) {
useEffect(() => { void refreshEntitlement(); void fetchHistory(); }, [refreshEntitlement, fetchHistory]);
const send = useCallback(async (userText: string, canvasSummary: string): Promise<SendResult> => {
const send = useCallback(async (
userText: string,
canvasSummary: string,
target?: { node_id: string; display_name: string; tree_json: string },
): Promise<SendResult> => {
if (!whpConfig) return { ok: false, status: 'BLOCKED', message: 'No WHP config' };
setMessages((m) => [...m, { role: 'user', content: userText, response_type: null, created_at: new Date().toISOString() }]);
const body: Record<string, unknown> = { site_id: siteId, message: userText, canvas_summary: canvasSummary };
if (target) body.target = target;
const r = await fetch(`${apiBase(whpConfig.apiUrl)}?action=send`, {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': whpConfig.csrfToken },
body: JSON.stringify({ site_id: siteId, message: userText, canvas_summary: canvasSummary }),
body: JSON.stringify(body),
});
const j: SendResult = await r.json();
void fetchHistory();

20
craft/src/panels/context-menu/ContextMenu.tsx
View File

@@ -1,6 +1,8 @@
import React, { useEffect, useCallback, useRef } from 'react';
import { useEditor } from '@craftjs/core';
import { findDeletableTarget } from '../../utils/craft-helpers';
import { useSitesmithModal } from '../../state/SitesmithContext';
import { buildSitesmithTarget } from '../../utils/sitesmith-target';
interface ContextMenuProps {
visible: boolean;
@@ -27,6 +29,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
onClose,
}) => {
const { actions, query } = useEditor();
const { open: openSitesmith } = useSitesmithModal();
const menuRef = useRef<HTMLDivElement>(null);
const clipboardRef = useRef<string | null>(null);
@@ -143,6 +146,17 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
onClose();
}, [nodeId, actions, getParentId, onClose]);
const askSitesmith = useCallback(() => {
if (!nodeId || nodeId === 'ROOT') return;
try {
const target = buildSitesmithTarget(query, nodeId);
if (target) openSitesmith(target);
} catch (e) {
console.error('Ask Sitesmith failed:', e);
}
onClose();
}, [nodeId, query, openSitesmith, onClose]);
const deleteNode = useCallback(() => {
const target = findDeletableTarget(query, nodeId);
if (!target) {
@@ -162,6 +176,12 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
const isRoot = nodeId === 'ROOT' || !nodeId;
const items: MenuItem[] = [
{
label: '✨ Ask Sitesmith',
action: askSitesmith,
disabled: isRoot,
dividerAfter: true,
},
{
label: 'Duplicate',
shortcut: 'Ctrl+D',

29
craft/src/panels/right/GuidedStyles.tsx
View File

@@ -2,6 +2,8 @@ import React from 'react';
import { useEditor } from '@craftjs/core';
import { componentResolver } from '../../components/resolver';
import { SiteDesignPanel } from './SiteDesignPanel';
import { useSitesmithModal } from '../../state/SitesmithContext';
import { buildSitesmithTarget } from '../../utils/sitesmith-target';
import {
TextStylePanel,
ButtonStylePanel,
@@ -30,6 +32,8 @@ import {
export const GuidedStyles: React.FC = () => {
const resolverMap = componentResolver as Record<string, any>;
const { open: openSitesmith } = useSitesmithModal();
const { query } = useEditor();
const { selected, selectedType, nodeProps, resolvedName } = useEditor((state) => {
const currentNodeId = state.events.selected
@@ -97,14 +101,33 @@ export const GuidedStyles: React.FC = () => {
: isUtility ? 'fa-ellipsis-h'
: 'fa-cube';
const handleAskSitesmith = () => {
if (!selected || selected === 'ROOT') return;
const target = buildSitesmithTarget(query, selected);
if (target) openSitesmith(target);
};
return (
<div className="guided-styles">
{/* Component type badge */}
<div className="guided-section guided-type-header">
<span className="guided-type-badge">
{/* Component type badge + Sitesmith shortcut */}
<div className="guided-section guided-type-header" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span className="guided-type-badge" style={{ flex: 1 }}>
<i className={`fa ${typeIcon}`} />
{' '}{typeName}
</span>
<button
onClick={handleAskSitesmith}
title="Ask Sitesmith to edit this block"
style={{
display: 'inline-flex', alignItems: 'center', gap: 4,
padding: '4px 8px', fontSize: 11, fontWeight: 600,
color: '#a78bfa', background: 'rgba(139,92,246,0.12)',
border: '1px solid rgba(139,92,246,0.4)',
borderRadius: 'var(--radius-sm)', cursor: 'pointer',
}}
>
<i className="fa fa-magic" /> Ask Sitesmith
</button>
</div>
{/* TEXT */}

28
craft/src/panels/sitesmith/SitesmithModal.tsx
View File

@@ -4,6 +4,7 @@ import { useEditorConfig } from '../../state/EditorConfigContext';
import { useSitesmith } from '../../hooks/useSitesmith';
import { useApplyAiResponse } from '../../utils/apply-ai-response';
import { summarizeCanvas } from '../../utils/canvas-summary';
import { SitesmithTarget } from '../../state/SitesmithContext';
import { UpgradeBanner } from './UpgradeBanner';
import { ScopeConfirmDialog } from './ScopeConfirmDialog';
import { MessageList } from './MessageList';
@@ -11,9 +12,14 @@ import { ChatInput } from './ChatInput';
import { WorkingIndicator } from './WorkingIndicator';
import { SitesmithResponse } from '../../types/sitesmith';
interface Props { onClose: () => void; }
interface Props {
onClose: () => void;
/** When set, the chat is biased toward editing this specific node and the AI is
* instructed to return a `patch` op. The node's serialized tree is sent along. */
target?: SitesmithTarget | null;
}
export const SitesmithModal: React.FC<Props> = ({ onClose }) => {
export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
const cfg = useEditorConfig();
const siteId = cfg.whpConfig?.siteId ?? 0;
const { query } = useEditor();
@@ -38,13 +44,17 @@ export const SitesmithModal: React.FC<Props> = ({ onClose }) => {
setBusy(true); setError(null);
try {
const canvas = summarizeCanvas(query.getSerializedNodes());
const result = await send(text, canvas);
const result = await send(text, canvas, target ? {
node_id: target.nodeId,
display_name: target.displayName,
tree_json: target.treeJson,
} : undefined);
if (!result.ok) { setError(result.message || 'Failed'); return; }
if (result.response.type === 'replace' && result.response.scope === 'site') {
setPendingReplace(result.response);
return;
}
const applied = await apply(result.response);
const applied = await apply(result.response, target?.nodeId);
if (!applied.ok) setError(applied.message || 'Apply failed');
} catch (e: any) { setError(String(e?.message ?? e)); }
finally { setBusy(false); }
@@ -86,6 +96,16 @@ export const SitesmithModal: React.FC<Props> = ({ onClose }) => {
</div>
<div style={body}>
<UpgradeBanner summary={summary} />
{target && (
<div style={{
background: 'rgba(59,130,246,0.12)', border: '1px solid rgba(59,130,246,0.4)',
borderRadius: 6, padding: '8px 12px', marginBottom: 10, fontSize: 13, color: '#bfdbfe',
display: 'flex', alignItems: 'center', gap: 8,
}}>
<i className="fa fa-magic" style={{ color: '#60a5fa' }} />
<span>Editing <strong style={{ color: '#fff' }}>{target.displayName}</strong> — describe the change you want and Sitesmith will modify just this block.</span>
</div>
)}
{error && <div role="alert" style={errBox}>{error}</div>}
{loading
? <div style={{ color: '#71717a', textAlign: 'center', padding: 30 }}>Loading…</div>

7
craft/src/panels/topbar/TopBar.tsx
View File

@@ -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>
);
};

55
craft/src/state/SitesmithContext.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
/**
* Optional target for a Sitesmith chat session. When set, the modal renders a
* "Editing X" banner and the chat input is biased toward modifying just that
* subtree — the user's prompt is augmented server-side with the node's
* serialized tree, and the AI is instructed to return a `patch` op (typically
* `replace_node`) rather than a full-site replace.
*/
export interface SitesmithTarget {
/** Craft.js node id, used to find the node when applying the patch. */
nodeId: string;
/** Human-readable component name, shown in the modal header. */
displayName: string;
/** The component's serialized subtree (used to build a usable AI prompt). */
treeJson: string;
}
interface SitesmithContextValue {
isOpen: boolean;
target: SitesmithTarget | null;
open: (target?: SitesmithTarget) => void;
close: () => void;
}
const SitesmithCtx = createContext<SitesmithContextValue>({
isOpen: false,
target: null,
open: () => {},
close: () => {},
});
export const useSitesmithModal = () => useContext(SitesmithCtx);
export const SitesmithProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const [target, setTarget] = useState<SitesmithTarget | null>(null);
const open = useCallback((t?: SitesmithTarget) => {
setTarget(t ?? null);
setIsOpen(true);
}, []);
const close = useCallback(() => {
setIsOpen(false);
setTarget(null);
}, []);
const value = useMemo<SitesmithContextValue>(
() => ({ isOpen, target, open, close }),
[isOpen, target, open, close],
);
return <SitesmithCtx.Provider value={value}>{children}</SitesmithCtx.Provider>;
};

81
craft/src/ui/AnchorIdField.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React from 'react';
import { useNode, useEditor } from '@craftjs/core';
/**
* Reusable anchor-id input for any section/layout component. Lets the user
* set a stable URL fragment (e.g. #about) and auto-fills from the first
* heading found inside the node's subtree.
*
* Uses the editor query (more reliable than DOM lookup) to walk the Craft.js
* node tree and find the first Heading component's `text` prop.
*/
export const AnchorIdField: React.FC = () => {
const { id, actions: { setProp }, props, nodeName } = useNode((node) => ({
props: node.data.props as { anchorId?: string },
nodeName: node.data.displayName,
}));
const { query } = useEditor();
const value = (props.anchorId ?? '').toString();
const slugify = (s: string) =>
s.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').slice(0, 60);
// Walk the subtree via editor query looking for the first Heading's `text` prop.
const findFirstHeadingText = (): string | null => {
const walk = (nodeId: string): string | null => {
try {
const n = query.node(nodeId).get();
if (n.data.displayName === 'Heading') {
return ((n.data.props as any).text as string | undefined) ?? null;
}
for (const childId of n.data.nodes ?? []) {
const r = walk(childId);
if (r) return r;
}
for (const childId of Object.values(n.data.linkedNodes ?? {})) {
const r = walk(childId as string);
if (r) return r;
}
} catch {
return null;
}
return null;
};
try { return walk(id); } catch { return null; }
};
const autoFill = () => {
const txt = findFirstHeadingText();
if (txt) setProp((p: any) => { p.anchorId = slugify(txt); });
};
const labelStyle: React.CSSProperties = { display: 'block', fontSize: 11, color: 'var(--color-text-muted)', marginBottom: 4, fontWeight: 500 };
return (
<div style={{ marginBottom: 14, paddingBottom: 12, borderBottom: '1px solid var(--color-border)' }}>
<label style={labelStyle}>Anchor ID (URL fragment)</label>
<div style={{ display: 'flex', gap: 6 }}>
<span style={{ color: 'var(--color-text-dim)', fontSize: 13, padding: '6px 4px 6px 8px', background: 'var(--color-bg-base)', borderTopLeftRadius: 'var(--radius-sm)', borderBottomLeftRadius: 'var(--radius-sm)', border: '1px solid var(--color-border)', borderRight: 'none', fontFamily: 'monospace' }}>#</span>
<input
type="text"
value={value}
onChange={(e) => setProp((p: any) => { p.anchorId = slugify(e.target.value); })}
placeholder="optional"
className="control-input"
style={{ flex: 1, fontSize: 12, fontFamily: 'monospace', borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
/>
<button
type="button"
onClick={autoFill}
title="Auto-fill from first heading inside this block"
style={{ padding: '4px 8px', fontSize: 11, background: 'var(--color-bg-base)', color: 'var(--color-text-muted)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', cursor: 'pointer', whiteSpace: 'nowrap' }}
>
From heading
</button>
</div>
<div style={{ fontSize: 10, color: 'var(--color-text-dim)', marginTop: 4 }}>
Link to this {nodeName?.toLowerCase() ?? 'block'} from anywhere with <code style={{ fontFamily: 'monospace' }}>#{value || 'your-anchor'}</code>
</div>
</div>
);
};

26
craft/src/utils/apply-ai-response.ts
View File

@@ -167,7 +167,16 @@ export function useApplyAiResponse() {
const { actions, query } = useEditor();
const pages = usePages();
return async function apply(resp: SitesmithResponse): Promise<{ ok: boolean; message?: string }> {
/**
* @param targetNodeId If set and the AI returned a section-scoped replace
* instead of a patch, treat the first returned tree as a replacement for
* this node (the user said "edit this block" — they don't want a new
* section appended at the bottom).
*/
return async function apply(
resp: SitesmithResponse,
targetNodeId?: string,
): Promise<{ ok: boolean; message?: string }> {
// 'ask' type = AI wants clarification, nothing to apply
if (resp.type === 'ask') return { ok: true };
@@ -185,6 +194,21 @@ export function useApplyAiResponse() {
}
if (resp.scope === 'section') {
// When targeted at a specific node, the AI's tree replaces that node
// in place (vs appending a fresh section at the end of ROOT).
if (targetNodeId && resp.pages.length > 0) {
try {
const nodeTree = buildNodeTree(query, resp.pages[0].tree);
const parent: string = query.node(targetNodeId).get().data.parent ?? 'ROOT';
const siblings: string[] = query.node(parent).childNodes();
const index = siblings.indexOf(targetNodeId);
actions.delete(targetNodeId);
actions.addNodeTree(nodeTree, parent, index);
return { ok: true };
} catch (e) {
console.warn('sitesmith: targeted section replace failed, falling back to append', e);
}
}
// Insert each provided tree as a new node tree appended to ROOT
for (const p of resp.pages) {
try {

40
craft/src/utils/sitesmith-target.ts Normal file
View File

@@ -0,0 +1,40 @@
import { SitesmithTarget } from '../state/SitesmithContext';
/**
* Build a Sitesmith target descriptor from a Craft.js node id. The returned
* `treeJson` is a flat node-map (compatible with the editor's serialized
* format) for just the selected subtree; the server includes it in the AI
* prompt so the model has the exact current shape of the block to modify.
*/
export function buildSitesmithTarget(query: any, nodeId: string): SitesmithTarget | null {
if (!nodeId || nodeId === 'ROOT') return null;
try {
const node = query.node(nodeId).get();
const displayName = node?.data?.displayName || node?.data?.type?.resolvedName || 'Block';
// Use Craft.js' own subtree serializer — toNodeTree gives a flat map keyed
// by node id, identical to what `actions.deserialize()` consumes.
const subtree = query.node(nodeId).toNodeTree();
const serializedMap: Record<string, unknown> = {};
for (const [id, n] of Object.entries(subtree.nodes ?? {}) as [string, any][]) {
serializedMap[id] = {
type: n.data.type,
props: n.data.props,
displayName: n.data.displayName,
isCanvas: n.data.isCanvas ?? false,
parent: n.data.parent,
nodes: n.data.nodes ?? [],
linkedNodes: n.data.linkedNodes ?? {},
hidden: n.data.hidden ?? false,
custom: n.data.custom ?? {},
};
}
return {
nodeId,
displayName,
treeJson: JSON.stringify({ root: subtree.rootNodeId, nodes: serializedMap }),
};
} catch (e) {
console.warn('buildSitesmithTarget failed:', e);
return null;
}
}