coursecode 0.1.6 → 0.1.7

package/lib/stub-player/outline-mode.js

@@ -127,16 +127,29 @@ export function createOutlineModeHandlers(context) {
 
         const parts = [];
 
+        // Close button (pinned top-left)
+        parts.push('<button id="outline-close-btn" class="outline-close-btn" title="Close dashboard">×</button>');
+
         // Stage stepper
         parts.push(renderStepper(detectedStage, viewingStage));
 
-        // Stage header
+        // Stage header — contextual button text
+        const hasSlides = stageData.checklist?.hasSlides;
+        let skipLabel;
+        if (courseLoaded) {
+            skipLabel = '← Back to Course';
+        } else if (hasSlides) {
+            skipLabel = 'View Course ▸';
+        } else {
+            skipLabel = 'Skip to Course ▸';
+        }
+
         parts.push(`
             <div class="outline-stage-header">
                 <h1>${stage.title}</h1>
                 <p class="outline-stage-desc">${stage.desc}</p>
                 <button id="stub-player-skip-outline-btn" class="outline-skip-btn">
-                    ${courseLoaded ? '← Back to Course' : 'Skip to Course ▸'}
+                    ${skipLabel}
                 </button>
             </div>
         `);
@@ -154,13 +167,32 @@ export function createOutlineModeHandlers(context) {
             if (s.num < detected) classes.push('completed');
             if (s.num === detected) classes.push('current');
             if (s.num === viewing) classes.push('viewing');
+
+            let dotContent;
+            if (s.num < detected) {
+                dotContent = '✓';
+            } else if (s.num === detected && s.num === viewing) {
+                dotContent = s.num;
+            } else {
+                dotContent = s.num;
+            }
+
             return `<button class="stepper-step ${classes.join(' ')}" data-stage="${s.num}">
-                <span class="stepper-dot">${s.num < detected ? '✓' : s.num}</span>
+                <span class="stepper-dot">${dotContent}</span>
                 <span class="stepper-label">${s.label}</span>
             </button>`;
         });
 
-        return `<div class="outline-stepper">${steps.join('<span class="stepper-line"></span>')}</div>`;
+        // Color connector lines between completed steps
+        const connectors = [];
+        for (let i = 0; i < STAGES.length - 1; i++) {
+            const filled = STAGES[i].num < detected;
+            connectors.push(`<span class="stepper-line${filled ? ' stepper-line-filled' : ''}"></span>`);
+        }
+
+        // Interleave steps and connectors
+        const html = steps.map((step, i) => step + (connectors[i] || '')).join('');
+        return `<div class="outline-stepper">${html}</div>`;
     }
 
     async function renderStageContent(stageNum) {
@@ -273,6 +305,31 @@ export function createOutlineModeHandlers(context) {
             }
         } catch { /* ignore */ }
 
+        // Fetch converted reference files for context
+        let refsHtml = '';
+        try {
+            const refsRes = await fetch('/__refs');
+            if (refsRes.ok) {
+                const refs = await refsRes.json();
+                const converted = refs.converted || [];
+                if (converted.length > 0) {
+                    const items = converted.map(f => `
+                        <a class="outline-ref-link" href="/__stub-player/ref-preview?file=${encodeURIComponent(f)}" target="_blank" title="Preview ${f}">
+                            <span class="outline-ref-link-icon">📄</span>
+                            <span class="outline-ref-link-name">${f}</span>
+                            <span class="outline-ref-link-arrow">↗</span>
+                        </a>
+                    `).join('');
+                    refsHtml = `
+                        <div class="outline-card">
+                            <h2>📚 Converted Reference Materials</h2>
+                            <p style="font-size:12px;color:var(--color-gray-600);margin:0 0 12px;">Use these as context when writing your outline.</p>
+                            <div class="outline-ref-links">${items}</div>
+                        </div>`;
+                }
+            }
+        } catch { /* ignore */ }
+
         return `
             <div class="outline-card">
                 <h2>📋 What to do</h2>
@@ -282,6 +339,7 @@ export function createOutlineModeHandlers(context) {
                     <li>Define modules, lessons, and learning objectives</li>
                 </ol>
             </div>
+            ${refsHtml}
             ${outlineHtml || '<div class=\'outline-card outline-card-empty\'><h2>📝 Course Outline</h2><p>No outline found yet. Create <code>COURSE_OUTLINE.md</code> to continue.</p></div>'}
             ${renderChecklist()}
         `;
