coursecode 0.1.6 → 0.1.7

package/bin/cli.js

@@ -322,6 +322,7 @@ program
   .description('Build and deploy course to CourseCode Cloud')
   .option('--preview', 'Deploy as preview (expires in 7 days)')
   .option('--password', 'Password-protect preview (interactive prompt)')
+  .option('-m, --message <message>', 'Deploy reason (e.g. "Fixed accessibility issues")')
   .option('--local', 'Use local Cloud instance (http://localhost:3000)')
   .action(async (options) => {
     const { deploy, setLocalMode } = await import('../lib/cloud.js');

package/framework/css/02-layout.css

@@ -298,7 +298,14 @@ main#content {
   position: relative;
   flex: 1;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: clip;
+}
+
+/* Remove top padding when a flush-top hero is present (the hero wants to
+   sit directly against the header). Negative-margin tricks can't escape
+   the intermediate flex containers, so we remove padding at the source. */
+main#content:has([data-component="hero"].hero-flush-top) {
+  padding-top: 0;
 }
 
 /* Content Sections - Clean Card Design with Animation */

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

@@ -545,9 +545,10 @@ html.bp-max-mobile-landscape[data-layout="article"] #audio-player .audio-player-
 }
 
 html.bp-max-mobile-landscape[data-layout="article"] #audio-player .audio-btn {
-    width: 36px;
-    height: 36px;
-    min-height: 36px;
+    width: 44px;
+    height: 44px;
+    min-height: 44px;
+    touch-action: manipulation;
 }
 
 html.bp-max-mobile-landscape[data-layout="article"] #audio-player .audio-progress-container {

package/framework/css/components/buttons.css

@@ -610,19 +610,20 @@ html:not([data-layout="article"]):not([data-layout="focused"]):not([data-layout=
 
 html.bp-max-mobile-landscape[data-layout="article"] footer #prevBtn,
 html.bp-max-mobile-landscape[data-layout="article"] footer #nextBtn {
-  width: 36px;
-  max-width: 36px;
-  height: 36px;
-  min-height: 36px;
+  width: 44px;
+  max-width: 44px;
+  height: 44px;
+  min-height: 44px;
   padding: 0;
   overflow: hidden;
+  touch-action: manipulation;
 }
 
 html.bp-max-mobile-landscape[data-layout="article"] footer #prevBtn>svg,
 html.bp-max-mobile-landscape[data-layout="article"] footer #nextBtn>svg {
   display: block;
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
   margin: 0;
 }
 

package/framework/css/components/footer.css

