coursecode 0.1.28 → 0.1.31

package/framework/css/components/flip-cards.css

@@ -47,6 +47,20 @@
   height: 100%; /* Fill the entire grid cell height (for equal row heights) */
 }
 
+/* When multiple flip cards sit side-by-side in any grid or flex container,
+   align back-face content to the top so headings line up across cards.
+   :has(> .flip-card ~ .flip-card) matches any parent containing 2+ flip cards. */
+:has(> .flip-card ~ .flip-card) > .flip-card .flip-card-back {
+  justify-content: flex-start;
+}
+
+/* Back-face content stretches to fill the card and uses space-between
+   so the heading sits at top and remaining content anchors to bottom */
+:has(> .flip-card ~ .flip-card) > .flip-card .flip-card-back .flip-card-content {
+  flex: 1;
+  justify-content: space-between;
+}
+
 .flip-card-inner {
   display: grid; /* Grid allows both faces to contribute to height */
   width: 100%;

package/framework/docs/USER_GUIDE.md

@@ -302,7 +302,7 @@ Once connected, your AI assistant gains these capabilities:
 | `coursecode_interaction_catalog` | Browse available interaction types (multiple choice, drag-drop, etc.) |
 | `coursecode_css_catalog` | Browse available CSS classes by category |
 | `coursecode_icon_catalog` | Browse available icons by name/category |
-| `coursecode_export_content` | Export course content/interactions as Markdown or JSON for review |
+
 | `coursecode_workflow_status` | Get guidance on what to do next based on your project's current state |
 | `coursecode_build` | Build the course for LMS deployment |
 

package/lib/mcp-prompts.js

@@ -407,67 +407,7 @@ Use to discover available icons before authoring slides or configuring menus.`,
             idempotentHint: true
         }
     },
-    {
-        name: 'coursecode_export_content',
-        description: `Extract course content as structured Markdown or JSON for review.
-
-Returns the full text content of the course: slide headers, body text, tabs, accordions, callouts, cards, interactions, assessment questions, narration, config, and structure overview.
-
-Use cases:
-- Compare built course against COURSE_OUTLINE.md for accuracy
-- Review all interactions and assessment questions at once
-- Audit content wording and consistency across slides
-- Generate content for localization or SME review
-
-Filtering options keep output manageable:
-- slides: scope to specific slide IDs
-- interactionsOnly: just Q&A, no slide content
-- excludeInteractions: content only, no Q&A
-- format: 'md' (default) or 'json' for structured data
 
-For large courses (>40KB), full exports automatically return a summary with per-slide sizes instead. Use the slides parameter to export specific content.
-
-Does not require preview server.`,
-        inputSchema: {
-            type: 'object',
-            properties: {
-                slides: {
-                    type: 'string',
-                    description: 'Comma-separated slide IDs to export (default: all slides)'
-                },
-                interactionsOnly: {
-                    type: 'boolean',
-                    description: 'Export only interactions and assessment questions (no slide content)'
-                },
-                includeNarration: {
-                    type: 'boolean',
-                    description: 'Include narration transcripts (default: false)'
-                },
-                includeAnswers: {
-                    type: 'boolean',
-                    description: 'Include correct answers for interactions (default: true)'
-                },
-                includeFeedback: {
-                    type: 'boolean',
-                    description: 'Include feedback text (default: true)'
-                },
-                excludeInteractions: {
-                    type: 'boolean',
-                    description: 'Exclude all interactions from output (default: false)'
-                },
-                format: {
-                    type: 'string',
-                    description: 'Output format: md or json (default: md)',
-                    enum: ['md', 'json']
-                }
-            },
-            required: []
-        },
-        annotations: {
-            readOnlyHint: true,
-            idempotentHint: true
-        }
-    },
 ];
 
 // ========================================
@@ -692,7 +632,6 @@ Visually verify and polish the course using the preview server.
    - coursecode_navigate — go to any slide by ID (get IDs from coursecode_state)
    - coursecode_screenshot — capture visual state (accepts slideId to navigate+capture in one call)
    - coursecode_interact — test interactions with responses
-   - coursecode_export_content — extract all text content to review or compare against outline
    - coursecode_lint — validate after file changes
 
 4. Efficient iteration loop:

package/lib/mcp-server.js

@@ -30,7 +30,7 @@ import {
     lintCourse,
     buildCourse
 } from './authoring-api.js';
-import { getContentExport } from './export-content.js';
+
 import headless from './headless-browser.js';
 import { TOOLS, buildInstructions, getWorkflowStatusWithInstructions } from './mcp-prompts.js';
 
@@ -258,17 +258,7 @@ export async function startMcpServer(options = {}) {
                     result = await lintCourse();
                     break;
 
-                case 'coursecode_export_content':
-                    result = await getContentExport(args || {});
-                    if (result === null) {
-                        throw new Error('Failed to export content. Ensure course-config.js exists in course/');
-                    }
-                    return {
-                        content: [{
-                            type: 'text',
-                            text: result
-                        }]
-                    };
+
 
                 default:
                     throw new Error(`Unknown tool: ${name}`);

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

@@ -129,6 +129,16 @@ export function createEditModeHandlers(context) {
                         outline-offset: 2px;
                         background-color: rgba(245, 158, 11, 0.08);
                     }
+                    .edit-mode-active .flip-card,
+                    .edit-mode-active .accordion-button,
+                    .edit-mode-active [data-action="select-tab"],
+                    .edit-mode-active [data-action="toggle-collapse"],
+                    .edit-mode-active [data-component="modal-trigger"],
+                    .edit-mode-active .timeline-event,
+                    .edit-mode-active [data-component="lightbox"],
+                    .edit-mode-active [data-action="toggle-dropdown"] {
+                        pointer-events: none;
+                    }
                 `;
                 doc.head.appendChild(styleEl);
             }

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

