// Field widgets — small editable primitives every layout editor uses. // All are CONTROLLED (value + onChange) so the layout editor's draft is the // single source of truth and the PlayerPreview can mirror live. // ─── ColorField ──────────────────────────────────────────────────────────── // Native color picker + hex input + a quick palette pop-out. function ColorField({ label, value = '#000000', onChange, palette }) { const [open, setOpen] = React.useState(false); const hex = normaliseHex(value); return (
{label && {label}}
)}
); } const DEFAULT_PALETTE = [ '#000000','#ffffff','#0f172a','#1e293b','#475569','#94a3b8','#cccccc','#f1f5f9', '#dc2626','#ea580c','#d97706','#16a34a','#0e7490','#2563eb','#7c3aed','#db2777', '#fef3c7','#dbeafe','#dcfce7','#fee2e2','#fce7f3','#e0e7ff','#fed7aa','#bbf7d0', '#FFD166','#F26430','#D32F2F','#3b82f6', ]; function normaliseHex(v) { if (!v || typeof v !== 'string') return '#000000'; if (v.startsWith('#')) { if (v.length === 4) return '#' + v.slice(1).split('').map(c => c+c).join(''); if (v.length === 7) return v; } // Named colours / rgba — fall back to a neutral so the native picker doesn't // crash. The text input still shows the original value. return '#000000'; } // ─── GateControl ─────────────────────────────────────────────────────────── // The blockingSection 3-state — true | false | (empty). Three-position segmented. function GateControl({ value, onChange }) { const states = [ { id: 'true', label: 'Required', icon: 'Lock', hint: 'Learner must complete this screen before continuing' }, { id: 'false', label: 'Optional', icon: 'ChevronDown', hint: 'Arrow always available; completion not required' }, { id: '', label: 'No gate', icon: 'Minus', hint: 'No gate — the layout doesn\u2019t block; the learner can move on immediately' }, ]; return (
{states.map(s => { const sel = (value || '') === s.id; const Ic = I[s.icon] || I.Circle; return ( ); })}
); } // ─── Toggle (controlled Switch) ──────────────────────────────────────────── function Toggle({ value, onChange }) { const v = !!value; return ( ); } // ─── TextField ───────────────────────────────────────────────────────────── function TextField({ value, onChange, placeholder, mono, style }) { return ( onChange?.(e.target.value)} style={{ width: '100%', fontFamily: mono ? 'var(--font-mono)' : 'inherit', ...(style || {}), }} /> ); } // ─── NumberField ─────────────────────────────────────────────────────────── function NumberField({ value, onChange, min, max, suffix, style }) { return (
onChange?.(e.target.value === '' ? null : +e.target.value)} style={{ width: 70, fontFamily: 'var(--font-mono)', ...(style || {}) }} /> {suffix && {suffix}}
); } // ─── SegmentedControl ────────────────────────────────────────────────────── function SegmentedControl({ value, onChange, options }) { // options: [{ id, label, icon? }] return (
{options.map(o => { const sel = value === o.id; const Ic = o.icon ? (I[o.icon] || null) : null; return ( ); })}
); } // ─── ControlledLocalized — wraps LocalizedStringEditor with explicit value // ─── (so the editor draft owns the data, not the widget's internal state). function ControlledLocalized({ label, value, onChange, languages = ['en','it'], multiline }) { // `value` is a LocalizedString — a per-language object { [lang]: string } // (a legacy flat string is auto-upgraded on first edit). The widget shows a // SINGLE input bound to the course's default language; editing writes only // that slot and preserves every other language. Translation visibility lives // on the Localisation surface, never here (no badges, no language picker). const lang = React.useContext(LocDefaultLangContext) || 'en'; const str = locText(value, lang); const emit = (s) => onChange?.(locSet(value, lang, s)); return (
{label &&
{label}
} {multiline ?