coursecode 0.1.0

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

@@ -0,0 +1,123 @@
+/**
+ * Welcome slide - Introduction to CourseCode for non-developers
+ * A stunning, professional welcome experience with modern design
+ */
+
+const { NavigationActions, iconManager } = CourseCode;
+
+export const slide = {
+  render(_root, _context) {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="stack-lg" data-content-width="wide">
+        
+        <!-- Hero Section -->
+        <div data-component="hero" class="hero-gradient hero-full-bleed hero-flush-top animate-fade-in" style="--hero-start: var(--color-primary); --hero-end: var(--color-gray-700);">
+          <div class="hero-content">
+            <span class="hero-badge hero-badge-borderless animate-fade-up delay-200" style="background: var(--palette-orange); color: black;">${iconManager.getIcon('sparkles', { size: 'sm' })} AI-Powered Course Creation</span>
+            <h1 class="hero-title animate-fade-up delay-300">Welcome to <span class="text-gradient">CourseCode</span></h1>
+            <p class="hero-subtitle animate-fade-up delay-400">Build interactive e-learning courses with AI assistance. No coding required.</p>
+          </div>
+        </div>
+
+        <!-- Feature Cards -->
+        <section data-component="features">
+          <div class="feature-item animate-fade-up delay-200">
+            <div class="icon-circle icon-bg-primary mb-3" style="padding: 1.25rem;">
+              ${iconManager.getIcon('zap', { size: '3xl', class: 'icon-primary' })}
+            </div>
+            <h3 class="font-semibold">AI-Powered</h3>
+            <p class="text-primary">Describe what you want, and your AI assistant builds it. Focus on content, not code.</p>
+          </div>
+          <div class="feature-item animate-fade-up delay-300">
+            <div class="icon-circle icon-bg-accent mb-3" style="padding: 1.25rem;">
+              ${iconManager.getIcon('upload', { size: '3xl', class: 'icon-accent' })}
+            </div>
+            <h3 class="font-semibold">Use Your Content</h3>
+            <p class="text-primary">Convert PowerPoints, Word docs, and PDFs into interactive courses automatically.</p>
+          </div>
+          <div class="feature-item animate-fade-up delay-400">
+            <div class="icon-circle icon-bg-success mb-3" style="padding: 1.25rem;">
+              ${iconManager.getIcon('check-circle', { size: '3xl', class: 'icon-success' })}
+            </div>
+            <h3 class="font-semibold">LMS Ready</h3>
+            <p class="text-primary">Export your course as a single ZIP file that works with any standards-compliant LMS.</p>
+          </div>
+        </section>
+
+        <!-- Who is this for -->
+        <section class="card card-elevated animate-fade-up delay-500">
+          <div class="card-header">
+            <h2 class="flex items-center gap-2">
+              ${iconManager.getIcon('users', { size: 'lg', class: 'icon-primary' })}
+              <span>Who is CourseCode for?</span>
+            </h2>
+          </div>
+          <div class="card-body">
+            <div class="card-grid-2 gap-8">
+              <div class="stack-sm">
+                <h3 class="flex items-center gap-2 font-semibold">
+                  ${iconManager.getIcon('check-circle', { size: 'md', class: 'icon-success' })}
+                  <span>Great for:</span>
+                </h3>
+                <ul class="list-styled list-compact">
+                  <li>Instructional designers</li>
+                  <li>Training teams</li>
+                  <li>Subject matter experts</li>
+                  <li>Non-technical authors</li>
+                </ul>
+              </div>
+              <div class="stack-sm">
+                <h3 class="flex items-center gap-2 font-semibold">
+                  ${iconManager.getIcon('info', { size: 'md', class: 'icon-info' })}
+                  <span>How it works:</span>
+                </h3>
+                <ul class="list-styled list-compact">
+                  <li>You describe what you want in plain language</li>
+                  <li>Your AI assistant writes the technical parts</li>
+                  <li>You preview and refine using visual editing tools</li>
+                  <li>No need to understand the underlying code</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- What you'll learn -->
+        <section class="card card-flat animate-fade-up delay-700">
+          <h3 class="flex items-center justify-center gap-2 font-semibold mb-4">
+            ${iconManager.getIcon('book-open', { size: 'lg', class: 'icon-info' })}
+            <span>What you'll learn in this course</span>
+          </h3>
+          <div class="flex justify-center gap-8">
+            <ul class="list-none stack-xs m-0">
+              <li class="flex items-center gap-2">${iconManager.getIcon('check', { size: 'sm', class: 'icon-success' })} The 4-step AI workflow</li>
+              <li class="flex items-center gap-2">${iconManager.getIcon('check', { size: 'sm', class: 'icon-success' })} Preview and editing tools</li>
+              <li class="flex items-center gap-2">${iconManager.getIcon('check', { size: 'sm', class: 'icon-success' })} Course structure</li>
+            </ul>
+            <ul class="list-none stack-xs m-0">
+              <li class="flex items-center gap-2">${iconManager.getIcon('check', { size: 'sm', class: 'icon-success' })} UI components</li>
+              <li class="flex items-center gap-2">${iconManager.getIcon('check', { size: 'sm', class: 'icon-success' })} Theming and branding</li>
+              <li class="flex items-center gap-2">${iconManager.getIcon('check', { size: 'sm', class: 'icon-success' })} Building and deploying</li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Navigation -->
+        <div class="flex justify-center gap-3 animate-fade-up delay-1000">
+          <button id="start-btn" class="btn btn-gradient btn-lg btn-pill">
+            ${iconManager.getIcon('arrow-right', { size: 'md', class: 'icon-dark' })}
+            <span class="text-dark">Let's Get Started</span>
+          </button>
+        </div>
+
+      </div>
+    `;
+
+    container.querySelector('#start-btn').addEventListener('click', () => {
+      NavigationActions.goToNextAvailableSlide();
+    });
+
+    return container;
+  }
+};

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

@@ -0,0 +1,140 @@
+/**
+ * Workflow slide - The AI-driven workflow with MCP integration
+ */
+
+const { iconManager } = CourseCode;
+
+export const slide = {
+  render(_root, _context) {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="stack-lg">
+        
+        <!-- Header -->
+        <header class="slide-header">
+          <h1>The AI Workflow</h1>
+          <p>Four steps to create professional e-learning courses with AI assistance.</p>
+        </header>
+
+        <!-- Two Approaches -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('zap')} Two Ways to Work with AI</h2>
+          <div class="card-grid-2 gap-6">
+            <div class="card card-accent-left" data-accent="primary">
+              <div class="card-body stack-sm">
+                <h3 class="font-bold">${iconManager.getIcon('cpu', { size: 'md' })} MCP (Recommended)</h3>
+                <p class="text-sm">Your AI connects directly to CourseCode through the <strong>Model Context Protocol</strong>. It can preview your course, take screenshots, test interactions, and fix issues automatically.</p>
+                <div class="callout callout--success callout--compact">
+                  <strong>Setup:</strong> Add CourseCode as an MCP server in your AI tool. See the User Guide for instructions.
+                </div>
+              </div>
+            </div>
+            <div class="card card-accent-left" data-accent="secondary">
+              <div class="card-body stack-sm">
+                <h3 class="font-bold">${iconManager.getIcon('message-square', { size: 'md' })} Chat-Based (Manual)</h3>
+                <p class="text-sm">Share documentation files with your AI and describe what you want. You preview the course yourself and report issues back to the AI.</p>
+                <div class="callout callout--compact">
+                  <strong>No setup needed</strong>, but you do more of the work.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Steps -->
+        <section data-component="steps" data-style="connected">
+          <div class="step">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <h3>Convert Your Materials</h3>
+              <p><strong>What you'll do:</strong> Turn your existing training documents into a format AI can read.</p>
+              <div class="callout callout--info callout--compact mt-2">
+                <strong>Where to put your files:</strong> Copy your PDFs, Word docs, or PowerPoints into the <code>course/references/</code> folder.
+              </div>
+              <p class="mt-2"><strong>The command to run:</strong></p>
+              <pre class="bg-gray-100 p-2 rounded text-sm"><code>coursecode convert</code></pre>
+              <p class="text-sm text-muted mt-2">Creates text versions in <code>course/references/converted/</code>. <em>Skip if starting from scratch.</em></p>
+            </div>
+          </div>
+          <div class="step">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <h3>Create Your Outline</h3>
+              <p><strong>What you'll do:</strong> Plan the structure of your course before building it.</p>
+              <div class="cols-2 gap-4 mt-2">
+                <div class="callout callout--info callout--compact">
+                  <strong>${iconManager.getIcon('cpu', { size: 'sm' })} With MCP:</strong>
+                  <p class="text-sm mt-1 mb-0 font-mono">"Create a course outline for <em>[topic]</em>. The audience is <em>[description]</em> and it should take <em>[duration]</em>."</p>
+                  <p class="text-sm text-muted mt-1 mb-0">The AI reads your references and the outline template automatically.</p>
+                </div>
+                <div class="callout callout--compact">
+                  <strong>${iconManager.getIcon('message-square', { size: 'sm' })} Without MCP:</strong>
+                  <p class="text-sm mt-1 mb-0">Share your converted docs, <code>COURSE_OUTLINE_TEMPLATE.md</code>, and <code>COURSE_OUTLINE_GUIDE.md</code> with your AI.</p>
+                </div>
+              </div>
+              <p class="text-sm text-muted mt-2"><strong>Important:</strong> Review the outline carefully. Ask for changes until you're happy.</p>
+            </div>
+          </div>
+          <div class="step">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <h3>Build the Course</h3>
+              <p><strong>What you'll do:</strong> Have your AI create all slides based on your approved outline.</p>
+              <div class="cols-2 gap-4 mt-2">
+                <div class="callout callout--info callout--compact">
+                  <strong>${iconManager.getIcon('cpu', { size: 'sm' })} With MCP:</strong>
+                  <p class="text-sm mt-1 mb-0 font-mono">"Build the course from the outline. Use engaging components and interactions."</p>
+                  <p class="text-sm text-muted mt-1 mb-0">The AI reads all docs, lints its work, and screenshots slides to verify.</p>
+                </div>
+                <div class="callout callout--compact">
+                  <strong>${iconManager.getIcon('message-square', { size: 'sm' })} Without MCP:</strong>
+                  <p class="text-sm mt-1 mb-0">Share your outline and <code>COURSE_AUTHORING_GUIDE.md</code> with your AI.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="step">
+            <div class="step-number">4</div>
+            <div class="step-content">
+              <h3>Preview & Refine</h3>
+              <p><strong>What you'll do:</strong> Review and polish your course until it's ready.</p>
+              <div class="cols-2 gap-4 mt-2">
+                <div class="callout callout--info callout--compact">
+                  <strong>${iconManager.getIcon('cpu', { size: 'sm' })} With MCP:</strong>
+                  <p class="text-sm mt-1 mb-0 font-mono">"Screenshot the intro slide. The heading color should be darker."</p>
+                  <p class="text-sm text-muted mt-1 mb-0">The AI sees and fixes issues directly. No copy-pasting error messages.</p>
+                </div>
+                <div class="callout callout--compact">
+                  <strong>${iconManager.getIcon('message-square', { size: 'sm' })} Without MCP:</strong>
+                  <p class="text-sm mt-1 mb-0">Run <code>coursecode preview</code>, browse to <code>localhost:4173</code>, and describe issues to your AI.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- MCP Advantage Callout -->
+        <div class="callout callout--success">
+          <h3 class="font-bold">${iconManager.getIcon('zap')} Why MCP Makes a Difference</h3>
+          <div class="cols-3 gap-4 mt-2">
+            <div class="stack-xs">
+              <strong>Self-correcting</strong>
+              <p class="text-sm m-0">AI lints its own code and catches errors before you do.</p>
+            </div>
+            <div class="stack-xs">
+              <strong>Visual verification</strong>
+              <p class="text-sm m-0">AI screenshots slides to verify layout and design.</p>
+            </div>
+            <div class="stack-xs">
+              <strong>Faster iteration</strong>
+              <p class="text-sm m-0">No manual file sharing, no copy-pasting between tools.</p>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    `;
+
+    return container;
+  }
+};

