// ============================================================ // DEMIURGE · GLOBAL ACTIONS REGISTRY // Every named CTA in the app routes here. No dead UI. // ============================================================ // ---------- shared style atoms (modal forms) ---------- const _label = { fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 6, display: 'block' }; const _input = { width: '100%', padding: '8px 12px', background: 'rgba(0,0,0,0.3)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', fontSize: 13, color: 'var(--text)' }; const _row = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }; const _grid = (n) => ({ display: 'grid', gridTemplateColumns: `repeat(${n}, 1fr)`, gap: 8 }); const _card = (active) => ({ padding: 10, borderRadius: 6, cursor: 'pointer', border: `1px solid ${active ? 'rgba(75,232,255,0.5)' : 'var(--border)'}`, background: active ? 'rgba(75,232,255,0.08)' : 'rgba(255,255,255,0.02)', display: 'flex', flexDirection: 'column', gap: 4, transition: 'all 0.15s', }); const _hint = { fontSize: 10.5, color: 'var(--text-dim)', lineHeight: 1.4 }; // Generic chip-grid picker function ChipGrid({ value, onChange, options, cols = 3, multi = false }) { const isOn = (k) => multi ? (value || []).includes(k) : value === k; const toggle = (k) => { if (multi) { const v = value || []; onChange(v.includes(k) ? v.filter(x => x !== k) : [...v, k]); } else onChange(k); }; return (
{options.map(o => { const k = typeof o === 'string' ? o : o.k; const label = typeof o === 'string' ? o : o.label; const sub = typeof o === 'object' ? o.sub : null; return (
toggle(k)}>
{label}
{sub &&
{sub}
}
); })}
); } // Stepper for wizards function Stepper({ steps, current }) { return (
{steps.map((s, i) => (
{i < current ? '✓' : i + 1}
{s}
{i < steps.length - 1 &&
} ))}
); } // Animated progress used by "Run AI Audit", "Run Workflow", "Run Deep Analysis" function ProgressRunner({ steps, onDone, doneLabel = 'Complete' }) { const [i, setI] = React.useState(0); React.useEffect(() => { if (i >= steps.length) { onDone?.(); return; } const t = setTimeout(() => setI(i + 1), 650 + Math.random() * 400); return () => clearTimeout(t); }, [i]); const done = i >= steps.length; return (
{steps.map((s, idx) => { const state = idx < i ? 'done' : idx === i ? 'active' : 'pending'; const col = state === 'done' ? 'var(--good)' : state === 'active' ? 'var(--cyan)' : 'var(--text-faint)'; return (
{state === 'done' ? '✓' : state === 'active' ? : '·'} {s}
); })}
{done &&
✓ {doneLabel}
}
); } // Footer button helpers (modal footer is rendered separately, but we expose builders) const _ftrBtn = (label, onClick, primary = false) => ( ); // ============================================================ // WIZARD: Campaign Builder // ============================================================ function CampaignBuilder({ defaults = {} }) { const [step, setStep] = React.useState(0); const [config, setConfig] = React.useState({ name: defaults.name || 'Untitled campaign', channels: defaults.channels || ['email'], audience: defaults.audience || 'all_customers', subject: defaults.subject || '', body: defaults.body || '', schedule: defaults.schedule || 'now', sendDate: defaults.sendDate || '', }); const [busy, setBusy] = React.useState(false); const set = (k, v) => setConfig(c => ({ ...c, [k]: v })); const canNext = step === 0 ? config.name.trim() && config.channels.length > 0 : step === 1 ? !!config.audience : step === 2 ? config.body.trim().length > 0 : true; const launch = () => { setBusy(true); setTimeout(() => { window.closeModal(); window.toast(`Campaign "${config.name}" launched`, 'ok', `Going out to ${(window.AUDIENCE_SIZES?.[config.audience]) || '2,400'} via ${config.channels.join(' + ')}`); }, 800); }; const generateWithAI = async () => { if (!window.claude?.complete) return; setBusy(true); try { const t = await window.claude.complete({ messages: [{ role: 'user', content: `Write a short ${config.channels.join('+')} marketing message about: "${config.name}". 2-4 sentences. Friendly tone. No preamble.` }] }); set('body', t); if (config.channels.includes('email') && !config.subject) { set('subject', config.name); } } catch { set('body', `Hey — just a quick note about ${config.name}. We've got something special for you this week. Hit reply if you want details.`); } setBusy(false); }; return (
{step === 0 && (
set('name', e.target.value)} placeholder="May product launch"/>
set('channels', v)} multi cols={4} options={[ { k: 'email', label: 'Email', sub: '2,412 recipients' }, { k: 'sms', label: 'SMS', sub: '1,184 numbers' }, { k: 'tiktok', label: 'TikTok', sub: 'broadcast post' }, { k: 'instagram', label: 'Instagram', sub: 'feed + stories' }, { k: 'facebook', label: 'Facebook', sub: '+ ads' }, { k: 'linkedin', label: 'LinkedIn', sub: 'paid + organic' }, { k: 'whatsapp', label: 'WhatsApp', sub: '412 numbers' }, { k: 'ads', label: 'Paid ads', sub: 'Meta + Google' }, ]}/>
)} {step === 1 && (
set('audience', v)} cols={2} options={[ { k: 'all_customers', label: 'All customers', sub: '2,412 people' }, { k: 'hot_leads', label: 'Hot leads', sub: '184 people · high intent' }, { k: 'recent_buyers', label: 'Recent buyers', sub: '412 in last 30 days' }, { k: 'inactive', label: 'Inactive · 90 days', sub: '618 people · win-back' }, { k: 'tiktok', label: 'TikTok followers', sub: '12.4k people' }, { k: 'custom', label: 'Custom segment…', sub: 'Build with filters' }, ]}/>
Predicted reach
Estimated opens · ~1,184 Estimated replies · ~142 Estimated revenue · £8,400
)} {step === 2 && (
{config.channels.includes('email') && (
set('subject', e.target.value)} placeholder="A quick note from us"/>
)}