coursecode 0.1.41 → 0.1.43

package/framework/css/02-layout.css

@@ -31,7 +31,7 @@
 
 /* App Layout - Fixed Frame Structure */
 #app {
-  max-width: 1400px;
+  max-width: var(--course-shell-max-width);
   margin: 0 auto;
   background: var(--bg-surface);
   box-shadow: var(--shadow-md);
@@ -325,19 +325,19 @@ main#content>section {
    while max-width constrains the upper bound. */
 .content-narrow {
   width: 100%;
-  max-width: 700px;
+  max-width: var(--content-width-narrow);
   margin: 0 auto;
 }
 
 .content-medium {
   width: 100%;
-  max-width: 900px;
+  max-width: var(--content-width-medium);
   margin: 0 auto;
 }
 
 .content-wide {
   width: 100%;
-  max-width: 1200px;
+  max-width: var(--content-width-wide);
   margin: 0 auto;
 }
 

package/framework/css/components/audio-player.css

@@ -413,7 +413,7 @@
 [data-layout="focused"] #audio-player {
     position: fixed;
     bottom: var(--space-4);
-    left: var(--space-4);
+    left: var(--course-edge-inset);
     right: auto;
     margin: 0;
     z-index: var(--z-fixed);

package/framework/css/components/footer.css

@@ -185,7 +185,7 @@ footer[data-footer-layout="floating"] .nav-controls {
 [data-layout="focused"] footer {
   position: fixed;
   bottom: var(--space-4);
-  right: var(--space-4);
+  right: var(--course-edge-inset);
   left: auto;
   width: auto;
   background: var(--layout-floating-nav-bg);
@@ -247,7 +247,7 @@ footer[data-footer-layout="floating"] .nav-controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 calc(var(--space-4) + env(safe-area-inset-left, 0px)) 0 calc(var(--space-4) + env(safe-area-inset-right, 0px));
+  padding: 0 calc(var(--course-edge-inset) + env(safe-area-inset-left, 0px)) 0 calc(var(--course-edge-inset) + env(safe-area-inset-right, 0px));
   pointer-events: none;
 }
 

package/framework/css/design-tokens.css

@@ -492,16 +492,23 @@
   --btn-transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-interactive), transform var(--transition-interactive), opacity var(--transition-fast), filter var(--transition-fast);
   --btn-hover-translate-y: var(--motion-lift-sm); /* Shared hover lift for button variants */
 
-   /* Layout spacing defaults - overridden by responsive breakpoint classes */
-   --content-padding: var(--space-10);
-   --section-padding: var(--space-8);
-   --header-padding-x: var(--space-6);
-   --header-padding-y: var(--space-3);
-   --header-height: 72px;
-   --footer-padding-x: var(--space-6);
-   --footer-padding-y: var(--space-3);
-   --nav-padding-x: var(--space-6);
-   --nav-padding-y: var(--space-2);
+  /* Layout spacing defaults - overridden by responsive breakpoint classes */
+  --course-shell-max-width: 1400px;
+  --course-shell-max-width-large: 1440px;
+  --course-edge-base: var(--space-4);
+  --content-width-narrow: 700px;
+  --content-width-medium: 900px;
+  --content-width-wide: 1200px;
+  --focused-content-max-width: 1000px;
+  --content-padding: var(--space-10);
+  --section-padding: var(--space-8);
+  --header-padding-x: var(--space-6);
+  --header-padding-y: var(--space-3);
+  --header-height: 72px;
+  --footer-padding-x: var(--space-6);
+  --footer-padding-y: var(--space-3);
+  --nav-padding-x: var(--space-6);
+  --nav-padding-y: var(--space-2);
 
   /* Input System - Unified styling */
   --input-padding-y: var(--space-3);

package/framework/css/layouts/base.css

@@ -21,6 +21,14 @@
     --layout-floating-nav-bg: var(--footer-floating-bg);
     --layout-floating-nav-border: 1px solid var(--footer-floating-border);
     --layout-floating-nav-shadow: var(--footer-floating-shadow);
+
+    /* Edge inset for floating UI (audio player, footer pill, FAB toggles,
+       edge nav arrows). On wide viewports, add the centered app gutter before
+       applying the normal in-frame edge padding. */
+    --course-edge-inset: max(
+        var(--course-edge-base),
+        calc(((100vw - var(--course-shell-max-width)) / 2) + var(--course-edge-base))
+    );
 }
 
 /* Default layout is traditional if not specified */

