// curriculum.jsx — Curriculum: master catalog (Course×Pace×Stream) + per-class teaching order // See docs/superpowers/specs/2026-05-24-curriculum-scope-sequence-design.md // Default catalogs & classes live in components/curriculum-data.js (CURRICULUM_SEED / CURR_CLASSES_SEED), // loaded BEFORE this file. localStorage holds the working edits; "Export" regenerates that data file. // Aliased hooks (each file must alias to avoid global-scope redeclaration). const { useState: useCur, useEffect: useCurEffect, useRef: useCurRef } = React; // ── Booklet types ───────────────────────────────────────────── const CURR_TYPES = { 'Lesson': { label: 'LESSON', bg: 'var(--bg-elevated)', fg: 'var(--text-secondary)', accent: null, exam: false }, 'Topic Test': { label: 'TOPIC TEST', bg: '#C9821F', fg: '#fff', accent: '#C9821F', exam: false }, 'Mini Mock Trials': { label: 'MINI MOCK', bg: '#5C93B8', fg: '#fff', accent: '#4A8BB2', exam: true }, 'Mock Trials': { label: 'MOCK TRIALS', bg: '#3F7CA0', fg: '#fff', accent: '#4A8BB2', exam: true }, 'Mock HSC': { label: 'MOCK HSC', bg: '#2E5D78', fg: '#fff', accent: '#4A8BB2', exam: true }, }; const CURR_TYPE_LIST = Object.keys(CURR_TYPES); const isExamType = t => CURR_TYPES[t] && CURR_TYPES[t].exam; const CURR_COURSES = ['YR10', 'STND', 'ADVN', 'EXT1', 'EXT2']; const CURR_PACES = ['REG', 'ACC']; const CURR_STREAMS = ['A1', 'B1', 'C1']; const catKey = (course, pace, stream) => `${course}|${pace}|${stream}`; // ── Persistence (localStorage working copy; default seed from curriculum-data.js) ── const CURR_LS_KEY = 'tm_curriculum_v1'; function loadCurriculum() { try { const raw = localStorage.getItem(CURR_LS_KEY); if (raw) { const p = JSON.parse(raw); if (p && p.curriculum && p.classes) return p; } } catch (e) {} return { curriculum: JSON.parse(JSON.stringify(CURRICULUM_SEED)), classes: JSON.parse(JSON.stringify(CURR_CLASSES_SEED)) }; } function saveCurriculum(state) { try { localStorage.setItem(CURR_LS_KEY, JSON.stringify(state)); } catch (e) {} } // ── Derivation helpers ──────────────────────────────────────── const bookletCode = (cat, i) => `${cat.course}-${cat.pace}-${cat.stream}-${i + 1}`; const letterFor = i => String.fromCharCode(65 + i); let _newSeq = 0; const newBookletId = () => `new-${Date.now().toString(36)}-${_newSeq++}`; // Course → palette colour (STND maps to the STD teal); tint helper for soft pills. const curCourseColor = c => SUBJECT_COLORS[c === 'STND' ? 'STD' : c] || '#4A9B7E'; function hexToRgba(hex, a) { if (typeof hex !== 'string' || hex[0] !== '#') return hex; const h = hex.length === 4 ? hex.slice(1).split('').map(c => c + c).join('') : hex.slice(1); const n = parseInt(h, 16); return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`; } function seriesMap(booklets) { const totals = {}; booklets.forEach(b => { if (b.type === 'Lesson') { const k = b.strand + '|' + b.title; totals[k] = (totals[k] || 0) + 1; } }); const seen = {}, out = {}; booklets.forEach(b => { if (b.type === 'Lesson') { const k = b.strand + '|' + b.title; const n = (seen[k] || 0); seen[k] = n + 1; out[b.id] = { letter: letterFor(n), pos: n + 1, total: totals[k] }; } else out[b.id] = null; }); return out; } function topicRuns(booklets) { const runs = []; let cur = null; booklets.forEach((b, idx) => { const key = b.strand + '|' + b.title; if (!cur || cur.key !== key) { cur = { key, strand: b.strand, title: b.title, items: [], startIdx: idx }; runs.push(cur); } cur.items.push({ b, idx }); }); const counts = {}; runs.forEach(r => counts[r.key] = (counts[r.key] || 0) + 1); runs.forEach(r => r.split = counts[r.key] > 1); return runs; } function moveRange(arr, start, count, target) { const a = arr.slice(); const seg = a.splice(start, count); let t = target; if (t > start) t -= count; a.splice(t, 0, ...seg); return a; } const matchesFilter = (type, filter) => filter === 'All' || (filter === 'Lessons' && type === 'Lesson') || (filter === 'Tests' && type === 'Topic Test') || (filter === 'Exams' && isExamType(type)); function classRows(cat, cls) { const byId = {}; cat.booklets.forEach((b, i) => byId[b.id] = { b, idx: i }); if (!cls.order) return { rows: cat.booklets.map(b => ({ b, status: 'normal' })), skipped: [], tailored: false, nChanges: 0 }; const rows = cls.order.map(o => { if (o.custom) return { b: o.custom, status: 'added' }; const found = byId[o.ref]; return found ? { b: found.b, status: o.moved ? 'moved' : 'normal', fromIdx: found.idx } : null; }).filter(Boolean); const skipped = (cls.skipped || []).map(id => byId[id] && byId[id].b).filter(Boolean); const nChanges = rows.filter(r => r.status === 'moved' || r.status === 'added').length + skipped.length; return { rows, skipped, tailored: true, nChanges }; } function lisIndices(arr) { const n = arr.length; if (!n) return new Set(); const len = new Array(n).fill(1), prev = new Array(n).fill(-1); let best = 0; for (let i = 0; i < n; i++) { for (let j = 0; j < i; j++) if (arr[j] < arr[i] && len[j] + 1 > len[i]) { len[i] = len[j] + 1; prev[i] = j; } if (len[i] > len[best]) best = i; } const s = new Set(); let k = best; while (k !== -1) { s.add(k); k = prev[k]; } return s; } function movedSetFor(cat, refIds) { const dIdx = {}; cat.booklets.forEach((b, i) => dIdx[b.id] = i); const pos = refIds.map(id => dIdx[id] == null ? 1e9 : dIdx[id]); const keep = lisIndices(pos); const moved = new Set(); refIds.forEach((id, i) => { if (!keep.has(i)) moved.add(id); }); return moved; } // ════════════════════════════════════════════════════════════════ // COMPONENTS // ════════════════════════════════════════════════════════════════ function TypeBadge({ type, mini }) { const t = CURR_TYPES[type] || CURR_TYPES['Lesson']; return {t.label}; } function CodeChip({ cat, idx }) { const code = bookletCode(cat, idx); const tail = String(idx + 1); return {code.slice(0, -tail.length)}{tail}; } // ── Catalog view ────────────────────────────────────────────── function CatalogView({ cat, dispatch, openEdit, openAdd }) { const [collapsed, setCollapsed] = useCur({}); const [drag, setDrag] = useCur(null); const [over, setOver] = useCur(null); const series = seriesMap(cat.booklets); const runs = topicRuns(cat.booklets); const courseTint = curCourseColor(cat.course); const filter = 'All'; // type filters removed — always show every lesson const locked = false; // (no filter lock — reordering always enabled) const toggle = k => setCollapsed(c => ({ ...c, [k]: !c[k] })); const setAll = val => { const next = {}; runs.forEach(r => next[r.startIdx] = val); setCollapsed(next); }; const clearDrag = () => { setDrag(null); setOver(null); }; const onDropBooklet = idx => { if (!drag) return; const line = over && over.idx === idx ? over.line : 'before'; dispatch.reorder(drag.start, drag.count, line === 'before' ? idx : idx + 1); clearDrag(); }; const onDropTopic = run => { if (!drag) return; const line = over && over.topic === run.startIdx ? over.line : 'before'; dispatch.reorder(drag.start, drag.count, line === 'before' ? run.startIdx : run.startIdx + run.items.length); clearDrag(); }; const overLine = isOver => isOver ? { boxShadow: `inset 0 ${over.line === 'before' ? 3 : -3}px 0 0 #4A9B7E` } : null; return (
Topics
{runs.map(run => (
{ setCollapsed(c => ({ ...c, [run.startIdx]: false })); const el = document.getElementById('curtopic-' + run.startIdx); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }} style={{ display: 'flex', alignItems: 'center', gap: '7px', padding: '5px 8px', borderRadius: '6px', cursor: 'pointer', fontSize: '11.5px' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> {run.title} #{run.items[0].idx + 1}
))}
{cat.booklets.length} lessons
{runs.map(run => { const isC = !!collapsed[run.startIdx]; const lessons = run.items.filter(x => x.b.type === 'Lesson').length; const tests = run.items.filter(x => x.b.type === 'Topic Test').length; const exams = run.items.filter(x => isExamType(x.b.type)).length; const visItems = run.items.filter(x => matchesFilter(x.b.type, filter)); if (locked && visItems.length === 0) return null; const topicOver = over && over.topic === run.startIdx; return (
!locked && setDrag({ kind: 'topic', start: run.startIdx, count: run.items.length })} onDragOver={e => { if (!drag || drag.kind !== 'topic') return; e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); setOver({ topic: run.startIdx, line: (e.clientY - r.top) < r.height / 2 ? 'before' : 'after' }); }} onDrop={() => drag && drag.kind === 'topic' && onDropTopic(run)} onDragEnd={clearDrag} onClick={() => toggle(run.startIdx)} style={{ display: 'flex', alignItems: 'center', gap: '9px', padding: '9px 13px', cursor: 'pointer', background: 'var(--bg-surface-muted)', opacity: drag && drag.kind === 'topic' && drag.start === run.startIdx ? 0.4 : 1 }}> {!locked && ⠿} {run.title} {run.split && ⚡ split topic} Syllabus: {run.strand} {!!lessons && {lessons} booklet{lessons > 1 ? 's' : ''}} {!!tests && {tests} test} {!!exams && {exams} exam{exams > 1 ? 's' : ''}} #{run.items[0].idx + 1}–{run.items[run.items.length - 1].idx + 1}
{!isC && (
{run.items.map(({ b, idx }) => { if (!matchesFilter(b.type, filter)) return null; const s = series[b.id]; const t = CURR_TYPES[b.type] || CURR_TYPES['Lesson']; const isDragged = drag && drag.kind === 'booklet' && drag.start === idx; const isOver = over && over.idx === idx && drag && drag.kind === 'booklet'; return (
{ if (locked) return; e.stopPropagation(); setDrag({ kind: 'booklet', start: idx, count: 1 }); }} onDragOver={e => { if (!drag || drag.kind !== 'booklet') return; e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); setOver({ idx, line: (e.clientY - r.top) < r.height / 2 ? 'before' : 'after' }); }} onDrop={() => drag && drag.kind === 'booklet' && onDropBooklet(idx)} onDragEnd={clearDrag} onClick={() => openEdit(b.id)} style={{ display: 'grid', gridTemplateColumns: '20px 28px minmax(150px, 230px) 1fr 56px 110px', gap: '10px', alignItems: 'center', cursor: 'pointer', padding: '7px 13px', borderTop: '1px solid var(--border-soft)', borderLeft: `3px solid ${t.accent || 'transparent'}`, fontSize: '12px', opacity: isDragged ? 0.4 : 1, ...(isOver ? overLine(true) : null) }}> {locked ? '' : '☰'} {s ? s.letter : '–'} {b.type !== 'Lesson' && } {b.subtitle} {b.content} {s ? `${s.pos}/${s.total}` : '–'}
); })} {!locked &&
openAdd(run.items[run.items.length - 1].idx, run.strand, run.title)} style={{ padding: '6px 13px 6px 40px', fontSize: '11.5px', color: '#4A9B7E', cursor: 'pointer', borderTop: '1px solid var(--border-soft)' }}>+ Lesson
}
)}
); })} {!locked &&
dispatch.addTopic()} style={{ margin: '4px 0', padding: '9px', textAlign: 'center', border: '1px dashed var(--border-default)', borderRadius: '8px', color: 'var(--text-muted)', cursor: 'pointer', fontSize: '12px' }}>+ Add topic
}
); } // ── Teaching-order view ─────────────────────────────────────── function TeachingOrderView({ cat, dispatch }) { const [drag, setDrag] = useCur(null); const [over, setOver] = useCur(null); const series = seriesMap(cat.booklets); const clearDrag = () => { setDrag(null); setOver(null); }; const onDrop = idx => { if (drag == null) return; const line = over && over.idx === idx ? over.line : 'before'; dispatch.reorder(drag, 1, line === 'before' ? idx : idx + 1); clearDrag(); }; return (
The company default sequence. Drag a booklet anywhere — a topic can be split across the year (it shows ⚡ in the Catalog view). Codes follow position.
{cat.booklets.map((b, idx) => { const prev = cat.booklets[idx - 1]; const newTopic = !prev || (prev.strand + '|' + prev.title) !== (b.strand + '|' + b.title); const s = series[b.id]; const t = CURR_TYPES[b.type] || CURR_TYPES['Lesson']; const isOver = over && over.idx === idx; return (
setDrag(idx)} onDragOver={e => { if (drag == null) return; e.preventDefault(); const r = e.currentTarget.getBoundingClientRect(); setOver({ idx, line: (e.clientY - r.top) < r.height / 2 ? 'before' : 'after' }); }} onDrop={() => onDrop(idx)} onDragEnd={clearDrag} style={{ display: 'grid', gridTemplateColumns: '20px 34px 150px 1fr 150px 116px', gap: '10px', alignItems: 'center', padding: '7px 13px', borderTop: newTopic && idx > 0 ? '2px solid var(--border-default)' : '1px solid var(--border-soft)', marginTop: newTopic && idx > 0 ? '3px' : 0, borderLeft: `3px solid ${t.accent || 'transparent'}`, fontSize: '12px', background: 'var(--bg-surface)', opacity: drag === idx ? 0.4 : 1, ...(isOver ? { boxShadow: `inset 0 ${over.line === 'before' ? 3 : -3}px 0 0 #4A9B7E` } : null) }}> ☰ {idx + 1} {b.type !== 'Lesson' ? : {s ? s.letter : ''}} {b.title} {b.subtitle} · {b.content} {b.strand}
); })}
); } // ── Read-only compare list ──────────────────────────────────── function CompareList({ cat, rows, series, idxOf, annotate }) { let prevTopic = null; return (
{rows.map((r, i) => { const b = r.b; const topicKey = b.strand + '|' + b.title; const newTopic = i > 0 && topicKey !== prevTopic; prevTopic = topicKey; const s = series[b.id]; const t = CURR_TYPES[b.type] || CURR_TYPES['Lesson']; const accent = r.status === 'moved' ? '#C9821F' : r.status === 'added' ? '#4A9B7E' : (t.accent || 'transparent'); return (
{i + 1} {s ? s.letter : (r.status === 'added' ? '＋' : '–')} {annotate && r.status === 'moved' && MOVED} {annotate && r.status === 'added' && ADDED} {r.status !== 'added' && b.type !== 'Lesson' && } {b.title} · {b.subtitle} {annotate && r.status === 'moved' && ↑ from #{r.fromIdx + 1}} {b.content} {r.status === 'added' ? 'custom' : }
); })}
); } function SideBySide({ cat, sel, info }) { const skipped = new Set(sel.skipped || []); const movedIds = new Set((sel.order || []).filter(o => o.moved).map(o => o.ref)); const col = (title, children) =>
{title}
{children}
; const line = (key, pos, text, opts = {}) =>
{pos} {text}
; return (
{col('Default order', cat.booklets.map((b, i) => line(b.id, i + 1, `${b.title} · ${b.subtitle}`, { grey: skipped.has(b.id), accent: movedIds.has(b.id) ? '#C9821F' : null })))} {col(sel.name, info.rows.map((r, i) => line('c' + i, i + 1, (r.status === 'added' ? '＋ ' : '') + `${r.b.title} · ${r.b.subtitle}` + (r.status === 'moved' ? ` ↑#${r.fromIdx + 1}` : ''), { accent: r.status === 'moved' ? '#C9821F' : r.status === 'added' ? '#4A9B7E' : null })))}
); } // ── Class editor ────────────────────────────────────────────── function ClassEditor({ cat, draft, skipped, series, onReorder, onSkip, onRestore, onRemoveCustom }) { const [dragI, setDragI] = useCur(null); const [overI, setOverI] = useCur(null); const [confirm, setConfirm] = useCur(null); // { i, name, kind } — pending removal confirmation const skippedBooklets = skipped.map(id => cat.booklets.find(b => b.id === id)).filter(Boolean); return (
{draft.map((e, i) => { const b = e.kind === 'custom' ? e.booklet : cat.booklets.find(x => x.id === e.id); if (!b) return null; const s = e.kind === 'ref' ? series[b.id] : null; const isOver = overI && overI.i === i; return (
setDragI(i)} onDragOver={ev => { if (dragI == null) return; ev.preventDefault(); const r = ev.currentTarget.getBoundingClientRect(); setOverI({ i, line: (ev.clientY - r.top) < r.height / 2 ? 'before' : 'after' }); }} onDrop={() => { if (dragI == null) return; const line = overI && overI.i === i ? overI.line : 'before'; onReorder(dragI, line === 'before' ? i : i + 1); setDragI(null); setOverI(null); }} onDragEnd={() => { setDragI(null); setOverI(null); }} style={{ display: 'grid', gridTemplateColumns: '20px 28px 1fr 150px 60px', gap: '10px', alignItems: 'center', padding: '7px 13px', borderTop: '1px solid var(--border-soft)', borderLeft: `3px solid ${e.kind === 'custom' ? '#4A9B7E' : 'transparent'}`, fontSize: '12px', background: 'var(--bg-surface)', opacity: dragI === i ? 0.4 : 1, ...(isOver ? { boxShadow: `inset 0 ${overI.line === 'before' ? 3 : -3}px 0 0 #4A9B7E` } : null) }}> ☰ {s ? s.letter : (e.kind === 'custom' ? '＋' : '–')} {e.kind === 'custom' && CUSTOM} {e.kind === 'ref' && b.type !== 'Lesson' && } {b.title} · {b.subtitle} {b.content}
); })}
{skippedBooklets.length > 0 && (
Skipped / deferred
{skippedBooklets.map(b => (
⊘ {b.title} · {b.subtitle} onRestore(b.id)} style={{ marginLeft: 'auto', color: '#4A9B7E', cursor: 'pointer', fontWeight: 600 }}>+ restore
))}
)} {confirm && ( setConfirm(null)} title="Remove lesson from schedule?" width={410}>
Remove {confirm.name} from this class’s teaching order? {confirm.kind === 'custom' ? ' This is a custom lesson — it can’t be restored once removed.' : ' It will move to Skipped / deferred, where you can restore it later.'}
)}
); } function SaveSummaryModal({ cat, draft, skipped, onPublish, onClose }) { const refIds = draft.filter(e => e.kind === 'ref').map(e => e.id); const moved = movedSetFor(cat, refIds).size; const added = draft.filter(e => e.kind === 'custom').length; const dot = (c, lbl) => {lbl}; const none = moved === 0 && added === 0 && skipped.length === 0; return (
{none ?
No changes — this class will match the default and follow it automatically.
:
{moved + added + skipped.length} change{moved + added + skipped.length > 1 ? 's' : ''} vs default
{moved > 0 && dot('#C9821F', `${moved} moved`)} {added > 0 && dot('#4A9B7E', `${added} added`)} {skipped.length > 0 && dot('var(--text-muted)', `${skipped.length} skipped`)}
}
Publishing applies these to this class only.
 ); } function AddCustomModal({ onAdd, onClose }) { const [title, setTitle] = useCur(''); const [subtitle, setSubtitle] = useCur(''); const [content, setContent] = useCur(''); return (