@@ -296,7 +354,10 @@ export function createOutlineModeHandlers(context) {
             if (res.ok) {
                 const config = await res.json();
                 const slideCount = config.slideCount || 0;
-                const assessmentCount = (config.slideIds || []).filter(s => s.type === 'assessment').length;
+                const slideIds = config.slideIds || [];
+                const assessmentCount = slideIds.filter(s => s.type === 'assessment').length;
+
+                // Stats row
                 configHtml = `
                     <div class="outline-card">
                         <h2>📊 Course Structure</h2>
@@ -306,6 +367,26 @@ export function createOutlineModeHandlers(context) {
                             <div class="outline-stat"><span class="outline-stat-num">${config.objectives?.length || 0}</span><span class="outline-stat-label">Objectives</span></div>
                         </div>
                     </div>`;
+
+                // Slide list
+                if (slideIds.length > 0) {
+                    const slideItems = slideIds.map(s => {
+                        const icon = s.type === 'assessment' ? '📝' : '📄';
+                        const badge = s.type === 'assessment' ? '<span class="outline-slide-badge assessment">Assessment</span>' : '';
+                        return `
+                            <div class="outline-slide-item">
+                                <span class="outline-slide-icon">${icon}</span>
+                                <span class="outline-slide-id">${s.id}</span>
+                                ${s.title && s.title !== s.id ? `<span class="outline-slide-title">${escapeHtml(s.title)}</span>` : ''}
+                                ${badge}
+                            </div>`;
+                    }).join('');
+                    configHtml += `
+                        <div class="outline-card">
+                            <h2>🗂️ Slide List</h2>
+                            <div class="outline-slide-list">${slideItems}</div>
+                        </div>`;
+                }
             }
         } catch { /* ignore */ }
 
