// Surface 3 — Layout editor (the workhorse).
// Left column (~70%): per-layout edit form
// Right column (~30%): Section context, anecdotes, other suggestions
function SurfaceLayoutEditor({ course, selectedLayoutId, onChangeLayoutType, onBack,
onChangeLayoutStatus, onSelectLayout, draft: externalDraft, onChangeDraft, allDrafts,
gamingQuizEnabled = false, dftiFlow, onChangeDftiFlow }) {
// Find the selected layout across modules
let module = null, layout = null;
course.modules.forEach(m => {
m.layouts.forEach(l => { if (l.id === selectedLayoutId) { module = m; layout = l; } });
});
if (!layout) { module = course.modules[1]; layout = module.layouts[2]; }
// `layoutType` is a DISPLAY id (drives the dropdown). For hidden_items it is
// a flat/360° display id; the value written to the data is the CANONICAL type
// (canonicalLayoutType) — hidden_items is UI sugar (Fix 4). Initialise from
// the existing draft if present (so a 360° layout re-opens on the 360° id),
// else from the architecture entry.
const initialDisplayType = window.displayLayoutType(externalDraft && externalDraft.type
? externalDraft : layout) || layout.type;
const [layoutType, setLayoutType] = React.useState(initialDisplayType);
const canon = window.canonicalLayoutType(layoutType);
const status = layout.status;
const setStatus = React.useCallback((next) => {
if (onChangeLayoutStatus) onChangeLayoutStatus(layout.id, next);
}, [onChangeLayoutStatus, layout.id]);
// Draft: the editable layout data. Seeded from sample-content + inline layout
// fields; persists at the app level so the Module preview and PreviewPane
// mirror the same edits. `type` is canonicalised so the stored data never
// carries a hidden_items display id.
const seed = React.useMemo(() => ({
...(window.LAYOUT_CONTENT_SAMPLES?.[layoutType] || {}),
...(layout || {}),
type: window.canonicalLayoutType(layoutType),
}), [layout, layoutType]);
// IMPORTANT: render against a draft whose `.type` matches the current
// `layoutType` (canonically). If the user just swapped types via the
// dropdown, the app-level draft still holds the *previous* type's shape until
// the effect below pushes the new seed. Falling back to `seed` for that one
// render ensures uncontrolled children (e.g. BackgroundPicker's mode/color
// state) never mount against a stale shape.
const draft = (externalDraft && externalDraft.type === canon)
? externalDraft
: seed;
// Track the display id we last seeded for, so a flat↔360° switch (same
// canonical type) still re-seeds with the right media field.
const seededFor = React.useRef(null);
React.useEffect(() => {
// Persist the seed up to the app whenever it diverges from the stored
// draft — on entering the editor, on a canonical type change, OR on a
// flat↔360° display switch that keeps the canonical type the same.
const displayChanged = seededFor.current != null && seededFor.current !== layoutType;
if (!externalDraft || externalDraft.type !== canon || displayChanged) {
onChangeDraft?.(seed);
}
seededFor.current = layoutType;
}, [layoutType, externalDraft, seed, canon, onChangeDraft]);
// Keep a ref to the latest draft so multiple setPath / setField calls
// inside the same event handler ACCUMULATE instead of clobbering each
// other. Without this, e.g. switching a row from Image → Video (which
// writes videoUrl + videoThumbUrl + clears imageUrl in sequence) would
// silently drop all but the last write, since each closure read the
// pre-update draft and the parent re-render hadn't happened yet.
const draftRef = React.useRef(draft);
draftRef.current = draft;
const commit = React.useCallback((next) => {
draftRef.current = next;
onChangeDraft?.(next);
}, [onChangeDraft]);
const setField = React.useCallback((k, v) => {
commit({ ...draftRef.current, [k]: v });
}, [commit]);
const setPath = React.useCallback((path, v) => {
commit(setAtPath(draftRef.current, path, v));
}, [commit]);
const ctx = window.SAMPLE_SECTION_CONTEXT;
return (
{/* ── Left column · Editor ─────────────────────────────────── */}
{/* Gaming quiz disabled at course level — see Course settings.
The layout still exists in the architecture; this ribbon warns the
author it can't be edited/exported until the master switch is on. */}
{layoutType === 'quiz_gaming' && !gamingQuizEnabled && (
)}
{/* The per-type editor handles its own controls (Title/Subtitle
presence varies per the catalogue). `courseValue` / `onCourseChange`
expose the shared course-level slice — only quiz_gaming's Profile
form tab consumes them; every other editor ignores them. */}
{/* ── Right column · Module preview ────────────────────────── */}
);
}
// ── Gaming-quiz-disabled ribbon — shown on an existing quiz_gaming layout when
// ── the course-level master switch (Course settings) is off.
function GamingQuizDisabledRibbon() {
return (
Gaming quiz disabled at course level.{' '}
Re-enable the gaming quiz flow in Course settings to edit this layout.
);
}
// ── Header for the layout editor ────────────────────────────────────────────
function LayoutEditorHeader({ module, layout, layoutType, status, onChangeStatus, onChangeType, course, gamingQuizEnabled, onBack }) {
return (
{items.map(t => {
const Ti = I[t.icon] || I.Hash;
const active = current === t.id;
// Gaming quiz is gated by the course-level master switch
// (Course settings · Gaming quiz flow). When off, it stays
// visible but un-pickable with an explanatory tooltip — unless
// this layout is already that type (so the author isn't locked
// out of the row they're on).
const lockedGaming = t.id === 'quiz_gaming' && !gamingQuizEnabled && !active;
return (
);
})}
))}
Switching may lose fields that don't migrate
)}
);
}
// ── EditorBlock — section header inside the editor ─────────────────────────
function EditorBlock({ label, count, action, children }) {
return (