package/template/course/theme.css

@@ -0,0 +1,165 @@
+/* ============================================================================
+   Course Theme Token Overrides — Safe to Customize
+   ============================================================================
+
+   Override any global design tokens for this course by redefining variables
+   inside the :root selector below. Only include the tokens you want to change;
+   all other values continue to use the defaults from framework/css/design-tokens.css.
+
+   ============================================================================ */
+
+
+    /* stylelint-disable block-no-empty */
+    :root {
+
+    /* =========================================================================
+       QUICK START: Override palette colors for instant branding
+       =========================================================================
+
+       The entire color system derives from 9 palette values via color-mix().
+       Override any of these to rebrand the course — all other colors,
+       light/dark variants, and alpha values are calculated automatically.
+    */
+
+    /* Core palette (change these to rebrand) */
+    /* --palette-white: #ffffff; */
+    /* --palette-black: #000000; */
+    /* --palette-gray: #808080; */
+    /* --palette-charcoal: #23272e; */  /* → Premium neutral ink (optional) */
+    /* --palette-blue: #14213d; */        /* → Primary brand color */
+    /* --palette-blue-light: #4a6fa5; */  /* → Info color */
+    /* --palette-green: #1d7648; */       /* → Success color */
+    /* --palette-yellow: #f7b801; */      /* → Accent color */
+    /* --palette-amber: #f18701; */       /* → Secondary / Warning color */
+    /* --palette-orange: #f35b04; */      /* → Brand vibrant color */
+    /* --palette-red: #c7322b; */         /* → Semantic danger/error red */
+
+
+    /* =========================================================================
+       SEMANTIC UI TOKENS - Direct control over specific UI areas
+       =========================================================================
+
+       Override these for fine-grained control. Each comment shows which
+       palette color it derives from so you can see the effect of changes.  */
+
+    /* Slide / content background                       ← palette-gray (via gray-50) */
+    /* --bg-page: var(--color-gray-50); */
+
+    /* Text colors                                      ← palette-gray + charcoal roles */
+    /* --text-ink: var(--palette-charcoal); */          /* Brand ink (headings/logos/high emphasis) */
+    /* --text-primary: var(--color-gray-900); */        /* Default text hierarchy (system) */
+    /* --text-body: var(--color-gray-900); */           /* Paragraph text */
+    /* --text-muted: var(--color-gray-600); */          /* Secondary/helper text */
+    /* --color-on-warning: var(--palette-charcoal); */  /* Text on warning fills */
+    /* --color-on-danger: var(--palette-charcoal); */   /* Text on danger fills */
+
+    /* Header appearance                                ← palette-blue */
+    /* --header-bg: var(--gradient-header); */          /* Gradient: palette-blue → gray-700 */
+    /* --header-text: #ffffff; */                       /* Header text */
+    /* --header-border: var(--color-secondary); */      /* Bottom border ← palette-amber */
+    /* --header-border-width: 3px; */                   /* Border thickness */
+    /* --header-title-size: var(--font-size-lg); */     /* Title font size (18px) */
+    /* --header-title-weight: 700; */                   /* Title font weight */
+    /* --header-title-letter-spacing: -0.01em; */       /* Title letter spacing */
+
+    /* Sidebar appearance                               ← palette-white (surface) */
+    /* --sidebar-bg: var(--bg-surface); */              /* Background */
+    /* --sidebar-text: var(--color-gray-700); */        /* Text ← palette-gray */
+    /* --sidebar-active-bg: var(--color-primary-alpha-10); */  /* Active bg ← palette-blue */
+    /* --sidebar-active-text: var(--color-primary); */  /* Active text ← palette-blue */
+    /* --sidebar-width: 280px; */                       /* Width */
+
+    /* Footer appearance                                ← palette-white (surface) */
+    /* --footer-bg: var(--bg-surface); */               /* Background */
+    /* --footer-border: var(--border-default); */       /* Top border ← palette-gray */
+
+
+
+    /* =========================================================================
+       TYPOGRAPHY - Fonts, sizes, and text appearance
+       =========================================================================
+
+       Override fonts and sizes for your brand. Load custom fonts with
+       @import or @font-face at the top of this file before :root.
+
+       Example:
+       @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+       Then set: --font-family-sans: 'Inter', sans-serif;
+    */
+
+    /* Font families */
+    /* --font-family-sans: system-ui, sans-serif; */   /* UI, body, navigation */
+    /* --font-family-display: var(--font-family-sans); */ /* Headings and titles */
+    /* --font-family-mono: ui-monospace, monospace; */ /* Code/technical text */
+
+    /* Font sizes (adjust the scale to match your brand) */
+    /* --font-size-base: 1rem; */                   /* Body text (16px default) */
+    /* --font-size-lg: 1.125rem; */                 /* Emphasized text (18px) */
+    /* --font-size-xl: 1.25rem; */                  /* Subheadings (20px) */
+    /* --font-size-2xl: 1.5rem; */                  /* Section headings (24px) */
+    /* --font-size-3xl: 1.875rem; */                /* Large headings (30px) */
+    /* --font-size-4xl: 2.25rem; */                 /* Main headings (36px) */
+    /* --font-size-sm: 0.875rem; */                 /* Secondary text (14px) */
+
+
+    /* =========================================================================
+       LAYOUT SIZING - Header, sidebar, and footer dimensions
+       =========================================================================
+
+       Adjust height, padding, and width of structural UI areas.
+    */
+
+    /* Header sizing */
+    /* --header-height: 72px; */                    /* Header bar height */
+    /* --header-padding-x: 1.5rem; */              /* Header horizontal padding */
+    /* --header-padding-y: 0.75rem; */             /* Header vertical padding */
+
+    /* Footer sizing */
+    /* --footer-padding-x: 1.5rem; */              /* Footer horizontal padding */
+    /* --footer-padding-y: 0.75rem; */             /* Footer vertical padding */
+
+
+    /* =========================================================================
+       COMPONENT STYLE VARIANTS
+       =========================================================================
+
+       Set global default styles for UI components. The framework reads these
+       tokens and applies them site-wide. Individual components can still
+       override by setting data-*-style attributes in HTML.
+
+       Available values:
+
+       --tab-style:       default | pills | buttons | minimal | boxed
+       --accordion-style: default | flush | separated | minimal | boxed
+       --button-shape:    default | square | pill
+       --card-style:      default | outlined | elevated | flat | gradient | accent-top
+       --callout-style:   default | outlined | filled | minimal | banner | card
+       --header-style:    gradient | solid | minimal | dark | transparent
+       --sidebar-style:   default | dark | primary | minimal
+       --footer-style:    default | centered | minimal | floating
+    */
+
+    /* --tab-style: pills; */
+    /* --accordion-style: separated; */
+    /* --button-shape: pill; */
+    /* --card-style: elevated; */
+    /* --callout-style: filled; */
+    /* --header-style: solid; */
+    /* --sidebar-style: minimal; */
+    /* --footer-style: centered; */
+    
+    }
+    /* stylelint-enable block-no-empty */
+
+/* ============================================================================
+   Custom Course Styles
+   ============================================================================ */
+
+/*
+  Add any course-specific custom styles below. For example:
+
+  .my-custom-class {
+    font-family: 'Comic Sans MS', cursive;
+    color: pink;
+  }
+*/