@@ -41,6 +41,7 @@ export function createOutlineModeHandlers(context) {
     let isVisible = false;
     let courseLoaded = false;
     let viewingStage = null; // Which stage the dashboard is showing
+    const calloutDismissed = localStorage.getItem('coursecode-walkthroughCalloutDismissed') === 'true';
 
     async function checkStage() {
         const params = new URLSearchParams(window.location.search);
@@ -133,6 +134,9 @@ export function createOutlineModeHandlers(context) {
         // Stage stepper
         parts.push(renderStepper(detectedStage, viewingStage));
 
+        // Walkthrough callout (dismissable, shown below stepper)
+        parts.push(renderWalkthroughCallout());
+
         // Stage header — contextual button text
         const hasSlides = stageData.checklist?.hasSlides;
         let skipLabel;
@@ -511,6 +515,39 @@ export function createOutlineModeHandlers(context) {
         `;
     }
 
+    // ── Walkthrough Callout ───────────────────────────────────
+
+    function renderWalkthroughCallout() {
+        if (calloutDismissed) return '';
+
+        const hasSlides = stageData?.checklist?.hasSlides;
+        let skipLabel;
+        if (courseLoaded) {
+            skipLabel = '← Back to Course';
+        } else if (hasSlides) {
+            skipLabel = 'View Course ▸';
+        } else {
+            skipLabel = 'Skip to Course ▸';
+        }
+
+        return `
+            <div class="outline-walkthrough-callout" id="outline-walkthrough-callout">
+                <div class="outline-callout-content">
+                    <div class="outline-callout-icon">💡</div>
+                    <div class="outline-callout-text">
+                        <strong>This is an optional walkthrough.</strong>
+                        It guides you through building a course step-by-step, but you can skip it at any time.
+                        Close with the <span class="outline-callout-kbd">✕</span> in the top-right corner, or return anytime from the course preview toolbar.
+                    </div>
+                </div>
+                <div class="outline-callout-actions">
+                    <button id="outline-callout-skip-btn" class="outline-callout-skip-btn">${skipLabel}</button>
+                    <button id="outline-callout-dismiss-btn" class="outline-callout-dismiss-btn">Got it</button>
+                </div>
+            </div>
+        `;
+    }
+
     // ── Shared Components ────────────────────────────────────
 
     function renderChecklist() {
@@ -587,6 +624,17 @@ export function createOutlineModeHandlers(context) {
         // Skip / Back button
         document.getElementById('stub-player-skip-outline-btn')?.addEventListener('click', dismissDashboard);
 
+        // Walkthrough callout handlers
+        document.getElementById('outline-callout-skip-btn')?.addEventListener('click', dismissDashboard);
+        document.getElementById('outline-callout-dismiss-btn')?.addEventListener('click', () => {
+            localStorage.setItem('coursecode-walkthroughCalloutDismissed', 'true');
+            const callout = document.getElementById('outline-walkthrough-callout');
+            if (callout) {
+                callout.classList.add('dismissing');
+                callout.addEventListener('animationend', () => callout.remove(), { once: true });
+            }
+        });
+
         // Stepper clicks
         outlineContent.querySelectorAll('.stepper-step').forEach(btn => {
             btn.addEventListener('click', () => {

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

@@ -147,6 +147,116 @@
             margin-top: 20px;
         }
 
+        /* ── Walkthrough Callout ────────────────── */
+
+        .outline-walkthrough-callout {
+            margin-bottom: 24px;
+            padding: 16px 20px;
+            background: rgba(74, 111, 165, 0.1);
+            border: 1px solid rgba(74, 111, 165, 0.25);
+            border-left: 3px solid var(--color-info);
+            border-radius: 8px;
+            animation: callout-slide-in 0.3s ease-out;
+        }
+
+        @keyframes callout-slide-in {
+            from { opacity: 0; transform: translateY(-8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .outline-walkthrough-callout.dismissing {
+            animation: callout-slide-out 0.25s ease-in forwards;
+        }
+
+        @keyframes callout-slide-out {
+            from { opacity: 1; transform: translateY(0); max-height: 200px; margin-bottom: 24px; }
+            to { opacity: 0; transform: translateY(-8px); max-height: 0; margin-bottom: 0; padding: 0 20px; overflow: hidden; }
+        }
+
+        .outline-callout-content {
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+        }
+
+        .outline-callout-icon {
+            font-size: 20px;
+            line-height: 1;
+            flex-shrink: 0;
+            margin-top: 1px;
+        }
+
+        .outline-callout-text {
+            font-size: 13px;
+            line-height: 1.6;
+            color: var(--color-gray-400);
+        }
+
+        .outline-callout-text strong {
+            color: var(--color-white);
+        }
+
+        .outline-callout-kbd {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 18px;
+            height: 18px;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid var(--color-primary-panel);
+            border-radius: 4px;
+            font-size: 10px;
+            color: var(--color-gray-400);
+            vertical-align: middle;
+            line-height: 1;
+        }
+
+        .outline-callout-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 14px;
+            padding-left: 32px;
+        }
+
+        .outline-callout-skip-btn {
+            background: var(--color-info);
+            color: var(--color-white);
+            border: none;
+            padding: 7px 16px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.15s, transform 0.1s;
+        }
+
+        .outline-callout-skip-btn:hover {
+            background: color-mix(in srgb, var(--color-info) 80%, var(--color-white));
+            transform: translateY(-1px);
+        }
+
+        .outline-callout-skip-btn:active {
+            transform: translateY(0);
+        }
+
+        .outline-callout-dismiss-btn {
+            background: none;
+            color: var(--color-gray-600);
+            border: 1px solid var(--color-primary-panel);
+            padding: 7px 14px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.15s, color 0.15s, border-color 0.15s;
+        }
+
+        .outline-callout-dismiss-btn:hover {
+            background: var(--color-primary-panel);
+            color: var(--color-gray-200);
+            border-color: var(--color-info);
+        }
+
         /* ── Stage Header ───────────────────────── */
 
         .outline-stage-header {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coursecode",
-  "version": "0.1.28",
+  "version": "0.1.31",
   "description": "Multi-format course authoring framework with CLI tools (SCORM 2004, SCORM 1.2, cmi5, LTI 1.3)",
   "type": "module",
   "bin": {