package/framework/css/layouts/focused.css

@@ -60,7 +60,7 @@
     --header-border: var(--nav-edge-border);
     position: fixed;
     top: var(--space-4);
-    left: var(--space-4);
+    left: var(--course-edge-inset);
     z-index: var(--z-fixed);
     width: var(--nav-edge-control-size);
     height: var(--nav-edge-control-size);
@@ -103,7 +103,7 @@
 }
 
 [data-layout="focused"] main#content>section {
-    max-width: 1000px;
+    max-width: var(--focused-content-max-width);
     width: 100%;
     border: none;
     box-shadow: none;
@@ -112,7 +112,7 @@
 
 /* Slide container centered */
 [data-layout="focused"] #slide-container {
-    max-width: 1000px;
+    max-width: var(--focused-content-max-width);
     margin: 0 auto;
 }
 

package/framework/css/layouts/presentation.css

@@ -63,7 +63,7 @@
     --header-border: var(--nav-edge-border);
     position: fixed;
     top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
-    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
+    left: calc(var(--course-edge-inset) + env(safe-area-inset-left, 0px));
     z-index: var(--z-fixed);
     width: var(--nav-edge-control-size);
     height: var(--nav-edge-control-size);

package/framework/css/responsive-structure.css

@@ -17,21 +17,29 @@
    ============================================================================ */
 
 html.bp-min-large-desktop #app {
-  max-width: 1440px;
+  max-width: var(--course-shell-max-width);
   height: 100%;
   margin: 0 auto;
 }
 
+html.bp-min-large-desktop {
+  --course-shell-max-width: var(--course-shell-max-width-large);
+}
+
 /* ============================================================================
    DESKTOP (<= 1439px)
    ============================================================================ */
 
 html.bp-max-desktop #app {
   margin: 0;
-  max-width: none;
+  max-width: var(--course-shell-max-width);
   height: 100%;
 }
 
+html.bp-max-desktop {
+  --course-shell-max-width: 100vw;
+}
+
 /* ============================================================================
    TABLET PORTRAIT (<= 1023px)
    ============================================================================ */

package/framework/index.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" id="page-description" content="" />
   <link rel="stylesheet" href="css/framework.css" />
-  <link rel="stylesheet" href="../course/theme.css" />
+  <link rel="stylesheet" href="../template/course/theme.css" />
   <!-- Skip link is styled via framework.css for accessibility -->
 </head>
 
@@ -172,4 +172,4 @@
   <script type="module" src="./js/main.js"></script>
 </body>
 
-</html>
+</html>

package/framework/js/core/event-bus.js