package/template/eslint.config.js

@@ -0,0 +1,47 @@
+import globals from 'globals';
+
+export default [
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      '*.min.js',
+      '**/vendor/**',
+      'docs/**'
+    ]
+  },
+  {
+    // Build scripts and lib helpers can use console.log for progress output
+    files: ['vite.config.js', 'eslint.config.js', 'lib/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      'no-console': 'off',
+      'semi': ['error', 'always'],
+      'quotes': ['error', 'single', { avoidEscape: true }]
+    }
+  },
+  {
+    files: ['**/*.js'],
+    ignores: ['vite.config.js', 'eslint.config.js', 'lib/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    },
+    rules: {
+      'no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      'semi': ['error', 'always'],
+      'quotes': ['error', 'single', { avoidEscape: true }]
+    }
+  }
+];

package/template/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "my-coursecode-project",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "description": "CourseCode project",
+  "scripts": {
+    "dev": "vite build --mode development --watch",
+    "build": "npm run lint && vite build",
+    "build:watch": "vite build --mode development --watch",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@xapi/cmi5": "^1.0.0",
+    "jose": "^6.1.3",
+    "lz-string": "^1.5.0",
+    "marked": "^17.0.1",
+    "marked-gfm-heading-id": "^4.1.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-legacy": "^7.2.1",
+    "archiver": "^7.0.1",
+    "eslint": "^9.39.1",
+    "vite": "^7.2.2",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
+}