@@ -269,7 +269,10 @@ html.bp-max-mobile-landscape[data-layout="article"] footer {
   max-width: 100vw;
   box-sizing: border-box;
   border-radius: 0;
-  padding: var(--space-2) var(--space-3);
+  padding-top: var(--space-2);
+  padding-right: calc(var(--space-3) + env(safe-area-inset-right, 0px));
+  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
+  padding-left: calc(var(--space-3) + env(safe-area-inset-left, 0px));
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -289,7 +292,7 @@ html.bp-max-mobile-landscape[data-layout="article"] .nav-controls {
 html.bp-max-mobile-landscape[data-layout="article"] .nav-nav-buttons {
   order: 2;
   margin-left: auto;
-  margin-right: var(--space-1);
+  margin-right: 0;
   display: flex;
   flex-direction: row;
   gap: var(--space-2);

package/framework/css/components/hero.css

@@ -43,8 +43,10 @@
 
 /* Hero content container */
 [data-component="hero"] .hero-content {
+  width: 100%;
   max-width: 800px;
   margin: 0 auto;
+  box-sizing: border-box;
   position: relative;
   z-index: 2;
 }
@@ -108,6 +110,28 @@
   border-color: transparent;
 }
 
+/* Hero badge color variants - solid backgrounds */
+.hero-badge.hero-badge-primary,
+[data-component="hero"] .hero-badge.hero-badge-primary {
+  background: var(--color-primary);
+  color: var(--color-white);
+  border-color: transparent;
+}
+
+.hero-badge.hero-badge-secondary,
+[data-component="hero"] .hero-badge.hero-badge-secondary {
+  background: var(--color-secondary);
+  color: var(--color-gray-900);
+  border-color: transparent;
+}
+
+.hero-badge.hero-badge-accent,
+[data-component="hero"] .hero-badge.hero-badge-accent {
+  background: var(--color-accent);
+  color: var(--color-gray-900);
+  border-color: transparent;
+}
+
 [data-component="hero"].hero-overlay .hero-badge,
 [data-component="hero"].hero-dark .hero-badge {
   background: var(--color-white-alpha-25);
@@ -139,14 +163,17 @@
 
 /* Full bleed - breaks out of container to span full viewport width */
 [data-component="hero"].hero-full-bleed {
-  width: 100vw;
+  width: auto;
   margin-left: calc(50% - 50vw);
-  border-radius: 0; /* Remove rounded corners when full bleed */
+  margin-right: calc(50% - 50vw);
+  border-radius: 0;
 }
 
-/* Flush top - removes container top padding (stackable with hero-full-bleed) */
+/* Flush top - hero sits directly against the header.
+   Padding removal is handled by main#content:has() in 02-layout.css.
+   This class is retained as the semantic marker that triggers the :has() rule. */
 [data-component="hero"].hero-flush-top {
-  margin-top: calc(-1 * var(--content-padding, var(--space-10)));
+  margin-top: 0;
 }
 
 /* Split hero - Image on one side, content on other */

package/framework/css/framework.css

@@ -83,4 +83,5 @@
 
 /* 7. Responsive & Accessibility (load last) */
 @import './responsive.css';
-@import './accessibility.css';
+@import './responsive-structure.css';
+@import './accessibility.css';

package/framework/css/layouts/article.css

@@ -254,5 +254,5 @@ html.bp-max-mobile-landscape[data-layout="article"] .sidebar {
 
 /* Add bottom padding to content */
 html.bp-max-mobile-landscape[data-layout="article"] main#content {
-    padding-bottom: calc(var(--space-8) + 52px);
+    padding-bottom: calc(var(--space-8) + 68px + env(safe-area-inset-bottom, 0px));
 }

package/framework/css/responsive-structure.css

@@ -0,0 +1,210 @@
+/* ============================================================================
+   RESPONSIVE STRUCTURE - App shell, header chrome, footer/nav/audio chrome
+   ============================================================================
+
+   PURPOSE:
+   - Holds responsive behavior for framework chrome and shell structure.
+   - Keeps `responsive.css` focused on shared content/component responsiveness.
+
+   IMPORTANT:
+   - If a layout (article/focused/presentation/traditional) owns a responsive
+     behavior in layout/component DATA-LAYOUT rules, generic structure selectors
+     here must exclude that layout to avoid cascade conflicts.
+   ============================================================================ */
+
+/* ============================================================================
+   LARGE DESKTOP (>= 1440px)
+   ============================================================================ */
+
+html.bp-min-large-desktop #app {
+  max-width: 1440px;
+  height: 100%;
+  margin: 0 auto;
+}
+
+/* ============================================================================
+   DESKTOP (<= 1439px)
+   ============================================================================ */
+
+html.bp-max-desktop #app {
+  margin: 0;
+  max-width: none;
+  height: 100%;
+}
+
+/* ============================================================================
+   TABLET PORTRAIT (<= 1023px)
+   ============================================================================ */
+
+html.bp-max-tablet-portrait #app {
+  margin: 0;
+  border-radius: 0;
+  height: 100%;
+}
+
+/* Header at tablet portrait: tighter spacing but keep row layout */
+html.bp-max-tablet-portrait header {
+  gap: var(--space-2);
+}
+
+html.bp-max-tablet-portrait #app > header h1 {
+  font-size: var(--font-size-lg);
+}
+
+html.bp-max-tablet-portrait #accessibility-menu {
+  right: var(--space-4);
+}
+
+/* Footer at tablet portrait: tighter gaps but keep row layout
+   Exclude article/focused - these layouts own footer behavior. */
+html.bp-max-tablet-portrait:not([data-layout="article"]):not([data-layout="focused"]) .nav-controls {
+  gap: var(--space-2);
+}
+
+/* ============================================================================
+   MOBILE LANDSCAPE (<= 767px)
+   ============================================================================ */
+
+html.bp-max-mobile-landscape #app {
+  margin: 0;
+  border-radius: 0;
+  height: 100%;
+}
+
+/* Mobile header: compact single-row layout */
+html.bp-max-mobile-landscape header {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  gap: var(--space-2);
+}
+
+html.bp-max-mobile-landscape #brand {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+html.bp-max-mobile-landscape #brand img.logo {
+  height: 36px;
+  padding: var(--space-1);
+  padding-left: 0;
+}
+
+html.bp-max-mobile-landscape #brand .brand-title {
+  font-size: var(--font-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+html.bp-max-mobile-landscape #app > header h1 {
+  font-size: var(--font-size-base);
+}
+
+/* Hide header progress and breadcrumbs on mobile to save space */
+html.bp-max-mobile-landscape .header-progress {
+  display: none !important;
+}
+
+html.bp-max-mobile-landscape .breadcrumbs {
+  display: none !important;
+}
+
+/* Generic mobile footer/nav/audio structure (traditional/default-like layouts).
+   Exclude article/focused - they define mobile footer/nav/audio in DATA-LAYOUT rules. */
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .nav-controls {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--space-2);
+}
+
+/* Mobile footer: Previous/Next fill the row, Exit hidden (moved to sidebar) */
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .nav-nav-buttons {
+  display: flex;
+  gap: var(--space-2);
+  flex: 1;
+  width: auto;
+}
+
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .nav-nav-buttons button {
+  flex: 1;
+  width: auto;
+  padding: var(--space-2) var(--space-3);
+}
+
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .nav-exit-button {
+  display: none;
+}
+
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .app-footer button {
+  width: auto;
+}
+
+/* Mobile footer: stacked layout with audio on top */
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .app-footer {
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .nav-controls {
+  width: 100%;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/* Audio player: full width, above nav buttons, compact variant */
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) #audio-player {
+  width: 100%;
+  order: -1;
+  margin-left: 0;
+}
+
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .audio-player-controls {
+  width: 100%;
+  justify-content: center;
+  gap: var(--space-1);
+  background: var(--bg-surface);
+  border: var(--border-width-md) solid var(--border-default);
+}
+
+/* Hide progress bar and time on mobile (compact variant) */
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .audio-progress-container,
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .audio-time {
+  display: none;
+}
+
+/* Nav buttons: row layout filling width */
+html.bp-max-mobile-landscape:not([data-layout="article"]):not([data-layout="focused"]) .nav-nav-buttons {
+  width: 100%;
+  justify-content: center;
+}
+
+/* ============================================================================
+   MOBILE PORTRAIT (<= 479px)
+   ============================================================================ */
+
+html.bp-max-mobile-portrait #app {
+  margin: 0;
+  border-radius: 0;
+  height: 100%;
+}
+
+/* Mobile portrait: even tighter header */
+html.bp-max-mobile-portrait #brand img.logo {
+  height: 32px;
+  padding-left: 0;
+}
+
+html.bp-max-mobile-portrait #brand .brand-title {
+  font-size: var(--font-size-sm);
+}
+
+html.bp-max-mobile-portrait #app > header h1 {
+  font-size: var(--font-size-sm);
+}
+
+/* Exclude article/focused - layout-specific button sizing takes precedence */
+html.bp-max-mobile-portrait:not([data-layout="article"]):not([data-layout="focused"]) .app-footer button {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-sm);
+}

package/framework/css/responsive.css

@@ -57,6 +57,14 @@
    html.bp-max-tablet-portrait  - Tablets and below (portrait)
    html.bp-max-mobile-landscape - Mobile devices (landscape)
    html.bp-max-mobile-portrait  - Mobile devices (portrait)
+
+   MAINTAINER NOTE (layout-owned responsive behavior):
+   - Keep generic responsive.css rules focused on shared component/content patterns.
+   - When a layout (article/focused/presentation/traditional) has its own responsive
+     rules in framework/css/layouts/* or component DATA-LAYOUT sections, scope
+     generic structural rules to exclude that layout to avoid cascade conflicts.
+   - High-risk generic selectors: .app-footer, .nav-controls, .nav-nav-buttons,
+     .nav-exit-button, #audio-player, .audio-player-controls.
    
    LAST UPDATED: 2024-12-10
    ============================================================================ */
@@ -75,11 +83,7 @@ html.bp-min-large-desktop {
   --footer-padding-y: var(--space-3);
 }
 
-html.bp-min-large-desktop #app {
-  max-width: 1440px;
-  height: 100%;
-  margin: 0 auto;
-}
+/* App shell sizing moved to responsive-structure.css */
 
 /* ============================================================================
    DESKTOP (<= 1439px)
@@ -95,11 +99,7 @@ html.bp-max-desktop {
   --footer-padding-y: var(--space-5);
 }
 
-html.bp-max-desktop #app {
-  margin: 0;
-  max-width: none;
-  height: 100%;
-}
+/* App shell sizing moved to responsive-structure.css */
 
 /* ============================================================================
    TABLET LANDSCAPE (<= 1199px)
@@ -135,29 +135,7 @@ html.bp-max-tablet-portrait {
   --nav-padding-y: var(--space-2);
 }
 
-html.bp-max-tablet-portrait #app {
-  margin: 0;
-  border-radius: 0;
-  height: 100%;
-}
-
-/* Header at tablet portrait: tighter spacing but keep row layout */
-html.bp-max-tablet-portrait header {
-  gap: var(--space-2);
-}
-
-html.bp-max-tablet-portrait #app>header h1 {
-  font-size: var(--font-size-lg);
-}
-
-html.bp-max-tablet-portrait #accessibility-menu {
-  right: var(--space-4);
-}
-
-/* Footer at tablet portrait: tighter gaps but keep row layout */
-html.bp-max-tablet-portrait .nav-controls {
-  gap: var(--space-2);
-}
+/* Tablet portrait shell/header/footer chrome responsive rules moved to responsive-structure.css */
 
 html.bp-max-tablet-portrait .stats-grid,
 html.bp-max-tablet-portrait .features-grid {
@@ -210,51 +188,7 @@ html.bp-max-mobile-landscape {
   --nav-padding-y: var(--space-2);
 }
 
-html.bp-max-mobile-landscape #app {
-  margin: 0;
-  border-radius: 0;
-  height: 100%;
-}
-
-/* Mobile header: compact single-row layout */
-html.bp-max-mobile-landscape header {
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  gap: var(--space-2);
-}
-
-html.bp-max-mobile-landscape #brand {
-  flex: 1 1 auto;
-  justify-content: flex-start;
-  min-width: 0;
-}
-
-html.bp-max-mobile-landscape #brand img.logo {
-  height: 36px;
-  padding: var(--space-1);
-  padding-left: 0;
-}
-
-html.bp-max-mobile-landscape #brand .brand-title {
-  font-size: var(--font-size-base);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-html.bp-max-mobile-landscape #app>header h1 {
-  font-size: var(--font-size-base);
-}
-
-/* Hide header progress on mobile to save space */
-html.bp-max-mobile-landscape .header-progress {
-  display: none !important;
-}
-
-/* Hide breadcrumbs on mobile */
-html.bp-max-mobile-landscape .breadcrumbs {
-  display: none !important;
-}
+/* Mobile shell/header/footer/audio chrome responsive rules moved to responsive-structure.css */
 
 /* Tabs: stack vertically on mobile */
 html.bp-max-mobile-landscape .content-tabs,
@@ -297,75 +231,7 @@ html.bp-max-mobile-landscape .assessment-nav-center {
   margin-bottom: var(--space-2);
 }
 
-html.bp-max-mobile-landscape .nav-controls {
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: var(--space-2);
-}
-
-/* Mobile footer: Previous/Next fill the row, Exit hidden (moved to sidebar) */
-html.bp-max-mobile-landscape .nav-nav-buttons {
-  display: flex;
-  gap: var(--space-2);
-  flex: 1;
-  width: auto;
-}
-
-html.bp-max-mobile-landscape .nav-nav-buttons button {
-  flex: 1;
-  width: auto;
-  padding: var(--space-2) var(--space-3);
-}
-
-html.bp-max-mobile-landscape .nav-exit-button {
-  display: none;
-}
-
-
-
-html.bp-max-mobile-landscape .app-footer button {
-  width: auto;
-}
-
-/* Mobile footer: stacked layout with audio on top */
-html.bp-max-mobile-landscape .app-footer {
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-html.bp-max-mobile-landscape .nav-controls {
-  width: 100%;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-/* Audio player: full width, above nav buttons, compact variant */
-html.bp-max-mobile-landscape #audio-player {
-  width: 100%;
-  order: -1;
-  margin-left: 0;
-}
-
-html.bp-max-mobile-landscape .audio-player-controls {
-  width: 100%;
-  justify-content: center;
-  /* Apply compact variant styles on mobile */
-  gap: var(--space-1);
-  background: var(--bg-surface);
-  border: var(--border-width-md) solid var(--border-default);
-}
-
-/* Hide progress bar and time on mobile (compact variant) */
-html.bp-max-mobile-landscape .audio-progress-container,
-html.bp-max-mobile-landscape .audio-time {
-  display: none;
-}
-
-/* Nav buttons: row layout filling width */
-html.bp-max-mobile-landscape .nav-nav-buttons {
-  width: 100%;
-  justify-content: center;
-}
+/* Generic mobile footer/nav/audio structure moved to responsive-structure.css */
 
 html.bp-max-mobile-landscape .review-actions {
   flex-direction: column;
@@ -394,25 +260,7 @@ html.bp-max-mobile-portrait {
   --nav-padding-y: var(--space-2);
 }
 
-html.bp-max-mobile-portrait #app {
-  margin: 0;
-  border-radius: 0;
-  height: 100%;
-}
-
-/* Mobile portrait: even tighter header */
-html.bp-max-mobile-portrait #brand img.logo {
-  height: 32px;
-  padding-left: 0;
-}
-
-html.bp-max-mobile-portrait #brand .brand-title {
-  font-size: var(--font-size-sm);
-}
-
-html.bp-max-mobile-portrait #app>header h1 {
-  font-size: var(--font-size-sm);
-}
+/* Mobile portrait shell/header/footer chrome responsive rules moved to responsive-structure.css */
 
 html.bp-max-mobile-portrait main#content>section {
   margin-bottom: var(--space-6);
@@ -428,10 +276,7 @@ html.bp-max-mobile-portrait .interaction {
   padding: var(--space-5);
 }
 
-html.bp-max-mobile-portrait .app-footer button {
-  padding: var(--space-3) var(--space-4);
-  font-size: var(--font-size-sm);
-}
+/* Mobile portrait generic footer button sizing moved to responsive-structure.css */
 
 /* Keep traditional footer compact across breakpoints */
 html[data-layout="traditional"] {

package/framework/docs/COURSE_AUTHORING_GUIDE.md

@@ -86,7 +86,6 @@ my-course/
 
 **Progressive enhancement:** After import, AI agents or authors can replace image slides with interactive HTML, add assessments, or add engagement tracking.
 
-
 ## CLI Preview
 
 Test your course with a stub LMS wrapper.
@@ -182,7 +181,6 @@ coursecode narration --force          # Regenerate all (ignore cache)
 coursecode narration --dry-run        # Preview without generating
 ```
 
-
 ## CLI Export Content
 
 Extracts reviewable text content from SCORM course source files into structured Markdown.
@@ -320,17 +318,17 @@ coursecode build  # Creates dist/ + *_<client>_proxy.zip per client
 
 ## Data Persistence
 
-
-**Never call SCORM API directly** - use these managers:
+**Never call SCORM API directly** - use the framework APIs exposed on `CourseCode`:
 
 | Manager | Purpose | Key Methods |
 |---------|---------|-------------|
-| `StateManager` | Custom persistent data | `.set(key, value)`, `.get(key)` |
-| `ObjectiveManager` | Track learning objectives | Auto: built-in criteria + assessment-linked<br>Manual: `.setCompletionStatus(id, status)`, `.setSuccessStatus(id, status)`, `.setScore(id, score)` |
-| `InteractionManager` | Record student responses | Auto-logs interactions |
-| `FlagManager` | Boolean flags in suspend data | `.setFlag(name, bool)`, `.getFlag(name)` |
-| `EngagementManager` | Track content engagement | `.getProgress(slideId)`, `.isSlideComplete(slideId)` |
-| `ScoreManager` | Calculate and report scores | Auto: configured in `course-config.js` |
+| `stateManager` | LMS + persistent course state (sole gateway) | `.getDomainState(domain)`, `.setDomainState(domain, value)`, `.reportScore(...)`, `.reportCompletion(...)`, `.setBookmark(...)` |
+| `objectiveManager` | Track learning objectives | Auto: built-in criteria + assessment-linked<br>Manual: `.setCompletionStatus(id, status)`, `.setSuccessStatus(id, status)`, `.setScore(id, score)` |
+| `interactionManager` | Record/report learner interactions | Usually auto-logged by built-in interactions |
+| `flagManager` | Boolean/primitive flags in suspend data | `.setFlag(name, value)`, `.getFlag(name)`, `.removeFlag(name)` |
+| `scoreManager` | Calculate/report course scores | Usually configured in `course-config.js` (auto) |
+
+**Note:** Engagement tracking is normally configured in `course-config.js` (`slide.engagement`) and handled automatically by built-in components. Authors typically do not call an `engagementManager` directly.
 
 ### Objectives (in `course-config.js`)
 
@@ -1455,8 +1453,6 @@ parent.postMessage({ type: 'coursecode:resize', height: 400 }, '*');
 ```
 
 **Engagement tracking:** Use `flag` requirement with the key set by the embedded widget.
-
-
 ### Dropdown
 
 ```html
@@ -1511,9 +1507,6 @@ Hotspots open modals by default. Link to accordion with `data-accordion-id="acco
   </div>
 </div>
 ```
-
-
-
 ### Value Display (Reactive Text)
 
 ```html

package/framework/docs/DATA_MODEL.md

@@ -118,7 +118,7 @@ Slide visit tracking. Managed by [NavigationState.js](../js/navigation/Navigatio
 
 ### `engagement`
 
-Engagement tracking for navigation gating. Managed by [engagement-manager.js](../js/managers/engagement-manager.js).
+Engagement tracking for navigation gating. Managed by [engagement-manager.js](../js/engagement/engagement-manager.js).
 
 ```js
 {