@@ -392,15 +473,38 @@ export function createOutlineModeHandlers(context) {
     // ── Stage 5: Export Ready ────────────────────────────────
 
     async function renderStage5() {
+        const commands = [
+            { cmd: 'coursecode build', label: 'cmi5 (default)' },
+            { cmd: 'coursecode build --format scorm2004', label: 'SCORM 2004' },
+            { cmd: 'coursecode build --format scorm1.2', label: 'SCORM 1.2' },
+            { cmd: 'coursecode build --format lti', label: 'LTI 1.3' },
+            { cmd: 'coursecode deploy', label: 'Deploy to Cloud' }
+        ];
+
+        const cmdRows = commands.map(c => `
+            <div class="outline-cmd">
+                <code>${c.cmd}</code>
+                <span class="outline-cmd-label">${c.label}</span>
+                <button class="outline-copy-btn" data-cmd="${c.cmd}" title="Copy to clipboard">📋</button>
+            </div>
+        `).join('');
+
         return `
             <div class="outline-card outline-card-success">
                 <h2>🎉 Ready for Export</h2>
                 <p>Your course is complete and passing all checks. Export it for your LMS:</p>
+                <div class="outline-build-actions">
+                    <button class="outline-build-btn" id="outline-build-btn">▶ Build Now (cmi5)</button>
+                    <select class="outline-build-format" id="outline-build-format">
+                        <option value="cmi5">cmi5</option>
+                        <option value="scorm2004">SCORM 2004</option>
+                        <option value="scorm1.2">SCORM 1.2</option>
+                        <option value="lti">LTI 1.3</option>
+                    </select>
+                </div>
+                <div id="outline-build-status" class="outline-build-status" style="display:none;"></div>
                 <div class="outline-export-cmds">
-                    <div class="outline-cmd"><code>coursecode build</code><span>cmi5 (default)</span></div>
-                    <div class="outline-cmd"><code>coursecode build --format scorm2004</code><span>SCORM 2004</span></div>
-                    <div class="outline-cmd"><code>coursecode build --format scorm1.2</code><span>SCORM 1.2</span></div>
-                    <div class="outline-cmd"><code>coursecode build --format lti</code><span>LTI 1.3</span></div>
+                    ${cmdRows}
                 </div>
             </div>
             ${renderChecklist()}
@@ -467,8 +571,8 @@ export function createOutlineModeHandlers(context) {
     // ── Event Handlers ───────────────────────────────────────
 
     function attachHandlers() {
-        // Skip / Back button
-        document.getElementById('stub-player-skip-outline-btn')?.addEventListener('click', () => {
+        // Close button (pinned ×)
+        const dismissDashboard = () => {
             if (stageData && stageData.stageNumber < 3) {
                 localStorage.setItem('coursecode-skipOutline', 'true');
             }
@@ -477,7 +581,11 @@ export function createOutlineModeHandlers(context) {
                 context.loadCourse();
                 courseLoaded = true;
             }
-        });
+        };
+        document.getElementById('outline-close-btn')?.addEventListener('click', dismissDashboard);
+
+        // Skip / Back button
+        document.getElementById('stub-player-skip-outline-btn')?.addEventListener('click', dismissDashboard);
 
         // Stepper clicks
         outlineContent.querySelectorAll('.stepper-step').forEach(btn => {
@@ -536,7 +644,6 @@ export function createOutlineModeHandlers(context) {
             setupRefsDropzone(dropzone);
         }
 
-
         // Branch option: Convert PowerPoint to Course
         document.getElementById('branch-convert')?.addEventListener('click', () => {
             showConvertSubView();
@@ -552,6 +659,73 @@ export function createOutlineModeHandlers(context) {
         if (convertZone) {
             setupConvertDropzone(convertZone);
         }
+
+        // Copy-to-clipboard buttons
+        outlineContent.querySelectorAll('.outline-copy-btn').forEach(btn => {
+            btn.addEventListener('click', async () => {
+                const cmd = btn.dataset.cmd;
+                try {
+                    await navigator.clipboard.writeText(cmd);
+                    btn.textContent = '✓';
+                    setTimeout(() => { btn.textContent = '📋'; }, 1500);
+                } catch {
+                    btn.textContent = '✗';
+                    setTimeout(() => { btn.textContent = '📋'; }, 1500);
+                }
+            });
+        });
+
+        // Build Now button
+        const buildBtn = document.getElementById('outline-build-btn');
+        const buildFormat = document.getElementById('outline-build-format');
+        const buildStatus = document.getElementById('outline-build-status');
+        if (buildBtn) {
+            buildBtn.addEventListener('click', async () => {
+                const format = buildFormat?.value || 'cmi5';
+                buildBtn.disabled = true;
+                buildBtn.textContent = `Building (${format})…`;
+                if (buildStatus) {
+                    buildStatus.style.display = 'block';
+                    buildStatus.textContent = 'Build in progress…';
+                    buildStatus.className = 'outline-build-status building';
+                }
+
+                try {
+                    const res = await fetch(`/__build?format=${format}`, { method: 'POST' });
+                    const result = await res.json();
+                    if (result.success) {
+                        buildBtn.textContent = '✅ Build Complete';
+                        if (buildStatus) {
+                            buildStatus.textContent = `Built ${format} in ${result.duration}. Output: dist/`;
+                            buildStatus.className = 'outline-build-status success';
+                        }
+                    } else {
+                        buildBtn.textContent = '❌ Build Failed';
+                        if (buildStatus) {
+                            buildStatus.textContent = result.error || result.errors?.join(', ') || 'Build failed';
+                            buildStatus.className = 'outline-build-status error';
+                        }
+                    }
+                } catch (err) {
+                    buildBtn.textContent = '❌ Build Failed';
+                    if (buildStatus) {
+                        buildStatus.textContent = err.message;
+                        buildStatus.className = 'outline-build-status error';
+                    }
+                }
+
+                setTimeout(() => {
+                    buildBtn.disabled = false;
+                    buildBtn.textContent = '▶ Build Now (cmi5)';
+                }, 3000);
+            });
+
+            // Sync button label with format dropdown
+            buildFormat?.addEventListener('change', () => {
+                const f = buildFormat.value;
+                buildBtn.textContent = `▶ Build Now (${f})`;
+            });
+        }
     }
 
 

package/lib/stub-player/styles/_header-bar.css

@@ -126,6 +126,13 @@
             font-size: 11px;
             font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
             letter-spacing: 0.3px;
+            display: inline-block;
+            max-width: 24ch;
+            min-width: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: middle;
         }
 
         #stub-player-header .slide-id-badge:empty {
@@ -340,4 +347,15 @@
             #stub-player-header button {
                 padding: 5px 7px;
             }
+            #stub-player-header .slide-id-badge {
+                max-width: 14ch;
+                font-size: 10px;
+                padding: 2px 6px 2px 8px;
+            }
+        }
+
+        @media (max-width: 560px) {
+            #stub-player-header .slide-id-badge {
+                display: none;
+            }
         }

package/lib/stub-player/styles/_outline-mode.css

@@ -21,6 +21,35 @@
             max-width: 720px;
             margin: 0 auto;
             padding: 32px 24px 60px;
+            position: relative;
+        }
+
+        /* ── Close button (pinned top-left) ──────── */
+
+        .outline-close-btn {
+            position: sticky;
+            top: 12px;
+            float: right;
+            margin-right: -8px;
+            margin-top: -12px;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: none;
+            border: none;
+            border-radius: 50%;
+            color: var(--color-gray-750);
+            font-size: 24px;
+            line-height: 1;
+            cursor: pointer;
+            z-index: 20;
+            transition: background 0.15s, color 0.15s, border-color 0.15s;
+        }
+
+        .outline-close-btn:hover {
+            color: var(--color-white);
         }
 
         /* Loading */
@@ -334,26 +363,7 @@
             display: flex;
             flex-direction: column;
             gap: 6px;
-        }
-
-        .outline-cmd {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 12px;
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 6px;
-            border: 1px solid var(--color-primary-panel);
-        }
-
-        .outline-cmd code {
-            font-size: 12px;
-            color: var(--color-accent);
-        }
-
-        .outline-cmd span {
-            font-size: 11px;
-            color: var(--color-gray-750);
+            margin-top: 12px;
         }
 
         /* ── Checklist ───────────────────────────── */
@@ -750,3 +760,230 @@
             border-radius: 6px;
             border-left: 3px solid var(--color-warning);
         }
+
+        /* ── Filled stepper connector lines ──────── */
+
+        .stepper-line-filled {
+            background: var(--color-success);
+        }
+
+        /* ── Reference file preview links (Stage 2) ── */
+
+        .outline-ref-links {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .outline-ref-link {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 8px 12px;
+            border-radius: 6px;
+            text-decoration: none;
+            color: var(--color-gray-200);
+            transition: background 0.15s;
+        }
+
+        .outline-ref-link:hover {
+            background: rgba(74, 111, 165, 0.12);
+        }
+
+        .outline-ref-link-icon {
+            font-size: 14px;
+            flex-shrink: 0;
+        }
+
+        .outline-ref-link-name {
+            font-size: 13px;
+            flex: 1;
+        }
+
+        .outline-ref-link-arrow {
+            font-size: 12px;
+            color: var(--color-gray-750);
+            opacity: 0;
+            transition: opacity 0.15s;
+        }
+
+        .outline-ref-link:hover .outline-ref-link-arrow {
+            opacity: 1;
+        }
+
+        /* ── Slide list (Stage 3) ──────────────────── */
+
+        .outline-slide-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            max-height: 400px;
+            overflow-y: auto;
+            mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
+            -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
+        }
+
+        .outline-slide-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 6px 10px;
+            border-radius: 5px;
+            transition: background 0.15s;
+        }
+
+        .outline-slide-item:hover {
+            background: rgba(74, 111, 165, 0.08);
+        }
+
+        .outline-slide-icon {
+            font-size: 13px;
+            flex-shrink: 0;
+        }
+
+        .outline-slide-id {
+            font-size: 12px;
+            font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+            color: var(--color-accent);
+        }
+
+        .outline-slide-title {
+            font-size: 12px;
+            color: var(--color-gray-600);
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .outline-slide-badge {
+            font-size: 10px;
+            font-weight: 600;
+            padding: 2px 8px;
+            border-radius: 4px;
+            white-space: nowrap;
+        }
+
+        .outline-slide-badge.assessment {
+            background: rgba(138, 163, 219, 0.15);
+            color: var(--color-info-soft);
+        }
+
+        /* ── Copy button (Stage 5 commands) ─────────── */
+
+        .outline-cmd {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 6px;
+            border: 1px solid var(--color-primary-panel);
+            gap: 8px;
+        }
+
+        .outline-cmd code {
+            font-size: 12px;
+            color: var(--color-accent);
+            flex: 1;
+        }
+
+        .outline-cmd-label {
+            font-size: 11px;
+            color: var(--color-gray-750);
+            white-space: nowrap;
+        }
+
+        .outline-copy-btn {
+            background: none;
+            border: 1px solid var(--color-primary-panel);
+            color: var(--color-gray-600);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: background 0.15s, border-color 0.15s, color 0.15s;
+            flex-shrink: 0;
+        }
+
+        .outline-copy-btn:hover {
+            background: var(--color-primary-panel);
+            border-color: var(--color-info);
+            color: var(--color-white);
+        }
+
+        /* ── Build actions (Stage 5) ───────────────── */
+
+        .outline-build-actions {
+            display: flex;
+            gap: 8px;
+            margin: 16px 0 12px;
+        }
+
+        .outline-build-btn {
+            background: var(--color-success);
+            color: var(--color-white);
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.15s, transform 0.1s, opacity 0.15s;
+        }
+
+        .outline-build-btn:hover:not(:disabled) {
+            background: color-mix(in srgb, var(--color-success) 80%, var(--color-black));
+            transform: translateY(-1px);
+        }
+
+        .outline-build-btn:active:not(:disabled) {
+            transform: translateY(0);
+        }
+
+        .outline-build-btn:disabled {
+            opacity: 0.7;
+            cursor: default;
+        }
+
+        .outline-build-format {
+            background: var(--color-primary-panel);
+            color: var(--color-gray-200);
+            border: 1px solid rgba(74, 111, 165, 0.3);
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            cursor: pointer;
+            appearance: auto;
+        }
+
+        .outline-build-format:focus {
+            outline: 2px solid var(--color-info);
+            outline-offset: -1px;
+        }
+
+        .outline-build-status {
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-size: 12px;
+            margin-bottom: 12px;
+        }
+
+        .outline-build-status.building {
+            background: rgba(241, 135, 1, 0.1);
+            border: 1px solid rgba(241, 135, 1, 0.3);
+            color: var(--color-warning);
+            animation: pulse-convert 1.5s ease-in-out infinite;
+        }
+
+        .outline-build-status.success {
+            background: rgba(29, 118, 72, 0.1);
+            border: 1px solid rgba(29, 118, 72, 0.3);
+            color: var(--color-success-soft);
+        }
+
+        .outline-build-status.error {
+            background: rgba(220, 38, 38, 0.1);
+            border: 1px solid rgba(220, 38, 38, 0.3);
+            color: var(--color-danger);
+        }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coursecode",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Multi-format course authoring framework with CLI tools (SCORM 2004, SCORM 1.2, cmi5, LTI 1.3)",
   "type": "module",
   "bin": {
@@ -44,7 +44,10 @@
     "preview:cmi5": "LMS_FORMAT=cmi5 node lib/preview-server.js --framework-dev",
     "preview:lti": "LMS_FORMAT=lti node lib/preview-server.js --framework-dev",
     "lint": "eslint .",
+    "lint:responsive": "node scripts/check-responsive-css-ownership.mjs",
+    "lint:responsive:structure": "node scripts/check-responsive-structure-scoping.mjs",
     "lint:fix": "eslint . --fix",
+    "smoke:responsive": "node scripts/responsive-visual-smoke.mjs",
     "build": "npx vite build --config vite.framework-dev.config.js",
     "build:dev": "npx vite build --config vite.framework-dev.config.js",
     "build:scorm2004": "LMS_FORMAT=scorm2004 npx vite build --config vite.framework-dev.config.js",
@@ -57,8 +60,13 @@
     "package:cmi5": "npm run lint && LMS_FORMAT=cmi5 PACKAGE=true npx vite build --config vite.framework-dev.config.js",
     "package:lti": "npm run lint && LMS_FORMAT=lti PACKAGE=true npx vite build --config vite.framework-dev.config.js",
     "test": "vitest run --config tests/vitest.config.js",
+    "test:e2e": "vitest run --config tests/vitest.e2e.config.js",
+    "test:all": "npm test && npm run test:e2e",
     "test:cloud": "vitest run --config tests/vitest.cloud.config.js",
     "test:watch": "vitest --config tests/vitest.config.js",
+    "test:coverage": "vitest run --config tests/vitest.config.js --coverage",
+    "prerelease:check": "npm run lint && npm run lint:responsive && npm run lint:responsive:structure && npm run build",
+    "prerelease:check:full": "npm run prerelease:check && npm run smoke:responsive -- --profile=expanded",
     "prepublishOnly": "echo '📦 Preparing coursecode for npm...'"
   },
   "repository": {
@@ -104,6 +112,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-legacy": "^7.2.1",
+    "@vitest/coverage-v8": "^4.0.18",
     "@xapi/cmi5": "^1.4.0",
     "acorn": "^8.15.0",
     "archiver": "^7.0.1",

package/template/course/slides/example-course-structure.js

@@ -21,7 +21,7 @@ export const slide = {
           <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('folder')} Project Structure</h2>
           <div class="cols-2 gap-6">
             <div>
-              <pre class="bg-gray-100 p-4 rounded text-sm"><code>my-course/
+              <pre class="bg-gray-100 p-4 rounded overflow-x-auto" style="max-width: 100%; font-size: clamp(0.72rem, 2vw, 0.875rem); line-height: 1.35;"><code>my-course/
 ├── course/              ← <strong>Your content</strong>
 │   ├── course-config.js
 │   ├── slides/