/* ═══════════════════════════════════════════════════════════════════ WizardPrimitives.jsx — the four Design-owned wizard primitives (§5) + shared bits. Ported from Claude Design v2 deliverable (Increment 2). Load AFTER WizardIcons.jsx, BEFORE WizardShell.jsx. Registers (bare globals for cross-module refs + window.WPSB.Wizard.*): WTag, WTooltip, WToggle, ToggleCard, ModeCard, ModeSelectorGroup, ImpactStatCard, NoticeCard ═══════════════════════════════════════════════════════════════════ */ (function () { const { useState, useRef } = React; const tx = (k, v, f) => (window.WPSB && window.WPSB.t) ? window.WPSB.t(k, v, f) : (f != null ? f : k); const WIcon = window.WIcon; // dependency (WizardIcons.jsx) /* ── Gating tag / chip ───────────────────────────────────────────── */ function WTag({ label, kind = 'tier' }) { return React.createElement('span', { className: 'wiz-tag wiz-tag-' + kind }, label); } /* ── Info tooltip (icon trigger) ─────────────────────────────────── */ function WTooltip({ text, label }) { return React.createElement('span', { className: 'wiz-tip' }, React.createElement('button', { type: 'button', className: 'wiz-focusable', 'aria-label': label || tx('page.wizardprim.more_information', null, 'More information'), style: { display: 'inline-flex', background: 'none', border: 'none', padding: 2, color: 'var(--dim)', cursor: 'help', lineHeight: 0 }, }, React.createElement(WIcon, { name: 'info', size: 15 })), React.createElement('span', { className: 'wiz-tip-bubble', role: 'tooltip' }, text) ); } /* ── Master toggle (pill switch) ─────────────────────────────────── */ function WToggle({ checked, disabled, onChange, label }) { return React.createElement('button', { type: 'button', role: 'switch', 'aria-checked': checked ? 'true' : 'false', 'aria-label': label, disabled, className: 'wiz-toggle', onClick: () => !disabled && onChange && onChange(!checked), }); } /* ════════════════════════════════════════════════════════════════ 1 · FEATURE TOGGLE-CARD (also renders the LOCKED-UPGRADE state) ════════════════════════════════════════════════════════════════ */ function ToggleCard(props) { const { icon, title, benefit, gatingTag, recommended, enabled, onToggle, learnMoreHref, locked, lockStyle = 'inviting', } = props; const [hover, setHover] = useState(false); const isLocked = !!locked; const prominent = isLocked && lockStyle !== 'subtle'; const accent = lockStyle === 'beam' ? 'var(--beam)' : 'var(--wiz-upsell)'; const accentBg = lockStyle === 'beam' ? 'var(--beam-dim)' : 'var(--wiz-upsell-bg)'; let bg = 'var(--wiz-card)', border = '1px solid var(--wiz-card-border)', shadow = 'none'; if (isLocked) { bg = prominent ? accentBg : 'var(--wiz-locked-bg)'; border = prominent ? '1px solid color-mix(in oklch, ' + accent + ' 34%, transparent)' : '1px dashed var(--wiz-locked-border)'; } else if (enabled) { bg = 'var(--wiz-card)'; border = '1px solid color-mix(in oklch, var(--wiz-select) 38%, var(--border))'; shadow = '0 0 0 1px color-mix(in oklch, var(--wiz-select) 22%, transparent)'; } else if (hover) { bg = 'var(--wiz-card-hover)'; } const iconWrap = { width: 42, height: 42, borderRadius: 'var(--r)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', background: isLocked ? (prominent ? 'color-mix(in oklch, ' + accent + ' 15%, transparent)' : 'var(--surface-3)') : (enabled ? 'var(--beam-dim)' : 'var(--surface-2)'), color: isLocked ? (prominent ? accent : 'var(--wiz-locked-fg)') : (enabled ? 'var(--beam)' : 'var(--muted)'), border: '1px solid ' + (isLocked && prominent ? 'color-mix(in oklch, ' + accent + ' 30%, transparent)' : 'var(--border)'), transition: 'border-color 150ms ease, color 150ms ease', }; return React.createElement('div', { className: 'wiz-card', onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: { background: bg, border, boxShadow: shadow, borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)', display: 'flex', alignItems: 'flex-start', gap: 'var(--sp-4)', opacity: isLocked && !prominent ? 0.92 : 1, }, }, React.createElement('div', { style: iconWrap }, React.createElement(WIcon, { name: icon, size: 22 })), React.createElement('div', { style: { flex: 1, minWidth: 0 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-2)', flexWrap: 'wrap', marginBottom: 4 } }, React.createElement('span', { style: { fontWeight: 'var(--fw-label)', fontSize: '.95rem', color: isLocked && !prominent ? 'var(--text-2)' : 'var(--text)', display: 'inline-flex', alignItems: 'center', gap: 6 }, }, isLocked && React.createElement(WIcon, { name: 'lock', size: 14, style: { color: prominent ? accent : 'var(--dim)' } }), title ), recommended && !isLocked && React.createElement(WTag, { label: tx('page.wizardprim.recommended', null, 'Recommended'), kind: 'new' }), gatingTag && React.createElement(WTag, gatingTag) ), React.createElement('p', { style: { margin: 0, fontSize: '.84rem', lineHeight: 1.45, color: isLocked ? 'var(--muted)' : 'var(--text-2)' } }, benefit), isLocked ? React.createElement('div', { style: { marginTop: 'var(--sp-3)', display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', flexWrap: 'wrap' } }, prominent ? React.createElement('button', { type: 'button', className: 'wiz-btn wiz-focusable', onClick: locked.onCta, style: { fontSize: '.72rem', padding: '7px 14px', background: accentBg, color: accent, border: '1px solid color-mix(in oklch, ' + accent + ' 35%, transparent)' }, }, React.createElement(WIcon, { name: locked.cta.kind === 'addon' ? 'rocket' : 'arrow-up-right', size: 14 }), locked.cta.label) : React.createElement('button', { type: 'button', className: 'wiz-focusable', onClick: locked.onCta, style: { background: 'none', border: 'none', padding: '2px 0', cursor: 'pointer', font: 'inherit', fontFamily: 'var(--font-mono)', fontSize: '.72rem', fontWeight: 'var(--fw-mono-small)', letterSpacing: '.04em', whiteSpace: 'nowrap', color: 'var(--beam)', display: 'inline-flex', alignItems: 'center', gap: 5 }, }, locked.cta.label, React.createElement(WIcon, { name: 'arrow-up-right', size: 13 })), React.createElement(WTooltip, { text: locked.reason, label: tx('page.wizardprim.why_locked', null, 'Why is this locked?') }) ) : (learnMoreHref && React.createElement('a', { href: learnMoreHref, onClick: (e) => e.preventDefault(), className: 'wiz-focusable', style: { display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 8, fontSize: '.76rem', color: 'var(--beam)', textDecoration: 'none', fontWeight: 'var(--fw-medium)' }, }, tx('page.wizardprim.learn_more', null, 'Learn more'), React.createElement(WIcon, { name: 'arrow-up-right', size: 13 }))) ), React.createElement('div', { style: { flex: 'none', paddingTop: 2 } }, React.createElement(WToggle, { checked: isLocked ? false : enabled, disabled: isLocked, onChange: onToggle, label: title }) ) ); } /* ════════════════════════════════════════════════════════════════ 2 · MODE-SELECTOR CARD GROUP (mutually exclusive, one selected) ════════════════════════════════════════════════════════════════ */ function ModeCard({ option, selected, onSelect, index, groupRef }) { const [hover, setHover] = useState(false); const locked = !!option.locked; let bg = 'var(--wiz-card)', border = '1px solid var(--wiz-card-border)', shadow = 'none'; if (locked) { bg = 'var(--wiz-locked-bg)'; border = '1px dashed var(--wiz-locked-border)'; } else if (selected) { bg = 'var(--wiz-select-bg)'; border = '1.5px solid var(--wiz-select)'; shadow = '0 0 0 3px color-mix(in oklch, var(--wiz-select) 16%, transparent)'; } else if (hover) { bg = 'var(--wiz-card-hover)'; border = '1px solid var(--border-2)'; } return React.createElement('div', { role: 'radio', 'aria-checked': selected ? 'true' : 'false', 'aria-disabled': locked ? 'true' : undefined, 'aria-label': option.label + ' — ' + option.qualifier, tabIndex: locked ? -1 : (selected ? 0 : -1), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: () => !locked && onSelect(option.key), onKeyDown: (e) => { if (locked) return; if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onSelect(option.key); } if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); groupRef.current && groupRef.current('next', index); } if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); groupRef.current && groupRef.current('prev', index); } }, className: 'wiz-focusable', style: { textAlign: 'left', cursor: locked ? 'not-allowed' : 'pointer', background: bg, border, boxShadow: shadow, borderRadius: 'var(--r-lg)', padding: 'var(--sp-4)', display: 'flex', flexDirection: 'column', gap: 6, minHeight: 104, transition: 'border-color 150ms ease, box-shadow 150ms ease', position: 'relative', flex: 1, }, }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 } }, React.createElement('span', { style: { fontWeight: 'var(--fw-label)', fontSize: '.92rem', color: locked ? 'var(--text-2)' : 'var(--text)', display: 'inline-flex', alignItems: 'center', gap: 6 }, }, locked && React.createElement(WIcon, { name: 'lock', size: 13, style: { color: 'var(--dim)' } }), option.label ), selected ? React.createElement('span', { style: { width: 22, height: 22, borderRadius: '50%', background: 'var(--wiz-select)', color: 'var(--on-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }, }, React.createElement(WIcon, { name: 'check', size: 14, stroke: 3 })) : (option.tooltip && !locked ? React.createElement(WTooltip, { text: option.tooltip, label: tx('page.wizardprim.mode_details_aria', { label: option.label }, '{label} details') }) : (locked && React.createElement(WTag, { label: option.locked.tag, kind: 'tier' }))) ), React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontWeight: 'var(--fw-mono-small)', fontSize: '.74rem', letterSpacing: '.02em', color: locked ? 'var(--dim)' : (selected ? 'var(--beam)' : 'var(--muted)') }, }, option.qualifier), option.detail && React.createElement('span', { style: { fontSize: '.78rem', color: 'var(--text-2)', lineHeight: 1.4, marginTop: 2 } }, option.detail) ); } function ModeSelectorGroup({ legend, options, selected, onSelect }) { const moveRef = useRef(null); moveRef.current = (dir, fromIdx) => { const order = options.map((o, i) => i).filter(i => !options[i].locked); const pos = order.indexOf(fromIdx); const nextPos = dir === 'next' ? (pos + 1) % order.length : (pos - 1 + order.length) % order.length; onSelect(options[order[nextPos]].key); }; return React.createElement('div', { role: 'radiogroup', 'aria-label': legend, style: { display: 'flex', gap: 'var(--sp-3)', flexWrap: 'wrap' } }, options.map((opt, i) => React.createElement(ModeCard, { key: opt.key, option: opt, index: i, groupRef: moveRef, selected: selected === opt.key, onSelect })) ); } /* ════════════════════════════════════════════════════════════════ 3 · IMPACT / SAVINGS STAT CARD ════════════════════════════════════════════════════════════════ */ function ImpactStatCard({ headline, unit, money, counters, showMoney = true, compact }) { return React.createElement('div', { className: 'wiz-card', style: { background: 'linear-gradient(135deg, var(--beam-dim), color-mix(in oklch, var(--green) 9%, transparent))', border: '1px solid color-mix(in oklch, var(--beam) 28%, var(--border))', borderRadius: 'var(--r-lg)', padding: compact ? 'var(--sp-5)' : 'var(--sp-6)', position: 'relative', overflow: 'hidden', }, }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--sp-3)' } }, React.createElement('span', { style: { width: 30, height: 30, borderRadius: 'var(--r-sm)', background: 'var(--beam-dim)', color: 'var(--beam)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }, }, React.createElement(WIcon, { name: 'clock', size: 17 })), React.createElement('span', { className: 'wiz-eyebrow' }, tx('page.wizardprim.time_saved', null, 'Time saved')) ), React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' } }, React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-stat-value)', fontSize: compact ? '2.4rem' : '3rem', lineHeight: 1, color: 'var(--text)', letterSpacing: '.01em' }, }, headline), React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '1rem', color: 'var(--muted)', fontWeight: 'var(--fw-mono)' } }, unit) ), showMoney ? React.createElement('div', { style: { marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: '.86rem', color: 'var(--green)', fontWeight: 'var(--fw-mono)' }, }, '\u2248 ', money, React.createElement('span', { style: { color: 'var(--muted)', fontWeight: 'var(--fw-regular)' } }, tx('page.wizardprim.at_your_rate', null, ' at your rate'))) : React.createElement('div', { style: { marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--dim)' }, }, React.createElement(WIcon, { name: 'eye-off', size: 13 }), tx('page.wizardprim.client_figure_hidden', null, 'Client $ figure hidden (role-gated)')), React.createElement('div', { style: { display: 'flex', gap: 'var(--sp-5)', flexWrap: 'wrap', marginTop: 'var(--sp-5)', paddingTop: 'var(--sp-4)', borderTop: '1px solid var(--border)' }, }, counters.map((c, i) => React.createElement('div', { key: i, style: { display: 'flex', flexDirection: 'column', gap: 2 } }, React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.15rem', color: 'var(--text)' } }, c.value), React.createElement('span', { className: 'wiz-eyebrow', style: { fontSize: '.6rem', letterSpacing: '.12em' } }, c.label) ))) ); } /* ════════════════════════════════════════════════════════════════ 5 · NOTICE / CALLOUT BOX — accent is a CSS var. ════════════════════════════════════════════════════════════════ */ function NoticeCard({ accent = 'var(--beam)', icon, eyebrow, title, body, tag, cta }) { return React.createElement('div', { className: 'wiz-card', style: { background: 'color-mix(in oklch, ' + accent + ' 9%, var(--surface))', border: '1px solid color-mix(in oklch, ' + accent + ' 32%, transparent)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)', display: 'flex', alignItems: 'flex-start', gap: 'var(--sp-4)', }, }, React.createElement('div', { style: { width: 40, height: 40, borderRadius: 'var(--r)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'color-mix(in oklch, ' + accent + ' 16%, transparent)', color: accent, border: '1px solid color-mix(in oklch, ' + accent + ' 30%, transparent)' }, }, React.createElement(WIcon, { name: icon, size: 21 })), React.createElement('div', { style: { flex: 1, minWidth: 0 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-2)', flexWrap: 'wrap', marginBottom: 4 } }, React.createElement('span', { style: { fontWeight: 'var(--fw-label)', fontSize: '.92rem', color: 'var(--text)' } }, title), tag && React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontWeight: 'var(--fw-tag)', fontSize: '.6rem', letterSpacing: '.06em', padding: '3px 8px', borderRadius: 999, whiteSpace: 'nowrap', color: accent, background: 'color-mix(in oklch, ' + accent + ' 13%, transparent)', border: '1px solid color-mix(in oklch, ' + accent + ' 30%, transparent)' }, }, tag)), React.createElement('p', { style: { margin: 0, fontSize: '.84rem', lineHeight: 1.45, color: 'var(--text-2)' } }, body), cta && React.createElement('button', { type: 'button', className: 'wiz-btn wiz-focusable', onClick: cta.onClick || (() => {}), style: { marginTop: 'var(--sp-3)', fontSize: '.72rem', padding: '7px 14px', color: accent, background: 'color-mix(in oklch, ' + accent + ' 13%, transparent)', border: '1px solid color-mix(in oklch, ' + accent + ' 35%, transparent)' }, }, cta.icon && React.createElement(WIcon, { name: cta.icon, size: 14 }), cta.label)) ); } const exports = { WTag, WTooltip, WToggle, ToggleCard, ModeCard, ModeSelectorGroup, ImpactStatCard, NoticeCard }; Object.assign(window, exports); // back-compat globals (cross-module refs) window.WPSB = window.WPSB || {}; window.WPSB.Wizard = Object.assign(window.WPSB.Wizard || {}, exports); console.log('[WPSB Wizard] Primitives loaded (4 primitives + shared bits).'); })();