560 lines
21 KiB
TypeScript
560 lines
21 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useSiteDesign, DEFAULT_SITE_DESIGN } from '../../state/SiteDesignContext';
|
|
import { usePages } from '../../state/PageContext';
|
|
import { useEditorConfig } from '../../state/EditorConfigContext';
|
|
import { useSaveGuard } from '../../state/SaveGuardContext';
|
|
import { SerializedTreeNode } from '../../types/sitesmith';
|
|
import { FONT_FAMILIES } from '../../constants/presets';
|
|
import { AssetPicker } from '../../ui/AssetPicker';
|
|
import { inputStyle, ColorPickerField } from './styles/shared';
|
|
import { openProfileWizard } from '../sitesmith/ProfileWizard';
|
|
import { PALETTES, paletteUpdates, paletteMatches } from '../../constants/palettes';
|
|
import { SwatchManager } from './SwatchManager';
|
|
import { siteColorPairs } from '../../utils/contrast';
|
|
|
|
type DesignTab = 'basic' | 'advanced';
|
|
|
|
/* ---------- Color field ----------
|
|
Site tokens are the SOURCE of every `var(--wsb-*)`, so they store hex:
|
|
the token row is off (a token referencing itself would be a cycle). */
|
|
|
|
interface ColorFieldProps {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
/** Id of a site colour pair (utils/contrast siteColorPairs) this field belongs to. */
|
|
pair?: 'text-bg' | 'muted-bg' | 'link-bg' | 'button-primary';
|
|
}
|
|
|
|
const ColorField: React.FC<ColorFieldProps> = ({ label, value, onChange, pair }) => {
|
|
const { design } = useSiteDesign();
|
|
const p = pair ? siteColorPairs(design).find((x) => x.id === pair) : undefined;
|
|
// The other side of the pair is a hex in the design (these fields are the token source).
|
|
// Text/muted/link are the foreground against the background; the button pair is the
|
|
// primary colour (the background of the button) against the page background (its text).
|
|
const other = p ? design.backgroundColor : undefined;
|
|
return (
|
|
<ColorPickerField
|
|
label={label} value={value} onChange={onChange} showTokens={false}
|
|
contrastWith={other}
|
|
contrastRole={pair === 'button-primary' ? 'bg' : 'fg'}
|
|
contrastLabel={p?.label}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/* ---------- Try a palette ---------- */
|
|
|
|
const PalettePicker: React.FC = () => {
|
|
const { design, updateDesign } = useSiteDesign();
|
|
return (
|
|
<div className="guided-section">
|
|
<label className="guided-section-label">Try a palette</label>
|
|
<div className="palette-grid">
|
|
{PALETTES.map((p) => {
|
|
const active = paletteMatches(p, design);
|
|
return (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
className={`palette-preview${active ? ' active' : ''}`}
|
|
aria-pressed={active}
|
|
title={p.name}
|
|
onClick={() => updateDesign(paletteUpdates(p))}
|
|
>
|
|
<span className="palette-dots">
|
|
{[p.design.primaryColor, p.design.secondaryColor, p.design.accentColor, p.design.backgroundColor].map((c, i) => (
|
|
<span key={i} className="palette-dot" style={{ background: c }} />
|
|
))}
|
|
</span>
|
|
<span className="palette-name">{p.name}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Font dropdown ---------- */
|
|
|
|
interface FontFieldProps {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
const FontField: React.FC<FontFieldProps> = ({ label, value, onChange }) => (
|
|
<div className="guided-section">
|
|
<label className="guided-section-label">{label}</label>
|
|
<select
|
|
className="control-select"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
style={{ fontSize: 12 }}
|
|
>
|
|
{FONT_FAMILIES.map((f) => (
|
|
<option key={f.value} value={f.value} style={{ fontFamily: f.value }}>
|
|
{f.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
|
|
/* ---------- Border radius presets ---------- */
|
|
|
|
const BORDER_RADIUS_PRESETS = [
|
|
{ label: '0', value: '0' },
|
|
{ label: '4px', value: '4px' },
|
|
{ label: '8px', value: '8px' },
|
|
{ label: '12px', value: '12px' },
|
|
{ label: '16px', value: '16px' },
|
|
];
|
|
|
|
interface RadiusFieldProps {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
const RadiusField: React.FC<RadiusFieldProps> = ({ label, value, onChange }) => (
|
|
<div className="guided-section">
|
|
<label className="guided-section-label">{label}</label>
|
|
<div className="preset-grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
|
|
{BORDER_RADIUS_PRESETS.map((p) => (
|
|
<button
|
|
key={p.value}
|
|
className={`preset-btn ${value === p.value ? 'active' : ''}`}
|
|
onClick={() => onChange(p.value)}
|
|
>
|
|
{p.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/* ---------- Nav style toggle ---------- */
|
|
|
|
interface NavStyleFieldProps {
|
|
value: 'light' | 'dark';
|
|
onChange: (value: 'light' | 'dark') => void;
|
|
}
|
|
|
|
const NavStyleField: React.FC<NavStyleFieldProps> = ({ value, onChange }) => (
|
|
<div className="guided-section">
|
|
<label className="guided-section-label">Nav Style</label>
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
{(['light', 'dark'] as const).map((s) => (
|
|
<button
|
|
key={s}
|
|
className={`preset-btn ${value === s ? 'active' : ''}`}
|
|
style={{ flex: 1, textTransform: 'capitalize' }}
|
|
onClick={() => onChange(s)}
|
|
>
|
|
{s === 'light' ? 'Light' : 'Dark'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/* ---------- Reset Entire Site (danger zone) ---------- */
|
|
|
|
// Blank replacement trees for the "Reset Entire Site" escape hatch. Shaped
|
|
// as a `SerializedTreeNode` (type + props + nodes), NOT a flat Craft.js
|
|
// state entry -- this is what `replaceAllPages`/`setHeader`/`setFooter`
|
|
// feed into `treeToCraftState` -> `sanitizeAiTree`/`flattenTreeForCraft`
|
|
// (see `state/PageContext.tsx`/`utils/craft-tree.ts`). A single `Container`
|
|
// root with no children mirrors the (unexported) EMPTY_CANVAS/EMPTY_HEADER/
|
|
// EMPTY_FOOTER constants already used elsewhere for "blank".
|
|
const BLANK_PAGE_TREE: SerializedTreeNode = {
|
|
type: { resolvedName: 'Container' },
|
|
props: { style: { minHeight: '100vh', backgroundColor: '#ffffff' }, tag: 'div' },
|
|
nodes: [],
|
|
};
|
|
|
|
const BLANK_HEADER_TREE: SerializedTreeNode = {
|
|
type: { resolvedName: 'Container' },
|
|
props: {
|
|
style: { minHeight: '60px', backgroundColor: '#ffffff', padding: '12px 24px', display: 'flex', alignItems: 'center' },
|
|
tag: 'header',
|
|
},
|
|
nodes: [],
|
|
};
|
|
|
|
const BLANK_FOOTER_TREE: SerializedTreeNode = {
|
|
type: { resolvedName: 'Container' },
|
|
props: {
|
|
style: { minHeight: '60px', backgroundColor: '#0f172a', color: '#94a3b8', padding: '40px 24px', textAlign: 'center' },
|
|
tag: 'footer',
|
|
},
|
|
nodes: [],
|
|
};
|
|
|
|
/**
|
|
* Single source of truth for "has the user typed enough to arm the confirm
|
|
* button" -- used for the `disabled` attribute/cursor/opacity AND, more
|
|
* importantly, inside `handleResetSite` itself. `disabled` is a UI
|
|
* affordance, not a safety mechanism (it only stops a plain mouse click);
|
|
* for the one action in this app that irreversibly wipes a user's whole
|
|
* site draft, the real guard has to live in the handler, checked against
|
|
* this exact same predicate rather than a second hand-rolled comparison
|
|
* that could drift out of sync with it.
|
|
*
|
|
* An empty/falsy `domain` always returns `false`, even if `typed` is also
|
|
* empty -- `''.trim() === ''.trim()` would otherwise "match" trivially.
|
|
* Standalone mode (no `WHP_CONFIG`) has `siteDomain === ''`, and while the
|
|
* entry point that would let a user reach this code is hidden in that case
|
|
* (see the `siteDomain &&` guard around the whole danger zone below), this
|
|
* function must not depend on that -- it has to fail safe on its own if
|
|
* ever reached with no configured domain.
|
|
*
|
|
* Exported so it's directly unit-testable without needing a way to render
|
|
* the (deliberately unreachable-when-`siteDomain`-is-empty) confirm UI.
|
|
*/
|
|
export function siteResetConfirmMatches(typed: string, domain: string): boolean {
|
|
return !!domain && typed.trim() === domain.trim();
|
|
}
|
|
|
|
/* ---------- Main SiteDesignPanel ---------- */
|
|
|
|
export const SiteDesignPanel: React.FC = () => {
|
|
const { design, updateDesign, resetToDefaults } = useSiteDesign();
|
|
const { replaceAllPages, setHeader, setFooter, isEditingGlobal } = usePages();
|
|
const { whpConfig } = useEditorConfig();
|
|
const { armForceEmptyNextSave } = useSaveGuard();
|
|
// Standalone mode (no WHP_CONFIG) has no site domain to confirm against --
|
|
// an empty typed input would then trivially "match" an empty siteDomain,
|
|
// arming the destructive confirm button with no guard at all. The entry
|
|
// point itself is hidden in that case (see the `siteDomain &&` guard below).
|
|
const siteDomain = whpConfig?.siteDomain ?? '';
|
|
const [siteResetOpen, setSiteResetOpen] = useState(false);
|
|
const [siteResetTyped, setSiteResetTyped] = useState('');
|
|
const [tab, setTab] = useState<DesignTab>('basic');
|
|
|
|
const handleResetSite = (): void => {
|
|
// Load-bearing guard -- see `siteResetConfirmMatches`'s docstring. Not
|
|
// just a UI nicety: this must hold even if the confirm button's
|
|
// `disabled` attribute were ever bypassed (a synthetic click, or a
|
|
// future refactor that drops it).
|
|
if (!siteResetConfirmMatches(siteResetTyped, siteDomain)) return;
|
|
// #57: never wipe the site out from under an open global-section master.
|
|
if (isEditingGlobal) return;
|
|
|
|
// The user explicitly confirmed wiping the site, so the next save must
|
|
// be allowed to replace the saved site with an empty one.
|
|
if (!replaceAllPages([{ name: 'Home', tree: BLANK_PAGE_TREE }])) return;
|
|
armForceEmptyNextSave();
|
|
setHeader(BLANK_HEADER_TREE);
|
|
setFooter(BLANK_FOOTER_TREE);
|
|
resetToDefaults();
|
|
setSiteResetOpen(false);
|
|
setSiteResetTyped('');
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
|
{/* Header */}
|
|
<div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<i className="fa fa-paint-brush" style={{ color: 'var(--color-accent)', fontSize: 14 }} />
|
|
<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--color-text)' }}>
|
|
Site Design Tokens
|
|
</span>
|
|
</div>
|
|
|
|
{/* Tab switcher */}
|
|
<div style={{ display: 'flex', gap: 4, marginBottom: 16 }}>
|
|
{(['basic', 'advanced'] as DesignTab[]).map((t) => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setTab(t)}
|
|
style={{
|
|
flex: 1,
|
|
padding: '6px 12px',
|
|
fontSize: 11,
|
|
fontWeight: 600,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px',
|
|
color: tab === t ? '#fff' : 'var(--color-text-muted)',
|
|
background: tab === t ? 'var(--color-accent)' : 'var(--color-bg-elevated)',
|
|
border: tab === t ? '1px solid var(--color-accent)' : '1px solid var(--color-border)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s ease',
|
|
}}
|
|
>
|
|
{t}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Basic tab */}
|
|
{tab === 'basic' && (
|
|
<>
|
|
<PalettePicker />
|
|
{whpConfig && (
|
|
<div className="guided-section">
|
|
<button type="button" className="sitesmith-profile-open" onClick={() => openProfileWizard()}>
|
|
<i className="fa fa-briefcase" aria-hidden /> Business profile…
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="guided-section">
|
|
<label className="guided-section-label">Favicon</label>
|
|
<AssetPicker
|
|
value={design.favicon}
|
|
onChange={(url) => updateDesign({ favicon: url })}
|
|
mediaType="image"
|
|
variant="full"
|
|
placeholder="Or paste favicon URL..."
|
|
/>
|
|
<p style={{ fontSize: 10, color: 'var(--color-text-dim)', margin: '4px 0 0' }}>
|
|
Shown in browser tabs and bookmarks. Applies site-wide.
|
|
</p>
|
|
</div>
|
|
<ColorField
|
|
label="Primary Color"
|
|
pair="button-primary"
|
|
value={design.primaryColor}
|
|
onChange={(v) => updateDesign({ primaryColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Secondary Color"
|
|
value={design.secondaryColor}
|
|
onChange={(v) => updateDesign({ secondaryColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Accent Color"
|
|
value={design.accentColor}
|
|
onChange={(v) => updateDesign({ accentColor: v })}
|
|
/>
|
|
<FontField
|
|
label="Heading Font"
|
|
value={design.headingFont}
|
|
onChange={(v) => updateDesign({ headingFont: v })}
|
|
/>
|
|
<FontField
|
|
label="Body Font"
|
|
value={design.bodyFont}
|
|
onChange={(v) => updateDesign({ bodyFont: v })}
|
|
/>
|
|
<ColorField
|
|
label="Link Color"
|
|
pair="link-bg"
|
|
value={design.linkColor}
|
|
onChange={(v) => updateDesign({ linkColor: v })}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{/* Advanced tab */}
|
|
{tab === 'advanced' && (
|
|
<>
|
|
<ColorField
|
|
label="Primary Color"
|
|
pair="button-primary"
|
|
value={design.primaryColor}
|
|
onChange={(v) => updateDesign({ primaryColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Secondary Color"
|
|
value={design.secondaryColor}
|
|
onChange={(v) => updateDesign({ secondaryColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Accent Color"
|
|
value={design.accentColor}
|
|
onChange={(v) => updateDesign({ accentColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Success Color"
|
|
value={design.successColor}
|
|
onChange={(v) => updateDesign({ successColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Warning Color"
|
|
value={design.warningColor}
|
|
onChange={(v) => updateDesign({ warningColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Error Color"
|
|
value={design.errorColor}
|
|
onChange={(v) => updateDesign({ errorColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Background Color"
|
|
value={design.backgroundColor}
|
|
onChange={(v) => updateDesign({ backgroundColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Text Color"
|
|
pair="text-bg"
|
|
value={design.textColor}
|
|
onChange={(v) => updateDesign({ textColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Muted Text Color"
|
|
pair="muted-bg"
|
|
value={design.mutedTextColor}
|
|
onChange={(v) => updateDesign({ mutedTextColor: v })}
|
|
/>
|
|
<ColorField
|
|
label="Border Color"
|
|
value={design.borderColor}
|
|
onChange={(v) => updateDesign({ borderColor: v })}
|
|
/>
|
|
<FontField
|
|
label="Heading Font"
|
|
value={design.headingFont}
|
|
onChange={(v) => updateDesign({ headingFont: v })}
|
|
/>
|
|
<FontField
|
|
label="Body Font"
|
|
value={design.bodyFont}
|
|
onChange={(v) => updateDesign({ bodyFont: v })}
|
|
/>
|
|
<FontField
|
|
label="Button Font"
|
|
value={design.buttonFont}
|
|
onChange={(v) => updateDesign({ buttonFont: v })}
|
|
/>
|
|
<ColorField
|
|
label="Link Color"
|
|
pair="link-bg"
|
|
value={design.linkColor}
|
|
onChange={(v) => updateDesign({ linkColor: v })}
|
|
/>
|
|
<RadiusField
|
|
label="Default Border Radius"
|
|
value={design.borderRadius}
|
|
onChange={(v) => updateDesign({ borderRadius: v })}
|
|
/>
|
|
<RadiusField
|
|
label="Button Radius"
|
|
value={design.buttonRadius}
|
|
onChange={(v) => updateDesign({ buttonRadius: v })}
|
|
/>
|
|
<NavStyleField
|
|
value={design.navStyle}
|
|
onChange={(v) => updateDesign({ navStyle: v })}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<SwatchManager />
|
|
|
|
{/* Reset button */}
|
|
<div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--color-border)' }}>
|
|
<button
|
|
onClick={resetToDefaults}
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
fontSize: 11,
|
|
fontWeight: 600,
|
|
color: 'var(--color-text-muted)',
|
|
background: 'var(--color-bg-elevated)',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s ease',
|
|
}}
|
|
>
|
|
Reset to Defaults
|
|
</button>
|
|
<p style={{
|
|
fontSize: 10,
|
|
color: 'var(--color-text-dim)',
|
|
textAlign: 'center',
|
|
margin: '8px 0 0',
|
|
lineHeight: 1.4,
|
|
}}>
|
|
Design tokens are saved with your project and applied to new components.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Reset Entire Site (danger zone) -- hidden entirely in standalone
|
|
mode, where siteDomain is '' and typing nothing would trivially
|
|
satisfy an empty-string match. */}
|
|
{siteDomain && (
|
|
<div
|
|
style={{
|
|
marginTop: 18, padding: 12,
|
|
border: '1px solid rgba(239,68,68,0.35)',
|
|
borderRadius: 'var(--radius-sm)',
|
|
background: 'rgba(239,68,68,0.06)',
|
|
}}
|
|
>
|
|
<div style={{ fontSize: 11, fontWeight: 700, color: '#ef4444', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: 6 }}>
|
|
Danger zone
|
|
</div>
|
|
|
|
{!siteResetOpen ? (
|
|
<button
|
|
data-action="open-site-reset"
|
|
onClick={() => setSiteResetOpen(true)}
|
|
style={{
|
|
width: '100%', padding: '8px 12px', fontSize: 11, fontWeight: 600,
|
|
color: '#ef4444', background: 'transparent',
|
|
border: '1px solid rgba(239,68,68,0.5)', borderRadius: 'var(--radius-sm)', cursor: 'pointer',
|
|
}}
|
|
>
|
|
Reset Entire Site
|
|
</button>
|
|
) : (
|
|
<>
|
|
<p style={{ fontSize: 11, color: 'var(--color-text-muted)', lineHeight: 1.5, margin: '0 0 8px' }}>
|
|
This blanks <strong>every page</strong>, the header, the footer, all
|
|
design tokens (colors, fonts, radii), and your custom head code and
|
|
favicon, leaving one empty Home page. Uploaded images are kept.
|
|
<strong> This cannot be undone.</strong> Your published site stays as it
|
|
is until you publish again — but the editor auto-saves roughly every 30
|
|
seconds, so the blank version becomes your saved draft shortly after.
|
|
</p>
|
|
<p style={{ fontSize: 11, color: 'var(--color-text-muted)', margin: '0 0 4px' }}>
|
|
Type <code>{siteDomain}</code> to confirm:
|
|
</p>
|
|
<input
|
|
data-testid="site-reset-domain"
|
|
value={siteResetTyped}
|
|
onChange={(e) => setSiteResetTyped(e.target.value)}
|
|
placeholder={siteDomain}
|
|
style={inputStyle}
|
|
/>
|
|
<div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
|
|
<button
|
|
data-action="confirm-site-reset"
|
|
disabled={isEditingGlobal || !siteResetConfirmMatches(siteResetTyped, siteDomain)}
|
|
onClick={handleResetSite}
|
|
style={{
|
|
flex: 1, padding: '7px 10px', fontSize: 11, fontWeight: 600,
|
|
color: '#fff', background: '#ef4444', border: 'none',
|
|
borderRadius: 'var(--radius-sm)',
|
|
cursor: siteResetConfirmMatches(siteResetTyped, siteDomain) ? 'pointer' : 'not-allowed',
|
|
opacity: siteResetConfirmMatches(siteResetTyped, siteDomain) ? 1 : 0.5,
|
|
}}
|
|
>
|
|
Reset everything
|
|
</button>
|
|
<button
|
|
onClick={() => { setSiteResetOpen(false); setSiteResetTyped(''); }}
|
|
style={{
|
|
flex: 1, padding: '7px 10px', fontSize: 11, fontWeight: 600,
|
|
color: 'var(--color-text-muted)', background: 'var(--color-bg-elevated)',
|
|
border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', cursor: 'pointer',
|
|
}}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
};
|