@@ -120,7 +120,7 @@ class EventBus {
     // suppress to prevent infinite cascade
     if (isErrorEvent) {
       if (this._emittingError) {
-        console.warn(`[EventBus] Suppressed recursive error event: ${event}`);
+        logger.warn(`[EventBus] Suppressed recursive error event: ${event}`);
         return false;
       }
       this._emittingError = true;

package/framework/js/drivers/scorm-2004-driver.js

@@ -507,8 +507,7 @@ export class Scorm2004Driver extends ScormDriverBase {
         const value = this._scorm.get(key);
         const errorCode = this._scorm.debug.getCode();
 
-        // Error 403 = "Data Model Element Value Not Initialized" - expected for optional fields
-        if (errorCode === 403) {
+        if (this._isOptionalReadError(errorCode)) {
             return null;
         }
 
@@ -561,18 +560,12 @@ export class Scorm2004Driver extends ScormDriverBase {
      * Populates the CMI cache at init time. Single LMS read pass.
      */
     _populateCache() {
-        // Helper: read a CMI value via strict _getValue, but tolerate error 403
-        // ("Data Model Element Value Not Initialized") which strict LMSes like
-        // SCORM Cloud return for unset elements on a fresh session.
-        // Any other SCORM error still throws through _getValue's normal path.
+        // Startup cache hydration reads LMS state opportunistically. Some LMS
+        // adapters report supported-but-empty or unavailable optional fields as
+        // SCORM errors, so use the optional read path here and keep strict reads
+        // for required operations.
         const getOrDefault = (key, fallback) => {
-            try {
-                return this._getValue(key) || fallback;
-            } catch (e) {
-                const code = this._scorm.debug.getCode();
-                if (code === 403) return fallback;
-                throw e;
-            }
+            return this._getValueOptional(key) || fallback;
         };
 
         // Read-only scalars (may be uninitialized on first launch)
@@ -712,6 +705,11 @@ export class Scorm2004Driver extends ScormDriverBase {
         throw new Error(msg);
     }
 
+    _isOptionalReadError(code) {
+        const numericCode = Number(code);
+        return numericCode === 401 || numericCode === 403;
+    }
+
     // --- Recovery Mode Helpers ---
 
     _getValueRecovered(key) {
@@ -739,7 +737,7 @@ export class Scorm2004Driver extends ScormDriverBase {
             const value = api.GetValue(key);
             const errCode = api.GetLastError ? parseInt(api.GetLastError(), 10) : 0;
 
-            if (errCode === 403) {
+            if (this._isOptionalReadError(errCode)) {
                 return null;
             }
 

package/framework/js/utilities/view-manager.js

@@ -111,12 +111,25 @@ export function createViewManager(container, scope = 'local') {
             return element;
         }
 
-        // Check for per-slide override via data-content-width attribute
-        const dataAttrWidth = element.getAttribute('data-content-width');
-        const slideConfigWidth = dataAttrWidth;
+        const contentWidthValues = new Set(['narrow', 'medium', 'wide', 'full']);
+
+        // Check for per-slide override via data-content-width attribute. Slide
+        // modules commonly return a neutral container with the authored slide as
+        // its only child, so support the root and that first slide element.
+        const slideConfigWidth = getContentWidthOverride(element);
+        if (slideConfigWidth && !contentWidthValues.has(slideConfigWidth)) {
+            logger.warn(`[ViewManager] Ignoring invalid data-content-width="${slideConfigWidth}". Expected narrow, medium, wide, or full.`);
+        }
+
+        const globalConfigWidth = courseConfig?.slideDefaults?.contentWidth;
+        if (!slideConfigWidth && globalConfigWidth && !contentWidthValues.has(globalConfigWidth)) {
+            logger.warn(`[ViewManager] Ignoring invalid slideDefaults.contentWidth="${globalConfigWidth}". Expected narrow, medium, wide, or full.`);
+        }
 
         // Determine which width to use: per-slide override > global config > no wrapping
-        const configWidth = slideConfigWidth || courseConfig?.slideDefaults?.contentWidth;
+        const configWidth = contentWidthValues.has(slideConfigWidth)
+            ? slideConfigWidth
+            : (contentWidthValues.has(globalConfigWidth) ? globalConfigWidth : null);
         
         if (!configWidth) {
             // No wrapping configured
@@ -136,6 +149,24 @@ export function createViewManager(container, scope = 'local') {
         return wrapper;
     }
 
+    /**
+     * Gets a per-slide content width override from the rendered root or from
+     * the single authored slide element inside a neutral wrapper.
+     * @param {HTMLElement} element - The rendered element
+     * @returns {string|null} The requested width, if present
+     * @private
+     */
+    function getContentWidthOverride(element) {
+        const rootOverride = element.getAttribute('data-content-width');
+        if (rootOverride) return rootOverride;
+
+        if (element.children?.length === 1) {
+            return element.firstElementChild?.getAttribute('data-content-width');
+        }
+
+        return null;
+    }
+
     /**
      * Checks if an element or its children already have a content-width class.
      * @param {HTMLElement} element - The element to check

package/framework/js/vendor/pipwerks.js

@@ -31,13 +31,9 @@ further modified by Philip Hutchison
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
         define([], factory);
-    } else if (typeof module === 'object' && module.exports) {
-        // Node. Does not work with strict CommonJS, but
-        // only CommonJS-like environments that support module.exports,
-        // like Node.
-        module.exports = factory();
     } else {
-        // Browser globals (root is window)
+        // Browser/global object. CourseCode imports this vendored copy as ESM,
+        // so avoid CommonJS export branches that modern bundlers warn about.
         root.pipwerks = factory();
     }
 }(typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : this, function () {
@@ -927,5 +923,5 @@ further modified by Philip Hutchison
 // ESM Export for Vite/modern bundlers
 // Added to enable ES module imports while keeping original UMD intact
 // =============================================================================
-export default (typeof window !== 'undefined' && window.pipwerks) || (typeof global !== 'undefined' && global.pipwerks);
-export const SCORM = (typeof window !== 'undefined' && window.pipwerks?.SCORM) || (typeof global !== 'undefined' && global.pipwerks?.SCORM);
+export default globalThis.pipwerks;
+export const SCORM = globalThis.pipwerks?.SCORM;

package/framework/scripts/generate-narration.js

@@ -43,15 +43,22 @@ import {
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-// __dirname = framework/scripts, go up two levels to reach scorm_template
+// __dirname = framework/scripts, go up two levels to reach the course project
+// root. Real authored courses use ./course; this framework repo keeps its
+// development fixture at ./template/course.
 const SCORM_TEMPLATE_DIR = path.resolve(__dirname, '../..');
 const ROOT_DIR = path.resolve(SCORM_TEMPLATE_DIR, '..');
-const COURSE_DIR = path.join(SCORM_TEMPLATE_DIR, 'course');
+const DEFAULT_COURSE_DIR = path.join(SCORM_TEMPLATE_DIR, 'course');
+const FRAMEWORK_DEV_COURSE_DIR = path.join(SCORM_TEMPLATE_DIR, 'template', 'course');
+const COURSE_DIR = fs.existsSync(DEFAULT_COURSE_DIR)
+    ? DEFAULT_COURSE_DIR
+    : (fs.existsSync(FRAMEWORK_DEV_COURSE_DIR) ? FRAMEWORK_DEV_COURSE_DIR : DEFAULT_COURSE_DIR);
+const COURSE_ROOT_DIR = path.dirname(COURSE_DIR);
 const ASSETS_DIR = path.join(COURSE_DIR, 'assets');
 const AUDIO_DIR = path.join(ASSETS_DIR, 'audio');
 
 const SLIDES_DIR = path.join(COURSE_DIR, 'slides');
-const CACHE_FILE = path.join(SCORM_TEMPLATE_DIR, '.narration-cache.json');
+const CACHE_FILE = path.join(COURSE_ROOT_DIR, '.narration-cache.json');
 
 // Parse command line arguments
 const args = process.argv.slice(2);
@@ -73,6 +80,7 @@ const REBUILD_CACHE = args.includes('--rebuild-cache');
 function loadEnv() {
     const searchPaths = [
         path.join(process.cwd(), '.env'),           // Current working directory (most common)
+        path.join(COURSE_ROOT_DIR, '.env'),         // Course project or framework dev template
         path.join(SCORM_TEMPLATE_DIR, '.env'),      // Template directory
         path.join(ROOT_DIR, '.env')                 // Root directory
     ];

package/lib/stub-player/config-panel.js

@@ -161,7 +161,7 @@ export function createConfigPanelHandlers(context) {
                     <select data-path="slideDefaults.contentWidth" ${['focused', 'presentation', 'canvas'].includes(configData.layout) ? 'disabled' : ''}>
                         ${widths.map(w => `<option value="${w}" ${configData.slideDefaults?.contentWidth === w ? 'selected' : ''}>${w}</option>`).join('')}
                     </select>
-                    ${['focused', 'presentation', 'canvas'].includes(configData.layout) ? `<span class="config-override-hint" title="${configData.layout === 'focused' ? 'Focused layout uses 1000px width' : configData.layout === 'canvas' ? 'Canvas layout has no framework chrome' : 'Presentation layout uses full viewport'}">override</span>` : ''}
+                    ${['focused', 'presentation', 'canvas'].includes(configData.layout) ? `<span class="config-override-hint" title="${configData.layout === 'focused' ? 'Focused layout uses --focused-content-max-width' : configData.layout === 'canvas' ? 'Canvas layout has no framework chrome' : 'Presentation layout uses full viewport'}">override</span>` : ''}
                 </div>
             </div>
             

package/package.json

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

package/template/.narration-cache.json

@@ -0,0 +1,6 @@
+{
+  "@slides/example-welcome.js": "91d353d330166293491f0c34ef8c4f6a",
+  "@slides/example-ui-showcase.js#demo-modal": "4f7f4e4b846ec06f86a664ae809192aa",
+  "@slides/example-ui-showcase.js#full-player": "4349b331452acab4b97f46d9655cb006",
+  "@slides/example-ui-showcase.js#compact-player": "9ab41cdd6b1be5248fb446cee91cd0a2"
+}

package/template/course/course-config.js

@@ -241,6 +241,11 @@ export const courseConfig = {
                     engagement: {
                         required: false
                     },
+                    audio: {
+                        src: '@slides/example-welcome.js',
+                        autoplay: false,
+                        completionThreshold: 0.95
+                    },
                     navigation: {
                         sequential: true,
                         controls: {

package/template/course/slides/example-ui-showcase.js

@@ -833,7 +833,7 @@ export const slide = {
                     data-title="Demo Modal" 
                     data-body="#demo-modal-body"
                     data-footer="#demo-modal-footer"
-                    data-audio-src="audio/example-ui-showcase--demo-modal.mp3"
+                    data-audio-src="@slides/example-ui-showcase.js#demo-modal"
                     data-audio-required="false">
                     Launch Modal with Audio
                   </button>
@@ -1497,7 +1497,7 @@ export const slide = {
                     <h4 class="font-bold mb-2">Full Size Player</h4>
                     <p class="text-sm mb-3">Complete controls with progress bar, time display, and all playback options.</p>
                     <div class="mt-2" data-component="audio-player" 
-                         data-audio-src="audio/example-ui-showcase--full-player.mp3"
+                         data-audio-src="@slides/example-ui-showcase.js#full-player"
                          data-audio-id="full-player-demo">
                     </div>
                   </div>
@@ -1507,7 +1507,7 @@ export const slide = {
                     <h4 class="font-bold mb-2">Compact Player</h4>
                     <p class="text-sm mb-3">Minimal controls (play/pause, restart, mute) - same style used in modals.</p>
                     <div class="mt-2" data-component="audio-player" 
-                         data-audio-src="audio/example-ui-showcase--compact-player.mp3"
+                         data-audio-src="@slides/example-ui-showcase.js#compact-player"
                          data-audio-id="compact-player-demo"
                          data-audio-compact="true">
                     </div>
@@ -1765,9 +1765,9 @@ export const slide = {
  *   - course/assets/audio/example-ui-showcase--compact-player.mp3
  * 
  * Reference in slide HTML:
- *   - Modal audio: data-audio-src="audio/example-ui-showcase--demo-modal.mp3"
- *   - Full player: data-audio-src="audio/example-ui-showcase--full-player.mp3"
- *   - Compact player: data-audio-src="audio/example-ui-showcase--compact-player.mp3"
+ *   - Modal audio: data-audio-src="@slides/example-ui-showcase.js#demo-modal"
+ *   - Full player: data-audio-src="@slides/example-ui-showcase.js#full-player"
+ *   - Compact player: data-audio-src="@slides/example-ui-showcase.js#compact-player"
  */
 export const narration = {
   'demo-modal': `

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

@@ -121,3 +121,13 @@ export const slide = {
     return container;
   }
 };
+
+export const narration = `
+Welcome to CourseCode.
+
+This opening slide introduces the template course and the main workflow it demonstrates.
+
+CourseCode helps training teams, instructional designers, and subject matter experts build interactive learning experiences with AI assistance.
+
+Use this course to explore the authoring workflow, preview tools, reusable components, theming options, and LMS-ready publishing process.
+`;

package/template/course/theme.css

@@ -109,6 +109,17 @@
        Adjust height, padding, and width of structural UI areas.
     */
 
+    /* Course shell sizing */
+    /* --course-shell-max-width: 1400px; */        /* Outer app frame max width */
+    /* --course-shell-max-width-large: 1440px; */  /* Outer app frame max width on large desktop */
+    /* --course-edge-base: 1rem; */                /* Floating UI inset within the app frame */
+
+    /* Slide content widths */
+    /* --content-width-narrow: 700px; */           /* .content-narrow max width */
+    /* --content-width-medium: 900px; */           /* .content-medium max width */
+    /* --content-width-wide: 1200px; */            /* .content-wide max width */
+    /* --focused-content-max-width: 1000px; */     /* Focused layout viewport-fit content cap */
+
     /* Header sizing */
     /* --header-height: 72px; */                    /* Header bar height */
     /* --header-padding-x: 1.5rem; */              /* Header horizontal padding */