);
}
// ── Modules column ──────────────────────────────────────────────────────────
function ModulesColumn({ modules, moduleGroups, selectedId, onSelect, onReorder, onDeleteModule, onDeleteGroup, onAddModuleClick }) {
const [dragId, setDragId] = React.useState(null);
const [overId, setOverId] = React.useState(null);
const handleDrop = (targetId) => {
if (!dragId || dragId === targetId) {setDragId(null);setOverId(null);return;}
const from = modules.findIndex((m) => m.id === dragId);
const to = modules.findIndex((m) => m.id === targetId);
if (from < 0 || to < 0) return;
const target = modules[to];
const next = modules.slice();
const [moved] = next.splice(from, 1);
// Dropped module inherits the target's chapter. Build a NEW object rather
// than mutating in place, so React sees the change and the group actually
// travels to onReorder (which persists it).
next.splice(to, 0, { ...moved, group: target.group ?? null });
onReorder && onReorder(next);
setDragId(null);setOverId(null);
};
// Drop a module ONTO A CHAPTER (its header or its body) to move it into that
// chapter, appended after its current modules. Without this the only drop
// targets were other module cards, so a module could not be filed into an
// empty or collapsed chapter at all — the case Omar hit with a module created
// outside any chapter (fixed 2026-07-26).
const handleDropOnGroup = (groupId) => {
if (!dragId) {setDragId(null);setOverId(null);return;}
const from = modules.findIndex((m) => m.id === dragId);
if (from < 0) {setDragId(null);setOverId(null);return;}
const target = groupId === '_' ? null : groupId;
const next = modules.slice();
const [moved] = next.splice(from, 1);
// Insert after the last module already in that chapter, so the drop lands
// where the chapter visually ends rather than jumping to the top.
let insertAt = next.length;
for (let i = next.length - 1; i >= 0; i--) {
if ((next[i].group ?? null) === target) { insertAt = i + 1; break; }
}
next.splice(insertAt, 0, { ...moved, group: target });
onReorder && onReorder(next);
setDragId(null);setOverId(null);
};
// Build group buckets in the order groups are declared. Modules without a
// group are collected into an ‘(Ungrouped)’ bucket at the bottom — only
// rendered if non-empty, so single-track courses look unchanged.
const groups = (moduleGroups || []).map((g) => ({
...g, modules: modules.filter((m) => m.group === g.id)
}));
const ungrouped = modules.filter((m) => !m.group);
// Render the "(Ungrouped)" bucket when it has members OR while a module is
// being dragged: it is the only drop target that clears a module's chapter, so
// hiding it made filing a module into a chapter a ONE-WAY trip with no way
// back out (fixed 2026-07-27).
if (ungrouped.length || dragId) {
groups.push({ id: '_', title: '(Ungrouped)', modules: ungrouped });
}
return (
{groups.map((g, gi) =>
)}
);
}
function ModuleGroupBlock({ group, isFirst, selectedId, dragId, overId, onSelect,
setDragId, setOverId, handleDrop, handleDropOnGroup, onDeleteModule, onDeleteGroup }) {
const [collapsed, setCollapsed] = React.useState(false);
const [confirmDel, setConfirmDel] = React.useState(false);
const showGroupChrome = group.id !== '_';
// True while a module is being dragged over this chapter (but not over one of
// its own module cards, which handle their own drop for precise ordering).
const [groupDragOver, setGroupDragOver] = React.useState(false);
const draggedFromElsewhere = !!dragId && !group.modules.some((m) => m.id === dragId);
// Accepting the drop anywhere on the chapter — header, padding, or empty body.
const groupDropProps = {
onDragOver: (e) => {
// Only advertise a drop when one would actually happen — i.e. the module
// comes from ANOTHER chapter. Dragging within this chapter is the module
// cards' business (precise ordering); claiming it here moved the module to
// the end of the chapter with no feedback at all.
if (!dragId || !draggedFromElsewhere) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setGroupDragOver(true);
},
onDragLeave: (e) => {
// dragleave also fires when the pointer crosses a CHILD element, which
// made the highlight flicker. Ignore those: only clear when the pointer
// truly leaves this chapter's box.
if (e && e.currentTarget && e.relatedTarget &&
e.currentTarget.contains(e.relatedTarget)) return;
setGroupDragOver(false);
},
onDrop: (e) => {
if (!dragId || !draggedFromElsewhere) return;
e.preventDefault();
e.stopPropagation();
setGroupDragOver(false);
handleDropOnGroup && handleDropOnGroup(group.id);
},
};
const highlight = groupDragOver && draggedFromElsewhere;
const KebabMenu = window.KebabMenu;
const ConfirmDialog = window.ConfirmDialog;
return (
{/* An empty chapter would otherwise be a sliver with nothing to aim
at, so give the drag somewhere obvious to land. */}
{group.modules.length === 0 &&
{draggedFromElsewhere ? 'Drop to move into this chapter' : 'No modules yet'}
}
{group.modules.map((m, i) =>
{i > 0 &&
}
onSelect(m.id)}
onDelete={onDeleteModule}
onDragStart={() => setDragId(m.id)}
onDragOver={(e) => {e.preventDefault();setOverId(m.id);}}
onDragLeave={() => {if (overId === m.id) setOverId(null);}}
onDrop={(e) => {
// A card drop is the PRECISE one (drop before/after this module), so
// it must not also bubble to the chapter-level drop, which would
// re-file the module at the end of the chapter and undo the order.
if (e) { e.preventDefault(); e.stopPropagation(); }
setGroupDragOver(false);
handleDrop(m.id);
}}
onDragEnd={() => {setDragId(null);setOverId(null);}} />
)}
{/* ── Module preview ────────────────────────────────────────────────
Omar, 2026-08-13: *"add a button 'Module preview' … I'm not sure where
to position the button as I don't want to add a new row and I want to
avoid to confuse it with the Course preview button."*
★ IT LIVES HERE BECAUSE THIS CARD *IS* THE MODULE. The card carries the
chapter breadcrumb, the `M2` badge, the module's title, summary and
thumbnail — so a button inside it is read as acting on this module
before its label is even read. Scope comes from containment far more
reliably than from wording. Course preview stays in the app's top
chrome, which owns the org, the course title and the course's AI spend.
Four things keep the two apart, none of which is the label alone:
· CONTAINER — inside the module's own card vs. the app header band.
· WEIGHT — this is a ghost button, deliberately the QUIETEST thing in
the row. Course preview is the only filled one in the app.
· HUE — `#A53E53` as TEXT here, as a FILL up there: same family,
unmistakably different rank.
· RANK — it sits LEFT of "+ Add layout", which stays rightmost because
it is the module's primary action and already has that muscle
memory. The divider marks them as separate concerns rather than a
pair (`feedback_no_false_affordance_toggles`).
No new row: it joins the row the title and "+ Add layout" already share.
The label is the full "Module preview" rather than a bare eye icon. An
icon-only twin of a button that also exists in the header is exactly how
two scopes get confused, and this is the one that needs saying out loud. */}
onAddLayout && onAddLayout(module.id, type)} />
);
}
// ── Module thumbnail ─────────────────────────────────────────────────────────
// The module image, emitted as `` in content.xml.
//
// REAL as of campaign Stage 2 (backlog item 3). Until then this control set the
// value to a fabricated path — `modules/m1/image.jpg` — for a file that was never
// uploaded and never existed: a false affordance that looked like a bound image
// and shipped a 404 (or, once `thumbnailUrl` reached the export, an unresolved
// asset). It now does the same real presigned upload as every other media slot
// (`window.uploadAsset` → `asset://`), shows the actual picture, and reports a
// failure instead of silently leaving the tile bound.
//
// The chain this completes: here → `buildModule` (surface-export.jsx) →
// `thumbnailUrl` in PREFIXED_MEDIA_FIELDS (asset-inline.ts) → ``
// (emit-content-xml.ts) → the bytes in the ZIP.
// GENERALISED + PUBLISHED 2026-08-12 (Phase 4d). Phase 4d needed a per-organisation
// logo slot, and this app already had FOUR image-upload controls (`MediaSlot`,
// `BackgroundPicker`, `CompanionSlot`, this one). A fifth hand-copy is how they
// quietly stop behaving alike — the same reasoning that produced the shared
// `DraftSaveButton` and `RetranslateButton`
// (`feedback_a_test_double_that_reimplements_drifts`).
//
// THIS one is the model rather than `CompanionSlot` for a specific reason:
// `CompanionSlot` swallows an upload failure into `console.error` and leaves the
// slot looking unchanged, so the author believes the image is set. This one shows
// "Upload failed · tap to retry" (`feedback_honest_gates_over_standins`).
//
// `moduleId` was accepted and never read; dropped rather than carried forward.
// Every prop below defaults to the module-thumbnail behaviour, so the existing
// call site is unchanged.
function ImageUploadSlot({ value, onChange, label = 'Add image', hint = '16 : 9',
title = 'Add module image', width = 104, minHeight = 64, fit = 'cover',
// Opt-in cap on the longest edge, applied before the upload. Off by default: a
// module image or a background fills a large area, and shrinking those would throw
// away pixels the learner sees. Only a caller that KNOWS how small its target box is
// — the organisation logo, drawn in at most ~164×82 CSS px — should set it.
maxEdge = null }) {
const [busy, setBusy] = React.useState(false);
const [error, setError] = React.useState(null);
const [preview, setPreview] = React.useState(null);
const fileRef = React.useRef(null);
const courseId = window.dynamoCourseId;
// `asset://` is opaque and the bucket is private — resolve it to something
// an can load (a blob URL from this session, else a signed GET).
React.useEffect(() => {
let alive = true;
if (!value) { setPreview(null); return () => { alive = false; }; }
Promise.resolve(window.resolveAssetUrl ? window.resolveAssetUrl(value) : value)
.then(url => { if (alive) setPreview(url || null); })
.catch(() => { if (alive) setPreview(null); });
return () => { alive = false; };
}, [value]);
const pick = async (e) => {
const file = e.target.files && e.target.files[0];
e.target.value = ''; // allow re-picking the same file
if (!file) return;
setBusy(true); setError(null);
try {
// Downscale-only, and it returns the original file unchanged on any failure —
// so this can cost bytes, never the upload itself.
const toUpload = maxEdge && window.shrinkImageFile
? await window.shrinkImageFile(file, maxEdge)
: file;
const ref = await window.uploadAsset(courseId, toUpload, 'image');
onChange && onChange(ref);
} catch (err) {
// Say so. A silent failure here left the author believing the image was set.
setError((err && err.message) || 'upload failed');
} finally {
setBusy(false);
}
};
const shell = {
position: 'relative', width, flexShrink: 0, minHeight, borderRadius: 6,
overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--surface-inset)',
};
if (value) {
return (
: