coursecode 0.1.6 → 0.1.8

package/README.md

@@ -1,21 +1,23 @@
 # CourseCode
 
-**AI-first course authoring: create interactive e-learning without writing code, then deploy to any LMS format.**
+**Open-source, local-first course authoring with AI help — no coding required to start, full code control when you need it.**
 
-Drop in your existing PDFs, Word docs, or PowerPoints — AI converts them into complete, interactive courses. No vendor lock-in, no subscriptions. Your content, your code, deployed to any LMS.
+CourseCode creates real project files you can inspect, version, and edit directly — with a predictable, file-based workflow instead of a black-box GUI.
+
+Bring your own PDFs, Word docs, or PowerPoints, use AI to accelerate authoring, and deploy to any LMS format without vendor lock-in or subscriptions.
 
 ## Start Here
 
-If you're creating courses (non-technical or technical), use the **[User Guide](framework/docs/USER_GUIDE.md)** as your primary documentation.
+Start with the workflow that fits you:
 
-- **Course authors (non-technical):** Start with the User Guide for step-by-step workflows
-- **Course authors (technical):** The User Guide is still the best starting point, then use advanced docs as needed
+- **Course authors (prefer buttons and guided setup):** Start with **[CourseCode Desktop](https://coursecodedesktop.com)** if you want the easiest path and do not want to deal with Node.js or terminal setup
+- **Course authors (prefer editing files and running commands):** Start with the **[User Guide](framework/docs/USER_GUIDE.md)** in this repo for the framework workflow
 - **AI assistants:** Use the AI-focused docs in `framework/docs/` (for example `COURSE_AUTHORING_GUIDE.md` and `FRAMEWORK_GUIDE.md`)
 
 ## Features
 
 - **MCP integration**: AI connects directly to your course — previews, screenshots, linting, and testing without manual file sharing
-- **No code writing required**: Describe what you want and let AI build slides, interactions, and structure
+- **No coding required to start**: Describe what you want and let AI help build slides, interactions, and structure
 - **Full LMS integration**: SCORM 1.2, SCORM 2004, cmi5, and LTI with complete tracking records
 - **AI-assisted authoring workflow**: Structured guides and MCP tools for faster course development
 - **Rich UI components**: Images, video, accordions, tabs, and custom sandboxed HTML/JS embeds
@@ -26,13 +28,17 @@ If you're creating courses (non-technical or technical), use the **[User Guide](
 - **Themeable design**: CSS custom properties for easy brand customization
 - **Custom endpoints**: Optional webhooks for error reporting and learning record storage
 - **Live preview**: Visual editing, status dashboard, config panels, catalog browser, and full LMS simulation with debug tools
-- **[CourseCode Cloud](https://www.coursecodecloud.com)**: Deploy from CLI, share preview links, download any LMS format on demand — no rebuilds
-- **CourseCode Desktop**: Native app for Mac and Windows with AI-assisted editing and built-in preview
+- **[CourseCode Cloud](https://coursecodecloud.com)**: Deploy from CLI, share preview links, download any LMS format on demand — no rebuilds
+- **[CourseCode Desktop](https://coursecodedesktop.com)**: Native app for Mac and Windows with AI-assisted editing and built-in preview
 
 ---
 
 ## Installation
 
+This section is for the **CourseCode Framework CLI** (file-based workflow using Node.js and terminal commands).
+
+If you want the easiest setup with buttons and guided steps, use **[CourseCode Desktop](https://coursecodedesktop.com)** instead.
+
 ### Required
 
 Install [Node.js](https://nodejs.org/) (v18 or later), then run:
@@ -65,7 +71,7 @@ Open `http://localhost:4173` to view and edit your course.
 
 The example course included with every new project is a complete guide to using CourseCode.
 
-**New to CourseCode?** Start with the [User Guide](framework/docs/USER_GUIDE.md). It is the primary guide for both non-technical and technical course authors.
+**New to CourseCode?** If you want the easiest setup, start with **[CourseCode Desktop](https://coursecodedesktop.com)**. If you're using the framework CLI, start with the [User Guide](framework/docs/USER_GUIDE.md).
 
 ---
 
@@ -179,7 +185,7 @@ The preview server provides:
 
 When ready, deploy:
 
-**With [CourseCode Cloud](https://www.coursecodecloud.com)**: Push your course and get a live link. Cloud handles hosting, generates any LMS format on demand, and gives you sharable preview links with optional password protection. No ZIP files, no manual uploads.
+**With [CourseCode Cloud](https://coursecodecloud.com)**: Push your course and get a live link. Cloud handles hosting, generates any LMS format on demand, and gives you sharable preview links with optional password protection. No ZIP files, no manual uploads.
 
 ```bash
 coursecode deploy
@@ -218,7 +224,7 @@ For the full command list and deployment options, see the [User Guide](framework
 
 ## UI Components
 
-Build engaging slides with interactive elements. No coding required — your AI assistant handles the implementation.
+Build engaging slides with interactive elements. Start with AI assistance, then edit the generated files directly whenever you want more control.
 
 ### Media & Widgets
 

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/interactions/interactive-image.css

@@ -61,7 +61,7 @@
 .interactive-image-hotspot[data-color="primary"] { --hotspot-color: var(--color-primary, #14213d); }
 .interactive-image-hotspot[data-color="secondary"] { --hotspot-color: var(--color-secondary, #f18701); }
 .interactive-image-hotspot[data-color="success"] { --hotspot-color: var(--color-success, #1d7648); }
-.interactive-image-hotspot[data-color="danger"] { --hotspot-color: var(--color-danger, #f35b04); }
+.interactive-image-hotspot[data-color="danger"] { --hotspot-color: var(--color-danger, #c7322b); }
 .interactive-image-hotspot[data-color="warning"] { --hotspot-color: var(--color-warning, #f7b801); }
 .interactive-image-hotspot[data-color="info"] { --hotspot-color: var(--color-info, #4a6fa5); }
 .interactive-image-hotspot[data-color="light"] { --hotspot-color: var(--color-gray-50, #fafafa); }
@@ -71,7 +71,7 @@
 .interactive-image-hotspot[data-viewed-color="primary"] { --viewed-color: var(--color-primary, #14213d); }
 .interactive-image-hotspot[data-viewed-color="secondary"] { --viewed-color: var(--color-secondary, #f18701); }
 .interactive-image-hotspot[data-viewed-color="success"] { --viewed-color: var(--color-success, #1d7648); }
-.interactive-image-hotspot[data-viewed-color="danger"] { --viewed-color: var(--color-danger, #f35b04); }
+.interactive-image-hotspot[data-viewed-color="danger"] { --viewed-color: var(--color-danger, #c7322b); }
 .interactive-image-hotspot[data-viewed-color="warning"] { --viewed-color: var(--color-warning, #f7b801); }
 .interactive-image-hotspot[data-viewed-color="info"] { --viewed-color: var(--color-info, #4a6fa5); }
 .interactive-image-hotspot[data-viewed-color="light"] { --viewed-color: var(--color-gray-50, #fafafa); }

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);
+}